/* Uriel Iglesias, versión definitiva: base C (página de producto) + caída de logos de D */
@font-face{font-family:Geist;src:url(../assets/fuentes/Geist-Variable-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bruma:#E9F2F9;
  --blanco:#FFFFFF;--gris:#F5F5F7;--ink:#1D1D1F;--tenue:#5F5F64;--apagado:#C7C7CC;--linea:#D2D2D7;
  --cielo:#A6CEE9;--cielo-hondo:#7FB3D6;--acero:#3F6E93;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:16px;--nav:52px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blanco);color:var(--ink);font:400 17px/1.47 Geist,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p{margin:0}
.caja{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--gut)}
section{scroll-margin-top:var(--nav)}

/* ---------- barra ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav);z-index:50;background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);transition:box-shadow .2s}
.nav.sol{box-shadow:0 1px 0 rgba(0,0,0,.08)}
.nav-in{max-width:1200px;height:100%;margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:18px}
.nav-logo{display:flex;flex:none;align-items:center;line-height:0;opacity:1;transition:opacity .15s}
.nav-logo:hover{opacity:.7}
.nav-logo img{display:block;height:24px;width:auto}
.nav-links{display:none;gap:24px;margin-right:auto}
.nav-links a{font-size:16px;color:var(--tenue);text-decoration:none;transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-txt{margin-left:auto;font-size:16px;font-weight:500;color:var(--tenue);text-decoration:none;transition:color .15s}
.nav-txt:hover{color:var(--ink)}
.nav-cta{font-size:16px;font-weight:600;text-decoration:none;background:var(--cielo);color:var(--ink);padding:7px 14px;border-radius:999px;transition:background .15s}
.nav-cta:hover{background:var(--cielo-hondo)}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:17px;text-decoration:none;transition:transform .15s var(--ease),background .15s}
.btn:hover{background:#000}.btn:active{transform:scale(.97)}
.btn.grande{height:64px;padding:0 36px;font-size:20px}
.btn-txt{font-size:17px;font-weight:500;text-decoration:none;border-bottom:2px solid var(--cielo);padding-bottom:1px;transition:border-color .15s}
.btn-txt:hover{border-color:var(--ink)}

/* ---------- portada en capas ---------- */
.hero{position:relative;height:100svh;min-height:640px;display:flex;flex-direction:column;padding:calc(var(--nav) + 18px) var(--gut) 0;text-align:center;overflow:hidden;background:var(--blanco)}
.hero-txt{position:relative;z-index:6;will-change:transform,opacity}
.hero-h1{display:block}.hero-h1>.hero-tit,.hero-h1>.hero-frase{display:block}
.hero-tit{font-size:19.5vw;line-height:.9;font-weight:700;letter-spacing:-.055em}
.hero-tit span{display:inline-block;opacity:0;transform:translateY(.25em);animation:sube .5s var(--ease) forwards}
.hero-tit span:nth-child(2){animation-delay:.06s}
.hero-frase{margin:12px auto 0;max-width:15ch;font-size:7vw;line-height:1.02;font-weight:700;letter-spacing:-.045em;text-wrap:balance;opacity:0;transform:translateY(.3em);animation:sube .5s .16s var(--ease) forwards}
.hero-pie{position:absolute;z-index:7;left:var(--gut);bottom:28px;display:flex;opacity:0;animation:sube .5s .22s var(--ease) forwards}
.hero-btns{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hero-btns .btn{height:46px;padding:0 22px;font-size:16px}
.hero-escena{position:relative;z-index:2;flex:1 1 auto;min-height:0;margin-top:14px;padding-bottom:14px;opacity:0;transform:translateY(32px);animation:sube .55s .2s var(--ease) forwards}
.hero-figura{position:relative;height:100%;aspect-ratio:586/2033;margin:0 0 0 auto;right:5%}
.hero-disco{position:absolute;z-index:1;left:-70%;top:16%;width:240%;aspect-ratio:1;border-radius:50%;background:var(--cielo);will-change:transform}
.hero-aro{position:absolute;z-index:0;left:-105%;top:6%;width:310%;aspect-ratio:1;border-radius:50%;border:1.5px solid var(--cielo);opacity:.9;will-change:transform}
.hero-franja{position:absolute;z-index:2;left:-118%;top:30%;width:96%;height:4.4%;border-radius:999px;background:var(--acero);will-change:transform}
.hero-estrella{position:absolute;z-index:2;right:-62%;top:5%;width:34%;height:auto;will-change:transform}
.hero-foto{position:relative;z-index:3;width:100%;height:100%;object-fit:contain;object-position:50% 100%;will-change:transform}
/* tarjetitas de interfaz que orbitan */
.tj{position:absolute;z-index:4;will-change:transform;text-align:left}
.tj-in{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:16px;padding:10px 12px;box-shadow:0 0 0 1px rgba(29,29,31,.06),0 1px 2px rgba(29,29,31,.06),0 14px 34px -14px rgba(29,29,31,.28);font-size:12px;line-height:1.25;white-space:nowrap;opacity:0;transform:translateY(14px) scale(.94);animation:sube .5s var(--e) var(--ease) forwards}
.tj-txt{display:flex;flex-direction:column;gap:1px}
.tj-txt b{font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.tj-txt small{font-size:11px;color:var(--tenue)}
.tj-ico{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--bruma);color:var(--acero)}
.tj-factura .tj-ico{background:var(--ink);color:#fff}
.tj-crm .tj-in{flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px 12px}
.tj-cab{font:600 10px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.08em;color:var(--tenue)}
.tj-fila{display:flex;align-items:center;gap:9px}
.tj-av{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--cielo);color:var(--ink);font-size:10.5px;font-weight:700}
.tj-tag{margin-left:6px;font-size:10.5px;font-weight:600;color:var(--acero);background:var(--bruma);border-radius:999px;padding:4px 8px}
.tj-graf .tj-in{flex-direction:column;align-items:stretch;gap:8px;width:178px;padding:12px 12px 10px}
.tj-linea{display:block;width:100%;height:44px;overflow:visible}
.tj-area{fill:var(--bruma)}
.tj-trazo{fill:none;stroke:var(--acero);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:260;stroke-dashoffset:260;animation:traza 1.1s .9s var(--ease) forwards}
.tj-linea circle{fill:var(--acero);opacity:0;animation:sube .3s 1.8s forwards}
.tj-agente .tj-in{background:var(--ink);color:#fff;border-radius:999px;padding:9px 14px 9px 11px;font-weight:600;gap:8px}
.tj-punto{width:8px;height:8px;border-radius:50%;background:var(--cielo);box-shadow:0 0 0 0 rgba(166,206,233,.7);animation:late 1.6s ease-out infinite}
/* e19: avisos que van pasando; todos en la misma celda, la tarjeta mide lo que el más ancho y no salta */
.tj-col{flex-direction:column;align-items:stretch;padding:10px 12px 12px}
.rota{display:grid}
.rota>.r{grid-area:1/1;opacity:0;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease}
.rota>.r.on{opacity:1;transform:none;transition:opacity .32s .12s var(--ease),transform .32s .12s var(--ease)}
.rota>.r.sale{opacity:0;transform:translateY(-8px)}
.tj-col .r{display:flex;flex-direction:column;gap:8px}
.rota .tj-tag{margin-left:auto}
.tj-dom{padding-left:10px;border-left:1px solid rgba(255,255,255,.22);font:500 11px/1 "Geist Mono",ui-monospace,monospace;color:rgba(255,255,255,.62)}
@media (max-width:899px){
  .tj-agente .tj-in{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;row-gap:6px;border-radius:16px;padding:9px 14px 10px 11px}
  .tj-dom{grid-column:1/-1;grid-row:1;padding-left:0;border-left:0;font-size:10px}
}
/* sitio de cada tarjeta (móvil: Uriel a la derecha, tarjetas a su izquierda) */
.tj-factura{right:calc(100% + 8px);top:5%}
.tj-cita{right:calc(100% + 20px);top:30%}
.tj-agente{right:calc(100% - 14px);top:53%}
.tj-crm{display:none}
.tj-graf{display:none}
@keyframes traza{to{stroke-dashoffset:0}}
@keyframes late{70%{box-shadow:0 0 0 7px rgba(166,206,233,0)}100%{box-shadow:0 0 0 0 rgba(166,206,233,0)}}
@keyframes sube{to{opacity:1;transform:none}}

/* ---------- lo que hago ---------- */
.claves{background:var(--gris);padding:88px 0 96px}
.claves .revela{font-size:34px;line-height:1.14;font-weight:650;letter-spacing:-.035em;max-width:24ch}
.revela .p{color:#8C8C91;transition:color .2s}
.revela .p.on{color:var(--ink)}
.claves .revela .p.on{color:var(--acero)}
.cosas{list-style:none;margin:72px 0 0;padding:0}
.cosa{position:relative;display:grid;grid-template-columns:76px 1fr;column-gap:16px;align-items:start;padding:22px 0 30px}
.cosa-raya{position:absolute;left:0;right:0;top:0;height:2px;background:var(--linea);overflow:hidden}
.cosa-raya i{display:block;height:100%;background:var(--acero);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease)}
.cosa-num{position:relative;display:block;width:max-content;font-size:84px;line-height:.86;font-weight:700;letter-spacing:-.06em;opacity:0;transform:translateY(24px);transition:opacity .3s var(--ease),transform .5s var(--ease)}
.cosa-num .contorno{display:block;color:transparent;-webkit-text-stroke:1.5px var(--apagado);transition:opacity .2s linear .55s}
.cosa.on .contorno{opacity:0}
.cosa-num .lleno{position:absolute;inset:0;overflow:hidden;transform:translateY(100%);transition:transform .55s cubic-bezier(.3,.9,.3,1) .1s}
.cosa-num .lleno i{display:block;font-style:normal;color:var(--ink);transform:translateY(-100%);transition:transform .55s cubic-bezier(.3,.9,.3,1) .1s}
.cosa-cuerpo{padding-top:6px}
.cosa h3{font-size:26px;line-height:1.06;font-weight:700;letter-spacing:-.04em;opacity:0;transform:translateY(14px);transition:opacity .3s var(--ease) .18s,transform .45s var(--ease) .18s}
.cosa p{font-size:15px;line-height:1.45;color:var(--tenue);margin-top:8px;max-width:44ch;opacity:0;transform:translateY(12px);transition:opacity .3s var(--ease) .28s,transform .45s var(--ease) .28s}
.cosa p a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:2px solid var(--cielo)}
.cosa p a:hover{border-color:var(--acero)}
.cosa.on h2,.cosa.on p,.cosa.on .cosa-num,.cosa.on .lleno,.cosa.on .lleno i{opacity:1;transform:none}
.cosa.on .cosa-raya i{transform:none}


/* ---------- mi historia ---------- */
.historia{background:var(--gris);min-height:100svh;display:flex;align-items:center;padding:96px 0;text-align:center}
.historia .caja{display:flex;flex-direction:column;align-items:center}
.sec-tit{font-size:48px;line-height:1.02;font-weight:700;letter-spacing:-.05em}
.historia-txt{font-size:30px;line-height:1.18;font-weight:650;letter-spacing:-.035em;margin-top:28px;max-width:22ch;text-wrap:balance}

/* ---------- cierre ---------- */
.contacto{background:var(--blanco);padding:104px 0 112px;text-align:center}
.contacto .caja{display:flex;flex-direction:column;align-items:center}
.contacto-tit{font-size:44px;line-height:1.02;font-weight:700;letter-spacing:-.05em;max-width:13ch;margin-bottom:36px}
.contacto-sub{font-size:19px;color:var(--tenue);margin:28px 0 0}
.contacto-sub a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:2px solid var(--cielo)}
.contacto-sub a:hover{border-color:var(--ink)}
.pie{background:var(--gris);border-top:1px solid var(--linea);padding:20px 0 28px;font-size:13px;color:var(--tenue)}
.pie .caja{display:flex;justify-content:space-between;gap:16px}
.pie a{text-decoration:none}

/* ---------- escritorio ---------- */
@media (min-width:900px){
  :root{--gut:32px}
  .nav-links{display:flex}
  .nav-logo{margin-right:14px}
  .nav-logo img{height:26px}
  .hero{min-height:700px;padding-top:calc(var(--nav) + 24px)}
  .hero-tit{font-size:min(9.2vw,150px);line-height:.86}
  .hero-frase{max-width:none;margin-top:14px;font-size:min(2.7vw,42px)}
  .hero-escena{margin-top:22px;padding-bottom:18px}
  .hero-figura{margin:0 auto;right:auto}
  .hero-disco{left:-75%;top:14%;width:250%}
  .hero-aro{left:-150%;top:2%;width:400%}
  .hero-franja{z-index:0;left:-165%;top:36%;width:150%;height:4%}
  .hero-estrella{right:-88%;top:3%;width:30%}
  .hero-pie{left:0;right:0;bottom:0;margin:0 auto;padding:0 var(--gut) 56px;justify-content:flex-end;align-items:flex-end;max-width:1264px;pointer-events:none}
  .hero-btns{align-items:flex-end;gap:16px;pointer-events:auto}
  .hero-btns .btn{height:48px;padding:0 24px;font-size:17px}
  .tj-in{font-size:14.5px;padding:13px 16px;border-radius:18px;gap:12px}
  .tj-txt small{font-size:12.5px}
  .tj-ico{width:34px;height:34px;border-radius:11px}
  .tj-factura{right:calc(100% + 150px);top:14%}
  .tj-cita{right:calc(100% + 70px);top:58%}
  .tj-agente{right:calc(100% + 190px);top:39%}
  .tj-crm{display:block;left:calc(100% + 96px);top:22%}
  .tj-graf{display:block;left:calc(100% + 40px);top:60%}
  .tj-graf .tj-in{width:206px}
  .claves{padding:160px 0}
  .claves .revela{font-size:64px;max-width:20ch}
  .cosas{margin-top:128px}
  .cosa{grid-template-columns:220px 1fr;column-gap:40px;padding:40px 0 52px}
  .cosa-num{font-size:168px}
  .cosa-cuerpo{padding-top:18px}
  .cosa h3{font-size:52px;letter-spacing:-.045em}
  .cosa p{font-size:19px;margin-top:14px}
  .historia{padding:160px 0}
  .sec-tit{font-size:88px}
  .historia-txt{font-size:52px;margin-top:44px;max-width:24ch}
  .contacto{padding:176px 0 184px}
  .contacto-tit{font-size:96px;max-width:12ch;margin-bottom:48px}
  .contacto-sub{font-size:24px;margin-top:32px}
  .btn.grande{height:76px;padding:0 48px;font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-tit span,.hero-frase,.hero-pie,.hero-escena{animation:none;opacity:1;transform:none}
  .cosa h3,.cosa p,.cosa-num,.cosa .lleno,.cosa .lleno i,.cosa-raya i{transition:none;opacity:1;transform:none}
  .tj-in,.tj-linea circle{animation:none;opacity:1;transform:none}
  .tj-trazo{animation:none;stroke-dashoffset:0}
  .tj-punto{animation:none}
  .rota>.r{transition:none}
  .cosa .contorno{transition:none;opacity:0}
}

/* ---------- he trabajado con: cinta continua ---------- */
.logos-sec{background:var(--blanco);padding:72px 0 80px;overflow:hidden}
.logos-tit{font-size:40px;line-height:1.02;font-weight:700;letter-spacing:-.05em;white-space:nowrap;margin-bottom:36px}
.cinta{display:flex;flex-direction:column;gap:14px}
.fila{overflow:hidden;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.fila.arrastra{cursor:grabbing}
.pasa{display:flex;width:max-content;gap:14px;margin:0;padding:6px 0;list-style:none;will-change:transform}
.ficha{position:relative;flex:none;height:84px;padding:0 30px;display:flex;align-items:center;justify-content:center;border-radius:20px;background:var(--bruma)}
.ficha img{display:block;height:var(--h);width:auto;max-width:none;pointer-events:none;transition:opacity .22s var(--ease)}
.ficha .lm{opacity:.72}
.ficha .lc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0}
.ficha.color .lm{opacity:0}.ficha.color .lc{opacity:1}
@media (hover:hover){.ficha:hover .lm{opacity:0}.ficha:hover .lc{opacity:1}}
.f-slurp{--h:30px}.f-youtube{--h:24px}.f-nude-project{--h:21px}.f-madrid-economic-forum{--h:40px}.f-abast{--h:28px}
.f-jose-elias{--h:62px}.f-audax{--h:30px}.f-eximia{--h:50px}.f-better-foods{--h:36px}
/* ---------- pie con redes ---------- */
.pie .caja{align-items:center}
.pie-der{display:flex;align-items:center;gap:20px}
.redes{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.redes a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;color:var(--tenue);transition:color .15s,background .15s}
.redes a:hover,.redes a:focus-visible{color:var(--acero);background:var(--blanco)}
.redes svg{display:block}
@media (max-width:520px){.pie .caja{flex-direction:column;align-items:flex-start;gap:12px}.pie-der{width:100%;justify-content:space-between}.redes{margin-left:-10px}}
@media (min-width:900px){
  .logos-sec{padding:120px 0 104px}
  .logos-tit{font-size:88px;margin-bottom:56px}
  .cinta,.pasa{gap:18px}
  .ficha{height:124px;padding:0 48px;border-radius:28px}
  .f-slurp{--h:40px}.f-youtube{--h:32px}.f-nude-project{--h:28px}.f-madrid-economic-forum{--h:54px}.f-abast{--h:38px}
  .f-jose-elias{--h:86px}.f-audax{--h:40px}.f-eximia{--h:68px}.f-better-foods{--h:48px}
}
@media (prefers-reduced-motion:reduce){
  .fila{-webkit-mask-image:none;mask-image:none;cursor:default}
  .pasa{width:auto;flex-wrap:wrap;justify-content:center;padding:6px var(--gut);transform:none!important}
}

/* ================= vuelta e5 (7-oct): portada de estudio, las cuatro que se encienden, mi historia en recorrido ================= */
:root{--negro:#050505}
/* portada: nombre en negro, frase en Acero, botones bajo la frase */
.hero-tit{color:var(--negro);font-size:18.6vw;line-height:.88;letter-spacing:-.06em}
.hero-frase{max-width:17ch;margin-top:16px;font-size:21px;line-height:1.22;font-weight:500;letter-spacing:-.022em;color:var(--acero)}
.hero-pie{position:relative;left:auto;bottom:auto;z-index:7;justify-content:center;margin-top:22px}
.hero-btns{flex-direction:row;align-items:center;gap:22px}
.hero-btns .btn{height:46px;padding:0 22px;font-size:16px;background:var(--negro)}
.hero-btns .btn-txt{font-size:16px}
.hero-escena{margin-top:18px;padding-bottom:0}
.hero-figura{margin:0 auto;right:auto;left:20%}
.hero-disco{left:-62%;top:20%;width:224%}
.hero-aro{left:-98%;top:9%;width:296%;opacity:.7}
.hero-estrella{right:-34%;top:4%;width:24%}
.tj-factura{right:calc(100% + 6px);top:14%}
.tj-agente{right:calc(100% - 46px);top:50%}
@media (min-width:900px){
  .hero{padding-top:calc(var(--nav) + 48px)}
  .hero-tit{font-size:min(9.4vw,148px);line-height:.86;letter-spacing:-.058em}
  .hero-frase{max-width:none;margin-top:20px;font-size:min(2.25vw,32px);font-weight:500;letter-spacing:-.025em}
  .hero-pie{position:relative;left:auto;right:auto;bottom:auto;margin:30px auto 0;padding:0;max-width:none;justify-content:center;align-items:center;pointer-events:auto}
  .hero-btns{flex-direction:row;align-items:center;gap:28px}
  .hero-btns .btn{height:50px;padding:0 26px;font-size:16px}
  .hero-escena{margin-top:34px}
  .hero-figura{left:auto}
  .hero-disco{left:-78%;top:15%;width:256%}
  .hero-aro{left:-142%;top:4%;width:384%}
  .hero-estrella{right:-96%;top:6%;width:26%}
  .tj-factura{right:calc(100% + 170px);top:22%}
  .tj-agente{right:calc(100% + 120px);top:52%}
  .tj-crm{left:calc(100% + 120px);top:34%}
}

/* lo que hago: el --l (0 a 1) lo pone el scroll; gris claro -> numero en Acero, titulo en negro, texto en gris */
.cosa{--l:0}
.cosa-num,.cosa h3,.cosa p{opacity:1;transform:none;transition:color .12s linear}
.cosa-num .contorno{color:color-mix(in srgb,var(--acero) calc(var(--l)*100%),#D2D2D7);-webkit-text-stroke:0;opacity:1;transition:color .12s linear}
.cosa.on .contorno{opacity:1}
.cosa-num .lleno{display:none}
.cosa h3{color:color-mix(in srgb,var(--negro) calc(var(--l)*100%),#8C8C91)}
.cosa p{color:color-mix(in srgb,var(--tenue) calc(var(--l)*100%),#6F6F74)}
.cosa p a{color:inherit}
.cosa-raya i{transform:scaleX(var(--l));transition:transform .12s linear}
.cosa.on .cosa-raya i{transform:scaleX(var(--l))}

/* mi historia: recorrido */
.historia{display:block;min-height:0;text-align:left;padding:96px 0 40px}
.historia .caja{display:block}
.hist{margin-top:40px}
.hist-panel{display:none}
.etapas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:72px}
.etapa-img{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:var(--bruma)}
.etapa-img img{width:100%;height:100%;object-fit:cover}
.etapa-tag{margin-top:24px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--acero)}
.historia .etapa-txt{margin-top:10px;max-width:22ch;font-size:30px;line-height:1.16;text-align:left;text-wrap:pretty}
@media (min-width:900px){
  .historia{padding:160px 0 80px}
  .hist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:96px;margin-top:24px}
  .hist-panel{display:block;position:sticky;top:calc(var(--nav) + (100svh - var(--nav) - min(72svh,690px)) / 2);height:min(72svh,690px);align-self:start}
  .hist-marco{position:relative;height:100%;aspect-ratio:4/5;max-width:100%;border-radius:32px;overflow:hidden;background:var(--bruma)}
  .hist-cuadro{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .35s var(--ease),transform .5s var(--ease)}
  .hist-cuadro.on{opacity:1;transform:none}
  .hist-cuadro img{width:100%;height:100%;object-fit:cover}
  .etapas{gap:0}
  .etapa{min-height:86svh;display:flex;flex-direction:column;justify-content:center}
  .etapa-img{display:none}
  .etapa-tag{margin-top:0;font-size:17px}
  .historia .etapa-txt{margin-top:14px;font-size:50px;line-height:1.08;max-width:15ch}
}
@media (prefers-reduced-motion:reduce){
  .hist-cuadro{transition:none;transform:none}
  .cosa-num .contorno,.cosa h3,.cosa p,.cosa-raya i{transition:none}
}

/* ================= vuelta e6 (7-oct): mi historia en seis etapas con fotos suyas ================= */
.historia .etapa-txt{font-size:26px;line-height:1.2;max-width:24ch}
.etapas{gap:64px}
.etapa-img img{object-position:50% 40%}
@media (min-width:900px){
  .etapas{gap:0}
  .etapa{min-height:78svh}
  .historia .etapa-txt{font-size:38px;line-height:1.14;max-width:19ch}
}
@media (max-width:899px){
  .etapa-img{aspect-ratio:1/1}
  .historia .etapa-txt{font-size:24px}
  .etapa-tag{margin-top:18px}
}

/* ================= vuelta e7 (7-oct): mi historia entera, diez etapas en línea de tiempo ================= */
.etapa-num{display:inline-block;margin-right:12px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:650}
.etapa-num span{color:#6F6F74;font-weight:500}
.etapa-img video{display:block;width:100%;height:100%;object-fit:cover}
.etapa-mini{display:flex;gap:10px;margin-top:20px}
.etapa-mini img{width:calc(50% - 5px);max-width:200px;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:var(--bruma)}
.etapas{gap:56px}
@media (max-width:899px){
  .etapas{position:relative}
  .historia .etapa-txt{font-size:24px;line-height:1.22}
}
@media (min-width:900px){
  .etapas{gap:0;position:relative;border-left:1px solid var(--linea);padding-left:40px}
  .etapa{min-height:64svh;position:relative}
  .etapa::before{content:"";position:absolute;left:-45px;top:50%;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--gris);border:1px solid var(--apagado);transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
  .etapa.activa::before{background:var(--ink);border-color:var(--ink);transform:scale(1.25)}
  .historia .etapa-txt{font-size:34px;line-height:1.14;max-width:20ch}
  .hist-cuadro video{width:100%;height:100%;object-fit:cover;display:block}
  .hist-cont{position:absolute;left:20px;top:20px;z-index:2;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:14px;font-weight:500;color:var(--tenue);font-variant-numeric:tabular-nums;box-shadow:0 1px 2px rgba(0,0,0,.08)}
  .hist-cont b{color:var(--ink);font-weight:650}
  .hist-barra{display:block;width:56px;height:3px;margin-left:6px;border-radius:3px;background:var(--linea);overflow:hidden}
  .hist-barra i{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,.1));transition:transform .3s var(--ease)}
}
.hist-cont{display:none}
@media (min-width:900px){.hist-cont{display:flex}}
@media (prefers-reduced-motion:reduce){.etapa::before,.hist-barra i{transition:none}}

/* e8 · pulido movil: zonas de toque de 44 px sin cambiar el dibujo y letra minima de 12 px */
@media (max-width:899px){
  .nav-txt,.nav-cta,.hero-btns .btn-txt,.contacto-sub a,.pie p a,.pie a[href^="mailto"]{position:relative}
  .nav-txt::after,.nav-cta::after,.hero-btns .btn-txt::after,.contacto-sub a::after,.pie a[href^="mailto"]::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
  .nav-txt::after{left:-10px;right:-4px}
  .redes a{width:44px;height:44px}
  .redes{gap:2px}
  .tj-txt small{font-size:12px}
}

/* ---------- gente con la que he coincidido (e9) ---------- */
.con{background:var(--blanco);padding:96px 0 24px;overflow:hidden}
.con-lista{list-style:none;margin:36px calc(-1*var(--gut)) 0;padding:0 var(--gut) 8px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.con-lista::-webkit-scrollbar{display:none}
.con-item{flex:none;width:76vw;max-width:340px;scroll-snap-align:start}
.con-item figure{position:relative;margin:0;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:var(--bruma)}
.con-item img,.con-item video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s var(--ease)}
.con-item figcaption{position:absolute;left:12px;bottom:12px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.c-jose img{object-position:50% 30%}.c-eximia img{object-position:50% 28%}.c-b3tter img{object-position:60% 50%}.c-youtube img{object-position:50% 60%}
@media (min-width:900px){
  .con{padding:140px 0 40px}
  .con-lista{margin:44px 0 0;padding:0;overflow:visible;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:270px;gap:16px}
  .con-item{width:auto;max-width:none}
  .con-item figure{aspect-ratio:auto;height:100%;border-radius:28px}
  .con-item figcaption{left:16px;bottom:16px;font-size:15px}
  .con-item:hover img,.con-item:hover video{transform:scale(1.04)}
  .c-jose{grid-column:1;grid-row:1/3}.c-nude{grid-column:2/4;grid-row:1}.c-forum{grid-column:4;grid-row:1/3}
  .c-youtube{grid-column:2;grid-row:2}.c-b3tter{grid-column:3;grid-row:2/4}.c-abast{grid-column:1/3;grid-row:3}.c-eximia{grid-column:4;grid-row:3}
}
@media (prefers-reduced-motion:reduce){.con-item img,.con-item video{transition:none}.con-item:hover img,.con-item:hover video{transform:none}}

/* ---------- e12: título oculto para lectores y buscadores + preguntas frecuentes ---------- */
.oculto{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.faq{background:var(--blanco);padding:88px 0 0}
.faq-tit{margin-bottom:32px}
.faq-lista{border-top:1px solid var(--linea)}
.faq-item{border-bottom:1px solid var(--linea)}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:18px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--acero);outline-offset:4px;border-radius:4px}
.faq-item h3{font-size:19px;line-height:1.25;font-weight:600;letter-spacing:-.02em;transition:color .15s}
.faq-item summary:hover h3{color:var(--acero)}
.faq-mas{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:var(--gris);transition:transform .25s var(--ease),background .15s}
.faq-mas::before,.faq-mas::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;border-radius:2px;background:var(--ink)}
.faq-mas::after{transform:rotate(90deg)}
.faq-item[open] .faq-mas{transform:rotate(45deg);background:var(--bruma)}
.faq-item p{color:var(--tenue);font-size:17px;line-height:1.5;max-width:60ch;padding:0 48px 24px 0}
@media (min-width:900px){
  .faq{padding:150px 0 0}
  .faq-in{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
  .faq-tit{font-size:72px;position:sticky;top:calc(var(--nav) + 32px);margin:0}
  .faq-item summary{min-height:80px;padding:22px 0}
  .faq-item h3{font-size:24px}
  .faq-item p{font-size:19px;padding-bottom:30px}
}
@media (prefers-reduced-motion:reduce){.faq-mas,.faq-item h3{transition:none}}

/* mapa del pie */
.pie .mapa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;align-items:start;padding-top:20px;padding-bottom:28px;margin-bottom:20px;border-bottom:1px solid var(--linea)}
.mapa p{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:10px}
.mapa ul{margin:0;padding:0;list-style:none}
.mapa li+li{margin-top:8px}
.mapa a{font-size:14px;color:var(--tenue);display:inline-block;padding:2px 0}
.mapa a:hover{color:var(--ink)}
@media (min-width:900px){.pie .mapa{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* e15 · pulido móvil: sin viudas en títulos ni párrafos y zonas de toque de 44 px sin cambiar el dibujo */
h1,h2,h3,summary{text-wrap:balance}
p,li,figcaption{text-wrap:pretty}
@media (max-width:899px){
  .nav-logo{position:relative}
  .nav-logo::after{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%)}
  .pie .mapa li+li{margin-top:0}
  .pie .mapa a{display:flex;align-items:center;min-height:44px;padding:0}
}

/* ================= e15 (8-oct): MÓVIL A TOPE. Solo por debajo de 900 px; el escritorio no cambia ================= */
@media (max-width:899px){
  /* portada: nombre, frase y botón, centrados y visibles desde el primer fotograma (sin entradas con retraso) */
  .hero-tit span,.hero-frase,.hero-pie,.hero-escena{animation:none;opacity:1;transform:none}
  .hero-txt{display:flex;flex-direction:column;align-items:center}
  .hero-tit>span{padding-right:.1em} /* el espaciado negativo de la última letra descentraba la tinta unos píxeles */
  .hero-frase{margin-left:auto;margin-right:auto}
  .hero-pie{justify-content:center;align-self:center}
  .hero-btns{justify-content:center}
  .hero-btns .btn{height:48px;padding:0 26px}
  /* letra base de 16 px como mínimo */
  .cosa p{font-size:16px}
  .pie .mapa a{font-size:16px}
  .pie{font-size:15px}
  /* mi historia: de diez pantallas en vertical (6.000 px) a un carrusel con imán; la siguiente asoma para invitar a deslizar */
  .historia{padding:72px 0 56px}
  .hist{margin-top:28px}
  .etapas{flex-direction:row;gap:12px;margin:0 calc(-1*var(--gut));padding:0 var(--gut) 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .etapas::-webkit-scrollbar{display:none}
  .etapa{flex:none;width:80vw;max-width:360px;scroll-snap-align:start}
  .etapa-img{aspect-ratio:4/5;border-radius:22px}
  .etapa-tag{margin-top:16px}
  .historia .etapa-txt{font-size:20px;line-height:1.28;max-width:none;margin-top:8px}
  .etapa-mini{margin-top:14px}
  .etapa-mini img{border-radius:12px}
  .historia .sec-tit,.con .sec-tit,.faq .sec-tit{font-size:40px}
  .claves{padding:72px 0 80px}
  .contacto{padding:88px 0 96px}
  .contacto-tit{font-size:40px}
}
@media (max-width:599px){
  .hero-btns .btn-txt{display:none} /* «Ver lo que hago» sobra en móvil: lo siguiente ya es lo que hago */
}

/* ================= e16: GUÍA, libro de tapa dura en CSS 3D (siempre cerrado) y formulario plano debajo ================= */
.guia{background:var(--gris);padding:80px 0 96px;overflow-x:clip;scroll-margin-top:var(--nav)}
.guia-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.guia-ceja{font-size:15px;font-weight:600;color:var(--acero);margin-bottom:12px}
.guia-tit{max-width:12ch}
.guia-sub{font-size:18px;line-height:1.45;color:var(--tenue);max-width:34ch;margin-top:16px}
.libro-escena{--pw:min(calc(100vw - 2*var(--gut) - 72px),300px);--ph:calc(var(--pw)*1.38);--g:16px;--rx:6deg;--ry:-16deg;
  width:100%;display:flex;justify-content:center;margin-top:48px;padding:6px 0 26px;perspective:1600px;perspective-origin:50% 40%;pointer-events:none}
.libro{position:relative;flex:none;width:var(--pw);height:var(--ph);transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry))}
/* bloque de hojas con canto (derecha y abajo) */
.libro-bloque{position:absolute;inset:0;background:#FBFAF7;border-radius:2px 10px 10px 2px;transform-style:preserve-3d;box-shadow:0 30px 60px -20px rgba(29,29,31,.35),0 2px 6px rgba(29,29,31,.08)}
.libro-bloque::before{content:"";position:absolute;right:0;top:3px;bottom:3px;width:var(--g);transform-origin:right center;transform:rotateY(90deg);background:repeating-linear-gradient(90deg,#F1EEE6 0 1px,#DEDAD0 1px 2px);border-radius:2px}
.libro-bloque::after{content:"";position:absolute;left:0;right:3px;bottom:0;height:var(--g);transform-origin:center bottom;transform:rotateX(-90deg);background:repeating-linear-gradient(0deg,#F1EEE6 0 1px,#DEDAD0 1px 2px)}
.libro-cinta{position:absolute;right:42px;bottom:-26px;width:14px;height:52px;background:var(--cielo-hondo);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);transform:translateZ(calc(var(--g)/2))}
/* tapa dura */
.libro-tapa{container-type:inline-size;position:absolute;left:0;top:-6px;width:calc(100% + 6px);height:calc(100% + 12px);transform:translateZ(calc(var(--g) + 1px));border-radius:4px 14px 14px 4px;overflow:hidden;color:#fff;text-align:left;
  background:radial-gradient(120% 70% at 85% 100%,rgba(166,206,233,.22),transparent 60%),linear-gradient(90deg,rgba(255,255,255,.10) 0 2px,rgba(0,0,0,.45) 2px 12px,rgba(255,255,255,.06) 12px 14px,transparent 22px),linear-gradient(160deg,#232326,#050505 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 24px 50px -18px rgba(5,5,5,.55)}
.libro-tapa::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 45%,transparent 60%);transform:translateX(calc(var(--brillo,0) * 1%));pointer-events:none}
.tapa-autor{position:absolute;left:30px;top:26px;font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--cielo)}
.tapa-tit{position:absolute;left:30px;right:30px;top:58px;font-size:31px;font-size:calc((100cqw - 64px)/8);line-height:.98;font-weight:700;letter-spacing:-.05em;text-wrap:balance}
.tapa-lema{position:absolute;left:30px;right:42%;bottom:26px;font-size:14px;line-height:1.3;color:#C7C7CC}
.tapa-estrella{position:absolute;right:-18%;bottom:-14%;width:64%;fill:var(--cielo);opacity:.95}
.tapa-sello{position:absolute;right:22px;top:26px;font-size:13px;font-weight:700;letter-spacing:.08em;color:#fff;opacity:.7}
/* formulario plano debajo del libro */
.guia-form{width:100%;max-width:400px;margin-top:40px;display:flex;flex-direction:column;gap:12px;text-align:left}
.campo{display:flex;flex-direction:column;gap:4px}
.campo span{font-size:15px;font-weight:500;color:var(--tenue)}
.campo input{height:48px;width:100%;border:1px solid var(--linea);border-radius:12px;background:#fff;padding:0 14px;font:400 16px Geist,system-ui,sans-serif;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.campo input:focus{outline:none;border-color:var(--acero);box-shadow:0 0 0 3px rgba(166,206,233,.6)}
.campo input[aria-invalid="true"]{border-color:#C0392B}
.campo-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.casilla{display:flex;align-items:center;gap:12px;min-height:44px;font-size:15px;line-height:1.3;color:var(--tenue);cursor:pointer}
.casilla input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--negro)}
.casilla a,.gracias-txt a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:2px solid var(--cielo);display:inline-block;padding:13px 0;margin:-13px 0}
.form-btn{width:100%;height:52px;margin-top:4px;border:0;cursor:pointer;background:var(--negro);font-family:inherit}
.form-btn[disabled]{opacity:.6;cursor:wait}
.form-aviso{min-height:20px;font-size:15px;color:#B03A2E}
.form-aviso:empty{min-height:0}
.guia-gracias{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0 0;text-align:center;outline:none}
.guia-gracias[hidden]{display:none}
.gracias-ok{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--cielo);color:var(--negro);animation:gracias-ok .4s var(--ease) both}
@keyframes gracias-ok{from{transform:scale(.6);opacity:0}}
.gracias-tit{font-size:40px;line-height:1;font-weight:700;letter-spacing:-.05em}
.gracias-txt{font-size:16px;line-height:1.45;color:var(--tenue);max-width:30ch}
.gracias-btn{margin-top:8px;background:var(--negro)}
@media (min-width:760px){
  .libro-escena{--pw:320px;margin-top:56px}
}
@media (min-width:900px){
  .guia{padding:150px 0 160px}
  .guia-sub{font-size:21px}
}
@media (prefers-reduced-motion:reduce){.gracias-ok{animation:none}}
@media (max-width:899px){.historia .etapa-txt .p{color:inherit}}

/* e17: en 360 la palabra «automatizaciones» a 48 px medía 381 px y se cortaba por los lados (venía de la v10) */
@media (max-width:380px){.guia-tit{font-size:40px}}