/* Sistema visual de los webinars de TDX.
 *
 * Hereda tipografía y degradado de la landing —Outfit, IBM Plex Mono y el
 * mismo `--grad`— para que las dos superficies se lean como la misma marca.
 *
 * Lo único nuevo es la profundidad: el fondo baja de #1E2029 a #0B0F1A. Una
 * sala no es una página, y esa profundidad ya está en el arte de marca. Las
 * líneas llevan sesgo azul a propósito: en el arte de TDX no hay un solo gris
 * neutro, y un gris puro aquí se lee como descuido.
 *
 * Compromiso deliberado con un único mundo oscuro. No hay tema claro, así que
 * todo color se pinta explícito y nada depende de lo que traiga el navegador.
 */

:root{
  --noche:#0B0F1A;
  --noche-2:#0E1420;
  --panel:#141A28;
  --panel-2:#1A2233;
  --linea:#232C42;
  --linea-2:#2E3950;

  --texto:#EDEFF5;
  --suave:#8E97AE;
  --tenue:#5D677E;

  --azul:#5B9BF8;
  --violeta:#A98CF0;
  --rosa:#F06FB0;
  --coral:#FF8A6B;
  --vivo:#FF3D9E;
  --ok:#4FC08D;
  --alerta:#FFB454;

  --grad:linear-gradient(100deg,#5B9BF8 0%,#A98CF0 32%,#F06FB0 62%,#FF8A6B 100%);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--noche);color:var(--texto);
  font-family:'Outfit',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3{font-weight:800;letter-spacing:-.025em;text-wrap:balance;margin:0}
.g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace}

/* Cifras tabulares en todo lo que cuenta o cronometra: sin esto, un reloj
   baila de ancho cada vez que cambia un dígito y el ojo lo persigue. */
.dato{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}

.marca-logo{width:96px;opacity:.95}

/* El botón de marca. `min-height:52px` no es estético: por debajo de 48 px un
   dedo falla, y el 86% del tráfico entra por móvil. */
.btn{
  display:block;width:100%;border:none;border-radius:999px;cursor:pointer;
  background:var(--grad);color:#0B0F1A;
  font-family:'Outfit',sans-serif;font-weight:800;font-size:1rem;letter-spacing:.01em;
  padding:15px;min-height:52px;text-align:center;text-decoration:none;
  transition:filter .15s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.55;cursor:default}
.btn-fantasma{
  background:none;border:1px solid var(--linea-2);color:var(--texto);
  font-weight:500;font-size:.9rem;
}

:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* El canvas de la malla.
   Las dimensiones son explícitas a propósito: un canvas posicionado con
   `inset:0` NO se estira, porque es un elemento reemplazado y ahí `width:auto`
   significa «usa tu tamaño intrínseco» — 300×150 px. Sin estas dos líneas la
   onda se dibuja del tamaño de un sello en la esquina. */
.malla{width:100%;height:100%;display:block}

/* `hidden` tiene que ganar siempre.
   El atributo vale `display:none` con especificidad de selector de tipo, así
   que cualquier clase que declare un `display` —`.btn` es `inline-flex`— lo
   anula en silencio y el elemento se ve igual. Ya pasó con el botón de la
   sala en la pantalla de comprobación. */
[hidden]{display:none!important}