/* Creativezz — sistema visual
   Tipografía: Outfit (200/500/600/700/800) + JetBrains Mono
   Campos de color: papel (lectura) · rosa (su voz) · tinta (el trabajo)
   Alfabeto de signos: * marca y nota · / separador · {} disciplina · () aclaración · <> navegación · # índice */

:root{
  --pink:#ff009d; --paper:#fbfaf8; --ink:#111; --tinta:#0d0d0d;
  --f:'Outfit',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --m:clamp(20px,4.5vw,80px); --maxw:1720px; --lh:1.6; --nav:58px; --cruce:clamp(60px,10vh,150px);
  /* cabecera de Sobre mí — valores aprobados */
  --ast:12vw;  /* alto del asterisco */
  --foto:86vh; /* alto de la foto */
  --top:15vh;  /* a qué altura flota */
  --linea:rgba(128,128,128,.24);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f);background:var(--paper);color:var(--ink);padding-top:var(--nav);
     overflow-x:hidden;-webkit-font-smoothing:antialiased;
     transition:background .7s cubic-bezier(.4,0,.2,1),color .7s cubic-bezier(.4,0,.2,1)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{position:relative;z-index:2}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--m)}

/* ---------- campos ---------- */
[data-campo]{--bgc:var(--paper);--fgc:var(--ink)}
[data-campo=rosa]{--bgc:var(--pink);--fgc:#111}
[data-campo=tinta]{--bgc:var(--tinta);--fgc:#f4f2ef}

/* ---------- registros tipográficos ---------- */
.met{font-family:var(--mono);font-size:clamp(10px,.68vw,12px);letter-spacing:.11em;
     text-transform:uppercase;opacity:.62}
i.sg,.sg{font-style:normal;opacity:.4;font-weight:300}
/* los signos: alto en em o px, ancho calculado desde su propia proporción */
.sv{display:inline-block;height:1em;width:calc(1em * var(--r,1));fill:currentColor;flex:0 0 auto;
    vertical-align:-.06em}
.sv-ast{--r:0.988}.sv-hash{--r:0.839}.sv-lt{--r:0.940}.sv-gt{--r:0.940}
.sv-llo{--r:.355}.sv-llc{--r:.355}.sv-amp{--r:.890}
.ast{height:.5em;color:var(--pink)}
[data-campo=rosa] .ast{color:var(--ink)}
.astG{height:var(--ast);vertical-align:baseline}
.mk{font-weight:600;box-shadow:inset 0 -.34em 0 rgba(255,0,157,.28)}
[data-campo=rosa] .mk{box-shadow:inset 0 -.34em 0 rgba(255,255,255,.35)}
[data-campo=tinta] .mk{color:var(--pink);box-shadow:none}
.pill{display:inline-flex;align-items:center;border:1.5px solid currentColor;border-radius:100px;
      padding:.04em .5em;font-size:.55em;font-family:var(--mono);font-weight:400;letter-spacing:.05em;
      text-transform:uppercase;margin:0 .14em;vertical-align:.14em}
.par{font-family:var(--mono);font-size:.62em;opacity:.6;font-weight:400}
p{font-size:clamp(16px,1.05vw,18px);line-height:var(--lh)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;height:var(--nav);z-index:80;display:flex;align-items:center;
     gap:clamp(24px,4vw,64px);padding-inline:var(--m);background:var(--bgnav,var(--paper));
     color:var(--fgnav,var(--ink));border-bottom:1px solid rgba(128,128,128,.16);
     transition:background .7s,color .7s}
.nav .lc{font-weight:800;letter-spacing:-.035em;font-size:20px;flex:0 0 auto}
.nav .lc i{font-style:normal;font-weight:300;opacity:.5;margin-left:.14em}
.nav .links{display:flex;gap:clamp(14px,1.9vw,30px)}
.nav .links a{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;opacity:.65;
              transition:opacity .3s}
.nav .links a:hover{opacity:1}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;align-items:center;gap:9px;
        font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:10px 0}
.glifo{display:inline-flex;align-items:center;gap:4px;font-weight:300;font-size:17px;opacity:.85}
.barras{display:inline-flex;flex-direction:column;gap:3.5px;width:17px}
.barras b{display:block;height:1.6px;background:currentColor;
          transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .3s}
.abierto .barras b:nth-child(1){transform:translateY(5.1px) rotate(45deg)}
.abierto .barras b:nth-child(2){opacity:0}
.abierto .barras b:nth-child(3){transform:translateY(-5.1px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:79;background:var(--pink);color:#111;
      display:grid;grid-template-rows:var(--nav) 1fr auto;padding-inline:var(--m);
      clip-path:inset(0 0 100% 0);transition:clip-path .62s cubic-bezier(.16,1,.3,1);visibility:hidden}
.menu.on{clip-path:inset(0 0 0 0);visibility:visible}
.menu{overflow-y:auto;bottom:auto;height:100vh;height:100dvh}
.menu nav{align-self:center;display:flex;flex-direction:column;align-items:flex-end;gap:14px;padding-block:3vh 5vh}
/* cápsulas: círculo con el signo + cuello + cápsula con el nombre. Se escalonan a la derecha solas */
.caps{--d:min(68px,17vw);position:relative;display:inline-flex;align-items:center;gap:12px;height:var(--d);color:var(--ink);
      opacity:0;transform:translateX(40px);transition:opacity .5s,transform .7s cubic-bezier(.16,1,.3,1)}
.menu.on .caps{opacity:1;transform:none}
.menu.on .caps:nth-child(2){transition-delay:.08s}
.menu.on .caps:nth-child(3){transition-delay:.16s}
.caps .forma{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.caps .fuera{fill:currentColor}
.caps .dentro{fill:var(--pink);transition:fill .3s}
.caps .ic,.caps .lab{position:relative}
.caps .ic{width:var(--d);height:var(--d);display:flex;align-items:center;justify-content:center;gap:4px}
.caps .ic .sv{height:calc(var(--d) * .4)}
.caps .lab{padding:0 calc(var(--d) * .42) 0 calc(var(--d) * .36);font-weight:600;text-transform:uppercase;
           letter-spacing:-.01em;font-size:calc(var(--d) * .5);line-height:1}
.caps[aria-current] .dentro,.caps:active .dentro{fill:var(--ink)}
.caps[aria-current],.caps:active{color:var(--pink)}
.caps[aria-current] .fuera,.caps:active .fuera{fill:var(--ink)}
.caps:focus-visible{outline-offset:6px;border-radius:40px}
@media(max-height:520px){.caps{--d:46px}.menu nav{gap:8px;padding-block:8px}}
.menu .pieM{border-top:1px solid rgba(17,17,17,.22);display:flex;flex-direction:column;gap:9px;
            padding:18px 0 max(26px,env(safe-area-inset-bottom))}

/* ---------- hero · portada en capas ----------
   Apellido gigante a todo el ancho, detrás del retrato; su copia en contorno (.eco) va delante para que se lea
   entero. Grano solo en la foto. Elegida por Lara entre tres variantes (capas · bloque · base). */
.hero{position:relative;overflow:hidden}
.escena{position:relative;height:calc(100svh - var(--nav));min-height:560px;max-height:1180px;
        --cuerpo:calc((min(100vw,var(--maxw)) - 2 * var(--m)) / 3.56)}
.hero .fila{position:absolute;z-index:6;top:clamp(18px,3vh,40px);right:var(--m)}
.nombre{position:absolute;z-index:2;left:var(--m);right:var(--m);top:clamp(40px,8vh,110px);pointer-events:none}
.nombre .l1{display:block;font-size:clamp(34px,5.6vw,100px);font-weight:200;letter-spacing:-.02em;line-height:1}
.nombre .l2{display:block;font-size:var(--cuerpo);font-weight:800;letter-spacing:-.035em;line-height:.8;
            margin-left:-.045em;white-space:nowrap;clip-path:inset(-60% -4% -.08em -4%)}
.nombre .le{display:inline-block}
.eco{z-index:4;color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.eco .l1{visibility:hidden}
.hero .retrato{position:absolute;z-index:3;left:50%;bottom:0;height:94%;translate:-50% 0}
.hero .retrato img{height:100%;width:auto;max-width:none;filter:grayscale(1) contrast(1.12)}
.hero .pie{position:absolute;z-index:5;left:0;right:0;bottom:clamp(24px,5vh,64px);
           display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.cargo{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;
       gap:clamp(6px,.9vh,12px) clamp(10px,1vw,18px);font-weight:600;letter-spacing:-.028em;line-height:1;
       font-size:clamp(20px,2.2vw,40px)}
.cargo .sv-ast{grid-area:1/1;height:.9em;width:.9em}
.cargo b{grid-area:1/2;font-weight:inherit}
.cargo .pill{grid-area:2/2;justify-self:start;font-size:.5em}
.claim{font-weight:500;letter-spacing:-.02em;line-height:1.24;text-align:right;
       font-size:clamp(17px,1.6vw,28px);max-width:18ch;opacity:.9}
/* grano solo en la foto (recortado con su propia silueta): textura de impresión sin ensuciar el rosa */
.hero .retrato::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.7;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-mask:var(--foto) center/100% 100% no-repeat;mask:var(--foto) center/100% 100% no-repeat}
/* entrada: el apellido sube letra a letra desde su propia línea, por detrás de ella */
@keyframes entra{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes abre{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
@keyframes alza{from{transform:translateY(130%)}to{transform:none}}
@keyframes aparece{from{opacity:0;transform:translateY(5%) scale(1.03)}to{opacity:1;transform:none}}
.nombre .l1{animation:abre 1s .1s cubic-bezier(.76,0,.24,1) both}
.nombre .le{animation:alza 1.1s calc(.35s + var(--i) * .06s) cubic-bezier(.16,1,.3,1) both}
.hero .retrato{animation:aparece 1.3s .15s cubic-bezier(.16,1,.3,1) both;transform-origin:50% 100%}
.hero .fila,.hero .pie{animation:entra .85s .8s cubic-bezier(.16,1,.3,1) both}
/* al bajar, el nombre se aleja más rápido que ella: profundidad sin JS */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .nombre{animation:deriva linear both;animation-timeline:scroll(root);animation-range:0 100svh}
    @keyframes deriva{to{transform:translateY(-16vh)}}
  }
}

/* ---------- marquesina de clientes ---------- */
.marquee{position:relative;z-index:6;background:var(--tinta);color:#f4f2ef;overflow:hidden;
         display:flex;align-items:stretch;margin:0;transition:background .7s,color .7s}
/* la cinta se invierte con el campo dominante: negra sobre rosa, rosa sobre tinta. Nunca blanca. */
[data-campo-activo=tinta] .marquee{background:var(--pink);color:var(--ink)}
.marquee .etq{flex:0 0 auto;display:flex;align-items:center;gap:.35em;
              padding:clamp(18px,3vh,26px) clamp(16px,2.2vw,34px);border-right:1px solid var(--linea);
              font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;opacity:.5}
.marquee .cinta{flex:1 1 auto;overflow:hidden;
        -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 94%,transparent);
                mask-image:linear-gradient(90deg,transparent,#000 4%,#000 94%,transparent)}
.marquee ul{display:flex;gap:clamp(30px,3.4vw,58px);list-style:none;white-space:nowrap;width:max-content;
            padding:clamp(18px,3vh,26px) 0;animation:desfile 58s linear infinite}
.marquee:hover ul{animation-play-state:paused}
.marquee li{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
            display:flex;align-items:center;gap:clamp(30px,3.4vw,58px);opacity:.5;
            transition:opacity .3s,color .3s}
.marquee li:hover{opacity:1;color:var(--pink)}
[data-campo-activo=tinta] .marquee li:hover{color:var(--ink)}
.marquee li .ast{height:7px;opacity:.5;color:currentColor}

/* ---------- manifiesto de portada ---------- */
.manif{padding-block:clamp(80px,14vh,190px)}
.manif .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.2vw,40px)}
.manif .m1{grid-column:3/10;font-weight:500;letter-spacing:-.03em;line-height:1.12;
           font-size:clamp(24px,3.4vw,54px)}
.manif .m2{grid-column:6/12;margin-top:clamp(36px,6vh,80px);max-width:52ch;opacity:.85}
@keyframes desfile{to{transform:translateX(-50%)}}

/* ---------- cabecera de proyectos ---------- */
.cabproy{position:relative;z-index:5;padding-block:clamp(56px,10vh,140px) 0}
.cabproy .r1{display:flex;justify-content:space-between;align-items:center;gap:18px;
             padding-top:clamp(12px,1.8vh,22px);border-top:1px solid rgba(128,128,128,.22)}
.cabproy .tipos{display:flex;gap:clamp(18px,3vw,56px)}
/* título gigante: tamaño y corte los calcula galaxia.js según el ancho de la ventana */
.cabproy .gigante{overflow:hidden;font-weight:800;font-size:100px;margin:0}
.cabproy .gigante span{display:block;line-height:normal;white-space:nowrap;letter-spacing:-.05em}
/* filtros: no ocultan, encienden la red de su disciplina */
.filtro{background:none;border:0;padding:0;min-height:44px;text-align:left;cursor:pointer;transition:opacity .3s,color .3s}
.filtro:hover,.filtro[aria-pressed=true]{opacity:1}
.filtro[aria-pressed=true]{color:var(--pink)}

/* ---------- galaxia ---------- */
.mapa{position:relative;height:1800px;max-width:var(--maxw);margin-inline:auto;overflow-x:clip}
/* sinapsis: una sola capa canvas para hilos, red y nodos */
.hilos{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.hilos.bruma{filter:blur(9px)}
.polvo{position:absolute;inset:0;pointer-events:none;z-index:0}
.polvo i{position:absolute;border-radius:50%;background:currentColor}
.cl{position:absolute;left:calc(var(--l)*1%);top:calc(var(--t)*1%);z-index:3;
    transition:opacity .4s cubic-bezier(.4,0,.2,1)}
.nom{display:block;position:relative;z-index:5;white-space:nowrap;font-weight:800;
     letter-spacing:-.035em;line-height:.9;transition:color .4s}
.tag{display:block;margin-top:9px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
     text-transform:uppercase;opacity:.5}
.n1 .nom{font-size:clamp(40px,5vw,86px)}
.n2 .nom{font-size:clamp(24px,2.7vw,44px);font-weight:700}
.n3 .nom{font-size:clamp(17px,1.5vw,24px);font-weight:600}
.sat{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);width:calc(var(--w)*1.24);
     aspect-ratio:3/2;overflow:hidden;will-change:transform}
.sat img{width:100%;height:100%;object-fit:cover;transition:filter .55s}
.sat.z1{z-index:4}
.sat.z2{z-index:2;width:calc(var(--w)*1.04)}
.sat.z3{z-index:1;width:calc(var(--w)*.86)}
[data-campo=tinta] .sat img{filter:grayscale(1) contrast(1.06) brightness(.92)}
[data-campo=tinta] .sat.z2 img{filter:grayscale(1) brightness(.74)}
[data-campo=tinta] .sat.z3 img{filter:grayscale(1) brightness(.58)}
.mapa.foco .cl{opacity:.2}
.mapa.foco .cl.activo{opacity:1}
.cl.activo .sat img{filter:grayscale(0) brightness(1)!important}
.cl.activo .nom{color:var(--pink)}

/* ---------- cierre ---------- */
.end{background:var(--tinta);color:#f4f2ef;padding:clamp(70px,14vh,170px) var(--m) clamp(40px,7vh,80px)}
.end h2{font-weight:400;letter-spacing:-.045em;line-height:.84;font-size:clamp(48px,16vw,280px)}
.end .enlaces{display:flex;gap:clamp(18px,3vw,54px);flex-wrap:wrap;margin-top:clamp(30px,5vh,60px)}
.end .enlaces a{font-family:var(--mono);font-size:13px;letter-spacing:.08em;border-bottom:1px solid;padding-bottom:3px}
.end .foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
           margin-top:clamp(60px,10vh,120px)}
.end .foot .met{opacity:.75}

/* ---------- página de proyecto ---------- */
.phead{padding-block:clamp(34px,6vh,80px) clamp(30px,5vh,60px)}
.phead h1{font-weight:800;letter-spacing:-.04em;line-height:.86;font-size:clamp(52px,10vw,180px)}
.phead .subt{font-weight:600;letter-spacing:-.028em;font-size:clamp(20px,2.4vw,40px);
             line-height:1.06;margin-top:clamp(12px,2vh,22px);max-width:24ch}
.phead .sum{font-size:clamp(17px,1.6vw,26px);line-height:1.38;max-width:46ch;margin-top:clamp(20px,3vh,34px);opacity:.9}
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(18px,3vw,44px);
       border-top:1px solid var(--linea);padding-top:clamp(20px,3vh,34px);margin-top:clamp(30px,5vh,56px)}
.ficha .lbl{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
            opacity:.55;margin-bottom:7px}
.ficha p{font-size:clamp(15px,1.05vw,18px);line-height:1.45}
/* apertura a caballo entre el campo tinta y el papel */
.phead{padding-block:clamp(34px,6vh,80px) calc(var(--cruce) + clamp(30px,5vh,60px))}
.apertura{margin-top:calc(-1 * var(--cruce));position:relative;z-index:3;margin-bottom:0}
.apertura .marco{margin-left:auto;width:78%}
.apertura figcaption{display:none}

/* tramos sobre 12 columnas, con sangría alterna */
.tramo{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.2vw,40px);
       padding-block:clamp(50px,9vh,120px);align-items:start}
.tramo .ix{grid-column:1/3;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
           text-transform:uppercase;opacity:.5;padding-top:.6em}
.tramo .co{grid-column:3/10}
.tramo.der .ix{grid-column:3/5}
.tramo.der .co{grid-column:5/12}
.tramo h2{font-weight:700;letter-spacing:-.028em;font-size:clamp(22px,2.4vw,34px);line-height:1.1;margin-bottom:18px}
.tramo .body{max-width:60ch;opacity:.9}
.tramo .body + .body{margin-top:1em}
.tramo .ap{grid-column:10/13;padding-top:.4em}
.tramo .ap p{font-size:14px;line-height:1.55;color:#5f5b57}

/* un solo latido rosa por caso */
.franja{background:var(--pink);color:var(--ink);padding-block:clamp(50px,9vh,110px);
        margin-block:clamp(20px,3vh,40px)}
.franja .met{display:block;margin-bottom:26px;opacity:.55}
.franja p{font-weight:600;letter-spacing:-.03em;line-height:1.08;font-size:clamp(28px,4.6vw,76px);max-width:17ch}
.franja .ast{height:.42em;color:var(--ink);margin-right:.28em}

/* decisiones: índice al margen, filete entre líneas */
.deci{list-style:none;border-top:1px solid var(--linea);margin:0;padding:0}
.deci li{display:grid;grid-template-columns:3.2em 1fr;gap:clamp(14px,2vw,34px);align-items:baseline;
         padding:clamp(16px,2.4vh,26px) 0;border-bottom:1px solid var(--linea)}
.deci li u{text-decoration:none;font-family:var(--mono);font-size:clamp(15px,1.5vw,20px);
           color:var(--pink);letter-spacing:.04em}
.deci li span{font-size:clamp(17px,1.5vw,23px);line-height:1.3;letter-spacing:-.02em;font-weight:500;max-width:36ch}

/* díptico desigual */
.dipt{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(18px,2.4vw,44px);align-items:start;
      padding-block:clamp(30px,5vh,70px)}

/* flujo: el texto se queda, las pantallas pasan */
.flujo{display:grid;grid-template-columns:1fr 1.45fr;gap:clamp(24px,4vw,70px);
       padding-block:clamp(40px,7vh,90px);align-items:start}
.flujo .fijo{position:sticky;top:calc(var(--nav) + 6vh)}
.flujo h2{font-weight:700;letter-spacing:-.028em;font-size:clamp(22px,2.4vw,34px);margin-bottom:16px}
.flujo .fijo p{max-width:34ch;opacity:.9}
.flujo .pila{display:grid;gap:clamp(16px,2.6vh,34px)}
.flujo .pila figcaption{margin-top:12px}

/* cierre del caso */
.fin-caso{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.2vw,40px);
          padding-block:clamp(50px,9vh,120px)}
.fin-caso .imp{grid-column:1/6}
.fin-caso .imp h2{font-weight:700;letter-spacing:-.028em;font-size:clamp(22px,2.4vw,34px);margin-bottom:16px}
.fin-caso .lec{grid-column:6/13;font-weight:600;letter-spacing:-.03em;line-height:1.12;
               font-size:clamp(24px,3.4vw,52px)}
.fin-caso .lec .ast{height:.38em;margin-right:.24em}
.enlace{display:inline-flex;align-items:center;gap:.5em;border-bottom:1.5px solid var(--pink);
        padding-bottom:4px;font-weight:600;font-size:clamp(17px,1.5vw,22px);letter-spacing:-.02em;
        transition:color .35s}
.enlace:hover{color:var(--pink)}
.leccion{font-weight:600;font-size:clamp(19px,1.8vw,28px);line-height:1.24;letter-spacing:-.02em}
.ficha1{max-width:20ch;font-weight:200;letter-spacing:-.03em;line-height:1.1;
        font-size:clamp(28px,4vw,58px);padding-block:clamp(46px,8vh,100px)}
.ficha1 b{font-weight:800}
.ficha1 .ast{height:.42em;margin:0 .18em}
.ficha1 .ast.m{height:.62em}
.ficha1 .ast.l{height:.86em}
.ficha1:hover .ast{transform:rotate(90deg)}
.ficha1 .pie{display:block;margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.11em;
             text-transform:uppercase;opacity:.5;font-weight:400}
.ficha3{display:grid;gap:clamp(4px,.8vh,10px);font-weight:800;letter-spacing:-.045em;line-height:.86;
        font-size:clamp(30px,7.2vw,104px);text-transform:uppercase;padding-block:clamp(46px,8vh,100px)}
.ficha3 .ln{display:flex;align-items:center;gap:.14em}
.ficha3 .ln u{text-decoration:none;font-weight:200;letter-spacing:-.03em;opacity:.55}
.ficha3 .ast{height:.58em}
.ficha3 .hueco{flex:1 1 auto;height:.62em;min-width:40px;overflow:hidden;background:#e9e6e2}
.ficha3 .hueco img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .8s}
.ficha3:hover .hueco img{filter:grayscale(0)}
.ficha3 .fin{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
             margin-top:clamp(14px,2.4vh,26px);border-top:1px solid var(--linea);padding-top:12px}
.bleed{margin-block:clamp(34px,6vh,80px)}
.bleed img{width:100%;}
.bleed:hover img{}
.bleed figcaption{margin-top:14px;font-size:14px;line-height:1.5;color:#5f5b57;max-width:56ch}
.nota p{font-size:14px;line-height:1.6;color:#5f5b57;max-width:60ch}
/* pie de caso compacto: una franja con dos mitades, anterior | siguiente */
.navp{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid var(--linea);margin-top:clamp(50px,8vh,100px)}
.bt{display:flex;align-items:center;gap:clamp(12px,1.2vw,18px);padding:clamp(16px,2.2vh,24px) 0;min-width:0;
    -webkit-tap-highlight-color:transparent;transition:gap .5s cubic-bezier(.16,1,.3,1)}
.bt .txt2{min-width:0}
.bt.der{flex-direction:row-reverse;text-align:right;border-left:1px solid var(--linea);padding-left:clamp(12px,2vw,30px)}
.bt.izq{padding-right:clamp(12px,2vw,30px)}
.bt.pulsa .flecha{transform:scale(1.15);background:var(--pink);border-color:var(--pink);color:var(--ink)}
.bt.pulsa .tit2{color:var(--pink)}
.bt .flecha{flex:0 0 auto;display:grid;place-items:center;border-radius:50%;width:44px;aspect-ratio:1;
            border:1.5px solid currentColor;
            transition:background .45s,color .45s,border-color .45s,transform .55s cubic-bezier(.16,1,.3,1)}
.bt .flecha svg{width:40%;height:40%;display:block}
.bt .rot{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
         opacity:.5;margin-bottom:4px}
.bt .tit2{display:block;font-weight:700;letter-spacing:-.03em;font-size:clamp(17px,1.6vw,24px);line-height:1.1;
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .35s}
.bt:hover{gap:clamp(16px,1.8vw,26px)}
.bt:hover .flecha{background:var(--pink);border-color:var(--pink);color:var(--ink)}
.bt.izq:hover .flecha{transform:translateX(-4px)}
.bt.der:hover .flecha{transform:translateX(4px)}
/* número de tramo en los bloques sin rejilla (proceso e impacto) */
.flujo .ix,.fin-caso .ix{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;opacity:.6;margin-bottom:14px}

/* ---------- sobre mí ---------- */
.ahead{position:relative;z-index:2;padding-block:clamp(40px,7vh,96px) clamp(70px,12vh,160px)}
.ahero{position:relative}
/* la foto flota sobre la cabecera y el aterrizaje: ni fija arriba ni anclada abajo */
.acompanada{position:relative;overflow-x:clip}
.acompana{position:absolute;top:0;bottom:0;right:calc(var(--m) + 1vw);width:max-content;
          z-index:6;pointer-events:none}
.acompana .caja{position:sticky;top:var(--top);display:block;will-change:transform}
.acompana img{height:var(--foto);width:auto;filter:grayscale(1) contrast(1.06)}
/* asterisco papel gigante detrás de la foto: viaja con ella y gira al bajar */
.acompana .fondo{display:block;position:absolute;z-index:-1;left:50%;top:5%;translate:-50% 0;color:var(--paper)}
.acompana .fondo .sv{display:block;width:calc(var(--foto) * .8);height:calc(var(--foto) * .8)}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .acompana .fondo .sv,.fondo-ast .sv{animation:gira linear both;animation-timeline:scroll(root);animation-range:0 160vh}
    @keyframes gira{from{rotate:-50deg}to{rotate:70deg}}
  }
}
/* titular y entrada en la misma columna: sin llaves */
.ahero .tit{margin-top:clamp(18px,3vh,34px);max-width:74%}
.ahero h1{font-weight:800;letter-spacing:-.042em;line-height:.9;font-size:clamp(34px,5.6vw,96px)}
.ahero h1 em{display:block}   /* una frase por línea */
.ahero .ent{margin-top:clamp(40px,7vh,110px)}
.ahero .entrada{font-size:clamp(16px,1.32vw,21px);line-height:1.5;max-width:52ch;opacity:.92}

/* el bloque que recoge la foto: el asterisco marca el aterrizaje */
.retrato-about{display:grid;grid-template-columns:1fr;
               gap:clamp(20px,3.4vw,56px);align-items:center;
               padding-block:clamp(70px,13vh,190px) clamp(60px,11vh,150px)}
.retrato-about .astG{display:none}   /* el asterisco ya va detrás de la foto */
.retrato-about p{font-weight:600;font-size:clamp(30px,5vw,88px);line-height:1;letter-spacing:-.03em}
.retrato-about .mk{box-shadow:inset 0 -.2em 0 rgba(255,0,157,.32)}
[data-campo=rosa] .retrato-about .mk{box-shadow:inset 0 -.2em 0 rgba(255,255,255,.4)}
.rec{padding-block:clamp(56px,9vh,110px)}
.rec .cab{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.acc{display:flex;height:min(72vh,660px);width:100%;border-block:1px solid var(--linea)}
.acc .pan{flex:0 0 clamp(84px,7.4vw,124px);position:relative;overflow:hidden;cursor:pointer;
          border-right:1px solid var(--linea);
          transition:flex .85s cubic-bezier(.16,1,.3,1),background .6s,color .6s}
.acc .pan:last-child{border-right:0}
.acc .pan.on{flex:1 1 auto;background:var(--pink);color:var(--ink)}
.acc .tab{position:absolute;left:0;top:0;width:clamp(84px,7.4vw,124px);height:100%;display:flex;
          flex-direction:column;align-items:center;justify-content:space-between;gap:20px;
          padding:26px 0;pointer-events:none}
.acc .yr,.acc .emp{font-family:var(--mono);font-size:11px;letter-spacing:.14em;writing-mode:vertical-rl}
.acc .emp{font-weight:500;text-transform:uppercase;opacity:.55;transition:opacity .5s}
.acc .pan.on .emp{opacity:0}
.acc .ghost{position:absolute;right:2.5%;bottom:-7%;font-size:clamp(130px,20vw,320px);font-weight:800;
            line-height:.74;letter-spacing:-.07em;opacity:.1;pointer-events:none;transition:opacity .6s}
.acc .pan:not(.on) .ghost{opacity:0}
.acc .cont{position:absolute;left:clamp(84px,7.4vw,124px);top:0;right:0;height:100%;display:flex;align-items:center;
           padding:clamp(26px,3.2vw,60px) clamp(26px,4vw,70px);min-width:min(58vw,760px);
           opacity:0;transform:translateX(-18px);
           transition:opacity .45s .22s,transform .75s .22s cubic-bezier(.16,1,.3,1)}
.acc .pan.on .cont{opacity:1;transform:none}
.acc .inner{display:block;position:relative}
.acc .qh{display:block;font-weight:800;letter-spacing:-.035em;font-size:clamp(30px,4vw,68px);line-height:.98}
.acc .donde{display:block;font-weight:600;font-size:clamp(17px,1.5vw,24px);letter-spacing:-.01em;
            margin:10px 0 18px;opacity:.86}
.acc .txt{display:block;font-size:clamp(16px,1.15vw,19px);line-height:var(--lh);max-width:46ch}
.acc .firma{display:block;margin-top:26px;font-weight:300;font-size:22px;opacity:.4}
.como{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(12px,1.4vw,20px);
      padding-block:clamp(50px,9vh,110px)}
/* baldosas: una por paso. Etiqueta arriba, texto, icono macizo abajo. Rosa · papel · rosa */
.como .b{display:flex;flex-direction:column;gap:12px;min-height:clamp(250px,24vw,360px);
         padding:clamp(22px,2.2vw,34px);border-radius:28px;background:var(--pink);color:var(--ink)}
@supports (corner-shape:squircle){.como .b{border-radius:60px;corner-shape:squircle}}
.como .b:nth-child(2){background:var(--paper)}
.como .b > i{display:none}
.ico{display:block;width:clamp(56px,5vw,84px);height:clamp(56px,5vw,84px);color:var(--pink)}
.como .ico{order:3;margin-top:auto;color:var(--ink)}
.como .cif{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:inherit}
.como h3{font-weight:700;letter-spacing:-.03em;font-size:clamp(24px,2.2vw,34px);line-height:1}
.como p{max-width:32ch;font-size:clamp(15px,1.02vw,17px)}
.como .b .mk{color:inherit;box-shadow:inset 0 -.34em 0 rgba(255,255,255,.4)}
.como .b:nth-child(2) .mk{box-shadow:inset 0 -.34em 0 rgba(255,0,157,.3)}
.marco-sg{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(10px,2.4vw,46px);
          align-items:center;padding-block:clamp(50px,9vh,110px)}
.marco-sg .gr{height:clamp(64px,11vw,190px);color:var(--pink)}
.extracto{font-weight:500;letter-spacing:-.025em;line-height:1.2;font-size:clamp(20px,2.2vw,34px);max-width:30ch}
.listas{display:grid;grid-template-columns:1fr 2fr 1fr;gap:clamp(24px,3vw,48px);
        padding-block:clamp(40px,7vh,90px);border-top:1px solid var(--linea)}
/* columnas editoriales: número, título y filas con filete. Herramientas ocupa dos columnas */
.listas .num{display:block;font-weight:200;font-size:clamp(28px,2.6vw,44px);letter-spacing:-.02em;line-height:1;
             padding-top:clamp(14px,2vh,22px)}
.listas h3{font-weight:500;text-transform:uppercase;letter-spacing:-.01em;line-height:1;
           font-size:clamp(24px,2.4vw,40px);margin:clamp(48px,10vh,130px) 0 clamp(18px,3vh,30px)}
.chips{list-style:none;border-top:1px solid var(--linea)}
.chips li{padding:11px 0;border-bottom:1px solid var(--linea);font-size:clamp(14px,.95vw,16px);line-height:1.35;opacity:.75;
          break-inside:avoid}
.listas > div:nth-child(2) .chips{columns:2;column-gap:clamp(24px,3vw,48px)}
.fuera{padding-block:clamp(50px,9vh,110px)}
.acciones{display:flex;gap:14px;flex-wrap:wrap;padding-top:38px;padding-bottom:clamp(60px,10vh,120px)}
.acciones a{border:1.5px solid currentColor;border-radius:100px;padding:14px 26px;
            font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
            transition:background .4s,color .4s}
.acciones a.solid{background:var(--pink);border-color:var(--pink);color:var(--ink)}
.acciones a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ---------- móvil ---------- */
@media(max-width:900px){
  :root{--nav:54px}
  .nav .links{display:none}
  .burger{display:inline-flex}
  /* portada en móvil: el retrato sube hasta morder el apellido; cargo y frase debajo, centrados con ella */
  .escena{height:calc(100svh - var(--nav) - 150px);min-height:470px;max-height:none}
  .nombre{top:clamp(52px,8svh,72px)}
  .nombre .l1{font-size:clamp(30px,9vw,48px)}
  .hero .retrato{height:auto;top:calc(clamp(52px,8svh,72px) + clamp(30px,9vw,48px) + var(--cuerpo) * .5)}
  .hero .pie{position:static;flex-direction:column;align-items:center;gap:14px;text-align:center;
             padding:20px var(--m) 30px}
  .cargo{font-size:clamp(22px,6.4vw,30px);justify-content:center}
  .cargo .pill{grid-area:2/1/3/3;justify-self:center}
  .claim{text-align:center;font-size:18px;max-width:none}
  .cabproy{padding-block:40px 0}
  .cabproy .r1{flex-direction:column;align-items:stretch;gap:6px}
  .cabproy .r1 > .met{text-align:right}
  .cabproy .tipos{justify-content:space-between;gap:8px}
  .hilos,.polvo{display:none}
  /* galaxia en móvil: constelación vertical en zigzag. Varias por pantalla; la que pasa por el centro se enciende */
  .mapa{height:auto;display:block;overflow:visible;padding-block:3vh 6vh}
  .cl{position:relative!important;left:auto!important;top:auto!important;display:block;opacity:1!important;
      padding:44vw var(--m) 0;margin-bottom:clamp(36px,8vh,70px)}
  .cl:has(.sat:nth-of-type(2)){padding-top:50vw}
  .cl:has(.sat:nth-of-type(3)){padding-top:60vw}
  .cl .nom{white-space:normal;position:relative}
  .n1 .nom{font-size:10.5vw}.n2 .nom{font-size:8.6vw}.n3 .nom{font-size:7vw}
  .sat,.sat.z2,.sat.z3{top:0;left:auto;right:auto;animation:flota var(--dur,9s) var(--del,0s) ease-in-out infinite alternate}
  .sat:nth-of-type(1){width:56vw;left:var(--m);z-index:3}
  .sat:nth-of-type(2){width:36vw;right:var(--m);top:20vw;z-index:2;--dur:11s;--del:-3s}
  .sat:nth-of-type(3){width:26vw;left:46vw;top:40vw;z-index:1;--dur:13s;--del:-5s}
  .cl:nth-of-type(even){text-align:right}
  .cl:nth-of-type(even) .sat:nth-of-type(1){left:auto;right:var(--m)}
  .cl:nth-of-type(even) .sat:nth-of-type(2){right:auto;left:var(--m)}
  .cl:nth-of-type(even) .sat:nth-of-type(3){left:auto;right:46vw}
  .manif{padding-block:64px}
  .manif .m1,.manif .m2{grid-column:1/-1}
  .manif .m1{font-size:23px}
  .manif .m2{margin-top:28px}
  .listas,.como,.retrato-about,.dipt,.flujo{grid-template-columns:1fr}
  .listas{gap:48px}
  .listas h3{margin:20px 0 16px}
  .como .b{min-height:220px}
  .marquee{display:block}
  .marquee .etq{border-right:0;border-bottom:1px solid var(--linea);justify-content:center}
  .ahero .ent{margin-top:26px}
  .ahero .tit,.ahero .ent{max-width:100%}
  /* Trayectoria en móvil: foto centrada delante de un asterisco papel gigante que gira al bajar; el saludo, grande, debajo */
  .acompana{position:relative;top:auto;bottom:auto;right:auto;width:auto;margin:34px 0 0;display:flex;justify-content:center}
  .acompana .caja{position:relative;top:auto;z-index:0}
  .acompana img{height:min(62svh,560px);width:auto;max-width:86vw}
  .acompana .fondo{top:4%}
  .acompana .fondo .sv{width:104vw;height:104vw;animation-timeline:view();animation-range:cover}
  .retrato-about{grid-template-columns:1fr;padding:26px var(--m) 70px;margin-top:0}
  .retrato-about p{font-size:13.4vw;line-height:.95;letter-spacing:-.04em}
  .marco-sg{grid-template-columns:1fr;gap:0}
  .marco-sg .gr{height:15vw}
  .marco-sg .gr:last-child{text-align:right}
  .flujo .fijo{position:static}
  .tramo{grid-template-columns:1fr;gap:10px;padding-block:46px}
  .tramo .ix,.tramo .co,.tramo .ap,.tramo.der .ix,.tramo.der .co{grid-column:1/-1}
  .apertura .marco{width:100%}
  .fin-caso{grid-template-columns:1fr;gap:30px}
  .fin-caso .imp,.fin-caso .lec{grid-column:1/-1}
  .deci li{grid-template-columns:2.4em 1fr;gap:14px}
  .acc{display:block;height:auto;border-bottom:0}
  .acc .pan{flex:none;width:100%;border-right:0;border-bottom:1px solid var(--linea);min-height:0}
  .acc .tab{position:relative;width:100%;height:auto;flex-direction:row;justify-content:space-between;
            align-items:center;padding:20px var(--m);gap:0}
  .acc .yr,.acc .emp{writing-mode:horizontal-tb}
  .acc .pan.on .emp{opacity:.55}
  .acc .ghost{display:none}
  .acc .cont{position:relative;left:auto;top:auto;right:auto;height:auto;min-width:0;display:block;padding:0;
             opacity:1;transform:none;max-height:0;overflow:hidden;
             transition:max-height .62s cubic-bezier(.16,1,.3,1)}
  .acc .pan.on .cont{max-height:600px}
  .acc .inner{padding:2px var(--m) 32px}
  .acc .qh{font-size:9.5vw}
  .acc .firma{margin-top:18px}
  .navp{margin-top:clamp(40px,7vh,70px)}
  .bt{padding-block:14px;gap:10px}
  .bt .flecha{width:40px}
  .bt .tit2{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body,.cl,.sat,.ast,.acc .pan,.acc .cont,.menu,.caps,.sat,.bt,.bt .flecha,.bt .tit2,
  .hero .fila,.hero .pie,.nombre .l1,.nombre .le,.hero .retrato{transition:none;animation:none}
  .marquee ul{animation:none}
}

@keyframes flota{from{transform:translate(-4px,5px)}to{transform:translate(4px,-6px)}}

/* ---- Trayectoria: casos publicados dentro de cada etapa (provisional) ---- */
.casos{display:flex;flex-wrap:wrap;align-items:center;gap:.5em 1.1em;margin-top:22px}
.casos .met{flex:0 0 auto;opacity:.85}
.casos a{position:relative;font-weight:600;text-decoration:none;color:inherit}
.casos a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
                background:currentColor;opacity:.35;transition:opacity .25s}
.casos a:hover::after,.casos a:focus-visible::after{opacity:1}

/* el panel abierto es rosa dentro de un campo tinta: el resaltado se invertía
   a rosa sobre rosa y el texto desaparecía. Aquí se trata como campo rosa. */
.acc .pan.on .mk{color:var(--ink);box-shadow:inset 0 -.34em 0 rgba(255,255,255,.35)}

/* ---------- selector de idioma (menú) ---------- */
.menu .idiomas{display:flex;flex-direction:column;gap:8px;padding-bottom:12px;margin-bottom:4px;
               border-bottom:1px solid rgba(17,17,17,.22)}
.menu .idiomas .lista{display:flex;flex-wrap:wrap;gap:4px 16px}
.menu .idiomas button{font:inherit;font-size:15px;color:inherit;background:none;border:0;padding:4px 0;
                      cursor:pointer;opacity:.6;border-bottom:1px solid transparent}
.menu .idiomas button:hover,.menu .idiomas button:focus-visible{opacity:1}
.menu .idiomas button[aria-current]{opacity:1;border-bottom-color:currentColor}
.menu .idiomas button .sg{font-style:normal;font-size:.8em;margin-left:2px;opacity:.7}
.menu .idiomas .nota{opacity:.55;text-transform:none;letter-spacing:.04em}

/* ---------- selector de idioma (barra, escritorio) ---------- */
.nav .lang{position:relative;margin-left:auto}
.nav .lang-btn{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:inherit;
               background:none;border:0;padding:8px 0;cursor:pointer;opacity:.65;transition:opacity .3s}
.nav .lang-btn:hover,.nav .lang-btn[aria-expanded=true]{opacity:1}
.nav .lang-btn .sg{font-style:normal}
.lang-pop{position:absolute;top:calc(100% + 16px);right:0;width:320px;padding:18px 20px;z-index:90;
          background:var(--pink);color:#111;font-family:var(--f);border:1px solid rgba(17,17,17,.2)}
.lang-pop[hidden]{display:none}
.lang-pop .idiomas{display:flex;flex-direction:column;gap:10px}
.lang-pop .idiomas .lista{display:flex;flex-wrap:wrap;gap:4px 16px}
.lang-pop .idiomas button{font:inherit;font-size:15px;color:inherit;background:none;border:0;padding:4px 0;
                          cursor:pointer;opacity:.6;border-bottom:1px solid transparent}
.lang-pop .idiomas button:hover,.lang-pop .idiomas button:focus-visible{opacity:1}
.lang-pop .idiomas button[aria-current]{opacity:1;border-bottom-color:currentColor}
.lang-pop .idiomas button .sg{font-style:normal;font-size:.8em;margin-left:2px;opacity:.7}
.lang-pop .idiomas .nota{opacity:.6;text-transform:none;letter-spacing:.04em}
@media(max-width:900px){ .nav .lang{display:none} }
/* portada en móvil apaisado: vuelve la composición de escritorio, a escala */
@media(max-width:900px) and (orientation:landscape) and (max-height:520px){
  .escena{height:calc(100svh - var(--nav));min-height:300px;--cuerpo:min(calc((100vw - 2 * var(--m)) / 3.56),36svh)}
  .nombre{top:10px}
  .nombre .l1{font-size:clamp(22px,7svh,34px)}
  .hero .retrato{top:auto;height:92%}
  .hero .pie{position:absolute;flex-direction:row;align-items:flex-end;text-align:left;padding:0 var(--m);bottom:14px}
  .cargo{font-size:17px;justify-content:start}
  .cargo .pill{grid-area:2/2;justify-self:start}
  .claim{text-align:right;font-size:15px;max-width:16ch}
}

/* ---- contraste (auditoría 24/09) ----
   Tinta sobre rosa tiene techo de 5,16:1: en campo rosa el texto va a opacidad ≥ .85.
   El resaltado .mk aclara el rosa en vez de oscurecerlo (3,88 → 6,68:1). */
[data-campo=rosa] .met,[data-campo-activo=rosa] .nav .links a{opacity:.85}
[data-campo-activo=rosa] .nav .links a:hover{opacity:1}
[data-campo-activo=tinta] .marquee li,[data-campo-activo=tinta] .marquee .etq{opacity:.85}
.tramo .ix,.bt .rot{opacity:.6}
.acc .firma{opacity:.7}
/* rosa pequeño sobre papel no llega a 4,5:1: el número va en tinta y el rosa pasa al filete */
.deci{border-top:2px solid var(--pink)}
.deci li u{color:inherit}
.enlace:hover{color:inherit;border-bottom-width:3px}
/* la entrada de Trayectoria son dos párrafos */
.ahero .entrada p{font-size:inherit;line-height:inherit}
.ahero .entrada p + p{margin-top:.9em}

/* ---------- Trayectoria · apertura «asoma» (ref. Bastien) ----------
   El saludo desfila gigante a sangre, a ritmo de lectura (JS fija la duración); Lara aparece entera por delante. */
.ahead{padding-top:0}
.asoma{position:relative;height:calc(100svh - var(--nav));min-height:520px;max-height:1100px;overflow:hidden}
.asoma .etq{position:absolute;z-index:3;top:clamp(20px,4vh,48px);left:max(var(--m),calc((100vw - var(--maxw)) / 2 + var(--m)))}
.saludo{position:absolute;z-index:1;left:0;right:0;top:15%;margin:0;overflow:hidden;white-space:nowrap;
        font-size:clamp(84px,14.5vw,290px);line-height:.9;letter-spacing:-.045em}
.saludo .cinta{display:inline-flex;width:max-content;animation:desfile 46s linear infinite}
.saludo .cinta > span{display:inline-flex;align-items:center;gap:.22em;padding-right:.22em}
.saludo .t1{font-weight:200}
.saludo .t2{font-weight:800}
.saludo .sv-ast{height:.62em;width:.62em;color:var(--paper)}
.asomada{position:absolute;z-index:2;left:50%;bottom:0;height:90%;translate:-50% 0;
         animation:asomarse 1.4s .35s cubic-bezier(.34,1.4,.64,1) both}
.asomada img{height:100%;width:auto;max-width:none;filter:grayscale(1) contrast(1.08)}
@keyframes asomarse{from{transform:translateY(22%)}to{transform:none}}
/* asterisco papel tenue detrás del texto de entrada: flota y gira al bajar */
.ahero .ent{position:relative;z-index:1}
.fondo-ast{position:absolute;z-index:0;right:6%;top:-4%;color:var(--paper);opacity:.32;pointer-events:none;
           animation:flotaAst 11s ease-in-out infinite alternate}
.fondo-ast .sv{display:block;width:clamp(300px,42vw,760px);height:clamp(300px,42vw,760px)}
@keyframes flotaAst{from{transform:translate(-12px,14px)}to{transform:translate(12px,-16px)}}
.ahero{padding-top:clamp(64px,11vh,150px)}
/* el texto de entrada, como el manifiesto de portada: primer párrafo grande y centrado, el segundo desplazado */
.ahero .entrada{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.2vw,40px);max-width:none;
                font-size:clamp(16px,1.32vw,21px)}
.ahero .entrada p:first-child{grid-column:3/10;font-weight:500;letter-spacing:-.03em;line-height:1.14;
                              font-size:clamp(23px,2.9vw,48px);opacity:1}
.ahero .entrada p + p{grid-column:6/12;margin-top:clamp(36px,6vh,80px);max-width:52ch}
@media(prefers-reduced-motion:reduce){.saludo .cinta,.asomada,.fondo-ast{animation:none}}
@media(max-width:900px){
  .asoma{height:calc(100svh - var(--nav));min-height:480px}
  .saludo{top:17%;font-size:25vw}
  .asomada{height:74%}
  .fondo-ast{right:-18vw;top:-2%}
  .fondo-ast .sv{width:86vw;height:86vw}
  .ahero{padding-top:44px}
  .ahero .entrada p:first-child,.ahero .entrada p + p{grid-column:1/-1}
  .ahero .entrada p:first-child{font-size:23px}
  .ahero .entrada p + p{margin-top:28px}
}

/* pie de página: aire alrededor del asterisco entre nombre y ciudad */
.end .foot .met .sv-ast{margin-inline:.55em}
/* coreano: no partir palabras por sílabas */
html[lang=ko] body{word-break:keep-all}