/* Marca de Escencia para registro, entrada, términos y montaje (18-oct-2026, docs/ESCENCIA.md → "Landing premium 2026-10-18").
   Va DESPUÉS de escencia.css (y de empezar.css en /empezar/): cambia las variables de esas hojas por las del estilo (A o B, el mismo de la
   presentación: <html data-estilo>) y las letras de Alquimia por Geist (texto) e Instrument Serif (títulos en A). Mi tienda NO la carga: allí
   manda la apariencia de cada tienda. Tema: data-tema=claro|oscuro si la página lo fija (montaje, src/ui/tema.js); si no, el del equipo
   (A sigue al equipo; B es oscura salvo data-tema=claro). */
@font-face{font-family:'Geist';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/escencia/geist-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/escencia/instrument-serif-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* estilos: los mismos valores de escencia/landing.css (si se cambia uno, se cambian los dos; la prueba los compara) */
:root[data-estilo=a]{--f:#FFFFFF;--s:#FFFFFF;--s2:#F6F6F4;--t:#0E0E10;--t2:#55565C;--l:#E7E7E4;--l2:#8A8B92;--p:#1B3A8C;--pt:#FFFFFF;--ac:#1B3A8C;--ok:#1D6B43;--mal:#A3261B;--ac-rgb:27,58,140;color-scheme:light}
@media (prefers-color-scheme:dark){
  :root[data-estilo=a]:not([data-tema=claro]){--f:#0C0C0E;--s:#141417;--s2:#111114;--t:#F3F3F1;--t2:#A3A3AA;--l:#26262B;--l2:#6E6E76;--p:#AFC1F2;--pt:#0C0C0E;--ac:#AFC1F2;--ok:#8FD3A8;--mal:#FFA99C;--ac-rgb:175,193,242;color-scheme:dark}
}
:root[data-estilo=a][data-tema=oscuro]{--f:#0C0C0E;--s:#141417;--s2:#111114;--t:#F3F3F1;--t2:#A3A3AA;--l:#26262B;--l2:#6E6E76;--p:#AFC1F2;--pt:#0C0C0E;--ac:#AFC1F2;--ok:#8FD3A8;--mal:#FFA99C;--ac-rgb:175,193,242;color-scheme:dark}
:root[data-estilo=b]{--f:#0B0B0A;--s:#151513;--s2:#111110;--t:#EDEAE4;--t2:#A6A096;--l:#272623;--l2:#75706A;--p:#EDEAE4;--pt:#0B0B0A;--ac:#93BBA0;--ok:#93BBA0;--mal:#FFA99C;--ac-rgb:147,187,160;color-scheme:dark}
:root[data-estilo=b][data-tema=claro]{--f:#FAF9F6;--s:#FFFFFF;--s2:#F2F0EB;--t:#191816;--t2:#5B574F;--l:#E4E1DA;--l2:#8C877D;--p:#191816;--pt:#FAF9F6;--ac:#2E5C43;--ok:#2E5C43;--mal:#A3261B;--ac-rgb:46,92,67;color-scheme:light}
:root[data-estilo]{--fh:'Instrument Serif',Georgia,'Times New Roman',serif;--fhw:400;--fhl:-.012em}
:root[data-estilo=b]{--fh:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;--fhw:600;--fhl:-.035em}

/* las variables de escencia.css, empezar.css y src/ui (ayuda, espera, editor grande) apuntan al estilo */
:root[data-estilo]{--bg:var(--f);--bg2:var(--s);--linea:var(--l);--linea2:var(--l2);--oro:var(--ac);--oro2:var(--ac);--crema:var(--t);--dim:var(--t2);--verde:var(--ok);--rojo:var(--mal);
  --oro-rgb:var(--ac-rgb);--oro-f:var(--ac);--oro-t:var(--pt);--oro-grad:var(--p);--tx2:var(--t2);--tx3:var(--t2);--sup:var(--s);--sup2:var(--s2);--campo:var(--s);--campo-l:var(--l2);--dlg:var(--s);--ph:var(--t2);--mini-l:var(--l2);
  --ui-f:var(--s);--ui-f2:var(--s2);--ui-campo:var(--s);--ui-t:var(--t);--ui-s:var(--t2);--ui-l:var(--l2);--ui-c:var(--ac);--ui-c2:var(--ac)}
:root[data-estilo]{background:var(--f)}
:root[data-estilo] body{background:var(--f);color:var(--t)}
:root[data-estilo] body *{font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif!important}
:root[data-estilo] :is(h1,h2,.marca,.creando h2,.dice i){font-family:var(--fh)!important;font-weight:var(--fhw)!important;letter-spacing:var(--fhl)!important}
:root[data-estilo] .b-tema{font-family:system-ui,sans-serif!important}
:root[data-estilo] h1{color:var(--t);line-height:1.05}
:root[data-estilo=a] h1{font-size:clamp(38px,9vw,56px)}
:root[data-estilo] .lead{font-style:normal;font-weight:400;font-size:17px;color:var(--t2)}
:root[data-estilo] :is(.k,.form label,.giro legend,.btn,.mini,.barra nav a,.form .clave button,.p-total small){text-transform:none!important;letter-spacing:0!important}
:root[data-estilo] .k{font-size:14px;font-weight:450;color:var(--t2)}
:root[data-estilo] .form label{font-size:14.5px;font-weight:500;color:var(--t)}
:root[data-estilo] .form label small{color:var(--t2)}

/* cabecera: el nombre en minúscula, sin símbolos */
:root[data-estilo] .barra{background:color-mix(in srgb,var(--f) 88%,transparent)!important;border-bottom:1px solid var(--l)}
:root[data-estilo] .marca{display:inline-flex;align-items:baseline;gap:8px;color:var(--t);font-size:28px!important;text-transform:lowercase;line-height:1}
:root[data-estilo=b] .marca{font-size:21px!important;letter-spacing:-.05em!important}
:root[data-estilo] .marca small{font-family:'Geist',system-ui,sans-serif!important;font-weight:400!important;text-transform:none;letter-spacing:0!important;font-size:13px!important;color:var(--t2)}
:root[data-estilo] .barra nav a{font-size:15px;font-weight:450;color:var(--t);border-radius:8px}
:root[data-estilo] .barra nav a.b{border:1px solid var(--l2);color:var(--t)}
:root[data-estilo=b] .barra nav a.b{border-radius:999px}

/* botones */
:root[data-estilo] .btn{border-radius:8px;border:1px solid var(--p);background:var(--p);color:var(--pt);font-size:16px;font-weight:500;box-shadow:none}
:root[data-estilo=b] .btn{border-radius:999px}
:root[data-estilo] .btn.sec{background:transparent;color:var(--t);border-color:var(--l2)}
:root[data-estilo] .mini{border-radius:8px;font-size:14px;font-weight:500;color:var(--t);border-color:var(--l2)}
:root[data-estilo] .mini.oro{background:var(--p);color:var(--pt);border-color:var(--p)}
:root[data-estilo] .btn.esperando::before{border-color:color-mix(in srgb,var(--pt) 30%,transparent);border-top-color:var(--pt)}

/* formularios */
:root[data-estilo] .form form{background:var(--s);border-color:var(--l);border-radius:14px}
:root[data-estilo] :is(.form input,.form select){background:var(--s);color:var(--t);border:1px solid var(--l2);border-radius:8px}
:root[data-estilo] :is(.form input,.form select):focus{border-color:var(--ac);outline:3px solid color-mix(in srgb,var(--ac) 22%,transparent)}
:root[data-estilo] :is(.form .acepta input,.giro input){accent-color:var(--ac)}
:root[data-estilo] .giro label{border-color:var(--l2)}
:root[data-estilo] .giro label:has(input:checked){border-color:var(--t);background:var(--s2)}
:root[data-estilo] .form label.mal input{border-color:var(--mal)}:root[data-estilo] .form label.mal small.e{color:var(--mal)}
:root[data-estilo] .msg{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,var(--s));color:var(--t)}
:root[data-estilo] .msg.err{border-color:var(--mal);background:color-mix(in srgb,var(--mal) 8%,var(--s));color:var(--t)}
:root[data-estilo] :is(.fuerza[data-n="0"] b,.fuerza[data-n="1"] b){color:var(--mal)}
:root[data-estilo] .form .movido{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 7%,var(--s));color:var(--t)}
:root[data-estilo] .listo,:root[data-estilo] .recordado{border-color:var(--l2);background:var(--s2)}

/* creando el negocio: un punto que late (antes, los tres círculos de Alquimia y luego la chispa) */
:root[data-estilo] .creando{border-color:var(--l);background:var(--s)}
:root[data-estilo] .creando svg{fill:var(--t);stroke:none}
:root[data-estilo] .creando svg path{transform-origin:50% 50%;animation:latido 1.6s ease-in-out infinite}
@keyframes latido{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1);opacity:1}}
:root[data-estilo] .creando h2{color:var(--t)}

/* montaje (/empezar/) */
:root[data-estilo] .avance .bar{background:var(--s2)}:root[data-estilo] .avance .bar i{background:var(--p)}
:root[data-estilo] .dice i{border-color:var(--l2);color:var(--t)}
:root[data-estilo] :is(.paso,.dice div){border-color:var(--l);background:var(--s)}
:root[data-estilo] .suelta{border-color:var(--l2);background:var(--s2)}
:root[data-estilo] body.empezar :not(.marca){text-transform:none!important;letter-spacing:0!important}
@media (prefers-reduced-motion:reduce){:root[data-estilo] .creando svg path{animation:none}}