/* Satoshi y Outfit, self-hosted: el CSP solo permite font-src 'self' */
@font-face{font-family:'Satoshi';src:url('/assets/landing/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/assets/landing/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Outfit';src:url('/assets/landing/outfit-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

html,body{height:100%;margin:0}
/* hover rules */
.scp0:hover { border-color: rgb(255, 122, 0) !important; color: rgb(255, 122, 0) !important; }
.scp1:hover { background: rgb(255, 176, 92) !important; box-shadow: rgba(255, 122, 0, 0.45) 0px 18px 50px !important; }
.scp2:hover { transform: translateY(-6px) !important; box-shadow: rgba(255, 122, 0, 0.3) 0px 22px 50px !important; }
.scp3:hover { border-color: rgb(255, 122, 0) !important; background: rgba(255, 122, 0, 0.1) !important; }
.scp4:active { background: rgba(255, 122, 0, 0.18) !important; }
.scp5:hover { box-shadow: rgba(255, 122, 0, 0.65) 0px 0px 0px 1px !important; }
.scp6:hover { background: rgb(255, 176, 92) !important; box-shadow: rgba(255, 122, 0, 0.4) 0px 16px 44px !important; }
.scp7:hover { color: rgb(255, 122, 0) !important; }
.scp8:active { background: rgb(255, 176, 92) !important; }

/* design css */
html { background: rgb(13, 11, 9); }
body { margin: 0px; background: rgb(13, 11, 9); color: rgb(245, 241, 236); font-family: Satoshi, system-ui, -apple-system, sans-serif; font-size: 17px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: rgb(255, 122, 0); text-decoration: none; }
a:hover { color: rgb(255, 176, 92); }
:focus-visible { outline: rgb(255, 122, 0) solid 2px; outline-offset: 3px; border-radius: 6px; }
::selection { background: rgb(255, 122, 0); color: rgb(13, 11, 9); }
input::placeholder { color: rgb(111, 103, 95); }
::-webkit-scrollbar { width: 0px; height: 0px; }
@keyframes mdlspin { 
  100% { transform: rotate(360deg); }
}
@keyframes mdlfloat { 
  0%, 100% { transform: translateY(-8px); }
  50% { transform: translateY(8px); }
}
@keyframes mdlrun { 
  0% { transform: translateY(-7px) rotate(-1.2deg); }
  100% { transform: translateY(7px) rotate(1.2deg); }
}
@keyframes mdlstreak { 
  0% { transform: scaleX(0.2); opacity: 0; }
  45% { transform: scaleX(1); opacity: 0.95; }
  100% { transform: scaleX(0.2) translateX(-30%); opacity: 0; }
}
@keyframes mdlrise { 
  0% { transform: translateY(80px) scale(0.94); opacity: 0; }
  100% { transform: translateY(0px) scale(1); opacity: 1; }
}
@keyframes mdlline { 
  0% { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}
@keyframes mdlmarq { 
  100% { transform: translateX(-50%); }
}
@keyframes mdlshimmer { 
  0% { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(240%) skewX(-18deg); }
}
@keyframes mdlblink { 
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0px); }
  40% { opacity: 1; transform: translateY(-3px); }
}
@keyframes mdlpulse { 
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.5); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}
/* ── responsive ───────────────────────────────────────────────────────
   El diseno original conmutaba estos valores en JS con matchMedia.
   Aca viven en una media query: mismo corte (899px), sin trabajo en JS. */
@media (max-width: 899px){
  .r-hero-cols{grid-template-columns:minmax(0,1fr) !important}
  .r-two-cols{grid-template-columns:minmax(0,1fr) !important}
  .r-demo-cols{grid-template-columns:minmax(0,1fr) !important}
  .r-step-cols{grid-template-columns:minmax(0,1fr) !important}
  .r-panel-h{height:auto !important}
  .r-card-w{flex:0 0 84% !important}
  .r-card-h{min-height:290px !important}
  .r-step-size{width:64px !important}

  /* La seccion del panel deja de ser scroll horizontal ligado al scroll
     vertical y pasa a ser un carrusel normal, deslizable con el dedo. */
  .r-panel-h{padding:clamp(64px,9vw,132px) 0 !important}
  .r-panel-sticky{position:static !important;height:auto !important}
  .r-panel-row{width:100% !important;overflow-x:auto !important;
    transform:none !important;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-inline:20px}
  .r-panel-row > *{scroll-snap-align:center}

  /* La demo deja de ser sticky y el iframe no captura el gesto de scroll. */
  .r-demo-sticky{position:static !important;top:auto !important}

  /* Los pasos pasan de columna a fila. */
  .r-step{flex-direction:row !important;align-items:center !important;
    text-align:left !important;gap:22px !important}
  .r-step-size{height:64px !important;font-size:24px !important}

  /* Espacio para la barra fija de WhatsApp. */
  .r-foot{padding-bottom:72px !important}
}

/* ═══════════════════════════════════════════════════════════════════
   PULIDO — movimiento y jerarquía

   Un solo juego de tokens de duración y easing, para que todo el sitio
   se mueva con el mismo ritmo. Las reglas .scp* de arriba vienen del
   diseño original y se conservan; esto se suma, no las reemplaza.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --mdl-ease: cubic-bezier(.16,1,.3,1);   /* entradas: arranca rápido, frena suave */
  --mdl-rapido: .2s;                       /* hover y foco */
  --mdl-medio: .32s;                       /* cambios de estado */
  --mdl-naranja: #FF7A00;
}

/* Un salto de ancla a una sección que ahora está al final merece
   transición, no teletransporte. */
html{scroll-behavior:smooth}

/* ── respuesta al puntero ─────────────────────────────────────────
   Todo lo clickeable responde con el mismo lenguaje: sube al pasar
   por encima, se hunde al apretar. */
a[href], button, [role="switch"], [role="tab"]{
  transition: transform var(--mdl-rapido) var(--mdl-ease),
              box-shadow var(--mdl-rapido) var(--mdl-ease),
              background-color var(--mdl-rapido) ease,
              border-color var(--mdl-rapido) ease,
              color var(--mdl-rapido) ease;
}
a[href]:active, button:active{transform:scale(.97)}

/* ── tarjetas ─────────────────────────────────────────────────────
   Se levantan apenas y el borde toma color: indica que son una unidad,
   sin robarle protagonismo al texto. */
[data-card], [data-demo]{
  transition: transform var(--mdl-medio) var(--mdl-ease),
              box-shadow var(--mdl-medio) var(--mdl-ease),
              border-color var(--mdl-rapido) ease;
}
[data-card]:hover{
  box-shadow: 0 26px 60px rgba(0,0,0,.5),
              0 0 0 1px rgba(255,122,0,.55);
}

/* ── pasos ────────────────────────────────────────────────────────
   El número del paso reacciona al acercarse el puntero al bloque. */
[data-step]{transition: transform var(--mdl-medio) var(--mdl-ease)}
[data-step]:hover{transform:translateY(-4px)}

/* ── campos del formulario ────────────────────────────────────────
   El foco se ve, y el borde acompaña. */
input, textarea{
  transition: border-color var(--mdl-rapido) ease,
              background-color var(--mdl-rapido) ease;
}
input:hover, textarea:hover{border-color:rgba(255,255,255,.28)}
input:focus, textarea:focus{border-color:var(--mdl-naranja)}

/* ── área táctil ──────────────────────────────────────────────────
   Nada clickeable por debajo de 44px de alto. */
a[href], button{min-height:44px}
a[href]{display:inline-flex;align-items:center}
/* Los enlaces dentro de un párrafo son texto, no botones. */
p a[href], span a[href]{display:inline;min-height:0}

/* ── nada de esto se impone sobre la preferencia del sistema ────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  a[href], button, [data-card], [data-demo], [data-step],
  input, textarea, [role="switch"], [role="tab"]{
    transition-duration:.01ms !important;
  }
  a[href]:active, button:active,
  [data-card]:hover, [data-step]:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════
   BLOQUES REHECHOS — chat, tarjetas, pasos, marquee

   Estos bloques usan clases en vez de estilos inline, para que se
   puedan editar a mano. Comparten los tokens de --mdl-* de arriba.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --mdl-secY: clamp(88px, 11vw, 168px);
  --mdl-secX: clamp(20px, 6vw, 88px);
  --mdl-h2: clamp(34px, 4.6vw, 84px);
  --mdl-h3: clamp(24px, 2.6vw, 40px);
  --mdl-texto: #F5F1EC;
  --mdl-suave: #A69E95;
  --mdl-linea: rgba(255,255,255,.08);
  --mdl-superficie: #171310;
  --mdl-verde: #25D366;
}

.blk{padding:var(--mdl-secY) var(--mdl-secX);border-top:1px solid var(--mdl-linea)}
.blk h2{margin:0;font-weight:700;font-size:var(--mdl-h2);line-height:.92;letter-spacing:-.045em}
.blk h3{margin:0;font-weight:700;font-size:var(--mdl-h3);line-height:1.05;letter-spacing:-.035em}
.blk .lead{margin:20px 0 0;max-width:52ch;font-size:clamp(17px,1.3vw,20px);line-height:1.5;color:var(--mdl-suave)}
.blk p{margin:0}

/* Lista de checks: el icono y el texto alineados, el icono en verde. */
.ticks{list-style:none;margin:clamp(28px,3vw,40px) 0 0;padding:0;display:grid;gap:12px}
.ticks li{display:flex;align-items:center;gap:12px;font-size:17px;color:var(--mdl-texto)}
.ticks svg{color:var(--mdl-verde)}

/* ── profundidad ──────────────────────────────────────────────────
   Un contenedor con perspectiva y un hijo que gira segun --rx/--ry,
   que el JS actualiza con la posicion del puntero. Solo transform:
   el compositor lo anima sin recalcular layout. */
[data-tilt]{perspective:1100px}
[data-tilt] > *{
  transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition: transform .5s var(--mdl-ease), box-shadow .5s var(--mdl-ease);
  transform-style: preserve-3d;
  will-change: transform;
}
[data-tilt]:hover > *{transition-duration:.12s}

/* ── chat ─────────────────────────────────────────────────────────── */
.blk-chat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,88px);align-items:center}
.chat{
  border-radius:26px;background:#0B141A;
  box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1),
              inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;font-size:15px
}
.chat-top{display:flex;align-items:center;gap:12px;padding:16px 18px;background:#1F2C34;border-bottom:1px solid rgba(255,255,255,.06)}
.chat-top img{width:36px;height:auto}
.chat-top strong{display:block;color:#E9EDEF;font-size:15px}
.chat-status{display:flex;align-items:center;gap:6px;font-size:12px;color:#8696A0}
.chat-status i{width:7px;height:7px;border-radius:50%;background:var(--mdl-verde)}
.chat-body{
  padding:18px 16px 16px;min-height:300px;display:flex;flex-direction:column;gap:8px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.025) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.02) 0 1px, transparent 1.5px),
    #0B141A;
  background-size:60px 60px, 80px 80px, auto
}
.bubble{
  align-self:flex-start;max-width:86%;display:flex;align-items:center;gap:9px;
  padding:9px 12px;border-radius:14px;border-top-left-radius:4px;
  background:#202C33;color:#E9EDEF;line-height:1.35;
  opacity:0;transform:translateY(10px) scale(.98);
  transition: opacity .32s ease-out, transform .32s var(--mdl-ease)
}
.bubble.on{opacity:1;transform:none}
.bubble svg{color:#8696A0}
.bubble b{font-weight:700}
.bubble-fuerte{font-weight:700}
.bubble-total{background:#1E3A2A;color:var(--mdl-verde);font-weight:700;padding-right:52px;position:relative}
.bubble-total b{color:var(--mdl-verde)}
.bubble time{position:absolute;right:10px;bottom:6px;font-size:10px;color:#8696A0;font-weight:400}
.bubble time em{font-style:normal;color:#53BDEB}
.chat-typing{display:flex;gap:5px;align-items:center;height:36px;padding:0 14px;align-self:flex-start;border-radius:14px;background:#202C33}
.chat-typing[hidden]{display:none}
.chat-typing i{width:7px;height:7px;border-radius:50%;background:#8696A0;animation:mdlblink 1.2s infinite}
.chat-typing i:nth-child(2){animation-delay:.15s}
.chat-typing i:nth-child(3){animation-delay:.3s}

/* ── tarjetas ─────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,64px)}
.card{
  position:relative;padding:clamp(22px,2.4vw,32px);border-radius:26px;
  background:linear-gradient(160deg, #1B1613, var(--mdl-superficie));
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08),
              inset 0 1px 0 rgba(255,255,255,.05);
  display:flex;flex-direction:column;gap:18px
}
[data-tilt]:hover .card, .card:hover{
  box-shadow: 0 34px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,122,0,.5),
              0 0 60px rgba(255,122,0,.12), inset 0 1px 0 rgba(255,255,255,.08)
}
.card-ico{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:var(--mdl-naranja);
  background:rgba(255,122,0,.1);box-shadow:inset 0 0 0 1px rgba(255,122,0,.25);
  transform:translateZ(30px)
}
.card h3{font-size:clamp(22px,1.9vw,30px);transform:translateZ(20px)}
.card p{color:var(--mdl-suave);font-size:15px;line-height:1.5;transform:translateZ(14px)}
.card-demo{
  border-radius:16px;padding:14px;background:rgba(0,0,0,.35);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  transform:translateZ(24px);display:flex;flex-direction:column;gap:8px;font-size:13.5px;min-height:96px;justify-content:center
}
.card-demo-promos{flex-direction:row;flex-wrap:wrap;gap:8px;align-content:center}
.chip{padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:var(--mdl-suave);font-weight:700;letter-spacing:.02em;transition:all var(--mdl-medio) var(--mdl-ease)}
.chip-on{background:var(--mdl-naranja);color:#0D0B09;border-color:transparent}
.card:hover .chip:nth-child(2){background:rgba(255,122,0,.18);color:var(--mdl-texto);transition-delay:.05s}
.card:hover .chip:nth-child(3){background:rgba(255,122,0,.18);color:var(--mdl-texto);transition-delay:.12s}
.card-demo .row{display:flex;align-items:center;justify-content:space-between;color:var(--mdl-texto)}
.row-off span{color:var(--mdl-suave);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
.sw{position:relative;width:34px;height:20px;border-radius:999px;background:#3a3330;transition:background var(--mdl-medio) ease;flex-shrink:0}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform var(--mdl-medio) var(--mdl-ease)}
.sw-on{background:var(--mdl-verde)}
.sw-on::after{transform:translateX(14px)}
/* Al pasar por encima, el producto pausado se reactiva: se ve el gesto. */
.card:hover .row-off .sw{background:var(--mdl-verde)}
.card:hover .row-off .sw::after{transform:translateX(14px)}
.card:hover .row-off span{text-decoration-color:transparent;color:var(--mdl-texto)}
.pago-linea{display:flex;justify-content:space-between;align-items:center;color:var(--mdl-texto)}
.pago-linea b{font-weight:700}
.pago-ok{display:flex;align-items:center;gap:6px;color:var(--mdl-verde);font-weight:700;font-size:13px;padding:7px 10px;border-radius:10px;background:rgba(37,211,102,.1);transition:transform var(--mdl-medio) var(--mdl-ease)}
.card:hover .pago-ok{transform:scale(1.04)}

/* ── pasos ────────────────────────────────────────────────────────── */
.steps{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;text-align:center}
.steps-line{position:absolute;left:0;right:0;top:44px;width:100%;height:120px;pointer-events:none;z-index:0}
.steps li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px}
.step-orb{
  position:relative;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%, #221C17, #0D0B09 70%);
  box-shadow: 0 0 0 3px var(--mdl-naranja) inset, 0 24px 50px rgba(0,0,0,.6), 0 0 40px rgba(255,122,0,.15);
  transition: transform var(--mdl-medio) var(--mdl-ease), box-shadow var(--mdl-medio) ease
}
.step-orb span{position:absolute;top:-6px;right:-6px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--mdl-naranja);color:#0D0B09;font-weight:700;font-size:15px;box-shadow:0 8px 20px rgba(255,122,0,.4)}
.step-orb svg{width:38px;height:38px;color:var(--mdl-texto)}
.step-orb-fin{background:radial-gradient(circle at 35% 30%, #FF9A3C, var(--mdl-naranja) 70%);box-shadow:0 24px 50px rgba(0,0,0,.6), 0 0 60px rgba(255,122,0,.35)}
.step-orb-fin svg{color:#0D0B09}
.steps li:hover .step-orb{transform:translateY(-8px) scale(1.04);box-shadow:0 0 0 3px var(--mdl-naranja) inset, 0 34px 70px rgba(0,0,0,.65), 0 0 60px rgba(255,122,0,.3)}
.steps li:hover .step-orb-fin{box-shadow:0 34px 70px rgba(0,0,0,.65), 0 0 80px rgba(255,122,0,.5)}
.steps h3{font-size:clamp(20px,1.8vw,28px);margin-top:6px}
.steps p{color:var(--mdl-suave);font-size:15px}

/* ── marquee ──────────────────────────────────────────────────────── */
/* Antes: texto rgb(46,39,33) sobre rgb(16,13,11), contraste 1,3:1. Ilegible.
   Ahora #9C948B sobre el mismo fondo: 5,6:1. */
.mq{display:flex;align-items:center;width:max-content;animation:mdlmarq 32s linear infinite;
  font-weight:700;font-size:clamp(20px,2.4vw,34px);letter-spacing:-.03em;color:#9C948B;white-space:nowrap}
.mq-item{padding:0 28px}
.mq-logo{width:30px;height:auto;opacity:.9}

/* ── tienda: lista de features ────────────────────────────────────── */
.demo-num{display:inline-flex;align-items:center;gap:8px}
.demo-num svg{color:var(--mdl-naranja)}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width:899px){
  .blk-chat{grid-template-columns:minmax(0,1fr)}
  .cards{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr);gap:40px;text-align:left}
  .steps li{flex-direction:row;align-items:center;gap:20px}
  .steps-line{display:none}
  .step-orb{width:80px;height:80px;flex-shrink:0}
  .step-orb svg{width:28px;height:28px}
  [data-tilt] > *{transform:none !important}
}
@media (prefers-reduced-motion: reduce){
  [data-tilt] > *{transform:none !important;transition:none}
  .chat-typing i{animation:none}
  .mq{animation:none}
  .bubble{opacity:1;transform:none}
}


/* ═══════════════════════════════════════════════════════════════════
   HERO — logo sin titileo, bajada y CTA secundario
   ═══════════════════════════════════════════════════════════════════ */
/* El brillo vive en una capa que NO se anima: nada que re-rasterizar. */
.hero-glow{position:absolute;left:50%;top:52%;width:70%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle, rgba(255,122,0,.42) 0%, rgba(255,122,0,.12) 40%, rgba(255,122,0,0) 70%);
  filter:blur(18px);pointer-events:none;z-index:0}
.hero-logo{image-rendering:auto}
/* Flotacion con un leve balanceo: mas presencia, sin temblor. */
@keyframes mdlhover{
  0%,100%{transform:translateY(-10px) rotate(-1.4deg)}
  50%{transform:translateY(10px) rotate(1.2deg)}
}
.hero-lead{margin:22px 0 0;max-width:46ch;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--mdl-suave)}
.btn-sec{display:inline-flex;align-items:center;gap:9px;min-height:52px;padding:0 20px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);color:var(--mdl-texto);font-weight:700;font-size:16px;
  transition:border-color var(--mdl-rapido) ease,background var(--mdl-rapido) ease,transform var(--mdl-rapido) var(--mdl-ease)}
.btn-sec svg{color:var(--mdl-naranja)}
.btn-sec:hover{border-color:var(--mdl-naranja);background:rgba(255,122,0,.08);color:var(--mdl-texto)}
/* Los aros que giran en los badges: mas lentos, son decoracion. */
header li[data-rv] > div[aria-hidden="true"]{animation-duration:9s !important}

/* "El panel es tuyo": pegado al bloque de arriba, no a dos paddings. */
.blk-chat{padding-bottom:clamp(40px,5vw,72px)}
.blk-panel h2{padding-top:clamp(40px,5vw,72px)}

@media (prefers-reduced-motion: reduce){ .hero-glow{filter:none} }


/* ── iconos del sprite ────────────────────────────────────────────
   Un <use> NO hereda los atributos del <svg> donde vive el <symbol>:
   hereda del <svg> que lo referencia. Sin esto los iconos de trazo se
   pintaban rellenos de negro y sin contorno, casi invisibles. Los
   atributos tambien van en cada <symbol>; esto es el respaldo. */
svg:has(> use){fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}


/* ═══════════════════════════════════════════════════════════════════
   MOVIL — correcciones de la auditoria a 375 px
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:899px){
  /* Badges del hero: tres en fila, como en el diseno original. Estaban
     heredando la regla de "Tres pasos" y se apilaban en cuadrados de
     330 px: 1010 px de alto para tres numeros. */
  .hero-badges{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important}
  .hero-badges > li{min-height:0 !important;aspect-ratio:auto !important}
  .hero-badges > li > div:not([aria-hidden]){min-height:96px;padding:12px 10px !important}
  .hero-badges span[style*="clamp(26px"]{font-size:26px !important}
  .hero-badges span[style*="font-size: 14px"]{font-size:12px !important;line-height:1.25 !important}

  /* Titulo y CTAs del hero */
  header h1{font-size:clamp(34px,10vw,44px) !important;line-height:1 !important}
  .hero-lead{font-size:16px;margin-top:16px}
  header .scp1, .btn-sec{width:100%;justify-content:center}

  /* "Probala. Es real.": el deslizamiento es de escritorio. En movil el
     diseno original usaba 36 px entre items y 20 px arriba; con los
     34vh/22vh/30vh de escritorio la seccion medía 2128 px. */
  #demo ol{gap:28px !important;padding:24px 0 0 !important}
  #demo [data-demo]{opacity:1 !important;transform:none !important}

  /* Ritmo vertical un poco mas corto: en un telefono 88 px por lado ya
     es mucho aire. */
  :root{--mdl-secY:64px}
  .blk h2{font-size:clamp(32px,9vw,40px)}
  .card{padding:22px}
  .chat-body{min-height:0}
}


/* ═══════════════════════════════════════════════════════════════════
   LOGO QUE CORRE
   Tres movimientos, cada uno en su elemento, para que no se pisen:
   - el escenario flota lento (mdlhover, ya existente)
   - .hero-run rebota rapido como una zancada
   - la sombra del piso se achica cuando el logo sube
   Todo transform/opacity: el compositor lo mueve sin repintar el PNG.
   ═══════════════════════════════════════════════════════════════════ */
.hero-run{position:relative;z-index:1;width:min(92%,580px);
  animation:mdlzancada .46s cubic-bezier(.45,0,.55,1) infinite alternate;
  will-change:transform;transform-origin:50% 90%}
.hero-run .hero-logo{width:100%;height:auto;display:block}
@keyframes mdlzancada{
  0%  {transform:translate3d(0,6px,0) rotate(-3deg) scaleY(.98)}
  100%{transform:translate3d(6px,-16px,0) rotate(1.5deg) scaleY(1.01)}
}
.hero-shadow{position:absolute;left:50%;bottom:10%;width:46%;height:22px;margin-left:-23%;
  border-radius:50%;background:radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,0));
  animation:mdlsombra .46s cubic-bezier(.45,0,.55,1) infinite alternate;z-index:0}
@keyframes mdlsombra{0%{transform:scaleX(1);opacity:.9}100%{transform:scaleX(.72);opacity:.5}}
/* Estelas de velocidad: salen desde atras del logo hacia la izquierda. */
.hero-streak{height:5px !important;border-radius:3px !important;
  animation:mdlestela .92s cubic-bezier(.3,0,.2,1) infinite !important;transform-origin:right center}
.hero-streak:nth-of-type(2){animation-delay:.14s !important}
.hero-streak:nth-of-type(3){animation-delay:.28s !important}
@keyframes mdlestela{
  0%  {transform:translate3d(30px,0,0) scaleX(.15);opacity:0}
  30% {opacity:1}
  100%{transform:translate3d(-60px,0,0) scaleX(1);opacity:0}
}

/* ═══════════════════════════════════════════════════════════════════
   BARRA SUPERIOR FIJA
   Antes era sticky dentro del hero y desaparecia al terminarlo.
   ═══════════════════════════════════════════════════════════════════ */
.nav-fija{position:fixed;top:0;left:0;right:0;z-index:60;height:74px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--mdl-secX);border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
  animation:mdlnav .7s var(--mdl-ease) .1s both}
@keyframes mdlnav{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
/* El hero ya no tiene la barra adentro: se le devuelve ese alto. */
header{padding-top:74px !important}

/* ═══════════════════════════════════════════════════════════════════
   BOTONES — mismo radio que "Hablar por WhatsApp" y los badges (6 px)
   ═══════════════════════════════════════════════════════════════════ */
.btn-nav{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:6px;
  background:var(--mdl-naranja);color:#0D0B09;font-weight:700;font-size:15px;
  box-shadow:0 8px 24px rgba(255,122,0,.28);
  transition:background var(--mdl-rapido) ease,box-shadow var(--mdl-rapido) ease,transform var(--mdl-rapido) var(--mdl-ease)}
.btn-nav:hover{background:#FF9A3C;color:#0D0B09;box-shadow:0 12px 32px rgba(255,122,0,.42);transform:translateY(-1px)}
.btn-sec{border-radius:6px}
form button{border-radius:6px !important}

@media (max-width:899px){
  .hero-run{width:min(96%,420px)}
  .nav-fija{height:64px}
  header{padding-top:64px !important}
}
@media (prefers-reduced-motion: reduce){
  .hero-run,.hero-shadow,.hero-streak,.nav-fija{animation:none !important}
}


/* ═══════════════════════════════════════════════════════════════════
   TRES PASOS — cada paso se enciende cuando la linea lo alcanza
   ═══════════════════════════════════════════════════════════════════ */
.steps > li .step-orb{opacity:.45;transform:scale(.86);filter:saturate(.3);
  transition:opacity .5s ease,transform .6s cubic-bezier(.34,1.56,.64,1),filter .5s ease,box-shadow .5s ease}
.steps > li.on .step-orb{opacity:1;transform:scale(1);filter:none}
.steps > li .step-orb svg{transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.steps > li.on .step-orb svg{animation:mdlpop .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes mdlpop{0%{transform:scale(.4) rotate(-20deg)}60%{transform:scale(1.25) rotate(6deg)}100%{transform:none}}
.steps > li .step-orb span{transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1) .12s}
.steps > li.on .step-orb span{transform:scale(1)}
/* un anillo que late alrededor del paso encendido */
.steps > li .step-orb::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid rgba(255,122,0,.55);opacity:0;pointer-events:none}
.steps > li.on .step-orb::after{animation:mdlring 2.4s ease-out .3s infinite}
@keyframes mdlring{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.35);opacity:0}}
.steps > li h3,.steps > li p{transition:opacity .5s ease,transform .5s var(--mdl-ease)}
.steps > li:not(.on) h3,.steps > li:not(.on) p{opacity:.4;transform:translateY(6px)}
.steps-vline{display:none}

@media (max-width:899px){
  .steps{padding-left:0}
  /* Linea vertical que une los orbes y se llena con el scroll. */
  .steps-vline{display:block;position:absolute;left:39px;top:40px;bottom:40px;width:3px;border-radius:3px;
    background:rgba(255,255,255,.08);z-index:0}
  .steps-vline i{position:absolute;inset:0;border-radius:3px;background:linear-gradient(#FF7A00,#FFB05C);
    transform:scaleY(0);transform-origin:top}
  .steps > li:hover .step-orb{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════
   GRATIS
   ═══════════════════════════════════════════════════════════════════ */
#gratis{padding-bottom:clamp(64px,8vw,120px) !important}
#gratis ul svg{flex-shrink:0}
.free-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:26px;min-height:54px;
  padding:0 24px;border-radius:6px;background:var(--mdl-naranja);color:#0D0B09;font-weight:700;font-size:17px;
  box-shadow:0 14px 36px rgba(255,122,0,.3);align-self:flex-start;
  transition:transform var(--mdl-rapido) var(--mdl-ease),box-shadow var(--mdl-rapido) ease,background var(--mdl-rapido) ease}
.free-cta:hover{color:#0D0B09;background:#FF9A3C;transform:translateY(-2px);box-shadow:0 20px 44px rgba(255,122,0,.42)}
.free-cta svg{transition:transform var(--mdl-rapido) var(--mdl-ease)}
.free-cta:hover svg{transform:translateX(4px)}

/* ═══════════════════════════════════════════════════════════════════
   CIERRE — "Mandanos el menu"
   ═══════════════════════════════════════════════════════════════════ */
.blk-final{padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(96px,11vw,160px)}
.final{max-width:680px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.final .lead{margin-left:auto;margin-right:auto}
/* Icono con ondas que salen, como una notificacion entrando. */
.final-ico{position:relative;width:88px;height:88px;margin-bottom:28px;display:grid;place-items:center}
.final-ico span{position:relative;z-index:1;width:88px;height:88px;border-radius:26px;display:grid;place-items:center;
  background:linear-gradient(145deg,#2BE070,#1DA851);color:#fff;
  box-shadow:0 18px 44px rgba(37,211,102,.35),inset 0 1px 0 rgba(255,255,255,.3);
  animation:mdlboton 3.2s ease-in-out infinite}
.final-ico span svg{width:44px;height:44px}
.final-ico i{position:absolute;inset:0;border-radius:26px;border:2px solid rgba(37,211,102,.55);
  animation:mdlonda 2.4s ease-out infinite}
.final-ico i:nth-child(2){animation-delay:.8s}
.final-ico i:nth-child(3){animation-delay:1.6s}
@keyframes mdlonda{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
@keyframes mdlboton{0%,100%{transform:rotate(0)}6%{transform:rotate(-9deg)}12%{transform:rotate(8deg)}18%{transform:rotate(-5deg)}24%{transform:rotate(0)}}
/* Mensaje que se escribe solo */
.final-msg{margin-top:26px;min-height:48px;display:inline-flex;align-items:center;gap:2px;padding:12px 18px;
  border-radius:16px;border-bottom-right-radius:4px;background:#005C4B;color:#E9EDEF;font-size:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);max-width:100%}
.final-msg b{width:2px;height:18px;background:#E9EDEF;animation:mdlcursor 1s steps(1) infinite}
@keyframes mdlcursor{50%{opacity:0}}
.final-cta{position:relative;overflow:hidden;margin-top:26px;display:inline-flex;align-items:center;gap:12px;
  min-height:62px;padding:0 30px;border-radius:6px;background:var(--mdl-naranja);color:#0D0B09;
  font-weight:700;font-size:18px;box-shadow:0 18px 48px rgba(255,122,0,.35);
  transition:transform var(--mdl-rapido) var(--mdl-ease),box-shadow var(--mdl-rapido) ease,background var(--mdl-rapido) ease}
.final-cta svg{width:22px;height:22px;flex-shrink:0}
/* un brillo que cruza el boton cada tanto */
.final-cta::before{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-160%) skewX(-18deg);animation:mdlbrillo 3.6s ease-in-out 1s infinite}
@keyframes mdlbrillo{0%,55%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(360%) skewX(-18deg)}}
.final-cta:hover{color:#0D0B09;background:#FF9A3C;transform:translateY(-2px);box-shadow:0 26px 60px rgba(255,122,0,.45)}
.final-cta:hover svg:last-child{transform:translateX(4px)}
.final-cta svg:last-child{transition:transform var(--mdl-rapido) var(--mdl-ease)}
.final-nota{display:inline-flex;align-items:center;gap:7px;margin-top:16px !important;color:var(--mdl-suave);font-size:14px}

@media (max-width:899px){
  .final-cta{width:100%;justify-content:center;padding:0 18px;font-size:17px}
  .free-cta{width:100%}
  .final-msg{font-size:15px}
}
@media (prefers-reduced-motion: reduce){
  .final-ico span,.final-ico i,.final-cta::before,.final-msg b,
  .steps > li.on .step-orb::after,.steps > li.on .step-orb svg{animation:none !important}
}


/* ── logo junto a mandalo.online/mdt (antes, un punto naranja que titilaba) ── */
.demo-url-logo{width:34px;height:auto;display:inline-block;vertical-align:middle;margin-right:4px;
  animation:mdlzancada .46s cubic-bezier(.45,0,.55,1) infinite alternate;transform-origin:50% 90%}

/* ── tienda cargando: el logo corre adentro del telefono ──────────────
   No recibe toques y se desvanece cuando la tienda esta lista. */
.tienda-carga{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;pointer-events:none;transition:opacity .45s ease,visibility .45s}
.tienda-carga img{width:96px;height:auto;animation:mdlzancada .46s cubic-bezier(.45,0,.55,1) infinite alternate;transform-origin:50% 90%}
.tienda-carga i{width:110px;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.tienda-carga i::after{content:"";position:absolute;inset:0;width:40%;border-radius:4px;background:var(--mdl-naranja);
  animation:mdlbarra 1.3s ease-in-out infinite}
@keyframes mdlbarra{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.tienda-carga.lista{opacity:0;visibility:hidden}
.tienda-carga.lista img,.tienda-carga.lista i::after{animation:none}
@media (prefers-reduced-motion: reduce){.demo-url-logo,.tienda-carga img,.tienda-carga i::after{animation:none}}


/* ═══════════════════════════════════════════════════════════════════
   "HOY ARRANCAS GRATIS" — dos columnas en escritorio
   Antes titulo y tarjeta iban apilados a la izquierda y quedaban 790 px
   vacios a la derecha.
   ═══════════════════════════════════════════════════════════════════ */
#gratis{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,560px);
  column-gap:clamp(40px,6vw,120px);row-gap:40px;align-items:center !important}
#gratis #mdl-free{justify-self:end;max-width:560px}
.free-txt{display:flex;flex-direction:column}
.free-lead{margin:22px 0 0;max-width:44ch;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--mdl-suave)}
.free-garantias{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.free-garantias li{display:flex;align-items:center;gap:12px;font-size:17px;color:var(--mdl-texto)}
.free-garantias svg{color:var(--mdl-verde)}
@media (max-width:899px){
  #gratis{grid-template-columns:minmax(0,1fr)}
  #gratis #mdl-free{justify-self:stretch}
}


/* ═══════════════════════════════════════════════════════════════════
   BLOQUE POS
   ═══════════════════════════════════════════════════════════════════ */
.blk-pos{position:relative;overflow:hidden}
.blk-pos::before{content:"";position:absolute;right:-10%;top:10%;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,0,.14),rgba(255,122,0,0) 65%);pointer-events:none}
.pos-head{position:relative;max-width:760px}
.pos-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:7px 14px;border-radius:999px;
  background:rgba(255,122,0,.1);box-shadow:inset 0 0 0 1px rgba(255,122,0,.3);color:#FFB05C;font-weight:700;font-size:14px}
.pos-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(36px,5vw,80px);align-items:center;margin-top:clamp(40px,5vw,64px)}

/* escenario */
.pos-stage{position:relative;padding:20px 0 60px}
.pos-screen{border-radius:22px;background:#15110E;overflow:hidden;
  box-shadow:0 50px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.06)}
.pos-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#1D1814;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px}
.pos-dots{display:flex;gap:6px}
.pos-dots i{width:9px;height:9px;border-radius:50%;background:#3a322c}
.pos-bar-t{display:flex;align-items:center;gap:7px;color:#D9D2CA;font-weight:700}
.pos-bar-t svg{color:var(--mdl-naranja)}
.pos-live{margin-left:auto;display:flex;align-items:center;gap:6px;color:#8FE3B0;font-weight:700;font-size:12px}
.pos-live i{width:7px;height:7px;border-radius:50%;background:var(--mdl-verde);animation:mdlpulse 1.6s ease-in-out infinite}
.pos-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);min-height:330px}
.pos-prods{padding:14px;border-right:1px solid rgba(255,255,255,.06)}
.pos-cats{display:flex;gap:6px;margin-bottom:12px;font-size:12px}
.pos-cats b,.pos-cats span{padding:5px 10px;border-radius:999px}
.pos-cats b{background:var(--mdl-naranja);color:#0D0B09}
.pos-cats span{background:rgba(255,255,255,.05);color:#A69E95}
.pos-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pos-tile{min-height:0 !important;display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:11px;border-radius:12px;
  border:1px solid rgba(255,255,255,.07);background:linear-gradient(160deg,#211B16,#191410);color:#F5F1EC;
  font:inherit;text-align:left;cursor:default;pointer-events:none;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.pos-tile-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,122,0,.12);color:var(--mdl-naranja)}
.pos-tile-n{font-size:12.5px;font-weight:700;line-height:1.2}
.pos-tile-p{font-size:12px;color:#A69E95}
.pos-tile.tap{animation:mdltap .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes mdltap{0%{transform:scale(1)}35%{transform:scale(.9);border-color:var(--mdl-naranja);background:#2B1E13}100%{transform:scale(1)}}
.pos-ticket{display:flex;flex-direction:column;padding:14px;background:#120E0B}
.pos-ticket-h{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#A69E95;margin-bottom:10px}
.pos-mesa{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.05);color:#D9D2CA}
.pos-lines{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;gap:6px;min-height:120px}
.pos-lines li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:6px;align-items:center;font-size:12.5px;
  padding:7px 8px;border-radius:9px;background:rgba(255,255,255,.035);opacity:0;transform:translateX(14px);
  transition:opacity .3s ease,transform .35s var(--mdl-ease)}
.pos-lines li.on{opacity:1;transform:none}
.pos-lines li.bump{animation:mdlbump .35s ease}
@keyframes mdlbump{50%{background:rgba(255,122,0,.18)}}
.pos-lines .q{color:var(--mdl-naranja);font-weight:700}
.pos-lines .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pos-lines .p{font-variant-numeric:tabular-nums;color:#D9D2CA}
.pos-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.12)}
.pos-total span{font-size:12px;color:#A69E95}
.pos-total b{font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pos-pay{display:flex;gap:6px;margin-top:10px}
.pos-pm{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px;border-radius:8px;font-size:11.5px;
  background:rgba(255,255,255,.04);color:#A69E95}
.pos-pm-on{background:rgba(37,211,102,.12);color:#8FE3B0;box-shadow:inset 0 0 0 1px rgba(37,211,102,.3)}
.pos-cobrar{margin-top:10px;padding:11px;border-radius:10px;text-align:center;font-weight:700;font-size:14px;
  background:rgba(255,122,0,.18);color:#FFB05C;transition:background .3s ease,color .3s ease,transform .3s var(--mdl-ease),box-shadow .3s ease}
.pos-cobrar.on{background:var(--mdl-naranja);color:#0D0B09;box-shadow:0 10px 30px rgba(255,122,0,.4);animation:mdllate 1s ease-in-out infinite}
.pos-cobrar.ok{background:var(--mdl-verde);color:#06240F;box-shadow:0 10px 30px rgba(37,211,102,.35);animation:none;transform:scale(1.02)}
@keyframes mdllate{50%{transform:scale(1.035)}}

/* impresora de cocina: la comanda sale cuando se cobra */
.pos-printer{position:absolute;right:-18px;bottom:-4px;width:190px;z-index:3}
.pos-printer-top{position:relative;z-index:2;display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:14px;
  background:linear-gradient(160deg,#2A241F,#1C1814);color:#F5F1EC;font-size:13px;font-weight:700;
  box-shadow:0 20px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
.pos-printer-top svg{color:var(--mdl-naranja)}
.pos-printer-top i{margin-left:auto;width:8px;height:8px;border-radius:50%;background:#3a322c;transition:background .3s ease}
.pos-cobrado .pos-printer-top i{background:var(--mdl-verde);box-shadow:0 0 10px var(--mdl-verde)}
.pos-comanda{position:relative;z-index:1;margin:-8px 14px 0;padding:14px 12px 12px;border-radius:0 0 6px 6px;
  background:#FBF7F1;color:#1A1410;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.5;
  box-shadow:0 14px 30px rgba(0,0,0,.4);transform:translateY(-100%);clip-path:inset(100% 0 0 0);
  transition:transform 1.1s cubic-bezier(.3,.7,.2,1),clip-path 1.1s cubic-bezier(.3,.7,.2,1)}
.pos-comanda.sale{transform:none;clip-path:inset(0 0 0 0)}
.pos-comanda b{display:block;margin-bottom:6px;padding-bottom:6px;border-bottom:1px dashed #b9ada0;font-size:11px;letter-spacing:.04em}
.pos-comanda em{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed #b9ada0;font-style:normal;color:#7a6d60;font-size:10.5px}

/* burbujas flotantes */
.pos-float{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:12px;
  background:rgba(22,18,15,.92);backdrop-filter:blur(8px);box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1);
  font-size:13px;font-weight:600;color:#F5F1EC;white-space:nowrap}
.pos-float svg{color:var(--mdl-verde)}
.pos-float-a{left:-14px;top:-4px;opacity:0;transform:translateY(10px) scale(.95);transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.pos-cobrado .pos-float-a{opacity:1;transform:none}
.pos-float-b{left:8%;bottom:6px;animation:mdlflota 4s ease-in-out infinite}
.pos-float-b svg{color:var(--mdl-naranja)}
@keyframes mdlflota{50%{transform:translateY(-8px)}}

/* funciones */
.pos-feats{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pos-feat{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border-radius:18px;
  background:linear-gradient(160deg,#1A1511,#141009);box-shadow:0 0 0 1px rgba(255,255,255,.07);
  transition:transform .3s var(--mdl-ease),box-shadow .3s ease,background .3s ease}
.pos-feat:hover{transform:translateX(6px);box-shadow:0 0 0 1px rgba(255,122,0,.45),0 16px 40px rgba(0,0,0,.35)}
.pos-feat-ico{flex-shrink:0;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--mdl-naranja);
  background:rgba(255,122,0,.1);box-shadow:inset 0 0 0 1px rgba(255,122,0,.25);transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .3s ease,color .3s ease}
.pos-feat:hover .pos-feat-ico{transform:rotate(-8deg) scale(1.08);background:var(--mdl-naranja);color:#0D0B09}
.pos-feat h3{font-size:18px !important;margin:2px 0 4px !important;letter-spacing:-.02em}
.pos-feat p{color:var(--mdl-suave);font-size:14.5px;line-height:1.45;margin:0}

@media (max-width:1100px){
  .pos-grid{grid-template-columns:minmax(0,1fr)}
  .pos-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .pos-feats{grid-template-columns:minmax(0,1fr)}
  .pos-body{grid-template-columns:minmax(0,1fr)}
  .pos-prods{border-right:0;border-bottom:1px solid rgba(255,255,255,.06)}
  .pos-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .pos-tile{padding:8px}
  .pos-tile-ico{width:26px;height:26px}
  .pos-printer{right:-6px;width:160px}
  .pos-float-a{left:-4px}
  .pos-float-b{display:none}
  .pos-stage{padding-bottom:80px}
}
@media (prefers-reduced-motion: reduce){
  .pos-live i,.pos-cobrar.on,.pos-float-b,.pos-tile.tap{animation:none}
}

/* Badges del bloque POS: mismo radio (6 px) que los botones y los badges
   del hero, en vez de pildoras. */
.pos-eyebrow,
.pos-cats b, .pos-cats span,
.pos-mesa,
.pos-pm,
.pos-float{border-radius:6px}


/* ── giro de los bordes naranjas ──────────────────────────────────────
   Los aros de los badges del hero y de la tarjeta "Gratis" estan
   centrados con translate(-50%,-50%). La animacion original solo decia
   rotate(360deg) y pisaba ese centrado: el brillo giraba desplazado.
   Esta version (la ultima @keyframes con el mismo nombre es la que vale)
   conserva el centrado mientras gira. */
@keyframes mdlspin{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}


/* ── hero: icono del badge POS ───────────────────────────────────── */
.hero-badge-ico{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:6px;display:grid;place-items:center;
  color:var(--mdl-naranja);background:rgba(255,122,0,.12);box-shadow:inset 0 0 0 1px rgba(255,122,0,.3)}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER — una sola fila fina, con el lockup del header
   ═══════════════════════════════════════════════════════════════════ */
.pie{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 28px;
  padding:16px var(--mdl-secX);border-top:1px solid var(--mdl-linea);font-size:13px;color:#8A837B}
.pie-marca{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--mdl-texto);
  font-weight:700;font-size:15px;letter-spacing:-.03em}
.pie-marca:hover{color:var(--mdl-texto)}
.pie-marca img{width:30px;height:auto;display:block}
.pie-marca i{width:5px;height:5px;border-radius:50%;background:#25D366}
.pie-online{color:#D9D2CA}
.pie-links{display:flex;gap:4px 22px;flex-wrap:wrap}
.pie-links a{display:inline-flex;align-items:center;min-height:44px;color:#A69E95;font-size:13px}
.pie-links a:hover{color:var(--mdl-naranja)}
.pie-copy{color:#6F675F}
@media (max-width:899px){
  .pie{justify-content:center;text-align:center;padding-bottom:84px}
  .pie-links{justify-content:center}
  .pie-copy{width:100%}
}


/* ═══════════════════════════════════════════════════════════════════
   "PROBALA. ES REAL." — tarjetas con animacion propia
   ═══════════════════════════════════════════════════════════════════ */
.demo-lead{flex-basis:100%;margin:16px 0 0;max-width:52ch;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--mdl-suave)}

/* La lista: menos aire entre tarjetas (ahora ocupan mas), mismo efecto. */
.demo-feats{position:relative;list-style:none;margin:0;padding:12vh 0 22vh 34px !important;
  display:flex;flex-direction:column;gap:16vh !important}
.demo-rail{position:absolute;left:0;top:12vh;bottom:22vh;width:3px;border-radius:3px;background:rgba(255,255,255,.07)}
.demo-rail i{position:absolute;inset:0;border-radius:3px;background:linear-gradient(#FF7A00,#FFB05C);
  transform:scaleY(0);transform-origin:top;box-shadow:0 0 14px rgba(255,122,0,.5)}

.demo-card{position:relative;max-width:560px;padding:26px 26px 22px;border-radius:14px;
  background:linear-gradient(160deg,#1A1511,#130F0C);box-shadow:0 0 0 1px rgba(255,255,255,.07),0 30px 70px rgba(0,0,0,.35);
  transition:opacity .45s ease,transform .6s var(--mdl-ease),box-shadow .45s ease}
.demo-card.activa{box-shadow:0 0 0 1px rgba(255,122,0,.45),0 30px 80px rgba(0,0,0,.45),0 0 60px rgba(255,122,0,.08)}
/* el punto de la barra que marca la tarjeta activa */
.demo-card::before{content:"";position:absolute;left:-40px;top:34px;width:13px;height:13px;border-radius:50%;
  background:#0D0B09;box-shadow:0 0 0 3px rgba(255,255,255,.14);transition:box-shadow .35s ease,background .35s ease}
.demo-card.activa::before{background:var(--mdl-naranja);box-shadow:0 0 0 4px rgba(255,122,0,.25),0 0 16px rgba(255,122,0,.7)}
.demo-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.demo-card-ico{width:48px;height:48px;border-radius:6px;display:grid;place-items:center;color:var(--mdl-naranja);
  background:rgba(255,122,0,.1);box-shadow:inset 0 0 0 1px rgba(255,122,0,.28);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .35s ease,color .35s ease}
.demo-card.activa .demo-card-ico{background:var(--mdl-naranja);color:#0D0B09;transform:rotate(-6deg) scale(1.06)}
.demo-card-num{font-weight:700;font-size:13px;letter-spacing:.12em;color:#5E5750}
.demo-card.activa .demo-card-num{color:var(--mdl-naranja)}
.demo-card h3{margin:0 !important;font-size:clamp(26px,2.4vw,36px) !important;line-height:1.05;letter-spacing:-.035em}
.demo-card p{margin:8px 0 0;color:var(--mdl-suave);font-size:16px;line-height:1.45}

/* Mini visual de cada tarjeta. Sus animaciones solo corren si la
   tarjeta esta activa (animation-play-state). */
.dv{position:relative;margin-top:18px;height:132px;border-radius:12px;overflow:hidden;
  background:#0F0C0A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);font-size:13px}
.dv *{animation-play-state:paused}
.demo-card.activa .dv *{animation-play-state:running}

/* 1. carrito que sobrevive a cerrar la pestania */
.dv-carrito{padding:12px}
.dv-ventana{position:absolute;inset:0;display:flex;gap:5px;padding:10px 12px;background:#1B1612;z-index:2;
  animation:dvventana 4.2s ease-in-out infinite}
.dv-ventana span{width:8px;height:8px;border-radius:50%;background:#3a322c}
@keyframes dvventana{0%,20%{opacity:0}28%,52%{opacity:1}60%,100%{opacity:0}}
.dv-cart{display:flex;flex-direction:column;gap:7px}
.dv-cart-row{display:flex;gap:8px;align-items:center;padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.04);color:#D9D2CA}
.dv-cart-row b{color:var(--mdl-naranja)}
.dv-cart-row em{margin-left:auto;font-style:normal;color:#A69E95}
.dv-cart-foot{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 0}
.dv-cart-foot strong{font-size:16px}
.dv-ok{display:inline-flex;align-items:center;gap:5px;color:#8FE3B0;font-weight:700;font-size:12px;
  animation:dvok 4.2s ease-in-out infinite}
@keyframes dvok{0%,58%{opacity:.35}66%,100%{opacity:1}}
.dv-ok svg{color:var(--mdl-verde)}

/* 2. mapa con zonas y un pin que cae */
.dv-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px}
.dv-zona{position:absolute;left:28%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.dv-z1{width:120px;height:120px;background:rgba(37,211,102,.1);box-shadow:inset 0 0 0 1.5px rgba(37,211,102,.4)}
.dv-z2{width:240px;height:240px;background:rgba(255,122,0,.06);box-shadow:inset 0 0 0 1.5px rgba(255,122,0,.35)}
.dv-local{position:absolute;left:28%;top:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:6px;
  display:grid;place-items:center;background:var(--mdl-naranja);color:#0D0B09}
.dv-pin{position:absolute;left:48%;top:24%;color:#FF5F57;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));
  animation:dvpin 3.4s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes dvpin{0%{transform:translateY(-40px);opacity:0}18%{transform:none;opacity:1}85%{opacity:1}100%{opacity:0}}
.dv-envio{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  padding:8px 10px;border-radius:8px;background:rgba(22,18,15,.92);box-shadow:0 0 0 1px rgba(255,255,255,.1);
  animation:dvenvio 3.4s ease infinite}
.dv-envio span{font-size:11px;color:#A69E95}
.dv-envio b{color:var(--mdl-naranja)}
@keyframes dvenvio{0%,22%{opacity:0;transform:translateY(8px)}32%,86%{opacity:1;transform:none}100%{opacity:0}}

/* 3. delivery / take away */
.dv-modo{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:14px}
.dv-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:10px;background:#1B1612}
.dv-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:7px;background:var(--mdl-naranja);
  animation:dvthumb 4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes dvthumb{0%,42%{transform:none}50%,92%{transform:translateX(100%)}100%{transform:none}}
.dv-op{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;font-weight:700}
.dv-op-a{animation:dvopa 4s infinite}
.dv-op-b{animation:dvopb 4s infinite}
@keyframes dvopa{0%,42%{color:#0D0B09}50%,92%{color:#A69E95}100%{color:#0D0B09}}
@keyframes dvopb{0%,42%{color:#A69E95}50%,92%{color:#0D0B09}100%{color:#A69E95}}
.dv-modo-info{position:relative;height:18px;text-align:center;color:#D9D2CA}
.dv-modo-info span{position:absolute;inset:0}
.dv-mi-a{animation:dvmia 4s infinite}
.dv-mi-b{animation:dvmib 4s infinite}
@keyframes dvmia{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes dvmib{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}

/* 4. buscador que escribe solo */
.dv-buscar{display:flex;flex-direction:column;gap:9px;padding:12px}
.dv-input{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:8px;background:#fff;color:#1A1410}
.dv-input svg{color:#8A837B}
.dv-typed{display:inline-block;overflow:hidden;white-space:nowrap;max-width:0;animation:dvtype 4.4s steps(17) infinite}
@keyframes dvtype{0%{max-width:0}40%,85%{max-width:17ch}100%{max-width:0}}
.dv-caret{width:1.5px;height:14px;background:#1A1410;animation:mdlcursor 1s steps(1) infinite}
.dv-chips{display:flex;gap:6px}
.dv-chips span{padding:4px 9px;border-radius:6px;background:rgba(255,255,255,.05);color:#A69E95;font-size:11.5px}
.dv-chips span.on{background:var(--mdl-naranja);color:#0D0B09;font-weight:700}
.dv-result{display:flex;gap:10px;align-items:center;padding:7px;border-radius:8px;background:rgba(255,255,255,.04);
  animation:dvres 4.4s ease infinite}
.dv-result span{width:34px;height:34px;border-radius:6px;background:linear-gradient(135deg,#C9822E,#7A3F12)}
.dv-result b{display:block;font-size:12.5px}
.dv-result em{font-style:normal;color:var(--mdl-naranja);font-size:12px;font-weight:700}
@keyframes dvres{0%,38%{opacity:0;transform:translateY(6px)}46%,88%{opacity:1;transform:none}100%{opacity:0}}

/* 5. tema claro / oscuro */
.dv-tema{display:flex;align-items:center;justify-content:center;gap:22px;animation:dvfondo 4.6s ease-in-out infinite}
@keyframes dvfondo{0%,40%{background:#EFE9E1}50%,90%{background:#0F0C0A}100%{background:#EFE9E1}}
.dv-tema-card{width:150px;padding:10px;border-radius:10px;display:flex;flex-direction:column;gap:6px;
  animation:dvcard 4.6s ease-in-out infinite}
@keyframes dvcard{0%,40%{background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.12)}50%,90%{background:#1E1915;box-shadow:0 8px 20px rgba(0,0,0,.5)}100%{background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.12)}}
.dv-tema-bar{height:22px;border-radius:6px;background:var(--mdl-naranja)}
.dv-tema-l{height:7px;border-radius:4px;animation:dvlinea 4.6s ease-in-out infinite}
.dv-corta{width:60%}
@keyframes dvlinea{0%,40%{background:#D9D2CA}50%,90%{background:#3A322C}100%{background:#D9D2CA}}
.dv-tema-btn{height:16px;width:50%;border-radius:5px;background:#1A1410;animation:dvbtn 4.6s ease-in-out infinite}
@keyframes dvbtn{0%,40%{background:#1A1410}50%,90%{background:#F5F1EC}100%{background:#1A1410}}
.dv-tema-sw{position:relative;width:58px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:space-between;
  padding:0 8px;animation:dvsw 4.6s ease-in-out infinite}
@keyframes dvsw{0%,40%{background:#D9D2CA}50%,90%{background:#2A231E}100%{background:#D9D2CA}}
.dv-tema-sw svg{position:relative;z-index:1}
.dv-sol{color:#B45309}
.dv-luna{color:#FFB05C}
.dv-tema-sw i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.25);animation:dvswi 4.6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes dvswi{0%,40%{transform:none}50%,90%{transform:translateX(28px)}100%{transform:none}}

@media (max-width:899px){
  .demo-feats{padding:24px 0 0 26px !important;gap:18px !important}
  .demo-rail{top:24px;bottom:0}
  .demo-card{padding:20px 18px 18px}
  .demo-card::before{left:-32px}
  .dv-envio{right:6px}
}
@media (prefers-reduced-motion: reduce){
  .dv *{animation:none !important}
  .dv-ventana{opacity:0}
  .dv-typed{max-width:17ch}
  .dv-result,.dv-envio{opacity:1}
}


/* ── pantalla del telefono de la tienda ───────────────────────────────
   El marco toma su alto de aspect-ratio y la pantalla tenia height:100%.
   WebKit (Safari, y Chrome en iPhone, que usa el mismo motor) no siempre
   resuelve ese porcentaje: la pantalla quedaba con 0 px de alto y la
   tienda y el logo de carga no se veian. Posicionada con inset contra el
   padding de 11 px del marco, funciona en cualquier motor. */
.tel-pantalla{position:absolute !important;inset:11px;width:auto !important;height:auto !important}

/* Las mini animaciones de las tarjetas: quietas salvo en la activa. El
   shorthand "animation" de cada pieza reseteaba el play-state, por eso
   hace falta !important. */
.demo-card:not(.activa) .dv *{animation-play-state:paused !important}


/* ═══════════════════════════════════════════════════════════════════
   BENTO — "Promos, stock y pagos"
   ═══════════════════════════════════════════════════════════════════ */
.blk-bento{position:relative;overflow:hidden}
.blk-bento::before{content:"";position:absolute;left:-15%;bottom:-10%;width:55%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,0,.1),rgba(255,122,0,0) 65%);pointer-events:none}
.bn-top{position:relative;max-width:760px}
.bn-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:7px 14px;border-radius:6px;
  background:rgba(255,122,0,.1);box-shadow:inset 0 0 0 1px rgba(255,122,0,.3);color:#FFB05C;font-weight:700;font-size:14px}

.bn-grid{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(0,auto);
  gap:16px;margin-top:clamp(40px,5vw,64px)}
.bn-promo{grid-column:span 3;grid-row:span 2}
.bn-stock{grid-column:span 3}
.bn-compro{grid-column:span 3;grid-row:span 2}
.bn-medios{grid-column:span 3}
.bn-recargo{grid-column:span 3}
.bn-ventas{grid-column:span 3}

.bn{position:relative;display:flex;flex-direction:column;padding:24px;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,#1B1612,#130F0C);box-shadow:0 0 0 1px rgba(255,255,255,.07),0 24px 60px rgba(0,0,0,.35);
  transition:transform .4s var(--mdl-ease),box-shadow .4s ease}
.bn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,122,0,.12),transparent 60%);transition:opacity .3s ease}
.bn:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(255,122,0,.45),0 30px 70px rgba(0,0,0,.45)}
.bn:hover::after{opacity:1}
.bn-head{display:flex;align-items:center;gap:12px}
.bn-ico{flex-shrink:0;width:44px;height:44px;border-radius:6px;display:grid;place-items:center;color:var(--mdl-naranja);
  background:rgba(255,122,0,.1);box-shadow:inset 0 0 0 1px rgba(255,122,0,.28);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .3s ease,color .3s ease}
.bn:hover .bn-ico{transform:rotate(-8deg) scale(1.08);background:var(--mdl-naranja);color:#0D0B09}
.bn h3{margin:0 !important;font-size:clamp(20px,1.7vw,26px) !important;letter-spacing:-.03em;line-height:1.1}
.bn > p{margin:10px 0 0;color:var(--mdl-suave);font-size:15px;line-height:1.45}
.bn-viz{position:relative;margin-top:18px;flex:1;display:flex;flex-direction:column;gap:10px;font-size:13.5px}

/* Todo lo animado queda quieto hasta que la seccion esta a la vista. */
.blk-bento .bn-viz *{animation-play-state:paused !important}
.blk-bento.en-vista .bn-viz *{animation-play-state:running !important}

/* 1. cupon que se aplica */
.bn-cupon{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;
  background:repeating-linear-gradient(90deg,rgba(255,122,0,.12) 0 10px,rgba(255,122,0,.06) 10px 20px);
  box-shadow:inset 0 0 0 1.5px rgba(255,122,0,.45);border:0}
.bn-cupon-l{width:38px;height:38px;border-radius:6px;display:grid;place-items:center;background:var(--mdl-naranja);color:#0D0B09}
.bn-cupon b{display:block;letter-spacing:.06em;font-size:15px}
.bn-cupon em{font-style:normal;color:#A69E95;font-size:12.5px}
.bn-cupon-ok{margin-left:auto;padding:5px 9px;border-radius:6px;background:rgba(37,211,102,.14);color:#8FE3B0;font-weight:700;font-size:12px;
  animation:bnok 4.8s ease infinite}
@keyframes bnok{0%,30%{opacity:0;transform:scale(.8)}38%,90%{opacity:1;transform:none}100%{opacity:0}}
.bn-cuenta{padding:12px 14px;border-radius:10px;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);display:flex;flex-direction:column;gap:7px}
.bn-fila{display:flex;justify-content:space-between;color:#D9D2CA}
.bn-desc{color:#8FE3B0;animation:bndesc 4.8s ease infinite}
@keyframes bndesc{0%,30%{opacity:0;transform:translateX(-8px)}40%,90%{opacity:1;transform:none}100%{opacity:0}}
.bn-total{padding-top:8px;border-top:1px dashed rgba(255,255,255,.12);font-weight:700}
.bn-total s{color:#6F675F;font-weight:400;margin-right:8px;animation:bntach 4.8s ease infinite}
.bn-total b{font-size:18px;color:var(--mdl-texto);animation:bnnuevo 4.8s ease infinite}
@keyframes bntach{0%,34%{opacity:0}42%,90%{opacity:1}100%{opacity:0}}
@keyframes bnnuevo{0%,40%{color:var(--mdl-texto)}46%,90%{color:var(--mdl-naranja)}100%{color:var(--mdl-texto)}}
.bn-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.bn-chips span{padding:6px 10px;border-radius:6px;background:rgba(255,255,255,.05);color:#A69E95;font-size:12.5px;font-weight:600;
  animation:bnchip 6s ease infinite}
.bn-chips span:nth-child(2){animation-delay:2s}
.bn-chips span:nth-child(3){animation-delay:4s}
@keyframes bnchip{0%,8%{background:rgba(255,255,255,.05);color:#A69E95}14%,30%{background:rgba(255,122,0,.18);color:#FFD2A6}36%,100%{background:rgba(255,255,255,.05);color:#A69E95}}

/* 2. productos que se pausan */
.bn-prod{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.035)}
.bn-foto{width:36px;height:36px;border-radius:6px;flex-shrink:0}
.f1{background:linear-gradient(135deg,#C9822E,#7A3F12)}
.f2{background:linear-gradient(135deg,#E5C07B,#8E6A2F)}
.f3{background:linear-gradient(135deg,#F2D16B,#A67C1E)}
.bn-prod b{display:block;font-size:13.5px}
.bn-prod em{font-style:normal;font-size:12px;color:#8FE3B0}
.bn-prod > div{flex:1;min-width:0}
.bn-estado{position:relative;display:block;height:16px}
.bn-estado span{position:absolute;left:0;top:0;white-space:nowrap}
.bn-disp{color:#8FE3B0;animation:bndisp 4s ease infinite}
.bn-agot{color:#FF8A5C;font-weight:700;animation:bnagot 4s ease infinite}
@keyframes bndisp{0%,40%{opacity:1}48%,92%{opacity:0}100%{opacity:1}}
@keyframes bnagot{0%,40%{opacity:0}48%,92%{opacity:1}100%{opacity:0}}
.bn-prod-anim{animation:bnprod 4s ease infinite}
@keyframes bnprod{0%,40%{opacity:1}48%,92%{opacity:.5}100%{opacity:1}}
.bn-sw{position:relative;width:36px;height:21px;border-radius:999px;background:#3a322c;flex-shrink:0}
.bn-sw::after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff}
.bn-sw-on{background:var(--mdl-verde)}
.bn-sw-on::after{transform:translateX(15px)}
.bn-sw-anim{animation:bnswbg 4s ease infinite}
.bn-sw-anim::after{animation:bnswk 4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes bnswbg{0%,40%{background:var(--mdl-verde)}48%,92%{background:#3a322c}100%{background:var(--mdl-verde)}}
@keyframes bnswk{0%,40%{transform:translateX(15px)}48%,92%{transform:none}100%{transform:translateX(15px)}}

/* 3. comprobante que se escanea */
.bn-captura{position:relative;overflow:hidden;padding:16px;border-radius:12px;background:#F7F3EE;color:#1A1410}
.bn-cap-top{display:flex;align-items:center;gap:8px;font-size:12px;color:#5c534b;font-weight:600}
.bn-cap-top i{width:22px;height:22px;border-radius:50%;background:#009EE3}
.bn-cap-monto{margin:10px 0 12px;font-size:28px;font-weight:700;letter-spacing:-.03em}
.bn-cap-l{height:7px;border-radius:4px;background:#E2DBD2;margin-top:7px;width:85%}
.bn-c2{width:60%}
.bn-c3{width:72%}
.bn-scan{position:absolute;left:0;right:0;top:0;height:40px;
  background:linear-gradient(rgba(255,122,0,0),rgba(255,122,0,.35));border-bottom:2px solid var(--mdl-naranja);
  animation:bnscan 3.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes bnscan{0%{transform:translateY(-100%)}55%{transform:translateY(260%)}56%,100%{transform:translateY(260%);opacity:0}}
.bn-datos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.bn-datos li{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:8px;background:rgba(255,255,255,.04);
  opacity:0;animation:bndato 3.6s ease infinite}
.bn-datos li:nth-child(2){animation-delay:.25s}
.bn-datos li:nth-child(3){animation-delay:.5s}
@keyframes bndato{0%,40%{opacity:0;transform:translateX(-10px)}50%,92%{opacity:1;transform:none}100%{opacity:0}}
.bn-datos span{color:#A69E95;width:56px}
.bn-datos b{flex:1}
.bn-datos svg{color:var(--mdl-verde)}
.bn-confirmado{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:8px;
  background:var(--mdl-verde);color:#06240F;font-weight:700;animation:bnconf 3.6s ease infinite}
@keyframes bnconf{0%,70%{opacity:0;transform:scale(.94)}78%,94%{opacity:1;transform:none}100%{opacity:0}}

/* 4. medios de pago que se turnan */
.bn-metodos{display:flex;flex-wrap:wrap;gap:8px}
.bn-m{display:inline-flex;align-items:center;gap:8px;padding:10px 13px;border-radius:8px;background:rgba(255,255,255,.04);
  color:#A69E95;font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);animation:bnm 4.5s ease infinite}
.m2{animation-delay:1.5s}
.m3{animation-delay:3s}
@keyframes bnm{0%,6%{color:#A69E95;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transform:none}
  12%,30%{color:#F5F1EC;box-shadow:inset 0 0 0 1.5px var(--mdl-naranja);transform:translateY(-2px)}
  36%,100%{color:#A69E95;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transform:none}}

/* 5. recargo / descuento */
.bn-regla{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.04)}
.bn-regla span{display:inline-flex;align-items:center;gap:8px;color:#D9D2CA}
.bn-regla b{padding:4px 9px;border-radius:6px;font-size:13px}
.bn-mas{background:rgba(255,122,0,.15);color:#FFB05C;animation:bnlat 2.4s ease-in-out infinite}
.bn-menos{background:rgba(37,211,102,.14);color:#8FE3B0;animation:bnlat 2.4s ease-in-out 1.2s infinite}
@keyframes bnlat{50%{transform:scale(1.12)}}

/* 6. ventas del dia */
.bn-num{display:flex;align-items:baseline;gap:10px}
.bn-num b{font-size:clamp(28px,2.6vw,38px);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bn-sube{padding:3px 8px;border-radius:6px;background:rgba(37,211,102,.14);color:#8FE3B0;font-weight:700;font-size:12.5px}
.bn-spark{width:100%;height:56px;margin-top:auto;overflow:visible}
.bn-area{fill:rgba(255,122,0,.12)}
.bn-linea{fill:none;stroke:var(--mdl-naranja);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;stroke-dasharray:1200;stroke-dashoffset:1200}
.blk-bento.en-vista .bn-linea{animation:bnlinea 1.8s ease-out forwards}
@keyframes bnlinea{to{stroke-dashoffset:0}}

@media (max-width:1100px){
  .bn-promo,.bn-stock,.bn-compro,.bn-medios,.bn-recargo,.bn-ventas{grid-column:span 6;grid-row:auto}
  .bn-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .bn-medios,.bn-recargo{grid-column:span 3}
}
@media (max-width:899px){
  .bn-medios,.bn-recargo{grid-column:span 6}
  .bn{padding:20px}
  .bn:hover{transform:none}
}
@media (prefers-reduced-motion: reduce){
  .blk-bento .bn-viz *{animation:none !important;opacity:1 !important;transform:none !important}
  .bn-linea{stroke-dashoffset:0}
  .bn-agot,.bn-scan{display:none}
}


/* ═══════════════════════════════════════════════════════════════════
   CELULAR: nada atrapa el dedo
   ═══════════════════════════════════════════════════════════════════ */
.tienda-usar{display:none}
@media (max-width:899px){
  /* La tienda deja pasar el gesto a la pagina, salvo que la activen. */
  #mdl-tienda{pointer-events:none}
  #mdl-tienda.tienda-manual{pointer-events:auto}
  .tienda-usar{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;
    min-height:44px;padding:0 18px;border-radius:6px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);
    color:var(--mdl-texto);font:inherit;font-weight:700;font-size:15px;cursor:pointer}
  .tienda-usar svg{color:var(--mdl-naranja)}
  .tienda-usar[aria-pressed="true"]{background:var(--mdl-naranja);border-color:transparent;color:#0D0B09}
  .tienda-usar[aria-pressed="true"] svg{color:#0D0B09}

  /* Panel demo: se mira, no se toca. Sin scroll interno. */
  #mdl-panel-demo.pd-auto .pd-frame,
  #mdl-panel-demo.pd-auto .pd-mtabs{pointer-events:none}
  #mdl-panel-demo.pd-auto .pd-content{overflow:hidden}
  #mdl-panel-demo.pd-auto .pd-mtabs{overflow:hidden}

  /* Hover no existe en el dedo: los estados "activos" van solos. */
  .bn:hover,.pos-feat:hover,.card:hover,.demo-card:hover{transform:none}
}