/* La portada.
 *
 * Hoja aparte y no dentro de `coro.css` porque esto lo ve quien llega a
 * decidir si usa Coro, una vez. Las tres superficies de una charla -panel,
 * proyector, teléfono- no lo cargan nunca: en una sala de doscientas personas
 * eso serían doscientas descargas de una página que nadie de esa sala mira.
 *
 * Sobre los tokens de IA Humana que ya estaban en `ds/tokens/`. Del diseño
 * exportado no vino nada de CSS aprovechable: los componentes y las tres
 * utilidades de marca vivían dentro de un bundle de React de 74 KB, pensado
 * para el editor de canvas. Una landing que carga eso para dibujar tres
 * tarjetas no se paga; están reimplementadas acá abajo, en plano.
 */

/* ------------------------------------------------------- las tres de marca */

/* El rótulo mono en versalitas que abre cada sección. La barra doble es de la
 * marca y va en el contenido, no en un `::before`: un lector de pantalla que
 * dice "barra barra cómo funciona" es peor que uno que no lo dice. */
.ia-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}

/* La tarjeta flotante sobre la foto del hero. */
.ia-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* La retícula tenue del fondo del hero. Se apaga en oscuro: sobre fondo
 * negro el mismo trazo pasa de sugerencia a rejilla. */
.ia-grid-bg {
  background-image:
    linear-gradient(var(--border-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-faint) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center;
}

/* ------------------------------------------------------------ el andamiaje */

.lp-ancho { max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--gutter); }

.lp-seccion { padding: var(--space-24) 0; }
.lp-hueco   { display: grid; gap: var(--space-5); }

/* ---------------------------------------------------------------- cabecera */

.lp-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg-overlay);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.lp-header__fila {
  min-height: 68px; display: flex; align-items: center;
  gap: var(--space-6);
}
.lp-marca {
  display: flex; align-items: center; gap: var(--space-2);
  margin-right: auto; padding: var(--space-3) 0;
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-xl); letter-spacing: var(--tracking-tight);
  color: var(--text-1); text-decoration: none;
}
.lp-marca__punto {
  width: 11px; height: 11px; border-radius: 3px;
  background: var(--accent); display: inline-block;
}
.lp-nav { display: flex; align-items: center; gap: var(--space-6); }
.lp-nav a { font-size: var(--text-sm); color: var(--text-2); text-decoration: none; }
.lp-nav a:hover { color: var(--text-1); }

/* El menú de móvil, sin una línea de JavaScript.
 *
 * Un `<details>` es un desplegable accesible por definición: el navegador le
 * pone el rol, el estado y el teclado. Escribirlo con un botón y una clase
 * sería reimplementar todo eso peor, y cargar JavaScript en la única página
 * del sitio que puede vivir sin él. */
.lp-menu { display: none; }
.lp-menu > summary {
  list-style: none; cursor: pointer;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text-1);
}
.lp-menu > summary::-webkit-details-marker { display: none; }
.lp-menu[open] > summary { background: var(--surface-card); }
.lp-menu__panel {
  position: absolute; left: 0; right: 0;
  background: var(--bg-raised); border-bottom: 1px solid var(--border);
  padding: var(--space-4) var(--gutter);
  display: grid; gap: var(--space-1);
  box-shadow: var(--shadow-md);
}
.lp-menu__panel a {
  padding: var(--space-3) 0; font-size: var(--text-md);
  color: var(--text-1); text-decoration: none;
}

/* ------------------------------------------------- la barra del código */

.lp-codigo { background: var(--accent-soft); border-bottom: 1px solid var(--border); }
.lp-codigo__fila {
  /* Vertical y nada más: este `div` lleva también `.lp-ancho`, y un `padding`
   * en forma corta le borraría el margen lateral del contenedor. El texto de
   * la barra quedaba pegado al borde mientras el resto de la página respetaba
   * la retícula, que es de esos defectos que se ven sin saber qué se está
   * viendo. */
  padding-top: var(--space-5); padding-bottom: var(--space-5);
  display: flex; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap;
}
.lp-codigo__texto { flex: 1 1 280px; min-width: 0; }
.lp-codigo__form { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.lp-codigo__campo { width: 220px; }

/* --------------------------------------------------------------- el hero */

.lp-hero { padding: var(--space-20) 0 var(--space-24); }
.lp-hero__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--space-12); align-items: center;
}
.lp-hero__titulo {
  font-size: clamp(2.5rem, 4.4vw, 4rem);
  line-height: var(--leading-tight);
  margin: var(--space-4) 0 0;
}
.lp-hero__titulo em { font-style: normal; color: var(--accent); }
.lp-hero__bajada {
  font-size: var(--text-md); line-height: var(--leading-relaxed);
  color: var(--text-2); max-width: 34rem; margin-top: var(--space-5);
}
.lp-hero__acciones {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap; margin-top: var(--space-8);
}
.lp-hero__figura { position: relative; }
.lp-hero__foto {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  object-fit: cover; aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg);
}
.lp-hero__tarjeta {
  position: absolute; left: -10px; bottom: -26px; width: 216px;
  border-radius: var(--radius-lg); padding: var(--space-4);
  box-shadow: var(--shadow-md);
}
.lp-opcion {
  height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 var(--space-3);
  font-size: var(--text-xs); color: var(--text-2);
}
.lp-opcion--elegida {
  border-color: transparent; background: var(--accent);
  color: var(--text-on-accent); font-weight: var(--weight-medium);
}

/* --------------------------------------------------------------- cifras */

.lp-cifras {
  background: var(--bg-sunken);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: var(--space-8) 0;
}
.lp-cifras__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-6);
}
.lp-cifra {
  font-family: var(--font-mono); font-size: var(--text-3xl);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight);
}
.lp-cifra--acento { color: var(--accent); }

/* -------------------------------------------------------------- producto */

.lp-tarjetas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--space-5); margin-top: var(--space-12);
}
.lp-tarjeta__ilustracion {
  display: grid; place-items: center; min-height: 208px; color: var(--text-1);
}
.lp-tarjeta__ilustracion img {
  width: 100%; max-width: 200px; height: auto; display: block;
}

/* --------------------------------------------------------------- cierre */

.lp-cierre {
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-10); text-align: center;
}

/* ------------------------------------------------------------------ pie */

.lp-footer {
  background: var(--bg-sunken); border-top: 1px solid var(--border);
  padding: var(--space-12) 0 var(--space-6);
}
.lp-footer__enlaces {
  display: flex; gap: var(--space-5) var(--space-8); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-2);
}
.lp-footer__enlaces a { color: inherit; text-decoration: none; }
.lp-footer__enlaces a:hover { color: var(--accent); }
.lp-footer__cierre {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
  border-top: 1px solid var(--border);
  margin-top: var(--space-6); padding-top: var(--space-5);
}
.lp-wordmark {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: var(--text-2xl); letter-spacing: var(--tracking-tight);
}

/* --------------------------------------------------------------- móvil */

/* El corte es 860 y no 768: arriba de eso la cabecera todavía entra con los
 * tres enlaces y el botón; abajo, el botón principal empieza a partirse en
 * dos líneas antes de que el menú estorbe. Se eligió mirando dónde se rompe,
 * no copiando un breakpoint. */
@media (max-width: 860px) {
  .lp-nav { display: none; }
  .lp-menu { display: block; }
  .lp-header__fila { gap: var(--space-3); }

  .lp-hero { padding: var(--space-12) 0 var(--space-16); }
  .lp-hero__grid { gap: var(--space-10); }

  /* La tarjeta flotante deja de flotar: encima de la foto y a media pantalla
   * tapa las caras, que son lo que la foto tiene que mostrar. */
  .lp-hero__tarjeta {
    position: static; width: auto; margin-top: var(--space-4);
  }

  .lp-seccion { padding: var(--space-16) 0; }
  .lp-cierre { padding: var(--space-10) var(--space-5); }

  /* La barra del código, en una pantalla que se lee con una mano.
   *
   * Cada fila que agregue empuja el hero fuera de la pantalla, y esta barra
   * es lo primero que ve quien llega con un código: no puede ocupar media
   * pantalla. El campo y el botón comparten fila -el campo se estira, el
   * botón se queda del tamaño de su texto- y la equis se sale del flujo y se
   * va a la esquina, que es donde se busca una equis. */
  .lp-codigo__fila {
    position: relative;
    padding-right: calc(var(--gutter) + 44px);   /* el hueco de la equis */
  }
  .lp-codigo__form { width: 100%; flex-wrap: nowrap; }
  .lp-codigo__campo { flex: 1 1 auto; width: auto; min-width: 0; }
  .lp-codigo__form .btn { flex: 0 0 auto; }
  .lp-codigo__cerrar { position: absolute; top: var(--space-2); right: var(--gutter); }
}

/* El pulgar llega a la parte de abajo de la pantalla, no al medio. En la
 * pantalla más chica el botón principal se estira: es la acción de la página. */
@media (max-width: 460px) {
  .lp-hero__acciones > * { width: 100%; }
  .lp-footer__cierre { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------ tipografía propia */

/* Los títulos de la portada son más grandes que los de las tres superficies
 * de la charla: acá compiten con una foto, allá con una sala mirando. */
.lp-h2 {
  font-size: clamp(2rem, 3.4vw, var(--text-3xl));
  line-height: var(--leading-tight);
  margin: var(--space-4) 0 0;
  max-width: 26rem;
}
.lp-cierre .lp-h2 { max-width: none; }
.lp-h3 { font-size: var(--text-lg); margin: var(--space-3) 0 0; }
.lp-bajada {
  font-size: var(--text-md); line-height: var(--leading-relaxed);
  color: var(--text-2); max-width: 40rem; margin-top: var(--space-4);
}
.lp-texto {
  font-size: var(--text-base); line-height: var(--leading-relaxed);
  color: var(--text-2); margin-top: var(--space-3);
}
.lp-codigo__lead {
  font-size: var(--text-md); font-weight: var(--weight-medium);
  line-height: var(--leading-snug); margin: var(--space-1) 0 var(--space-1);
}
.lp-hero__pregunta {
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  line-height: var(--leading-snug); margin-top: var(--space-2);
}

/* Dos textos para el mismo botón: el largo en escritorio, el corto en móvil.
 * Es la única excepción que el documento de copy permite al texto del botón
 * principal, y se resuelve mostrando y ocultando en vez de con JavaScript,
 * para que no haya un instante con el texto equivocado. */
.solo-angosto { display: none; }
@media (max-width: 860px) {
  .solo-ancho { display: none; }
  .solo-angosto { display: inline; }
}

/* ------------------------------------------- cerrar la barra del código */

/* Sin JavaScript y sin recordar la decisión.
 *
 * Que vuelva al recargar es a propósito: quien llega con un código en la
 * mano la necesita, y la vez que la cerró estaba mirando otra cosa. Perder
 * una preferencia es más barato que esconderle la puerta a alguien que está
 * parado en una sala esperando entrar.
 *
 * `[data-forzada]` gana siempre: si hay un error o un código escrito, la
 * barra no se puede ocultar. Esconder el campo donde alguien acaba de
 * equivocarse lo deja sin saber qué pasó. */
.lp-codigo__cerrar {
  height: 44px; width: 44px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--text-3); cursor: pointer;
}
.lp-codigo__cerrar:hover {
  background: var(--surface-card); color: var(--text-1); border-color: var(--border);
}
#cerrar-barra:checked + .lp-codigo:not([data-forzada]) { display: none; }

/* ------------------------------------------------------------- retoques */

/* `.code-input` está pensado para la portada vieja, donde el campo del código
 * era lo único de la página y ocupaba media pantalla. Acá vive en una barra
 * de veinte píxeles de alto: la misma tipografía enorme la desborda. */
.lp-codigo__campo .code-input {
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-3);
  text-align: left;
}

/* La tarjeta flotante va sobre una foto con gente: con el vidrio del sistema
 * -pensado para fondos planos- el texto sobre una cara no se lee. Se opaca
 * lo suficiente para que el contraste no dependa de qué hay debajo. */
.lp-turno {
  /* Opaca de verdad: va sobre una foto con gente y con el vidrio del sistema
   * -pensado para fondos planos- el texto sobre una cara no se lee. */
  background: color-mix(in srgb, var(--bg-raised) 94%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

/* ---------------------------------------------------- selector de idioma */

.lp-idiomas {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-5);
  font-size: var(--text-sm);
}
.lp-idiomas a { color: var(--text-2); text-decoration: none; }
.lp-idiomas a:hover { color: var(--accent); }
/* El activo no es enlace y se ve distinto: es lo que dice en qué idioma
 * estás, que es la mitad del trabajo de un selector de idioma. */
.lp-idiomas__activo { color: var(--text-1); font-weight: var(--weight-medium); }

/* ------------------------------------------------- las tarjetas que turnan */

/* Apiladas en la misma celda de una retícula, no absolutas.
 *
 * Así el contenedor conserva la altura de la más alta -nada salta al cambiar-
 * y el mismo markup sirve para el hero de escritorio, donde la tarjeta flota
 * sobre la foto, y para el móvil, donde baja debajo. Con `position:absolute`
 * habría que darle una altura a mano y acertarle en los cuatro idiomas. */
.lp-turnos { display: grid; }
.lp-turnos > .lp-turno {
  grid-area: 1 / 1;
  opacity: 0;
  animation: lp-turnar 28s infinite;
}
/* Los cuatro corridos 0,84 s hacia atrás, que es lo que dura el fundido.
 *
 * Con los retrasos en 0/7/14/21 la primera tarjeta empezaba su fundido de
 * entrada al cargar la página: casi un segundo con el elemento más visible
 * del hero en blanco. Corriendo **los cuatro** por igual, la primera ya está
 * opaca en el instante cero y los relevos conservan su separación de siete
 * segundos, que es lo que hace que se crucen en vez de dejar un hueco.
 *
 * Correr solo el primero no sirve: adelantaría su salida sin adelantar la
 * entrada del segundo, y el hueco reaparecería en el primer relevo. */
.lp-turnos > .lp-turno:nth-child(1) { animation-delay: -0.84s; }
.lp-turnos > .lp-turno:nth-child(2) { animation-delay:  6.16s; }
.lp-turnos > .lp-turno:nth-child(3) { animation-delay: 13.16s; }
.lp-turnos > .lp-turno:nth-child(4) { animation-delay: 20.16s; }

/* El relevo tiene que solaparse, o hay un parpadeo en vaco.
 *
 * Con la ventana visible terminando en el 25 % -justo donde entra la
 * siguiente- las dos quedaban en cero durante el fundido: medio segundo de
 * tarjeta en blanco, cada siete. Se vio midiendo las cuatro opacidades a la
 * vez en la página, no mirando.
 *
 * Ahora cada una llega a opaca en el 3 % y empieza a irse en el 25 %, que es
 * cuando la siguiente arranca su propio fundido de entrada. Se cruzan: la que
 * sale llega a cero en el mismo instante en que la que entra llega a uno.
 * Siete segundos visibles de veintiocho —leer una pregunta corta lleva menos
 * que eso— y el cruce dura menos de un segundo. */
@keyframes lp-turnar {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  25%  { opacity: 1; }
  28%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Quien pidió que las cosas no se muevan ve una y ya.
 *
 * No alcanza con pausar la animación: las cuatro quedarían apiladas con la
 * opacidad que les tocó, o las cuatro invisibles. Se apagan las otras tres. */
@media (prefers-reduced-motion: reduce) {
  .lp-turnos > .lp-turno { animation: none; opacity: 1; }
  .lp-turnos > .lp-turno:not(:first-child) { display: none; }
}

/* --------------------------------- el contenido propio de cada tipo */

/* Nube de palabras: el tamaño es la frecuencia, como en el proyector. */
.lp-nube {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: baseline; margin-top: var(--space-3);
}
.lp-nube__voz {
  font-size: var(--text-xs); color: var(--text-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
}
.lp-nube__voz--media  { font-size: var(--text-sm); color: var(--text-1); }
.lp-nube__voz--grande {
  font-size: var(--text-md); font-weight: var(--weight-medium);
  color: var(--text-on-accent); background: var(--accent); border-color: transparent;
}

/* Pregunta abierta: tarjetas, la última primero, como en el proyector. */
.lp-abierta {
  font-size: var(--text-xs); line-height: var(--leading-snug);
  color: var(--text-1);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

/* Preguntas del público: los votos primero, que es el orden en que se leen. */
.lp-qa {
  font-size: var(--text-xs); line-height: var(--leading-snug);
  color: var(--text-1);
  display: flex; gap: var(--space-2); align-items: baseline;
}
.lp-qa__votos {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--accent); flex: 0 0 auto;
}
.lp-qa--respondida { color: var(--text-3); text-decoration: line-through; }