/* ==========================================================================
   Tema CLARO — fila «Cambiar modo» del Lab. Arranca apagada.

   Se carga DESPUÉS de styles.css y de todas las paletas, porque redefine
   superficies (fondo, texto, líneas, lavados) y tiene que ganarles por orden.
   NO toca `--accent`: la paleta elegida sigue mandando el color de marca.

   Regla de oro del archivo: el HERO SIGUE OSCURO. El material del hero es
   nocturno por construcción (ciudad 3D, video, fotos) y el fluido de tinta es
   aditivo, así que abajo se le devuelven los tokens oscuros al `.hero` y el
   texto crema vuelve a leerse sobre la ciudad. El resto de la página va claro.
   ========================================================================== */

:root{
  /* Fondos. Blanco puro para la página y dos grises muy claros para los
     paneles alternados y la ventana del mock. */
  --ink:        #FFFFFF;
  --ink-2:      #F7F7F5;
  --ink-3:      #F1F1EE;
  --panel:      rgba(255,255,255,0.88);
  --panel-2:    rgba(246,246,243,0.94);

  /* Texto. `--cream` deja de ser crema y pasa a ser la tinta: casi negro, no
     negro puro — #000 sobre #FFF da 21:1 y vibra; #14141A da ~17:1 y descansa.
     Los cuatro escalones mantienen la jerarquía original (título > cuerpo >
     secundario > meta) y todos pasan AA sobre blanco:
       cream   #14141A ~17,0:1
       cream-2 #33333A ~11,2:1
       muted   #5C5C64  ~6,5:1
       muted-2 #6F6F77  ~5,0:1   (el piso; nada baja de acá) */
  --cream:      #14141A;
  --cream-2:    #33333A;
  --muted:      #5C5C64;
  --muted-2:    #6F6F77;

  /* Líneas y lavados: los mismos valores del tema oscuro pero en tinta sobre
     blanco. Sin esto quedarían lavados de crema sobre blanco, o sea nada. */
  --line:       rgba(20,20,26,0.18);
  --line-soft:  rgba(20,20,26,0.09);
  --line-2:     rgba(20,20,26,0.22);
  --tint:       rgba(20,20,26,0.025);
  --tint-2:     rgba(20,20,26,0.045);
  --tint-3:     rgba(20,20,26,0.06);
  --track:      rgba(20,20,26,0.10);
  --ghost:      rgba(20,20,26,0.14);
  --sheen:      rgba(20,20,26,0.03);

  /* Chrome (nav y desplegables) en claro. */
  --nav-bg:     rgba(255,255,255,0.78);
  --menu-bg:    rgba(255,255,255,0.98);
  --menu-solid: #FFFFFF;

  /* El acento como TEXTO se oscurece mezclándolo con tinta. Es lo que hace que
     el tema claro funcione con CUALQUIER paleta sin escribir un color por
     paleta: el lima #D8FF2C sobre blanco da 1,2:1 (ilegible) y mezclado al 45%
     con casi negro se va a ~6:1. Los RELLENOS (botón, banda) siguen con
     `--accent` a pleno: ahí el acento es fondo, no texto. */
  --accent-text: color-mix(in srgb, var(--accent) 45%, #0A0A0C);
}

/* El fluido de tinta y su viñeta son aditivos sobre negro: sobre blanco el
   canvas no se ve y la viñeta ensucia la página. Fuera en claro. */
#ink, #ink-scrim{display:none !important;}

/* --- el hero también va claro --------------------------------------------
   La ciudad 3D tiene variante diurna (ver city-3d.js: volúmenes gris claro,
   aristas gris oscuro, ventanas grises y blending normal en vez de aditivo),
   así que el hero no necesita quedarse en negro. */
.hero{background:var(--ink);}

/* El velo de las fotos/videos del hero es negro translúcido: sobre papel hay
   que darlo vuelta o el hero queda con una mancha oscura. Abajo se aclara
   poco: ahí va la banda de vidrio y la ciudad tiene que verse a través. */
.hero-media::after{
  background:linear-gradient(to bottom,
    rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,.3) 100%);
}
/* Los fondos de foto y video son material nocturno: en claro se aclaran y se
   bajan para que el titular en tinta se lea encima. El canvas de la ciudad no
   entra acá: su variante clara la resuelve el propio WebGL. */
[data-bg="chess"] .hero-media,
[data-bg="crowd"] .hero-media,
[data-bg="data-city"] .hero-media,
[data-bg="data-wave"] .hero-media,
[data-bg="data-lime"] .hero-media,
[data-bg="video"] .hero-media,
[data-bg="vortex"] .hero-media,
[data-bg="video-lime"] .hero-media{
  filter:invert(1) grayscale(.35) brightness(1.06) contrast(.92);
  opacity:.5;
}

/* La pieza blanca del logo se oscurece: sobre blanco desaparecería. */
.lk-white{fill:#14141A;}
.lk-lime-white{fill:#14141A;}
/* Tratamiento «lime»: la palabra blanca también se oscurece en claro; el
   brazo lima queda fijo (es marca, como grad1/grad2). */
[data-logo="lime"] .lk-word{fill:#14141A;}

/* --- ajustes puntuales ---------------------------------------------------- */

/* El borde inferior del nav necesita cuerpo en claro. (La banda de vidrio se
   adapta sola: sale de --cream / --line-soft, que esta hoja redefine.) */
nav{border-bottom:1px solid var(--line-soft);}

/* Las tarjetas del mock y la ventana del portal: en oscuro flotan sobre negro
   por el degradado superior; en claro necesitan borde para separarse del blanco. */
.mock, .dmock{border-color:var(--line);}

/* El mapa de la sección Datos tiene su propia versión clara (ver index.html):
   acá sólo se conmuta cuál de las dos imágenes se muestra. */
.dmap-dark{display:none;}
.dmap-light{display:block;}
/* Las manchas de calor van en `screen`, que SÓLO aclara: sobre el mapa claro
   no hacen nada. En claro se pasan a `multiply`, que sólo oscurece, que es el
   equivalente exacto del otro lado. */
.dmap-heat circle{mix-blend-mode:multiply;}
/* Los puntos son relleno chico sobre papel: necesitan el acento oscurecido. */
.dot{fill:var(--accent-text); opacity:.95;}
.dot-ring{stroke:var(--accent-text);}

/* Sobre el mapa claro las etiquetas van en tinta, no en crema. */
.dmap-leaders line{stroke:#14141A; opacity:.45;}
.dmap-co{border-bottom-color:rgba(20,20,26,0.45);}
.dmap-co b{color:#14141A;}
.dot-far{fill:#5C5C64; opacity:.7;}

/* El scrim de las fotos del hero no aplica acá (el hero sigue oscuro), pero el
   video del portal y los paneles sí: fondo claro para el cuerpo del mock. */
.mock-body, .dmap-body{background:var(--ink);}