/* ============================================================ TWL — FIX DE CONTRASTE GLOBAL (sitio dark, tema padre pinta #1e1e1e) ------------------------------------------------------------ El sitio es ~95% oscuro (#0a0a0a). El tema padre "autoparts" pinta el texto de contenido en .scheme_default → #1e1e1e (oscuro sobre oscuro = ilegible). Este archivo: A) Fuerza texto CLARO en el contenido de editor/legales y en las plantillas que NO gestionan su propio color (page_content_wrap, garantía, tecnología, etc.). B) PROTEGE las secciones de fondo CLARO (cards de servicios, hubs, blog single-post, etc.) devolviéndoles texto OSCURO con MAYOR especificidad, para no introducir el problema inverso. Regla de oro: NO tocar la HOME (.home …) — gestiona su propio color. Carga al final (prioridad 9999) para vencer a .scheme_default sin abusar de !important. ============================================================ */ /* ============================================================ SECCIÓN A — TEXTO CLARO SOBRE FONDO OSCURO ============================================================ */ /* A1 · Contenido de página (plantillas que viven en page_content_wrap y NO definen su propio color: garantía, tecnología, legales en .content_wrap, etc.). Las secciones de fondo claro se re-protegen en la SECCIÓN B con mayor especificidad. */ body:not(.home) .page_content_wrap :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, dt){ color:#ededf0; } /* A2 · Contenido de editor (blog clásico/legales en .post_content) — inline + tablas + spans heredados del editor. */ body:not(.home) :is(.post_content, .entry-content) :is(p, li, b, strong, em, dt, td, th, figcaption, blockquote, span){ color:#e4e4e8; } body:not(.home) :is(.post_content, .entry-content) :is(a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, li a){ color:#ff8a3a; } body:not(.home) :is(.post_content, .entry-content) :is(a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover){ color:#ffa760; } /* A3 · Secciones/componentes oscuros conocidos (footer, hubs, CTAs). */ :is(.twl-footer-final, .twl-footer-v2, .twl-hub-section, .services-section, .before-after-section-vc, .rs-bg-black, .twl-en-hero, .twl-en-section--alt, .twl-en-warranty-block, .twl-equipo-philosophy, .twl-equipo-training, .twl-tech-lab, .twl-garantia-faq, .twl-garantia-qa, .twl-guias-cta, .twl-blog__sidebar-cta, .twl-ct-split__info) :is(h1, h2, h3, h4, h5, h6, p, li, dt, b, strong, em, blockquote){ color:#ededf0; } :is(.twl-footer-final, .twl-footer-v2, .twl-hub-section, .services-section, .before-after-section-vc, .twl-guias-cta) :is(a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, li a){ color:#fff; } /* A4 · Plantillas FULL-DARK que no usan colores propios (todo su texto debe ser claro: títulos, párrafos, spans, enlaces y botones que el tema padre dejó en #1e1e1e). Verificado: estas plantillas no tienen secciones de fondo claro. */ :is(.twl-garantia, .twl-tecnologia) :is(h1, h2, h3, h4, h5, h6, p, li, dt, span, b, strong, em, blockquote, figcaption, small){ color:#ededf0; } :is(.twl-garantia, .twl-tecnologia) :is(a, li a){ color:#ff8a3a; } :is(.twl-garantia, .twl-tecnologia) a:hover{ color:#ffa760; } /* Botones outline (ghost/secondary) en los CTA de garantía/tecnología: su texto se PINTA con -webkit-text-fill-color (#1e1e1e) → hay que fijar ese property, no basta `color`. El --primary (naranja sólido) → A6. */ :is(.twl-garantia, .twl-tecnologia) :is(.twl-btn--ghost, .twl-btn--secondary){ color:#ededf0; -webkit-text-fill-color:#ededf0; } :is(.twl-garantia, .twl-tecnologia) :is(.twl-btn--ghost, .twl-btn--secondary) :is(span, strong, b){ color:#ededf0; -webkit-text-fill-color:#ededf0; } /* A5 · Inline // y CTAs sueltos dentro de secciones OSCURAS de plantillas de servicio que el padre pintó #1e1e1e. El cabecero del comparador Diamond Cut (.twl-dc-versus__header span) tiene una regla propia de #2a2a2a en twl-diamond-cut.css (0,2,1) → se necesita .twl-page de prefijo para vencerla (0,3,1). */ .twl-page :is(.wr-problem, .twl-vh__hero) :is(strong, b, em, span){ color:#ededf0; } /* dc-versus: el cabecero del comparador es OSCURO pero vive dentro de .twl-dc-gallery (clara). twl-diamond-cut.css lo pinta #2a2a2a vía `.twl-dc .twl-dc-gallery span` (0,2,1). .twl-page (MAIN) + .twl-dc-gallery (SECTION) + .twl-dc-versus__header (DIV) son 3 ancestros → 0,3,1: */ .twl-page .twl-dc-gallery .twl-dc-versus__header :is(span, strong, b, em){ color:#ededf0; } .twl-page .twl-diff-note__cta{ color:#ff8a3a; } .twl-page .twl-diff-note__cta:hover{ color:#ffa760; } /* A6 · Botón primario "tb-" (cambio cubiertas / balanceo): la variante con fondo translúcido sobre sección oscura quedaba con texto #1c1c1c. */ .tb-btn--primary{ color:#fff; } /* A7 · Utilitaria opt-in para secciones oscuras nuevas. */ .twl-on-dark :is(h1, h2, h3, h4, h5, h6, p, li, dt, b, strong, em, blockquote){ color:#ededf0; } .twl-on-dark :is(a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, li a){ color:#fff; } /* A8 · Reviews en páginas internas (.wl-rev = fondo OSCURO fuera de la home). En la home, .home .wl-rev (más abajo) las deja oscuras. */ body:not(.home) .wl-rev__card :is(.wl-rev__card-text, .wl-rev__card-name, .wl-rev__card-role, p, h3, h4, strong, b, li, span){ color:#e8e8ec !important; } body:not(.home) .wl-rev__card :is(.wl-rev__card-more, .wl-rev__card-date){ color:#ff8a3a !important; } /* A9 · Bloques de enlaces relacionados/recientes en posts (fondo oscuro). */ :is(.twl-af-orphan-block, .twl-404__recent) :is(p, li){ color:#ededf0; } :is(.twl-af-orphan-block, .twl-404__recent) :is(a, li a){ color:#ff8a3a; } /* A10 · Nav (texto gris claro sobre header oscuro). */ #navLinks a:not(.active):not(.nav-cta){ color:#a8a8a8; } #navLinks a:not(.active):not(.nav-cta)::before{ background:#a8a8a8; } /* ============================================================ SECCIÓN B — PROTEGER FONDOS CLAROS (texto OSCURO) ------------------------------------------------------------ La regla A1 (.page_content_wrap …) y A2 alcanzan, por herencia, las secciones de FONDO CLARO de las plantillas (cards de servicios, hubs, blog single-post). Aquí se les DEVUELVE su texto oscuro nativo con MAYOR especificidad (selector contenedor + :is(tags) ≥ 0,2,1) para vencer a la regla clara (0,1,1) SIN !important. ============================================================ */ /* B1 · Componentes compartidos de fondo CLARO presentes en TODAS las páginas de servicio (twl-service-blocks): casos destacados, recursos, otros servicios, marcas. */ :is(.twl-featured-cases, .twl-resources, .twl-other-services, .twl-brand-links, .twl-related-guides, .twl-cluster-seo) :is(h1, h2, h3, h4, h5, h6, p, li, dt, blockquote, figcaption, span, strong, b, em){ color:#1a1a1a; } :is(.twl-featured-cases, .twl-resources, .twl-other-services, .twl-brand-links, .twl-related-guides, .twl-cluster-seo) :is(.twl-other-services__card-desc, .twl-featured-cases__subtitle, .twl-other-services__subtitle, .twl-resources__col p, p.is-muted){ color:#555; } /* Flecha "→" de recursos: gris claro (#ccc) sobre fondo claro → oscura. El glifo se pinta con -webkit-text-fill-color, hay que fijar ambos. */ :is(.twl-resources, .twl-related-guides) .twl-resources__link-arrow{ color:#7a3d08; -webkit-text-fill-color:#7a3d08; } /* Enlaces dentro de los componentes claros: naranja oscuro legible. */ :is(.twl-featured-cases, .twl-resources, .twl-other-services, .twl-brand-links, .twl-related-guides, .twl-cluster-seo) :is(a, li a){ color:#c2510a; } /* B2 · Secciones claras específicas por plantilla. Diamond Cut (dc): proceso, galería, cuándo-no. OJO: NO incluir .twl-when-section — es CONTEXTUAL (clara en dc, pero OSCURA en reparacion-llantas-valencia) y gestiona su propio color. */ :is(.twl-dc-proceso, .twl-dc-gallery, .twl-dc-when-not) :is(h1, h2, h3, h4, h5, h6, p, li, dt, blockquote, figcaption, span, strong, b, em){ color:#1a1a1a; } :is(.twl-dc-proceso, .twl-dc-gallery, .twl-dc-when-not) :is(a, li a){ color:#c2510a; } /* Pintura robotizada (rp): system, custom, faq (fondo #f2f1ed/#fff). */ :is(.rp-system, .rp-custom, .rp-faq) :is(h1, h2, h3, h4, h5, h6, p, li, dt, blockquote, figcaption, span, strong, b, em){ color:#1a1a1a; } :is(.rp-system, .rp-custom, .rp-faq) :is(.rp-custom__card-desc, .rp-process-subtitle, p.is-muted){ color:#555; } :is(.rp-system, .rp-custom, .rp-faq) :is(a, li a){ color:#c2510a; } /* Mirror finish (mf): SOLO las secciones --alt claras (statement, proof, proceso) y faq. OJO: .mf-diff y .mf-gallery son OSCURAS → excluidas. */ :is(.mf-statement, .mf-proof, .mf-proceso, .mf-faq) :is(h1, h2, h3, h4, h5, h6, p, li, dt, blockquote, figcaption, span, strong, b, em){ color:#1a1a1a; } :is(.mf-statement, .mf-proof, .mf-proceso, .mf-faq) :is(.mf-process-subtitle, p.is-muted){ color:#555; } :is(.mf-statement, .mf-proof, .mf-proceso, .mf-faq) :is(a, li a){ color:#c2510a; } /* Cambio cubiertas / balanceo (tb): secciones marcadas --light. */ .tb-section--light :is(h1, h2, h3, h4, h5, h6, p, li, dt, blockquote, figcaption, span, strong, b, em){ color:#1a1a1a; } .tb-section--light :is(a, li a){ color:#c2510a; } /* Reparación/soldadura (wr): diagnosis, welding, faq (fondo claro). OJO: .wr-problem es OSCURA → excluida (su se aclara en A5). */ :is(.wr-diagnosis, .wr-welding, .wr-faq) :is(h1, h2, h3, h4, h5, h6, p, li, dt, blockquote, figcaption, span, strong, b, em){ color:#1a1a1a; } :is(.wr-diagnosis, .wr-welding, .wr-faq) :is(a, li a){ color:#c2510a; } /* B3 · Blog single-post (.twl-sp = layout de FONDO BLANCO). Todo su texto debe ser oscuro. Excepción: .twl-af-orphan-block (oscuro, ya tratado en A9) y la barra de progreso. */ .twl-sp :is(h1, h2, h3, h4, h5, h6, p, li, dt, blockquote, figcaption, span, strong, b, em, td, th){ color:#1a1a1a; } .twl-sp :is(a, li a){ color:#c2510a; } .twl-sp .twl-sp__sidebar-label, .twl-sp .twl-sp__more-heading, .twl-sp .twl-sp__title{ color:#1a1a1a; } /* Re-excepción: bloque huérfano oscuro dentro del blog mantiene texto claro. */ .twl-sp .twl-af-orphan-block :is(p, li, span, strong, b){ color:#ededf0; } .twl-sp .twl-af-orphan-block :is(a, li a){ color:#ff8a3a; } /* B4 · Sidebar del blog (fondo claro). */ .sidebar_inner :is(h1, h2, h3, h4, h5, h6, p, li, dt, span, strong, b, em){ color:#1a1a1a; } .sidebar_inner :is(a, li a){ color:#c2510a; } /* ============================================================ SECCIÓN C — HOME (NO TOCAR el resto; solo reviews de fondo claro) ============================================================ */ .home .wl-rev :is(.wl-rev__card-text, .wl-rev__card-name, .wl-rev__card-role, h1, h2, h3, h4, h5, h6, p, li, b, strong, em, span){ color:#1e1e1e !important; } .home .wl-rev .wl-rev__count{ color:#555 !important; } .home .wl-rev .wl-rev__overline{ color:#a8430a !important; }