/* Estilos sacados de docs/maqueta (referencia visual exacta) y docs/BRIEF.md sección 6. */
:root {
  --navy: #1B1452;
  --naranja: #F26A21;
  --naranja-borde: #C4511A;
  --lavanda: #F1EFFB;
  --lavanda-borde: #D8D4EE;
  --lavanda-apagada: #E2DEF5;
  --amarillo: #FBE7A1;
  --durazno: #F4A98A;
  --dorado: #F7C548;
  --texto-2: #4A4570;
  --texto-claro: #D9D8F0;
  --navy-claro: #3A3380;
  --sombra-boton: 0 5px 0 var(--naranja-borde), 0 10px 20px rgba(27,20,82,.16);
  --sombra-boton-apretado: 0 1px 0 var(--naranja-borde), 0 4px 10px rgba(27,20,82,.18);
  --sombra-tarjeta: 0 5px 0 var(--lavanda-borde), 0 12px 24px rgba(27,20,82,.08);
}

* { box-sizing: border-box; }
html { background: var(--lavanda); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--lavanda);
  font-family: Poppins, sans-serif;
  font-weight: 400;
  color: var(--navy);
  -webkit-text-size-adjust: 100%;
}
a { color: var(--navy); }
p, h1, h2 { margin: 0; }
strong { font-weight: 600; }

/* Columna central: pensada para celu (390 px), centrada en compu. */
.pantalla { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }

.nota-mano { font-family: Caveat, cursive; font-weight: 600; color: var(--naranja); }

/* ---------- Botón que se hunde (opción 2 de docs/maqueta/Profundidad) ---------- */
.boton {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 52px; padding: 16px;
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 16px;
  text-align: center; text-decoration: none;
  border: none; border-radius: 14px;
  background: var(--naranja); color: var(--navy);
  box-shadow: var(--sombra-boton);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.boton:active { transform: translateY(4px); box-shadow: var(--sombra-boton-apretado); }
.boton:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.boton.chico { padding: 14px; }

.boton-linea {
  align-self: flex-start; min-height: 44px; padding: 10px 18px;
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 14px;
  border: 1.5px solid var(--navy); border-radius: 12px;
  background: transparent; color: var(--navy); cursor: pointer;
}

.tarjeta { background: #FFFFFF; box-shadow: var(--sombra-tarjeta); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }

.pildora {
  align-self: flex-start;
  font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy); background: var(--amarillo); padding: 4px 10px; border-radius: 999px;
}

.aviso { display: flex; gap: 12px; align-items: flex-start; background: var(--amarillo); border-radius: 14px; padding: 14px 16px; font-size: 14px; line-height: 1.5; }
.aviso svg { flex-shrink: 0; margin-top: 2px; }
.aviso-oscuro { display: flex; gap: 12px; align-items: center; background: var(--navy); border-radius: 16px; padding: 16px; font-size: 14px; line-height: 1.5; color: #FFFFFF; }
.aviso-oscuro svg { flex-shrink: 0; }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label { font-weight: 600; font-size: 14px; }
.campo input {
  font-family: Poppins, sans-serif; font-size: 16px;
  padding: 14px 16px; border: 2px solid var(--lavanda-borde); border-radius: 14px;
  background: #FFFFFF; color: var(--navy); width: 100%;
}
.campo input:focus { outline: none; border-color: var(--navy); }
.campo input.codigo { font-size: 28px; font-weight: 600; letter-spacing: .4em; text-align: center; padding-left: calc(16px + .4em); }
.error { font-size: 14px; line-height: 1.5; font-weight: 600; display: flex; gap: 8px; align-items: flex-start; }
.error svg { flex-shrink: 0; margin-top: 2px; }

/* ---------- 1 · Entrada ---------- */
.cabecera-entrada { background: var(--navy); padding: 56px 28px 40px; display: flex; flex-direction: column; gap: 14px; border-radius: 0 0 32px 32px; }
.cabecera-entrada .nota-mano { font-size: 30px; }
.cabecera-entrada h1 { font-weight: 800; font-size: 38px; line-height: 1.1; color: #FFFFFF; }
.cabecera-entrada p.bajada { font-size: 15px; line-height: 1.5; color: var(--texto-claro); }
.cuerpo-entrada { padding: 40px 28px; display: flex; flex-direction: column; gap: 20px; flex-grow: 1; }
.cuerpo-entrada h2 { font-weight: 600; font-size: 22px; }
.cuerpo-entrada p.explica { font-size: 15px; line-height: 1.5; color: var(--texto-2); }
.prueba { border: 2px dashed var(--navy); border-radius: 14px; padding: 14px 16px; font-size: 14px; line-height: 1.5; background: #FFFFFF; }
.prueba .numero { display: block; font-weight: 800; font-size: 28px; letter-spacing: .2em; margin-top: 4px; }
.pie { padding: 0 28px 32px; font-size: 13px; color: var(--texto-2); }

/* ---------- 2 · Inicio del curso ---------- */
.cabecera-inicio { background: var(--navy); padding: 40px 24px 32px; display: flex; flex-direction: column; gap: 16px; border-radius: 0 0 28px 28px; }
.cabecera-inicio .nota-mano { font-size: 28px; }
.cabecera-inicio h1 { font-weight: 800; font-size: 28px; line-height: 1.15; color: #FFFFFF; }
.avance { display: flex; flex-direction: column; gap: 8px; }
.avance-texto { display: flex; justify-content: space-between; font-size: 14px; color: var(--texto-claro); }
.avance-texto strong { color: #FFFFFF; }
.barra { height: 10px; border-radius: 5px; background: var(--navy-claro); overflow: hidden; }
.barra > div { height: 10px; border-radius: 5px; background: var(--naranja); }

.cuerpo-inicio { padding: 24px; display: flex; flex-direction: column; gap: 24px; }
.tarjeta h2 { font-weight: 600; font-size: 20px; line-height: 1.3; }
.tarjeta .meta { font-size: 14px; color: var(--texto-2); }
.lista { display: flex; flex-direction: column; gap: 12px; }
.lista > h2 { font-weight: 600; font-size: 18px; }
.lista ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.item {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--navy);
  background: #FFFFFF; box-shadow: var(--sombra-tarjeta); border-radius: 16px; padding: 12px 14px; min-height: 64px;
}
.item.cerrada { opacity: .75; }
.circulo { width: 40px; height: 40px; border-radius: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.circulo.vista { background: var(--navy); }
.circulo.disponible { background: var(--naranja); }
.circulo.cerrada { background: var(--lavanda-apagada); }
.item-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item-titulo { font-weight: 600; font-size: 15px; }
.item-estado { font-size: 13px; color: var(--navy); }
.item.cerrada .item-estado { color: var(--texto-2); }

/* ---------- 3 · Clase ---------- */
.barra-clase { padding: 20px 16px 8px; display: flex; align-items: center; justify-content: space-between; }
.volver { display: flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; font-weight: 600; font-size: 15px; }
.barra-clase .contador { font-size: 14px; color: var(--texto-2); }
.titulo-clase { padding: 8px 24px 0; display: flex; flex-direction: column; gap: 6px; }
.titulo-clase .dia { font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.titulo-clase h1 { font-weight: 800; font-size: 28px; line-height: 1.15; }

.video { position: relative; margin: 20px 16px 0; aspect-ratio: 16 / 9; border-radius: 20px; background: var(--navy); overflow: hidden; }
.video video, .video iframe { width: 100%; height: 100%; display: block; border: 0; background: var(--navy); }
.video-tapa { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--navy); border: none; cursor: pointer; font-family: Poppins, sans-serif; width: 100%; }
.video-tapa .play { width: 64px; height: 64px; border-radius: 32px; background: var(--naranja); display: flex; align-items: center; justify-content: center; }
.video-tapa .duracion { font-size: 13px; color: var(--texto-claro); }
.video-tapa[hidden] { display: none; }

.cuerpo-clase { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.texto-clase { display: flex; flex-direction: column; gap: 14px; }
.texto-clase p { font-size: 16px; line-height: 1.6; }
.material { display: flex; align-items: center; gap: 14px; text-decoration: none; background: #FFFFFF; box-shadow: var(--sombra-tarjeta); border-radius: 16px; padding: 14px 16px; }
.material .icono { width: 44px; height: 44px; border-radius: 12px; background: var(--amarillo); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.estado-vista { display: flex; align-items: center; gap: 12px; background: #FFFFFF; box-shadow: var(--sombra-tarjeta); border-radius: 16px; padding: 14px 16px; font-weight: 600; font-size: 15px; }
.estado-vista .circulo { width: 36px; height: 36px; }
.festejo { font-size: 26px; text-align: center; }