/* Método Permiso B
   Lenguaje visual: señalización viaria española. Azul de señal informativa, rojo de
   prohibición para el error, placa blanca sobre azul para la marca. Una sola familia
   tipográfica (Archivo, grotesca próxima a la rotulación viaria) con pesos contrastados.
   Mobile-first: todo se escribe para 360 px y se ensancha después. */

:root {
  --tinta: #14181c;
  --tinta-suave: #5a6672;
  --fondo: #ffffff;
  --fondo-alt: #eef1f5;
  --borde: #d8dee6;
  --acento: #0a4c9e;
  --acento-oscuro: #073a7a;
  --senal-rojo: #c8102e;
  --exito: #12784a;
  --alerta: #a8520c;
  --error: #c8102e;
  --radio: 10px;
  --ancho: 620px;
  --fuente: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fondo);
}

img, svg { max-width: 100%; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Marca: placa de señal ---------- */

.marca {
  display: inline-block;
  margin: 0 0 20px;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--acento);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.marca a { color: inherit; text-decoration: none; }

/* ---------- Tipografía ---------- */

h1 {
  font-size: 31px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  text-wrap: balance;
}

h2 {
  font-size: 23px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  text-wrap: balance;
}

h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
}

p { margin: 0 0 14px; }

p:last-child { margin-bottom: 0; }

a { color: var(--acento); }

.entradilla {
  font-size: 18px;
  line-height: 1.5;
  color: var(--tinta-suave);
}

/* As seções se separam por espaço, não por régua. A única linha horizontal que sobrou
   na página é a que delimita cada pergunta frequente, onde ela marca área clicável. */
.seccion { padding: 30px 0; }

/* ---------- Hero ---------- */

header.hero {
  padding: 26px 0 34px;
}

header.hero h1 { margin-bottom: 12px; }

/* ---------- Pregunta interactiva del hero ---------- */

.demo {
  border: 1px solid var(--borde);
  border-top: 4px solid var(--acento);
  border-radius: var(--radio);
  padding: 18px 16px;
  margin: 24px 0 20px;
  background: #fff;
}

.demo-rotulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--acento);
  margin: 0 0 8px;
}

.demo-enunciado {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 14px;
}

/* ---------- Botones ---------- */

.boton {
  display: block;
  width: 100%;
  padding: 15px 20px;
  border: 0;
  border-radius: var(--radio);
  background: var(--acento);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.boton:hover { background: var(--acento-oscuro); }

.boton:focus-visible { outline: 3px solid var(--senal-rojo); outline-offset: 2px; }

.boton:disabled { background: #a6b0bb; cursor: not-allowed; }

.boton.secundario {
  background: transparent;
  color: var(--acento);
  border: 2px solid var(--acento);
  padding: 13px 20px;
}

.boton.secundario:hover { background: var(--fondo-alt); }

.bajo-boton {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--tinta-suave);
  text-align: center;
}

/* ---------- Lista de prestaciones ---------- */

ul.lista {
  margin: 0 0 18px;
  padding-left: 20px;
}

ul.lista li { margin-bottom: 8px; }

.prestaciones {
  list-style: none;
  margin: 0;
  padding: 0;
}

.prestaciones li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.prestaciones li:last-child { margin-bottom: 0; }

.prestaciones .icono {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-top: 2px;
}

.prestaciones p { margin: 0; font-size: 15px; color: var(--tinta-suave); }

/* ---------- Banda azul de la oferta ---------- */

.banda {
  background: var(--acento);
  color: #fff;
  padding: 34px 0;
  margin: 0;
}

.banda h2, .banda strong { color: #fff; }

.banda p { color: #dce6f5; }

.banda .boton {
  background: #fff;
  color: var(--acento);
}

.banda .boton:hover { background: #e6eefb; }

.banda .bajo-boton { color: #cfdcf0; }

.banda ul.lista { color: #eaf1fb; }

.banda .precio strong { color: #fff; }

.banda .precio span { color: #cfdcf0; }

.banda a { color: #fff; }

/* ---------- Tarjeta y precio ---------- */

.tarjeta {
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px 16px;
  margin: 20px 0;
}

.precio {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.precio strong { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }

.precio span { color: var(--tinta-suave); font-size: 15px; }

.entrega {
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radio);
  padding: 14px;
  margin: 18px 0;
  font-size: 15px;
}

.entrega p { margin-bottom: 0; }

/* ---------- Aviso legal ---------- */

.aviso {
  border-left: 4px solid var(--alerta);
  padding: 2px 0 2px 14px;
  margin: 18px 0 0;
  color: var(--tinta-suave);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- Formulario ---------- */

form.captacion { margin: 16px 0 0; }

label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; }

input[type="email"], input[type="password"] {
  width: 100%;
  padding: 14px;
  font-size: 17px;
  font-family: inherit;
  color: var(--tinta);
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: 10px;
}

input[type="email"]:focus, input[type="password"]:focus { outline: 3px solid var(--acento); outline-offset: 1px; }

/* ---------- Panel del alumno ---------- */

/* La cabecera necesita el mismo aire que header.hero: sin esto la placa de marca
   queda pegada al borde superior de la ventana y la página parece rota. */
.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 26px;
}

header.hero .cabecera { padding-top: 0; }

.cabecera .marca { margin-bottom: 20px; }

.entrar {
  font-size: 15px;
  font-weight: 700;
  color: var(--acento);
  text-decoration: none;
  padding: 6px 12px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  white-space: nowrap;
  margin-bottom: 20px;
}

.entrar:hover { border-color: var(--acento); background: var(--fondo-alt); }

/* Lista de recursos del panel: cada uno una fila tocable de lado a lado. */
.recursos { list-style: none; padding: 0; margin: 0; }

.recursos li { margin-bottom: 10px; }

.recursos a {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: #fff;
  color: var(--tinta);
  text-decoration: none;
  font-weight: 700;
}

.recursos a:hover { border-color: var(--acento); background: var(--fondo-alt); }

.recursos small { display: block; font-weight: 400; font-size: 14px; color: var(--tinta-suave); margin-top: 2px; }

.estado {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.estado.fundador { background: #e7f2ec; color: var(--exito); }
.estado.libre { background: var(--fondo-alt); color: var(--tinta-suave); }

/* Pestañas entrar / crear cuenta: un control segmentado que ocupa todo el ancho.
   Antes eran dos botones pequeños y la pestaña activa se leía como un botón suelto
   encajado en la esquina. */
.pestanas {
  display: flex;
  padding: 4px;
  margin-bottom: 18px;
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.pestanas button {
  flex: 1 1 0;
  padding: 12px 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--tinta-suave);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.pestanas button[aria-selected="true"] {
  background: #fff;
  color: var(--acento);
  box-shadow: 0 1px 3px rgba(20, 24, 28, 0.16);
}

.pestanas button:focus-visible { outline: 3px solid var(--acento); outline-offset: 1px; }

/* La tarjeta de acceso respira más que una tarjeta normal: es el formulario
   principal de la página, no un aparte. */
.tarjeta.acceso { padding: 20px 18px 22px; background: #fff; }

.tarjeta.acceso .boton { margin-top: 4px; }

/* Enlace secundario bajo el formulario, alineado y sin peso de botón. */
.enlace-suave {
  display: inline-block;
  margin-top: 14px;
  font-size: 15px;
  color: var(--acento);
}

/* Barra de identidad del panel: quién eres y el botón de salir, sin ocupar
   media pantalla como ocupaba antes. */
.identidad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 22px;
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.identidad .correo {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  word-break: break-all;
}

.identidad .boton {
  width: auto;
  padding: 9px 16px;
  font-size: 15px;
}

/* Flecha de enlace externo: el material abre en otra pestaña y hay que decirlo
   antes de que la persona toque, no después. */
.recursos a { position: relative; padding-right: 44px; }

.recursos a::after {
  content: "↗";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  color: var(--acento);
  font-size: 18px;
}

/* ---------- Panel de administración ---------- */

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.cifra {
  padding: 14px;
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.cifra strong { display: block; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; }

.cifra span { font-size: 13px; color: var(--tinta-suave); }

.cifra.alerta { border-color: var(--error); }
.cifra.alerta strong { color: var(--error); }

/* Una tabla ancha no puede empujar la página entera en el móvil. */
.tabla-envoltorio { overflow-x: auto; margin-bottom: 24px; }

table.datos { width: 100%; border-collapse: collapse; font-size: 14px; }

table.datos th, table.datos td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

table.datos th { font-size: 13px; color: var(--tinta-suave); font-weight: 700; }

table.datos td.correo { white-space: normal; word-break: break-all; min-width: 200px; }

table.datos tr:hover td { background: var(--fondo-alt); }

.etiqueta {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.etiqueta.si { background: #e7f2ec; color: var(--exito); }
.etiqueta.no { background: var(--fondo-alt); color: var(--tinta-suave); }
.etiqueta.admin { background: #fdeef0; color: var(--senal-rojo); }

button.mini {
  padding: 7px 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--acento);
  background: #fff;
  border: 2px solid var(--acento);
  border-radius: 7px;
  cursor: pointer;
}

button.mini:hover { background: var(--fondo-alt); }
button.mini:disabled { opacity: 0.5; cursor: wait; }
button.mini.quitar { color: var(--senal-rojo); border-color: var(--senal-rojo); }

input.buscador {
  width: 100%;
  padding: 13px 14px;
  margin-bottom: 18px;
  font-family: inherit;
  font-size: 16px;
  color: var(--tinta);
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

input.buscador:focus { outline: 3px solid var(--acento); outline-offset: 1px; }

.mensaje { font-size: 15px; margin-top: 10px; }
.mensaje.error { color: var(--error); }
.mensaje.ok { color: var(--exito); }

/* ---------- Opciones de respuesta ---------- */

.opcion {
  display: block;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 13px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  background: #fff;
  font-size: 16px;
  font-weight: 400;
}

.opcion:hover { border-color: var(--acento); }

.opcion:focus-within { outline: 3px solid var(--acento); outline-offset: 1px; }

.opcion input { margin-right: 10px; }

.opcion.correcta { border-color: var(--exito); border-width: 2px; background: #edf7f1; }
.opcion.incorrecta { border-color: var(--error); border-width: 2px; background: #fdeef0; }
.opcion.bloqueada { cursor: default; }

/* El botón de avanzar solo aparece después de responder, dentro de #acciones. */
#acciones .boton { margin-top: 14px; }

/* ---------- Progreso de la muestra ---------- */

.progreso {
  font-size: 14px;
  color: var(--tinta-suave);
  margin-bottom: 8px;
}

.barra {
  height: 6px;
  background: var(--borde);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 22px;
}

.barra > i { display: block; height: 100%; background: var(--acento); transition: width .2s; }

/* ---------- Explicación y fuente ---------- */

.explicacion {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--fondo-alt);
  border-radius: var(--radio);
  font-size: 15px;
  color: var(--tinta-suave);
}

.explicacion strong { color: var(--tinta); }

.fuente {
  font-size: 13px;
  color: var(--tinta-suave);
  margin-top: 8px;
}

/* ---------- Tabla de temas ---------- */

table.temas { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 15px; }
table.temas th, table.temas td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borde); }
table.temas td.num { text-align: right; white-space: nowrap; }

/* ---------- Preguntas frecuentes ---------- */

details.faq {
  border-bottom: 1px solid var(--borde);
  padding: 14px 0;
}

details.faq:last-of-type { border-bottom: 0; }

details.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  list-style: none;
  padding-right: 28px;
  position: relative;
}

details.faq summary::-webkit-details-marker { display: none; }

details.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: -2px;
  font-size: 22px;
  font-weight: 400;
  color: var(--acento);
}

details.faq[open] summary::after { content: "\2212"; }

details.faq summary:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

details.faq p {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--tinta-suave);
}

/* ---------- Barra fija de acción en móvil ---------- */

.barra-fija {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: rgba(255,255,255,0.97);
  border-top: 1px solid var(--borde);
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
}

.barra-fija[hidden] { display: none; }

.barra-fija .boton { padding: 13px 20px; font-size: 16px; }

body.con-barra-fija { padding-bottom: 84px; }

/* ---------- Pie ---------- */

footer {
  margin: 40px 0 0;
  padding: 0 0 40px;
  font-size: 14px;
  color: var(--tinta-suave);
}

footer a { color: var(--tinta-suave); }

/* Los enlaces legales van en una sola línea que envuelve, separados por espacio.
   Paddle exige que la web enlace condiciones, privacidad y reembolso para verificar
   el dominio, y el comprador tiene que encontrarlos sin buscar. */
.legales {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

/* ---------- Ventana de la muestra ---------- */

.ventana {
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: var(--tinta);
  background: var(--fondo);
  overflow: hidden;
}

.ventana::backdrop { background: rgba(10, 24, 40, 0.55); }

.ventana-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--acento);
  color: #fff;
}

.ventana-titulo { margin: 0; font-size: 16px; font-weight: 700; }

.cerrar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
}

.cerrar:hover { background: rgba(255, 255, 255, 0.3); }

.cerrar:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.ventana-cuerpo {
  padding: 18px 16px 22px;
  max-height: calc(92vh - 64px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ventana-cuerpo h2.pregunta { margin-top: 0; }

/* Na janela, largura toda também no escritório: o inline-block de 300px deixava um vão à direita. */
.ventana-cuerpo .boton { display: block; width: 100%; margin-top: 6px; }

.ventana-cuerpo .boton.secundario { margin-top: 10px; }

h2.pregunta { margin-top: 0; }

/* Botón de compra mientras el checkout sigue cerrado. */
.boton.apagado { background: #a6b0bb; color: #fff; }
.boton.apagado:hover { background: #a6b0bb; }

/* ---------- Escritorio ---------- */

@media (min-width: 640px) {
  body { font-size: 18px; }
  h1 { font-size: 42px; }
  h2 { font-size: 27px; }
  .entradilla { font-size: 20px; }
  .boton { display: inline-block; width: auto; min-width: 300px; }
  .bajo-boton { text-align: left; }
  .tarjeta, .demo { padding: 24px; }
  .seccion { padding: 44px 0; }
  .banda { padding: 44px 0; }
  .barra-fija { display: none; }
  body.con-barra-fija { padding-bottom: 0; }
}

/* ---------- Área de estudio ---------- */
/* Barras de nivel por tema: rojo de prohibición donde se falla, verde donde no.
   El color no es la única señal, el porcentaje va escrito al lado. */

.barra-tema { margin-bottom: 14px; }

.barra-etiqueta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
  font-size: 15px;
}

.barra-etiqueta strong { white-space: nowrap; }

.barra {
  height: 10px;
  background: var(--fondo-alt);
  border-radius: 999px;
  overflow: hidden;
}

.barra span {
  display: block;
  height: 100%;
  background: var(--exito);
  border-radius: 999px;
}

.barra span.flojo { background: var(--senal-rojo); }
.barra span.medio { background: var(--alerta); }

/* Plan de 21 días */

.plan { list-style: none; padding: 0; margin: 0 0 24px; }

.plan .dia {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #fff;
}

.plan .dia.hecho { background: var(--fondo-alt); }
.plan .dia.hecho .dia-numero { color: var(--exito); }

.dia-cabecera { display: flex; align-items: flex-start; gap: 10px; }
.dia-cabecera input { margin-top: 6px; width: 20px; height: 20px; flex: none; }
.dia-cabecera label { cursor: pointer; }
.dia-numero { display: block; font-size: 13px; color: var(--tinta-suave); font-weight: 700; }
.dia-texto { margin: 6px 0 12px; font-size: 15px; color: var(--tinta-suave); }
.plan .dia .boton { padding: 10px 16px; font-size: 15px; }

/* Fichas de teoría */

.punto {
  border-left: 4px solid var(--acento);
  padding: 2px 0 2px 14px;
  margin-bottom: 18px;
}

.punto h3 { margin: 0 0 4px; font-size: 18px; }
.punto p { margin: 0 0 4px; }

/* Examen */

.barra-examen {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.reloj {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 20px;
  margin: 0;
}

.reloj.apurado { color: var(--senal-rojo); }

.acciones-examen { display: flex; gap: 10px; margin-top: 16px; }
.acciones-examen .boton { margin: 0; }

.revision.acierto { border-left: 5px solid var(--exito); }
.revision.fallo { border-left: 5px solid var(--senal-rojo); }
.revision .opcion { margin-bottom: 6px; font-size: 15px; }

/* El mismo enlace secundario, cuando quien lo lleva es un <button>: en el área de
   estudio son acciones de la página, no navegación, y deben serlo también para el
   teclado y el lector de pantalla. */
button.enlace-suave {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  text-decoration: underline;
}

/* Un botón secundario deshabilitado (el "Anterior" de la primera pregunta) tiene
   que parecerlo: sin esto se ve idéntico al activo y solo se descubre al tocarlo. */
.boton.secundario:disabled {
  background: #fff;
  border-color: var(--borde);
  color: #a6b0bb;
  cursor: not-allowed;
}