/* Veci — hoja de estilos del sitio público (landing + blog). */

/* Las mismas dos familias que la app (tienda, panel, onboarding):
   Bricolage Grotesque en títulos e Inter Tight en texto y cifras, alojadas
   aquí mismo (sin Google Fonts: más rápido en datos móviles y sin pasarle
   la IP de los visitantes a un tercero). Fuentes variables, subconjunto
   latino. Licencia SIL Open Font License 1.1. */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-tight-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:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/bricolage-grotesque-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}

:root{
  --carbon:#202124; --tiquete:#FFFDF8; --sello:#3B4CCA; --sello-claro:#7A85DB; --recibo:#E9E4D8; --caja:#16A36A;
  --aji:#E8452C; --mostaza:#F2B632; --gris:#54565f; --gris-suave:#8a8d97;
  /* color para TEXTO (cambia con el tema) y color SÓLIDO para fondos de botón
     (no cambia): el azul y el verde de marca no alcanzan AA como texto sobre
     fondos oscuros, ni el verde como fondo con texto blanco. */
  --sello-solido:#3B4CCA; --caja-solido:#0B7A4C;
  --caja-texto:#0B7A4C; --aji-texto:#BF3A22; --mostaza-texto:#875A00;

  /* misma tipografía que la app (panel/tienda): una sola familia en todo Veci */
  --fuente-titulo:'Bricolage Grotesque',sans-serif; --fuente-texto:'Inter Tight',sans-serif;

  /* tokens semánticos: estos sí invierten con el tema */
  --bg:#FFFDF8; --bg-suave:#F4F1E9; --superficie:#FFFFFF;
  --texto:#202124; --texto-suave:#54565f; --texto-tenue:#676971; --borde:#E9E4D8;
  --sombra-suave:0 1px 2px rgba(32,33,36,.04), 0 10px 28px -12px rgba(32,33,36,.10);
  --sombra-media:0 4px 10px rgba(32,33,36,.05), 0 20px 40px -16px rgba(32,33,36,.16);
  --tinte-sello:rgba(59,76,202,.10); --tinte-caja:rgba(22,163,106,.12);
  --tinte-aji:rgba(232,69,44,.10); --tinte-mostaza:rgba(242,182,50,.16);
  --radio-tarjeta:20px; --radio-badge:14px; --radio-pill:999px;
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#111217; --bg-suave:#1A1B22; --superficie:#191A20;
  --texto:#F1EFE9; --texto-suave:#AEB1BE; --texto-tenue:#8D8F9C; --borde:rgba(255,255,255,.09);
  --sombra-suave:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -12px rgba(0,0,0,.5);
  --sombra-media:0 4px 10px rgba(0,0,0,.35), 0 24px 48px -16px rgba(0,0,0,.6);
  --tinte-sello:rgba(122,133,219,.16); --tinte-caja:rgba(22,163,106,.18);
  --tinte-aji:rgba(232,69,44,.16); --tinte-mostaza:rgba(242,182,50,.14);
  --sello:#8E98EA; --caja-texto:#3ED18B; --aji-texto:#FF8A70; --mostaza-texto:#F2C25A;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font-family:var(--fuente-texto);color:var(--texto);background:var(--bg);-webkit-font-smoothing:antialiased;transition:background-color .25s ease,color .25s ease}
a{color:inherit}
img{max-width:100%;display:block}

/* superficies del navegador: lo que no dibujamos a mano también lleva la marca */
::selection{background:var(--sello-solido);color:#fff}
:focus-visible{outline:2px solid var(--sello);outline-offset:2px}
*{scrollbar-color:var(--borde) var(--bg-suave);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg-suave)}
::-webkit-scrollbar-thumb{background:var(--borde);border-radius:999px;border:3px solid var(--bg-suave);transition:background .15s ease}
::-webkit-scrollbar-thumb:hover{background:var(--texto-tenue)}

.mono{font-family:var(--fuente-texto);font-variant-numeric:tabular-nums}
.serif{font-family:var(--fuente-titulo);font-weight:700}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.wrap-angosto{max-width:740px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.wrap-ancho{max-width:1400px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}

.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:14px 24px;border-radius:var(--radio-pill);border:none;cursor:pointer;text-decoration:none;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s cubic-bezier(.2,.8,.2,1),background-color .2s ease,border-color .2s ease;-webkit-tap-highlight-color:transparent;outline:none}
.btn:active{transform:scale(.96);transition-duration:.1s}
.btn-sello{background:var(--sello-solido);color:var(--tiquete)}
.btn-sello:hover{box-shadow:0 16px 32px -10px rgba(59,76,202,.6);transform:translateY(-3px) scale(1.015)}
.btn-ghost{background:transparent;border:1.5px solid rgba(255,253,248,.35);color:var(--tiquete)}
.btn-ghost:hover{border-color:rgba(255,253,248,.7);transform:translateY(-3px) scale(1.015);box-shadow:0 12px 26px -12px rgba(0,0,0,.35)}
.btn-ghost-oscuro{background:transparent;border:1.5px solid var(--borde);color:var(--texto)}
.btn-contorno{border-color:var(--texto-tenue)}
.btn-ghost-oscuro:hover{border-color:var(--texto);transform:translateY(-3px) scale(1.015);box-shadow:var(--sombra-media)}
.btn-caja{background:var(--caja-solido);color:var(--tiquete)}
.btn-caja:hover{box-shadow:0 16px 32px -10px rgba(22,163,106,.55);transform:translateY(-3px) scale(1.015)}
@media (prefers-reduced-motion: reduce){
  .btn{transition:background-color .2s ease,border-color .2s ease}
  .btn:active{transform:none}
  .btn-sello:hover,.btn-ghost:hover,.btn-ghost-oscuro:hover,.btn-caja:hover{transform:none}
}

/* nav + footer, compartidos por landing y blog: barra flotante tipo cápsula,
   separada del fondo de la página por su propio borde/sombra — no una barra
   plana a todo lo ancho con subrayados. */
nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px 9px 18px;border-radius:999px;
  background:var(--superficie);border:1px solid var(--borde);box-shadow:var(--sombra-suave);
  transition:box-shadow .2s ease,border-color .2s ease,background .2s ease;
}
.brand{text-decoration:none;color:inherit;display:inline-flex;align-items:center;flex-shrink:0}
.brand img{height:23px;width:auto;display:block}
.brand .logo-oscuro{display:none}
[data-theme="dark"] .brand .logo-claro{display:none}
[data-theme="dark"] .brand .logo-oscuro{display:block}
.nav-derecha{display:flex;align-items:center;gap:16px}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{
  font-size:13.5px;font-weight:500;text-decoration:none;color:var(--texto-suave);
  padding:10px 16px;border-radius:999px;transition:background .15s ease,color .15s ease;
  outline:none;
}
.nav-link-icono{display:none}
.nav-panel-header{display:none}
.nav-links a:focus-visible,.btn-login:focus-visible,.btn-tema:focus-visible,.btn:focus-visible{
  outline:none;box-shadow:0 0 0 3px var(--tinte-sello);
}
.nav-links a:not(.nav-chip):not(.btn-nav):not(.btn-login):hover{color:var(--texto);background:var(--bg-suave)}
.nav-links .nav-auth .btn-nav,.nav-links .nav-auth .btn-nav:hover{color:var(--tiquete)}
.nav-clara .nav-links a{color:var(--texto-suave)}
.nav-oscura nav{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1)}
.nav-oscura .brand{color:var(--tiquete)}
.nav-oscura .nav-links a,.nav-oscura .nav-trigger{color:#C9CCD6}
.nav-oscura .nav-links a:hover{color:var(--tiquete);background:rgba(255,255,255,.08)}

/* enlace "Ver demos": un chip distinto, no un link plano más — es una
   llamada a la acción secundaria, no una página del menú. */
.nav-links a.nav-chip{
  color:var(--sello);background:var(--tinte-sello);font-weight:600;
  padding:8px 15px 8px 15px;margin-left:4px;
}
.nav-links a.nav-chip:hover{background:var(--sello-solido);color:var(--tiquete)}
.nav-oscura .nav-links a.nav-chip{color:var(--sello-claro);background:rgba(122,133,219,.16)}
.nav-oscura .nav-links a.nav-chip:hover{background:var(--sello-claro);color:var(--carbon)}

/* el header flota SOBRE el contenido (position:fixed, sin franja de fondo
   propia) — es la cápsula de <nav> la que tiene fondo/sombra, no esta capa.
   Cada página compensa el espacio con padding-top en <body> (ver más abajo),
   excepto el home, cuyo hero sube hasta el borde superior a propósito. */
.nav-fija{position:fixed;top:0;left:0;right:0;z-index:60;padding:18px 0}
.nav-fija .wrap{position:static}
body{padding-top:88px}
body.sin-nav-espacio{padding-top:0}
@media (max-width:860px){
  .nav-fija{padding:14px 0}
  body{padding-top:76px}
}

/* botón de tema: sol/luna, con crossfade entre los dos íconos */
.btn-tema{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:none;background:var(--bg-suave);color:var(--texto-suave);cursor:pointer;flex-shrink:0;transition:color .2s ease,transform .2s ease,background .2s ease}
.btn-tema:hover{background:var(--tinte-sello);color:var(--sello);transform:rotate(-12deg) scale(1.06)}
.btn-tema svg{width:17px;height:17px}
.btn-tema .icono-sol{display:none}
[data-theme="dark"] .btn-tema .icono-luna{display:none}
[data-theme="dark"] .btn-tema .icono-sol{display:block}
.nav-oscura .btn-tema{background:rgba(255,255,255,.08);color:#C9CCD6}
.nav-oscura .btn-tema:hover{background:rgba(122,133,219,.22);color:var(--sello-claro)}

/* botones de sesión: iniciar sesión / empezar gratis */
.nav-auth{display:flex;align-items:center;gap:6px}
.btn-login{font-size:13.5px;font-weight:600;color:var(--texto-suave);text-decoration:none;white-space:nowrap;padding:9px 14px;border-radius:999px;transition:color .15s ease,background .15s ease}
.btn-login:hover{color:var(--texto);background:var(--bg-suave)}
.nav-oscura .btn-login{color:#C9CCD6}
.nav-oscura .btn-login:hover{color:var(--tiquete);background:rgba(255,255,255,.08)}
.btn-nav{padding:11px 22px;font-size:13.5px;white-space:nowrap;margin-left:6px;box-shadow:0 6px 16px -6px rgba(59,76,202,.45)}
@media (max-width:860px){
  .nav-auth{width:100%;flex-direction:column;align-items:stretch;gap:8px;padding:14px 4px 4px;border-top:1px solid var(--borde);margin-top:8px}
  .nav-oscura .nav-auth{border-top-color:rgba(255,255,255,.1)}
  .nav-auth .btn-login{text-align:center;padding:12px 0;border-radius:14px}
  .nav-auth .btn-nav{width:100%;justify-content:center;margin-left:0;padding:14px 22px}
}

/* mega menú */
.nav-item-menu{position:relative}
.nav-item-menu > a{display:inline-flex;align-items:center;gap:5px}
.nav-item-menu .flecha{width:11px;height:11px;transition:transform .2s ease}
.mega-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(10px) scale(.98);
  width:460px;background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio-tarjeta);
  box-shadow:var(--sombra-media);padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s cubic-bezier(.2,.8,.2,1),transform .22s cubic-bezier(.2,.8,.2,1),visibility .22s;z-index:70;
}
.mega-menu .columna{display:flex;flex-direction:column;gap:2px}
.mega-menu.una-col{width:300px;grid-template-columns:1fr}
@media (max-width:860px){.mega-menu.una-col{width:auto}}
/* el hover/focus-within que abre el mega menú es un patrón solo de escritorio;
   en mobile el toggle es por click (clase .abierto vía JS), ver más abajo. */
@media (min-width:861px){
  .nav-item-menu:hover .flecha,.nav-item-menu:focus-within .flecha{transform:rotate(180deg)}
  .nav-item-menu:hover .mega-menu,.nav-item-menu:focus-within .mega-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1)}
}
.mega-menu .titulo-col{font-family:var(--fuente-texto);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-tenue);padding:6px 10px;margin-bottom:2px}
.mega-menu a.item{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:12px;text-decoration:none;color:var(--texto);transition:background .15s ease}
.mega-menu a.item:hover{background:var(--bg-suave)}
.mega-menu a.item .icono{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mega-menu a.item strong{display:block;font-size:13.5px;font-weight:600}
.mega-menu a.item span{display:block;font-size:12px;color:var(--texto-suave);margin-top:1px}
@media (max-width:860px){
  .mega-menu{position:static;transform:none;width:auto;box-shadow:none;border:none;background:transparent;padding:4px 0 6px;grid-template-columns:1fr;opacity:1;visibility:visible;pointer-events:auto;display:none}
  .nav-item-menu.abierto .mega-menu{display:grid}
  .mega-menu .columna{gap:1px}
  .mega-menu .titulo-col{padding:6px 10px 4px}
  .mega-menu a.item{padding:9px 10px}
}

/* nav en mobile: hamburguesa (que se convierte en X al abrir) + tarjeta flotante */
.btn-hamburguesa{display:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--borde);background:var(--superficie);color:var(--texto-suave);align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:background .15s ease,border-color .15s ease}
.btn-hamburguesa svg{width:18px;height:18px}
.btn-hamburguesa .linea{transform-box:fill-box;transform-origin:center;transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .2s ease}
.btn-hamburguesa.abierto{background:var(--texto);border-color:var(--texto);color:var(--bg)}
.btn-hamburguesa.abierto .linea-arriba{transform:translateY(5px) rotate(45deg) scaleX(1.15)}
.btn-hamburguesa.abierto .linea-medio{opacity:0}
.btn-hamburguesa.abierto .linea-abajo{transform:translateY(-5px) rotate(-45deg) scaleX(1.15)}
.nav-oscura .btn-hamburguesa{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#C9CCD6}
.nav-trigger{background:none;border:none;font:inherit;font-size:14px;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:0}
body.menu-abierto{overflow:hidden}

/* menú móvil: hoja de pantalla completa (la arma tema.js). Contesta primero
   "¿esto sirve para mi negocio?" y deja el registro fijo abajo. */
.menu-movil{position:fixed;inset:0;z-index:59;display:flex;flex-direction:column;background:var(--bg);padding-top:96px;opacity:0;transform:translateY(-10px);transition:opacity .28s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1)}
.menu-movil[hidden]{display:none}
.menu-movil.abierto{opacity:1;transform:none}
.menu-movil-cuerpo{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 20px 24px}
.menu-movil-cuerpo>*{opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.menu-movil.abierto .menu-movil-cuerpo>*{opacity:1;transform:none}
.menu-movil.abierto .menu-movil-cuerpo>:nth-child(2){transition-delay:.04s}
.menu-movil.abierto .menu-movil-cuerpo>:nth-child(3){transition-delay:.08s}
.menu-movil.abierto .menu-movil-cuerpo>:nth-child(4){transition-delay:.12s}
.menu-movil-titulo{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-tenue)}
.menu-movil-negocios{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.menu-movil-negocio{display:flex;flex-direction:column;gap:10px;min-height:96px;padding:14px;border:1px solid var(--borde);border-radius:18px;background:var(--superficie);color:var(--texto);text-decoration:none;font-family:var(--fuente-titulo);font-weight:700;font-size:15px;line-height:1.2;transition:border-color .15s ease,transform .15s ease}
.menu-movil-negocio:active{transform:scale(.98)}
.menu-movil-negocio[aria-current]{border-color:var(--sello)}
.menu-movil-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center}
.menu-movil-ico svg{width:20px;height:20px}
.menu-movil .menu-movil-principal{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:0;border:0;border-top:1px solid var(--borde);border-radius:0;background:none;box-shadow:none;transition:none}
.menu-movil-principal a{display:flex;text-align:left;flex-direction:column;gap:2px;padding:13px 4px;border-bottom:1px solid var(--borde);text-decoration:none;color:var(--texto)}
.menu-movil-principal a{position:relative;padding-right:32px}
.menu-movil-principal a::after{content:"";position:absolute;right:8px;top:50%;width:8px;height:8px;border-top:2px solid var(--texto-tenue);border-right:2px solid var(--texto-tenue);transform:translateY(-50%) rotate(45deg)}
.menu-movil-principal strong{display:flex;align-items:center;gap:8px;font-family:var(--fuente-titulo);font-weight:700;font-size:18px;letter-spacing:-.01em}
.menu-movil-principal span{font-size:13.5px;color:var(--texto-suave)}
.menu-movil-principal a[aria-current] strong{color:var(--sello)}
.menu-movil-vivo{width:8px;height:8px;border-radius:50%;background:var(--caja-solido);box-shadow:0 0 0 4px var(--tinte-caja);animation:pulso 2s ease-in-out infinite}
.menu-movil-secundario{display:flex;flex-wrap:wrap;gap:4px 18px;margin:18px 0 0}
.menu-movil-secundario a{font-size:14px;color:var(--texto-suave);text-decoration:none;padding:6px 0}
.menu-movil-pie{padding:14px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--borde);background:var(--bg);box-shadow:0 -16px 30px -24px rgba(0,0,0,.35)}
.menu-movil-cta{width:100%;justify-content:center;padding:16px;font-size:16px}
.menu-movil-pie p{margin:10px 0 0;text-align:center;font-size:13px;color:var(--texto-suave)}
.menu-movil-pie p a{color:var(--sello);font-weight:600;text-decoration:none}
.menu-movil a:focus-visible{outline:2px solid var(--sello);outline-offset:2px;border-radius:8px}
@media (max-width:860px){
  .btn-hamburguesa{display:inline-flex}
  .nav-links{display:none}
  nav{padding:9px 10px 9px 18px}
}
@media (min-width:861px){.menu-movil{display:none!important}}
@media (prefers-reduced-motion: reduce){
  .menu-movil,.menu-movil-cuerpo>*{transition:opacity .15s ease;transform:none!important}
}

footer{padding:32px 0;border-top:1px solid var(--borde)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
footer p{font-size:13px;color:var(--texto-tenue);margin:0}
footer .footer-links{display:flex;gap:18px}
footer .footer-links a{font-size:13px;color:var(--texto-suave);text-decoration:none}
footer .footer-links a:hover{color:var(--sello)}
.estado{display:inline-flex;align-items:center;gap:8px;background:var(--bg-suave);border-radius:20px;padding:7px 14px;font-size:12px;color:var(--texto-suave)}
.estado .dot{width:7px;height:7px;border-radius:50%;background:var(--caja-solido)}

/* footer: el toldo del local. Carbón con cenefa de festones mostaza/crema
   arriba; marca + ayuda humana a la izquierda, tres grupos cortos. */
footer.footer-grande{background:var(--carbon);color:var(--tiquete);border-top:none;padding:0;overflow:hidden;position:relative}
.footer-toldo{height:24px;background:repeating-linear-gradient(90deg,var(--mostaza) 0 28px,var(--tiquete) 28px 56px);
  -webkit-mask:linear-gradient(#000 0 0) top/100% 10px no-repeat,radial-gradient(circle 14px at 50% 0,#000 97%,transparent 100%) 0 10px/28px 14px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% 10px no-repeat,radial-gradient(circle 14px at 50% 0,#000 97%,transparent 100%) 0 10px/28px 14px repeat-x}
.footer-grande .wrap{display:block;position:relative;z-index:1;padding-top:56px}
.footer-columnas{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-bottom:48px}
.footer-logo{display:inline-block;margin-bottom:16px}
.footer-logo img{height:28px;width:auto;display:block}
.footer-promesa{font-family:var(--fuente-titulo);font-size:17px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:#F1EFE9;max-width:290px;margin:0 0 26px;text-wrap:balance}
.footer-ayuda{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;max-width:320px}
.footer-ayuda-titulo{flex-basis:100%;font-size:13px;color:#B4B7C3}
.footer-ayuda-chat{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,253,248,.18);background:rgba(255,253,248,.06);color:#F1EFE9;font:600 14px var(--fuente-texto);cursor:pointer;transition:background .15s ease,border-color .15s ease}
.footer-ayuda-chat svg{width:16px;height:16px;color:var(--mostaza)}
.footer-ayuda-chat:hover{background:rgba(255,253,248,.12);border-color:rgba(255,253,248,.3)}
.footer-ayuda-correo{font-size:13.5px;color:#C9CCD6;text-decoration:underline;text-decoration-color:rgba(201,204,214,.35);text-underline-offset:3px}
.footer-ayuda-correo:hover{color:#fff;text-decoration-color:currentColor}
.footer-col{display:flex;flex-direction:column;gap:4px}
.footer-titulo{font-family:var(--fuente-texto);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#9A9DAA;margin-bottom:6px}
.footer-col a{font-size:14px;color:#D4D6DE;text-decoration:none;padding:6px 0;transition:color .15s ease}
.footer-col a:hover,.footer-legal a:hover{color:var(--mostaza)}
.footer-grande a:focus-visible,.footer-ayuda-chat:focus-visible{outline:2px solid var(--mostaza);outline-offset:3px;border-radius:6px}
.footer-abajo{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px;padding:20px 0 calc(92px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,253,248,.1)}
.footer-abajo p{font-size:13px;color:#A3A6B3;margin:0}
.footer-legal{display:flex;align-items:center;flex-wrap:wrap;gap:6px 20px}
.footer-legal a{font-size:13px;color:#C9CCD6;text-decoration:none;padding:6px 0}
.footer-grande .estado{background:rgba(255,253,248,.08);color:#D4D6DE}
@media (max-width:860px){
  .footer-columnas{grid-template-columns:1fr 1fr;gap:28px 20px}
  .footer-marca{grid-column:1/-1;padding-bottom:28px;border-bottom:1px solid rgba(255,253,248,.1)}
}
@media (max-width:560px){
  .footer-grande .wrap{padding-top:44px}
  .footer-abajo{flex-direction:column;align-items:flex-start}
}

/* frase con revelado de palabras por scroll: momento distintivo, no genérico */
.reveal-frase{padding:clamp(64px,9vw,128px) 0;position:relative;overflow:hidden}
.reveal-frase::before{
  content:"";position:absolute;top:0;left:0;right:0;height:460px;pointer-events:none;
  background-image:
    radial-gradient(ellipse 620px 360px at 26% 0%, rgba(22,163,106,.16), transparent 65%),
    radial-gradient(ellipse 520px 340px at 98% 4%, rgba(232,69,44,.12), transparent 62%),
    radial-gradient(ellipse 460px 320px at 2% 14%, rgba(59,76,202,.10), transparent 62%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, transparent 100%);
}
.reveal-frase-texto{font-family:var(--fuente-titulo);font-weight:700;font-size:clamp(26px,1.8vw + 1.3rem,42px);line-height:1.4;color:var(--texto-tenue);margin:0}
.reveal-frase-texto .rf-w{color:var(--texto-tenue)}
@supports not (color: color-mix(in srgb, red, blue)){
  .reveal-frase-texto,.reveal-frase-texto .rf-w{color:var(--texto)}
}

/* hero */
.hero{
  color:var(--texto);padding:126px 0 56px;position:relative;overflow:hidden;
  min-height:100vh;display:flex;align-items:center;
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 760px 560px at 8% -10%, rgba(59,76,202,.16), transparent 60%),
    radial-gradient(ellipse 640px 480px at 92% 5%, rgba(242,182,50,.20), transparent 55%);
}
.hero .wrap{width:100%}
@media (max-width:860px){ .hero{min-height:0;padding:104px 0 48px} }
.hero::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;background-image:radial-gradient(var(--borde) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%)}
.hero .wrap{position:relative;z-index:1}
/* luces de fondo: un contenedor que se mueve con el mouse/scroll (--gx/--gy/--sy
   los actualiza el JS), tres manchas suaves que cubren todo el hero sin que se
   note un corte duro en los bordes. */
.hero-glows{
  position:absolute;inset:-8% -8% -8% -8%;pointer-events:none;z-index:0;
  transform:translate(calc(var(--gx,0px) * 1), calc(var(--gy,0px) * 1 + var(--sy,0px)));
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.hero-glow{position:absolute;top:2%;right:-4%;width:46vw;max-width:560px;height:46vw;max-height:560px;border-radius:50%;background:var(--sello-solido);opacity:.15;filter:blur(70px);animation:glowPulso 8s ease-in-out infinite}
.hero-glow.izq{top:auto;right:auto;bottom:-60%;left:-10%;width:38vw;max-width:460px;height:38vw;max-height:460px;background:var(--caja-solido);opacity:.1;animation-delay:-3.5s}
.hero-glow.centro{top:38%;left:38%;width:34vw;max-width:420px;height:34vw;max-height:420px;background:var(--mostaza);opacity:.09;animation-delay:-1.8s;animation-duration:10s}
@keyframes glowPulso{0%,100%{opacity:.16;transform:scale(1)}50%{opacity:.26;transform:scale(1.12)}}
.eyebrow{font-family:var(--fuente-texto);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sello)}
.hero h1{font-family:var(--fuente-titulo);font-weight:700;letter-spacing:-.02em;font-size:clamp(38px,5.3vw,76px);line-height:1.02;margin:12px 0 16px;max-width:920px;color:var(--texto)}
@media (max-width:900px){.hero h1{text-wrap:balance}}
.hero h1 em{font-style:normal;color:var(--sello)}
.hero h1 em .palabra{
  text-decoration-line:underline;text-decoration-color:var(--sello);
  text-decoration-thickness:3px;text-underline-offset:.24em;text-decoration-skip-ink:none;
}
.hero h1 .sin-corte{white-space:nowrap}
.hero h1 .punto{color:var(--texto)}
.hero p{font-size:17px;color:var(--texto-suave);max-width:560px;line-height:1.55;margin:0 0 26px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:0;align-items:center}
.hero-ctas .btn{padding:17px 30px;font-size:16px}
.hero-trust{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px 18px}
.hero-trust li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--texto-suave);font-weight:500}
.hero-trust-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--tinte-caja);color:var(--caja-texto);flex-shrink:0}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--tinte-sello);border:1px solid transparent;color:var(--sello);font-family:var(--fuente-texto);font-weight:600;font-size:12.5px;letter-spacing:.01em;padding:8px 16px;border-radius:20px;margin-bottom:20px;box-shadow:var(--sombra-suave)}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--caja-solido);animation:pulso 2s ease-in-out infinite}

/* hero: layout de dos columnas + mockup de teléfono */
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;padding-top:8px}
.hero-col-tel{display:flex;justify-content:center;animation:entrada .7s ease .3s both;perspective:1400px}
/* el teléfono entra girando en 3D una sola vez (no en loop) y, ya asentado,
   se inclina siguiendo el cursor — profundidad como respuesta a la
   interacción, igual que el spotlight de las demás tarjetas, nunca un
   movimiento propio y continuo que no esté sincronizado con nada más. */
.telefono{width:290px;background:linear-gradient(160deg,#3a3d46 0%,#15161b 14%,#0a0b0e 55%);border-radius:40px;padding:12px;position:relative;box-shadow:0 2px 5px rgba(0,0,0,.35),0 45px 90px -24px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);transform-style:preserve-3d}
/* "entrando": la animación de llegada manda sobre transform mientras corre.
   Al terminar, el JS la cambia por "listo" (animation:none explícito —
   una animation con fill-mode "both" si no, sigue ganándole a cualquier
   transform declarado después, sin importar especificidad). */
.telefono.entrando{animation:telefonoEntrada 1s cubic-bezier(.16,1,.3,1) both}
.telefono.listo{animation:none;transition:transform .5s cubic-bezier(.2,.8,.2,1);transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
@keyframes telefonoEntrada{
  0%{opacity:0;transform:rotateY(-20deg) rotateX(6deg) translateY(18px) scale(.94)}
  100%{opacity:1;transform:rotateY(0) rotateX(0) translateY(0) scale(1)}
}
.telefono::after{content:"";position:absolute;top:24px;left:50%;transform:translateX(-50%);width:52px;height:5px;border-radius:4px;background:#000;opacity:.55;z-index:5}
.telefono-pantalla{background:var(--papel-mock,#F6F1E7);border-radius:30px;overflow:hidden;min-height:492px;position:relative}
.telefono-pantalla::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 18%,transparent 32%)}
.telefono-statusbar{position:absolute;top:0;left:0;right:0;z-index:4;height:26px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:10.5px;font-weight:700;font-family:var(--fuente-texto);font-variant-numeric:tabular-nums;background:#005C4B;border-radius:30px 30px 0 0;transition:background-color .3s ease,color .3s ease}
[data-theme="dark"] .telefono-statusbar{background:#0B141A}
.telefono-statusbar .iconos{display:flex;align-items:center;gap:5px}
.telefono-home-indicator{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:84px;height:4px;border-radius:4px;background:rgba(255,255,255,.45);z-index:5}

/* estados del teléfono: cicla entre 3 momentos reales del producto */
@media (prefers-reduced-motion: reduce){
}
.telefono-copiloto-header{margin-bottom:14px}
.telefono-copiloto-header .eyebrow-mini{font-family:var(--fuente-texto);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sello)}
.telefono-copiloto-header h4{font-family:var(--fuente-titulo);font-weight:700;font-size:15px;color:#1B1A17;margin:4px 0 0}

/* estados 1 y 2 del teléfono del hero: el chat real de WhatsApp (mismo
   chrome que ya usa demos.js en la pantalla de éxito del checkout:
   cabecera verde azulado, fondo con textura, burbujas y doble check),
   en vez de una tarjeta genérica que solo dice "EN VIVO EN WHATSAPP". */
.demo-chat-cuerpo.tel-chat-cuerpo{flex:1;min-height:0;padding:16px 14px 32px;background-color:#E5DDD5}
[data-theme="dark"] .demo-chat-cuerpo.tel-chat-cuerpo{background-color:#0B141A}
.demo-chat-burbuja.tel-chat-catalogo{max-width:94%}
.tel-chat-recibo .demo-chat-texto{font-weight:600}

/* catálogo y recibo los manda Doña María (el negocio) al cliente: en el
   WhatsApp del cliente —que es lo que simula este teléfono— esos dos
   llegan como mensaje RECIBIDO (blanco, alineado a la izquierda), nunca
   verde a la derecha como si el cliente se los mandara a sí mismo. */
.demo-chat-burbuja.tel-chat-catalogo,.demo-chat-burbuja.tel-chat-recibo{align-self:flex-start;background:#fff;color:#111b21;border-radius:10px 10px 10px 2px}
[data-theme="dark"] .demo-chat-burbuja.tel-chat-catalogo,[data-theme="dark"] .demo-chat-burbuja.tel-chat-recibo{background:#1F2C34;color:#E9EDEF}

/* cada burbuja aparece recién cuando el JS la marca .visto (después de los
   puntos de "escribiendo…"), no todas de una vez con el cross-fade del
   estado — así el chat del hero se siente una conversación en curso. */

/* chips flotantes: refuerzan que la tienda "vive" en tiempo real */
.hero-col-tel{position:relative}
.chip-flotante{
  position:absolute;display:flex;align-items:center;gap:0;background:var(--tiquete);color:var(--carbon);
  border-radius:10px;padding:9px 14px;box-shadow:0 16px 32px -10px rgba(0,0,0,.5);z-index:4;
  border:1px solid rgba(32,33,36,.08);
  font-size:12px;font-weight:600;white-space:nowrap;
  opacity:0;animation:chipEntrada .6s ease both, chipFlota 4.5s ease-in-out infinite;
}
.chip-flotante small{display:block;font-weight:400;color:var(--texto-tenue);font-size:10.5px;font-family:var(--fuente-texto)}
.chip-divisor{width:1px;align-self:stretch;flex-shrink:0;margin:0 12px;background-image:linear-gradient(to bottom,var(--borde) 0 4px,transparent 4px 7px);background-size:1px 7px;background-repeat:repeat-y}
.chip-ticket-num{font-family:var(--fuente-titulo);font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--sello);flex-shrink:0}
.chip-sello-marca{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--caja);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;rotate:-13deg}
.chip-sello-marca::before{content:"";position:absolute;inset:3px;border:1px solid var(--caja);border-radius:50%;opacity:.5}
.chip-sello-marca span{font-family:var(--fuente-texto);font-weight:800;font-size:6.5px;letter-spacing:.03em;color:var(--caja-texto);text-transform:uppercase}
.chip-pedido{top:6%;left:-9%;animation-delay:1.1s, 1.7s;rotate:-2deg}
.chip-pago{bottom:12%;right:-11%;animation-delay:1.4s, 2.1s;rotate:1.5deg}
@keyframes chipEntrada{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes chipFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (max-width:900px){
  /* el texto va primero: un visitante que entra en celular/tablet necesita
     saber qué es Veci antes de ver un chat sin contexto (antes el teléfono
     iba arriba de todo con order:-1, y el titular quedaba fuera de la
     primera pantalla). */
  .hero-grid{grid-template-columns:1fr}
  .hero-col-tel{margin-top:40px}
  .telefono{width:230px}
  .telefono-pantalla{min-height:400px}
  .chip-flotante{font-size:10.5px;padding:8px 11px}
  .chip-ticket-num{font-size:14px}
  .chip-sello-marca{width:28px;height:28px}
  .chip-divisor{margin:0 10px}
  .chip-pedido{left:2%;top:2%}
  .chip-pago{right:2%;bottom:8%}
}
@media (max-width:460px){
  /* en vez de ocultarlos (el negocio deja de sentirse "en vivo" justo en
     el ancho que más importa: el celular), se bajan del todo y se acomodan
     en fila, estáticos, debajo del teléfono — nunca superpuestos. */
  .hero-col-tel{flex-direction:column;align-items:center;gap:10px}
  .telefono{order:1}
  .chip-flotante{position:static;order:2;animation:chipEntrada .5s ease both;font-size:10.5px;padding:8px 12px;white-space:normal}
}

@keyframes pulso{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes entrada{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes palabraEntra{from{opacity:0;transform:translateY(16px) rotateX(-25deg)}to{opacity:1;transform:none}}
.hero-badge{animation:entrada .6s ease both}
.hero h1{perspective:400px}
.hero h1 .palabra{display:inline-block;opacity:0;animation:palabraEntra .6s cubic-bezier(.2,.8,.2,1) both}
.hero p{animation:entrada .6s ease .62s both}
.hero-ctas{animation:entrada .6s ease .7s both}
.hero-trust{animation:entrada .6s ease .78s both}
@media (prefers-reduced-motion: reduce){
  .hero-badge, .hero p, .hero-ctas, .hero-trust{animation:none}
  .hero h1 .palabra{animation:none;opacity:1}
  .hero-badge .dot{animation:none}
  .hero-glow{animation:none}
  .chip-flotante{animation:none;opacity:1}
  .recibo-badge .dot{animation:none}
  .demo-teaser-en-vivo .dot{animation:none}
  .cierre-glow{animation:none}
  .telefono.entrando{animation:none;opacity:1}
}

/* overflow-x:clip (no overflow:hidden, que también recorta en Y): las filas
   que entran deslizándose desde el costado (.reveal-der/.reveal-izq, antes
   de llegar a .visto) no deben ensanchar la página ni crear scroll
   horizontal mientras esperan su turno. */
section{padding:72px 0;overflow-x:clip}
section[id],[id]{scroll-margin-top:132px}
h2{font-family:var(--fuente-titulo);font-weight:700;letter-spacing:-.015em;font-size:clamp(30px,2.4vw + 1.4rem,46px);line-height:1.08;margin:0 0 12px}
.lead{font-size:clamp(15px,.5vw + .85rem,18px);color:var(--texto-suave);max-width:600px;line-height:1.6;margin:0 0 36px}
h3{font-size:clamp(16px,.6vw + .95rem,19px)}

/* calculadora, estilo recibo de tres líneas */
.calc{
  background:var(--bg-suave);border-radius:24px;padding:44px;display:grid;grid-template-columns:1.05fr .95fr;
  gap:40px;align-items:center;position:relative;overflow:hidden;
}
.calc::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 480px 360px at 0% 0%, var(--tinte-sello), transparent 65%)}
.calc>*{position:relative}
.calc-panel label{font-size:13px;font-weight:600;color:var(--texto-suave);display:block;margin-bottom:8px}
.calc-valor-grande.calc-pulso{animation:calcPulso .35s ease}
@keyframes calcPulso{0%{transform:scale(1.06);color:var(--sello)}100%{transform:scale(1);color:var(--texto)}}
.calc-ahorro-cifra.calc-pulso,.recibo-linea .valor.calc-pulso{display:inline-block;animation:calcPulsoEscala .35s cubic-bezier(.2,.8,.2,1)}
@keyframes calcPulsoEscala{0%{transform:scale(1.08)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){
  .calc-valor-grande.calc-pulso,.calc-ahorro-cifra.calc-pulso,.recibo-linea .valor.calc-pulso{animation:none}
}

/* recibo: tiquete oscuro con el resumen instantáneo */
.recibo-card{position:relative;background:var(--carbon);color:var(--tiquete);border-radius:18px;padding:26px 24px 22px;display:flex;flex-direction:column;gap:0;box-shadow:0 20px 48px -16px rgba(32,33,36,.4);transition:transform .3s ease,box-shadow .3s ease}
.recibo-card:hover{transform:translateY(-3px) rotate(-.3deg);box-shadow:0 26px 56px -14px rgba(32,33,36,.48)}
.recibo-badge{position:absolute;top:-11px;right:20px;display:inline-flex;align-items:center;gap:6px;background:var(--mostaza);color:#1B1A17;font-size:11px;font-weight:700;letter-spacing:.06em;padding:5px 11px;border-radius:var(--radio-pill);box-shadow:0 6px 14px -4px rgba(242,182,50,.5)}
.recibo-badge .dot{width:6px;height:6px;border-radius:50%;background:#1B1A17;animation:pulso 2s ease-in-out infinite}
.recibo-linea{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px dashed rgba(255,253,248,.18)}
.recibo-linea:last-child{border-bottom:none;padding-top:14px}
.recibo-linea .etiqueta{font-family:var(--fuente-texto);font-size:11px;letter-spacing:.06em;color:#9AA0D4}
.recibo-linea .valor{font-family:var(--fuente-texto);font-variant-numeric:tabular-nums;font-size:16px;font-weight:600}
.recibo-linea.destaque .valor{color:var(--mostaza);font-size:20px}
.recibo-linea.final .etiqueta{color:#3ED18B}
.recibo-linea.final .valor{color:var(--tiquete)}

/* dolores */
/* feature grid: "todo lo que necesitas para vender" */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature-card{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio-tarjeta);padding:26px;box-shadow:var(--sombra-suave);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s cubic-bezier(.2,.8,.2,1),border-color .25s ease;position:relative;overflow:hidden}
.feature-card:hover{transform:translateY(-5px) scale(1.012);box-shadow:var(--sombra-media);border-color:var(--sello-claro)}
.feature-card::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), var(--tinte-sello), transparent 72%);transition:opacity .35s ease;pointer-events:none}
.feature-card:hover::before{opacity:1}
.feature-card>*{position:relative}
.feature-card .icono{width:42px;height:42px;border-radius:var(--radio-badge);display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:transform .3s ease}
.feature-card:hover .icono{transform:scale(1.1) rotate(-4deg)}
.feature-card h3{font-size:16px;margin:0 0 8px}
.feature-card p{font-size:13.5px;color:var(--texto-suave);line-height:1.55;margin:0}
@media (max-width:860px){.feature-grid{grid-template-columns:1fr 1fr}.feature-grid>:last-child{grid-column:1/-1}}
.feature-grid-2{grid-template-columns:repeat(2,1fr)}
.feature-grid-2>:last-child{grid-column:auto}
@media (max-width:560px){.feature-grid,.feature-grid-2{grid-template-columns:1fr}}

.dolores{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.dolor-card{background:var(--bg-suave);border-radius:20px;padding:24px;display:flex;gap:16px;align-items:flex-start;box-shadow:var(--sombra-suave);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden}
.dolor-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:var(--sombra-media)}
.dolor-card::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), var(--tinte-aji), transparent 72%);transition:opacity .35s ease;pointer-events:none}
.dolor-card:hover::before{opacity:1}
.dolor-card>*{position:relative}
.dolor-card .icono{width:40px;height:40px;border-radius:var(--radio-badge);background:var(--tinte-aji);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dolor-card h3{font-size:15px;margin:0 0 6px;font-weight:700}
.dolor-card p{font-size:13px;color:var(--texto-suave);line-height:1.5;margin:0}
.dolores-cierre{margin-top:20px;padding:18px 22px;background:var(--carbon);color:var(--tiquete);border-radius:var(--radio-tarjeta);font-size:15px;text-align:center}
.dolores-cierre strong{color:var(--mostaza)}

/* "¿Te suena familiar?" en el home: banda oscura fija (mismo patrón que .cierre/.copiloto-demo),
   para que el problema pese más que una tarjeta clara de cuatro iconos */
.seccion-dolor{background:var(--carbon);padding:72px 0}
.seccion-dolor h2{color:var(--tiquete)}
.seccion-dolor .lead{color:#AEB1BE}
.seccion-dolor .dolor-card{background:rgba(255,255,255,.045);box-shadow:none;border:1px solid rgba(255,255,255,.08)}
.seccion-dolor .dolor-card:hover{border-color:rgba(232,69,44,.5);background:rgba(255,255,255,.065)}
.seccion-dolor .dolor-card h3{color:var(--tiquete)}
.seccion-dolor .dolor-card p{color:#AEB1BE}
.seccion-dolor .dolores-cierre{background:var(--mostaza);color:#1B1A17;font-weight:600;box-shadow:0 14px 32px -12px rgba(242,182,50,.4)}
.seccion-dolor .dolores-cierre strong{color:#1B1A17;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* calculadora con slider: el track se rellena hasta la posición actual */
.calc-slider{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;outline:none;margin:14px 0;
  background:linear-gradient(to right, var(--sello) 0%, var(--sello) var(--val,27%), var(--borde) var(--val,27%), var(--borde) 100%);
  transition:box-shadow .15s ease;
}
.calc-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--sello-solido);cursor:pointer;border:3px solid var(--superficie);box-shadow:0 3px 10px rgba(59,76,202,.5);transition:transform .15s ease}
.calc-slider::-webkit-slider-thumb:hover{transform:scale(1.12)}
.calc-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--sello-solido);cursor:pointer;border:3px solid var(--superficie);box-shadow:0 3px 10px rgba(59,76,202,.5)}
.calc-slider::-moz-range-progress{background:var(--sello-solido);height:8px;border-radius:4px}
.calc-marcas{display:flex;justify-content:space-between;font-family:var(--fuente-texto);font-size:11px;color:var(--texto-tenue)}
.calc-valor-grande{font-family:var(--fuente-texto);font-variant-numeric:tabular-nums;font-size:32px;font-weight:700;color:var(--texto);display:block;margin-top:4px;transition:color .2s ease}

/* callout de ahorro: la conclusión de la herramienta, no un gráfico duplicado */
.calc-ahorro{margin-top:28px;padding-top:24px;border-top:1px solid var(--borde)}
.calc-ahorro-label{font-family:var(--fuente-texto);font-size:11px;letter-spacing:.06em;color:var(--texto-tenue);display:block;margin-bottom:6px}
.calc-ahorro-cifra{font-size:clamp(30px,2.4vw + 1rem,40px);font-weight:700;color:var(--caja-texto);display:block;line-height:1.1}
.calc-ahorro-track{height:10px;border-radius:6px;background:var(--borde);overflow:hidden;margin-top:14px}
.calc-ahorro-fill{height:100%;border-radius:6px;width:0%;background:linear-gradient(90deg, var(--caja), #22C57F);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.calc-ahorro-nota{font-size:12px;color:var(--texto-tenue);display:block;margin-top:10px;line-height:1.5}

/* confianza verificable */
.verificable{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.verificable-item{display:flex;gap:14px;padding:22px;background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio-tarjeta);box-shadow:var(--sombra-suave);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}
.verificable-item::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), var(--tinte-caja), transparent 72%);transition:opacity .35s ease;pointer-events:none}
.verificable-item:hover::before{opacity:1}
.verificable-item>*{position:relative}
.verificable-item:hover{border-color:var(--caja-texto);transform:translateY(-2px);box-shadow:var(--sombra-media)}
.verificable-item .icono{width:36px;height:36px;border-radius:var(--radio-badge);background:var(--tinte-caja);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s ease}
.verificable-item:hover .icono{transform:scale(1.12) rotate(-6deg)}
.verificable-item h3{font-size:14px;margin:0 0 6px}
.verificable-item p{font-size:13px;color:var(--texto-suave);line-height:1.5;margin:0}
.verificable-item code{font-size:12px;background:var(--bg-suave);padding:2px 6px;border-radius:4px}

/* toggle mensual/anual en precios */
.precio-toggle{position:relative;display:inline-flex;background:var(--bg-suave);border-radius:12px;padding:4px;gap:4px;margin-bottom:28px}
.precio-toggle .pastilla{position:absolute;top:4px;bottom:4px;left:4px;width:0;background:var(--sello-solido);border-radius:9px;transition:left .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1);z-index:0}
.precio-toggle button{position:relative;z-index:1;border:none;background:transparent;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;color:var(--texto-suave);transition:color .25s ease}
.precio-toggle button.activo{color:var(--tiquete)}
.precio-toggle .ahorro{font-size:11px;background:var(--caja-solido);color:var(--tiquete);padding:2px 6px;border-radius:8px;margin-left:6px}
@media (prefers-reduced-motion: reduce){
  .precio-toggle .pastilla{transition:none}
}
.plan .precio-anual{display:none}
.precios.modo-anual .precio-mensual{display:none}
.precios.modo-anual .precio-anual{display:inline}

/* animaciones al hacer scroll */
.reveal{opacity:0;transform:translateY(26px) scale(.98);filter:blur(4px);transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1), filter .7s ease}
.reveal.visto{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.reveal-fila > *{opacity:0;transform:translateY(28px) scale(.94);filter:blur(6px);transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1), filter .6s ease}
.reveal-fila.visto > *{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.reveal-fila.visto > *:nth-child(1){transition-delay:0s}
.reveal-fila.visto > *:nth-child(2){transition-delay:.09s}
.reveal-fila.visto > *:nth-child(3){transition-delay:.18s}
.reveal-fila.visto > *:nth-child(4){transition-delay:.27s}
.reveal-fila.visto > *:nth-child(5){transition-delay:.36s}
.reveal-fila.visto > *:nth-child(6){transition-delay:.45s}
.reveal-fila.visto > *:nth-child(7){transition-delay:.54s}
.reveal-fila.visto > *:nth-child(8){transition-delay:.63s}
.reveal-fila.visto > *:nth-child(9){transition-delay:.72s}

/* variantes direccionales del reveal, para filas alternadas */
.reveal-der{opacity:0;transform:translateX(44px) scale(.98);filter:blur(4px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1),filter .75s ease}
.reveal-der.visto{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}
.reveal-izq{opacity:0;transform:translateX(-44px) scale(.98);filter:blur(4px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1),filter .75s ease}
.reveal-izq.visto{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}

/* mini-mockups de "cómo funciona": cada paso cuenta una historia corta al
   entrar en pantalla (leer la foto, armar la tienda, cobrar), no solo un
   fade-in parejo de todo el contenido. */
.mini-mockup-cuerpo .mm-foto-preview,
.mini-mockup-cuerpo .mm-recibo-mini,
.mm-grid .item,
.mm-confirmacion,
.mm-paso-pago,
.mini-mockup-cuerpo > .mm-linea{
  opacity:0;transform:translateY(10px) scale(.94);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
}
.mm-confirmacion .check{
  opacity:0;transform:scale(.5);
  transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.34,1.56,.64,1);
}
.mm-confirmacion .check svg path{
  stroke-dasharray:22;stroke-dashoffset:22;
  transition:stroke-dashoffset .4s cubic-bezier(.16,1,.3,1);
}
.reveal-der.visto .mini-mockup-cuerpo .mm-foto-preview,
.reveal-der.visto .mini-mockup-cuerpo .mm-recibo-mini,
.reveal-izq.visto .mm-grid .item,
.reveal-der.visto .mm-confirmacion,
.reveal-der.visto .mm-paso-pago,
.reveal-der.visto .mini-mockup-cuerpo > .mm-linea{
  opacity:1;transform:translateY(0) scale(1);
}
.reveal-der.visto .mm-confirmacion .check{opacity:1;transform:scale(1)}
.reveal-der.visto .mm-confirmacion .check svg path{stroke-dashoffset:0}

/* paso 1: la foto "se escanea" (barrido de luz) y los 3 productos se leen
   uno a uno, como si la IA los estuviera extrayendo en vivo. */
.mm-foto-preview{position:relative;overflow:hidden;width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto}
.mm-escaneo-linea{position:absolute;left:0;right:0;top:-20%;height:40%;background:linear-gradient(180deg,transparent,rgba(59,76,202,.5),transparent);pointer-events:none}
.reveal-der.visto .mm-foto-preview .mm-escaneo-linea{animation:mmEscaneo 1.1s cubic-bezier(.4,0,.2,1) .3s 1 both}
@keyframes mmEscaneo{0%{top:-30%}100%{top:110%}}
.mm-leyendo{display:block;font-size:10.5px;color:var(--sello);letter-spacing:.04em;margin:10px 0;opacity:0}
.reveal-der.visto .mm-leyendo{animation:mmLeyendoCiclo 2.1s ease .5s 1 both}
@keyframes mmLeyendoCiclo{0%{opacity:0}18%{opacity:1}68%{opacity:1}88%{opacity:0}100%{opacity:0}}
.mm-listo-tag{display:inline-block;margin-top:10px;font-size:10.5px;font-weight:700;color:#0f6b45;background:#DFF3E8;padding:4px 10px;border-radius:999px;opacity:0;transform:scale(.9);transition:opacity .35s cubic-bezier(.34,1.56,.64,1),transform .35s cubic-bezier(.34,1.56,.64,1)}
.reveal-der.visto .mm-listo-tag{opacity:1;transform:scale(1)}

/* paso 3: dos pasos de pago numerados (así se ve de verdad el cobro por
   Bre-B) antes de la confirmación, no una tarjeta de "listo" suelta. */
.mm-pago{display:flex;flex-direction:column;gap:8px}
.mm-paso-pago{display:flex;align-items:center;gap:10px;background:var(--bg-suave);border-radius:10px;padding:9px 11px}
.mm-paso-pago .num{width:20px;height:20px;border-radius:50%;background:var(--sello-solido);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mm-paso-pago div{flex-grow:1;min-width:0}
.mm-paso-pago strong{display:block;font-size:11.5px;font-weight:600}
.mm-paso-pago span{display:block;font-size:10px;color:var(--texto-tenue)}
.mm-copiar-ok{width:20px;height:20px;border-radius:50%;background:var(--tinte-caja);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mm-pago .mm-confirmacion{margin-top:2px}

.reveal-der.visto .mini-mockup-cuerpo .mm-foto-preview{transition-delay:.15s}
.reveal-der.visto .mini-mockup-cuerpo .mm-recibo-mini{transition-delay:1.3s}
.reveal-izq.visto .mm-grid .item:nth-child(1){transition-delay:.15s}
.reveal-izq.visto .mm-grid .item:nth-child(2){transition-delay:.3s}
.reveal-izq.visto .mm-grid .item:nth-child(3){transition-delay:.45s}
.reveal-izq.visto .mm-grid .item:nth-child(4){transition-delay:.6s}
.reveal-der.visto .mm-paso-pago:nth-of-type(1){transition-delay:.15s}
.reveal-der.visto .mm-paso-pago:nth-of-type(2){transition-delay:.55s}
.reveal-der.visto .mm-confirmacion{transition-delay:.95s}
.reveal-der.visto .mm-confirmacion .check{transition-delay:1.05s}
.reveal-der.visto .mm-confirmacion .check svg path{transition-delay:1.25s}
.reveal-der.visto .mini-mockup-cuerpo > .mm-linea:nth-of-type(1){transition-delay:1.35s}
.reveal-der.visto .mini-mockup-cuerpo > .mm-linea:nth-of-type(2){transition-delay:1.45s}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-fila > *, .reveal-der, .reveal-izq{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .mini-mockup-cuerpo .mm-foto-preview,
  .mini-mockup-cuerpo .mm-recibo-mini,
  .mm-grid .item,
  .mm-confirmacion,
  .mm-paso-pago,
  .mini-mockup-cuerpo > .mm-linea,
  .mm-confirmacion .check,
  .mm-listo-tag{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  .mm-confirmacion .check svg path{stroke-dashoffset:0!important;transition:none!important}
  .mm-escaneo-linea{animation:none!important;display:none}
  .mm-leyendo{animation:none!important;opacity:0!important;display:none}
}

/* pasos */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.paso-card{background:var(--superficie);border:1px solid var(--borde);border-radius:20px;padding:28px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.paso-card:hover{transform:translateY(-4px);box-shadow:var(--sombra-media);border-color:var(--sello)}
.paso-card .icono{width:38px;height:38px;border-radius:var(--radio-badge);background:var(--tinte-sello);display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:transform .3s ease}
.paso-card:hover .icono{transform:scale(1.12) rotate(-6deg)}
.paso-card .n{font-family:var(--fuente-texto);font-size:12px;color:var(--sello);display:block;margin-bottom:8px}
.paso-card h3{font-size:18px;margin:0 0 8px}
.paso-card p{font-size:14px;color:var(--texto-suave);line-height:1.5;margin:0}

/* cómo funciona: filas alternadas texto + mockup real */
.pasos-alternados{display:flex;flex-direction:column;gap:72px;margin-top:56px}
.paso-fila{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.paso-fila.reversa .paso-fila-visual{order:-1}
.paso-fila-num{font-family:var(--fuente-texto);font-size:13px;color:var(--sello);display:block;margin-bottom:12px}
.paso-fila-texto h3{font-family:var(--fuente-titulo);font-weight:700;font-size:clamp(22px,2.6vw,28px);margin:0 0 12px}
.paso-fila-texto p{font-size:15px;color:var(--texto-suave);line-height:1.65;margin:0;max-width:420px}
.paso-fila-visual{display:flex;justify-content:center}

.mini-mockup{width:100%;max-width:340px;background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio-tarjeta);box-shadow:var(--sombra-media);overflow:hidden}
.mini-mockup-barra{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--borde);background:var(--bg-suave)}
.mini-mockup-barra span:not(.url){width:7px;height:7px;border-radius:50%;background:var(--borde);flex-shrink:0}
.mini-mockup-barra .url{margin-left:6px;font-family:var(--fuente-texto);font-size:10.5px;color:var(--texto-tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-mockup-cuerpo{padding:22px}
.mm-linea{display:flex;justify-content:space-between;font-size:12px;padding:7px 0;border-bottom:1px dashed var(--borde)}
.mm-linea:last-child{border-bottom:none}
.mm-linea .precio{font-family:var(--fuente-texto);font-variant-numeric:tabular-nums;color:var(--texto-tenue)}
.mm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.mm-grid .foto{height:34px;border-radius:7px;margin-bottom:5px}
.mm-grid .item{background:var(--bg-suave);border-radius:9px;padding:7px}
.mm-grid .item .nombre{font-size:10px;font-weight:600;display:block}
.mm-grid .item .precio{font-size:9px;font-family:var(--fuente-texto);font-variant-numeric:tabular-nums;color:var(--texto-tenue)}
.mm-confirmacion{display:flex;align-items:center;gap:12px;background:var(--tinte-caja);border-radius:12px;padding:14px}
.mm-confirmacion .check{width:34px;height:34px;border-radius:50%;background:#16A36A;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mm-confirmacion strong{display:block;font-size:13px}
.mm-confirmacion span{display:block;font-size:11px;color:var(--texto-suave)}

@media (max-width:760px){
  .pasos-alternados{gap:48px}
  .paso-fila{grid-template-columns:1fr;gap:24px}
  .paso-fila.reversa .paso-fila-visual{order:0}
  .paso-fila-texto p{max-width:none}
}

/* contraste: Veci vs. otras plataformas */
/* tabla comparativa fila por fila: patrón real tomado de Function Health,
   mucho más escaneable que un par de tarjetas con viñetas */
.tabla-comparativa{border:1px solid var(--borde);border-radius:20px;overflow:hidden;background:var(--superficie);box-shadow:var(--sombra-suave);position:relative;--tc-veci-w:24.24%}
.tabla-comparativa::before{content:"";position:absolute;top:0;bottom:0;right:0;width:var(--tc-veci-w);background:var(--tinte-sello);z-index:0}
.tc-fila{display:grid;grid-template-columns:1.7fr .8fr .8fr;align-items:center;padding:16px 22px;border-bottom:1px solid var(--borde);position:relative;z-index:1}
.tc-fila:last-child{border-bottom:none}
.tc-header{padding-top:18px;padding-bottom:18px}
.tc-header .tc-col{font-family:var(--fuente-texto);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-tenue);text-align:center}
.tc-label{font-size:14px;color:var(--texto);font-weight:500}
.tc-col{display:flex;align-items:center;justify-content:center;text-align:center}
.tc-header .tc-col-veci{color:var(--sello);font-weight:700}
.tc-valor{font-family:var(--fuente-texto);font-size:13.5px;color:var(--texto-suave)}
.tc-col-veci.tc-valor{color:var(--sello);font-weight:700}
.tc-icono{width:22px;height:22px}
.tc-icono.si circle{fill:var(--tinte-sello)}
.tc-icono.si path{stroke:var(--sello)}
.tc-icono.no circle{stroke:var(--borde)}
.tc-icono.no path{stroke:var(--texto-tenue)}
@media (max-width:640px){
  .tabla-comparativa{--tc-veci-w:25%}
  .tc-fila{grid-template-columns:1.5fr .75fr .75fr;padding:13px 14px;gap:4px}
  .tc-label{font-size:12.5px}
  .tc-header .tc-col{font-size:11px}
  .tc-valor{font-size:11.5px}
  .tc-icono{width:18px;height:18px}
}

/* copiloto demo */
.copiloto-demo{background:var(--carbon);color:var(--tiquete);border-radius:20px;padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.copiloto-demo h2{color:var(--tiquete)}
.copiloto-demo .lead{color:#C9CCD6}
.lead-row{display:flex;align-items:center;gap:12px;background:rgba(255,253,248,.06);border:1px solid rgba(255,253,248,.12);border-radius:12px;padding:14px;margin-bottom:10px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--aji);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--fuente-titulo);font-weight:700;font-size:14px}
.lead-row .info{flex-grow:1;display:flex;flex-direction:column;gap:2px}
.lead-row .nombre{font-size:14px;font-weight:600}
.lead-row .motivo{font-size:12px;color:#9AA0D4}
.lead-row .btn-mini{background:var(--sello-solido);color:var(--tiquete);font-size:12px;font-weight:600;padding:7px 12px;border-radius:8px}

/* precios */
.precios{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.precios-3{grid-template-columns:repeat(3,1fr);max-width:1080px;margin:0 auto}
.plan{
  position:relative;background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio-tarjeta);
  padding:30px 26px 26px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--sombra-suave);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease;
}
.plan::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), var(--tinte-sello), transparent 72%);transition:opacity .35s ease;pointer-events:none}
.plan:hover::before{opacity:1}
.plan>*{position:relative}
.plan:hover{transform:translateY(-6px) scale(1.012);box-shadow:var(--sombra-media)}
.plan.destacado{border-color:var(--sello);box-shadow:0 8px 28px -6px rgba(59,76,202,.22);transform:scale(1.015)}
.plan.destacado:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 22px 44px -12px rgba(59,76,202,.32)}
.plan .chip-popular{position:absolute;top:-13px;left:26px;background:var(--sello-solido);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;padding:5px 12px;border-radius:var(--radio-pill);box-shadow:0 6px 14px -4px rgba(59,76,202,.5);z-index:2}
.plan-icono{width:40px;height:40px;border-radius:var(--radio-badge);display:flex;align-items:center;justify-content:center;margin-bottom:2px;transition:transform .3s ease}
.plan:hover .plan-icono{transform:scale(1.1) rotate(-4deg)}
@media (prefers-reduced-motion: reduce){
  .feature-card:hover,.dolor-card:hover,.industria-col:hover,.plan:hover,.plan.destacado:hover{transform:none}
  .feature-card:hover .icono,.plan:hover .plan-icono{transform:none}
}
.plan .nombre{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--texto-suave)}
.plan .precio{font-family:var(--fuente-texto);font-variant-numeric:tabular-nums;font-size:30px;font-weight:600}
.plan .precio small{font-size:13px;font-weight:400;color:var(--texto-tenue)}
.plan .plan-sub{font-size:12.5px;color:var(--texto-tenue);margin-top:-10px}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.plan li{font-size:13.5px;color:var(--texto-suave);line-height:1.5;padding-left:20px;position:relative}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--caja-texto);font-weight:700}
.plan .btn{margin-top:8px}
.precios-nota{text-align:center;font-size:13px;color:var(--texto-tenue);margin:24px 0 0}
@media (max-width:760px){.precios-3{max-width:480px}}

/* callout de "instálalo tú mismo", en la página de precios */
.callout-selfhost{display:flex;gap:18px;align-items:flex-start;max-width:740px;margin:40px auto 0;padding:24px;background:var(--bg-suave);border-radius:var(--radio-tarjeta)}
.callout-selfhost .icono{width:44px;height:44px;border-radius:var(--radio-badge);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.callout-selfhost strong{display:block;font-size:15px;margin-bottom:6px}
.callout-selfhost p{font-size:13.5px;color:var(--texto-suave);line-height:1.6;margin:0 0 8px}

/* tabla comparativa de precios */
.tabla-wrap{overflow-x:auto;margin-top:36px;border:1px solid var(--borde);border-radius:var(--radio-tarjeta);box-shadow:var(--sombra-suave)}
.tabla-precios{width:100%;border-collapse:collapse;min-width:620px;background:var(--superficie)}
.tabla-precios th,.tabla-precios td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--borde);font-size:13.5px;color:var(--texto)}
.tabla-precios thead th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--texto-tenue);font-weight:700;background:var(--bg-suave)}
.tabla-precios thead th.destacado{color:var(--sello)}
.tabla-precios th:not(:first-child),.tabla-precios td:not(:first-child){text-align:center}
.tabla-precios tr.categoria td{background:var(--bg-suave);font-family:var(--fuente-texto);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-tenue);font-weight:700;padding-top:16px;padding-bottom:8px}
.tabla-precios tbody tr:last-child td{border-bottom:none}
.tabla-precios .si{color:var(--caja-texto);font-weight:700}
.tabla-precios .no{color:var(--texto-tenue)}

/* para qué negocios: modo pedidos / modo reservas */
.industrias-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.industria-col{position:relative;overflow:hidden;background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio-tarjeta);padding:28px;box-shadow:var(--sombra-suave);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s cubic-bezier(.2,.8,.2,1)}
.industria-col:hover{transform:translateY(-6px) scale(1.012);box-shadow:var(--sombra-media)}
.industria-col::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), var(--tinte-sello), transparent 72%);transition:opacity .35s ease;pointer-events:none}
.industria-col:hover::before{opacity:1}
.industria-col>*{position:relative}
.industria-col .icono-modo{width:44px;height:44px;border-radius:var(--radio-badge);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.industria-col h3{font-size:17px;margin:0 0 6px}
.industria-col p.desc{font-size:13.5px;color:var(--texto-suave);margin:0 0 18px}
.industria-tags{display:flex;flex-wrap:wrap;gap:8px}
.industria-tag{font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:var(--radio-pill);background:var(--bg-suave);color:var(--texto);text-decoration:none;display:inline-block;transition:background .15s ease,color .15s ease}
a.industria-tag:hover{background:var(--tinte-sello);color:var(--sello)}
@media (max-width:760px){.industrias-grid{grid-template-columns:1fr}}

/* página de referidos */
.referido-pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.referido-paso{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio-tarjeta);padding:26px;box-shadow:var(--sombra-suave);position:relative}
.referido-paso .num{font-family:var(--fuente-texto);font-size:13px;color:var(--sello);display:block;margin-bottom:12px}
.referido-paso h3{font-size:16px;margin:0 0 8px}
.referido-paso p{font-size:13.5px;color:var(--texto-suave);line-height:1.55;margin:0}
.referido-comision{background:var(--carbon);color:var(--tiquete);border-radius:var(--radio-tarjeta);padding:36px;text-align:center;margin:36px 0}
.referido-comision .cifra{font-family:var(--fuente-texto);font-variant-numeric:tabular-nums;font-size:52px;font-weight:700;color:var(--mostaza);display:block;line-height:1}
.referido-comision p{color:#C9CCD6;max-width:480px;margin:10px auto 0;font-size:14.5px}
@media (max-width:760px){.referido-pasos{grid-template-columns:1fr}}

/* página de integraciones */
.integra-grupo{margin-bottom:48px}
.integra-grupo:last-child{margin-bottom:0}
.integra-titulo{font-family:var(--fuente-texto);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-tenue);margin-bottom:16px;display:block}
.integra-lista{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.integra-item{display:flex;gap:14px;align-items:flex-start;padding:20px;background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio-tarjeta);box-shadow:var(--sombra-suave);position:relative;overflow:hidden}
.integra-item::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), var(--tinte-sello), transparent 72%);transition:opacity .35s ease;pointer-events:none}
.integra-item:hover::before{opacity:1}
.integra-item>*{position:relative}
.integra-item .icono{width:38px;height:38px;border-radius:var(--radio-badge);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.integra-item h3{font-size:14.5px;margin:0 0 4px;display:flex;align-items:center;gap:8px}
.integra-item p{font-size:13px;color:var(--texto-suave);line-height:1.5;margin:0}
.badge-disponible{font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;background:var(--tinte-caja);color:var(--caja-texto);padding:3px 9px;border-radius:var(--radio-pill)}
.badge-proximo{font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;background:var(--bg-suave);color:var(--texto-tenue);padding:3px 9px;border-radius:var(--radio-pill)}
.badge-pro{font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;background:var(--tinte-mostaza);color:var(--mostaza-texto);padding:3px 9px;border-radius:var(--radio-pill)}
@media (max-width:700px){
  .integra-lista{grid-template-columns:1fr}
}

/* cronología, página quiénes somos */
.timeline{display:flex;flex-direction:column;gap:0;margin-top:32px}
.timeline-item{display:grid;grid-template-columns:80px 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--borde)}
.timeline-item:last-child{border-bottom:1px solid var(--borde)}
.timeline-fecha{font-size:13px;color:var(--sello);padding-top:2px}
.timeline-item h3{font-size:17px;margin:0 0 8px}
.timeline-item p{font-size:14.5px;color:var(--texto-suave);line-height:1.65;margin:0}
@media (max-width:560px){
  .timeline-item{grid-template-columns:1fr;gap:8px}
}

/* faq */
details{border-bottom:1px solid var(--borde);padding:18px 0}
summary{cursor:pointer;font-weight:600;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center;transition:color .2s ease}
summary:hover{color:var(--sello)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:20px;color:var(--sello);font-weight:400;transition:transform .35s cubic-bezier(.2,.8,.2,1);flex-shrink:0;margin-left:12px}
details[open] summary::after{transform:rotate(45deg)}
.faq-cuerpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)}
details[open] .faq-cuerpo{grid-template-rows:1fr}
.faq-cuerpo .faq-inner{overflow:hidden}
details p{font-size:14px;color:var(--texto-suave);line-height:1.6;margin:12px 0 0}
@media (prefers-reduced-motion: reduce){
  .faq-cuerpo{transition:none}
  summary::after{transition:none}
}

/* cierre */
/* cierre: a la izquierda la decisión, a la derecha la comanda que la
   respalda. Las líneas se imprimen una a una y cae el sello GRATIS. */
.cierre{background:var(--carbon);color:var(--tiquete);padding:clamp(72px,9vw,112px) 0;position:relative;overflow:hidden}
.cierre::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 70% at 85% 50%,rgba(242,182,50,.10),transparent 70%),radial-gradient(ellipse 50% 60% at 0% 0%,rgba(59,76,202,.22),transparent 70%)}
.cierre-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,88px);align-items:center}
.cierre h2{color:var(--tiquete);font-size:clamp(34px,3vw + 1.2rem,56px);line-height:1.04;letter-spacing:-.025em;margin:0 0 18px;text-wrap:balance}
.cierre h2 em{font-style:normal;color:var(--mostaza)}
.cierre-texto>p{color:#C9CCD6;max-width:470px;margin:0 0 30px;font-size:17px;line-height:1.6}
.cierre-acciones{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px}
.cierre .cierre-btn{display:inline-flex;align-items:center;gap:10px;padding:18px 28px;font-size:16.5px;background:#4F5FE0;box-shadow:0 14px 34px -14px rgba(79,95,224,.9)}
.cierre .cierre-btn:hover{background:#5D6CF0}
.cierre-btn svg{width:18px;height:18px;transition:transform .2s ease}
.cierre-btn:hover svg{transform:translateX(3px)}
.cierre-alt{font:500 15px var(--fuente-texto);color:#E4E6EE;background:none;border:0;padding:8px 0;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(228,230,238,.35);text-underline-offset:4px}
.cierre-alt:hover{color:#fff;text-decoration-color:var(--mostaza)}
.cierre .garantias{margin-top:26px;color:#B4B7C3;justify-content:flex-start}
.comanda{justify-self:center;width:100%;max-width:400px;transform:rotate(-1.2deg)}
.comanda-papel{position:relative;background:#FFFDF8;color:#202124;padding:26px 26px 84px;border-radius:4px 4px 0 0;box-shadow:0 30px 60px -24px rgba(0,0,0,.6),0 2px 0 rgba(0,0,0,.04);
  -webkit-mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - 7px) no-repeat,radial-gradient(circle 7px at 50% 100%,transparent 96%,#000 100%) 0 100%/14px 8px repeat-x;
  mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - 7px) no-repeat,radial-gradient(circle 7px at 50% 100%,transparent 96%,#000 100%) 0 100%/14px 8px repeat-x}
.comanda-cabeza{display:flex;justify-content:space-between;gap:12px;margin:0 0 14px;padding-bottom:12px;border-bottom:2px dashed #D9D3C4;font:700 11.5px var(--fuente-texto);letter-spacing:.1em;text-transform:uppercase;color:#54565f}
.comanda-lineas{list-style:none;margin:0;padding:0}
.comanda-lineas li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px dotted #D9D3C4;font-size:15px;line-height:1.35}
.comanda-lineas li span{color:#202124}
.comanda-lineas small{color:#676971;font-size:12.5px}
.comanda-lineas b{font-family:var(--fuente-titulo);font-weight:700;white-space:nowrap;color:#0B7A4C;font-variant-numeric:tabular-nums}
.comanda-total{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 0;padding-top:12px;border-top:3px double #202124;font-family:var(--fuente-titulo);font-weight:800;font-size:19px;color:#202124}
.comanda-total b{font-size:30px;letter-spacing:-.02em}
.comanda-sello{position:absolute;right:26px;bottom:24px;mix-blend-mode:multiply;padding:6px 14px;border:3px solid #0B7A4C;border-radius:8px;color:#0B7A4C;font:800 22px var(--fuente-titulo);letter-spacing:.12em;text-transform:uppercase;transform:rotate(-7deg);background:none;box-shadow:inset 0 0 0 2px rgba(11,122,76,.25)}
/* impresión: solo si hay JS y el visitante acepta movimiento */
.js-comanda .comanda-lineas li,.js-comanda .comanda-total{opacity:0;transform:translateY(-6px);transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.js-comanda .comanda-sello{opacity:0;transform:rotate(-7deg) scale(1.9);transition:opacity .2s ease,transform .32s cubic-bezier(.3,1.6,.5,1)}
.js-comanda .impreso .comanda-lineas li,.js-comanda .impreso .comanda-total{opacity:1;transform:none}
.js-comanda .impreso .comanda-lineas li:nth-child(2){transition-delay:.18s}
.js-comanda .impreso .comanda-lineas li:nth-child(3){transition-delay:.36s}
.js-comanda .impreso .comanda-lineas li:nth-child(4){transition-delay:.54s}
.js-comanda .impreso .comanda-total{transition-delay:.78s}
.js-comanda .impreso .comanda-sello{opacity:1;transform:rotate(-7deg) scale(1);transition-delay:1.15s}
@media (max-width:860px){
  .cierre-grid{grid-template-columns:1fr;gap:36px}
  .comanda{order:-1;max-width:360px}
  .cierre-acciones{flex-direction:column;align-items:stretch;gap:6px}
  .cierre .cierre-btn{justify-content:center;width:100%}
  .cierre-alt{text-align:center}
  .cierre .garantias{justify-content:center}
  .cierre-texto{text-align:left}
}
@media (max-width:420px){.comanda-papel{padding:22px 18px 78px}.comanda-lineas li{font-size:14px}.comanda-sello{font-size:19px;right:20px}}
@media (prefers-reduced-motion: reduce){.js-comanda .comanda-lineas li,.js-comanda .comanda-total,.js-comanda .comanda-sello{transition:none}}

/* blog: índice */
.articulo-card{display:flex;flex-direction:column;background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio-tarjeta);padding:26px;text-decoration:none;color:inherit;box-shadow:var(--sombra-suave);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}
.articulo-card::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), var(--tinte-sello), transparent 72%);transition:opacity .35s ease;pointer-events:none}
.articulo-card:hover::before{opacity:1}
.articulo-card>*{position:relative}
.articulo-card:hover{border-color:var(--sello);transform:translateY(-3px);box-shadow:var(--sombra-media)}
.articulo-card .icono{width:40px;height:40px;border-radius:var(--radio-badge);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:16px;transition:transform .3s ease}
.articulo-card:hover .icono{transform:scale(1.1) rotate(-4deg)}
.articulo-meta{display:flex;align-items:center;gap:6px;font-family:var(--fuente-texto);font-size:12px;color:var(--texto-tenue);margin-bottom:2px}
.articulo-card h2{font-size:19px;margin:6px 0 8px;line-height:1.3}
.articulo-card p{font-size:13.5px;color:var(--texto-suave);line-height:1.55;margin:0;flex:1}
.articulo-card .leer-mas{margin-top:16px;font-size:13px;font-weight:600;color:var(--sello)}

.blog-destacado{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;padding:32px}
.blog-destacado .icono{width:30px;height:30px}
.blog-destacado .icono-grande{width:76px;height:76px;border-radius:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.blog-destacado .chip-nuevo{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sello);margin-bottom:8px}
.blog-destacado .chip-nuevo .dot{width:6px;height:6px;border-radius:50%;background:var(--caja-solido);animation:pulso 2s ease-in-out infinite}
.blog-destacado h2{font-size:clamp(20px,2.4vw,27px);margin:0 0 8px}
.blog-destacado p{font-size:14.5px;max-width:640px}
.blog-destacado .flecha-destacado{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--bg-suave);color:var(--sello);flex-shrink:0;transition:transform .25s ease,background .25s ease}
.blog-destacado:hover .flecha-destacado{transform:translateX(4px);background:var(--tinte-sello)}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){
  .blog-grid{grid-template-columns:1fr 1fr}
  .blog-destacado{grid-template-columns:auto 1fr;grid-template-areas:"icono texto" "icono flecha"}
  .blog-destacado .icono-grande{grid-area:icono}
  .blog-destacado>div{grid-area:texto}
  .blog-destacado .flecha-destacado{display:none}
}
@media (max-width:620px){
  .blog-grid{grid-template-columns:1fr}
  .blog-destacado{grid-template-columns:1fr;grid-template-areas:"icono" "texto";text-align:center;padding:28px 24px}
  .blog-destacado .icono-grande{grid-area:icono;margin:0 auto}
  .blog-destacado .chip-nuevo{justify-content:center}
}

/* blog: artículo */
.articulo{padding-top:40px;padding-bottom:80px}
.articulo-volver{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--texto-suave);text-decoration:none;margin-bottom:28px;transition:color .15s ease,gap .15s ease}
.articulo-volver:hover{color:var(--sello);gap:10px}
.articulo-categoria{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px}
.articulo-categoria .icono{width:34px;height:34px;border-radius:var(--radio-badge);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.articulo-categoria span{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--texto-suave)}
.articulo-meta{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.articulo-meta .fecha{font-family:var(--fuente-texto);font-size:12px;color:var(--texto-tenue)}
.articulo h1{font-family:var(--fuente-titulo);font-weight:700;letter-spacing:-.015em;font-size:clamp(30px,4.5vw,44px);line-height:1.1;margin:6px 0 24px}
.articulo-cuerpo{font-size:17px;line-height:1.7;color:var(--texto);max-width:68ch}
.articulo-cuerpo h2{font-size:24px;margin:40px 0 14px}
.articulo-cuerpo h3{font-size:19px;margin:28px 0 10px}
.articulo-cuerpo p{margin:0 0 18px}
.articulo-cuerpo ul,.articulo-cuerpo ol{margin:0 0 18px;padding-left:22px}
.articulo-cuerpo li{margin-bottom:8px}
.articulo-cuerpo strong{color:var(--texto)}
.articulo-cuerpo blockquote{margin:28px 0;padding:20px 24px;border-radius:14px;background:var(--bg-suave);color:var(--texto);font-style:normal;font-weight:600;font-size:16px;line-height:1.5}
.articulo-fuentes{margin-top:44px;padding-top:20px;border-top:1px solid var(--borde);max-width:68ch}
.articulo-fuentes span{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-tenue);margin-bottom:6px}
.articulo-fuentes p{margin:0;font-size:13px;color:var(--texto-tenue);line-height:1.6}
.articulo-cta{margin-top:40px;background:var(--bg-suave);border-radius:20px;padding:28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:68ch}
.articulo-cta p{margin:0;font-size:15px;max-width:420px}

/* relacionados: cierra el post sin dejarlo en un callejón sin salida */
.articulo-relacionados{margin-top:64px;padding-top:40px;border-top:1px solid var(--borde)}
.articulo-relacionados>span{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-tenue);margin-bottom:18px}
.relacionados-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.relacionados-grid .articulo-card{padding:20px}
.relacionados-grid .articulo-card h2{font-size:16px}
.relacionados-grid .articulo-card p{display:none}
@media (max-width:620px){.relacionados-grid{grid-template-columns:1fr}}

@media (max-width: 860px){
  .calc, .copiloto-demo, .dolores, .verificable{grid-template-columns:1fr}
  .pasos{grid-template-columns:1fr}
  .precios{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .precios{grid-template-columns:1fr}
  .articulo-cuerpo{font-size:16px}
  .comparativa-fila{flex-wrap:wrap}
  .comparativa-fila .nombre{width:100%}
  .comparativa-fila .barra-track{order:3;width:100%}
  .comparativa-fila .monto{width:auto;margin-left:auto}
}

/* ===================== página de demos interactivos ===================== */
.demo-hero{padding:56px 0 8px;text-align:center}
.demo-hero h1{font-family:var(--fuente-titulo);font-weight:700;letter-spacing:-.015em;font-size:clamp(32px,5vw,50px);margin:14px 0 12px}
.demo-hero p{font-size:16px;color:var(--texto-suave);max-width:560px;margin:0 auto}

.demo-tabs{display:inline-flex;position:relative;background:var(--bg-suave);border-radius:var(--radio-pill);padding:5px;gap:4px;margin:28px 0}
.demo-tab{border:none;background:transparent;padding:11px 22px;border-radius:var(--radio-pill);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;color:var(--texto-suave);display:inline-flex;align-items:center;gap:8px;transition:background .2s ease,color .2s ease,transform .15s ease}
.demo-tab svg{width:16px;height:16px}
.demo-tab:hover:not(.activo){color:var(--texto);background:var(--superficie)}
.demo-tab.activo{background:var(--sello-solido);color:#fff;box-shadow:0 6px 16px -6px rgba(59,76,202,.5)}
.demo-tab:active{transform:scale(.96)}

.demo-panel{display:none}
.demo-panel.activo{display:block;animation:entrada .4s ease both}

/* la ventana del navegador: barra de tráfico real (rojo/ámbar/verde), leve
   perspectiva al aparecer y un brillo diagonal sutil arriba, para que se
   sienta como una captura de pantalla real y no como un rectángulo genérico. */
.demo-browser{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio-tarjeta);box-shadow:var(--sombra-media);overflow:hidden;position:relative;animation:navegadorEntra .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes navegadorEntra{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.demo-browser-barra{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--borde);background:linear-gradient(180deg,var(--superficie),var(--bg-suave))}
.demo-browser-puntos{display:flex;gap:7px;flex-shrink:0}
.demo-browser-puntos span{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 1px 1px rgba(0,0,0,.12)}
.demo-browser-puntos span:nth-child(1){background:#ED6A5E}
.demo-browser-puntos span:nth-child(2){background:#F4BF4F}
.demo-browser-puntos span:nth-child(3){background:#61C554}
.demo-browser-url{flex-grow:1;background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio-pill);padding:7px 14px;font-family:var(--fuente-texto);font-size:12.5px;color:var(--texto-suave);text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}
.demo-browser-url::before{content:"";width:10px;height:10px;flex-shrink:0;opacity:.55;background:currentColor;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><rect x=%224%22 y=%2211%22 width=%2216%22 height=%2210%22 rx=%222%22/><path d=%22M8 11V7a4 4 0 0 1 8 0v4%22/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><rect x=%224%22 y=%2211%22 width=%2216%22 height=%2210%22 rx=%222%22/><path d=%22M8 11V7a4 4 0 0 1 8 0v4%22/></svg>') center/contain no-repeat}
.demo-browser-url strong{color:var(--texto);font-weight:600}
.demo-browser-cuerpo{padding:28px;display:grid;grid-template-columns:1.3fr 1fr;gap:28px}

.demo-tienda-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.demo-tienda-header .avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fuente-titulo);font-weight:700;font-size:16px;color:#fff;flex-shrink:0}
.demo-tienda-header strong{display:block;font-size:15px}
.demo-tienda-header span{display:block;font-size:12.5px;color:var(--texto-suave)}

.demo-productos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.demo-producto{background:var(--superficie);border:1px solid var(--borde);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sombra-suave);transition:transform .2s ease,box-shadow .2s ease;animation:productoEntra .4s ease both;animation-delay:calc(var(--i, 0) * 55ms)}
.demo-producto:hover{transform:translateY(-3px);box-shadow:var(--sombra-media)}
@keyframes productoEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.demo-producto .foto{height:64px;border-radius:10px;position:relative;display:flex;align-items:center;justify-content:center;font-size:26px;overflow:hidden;box-shadow:inset 0 -10px 18px -6px rgba(0,0,0,.18)}
.demo-producto .foto::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 55%)}
.demo-producto .foto::after{content:attr(data-emoji);position:relative;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.demo-producto strong{font-size:13.5px}
.demo-producto .fila{display:flex;align-items:center;justify-content:space-between}
.demo-producto .precio{font-family:var(--fuente-texto);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--texto-suave)}
.demo-add{width:30px;height:30px;border-radius:50%;border:none;background:var(--sello-solido);color:#fff;font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s ease;position:relative}
.demo-add:hover{transform:scale(1.12)}
.demo-add:active{transform:scale(.94)}
.demo-add.pulso{animation:addPulso .35s ease}
@keyframes addPulso{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
.demo-flotante{position:absolute;right:2px;top:-6px;font-family:var(--fuente-texto);font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;color:var(--sello);pointer-events:none;animation:flotanteSube .7s ease forwards}
@keyframes flotanteSube{0%{opacity:0;transform:translateY(0) scale(.8)}20%{opacity:1;transform:translateY(-6px) scale(1)}100%{opacity:0;transform:translateY(-30px) scale(1)}}

.demo-carrito{background:var(--superficie);border:1px solid var(--borde);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px;align-self:start;box-shadow:var(--sombra-suave)}
.demo-carrito h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--texto-tenue);display:flex;align-items:center;gap:6px}
.demo-carrito-lista{display:flex;flex-direction:column;gap:4px;min-height:32px}
.demo-carrito-fila{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;padding:7px 0;border-bottom:1px dashed var(--borde);animation:entrada .25s ease both}
.demo-carrito-fila .demo-carrito-nombre{flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-carrito-stepper{display:flex;align-items:center;gap:6px;flex-shrink:0}
.demo-carrito-stepper button{width:20px;height:20px;border-radius:50%;border:1px solid var(--borde);background:var(--bg-suave);color:var(--texto);font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease,border-color .15s ease}
.demo-carrito-stepper button:hover{border-color:var(--sello);color:var(--sello)}
.demo-carrito-stepper span{font-family:var(--fuente-texto);font-variant-numeric:tabular-nums;font-size:12px;min-width:12px;text-align:center}
.demo-carrito-fila .demo-carrito-sub{font-family:var(--fuente-texto);font-variant-numeric:tabular-nums;flex-shrink:0;min-width:58px;text-align:right}
.demo-ayuda{font-size:12.5px;color:var(--texto-tenue);margin:0}
.demo-carrito-total-fila{display:flex;justify-content:space-between;font-weight:700;font-size:15px;padding-top:8px;border-top:1px solid var(--borde)}
.demo-carrito-total{font-family:var(--fuente-texto);font-variant-numeric:tabular-nums;transition:color .15s ease}
.demo-carrito-total.bump{animation:totalBump .3s ease}
@keyframes totalBump{0%{transform:scale(1)}40%{transform:scale(1.12);color:var(--sello)}100%{transform:scale(1)}}
.demo-confirmar,.demo-confirmar-reserva{background:var(--caja-solido);color:#fff;border:none;border-radius:var(--radio-pill);padding:13px 18px;font-weight:600;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .2s ease,transform .15s ease,box-shadow .2s ease}
.demo-confirmar:hover:not(:disabled),.demo-confirmar-reserva:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(22,163,106,.55)}
.demo-confirmar:disabled,.demo-confirmar-reserva:disabled{opacity:.4;cursor:not-allowed}
.demo-carrito-barra{font-family:var(--fuente-texto);font-size:11.5px;color:var(--texto-tenue);text-align:center;min-height:14px}

.demo-servicios{display:flex;flex-direction:column;gap:10px}
.demo-servicio{background:var(--superficie);border:1.5px solid var(--borde);border-radius:14px;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;text-align:left;width:100%;font:inherit;color:var(--texto);transition:border-color .2s ease,transform .15s ease,box-shadow .2s ease;box-shadow:var(--sombra-suave)}
.demo-servicio:hover{transform:translateY(-2px);box-shadow:var(--sombra-media)}
.demo-servicio.activo{border-color:var(--sello);background:var(--tinte-sello);box-shadow:0 6px 16px -8px rgba(59,76,202,.4)}
.demo-servicio strong{display:block;font-size:13.5px}
.demo-servicio .meta{font-size:11.5px;color:var(--texto-suave)}
.demo-servicio .precio{font-family:var(--fuente-texto);font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;flex-shrink:0}
.demo-servicio .check{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--borde);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s ease}
.demo-servicio.activo .check{background:var(--sello-solido);border-color:var(--sello)}
.demo-servicio .check svg{width:12px;height:12px;opacity:0;transform:scale(.5);transition:all .2s ease}
.demo-servicio.activo .check svg{opacity:1;transform:scale(1)}

.demo-paso{display:flex;align-items:center;gap:8px;font-family:var(--fuente-texto);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--texto-tenue);margin-bottom:10px}
.demo-paso b{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:var(--tinte-sello);color:var(--sello);font-family:var(--fuente-texto);font-size:10px}

.demo-picker{background:var(--superficie);border:1px solid var(--borde);border-radius:14px;padding:16px;margin-top:16px;box-shadow:var(--sombra-suave)}
.demo-picker h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--texto-tenue)}
.demo-dias{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px}
.demo-dia{flex-shrink:0;border:1px solid var(--borde);background:var(--bg-suave);border-radius:var(--radio-pill);padding:7px 13px;font-size:12.5px;cursor:pointer;color:var(--texto-suave);transition:all .15s ease}
.demo-dia:hover:not(.activo){border-color:var(--sello);color:var(--sello)}
.demo-dia.activo{background:var(--carbon);color:#fff;border-color:var(--carbon)}
.demo-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.demo-slot{border:1px solid var(--borde);background:var(--bg-suave);border-radius:9px;padding:9px 4px;font-size:12px;cursor:pointer;color:var(--texto);transition:all .15s ease}
.demo-slot:hover:not(:disabled){border-color:var(--sello);color:var(--sello)}
.demo-slot.activo{background:var(--sello-solido);border-color:var(--sello);color:#fff;box-shadow:0 4px 12px -4px rgba(59,76,202,.55)}
.demo-slot.ocupado{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.demo-resumen-reserva{font-size:13px;color:var(--texto-suave);margin:16px 0;min-height:20px}
.demo-resumen-reserva strong{color:var(--texto)}

@media (max-width:760px){
  .demo-browser-cuerpo{grid-template-columns:1fr}
}

/* pantalla de éxito: burbuja de WhatsApp real, no una tarjeta de "listo"
   genérica. La cabecera/avatar/mensaje se arman en demos.js (ver initExito),
   con una simulación de "escribiendo…" antes de que aparezca el mensaje. */
.demo-exito{position:absolute;inset:0;background:rgba(17,18,23,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;z-index:10}
.demo-exito.visible{opacity:1;visibility:visible}
.demo-exito-tarjeta{background:#E5DDD5;border-radius:var(--radio-tarjeta);width:100%;max-width:340px;text-align:left;box-shadow:var(--sombra-media);animation:entrada .3s ease both;overflow:hidden}
[data-theme="dark"] .demo-exito-tarjeta{background:#0B141A}
.demo-chat-header{display:flex;align-items:center;gap:10px;padding:14px 16px;background:#005C4B;color:#fff}
.demo-chat-header button{background:none;border:none;color:#fff;padding:2px;cursor:pointer;display:flex;opacity:.9;flex-shrink:0}
.demo-chat-header button svg{width:18px;height:18px}
.demo-chat-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fuente-titulo);font-weight:700;font-size:14px;color:#fff;flex-shrink:0}
.demo-chat-info{min-width:0;flex:1}
.demo-chat-info strong{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-chat-info span{display:block;font-size:11px;color:rgba(255,255,255,.75)}
.demo-chat-cuerpo{padding:16px 14px;min-height:120px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:14px 14px}
.demo-chat-escribiendo{align-self:flex-end;background:#fff;border-radius:10px 10px 2px 10px;padding:10px 14px;display:flex;gap:4px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
[data-theme="dark"] .demo-chat-escribiendo{background:#202C33}
.demo-chat-escribiendo span{width:6px;height:6px;border-radius:50%;background:#8a8d97;animation:puntoBote 1s ease infinite}
.demo-chat-escribiendo span:nth-child(2){animation-delay:.15s}
.demo-chat-escribiendo span:nth-child(3){animation-delay:.3s}
@keyframes puntoBote{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.demo-chat-burbuja{align-self:flex-end;max-width:88%;background:#DCF8C6;border-radius:10px 10px 2px 10px;padding:9px 12px;box-shadow:0 1px 1px rgba(0,0,0,.08);animation:burbujaEntra .25s ease both}
[data-theme="dark"] .demo-chat-burbuja{background:#005C4B;color:#E9EDEF}
@keyframes burbujaEntra{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.demo-chat-texto{font-size:12.5px;line-height:1.5;white-space:pre-line;color:#1B1A17}
[data-theme="dark"] .demo-chat-texto{color:#E9EDEF}
.demo-chat-hora{display:flex;align-items:center;justify-content:flex-end;gap:3px;margin-top:4px;font-size:10px;color:#5b6b5c}
[data-theme="dark"] .demo-chat-hora{color:#8fa79a}
.demo-chat-hora svg{width:14px;height:14px;color:#4FC3F7}
.demo-exito-pie{padding:14px 16px 16px;background:var(--superficie)}
.demo-exito-nota{font-size:11.5px;color:var(--texto-tenue);margin:0 0 10px;text-align:center}
/* el mismo .demo-exito-cerrar se reutiliza en el botón de "←" de la
   cabecera del chat y en el botón de abajo: el ancho 100% es solo para
   este último, si no el de la cabecera se estira y empuja el avatar. */
.demo-exito-pie .demo-exito-cerrar{width:100%}

/* toggle vista cliente / vista administrador, dentro de cada demo */
.demo-vista-toggle{display:inline-flex;background:var(--bg-suave);border-radius:var(--radio-pill);padding:4px;gap:4px;margin-bottom:16px}
.demo-vista-toggle button{border:none;background:transparent;padding:8px 16px;border-radius:var(--radio-pill);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;color:var(--texto-suave);transition:background .2s ease,color .2s ease}
.demo-vista-toggle button.activo{background:var(--sello-solido);color:#fff}

/* vista administrador: réplica visual del panel real (public/assets/css/app.css),
   con sus propios tokens locales para no chocar con los del sitio de marketing.
   Los íconos del nav, los de cada stat y los avatares de cada fila se inyectan
   en demos.js (initAdminExtras) para no repetir el mismo SVG cinco veces en el HTML. */
.demo-admin{
  --da-carbon:#202124; --da-tiquete:#FFFDF8; --da-sello:#3B4CCA; --da-recibo:#E9E4D8; --da-caja:#16A36A;
  --da-aji:#E8452C; --da-gris-texto:#54565f; --da-gris-suave:#676971; --da-borde:#D8D3C6;
  display:none;background:var(--da-tiquete);color:var(--da-carbon);padding:26px 28px;font-family:var(--fuente-texto);
  animation:navegadorEntra .4s cubic-bezier(.2,.8,.2,1) both;
}
.demo-panel[data-vista="admin"] .demo-admin{display:block}
.demo-panel[data-vista="admin"] .demo-browser-cuerpo{display:none}
.demo-admin-topbar{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--da-recibo)}
.demo-admin-marca{font-family:var(--fuente-titulo);font-size:17px;font-weight:700;display:flex;align-items:center;gap:6px}
.demo-admin-marca::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--da-caja);box-shadow:0 0 0 3px rgba(22,163,106,.18);animation:pulso 2s ease infinite}
.demo-admin-nav{display:flex;gap:16px;font-family:var(--fuente-texto);font-size:11px}
.demo-admin-nav span{color:var(--da-gris-suave);display:inline-flex;align-items:center;gap:5px;padding-bottom:2px;border-bottom:2px solid transparent;transition:color .15s ease}
.demo-admin-nav span svg{width:13px;height:13px;opacity:.7}
.demo-admin-nav span.activo{color:var(--da-sello);font-weight:600;border-bottom-color:var(--da-sello)}
.demo-admin-nav span.activo svg{opacity:1}
.demo-admin-eyebrow{font-family:var(--fuente-texto);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--da-sello);display:block}
.demo-admin h4{font-family:var(--fuente-titulo);font-weight:700;font-size:24px;margin:4px 0 16px;color:var(--da-carbon)}
.demo-admin-stats{display:flex;gap:10px;margin-bottom:22px}
.demo-admin-stat{flex:1;background:#F4F1E9;border-radius:12px;padding:12px;display:flex;align-items:center;gap:10px;transition:transform .2s ease;animation:productoEntra .35s ease both;animation-delay:calc(var(--i, 0) * 70ms)}
.demo-admin-stat:hover{transform:translateY(-2px)}
.demo-admin-stat-icono{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.demo-admin-stat-icono svg{width:15px;height:15px}
.demo-admin-stat b{display:block;font-family:var(--fuente-texto);font-variant-numeric:tabular-nums;font-size:19px;font-weight:600;color:var(--da-carbon)}
.demo-admin-stat span{font-size:10.5px;color:var(--da-gris-texto)}
.demo-admin-titulo{font-size:12.5px;font-weight:600;color:var(--da-gris-texto);display:block;margin-bottom:10px}
.demo-admin-lista{display:flex;flex-direction:column;gap:8px}
.demo-admin-fila{background:var(--da-tiquete);border:1px solid var(--da-recibo);border-radius:12px;padding:13px 14px;display:flex;align-items:center;gap:12px;transition:transform .15s ease,box-shadow .15s ease;animation:productoEntra .35s ease both;animation-delay:calc(var(--i, 0) * 60ms)}
.demo-admin-fila:hover{transform:translateX(2px);box-shadow:var(--sombra-suave)}
.demo-admin-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.demo-admin-fila .info{flex-grow:1;min-width:0}
.demo-admin-fila .nombre{font-size:13.5px;font-weight:600;display:block;color:var(--da-carbon);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-admin-fila .meta{font-size:11.5px;color:var(--da-gris-texto);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.demo-admin-fila .der{text-align:right;flex-shrink:0}
.demo-admin-fila .precio{font-family:var(--fuente-texto);font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;display:block;color:var(--da-carbon)}
.demo-admin-chip{display:inline-block;font-family:var(--fuente-texto);font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;padding:3px 9px;border-radius:20px;margin-top:4px}
.demo-admin-chip.pagado,.demo-admin-chip.entregado,.demo-admin-chip.confirmada,.demo-admin-chip.completada{background:#DFF3E8;color:#0f6b45}
.demo-admin-chip.pendiente{background:#FDF1DA;color:#8a5a00}
.demo-admin-chip.en_cocina,.demo-admin-chip.en_camino{background:#EAF0FE;color:#2540a8}

/* pestañas del panel de la demo: Panel/Pedidos/Copiloto/Menú (o
   Agenda/Servicios/Horario en los negocios de reservas) ya cambian de
   contenido de verdad al hacer clic, no son solo rótulos decorativos. */
.demo-admin-nav span{cursor:pointer}
.demo-admin-vista{display:none}
.demo-admin-vista.activo{display:block;animation:entrada .3s ease both}

.demo-admin-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.demo-admin-kanban-col h5{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--da-gris-texto);margin:0 0 8px}
.demo-admin-kanban-card{background:var(--da-tiquete);border:1px solid var(--da-recibo);border-radius:10px;padding:10px 11px;margin-bottom:8px;animation:productoEntra .35s ease both;animation-delay:calc(var(--i, 0) * 60ms)}
.demo-admin-kanban-card .nombre{font-size:12px;font-weight:600;color:var(--da-carbon);display:block;margin-bottom:2px}
.demo-admin-kanban-card .meta{font-size:10.5px;color:var(--da-gris-texto);display:block}
.demo-admin-kanban-card .precio{font-family:var(--fuente-texto);font-variant-numeric:tabular-nums;font-size:11.5px;font-weight:600;color:var(--da-sello);display:block;margin-top:5px}

.demo-admin-copiloto-row{display:flex;align-items:center;gap:11px;background:var(--da-tiquete);border:1px solid var(--da-recibo);border-radius:12px;padding:11px 13px;margin-bottom:8px}
.demo-admin-copiloto-row .av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.demo-admin-copiloto-row .info{flex-grow:1;min-width:0}
.demo-admin-copiloto-row .nombre{font-size:13px;font-weight:600;color:var(--da-carbon);display:block}
.demo-admin-copiloto-row .motivo{font-size:11px;color:var(--da-aji);display:block}
.demo-admin-copiloto-row .btn-mini{background:var(--da-sello);color:#fff;font-size:11px;font-weight:600;padding:7px 12px;border-radius:999px;border:none;cursor:pointer;flex-shrink:0}

.demo-admin-menu-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 2px;border-bottom:1px solid var(--da-recibo)}
.demo-admin-menu-row:last-child{border-bottom:none}
.demo-admin-menu-row .nombre{font-size:12.5px;font-weight:600;color:var(--da-carbon)}
.demo-admin-menu-row .precio{font-family:var(--fuente-texto);font-variant-numeric:tabular-nums;font-size:12px;color:var(--da-gris-texto)}
.demo-admin-menu-row .editar{font-size:11px;font-weight:600;color:var(--da-sello);background:none;border:none;cursor:pointer;padding:4px 8px}

.demo-admin-horario-fila{display:flex;align-items:center;justify-content:space-between;padding:9px 2px;border-bottom:1px dashed var(--da-recibo);font-size:12px}
.demo-admin-horario-fila:last-child{border-bottom:none}
.demo-admin-horario-fila .dia{font-weight:600;color:var(--da-carbon)}
.demo-admin-horario-fila .rango{color:var(--da-gris-texto);font-family:var(--fuente-texto);font-variant-numeric:tabular-nums}
.demo-admin-horario-fila.cerrado .rango{color:var(--da-aji)}

@media (max-width:760px){
  .demo-admin-kanban{grid-template-columns:1fr}
  .demo-admin{padding:20px}
  .demo-admin-stats{flex-wrap:wrap}
  .demo-admin-stat{min-width:calc(50% - 5px)}
}

@media (max-width:860px){
  .demo-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;justify-content:flex-start;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .demo-tabs::-webkit-scrollbar{display:none}
  .demo-tab{flex-shrink:0}
}
@media (prefers-reduced-motion: reduce){
  .demo-browser,.demo-admin,.demo-producto,.demo-admin-stat,.demo-admin-fila,.demo-chat-burbuja{animation:none}
}

/* teaser de demos en el home */
.demo-teaser{background:var(--bg-suave);border-radius:var(--radio-tarjeta);padding:44px;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:stretch}
.demo-teaser-texto{display:flex;flex-direction:column;justify-content:center}
.demo-teaser h2{margin:10px 0 12px}
.demo-teaser-tarjetas-wrap{background:var(--bg-suave);border:1px solid var(--borde);border-radius:var(--radio-tarjeta);box-shadow:var(--sombra-media);overflow:hidden}
.demo-teaser-barra{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--borde);background:linear-gradient(180deg,var(--superficie),var(--bg-suave))}
.demo-teaser-en-vivo{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--caja-texto)}
.demo-teaser-en-vivo .dot{width:6px;height:6px;border-radius:50%;background:var(--caja-solido);animation:pulso 2s ease-in-out infinite}
.demo-teaser-tarjetas{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}
.demo-teaser-card{background:var(--superficie);border:1px solid var(--borde);border-radius:16px;padding:16px 18px;text-decoration:none;color:var(--texto);display:flex;flex-direction:column;gap:6px;box-shadow:var(--sombra-suave);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;position:relative;overflow:hidden}
.demo-teaser-card::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), var(--tinte-sello), transparent 72%);transition:opacity .35s ease;pointer-events:none}
.demo-teaser-card:hover::before{opacity:1}
.demo-teaser-card>*{position:relative}
.demo-teaser-card:hover{transform:translateY(-3px) translateX(2px);box-shadow:var(--sombra-media);border-color:var(--sello)}
.demo-teaser-card .icono{width:36px;height:36px;border-radius:var(--radio-badge);display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.demo-teaser-card strong{font-size:14.5px}
.demo-teaser-card span{font-size:12.5px;color:var(--sello);font-weight:600}
.demo-teaser-card:last-child{grid-column:1 / -1}
@media (max-width:760px){
  .demo-teaser{grid-template-columns:1fr;padding:28px}
}
@media (max-width:520px){
  .demo-teaser-tarjetas{grid-template-columns:1fr}
  .demo-teaser-card:last-child{grid-column:auto}
}

/* asistente Veci (veci-chat.js): mismo lenguaje de tiquete y sello del hero */
.vchat-lanzador{position:fixed;right:20px;bottom:20px;z-index:55;display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 20px 0 16px;border:0;border-radius:var(--radio-pill);background:var(--sello-solido);color:var(--tiquete);font-family:var(--fuente-texto);font-size:14.5px;font-weight:600;cursor:pointer;box-shadow:0 2px 6px rgba(32,33,36,.18),0 18px 36px -14px rgba(59,76,202,.65);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,background .2s ease}
.vchat-lanzador:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(32,33,36,.2),0 24px 44px -14px rgba(59,76,202,.7)}
.vchat-lanzador.activo{background:var(--carbon)}
.menu-abierto .vchat-lanzador,.menu-abierto .vchat-teaser{display:none}
.vchat-panel{position:fixed;right:20px;bottom:84px;z-index:70;width:384px;height:min(620px,calc(100dvh - 120px));display:flex;flex-direction:column;background:var(--bg);color:var(--texto);border:1px solid var(--borde);border-radius:22px;overflow:hidden;box-shadow:0 2px 6px rgba(32,33,36,.08),0 40px 80px -24px rgba(32,33,36,.45);opacity:0;transform:translateY(14px) scale(.98);transform-origin:bottom right;transition:opacity .2s ease,transform .22s cubic-bezier(.2,.8,.2,1)}
.vchat-panel.abierto{opacity:1;transform:none}
.vchat-panel[hidden]{display:none}
.vchat-cabecera{display:flex;align-items:center;gap:11px;padding:14px 14px 14px 16px;background:var(--carbon);color:var(--tiquete)}
.vchat-avatar{width:36px;height:36px;border-radius:50%;background:var(--tiquete);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vchat-titulos{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vchat-titulos strong{font-family:var(--fuente-titulo);font-weight:700;font-size:15.5px;letter-spacing:-.01em}
.vchat-titulos span{font-size:11.5px;color:rgba(255,253,248,.62)}
.vchat-cerrar{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:var(--tiquete);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease}
.vchat-cerrar:hover{background:rgba(255,255,255,.16)}
.vchat-registro{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 14px 8px;display:flex;flex-direction:column;gap:10px;background-image:radial-gradient(var(--borde) 1px,transparent 1px);background-size:18px 18px}
.vchat-msg{max-width:88%;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.5;animation:vchatEntra .25s cubic-bezier(.2,.8,.2,1) both}
.vchat-msg p{margin:0}
.vchat-msg p+p{margin-top:7px}
.vchat-msg strong{font-weight:700}
.vchat-bot{align-self:flex-start;background:var(--superficie);border:1px solid var(--borde);border-bottom-left-radius:4px;color:var(--texto)}
.vchat-yo{align-self:flex-end;background:var(--sello-solido);color:var(--tiquete);border-bottom-right-radius:4px;white-space:pre-wrap;overflow-wrap:anywhere}
.vchat-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.vchat-link{display:inline-flex;align-items:center;padding:7px 12px;border-radius:var(--radio-pill);background:var(--tinte-sello);color:var(--sello);font-size:13px;font-weight:600;text-decoration:none;transition:background .15s ease}
.vchat-link:hover{background:rgba(59,76,202,.18)}
.vchat-link-cta{background:var(--sello-solido);color:var(--tiquete)}
.vchat-link-cta:hover{background:#2f3fb0}
.vchat-chips{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 4px;animation:vchatEntra .3s cubic-bezier(.2,.8,.2,1) .05s both}
.vchat-chip{padding:8px 13px;border-radius:var(--radio-pill);border:1.5px solid var(--sello);background:var(--bg);color:var(--sello);font-family:var(--fuente-texto);font-size:13px;font-weight:600;cursor:pointer;transition:background .15s ease,color .15s ease}
.vchat-chip:hover{background:var(--sello-solido);color:var(--tiquete)}
.vchat-escribiendo{display:flex;gap:4px;padding:14px 16px}
.vchat-escribiendo span{width:6px;height:6px;border-radius:50%;background:var(--texto-tenue);animation:vchatPunto 1s ease-in-out infinite}
.vchat-escribiendo span:nth-child(2){animation-delay:.15s}
.vchat-escribiendo span:nth-child(3){animation-delay:.3s}
.vchat-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--borde);background:var(--superficie)}
.vchat-input{flex:1;min-width:0;height:44px;padding:0 14px;border-radius:var(--radio-pill);border:1.5px solid var(--borde);background:var(--bg);color:var(--texto);font-family:var(--fuente-texto);font-size:16px;outline:none;transition:border-color .15s ease}
.vchat-input:focus{border-color:var(--sello)}
.vchat-enviar{width:44px;height:44px;flex-shrink:0;border-radius:50%;border:0;background:var(--sello-solido);color:var(--tiquete);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .15s ease}
.vchat-enviar:disabled{opacity:.45;cursor:default}
.vchat-pie{margin:0;padding:0 12px 10px;background:var(--superficie);font-size:11.5px;color:var(--texto-tenue);text-align:center}
.vchat-pie a{color:var(--texto-suave)}
/* la oferta es un tiquete con sello, no un banner */
.vchat-oferta{align-self:stretch;display:flex;align-items:flex-start;background:var(--tiquete);color:var(--carbon);border:1px solid rgba(32,33,36,.1);border-radius:14px;padding:16px;box-shadow:0 14px 28px -16px rgba(32,33,36,.35);rotate:-.6deg;animation:vchatEntra .35s cubic-bezier(.2,.8,.2,1) both}
.vchat-oferta-sello{width:60px;height:60px;flex-shrink:0;border-radius:50%;border:2px solid var(--aji);display:flex;align-items:center;justify-content:center;position:relative;rotate:-12deg;margin-top:4px}
.vchat-oferta-sello::before{content:"";position:absolute;inset:4px;border:1px solid var(--aji);border-radius:50%;opacity:.5}
.vchat-oferta-sello span{font-family:var(--fuente-titulo);font-weight:800;font-size:16px;color:var(--aji-texto);letter-spacing:-.02em}
.vchat-oferta-divisor{width:1px;align-self:stretch;flex-shrink:0;margin:0 14px;background-image:linear-gradient(to bottom,rgba(32,33,36,.2) 0 4px,transparent 4px 7px);background-size:1px 7px}
.vchat-oferta-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.vchat-oferta-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--aji-texto)}
.vchat-oferta-cuerpo strong{font-family:var(--fuente-titulo);font-weight:700;font-size:16.5px;line-height:1.2}
.vchat-oferta-cuerpo p{margin:0;font-size:12.5px;line-height:1.45;color:#54565f}
.vchat-oferta-codigo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;padding:6px 6px 6px 12px;border:1.5px dashed rgba(32,33,36,.25);border-radius:10px}
.vchat-oferta-codigo .mono{font-weight:700;font-size:14px;letter-spacing:.06em}
.vchat-copiar{padding:6px 11px;border-radius:8px;border:0;background:var(--carbon);color:var(--tiquete);font-family:var(--fuente-texto);font-size:12px;font-weight:600;cursor:pointer}
.vchat-oferta-vence{font-size:11.5px;color:#676971}
.vchat-oferta .vchat-link-cta{align-self:flex-start;margin-top:4px}
.vchat-oferta.vencida{opacity:.6}
.vchat-oferta.vencida .vchat-oferta-sello,.vchat-oferta.vencida .vchat-oferta-sello::before{border-color:#8a8d97}
.vchat-oferta.vencida .vchat-oferta-sello span,.vchat-oferta.vencida .vchat-oferta-eyebrow{color:#8a8d97}
.vchat-teaser{position:fixed;right:20px;bottom:84px;z-index:55;display:flex;align-items:flex-start;max-width:280px;background:var(--superficie);border:1px solid var(--borde);border-radius:16px 16px 4px 16px;box-shadow:0 20px 40px -18px rgba(32,33,36,.4);animation:vchatEntra .35s cubic-bezier(.2,.8,.2,1) both}
.vchat-teaser-ir{flex:1;display:flex;flex-direction:column;gap:3px;padding:13px 4px 13px 15px;border:0;background:none;text-align:left;cursor:pointer;color:var(--texto);font-family:var(--fuente-texto)}
.vchat-teaser-ir strong{font-size:14px;font-weight:700}
.vchat-teaser-ir span{font-size:12.5px;color:var(--sello);font-weight:600}
.vchat-teaser-x{width:30px;height:30px;margin:6px 6px 0 0;border:0;border-radius:50%;background:none;color:var(--texto-tenue);display:flex;align-items:center;justify-content:center;cursor:pointer}
.vchat-teaser-x:hover{background:var(--bg-suave)}
@keyframes vchatEntra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes vchatPunto{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@media (max-width:560px){
  .vchat-lanzador{right:16px;bottom:16px;width:56px;height:56px;padding:0;justify-content:center}
  .vchat-lanzador-texto{display:none}
  .vchat-panel{left:0;right:0;bottom:0;width:auto;height:88dvh;border-radius:22px 22px 0 0;border-bottom:0;transform-origin:bottom center}
  .vchat-abierto body{overflow:hidden}
  .vchat-abierto .vchat-lanzador{display:none}
  .vchat-teaser{right:16px;bottom:82px;max-width:calc(100vw - 32px)}
}
@media (prefers-reduced-motion: reduce){
  .vchat-panel,.vchat-lanzador{transition:none}
  .vchat-msg,.vchat-chips,.vchat-oferta,.vchat-teaser{animation:none}
  .vchat-escribiendo span{animation:none;opacity:.6}
}

/* herramientas de cierre ([data-calc]): el visitante ve su propio caso */
.herramienta{margin-top:40px;max-width:68ch;background:var(--superficie);border:1px solid var(--borde);border-radius:20px;padding:28px;box-shadow:var(--sombra-suave)}
.herramienta-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--sello);margin-bottom:6px}
.herramienta h3{margin:0 0 6px;font-family:var(--fuente-titulo);font-weight:700;font-size:22px;line-height:1.2;letter-spacing:-.01em;color:var(--texto)}
.herramienta-intro{margin:0 0 20px;font-size:15px;line-height:1.55;color:var(--texto-suave)}
.herramienta-campos{display:grid;align-items:end;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;margin-bottom:22px}
.herramienta-campo label{display:block;font-size:13px;font-weight:600;color:var(--texto-suave);margin-bottom:8px}
.herramienta-campo output{display:block;font-family:var(--fuente-texto);font-variant-numeric:tabular-nums;font-size:24px;font-weight:700;color:var(--texto);margin-bottom:10px}
.herramienta-campo input[type=number]{width:100%;height:46px;padding:0 14px;border-radius:12px;border:1.5px solid var(--borde);background:var(--bg);color:var(--texto);font-family:var(--fuente-texto);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;outline:none;transition:border-color .15s ease}
.herramienta-campo input[type=number]:focus{border-color:var(--sello)}
.herramienta-campo .calc-slider{width:100%}
.herramienta-recibo{background:var(--tiquete);color:var(--carbon);border:1px solid rgba(32,33,36,.1);border-radius:14px;padding:6px 18px;rotate:-.4deg;box-shadow:0 14px 28px -18px rgba(32,33,36,.35)}
.recibo-fila{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px dashed rgba(32,33,36,.2);font-size:14px}
.recibo-fila:last-child{border-bottom:0}
.recibo-fila span{color:#54565f}
.recibo-fila strong{font-variant-numeric:tabular-nums;font-size:16px;white-space:nowrap}
.herramienta-recibo strong{color:#202124}
.recibo-fila.perdida strong{color:#BF3A22}
.recibo-fila.total span{color:var(--carbon);font-weight:600}
.recibo-fila.total strong{font-family:var(--fuente-titulo);font-weight:800;font-size:22px;color:#0B7A4C}
.recibo-fila.total.perdida strong{color:#BF3A22}
.herramienta-nota{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--texto-tenue)}
.herramienta-remate{margin:18px 0 0;font-size:15px;line-height:1.55;color:var(--texto)}
.herramienta-acciones{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;margin-top:20px}
.btn-texto{border:0;background:none;padding:6px 0;font-family:var(--fuente-texto);font-size:14px;font-weight:600;color:var(--sello);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.btn-texto:hover{text-decoration-thickness:2px}
.garantias{display:flex;flex-wrap:wrap;gap:4px 14px;margin:14px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--texto-tenue)}
.garantias li{display:inline-flex;align-items:center;gap:6px}
.garantias li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--caja-solido)}
.hero-ctas+.garantias{justify-content:center}
.seccion-herramienta .herramienta{margin:0 auto}
.demo-mi-tienda{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;margin-top:24px;padding:20px 24px;border-radius:18px;background:var(--carbon);color:var(--tiquete)}
.demo-mi-tienda p{margin:0;font-size:15px;line-height:1.45}
.demo-mi-tienda p strong{display:block;font-family:var(--fuente-titulo);font-weight:700;font-size:18px}
.demo-mi-tienda p span{color:#C9CCD6;font-size:13.5px}
@media (max-width:560px){
  .herramienta{padding:22px 18px}
  .herramienta-recibo{padding:4px 14px}
  .recibo-fila.total strong{font-size:19px}
  .demo-mi-tienda .btn{width:100%;justify-content:center}
}

/* =====================================================================
   Escenas: demostraciones paso a paso dentro del teléfono (escenas.js).
   Las pantallas copian la interfaz real de la app (diseno-veci): toldo con
   festones, carta con puntos guía, comanda rasgada, sello de caucho, hojas
   de almanaque. Todo dentro de .ui se mide en em sobre un tamaño que sale
   del ancho del teléfono (cqi), así la pantalla escala entera.
   ===================================================================== */
@property --m{syntax:'<color>';inherits:true;initial-value:#F2B632}
.telefono-escena{width:262px}
.telefono[data-barra] .telefono-statusbar{top:12px;left:12px;right:12px;padding:0 18px;border-radius:30px 30px 0 0}
.telefono[data-barra=papel] .telefono-statusbar{background:#F6F1E7;color:#1B1A17}
.telefono[data-barra=crema] .telefono-statusbar{background:#FFFDF8;color:#202124}
.telefono[data-barra=wa] .telefono-statusbar{background:#00735E;color:#fff}
.telefono[data-barra=banco] .telefono-statusbar{background:#2E3440;color:#fff}
.telefono[data-barra=oscura] .telefono-statusbar{background:#0d0d0f;color:#fff}
.telefono[data-barra=papel] .telefono-home-indicator,.telefono[data-barra=crema] .telefono-home-indicator,.telefono[data-barra=wa] .telefono-home-indicator,.telefono[data-barra=banco] .telefono-home-indicator{background:rgba(27,26,23,.3)}
.telefono[data-barra] .telefono-pantalla{min-height:0;aspect-ratio:9/17.4;container-type:inline-size;background:#F6F1E7}

.ui{--curva-ui:cubic-bezier(.2,.8,.2,1);position:absolute;inset:0;font-family:var(--fuente-texto);font-size:4.5cqi;line-height:1.35;color:#1B1A17;overflow:hidden;transition:opacity .5s ease;text-align:left}
.ui.fundido{opacity:0}
.ui svg{flex-shrink:0}
.ui-vista{position:absolute;inset:0;padding:26px 0 1.4em;display:flex;flex-direction:column;gap:.7em;overflow:hidden;background:#F6F1E7;opacity:0;transform:translateX(7%);transition:opacity .5s var(--curva-ui),transform .5s var(--curva-ui)}
.ui-vista.activa{opacity:1;transform:none;z-index:1}
.ui-vista.sale{transform:translateX(-7%)}
.ui-vista>*{margin-inline:5cqi}
.ui-vista>.ui-toldo,.ui-vista>.ui-cab-corta,.ui-vista>.ui-wa-cab,.ui-vista>.ui-wa-cuerpo,.ui-vista>.ui-wa-entrada,.ui-vista>.ui-panel-cab,.ui-vista>.ui-cenefa,.ui-vista>.ui-nav,.ui-vista>.ui-camara,.ui-vista>.ui-camara-pie,.ui-vista>.ui-banco-cab,.ui-vista>.ui-banco-ok{margin-inline:0}
.ui .sin-transicion,.ui .sin-transicion *{transition:none!important;animation:none!important}
.ui .tocado{filter:brightness(.88)}
.ui .cambia{animation:uiPop .35s var(--curva-ui)}
.ui .escribiendo::after{content:"";display:inline-block;width:1.5px;height:1em;background:currentColor;margin-left:1px;vertical-align:-.15em;animation:uiCaret .8s steps(1) infinite}
.ui-marca,.ui-escaparate{--m-claro:color-mix(in srgb,var(--m) 40%,#FFF8EC);--m-suave:color-mix(in srgb,var(--m) 15%,#F6F1E7);--m-texto:color-mix(in srgb,var(--m) 60%,#1B1A17)}

/* el dedo: anticipa, toca y deja una onda */
.dedo{position:absolute;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(27,26,23,.2);border:2px solid rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(0,0,0,.22);z-index:20;opacity:0;transition:transform .48s cubic-bezier(.4,0,.2,1),opacity .3s ease,scale .15s ease;pointer-events:none}
.dedo.visible{opacity:1}
.dedo.pulsa{scale:.8}
.dedo::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(27,26,23,.4);opacity:0}
.dedo.pulsa::after{animation:dedoOnda .55s ease-out}

/* tienda: toldo, fachada y carta */
.ui-toldo{position:relative;flex-shrink:0;height:4.2em;background:repeating-linear-gradient(90deg,var(--m) 0 1.5em,var(--m-claro) 1.5em 3em);border-top:.45em solid var(--m-texto);transform-origin:top;transform:scaleY(0);transition:transform .6s var(--curva-ui);z-index:1}
.ui-toldo::after{content:"";position:absolute;left:0;right:0;top:100%;height:.75em;background:inherit;-webkit-mask:radial-gradient(circle at 50% 0,#000 .73em,transparent .76em) 0 0/1.5em .75em repeat-x;mask:radial-gradient(circle at 50% 0,#000 .73em,transparent .76em) 0 0/1.5em .75em repeat-x}
.ui-toldo.on{transform:none}
.ui-toldo-corto{height:1.5em;border-top-width:.3em}
.ui-toldo-corto::after{height:.5em;-webkit-mask-size:1em .5em;mask-size:1em .5em;background-size:auto}
.ui-fachada,.ui-letrero{display:flex;flex-direction:column;align-items:flex-start;gap:.1em;margin-top:-1.3em;position:relative;z-index:2}
.ui-insignia{width:3.3em;height:3.3em;border-radius:50%;background:var(--m);color:var(--m-sobre);display:grid;place-items:center;font-family:var(--fuente-titulo);font-weight:800;font-size:1em;border:.22em solid #F6F1E7;box-shadow:0 .3em .8em -.3em rgba(27,26,23,.45);margin-bottom:.35em;flex-shrink:0}
.ui-insignia-s{width:2.3em;height:2.3em;font-size:.78em;border-width:.12em;box-shadow:none;margin:0}
.ui-negocio{font-family:var(--fuente-titulo);font-weight:700;font-size:1.65em;letter-spacing:-.02em;line-height:1.05}
.ui-meta{font-size:.88em;color:#5F5848}
.ui-abierto{display:inline-flex;align-items:center;gap:.4em;margin-top:.4em;font-size:.78em;font-weight:600;color:#0f7a4f;background:rgba(22,163,106,.12);padding:.25em .7em;border-radius:999px}
.ui-abierto i{width:.5em;height:.5em;border-radius:50%;background:#16A36A;animation:uiLatido 2s ease-in-out infinite}
.ui-carta{background:#FFFDF8;border-radius:1.2em;padding:.85em 1em .3em;box-shadow:0 1px 2px rgba(27,26,23,.04),0 1em 2.2em -1.6em rgba(27,26,23,.35)}
.ui-seccion{display:flex;align-items:center;gap:.45em;font-family:var(--fuente-titulo);font-weight:700;font-size:1.12em;margin-bottom:.2em}
.ui-seccion::before{content:"";width:.25em;height:1em;border-radius:.2em;background:var(--m)}
.ui-plato,.ui-servicio{display:flex;align-items:center;gap:.4em;padding:.7em 0;border-top:1px dashed #E3DBC8;opacity:0;transform:translateY(.5em);transition:opacity .35s var(--curva-ui) calc(var(--i) * 90ms),transform .35s var(--curva-ui) calc(var(--i) * 90ms)}
.ui-carta.on .ui-plato,.ui-carta.on .ui-servicio{opacity:1;transform:none}
.ui-plato-nombre{font-weight:600;white-space:nowrap}
.ui-guia{flex:1;min-width:.8em;border-bottom:.15em dotted #C9BFA8;transform:translateY(.2em)}
.ui-precio{font-weight:650;font-variant-numeric:tabular-nums}
.ui-mas{position:relative;width:2.2em;height:2.2em;border-radius:50%;border:1.5px solid #CFC6B0;display:grid;place-items:center;flex-shrink:0;margin-left:.25em;transition:background .25s,border-color .25s,filter .15s}
.ui-mas svg{width:1.05em;height:1.05em}
.ui-mas.lleva{background:var(--m);border-color:var(--m);color:var(--m-sobre);animation:uiPop .35s var(--curva-ui)}
.ui-mas-cuenta{position:absolute;top:-.55em;right:-.55em;min-width:1.5em;height:1.5em;padding:0 .3em;border-radius:999px;background:#1B1A17;color:#F6F1E7;font-size:.7em;font-weight:700;display:none;place-items:center}
.ui-mas.lleva .ui-mas-cuenta{display:grid}
.ui-barra-pedido{position:absolute;left:.9em;right:.9em;bottom:1.4em;margin:0;display:flex;align-items:center;gap:.65em;background:#1B1A17;color:#F6F1E7;border-radius:1.2em;padding:.7em .85em;box-shadow:0 1em 2em -.8em rgba(27,26,23,.65);transform:translateY(170%);transition:transform .45s var(--curva-ui),filter .15s;z-index:3}
.ui-barra-pedido.on{transform:none}
.ui-bolsa{position:relative;width:2.2em;height:2.2em;border-radius:.6em;background:var(--m);color:var(--m-sobre);display:grid;place-items:center;flex-shrink:0}
.ui-bolsa svg{width:1.2em;height:1.2em}
.ui-barra-cuenta{position:absolute;top:-.5em;right:-.5em;width:1.5em;height:1.5em;border-radius:50%;background:#F6F1E7;color:#1B1A17;font-size:.7em;font-weight:800;display:grid;place-items:center}
.ui-barra-txt{display:flex;flex-direction:column;flex:1;line-height:1.2;min-width:0}
.ui-barra-txt strong{font-size:.95em}
.ui-barra-detalle{font-size:.78em;opacity:.72}
.ui-barra-total{display:inline-block;font-weight:700;font-variant-numeric:tabular-nums}

/* pantallas internas de la tienda: cabecera corta, comanda y tiquete */
.ui-cab-corta{flex-shrink:0}
.ui-volver{display:flex;align-items:center;gap:.55em;padding:.75em 1.1em .2em}
.ui-volver>svg{width:1.2em;height:1.2em}
.ui-volver>span:last-child{display:flex;flex-direction:column;line-height:1.15}
.ui-volver strong{font-family:var(--fuente-titulo);font-weight:700}
.ui-volver small{font-size:.76em;color:#736C5B}
.ui-comanda{position:relative;background:#fff;padding:.9em 1em 1.7em;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/1em 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/1em 100%}
.ui-comanda-cab{display:flex;justify-content:space-between;gap:.5em;font-size:.68em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5F5848;padding-bottom:.7em;border-bottom:1px dashed #E3DBC8;margin-bottom:.35em}
.ui-linea{display:flex;align-items:baseline;gap:.35em;padding:.42em 0;font-size:.92em}
.ui-linea span:first-child{white-space:nowrap}
.ui-linea span:last-child{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.ui-total{display:flex;justify-content:space-between;align-items:baseline;border-top:3px double #1B1A17;margin-top:.35em;padding-top:.55em}
.ui-total strong{font-family:var(--fuente-titulo);font-size:1.45em;font-variant-numeric:tabular-nums}
.ui-tiquete-hora{display:block;font-family:var(--fuente-titulo);font-weight:700;font-size:2.1em;letter-spacing:-.02em;line-height:1.1}
.ui-tiquete-fecha{display:block;font-size:.85em;color:#5F5848;margin-bottom:.35em}
.ui-sello{position:absolute;right:.9em;bottom:2.4em;font-family:var(--fuente-titulo);font-weight:800;font-size:1em;letter-spacing:.06em;text-transform:uppercase;padding:.2em .55em;border:.17em solid currentColor;border-radius:.4em;rotate:-9deg;opacity:0;transform:scale(1.7);transition:opacity .15s ease,transform .35s cubic-bezier(.3,1.5,.5,1);-webkit-mask:radial-gradient(circle,#000 70%,rgba(0,0,0,.6) 72%) 0 0/.28em .28em;mask:radial-gradient(circle,#000 70%,rgba(0,0,0,.6) 72%) 0 0/.28em .28em;pointer-events:none;z-index:2}
.ui-sello.cae{opacity:.94;transform:none}
.ui-sello-ok{color:#16A36A}
.ui-sello-marca{color:var(--m-texto)}
.ui-btn-wa{display:flex;align-items:center;justify-content:center;gap:.5em;background:#1FAF55;color:#fff;font-weight:700;font-size:.92em;border-radius:999px;padding:.85em 1em;margin-top:auto;transition:filter .15s}
.ui-btn-wa svg{width:1.25em;height:1.25em}
.ui-h{font-family:var(--fuente-titulo);font-weight:700;font-size:1.3em;letter-spacing:-.01em;line-height:1.15}
.ui-sub{font-size:.82em;color:#5F5848;margin-top:-.45em}
.ui-ayuda{font-size:.78em;color:#736C5B;margin-block:0}
.ui-ayuda-c{text-align:center}

/* pago por Bre-B */
.ui-pago{display:flex;flex-direction:column;gap:.6em;margin-top:.3em}
.ui-pago .ui-sub{margin-top:-.5em}
.ui-copiable{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.1em .6em;border:1.5px dashed #CFC6B0;border-radius:.8em;padding:.55em .7em;background:#FFFDF8;transition:background .3s,border-color .3s}
.ui-copiable-et{grid-column:1;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#736C5B}
.ui-copiable-val{grid-column:1;font-weight:700;font-size:1.1em;font-variant-numeric:tabular-nums}
.ui-copiar{grid-column:2;grid-row:1/3;background:#1B1A17;color:#F6F1E7;font-size:.78em;font-weight:600;padding:.5em .75em;border-radius:.6em;transition:background .25s,filter .15s}
.ui-copiable.copiado{background:rgba(22,163,106,.1);border-color:#16A36A}
.ui-copiable.copiado .ui-copiar{background:#16A36A;color:#fff}
.ui-notif{position:absolute;left:.7em;right:.7em;top:calc(26px + .5em);margin:0;display:flex;align-items:center;gap:.6em;background:#fff;border-radius:1em;padding:.65em .75em;box-shadow:0 .8em 1.6em -.6em rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.04);opacity:0;transform:translateY(-130%);transition:transform .5s var(--curva-ui),opacity .3s ease;z-index:8}
.ui-notif.on{opacity:1;transform:none}
.ui-notif-banco{top:auto;bottom:1.3em;transform:translateY(130%)}
.ui-notif-ico{width:2.1em;height:2.1em;border-radius:.6em;background:#3B4CCA;color:#fff;display:grid;place-items:center;font-family:var(--fuente-titulo);font-weight:800;flex-shrink:0}
.ui-notif-ico-banco{background:#2E3440}
.ui-notif-ico svg{width:1.15em;height:1.15em}
.ui-notif>span:last-child{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ui-notif strong{font-size:.82em}
.ui-notif small{font-size:.75em;color:#54565f}

/* WhatsApp */
.ui-wa{background:#EFE7DD;gap:0}
.ui-wa-cab{display:flex;align-items:center;gap:.5em;background:#00735E;color:#fff;padding:.6em .8em;flex-shrink:0}
.ui-wa-cab>svg{width:1.2em;height:1.2em}
.ui-wa-av{width:2.3em;height:2.3em;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.78em;flex-shrink:0}
.ui-wa-cab>span:last-child{display:flex;flex-direction:column;line-height:1.15}
.ui-wa-cab small{font-size:.74em;opacity:.82}
.ui-wa-cuerpo{flex:1;padding:.8em;display:flex;flex-direction:column;gap:.5em;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:1.1em 1.1em}
.ui-wa-fecha{align-self:center;font-size:.68em;background:#fff;padding:.25em .7em;border-radius:.5em;color:#54656f;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.ui-burbuja-out,.ui-burbuja-in{max-width:86%;padding:.5em .65em .35em;border-radius:.75em;font-size:.88em;line-height:1.4;box-shadow:0 1px 1px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:.15em}
.ui-burbuja-out{align-self:flex-end;background:#D9FDD3;border-top-right-radius:.2em;transition:opacity .25s}
.ui-burbuja-out:has(.ui-escribe:empty){opacity:0}
.ui-burbuja-in{align-self:flex-start;background:#fff;border-top-left-radius:.2em;opacity:0;transform:translateY(.4em);transition:opacity .35s var(--curva-ui),transform .35s var(--curva-ui)}
.ui-burbuja-in.on{opacity:1;transform:none}
.ui-hora{align-self:flex-end;display:inline-flex;align-items:center;gap:.25em;font-size:.68em;color:#667781;white-space:nowrap}
.ui-hora svg{width:1.3em;height:1em;color:#8696a0;transition:color .3s}
.ui-burbuja-out.leido .ui-hora svg{color:#53bdeb}
.ui-burbuja-in .ui-hora{align-self:flex-end}
.ui-escribiendo{align-self:flex-start;background:#fff;border-radius:.75em;padding:.6em .7em;display:none;gap:.25em;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.ui-escribiendo.on{display:flex}
.ui-escribiendo i,.ui-leyendo i{width:.4em;height:.4em;border-radius:50%;background:#8696a0;animation:uiPunto 1s ease-in-out infinite}
.ui-escribiendo i:nth-child(2),.ui-leyendo i:nth-child(2){animation-delay:.15s}
.ui-escribiendo i:nth-child(3),.ui-leyendo i:nth-child(3){animation-delay:.3s}
.ui-wa-entrada{display:flex;align-items:center;gap:.5em;padding:.5em .6em 0;flex-shrink:0}
.ui-wa-entrada>span:first-child{flex:1;background:#fff;border-radius:999px;padding:.6em .9em;font-size:.82em;color:#8696a0}
.ui-wa-mic{width:2.4em;height:2.4em;border-radius:50%;background:#00735E;color:#fff;display:grid;place-items:center}
.ui-wa-mic svg{width:1.1em;height:1.1em}

/* panel del dueño */
.ui-panel,.ui-onb{background:#FFFDF8;color:#202124}
.ui-panel-cab{display:flex;align-items:center;justify-content:space-between;padding:.5em 1.1em;flex-shrink:0}
.ui-veci{display:inline-flex;align-items:center;gap:.22em;font-family:var(--fuente-titulo);font-weight:800;font-size:1.25em;color:#202124;letter-spacing:-.035em}
.ui-veci::before{content:"";width:1.15em;height:1em;background:url("../img/simbolo-veci.svg") center/contain no-repeat}
.ui-cenefa{height:.35em;flex-shrink:0;margin-top:-.7em;background:repeating-linear-gradient(90deg,var(--m) 0 1em,var(--m-claro) 1em 2em)}
.ui-panel-cuerpo{display:flex;flex-direction:column;gap:.6em;flex:1;min-height:0}
.ui-col-titulo{font-size:.7em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#54565f}
.ui-tarjeta{position:relative;background:#fff;border:1px solid #E9E4D8;border-radius:1em;padding:.8em .9em;display:flex;flex-direction:column;gap:.35em}
.ui-tarjeta-fila{display:flex;justify-content:space-between;align-items:baseline;gap:.5em}
.ui-tarjeta-total{font-weight:700;font-variant-numeric:tabular-nums}
.ui-tarjeta-meta{display:flex;align-items:center;gap:.35em;font-size:.78em;color:#54565f}
.ui-tarjeta-meta svg{width:1.1em;height:1.1em}
.ui-tarjeta .ui-sello{bottom:3.6em}
.ui-tiquete{padding-bottom:3.6em}
.ui-tiquete .ui-sello{bottom:1.5em}
.ui-btn-sello{display:flex;justify-content:center;align-items:center;background:#3B4CCA;color:#fff;font-weight:700;font-size:.9em;border-radius:.7em;padding:.75em;margin-top:.25em;transition:background .3s,filter .15s}
.ui-btn-sello.hecho{background:#16A36A}
.ui-comision{align-self:flex-start;font-size:.8em;font-weight:700;color:#0f7a4f;background:rgba(22,163,106,.12);padding:.3em .75em;border-radius:999px;opacity:0;transform:translateY(.3em);transition:opacity .4s,transform .4s var(--curva-ui)}
.ui-comision.on{opacity:1;transform:none}
.ui-nav{display:flex;justify-content:space-around;margin-top:auto;border-top:1px solid #E9E4D8;padding:.5em 0 0;flex-shrink:0;background:#FFFDF8}
.ui-nav span{display:flex;flex-direction:column;align-items:center;gap:.15em;font-size:.66em;color:#8a8d97;font-weight:600}
.ui-nav svg{width:1.9em;height:1.9em}
.ui-nav .activo{color:#3B4CCA}

/* alta del negocio: cámara, lectura, catálogo, color */
.ui-onb-cab{display:flex;justify-content:space-between;align-items:center;padding-top:.5em}
.ui-onb-cab small{font-size:.75em;color:#54565f}
.ui-onb-pasos{display:flex;gap:.35em;margin-top:-.25em}
.ui-onb-pasos span{flex:1;font-size:.68em;font-weight:700;color:#8a8d97;padding-top:.45em;border-top:.3em solid #E9E4D8}
.ui-onb-pasos .hecho{border-color:#16A36A;color:#0f7a4f}
.ui-onb-pasos .activo{border-color:#3B4CCA;color:#3B4CCA}
.ui-onb .ui-btn-sello{margin-top:auto}
.ui-camara-vista{background:#0d0d0f;gap:0}
.ui-camara{position:relative;flex:1;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#45433d,#151515)}
.ui-pizarra{width:76%;background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.06),transparent 60%),#2D3B33;border:.5em solid #8A5A3C;border-radius:.3em;box-shadow:0 1em 2em rgba(0,0,0,.5);padding:1em .85em 1.2em;display:flex;flex-direction:column;gap:.6em;color:#EDEBE3;font-family:var(--fuente-titulo);font-weight:600;font-size:.86em;rotate:-2deg;transition:transform .4s var(--curva-ui)}
.ui-pizarra span{display:flex;justify-content:space-between;gap:.4em}
.ui-pizarra b{font-weight:600;font-variant-numeric:tabular-nums}
.ui-pizarra .ui-tiza-t{justify-content:center;font-size:1.25em;font-weight:800;border-bottom:1px dashed rgba(237,235,227,.4);padding-bottom:.45em}
.ui-encuadre{position:absolute;inset:10% 7%;background:linear-gradient(#fff,#fff) top left/1.6em 2px no-repeat,linear-gradient(#fff,#fff) top left/2px 1.6em no-repeat,linear-gradient(#fff,#fff) top right/1.6em 2px no-repeat,linear-gradient(#fff,#fff) top right/2px 1.6em no-repeat,linear-gradient(#fff,#fff) bottom left/1.6em 2px no-repeat,linear-gradient(#fff,#fff) bottom left/2px 1.6em no-repeat,linear-gradient(#fff,#fff) bottom right/1.6em 2px no-repeat,linear-gradient(#fff,#fff) bottom right/2px 1.6em no-repeat;opacity:.85}
.ui-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.ui-camara.flash .ui-flash{animation:uiFlash .4s ease-out}
.ui-camara.tomada .ui-pizarra{transform:scale(.9)}
.ui-camara.tomada .ui-encuadre{opacity:0;transition:opacity .3s}
.ui-camara-pie{height:6.5em;display:grid;place-items:center;flex-shrink:0;background:#0d0d0f}
.ui-obturador{width:3.8em;height:3.8em;border-radius:50%;background:#fff;box-shadow:0 0 0 .28em #0d0d0f,0 0 0 .48em #fff;transition:filter .15s}
.ui-foto-leida{position:relative;align-self:center;width:60%;overflow:hidden;border-radius:.6em;background:#2a2a2a;padding:.45em}
.ui-foto-leida .ui-pizarra{width:100%;font-size:.6em;rotate:0deg;border-width:.4em;box-shadow:none}
.ui-escaner{position:absolute;left:0;right:0;top:0;height:2px;background:#7A85DB;box-shadow:0 0 .8em .35em rgba(59,76,202,.6);opacity:0}
.ui-foto-leida.leyendo .ui-escaner{opacity:1;animation:uiEscaner 1.8s ease-in-out infinite alternate}
.ui-leyendo{align-self:center;display:flex;align-items:baseline;gap:.1em;font-size:.85em;color:#3B4CCA;font-weight:600;opacity:0;transition:opacity .3s}
.ui-leyendo i{background:#3B4CCA;width:.3em;height:.3em}
.ui-leyendo.on{opacity:1}
.ui-onb-lista{display:flex;flex-direction:column;gap:.45em}
.ui-item{display:flex;align-items:center;gap:.5em;flex-wrap:wrap;background:#fff;border:1px solid #E9E4D8;border-radius:.8em;padding:.5em .7em;opacity:0;transform:translateY(.5em);transition:opacity .35s var(--curva-ui) calc(var(--i) * 250ms),transform .35s var(--curva-ui) calc(var(--i) * 250ms),border-color .3s,background .3s}
.ui-onb-lista.on .ui-item{opacity:1;transform:none}
.ui-item>span:first-child{flex:1;font-weight:600;font-size:.92em}
.ui-campo{min-width:5.4em;min-height:1.9em;text-align:right;border:1px solid #D8D3C6;border-radius:.5em;padding:.28em .5em;font-variant-numeric:tabular-nums;font-weight:600;font-size:.88em;background:#FFFDF8;transition:border-color .3s,filter .15s}
.ui-item-falta{border-color:#F2B632;background:#FFF8E6}
.ui-item-falta .ui-campo{border-color:#F2B632;background:#fff}
.ui-falta-nota{width:100%;font-size:.7em;color:#8a5a00;font-weight:600}
.ui-item-ok{display:none;width:1.4em;height:1.4em;border-radius:50%;background:#16A36A;color:#fff;place-items:center}
.ui-item-ok svg{width:.85em;height:.85em}
.ui-item-falta.completo{border-color:#E9E4D8;background:#fff}
.ui-item-falta.completo .ui-falta-nota{display:none}
.ui-item-falta.completo .ui-item-ok{display:grid}
.ui-item-falta.completo .ui-campo{border-color:#D8D3C6}
.ui-escaparate{--m:#3B4CCA;--m-sobre:#FFFDF8;transition:--m .45s ease;background:#F6F1E7;border:1px solid #E9E4D8;border-radius:1em;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;padding-bottom:.75em}
.ui-escaparate.mostaza{--m:#F2B632;--m-sobre:#1B1A17}
.ui-escaparate .ui-toldo{height:2.6em;align-self:stretch;border-top-width:.3em}
.ui-escaparate .ui-insignia{margin:-1em 0 .25em .8em;width:2.6em;height:2.6em;font-size:.85em;z-index:2}
.ui-escaparate strong{margin-left:.85em;font-family:var(--fuente-titulo);font-weight:700;font-size:1.12em}
.ui-escaparate small{margin-left:.85em;font-size:.72em;color:#736C5B}
.ui-colores{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}
.ui-color{display:flex;align-items:center;gap:.35em;font-size:.7em;font-weight:600;padding:.4em .45em;border:1.5px solid #E9E4D8;border-radius:.6em;background:#fff;white-space:nowrap;transition:border-color .2s,box-shadow .2s,filter .15s}
.ui-color i{width:1.35em;height:1.35em;border-radius:50%;background:var(--c);flex-shrink:0}
.ui-color.activo{border-color:#202124;box-shadow:inset 0 0 0 1px #202124}
.ui-letrero .ui-negocio{font-size:1.9em}
.ui-letrero,.ui-enlace-tienda{opacity:0;transform:translateY(.6em);transition:opacity .45s var(--curva-ui),transform .45s var(--curva-ui)}
.ui-letrero.on,.ui-enlace-tienda.on{opacity:1;transform:none}
.ui-enlace-tienda{display:flex;flex-direction:column;gap:.1em;border:1.5px dashed var(--m-texto);border-radius:.8em;padding:.6em .8em;background:#FFFDF8}
.ui-enlace-tienda small{font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#736C5B}
.ui-enlace-tienda strong{color:var(--m-texto);font-size:1em;overflow-wrap:anywhere}

/* app bancaria genérica (sin marca real) */
.ui-banco{background:#F4F5F7;color:#1f2329}
.ui-banco-cab{display:flex;align-items:center;gap:.5em;background:#2E3440;color:#fff;padding:.65em 1em;flex-shrink:0}
.ui-banco-cab svg{width:1.2em;height:1.2em}
.ui-banco-cuerpo{display:flex;flex-direction:column;gap:.3em;padding-top:.4em}
.ui-et{font-size:.74em;font-weight:600;color:#5b6170;margin-top:.45em}
.ui-banco .ui-campo{text-align:left;background:#fff;min-height:2.7em;display:flex;align-items:center;padding:.5em .7em;font-size:1em;border-color:#d5d9e0}
.ui-pegado{opacity:0;transition:opacity .25s}
.ui-campo-llave.pegado{border-color:#2E3440}
.ui-campo-llave.pegado .ui-pegado{opacity:1}
.ui-btn-banco{margin-top:.9em;background:#2E3440;color:#fff;font-weight:700;text-align:center;border-radius:.7em;padding:.8em;transition:filter .15s}
.ui-banco-ok{position:absolute;inset:26px 0 0;background:#F4F5F7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35em;opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:4}
.ui-banco-ok.on{opacity:1}
.ui-banco-check{width:4.2em;height:4.2em;border-radius:50%;background:#16A36A;color:#fff;display:grid;place-items:center;transform:scale(.4);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.ui-banco-ok.on .ui-banco-check{transform:none}
.ui-banco-check svg{width:2em;height:2em}
.ui-banco-ok strong{font-family:var(--fuente-titulo);font-weight:700;font-size:1.4em}
.ui-banco-ok small{color:#5b6170;font-size:.85em}

/* copiloto */
.ui-recuperado{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--curva-ui)}
.ui-recuperado>div{overflow:hidden;min-height:0}
.ui-recuperado.on{grid-template-rows:1fr}
.ui-recup-caja{display:flex;flex-direction:column;gap:.05em;background:#16A36A;color:#fff;border-radius:1em;padding:.65em .9em}
.ui-recup-caja small{font-size:.72em;font-weight:600;opacity:.9}
.ui-recup-caja strong{display:inline-block;align-self:flex-start;font-family:var(--fuente-titulo);font-weight:700;font-size:1.6em;font-variant-numeric:tabular-nums;line-height:1.1}
.ui-recup-caja span{font-size:.66em;opacity:.88}
.ui-tabs{display:flex;gap:.35em;overflow:hidden;flex-shrink:0}
.ui-tabs span{font-size:.72em;font-weight:600;padding:.4em .7em;border-radius:999px;background:#F1EEE6;color:#54565f;white-space:nowrap}
.ui-tabs .activa{background:#3B4CCA;color:#fff}
.ui-clientes{display:flex;flex-direction:column}
.ui-cliente{display:flex;align-items:center;gap:.6em;padding:.6em 0;border-bottom:1px solid #EFEBE2;opacity:0;transform:translateY(.4em);transition:opacity .35s var(--curva-ui) calc(var(--i) * 160ms),transform .35s var(--curva-ui) calc(var(--i) * 160ms),filter .15s}
.ui-clientes.on .ui-cliente{opacity:1;transform:none}
.ui-av{width:2.4em;height:2.4em;border-radius:50%;background:color-mix(in srgb,var(--c) 18%,#fff);color:color-mix(in srgb,var(--c) 70%,#1B1A17);display:grid;place-items:center;font-weight:700;font-size:.78em;flex-shrink:0}
.ui-av-l{width:3em;height:3em;font-size:.9em}
.ui-cliente-txt{flex:1;display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ui-cliente-txt strong{font-size:.92em}
.ui-cliente-txt small{font-size:.72em;color:#54565f}
.ui-cliente>svg{width:1.1em;height:1.1em;color:#8a8d97}
.ui-respondio{display:none;font-size:.66em;font-weight:700;color:#0f7a4f;background:rgba(22,163,106,.12);padding:.2em .55em;border-radius:999px}
.ui-cliente.respondio .ui-respondio{display:inline-block;animation:uiPop .35s var(--curva-ui)}
.ui-volver-panel{display:flex;align-items:center;gap:.25em;font-size:.78em;color:#3B4CCA;font-weight:600}
.ui-volver-panel svg{width:1.2em;height:1.2em}
.ui-ficha-cab{display:flex;align-items:center;gap:.7em}
.ui-ficha-cab>span:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:.25em}
.ui-chip-rojo{font-size:.68em;font-weight:700;color:#9c2c17;background:rgba(232,69,44,.12);padding:.2em .6em;border-radius:999px}
.ui-datos{margin:0;display:flex;flex-direction:column;border:1px solid #E9E4D8;border-radius:.9em;background:#fff}
.ui-datos div{display:flex;justify-content:space-between;gap:.5em;padding:.6em .8em;border-top:1px solid #EFEBE2;font-size:.82em}
.ui-datos div:first-child{border-top:0}
.ui-datos dt{color:#54565f}
.ui-datos dd{margin:0;font-weight:600;text-align:right}
.ui-ok{color:#0f7a4f}
.ui-wa-fondo{background:#EFE7DD;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:1.1em 1.1em;border-radius:1em;padding:1em .8em;display:flex;flex-direction:column;min-height:8em}
.ui-editable{outline:1.5px dashed rgba(0,115,94,.5);outline-offset:.25em}
.ui-nota-baja{font-size:.7em;color:#54565f;opacity:0;transition:opacity .4s}
.ui-nota-baja.on{opacity:1}

/* reserva de una cita */
.ui-servicio-txt{flex:1;display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ui-servicio-txt strong{font-weight:600}
.ui-servicio-txt small{font-size:.76em;color:#736C5B}
.ui-chip-hoy{font-size:.62em;font-weight:700;color:#0f7a4f;background:rgba(22,163,106,.12);padding:.3em .55em;border-radius:999px;white-space:nowrap}
.ui-servicio>svg{width:1.1em;height:1.1em;color:#736C5B}
.ui-resumen-servicio{display:flex;flex-direction:column;background:var(--m-suave);border-radius:.8em;padding:.55em .8em;line-height:1.25}
.ui-resumen-servicio strong{font-size:.92em}
.ui-resumen-servicio small{font-size:.75em;color:#5F5848}
.ui-etapa{display:flex;align-items:center;gap:.5em;font-family:var(--fuente-titulo);font-weight:700;font-size:1.12em}
.ui-etapa-num{width:1.65em;height:1.65em;border-radius:50%;background:var(--m);color:var(--m-sobre);display:grid;place-items:center;font-size:.78em}
.ui-personas{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.ui-persona{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.25em;background:#FFFDF8;border:1.5px solid #E3DBC8;border-radius:.9em;padding:.8em .4em;transition:border-color .25s,background .25s,filter .15s}
.ui-persona strong{font-size:.9em}
.ui-persona small{font-size:.68em;color:#736C5B}
.ui-persona.activa{border-color:var(--m-texto);background:var(--m-suave)}
.ui-persona-ok{position:absolute;top:.45em;right:.45em;width:1.4em;height:1.4em;border-radius:50%;background:var(--m);color:var(--m-sobre);display:grid;place-items:center;opacity:0;transform:scale(.5);transition:opacity .25s,transform .3s cubic-bezier(.3,1.5,.5,1)}
.ui-persona-ok svg{width:.85em;height:.85em}
.ui-persona.activa .ui-persona-ok{opacity:1;transform:none}
.ui-hojas{display:flex;gap:.45em}
.ui-hoja{flex:1;display:flex;flex-direction:column;align-items:center;background:#FFFDF8;border:1px solid #E3DBC8;border-radius:.6em;padding:.55em 0 .35em;box-shadow:inset 0 .3em 0 var(--m-claro);transition:background .25s,color .25s,border-color .25s,filter .15s}
.ui-hoja small{font-size:.62em;text-transform:uppercase;font-weight:700;color:#736C5B;letter-spacing:.04em}
.ui-hoja strong{font-family:var(--fuente-titulo);font-weight:700;font-size:1.55em;line-height:1.1}
.ui-hoja.activa{background:var(--m);color:var(--m-sobre);border-color:var(--m);box-shadow:none}
.ui-hoja.activa small{color:inherit;opacity:.85}
.ui-horas{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}
.ui-hora-op{text-align:center;font-size:.74em;font-weight:600;padding:.6em .2em;border:1.5px solid #E3DBC8;border-radius:999px;background:#FFFDF8;font-variant-numeric:tabular-nums;white-space:nowrap;transition:background .25s,color .25s,border-color .25s,filter .15s}
.ui-hora-op.ocupada{color:#B5AD9A;text-decoration:line-through;background:transparent;border-style:dashed}
.ui-hora-op.activa{background:var(--m);border-color:var(--m);color:var(--m-sobre)}
.ui-turno{display:flex;flex-direction:column;background:var(--m-suave);border-radius:1em;padding:.9em 1em;gap:.1em;margin-top:.3em}
.ui-turno small{font-size:.68em;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--m-texto)}
.ui-turno strong{font-family:var(--fuente-titulo);font-weight:700;font-size:2.3em;letter-spacing:-.02em;line-height:1.05}
.ui-turno span{font-size:.84em;color:#5F5848}
.ui-anticipo{font-size:.78em;color:#5F5848;border:1px dashed #CFC6B0;border-radius:.7em;padding:.5em .7em}

/* mostrador de la tienda: lector, visor de registradora, báscula, fiado */
.ui-lector{position:relative;display:flex;gap:.4em}
.ui-lector-campo{position:relative;flex:1;display:flex;align-items:center;gap:.45em;border:1.5px solid #3B4CCA;border-radius:.7em;padding:.5em .6em;background:#fff;box-shadow:0 0 0 .2em rgba(59,76,202,.12);min-width:0}
.ui-lector-campo svg{width:1.2em;height:1.2em;color:#54565f}
.ui-lector-txt{font-variant-numeric:tabular-nums;font-weight:600;font-size:.9em;white-space:nowrap}
.ui-lector-ph{font-size:.85em;color:#8a8d97}
.ui-lector-txt:not(:empty)+.ui-lector-ph{display:none}
.ui-lector-btn{display:grid;place-items:center;background:#202124;color:#fff;font-size:.8em;font-weight:700;border-radius:.7em;padding:0 .8em}
.ui-sugerencia{position:absolute;left:0;right:0;top:calc(100% + .3em);display:flex;flex-direction:column;background:#fff;border:1px solid #E9E4D8;border-radius:.7em;padding:.55em .7em;box-shadow:0 .8em 1.6em -.8em rgba(0,0,0,.35);opacity:0;transform:translateY(-.3em);transition:opacity .25s,transform .25s var(--curva-ui),filter .15s;z-index:5;line-height:1.25}
.ui-sugerencia.on{opacity:1;transform:none}
.ui-sugerencia strong{font-size:.9em}
.ui-sugerencia small{font-size:.74em;color:#54565f}
.ui-venta{padding-bottom:1.5em}
.ui-venta-linea{display:none;padding:.2em .3em;margin:0 -.3em;border-radius:.4em}
.ui-venta-linea.on{display:block}
.ui-venta-linea.brilla{animation:uiBrilla 1.2s ease-out}
.ui-venta-linea .ui-linea{padding:.25em 0 0}
.ui-venta-det{display:flex;justify-content:space-between;font-size:.74em;color:#736C5B;padding-bottom:.3em}
.ui-venta-cant{display:inline-block;font-weight:700;color:#202124;font-variant-numeric:tabular-nums}
.ui-venta-sub{display:inline-block}
.ui-visor{display:flex;justify-content:space-between;align-items:baseline;background:#202124;color:#9AA0B4;border-radius:.8em;padding:.6em .9em;box-shadow:inset 0 0 0 .2em #2E3038}
.ui-visor span{font-size:.7em;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ui-visor strong{display:inline-block;font-family:var(--fuente-titulo);font-weight:700;font-size:1.7em;color:#3ED18B;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.ui-bascula{position:absolute;left:0;right:0;bottom:0;margin:0;display:flex;flex-direction:column;gap:.15em;background:#fff;border-radius:1.2em 1.2em 0 0;padding:1em 1.1em 1.6em;box-shadow:0 -1em 2em -1em rgba(0,0,0,.3);transform:translateY(105%);transition:transform .45s var(--curva-ui);z-index:6}
.ui-bascula::before{content:"";align-self:center;width:2.6em;height:.3em;border-radius:1em;background:#D8D3C6;margin-bottom:.4em}
.ui-bascula.on{transform:none}
.ui-bascula strong{font-family:var(--fuente-titulo);font-size:1.15em}
.ui-bascula small{font-size:.78em;color:#54565f}
.ui-pesos{display:grid;grid-template-columns:repeat(4,1fr);gap:.35em;margin-top:.6em}
.ui-pesos span{text-align:center;font-weight:700;font-size:.85em;padding:.65em 0;border:1.5px solid #D8D3C6;border-radius:.7em;background:#FFFDF8;transition:background .25s,color .25s,border-color .25s,filter .15s}
.ui-pesos span.activo{background:#3B4CCA;border-color:#3B4CCA;color:#fff}
.ui-teclas{display:grid;grid-template-columns:repeat(4,1fr);gap:.35em}
.ui-teclas span{text-align:center;font-size:.76em;font-weight:700;padding:.7em 0;border-radius:.6em;background:#F1EEE6;color:#54565f;box-shadow:inset 0 -.18em 0 rgba(0,0,0,.08);transition:background .25s,color .25s,filter .15s}
.ui-teclas span.activa{background:#202124;color:#fff;box-shadow:inset 0 -.18em 0 #000}
.ui-fiar{display:flex;flex-direction:column;gap:.35em;opacity:0;transform:translateY(.4em);transition:opacity .35s var(--curva-ui),transform .35s var(--curva-ui)}
.ui-fiar.on{opacity:1;transform:none}
.ui-fiar-cliente{display:flex;align-items:center;gap:.6em;background:#fff;border:1.5px solid #E9E4D8;border-radius:.8em;padding:.5em .65em;transition:border-color .25s,background .25s,filter .15s}
.ui-fiar-cliente.activa{border-color:#3B4CCA;background:rgba(59,76,202,.06)}
.ui-fiar-ok{width:1.4em;height:1.4em;border-radius:50%;background:#3B4CCA;color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.5);transition:opacity .25s,transform .3s cubic-bezier(.3,1.5,.5,1)}
.ui-fiar-ok svg{width:.85em;height:.85em}
.ui-fiar-cliente.activa .ui-fiar-ok{opacity:1;transform:none}
.ui-btn-cobrar{display:flex;justify-content:center;align-items:center;background:#16A36A;color:#fff;font-weight:700;font-size:.9em;border-radius:.7em;padding:.8em;margin-top:auto;transition:filter .15s}
.ui-sub-panel{font-size:.74em;color:#54565f}
.ui-saldo{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.15em .6em;background:#fff;border:1px solid #E9E4D8;border-radius:.9em;padding:.65em .85em}
.ui-saldo>small:first-child{grid-column:1/-1;font-size:.7em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#54565f}
.ui-debe{grid-column:1/-1;display:inline-block;justify-self:start;font-family:var(--fuente-titulo);font-weight:700;font-size:1.7em;font-variant-numeric:tabular-nums;line-height:1.1}
.ui-limite-barra{height:.45em;border-radius:1em;background:#F1EEE6;overflow:hidden;align-self:center}
.ui-limite{display:block;height:100%;width:23%;background:#F2B632;border-radius:1em;transition:width .8s var(--curva-ui)}
.ui-limite.sube{width:39.5%}
.ui-saldo>small:last-child{font-size:.7em;color:#54565f}
.ui-libreta{position:relative;background:#FFFEF9;border:1px solid #E9E4D8;border-radius:.4em;background-image:linear-gradient(to right,transparent 3.4em,#E8452C 3.4em,#E8452C calc(3.4em + 1px),transparent calc(3.4em + 1px)),repeating-linear-gradient(to bottom,transparent 0 calc(2.2em - 1px),#BFD3EE calc(2.2em - 1px) 2.2em);padding-top:.3em}
.ui-renglon{display:grid;grid-template-columns:3.4em 1fr auto;grid-template-rows:auto;align-items:end;column-gap:.5em;height:2.2em;padding-right:.6em;font-size:.82em}
.ui-renglon-fecha{font-size:.82em;color:#9c2c17;padding-left:.45em;align-self:center;font-weight:600}
.ui-renglon-concepto{white-space:nowrap;overflow:hidden;padding-bottom:.35em}
.ui-renglon-monto{font-variant-numeric:tabular-nums;font-weight:600;padding-bottom:.35em}
.ui-renglon-saldo{grid-column:2/-1;grid-row:2;display:none}
.ui-renglon-nuevo{opacity:0;transition:opacity .3s}
.ui-renglon-nuevo.on{opacity:1}
@keyframes uiBrilla{0%{background:rgba(242,182,50,.45)}100%{background:transparent}}

@keyframes uiPop{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes uiLatido{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes uiCaret{50%{opacity:0}}
@keyframes uiPunto{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-.2em)}}
@keyframes uiFlash{0%{opacity:.95}100%{opacity:0}}
@keyframes uiEscaner{from{top:0}to{top:calc(100% - 2px)}}
@keyframes dedoOnda{from{opacity:.8;transform:scale(.6)}to{opacity:0;transform:scale(2.1)}}

/* la lista de pasos al lado del teléfono */
.escena-guion{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;max-width:420px}
.escena-guion button{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;border-radius:12px;padding:10px 12px 13px;font:inherit;font-size:14.5px;line-height:1.35;color:var(--texto-suave);cursor:pointer;transition:background .2s ease,color .2s ease}
.escena-guion button:hover{background:var(--bg-suave);color:var(--texto)}
.escena-guion-num{width:25px;height:25px;border-radius:50%;border:1.5px solid var(--borde);display:grid;place-items:center;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;flex-shrink:0;transition:background .25s,border-color .25s,color .25s}
.escena-guion button.activo{color:var(--texto);font-weight:600}
.escena-guion button.activo .escena-guion-num{background:var(--sello-solido);border-color:var(--sello);color:#fff}
.escena-guion button.hecho .escena-guion-num{border-color:var(--caja-texto);color:var(--caja-texto)}
.escena-guion-barra{position:absolute;left:49px;right:12px;bottom:5px;height:2px;border-radius:2px;background:var(--borde);overflow:hidden;opacity:0;transition:opacity .25s}
.escena-guion button.activo .escena-guion-barra{opacity:1}
.escena-guion-barra::after{content:"";position:absolute;inset:0;background:var(--sello-solido);transform-origin:left;transform:scaleX(var(--p,0))}
.escena-pausada .escena-guion button.activo .escena-guion-barra::after{background:var(--texto-tenue)}
.copiloto-demo .escena-guion{margin-bottom:24px}
.copiloto-demo .escena-guion button{color:#C9CCD6}
.copiloto-demo .escena-guion button:hover{background:rgba(255,253,248,.06);color:var(--tiquete)}
.copiloto-demo .escena-guion button.activo{color:var(--tiquete)}
.copiloto-demo .escena-guion-num{border-color:rgba(255,253,248,.28)}
.copiloto-demo .escena-guion button.activo .escena-guion-num{background:var(--sello-claro);border-color:var(--sello-claro);color:var(--carbon)}
.copiloto-demo .escena-guion-barra{background:rgba(255,253,248,.14)}
.copiloto-demo .escena-guion-barra::after{background:var(--sello-claro)}
.copiloto-tel{display:flex;justify-content:center}

/* hero: barra de historias bajo el teléfono */
.escena-hero{flex-direction:column;align-items:center}
.hero-tel-marco{position:relative;display:flex;justify-content:center}
.escena-hero .escena-control{width:290px;margin-top:22px}
.escena-texto{margin:0 0 10px;text-align:center;font-size:14px;font-weight:600;color:var(--texto);min-height:1.4em}
.escena-guion--historia{flex-direction:row;gap:5px;margin:0;max-width:none}
.escena-guion--historia li{flex:1}
.escena-guion--historia button{padding:8px 0;border-radius:4px}
.escena-guion--historia button:hover{background:none}
.escena-guion--historia .escena-guion-num,.escena-guion--historia .escena-guion-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.escena-guion--historia .escena-guion-barra{position:relative;left:auto;right:auto;bottom:auto;display:block;width:100%;height:3px;opacity:1}
.escena-guion--historia button:hover .escena-guion-barra{background:var(--texto-tenue)}
.escena-hero .chip-flotante{animation:none;opacity:0;transform:translateY(8px) scale(.96);transition:opacity .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1)}
.escena-hero .chip-flotante.on{opacity:1;transform:none}
@media (min-width:901px){.escena-hero .chip-pedido{top:30%;left:-30%}.escena-hero .chip-pago{bottom:16%;right:-26%}}

/* bloque de escena en las páginas de industria */
.escena-bloque{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:center}
.escena-bloque-tel{display:flex;justify-content:center}
@media (max-width:900px){
  .escena-bloque{grid-template-columns:1fr;gap:36px}
  .copiloto-demo{grid-template-columns:1fr}
}
@media (max-width:460px){
  .hero-tel-marco{flex-direction:column;align-items:center;gap:10px}
  .hero-tel-marco .telefono{order:1}
  .escena-hero .escena-control{width:100%;max-width:290px}
  .escena-hero .chip-flotante{display:none}
  .telefono-escena{width:248px}
}
@media (prefers-reduced-motion: reduce){
  .ui *,.ui *::before,.ui *::after{transition:none!important;animation:none!important}
  .escena-guion-barra{display:none}
}

/* índice del blog: cabecera alineada a la izquierda, filtro por tema,
   portada para la guía más reciente y filas editoriales (toda la fila es enlace). */
.blog-cabeza{padding-top:clamp(112px,14vw,170px);padding-bottom:28px}
.blog-sobre{margin:0 0 12px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sello)}
.blog-cabeza h1{font-size:clamp(36px,4.6vw,64px);line-height:1.02;letter-spacing:-.03em;max-width:820px;margin:0 0 16px;text-wrap:balance}
.blog-bajada{font-size:17px;line-height:1.6;color:var(--texto-suave);max-width:600px;margin:0 0 28px}
.blog-filtros{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 6px}
.blog-filtros::-webkit-scrollbar{display:none}
.blog-filtro{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--borde);background:var(--superficie);color:var(--texto);font:600 14px var(--fuente-texto);cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.blog-filtro span{font-size:12px;font-weight:700;color:var(--texto-tenue);font-variant-numeric:tabular-nums}
.blog-filtro:hover{border-color:var(--texto-tenue)}
.blog-filtro[aria-pressed="true"]{background:var(--texto);border-color:var(--texto);color:var(--bg)}
.blog-filtro[aria-pressed="true"] span{color:inherit;opacity:.7}
.blog-filtro:focus-visible{outline:2px solid var(--sello);outline-offset:2px}
.blog-lista{padding-bottom:clamp(64px,8vw,104px)}
.blog-portada{position:relative;display:block;padding:clamp(26px,4vw,44px);border-radius:24px;background:var(--carbon);color:var(--tiquete);text-decoration:none;overflow:hidden;margin-bottom:12px;isolation:isolate}
.blog-portada::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(242,182,50,.28),transparent 70%);z-index:-1;transition:transform .5s ease}
.blog-portada:hover::after{transform:scale(1.25)}
.blog-portada-etiqueta{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mostaza)}
.blog-portada-etiqueta .dot{width:7px;height:7px;border-radius:50%;background:var(--mostaza);animation:pulso 2s ease-in-out infinite}
.blog-portada h2{color:var(--tiquete);font-size:clamp(26px,3.2vw,42px);line-height:1.08;letter-spacing:-.02em;max-width:720px;margin:14px 0 12px;text-wrap:balance}
.blog-portada p{color:#C9CCD6;font-size:16px;line-height:1.6;max-width:600px;margin:0 0 24px}
.blog-portada-pie{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;font-size:13.5px;color:#B4B7C3}
.blog-portada-ir{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:12px 18px;border-radius:999px;background:var(--tiquete);color:var(--carbon);font-weight:700;font-size:14px}
.blog-portada-ir svg{width:16px;height:16px;transition:transform .2s ease}
.blog-portada:hover .blog-portada-ir svg{transform:translateX(3px)}
.blog-portada:focus-visible,.blog-fila:focus-visible{outline:2px solid var(--sello);outline-offset:3px}
.blog-filas{list-style:none;margin:0;padding:0}
.blog-filas li[hidden],.blog-portada[hidden]{display:none}
.blog-fila{display:grid;grid-template-columns:160px 1fr auto;align-items:baseline;gap:8px 28px;padding:26px 8px;border-bottom:1px solid var(--borde);text-decoration:none;color:var(--texto);transition:background .2s ease}
.blog-fila:hover{background:var(--bg-suave)}
.blog-fila:hover strong{color:var(--sello)}
.blog-fila-tema{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.blog-fila-tema::before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
.tema-sello{color:var(--sello)}.tema-aji{color:var(--aji-texto)}.tema-caja{color:var(--caja-texto)}.tema-mostaza{color:var(--mostaza-texto)}
.blog-fila-texto{display:flex;flex-direction:column;gap:6px}
.blog-fila-texto strong{font-family:var(--fuente-titulo);font-size:clamp(19px,1.6vw,23px);font-weight:700;line-height:1.25;letter-spacing:-.01em;transition:color .15s ease}
.blog-fila-texto span{font-size:15px;line-height:1.55;color:var(--texto-suave);max-width:640px}
.blog-fila-meta{font-size:13px;color:var(--texto-tenue);white-space:nowrap}
.blog-vacio{padding:32px 0;color:var(--texto-suave)}
@media (max-width:760px){
  .blog-fila{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .blog-fila:hover{background:none}
  .blog-fila-meta{order:3}
  .blog-portada{border-radius:20px}
  .blog-portada-ir{margin-left:0;width:100%;justify-content:center}
}

/* artículo: barra de lectura, firma y compartir */
.lectura-barra{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;pointer-events:none}
.lectura-barra span{display:block;height:100%;background:linear-gradient(90deg,var(--sello-solido),var(--mostaza));transform:scaleX(0);transform-origin:0 50%}
.articulo-firma{margin:0 0 10px;font-size:13.5px;color:var(--texto-tenue)}
.articulo h1{margin-bottom:18px}
.compartir-wa{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--borde);background:var(--superficie);color:var(--texto);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .15s ease,background .15s ease}
.compartir-wa svg{width:16px;height:16px;color:var(--caja-texto)}
.compartir-wa:hover{border-color:var(--caja-texto)}
.compartir-wa:focus-visible{outline:2px solid var(--sello);outline-offset:2px}
.compartir-arriba{margin-bottom:34px}
.articulo-compartir{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin:40px 0 8px;padding:20px 22px;border:1px dashed var(--borde);border-radius:18px;background:var(--bg-suave)}
.articulo-compartir p{margin:0;font-family:var(--fuente-titulo);font-weight:600;font-size:16px;color:var(--texto)}
.articulo-cuerpo .garantias{padding:0;margin:14px 0 0;list-style:none}
.articulo-cuerpo .garantias li{margin:0;padding:0;font-size:12.5px}
.articulo-cuerpo .garantias li::marker{content:none}
@media (max-width:560px){.articulo-compartir .compartir-wa{width:100%;justify-content:center}}

/* calculadora en móvil: se le devuelve el ancho al contenido y cada línea
   del recibo apila etiqueta y cifra para que ningún monto se parta. */
@media (max-width:700px){
  .calc{padding:28px 20px 24px;gap:32px;border-radius:20px}
  .calc-valor-grande{font-size:clamp(28px,9vw,34px)}
  .calc-ahorro-cifra{font-size:clamp(28px,8.6vw,36px);overflow-wrap:anywhere}
  .recibo-card{padding:28px 20px 18px}
  .recibo-badge{right:auto;left:20px}
  .recibo-linea{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 0}
  .recibo-linea .valor{white-space:nowrap;font-size:18px}
  .recibo-linea.destaque .valor{font-size:clamp(17px,5.6vw,22px)}
}
@media (max-width:420px){
  .herramienta-recibo .recibo-fila{flex-direction:column;align-items:flex-start;gap:4px}
  .herramienta-recibo .recibo-fila strong{white-space:nowrap}
}

/* hero de inicio, columna de texto: talón de tiquete como prueba, resaltador
   mostaza, selector de tipo de negocio y un solo botón que manda. */
.hero-talon{position:relative;display:inline-flex;align-items:center;gap:14px;margin:0 0 22px;padding:9px 16px 9px 22px;background:#FFFDF8;color:#202124;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(32,33,36,.14);transform:rotate(-1.2deg);animation:entrada .6s ease both;
  -webkit-mask:radial-gradient(circle 4px at 0 50%,transparent 97%,#000) 0 0/100% 12px repeat-y;mask:radial-gradient(circle 4px at 0 50%,transparent 97%,#000) 0 0/100% 12px repeat-y}
.hero-talon::after{content:"";position:absolute;left:12px;top:6px;bottom:6px;border-left:1.5px dashed rgba(32,33,36,.25)}
.hero-talon-et{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#54565f}
.hero-talon strong{font-family:var(--fuente-titulo);font-size:20px;font-weight:800;color:#0B7A4C;letter-spacing:-.01em}
.hero .hero-col-texto h1{font-size:clamp(38px,4.9vw,68px);line-height:1.03;margin:0 0 20px}
.hero h1 em.resaltado{color:var(--texto);background:linear-gradient(var(--resaltador),var(--resaltador)) 0 74%/0% 36% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em;animation:resaltar .7s cubic-bezier(.6,0,.2,1) .75s forwards}
.hero h1 em.resaltado .palabra{text-decoration:none}
.hero-h1-b{display:block}
@keyframes resaltar{to{background-size:100% 36%}}
:root{--resaltador:rgba(242,182,50,.7)}
[data-theme="dark"]{--resaltador:rgba(242,182,50,.42)}
.hero p.hero-bajada{font-size:18px;line-height:1.55;max-width:520px;margin:0 0 26px}
.hero-elige{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 16px;animation:entrada .6s ease .66s both}
.hero-elige-et{font-size:13px;font-weight:600;color:var(--texto-suave);margin-right:4px}
.hero-elige-op{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--borde);background:var(--superficie);color:var(--texto);font:600 14px var(--fuente-texto);cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.hero-elige-op:hover{border-color:var(--texto-tenue)}
.hero-elige-op[aria-pressed="true"]{background:var(--texto);border-color:var(--texto);color:var(--bg)}
.hero-elige-op:focus-visible{outline:2px solid var(--sello);outline-offset:2px}
.hero-ctas{gap:12px 26px}
.hero-ctas .hero-cta{display:inline-flex;align-items:center;gap:10px;padding:18px 28px}
.hero-cta svg{width:18px;height:18px;transition:transform .2s ease}
.hero-cta:hover svg{transform:translateX(3px)}
.hero-ver{font-size:15px;font-weight:600;color:var(--texto);text-decoration:underline;text-decoration-color:var(--borde);text-decoration-thickness:2px;text-underline-offset:5px;padding:8px 0;transition:text-decoration-color .15s ease}
.hero-ver:hover{text-decoration-color:var(--mostaza)}
.hero p.hero-datos{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:20px 0 0;font-size:13.5px;font-weight:500;color:var(--texto-suave);animation:entrada .6s ease .78s both}
.hero-datos i{width:4px;height:4px;border-radius:50%;background:var(--caja-solido)}
@media (max-width:700px){
  .hero-talon{margin-bottom:16px}
  .hero .hero-col-texto h1{font-size:clamp(36px,10.4vw,46px);margin-bottom:14px}
  .hero p.hero-bajada{font-size:16.5px;margin-bottom:18px}
  .hero-elige{gap:6px}
  .hero-elige-et{flex-basis:100%;margin:0 0 2px}
  .hero-elige-op{flex:1;padding:0 10px;font-size:13.5px}
  .hero-ctas{flex-direction:column;align-items:stretch;gap:4px}
  .hero-ctas .hero-cta{justify-content:center;min-height:56px}
  .hero-ver{text-align:center}
  .hero p.hero-datos{justify-content:center;margin-top:12px}
}
@media (prefers-reduced-motion: reduce){
  .hero h1 em.resaltado{animation:none;background-size:100% 36%}
  .hero-talon,.hero-elige,.hero p.hero-datos{animation:none}
}

/* "¿Te suena familiar?": cuenta del día en una hoja de cuaderno. El
   interruptor pasa de "Hoy" a "Con Veci": cada dolor se tacha con marcador
   y aparece el arreglo; la etiqueta de costo cambia a verde. */
.seccion-dolor{padding:clamp(72px,9vw,112px) 0;position:relative;overflow:hidden}
.dolor-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,80px);align-items:center}
.dolor-eyebrow{margin:0 0 14px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mostaza)}
.seccion-dolor h2{font-size:clamp(32px,3.4vw,50px);line-height:1.05;letter-spacing:-.025em;margin:0 0 18px;text-wrap:balance}
.dolor-lead{color:#B4B7C3;font-size:17px;line-height:1.6;max-width:430px;margin:0 0 28px}
.dolor-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:999px;background:rgba(255,253,248,.08);border:1px solid rgba(255,253,248,.12);margin-bottom:28px}
.dolor-switch button{position:relative;z-index:1;min-width:120px;min-height:46px;padding:0 20px;border:0;border-radius:999px;background:none;color:#C9CCD6;font:700 15px var(--fuente-texto);cursor:pointer;transition:color .25s ease}
.dolor-switch button[aria-pressed="true"]{color:#1B1A17}
.dolor-switch button:focus-visible{outline:2px solid var(--mostaza);outline-offset:2px}
.dolor-switch-pastilla{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:#FF8A70;transition:transform .35s cubic-bezier(.3,1.3,.5,1),background .35s ease}
[data-cuaderno].con-veci .dolor-switch-pastilla{transform:translateX(100%);background:#3ED18B}
.dolor-cta{display:flex;width:max-content}
.cuaderno{position:relative;background:#FFFDF8;color:#202124;border-radius:6px;padding:22px 26px 14px 62px;box-shadow:0 30px 60px -28px rgba(0,0,0,.7);transform:rotate(.8deg);
  background-image:linear-gradient(90deg,transparent 46px,rgba(232,69,44,.55) 46px,rgba(232,69,44,.55) 48px,transparent 48px),repeating-linear-gradient(#FFFDF8 0 31px,#DCE3F2 31px 32px)}
.cuaderno::before{content:"";position:absolute;left:16px;top:22px;bottom:22px;width:12px;background:radial-gradient(circle 5px at 50% 50%,#202124 90%,transparent) 0 0/12px 52px repeat-y;opacity:.85}
.cuaderno-cabeza{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 6px;font-family:var(--fuente-titulo);font-weight:800;font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:#202124}
.cuaderno-estado{font-family:var(--fuente-texto);font-size:12px;font-weight:700;letter-spacing:.08em;padding:4px 10px;border-radius:999px;background:rgba(191,58,34,.1);color:#BF3A22;transition:background .3s ease,color .3s ease}
.con-veci .cuaderno-estado{background:rgba(11,122,76,.12);color:#0B7A4C}
.cuaderno-renglones{list-style:none;margin:0;padding:0}
.cuaderno-renglon{display:grid;grid-template-columns:1fr auto;gap:4px 18px;align-items:start;padding:14px 0;border-bottom:1px dashed rgba(32,33,36,.14)}
.cuaderno-renglon:last-child{border-bottom:0}
.cuaderno-dolor,.cuaderno-arreglo{grid-column:1;display:flex;flex-direction:column;gap:3px}
.cuaderno-dolor strong,.cuaderno-arreglo strong{font-family:var(--fuente-titulo);font-size:17px;font-weight:700;line-height:1.25}
.cuaderno-dolor>span,.cuaderno-arreglo>span{font-size:14px;line-height:1.45;color:#54565f}
.cuaderno-dolor strong{transition:color .3s ease}
.tachar{-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(#BF3A22,#BF3A22) 0 55%/0% 2.5px no-repeat;transition:background-size .45s cubic-bezier(.6,0,.2,1),color .3s ease;transition-delay:calc(var(--i)*.12s)}
.cuaderno-arreglo{max-height:0;overflow:hidden;opacity:0;transition:max-height .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease,margin .45s ease;transition-delay:calc(var(--i)*.12s + .25s)}
.cuaderno-arreglo strong{color:#0B7A4C}
.cuaderno-costo{grid-column:2;grid-row:1;display:grid;justify-items:end;font-size:12.5px;font-weight:700;white-space:nowrap}
.cuaderno-costo>span{grid-area:1/1;padding:4px 10px;border-radius:6px;transition:opacity .3s ease,transform .3s cubic-bezier(.3,1.4,.5,1);transition-delay:calc(var(--i)*.12s + .2s)}
.cuaderno-costo-hoy{background:rgba(191,58,34,.1);color:#BF3A22}
.cuaderno-costo-veci{background:rgba(11,122,76,.12);color:#0B7A4C;opacity:0;transform:scale(.6)}
.con-veci .tachar{background-size:100% 2.5px}
.con-veci .cuaderno-dolor strong{color:#8A8D97}
.con-veci .cuaderno-dolor>span{display:none}
.con-veci .cuaderno-arreglo{max-height:120px;opacity:1;margin-top:6px}
.con-veci .cuaderno-costo-hoy{opacity:0;transform:scale(.6)}
.con-veci .cuaderno-costo-veci{opacity:1;transform:none}
@media (max-width:860px){
  .dolor-grid{grid-template-columns:1fr}
  .dolor-switch{display:grid;width:100%}
  .dolor-cta{display:none}
  .cuaderno{padding:18px 16px 10px 46px;transform:none;background-image:linear-gradient(90deg,transparent 34px,rgba(232,69,44,.55) 34px,rgba(232,69,44,.55) 36px,transparent 36px),repeating-linear-gradient(#FFFDF8 0 31px,#DCE3F2 31px 32px)}
  .cuaderno::before{left:10px;width:10px;background-size:10px 52px}
  .cuaderno-renglon{grid-template-columns:1fr}
  .cuaderno-costo{grid-column:1;grid-row:auto;justify-items:start;margin-top:6px}
}
@media (prefers-reduced-motion: reduce){
  .tachar,.cuaderno-arreglo,.cuaderno-costo>span,.dolor-switch-pastilla{transition:none}
}

/* "Tu cliente nunca sale de WhatsApp": dos rutas del cliente como líneas de
   metro. La franja verde es WhatsApp; la ruta de la app se sale de ella. */
.seccion-rutas{padding:clamp(72px,9vw,112px) 0}
.rutas-intro{max-width:720px;margin-bottom:40px}
.rutas-intro h2{margin:0 0 14px}
.rutas{display:grid;gap:18px}
.ruta{border:1px solid var(--borde);border-radius:22px;padding:24px 26px 20px;background:var(--superficie)}
.ruta-veci{border-color:color-mix(in srgb,var(--caja-texto) 40%,var(--borde));box-shadow:0 22px 44px -30px rgba(11,122,76,.55)}
.ruta-titulo{display:flex;align-items:center;gap:10px;margin:0 0 22px;font-family:var(--fuente-titulo);font-weight:700;font-size:18px;color:var(--texto)}
.ruta-punto{width:10px;height:10px;border-radius:50%;background:var(--texto-tenue)}
.ruta-veci .ruta-punto{background:var(--caja-solido);box-shadow:0 0 0 4px var(--tinte-caja)}
.ruta-linea{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}
.ruta-linea li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:30px 14px 0 0}
.ruta-linea li::before{content:"";position:absolute;left:0;right:0;top:0;height:6px}
.ruta-linea li.dentro::before{background:var(--caja-solido)}
.ruta-linea li.fuera::before{background:repeating-linear-gradient(90deg,var(--texto-tenue) 0 8px,transparent 8px 13px);opacity:.6}
.ruta-linea li:first-child::before{border-radius:3px 0 0 3px}
.ruta-linea li:last-child::before{border-radius:0 3px 3px 0}
.ruta-linea li.dentro+li.fuera::before{left:6px}
.ruta-zona-et{position:absolute;top:12px;left:0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--caja-texto)}
.fuera .ruta-zona-et{color:var(--texto-tenue);left:6px}
.ruta-nodo{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bg-suave);color:var(--texto-suave);border:1px solid var(--borde);margin-top:10px}
.ruta-nodo svg{width:20px;height:20px}
.dentro .ruta-nodo{background:var(--tinte-caja);color:var(--caja-texto);border-color:transparent}
.ruta-app .fuera .ruta-nodo{background:transparent;border-style:dashed}
.ruta-paso{font-size:14.5px;line-height:1.4;font-weight:600;color:var(--texto);max-width:170px}
.ruta-app .fuera .ruta-paso{color:var(--texto-suave);font-weight:500}
.ruta-talon{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding-top:16px;border-top:1px dashed var(--borde)}
.ruta-talon span{font-size:13px;font-weight:700;padding:6px 12px;border-radius:8px;background:color-mix(in srgb,var(--aji-texto) 12%,transparent);color:var(--aji-texto)}
.ruta-veci .ruta-talon span{background:var(--tinte-caja);color:var(--caja-texto)}
/* encendido en secuencia de la ruta Veci */
.js-rutas .ruta-veci .ruta-nodo,.js-rutas .ruta-veci .ruta-paso{opacity:.25;transform:translateY(6px);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*.18s)}
.js-rutas .ruta-veci li::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .45s ease;transition-delay:calc(var(--i)*.18s)}
.js-rutas .encendida .ruta-veci .ruta-nodo,.js-rutas .encendida .ruta-veci .ruta-paso{opacity:1;transform:none}
.js-rutas .encendida .ruta-veci li::before{transform:none}
.rutas-extra{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rutas-extra li{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:16px;background:var(--bg-suave)}
.rutas-extra strong{font-family:var(--fuente-titulo);font-size:16px;color:var(--texto)}
.rutas-extra span{font-size:14px;line-height:1.5;color:var(--texto-suave)}
@media (max-width:860px){
  .ruta{padding:20px 18px 16px}
  .ruta-linea{grid-template-columns:1fr}
  .ruta-linea li{flex-direction:row;align-items:center;gap:14px;padding:0 0 0 22px;min-height:64px}
  .ruta-linea li::before{left:0;right:auto;top:0;bottom:0;width:5px;height:auto}
  .ruta-linea li.fuera::before{background:repeating-linear-gradient(180deg,var(--texto-tenue) 0 8px,transparent 8px 13px)}
  .ruta-linea li:first-child::before{border-radius:3px 3px 0 0}
  .ruta-linea li:last-child::before{border-radius:0 0 3px 3px}
  .ruta-linea li.dentro+li.fuera::before{left:0;top:6px}
  .ruta-zona-et{display:none}
  .ruta-nodo{margin:0;flex-shrink:0;width:40px;height:40px}
  .ruta-paso{max-width:none}
  .js-rutas .ruta-veci li::before{transform:scaleY(0);transform-origin:50% 0}
  .rutas-extra{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .js-rutas .ruta-veci .ruta-nodo,.js-rutas .ruta-veci .ruta-paso,.js-rutas .ruta-veci li::before{transition:none}
}

/* calculadora: las columnas nunca crecen más que la caja (minmax(0,…)),
   en tablet se apila, y el recibo decide su forma según su propio ancho. */
.calc{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.calc>*{min-width:0}
@media (max-width:1100px){.calc{grid-template-columns:minmax(0,1fr)}}
.recibo-card{container-type:inline-size}
@container (max-width:440px){
  .recibo-linea{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 0}
  .recibo-linea .valor{white-space:nowrap;font-size:clamp(15px,5.4cqi,18px)}
  .recibo-linea.destaque .valor{font-size:clamp(15px,6.6cqi,22px)}
}
@media (max-width:380px){
  .calc{padding:24px 16px 20px}
  .recibo-card{padding:28px 16px 16px}
  .calc-ahorro-cifra{font-size:clamp(24px,8.4vw,30px)}
  .calc-valor-grande{font-size:clamp(26px,8.6vw,30px)}
}

/* hero h1 en tablet y móvil: el tamaño sale del ancho de la columna (cqi),
   así "Vende por WhatsApp" llena la línea y no queda aire a la derecha. */
@media (max-width:900px){
  .hero-col-texto{container-type:inline-size}
  .hero .hero-col-texto h1{font-size:clamp(28px,9.7cqi,72px);text-wrap:wrap;max-width:none}
  .hero h1 .br-movil{display:block}
}
.hero h1 .br-movil{display:none}

/* tarjetas de planes: cabecera en fila (ícono + nombre), precio completo,
   línea antes de la lista y botón con el texto centrado + nota debajo. */
.plan-cabeza{display:flex;align-items:center;gap:12px}
.plan-cabeza .plan-icono{margin:0}
.plan .precio{font-size:34px;letter-spacing:-.02em;line-height:1.1}
.plan .precio small{margin-left:2px;letter-spacing:0}
.plan .plan-sub{margin-top:-8px;padding-bottom:16px;border-bottom:1px dashed var(--borde)}
.plan .btn{justify-content:center;text-align:center;width:100%;min-height:52px;margin-top:auto}
.plan-nota{display:block;margin-top:-4px;text-align:center;font-size:12.5px;color:var(--texto-tenue)}

/* precio fundador: talón con los 20 puestos numerados. No muestra cuántos
   quedan (ese dato vive en la app): solo que son 20 y que se acaban. */
.fundador{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;max-width:960px;margin:44px auto 0;padding:28px;border-radius:22px;background:var(--carbon);color:var(--tiquete)}
.fundador-eyebrow{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mostaza)}
.fundador h3{color:var(--tiquete);font-size:clamp(20px,2vw,26px);line-height:1.2;margin:0 0 12px;text-wrap:balance}
.fundador-texto>p:last-child{margin:0;color:#C9CCD6;font-size:15px;line-height:1.6}
.fundador-puestos{list-style:none;margin:0;padding:18px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;background:#FFFDF8;border-radius:10px;transform:rotate(1deg);box-shadow:0 20px 40px -24px rgba(0,0,0,.7)}
.fundador-puestos li{display:grid;place-items:center;aspect-ratio:1.3;border:1.5px dashed #C9C2B1;border-radius:6px;font-family:var(--fuente-titulo);font-weight:800;font-size:15px;color:#3B4CCA;font-variant-numeric:tabular-nums}
@media (max-width:760px){.fundador{grid-template-columns:1fr;padding:22px}.fundador-puestos{transform:none}}

/* funciones: índice de temas pegado arriba en móvil y etiqueta de plan */
.funciones-indice{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:6px 4px;margin-bottom:8px}
.funciones-indice::-webkit-scrollbar{display:none}
.funciones-indice a{flex-shrink:0;padding:9px 15px;border-radius:999px;border:1px solid var(--borde);background:var(--superficie);color:var(--texto);font-size:13.5px;font-weight:600;text-decoration:none}
.funciones-indice a:hover{border-color:var(--sello);color:var(--sello)}
.funciones-indice a:focus-visible{outline:2px solid var(--sello);outline-offset:2px}
.funcion-plan{display:inline-block;margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:4px 10px;border-radius:999px;background:var(--tinte-sello);color:var(--sello)}
section[id]{scroll-margin-top:96px}

/* mega menú: segunda columna con los tipos de negocio, como lista simple */
.mega-menu.dos-col{width:520px;grid-template-columns:1.15fr .85fr}
.mega-menu a.item.item-simple{padding:8px 10px;font-size:13.5px;font-weight:500;color:var(--texto-suave)}
.mega-menu a.item.item-simple:hover{color:var(--texto)}
/* menú móvil con 7 tipos de negocio: tarjetas compactas en fila */
.menu-movil-negocios{gap:8px}
.menu-movil-negocio{flex-direction:row;align-items:center;gap:10px;min-height:60px;padding:10px 12px;border-radius:14px;font-size:13.5px}
.menu-movil-negocio:last-child:nth-child(odd){grid-column:1/-1}
.menu-movil-ico{width:32px;height:32px;border-radius:10px;flex-shrink:0}
.menu-movil-ico svg{width:17px;height:17px}

/* "Prueba con tu foto": zona para subir a la izquierda, tiquete del
   catálogo a la derecha (vacío con renglones fantasma hasta que llega). */
.seccion-foto-demo{padding-block:clamp(56px,7vw,96px)}
.foto-demo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(22px,4vw,44px);border-radius:28px;background:var(--bg-suave);border:1px solid var(--borde)}
.foto-demo h2{margin:0 0 12px;text-wrap:balance}
.foto-demo .lead{margin:0 0 22px}
.foto-demo-tipos{display:inline-flex;padding:4px;border-radius:999px;background:var(--superficie);border:1px solid var(--borde);margin-bottom:14px;flex-wrap:wrap}
.foto-demo-tipos button{border:0;background:none;padding:9px 16px;border-radius:999px;font:600 14px var(--fuente-texto);color:var(--texto);cursor:pointer;min-height:40px}
.foto-demo-tipos button[aria-pressed="true"]{background:var(--texto);color:var(--bg)}
.foto-demo-tipos button:focus-visible{outline:2px solid var(--sello);outline-offset:2px}
.foto-demo-zona{position:relative;display:flex;align-items:center;gap:16px;padding:20px;border:2px dashed color-mix(in srgb,var(--sello) 45%,var(--borde));border-radius:20px;background:var(--superficie);cursor:pointer;overflow:hidden;transition:border-color .15s ease,background .15s ease}
.foto-demo-zona:hover{border-color:var(--sello)}
.foto-demo-zona input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.foto-demo-zona:focus-within{outline:2px solid var(--sello);outline-offset:3px}
.foto-demo-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--sello-solido);color:#fff;flex-shrink:0}
.foto-demo-ico svg{width:24px;height:24px}
.foto-demo-zona-txt{display:flex;flex-direction:column;gap:3px}
.foto-demo-zona-txt strong{font-family:var(--fuente-titulo);font-size:18px;color:var(--texto)}
.foto-demo-zona-txt span{font-size:13.5px;color:var(--texto-suave)}
[data-estado="cargando"] .foto-demo-zona{pointer-events:none}
[data-estado="cargando"] .foto-demo-zona::after{content:"";position:absolute;left:0;right:0;height:3px;top:0;background:linear-gradient(90deg,transparent,var(--sello),transparent);animation:fotoEscanea 1.4s ease-in-out infinite alternate}
@keyframes fotoEscanea{from{top:0}to{top:calc(100% - 3px)}}
.foto-demo-estado{min-height:1.5em;margin:12px 0 0;font-size:14.5px;font-weight:600;color:var(--texto-suave)}
[data-estado="error"] .foto-demo-estado,[data-estado="vacio"] .foto-demo-estado{color:var(--aji-texto)}
.foto-demo-nota{margin:6px 0 0;font-size:12.5px;color:var(--texto-tenue)}
.foto-demo-papel{position:relative;background:#FFFDF8;color:#202124;border-radius:6px;padding:22px 22px 24px;box-shadow:0 26px 50px -28px rgba(0,0,0,.55);transform:rotate(1deg);min-height:300px}
.foto-demo-cab{display:flex;justify-content:space-between;margin:0 0 12px;padding-bottom:10px;border-bottom:2px dashed #D9D3C4;font:700 12px var(--fuente-texto);letter-spacing:.1em;text-transform:uppercase;color:#54565f}
.foto-demo-vacio ul{list-style:none;margin:0;padding:0}
.foto-demo-vacio li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px dotted #D9D3C4}
.foto-demo-vacio i{height:10px;width:55%;border-radius:4px;background:#ECE6D8}
.foto-demo-vacio li:nth-child(2) i{width:42%}.foto-demo-vacio li:nth-child(3) i{width:62%}.foto-demo-vacio li:nth-child(4) i{width:36%}
.foto-demo-vacio b{height:10px;width:52px;border-radius:4px;background:#ECE6D8}
.foto-demo-vacio-txt{margin:16px 0 0;text-align:center;font-size:13.5px;color:#676971}
.foto-demo-resultado:not([hidden])~.foto-demo-vacio,.foto-demo-papel:has(.foto-demo-resultado:not([hidden])) .foto-demo-vacio{display:none}
.foto-demo-resultado:focus{outline:none}
.foto-demo-lista{list-style:none;margin:0;padding:0;max-height:330px;overflow:auto}
.foto-demo-lista li{display:flex;align-items:baseline;gap:8px;padding:9px 0;border-bottom:1px dotted #D9D3C4;font-size:14.5px;animation:entrada .35s ease both;animation-delay:calc(var(--i)*60ms)}
.foto-demo-nombre{display:flex;flex-direction:column;min-width:0}
.foto-demo-nombre small{font-size:12px;color:#676971}
.foto-demo-guia{flex:1;border-bottom:1.5px dotted #C9C2B1;transform:translateY(-4px);min-width:12px}
.foto-demo-lista b{font-family:var(--fuente-titulo);font-weight:700;color:#0B7A4C;white-space:nowrap;font-variant-numeric:tabular-nums}
.foto-demo-lista b.falta{color:#BF3A22;font-family:var(--fuente-texto);font-size:12.5px;font-weight:600}
.foto-demo-aviso{margin:14px 0;font-size:13.5px;color:#54565f}
.foto-demo-cta{width:100%;justify-content:center}
.foto-demo-otra{display:block;margin:10px auto 0;border:0;background:none;font:600 14px var(--fuente-texto);color:#3B4CCA;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px}
@media (max-width:860px){
  .foto-demo{grid-template-columns:1fr}
  .foto-demo-papel{transform:none;min-height:0}
  .foto-demo-tipos{display:flex}
  .foto-demo-tipos button{flex:1}
}
@media (prefers-reduced-motion: reduce){[data-estado="cargando"] .foto-demo-zona::after{animation:none}.foto-demo-lista li{animation:none}}
/* el menú móvil nunca se desplaza de lado: columnas que pueden encogerse y
   textos que parten línea en vez de empujar la hoja */
.menu-movil,.menu-movil-cuerpo{overflow-x:hidden}
.menu-movil-negocios{grid-template-columns:repeat(2,minmax(0,1fr))}
.menu-movil-negocio{min-width:0;overflow-wrap:normal;hyphens:manual}
.menu-movil-negocio>span:last-child{min-width:0}
@media (max-width:359px){.menu-movil-negocio{font-size:12.5px;padding:10px;gap:8px}.menu-movil-ico{width:28px;height:28px}}

/* precio fundador en vivo: puestos tomados con sello, contador y aviso */
.fundador-cuenta{display:inline-block;margin-left:8px;padding:3px 10px;border-radius:999px;background:rgba(242,182,50,.18);color:#F2C25A;letter-spacing:.04em}
.fundador-puestos li{position:relative;transition:background .3s ease,color .3s ease,border-color .3s ease}
.fundador-puestos li.tomado{border:1.5px solid #3B4CCA;background:#3B4CCA;color:#FFFDF8}
.fundador.lleno .fundador-puestos{opacity:.85}
.fundador-resumen{display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:100%;margin:22px auto 0;padding:10px 18px;border-radius:999px;background:var(--carbon);color:var(--tiquete);font-size:14px;font-weight:600;text-decoration:none}
.fundador-resumen-punto{width:8px;height:8px;border-radius:50%;background:var(--mostaza);flex-shrink:0;animation:pulso 2s ease-in-out infinite}
.fundador-resumen:hover{background:#2b2c31}
.fundador-resumen:focus-visible{outline:2px solid var(--sello);outline-offset:3px}
@media (prefers-reduced-motion: reduce){.fundador-resumen-punto{animation:none}}

/* calculadora por tipo de negocio: pestañas arriba, controles a la
   izquierda, recibo a la derecha. Los números se ajustan al ancho de su
   caja (cqi) y nunca parten línea. */
.calc-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 14px}
.calc-tabs button{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 14px;border-radius:16px;border:1.5px solid var(--borde);background:var(--superficie);color:var(--texto);font:600 14px/1.25 var(--fuente-texto);text-align:left;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
.calc-tabs button svg{width:22px;height:22px;flex-shrink:0;color:var(--sello)}
.calc-tabs button:hover{border-color:var(--texto-tenue)}
.calc-tabs button[aria-selected="true"]{background:var(--texto);border-color:var(--texto);color:var(--bg)}
.calc-tabs button[aria-selected="true"] svg{color:var(--mostaza)}
.calc-tabs button:focus-visible{outline:2px solid var(--sello);outline-offset:2px}
.calc-panel,.recibo-card{container-type:inline-size;min-width:0}
.calc-caso-titulo{margin:0 0 18px;font-family:var(--fuente-titulo);font-weight:700;font-size:17px;line-height:1.3;color:var(--texto)}
.calc-controles{display:flex;flex-direction:column;gap:18px}
.calc-control-cab{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.calc-panel .calc-control label{margin:0}
.calc-panel .calc-valor-grande{margin:0;font-size:clamp(20px,9cqi,32px);white-space:nowrap;line-height:1.15}
.calc-controles .calc-control:not(:first-child) .calc-valor-grande{font-size:clamp(18px,7cqi,24px)}
.calc-ahorro-cifra{font-size:clamp(22px,10cqi,40px);white-space:nowrap;overflow-wrap:normal}
.recibo-linea .valor{white-space:nowrap;font-size:clamp(14px,5.6cqi,18px)}
.recibo-linea.destaque .valor{font-size:clamp(15px,6.4cqi,22px)}
.recibo-linea .etiqueta{min-width:0}
@container (max-width:440px){
  .recibo-linea{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 0}
}
@media (max-width:860px){
  .calc-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calc-tabs button{font-size:13.5px;padding:10px 12px;gap:8px}
}
@media (max-width:380px){.calc-tabs button svg{display:none}}

/* Cómo funciona: cinco pasos en línea, cada uno con su mini ilustración */
.seccion-cf{padding-block:24px clamp(48px,6vw,80px)}
.cf-pasos{list-style:none;margin:0 auto;padding:0;max-width:1000px;position:relative}
.cf-pasos::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:repeating-linear-gradient(var(--borde) 0 8px,transparent 8px 14px)}
.cf-paso{position:relative;display:grid;grid-template-columns:56px 1fr minmax(0,.9fr);gap:20px 32px;align-items:center;padding:28px 0}
.cf-num{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--sello-solido);color:#fff;font:800 22px var(--fuente-titulo);box-shadow:0 0 0 6px var(--bg)}
.cf-texto h2{font-size:clamp(22px,2.2vw,30px);margin:0 0 8px}
.cf-texto p{margin:0 0 12px;color:var(--texto-suave);font-size:16px;line-height:1.6}
.cf-dato{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:5px 11px;border-radius:999px;background:var(--tinte-caja);color:var(--caja-texto)}
.cf-vis{background:#FFFDF8;color:#202124;border-radius:16px;padding:16px;box-shadow:0 18px 36px -24px rgba(0,0,0,.5);border:1px solid #E9E4D8;font-size:13.5px;min-width:0}
.cf-vis b{display:block;font-family:var(--fuente-titulo);font-size:13px;margin-bottom:6px}
.cf-vis i{font-style:normal}
.cf-vis-foto{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.cf-foto{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:10px;background:#2D3A2E;color:#EDEAD8;font-size:12px}
.cf-foto b{color:#FFF3C4}
.cf-flecha{font-size:20px;color:#3B4CCA;font-weight:700}
.cf-lista{display:flex;flex-direction:column;gap:4px}
.cf-lista i,.cf-comanda i{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dotted #D9D3C4;padding:3px 0}
.cf-lista em,.cf-comanda em{font-style:normal}
.cf-lista strong,.cf-comanda strong{color:#0B7A4C;white-space:nowrap}
.cf-vis-enlace{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cf-chip-enlace{padding:10px 14px;border-radius:12px;border:1.5px dashed #3B4CCA;color:#3B4CCA;font-weight:600;overflow-wrap:anywhere}
.cf-chip-enlace b{display:inline;margin:0;font-family:inherit;font-size:inherit}
.cf-donde,.cf-chips{display:flex;flex-wrap:wrap;gap:6px}
.cf-donde i,.cf-chips i{padding:5px 10px;border-radius:999px;background:#F1EEE6;font-size:12.5px;font-weight:600}
.cf-chips-caja i{background:rgba(11,122,76,.12);color:#08643E}
.cf-comanda{display:flex;flex-direction:column;gap:2px}
.cf-comanda .cf-total{border-bottom:0;border-top:2px solid #202124;margin-top:4px;padding-top:6px;font-weight:700}
.cf-vis-cobro{display:grid;gap:8px}
.cf-etq{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#676971}
.cf-vis-vuelvan{display:flex;flex-direction:column;gap:8px;background:#E7F2EC}
.cf-burbuja{align-self:flex-end;max-width:92%;background:#D9FDD3;padding:10px 12px;border-radius:12px 12px 2px 12px;line-height:1.45}
.cf-quien{font-size:12px;font-weight:700;color:#0B7A4C}
.cf-no{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px}
.cf-no div{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:16px;background:var(--bg-suave);border:1px solid var(--borde)}
.cf-no strong{font-family:var(--fuente-titulo);font-size:17px;color:var(--texto);text-decoration:line-through;text-decoration-color:var(--aji-texto);text-decoration-thickness:2px}
.cf-no span{font-size:14.5px;line-height:1.5;color:var(--texto-suave)}
.cf-luego{margin:22px 0 0;font-size:16px;color:var(--texto-suave)}
.cf-luego a{color:var(--sello);font-weight:600}
@media (max-width:860px){
  .cf-pasos::before{left:21px}
  .cf-paso{grid-template-columns:44px minmax(0,1fr);gap:14px 16px;padding:22px 0}
  .cf-num{width:44px;height:44px;font-size:18px}
  .cf-vis{grid-column:2}
  .cf-no{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){.cf-vis-foto{grid-template-columns:1fr}.cf-flecha{transform:rotate(90deg);justify-self:center}.cf-no{grid-template-columns:1fr}}

/* Seguridad y datos */
.seg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.seg-bloque{padding:24px;border-radius:20px;background:var(--superficie);border:1px solid var(--borde);border-left:4px solid var(--caja-solido)}
.seg-bloque h3{font-size:19px;margin:0 0 8px}
.seg-bloque p{margin:0;font-size:15px;line-height:1.6;color:var(--texto-suave)}
.seg-honesto{padding:clamp(22px,4vw,36px);border-radius:24px;background:var(--bg-suave);border:1px dashed var(--borde)}
.seg-honesto h2{margin:6px 0 14px}
.seg-honesto ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;color:var(--texto-suave);line-height:1.6}
.seg-honesto strong{color:var(--texto)}
.seg-legal{margin:18px 0 0;font-size:14.5px;color:var(--texto-suave)}
.seg-legal a{color:var(--sello);font-weight:600}
@media (max-width:760px){.seg-grid{grid-template-columns:1fr}}

/* cabecera de cuatro decisiones: página actual y desplegable de negocios */
.nav-links a[aria-current="page"]:not(.nav-chip){color:var(--sello)}
.mega-menu a.item[aria-current="page"] strong,.mega-menu a.item.item-simple[aria-current="page"]{color:var(--sello)}
.mega-menu.una-col.menu-negocios{width:260px}
/* footer con cuatro grupos */
.footer-columnas{grid-template-columns:1.4fr repeat(4,minmax(0,1fr))}
@media (max-width:1060px){.footer-columnas{grid-template-columns:repeat(4,minmax(0,1fr))}.footer-marca{grid-column:1/-1}}
@media (max-width:860px){.footer-columnas{grid-template-columns:1fr 1fr}}

/* Qué hace Veci: resumen por resultados y separadores de grupo */
.resumen-funciones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-block:8px 12px}
.resumen-card{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:18px;border:1px solid var(--borde);background:var(--superficie);text-decoration:none;color:var(--texto);transition:border-color .15s ease,transform .15s ease}
.resumen-card:hover{border-color:var(--sello);transform:translateY(-2px)}
.resumen-card:focus-visible{outline:2px solid var(--sello);outline-offset:2px}
.resumen-card span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--sello-solido);color:#fff;font:800 14px var(--fuente-titulo)}
.resumen-card strong{font-family:var(--fuente-titulo);font-size:19px}
.resumen-card small{font-size:13px;line-height:1.5;color:var(--texto-suave)}
.grupo-funciones{scroll-margin-top:96px;padding-top:clamp(48px,7vw,88px);padding-bottom:8px;border-top:1px solid var(--borde);margin-top:clamp(24px,4vw,48px)}
.grupo-funciones .grupo-num{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px;background:var(--texto);color:var(--bg)}
.grupo-funciones h2{font-size:clamp(30px,3.4vw,46px);margin:14px 0 8px;text-wrap:balance}
.grupo-funciones p{margin:0;font-size:17px;color:var(--texto-suave);max-width:620px}
.hoy-vista{max-width:560px;margin:8px 0 28px;border-radius:22px;background:#FFFDF8;color:#202124;border:1px solid #E9E4D8;box-shadow:0 24px 48px -30px rgba(0,0,0,.5);overflow:hidden}
.hoy-cab{display:flex;justify-content:space-between;align-items:baseline;padding:16px 20px;border-bottom:1px solid #E9E4D8}
.hoy-cab strong{font-family:var(--fuente-titulo);font-size:22px}
.hoy-cab span{font-size:12.5px;color:#676971}
.hoy-vista ul{list-style:none;margin:0;padding:6px 12px}
.hoy-vista li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 8px;border-bottom:1px dashed #E2DCCD}
.hoy-vista li:last-child{border-bottom:0}
.hoy-vista b{display:block;font-size:14.5px}
.hoy-vista small{display:block;font-size:12.5px;color:#676971}
.hoy-vista em{font-style:normal;font-size:12.5px;font-weight:700;color:#3B4CCA;white-space:nowrap}
.hoy-ico{min-width:44px;height:36px;padding:0 8px;border-radius:10px;display:grid;place-items:center;font:800 13px var(--fuente-titulo)}
.hoy-sello{background:rgba(59,76,202,.12);color:#3B4CCA}.hoy-caja{background:rgba(11,122,76,.12);color:#08643E}.hoy-mostaza{background:rgba(242,182,50,.22);color:#875A00}.hoy-aji{background:rgba(232,69,44,.12);color:#BF3A22}
.hoy-pie{display:flex;gap:8px;margin:0;padding:12px 20px 16px;border-top:1px solid #E9E4D8}
.hoy-pie span{font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;background:#F1EEE6;color:#54565f}
@media (max-width:860px){.resumen-funciones{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.hoy-vista em{display:none}.hoy-vista li{grid-template-columns:auto minmax(0,1fr)}}

/* flujo real de cada vertical: estaciones numeradas en una línea */
.flujo-vertical{padding-block:clamp(48px,6vw,80px)}
.flujo{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:0;position:relative}
.flujo-6{--n:6}.flujo-7{--n:7}
.flujo li{position:relative;display:flex;flex-direction:column;gap:6px;padding:0 12px 0 0}
.flujo li::before{content:"";position:absolute;left:18px;right:0;top:18px;height:2px;background:var(--caja-solido);opacity:.5}
.flujo li:last-child::before{display:none}
.flujo-n{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--caja-solido);color:#fff;font:800 15px var(--fuente-titulo);box-shadow:0 0 0 5px var(--bg);margin-bottom:8px}
.flujo strong{font-family:var(--fuente-titulo);font-size:16px;line-height:1.25;color:var(--texto)}
.flujo small{font-size:13.5px;line-height:1.45;color:var(--texto-suave)}
.flujo li:last-child .flujo-n{background:var(--sello-solido)}
@media (max-width:960px){
  .flujo{grid-template-columns:1fr;gap:0}
  .flujo li{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:14px;padding:0 0 18px}
  .flujo li::before{left:18px;right:auto;top:38px;bottom:0;width:2px;height:auto}
  .flujo-n{grid-row:span 2;margin:0}
}
.nosotros-cita{margin:26px 0 0;padding:22px 24px;border-left:4px solid var(--mostaza);background:var(--bg-suave);border-radius:0 16px 16px 0}
.nosotros-cita p{margin:0 0 10px;font-size:17px;line-height:1.65;color:var(--texto-suave)}
.nosotros-cita p:last-child{margin:0;color:var(--texto)}
@media (min-width:761px){#veci-hoy .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Pruébalo en celular: pestañas de negocios en cuadrícula (sin scroll de
   lado) y botones de tamaño de dedo */
@media (max-width:760px){
  .demo-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;border-radius:20px;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .demo-tab{justify-content:center;padding:12px 10px;min-height:46px;border-radius:14px;font-size:13.5px;white-space:normal;text-align:center}
  .demo-tab:last-child:nth-child(odd){grid-column:1/-1}
  .demo-vista-toggle button{min-height:40px;padding:8px 14px;font-size:13px}
  .demo-add{min-width:40px;min-height:40px}
}

/* ===== Ayuda ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ayuda-buscar{position:relative;margin:28px 0 0}
.ayuda-buscar svg{position:absolute;left:18px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--texto-suave);pointer-events:none}
.ayuda-buscar input{width:100%;min-height:56px;padding:0 18px 0 50px;font:inherit;font-size:17px;color:var(--texto);background:var(--superficie);border:1.5px solid var(--borde);border-radius:16px;box-shadow:var(--sombra-suave);-webkit-appearance:none;appearance:none}
.ayuda-buscar input:focus{outline:none;border-color:var(--sello);box-shadow:0 0 0 4px var(--tinte-sello)}
.ayuda-buscar input::-webkit-search-cancel-button{cursor:pointer}
.ayuda-conteo{font-size:13px;color:var(--texto-suave);margin:12px 0 0}
.ayuda-temas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:20px auto 8px;max-width:740px;padding:0 clamp(20px,4vw,48px)}
.ayuda-temas a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1.5px solid var(--borde);border-radius:999px;font-size:14px;font-weight:600;color:var(--texto);text-decoration:none;transition:border-color .2s,background .2s}
.ayuda-temas a:hover{border-color:var(--texto);background:var(--bg-suave)}
.ayuda-lista{padding-bottom:72px}
.ayuda-tema{scroll-margin-top:96px;padding-top:32px}
.ayuda-tema h2{font-size:clamp(22px,4vw,28px);margin:0 0 4px;display:flex;align-items:center;gap:12px}
.ayuda-tema h2::after{content:"";flex:1;border-top:2px dashed var(--borde)}
.ayuda-tema[hidden],details[data-ayuda][hidden]{display:none}
.ayuda-lista details p a{color:var(--sello);font-weight:600}
.ayuda-lista mark{background:var(--tinte-mostaza);color:inherit;border-radius:3px;padding:0 2px}
.ayuda-vacio{margin:40px 0 0;padding:24px;border:2px dashed var(--borde);border-radius:16px;text-align:center}
.ayuda-vacio p{margin:0 0 16px;color:var(--texto-suave)}
@media (max-width:560px){.ayuda-temas a{min-height:36px;padding:0 12px;font-size:13px}}
.ayuda-temas[hidden]{display:none}

/* ===== Demos en el celular: nada se sale ni se mueve de lado ===== */
.demo-slots .demo-ayuda{grid-column:1/-1;text-align:center;padding:10px 0}
.demo-admin-chip{font-size:10.5px}
@media (max-width:760px){
  .demo-browser-cuerpo{padding:18px;gap:18px}
  .demo-browser-url{font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* días: cinco columnas iguales, sin scroll horizontal */
  .demo-dias{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;overflow:visible;padding-bottom:0}
  .demo-dia{padding:0 2px;min-height:40px;font-size:12px;text-align:center;white-space:nowrap}
  .demo-slots{grid-template-columns:repeat(3,minmax(0,1fr))}
  .demo-slot{min-height:40px;font-size:13px}
  .demo-confirmar,.demo-confirmar-reserva{width:100%;min-height:48px}
  /* panel: marca arriba y las cuatro pestañas en una fila pareja */
  .demo-admin{padding:18px}
  .demo-admin-topbar{flex-wrap:wrap;gap:12px;padding-bottom:0;border-bottom:0}
  .demo-admin-nav{width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;font-size:12px;background:#F4F1E9;border-radius:12px;padding:4px}
  .demo-admin-nav:has(span:nth-child(5)){font-size:11px}
  .demo-admin-menu-row .nombre{flex:1;min-width:0}
  .demo-admin-nav span{justify-content:center;min-height:36px;border-radius:9px;border-bottom:0;padding:0 2px;white-space:nowrap;overflow:hidden}
  .demo-admin-nav span svg{display:none}
  .demo-admin-nav span.activo{background:var(--da-tiquete);box-shadow:0 1px 3px rgba(32,33,36,.12)}
  .demo-admin h4{font-size:22px}
  /* cifras: número arriba, etiqueta debajo, legible */
  .demo-admin-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .demo-admin-stat{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center;padding:12px}
  .demo-admin-stat .demo-admin-stat-icono{grid-row:span 2}
  .demo-admin-stat b{font-size:20px;line-height:1.1}
  .demo-admin-stat span:not(.demo-admin-stat-icono){font-size:12px;line-height:1.25}
  .demo-admin-stat:nth-child(3):last-child{grid-column:1/-1}
  /* filas: el servicio pasa a la segunda línea en vez de cortarse */
  .demo-admin-fila{padding:12px;gap:10px;align-items:flex-start}
  .demo-admin-fila .nombre{white-space:normal;font-size:13.5px;line-height:1.3}
  .demo-admin-fila .meta{white-space:normal;font-size:12px}
  .demo-admin-kanban-card .meta,.demo-admin-kanban-col h5{font-size:11.5px}
  .demo-admin-copiloto-row{flex-wrap:wrap}
  .demo-admin-copiloto-row .motivo{font-size:12px}
  .demo-admin-copiloto-row .btn-mini{min-height:36px;font-size:12px}
  .demo-admin-menu-row .editar{min-height:36px;font-size:12px}
  .demo-paso{font-size:11px}
}

/* Salud: la sexta tarjeta invita a preguntar */
.salud-otra{background:var(--carbon);border-color:var(--carbon);color:#fff;display:flex;flex-direction:column;justify-content:center}
.salud-otra h3{color:#fff}
.salud-otra p{color:rgba(255,255,255,.78)}
.salud-otra .btn-texto{color:#C9CEF5;align-self:flex-start;text-align:left;padding:8px 0;min-height:40px}
@media (max-width:760px){
  a.btn-texto,button.btn-texto,.industria-tag{display:inline-flex;align-items:center;min-height:40px}
  .demo-hero .articulo-volver{min-height:40px;margin-bottom:12px}
}

/* 404 */
.no-existe{max-width:620px;margin:72px auto 96px;text-align:center}
.no-existe-mas{margin-top:20px;font-size:14px}
.no-existe-mas a{color:var(--sello);font-weight:600;display:inline-flex;align-items:center;min-height:40px}
.no-existe .hero-ctas .btn{justify-content:center;text-align:center}