/* Pilo Edit · PWA · NEUMORFISMO CÁLIDO, claro y oscuro (28-oct-2026, BORRADOR para aprobación de Cris).
   Se carga DESPUÉS de estilos.css, galeria.css, pilo-personaje.css y neo-paletas.css (tokens --n-*, generados por
   desarrollo/ui_colores/herramientas/paletas.py). Se activa con <html data-camino="neo" data-paleta="tomate|coral|mandarina">;
   data-modo lo pone assets/neo-modo.js: sigue prefers-color-scheme hasta que la persona toque el interruptor "Oscuro".
   Mismas reglas que la landing: superficies neumórficas suaves, botones SÓLIDOS sin degradado con texto AA,
   borde de 2 px en el botón principal en claro, foco de 3 px, el video siempre sobre el oscuro de la paleta,
   y en oscuro Pilo sobre su "foco" (placa del color de apoyo). Informe: desarrollo/ui_colores/INFORME.md */
@font-face{font-family:"Fredoka";font-weight:500 700;font-display:swap;src:url("../fuentes/fredoka-latin.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-display:swap;src:url("../fuentes/instrumentsans-latin.woff2") format("woff2")}

/* ---------- 1. tokens ---------- */
html[data-camino="neo"][data-paleta]{
  --sup:var(--n-superficie);--sup2:var(--n-superficie);--so:var(--n-sombra-oscura);--sc:var(--n-sombra-clara);
  --texto:var(--n-texto);--suave:var(--n-tenue);--tenue:var(--n-tenue);
  --cian:var(--n-texto);--azul:var(--n-texto);--violeta:var(--n-texto);--rosa:var(--n-error);--dorado:var(--n-texto);--verde:var(--n-exito);
  --cian-s:var(--n-apoyo);--vio-s:color-mix(in srgb,var(--n-acento) 25%,transparent);
  --titulo:"Fredoka","Instrument Sans",system-ui,sans-serif;--cuerpo:"Instrument Sans",system-ui,sans-serif;
  --sombra:8px 8px 18px var(--so),-8px -8px 18px var(--sc);--sombra-p:5px 5px 11px var(--so),-5px -5px 11px var(--sc);
  --hundido:inset 4px 4px 9px var(--so),inset -4px -4px 9px var(--sc);
}
html[data-camino="neo"][data-modo="claro"]{color-scheme:light}
html[data-camino="neo"][data-modo="oscuro"]{color-scheme:dark}
html[data-camino="neo"] body{background:var(--n-fondo);color:var(--n-texto)}
html[data-camino="neo"] :is(h1,h2,h3,.marca b){font-weight:700}
html[data-camino="neo"] h1 em{color:var(--n-texto);background:linear-gradient(transparent 60%,var(--n-apoyo) 60%,var(--n-apoyo) 92%,transparent 92%)}
html[data-camino="neo"][data-modo="oscuro"] h1 em{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--n-acento) 70%,transparent) 62%,color-mix(in srgb,var(--n-acento) 70%,transparent) 92%,transparent 92%)}
html[data-camino="neo"] .capa{background:color-mix(in srgb,var(--n-fondo) 70%,transparent)}

/* ---------- 2. botones y estados: acento SÓLIDO, nunca degradado ---------- */
html[data-camino="neo"] .btn{border-radius:999px;font-family:var(--titulo);font-weight:600;border:1.5px solid color-mix(in srgb,var(--n-texto) 38%,transparent)}
html[data-camino="neo"] .btn.prim{background:var(--n-acento);color:var(--n-sobre-acento);border:2px solid var(--n-borde-acento)}
html[data-camino="neo"] .btn.prim:active{background:var(--n-acento-toque);box-shadow:inset 3px 3px 7px rgba(0,0,0,.28)}
html[data-camino="neo"] .btn.ok{color:var(--n-exito)}html[data-camino="neo"] .btn.mal{color:var(--n-error)}
html[data-camino="neo"] :focus-visible{outline:3px solid var(--n-foco);outline-offset:3px}
html[data-camino="neo"] .logo{background:var(--n-acento);color:var(--n-sobre-acento);border-radius:14px}
html[data-camino="neo"] :is(.sino button[aria-pressed="true"],.momento[aria-pressed="true"] .cb,.paso.a i){background:var(--n-acento);color:var(--n-sobre-acento);box-shadow:none}
html[data-camino="neo"] .tm[aria-pressed="true"]::after{background:var(--n-acento);color:var(--n-sobre-acento)}
html[data-camino="neo"] .paso.a{color:var(--n-texto)}
html[data-camino="neo"] .paso.h i{background:var(--n-exito);color:var(--n-fondo)}
html[data-camino="neo"] .barra i{background:var(--n-acento)}
html[data-camino="neo"] .subir{border-color:var(--n-borde-acento)}
html[data-camino="neo"] .subir.listo{border-color:var(--n-exito)}
html[data-camino="neo"] :is(.tipo-pedido button[aria-pressed="true"],.paquetes button[aria-checked="true"]){color:var(--n-texto);box-shadow:var(--hundido),inset 0 0 0 2px var(--n-borde-acento)}
html[data-camino="neo"] .barra-cel{background:var(--n-superficie)}
html[data-camino="neo"] .barra-cel button[aria-current="page"]{background:var(--n-acento);color:var(--n-sobre-acento);box-shadow:none}
/* interruptor claro/oscuro */
html[data-camino="neo"][data-modo] .interruptor i{left:3px;background:var(--n-acento);box-shadow:var(--sombra-p)}
html[data-camino="neo"][data-modo="oscuro"] .interruptor i{left:23px}

/* ---------- 3. el video SIEMPRE sobre el oscuro de la paleta (regla de C) ---------- */
html[data-camino="neo"] .escenario{background:var(--n-video);box-shadow:var(--sombra)}
html[data-camino="neo"] .pg-sec{background:var(--n-video);border-radius:24px;padding:16px 12px 14px;margin-top:14px;color:var(--g-texto);
  --g-texto:var(--n-video-texto);--g-suave:var(--n-video-tenue);--g-tenue:var(--n-video-tenue);--g-fondo:var(--n-video);--g-fondo2:var(--n-video);
  --g-so:var(--n-video-so);--g-sc:var(--n-video-sc);
  --g-sombra:7px 7px 16px var(--g-so),-6px -6px 14px var(--g-sc);--g-sombra-p:4px 4px 9px var(--g-so),-4px -4px 9px var(--g-sc);
  --g-hundido:inset 4px 4px 9px var(--g-so),inset -4px -4px 9px var(--g-sc)}
html[data-camino="neo"] .pg-sec .pg-btn{color:var(--g-texto)}
html[data-camino="neo"] .pg{--g-grad:linear-gradient(var(--n-acento),var(--n-acento));--g-violeta:var(--n-acento);--g-cian:var(--n-apoyo);--g-dorado:var(--n-apoyo);--g-verde:var(--n-exito)}
html[data-camino="neo"] .pg-plan .pg-pv{color:var(--g-texto)}
html[data-camino="neo"] .pg-plan .pg-pf{color:var(--g-texto)}
html[data-camino="neo"] :is(.pg-pest[aria-selected="true"],.pg-btn.pg-prim,.pg-card[aria-current="true"] .pg-btn[data-accion="elegir"],.pg-tuyo,.pg-check){color:var(--n-sobre-acento)}
html[data-camino="neo"] .pg-sec :is(.pg-btn.pg-prim,.pg-card[aria-current="true"] .pg-btn[data-accion="elegir"]){color:var(--n-sobre-acento)}
html[data-camino="neo"] .pg-reco,html[data-camino="neo"] .pg-ins{background:var(--n-apoyo);color:#181f39}
html[data-camino="neo"] .pg-titulo em{font:inherit;color:var(--g-texto);-webkit-background-clip:border-box;background-clip:border-box;
  background:linear-gradient(transparent 60%,var(--n-apoyo) 60%,var(--n-apoyo) 92%,transparent 92%);padding:0 .06em}
html[data-camino="neo"][data-modo="oscuro"] .pg-titulo em{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--n-acento) 70%,transparent) 62%,color-mix(in srgb,var(--n-acento) 70%,transparent) 92%,transparent 92%)}
html[data-camino="neo"] :is(.pg-etq[data-plan="creador"],.pg-etq[data-plan="pro"],.pg-etq[data-plan="basico"],.pg-etq[data-plan="prueba"]){color:var(--g-texto)}

/* ---------- 4. Pilo ---------- */
html[data-camino="neo"] .pilo-fig::before{display:none}
html[data-camino="neo"] .pilo-fig img{filter:none}
html[data-camino="neo"][data-modo="oscuro"] .pilo-fig::before{content:"";display:block;position:absolute;inset:-9% -11% -3%;z-index:-1;
  border-radius:46% 46% 40% 40%;background:var(--n-apoyo);box-shadow:6px 6px 14px rgba(0,0,0,.45),-4px -4px 12px var(--n-sombra-clara)}

/* ---------- estados seleccionados: relleno de acento + contorno de 2 px en su tono oscuro (en claro el relleno solo da ~2,5:1
   contra el papel; el contorno lleva el estado a ≥3:1, WCAG 1.4.11). En oscuro el contorno es el mismo acento. ---------- */
html[data-camino="neo"] :is(.pg-pest[aria-selected="true"],.barra-cel button[aria-current="page"],.pais button[aria-pressed="true"],.rotulo button[aria-pressed="true"],.sino button[aria-pressed="true"],.pg-tuyo){
  box-shadow:inset 0 0 0 2px var(--n-borde-acento)}
html[data-camino="neo"] .pg-plan[aria-checked="true"]::after{background:var(--n-borde-acento)}