/* Pilo Edit · landing · NEUMORFISMO CÁLIDO, claro y oscuro (28-oct-2026, BORRADOR para aprobación de Cris).
   Se carga DESPUÉS de pilo.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="claro|oscuro" lo pone assets/neo-modo.js (sigue prefers-color-scheme, salvo que la persona use el interruptor).
   Reglas: neumorfismo suave solo en superficies; botones principales SÓLIDOS (sin degradado) con texto AA;
   en claro el botón lleva un borde de 2 px de su tono oscuro (3:1 contra el fondo); foco visible de 3 px;
   el video siempre sobre el oscuro de la paleta (regla de C); en oscuro Pilo se para 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 de la página (y de nuevo dentro de las zonas de video, con el oscuro de la paleta) ---------- */
html[data-camino="neo"],html[data-camino="neo"] .zona-video{
  --tinta:var(--n-fondo);--tinta2:var(--n-fondo);--sup:var(--n-superficie);--sup2:var(--n-superficie);
  --linea:color-mix(in srgb,var(--n-texto) 12%,transparent);
  --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);
  --so:var(--n-sombra-oscura);--sc:var(--n-sombra-clara);
  --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);
  --grad:linear-gradient(var(--n-acento),var(--n-acento));--grad-luz:linear-gradient(var(--n-acento),var(--n-acento));
  --titulo:"Fredoka","Instrument Sans",system-ui,sans-serif;--cuerpo:"Instrument Sans",system-ui,sans-serif;
}
html[data-camino="neo"][data-modo="claro"]{color-scheme:light}
html[data-camino="neo"][data-modo="oscuro"]{color-scheme:dark}
html[data-camino="neo"] .zona-video{
  --n-fondo:var(--n-video);--n-superficie:var(--n-video);--n-texto:var(--n-video-texto);--n-tenue:var(--n-video-tenue);
  --n-sombra-clara:var(--n-video-sc);--n-sombra-oscura:var(--n-video-so);--n-borde-acento:var(--n-acento);
  color-scheme:dark;background:var(--n-video);color:var(--n-video-texto);border-color:transparent}
html[data-camino="neo"] body{background:var(--n-fondo);color:var(--n-texto)}
html[data-camino="neo"] .heroe::before,html[data-camino="neo"] .cierre::before{background:none}
html[data-camino="neo"] :is(h1,h2,h3){font-weight:700;letter-spacing:-.01em}
/* palabra resaltada: marcador SÓLIDO del color de apoyo (el texto sigue en tinta: pasa AA) */
html[data-camino="neo"] :is(h1,h2,h3) em,html[data-camino="neo"] .cur{font:inherit;font-style:normal;color:var(--n-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"] :is(h1,h2,h3) em,html[data-camino="neo"] .zona-video :is(h1,h2,h3) em{color:var(--n-texto);
  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"] .top{background:color-mix(in srgb,var(--n-fondo) 88%,transparent)}
html[data-camino="neo"] .fija{background:color-mix(in srgb,var(--n-fondo) 94%,transparent)}
html[data-camino="neo"] .franja,html[data-camino="neo"] .sec.alt:not(.zona-video){background:var(--n-fondo)}

/* ---------- 2. botones: principal SÓLIDO, sin degradado ---------- */
html[data-camino="neo"] .btn{border-radius:999px;font-family:var(--titulo);font-weight:600;background:var(--n-superficie);color:var(--n-texto);
  box-shadow:var(--sombra-p);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);
  box-shadow:5px 5px 12px var(--so),-5px -5px 12px var(--sc);filter:none}
html[data-camino="neo"] .btn.prim:hover{background:var(--n-acento-toque);filter:none}
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.no{background:transparent;box-shadow:none}
/* foco visible: anillo sólido de 3 px separado del control (cambia ≥3:1 contra el fondo en las 6 combinaciones) */
html[data-camino="neo"] :focus-visible{outline:3px solid var(--n-foco);outline-offset:3px}
/* selectores con estado: el elegido se marca con relleno de acento (no solo con sombra) */
html[data-camino="neo"] :is(.pais,.rotulo){border-radius:999px}
html[data-camino="neo"] .pais button[aria-pressed="true"]{background:var(--n-acento);color:var(--n-sobre-acento);box-shadow:none}
html[data-camino="neo"] .rotulo button[aria-pressed="true"]{background:var(--n-acento);color:var(--n-sobre-acento)}
html[data-camino="neo"] .rotulo button{color:#e9e4dc}
html[data-camino="neo"] .cuadro.despues .chip,html[data-camino="neo"] :is(.pasos li::before,.pasos-v li>b,.comentario .av,.logo){background:var(--n-acento);color:var(--n-sobre-acento)}
html[data-camino="neo"] .ceja i,html[data-camino="neo"] .barrido{background:var(--n-acento)}
html[data-camino="neo"] .tres-no li{background:var(--n-superficie);box-shadow:var(--sombra-p);border:0}
html[data-camino="neo"] .tres-no li::before{background:var(--n-acento)}

/* ---------- 3. superficies neumórficas (suaves) ---------- */
html[data-camino="neo"] :is(.par,.pasos li,.plan,.faq details,.clave,.tabla-comp,.oferta,.pasos-v li){background:var(--n-superficie);box-shadow:var(--sombra);border:0}
html[data-camino="neo"] :is(.hace div,.cifra,.extras div,.compara-mini div){background:var(--n-superficie);box-shadow:var(--sombra-p);border:0}
html[data-camino="neo"] .hace .ico{color:var(--n-texto);background:var(--n-superficie);box-shadow:var(--hundido)}
html[data-camino="neo"] .clave{background:var(--n-superficie)}
html[data-camino="neo"] .comentario{background:var(--n-superficie);box-shadow:var(--hundido);border:0}
html[data-camino="neo"] .comentario .dm{background:var(--n-superficie);box-shadow:var(--sombra-p)}
html[data-camino="neo"] .nota-tel{background:var(--n-superficie);color:var(--n-texto)}
html[data-camino="neo"] .plan.destacado,html[data-camino="neo"] .oferta{border:2px solid var(--n-borde-acento);background:var(--n-superficie)}
html[data-camino="neo"] .plan .cinta{background:var(--n-apoyo);color:#181f39}
html[data-camino="neo"] .plan .fund{color:var(--n-texto)}
html[data-camino="neo"] :is(.plan li,.oferta li)::before{color:var(--n-exito)}
html[data-camino="neo"] .faq summary::after{color:var(--n-texto)}
html[data-camino="neo"] .franja .n{color:var(--n-texto);font-family:"Fredoka";font-style:normal;font-weight:700}
html[data-camino="neo"] .cifra.pilo{box-shadow:var(--sombra-p),inset 0 0 0 2px var(--n-borde-acento)}
html[data-camino="neo"] .tabla-comp thead th{background:var(--n-superficie)}
html[data-camino="neo"] .tabla-comp td.pilo{background:color-mix(in srgb,var(--n-acento) 10%,transparent)}
html[data-camino="neo"] .hecho{background:color-mix(in srgb,var(--n-exito) 10%,var(--n-fondo));border-color:color-mix(in srgb,var(--n-exito) 45%,transparent)}
html[data-camino="neo"] .hecho .ok{background:var(--n-exito);color:var(--n-fondo)}
html[data-camino="neo"] .compara-mini div.si{box-shadow:var(--sombra-p),inset 0 0 0 2px var(--n-borde-acento);background:var(--n-superficie)}
html[data-camino="neo"] .nota-tel b{color:var(--n-texto)}
/* el aviso de borrador queda igual que siempre (franja dorada) */

/* ---------- 4. Pilo ---------- */
html[data-camino="neo"] .pilo-fig{isolation:isolate}
html[data-camino="neo"] .pilo-fig::before{display:none}
html[data-camino="neo"] .pilo-fig img{filter:none}
/* en oscuro: Pilo se para sobre su "foco", una placa sólida del color de apoyo (la silueta negra necesita fondo claro: 3:1 mínimo) */
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)}

/* ---------- 5. interruptor claro/oscuro en la barra superior ---------- */
.modo-btn{display:none}
html[data-camino="neo"] .modo-btn{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;border:0;padding:0;
  background:var(--n-superficie);color:var(--n-texto);box-shadow:var(--sombra-p)}
html[data-camino="neo"] .modo-btn svg{width:20px;height:20px}
html[data-camino="neo"] .modo-btn .sol{display:none}
html[data-camino="neo"][data-modo="oscuro"] .modo-btn .sol{display:block}
html[data-camino="neo"][data-modo="oscuro"] .modo-btn .luna{display:none}
html[data-camino="neo"] .top nav{gap:12px}
@media (min-width:820px){html[data-camino="neo"] .top nav{gap:18px}}

/* ---------- 6. galería de estilos (componente .pg): acento sólido, texto oscuro encima ---------- */
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"] :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-reco{background:var(--n-apoyo);color:#181f39}
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"] :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)}

/* ---------- 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)}