/* Pilo Edit · landing · lenguaje «Shopex adaptado» (28-oct-2026, BORRADOR para aprobación de Cris).
   Se carga DESPUÉS de neo.css y solo actúa con <html data-paleta="pilo">. Toma del kit Shopex (RiveupDigital) SOLO
   colores, sombras y proporciones medidas en sus vistas previas; ningún asset, ícono ni texto.
   Medidas del kit (1 pt ≈ 1 px CSS): contenedores grandes radio 24 · tarjetas de producto 14 · botones y campos en píldora
   de 52 de alto · márgenes laterales 20 · separación de la grilla 16 · tarjetas blancas sobre lavanda casi blanca, sombra casi nula.
   Adaptación neumórfica: la tarjeta blanca se levanta con sombra doble suave teñida de lavanda; los campos van hundidos.
   Informe: desarrollo/ui_shopex/INFORME.md */
html[data-paleta="pilo"],html[data-paleta="pilo"] .zona-video{
  --sombra:6px 8px 22px var(--so),-6px -6px 16px var(--sc);
  --sombra-p:4px 5px 12px var(--so),-4px -4px 10px var(--sc);
  --hundido:inset 3px 3px 7px var(--so),inset -3px -3px 7px var(--sc)}
/* contenedores grandes: radio 24 (formularios y tarjetas de resumen del kit) */
html[data-paleta="pilo"] :is(.par,.pasos li,.plan,.faq details,.clave,.tabla-comp,.oferta,.pasos-v li,.comentario,.escenario){border-radius:24px}
/* tarjetas chicas: radio 16 (tarjeta de producto del kit: 14) */
html[data-paleta="pilo"] :is(.hace div,.cifra,.extras div,.compara-mini div,.tres-no li,.comentario .dm,.nota-tel){border-radius:16px}
html[data-paleta="pilo"] .hace .ico{border-radius:14px}
/* botones en píldora; el principal con alto mínimo de 52 como el del kit */
html[data-paleta="pilo"] .btn{border-radius:999px;min-height:48px}
html[data-paleta="pilo"] .btn.prim{min-height:52px;font-weight:700;letter-spacing:.005em}
/* el secundario del kit es una píldora blanca sin borde visible; aquí conserva un borde tenue para que se lea como botón (1.4.11) */
html[data-paleta="pilo"] .btn:not(.prim):not(.no){background:var(--n-superficie);border:1.5px solid color-mix(in srgb,var(--n-texto) 30%,transparent)}
/* logo y viñetas numeradas: menta sólida con tinta encima */
html[data-paleta="pilo"] .logo{border-radius:14px}
/* palabra resaltada en claro: marcador violeta del kit con tinta encima (4,6:1). En oscuro y sobre video: texto menta con subrayado
   bajo (el marcador de acento detrás de texto claro daría ~2,5:1) */
html[data-paleta="pilo"][data-modo="oscuro"] :is(h1,h2,h3) em,html[data-paleta="pilo"] .zona-video :is(h1,h2,h3) em{color:var(--n-acento);
  background:linear-gradient(transparent 86%,color-mix(in srgb,var(--n-acento) 55%,transparent) 86%,color-mix(in srgb,var(--n-acento) 55%,transparent) 96%,transparent 96%)}
/* Pilo en oscuro: placa lavanda clara (el violeta del kit aclarado), la silueta negra contrasta de sobra */
html[data-paleta="pilo"][data-modo="oscuro"] .pilo-fig::before{background:color-mix(in srgb,var(--n-apoyo) 30%,#ffffff);border-radius:28px 28px 24px 24px}
/* cinta del plan destacado: violeta del kit con tinta */
html[data-paleta="pilo"] .plan .cinta{background:var(--n-apoyo);color:#181f39}
/* barra superior y barra fija: superficie blanca/levantada como la cabecera del kit */
html[data-paleta="pilo"] .top{background:color-mix(in srgb,var(--n-fondo) 92%,transparent)}
/* Pilo v2 (28-oct): en claro el anillo de foco es tinta; dentro del panel oscuro del video daría 1,06:1 → ahí va en el amarillo de apoyo (13:1) */
html[data-paleta="pilo"][data-modo="claro"] :is(.zona-video,.escenario,.pg-sec) :focus-visible{outline-color:var(--n-apoyo)}
/* Pilo v2: palabra resaltada IGUAL en los dos modos (misma forma, solo cambia el color): texto del acento en su versión AA
   (claro: coral oscuro #bd3f2a, 4,7:1 · oscuro: menta, 9,1:1) con subrayado grueso bajo del acento. Sobre el video: el acento tal cual. */
html[data-paleta="pilo"]:is([data-modo="claro"],[data-modo="oscuro"]) :is(h1,h2,h3) em{color:var(--n-borde-acento);
  background:linear-gradient(transparent 86%,color-mix(in srgb,var(--n-acento) 55%,transparent) 86%,color-mix(in srgb,var(--n-acento) 55%,transparent) 96%,transparent 96%)}
html[data-paleta="pilo"]:is([data-modo="claro"],[data-modo="oscuro"]) .zona-video :is(h1,h2,h3) em{color:var(--n-acento)}
/* ==== Pilo v3 · USO de los colores de vida (GENERADO por desarrollo/ui_pilo_v3/herramientas/paleta_pilo_v3.py — no editar a mano). Roles: acento = acción · apoyo = Pilo y foco · vida-1 = marcadores y etiquetas · vida-2 = brillo ==== */
/* palabra resaltada = vida-2 (claro: tinta sobre marcador amarillo, como Verde Pilo · oscuro: ámbar con subrayado) */
html[data-paleta="pilo"][data-modo="claro"] :is(h1,h2,h3,.pg-titulo) em{color:var(--n-texto);background:linear-gradient(transparent 60%,var(--n-vida-2) 60%,var(--n-vida-2) 92%,transparent 92%)}
html[data-paleta="pilo"][data-modo="oscuro"] :is(h1,h2,h3,.pg-titulo) em{color:var(--n-vida-2);background:linear-gradient(transparent 86%,color-mix(in srgb,var(--n-vida-2) 55%,transparent) 86%,color-mix(in srgb,var(--n-vida-2) 55%,transparent) 96%,transparent 96%)}
html[data-paleta="pilo"][data-modo] :is(.zona-video,.pg-sec) :is(h1,h2,h3,.pg-titulo) em{color:var(--n-vida-2);background:linear-gradient(transparent 86%,color-mix(in srgb,var(--n-vida-2) 55%,transparent) 86%,color-mix(in srgb,var(--n-vida-2) 55%,transparent) 96%,transparent 96%)}
/* vida-1 = marcadores y etiquetas */
html[data-paleta="pilo"][data-modo] .pasos li::before{background:var(--n-vida-1);color:var(--n-sobre-vida)}
html[data-paleta="pilo"][data-modo] .pasos-v li>b{background:var(--n-vida-1);color:var(--n-sobre-vida)}
html[data-paleta="pilo"] .franja .n{color:var(--n-vida-1-texto)}
html[data-paleta="pilo"] .hace .ico{color:var(--n-vida-1-texto)}
html[data-paleta="pilo"][data-modo] .tres-no li::before{background:var(--n-vida-1)}
html[data-paleta="pilo"][data-modo] .plan .cinta{background:var(--n-vida-1);color:var(--n-sobre-vida)}
/* vida-2 = brillo: precio de fundador y destellos de Pilo */
html[data-paleta="pilo"][data-modo] .plan .fund{background:var(--n-vida-2);color:var(--n-sobre-vida);box-shadow:none}
html[data-paleta="pilo"] .pilo-heroe::after{content:"\2726";position:absolute;z-index:3;top:-4px;right:-6px;font:400 17px/1 system-ui,sans-serif;color:var(--n-vida-2);text-shadow:-15px 15px 0 var(--n-vida-1);transform:scale(.85);pointer-events:none}