/* ==========================================================================
   pais.css — compartida por chile.html, panama.html y colombia.html.
   Sólo el hero a pantalla completa (única sección propia de estas páginas).
   Usa los tokens y clases de assets/css/base.css (--negro, --blanco, --azul,
   --gutter, --ancho, --ease, --ease-suave, .cabecera, .menu, .pie, .visible).
   No redefine ningún reset global: sólo selectores propios (.pais-hero*).

   Contrato de animación: main.js observa los elementos marcados con
   [data-reveal] y les añade la clase .visible al entrar en pantalla
   (IntersectionObserver, threshold 0.15). Si ese observador no llegara a
   marcarlos, el contenido queda igualmente legible (sólo sin la entrada
   animada) porque el estado oculto vive dentro de la media query de abajo.
   ========================================================================== */

.pais-hero{
  position:relative;
  height:50.4vw;                 /* medido: 871px @1728 (cabecera 91 + hero 871 + pie 392 = 1355) */
  display:flex;
  align-items:flex-end;          /* el bloque de contenido se ancla hacia la mitad baja del hero */
  overflow:hidden;
  background:var(--negro);
  box-sizing:border-box;
  padding-bottom:18.9vw;         /* deja el nombre/cifras sobre la misma línea de base, bajo el centro */
}

.pais-hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

.pais-hero__contenido{
  position:relative;
  z-index:2;
  width:100%;
  box-sizing:border-box;
  padding-inline:var(--gutter);
  display:flex;
  flex-direction:row;
  align-items:flex-end;      /* nombre del país y cifras comparten la misma línea de base */
  justify-content:space-between;
  flex-wrap:wrap;
  row-gap:4vw;
  column-gap:0.6vw;          /* ajustado para que COLOMBIA (el nombre más largo) quepa en una sola fila junto a las cifras */
}

.pais-hero__nombre{
  margin:0;
  font-family:"Montserrat",sans-serif;
  font-weight:700;
  font-size:7.65vw;           /* medido: 132.192px @1728 */
  line-height:0.9;
  letter-spacing:-0.03em;
  color:var(--blanco);
}

.pais-hero__cifras{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:flex-end;   /* las tres cifras comparten línea de base aunque algún rótulo ocupe más ancho */
  gap:0.6vw;
}

.cifra{
  display:flex;
  flex-direction:column;
  gap:0.5vw;
  min-width:9vw;
}

.cifra__rotulo{
  margin:0;
  font-family:"Poppins",sans-serif;
  font-weight:600;
  font-size:2vw;              /* medido: 34.56px @1728 */
  line-height:1.2;
  color:var(--blanco);
}

.cifra__valor{
  margin:0;
  font-family:"Poppins",sans-serif;
  font-weight:600;
  font-size:3vw;              /* medido: 51.84px @1728 */
  line-height:1.15;
  color:var(--blanco);
}

/* ---------- Entradas (medidas: revealIn / fadeIn 1200ms --ease, escalonadas) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.reveal-ready .pais-hero__nombre[data-reveal]{
    clip-path:polygon(0% 0%,0% 0%,0% 100%,0% 100%);
  }
  .pais-hero__nombre[data-reveal].visible{
    animation:pais-revelado 1200ms var(--ease) forwards;
  }
  @keyframes pais-revelado{
    to{ clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%); }
  }

  html.reveal-ready .cifra[data-reveal]{
    opacity:0;
    transform:translateY(2vw);
  }
  .cifra[data-reveal].visible{
    animation:pais-cifra-in 1200ms var(--ease) forwards;
  }
  .cifra[data-reveal]:nth-child(1).visible{ animation-delay:0ms; }
  .cifra[data-reveal]:nth-child(2).visible{ animation-delay:200ms; }
  .cifra[data-reveal]:nth-child(3).visible{ animation-delay:400ms; }
  @keyframes pais-cifra-in{
    to{ opacity:1; transform:translateY(0); }
  }
}

/* ---------- Responsive: único breakpoint del sitio original ---------- */
@media (max-width:500px){
  .pais-hero{
    height:auto;
    min-height:100vh;
    align-items:center;
    padding-bottom:0;
  }
  .pais-hero__contenido{
    padding-inline:24px;
    flex-direction:column;
    align-items:flex-start;
    row-gap:24px;
  }
  .pais-hero__nombre{
    font-size:40px;
  }
  .pais-hero__cifras{
    column-gap:28px;
    row-gap:20px;
  }
  .cifra{
    min-width:0;
    gap:4px;
  }
  .cifra__rotulo{
    font-size:11px;
  }
  .cifra__valor{
    font-size:22px;
  }
}