/* v5.18 · Tema claro. El tema oscuro conserva su diseño y marca blanca. */
:root[data-theme=light]{--page:#fbfdff;--surface:#fff;--text:#172443;--secondary:#54647b;--border:#e2edf3;--tint:#f1faff;--soft:#f1faff;--line:#e2edf3}
:root[data-theme=light] .visual-preview .topbar{background:#fff;border-bottom-color:#edf2f6}
:root[data-theme=light] .visual-preview .header{background:#fff;border-bottom:1px solid #edf2f6}
:root[data-theme=light] .visual-preview .brand{width:210px;height:70px;padding:0;background:transparent url('../img/logo-horizontal-original-transparente.png') center / contain no-repeat;border-radius:0}
:root[data-theme=light] .visual-preview .brand img{width:100%;height:100%;opacity:0}
:root[data-theme=light] .visual-preview .hero{background:radial-gradient(ellipse at 57% 20%,#dffaff 0%,#f4fcff 38%,#fbfdff 78%)}
:root[data-theme=light] .visual-preview .hero-visual>img{filter:none}
:root[data-theme=light] .visual-preview .home-course-search input{background:#fff;box-shadow:0 4px 18px #193a5a0d}
:root[data-theme=light] .visual-preview .course-card{border-color:#e5edf2;box-shadow:0 3px 14px #193a5a08}
:root[data-theme=light] .visual-preview .course-card:hover,:root[data-theme=light] .visual-preview .course-card:focus-within{box-shadow:0 10px 25px #193a5a17}
:root[data-theme=light] .visual-preview .home-families,:root[data-theme=light] .visual-preview .route-strip{border-color:#e8f0f4}
:root[data-theme=light] .visual-preview .home-family-links a{border-color:#e5edf2}
:root[data-theme=light] .visual-preview .soft-section{background:#f1faff}
:root[data-theme=light] .visual-preview .hero-brand-mark{width:128px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;filter:drop-shadow(0 1px 3px #ffffff) drop-shadow(0 0 7px #ffffff)}
:root[data-theme=light] .visual-preview .hero-brand-mark .brand-on-dark{display:none}
:root[data-theme=light] .visual-preview .hero-brand-mark .brand-on-light{display:block}
:root[data-theme=dark] .visual-preview .hero-brand-mark .brand-on-light{display:none}
:root[data-theme=dark] .visual-preview .hero-brand-mark .brand-on-dark{display:block}
@media(max-width:900px){:root[data-theme=light] .visual-preview .brand{width:170px;height:57px}}
@media(max-width:580px){:root[data-theme=light] .visual-preview .brand{width:140px;height:47px}:root[data-theme=light] .visual-preview .hero-brand-mark{width:83px;bottom:27%;right:25%}}

/* v5.20 · Logo original decorativo sobre las imágenes de cursos. */
.visual-preview .course-card{position:relative}
.visual-preview .course-card::before{content:"";position:absolute;z-index:2;top:13px;right:13px;width:76px;height:53px;background:url('../img/logo-compacto-original-transparente.png') center / contain no-repeat;filter:drop-shadow(0 1px 3px #fff) drop-shadow(0 0 6px #fff);pointer-events:none}
.visual-preview .course-cover{position:relative}
.visual-preview .course-cover::after{content:"";position:absolute;z-index:2;top:19px;right:19px;width:122px;height:85px;background:url('../img/logo-compacto-original-transparente.png') center / contain no-repeat;filter:drop-shadow(0 1px 4px #fff) drop-shadow(0 0 9px #fff);pointer-events:none}
@media(max-width:580px){.visual-preview .course-card::before{width:67px;height:47px;top:10px;right:10px}.visual-preview .course-cover::after{width:82px;height:58px;top:11px;right:11px}}