/* ========================================================================== Crack de la IA — tema oscuro site-wide (generaliza PR #35 /recursos) Cargar DESPUÉS de /assets/site/b.*.css (y de style.css en legales). Paleta: bg #0B0D1A · sección #0E1020 · card #14172A · texto #fff/#C9CCDA/#8E93A8 acento #01AEFD (botones con texto ink) · púrpura #922AFD solo detalles ========================================================================== */ :root{ --bg:#0B0D1A;--bg2:#0E1020;--card:#14172A;--card2:#1A1E36; --tx:#FFFFFF;--tx2:#C9CCDA;--tx3:#8E93A8;--bd:rgba(255,255,255,.10);--bd2:rgba(255,255,255,.18); --acc:#01AEFD;--acc-h:#3CC2FF;--pur:#922AFD;--ink0:#0E1020; /* re-mapeo de variables existentes del sitio */ --ink:#FFFFFF;--muted:#C9CCDA;--soft:#0E1020;--line:rgba(255,255,255,.10);--paper:#0B0D1A; color-scheme:dark; } html body,html body.taller{background:var(--bg);color:var(--tx2)} body h1,body h2,body h3,body h4{color:var(--tx);font-family:"Plus Jakarta Sans",Inter,sans-serif} body{font-family:Inter,system-ui,sans-serif} ::selection{background:var(--acc);color:var(--ink0)} body.home,body.taller,body.legal-page{--ink:#fff;--line:var(--bd);--mut:#C9CCDA;--bg2:#0E1020} body.home.lean{--ln-ink:#fff;--ln-mute:#C9CCDA;--ln-line:rgba(255,255,255,.10);--ln-soft:#0E1020;--ln-logo:#C9CCDA;background:var(--bg);color:var(--tx2)} /* ---------- Botones: azul con texto ink (contraste 8.6:1; blanco sobre azul = 2.4:1, falla AA) ---------- */ html body .btn,html body a.btn,html body button.btn,html body.home.lean a.btn,html body.home.lean #registro button.btn, html body .copy,html body .new-tag,html body.home .top nav a.btn,html body .top nav .btn, html body .crk-consent button[data-crk="ok"]{background:var(--acc);color:var(--ink0)!important;border-color:var(--acc)} html body .btn:hover,html body.home.lean a.btn:hover{background:var(--acc-h);color:var(--ink0)!important;filter:none} html body .btn-ghost,html body a.btn-ghost,html body.home.lean a.btn-ghost{background:transparent;color:var(--tx)!important;border-color:var(--bd2)} html body .btn-ghost:hover{border-color:var(--tx)} :focus-visible{outline:2px solid var(--acc)!important;outline-offset:2px} /* ---------- Header / nav / menú móvil / topbar ---------- */ html body .top,html body.home.lean .ln-sticky,html body.home.lean .ln-nav,html body.home.lean .ln-topbar{background:rgba(11,13,26,.94);backdrop-filter:blur(12px);border-color:var(--bd)} html body.home.lean .ln-topbar{color:var(--tx3)} html body .top nav a,html body.home.lean .ln-nav a:not(.btn){color:var(--tx2)} html body .top nav a:hover,html body.home.lean .ln-nav a:not(.btn):hover{color:var(--tx)} html body .brand .logo-ink{display:none!important} html body .brand .logo-on-dark{display:block!important} html body .burger span,html body.home.lean .burger span{background:#fff} html body.home.lean .burger{background:transparent;border-color:var(--bd2)} @media (max-width:900px){ html body .top nav,html body.home.lean .ln-nav nav{background:#0E1020;border-bottom:1px solid var(--bd)} html body.home.lean .ln-nav nav a{color:var(--tx);border-top-color:var(--bd)} } .promo{background:#0E1020;color:var(--tx2);border-bottom:1px solid var(--bd)} /* ---------- Secciones: alternancia #0B0D1A / #0E1020 ---------- */ html body main>section:nth-of-type(even),html body.home.lean #cursos,html body.home.lean #faq, html body .cred,html body.home .cred,html body .th-sec:nth-of-type(even){background:var(--bg2)} html body .founder,html body.home .founder,html body.taller,html body .th-sec{background:var(--bg)} html body .th-hero,html body .ab-hero,html body .blog-hero,html body .post-hero-band,html body .s.ink,html body .dark{ background:radial-gradient(900px 420px at 85% 0%,rgba(1,174,253,.09),transparent 60%),var(--bg2);border-bottom:1px solid var(--bd)} /* ---------- Cards (todo lo que era background:#fff) ---------- */ html body .course,html body .post,html body .faq details,html body .qa,html body form,html body .tl .card,html body .win, html body .featured,html body .bcard,html body .bc-main,html body .toc-mobile,html body .post-side .toc,html body .side-course, html body .fchip,html body .bsearch,html body .price-card,html body .th-card,html body .th-form,html body .steps li,html body .stat, html body.home .hcard,html body.home.lean .ln-chip,html body.home.lean .ln-offer,html body.home.lean #registro,html body.home.lean .ln-pq li, html body .author,html body .cta-inline,html body .newsletter,html body .tbl tr{background:var(--card);color:var(--tx2);border-color:var(--bd);box-shadow:0 30px 60px -40px rgba(0,0,0,.8)} html body .course.feat,html body .side-course,html body .bc-main,html body .th-form{border-top:2px solid var(--acc)} html body .course.feat .ic{background:rgba(1,174,253,.10)} html body .course .meta span,html body .tags li,html body .tbl thead th,html body .prose code,html body .tldr{background:var(--bg2);border-color:var(--bd);color:var(--tx2)} html body .fchip.on{background:var(--acc);color:var(--ink0);border-color:var(--acc)} html body .post .th span{background:rgba(11,13,26,.88);color:#fff} html body .sug{background:rgba(146,42,253,.16);color:#C9A2FF} html body .pend{background:rgba(255,196,0,.14);color:#FFD566} html body.home.lean .ln-chip.ln-price{background:rgba(1,174,253,.08);border-color:rgba(1,174,253,.40)} html body.home.lean .ln-bar{background:rgba(1,174,253,.16)} html body.home.lean .ln-tag{border-color:var(--bd2);color:var(--tx2)} html body.home.lean .ln-seal{background:#070814;border-top:1px solid var(--bd)} html body.home.lean .ln-steps li{border-top-color:rgba(255,255,255,.55)} html body.home.lean .ln-s3-foot,html body.home.lean .ln-faq details,html body.home.lean .ln-faq details:last-child{border-color:var(--bd)} /* ---------- Texto secundario ---------- */ html body .s-head p,html body .course p,html body .post p,html body .faq p,html body .qa p,html body .bbody p,html body .f-body p, html body .byline,html body .author p,html body .dek,html body .lead,html body .note,html body .grid-head p,html body .reg-copy p{color:var(--tx2)} html body .fine,html body .turn,html body .opt,html body .crumbs,html body .crumbs ol,html body .crumbs a,html body.taller .crumbs, html body .cred-school,html body .toc a,html body .chip-name span,html body .stat span,html body .ln-mc,html body.home.lean .ln-fine, html body.home.lean .ln-foot{color:var(--tx3)} html body .crumbs [aria-current],html body.taller .crumbs a{color:var(--tx)} html body .aud-line{color:var(--tx2)} /* ---------- Precio: el tachado ($3,500) debe leerse ---------- */ html body .price s,html body .th-price s,html body.home.lean .ln-amount s,html body.home .p-was s,html body .cta-end .price s{ color:#A3A8BA;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.55);text-decoration-thickness:1.5px} html body.home.lean .ln-amount .off{background:rgba(1,174,253,.14);color:#5CCBFF} html body .price .now,html body .bc-main .now,html body.home.lean .ln-amount,html body .th-price b{color:#fff} /* ---------- FAQ ---------- */ html body .faq summary,html body.home.lean .ln-faq summary,html body .qa summary{color:var(--tx)} html body.home.lean .ln-faq summary:after,html body .faq summary::after{color:var(--acc)} html body.home.lean .ln-faq details p{color:var(--tx2)} html body.home .faq details{background:transparent;box-shadow:none} /* ---------- Formularios (AA + focus) ---------- */ html body input:not([type=checkbox]):not([type=radio]),html body select,html body textarea, html body.home.lean #registro input:not([type=checkbox]),html body.home.lean #registro select{ background-color:var(--bg2);color:#fff;border:1px solid #3A3F58;border-radius:10px;min-height:48px} html body input::placeholder,html body textarea::placeholder{color:#8E93A8} html body input:focus,html body select:focus,html body textarea:focus{outline:2px solid var(--acc)!important;outline-offset:1px;border-color:var(--acc);box-shadow:none} html body input[type=checkbox]{accent-color:var(--acc);width:20px;height:20px} html body form label,html body.home.lean #registro form label{color:var(--tx)} html body .check,html body.home.lean #registro .ln-check{color:var(--tx2)} html body .check a,html body.home.lean #registro .ln-check a,html body.home.lean .ln-fine a{color:var(--acc)} html body .form-err,html body.home.lean #registro .form-err{color:#FF8A80!important} html body .form-ok,html body.home.lean #registro .form-ok{color:#7EE2A8} html body .bsearch input{background:transparent;min-height:0;border:0} html body option{background:#0E1020;color:#fff} /* ---------- Blog: prosa ---------- */ html body .prose{color:var(--tx2)} html body .prose h2,html body .prose h3,html body .prose strong,html body .prose b{color:var(--tx)} html body .prose a:not(.btn){color:var(--acc);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(1,174,253,.5)} html body .prose a:not(.btn):hover{color:var(--acc-h)} html body .prose blockquote{color:var(--tx);border-left-color:var(--pur);background:rgba(255,255,255,.03);padding:10px 16px;border-radius:0 10px 10px 0} html body .code{background:#070814;border:1px solid var(--bd)} html body .tbl{border-color:var(--bd)} html body .tbl th,html body .tbl td{border-color:var(--bd)} /* Imágenes del blog (PNG fondo blanco): marco tipo card en vez de regenerar */ html body .post-hero,html body .prose img,html body .prose .post-fig img,html body .bthumb img,html body .f-img img,html body .post .th img{ border:1px solid var(--bd2);border-radius:14px;background:#fff;box-shadow:0 24px 50px -30px rgba(0,0,0,.9)} html body .post-hero{padding:0;overflow:hidden} html body .prose .post-fig figcaption{color:var(--tx3)} /* Componente curso en posts */ html body .prose .course-cta{background:var(--card);color:var(--tx2);border:1px solid var(--bd);border-top:2px solid var(--acc)} html body .prose .course-cta-title,html body .prose .course-cta p{color:var(--tx)} html body .prose .course-cta-note{color:var(--tx3)} html body .cta-inline{border-left-color:var(--acc)} /* ---------- Logos de empresas: monocromo claro ---------- */ html body.home.lean .ln-logos img,html body .logo-wall img,html body img.brand-logo{filter:grayscale(1) brightness(0) invert(1);opacity:.78} /* Virgin, 99 y Linio ya son #E6E8EF con huecos transparentes. El filtro aplana el script, los números y la L. */ html body .logo-wall img.brand-logo[src$="virgin-mobile.svg"]{filter:none;opacity:.85;width:auto;height:28px;max-height:28px;max-width:160px;aspect-ratio:98/36.83} html body .logo-wall img.brand-logo[src$="linio.svg"]{filter:none;opacity:.85;width:auto;height:28px;max-height:28px;max-width:160px;aspect-ratio:189.38/82.93} html body .logo-wall img.brand-logo[src$="99.svg"]{filter:none;opacity:.85;width:30px;height:30px;max-width:30px;max-height:30px;aspect-ratio:1} html body .logo-wall div{background:var(--card);color:var(--tx2);border-color:var(--bd)} html body.home.lean .ln-wm,html body .wm-text{color:var(--tx2);opacity:.85} html body.home.lean .ln-sep{background:var(--bd2)} /* ---------- Fotos ---------- */ html body .photo-real,html body.home.lean .ln-idrow img,html body .author img{border:1px solid var(--bd2)} html body.home .founder .stat b,html body.home.lean .ln-metrics b{color:#fff} /* ---------- Footer ---------- */ html body footer,html body.home.lean .ln-foot{background:#070814;color:var(--tx3);border-top:1px solid var(--bd)} html body footer a,html body.home.lean .ln-foot a{color:var(--tx2)} html body footer a:hover,html body.home.lean .ln-foot a:hover{color:#fff} /* ---------- Barra CTA móvil / WhatsApp / consent ---------- */ html body.home.lean #cta-movil{background:rgba(11,13,26,.96);border-top:1px solid var(--bd)} html body.home.lean #cta-movil .ln-wa{background:var(--card);border-color:var(--bd2);color:#fff} html body .crk-wa{background:var(--card);box-shadow:0 0 0 2px var(--acc),0 14px 30px -12px rgba(0,0,0,.8)} html body .crk-consent{background:var(--card);border:1px solid var(--bd)} /* ---------- Legales (style.css) ---------- */ html body.legal-page,html body.legal-page main,html body .legal{background:var(--bg);color:var(--tx2)} html body.legal-page a,html body .legal a{color:var(--acc)} /* SVG/íconos que usan currentColor heredan el color claro; los que usan fill fijo ink: */ html body svg [fill="#0E1020"],html body svg [fill="#0e1020"]{fill:#fff} html body svg [stroke="#0E1020"],html body svg [stroke="#0e1020"]{stroke:#fff} /* Acentos púrpura mínimos: barra de 28px sobre H2 de cierre */ html body .cta-end h2::before,html body.home.lean .ln-close h2::before{content:"";display:block;width:28px;height:2px;background:var(--pur);margin-bottom:16px} /* clip, not hidden: hidden turns the other axis into a scroll container and position:sticky on the header never sticks. */ html,body{overflow-x:clip} /* ---------- Páginas de curso (.th-*) ---------- */ html body .th-sec .lead,html body .th-sec p,html body.taller .th-note,html body.taller .th-card .th-note,html body .th-list li span,html body .th-path span{color:var(--tx2)} html body .th-card{border-top-color:rgba(255,255,255,.55);background:transparent;box-shadow:none} html body .th-list,html body .th-list li{border-color:var(--bd);color:var(--tx)} html body .th-path a{background:var(--card);border-color:var(--bd);color:var(--tx)} html body .th-path a[aria-current="page"]{border-color:var(--acc)} /* ---------- Legales (style.css: legado Orbitron/gradiente) ---------- */ html body.legal-page h1,html body.legal-page h2,html body.legal-page h3,html body.legal-page .eyebrow{font-family:"Plus Jakarta Sans",Inter,sans-serif} html body.legal-page .grad{background:none;color:var(--acc);-webkit-text-fill-color:currentColor} html body.legal-page .bar{background:var(--acc)} html body.legal-page .site-header,html body.legal-page .site-footer{background:#070814;border-color:var(--bd)} html body.legal-page .site-header{position:sticky;top:0;z-index:40;background:#070814} html body.legal-page .doc section,html body.legal-page .doc h2{scroll-margin-top:96px} html body.legal-page .nav a{color:var(--tx2)} /* ---------- Bloques que usaban background:var(--ink) (ahora --ink es blanco): fijarlos a superficie oscura ---------- */ html body .blog-cta,html body .cta-end,html body .s.ink,html body .ab-hero,html body .blog-hero,html body .post-hero-band{background-color:var(--bg2)} html body .blog-cta,html body .cta-end{background:var(--card);border:1px solid var(--bd);border-top:2px solid var(--acc)} html body .tl .co{color:var(--tx2)} html body .chip-name{background:rgba(11,13,26,.88);border:1px solid var(--bd)} html body .badge-urg{color:#5CCBFF} html body .cta-end ul,html body .cta-end li{color:var(--tx2)} /* Bug actual: