@charset "utf-8";
/* ============================================================
   ALTAMIRA FÚTBOL FORMATIVO — sitio
   Mismos colores, fotos, tipografías y logo que el deck impreso.
   Mobile-first. Todo el movimiento respeta prefers-reduced-motion.
   ============================================================ */

/* ---------- FUENTES (mismos subsets del deck) ---------- */
@font-face{font-family:'SyntTurbo';src:url(fonts/synt-turbo.woff2) format('woff2');font-weight:900;font-style:normal;font-display:block}
@font-face{font-family:'SyntSlant';src:url(fonts/synt-slant.woff2) format('woff2');font-weight:900;font-style:normal;font-display:block}
@font-face{font-family:'Timmons';src:url(fonts/timmons.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Untitled';src:url(fonts/ut-regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Untitled';src:url(fonts/ut-medium.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Untitled';src:url(fonts/ut-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'SyntMono';src:url(fonts/synt-mono.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ---------- TOKENS ---------- */
:root{
  --ink:#050C16; --navy:#0A1728; --navy2:#102338;
  --gold:#D0A850; --gold-lt:#E8CE8C; --gold-dk:#8E6B1D;
  --bone:#F2EFE6;
  --txt:#CFD8E4;          /* cuerpo sobre oscuro */
  --txt-l:#4A5769;        /* cuerpo sobre claro  */
  --mut:#93A3B8;

  --fd:'SyntTurbo',Georgia,serif;
  --fs:'SyntSlant',Georgia,serif;
  --fn:'Timmons',Impact,sans-serif;
  --fb:'Untitled',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fm:'SyntMono',ui-monospace,monospace;

  --pad:clamp(20px,5.6vw,104px);
  --gut:clamp(30px,5vw,64px);
  --sec-y:clamp(74px,11vw,150px);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.6,0,.2,1);
  --hdr-h:clamp(58px,9vw,86px);
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--navy); color:#fff;
  font-family:var(--fb); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; text-rendering:optimizeLegibility;
}
img,picture,svg{display:block; max-width:100%}
ul,ol{list-style:none}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
dl,dd,dt{margin:0}
::selection{background:var(--gold); color:var(--navy)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:var(--navy);
  padding:14px 22px;font-family:var(--fm);font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px}

/* ---------- TIPOGRAFÍA ---------- */
.display{
  font-family:var(--fd); text-transform:uppercase;
  font-size:clamp(2.42rem,9.1vw,6.9rem);
  line-height:.94; letter-spacing:-.006em; font-weight:900;
}
.hero__h{font-size:clamp(3.1rem,13.2vw,11.6rem); line-height:.9}
.porque__h{font-size:clamp(2.36rem,10.4vw,6.2rem)}
.display--long{font-size:clamp(2.05rem,8.4vw,6.9rem)}
.gold{color:var(--gold)}

.kicker{
  font-family:var(--fs); text-transform:uppercase; font-weight:900;
  font-size:clamp(1.18rem,4.5vw,2.28rem); line-height:1.14; letter-spacing:.002em;
}
.kicker--muted{color:var(--mut); font-size:clamp(1rem,3.4vw,1.6rem);
  margin-top:clamp(18px,2.6vw,30px)}
.kicker + .body{margin-top:clamp(18px,3vw,34px)}
.kicker + .hr{margin-top:clamp(24px,3.4vw,40px)}

.body{
  font-size:clamp(1rem,3.75vw,1.66rem); line-height:1.62; color:var(--txt);
  max-width:36ch;
}
.body b,.body strong{font-weight:600;color:#fff}

.mono{font-family:var(--fm); text-transform:uppercase;
  font-size:clamp(.66rem,2.5vw,.92rem); letter-spacing:.24em; line-height:1.3}
.num{font-family:var(--fn); font-weight:400; letter-spacing:.01em}

/* ---------- ESTRUCTURA ---------- */
.wrap{padding-inline:var(--pad); width:100%; max-width:1920px; margin-inline:auto}
.sec{position:relative; padding-block:var(--sec-y)}

.eyebrow{display:flex; align-items:center; gap:clamp(10px,2.4vw,18px);
  color:var(--gold); font-family:var(--fm); text-transform:uppercase;
  font-size:clamp(.62rem,2.5vw,.92rem); letter-spacing:.15em;
  margin-bottom:clamp(20px,3.6vw,44px)}
.eyebrow em{font-style:normal; letter-spacing:.18em}
.eyebrow .bar{flex:none; width:clamp(28px,6vw,58px); height:3px; background:var(--gold)}
.eyebrow span{color:var(--mut)}

.rule{display:block; width:clamp(74px,10vw,118px); height:3px; background:var(--gold);
  margin-block:clamp(22px,3.4vw,42px)}
.hr{display:block; width:100%; height:1px; background:rgba(208,168,80,.32)}
.tick{display:block; width:clamp(60px,8vw,94px); height:4px; background:var(--gold)}
.vrule{flex:none; width:4px; align-self:stretch; background:var(--gold)}
.lbl{color:var(--mut); display:block; margin-bottom:clamp(14px,2.2vw,26px)}

/* chip inclinado a 32° — el mismo gesto del deck */
.chip{display:inline-block; transform:skewX(-32deg); background:var(--gold);
  padding:clamp(9px,1.5vw,12px) clamp(20px,3vw,32px)}
.chip>span{display:block; transform:skewX(32deg); font-family:var(--fm);
  text-transform:uppercase; font-size:clamp(.66rem,2.4vw,.92rem);
  letter-spacing:.18em; color:var(--navy); white-space:nowrap}
.chip--ghost{background:none; box-shadow:inset 0 0 0 2px rgba(208,168,80,.6)}
.chip--ghost>span{color:var(--gold)}
.chip--dark{background:var(--navy)}
.chip--dark>span{color:var(--gold)}
.chip--link{transition:transform .5s var(--ease), background-color .35s ease;
  min-height:44px; display:inline-flex; align-items:center}
.chip--link:hover{transform:skewX(-32deg) translateY(-3px)}
.chip--ghost.chip--link:hover{background:rgba(208,168,80,.13)}
.chips{display:flex; flex-wrap:wrap; gap:clamp(9px,1.6vw,15px);
  margin-top:clamp(26px,3vw,40px)}

/* ============================================================
   MOVIMIENTO
   ============================================================ */
[data-reveal]{--d:0s}

/* subida simple */
[data-reveal="up"]{opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease) var(--d), transform .9s var(--ease) var(--d)}
[data-reveal="up"].is-in{opacity:1; transform:none}

/* titular por líneas. clip-path en vez de overflow para no cortar la
   inclinación de 32° de las letras a los lados */
[data-reveal="mask"] .ln{display:block; clip-path:inset(-.32em -40% -.02em -40%)}
[data-reveal="mask"] .ln>i{display:block; font-style:normal;
  transform:translateY(112%); transition:transform 1.05s var(--ease)}
[data-reveal="mask"].is-in .ln>i{transform:none}
[data-reveal="mask"] .ln:nth-child(2)>i{transition-delay:.1s}
[data-reveal="mask"] .ln:nth-child(3)>i{transition-delay:.2s}

/* fotografía: se destapa desde abajo y suelta un leve acercamiento */
[data-reveal="img"]{clip-path:inset(14% 0 0 0);
  transition:clip-path 1.25s var(--ease) var(--d)}
[data-reveal="img"].is-in{clip-path:inset(0 0 0 0)}
[data-reveal="img"] img{transform:scale(1.09);
  transition:transform 1.7s var(--ease) var(--d)}
[data-reveal="img"].is-in img{transform:none}

/* filete que se dibuja */
[data-reveal="rule"]{transform:scaleX(0); transform-origin:left center;
  transition:transform .95s var(--ease) var(--d)}
[data-reveal="rule"].is-in{transform:scaleX(1)}

/* barrido para chips y recuadros de año */
[data-reveal="wipe"]{clip-path:inset(0 101% 0 0);
  transition:clip-path .85s var(--ease) var(--d)}
[data-reveal="wipe"].is-in{clip-path:inset(0 -2% 0 0)}

/* ---------- CORTINA DE ENTRADA ---------- */
.curtain{position:fixed; inset:0; z-index:150; background:var(--navy);
  display:grid; place-items:center;
  transition:opacity .7s ease .25s, visibility .7s .25s}
.curtain img{width:clamp(104px,26vw,166px); height:auto;
  animation:cIn 1.05s var(--ease) both}
@keyframes cIn{from{opacity:0; transform:translateY(16px) scale(.94)} to{opacity:1; transform:none}}
.curtain.gone{opacity:0; visibility:hidden}

/* ---------- BARRA DE AVANCE ---------- */
.progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:120;
  background:rgba(255,255,255,.09)}
.progress i{display:block; height:100%; width:0; background:var(--gold);
  transform-origin:left}

/* ---------- ENCABEZADO ---------- */
.hdr{position:fixed; top:0; left:0; right:0; z-index:110;
  height:var(--hdr-h); display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--pad);
  transition:background-color .5s ease, backdrop-filter .5s ease, box-shadow .5s ease}
.hdr.solid{background:rgba(10,23,40,.9); backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(208,168,80,.2)}
.hdr__logo{display:flex; align-items:center; min-height:44px}
.hdr__logo img{height:clamp(32px,5.4vw,54px); width:auto;
  transition:transform .5s var(--ease)}
.hdr__logo:hover img{transform:scale(1.05)}
.hdr__nav{display:none}

.burger{width:46px; height:46px; margin-right:-11px; display:grid; place-content:center; gap:6px}
.burger span{display:block; width:26px; height:2px; background:#fff;
  transition:transform .45s var(--ease), opacity .3s ease}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ---------- MENÚ MÓVIL ---------- */
.menu{position:fixed; inset:0; z-index:105; background:var(--navy);
  padding:calc(var(--hdr-h) + 26px) var(--pad) 40px;
  display:flex; flex-direction:column; justify-content:center; gap:22px;
  overflow-y:auto; opacity:0; transition:opacity .4s ease}
.menu.open{opacity:1}
.menu nav{display:flex; flex-direction:column; gap:clamp(4px,1.4vw,10px)}
.menu a{font-family:var(--fs); text-transform:uppercase; font-weight:900;
  font-size:clamp(1.35rem,6.4vw,2.1rem); line-height:1.16;
  display:flex; align-items:baseline; gap:14px;
  padding-block:11px;
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .7s var(--ease), color .3s ease}
.menu.open a{opacity:1; transform:none}
.menu a em{font-family:var(--fm); font-style:normal; font-size:.62rem;
  letter-spacing:.2em; color:var(--gold); flex:none}
.menu a:hover,.menu a:focus-visible{color:var(--gold)}
.menu__foot{color:var(--mut); margin-top:8px}

/* ---------- CONTADOR DE SECCIÓN ---------- */
.counter{display:none}

/* ============================================================
   01 · PORTADA
   ============================================================ */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden;
  padding-bottom:clamp(64px,10vw,104px); padding-top:calc(var(--hdr-h) + 20px)}
.hero__media{position:absolute; inset:-10% 0; z-index:0; will-change:transform}
.hero__media picture,.hero__media img{width:100%; height:100%}
.hero__media img{object-fit:cover}
.hero__scrim{position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(5,12,22,.97) 0%, rgba(5,12,22,.74) 26%, rgba(5,12,22,.20) 60%, rgba(5,12,22,.05) 100%),
    linear-gradient(to right, rgba(5,12,22,.86) 0%, rgba(5,12,22,.42) 46%, rgba(5,12,22,.02) 100%)}
.hero__body{position:relative; z-index:1}
.hero__h{margin-block:clamp(14px,2vw,26px) clamp(22px,3.2vw,40px)}
.hero__tag{display:flex; gap:clamp(15px,2.4vw,30px); align-items:stretch;
  margin-bottom:clamp(28px,4vw,48px)}
.hero__tag p{font-size:clamp(1.02rem,3.9vw,1.9rem); line-height:1.5; color:#E4EAF1;
  max-width:34ch}
.hero__cue{position:absolute; z-index:1; bottom:clamp(22px,3vw,40px); right:var(--pad);
  display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.5)}
.hero__cue i{display:block; width:1px; height:clamp(26px,4vw,44px);
  background:linear-gradient(to bottom,var(--gold),transparent);
  animation:cue 2.1s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.5}50%{transform:scaleY(1);transform-origin:top;opacity:1}}

/* ============================================================
   SECCIONES PARTIDAS (foto + texto)
   ============================================================ */
.split{padding-block:0}
.split__media{position:relative; overflow:hidden}
.split__media img{width:100%; height:100%; object-fit:cover}
.split__body{padding-block:var(--sec-y)}

.pillars{display:flex; flex-direction:column; gap:clamp(44px,6vw,64px);
  margin-top:clamp(40px,6vw,78px)}
.pillar__media{overflow:hidden; margin-bottom:0; aspect-ratio:3/2}
.pillar__media img{width:100%;height:100%;object-fit:cover}
.pillar__top{display:flex; align-items:baseline; gap:clamp(12px,2.2vw,20px);
  margin-top:clamp(18px,2.6vw,30px)}
.pillar .num{font-size:clamp(2.5rem,8vw,4.9rem); line-height:.8;
  color:transparent; -webkit-text-stroke:2px rgba(208,168,80,.62)}
.pillar__name{font-family:var(--fd); text-transform:uppercase;
  font-size:clamp(1.5rem,5.6vw,2.5rem); line-height:1; letter-spacing:-.004em}
.pillar .body{margin-top:clamp(10px,1.6vw,18px)}
.sec__head{display:flex; flex-direction:column; gap:clamp(20px,3vw,34px)}
.sec__lead{max-width:32ch}

/* ============================================================
   SECCIONES A SANGRE
   ============================================================ */
.bleed{position:relative; overflow:hidden; min-height:80svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:clamp(90px,14vw,150px)}
.bleed--tall{min-height:96svh; justify-content:space-between}
.bleed__media{position:absolute; inset:-10% 0; z-index:0; will-change:transform}
.bleed__media picture,.bleed__media img{width:100%;height:100%}
.bleed__media img{object-fit:cover}
.bleed__scrim{position:absolute; inset:0;
  background:linear-gradient(to top, rgba(5,12,22,.97) 0%, rgba(5,12,22,.76) 30%, rgba(5,12,22,.22) 66%, rgba(5,12,22,0) 100%)}
.bleed__scrim--strong{background:
  linear-gradient(to top, rgba(5,12,22,.99) 0%, rgba(5,12,22,.9) 34%, rgba(5,12,22,.34) 72%, rgba(5,12,22,.06) 100%)}
.bleed__body,.bleed__top{position:relative; z-index:1}
.bleed__top{padding-top:clamp(6px,1vw,10px)}
.bleed .display{margin-bottom:clamp(24px,3.4vw,40px)}
.porque__aside .rule{margin-top:0}

/* ============================================================
   06 · VALORES
   ============================================================ */
.vals{display:grid; grid-template-columns:1fr; margin-top:clamp(34px,5vw,58px)}
.vals li{display:flex; align-items:baseline; gap:clamp(14px,2.4vw,22px);
  padding-block:clamp(18px,2.6vw,26px);
  border-top:1px solid rgba(208,168,80,.3)}
.vals li:last-child{border-bottom:1px solid rgba(208,168,80,.3)}
.vals .num{font-size:clamp(1.35rem,4vw,1.95rem); color:var(--gold); flex:none; line-height:1}
.vals span{font-family:var(--fs); text-transform:uppercase; font-weight:900;
  font-size:clamp(1.32rem,5.4vw,2.35rem); line-height:1.08}
.valores__media{margin-top:clamp(40px,6vw,70px); overflow:hidden; aspect-ratio:3/2}
.valores__media img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   07 · CATEGORÍAS
   ============================================================ */
.cats{display:flex; flex-direction:column; gap:clamp(40px,6vw,70px);
  margin-top:clamp(36px,5vw,62px)}
.years{display:flex; flex-wrap:wrap; gap:clamp(11px,2vw,17px)}
.yr{display:inline-block; transform:skewX(-32deg);
  box-shadow:inset 0 0 0 2px rgba(10,23,40,.34);
  padding:clamp(12px,1.6vw,16px) clamp(20px,2.6vw,30px)}
.yr>span{display:block; transform:skewX(32deg); font-family:var(--fn);
  font-size:clamp(2.15rem,7.2vw,3.15rem); line-height:.9; color:var(--navy)}
.dl{display:grid; gap:clamp(6px,1vw,10px)}
.dl dt{color:var(--gold-dk); margin-top:clamp(14px,2vw,22px)}
.dl dt:first-child{margin-top:0}
.dl dd{font-family:var(--fb); font-weight:600;
  font-size:clamp(1.05rem,4vw,1.78rem); line-height:1.38}
.dl--contact dd a{display:inline-block; padding-block:10px;
  border-bottom:1px solid rgba(208,168,80,.5);
  transition:color .3s ease, border-color .3s ease}
.dl--contact dd a:hover{color:var(--gold); border-color:var(--gold)}
.band{margin-top:clamp(48px,7vw,84px); overflow:hidden;
  aspect-ratio:3/2; max-height:44svh}
.band img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   08 · UNIFORMES
   ============================================================ */
.kits{display:flex; flex-direction:column; gap:clamp(46px,6vw,70px);
  margin-top:clamp(38px,5vw,64px)}
.kit__media{position:relative; overflow:hidden; aspect-ratio:3/2}
.kit__media img{width:100%;height:100%;object-fit:cover}
.kit__tag{position:absolute; left:0; bottom:0}
.sw{display:flex; height:clamp(11px,1.6vw,16px)}
.sw i{flex:1}
.sw--w{background:#fff; box-shadow:inset 0 0 0 1px rgba(10,23,40,.28)}
.kit .body{margin-top:clamp(16px,2.2vw,26px)}

/* ============================================================
   09 · COSTOS
   ============================================================ */
.prices{margin-top:clamp(30px,4.4vw,54px)}
.prices__row{display:flex; flex-direction:column; gap:clamp(30px,4vw,52px);
  padding-block:clamp(34px,4.6vw,64px)}
.price__amt{display:block; font-family:var(--fn);
  font-size:clamp(3.6rem,15vw,10.4rem); line-height:.84; letter-spacing:-.005em;
  color:var(--navy)}
.price__amt em{font-family:var(--fs); font-style:normal; font-weight:900;
  font-size:.34em; vertical-align:top; line-height:1.35; margin-right:.06em; color:var(--gold)}
.price__amt i{font-style:normal; font-size:.45em}
.price .lbl{margin-top:clamp(10px,1.6vw,18px); margin-bottom:0}
.note{display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(16px,2.4vw,26px); margin-top:clamp(30px,4.6vw,60px)}
.note .body{max-width:34ch}
.split__media--soft img{object-position:center 42%}

/* ============================================================
   10 · FAMILIAS
   ============================================================ */
.docs{margin-top:0}
.docs li{display:flex; align-items:baseline; gap:clamp(14px,2.4vw,24px);
  padding-block:clamp(15px,2.2vw,23px);
  border-top:1px solid rgba(208,168,80,.3)}
.docs li:last-child{border-bottom:1px solid rgba(208,168,80,.3)}
.docs .num{font-size:clamp(1.3rem,3.9vw,1.95rem); color:var(--gold-dk); flex:none; line-height:1}
.docs span{font-family:var(--fs); text-transform:uppercase; font-weight:900;
  font-size:clamp(1.05rem,4.3vw,1.82rem); line-height:1.14}

/* ---------- CONTACTO ---------- */
.cta{display:flex; flex-wrap:wrap; gap:clamp(12px,2vw,18px);
  margin-top:clamp(30px,4.4vw,50px)}

/* ---------- PIE ---------- */
.ftr{background:var(--ink); padding-block:clamp(50px,7vw,84px)}
.ftr__in{display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center}
.ftr__logo{width:clamp(90px,17vw,124px); height:auto}
.ftr .mono{color:rgba(255,255,255,.55)}
.ftr__loc{color:rgba(255,255,255,.32)}

/* ============================================================
   SECCIONES CLARAS
   ============================================================ */
.light{background:var(--bone); color:var(--navy)}
.light .body{color:var(--txt-l)}
.light .body b{color:var(--navy)}
.light .eyebrow span{color:#77839A}
.light .eyebrow{color:var(--gold-dk)}
.light .eyebrow .bar,.light .rule,.light .tick{background:var(--gold-dk)}
.light .hr{background:rgba(10,23,40,.14)}
.light .lbl{color:#5E6B80}
.light .vals li,.light .docs li{border-color:rgba(10,23,40,.16)}
.light .chip--ghost{box-shadow:inset 0 0 0 2px rgba(10,23,40,.24)}
.light .chip--ghost>span{color:var(--navy)}
.light .kicker--muted{color:#77839A}
.light .dl dt{color:var(--gold-dk)}

/* ============================================================
   ESCRITORIO
   ============================================================ */
@media (min-width:900px){
  .bleed{min-height:92svh}
  .bleed--tall{min-height:100svh}
  .eyebrow{letter-spacing:.24em}
  .hdr__nav{display:flex; gap:clamp(20px,2.4vw,42px)}
  .hdr__nav a{font-family:var(--fm); text-transform:uppercase; font-size:.78rem;
    letter-spacing:.2em; color:rgba(255,255,255,.72); position:relative; padding-block:6px;
    transition:color .3s ease}
  .hdr__nav a::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:var(--gold); transform:scaleX(0); transform-origin:left;
    transition:transform .45s var(--ease)}
  .hdr__nav a:hover{color:#fff}
  .hdr__nav a:hover::after{transform:scaleX(1)}
  .burger{display:none}
  .menu{display:none!important}

  .counter{display:block; position:fixed; z-index:100;
    right:var(--pad); bottom:clamp(26px,3vw,44px);
    color:rgba(255,255,255,.44); letter-spacing:.18em; font-size:.76rem;
    mix-blend-mode:difference}
  .counter b{color:var(--gold); font-weight:400}

  /* portada: el texto ocupa media pantalla */
  .hero__body{max-width:min(1520px,89vw)}

  /* partidas: foto y texto en paralelo */
  .split{display:grid; align-items:stretch; min-height:100svh}
  .split{grid-template-columns:minmax(0,46fr) minmax(0,54fr)}
  .split--rev{grid-template-columns:minmax(0,54fr) minmax(0,46fr)}
  .split--rev .split__media{order:2}
  .split--rev .split__body{order:1}
  .split__media{height:100%}
  .split__body{display:flex; flex-direction:column; justify-content:center;
    padding-block:clamp(90px,9vw,140px)}
  /* el titular debe caber en SU columna, no en la ventana */
  .split__body .display{font-size:clamp(2.42rem,5.4vw,4.7rem)}
  /* filete dorado donde la foto encuentra al panel */
  .split__media::after{content:''; position:absolute; top:0; bottom:0; right:0;
    width:4px; background:var(--gold); z-index:2}
  .split--rev .split__media::after{right:auto; left:0}

  #costos{grid-template-columns:minmax(0,62fr) minmax(0,38fr)}
  #contacto{grid-template-columns:minmax(0,62fr) minmax(0,38fr)}
  #familias{grid-template-columns:minmax(0,40fr) minmax(0,60fr)}

  .pillars{flex-direction:row; gap:var(--gut)}
  .pillar{flex:1}
  .sec__head{flex-direction:row; align-items:flex-end; justify-content:space-between;
    gap:var(--gut)}
  /* el titular toma su ancho natural; el párrafo se acomoda al resto */
  .sec__head .display{flex:none}
  .sec__lead{flex:1; min-width:0}

  .vals{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--gut)}
  .valores{display:grid; grid-template-columns:minmax(0,1fr) clamp(220px,22vw,380px);
    column-gap:var(--gut); align-items:start}
  .valores__head{grid-column:1; grid-row:1}
  .vals{grid-column:1; grid-row:2}
  .valores__media{grid-column:2; grid-row:1/span 2; margin-top:0;
    aspect-ratio:auto; height:100%; min-height:520px; position:relative}
  .valores__media::before{content:''; position:absolute; left:calc(-1 * var(--gut) / 2);
    top:0; bottom:0; width:4px; background:var(--gold); z-index:2}

  .cats{flex-direction:row; gap:clamp(60px,7vw,120px); align-items:flex-start}
  .cats__years{flex:1.75}
  .cats__data{flex:1; padding-top:clamp(20px,3vw,38px)}
  .band{aspect-ratio:auto; height:clamp(280px,26vw,380px); max-height:none}

  .kits{flex-direction:row; gap:var(--gut)}
  .kit{flex:1}

  .prices__row{flex-direction:row; gap:clamp(50px,6vw,96px); align-items:flex-start}
  .prices__row .price:first-child{padding-right:clamp(30px,4vw,70px);
    border-right:1px solid rgba(10,23,40,.14)}
  .note{flex-direction:row; align-items:center}

  .porque__body{display:flex; align-items:flex-end; justify-content:space-between;
    gap:clamp(44px,6vw,84px)}
  .porque__h{flex:none; margin-bottom:0}
  .porque__aside{flex:1; max-width:470px; padding-bottom:clamp(14px,2vw,26px)}

  .ftr__in{flex-direction:row; justify-content:space-between; text-align:left}
}

@media (min-width:1500px){
  .body{font-size:1.7rem}
  .split__body{padding-inline:clamp(64px,5vw,104px)}
}

/* ============================================================
   MOVIMIENTO REDUCIDO — todo visible, sin desplazamientos
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  [data-reveal]{opacity:1!important; transform:none!important; clip-path:none!important}
  [data-reveal="img"] img{transform:none!important}
  [data-reveal="mask"] .ln{clip-path:none!important}
  [data-reveal="mask"] .ln>i{transform:none!important}
  .hero__media,.bleed__media{transform:none!important; inset:0!important}
  .curtain{display:none}
  .hero__cue i{animation:none}
}