/* Archivo generado automáticamente por scripts/build.js.
   No lo edites: modifica los archivos de src/recursos/css. */

/* ===== Archivo de origen: 01-variables.css ===== */
/* =====================================================
   01. VARIABLES DEL SISTEMA DE DISEÑO
   -----------------------------------------------------
   ★ ZONA CONFIGURABLE ★
   Aquí se definen los colores, tipografías, tamaños,
   espaciados y sombras de TODA la web. Cambiar un valor
   aquí lo cambia en todas las páginas.
===================================================== */

:root {

  /* -----------------------------------------------
     1.1. PALETA BASE
     Colores "puros". No se usan directamente en los
     componentes: se usan a través de los colores de
     función del apartado 1.2.
  ----------------------------------------------- */
  --color-tinta: #14202E;            /* Casi negro azulado: texto y fondos oscuros */
  --color-primario: #1F3A5F;         /* Azul tinta: color principal del despacho */
  --color-primario-oscuro: #16304F;  /* Azul para el estado "hover" */
  --color-primario-suave: #E8EEF5;   /* Azul muy claro para fondos de apoyo */

  --color-acento: #A87B45;           /* Latón: detalles y filetes (no para texto pequeño) */
  --color-acento-texto: #7F5A2E;     /* Latón oscuro: apto para texto (contraste AA) */
  --color-acento-claro: #D4B184;     /* Latón claro: texto sobre fondos oscuros */

  --color-academia: #2E6A5E;         /* Verde pizarra: identidad de la academia */
  --color-academia-oscuro: #245549;
  --color-academia-suave: #E6F0ED;

  --color-papel: #F7F5F0;            /* Fondo cálido de secciones alternas */
  --color-blanco: #FFFFFF;
  --color-linea: #E2DDD3;            /* Bordes y separadores */
  --color-linea-fuerte: #CBC4B7;     /* Bordes de campos de formulario */
  --color-texto-suave: #5A6472;      /* Texto secundario */

  --color-exito: #2F6B3B;
  --color-exito-suave: #E7F1E9;
  --color-aviso: #8A5A00;
  --color-aviso-suave: #FBF3E2;
  --color-error: #A3352B;
  --color-error-suave: #FBEAE8;

  /* -----------------------------------------------
     1.2. COLORES DE FUNCIÓN
     Los componentes usan estas variables. La academia
     redefine "--color-marca" para usar el verde.
  ----------------------------------------------- */
  --color-texto: var(--color-tinta);
  --color-fondo: var(--color-blanco);
  --color-marca: var(--color-primario);
  --color-marca-hover: var(--color-primario-oscuro);
  --color-marca-suave: var(--color-primario-suave);
  --color-enlace: var(--color-primario);
  --color-foco: var(--color-primario);

  /* -----------------------------------------------
     1.3. TIPOGRAFÍAS
     Para cambiar de tipografía: sustituye el archivo
     en src/recursos/fuentes, ajusta @font-face en
     03-tipografia.css y cambia el nombre aquí.
  ----------------------------------------------- */
  --fuente-titulares: "Source Serif 4", Georgia, "Times New Roman", serif;
  --fuente-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Tamaños de texto. clamp(mínimo, ideal, máximo) hace que
     el tamaño se adapte al ancho de la pantalla. */
  --texto-xs: 0.78rem;
  --texto-sm: 0.875rem;
  --texto-base: 1.0625rem;           /* 17 px */
  --texto-lg: 1.1875rem;
  --texto-xl: 1.375rem;
  --titulo-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.45rem);
  --titulo-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem);
  --titulo-h1: clamp(2.2rem, 1.6rem + 2.6vw, 3.5rem);

  --interlineado-texto: 1.65;
  --interlineado-titulos: 1.18;

  /* -----------------------------------------------
     1.4. ESPACIADO (escala de 4 en 4 píxeles)
  ----------------------------------------------- */
  --espacio-1: 0.25rem;   /*  4 px */
  --espacio-2: 0.5rem;    /*  8 px */
  --espacio-3: 0.75rem;   /* 12 px */
  --espacio-4: 1rem;      /* 16 px */
  --espacio-5: 1.5rem;    /* 24 px */
  --espacio-6: 2rem;      /* 32 px */
  --espacio-7: 3rem;      /* 48 px */
  --espacio-8: 4rem;      /* 64 px */
  --espacio-9: 6rem;      /* 96 px */

  /* -----------------------------------------------
     1.5. FORMAS, SOMBRAS Y TRANSICIONES
  ----------------------------------------------- */
  --radio-pequeno: 4px;
  --radio: 8px;
  --radio-grande: 12px;
  --radio-pildora: 999px;

  --sombra-suave: 0 1px 2px rgba(20, 32, 46, 0.05), 0 4px 16px rgba(20, 32, 46, 0.05);
  --sombra-media: 0 2px 4px rgba(20, 32, 46, 0.06), 0 12px 32px rgba(20, 32, 46, 0.09);
  --sombra-panel: 0 0 0 1px rgba(20, 32, 46, 0.04), 0 16px 48px rgba(20, 32, 46, 0.18);

  --transicion-rapida: 150ms ease;
  --transicion: 220ms ease;

  /* -----------------------------------------------
     1.6. MEDIDAS DE LA ESTRUCTURA
  ----------------------------------------------- */
  --ancho-maximo: 1180px;
  --ancho-texto: 68ch;                /* Ancho cómodo para leer párrafos */
  --margen-lateral: 20px;
  --altura-cabecera: 76px;

  /* Capas (qué elemento queda encima de otro) */
  --capa-cabecera: 100;
  --capa-menu: 200;
  --capa-panel: 300;
  --capa-aviso: 400;
}


/* ===== Archivo de origen: 02-base.css ===== */
/* =====================================================
   02. ESTILOS GLOBALES
   -----------------------------------------------------
   Reglas básicas que afectan a toda la web: reinicio de
   márgenes, imágenes, enlaces, foco del teclado y
   utilidades de accesibilidad.
===================================================== */

/* -----------------------------------------------
   2.1. REINICIO BÁSICO
----------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Al saltar a un ancla (#planes), deja hueco para la cabecera fija */
  scroll-padding-top: calc(var(--altura-cabecera) + var(--espacio-4));
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);
  line-height: var(--interlineado-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* -----------------------------------------------
   2.2. ENLACES
----------------------------------------------- */
a {
  color: var(--color-enlace);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* -----------------------------------------------
   2.3. FOCO DEL TECLADO
   Visible solo cuando se navega con teclado
   (no aparece al hacer clic con el ratón).
----------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-foco);
  outline-offset: 3px;
  border-radius: var(--radio-pequeno);
}

::selection {
  background: var(--color-marca-suave);
  color: var(--color-tinta);
}

/* -----------------------------------------------
   2.4. UTILIDADES DE ACCESIBILIDAD
----------------------------------------------- */

/* El atributo hidden siempre oculta, aunque el componente
   tenga su propio "display" (flex, grid…). */
[hidden] {
  display: none !important;
}

/* Oculta un elemento a la vista pero lo deja disponible
   para lectores de pantalla. */
.solo-lectores {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Enlace "Saltar al contenido": solo aparece al tabular. */
.saltar-contenido {
  position: absolute;
  top: -100px;
  left: var(--espacio-4);
  z-index: var(--capa-aviso);
  padding: var(--espacio-2) var(--espacio-4);
  background: var(--color-tinta);
  color: var(--color-blanco);
  border-radius: var(--radio);
}

.saltar-contenido:focus {
  top: var(--espacio-2);
}

/* -----------------------------------------------
   2.5. MOVIMIENTO REDUCIDO
   Si la persona ha pedido a su sistema menos
   animaciones, se desactivan.
----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Aviso visible en las páginas de maqueta (nunca en producción) */
.aviso-maqueta {
  background: var(--color-aviso-suave);
  color: var(--color-aviso);
  font-size: var(--texto-sm);
  text-align: center;
  padding: var(--espacio-2) var(--espacio-4);
  border-bottom: 1px solid #EBD9B4;
}


/* ===== Archivo de origen: 03-tipografia.css ===== */
/* =====================================================
   03. TIPOGRAFÍA
   -----------------------------------------------------
   Carga de las fuentes (alojadas en la propia web, sin
   llamadas a Google) y estilos de titulares y textos.
===================================================== */

/* -----------------------------------------------
   3.1. CARGA DE FUENTES
   Fuentes "variables": un solo archivo contiene
   todos los grosores (de fino a negrita).
   Licencia: SIL Open Font License (ver carpeta fuentes).
----------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/recursos/fuentes/inter-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/recursos/fuentes/source-serif-4-variable.woff2") format("woff2");
}

/* -----------------------------------------------
   3.2. TITULARES
----------------------------------------------- */
h1,
h2,
h3,
h4 {
  margin: 0 0 var(--espacio-4);
  font-family: var(--fuente-titulares);
  font-weight: 600;
  line-height: var(--interlineado-titulos);
  color: var(--color-tinta);
  text-wrap: balance;  /* Reparte mejor las palabras en varias líneas */
}

h1 { font-size: var(--titulo-h1); letter-spacing: -0.015em; }
h2 { font-size: var(--titulo-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--titulo-h3); }
h4 { font-size: var(--texto-lg); font-family: var(--fuente-texto); font-weight: 600; }

/* -----------------------------------------------
   3.3. TEXTO
----------------------------------------------- */
p {
  margin: 0 0 var(--espacio-4);
  text-wrap: pretty;  /* Evita palabras sueltas al final de párrafo */
}

ul,
ol {
  margin: 0 0 var(--espacio-4);
  padding-left: 1.25em;
}

li + li {
  margin-top: var(--espacio-1);
}

strong {
  font-weight: 600;
}

small {
  font-size: var(--texto-sm);
}

/* -----------------------------------------------
   3.4. CLASES DE TEXTO REUTILIZABLES
----------------------------------------------- */

/* Antetítulo en mayúsculas pequeñas sobre un titular */
.antetitulo {
  display: block;
  margin-bottom: var(--espacio-3);
  font-family: var(--fuente-texto);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-acento-texto);
}

/* Párrafo de introducción, algo más grande */
.entradilla {
  font-size: var(--texto-lg);
  color: var(--color-texto-suave);
  max-width: var(--ancho-texto);
}

/* Permite dar a un título el tamaño de otro nivel sin
   alterar la jerarquía (p. ej. un <h2> con aspecto de h3) */
.h2 { font-size: var(--titulo-h2); }
.h3 { font-size: var(--titulo-h3); }

.texto-suave { color: var(--color-texto-suave); }
.texto-pequeno { font-size: var(--texto-sm); }
.texto-centrado { text-align: center; }

/* Bloque de texto largo (artículos, páginas legales) */
.texto-largo {
  max-width: var(--ancho-texto);
}

.texto-largo h2 { margin-top: var(--espacio-7); }
.texto-largo h3 { margin-top: var(--espacio-6); }

/* Marcador de dato pendiente: [NOMBRE], [PRECIO]… */
.marcador {
  background: var(--color-aviso-suave);
  color: var(--color-aviso);
  padding: 0 0.3em;
  border-radius: var(--radio-pequeno);
  font-family: var(--fuente-texto);
  font-size: 0.9em;
  font-weight: 500;
}


/* ===== Archivo de origen: 04-estructura.css ===== */
/* =====================================================
   04. ESTRUCTURA Y RETÍCULA
   -----------------------------------------------------
   Contenedores, secciones y cuadrículas que se usan
   para colocar el contenido en todas las páginas.
===================================================== */

/* -----------------------------------------------
   4.1. CONTENEDOR
   Limita el ancho del contenido y lo centra.
----------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: calc(var(--ancho-maximo) + var(--margen-lateral) * 2);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.contenedor--estrecho {
  max-width: calc(820px + var(--margen-lateral) * 2);
}

/* -----------------------------------------------
   4.2. SECCIONES
   Cada bloque horizontal de una página.
----------------------------------------------- */
.seccion {
  padding-block: var(--espacio-9);
}

.seccion--compacta {
  padding-block: var(--espacio-7);
}

.seccion--papel {
  background: var(--color-papel);
}

/* Línea fina arriba: separa dos secciones seguidas del mismo color */
.seccion--separada {
  border-top: 1px solid var(--color-linea);
}

.seccion--oscura {
  background: var(--color-tinta);
  color: #E9ECF0;
}

.seccion--oscura h1,
.seccion--oscura h2,
.seccion--oscura h3 {
  color: var(--color-blanco);
}

.seccion--oscura .antetitulo {
  color: var(--color-acento-claro);
}

/* La entradilla, más clara para que se lea sobre el fondo oscuro */
.seccion--oscura .entradilla {
  color: #C9D0D9;
}

/* Las tarjetas (fondo blanco) conservan sus colores normales
   aunque estén dentro de una banda oscura */
.seccion--oscura .tarjeta {
  color: var(--color-texto);
}

.seccion--oscura .tarjeta h3 {
  color: var(--color-tinta);
}

.seccion--oscura .tarjeta .antetitulo {
  color: var(--color-acento-texto);
}

/* Cabecera de sección: antetítulo + título + entradilla */
.seccion__cabecera {
  max-width: 760px;
  margin-bottom: var(--espacio-7);
}

.seccion__cabecera--centrada {
  margin-inline: auto;
  text-align: center;
}

/* -----------------------------------------------
   4.3. CUADRÍCULAS
----------------------------------------------- */
.rejilla {
  display: grid;
  gap: var(--espacio-5);
}

.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Columnas que se reparten solas según el espacio disponible */
.rejilla--auto {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

/* -----------------------------------------------
   4.4. AGRUPACIONES
----------------------------------------------- */

/* Elementos en fila que pasan a la línea siguiente si no caben
   (por ejemplo, varios botones). */
.grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
}

/* Elementos apilados con separación uniforme */
.pila > * + * {
  margin-top: var(--espacio-4);
}


/* ===== Archivo de origen: 05-cabecera.css ===== */
/* =====================================================
   05. CABECERA
   -----------------------------------------------------
   Barra superior (teléfono, WhatsApp, acceso alumnos),
   cabecera fija con el logotipo y botón del menú móvil.
   El menú en sí está en 06-navegacion.css.
===================================================== */

/* -----------------------------------------------
   5.1. BARRA SUPERIOR
----------------------------------------------- */
.barra-superior {
  background: var(--color-tinta);
  color: #C9D0D9;
  font-size: var(--texto-sm);
}

.barra-superior__fila {
  display: flex;
  align-items: center;
  justify-content: flex-end;  /* enlaces (alumnos, teléfono, WhatsApp) a la derecha */
  gap: var(--espacio-4);
  min-height: 38px;
}

.barra-superior__enlaces {
  display: flex;
  align-items: center;
  gap: var(--espacio-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.barra-superior__enlaces li + li {
  margin-top: 0;
}

.barra-superior a {
  color: #E9ECF0;
  text-decoration: none;
}

.barra-superior a:hover {
  color: var(--color-blanco);
  text-decoration: underline;
}

/* Enlace "Acceso alumnos" con el color de la academia */
.barra-superior__alumnos {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
}

.barra-superior__alumnos::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6FB3A4;
}

/* -----------------------------------------------
   5.2. CABECERA PRINCIPAL (se queda fija al bajar)
----------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: var(--capa-cabecera);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-linea);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-5);
  height: var(--altura-cabecera);
}

/* -----------------------------------------------
   5.3. LOGOTIPO TIPOGRÁFICO
   Mientras no haya logotipo gráfico, el nombre del
   despacho (de despacho.json) hace de logotipo.
----------------------------------------------- */
.logotipo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--color-tinta);
  text-decoration: none;
  line-height: 1.1;
}

.logotipo__nombre {
  font-family: var(--fuente-titulares);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Punto de color latón tras el nombre */
.logotipo__nombre::after {
  content: ".";
  color: var(--color-acento);
}

.logotipo__descriptor {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

/* Variante de la academia: añade la palabra "Academia" */
.logotipo__academia {
  color: var(--color-academia);
}

/* -----------------------------------------------
   5.4. BOTÓN DEL MENÚ MÓVIL
   Oculto en escritorio; aparece en 12-responsive.css
----------------------------------------------- */
.boton-menu {
  display: none;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-3);
  background: transparent;
  border: 1px solid var(--color-linea-fuerte);
  border-radius: var(--radio);
  font-size: var(--texto-sm);
  font-weight: 500;
}

/* Icono de tres rayas dibujado con CSS */
.boton-menu__icono,
.boton-menu__icono::before,
.boton-menu__icono::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transicion), opacity var(--transicion);
}

.boton-menu__icono {
  position: relative;
}

.boton-menu__icono::before,
.boton-menu__icono::after {
  content: "";
  position: absolute;
  left: 0;
}

.boton-menu__icono::before { top: -6px; }
.boton-menu__icono::after  { top: 6px; }

/* Cuando el menú está abierto, las rayas forman una X */
.boton-menu[aria-expanded="true"] .boton-menu__icono {
  background: transparent;
}

.boton-menu[aria-expanded="true"] .boton-menu__icono::before {
  transform: translateY(6px) rotate(45deg);
}

.boton-menu[aria-expanded="true"] .boton-menu__icono::after {
  transform: translateY(-6px) rotate(-45deg);
}


/* ===== Archivo de origen: 06-navegacion.css ===== */
/* =====================================================
   06. NAVEGACIÓN PRINCIPAL
   -----------------------------------------------------
   Menú de escritorio con submenús desplegables.
   La versión móvil (panel a pantalla completa) está en
   12-responsive.css. El comportamiento (abrir/cerrar)
   está en src/recursos/js/comun/navegacion.js.
===================================================== */

/* -----------------------------------------------
   6.1. LISTA PRINCIPAL
----------------------------------------------- */
.navegacion__lista {
  display: flex;
  align-items: center;
  gap: var(--espacio-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.navegacion__lista li + li {
  margin-top: 0;
}

.navegacion__elemento {
  position: relative;
}

/* Enlaces y botones del menú comparten aspecto */
.navegacion__enlace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--espacio-2) var(--espacio-3);
  background: none;
  border: 0;
  border-radius: var(--radio);
  color: var(--color-tinta);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--transicion-rapida), color var(--transicion-rapida);
}

.navegacion__enlace:hover {
  background: var(--color-papel);
}

/* Sección actual: filete inferior de color latón */
.navegacion__enlace[data-activa],
.navegacion__enlace[aria-current="page"] {
  color: var(--color-primario);
  box-shadow: inset 0 -2px 0 var(--color-acento);
  border-radius: 0;
}

/* Flecha de los elementos con submenú */
.navegacion__desplegar::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transicion-rapida);
}

.navegacion__desplegar[aria-expanded="true"]::after {
  transform: translateY(1px) rotate(-135deg);
}

/* Botón de contacto destacado al final del menú */
.navegacion__cta {
  margin-left: var(--espacio-3);
}

/* -----------------------------------------------
   6.2. SUBMENÚ DESPLEGABLE (escritorio)
   Se abre al pasar el ratón, al tabular dentro o al
   pulsar el botón (aria-expanded="true").
----------------------------------------------- */
.navegacion__submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 300px;
  margin: 0;
  padding: var(--espacio-2);
  list-style: none;
  background: var(--color-blanco);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-media);

  /* Oculto por defecto */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transicion-rapida), transform var(--transicion-rapida), visibility var(--transicion-rapida);
}

/* Submenú que se abre hacia la izquierda (el último del menú) */
.navegacion__submenu--derecha {
  left: auto;
  right: 0;
}

/* Zona invisible que evita que el submenú se cierre al
   mover el ratón desde el botón hasta el submenú. */
.navegacion__submenu::before {
  content: "";
  position: absolute;
  inset: -12px 0 auto 0;
  height: 12px;
}

.navegacion__elemento--grupo:hover > .navegacion__submenu,
.navegacion__elemento--grupo:focus-within > .navegacion__submenu,
.navegacion__desplegar[aria-expanded="true"] + .navegacion__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.navegacion__submenu li + li {
  margin-top: 0;
}

.navegacion__submenu a {
  display: block;
  padding: var(--espacio-3) var(--espacio-3);
  border-radius: var(--radio);
  color: var(--color-tinta);
  text-decoration: none;
}

.navegacion__submenu a:hover,
.navegacion__submenu a[aria-current="page"] {
  background: var(--color-papel);
}

.navegacion__submenu strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
}

.navegacion__submenu span {
  display: block;
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}


/* ===== Archivo de origen: 07-componentes.css ===== */
/* =====================================================
   07. COMPONENTES REUTILIZABLES
   -----------------------------------------------------
   Piezas que se repiten en muchas páginas:
     7.1 Botones          7.6 Planes de gestoría
     7.2 Enlaces          7.7 Avisos
     7.3 Etiquetas        7.8 Acordeón (preguntas, temario)
     7.4 Listas           7.9 Lista de datos
     7.5 Tarjetas         7.10 Migas de pan
                          7.11 Iconos
===================================================== */

/* -----------------------------------------------
   7.1. BOTONES
   Uso: <a class="boton boton--principal">…</a>
   Variantes: --principal, --secundario, --claro,
              --whatsapp, --grande, --bloque
----------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: 46px;
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-family: var(--fuente-texto);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion-rapida), border-color var(--transicion-rapida),
              color var(--transicion-rapida), box-shadow var(--transicion-rapida);
}

.boton:hover {
  text-decoration: none;
}

.boton--principal {
  background: var(--color-marca);
  color: var(--color-blanco);
}

.boton--principal:hover {
  background: var(--color-marca-hover);
}

.boton--secundario {
  background: transparent;
  border-color: var(--color-marca);
  color: var(--color-marca);
}

.boton--secundario:hover {
  background: var(--color-marca-suave);
}

/* Para fondos oscuros */
.boton--claro {
  background: var(--color-blanco);
  color: var(--color-tinta);
}

.boton--claro:hover {
  background: var(--color-papel);
}

/* Contorno blanco, para fondos oscuros o de color */
.boton--contorno-claro {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--color-blanco);
}

.boton--contorno-claro:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Verde de la academia, para enlazarla desde páginas del despacho */
.boton--academia {
  background: var(--color-academia);
  color: var(--color-blanco);
}

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

.boton--whatsapp {
  background: transparent;
  border-color: var(--color-linea-fuerte);
  color: var(--color-tinta);
}

.boton--whatsapp:hover {
  border-color: #1F8C4E;
  color: #1F7A45;
}

.boton--grande {
  min-height: 54px;
  padding-inline: 1.75rem;
  font-size: 1rem;
}

/* Ocupa todo el ancho disponible */
.boton--bloque {
  display: flex;
  width: 100%;
}

.boton:disabled,
.boton[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* -----------------------------------------------
   7.2. ENLACES CON FLECHA
----------------------------------------------- */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-marca);
  font-weight: 500;
  text-decoration: none;
}

.enlace-flecha::after {
  content: "→";
  transition: transform var(--transicion-rapida);
}

.enlace-flecha:hover::after {
  transform: translateX(3px);
}

/* -----------------------------------------------
   7.3. ETIQUETAS E INSIGNIAS
----------------------------------------------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radio-pildora);
  background: var(--color-marca-suave);
  color: var(--color-marca);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.etiqueta--acento {
  /* Latón oscuro: con el latón normal el texto blanco no llega al contraste AA */
  background: var(--color-acento-texto);
  color: var(--color-blanco);
}

.etiqueta--neutra {
  background: var(--color-papel);
  color: var(--color-texto-suave);
}

/* -----------------------------------------------
   7.4. LISTAS CON ICONO
   .lista-incluye  → marca de verificación verde
   .lista-excluye  → guion gris (no incluido)
----------------------------------------------- */
.lista-incluye,
.lista-excluye {
  margin: 0 0 var(--espacio-4);
  padding: 0;
  list-style: none;
}

.lista-incluye li,
.lista-excluye li {
  position: relative;
  margin: 0;
  padding: var(--espacio-2) 0 var(--espacio-2) 28px;
  border-bottom: 1px solid var(--color-papel);
}

.lista-incluye li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.85em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--color-exito);
  border-bottom: 2px solid var(--color-exito);
  transform: rotate(-45deg);
}

.lista-excluye li {
  color: var(--color-texto-suave);
}

.lista-excluye li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.05em;
  width: 12px;
  height: 2px;
  background: var(--color-linea-fuerte);
}

/* -----------------------------------------------
   7.5. TARJETAS
   Tarjeta genérica para servicios y áreas.
----------------------------------------------- */
.tarjeta {
  display: flex;
  flex-direction: column;
  padding: var(--espacio-6);
  background: var(--color-blanco);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-grande);
}

.tarjeta--con-filete {
  border-top: 3px solid var(--color-acento);
}

.tarjeta__titulo {
  margin-bottom: var(--espacio-3);
}

.tarjeta__texto {
  color: var(--color-texto-suave);
}

/* Empuja el enlace final hacia abajo para alinear tarjetas */
.tarjeta__pie {
  margin-top: auto;
  padding-top: var(--espacio-4);
}

/* Tarjeta que se puede pulsar entera.
   Uso: <article class="tarjeta tarjeta--enlace"> … <a class="tarjeta__enlace" href="…">Texto</a>
   El enlace sigue siendo un enlace normal (así lo anuncian los lectores
   de pantalla), pero su zona de clic se estira sobre toda la tarjeta. */
.tarjeta--enlace {
  position: relative;
  transition: box-shadow var(--transicion), transform var(--transicion);
}

.tarjeta--enlace:hover {
  box-shadow: var(--sombra-media);
  transform: translateY(-2px);
}

/* ::before (y no ::after, que .enlace-flecha usa para dibujar la flecha) */
.tarjeta__enlace::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Con el teclado, el recuadro de foco rodea la tarjeta entera */
.tarjeta--enlace:focus-within {
  outline: 2px solid var(--color-foco);
  outline-offset: 3px;
}

.tarjeta__enlace:focus-visible {
  outline: none;
}

/* -----------------------------------------------
   7.6. TARJETAS DE PLAN (Gestoría / Asesoría)
----------------------------------------------- */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--espacio-7) var(--espacio-6) var(--espacio-6);
  background: var(--color-blanco);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-suave);
}

.plan--destacado {
  border: 2px solid var(--color-primario);
}

.plan__distintivo {
  position: absolute;
  top: -13px;
  left: var(--espacio-6);
}

.plan__nombre {
  font-size: var(--texto-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.plan__precio {
  margin: var(--espacio-3) 0 var(--espacio-1);
  font-family: var(--fuente-titulares);
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1;
}

.plan__periodo {
  font-family: var(--fuente-texto);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-texto-suave);
}

.plan__iva {
  margin-bottom: var(--espacio-5);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.plan__subtitulo {
  margin: var(--espacio-5) 0 var(--espacio-2);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan__acciones {
  margin-top: auto;
  padding-top: var(--espacio-5);
}

/* -----------------------------------------------
   7.7. AVISOS
   Información, advertencia, éxito o error.
----------------------------------------------- */
.aviso {
  padding: var(--espacio-4) var(--espacio-5);
  background: var(--color-papel);
  border-left: 3px solid var(--color-acento);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

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

.aviso--exito { background: var(--color-exito-suave); border-color: var(--color-exito); color: var(--color-exito); }
.aviso--error { background: var(--color-error-suave); border-color: var(--color-error); color: var(--color-error); }

/* -----------------------------------------------
   7.8. ACORDEÓN
   Usa las etiquetas nativas <details> y <summary>:
   funciona sin JavaScript y es accesible.
----------------------------------------------- */
.acordeon {
  border-top: 1px solid var(--color-linea);
}

.acordeon__elemento {
  border-bottom: 1px solid var(--color-linea);
}

.acordeon__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  padding: var(--espacio-5) 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

/* Oculta el triángulo por defecto del navegador */
.acordeon__pregunta::-webkit-details-marker {
  display: none;
}

/* Signo + que gira a × al abrir */
.acordeon__pregunta::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  color: var(--color-marca);
  transition: transform var(--transicion);
}

.acordeon__elemento[open] > .acordeon__pregunta::after {
  transform: rotate(45deg);
}

.acordeon__respuesta {
  padding-bottom: var(--espacio-5);
  color: var(--color-texto-suave);
  max-width: var(--ancho-texto);
}

/* -----------------------------------------------
   7.9. LISTA DE DATOS (término: valor)
   Para datos de contacto o profesionales:
   <dl class="lista-datos"><div><dt>…</dt><dd>…</dd></div></dl>
----------------------------------------------- */
.lista-datos {
  margin: 0 0 var(--espacio-5);
}

.lista-datos > div {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: var(--espacio-4);
  padding: var(--espacio-3) 0;
  border-bottom: 1px solid var(--color-linea);
}

.lista-datos dt {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.lista-datos dd {
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* -----------------------------------------------
   7.10. MIGAS DE PAN
----------------------------------------------- */
.migas {
  margin-bottom: var(--espacio-5);
  font-size: var(--texto-sm);
}

.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.migas li {
  margin: 0;
  color: var(--color-texto-suave);
}

.migas li + li::before {
  content: "/";
  margin-right: var(--espacio-2);
  color: var(--color-linea-fuerte);
}

.migas a {
  color: var(--color-texto-suave);
  text-decoration: none;
}

.migas a:hover {
  color: var(--color-marca);
  text-decoration: underline;
}

/* Aviso de advertencia (plazos) y de contenido pendiente
   (textos legales sin validar): mismo aspecto ámbar */
.aviso--advertencia,
.aviso--pendiente {
  background: var(--color-aviso-suave);
  border-color: var(--color-aviso);
  color: var(--color-aviso);
}

/* Cuadrícula de los dos planes: más separación y alineados arriba */
.rejilla-planes {
  gap: var(--espacio-6);
  align-items: start;
}

/* -----------------------------------------------
   7.11. ICONOS
   Los dibujos están en src/fragmentos/iconos.html.
   Son decorativos: llevan aria-hidden="true" porque el
   título de al lado ya dice lo mismo.

   · Icono en una tarjeta (cuadro de color suave):
       <span class="icono-caja" aria-hidden="true">
         <svg><use href="#icono-hacienda"/></svg>
       </span>
     Variante latón: icono-caja--acento
   · Icono dentro de un aviso:
       <div class="aviso aviso--con-icono">
         <svg class="aviso__icono" aria-hidden="true"><use href="#icono-plazo"/></svg>
         <p>…</p>
       </div>
----------------------------------------------- */
.icono-caja {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  margin-bottom: var(--espacio-4);
  background: var(--color-primario-suave);
  border-radius: var(--radio-grande);
  color: var(--color-primario);
}

.icono-caja svg {
  width: 28px;
  height: 28px;
}

/* En su propia línea, cuando lo que sigue no es un título
   (por ejemplo, una etiqueta) */
.icono-caja--sola {
  display: flex;
}

.icono-caja--acento {
  background: #F4ECE1;
  color: var(--color-acento-texto);
}

/* Al pasar por una tarjeta pulsable, el icono se rellena de color */
.tarjeta--enlace .icono-caja {
  transition: background var(--transicion), color var(--transicion);
}

.tarjeta--enlace:hover .icono-caja {
  background: var(--color-primario);
  color: var(--color-blanco);
}

/* Accesos a las áreas (cabecera de Servicios): enlaces con
   forma de píldora e icono delante */
.accesos-area {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  margin: var(--espacio-5) 0 0;
  padding: 0;
  list-style: none;
}

.accesos-area li {
  margin: 0;
}

.accesos-area a {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: 44px;
  padding: var(--espacio-2) var(--espacio-4);
  background: var(--color-blanco);
  border: 1px solid var(--color-linea-fuerte);
  border-radius: var(--radio-pildora);
  color: var(--color-primario);
  font-size: var(--texto-sm);
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--transicion-rapida), background var(--transicion-rapida);
}

.accesos-area a:hover {
  border-color: var(--color-primario);
  background: var(--color-primario-suave);
}

.accesos-area svg {
  width: 20px;
  height: 20px;
}

/* Aviso con icono a la izquierda */
.aviso--con-icono {
  display: flex;
  gap: var(--espacio-4);
  align-items: flex-start;
}

.aviso__icono {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  color: currentColor;
}


/* ===== Archivo de origen: 08-secciones.css ===== */
/* =====================================================
   08. SECCIONES DE PÁGINA
   -----------------------------------------------------
   Bloques grandes que componen las páginas:
     8.1 Héroe (cabecera de página)
     8.2 Banda de área especializada
     8.3 Pasos del proceso
     8.4 Pie de página
     8.5 Estado vacío
     8.6 Páginas legales
     8.7 Héroe con ilustración
     8.8 Blog
===================================================== */

/* -----------------------------------------------
   8.1. HÉROE
----------------------------------------------- */
.heroe {
  padding-block: var(--espacio-9) var(--espacio-8);
}

.heroe__titulo {
  max-width: 880px;
}

.heroe__entradilla {
  max-width: 640px;
  font-size: var(--texto-lg);
  color: var(--color-texto-suave);
}

/* Dos accesos destacados del mismo peso (gestoría / defensa) */
.heroe__accesos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-5);
  margin-top: var(--espacio-7);
}

/* Héroe de página interior, más compacto y con fondo papel */
.heroe--interior {
  padding-block: var(--espacio-8) var(--espacio-7);
  background: var(--color-papel);
  border-bottom: 1px solid var(--color-linea);
}

/* -----------------------------------------------
   8.2. BANDA DE ÁREA ESPECIALIZADA (fondo oscuro)
   Cuadrícula de procedimientos con separadores finos.
----------------------------------------------- */
.procedimientos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: var(--espacio-7) 0;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.procedimientos__elemento {
  padding: var(--espacio-5);
  background: var(--color-tinta);
}

.procedimientos__titulo {
  display: block;
  margin-bottom: var(--espacio-1);
  font-family: var(--fuente-titulares);
  font-size: 1.15rem;
  color: var(--color-blanco);
}

.procedimientos__texto {
  font-size: var(--texto-sm);
  color: #B7C0CB;
}

/* -----------------------------------------------
   8.3. PASOS DEL PROCESO
----------------------------------------------- */
.pasos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--espacio-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.pasos li {
  margin: 0;
  padding-top: var(--espacio-5);
  border-top: 2px solid var(--color-linea);
  counter-increment: paso;
}

.pasos li::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  margin-bottom: var(--espacio-2);
  font-family: var(--fuente-titulares);
  font-size: 1.5rem;
  color: var(--color-acento);
}

/* -----------------------------------------------
   8.4. PIE DE PÁGINA
----------------------------------------------- */
.pie {
  padding-block: var(--espacio-8) var(--espacio-6);
  background: var(--color-tinta);
  color: #B7C0CB;
  font-size: var(--texto-sm);
}

.pie__rejilla {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--espacio-6);
  padding-bottom: var(--espacio-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.pie .logotipo {
  color: var(--color-blanco);
  margin-bottom: var(--espacio-4);
}

.pie .logotipo__descriptor {
  color: #8D97A4;
}

.pie__titulo {
  margin-bottom: var(--espacio-3);
  font-family: var(--fuente-texto);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-blanco);
}

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

.pie li + li {
  margin-top: var(--espacio-2);
}

.pie a {
  color: #D5DBE2;
  text-decoration: none;
}

.pie a:hover {
  color: var(--color-blanco);
  text-decoration: underline;
}

.pie__datos p {
  margin-bottom: var(--espacio-2);
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espacio-4);
  padding-top: var(--espacio-5);
}

.pie__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-5);
}

.pie__legal li + li {
  margin-top: 0;
}

.pie__descargo {
  margin-top: var(--espacio-5);
  font-size: var(--texto-xs);
  color: #8D97A4;
  max-width: 900px;
}

/* -----------------------------------------------
   8.5. ESTADO VACÍO
   Cuando una lista todavía no tiene contenido
   (p. ej. el blog sin artículos).
----------------------------------------------- */
.vacio {
  padding: var(--espacio-8) var(--espacio-6);
  text-align: center;
  background: var(--color-papel);
  border: 1px dashed var(--color-linea-fuerte);
  border-radius: var(--radio-grande);
}

/* -----------------------------------------------
   8.6. PÁGINAS LEGALES
   Texto largo con títulos numerados y tablas.
----------------------------------------------- */
.legal {
  padding-block: var(--espacio-7) var(--espacio-9);
}

.legal .aviso {
  margin-bottom: var(--espacio-7);
}

.legal h2 {
  font-size: 1.4rem;
}

.legal table {
  width: 100%;
  margin-bottom: var(--espacio-5);
  border-collapse: collapse;
  font-size: var(--texto-sm);
}

.legal th,
.legal td {
  padding: var(--espacio-3);
  border: 1px solid var(--color-linea);
  text-align: left;
  vertical-align: top;
}

.legal th {
  background: var(--color-papel);
}

.legal__actualizacion {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

/* -----------------------------------------------
   8.7. HÉROE CON ILUSTRACIÓN
   Texto a la izquierda y dibujo a la derecha. Los dibujos
   están en src/recursos/img/ilustraciones/ (decorativos:
   alt="" porque no añaden información al texto).
   Uso:
     <div class="contenedor heroe__rejilla">
       <div> …texto… </div>
       <div class="heroe__ilustracion"><img src="…" alt=""></div>
     </div>
   En móvil el dibujo baja debajo del texto, más pequeño
   (12-responsive.css).
----------------------------------------------- */
.heroe__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--espacio-7);
  align-items: center;
}

.heroe__ilustracion img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin-inline: auto;
}

/* -----------------------------------------------
   8.8. BLOG
   Lista de artículos (/blog) y página de cada
   artículo (plantilla src/plantillas/articulo.html).
----------------------------------------------- */

/* Fecha y tiempo de lectura en la tarjeta de la lista */
.tarjeta-articulo__datos {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

/* Fecha y tiempo de lectura bajo el título del artículo */
.articulo__datos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
  margin: var(--espacio-4) 0 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.articulo__datos svg {
  width: 18px;
  height: 18px;
  color: var(--color-primario);
}

/* Texto del artículo: ancho cómodo de lectura y más aire
   entre apartados */
.articulo {
  font-size: var(--texto-lg);
}

.articulo > * {
  max-width: var(--ancho-texto);
}

.articulo h2 {
  margin-top: var(--espacio-7);
}

.articulo h3 {
  margin-top: var(--espacio-6);
}

.articulo > :first-child {
  margin-top: 0;
}

.articulo ul,
.articulo ol {
  padding-left: var(--espacio-5);
}

.articulo li + li {
  margin-top: var(--espacio-2);
}

/* Enlaces dentro del texto (no los botones del final) */
.articulo p a,
.articulo li a {
  text-decoration: underline;
}

/* Cita destacada */
.articulo blockquote {
  margin: var(--espacio-6) 0;
  padding: var(--espacio-4) var(--espacio-5);
  border-left: 3px solid var(--color-acento);
  background: var(--color-papel);
  font-family: var(--fuente-titulares);
  font-size: var(--texto-xl);
}

.articulo blockquote p {
  margin: 0;
}

/* Páginas de la lista del blog: ← Anterior · 1 2 3 · Siguiente → */
.paginacion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  align-items: center;
  justify-content: center;
  margin-top: var(--espacio-7);
}

.paginacion__numeros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sin el margen general entre elementos de lista (li + li),
   que desalineaba los números a partir del segundo */
.paginacion__numeros li {
  display: flex;
  margin: 0;
}

.paginacion__enlace,
.paginacion__actual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--espacio-3);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio);
  text-decoration: none;
}

.paginacion__actual {
  border-color: var(--color-marca);
  background: var(--color-marca);
  color: var(--color-blanco);
  font-weight: 600;
}

.paginacion__enlace:hover {
  border-color: var(--color-marca);
}

/* Nota o aviso en un recuadro (marca «!>» en el Markdown) */
.articulo__nota {
  margin: var(--espacio-6) 0;
  padding: var(--espacio-4) var(--espacio-5);
  border-left: 3px solid var(--color-aviso);
  border-radius: 0 var(--radio) var(--radio) 0;
  background: var(--color-aviso-suave);
  font-size: var(--texto-base);
}

.articulo__nota p {
  margin: 0;
}

/* Tablas: se desplazan en horizontal si no caben (móvil) */
.articulo__tabla {
  margin: var(--espacio-5) 0 var(--espacio-6);
  overflow-x: auto;
}

.articulo__tabla:focus-visible {
  outline: 2px solid var(--color-foco);
  outline-offset: 2px;
}

.articulo table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
}

.articulo th,
.articulo td {
  padding: var(--espacio-2) var(--espacio-3);
  border: 1px solid var(--color-linea);
  text-align: left;
  vertical-align: top;
}

.articulo th {
  background: var(--color-papel);
  font-weight: 600;
}

/* Aviso final de «información general» */
.articulo__aviso {
  margin-top: var(--espacio-7);
  font-size: var(--texto-sm);
}


/* ===== Archivo de origen: 09-formularios.css ===== */
/* =====================================================
   09. FORMULARIOS
   -----------------------------------------------------
     9.1 Estructura de la página de consulta
     9.2 Campos: etiqueta, entrada, ayuda, error
     9.3 Campo «Cuéntanos qué te ocurre» (campo-mensaje)
     9.4 Opciones (radio) en forma de tarjeta
     9.5 Casillas de consentimiento
     9.6 Avisos y estados de envío
===================================================== */

/* -----------------------------------------------
   9.1. ESTRUCTURA DE LA PÁGINA DE CONSULTA
   Columna de información + tarjeta con el formulario
----------------------------------------------- */
.consulta {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--espacio-8);
  align-items: start;
}

.consulta__info {
  position: sticky;
  top: calc(var(--altura-cabecera) + var(--espacio-6));
}

.consulta__tarjeta {
  padding: var(--espacio-7);
  background: var(--color-blanco);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-suave);
}

/* Lista "Qué ocurre después de enviar" */
.consulta__pasos {
  margin: var(--espacio-6) 0;
  padding: 0;
  list-style: none;
  counter-reset: paso-consulta;
}

.consulta__pasos li {
  position: relative;
  margin: 0;
  padding: 0 0 var(--espacio-5) 44px;
  counter-increment: paso-consulta;
}

.consulta__pasos li::before {
  content: counter(paso-consulta);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-acento);
  border-radius: 50%;
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--color-acento-texto);
}

/* Línea vertical que une los pasos */
.consulta__pasos li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 32px;
  bottom: 4px;
  width: 1px;
  background: var(--color-linea);
}

/* -----------------------------------------------
   9.2. CAMPOS
----------------------------------------------- */
.formulario {
  display: grid;
  gap: var(--espacio-5);
}

/* Dos campos en la misma fila (se apilan en móvil) */
.formulario__fila {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-5);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo__etiqueta {
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--color-tinta);
}

/* Indicador de obligatorio u opcional junto a la etiqueta */
.campo__obligatorio {
  color: var(--color-error);
  margin-left: 2px;
}

.campo__opcional {
  font-weight: 400;
  color: var(--color-texto-suave);
}

.campo__ayuda {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}

.campo__entrada {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  background: var(--color-blanco);
  border: 1px solid var(--color-linea-fuerte);
  border-radius: var(--radio);
  font-size: 1rem;
  transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
}

.campo__entrada::placeholder {
  color: #8A929D;
}

.campo__entrada:hover {
  border-color: #A9A091;
}

/* Estado al seleccionar el campo: borde de color + halo suave */
.campo__entrada:focus {
  outline: none;
  border-color: var(--color-marca);
  box-shadow: 0 0 0 4px var(--color-marca-suave);
}

/* Campo con error (lo marca el JavaScript con aria-invalid) */
.campo__entrada[aria-invalid="true"] {
  border-color: var(--color-error);
}

.campo__entrada[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px var(--color-error-suave);
}

.campo__error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--texto-sm);
  color: var(--color-error);
}

.campo__error:empty {
  display: none;
}

/* Flecha propia para los desplegables */
select.campo__entrada {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235A6472' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}

/* -----------------------------------------------
   9.3. CAMPO «CUÉNTANOS QUÉ TE OCURRE»
   Área de texto amplia, redimensionable en vertical
   y con contador de caracteres.
----------------------------------------------- */
.campo-mensaje__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-3);
}

.campo-mensaje__recordatorio {
  display: flex;
  gap: var(--espacio-2);
  margin: 0;
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}

.campo-mensaje__recordatorio::before {
  content: "i";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  font-family: var(--fuente-titulares);
}

.campo-mensaje__texto {
  min-height: 220px;          /* unas 8 líneas */
  max-height: 560px;          /* a partir de aquí aparece barra de desplazamiento */
  padding: 0.9rem 1rem;
  line-height: 1.6;
  resize: vertical;           /* el usuario puede estirarlo hacia abajo */
}

.campo-mensaje__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}

/* Contador "0 / 5.000" */
.campo-mensaje__contador {
  margin-left: auto;
  font-size: var(--texto-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-texto-suave);
  white-space: nowrap;
}

.campo-mensaje__contador[data-estado="cerca"] {
  color: var(--color-aviso);
  font-weight: 600;
}

.campo-mensaje__contador[data-estado="limite"] {
  color: var(--color-error);
  font-weight: 600;
}

/* -----------------------------------------------
   9.4. OPCIONES EN FORMA DE TARJETA
   Para elegir entre pocas opciones (p. ej. "Soy
   empresa" / "Soy trabajador"). Son radios reales.
----------------------------------------------- */
.opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--espacio-3);
  margin: 0;
  padding: 0;
  border: 0;
}

.opciones legend {
  margin-bottom: 6px;
  padding: 0;
}

.opcion {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--color-linea-fuerte);
  border-radius: var(--radio);
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color var(--transicion-rapida), background-color var(--transicion-rapida);
}

.opcion:hover {
  border-color: #A9A091;
}

.opcion input {
  accent-color: var(--color-marca);
  width: 18px;
  height: 18px;
  margin: 0;
}

.opcion:has(input:checked) {
  border-color: var(--color-marca);
  background: var(--color-marca-suave);
}

.opcion:has(input[aria-invalid="true"]) {
  border-color: var(--color-error);
}

.opcion:has(input:focus-visible) {
  outline: 2px solid var(--color-foco);
  outline-offset: 2px;
}

/* -----------------------------------------------
   9.5. CASILLAS DE CONSENTIMIENTO
----------------------------------------------- */
.casilla {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  cursor: pointer;
}

.casilla input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--color-marca);
}

/* -----------------------------------------------
   9.6. AVISOS Y ESTADOS DE ENVÍO
----------------------------------------------- */

/* Aviso legal fijo de los formularios jurídicos */
.aviso-formulario {
  padding: var(--espacio-4);
  background: var(--color-papel);
  border-left: 3px solid var(--color-acento);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-size: var(--texto-xs);
  line-height: 1.55;
  color: var(--color-texto-suave);
}

.aviso-formulario p {
  margin-bottom: var(--espacio-2);
}

.aviso-formulario p:last-child {
  margin-bottom: 0;
}

/* Zona donde irá el antispam de Cloudflare Turnstile */
.formulario__antispam {
  min-height: 65px;
}

.formulario__envio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
}

.formulario__nota {
  margin: 0;
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}

/* Formulario mientras se envía */
.formulario[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}

/* Campo trampa antispam: fuera de la pantalla, invisible
   para las personas pero presente para los robots. */
.campo-trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mensaje que sustituye al formulario tras enviarlo */
.formulario-enviado {
  padding: var(--espacio-6);
  background: var(--color-exito-suave);
  border-left: 3px solid var(--color-exito);
  border-radius: 0 var(--radio) var(--radio) 0;
}

.formulario-enviado:focus {
  outline: none;
}

.formulario-enviado h2 {
  color: var(--color-exito);
}

.formulario-enviado p:last-child {
  margin-bottom: 0;
}

/* Versión corta del área de texto (comentarios opcionales) */
.campo-mensaje__texto--corto {
  min-height: 120px;
}

/* Opción de plan con su precio a la derecha */
.opcion__precio {
  margin-left: auto;
  font-family: var(--fuente-titulares);
  font-weight: 600;
  white-space: nowrap;
}


/* ===== Archivo de origen: 10-academia.css ===== */
/* =====================================================
   10. ACADEMIA
   -----------------------------------------------------
     10.1 Tema de color de la academia
     10.2 Barra de navegación de la academia
     10.3 Barra de progreso (componente)
     10.4 Catálogo: filtros y tarjetas de curso
     10.5 Ficha del curso
     10.6 Temario (módulos y clases)
     10.7 Aula virtual
===================================================== */

/* -----------------------------------------------
   10.1. TEMA DE LA ACADEMIA
   Añadiendo la clase "tema-academia" al <body>, todos
   los botones, enlaces y focos pasan a verde pizarra.
----------------------------------------------- */
.tema-academia {
  --color-marca: var(--color-academia);
  --color-marca-hover: var(--color-academia-oscuro);
  --color-marca-suave: var(--color-academia-suave);
  --color-enlace: var(--color-academia);
  --color-foco: var(--color-academia);
}

.tema-academia .antetitulo {
  color: var(--color-academia);
}

/* La cabecera general y el pie siguen siendo del despacho
   (azul), también dentro de la academia. */
.tema-academia .cabecera,
.tema-academia .pie {
  --color-marca: var(--color-primario);
  --color-marca-hover: var(--color-primario-oscuro);
  --color-marca-suave: var(--color-primario-suave);
  --color-enlace: var(--color-primario);
  --color-foco: var(--color-primario);
}

/* -----------------------------------------------
   10.2. BARRA DE LA ACADEMIA
   Franja bajo la cabecera con el nombre "Academia" y
   sus enlaces propios.
----------------------------------------------- */
.barra-academia {
  background: var(--color-academia);
  color: #DCEAE6;
  font-size: var(--texto-sm);
}

.barra-academia__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  min-height: 48px;
}

.barra-academia__marca {
  font-family: var(--fuente-titulares);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-blanco);
  text-decoration: none;
}

.barra-academia__enlaces {
  display: flex;
  gap: var(--espacio-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.barra-academia__enlaces li + li {
  margin-top: 0;
}

.barra-academia a:not(.barra-academia__marca) {
  color: #DCEAE6;
  text-decoration: none;
}

.barra-academia a:hover,
.barra-academia a[aria-current="page"] {
  color: var(--color-blanco);
  text-decoration: underline;
}

/* -----------------------------------------------
   10.3. BARRA DE PROGRESO
   <div class="progreso"><span style="width: 40%"></span></div>
----------------------------------------------- */
.progreso {
  height: 6px;
  overflow: hidden;
  background: #DDE5E2;
  border-radius: var(--radio-pildora);
}

.progreso > span {
  display: block;
  height: 100%;
  background: var(--color-academia);
  border-radius: inherit;
  transition: width var(--transicion);
}

/* -----------------------------------------------
   10.4. CATÁLOGO
----------------------------------------------- */

/* Filtros por categoría (botones tipo píldora) */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin: 0 0 var(--espacio-6);
  padding: 0;
  list-style: none;
}

.filtros li + li {
  margin-top: 0;
}

.filtros__boton {
  padding: 0.45rem 1rem;
  background: var(--color-blanco);
  border: 1px solid var(--color-linea-fuerte);
  border-radius: var(--radio-pildora);
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--color-tinta);
  transition: background-color var(--transicion-rapida), border-color var(--transicion-rapida), color var(--transicion-rapida);
}

.filtros__boton:hover {
  border-color: var(--color-academia);
}

.filtros__boton[aria-pressed="true"] {
  background: var(--color-academia);
  border-color: var(--color-academia);
  color: var(--color-blanco);
}

/* Cuadrícula de cursos: 3 / 2 / 1 columnas según el ancho */
.rejilla-cursos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--espacio-6);
}

/* Tarjeta de curso */
.tarjeta-curso {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-blanco);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}

/* Efecto al pasar el ratón: se eleva ligeramente */
.tarjeta-curso:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-media);
  border-color: #CFD9D5;
}

/* Portada con proporción fija 16:9: todas las tarjetas iguales */
.tarjeta-curso__portada {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-academia-suave);
}

.tarjeta-curso__portada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.tarjeta-curso:hover .tarjeta-curso__portada img {
  transform: scale(1.03);
}

.tarjeta-curso__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--espacio-5) var(--espacio-5) var(--espacio-4);
}

.tarjeta-curso__categoria {
  align-self: flex-start;
  margin-bottom: var(--espacio-3);
}

.tarjeta-curso__titulo {
  margin-bottom: var(--espacio-2);
  font-size: 1.25rem;
}

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

/* Truco de accesibilidad: el enlace del título cubre toda la
   tarjeta, así se puede pulsar en cualquier parte pero solo
   existe un enlace para el lector de pantalla. */
.tarjeta-curso__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tarjeta-curso__descripcion {
  /* Máximo 3 líneas; el resto se corta con "…" */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--espacio-4);
  font-size: 0.95rem;
  color: var(--color-texto-suave);
}

/* Datos: módulos · clases · duración */
.datos-curso {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.datos-curso li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.datos-curso svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-academia);
}

.tarjeta-curso__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  margin-top: auto;
  padding: var(--espacio-4) var(--espacio-5);
  border-top: 1px solid var(--color-linea);
}

.tarjeta-curso__precio {
  font-family: var(--fuente-titulares);
  font-size: 1.35rem;
  font-weight: 600;
}

/* El botón de la tarjeta queda por encima del enlace que
   cubre la tarjeta (z-index 2) para que siga funcionando. */
.tarjeta-curso__pie .boton {
  position: relative;
  z-index: 2;
  min-height: 40px;
  padding: 0.5rem 1rem;
}

/* -----------------------------------------------
   10.5. FICHA DEL CURSO
----------------------------------------------- */
.ficha-cabecera {
  padding-block: var(--espacio-7) var(--espacio-8);
  background: var(--color-papel);
  border-bottom: 1px solid var(--color-linea);
}

.ficha-cabecera__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--espacio-7);
  align-items: center;
}

.ficha-cabecera__portada {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  /* Hueco reservado bajo la imagen para la caja de compra, que sube
     sobre la cabecera (ver .caja-compra). Sin él, en pantallas anchas
     y con títulos cortos la cabecera es más baja y la caja tocaba la
     imagen. En tableta y móvil se quita (12-responsive.css). */
  margin-bottom: var(--espacio-7);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-media);
}

.ficha-cabecera__portada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ficha-cabecera .datos-curso {
  margin-top: var(--espacio-5);
  font-size: 0.95rem;
}

/* Cuerpo: contenido principal + columna de compra */
.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--espacio-8);
  align-items: start;
  padding-block: var(--espacio-8);
}

.ficha__bloque + .ficha__bloque {
  margin-top: var(--espacio-8);
}

/* Caja de compra: fija al bajar en escritorio */
.caja-compra {
  position: sticky;
  top: calc(var(--altura-cabecera) + var(--espacio-5));
  margin-top: calc(var(--espacio-9) * -1.4);  /* sube sobre la cabecera de la ficha */
  padding: var(--espacio-6);
  background: var(--color-blanco);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-media);
}

.caja-compra__precio {
  margin-bottom: var(--espacio-1);
  font-family: var(--fuente-titulares);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.1;
}

/* Botones de la caja (Comprar, Ir al aula, Clase de muestra) con
   separación uniforme. Los botones ocultos no ocupan hueco. */
.caja-compra__acciones {
  display: grid;
  gap: var(--espacio-3);
}

.caja-compra__impuestos {
  margin-bottom: var(--espacio-5);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.caja-compra__incluye {
  margin: var(--espacio-5) 0 0;
  padding: var(--espacio-5) 0 0;
  border-top: 1px solid var(--color-linea);
  list-style: none;
  font-size: var(--texto-sm);
}

.caja-compra__incluye li {
  display: flex;
  gap: var(--espacio-3);
}

.caja-compra__incluye svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-academia);
}

/* Objetivos de aprendizaje en dos columnas */
.objetivos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--espacio-6);
  padding: var(--espacio-6);
  background: var(--color-academia-suave);
  border-radius: var(--radio-grande);
}

.objetivos li {
  border-bottom-color: rgba(46, 106, 94, 0.12);
}

/* -----------------------------------------------
   10.6. TEMARIO (ficha del curso)
   Cada módulo es un <details> que se despliega.
----------------------------------------------- */
.temario__resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-4);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.temario__boton-todo {
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-academia);
  font-size: var(--texto-sm);
  font-weight: 600;
}

.temario__modulo {
  border: 1px solid var(--color-linea);
  border-radius: var(--radio);
  background: var(--color-blanco);
}

.temario__modulo + .temario__modulo {
  margin-top: var(--espacio-3);
}

.temario__modulo-cabecera {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espacio-4);
  padding: var(--espacio-4) var(--espacio-5);
  cursor: pointer;
  list-style: none;
}

.temario__modulo-cabecera::-webkit-details-marker {
  display: none;
}

.temario__modulo[open] > .temario__modulo-cabecera {
  border-bottom: 1px solid var(--color-linea);
  background: var(--color-papel);
  border-radius: var(--radio) var(--radio) 0 0;
}

.temario__modulo-numero {
  font-family: var(--fuente-titulares);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-academia);
  min-width: 2ch;
}

.temario__modulo-titulo {
  display: block;
  font-weight: 600;
}

.temario__modulo-descripcion {
  display: block;
  margin-top: 2px;
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.temario__modulo-datos {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  white-space: nowrap;
}

/* Flecha del módulo */
.temario__modulo-datos::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--color-texto-suave);
  border-bottom: 1.5px solid var(--color-texto-suave);
  transform: rotate(45deg);
  transition: transform var(--transicion-rapida);
}

.temario__modulo[open] .temario__modulo-datos::after {
  transform: rotate(-135deg);
}

.temario__clases {
  margin: 0;
  padding: var(--espacio-2) 0;
  list-style: none;
}

.temario__clase {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: var(--espacio-3);
  margin: 0;
  padding: var(--espacio-3) var(--espacio-5);
}

.temario__clase + .temario__clase {
  border-top: 1px dashed var(--color-linea);
}

/* Icono de reproducción */
.temario__clase-icono {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--color-texto-suave);
}

.temario__clase-titulo {
  display: block;
  font-size: 0.97rem;
  font-weight: 500;
}

.temario__clase-descripcion {
  display: block;
  margin-top: 2px;
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.temario__clase-datos {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* -----------------------------------------------
   10.7. AULA VIRTUAL
   Pantalla completa propia (sin la cabecera general):
     · barra superior con título y progreso
     · índice lateral izquierdo
     · reproductor y contenido de la clase
----------------------------------------------- */
.pagina-aula {
  --altura-barra-aula: 68px;
  --ancho-indice: 360px;
  background: var(--color-papel);
}

/* 10.7.1. Barra superior */
.aula-barra {
  position: sticky;
  top: 0;
  z-index: var(--capa-cabecera);
  display: flex;
  align-items: center;
  gap: var(--espacio-5);
  height: var(--altura-barra-aula);
  padding-inline: var(--espacio-5);
  background: var(--color-tinta);
  color: #E9ECF0;
}

.aula-barra__volver {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding-right: var(--espacio-5);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  color: #C9D0D9;
  font-size: var(--texto-sm);
  text-decoration: none;
  white-space: nowrap;
}

.aula-barra__volver:hover {
  color: var(--color-blanco);
}

.aula-barra__titulo {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 1.05rem;
  color: var(--color-blanco);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.aula-barra__progreso {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  width: 280px;
  font-size: var(--texto-sm);
}

.aula-barra__progreso .progreso {
  flex: 1;
  background: rgba(255, 255, 255, 0.15);
}

.aula-barra__progreso .progreso > span {
  background: #6FB3A4;
}

.aula-barra__porcentaje {
  font-weight: 600;
  color: var(--color-blanco);
  font-variant-numeric: tabular-nums;
}

/* Botón "Índice del curso": solo visible en móvil/tableta */
.aula-barra__indice {
  display: none;
}

/* 10.7.2. Distribución en dos columnas */
.aula {
  display: grid;
  grid-template-columns: var(--ancho-indice) minmax(0, 1fr);
  min-height: calc(100vh - var(--altura-barra-aula));
}

/* 10.7.3. Índice lateral */
.indice {
  position: sticky;
  top: var(--altura-barra-aula);
  height: calc(100vh - var(--altura-barra-aula));
  overflow-y: auto;
  background: var(--color-blanco);
  border-right: 1px solid var(--color-linea);
  overscroll-behavior: contain;
}

.indice__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-5);
  border-bottom: 1px solid var(--color-linea);
}

.indice__titulo {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

/* Resumen numérico: "5 completadas · 9 pendientes" */
.indice__resumen {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}

.indice__cerrar {
  display: none;
}

.indice__modulo {
  border-bottom: 1px solid var(--color-linea);
}

.indice__modulo-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espacio-1) var(--espacio-3);
  padding: var(--espacio-4) var(--espacio-5);
  cursor: pointer;
  list-style: none;
  background: var(--color-blanco);
  transition: background-color var(--transicion-rapida);
}

.indice__modulo-cabecera::-webkit-details-marker {
  display: none;
}

.indice__modulo-cabecera:hover {
  background: var(--color-papel);
}

.indice__modulo-etiqueta {
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-academia);
}

.indice__modulo-nombre {
  grid-column: 1;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

.indice__modulo-contador {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  font-variant-numeric: tabular-nums;
}

.indice__modulo-contador::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transicion-rapida);
}

.indice__modulo[open] .indice__modulo-contador::after {
  transform: rotate(-135deg);
}

.indice__clases {
  margin: 0;
  padding: 0 0 var(--espacio-2);
  list-style: none;
}

.indice__clases li {
  margin: 0;
}

/* Cada clase del índice */
.indice__clase {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-5);
  color: var(--color-tinta);
  text-decoration: none;
  transition: background-color var(--transicion-rapida);
}

.indice__clase:hover {
  background: var(--color-papel);
}

/* Clase que se está viendo: fondo verde suave + filete lateral */
.indice__clase[aria-current="true"] {
  background: var(--color-academia-suave);
}

.indice__clase[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-academia);
}

.indice__clase-titulo {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
}

.indice__clase[aria-current="true"] .indice__clase-titulo {
  font-weight: 600;
  color: var(--color-academia-oscuro);
}

.indice__clase-descripcion {
  /* Máximo 2 líneas en el índice; la descripción completa
     se lee bajo el vídeo */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  font-size: var(--texto-xs);
  line-height: 1.45;
  color: var(--color-texto-suave);
}

.indice__clase-duracion {
  display: block;
  margin-top: 4px;
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  font-variant-numeric: tabular-nums;
}

/* Círculo de estado: vacío = pendiente, verde con ✓ = completada */
.estado-clase {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid var(--color-linea-fuerte);
  border-radius: 50%;
  background: var(--color-blanco);
}

.estado-clase--completada {
  border-color: var(--color-academia);
  background: var(--color-academia);
}

.estado-clase--completada::after {
  content: "";
  width: 8px;
  height: 4px;
  margin-top: -2px;
  border-left: 2px solid var(--color-blanco);
  border-bottom: 2px solid var(--color-blanco);
  transform: rotate(-45deg);
}

.indice__clase[aria-current="true"] .estado-clase:not(.estado-clase--completada) {
  border-color: var(--color-academia);
  box-shadow: inset 0 0 0 4px var(--color-blanco), inset 0 0 0 10px var(--color-academia);
}

/* 10.7.4. Contenido central */
.aula__contenido {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding: var(--espacio-6) var(--espacio-6) var(--espacio-9);
}

/* Reproductor 16:9 que se adapta al ancho */
.reproductor {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0B1118;
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-media);
}

.reproductor iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Cabecera de la clase: título + botón "Marcar como completada" */
.clase-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espacio-4);
  margin-top: var(--espacio-6);
}

.clase-cabecera__ubicacion {
  margin-bottom: var(--espacio-1);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.clase-cabecera h1 {
  margin-bottom: 0;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

/* Botón de completar: cambia de aspecto al estar completada */
.boton-completar[aria-pressed="true"] {
  background: var(--color-academia-suave);
  border-color: var(--color-academia);
  color: var(--color-academia-oscuro);
}

.boton-completar[aria-pressed="true"]::before {
  content: "✓";
  font-weight: 700;
}

/* Navegación entre clases: anterior / siguiente */
.navegacion-clases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-4);
  margin: var(--espacio-6) 0;
}

.navegacion-clases__enlace {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--espacio-4) var(--espacio-5);
  background: var(--color-blanco);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio);
  color: var(--color-tinta);
  text-decoration: none;
  transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
}

.navegacion-clases__enlace:hover {
  border-color: var(--color-academia);
  box-shadow: var(--sombra-suave);
}

.navegacion-clases__enlace--siguiente {
  text-align: right;
  grid-column: 2;
}

.navegacion-clases__direccion {
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-academia);
}

.navegacion-clases__titulo {
  font-weight: 500;
}

/* Descripción de la clase */
.clase-descripcion {
  padding: var(--espacio-6);
  background: var(--color-blanco);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-grande);
}

.clase-descripcion h2 {
  font-size: 1.25rem;
}

/* Fondo oscuro tras el índice abierto en móvil */
.aula-velo {
  display: none;
}

/* -----------------------------------------------
   10.8. PÁGINAS DE ACCESO (registro, inicio de sesión,
         recuperación de contraseña)
----------------------------------------------- */
.acceso {
  padding-block: var(--espacio-8) var(--espacio-9);
  background: var(--color-papel);
}

.acceso__tarjeta {
  max-width: 480px;
  margin-inline: auto;
  padding: var(--espacio-7);
  background: var(--color-blanco);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-suave);
}

.acceso__tarjeta h1 {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
}

.acceso__enlaces {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espacio-3);
  margin-top: var(--espacio-5);
  font-size: var(--texto-sm);
}

@media (max-width: 480px) {
  .acceso__tarjeta {
    padding: var(--espacio-5);
  }
}

/* -----------------------------------------------
   10.9. AULA: CLASES BLOQUEADAS Y PANTALLAS DEL REPRODUCTOR
----------------------------------------------- */

/* Candado dibujado con CSS en las clases no compradas */
.estado-clase--bloqueada {
  border-style: dashed;
  border-color: var(--color-texto-suave);
}

.estado-clase--bloqueada::after {
  content: "";
  width: 6px;
  height: 5px;
  margin-top: 2px;
  border-radius: 1px;
  background: var(--color-texto-suave);
}

/* Pantalla que ocupa el lugar del vídeo (antes de reproducir,
   clase bloqueada o vídeo no disponible) */
.reproductor__pantalla {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--espacio-5);
  color: #C9D0D9;
  text-align: center;
}

.reproductor__pantalla h2 {
  margin-bottom: var(--espacio-2);
  font-size: 1.25rem;
  color: var(--color-blanco);
}

.reproductor__pantalla p {
  max-width: 520px;
  margin-inline: auto;
  font-size: var(--texto-sm);
}

/* Botón circular de reproducir */
.reproductor__boton {
  display: inline-grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: var(--espacio-4);
  background: var(--color-academia);
  border: 0;
  border-radius: 50%;
  color: var(--color-blanco);
  transition: transform var(--transicion-rapida), background-color var(--transicion-rapida);
}

.reproductor__boton:hover {
  transform: scale(1.05);
  background: var(--color-academia-oscuro);
}

.reproductor__boton svg {
  width: 30px;
  height: 30px;
  margin-left: 4px;
}

.reproductor__nota {
  margin-top: var(--espacio-3);
  font-size: var(--texto-xs) !important;
  color: #8D97A4;
}

.reproductor__nota a {
  color: #B7C0CB;
}

/* Contenedor que YouTube sustituye por su iframe */
.reproductor__marco {
  position: absolute;
  inset: 0;
}

.reproductor__marco iframe {
  width: 100%;
  height: 100%;
}

/* Aviso para quien ve una clase de muestra */
.aula-aviso-muestra {
  margin-top: var(--espacio-5);
}

@media (max-width: 768px) {
  .aula-aviso-muestra {
    margin-inline: var(--espacio-4);
  }
}

/* Margen del título de la ficha bajo la etiqueta de categoría */
.ficha-cabecera__titulo {
  margin-top: var(--espacio-4);
}

/* -----------------------------------------------
   10.10. CONSENTIMIENTOS ANTES DE PAGAR
----------------------------------------------- */
.caja-compra__consentimiento {
  display: grid;
  gap: var(--espacio-3);
  margin-top: var(--espacio-4);
  padding: var(--espacio-4);
  background: var(--color-academia-suave);
  border-radius: var(--radio);
}

.caja-compra__consentimiento-titulo {
  margin: 0;
  font-size: var(--texto-sm);
  font-weight: 600;
}

[data-resultado-compra]:not(:empty) {
  margin-top: var(--espacio-4);
}


/* ===== Archivo de origen: 11-admin.css ===== */
/* =====================================================
   11. PANEL DE ADMINISTRACIÓN
   -----------------------------------------------------
   Estilos propios de admin.html:
     11.1 Tabla de datos (la usan también otras páginas)
     11.2 Estructura: barra superior, menú y contenido
     11.3 Tablas del panel y etiquetas de estado
     11.4 Pestañas y paneles del editor de cursos
     11.5 Temario (módulos y clases)
     11.6 Lista + detalle (solicitudes, usuarios)
     11.7 Ventanas y avisos flotantes
     11.8 Adaptación a tableta y móvil
===================================================== */

/* -----------------------------------------------
   11.1. TABLA DE DATOS
----------------------------------------------- */
.tabla-datos {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
}

.tabla-datos th,
.tabla-datos td {
  padding: var(--espacio-3) var(--espacio-4);
  border-bottom: 1px solid var(--color-linea);
  text-align: left;
  vertical-align: top;
}

.tabla-datos th {
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  background: var(--color-papel);
}

/* Contenedor que permite desplazar la tabla en horizontal
   en pantallas pequeñas sin romper la página. */
.tabla-desplazable {
  overflow-x: auto;
  border: 1px solid var(--color-linea);
  border-radius: var(--radio);
}

/* -----------------------------------------------
   11.2. ESTRUCTURA DEL PANEL
----------------------------------------------- */
.pagina-admin {
  background: var(--color-papel);
}

.admin-barra {
  position: sticky;
  top: 0;
  z-index: var(--capa-cabecera);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  min-height: 60px;
  padding: var(--espacio-2) var(--espacio-5);
  background: var(--color-tinta);
  color: var(--color-blanco);
}

.admin-barra__titulo {
  margin: 0;
  font-family: var(--fuente-titulares);
  font-size: 1.15rem;
  font-weight: 600;
}

.admin-barra__enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-4);
  font-size: var(--texto-sm);
}

.admin-barra__enlaces a {
  color: #D5DBE2;
}

.admin-barra__enlaces .boton {
  min-height: 36px;
  padding: 0.35rem 0.9rem;
}

.admin {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: calc(100vh - 60px);
}

.admin-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--espacio-5) var(--espacio-3);
  background: var(--color-blanco);
  border-right: 1px solid var(--color-linea);
}

.admin-menu__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio);
  color: var(--color-tinta);
  font-weight: 500;
  text-decoration: none;
}

.admin-menu__enlace:hover {
  background: var(--color-papel);
}

.admin-menu__enlace[aria-current="page"] {
  background: var(--color-primario-suave);
  color: var(--color-primario);
  box-shadow: inset 3px 0 0 var(--color-primario);
}

/* Número de solicitudes nuevas */
.admin-insignia {
  min-width: 22px;
  padding: 1px 7px;
  background: var(--color-error);
  border-radius: var(--radio-pildora);
  color: var(--color-blanco);
  font-size: var(--texto-xs);
  font-weight: 700;
  text-align: center;
}

.admin-contenido {
  min-width: 0;
  padding: var(--espacio-6) var(--espacio-6) var(--espacio-9);
}

.admin-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  margin-bottom: var(--espacio-5);
}

.admin-cabecera h2 {
  margin: 0;
}

/* -----------------------------------------------
   11.3. TABLAS DEL PANEL Y ETIQUETAS DE ESTADO
----------------------------------------------- */
.admin-contenido .tabla-desplazable {
  background: var(--color-blanco);
}

.tabla-datos td a {
  font-weight: 500;
}

/* Filas que se pueden pulsar para ver el detalle */
.admin-tabla-seleccionable tbody tr {
  cursor: pointer;
}

.admin-tabla-seleccionable tbody tr:hover {
  background: var(--color-papel);
}

.admin-tabla-seleccionable tbody tr[aria-selected="true"] {
  background: var(--color-primario-suave);
}

.admin-estado {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radio-pildora);
  background: var(--color-papel);
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
  font-weight: 600;
  white-space: nowrap;
}

.admin-estado--publicado,
.admin-estado--pagado,
.admin-estado--respondida,
.admin-estado--activo { background: var(--color-exito-suave); color: var(--color-exito); }

.admin-estado--nueva,
.admin-estado--pendiente,
.admin-estado--aviso { background: var(--color-aviso-suave); color: var(--color-aviso); }

.admin-estado--fallido,
.admin-estado--reembolsado,
.admin-estado--retirado { background: var(--color-error-suave); color: var(--color-error); }

/* -----------------------------------------------
   11.4. PESTAÑAS Y PANELES DEL EDITOR DE CURSOS
----------------------------------------------- */
.admin-pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-1);
  border-bottom: 1px solid var(--color-linea);
}

.admin-pestanas__boton {
  padding: var(--espacio-3) var(--espacio-4);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-weight: 500;
  color: var(--color-texto-suave);
}

.admin-pestanas__boton[aria-selected="true"] {
  border-bottom-color: var(--color-primario);
  color: var(--color-primario);
}

.admin-panel {
  padding: var(--espacio-6);
  background: var(--color-blanco);
  border: 1px solid var(--color-linea);
  border-top: 0;
  border-radius: 0 0 var(--radio) var(--radio);
}

.admin-portada {
  max-width: 480px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-linea);
  border-radius: var(--radio);
}

.admin-portada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-boton-peligro {
  border-color: var(--color-error);
  color: var(--color-error);
}

.admin-boton-peligro:hover {
  background: var(--color-error-suave);
}

/* -----------------------------------------------
   11.5. TEMARIO (módulos y clases)
----------------------------------------------- */
.admin-modulo {
  margin-bottom: var(--espacio-4);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio);
  background: var(--color-blanco);
}

.admin-modulo__cabecera,
.admin-clase {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
}

.admin-modulo__cabecera {
  background: var(--color-papel);
  border-bottom: 1px solid var(--color-linea);
  border-radius: var(--radio) var(--radio) 0 0;
}

.admin-modulo__numero {
  font-family: var(--fuente-titulares);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-academia);
}

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

.admin-clase {
  margin: 0;
  border-bottom: 1px dashed var(--color-linea);
}

.admin-clase__numero {
  min-width: 2.2em;
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  font-variant-numeric: tabular-nums;
}

.admin-clase__titulo {
  font-weight: 500;
}

.admin-clase__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin-top: 2px;
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}

.admin-modulo__pie {
  padding: var(--espacio-3) var(--espacio-4);
}

/* Botones pequeños de acción (subir, bajar, editar, borrar) */
.admin-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-1);
}

.admin-boton-mini {
  min-height: 32px;
  padding: 0.25rem 0.6rem;
  background: var(--color-blanco);
  border: 1px solid var(--color-linea-fuerte);
  border-radius: var(--radio-pequeno);
  font-size: var(--texto-xs);
  font-weight: 500;
}

.admin-boton-mini:hover:not(:disabled) {
  border-color: var(--color-primario);
  color: var(--color-primario);
}

.admin-boton-mini:disabled {
  opacity: 0.4;
  cursor: default;
}

.admin-boton-mini--peligro:hover:not(:disabled) {
  border-color: var(--color-error);
  color: var(--color-error);
}

/* -----------------------------------------------
   11.6. LISTA + DETALLE (solicitudes, usuarios)
----------------------------------------------- */
.admin-dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--espacio-5);
  align-items: start;
}

.admin-detalle {
  position: sticky;
  top: calc(60px + var(--espacio-4));
  padding: var(--espacio-5);
}

/* El mensaje se muestra tal cual se escribió, con sus párrafos */
.admin-mensaje {
  max-height: 360px;
  overflow-y: auto;
  padding: var(--espacio-4);
  background: var(--color-papel);
  border-radius: var(--radio);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
}

.admin-filtro {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-sm);
}

.admin-filtro select {
  width: auto;
  min-height: 40px;
}

.admin-busqueda {
  display: flex;
  gap: var(--espacio-2);
}

.admin-busqueda input {
  min-width: 240px;
  min-height: 42px;
}

/* -----------------------------------------------
   11.7. VENTANAS (dialog) Y AVISOS FLOTANTES
----------------------------------------------- */
.admin-dialogo {
  width: min(92vw, 620px);
  padding: var(--espacio-6);
  border: 0;
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-panel);
}

.admin-dialogo::backdrop {
  background: rgba(20, 32, 46, 0.5);
}

.admin-avisos {
  position: fixed;
  right: var(--espacio-5);
  bottom: var(--espacio-5);
  z-index: var(--capa-aviso);
  display: grid;
  gap: var(--espacio-2);
  max-width: min(90vw, 380px);
}

.admin-avisos .aviso {
  background-color: var(--color-blanco);
  box-shadow: var(--sombra-media);
}

/* Detalle de cambios en el registro */
.admin-cambios {
  margin: 0;
  font-size: var(--texto-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--color-texto-suave);
}

/* -----------------------------------------------
   11.8. ADAPTACIÓN A TABLETA Y MÓVIL
----------------------------------------------- */
@media (max-width: 1024px) {
  .admin {
    grid-template-columns: 1fr;
  }

  .admin-menu {
    flex-direction: row;
    overflow-x: auto;
    padding: var(--espacio-2);
    border-right: 0;
    border-bottom: 1px solid var(--color-linea);
  }

  .admin-menu__enlace {
    white-space: nowrap;
  }

  .admin-dos-columnas {
    grid-template-columns: 1fr;
  }

  .admin-detalle {
    position: static;
  }
}

@media (max-width: 768px) {
  .admin-contenido {
    padding: var(--espacio-4) var(--espacio-3) var(--espacio-8);
  }

  .admin-panel {
    padding: var(--espacio-4);
  }

  .admin-modulo__cabecera,
  .admin-clase {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .admin-modulo__cabecera .admin-acciones,
  .admin-clase .admin-acciones {
    grid-column: 1 / -1;
  }

  .admin-busqueda input {
    min-width: 0;
  }

  .admin-barra__enlaces a:first-child {
    display: none;
  }
}


/* ===== Archivo de origen: 12-responsive.css ===== */
/* =====================================================
   12. ADAPTACIÓN A TABLETA Y MÓVIL (RESPONSIVE)
   -----------------------------------------------------
   Los estilos anteriores están pensados para escritorio.
   Aquí se ajustan para pantallas más pequeñas.

   Puntos de corte:
     · 1024 px → tableta (y menú móvil)
     ·  768 px → móvil grande / tableta vertical
     ·  480 px → móvil pequeño

   Dentro de cada punto de corte, las reglas siguen el
   mismo orden que los archivos 04 a 11.
===================================================== */


/* =====================================================
   12.1. TABLETA (hasta 1024 px)
===================================================== */
@media (max-width: 1024px) {

  /* ---- Estructura ---- */
  .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ---- Cabecera: la barra superior se oculta; sus
          enlaces aparecen dentro del menú móvil ---- */
  .barra-superior {
    display: none;
  }

  .boton-menu {
    display: inline-flex;
  }

  /* ---- Navegación: panel a pantalla completa ----
     IMPORTANTE: con el menú abierto se quita el efecto
     translúcido (backdrop-filter) de la cabecera. Ese efecto
     hace que el navegador encierre el panel dentro de la
     cabecera (80 px de alto) en vez de ocupar la pantalla. */
  body.menu-abierto .cabecera {
    backdrop-filter: none;
    background: var(--color-blanco);
  }

  .navegacion {
    position: fixed;
    top: var(--altura-cabecera);
    left: 0;
    right: 0;
    height: calc(100vh - var(--altura-cabecera));
    height: calc(100dvh - var(--altura-cabecera)); /* móviles con barra del navegador variable */
    z-index: var(--capa-menu);
    display: none;
    overflow-y: auto;
    padding: var(--espacio-4) var(--margen-lateral) var(--espacio-8);
    background: var(--color-blanco);
    overscroll-behavior: contain;
  }

  .navegacion[data-abierta] {
    display: block;
  }

  .navegacion__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .navegacion__elemento {
    border-bottom: 1px solid var(--color-linea);
  }

  .navegacion__enlace {
    width: 100%;
    justify-content: space-between;
    padding: var(--espacio-4) var(--espacio-2);
    font-size: 1.05rem;
  }

  .navegacion__enlace[data-activa],
  .navegacion__enlace[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--color-acento);
    padding-left: var(--espacio-4);
  }

  /* Submenús: lista sencilla que se despliega bajo su botón */
  .navegacion__submenu {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 var(--espacio-3);
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .navegacion__desplegar[aria-expanded="true"] + .navegacion__submenu {
    display: block;
  }

  /* Opciones del submenú: zona táctil amplia y sangrada
     con un filete para ver a qué grupo pertenecen */
  .navegacion__submenu a {
    padding: var(--espacio-3) var(--espacio-4);
    margin-left: var(--espacio-2);
    border-left: 2px solid var(--color-linea);
    border-radius: 0 var(--radio) var(--radio) 0;
  }

  .navegacion__submenu strong {
    font-size: 1rem;
  }

  .navegacion__cta {
    margin: var(--espacio-5) 0 0;
    border-bottom: 0;
  }

  .navegacion__cta .boton {
    width: 100%;
  }

  /* Enlaces que solo existen en el menú móvil (alumnos, teléfono…) */
  .navegacion__solo-movil {
    display: block;
  }

  /* Evita que la página de fondo se desplace con el menú abierto */
  body.menu-abierto {
    overflow: hidden;
  }

  /* ---- Secciones ---- */
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Héroe con ilustración: el dibujo baja debajo del texto */
  .heroe__rejilla {
    grid-template-columns: 1fr;
    gap: var(--espacio-6);
  }

  .heroe__ilustracion img { max-width: 340px; }
  .pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ---- Formularios: una sola columna ---- */
  .consulta {
    grid-template-columns: 1fr;
    gap: var(--espacio-6);
  }

  .consulta__info {
    position: static;
  }

  /* ---- Academia: ficha del curso ---- */
  .ficha-cabecera__rejilla {
    grid-template-columns: 1fr;
    gap: var(--espacio-6);
  }

  .ficha-cabecera__portada {
    order: -1;  /* la imagen pasa arriba */
    margin-bottom: 0;  /* aquí la caja de compra ya no sube sobre la cabecera */
  }

  .ficha {
    grid-template-columns: 1fr;
    gap: var(--espacio-7);
  }

  /* La caja de compra aparece la primera, justo bajo la cabecera */
  .ficha__lateral {
    order: -1;
  }

  .caja-compra {
    position: static;
    margin-top: 0;
  }

  /* ---- Aula: el índice se convierte en panel lateral ---- */
  .aula {
    grid-template-columns: 1fr;
  }

  .aula-barra__indice {
    display: inline-flex;
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-blanco);
  }

  .aula-barra__indice:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .indice {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--capa-panel);
    width: min(90vw, 400px);
    height: 100%;
    border-right: 0;
    box-shadow: var(--sombra-panel);
    transform: translateX(-105%);
    transition: transform var(--transicion);
    visibility: hidden;
  }

  .pagina-aula[data-indice-abierto] .indice {
    transform: translateX(0);
    visibility: visible;
  }

  .indice__cerrar {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--color-papel);
    border: 0;
    border-radius: 50%;
    font-size: 1.3rem;
    line-height: 1;
  }

  .aula-velo {
    position: fixed;
    inset: 0;
    z-index: calc(var(--capa-panel) - 1);
    background: rgba(20, 32, 46, 0.45);
  }

  .pagina-aula[data-indice-abierto] .aula-velo {
    display: block;
  }

  body.pagina-aula[data-indice-abierto] {
    overflow: hidden;
  }

  .aula__contenido {
    padding: var(--espacio-5) var(--espacio-5) var(--espacio-8);
  }
}

/* Los enlaces "solo móvil" del menú se ocultan en escritorio */
@media (min-width: 1025px) {
  .navegacion__solo-movil {
    display: none;
  }
}


/* =====================================================
   12.2. MÓVIL GRANDE / TABLETA VERTICAL (hasta 768 px)
===================================================== */
@media (max-width: 768px) {

  :root {
    --altura-cabecera: 64px;
  }

  /* ---- Estructura ---- */
  .seccion { padding-block: var(--espacio-8); }
  .seccion--compacta { padding-block: var(--espacio-6); }
  .seccion__cabecera { margin-bottom: var(--espacio-6); }

  .rejilla--2,
  .rejilla--3,
  .rejilla--4 {
    grid-template-columns: 1fr;
  }

  /* ---- Cabecera ---- */
  .logotipo__nombre { font-size: 1.15rem; }
  .logotipo__descriptor { font-size: 0.62rem; }

  /* ---- Componentes ---- */
  .plan { padding: var(--espacio-7) var(--espacio-5) var(--espacio-5); }
  .plan__precio { font-size: 2.8rem; }

  /* ---- Secciones ---- */
  .heroe { padding-block: var(--espacio-8) var(--espacio-7); }
  .heroe__accesos { grid-template-columns: 1fr; }
  .procedimientos { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: 1fr; }
  .pie__rejilla { grid-template-columns: 1fr; }

  /* ---- Formularios ---- */
  .formulario__fila { grid-template-columns: 1fr; }
  .consulta__tarjeta { padding: var(--espacio-5); }
  .campo-mensaje__texto { min-height: 200px; }
  .formulario__envio .boton { width: 100%; }

  /* ---- Academia ---- */
  .objetivos { grid-template-columns: 1fr; padding: var(--espacio-5); }
  .temario__modulo-cabecera { grid-template-columns: auto minmax(0, 1fr); padding: var(--espacio-4); }
  .temario__modulo-datos { grid-column: 2; }
  .temario__clase { padding-inline: var(--espacio-4); grid-template-columns: 20px minmax(0, 1fr); }
  .temario__clase-datos { grid-column: 2; }

  /* Aula: barra superior compacta */
  .pagina-aula { --altura-barra-aula: 60px; }
  .aula-barra { gap: var(--espacio-3); padding-inline: var(--espacio-4); }
  .aula-barra__volver { padding-right: var(--espacio-3); }
  /* Solo se ve la flecha; el texto sigue disponible para lectores de pantalla */
  .aula-barra__volver-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .aula-barra__titulo { font-size: 0.95rem; }
  .aula-barra__progreso { display: none; }  /* se muestra bajo la barra (12.2 → .aula-progreso-movil) */

  .aula__contenido { padding: 0 0 var(--espacio-8); }

  /* El vídeo ocupa todo el ancho, sin bordes redondeados */
  .reproductor { border-radius: 0; box-shadow: none; }

  .clase-cabecera,
  .navegacion-clases,
  .clase-descripcion {
    margin-inline: var(--espacio-4);
  }

  .clase-cabecera .boton { width: 100%; }

  .navegacion-clases { grid-template-columns: 1fr; gap: var(--espacio-3); }
  .navegacion-clases__enlace--siguiente { grid-column: auto; }

  .clase-descripcion { padding: var(--espacio-5); }
}

/* Progreso del aula en móvil: franja fina bajo la barra superior */
.aula-progreso-movil {
  display: none;
}

@media (max-width: 768px) {
  .aula-progreso-movil {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    background: var(--color-blanco);
    border-bottom: 1px solid var(--color-linea);
    font-size: var(--texto-xs);
    color: var(--color-texto-suave);
  }

  .aula-progreso-movil .progreso {
    flex: 1;
  }
}


/* =====================================================
   12.3. MÓVIL PEQUEÑO (hasta 480 px)
===================================================== */
@media (max-width: 480px) {

  :root {
    --margen-lateral: 16px;
    --texto-base: 1rem;
  }

  .boton--grande { width: 100%; }
  .grupo > .boton { flex: 1 1 100%; }

  .tarjeta { padding: var(--espacio-5); }
  .heroe__ilustracion img { max-width: 240px; }
  .caja-compra { padding: var(--espacio-5); }
  .caja-compra__precio { font-size: 2.2rem; }

  /* En móvil solo se ve el icono, pero la palabra «Menú» se
     mantiene para los lectores de pantalla (con display:none
     el botón se quedaría sin nombre). Mismo truco que .solo-lectores */
  .boton-menu__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}