/* ============================================================
   X Un Cambio — hoja de estilo única
   Paleta, tipografía y componentes. Sin frameworks, sin build.
   ============================================================ */

:root{
  /* Marca */
  --navy:#0A2E6E;
  --navy-900:#07224F;
  --azul:#1B7FEF;
  --azul-claro:#E7F1FE;
  --oro:#E89B0C;
  --oro-claro:#FDF3E0;
  --verde:#2E8B57;

  /* Neutros */
  --tinta:#13213B;
  --gris:#5A6983;
  --linea:#DEE5EF;
  --fondo:#FFFFFF;
  --fondo-2:#F5F8FC;

  --ancho:1180px;
  --r:14px;
  --r-s:10px;
  --sombra:0 1px 2px rgba(10,46,110,.06), 0 12px 32px -12px rgba(10,46,110,.18);
  --sombra-f:0 1px 2px rgba(10,46,110,.08), 0 24px 56px -20px rgba(10,46,110,.30);

  --display:"Montserrat",system-ui,sans-serif;
  --texto:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font-family:var(--texto);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--azul);text-underline-offset:3px}

h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,6vw,4rem)}
h2{font-size:clamp(1.75rem,3.6vw,2.6rem)}
h3{font-size:1.18rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.05em}

.cont{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.salto{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:99;border-radius:0 0 8px 0}
.salto:focus{left:0}

:focus-visible{outline:3px solid var(--oro);outline-offset:3px;border-radius:4px}

/* ─────────── Kickers y textos de apoyo ─────────── */
.kick{
  font-family:var(--display);font-weight:700;font-size:.76rem;
  letter-spacing:.16em;text-transform:uppercase;margin:0 0 .9em;
}
.kick--osc{color:var(--azul)}
.kick--clara{color:var(--oro)}
.hero .kick{color:#9EC6FA}

.plomo{font-size:1.14rem;color:var(--gris)}
.plomo--clara{color:#C3D4EE}
.nota{
  font-size:.95rem;color:var(--gris);background:var(--fondo-2);
  border-left:3px solid var(--oro);border-radius:0 var(--r-s) var(--r-s) 0;
  padding:14px 18px;margin-top:1.4em;
}

/* ─────────── Botones ─────────── */
.btn{
  --bg:var(--oro);--fg:#1B1206;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--display);font-weight:700;font-size:.97rem;letter-spacing:-.005em;
  padding:14px 24px;border-radius:999px;border:2px solid transparent;
  background:var(--bg);color:var(--fg);text-decoration:none;cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 2px 0 rgba(0,0,0,.06);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(10,46,110,.5)}
.btn:active{transform:translateY(0)}
.btn--sol{--bg:var(--oro);--fg:#2A1B02}
.btn--azul{--bg:var(--azul);--fg:#fff}
.btn--linea{background:transparent;border-color:currentColor;color:var(--navy);box-shadow:none}
.hero .btn--linea{color:#fff}
.btn--full{width:100%}

.enl{font-family:var(--display);font-weight:700;color:var(--azul);text-decoration:none}
.enl:hover{text-decoration:underline}

/* ─────────── Cinta superior ─────────── */
.cinta{background:var(--navy-900);color:#C3D4EE;font-size:.8rem}
.cinta__in{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:36px}
.cinta__loc{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:#fff}
.cinta__loc svg{width:15px;height:15px;fill:var(--oro)}
.cinta__lema{font-family:var(--display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.7rem;color:var(--oro)}
@media (max-width:640px){.cinta__lema{display:none}}

/* ─────────── Cabecera ─────────── */
.cab{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.cab.alto{box-shadow:0 6px 24px -16px rgba(10,46,110,.5)}
.cab__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.cab__logo img{height:40px;width:auto}

.nav{display:flex;align-items:center;gap:26px}
.nav a{
  font-family:var(--display);font-weight:700;font-size:.93rem;color:var(--navy);
  text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;
}
.nav a:hover{border-color:var(--oro)}
.nav .btn{padding:11px 20px;font-size:.9rem;border-bottom:none}
.nav .btn:hover{border-color:transparent}

.hamb{display:none;width:44px;height:44px;border:1px solid var(--linea);border-radius:10px;background:#fff;cursor:pointer;padding:12px 10px;flex-direction:column;justify-content:space-between}
.hamb span{display:block;height:2px;background:var(--navy);border-radius:2px;transition:.2s}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:900px){
  .hamb{display:flex}
  .nav{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--linea);padding:8px 20px 20px;
    box-shadow:var(--sombra);display:none;
  }
  .nav.abierto{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--linea)}
  .nav .btn{margin-top:14px;justify-content:center}
}

/* ─────────── Hero ─────────── */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(900px 520px at 88% 8%, rgba(27,127,239,.45), transparent 62%),
    radial-gradient(620px 420px at 6% 96%, rgba(232,155,12,.22), transparent 64%),
    linear-gradient(170deg,#0B3179 0%,#0A2E6E 52%,#071F4A 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent);
          mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent);
}
.hero__in{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center;padding:72px 20px 96px}
.hero h1{margin-bottom:.45em}
.hero h1 em{font-style:normal;color:var(--oro);display:inline-block;position:relative}
.hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.1em;
  background:var(--azul);border-radius:2px;opacity:.9;
}
.hero__bajada{font-size:1.14rem;color:#CBDCF4;max-width:40ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0 18px}
.hero__pie{font-size:.9rem;color:#8FB2E0;margin:0}

.hero__img{margin:0;position:relative}
.hero__img figcaption{
  position:absolute;left:14px;bottom:14px;z-index:2;
  background:rgba(7,34,79,.86);color:#CBDCF4;border:1px solid rgba(255,255,255,.14);
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;
}
.ph{
  aspect-ratio:4/5;border-radius:20px;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px dashed rgba(255,255,255,.3);
  display:grid;place-content:center;justify-items:center;gap:16px;text-align:center;
  color:#A9C6EC;font-size:.85rem;line-height:1.45;padding:24px;
}
.ph img{width:104px;opacity:.5}
.ph b{font-family:var(--display);color:#fff}

.hero__curva{position:absolute;left:0;right:0;bottom:-1px;height:54px;background:#fff;clip-path:ellipse(72% 100% at 50% 100%)}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;gap:34px;padding:52px 20px 78px}
  .hero__img{order:-1;max-width:360px}
  .ph{aspect-ratio:16/10}
}

/* ─────────── Método ─────────── */
.metodo{background:#fff;padding:62px 0 10px}
.metodo__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.metodo__lista li{
  border-top:3px solid var(--linea);padding-top:20px;position:relative;
}
.metodo__lista li:nth-child(1){border-color:var(--azul)}
.metodo__lista li:nth-child(2){border-color:var(--oro)}
.metodo__lista li:nth-child(3){border-color:var(--navy)}
.metodo__n{font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.14em;color:var(--gris)}
.metodo__lista h3{margin:.35em 0 .35em}
.metodo__lista p{color:var(--gris);font-size:.98rem;margin:0}
@media (max-width:820px){.metodo__lista{grid-template-columns:1fr;gap:22px}}

/* ─────────── Secciones ─────────── */
.sec{padding:84px 0}
.sec--gris{background:var(--fondo-2);border-block:1px solid var(--linea)}
.sec--osc{background:var(--navy);color:#fff}
.sec--osc h2{color:#fff}

.dos{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.dos--form{grid-template-columns:1fr 1fr;align-items:center}
@media (max-width:920px){.dos,.dos--form{grid-template-columns:1fr;gap:38px}}

/* Ficha lateral */
.ficha{background:var(--navy);color:#fff;border-radius:var(--r);padding:30px;box-shadow:var(--sombra)}
.ficha h3{color:#fff;margin-bottom:1em}
.ficha dl{margin:0 0 22px}
.ficha dl > div{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.ficha dl > div:last-child{border-bottom:none}
.ficha dt{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--oro)}
.ficha dd{margin:4px 0 0;font-size:.96rem;color:#D5E3F7}
.ficha .btn--linea{color:#fff}

/* ─────────── Pilares ─────────── */
.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
@media (max-width:980px){.pilares{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.pilares{grid-template-columns:1fr}}

.pilar{
  background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:26px;
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.pilar:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:#C9D7EA}
.pilar h3{margin-bottom:.4em}
.pilar p{color:var(--gris);font-size:.97rem;margin:0}
.pilar__ico{display:grid;place-content:center;width:46px;height:46px;border-radius:12px;margin-bottom:16px}
.pilar__ico svg{width:24px;height:24px}
.pilar__ico--azul{background:var(--azul-claro)} .pilar__ico--azul svg{fill:var(--azul)}
.pilar__ico--oro{background:var(--oro-claro)}  .pilar__ico--oro svg{fill:#C9870A}
.pilar__ico--verde{background:#E6F4EC}         .pilar__ico--verde svg{fill:var(--verde)}

.pilar--dest{
  background:linear-gradient(160deg,var(--navy),#071F4A);color:#fff;border-color:transparent;
  display:flex;flex-direction:column;justify-content:center;
}
.pilar--dest h3{color:#fff}
.pilar--dest p{color:#C3D4EE;margin-bottom:1em}
.pilar--dest .enl{color:var(--oro)}

/* ─────────── Lista con tildes ─────────── */
.chk{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.chk li{position:relative;padding-left:32px;color:#C3D4EE;font-size:.97rem}
.chk li::before{
  content:"✓";
  position:absolute;left:0;top:.18em;
  width:20px;height:20px;border-radius:50%;
  background:var(--oro);color:#2A1B02;
  font-size:.72rem;font-weight:700;line-height:20px;text-align:center;
}

/* ─────────── Formularios ─────────── */
.form{
  background:#fff;border-radius:var(--r);padding:30px;box-shadow:var(--sombra-f);
  color:var(--tinta);
}
.form--claro{border:1px solid var(--linea);box-shadow:var(--sombra)}
.form__t{margin-bottom:1.1em;padding-bottom:.7em;border-bottom:2px solid var(--oro);display:inline-block}

.campo{margin-bottom:18px;border:0;padding:0;min-width:0}
.campo--2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:480px){.campo--2{grid-template-columns:1fr}}

label,legend{display:block;font-family:var(--display);font-weight:700;font-size:.84rem;color:var(--navy);margin-bottom:7px}
.req{color:#C0392B}

input[type=text],input:not([type]),input[type=email],input[type=tel],select,textarea{
  width:100%;font:inherit;font-size:.97rem;color:var(--tinta);
  padding:12px 14px;border:1.5px solid var(--linea);border-radius:var(--r-s);
  background:#fff;transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{resize:vertical;min-height:96px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(27,127,239,.14)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:#C0392B;box-shadow:0 0 0 4px rgba(192,57,43,.12)}
::placeholder{color:#9AA7BC}

.chkbox{display:flex;gap:11px;align-items:flex-start;font-family:var(--texto);font-weight:400;font-size:.88rem;color:var(--gris);margin:4px 0 20px;line-height:1.5}
.chkbox input{margin-top:3px;width:18px;height:18px;accent-color:var(--azul);flex:none}

.pills{display:flex;flex-wrap:wrap;gap:9px}
.pills label{margin:0}
.pills input{position:absolute;opacity:0;width:0;height:0}
.pills span{
  display:inline-block;padding:9px 15px;border:1.5px solid var(--linea);border-radius:999px;
  font-family:var(--texto);font-weight:500;font-size:.88rem;color:var(--gris);cursor:pointer;transition:.15s;
}
.pills input:checked + span{background:var(--azul);border-color:var(--azul);color:#fff}
.pills input:focus-visible + span{outline:3px solid var(--oro);outline-offset:2px}

.miel{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}

.form__msg{margin:14px 0 0;font-size:.92rem;font-weight:500;min-height:1.2em}
.form__msg.ok{color:#1E7A48}
.form__msg.mal{color:#C0392B}

/* ─────────── Cierre ─────────── */
.cierre{
  background:linear-gradient(135deg,var(--azul),var(--navy) 62%);
  color:#fff;text-align:center;padding:72px 0;
}
.cierre__k{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.02em;margin:0 0 .2em}
.cierre__f{color:#CBDCF4;font-size:1.1rem;margin:0 0 1.6em}

/* ─────────── Pie ─────────── */
.pie{background:var(--navy-900);color:#B9CCE8;padding:62px 0 0;font-size:.95rem}
.pie__in{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:42px;padding-bottom:46px}
@media (max-width:880px){.pie__in{grid-template-columns:1fr;gap:34px}}
.pie h2{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--oro);margin-bottom:1.2em}
.pie__marca img{width:220px;margin-bottom:18px}
.pie__marca p{margin:0;font-size:.9rem;max-width:34ch}
.pie__nav,.pie__red{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.pie a{color:#D5E3F7;text-decoration:none;display:inline-flex;align-items:center;gap:9px}
.pie a:hover{color:#fff;text-decoration:underline}
.pie__red svg{width:18px;height:18px;fill:var(--oro);flex:none}
.pie__legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);padding-block:20px;font-size:.84rem;color:#8FA9CE}
.pie__legal p{margin:0}
.pie__lema{font-family:var(--display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;color:var(--oro)}

/* Ajuste móvil del marcador de la foto de portada */
@media (max-width:900px){
  .hero__img figcaption{position:static;display:inline-block;margin-top:12px}
}

/* ============================================================
   Añadidos: rayitas separadoras, foto del hero, página de
   afiliación y bloque «dar un paso más».
   ============================================================ */

/* Rayita separadora, en lugar del punto */
.raya{
  display:inline-block;width:14px;height:2px;border-radius:1px;
  background:currentColor;opacity:.75;vertical-align:middle;
  margin:0 .5em;
}
.cinta__lema .raya,.pie__lema .raya{background:var(--oro);opacity:.9}

/* Foto / ilustración del hero */
.hero__foto{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:20px;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
}
.hero__prov{
  position:absolute;right:14px;top:14px;z-index:2;
  background:rgba(7,34,79,.82);color:#A9C6EC;border:1px solid rgba(255,255,255,.16);
  font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 11px;border-radius:999px;
}
@media (max-width:900px){
  .hero__foto{aspect-ratio:16/11}
  .hero__prov{right:10px;top:10px}
}

/* Botón Afiliate en la barra */
.nav__afi{border-color:var(--navy);color:var(--navy)}
@media (max-width:900px){.nav__afi{margin-top:14px;justify-content:center}}

/* Bloque «dar un paso más» */
.afi{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:space-between;
  background:var(--azul-claro);border:1px solid #C5DCF8;border-radius:var(--r);
  padding:22px 24px;margin-top:22px;
}
.afi h3{margin-bottom:.3em}
.afi p{margin:0;color:var(--gris);font-size:.95rem;max-width:44ch}

.cierre__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── Página de afiliación ── */
.encab{background:var(--navy);color:#fff;padding:62px 0 58px}
.encab h1{font-size:clamp(2rem,5vw,3.1rem);margin-bottom:.35em}
.encab__b{color:#CBDCF4;font-size:1.12rem;max-width:58ch;margin:0}

.sub{margin-top:1.8em;margin-bottom:.7em;color:var(--navy)}
.chk--osc li{color:var(--gris)}
.chk--osc li::before{background:var(--azul);color:#fff}

.pasos{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:p}
.pasos li{display:flex;gap:14px;align-items:flex-start}
.pasos li span{
  flex:none;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;
  font-family:var(--display);font-weight:700;font-size:.85rem;
  display:grid;place-content:center;margin-top:2px;
}
.pasos li div{color:var(--gris);font-size:.97rem}
.pasos li strong{color:var(--tinta)}

.ayuda{font-size:.85rem;color:var(--gris);margin:8px 0 0}

.pills--radio input{position:absolute;opacity:0;width:0;height:0}
.pills--radio input:checked + span{background:var(--navy);border-color:var(--navy);color:#fff}

/* En la página de afiliación las dos columnas arrancan arriba */
.sec--arriba .dos--form{align-items:start}

/* ============================================================
   Las dos Madryn — el par de imágenes que sostiene el marco
   ============================================================ */
.dosm{padding:84px 0;background:var(--fondo-2);border-block:1px solid var(--linea)}
.dosm__intro{max-width:64ch}

.dosm__par{
  display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px;
}
@media (max-width:820px){.dosm__par{grid-template-columns:1fr;gap:22px}}

.dosm__f{
  position:relative;margin:0;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sombra);background:var(--navy);
}
.dosm__f img{
  width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform .5s ease;
}
.dosm__f:hover img{transform:scale(1.03)}

.dosm__f figcaption{
  position:absolute;inset:auto 0 0 0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:52px 18px 16px;
  background:linear-gradient(to top,rgba(5,24,56,.88),rgba(5,24,56,.55) 42%,transparent);
}
.dosm__et{
  font-family:var(--display);font-weight:800;font-size:1.05rem;color:#fff;
  letter-spacing:-.01em;
}
.dosm__et::before{
  content:"";display:block;width:34px;height:3px;border-radius:2px;margin-bottom:8px;
}
.dosm__et--a::before{background:var(--azul)}
.dosm__et--b::before{background:var(--oro)}
.dosm__pie{
  font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:#A9C6EC;
}
.dosm__prov{
  position:absolute;right:12px;top:12px;
  background:rgba(7,34,79,.82);color:#A9C6EC;border:1px solid rgba(255,255,255,.16);
  font-family:var(--display);font-weight:700;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;
}
.dosm__cierre{
  margin:28px 0 0;font-size:1.02rem;color:var(--gris);
}
.dosm__cierre a{font-weight:600}

/* ── Banda de cierre, sobre la foto ── */
.cierre--foto{position:relative;isolation:isolate;overflow:hidden;padding:96px 0}
.cierre--foto::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("../img/atardecer.jpg") center 52% / cover no-repeat;
}
.cierre--foto::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(70% 120% at 50% 55%, rgba(5,22,52,.80), rgba(5,22,52,.30) 72%, transparent),
    linear-gradient(180deg, rgba(5,22,52,.72) 0%, rgba(7,30,70,.28) 42%, rgba(5,22,52,.80) 100%);
}
.cierre--foto .cierre__k{text-shadow:0 2px 26px rgba(3,16,40,.85),0 1px 3px rgba(3,16,40,.7)}
.cierre--foto .cierre__f{color:#E6EFFA;text-shadow:0 1px 16px rgba(3,16,40,.9)}

/* ============================================================
   EL VIAJE — la cámara que entra, de la postal a la cuadra.
   El movimiento lo calcula app.js; acá va el escenario.
   ============================================================ */

.viaje{
  position:relative;
  height:340vh;                 /* recorrido de scroll: 3 estaciones */
  background:var(--navy-900);
}
.viaje__esc{
  position:sticky;top:0;
  height:100svh;min-height:520px;
  overflow:hidden;
  display:grid;place-items:center;
  isolation:isolate;
}

/* ── Capas de imagen ── */
.viaje__capas{position:absolute;inset:0;z-index:-2}
.viaje__capa{
  position:absolute;inset:0;
  opacity:0;
  transform:scale(1.06);
  transform-origin:50% 55%;
  will-change:transform,opacity;
  backface-visibility:hidden;
}
.viaje__capa img,.viaje__capa picture{width:100%;height:100%;display:block}
.viaje__capa img{object-fit:cover;object-position:center 38%}
.viaje__capa[data-capa="1"] img{object-position:center 50%}
.viaje__capa[data-capa="2"] img{object-position:center 50%}

.viaje__velo{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(5,22,52,.58) 0%, rgba(5,22,52,.12) 26%, rgba(5,22,52,.30) 58%, rgba(5,22,52,.86) 100%),
    linear-gradient(100deg, rgba(5,22,52,.74) 0%, rgba(5,22,52,.34) 46%, rgba(5,22,52,.06) 78%);
}

/* ── Textos de cada estación ── */
.viaje__textos{
  position:relative;z-index:2;
  width:100%;max-width:var(--ancho);margin-inline:auto;padding:0 20px;
  display:grid;
}
.viaje__t{
  grid-area:1/1;
  opacity:0;transform:translateY(26px);
  will-change:transform,opacity;
  color:#fff;max-width:46ch;
  text-shadow:0 2px 30px rgba(3,14,36,.65);
}
.viaje__t .kick{color:#9EC6FA;text-shadow:none}

.viaje__frase{
  font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.08;
  font-size:clamp(2.1rem,5.6vw,3.9rem);margin:0;
}
.viaje__t--fin h1{margin-bottom:.4em}
.viaje__t--fin h1 em{font-style:normal;color:var(--oro);position:relative;display:inline-block}
.viaje__t--fin h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.04em;height:.09em;
  background:var(--azul);border-radius:2px;
}
.viaje__bajada{font-size:1.1rem;color:#D4E2F6;max-width:40ch;margin-bottom:1.6em;text-shadow:0 1px 18px rgba(3,14,36,.8)}
.viaje__t--fin .hero__cta{margin:0}

/* ── Indicador de estaciones ── */
.viaje__pasos{
  position:absolute;z-index:3;right:22px;top:50%;transform:translateY(-50%);
  display:grid;gap:10px;
}
.viaje__pasos span{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.3);transition:background .25s ease,transform .25s ease;
}
.viaje__pasos span.on{background:var(--oro);transform:scale(1.5)}
@media (max-width:620px){.viaje__pasos{right:12px}}

/* ── «Seguí bajando» ── */
.viaje__guia{
  position:absolute;z-index:3;left:50%;bottom:26px;transform:translateX(-50%);
  margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-family:var(--display);font-weight:700;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);
  transition:opacity .4s ease;pointer-events:none;
}
.viaje__guia svg{width:20px;height:20px;fill:currentColor;animation:bajar 1.9s ease-in-out infinite}
.viaje--andando .viaje__guia{opacity:0}
@keyframes bajar{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(5px);opacity:1}}

/* ── Sin viaje: para quien pide menos movimiento, o si falla el JS ── */
.viaje--simple{height:auto;background:var(--navy)}
.viaje--simple .viaje__esc{position:static;height:auto;min-height:0;padding:56px 0 72px;display:block}
.viaje--simple .viaje__capas{position:relative;inset:auto;height:46svh;min-height:260px;margin-bottom:34px}
.viaje--simple .viaje__capa{opacity:1;transform:none}
.viaje--simple .viaje__capa[data-capa="0"],
.viaje--simple .viaje__capa[data-capa="1"]{display:none}
.viaje--simple .viaje__textos{display:block}
.viaje--simple .viaje__t{opacity:1;transform:none;max-width:52ch}
.viaje--simple .viaje__t[data-txt="0"],
.viaje--simple .viaje__t[data-txt="1"]{display:none}
.viaje--simple .viaje__pasos,.viaje--simple .viaje__guia{display:none}

@media (prefers-reduced-motion:reduce){
  .viaje{height:auto}
  .viaje__esc{position:static}
  .viaje__capa{transition:none}
}

/* La ilustración del barrio es clara: se oscurece para que el texto se lea */
.viaje__capa[data-capa="1"]{filter:brightness(.92) saturate(1) contrast(1.02)}
.viaje__capa[data-capa="2"]{filter:brightness(.88) saturate(.97) contrast(1.03)}
.viaje .btn--linea{color:#fff;border-color:#fff}
.viaje .btn--linea:hover{background:#fff;color:var(--navy)}

/* ============================================================
   Barra superior transparente mientras la foto está detrás
   ============================================================ */
.cab__logo{position:relative;display:block}
.logo-blanco{position:absolute;inset:0;opacity:0;transition:opacity .25s ease}
.logo-color{transition:opacity .25s ease}

.cinta{position:relative;z-index:51;transition:background .3s ease}
.cab{transition:background .3s ease, border-color .3s ease, box-shadow .3s ease}

.cinta--trans{background:transparent}
.cinta--trans .cinta__loc{color:#fff;text-shadow:0 1px 10px rgba(3,14,36,.7)}
.cinta--trans .cinta__lema{text-shadow:0 1px 10px rgba(3,14,36,.7)}

.cab--trans{
  background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
}
.cab--trans .logo-color{opacity:0}
.cab--trans .logo-blanco{opacity:1}
.cab--trans .nav > a{color:#fff;text-shadow:0 1px 12px rgba(3,14,36,.75)}
.cab--trans .nav > a:hover{border-color:var(--oro)}
.cab--trans .nav__afi{color:#fff;border-color:rgba(255,255,255,.85);text-shadow:none}
.cab--trans .nav__afi:hover{background:#fff;color:var(--navy)}
.cab--trans .hamb{border-color:rgba(255,255,255,.55);background:rgba(7,34,79,.30)}
.cab--trans .hamb span{background:#fff}

/* El panel desplegable del celular siempre va sólido */
.cab--trans .nav.abierto{background:#fff;box-shadow:var(--sombra)}
.cab--trans .nav.abierto > a{color:var(--navy);text-shadow:none}
.cab--trans .nav.abierto .nav__afi{color:var(--navy);border-color:var(--navy)}

/* La cabecera flota sobre el viaje */
.viaje{margin-top:calc(-1 * var(--alto-cab, 0px))}
.viaje__esc{padding-top:var(--alto-cab, 0px)}

/* Dos capas: la postal y el barrio */
.viaje--simple .viaje__capa[data-capa="0"],
.viaje--simple .viaje__capa[data-capa="1"]{display:none}
.viaje--simple .viaje__capa[data-capa="2"]{display:block}

/* ============================================================
   Ajustes de barra, botones y sello de ubicación
   ============================================================ */

/* ── Botones planos: sin sombras ── */
.btn{box-shadow:none}
.btn:hover{transform:translateY(-2px);box-shadow:none}
.btn:active{transform:translateY(0)}
.cab--trans .nav__afi{box-shadow:none;text-shadow:none}

/* ── Logo y navegación sobre la misma línea ── */
.cab__in{align-items:center}
.cab__logo{display:flex;align-items:center}
.cab__logo img{height:38px;width:auto;display:block}
.nav{align-items:center}
.nav > a{display:inline-flex;align-items:center;line-height:1}

/* ── Sello de ubicación, abajo a la derecha ── */
.viaje__lugar{
  position:absolute;z-index:3;right:46px;bottom:24px;margin:0;
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);font-weight:700;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.80);
  text-shadow:0 1px 14px rgba(3,14,36,.85);
}
.viaje__lugar svg{width:14px;height:14px;fill:var(--oro)}
@media (max-width:620px){
  .viaje__lugar{right:14px;bottom:16px;font-size:.62rem;letter-spacing:.1em}
}

/* ── La última estación tiene que entrar entera, siempre ── */
.viaje__esc{min-height:440px}
.viaje__t--fin .hero__cta{flex-wrap:nowrap;gap:12px}
@media (max-width:560px){.viaje__t--fin .hero__cta{flex-wrap:wrap}}

@media (max-height:820px){
  .viaje__frase{font-size:clamp(1.9rem,4.8vw,3.1rem)}
  .viaje__t--fin h1{font-size:clamp(1.9rem,4.6vw,3.1rem)}
  .viaje__bajada{font-size:1rem;line-height:1.5;margin-bottom:1.2em}
}
@media (max-height:700px){
  .viaje__frase{font-size:clamp(1.7rem,4.2vw,2.6rem)}
  .viaje__t--fin h1{font-size:clamp(1.7rem,4vw,2.6rem);margin-bottom:.3em}
  .viaje__bajada{font-size:.95rem;margin-bottom:1em}
  .viaje__t .kick{margin-bottom:.6em}
  .viaje__guia{display:none}
}
@media (max-height:580px){
  .viaje__bajada{display:none}
  .viaje__lugar{display:none}
}