/**
 * style/landing.css — Página de presentación
 *
 * MISMO FONDO QUE EL RESTO DEL SITIO. No hay bloque de color: la portada, la
 * consulta y los textos legales se ven como una sola cosa, y lo que distingue a
 * esta pantalla es el tamaño del titular, no un cambio de color. El violeta
 * queda para la marca y los botones, que es donde significa algo.
 *
 * Los botones no se dibujan acá: son `.boton` y `.boton-2` de style/base.css,
 * los mismos que "Buscar" y "Atrás" en la consulta. Acá van sólo su ubicación y
 * las versalitas.
 */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

.container { max-width: 920px; margin: 0 auto; padding: 0 40px; }
.section-heading {
  font-family: var(--serif); font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 500; color: var(--ink); text-align: center;
  margin-bottom: 52px; line-height: 1.2;
}

/* ══════════════════════════════════════════════════════════════════ barra ══ */
.top-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--bg); border-bottom: .5px solid var(--border);
  padding: 12px 0;
}
/* El `.container` de adentro es el que alinea: el logo arranca donde arranca el
   texto de las secciones y el botón termina donde termina. */
.top-fila { display: flex; align-items: center; justify-content: space-between; }
/* La marca de la barra no tiene regla acá: es la misma `.marca` del pie, en
   style/base.css. */
.top-bar .selector-idioma { position: static; margin-left: auto; margin-right: 16px; }

/* ═══════════════════════════════════════════════════════════════════ hero ══
   Alto de pantalla y el titular centrado en lo que queda abajo de la barra. */
#hero {
  min-height: 100svh; display: flex; align-items: center;
  padding: 120px 0 90px;
}

/* EL TITULAR ocupa el ancho entero del contenido: es lo único que hay en esta
   pantalla, y dividido en una columna angosta se le van seis renglones. Con el
   ancho de 920 px entra en tres.

   `text-wrap: balance` reparte los renglones en vez de dejar el último con dos
   palabras. Donde no está soportado no pasa nada: se corta como siempre. */
.hero-titular {
  font-family: var(--serif); font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 500; color: var(--ink);
  line-height: 1.18; letter-spacing: -.01em;
  text-wrap: balance; margin: 0 0 36px;
}
.hero-marca { color: var(--accent); }

/* ── EL NOMBRE DE LA ZONA, que va cambiando ───────────────────────────────
   EL TEXTO DE ARRIBA NO SE MUEVE NUNCA, y eso es lo que manda todo lo demás.

   La caja es un renglón propio —`display: block`— y con el alto FIJO: lo mide
   src/pages/landing.js probando los cuatro nombres al ancho que haya y
   quedándose con el más alto. Sin eso, un nombre de dos renglones y otro de uno
   correrían para arriba y para abajo la frase entera cada tres segundos.

   Y recorta lo que se sale: el nombre se va para arriba y el que sigue entra
   desde abajo, como las pantallas de la consulta pero en vertical. Fuera de la
   caja no se ve nada de ese viaje.

   LO ÚNICO QUE SE MUEVE ES EL NOMBRE. La preposición y el artículo —"en la",
   "con la"— son los mismos en los cuatro países, así que van en un pedazo
   quieto, adentro de la misma caja y en el MISMO RENGLÓN que el nombre.

   CÓMO COMPARTEN RENGLÓN SIN COMPARTIR CAJA: el pedazo quieto va POSICIONADO
   encima, a la izquierda, y el nombre arranca su primer renglón sangrado
   justamente lo que ese pedazo mide (`text-indent`, que lo calcula
   src/pages/landing.js al medir). Así el nombre puede partirse en dos
   renglones y el segundo arranca contra el margen, como cualquier texto; con
   los dos pedazos uno al lado del otro, el segundo renglón quedaba colgando
   debajo del nombre y no del margen.

   Los tres tiempos de acá tienen que coincidir con los de src/pages/landing.js:
   ahí se espera a que termine de irse para cambiar el texto. Si se toca uno hay
   que tocar el otro. */
.hero-zona-caja { display: block; position: relative; overflow: hidden; }
.hero-zona-fija { position: absolute; left: 0; top: 0; white-space: nowrap; }
.hero-zona {
  display: block;
  transition: transform .42s cubic-bezier(.16, .84, .44, 1), opacity .42s ease;
}
/* Se va para arriba. La curva de salida es más seca que la de entrada: lo que se
   va no tiene que llamar la atención, lo que llega sí. */
.hero-zona.sale {
  transform: translateY(-100%); opacity: 0;
  transition: transform .26s cubic-bezier(.5, 0, .9, .4), opacity .26s ease;
}
/* El salto de abajo: se pone ahí SIN transición y recién después se la devuelve,
   si no el viaje se vería al revés. Lo coordina landing.js. */
.hero-zona.abajo       { transform: translateY(100%); opacity: 0; }
.hero-zona.sin-viaje   { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-zona { transition: none; transform: none; opacity: 1; }
}

/* ══════════════════════════════════════════════════════════ los botones ══
   Versalitas en los dos: no son acciones de adentro del producto sino puertas, y
   la diferencia tiene que notarse sin leer. El tamaño, el borde y los colores
   son los de .boton y .boton-2, que es de donde salen. */
.btn-consultar, .hero-cta, .btn-estado {
  text-decoration: none; letter-spacing: .09em; text-transform: uppercase;
}
/* En la barra el botón va más chico: ahí compite con el logo, y al tamaño del
   de la consulta la barra se vuelve una franja. */
.btn-consultar { padding: 9px 16px; font-size: 13px; }
.hero-cta      { font-size: 14px; }
.btn-estado    { display: block; width: fit-content; margin: 36px auto 0; font-size: 12px; }

/* ═══════════════════════════════════════════════════════════ cómo funciona ══ */
#como { padding: 140px 0; border-top: .5px solid var(--border); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; align-items: start; }
.step-text  { display: flex; flex-direction: column; gap: 8px; }
.step-title { font-family: var(--serif); font-size: 19px; font-weight: 500; line-height: 1.3; }
.step-body  { font-size: 14px; color: var(--ink2); line-height: 1.6; }
@media (max-width: 700px) { .steps { grid-template-columns: 1fr; gap: 28px; } }

/* ══════════════════════════════════════════════════════════════ cobertura ══
   Tres por renglón, en orden alfabético. Ninguna lleva enlace —a la consulta se
   entra por el botón— pero todas responden al puntero: la tarjeta es una ficha
   que se lee, y que se levante un poco al pasar por encima dice que está viva
   sin prometer que lleva a algún lado. */
#cobertura { padding: 120px 0; border-top: .5px solid var(--border); }
.paises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.country-card {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; min-height: 48px;
  background: var(--bg2); border: .5px solid var(--border-md);
  border-radius: var(--radius-sm);
  transition: border-color var(--t), box-shadow var(--t);
}
.country-card:hover { border-color: var(--ink3); box-shadow: 0 2px 12px rgba(26, 24, 20, .06); }
.country-name { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1; }

/* EL ESTADO: en la letra del sitio, en gris y en minúscula. Gris porque no es
   parte de la oración sino una etiqueta, y la minúscula la pone acá el estilo
   para que el diccionario siga escribiendo palabras —"Disponible"— y no
   decoración. */
.country-card .estado {
  margin-left: auto;
  font-size: 12px; color: var(--ink2);
  text-transform: lowercase; white-space: nowrap;
}

/* EL PUNTO. Verde el que contesta, amarillo el que todavía no. El color no va
   solo: al lado está la palabra, porque un punto de color es invisible para
   quien no distingue esos dos. El titileo es del verde nada más —es el que está
   vivo— y se apaga con el movimiento.

   EL VERDE ES EL MISMO DE /fronteras/geoservicios/ (#2e7d32, `.luz.bien` en
   style/panel.css): las dos pantallas dicen lo mismo —este servicio contesta—
   y con dos verdes distintos parecían dos cosas distintas. */
.punto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.country-card.active .punto {
  background: #2e7d32; animation: punto-late 2.4s ease-in-out infinite;
}
.country-card.soon .punto { background: #c8a028; }
/* EL TITILEO ES UN RESPLANDOR, NO UN SEGUNDO PUNTO. Con un `box-shadow` sin
   desenfoque —`0 0 0 4px`— lo que crece alrededor es un anillo de borde duro
   del mismo color, y eso no se lee como un halo sino como otro punto atrás del
   punto. Con desenfoque, lo que se agranda es la luz que sale de él.

   Y el punto NO cambia de opacidad: un punto que se desvanece a la mitad es
   otra vez dos puntos a la vez, el que está y el que se está yendo. Lo único
   que se mueve es el resplandor, y sale del color del punto. */
@keyframes punto-late {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, .55); }
  50%      { box-shadow: 0 0 10px 3px rgba(46, 125, 50, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .country-card.active .punto { animation: none; }
}

/* ═══════════════════════════════════════════════════ revelado al bajar ══
   La clase `revelable` la pone src/pages/landing.js y no este archivo: escrita
   acá, quien entre sin JavaScript vería la página en blanco para siempre. */
.revelable {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
.revelable.visto { opacity: 1; transform: none; }

footer { border-top: .5px solid var(--border); }

@media (max-width: 600px) {
  .container { padding: 0 20px; }
  #hero      { padding: 100px 0 72px; }
  #como      { padding: 80px 0; }
  #cobertura { padding: 80px 0; }
  .paises    { grid-template-columns: 1fr; }
}