/* ==========================================================================
   tv.css · La pantalla grande.
   --------------------------------------------------------------------------
   Se diseña para 1920×1080 apaisada y a dos o tres metros de distancia. El
   proyecto del que venimos era una TV VERTICAL táctil y su CSS asumía eso en
   todos lados; acá nadie toca la pantalla y el eje largo es el horizontal.
   ========================================================================== */

body[data-pantalla='tv'] {
  display: grid;
  grid-template-rows: auto 1fr;
  height: var(--app-height, 100dvh);
}

/* --------------------------------------------------------------------------
   Cabecera · el reparto de logos de la captura del cliente:
   Megalabs a la izquierda, los de producto al centro, la línea a la derecha.
   -------------------------------------------------------------------------- */
.cabecera {
  position: relative;
  z-index: var(--z-header);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--gutter);
}

/* Sin esto, una columna de grid nunca baja de su contenido y la fila de logos
   desborda en vez de comprimirse. */
.cabecera > * {
  min-width: 0;
}

.cabecera__marca {
  height: clamp(2rem, 3.6vh, 3.4rem);
  width: auto;
  justify-self: start;
}

.cabecera__productos {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Nowrap y no wrap: en la TV los logos van en una sola fila. Lo que cede
     cuando falta ancho es el tamaño de las cajas, no la línea. */
  flex-wrap: nowrap;
  gap: clamp(8px, 1vw, 12px);
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Caja blanca de los logos.

   Los logos de producto y el de la línea están hechos para papel: son de
   colores saturados y con texto oscuro, y sobre el verde petróleo del fondo
   los más oscuros —Rovartal, Lapticol— directamente no se leen. Antes se los
   compensaba con una sombra y bajándoles la saturación, que es tratar el
   síntoma: el problema es el fondo, no el logo.

   El de Megalabs NO lleva caja: tiene su versión blanca, pensada exactamente
   para este fondo.

   Alto fijo para todas y `object-fit: contain` adentro: los logos tienen
   proporciones muy distintas —Rovartal es 420×59, Odasen 420×130— y sin un
   alto común uno queda tres veces más grande que el otro. El ancho máximo
   evita que el más apaisado se coma la fila.
   -------------------------------------------------------------------------- */
.logo-caja {
  /* ⚠️ flex y NO grid, aunque grid con `place-items: center` sea lo natural
     para centrar algo. Dentro de un grid con la fila en `auto`, el
     `max-height: 100%` de la imagen se resuelve contra un alto indefinido y el
     navegador lo IGNORA en silencio: los logos se salían de la caja por abajo
     y los subtítulos ("Sitagliptina", "Vildagliptina") quedaban colgando sobre
     el fondo verde. En flex, con el alto del contenedor definido, el
     porcentaje se resuelve bien. */
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(2.4rem, 5.2vh, 3.9rem);
  max-width: clamp(7rem, 13vw, 12rem);
  /* Los valores pedidos, 10px 16px, son los del tope: en pantallas más
     angostas el padding cede antes que el tamaño del logo. */
  padding: clamp(5px, 1vh, 10px) clamp(8px, 1.1vw, 16px);
  border-radius: 8px;
  background: var(--white);
  /* Sin borde. Una sombra apenas perceptible despega la caja del degradado
     sin dibujar una línea. */
  box-shadow: 0 1px 3px rgba(2, 29, 26, 0.22);
  /* Puede achicarse, no estirarse: la fila se comprime antes de desbordar. */
  flex: 0 1 auto;
  min-width: 0;
}

.logo-caja img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.cabecera__linea {
  justify-self: end;
}

/* --------------------------------------------------------------------------
   Productos flotando · lo primero que el cliente pidió conservar del boceto
   -------------------------------------------------------------------------- */
/* ⚠️ Se muestran y se ocultan con `display`, no con una transición de opacidad.
   REGLA GENERAL DE ESTE PROYECTO, y la aprendimos acá: en una pestaña que no
   está al frente, el navegador NO avanza las transiciones ni las animaciones.
   La TV del evento puede estar detrás de otra ventana, o volviendo del
   protector de pantalla, y una transición que llevaba de opacity 0 a 1 se
   quedaba en 0: pantalla vacía, sin un solo error.

   La regla que evita toda esta familia de bugs: el estado natural de un
   elemento tiene que ser el VISIBLE, y la animación solo decorarlo. Si no
   corre, se ve igual. */
.flotantes {
  position: fixed;
  inset: 0;
  z-index: var(--z-flotantes);
  pointer-events: none;
  display: none;
}

body.con-flotantes .flotantes {
  display: block;
  animation: aparecer-flotantes var(--dur-slower) var(--ease-out);
}

@keyframes aparecer-flotantes {
  from {
    opacity: 0;
  }
}

.flotante {
  position: absolute;
  top: var(--top);
  left: var(--left);
  right: var(--right);
  /* Base común a todos, por tres factores:
     · --escala: la proporción propia de cada posición del boceto.
     · --factor-cantidad: se adapta a CUÁNTOS packshots haya (tv.js) —con pocos
       más grandes, con muchos más chicos, para que no se amontonen.
     Calibrado para que con 4 quede como estaba (factor 1). */
  width: calc(clamp(8rem, 15vw, 18rem) * var(--escala, 1) * var(--factor-cantidad, 1));
  filter: drop-shadow(var(--sombra-flotante));
  animation: flotar var(--t-flote) var(--ease-in-out) infinite;
  animation-delay: var(--retraso, 0s);
  opacity: 0.9;
}

.flotante__img {
  width: 100%;
  height: auto;
}

@keyframes flotar {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-22px) rotate(3deg);
  }
}

/* --------------------------------------------------------------------------
   Escenario
   -------------------------------------------------------------------------- */
.escenario {
  position: relative;
  z-index: var(--z-contenido);
  display: grid;
  place-items: center;
  padding: 0 var(--gutter) var(--space-6);
  min-height: 0;
}

.pantalla {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  text-align: center;
  width: 100%;
  max-width: 92rem;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Portada
   -------------------------------------------------------------------------- */
.pantalla--portada .titulo--xl {
  max-width: 20ch;
}

/* El segundo renglón del título en verde, como en la captura del cliente.
   No se puede pintar media frase sin marcarla en el HTML —y marcarla obligaría
   a que el texto del panel traiga etiquetas—, así que el corte es geométrico:
   el degradado cubre el bloque entero y cambia de golpe a la mitad de su alto.
   Con dos renglones, eso es exactamente el límite entre uno y otro.

   Los dos topes en el mismo 50% son a propósito: con una transición suave el
   primer renglón se ensucia de verde en su mitad de abajo. */
.pantalla--portada .titulo--xl {
  background: linear-gradient(180deg, var(--white) 0 50%, var(--verde-400) 50% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.llamado {
  margin-top: var(--space-3);
  padding: var(--space-5) var(--space-9);
  border-radius: var(--radio-full);
  background-image: var(--gradiente-cta);
  box-shadow: var(--glow-cta);
  animation: pulsar 2.6s var(--ease-in-out) infinite;
}

.llamado__texto {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--peso-black);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-on-accent);
}

@keyframes pulsar {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

/* --------------------------------------------------------------------------
   Cuenta regresiva
   -------------------------------------------------------------------------- */
.cuenta__numero {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: var(--peso-black);
  line-height: 1;
  color: var(--verde-400);
  text-shadow: var(--glow-exito);
}

.cuenta__numero--go {
  font-size: var(--step-4);
  color: var(--white);
}

.cuenta__numero--pop {
  animation: aparecer var(--dur-slow) var(--ease-spring);
}

@keyframes aparecer {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Pregunta
   -------------------------------------------------------------------------- */
/* La pregunta arriba y las opciones centradas en el espacio que queda hasta el
   pie: el enunciado no se despega tanto de las respuestas como con
   `space-between`, pero las imágenes tampoco quedan pegadas a la pregunta. Las
   opciones crecen para ocupar el hueco (`flex: 1`) y centran sus tarjetas
   dentro de él (`align-content: center`). */
.pantalla--pregunta {
  justify-content: flex-start;
  gap: var(--space-6);
  padding-top: var(--space-2);
}

.pantalla--pregunta .opciones {
  flex: 1;
  align-content: center;
}

.progreso {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.progreso__texto {
  font-size: var(--step--1);
  font-weight: var(--peso-semi);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.progreso__puntos {
  display: flex;
  gap: var(--space-2);
}

.punto {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--border-fuerte);
  transition: background var(--dur-normal) var(--ease-out);
}

.punto--activo {
  background: var(--verde-400);
}

.enunciado {
  display: grid;
  place-items: center;
  gap: var(--space-5);
  width: 100%;
}

/* Con imagen, la pregunta pasa a dos columnas. El RFP pide que la imagen se
   vea GRANDE, así que se lleva un tercio del ancho y no una miniatura al
   costado del texto. */
.enunciado--con-imagen {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: center;
  text-align: left;
}

.enunciado__figura {
  display: grid;
  place-items: center;
  width: 100%;
}

.enunciado__img {
  max-height: 28vh;
  width: auto;
  border-radius: var(--radio-lg);
  filter: drop-shadow(var(--sombra-md));
}

.titulo--pregunta {
  font-size: var(--step-1);
  font-weight: var(--peso-bold);
  max-width: 26ch;
}

/* --------------------------------------------------------------------------
   Opciones · todas iguales en reposo. Diferenciarlas visualmente sería una
   pista falsa, y con packshots de por medio la tentación es grande.
   -------------------------------------------------------------------------- */
.opciones {
  display: grid;
  grid-template-columns: repeat(var(--columnas, 4), minmax(0, 1fr));
  gap: var(--space-4);
  width: 100%;
}

.opciones[data-cantidad='2'] { --columnas: 2; }
.opciones[data-cantidad='3'] { --columnas: 3; }
.opciones[data-cantidad='4'] { --columnas: 4; }
.opciones[data-cantidad='5'] { --columnas: 5; }

.opcion {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  min-height: 0;
  padding: var(--space-6) var(--space-4) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radio-lg);
  background: var(--surface-raised);
  /* Entrada escalonada: las tarjetas aparecen en el orden en que se leen.
     El escalonado va por DURACIÓN y no por `animation-delay` con
     `fill-mode: backwards`, que era lo natural: con backwards, el elemento se
     queda en el estado `from` —invisible— durante la espera, y en una pestaña
     de fondo esa espera no termina nunca. Ver la nota de .flotantes. */
  animation: entrar-opcion calc(var(--dur-slow) + var(--i, 0) * 90ms) var(--ease-out);
  transition:
    border-color var(--dur-normal) var(--ease-out),
    background var(--dur-normal) var(--ease-out),
    opacity var(--dur-normal) var(--ease-out),
    transform var(--dur-normal) var(--ease-out);
}

@keyframes entrar-opcion {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}

.opcion__letra {
  position: absolute;
  top: calc(var(--space-4) * -1);
  left: var(--space-4);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-image: var(--gradiente-letra);
  box-shadow: var(--sombra-sm);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: var(--peso-black);
  color: var(--white);
}

.opcion__foto {
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.opcion__img {
  max-height: 20vh;
  width: auto;
  filter: drop-shadow(var(--sombra-sm));
}

.opcion__texto {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: var(--peso-bold);
  text-wrap: balance;
}

.opcion--correcta {
  border-color: var(--verde-400);
  background: rgba(95, 213, 132, 0.16);
  box-shadow: var(--glow-exito);
  transform: scale(1.03);
}

.opcion--incorrecta {
  border-color: var(--casi);
  background: rgba(245, 196, 83, 0.14);
}

.opcion--atenuada {
  opacity: 0.32;
}

/* --------------------------------------------------------------------------
   Feedback
   -------------------------------------------------------------------------- */
.sello {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: var(--peso-black);
  letter-spacing: var(--track-titulo);
}

.es-correcto .sello {
  color: var(--verde-400);
  text-shadow: var(--glow-exito);
}

.es-casi .sello {
  color: var(--casi);
  text-shadow: var(--glow-casi);
}

.refuerzo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 60rem;
  padding: var(--space-6) var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radio-xl);
  background: var(--surface-raised);
}

.refuerzo__lead {
  font-size: var(--step--1);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.refuerzo__figura {
  display: grid;
  place-items: center;
  padding: var(--space-4);
  border-radius: var(--radio-lg);
  background: var(--white);
  animation: aparecer var(--dur-slow) var(--ease-spring);
}

.refuerzo__img {
  max-height: 22vh;
  width: auto;
}

.refuerzo__nombre {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--peso-black);
}

.refuerzo__mensaje {
  font-size: var(--step-0);
  color: var(--text-secondary);
  max-width: 60ch;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Cierre, formulario y gracias
   -------------------------------------------------------------------------- */
/* El "¡Gracias por participar!" del cierre va un escalón más chico que el resto
   de los títulos grandes: es un agradecimiento, no un encabezado, y con el
   subtítulo debajo pedía bajar el tono. */
.pantalla--final .titulo--l {
  font-size: var(--step-2);
}

/* La bajada del cierre ("Dejanos tus datos…") más chica y acotada en ancho: si
   no, ocupa de un extremo al otro de la pantalla y compite con el título. */
.pantalla--final .subtitulo {
  font-size: var(--step-1);
  max-width: 40ch;
}

.pantalla--final .premios {
  margin-top: var(--space-4);
}

.pulso {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-image: var(--gradiente-cta);
  box-shadow: var(--glow-cta);
  animation: pulsar 2s var(--ease-in-out) infinite;
}

.gracias__marca {
  height: clamp(3rem, 6vh, 5rem);
  width: auto;
}

/* --------------------------------------------------------------------------
   Sorteo en la TV · misma base verde que las preguntas (sin flotantes).
   La cuenta regresiva reusa .cuenta__numero; acá va solo la lista de ganadores.
   -------------------------------------------------------------------------- */
.ganadores-tv {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 60rem;
  margin: 0;
  padding: 0;
}

.ganador-tv {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radio-xl);
  background: var(--surface-raised);
  animation: aparecer var(--dur-slow) var(--ease-spring);
}

.ganador-tv__num {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background-image: var(--gradiente-letra);
  box-shadow: var(--sombra-sm);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--peso-black);
  color: var(--white);
}

.ganador-tv__nombre {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--peso-bold);
  text-align: left;
  text-wrap: balance;
}

/* Con muchos ganadores, achicar el nombre antes de que la lista desborde. */
.ganadores-tv[data-cantidad='4'] .ganador-tv__nombre,
.ganadores-tv[data-cantidad='5'] .ganador-tv__nombre { font-size: var(--step-1); }
.ganadores-tv[data-cantidad='6'] .ganador-tv__nombre,
.ganadores-tv[data-cantidad='7'] .ganador-tv__nombre,
.ganadores-tv[data-cantidad='8'] .ganador-tv__nombre { font-size: var(--step-0); }

/* --------------------------------------------------------------------------
   Vertical · si la TV del salón termina siendo la de un stand y no la del
   auditorio, la pregunta pasa a una columna en vez de recortarse.
   -------------------------------------------------------------------------- */
@media (orientation: portrait), (max-width: 900px) {
  .enunciado--con-imagen {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }

  .opciones[data-cantidad='4'],
  .opciones[data-cantidad='5'] {
    --columnas: 2;
  }

  .enunciado__img {
    max-height: 22vh;
  }
}

/* Pantallas bajas: lo primero que cede es el aire, no el tamaño del texto. */
@media (max-height: 800px) {
  .escenario {
    padding-bottom: var(--space-4);
  }

  .pantalla {
    gap: var(--space-4);
  }

  .opcion {
    padding: var(--space-5) var(--space-3) var(--space-3);
  }
}