/* ==========================================================================
   Motor SCORM — estilos base
   Ningún color literal: todo sale de las variables que genera brand-tokens.json
   en tokens.css. Cambiar de cliente = cambiar ese archivo.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--marca-primario-oscuro);
  font-family: var(--marca-tipo-cuerpo);
  color: var(--marca-texto);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------- estructura */

/* `.app` es el lienzo neutro que llena la ventana; `.motor` es EL RECUADRO — cabecera,
   escenario y pie son una sola unidad que se escala junta, como un video. Nunca se separan
   en dos elementos escalados por su cuenta: eso es lo que producía las franjas blancas
   descoordinadas entre la barra superior y el lienzo. */
.app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.motor {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--marca-lienzo-ancho);
  /* Lámina + las dos franjas. La cuenta y la rejilla tienen que declarar exactamente las filas
     que hay hijos: cuando la barra superior se retiró y la rejilla siguió pidiendo tres, el pie
     cayó en la fila `1fr` y se estiró a 242 px en móvil. Una fila que nadie ocupa no es inerte. */
  height: calc(var(--marca-barra-superior) + var(--marca-lienzo-alto) + var(--marca-barra-inferior));
  transform-origin: center center;
  display: grid;
  grid-template-rows: var(--marca-barra-superior) 1fr var(--marca-barra-inferior);
  overflow: hidden;
  border-radius: var(--marca-radio-md);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  background: var(--marca-fondo);
}

.marco {
  position: relative;
  overflow: hidden;
  background: var(--marca-fondo);
}

/* En pantalla completa la aplicación ocupa la pantalla y el sobrante se pinta de negro, como
   cualquier reproductor de video. Sin esto el navegador deja el fondo blanco por omisión y las
   bandas laterales se ven como un error de maquetación en vez de como letterboxing. */
.app:fullscreen,
.app:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  background: #000;
}

.escenario {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--marca-fondo);
}

/* En móvil se abandona el recuadro fijo y el contenido fluye en una columna. */
.es-movil .app { overflow-y: auto; }

.es-movil .motor {
  position: static;
  width: 100%;
  height: auto;
  min-height: 100%;
  transform: none !important;
  border-radius: 0;
  box-shadow: none;
  grid-template-rows: auto 1fr auto;
}

.es-movil .marco { position: static; overflow: visible; }

.es-movil .escenario {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 100%;
}

/* --------------------------------------------------------------- barra superior
   La barra blanca original, recuperada por pedido de Pablo (§0at): identidad a la izquierda,
   navegación a la derecha. Abajo se queda la franja oscura de controles.

   El fondo claro es una restricción de marca, no una preferencia: hay imagotipos cuya versión
   positiva (clara) sirve SOLO sobre el color corporativo principal, y sobre cualquier otro
   fondo exigen la negativa (oscura). Cuando el cliente solo entrega esa negativa —el caso que
   originó esta barra—, el fondo tiene que ser claro. Por eso el logo no podía ir en la
   franja oscura y por eso esta barra no puede ser azul. */

.barra-superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--marca-esp-md);
  padding: 0 var(--marca-esp-md);
  background: var(--marca-blanco);
  color: var(--marca-primario);
  border-bottom: 1px solid var(--marca-borde);
}

.barra-identidad {
  display: flex;
  align-items: center;
  gap: var(--marca-esp-sm);
  min-width: 0;
}

/* El manual exige un mínimo de 100 px de ancho y un área de respeto de 1/3 de la altura. */
.barra-logo {
  height: 34px;
  width: auto;
  min-width: 100px;
  object-fit: contain;
  padding: 0 calc(34px / 3);
}

.barra-titulo {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--marca-texto-fuerte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.es-movil .barra-superior { padding: var(--marca-esp-xs) var(--marca-esp-sm); }

/* --------------------------------------------------------------- barra inferior
   El resto del cromo: una franja oscura y delgada, como la del
   Storyline publicado. Antes eran dos barras claras —identidad y navegación arriba, controles
   abajo— y Pablo las definió como anticuadas: dos franjas claras enmarcando la lámina compiten
   con el contenido en vez de desaparecer detrás de él (§0aq).

   El oscuro sale del token `--marca-cromo`, que deriva del rol primario y no es un gris
   literal: un cliente con otra marca obtiene su propio oscuro sin tocar este archivo (§10). */

.barra-inferior {
  display: flex;
  align-items: center;
  gap: var(--marca-esp-md);
  height: var(--marca-barra-inferior);
  padding: 0 var(--marca-esp-sm);
  background: var(--marca-cromo);
  color: var(--marca-cromo-texto);
  border-top: 1px solid var(--marca-cromo-borde);
}

/* En móvil la barra deja de estar topada en alto y las piezas se reparten en filas. El hueco
   baja a `xs`: con el `md` de escritorio, tres filas y dos huecos de 24 px daban una barra de
   212 px sobre una pantalla de 812 — una cuarta parte del alto útil para el cromo. */
.es-movil .barra-inferior {
  height: auto;
  padding: var(--marca-esp-xs) var(--marca-esp-sm);
  flex-wrap: wrap;
  gap: var(--marca-esp-xs);
  justify-content: space-between;
}

.controles { display: flex; align-items: center; gap: var(--marca-esp-xs); flex-shrink: 0; }

/* 36 px de alto en una barra de 48: por debajo de los 44 del objetivo táctil recomendado, y es
   una concesión deliberada al pedido de «delgada». Se compensa en móvil, donde la barra deja de
   estar topada en alto y los controles vuelven a 44 — que es donde el dedo importa de verdad.
   El ANCHO es mínimo, no fijo: los controles con rótulo —«SUBT», «1.25×»— crecen con su texto.
   Con `width: 36px` fijo, «1.25×» se salía de su botón y se pegaba al de al lado. */
.control {
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--marca-radio-sm);
  background: transparent;
  color: var(--marca-cromo-texto);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--marca-mov-entrada) var(--marca-mov-curva),
              color var(--marca-mov-entrada) var(--marca-mov-curva);
}

.control:hover { background: rgba(255, 255, 255, 0.12); color: var(--marca-blanco); }
.control:focus-visible { outline: 3px solid var(--marca-terciario); outline-offset: 2px; }
.control.es-activo { background: var(--marca-terciario); color: var(--marca-blanco); }

/* Los rótulos van más chicos que los glifos: «SUBT» a 15px empujaba la barra. */
.control-subtitulos,
.control-velocidad { font-size: 13px; letter-spacing: 0.02em; }

/* Ancho fijo para la velocidad pese a lo anterior: sin esto la barra entera se corre unos
   píxeles cada vez que el rótulo pasa de «1×» a «1.25×» y vuelve. Cabe el más largo. */
.control-velocidad { min-width: 52px; }

.es-movil .control { min-width: 44px; height: 44px; }

/* --- volumen: botón de silencio + nivel ------------------------------------------------- */

.control-volumen-grupo { display: flex; align-items: center; gap: var(--marca-esp-xs); }

/* `input[type=range]` no ofrece ninguna forma estándar de colorear el tramo recorrido, así que
   el relleno se pinta con un degradado duro sobre el fondo, cortado en `--nivel` (que actualiza
   el reproductor en cada cambio). */
.volumen-desliz {
  -webkit-appearance: none;
  appearance: none;
  width: 78px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right,
              var(--marca-terciario) 0 var(--nivel, 100%),
              rgba(255, 255, 255, 0.18) var(--nivel, 100%) 100%);
  cursor: pointer;
}

.volumen-desliz::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 0;
  background: var(--marca-blanco);
  cursor: pointer;
}

.volumen-desliz::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 0;
  background: var(--marca-blanco);
  cursor: pointer;
}

.volumen-desliz:focus-visible { outline: 3px solid var(--marca-terciario); outline-offset: 4px; }

/* En un teléfono el deslizador de 78px es imposible de afinar con el dedo y además compite por
   un ancho que no sobra: queda solo el botón de silencio. */
.es-movil .volumen-desliz { display: none; }

/* El progreso se queda con el espacio sobrante entre los controles y la navegación. */
.progreso { display: flex; align-items: center; gap: var(--marca-esp-sm); flex: 1 1 auto; min-width: 0; }

.progreso-pista {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.progreso-relleno {
  height: 100%;
  width: 0;
  background: var(--marca-terciario);
  transition: width var(--marca-mov-entrada) var(--marca-mov-curva);
}

.progreso-texto { font-size: 12px; color: var(--marca-cromo-texto); white-space: nowrap; }

/* --------------------------------------------------------------- navegación */

.barra-nav { display: flex; gap: var(--marca-esp-xs); flex-shrink: 0; }

.nav-boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--marca-esp-sm);
  min-height: 44px;               /* objetivo táctil mínimo — acá la barra da lugar de sobra */
  border: 2px solid transparent;
  border-radius: var(--marca-radio-sm);
  background: transparent;
  color: var(--marca-primario);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--marca-mov-entrada) var(--marca-mov-curva),
              color var(--marca-mov-entrada) var(--marca-mov-curva),
              border-color var(--marca-mov-entrada) var(--marca-mov-curva),
              opacity var(--marca-mov-entrada) var(--marca-mov-curva);
}

.nav-boton:hover:not(:disabled) { background: var(--marca-fondo-alt); }
.nav-boton:focus-visible { outline: 3px solid var(--marca-terciario); outline-offset: 2px; }
.nav-boton:disabled { opacity: 0.35; cursor: not-allowed; }

/* «Siguiente» es el botón que esta audiencia tiene que encontrar sin buscarlo, así que en
   reposo ya va delineado —no fundido en la barra como los demás— y al pasar el mouse se pinta
   del PRIMARIO, que es lo que pidió Pablo para darle protagonismo.
   El marco claro se mantiene en el hover a propósito: el primario es un azul muy oscuro y sobre
   una barra oscura su silueta se perdía justo en el momento de destacarla.

   Sobre la barra BLANCA el problema desaparece y el pedido se cumple literal: el relleno
   primario da 14,71:1 contra el blanco, así que el hover se ve solo, sin necesidad de que un
   marco sostenga la forma. Es el mismo azul que antes no servía — lo que cambió es el fondo. */
.nav-siguiente {
  background: var(--marca-fondo-alt);
  color: var(--marca-primario);
}

.nav-siguiente:hover:not(:disabled) {
  background: var(--marca-primario);
  border-color: var(--marca-primario);
  color: var(--marca-blanco);
}

/* Mientras la lámina exige interactuar, el botón pierde el relleno y se confunde con la barra:
   sigue ahí, pero deja de pedir que lo toquen. */
.nav-siguiente.es-bloqueado { background: transparent; }

/* Mientras la lámina esté lista para avanzar, el botón LATE — sin parar, por pedido del
   cliente (§0ar, §0as). El aviso hacía falta porque hasta ahora lo único que ocurría al
   liberarse el avance era que el botón dejaba de estar apagado: demasiado sutil para una
   audiencia de alfabetización digital baja o media.

   No hay clase ni JS detrás. El latido cuelga de `:not(.es-bloqueado)`, o sea del mismo estado
   que ya gobierna si el botón se puede pulsar. La primera versión eran tres pulsos disparados
   por una clase, con guardas para no relanzarlos y para callarlos al pasar el mouse; siendo
   infinito, «listo para avanzar» es un ESTADO y atarlo a la clase que ya lo representa hace
   imposible que los dos se desincronicen.

   Late en 1,6 s y no en 1,1: lo que va a estar siempre en pantalla tiene que respirar más
   lento. Va del reposo al MISMO estado del hover —relleno primario, letra blanca— para que el
   aviso y la invitación a pulsar sean visualmente la misma cosa. El halo acompaña en el rol
   terciario, que es el acento de la marca sobre fondo claro. */
@keyframes latido-siguiente {
  0%, 100% {
    background: var(--marca-fondo-alt);
    color: var(--marca-primario);
    box-shadow: 0 0 0 0 rgba(var(--marca-terciario-rgb), 0);
  }
  50% {
    background: var(--marca-primario);
    color: var(--marca-blanco);
    box-shadow: 0 0 0 5px rgba(var(--marca-terciario-rgb), 0.4);
  }
}

.nav-siguiente:not(.es-bloqueado):not(:disabled) {
  animation: latido-siguiente 1.6s var(--marca-mov-curva) infinite;
}

/* Con el mouse encima manda el hover: el latido dejaría el relleno parpadeando bajo el cursor,
   que se lee como un error y no como una invitación. */
.nav-siguiente:hover { animation: none; }

/* §10: `prefers-reduced-motion` se respeta. Sin pulso el aviso tiene que seguir existiendo, así
   que el botón se queda con el marco blanco pleno — el destino del latido, sin el movimiento. */
@media (prefers-reduced-motion: reduce) {
  .nav-siguiente:not(.es-bloqueado):not(:disabled) {
    animation: none;
    background: var(--marca-primario);
    color: var(--marca-blanco);
  }
}

/* Cuando la lámina trae su propio botón de avance, el de la barra se retira. Dos botones que
   hacen exactamente lo mismo se estorban, y con el latido encima quedaban los dos pidiendo que
   los toquen — con el de la barra ganando protagonismo justo donde el diseño quería el otro.
   Se va solo «Siguiente»: «Anterior» sigue haciendo falta para volver (§0bg). */
.nav-con-cta .nav-siguiente { display: none; }

/* En la familia con cromo de lámina se va la navegación ENTERA, no solo «Siguiente»: el
   original no dibuja los círculos en portada ni en cierre —esas láminas tienen su propio
   botón— y dejar el de «Anterior» suelto en una esquina se lee como un resto. */
.nav-con-cta .es-cromo-lamina .barra-nav { visibility: hidden; }

/* ---- modo `reproductor.cromo: lamina` (familia Syncore) --------------------------------
   La marca vive DENTRO de cada lámina, así que la barra superior no existe: el motor queda
   en lámina + barra de controles, y la navegación son los círculos naranjos flotantes del
   diseño original, abajo a la derecha. Las clases nav-anterior/nav-siguiente son las MISMAS:
   todo el gating y los bloques (§0aw) siguen funcionando sin enterarse del modo. */
.motor.es-cromo-lamina {
  height: calc(var(--marca-lienzo-alto) + var(--marca-barra-inferior));
  grid-template-rows: 1fr var(--marca-barra-inferior);
}

.nav-flotante {
  position: absolute;
  right: 40px;
  bottom: 24px;
  display: flex;
  gap: 14px;
  z-index: 6;
}

.nav-flotante .nav-boton {
  width: 54px;
  height: 54px;
  min-height: 54px;
  padding: 0;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--marca-secundario);
  color: var(--marca-blanco);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* Solo la flecha a la vista; el texto queda para lectores de pantalla. */
.nav-flotante .nav-boton span:not(.nav-flecha) { position: absolute; left: -9999px; }
.nav-flotante .nav-flecha { font-size: 20px; line-height: 1; }

.nav-flotante .nav-boton:hover:not(:disabled) { background: var(--marca-secundario-oscuro); }
.nav-flotante .nav-boton:disabled { opacity: 0.35; }

/* Bloqueado: el círculo se hunde (translúcido) en vez de vaciarse — sobre una lámina con
   fondo variable el marco transparente de la barra no se leería. */
.nav-flotante .nav-siguiente.es-bloqueado {
  background: rgba(var(--marca-secundario-rgb), 0.35);
  animation: none;
}

/* El latido en modo círculo no puede animar fondos claros (no hay barra detrás): pulsa el
   halo y el tamaño, mismo estado (`:not(.es-bloqueado)`) y mismo ritmo que §0as. */
@keyframes latido-flotante {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--marca-secundario-rgb), 0.5); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(var(--marca-secundario-rgb), 0); }
}

.nav-flotante .nav-siguiente:not(.es-bloqueado):not(:disabled) {
  animation: latido-flotante 1.6s var(--marca-mov-curva) infinite;
  background: var(--marca-secundario);
  color: var(--marca-blanco);
}

.nav-flotante .nav-siguiente:hover { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-flotante .nav-siguiente:not(.es-bloqueado):not(:disabled) {
    animation: none;
    box-shadow: 0 0 0 4px rgba(var(--marca-secundario-rgb), 0.4);
  }
}

/* Dentro de un bloque de ejercicio sin resolver la navegación desaparece: se avanza acertando
   y no hay a dónde volver a mitad del ejercicio (§0aw). Es `visibility` y no `display: none`
   para que la barra no cambie de alto al entrar y salir del bloque — el cromo tiene que
   quedarse quieto mientras el alumno trabaja. */
.nav-en-ejercicio .barra-nav { visibility: hidden; }

/* Mientras la capa de retroalimentación está abierta, «Siguiente» sobra: el único camino hacia
   adelante —o hacia el reintento— es el botón de la propia capa, y tenerlo latiendo arriba a la
   vez es un segundo llamado a la misma acción (§0bh). Detectado en CSS puro con `:has()`, sin
   ningún estado nuevo en JS: mismo principio que el latido infinito de §0as — si el DOM ya sabe
   que el modal está abierto, no hace falta que el reproductor lo repita en una clase.

   La capa de `botones` (familia Syncore) es el mismo caso y va en la misma regla: mientras
   está abierta, el único botón en pantalla tiene que ser su CERRAR. Con los círculos de
   navegación encima, el alumno tiene tres botones para una sola acción posible. */
.motor:has(.capa-feedback:not(.es-oculto)) .barra-nav,
.motor:has(.botones-capa:not(.es-cerrada)) .barra-nav { visibility: hidden; }

.nav-flecha { font-size: 20px; line-height: 1; }

/* --------------------------------------------------------------- pantallas estrechas */

@media (max-width: 767px) {
  .barra-titulo { display: none; }        /* el logo ya identifica el curso */
  /* Con el ancho de un teléfono los rótulos «Anterior»/«Siguiente» no entran junto al logo:
     quedan las flechas, con el texto accesible fuera de pantalla para el lector de voz. */
  .nav-boton span:not(.nav-flecha) { position: absolute; left: -9999px; }
  .nav-boton { padding: 0 var(--marca-esp-xs); min-width: 48px; justify-content: center; }
  .barra-inferior { flex-wrap: wrap; }
  .progreso { flex-basis: 100%; order: 3; }
}

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

.titulo-seccion {
  margin: 0 0 var(--marca-esp-sm);
  font-size: var(--marca-h2);
  line-height: 1.2;
  font-weight: 700;
  color: var(--marca-primario);
}

.texto {
  margin: 0 0 var(--marca-esp-sm);
  font-size: var(--marca-cuerpo);
  line-height: 1.5;
  color: var(--marca-texto);
}

.texto-lg { font-size: var(--marca-cuerpo-lg); }
.texto:last-child { margin-bottom: 0; }

.instruccion {
  margin: 0 0 var(--marca-esp-md);
  font-size: var(--marca-cuerpo);
  color: var(--marca-texto-fuerte);
  font-style: italic;
}

/* --------------------------------------------------------------- botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--marca-esp-lg);
  border: 2px solid transparent;
  border-radius: var(--marca-radio-sm);
  font-family: inherit;
  font-size: var(--marca-boton);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--marca-mov-entrada) var(--marca-mov-curva),
              transform var(--marca-mov-entrada) var(--marca-mov-curva);
}

.boton:focus-visible { outline: 3px solid var(--marca-terciario); outline-offset: 3px; }
.boton:active { transform: translateY(1px); }

.boton-primario { background: var(--marca-primario); color: var(--marca-blanco); }
.boton-primario:hover { background: var(--marca-primario-claro); }
.boton-primario:disabled { background: var(--marca-borde); color: var(--marca-texto); cursor: not-allowed; }

.boton-secundario { background: var(--marca-blanco); color: var(--marca-primario); border-color: var(--marca-primario); }
.boton-secundario:hover { background: var(--marca-fondo-alt); }

/* --------------------------------------------------------------- visibilidad y entrada */

.es-oculto { display: none !important; }

.es-entrando { animation: entrar var(--marca-mov-entrada) var(--marca-mov-curva) both; }

@keyframes entrar {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .es-entrando { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------- subtítulos */

/* El cuerpo de letra sale de `--tam-subtitulo`, que el botón «A / A+ / A++» va cambiando.
   El relleno se expresa en `em` para que la caja crezca junto con la letra en vez de
   apretarla, y el ancho máximo sube con el tamaño para no partir el texto en muchas líneas. */
/* Se centra con `left/right: 0` + `margin: auto` y NO con `left:50% + translateX(-50%)`:
   con esa técnica el ancho disponible para ajustar la caja es solo lo que queda a la derecha
   del 50 %, así que el texto se partía en más líneas de las necesarias y `max-width` nunca
   llegaba a aplicarse. */
.subtitulos {
  --tam-subtitulo: 18px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  width: fit-content;
  margin-inline: auto;
  max-width: 88%;
  padding: 0.55em 1em;
  border-radius: var(--marca-radio-sm);
  background: rgba(0, 0, 0, 0.82);
  color: var(--marca-blanco);
  font-size: var(--tam-subtitulo);
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
  z-index: 20;
}

/* --------------------------------------------------------------- modal de reanudación */

.modal-velo {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(var(--marca-primario-rgb), 0.72);
  z-index: 100;
}

.modal {
  width: min(460px, 90vw);
  padding: var(--marca-esp-lg);
  border-radius: var(--marca-radio-md);
  background: var(--marca-blanco);
  text-align: center;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
}

.modal-titulo { margin: 0 0 var(--marca-esp-sm); font-size: var(--marca-h3); color: var(--marca-primario); }
.modal-texto { margin: 0 0 var(--marca-esp-md); font-size: var(--marca-cuerpo); color: var(--marca-texto); }
.modal-acciones { display: flex; gap: var(--marca-esp-sm); justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------- pantalla de inicio (§0bh)
   Cubre `.motor` entero —no `.raiz`, como el modal de reanudación— para verse como una lámina
   más del curso y no como un aviso flotando encima. Blanca, con el logo del cliente: mismo
   tratamiento que la barra superior, y por el mismo motivo de marca (§0at): el imagotipo
   disponible es la versión oscura, así que necesita un fondo claro para leerse. */

.pantalla-inicio {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  gap: var(--marca-esp-lg);
  background: var(--marca-blanco);
}

.pantalla-inicio-logo {
  max-width: 45%;
  max-height: 30%;
  object-fit: contain;
}

.pantalla-inicio-boton {
  display: inline-flex;
  align-items: center;
  gap: var(--marca-esp-sm);
  padding: var(--marca-esp-md) var(--marca-esp-xl);
  font-size: var(--marca-cuerpo-lg);
}

.pantalla-inicio-glifo { font-size: 1.3em; line-height: 1; }

.es-movil .pantalla-inicio-logo { max-width: 70%; max-height: 22%; }