/* ========================================================== MODO OSCURO Se activa con el botón de la cabecera: (app.js lo guarda en el navegador y el lo aplica al cargar). Cómo funciona: el sitio pinta los textos con --tinta y los fondos con --papel, --bruma y --blanco. Aquí se invierten dentro de . Lo que en el diseño ya era oscuro (fotos con velo azul, tarjetas en degradado, botones celestes con texto azul) recupera los colores de marca con --marca-tinta y --marca-lago, que se calculan en :root antes del cambio y respetan la paleta de Ajustes › Colores. ========================================================== */ :root{--marca-tinta:var(--tinta);--marca-lago:var(--lago);--marca-lago-osc:var(--lago-osc)} html[data-tema="oscuro"]{color-scheme:dark;background:#0B1826} html[data-tema="oscuro"] body{ --papel:#0B1826; /* fondo general */ --bruma:#0F2135; /* bandas alternas */ --blanco:#142B42; /* tarjetas y paneles */ --tinta:#E3ECF5; /* textos */ --tinta-2:var(--tinta); --tinta-2-suave:#A9BBCE; --lago:#5CCFCF; /* celeste legible sobre oscuro */ --lago-osc:#8ADFDF; --lp-texto:#BFCDDB; --sombra-suave:0 18px 50px -22px rgba(0,0,0,.7); --sombra-card:0 10px 34px -18px rgba(0,0,0,.6); } /* Botón del tema: sol en modo oscuro */ html[data-tema="oscuro"] .tema-boton .tema-luna{display:none} html[data-tema="oscuro"] .tema-boton .tema-sol{display:block} /* ── Elementos que conservan los colores de marca ─────────── Fotos con velo azul, degradados con texto blanco y rellenos celestes con texto azul: se ven igual que en modo claro. */ html[data-tema="oscuro"] :is( .anuncio, .evento-card, .programa-visual, .azulejo, .portada, .avatar, .avanzado, .beneficio .icono, .tarjeta.beneficio[style], .fecha-bloque, .video-miniatura, .articulo-visual, .voz-play, .video-ventana-cerrar, .portada-foto-play, .portada-chip-play, .btn-primario, .btn-portada, .btn-voces, .btn-resenas, .btn-cierre, .btn-tarifa-solido, .chip[aria-pressed="true"], .plan .insignia, .tarifa-insignia, .video-play ){--tinta:var(--marca-tinta);--blanco:#FFFFFF} html[data-tema="oscuro"] .banda .btn-primario{background:var(--celeste);color:var(--marca-tinta)} html[data-tema="oscuro"] .banda .btn-primario:hover{background:var(--turquesa-2)} html[data-tema="oscuro"] .paso::before{background:var(--marca-tinta)} /* ── Logo: el azul del logo no se lee sobre fondo oscuro ── Con «Logo para modo oscuro» (Ajustes › Marca) se usa esa versión; sin ella, se aclara el logo normal. */ html[data-tema="oscuro"] img.logo-claro{display:none !important} html[data-tema="oscuro"] img.logo-oscuro{display:block !important} html[data-tema="oscuro"] :is(.logo, .lp .cabecera--clara .marca, .lp .pie-marca, .lp .cabecera-venta.cabecera--clara) img:not(.logo-oscuro){ filter:brightness(1.75) saturate(.9); } /* ── Cabecera y menú ── */ html[data-tema="oscuro"] .nav{background:#0E1D2E} html[data-tema="oscuro"] .btn-suave:hover{background:#1A3450} /* ── Portada de inicio ── */ html[data-tema="oscuro"] .portada-inicio{--p-papel:var(--papel)} html[data-tema="oscuro"] :is(.portada-hojas, .voces-mancha, .resenas-mancha){opacity:.06} html[data-tema="oscuro"] .portada-insignia{background:#12304A} html[data-tema="oscuro"] .portada-chip--valor{background:var(--blanco)} /* Fondos de espera de fotos y videos */ html[data-tema="oscuro"] :is(.portada-foto, .curso-arte, .voz-video){background-color:#16324C} /* Sombras: en oscuro van en negro (las de color azul se volverían un halo claro) */ html[data-tema="oscuro"] :is(.portada-foto, .portada-chip--valor, .curso-arte, .voces-panel, .voz, .tarifa, .tarifa--destacada, .resena){ box-shadow:0 22px 50px -30px rgba(0,0,0,.8); } html[data-tema="oscuro"] .curso>a:hover .curso-arte{box-shadow:0 28px 56px -28px rgba(0,0,0,.9)} /* ── Secciones con colores claros fijos ── */ html[data-tema="oscuro"] :is(.btn-populares:hover, .btn-tarifa:hover){background:#1A3450} html[data-tema="oscuro"] :is(.voces-ceja, .tarifa-chip){background:#12344A} html[data-tema="oscuro"] .resenas-ceja{background:#15304F} html[data-tema="oscuro"] :is(.voces-punto, .resenas-punto){background:#2A4A66} html[data-tema="oscuro"] :is(.voces-punto, .resenas-punto)[aria-current="true"]{background:var(--verde)} html[data-tema="oscuro"] .tarifa--destacada{background:#113047;border-color:#2F8C8F} html[data-tema="oscuro"] .tarifa-regalo{background:#3A2230} html[data-tema="oscuro"] .tarifa-regalo svg{color:#F08C92} html[data-tema="oscuro"] .cierre{background:color-mix(in srgb,var(--celeste) 24%,var(--papel))} html[data-tema="oscuro"] .cierre-panel::before{background:radial-gradient(closest-side, rgba(51,204,204,.12), rgba(51,204,204,0))} html[data-tema="oscuro"] .boletin-form input{color:inherit} /* ── Landings de cursos y pie de página (.lp) ─────────────── landing.css define sus propios colores dentro de .lp. */ html[data-tema="oscuro"] .lp{ --boton:var(--marca-lago); /* los botones conservan el celeste oscuro de marca */ --boton-hover:var(--marca-lago-osc); --blanco:var(--papel); --marino:var(--tinta); --navy:#EAF2FA; --teal-deep:var(--lago); --texto-suave:#8EA3B7; --coral-bg:#3A2230; --menta-1:color-mix(in srgb,var(--celeste) 7%,#0B1826); --menta-2:color-mix(in srgb,var(--celeste) 11%,#0B1826); --menta-3:color-mix(in srgb,var(--celeste) 18%,#0B1826); --borde:#1F3F5C; --borde-suave:#1A344D; --sombra-sm:0 2px 10px rgba(0,0,0,.25); --sombra:0 10px 30px rgba(0,0,0,.35); --sombra-lg:0 22px 60px rgba(0,0,0,.45); } /* Tarjetas blancas → tarjetas oscuras */ html[data-tema="oscuro"] .lp :is( .btn-borde, .tarjeta-autora, .tarjeta-membresia, .chip-garantia, .plan, .paso, .item, .logro, .beneficios li, .modulo, .bono, .pilar, .ico-familias ){background:#142B42} html[data-tema="oscuro"] .lp .pie{background:var(--papel)} html[data-tema="oscuro"] .lp .pie::before{background:radial-gradient(circle at 40% 40%, rgba(51,204,204,.07) 0%, rgba(51,204,204,0) 70%)} /* Los logos de pago necesitan fondo claro: la tarjeta sigue blanca */ html[data-tema="oscuro"] .lp .pie .caja-pago{--marino:var(--marca-tinta);background:#FFFFFF;border-color:transparent} /* Barras de color (turquesa u otro color elegido) y cierre turquesa: botón blanco con texto de marca */ html[data-tema="oscuro"] .lp :is(.cabecera--color, .cta-final){--teal-deep:var(--marca-lago)} html[data-tema="oscuro"] .lp :is(.cinta, .etiqueta-bono){background:var(--marca-lago)} html[data-tema="oscuro"] .lp .fecha-destacada{background:var(--marca-tinta)} /* Barras claras elegidas en el panel (blanco u otro color claro) */ html[data-tema="oscuro"] .lp .cabecera--clara{--fondo-barra:#0E1D2E !important} html[data-tema="oscuro"] .lp .cabecera-venta.cabecera--clara{background:#0E1D2E !important} html[data-tema="oscuro"] .lp .avatar{background:#16405A;color:var(--tinta)} html[data-tema="oscuro"] .lp .foto-nota{color:#7FB9BD} html[data-tema="oscuro"] .lp .hero{ background: radial-gradient(900px 520px at 12% -10%, rgba(51,204,204,.10) 0%, rgba(51,204,204,0) 60%), linear-gradient(180deg,#0E2033 0%, #0B1826 68%); } html[data-tema="oscuro"] .lp :is(.hero-foto, .video-marco, .retrato){background:linear-gradient(180deg,#16324C 0%, #10263B 100%)} html[data-tema="oscuro"] .lp .hero--recorte .hero-foto{background:none} html[data-tema="oscuro"] .lp .hero-reto{ background: radial-gradient(700px 420px at 88% 8%, rgba(51,204,204,.18) 0%, rgba(51,204,204,0) 65%), linear-gradient(160deg,#0F3A44 0%, #0E2A3A 42%, #0B1826 100%); } html[data-tema="oscuro"] .lp .pildora-clara{background:rgba(255,255,255,.08)} html[data-tema="oscuro"] .lp .tarjeta-familias{background:rgba(20,43,66,.72);border-color:rgba(255,255,255,.08)} html[data-tema="oscuro"] .lp .reto-foto{background:linear-gradient(170deg,rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%)} /* ── Ventana de bienvenida ── */ html[data-tema="oscuro"] .bienvenida{--bv-rosa-2:#1D2537;background:rgba(2,7,13,.72)} html[data-tema="oscuro"] .bv-caja{background:var(--blanco);box-shadow:0 30px 80px -20px rgba(0,0,0,.7)} html[data-tema="oscuro"] .bv-cerrar{background:var(--blanco)} html[data-tema="oscuro"] .bv-cuerpo{background:linear-gradient(165deg,var(--blanco) 0%,var(--blanco) 38%,var(--bv-rosa-2) 100%)} html[data-tema="oscuro"] .bv-campo input{background:var(--papel)} html[data-tema="oscuro"] .bv-error{color:#FFB3BA;background:#3A1D24} /* La foto con la frase manuscrita y el logo se mantiene clara */ html[data-tema="oscuro"] .bv-foto{--tinta:var(--marca-tinta);--lago:var(--marca-lago)}