/* ==========================================================================
   Avantia · MODO CLARO (y los controles para cambiar de tema)
   --------------------------------------------------------------------------
   Idea: el papel de la referencia (img/ref-papel.png): blanco roto con grano,
   tinta casi negra, el violeta como único acento y el cristal violeta conservado
   dentro de «ventanas» oscuras (las imágenes de objetos están hechas sobre negro
   y por eso no se invierten: se enmarcan). Tarjetas blancas con sombra violeta
   suave y filetes finos.
   · Todo el modo claro va bajo html[data-tema="claro"]: el oscuro no cambia.
   · Fuera de ese ámbito sólo hay dos cosas, las dos nuevas y ajenas al diseño
     oscuro: el estilo de los propios interruptores (bloque 0) y la animación
     del cambio de tema (bloque 1).
   · Contraste AA: texto normal ≥ 4,5:1 sobre #f3f1ec y #fff (tinta #0c0c10,
     segundo nivel #3f3e4a, atenuado #565663, violeta de texto #5b21d6).
   ========================================================================== */

/* ---------- 0 · interruptores (ambos temas) ---------- */
/* botón redondo de la barra: sólo icono, a la izquierda de «Iniciar sesión» */
.tema-boton{position:relative;display:grid;place-items:center;flex:none;width:48px;height:48px;padding:0;border-radius:50%;cursor:pointer;color:#e6ddff;
  background:radial-gradient(circle at 50% 0%,rgb(143 99 255 / .22),transparent 70%),rgb(12 9 24 / .6);border:1px solid rgb(157 123 255 / .32);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 10px 26px -16px rgb(107 43 255 / .9);
  transition:border-color .3s,background-color .3s,color .3s,box-shadow .3s,transform .3s cubic-bezier(.2,.8,.2,1);-webkit-tap-highlight-color:transparent}
.tema-boton:hover{border-color:#a98bff;color:#fff;transform:rotate(-12deg)}
.tema-boton:active{transform:scale(.92)}
.tema-boton:focus-visible{outline:2px solid #c9b8ff;outline-offset:3px}
.tema-ico{width:21px;height:21px;overflow:visible}
/* sol (en oscuro: lo que se va a encender) → luna (en claro) */
.tema-ico .t-disco{transform-box:fill-box;transform-origin:center;transform:scale(.56);transition:transform .6s cubic-bezier(.65,0,.2,1.2)}
.tema-ico .t-mordisco{transform:translate(9px,-9px);transition:transform .6s cubic-bezier(.65,0,.2,1)}
.tema-ico .t-rayos{transform-box:fill-box;transform-origin:center;transition:transform .6s cubic-bezier(.65,0,.2,1.2),opacity .35s}
html[data-tema="claro"] .tema-ico .t-disco{transform:scale(1)}
html[data-tema="claro"] .tema-ico .t-mordisco{transform:none}
html[data-tema="claro"] .tema-ico .t-rayos{transform:rotate(-70deg) scale(.4);opacity:0}

/* fila «Tema» del panel ☰ (gemela de la de «Idioma») con su conmutador luna | sol */
.mm-tema{display:flex;justify-content:space-between;align-items:center;height:56px;padding:0 8px 0 20px;border-radius:18px;border:1px solid rgb(255 255 255 / .08);
  background:rgb(255 255 255 / .03);color:#e8e7ee;font:600 15px/1 "Inter",sans-serif}
.tema-seg{--alto:40px;--seg:46px;--pad:4px;position:relative;display:inline-grid;grid-template-columns:repeat(2,var(--seg));height:var(--alto);padding:var(--pad);
  border-radius:999px;isolation:isolate;flex:none;
  background:linear-gradient(180deg,rgb(255 255 255 / .07),rgb(255 255 255 / .015)),rgb(12 9 24 / .55);border:1px solid rgb(157 123 255 / .26);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),inset 0 -1px 0 rgb(0 0 0 / .3)}
.tema-seg::before{content:"";position:absolute;left:50%;top:32%;bottom:32%;width:1px;margin-left:-.5px;z-index:-2;background:linear-gradient(180deg,transparent,rgb(201 184 255 / .35),transparent)}
.tema-seg-pulga{position:absolute;z-index:-1;top:var(--pad);bottom:var(--pad);left:var(--pad);width:var(--seg);border-radius:999px;
  background:linear-gradient(90deg,#6b2bff,#5a24e0);box-shadow:inset 0 1px 0 rgb(255 255 255 / .28),0 0 0 1px rgb(157 123 255 / .5),0 6px 18px -6px rgb(107 43 255 / .95);
  transition:transform .55s cubic-bezier(.65,0,.2,1.2)}
.tema-seg[data-activo="claro"] .tema-seg-pulga{transform:translateX(100%)}
.tema-seg button{all:unset;box-sizing:border-box;display:grid;place-items:center;cursor:pointer;border-radius:999px;color:#8d89a6;transition:color .35s;-webkit-tap-highlight-color:transparent}
.tema-seg button svg{width:17px;height:17px}
.tema-seg button:hover{color:#e8e4ff}
.tema-seg button[aria-pressed="true"]{color:#fff}
.tema-seg button:focus-visible{outline:2px solid #c9b8ff;outline-offset:2px}
@media (max-width:640px){.tema-boton{width:44px;height:44px}.tema-ico{width:19px;height:19px}}
/* barra entre 1181 y 1400 px: con el botón nuevo, el menú central y la columna derecha se tocaban.
   Se aprietan los enlaces y, por debajo de 1300, «Iniciar sesión» se queda en su astronauta. */
@media (min-width:1181px) and (max-width:1400px){.cab-nav a{padding-inline:17px}.cab-pill .lui-logo{padding-left:8px}}
@media (min-width:1181px) and (max-width:1300px){.cab-login{padding:0 5px}.cab-login span:last-child{display:none}}
/* (4-oct) «centra esto bien»: con los CINCO enlaces de la portada la columna derecha (tema + Iniciar sesión + ☰) no
   cabía en su 1fr y, como .cab-acciones va alineada al final con min-width:0, se desbordaba HACIA LA IZQUIERDA y el
   botón del tema se montaba sobre «Diary» (de 1301 a 1399 px y desde 1401 px). Ahora:
   · desde 1401 px los enlaces van un punto más compactos (15,5 px, 19 px de lado) y la columna derecha aprieta su hueco;
   · de 1301 a 1400 px, si hay cinco enlaces, «Iniciar sesión» se queda en su astronauta (como ya pasaba hasta 1300);
   · y por si acaso, la columna derecha ya no puede encogerse por debajo de su contenido: si algún día no cabe,
     el grupo se desplaza un poco en vez de solaparse. El grupo sigue centrado en la página (rejilla 1fr auto 1fr). */
@media (min-width:1181px){.cab-pill .cab-acciones{min-width:max-content}}
@media (min-width:1401px){.cab-nav a{font-size:15.5px;padding-inline:19px}.cab-pill .cab-acciones{gap:10px}}
@media (min-width:1301px) and (max-width:1400px){
  .cab-pill:has(.cab-nav a:nth-of-type(5)) .cab-login{padding:0 5px}
  .cab-pill:has(.cab-nav a:nth-of-type(5)) .cab-login span:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){.tema-ico *,.tema-seg-pulga,.tema-boton{transition:none!important}}

/* ---------- 1 · el cambio de tema ---------- */
/* con View Transitions: el tema nuevo se abre en círculo desde el botón pulsado */
html.tema-vt::view-transition-old(root),html.tema-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.tema-vt::view-transition-new(root){animation:tema-revela .75s cubic-bezier(.76,0,.24,1) both}
@keyframes tema-revela{from{clip-path:circle(0 at var(--tema-x,50%) var(--tema-y,0))}to{clip-path:circle(150vmax at var(--tema-x,50%) var(--tema-y,0))}}
/* sin View Transitions: sólo colores, fondos, bordes y sombras se funden (nunca medidas ni posiciones) */
html.tema-cambiando,html.tema-cambiando *,html.tema-cambiando *::before,html.tema-cambiando *::after{
  transition:color .5s ease,background-color .5s ease,border-color .5s ease,fill .5s ease,stroke .5s ease,box-shadow .5s ease!important}


/* ==========================================================================
   2 · MODO CLARO
   ========================================================================== */
html[data-tema="claro"]{
  color-scheme:light;
  /* los tokens de la casa, en claro (lo que los usa ya se adapta solo) */
  --negro:#f3f1ec;
  --superficie:#fff;
  --superficie-2:#fff;
  --linea:rgb(24 16 48 / .09);
  --linea-2:rgb(24 16 48 / .16);
  --texto:#0c0c10;
  --atenuado:#565663;
  --acento:#5b21d6;
  --acento-relleno:#6b2bff;
  /* propios del claro */
  --c-papel:#f3f1ec;
  --c-tarjeta:#fff;
  --c-tinta:#0c0c10;
  --c-tinta-2:#3f3e4a;
  --c-tinta-3:#565663;
  --c-num:#6e6a88;
  --c-violeta:#5b21d6;
  --c-filete:rgb(24 16 48 / .09);
  --c-filete-2:rgb(24 16 48 / .15);
  --c-sombra:0 1px 2px rgb(30 15 70 / .05),0 24px 56px -32px rgb(60 20 160 / .34);
  --c-sombra-alta:0 2px 4px rgb(30 15 70 / .05),0 34px 80px -36px rgb(60 20 160 / .45);
  /* palabra destacada: violeta hondo con su brillo, legible sobre papel (≥ 3:1 en titulares) */
  --c-estela:linear-gradient(100deg,#6b2bff 0%,#4b1fd1 30%,#8a5cff 55%,#5b21d6 78%,#3b1fb0 100%) 0 0/250% 100%;
}
html[data-tema="claro"] body{background:var(--c-papel);color:var(--c-tinta)}
/* grano de papel por encima del espacio y por debajo del contenido (mismo nivel que el lienzo, pintado después) */
html[data-tema="claro"] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.32;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .45 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* sin WebGL las secciones llevaban negro propio: en claro, papel */
html[data-tema="claro"] .marcas,html[data-tema="claro"] .seccion:not(.qh),html[data-tema="claro"] .caso,
html[data-tema="claro"] .oscura-planeta,html[data-tema="claro"] .pie2,html[data-tema="claro"] .hero{background:transparent}
html[data-tema="claro"] .caso-fondo,html[data-tema="claro"] .oscura-planeta .planeta{display:none}
html[data-tema="claro"] :focus-visible{outline-color:#5b21d6}
html[data-tema="claro"] ::selection{background:rgb(107 43 255 / .18);color:#0c0c10}
html[data-tema="claro"] .saltar{background:#0c0c10;color:#fff}

/* ---------- pantalla de carga ---------- */
html[data-tema="claro"] #carga{color:var(--c-tinta-3);background:radial-gradient(ellipse at 50% 46%,rgb(255 255 255 / .55) 20%,rgb(232 228 242 / .9))}
html[data-tema="claro"] #carga::before{background:radial-gradient(closest-side,rgb(107 43 255 / .2),rgb(107 43 255 / .05) 55%,transparent)}
html[data-tema="claro"] #carga .c-giro img:not(.c-espejo){filter:drop-shadow(0 18px 30px rgb(91 33 245 / .28)) drop-shadow(0 4px 8px rgb(40 10 120 / .18))}
html[data-tema="claro"] #carga .c-barra{background:rgb(24 16 48 / .12)}
html[data-tema="claro"] #carga .c-pct{color:var(--c-tinta)}

/* ---------- barra ---------- */
html[data-tema="claro"] .cab-pill{
  background:linear-gradient(180deg,rgb(255 255 255 / .86),rgb(252 251 255 / .76));border-color:rgb(107 43 255 / .16);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgb(30 15 70 / .05),0 22px 50px -24px rgb(60 20 160 / .32)}
html[data-tema="claro"] .cab-pill::before{background:conic-gradient(from var(--ang),transparent 0 62%,rgb(143 99 255 / .7) 72%,#6b2bff 75%,rgb(143 99 255 / .7) 78%,transparent 88%)}
/* el logo: versión de letras negras y A violeta (la de la referencia de papel) */
html[data-tema="claro"] .cab .lui-logo img,html[data-tema="claro"] .pie2-marca img{content:url(../img/logo-avantia-claro.png);width:auto}
html[data-tema="claro"] .cab .lui-logo img{height:44px;margin:0}
html[data-tema="claro"] .cab-nav{border-color:rgb(107 43 255 / .14);background:rgb(107 43 255 / .035)}
html[data-tema="claro"] .cab-nav a{color:var(--c-tinta-2)}
html[data-tema="claro"] .cab-nav a:hover{color:var(--c-tinta)}
html[data-tema="claro"] .cab-nav a.activo{color:#fff}
html[data-tema="claro"] .cab-nav:not(.con-ind) a.activo,html[data-tema="claro"] .cab-ind{background:linear-gradient(180deg,#7c4dff,#5b21f5);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .25),0 8px 20px -8px rgb(91 33 245 / .7)}
html[data-tema="claro"] .cab-ind::after{background:#6b2bff;box-shadow:0 0 8px rgb(107 43 255 / .6)}
html[data-tema="claro"] .cab-menu{border-color:rgb(24 16 48 / .12);background:#fff;box-shadow:0 1px 2px rgb(30 15 70 / .06),0 10px 24px -14px rgb(60 20 160 / .4)}
html[data-tema="claro"] .cab-menu i{background:var(--c-tinta)}
html[data-tema="claro"] .cab.abierto .cab-menu{border-color:rgb(107 43 255 / .5);box-shadow:0 0 0 4px rgb(107 43 255 / .1)}
html[data-tema="claro"] .cab-login{color:#2a1670;background:linear-gradient(180deg,#f6f2ff,#ece5ff);border-color:rgb(107 43 255 / .26);
  box-shadow:inset 0 1px 0 #fff,0 10px 24px -14px rgb(91 33 245 / .55)}
html[data-tema="claro"] .cab-login:hover{border-color:#8f63ff;background:linear-gradient(180deg,#efe8ff,#e2d8ff)}
html[data-tema="claro"] .tema-boton{color:#5b21d6;background:#fff;border-color:rgb(24 16 48 / .12);box-shadow:0 1px 2px rgb(30 15 70 / .06),0 10px 24px -14px rgb(60 20 160 / .4)}
html[data-tema="claro"] .tema-boton:hover{border-color:rgb(107 43 255 / .5);color:#3b1fb0}
html[data-tema="claro"] .tema-boton:focus-visible,html[data-tema="claro"] .tema-seg button:focus-visible{outline-color:#5b21d6}
/* selector de idioma de la barra (si se muestra) */
html[data-tema="claro"] .idioma{background:#fff;border-color:rgb(107 43 255 / .2);box-shadow:inset 0 1px 0 #fff,0 6px 16px -10px rgb(60 20 160 / .35)}
html[data-tema="claro"] .idioma button{color:var(--c-num)}
html[data-tema="claro"] .idioma button:hover{color:var(--c-tinta)}
html[data-tema="claro"] .idioma button[aria-pressed="true"]{color:#fff}
html[data-tema="claro"] .idioma button:focus-visible{outline-color:#5b21d6}

/* ---------- panel del ☰ ---------- */
html[data-tema="claro"] .menu-movil{
  background:radial-gradient(120% 90% at 100% 0,rgb(107 43 255 / .09),transparent 55%),linear-gradient(180deg,rgb(255 255 255 / .97),rgb(250 249 252 / .97));
  border-color:rgb(24 16 48 / .08);box-shadow:0 40px 100px -34px rgb(40 20 90 / .38),0 2px 6px rgb(30 15 70 / .05),inset 0 1px 0 #fff}
html[data-tema="claro"] .menu-movil .mm-nav a{color:var(--c-tinta)}
html[data-tema="claro"] .mm-nav a i{color:var(--c-num)}
html[data-tema="claro"] .mm-nav a small{color:var(--c-tinta-3)}
html[data-tema="claro"] .mm-nav a svg{color:#6b2bff}
html[data-tema="claro"] .menu-movil .mm-nav a:hover{background:rgb(107 43 255 / .06)}
html[data-tema="claro"] .mm-nav a:hover i{color:#5b21d6}
html[data-tema="claro"] .mm-tarjeta{border-color:rgb(107 43 255 / .16);background:radial-gradient(120% 120% at 0 0,rgb(107 43 255 / .12),transparent 60%),#faf8ff}
html[data-tema="claro"] .mm-tarjeta small{color:var(--c-violeta)}
html[data-tema="claro"] .menu-movil .mm-mail{color:var(--c-tinta)}
html[data-tema="claro"] .mm-tarjeta p{color:var(--c-tinta-3)}
html[data-tema="claro"] .mm-juegos,html[data-tema="claro"] .mm-idioma,html[data-tema="claro"] .mm-tema{border-color:rgb(24 16 48 / .09);background:#fff;color:#1b1a22;box-shadow:0 1px 2px rgb(30 15 70 / .04)}
html[data-tema="claro"] .mm-juegos:hover{border-color:#8f63ff;background:#f7f3ff}
html[data-tema="claro"] .tema-seg{background:#f6f4fa;border-color:rgb(107 43 255 / .18);box-shadow:inset 0 1px 2px rgb(24 16 48 / .06)}
html[data-tema="claro"] .tema-seg::before{background:linear-gradient(180deg,transparent,rgb(107 43 255 / .25),transparent)}
html[data-tema="claro"] .tema-seg button{color:var(--c-num)}
html[data-tema="claro"] .tema-seg button:hover{color:var(--c-tinta)}
html[data-tema="claro"] .tema-seg button[aria-pressed="true"]{color:#fff}
html[data-tema="claro"] .mm-pie{border-top-color:rgb(24 16 48 / .08);color:var(--c-num)}
html[data-tema="claro"] .menu-movil .mm-legal a{color:var(--c-tinta-3)}
html[data-tema="claro"] .menu-movil .mm-legal a:hover{color:var(--c-tinta)}
@media (max-width:1180px){
  /* velo detrás del menú abierto: papel esmerilado en vez de noche */
  html[data-tema="claro"] .cab.abierto::before{background:radial-gradient(90% 60% at 80% 0%,rgb(107 43 255 / .1),transparent 70%),rgb(243 241 236 / .74)}
  html[data-tema="claro"] .cab-menu{border-color:rgb(24 16 48 / .12);background:#fff}
}

/* ---------- 1 · portada ---------- */
html[data-tema="claro"] .hero .cinta::after,html[data-tema="claro"] .hero.globo-ok .cinta::after{background:none}
html[data-tema="claro"] .hero .cinta video{opacity:.18;filter:invert(1) hue-rotate(180deg)}   /* sólo si no hay WebGL */
html[data-tema="claro"] .hero-luz{mix-blend-mode:multiply;background:radial-gradient(circle 300px at var(--mx,50%) var(--my,50%),rgb(143 99 255 / .16),rgb(107 43 255 / .05) 45%,transparent 70%)}
html[data-tema="claro"] .hero h1{color:var(--c-tinta)}
html[data-tema="claro"] .hero h1 [data-lui~="rotan"]{color:#5b21d6}
html[data-tema="claro"] .hero h1 [data-lui~="rotan"]::after{background:linear-gradient(90deg,#6b2bff,#b49cff 60%,transparent);box-shadow:0 6px 16px -4px rgb(107 43 255 / .45);opacity:.9}
html[data-tema="claro"] .hero-lema{color:var(--c-tinta-2)}
html[data-tema="claro"] .hero-lema em{color:#5b21d6}
html[data-tema="claro"] .hero-lema::before{box-shadow:0 2px 8px rgb(107 43 255 / .45)}
html[data-tema="claro"] .hero .hero-cta{box-shadow:0 0 0 1px rgb(107 43 255 / .2),0 18px 40px -14px rgb(91 33 245 / .65),inset 0 1px 0 rgb(255 255 255 / .25)}
html[data-tema="claro"] .hero .hero-sec,html[data-tema="claro"] .hero .acciones .boton.borde{color:var(--c-tinta);background:rgb(255 255 255 / .78);border-color:rgb(24 16 48 / .14);
  box-shadow:0 1px 2px rgb(30 15 70 / .05),0 14px 30px -20px rgb(60 20 160 / .4)}
html[data-tema="claro"] .hero .hero-sec:hover{border-color:#8f63ff;background:#fff}
@media (max-width:640px){
  /* la palabra que rota va con degradado en móvil: el oscuro usa lavandas que no se leen sobre papel */
  html[data-tema="claro"] .hero h1 [data-lui~="rotan"] > :first-child{background:var(--c-estela);-webkit-background-clip:text;background-clip:text;filter:none}
}

/* ---------- 2 · franja de logos ---------- */
html[data-tema="claro"] .marcas{border-color:var(--c-filete)}
html[data-tema="claro"] .marcas .rotulo{color:var(--c-tinta-3)}
html[data-tema="claro"] .marca,html[data-tema="claro"] .marcas .marca{color:#5f5d6c}
html[data-tema="claro"] .marca:hover{color:var(--c-tinta)}

/* ---------- títulos y botones comunes ---------- */
html[data-tema="claro"] .rotulo{color:var(--c-violeta)}
html[data-tema="claro"] .rotulo::before{box-shadow:0 0 10px rgb(107 43 255 / .55)}
html[data-tema="claro"] .cabeza p{color:var(--c-tinta-2)}
html[data-tema="claro"] .qh h2 em,html[data-tema="claro"] .fila h3 em,html[data-tema="claro"] .intro2 h2 em,html[data-tema="claro"] .pie2-top h2 em,
html[data-tema="claro"] .caso-cab h2 em,html[data-tema="claro"] .diary3 h2 em,html[data-tema="claro"] .cfg .cabeza h2 em{background:var(--c-estela);-webkit-background-clip:text;background-clip:text;color:transparent;filter:none}
html[data-tema="claro"] .boton.borde{color:var(--c-tinta);border-color:var(--c-filete-2)}
html[data-tema="claro"] .boton.linea{color:var(--c-tinta);background:#fff;border-color:rgb(24 16 48 / .16);box-shadow:0 1px 2px rgb(30 15 70 / .05)}
html[data-tema="claro"] .boton.linea:hover{border-color:#8f63ff;background:#faf8ff;box-shadow:0 12px 30px -18px rgb(91 33 245 / .6)}
html[data-tema="claro"] .boton.pastilla.blanca{background:var(--c-tinta);color:#fff;box-shadow:0 16px 36px -18px rgb(24 16 48 / .7)}
html[data-tema="claro"] .boton.pastilla.blanca .circ{background:linear-gradient(135deg,#7c4dff,#5b21f5);color:#fff}
html[data-tema="claro"] .boton.pastilla.blanca:hover{box-shadow:0 18px 40px -16px rgb(91 33 245 / .55)}
html[data-tema="claro"] .boton.pastilla.oscura{color:var(--c-tinta);background:#fff;border-color:rgb(24 16 48 / .14);box-shadow:0 1px 2px rgb(30 15 70 / .05),0 14px 30px -20px rgb(60 20 160 / .4)}
html[data-tema="claro"] .boton.pastilla.oscura .circ{background:linear-gradient(135deg,#7c4dff,#5b21f5)}
html[data-tema="claro"] .boton.pastilla.oscura:hover{border-color:#8f63ff;background:#faf8ff}
html[data-tema="claro"] .boton:focus-visible{outline-color:#5b21d6}

/* ---------- 3 · servicios: tarjeta blanca con el objeto de cristal en su versión clara ---------- */
html[data-tema="claro"] .servicio{background:var(--c-tarjeta);border-color:rgb(24 16 48 / .07);box-shadow:var(--c-sombra);--lui-tono:#6b2bff}
html[data-tema="claro"] .servicio:hover,html[data-tema="claro"] .servicio:focus-visible{border-color:rgb(107 43 255 / .28);box-shadow:var(--c-sombra-alta)}
html[data-tema="claro"] .servicio .num{color:var(--c-num)}
html[data-tema="claro"] .servicio h3{color:var(--c-tinta)}
html[data-tema="claro"] .servicio p{color:var(--c-tinta-3)}
html[data-tema="claro"] .servicio .ir{border-color:rgb(24 16 48 / .14);color:var(--c-tinta);background:#fff}
html[data-tema="claro"] .servicio:hover .ir{background:#6b2bff;border-color:#6b2bff;color:#fff}
/* img/s-*-claro.jpg (fondo casi blanco, lo pone assets/tema.js): sin «screen», que sobre blanco lo borraría;
   la máscara radial de siempre funde su fondo con la tarjeta */
html[data-tema="claro"] .servicio .objeto{mix-blend-mode:normal}
/* brightness/contrast llevan su fondo (#f6f2f2…#fafafa) a blanco puro: sin recuadro sobre la tarjeta */
html[data-tema="claro"] .servicio .objeto img{mix-blend-mode:normal;filter:brightness(1.045) contrast(1.06)}
html[data-tema="claro"] .servicio:hover .objeto img{filter:brightness(1.045) contrast(1.06) saturate(1.12)}
html[data-tema="claro"] [data-lui~="spotlight"]::before{background:radial-gradient(var(--lui-radio) circle at var(--lui-mx,50%) var(--lui-my,0%),rgb(107 43 255 / .07),transparent 68%)}

/* ---------- 4 · qué hacemos (ya era clara): lámina blanca sobre el papel ---------- */
html[data-tema="claro"] .qh{background:#fbfaf8}
html[data-tema="claro"] .qh .qh-pieza{border-color:rgb(24 16 48 / .07)}
@media (min-width:641px){
  html[data-tema="claro"] main > .qh{box-shadow:0 0 0 1px rgb(24 16 48 / .06),0 40px 110px -50px rgb(60 20 160 / .38),inset 0 1px 0 #fff}
}

/* ---------- 5 · caso ---------- */
html[data-tema="claro"] .caso-cab h2,html[data-tema="claro"] .fila h3{color:var(--c-tinta)}
html[data-tema="claro"] .fila{border-bottom-color:var(--c-filete)}
html[data-tema="claro"] .fila-num i{background:rgb(24 16 48 / .2)}
html[data-tema="claro"] .fila-num b{box-shadow:0 8px 20px -6px rgb(91 33 245 / .6)}
html[data-tema="claro"] .fila-num b::before{border-color:rgb(107 43 255 / .45)}
html[data-tema="claro"] .fila-etq{color:var(--c-tinta-3)}
html[data-tema="claro"] .fila p{color:var(--c-tinta-2)}
/* paneles de buscador, gráfica y mapa: tarjeta blanca */
html[data-tema="claro"] .panel2{background:#fff;border-color:rgb(24 16 48 / .08);box-shadow:var(--c-sombra)}
html[data-tema="claro"] .fila:hover .panel2{border-color:rgb(107 43 255 / .25);box-shadow:var(--c-sombra-alta)}
html[data-tema="claro"] .panel2 > :first-child{border-right-color:rgb(24 16 48 / .08);border-bottom-color:rgb(24 16 48 / .08)}
html[data-tema="claro"] .g-caja{border-color:rgb(24 16 48 / .14);color:#1b1a22;box-shadow:0 1px 3px rgb(30 15 70 / .06)}
html[data-tema="claro"] .g-caja svg{color:var(--c-tinta-3)}
html[data-tema="claro"] .g-res.activo{background:#f5f2fd;box-shadow:inset 0 0 0 1px rgb(107 43 255 / .1)}
html[data-tema="claro"] .g-res:not(.activo){opacity:.7}
html[data-tema="claro"] .g-res i{background:#e2dfea}
html[data-tema="claro"] .g-res .mini{background:#eceaf2}
html[data-tema="claro"] .estrellas{color:#e8a300}
html[data-tema="claro"] .estrellas em{color:var(--c-tinta-3)}
html[data-tema="claro"] .dato-cab span,html[data-tema="claro"] .dato-eti{color:var(--c-tinta-3)}
html[data-tema="claro"] .dato-cab b{color:#15803d;background:rgb(22 163 74 / .08);border-color:rgb(22 163 74 / .24)}
html[data-tema="claro"] .barras6 i{box-shadow:0 8px 18px -8px rgb(91 33 245 / .55)}
html[data-tema="claro"] .meses{color:var(--c-num)}
html[data-tema="claro"] .x6{color:#6b2bff}
html[data-tema="claro"] .barras12 i{background:#7c4dff}
html[data-tema="claro"] .barras12 i.g{background:#e2dfea}
/* fila 3: mapa claro (img/c-mapa-claro.jpg, lo pone assets/tema.js) integrado en la tarjeta blanca */
html[data-tema="claro"] #caso .mapa-img{background:#eee7fa}
html[data-tema="claro"] #caso .mapa-lienzo img{filter:none;mix-blend-mode:normal}
/* el encuadre del mapa claro no es el del oscuro: Marbella cae algo más al este y más arriba */
html[data-tema="claro"] #caso .mapa-pin{--x:46.6%!important;--y:66%!important}
html[data-tema="claro"] .mapa-pin b{box-shadow:0 6px 14px rgb(91 33 245 / .45)}
html[data-tema="claro"] .mapa-pin b::after{background:#fff}
html[data-tema="claro"] .mapa-pin i{border-color:#6b2bff}
html[data-tema="claro"] .mapa .pin-chip{background:rgb(255 255 255 / .9);border-color:rgb(24 16 48 / .1);color:var(--c-tinta-3);box-shadow:0 12px 30px -16px rgb(60 20 160 / .45)}
html[data-tema="claro"] .mapa .pin-chip span b{color:var(--c-tinta)}
html[data-tema="claro"] .g-g{box-shadow:0 0 0 1px rgb(24 16 48 / .1)}
html[data-tema="claro"] .chip3{border-color:rgb(24 16 48 / .08);background:#faf9fc}
html[data-tema="claro"] .chip3 svg{color:#6b2bff}
html[data-tema="claro"] .chip3 b{color:#5b21d6}
html[data-tema="claro"] .chip3 span{color:var(--c-tinta-3)}

/* ---------- 6 · cómo trabajamos ---------- */
html[data-tema="claro"] .intro2 h2{color:var(--c-tinta)}
html[data-tema="claro"] .intro2 p{color:var(--c-tinta-2)}
html[data-tema="claro"] .pasos::before{box-shadow:0 0 10px rgb(107 43 255 / .3)}
html[data-tema="claro"] .pasos li::before{background:#7c4dff;box-shadow:0 0 0 5px rgb(143 99 255 / .18),0 4px 12px rgb(91 33 245 / .45)}
html[data-tema="claro"] .pasos li,html[data-tema="claro"] .proceso2 .pasos li{background:#fff;border-color:rgb(24 16 48 / .07);box-shadow:var(--c-sombra)}
html[data-tema="claro"] .pasos li:hover{border-color:rgb(107 43 255 / .28);box-shadow:var(--c-sombra-alta)}
html[data-tema="claro"] .p-num{border-right-color:rgb(24 16 48 / .1)}
html[data-tema="claro"] .p-num b{color:#6b2bff}
html[data-tema="claro"] .p-num span{color:var(--c-tinta-3)}
html[data-tema="claro"] .p-txt h3{color:var(--c-tinta)}
html[data-tema="claro"] .p-txt p,html[data-tema="claro"] .proceso2 .p-txt p{color:var(--c-tinta-3)}
/* los iconos están pintados sobre negro: azulejo oscuro redondeado, como un icono de app */
html[data-tema="claro"] .pasos img{mix-blend-mode:normal;-webkit-mask:none;mask:none;background:#000;clip-path:inset(14% round 20px)}
@media (max-width:640px){
  html[data-tema="claro"] .proceso2 .pasos::before{box-shadow:0 0 8px rgb(107 43 255 / .3)}
  html[data-tema="claro"] .proceso2 .pasos li::before{background:#7c4dff;box-shadow:0 0 0 4px rgb(143 99 255 / .18),0 3px 10px rgb(91 33 245 / .4)}
  html[data-tema="claro"] .proceso2 .p-num b{background:linear-gradient(180deg,#8f63ff,#4b1fd1);-webkit-background-clip:text;background-clip:text;color:transparent}
  html[data-tema="claro"] .proceso2 .p-num span{color:var(--c-violeta);border-color:rgb(107 43 255 / .24);background:rgb(107 43 255 / .06)}
  html[data-tema="claro"] .proceso2 .p-txt{border-top-color:rgb(24 16 48 / .08)}
  html[data-tema="claro"] .proceso2 .pasos img{clip-path:inset(12% round 18px)}
}

/* ---------- 7 · diary: el libro es un objeto negro y se queda negro sobre el papel ---------- */
html[data-tema="claro"] .diary3 h2{color:var(--c-tinta)}
html[data-tema="claro"] .diary3-der p{color:var(--c-tinta-2)}
html[data-tema="claro"] .dl-suelo{background:radial-gradient(50% 50% at 50% 54%,rgb(24 12 60 / .42),rgb(24 12 60 / .16) 45%,transparent 72%),radial-gradient(48% 46% at 50% 50%,rgb(107 43 255 / .16),transparent 70%)}
html[data-tema="claro"] .diario-flecha{color:var(--c-tinta);background:#fff;border-color:rgb(24 16 48 / .12);box-shadow:0 1px 2px rgb(30 15 70 / .06),0 12px 28px -16px rgb(60 20 160 / .45)}
html[data-tema="claro"] .diario-flecha:hover{color:#fff;background-color:#6b2bff;border-color:#6b2bff}
html[data-tema="claro"] .diario-flecha:focus-visible,html[data-tema="claro"] .diario-sonido:focus-visible,html[data-tema="claro"] .diario-puntos button:focus-visible{outline-color:#5b21d6}
html[data-tema="claro"] .diario-barra{color:var(--c-tinta-3)}
html[data-tema="claro"] .diario-cuenta b{color:var(--c-tinta)}
html[data-tema="claro"] .diario-puntos button::before{background:#d3cfe0}
html[data-tema="claro"] .diario-puntos button:hover::before,html[data-tema="claro"] .diario-puntos button[aria-current="true"]::before{background:#6b2bff}
html[data-tema="claro"] .diario-pista{color:var(--c-tinta-3)}
html[data-tema="claro"] .diario-sonido{border-color:rgb(24 16 48 / .14);color:var(--c-violeta);background:#fff}
html[data-tema="claro"] .diario-sonido:hover{border-color:#6b2bff;color:var(--c-tinta)}
/* sin JS (lista de entradas como tarjetas) */
html[data-tema="claro"] .diario-entrada article{background:#fff;border-color:rgb(24 16 48 / .08);box-shadow:var(--c-sombra)}
html[data-tema="claro"] .diario-meta{color:var(--c-tinta-3)}
html[data-tema="claro"] .diario-meta b{color:var(--c-violeta)}
html[data-tema="claro"] .diario-entrada h3{color:var(--c-tinta)}
html[data-tema="claro"] .diario-entrada p:not(.diario-meta){color:var(--c-tinta-2)}

/* ---------- 8 · pie ---------- */
html[data-tema="claro"] .pie2{border-top-color:var(--c-filete)}
html[data-tema="claro"] .pie2-top{border-bottom-color:var(--c-filete)}
html[data-tema="claro"] .pie2-top h2{color:var(--c-tinta)}
html[data-tema="claro"] .pie2-mail{color:var(--c-tinta);background-image:linear-gradient(#6b2bff,#6b2bff)}
html[data-tema="claro"] .pie2-mail .circ{color:#fff;box-shadow:0 12px 26px -10px rgb(91 33 245 / .7)}
html[data-tema="claro"] .pie2-marca p{color:var(--c-tinta-2)}
html[data-tema="claro"] .pie2 h3{color:var(--c-violeta)}
html[data-tema="claro"] .pie2 nav a{color:#24232c}
html[data-tema="claro"] .pie2 nav a:hover{color:var(--c-violeta)}
html[data-tema="claro"] .pie2-hora{color:var(--c-tinta-3)}
html[data-tema="claro"] .pie2-hora b{color:var(--c-tinta)}
html[data-tema="claro"] .pie2-dir{color:var(--c-tinta-3)}
html[data-tema="claro"] .pie2 .pie2-bajo{border-top-color:var(--c-filete);color:var(--c-tinta-3)}
html[data-tema="claro"] .pie2-copy i{box-shadow:0 0 8px rgb(107 43 255 / .5)}
html[data-tema="claro"] .pie2-copy b{color:#b3b0bf}
html[data-tema="claro"] .pie2 .pie2-legal{background:#fff;border-color:rgb(24 16 48 / .08);box-shadow:0 1px 2px rgb(30 15 70 / .04)}
html[data-tema="claro"] .pie2 .pie2-legal a{color:var(--c-tinta-2)}
html[data-tema="claro"] .pie2 .pie2-legal a + a::before{background:#c9c5d4}
html[data-tema="claro"] .pie2 .pie2-legal a:hover{color:var(--c-tinta);background:rgb(107 43 255 / .08)}
html[data-tema="claro"] .pie2 .pie2-cookies{color:var(--c-tinta-2);background:#fff;border-color:rgb(24 16 48 / .14)}
html[data-tema="claro"] .pie2 .pie2-cookies svg{color:#6b2bff}
html[data-tema="claro"] .pie2 .pie2-cookies:hover{color:var(--c-tinta);border-color:#8f63ff;background:#faf8ff}
html[data-tema="claro"] .pie2-arriba{color:var(--c-tinta);background:#fff;border-color:rgb(24 16 48 / .14)}
html[data-tema="claro"] .pie2-arriba:hover{color:#fff;background:#6b2bff;border-color:#6b2bff}
html[data-tema="claro"] .pie2 a:focus-visible,html[data-tema="claro"] .pie2 button:focus-visible,html[data-tema="claro"] .pie2-mail:focus-visible{outline-color:#5b21d6}
@media (max-width:640px){
  html[data-tema="claro"] .pie2-mail{border-color:rgb(107 43 255 / .2);background:linear-gradient(135deg,rgb(107 43 255 / .07),#fff 70%);box-shadow:var(--c-sombra)}
  html[data-tema="claro"] .pie2-cols > div:last-child{border-color:rgb(107 43 255 / .16);background:radial-gradient(90% 120% at 0% 0%,rgb(107 43 255 / .08),transparent 60%),#fff;box-shadow:var(--c-sombra)}
}
@media (max-width:900px){
  html[data-tema="claro"] .pie2-arriba{border-color:rgb(107 43 255 / .3);background:#f5f1ff;color:#3b1fb0}
}

/* ---------- diálogo de cookies ---------- */
html[data-tema="claro"] .cookies-dlg{background:#fff;color:#1b1a22;border-color:rgb(107 43 255 / .18);box-shadow:0 40px 100px -30px rgb(40 20 90 / .45)}
html[data-tema="claro"] .cookies-dlg::backdrop{background:rgb(40 30 70 / .3)}
html[data-tema="claro"] .cookies-dlg h3{color:var(--c-tinta)}
html[data-tema="claro"] .cookies-dlg p{color:var(--c-tinta-2)}
html[data-tema="claro"] .cookies-dlg p a{color:var(--c-violeta)}
html[data-tema="claro"] .cookies-op{border-color:rgb(24 16 48 / .1);color:var(--c-tinta-3);background:#faf9fc}
html[data-tema="claro"] .cookies-op b{color:var(--c-tinta)}

/* ---------- botón flotante del ovni y menú de juegos (los juegos, a pantalla completa, siguen oscuros) ---------- */
html[data-tema="claro"] .ovni-boton:not(.activo){color:#fff;background:radial-gradient(circle at 50% 28%,#8a5cff,#4b1fd1 72%);border-color:rgb(255 255 255 / .55);
  box-shadow:0 0 0 5px rgb(107 43 255 / .1),0 14px 30px -10px rgb(91 33 245 / .75),inset 0 1px 0 rgb(255 255 255 / .35)}
html[data-tema="claro"] .ovni-boton::before{border-color:rgb(107 43 255 / .35)}
html[data-tema="claro"] .ovni-boton:focus-visible{outline-color:#5b21d6}
html[data-tema="claro"] .juegos-menu.dv-consola{background:radial-gradient(120% 80% at 100% 0,rgb(107 43 255 / .1),transparent 60%),linear-gradient(180deg,rgb(255 255 255 / .97),rgb(250 249 252 / .97));
  border-color:rgb(24 16 48 / .08);box-shadow:0 40px 100px -34px rgb(40 20 90 / .45),0 2px 6px rgb(30 15 70 / .05),inset 0 1px 0 #fff}
html[data-tema="claro"] .juegos-menu .dv-con-cab p{background:linear-gradient(100deg,#0c0c10 35%,#5b21d6 75%,#8f63ff);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-tema="claro"] .juegos-menu .dv-con-cab small{color:var(--c-tinta-3)}
html[data-tema="claro"] .juegos-menu .dv-mod{border-color:rgb(24 16 48 / .1);box-shadow:0 14px 30px -20px rgb(40 15 120 / .5)}

/* ---------- reducir movimiento: sin animación del cambio ---------- */
@media (prefers-reduced-motion:reduce){html.tema-vt::view-transition-new(root){animation:none}}

/* logo claro con las mismas proporciones que el oscuro */
html[data-tema="claro"] .cab .lui-logo img{height:54px!important;width:auto!important}
@media (max-width:640px){html[data-tema="claro"] .cab .lui-logo img{height:38px!important}}