/* ============================================================
   HANNAH · hoja base
   Tokens tomados del Manual de Identidad v1.0, cap. 13.
   Reglas del sistema aplicadas aquí:
   - Arena es la superficie por defecto.
   - No hay negro. El oscuro es azul (tinta / marino).
   - Terracota < 5%: filete, cejilla, botón primario, módulo encendido.
   - La serif solo en destino y producto. Nunca en argumento, dinero o interfaz.
   - El módulo no va sobre fotografía.
   ============================================================ */

/* ---------- Tipografías (OFL, autoalojadas) ---------- */
@font-face{
  font-family:'Schibsted Grotesk';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/SchibstedGrotesk-400.ttf') format('truetype');
}
@font-face{
  font-family:'Schibsted Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/SchibstedGrotesk-500.ttf') format('truetype');
}
@font-face{
  font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/InstrumentSerif-Regular.ttf') format('truetype');
}
@font-face{
  font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/InstrumentSerif-Italic.ttf') format('truetype');
}

/* ---------- Tokens ---------- */
:root{
  --tinta:#0E2A3A;
  --marino:#17384C;
  --mar:#3A7AA8;
  --arena:#EFE0C0;
  --papel:#F6EBD4;
  --concreto:#B9A88A;
  --terracota:#C4562C;
  --terracota-hover:#A8461F;

  --sans:'Schibsted Grotesk',Arial,Helvetica,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;

  --rule:3px;          /* filete de acento */
  --hairline:1px;
  --mod:8px;           /* módulo */
  --mod-gap:2px;
  --radius:2px;

  --gut:clamp(20px,5.4vw,72px);
  --max:1280px;
  --sec:clamp(56px,9vw,112px);

  --line-soft:rgba(14,42,58,.14);
  --line-soft-inv:rgba(246,235,212,.18);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--arena);
  color:var(--tinta);
  font-family:var(--sans);
  font-weight:400;
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
:focus-visible{outline:2px solid var(--terracota);outline-offset:3px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px}
/* Texto que solo leen los lectores de pantalla */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{left:var(--gut);top:8px;z-index:200;background:var(--papel);color:var(--tinta);padding:8px 14px}

/* ---------- Escala tipográfica (cap. 08) ---------- */
.eyebrow{
  font-size:10px;line-height:1;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;
}
.h1{font-size:clamp(29px,5.6vw,40px);line-height:1.08;letter-spacing:-.025em;font-weight:500}
.h2{font-size:clamp(21px,3.8vw,26px);line-height:1.15;letter-spacing:-.02em;font-weight:500}
.h3{font-size:19px;line-height:1.25;letter-spacing:-.015em;font-weight:500}
.lead{font-size:clamp(18px,2.6vw,22px);line-height:1.45;letter-spacing:-.012em;font-weight:500}
.body-s{font-size:13px;line-height:1.65}
.dato{font-weight:500;font-size:14px;line-height:1.4;font-variant-numeric:tabular-nums}
.legal{font-size:11px;line-height:1.55}
/* Serif: exclusiva de destino y producto */
.display{font-family:var(--serif);font-weight:400;font-size:clamp(36px,8vw,56px);line-height:1.10;letter-spacing:-.01em}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}

.measure{max-width:52ch}
.measure-s{max-width:44ch}

/* ---------- Filete / horizonte ---------- */
.filete{height:var(--rule);background:var(--terracota);border:0}
.hairline{height:var(--hairline);background:var(--line-soft);border:0}

/* ---------- Módulo (solo donde cuenta algo) ---------- */
.mods{display:flex;gap:var(--mod-gap)}
.mods i{width:var(--mod);height:var(--mod);background:var(--concreto);display:block}
.mods i.on{background:var(--terracota)}
.mods--inv i{background:rgba(246,235,212,.28)}
.mods--inv i.on{background:var(--terracota)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:13px;font-weight:500;letter-spacing:.01em;
  padding:11px 20px;border-radius:var(--radius);
  border:1px solid var(--tinta);
  transition:background .18s,color .18s,border-color .18s;
  min-height:44px;
}
.btn:hover{background:var(--tinta);color:var(--arena)}
.btn--acc{background:var(--terracota);border-color:var(--terracota);color:var(--papel)}
.btn--acc:hover{background:var(--terracota-hover);border-color:var(--terracota-hover);color:var(--papel)}
.btn--light{border-color:rgba(246,235,212,.55);color:var(--papel)}
.btn--light:hover{background:var(--papel);color:var(--tinta);border-color:var(--papel)}
.btn--sm{padding:8px 15px;min-height:38px;font-size:12px}

.link-a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;
  border-bottom:1px solid var(--terracota);padding-bottom:3px;
}
.link-a:hover{color:var(--terracota)}

/* ============================================================
   HEADER · barra marino
   ============================================================ */
.site-head{
  position:sticky;top:0;z-index:100;
  background:var(--marino);
  color:var(--papel);
}
.site-head::after{
  content:'';position:absolute;left:0;right:0;bottom:0;
  height:var(--rule);background:var(--terracota);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;height:64px}
.brand{flex:none;display:block;padding:6px 0}
.brand img{height:20px;width:auto}
.nav-links{display:none;align-items:center;gap:clamp(14px,2.1vw,28px)}
.nav-links a{
  font-size:13px;letter-spacing:.005em;padding:6px 0;
  border-bottom:1px solid transparent;transition:border-color .18s;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{border-bottom-color:var(--terracota)}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-right>.btn{display:none}

.lang{display:flex;align-items:center;gap:5px;font-size:11px;letter-spacing:.07em}
.lang button{opacity:.5;padding:6px 2px;transition:opacity .18s}
.lang button:hover{opacity:.8}
.lang button[aria-pressed="true"]{opacity:1;font-weight:500}
.lang .sep{opacity:.35}

.burger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:40px;height:40px;align-items:flex-end}
.burger span{display:block;height:1.5px;width:20px;background:var(--papel);transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* menú móvil */
.nav-drawer{
  display:block;background:var(--marino);color:var(--papel);
  overflow:hidden;max-height:0;transition:max-height .3s ease;
  border-top:1px solid rgba(246,235,212,.12);
}
/* El alto lo mide el JS al abrir: un número fijo se queda corto
   en cuanto el menú crece o cambia de idioma, y cortaba el botón. */
.nav-drawer[data-open="true"]{max-height:var(--drawer-alto,600px)}
.nav-drawer>.wrap{padding-bottom:26px}
.nav-drawer ul{padding:8px 0 4px}
.nav-drawer a{display:block;padding:13px 0;font-size:15px;border-bottom:1px solid rgba(246,235,212,.10)}
.nav-drawer .btn{margin-top:18px;width:100%}

@media(min-width:900px){
  .nav{height:72px}
  .nav-links{display:flex}
  .nav-right>.btn{display:inline-flex}
  .burger{display:none}
  .nav-drawer{display:none}
}

/* ============================================================
   HERO · dos tratamientos sobre la misma base

   .hero--marco  la imagen no se recorta nunca y el contenedor toma su
                 proporción. Se usa en el home, donde el encuadre entero
                 —muro, horizonte y piso— es el argumento.
   .hero--foto   fotografía de destino a sangre, con el texto encima.
                 Es el tratamiento normal del resto del sitio.
   ============================================================ */
.hero{position:relative;background:var(--marino);color:var(--papel)}
.hero__media{display:block}
.hero__img{display:block;width:100%;height:auto}
.hero__in{padding:clamp(26px,6vw,34px) var(--gut) clamp(32px,7vw,42px)}
.hero .eyebrow{opacity:.85;margin-bottom:18px}
/* El claim rompe en la frase y cada frase cabe entera en su línea. */
.claim span{display:block}
.hero h1{max-width:none}
.hero__sub{margin-top:18px;opacity:.92}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hero__cta .btn{flex:1 1 auto;min-width:180px}
@media(min-width:600px){.hero__cta .btn{flex:0 0 auto}}

/* ---------- .hero--marco · el encuadre completo (home) ----------
   Móvil  · la fotografía va como banda y el texto debajo, sobre marino.
            A 390 px no cabe tipografía encima sin comerse el encuadre.
   Ancho  · el texto se sienta en el cielo, a la derecha del muro.
            El desplazamiento está atado a la geometría real de la foto:
            el canto del muro cae en el 19.4% del ancho, siempre. */
@media(min-width:760px){
  .hero--marco{aspect-ratio:1600/780;overflow:hidden}
  .hero--marco .hero__media{position:absolute;inset:0}
  .hero--marco .hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

  /* La barra marino se derrama sobre el cielo, que es donde va el texto.
     El muro y el piso se quedan como están: no se velan. */
  .hero--marco::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(23,56,76,.66) 0%,
      rgba(20,49,66,.40) 14%,
      rgba(14,42,58,.26) 32%,
      rgba(14,42,58,.10) 46%,
      rgba(14,42,58,0)   58%);
  }

  /* El bloque vive dentro de la franja de cielo, centrado en ella. */
  .hero--marco .hero__in{
    position:absolute;top:0;left:0;right:0;height:46%;
    z-index:2;display:flex;flex-direction:column;justify-content:center;
    padding:0 var(--gut) 0 calc(19.4vw + clamp(26px,3.4vw,64px));
  }
}
@media(min-width:760px) and (max-width:1080px){
  .hero--marco h1{font-size:clamp(27px,3.2vw,36px)}
  .hero--marco .hero__sub{font-size:14px}
}

/* ---------- .hero--foto · fotografía a sangre con texto encima ---------- */
.hero--foto{
  display:flex;align-items:center;overflow:hidden;
  min-height:clamp(440px,62svh,560px);
  padding-bottom:clamp(28px,5vh,64px);
}
.hero--foto .hero__media{position:absolute;inset:0}
.hero--foto .hero__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
}
.hero--foto::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(23,56,76,.80) 0%,rgba(23,56,76,.32) 12%,rgba(23,56,76,0) 26%),
    linear-gradient(180deg,rgba(14,42,58,0) 22%,rgba(14,42,58,.60) 52%,rgba(14,42,58,.80) 100%);
}
.hero--foto .hero__in{
  position:relative;z-index:2;width:100%;
  max-width:var(--max);margin-inline:auto;
  padding-block:0;
}
.hero--foto h1{max-width:18ch}
.hero--foto .hero__sub{max-width:44ch}
@media(min-width:760px){
  .hero--foto{aspect-ratio:1600/667;min-height:clamp(440px,52vh,620px);align-items:center}
  .hero--foto::after{
    background:
      linear-gradient(180deg,rgba(23,56,76,.78) 0%,rgba(23,56,76,.30) 13%,rgba(23,56,76,0) 30%),
      linear-gradient(96deg,rgba(14,42,58,.86) 0%,rgba(14,42,58,.68) 32%,rgba(14,42,58,.28) 58%,rgba(14,42,58,0) 82%),
      linear-gradient(180deg,rgba(14,42,58,0) 55%,rgba(14,42,58,.30) 88%,rgba(14,42,58,.44) 100%);
  }
}

/* Franja fija del sistema: una sola línea, no un párrafo. */
.mandato{background:var(--tinta);color:var(--papel);padding-block:13px}
.mandato p{font-size:12px;line-height:1.45;opacity:.8}

/* ============================================================
   SECCIONES
   ============================================================ */
.sec{padding-block:var(--sec)}
.sec--papel{background:var(--papel)}
.sec--marino{background:var(--marino);color:var(--papel)}
.sec--tinta{background:var(--tinta);color:var(--papel)}

.sec-head{display:flex;align-items:center;gap:14px;margin-bottom:clamp(26px,4vw,40px)}
.sec-head .eyebrow{color:var(--terracota);flex:none}
.sec-head .rule{height:1px;background:var(--line-soft);flex:1}
.sec--marino .sec-head .rule,.sec--tinta .sec-head .rule{background:var(--line-soft-inv)}

/* ---------- Nosotros: argumento + textura de arquitectura ---------- */
.split{display:grid;gap:clamp(28px,5vw,60px);align-items:start}
.split__media{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);order:-1}
.split__media img{width:100%;height:100%;object-fit:cover}
.split p+p{margin-top:14px}
.split__copy{margin-top:20px}
.split .link-a{margin-top:24px}
@media(min-width:900px){
  .split{grid-template-columns:1.1fr .9fr}
  .split__media{aspect-ratio:4/5;order:0}
}

/* ---------- Tres puntos de Nosotros ---------- */
.puntos{margin-top:clamp(26px,3.4vw,34px)}
.puntos li{padding:15px 0;border-top:1px solid var(--line-soft)}
.puntos li:last-child{border-bottom:1px solid var(--line-soft)}
.puntos h3{margin-bottom:2px}
.puntos p{font-size:14px;line-height:1.6;opacity:.86;max-width:46ch}

/* ---------- Destinos ---------- */
.grid-cards{display:grid;gap:clamp(14px,2.2vw,22px);grid-template-columns:1fr}
@media(min-width:620px){.grid-cards{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.grid-cards{grid-template-columns:repeat(3,1fr)}}

.card{
  background:var(--arena);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .22s ease;
}
.card:hover{transform:translateY(-3px)}
.card__img{aspect-ratio:4/3;overflow:hidden;background:var(--concreto)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.card:hover .card__img img{transform:scale(1.04)}
.card__body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.card__body .eyebrow{color:var(--mar);margin-bottom:10px}
/* Nombre de propiedad = producto → serif permitida */
.card__name{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.12;letter-spacing:-.01em}
.card__body p{margin-top:9px;flex:1}
.card__more{margin-top:16px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:7px}
.card__more span[aria-hidden]{color:var(--terracota);transition:transform .22s ease}
.card:hover .card__more span[aria-hidden]{transform:translateX(3px)}

/* ---------- Afiliaciones · bloque secundario de Destinos ---------- */
.afi{margin-top:clamp(34px,4.6vw,52px);padding-top:clamp(22px,2.6vw,28px);border-top:1px solid var(--line-soft)}
.afi .eyebrow{color:var(--concreto);margin-bottom:16px}
.afi__in{display:grid;gap:20px;align-items:start}
.afi p{opacity:.86}
.afi__links{display:flex;flex-wrap:wrap;gap:10px}
.afi__links .btn{border-color:var(--line-soft);color:var(--tinta)}
.afi__links .btn:hover{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.afi__links .ext{font-size:11px;opacity:.6}
.afi__links .btn:hover .ext{opacity:.9}
@media(min-width:820px){.afi__in{grid-template-columns:1fr auto;gap:clamp(28px,4vw,56px)}}

/* ---------- Puerta de asesores ---------- */
.puerta__in{display:grid;gap:26px;align-items:center}
.puerta h2{max-width:24ch}
@media(min-width:820px){.puerta__in{grid-template-columns:1fr auto}}

/* ---------- Cierre / contacto ---------- */
.cierre{display:grid;gap:26px;align-items:end}
@media(min-width:820px){.cierre{grid-template-columns:1fr auto}}

/* ---------- Footer ---------- */
.site-foot{background:var(--tinta);color:var(--papel);padding-block:clamp(40px,6vw,56px) 26px}
.foot-top{display:grid;gap:32px;padding-bottom:30px;border-bottom:1px solid var(--line-soft-inv)}
@media(min-width:820px){.foot-top{grid-template-columns:1.5fr 1fr 1fr}}
.foot-top .brand img{height:22px;margin-bottom:16px}
.foot-top>div>p{opacity:.8;max-width:38ch}
.foot-col h2{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:400;opacity:.55;margin-bottom:12px}
.foot-col a{display:block;font-size:13px;padding:5px 0;opacity:.88}
.foot-col a:hover{opacity:1;color:var(--terracota)}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:22px;font-size:11px;opacity:.6}
.foot-razon{display:flex;flex-direction:column;gap:3px}

/* ---------- Utilidades ---------- */
.pendiente{
  display:inline-block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px dashed currentColor;padding:2px 7px;opacity:.6;border-radius:var(--radius);
}
[hidden]{display:none !important}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* ============================================================
   CONVIÉRTETE EN ASESOR
   ============================================================ */

/* ---------- Las cuatro razones ---------- */
.razones{display:grid;gap:0;margin-top:clamp(8px,1.6vw,16px)}
.razones li{padding:clamp(20px,2.6vw,26px) 0;border-top:1px solid var(--line-soft)}
.razones li:last-child{border-bottom:1px solid var(--line-soft)}
.razones h3{margin-bottom:6px}
.razones p{max-width:46ch;opacity:.86}
@media(min-width:860px){
  .razones{grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,72px)}
  /* Con dos columnas, el filete de cierre corre bajo las dos últimas. */
  .razones li:nth-child(2){border-top:1px solid var(--line-soft)}
  .razones li:nth-last-child(2){border-bottom:1px solid var(--line-soft)}
}

/* ---------- Los dos llamados · mismo peso, ninguna es secundaria ---------- */
.llamados{display:grid;gap:2px}
@media(min-width:860px){.llamados{grid-template-columns:1fr 1fr}}
.llamado{
  background:var(--marino);color:var(--papel);
  padding:clamp(28px,4vw,44px);
  display:flex;flex-direction:column;
}
.llamado h3{margin-bottom:12px}
.llamado>p{opacity:.88;max-width:42ch}
/* El bloque de acción se pega abajo: las dos cajas cierran a la misma altura. */
.llamado__accion{margin-top:auto;padding-top:clamp(24px,3vw,32px)}
.llamado .btn{width:100%}
.llamado__pie{font-size:11px;line-height:1.5;opacity:.6;margin-top:12px}
/* Reserva el alto del pie en la columna que no lo lleva, para que los
   dos botones queden a la misma altura. */
.llamado__pie--hueco{visibility:hidden}

/* ---------- Formularios ---------- */
.campo{display:block;margin-bottom:16px}
/* Trampa de spam: fuera de la vista y fuera del recorrido del teclado.
   Una persona nunca la llena; los robots que rellenan todo, sí. */
.trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.campo__lbl{
  display:block;font-size:10px;line-height:1;letter-spacing:.13em;
  text-transform:uppercase;opacity:.7;margin-bottom:8px;
}
.campo input,.campo select{
  width:100%;font:inherit;font-size:15px;color:inherit;
  background:transparent;border:0;border-bottom:1px solid currentColor;
  padding:9px 0;border-radius:0;min-height:42px;
}
.campo input::placeholder{color:currentColor;opacity:.45}
.campo select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 11px) 50%,calc(100% - 6px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:26px;
}
.campo select option{background:var(--papel);color:var(--tinta)}
.campo input:focus,.campo select:focus{outline:none;border-bottom-color:var(--terracota);border-bottom-width:2px}
.campo input:focus-visible,.campo select:focus-visible{outline:none}

/* Sí / No como par de opciones, no como radios sueltos */
.opciones{display:flex;gap:8px}
.opciones label{
  position:relative;flex:1;
  display:flex;align-items:center;justify-content:center;
  min-height:42px;padding:9px 14px;font-size:14px;cursor:pointer;
  border:1px solid currentColor;border-radius:var(--radius);opacity:.5;
  transition:opacity .18s,border-color .18s,box-shadow .18s;
}
.opciones input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.opciones label:hover{opacity:.75}
/* La opción elegida se marca con el acento, no invirtiendo el bloque:
   sobre arena, un relleno de tinta dejaba el texto ilegible. */
.opciones input:checked+span{font-weight:500}
.opciones label:has(input:checked){
  opacity:1;border-color:var(--terracota);
  box-shadow:inset 0 0 0 1px var(--terracota);
}
.opciones input:focus-visible+span{outline:2px solid var(--terracota);outline-offset:6px}

/* Aviso de error, en terracota porque es señal */
.error{font-size:12px;line-height:1.5;margin-top:8px;color:var(--terracota)}
.sec--marino .error,.llamado .error{color:#F0A483}

/* Confirmación tras enviar */
.confirma{border-top:var(--rule) solid var(--terracota);padding-top:clamp(22px,3vw,30px)}
.confirma h2{margin-bottom:10px}
.confirma p{opacity:.86;max-width:46ch}

/* ---------- Página de aplicación ---------- */
.aplicar{display:grid;gap:clamp(30px,5vw,64px);align-items:start}
@media(min-width:900px){.aplicar{grid-template-columns:.85fr 1.15fr}}
.aplicar__form{max-width:560px}
.aplicar__form .campo{margin-bottom:20px}
.aplicar__form .btn{margin-top:10px}
.form__pie{font-size:11px;line-height:1.5;opacity:.6;margin-top:14px}

/* ============================================================
   NOSOTROS
   ============================================================ */

/* Filetes finos invertidos cuando el bloque va sobre marino o tinta */
.sec--marino .razones li,.sec--marino .lista li,.sec--marino .corredores li,
.sec--tinta  .razones li,.sec--tinta  .lista li,.sec--tinta  .corredores li{
  border-color:var(--line-soft-inv);
}

/* ---------- Bloque de texto con textura al lado ---------- */
.bloque{display:grid;gap:clamp(28px,5vw,60px);align-items:start}
.bloque__media{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);order:-1}
.bloque__media img{width:100%;height:100%;object-fit:cover}
.bloque p+p{margin-top:14px}
.bloque__copy{margin-top:20px}
@media(min-width:900px){
  .bloque{grid-template-columns:1.05fr .95fr}
  .bloque__media{aspect-ratio:4/5;order:0}
  .bloque--inv .bloque__media{order:-1}
}

/* ---------- La cifra ---------- */
.cifra{
  font-weight:500;font-size:clamp(84px,15vw,168px);line-height:.84;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;
}
.cifra-lbl{margin-top:18px}
.cifra-rule{width:56px;height:var(--rule);background:var(--terracota);margin:26px 0 0}
.red{display:grid;gap:clamp(28px,5vw,64px);align-items:start}
@media(min-width:900px){.red{grid-template-columns:.8fr 1.2fr}}
.red p+p{margin-top:14px}

/* ---------- Lista simple de una línea por punto ---------- */
.lista{margin-top:clamp(24px,3vw,32px)}
.lista li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  padding:14px 0;border-top:1px solid var(--line-soft);
}
.lista li:last-child{border-bottom:1px solid var(--line-soft)}
.lista .n{font-size:11px;opacity:.5;font-variant-numeric:tabular-nums}
.cierra{margin-top:clamp(22px,3vw,28px);font-weight:500;max-width:46ch}
/* Cuando la frase cierra dos columnas, cruza el ancho completo y se centra:
   no pertenece a ninguna de las dos. */
.cierra--ancho{
  margin-top:clamp(26px,3.4vw,36px);margin-inline:auto;
  max-width:56ch;text-align:center;
}

/* ---------- Territorio ---------- */
.territorio{display:grid;gap:clamp(30px,5vw,64px);align-items:start}
@media(min-width:900px){.territorio{grid-template-columns:1fr 1fr}}
.corredores{margin-top:clamp(22px,3vw,30px)}
.corredores li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
  padding:14px 0;border-top:1px solid var(--line-soft);
}
.corredores li:last-child{border-bottom:1px solid var(--line-soft)}
.corredores .lugar{font-size:19px;line-height:1.25;letter-spacing:-.015em;font-weight:500}
.corredores .zona{font-size:13px;opacity:.7}

/* El mapa pierde la península de Baja por debajo de 300 px: en móvil
   no se encoge, se sustituye por la lista de corredores. */
.mapa{display:none}
@media(min-width:700px){
  .mapa{display:block;max-width:560px}
  .mapa img{width:100%;height:auto;border-radius:var(--radius)}
}
.leyenda{margin-top:20px;display:grid;gap:9px}
.leyenda li{display:flex;align-items:center;gap:10px;font-size:12px;opacity:.85}
.leyenda i{width:var(--mod);height:var(--mod);flex:none;display:block}

/* ---------- Cierre de dos públicos · una salida por columna ---------- */
.dos-publicos{display:grid;gap:clamp(26px,4vw,40px)}
@media(min-width:760px){.dos-publicos{grid-template-columns:1fr 1fr}}
.dos-publicos>div{display:flex;flex-direction:column}
.dos-publicos p{
  font-size:19px;line-height:1.3;letter-spacing:-.015em;font-weight:500;
  padding-top:16px;border-top:var(--rule) solid var(--terracota);
  max-width:26ch;margin-bottom:clamp(22px,3vw,30px);
}
/* Los botones se pegan abajo: quedan a la misma altura aunque una
   de las dos frases ocupe una línea más. */
.dos-publicos .btn{align-self:flex-start;margin-top:auto}

/* ============================================================
   FICHAS DE DESTINO
   Página de producto: imagen amplia, aire, serif en el nombre.
   Sin galería: las fotos son bloques de composición, no carrusel.
   ============================================================ */

/* El nombre de la propiedad va en serif; el resto, en grotesca. */
.hero--foto .display{max-width:16ch}
.hero--foto .hero__claim{
  margin-top:16px;font-size:clamp(17px,2.3vw,21px);line-height:1.4;
  letter-spacing:-.012em;font-weight:500;opacity:.95;max-width:38ch;
}

.ficha{padding-block:clamp(48px,7vw,84px)}
.ficha--ap{padding-top:clamp(52px,8vw,96px)}
.ficha p{max-width:60ch}
.ficha__lead{font-size:clamp(17px,2vw,19px);line-height:1.65}
/* Un párrafo desplazado abre aire sin necesidad de otra imagen. */
@media(min-width:900px){
  .ficha__offset{margin-left:28%}
  .ficha__offset p{max-width:52ch}
}
.ficha p+p{margin-top:16px}

/* Bandas de imagen */
.banda{margin:0}
.banda img{width:100%;height:auto;display:block;border-radius:var(--radius)}
.banda figcaption{font-size:11px;line-height:1.5;opacity:.55;margin-top:10px}
.par{display:grid;gap:clamp(12px,2vw,20px)}
@media(min-width:760px){.par{grid-template-columns:1fr 1fr}}

/* Cierre de la ficha: un llamado, y la verificación abajo y discreta. */
.ficha-cierre{padding-block:clamp(44px,6vw,72px)}
.ficha-cierre__in{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.ficha-cierre h2{max-width:20ch}
.ficha-cierre .btn{margin-top:4px}
.verificar{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;opacity:.6;border-bottom:1px solid currentColor;
  padding-bottom:2px;transition:opacity .18s;
}
.verificar:hover{opacity:.9}
.verificar .ext{font-size:10px}

/* Fichas cortas: menos texto, así que la imagen manda.
   La banda rompe la retícula y va a sangre. */
.hero--alta{min-height:clamp(480px,68svh,620px)}
@media(min-width:760px){.hero--alta{aspect-ratio:1600/600;min-height:clamp(480px,60vh,680px)}}
.banda--sangre{width:100%}
.banda--sangre img{border-radius:0}
.ficha__lead--corta{font-size:clamp(19px,2.5vw,23px);line-height:1.5;font-weight:500;max-width:44ch}

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto{display:grid;gap:clamp(34px,5vw,72px);align-items:start}
@media(min-width:900px){.contacto{grid-template-columns:1.1fr .9fr}}
.contacto__form{max-width:560px}
.contacto__form .campo{margin-bottom:20px}
.contacto__form textarea{
  width:100%;font:inherit;font-size:15px;line-height:1.6;color:inherit;
  background:transparent;border:0;border-bottom:1px solid currentColor;
  padding:9px 0;border-radius:0;resize:vertical;min-height:104px;
}
.contacto__form textarea:focus{outline:none;border-bottom-color:var(--terracota);border-bottom-width:2px}

/* Sugerencia, no bloqueo: pesa menos que un campo y no interrumpe. */
.nota{
  margin:-6px 0 22px;padding:14px 16px;
  background:var(--papel);border-left:var(--rule) solid var(--terracota);
  font-size:13px;line-height:1.6;
}
.nota a{border-bottom:1px solid var(--terracota);padding-bottom:1px;font-weight:500;white-space:nowrap}
.nota a:hover{color:var(--terracota)}

/* Bloque de datos */
.datos{border-top:1px solid var(--line-soft);padding-top:clamp(20px,2.6vw,26px)}
.datos .eyebrow{color:var(--concreto);margin-bottom:18px}
.datos address{font-style:normal;line-height:1.75}
.datos .empresa{font-weight:500}
.datos__mail{margin-top:20px}
.datos__mail a{border-bottom:1px solid var(--line-soft)}
.datos__mail a:hover{border-bottom-color:var(--terracota)}
.datos__corredores{
  margin-top:clamp(24px,3vw,30px);padding-top:16px;
  border-top:1px solid var(--line-soft);
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;opacity:.65;
}
.datos__media{margin-top:clamp(26px,3.4vw,36px);aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius)}
.datos__media img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   DOCUMENTOS LEGALES
   Una columna, medida cómoda, sin fotografía. El titular va en
   sans: la serif es de destino y producto, no de argumento.
   ============================================================ */
.doc{max-width:64ch}
.doc .h1{margin-bottom:10px}
.doc__fecha{font-size:12px;opacity:.6;margin-bottom:clamp(30px,4vw,44px)}
.doc h2{
  font-size:clamp(17px,2.2vw,20px);font-weight:500;letter-spacing:-.015em;
  line-height:1.25;margin:clamp(30px,4vw,44px) 0 12px;
  padding-top:18px;border-top:1px solid var(--line-soft);
}
.doc h2:first-of-type{margin-top:0}
.doc p{font-size:15px;line-height:1.7;margin-bottom:14px}
.doc__item b{font-weight:500}
.doc__fuerte{font-weight:500}
.doc__nota{font-size:13px;line-height:1.65;opacity:.72;padding-left:16px;border-left:1px solid var(--line-soft)}
.doc__lista{margin:0 0 14px;padding-left:18px}
.doc__lista li{font-size:15px;line-height:1.7;margin-bottom:7px;list-style:disc}
.doc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;white-space:nowrap}
.tabla--doc{font-size:13px}
.tabla--doc td,.tabla--doc th{vertical-align:top}

/* Pie: los legales en línea, discretos, sin competir con nada. */
.foot-legales{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.foot-legales button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.foot-legales a:hover,.foot-legales button:hover{color:var(--terracota)}

/* ============================================================
   AVISO DE COOKIES
   Barra al pie, no modal: se puede leer el sitio con ella abierta.
   Superficie marino, texto arena, primario terracota. Sin sombra
   y sin animación, como todo lo demás.
   ============================================================ */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--marino);color:var(--papel);
  border-top:var(--rule) solid var(--terracota);
}
.cookies[hidden]{display:none}
.cookies__in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px clamp(20px,3vw,40px);padding-block:16px;
}
.cookies__txt{font-size:13px;line-height:1.6;max-width:66ch;margin:0}
.cookies__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.cookies__link{font-size:12px;text-decoration:underline;text-underline-offset:3px;opacity:.8}
.cookies__link:hover{opacity:1}
@media(max-width:640px){
  .cookies__in{flex-direction:column;align-items:flex-start}
  .cookies__acciones{width:100%}
}