/* ==========================================================================
   Pantallas del taller · estética corporativa Trade N'Global (TENTATIVO)
   Paleta y tipografías tomadas de la web del evento. Un color de bloque por
   pantalla; el texto siempre en negro.
   ========================================================================== */
:root {
  --crema: #FFFCE2;            /* crema y negro exactos de los recursos del evento (08_Recursos TNG 2026) */
  --negro: #1D1D1B;
  --gris: #D4D4D4;
  --lavanda: #A0B0DC;
  --bloqueo: #EF8191;
  --recurso: #6B8FAF;
  --proximo_paso: #7ABBA9;
  /* Tonos oscurecidos del mismo matiz, solo para texto de color sobre crema (contraste 5:1).
     Los colores de arriba siguen siendo los de barras, nube, citas y formas. */
  --lavanda-t: #536AAA;
  --bloqueo-t: #C92F46;
  --recurso-t: #4D6F8E;
  --proximo_paso-t: #3D7666;
  /* Versión clara (50 % del color sobre blanco): fondo de cualquier caja con texto encima.
     Negro sobre ellas: 9,7 a 11,8:1. El color pleno queda para formas, barras e insignias. */
  --lavanda-claro: #D0D8EE;
  --bloqueo-claro: #F7C0C8;
  --recurso-claro: #B5C7D7;
  --proximo_paso-claro: #BCDDD4;
  --c: var(--lavanda);              /* color activo de la pantalla */
  --cc: var(--lavanda-claro);       /* versión clara del color activo (cajas con texto) */
  --ct: var(--lavanda-t);           /* color de texto activo de la pantalla */
  --display: 'Bebas Neue', 'Barlow Condensed', sans-serif;
  --cond: 'Barlow Condensed', sans-serif;
  --meta: 'Montserrat', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; }
body { color: var(--negro); -webkit-font-smoothing: antialiased; }

#stage {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
  background: var(--crema);
  overflow: hidden;
}
#hint {
  position: fixed; right: 16px; bottom: 12px; font: 500 12px var(--meta);
  color: #888; letter-spacing: .08em; text-transform: uppercase; opacity: .0;
  transition: opacity .3s; pointer-events: none;
}
body:hover #hint { opacity: .8; }
body.final #hint { display: none; }

.screen { position: absolute; inset: 0; }

/* ---------- Elementos comunes ---------- */
.meta {
  font: 500 22px/1 var(--meta); letter-spacing: .14em; text-transform: uppercase;
}
.footer {
  position: absolute; left: 120px; right: 120px; bottom: 56px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 2px solid var(--negro); padding-top: 20px;
}
.footer .meta { font-size: 18px; }
.footer .clock { font-variant-numeric: tabular-nums; }

/* Formas grandes y planas como en la web del evento */
.shape { position: absolute; pointer-events: none; }
/* Forma del bloque (recursos del evento: pajarita, cuadrados, paréntesis) saliendo por la esquina
   superior derecha, con el icono en una insignia negra de 12 puntas como los iconos del evento */
.bloque .forma { position: absolute; right: -90px; top: -110px; width: 520px; height: 520px; object-fit: contain; }
.insignia { position: absolute; left: 1675px; top: 75px; width: 150px; height: 150px; display: grid; place-items: center; }
.insignia svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.insignia img { position: relative; width: 74px; height: 74px; filter: brightness(0) invert(1); }
/* Sin forma en config.js: círculo de color con el icono en negro (versión anterior) */
.bloque .icono { position: absolute; left: 1680px; top: 70px; width: 130px; height: 130px; }

/* Logo del evento: esquina superior izquierda, alineado con la retícula (x = 120) */
.logo { position: absolute; left: 120px; top: 40px; height: 58px; width: auto; }

/* ---------- Portada ---------- */
.portada .ante { position: absolute; left: 120px; top: 140px; }
.portada h1 {
  position: absolute; left: 112px; top: 188px;
  font: 400 250px/0.86 var(--display); text-transform: uppercase; letter-spacing: -1px;
}
.portada .taller { position: absolute; left: 120px; top: 652px; font: 700 48px/1.1 var(--cond); text-transform: uppercase; color: var(--ct); }
.metrics { position: absolute; left: 120px; top: 768px; display: flex; gap: 72px; }
.metric .num { font: 400 150px/0.9 var(--display); font-variant-numeric: tabular-nums; }
.metric .lab { margin-top: 10px; }

/* ---------- Pantalla de bloque ---------- */
.bloque .head { position: absolute; left: 120px; top: 126px; display: flex; align-items: baseline; gap: 22px; }
.bloque .head .num { font: 400 128px/0.85 var(--display); }
.bloque .head .name { font: 400 128px/0.85 var(--display); text-transform: uppercase; }
.bloque .pregunta { position: absolute; left: 124px; top: 250px; font: 700 42px/1.1 var(--cond); text-transform: uppercase; letter-spacing: .02em; color: var(--ct); }
.bloque .sintesis {
  position: absolute; left: 120px; top: 314px; width: 1060px;
  font: 600 62px/1.04 var(--cond); text-transform: uppercase; letter-spacing: .01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Nota de los porcentajes, entre la síntesis y los temas */
.nota-temas { position: absolute; left: 120px; top: 440px; font-size: 16px; color: #5C5A52; }
.temas { position: absolute; left: 120px; top: 468px; width: 1060px; }
.tema { display: grid; grid-template-columns: minmax(0, 1fr) 176px; column-gap: 24px; align-items: center; margin-bottom: 4px; }
.tema:last-child { margin-bottom: 0; }
/* Si un tema o la lista de mesas no cabe en una línea, app.js reduce el cuerpo */
.tema .label { font: 700 46px/1 var(--cond); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tema .mesas { font: 500 20px/1 var(--meta); letter-spacing: .1em; margin-top: 6px; white-space: nowrap; overflow: hidden; }
.tema .val { font: 400 104px/0.8 var(--display); text-align: right; font-variant-numeric: tabular-nums; grid-row: span 2; }
.tema .track {
  grid-column: 1; height: 18px; margin-top: 6px;
  border: 3px solid var(--negro); border-radius: 12px; background: var(--crema); overflow: hidden;
}
.tema .bar { height: 100%; width: 0; background: var(--c); border-right: 3px solid var(--negro); border-radius: 0 9px 9px 0; }
.tema .bar.full { border-right: 0; }

/* Cita: caja con contorno negro y esquinas redondeadas, como la caja de "Añade la fecha" */
.cita {
  position: absolute; right: 120px; top: 470px; width: 580px;
  background: var(--cc); border: 5px solid var(--negro); border-radius: 30px;
  padding: 44px 44px 36px;
}
.cita .q { font: 400 120px/0.6 var(--display); height: 46px; display: block; }
.cita .texto { font: 500 44px/1.12 var(--cond); }
.cita .autor { margin-top: 24px; font-size: 18px; }
/* Segunda cita: solo contorno, sin color, para no recargar */
.cita.secundaria { background: transparent; border-width: 3px; padding: 30px 36px 26px; }
.cita.secundaria .q { font-size: 90px; height: 34px; }
.cita.secundaria .texto { font: 500 34px/1.12 var(--cond); }
.cita.secundaria .autor { margin-top: 16px; font-size: 16px; }
.debate {
  position: absolute; right: 120px; width: 580px;
  border-top: 2px solid var(--negro); padding-top: 16px;
}
.debate .meta { font-size: 16px; margin-bottom: 10px; }
.debate .txt { font: 700 28px/1.12 var(--cond); text-transform: uppercase; letter-spacing: .01em; }
.debate .vs { font: 400 28px/1 var(--display); margin: 0 10px; }

/* ---------- Nube de palabras ---------- */
.nubescreen .head { position: absolute; left: 120px; top: 126px; }
.nubescreen .head .name { font: 400 128px/0.85 var(--display); text-transform: uppercase; }
.nubescreen .pregunta { position: absolute; left: 124px; top: 250px; font: 700 42px/1.1 var(--cond); text-transform: uppercase; letter-spacing: .02em; color: var(--ct); }
/* .pw posiciona cada palabra y la hace flotar; .palabra dentro lleva la caja y la entrada */
.pw { position: absolute; }
.palabra {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); line-height: 1; white-space: nowrap; color: var(--negro);
}
.palabra.una { color: #5C5A52; }                 /* dichas en una sola mesa: gris (contraste 6:1 sobre crema) */
.palabra.top { background: var(--cc); border: 5px solid var(--negro); border-radius: 30px; }
/* Cursor de los recursos del evento (etiqueta "TN'G 2025", botón "Inscríbete") señalando la palabra más repetida */
.palabra.top .cursor { position: absolute; right: -46px; bottom: -64px; width: 74px; height: auto; transform: rotate(-14deg); }
.nubescreen .leyenda { position: absolute; right: 120px; top: 256px; display: flex; align-items: baseline; gap: 14px; font-size: 20px; }
.nubescreen .leyenda .ej { font: 400 30px/1 var(--display); letter-spacing: 0; }
.nubescreen .leyenda .ej.grande { font-size: 52px; }
.nubescreen .leyenda .ej + span { margin-right: 22px; }
/* Nube con movimiento: las palabras salen del centro, se colocan y quedan flotando.
   Posiciones fijas (sin azar): el PNG siempre sale igual. */
.nubescreen .palabra.anim { transform: translate(var(--fx), var(--fy)) scale(.2); }
.play .nubescreen .palabra.anim { animation: estalla 1.4s cubic-bezier(.16,.9,.3,1) calc(var(--d, 0) * 1s) forwards, flotaY var(--ty) ease-in-out var(--dy) infinite alternate; }
@keyframes estalla { 35% { opacity: 1; } to { opacity: 1; transform: none; } }
.play .pw { animation: flotaX var(--tx) ease-in-out var(--dx) infinite alternate; }
.play .pw.top { animation: flotaX var(--tx) ease-in-out var(--dx) infinite alternate, latido 3.2s ease-in-out 2.4s infinite alternate; }
@keyframes flotaX { from { translate: calc(var(--ax) * -1) 0; } to { translate: var(--ax) 0; } }
@keyframes flotaY { from { translate: 0 calc(var(--ay) * -1); } to { translate: 0 var(--ay); } }
@keyframes latido { from { scale: 1; } to { scale: 1.045; } }

/* Estilos alternativos de la pregunta (config.js: estiloPregunta) */
#stage.pregunta-etiqueta .pregunta, #stage.pregunta-etiqueta .portada .taller {
  color: var(--negro); background: var(--cc); border: 3px solid var(--negro); border-radius: 999px; padding: 4px 22px 2px; left: 112px;
}

/* ---------- Animación de entrada ----------
   Sobria y precisa: cada elemento aparece en orden (--d = retraso en s). */
.anim { opacity: 0; transform: translateY(18px); }
.play .anim { animation: in .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes in { to { opacity: 1; transform: none; } }
.play .bar { transition: width 1.1s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0) * 1s); }
.shape.anim { transform: scale(.85); }
.play .shape.anim { animation: shape 1.2s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes shape { to { opacity: 1; transform: none; } }
/* Línea a línea para titulares */
/* padding arriba para que la máscara no corte tildes en mayúscula (Ó, Á...) */
.reveal { display: block; overflow: hidden; padding-top: 60px; margin-top: -60px; }
.reveal > span { display: block; transform: translateY(105%); }
.play .reveal > span { animation: up .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes up { to { transform: none; } }

/* Modo estado final (PNG de respaldo): todo visible, sin animación */
.final .anim, .final .reveal > span { opacity: 1 !important; transform: none !important; animation: none !important; }
.final .bar { transition: none !important; }
.final .pw, .final .palabra { animation: none !important; translate: none !important; scale: none !important; }