/* ==========================================================================
   elevacion.css — SANTA ANA GLOBAL · capa de elevación NOVUS
   ------------------------------------------------------------------
   NO reemplaza nada. Se carga en ÚLTIMO lugar, después de la hoja propia
   de cada página, y sólo re-declara lo que eleva. Si se borra este enlace,
   la web vuelve exactamente a la réplica del otro chat.

   Tesis: la réplica es un pase de imágenes con pies de foto. Lennar es un
   documento. Esta capa le da a la réplica la autoridad de lo impreso —
   papel, filetes, escala medida, una cabecera que se comporta y profundidad
   en el movimiento — SIN mover ni un solo elemento de donde está. Los
   layouts son posicionamiento absoluto en vw (réplica de Wix Studio):
   tocar tamaños rompería las coordenadas. Se eleva el material, el peso,
   el ritmo y el movimiento. No la retícula.

   Contrato conservado: [data-reveal] → .visible lo sigue poniendo main.js.
   Todo estado "oculto" sigue viviendo dentro de
   @media (prefers-reduced-motion:no-preference): si el JS no llega,
   el contenido se ve igual. Estado de reposo = estado final.
   ========================================================================== */

/* ==========================================================================
   00 · MATERIAL — el papel, la tinta, el filete
   ========================================================================== */
:root{
  /* El blanco puro es de pantalla. El papel tiene temperatura. */
  --papel:#FAF9F6;
  --papel-hueso:#F2EFE8;
  --blanco:#FAF9F6;               /* se re-declara: todo lo que pedía blanco
                                     de fondo hereda el papel */
  --blanco-puro:#ffffff;

  /* El negro de la réplica (#101212) es plano. Este tiene algo de noche. */
  --negro:#0D0F11;
  --negro-2:#15181A;

  /* El azul de marca se conserva para fondo oscuro. Sobre papel daba
     3,87:1 — insuficiente para texto corrido. Éste da 6,68:1. */
  --azul:#5286B4;
  --azul-tinta:#2B5C87;
  --azul-noche:#8FB6D8;           /* el azul sobre negro, aclarado */

  --tinta-2:rgba(13,15,17,.66);
  --tinta-3:rgba(13,15,17,.42);
  --linea:rgba(13,15,17,.13);
  --linea-fuerte:rgba(13,15,17,.24);
  --linea-clara:rgba(250,249,246,.20);
  --linea-clara-fuerte:rgba(250,249,246,.40);

  /* Curvas. La réplica midió las del original; éstas son las de la casa:
     salida exponencial, asiento largo. Cambiar sólo la variable permite
     volver atrás en una línea. */
  --ease-entrada:cubic-bezier(.16,1,.3,1);
  --ease-materia:cubic-bezier(.22,.61,.36,1);

  --voz-etiqueta:"Poppins",Arial,sans-serif;
}

/* Las hojas antiguas piden var(--font-black) = "Arial Black" del sistema.
   Es el elemento que más delata una plantilla. Se sustituye por la
   tipografía de marca, apretada. */
:root{ --font-black:"Montserrat","Arial Black",sans-serif; }

html{ background:var(--papel); }

body{
  background:var(--papel);
  font-weight:400;                 /* la réplica ponía 600 a TODO el cuerpo */
  color:var(--negro);
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"lnum" 1;
}

::selection{ background:var(--azul-tinta); color:var(--papel); }

/* El grano. Lo que separa una foto impresa de una foto en pantalla.
   3% de opacidad — no se ve, se nota. Sólo sobre los fondos oscuros. */
.hero::after,
.proyectos::after,
.pais::after,
.inversores-hero::after,
.pie::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}
.pie{ position:relative; }

/* ==========================================================================
   01 · LA CABECERA — de barra blanca plana a masthead
   ========================================================================== */
.cabecera{
  background:var(--papel);
  transition:background-color 420ms var(--ease-materia),
             backdrop-filter 420ms var(--ease-materia),
             box-shadow 420ms var(--ease-materia);
}

/* En reposo, sobre el vídeo del hero, la cabecera flota. En cuanto se baja,
   se posa: papel translúcido, saturado, con un filete que la separa. */
body.ha-bajado .cabecera{
  background:rgba(250,249,246,.86);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 -1px 0 var(--linea);
}

/* Las páginas cuyo hero NO empieza en negro llevan el papel desde arriba. */
body:not(.hero-oscuro) .cabecera{ background:var(--papel); }
body:not(.hero-oscuro).ha-bajado .cabecera{ background:rgba(250,249,246,.86); }

.cabecera__marca img{ transition:opacity 300ms var(--ease-materia); }
.cabecera__marca:hover img{ opacity:.62; }

.cabecera__acciones{ gap:1.9vw; }

/* --- La hamburguesa: tres barras iguales → jerarquía y reacción --- */
.hamburguesa span{
  height:1.5px;
  background:var(--negro);
  transition:width 420ms var(--ease-entrada),
             transform 420ms var(--ease-entrada),
             opacity 300ms var(--ease-materia);
  transform-origin:right center;
}
.hamburguesa span:nth-child(2){ width:72%; margin-left:auto; }
.hamburguesa:hover span:nth-child(2){ width:100%; }
.hamburguesa:hover span:nth-child(1){ width:72%; margin-left:auto; }

/* --- ES / EN: de caja negra con borde a conmutador tipográfico --- */
.idiomas{
  border:0;
  border-radius:0;
  overflow:visible;
  align-items:center;
  gap:.7em;
}
.idiomas::before{ content:none; }
.idiomas__op{
  padding:0;
  background:transparent;
  font-family:var(--voz-etiqueta);
  font-weight:500;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--tinta-3);
  position:relative;
  transition:color 300ms var(--ease-materia);
}
.idiomas__op + .idiomas__op::before{
  content:"";
  position:absolute;
  left:-.42em;
  top:.1em;
  bottom:.1em;
  width:1px;
  background:var(--linea-fuerte);
}
.idiomas__op:hover{ color:var(--negro); }
.idiomas__op--activo{
  background:transparent;
  color:var(--negro);
}
.idiomas__op--activo::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-.42em;
  height:1px;
  background:var(--negro);
}

/* ==========================================================================
   02 · EL MENÚ — de lista subrayada a índice editorial
   ========================================================================== */
.menu{
  background:var(--negro);
  transition:transform 620ms var(--ease-entrada);
}
.menu::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}
.menu__lista{ max-width:38vw; counter-reset:nav; }
.menu__lista li{ counter-increment:nav; }
.menu__lista li + li{ margin-top:.55vw; }

.menu__lista a{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:1.4em;
  padding:.75vw 0 .75vw;
  border-bottom:1px solid var(--linea-clara);
  font-family:var(--font-titular);
  font-weight:700;
  font-size:clamp(20px,2.05vw,34px);
  letter-spacing:-.018em;
  text-transform:uppercase;
  color:var(--papel);
  transition:color 340ms var(--ease-materia),
             padding-left 460ms var(--ease-entrada);
}
/* La numeración del índice. Es lo que convierte un menú en un sumario. */
.menu__lista a::before{
  content:counter(nav,decimal-leading-zero);
  font-family:var(--voz-etiqueta);
  font-weight:400;
  font-size:10px;
  letter-spacing:.22em;
  color:var(--azul-noche);
  opacity:.75;
  flex:none;
  transition:opacity 340ms var(--ease-materia);
}
/* El filete que se dibuja bajo el enlace al pasar por encima. */
.menu__lista a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:var(--azul-noche);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 560ms var(--ease-entrada);
}
.menu__lista a:hover{ padding-left:1.1vw; }
.menu__lista a:hover::after{ transform:scaleX(1); }
.menu__lista a:hover::before{ opacity:1; }
.menu__lista a.is-activo{ color:var(--azul-noche); }

.menu__cerrar svg{ stroke-width:1.4; }

/* Entrada escalonada de los renglones del menú */
@media (prefers-reduced-motion:no-preference){
  .menu__lista li{
    opacity:0;
    transform:translateY(14px);
    transition:opacity 520ms var(--ease-entrada),
               transform 520ms var(--ease-entrada);
  }
  .menu--abierto .menu__lista li{ opacity:1; transform:none; }
  .menu--abierto .menu__lista li:nth-child(1){ transition-delay:110ms }
  .menu--abierto .menu__lista li:nth-child(2){ transition-delay:165ms }
  .menu--abierto .menu__lista li:nth-child(3){ transition-delay:220ms }
  .menu--abierto .menu__lista li:nth-child(4){ transition-delay:275ms }
  .menu--abierto .menu__lista li:nth-child(5){ transition-delay:330ms }
  .menu--abierto .menu__lista li:nth-child(6){ transition-delay:385ms }
}

/* ==========================================================================
   03 · DISCIPLINA DE PESO — el cambio que más quita de "plantilla"
   Todo el cuerpo estaba a 600. El texto corrido baja a 400; el 600 se
   reserva para etiquetas; el 700 sólo para display.
   ========================================================================== */
.hacemos__parrafo,
.proyectos__texto,
.cifras__pie,
.cifras__subtitulo,
.pie__contacto,
.pie__enlaces a,
.inversores-hero__bajada,
.documentos__lista a,
.legal p, .legal li{
  font-weight:400;
  letter-spacing:.002em;
}

.hacemos__parrafo,
.inversores-hero__bajada{ line-height:1.58; }
.proyectos__texto,
.cifras__pie{ line-height:1.62; }

/* Las etiquetas: versalitas de verdad, no texto pequeño en negrita. */
.hacemos__eyebrow,
.cifras__antetitulo,
.pie__titulo{
  font-family:var(--voz-etiqueta);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.15em;
}
.hacemos__eyebrow{ font-size:clamp(10px,.78vw,13px); color:var(--tinta-2); }
.cifras__antetitulo{ font-size:clamp(9.5px,.72vw,12px); color:var(--tinta-2); }

/* El display: apretado, con cifras alineadas. */
.hacemos__titulo,
.pais__rotulo,
.cifras__valor,
.inversores-hero__titulo,
.micro__titulo,.microciudades__titulo{
  letter-spacing:-.035em;
  font-feature-settings:"lnum" 1,"tnum" 0,"kern" 1;
}

/* ==========================================================================
   04 · EL PIE — de bloque negro a colofón
   ========================================================================== */
.pie{ background:var(--negro); }

/* El filete doble de 3px es de plantilla. Uno solo, con un tramo
   acentuado a la izquierda: eso es un filete de imprenta. */
.pie__filete{
  position:relative;
  border:0;
  height:1px;
  background:var(--linea-clara);
  margin-bottom:3.6vw;
}
.pie__filete::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:7.2vw; height:1px;
  background:var(--papel);
}

.pie__titulo{
  font-size:clamp(10px,.78vw,13px);
  color:rgba(250,249,246,.52);
  margin-bottom:1.7vw;
}

.pie__enlaces a,
.pie__menu a{
  font-family:var(--voz-etiqueta);
  font-size:clamp(13px,.95vw,16px);
  letter-spacing:.01em;
  color:var(--papel);
  transition:color 280ms var(--ease-materia);
}
.pie__enlaces a{
  text-decoration:none;
  position:relative;
  display:inline-block;
  padding-bottom:.12em;
}
.pie__enlaces a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:currentColor;
  opacity:.34;
  transform-origin:left center;
  transition:opacity 280ms var(--ease-materia),
             transform 460ms var(--ease-entrada);
}
.pie__enlaces a:hover{ color:var(--azul-noche); }
.pie__enlaces a:hover::after{ opacity:1; }
.pie__enlaces li + li{ margin-top:.55vw; }

.pie__menu a{
  font-weight:500;
  letter-spacing:.085em;
  font-size:clamp(11px,.8vw,13.5px);
}
.pie__menu li + li{ margin-top:.52vw; }
.pie__menu a:hover{ color:var(--azul-noche); }
.pie__menu a.is-activo{ color:var(--azul-noche); }

.pie__contacto{
  font-size:clamp(12px,.85vw,15px);
  color:rgba(250,249,246,.78);
}
.pie__contacto a:hover{ color:var(--azul-noche); }

/* La línea legal estaba colocada con left:6.4vw / 17.5vw / 31.8vw —
   tres posiciones absolutas a mano. Se sustituye por una fila que
   no se puede descuadrar. */
.pie__legal{
  position:static;
  height:auto;
  min-height:0;
  margin-top:3.4vw;
  padding-top:1.5vw;
  border-top:1px solid var(--linea-clara);
  display:flex;
  flex-wrap:wrap;
  gap:.9em 2.6em;
}
.pie__legal a{
  position:static;
  left:auto !important;
  font-family:var(--voz-etiqueta);
  font-weight:400;
  font-size:clamp(10px,.66vw,12px);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:rgba(250,249,246,.50);
  transition:color 280ms var(--ease-materia);
}
.pie__legal a:hover{ color:var(--papel); }

/* ==========================================================================
   05 · EL BOTÓN DE FLECHA — que responda como una pieza, no como un icono
   ========================================================================== */
.flecha{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(250,249,246,.42);
  background:transparent;
  transition:border-color 420ms var(--ease-materia);
}
.flecha::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--papel);
  transform:translateY(101%);
  transition:transform 520ms var(--ease-entrada);
}
.flecha svg{
  position:relative;
  z-index:1;
  stroke-width:1.3;
  transition:stroke 420ms var(--ease-materia),
             transform 520ms var(--ease-entrada);
}
.flecha:hover{ border-color:var(--papel); }
.flecha:hover::before{ transform:translateY(0); }
.flecha:hover svg{ stroke:var(--negro); transform:translateX(12%); }

/* Sobre papel la flecha se invierte */
.hacemos .flecha,
.cifras .flecha{
  border-color:var(--linea-fuerte);
  background:var(--negro);
}
.hacemos .flecha::before,
.cifras .flecha::before{ background:var(--azul-tinta); }
.hacemos .flecha:hover,
.cifras .flecha:hover{ border-color:var(--azul-tinta); }

/* ==========================================================================
   06 · PORTADA — el hero respira, los proyectos tienen profundidad
   ========================================================================== */
.hero{ position:relative; }

/* El plano que nunca está quieto del todo. 24 s, 4% — no se percibe como
   animación; se percibe como que la imagen está viva. */
@media (prefers-reduced-motion:no-preference){
  .hero__video,
  .proyectos__video,
  .inversores-hero__video{
    animation:sa-respira 26s var(--ease-materia) infinite alternate;
    transform-origin:50% 42%;
  }
  @keyframes sa-respira{
    from{ transform:scale(1.005) }
    to  { transform:scale(1.055) }
  }
}

/* El hero de portada: las tres líneas entran como un pie de página de
   revista — desde abajo, escalonadas, con un filete que las ancla. */
.hero__linea{ font-weight:400; letter-spacing:.004em; }
.hero__linea--3{ font-weight:600; }


/* Un velo bajo, sólo lo justo para que el texto blanco no dependa de la
   suerte del fotograma. */
.hero__texto::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(13,15,17,.62) 0%,
      rgba(13,15,17,.46) 26%,
      rgba(13,15,17,.16) 52%,
      rgba(13,15,17,0)   72%),
    linear-gradient(180deg,
      rgba(13,15,17,0) 0%,
      rgba(13,15,17,0) 34%,
      rgba(13,15,17,.30) 78%,
      rgba(13,15,17,.46) 100%);
}

/* ¿Qué hacemos? — el bloque de papel */
.hacemos{ background:var(--papel); }
.hacemos__titulo{ font-weight:700; }

/* Proyectos a gran escala */
.proyectos{ background:var(--negro); position:relative; }
.proyectos__titulo{ font-weight:600; letter-spacing:-.022em; }

/* ==========================================================================
   07 · LOS PAÍSES — la profundidad que ya estaba construida y no se veía
   Las capas fondo/frente existen en el DOM. elevacion.js les da recorridos
   distintos: eso es paralaje real, no un fundido.
   ========================================================================== */
.pais{ position:relative; background:var(--negro); }

.pais__rotulo{
  font-weight:700;
  text-shadow:0 2px 34px rgba(13,15,17,.42);
}

/* Una pauta de posición: el nombre del país lleva su latitud debajo.
   El dato lo pone elevacion.js desde data-pauta. */
.pais__rotulo::after{
  content:attr(data-pauta);
  display:block;
  margin-top:.42em;
  padding-top:.52em;
  border-top:1px solid rgba(250,249,246,.45);
  font-family:var(--voz-etiqueta);
  font-weight:400;
  font-size:clamp(9px,.62vw,11.5px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(250,249,246,.92);
  text-shadow:0 1px 16px rgba(13,15,17,.9);
}

@media (prefers-reduced-motion:no-preference){
  .pais__fondo,
  .pais__frente{ will-change:transform }
}

/* ==========================================================================
   08 · DATOS Y CIFRAS — de tarjetas que se pintan de azul a un cuadro
   ========================================================================== */
.cifras{ background:var(--papel); }

.cifras__titulo{
  font-family:var(--font-titular);
  font-weight:700;
  letter-spacing:-.03em;
}

.cifras__filete{
  border:0;
  height:2px;
  background:var(--negro);
}

.cifras__card{
  position:relative;
  background:transparent;
  padding-top:1.15vw;
  border-top:2px solid var(--negro);
  transition:background-color 520ms var(--ease-materia);
}
.cifras__card:hover{
  background-color:rgba(43,92,135,.045);
}
/* El filete que se dibuja al pasar por encima: el gesto, no el relleno. */
.cifras__card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-2px;
  height:2px;
  background:var(--azul-tinta);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 680ms var(--ease-entrada);
}
.cifras__card:hover::before{ transform:scaleX(1) }
.cifras__card:hover .cifras__valor{ color:var(--azul-tinta) }

.cifras__valor{
  font-weight:700;
  transition:color 420ms var(--ease-materia);
}
.cifras__pie{ color:var(--tinta-2) }

/* ==========================================================================
   09 · INVERSORES — mientras siga existiendo esta página en el sitio
   corporativo. La plataforma IR vive aparte.
   ========================================================================== */
.inversores-hero__titulo{ font-weight:700 }
.inversores-hero__bajada{ max-width:42ch }

/* El velo de la réplica dejaba la cuarta columna casi ilegible sobre las
   zonas claras del vídeo. Se densifica sólo la mitad inferior. */
.inversores-hero__velo{
  background:linear-gradient(180deg,
    rgba(13,15,17,.42) 0%,
    rgba(13,15,17,.52) 20%,
    rgba(13,15,17,.68) 40%,
    rgba(13,15,17,.84) 58%,
    rgba(13,15,17,.93) 76%,
    rgba(13,15,17,.96) 100%);
}

.documentos__titulo{
  font-family:var(--voz-etiqueta);
  font-weight:600;
  font-size:clamp(10px,.78vw,13px);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(250,249,246,.56);
  padding-bottom:.9vw;
  border-bottom:1px solid var(--linea-clara);
  margin-bottom:1.3vw;
}

.documentos__lista{ gap:0 }
.documentos__lista li{ border-bottom:1px solid rgba(250,249,246,.10) }
.documentos__lista a{
  padding:.72vw 0;
  text-decoration:none;
  align-items:center;
  gap:.8em;
  letter-spacing:.004em;
  transition:color 280ms var(--ease-materia),
             padding-left 460ms var(--ease-entrada);
}
.documentos__lista a:hover{
  color:var(--azul-noche);
  padding-left:.5em;
}
.documentos__icono{ opacity:.5; transition:opacity 280ms var(--ease-materia) }
.documentos__lista a:hover .documentos__icono{ opacity:1 }

/* ==========================================================================
   10 · LEGALES — que se puedan leer
   ========================================================================== */
.legal,
.legal__cuerpo{ background:var(--papel) }
.legal p,.legal li{
  max-width:72ch;
  line-height:1.68;
  color:var(--tinta-2);
}
.legal h1,.legal h2,.legal h3{ letter-spacing:-.02em }

/* ==========================================================================
   11 · ENLACES, FOCO Y ESTADOS
   ========================================================================== */
a{ transition:color 280ms var(--ease-materia) }

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--azul-tinta);
  outline-offset:3px;
  border-radius:1px;
}
.pie :where(a,button):focus-visible,
.menu :where(a,button):focus-visible,
.inversores-hero :where(a,button):focus-visible,
.documentos :where(a,button):focus-visible{
  outline-color:var(--azul-noche);
}

/* ==========================================================================
   12 · LA CURVA DE ENTRADA — se sustituye la variable, no las duraciones
   La réplica midió 1200 ms del original. Se conservan. Sólo cambia el
   asiento: de una curva simétrica a una salida exponencial.
   ========================================================================== */
:root{
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-suave:cubic-bezier(.33,1,.68,1);
}

/* ==========================================================================
   13 · MÓVIL — el sitio original sólo tenía un corte, a 500px.
   Se añade un corte intermedio para tabletas, que hasta ahora recibían
   la maqueta de escritorio comprimida.
   ========================================================================== */
@media (max-width:900px){
  .menu__lista{ max-width:100% }
  .pie__cuerpo{ grid-template-columns:1fr 1fr; gap:3vw 2vw }
  .pie__logo{ grid-column:1 / -1; margin-bottom:1.5vw }
  .pie__filete::before{ width:70px }
}
@media (max-width:500px){
  .pie__cuerpo{ grid-template-columns:1fr; gap:32px }
  .pie__logo{ margin-bottom:8px }
  .pie__titulo{ font-size:11px; letter-spacing:.16em; margin-bottom:14px }
  .pie__enlaces li + li,
  .pie__menu li + li{ margin-top:8px }
  .pie__legal{ margin-top:32px; padding-top:20px; gap:10px 22px }
  .pie__filete{ margin-bottom:32px }
  .menu__lista a{ font-size:19px; padding:11px 0; gap:1em }
  .idiomas__op{ font-size:10.5px }
  .cifras__card{ padding-top:18px }
}

/* ==========================================================================
   14 · SALVAGUARDA — si alguien no quiere movimiento, no hay movimiento,
   y el estado de reposo sigue siendo el estado final.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .hero__video,.proyectos__video,.inversores-hero__video{ animation:none }
  .hero__linea{ opacity:1; transform:none; animation:none }
  .menu__lista li{ opacity:1; transform:none }
  .pais__fondo,.pais__frente{ transform:none !important }
}

/* ==========================================================================
   15 · EL RITMO DE LA ENTRADA DE CIFRAS
   La réplica copió del original un escalonado de 0 / 600 / 1000 / 1600 /
   2000 ms sobre una animación de 1200 ms: el bloque de datos tarda 3,2 s
   en estar completo. Medido, no estimado. A esa velocidad el lector llega
   antes que la cifra, y lo que ve es una página a medio cargar.
   Se conserva el gesto y se acorta el compás: 0 / 130 / 260 / 390 ms sobre
   900 ms — el bloque entero queda puesto en 1,29 s.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .cifras__grid[data-reveal].visible .cifras__card{
    animation-duration:900ms;
    animation-timing-function:var(--ease-entrada);
  }
  .cifras__grid[data-reveal].visible .cifras__card:nth-child(2){ animation-delay:0ms }
  .cifras__grid[data-reveal].visible .cifras__card:nth-child(3){ animation-delay:130ms }
  .cifras__grid[data-reveal].visible .cifras__card:nth-child(4){ animation-delay:260ms }
  .cifras__grid[data-reveal].visible .cifras__card:nth-child(5){ animation-delay:390ms }
}

/* ==========================================================================
   16 · LAS FICHAS DE PAÍS — de tres bloques que chocan a una fila de datos
   Defecto real, no de gusto: a 1440 px los rótulos de UNIDADES / ÁREA
   CONSTRUIDA / FECHA DE INICIO se solapan entre sí y montan sobre el
   nombre del país. La causa es la escala: el rótulo está a 2vw (28,8 px
   a 1440) con un hueco de 0,6vw (8,6 px). Está medido del original, que
   se diseñó a 1728.
   Se corrige y se eleva a la vez: el rótulo pasa a versalita —que es lo
   que es—, el valor conserva el cuerpo grande y pasa a la tipografía de
   display, y cada cifra se separa con un filete. La misma gramática que
   las tarjetas de DATOS & CIFRAS de la portada: el sitio empieza a
   parecer uno solo.
   ========================================================================== */
.pais-hero__contenido{
  column-gap:clamp(2rem,4.5vw,5.5rem);
  row-gap:2.4vw;
}

.pais-hero__nombre{ letter-spacing:-.035em }

.pais-hero__cifras{
  gap:0;
  align-items:stretch;
}

.cifra{
  min-width:0;
  gap:.35vw;
  padding:.9vw 0 0 clamp(1rem,2.1vw,2.6rem);
  margin-left:clamp(1rem,2.1vw,2.6rem);
  border-left:1px solid rgba(250,249,246,.30);
  border-top:1px solid rgba(250,249,246,.55);
  justify-content:flex-end;
}
.cifra:first-child{
  margin-left:0;
  padding-left:0;
  border-left:0;
}

.cifra__rotulo{
  font-family:var(--voz-etiqueta);
  font-weight:500;
  font-size:clamp(9.5px,.72vw,12.5px);
  line-height:1.25;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:rgba(250,249,246,.66);
  white-space:nowrap;
}

.cifra__valor{
  font-family:var(--font-titular);
  font-weight:700;
  font-size:clamp(24px,2.5vw,46px);
  line-height:1;
  letter-spacing:-.03em;
  white-space:nowrap;
  margin-top:.28em;
}

@media (max-width:900px){
  .pais-hero__contenido{ flex-direction:column; align-items:flex-start }
  .pais-hero__cifras{ width:100% }
  .cifra{ flex:1 1 0 }
}
@media (max-width:500px){
  .cifra{
    flex:1 1 100%;
    margin-left:0;
    padding-left:0;
    border-left:0;
    padding-top:12px;
  }
  .cifra__valor{ font-size:30px }
}

/* Un velo bajo el bloque de datos del hero de país: las fotos de Cartagena
   y Panamá son agua y cielo claros, y el filete de 1px se perdía. */
.pais-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(13,15,17,.34) 0%,
    rgba(13,15,17,.10) 26%,
    rgba(13,15,17,.12) 44%,
    rgba(13,15,17,.52) 74%,
    rgba(13,15,17,.30) 100%);
}
.pais-hero__contenido{ z-index:3 }


/* 17 · Correcciones de interacción y lectura, revisión 14 septiembre 2026.
   Conservan retícula, fotografías y capas de país existentes. */
.pais__flecha,
.hacemos__flecha{ position:absolute; }
.video-en-reposo{ animation-play-state:paused; }
.inversores-hero{ height:auto; min-height:51.9vw; }
.menu{
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-block:64px;
  justify-content:flex-start;
  transition:transform 520ms var(--ease-entrada), visibility 0s linear 520ms;
}
.menu.menu--abierto{ transition-delay:0s; }
.menu__lista{ flex-shrink:0; margin-block:auto; }
.hamburguesa{
  width:44px; height:44px; min-width:44px; min-height:44px;
  justify-content:center; gap:6px; padding:9px;
}
.menu__cerrar{
  width:44px; height:44px; min-width:44px; min-height:44px;
  padding:8px;
}
.menu__lista a:focus-visible::after{ transform:scaleX(1); }
@media (max-width:500px){
  :root{ --header-alto:70px; }
  .hacemos__flecha{ position:relative; left:auto; top:auto; }
  .proyectos__titulo,
  .proyectos__texto{ position:relative; left:auto; top:auto; z-index:1; }
  .microciudades__panel{
    right:auto; top:auto; width:auto; margin-inline:24px;
  }
  .microciudades__titulo span{ font-size:clamp(40px,14vw,56px); }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
}

/* 18 · Lectura en tablet (501–900 px).
   Las posiciones absolutas en vw no ofrecen espacio para texto legible.
   Se conserva el orden y se usa flujo donde el contenido necesita crecer. */
@media (min-width:501px) and (max-width:900px){
  :root{ --header-alto:70px; }
  .hero{ min-height:360px; }
  .hero__texto{
    display:flex; flex-direction:column; justify-content:center;
    align-items:flex-start; gap:6px; padding-inline:7.234vw;
  }
  .hero__linea{ position:relative; left:auto; top:auto; white-space:normal; }
  .hero__linea--1{ font-size:clamp(18px,2.544vw,23px); }
  .hero__linea--2{ font-size:clamp(16px,1.866vw,18px); margin-left:4.861vw; }
  .hero__linea--3{ font-size:clamp(22px,2.986vw,28px); margin-left:9.722vw; }
  .hacemos{
    height:auto; padding:40px var(--gutter);
    display:grid; grid-template-columns:minmax(0,1fr) 44px;
    gap:20px 24px;
  }
  .hacemos__eyebrow,
  .hacemos__titulo{ position:static; grid-column:1 / -1; }
  .hacemos__eyebrow{ font-size:12px; }
  .hacemos__titulo{
    width:auto; font-size:clamp(36px,6vw,54px); line-height:.95;
  }
  .hacemos__parrafo{
    position:static; width:100%; max-width:46ch;
    margin-left:auto; font-size:16px; line-height:1.6;
  }
  .hacemos__flecha{
    position:relative; left:auto; top:auto;
    width:44px; height:44px; align-self:center; justify-self:end;
  }
  .proyectos{
    height:auto; min-height:clamp(320px,42vw,390px);
    padding:40px 7.06vw;
  }
  .proyectos__titulo,
  .proyectos__texto{ position:relative; left:auto; top:auto; z-index:1; }
  .proyectos__titulo{ width:auto; font-size:32px; }
  .proyectos__texto{ margin-top:20px; max-width:45ch; font-size:16px; line-height:1.6; }
  .cifras{ height:auto; padding-block:40px; }
  .cifras__grid{
    height:auto; grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto; gap:32px 24px;
  }
  .cifras__col1{ grid-row:auto; grid-column:1 / -1; padding-top:0; }
  .cifras__titulo{ font-size:36px; }
  .cifras__subtitulo{ max-width:46ch; margin-top:16px; font-size:16px; line-height:1.6; }
  .cifras__filete{ margin-top:24px; }
  .cifras__card{ min-height:190px; padding-top:18px; }
  .cifras__antetitulo{ font-size:12px; line-height:1.4; }
  .cifras__valor{ margin-block:12px 24px; }
  .cifras__valor--md{ font-size:clamp(44px,7.65vw,68px); }
  .cifras__valor--sm{ font-size:clamp(28px,5.75vw,50px); }
  .cifras__valor--lg{ font-size:clamp(40px,6vw,54px); }
  .cifras__pie{ padding-top:12px; font-size:15px; line-height:1.5; }
  .pais-hero{ height:auto; min-height:420px; padding-block:64px; align-items:center; }
  .pais-hero__contenido{ row-gap:32px; }
  .pais-hero__nombre{ font-size:clamp(44px,7.65vw,68px); }
  .pais-hero__cifras{ display:grid; grid-template-columns:1fr 1.6fr 1fr; gap:16px; }
  .cifra{ margin-left:0; padding:12px 0 0; border-left:0; }
  .cifra__rotulo{ font-size:12px; letter-spacing:.1em; white-space:normal; }
  .cifra__valor{ font-size:clamp(24px,3.6vw,32px); }
  .inversores-hero__contenido{ padding:48px var(--gutter); gap:24px; }
  .inversores-hero__titulo{ font-size:clamp(36px,6vw,54px); }
  .inversores-hero__bajada{ max-width:58ch; font-size:16px; line-height:1.6; }
  .documentos{ margin-top:8px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 24px; }
  .documentos__titulo{ font-size:12px; line-height:1.4; padding-bottom:12px; margin-bottom:8px; }
  .documentos__lista a{ font-size:16px; line-height:1.45; padding-block:10px; gap:8px; }
  .documentos__icono{ width:16px; height:16px; }
  .microciudades__seccion{ min-height:0; overflow:visible; }
  .microciudades__pin{ position:relative; height:auto; min-height:0; }
  .microciudades__franja{ height:56px; }
  .microciudades__panel{
    position:relative; top:auto; right:auto; transform:none;
    width:auto; margin-inline:var(--gutter); padding:96px 0 56px;
  }
  .microciudades__titulo{ text-align:left; margin-bottom:24px; }
  .microciudades__titulo span{ font-size:clamp(56px,9vw,80px); }
  .microciudades__titulo-micro{ margin-right:0; }
  .microciudades__parrafo{
    width:100%; max-width:58ch; margin-left:0; font-size:16px;
    line-height:1.6; text-align:left;
  }
  .microciudades__parrafo + .microciudades__parrafo{ margin-top:16px; }
  .microciudades__ods{ position:relative; inset:auto; padding-inline:var(--gutter); }
  .microciudades__ods-rotulo{ position:static; font-size:32px; margin:32px 0; }
  .microciudades__ods-lista{
    position:relative; inset:auto; height:auto; display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 20px; padding-bottom:64px;
  }
  .microciudades__ods-item{ position:static; width:100%; min-width:0; transform:none; }
  .microciudades__ods-num{ font-size:44px; }
  .microciudades__ods-picto{ width:48px; height:48px; margin:8px auto; }
  .microciudades__ods-nombre{ font-size:13px; }
  .legal{ padding-block:48px 64px; }
  .legal__cuerpo{ width:100%; max-width:72ch; }
  .legal__titulo{ font-size:clamp(34px,5vw,45px); line-height:1.05; margin-bottom:28px; }
  .legal__cuerpo h2{ font-size:18px; margin:32px 0 12px; }
  .legal__cuerpo h3{ font-size:16px; margin:24px 0 10px; }
  .legal__cuerpo p,
  .legal__lista li{ font-size:16px; line-height:1.68; }
  .legal__cuerpo p{ margin-bottom:16px; }
  .legal__lista{ margin-bottom:20px; }
  .legal__lista li{ margin-bottom:8px; }
  .legal__cookie{ margin-bottom:24px; padding-left:16px; }
  .legal__cookie p{ margin-bottom:6px; }
  .pie{ padding-block:40px 24px; }
  .pie__cuerpo{ gap:28px 24px; }
  .pie__titulo{ font-size:12px; margin-bottom:16px; }
  .pie__enlaces a,
  .pie__menu a{ font-size:14px; line-height:1.5; }
  .pie__enlaces li + li,
  .pie__menu li + li{ margin-top:8px; }
  .pie__contacto{ font-size:15px; line-height:1.6; }
  .pie__legal{ margin-top:32px; padding-top:20px; }
  .pie__legal a{ font-size:12px; line-height:1.5; }
}
@media (min-width:501px) and (max-width:900px) and (prefers-reduced-motion:no-preference){
  html.reveal-ready .microciudades__ods-item{ transform:translateY(20px); }
  .microciudades__ods-lista[data-reveal].visible .microciudades__ods-item{ transform:translateY(0); }
}