/* Hosteate · tema claro de la portada (10-oct-2026), estilo «ChatGPT modo claro».
   La carga siempre index.php, pero todo lo de color cuelga de html[data-tema="claro"] (cookie hst_tema
   o ?tema=claro; por defecto oscuro, como siempre). Lo que no depende del tema: el interruptor sol/luna,
   el cambio sin transiciones a medio camino y la cabecera integrada con el hero. Va encima de
   estilo-v4 · v4-web · v4-hero · v4-precios · v4-faq · v4-red · v4-barra. */

/* ── 1. Tokens ─────────────────────────────────────── */
html[data-tema="claro"]{
  --fondo:#ffffff; --fondo-2:#f7f7f8; --fondo-3:#efeff1;
  --sup:#ffffff; --sup-2:#f7f7f8; --sup-3:#f0f0f1;
  --tinta:#0d0d0d; --tinta-2:#5d5d5d; --tinta-3:#8e8e8e;
  --linea:#e5e5e5; --linea-2:#dcdcdf;
  --inv:#3b5bff; --inv-t:#ffffff;
  --rgb:13,13,13;
  --acento-rgb:59,91,255;
  --azul:#3b5bff; --azul-h:#2f4ce6; --azul-claro:#3b5bff; --azul-tx:#2b47e0;
  --verde:#1a7f37; --verde-tx:#1a7f37; --ambar:#bf8700; --ambar-tx:#9a6700; --rojo:#cf222e; --rojo-tx:#cf222e;
  --verde-f:rgba(26,127,55,.09); --ambar-f:rgba(191,135,0,.10); --rojo-f:rgba(207,34,46,.08); --azul-f:rgba(59,91,255,.08);
  --cl-borde:#e5e5e5;
  --cl-sombra:0 1px 2px rgba(0,0,0,.04),0 4px 16px -6px rgba(0,0,0,.06);
  --cl-sombra-alta:0 2px 6px rgba(0,0,0,.05),0 18px 44px -18px rgba(0,0,0,.16);
  color-scheme:light;
}
html[data-tema="claro"] body{background:#ffffff;color:var(--tinta)}
html[data-tema="claro"] ::selection{background:rgba(59,91,255,.18)}

/* Tarjetas: blancas, borde #e5e5e5 y sombra muy suave */
html[data-tema="claro"] :is(.cifras .cifra,.celda,.red .red-tx,.eventos,.tec,.plan,.pregs details,.paso){
  background:#ffffff;border:1px solid var(--cl-borde);box-shadow:var(--cl-sombra)}
html[data-tema="claro"] :is(.cifra,.tec,.pregs details):hover{background:#fafafa;border-color:#dadada}

/* ── 2. Botones ────────────────────────────────────── */
html[data-tema="claro"] .btn{background:#f0f0f1;color:var(--tinta)}
html[data-tema="claro"] .btn:hover{background:#e6e6e8}
html[data-tema="claro"] .btn.lleno,html[data-tema="claro"] .btn.azul{background:var(--azul);border-color:var(--azul);color:#fff}
html[data-tema="claro"] .btn.lleno:hover,html[data-tema="claro"] .btn.azul:hover{background:var(--azul-h);border-color:var(--azul-h)}
html[data-tema="claro"] .btn.fantasma{background:transparent;border-color:var(--linea-2)}
html[data-tema="claro"] .btn-wa .wa-i{color:#1aa851}

/* ── 3. Barra cápsula (v4-barra.css) ───────────────── */
html[data-tema="claro"] .barra{background:transparent}
html[data-tema="claro"] .bn-cap{background:rgba(255,255,255,.72);border-color:rgba(0,0,0,.08);
  box-shadow:0 10px 30px -16px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.9)}
html[data-tema="claro"] .barra.bn.compacta .bn-cap{background:rgba(255,255,255,.88);border-color:rgba(0,0,0,.09);
  box-shadow:0 16px 36px -16px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.02)}
html[data-tema="claro"] .bn-cap::before{background:radial-gradient(220px 120px at var(--mx,50%) var(--my,50%),rgba(59,91,255,.07),transparent 70%)}
html[data-tema="claro"] .bn-cap::after{background:radial-gradient(160px 60px at var(--mx,50%) 0,rgba(59,91,255,.35),transparent 75%),radial-gradient(160px 60px at var(--mx,50%) 100%,rgba(59,91,255,.22),transparent 75%)}
html[data-tema="claro"] .bn-ind{background:rgba(0,0,0,.05);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
html[data-tema="claro"] .bn-ind::after{background:linear-gradient(90deg,transparent,#3b5bff,transparent);box-shadow:0 0 10px 1px rgba(59,91,255,.45)}
html[data-tema="claro"] .bn-fondo{background:rgba(255,255,255,.96);border-color:rgba(0,0,0,.08);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.02)}
html[data-tema="claro"] .bn-fondo::after{background:radial-gradient(420px 220px at var(--px,50%) -40px,rgba(59,91,255,.06),transparent 70%)}
html[data-tema="claro"] .bn-pico{background:#fff;border-color:rgba(0,0,0,.08)}
html[data-tema="claro"] .bn-ojo span{color:#2b47e0;background:rgba(59,91,255,.08);box-shadow:inset 0 0 0 1px rgba(59,91,255,.18)}
html[data-tema="claro"] .bn-sub a:hover,html[data-tema="claro"] .bn-sub a:focus-visible{background:#f4f4f5}
html[data-tema="claro"] .bn-todo{color:#2b47e0}
html[data-tema="claro"] .bn-todo:hover{color:#1d36b8}
html[data-tema="claro"] .bn-clip{background:radial-gradient(70% 70% at 50% 55%,rgba(59,91,255,.10),transparent 70%),
  linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px) 0 0/22px 22px,#f7f7f8;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
html[data-tema="claro"] .bn-clip::after{background:radial-gradient(120% 90% at 50% 50%,transparent 60%,rgba(247,247,248,.7))}
@media (max-width:1000px){
  html[data-tema="claro"] .bn-hamb[aria-expanded="true"]{background:rgba(0,0,0,.05)}
  html[data-tema="claro"] .bn-movil,html[data-tema="claro"] .bn-menu{background:rgba(255,255,255,.97);border-color:rgba(0,0,0,.08);box-shadow:0 30px 70px -20px rgba(0,0,0,.25)}
  html[data-tema="claro"] .bn-m[open]{background:#f7f7f8}
  html[data-tema="claro"] .bn-m li a{background:#f4f4f5;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
  html[data-tema="claro"] .bn-m li:first-child a{color:#2b47e0;background:rgba(59,91,255,.08);box-shadow:inset 0 0 0 1px rgba(59,91,255,.2)}
}
html[data-tema="claro"] .idiomas{background:#f0f0f1}
html[data-tema="claro"] .idi.activo{background:#ffffff;box-shadow:0 1px 2px rgba(0,0,0,.08)}
html[data-tema="claro"] .bandera{box-shadow:0 0 0 1px rgba(0,0,0,.08)}
html[data-tema="claro"] .menu a:hover{background:#f4f4f5}

/* ── 4. Hero ───────────────────────────────────────── */
/* La foto (haces blancos sobre negro) invertida: haces grises sobre blanco, muy tenue */
html[data-tema="claro"] .hero .hero-ft{filter:invert(1) grayscale(1) contrast(.9);opacity:.38}
html[data-tema="claro"] .hero h1 .hueco,html[data-tema="claro"] .cierre h2 .hueco{background-image:linear-gradient(90deg,#3b5bff,#7b61ff)}
html[data-tema="claro"] .pildoras li{background:rgba(255,255,255,.8);border-color:#e5e5e5;box-shadow:0 1px 2px rgba(0,0,0,.04)}
html[data-tema="claro"] .pildoras svg{stroke:#3b5bff}
html[data-tema="claro"] .hero .btn:not(.lleno){background:#fff;border-color:#e5e5e5;box-shadow:0 1px 2px rgba(0,0,0,.04)}
html[data-tema="claro"] .hero .btn:not(.lleno):hover{background:#f7f7f8}

/* Tarjetas flotantes del panel (v4-hero.css) */
html[data-tema="claro"] .ht{--ht-bg:rgba(255,255,255,.86);--ht-borde:#e5e5e5;--ht-t1:#0d0d0d;--ht-t2:#5d5d5d;--ht-t3:#8e8e8e;--ht-verde:#1a7f37;--ht-ambar:#9a6700}
html[data-tema="claro"] .ht-t{box-shadow:0 1px 2px rgba(0,0,0,.04),0 24px 50px -22px rgba(0,0,0,.22)}
html[data-tema="claro"] .ht-3 .ht-t{background:rgba(255,255,255,.82)}
html[data-tema="claro"] .ht-ico{background:#f4f4f5}
html[data-tema="claro"] .ht-cpu{border-top-color:#ececec}
html[data-tema="claro"] .ht-ok,html[data-tema="claro"] .ht-pag{background:rgba(26,127,55,.09)}
html[data-tema="claro"] .ht-pend{background:rgba(191,135,0,.10)}
html[data-tema="claro"] .ht-barra{background:#ececee}
html[data-tema="claro"] .ht-burb{background:#f4f4f5}
html[data-tema="claro"] .ht-gris{background:rgba(0,0,0,.05)}

/* ── 5. Cifras ─────────────────────────────────────── */
html[data-tema="claro"] .cifra .ci{background:rgba(59,91,255,.08);color:#3b5bff}

/* ── 7. Bento «01 · Por qué» ───────────────────────── */
/* Los clips son tarjetas oscuras translúcidas con fondo transparente: sobre blanco se verían
   grises y apagadas. Se invierten (invert + hue-rotate 180°: la luz se da la vuelta y el tono
   se queda), así salen como tarjetas claras con texto oscuro y el azul sigue siendo azul. */
html[data-tema="claro"] .celda.con-foto{background:#ffffff;color:var(--tinta)}
html[data-tema="claro"] .celda.con-foto::before{background:linear-gradient(180deg,transparent 45%,rgba(255,255,255,.94) 66%)}
html[data-tema="claro"] .celda.con-foto p{color:var(--tinta-2)}
html[data-tema="claro"] .celda.con-foto .ojo{color:var(--tinta-3)}
html[data-tema="claro"] .celda .grande-n{color:#3b5bff}
html[data-tema="claro"] :is(.celda,.faq-clip,.bn-clip) video{filter:invert(1) hue-rotate(180deg) drop-shadow(0 14px 22px rgba(0,0,0,.10))}
html[data-tema="claro"] .foco::after{background:radial-gradient(420px circle at var(--mx) var(--my),rgba(59,91,255,.05),transparent 60%)}

/* ── 8. Red: globo ─────────────────────────────────── */
html[data-tema="claro"] .red-vis{background:radial-gradient(70% 70% at 50% 50%,#ffffff,#f3f3f5);border:1px solid var(--cl-borde);box-shadow:var(--cl-sombra)}
html[data-tema="claro"] .ubi{background:#f7f7f8}
html[data-tema="claro"] :is(.ubi,.selector,.hs-op) .cod{background:#ffffff;box-shadow:inset 0 0 0 1px #e5e5e5}
html[data-tema="claro"] .donde-vis .marca-esq{color:var(--tinta-3)}

/* ── 9. Anti-DDoS ──────────────────────────────────── */
html[data-tema="claro"] .dd{background:#ffffff;border:1px solid var(--cl-borde);box-shadow:var(--cl-sombra)}
html[data-tema="claro"] .dd-escena{background:radial-gradient(90% 70% at 42% 46%,#ffffff,#f1f1f3 72%)}
html[data-tema="claro"] .dd-ilus{background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px #e5e5e5}
html[data-tema="claro"] .vivo::before{box-shadow:0 0 0 0 rgba(26,127,55,.4);animation-name:cl-latido}
@keyframes cl-latido{0%{box-shadow:0 0 0 0 rgba(26,127,55,.35)}70%{box-shadow:0 0 0 8px rgba(26,127,55,0)}100%{box-shadow:0 0 0 0 rgba(26,127,55,0)}}
html[data-tema="claro"] .dd-ley i.l{box-shadow:0 0 6px rgba(59,91,255,.4)}
html[data-tema="claro"] .dd-cifras{background:rgba(255,255,255,.9);border-top:1px solid var(--cl-borde)}
html[data-tema="claro"] .dd-cifra{border-right-color:var(--cl-borde)}
@media (max-width:860px){
  html[data-tema="claro"] .dd-cifras{background:#f7f7f8}
  html[data-tema="claro"] .dd .dd-cifra{background:#fff;border:1px solid var(--cl-borde)}
}
html[data-tema="claro"] .eventos td{border-bottom-color:#efefef}
html[data-tema="claro"] .eventos tbody tr:hover td{background:#fafafa}
html[data-tema="claro"] .eventos .bar i{background:#ececee}

/* ── 10. Catálogo ──────────────────────────────────── */
html[data-tema="claro"] .filtro{background:#f0f0f1}
html[data-tema="claro"] .filtro:hover{background:#e6e6e8}
html[data-tema="claro"] .filtro[aria-pressed="true"]{background:rgba(59,91,255,.08);color:#2b47e0;box-shadow:inset 0 0 0 1px rgba(59,91,255,.45)}
/* Logos de marca blancos (Next.js #FFFFFF, etc.) se verían blancos sobre blanco al pasar: en tinta */
html[data-tema="claro"] .tec:hover svg:is([style*="#FFFFFF"],[style*="#ffffff"],[style*="#FFF;"],[style*="#fff;"]),
html[data-tema="claro"] .tec:focus-within svg:is([style*="#FFFFFF"],[style*="#ffffff"]){color:var(--tinta);filter:none}
html[data-tema="claro"] .tec:hover svg,html[data-tema="claro"] .tec:focus-within svg{filter:none}
html[data-tema="claro"] .terminal{background:#0d0d0d}

/* ── 13. Precios ───────────────────────────────────── */
html[data-tema="claro"] .plan.dest{background:linear-gradient(180deg,rgba(59,91,255,.07),rgba(59,91,255,0) 50%),#fff;border-color:rgba(59,91,255,.5);
  box-shadow:0 0 0 1px rgba(59,91,255,.12),0 24px 50px -28px rgba(59,91,255,.4)}
html[data-tema="claro"] .plan .precio{border-top-color:#ececec}
html[data-tema="claro"] .plan .btn{background:#f0f0f1}
html[data-tema="claro"] .plan .btn:hover{background:#e6e6e8}
html[data-tema="claro"] .plan.dest .btn,html[data-tema="claro"] .plan .btn.lleno{background:var(--azul);color:#fff}
html[data-tema="claro"] .plan .calc{background:#fafafa;border-color:#e5e5e5}
html[data-tema="claro"] .plan .calc-barra{background:#ececee}
html[data-tema="claro"] .plan .calc-f.tot{border-top-color:#e5e5e5}
html[data-tema="claro"] .plan:hover .calc,html[data-tema="claro"] .plan:focus-within .calc,html[data-tema="claro"] .plan .calc.calc-on{background:rgba(59,91,255,.05);border-color:rgba(59,91,255,.35)}
html[data-tema="claro"] .plan:hover .calc-f.tot dd,html[data-tema="claro"] .plan:focus-within .calc-f.tot dd,html[data-tema="claro"] .plan .calc.calc-on .calc-f.tot dd{color:#2b47e0}
html[data-tema="claro"] .pagos span{background:#f4f4f5}

/* ── 14. Dudas (v4-faq.css: chat) ──────────────────── */
html[data-tema="claro"] .faq-q{background:#f4f4f4;border-color:#f4f4f4;color:#0d0d0d}
html[data-tema="claro"] .faq-msg summary:hover .faq-q{background:#ececec;border-color:#ececec}
html[data-tema="claro"] .faq-msg[open] .faq-q{background:#e8e8e8;border-color:#e8e8e8}
html[data-tema="claro"] .faq-mas{color:#8e8e8e}
html[data-tema="claro"] .faq-msg summary:hover .faq-mas{color:#5d5d5d;background:#f4f4f4}
html[data-tema="claro"] .faq-msg[open] .faq-mas{color:#5d5d5d}
html[data-tema="claro"] .faq-quien,html[data-tema="claro"] .faq-tx p{color:#0d0d0d}
html[data-tema="claro"] .faq-quien::after{background:#1a7f37;box-shadow:0 0 0 3px rgba(26,127,55,.14)}
html[data-tema="claro"] .faq-puntos{background:#f4f4f4;border-color:#ececec}
html[data-tema="claro"] .faq-puntos i{background:#8e8e8e}
html[data-tema="claro"] .faq-compo{background:#fff;border-color:#e5e5e5;color:#8e8e8e;box-shadow:0 10px 30px -12px rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.04)}
html[data-tema="claro"] .faq-compo:hover{background:#fff;border-color:#d4d4d4;color:#5d5d5d}
html[data-tema="claro"] .faq-compo-ir{background:#0d0d0d;color:#fff}
html[data-tema="claro"] .faq-compo:hover .faq-compo-ir{background:#000}

/* ── 15. Cierre (Hablemos) ─────────────────────────── */
html[data-tema="claro"] .cierre{background:#f7f7f8;border:1px solid var(--cl-borde)}
html[data-tema="claro"] .cierre::before{background:linear-gradient(90deg,#f7f7f8 25%,transparent)}
@media (max-width:860px){html[data-tema="claro"] .cierre::before{background:linear-gradient(180deg,#f7f7f8 40%,transparent)}}
html[data-tema="claro"] .cierre .btn:not(.lleno){background:#fff;border-color:#e5e5e5}
html[data-tema="claro"] .cierre .btn:not(.lleno):hover{background:#fafafa}
html[data-tema="claro"] .eco b{color:#0d0d0d}
html[data-tema="claro"] .ascii pre{color:rgba(59,91,255,.55)}

/* ── 16. Pie ───────────────────────────────────────── */
html[data-tema="claro"] .pie{border-top-color:#ececec;background:#fff}
html[data-tema="claro"] .grandes a{border-bottom-color:#ececec}
html[data-tema="claro"] .grandes a:hover{color:#3b5bff}
html[data-tema="claro"] .pie-bot{border-top-color:#ececec}
html[data-tema="claro"] .palabra-pie{background-image:linear-gradient(180deg,#ececee,#fff 85%)}

/* Cookies (app/medicion.php + v4-web.css) */
html[data-tema="claro"] body .ck{background:#fff;border-color:#e5e5e5;box-shadow:0 20px 50px -12px rgba(0,0,0,.22)}
html[data-tema="claro"] body .ck-t{color:#5d5d5d}
html[data-tema="claro"] body .ck-t a{color:#2b47e0}

/* ── 17. Interruptor sol/luna de la barra (v4_tema_boton() en app/v4.php) ── */
.bn-tema{position:relative;flex:none;width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;border-radius:999px;
  background:var(--sup);color:var(--tinta-2);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.bn-tema:hover{color:var(--tinta);background:var(--sup-3)}
.bn-tema:focus-visible{outline:2px solid var(--azul-claro,#7c93ff);outline-offset:2px}
.bn-tema-i{position:relative;width:18px;height:18px;display:block}
.bn-tema svg{position:absolute;inset:0;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s cubic-bezier(.22,.8,.24,1),opacity .3s}
/* Se enseña el tema al que se va: en oscuro, el sol; en claro, la luna */
.bn-tema .bn-luna{opacity:0;transform:rotate(-90deg) scale(.4)}
.bn-tema[aria-pressed="true"] .bn-sol{opacity:0;transform:rotate(90deg) scale(.4)}
.bn-tema[aria-pressed="true"] .bn-luna{opacity:1;transform:none}
html[data-tema="claro"] .bn-tema{background:#f0f0f1;color:#5d5d5d}
html[data-tema="claro"] .bn-tema:hover{background:#e6e6e8;color:#0d0d0d}
/* En el menú móvil: fila completa encima de «Consola» */
.bn-tema-m{display:none}
@media (max-width:1080px){
  .bn-tema-m{display:flex;justify-content:center;width:100%;height:48px;margin-top:8px;gap:10px;border-radius:999px;font:500 15px/1 var(--disp);color:var(--tinta)}
  .bn-tema-m .bn-tema-tx::after{content:""}
  .bn-tema-m[aria-pressed="true"] .bn-tema-tx{font-size:0}
  .bn-tema-m[aria-pressed="true"] .bn-tema-tx::after{content:"Modo oscuro";font-size:15px}
}
@media (max-width:560px){.barra.bn .acciones .bn-tema{width:32px;height:32px}}
@media (prefers-reduced-motion:reduce){.bn-tema svg{transition-duration:.01ms}}

/* Cambio de tema LIMPIO: durante el cambio no hay transiciones (nada se queda a medio camino);
   el revelado circular lo hace hstRevelar() de assets/js/v4-transiciones.js (View Transitions) */
html.tema-sin-trans,html.tema-sin-trans *,html.tema-sin-trans *::before,html.tema-sin-trans *::after{transition:none!important}
html.tema-sin-trans .bn-tema svg{transition:transform .5s cubic-bezier(.22,.8,.24,1),opacity .3s!important}   /* el sol↔luna sí gira */

/* Cabecera integrada con el hero (Ruben, 10-oct): sin franja propia en ninguno de los dos temas.
   El hero sube por detrás de los 68 px de la barra y recupera ese alto por dentro, así que
   cápsula, márgenes y contenido quedan exactamente donde estaban. Al bajar, la cápsula
   (.compacta, v4-barra.js) ya gana opacidad por sí sola. */
.barra.bn{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
main#top>.hero:first-child{margin-top:-68px;padding-top:68px;min-height:100svh}

/* Sin la intro (agujero negro sobre fondo negro) en claro: al recargar sería un fogonazo oscuro→claro.
   El script de index.php le quita la clase antes de que corra v4-intro.js; esto tapa el instante previo. */
html[data-tema="claro"].hi-intro::after{background:#fff}