/* Clau Romero™ · clauromero.com
   Tokens tomados del Clau Romero™ Design System (habla MARYLAND®, 2025). */

@font-face{font-family:"Now";src:url("../fonts/Now-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Now";src:url("../fonts/Now-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Now";src:url("../fonts/Now-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Now";src:url("../fonts/Now-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Neue Haas Unica Pro";src:url("../fonts/NeueHaasUnicaPro-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Neue Haas Unica Pro";src:url("../fonts/NeueHaasUnicaPro-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Neue Haas Unica Pro";src:url("../fonts/NeueHaasUnicaPro-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Business Signature";src:url("../fonts/BusinessSignatureDemo.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --jet-black:#141010;
  --cobalt-blue:#1c0c82;
  --cobalt-deep:#150963;
  --fog-grey:#d3d3d3;
  --fog-paper:#f2f2f2;
  --periwinkle-mist:#b3bbdb;
  --white:#ffffff;
  --text-muted:#5a5050;
  --border-hairline:rgba(20,16,16,.14);
  --border-hairline-invert:rgba(255,255,255,.22);
  --portal-glow:radial-gradient(circle at 50% 50%, #1c0c82 0%, #6889ff 100%);

  --font-display:"Now","Futura","Century Gothic",system-ui,sans-serif;
  --font-body:"Neue Haas Unica Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-script:"Business Signature","Snell Roundhand",cursive;

  --tracking-body:-0.009em;
  --tracking-label:0.16em;
  --ease:cubic-bezier(.22,.61,.36,1);
  --margin-page:clamp(16px,6vw,96px);
  --content-max:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--jet-black);
  font-family:var(--font-body);font-size:17px;line-height:1.5;letter-spacing:var(--tracking-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--cobalt-blue);outline-offset:2px}
strong{font-weight:700}
p{margin:0 0 1em}

.wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--margin-page)}

/* Logotipo tipográfico: CLAU en medium, ROMERO en light, ™ separado y en superíndice */
.wordmark{font-family:var(--font-body);font-size:15px;letter-spacing:.02em;text-decoration:none;white-space:nowrap;text-transform:uppercase}
.wordmark .c{font-weight:500}
.wordmark .r{font-weight:400;opacity:.92}
.wordmark sup{font-size:.55em;margin-left:.35em;vertical-align:.7em}
.wordmark--stacked{display:inline-flex;flex-direction:column;align-items:center;line-height:.95;font-size:22px}

.label{
  font-family:var(--font-body);font-size:12px;font-weight:500;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
}

/* Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  padding:16px 28px;border-radius:999px;border:1px solid var(--jet-black);
  background:var(--jet-black);color:var(--white);text-decoration:none;cursor:pointer;
  transition:background-color 240ms var(--ease),border-color 240ms var(--ease),color 240ms var(--ease);
}
.btn:hover{background:var(--cobalt-blue);border-color:var(--cobalt-blue)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--jet-black)}
.btn--ghost:hover{background:var(--jet-black);border-color:var(--jet-black);color:var(--white)}
.btn--light{background:var(--white);border-color:var(--white);color:var(--jet-black)}
.btn--light:hover{background:var(--periwinkle-mist);border-color:var(--periwinkle-mist);color:var(--jet-black)}
.btn--outline-light{background:transparent;border-color:rgba(255,255,255,.6);color:var(--white)}
.btn--outline-light:hover{background:var(--white);color:var(--jet-black)}
.arrow{font-family:var(--font-display)}

/* Cabecera */
.site-header{position:absolute;top:0;left:0;right:0;z-index:5;color:var(--white)}
.site-header .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:28px;padding-bottom:28px}
.site-header nav{display:flex;gap:28px}
.site-header nav a{text-decoration:none;font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:.85}
.site-header nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.site-header--dark{position:static;color:var(--jet-black);border-bottom:1px solid var(--border-hairline)}

/* Hero: tú, en video, con el logotipo a escala de titular (estructura tipo Jasmine Star) */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  background:var(--jet-black);color:var(--white);overflow:hidden;
}
.hero__media{position:absolute;inset:0}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;opacity:.55}
.hero .wrap{position:relative;width:100%;padding-top:120px;padding-bottom:clamp(40px,6vw,72px)}
.hero__labels{display:flex;justify-content:space-between;color:var(--fog-grey);margin-bottom:18px}
.hero__name{
  font-family:var(--font-body);text-transform:uppercase;line-height:.86;letter-spacing:-0.02em;
  font-size:clamp(68px,13vw,210px);margin:0;color:var(--white);
}
.hero__name .c{font-weight:500;display:block}
.hero__name .r{font-weight:300;display:block}
.hero__name sup{font-size:.22em;font-weight:400;vertical-align:2.6em;margin-left:.2em;letter-spacing:0}
.hero__role{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;border-top:1px solid var(--border-hairline-invert);margin-top:28px;padding-top:16px;color:var(--fog-grey)}
@media (min-width:900px){
  .hero__media{left:auto;width:46%}
  .hero__media video,.hero__media img{opacity:1}
  .hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--jet-black) 0%,rgba(20,16,16,0) 28%)}
}

/* Manifiesto: la tesis a escala */
.manifesto{background:var(--fog-paper);text-align:center}
.manifesto__kicker{font-size:clamp(17px,1.5vw,20px);line-height:1.4;max-width:40ch;margin:0 auto clamp(40px,5vw,64px)}
.manifesto h1{
  font-family:var(--font-display);font-weight:300;text-transform:uppercase;
  font-size:clamp(30px,5vw,74px);line-height:1.08;letter-spacing:-0.005em;
  color:var(--cobalt-blue);margin:0 auto clamp(40px,5vw,64px);max-width:18ch;
}
.manifesto h1 .script{
  display:block;font-family:var(--font-script);text-transform:none;font-weight:400;
  font-size:3.4em;line-height:1;letter-spacing:0;color:var(--cobalt-blue);margin:.1em 0 .05em;
}
.manifesto h1 b{font-weight:700}

/* Banda: DAR EL _SALTO, una sola vez, sangrando por los bordes */
.salto-band{background:var(--jet-black);color:var(--periwinkle-mist);padding:clamp(40px,6vw,80px) 0;overflow:hidden;white-space:nowrap}
.salto-band p{margin:0;font-family:var(--font-display);text-transform:uppercase;line-height:.88;font-size:clamp(84px,17vw,260px);letter-spacing:-0.01em}
.salto-band .l1{font-weight:300;padding-left:var(--margin-page)}
.salto-band .l2{font-weight:700;color:var(--white);text-align:right;margin-right:-0.06em}

/* Encabezado de sección a escala gigante, como "SPEAKING" */
.giant{font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:.86;letter-spacing:-0.01em;font-size:clamp(56px,11vw,170px);margin:0 0 clamp(32px,5vw,56px);white-space:nowrap}
.giant--light{font-weight:300}

/* Puertas: intro con foto */
.doors-intro{display:grid;gap:clamp(32px,5vw,64px);align-items:end;margin-bottom:clamp(40px,6vw,72px)}
.doors-intro .photo{aspect-ratio:4/5;overflow:hidden;background:var(--jet-black)}
.doors-intro .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.doors-intro .section-title{margin:0}
@media (min-width:900px){.doors-intro{grid-template-columns:4fr 7fr}}

/* Secciones */
section{padding:clamp(72px,10vw,140px) 0}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;border-bottom:1px solid var(--jet-black);padding-bottom:14px;margin-bottom:clamp(40px,6vw,72px)}
.section-head .label{color:var(--jet-black)}
.section-title{
  font-family:var(--font-display);font-weight:400;font-size:clamp(30px,3.6vw,52px);line-height:1.04;
  margin:0 0 clamp(40px,6vw,72px);max-width:20ch;color:var(--cobalt-blue);
}
.section-title b{font-weight:700}

/* Las tres puertas */
.doors{display:grid;gap:0;border-top:1px solid var(--border-hairline)}
.door{display:grid;gap:20px;padding:clamp(32px,4vw,48px) 0;border-bottom:1px solid var(--border-hairline)}
.door__num{color:var(--text-muted)}
.door h3{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3vw,40px);line-height:1.05;margin:0;text-transform:uppercase}
.door__axis{display:block;font-family:var(--font-body);font-weight:400;font-size:15px;text-transform:none;letter-spacing:0;color:var(--cobalt-blue);margin-top:10px}
.door__tagline{font-family:var(--font-display);font-weight:300;font-size:clamp(19px,1.7vw,23px);line-height:1.3;color:var(--cobalt-blue);margin:0}
.door__body p{max-width:56ch}
.door__meta{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin:4px 0 20px}
.door__note{font-size:15px;color:var(--text-muted)}
@media (min-width:900px){
  .door{grid-template-columns:120px 1fr 1.3fr;gap:40px;align-items:start}
}

/* Prueba / bio */
.bio{background:var(--fog-paper)}
.bio__grid{display:grid;gap:clamp(32px,6vw,80px);align-items:start}
.bio__photo{aspect-ratio:4/5;background:var(--jet-black);position:relative;overflow:hidden}
.bio__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
@media (max-width:899px){.bio__photo,.doors-intro .photo{aspect-ratio:4/3}}
.bio__photo--placeholder{background:var(--portal-glow);display:flex;align-items:flex-end;justify-content:flex-end;padding:28px;color:var(--white)}
.bio__text{font-size:clamp(17px,1.4vw,19px)}
.bio__name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(40px,5.6vw,84px);line-height:.92;margin:0 0 .25em;color:var(--jet-black)}
.bio__text .first{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,2.6vw,36px);line-height:1.1;color:var(--cobalt-blue);margin-bottom:.8em}
@media (min-width:900px){
  .bio__grid{grid-template-columns:5fr 6fr}
  .bio__text p:not(.first){text-align:justify;hyphens:auto;-webkit-hyphens:auto}
}

/* Cierre */
.closing{background:var(--jet-black);color:var(--white);position:relative;overflow:hidden}
.closing .script{font-family:var(--font-script);font-size:clamp(52px,7vw,96px);line-height:1;color:var(--periwinkle-mist);margin:0 0 8px}
.closing .lead{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,2.4vw,32px);line-height:1.25;max-width:30ch;margin:4px 0 36px}
.closing .actions{display:flex;flex-wrap:wrap;gap:14px}
.closing .question{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,2.8vw,40px);line-height:1.1;margin:clamp(64px,9vw,120px) 0 0;color:var(--periwinkle-mist);max-width:22ch}
.closing .question b{color:var(--white);font-weight:700}

/* Pie */
.site-footer{background:var(--jet-black);color:var(--fog-grey);border-top:1px solid var(--border-hairline-invert)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;padding-top:40px;padding-bottom:40px;font-size:13px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--white);text-decoration:underline;text-underline-offset:4px}
.site-footer .links{display:flex;gap:24px;flex-wrap:wrap}

/* Página de venta */
.sp-hero{background:var(--fog-paper);padding:clamp(48px,8vw,112px) 0}
.sp-hero .eyebrow{display:flex;justify-content:space-between;border-bottom:1px solid var(--jet-black);padding-bottom:14px;margin-bottom:clamp(40px,6vw,72px)}
.sp-hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,6vw,84px);line-height:.98;text-transform:uppercase;margin:0 0 18px;color:var(--jet-black)}
.sp-hero .tagline{font-family:var(--font-display);font-weight:300;font-size:clamp(19px,1.8vw,24px);line-height:1.3;color:var(--cobalt-blue);max-width:40ch;margin:0 0 clamp(40px,6vw,72px)}
.sp-hero .thesis{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,3vw,42px);line-height:1.08;color:var(--cobalt-blue);max-width:22ch;margin:0 0 28px}
.sp-hero .thesis b{font-weight:700}
.sp-hero .intro{max-width:52ch;font-size:clamp(17px,1.4vw,19px)}
.buybar{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:36px}
.buybar .meta{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}

.prose{max-width:62ch}
.prose h2{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,2.4vw,32px);line-height:1.1;text-transform:uppercase;margin:0 0 24px}
.prose .em{font-family:var(--font-display);font-weight:400;font-size:clamp(21px,2vw,28px);line-height:1.2;color:var(--cobalt-blue);margin:1.2em 0}
.block{display:grid;gap:24px;padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--border-hairline)}
.block:first-child{border-top:0;padding-top:0}
.block .label{color:var(--text-muted)}
@media (min-width:900px){
  .block{grid-template-columns:220px 1fr;gap:48px}
}
.steps{display:grid;gap:28px;margin:0;padding:0;list-style:none}
.steps li{display:grid;gap:6px}
.steps .step-name{font-family:var(--font-display);font-weight:500;font-size:19px;text-transform:uppercase;color:var(--cobalt-blue)}

.invest{background:var(--jet-black);color:var(--white)}
.invest::before{content:none}
.invest .price{font-family:var(--font-display);font-weight:700;font-size:clamp(56px,8vw,112px);line-height:.95;margin:0 0 20px}
.invest .prose{max-width:58ch}
.invest .actions{display:flex;flex-wrap:wrap;gap:14px;margin:36px 0 18px}
.invest .small{font-size:15px;color:var(--fog-grey)}
.invest .small a{color:var(--white)}

.faq details{border-top:1px solid var(--border-hairline);padding:22px 0}
.faq details:last-child{border-bottom:1px solid var(--border-hairline)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:500;font-size:19px;display:flex;justify-content:space-between;gap:24px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:300;color:var(--cobalt-blue)}
.faq details[open] summary::after{content:"×"}
.faq details p{margin:14px 0 0;max-width:60ch}

@media (max-width:640px){
  .site-header nav{display:none}
  .btn{width:100%}
  .hero__labels .label:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.sp-grid{display:grid;gap:clamp(32px,5vw,64px);align-items:start}
.sp-photo{aspect-ratio:4/3;overflow:hidden;background:var(--jet-black)}
.sp-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
@media (min-width:900px){
  .sp-grid{grid-template-columns:7fr 4fr}
  .sp-photo{aspect-ratio:9/14}
}

/* ===== Sitio multipágina ===== */
/* Menú en celular */
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open] summary::after{content:" ×"}
.mnav nav{position:absolute;right:0;top:calc(100% + 16px);background:var(--jet-black);color:var(--white);display:flex;flex-direction:column;gap:0;min-width:240px;padding:8px 0;border:1px solid var(--border-hairline-invert);z-index:20}
.mnav nav a{padding:14px 20px;text-decoration:none;font-size:13px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase}
.mnav nav a:hover{background:var(--cobalt-blue)}
.site-header nav.nav a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){.site-header nav.nav{display:none}.mnav{display:block}}

/* Encabezado de página interior: foto apagada + etiqueta + frase */
.page-hero{position:relative;background:var(--jet-black);color:var(--white);overflow:hidden;min-height:clamp(420px,62vh,640px);display:flex;align-items:flex-end}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;opacity:.42}
.page-hero .wrap{position:relative;width:100%;padding-top:140px;padding-bottom:clamp(40px,6vw,72px);text-align:center}
.page-hero .label{color:var(--fog-grey);display:block;margin-bottom:22px}
.page-hero h1{font-family:var(--font-display);font-weight:300;font-size:clamp(34px,5vw,72px);line-height:1.04;margin:0 auto;max-width:18ch;color:var(--periwinkle-mist)}
.page-hero h1 b{font-weight:700;color:var(--white)}

/* Encabezado por intención, como "To JOIN / To LEARN" */
.intent{font-family:var(--font-display);text-transform:uppercase;line-height:.92;font-size:clamp(44px,7.5vw,112px);margin:0 0 clamp(40px,6vw,72px);letter-spacing:-0.01em}
.intent .p{font-weight:300}
.intent .w{font-weight:700}
.intent--center{text-align:center}

/* Adelantos en el inicio */
.teasers{display:grid;gap:0;border-top:1px solid var(--border-hairline)}
.teaser{display:grid;gap:14px;padding:clamp(28px,3vw,40px) 0;border-bottom:1px solid var(--border-hairline);text-decoration:none}
.teaser h3{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,2.4vw,32px);line-height:1.05;margin:0;text-transform:uppercase}
.teaser .axis{color:var(--cobalt-blue);font-size:15px}
.teaser p{margin:0;max-width:44ch}
.teaser .go{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
a.teaser:hover h3{color:var(--cobalt-blue)}
.teaser--soon{color:var(--text-muted)}
@media (min-width:900px){
  .teasers{grid-template-columns:repeat(3,1fr);border-top:0}
  .teaser{border-bottom:0;border-left:1px solid var(--border-hairline);padding:8px clamp(20px,2.4vw,36px) 8px}
  .teaser:first-child{border-left:0;padding-left:0}
}
.status{display:inline-block;font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;border:1px solid currentColor;padding:6px 12px}

/* Dos columnas: foto + texto (adelanto Sobre mí, The Choice) */
.split{display:grid;gap:clamp(32px,6vw,80px);align-items:center}
.split .photo{aspect-ratio:4/5;overflow:hidden;background:var(--jet-black)}
.split .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.split .kicker{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,2.4vw,32px);line-height:1.2;color:var(--cobalt-blue);margin:0 0 24px;max-width:26ch}
@media (min-width:900px){.split{grid-template-columns:5fr 6fr}}
@media (max-width:899px){.split .photo{aspect-ratio:4/3}}

.choice{background:var(--fog-paper)}
.choice .intent{color:var(--cobalt-blue)}

/* ===== Sobre mí (estructura tipo About de Jasmine Star) ===== */
.about-open{background:var(--fog-paper);text-align:center;padding-top:clamp(64px,9vw,120px)}
.about-open .lead-in{font-size:clamp(18px,1.6vw,21px);line-height:1.5;max-width:46ch;margin:0 auto 1em}
.about-open .statement{
  font-family:var(--font-display);font-weight:300;text-transform:uppercase;color:var(--cobalt-blue);
  font-size:clamp(28px,4.4vw,64px);line-height:1.06;max-width:20ch;margin:clamp(40px,5vw,64px) auto 0;
}
.about-open .statement b{font-weight:700}

.about-intro{display:grid;gap:clamp(32px,5vw,64px);align-items:center}
.about-intro .photos{display:grid;grid-template-columns:3fr 2fr;gap:16px;align-items:end}
.about-intro .photos .a{aspect-ratio:3/4;overflow:hidden}
.about-intro .photos .b{aspect-ratio:2/3;overflow:hidden;margin-bottom:-40px}
.about-intro .photos img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.about-intro h1{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(40px,5.6vw,84px);line-height:.92;margin:0 0 20px}
.about-intro .sub{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,2.2vw,30px);line-height:1.2;color:var(--cobalt-blue);margin:0 0 32px;max-width:24ch}
@media (min-width:900px){.about-intro{grid-template-columns:6fr 5fr}}

.timeline{list-style:none;margin:0;padding:0;border-top:1px solid var(--jet-black)}
.timeline li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--border-hairline);font-size:16px}
.timeline .when{font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);padding-top:3px}

.story-head{background:var(--jet-black);color:var(--white);padding:clamp(56px,8vw,112px) 0 clamp(40px,5vw,64px);overflow:hidden}
.story-head .giant{color:var(--periwinkle-mist);margin:0}
.story-head .giant b{color:var(--white)}
.story{background:var(--jet-black);color:var(--white);padding-top:0}
.story .row{display:grid;gap:clamp(32px,5vw,72px);align-items:center;padding:clamp(32px,5vw,64px) 0}
.story .row p{font-size:clamp(17px,1.4vw,19px);max-width:52ch}
.story .row .photo{aspect-ratio:4/5;overflow:hidden;background:var(--jet-soft,#231d1d)}
.story .row .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
@media (min-width:900px){
  .story .row{grid-template-columns:1fr 1fr}
  .story .row--flip .photo{order:2}
}
.pull{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,3.6vw,52px);line-height:1.1;color:var(--periwinkle-mist);max-width:22ch;margin:clamp(24px,4vw,56px) 0}
.pull b{color:var(--white);font-weight:700}
.story .pull{text-align:left}

.ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;border:1px dashed rgba(255,255,255,.4);color:var(--fog-grey);font-size:13px;letter-spacing:.08em;text-transform:uppercase;background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(255,255,255,.04) 12px 24px)}
.ph--light{border-color:rgba(20,16,16,.3);color:var(--text-muted);background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(20,16,16,.04) 12px 24px)}

.belief{background:var(--fog-paper);text-align:center}
.belief .big{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,3.8vw,56px);line-height:1.1;color:var(--cobalt-blue);max-width:24ch;margin:0 auto 32px}
.belief .big b{font-weight:700}
.belief p{max-width:52ch;margin:0 auto 1em;font-size:clamp(17px,1.4vw,19px)}

.how .row{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
.how .photo{aspect-ratio:4/5;overflow:hidden}
.how .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.how p{max-width:52ch;font-size:clamp(17px,1.4vw,19px)}
@media (min-width:900px){.how .row{grid-template-columns:5fr 6fr}}

.build-on{background:var(--jet-black);color:var(--white);text-align:center}
.build-on .pre{font-size:clamp(18px,1.6vw,21px);max-width:40ch;margin:0 auto 28px;color:var(--fog-grey)}
.build-on .line{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(36px,6vw,92px);line-height:.95;margin:0}
.build-on .script{font-family:var(--font-script);font-size:clamp(96px,14vw,200px);line-height:1;color:var(--periwinkle-mist);margin:.05em 0 40px;display:block}

.deeper{display:grid;gap:0;border-top:1px solid var(--border-hairline)}
.deeper a{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 0;border-bottom:1px solid var(--border-hairline);text-decoration:none;font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:clamp(22px,2.6vw,36px)}
.deeper a:hover{color:var(--cobalt-blue)}

/* Lo que traje conmigo: trading floor -> tu marca */
.carry__intro{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,2.2vw,30px);line-height:1.2;color:var(--cobalt-blue);max-width:30ch;margin:0 0 clamp(32px,4vw,48px)}
.carry__table{border-top:1px solid var(--jet-black)}
.carry__row{display:grid;gap:8px 48px;padding:22px 0;border-bottom:1px solid var(--border-hairline)}
.carry__row p{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.35}
.carry__row p:first-child{color:var(--text-muted)}
.carry__row p:last-child{font-family:var(--font-display);font-weight:400;color:var(--jet-black)}
.carry__row--head{padding:14px 0}
.carry__outro{max-width:52ch;margin:clamp(32px,4vw,48px) 0 0;font-size:clamp(17px,1.4vw,19px)}
@media (min-width:760px){
  .carry__row{grid-template-columns:1fr 1fr}
  .carry__row p:last-child::before{content:"→ ";color:var(--cobalt-blue)}
}
@media (max-width:759px){
  .carry__row--head{display:none}
  .carry__row p:first-child::before{content:"En el trading floor: ";font-weight:500;color:var(--jet-black)}
  .carry__row p:last-child::before{content:"Hoy: ";color:var(--cobalt-blue);font-weight:700}
}
.proof__line{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,2.6vw,36px);line-height:1.2;max-width:34ch;margin:0 0 40px}
.proof__case{min-height:220px}

/* ===== Sobre mí v3 ===== */
.leaps{background:var(--jet-black);color:var(--white)}
.leaps .opening{font-family:var(--font-display);font-weight:300;font-size:clamp(26px,3.4vw,48px);line-height:1.15;color:var(--periwinkle-mist);max-width:26ch;margin:0 0 clamp(56px,8vw,112px)}
.leaps .opening b{color:var(--white);font-weight:700}
.leaps .row{display:grid;gap:clamp(32px,5vw,72px);align-items:start;margin-bottom:clamp(56px,8vw,112px)}
.leaps .row:last-child{margin-bottom:0}
.leaps .row p{font-size:clamp(17px,1.4vw,19px);max-width:52ch}
.leaps .photo{aspect-ratio:4/5;overflow:hidden}
.leaps .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.leaps .em{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(24px,2.6vw,36px);line-height:1.15;color:var(--white);margin:.6em 0}
.leaps .em--mist{color:var(--periwinkle-mist)}
.leaps .em b{font-weight:700;color:var(--white)}
@media (min-width:900px){.leaps .row{grid-template-columns:5fr 6fr}.leaps .row--flip .photo{order:2}}

.after .grid{display:grid;gap:clamp(32px,5vw,72px);align-items:start}
.after p{font-size:clamp(17px,1.4vw,19px);max-width:54ch}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--jet-black)}
.stat{padding:24px 20px 24px 0;border-bottom:1px solid var(--border-hairline)}
.stat + .stat{padding-left:20px;border-left:1px solid var(--border-hairline)}
.stat .n{font-family:var(--font-display);font-weight:700;font-size:clamp(56px,7vw,104px);line-height:.9;color:var(--cobalt-blue);display:block}
.stat .t{font-size:13px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;display:block;margin-top:10px}
@media (min-width:900px){.after .grid{grid-template-columns:6fr 5fr}}

.youme{position:relative;color:var(--white);background:var(--cobalt-blue);overflow:hidden}
.youme::before{content:"";position:absolute;inset:0;background:var(--portal-glow);opacity:.9}
.youme .wrap{position:relative}
.youme p{font-size:clamp(17px,1.4vw,20px);max-width:56ch}
.youme .em{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,3.6vw,52px);line-height:1.1;color:var(--periwinkle-mist);max-width:20ch;margin:.6em 0}
.youme .em b{color:var(--white);font-weight:700}
.youme .section-head{border-color:rgba(255,255,255,.4)}
.youme .section-head .label{color:var(--white)}

.layers__intro{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,2.4vw,32px);line-height:1.2;color:var(--cobalt-blue);max-width:30ch;margin:0 0 clamp(32px,4vw,56px)}
.layers__diagram{position:relative;display:grid;gap:0;margin-bottom:clamp(40px,5vw,64px)}
.layer{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:clamp(22px,3vw,36px) clamp(20px,3vw,40px)}
.layer .num{font-size:12px;font-weight:500;letter-spacing:var(--tracking-label)}
.layer .name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(24px,3.2vw,46px);line-height:1}
.layer--1{background:var(--periwinkle-mist);color:var(--jet-black)}
.layer--2{background:var(--cobalt-blue);color:var(--white)}
.layer--3{background:var(--jet-black);color:var(--white)}
.layers__axis{position:absolute;top:0;bottom:0;right:clamp(20px,6vw,96px);width:1px;background:var(--white);mix-blend-mode:difference}
.layers__axis span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);background:var(--white);color:var(--jet-black);font-size:12px;font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;padding:6px 14px;white-space:nowrap}
.layers__text{display:grid;gap:28px}
.layers__text h3{font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:19px;margin:0 0 6px}
.layers__text p{margin:0;max-width:44ch}
.layers__center{margin-top:clamp(32px,4vw,48px);padding-top:24px;border-top:1px solid var(--jet-black);max-width:60ch;font-size:clamp(17px,1.4vw,19px)}
@media (min-width:900px){.layers__text{grid-template-columns:repeat(3,1fr)}}

.today .grid{display:grid;gap:clamp(32px,5vw,72px);align-items:start}
.today .photo{aspect-ratio:4/5;overflow:hidden}
.today .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.today p{font-size:clamp(17px,1.4vw,19px);max-width:54ch}
.today .first{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1.2;color:var(--cobalt-blue)}
@media (min-width:900px){.today .grid{grid-template-columns:5fr 6fr}}
.building{display:grid;gap:clamp(24px,3vw,40px);margin-top:clamp(56px,7vw,96px)}
.card{display:grid;gap:16px;align-content:start}
.card .photo{aspect-ratio:4/5;overflow:hidden;background:var(--fog-paper)}
.card .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.card p{margin:0;font-size:16px}
@media (min-width:700px){.building{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.building{grid-template-columns:repeat(4,1fr)}}
.photo-note{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.build-on + .closing{border-top:1px solid var(--border-hairline-invert)}
@media (max-width:899px){.leaps .photo,.today .photo{aspect-ratio:4/3}}

/* ===== Sobre mí v4: recursos de diseño de Jasmine Star dentro de la marca ===== */
/* 1. Portada con video a pantalla completa y la frase encima */
.a-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--jet-black);color:var(--white);overflow:hidden}
.a-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;opacity:.5}
.a-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,16,.9) 0%,rgba(20,16,16,0) 60%)}
.a-hero .wrap{position:relative;z-index:1;width:100%;padding-top:140px;padding-bottom:clamp(48px,7vw,96px)}
.a-hero .giant{color:var(--white);margin:0 0 clamp(24px,3vw,40px);font-size:clamp(72px,15vw,240px);line-height:.82}
.a-hero .giant .l{font-weight:300;color:var(--periwinkle-mist)}
.a-hero .opening{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,2.6vw,38px);line-height:1.2;color:var(--white);max-width:30ch;margin:0}
.a-hero .opening b{font-weight:700}
@media (min-width:900px){.a-hero video{opacity:.62}}

/* 2. Palabra gigante que sangra por el borde como encabezado de sección */
.bleed{font-family:var(--font-display);font-weight:700;text-transform:uppercase;white-space:nowrap;line-height:.82;letter-spacing:-0.02em;font-size:clamp(64px,13vw,220px);margin:0 0 clamp(32px,5vw,64px);margin-left:-0.04em}
.bleed .l{font-weight:300}
.bleed--mist{color:var(--periwinkle-mist)}
.bleed--cobalt{color:var(--cobalt-blue)}
.bleed--right{text-align:right;margin-right:-0.06em}

/* 3. Collage: fotos superpuestas a distinto tamaño */
.collage{position:relative;padding-bottom:18%;padding-right:22%}
.collage .big{aspect-ratio:4/5;overflow:hidden}
.collage .small{position:absolute;right:0;bottom:0;width:46%;aspect-ratio:3/4;overflow:hidden;border:10px solid var(--jet-black)}
.collage img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.collage--light .small{border-color:var(--white)}
.collage--paper .small{border-color:var(--fog-paper)}

.leaps2{background:var(--jet-black);color:var(--white)}
.leaps2 .row{display:grid;gap:clamp(48px,6vw,96px);align-items:center;margin-bottom:clamp(72px,10vw,140px)}
.leaps2 .row:last-child{margin-bottom:0}
.leaps2 p{font-size:clamp(17px,1.4vw,19px);max-width:50ch}
.leaps2 .em{display:block;font-family:var(--font-display);font-weight:300;font-size:clamp(28px,3.4vw,50px);line-height:1.08;color:var(--periwinkle-mist);margin:.5em 0}
.leaps2 .em b{font-weight:700;color:var(--white)}
@media (min-width:900px){.leaps2 .row{grid-template-columns:1fr 1fr}.leaps2 .row--flip .collage{order:2}}

/* 4. Cifras sobre la palabra gigante */
.after2{background:var(--white);overflow:hidden}
.after2 .grid{display:grid;gap:clamp(40px,5vw,72px);align-items:start}
.after2 p{font-size:clamp(17px,1.4vw,19px);max-width:54ch}
.after2 .stats .n{font-size:clamp(72px,10vw,160px)}
@media (min-width:900px){.after2 .grid{grid-template-columns:6fr 5fr}}

/* 5. Texto sobre foto apagada, como su sección de testimonios */
.youme2{position:relative;background:var(--jet-black);color:var(--white);overflow:hidden;padding:clamp(96px,14vw,200px) 0}
.youme2 > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;opacity:.38}
.youme2::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(28,12,130,.55) 0%,rgba(20,16,16,.35) 100%)}
.youme2 .wrap{position:relative;z-index:1;text-align:center}
.youme2 .label{color:var(--fog-grey);display:block;margin-bottom:28px}
.youme2 p{font-size:clamp(17px,1.5vw,20px);max-width:52ch;margin:0 auto 1em}
.youme2 .em{font-family:var(--font-display);font-weight:300;font-size:clamp(34px,5vw,76px);line-height:1.02;color:var(--periwinkle-mist);max-width:16ch;margin:.4em auto .5em;display:block}
.youme2 .em b{color:var(--white);font-weight:700}

/* 6. Las capas a todo lo ancho */
.layers2{padding-bottom:0}
.layers2 .bands{margin-top:clamp(32px,4vw,56px)}
.band{position:relative;display:grid;gap:20px;padding:clamp(40px,5vw,72px) var(--margin-page);overflow:hidden}
.band .num{position:absolute;right:var(--margin-page);top:50%;transform:translateY(-50%);font-family:var(--font-display);font-weight:700;font-size:clamp(120px,18vw,280px);line-height:.8;opacity:.14}
.band h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(34px,5vw,76px);line-height:.95;margin:0}
.band p{margin:0;max-width:46ch;font-size:clamp(17px,1.4vw,19px);position:relative}
.band--1{background:var(--periwinkle-mist);color:var(--jet-black)}
.band--2{background:var(--cobalt-blue);color:var(--white)}
.band--3{background:var(--jet-black);color:var(--white)}
.band--center{background:var(--white);color:var(--jet-black);text-align:center;border-bottom:1px solid var(--border-hairline)}
.band--center .script-word{font-family:var(--font-display);font-weight:300;text-transform:uppercase;font-size:clamp(40px,7vw,110px);line-height:.9;color:var(--cobalt-blue)}
.band--center p{margin:0 auto}
@media (min-width:900px){.band{grid-template-columns:1fr 1fr;align-items:center}.band--center{grid-template-columns:1fr}}

/* 7. Hoy: collage + tarjetas escalonadas */
.today2{background:var(--fog-paper);overflow:hidden}
.today2 .grid{display:grid;gap:clamp(48px,6vw,96px);align-items:center}
.today2 .first{font-family:var(--font-display);font-weight:300;font-size:clamp(24px,2.8vw,40px);line-height:1.15;color:var(--cobalt-blue);margin:0 0 24px}
.today2 p{font-size:clamp(17px,1.4vw,19px);max-width:54ch}
@media (min-width:900px){.today2 .grid{grid-template-columns:5fr 6fr}}
.stagger{display:grid;gap:clamp(24px,3vw,40px);margin-top:clamp(72px,9vw,128px)}
.stagger .card .photo{background:var(--white)}
@media (min-width:700px){.stagger{grid-template-columns:repeat(2,1fr)}.stagger .card:nth-child(even){margin-top:72px}}
@media (min-width:1100px){.stagger{grid-template-columns:repeat(4,1fr)}.stagger .card:nth-child(even){margin-top:120px}}

/* Aparición suave al bajar: fundido y unos píxeles hacia arriba, sin rebote */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity 900ms var(--ease),transform 900ms var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}
.layers2{overflow:hidden}
.after2 .bleed,.layers2 .bleed,.today2 .bleed{padding-left:var(--margin-page)}
.today2 .bleed--right{padding-left:0;padding-right:0}

/* ===== Sobre mí v5: títulos legibles, menos fotos, cursiva puntual, celular primero ===== */
.bleed{max-width:var(--content-max);margin:0 auto clamp(28px,4vw,48px);padding:0 var(--margin-page)!important;white-space:normal;font-size:clamp(34px,6vw,64px);line-height:1;letter-spacing:-0.01em}
.after2 .bleed,.layers2 .bleed,.today2 .bleed{padding-left:var(--margin-page)}
.a-hero .giant{font-size:clamp(56px,14vw,200px)}
.script-inline{font-family:var(--font-script);font-weight:400;text-transform:none;letter-spacing:0;font-size:1.9em;line-height:.7;color:var(--periwinkle-mist);white-space:nowrap}
.script-title{display:block;font-family:var(--font-script);font-weight:400;font-size:clamp(64px,10vw,120px);line-height:1;color:var(--white);margin:0 0 20px}

/* Tú y yo: la foto se ve; el velo solo protege el texto */
.youme2 > img{opacity:.85;object-position:50% 30%}
.youme2::after{background:linear-gradient(to bottom,rgba(20,16,16,.35) 0%,rgba(20,16,16,.72) 55%,rgba(20,16,16,.82) 100%)}
@media (min-width:900px){
  .youme2 > img{left:auto;width:50%;opacity:1}
  .youme2::after{background:linear-gradient(to right,var(--jet-black) 0%,var(--jet-black) 46%,rgba(20,16,16,.15) 70%,rgba(20,16,16,0) 100%)}
  .youme2 .wrap{text-align:left}
  .youme2 .wrap > *{margin-left:0!important;max-width:44ch}
  .youme2 .em{max-width:14ch}
}

/* Hoy: una foto y una lista simple */
.now-list{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;border-top:1px solid var(--jet-black)}
.now-list li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--border-hairline);font-size:clamp(16px,1.3vw,18px)}
.now-list .num{font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);color:var(--cobalt-blue);padding-top:4px}
.today2 .single{aspect-ratio:4/5;overflow:hidden}
.today2 .single img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
@media (min-width:900px){.now-list{columns:2;column-gap:48px;border-top:0}.now-list li{break-inside:avoid;border-top:1px solid var(--border-hairline);border-bottom:0}}

/* Celular */
@media (max-width:640px){
  .leaps2 .row{gap:36px;margin-bottom:72px}
  .collage{padding-right:16%;padding-bottom:22%}
  .collage .small{width:52%;border-width:6px}
  .band{padding:36px var(--margin-page)}
  .band .num{font-size:120px;opacity:.12}
  .stat .t{font-size:11px}
  .today2 .single{aspect-ratio:4/4}
  .youme2{padding:120px 0 72px}
}
.after2 .grid > *{min-width:0}
.stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.after2 .stats .n{font-size:clamp(52px,14vw,160px)}
.script-inline{font-size:2.5em}
@media (max-width:899px){.youme2::after{background:linear-gradient(to bottom,rgba(20,16,16,.15) 0%,rgba(20,16,16,.6) 45%,rgba(20,16,16,.78) 100%)}}

/* ===== Sobre mí v6 ===== */
/* "di el salto." en su propia línea, a tamaño de titular */
.a-hero .script-line{display:block;font-family:var(--font-script);font-weight:400;font-size:clamp(72px,13vw,170px);line-height:1;color:var(--periwinkle-mist);margin-top:.12em}

/* Pausa visual a todo lo ancho entre secciones, como hace Jasmine con sus fotos */
.photo-break{position:relative;height:clamp(320px,60vh,620px);overflow:hidden;background:var(--jet-black)}
.photo-break video,.photo-break img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.photo-break .tag{position:absolute;left:var(--margin-page);bottom:24px;color:var(--white)}

/* Tarjeta de texto que se monta sobre la foto */
.overlap{display:grid}
.overlap .single{aspect-ratio:4/5}
.overlap .card-text{background:var(--white);padding:clamp(28px,4vw,56px);margin:-80px 16px 0;position:relative;z-index:1;box-shadow:var(--shadow-float,0 24px 64px -24px rgba(20,16,16,.32))}
@media (min-width:900px){
  .overlap{grid-template-columns:5fr 7fr;align-items:center}
  .overlap .card-text{margin:0 0 0 -120px}
}

/* Pie con el logotipo a gran escala, como el de Jasmine */
.footer-mark{display:block;font-family:var(--font-body);text-transform:uppercase;line-height:.85;letter-spacing:-0.02em;font-size:clamp(40px,12.4vw,190px);color:var(--white);white-space:nowrap;padding:clamp(48px,6vw,80px) 0 0;overflow:hidden;text-decoration:none}
.footer-mark .c{font-weight:500}
.footer-mark .r{font-weight:300}
.footer-mark sup{font-size:.2em;vertical-align:2.8em;margin-left:.15em;font-weight:400}
.a-hero .script-line{font-size:clamp(104px,28vw,260px);line-height:.9;color:var(--white);margin-top:.02em}

/* Wall Street: bloque editorial, sin fotos */
.ws{max-width:760px;margin:0 auto;text-align:center;padding-top:clamp(16px,3vw,40px)}
.ws p{margin-left:auto;margin-right:auto}
.ws .em{max-width:20ch;margin-left:auto;margin-right:auto}

/* Hoy: como una carta, con foto pequeña de firma */
.letter{display:grid;gap:24px;max-width:860px}
.letter__by{display:flex;align-items:center;gap:16px}
.letter__photo{width:88px;height:88px;flex:none;overflow:hidden}
.letter__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.letter__by .label{color:var(--text-muted)}
@media (min-width:900px){
  .letter{grid-template-columns:160px 1fr;gap:48px;align-items:start}
  .letter__by{flex-direction:column;align-items:flex-start}
  .letter__photo{width:160px;height:200px}
}
.como-trabajo-layers{padding-bottom:0}

/* Wall Street alineado al mismo eje que el texto de arriba (no centrado) */
.ws{max-width:none;margin:0;text-align:left;padding-top:0}
.ws p,.ws .em{margin-left:0;margin-right:0}
.ws p{max-width:50ch}
.leaps2 .row{margin-bottom:clamp(48px,6vw,88px)}
@media (min-width:900px){
  .ws{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,96px)}
  .ws > *{grid-column:2}
}

/* Sobre mí v7: nuevo texto */
.portfolio{font-family:var(--font-display);font-weight:300;font-size:clamp(26px,3.2vw,46px);line-height:1.12;color:var(--cobalt-blue);max-width:24ch;margin:clamp(48px,6vw,88px) 0 0;padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--jet-black)}
.portfolio b{font-weight:700}
.today2 .updated{color:var(--text-muted);margin:-8px 0 clamp(28px,4vw,48px)}
.closing .body{max-width:52ch;font-size:clamp(17px,1.4vw,19px);color:var(--fog-grey);margin:0 0 36px}
.closing .lead b{font-weight:700}
.closing .lead{margin-bottom:20px}
.now-title{display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:15px;letter-spacing:.04em;color:var(--jet-black);margin-bottom:6px}
/* Cifras: que nunca se monten, en ningún ancho */
.stat{min-width:0;overflow:hidden}
.after2 .stats .n{font-size:clamp(52px,14vw,96px);white-space:nowrap}
@media (min-width:900px){.after2 .stats .n{font-size:clamp(56px,5.6vw,96px)}}

/* ===== Ajustes Safari / pantallas anchas ===== */
/* Cifras: el tamaño se calcula según el ancho de su propia columna */
.stat{container-type:inline-size}
.after2 .stats .n{font-size:min(96px, calc((100cqi - 24px) / 3.3))}
/* Logotipo del pie: siempre cabe completo en su contenedor */
.footer-mark-wrap{container-type:inline-size}
.footer-mark{font-size:min(190px, calc(100cqi / 8.4))}

/* Pausa con video: en computadora, el video vertical va completo en un marco, no recortado */
@media (min-width:900px){
  .photo-break{height:auto;padding:clamp(48px,6vw,96px) 0;display:flex;justify-content:center;align-items:center;gap:clamp(32px,4vw,64px)}
  .photo-break video{width:auto;height:min(78vh,760px);aspect-ratio:9/16;object-fit:cover;object-position:50% 50%}
  .photo-break .tag{position:static;align-self:flex-end;order:2}
}

/* Pausa con video, versión final: banda a todo lo ancho, encuadrada de la cabeza a las manos, sin franjas negras */
.photo-break{height:clamp(420px,72vh,760px);padding:0;display:block}
.photo-break video{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 22%}
@media (min-width:900px){
  .photo-break{height:clamp(480px,78vh,820px);padding:0;display:block}
  .photo-break video{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 21%}
}

/* Pausa con video vertical presentado en horizontal:
   el video completo al centro y el fondo azul del estudio extendido a los lados */
.photo-break--wide{position:relative;height:clamp(460px,78vh,820px);background:#1a2a86;padding:0;display:block;overflow:hidden}
.photo-break--wide .pb-bg{display:none}
.photo-break--wide .pb-fg{height:100%;width:100%}
.photo-break--wide video{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@media (min-width:700px){
  .photo-break--wide .pb-bg{display:block;position:absolute;inset:0;background:url(/img/clau-silla-fondo.jpg) center/cover no-repeat}
  .photo-break--wide .pb-fg{position:relative;height:100%;width:auto;aspect-ratio:1080/1580;margin:0 auto;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%)}
  .photo-break--wide video{object-position:50% 50%}
}
@media (max-width:699px){.photo-break--wide{height:auto;aspect-ratio:1080/1580}}

/* Collage: el recuadro pequeño ahora es un video en loop */
.collage .small video{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}

/* Después de Wall Street: video vertical al lado del texto */
.after3{background:var(--white);padding-bottom:clamp(64px,8vw,112px)}
.after3__grid{display:grid;gap:clamp(32px,4vw,48px)}
.after3__video{aspect-ratio:1080/1580;overflow:hidden;background:#1a2a86;max-height:78vh}
.after3__video video{width:100%;height:100%;object-fit:cover;display:block}
.after3__title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;color:var(--cobalt-blue);font-size:clamp(34px,4.6vw,64px);line-height:1;margin:0 0 clamp(24px,3vw,40px);letter-spacing:-0.01em}
.after3__title .l{font-weight:300}
.after3__text p{font-size:clamp(17px,1.4vw,19px);max-width:52ch}
@media (min-width:900px){
  .after3__grid{grid-template-columns:5fr 6fr;gap:clamp(48px,6vw,96px);align-items:start}
  .after3__video{position:sticky;top:96px;max-height:none}
  .after3__text{padding-top:clamp(8px,2vw,32px)}
}
@media (max-width:899px){.after3__video{aspect-ratio:4/5}}

/* Franja de cifras a todo lo ancho */
.stats-strip{background:var(--cobalt-blue);color:var(--white);margin-top:clamp(56px,7vw,96px)}
.stats-strip .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.stats-strip .stat{container-type:inline-size;padding:clamp(28px,4vw,48px) 16px clamp(28px,4vw,48px) 0;border:0}
.stats-strip .stat + .stat{padding-left:clamp(16px,3vw,48px);border-left:1px solid rgba(255,255,255,.3)}
.stats-strip .n{display:block;font-family:var(--font-display);font-weight:700;line-height:.9;color:var(--white);font-size:min(120px, calc((100cqi - 16px) / 3.3));white-space:nowrap}
.stats-strip .t{display:block;margin-top:12px;font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--periwinkle-mist)}
.after3 .portfolio{margin-top:clamp(48px,6vw,80px)}
.letter__photo img[src*="nueva-york"]{object-position:50% 55%}
.letter__photo img[src*="nueva-york"]{object-position:50% 62%}

/* ===== Cómo trabajo v2 · dos sistemas unidos por un puente ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Sistema 1 · Las capas: bandas de color a todo lo ancho, con número fantasma y jerarquía descendente */
.ct-layers{padding:clamp(72px,9vw,128px) 0 0}
.ct-layers__intro{font-family:var(--font-display);font-weight:300;font-size:clamp(24px,2.8vw,40px);line-height:1.15;color:var(--cobalt-blue);max-width:24ch;margin:18px 0 clamp(40px,5vw,64px)}
.ct-layer{position:relative;overflow:hidden}
.ct-layer .wrap{position:relative;display:grid;gap:16px}
.ct-layer__num{position:absolute;right:var(--margin-page);top:50%;transform:translateY(-50%);font-family:var(--font-display);font-weight:700;line-height:.8;opacity:.16;pointer-events:none}
.ct-layer__name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:.95;margin:0}
.ct-layer p{position:relative;margin:0;max-width:46ch}
.ct-layer--1{background:var(--cobalt-blue);color:var(--white)}
.ct-layer--1 .wrap{padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(64px,8vw,120px)}
.ct-layer--1 .ct-layer__name{font-size:clamp(48px,7vw,104px)}
.ct-layer--1 p{font-size:clamp(19px,1.8vw,24px);line-height:1.4;max-width:40ch}
.ct-layer--1 .ct-layer__num{font-size:clamp(160px,24vw,360px)}
.ct-layer--2{background:var(--periwinkle-mist);color:var(--jet-black)}
.ct-layer--2 .wrap{padding-top:clamp(44px,5vw,72px);padding-bottom:clamp(44px,5vw,72px)}
.ct-layer--2 .ct-layer__name{font-size:clamp(34px,4.4vw,64px)}
.ct-layer--2 p{font-size:clamp(17px,1.5vw,20px)}
.ct-layer--2 .ct-layer__num{font-size:clamp(120px,16vw,240px)}
.ct-layer--3{background:var(--fog-paper);color:var(--jet-black)}
.ct-layer--3 .wrap{padding-top:clamp(32px,4vw,52px);padding-bottom:clamp(32px,4vw,52px)}
.ct-layer--3 .ct-layer__name{font-size:clamp(26px,3vw,44px)}
.ct-layer--3 p{font-size:clamp(16px,1.3vw,18px)}
.ct-layer--3 .ct-layer__num{font-size:clamp(90px,11vw,170px)}
@media (min-width:900px){.ct-layer .wrap{grid-template-columns:1fr 1fr;align-items:center;gap:48px}}

/* Bisagra · Criterio: centrado, con un eje vertical que entra desde las capas y sale hacia las puertas */
.ct-center{position:relative;text-align:center;padding:0;background:var(--white)}
.ct-center::before,.ct-center::after{content:"";display:block;width:1px;height:clamp(56px,8vw,112px);background:var(--cobalt-blue);margin:0 auto}
.ct-center .wrap{padding-top:28px;padding-bottom:28px}
.ct-center__word{font-family:var(--font-display);font-weight:300;text-transform:uppercase;letter-spacing:.18em;font-size:clamp(30px,4.2vw,56px);line-height:1;color:var(--cobalt-blue);margin:0 0 24px}
.ct-center p{max-width:44ch;margin:0 auto;font-size:clamp(17px,1.5vw,20px);line-height:1.5}

/* Puente: el texto más importante de la página, grande y en el umbral de las puertas */
.ct-doors{background:var(--jet-black);color:var(--white);padding:clamp(80px,10vw,140px) 0}
.ct-bridge{max-width:820px;margin:0 0 clamp(56px,7vw,96px)}
.ct-bridge .label{color:var(--periwinkle-mist);margin:0 0 24px;display:block}
.ct-bridge__p1{font-family:var(--font-display);font-weight:300;font-size:clamp(26px,3.2vw,44px);line-height:1.15;color:var(--white);margin:0 0 24px}
.ct-bridge__p1 b{font-weight:700}
.ct-bridge__p2{font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--fog-grey);max-width:46ch;margin:0}

/* Sistema 2 · Las puertas: tarjetas con marco, misma jerarquía y mismo ancho */
.ct-doors__grid{display:grid;gap:clamp(20px,2.4vw,32px)}
.ct-door{display:flex;flex-direction:column;border:1px solid var(--border-hairline-invert);padding:clamp(28px,3vw,40px)}
.ct-door__tag{align-self:flex-start;font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--jet-black);background:var(--periwinkle-mist);padding:6px 12px;margin-bottom:28px}
.ct-door__name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,2.4vw,34px);line-height:1;margin:0 0 12px}
.ct-door__verb{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--periwinkle-mist);margin:0 0 24px}
.ct-door__promise{font-family:var(--font-display);font-weight:300;font-size:clamp(21px,1.9vw,26px);line-height:1.2;color:var(--white);margin:0 0 24px;padding-bottom:24px;border-bottom:1px solid var(--border-hairline-invert)}
.ct-door__body p{font-size:16px;line-height:1.55;color:var(--fog-grey);margin:0 0 14px}
.ct-door__foot{margin-top:auto;padding-top:24px}
.ct-door__meta{font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--white);margin:0 0 14px}
.ct-door__note{font-size:14px;color:var(--fog-grey);margin:0 0 20px}
.ct-door .btn{width:100%}
.btn--disabled{background:transparent;border-color:rgba(255,255,255,.3);color:var(--fog-grey);cursor:default}
.btn--disabled:hover{background:transparent;border-color:rgba(255,255,255,.3)}
@media (min-width:1000px){.ct-doors__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Ajustes Cómo trabajo: número de capa como columna propia (no detrás del texto) y puertas más anchas */
.ct-layer__num{position:static;transform:none;opacity:.45;font-weight:300;line-height:.9}
.ct-layer--1 .ct-layer__num{font-size:clamp(48px,7vw,104px)}
.ct-layer--2 .ct-layer__num{font-size:clamp(34px,4.4vw,64px)}
.ct-layer--3 .ct-layer__num{font-size:clamp(26px,3vw,44px)}
.ct-layer .wrap{grid-template-columns:auto 1fr;column-gap:clamp(16px,2.4vw,32px);align-items:baseline}
.ct-layer .wrap p{grid-column:2}
@media (min-width:900px){
  .ct-layer .wrap{grid-template-columns:clamp(90px,10vw,160px) 1fr 1fr;align-items:center}
  .ct-layer .wrap p{grid-column:3}
}
.ct-doors .wrap{max-width:1360px}
.ct-door{container-type:inline-size}
.ct-door__name{font-size:min(34px, calc(100cqi / 9.8));overflow-wrap:anywhere}

/* ===== Cómo trabajo · Puertas v3 (recursos de Jasmine dentro de la marca) ===== */
.dr{position:relative;background:var(--fog-paper);padding:clamp(80px,10vw,140px) 0 clamp(80px,10vw,140px);overflow:hidden}
/* Arco claro de fondo, como las secciones curvas de Jasmine */
.dr__arch{position:absolute;left:50%;top:clamp(220px,26vw,360px);transform:translateX(-50%);width:min(1500px,140vw);height:2400px;background:var(--white);border-radius:50% 50% 0 0 / 520px 520px 0 0}
.dr .wrap{position:relative;max-width:1320px}

/* Titular: cursiva + mayúsculas, como "To JOIN" */
.dr__bridge{text-align:center;max-width:860px;margin:0 auto clamp(64px,8vw,104px)}
.dr__title{margin:0 0 clamp(28px,3vw,40px);line-height:1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.1em .25em}
.dr__script{font-family:var(--font-script);font-weight:400;font-size:clamp(84px,11vw,150px);color:var(--cobalt-blue);line-height:.8}
.dr__caps{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(34px,5vw,68px);color:var(--jet-black);letter-spacing:-0.01em}
.dr__p1{font-family:var(--font-display);font-weight:300;font-size:clamp(24px,2.8vw,38px);line-height:1.2;color:var(--cobalt-blue);margin:0 0 22px}
.dr__p1 b{font-weight:700}
.dr__p2{font-size:clamp(17px,1.5vw,20px);line-height:1.5;max-width:44ch;margin:0 auto;color:var(--text-muted)}

/* Tarjetas */
.dr__grid{display:grid;gap:clamp(40px,4vw,48px)}
@media (min-width:1000px){.dr__grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}}
.door2{display:flex;flex-direction:column;background:var(--white);border-radius:28px;overflow:visible;box-shadow:0 30px 60px -40px rgba(28,12,130,.35)}
/* Foto con borde superior en arco */
.door2__img{position:relative;margin:14px 14px 0;aspect-ratio:4/4.2;border-radius:999px 999px 18px 18px;overflow:visible}
.door2__img img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;border-radius:999px 999px 18px 18px;display:block}
/* Etiqueta montada sobre el borde inferior de la foto */
.door2__tag{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);background:var(--cobalt-blue);color:var(--white);font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;padding:10px 18px;border-radius:999px;white-space:nowrap}
.door2__in{display:flex;flex-direction:column;flex:1;padding:clamp(40px,4vw,48px) clamp(24px,2.6vw,36px) clamp(28px,3vw,36px);text-align:center;container-type:inline-size}
.door2__name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:min(32px, calc(100cqi / 9.6));line-height:1;margin:0 0 10px;color:var(--jet-black)}
.door2__verb{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt-blue);margin:0 0 20px}
.door2__promise{font-family:var(--font-display);font-weight:300;font-size:clamp(20px,1.8vw,24px);line-height:1.22;margin:0 0 18px;color:var(--jet-black)}
.door2__lead{font-size:16px;line-height:1.55;color:var(--text-muted);margin:0 0 6px}
/* Detalle plegado */
.door2__more{margin:0 0 4px;text-align:left}
.door2__more summary{list-style:none;cursor:pointer;text-align:center;font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--cobalt-blue);padding:10px 0;display:flex;justify-content:center;align-items:center;gap:8px}
.door2__more summary::-webkit-details-marker{display:none}
.door2__more summary::after{content:"+";font-family:var(--font-display);font-size:18px;line-height:1}
.door2__more[open] summary::after{content:"−"}
.door2__more[open] summary{margin-bottom:8px}
.door2__more p{font-size:15px;line-height:1.55;color:var(--text-muted);margin:0 0 12px}
.door2__note{font-size:14px!important;color:var(--jet-black)!important;border-top:1px solid var(--border-hairline);padding-top:12px}
.door2__foot{margin-top:auto;padding-top:20px;border-top:1px solid var(--border-hairline)}
.door2__meta{font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--jet-black);margin:0 0 16px}
.door2 .btn{width:100%}
.door2__link{display:inline-block;margin-top:14px;font-size:14px;color:var(--cobalt-blue);text-underline-offset:4px}
.btn--soon{background:transparent;color:var(--text-muted);border-color:var(--border-hairline);cursor:default}
.btn--soon:hover{background:transparent;border-color:var(--border-hairline);color:var(--text-muted)}
.door2__img{min-height:0;height:auto}
.door2__img img{position:absolute;inset:0}
@media (min-width:1000px){.dr__grid{align-items:stretch}}
/* Puertas: el plegado va al final, después del botón */
.door2__top{flex:1}
.door2__foot{margin-top:0;padding-top:20px}
.door2__more{margin:20px 0 0;border-top:1px solid var(--border-hairline);padding-top:6px}
.door2__more[open] p:last-child{margin-bottom:0}
/* Portada de Cómo trabajo con foto horizontal en blanco y negro */
.page-hero--wide img{opacity:.6;object-position:30% 30%}
.page-hero--wide::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,16,.75) 0%,rgba(20,16,16,.1) 60%)}
.page-hero--wide .wrap{z-index:1}
.door2__img img[src*="puerta-"]{object-position:50% 50%}
/* Encuadres de las fotos de las puertas */
.door2__img img[src*="puerta-02"]{object-position:50% 28%}
.door2__img img[src*="puerta-03"]{object-position:50% 92%}

/* ===== Inicio (octubre 2026) ===== */
/* Hero: el titular es lo más grande; el video, detrás en celular y al lado en computadora */
.hero--home .hero__media video{opacity:.9}
.hero--home .hero__media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(20,16,16,.94) 0%,rgba(20,16,16,.72) 42%,rgba(20,16,16,.08) 72%)}
.hero--home .wrap{padding-top:140px}
.hero__text{container-type:inline-size;max-width:680px}
.hero__title{font-family:var(--font-display);font-weight:300;font-size:min(92px,13cqi);line-height:1.02;letter-spacing:-0.01em;margin:0 0 clamp(20px,2.4vw,28px);color:var(--white)}
.hero__title b{font-weight:700}
.hero__sub{font-size:clamp(16px,1.3vw,18px);line-height:1.55;color:rgba(255,255,255,.86);max-width:50ch;margin:0 0 clamp(28px,3vw,36px)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:900px){
  .hero--home .hero__media::before{display:none}
  .hero__text{max-width:min(640px,50vw)}
}

/* Lo que creo: prosa con buen ancho de lectura */
.creo{background:var(--white)}
.creo__grid{display:grid;gap:clamp(20px,3vw,40px)}
.creo__title{font-family:var(--font-script);font-weight:400;font-size:clamp(80px,9vw,128px);line-height:.9;color:var(--cobalt-blue);margin:0}
.creo__lead{font-family:var(--font-display);font-weight:300;font-size:clamp(26px,3vw,42px);line-height:1.15;max-width:24ch;margin:0 0 clamp(32px,4vw,48px)}
.creo__body{max-width:66ch}
.creo__body p{font-size:clamp(17px,1.35vw,19px);line-height:1.65;margin:0 0 1.5em}
.creo__thesis{display:block;margin:1.2em 0 0;padding-left:clamp(18px,2vw,28px);border-left:2px solid var(--cobalt-blue);font-family:var(--font-display);font-weight:400;font-size:clamp(22px,2.2vw,30px);line-height:1.25;color:var(--cobalt-blue)}
.creo__close{max-width:66ch;margin:clamp(24px,3vw,40px) 0 0;padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--jet-black);font-family:var(--font-display);font-weight:500;font-size:clamp(19px,1.7vw,24px);line-height:1.3}
@media (min-width:900px){
  .creo__grid{grid-template-columns:4fr 8fr;gap:48px;align-items:start}
  .creo__title{position:sticky;top:48px}
}

/* La Residencia y The Choice: las dos pruebas de la tesis, con el mismo peso */
.proof__head-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;border-bottom:1px solid var(--jet-black);padding-bottom:14px;margin-bottom:clamp(36px,5vw,64px)}
.proof__head-row h2{margin:0}
.proof__grid{display:grid;gap:clamp(40px,5vw,72px)}
@media (min-width:900px){.proof__grid{grid-template-columns:7fr 5fr;align-items:end}}
.proof__title{font-family:var(--font-display);font-weight:300;font-size:clamp(40px,5.6vw,84px);line-height:1.02;letter-spacing:-0.01em;max-width:14ch;margin:0 0 clamp(28px,3vw,40px)}
.proof__title b,.proof__title .w{font-weight:700}
.proof__side .btn{width:100%}

.res{background:var(--periwinkle-mist)}
.res__desc{font-size:clamp(17px,1.35vw,19px);line-height:1.6;max-width:56ch;margin:0 0 28px}
.res__def{display:block;font-family:var(--font-display);font-size:clamp(20px,1.9vw,26px);line-height:1.3;margin-bottom:.6em}
.res__formats{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1.8;max-width:56ch;margin:0;color:var(--cobalt-deep)}
.res__events{display:grid;gap:12px;margin:0 0 20px}
.ev{display:flex;flex-direction:column;gap:6px;background:var(--white);border-radius:24px;padding:22px 26px;margin:0}
.ev__where{font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.ev__when{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,3vw,40px);line-height:1;color:var(--cobalt-blue)}
.ev__note{font-size:14px;color:var(--text-muted)}
.ev--tbc{background:rgba(255,255,255,.5)}
.ev--tbc .ev__when{color:var(--jet-black);font-weight:300}

.tc{background:var(--white)}
.tc__name{text-transform:uppercase;color:var(--cobalt-blue)}
.tc__desc{font-family:var(--font-display);font-weight:300;font-size:clamp(20px,2vw,28px);line-height:1.3;max-width:30ch;margin:0}
.essay{display:block;text-decoration:none;background:var(--fog-paper);border-radius:24px;padding:26px 28px;margin:0 0 20px;transition:background-color 240ms var(--ease)}
.essay:hover{background:var(--periwinkle-mist)}
.essay__label{display:block;font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--cobalt-blue);margin-bottom:12px}
.essay__title{display:block;font-family:var(--font-display);font-weight:500;font-size:clamp(20px,1.8vw,24px);line-height:1.25}
.essay__go{display:block;margin-top:14px;font-family:var(--font-display);font-size:22px;line-height:1;color:var(--cobalt-blue)}

/* Trabajar conmigo: más liviano, tarjetas iguales y sin fotos */
.work{background:var(--fog-paper)}
.work__label{display:block;margin:0 0 clamp(24px,3vw,32px)}
.work__head{font-family:var(--font-display);font-weight:300;font-size:clamp(32px,4.4vw,60px);line-height:1.05;max-width:18ch;margin:0 0 20px}
.work__head b{font-weight:700}
.work__p{font-size:clamp(17px,1.35vw,19px);line-height:1.6;max-width:52ch;color:var(--text-muted);margin:0 0 clamp(40px,5vw,56px)}
.work__grid{display:grid;gap:20px}
@media (min-width:900px){.work__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mini{display:flex;flex-direction:column;background:var(--white);border-radius:28px;padding:clamp(28px,3vw,36px);box-shadow:0 30px 60px -44px rgba(28,12,130,.35);container-type:inline-size}
.mini__tag{align-self:flex-start;background:var(--cobalt-blue);color:var(--white);font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;padding:9px 16px;border-radius:999px;margin-bottom:24px}
.mini__name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:min(26px, calc(100cqi / 9.6));line-height:1.05;margin:0 0 8px}
.mini__verb{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt-blue);margin:0 0 18px}
.mini__promise{font-family:var(--font-display);font-weight:300;font-size:clamp(20px,1.7vw,23px);line-height:1.22;margin:0 0 14px}
.mini__lead{flex:1;font-size:15px;line-height:1.55;color:var(--text-muted);margin:0 0 24px}
.mini__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;border-top:1px solid var(--border-hairline);padding-top:18px}
.mini__meta{font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;margin:0}
.mini__link,.text-link{font-size:14px;font-weight:500;color:var(--cobalt-blue);text-underline-offset:4px;white-space:nowrap}
.work__more{display:inline-block;margin-top:clamp(28px,3vw,40px)}

/* Hoy: título y foto a la izquierda, lista a la derecha */
.hoy{background:var(--white)}
.hoy__grid{display:grid;gap:clamp(32px,5vw,72px)}
.hoy__title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(64px,8vw,120px);line-height:.9;color:var(--cobalt-blue);margin:0 0 clamp(24px,3vw,36px)}
.hoy__title span{display:block;margin-top:14px;font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);color:var(--text-muted)}
.hoy__photo{aspect-ratio:4/3.4;border-radius:999px 999px 18px 18px;overflow:hidden}
.hoy__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.hoy__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--jet-black)}
.hoy__list li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:24px 0;border-bottom:1px solid var(--border-hairline)}
.hoy__list p{margin:0;font-size:clamp(17px,1.35vw,19px);line-height:1.6}
.hoy__list .num{font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);color:var(--cobalt-blue);padding-top:6px}
.hoy__list .hl{font-family:var(--font-display);font-weight:700;font-size:1.12em;color:var(--cobalt-blue)}
.hoy__more{display:inline-block;margin-top:28px}
@media (min-width:900px){
  .hoy__grid{grid-template-columns:4fr 7fr;align-items:start}
  .hoy__photo{aspect-ratio:4/5;max-width:360px}
}

/* Detrás del Salto: microcopy bajo el botón */
.dds-micro{font-size:13px;color:var(--fog-grey);margin:16px 0 0}

/* Pie nuevo: sobrio, en dos filas + logotipo grande */
.site-footer .wrap.foot{display:grid;grid-template-columns:1fr;gap:28px 48px;align-items:start;padding-top:clamp(48px,6vw,72px);padding-bottom:0;font-size:14px}
.foot__id p{margin:10px 0 0;color:var(--fog-grey)}
.foot__id .wordmark{color:var(--white)}
.foot__links,.foot__social{display:flex;flex-wrap:wrap;gap:12px 24px}
.foot__links a{font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase}
.foot__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;border-top:1px solid var(--border-hairline-invert);padding-top:20px;font-size:13px}
@media (min-width:900px){
  .site-footer .wrap.foot{grid-template-columns:1fr auto}
  .foot__links{justify-content:flex-end;padding-top:4px}
  .foot__bottom{grid-column:1/-1}
}
/* Hero del inicio en celular: el video arriba con tu cara completa, el texto debajo (sin taparla) */
.hero--home .hero__media{z-index:0}
.hero--home .wrap{z-index:1}
@media (max-width:899px){
  .hero--home{display:block;min-height:0}
  .hero--home .hero__media{position:relative;height:min(66svh,620px)}
  .hero--home .hero__media video{opacity:1;object-position:50% 12%}
  .hero--home .hero__media::before{background:linear-gradient(to top,var(--jet-black) 0%,rgba(20,16,16,.55) 22%,rgba(20,16,16,0) 45%)}
  .hero--home .wrap{padding-top:0;margin-top:-72px}
}
@media (max-width:899px){.hero--home{padding:0 0 56px}.hero--home .wrap{padding-bottom:0}}

/* ===== Positioning Intensive (octubre 2026) ===== */
.pi section{padding:clamp(72px,9vw,128px) 0}
.pi-h2{font-family:var(--font-display);font-weight:300;font-size:clamp(32px,4.2vw,58px);line-height:1.06;letter-spacing:-0.01em;margin:0 0 clamp(28px,3vw,40px);max-width:20ch}
.pi-h2--sm{font-size:clamp(26px,3vw,40px);max-width:22ch}
.pi-sub{font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--cobalt-blue);margin:0 0 24px}
.pi-prose{max-width:62ch}
.pi-prose p{font-size:clamp(17px,1.35vw,19px);line-height:1.65;margin:0 0 1.3em}
.pi-prose p:last-child{margin-bottom:0}
.pi-prose .hl{font-family:var(--font-display);font-weight:700;font-size:1.12em;color:var(--cobalt-blue)}
.pi-split{display:grid;gap:clamp(8px,2vw,24px)}
@media (min-width:900px){.pi-split{grid-template-columns:5fr 7fr;gap:clamp(48px,6vw,96px);align-items:start}}

/* 01 · Arriba */
.pi .pi-hero{padding:clamp(40px,6vw,88px) 0 clamp(64px,8vw,112px)}
.pi-hero__grid{display:grid;gap:clamp(40px,5vw,72px);align-items:center}
.pi-hero__text{container-type:inline-size}
.pi-setup{font-family:var(--font-body);font-weight:400;font-size:clamp(15px,1.25vw,17px);line-height:1.5;color:var(--text-muted);max-width:48ch;margin:0 0 clamp(20px,2.4vw,28px)}
.pi-setup span{display:block;font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--cobalt-blue);margin-bottom:10px}
.pi-headline{font-family:var(--font-display);font-weight:300;font-size:min(84px,11cqi);line-height:1.02;letter-spacing:-0.01em;margin:0 0 clamp(20px,2.4vw,28px)}
.pi-headline b{font-weight:700}
.pi-future{font-family:var(--font-display);font-weight:300;font-size:clamp(20px,1.9vw,26px);line-height:1.3;color:var(--cobalt-blue);max-width:34ch;margin:0 0 clamp(28px,3vw,40px)}
.pi-buy{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.pi-meta{font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase}
.pi-hero__photo{aspect-ratio:4/5;border-radius:999px 999px 18px 18px;overflow:hidden;max-width:460px;width:100%;justify-self:end}
.pi-hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
@media (min-width:900px){.pi-hero__grid{grid-template-columns:7fr 5fr}}
@media (max-width:899px){.pi-hero__photo{aspect-ratio:4/3.6;max-width:none}}

/* 02 · La visión, en azul cobalto */
.pi .pi-vision{background:var(--cobalt-blue);color:var(--white)}
.pi-vision .pi-h2{color:var(--white)}
.pi-vision .pi-prose p{color:rgba(255,255,255,.88)}
.pi-evo{font-family:var(--font-display);font-size:clamp(24px,2.4vw,32px)!important;color:var(--white)!important;margin-top:1.6em!important;padding-top:24px;border-top:1px solid rgba(255,255,255,.3)}
.pi-script{font-family:var(--font-script);font-size:2.4em;line-height:.8;color:var(--periwinkle-mist);white-space:nowrap}

/* 03 · El problema */
.pi-quote{font-family:var(--font-display);font-size:clamp(22px,2.2vw,30px)!important;line-height:1.25!important;color:var(--cobalt-blue);padding-left:clamp(18px,2vw,28px);border-left:2px solid var(--cobalt-blue)}

/* 04 · Qué es y 10 · Después: tarjetas numeradas */
.pi .pi-what,.pi .pi-after{background:var(--fog-paper)}
.pi-def{font-family:var(--font-display);font-weight:300;font-size:clamp(24px,2.8vw,40px);line-height:1.2;max-width:36ch;margin:0 0 clamp(40px,5vw,64px)}
.pi-cards{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pi-cards li{display:grid;grid-template-columns:40px 1fr;gap:12px;background:var(--white);border-radius:24px;padding:22px 24px}
.pi-cards .n{font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);color:var(--cobalt-blue);padding-top:4px}
.pi-cards p{margin:0;font-size:clamp(16px,1.25vw,18px);line-height:1.55}
.pi-cards b{font-weight:700}
@media (min-width:760px){.pi-cards--2,.pi-cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.pi-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 05 · Método */
.pi .pi-method{padding-bottom:0}
.pi .pi-center{padding:0}
.pi-center p{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,2.4vw,32px);line-height:1.3;max-width:30ch}
.pi-center strong{font-weight:700;color:var(--cobalt-blue)}
.pi .pi-notis{padding-top:clamp(48px,6vw,80px)}
.pi-lead{font-family:var(--font-display);font-weight:300;font-size:clamp(20px,1.9vw,26px);line-height:1.3;margin:0 0 28px;max-width:36ch}
.pi-lead b{font-weight:700}
.pi-not{list-style:none;margin:0;padding:0;border-top:1px solid var(--jet-black)}
.pi-not li{padding:18px 0;border-bottom:1px solid var(--border-hairline);font-size:clamp(17px,1.35vw,19px);line-height:1.5;font-weight:500}
.pi-not li span{display:block;font-weight:400;color:var(--text-muted)}

/* 06 · Cómo funciona */
.pi .pi-how{background:var(--fog-paper)}
.pi-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.pi-steps li{background:var(--white);border-radius:28px;padding:clamp(24px,2.6vw,36px)}
.pi-steps .n{display:inline-block;background:var(--cobalt-blue);color:var(--white);font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);padding:8px 14px;border-radius:999px;margin-bottom:20px}
.pi-steps h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(19px,1.6vw,22px);line-height:1.15;margin:0 0 12px}
.pi-steps h3 span{display:block;font-family:var(--font-body);font-weight:500;text-transform:none;font-size:14px;color:var(--cobalt-blue);margin-top:6px}
.pi-steps p{margin:0;font-size:16px;line-height:1.6;color:var(--text-muted)}
@media (min-width:760px){.pi-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.pi-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.pi-steps__wide{grid-column:span 2}}
.pi-rhythm{max-width:62ch;margin:clamp(28px,3vw,40px) 0 0;font-size:clamp(16px,1.3vw,18px)}

/* 07 · Para quién es */
.pi .pi-who{background:var(--periwinkle-mist)}
.pi-checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pi-checks li{position:relative;background:rgba(255,255,255,.7);border-radius:999px;padding:16px 24px 16px 54px;font-size:clamp(16px,1.3vw,18px);line-height:1.45}
.pi-checks li::before{content:"";position:absolute;left:22px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--cobalt-blue)}
@media (max-width:759px){.pi-checks li{border-radius:22px}}
@media (min-width:900px){.pi-checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pi-canvas{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,2.4vw,32px);line-height:1.25;max-width:32ch;margin:clamp(40px,5vw,64px) 0 0}
.pi-canvas b{font-weight:700}

/* 08 · Tres momentos */
.pi-moments__grid{display:grid;gap:16px}
@media (min-width:900px){.pi-moments__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pi-moment{background:var(--fog-paper);border-radius:28px;padding:clamp(28px,3vw,40px)}
.pi-moment h3{font-family:var(--font-display);font-weight:700;font-size:clamp(21px,1.8vw,25px);line-height:1.15;color:var(--cobalt-blue);margin:0 0 14px}
.pi-moment p{margin:0;font-size:16px;line-height:1.6}

/* 09 · Quién lee tu caso */
.pi .pi-reader{border-top:1px solid var(--border-hairline)}
.pi-reader__grid{display:grid;gap:clamp(40px,5vw,80px);align-items:center}
.pi-reader__photo{aspect-ratio:4/5;border-radius:999px 999px 18px 18px;overflow:hidden;max-width:420px}
.pi-reader__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
@media (min-width:900px){.pi-reader__grid{grid-template-columns:5fr 7fr}}
@media (max-width:899px){.pi-reader__photo{aspect-ratio:4/3.6;max-width:none}}

/* 11 · Preguntas */
.pi-faq details:first-child{border-top:1px solid var(--jet-black)}

/* 12 · Lo que está en juego */
.pi-stakes__big{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,3.6vw,52px);line-height:1.12;max-width:26ch;margin:0 0 clamp(32px,4vw,56px)}
.pi-stakes__big b{font-weight:700;color:var(--cobalt-blue)}
.pi-stakes__text b{font-weight:700}

/* 13 · Cierre sobre el degradado portal */
.pi .pi-close{background:var(--portal-glow);color:var(--jet-black)}
.pi-close__card{background:var(--white);border-radius:32px;padding:clamp(28px,5vw,64px);max-width:760px;box-shadow:0 40px 80px -50px rgba(20,16,16,.5)}
.pi-close__card > p{font-size:clamp(17px,1.35vw,19px);line-height:1.65;max-width:58ch}
.pi-price{margin:clamp(28px,3vw,40px) 0;padding:clamp(24px,3vw,32px) 0;border-top:1px solid var(--jet-black);border-bottom:1px solid var(--border-hairline)}
.pi-price__n{font-family:var(--font-display);font-weight:700;font-size:clamp(56px,7vw,96px);line-height:.95;color:var(--cobalt-blue);margin:0 0 12px}
.pi-price p{margin:0 0 24px}
.pi-dm{font-size:15px;color:var(--text-muted);margin:0}
.pi-dm a{color:var(--cobalt-blue);text-underline-offset:4px}
.pi-question{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,3.6vw,52px);line-height:1.1;color:var(--white);max-width:20ch;margin:clamp(56px,7vw,96px) 0 0}
.pi-question b{font-weight:700}
.pi-script{display:block;font-size:clamp(72px,18vw,128px);line-height:1;margin-top:8px}
/* Página no encontrada */
.nf{min-height:60vh;display:flex;align-items:center}