:root {
  /* --- Sistema de diseño EESA (director creativo / UI-UX pro-max) ---
     Escala completa de marca. El resto del CSS (1200+ líneas, 34+ plantillas)
     sigue usando los nombres cortos de siempre (--color-primario, etc.) —
     esos ahora son alias que apuntan aquí, así que todo el sitio hereda la
     paleta refinada sin tocar una sola plantilla. Nunca se elimina un alias
     viejo: se amplía. */
  --burgundy-900: #58151F;
  --burgundy-800: #681A26;
  --burgundy-700: #7A1F2B;
  --burgundy-600: #922F3E;
  --burgundy-100: #F5E8EA;

  --gold-700: #A98516;
  --gold-600: #C9A227;
  --gold-500: #D5B444;
  --gold-100: #F8F0D5;

  --cream-50: #FFFDF9;
  --cream-100: #FAF6EF;
  --cream-200: #F2EADF;

  --charcoal-900: #211D1C;
  --charcoal-800: #2B2B2B;
  --charcoal-600: #625B57;
  --charcoal-400: #948B85;

  /* Tokens semánticos (tema claro = predeterminado) */
  --page-bg: var(--cream-100);
  --page-bg-alt: var(--cream-200);
  --surface: #FFFFFF;
  --surface-soft: var(--cream-50);
  --surface-hover: #F8F0E8;
  --surface-active: var(--burgundy-100);

  --text-primary: var(--charcoal-800);
  --text-secondary: var(--charcoal-600);
  --text-muted: #817770;
  --text-disabled: var(--charcoal-400);
  --text-on-primary: #FFFFFF;
  --text-on-accent: #2B2413;

  --primary: var(--burgundy-700);
  --primary-hover: var(--burgundy-800);
  --primary-active: var(--burgundy-900);
  --primary-soft: var(--burgundy-100);
  /* Fondo de los círculos de icono (.icono-badge/.icono-avatar) — se
     re-tiñe en tema oscuro más abajo; sin esto quedaban en rosa clarito
     fijo, fuera de lugar sobre una interfaz oscura. */
  /* Para fondos sólidos que SIEMPRE llevan texto blanco encima (botones,
     gradiente del sidebar/login) — a diferencia de --primary (que en tema
     oscuro se aclara para servir como TEXTO legible sobre fondo oscuro),
     esta pareja se queda fija en el burdeos oscuro en los dos temas, porque
     el blanco necesita ese tono oscuro para tener contraste suficiente
     encima, sin importar el tema del sitio. */
  --primary-solid: var(--burgundy-700);
  --primary-solid-hover: var(--burgundy-800);

  --accent: var(--gold-600);
  --accent-hover: var(--gold-700);
  --accent-soft: var(--gold-100);
  /* Insignia de "nivel" (certificación de escuela) — un nivel/tier no es un
     estado (no reutilizar .pill-activo verde, que implica "activo/aprobado"
     y no distingue básico de avanzado). --gold-dark no sirve aquí tal cual:
     su tono está afinado para verse como ícono sobre tarjeta blanca, no como
     texto sobre --accent-soft — da solo 3.27:1 ahí, por eso un tono propio. */
  --pill-nivel-texto: #7A5A0E;

  --border: #DED4CB;
  --border-subtle: #ECE4DC;
  --border-strong: #BFB2A8;
  --divider: #E8DED5;

  --success: #327A55;
  --success-bg: #EAF5EE;
  /* Fijo en los dos temas — igual que --primary-solid arriba: --success se
     aclara en tema oscuro para servir de TEXTO de badge sobre fondo oscuro,
     pero un botón sólido con texto blanco (.btn-aprobar) necesita quedarse
     siempre oscuro para que el blanco tenga contraste. */
  --success-solid: #327A55;
  --warning: #9C5E16;
  --warning-bg: #FFF3DE;
  --danger: #B13A3A;
  --danger-bg: #FBEAEA;
  --info: #356D8C;
  --info-bg: #EAF3F8;
  /* Estado neutral (ej. "finalizado" — ya no activo, sin ser error/aviso).
     En tema claro coincide a propósito con --text-secondary/--page-bg-alt
     (mismo look de siempre); en oscuro se define aparte porque esos dos
     tokens ahí son casi idénticos a --surface-soft, y la insignia se perdía
     visualmente contra el resto de paneles oscuros. */
  --neutral: #625B57;
  --neutral-bg: #F2EADF;

  --focus-ring: rgba(122, 31, 43, 0.12);
  --selection-bg: #F1DDE0;
  --overlay: rgba(33, 29, 28, 0.44);

  --shadow-sm: 0 1px 3px rgba(54, 38, 31, 0.08);
  --shadow-md: 0 8px 24px rgba(54, 38, 31, 0.10);
  --shadow-lg: 0 18px 48px rgba(54, 38, 31, 0.14);

  /* Escala tipográfica y de espaciado — para componentes nuevos; el CSS
     existente conserva sus tamaños/espacios ya afinados por pantalla. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.8rem, 4vw, 2.5rem);
  --text-4xl: clamp(2.3rem, 6vw, 4.5rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --nav-transition-fast: 160ms;
  --nav-transition-normal: 220ms;
  --nav-transition-menu: 280ms;

  /* --- Alias históricos: todo el CSS/plantillas ya escritos usan estos
     nombres. Apuntan a los tokens de arriba — nunca se renombran los usos
     existentes, solo se redirige de dónde toman su valor. --- */
  --color-primario: var(--primary);
  --color-primario-oscuro: var(--primary-hover);
  --color-secundario: var(--accent);
  --color-secundario-suave: var(--gold-500);
  --color-fondo: var(--page-bg);
  --color-tarjeta: var(--surface);
  --color-texto: var(--text-primary);
  --color-texto-suave: var(--text-secondary);
  --color-borde: var(--border);
  --color-error: var(--danger);
  --color-error-fondo: var(--danger-bg);
  --radio: 10px;
  --sombra: var(--shadow-md);
  --fuente-cuerpo: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-encabezado: Georgia, "Times New Roman", Cambria, serif;
  /* Usadas solo dentro de .app-shell (sidebar oscuro) — login/home no se tocan. */
  --fuente-condensada: "Roboto Condensed", var(--fuente-cuerpo);
  --fuente-manuscrita: "Cormorant Garamond", var(--fuente-encabezado);
}

/* Tema oscuro (mega-prompt Fase 9, refinado por el director creativo) — el
   sidebar de los paneles internos (.app-sidebar) ya es oscuro de por sí
   (gradiente de marca) y no cambia; estas variables solo afectan el
   fondo/tarjetas/texto del resto del sitio. Se aplica por atributo (elegido
   a mano) o por prefers-color-scheme cuando la preferencia es "sistema"
   (sin cookie o data-tema="sistema"). */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --page-bg: #171313;
  --surface: #231B1D;
  --surface-soft: #2C2225;
  --surface-hover: #2C2225;
  --surface-active: #362A2D;
  --text-primary: #F8F1E8;
  --text-secondary: #CFC2BA;
  --text-muted: #A99C93;
  --border: rgba(255, 255, 255, .11);
  --border-subtle: rgba(255, 255, 255, .07);
  --border-strong: rgba(255, 255, 255, .18);
  /* --primary en reposo se subió de #B65A68 (4.08:1, reprueba AA en texto
     normal como los enlaces del nav) a #C97482 (5.53:1) — verificado con la
     fórmula de contraste WCAG, no a ojo. El tono más oscuro se conserva para
     el estado "activo/presionado", que es una interacción breve. */
  --primary: #C97482;
  --primary-hover: #D1808C;
  --primary-active: #B65A68;
  --accent: #D7B64A;
  --page-bg-alt: var(--surface-soft);

  /* Estados semánticos (éxito/aviso/error/info) — en tema claro son texto
     medio sobre fondo pastel muy claro; en oscuro esa combinación se vuelve
     casi ilegible sobre --surface, así que aquí se invierte: fondo oscuro
     apenas teñido + texto claro saturado del mismo tono. Verificado con la
     fórmula de contraste WCAG (los cuatro pares pasan 6.5:1 o más). */
  --success: #97D8B7;
  --success-bg: #193828;
  --warning: #EDBC82;
  --warning-bg: #3F2B12;
  --danger: #DF9090;
  --danger-bg: #3B1616;
  --info: #94C2DB;
  --info-bg: #182E39;
  --neutral: #E3D9D1;
  --neutral-bg: #3D3336;
  --primary-soft: #2F1E21;
  --focus-ring: rgba(201, 116, 130, 0.3);

  /* Fichas de curso por etapa (public/cursos.php) — 2026-09-21, segunda
     pasada: el tema CLARO sigue con los colores literales del sitio
     internacional (sin tocar, ver bloque :root de tema claro más abajo).
     El tema OSCURO ya no copia esos mismos hex saturados (se sentía como
     "bloques de color pesados" — feedback real del usuario) — ahora rojo/
     verde/azul (y los 3 tonos de Equipos/Optativo/Retiros) son solo ACENTO:
     ícono, línea superior, halo sutil detrás del ícono, borde de hover/foco.
     La base de la tarjeta es neutral (--surface-soft, ya existente — no se
     duplica token) con un tinte de 8%/13% de opacidad encima. Contraste
     verificado: hasta el tono menos saturado (retiro) da ~7:1 contra la
     tarjeta, muy por encima del 3:1 que exige WCAG para indicadores de foco. */
  --gold-dark: #D9B054;
  --stage-red: #EF5548;       --stage-red-soft: rgba(239, 85, 72, 0.08);       --stage-red-hover: rgba(239, 85, 72, 0.13);       --stage-red-borde-hover: rgba(239, 85, 72, 0.36);
  --stage-green: #67B943;     --stage-green-soft: rgba(103, 185, 67, 0.08);    --stage-green-hover: rgba(103, 185, 67, 0.13);    --stage-green-borde-hover: rgba(103, 185, 67, 0.36);
  --stage-blue: #62A9D6;      --stage-blue-soft: rgba(98, 169, 214, 0.08);     --stage-blue-hover: rgba(98, 169, 214, 0.13);     --stage-blue-borde-hover: rgba(98, 169, 214, 0.36);
  --stage-equipos: #C9A578;   --stage-equipos-soft: rgba(201, 165, 120, 0.08); --stage-equipos-hover: rgba(201, 165, 120, 0.13); --stage-equipos-borde-hover: rgba(201, 165, 120, 0.36);
  --stage-optativo: #E0A857;  --stage-optativo-soft: rgba(224, 168, 87, 0.08); --stage-optativo-hover: rgba(224, 168, 87, 0.13); --stage-optativo-borde-hover: rgba(224, 168, 87, 0.36);
  --stage-retiro: #B7AEA6;    --stage-retiro-soft: rgba(183, 174, 166, 0.08);  --stage-retiro-hover: rgba(183, 174, 166, 0.13);  --stage-retiro-borde-hover: rgba(183, 174, 166, 0.36);

  --etapa-vida-acento: var(--stage-red);
  --etapa-vida-bg: linear-gradient(var(--stage-red-soft), var(--stage-red-soft)), var(--surface-soft);
  --etapa-vida-bg-hover: linear-gradient(var(--stage-red-hover), var(--stage-red-hover)), var(--surface-soft);
  --etapa-evangelizar-acento: var(--stage-green);
  --etapa-evangelizar-bg: linear-gradient(var(--stage-green-soft), var(--stage-green-soft)), var(--surface-soft);
  --etapa-evangelizar-bg-hover: linear-gradient(var(--stage-green-hover), var(--stage-green-hover)), var(--surface-soft);
  --etapa-formar-acento: var(--stage-blue);
  --etapa-formar-bg: linear-gradient(var(--stage-blue-soft), var(--stage-blue-soft)), var(--surface-soft);
  --etapa-formar-bg-hover: linear-gradient(var(--stage-blue-hover), var(--stage-blue-hover)), var(--surface-soft);
  --etapa-equipos-acento: var(--stage-equipos);
  --etapa-equipos-bg: linear-gradient(var(--stage-equipos-soft), var(--stage-equipos-soft)), var(--surface-soft);
  --etapa-equipos-bg-hover: linear-gradient(var(--stage-equipos-hover), var(--stage-equipos-hover)), var(--surface-soft);
  --etapa-optativo-acento: var(--stage-optativo);
  --etapa-optativo-bg: linear-gradient(var(--stage-optativo-soft), var(--stage-optativo-soft)), var(--surface-soft);
  --etapa-optativo-bg-hover: linear-gradient(var(--stage-optativo-hover), var(--stage-optativo-hover)), var(--surface-soft);
  --etapa-retiro-acento: var(--stage-retiro);
  --etapa-retiro-bg: linear-gradient(var(--stage-retiro-soft), var(--stage-retiro-soft)), var(--surface-soft);
  --etapa-retiro-bg-hover: linear-gradient(var(--stage-retiro-hover), var(--stage-retiro-hover)), var(--surface-soft);
  --accent-soft: #372F15;
  --pill-nivel-texto: #D9B054;

  --color-fondo: var(--page-bg);
  --color-tarjeta: var(--surface);
  --color-texto: var(--text-primary);
  --color-texto-suave: var(--text-secondary);
  --color-borde: var(--border);
  --sombra: 0 8px 24px rgba(0, 0, 0, 0.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]), :root[data-tema="sistema"] {
    color-scheme: dark;
    --page-bg: #171313;
    --surface: #231B1D;
    --surface-soft: #2C2225;
    --surface-hover: #2C2225;
    --surface-active: #362A2D;
    --text-primary: #F8F1E8;
    --text-secondary: #CFC2BA;
    --text-muted: #A99C93;
    --border: rgba(255, 255, 255, .11);
    --border-subtle: rgba(255, 255, 255, .07);
    --border-strong: rgba(255, 255, 255, .18);
    --primary: #C97482;
    --primary-hover: #D1808C;
    --primary-active: #B65A68;
    --accent: #D7B64A;
    --page-bg-alt: var(--surface-soft);

    --success: #97D8B7;
    --success-bg: #193828;
    --warning: #EDBC82;
    --warning-bg: #3F2B12;
    --danger: #DF9090;
    --danger-bg: #3B1616;
    --info: #94C2DB;
    --info-bg: #182E39;
    --neutral: #E3D9D1;
    --neutral-bg: #3D3336;
    --primary-soft: #2F1E21;
    --focus-ring: rgba(201, 116, 130, 0.3);

    /* Mismos tokens de etapa que el bloque :root[data-tema="oscuro"] de arriba
       (tema oscuro por preferencia del sistema en vez de toggle manual) — ver
       ese comentario: rojo/verde/azul como acento sutil, no fondo saturado
       (2026-09-21, segunda pasada). */
    --gold-dark: #D9B054;
    --stage-red: #EF5548;       --stage-red-soft: rgba(239, 85, 72, 0.08);       --stage-red-hover: rgba(239, 85, 72, 0.13);       --stage-red-borde-hover: rgba(239, 85, 72, 0.36);
    --stage-green: #67B943;     --stage-green-soft: rgba(103, 185, 67, 0.08);    --stage-green-hover: rgba(103, 185, 67, 0.13);    --stage-green-borde-hover: rgba(103, 185, 67, 0.36);
    --stage-blue: #62A9D6;      --stage-blue-soft: rgba(98, 169, 214, 0.08);     --stage-blue-hover: rgba(98, 169, 214, 0.13);     --stage-blue-borde-hover: rgba(98, 169, 214, 0.36);
    --stage-equipos: #C9A578;   --stage-equipos-soft: rgba(201, 165, 120, 0.08); --stage-equipos-hover: rgba(201, 165, 120, 0.13); --stage-equipos-borde-hover: rgba(201, 165, 120, 0.36);
    --stage-optativo: #E0A857;  --stage-optativo-soft: rgba(224, 168, 87, 0.08); --stage-optativo-hover: rgba(224, 168, 87, 0.13); --stage-optativo-borde-hover: rgba(224, 168, 87, 0.36);
    --stage-retiro: #B7AEA6;    --stage-retiro-soft: rgba(183, 174, 166, 0.08);  --stage-retiro-hover: rgba(183, 174, 166, 0.13);  --stage-retiro-borde-hover: rgba(183, 174, 166, 0.36);

    --etapa-vida-acento: var(--stage-red);
    --etapa-vida-bg: linear-gradient(var(--stage-red-soft), var(--stage-red-soft)), var(--surface-soft);
    --etapa-vida-bg-hover: linear-gradient(var(--stage-red-hover), var(--stage-red-hover)), var(--surface-soft);
    --etapa-evangelizar-acento: var(--stage-green);
    --etapa-evangelizar-bg: linear-gradient(var(--stage-green-soft), var(--stage-green-soft)), var(--surface-soft);
    --etapa-evangelizar-bg-hover: linear-gradient(var(--stage-green-hover), var(--stage-green-hover)), var(--surface-soft);
    --etapa-formar-acento: var(--stage-blue);
    --etapa-formar-bg: linear-gradient(var(--stage-blue-soft), var(--stage-blue-soft)), var(--surface-soft);
    --etapa-formar-bg-hover: linear-gradient(var(--stage-blue-hover), var(--stage-blue-hover)), var(--surface-soft);
    --etapa-equipos-acento: var(--stage-equipos);
    --etapa-equipos-bg: linear-gradient(var(--stage-equipos-soft), var(--stage-equipos-soft)), var(--surface-soft);
    --etapa-equipos-bg-hover: linear-gradient(var(--stage-equipos-hover), var(--stage-equipos-hover)), var(--surface-soft);
    --etapa-optativo-acento: var(--stage-optativo);
    --etapa-optativo-bg: linear-gradient(var(--stage-optativo-soft), var(--stage-optativo-soft)), var(--surface-soft);
    --etapa-optativo-bg-hover: linear-gradient(var(--stage-optativo-hover), var(--stage-optativo-hover)), var(--surface-soft);
    --etapa-retiro-acento: var(--stage-retiro);
    --etapa-retiro-bg: linear-gradient(var(--stage-retiro-soft), var(--stage-retiro-soft)), var(--surface-soft);
    --etapa-retiro-bg-hover: linear-gradient(var(--stage-retiro-hover), var(--stage-retiro-hover)), var(--surface-soft);
    --accent-soft: #372F15;
    --pill-nivel-texto: #D9B054;

    --color-fondo: var(--page-bg);
    --color-tarjeta: var(--surface);
    --color-texto: var(--text-primary);
    --color-texto-suave: var(--text-secondary);
    --color-borde: var(--border);
    --sombra: 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }

/* Accesibilidad — mega-prompt de diseño, sección 37: respetar siempre la
   preferencia del sistema de movimiento reducido, sin excepción por componente. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  background: var(--color-fondo);
  color: var(--color-texto);
  line-height: 1.5;
}

h1, h2, h3 { font-family: var(--fuente-encabezado); }

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

.pagina-centrada {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.tarjeta {
  width: 100%;
  max-width: 400px;
  background: var(--color-tarjeta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 32px 28px;
}

.marca {
  text-align: center;
  margin-bottom: 24px;
}

.marca .logo-escuela {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto;
  object-fit: contain;
}

.marca .insignia {
  display: inline-block;
  padding: 8px 18px;
  border: 2px solid var(--color-secundario);
  border-radius: 999px;
  color: var(--color-primario);
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.marca h1 {
  font-size: 1.35rem;
  margin: 14px 0 4px;
  color: var(--color-primario-oscuro);
}

.marca p {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: 0.92rem;
}

.campo { margin-bottom: 18px; }

.campo label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-texto);
}

.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  font-size: 1rem;
  background: var(--surface-soft);
  font-family: inherit;
  color: var(--color-texto);
  transition: border-color var(--nav-transition-fast) ease, box-shadow var(--nav-transition-fast) ease;
}

.campo textarea { resize: vertical; }

/* Input suelto dentro de una fila de acciones (ej. "correo del reemplazo"
   junto a un botón) — fuera de un .campo, así que necesita su propio fondo/
   foco en vez de heredar la regla de arriba. Antes tenía estilos en línea
   sin fondo ni estado de foco propios, apenas se salvaban en oscuro gracias
   a color-scheme:dark del navegador. */
.campo-inline {
  padding: 8px 10px;
  border: 1px solid var(--color-borde);
  border-radius: 6px;
  font-size: 0.88rem;
  font-family: inherit;
  background: var(--surface-soft);
  color: var(--color-texto);
  transition: border-color var(--nav-transition-fast) ease, box-shadow var(--nav-transition-fast) ease;
}
.campo-inline:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px var(--focus-ring); }

.campo input:hover, .campo select:hover, .campo textarea:hover {
  border-color: var(--border-strong);
}

.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.campo input:disabled, .campo select:disabled, .campo textarea:disabled {
  background: var(--page-bg-alt);
  color: var(--text-disabled);
  cursor: not-allowed;
  border-color: var(--border-subtle);
}

.boton {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: var(--primary-solid);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.boton:hover { background: var(--primary-solid-hover); }
.boton:disabled {
  background: var(--border-strong);
  color: var(--text-disabled);
  cursor: not-allowed;
}
.boton:disabled:hover { background: var(--border-strong); }

.enlaces-secundarios {
  margin-top: 18px;
  text-align: center;
  font-size: 0.88rem;
}

.alerta {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 18px;
}

.alerta-error {
  background: var(--color-error-fondo);
  color: var(--color-error);
  border: 1px solid rgba(179, 38, 30, 0.25);
}

.alerta-info {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(50, 122, 85, 0.25);
}

.enlace-reset {
  word-break: break-all;
  font-size: 0.82rem;
  background: var(--page-bg-alt);
  border: 1px dashed var(--color-secundario);
  padding: 10px;
  border-radius: 8px;
  margin-top: 10px;
}

@media (max-width: 420px) {
  .tarjeta { padding: 26px 20px; }
}

/* ---------------------------------------------------------------
   Autenticación (login / recuperar) — layout de dos paneles
   --------------------------------------------------------------- */

.auth-shell {
  min-height: 100vh;
  display: flex;
}

.auth-marca {
  flex: 1 1 42%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--primary-solid) 0%, var(--primary-solid-hover) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  text-align: center;
  color: #fff;
}

.auth-marca::before,
.auth-marca::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(201, 162, 39, 0.22);
  border-radius: 50%;
}

.auth-marca::before { width: 520px; height: 520px; }
.auth-marca::after { width: 720px; height: 720px; border-color: rgba(201, 162, 39, 0.12); }

.auth-marca .medallon {
  position: relative;
  width: 190px;
  height: 190px;
  background: #fdfbf6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  margin-bottom: 24px;
}

.auth-marca .medallon img { width: 158px; height: 158px; object-fit: contain; }

.auth-marca h1 {
  position: relative;
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0 0 10px;
  max-width: 22ch;
}

.auth-marca p {
  position: relative;
  margin: 0;
  color: var(--color-secundario-suave);
  font-size: 0.95rem;
  max-width: 34ch;
}

.auth-form-panel {
  flex: 1 1 58%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--color-tarjeta);
}

.auth-form-panel .contenido {
  width: 100%;
  max-width: 380px;
}

.auth-form-panel .encabezado-form {
  margin-bottom: 28px;
}

.auth-form-panel .encabezado-form h2 {
  margin: 0 0 6px;
  font-size: 1.5rem;
  color: var(--color-primario-oscuro);
}

.auth-form-panel .encabezado-form p {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: 0.94rem;
}

.campo-envoltura {
  position: relative;
}

.campo-envoltura svg.icono-campo {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-texto-suave);
  pointer-events: none;
}

.campo-envoltura input {
  padding-left: 40px;
}

.campo-envoltura .alternar-clave {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--color-texto-suave);
  display: flex;
}

.campo-envoltura .alternar-clave:hover { color: var(--color-primario); }
.campo-envoltura .alternar-clave svg { width: 18px; height: 18px; }
.campo-envoltura input[type="password"],
.campo-envoltura input.tiene-alternar { padding-right: 40px; }

.boton {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.boton:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(122, 31, 43, 0.28); }
.boton:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.boton:disabled, .boton:disabled:hover, .boton:disabled:active {
  transform: none;
  box-shadow: none;
}

.alerta-con-icono {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.alerta-con-icono svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

@media (max-width: 860px) {
  .auth-shell { flex-direction: column; }
  .auth-marca { flex: none; padding: 32px 24px; }
  .auth-marca::before { width: 340px; height: 340px; }
  .auth-marca::after { width: 460px; height: 460px; }
  .auth-marca .medallon { width: 128px; height: 128px; margin-bottom: 16px; }
  .auth-marca .medallon img { width: 106px; height: 106px; }
  .auth-marca h1 { font-size: 1.2rem; }
  .auth-form-panel { padding: 32px 20px 48px; align-items: flex-start; }
}

/* ---------------------------------------------------------------
   Sitio público (header, nav, contenido ancho, footer)
   --------------------------------------------------------------- */

.sitio-header {
  background: var(--color-tarjeta);
  border-bottom: 1px solid var(--color-borde);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sitio-header .marca-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.sitio-header .marca-inline img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.sitio-header .marca-inline span {
  font-weight: 700;
  color: var(--color-primario-oscuro);
  font-size: 1.02rem;
  line-height: 1.2;
}

.sitio-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.sitio-nav a {
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-texto);
  font-size: 0.92rem;
  font-weight: 600;
}

.sitio-nav a:hover { background: var(--color-fondo); }

.sitio-nav a.activo {
  color: var(--color-primario);
  background: var(--primary-soft);
}

.sitio-nav a.destacado {
  background: var(--primary-solid);
  color: #fff;
}

.sitio-nav a.destacado:hover { background: var(--primary-solid-hover); }

.contenedor-ancho {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

.contenedor-ancho h1 {
  color: var(--color-primario-oscuro);
  margin-top: 0;
}

.intro-pagina {
  color: var(--color-texto-suave);
  max-width: 62ch;
  margin-bottom: 28px;
}

.sitio-footer {
  text-align: center;
  padding: 24px 20px 40px;
  color: var(--color-texto-suave);
  font-size: 0.85rem;
}

/* Catálogo de cursos */

.etapa-grupo { margin-bottom: 32px; }

.etapa-grupo h2 {
  font-size: 1.1rem;
  color: var(--color-primario);
  border-bottom: 2px solid var(--color-secundario);
  padding-bottom: 6px;
  margin-bottom: 14px;
}

.grid-cursos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.curso-card {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: 10px;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 0.94rem;
}

.curso-card .etiqueta-menor {
  display: block;
  margin-top: 6px;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--color-primario);
}

/* Calendario / listado de sesiones */

.sesion-card {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.sesion-card .info h3 {
  margin: 0 0 4px;
  color: var(--color-primario-oscuro);
}

.sesion-card .info p {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: 0.9rem;
}

.estado-vacio {
  background: var(--page-bg-alt);
  border: 1px dashed var(--color-secundario);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  color: var(--color-texto-suave);
}

/* Formulario ancho (inscribirme) */

.tarjeta-ancha {
  background: var(--color-tarjeta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 28px;
  max-width: 720px;
  margin: 0 auto;
}

.campo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

@media (max-width: 560px) {
  .campo-grid { grid-template-columns: 1fr; }
  .tarjeta-ancha { padding: 20px; }
}

.campo-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

/* Área táctil mínima de 44px (mega-prompt, sección 5) — la casilla nativa
   es chica, pero toda la fila (casilla + etiqueta) responde al toque. */
.campo-checkbox:hover { background: var(--surface-hover); }

.campo-checkbox input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--color-primario);
  cursor: pointer;
}

.campo-checkbox label { font-weight: 500; font-size: 0.92rem; cursor: pointer; padding-top: 2px; }

/* Selector de sede (migración 009, 2026-09-21: "sede habitual" vs "otra
   parroquia/comunidad", ver local/cursos.php) — mismo patrón visual que
   .campo-checkbox. El bloque de "otra sede" se revela solo con CSS (:has,
   sin JavaScript) cuando ese radio está marcado; si el navegador no soporta
   :has() el bloque queda siempre visible (degradación seguro, nunca oculta
   campos que hagan falta). */
.campo-radio-grupo { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; }
.campo-radio { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.92rem; cursor: pointer; }
.campo-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-primario); cursor: pointer; }
.bloque-sede-otra { display: block; padding: 12px; border: 1px solid var(--color-borde); border-radius: 8px; margin-bottom: 14px; background: var(--surface-soft); }
.campo-radio-grupo:has(input[value="habitual"]:checked) + .bloque-sede-otra { display: none; }

fieldset {
  border: 1px solid var(--color-borde);
  border-radius: 10px;
  padding: 16px 16px 4px;
  margin: 0 0 22px;
}

fieldset legend {
  font-weight: 700;
  color: var(--color-primario);
  padding: 0 8px;
  font-size: 0.92rem;
}

.texto-ayuda {
  font-size: 0.82rem;
  color: var(--color-texto-suave);
  margin-top: -10px;
  margin-bottom: 16px;
}

/* Lista simple con viñeta discreta — resúmenes/estado (ej. cupo, fecha
   límite en public/inscribirme.php y public/sesion.php) — 2026-09-21. */
.lista-simple { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
.lista-simple li { padding-left: 16px; position: relative; font-size: 0.9rem; color: var(--color-texto); }
.lista-simple li::before { content: '•'; position: absolute; left: 0; color: var(--color-secundario); }

/* =================================================================
   Paneles internos (local/admin/equipo/registracion/participante):
   sidebar oscuro + barra superior + contenido — inspirado en las
   pantallas de referencia (support/recursos/web-example-*.png).
   ================================================================= */

.app-shell {
  display: flex;
  min-height: 100vh;
  font-family: var(--fuente-condensada);
}
.app-shell h1, .app-shell h2, .app-shell h3 { font-family: var(--fuente-condensada); font-weight: 800; }

.app-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--primary-solid) 0%, var(--primary-solid-hover) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 28px 22px;
}

.app-sidebar .marca-app {
  margin-bottom: 30px;
}

.app-sidebar .marca-app img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  margin-bottom: 10px;
}

.app-sidebar .marca-app strong {
  display: block;
  font-family: var(--fuente-encabezado);
  font-size: 1.2rem;
  line-height: 1.25;
}

.app-sidebar .marca-app span {
  display: block;
  font-size: 0.76rem;
  color: var(--color-secundario-suave);
  margin-top: 6px;
  line-height: 1.4;
}

.app-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.app-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #f2e9df;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  border-left: 3px solid transparent;
}

.app-nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.app-nav a:hover { background: rgba(255, 255, 255, 0.08); }
.app-nav a.activo {
  background: var(--color-secundario);
  border-left-color: transparent;
  color: var(--text-on-accent);
}

.app-sidebar .cita-sidebar {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--fuente-manuscrita);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--color-secundario-suave);
}
.app-sidebar .cita-sidebar cite { display: block; font-style: normal; font-size: 0.7rem; font-family: var(--fuente-condensada); letter-spacing: 0.03em; margin-top: 4px; opacity: 0.85; }

.app-sidebar .pie-sidebar {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.app-sidebar .pie-sidebar .usuario { font-size: 0.86rem; margin-bottom: 10px; }
.app-sidebar .pie-sidebar .usuario strong { display: block; color: #fff; }
.app-sidebar .pie-sidebar .usuario span { color: var(--color-secundario-suave); font-size: 0.76rem; }
.app-sidebar .pie-sidebar a.salir { color: #f2e9df; font-size: 0.85rem; text-decoration: none; }
.app-sidebar .pie-sidebar a.salir:hover { color: #fff; text-decoration: underline; }
.app-sidebar .pie-sidebar a.visitar-sitio {
  display: flex; align-items: center; gap: 6px; color: var(--color-secundario);
  font-size: 0.82rem; font-weight: 700; text-decoration: none; margin-bottom: 12px;
}
.app-sidebar .pie-sidebar a.visitar-sitio svg { width: 14px; height: 14px; }
.app-sidebar .pie-sidebar a.visitar-sitio:hover { color: #fff; }
.app-sidebar .pie-sidebar .selector-preferencias { margin-bottom: 12px; }
.app-sidebar .pie-sidebar .boton-tema { color: #f2e9df; }
.app-sidebar .pie-sidebar .boton-tema:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.app-sidebar .pie-sidebar .selector-idioma a { color: #f2e9df; }
.app-sidebar .pie-sidebar .selector-idioma a.activo { color: var(--color-secundario); }
.app-sidebar .pie-sidebar .selector-idioma a:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

.app-main-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  background: var(--color-tarjeta);
  border-bottom: 1px solid var(--color-borde);
  flex-wrap: wrap;
  gap: 10px;
}

.app-topbar .migaja {
  font-weight: 700;
  color: var(--color-texto);
  position: relative;
  padding-bottom: 10px;
}

.app-topbar .migaja::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 2px;
  background: var(--color-secundario);
}

.app-topbar .usuario-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-texto);
  font-weight: 600;
  font-size: 0.88rem;
}

.app-topbar .usuario-chip .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-primario-oscuro);
}

.app-content { padding: 32px; flex: 1; }
.app-content h1 { margin: 0 0 22px; color: var(--color-primario-oscuro); }
.app-content h2 { font-size: 1.05rem; color: var(--color-texto); margin: 0 0 16px; }

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .app-sidebar { width: auto; flex-direction: column; align-items: stretch; padding: 0; gap: 0; }
  .app-sidebar .marca-app { margin: 0; display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
  .app-sidebar .marca-app img { width: 34px; height: 34px; margin-bottom: 0; flex-shrink: 0; }
  .app-sidebar .marca-app strong { font-size: 1rem; }
  .app-sidebar .marca-app span { display: none; }
  .app-nav { flex-direction: row; overflow-x: auto; flex: none; gap: 4px; padding: 0 12px 12px; }
  .app-nav a { white-space: nowrap; flex-shrink: 0; }
  .app-sidebar .cita-sidebar { display: none; }
  .app-sidebar .pie-sidebar { margin-top: 0; padding: 10px 18px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
  .app-sidebar .pie-sidebar .usuario { display: none; }
  .app-content { padding: 20px 16px; }
  .app-topbar { padding: 14px 18px; }
}

/* Tarjetas de estadística del dashboard */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}

/* Solo las stat-card que además son enlaces (ej. "Solicitudes pendientes" →
   /admin/solicitudes.php) llevan feedback de hover — las que son <div>
   puramente informativos (sin destino al hacer clic) se quedan estáticas. */
a.stat-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
a.stat-card:hover, a.stat-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-secundario);
}

.stat-card .icono-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card .icono-badge svg { width: 22px; height: 22px; color: var(--color-primario); }
.stat-card .numero { display: block; font-size: 1.6rem; font-weight: 800; color: var(--color-texto); line-height: 1.3; }
.stat-card .etiqueta { display: block; font-size: 0.84rem; color: var(--color-texto-suave); }

/* Tarjeta de panel con encabezado (ej. "Inscripciones por aprobar") */

.panel-card {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 24px;
  overflow-x: auto;
}

.panel-card > h2 { margin: 0 0 16px; }

/* Blog público */

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.blog-tarjeta {
  display: flex; flex-direction: column; background: var(--color-tarjeta); border: 1px solid var(--color-borde);
  border-radius: 12px; padding: 18px; text-decoration: none; color: var(--color-texto);
  box-shadow: var(--sombra); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.blog-tarjeta:hover, .blog-tarjeta:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(66, 42, 35, 0.14); }
.blog-tarjeta img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; margin-bottom: 12px; }
.blog-tarjeta .categoria { font-size: 0.78rem; font-weight: 700; color: var(--color-primario); margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.blog-tarjeta strong { font-size: 1.05rem; line-height: 1.35; }
.blog-tarjeta p { font-size: 0.88rem; color: var(--color-texto-suave); margin: 8px 0 0; line-height: 1.5; }
.blog-tarjeta .fecha { margin-top: 12px; font-size: 0.78rem; color: var(--color-texto-suave); }

/* Últimas noticias (home) — 2026-09-22: máximo 3 tarjetas, cuadrícula que
   reacciona al conteo REAL (data-count, calculado en PHP con count($noticias),
   nunca escrito a mano) en vez de dejar que auto-fit estire una sola tarjeta
   a todo el ancho o deje una columna vacía con dos. */
.noticias-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 24px 0; }
.noticias-grid[data-count="1"] { grid-template-columns: 1fr; justify-items: center; }
.noticias-grid[data-count="1"] .blog-tarjeta { width: min(100%, 480px); }
.noticias-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
@media (max-width: 860px) {
  .noticias-grid, .noticias-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
  .noticias-grid[data-count="1"] { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .noticias-grid, .noticias-grid[data-count="2"], .noticias-grid[data-count="1"] { grid-template-columns: 1fr; }
}
.noticias-grid .tipo-noticia { font-size: 0.72rem; font-weight: 700; color: var(--color-secundario-oscuro, var(--color-primario)); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 4px; }
.noticias-grid .boton-noticia { margin-top: 12px; font-weight: 700; color: var(--color-primario); font-size: 0.86rem; }

/* Resplandor azul eléctrico — excepción visual solo para cuando queda UNA
   sola tarjeta (data-count="1"), para destacar la única noticia actual sin
   tocar la identidad burdeos/dorada general del sitio. Estático a propósito
   (sin pulso ni parpadeo) — ver comentario junto a --news-electric-blue. */
:root {
  --news-electric-blue: #2F8CFF;
  --news-electric-blue-soft: rgba(47, 140, 255, 0.28);
}
.noticias-grid[data-count="1"] .blog-tarjeta {
  border-color: rgba(47, 140, 255, 0.68);
  box-shadow: 0 0 14px rgba(47, 140, 255, 0.22), 0 0 32px rgba(47, 140, 255, 0.14);
}
:root[data-tema="oscuro"] .noticias-grid[data-count="1"] .blog-tarjeta {
  border-color: rgba(47, 140, 255, 0.55);
  box-shadow: 0 0 14px rgba(47, 140, 255, 0.28), 0 0 34px rgba(47, 140, 255, 0.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) .noticias-grid[data-count="1"] .blog-tarjeta {
    border-color: rgba(47, 140, 255, 0.55);
    box-shadow: 0 0 14px rgba(47, 140, 255, 0.28), 0 0 34px rgba(47, 140, 255, 0.18);
  }
}

/* Tabla de datos */

.tabla-datos { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabla-datos th {
  text-align: left;
  background: var(--page-bg-alt);
  color: var(--color-texto-suave);
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 12px;
  white-space: nowrap;
}
.tabla-datos td { padding: 12px; border-top: 1px solid var(--color-borde); vertical-align: middle; }
.tabla-datos tr:hover td { background: var(--surface-hover); }

/* Tabla -> tarjetas en móvil, en vez de depender solo del scroll horizontal
   del .panel-card contenedor (mega-prompt: sin scroll horizontal cuando se
   pueda evitar). data-label lo pone includes/layout.php::appFooter() por
   JS, leyendo el <thead> de cada tabla — así no hace falta editar las 17
   tablas del sistema una por una. */
@media (max-width: 640px) {
  .tabla-datos thead { display: none; }
  .tabla-datos, .tabla-datos tbody, .tabla-datos tr, .tabla-datos td { display: block; width: 100%; }
  .tabla-datos { border: none; }
  .tabla-datos tbody tr {
    margin-bottom: 12px;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-tarjeta);
  }
  .tabla-datos tbody tr:last-child { margin-bottom: 0; }
  .tabla-datos tbody tr:hover td { background: var(--color-tarjeta); }
  .tabla-datos td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: right;
  }
  .tabla-datos td:first-child { border-top: none; }
  .tabla-datos td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-texto-suave);
    text-align: left;
    flex-shrink: 0;
  }
  .tabla-datos td:not([data-label]) { justify-content: flex-start; }
  .tabla-datos td .fila-acciones { justify-content: flex-end; flex-wrap: wrap; }
}

/* Pills de estado */

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
/* Sistema de badges (mega-prompt de diseño, sección "Badges y estados"): fondo
   suave + texto oscuro del mismo color, nunca texto blanco sobre un tono claro.
   Usan los tokens semánticos de estado, no colores sueltos, para que cualquier
   ajuste futuro de marca se propague solo. */
.pill-pendiente { background: var(--warning-bg); color: var(--warning); }
.pill-aprobada, .pill-activo, .pill-completada, .pill-en_curso { background: var(--success-bg); color: var(--success); }
.pill-rechazada, .pill-cancelado { background: var(--danger-bg); color: var(--danger); }
.pill-lista_espera { background: var(--info-bg); color: var(--info); }
.pill-incompleta { background: var(--warning-bg); color: var(--warning); }
.pill-programado { background: var(--info-bg); color: var(--info); }
.pill-finalizado { background: var(--neutral-bg); color: var(--neutral); }

/* Botones pequeños de acción en tablas/tarjetas */

.btn-mini { padding: 7px 14px; border-radius: 6px; font-size: 0.82rem; font-weight: 700; border: 1px solid transparent; cursor: pointer; text-decoration: none; display: inline-block; background: none; }
.btn-aprobar { background: var(--success-solid); color: #fff; }
.btn-aprobar:hover { background: #245e3e; }
.btn-rechazar { background: var(--surface); color: var(--danger); border-color: #e3b3b3; }
.btn-rechazar:hover { background: var(--danger-bg); }
.btn-neutro { background: var(--surface); color: var(--color-texto); border-color: var(--color-borde); }
.btn-neutro:hover { background: var(--color-fondo); }
/* Página actual en paginación (ej. blog público) — nunca reutilizar
   .btn-aprobar aquí: ese color implica "solicitud aprobada", un significado
   de estado que no aplica a "estás viendo esta página". */
.btn-actual { background: var(--primary-solid); color: #fff; border-color: var(--primary-solid); }
.btn-mini:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-mini:disabled:hover { background: inherit; }
.fila-acciones { display: flex; gap: 6px; flex-wrap: wrap; }

/* Etiqueta neutral (ej. #hashtag de una entrada de blog) — a diferencia de
   los .pill-* de estado (pendiente/aprobada/...), no implica ningún estado. */
.pill-etiqueta { background: var(--page-bg-alt); color: var(--color-texto-suave); }

/* Insignia de nivel de certificación de escuela (básico/intermedio/avanzado)
   — un nivel no es un estado "activo", así que no reutiliza .pill-activo. */
.pill-nivel { background: var(--accent-soft); color: var(--pill-nivel-texto); }

/* =================================================================
   Sitio público de mercadeo (anónimo) — header horizontal + hero
   ================================================================= */

.marketing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  background: var(--color-tarjeta);
  flex-wrap: wrap;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--nav-transition-normal) ease,
    border-color var(--nav-transition-normal) ease,
    box-shadow var(--nav-transition-normal) ease,
    padding var(--nav-transition-normal) ease;
}
/* Estado tras hacer scroll (mega-prompt de diseño, navbar sticky): la clase la
   aplica un IntersectionObserver liviano en publicHeader() — nunca un cálculo
   en cada evento de scroll. Sin JavaScript, el header ya se ve bien: fondo
   sólido desde el principio, solo pierde el borde/sombra de scroll. */
.marketing-header.con-scroll {
  border-bottom-color: var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.marketing-header .marca-inline { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-primario-oscuro); font-family: var(--fuente-encabezado); }
.marketing-header .marca-inline img { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
/* Nombre + subtítulo institucional (2026-09-21, a pedido del usuario) —
   apilados dentro de la misma altura de 42px del logo, sin agrandar el
   header: line-height ajustado para que las 2 líneas quepan justas. */
.marketing-header .marca-texto { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; min-width: 0; }
.marketing-header .marca-nombre { font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
.marketing-header .marca-subtitulo { font-weight: 500; font-size: 0.62rem; color: var(--color-texto-suave); white-space: nowrap; letter-spacing: 0.01em; }
.marketing-header nav { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.marketing-header nav a { color: var(--color-texto); text-decoration: none; font-weight: 600; font-size: 0.92rem; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: color var(--nav-transition-fast) ease, border-color var(--nav-transition-fast) ease; }
.marketing-header nav a:hover { color: var(--color-primario); }
.marketing-header nav a.activo { color: var(--color-primario); border-bottom-color: var(--color-secundario); }
/* .cta sin acotar a .marketing-header a propósito: el mismo botón se
   reutiliza en el pie del menú móvil (.menu-movil-pie .cta) — acotarlo
   dejaba ese botón sin forma de píldora y con el ícono de flecha sin
   tamaño, renderizando gigante (bug real encontrado al inspeccionar el
   drawer abierto, no solo cerrado). */
.cta { border: 1.5px solid var(--color-primario); color: var(--color-primario); padding: 9px 20px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.86rem; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cta svg { width: 16px; height: 16px; flex-shrink: 0; }
.cta:hover { background: var(--primary-solid); color: #fff; }

/* Selector de tema (un solo botón contextual, revertido 2026-09-21 de una
   versión de 2 botones del mismo día) + idioma (ES/EN) — mega-prompt Fase 9.
   Markup compartido por publicHeader() (header horizontal) y appHeader()
   (pie del sidebar oscuro) vía selectorPreferencias() en includes/layout.php.
   Es <button> (antes <a>, cambiaba de página) — reset de estilos nativos de
   botón para que se vea igual que antes. */
.selector-preferencias { display: flex; align-items: center; gap: 10px; }
.boton-tema {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--color-texto-suave);
  cursor: pointer;
  flex-shrink: 0;
}
.boton-tema:hover { background: var(--color-borde); color: var(--color-texto); }
/* Los 2 íconos van apilados en el markup (ver selectorPreferencias()); el CSS
   decide cuál se ve según data-tema-actual y anima la transición entre ellos
   — evita que JS tenga que reconstruir el SVG al cambiar de tema. Transición
   discreta (180ms) respetada por la regla global de prefers-reduced-motion. */
.boton-tema .icono-tema {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6) rotate(-90deg);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.boton-tema .icono-tema svg { width: 18px; height: 18px; }
.boton-tema[data-tema-actual="claro"] .icono-tema-luna,
.boton-tema[data-tema-actual="oscuro"] .icono-tema-sol {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.selector-idioma { display: flex; align-items: center; gap: 2px; font-size: 0.78rem; font-weight: 700; }
.selector-idioma a { color: var(--color-texto-suave); text-decoration: none; padding: 3px 6px; border-radius: 5px; }
.selector-idioma a.activo { color: var(--color-primario); }
.selector-idioma a:hover { background: var(--color-borde); }

/* Botón de menú móvil: oculto en escritorio, visible solo bajo el breakpoint. */
.boton-menu-movil {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--color-primario);
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
}
.boton-menu-movil:hover { background: var(--surface-hover); }
.boton-menu-movil svg { width: 24px; height: 24px; }

/* Overlay + panel del menú móvil (mega-prompt de diseño: drawer con foco
   atrapado, Escape cierra, bloquea scroll, devuelve foco al abrir/cerrar —
   la lógica vive en el <script> de publicHeader() en includes/layout.php). */
.overlay-menu-movil {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 60;
  opacity: 0;
  transition: opacity var(--nav-transition-menu) ease;
}
.overlay-menu-movil.visible { opacity: 1; }

.menu-movil {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 86vw);
  background: var(--surface);
  z-index: 61;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) 0;
  transform: translateX(100%);
  transition: transform var(--nav-transition-menu) ease;
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}
.menu-movil.abierto { transform: translateX(0); }
.menu-movil-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.menu-movil-encabezado .marca-inline { font-weight: 800; font-family: var(--fuente-encabezado); color: var(--color-primario-oscuro); }
.cerrar-menu-movil { width: 40px; height: 40px; border: none; background: transparent; color: var(--color-texto); cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.cerrar-menu-movil:hover { background: var(--surface-hover); }
.cerrar-menu-movil svg { width: 18px; height: 18px; }
.menu-movil > a {
  padding: 16px 20px;
  color: var(--color-texto);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--border-subtle);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.menu-movil > a.activo { color: var(--color-primario-oscuro); background: var(--surface-active); }
.menu-movil-pie {
  margin-top: auto;
  padding: 20px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.menu-movil-pie .cta { justify-content: center; }

/* 1230px (no 900px): medido de verdad con Playwright forzando el viewport
   real (el intento anterior con la bandera --window-size de Chrome headless
   resultó no fijar el ancho real del viewport y dio una medición falsa) —
   con logo + 7 enlaces + selector + CTA ("Área de miembros", el texto más
   largo entre ES/EN), el nav de escritorio recién entra en una sola fila a
   partir de 1210px reales; 1230px deja margen. Entre 900 y 1210px quedaba
   el botón "Área de miembros" cayendo a una segunda fila — un header de dos
   pisos no intencional, visible en tablets/laptops reales de ese rango.
   Por debajo del breakpoint se usa el menú tipo drawer para que nunca se
   vea una navegación envuelta en varias filas ni con scroll horizontal. */
@media (max-width: 1230px) {
  .marketing-header { padding: 14px 18px; }
  .marketing-header .nav-escritorio,
  .marketing-header .selector-preferencias-escritorio,
  .marketing-header .cta-escritorio {
    display: none;
  }
  .boton-menu-movil { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-movil, .overlay-menu-movil { transition: none; }
}

.marketing-footer { text-align: center; padding: 28px 20px 44px; color: var(--color-texto-suave); font-size: 0.85rem; background: var(--color-fondo); }

/* Hero de inicio */

.hero {
  background:
    linear-gradient(100deg, rgba(90, 22, 30, 0.96) 0%, rgba(90, 22, 30, 0.88) 32%, rgba(90, 22, 30, 0.55) 58%, rgba(90, 22, 30, 0.22) 78%, rgba(90, 22, 30, 0.05) 100%),
    url('/assets/img/hero-comunidad.webp');
  background-size: cover;
  background-position: center 35%;
  color: #fff;
  padding: 72px 40px;
  position: relative;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
}

.hero .contenido-hero { position: relative; max-width: 640px; }
.hero .kicker { letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.78rem; color: var(--color-secundario-suave); margin-bottom: 16px; font-weight: 700; }
.hero h1 { font-size: 2.15rem; line-height: 1.25; margin: 0 0 16px; }
.hero p.subt { font-size: 1.02rem; color: #f3e9dd; margin: 0 0 26px; max-width: 46ch; }
.hero .boton-hero { display: inline-flex; align-items: center; gap: 8px; background: var(--color-secundario); color: var(--text-on-accent); padding: 13px 26px; border-radius: 8px; text-decoration: none; font-weight: 700; }
.hero .boton-hero:hover { background: #d9b13f; }
.hero .boton-hero svg { width: 18px; height: 18px; }
.hero .cita { border-left: 3px solid var(--color-secundario); padding-left: 14px; margin-top: 30px; font-style: italic; color: var(--color-secundario-suave); max-width: 34ch; }
.hero .cita cite { display: block; font-style: normal; font-size: 0.82rem; margin-top: 4px; opacity: 0.85; }

@media (max-width: 640px) {
  .hero { padding: 44px 22px; }
  .hero h1 { font-size: 1.6rem; }
}

/* Tarjetas de acceso rápido bajo el hero */

.accesos-rapidos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  padding: 28px 40px 48px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 640px) { .accesos-rapidos { padding: 24px 18px 36px; } }

.acceso-rapido {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: 12px;
  padding: 26px 22px;
  text-align: center;
  text-decoration: none;
  color: var(--color-texto);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.acceso-rapido:hover, .acceso-rapido:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-secundario);
}

.acceso-rapido:hover .ir, .acceso-rapido:focus-visible .ir {
  background: var(--primary-solid);
  border-color: var(--primary-solid);
  color: #fff;
}

.acceso-rapido .icono-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.acceso-rapido .icono-badge svg { width: 26px; height: 26px; color: var(--color-primario); }
.acceso-rapido strong { display: block; font-size: 1rem; margin-bottom: 10px; }
.acceso-rapido .ir { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--color-secundario); color: var(--color-primario); transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.acceso-rapido .ir svg { width: 14px; height: 14px; }

.contenedor-marketing { max-width: 1200px; margin: 0 auto; padding: 0 40px 56px; }
@media (max-width: 640px) { .contenedor-marketing { padding: 0 18px 40px; } }
.contenedor-marketing h1, .contenedor-marketing h2 { color: var(--color-primario-oscuro); }

/* Catálogo de cursos por etapa (columnas) */

.catalogo-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; align-items: start; }

/* Colores por etapa del catálogo, TEMA CLARO — igualados a los colores reales
   del sitio internacional (evangelizacion.com/css/estilos.css), a pedido
   explícito del usuario. Fuente exacta — clase CSS del internacional -> color:
     .color1 (1ª Etapa, Vida Cristiana)          -> #FF0000
     .color2 (2ª Etapa, Aprender a Evangelizar)  -> #00AA00
     .color3 (3ª Etapa, Formar Evangelizadores)  -> #0099CC
     .color_fe (Formación de Equipos)            -> #996633
     .color_opt (Cursos Optativos)                -> #FF9900
     .color_ret (Retiros)                         -> #707070
   Ya NO son un derivado de --color-primario/--gold-dark/--green-dark (esos
   tokens generales del sitio — botones, navbar, etc. — no se tocaron, solo
   esta paleta del catálogo). 2026-09-21, segunda pasada: el TEMA OSCURO dejó
   de copiar estos mismos hex saturados (ver bloques :root[data-tema="oscuro"]
   y @media prefers-color-scheme al inicio del archivo) — ahí los mismos 6
   colores son solo acento, no fondo. El tema claro de aquí abajo no se tocó.
   Ver support/cambios/ para el historial completo. */
:root {
  --gold-dark: #A97D13;
  --etapa-vida-bg: #FDE6E6;        --etapa-vida-acento: #FF0000;
  --etapa-evangelizar-bg: #E3F5E3; --etapa-evangelizar-acento: #00AA00;
  --etapa-formar-bg: #E1F2F8;      --etapa-formar-acento: #0099CC;
  --etapa-equipos-bg: #F0E4D8;     --etapa-equipos-acento: #996633;
  --etapa-optativo-bg: #FFEEDC;    --etapa-optativo-acento: #FF9900;
  --etapa-retiro-bg: #ECECEC;      --etapa-retiro-acento: #707070;
  --etapa-linea: #00CB6D;
}

.columna-etapa { background: var(--color-tarjeta); border-radius: 12px; overflow: hidden; border: 1px solid var(--color-borde); }

.columna-etapa .encabezado-etapa {
  padding: 16px 18px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 3px solid var(--color-borde);
}
.columna-etapa.etapa-vida_cristiana .encabezado-etapa { border-bottom-color: var(--etapa-vida-acento); }
.columna-etapa.etapa-aprender_evangelizar .encabezado-etapa { border-bottom-color: var(--etapa-evangelizar-acento); }
.columna-etapa.etapa-formar_evangelizadores .encabezado-etapa { border-bottom-color: var(--etapa-formar-acento); }
.columna-etapa.etapa-taller_formacion .encabezado-etapa { border-bottom-color: var(--etapa-equipos-acento); }
.columna-etapa.etapa-optativo .encabezado-etapa { border-bottom-color: var(--etapa-optativo-acento); }
.columna-etapa.etapa-retiro .encabezado-etapa { border-bottom-color: var(--etapa-retiro-acento); }
.columna-etapa .encabezado-etapa .titulo-etapa { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--color-texto); }
.columna-etapa .encabezado-etapa .icono-etapa { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* stroke-width a la mitad (2026-09-21, a pedido del usuario) — antes heredaba
   1.6 del atributo del <svg> en svgIcono(), aquí ya no. */
.columna-etapa .encabezado-etapa .icono-etapa svg { width: 18px; height: 18px; stroke-width: 0.8; }
.columna-etapa .encabezado-etapa .tagline-etapa { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-texto-suave); text-align: right; line-height: 1.3; }

.columna-etapa .lista-cursos { padding: 12px; display: flex; flex-direction: column; gap: 10px; }

/* Cada curso es su propia tarjeta con sombreado del color de su etapa — no una lista plana. */
.columna-etapa .fila-curso {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(43, 35, 32, 0.05);
}
.columna-etapa .fila-curso {
  align-items: stretch;
  min-height: 92px;
}
.columna-etapa .fila-curso .icono-fila {
  flex-shrink: 0;
  width: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.columna-etapa .fila-curso .icono-fila svg { width: 52px; height: 52px; stroke-width: 0.95; } /* antes 1.9 — a la mitad, 2026-09-21 */
.columna-etapa .fila-curso .detalle-curso { flex: 1; min-width: 0; align-self: center; }
.columna-etapa .fila-curso .nombre { display: block; font-weight: 700; font-size: 0.94rem; color: var(--color-texto); margin-bottom: 4px; }
.columna-etapa .fila-curso .nota-menor { display: block; font-size: 0.72rem; color: var(--color-primario); font-weight: 500; margin-top: 4px; }
.columna-etapa .fila-curso .chevron-fila { width: 16px; height: 16px; color: var(--color-texto-suave); flex-shrink: 0; }

.columna-etapa .encabezado-etapa .icono-etapa { background: var(--surface-hover); }
.columna-etapa.etapa-vida_cristiana .icono-etapa { color: var(--etapa-vida-acento); }
.columna-etapa.etapa-aprender_evangelizar .icono-etapa { color: var(--etapa-evangelizar-acento); }
.columna-etapa.etapa-formar_evangelizadores .icono-etapa { color: var(--etapa-formar-acento); }
.columna-etapa.etapa-taller_formacion .icono-etapa { color: var(--etapa-equipos-acento); }
.columna-etapa.etapa-optativo .icono-etapa { color: var(--etapa-optativo-acento); }
.columna-etapa.etapa-retiro .icono-etapa { color: var(--etapa-retiro-acento); }

.columna-etapa.etapa-vida_cristiana .fila-curso { background: var(--etapa-vida-bg); }
.columna-etapa.etapa-vida_cristiana .fila-curso .icono-fila { color: var(--etapa-vida-acento); }
.columna-etapa.etapa-aprender_evangelizar .fila-curso { background: var(--etapa-evangelizar-bg); }
.columna-etapa.etapa-aprender_evangelizar .fila-curso .icono-fila { color: var(--etapa-evangelizar-acento); }
.columna-etapa.etapa-formar_evangelizadores .fila-curso { background: var(--etapa-formar-bg); }
.columna-etapa.etapa-formar_evangelizadores .fila-curso .icono-fila { color: var(--etapa-formar-acento); }
.columna-etapa.etapa-taller_formacion .fila-curso { background: var(--etapa-equipos-bg); }
.columna-etapa.etapa-taller_formacion .fila-curso .icono-fila { color: var(--etapa-equipos-acento); }
.columna-etapa.etapa-optativo .fila-curso { background: var(--etapa-optativo-bg); }
.columna-etapa.etapa-optativo .fila-curso .icono-fila { color: var(--etapa-optativo-acento); }
.columna-etapa.etapa-retiro .fila-curso { background: var(--etapa-retiro-bg); }
.columna-etapa.etapa-retiro .fila-curso .icono-fila { color: var(--etapa-retiro-acento); }

/* Tema oscuro únicamente (2026-09-21) — el resto de las reglas de arriba ya
   se adapta solo porque --etapa-*-bg/-acento cambian de valor por tema (ver
   los 2 bloques de tokens de tema oscuro al inicio del archivo); esto es
   SOLO lo que no podía resolverse con variables: un borde sutil que separe
   tarjetas del fondo (el tema claro nunca tuvo uno, no se le agrega), un
   halo apenas teñido detrás del ícono de cada etapa, y el hover/foco con el
   tinte/borde/outline de cada etapa — en claro el hover ya funcionaba bien
   con la elevación genérica y no se toca. */
:root[data-tema="oscuro"] .columna-etapa .fila-curso { border: 1px solid var(--border-subtle); }
:root[data-tema="oscuro"] .columna-etapa.etapa-vida_cristiana .icono-etapa { background: var(--stage-red-soft); }
:root[data-tema="oscuro"] .columna-etapa.etapa-aprender_evangelizar .icono-etapa { background: var(--stage-green-soft); }
:root[data-tema="oscuro"] .columna-etapa.etapa-formar_evangelizadores .icono-etapa { background: var(--stage-blue-soft); }
:root[data-tema="oscuro"] .columna-etapa.etapa-taller_formacion .icono-etapa { background: var(--stage-equipos-soft); }
:root[data-tema="oscuro"] .columna-etapa.etapa-optativo .icono-etapa { background: var(--stage-optativo-soft); }
:root[data-tema="oscuro"] .columna-etapa.etapa-retiro .icono-etapa { background: var(--stage-retiro-soft); }
:root[data-tema="oscuro"] .columna-etapa.etapa-vida_cristiana .fila-curso:hover,
:root[data-tema="oscuro"] .columna-etapa.etapa-vida_cristiana .fila-curso:focus-visible { background: var(--etapa-vida-bg-hover); border-color: var(--stage-red-borde-hover); }
:root[data-tema="oscuro"] .columna-etapa.etapa-vida_cristiana .fila-curso:focus-visible { outline-color: var(--stage-red); }
:root[data-tema="oscuro"] .columna-etapa.etapa-aprender_evangelizar .fila-curso:hover,
:root[data-tema="oscuro"] .columna-etapa.etapa-aprender_evangelizar .fila-curso:focus-visible { background: var(--etapa-evangelizar-bg-hover); border-color: var(--stage-green-borde-hover); }
:root[data-tema="oscuro"] .columna-etapa.etapa-aprender_evangelizar .fila-curso:focus-visible { outline-color: var(--stage-green); }
:root[data-tema="oscuro"] .columna-etapa.etapa-formar_evangelizadores .fila-curso:hover,
:root[data-tema="oscuro"] .columna-etapa.etapa-formar_evangelizadores .fila-curso:focus-visible { background: var(--etapa-formar-bg-hover); border-color: var(--stage-blue-borde-hover); }
:root[data-tema="oscuro"] .columna-etapa.etapa-formar_evangelizadores .fila-curso:focus-visible { outline-color: var(--stage-blue); }
:root[data-tema="oscuro"] .columna-etapa.etapa-taller_formacion .fila-curso:hover,
:root[data-tema="oscuro"] .columna-etapa.etapa-taller_formacion .fila-curso:focus-visible { background: var(--etapa-equipos-bg-hover); border-color: var(--stage-equipos-borde-hover); }
:root[data-tema="oscuro"] .columna-etapa.etapa-taller_formacion .fila-curso:focus-visible { outline-color: var(--stage-equipos); }
:root[data-tema="oscuro"] .columna-etapa.etapa-optativo .fila-curso:hover,
:root[data-tema="oscuro"] .columna-etapa.etapa-optativo .fila-curso:focus-visible { background: var(--etapa-optativo-bg-hover); border-color: var(--stage-optativo-borde-hover); }
:root[data-tema="oscuro"] .columna-etapa.etapa-optativo .fila-curso:focus-visible { outline-color: var(--stage-optativo); }
:root[data-tema="oscuro"] .columna-etapa.etapa-retiro .fila-curso:hover,
:root[data-tema="oscuro"] .columna-etapa.etapa-retiro .fila-curso:focus-visible { background: var(--etapa-retiro-bg-hover); border-color: var(--stage-retiro-borde-hover); }
:root[data-tema="oscuro"] .columna-etapa.etapa-retiro .fila-curso:focus-visible { outline-color: var(--stage-retiro); }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) .columna-etapa .fila-curso { border: 1px solid var(--border-subtle); }
  :root:not([data-tema]) .columna-etapa.etapa-vida_cristiana .icono-etapa { background: var(--stage-red-soft); }
  :root:not([data-tema]) .columna-etapa.etapa-aprender_evangelizar .icono-etapa { background: var(--stage-green-soft); }
  :root:not([data-tema]) .columna-etapa.etapa-formar_evangelizadores .icono-etapa { background: var(--stage-blue-soft); }
  :root:not([data-tema]) .columna-etapa.etapa-taller_formacion .icono-etapa { background: var(--stage-equipos-soft); }
  :root:not([data-tema]) .columna-etapa.etapa-optativo .icono-etapa { background: var(--stage-optativo-soft); }
  :root:not([data-tema]) .columna-etapa.etapa-retiro .icono-etapa { background: var(--stage-retiro-soft); }
  :root:not([data-tema]) .columna-etapa.etapa-vida_cristiana .fila-curso:hover,
  :root:not([data-tema]) .columna-etapa.etapa-vida_cristiana .fila-curso:focus-visible { background: var(--etapa-vida-bg-hover); border-color: var(--stage-red-borde-hover); }
  :root:not([data-tema]) .columna-etapa.etapa-vida_cristiana .fila-curso:focus-visible { outline-color: var(--stage-red); }
  :root:not([data-tema]) .columna-etapa.etapa-aprender_evangelizar .fila-curso:hover,
  :root:not([data-tema]) .columna-etapa.etapa-aprender_evangelizar .fila-curso:focus-visible { background: var(--etapa-evangelizar-bg-hover); border-color: var(--stage-green-borde-hover); }
  :root:not([data-tema]) .columna-etapa.etapa-aprender_evangelizar .fila-curso:focus-visible { outline-color: var(--stage-green); }
  :root:not([data-tema]) .columna-etapa.etapa-formar_evangelizadores .fila-curso:hover,
  :root:not([data-tema]) .columna-etapa.etapa-formar_evangelizadores .fila-curso:focus-visible { background: var(--etapa-formar-bg-hover); border-color: var(--stage-blue-borde-hover); }
  :root:not([data-tema]) .columna-etapa.etapa-formar_evangelizadores .fila-curso:focus-visible { outline-color: var(--stage-blue); }
  :root:not([data-tema]) .columna-etapa.etapa-taller_formacion .fila-curso:hover,
  :root:not([data-tema]) .columna-etapa.etapa-taller_formacion .fila-curso:focus-visible { background: var(--etapa-equipos-bg-hover); border-color: var(--stage-equipos-borde-hover); }
  :root:not([data-tema]) .columna-etapa.etapa-taller_formacion .fila-curso:focus-visible { outline-color: var(--stage-equipos); }
  :root:not([data-tema]) .columna-etapa.etapa-optativo .fila-curso:hover,
  :root:not([data-tema]) .columna-etapa.etapa-optativo .fila-curso:focus-visible { background: var(--etapa-optativo-bg-hover); border-color: var(--stage-optativo-borde-hover); }
  :root:not([data-tema]) .columna-etapa.etapa-optativo .fila-curso:focus-visible { outline-color: var(--stage-optativo); }
  :root:not([data-tema]) .columna-etapa.etapa-retiro .fila-curso:hover,
  :root:not([data-tema]) .columna-etapa.etapa-retiro .fila-curso:focus-visible { background: var(--etapa-retiro-bg-hover); border-color: var(--stage-retiro-borde-hover); }
  :root:not([data-tema]) .columna-etapa.etapa-retiro .fila-curso:focus-visible { outline-color: var(--stage-retiro); }
}

/* Secciones anchas (Formación de Equipos, Cursos Optativos): ocupan el ancho completo
   de la página y acomodan sus tarjetas en una cuadrícula interna de 3 columnas, en vez
   de ser una columna angosta más dentro de .catalogo-columnas. */
.seccion-ancha { margin-top: 20px; }
.seccion-ancha .lista-cursos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
}
@media (max-width: 900px) { .seccion-ancha .lista-cursos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .seccion-ancha .lista-cursos { grid-template-columns: 1fr; } }

/* Píldoras de disponibilidad del catálogo — 3 estados con color propio (independiente de las
   píldoras de estado de inscripción/sesión, que viven en otro contexto: pill-pendiente, etc.) */
.pill-cat-disponible, .pill-cat-en_curso { background: #dcefe3; color: #256a45; }
.pill-cat-proximamente { background: #eceae5; color: #6b6058; }

/* Pulso sutil solo en "Disponible" (curso con sesión real o marcado como
   ofrecido en otra escuela, ver public/cursos.php) para que resalte un poco
   más en el catálogo — respeta prefers-reduced-motion vía la regla global de
   accesibilidad de arriba, no hace falta repetirla aquí. 2026-09-21. */
.pill-cat-disponible { animation: pulso-disponible 2.2s ease-out infinite; }
@keyframes pulso-disponible {
  0% { box-shadow: 0 0 0 0 rgba(37, 106, 69, 0.35); }
  70% { box-shadow: 0 0 0 6px rgba(37, 106, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 106, 69, 0); }
}

.campo-busqueda-catalogo {
  position: relative;
  max-width: 340px;
  margin-bottom: 22px;
}
.campo-busqueda-catalogo svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--color-texto-suave); }
.campo-busqueda-catalogo input {
  width: 100%;
  padding: 10px 12px 10px 38px;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  font-size: 0.92rem;
  background: var(--color-tarjeta);
}
.campo-busqueda-catalogo input:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px var(--focus-ring); }

.fila-curso[hidden], .columna-etapa[hidden] { display: none !important; }

/* Interacciones: hover/focus del catálogo (elevación + sombra + flecha) */
.fila-curso {
  width: 100%;
  text-align: left;
  border: none;
  font: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fila-curso:hover, .fila-curso:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(43, 35, 32, 0.12);
}
.fila-curso:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }
.fila-curso .chevron-fila { transition: transform 0.15s ease; }
.fila-curso:hover .chevron-fila, .fila-curso:focus-visible .chevron-fila { transform: translateX(3px); }

.app-nav a:focus-visible, .marketing-header a:focus-visible, .boton:focus-visible {
  outline: 2px solid var(--color-primario);
  outline-offset: 2px;
}

/* Anillo de foco genérico (auditoría de accesibilidad) — cubre cualquier
   elemento interactivo que no tenga ya su propio tratamiento de foco más
   específico (ej. .fila-curso, .campo input, que ganan por especificidad
   de selector y siguen mandando donde ya existían). :focus-visible en vez
   de :focus para que el anillo solo aparezca con teclado, no con el mouse.
   Usa --color-primario (no el dorado --color-secundario): verificado que
   el dorado solo da ~2.3:1 sobre fondos claros, por debajo del 3:1 que
   exige WCAG 1.4.11 para indicadores de foco — --color-primario da 9.5:1+
   en claro y 5:1+ en oscuro. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primario);
  outline-offset: 2px;
}

/* Toques decorativos manuscritos (encabezado y pie de página de trabajo) */
.filigrana-superior {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fuente-manuscrita);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-texto-suave);
}
.filigrana-superior .linea-dorada { width: 34px; height: 1px; background: var(--color-secundario); }
.filigrana-superior svg { width: 16px; height: 16px; color: var(--color-secundario); transform: scaleX(-1); }

.filigrana-inferior {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 28px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Antes usaba dorado como color de texto (2.42:1, reprueba WCAG AA) — el
     dorado queda solo en la línea decorativa, que no es texto. */
  color: var(--color-primario-oscuro);
}
.filigrana-inferior .linea-dorada { width: 44px; height: 1px; background: var(--color-secundario); }

/* Modal de detalle de curso */
.modal-fondo {
  position: fixed;
  inset: 0;
  background: rgba(43, 35, 32, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
.modal-fondo[hidden] { display: none !important; }
.modal-curso {
  background: var(--color-tarjeta);
  border-radius: 14px;
  max-width: 420px;
  width: 100%;
  padding: 28px;
  position: relative;
  font-family: var(--fuente-condensada);
}
.modal-curso .cerrar-modal {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-texto-suave);
  padding: 6px;
}
.modal-curso .cerrar-modal svg { width: 18px; height: 18px; }
.modal-curso h2 { margin: 0 0 6px; font-size: 1.3rem; color: var(--color-primario-oscuro); }
.modal-curso .etapa-modal { color: var(--color-texto-suave); font-size: 0.9rem; margin-bottom: 14px; }

/* Calendario en cuadrícula */

.calendario-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .calendario-layout { grid-template-columns: 1fr; } }

.calendario-nav { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.calendario-nav .mes-actual { font-family: var(--fuente-encabezado); font-size: 1.25rem; color: var(--color-primario-oscuro); min-width: 190px; text-align: center; }
.calendario-nav a.nav-mes, .calendario-nav a.nav-hoy {
  height: 36px; border-radius: 999px; border: 1px solid var(--color-borde);
  display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--color-texto);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.calendario-nav a.nav-mes:hover, .calendario-nav a.nav-hoy:hover { background: var(--surface-hover); border-color: var(--color-secundario); }
.calendario-nav a.nav-mes { width: 36px; }
.calendario-nav a.nav-mes svg { width: 16px; height: 16px; }
.calendario-nav a.nav-hoy { padding: 0 16px; font-size: 0.86rem; font-weight: 600; }

.calendario-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--color-borde); border: 1px solid var(--color-borde); border-radius: 10px; overflow: hidden; }
.calendario-grid .dia-header { background: var(--page-bg-alt); padding: 8px 4px; text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--color-texto-suave); text-transform: uppercase; }
.calendario-grid .celda-dia { background: var(--color-tarjeta); min-height: 88px; padding: 6px; font-size: 0.8rem; }
.calendario-grid .celda-dia.fuera-de-mes { background: var(--page-bg-alt); color: var(--color-texto-suave); }
.calendario-grid .celda-dia .numero-dia { font-weight: 700; margin-bottom: 4px; }
.calendario-grid .celda-dia .pill-curso { display: block; background: var(--primary-solid); color: #fff; border-radius: 5px; padding: 2px 6px; font-size: 0.7rem; margin-bottom: 3px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.15s ease; }
.calendario-grid .celda-dia .pill-curso:hover, .calendario-grid .celda-dia .pill-curso:focus-visible { background: var(--primary-solid-hover); }

@media (max-width: 640px) {
  .calendario-grid .celda-dia { min-height: 46px; font-size: 0.68rem; }
  .calendario-grid .celda-dia .pill-curso { font-size: 0.6rem; }
  .calendario-nav .mes-actual { min-width: auto; font-size: 1.05rem; }
}

.lista-proximos .item-proximo { display: flex; gap: 12px; padding: 12px 8px; margin: 0 -8px; border-radius: 8px; border-bottom: 1px solid var(--color-borde); text-decoration: none; color: inherit; transition: background 0.15s ease; }
.lista-proximos .item-proximo:last-child { border-bottom: none; }
.lista-proximos .item-proximo:hover, .lista-proximos .item-proximo:focus-visible { background: var(--surface-hover); }
.lista-proximos .fecha-badge { flex-shrink: 0; width: 52px; height: 52px; border-radius: 8px; background: var(--color-fondo); border-left: 3px solid var(--color-primario); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lista-proximos .fecha-badge .dia { font-weight: 800; font-size: 1.05rem; line-height: 1; color: var(--color-primario-oscuro); }
.lista-proximos .fecha-badge .mes { font-size: 0.65rem; text-transform: uppercase; color: var(--color-texto-suave); }
.lista-proximos .item-proximo strong { display: block; font-size: 0.92rem; }
.lista-proximos .item-proximo span { font-size: 0.8rem; color: var(--color-texto-suave); }

/* =================================================================
   Tarjeta de formulario tipo "Inscripción a curso" (ver
   support/recursos/web-example-7.png)
   ================================================================= */

.form-tarjeta { background: var(--color-tarjeta); border-radius: 14px; border: 1px solid var(--color-borde); overflow: hidden; max-width: 780px; margin: 0 auto; }
.form-tarjeta .encabezado-form-tarjeta { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px; border-bottom: 1px solid var(--color-borde); flex-wrap: wrap; gap: 14px; }
.form-tarjeta .encabezado-form-tarjeta .icono-avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.form-tarjeta .encabezado-form-tarjeta .icono-avatar svg { width: 26px; height: 26px; color: var(--color-primario); }
.form-tarjeta .encabezado-form-tarjeta h1 { margin: 0; font-size: 1.2rem; color: var(--color-primario-oscuro); }
.form-tarjeta .cuerpo-form { padding: 26px 28px; }

.seccion-form { margin-bottom: 26px; }
.seccion-form:last-child { margin-bottom: 0; }
.seccion-form > h3 { display: flex; align-items: center; gap: 12px; font-size: 0.98rem; color: var(--color-texto); margin: 0 0 16px; white-space: nowrap; }
.seccion-form > h3::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--color-borde); }

/* =================================================================
   Formulario público de inscripción — pantalla única con paneles
   visibles (rediseño 2026-09-22, ver
   support/docs/manuales/Formulario-y-Sistema-de-Inscripciones-EESA.md).
   Reemplaza el asistente de varios pasos: en vez de una sola
   .form-tarjeta angosta, dos columnas con paneles apilados + resumen
   lateral. Usa siempre los tokens de tema ya existentes — nada de
   color fijo aquí, así que hereda claro/oscuro automáticamente y
   cualquier curso (no solo Belén) se ve igual de bien.
   ================================================================= */

.pagina-inscripcion { max-width: 1180px; margin: 0 auto; }
.pagina-inscripcion > h1 { text-align: center; margin-bottom: 24px; }

.inscripcion-encabezado {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.inscripcion-encabezado-icono {
  width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0;
  background: var(--primary-soft);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.inscripcion-encabezado-icono svg { width: 26px; height: 26px; color: var(--color-primario); }
.inscripcion-encabezado-icono img { width: 100%; height: 100%; object-fit: contain; }
.inscripcion-encabezado-texto { flex: 1 1 260px; min-width: 0; }
.inscripcion-encabezado-texto h1 { margin: 0 0 2px; font-size: 1.25rem; color: var(--color-primario-oscuro); }
.inscripcion-encabezado-meta { margin: 0 0 4px; font-size: 0.85rem; color: var(--color-texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.inscripcion-encabezado-ayuda { margin: 0; font-size: 0.92rem; color: var(--color-texto-suave); }

.inscripcion-resumen-errores { max-width: none; margin-bottom: 20px; }
.inscripcion-resumen-errores ul { margin: 8px 0 0; padding-left: 20px; }
.inscripcion-resumen-errores a { color: inherit; text-decoration: underline; }

.inscripcion-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.inscripcion-paneles { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.panel-inscripcion {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
/* Barra superior discreta para diferenciar paneles sin recurrir a un
   color intenso distinto por panel (mega-prompt sección 20). */
.panel-inscripcion::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-primario), var(--accent));
  opacity: 0.55;
}
.panel-inscripcion-encabezado {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 24px 14px;
}
.panel-inscripcion-icono {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: var(--primary-soft);
  display: flex; align-items: center; justify-content: center;
}
.panel-inscripcion-icono svg { width: 20px; height: 20px; color: var(--color-primario); }
.panel-inscripcion-encabezado h2 { margin: 0 0 3px; font-size: 1.05rem; color: var(--color-texto); }
.panel-inscripcion-encabezado p { margin: 0; font-size: 0.86rem; color: var(--color-texto-suave); }
.panel-inscripcion-cuerpo { padding: 4px 24px 24px; }
.panel-inscripcion-cuerpo h3 { font-size: 0.92rem; color: var(--color-texto); margin: 0 0 10px; }

.panel-inscripcion-tutor { background: var(--surface-soft); }
.panel-inscripcion-tutor[hidden] { display: none; }

.campo-condicional { margin-top: 4px; }

/* Registro familiar (2026-09-29) — tarjetas de menores/adultos adicionales
   agregados con los botones "+ Agregar menor"/"+ Agregar adulto" dentro del
   mismo envío (public/inscribirme.php). */
.tarjeta-persona-extra {
  border: 1px solid var(--color-borde);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--surface-soft);
}
.tarjeta-persona-extra-encabezado {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tarjeta-persona-extra-titulo { margin: 0; font-weight: 700; font-size: 0.86rem; color: var(--color-texto); flex: 1 1 auto; }
.tarjeta-persona-extra-cerrar,
.tarjeta-persona-extra-toggle {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  min-width: 44px;
  min-height: 44px;
  margin: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-texto-suave);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}
.tarjeta-persona-extra-cerrar { order: -1; color: var(--danger); }
.tarjeta-persona-extra-cerrar:hover { background: var(--danger-bg); }
.tarjeta-persona-extra-toggle:hover { background: var(--surface-hover); color: var(--color-primario); }
.tarjeta-persona-extra--minimizada .tarjeta-persona-extra-cuerpo { display: none; }
.tarjeta-persona-extra--minimizada { padding-bottom: 8px; }

/* Fecha de nacimiento por día/mes/año (2026-09-29) — reemplaza el
   <input type="date"> nativo: su selector de año propio del navegador
   obliga a hacer scroll uno por uno hasta llegar a un año lejano (feedback
   real de un usuario). Con 3 <select> normales se puede teclear el año
   directo (ej. escribir "1992" estando el select enfocado) en cualquier
   navegador, sin ningún widget personalizado que mantener. */
.campo-fecha-nacimiento { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; }
@media (max-width: 480px) { .campo-fecha-nacimiento { grid-template-columns: 1fr; } }
/* .texto-ayuda trae un margin-top negativo pensado para acercarse a un
   <input> suelto — aquí lo que sigue es este grid de 3 selects, así que ese
   mismo negativo lo monta encima de los selects en vez de acercarlo. Se
   sobreescribe solo para este caso puntual, sin tocar el resto del sitio. */
.campo-fecha-nacimiento + .texto-ayuda { margin-top: 6px; }
.acciones-agregar-persona { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.boton-secundario {
  width: auto;
  padding: 10px 16px;
  border: 1px solid var(--color-primario);
  border-radius: 8px;
  background: transparent;
  color: var(--color-primario);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.boton-secundario:hover { background: var(--primary-soft); }

.campo-requerido, .campo-opcional {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  vertical-align: middle;
}
.campo-requerido { color: var(--danger); }
.campo-opcional { color: var(--color-texto-suave); font-weight: 600; }

.campo-error { margin: 4px 0 0; font-size: 0.82rem; color: var(--danger); font-weight: 600; }
.campo [aria-invalid="true"] { border-color: var(--danger); }
.campo [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--danger-bg); }

.inscripcion-resumen-tarjeta {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inscripcion-resumen-tarjeta strong { font-size: 1.05rem; color: var(--color-primario-oscuro); }
.inscripcion-resumen-fechas { margin: 0; font-weight: 600; color: var(--color-texto); }
.inscripcion-resumen-horarios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.inscripcion-resumen-linea { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 0.88rem; color: var(--color-texto); }
.inscripcion-resumen-linea svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--color-texto-suave); }
.inscripcion-resumen-estado {
  margin: 4px 0 0; padding: 8px 12px; border-radius: 8px; font-size: 0.84rem; font-weight: 700; text-align: center;
  background: var(--success-bg); color: var(--success);
}
.inscripcion-resumen-estado-lleno { background: var(--info-bg); color: var(--info); }
.inscripcion-resumen-tarjeta .boton { width: 100%; text-align: center; margin-top: 6px; }
.inscripcion-resumen-tarjeta .boton:disabled { opacity: 0.7; cursor: not-allowed; }

@media (min-width: 769px) {
  .inscripcion-resumen { position: sticky; top: 96px; align-self: start; }
}

/* 768px: una sola columna, pero el resumen se intercala ANTES del panel
   de confirmación/consentimiento y del botón de envío (mega-prompt
   sección 26) — no simplemente al final de todo. .inscripcion-paneles
   pasa a display:contents para que sus secciones se reordenen junto al
   resumen dentro del mismo flex del .inscripcion-layout. */
@media (max-width: 768px) {
  .inscripcion-layout { display: flex; flex-direction: column; gap: 18px; }
  .inscripcion-paneles { display: contents; }
  .panel-datos-participante { order: 1; }
  .panel-participacion { order: 2; }
  .panel-inscripcion-tutor { order: 3; }
  .panel-info-adicional { order: 4; }
  .inscripcion-resumen { order: 5; position: static; }
  .panel-confirmacion-final { order: 6; }
}

@media (max-width: 480px) {
  .inscripcion-encabezado { flex-direction: column; align-items: flex-start; }
  .panel-inscripcion-encabezado, .panel-inscripcion-cuerpo { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-animar-item] { opacity: 1 !important; transform: none !important; }
}

/* =================================================================
   Landing editorial pública de un retiro/sesión (mega-prompt de
   separación público/privado, 2026-09-22) — reutilizable para
   cualquier curso, no exclusiva de Belén. Usa siempre las variables
   de tema ya existentes (--color-fondo, --surface-soft, etc.), así
   que hereda claro/oscuro sin bloques duplicados, salvo el hero y la
   frase central que son intencionalmente oscuros en ambos temas
   (mismo patrón que .hero de inicio).
   ================================================================= */

/* Hero "Cielo de Belén" (2026-09-22, integrado desde index-v6.html de
   referencia): atmósfera azul nocturna profunda con halos y estrellas,
   conservando el hero fotográfico aprobado como capa opcional (--retiro-hero-img
   se sigue superponiendo cuando la sesión tiene foto). Fijo en ambos temas
   del sitio, como ya era antes. */
.retiro-hero {
  --retiro-hero-img: none;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(7, 26, 45, 0.55) 0%, rgba(7, 26, 45, 0.45) 45%, rgba(7, 26, 45, 0.82) 100%),
    var(--retiro-hero-img) center 30% / cover no-repeat,
    radial-gradient(ellipse at 18% -10%, var(--belen-blue-600) 0%, var(--belen-blue-800) 45%, var(--belen-sky-950) 100%);
  color: #fff;
  padding: 96px 40px 64px;
}
.retiro-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.retiro-hero-contenido { max-width: 640px; }
.retiro-hero .kicker { letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.78rem; color: var(--belen-star-300); margin: 0 0 16px; font-weight: 700; }
.retiro-hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.2; margin: 0 0 22px; }
.retiro-hero-badges { display: flex; gap: 8px; margin-bottom: 20px; }
.retiro-hero-badge { padding: 4px 12px; border-radius: 100px; font-size: 0.78rem; font-weight: 700; background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); }
.retiro-hero-badge-anio { background: var(--belen-star-500); color: var(--belen-sky-950); border-color: transparent; }
.retiro-hero-botones { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.retiro-hero-botones .boton-hero { display: inline-flex; align-items: center; gap: 8px; background: var(--gold-600); color: var(--text-on-accent); padding: 13px 26px; border-radius: 10px; text-decoration: none; font-weight: 700; }
.retiro-hero-botones .boton-hero:hover { background: var(--gold-700); }
.retiro-hero-botones .boton-hero svg { width: 18px; height: 18px; }
/* Composición "soft UI" con insignia circular — solo dentro del hero/inscripción,
   nunca cambia el .boton-hero de otras páginas. */
.boton-hero-circular { padding: 6px 30px 6px 6px !important; gap: 14px !important; border-radius: 999px !important; }
.boton-hero-insignia { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.08); }
.boton-hero-insignia svg { width: 18px; height: 18px; color: var(--gold-700); }
.boton-hero-secundario { display: inline-flex; align-items: center; color: #fff; padding: 13px 22px; border-radius: 10px; text-decoration: none; font-weight: 700; border: 1px solid rgba(255,255,255,0.45); }
.boton-hero-secundario:hover { background: rgba(255,255,255,0.1); }
.retiro-info-rapida { list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; font-size: 0.9rem; color: var(--belen-sky-200); }
.retiro-info-rapida li { display: inline-flex; align-items: center; gap: 6px; }
.retiro-info-rapida svg { width: 16px; height: 16px; flex-shrink: 0; }
.cuenta-regresiva-hero { display: inline-block; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; font-weight: 700; padding: 10px 18px; border-radius: 100px; font-size: 0.86rem; }

.retiro-hero-visual { display: flex; align-items: center; justify-content: center; perspective: 900px; }
.retiro-hero-marco-vidrio {
  position: relative; padding: 26px; border-radius: 28px;
  background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.24);
}
.retiro-hero-marco-vidrio::before {
  content: ""; position: absolute; inset: -22px; border-radius: 36px; z-index: -1;
  background: radial-gradient(circle, rgba(240, 174, 60, 0.35), transparent 70%); filter: blur(20px);
}
.retiro-hero-marco-vidrio img { width: min(300px, 70vw); filter: drop-shadow(0 20px 40px rgba(5, 15, 25, 0.4)); }

/* Decoración ambiental: estrella guía fija, estrella fugaz muy ocasional,
   partículas discretas — todo CSS puro, sin canvas/WebGL (mega-prompt
   sección 20: "no añadas Three.js solo para puntos de luz"). */
.retiro-hero-decoracion { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.retiro-hero-estrella-guia { position: absolute; top: 54px; right: 8%; width: 34px; height: 34px; color: var(--belen-star-300); filter: drop-shadow(0 0 16px rgba(255, 222, 148, 0.6)); }
.retiro-hero-particula {
  position: absolute; left: var(--px); top: var(--py); width: 3px; height: 3px; border-radius: 50%;
  background: #fff; opacity: .5; animation: retiro-particula-titila var(--pd) ease-in-out infinite; animation-delay: var(--pr);
}
@keyframes retiro-particula-titila { 0%, 100% { opacity: .18; } 50% { opacity: .7; } }
.retiro-hero-estrella-fugaz {
  position: absolute; top: 18%; left: -10%; width: 2px; height: 2px; background: #fff; border-radius: 50%;
  box-shadow: 0 0 6px 2px #fff; animation: retiro-fugaz 9s linear infinite; animation-delay: 3s;
}
@keyframes retiro-fugaz {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  2% { opacity: 1; }
  16% { transform: translate(58vw, 30vh) scale(1); opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .retiro-hero-particula, .retiro-hero-estrella-fugaz { animation: none; opacity: 0; }
}

@media (max-width: 899px) {
  .retiro-hero-grid { grid-template-columns: 1fr; }
  .retiro-hero-visual { order: -1; margin-bottom: 12px; }
  .retiro-hero-marco-vidrio img { width: min(220px, 60vw); }
  .retiro-hero-contenido { max-width: 100%; text-align: center; }
  .retiro-hero-badges, .retiro-hero-botones, .retiro-info-rapida { justify-content: center; }
}
@media (max-width: 640px) {
  .retiro-hero { padding: 60px 20px 44px; }
}

/* Franja dinámica (ticker) — información pública ya visible en la misma
   página, en loop horizontal lento. Contenido duplicado por PHP (2 vueltas)
   para que el loop de -50% se vea continuo sin salto. */
.retiro-ticker { background: var(--belen-burgundy); color: #fff; overflow: hidden; white-space: nowrap; padding: 12px 0; }
.retiro-ticker-pista { display: inline-flex; animation: retiro-desfilar 30s linear infinite; }
.retiro-ticker-pista span { padding: 0 26px; font-size: 0.82rem; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 9px; }
.retiro-ticker-pista span svg { width: 12px; height: 12px; color: var(--belen-star-500); flex-shrink: 0; }
.retiro-ticker:hover .retiro-ticker-pista { animation-play-state: paused; }
@keyframes retiro-desfilar { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .retiro-ticker-pista { animation: none; }
  .retiro-ticker { overflow-x: auto; }
}

.retiro-intro { max-width: 720px; padding-top: 44px; padding-bottom: 8px; }
.retiro-intro .cita-biblica { border-left: 3px solid var(--color-secundario); padding-left: 16px; font-style: italic; color: var(--color-texto); margin: 0 0 24px; }
.retiro-intro .cita-biblica footer { font-style: normal; color: var(--color-texto-suave); font-size: 0.85rem; margin-top: 4px; }
.retiro-intro p { font-size: 1.05rem; line-height: 1.7; color: var(--color-texto); }

.retiro-seccion-editorial { background: var(--page-bg-alt); padding: 56px 0; margin: 20px 0; }
.retiro-seccion-editorial-tarjeta { max-width: 680px; margin: 0 auto; text-align: center; position: relative; padding-top: 22px; }
.retiro-seccion-editorial-tarjeta::before { content: ""; display: block; width: 64px; height: 3px; background: var(--gold-500); margin: 0 auto 24px; border-radius: 2px; }
.retiro-seccion-editorial-tarjeta h2 { color: var(--color-primario-oscuro); font-size: 1.5rem; margin: 0 0 18px; }
.retiro-seccion-editorial-tarjeta p { font-size: 1.08rem; line-height: 1.75; color: var(--color-texto); }

.retiro-seccion-simple { max-width: 680px; padding-top: 12px; }
.retiro-seccion-simple h2 { color: var(--color-primario-oscuro); font-size: 1.4rem; margin: 0 0 16px; }
.retiro-seccion-simple p { font-size: 1.03rem; line-height: 1.7; color: var(--color-texto); }

/* Sección "Camino de Adviento" — fondo azul profundo con línea conectora y
   círculos numerados (2026-09-22, integrado desde index-v6.html), fija en
   ambos temas del sitio (igual que el hero). */
.retiro-camino-seccion { background: var(--belen-sky-950); padding: 64px 0; }
.retiro-camino-seccion h2 { color: #fff; }
.camino-espiritual { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 24px 0 12px; }
.camino-espiritual-linea {
  position: absolute; top: 26px; left: calc(16.66% + 10px); right: calc(16.66% + 10px); height: 2px;
  background: linear-gradient(90deg, transparent, rgba(240, 174, 60, 0.45) 15%, rgba(240, 174, 60, 0.45) 85%, transparent);
  transform-origin: left center; transform: scaleX(0); z-index: 0;
}
.camino-espiritual-bloque { position: relative; z-index: 1; text-align: center; padding: 30px 20px 26px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.camino-espiritual-numero {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--belen-blue-800); border: 2px solid var(--belen-star-300); color: var(--belen-star-300);
  font-weight: 700; font-size: 0.82rem; margin-bottom: 10px;
}
.camino-espiritual-bloque .icono-badge { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.camino-espiritual-bloque .icono-badge svg { width: 24px; height: 24px; color: var(--belen-star-300); }
.camino-espiritual-bloque strong { display: block; margin-bottom: 8px; color: #fff; }
.camino-espiritual-bloque p { margin: 0; font-size: 0.92rem; color: var(--belen-sky-200); line-height: 1.6; }

@media (max-width: 760px) {
  .camino-espiritual { grid-template-columns: 1fr; }
  .camino-espiritual-linea { display: none; }
}

.retiro-frase-central {
  background: linear-gradient(135deg, var(--burgundy-900), var(--burgundy-800));
  padding: 64px 24px;
  text-align: center;
  margin: 12px 0;
}
.retiro-frase-central p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--gold-100);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.5;
  font-style: italic;
}

.cuenta-regresiva {
  margin: 0;
  text-align: center;
  font-weight: 700;
  color: var(--color-primario-oscuro);
  background: var(--primary-soft);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 1rem;
}

/* "Qué vivirás en el Retiro Belén" — 4 paneles públicos de vidrio, sin
   revelar el programa (2026-09-22, integrado desde index-v6.html). */
.retiro-que-viviras { padding: 64px 0; }
.retiro-que-viviras .section-head { max-width: 640px; margin: 0 auto 8px; }
.que-viviras-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 40px; perspective: 900px; }
.que-viviras-tarjeta {
  padding: 28px 26px; border-radius: 14px; background: var(--color-tarjeta); border: 1px solid var(--color-borde);
  transform-style: preserve-3d; transition: box-shadow .3s ease;
}
.que-viviras-tarjeta .icono-badge { width: 48px; height: 48px; border-radius: 50%; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.que-viviras-tarjeta .icono-badge svg { width: 22px; height: 22px; color: var(--color-primario); }
.que-viviras-tarjeta strong { display: block; margin-bottom: 8px; color: var(--color-primario-oscuro); font-size: 1.08rem; }
.que-viviras-tarjeta p { margin: 0; color: var(--color-texto-suave); font-size: 0.92rem; line-height: 1.6; }
@media (max-width: 700px) { .que-viviras-grid { grid-template-columns: 1fr; } }

/* Información práctica — paneles con ícono/jerarquía (2026-09-22), en vez
   de una lista de texto plano con viñetas. */
.info-practica-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.info-practica-dato {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 10px;
  background: var(--page-bg-alt); border-left: 3px solid var(--color-secundario);
}
.info-practica-dato svg { width: 18px; height: 18px; color: var(--color-secundario-suave); flex-shrink: 0; margin-top: 2px; }
.info-practica-dato .eyebrow { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-texto-suave); margin-bottom: 3px; }
.info-practica-dato strong { display: block; color: var(--color-texto); font-size: 0.96rem; font-weight: 700; }
.info-practica-dato a { display: inline-block; margin-top: 4px; font-size: 0.84rem; }
.info-practica-dato-ancho { grid-column: 1 / -1; }
.info-practica-aviso {
  margin-top: 16px; background: var(--belen-sky-950, var(--color-primario-oscuro)); color: #fff; padding: 14px 18px;
  border-radius: 10px; font-size: 0.88rem; display: flex; align-items: center; gap: 10px;
}
.info-practica-aviso svg { width: 16px; height: 16px; color: var(--belen-star-500, var(--color-secundario)); flex-shrink: 0; }
@media (max-width: 600px) { .info-practica-grid { grid-template-columns: 1fr; } }

/* Inscripción — enlaza al sistema real de inscripciones (nunca un
   formulario paralelo que solo abra WhatsApp). */
.retiro-inscripcion { padding: 56px 0; }

/* FAQ — <details>/<summary> nativos: funcionan sin JavaScript ni Anime.js,
   accesibles por teclado y con el estado expandido/colapsado nativo del
   navegador (mega-prompt sección 14). */
.retiro-faq { padding: 56px 0; }
.faq-lista { max-width: 760px; margin: 40px auto 0; }
.faq-item { border-bottom: 1px solid var(--color-borde); }
.faq-pregunta {
  list-style: none; cursor: pointer; padding: 18px 4px; font-weight: 700; font-size: 1rem;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--color-texto);
}
.faq-pregunta::-webkit-details-marker { display: none; }
.faq-signo { font-size: 1.3rem; color: var(--color-secundario-suave); flex-shrink: 0; transition: transform .2s ease; }
.faq-item[open] .faq-signo { transform: rotate(45deg); }
.faq-respuesta { padding: 0 4px 18px; }
.faq-respuesta p { margin: 0; color: var(--color-texto-suave); font-size: 0.94rem; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .faq-signo { transition: none; } }

/* Barra fija de inscripción en móvil — solo <768px, respeta el área segura
   inferior (notch), nunca cubre contenido gracias al padding-bottom del body. */
.retiro-cta-movil { display: none; }
@media (max-width: 767px) {
  body:has(.retiro-cta-movil) { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .retiro-cta-movil {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--color-fondo); border-top: 1px solid var(--color-borde);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .retiro-cta-movil .boton { flex: 1; width: auto; }
  .retiro-cta-movil .cta { flex: 1; justify-content: center; }
}

.retiro-cta-final { background: var(--page-bg-alt); padding: 56px 0; text-align: center; }
.retiro-cta-final-ilustracion { max-width: 110px; max-height: 96px; width: auto; height: auto; object-fit: contain; margin: 0 auto 18px; display: block; }
.retiro-cta-final h2 { color: var(--color-primario-oscuro); margin: 0 0 14px; font-size: 1.6rem; }
.retiro-cta-final p { max-width: 620px; margin: 0 auto 24px; color: var(--color-texto); font-size: 1.02rem; line-height: 1.65; }
.retiro-cta-final-datos { list-style: none; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 0 0 22px; font-size: 0.9rem; color: var(--color-texto-suave); }
.retiro-cta-final-datos li { display: inline-flex; align-items: center; gap: 6px; }
.retiro-cta-final-datos svg { width: 16px; height: 16px; flex-shrink: 0; }
.retiro-cta-final .boton-hero { display: inline-flex; align-items: center; gap: 8px; background: var(--color-secundario); color: var(--text-on-accent); padding: 13px 28px; border-radius: 10px; text-decoration: none; font-weight: 700; margin-bottom: 14px; }
.retiro-cta-final .boton-hero:hover { background: var(--gold-700); }

/* =================================================================
   Agenda operativa privada (Equipo de Servicio / Representante Local /
   Superadmin) — mega-prompt de separación público/privado, sección 14.
   ================================================================= */

.agenda-privada-descargas { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 24px; }
.agenda-privada-descargas .btn-mini { display: inline-flex; align-items: center; gap: 6px; }
.agenda-privada-descargas .btn-mini svg { width: 16px; height: 16px; flex-shrink: 0; }

.agenda-privada-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--color-borde); }
.agenda-tab { background: none; border: none; border-bottom: 3px solid transparent; padding: 10px 14px; font-weight: 700; color: var(--color-texto-suave); cursor: pointer; font-size: 0.92rem; }
.agenda-tab:hover { color: var(--color-primario); }
.agenda-tab.activo { color: var(--color-primario-oscuro); border-bottom-color: var(--color-secundario); }

.agenda-privada-dia { display: none; }
.agenda-privada-dia.activo { display: block; }

.agenda-privada-tabla { display: table; }
.agenda-privada-cards { display: none; }

.agenda-tipo-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.agenda-tipo-etiqueta { display: inline-block; margin-left: 8px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-texto-suave); }

.agenda-tipo-general .agenda-tipo-punto, .agenda-tipo-punto.agenda-tipo-general { background: var(--color-texto-suave); }
.agenda-tipo-ensenanza .agenda-tipo-punto, .agenda-tipo-punto.agenda-tipo-ensenanza { background: var(--info); }
.agenda-tipo-oracion .agenda-tipo-punto, .agenda-tipo-punto.agenda-tipo-oracion { background: var(--gold-600); }
.agenda-tipo-comida .agenda-tipo-punto, .agenda-tipo-punto.agenda-tipo-comida { background: var(--success); }
.agenda-tipo-descanso .agenda-tipo-punto, .agenda-tipo-punto.agenda-tipo-descanso { background: var(--charcoal-400); }
.agenda-tipo-dinamica .agenda-tipo-punto, .agenda-tipo-punto.agenda-tipo-dinamica { background: var(--warning); }
.agenda-tipo-misa .agenda-tipo-punto, .agenda-tipo-punto.agenda-tipo-misa { background: var(--color-primario); }

@media (max-width: 760px) {
  .agenda-privada-tabla { display: none; }
  .agenda-privada-cards { display: flex; flex-direction: column; gap: 12px; }
  .agenda-privada-card { border: 1px solid var(--color-borde); border-radius: 12px; padding: 14px 16px; background: var(--color-tarjeta); display: flex; flex-direction: column; gap: 4px; }
  .agenda-privada-card-hora { font-size: 0.82rem; color: var(--color-texto-suave); display: flex; align-items: center; }
}

/* =================================================================
   Modal "Cursos recientes" — mega-prompt de separación público/privado,
   sección 8-9. Hasta 3 tarjetas reales, nunca inventadas; data-count
   calculado en servidor decide 1/2/3 columnas.
   ================================================================= */

/* Fondo animado tipo vidrio del modal (2026-09-22) — overlay oscuro +
   desenfoque + 3 capas decorativas (haz blanco diagonal, halo azul, halo
   burdeos), todas `pointer-events:none`/`aria-hidden` y animadas con
   Anime.js en assets/js/retiro-animaciones.js. Isolation propia para que
   los halos con z-index negativo nunca se cuelen detrás del overlay. */
.modal-cursos-overlay {
  position: fixed; inset: 0; z-index: 60; isolation: isolate; overflow: hidden;
  background: linear-gradient(135deg, rgba(5, 12, 28, 0.94), rgba(18, 13, 18, 0.92));
  backdrop-filter: blur(14px);
}
.modal-light-blue, .modal-light-red {
  position: absolute; z-index: -2; width: clamp(280px, 40vw, 680px); aspect-ratio: 1;
  border-radius: 50%; filter: blur(90px); opacity: 0.16; pointer-events: none;
}
.modal-light-blue { top: -18%; right: -10%; background: #2387FF; }
.modal-light-red { bottom: -24%; left: -12%; background: #A52D45; }
.modal-glass-reflection {
  position: absolute; z-index: -1; width: 42%; height: 180%; top: -45%; left: -55%;
  opacity: 0; filter: blur(36px); transform: rotate(24deg); pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.06) 28%, rgba(255, 255, 255, 0.30) 50%, rgba(255, 255, 255, 0.07) 72%, transparent 100%);
}
.modal-cursos {
  position: fixed; inset: 0; z-index: 61; display: flex; align-items: center; justify-content: center; padding: 24px;
}
/* El atributo [hidden] nativo pierde contra un `display` del autor con la
   misma especificidad (0,1,0) — sin esta regla, JS pone hidden=true pero el
   modal sigue viéndose. Especificidad más alta (0,2,0) para que sí gane. */
.modal-cursos-overlay[hidden], .modal-cursos[hidden] { display: none; }
.modal-cursos-panel {
  background: var(--color-fondo); border-radius: 18px; max-width: 1040px; width: 100%; max-height: 88vh;
  overflow-y: auto; padding: 32px 28px; position: relative; box-shadow: var(--shadow-md);
}
.modal-cursos-panel h2 { margin: 0 0 20px; color: var(--color-primario-oscuro); text-align: center; font-size: 1.4rem; }
.modal-cursos-cerrar {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--color-borde); background: var(--color-tarjeta); color: var(--color-texto);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.modal-cursos-cerrar svg { width: 16px; height: 16px; }
.modal-cursos-cerrar:hover { background: var(--page-bg-alt); }

.modal-cursos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.modal-cursos-grid[data-count="1"] { grid-template-columns: 1fr; justify-items: center; }
.modal-cursos-grid[data-count="1"] .modal-curso-tarjeta { width: min(100%, 420px); }
.modal-cursos-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }

@media (max-width: 860px) {
  .modal-cursos-grid, .modal-cursos-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
  .modal-cursos-grid[data-count="1"] { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .modal-cursos-grid, .modal-cursos-grid[data-count="1"], .modal-cursos-grid[data-count="2"] { grid-template-columns: 1fr; }
  .modal-cursos-panel { padding: 26px 18px; max-height: 92vh; }
}

/* Tarjeta con efecto "glass" controlado (2026-09-22) — se distingue del
   fondo animado del modal sin competir con él. Por defecto (tema claro):
   vidrio claro cálido. Con tema oscuro (manual o del sistema, mismo patrón
   dual ya usado en el resto del archivo) pasa a vidrio oscuro. */
.modal-curso-tarjeta {
  position: relative; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
  background: rgba(255, 253, 249, 0.91); border: 1px solid rgba(18, 54, 109, 0.18);
  box-shadow: 0 24px 65px rgba(32, 40, 58, 0.18), 0 0 32px rgba(35, 135, 255, 0.08);
  backdrop-filter: blur(22px) saturate(115%);
}
:root[data-tema="oscuro"] .modal-curso-tarjeta {
  background: rgba(24, 21, 24, 0.86); border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38), 0 0 36px rgba(35, 135, 255, 0.10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) .modal-curso-tarjeta {
    background: rgba(24, 21, 24, 0.86); border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38), 0 0 36px rgba(35, 135, 255, 0.10);
  }
}
/* Estos solo aparecen en .mc-cuerpo (nunca dentro del encabezado azul, que
   fija su propio blanco más abajo) — por defecto ya son oscuros para el
   vidrio claro; con tema oscuro pasan a crema. */
.mc-cuerpo .mc-intro, .mc-cuerpo .mc-dia-nombre, .mc-cuerpo .mc-dia-fecha,
.mc-cuerpo .mc-dia-horario, .mc-cuerpo .mc-franja-info { color: var(--charcoal-900); }
:root[data-tema="oscuro"] .mc-cuerpo .mc-intro,
:root[data-tema="oscuro"] .mc-cuerpo .mc-dia-nombre,
:root[data-tema="oscuro"] .mc-cuerpo .mc-dia-fecha,
:root[data-tema="oscuro"] .mc-cuerpo .mc-dia-horario,
:root[data-tema="oscuro"] .mc-cuerpo .mc-franja-info,
:root[data-tema="oscuro"] .mc-cuerpo .mc-franja-info svg { color: var(--cream-100); }
:root[data-tema="oscuro"] .mc-dia-panel { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }
:root[data-tema="oscuro"] .mc-franja-info { border-color: rgba(255, 255, 255, 0.14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) .mc-cuerpo .mc-intro,
  :root:not([data-tema]) .mc-cuerpo .mc-dia-nombre,
  :root:not([data-tema]) .mc-cuerpo .mc-dia-fecha,
  :root:not([data-tema]) .mc-cuerpo .mc-dia-horario,
  :root:not([data-tema]) .mc-cuerpo .mc-franja-info,
  :root:not([data-tema]) .mc-cuerpo .mc-franja-info svg { color: var(--cream-100); }
  :root:not([data-tema]) .mc-dia-panel { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }
  :root:not([data-tema]) .mc-franja-info { border-color: rgba(255, 255, 255, 0.14); }
}

/* Encabezado azul profundo — identifica el retiro, distinto del resto de la
   tarjeta; el dibujo oficial va dentro de una superficie de vidrio, nunca
   sobre un bloque marrón plano. */
.mc-encabezado {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  color: #fff;
  background:
    radial-gradient(circle at 18% 20%, rgba(117, 185, 255, 0.20), transparent 38%),
    linear-gradient(125deg, #07152F 0%, #0B2148 48%, #12366D 100%);
}
.mc-icono {
  flex-shrink: 0; width: 68px; height: 68px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 30px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(10px);
}
.mc-icono img { width: 82%; height: 82%; object-fit: contain; }
.mc-icono svg { width: 30px; height: 30px; color: var(--belen-gold, #D7B64A); }
.mc-nombre { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mc-nombre strong { color: #fff; font-size: 1.06rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-nombre span { color: rgba(255, 255, 255, 0.72); font-size: 0.78rem; }
.mc-badge-anio {
  flex-shrink: 0; background: var(--belen-gold, #D7B64A); color: #07152F;
  font-weight: 700; font-size: 0.78rem; padding: 4px 10px; border-radius: 100px;
}
@media (max-width: 480px) {
  .mc-icono { width: 56px; height: 56px; }
}

.mc-cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.mc-intro { margin: 0; font-size: 0.86rem; color: var(--color-texto-suave); line-height: 1.5; }

/* Paneles de los 3 días — misma altura, contenido centrado, horario en una sola línea. */
.mc-dias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mc-dia-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 3px; padding: 10px 6px; border-radius: 10px; background: rgba(18, 54, 109, 0.06);
  border: 1px solid rgba(18, 54, 109, 0.14); min-height: 74px;
}
.mc-dia-nombre { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-primario-oscuro); }
.mc-dia-fecha { font-size: 0.72rem; color: var(--color-texto-suave); }
.mc-dia-horario { font-size: 0.72rem; color: var(--color-texto); font-weight: 600; }
.schedule-row { display: flex; justify-content: center; align-items: center; gap: 0.4rem; flex-wrap: nowrap; }
.schedule-time { white-space: nowrap; }
.schedule-day { white-space: nowrap; }

.mc-franja-info { list-style: none; margin: 0; padding: 8px 0; display: flex; flex-wrap: wrap; gap: 10px 16px; border-top: 1px dashed rgba(18, 54, 109, 0.18); border-bottom: 1px dashed rgba(18, 54, 109, 0.18); font-size: 0.78rem; }
.mc-franja-info li { display: flex; align-items: center; gap: 5px; }
.mc-franja-info svg { width: 14px; height: 14px; flex-shrink: 0; }
.mc-estado-abierta { color: var(--success); }
.mc-estado-cerrada { color: var(--color-texto-suave); }

.modal-curso-acciones { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.modal-curso-acciones .boton { width: 100%; }
.cuenta-regresiva-chica { font-size: 0.78rem; padding: 8px 10px; }

@media (max-width: 640px) {
  .mc-dias { grid-template-columns: 1fr; }
  .mc-dia-panel { flex-direction: row; justify-content: space-between; text-align: left; padding: 10px 14px; min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-cursos, .modal-cursos-overlay { transition: none; }
}

/* =================================================================
   Tarjeta destacada de "Últimas noticias" (2026-09-22) — composición
   editorial de 3 áreas para cuando hay UNA sola noticia real con datos
   de sesión (fecha/horario/lugar reales, nunca la fecha de publicación).
   Paleta propia, intencionalmente fija en ambos temas (mismo patrón que
   .hero / .retiro-frase-central): es una pieza editorial, no una tarjeta
   de sistema que deba fundirse con el tema oscuro.
   ================================================================= */
:root {
  --belen-blue-900: #082B55;
  --belen-blue-800: #0B407A;
  --belen-blue-600: #1678D2;
  --belen-electric: #2F9BFF;
  --belen-gold: #D7B64A;
  --belen-content-bg: #FFF9F0;
  --belen-content-bg-alt: #F6EBDD;
  --belen-text: #282020;
  --belen-text-secondary: #665953;
  --belen-burgundy: #7A1F2B;
  --belen-burgundy-dark: #681A26;
  --belen-gold-dark: #9A7514;
  /* Paleta "Cielo de Belén" (2026-09-22, integrada desde index-v6.html de
     referencia) — extiende la paleta ya existente arriba, no la duplica:
     --belen-blue-900/800/600 ya cubren --cielo-900/800/700 del archivo. */
  --belen-sky-950: #071A2D;
  --belen-sky-500: #6CBEEE;
  --belen-sky-200: #CCE7F8;
  --belen-star-300: #FFDE94;
  --belen-star-500: #F0AE3C;
  --belen-star-700: #C97F17;
}

.noticia-destacada {
  width: min(100%, 980px);
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  background: var(--belen-content-bg);
  box-shadow:
    0 0 0 1px rgba(47, 155, 255, 0.45),
    0 10px 34px rgba(47, 155, 255, 0.20),
    0 0 48px rgba(47, 155, 255, 0.12);
  /* Inclinación 3D sutil vía JS (assets/js/retiro-animaciones.js) — el
     `perspective` vive aquí, en el propio elemento que rota, a propósito:
     los ángulos son pequeños (4-6°) y no necesitan la distorsión de un
     perspective real en el ancestro para leerse como una inclinación. */
  perspective: 1000px;
}
.modal-curso-tarjeta { perspective: 1000px; }

.nd-visual {
  /* Capa 1: imagen alusiva de fondo (cuando exista) + capa 2: overlay azul
     de contraste — ambas en el mismo `background` para no necesitar un nodo
     extra. Capa 3 (contenido: dibujo protagonista + estrella/leyenda) son
     los hijos reales del elemento, ver .nd-visual-protagonista/-pie. */
  --nd-img: none;
  flex: 0 0 34%;
  min-height: 300px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: center;
  padding: 24px 20px 18px;
  background:
    linear-gradient(180deg, rgba(8, 43, 85, 0.55) 0%, rgba(8, 43, 85, 0.88) 100%),
    var(--nd-img) center / cover no-repeat,
    linear-gradient(145deg, var(--belen-blue-900), var(--belen-blue-600));
}
.nd-visual-protagonista { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; }
.nd-visual-protagonista img {
  max-width: 82%; max-height: 200px; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}
.nd-visual-icono-solo { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.nd-visual-icono-solo svg { width: 100%; height: 100%; color: var(--belen-gold); }
.nd-visual-pie { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.nd-visual-estrella { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; animation: pulso-estrella 3.6s ease-in-out infinite; }
.nd-visual-estrella svg { width: 100%; height: 100%; color: var(--belen-gold); }
.nd-visual-icono-solo { animation: pulso-estrella 3.6s ease-in-out infinite; }

/* Pulso muy suave, sin parpadeo ni ciclos rápidos — solo opacidad, nunca
   tamaño/posición, para no afectar legibilidad ni el layout. */
@keyframes pulso-estrella {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.62; }
}
@media (prefers-reduced-motion: reduce) {
  .nd-visual-estrella, .nd-visual-icono-solo { animation: none; }
}
.nd-visual-etiqueta {
  margin: 0; color: #fdf6e3; font-weight: 700; font-size: 0.86rem;
  letter-spacing: 0.03em; text-transform: uppercase;
}

.nd-cuerpo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.nd-info { padding: 26px 30px 18px; }

/* Encabezado horizontal: badge "Próximo retiro" + título + badges de
   ciudad/año en una sola composición, aprovechando el ancho disponible en
   vez de apilarse a la izquierda (corrección 2026-09-22 — no toca nada de
   lo que sigue después: subtítulo, introducción, paneles, etc.). */
.nd-encabezado {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-areas: "eyebrow title meta";
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  margin-bottom: 10px;
}
.nd-badge {
  grid-area: eyebrow; display: inline-block; padding: 5px 12px; border-radius: 100px;
  background: rgba(122, 31, 43, 0.10); color: var(--belen-burgundy);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap; margin: 0;
}
.nd-titulo { grid-area: title; min-width: 0; margin: 0; color: var(--belen-text); font-size: 1.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-badges-secundarios { grid-area: meta; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; }
.nd-badge-secundario {
  display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 0.72rem; font-weight: 700; white-space: nowrap;
  background: var(--belen-content-bg-alt); color: var(--belen-text-secondary); border: 1px solid rgba(122, 31, 43, 0.14);
}
.nd-badge-secundario.nd-badge-anio { background: var(--belen-gold); color: var(--belen-burgundy); border-color: transparent; }
@media (max-width: 767px) {
  .nd-encabezado {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas: "eyebrow eyebrow" "title meta";
    row-gap: 8px;
  }
  .nd-titulo { white-space: normal; }
}
.nd-subtitulo { margin: 0 0 10px; color: var(--belen-gold-dark); font-weight: 700; font-size: 0.9rem; }
.nd-resumen { margin: 0 0 12px; color: var(--belen-text-secondary); font-size: 0.94rem; line-height: 1.55; max-width: 60ch; }
.nd-frase {
  display: flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 10px 14px;
  background: var(--belen-content-bg-alt); border-radius: 10px; color: var(--belen-burgundy);
  font-style: italic; font-size: 0.88rem;
}
.nd-frase svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--belen-burgundy); }

.nd-paneles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: stretch; }
.nd-panel {
  display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 10px;
  background: var(--belen-content-bg-alt); border: 1px solid rgba(122, 31, 43, 0.12);
  font-size: 0.78rem; color: var(--belen-text); min-height: 64px;
}
.nd-panel svg { width: 17px; height: 17px; flex-shrink: 0; }
.nd-panel-fecha svg { color: var(--belen-burgundy); }
.nd-panel-horario svg { color: var(--belen-gold-dark); }
.nd-panel-lugar svg { color: var(--belen-blue-600); }
.nd-panel span { display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.nd-panel-horario em { font-style: normal; justify-content: flex-start; }
.nd-panel-horario .schedule-day { font-weight: 700; min-width: 4.4em; }
.nd-panel-horario .schedule-time { font-weight: 600; }
.nd-panel strong { color: var(--belen-text); }

.nd-franja {
  margin-top: auto; background: var(--belen-content-bg-alt); border-top: 1px solid rgba(122, 31, 43, 0.12);
  padding: 18px 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.nd-franja-datos { display: flex; gap: 22px; flex-wrap: wrap; }
.nd-dato { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--belen-text-secondary); }
.nd-dato svg { width: 18px; height: 18px; color: var(--belen-burgundy); flex-shrink: 0; }
.nd-dato strong { display: block; color: var(--belen-text); font-size: 0.92rem; }
.nd-franja-accion { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.nd-boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0 22px; border-radius: 10px; background: var(--belen-burgundy); color: #fff;
  font-weight: 700; text-decoration: none; font-size: 0.92rem; transition: background 0.15s ease, transform 0.15s ease;
}
.nd-boton:hover { background: var(--belen-burgundy-dark); transform: translateY(-1px); }
.nd-franja-accion .cuenta-regresiva-chica {
  margin: 0; background: rgba(122, 31, 43, 0.08); color: var(--belen-burgundy); font-weight: 700;
}

.btn-noticias-ver-todas {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 100px;
  border: 1px solid var(--color-secundario); color: var(--color-primario-oscuro); background: transparent;
  text-decoration: none; font-weight: 700; font-size: 0.86rem;
}
.btn-noticias-ver-todas:hover { background: var(--page-bg-alt); }
.btn-noticias-ver-todas svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .noticia-destacada { flex-direction: column; }
  .nd-visual { flex: none; min-height: 180px; }
  .nd-paneles { grid-template-columns: repeat(2, 1fr); }
  .nd-franja { flex-direction: column; align-items: stretch; }
  .nd-franja-accion { align-items: stretch; }
  .nd-boton { width: 100%; }
}
@media (max-width: 520px) {
  .nd-paneles { grid-template-columns: 1fr; }
  .nd-info { padding: 22px 20px 16px; }
  .nd-franja { padding: 16px 20px; }
}