/* ==========================================================================
   home.css — propio de index.html.
   Usa los tokens y clases de assets/css/base.css (--negro, --blanco, --azul,
   --gutter, --ancho, --ease, --ease-suave, --font-*, .flecha, .visible).
   No redefine ningún reset global: sólo los 7 bloques de contenido propios
   de la home (héroe, ¿qué hacemos?, proyectos, países, datos y cifras).

   Contrato de animación: igual que en pais.css / inversores.css — main.js
   añade ".visible" a los elementos [data-reveal] al entrar en pantalla
   (IntersectionObserver). El estado oculto vive dentro de
   @media (prefers-reduced-motion:no-preference).

   Excepción: en .pais__frente el reveal usa "transition" (no "animation")
   para poder convivir con el parallax nativo por scroll
   (animation-timeline:view()), que sí usa "animation" sobre esa misma capa.
   ========================================================================== */

/* ==========================================================================
   1) HERO
   ========================================================================== */
.hero{
  position:relative;
  height:54.2vw;
  overflow:hidden;
  background:var(--negro);
}
.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero__texto{ position:absolute; inset:0; }
.hero__linea{
  position:absolute;
  margin:0;
  white-space:nowrap;
  font-family:var(--font-base);
  font-weight:600;
  color:var(--blanco);
}
.hero__linea--1{ left:7.234vw; top:25vw; font-size:2.544vw; }
.hero__linea--2{ left:12.095vw; top:27.894vw; font-size:1.866vw; }
.hero__linea--3{ left:16.956vw; top:29.282vw; font-size:2.986vw; }

/* ==========================================================================
   2) ¿QUE HACEMOS?
   ========================================================================== */
.hacemos{
  position:relative;
  height:28.2vw;
  overflow:hidden;
  background:var(--blanco);
}
.hacemos__eyebrow{
  position:absolute;
  left:4.977vw;
  top:0.579vw;
  margin:0;
  font-family:var(--font-base);
  font-weight:600;
  font-size:1.406vw;
  color:var(--negro);
}
.hacemos__titulo{
  position:absolute;
  left:4.977vw;
  top:1.968vw;
  width:75vw;
  margin:0;
  font-family:var(--font-titular);
  font-weight:700;
  font-size:6vw;
  line-height:0.9;
  letter-spacing:-0.03em;
  color:var(--negro);
}
.hacemos__parrafo{
  position:absolute;
  left:53.472vw;
  top:16.204vw;
  width:28.7vw;
  margin:0;
  font-family:var(--font-base);
  font-weight:600;
  font-size:1.406vw;
  line-height:1.1;
  text-align:right;
  color:var(--negro);
}
.hacemos__flecha{ position:absolute; left:84vw; top:18vw; }

/* ==========================================================================
   3) PROYECTOS A GRAN ESCALA — sin animación de entrada (medido: n_comps
   sin "anims" en el CSS real de Wix para esta sección).
   ========================================================================== */
.proyectos{
  position:relative;
  height:28.7vw;
  overflow:hidden;
  background:var(--negro);
}
.proyectos__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.proyectos__titulo{
  position:absolute;
  left:7.06vw;
  top:4.398vw;
  width:22.9vw;
  margin:0;
  font-family:var(--font-base);
  font-weight:600;
  font-size:2.972vw;
  line-height:1.0;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--blanco);
}
.proyectos__texto{
  position:absolute;
  left:7.06vw;
  top:12.326vw;
  margin:0;
  font-family:var(--font-base);
  font-weight:600;
  font-size:0.9vw;
  line-height:1.2;
  color:var(--blanco);
}

/* ==========================================================================
   4-6) CHILE · PANAMÁ · COLOMBIA
   Dos capas de la misma foto (fondo + PNG recortado de frente) con el
   rótulo del país en medio. Orden de apilado: fondo(z1) < rótulo(z2) <
   frente(z3) < botón(z4) — el rótulo queda detrás de los edificios.
   ========================================================================== */
.pais{
  position:relative;
  overflow:hidden;
  background:var(--negro);
}
.pais--chile,
.pais--panama{ height:37.5vw; }
.pais--colombia{ height:36.458vw; }

.pais__fondo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}
.pais__rotulo{
  position:absolute;
  z-index:2;
  margin:0;
  font-family:var(--font-titular);
  font-weight:700;
  font-size:6.95vw;
  line-height:0.9;
  letter-spacing:-0.03em;
  color:var(--blanco);
}
.pais__frente{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:3;
}
.pais__flecha{ position:absolute; z-index:4; }

.pais--chile .pais__rotulo{ left:8.102vw; top:6.366vw; }
.pais--chile .pais__flecha{ left:31vw; top:7.85vw; }

.pais--panama .pais__rotulo{ right:11.39vw; top:7.15vw; text-align:right; }
.pais--panama .pais__flecha{ right:6.9vw; top:8.6vw; }

.pais--colombia .pais__rotulo{ left:2.431vw; top:14.294vw; }
.pais--colombia .pais__flecha{ left:38vw; top:15.8vw; }

/* ==========================================================================
   7) DATOS & CIFRAS
   ========================================================================== */
.cifras{
  position:relative;
  height:45.2vw;
  box-sizing:border-box;
  padding-inline:var(--gutter);
  background:var(--blanco);
}
.cifras__grid{
  height:100%;
  display:grid;
  grid-template-columns:repeat(3,28.65vw);
  /* medidas reales @1728: fila 1 = 262px, fila 2 = 252px, hueco = 109px */
  grid-template-rows:15.16vw 14.58vw;
  column-gap:2.03vw;
  row-gap:6.31vw;
}
.cifras__col1{
  grid-row:1 / 3;
  display:flex;
  flex-direction:column;
  padding-top:0.87vw;
}
.cifras__titulo{
  margin:0;
  font-family:var(--font-black);
  font-weight:400;
  font-size:3.25vw;
  line-height:1.0;
  letter-spacing:-0.02em;
  white-space:nowrap;
  color:var(--negro);
}
.cifras__subtitulo{
  margin:1.5vw 0 0;
  font-family:var(--font-base);
  font-weight:600;
  font-size:0.9vw;
  line-height:1.3;
  color:var(--negro);
}
.cifras__filete{
  margin-top:auto;
  border-top:2px solid var(--negro);
}

.cifras__card{
  display:flex;
  flex-direction:column;
  border-top:0.58vw solid var(--negro);   /* 10px @1728 */
  padding:0.75vw 0 0;                      /* el texto arranca a ras del borde izquierdo */
  box-sizing:border-box;
  transition:background-color .2s ease-in-out;
}
.cifras__card:hover{ background-color:var(--azul); }

.cifras__antetitulo{
  margin:0;
  font-family:var(--font-base);
  font-weight:600;
  font-size:1.25vw;
  line-height:1.1;
  color:var(--negro);
}
.cifras__valor{
  margin:0.25vw 0 0;
  font-family:var(--font-titular);
  font-weight:700;
  line-height:0.9;
  letter-spacing:-0.03em;
  white-space:nowrap;
  color:var(--negro);
}
.cifras__valor--md{ font-size:7.65vw; }
.cifras__valor--sm{ font-size:4.8vw; }   /* "+1.000 M USD" es la cadena mas
                                           larga de las cuatro tarjetas */
.cifras__valor-unidad{
  font-size:0.5em;
  letter-spacing:0;
}
.cifras__valor--lg{ font-size:6vw; }
.cifras__pie{
  margin-top:auto;
  padding-top:0.8vw;
  border-top:1px solid var(--negro);
  font-family:var(--font-base);
  font-weight:600;
  font-size:0.9vw;
  line-height:1.1;
  color:var(--negro);
}

/* ==========================================================================
   ENTRADAS (medidas del CSS real de Wix — duraciones, delays y curvas)
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){

  /* --- 1) Hero: fundidos encadenados 500/1ms · 500/500ms · 1200/2000ms --- */
  html.reveal-ready .hero__linea[data-reveal]{ opacity:0; transform:translateY(20px); }
  .hero__linea--1[data-reveal].visible{ animation:hero-linea-in 500ms 1ms var(--ease-suave) forwards; }
  .hero__linea--2[data-reveal].visible{ animation:hero-linea-in 500ms 500ms var(--ease-suave) forwards; }
  .hero__linea--3[data-reveal].visible{ animation:hero-linea-in 1200ms 2000ms var(--ease-suave) forwards; }
  @keyframes hero-linea-in{ to{ opacity:1; transform:translateY(0); } }

  /* --- 2) ¿Que Hacemos?: motion-fadeIn 500ms al entrar en pantalla --- */
  html.reveal-ready .hacemos__eyebrow[data-reveal],
  html.reveal-ready .hacemos__titulo[data-reveal],
  html.reveal-ready .hacemos__parrafo[data-reveal]{ opacity:0; }
  .hacemos__eyebrow[data-reveal].visible,
  .hacemos__titulo[data-reveal].visible,
  .hacemos__parrafo[data-reveal].visible{
    animation:hacemos-in 500ms var(--ease-suave) forwards;
  }
  @keyframes hacemos-in{ to{ opacity:1; } }

  /* --- 4-6) Países: rótulo se descubre desde la izquierda --- */
  html.reveal-ready .pais__rotulo{
    clip-path:polygon(0% 0%,0% 0%,0% 100%,0% 100%);
  }
  .pais[data-reveal].visible .pais__rotulo{
    animation:pais-rotulo-in 600ms var(--ease) forwards;
  }
  @keyframes pais-rotulo-in{
    to{ clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%); }
  }

  /* Frente: se descubre desde abajo. "transition" (no "animation") para
     poder convivir con el parallax nativo, ver más abajo. */
  html.reveal-ready .pais__frente{
    clip-path:polygon(0% 100%,100% 100%,100% 100%,0% 100%);
    transition:clip-path 700ms var(--ease);
  }
  .pais[data-reveal].visible .pais__frente{
    clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%);
  }

  /* --- 7) Datos & Cifras: slideIn+fadeIn 700ms, escalonadas --- */
  html.reveal-ready .cifras__card{
    opacity:0;
    transform:translateY(100%);
    clip-path:polygon(0% 100%,100% 100%,100% 100%,0% 100%);
  }
  .cifras__grid[data-reveal].visible .cifras__card{
    animation:cifras-card-in 700ms var(--ease) forwards;
  }
  .cifras__grid[data-reveal].visible .cifras__card:nth-child(2){ animation-delay:110ms; }
  .cifras__grid[data-reveal].visible .cifras__card:nth-child(3){ animation-delay:220ms; }
  .cifras__grid[data-reveal].visible .cifras__card:nth-child(4){ animation-delay:330ms; }
  .cifras__grid[data-reveal].visible .cifras__card:nth-child(5){ animation-delay:440ms; }
  @keyframes cifras-card-in{
    to{
      opacity:1;
      transform:translateY(0);
      clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%);
    }
  }
}

/* ---------- Parallax nativo por scroll de la capa de frente ----------
   Progressive enhancement: si el navegador soporta animation-timeline,
   el frente se desplaza ligado al scroll de la sección. Si no, main.js
   calcula el mismo efecto con IntersectionObserver + requestAnimationFrame
   sobre [data-parallax] (ver assets/js/main.js). */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .pais__frente{
      animation-name:pais-parallax;
      animation-duration:1ms;
      animation-timing-function:linear;
      animation-fill-mode:both;
      animation-timeline:view();
      animation-range:cover;
    }
    @keyframes pais-parallax{
      0%{ transform:translateY(-2.2vw); }
      100%{ transform:translateY(2.2vw); }
    }
  }
}

/* ==========================================================================
   RESPONSIVE — @media (max-width:500px)
   Una sola columna, tamaños fijos legibles. Las capas de país se
   mantienen; el rótulo pasa a 40px.
   ========================================================================== */
@media (max-width:500px){

  .hero{ height:auto; min-height:120vw; }
  .hero__texto{
    position:static;
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:24px;
    padding-top:calc(120vw - 140px);
    box-sizing:border-box;
  }
  .hero__linea{ position:static; white-space:normal; }
  .hero__linea--1{ font-size:16px; }
  .hero__linea--2{ font-size:14px; }
  .hero__linea--3{ font-size:20px; }

  .hacemos{ height:auto; padding:40px 24px; }
  .hacemos__eyebrow{ position:static; font-size:15px; }
  .hacemos__titulo{
    position:static;
    display:block;
    width:auto;
    margin-top:12px;
    font-size:36px;
  }
  .hacemos__parrafo{
    position:static;
    width:auto;
    margin-top:20px;
    font-size:15px;
    text-align:left;
  }
  .hacemos__flecha{
    position:static;
    margin-top:20px;
  }

  .proyectos{ height:auto; min-height:100vw; padding:40px 24px; box-sizing:border-box; }
  .proyectos__titulo{ position:static; width:auto; font-size:32px; }
  .proyectos__texto{ position:static; margin-top:16px; font-size:15px; line-height:1.5; }

  .pais--chile,
  .pais--panama,
  .pais--colombia{ height:130vw; }
  .pais--chile .pais__rotulo,
  .pais--panama .pais__rotulo,
  .pais--colombia .pais__rotulo{
    left:24px;
    right:auto;
    top:24px;
    font-size:40px;
    text-align:left;
    white-space:normal;
  }
  .pais--chile .pais__flecha,
  .pais--panama .pais__flecha,
  .pais--colombia .pais__flecha{
    left:24px;
    right:auto;
    top:96px;
  }

  .cifras{ height:auto; padding:40px 24px; }
  .cifras__grid{
    grid-template-columns:1fr;
    grid-template-rows:none;
    gap:32px;
  }
  .cifras__col1{ grid-row:auto; padding-top:0; }
  .cifras__titulo{ font-size:36px; }
  .cifras__subtitulo{ font-size:15px; margin-top:16px; }
  .cifras__filete{ margin-top:24px; }
  .cifras__card{ padding:20px 16px; }
  .cifras__antetitulo{ font-size:18px; }
  .cifras__valor{ font-size:56px; margin-top:8px; }
  .cifras__pie{ font-size:14px; padding-top:10px; }
}