/* Pilo Edit · capa del personaje Pilo + caminos de color (28-oct-2026, BORRADOR para aprobación de Cris).
   Se carga DESPUÉS de pilo.css. El camino se elige con <html data-camino="a|b|c">:
     a = todo oscuro (como hoy) + halo violeta y superficie más clara detrás de Pilo
     b = todo claro (papel crema): Pilo, tinta sobre papel
     c = híbrido (RECOMENDADO): papel donde vive Pilo; oscuro "de set" en las zonas de video (.zona-video)
   Informe: desarrollo/pilo_personaje/INFORME.md */

/* ---------- 1. papel (caminos b y c) ---------- */
html[data-camino="b"],html[data-camino="c"]{
  color-scheme:light;
  --tinta:#f6f1e7;--tinta2:#efe7d8;--sup:#fdfaf4;--sup2:#f3ecdf;--linea:rgba(45,34,70,.13);
  --texto:#1d1927;--suave:#4f4a5c;--tenue:#655f70;
  --cian:#086d67;--azul:#2a62c9;--violeta:#6544d8;--rosa:#c22d5a;--dorado:#8f5400;--verde:#1d7a4f;
  --so:rgba(122,100,68,.30);--sc:rgba(255,255,255,.95);
  --sombra:7px 7px 16px var(--so),-7px -7px 16px var(--sc);--sombra-p:4px 4px 9px var(--so),-4px -4px 9px var(--sc);
  --hundido:inset 4px 4px 9px var(--so),inset -4px -4px 9px var(--sc);
  /* el degradado de la marca, oscurecido para que el texto en cursiva pase contraste sobre papel */
  --grad:linear-gradient(135deg,#086d67,#2a62c9 45%,#6544d8);
}
/* el degradado luminoso de siempre: botones, insignias y chips con texto oscuro encima (igual en los tres caminos) */
:root{--grad-luz:linear-gradient(135deg,#4fe0d6,#6eb0ff 45%,#a99bff)}
.btn.prim,.logo,.pasos li::before,.cuadro.despues .chip,.pasos-v li>b,.comentario .av{background:var(--grad-luz)}
.btn.prim{color:#0b0f16}
.plan.destacado{background:linear-gradient(var(--sup),var(--sup)) padding-box,var(--grad-luz) border-box}
.oferta{background:linear-gradient(var(--sup),var(--sup)) padding-box,var(--grad-luz) border-box}
.plan .cinta{background:linear-gradient(135deg,#f5b356,#ffd58a);color:#1b1206}
.borrador{color:#f5b356}

html[data-camino="b"] .top,html[data-camino="c"] .top{background:rgba(246,241,231,.86)}
html[data-camino="b"] .fija,html[data-camino="c"] .fija{background:rgba(246,241,231,.94)}
html[data-camino="b"] .btn.prim,html[data-camino="c"] .btn.prim{box-shadow:0 10px 26px -10px rgba(42,98,201,.55),inset 0 1px 0 rgba(255,255,255,.45)}
html[data-camino="b"] .heroe::before,html[data-camino="c"] .heroe::before{
  background:radial-gradient(40% 45% at 72% 30%,rgba(110,176,255,.16),transparent 70%),radial-gradient(35% 40% at 20% 10%,rgba(79,224,214,.14),transparent 70%),
  radial-gradient(30% 35% at 85% 85%,rgba(169,155,255,.18),transparent 70%)}
html[data-camino="b"] .hace div,html[data-camino="c"] .hace div{background:var(--sup)}
html[data-camino="b"] .cifra.pilo,html[data-camino="c"] .cifra.pilo{background:linear-gradient(160deg,rgba(11,125,118,.08),rgba(101,68,216,.08));border-color:rgba(42,98,201,.35)}
html[data-camino="b"] .tabla-comp td.pilo,html[data-camino="c"] .tabla-comp td.pilo{background:rgba(42,98,201,.06)}
html[data-camino="b"] .hecho,html[data-camino="c"] .hecho{background:rgba(29,122,79,.07);border-color:rgba(29,122,79,.3)}
html[data-camino="b"] .hecho .ok,html[data-camino="c"] .hecho .ok{background:#5cd39b}
html[data-camino="b"] .nota-tel,html[data-camino="c"] .nota-tel{color:var(--texto)}
html[data-camino="b"] .marca-borrador,html[data-camino="c"] .marca-borrador{border-color:rgba(143,84,0,.55)}

/* ---------- 2. zonas de video oscuras (solo camino c): el video luce más sobre negro ---------- */
html[data-camino="c"] .zona-video,.tel{
  color-scheme:dark;
  --tinta:#0d1118;--tinta2:#131925;--sup:#1f2633;--sup2:#242c3b;--linea:rgba(152,166,191,.16);
  --texto:#e9eef7;--suave:#a3b0c7;--tenue:#8592ab;
  --cian:#4fe0d6;--azul:#6eb0ff;--violeta:#a99bff;--rosa:#ff8bab;--dorado:#f5b356;--verde:#5cd39b;
  --so:rgba(8,11,18,.72);--sc:rgba(62,74,96,.38);
  --sombra:7px 7px 16px var(--so),-7px -7px 16px var(--sc);--sombra-p:4px 4px 9px var(--so),-4px -4px 9px var(--sc);
  --hundido:inset 5px 5px 11px var(--so),inset -5px -5px 11px var(--sc);
  --grad:linear-gradient(135deg,#4fe0d6,#6eb0ff 45%,#a99bff);
}
/* el celular del héroe es un objeto oscuro en los tres caminos (sus botones van sobre el video) */
html[data-camino="c"] .zona-video{background:#0d1118;color:var(--texto);border-color:transparent}
html[data-camino="c"] .zona-video.sec.alt{background:#131925}

/* ---------- 3. Pilo ---------- */
.pilo-fig{position:absolute;margin:0;pointer-events:none;z-index:7;line-height:0}
.pilo-fig img{width:100%;height:auto;display:block;user-select:none;-webkit-user-drag:none}
/* camino a (o Pilo sobre una zona oscura): superficie más clara detrás + luz de borde violeta */
html[data-camino="a"] .pilo-fig::before{content:"";position:absolute;inset:4% 2% 12%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(169,155,255,.62),rgba(130,120,200,.34) 58%,transparent 100%)}
html[data-camino="a"] .pilo-fig img{filter:drop-shadow(0 0 1.5px rgba(196,186,255,.95)) drop-shadow(0 0 10px rgba(169,155,255,.55))}

/* animación discreta: flotar (héroe) y respirar; nada si el sistema pide menos movimiento */
@keyframes pilo-flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pilo-respirar{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.pilo-flota img{animation:pilo-flotar 4.2s ease-in-out infinite}
.pilo-respira img{transform-origin:50% 90%;animation:pilo-respirar 5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.pilo-flota img,.pilo-respira img,.pilo-globo{animation:none!important}}

/* globo de diálogo (texto BORRADOR) */
.pilo-globo{position:absolute;z-index:8;pointer-events:none;white-space:nowrap;padding:8px 12px;border-radius:14px 14px 14px 4px;
  font:700 13px/1.2 var(--cuerpo);color:#1d1927;background:#fff;box-shadow:0 8px 22px -8px rgba(40,28,70,.45);
  animation:pilo-globo .5s .9s cubic-bezier(.2,.8,.2,1.2) both}
@keyframes pilo-globo{from{opacity:0;transform:translateY(6px) scale(.9)}}

/* héroe: celular = Pilo sentado encima del celular (móvil) · al lado, abajo a la izquierda (escritorio) */
.heroe .escena{padding-top:78px}
.pilo-heroe{width:100px;left:-10px;top:0}
.heroe .pilo-globo{left:92px;top:14px}
@media (min-width:900px){
  .heroe .escena{padding-top:0}
  .pilo-heroe{width:150px;left:-150px;top:auto;bottom:118px}
  .heroe .pilo-globo{left:-112px;top:auto;bottom:278px;border-radius:14px 14px 4px 14px}
}

/* cómo funciona: un Pilo pequeño, quieto, asomado sobre cada paso */
.pasos li{padding-right:84px}
@media (min-width:860px){.pasos li{padding-right:22px}}
.pilo-paso{width:68px;right:12px;top:-22px}

/* plan recomendado: Pilo guiña asomado sobre la esquina de la tarjeta */
.plan.destacado{overflow:visible}
.pilo-plan{width:66px;right:10px;top:-46px}
.plan.destacado h3{padding-right:64px}

/* embudo */
.hecho{position:relative}
.pilo-hecho{position:relative;width:76px;flex:none;margin:-14px -4px -10px auto}
.titulo-pilo{display:flex;align-items:center;gap:12px}
.titulo-pilo h1{flex:1;min-width:0}
.pilo-bienvenida{position:relative;width:96px;flex:none}
@media (max-width:380px){.pilo-bienvenida{width:78px}}

/* ======================================================================================
   4. Camino D = paleta de Pilo Grow (tema "Brisa", el de fábrica de Pilo v2: frontend/src/app/globals.css)
      data-camino="d"  → Brisa en toda la página (el video también sobre papel)
      data-camino="dc" → Brisa + la regla de C: las zonas de video van oscuras con el navy de la misma Brisa (#181f39)
      Hex EXACTOS de Brisa: papel #fdf8f1 · tarjeta #ffffff (vidrio 68 %) · tarjeta-2 #eaf5f2 · tinta #181f39 ·
      tinta suave #4a4f68 · coral #fda597 · menta #add8ce · amarillo #feda90 · cálido #e8896f. Fuentes: Fredoka + Instrument Sans.
      Únicos ajustes (accesibilidad): el texto tenue usa la tinta suave (#838aa3 da 3,24:1 sobre el papel) y las
      palabras resaltadas van en tinta con marcador coral→amarillo (el coral como texto da 1,81:1).
   ====================================================================================== */
@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")}
html[data-camino="d"],html[data-camino="dc"]{
  color-scheme:light;
  --tinta:#fdf8f1;--tinta2:#eaf5f2;--sup:#ffffff;--sup2:#eaf5f2;--linea:rgba(24,31,57,.10);
  --texto:#181f39;--suave:#4a4f68;--tenue:#4a4f68;
  --cian:#181f39;--azul:#181f39;--violeta:#181f39;--rosa:#c0392b;--dorado:#8a5a00;--verde:#1d6b4f;
  --so:rgba(24,31,57,.16);--sc:rgba(255,255,255,0);
  --sombra:0 10px 32px -12px rgba(24,31,57,.18);--sombra-p:0 6px 18px -8px rgba(24,31,57,.14);
  --hundido:inset 0 1px 4px rgba(24,31,57,.12);
  --grad:linear-gradient(135deg,#fda597,#feda90);--grad-luz:linear-gradient(135deg,#fda597,#feda90);
  --titulo:"Fredoka","Instrument Sans",system-ui,sans-serif;--cuerpo:"Instrument Sans",system-ui,sans-serif;
}
html[data-camino="d"] body,html[data-camino="dc"] body{
  background:#fdf8f1;background-image:radial-gradient(circle at 12% 0%,rgba(173,216,206,.30),transparent 45%),
  radial-gradient(circle at 100% 18%,rgba(253,165,151,.28),transparent 40%),radial-gradient(circle at 30% 100%,rgba(253,165,151,.28),transparent 50%);background-attachment:fixed}
:is(html[data-camino="d"],html[data-camino="dc"]) h1,:is(html[data-camino="d"],html[data-camino="dc"]) h2,:is(html[data-camino="d"],html[data-camino="dc"]) h3{font-weight:700;letter-spacing:-.01em}
:is(html[data-camino="d"],html[data-camino="dc"]) :is(h1,h2,h3) em{font:inherit;font-style:normal;color:var(--texto);-webkit-background-clip:border-box;background-clip:border-box;
  background:linear-gradient(transparent 58%,#fda597 58%,#feda90 92%,transparent 92%);padding:0 .06em}
:is(html[data-camino="d"],html[data-camino="dc"]) .heroe::before{background:none}
:is(html[data-camino="d"],html[data-camino="dc"]) .top{background:color-mix(in srgb,#fff 78%,transparent)}
:is(html[data-camino="d"],html[data-camino="dc"]) .fija{background:color-mix(in srgb,#fff 85%,transparent)}
:is(html[data-camino="d"],html[data-camino="dc"]) .sec.alt,:is(html[data-camino="d"],html[data-camino="dc"]) .franja{background:color-mix(in srgb,#eaf5f2 70%,transparent)}
:is(html[data-camino="d"],html[data-camino="dc"]) :is(.btn,.pais,.pais button,.rotulo,.rotulo button){border-radius:999px}
:is(html[data-camino="d"],html[data-camino="dc"]) .btn{font-weight:600;background:color-mix(in srgb,#fff 70%,transparent);border:1px solid rgba(255,255,255,.55);color:#181f39}
:is(html[data-camino="d"],html[data-camino="dc"]) .btn.prim{background:#fda597;color:#181f39;border:0;box-shadow:0 10px 24px -8px rgba(253,165,151,.6)}
:is(html[data-camino="d"],html[data-camino="dc"]) :is(.par,.pasos li,.plan,.faq details,.clave,.tabla-comp,.nota-tel,.oferta,.hace div,.cifra,.pasos-v li,.tres-no li){
  background:color-mix(in srgb,#fff 68%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.55)}
:is(html[data-camino="d"],html[data-camino="dc"]) .plan.destacado,:is(html[data-camino="d"],html[data-camino="dc"]) .oferta{border:2px solid #fda597}
:is(html[data-camino="d"],html[data-camino="dc"]) .ceja i,:is(html[data-camino="d"],html[data-camino="dc"]) .barrido{background:linear-gradient(90deg,#add8ce,#fda597)}
:is(html[data-camino="d"],html[data-camino="dc"]) .franja .n{color:#181f39;font-family:"Fredoka";font-style:normal;font-weight:700}
:is(html[data-camino="d"],html[data-camino="dc"]) .tres-no li::before{background:conic-gradient(#fda597,#add8ce,#fda597)}
:is(html[data-camino="d"],html[data-camino="dc"]) .hace .ico{color:#181f39;background:#eaf5f2}
:is(html[data-camino="d"],html[data-camino="dc"]) .heroe .bajada{color:#4a4f68}
/* zona de video de D+C: navy de Brisa */
html[data-camino="dc"] .zona-video{
  color-scheme:dark;
  --tinta:#181f39;--tinta2:#181f39;--sup:#222a48;--sup2:#283152;--linea:rgba(255,255,255,.12);
  --texto:#fdf8f1;--suave:#c9cddb;--tenue:#aab0c4;--cian:#add8ce;--azul:#add8ce;--violeta:#fda597;
  --so:rgba(5,8,20,.5);--sc:rgba(255,255,255,0);--sombra:0 14px 36px -14px rgba(0,0,0,.6);--sombra-p:0 6px 18px -8px rgba(0,0,0,.5);
  --hundido:inset 0 1px 4px rgba(0,0,0,.4);
  background:#181f39;color:#fdf8f1}
html[data-camino="dc"] .zona-video :is(h1,h2,h3) em{color:#fdf8f1;background:linear-gradient(transparent 62%,rgba(253,165,151,.55) 62%,rgba(254,218,144,.55) 92%,transparent 92%)}
html[data-camino="dc"] .zona-video .par{background:#222a48;border-color:rgba(255,255,255,.08)}
html[data-camino="d"] .pilo-fig::before,html[data-camino="dc"] .pilo-fig::before{display:none}