/* samuel76.com/links — diseno "Samuel 76 Links v2" (Claude Design), implementado tal cual.
   Las medidas, colores y curvas salen del prototipo sin retocar. */

@font-face{
  font-family:"Phosphor-Light";
  src:url("/assets/phosphor-light.woff2") format("woff2");
  font-weight:normal;font-style:normal;font-display:block;
}

html,body{
  margin:0;padding:0;
  background:#0A0A0A;color:#F4F4F0;
  scrollbar-width:none;-ms-overflow-style:none;
}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

a{color:#F4F4F0;text-decoration:none}
a:hover{color:#F4F4F0}
a:focus-visible{outline:2px solid #0021F3;outline-offset:4px}
::selection{background:#0021F3;color:#F4F4F0}

.ph{
  font-family:"Phosphor-Light" !important;
  font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;
  line-height:1;display:inline-block;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}

/* ---------------------------------------------------------------- lienzo */

.lienzo{
  position:relative;min-height:100vh;
  background:#0A0A0A;color:#F4F4F0;
  font-family:'Outfit',sans-serif;
  overflow-x:hidden;
}

#fondo{
  position:fixed;inset:0;width:100%;height:100%;
  display:block;z-index:0;background:#0A0A0A;
}
#grano{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ---------------------------------------------------------------- cabecera */

header{
  position:relative;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px clamp(20px,4vw,44px) 0;
}
.logo{width:40px;height:40px;mix-blend-mode:lighten}
.logo img{width:100%;height:100%;display:block;object-fit:contain}
header time{
  font-family:'Rock Salt',cursive;
  font-size:12px;letter-spacing:.04em;color:#F4F4F0;
}

/* ---------------------------------------------------------------- foto */

main{
  position:relative;max-width:460px;margin:0 auto;
  padding:8px 24px 72px;box-sizing:border-box;
}

.foto-fila{display:flex;justify-content:center;padding-top:30px}

.polaroid{
  position:relative;
  width:clamp(200px,58vw,280px);
  padding:9px 9px 24px;box-sizing:border-box;
  background:#F4F4F0;
  transform:rotate(-3deg);
  box-shadow:0 22px 44px -14px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.35);
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.polaroid:hover{transform:rotate(-1.4deg) translateY(-3px)}

.marco{
  position:relative;width:100%;aspect-ratio:4 / 5;
  overflow:hidden;background:#060E3A;
}
.marco img{width:100%;height:100%;display:block;object-fit:cover}

.noche-a{position:absolute;inset:0;pointer-events:none;background:#060E3A;mix-blend-mode:lighten}
.noche-b{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 95% at 50% 38%, rgba(10,10,10,0) 45%, rgba(10,10,10,.6) 100%);
}

.cinta{
  position:absolute;top:-15px;left:50%;width:96px;height:30px;
  transform:translateX(-50%) rotate(4deg);
  background:linear-gradient(180deg, rgba(244,244,240,.55), rgba(244,244,240,.38));
  box-shadow:0 1px 3px rgba(10,10,10,.28);
  clip-path:polygon(2% 6%, 9% 0, 18% 5%, 30% 1%, 44% 4%, 58% 0, 72% 4%, 86% 1%, 98% 5%, 100% 50%, 97% 96%, 84% 100%, 70% 95%, 55% 100%, 41% 96%, 27% 100%, 14% 95%, 3% 100%, 0 52%);
}

/* ---------------------------------------------------------------- identidad */

.identidad{
  margin-top:46px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;
}
.identidad h1{
  margin:0;font-family:'Outfit',sans-serif;font-weight:200;
  font-size:clamp(48px,13vw,76px);line-height:1;letter-spacing:.005em;color:#F4F4F0;
}
.identidad p{
  margin:0;max-width:16em;
  font-weight:300;font-size:15px;line-height:1.5;letter-spacing:.02em;
  color:rgba(244,244,240,.78);text-wrap:balance;
}

/* ---------------------------------------------------------------- lista */

nav{margin-top:52px;display:flex;flex-direction:column}

.fila{
  display:grid;grid-template-columns:34px minmax(0,1fr) 18px;
  column-gap:12px;align-items:baseline;
  padding:20px 0;
  color:#F4F4F0;text-decoration:none;
  background-image:
    linear-gradient(#F4F4F0, #F4F4F0),
    linear-gradient(90deg, rgba(244,244,240,0), rgba(244,244,240,.18) 14%, rgba(244,244,240,.18) 86%, rgba(244,244,240,0));
  background-repeat:no-repeat, no-repeat;
  background-position:left bottom, left bottom;
  background-size:0% 1px, 100% 1px;
  transition:background-size .7s cubic-bezier(.2,.7,.2,1), padding-left .45s cubic-bezier(.2,.7,.2,1);
}
.fila[data-video]{padding-bottom:24px}
.fila:hover{background-size:100% 1px, 100% 1px;padding-left:6px}

.num{font-weight:300;font-size:13px;letter-spacing:.14em;color:rgba(244,244,240,.62)}

.cuerpo{display:flex;flex-direction:column;gap:4px;min-width:0}
.cuerpo-video{gap:8px}

.etiqueta{
  display:flex;align-items:flex-start;gap:10px;
  font-weight:300;font-size:12px;line-height:1.5;letter-spacing:.2em;color:#F4F4F0;
}
.guion{width:18px;height:1.5px;margin-top:.72em;border-radius:2px;background:#0021F3;flex:none}
.etiqueta-txt{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-wrap:pretty;
}

.titulo{
  display:flex;align-items:center;gap:10px;
  font-weight:400;font-size:20px;line-height:1.2;letter-spacing:.01em;
}
.cuerpo-video .titulo{display:block;align-self:flex-start}
.titulo i{font-size:21px;line-height:1}

.sub{
  font-weight:300;font-size:14px;line-height:1.4;
  color:rgba(244,244,240,.68);overflow-wrap:anywhere;
}

/* 16:9 con relleno porcentual en vez de aspect-ratio: Safari calcula mal la altura cuando una
   caja con aspect-ratio vive dentro de una rejilla, y dejaba un hueco enorme bajo la portada. */
.mini{
  position:relative;display:block;width:100%;
  height:0;padding-top:56.25%;
  overflow:hidden;border-radius:2px;background:#060E3A;
}
.mini span{
  position:absolute;inset:0;display:block;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}

.flecha-fila{font-weight:300;font-size:18px;text-align:right}

/* ---------------------------------------------------------------- firma y flecha */

.firma{
  margin:68px 0 0;text-align:center;
  font-family:'Rock Salt',cursive;
  font-size:16px;line-height:1.6;letter-spacing:.02em;color:#F4F4F0;
}

#flecha{
  position:absolute;left:0;top:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;z-index:3;
  filter:drop-shadow(0 0 5px rgba(10,10,10,.55));
}
#flecha path{fill:none;stroke-linecap:round;stroke-linejoin:round}
#flecha.azul path{stroke:#0021F3;stroke-width:2.4}
#flecha.blanca path{stroke:#F4F4F0;stroke-width:2.2}

#sellos{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .polaroid,.fila{transition:none}
}

/* ---------------------------------------------------------------- la portada se pliega */

.video-txt{display:flex;flex-direction:column;gap:8px;min-width:0;text-decoration:none}

/* Se pliega con max-height en pixeles, que lo escribe el JavaScript midiendo la portada.
   Antes era una rejilla de 1fr a 0fr y en Safari dejaba cientos de pixeles muertos debajo;
   tampoco se usa var() de CSS para el alto, que no resolvia igual en todos los navegadores.
   Sin JavaScript no hay max-height y la portada simplemente se ve entera. */
.mini-caja{
  display:block;overflow:hidden;margin-top:6px;
  transition:max-height .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease, margin-top .45s cubic-bezier(.2,.7,.2,1);
}
.fila[data-plegado="1"]{padding-bottom:20px}
.fila[data-plegado="1"] .mini-caja{opacity:0;margin-top:0}

.plegar{
  align-self:center;justify-self:end;
  width:30px;height:30px;padding:0;
  display:grid;place-items:center;
  background:transparent;border:1px solid rgba(244,244,240,.22);border-radius:50%;
  color:#F4F4F0;cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.plegar:hover{border-color:#0021F3;background:rgba(0,33,243,.14)}
.plegar i{font-size:15px;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.fila[data-plegado="1"] .plegar i{transform:rotate(-90deg)}
.plegar-txt{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* ---------------------------------------------------------------- cuadro para escribir */

.pop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px}
.pop[hidden]{display:none}
.pop-fondo{position:absolute;inset:0;background:rgba(10,10,10,.82);backdrop-filter:blur(3px)}
.pop-caja{
  position:relative;width:min(360px,100%);
  background:#0F0F0F;border:1px solid rgba(244,244,240,.14);
  padding:30px 26px 26px;text-align:center;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9);
}
.pop-x{
  position:absolute;top:10px;right:10px;width:30px;height:30px;padding:0;
  display:grid;place-items:center;
  background:transparent;border:0;color:rgba(244,244,240,.55);cursor:pointer;font-size:16px;
}
.pop-x:hover{color:#F4F4F0}
.pop-ojo{
  margin:0 0 8px;font-weight:300;font-size:12px;
  letter-spacing:.2em;color:rgba(244,244,240,.62);
}
.pop-dir{
  margin:0 0 22px;font-weight:400;font-size:19px;letter-spacing:.01em;
  color:#F4F4F0;overflow-wrap:anywhere;
}
.pop-bots{display:flex;flex-direction:column;gap:9px}
.pop-bot{
  display:flex;align-items:center;gap:11px;
  padding:13px 16px;width:100%;box-sizing:border-box;
  background:transparent;border:1px solid rgba(244,244,240,.18);
  color:#F4F4F0;font:inherit;font-weight:300;font-size:15px;text-align:left;
  cursor:pointer;text-decoration:none;
  transition:border-color .2s ease, background .2s ease;
}
.pop-bot:hover{border-color:#0021F3;background:rgba(0,33,243,.12)}
.pop-bot i{font-size:19px;color:#0021F3;flex:none}
.pop-bot.primario{background:#0021F3;border-color:#0021F3;font-weight:400}
.pop-bot.primario:hover{background:#0b2cff;border-color:#0b2cff}
.pop-bot.primario i{color:#F4F4F0}

@media (prefers-reduced-motion:reduce){
  .mini-caja,.plegar i{transition:none}
}