/* ══════════════════════════════════════════════════════════════════════
   Tema del sistema de diseño para las páginas de www que ya tienen su propia
   maquetación (hojas ae-, cu-, rh-, rm-, apa y las comunes base/components/layout).
   Se carga DESPUÉS de sus hojas: cambia tokens (color, tipografía, radios) y la
   cabecera de página, no la estructura. Así sus funciones y su maquetación probada
   se conservan y todas hablan el mismo idioma visual que la portada.
   Producción: /css/d20-tema.css. Fuente: secure/sistema-diseno-www/compartido/tema.css
   ══════════════════════════════════════════════════════════════════════ */

/* paleta A+C sobre los tokens de cada hoja (misma función, mismo nombre) */
:root, .ae-body, .cu-body, .rh-body, .rm-body, body {
  --font-base: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-heading: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;   /* botones antiguos usan esta variable */
  --color-text: #241828; --color-heading: #241828; --c-primary: #79122F; --c-primary-h: #5A0D22;
  --c-accent: #F0B424; --color-primary: #F0B424; --c-dark: #241829;
}
:root, body.d20-tema, .d20-tema.ae-body, .d20-tema.cu-body, .d20-tema.rh-body, .d20-tema.rm-body {
  --ae-navy: #241829; --ae-navy-2: #150C17; --ae-vino: #79122F; --ae-vino-osc: #5A0D22; --ae-oro: #F0B424; --ae-oro-osc: #6B4600;
  --ae-oro-suave: #FBF5EA; --ae-texto: #241828; --ae-suave: #584A5C; --ae-linea: #DCD2C8; --ae-fondo: #F6F1E8; --ae-sombra: 0 16px 32px rgba(36,24,40,.14);
  --cu-navy: #241829; --cu-navy-2: #150C17; --cu-vino: #79122F; --cu-vino-osc: #5A0D22; --cu-oro: #F0B424; --cu-oro-osc: #6B4600;
  --cu-oro-suave: #FBF5EA; --cu-texto: #241828; --cu-suave: #584A5C; --cu-linea: #DCD2C8; --cu-fondo: #F6F1E8; --cu-sombra: 0 16px 32px rgba(36,24,40,.14);
  --rh-navy: #241829; --rh-navy-2: #150C17; --rh-vino: #79122F; --rh-vino-osc: #5A0D22; --rh-oro: #F0B424; --rh-oro-osc: #6B4600;
  --rh-oro-suave: #FBF5EA; --rh-texto: #241828; --rh-suave: #584A5C; --rh-linea: #DCD2C8; --rh-fondo: #F6F1E8; --rh-sombra: 0 16px 32px rgba(36,24,40,.14);
  --rm-navy: #241829; --rm-navy-2: #150C17; --rm-vino: #79122F; --rm-vino-osc: #5A0D22; --rm-oro: #F0B424; --rm-oro-osc: #6B4600;
  --rm-oro-suave: #FBF5EA; --rm-texto: #241828; --rm-suave: #584A5C; --rm-linea: #DCD2C8; --rm-fondo: #F6F1E8; --rm-sombra: 0 16px 32px rgba(36,24,40,.14); --rm-radio: 2px;
}
.ae-body, .cu-body, .rh-body, .rm-body, body.d20-tema { font-family: 'Manrope', system-ui, sans-serif; background: #F6F1E8; color: #241828; }
.d20-tema main h1, .d20-tema main h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 800; letter-spacing: -.015em; }
.d20-tema main h3 { font-family: 'Manrope', system-ui, sans-serif; }

/* cabecera de página de las hojas propias: el mismo berenjena con resplandor de la portada */
.d20-tema .ae-hero, .d20-tema .cu-hero, .d20-tema .rh-hero, .d20-tema .rm-hero, .d20-tema .apa-hero {
  background:
    radial-gradient(52% 58% at 72% 40%, rgba(88,58,104,.70) 0%, rgba(88,58,104,0) 70%),
    radial-gradient(40% 46% at 16% 78%, rgba(121,18,47,.28) 0%, rgba(121,18,47,0) 72%),
    linear-gradient(168deg, #241829 0%, #1C1220 44%, #150C17 100%) !important;
  color: #FBF5EA;
}
.d20-tema :is(.ae-hero, .cu-hero, .rh-hero, .rm-hero) h1 { color: #FBF5EA; font-size: clamp(34px, 4.3vw, 56px); line-height: 1.06; }
.d20-tema :is(.ae-kicker, .cu-kicker, .rh-kicker, .rm-kicker) { color: #F0B424; letter-spacing: .16em; }
.d20-tema :is(.ae-hero-sub, .cu-hero-sub, .rh-hero-sub, .rm-hero-sub) { color: #D8CBDB; }
.d20-tema :is(.ae-migas, .cu-migas, .rh-migas, .rm-migas) a { color: #D8CBDB; }
.d20-tema :is(.ae-migas, .cu-migas, .rh-migas, .rm-migas) [aria-current] { color: #FBF5EA; }

/* botones: rectos, como el sistema */
.d20-tema :is(.ae-btn, .cu-btn, .rh-btn, .rm-btn) { border-radius: 2px; font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; }
.d20-tema :is(.ae-card, .cu-card, .rh-card, .rm-card, .cu-incluye-item, .cu-ficha-precio-box) { border-radius: 2px; }
.d20-tema :focus-visible { outline: 3px solid #F0B424; outline-offset: 3px; }

/* páginas maquetadas con Bootstrap 3 (normas APA y similares): solo tipografía y color de marca */
.d20-tema .btn-primary, .d20-tema .btn-warning { background: #F0B424; border-color: #F0B424; color: #241828; border-radius: 2px; }
/* flecha del menú: si la página carga Font Awesome y el <i> ya trae el SVG de la maqueta, sin duplicar */
.site-header i.fa:has(.rdx-chevron)::before { content: none; }
/* guía «Elegir método»: la flecha entre pasos es decorativa, pero se lee */
.d20-tema .rm-par span { color: #6B4600; }
/* la cabecera compartida no hereda las mayúsculas ni la letra de las hojas antiguas */
.d20-tema .site-header .nav-link, .d20-tema .site-header .dropdown-menu a, .d20-tema .site-header .mobile-nav-link,
.d20-tema .site-header .mobile-divider-link { text-transform: none; letter-spacing: normal; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.d20-tema :is(.ae-hero, .cu-hero, .rh-hero, .rm-hero) h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 800; letter-spacing: -.02em; }
/* Bootstrap 3 fija html{font-size:10px}: la cabecera, el pie y el sistema miden en rem */
html:has(body.d20-tema) { font-size: 100%; }

/* cabeceras de las páginas antiguas (membresías, libros, multimedia, webinars, infografías) */
.d20-tema :is(.membership-hero, .libros-hero, .multimedia-hero, .webinars-hero, .infografia-hero, .page-header) {
  background:
    radial-gradient(52% 58% at 72% 40%, rgba(88,58,104,.70) 0%, rgba(88,58,104,0) 70%),
    radial-gradient(40% 46% at 16% 78%, rgba(121,18,47,.28) 0%, rgba(121,18,47,0) 72%),
    linear-gradient(168deg, #241829 0%, #1C1220 44%, #150C17 100%) !important;
  color: #FBF5EA !important;
}
.d20-tema :is(.membership-hero, .libros-hero, .multimedia-hero, .webinars-hero, .infografia-hero, .page-header) :is(h1, .hero-title) {
  font-family: 'Fraunces', Georgia, serif !important; font-weight: 800; letter-spacing: -.02em; color: #FBF5EA !important;
}
.d20-tema :is(.membership-hero, .libros-hero, .multimedia-hero, .webinars-hero, .infografia-hero, .page-header) :is(p, .hero-subtitle) { color: #D8CBDB !important; }
.d20-tema :is(.hero-badge, .hero-kicker, .eyebrow) { background: transparent !important; color: #F0B424 !important; border-color: rgba(240,180,36,.5) !important; }
.d20-tema :is(.section-title, h2) { font-family: 'Fraunces', Georgia, serif; font-weight: 800; }
.d20-tema :is(.btn, .hero-action, .btn-primary) { border-radius: 2px; }
/* filas de Bootstrap con márgenes negativos fuera de un .container: 8 px de desborde horizontal */
body.d20-tema { margin: 0; overflow-x: clip; }
/* eventos: el enlace a las condiciones del certificado, con zona de toque completa */
.d20-tema .ae-nota-certificado a { display: inline-flex; align-items: center; min-height: 44px; }
/* multimedia: la franja de canales de aviso pasa del verde a la paleta de la casa */
.d20-tema [style*="#00c853"] { background: linear-gradient(135deg, #3A293D 0%, #241829 60%, #1C1220 100%) !important; }

/* cursos: bloque de cierre de la ficha, sobre berenjena */
.d20-tema .cu-cierre { border-radius: 2px;
  background: radial-gradient(52% 58% at 72% 40%, rgba(88,58,104,.70) 0%, rgba(88,58,104,0) 70%), linear-gradient(168deg, #241829 0%, #150C17 100%); }
.d20-tema .cu-cierre h2 { color: #FBF5EA; }
.d20-tema .cu-cierre a:not(.cu-btn) { color: #FFD66B; }
.d20-tema .cu-cierre .cu-cierre-nota { margin-left: auto; margin-right: auto; }

/* enlaces dentro de las cabeceras oscuras de página (consulta, comprobante…): legibles */
.d20-tema :is(.ae-hero, .cu-hero, .rh-hero, .rm-hero, .membership-hero, .libros-hero, .multimedia-hero, .webinars-hero, .infografia-hero, .page-header)
  a:not([class*="btn"]):not(.hero-action) { color: #FFD66B; text-underline-offset: 3px; }