/* ═══════════════════════════════════════════════════════════════════════════
   YUZIOT — Tema claro de TODO el sitio (2026-09-12)
   Alcance: `body.yz-light` (las 11 páginas lo llevan).

   REVERSIBLE POR DISEÑO: quitar el <link> de esta hoja y la clase `yz-light`
   del <body> devuelve el sitio oscuro original. Esta hoja no modifica ninguna
   regla de styles.css / pages.css / enhance.css: solo redeclara variables y
   escribe overrides con alcance propio.

   Mecanismo (el mismo que estrenó services.css el 2026-09-12, generalizado):
   se redeclaran las variables del sitio dentro del alcance claro, así TODA
   regla existente que pinte con var(--color-*) cambia sola. Lo que queda son
   tres cosas: (1) el CHROME —navbar, dropdown, footer, modal y el dashboard
   del hero—, que trae literales oscuros y se repinta pieza por pieza, (2) los
   demás literales oscuros/cian horneados en reglas visibles, y (3) el acento
   como TEXTO, que sobre fondo tintado baja a #005a6a para cumplir AA.

   2026-09-13: SE FUERON LAS ISLAS OSCURAS. Hasta el 12 sep el chrome y las
   pantallas de producto recuperaban acá el set de variables oscuro original;
   el sitio quedaba con una banda negra arriba, otra abajo y un panel negro
   sobre el hero claro. Por decisión del dueño ninguna zona queda oscura: el
   bloque 2 pasó de devolver variables a pintar en claro, y las capturas de la
   app se retomaron en el tema Claro (Fase A2).

   Paleta de referencia: el tema Claro de la app (app/components/tokens.css,
   bloque [data-theme="light"]).
   Contraste medido (WCAG 1.4.3, AA ≥ 4,5:1) sobre el fondo tintado #dde0e4:
   texto #15171b 13,6:1 · #393c42 8,4:1 · #4f535a 5,8:1 · #5a5f67 4,9:1 ·
   acento de texto #005a6a 5,9:1 · tinta de hover #00424e 8,4:1 ·
   éxito #006e37 4,8:1 · blanco sobre el teal #006e81 5,9:1.
   El acento #006e81 mide 4,47:1 sobre #dde0e4 — por eso NUNCA es texto sobre
   la página: se reserva para superficies (botones, bordes, focos) y para texto
   sobre blanco (5,9:1). El cian decorativo #27c6dc jamás es texto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   1 · Variables del tema claro
   ───────────────────────────────────────────────────────────────────────────── */
body.yz-light {
    --color-bg-primary: #dde0e4;
    --color-bg-secondary: #e8eaec;
    --color-bg-tertiary: #eff0f2;
    --color-bg-card: #ffffff;
    --color-bg-elevated: #ffffff;

    --color-accent-primary: #006e81;
    --color-accent-secondary: #005a6a;
    --color-accent-tertiary: #27c6dc;
    --color-accent-glow: rgba(0, 110, 129, 0.18);
    --color-accent-subtle: rgba(0, 110, 129, 0.10);

    --color-success: #006e37;
    --color-success-glow: rgba(0, 110, 55, 0.18);
    --color-warning: #8f6000;
    --color-error: #cd243f;

    --color-text-primary: #15171b;
    --color-text-secondary: #393c42;
    --color-text-tertiary: #4f535a;
    /* #6b7079 (el muted del tema claro de la app) mide 3,76:1 sobre #dde0e4 y
       reprueba AA; #5a5f67 da 4,9:1 y conserva el mismo gris azulado. */
    --color-text-muted: #5a5f67;

    --color-border: rgba(20, 22, 28, 0.14);
    --color-border-hover: rgba(0, 110, 129, 0.40);
    --color-border-active: var(--color-accent-primary);

    /* styles.css resuelve --gradient-* UNA sola vez en :root (con el cian
       original); redeclarar --color-accent-primary acá NO los re-resuelve, hay
       que reescribir cada gradiente entero. */
    --gradient-primary: linear-gradient(135deg, #006e81 0%, #005a6a 100%);
    --gradient-dark: linear-gradient(180deg, #eff0f2 0%, #dde0e4 100%);
    --gradient-card: linear-gradient(145deg, #ffffff 0%, #eff0f2 100%);
    --gradient-glow: radial-gradient(ellipse at center, rgba(0, 110, 129, 0.12) 0%, transparent 70%);

    /* Sombras suaves: sin neón (las originales son negras al 30-80%) */
    --shadow-sm: 0 1px 2px rgba(18, 20, 24, 0.10);
    --shadow-md: 0 1px 2px rgba(18, 20, 24, 0.10), 0 2px 4px rgba(18, 20, 24, 0.14);
    --shadow-lg: 0 4px 10px rgba(18, 20, 24, 0.12);
    --shadow-xl: 0 10px 24px rgba(18, 20, 24, 0.14);
    --shadow-glow: 0 4px 14px rgba(0, 110, 129, 0.18);
    --shadow-glow-sm: 0 2px 8px rgba(0, 110, 129, 0.16);

    /* Tinta de acento para estados presionados/hover de texto (8,4:1). No
       existe en styles.css: nace acá y solo la usa esta hoja. */
    --yz-accent-ink: #00424e;

    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   2 · Chrome claro (13 sep 2026) — el sitio ya no tiene islas oscuras
   Hasta el 12 sep el chrome (navbar, dropdown, footer, modal) y las pantallas
   de producto (#yzDash, el video de marca) recuperaban acá el set OSCURO
   original. Convivían dos temas en la misma página y el corte se notaba: una
   banda negra arriba, otra abajo y un panel negro flotando sobre el hero claro.
   Decisión del dueño (13 sep 2026): NINGUNA zona del sitio queda oscura.
   Este bloque reemplaza a aquel: en vez de devolver variables, pinta cada
   pieza del chrome con la paleta clara. Lo único que sigue siendo contenido
   oscuro es el video de marca de gracias.html, y se enmarca en blanco.
   ───────────────────────────────────────────────────────────────────────────── */

/* 2.1 · Navbar ------------------------------------------------------------- */
body.yz-light .navbar {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(18, 20, 24, 0.06);
}

body.yz-light .navbar.scrolled {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 2px 12px rgba(18, 20, 24, 0.10);
}

/* La línea que barre el borde inferior al hacer scroll era cian sobre negro. */
body.yz-light .navbar::after {
    background: linear-gradient(90deg,
        rgba(0, 110, 129, 0) 0%,
        rgba(0, 110, 129, 0.10) 24%,
        rgba(0, 110, 129, 0.70) 50%,
        rgba(0, 110, 129, 0.10) 76%,
        rgba(0, 110, 129, 0) 100%);
}

@media (prefers-reduced-motion: reduce) {
    body.yz-light .navbar.scrolled::after {
        background: rgba(0, 110, 129, 0.22);
    }
}

body.yz-light .nav-link:hover,
body.yz-light .nav-link.active {
    color: var(--color-accent-secondary);
}

/* El ítem de nav de la página vigente: `updateActiveNavLink` (main.js) limpia
   la clase .active en cada scroll cuando la página tiene section[id], así que
   el subrayado vive en una clase propia que nadie toca. */
body.yz-light .nav-link-current {
    color: var(--color-accent-secondary);
}

body.yz-light .nav-link-current::after {
    width: 100%;
}

/* El panel de navegación móvil (≤900px) tomaba --color-bg-primary: sobre claro
   eso es el mismo gris de la página y el panel no se despegaba del contenido. */
@media (max-width: 900px) {
    body.yz-light .nav-menu {
        background: var(--color-bg-card);
        box-shadow: -12px 0 32px rgba(18, 20, 24, 0.16);
    }
}

/* Dropdown «Empresa». En ≤900px el menú se despliega DENTRO del panel móvil
   (transparente, sin borde ni sombra), así que la superficie propia se declara
   solo en escritorio; los colores de los links valen en los dos anchos. */
@media (min-width: 901px) {
    body.yz-light .dropdown-menu {
        background: var(--color-bg-card);
        border: 1px solid var(--color-border);
        box-shadow: 0 10px 30px rgba(18, 20, 24, 0.16);
    }
}

/* Los links del dropdown y del footer no llevan clase, así que el bloque 3
   (`a:not([class])` → acento) los alcanza con la MISMA especificidad y, al
   venir después, ganaba: salían teal en reposo. Se califican con su ancestro
   (.navbar / .footer) para que el reposo sea texto y el acento quede para el
   hover, que es donde el acento significa algo. */
body.yz-light .navbar .dropdown-menu a {
    color: var(--color-text-secondary);
}

body.yz-light .navbar .dropdown-menu a:hover {
    color: var(--color-accent-secondary);
    background: var(--color-bg-tertiary);
}

/* Botón APP YUZIOT: era un chip gris pizarra (rgba(30,41,59,.6)) con borde
   cian. En claro es un outline teal que se rellena al pasar el mouse. */
body.yz-light .btn-app-yuziot {
    background: transparent;
    border-color: var(--color-accent-primary);
    color: var(--color-accent-secondary);
}

body.yz-light .btn-app-yuziot .base-device {
    color: var(--color-accent-secondary);
}

body.yz-light .btn-app-yuziot:hover {
    background: var(--color-accent-primary);
    color: #ffffff;
    box-shadow: var(--shadow-glow-sm);
}

body.yz-light .btn-app-yuziot:hover .base-device,
body.yz-light .btn-app-yuziot:hover .inner-user {
    color: #ffffff;
}

/* 2.2 · Footer ------------------------------------------------------------- */
body.yz-light .footer {
    background: var(--color-bg-tertiary);
    border-top: 1px solid var(--color-border);
}

body.yz-light .footer .footer-column a,
body.yz-light .footer .footer-legal a {
    color: var(--color-text-secondary);
}

body.yz-light .footer .footer-column a:hover,
body.yz-light .footer .footer-legal a:hover {
    color: var(--color-accent-secondary);
}

body.yz-light .social-link {
    background: #e3e5e8;
    border-color: var(--color-border);
    border-radius: 50%;
}

body.yz-light .social-link svg {
    color: var(--color-text-primary);
}

/* 2.3 · Modal de contacto -------------------------------------------------- */
body.yz-light .contact-modal-overlay {
    background: rgba(10, 12, 16, 0.55);
}

body.yz-light .contact-modal-content {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    box-shadow: 0 24px 60px rgba(18, 20, 24, 0.28);
}

body.yz-light .contact-modal-close {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

body.yz-light .contact-modal-close:hover {
    color: #ffffff;
}

/* Los campos son blancos sobre un modal blanco: el borde sube a 0,22 para que
   la caja exista, y el halo de foco a 0,18 para que se vea sobre claro.
   `background-color` y no `background`: el shorthand borraría la flecha del
   <select>, que viaja como background-image en su propia regla. */
body.yz-light .contact-modal-form input,
body.yz-light .contact-modal-form select,
body.yz-light .contact-modal-form textarea {
    background-color: var(--color-bg-card);
    border-color: rgba(20, 22, 28, 0.22);
}

body.yz-light .contact-modal-form input:focus,
body.yz-light .contact-modal-form select:focus,
body.yz-light .contact-modal-form textarea:focus {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 3px rgba(0, 110, 129, 0.18);
}

/* 2.4 · Dashboard del hero (#yzDash) --------------------------------------- */
body.yz-light .dashboard-mockup {
    background: var(--color-bg-card);
    border-color: var(--color-border);
    box-shadow: 0 18px 40px rgba(18, 20, 24, 0.16);
}

body.yz-light .mockup-header {
    background: var(--color-bg-tertiary);
    border-bottom-color: var(--color-border);
}

body.yz-light .mockup-title {
    color: var(--color-text-secondary);
}

body.yz-light .yz-dash-live {
    color: var(--color-success);
    border-color: rgba(0, 110, 55, 0.30);
    background: rgba(0, 110, 55, 0.12);
}

body.yz-light .yz-live-dot {
    box-shadow: 0 0 6px rgba(0, 110, 55, 0.45);
}

/* El ítem activo del sidebar era un chip teal sólido con el glifo en el gris
   de la página (4,47:1). En claro se lee mejor al revés: glifo teal sobre el
   tinte del acento, igual que el ítem activo de la app. */
body.yz-light .mockup-sidebar .sidebar-item.active {
    background: rgba(0, 110, 129, 0.14);
    color: var(--color-accent-secondary);
    box-shadow: none;
}

body.yz-light .yz-gauge-track {
    stroke: #e3e5e8;
}

/* Los glows de neón (drop-shadow del acento) ensucian sobre claro. */
body.yz-light .yz-gauge-fill,
body.yz-light .yz-chart-line,
body.yz-light .yz-chart-dot {
    filter: none;
}

body.yz-light .yz-kpi,
body.yz-light .yz-dash-chart,
body.yz-light .yz-feed-row {
    background: #f6f7f8;
}

body.yz-light .yz-feed-dot.warn {
    box-shadow: 0 0 6px rgba(143, 96, 0, 0.30);
}

body.yz-light .yz-feed-dot.ok {
    box-shadow: 0 0 6px rgba(0, 110, 55, 0.30);
}

/* Dos textos que venían del token más tenue del set: sobre claro toman el
   terciario (#4f535a, 5,8:1 sobre el fondo tintado y ~7:1 sobre las filas del
   feed), que ya es un token del mismo set. */
body.yz-light .footer-bottom p,
body.yz-light .yz-feed-time {
    color: var(--color-text-tertiary);
}

/* 2.5 · Video de marca de gracias.html ------------------------------------- */
/* Es el único contenido oscuro que queda en el sitio (el video mismo). En vez
   de una isla, se enmarca: matte blanco, borde sutil y radio, para que se lea
   como una pieza apoyada en la página y no como un agujero negro. */
body.yz-light .thank-you-brand-motion {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 10px;
    box-shadow: var(--shadow-lg);
}

body.yz-light .thank-you-brand-video {
    border-radius: var(--radius-lg);
}

body.yz-light .thank-you-brand-motion::before {
    background: none;
}

/* 2.6 · Marco de las capturas de módulos ----------------------------------- */
/* Desde el 13 sep las capturas son del tema CLARO de la app: el marco ya no
   apoya una imagen oscura, la continúa. */
body.yz-light .panel-visual,
body.yz-light .bento-visual {
    border: 1px solid rgba(20, 22, 28, 0.14);
    border-radius: var(--radius-xl);
    box-shadow: 0 6px 18px rgba(18, 20, 24, 0.14);
    background: #e8eaec;
}

body.yz-light .panel-visual img,
body.yz-light .bento-visual img {
    border-radius: inherit;
    display: block;
}

/* La marca de agua del isotipo (enhance.css) es blanca con mix-blend-mode:
   screen, pensada para vivir encima de una captura oscura. Sobre las capturas
   claras el screen la borra: pasa a tinta oscura en multiply. */
body.yz-light .modules-showcase .panel-visual::after,
body.yz-light .bento-visual::after {
    background-color: rgba(20, 22, 28, 0.55);
    mix-blend-mode: multiply;
    opacity: 0.16;
}

body.yz-light .modules-showcase .panel-visual:hover::after {
    opacity: 0.26;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3 · El acento como TEXTO baja a #005a6a (5,9:1 sobre el fondo tintado)
   Solo las reglas vivas: las que pintan texto o icono con el acento. Desde el
   13 sep valen en TODO el sitio, chrome incluido: ya no hay isla que devuelva
   el cian.
   ───────────────────────────────────────────────────────────────────────────── */
body.yz-light a:not([class]),
body.yz-light .btn-secondary:hover,
body.yz-light .hero-badge,
body.yz-light .section-tag,
body.yz-light .bento-tag,
body.yz-light .bento-number,
body.yz-light .module-tab.active .tab-number,
body.yz-light .service-card-icon,
body.yz-light .float-card svg,
body.yz-light .industry-icon svg,
body.yz-light .hero-chips li i,
body.yz-light .content-section h2,
body.yz-light .content-section a,
body.yz-light .info-card h3,
body.yz-light .blog-image,
body.yz-light .blog-tag,
body.yz-light .docs-link {
    color: var(--color-accent-secondary);
}

body.yz-light a:not([class]):hover,
body.yz-light .content-section a:hover {
    color: var(--yz-accent-ink);
}

/* El halo de acento sobre texto se lee borroso en claro. */
body.yz-light .content-section a:hover {
    text-shadow: none;
}

body.yz-light .value-icon svg,
body.yz-light .docs-icon svg,
body.yz-light .support-icon svg,
body.yz-light .thank-you-motion-fallback {
    stroke: var(--color-accent-secondary);
}

/* Títulos resaltados: el original los pinta con el gradiente recortado al texto
   (+ shimmer de enhance.css) o con un glow cian. En claro van sólidos. */
body.yz-light .page-title .highlight,
body.yz-light .thank-you-content h1 .highlight {
    color: var(--color-accent-secondary);
    text-shadow: none;
}

body.yz-light .section-title .highlight,
body.yz-light .title-line.highlight {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--color-accent-secondary);
    animation: none;
}

/* .btn-primary pinta su texto con var(--color-bg-primary): en claro eso es
   #dde0e4 y queda ilegible sobre el teal. Blanco sobre #006e81 da 5,9:1.
   Vale también dentro del modal: su botón Enviar ya no vuelve al cian. */
body.yz-light .btn-primary,
body.yz-light .btn-primary:hover,
body.yz-light .skip-link {
    color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4 · Literales oscuros o cian horneados en reglas visibles sobre claro
   (inventario: grep de #hex y rgba() en styles.css, pages.css y enhance.css)
   ───────────────────────────────────────────────────────────────────────────── */

/* 4.1 · Hero: la retícula cian al 3% no existe sobre claro; la banda del hero
   toma el gradiente claro para que no arranque como un lienzo plano. */
body.yz-light .hero {
    background: var(--gradient-dark);
}

body.yz-light .hero-grid-overlay {
    background-image:
        linear-gradient(rgba(20, 22, 28, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 22, 28, 0.055) 1px, transparent 1px);
}

/* Los 0/1 flotantes eran cian con resplandor sobre negro: sobre claro quedaban
   sucios, y el 12 sep se APAGARON enteros. Vuelven el 14 sep 2026, pedidos por el
   dueño, pero en su registro: tinta de marca sin resplandor y con el contenedor
   al 38 % de opacidad. Los fotogramas de `floatBinary` mueven la opacidad entre
   0,1 y 0,4, así que sobre el fondo #dde0e4 lo que se ve termina entre 0,038 y
   0,152 de #006e81: en su punto más alto el pixel baja unos 30 tonos de rojo
   —se lee— y en el más bajo unos 8 —se va—. Presente, nunca protagonista. La opacidad vive en el
   CONTENEDOR (un solo mando) y no por partícula, porque la de cada una la pisa
   la animación. */
body.yz-light #particles-container {
    display: block;
    opacity: 0.38;
}

body.yz-light .binary-particle {
    color: var(--color-accent-primary);
    text-shadow: none;
}

body.yz-light .scroll-line {
    background: linear-gradient(to bottom, var(--color-accent-secondary), transparent);
}

/* 4.2 · Tabs de módulos */
body.yz-light .module-tab.active {
    background: linear-gradient(135deg, rgba(0, 110, 129, 0.12) 0%, #ffffff 100%);
    border-color: var(--color-accent-primary);
    box-shadow: var(--shadow-glow-sm);
}

body.yz-light .panel-visual img[data-gallery="gallery"]:hover {
    box-shadow: 0 10px 26px rgba(18, 20, 24, 0.20);
}

body.yz-light .panel-visual img[data-gallery="gallery"]::after {
    background: rgba(0, 110, 129, 0.10);
}

/* 4.3 · Bento móvil */
body.yz-light .bento-card {
    background: #ffffff;
    border: 1px solid rgba(20, 22, 28, 0.14);
    box-shadow: 0 10px 24px rgba(18, 20, 24, 0.14);
}

body.yz-light .bento-tag {
    border: 1px solid rgba(0, 110, 129, 0.30);
}

/* `initBentoScroll` (main.js) pinta el borde de la tarjeta del carrusel con un
   estilo EN LÍNEA —cian 0,2 la que duerme, cian 0,6 la centrada—, y lo en línea
   le gana a cualquier regla: sobre claro salía un contorno cian encendido. Se
   corrige con `!important` y se conserva la señal de "tarjeta centrada"
   distinguiendo el valor que el propio JS escribe (ambos motores serializan
   `rgba(0, 229, 255, 0.6)` con ese formato exacto; verificado en Chromium y
   WebKit). El arreglo DURADERO es que main.js ponga una clase en vez de un
   color: cuando eso ocurra, estas dos reglas se borran. */
body.yz-light .bento-card[style] {
    border-color: rgba(20, 22, 28, 0.14) !important;
}

body.yz-light .bento-card[style*="229, 255, 0.6"] {
    border-color: var(--color-accent-primary) !important;
    box-shadow: 0 10px 24px rgba(18, 20, 24, 0.14), 0 0 0 3px rgba(0, 110, 129, 0.12);
}

body.yz-light .bento-progress {
    background: rgba(20, 22, 28, 0.12);
}

body.yz-light .progress-bar-inner,
body.yz-light .pulse-dot {
    box-shadow: 0 0 0 3px rgba(0, 110, 129, 0.14);
}

body.yz-light .pulse-dot.green {
    box-shadow: 0 0 0 3px rgba(0, 110, 55, 0.16);
}

/* 4.4 · Industrias */
body.yz-light .industry-card.is-hovered:not(.expanded) {
    box-shadow: 0 12px 28px rgba(18, 20, 24, 0.18);
}

/* El botón de cerrar de la imagen ampliada era un círculo negro al 70% con
   texto var(--color-text-primary): en claro ese texto es casi negro y
   desaparecía sobre el círculo. */
body.yz-light .industry-icon .close-btn {
    background: rgba(255, 255, 255, 0.90);
    border-color: rgba(20, 22, 28, 0.20);
    color: var(--color-text-primary);
}

body.yz-light .industry-icon .close-btn:hover {
    background: var(--color-error);
    border-color: var(--color-error);
    color: #ffffff;
}

/* 4.5 · Cómo trabajar con nosotros / soporte */
body.yz-light .service-card:hover {
    box-shadow: 0 12px 28px rgba(18, 20, 24, 0.18);
}

body.yz-light .support-card.featured {
    background: linear-gradient(145deg, #ffffff 0%, rgba(0, 110, 129, 0.06) 100%);
}

/* 4.6 · Toast y confirmación (nacen sueltos en el <body>) */
body.yz-light .toast {
    box-shadow: var(--shadow-xl);
}

body.yz-light .toast-icon.error {
    background: rgba(205, 36, 63, 0.14);
}

body.yz-light .confirmation-overlay {
    background: rgba(20, 22, 28, 0.55);
}

body.yz-light .confirmation-content {
    box-shadow: var(--shadow-xl);
}

/* 4.7 · Capa aditiva (enhance.css) */
body.yz-light .yz-progress {
    background: linear-gradient(90deg, rgba(0, 110, 129, 0.25) 0%, rgba(0, 110, 129, 0.75) 100%);
}

body.yz-light .industry-card.yz-tilt:hover,
body.yz-light .value-card.yz-tilt:hover,
body.yz-light .blog-card.yz-tilt:hover,
body.yz-light .docs-card.yz-tilt:hover,
body.yz-light .support-card.yz-tilt:hover,
body.yz-light .info-card.yz-tilt:hover {
    box-shadow: var(--shadow-xl), 0 0 0 1px var(--color-border-hover);
}

body.yz-light .value-card:hover {
    border-color: var(--color-accent-primary);
    box-shadow: var(--shadow-lg);
}

/* La marca de agua del isotipo se repinta en el bloque 2.6 (era blanca en
   mix-blend-mode:screen para vivir sobre capturas oscuras; con las capturas
   claras el screen la borraba). */

/* 4.8 · Barra de scroll del navegador */
body.yz-light ::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
}

body.yz-light ::-webkit-scrollbar-thumb {
    background: #b9bfc6;
}

body.yz-light ::-webkit-scrollbar-thumb:hover {
    background: #9aa1a9;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5 · Bandas de sección: el home alterna #dde0e4 / #eff0f2 para que la página
   no sea un lienzo plano. Los ids de #recorrido y #resultados se declaran acá
   aunque las secciones nazcan después: la banda es del tema, no del contenido.
   ───────────────────────────────────────────────────────────────────────────── */
body.yz-light #recorrido,
body.yz-light .modules,
body.yz-light #servicios {
    background: var(--color-bg-tertiary);
}

body.yz-light #resultados,
body.yz-light .industries {
    background: var(--color-bg-primary);
}

/* Páginas internas: el encabezado toma la misma banda que el hero del home. */
body.yz-light .page-header {
    background: var(--gradient-dark);
    border-bottom: 1px solid var(--color-border);
}

/* ─────────────────────────────────────────────────────────────────────────────
   6 · Marcos de dispositivo (2026-09-13) — el aparato ES el marco
   El bloque 2.6 le pone borde, fondo y sombra a `.panel-visual`/`.bento-visual`
   porque ahí vivía la captura desnuda. Desde hoy la captura vive dentro de una
   laptop o de un teléfono dibujados en CSS, que ya traen su bisel y su sombra:
   dos marcos, uno dentro del otro, se veían como una caja gris de más. Estas
   dos reglas apagan el marco EXTERIOR sólo donde hay aparato; donde no lo hay
   (ninguna hoy, pero el sitio es reversible) el bloque 2.6 sigue mandando.
   El propio aparato no necesita tema: nace con la paleta clara y en el sitio
   oscuro original se lee igual (bisel oscuro, base plateada).
   ───────────────────────────────────────────────────────────────────────────── */
body.yz-light .panel-visual--devices,
body.yz-light .bento-visual--device {
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* La banda clara de `#pantallas` se retiró el 13 sep 2026 junto con la sección:
   el trío de aparatos pasó a ser el hero (el home lo mostraba dos veces) y el
   hero ya tiene su propia banda, definida arriba en 4.1. */
/* ═══ Home sobre un solo fondo (2026-09-13, noche): las bandas alternas se van; las tarjetas blancas ya dan el contraste, como en la referencia v2 ═══ */
body.yz-light .offer, body.yz-light .modules, body.yz-light .industries, body.yz-light .closing-section { background: transparent; }
/* Sin marca de agua sobre el bento móvil: el teléfono ya no llena la caja y la marca caía fuera de la pantalla (2026-09-13, noche 2) */
body.yz-light .bento-visual::after { display: none; }