/* Tokens de Separa: kit General (gen) + 4 kits de rubro (vet, bel, con, pro). Fuente: manual de marca
   https://claude.ai/artifact/YGshzQWNRvEVyusXd5Lqa9 (contraste AA verificado allí). <html data-tema="…"> elige el kit. */
:root{
  /* neutros base (kit Separa) */
  --fondo:#f6f5fa; --superficie:#ffffff; --relleno:#efedf5; --linea:#e3e0ec; --linea-control:#8e8a9e;
  --texto:#1a1824; --texto-2:#5f5c6e; --tinta:#16141c; --sobre-tinta:#ffffff;
  --ok:#1f7a36; --ok-suave:#e3f3e6; --aviso:#8f5b00; --aviso-suave:#fbefd6; --peligro:#b42318; --peligro-suave:#fde8e6; --apagado:#6b6878; --apagado-suave:#ecebf1;
  --f:"Lexend",ui-sans-serif,system-ui,sans-serif;
  --f-disp:"Lexend",ui-sans-serif,system-ui,sans-serif; --f-txt:"Lexend",ui-sans-serif,system-ui,sans-serif; --w-disp:700; --ls-disp:-.035em; --st-disp:normal;
  --ac-c:#6d28d9; --ac-o:#6d28d9; --so-c:#ffffff; --so-o:#ffffff; --at-c:#7b3cdd; --at-o:#a47ae8; --sv-c:#efe9f9; --sv-o:#2a2140; --ho:#4e1c9e;
  --acento:var(--ac-c); --sobre-acento:var(--so-c); --acento-texto:var(--at-c); --suave:var(--sv-c); --acento-hondo:var(--ho);
  --neg:var(--acento); --sobre-neg:var(--sobre-acento); --neg-texto:var(--acento-texto);
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px; --r-btn:999px;
  --sombra-1:0 2px 6px rgb(26 24 36 / .05),0 1px 2px rgb(26 24 36 / .04);
  --sombra-2:0 14px 34px rgb(26 24 36 / .10);
  --dur:220ms; --ease-t:cubic-bezier(.22,1,.36,1); --press:.97;
  --ease:cubic-bezier(.22,1,.36,1); --ease-hoja:cubic-bezier(.32,.72,0,1); --ease-sale:cubic-bezier(.4,0,1,1);
}
/* ===== Kit Separa (general, dueños de negocio): índigo claro, Lexend, Calma con bento ===== */
[data-tema="gen"]{--ac-c:#6d28d9;--ac-o:#6d28d9;--so-c:#ffffff;--so-o:#ffffff;--at-c:#7b3cdd;--at-o:#a47ae8;--sv-c:#efe9f9;--sv-o:#2a2140;--ho:#4e1c9e;
  --f-disp:"Lexend",ui-sans-serif,system-ui,sans-serif;--f-txt:"Lexend",ui-sans-serif,system-ui,sans-serif;--w-disp:700;--ls-disp:-.035em;--st-disp:normal;
  --r-sm:12px;--r-md:18px;--r-lg:26px;--r-xl:34px;--r-btn:999px;--dur:220ms;--ease-t:cubic-bezier(.22,1,.36,1);--press:.97}
/* ===== Kit Huella (veterinarias): crema cálido, redondeado, Baloo 2 + Mulish, rebote leve ===== */
[data-tema="vet"]{--ac-c:#3f7d20;--ac-o:#3f7d20;--so-c:#ffffff;--so-o:#ffffff;--at-c:#3f7e20;--at-o:#5cb72f;--sv-c:#eaf3df;--sv-o:#1c2c14;--ho:#224411;
  --fondo:#fbf6ee;--superficie:#fffdf9;--relleno:#f3ebdf;--linea:#e8dccb;--linea-control:#9a8670;--texto:#2b2118;--texto-2:#6b5a48;--apagado-suave:#efe7db;
  --f-disp:"Baloo 2",ui-rounded,system-ui,sans-serif;--f-txt:"Mulish",ui-sans-serif,system-ui,sans-serif;--w-disp:700;--ls-disp:-.01em;--st-disp:normal;
  --r-sm:16px;--r-md:22px;--r-lg:30px;--r-xl:40px;--r-btn:999px;
  --sombra-1:0 3px 0 rgb(120 90 50 / .10),0 1px 3px rgb(120 90 50 / .08);--sombra-2:0 18px 34px rgb(120 90 50 / .16);
  --dur:260ms;--ease-t:cubic-bezier(.34,1.36,.64,1);--press:.95}
/* ===== Kit Espejo (barberías y salones): noche, contraste, esquinas precisas, Bodoni Moda + Karla, seco ===== */
[data-tema="bel"]{--ac-c:#b9c400;--ac-o:#b9c400;--so-c:#111111;--so-o:#111111;--at-c:#d9e600;--at-o:#d9e600;--sv-c:#2a2c10;--sv-o:#2a2c10;--ho:#767d00;
  --fondo:#0f0f0d;--superficie:#1a1a17;--relleno:#24241f;--linea:#34342d;--linea-control:#6d6d62;--texto:#f3f1e8;--texto-2:#b5b2a3;--tinta:#f3f1e8;--sobre-tinta:#111111;
  --ok:#4cc46f;--ok-suave:#173222;--aviso:#e6b046;--aviso-suave:#3a2f14;--peligro:#f07068;--peligro-suave:#3d1c1b;--apagado:#9a96a8;--apagado-suave:#2a2834;
  --f-disp:"Bodoni Moda",Didot,"Times New Roman",serif;--f-txt:"Karla",ui-sans-serif,system-ui,sans-serif;--w-disp:600;--ls-disp:-.015em;--st-disp:italic;
  --r-sm:4px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-btn:6px;
  --sombra-1:0 0 0 1px #34342d;--sombra-2:0 0 0 1px #3d3d35,0 24px 44px rgb(0 0 0 / .5);
  --dur:160ms;--ease-t:cubic-bezier(.2,.8,.2,1);--press:.98;color-scheme:dark}
/* ===== Kit Sereno (consultorios): lavanda, claridad tipo Cristal, Atkinson Hyperlegible 17 px, lento y suave ===== */
[data-tema="con"]{--ac-c:#94479c;--ac-o:#94479c;--so-c:#ffffff;--so-o:#ffffff;--at-c:#94479c;--at-o:#bd78c5;--sv-c:#f4edf5;--sv-o:#301a33;--ho:#6a2f70;
  --fondo:#f4f6fb;--superficie:#ffffff;--relleno:#eef1f8;--linea:#dde3ef;--linea-control:#7d869e;--texto:#14182a;--texto-2:#4f5873;
  --f-disp:"Atkinson Hyperlegible",ui-sans-serif,system-ui,sans-serif;--f-txt:"Atkinson Hyperlegible",ui-sans-serif,system-ui,sans-serif;--w-disp:700;--ls-disp:-.01em;--st-disp:normal;
  --r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:26px;--r-btn:14px;
  --sombra-1:0 1px 2px rgb(20 24 42 / .06),0 0 0 1px rgb(20 24 42 / .04);--sombra-2:0 10px 30px rgb(20 24 42 / .10);
  --dur:300ms;--ease-t:cubic-bezier(.2,.6,.2,1);--press:.99}
/* ===== Kit Despacho (profesionales): verde botella, papel, líneas finas, Newsreader + Rethink Sans, medido ===== */
[data-tema="pro"]{--ac-c:#345e3c;--ac-o:#345e3c;--so-c:#ffffff;--so-o:#ffffff;--at-c:#3d7047;--at-o:#63ad70;--sv-c:#edf3ee;--sv-o:#1a2a1d;--ho:#22402a;
  --fondo:#f7f5f0;--superficie:#fffefa;--relleno:#efece4;--linea:#e2ddd1;--linea-control:#8f877a;--texto:#1d1a17;--texto-2:#615a50;
  --f-disp:"Newsreader",Georgia,serif;--f-txt:"Rethink Sans",ui-sans-serif,system-ui,sans-serif;--w-disp:500;--ls-disp:-.02em;--st-disp:normal;
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:18px;--r-btn:8px;
  --sombra-1:0 0 0 1px #e2ddd1;--sombra-2:0 0 0 1px #e2ddd1,0 14px 30px rgb(29 26 23 / .08);
  --dur:240ms;--ease-t:cubic-bezier(.2,.7,.3,1);--press:.985}
[data-tema]{--acento:var(--ac-c);--sobre-acento:var(--so-c);--acento-texto:var(--at-c);--suave:var(--sv-c);--acento-hondo:var(--ho);--neg:var(--acento);--sobre-neg:var(--sobre-acento);--neg-texto:var(--acento-texto)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fondo:#121118; --superficie:#1b1a23; --relleno:#24222e; --linea:#302d3c; --linea-control:#7a7690;
    --texto:#ecebf2; --texto-2:#aaa6ba; --tinta:#ecebf2; --sobre-tinta:#16141c;
    --ok:#4cc46f; --ok-suave:#173222; --aviso:#e6b046; --aviso-suave:#3a2f14; --peligro:#f07068; --peligro-suave:#3d1c1b; --apagado:#9a96a8; --apagado-suave:#2a2834;
    --acento:var(--ac-o); --sobre-acento:var(--so-o); --acento-texto:var(--at-o); --suave:var(--sv-o);
    color-scheme:dark}
  :root:not([data-theme="light"]) [data-tema],:root:not([data-theme="light"])[data-tema]{--acento:var(--ac-o);--sobre-acento:var(--so-o);--acento-texto:var(--at-o);--suave:var(--sv-o)}
  :root:not([data-theme="light"]) [data-tema="vet"],:root:not([data-theme="light"]) [data-tema="con"],:root:not([data-theme="light"]) [data-tema="pro"]{--fondo:#121118;--superficie:#1b1a23;--relleno:#24222e;--linea:#302d3c;--linea-control:#7a7690;--texto:#ecebf2;--texto-2:#aaa6ba;--apagado-suave:#2a2834;--sombra-1:0 0 0 1px #302d3c}
  :root:not([data-theme="light"]) .hora:not(.sel){color:var(--texto)}
}
:root[data-theme="dark"]{
  --fondo:#121118; --superficie:#1b1a23; --relleno:#24222e; --linea:#302d3c; --linea-control:#7a7690;
  --texto:#ecebf2; --texto-2:#aaa6ba; --tinta:#ecebf2; --sobre-tinta:#16141c;
  --ok:#4cc46f; --ok-suave:#173222; --aviso:#e6b046; --aviso-suave:#3a2f14; --peligro:#f07068; --peligro-suave:#3d1c1b; --apagado:#9a96a8; --apagado-suave:#2a2834;
  --acento:var(--ac-o); --sobre-acento:var(--so-o); --acento-texto:var(--at-o); --suave:var(--sv-o);
  color-scheme:dark}
:root[data-theme="dark"] [data-tema],:root[data-theme="dark"][data-tema]{--acento:var(--ac-o);--sobre-acento:var(--so-o);--acento-texto:var(--at-o);--suave:var(--sv-o)}
:root[data-theme="dark"] [data-tema="vet"],:root[data-theme="dark"] [data-tema="con"],:root[data-theme="dark"] [data-tema="pro"]{--fondo:#121118;--superficie:#1b1a23;--relleno:#24222e;--linea:#302d3c;--linea-control:#7a7690;--texto:#ecebf2;--texto-2:#aaa6ba;--apagado-suave:#2a2834;--sombra-1:0 0 0 1px #302d3c}
:root[data-theme="dark"] .hora:not(.sel){color:var(--texto)}

/* Componentes del manual de marca (sp-, talón, semáforo de días, horas, teléfono, Pulso). */
/* ---------- logo ---------- */
.sim{display:block}
.sim .l{fill:var(--acento-texto)}
.sim .r{fill:var(--acento-texto);opacity:.35}
.sub-marca{font-weight:500;color:var(--acento-texto);font-size:.62em;letter-spacing:0;margin-left:.3em}
.sim.inv .l{fill:var(--sobre-acento)} .sim.inv .r{fill:var(--sobre-acento);opacity:.5}
.sim.tin .l{fill:var(--tinta)} .sim.tin .r{fill:var(--tinta);opacity:.35}
.logo{font-family:"Lexend",ui-sans-serif,sans-serif;font-style:normal;display:inline-flex;align-items:center;gap:.32em;font-weight:700;letter-spacing:-.04em;line-height:1}
.lienzo{border-radius:var(--r-lg);padding:28px;display:flex;align-items:center;justify-content:center;min-height:150px;min-width:0}
.l-claro{background:var(--superficie);box-shadow:var(--sombra-1);color:var(--texto)}
.l-acento{background:var(--acento);color:var(--sobre-acento)}
.l-tinta{background:#16141c;color:#fff}
.l-tinta .sim .l{fill:#fff}.l-tinta .sim .r{fill:#fff;opacity:.45}
.app-ico{width:72px;height:72px;border-radius:18px;background:var(--acento);display:grid;place-items:center;box-shadow:var(--sombra-2)}
.mal{position:relative}
.mal::after{content:"";position:absolute;inset:10px;background:linear-gradient(to top right,transparent calc(50% - 1.5px),var(--peligro) calc(50% - 1.5px),var(--peligro) calc(50% + 1.5px),transparent calc(50% + 1.5px));opacity:.85;pointer-events:none;border-radius:inherit}
.proteccion{position:relative;padding:22px;border:1.5px dashed var(--linea-control);border-radius:8px}

/* ---------- componentes (sp-) ---------- */
.sp-btn{font:inherit;font-weight:600;font-size:15px;border:0;border-radius:var(--r-btn);padding:12px 22px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;transition:transform var(--dur) var(--ease-t),background var(--dur),box-shadow var(--dur);white-space:nowrap}
.sp-btn:active{transform:scale(var(--press))}
.sp-btn.pri{background:var(--acento);color:var(--sobre-acento)}
.sp-btn.pri:hover{box-shadow:0 0 0 4px var(--suave)}
.sp-btn.sec{background:var(--superficie);color:var(--texto);box-shadow:inset 0 0 0 1.5px var(--linea)}
.sp-btn.fan{background:transparent;color:var(--acento-texto);padding-inline:10px}
.sp-btn.pel{background:var(--peligro-suave);color:var(--peligro)}
.sp-btn.chico{font-size:13.5px;padding:8px 14px;min-height:36px}
.sp-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.sp-btn.cargando{pointer-events:none}
.sp-btn .giro{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:giro .7s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.sp-campo{display:flex;flex-direction:column;gap:6px;font-size:14px;min-width:0}
.sp-campo label{font-weight:600}
.sp-campo input{font:inherit;font-size:16px;padding:12px 14px;border-radius:var(--r-sm);border:1.5px solid var(--linea-control);background:var(--superficie);color:var(--texto);min-height:46px;width:100%}
.sp-campo input:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 4px var(--suave)}
.sp-campo.err input{border-color:var(--peligro)}
.sp-campo small{color:var(--texto-2)}
.sp-campo.err small{color:var(--peligro)}
.sp-chip{font:inherit;font-size:14px;font-weight:500;border:1.5px solid var(--linea);background:var(--superficie);color:var(--texto);border-radius:var(--r-btn);padding:7px 14px;cursor:pointer}
.sp-chip[aria-pressed="true"]{background:var(--suave);border-color:var(--acento);color:var(--acento-texto);font-weight:600}
.est{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.est::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.e-sol{background:var(--aviso-suave);color:var(--aviso)}
.e-con{background:var(--suave);color:var(--acento-texto)}
.e-ate{background:var(--ok-suave);color:var(--ok)}
.e-nol{background:var(--peligro-suave);color:var(--peligro)}
.e-can{background:var(--apagado-suave);color:var(--apagado);text-decoration:line-through}
.e-apa{background:repeating-linear-gradient(135deg,var(--apagado-suave) 0 6px,var(--superficie) 6px 12px);color:var(--texto-2);box-shadow:inset 0 0 0 1px var(--linea)}
/* semáforo de días */
.dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dia{font:inherit;border:1.5px solid var(--linea);background:var(--superficie);color:var(--texto);border-radius:var(--r-sm);padding:8px 2px 7px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;font-size:11.5px;min-width:0}
.dia b{font-size:17px;font-variant-numeric:tabular-nums}
.dia i{width:7px;height:7px;border-radius:50%;display:block}
.d-lib i{background:var(--ok)} .d-poc i{background:var(--aviso)} .d-lle i{background:var(--apagado)} .d-lle b{text-decoration:line-through;color:var(--texto-2)}
.d-cer{background:repeating-linear-gradient(135deg,var(--relleno) 0 5px,var(--superficie) 5px 10px);color:var(--texto-2);cursor:not-allowed}
.d-cer i{background:transparent}
.dia.sel{background:var(--neg);border-color:var(--neg);color:var(--sobre-neg)}
.dia.sel i{background:currentColor}
.horas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hora{font:inherit;font-size:14.5px;font-weight:600;padding:10px 0;border-radius:var(--r-sm);transition:transform var(--dur) var(--ease-t);border:1.5px solid color-mix(in srgb,var(--neg) 55%,var(--linea));color:var(--neg-texto);background:var(--superficie);cursor:pointer;font-variant-numeric:tabular-nums}
.hora.sel{background:var(--neg);color:var(--sobre-neg);border-color:var(--neg)}
.hora[disabled]{border-style:dashed;border-color:var(--linea);color:var(--texto-2);text-decoration:line-through;cursor:not-allowed;background:transparent}
/* el talón: firma de Separa */
.talon{--y:calc(100% - 92px);background:var(--superficie);border-radius:var(--r-lg);box-shadow:var(--sombra-2);display:flex;flex-direction:column;overflow:hidden;
  -webkit-mask:radial-gradient(circle 11px at 0 var(--y),#0000 98%,#000) left/50.5% 100% no-repeat,radial-gradient(circle 11px at 100% var(--y),#0000 98%,#000) right/50.5% 100% no-repeat;
  mask:radial-gradient(circle 11px at 0 var(--y),#0000 98%,#000) left/50.5% 100% no-repeat,radial-gradient(circle 11px at 100% var(--y),#0000 98%,#000) right/50.5% 100% no-repeat}
.talon .cuerpo{padding:18px 20px 16px;display:flex;flex-direction:column;gap:6px}
.talon .corte{height:92px;border-top:2px dashed var(--linea);margin-inline:16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.talon .codigo{font-size:30px;font-weight:700;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.talon .cuando{font-size:22px;font-weight:700;letter-spacing:-.02em}
.toast{position:relative;display:inline-flex;align-items:center;gap:10px;background:var(--tinta);color:var(--sobre-tinta);padding:12px 16px;border-radius:14px;font-size:14px;box-shadow:var(--sombra-2)}
.toast button{font:inherit;font-weight:700;background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer}
.vacio{border:1.5px dashed var(--linea);border-radius:var(--r-md);padding:22px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;color:var(--texto-2);font-size:14px}
.esq{display:flex;flex-direction:column;gap:8px}
.esq i{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--relleno) 0 40%,var(--superficie) 50%,var(--relleno) 60% 100%);background-size:250% 100%;animation:brillo 1.4s linear infinite}
@keyframes brillo{from{background-position:100% 0}to{background-position:-50% 0}}

/* ---------- teléfono ---------- */
.tel{width:100%;max-width:330px;background:var(--fondo);border-radius:38px;padding:12px;box-shadow:0 0 0 1.5px var(--linea),var(--sombra-2);justify-self:center;min-width:0}
.tel-in{background:var(--fondo);border-radius:28px;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:14px 12px 12px;min-height:560px}
.neg-cab{display:flex;gap:10px;align-items:center}
.neg-logo{width:44px;height:44px;border-radius:var(--r-sm);background:var(--neg);color:var(--sobre-neg);display:grid;place-items:center;font-weight:700;flex:none}
.pasos{display:flex;gap:4px}
.pasos i{flex:1;height:4px;border-radius:2px;background:var(--linea)}
.pasos i.on{background:var(--neg)}
.barra-fija{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.cuenta{height:4px;border-radius:2px;background:var(--linea);overflow:hidden}
.cuenta i{display:block;height:100%;width:100%;background:var(--neg);transform-origin:left;animation:cuenta 300s linear forwards}
@keyframes cuenta{to{transform:scaleX(0)}}
.btn-neg{font:inherit;font-weight:600;font-size:15px;border:0;border-radius:var(--r-btn);padding:13px;background:var(--neg);color:var(--sobre-neg);cursor:pointer;min-height:46px;transition:transform .12s var(--ease)}
.btn-neg:active{transform:scale(var(--press))}
.endoso{font-size:11.5px;color:var(--texto-2);display:flex;align-items:center;gap:5px;justify-content:center}
.paleta{display:flex;gap:8px;flex-wrap:wrap}
.paleta button{width:34px;height:34px;border-radius:50%;border:3px solid var(--superficie);box-shadow:0 0 0 1.5px var(--linea);cursor:pointer}
.paleta button[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--texto)}

/* ---------- pulso ---------- */
.demo{display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-height:120px;justify-content:space-between}
.zona{min-height:64px;width:100%;display:flex;align-items:center;justify-content:center;background:var(--relleno);border-radius:var(--r-md);padding:12px;overflow:hidden}
.a-toast{animation:toastIn .22s var(--ease)} @keyframes toastIn{from{transform:translateY(14px);opacity:0}}
.a-error{animation:sacude .36s var(--ease)} @keyframes sacude{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.a-revela{animation:revela .55s var(--ease)} @keyframes revela{from{transform:translateY(16px) scale(.96);opacity:0}}
.a-sube{animation:sube var(--dur) var(--ease-t)} @keyframes sube{from{transform:translateX(22px);opacity:0}}
.a-pop{animation:pop calc(var(--dur) + 80ms) var(--ease-t)} @keyframes pop{from{transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.talon.separar .corte{animation:separar .7s var(--ease-t) forwards;transform-origin:15% 0}
@keyframes separar{0%{transform:none}55%{transform:translateY(10px) rotate(-3deg)}100%{transform:translateY(6px) rotate(-1.5deg)}}

/* Landings de Separa. Layout: una columna de 1120 px con gutter de 16 px; cada sección es una
   banda con su cabecera. Todo pinta con tokens: el data-tema de <html> viste la página. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--f-txt);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
[data-tema="con"] body{font-size:17px}
h1,h2,h3,.cuando,.plan-n{font-family:var(--f-disp);font-weight:var(--w-disp);letter-spacing:var(--ls-disp);font-style:var(--st-disp);margin:0;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(38px,7vw,68px)}
h2{font-size:clamp(26px,4vw,38px)}
p{margin:0}
a{color:var(--acento-texto)}
img,svg{max-width:100%}
.muted{color:var(--texto-2)}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--acento-texto);font-family:var(--f-txt);font-style:normal}
.lab{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-2)}
.nota-chica{font-size:13px;color:var(--texto-2)}
:focus-visible{outline:2px solid var(--acento-texto);outline-offset:2px}
.saltar{position:absolute;left:-999px;top:8px;background:var(--superficie);padding:8px 12px;border-radius:8px;z-index:50}
.saltar:focus{left:16px}
[hidden]{display:none!important}
.sp-btn{text-decoration:none;font-family:var(--f-txt)}

/* ---------- barra ---------- */
.barra{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--fondo) 86%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.barra-in{max-width:1120px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px}
.logo{font-size:22px;color:var(--texto);text-decoration:none}
.barra-nav{display:flex;gap:20px;margin-left:auto;font-size:14.5px}
.barra-nav a{color:var(--texto-2);text-decoration:none;font-weight:500}
.barra-nav a:hover{color:var(--texto)}
@media (max-width:720px){.barra-nav{display:none}.barra-in .sp-btn{margin-left:auto}.sub-marca{display:none}}

/* ---------- secciones ---------- */
main{display:flex;flex-direction:column;gap:clamp(64px,10vw,112px);padding-bottom:96px}
.seccion,.heroe,.legal{width:100%;max-width:1120px;margin:0 auto;padding-inline:16px}
.seccion{display:flex;flex-direction:column;gap:28px}
.cab{display:flex;flex-direction:column;gap:10px;max-width:720px}
.cab p{font-size:17px}

/* ---------- héroe ---------- */
.heroe{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,64px);align-items:center;padding-top:clamp(36px,7vw,88px)}
.heroe-corto{grid-template-columns:minmax(0,1fr);max-width:820px;margin-inline:auto;text-align:left}
@media (max-width:860px){.heroe{grid-template-columns:minmax(0,1fr)}}
.heroe-txt{display:flex;flex-direction:column;gap:18px}
.bajada{font-size:clamp(17px,2vw,19.5px);color:var(--texto-2);max-width:56ch}
.acciones{display:flex;gap:10px;flex-wrap:wrap}
.escena{min-width:0}
.escena-fondo{position:relative;background:var(--suave);border-radius:var(--r-xl);padding:clamp(28px,5vw,48px) clamp(20px,4vw,40px);display:flex;flex-direction:column;align-items:center;gap:18px;overflow:hidden;min-height:340px;justify-content:center}
.escena-fondo .talon{width:100%;max-width:320px}
.ico-escena{position:absolute;right:-26px;top:-26px;width:170px;height:170px;color:var(--acento-texto);opacity:.16;stroke-width:1.2}
.burbuja-wa{align-self:flex-end;background:#dcf8c6;color:#111b21;border-radius:14px 14px 4px 14px;padding:10px 14px;font-size:14px;line-height:1.45;max-width:270px;box-shadow:0 1px 2px rgb(0 0 0 / .1);font-family:system-ui,sans-serif}
.talon-det{font-size:14px;color:var(--texto-2)}
.talon .est{align-self:flex-start;margin-top:4px}
.talon-nota{font-size:12.5px;color:var(--texto-2);text-align:right}

/* ---------- puertas de rubro ---------- */
.puertas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.puerta{background:var(--fondo);color:var(--texto);font-family:var(--f-txt);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:8px;text-decoration:none;box-shadow:0 0 0 1px var(--linea),var(--sombra-1);min-height:200px;transition:transform var(--dur) var(--ease-t),box-shadow var(--dur)}
.puerta:hover{transform:translateY(-3px);box-shadow:0 0 0 1.5px var(--acento),var(--sombra-2)}
.puerta .ico{width:34px;height:34px;color:var(--acento-texto)}
.puerta b{font-family:var(--f-disp);font-weight:var(--w-disp);font-style:var(--st-disp);letter-spacing:var(--ls-disp);font-size:22px;line-height:1.15}
.puerta span{font-size:14.5px;color:var(--texto-2)}
.puerta .puerta-ir{margin-top:auto;color:var(--acento-texto);font-weight:600}

/* ---------- pasos ---------- */
.pasos-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:p}
@media (max-width:760px){.pasos-l{grid-template-columns:minmax(0,1fr)}}
.pasos-l li{background:var(--superficie);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--sombra-1)}
.pasos-l b{font-size:18px}
.pasos-l span:last-child{color:var(--texto-2);font-size:15px}
.paso-n{width:34px;height:34px;border-radius:50%;background:var(--acento);color:var(--sobre-acento);display:grid;place-items:center;font-weight:700;margin-bottom:6px}

/* ---------- demo ---------- */
.demo-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:center}
@media (max-width:760px){.demo-grid{grid-template-columns:minmax(0,1fr)}}
.neg-cab div{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.neg-cab b{font-size:15.5px}
.neg-cab .muted{font-size:12.5px}
.tel-serv{background:var(--superficie);border-radius:var(--r-sm);padding:10px 12px;font-weight:600;font-size:14px;display:flex;flex-direction:column;box-shadow:var(--sombra-1)}
.tel-serv span{font-weight:400;font-size:12.5px;color:var(--texto-2)}
.dia span{font-size:11px}
.tel.hecho .tel-in>:not([data-listo]){display:none}
.tel-listo{display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;flex:1;text-align:center}
.tel-listo .talon{width:100%;text-align:left}
.listo-cab{display:flex;flex-direction:column}
.listo-cab b{font-family:var(--f-disp);font-style:var(--st-disp);font-size:24px}
.demo-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;font-size:16px;color:var(--texto-2)}
.demo-lista li{padding-left:22px;position:relative}
.demo-lista li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--acento)}
.demo-lista b{color:var(--texto)}

/* ---------- bento ---------- */
.bento,.beneficios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:860px){.bento,.beneficios{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.bento,.beneficios{grid-template-columns:minmax(0,1fr)}}
.mini{background:var(--superficie);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sombra-1);min-width:0}
.mini.ancho{grid-column:span 2}
@media (max-width:560px){.mini.ancho{grid-column:auto}}
.mini b{font-size:17.5px;line-height:1.3}
.mini p{color:var(--texto-2);font-size:15px}
.pronto,.plan li em{font-style:normal;font-size:11.5px;font-weight:600;background:var(--aviso-suave);color:var(--aviso);padding:2px 8px;border-radius:999px;margin-left:4px;vertical-align:2px;font-family:var(--f-txt)}
.calc{background:var(--suave)}
.calc-campos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:6px}
@media (max-width:760px){.calc-campos{grid-template-columns:minmax(0,1fr)}}
.calc label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--texto-2)}
.calc output{font-weight:700;color:var(--texto);font-variant-numeric:tabular-nums;font-size:18px}
.calc input[type=range]{accent-color:var(--acento);width:100%}
.calc-res{font-size:17px;color:var(--texto)}
.calc-res strong{font-size:24px;color:var(--acento-texto);font-variant-numeric:tabular-nums}

/* ---------- planes ---------- */
.periodo{display:inline-flex;align-self:flex-start;background:var(--relleno);border-radius:999px;padding:4px;gap:2px}
.periodo button{font:inherit;font-size:14px;font-weight:600;border:0;background:transparent;color:var(--texto-2);padding:8px 16px;border-radius:999px;cursor:pointer;transition:background var(--dur) var(--ease-t)}
.periodo button[aria-pressed="true"]{background:var(--superficie);color:var(--texto);box-shadow:var(--sombra-1)}
.planes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}
@media (max-width:1000px){.planes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.planes{grid-template-columns:minmax(0,1fr)}}
.plan{background:var(--superficie);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sombra-1);position:relative}
.plan.dest{box-shadow:0 0 0 2px var(--acento),var(--sombra-2)}
.plan-tag{position:absolute;top:-12px;left:22px;background:var(--acento);color:var(--sobre-acento);font-size:12px;font-weight:600;padding:3px 12px;border-radius:999px}
.plan-n{font-size:22px}
.plan-lema{font-size:14px;color:var(--texto-2);min-height:2.6em}
.plan-precio{display:flex;align-items:baseline;gap:6px;margin-top:6px}
.plan-precio .monto{font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan-precio .per,.plan-anual{font-size:13.5px;color:var(--texto-2)}
.plan-anual{min-height:1.4em}
.plan ul{list-style:none;margin:8px 0 14px;padding:0;display:flex;flex-direction:column;gap:7px;font-size:14.5px}
.plan li{padding-left:22px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:7px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.plan .sp-btn{margin-top:auto}

/* ---------- preguntas ---------- */
.faq{display:flex;flex-direction:column;gap:8px;max-width:820px}
.faq details{background:var(--superficie);border-radius:var(--r-md);padding:0 20px;box-shadow:var(--sombra-1)}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;line-height:1;color:var(--acento-texto);transition:transform var(--dur) var(--ease-t)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;color:var(--texto-2)}

/* ---------- formularios ---------- */
.form-caja{background:var(--superficie);border-radius:var(--r-xl);padding:clamp(22px,5vw,48px);box-shadow:var(--sombra-2);display:flex;flex-direction:column;gap:24px}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.form{grid-template-columns:minmax(0,1fr)}}
.form .ancho{grid-column:1/-1}
.sp-campo select,.sp-campo textarea{font:inherit;font-size:16px;padding:12px 14px;border-radius:var(--r-sm);border:1.5px solid var(--linea-control);background:var(--superficie);color:var(--texto);min-height:46px;width:100%}
.sp-campo textarea{resize:vertical}
.sp-campo select:focus,.sp-campo textarea:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 4px var(--suave)}
.sp-campo.err select,.sp-campo.err textarea{border-color:var(--peligro)}
fieldset.sp-campo{border:0;padding:0;margin:0}
fieldset.sp-campo legend{font-weight:600;margin-bottom:6px}
.radios{display:flex;gap:18px}
.radios label{display:flex;gap:8px;align-items:center;font-weight:500}
.radios input{accent-color:var(--acento);width:18px;height:18px}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-pie{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.form-msg{color:var(--peligro);font-size:14.5px;font-weight:500}
.form-ok{background:var(--suave);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:6px;animation:revela .55s var(--ease)}
.form-ok b{font-family:var(--f-disp);font-style:var(--st-disp);font-size:24px}

/* ---------- legal ---------- */
.legal{max-width:780px;display:flex;flex-direction:column;gap:14px;padding-top:48px}
.legal h1{font-size:clamp(32px,5vw,46px)}
.legal h2{font-size:21px;margin-top:18px}
.legal ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.legal p,.legal li{color:var(--texto-2)}
.legal b{color:var(--texto)}
.libro-form{margin-top:12px;background:var(--superficie);border-radius:var(--r-lg);padding:clamp(18px,4vw,32px);box-shadow:var(--sombra-1)}

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--linea);background:var(--superficie)}
.pie-in{max-width:1120px;margin:0 auto;padding:40px 16px 32px;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)) auto;gap:28px;font-size:14px}
@media (max-width:860px){.pie-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pie-in{grid-template-columns:minmax(0,1fr)}}
.pie-marca{display:flex;flex-direction:column;gap:10px;color:var(--texto-2)}
.pie-nav{display:flex;flex-direction:column;gap:6px}
.pie-nav b{font-size:13px;color:var(--texto)}
.pie-nav a{color:var(--texto-2);text-decoration:none;overflow-wrap:anywhere}
.pie-nav a:hover{color:var(--texto)}
.libro{display:inline-flex;align-items:center;gap:8px;align-self:start;border:1.5px solid var(--linea-control);border-radius:var(--r-sm);padding:10px 14px;color:var(--texto);text-decoration:none;font-weight:600}
.pie-legal{grid-column:1/-1;border-top:1px solid var(--linea);padding-top:18px;color:var(--texto-2);font-size:12.5px}
.plan-precio{flex-wrap:wrap}
.plan-precio .desde{font-size:13.5px;color:var(--texto-2)}
.plan-precio .monto{white-space:nowrap}
.neg-logo{line-height:1;font-size:19px}
/* Juego de marca: "Separa" con la letra de la marca y el resto con la del kit, en dos líneas */
.juego{display:flex;flex-direction:column;gap:2px;line-height:1.02}
.juego-marca{font-family:"Lexend",ui-sans-serif,system-ui,sans-serif;font-style:normal;font-weight:700;letter-spacing:-.04em;color:var(--acento-texto)}
.juego-resto{font-size:.92em}