/* ══════════════════════════════════════════════════════════════════════ TEMA CLARO (14-sep-2026 · 15-sep: pasa a ser EL tema) Se carga DESPUÉS de styles.css, visual.css y home.css. ⚠️ LO QUE CAMBIÓ EL 15-SEP — léelo antes de tocar nada Este archivo nació como la mitad opcional de un conmutador: sin .claro en el no pintaba nada. Ya no. La clase .claro va HORNEADA en index.html y el conmutador se retiró, así que TODO lo de aquí abajo está siempre activo. El sitio es claro de base y la portada de arriba (anuncio + cabecera + hero + cinta de marcas + "¿qué camioneta manejas?") y el pie son islas oscuras — ver §17, que es donde vive esa decisión. Las §3, §4 y §15 quedaron anuladas en el sitio; se dejan comentadas para no perder el porqué. Para revertir del todo: quitar la clase .claro del , volver a cargar tema.js, reponer el botón #btnTema y descomentar §3, §4 y §15. ── Cómo está pensado ────────────────────────────────────────────── 1) Se reescriben los TOKENS del sistema (carbón→blanco, hueso→tinta). Como casi todo styles.css usa var(), con eso solo ya gira el 80 %. 2) El ámbar #F39C12 sobre blanco da ~2,2:1 de contraste: ilegible en texto chico. En claro la marca usa un ámbar quemado (#C2740A) y el degradado se oscurece en bloque. Sobre foto se mantiene el original. 3) ISLAS OSCURAS: los bloques con foto/video a sangre (heros, capítulos, tiles de categoría) siguen siendo oscuros en las dos versiones — el texto blanco sobre imagen es correcto en claro también. Para eso se les vuelve a declarar el set de tokens oscuro: como las custom properties heredan, todo lo que vive dentro sale bien sin tocar una sola regla de los otros archivos. 4) Lo que quedó con color literal (y no con var) se corrige abajo, una sección por zona. Se usa :where(html.claro) — especificidad 0 — en los componentes genéricos que las islas ya reestilan, para no pisarles su versión sobre foto; y html.claro normal en lo demás. ══════════════════════════════════════════════════════════════════════ */ /* ── 1 · TOKENS DEL TEMA CLARO ──────────────────────────────────────── */ html.claro{ /* Marca. Mismo ámbar de familia, bajado de luminosidad para que el texto chico (kickers, precios "Cotiza", links) pase contraste sobre blanco. */ --ambar:#C2740A; --ambar-claro:#D0820B; --amarillo:#E0A00C; --rojo:#A62F22; --verde:#3F6B2C; --grad:linear-gradient(100deg,#E0A00C,#C2740A 45%,#A62F22); /* Superficies: el "carbón" se invierte en una escala hueso/papel. No blanco puro en las capas 2-4: el catálogo es todo tarjetas y el blanco sobre blanco borra los bordes. */ --carbon:#FFFFFF; --carbon-2:#F7F5F1; --carbon-3:#EFEDE7; --carbon-4:#E3E0D8; --linea:#DEDAD2; /* Tinta (antes "hueso" era el texto claro; ahora es el texto oscuro). */ --hueso:#17171B; --gris:#5A5A64; --gris-2:#7C7C87; /* Tokens de home.css */ --ink:#FFFFFF; --ink-2:#F7F5F1; --texto-2:#45454F; --texto-3:#6A6A75; /* Sombras: en claro el negro puro mancha. Van en tierra y mucho más suaves. */ --sombra-1:0 1px 2px rgba(20,16,10,.05),0 6px 18px rgba(20,16,10,.07); --sombra-2:0 2px 4px rgba(20,16,10,.05),0 18px 40px rgba(20,16,10,.10); color-scheme:light; } /* ── 2 · ISLAS OSCURAS ────────────────────────────────────────────────── Bloques montados sobre foto o video: siguen en carbón en las dos versiones. Se les restaura el set oscuro completo y, por herencia de custom properties, todo su contenido (títulos, sellos, botones, incluso las .pcard del riel de capítulos) vuelve a la paleta de siempre. */ html.claro .hero, html.claro .hv, html.claro .hc, html.claro .cap, html.claro .banda, html.claro .fl, html.claro .pg-hero, html.claro .cat-card, html.claro .ct, html.claro .famc, html.claro .tile, html.claro .t2-c, html.claro .pv-card, html.claro .gar-depc, html.claro .hs-fig, html.claro .vf-foto{ --ambar:#F39C12; --ambar-claro:#F5A623; --amarillo:#FFD23F; --rojo:#C0392B; --verde:#4E7C3A; --grad:linear-gradient(100deg,#FFD23F,#F39C12 45%,#C0392B); --carbon:#0E0E10; --carbon-2:#1A1A1D; --carbon-3:#232327; --carbon-4:#2E2E34; --linea:#33333A; --hueso:#F5F3EF; --gris:#9A9AA2; --gris-2:#6B6B73; --ink:#0E0E10; --ink-2:#0A0A0C; --texto-2:#C9C9D2; --texto-3:#A9A9B4; --sombra-1:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.34); --sombra-2:0 2px 4px rgba(0,0,0,.45),0 18px 44px rgba(0,0,0,.5); color-scheme:dark; /* OJO — esta línea no es decorativa, es lo que hace que la isla funcione. `color` se hereda YA RESUELTO: body computa color:var(--hueso) contra el token claro y lo que baja por el árbol es la tinta oscura, sin volver a mirar el --hueso que la isla acaba de redefinir. Sin este color explícito, los títulos que no declaran color propio (el h1 del hero, los .cat-card h3, .ct-txt b, .famc-txt b…) salen en tinta oscura sobre la foto. */ color:var(--hueso); } /* ── 3 · LOGO ─────────────────────────────────────────────────────────── 15-sep: ANULADO. logo-blanco.webp solo aparece en cabecera, pie, splash y menú móvil, y los cuatro son zona oscura permanente (§17), así que el logo blanco es el correcto. Si algún día se pinta el logo sobre superficie clara, esta regla vuelve pero acotada a ese sitio. html.claro img[src$="logo-blanco.webp"]{content:url("logo.webp")} */ /* ── 4 · CABECERA, NAV Y PIE ──────────────────────────────────────────── 15-sep: ANULADO. Cabecera, nav y pie ya no se aclaran — son zona oscura permanente y se declaran como isla en §17. */ /* ── 5 · BOTONES FANTASMA ─────────────────────────────────────────────── .btn-2 se apoyaba en un velo blanco al 3 %. Sobre blanco eso no existe: se invierte a un velo tierra. :where() para no pisar la versión translúcida que los heros le dan al botón sobre foto. */ :where(html.claro) .btn-2{background:rgba(20,16,10,.035)} :where(html.claro) .btn-2:hover{background:rgba(194,116,10,.07)} /* ── 6 · VELOS BLANCOS SOBRE SUPERFICIE ───────────────────────────────── Mismo caso: rgba(255,255,255,.02-.06) sobre fondo claro es invisible. */ :where(html.claro) .vb, :where(html.claro) .hs-item, :where(html.claro) .hitos div, :where(html.claro) .vf-datos, :where(html.claro) .conf-item{background:rgba(20,16,10,.028)} :where(html.claro) .conf-item:hover{background:rgba(194,116,10,.06)} :where(html.claro) .dia-tl{background:rgba(255,255,255,.9)} :where(html.claro) .dia-tl a:hover{background:rgba(20,16,10,.055)} :where(html.claro) .hs-item.on{background:rgba(194,116,10,.07)} :where(html.claro) .vf-next{background:rgba(194,116,10,.06)} :where(html.claro) a.vf-next:hover{background:rgba(194,116,10,.12)} :where(html.claro) .mm-veh{background:rgba(194,116,10,.08)} /* ── 7 · SELECTOR DE VEHÍCULO ─────────────────────────────────────────── Tenía un degradado literal #17171B→#0C0C0E. */ html.claro .selector{background:linear-gradient(135deg,#FFFFFF,#F2EFE9 70%)} /* ── 8 · PLACEHOLDER DE PRODUCTO SIN FOTO ─────────────────────────────── Era un "estudio oscuro" (#26262C→#131317) para que el hueco no se leyera como caja vacía. En claro pasa a mesa de luz. Cuando SÍ hay foto manda la regla .pimg:has(>img) de visual.css, que tiene más especificidad. */ :where(html.claro) .pimg{background:radial-gradient(ellipse 80% 70% at 50% 38%,#FBFAF7,#EDEAE4 72%)} :where(html.claro) .gal-main{background:radial-gradient(ellipse 80% 70% at 50% 40%,#FBFAF7,#EDEAE4 72%)} :where(html.claro) .pimg .emo{opacity:.4;filter:grayscale(.25)} :where(html.claro) .gal-main .emo{opacity:.3} :where(html.claro) .gal-nota{background:rgba(20,16,10,.62);color:#F0EEE9} /* ── 9 · PLACA DE LOGOS DE MARCA ──────────────────────────────────────── La placa hueso es fija en las dos versiones (los logos de fábrica vienen en tinta oscura y algunos con fondo negro horneado). Sobre superficie clara necesita un filo para no fundirse con la tarjeta. */ :where(html.claro) .mlogo{box-shadow:inset 0 0 0 1px var(--linea)} :where(html.claro) .marcas-tira a:hover .mlogo{box-shadow:inset 0 0 0 1px var(--linea),0 8px 22px rgba(20,16,10,.12)} /* ── 10 · SOMBRAS Y VELOS DE CAPA ─────────────────────────────────────── Todos estos venían con rgba(0,0,0,.45-.75) literal. */ :where(html.claro) .pcard:hover{box-shadow:0 12px 28px rgba(20,16,10,.10)} :where(html.claro) .mega{box-shadow:0 24px 60px rgba(20,16,10,.13)} :where(html.claro) .toast{box-shadow:0 12px 40px rgba(20,16,10,.15)} :where(html.claro) .crm-panel{box-shadow:-20px 0 60px rgba(20,16,10,.15)} html.claro .overlay{background:rgba(20,16,10,.42)} /* ── 11 · AVISOS ──────────────────────────────────────────────────────── Los textos eran crema (#e8d5b5) y rosa (#f0c4bf): sobre blanco no se leen. */ html.claro .aviso{background:rgba(194,116,10,.08);border-color:rgba(194,116,10,.32);color:#6B4A0C} html.claro .aviso b{color:#8A5207} html.claro .aviso-rojo{background:rgba(166,47,34,.07);border-color:rgba(166,47,34,.3);color:#7E2A20} html.claro .aviso-rojo b{color:#A62F22} /* ── 12 · CHECK DEL BUILD ─────────────────────────────────────────────── color:#fff fijo — invisible mientras la etapa no está montada (el círculo es transparente). Solo se queda blanco cuando el fondo es verde. */ :where(html.claro) .build-check{color:var(--hueso)} :where(html.claro) .build-etapas li.ok .build-check{color:#fff} /* ── 13 · PANEL CRM (interno, oculto en producción) ───────────────────── El

 del payload iba en verde claro sobre carbón. */
html.claro .crm-evt pre{color:#22592C}
html.claro .crm-off{background:rgba(166,47,34,.12);color:#8E2A1E;border-color:rgba(166,47,34,.35)}

/* ── 14 · ENTRADA (splash) ──────────────────────────────────────────────
   Hereda --carbon, así que ya entra en blanco; el logo lo cambia la regla
   del punto 3. Solo se sube el degradado de marca, que al 10 % sobre
   blanco no se veía. */
html.claro .splash::after{background:radial-gradient(60% 45% at 50% 62%,rgba(194,116,10,.16),transparent 70%)}

/* ══════════════════════════════════════════════════════════════════════
   15 · EL BOTÓN DEL CONMUTADOR — RETIRADO (15-sep)
   Ya no se elige tema: el sitio es claro con dos islas oscuras fijas.
   El botón salió del DOM y tema.js dejó de cargarse.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 16 · TRANSICIÓN AL CAMBIAR ─────────────────────────────────────────
   tema.js pone .tema-anim durante 320 ms. Solo se animan color, fondo y
   borde: si se animara todo, el cambio arrastraría transforms y layouts.
   Nada de esto corre si el sistema pide menos movimiento. */
@media (prefers-reduced-motion:no-preference){
  html.tema-anim,
  html.tema-anim *,
  html.tema-anim *::before,
  html.tema-anim *::after{
    transition:background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease !important}
}

/* ══════════════════════════════════════════════════════════════════════
   17 · LAS DOS ISLAS OSCURAS FIJAS  (15-sep-2026)
   ──────────────────────────────────────────────────────────────────────
   Decisión de Francesco: "después empieza la zona de catálogo, aquí ya la
   web se vuelve blanca; todo lo anterior tenía fondo negro". Así que la
   página tiene dos bloques oscuros y todo lo de en medio es claro.

   ⚠️ 15-sep (tercera pasada) — EL MODELO SE DIO VUELTA. Ya no son "dos
   islas oscuras dentro de una web clara": la portada es OSCURA de punta a
   punta y lo único claro es el muro de producto. Decisión de Francesco:
   "hasta que lleguemos a todos los productos todo oscuro… y después de
   'Ver el catálogo completo', todo a negro de nuevo".

   El porqué: las secciones de abajo (mapa y flotas, reseñas, ecosistema)
   son fotos a sangre con velo negro y texto blanco. Sobre papel eran
   cuatro rectángulos oscuros flotando en blanco. En negro, el muro de
   producto queda como la ÚNICA superficie clara de la portada — que es
   justo donde se quiere que caiga el ojo.

     ▛▀▀▀▀▀▀▀▀▀▀▀▀▀▜  anuncio · cabecera · nav · hero · cinta de marcas
     ▌   OSCURO    ▐  · "¿Qué camioneta manejas?" · "Elige por categoría"
     ▙▄▄▄▄▄▄▄▄▄▄▄▄▄▟
     ░░░ CLARO ░░░░░  ▲ TODOS LOS PRODUCTOS · el muro (.ch), único
     ░░░░░░░░░░░░░░░    bloque claro de la portada
     ▛▀▀▀▀▀▀▀▀▀▀▀▀▀▜  mapa y flotas · reseñas · ecosistema ·
     ▌   OSCURO    ▐  barra de confianza · pie
     ▙▄▄▄▄▄▄▄▄▄▄▄▄▄▟

   ⚠️ Las páginas internas (#/tienda, ficha, #/nosotros…) SIGUEN CLARAS:
   ahí manda el catálogo y el texto largo. Lo que cambió es solo la
   portada. Por eso el tema base sigue siendo claro y esto son islas.

   Se resuelve con el mismo mecanismo de §2: se les vuelve a declarar el
   set de tokens oscuro y, como las custom properties heredan, todo lo que
   vive dentro sale bien sin tocar las reglas de los otros archivos.
   El CUÁNDO deja de ser oscuro va en §19 (y en home-v2.js, que mide
   `.hc, .fj, .fam, .pg-hero` — si se toca aquí, tocar allá).
   ══════════════════════════════════════════════════════════════════════ */
html.claro .anuncio,
html.claro header,
html.claro .mega,
html.claro .mega-veh,
html.claro .mmenu,
html.claro .splash,
html.claro .fj,
html.claro .fam,
html.claro .t2,
html.claro .rv,
html.claro .t3,
html.claro .tb,
html.claro footer{
  --ambar:#F39C12; --ambar-claro:#F5A623; --amarillo:#FFD23F;
  --rojo:#C0392B; --verde:#4E7C3A;
  --grad:linear-gradient(100deg,#FFD23F,#F39C12 45%,#C0392B);
  --carbon:#0E0E10; --carbon-2:#1A1A1D; --carbon-3:#232327; --carbon-4:#2E2E34;
  --linea:#33333A;
  --hueso:#F5F3EF; --gris:#9A9AA2; --gris-2:#6B6B73;
  --ink:#0E0E10; --ink-2:#0A0A0C; --texto-2:#C9C9D2; --texto-3:#A9A9B4;
  --sombra-1:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.34);
  --sombra-2:0 2px 4px rgba(0,0,0,.45),0 18px 44px rgba(0,0,0,.5);
  color-scheme:dark;
  /* Misma trampa que en §2: `color` baja del body ya resuelto en tinta
     oscura, así que hay que volver a declararlo aquí. */
  color:var(--hueso);
}

/* Los fondos que en el archivo base eran color literal (no var) */
html.claro header{background:rgba(14,14,16,.97)}
html.claro .nav{background:#000}
html.claro .nav::after{background:linear-gradient(to left,#000 22%,transparent)}
html.claro footer{background:#000}
html.claro .fj{background:var(--ink-2)}
/* .fam apoya un punto más arriba que la franja (#0E0E10 sobre #0A0A0C):
   así las ocho fotos no quedan sobre el mismo plano que la cinta de marcas
   y la sección se lee como una capa, no como un vacío. */
html.claro .fam{background:var(--ink)}
/* Sobre negro, los tiles de familia se funden con el fondo por las esquinas:
   un filo blanco al 7 % les devuelve el borde sin dibujar una caja. */
html.claro .fam .famc{box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
html.claro .fam .famc:hover{box-shadow:inset 0 0 0 1px rgba(243,156,18,.45),var(--sombra-2)}

/* §5, §6 y §8 invirtieron los velos blancos porque sobre papel no se ven.
   Dentro de las islas el fondo vuelve a ser carbón, así que el velo blanco
   original es otra vez el correcto. */
html.claro .anuncio .btn-2,
html.claro header .btn-2,
html.claro .fj .btn-2,
html.claro .fam .btn-2,
html.claro .t2 .btn-2,
html.claro .rv .btn-2,
html.claro .t3 .btn-2,
html.claro .tb .btn-2,
html.claro footer .btn-2{background:rgba(255,255,255,.03)}
html.claro .anuncio .btn-2:hover,
html.claro header .btn-2:hover,
html.claro .fj .btn-2:hover,
html.claro .fam .btn-2:hover,
html.claro .t2 .btn-2:hover,
html.claro .rv .btn-2:hover,
html.claro .t3 .btn-2:hover,
html.claro .tb .btn-2:hover,
html.claro footer .btn-2:hover{background:rgba(243,156,18,.10)}
html.claro .fj .vb{background:rgba(255,255,255,.025)}
html.claro .mmenu .mm-veh{background:rgba(243,156,18,.10)}
/* La placa de los logos de marca no necesita filo dentro de la cinta:
   ahí la placa hueso ya recorta contra el carbón. */
html.claro .fj .mlogo{box-shadow:none}

/* El splash arranca antes de que corra una sola línea de JS: tiene que
   entrar en carbón, no en blanco. */
html.claro .splash{background:#0E0E10}
html.claro .splash::after{background:radial-gradient(60% 45% at 50% 62%,rgba(243,156,18,.10),transparent 70%)}

/* ── 18 · REMATES DE LA PASADA DEL 15-SEP ───────────────────────────── */

/* §17 devuelve el velo blanco a los .vb de la franja, pero el compacto de
   la portada ya no es una caja: es un bloque centrado sin fondo ni borde. */
html.claro .fj .vb-compacta{background:none;border:none}

/* El ámbar quemado (#C2740A) existe para que el TEXTO chico pase contraste
   sobre papel. En un botón RELLENO con tinta negra encima no hace falta —
   y apagaba el CTA principal, que es lo último que se quiere apagar en una
   tienda. El botón vuelve al ámbar de marca (#F39C12 con texto negro da
   10:1, de sobra). El texto ámbar suelto sigue usando el quemado. */
html.claro .btn-1{background:#F39C12;color:#000}
html.claro .btn-1:hover{background:#FFD23F}

/* ══════════════════════════════════════════════════════════════════════
   19 · EL CRUCE OSCURO → CLARO, ATADO AL SCROLL  (15-sep-2026)
   ──────────────────────────────────────────────────────────────────────
   Complementa a §17. Allí se decide QUÉ es isla oscura; aquí, CUÁNDO deja
   de serlo. home-v2.js pone .zona-clara en el  en cuanto el último
   bloque oscuro (hero o franja de marcas) sale por encima del borde
   inferior de la cabecera, y lo quita al volver a subir.

   Con .zona-clara, la cabecera y la nav dejan de ser isla y vuelven a los
   tokens de papel. El anuncio, la franja y el pie NO cambian: no son
   sticky, ya se fueron de pantalla cuando esto ocurre.
   ══════════════════════════════════════════════════════════════════════ */

/* ── El suelo ──
   Las secciones claras llevan fondo propio (más abajo), así que el 
   solo se ve en el rebote del scroll y detrás del hero. Que arranque en
   carbón evita la franja blanca al hacer overscroll arriba del todo. */
html.claro body{background:#0E0E10;transition:background-color .35s ease}
html.claro.zona-clara body{background:#FFFFFF}

/* .t2, .rv y .t3 no traen fondo propio en home.css (eran transparentes
   sobre el body). Ahora que son isla oscura (§17), var(--ink) resuelve
   #0E0E10 dentro de ellas: el fondo lo ponen aquí para no depender de que
   el body esté en el color correcto en ese momento del scroll.
   .fam salió de esta lista: tiene su fondo en §17. */
html.claro .t2,
html.claro .rv,
html.claro .t3{background:var(--ink)}

/* ── La cabecera deja de ser isla ── */
html.claro.zona-clara header,
html.claro.zona-clara .mega,
html.claro.zona-clara .mega-veh{
  --ambar:#C2740A; --ambar-claro:#D0820B; --amarillo:#E0A00C;
  --rojo:#A62F22; --verde:#3F6B2C;
  --grad:linear-gradient(100deg,#E0A00C,#C2740A 45%,#A62F22);
  --carbon:#FFFFFF; --carbon-2:#F7F5F1; --carbon-3:#EFEDE7; --carbon-4:#E3E0D8;
  --linea:#DEDAD2;
  --hueso:#17171B; --gris:#5A5A64; --gris-2:#7C7C87;
  --ink:#FFFFFF; --ink-2:#F7F5F1; --texto-2:#45454F; --texto-3:#6A6A75;
  --sombra-1:0 1px 2px rgba(20,16,10,.05),0 6px 18px rgba(20,16,10,.07);
  --sombra-2:0 2px 4px rgba(20,16,10,.05),0 18px 40px rgba(20,16,10,.10);
  color-scheme:light;
  color:var(--hueso);
}
/* Los fondos literales (no var) de §17, invertidos */
html.claro.zona-clara header{background:rgba(255,255,255,.94);border-bottom-color:var(--linea)}
html.claro.zona-clara .nav{background:var(--carbon-2);border-top-color:var(--linea)}
html.claro.zona-clara .nav::after{background:linear-gradient(to left,var(--carbon-2) 22%,transparent)}
html.claro.zona-clara header .btn-2{background:rgba(20,16,10,.035)}
html.claro.zona-clara header .btn-2:hover{background:rgba(194,116,10,.07)}
/* El logo es BLANCO: sobre la cabecera de papel desaparece. Este es el
   único sitio del sitio donde hace falta el swap del §3 original. */
html.claro.zona-clara header img[src$="logo-blanco.webp"]{content:url("logo.webp")}

/* ── La transición ──
   Solo color, fondo y borde. Si se animara `all`, el sticky arrastraría
   transforms y el cruce daría un tirón. Los 350 ms son los mismos que
   usaba el conmutador manual que se retiró. */
html.claro header,
html.claro header *,
html.claro .mega,
html.claro .mega *,
html.claro .mega-veh,
html.claro .mega-veh *{
  transition:background-color .35s ease,border-color .35s ease,color .35s ease,fill .35s ease,stroke .35s ease
}
/* Quien pide menos movimiento, cruza en seco. */
@media (prefers-reduced-motion:reduce){
  html.claro body,
  html.claro header,html.claro header *,
  html.claro .mega,html.claro .mega *,
  html.claro .mega-veh,html.claro .mega-veh *{transition:none}
}