/* ===========================================================
   Aula virtual de la Academia de Leidy (aula.html)
   -----------------------------------------------------------
   Pagina privada. Los tokens (--apx-*, --font-*, --ease) vienen de
   styles/main.css; aqui solo lo propio del aula.

   El aura de Leidy: fondos blancos, tinta #2C1810, negro cafe #17110E,
   rosa esmalte #B97A6E / #8C5549, titulos #A0645A, rosado sobre oscuro
   #D6B39A y crema #F3EAE0. Botones en negro cafe, como toda la web
   publica.

   Contrastes (minimo legible 4,5:1; letra grande 3:1):
   - Texto #5A4A41 sobre blanco: 8,6. Ayudas #7A6A61: 5,6.
   - Etiquetas #8C5549 sobre blanco: 5,9. Titulos #A0645A (solo grande): 4,4.
   - Sobre negro cafe: crema #F3EAE0 15,7; #CBBCAE 10; #D6B39A 9,6.
   - Error #B3261E sobre blanco: 6,5.
   - Nude #D9A294 / #E8B7AB (numeros del temario y numerales del libro):
     solo adorno, con aria-hidden; nunca texto que haya que leer.
   =========================================================== */

.aula-pagina {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--apx-texto);
  /* main.css deja 80 px abajo en el movil para la barra de Agendar, que
     aqui no hay. */
  padding-bottom: 0;
  /* Sin anclaje de scroll: al desplegar un apartado, scripts/aula.js deja
     quieta la cabecera pulsada; el anclaje del navegador la moveria otra vez. */
  overflow-anchor: none;
}
/* hidden manda siempre, aunque la pieza tenga su propio display. */
.aula-pagina [hidden] { display: none !important; }

/* Saltar al contenido: solo aparece con el teclado. */
.aula-saltar {
  position: absolute;
  left: 16px; top: -120px;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: #17110E;
  color: #F3EAE0;
  font-size: 0.85rem; font-weight: 600;
}
.aula-saltar:focus { top: 12px; }

/* ---------- Cabecera minima ---------- */
.aula-cabecera {
  background: #fff;
  border-bottom: 1px solid rgba(44, 24, 16, 0.08);
}
.aula-cabecera__dentro {
  width: min(1100px, 100% - 32px);
  min-height: 72px;
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.aula-cabecera__marca {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--apx-acento-oscuro);
}

/* ---------- Cuerpo ---------- */
.aula-main {
  flex: 1 0 auto;
  width: min(34rem, 100% - 32px);
  margin-inline: auto;
  padding: clamp(2.4rem, 7vw, 4.2rem) 0 clamp(3.2rem, 8vw, 5.5rem);
}
.aula-main:focus { outline: none; }
.aula-pagina[data-paso="dentro"] .aula-main { width: min(58rem, 100% - 32px); }

.aula-kicker {
  display: inline-flex; align-items: center; gap: 0.85rem;
  margin: 0 0 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--apx-acento-oscuro);
}

.aula-intro {
  text-align: center;
  margin-bottom: clamp(2.6rem, 7vw, 3.4rem);
}
.aula-titulo {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(3rem, 12vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--apx-tinta);
}
.aula-titulo em {
  font-style: italic;
  color: var(--apx-acento-titulo);
}
.aula-lema {
  margin: 1rem 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.06rem;
  color: var(--apx-texto);
}
/* Dentro, el titulo del aula se queda discreto: manda el saludo. */
.aula-pagina[data-paso="dentro"] .aula-intro { margin-bottom: clamp(1.8rem, 5vw, 2.4rem); }
.aula-pagina[data-paso="dentro"] .aula-intro .aula-kicker { margin-bottom: 0.7rem; }
.aula-pagina[data-paso="dentro"] .aula-titulo { font-size: clamp(1.9rem, 6vw, 2.4rem); }
.aula-pagina[data-paso="dentro"] .aula-lema { display: none; }

/* ---------- Cargando ---------- */
.aula-cargando {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  padding: 2.5rem 0;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--apx-acento-oscuro);
}
.aula-cargando__punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--apx-acento);
  animation: aula-late 1.1s ease-in-out infinite;
}
@keyframes aula-late {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* ---------- Pasos ---------- */
.aula-paso { animation: aula-entra 0.6s var(--ease) both; }
@keyframes aula-entra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* La tarjeta: como la invitacion del formulario del curso, con doble filo
   y el sello de Leidy arriba. */
.aula-tarjeta {
  position: relative;
  margin-top: 30px; /* sitio para el sello, que sobresale */
  padding: 3.1rem clamp(1.4rem, 6vw, 2.9rem) clamp(1.9rem, 5vw, 2.7rem);
  border: 1px solid rgba(44, 24, 16, 0.08);
  border-radius: 3px;
  background: #fff;
  box-shadow:
    0 44px 80px -44px rgba(44, 24, 16, 0.42),
    0 2px 12px rgba(44, 24, 16, 0.04);
  text-align: center;
}
.aula-tarjeta::before {
  content: '';
  position: absolute; inset: 10px;
  border: 1px solid var(--apx-linea);
  pointer-events: none;
}
.aula-sello {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #17110E;
  color: #D6B39A;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.55rem;
  line-height: 1;
  box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--apx-linea), 0 12px 26px -10px rgba(23, 17, 14, 0.6);
}

.aula-tarjeta h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 6.5vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--apx-tinta);
}
/* Titulos que reciben el foco al cambiar de paso: no son botones, sin anillo. */
.aula-pagina h2[tabindex="-1"]:focus { outline: none; }

.aula-sub {
  max-width: 25rem;
  margin: 0.65rem auto 1.9rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--apx-texto);
}

/* Aviso tranquilo ("Has salido de tu aula"). Vacio no ocupa sitio, pero
   sigue en la pagina para que el lector de pantalla lo anuncie al llenarse. */
.aula-aviso {
  margin: -0.4rem 0 1.6rem;
  padding: 0.8rem 1rem;
  border-left: 2px solid var(--apx-acento-oscuro);
  background: rgba(185, 122, 110, 0.08);
  text-align: left;
  font-size: 0.88rem; line-height: 1.55;
  color: var(--apx-tinta);
}
.aula-aviso:empty { margin: 0; padding: 0; border: 0; }

/* ---------- Casillas ---------- */
.aula-campo {
  margin-bottom: 1.5rem;
  text-align: left;
}
.aula-campo label {
  display: block;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--apx-acento-oscuro);
}
/* Una sola linea, sin caja: lo que llevan las firmas de lujo. */
.aula-campo input {
  width: 100%;
  padding: 0.75rem 0 0.6rem;
  border: 0;
  border-bottom: 1px solid rgba(44, 24, 16, 0.3);
  border-radius: 0;
  background: transparent;
  color: var(--apx-tinta);
  font-family: var(--font-sans);
  font-size: 1.12rem; /* mas de 16 px: el iPhone no hace zoom al tocar */
  letter-spacing: 0.05em;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.aula-campo input::placeholder { color: #A5968C; letter-spacing: 0.05em; }
.aula-campo input:focus {
  outline: none;
  border-bottom-color: var(--apx-acento-oscuro);
  box-shadow: 0 1px 0 0 var(--apx-acento-oscuro);
}
.aula-campo input[aria-invalid="true"] {
  border-bottom-color: #B3261E;
  box-shadow: 0 1px 0 0 #B3261E;
}

.aula-ayuda {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.78rem; line-height: 1.5;
  color: #7A6A61;
}

/* El codigo: una casilla grande, las cifras bien separadas. */
.aula-campo--codigo label { text-align: center; }
.aula-campo--codigo .aula-ayuda { text-align: center; }
.aula-campo .aula-codigo {
  margin-top: 0.8rem;
  padding: 0.85rem 0 0.8rem 0.5em; /* el 0.5em compensa el espacio de la ultima cifra */
  border: 1px solid rgba(44, 24, 16, 0.22);
  border-radius: 3px;
  background: #fff;
  text-align: center;
  font-size: clamp(1.7rem, 8vw, 2.15rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5em;
  line-height: 1.2;
}
.aula-campo .aula-codigo::placeholder { color: #CBBCAE; letter-spacing: 0.5em; }
.aula-campo .aula-codigo:focus {
  border-color: var(--apx-acento-oscuro);
  box-shadow: 0 0 0 1px var(--apx-acento-oscuro), 0 0 0 5px rgba(185, 122, 110, 0.14);
}
.aula-campo .aula-codigo[aria-invalid="true"] {
  border-color: #B3261E;
  box-shadow: 0 0 0 1px #B3261E;
}

/* Errores: en rojo, pero sobre todo con palabras y el "!" delante, para que
   no dependa del color. Vacio no ocupa sitio. */
.aula-error {
  position: relative;
  margin: 0;
  text-align: left;
  font-size: 0.85rem; font-weight: 600; line-height: 1.5;
  color: #B3261E;
}
.aula-error:not(:empty) {
  margin-top: 0.65rem;
  padding-left: 1.6rem;
}
.aula-error:not(:empty)::before {
  content: '!';
  position: absolute;
  left: 0; top: 0.12em;
  width: 1.1rem; height: 1.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #B3261E;
  color: #fff;
  font-size: 0.72rem; font-weight: 700; line-height: 1;
}
.aula-error a {
  color: #8C1D18;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ---------- Botones: negro cafe, como toda la web publica ---------- */
.aula-boton {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%;
  min-height: 52px;
  margin-top: 0.4rem;
  padding: 1.05rem 1.2rem;
  border: 1.5px solid #17110E;
  border-radius: 999px;
  background: #17110E;
  color: #F3EAE0;
  font-family: var(--font-sans);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  box-shadow: 0 10px 24px -12px rgba(23, 17, 14, 0.55);
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
}
.aula-boton svg { flex: none; color: #D6B39A; }
.aula-boton:hover {
  background: #2C1F19;
  border-color: #2C1F19;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px rgba(23, 17, 14, 0.6);
}
.aula-boton:focus-visible { outline: 2px solid var(--apx-acento-oscuro); outline-offset: 3px; }
.aula-boton[disabled] { cursor: progress; opacity: 0.75; transform: none; }

/* Botones con aspecto de enlace: "Cambiar telefono", "Reenviar codigo". */
/* inline-block y no flex: con flex se pierde el espacio de " en 59 s". */
.aula-enlace {
  display: inline-block;
  padding: 0.55rem 0.1rem;
  line-height: 1.4;
  font-family: var(--font-sans);
  font-size: 0.86rem; font-weight: 600;
  color: var(--apx-tinta);
  text-decoration: underline;
  text-decoration-color: rgba(140, 85, 73, 0.55);
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.aula-enlace:hover { color: var(--apx-acento-oscuro); }
.aula-enlace:focus-visible { outline: 2px solid var(--apx-acento-oscuro); outline-offset: 2px; }
.aula-enlace[disabled] {
  color: #7A6A61;
  text-decoration: none;
  cursor: default;
}
.aula-reenvio__cuenta { font-variant-numeric: tabular-nums; }

/* El telefono al que se ha mandado el codigo, con "Cambiar". */
/* Centrado: si no cabe en una linea (movil), "Cambiar" baja centrado. */
.aula-telefono {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0 1.1rem;
  margin: 0 0 1.7rem;
  padding: 0.3rem 1rem;
  border: 1px solid var(--apx-linea);
  border-radius: 3px;
  text-align: center;
  font-size: 0.86rem;
  color: var(--apx-texto);
}
.aula-telefono strong {
  margin-left: 0.3rem;
  color: var(--apx-tinta);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.aula-reenvio { margin: 1rem 0 0; }

.aula-pie-tarjeta {
  margin: 1.5rem 0 0;
  font-size: 0.84rem;
  color: var(--apx-texto);
}
.aula-pie-tarjeta a {
  color: var(--apx-tinta);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(140, 85, 73, 0.55);
  text-underline-offset: 4px;
}
.aula-pie-tarjeta a:hover { color: var(--apx-acento-oscuro); }

/* ---------- Antes de entrar: politicas ----------
   La misma tarjeta que la entrada, algo mas ancha. Lo primero y lo mas
   visible, la clausula de devoluciones en su caja; debajo, el resto del
   resumen, "Ver politicas" (abre la ventana), la casilla y "Aceptar y
   entrar", que no se puede pulsar hasta marcarla. */
.aula-pagina[data-paso="politicas"] .aula-main { width: min(38rem, 100% - 32px); }

.aula-politicas__kicker { margin: 0 0 0.75rem; }
/* Lineas equilibradas: ni la "y" colgando ni una palabra sola abajo. */
.aula-politicas h2 { text-wrap: balance; }
.aula-politicas .aula-sub {
  max-width: 28rem;
  margin-bottom: 1.6rem;
  text-wrap: balance;
}

/* La clausula de devoluciones: rosa muy suave, filo rosa y en negrita. */
.aula-politicas__clave {
  margin: 0 0 1.5rem;
  padding: 1.2rem clamp(1.05rem, 4vw, 1.4rem) 1.3rem;
  border: 1px solid rgba(140, 85, 73, 0.34);
  border-radius: 3px;
  background: rgba(185, 122, 110, 0.08);
  text-align: left;
}
.aula-politicas__etiqueta {
  display: flex; align-items: center; gap: 0.55rem;
  margin: 0 0 0.6rem;
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--apx-acento-oscuro);
}
.aula-politicas__etiqueta svg { flex: none; }
.aula-politicas__clausula {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--apx-tinta);
}
.aula-politicas__clausula strong { font-weight: 700; }

/* El resto del resumen: frases cortas con un punto rosa delante. */
.aula-politicas__lista {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1.7rem;
  padding: 0 0.15rem;
  list-style: none;
  text-align: left;
}
.aula-politicas__punto {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--apx-texto);
}
.aula-politicas__punto::before {
  content: '';
  position: absolute;
  left: 0.2rem; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--apx-acento);
}

/* "Ver politicas" y "Abrir en una pestaña nueva". */
.aula-politicas__leer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.35rem 1.4rem;
  margin: 0 0 1.7rem;
}
/* Boton secundario: blanco con filo negro cafe (al pasar, se rellena). */
.aula-boton--claro {
  width: auto;
  min-height: 46px;
  margin: 0;
  padding: 0.75rem 1.5rem;
  background: #fff;
  color: #17110E;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  box-shadow: none;
}
.aula-boton--claro svg { color: var(--apx-acento-oscuro); }
.aula-boton--claro:hover { background: #17110E; border-color: #17110E; color: #F3EAE0; box-shadow: 0 10px 24px -12px rgba(23, 17, 14, 0.55); }
.aula-boton--claro:hover svg { color: #D6B39A; }

/* La casilla: toda la caja se puede tocar (es la etiqueta). */
.aula-casilla {
  display: flex; align-items: flex-start; gap: 0.9rem;
  margin: 0 0 1.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(44, 24, 16, 0.16);
  border-radius: 3px;
  background: #fff;
  text-align: left;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--apx-tinta);
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.aula-casilla:hover { border-color: var(--apx-acento); }
.aula-casilla.is-marcada {
  border-color: var(--apx-acento-oscuro);
  background: rgba(185, 122, 110, 0.05);
}
.aula-casilla input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 22px; height: 22px;
  margin: 0.05rem 0 0;
  border: 1.5px solid #2C1810;
  border-radius: 4px;
  background: #fff no-repeat center / 14px 14px;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.aula-casilla input:checked {
  border-color: #17110E;
  background-color: #17110E;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6B39A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.aula-casilla input:focus-visible { outline: 2px solid var(--apx-acento-oscuro); outline-offset: 3px; }
.aula-politicas .aula-error:not(:empty) { margin: -0.4rem 0 1rem; }

/* "Aceptar y entrar" sin la casilla marcada: se ve apagado (distinto de
   "ocupado", que lleva aria-busy). */
.aula-boton--aceptar[disabled]:not([aria-busy="true"]) {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.aula-boton[disabled]:hover {
  background: #17110E;
  border-color: #17110E;
  color: #F3EAE0;
  transform: none;
}
.aula-politicas__salir { margin: 0.9rem 0 0; }

/* ---------- Ventana con el texto completo de las politicas ----------
   <dialog> modal: cabecera con el titulo y la X, el iframe y un pie con
   "Abrir en una pestaña nueva" y "Cerrar". En el movil, casi toda la
   pantalla. */
.aula-sin-scroll,
.aula-sin-scroll body { overflow: hidden; }
.aula-ventana {
  width: min(54rem, 100% - 48px);
  height: min(88vh, 62rem);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: var(--apx-texto);
  box-shadow: 0 60px 120px -50px rgba(23, 17, 14, 0.75), 0 0 0 1px rgba(44, 24, 16, 0.08);
  overflow: hidden;
}
/* Solo abierta: cerrada, el <dialog> no se pinta. */
.aula-ventana[open] {
  display: flex;
  flex-direction: column;
  animation: aula-ventana-entra .35s var(--ease) both;
}
@keyframes aula-ventana-entra {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.aula-ventana::backdrop {
  background: rgba(23, 17, 14, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.aula-ventana__cabecera {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(1rem, 3.5vw, 1.6rem);
  border-bottom: 1px solid rgba(44, 24, 16, 0.09);
}
.aula-ventana__titulos { min-width: 0; }
.aula-ventana__kicker {
  margin: 0 0 0.3rem;
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--apx-acento-oscuro);
}
.aula-ventana__titulo {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 4.2vw, 1.5rem);
  line-height: 1.15;
  color: var(--apx-tinta);
}
.aula-ventana__titulo em { font-style: italic; color: var(--apx-acento-titulo); }
.aula-ventana__cerrar {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(44, 24, 16, 0.16);
  color: var(--apx-tinta);
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.aula-ventana__cerrar:hover { background: #17110E; border-color: #17110E; color: #F3EAE0; }
.aula-ventana__cerrar:focus-visible { outline: 2px solid var(--apx-acento-oscuro); outline-offset: 3px; }
.aula-ventana__cuerpo {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #fff;
}
.aula-ventana__cargando {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  margin: 0;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--apx-acento-oscuro);
}
.aula-ventana__cuerpo.is-cargado .aula-ventana__cargando { display: none; }
.aula-ventana__iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  background: transparent;
}
.aula-ventana__pie {
  flex: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 0.75rem clamp(1rem, 3.5vw, 1.6rem);
  border-top: 1px solid rgba(44, 24, 16, 0.09);
  background: #fff;
}
.aula-ventana__listo {
  width: auto;
  min-width: 9rem;
  min-height: 46px;
  margin: 0;
  padding: 0.75rem 1.8rem;
  font-size: 0.72rem;
}
@media (max-width: 600px) {
  .aula-ventana {
    width: calc(100% - 16px);
    height: calc(100vh - 16px);
    height: calc(100dvh - 16px);
  }
  .aula-ventana__pie { justify-content: center; }
  .aula-ventana__listo { flex: 1 1 100%; }
}

/* ---------- Paso 3: dentro ---------- */
.aula-saludo {
  max-width: 38rem;
  margin: 0 auto clamp(2rem, 5vw, 2.8rem);
  text-align: center;
}
.aula-saludo h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 9vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--apx-tinta);
  overflow-wrap: anywhere;
}
.aula-saludo h2 em { font-style: italic; color: var(--apx-acento-titulo); }
.aula-saludo__texto {
  margin: 1rem 0 0;
  font-size: 0.96rem; line-height: 1.7;
  color: var(--apx-texto);
}
.aula-saludo__texto strong {
  color: var(--apx-tinta);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Apartados (acordeon) ----------
   Una tarjeta blanca por apartado. La cabecera es un boton a todo lo ancho:
   icono en su circulo, titulo en serif con la palabra en cursiva rosa, una
   linea de detalle y el chevron, que gira al abrir. Abierto, el circulo del
   icono se rellena en negro cafe (lo seleccionado) y la tarjeta se marca con
   el filo rosa. El panel se despliega animando la altura (grid 0fr -> 1fr);
   plegado queda oculto tambien para el lector de pantalla y el teclado
   (visibility), cuando acaba de plegarse. */
.aula-acordeon {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  margin: 0 0 clamp(2rem, 5vw, 2.8rem);
}
.aula-apartado {
  position: relative;
  border: 1px solid rgba(44, 24, 16, 0.09);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 26px 50px -44px rgba(44, 24, 16, 0.5), 0 1px 3px rgba(44, 24, 16, 0.03);
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.aula-apartado.is-abierto {
  border-color: rgba(140, 85, 73, 0.3);
  box-shadow: 0 46px 80px -52px rgba(44, 24, 16, 0.6), 0 1px 3px rgba(44, 24, 16, 0.03);
}
.aula-apartado__cabecera {
  margin: 0;
  font: inherit;
  scroll-margin-top: 16px;
}
.aula-apartado__boton {
  display: flex; align-items: center; gap: clamp(0.85rem, 3vw, 1.3rem);
  width: 100%;
  min-height: 84px;
  padding: 1.05rem clamp(1rem, 4vw, 1.75rem);
  border-radius: 4px;
  text-align: left;
  color: var(--apx-tinta);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.aula-apartado__boton:focus-visible { outline: 2px solid var(--apx-acento-oscuro); outline-offset: 3px; }
.aula-apartado__icono {
  flex: none;
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1px solid var(--apx-acento);
  color: var(--apx-acento-oscuro);
  transition: background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
}
.aula-apartado.is-abierto .aula-apartado__icono {
  background: #17110E;
  border-color: #17110E;
  color: #D6B39A;
}
.aula-apartado__textos {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.aula-apartado__titulo {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 4.8vw, 1.65rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--apx-tinta);
  overflow-wrap: anywhere;
}
.aula-apartado__titulo em { font-style: italic; color: var(--apx-acento-titulo); }
/* El detalle va en trozos ("Dry-Combi Manicure", "7 módulos") separados por
   un punto. Cada trozo se queda entero en su linea y, si no cabe, baja
   entero: el punto va en el hueco de delante de cada trozo y el que queda al
   principio de una linea se recorta (la caja sale 1em a la izquierda y ese
   1em no se pinta). Asi nunca queda un punto colgando. */
.aula-apartado__detalle {
  display: flex; flex-wrap: wrap;
  margin-left: -1em;
  clip-path: inset(0 0 0 1em);
  font-size: 0.8rem;
  line-height: 1.4;
  color: #7A6A61;
}
.aula-apartado__trozo {
  position: relative;
  max-width: 100%;
  padding-left: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aula-apartado__trozo::before {
  content: '·';
  content: '·' / '';
  position: absolute;
  left: 0.36em;
}
.aula-apartado__chevron {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(44, 24, 16, 0.14);
  color: var(--apx-tinta);
  transition: transform .5s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.aula-apartado__boton:hover .aula-apartado__chevron {
  border-color: var(--apx-acento);
  color: var(--apx-acento-oscuro);
}
.aula-apartado.is-abierto .aula-apartado__chevron { transform: rotate(180deg); }

/* El panel: 500 ms, los mismos que DURACION_APARTADO en scripts/aula.js. */
.aula-apartado__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .5s var(--ease), visibility 0s linear .5s;
}
.aula-apartado.is-abierto .aula-apartado__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .5s var(--ease), visibility 0s linear 0s;
}
.aula-apartado__dentro {
  min-height: 0;
  overflow: hidden;
}
/* Ya desplegado, nada se recorta: la sombra del libro y la hoja al girar
   pueden salirse un poco. */
.aula-apartado.is-desplegado .aula-apartado__dentro { overflow: visible; }
.aula-apartado__relleno {
  padding: 0.35rem clamp(1rem, 4vw, 1.75rem) clamp(1.6rem, 4.5vw, 2.2rem);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.aula-apartado.is-abierto .aula-apartado__relleno {
  opacity: 1;
  transform: none;
  transition-delay: .1s;
}

/* ---------- 1. Temario virtual ----------
   Los modulos, cada uno con su numero grande en cursiva nude. En ordenador,
   en dos columnas que se leen de arriba abajo (--filas lo pone
   scripts/aula.js: la mitad de los modulos, redondeando hacia arriba). */
.aula-temario__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.aula-modulo {
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  gap: 0 1rem;
  align-items: start;
  padding: 1.15rem 0;
  border-top: 1px solid rgba(44, 24, 16, 0.08);
}
.aula-modulo__numero {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1;
  color: #D9A294;
  font-variant-numeric: lining-nums;
}
.aula-modulo__etiqueta {
  margin: 0 0 0.35rem;
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--apx-acento-oscuro);
}
.aula-modulo__titulo {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.18rem;
  line-height: 1.25;
  color: var(--apx-tinta);
  overflow-wrap: anywhere;
}
.aula-modulo__texto {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--apx-texto);
}
@media (min-width: 760px) {
  .aula-temario__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--filas, 4), auto);
    grid-auto-flow: column;
    column-gap: 2.6rem;
  }
}
/* Lo que llegara a cada modulo: una nota discreta al final. */
.aula-temario__nota {
  margin: 0.4rem 0 0;
  padding: 1rem 1.2rem;
  border: 1px solid var(--apx-linea);
  border-radius: 3px;
  background: #fff;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--apx-texto);
}

/* ---------- 2. Lo que lograre: el libro ----------
   Un libro de verdad: hojas con frente y dorso que giran 180 grados sobre el
   lomo (900 ms, los mismos que DURACION_HOJA en scripts/aula.js). En doble
   pagina, cerrado se centra la portada y al final la contraportada. En una
   pagina (movil) se recorta lo que pasa del lomo: la hoja se va y aparece la
   siguiente. Paginas de 0,72 de ancho por 1 de alto. Los tamaños de letra
   van con el ancho de la pagina (cqw), con un valor fijo antes para los
   navegadores que no lo entienden. */
.aula-libro { padding-top: clamp(0.4rem, 2vw, 1rem); }

.aula-libro__escena {
  position: relative;
  max-width: 43rem;
  margin: 0 auto;
  padding: 0.8rem 0 2.4rem;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  /* El deslizar en horizontal lo lleva scripts/aula.js; en vertical la
     pagina se desplaza y con dos dedos se puede ampliar el texto. */
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.aula-libro__escena:focus-visible { outline: 2px solid var(--apx-acento-oscuro); outline-offset: 4px; }
/* Cerrado (al principio o al final) el libro se desplaza para centrar la
   tapa: lo que sobra por el lado vacio no ensancha la pagina. */
.aula-libro__escena { overflow-x: clip; overflow-clip-margin: 1rem; }

.aula-libro__libro {
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 1.44 / 1;
  perspective: 2600px;
  transition: transform .9s cubic-bezier(.645, .045, .355, 1), opacity .18s ease;
}
/* En una pagina se recorta lo que pasa del lomo (las hojas ya pasadas); por
   arriba, por la derecha y por abajo sobra sitio para la hoja al girar y para
   toda la sombra sobre la mesa, que asi se difumina y no se corta en seco. */
.aula-libro__libro[data-modo="simple"] {
  max-width: 23rem;
  aspect-ratio: 0.72 / 1;
  clip-path: inset(-20% -30% -35% 0);
}
.aula-libro__libro[data-modo="doble"][data-estado="inicio"] { transform: translateX(-25%); }
.aula-libro__libro[data-modo="doble"][data-estado="fin"] { transform: translateX(25%); }
.aula-libro__libro.is-fundido { opacity: 0; }
.aula-libro__libro.sin-animar,
.aula-libro__libro.sin-animar * { transition: none !important; animation: none !important; }

/* La sombra del libro sobre la mesa: bajo las paginas que se ven. */
.aula-libro__sombra {
  position: absolute;
  top: 2%; bottom: 0; left: 0; right: 0;
  border-radius: 4px;
  box-shadow:
    0 40px 56px -30px rgba(23, 17, 14, 0.55),
    0 16px 24px -16px rgba(23, 17, 14, 0.3);
  pointer-events: none;
  transition: left .9s cubic-bezier(.645, .045, .355, 1), right .9s cubic-bezier(.645, .045, .355, 1);
}
.aula-libro__libro[data-modo="doble"][data-estado="inicio"] .aula-libro__sombra { left: 50%; }
.aula-libro__libro[data-modo="doble"][data-estado="fin"] .aula-libro__sombra { right: 50%; }
/* En una pagina, el lomo va recortado: la sombra empieza un poco hacia
   dentro para que su difuminado acabe antes del corte y no deje un filo. */
.aula-libro__libro[data-modo="simple"] .aula-libro__sombra { left: 12%; }

/* El canto de las hojas de debajo: asoma 3 px por fuera y por abajo de cada
   lado, desde el mismo lomo. Con el libro cerrado no se ve (la tapa dura es
   mas grande que las hojas). */
.aula-libro__canto {
  position: absolute;
  top: 0; bottom: -3px;
  background: #fff;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.aula-libro__canto--derecha {
  left: 50%; right: -3px;
  border-radius: 0 5px 6px 0;
  box-shadow: inset -1px -1px 0 rgba(44, 24, 16, 0.16), inset -2px -2px 0 #fff, inset -3px -3px 0 rgba(44, 24, 16, 0.1);
}
.aula-libro__canto--izquierda {
  right: 50%; left: -3px;
  border-radius: 5px 0 0 6px;
  box-shadow: inset 1px -1px 0 rgba(44, 24, 16, 0.16), inset 2px -2px 0 #fff, inset 3px -3px 0 rgba(44, 24, 16, 0.1);
}
.aula-libro__libro[data-modo="simple"] .aula-libro__canto--derecha { left: 0; }
.aula-libro__libro[data-modo="simple"] .aula-libro__canto--izquierda,
.aula-libro__libro[data-estado="inicio"] .aula-libro__canto,
.aula-libro__libro[data-estado="fin"] .aula-libro__canto { opacity: 0; }

/* Cada hoja: en doble pagina ocupa la mitad derecha y gira sobre su borde
   izquierdo (el lomo). */
.aula-hoja {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; width: 50%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.645, .045, .355, 1);
}
.aula-libro__libro[data-modo="simple"] .aula-hoja { left: 0; width: 100%; }
.aula-hoja.is-pasada { transform: rotateY(-180deg); }

.aula-hoja__cara {
  position: absolute; inset: 0;
  overflow: hidden;
  background: #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  container-type: inline-size;
}
/* Frente: pagina de la derecha (lomo a su izquierda). Dorso: la de la
   izquierda. */
.aula-hoja__cara--frente { border-radius: 0 5px 5px 0; }
.aula-hoja__cara--dorso {
  transform: rotateY(180deg);
  border-radius: 5px 0 0 5px;
}
.aula-hoja__cara--frente.is-tapa { border-radius: 0 7px 7px 0; }
.aula-hoja__cara--dorso.is-tapa { border-radius: 7px 0 0 7px; }

/* El pliegue del lomo: sombra junto al borde que va cosido. Y un filo
   finisimo arriba: el papel es blanco sobre blanco y, sin el, el libro
   parece cortado por arriba. */
.aula-hoja__cara::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(44, 24, 16, 0.07);
}
.aula-hoja__cara--frente::after {
  background: linear-gradient(to right, rgba(44, 24, 16, 0.17), rgba(44, 24, 16, 0.05) 4%, rgba(44, 24, 16, 0) 12%);
}
.aula-hoja__cara--dorso::after {
  background: linear-gradient(to left, rgba(44, 24, 16, 0.17), rgba(44, 24, 16, 0.05) 4%, rgba(44, 24, 16, 0) 12%);
}
/* En las tapas, la bisagra de un libro de tapa dura. */
.aula-hoja__cara--frente.is-tapa::after {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.12) 3%, rgba(214, 179, 154, 0.1) 4%, rgba(0, 0, 0, 0.16) 5.5%, rgba(0, 0, 0, 0) 10%);
}
.aula-hoja__cara--dorso.is-tapa::after {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.12) 3%, rgba(214, 179, 154, 0.1) 4%, rgba(0, 0, 0, 0.16) 5.5%, rgba(0, 0, 0, 0) 10%);
}
/* Al girar, la hoja se oscurece al ponerse de canto, como con la luz. */
.aula-hoja.is-girando .aula-hoja__cara::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 3;
  background: linear-gradient(to left, rgba(23, 17, 14, 0.26), rgba(23, 17, 14, 0.06) 70%);
  pointer-events: none;
  animation: aula-luz-hoja .9s cubic-bezier(.645, .045, .355, 1) both;
}
.aula-hoja.is-girando .aula-hoja__cara--dorso::before {
  background: linear-gradient(to right, rgba(23, 17, 14, 0.26), rgba(23, 17, 14, 0.06) 70%);
}
@keyframes aula-luz-hoja {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* ---- Las paginas ---- */
.aula-pag {
  position: absolute; inset: 0;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 2.2rem 2rem 1.8rem;
  padding: 11cqw 11cqw 8.5cqw;
  text-align: center;
  color: var(--apx-texto);
}
/* Papel BLANCO: un grano neutro casi imperceptible (sin tono marfil) y
   solo los bordes apenas tostados. */
.aula-pag--interior {
  background:
    radial-gradient(130% 95% at 50% 45%, rgba(255, 255, 255, 0) 70%, rgba(140, 85, 73, 0.035) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .43 0 0 0 0 .42 0 0 0 .022 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    #fff;
}
.aula-pag__cabeza {
  margin: 0;
  font-size: 0.58rem;
  font-size: clamp(0.54rem, 2.6cqw, 0.66rem);
  font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--apx-acento-oscuro);
}
.aula-pag__cuerpo {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%;
}
.aula-pag__numeral {
  display: block;
  margin-bottom: 0.9rem;
  margin-bottom: 4.5cqw;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 2.6rem;
  font-size: clamp(2.1rem, 13cqw, 3.2rem);
  line-height: 1;
  color: #E8B7AB;
}
.aula-pag__titulo {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.6rem;
  font-size: clamp(1.35rem, 8.2cqw, 2.05rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--apx-tinta);
  text-wrap: balance;
}
.aula-pag__titulo em {
  font-style: italic;
  color: var(--apx-acento-titulo);
}
.aula-pag__texto {
  max-width: 100%;
  margin: 1.1rem 0 0;
  margin-top: 5.5cqw;
  font-size: 0.9rem;
  font-size: clamp(0.82rem, 4.35cqw, 1rem);
  line-height: 1.7;
  color: var(--apx-texto);
  text-wrap: pretty;
}
.aula-pag__folio {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--apx-acento-titulo);
}
/* La esquina de la pagina de la derecha, levantada: invita a pasarla. */
.aula-hoja__cara--frente .aula-pag--interior::after {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 1.6rem; height: 1.6rem;
  width: 8cqw; height: 8cqw;
  border-top-left-radius: 60% 60%;
  background: linear-gradient(135deg, #fff 0%, #F5EEE9 45%, rgba(44, 24, 16, 0.14) 50%, rgba(44, 24, 16, 0) 56%);
  box-shadow: -2px -2px 5px -3px rgba(44, 24, 16, 0.25);
  transition: width .35s var(--ease), height .35s var(--ease);
}
@media (hover: hover) {
  .aula-libro__escena:hover .aula-hoja__cara--frente .aula-pag--interior::after { width: 11cqw; height: 11cqw; }
}

/* Tapas en negro cafe, con el filo de dentro y la L de fondo, como el
   billete del curso. */
.aula-pag--portada,
.aula-pag--contraportada {
  justify-content: center;
  background:
    radial-gradient(120% 75% at 88% 0%, rgba(185, 122, 110, 0.3), rgba(185, 122, 110, 0) 62%),
    radial-gradient(90% 60% at 0% 100%, rgba(185, 122, 110, 0.12), rgba(185, 122, 110, 0) 65%),
    #17110E;
  color: #CBBCAE;
}
.aula-pag--portada::before,
.aula-pag--contraportada::before {
  content: '';
  position: absolute;
  inset: 0.9rem;
  inset: 4.4cqw;
  border: 1px solid rgba(214, 179, 154, 0.3);
  pointer-events: none;
}
.aula-pag--portada::after {
  content: 'L';
  position: absolute;
  right: 0.08em; bottom: -0.3em;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12rem;
  font-size: 62cqw;
  line-height: 1;
  color: rgba(214, 179, 154, 0.06);
  pointer-events: none;
}
.aula-pag__marca,
.aula-pag__sello {
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem;
  width: 16cqw; height: 16cqw;
  border-radius: 50%;
  border: 1px solid rgba(214, 179, 154, 0.5);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  font-size: 7.5cqw;
  line-height: 1;
  color: #D6B39A;
}
.aula-pag__marca { margin-bottom: 1.6rem; margin-bottom: 8cqw; }
.aula-pag--portada .aula-pag__kicker,
.aula-pag--contraportada .aula-pag__kicker {
  margin: 0;
  font-size: 0.6rem;
  font-size: clamp(0.56rem, 2.8cqw, 0.7rem);
  font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: #D6B39A;
}
.aula-pag__titulo-portada {
  margin: 1rem 0 0;
  margin-top: 5cqw;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 2.3rem;
  font-size: clamp(1.9rem, 12cqw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: #F3EAE0;
  text-wrap: balance;
}
.aula-pag__titulo-portada--largo {
  font-size: 1.6rem;
  font-size: clamp(1.25rem, 8.5cqw, 2.1rem);
  line-height: 1.08;
}
.aula-pag__subtitulo {
  margin: 0.9rem 0 0;
  margin-top: 4.5cqw;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  font-size: clamp(1.05rem, 6.2cqw, 1.5rem);
  color: #D6B39A;
}
.aula-pag__pie {
  position: absolute;
  left: 0; right: 0;
  bottom: 2.2rem;
  bottom: 11cqw;
  margin: 0;
  font-size: 0.56rem;
  font-size: clamp(0.52rem, 2.5cqw, 0.64rem);
  font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: #CBBCAE;
}
.aula-pag--contraportada { justify-content: space-between; }
.aula-pag__cierre {
  display: flex; flex-direction: column; align-items: center;
}
.aula-pag__frase {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.3rem;
  font-size: clamp(1.15rem, 7cqw, 1.7rem);
  line-height: 1.25;
  color: #F3EAE0;
  text-wrap: balance;
}
.aula-pag__firma {
  margin: 0.6rem 0 0;
  margin-top: 3cqw;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 3rem;
  font-size: clamp(2.5rem, 18cqw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #D6B39A;
}
.aula-pag__sello {
  width: 2.6rem; height: 2.6rem;
  width: 12cqw; height: 12cqw;
  font-size: 1.1rem;
  font-size: 5.6cqw;
}

/* ---- Flechas y numero de pagina ---- */
.aula-libro__mandos {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(0.8rem, 3vw, 1.4rem);
}
.aula-libro__flecha {
  flex: none;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #17110E;
  color: #F3EAE0;
  box-shadow: 0 10px 22px -12px rgba(23, 17, 14, 0.6);
  cursor: pointer;
  transition: background-color .25s var(--ease), transform .2s var(--ease), opacity .25s var(--ease), box-shadow .25s var(--ease);
}
.aula-libro__flecha:hover { background: #2C1F19; transform: translateY(-1px); }
.aula-libro__flecha:focus-visible { outline: 2px solid var(--apx-acento-oscuro); outline-offset: 3px; }
.aula-libro__flecha[aria-disabled="true"] {
  opacity: 0.28;
  cursor: default;
  box-shadow: none;
  transform: none;
}
.aula-libro__folio {
  min-width: 11.5rem;
  margin: 0;
  text-align: center;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--apx-acento-oscuro);
}
.aula-libro__ayuda {
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #7A6A61;
}
.aula-libro__ayuda--tactil { display: none; }
@media (hover: none) and (pointer: coarse) {
  .aula-libro__ayuda--tactil { display: inline; }
  .aula-libro__ayuda--raton { display: none; }
}
@media (max-width: 380px) {
  .aula-libro__folio { min-width: 0; letter-spacing: 0.16em; }
}

/* ---------- El libro del curso (Temario virtual) ----------
   El mismo libro que se entrega impreso, en A5: cada pagina es una imagen de
   fondo (sin "Guardar imagen"). Arriba, su avance de 0 a 100 %. "Ver en grande"
   lo pone a toda pantalla sobre negro cafe (scripts/aula.js lo lleva al
   final de <body>). No se imprime. */
.aula-librocurso { display: grid; gap: clamp(1rem, 3vw, 1.4rem); }

.aula-avance { width: 100%; max-width: 36rem; margin: 0 auto; }
.aula-avance__cabeza {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.55rem;
}
.aula-avance__etiqueta {
  margin: 0;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--apx-acento-oscuro);
}
.aula-avance__cifra {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.6rem; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--apx-tinta);
}
.aula-avance__barra {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(185, 122, 110, 0.16);
  overflow: hidden;
}
.aula-avance__relleno {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #B97A6E, #8C5549);
  transition: width .6s var(--ease);
}
.aula-avance__pie {
  margin: 0.6rem 0 0;
  font-size: 0.86rem; line-height: 1.5;
  color: var(--apx-texto);
}

/* Paginas A5 (148 x 210 mm): 0,705 de ancho por 1 de alto. */
.aula-libro--curso .aula-libro__escena { max-width: 60rem; }
.aula-libro--curso .aula-libro__libro { aspect-ratio: 1.4096 / 1; }
.aula-libro--curso .aula-libro__libro[data-modo="simple"] { max-width: 30rem; aspect-ratio: 0.7048 / 1; }
.aula-pag--imagen {
  padding: 0;
  background-color: #fff;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-touch-callout: none;
}
.aula-libro__extra { display: flex; justify-content: center; margin-top: 0.8rem; }
.aula-libro__ampliar {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--apx-linea);
  border-radius: 999px;
  background: #fff;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--apx-tinta);
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.aula-libro__ampliar:hover { border-color: var(--apx-acento); }
.aula-libro__ampliar:focus-visible { outline: 2px solid var(--apx-acento-oscuro); outline-offset: 3px; }

/* Ver en grande: a toda pantalla, sobre negro cafe. El libro se ajusta al
   alto que queda debajo de los mandos. */
.aula-libro--curso.is-grande {
  position: fixed; inset: 0;
  z-index: 400;
  display: flex; flex-direction: column; justify-content: center;
  justify-content: safe center;
  margin: 0;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  background: #17110E;
  overflow: auto;
  overscroll-behavior: contain;
}
.aula-libro--curso.is-grande .aula-libro__escena {
  width: 100%;
  max-width: min(100%, calc((100vh - 13rem) * 1.41));
  max-width: min(100%, calc((100dvh - 13rem) * 1.41));
  padding-bottom: 1.4rem;
}
.aula-libro--curso.is-grande .aula-libro__libro[data-modo="simple"] {
  max-width: min(100%, calc((100vh - 13rem) * 0.705));
  max-width: min(100%, calc((100dvh - 13rem) * 0.705));
}
.aula-libro--curso.is-grande .aula-libro__folio { color: #D6B39A; }
.aula-libro--curso.is-grande .aula-libro__ayuda { color: #CBBCAE; }
.aula-libro--curso.is-grande .aula-libro__flecha { background: #F3EAE0; color: #17110E; }
.aula-libro--curso.is-grande .aula-libro__flecha:hover { background: #fff; }
.aula-libro--curso.is-grande .aula-libro__ampliar {
  background: transparent;
  border-color: rgba(214, 179, 154, 0.45);
  color: #F3EAE0;
}
.aula-libro--curso.is-grande.is-con-repaso .aula-libro__escena {
  max-width: min(100%, calc((100vh - 19rem) * 1.41));
  max-width: min(100%, calc((100dvh - 19rem) * 1.41));
}
.aula-libro--curso.is-grande.is-con-repaso .aula-libro__libro[data-modo="simple"] {
  max-width: min(100%, calc((100vh - 19rem) * 0.705));
  max-width: min(100%, calc((100dvh - 19rem) * 0.705));
}
/* Movil en horizontal (poca altura): el libro a todo el ancho, aunque haya
   que bajar un poco para verlo entero; si no, quedaria diminuto. */
@media (max-height: 520px) {
  .aula-libro--curso.is-grande .aula-libro__escena,
  .aula-libro--curso.is-grande .aula-libro__libro[data-modo="simple"] { max-width: 100%; }
  .aula-libro--curso.is-grande .aula-libro__ayuda { display: none; }
}
html.aula-sin-scroll { overflow: hidden; }

/* Los temas debajo del libro: cada uno lleva a su pagina. */
.aula-librocurso__rotulo {
  margin: 0.4rem 0 0;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--apx-acento-oscuro);
}
.aula-modulo__ir {
  display: inline-flex; align-items: center;
  margin-top: 0.5rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--apx-linea);
  border-radius: 999px;
  background: #fff;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--apx-acento-oscuro);
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.aula-modulo__ir:hover { border-color: var(--apx-acento); color: var(--apx-tinta); }
.aula-modulo__ir:focus-visible { outline: 2px solid var(--apx-acento-oscuro); outline-offset: 2px; }

/* ---------- Evaluacion del libro ----------
   Encima de las paginas con preguntas, una zona por opcion (se toca) y el
   punto de cada una, en su sitio de la imagen. Elegida: punto rosa; al
   corregir, verde la buena y rojo la que no. Debajo del libro, la barra del
   repaso; en los temas, su nota; y la tarjeta de la evaluacion final. La
   evaluacion final y la fiesta del 100 % van a toda pantalla. */
.aula-test {
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
}
.aula-test__opcion {
  position: absolute;
  margin: 0; padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.aula-test__opcion:hover { background: rgba(185, 122, 110, 0.1); }
.aula-test__opcion:focus-visible { outline: 2px solid #8C5549; outline-offset: 1px; }
.aula-test__opcion.is-elegida { background: rgba(185, 122, 110, 0.12); }
.aula-test__opcion.is-bien { background: rgba(45, 106, 79, 0.12); box-shadow: inset 0 0 0 1.5px rgba(45, 106, 79, 0.6); }
.aula-test__opcion.is-mal { background: rgba(163, 58, 46, 0.1); box-shadow: inset 0 0 0 1.5px rgba(163, 58, 46, 0.55); }
.aula-test__opcion[aria-disabled="true"] { cursor: default; }
.aula-test__opcion[aria-disabled="true"]:hover { background: transparent; }
.aula-test__opcion.is-bien[aria-disabled="true"]:hover { background: rgba(45, 106, 79, 0.12); }
.aula-test__opcion.is-mal[aria-disabled="true"]:hover { background: rgba(163, 58, 46, 0.1); }
.aula-test__punto {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), background-color .2s;
}
.aula-test__punto.is-elegida { opacity: 1; transform: translate(-50%, -50%) scale(1); background: #8C5549; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); }
.aula-test__punto.is-bien { background: #2D6A4F; }
.aula-test__punto.is-mal { background: #A33A2E; }

.aula-repaso { display: grid; gap: 0.6rem; max-width: 42rem; margin: 1rem auto 0; }
.aula-repaso__fila {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.6rem 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--apx-linea);
  border-radius: 14px;
  background: #fff;
}
.aula-repaso__fila.is-corregido { background: rgba(185, 122, 110, 0.06); }
.aula-repaso__textos { min-width: 0; flex: 1 1 16rem; }
.aula-repaso__titulo {
  margin: 0;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--apx-acento-oscuro);
}
.aula-repaso__estado { margin: 0.25rem 0 0; font-size: 0.88rem; line-height: 1.45; color: var(--apx-texto); }
.aula-repaso__estado strong { color: var(--apx-tinta); font-weight: 600; }
.aula-repaso__antes { margin: 0.2rem 0 0; font-size: 0.8rem; color: #7A6A61; }
.aula-repaso__boton {
  flex: none;
  padding: 0.7rem 1.3rem;
  border: 0;
  border-radius: 999px;
  background: #17110E;
  color: #F3EAE0;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s var(--ease), opacity .25s var(--ease);
}
.aula-repaso__boton:hover { background: #2C1F19; }
.aula-repaso__boton:disabled { opacity: 0.32; cursor: default; }
.aula-repaso__boton:focus-visible { outline: 2px solid var(--apx-acento-oscuro); outline-offset: 3px; }
.aula-repaso__aviso { flex-basis: 100%; margin: 0; }
.aula-final .aula-error,
.aula-libro--curso.is-grande .aula-error { color: #F2B8B5; }
.aula-repaso__aviso:empty { display: none; }
.aula-libro--curso.is-grande .aula-repaso__fila { background: rgba(243, 234, 224, 0.06); border-color: rgba(214, 179, 154, 0.3); }
.aula-libro--curso.is-grande .aula-repaso__titulo { color: #D6B39A; }
.aula-libro--curso.is-grande .aula-repaso__estado,
.aula-libro--curso.is-grande .aula-repaso__antes { color: #CBBCAE; }
.aula-libro--curso.is-grande .aula-repaso__estado strong { color: #F3EAE0; }
.aula-libro--curso.is-grande .aula-repaso__boton { background: #F3EAE0; color: #17110E; }

.aula-modulo__nota {
  margin: 0.5rem 0 0;
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #9A8A81;
}
.aula-modulo__nota.is-hecho { color: #8C5549; }

.aula-final {
  display: grid; justify-items: center; gap: 0.65rem;
  margin-top: 0.4rem;
  padding: 1.5rem 1.4rem 1.6rem;
  border-radius: 18px;
  background: #17110E;
  color: #CBBCAE;
  text-align: center;
}
.aula-final.is-cerrada { background: #fff; border: 1px dashed rgba(140, 85, 73, 0.4); color: var(--apx-texto); }
.aula-final__kicker {
  margin: 0;
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: #D6B39A;
}
.aula-final.is-cerrada .aula-final__kicker { color: var(--apx-acento-oscuro); }
.aula-final__titulo { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 1.8rem; line-height: 1.1; color: #F3EAE0; }
.aula-final__titulo em { font-style: italic; color: #D6B39A; }
.aula-final.is-cerrada .aula-final__titulo { color: var(--apx-tinta); }
.aula-final.is-cerrada .aula-final__titulo em { color: var(--apx-acento-titulo); }
.aula-final__texto { max-width: 34rem; margin: 0; font-size: 0.92rem; line-height: 1.55; }
.aula-final__nota { margin: 0; font-family: var(--font-serif); font-size: 1.15rem; color: #F3EAE0; }
.aula-final__nota strong { font-size: 2.4rem; font-weight: 400; }
.aula-final .aula-boton { width: auto; min-width: 16rem; background: #F3EAE0; border-color: #F3EAE0; color: #17110E; }
.aula-final .aula-boton:hover { background: #fff; border-color: #fff; color: #17110E; }
.aula-final__otra,
.aula-examen__otra {
  padding: 0.65rem 1.2rem;
  border: 1px solid rgba(214, 179, 154, 0.45);
  border-radius: 999px;
  background: transparent;
  color: #F3EAE0;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
}
.aula-diploma__hecho { max-width: 34rem; margin: 0; font-size: 0.92rem; line-height: 1.55; }
.aula-final .aula-diploma__hecho strong { color: #F3EAE0; }

/* La evaluacion final: una hoja blanca a toda pantalla sobre negro cafe. */
.aula-examen {
  position: fixed; inset: 0;
  z-index: 420;
  display: flex; justify-content: center;
  padding: max(0.8rem, env(safe-area-inset-top)) 0.8rem max(0.8rem, env(safe-area-inset-bottom));
  background: rgba(23, 17, 14, 0.78);
}
.aula-examen__hoja {
  position: relative;
  display: flex; flex-direction: column;
  width: min(46rem, 100%);
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7);
}
.aula-examen__cabeza { position: relative; padding: 1.3rem 3.6rem 1rem 1.4rem; border-bottom: 1px solid var(--apx-linea); }
.aula-examen__kicker {
  margin: 0;
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--apx-acento-oscuro);
}
.aula-examen__titulo { margin: 0.3rem 0 0; font-family: var(--font-serif); font-weight: 400; font-size: 1.9rem; line-height: 1.1; color: var(--apx-tinta); }
.aula-examen__titulo em { font-style: italic; color: var(--apx-acento-titulo); }
.aula-examen__lead { margin: 0.45rem 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--apx-texto); }
.aula-examen__progreso {
  margin: 0.6rem 0 0;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--apx-acento-oscuro);
}
.aula-examen__progreso:empty { display: none; }
.aula-examen__cerrar {
  position: absolute; top: 1rem; right: 1rem;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--apx-linea);
  border-radius: 50%;
  background: #fff;
  color: var(--apx-tinta);
  cursor: pointer;
}
.aula-examen__cerrar:focus-visible { outline: 2px solid var(--apx-acento-oscuro); outline-offset: 2px; }
.aula-examen__cuerpo { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 0.4rem 1.4rem 1.4rem; }
.aula-examen__tema {
  margin: 1.3rem 0 0.4rem;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--apx-acento-oscuro);
}
.aula-examen__pregunta { padding: 0.85rem 0; border-top: 1px solid var(--apx-linea); }
.aula-examen__enunciado { margin: 0 0 0.55rem; font-size: 0.95rem; font-weight: 500; line-height: 1.45; color: var(--apx-tinta); }
.aula-examen__num { font-family: var(--font-serif); font-style: italic; color: var(--apx-acento-oscuro); }
.aula-examen__opciones { display: grid; gap: 0.4rem; }
.aula-examen__opcion {
  display: flex; align-items: flex-start; gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--apx-linea);
  border-radius: 12px;
  background: #fff;
  font: inherit; font-size: 0.9rem; line-height: 1.4;
  color: var(--apx-texto);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.aula-examen__opcion:hover { border-color: var(--apx-acento); }
.aula-examen__opcion:focus-visible { outline: 2px solid var(--apx-acento-oscuro); outline-offset: 2px; }
.aula-examen__opcion[aria-pressed="true"] { border-color: #8C5549; background: rgba(185, 122, 110, 0.08); color: var(--apx-tinta); }
.aula-examen__punto {
  position: relative;
  flex: none;
  width: 17px; height: 17px;
  margin-top: 0.1rem;
  border: 1.5px solid #B97A6E;
  border-radius: 50%;
}
.aula-examen__opcion[aria-pressed="true"] .aula-examen__punto::after {
  content: '';
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: #8C5549;
}
.aula-examen__letra { flex: none; font-weight: 600; color: #8C5549; }
.aula-examen__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 0.6rem 1rem;
  padding: 0.9rem 1.4rem;
  border-top: 1px solid var(--apx-linea);
  background: #fff;
}
.aula-examen__pie .aula-boton { width: auto; margin: 0; }
.aula-examen__pie .aula-boton:disabled { opacity: 0.35; cursor: default; transform: none; }
.aula-examen__aviso { margin: 0; }
.aula-examen__aviso:empty { display: none; }
.aula-examen__resultado { display: grid; justify-items: center; gap: 0.5rem; padding: 1.6rem 0 0.6rem; text-align: center; outline: none; }
.aula-examen__nota { margin: 0; font-family: var(--font-serif); font-size: 4.2rem; line-height: 1; color: var(--apx-tinta); }
.aula-examen__nota span { font-size: 1.4rem; color: #7A6A61; }
.aula-examen__resultado.is-aprobada .aula-examen__nota { color: #8C5549; }
.aula-examen__rotulo {
  margin: 0.8rem 0 0;
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--apx-acento-oscuro);
}
.aula-examen__temas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 1.4rem;
  margin: 0; padding: 0;
  list-style: none;
  font-size: 0.86rem; color: var(--apx-texto);
  text-align: left;
}
.aula-examen__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.9rem; }
.aula-examen__acciones .aula-boton { width: auto; margin: 0; }
.aula-examen__otra { border-color: var(--apx-linea); background: #fff; color: var(--apx-tinta); }
.aula-examen .aula-diploma__hecho { color: var(--apx-texto); }
.aula-examen .aula-diploma__hecho strong { color: var(--apx-tinta); }

/* La fiesta del 100 %: destellos y esmaltes que caen y la tarjeta de
   "Felicidades". */
.aula-fiesta {
  position: fixed; inset: 0;
  z-index: 450;
  display: grid; place-items: center;
  padding: 1rem;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, rgba(44, 24, 16, 0.6), rgba(23, 17, 14, 0.9));
}
.aula-fiesta__lluvia { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aula-fiesta__pieza {
  position: absolute;
  top: -12%; left: var(--x);
  width: var(--tam);
  animation: aula-cae var(--duracion) linear var(--retraso) infinite;
}
.aula-fiesta__pieza svg { display: block; width: 100%; height: auto; }
.aula-fiesta__pieza.is-destello svg {
  filter: drop-shadow(0 0 6px rgba(232, 183, 171, 0.85));
  animation: aula-brilla 0.9s ease-in-out infinite alternate;
}
@keyframes aula-cae {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translateY(125vh) rotate(var(--giro)); opacity: 0.95; }
}
@keyframes aula-brilla {
  from { transform: scale(0.65); opacity: 0.55; }
  to { transform: scale(1.15); opacity: 1; }
}
.aula-fiesta__tarjeta {
  position: relative; z-index: 1;
  width: min(28rem, 100%);
  padding: 2rem 1.6rem 1.4rem;
  border-radius: 24px;
  background: #fff;
  text-align: center;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
  animation: aula-entra 0.6s var(--ease) both;
}
.aula-fiesta__sello {
  display: inline-grid; place-items: center;
  width: 86px; height: 86px;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #E8B7AB, #B97A6E 60%, #8C5549);
  color: #fff;
  font-size: 1.15rem; font-weight: 700;
  box-shadow: 0 0 0 7px rgba(185, 122, 110, 0.16), 0 12px 30px -10px rgba(140, 85, 73, 0.7);
}
.aula-fiesta__titulo { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.3rem, 9vw, 3.1rem); line-height: 1.05; color: var(--apx-tinta); }
.aula-fiesta__titulo em { font-style: italic; color: var(--apx-acento-titulo); }
.aula-fiesta__texto { margin: 0.5rem 0 0; font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; line-height: 1.3; color: #8C5549; }
.aula-fiesta__detalle { margin: 0.8rem 0 1.1rem; font-size: 0.9rem; line-height: 1.5; color: var(--apx-texto); }
.aula-fiesta__seguir {
  margin-top: 0.5rem;
  padding: 0.6rem;
  border: 0;
  background: none;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #8C5549;
  cursor: pointer;
}

@media (max-width: 480px) {
  .aula-examen { padding: env(safe-area-inset-top) 0 0; }
  .aula-examen__pie { padding-bottom: max(0.9rem, env(safe-area-inset-bottom)); }
  .aula-examen__hoja { border-radius: 0; }
  .aula-examen__cuerpo, .aula-examen__pie { padding-left: 1rem; padding-right: 1rem; }
  .aula-examen__cabeza { padding-left: 1rem; }
  .aula-examen__temas { grid-template-columns: 1fr; }
  .aula-final .aula-boton { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .aula-fiesta__pieza { top: var(--y); animation: none; }
  .aula-fiesta__pieza.is-destello svg { animation: none; }
  .aula-fiesta__tarjeta { animation: none; }
  .aula-test__punto, .aula-test__opcion { transition: none; }
}

@media print {
  .aula-libro--curso,
  .aula-examen,
  .aula-fiesta { display: none !important; }
}

/* ---------- 3. Tu formacion incluye ----------
   Los mismos iconos que la pagina del curso (aprende.html, .apx-icono):
   circulo con filo rosa y el dibujo dentro; el kit, que es el regalo, con el
   circulo relleno en negro cafe y el dibujo rosado. Tres por fila en
   ordenador y dos en el movil: lo que queda solo en su fila (el kit) sale
   centrado. Con varios cursos, cada bloque lleva el nombre del suyo. */
/* La columna, minmax(0, 1fr): un nombre muy largo nunca ensancha los bloques
   mas que la pagina. */
.aula-incluyes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.2rem;
  margin: 0;
}
.aula-incluye {
  padding: 1rem 0 0.4rem;
  text-align: center;
}
.aula-incluye__titulo {
  margin: 0 0 1.6rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 4.6vw, 1.5rem);
  line-height: 1.15;
  color: var(--apx-tinta);
  overflow-wrap: anywhere;
}

.aula-incluye__lista {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.8rem 0;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.aula-incluye__cosa {
  flex: 0 0 50%;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  /* 0.3rem: a 320 px "personalizadas" cabe entera en su casilla. */
  padding: 0 0.3rem;
}
/* Lo que queda solo en su ultima fila (el kit) ocupa la fila entera: sigue
   centrado y su detalle no se parte sin necesidad. */
.aula-incluye__cosa:last-child:nth-child(odd) { flex-basis: 100%; }
@media (min-width: 640px) {
  .aula-incluye__lista { gap: 2.3rem 0; }
  .aula-incluye__cosa { flex-basis: 33.333%; padding: 0 0.8rem; }
  .aula-incluye__cosa:last-child:nth-child(odd) { flex-basis: 33.333%; }
  .aula-incluye__cosa:last-child:nth-child(3n+1) { flex-basis: 100%; }
}
.aula-incluye__icono {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  margin-bottom: 1rem;
  border-radius: 50%;
  border: 1px solid var(--apx-acento);
  color: var(--apx-acento-oscuro);
}
.aula-incluye__cosa.is-destacado .aula-incluye__icono {
  background: #17110E;
  border-color: #17110E;
  color: #D6B39A;
}
/* Nombre y detalle, siempre dentro de su casilla: una palabra que no cabe
   se parte en vez de salirse. */
.aula-incluye__nombre {
  display: block;
  max-width: 100%;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.04rem, 3.6vw, 1.2rem);
  line-height: 1.25;
  color: var(--apx-tinta);
  overflow-wrap: anywhere;
}
.aula-incluye__detalle {
  display: block;
  max-width: min(14rem, 100%);
  overflow-wrap: anywhere;
  margin-top: 0.35rem;
  font-size: 0.84rem; line-height: 1.5;
  color: var(--apx-texto);
}

.aula-despedida {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.1rem;
  margin-top: clamp(2.2rem, 6vw, 3rem);
  text-align: center;
}
.aula-dudas {
  margin: 0;
  font-size: 0.93rem;
  color: var(--apx-texto);
}
.aula-dudas a {
  color: var(--apx-tinta);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(140, 85, 73, 0.55);
  text-underline-offset: 4px;
}
.aula-dudas a:hover { color: var(--apx-acento-oscuro); }
.aula-boton--salir {
  width: auto;
  min-width: 12.5rem;
  margin-top: 0;
  padding-inline: 2.2rem;
}
.aula-despedida .aula-error:not(:empty) { margin-top: 0; }

.aula-noscript {
  margin: 1.5rem 0 0;
  padding: 1rem 1.1rem;
  border-left: 2px solid #B3261E;
  background: #FBEDEA;
  font-size: 0.9rem;
  color: #8C1D18;
}
.aula-noscript a { color: #8C1D18; font-weight: 700; text-decoration: underline; }

/* ---------- Pie ---------- */
.aula-footer { flex-shrink: 0; }
/* Los enlaces legales en una linea con sus puntos (en main.css, ".footer ul"
   los apila uno debajo de otro). */
.aula-footer .footer__legal { display: flex; }
/* En el movil no caben en una linea: sin los puntos (quedaria uno colgando
   al final de la primera); los separa el hueco. */
@media (max-width: 520px) {
  .aula-footer .footer__legal { gap: 0.45rem 1.4rem; }
  .aula-footer .footer__legal li[aria-hidden="true"] { display: none; }
}

/* ---------- Movil estrecho ---------- */
@media (max-width: 380px) {
  .aula-boton { letter-spacing: 0.18em; }
}

/* Quien tiene las animaciones desactivadas no ve ninguna: los apartados se
   abren de golpe y el libro no gira (scripts/aula.js lo cambia con un
   fundido, lo unico que queda). */
@media (prefers-reduced-motion: reduce) {
  .aula-paso, .aula-cargando__punto { animation: none; }
  .aula-boton, .aula-boton:hover { transition: none; transform: none; }
  .aula-apartado,
  .aula-apartado__panel,
  .aula-apartado.is-abierto .aula-apartado__panel,
  .aula-apartado__icono,
  .aula-apartado__chevron { transition: none; }
  .aula-apartado__relleno,
  .aula-apartado.is-abierto .aula-apartado__relleno { transition: none; transform: none; }
  .aula-libro__libro { transition: opacity .18s ease; }
  .aula-hoja, .aula-libro__sombra { transition: none; }
  .aula-hoja.is-girando .aula-hoja__cara::before { animation: none; }
  .aula-hoja__cara--frente .aula-pag--interior::after { transition: none; }
  .aula-libro__flecha, .aula-libro__flecha:hover { transition: none; transform: none; }
  .aula-ventana[open] { animation: none; }
  .aula-casilla, .aula-casilla input, .aula-ventana__cerrar { transition: none; }
}

/* Alto contraste de Windows: los filos dibujados se ven con el color del sistema. */
@media (forced-colors: active) {
  .aula-tarjeta::before,
  .aula-pag--portada::before, .aula-pag--contraportada::before { border-color: CanvasText; }
  .aula-incluye__icono, .aula-apartado__icono, .aula-apartado__chevron { border-color: CanvasText; }
  .aula-apartado { border-color: CanvasText; }
  .aula-hoja__cara { border: 1px solid CanvasText; }
  .aula-libro__flecha { border: 1px solid ButtonText; }
  .aula-libro__flecha[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
  .aula-error:not(:empty)::before { forced-color-adjust: none; }
  /* La casilla, la del sistema: la marca dibujada no se veria. */
  .aula-casilla input { -webkit-appearance: auto; appearance: auto; width: 20px; height: 20px; }
  .aula-politicas__clave, .aula-casilla { border-color: CanvasText; }
  .aula-ventana { border: 1px solid CanvasText; }
}