/* ============================================================
   UNA SECCIÓN, UNA PANTALLA (8 oct 2026, pedido por el COO)
   ============================================================
   En ordenador, cada sección marcada con .pantalla ocupa exactamente la
   pantalla que queda bajo la navegación, como en nephyx.lat. Se activa por
   página con <html class="pantallas"> y este archivo + assets/pantalla.js
   (que calcula --u en el <head>). La regla y su porqué, en /muestra («3a»)
   y en la skill diseno-trufas.

   CÓMO: LA PÁGINA ENTERA ES UN LIENZO QUE SE ESCALA, NO MEDIDAS A OJO.
   Todo se compone para una ventana de 1440 × 720 y el <body> se escala con
   `zoom` (--u) para caber en la real: navegación, secciones y pie a la vez,
   así que todos los bordes siguen en la misma vertical. `zoom` y no
   `transform` porque reparte el espacio de verdad y el texto sigue nítido.

   POR QUÉ 2:1 Y NO 1440 × 900. Una VENTANA de navegador es mucho más
   apaisada que la pantalla: pestañas, direcciones y la barra de Windows se
   comen el alto, y en una pantalla de 1920 × 1080 a la página le quedan
   ~1910 × 915. Con un lienzo de 1,6:1 mandaba el alto, la escala se quedaba
   en ~1 y sobraban 450 px a los lados.

   Las alturas se dividen entre --u porque `zoom` también multiplica las
   unidades de la ventana: 100svh / --u, ya escalado, vuelve a ser la
   pantalla. Cada .pantalla mide la pantalla menos la navegación (un lienzo
   de 1440 × 651), con el contenido centrado en vertical. La primera,
   .pantalla-primera, resta además la barra amarilla si la página la tiene
   (--pantalla-resta, que una página puede ampliar: la portada suma su
   cinta).

   Dentro, todo es fijo: los tokens que dependen del ancho de la ventana se
   congelan en su valor a 1440 px, y el rem en 16 px. La composición es la
   misma en todas partes y solo cambia la escala: la jerarquía se mantiene.
   Si una sección no cabe en sus 651 px, se recompone usando el ancho (en la
   hoja de su página), no se encoge.

   Solo desde 1024 px de ancho y en pantalla (no al imprimir). En móvil y
   tablet todo fluye como siempre. Si la ventana es tan baja que ni al 0,7
   cabe, la sección crece (min-height) en vez de cortar. Lo que no es
   .pantalla (Eventos de la portada, documentos largos…) fluye, pero a la
   misma escala, alineado con lo demás. */
@media screen and (min-width:1024px){
  html.pantallas{
    /* EL rem SE FIJA EN 16 px (decisión del COO, 8 oct 2026). Con el
       tamaño de fuente del navegador en «Grande» (20 px) la página salía un
       25 % más grande en ese perfil y mezclada con lo que va en px. Se
       ignora a sabiendas, como hacen Google o Instagram. El zoom del
       navegador (Ctrl +) sigue funcionando. */
    font-size:16px;
    --wrap:1280px;                              /* 80 px de margen en el lienzo */
    --tipo-hero:6.4rem;--tipo-titulo:4.75rem;   /* congelados a 1440 px */
    --tipo-cifra:5.6rem;--tipo-subtitulo:2.625rem;
    /* El título de evento, un 10 % por debajo de --tipo-subtitulo sin
       cambiar de nivel: a 42 px los títulos largos se partían en dos
       líneas. Lo comparten la tarjeta y el panel «Próximo evento». */
    --titulo-evento:calc(var(--tipo-subtitulo) * .9);
    --alto-nav:calc(var(--nav-h) + 1px);        /* 68 + su borde */
    --alto-barra:0px;
  }
  /* LA ESCALA COMPACTA EN EL LIENZO (10 oct 2026, toda la web pública).
     El subtítulo se congela en su tope compacto (30) y el título de evento
     vuelve a ser el subtítulo entero: con 30 ya no se parte ni compite con
     el h2. La página lleva además data-u-max (pantalla.js) para que en un
     monitor grande no se agrande tanto; los TITULARES se multiplican por
     lo que el tope les quita (--u-crudo / --u) y miden lo mismo que sin él.
     Encoge lo pequeño, no lo grande. */
  html.pantallas.escala-compacta{
    --tipo-subtitulo:1.875rem;
    --titulo-evento:var(--tipo-subtitulo);
    --tipo-hero:calc(6.4rem * var(--u-crudo, 1) / var(--u, 1));
    --tipo-titulo:calc(4.75rem * var(--u-crudo, 1) / var(--u, 1));
    --tipo-cifra:calc(5.6rem * var(--u-crudo, 1) / var(--u, 1));
  }
  html.pantallas:has(.livebar){--alto-barra:38px}  /* .livebar: un renglón */
  html.pantallas body{zoom:var(--u, 1)}

  html.pantallas .pantalla{
    --pantalla-resta:0px;
    /* En columna: si una sección tiene más de un .wrap (el inicio de
       esports lleva su franja de WhatsApp debajo), van uno bajo otro. El
       relleno va en la sección y no en cada .wrap, por lo mismo. */
    display:flex;flex-direction:column;justify-content:center;
    padding-block:2.5rem;          /* 40 · relleno arriba y abajo del lienzo */
    box-sizing:border-box;
    min-height:calc(100svh / var(--u, 1) - var(--alto-nav) - var(--pantalla-resta));
    /* Al saltar por ancla, la sección aterriza justo bajo la navegación. */
    scroll-margin-top:var(--alto-nav);
  }
  html.pantallas .pantalla-primera{--pantalla-resta:var(--alto-barra)}
  /* Una sección que se rellena por JS y se queda vacía (sin datos) no
     ocupa una pantalla de nada. */
  html.pantallas .pantalla:not(:has(> .wrap)){min-height:0}
  html.pantallas .pantalla > .wrap{
    width:100%;
    --esp-cabecera:2.5rem;         /* 40 · cabecera → contenido */
    --esp-bloque:2.75rem;          /* 44 · antes del cierre */
  }
}