/*  portada.css — el diseño de cobrapos.app.
    Vivía dentro de index.html; el 15-sep-2026 se sacó aquí para que las páginas
    que traen gente de Google (software-pos-para-restaurantes, sistema-pos-colombia,
    pedidos-por-whatsapp) usen EXACTAMENTE el mismo diseño y no una copia que se
    queda vieja. Si cambias algo aquí, cambia en la portada y en esas páginas.
    El contenido es el mismo de antes, sin tocar una línea.  */
/*  LOS COLORES SON LOS DE COBRA (30-ago-2026).

    Sergio: *"me gusta mucho el nuevo estilo, lo unico es que los colores no
    corresponden a nuestra marca"*. Y al contarlos se veia por que: el
    amarillo acido salia **41 veces** y el azul de la marca solo 5. El color
    protagonista de la pagina no era el de Cobra.

    De donde salen los que ahora se usan, todos comprobados en el producto:
      · #5B6BFF  el azul de los botones de todo el POS — pasa a ser EL acento
      · #303680  el azul marino del logo del ejecutable, el que Sergio llama
                 el bueno — tiñe los fondos oscuros, que antes eran un negro
                 cualquiera que podia ser de cualquier producto
      · #8B5CF6  el violeta que el POS ya reserva para lo de inteligencia
      · #A9B2FF  el azul claro del logo, para realces

    El amarillo no era de la marca y se va. El verde se queda solo para
    "listo/correcto", que es lo que significa en el resto del producto.

    ⚠️ Y con el acento azul, el texto que va ENCIMA pasa a blanco: sobre el
    amarillo iba casi negro, y ese mismo negro sobre azul no se lee.        */
:root{
  --neg:#070A18; --neg2:#0B1026; --caja:#141A38; --vidrio:rgba(26,32,64,.62);
  --linea:rgba(255,255,255,.09); --linea2:rgba(255,255,255,.05);
  --tinta:#F4F6FB; --t2:#B7BEDA; --t3:#8189AD; --t4:#5C6489;
  --ind:#A9B2FF; --vio:#8B5CF6; --claro:#A9B2FF; --acid:#5B6BFF;
  --marino:#303680; --verde:#4ADE80;
}
*{box-sizing:border-box}
/*  `overflow-x` TAMBIEN en html (13-sep-2026): si solo lo lleva el body, el
    navegador se lo pasa a la ventana y el body deja de recortar. Las tarjetas
    del carrusel 3D que se asoman a los lados ensanchaban la pagina a 573 px
    y el celular la mostraba encogida. `hidden` va primero para los Safari
    viejos que no conocen `clip`.                                        */
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;
  /*  Oscuro (13-sep-2026): Safari del iPhone pinta la barra de estado y la
      franja de su barra de abajo con el color de la pagina cuando no
      encuentra una barra fija opaca en ese borde. Con blanco salian dos
      franjas blancas que achicaban la pantalla. El body sigue blanco.   */
  background:#06070B}
body{margin:0;background:var(--neg);color:var(--tinta);
  font-family:'DM Sans',system-ui,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
/*  Los dos titulos del bloque de planes quedan FUERA de esta regla.
    La pagina pone todos sus titulos en Archivo, negro 900 y MAYUSCULAS;
    el bloque de precios es el mismo que el del registro y ahi los
    titulos van en DM Sans y en minusculas. Sin esta excepcion se leia
    "ELIGE EL PLAN DE TU RESTAURANTE" a gritos, que es justo lo que no
    quiere una pantalla donde alguien esta decidiendo cuanto pagar.   */
h1:not(.p2-title),h2:not(.p2-headline),h3,.disp{font-family:'Archivo',system-ui,sans-serif;font-weight:900;
  letter-spacing:-.045em;line-height:.9;margin:0;text-transform:uppercase}
p{margin:0}button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
.env{max-width:1240px;margin:0 auto;padding:0 24px;position:relative}
.mono{font-family:'DM Mono',ui-monospace,monospace}

/* ═══ marcador de foto ═══ */
.ph{position:relative;overflow:hidden;
  background:repeating-linear-gradient(128deg,#1B2130 0 10px,#12161F 10px 20px)}
.ph::after{content:attr(data-et);position:absolute;left:8px;bottom:8px;
  font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:.02em;color:#7C8598;
  background:rgba(6,7,11,.82);padding:2px 6px;border-radius:4px}
.ph.claro{background:repeating-linear-gradient(128deg,#2A3247 0 10px,#1E2434 10px 20px)}
/*  Con foto puesta: la imagen manda y el rayado desaparece. La etiqueta se
    queda tenue a proposito — dice que foto de verdad va en ese hueco.  */
.ph[style*="background-image"]{background-size:cover;background-position:center;background-repeat:no-repeat}
/*  Los rotulos de trabajo ("foto · ...") NO salen sobre fotos reales (12-sep). */
.ph[style*="background-image"]::after{display:none}
.ph[style*="background-image"]:hover::after{opacity:1}

/* código de barras real, como textura */
.bar{height:100%;width:100%;background:repeating-linear-gradient(90deg,
  currentColor 0 1px,transparent 1px 3px,currentColor 3px 4px,transparent 4px 7px,
  currentColor 7px 9px,transparent 9px 11px,currentColor 11px 12px,transparent 12px 16px)}

/* ═══ NAV ═══ */
#lect{position:fixed;top:0;left:0;height:2px;width:0;z-index:99;background:var(--acid)}
.nav{position:fixed;inset:0 0 auto;z-index:90;transition:.25s}
.nav.on{background:rgba(6,7,11,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--linea2)}
.nav-in{display:flex;align-items:center;gap:18px;height:64px}
.lg{display:flex;align-items:center;gap:10px}
/*  El logo va SIN caja: el PNG ya es un cuadro con su propio fondo, y
    meterlo dentro de otro cuadrado con degradado se veia como un
    recuadro dentro de otro (Sergio, 2-sep-2026).                    */
.lg i{width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center}
.lg i svg{width:15px;height:15px}
.lg b{font-family:'Archivo';font-size:15px;font-weight:900;letter-spacing:-.02em;display:block;line-height:1.1;text-transform:uppercase}
.lg span{font-size:10px;color:var(--t3)}
.mn{display:flex;position:relative;margin-left:10px}
.mn a{font-size:12.5px;font-weight:600;color:var(--t2);padding:9px 12px;letter-spacing:.02em}
.mn a.act{color:#fff}
#pt{position:absolute;bottom:2px;height:2px;background:var(--acid);transition:.3s cubic-bezier(.2,.8,.2,1);width:0}
.nd{margin-left:auto;display:flex;align-items:center;gap:8px}
.ic{width:33px;height:33px;border-radius:50%;border:1px solid var(--linea);display:grid;place-items:center;
  color:var(--t2);transition:.16s;flex-shrink:0;background:rgba(255,255,255,.03)}
.ic:hover{border-color:var(--acid);color:#fff}
.ic svg{width:14px;height:14px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:99px;
  background:var(--acid);color:#fff;font-size:13px;font-weight:800;letter-spacing:.01em;
  transition:.16s;font-family:'Archivo';text-transform:uppercase}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(255,216,77,.55)}
.btn.g{background:linear-gradient(135deg,var(--ind),var(--vio));color:#fff}
.btn.g:hover{box-shadow:0 10px 26px -8px rgba(107,92,255,.7)}
.btn.o{background:none;border:1px solid var(--linea);color:#fff}
.btn.o:hover{border-color:#fff;box-shadow:none}
.brg{display:none}
/*  EL MENU DEL CELULAR (13-sep-2026). En el celular los enlaces de arriba no
    caben, asi que la hamburguesa abre una persiana debajo de la barra con los
    mismos cuatro enlaces y los dos botones. Fuera del celular no existe.   */
.mn-cel{display:none}
.brg .x{display:none}

/* ═══════════ HERO — COLLAGE POR CAPAS ═══════════ */
.hero{position:relative;min-height:104svh;overflow:hidden;padding-top:64px}
.hero .fondo{position:absolute;inset:0;z-index:1}
.hero .fondo .ph{width:100%;height:100%;filter:grayscale(.15) contrast(1.06) saturate(1.06)}
.hero .velo{position:absolute;inset:0;z-index:2;
  background:
  /*  De arriba abajo: arriba casi nada, para que se vea el color de la foto;
      abajo opaco, que es donde se apoyan el titular y las tarjetas.        */
  linear-gradient(180deg,rgba(6,7,11,.30) 0%,rgba(6,7,11,.06) 24%,
                         rgba(6,7,11,.52) 62%,rgba(6,7,11,.92) 100%),
  /*  Y algo por el lado izquierdo, que es donde cae el titular.            */
  linear-gradient(93deg,rgba(6,7,11,.66) 20%,rgba(6,7,11,.12) 58%,rgba(6,7,11,.26) 100%),
  radial-gradient(90% 70% at 12% 12%,rgba(91,107,255,.28),transparent 62%),
  linear-gradient(0deg,var(--neg) 1%,transparent 30%)}
.hero .rejilla{position:absolute;inset:0;z-index:2;opacity:.16;pointer-events:none;
  background-image:linear-gradient(var(--linea) 1px,transparent 1px),linear-gradient(90deg,var(--linea) 1px,transparent 1px);
  background-size:88px 88px;mask-image:radial-gradient(75% 60% at 40% 40%,#000,transparent)}
.hero-in{position:relative;z-index:6;padding:64px 0 72px;min-height:calc(104svh - 64px);
  display:flex;flex-direction:column;justify-content:flex-end}
.tit-gig{position:absolute;z-index:3;left:-2vw;top:14%;font-size:clamp(140px,25vw,380px);
  color:transparent;-webkit-text-stroke:1px rgba(169,178,255,.14);pointer-events:none;line-height:.78}
/* la figura recortada, ENCIMA del titular */
.recorte{position:absolute;z-index:5;right:2%;bottom:0;width:min(46vw,560px);height:88%;
  clip-path:polygon(16% 0,100% 0,100% 100%,0 100%,0 26%)}
.recorte .ph{width:100%;height:100%;filter:contrast(1.1)}
.recorte::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,var(--neg) 3%,transparent 32%),linear-gradient(90deg,rgba(6,7,11,.7),transparent 34%)}
.h1{position:relative;z-index:7;font-size:clamp(52px,10.4vw,142px);max-width:14ch}
.h1 .l2{display:block;color:transparent;-webkit-text-stroke:2px var(--acid)}
.h1 .mark{position:relative;display:inline-block}
.h1 .mark::before{content:"";position:absolute;left:-3%;right:-3%;top:26%;height:44%;z-index:-1;
  background:linear-gradient(102deg,var(--ind),var(--vio));transform:rotate(-2.2deg);opacity:.9}
.slash{position:absolute;z-index:8;left:-6%;top:44%;width:118%;height:clamp(26px,4.6vw,56px);
  background:linear-gradient(100deg,transparent 3%,var(--acid) 22%,var(--acid) 72%,transparent 94%);
  transform:rotate(-5deg);opacity:.16;clip-path:polygon(0 46%,100% 0,100% 56%,0 100%);pointer-events:none}
.metas{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:24px;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--t2)}
.metas .sep{color:var(--t4)}
/*  Se llamaba .ch y chocaba con el .ch del chat (aspect-ratio 16/11 + overflow
    hidden): el chip salia recortado, se veia "HI" sobre un circulo (12-sep). */
.metas .hecho{background:var(--acid);color:#fff;padding:4px 12px;border-radius:99px;font-weight:800;white-space:nowrap}
.hero-baja{display:flex;flex-wrap:wrap;align-items:flex-end;gap:26px;margin-top:34px;position:relative;z-index:7}
.hero-baja p{font-size:16px;color:var(--t2);max-width:38ch}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap}
/* tarjeta semitransparente flotando sobre la foto */
.vidrio{background:var(--vidrio);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--linea);border-radius:18px}
.tarj-flot{position:absolute;z-index:7;right:3%;bottom:16%;width:290px;padding:16px 17px;
  transform:rotate(-1.6deg)}
.tarj-flot .cab{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:11px}
.tarj-flot .cab i{width:6px;height:6px;border-radius:50%;background:var(--verde)}
.bb{max-width:88%;padding:8px 11px;border-radius:12px;font-size:12px;line-height:1.4;margin-bottom:6px}
.bb.e{background:rgba(255,255,255,.09);border-bottom-left-radius:3px}
.bb.a{background:var(--ind);border-bottom-right-radius:3px;margin-left:auto;color:#fff}
/* sticker rotado */
.stk{position:absolute;z-index:8;background:var(--acid);color:#fff;font-family:'Archivo';
  font-weight:900;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:7px 13px;
  border-radius:6px;transform:rotate(-7deg);box-shadow:0 8px 22px -8px rgba(0,0,0,.9)}
.circ{position:absolute;z-index:9;right:-28px;top:52%;width:70px;height:70px;border-radius:50%;
  background:var(--acid);color:#fff;display:flex;align-items:center;padding-left:14px;
  box-shadow:0 14px 34px -10px rgba(255,216,77,.6);transition:right .2s}
.circ:hover{right:-18px}
.circ svg{width:20px;height:20px}
.lat{position:absolute;z-index:7;left:-46px;top:46%;transform:rotate(-90deg);
  font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.42em;color:var(--t4);white-space:nowrap}
/* El amarillo de aqui NO es un color de marca que se escapo: es la BANDERA de Colombia (amarillo, azul, rojo). Se queda tal cual. */
.bandera{position:absolute;z-index:8;left:0;top:64px;bottom:0;width:5px;
  background:linear-gradient(180deg,#FFD84D 0 33%,#3B82F6 33% 66%,#EF4444 66%);opacity:.75}
.barra-h{position:absolute;z-index:7;left:24px;bottom:26px;width:170px;height:26px;color:var(--t4);opacity:.5}

/* ═══ encabezado de sección ═══ */
.sec{padding:110px 0;position:relative}
.eyeb{display:flex;align-items:center;gap:13px;margin-bottom:22px}
.eyeb .lab{background:rgba(255,216,77,.12);border:1px solid rgba(255,216,77,.34);color:var(--acid);
  font-family:'Archivo';font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 13px;border-radius:99px;white-space:nowrap}
.eyeb .fl svg{width:15px;height:15px;color:var(--acid);display:block}
.eyeb .rl{flex:1;height:1px;background:linear-gradient(90deg,var(--linea),transparent)}
.sec h2{font-size:clamp(34px,6.2vw,78px)}
.lead{font-size:16.5px;color:var(--t2);max-width:58ch;margin-top:16px}

/* ═══ AUTOR — collage superpuesto ═══ */
.autor{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center}
.autor-fotos{position:relative;height:520px}
.autor-fotos .p1{position:absolute;left:0;top:0;width:74%;height:74%;border-radius:16px;overflow:hidden;
  border:1px solid var(--linea);transform:rotate(-2deg)}
.autor-fotos .p2{position:absolute;right:0;bottom:0;width:58%;height:56%;border-radius:16px;overflow:hidden;
  border:2px solid var(--neg);transform:rotate(2.6deg);box-shadow:0 30px 60px -24px #000}
.autor-fotos .p3{position:absolute;right:6%;top:8%;width:120px;height:120px;border-radius:50%;
  overflow:hidden;border:3px solid var(--acid);z-index:3}
.autor-fotos .ph{width:100%;height:100%}
/*  EL LOGO DEL RESTAURANTE donde iba el '01' decorativo (12-sep-2026): las
    fotos ya son de El Parche de verdad, y el logo lo dice.               */
.autor-fotos .num{position:absolute;left:52%;bottom:6%;z-index:4;font-family:'Archivo';font-weight:900;
  font-size:120px;line-height:1;color:transparent;-webkit-text-stroke:1.4px var(--acid);opacity:.85}
.autor h2{margin-bottom:18px}
.autor p{color:var(--t2);margin-bottom:13px}
.cifras{display:grid;grid-template-columns:repeat(4,1fr);margin-top:74px;border-top:1px solid var(--linea)}
.cf{padding:30px 18px;border-left:1px solid var(--linea);position:relative}
.cf:first-child{border-left:none}
.cf b{display:block;font-family:'Archivo';font-weight:900;font-size:clamp(38px,6vw,74px);
  line-height:.86;letter-spacing:-.05em;color:var(--acid);font-variant-numeric:tabular-nums}
.cf span{display:block;font-size:12px;color:var(--t3);margin-top:10px;text-transform:uppercase;letter-spacing:.07em}
.tiras{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:26px;font-family:'DM Mono',monospace;
  font-size:11px;color:var(--t4);letter-spacing:.16em;text-transform:uppercase}

/* ═══ ARGUMENTOS — texto encima de la imagen ═══ */
.arg{position:relative;min-height:520px;margin-bottom:80px;display:flex;align-items:center}
.arg .fondo{position:absolute;inset:0;border-radius:26px;overflow:hidden;border:1px solid var(--linea)}
.arg .fondo .ph{width:100%;height:100%;filter:grayscale(.6)}
.arg .fondo::after{content:"";position:absolute;inset:0}
.arg.i .fondo::after{background:linear-gradient(90deg,rgba(6,7,11,.96) 30%,rgba(6,7,11,.35) 78%)}
.arg.d .fondo::after{background:linear-gradient(270deg,rgba(6,7,11,.96) 30%,rgba(6,7,11,.35) 78%)}
.arg .cont{position:relative;z-index:3;width:52%;padding:44px}
.arg.d .cont{margin-left:auto}
.arg h3{font-size:clamp(28px,4.4vw,56px);margin-bottom:16px}
.arg h3 em{font-style:normal;color:var(--acid)}
/*  El del asistente nombra las tres redes y a 56 px se sale de su columna;
    es el unico titular de la serie que lleva tres marcas seguidas.      */
/*  Los limites llevan holgura a proposito: a 42 px el renglon largo
    ("WHATSAPP, INSTAGRAM") medía 532 en una columna de 532 —rozando—, y
    mientras Archivo no ha cargado el navegador dibuja otra letra que
    puede ser mas ancha.                                              */
#asistente h3{font-size:clamp(22px,3.1vw,40px)}
.arg p{color:var(--t2);max-width:40ch}

/*  ── LOS TRES CANALES, en la tarjeta del asistente ─────────────────────
    Quietos, sin animacion. Cada uno con el color que le pone el chat de
    verdad (--wa/--ig/--fb de chat-ia.css). La sombra es para que el verde
    y el azul no se pierdan sobre la foto oscura.                        */
.arg-redes{position:absolute;z-index:5;left:44px;bottom:38px;
  display:flex;align-items:center;gap:14px}
.arg-redes svg{width:23px;height:23px;display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
@media(max-width:1080px){.arg-redes{left:32px;bottom:26px;gap:12px}
  .arg-redes svg{width:21px;height:21px}}

/* ══ EL CHAT DE COBRA, EN LA TARJETA DEL ASISTENTE ════════════════════════

   Esto no es un dibujo de un chat: es el chat de Cobra a escala. Los valores
   salen de `chat-ia.css`, con el original anotado al lado.

   La pantalla tiene DOS escenas encadenadas: primero llega el mensaje y el
   asistente toma el pedido; cuando acaba, la pantalla cambia y sale ventas
   con el domicilio ya creado. Es el recorrido entero de un pedido.        */
#asistente .rep{width:min(46%,460px);padding:0;background:none;border:none;
  transform:translateY(-50%);box-shadow:none;backdrop-filter:none}

/*  El `color` va escrito a mano en las dos escenas. La tarjeta que las
    contiene es de las oscuras y reparte texto claro; sin volver a decirlo,
    lo que no lleve color propio sale BLANCO SOBRE BLANCO en ventas —el
    titulo "Domicilios" se perdia entero.                                */
.ch{position:relative;overflow:hidden;aspect-ratio:16/11;border-radius:14px;
  container-type:inline-size;color:#EDEEF2;background:#08080A;
  font-family:'DM Sans',system-ui,sans-serif;line-height:1.4;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 34px 70px -26px rgba(0,0,0,.75),0 6px 18px -8px rgba(0,0,0,.5)}
.ch *{box-sizing:border-box}
.ch-esc{position:absolute;inset:0;display:flex;opacity:0;transform:scale(.985);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.ch-esc.on{opacity:1;transform:none}

/*  ── LA LISTA DE CONVERSACIONES (.ci-list) ──
    En el chat de verdad mide 366 px y va sobre #111217.                   */
.ch-list{width:40%;flex:0 0 auto;min-width:0;background:#111217;
  border-right:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column}
.ch-list-cab{padding:9px 9px 8px;border-bottom:1px solid rgba(255,255,255,.07);flex:0 0 auto}
.ch-list-tit{font-size:12px;font-weight:800;color:#EDEEF2;letter-spacing:-.01em}
.ch-list-sub{font-size:7.5px;font-weight:400;color:#585C6B;margin-top:1px}
.ch-convs{flex:1;min-height:0;overflow:hidden;padding:4px 0}

/*  .ci-conv: fila de 10/14 con radio 15 y 11 de hueco  */
.ch-conv{display:flex;align-items:center;gap:7px;padding:6px 8px;margin:0 4px;
  border-radius:9px;position:relative;
  transition:background .16s,opacity .35s,transform .35s}
.ch-conv.act{background:#161821;border:1px solid #262935;
  box-shadow:inset 0 0 0 1px rgba(124,92,255,.10)}
.ch-conv.act::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:58%;border-radius:3px;background:#7C5CFF}
/*  la que acaba de entrar cae desde arriba */
.ch-conv.nueva{animation:chCae .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes chCae{from{opacity:0;transform:translateY(-11px)}to{opacity:1;transform:none}}

.ch-av-wrap{position:relative;flex:0 0 auto}
/*  .ci-av: 42 px con radio 15. Las iniciales sobre uno de los siete tintes
    de chat-ia.js —para WhatsApp NO hay foto, Meta no la manda.           */
.ch-av{width:26px;height:26px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:9px;font-weight:700}
.ch-av img{width:100%;height:100%;border-radius:9px;object-fit:cover;display:block}
/*  .ci-av-badge: 18 px, radio 8, con borde del color del panel  */
.ch-av-badge{position:absolute;bottom:-2px;right:-2px;width:12px;height:12px;border-radius:5px;
  border:1.5px solid #111217;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 4px -1px rgba(0,0,0,.5)}
.ch-av-badge svg{width:7px;height:7px;display:block}
.ch-av-badge.ch-wa{background:#25D366}
.ch-av-badge.ch-ig{background:linear-gradient(135deg,#FEDA75,#FA7E1E 25%,#D62976 55%,#962FBF 80%,#4F5BD5)}
.ch-av-badge.ch-fb{background:#0866FF}

.ch-conv-main{flex:1;min-width:0}
.ch-conv-top{display:flex;align-items:baseline;justify-content:space-between;gap:5px;margin-bottom:1px}
.ch-conv-nom{font-size:9px;font-weight:600;color:#EDEEF2;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.ch-conv.sinleer .ch-conv-nom{font-weight:800}
.ch-conv-hora{font-size:7px;color:#585C6B;flex:0 0 auto}
.ch-conv.sinleer .ch-conv-hora{color:#7C5CFF}
.ch-conv-bot{display:flex;align-items:center;justify-content:space-between;gap:5px}
.ch-conv-prev{font-size:8px;color:#787C8B;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;flex:1}
/*  .ci-unread: pastilla del acento con su sombra  */
.ch-sinleer{min-width:13px;height:12px;padding:0 4px;border-radius:999px;background:#7C5CFF;
  color:#fff;font-size:7.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 6px -2px rgba(124,92,255,.6);flex:0 0 auto}

/*  ── EL PANEL DEL CHAT (.ci-chat) ──
    #08080A con los dos resplandores morados de siempre.                   */
.ch-panel{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;
  background-color:#08080A;
  background-image:
    radial-gradient(1100px 620px at 82% -8%,rgba(124,92,255,.07),transparent 62%),
    radial-gradient(880px 520px at 8% 112%,rgba(124,92,255,.055),transparent 60%)}

/*  .ci-chat-head: 69 px, translucida y desenfocada  */
.ch-head{height:42px;flex:0 0 auto;background:rgba(13,14,18,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid #1D1F27;display:flex;align-items:center;gap:8px;padding:0 11px}
.ch-head-av{width:26px;height:26px;border-radius:8px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:9px;font-weight:700}
.ch-head-txt{min-width:0;flex:1}
.ch-head-nom{display:block;font-size:11px;font-weight:600;color:#EDEEF2;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-head-meta{display:flex;align-items:center;gap:5px;margin-top:1px}
/*  .ci-chan-chip. Los modificadores van PREFIJADOS (.ch-wa y no .wa):
    `.wa` a secas es el boton flotante de WhatsApp de la landing y se
    define mas abajo, asi que ganaba y convertia el chip del canal en un
    circulo verde de 54 px flotando fuera del recuadro.               */
.ch-chip{display:inline-flex;align-items:center;gap:3px;padding:1px 5px;border-radius:999px;
  font-size:7px;font-weight:600;color:#fff;white-space:nowrap}
.ch-chip svg{width:7px;height:7px;display:block}
.ch-chip.ch-wa{background:#25D366}
.ch-chip.ch-ig{background:linear-gradient(135deg,#D62976,#962FBF)}
.ch-chip.ch-fb{background:#0866FF}
.ch-vivo{font-size:7.5px;color:#787C8B;display:flex;align-items:center;gap:3px;white-space:nowrap}
/*  .ci-dot-live: late cada 2 s  */
.ch-vivo i{width:5px;height:5px;border-radius:50%;background:#16A34A;display:block;
  animation:chLate 2s infinite}
@keyframes chLate{0%,100%{opacity:1}50%{opacity:.45}}

/*  ── EL HILO (.ci-thread) ── */
/*  Se desplaza como el hilo de verdad y siempre queda abajo. La barra se
    esconde: en una maqueta de 460 px estorba mas de lo que ayuda.        */
.ch-hilo{flex:1;min-height:0;overflow-y:auto;padding:10px 12px;
  display:flex;flex-direction:column;gap:4px;scrollbar-width:none}
.ch-hilo::-webkit-scrollbar{width:0;height:0}
.ch-fecha{text-align:center;font-size:7.5px;margin:0 0 4px}
.ch-fecha span{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);
  border-radius:999px;padding:2px 7px;color:rgba(255,255,255,.5)}
.ch-fila{display:flex;animation:chSube .3s cubic-bezier(.2,.8,.2,1) both}
.ch-fila.ent{justify-content:flex-start}
.ch-fila.sal{justify-content:flex-end}
@keyframes chSube{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/*  .ci-bubble: 72% de ancho, y las esquinas mordidas de cada lado  */
.ch-bb{max-width:76%;padding:6px 8px;font-size:9px;line-height:1.45;position:relative;
  white-space:pre-wrap;overflow-wrap:anywhere}
.ch-bb.ent{background:#161821;border:1px solid rgba(255,255,255,.09);
  border-radius:11px 11px 11px 4px;color:#EDEEF2}
.ch-bb.sal{background:linear-gradient(135deg,#7C5CFF 0%,#5B3FE0 100%);
  border-radius:11px 11px 4px 11px;color:#fff;
  box-shadow:0 8px 20px -6px rgba(92,63,226,.5)}
.ch-bb .m{display:block;font-size:7px;margin-top:2px}
.ch-bb.ent .m{color:#585C6B}
.ch-bb.sal .m{color:rgba(255,255,255,.65);text-align:right}
/*  .ci-typing-bubble + ci-blink  */
.ch-esc-puntos{display:flex;align-items:center;gap:3px;padding:7px 9px !important;min-width:30px}
.ch-pt{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5);display:inline-block;
  animation:chBlink 1.2s ease-in-out infinite}
.ch-pt:nth-child(2){animation-delay:.2s}
.ch-pt:nth-child(3){animation-delay:.4s}
@keyframes chBlink{0%,80%,100%{opacity:.3;transform:scale(.85)}40%{opacity:1;transform:scale(1)}}

/*  ── EL REDACTOR (.ci-composer) ── */
.ch-comp{flex:0 0 auto;background:rgba(13,14,18,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.07);padding:8px 11px;
  display:flex;align-items:center;gap:6px}
.ch-comp-ic{width:24px;height:24px;border-radius:7px;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);color:#A6A9B6;
  display:flex;align-items:center;justify-content:center}
.ch-comp-ic svg{width:11px;height:11px;display:block}
.ch-comp-in{flex:1;min-width:0;height:24px;border-radius:8px;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);
  display:flex;align-items:center;padding:0 9px;font-size:8.5px;color:#585C6B}
.ch-comp-env{width:24px;height:24px;border-radius:7px;flex:0 0 auto;
  background:linear-gradient(180deg,#7C5CFF 0%,#5B3FE0 100%);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px -4px rgba(124,92,255,.6)}
.ch-comp-env svg{width:11px;height:11px;display:block}

/*  ── LA SEGUNDA ESCENA: ventas con el domicilio ya creado ──
    Reaprovecha las clases .sm-* del simulador de la tablet: es la MISMA
    pantalla de ventas, asi que no hay que volver a describirla.          */
.ch-ventas{background:#FAFAFB;color:#0F172A;flex-direction:column}
.ch-ventas .sm-mesas{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(66px,1fr);
  padding:8px 10px 10px;gap:7px}
.ch-ventas .sm-cab{padding:8px 10px 0}
.ch-ventas .sm-tabs{padding:7px 10px 0}
/*  el que acaba de entrar se senala un momento */
.ch-nuevo{outline:2px solid rgba(245,158,11,0);outline-offset:2px;
  animation:chNuevo 1.5s ease-out 3}
@keyframes chNuevo{0%{outline-color:rgba(245,158,11,.75)}100%{outline-color:rgba(245,158,11,0)}}
.ch-canal-tag{font-size:7px;font-weight:600;padding:1px 5px;border-radius:4px;flex:0 0 auto}

@container (max-width:360px){
  .ch-list{width:36%}
  .ch-conv-hora,.ch-list-sub{display:none}
  .ch-list-tit{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ch-comp-in{display:block;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(prefers-reduced-motion:reduce){
  .ch-conv.nueva,.ch-fila,.ch-nuevo{animation:none}
  .ch-vivo i,.ch-pt{animation:none}
}

/* ══ EL MONITOR ═══════════════════════════════════════════════════════════

   Antes era un portatil que se abria con el scroll (tapa en 3D, teclado de
   76 teclas, sello, respaldo, luz que prendia...). Sergio (11-sep-2026): "es
   muy tedioso; mejor una simple pantalla de computador, grande, se ve mucho
   mas limpio". Dentro va el MISMO chat de la tarjeta del asistente —las
   clases `.ch-*` no se repiten aqui—, con una conversacion ya empezada y el
   comprobante del cliente esperando. Sin 3D: nada de `preserve-3d`, ni
   `pointer-events` cruzados, ni variables que escriba el guion.           */
.cmp{padding:0 0 84px}
.cmp-cab{text-align:center;max-width:640px;margin:0 auto 40px}
.cmp-cab .eyeb{justify-content:center}
.cmp-cab .eyeb .rl{display:none}
.cmp-cab h2{font-size:clamp(28px,3.4vw,44px);line-height:1;letter-spacing:-.03em}
.cmp-cab .lead{font-size:16.5px;color:var(--t2);margin-top:14px}

.pc{width:min(100%,800px);margin:0 auto;position:relative}
/*  El marco: el mismo chasis de la tablet del simulador (mismo degradado,
    misma sombra), para que las dos pantallas de la pagina sean familia.
    El relleno de abajo es la barbilla, donde va la lucecita.            */
.pc-mon{position:relative;background:linear-gradient(150deg,#1C2130,#0A0D16 60%);
  border-radius:18px;padding:16px 16px 24px;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 42px 80px -34px rgba(15,23,42,.55),
             0 8px 22px -10px rgba(15,23,42,.28),inset 0 1px 0 rgba(255,255,255,.09)}
.pc-mon::after{content:'';position:absolute;left:50%;bottom:9px;transform:translateX(-50%);
  width:36px;height:3px;border-radius:999px;background:rgba(255,255,255,.12)}   /* la luz */
.pc-camara{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:5px;height:5px;
  border-radius:999px;background:#2C3346;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pc-pantalla{aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#08080A;position:relative}
.pc-brillo{position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:8px;
  background:linear-gradient(103deg,rgba(255,255,255,.07) 0 18%,transparent 34%)}

/*  El pie: un cuello que se ensancha hacia abajo y una peana plana.     */
.pc-cuello{width:min(17%,124px);height:clamp(30px,5.6vw,54px);margin:0 auto;
  background:linear-gradient(90deg,#10141F,#262D40 50%,#10141F);
  clip-path:polygon(10% 0,90% 0,100% 100%,0 100%)}
.pc-base{width:min(44%,330px);height:clamp(9px,1.5vw,13px);margin:0 auto;
  border-radius:4px 4px 14px 14px;
  background:linear-gradient(180deg,#2A3145,#161C2B 60%,#0D1119);
  box-shadow:0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.08)}
/*  La sombra en el suelo. Lleva `filter:blur()`, fuera de cualquier 3D.  */
.pc-sombra{position:absolute;left:16%;right:16%;bottom:-10px;height:22px;
  border-radius:50%;filter:blur(8px);z-index:-1;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.34),transparent 72%)}

/*  Dentro de la pantalla el chat va a 16/10, no a 16/11 como en la tarjeta. */
.pc-pantalla .ch{aspect-ratio:auto;height:100%;border:none;border-radius:0;box-shadow:none}
/*  Sin `backdrop-filter` dentro de la pantalla: era obligatorio con el 3D
    y se deja igual —el fondo opaco se ve bien y ya esta probado—.       */
.pc-pantalla .ch-head{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:rgba(13,14,18,.94)}
.pc-pantalla .ch-comp{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:rgba(13,14,18,.96)}
/*  Aqui SI se toca (`.ch-esc` lo lleva apagado porque en la tarjeta del
    asistente es una animacion; en el monitor el recorrido lo hace quien
    visita la pagina).                                                    */
.pc-pantalla .ch-esc{pointer-events:auto}

/*  «Otra vez» ya no reserva su hueco: flota centrado justo debajo de la
    peana y solo se ve al terminar el recorrido. Asi el boton de compra de
    abajo no salta cuando aparece.                                        */
.sim-otra.cmp-otra{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);
  margin:0;display:inline-flex;white-space:nowrap}

/*  EL BOTON DE COMPRA A MITAD DE PAGINA (11-sep-2026). Sergio: en una
    landing no puede haber solo un boton arriba y otro abajo; en medio debe
    ir uno que otro por si la persona se anima. Aqui acaba de tocar el chat
    con sus manos: es el mejor momento. Mismo `.btn` y mismo destino que el
    de la cabecera (#precios: primero ve los planes).                    */
.cmp-cta{text-align:center;margin:74px auto 0;max-width:600px}
.cmp-cta p{font-size:clamp(18px,2.1vw,23px);line-height:1.3;letter-spacing:-.015em;
  color:var(--tinta);font-weight:700;text-wrap:balance}
.cmp-cta p em{color:var(--ind);font-style:normal}
.cmp-cta .btn{margin-top:20px;padding:15px 32px;font-size:14px}
.cmp-cta small{display:block;margin-top:13px;font-size:12.5px;color:var(--t3);letter-spacing:.01em}

/*  El aviso, colgado por DEBAJO. "Crear pedido" vive en el borde de arriba
    de la pantalla y la etiqueta encima se salia del recuadro.           */
.sm-toca.abajo{top:calc(100% + 8px);right:auto;left:0;bottom:auto;
  border-radius:999px;padding:4px 10px;animation:smBota 1.7s ease-in-out infinite}
.sm-toca.abajo::after{content:'';position:absolute;bottom:100%;left:15px;
  border:4px solid transparent;border-bottom-color:#5B6BFF}

/*  ── EL COMPROBANTE EN EL HILO ──
    `.ci-img-thumb` + `.ci-img-pay` del chat de verdad.                    */
.ch-recibo{width:132px;border-radius:6px;overflow:hidden;background:#fff;
  color:#0F172A;display:block;margin-bottom:3px;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.6)}
/*  `display:block` en todos: son <span> dentro de un <span> y sin esto
    salen en fila, con la franja del banco sin llenar el ancho.         */
.ch-recibo-cab{display:block;background:#FFE600;color:#0F172A;font-size:6.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 7px}
.ch-recibo-cu{display:block;padding:7px}
.ch-recibo-ok{font-size:6.5px;font-weight:700;color:#16A34A;display:flex;align-items:center;gap:3px}
.ch-recibo-ok i{width:8px;height:8px;border-radius:999px;background:#16A34A;color:#fff;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ch-recibo-ok i svg{width:5px;height:5px;display:block}
.ch-recibo-val{display:block;font-size:15px;font-weight:800;letter-spacing:-.02em;margin-top:3px;
  font-variant-numeric:tabular-nums}
.ch-recibo-l{display:block;font-size:6.5px;color:#64748B;margin-top:2px;line-height:1.5}
/*  .ci-img-pay: los dos botones debajo de la imagen  */
/*  `.ci-img-pay` va del ancho de la imagen; aqui, del ancho del recibo. */
.ch-pagos{display:flex;gap:5px;margin-top:5px;width:132px}
.ch-pago-btn{position:relative;flex:1;text-align:center;font-size:7.5px;font-weight:600;
  padding:5px 6px;border-radius:6px;border:1px solid #262935;background:#111217;color:#EDEEF2;
  white-space:nowrap;cursor:pointer;transition:.15s}
.ch-pago-btn:hover{background:#1C1E28;border-color:#33364a}
.ch-pago-btn.ac{background:#7C5CFF;border-color:transparent;color:#fff}
.ch-pago-btn.ac:hover{background:#9B85FF}

/*  ── EL BOTON "CREAR PEDIDO" DE LA CABECERA (.ci-btn-primary) ── */
.ch-head-acc{margin-left:auto;flex:0 0 auto;position:relative;
  display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:7px;
  background:linear-gradient(180deg,#7C5CFF 0%,#5B3FE0 100%);color:#fff;
  font-size:7.5px;font-weight:600;white-space:nowrap;cursor:pointer;
  box-shadow:0 6px 14px -5px rgba(124,92,255,.5)}
.ch-head-acc svg{width:9px;height:9px;display:block}

/*  ── EL MODAL DE VERIFICACION (.vp-*) ──
    Va DENTRO de la pantalla, no sobre la pagina: es el modal del programa. */
.vf-ov{position:absolute;inset:0;z-index:40;background:rgba(15,23,42,.6);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:14px}
.vf-ov.on{display:flex;animation:vfEntra .18s ease}
@keyframes vfEntra{from{opacity:0}to{opacity:1}}
.vf-box{background:#fff;color:#0F172A;border-radius:11px;padding:15px 14px;width:100%;
  max-width:228px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.45);
  animation:vfPop .22s cubic-bezier(.2,.8,.2,1)}
@keyframes vfPop{from{transform:scale(.95) translateY(6px);opacity:0}to{transform:none;opacity:1}}
/*  .vp-spin: 38 px con el borde de arriba del acento  */
.vf-spin{width:24px;height:24px;margin:0 auto 8px;border:2.4px solid #E2E8F0;
  border-top-color:#7C5CFF;border-radius:50%;animation:vfGira .8s linear infinite}
@keyframes vfGira{to{transform:rotate(360deg)}}
.vf-msg{font-size:10px;font-weight:800;color:#1E293B}
.vf-sub{font-size:8px;color:#64748B;margin-top:4px;line-height:1.4}
/*  .vp-res: el circulo de 58 px y el titulo  */
.vf-ico{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;margin:0 auto 7px;background:rgba(34,197,94,.14);color:#16A34A}
.vf-ico svg{width:19px;height:19px;display:block}
.vf-tit{font-size:11px;font-weight:800;color:#16A34A;margin-bottom:5px}
.vf-txt{font-size:8.5px;color:#334155;line-height:1.5}
/*  .vp-checks  */
.vf-checks{display:flex;flex-direction:column;gap:4px;margin:10px 0 3px;text-align:left;
  background:#F8FAFC;border:1px solid #E2E8F0;border-radius:8px;padding:8px 9px}
.vf-chk{display:flex;align-items:center;gap:6px;font-size:8px;color:#334155;font-weight:600}
.vf-chk svg{width:10px;height:10px;flex:0 0 auto;display:block}
.vf-meta{font-size:7.5px;color:#64748B;margin-top:7px}
/*  .vp-close  */
.vf-cerrar{position:relative;margin-top:11px;width:100%;padding:7px;border:none;border-radius:7px;
  background:#7C5CFF;color:#fff;font-weight:800;font-size:9px;cursor:pointer;transition:.15s}
.vf-cerrar:hover{background:#6A4FF0}

/*  ── LA TARJETA DEL PEDIDO (.cp-ocard) ── */
.oc{width:100%;background:#161821;border:1px solid #262935;border-radius:10px;overflow:hidden;
  animation:chSube .34s cubic-bezier(.2,.8,.2,1) both}
.oc-hd{display:flex;align-items:center;gap:6px;padding:6px 9px;border-bottom:1px solid #15171E;
  background:linear-gradient(180deg,rgba(124,92,255,.12),transparent)}
.oc-hd svg{width:10px;height:10px;display:block;flex:0 0 auto}
.oc-hd b{font-size:8.5px;color:#EDEEF2;font-weight:600}
/*  .cp-ost: la pastilla del estado, en el naranja de "en preparacion"  */
.oc-est{margin-left:auto;font-size:7px;font-weight:700;color:#f97316;
  background:rgba(249,115,22,.15);border:1px solid rgba(249,115,22,.24);
  padding:1px 6px;border-radius:5px;white-space:nowrap}
.oc-li{display:flex;align-items:center;gap:7px;padding:4px 9px;font-size:8px;color:#A6A9B6}
.oc-q{color:#585C6B;font-family:'DM Mono',monospace;min-width:15px}
.oc-nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-pre{margin-left:auto;color:#EDEEF2;font-variant-numeric:tabular-nums}
.oc-tot{display:flex;padding:6px 9px;border-top:1px solid #15171E;font-size:9px;
  font-weight:600;color:#EDEEF2}
.oc-tot .oc-pre{font-variant-numeric:tabular-nums}
/*  .cp-draft-send  */
.oc-btn{display:flex;align-items:center;justify-content:center;gap:5px;margin:7px 9px 9px;
  padding:6px;border-radius:7px;background:linear-gradient(180deg,#7C5CFF,#5B3FE0);color:#fff;
  font-weight:700;font-size:8px;box-shadow:0 6px 16px -6px rgba(124,92,255,.5)}
.oc-btn svg{width:9px;height:9px;display:block}

@media(max-width:980px){.cmp{padding:0 0 64px}.cmp-cab{margin-bottom:28px}}
@media(prefers-reduced-motion:reduce){
  .vf-spin{animation:none}
  .oc{animation:none}}
.arg .fr{display:block;margin-top:20px;font-family:'Archivo';font-size:17px;font-weight:800;
  color:#fff;border-left:3px solid var(--acid);padding-left:14px;text-transform:none;letter-spacing:-.01em}
/*  Sin giro (11-sep): las tarjetas iban ladeadas 1,4° y Sergio las quiere derechas
    —el chat del asistente, las notificaciones de pago y el celular de la factura—. */
.arg .rep{position:absolute;z-index:4;right:5%;top:50%;transform:translateY(-50%);
  width:min(38%,330px);padding:16px}
.arg.d .rep{right:auto;left:5%;transform:translateY(-50%)}
.arg .nbig{position:absolute;z-index:2;font-family:'Archivo';font-weight:900;font-size:190px;
  line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);right:3%;bottom:-6%}
.arg.d .nbig{right:auto;left:3%}
/* ══ LAS NOTIFICACIONES DE PAGO (bloque «Los pagos», 11-sep-2026) ════════
   Sergio: "que realmente lleguen como notificaciones push, con los logos
   oficiales de Bancolombia y Nequi; aparecen en Pendiente y medio segundo
   despues cambian a Confirmado". Las pone el guion (#pn-pila) y solo se
   mueven mientras el bloque se ve. El logo de Nequi es el oficial que ya
   usa la pantalla de pago (assets/brand/nequi.png); el de Bancolombia va en
   assets/brand/bancolombia.png y, si falta, el <img> se quita solo y queda
   el rotulo amarillo de respaldo (regla de Sergio, 7-sep: sin logo oficial
   "pareceria pirata"; peor seria un icono roto).                          */
#pagos .rep{width:min(40%,350px);padding:0;background:none;border:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.pn-pila{display:flex;flex-direction:column;gap:9px;transition:opacity .45s}
.pn-pila.apaga{opacity:0}
.pn{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:16px;overflow:hidden;
  background:rgba(20,24,38,.9);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 22px 50px -22px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  animation:pnEntra .5s cubic-bezier(.2,.8,.2,1) both}
/*  Nace sin alto y crece: asi las de abajo bajan suave en vez de saltar. */
@keyframes pnEntra{from{opacity:0;transform:translateY(-16px) scale(.96);max-height:0;padding-top:0;padding-bottom:0;margin-bottom:-9px}
  to{opacity:1;transform:none;max-height:96px;padding-top:11px;padding-bottom:11px;margin-bottom:0}}
.pn-logo{width:38px;height:38px;border-radius:11px;background:#fff;display:grid;place-items:center;
  flex:0 0 auto;overflow:hidden;position:relative}
.pn-logo img{width:100%;height:100%;object-fit:contain;padding:7px;box-sizing:border-box;display:block;position:relative;z-index:1}
.pn-logo.bc{background:#fff}   /* blanco, como el de Nequi (Sergio: el amarillo se veia feo) */
.pn-logo.bc b{position:absolute;inset:0;display:grid;place-items:center;font-family:'Archivo';font-weight:900;
  font-size:8px;letter-spacing:-.02em;color:#000;text-transform:uppercase}    /* respaldo si falta el logo */
.pn-tx{flex:1;min-width:0;line-height:1.25;display:block}
.pn-t{display:flex;align-items:baseline;gap:6px;font-size:11px;font-weight:800;color:#fff}
.pn-t span{margin-left:auto;font-size:9px;font-weight:600;color:rgba(255,255,255,.45)}
.pn-v{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;margin-top:1px}
.pn-d{display:block;font-size:10.5px;color:rgba(255,255,255,.62);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-est{flex:0 0 auto;font-size:9.5px;font-weight:800;padding:4px 9px;border-radius:99px;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pn-est.pend{background:rgba(251,191,36,.16);color:#FBBF24}
.pn-est.pend i{width:6px;height:6px;border-radius:50%;background:#FBBF24;animation:pnLate .9s ease-in-out infinite}
.pn-est.ok{background:rgba(74,222,128,.16);color:#4ADE80;animation:pnPop .35s cubic-bezier(.2,.8,.2,1)}
@keyframes pnLate{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes pnPop{from{transform:scale(.6)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.pn,.pn-est.ok,.pn-est.pend i{animation:none}}
.itm{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--t2);
  padding:7px 0;border-bottom:1px solid var(--linea2)}
.itm b{color:var(--acid);font-size:11.5px}

/* ══ EL CELULAR DE LA FACTURA (bloque «El inventario», 11-sep-2026) ═══════
   Sergio: "en lugar de esa animacion tan sencilla, un mockup de un celular
   real donde se esta enviando por WhatsApp la factura y el bot le contesta
   actualizando el inventario". Es WhatsApp en modo oscuro: fondo #0B141A,
   burbuja saliente #005C4B, entrante #202C33, cabecera #202C33. La factura
   es un papelito dibujado (como el recibo del monitor), no una imagen.
   Los mensajes los pone el guion (id fac-hilo) y solo se mueven mientras
   el bloque se ve.                                                        */
#que .arg{min-height:600px}
#que .rep{width:min(36%,252px);padding:0;background:none;border:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.fac-tel{position:relative;border:8px solid #171B27;border-radius:32px;background:#0B141A;
  overflow:hidden;aspect-ratio:9/19;display:flex;flex-direction:column;
  box-shadow:0 40px 80px -26px #000,0 0 0 1px rgba(255,255,255,.06);
  font-family:'DM Sans',system-ui,sans-serif;color:#E9EDEF;-webkit-font-smoothing:antialiased}
.fac-tel::before{content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);
  width:54px;height:6px;border-radius:9px;background:#0A0C11;z-index:3}
.fac-cab{display:flex;align-items:center;gap:7px;padding:22px 10px 8px;background:#202C33;flex:0 0 auto}
.fac-av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#F97316,#F43F5E);
  display:grid;place-items:center;font-size:8px;font-weight:800;color:#fff;flex:0 0 auto}
.fac-quien{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.fac-quien b{font-size:9.5px;font-weight:700;white-space:nowrap}
.fac-quien s{text-decoration:none;font-size:7px;color:#8696A0}
.fac-ic{margin-left:auto;display:flex;gap:8px;color:#AEBAC1}
.fac-ic svg{width:11px;height:11px;display:block}
.fac-hilo{flex:1;min-height:0;padding:8px 8px 6px;display:flex;flex-direction:column;gap:5px;
  justify-content:flex-end;overflow:hidden;
  background:#0B141A radial-gradient(rgba(255,255,255,.04) 1px,transparent 1.2px) 0 0/14px 14px}
.fac-fecha{align-self:center;font-size:6.5px;color:#8696A0;background:#182229;border-radius:6px;
  padding:3px 7px;margin-bottom:2px}
.fac-bb{position:relative;max-width:86%;padding:5px 7px 4px;border-radius:8px;font-size:8px;line-height:1.45;
  white-space:pre-line;animation:facSube .32s cubic-bezier(.2,.8,.2,1) both}
.fac-bb.ent{align-self:flex-start;background:#202C33;border-top-left-radius:2px}
.fac-bb.sal{align-self:flex-end;background:#005C4B;border-top-right-radius:2px}
.fac-bb b{font-weight:700}
.fac-m{display:block;font-size:6px;color:rgba(233,237,239,.55);text-align:right;margin-top:2px;line-height:1}
.fac-m i{font-style:normal;color:#53BDEB;margin-left:2px}
.fac-esc{padding:7px 9px;display:flex;gap:3px;align-items:center;min-width:30px}
.fac-img{padding:3px 3px 4px}
.fac-foto{display:block;width:146px;border-radius:6px;background:#F6F2E8;color:#1E293B;padding:8px 9px;
  font-family:'DM Mono',monospace;font-size:5.5px;line-height:1.55;letter-spacing:.01em;
  box-shadow:inset 0 0 34px rgba(0,0,0,.14)}
.fac-foto b{display:block;font-size:6.5px;font-weight:800;letter-spacing:.06em;margin-bottom:2px}
.fac-foto .l{display:flex;justify-content:space-between;gap:6px;border-bottom:1px dashed rgba(30,41,59,.25);padding:2px 0}
.fac-foto .t{display:flex;justify-content:space-between;font-weight:800;margin-top:4px;font-size:6.5px}
.fac-cap{display:block;font-size:8px;padding:4px 4px 0}
.fac-pie{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:6px 8px 12px;background:#0B141A}
.fac-in{flex:1;background:#2A3942;border-radius:99px;padding:6px 10px;font-size:8px;color:#8696A0}
.fac-mic{width:24px;height:24px;border-radius:50%;background:#00A884;display:grid;place-items:center;flex:0 0 auto}
.fac-mic svg{width:11px;height:11px;display:block}
@keyframes facSube{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ═══ CARRUSEL 3D: una tarjeta por funcion (12-sep-2026) ═══
   Foto arriba con su etiqueta, ficha blanca abajo: nombre con su icono en un
   circulo de color (--tinte), frase con un pin, descripcion, tres datos con
   icono y, al pie, la cifra destacada y el boton. Es la referencia de tarjetas
   de viaje que trajo Sergio, con datos del producto en vez de metricas. */
.fn-cab{max-width:680px;margin:-4px 0 6px}
.fn-cab h2{font-size:clamp(28px,4.2vw,50px);margin:0 0 10px}
.fn-cab p{margin:0;color:var(--t2);font-size:15px;line-height:1.5}
.cars{position:relative;height:540px;perspective:1500px;margin-top:22px}
/*  SIN preserve-3d (12-sep-2026): con el, el navegador ordenaba las tarjetas por
    su posicion en 3D y, giradas, se atravesaban unas a otras a mitad de giro.
    En plano manda el z-index y cada tarjeta es una capa entera.            */
.cars .via{position:absolute;inset:0;display:grid;place-items:center}
.crd{position:absolute;width:280px;height:496px;border-radius:22px;overflow:hidden;background:#fff;backface-visibility:hidden;will-change:transform,opacity;
  border:1px solid rgba(15,23,42,.08);transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s,filter .5s;
  box-shadow:0 30px 60px -28px rgba(15,23,42,.45);display:flex;flex-direction:column;cursor:pointer;--tinte:#5B6BFF}
.crd .ph{width:100%;height:160px;flex:none;position:relative}
.crd .ph::after{display:none}
.fn-etq{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:5px;padding:5px 9px 5px 7px;
  border-radius:99px;background:rgba(255,255,255,.88);color:#0F172A;font-family:'Archivo';font-size:9.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(6px)}
.fn-etq svg{color:var(--tinte)}
.crd .fn{flex:1;display:flex;flex-direction:column;padding:13px 16px 14px;color:#0F172A;text-align:left;min-height:0}
.fn-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.fn-n{display:block;font-family:'Archivo';font-size:16.5px;font-weight:900;letter-spacing:-.02em;line-height:1.15}
.fn-f{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:11.5px;color:#64748B}
.fn-f svg{color:var(--tinte);flex:none}
.fn-ico{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);
  background:color-mix(in srgb,var(--tinte) 13%,#fff);border:1px solid color-mix(in srgb,var(--tinte) 28%,#fff)}
.fn-d{margin:9px 0 0;font-size:11.8px;line-height:1.5;color:#334155}
.fn-datos{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:auto;padding-top:11px;min-width:0}
.fn-dato{min-width:0}
.fn-di{display:block;color:var(--tinte);margin-bottom:3px}
.fn-dato small{display:block;font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:#94A3B8;font-weight:700}
.fn-dato b{display:block;font-size:10.5px;font-weight:700;color:#0F172A;line-height:1.3;margin-top:1px}
.fn-pie{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:11px;padding-top:11px;
  border-top:1px solid rgba(15,23,42,.08)}
.fn-cifra small{display:block;font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:#94A3B8;font-weight:700}
.fn-cifra b{display:block;font-family:'Archivo';font-size:21px;font-weight:900;letter-spacing:-.02em;line-height:1.1;color:#0F172A;margin-top:2px}
.fn-ir{flex:none;width:40px;height:40px;border-radius:50%;background:#0F172A;color:#fff;display:grid;place-items:center;
  transition:.16s;text-decoration:none}
.fn-ir svg{width:17px;height:17px}
.fn-ir:hover{background:var(--tinte)}
.crd.c0{transform:translateX(0) scale(1) rotateY(0);z-index:5;cursor:default}
.crd.c1,.crd.cm1{opacity:.78;filter:brightness(.85)}
.crd.c1{transform:translateX(254px) scale(.86) rotateY(-22deg);z-index:4}
.crd.cm1{transform:translateX(-254px) scale(.86) rotateY(22deg);z-index:4}
.crd.c2{transform:translateX(456px) scale(.72) rotateY(-30deg);z-index:3;opacity:.42;filter:brightness(.7)}
.crd.cm2{transform:translateX(-456px) scale(.72) rotateY(30deg);z-index:3;opacity:.42;filter:brightness(.7)}
/*  Las escondidas esperan a su lado (ocL/ocR), no en el centro: antes entraban
    y salian por el medio, encima de la activa, a medio desvanecer.        */
.crd.oc{opacity:0;pointer-events:none}
.crd.ocR{transform:translateX(640px) scale(.62) rotateY(-34deg);z-index:1}
.crd.ocL{transform:translateX(-640px) scale(.62) rotateY(34deg);z-index:1}
.crd.c0{border-color:var(--acid);box-shadow:0 0 0 3px rgba(91,107,255,.18),0 34px 70px -30px rgba(15,23,42,.6)}
.cnav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px}
.dots{display:flex;gap:6px}
.dt{width:7px;height:7px;border-radius:99px;background:rgba(15,23,42,.16);transition:.25s;cursor:pointer}
.dt.on{width:26px;background:var(--acid)}
@media(max-width:760px){
  .cars{height:526px;perspective:1100px}
  .crd{width:256px;height:486px}
  .crd.c1{transform:translateX(150px) scale(.8) rotateY(-24deg)}
  .crd.cm1{transform:translateX(-150px) scale(.8) rotateY(24deg)}
  .crd.c2,.crd.cm2{opacity:0;pointer-events:none}
  .crd.c2{transform:translateX(300px) scale(.7) rotateY(-30deg)}
  .crd.cm2{transform:translateX(-300px) scale(.7) rotateY(30deg)}
  .crd.ocR{transform:translateX(380px) scale(.6) rotateY(-34deg)}
  .crd.ocL{transform:translateX(-380px) scale(.6) rotateY(34deg)}
}

/* ═══ PRECIOS ═══ */
.precios{position:relative;background:var(--neg2);padding:110px 0;
  clip-path:polygon(0 42px,100% 0,100% 100%,0 calc(100% - 42px))}
.bar-div{height:36px;color:var(--t4);opacity:.3;max-width:460px;margin:0 auto 26px}
.ctr{text-align:center}
.ctr h2{font-size:clamp(38px,7.6vw,96px)}
.per{display:inline-flex;background:rgba(255,255,255,.05);border:1px solid var(--linea);border-radius:99px;
  padding:4px;gap:3px;margin:28px 0 12px}
.per button{padding:9px 19px;border-radius:99px;font-size:12.5px;font-weight:800;color:var(--t3);
  font-family:'Archivo';text-transform:uppercase;letter-spacing:.04em}
.per button.on{background:var(--acid);color:#fff}
.sed{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:40px;color:var(--t2);font-size:13px}
.stp{width:32px;height:32px;border-radius:50%;border:1px solid var(--linea);display:grid;place-items:center;font-weight:800}
.stp:hover{border-color:var(--acid);color:var(--acid)}
.planes{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:800px;margin:0 auto}
.pl{position:relative;background:var(--caja);border:1px solid var(--linea);border-radius:20px;padding:30px 26px;
  transition:.2s}
.pl:hover{transform:translateY(-4px)}
.pl.top{border-color:var(--acid);background:linear-gradient(180deg,rgba(255,216,77,.09),var(--caja) 46%)}
.pl .rec{position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-2deg);background:var(--acid);
  color:#fff;font-family:'Archivo';font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 14px;border-radius:6px;white-space:nowrap}
.pl h3{font-size:24px;margin-bottom:5px}
.pl .sb{font-size:12.5px;color:var(--t3);margin-bottom:20px}
.pz{font-family:'Archivo';font-weight:900;font-size:46px;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.pz+span{font-size:12.5px;color:var(--t3)}
.pdia{font-size:11.5px;color:var(--t4);margin:4px 0 22px}
.pl ul{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:10px}
.pl li{display:flex;gap:9px;font-size:13.5px;color:var(--t2)}
.pl li svg{width:13px;height:13px;color:var(--acid);flex-shrink:0;margin-top:5px}
.pl .btn{width:100%;justify-content:center}
.perf::before,.perf::after{content:"";position:absolute;left:-9px;right:-9px;height:18px;
  background:radial-gradient(circle at 9px 50%,var(--neg2) 8px,transparent 8px) 0 0/18px 18px repeat-x}
.perf::before{top:-9px}.perf::after{bottom:-9px;transform:rotate(180deg)}
.cpagan{margin-top:80px;position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.cpagan h3{font-size:clamp(30px,5.4vw,62px)}
.cpagan h3 em{font-style:normal;color:var(--acid)}
.cpagan h3 u{text-decoration:none;-webkit-text-stroke:1.4px var(--acid);color:transparent}
.med{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.med span{border:1px solid var(--linea);border-radius:99px;padding:7px 15px;font-size:12.5px;color:var(--t2)}
.cpagan .foto{position:relative;height:330px}
.cpagan .foto .ph{position:absolute;border-radius:16px;overflow:hidden}
.cpagan .foto .f1{left:0;top:0;width:66%;height:74%;transform:rotate(-2deg)}
.cpagan .foto .f2{right:0;bottom:0;width:54%;height:56%;transform:rotate(2.4deg);border:2px solid var(--neg2)}

/* ═══ PASOS ═══ */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative;margin-top:26px}
.ln{position:absolute;top:32px;left:9%;right:9%;height:2px;background:var(--linea)}
.ln i{display:block;height:100%;width:0;background:var(--acid);transition:width 1.2s ease-out}
.ps{text-align:center;position:relative}
.ps .n{width:64px;height:64px;border-radius:50%;margin:0 auto 16px;background:var(--neg);
  border:2px solid var(--acid);display:grid;place-items:center;font-family:'Archivo';font-size:22px;
  font-weight:900;color:var(--acid);position:relative;z-index:2}
.ps b{display:block;font-family:'Archivo';font-size:17px;font-weight:800;margin-bottom:6px;letter-spacing:-.02em}
.ps span{font-size:13.5px;color:var(--t3)}

/* ═══ FAQ ═══ */
.faq{max-width:840px;margin:0 auto;border-top:1px solid var(--linea)}
.fq{border-bottom:1px solid var(--linea);transition:.2s}
.fq.on{background:linear-gradient(90deg,rgba(255,216,77,.07),transparent 72%)}
.fqb{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:22px 6px;
  font-family:'Archivo';font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--t2);text-transform:none}
.fq.on .fqb{color:var(--acid)}
.fqb .cv{margin-left:auto;transition:.25s}
.fqb .cv svg{width:17px;height:17px}
.fq.on .fqb .cv{transform:rotate(180deg)}
.fqc{max-height:0;overflow:hidden;transition:max-height .3s}
.fq.on .fqc{max-height:240px}
.fqc p{padding:0 6px 24px;color:var(--t2);font-size:15px;max-width:66ch}
/*  ¿Qué necesito para empezar? (16-sep-2026): la única respuesta con dibujo.
    Dos bloques: lo MÍNIMO (con eso ya se vende) y lo ÓPTIMO (opcional).
    Va dentro de `.sec`, que es blanca: los colores son los del lado claro.  */
.fq-req.on .fqc{max-height:1600px}
.fqc .rq-intro{padding-bottom:20px}
.rq{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;padding:0 6px}
.rq-t{border-radius:18px;padding:22px 20px 18px;display:flex;flex-direction:column;gap:18px}
.rq-min{background:linear-gradient(160deg,#F1F3FF 0%,#FFFFFF 72%);border:1.5px solid rgba(91,107,255,.45);
  box-shadow:0 16px 32px -20px rgba(91,107,255,.55)}
.rq-opt{background:#FFFFFF;border:1.5px dashed rgba(15,23,42,.17)}
.rq-h{display:flex;flex-direction:column;gap:8px}
.rq-tag{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;line-height:1.4}
.rq-min .rq-tag{background:#5B6BFF;color:#FFFFFF}
.rq-opt .rq-tag{background:#F1F5F9;color:#475569}
.rq-h b{font-family:'Archivo';font-size:19px;font-weight:800;letter-spacing:-.02em;color:#0F172A;line-height:1.2}
.rq-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.rq-l li{display:flex;gap:14px;align-items:flex-start}
.rq-i{flex:0 0 44px;height:44px;border-radius:12px;display:grid;place-items:center}
.rq-i svg{width:22px;height:22px}
.rq-min .rq-i{background:linear-gradient(135deg,#5B6BFF,#8B5CF6);color:#FFFFFF;box-shadow:0 6px 14px -6px rgba(91,107,255,.6)}
.rq-opt .rq-i{background:#EEF2FF;color:#5B6BFF}
.rq-l b{display:block;font-size:15px;font-weight:700;color:#0F172A;line-height:1.3}
.rq-l small{display:block;font-size:13.5px;color:#64748B;line-height:1.45;margin-top:3px}
.rq-sello{margin-top:auto;display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;line-height:1.35;
  padding:11px 13px;border-radius:12px}
.rq-sello svg{width:16px;height:16px;flex:0 0 16px}
.rq-min .rq-sello{background:#DCFCE7;color:#15803D}
.rq-opt .rq-sello{background:#F8FAFC;color:#475569}
.rq-opt .rq-sello svg{color:#5B6BFF}
.rq-mas{align-self:center;width:36px;height:36px;margin:0 -7px;border-radius:999px;background:#FFFFFF;
  border:1.5px solid rgba(15,23,42,.12);display:grid;place-items:center;color:#5B6BFF;position:relative;z-index:1;
  box-shadow:0 4px 10px -4px rgba(15,23,42,.18)}
.rq-mas svg{width:16px;height:16px}
.rq-pie{display:flex;align-items:center;gap:10px;margin:16px 6px 24px;padding:12px 14px;border-radius:12px;
  background:#F8FAFC;color:#475569;font-size:14px;line-height:1.4}
.rq-pie svg{width:18px;height:18px;flex:0 0 18px;color:#5B6BFF}
@media(max-width:720px){
  .rq{grid-template-columns:1fr}
  .rq-mas{justify-self:center;margin:-8px 0}
  .rq-t{padding:20px 16px 16px}
}

/* ═══ NO HACE + CIERRE ═══ */
.noh{max-width:800px;margin:0 auto;text-align:center;border:1px dashed var(--linea);border-radius:22px;
  padding:50px 36px;position:relative}
.noh h3{font-size:clamp(22px,3.6vw,38px);margin-bottom:16px}
.noh p{color:var(--t2)}
.cierre{position:relative;text-align:center;padding:120px 0 90px;overflow:hidden}
.cierre .gl{position:absolute;left:50%;top:0;transform:translateX(-50%);width:760px;height:400px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,216,77,.13),transparent 66%)}
.cierre h2{font-size:clamp(38px,8vw,110px);position:relative}
.pie{border-top:1px solid var(--linea);padding:34px 0 42px;font-size:12.5px;color:var(--t4)}
.pie-in{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
.pie a{color:var(--t3);margin-right:18px}

.wa{position:fixed;right:22px;bottom:22px;z-index:80;width:54px;height:54px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 14px 32px -8px rgba(37,211,102,.6)}
.wa svg{width:26px;height:26px;color:#fff}
.mb{display:none;position:fixed;left:0;right:0;bottom:0;z-index:79;background:rgba(6,7,11,.95);
  backdrop-filter:blur(12px);border-top:1px solid var(--linea);padding:11px 16px;align-items:center;gap:12px}
.mb .d{font-size:11px;color:var(--t3)}.mb .d b{display:block;font-size:15px;color:#fff}
.mb .btn{margin-left:auto}

.rev{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.rev.v{opacity:1;transform:none}

@media(max-width:1080px){
  .autor,.cpagan{grid-template-columns:1fr}
  .autor-fotos{height:400px}
  .arg .cont{width:100%;padding:32px}
  /*  LAS ANIMACIONES, TAMBIEN AQUI (13-sep-2026). Antes `.arg .rep` se
      escondia y en celular y tablet no salia ninguna (Sergio: "en la
      version de computador hay una animacion y esta no sale en la de
      celular... creo que todos los banners donde tienen animaciones no
      salen"). Al lado del texto no caben, asi que van DEBAJO, dentro de la
      misma tarjeta: el chat del asistente, las notificaciones de pago y el
      celular de la factura.                                              */
  .arg{flex-direction:column;align-items:stretch}
  .arg .rep,.arg.d .rep{position:relative;right:auto;left:auto;top:auto;transform:none;
    align-self:center;margin:0 20px 34px}
  /*  el chat, a lo ancho; abajo le queda sitio a los tres iconos de las
      redes (.arg-redes, pegados al borde de abajo)                       */
  /*  `transform:none` otra vez: la regla de escritorio `#asistente .rep`
      lleva id y le gana a `.arg .rep`; sin esto el chat subia la mitad de
      su alto y tapaba la frase.                                          */
  #asistente .rep{width:calc(100% - 40px);max-width:520px;margin-bottom:78px;transform:none}
  #pagos .rep{width:calc(100% - 40px);max-width:400px}
  /*  Sitio fijo para las cuatro notificaciones: si la pila crece mientras
      llegan, la tarjeta se estira y todo lo de abajo brinca al leer.     */
  #pagos .pn-pila{min-height:312px}
  #que .arg{min-height:0}
  /*  El degradado de escritorio de este bloque oscurece la DERECHA (alli va
      el texto); en columna el texto va arriba, sobre la ventana iluminada de
      la bodega, y no se leia. Sergio: solo este bloque, los demas estan bien. */
  #que .arg .fondo::after{background:linear-gradient(180deg,rgba(6,7,11,.95) 0%,
    rgba(6,7,11,.88) 42%,rgba(6,7,11,.55) 66%,rgba(6,7,11,.35) 100%)}
  #que .rep{width:min(64%,252px)}
}
@media(max-width:760px){
  .mn{display:none}.brg{display:grid}
  /*  La barra tiene que caber en 390 px: con Entrar + Empezar + hamburguesa
      medía 573 y ensanchaba TODA la pagina (el celular la veia encogida).
      Empezar ya vive en la barra fija de abajo (.mb) y dentro del menu. */
  .nav-in{gap:10px}
  .nd{gap:8px}
  .nd .btn:not(.o){display:none}
  .nd .btn.o{margin-right:0!important;padding:8px 15px;font-size:12px}
  .brg{order:3}
  /*  Barras fijas OPACAS en el celular (13-sep-2026): Safari del iPhone
      (iOS 26) solo continua hacia la barra de estado y hacia su propia
      barra de abajo el color de una barra fija con fondo opaco; con las
      translucidas pintaba esas franjas de blanco.                        */
  .nav.on{background:#0A0B10;backdrop-filter:none;-webkit-backdrop-filter:none}
  .mb{background:#06070B;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav.abierto{background:rgba(6,7,11,.97);backdrop-filter:blur(16px);border-bottom-color:transparent}
  .nav.abierto .brg{border-color:var(--acid);color:#fff}
  .nav.abierto .brg .b{display:none}.nav.abierto .brg .x{display:block}
  .mn-cel{display:block;position:absolute;top:64px;left:0;right:0;
    background:rgba(6,7,11,.97);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--linea2);padding:4px 24px 22px;
    box-shadow:0 30px 50px -20px rgba(0,0,0,.7);
    animation:mnBaja .22s cubic-bezier(.2,.8,.2,1)}
  .mn-cel[hidden]{display:none!important}
  .mn-cel .lk{display:flex;align-items:center;justify-content:space-between;
    padding:16px 2px;border-bottom:1px solid var(--linea2);color:#fff;
    font-family:'Archivo';font-size:19px;font-weight:800;letter-spacing:-.01em;text-transform:uppercase}
  .mn-cel .lk svg{width:16px;height:16px;color:var(--t3)}
  .mn-cel .lk.act{color:var(--acid)}
  .mn-cel .bts{display:flex;gap:10px;margin-top:18px}
  .mn-cel .bts .btn{flex:1;justify-content:center}
  @keyframes mnBaja{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  /*  El globo de ayuda de cada funcion del plan media 104 % del renglon y se
      salia por la derecha: en el celular va justo del ancho del renglon.  */
  .precios-p2 .p2-tip{width:auto;right:0}
  /*  El chat del asistente, cuadrado: a 16/11 y 300 px de ancho solo se
      veian dos burbujas de la conversacion.                             */
  #asistente .ch{aspect-ratio:1/1}
  .recorte{display:none}.tarj-flot{display:none}.lat{display:none}
  .planes{grid-template-columns:1fr}
  .cifras{grid-template-columns:repeat(2,1fr)}
  .cf:nth-child(3){border-left:none}.cf:nth-child(n+3){border-top:1px solid var(--linea)}
  .pasos{grid-template-columns:1fr}.ln{display:none}
  .mb{display:flex}.wa{bottom:84px}body{padding-bottom:70px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rev{opacity:1;transform:none}}

/*  La seccion de precios trae su propio mundo: el bloque de planes esta
    diseñado sobre fondo claro y se respeta tal cual. En una pagina oscura
    funciona como un panel que se abre — y ademas separa "lo que hace" de
    "lo que cuesta", que es la decision.                                  */
.precios-p2{background:#F1F5F9;padding:64px 0 72px;position:relative;z-index:2}
.precios-p2 .p2-root{min-height:0;padding:0}
@media (max-width:760px){.precios-p2{padding:40px 0 48px}}
/*  LOS PLANES EN EL CELULAR (13-sep-2026, Sergio: "se ve muy estrecho, se ve
    apretado"). Arriba se le quita el relleno a .p2-root para que en escritorio
    siga el ancho de la pagina; en el celular eso lo dejaba pegado a los
    bordes. La cabecera eran tres cosas en fila en 390 px (marca, titulo y
    "Sin permanencia") y la marca partia en cuatro renglones: en el celular
    va el titulo solo y debajo la pastilla. La marca sobra: la barra de
    arriba ya dice Cobra POS. Solo en la landing; el registro no cambia.     */
@media (max-width:760px){
  .precios-p2 .p2-root{padding:0 16px}
  .precios-p2 .p2-head{flex-direction:column;gap:12px;text-align:center}
  .precios-p2 .p2-brand{display:none}
  .precios-p2 .p2-title{font-size:27px;line-height:1.15}
  .precios-p2 .p2-title em{display:block}
  .precios-p2 .p2-controls{gap:8px}
  .precios-p2 .p2-branchbar{gap:8px;padding:5px 5px 5px 11px}
  .precios-p2 .p2-bill{padding:0 11px;gap:5px}
}
@media (max-width:374px){
  .precios-p2 .p2-branch-title span{display:none}
  .precios-p2 .p2-bill{padding:0 8px;font-size:12px}
}

/* ══ EL SIMULADOR: una tablet con el POS de verdad, en miniatura ══════════

   Lo de aqui abajo no es un dibujo: son los mismos colores y las mismas
   proporciones de `ventas-salon.css` y `tomar-pedido.css`, reducidos. Los
   valores llevan al lado de donde salieron.

   Las medidas de dentro se miden contra el ANCHO DE LA TABLET, no contra la
   ventana (@container). Asi la miniatura se reacomoda sola cuando la seccion
   pasa de dos columnas a una, sin depender del tamano del telefono.       */
.sim{padding:64px 0 96px}

/* ══ MARCAS: la cinta de logos debajo de la portada (12-sep-2026) ══════════
   Logos de un solo trazo pintados con currentColor: en reposo gris, al pasar
   el mouse toman su color (--c). La zona bajo la portada es BLANCA (el
   body de la landing es claro): OpenAI y ElevenLabs van a tinta oscura al
   pasar el mouse. La cinta se frena al pasar el mouse. Dos
   copias de la fila y un desplazamiento del 100 % de su ancho: el giro no
   tiene costura. Con «reducir movimiento» no se mueve: se ve como una fila
   que se acomoda en varias lineas. */
.marcas{padding:26px 0 8px;position:relative}
.marcas-t{margin:0 0 22px;text-align:center;font-family:'DM Mono',monospace;font-size:10.5px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--t4)}
.marcas-cinta{display:flex;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.marcas-fila{display:flex;flex:none;align-items:center;gap:64px;padding-right:64px;
  animation:marcasSlide 42s linear infinite;will-change:transform}
.marcas-cinta:hover .marcas-fila{animation-play-state:paused}
.marca{display:inline-flex;align-items:center;gap:11px;color:var(--t3);white-space:nowrap;
  transition:color .25s;cursor:default}
.marca svg{width:26px;height:26px;flex:none;fill:currentColor;display:block}
.marca b{font-family:'DM Sans',system-ui,sans-serif;font-weight:600;font-size:15px;letter-spacing:-.01em}
.marca:hover{color:var(--c)}
/*  El Parche va como imagen (su logo no es de un solo trazo): gris en reposo
    como los demas, y a color al pasar el mouse.                            */
.marca-img img{height:30px;width:auto;display:block;filter:grayscale(1) opacity(.72);transition:filter .25s}
.marca-img:hover img{filter:none}
@keyframes marcasSlide{to{transform:translateX(-100%)}}
@media(max-width:640px){
  .marcas{padding-top:18px}
  .marcas-fila{gap:40px;padding-right:40px;animation-duration:30s}
  .marca svg{width:22px;height:22px}
  .marca b{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .marcas-fila{animation:none;flex-wrap:wrap;justify-content:center;gap:22px 40px;padding:0 24px}
  .marcas-fila[aria-hidden]{display:none}
  .marcas-cinta{-webkit-mask:none;mask:none}
}
.sim-grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:54px;align-items:center}
/*  Lo de pantalla estrecha va TODO junto al final de este bloque, despues de
    las reglas base. Aqui arriba no sirve: pesan lo mismo y ganaria la de
    abajo, asi que el @media no haria nada.                               */

/*  ── la columna del texto ── */
.sim-txt h2{font-size:clamp(30px,3.5vw,46px);line-height:.98;letter-spacing:-.03em}
.sim-txt .lead{font-size:16.5px;color:var(--t2);margin-top:16px;max-width:42ch}
.sim-pasos{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.sim-paso{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:11px;
  transition:background .25s,box-shadow .25s}
.sim-paso i{width:23px;height:23px;flex:0 0 auto;border-radius:999px;font-style:normal;
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;
  background:rgba(15,23,42,.07);color:var(--t3);transition:background .25s,color .25s}
.sim-paso b{font-size:14.5px;font-weight:600;color:var(--t3);transition:color .25s}
.sim-paso.ya i{background:#DCFCE7;color:#16A34A}
.sim-paso.ya b{color:var(--t2)}

/*  ── EL PASO EN QUE VAS ────────────────────────────────────────────────
    Sergio: *"que ese paso se resalte, que brille, que algo suceda"*. Tres
    cosas, al mismo compas de 1,7 s que el aviso de la tablet, para que se
    lea como una sola cosa y no como dos animaciones sueltas:
      · una barra de color pegada al canto izquierdo,
      · el numero con su anillo que late,
      · y una flecha que apunta a la tablet, o sea a donde hay que tocar. */
.sim-paso.on{background:linear-gradient(90deg,rgba(91,107,255,.15),rgba(91,107,255,.02));
  box-shadow:inset 3px 0 0 var(--ind)}
.sim-paso.on i{background:var(--ind);color:#fff;animation:simLate 1.7s ease-in-out infinite}
.sim-paso.on b{color:var(--tinta);font-weight:800}
.sim-paso.on::after{content:'';width:7px;height:7px;flex:0 0 auto;margin-left:auto;
  border-right:2.2px solid var(--ind);border-bottom:2.2px solid var(--ind);
  border-radius:0 0 2px 0;transform:rotate(-45deg);
  animation:simFlecha 1.7s ease-in-out infinite}
@keyframes simLate{
  0%,100%{box-shadow:0 0 0 0 rgba(91,107,255,.55)}
  55%,100%{box-shadow:0 0 0 9px rgba(91,107,255,0)}}
@keyframes simFlecha{
  0%,100%{transform:rotate(-45deg) translate(0,0);opacity:.55}
  30%    {transform:rotate(-45deg) translate(3px,3px);opacity:1}}
@media(prefers-reduced-motion:reduce){
  .sim-paso.on i,.sim-paso.on::after{animation:none}}
.sim-otra{margin-top:22px;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;
  border-radius:11px;border:1px solid rgba(15,23,42,.14);background:#fff;color:var(--t2);
  font-family:'Archivo';font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity .3s,border-color .16s,color .16s}
.sim-otra.se-ve{opacity:1;pointer-events:auto}
.sim-otra:hover{border-color:var(--ind);color:var(--ind)}
.sim-otra svg{width:14px;height:14px}

/*  ── la tablet ──
    Viene ladeada y se endereza sola cuando la seccion llega al centro de la
    pantalla. Los tres giros los escribe el guion en --gx/--gy/--gz segun lo
    centrada que este; aqui solo estan los valores de reposo, por si el guion
    no llega a correr.

    `perspective` va en la propia transformacion y no en el padre a proposito:
    el padre es una celda de rejilla y ponerle perspectiva le crea un contexto
    de apilamiento que se traga las sombras de la tablet.                  */
.sim-tablet{position:relative;background:linear-gradient(150deg,#1C2130,#0A0D16 60%);
  border-radius:26px;padding:15px 15px 17px;
  transform:perspective(1100px) rotateX(var(--gx,0deg)) rotateY(var(--gy,0deg))
            rotateZ(var(--gz,0deg)) scale(var(--ge,1));
  transform-origin:50% 60%;will-change:transform;
  box-shadow:0 42px 80px -34px rgba(15,23,42,.5),0 8px 22px -10px rgba(15,23,42,.26),
             inset 0 1px 0 rgba(255,255,255,.09)}
.sim-tablet::before{content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:999px;background:#2C3346;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.sim-pant{container-type:inline-size;position:relative;overflow:hidden;
  aspect-ratio:16/10.6;border-radius:12px;background:#FAFAFB;   /* --bg del POS */
  font-family:'DM Sans',system-ui,sans-serif;color:#0F172A;line-height:1.4;
  -webkit-font-smoothing:antialiased}
.sim-pant *{box-sizing:border-box}
/*  El :where() es OBLIGATORIO. Sin el, `.sim-pant button` pesa mas que
    cualquier `.sm-algo` de una sola clase y le borra a TODOS los botones del
    simulador su fondo, su borde y su relleno: las tarjetas se quedan en nada
    y el boton azul de "Enviar a cocina" sale blanco y partido en dos
    renglones. Con :where() el reposo no pesa nada y cada clase manda en lo
    suyo.                                                                  */
:where(.sim-pant button){font-family:inherit;font-size:inherit;cursor:pointer;border:none;
  background:none;padding:0;color:inherit;text-align:left}
:where(.sim-pant svg){display:block}

/*  Las vistas viven una encima de otra: cambiar de vista no recarga nada. */
.sm-vista{position:absolute;inset:0;display:none;flex-direction:column}
.sm-vista.on{display:flex}

/*  ── EL AVISO DE "TOCA AQUI" ───────────────────────────────────────────
    Sergio, 2-sep: *"no se nota que la persona debe tocar ahi"*. Una sola
    senal no basta a este tamano, asi que van CUATRO a la vez y todas al
    mismo compas de 1,7 s:

        1 · el borde late y la tarjeta respira,
        2 · una mano baja, toca y deja dos ondas, como un dedo de verdad,
        3 · la etiqueta, mas grande y con su flecha,
        4 · y lo que tiene al lado se apaga, que asi no hay donde mas mirar.

    Lo cuarto es lo que mas hace: con una sola tarjeta encendida no hace
    falta leer nada para saber donde va el dedo.                          */
.sm-late{position:relative;z-index:5;border-color:#5B6BFF !important;
  animation:smLate 1.7s ease-in-out infinite}
@keyframes smLate{
  0%,100%{box-shadow:0 0 0 3px rgba(91,107,255,.34);transform:scale(1)}
  26%    {box-shadow:0 0 0 9px rgba(91,107,255,.10);transform:scale(1.025)}
  48%    {box-shadow:0 0 0 3px rgba(91,107,255,.34);transform:scale(1)}}
.sm-apagado{opacity:.4;filter:saturate(.45);transition:opacity .3s,filter .3s}

/*  la mano y sus ondas */
.sm-tap{position:absolute;left:50%;top:57%;width:0;height:0;z-index:8;pointer-events:none}
.sm-tap.lado{left:auto;right:-2px;top:50%}
.sm-tap svg{position:absolute;left:-4px;top:-5px;width:26px;height:26px;
  filter:drop-shadow(0 3px 7px rgba(15,23,42,.5));
  animation:smDedo 1.7s cubic-bezier(.3,.7,.3,1) infinite}
@keyframes smDedo{
  0%,100%{transform:translateY(0)}
  16%    {transform:translateY(-7px)}
  30%    {transform:translateY(1px)}
  46%    {transform:translateY(0)}}
.sm-onda{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:999px;
  border:2.2px solid #5B6BFF;opacity:0;animation:smOnda 1.7s ease-out infinite}
.sm-onda.dos{animation-delay:.17s}
@keyframes smOnda{
  0%,26%{transform:scale(.3);opacity:0}
  33%   {opacity:.72}
  100%  {transform:scale(2.2);opacity:0}}

.sm-toca{position:absolute;z-index:9;top:0;right:0;background:#5B6BFF;color:#fff;
  font-size:8.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 8px;border-radius:0 9px 0 9px;pointer-events:none;white-space:nowrap;
  box-shadow:0 5px 14px -3px rgba(91,107,255,.75)}
/*  En la esquina de arriba a la izquierda: la de la derecha ya la ocupa el
    circulito de escoger, y el recuadro recorta, asi que va pegada al borde. */
.sm-toca.izq{right:auto;left:0;border-radius:0 0 9px 0}
/*  Sobre un boton la etiqueta va encima, que dentro no cabe. Y pegada a su
    borde IZQUIERDO: centrada le caia justo encima al total de la comanda. */
.sm-toca.arriba{top:auto;right:auto;left:0;bottom:calc(100% + 8px);
  border-radius:999px;padding:4px 10px;animation:smBota 1.7s ease-in-out infinite}
.sm-toca.arriba::after{content:'';position:absolute;top:100%;left:15px;
  border:4px solid transparent;border-top-color:#5B6BFF}
@keyframes smBota{0%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}

@media(prefers-reduced-motion:reduce){
  .sm-late,.sm-tap svg,.sm-onda,.sm-toca.arriba{animation:none}
  .sm-onda{display:none}}

/*  ── barra de arriba (vs-topbar: 60px en el POS) ── */
.sm-top{height:34px;flex:0 0 auto;background:#fff;border-bottom:1px solid #ECEEF2;
  display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 11px}
.sm-marca{display:flex;align-items:center;gap:7px;min-width:0}
.sm-logo{width:19px;height:19px;border-radius:5px;flex:0 0 auto;
  background:linear-gradient(135deg,#5B6BFF,#8B5CF6);color:#fff;font-weight:800;font-size:10px;
  display:flex;align-items:center;justify-content:center}
.sm-marca b{font-size:10px;font-weight:800;letter-spacing:-.01em;display:block;line-height:1.2}
.sm-marca s{font-size:8px;color:#94A3B8;text-decoration:none;display:block;line-height:1.2}
.sm-modo{display:inline-flex;align-items:center;gap:5px;background:#F1F5F9;border-radius:999px;
  padding:3px 8px;font-size:8.5px;font-weight:600;color:#64748B;white-space:nowrap}
.sm-modo i{width:5px;height:5px;border-radius:999px;background:#16A34A;display:block}
.sm-user{display:flex;align-items:center;gap:6px;min-width:0}
.sm-ava{width:19px;height:19px;border-radius:999px;flex:0 0 auto;
  background:linear-gradient(135deg,#5B6BFF,#8B5CF6);color:#fff;font-size:8.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.sm-user b{font-size:9px;font-weight:700;display:block;line-height:1.2;white-space:nowrap}
.sm-user s{font-size:8px;color:#5B6BFF;font-weight:700;text-decoration:none;display:block;line-height:1.2}
@container (max-width:430px){.sm-modo,.sm-user b,.sm-user s{display:none}}

/*  ── cabecera de pagina (vs-page-head) ── */
.sm-cab{padding:10px 13px 0;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.sm-eyeb{font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#94A3B8}
.sm-tit{font-size:17px;font-weight:800;letter-spacing:-.025em;margin-top:1px}
.sm-leyenda{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.sm-ley{display:inline-flex;align-items:center;gap:4px;font-size:8px;color:#64748B;font-weight:500;
  white-space:nowrap}
.sm-ley i{width:5px;height:5px;border-radius:999px;display:block;flex:0 0 auto}
@container (max-width:430px){.sm-leyenda{display:none}}

/*  ── pestanas del salon (vs-salon-tabs) ── */
.sm-tabs{display:flex;gap:3px;padding:9px 13px 0;flex:0 0 auto}
.sm-tab{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;
  font-size:9.5px;font-weight:600;color:#64748B}
.sm-tab.on{background:#EEF2FF;color:#5B6BFF;font-weight:700}
.sm-tab u{text-decoration:none;font-size:8.5px;font-weight:700;padding:0 5px;border-radius:999px;
  background:#F1F5F9;color:#64748B}
.sm-tab.on u{background:#fff;color:#5B6BFF}

/*  ── la reja de mesas (vs-grid + lm-mesa) ── */
/*  `minmax(74px,1fr)` y no `1fr` a secas: en un telefono las tres filas no
    caben y `1fr` las aplasta hasta que la tarjeta se come su propio numero
    y su total. Con suelo minimo la reja se desplaza, que es justo lo que
    hace el salon de verdad.                                              */
.sm-mesas{flex:1;min-height:0;overflow-y:auto;display:grid;
  grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(74px,1fr);
  gap:8px;padding:9px 13px 13px}
@container (max-width:430px){.sm-mesas{grid-template-columns:repeat(2,1fr)}}
.sm-mesa{display:flex;flex-direction:column;background:#fff;border:1px solid #ECEEF2;
  border-radius:9px;padding:8px 9px;overflow:hidden;position:relative;
  box-shadow:0 2px 6px rgba(15,23,42,.09),0 1px 2px rgba(15,23,42,.06);
  transition:transform .15s,box-shadow .15s,border-color .15s}
.sm-mesa.libre:hover{transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(15,23,42,.13),0 2px 5px rgba(15,23,42,.07)}
.sm-mesa.ocupada{cursor:default}
.sm-mesa-cab{display:flex;align-items:center;justify-content:space-between;gap:5px}
.sm-pill{display:inline-flex;align-items:center;gap:4px;font-size:7.5px;font-weight:700;
  padding:3px 6px;border-radius:999px;white-space:nowrap}
.sm-pill i{width:4px;height:4px;border-radius:999px;display:block;flex:0 0 auto}
.sm-reloj{display:inline-flex;align-items:center;gap:3px;font-size:7.5px;font-weight:600;
  color:#64748B;background:#F1F5F9;padding:2px 6px;border-radius:999px;white-space:nowrap}
.sm-num-fila{display:flex;align-items:baseline;gap:6px;margin-top:5px}
.sm-num{font-size:23px;font-weight:800;letter-spacing:-.04em;line-height:1}
.sm-num.gris {color:#CBD5E1}   /* vs-mesa-num--libre  */
.sm-num.tinta{color:#0F172A}   /* vs-mesa-num--active */
.sm-mpax{display:flex;align-items:center;gap:3px;color:#64748B;font-size:8px;font-weight:600}
.sm-pie{margin-top:auto;padding-top:7px;border-top:1px dashed #ECEEF2}
.sm-pie-libre{font-size:8px;color:#94A3B8;font-weight:500}
.sm-pie-act{display:flex;align-items:center;justify-content:space-between;gap:6px}
.sm-pie-izq{display:flex;align-items:center;gap:4px;min-width:0}
.sm-mini-ava{width:14px;height:14px;border-radius:999px;flex:0 0 auto;background:#EEF2FF;
  color:#5B6BFF;font-size:7px;font-weight:800;display:flex;align-items:center;justify-content:center}
.sm-items{font-size:8px;color:#64748B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-total{font-size:9.5px;font-weight:700;color:#0F172A;font-variant-numeric:tabular-nums;
  white-space:nowrap}
/*  Los recortes de la tarjeta van DESPUES de sus reglas base, o pierden.  */
@container (max-width:430px){
  .sm-mesa{padding:6px 7px}
  .sm-num{font-size:19px}
  .sm-reloj{display:none}          /* lo primero que sobra cuando falta sitio */
  .sm-pie{padding-top:5px}
}

/*  ── LA TOMA DE PEDIDO (tp-body: comanda | browser) ─────────────────── */
.sm-orden{flex:1;min-height:0;display:flex}
.sm-comanda{width:38%;min-width:0;flex:0 0 auto;background:#fff;border-right:1px solid #ECEEF2;
  display:flex;flex-direction:column}
@container (max-width:430px){.sm-comanda{width:44%}}
.sm-com-cab{padding:9px 11px;border-bottom:1px solid #ECEEF2;flex:0 0 auto}
.sm-com-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sm-mesa-id{display:flex;align-items:center;gap:7px;min-width:0}
.sm-glyph{width:30px;height:30px;flex:0 0 auto;border-radius:8px;background:#EEF2FF;color:#5B6BFF;
  font-size:14px;font-weight:800;letter-spacing:-.03em;
  display:flex;align-items:center;justify-content:center}
.sm-abierta{display:inline-flex;align-items:center;gap:4px;font-size:8px;font-weight:600;
  color:#64748B;min-width:0}
.sm-abierta i{width:4px;height:4px;border-radius:999px;background:#16A34A;display:block;flex:0 0 auto}
.sm-step{display:inline-flex;align-items:center;border:1px solid #ECEEF2;border-radius:7px;
  overflow:hidden;background:#fff;flex:0 0 auto}
.sm-step button{width:17px;height:17px;display:flex;align-items:center;justify-content:center;
  color:#475569}
.sm-step button:hover{background:#F1F5F9;color:#0F172A}
.sm-step span{width:19px;text-align:center;font-size:9.5px;font-weight:800;
  font-variant-numeric:tabular-nums}
.sm-paxlbl{font-size:7.5px;color:#94A3B8;font-weight:600;margin-left:4px}
.sm-cliente{display:flex;align-items:center;gap:6px;padding:7px 11px;border-bottom:1px solid #ECEEF2;
  color:#94A3B8;font-size:9px;flex:0 0 auto}
.sm-cliente-ic{width:17px;height:17px;border-radius:6px;background:#F1F5F9;color:#64748B;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center}

/*  comanda vacia (tp-empty) */
.sm-vacia{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px 14px;text-align:center}
.sm-vacia-ic{width:40px;height:40px;border-radius:12px;background:#F1F5F9;color:#CBD5E1;
  display:flex;align-items:center;justify-content:center;margin-bottom:9px}
.sm-vacia b{font-size:10.5px;font-weight:700;display:block}
.sm-vacia s{font-size:8.5px;color:#64748B;text-decoration:none;display:block;margin-top:4px;
  line-height:1.45;max-width:150px}

/*  lineas de la comanda (tp-cartline) */
.sm-lineas{flex:1;min-height:0;overflow-y:auto;padding:8px 10px 2px}
.sm-lhead{display:flex;align-items:center;justify-content:space-between;padding-bottom:6px}
.sm-micro{font-size:7.5px;font-weight:700;color:#94A3B8;text-transform:uppercase;letter-spacing:.06em}
.sm-vaciar{font-size:8.5px;font-weight:700;color:#5B6BFF}
.sm-linea{display:flex;align-items:center;gap:7px;padding:6px 4px;
  border-bottom:1px solid #F1F5F9;animation:smEntra .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes smEntra{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.sm-lfoto{width:26px;height:26px;border-radius:6px;flex:0 0 auto;object-fit:cover;display:block;
  background:#F1F5F9}
.sm-ltxt{flex:1;min-width:0}
.sm-lnom{display:block;font-size:9px;font-weight:700;line-height:1.2;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sm-lsub{display:block;font-size:7.5px;color:#64748B;line-height:1.3;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-lqty{font-size:8.5px;font-weight:800;color:#5B6BFF;flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.sm-lpre{font-size:9px;font-weight:700;flex:0 0 auto;font-variant-numeric:tabular-nums}

/*  pie de la comanda (tp-comanda-foot) */
.sm-com-pie{flex:0 0 auto;border-top:1px solid #ECEEF2;padding:9px 11px;position:relative}
.sm-tot{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.sm-tot span{font-size:10px;font-weight:700;color:#475569}
.sm-tot b{font-size:15px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sm-acciones{display:flex;gap:6px}
.sm-btn-g{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px;
  border-radius:8px;border:1px solid #ECEEF2;background:#fff;color:#475569;font-size:9px;
  font-weight:600}
.sm-btn-g:hover{background:#F8FAFC;color:#0F172A}
.sm-btn-p{flex:2;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px;
  border-radius:8px;background:#5B6BFF;color:#fff;font-size:9px;font-weight:700;position:relative;
  box-shadow:0 2px 8px -2px rgba(91,107,255,.45)}
.sm-btn-p:hover{background:#4F5BE3}

/*  ── EL CATALOGO (tp-browser) ── */
.sm-browser{flex:1;min-width:0;display:flex;flex-direction:column;padding:9px 11px 11px}
.sm-btabs{display:flex;gap:14px;border-bottom:1px solid #ECEEF2;flex:0 0 auto;margin-bottom:9px}
.sm-btab{padding:0 0 7px;font-size:10px;font-weight:600;color:#64748B;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.sm-btab.on{color:#5B6BFF;border-bottom-color:#5B6BFF;font-weight:700}
.sm-ghead{display:flex;align-items:center;gap:8px;padding-bottom:8px;flex:0 0 auto}
.sm-back{display:inline-flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;background:#fff;
  border:1px solid #ECEEF2;border-radius:7px;font-size:8.5px;font-weight:600;color:#475569;
  flex:0 0 auto}
.sm-back:hover{background:#F8FAFC;color:#0F172A}
.sm-catdot{width:6px;height:6px;border-radius:999px;flex:0 0 auto}
.sm-ghead b{font-size:10.5px;font-weight:700;letter-spacing:-.01em}
.sm-cuenta{font-size:8px;font-weight:700;color:#64748B;background:#F1F5F9;padding:1px 6px;
  border-radius:999px}

/*  reja de categorias (tp-catgrid: 3 columnas) y de productos (4) */
.sm-cats{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:min-content;gap:9px;align-content:start}
.sm-prods{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:min-content;gap:8px;align-content:start}
@container (max-width:430px){.sm-cats,.sm-prods{grid-template-columns:repeat(2,1fr)}}
/*  Sin `overflow:hidden`: recortaba la onda de la mano del aviso. La foto ya
    lleva su propio redondeo, asi que la tarjeta no necesita recortar.    */
.sm-cat{display:flex;flex-direction:column;background:#fff;border:1px solid #ECEEF2;
  border-radius:9px;position:relative;
  transition:transform .15s,box-shadow .15s,border-color .15s}
.sm-cat:hover{transform:translateY(-3px);box-shadow:0 10px 22px -12px rgba(15,23,42,.22)}
.sm-cat img{width:calc(100% - 10px);margin:5px 5px 0;aspect-ratio:16/9;object-fit:cover;
  border-radius:6px;display:block;background:#F1F5F9}
.sm-cat-pie{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 8px 8px}
.sm-cat-pie b{font-size:9.5px;font-weight:700;letter-spacing:-.01em;display:block;line-height:1.2}
.sm-cat-pie s{font-size:7.5px;color:#94A3B8;text-decoration:none;display:block;line-height:1.2}
.sm-cat-ic{width:18px;height:18px;border-radius:6px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center}
.sm-prod{display:flex;flex-direction:column;padding:5px;background:#fff;border:1px solid #ECEEF2;
  border-radius:9px;position:relative;transition:transform .12s,box-shadow .15s,border-color .15s}
.sm-prod:hover{transform:translateY(-2px);border-color:#C7D2FE;
  box-shadow:0 10px 20px -12px rgba(15,23,42,.22)}
.sm-prod img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:6px;display:block;
  background:#F1F5F9}
.sm-prod-pie{padding:6px 3px 1px}
.sm-prod-pie b{font-size:9px;font-weight:600;line-height:1.25;display:block}
.sm-prod-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:4px}
.sm-prod-pre{font-size:9.5px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sm-prod-mas{width:17px;height:17px;border-radius:999px;background:#EEF2FF;color:#5B6BFF;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center}
.sm-qty-badge{position:absolute;top:9px;right:9px;min-width:15px;height:15px;padding:0 4px;
  border-radius:999px;background:#5B6BFF;color:#fff;font-size:8px;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;
  box-shadow:0 2px 6px -1px rgba(91,107,255,.5)}

/*  ── EL MODAL DEL PRODUCTO (pm-*) ── */
.sm-overlay{position:absolute;inset:0;z-index:20;background:rgba(15,23,42,.40);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:14px;
  animation:smFade .18s ease}
.sm-overlay.on{display:flex}
@keyframes smFade{from{opacity:0}to{opacity:1}}
.sm-modal{width:100%;max-width:400px;max-height:100%;background:#fff;border-radius:13px;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(15,23,42,.45);
  animation:smPop .22s cubic-bezier(.2,.8,.2,1)}
@keyframes smPop{from{transform:scale(.96) translateY(8px);opacity:0}to{transform:none;opacity:1}}
.sm-mhead{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:10px 12px;
  border-bottom:1px solid #ECEEF2;flex:0 0 auto}
.sm-mhead-ic{width:26px;height:26px;border-radius:7px;background:#EEF2FF;color:#5B6BFF;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center}
/*  `display:block` en los dos: son <span> dentro de un <span>, y sin esto el
    nombre del plato y su categoria salen pegados en el mismo renglon.    */
.sm-mtit{display:block;font-size:11.5px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.sm-msub{display:block;font-size:8.5px;color:#94A3B8;margin-top:1px;line-height:1.2}
.sm-mclose{width:22px;height:22px;border-radius:6px;border:1px solid #ECEEF2;background:#fff;
  color:#94A3B8;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.sm-mclose:hover{background:#F1F5F9;color:#0F172A}
.sm-msteps{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid #ECEEF2;
  background:#FAFAFB;flex:0 0 auto}
.sm-mstep{display:inline-flex;align-items:center;gap:6px}
.sm-mstep i{width:17px;height:17px;border-radius:999px;background:#E2E8F0;color:#CBD5E1;font-style:normal;
  font-size:8.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.sm-mstep b{font-size:9px;font-weight:600;color:#CBD5E1;white-space:nowrap}
.sm-mstep.on i{background:#5B6BFF;color:#fff}
.sm-mstep.on b{color:#0F172A;font-weight:700}
.sm-mstep.ya i{background:#DCFCE7;color:#16A34A}
.sm-mstep.ya b{color:#475569}
.sm-mline{flex:1;height:2px;background:#E2E8F0;border-radius:2px;max-width:48px}
.sm-mline.ya{background:#BBF7D0}
.sm-mbody{flex:1;min-height:0;overflow-y:auto;padding:12px}

/*  paso 1: la presentacion (pm-choice) */
.sm-elige{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
/*  Igual que la tarjeta de categoria: el recorte se lo queda la foto, no la
    opcion, para que la onda del aviso pueda salirse.                     */
.sm-op{position:relative;background:#fff;border:1.5px solid #ECEEF2;border-radius:10px;
  display:flex;flex-direction:column;
  transition:border-color .14s,box-shadow .14s,transform .12s}
.sm-op:hover{border-color:#C7D2FE;transform:translateY(-2px)}
.sm-op.on{border-color:#5B6BFF;box-shadow:0 0 0 3px rgba(91,107,255,.14)}
.sm-op-foto{position:relative;aspect-ratio:16/10;background:#F1F5F9;
  border-radius:8.5px;overflow:hidden}
.sm-op-foto img{width:100%;height:100%;object-fit:cover;display:block}
.sm-op-velo{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:6px 8px;color:#fff;
  background:linear-gradient(0deg,rgba(9,12,20,.86) 8%,rgba(9,12,20,.12) 62%,transparent)}
.sm-op-velo b{font-size:9.5px;font-weight:700;line-height:1.2}
.sm-op-velo s{font-size:9px;font-weight:800;text-decoration:none;display:block;margin-top:1px;
  font-variant-numeric:tabular-nums}
.sm-radio{position:absolute;top:6px;right:6px;width:16px;height:16px;border-radius:999px;
  border:2px solid rgba(255,255,255,.75);background:rgba(15,23,42,.28);color:#fff;
  display:flex;align-items:center;justify-content:center}
.sm-op.on .sm-radio{background:#5B6BFF;border-color:#5B6BFF}

/*  paso 2: cantidad y adiciones (pm-qty-row + pm-mods-grid) */
.sm-qty{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;
  background:#FAFAFB;border:1px solid #ECEEF2;border-radius:10px;margin-bottom:11px}
.sm-qty-l b{font-size:7.5px;color:#94A3B8;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;display:block}
.sm-qty-l s{font-size:15px;font-weight:800;color:#5B6BFF;letter-spacing:-.02em;line-height:1.15;
  text-decoration:none;display:block;margin-top:2px;font-variant-numeric:tabular-nums}
.sm-qty-st{display:inline-flex;align-items:center;border:1px solid #ECEEF2;border-radius:8px;
  overflow:hidden;background:#fff;flex:0 0 auto}
.sm-qty-st button{width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  color:#475569}
.sm-qty-st button:hover{background:#F1F5F9;color:#0F172A}
.sm-qty-st span{width:28px;text-align:center;font-size:11px;font-weight:800;
  font-variant-numeric:tabular-nums}
.sm-grp{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px}
.sm-grp b{font-size:9.5px;font-weight:800}
.sm-grp s{font-size:8px;color:#94A3B8;font-weight:600;text-decoration:none}
.sm-mods{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.sm-mod{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 8px;
  border:1.5px solid #ECEEF2;border-radius:9px;background:#fff;
  transition:border-color .12s,background .12s}
.sm-mod:hover{border-color:#C7D2FE}
.sm-mod.on{border-color:#5B6BFF;background:#F8FAFF}
.sm-mod b{font-size:8.5px;font-weight:600;display:block;line-height:1.25}
.sm-mod s{font-size:8px;font-weight:700;color:#94A3B8;text-decoration:none;display:block;margin-top:1px}
.sm-mod.on s{color:#5B6BFF}
.sm-mod-mas{width:18px;height:18px;border-radius:999px;flex:0 0 auto;background:#F1F5F9;color:#94A3B8;
  display:flex;align-items:center;justify-content:center}
.sm-mod.on .sm-mod-mas{background:#16A34A;color:#fff}

/*  pie del modal (pm-foot) */
.sm-mfoot{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:9px 12px;
  border-top:1px solid #ECEEF2;background:#FAFAFB;flex:0 0 auto}
.sm-mbtn-g{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;background:#fff;
  color:#475569;border:1px solid #ECEEF2;border-radius:8px;font-size:9px;font-weight:600}
.sm-mbtn-g:hover{background:#F1F5F9;color:#0F172A}
.sm-mbtn-p{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;background:#5B6BFF;
  color:#fff;border-radius:8px;font-size:9px;font-weight:700;position:relative;
  box-shadow:0 2px 8px -2px rgba(91,107,255,.45)}
.sm-mbtn-p:hover{background:#4F5BE3}
.sm-mbtn-p[disabled]{background:#CBD5E1;box-shadow:none;cursor:default}

/*  ── el aviso de "salio a cocina" ──
    Arriba a la derecha, NO abajo: abajo le caia justo encima al pie de la
    mesa recien ocupada, que es lo unico que hay que mirar en ese momento.
    Aqui solo tapa la leyenda de colores, que no dice nada nuevo.         */
.sm-listo{position:absolute;top:40px;right:13px;z-index:30;
  display:flex;align-items:center;gap:7px;padding:8px 13px;background:#0F172A;color:#fff;
  border-radius:9px;font-size:9.5px;font-weight:600;white-space:nowrap;
  box-shadow:0 12px 26px -8px rgba(15,23,42,.5);
  animation:smToast .3s cubic-bezier(.2,.8,.2,1)}
.sm-listo i{width:14px;height:14px;border-radius:999px;background:#16A34A;color:#fff;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center}
@keyframes smToast{from{transform:translateY(-10px);opacity:0}to{transform:none;opacity:1}}

/*  ══ PANTALLA ESTRECHA ════════════════════════════════════════════════════
    Va al final a proposito: estas reglas pesan lo mismo que las de arriba,
    asi que solo mandan si van despues.                                     */
@media(max-width:980px){
  .sim{padding:64px 0 72px}
  .sim-grid{grid-template-columns:1fr;gap:32px}
  /*  `width:100%` y `justify-self`, NUNCA `margin:0 auto`: los margenes
      automaticos encogen la celda a su contenido, y su contenido es la
      pantalla, que con `container-type` no se mide por lo que lleva dentro
      — mide cero y la tablet se queda del tamano de la camarita.        */
  .sim-tablet{width:100%;max-width:560px;justify-self:center;
    padding:11px 11px 13px;border-radius:20px}
  /*  Mas cuadrada: a lo ancho de un telefono, 16/10.6 deja una franja donde
      no cabe la reja de mesas.                                          */
  .sim-pant{aspect-ratio:16/12.4}
}
/*  Y en un telefono de verdad, casi cuadrada: es alto lo que falta.     */
@media(max-width:520px){.sim-pant{aspect-ratio:16/15}}

/*  Y la mesa que acaba de cambiar se senala un momento. Va por `outline`,
    que no pelea con la sombra que ya lleva la tarjeta.                   */
.sm-mesa.recien{outline:2px solid rgba(249,115,22,0);outline-offset:2px;
  animation:smRecien 1.5s ease-out 3}
@keyframes smRecien{0%{outline-color:rgba(249,115,22,.6)}100%{outline-color:rgba(249,115,22,0)}}
@media(prefers-reduced-motion:reduce){.sm-mesa.recien{animation:none}}

/* ═══ portada con carrusel (30-ago-2026) ═══════════════════════════════
   Sergio: la portada anterior estaba "muy cargada". Se quitaron el titulo
   gigante de fondo, el recorte de la cajera, los dos sellos, la tarjeta de
   WhatsApp y el texto vertical. Queda foto + titular + fila de tarjetas. */
/*  ── EL CRUCE DE LAS DOS FOTOS ─────────────────────────────────────────
    Antes las dos se cruzaban a media opacidad. Dos capas a medias sobre el
    negro del fondo dejan pasar menos luz que una entera, asi que la portada
    se oscurecia justo durante el cambio y "recuperaba el color" al acabar.

    Ahora la que sale se queda ENTERA por debajo y la que entra se funde
    encima. Su opacidad no baja poco a poco: se apaga de golpe medio segundo
    despues, cuando la nueva ya la tapa del todo y no se ve.               */
.fondo .hf{position:absolute;inset:0;opacity:0;z-index:0;
  transition:opacity 0s linear .5s}
.fondo .hf.on{opacity:1;z-index:1;transition:opacity .5s ease}

/*  ── EL ACERCAMIENTO ───────────────────────────────────────────────────
    La portada ENTERA se encogia (scale .972). Con el fondo de la pagina en
    blanco eso deja ver los bordes por los lados. Ahora el que se mueve es
    solo la foto y SIEMPRE por encima de 1: entra un poco acercada y se va
    asentando. Como vive dentro del hero, que recorta, no hay borde posible. */
@keyframes hfAcerca{from{transform:scale(1.055)}to{transform:scale(1)}}
.fondo .hf.on{animation:hfAcerca 1.6s cubic-bezier(.16,.84,.25,1) both}
@media (prefers-reduced-motion:reduce){.fondo .hf.on{animation:none}}
/*  Antes iba a grayscale(.55) y se comia mas de medio color. Ahora casi
    no desatura: el velo de arriba ya baja bastante la foto.           */
.fondo .hf .ph{width:100%;height:100%;filter:grayscale(.15) contrast(1.06) saturate(1.06)}

.hero-txt{position:relative}
.hero-cuando{display:block;margin-bottom:14px;font-family:'DM Mono',ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--claro)}
.hero-cuando::before{content:'';display:inline-block;width:22px;height:1px;
  background:var(--claro);vertical-align:middle;margin-right:10px;opacity:.7}
/*  ── LA ENTRADA DEL TEXTO ──────────────────────────────────────────────
    Cada vez que cambia la tarjeta, el texto no aparece de golpe: sale primero
    (rapido, .18s) y entra por renglones, uno detras de otro. El orden es el
    orden en que se lee: cuando, primer renglon, segundo renglon, parrafo.

    Los botones NO se animan a proposito: son los mismos en las seis tarjetas
    y verlos brincar cada 4 segundos cansa.                                */
.hero-txt{transition:opacity .18s ease,transform .18s ease}
.hero-txt.mudando{opacity:0;transform:translateY(12px)}

@keyframes heroSube{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-txt .l1,.hero-txt .l2{display:block}
.hero-txt.entra .hero-cuando{animation:heroSube .5s cubic-bezier(.16,.84,.25,1) both}
.hero-txt.entra .l1{animation:heroSube .58s cubic-bezier(.16,.84,.25,1) .07s both}
.hero-txt.entra .l2{animation:heroSube .58s cubic-bezier(.16,.84,.25,1) .15s both}
.hero-txt.entra .hero-sub{animation:heroSube .5s cubic-bezier(.16,.84,.25,1) .24s both}
@media (prefers-reduced-motion:reduce){
  .hero-txt.entra .hero-cuando,.hero-txt.entra .l1,
  .hero-txt.entra .l2,.hero-txt.entra .hero-sub{animation:none}
}

/*  El titular se queda en su mitad: con las tarjetas a la derecha, un titular
    a 142px se les metia por debajo y "SE CONTESTA" quedaba tapado. Los
    titulares nuevos ademas son mas largos que "Tu restaurante trabajando
    solo", asi que ademas de estrecharlo hay que bajarle un punto el tamaño. */
.hero .hero-txt{max-width:min(600px,48%)}
/*  58px no es capricho: es el tamaño mas grande en el que los SEIS
    titulares caben en DOS renglones. A 70px unos quedaban en dos, otros
    en tres y uno en cuatro — y el parrafo de abajo pegaba un brinco en
    cada cambio de tarjeta. Un titular que salta cada 4 segundos se lee
    como una pagina que se esta cargando mal.  */
.hero .h1{font-size:clamp(32px,4vw,58px);max-width:none;min-height:2.1em}
.hero-baja{margin-top:26px}
.hero-baja p{max-width:44ch}

/*  Dentro de las tarjetas NO se enseña la etiqueta del hueco: la tarjeta ya
    lleva su nombre escrito y las dos se pisaban. En los fondos si se deja,
    que es donde sirve para saber cual falta. */
.tj .ph::after{display:none}

/*  La flecha de bajar se corre para que no le caiga encima a la fila. */
.hero .circ{top:auto;bottom:34px;right:-30px}

/* ── la fila de tarjetas ── */
.carr{position:absolute;z-index:8;right:clamp(16px,3vw,46px);bottom:clamp(96px,13vh,150px);
  width:min(620px,52vw);pointer-events:none}
.carr>*{pointer-events:auto}
.carr-marco{overflow:hidden;padding:6px 0}
.carr-via{display:flex;gap:12px;will-change:transform}
.tj{position:relative;flex:0 0 clamp(110px,10vw,144px);aspect-ratio:500/680;
  border-radius:14px;overflow:hidden;padding:0;border:1px solid rgba(255,255,255,.14);
  background:var(--caja);cursor:pointer;text-align:left;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8);
  transition:transform .22s ease,border-color .22s ease}
.tj:hover{transform:translateY(-5px);border-color:var(--claro)}
.tj .ph{position:absolute;inset:0;filter:grayscale(.25) contrast(1.06)}
.tj::after{content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,7,11,.94) 4%,rgba(6,7,11,.25) 46%,transparent 72%)}
.tj-txt{position:absolute;z-index:2;left:11px;right:11px;bottom:11px;display:block}
.tj-cuando{display:block;font-family:'DM Mono',ui-monospace,monospace;font-size:8.5px;
  letter-spacing:.07em;color:var(--t3);margin-bottom:3px}
.tj-nom{display:block;font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  font-size:clamp(10px,1vw,12.5px);line-height:1.08;letter-spacing:-.01em;
  text-transform:uppercase;color:#fff}

/*  La tarjeta que va volando a ser fondo. Va en `position:fixed` porque tiene
    que poder salirse de la fila, que esta recortada. */
/*  ⚠️ EL CLON VUELA DENTRO DEL CONTENEDOR DEL FONDO.

    Sergio, dos veces: primero *"esta cubriendo las tarjetas"*, y despues
    *"lo mismo con los botones y los textos, todo eso debe ir por encima"*.

    Subir o bajar el z-index no era la solucion. Mientras dura el efecto la
    portada se encoge con un `transform`, y un `transform` encierra a sus
    hijos en su propia caja de apilamiento: un clon colgado del body le ganaba
    a todo pasara lo que pasara, y uno con z-index 7 le ganaba al texto, que
    esta en 6.

    La solucion de verdad es que el clon sea PARTE DEL FONDO: se cuelga de
    `.fondo`, que vive en z-index 1. Todo lo demas —el velo, la rejilla, el
    titular, los botones y las tarjetas— esta por encima de esa capa y lo
    seguira estando sin que haya que ajustar ningun numero nunca mas.

    Y arregla de paso algo que no se habia notado: el velo oscurece el fondo,
    asi que un clon POR ENCIMA del velo volaba claro y se oscurecia de golpe
    al aterrizar. Ahora vuela ya oscurecido, igual que va a quedar.

    No puede ir dentro de `.carr`, que esta recortado: ahi no podria crecer. */
/*  ⚠️ ESTO NO SE ESCALA, SE RECORTA — y es a proposito.

    Antes el clon salia del tamano de la tarjeta (vertical) y crecia hasta la
    portada (apaisada) con `scale(8.5, 3.7)`: dos escalas distintas, o sea la
    foto estirada a lo ancho y aplastada a lo alto. Sergio lo vio enseguida
    (1-sep-2026).

    Ahora el clon nace YA del tamano final, con la foto en su proporcion
    correcta, y lo que se anima es la VENTANA por la que se ve
    (`clip-path: inset`). Recortar no deforma. El movimiento es el mismo; la
    imagen ya no se estira, se destapa.

    Por eso `border-radius` es 0: las esquinas redondeadas viajan dentro del
    propio recorte (`round`), que se anima con el.                          */

/* ══ COMPROBANTES: la unica diapositiva que se mueve ═══════════════════════

   Cuatro capas, y el orden importa: las tarjetas van DETRAS del chico, que es
   lo que hace que la escena tenga profundidad en vez de parecer un collage.
   El chico es un recorte con transparencia, asi que las tapa de verdad.

   Nada de esto usa `backdrop-filter`: sobre un amarillo liso el cristal se
   consigue igual con blanco translucido, y asi funciona en todos lados.    */
.cx{position:absolute;inset:0;overflow:hidden;z-index:2;pointer-events:none}

/*  El desfile: la fila lleva las tarjetas DOS VECES seguidas y se desplaza la
    mitad justa. Al terminar vuelve al principio y el salto no se ve, porque
    la segunda mitad es identica a la primera.                              */
.cx-via{position:absolute;top:11%;left:0;display:flex;gap:22px;width:max-content;
  animation:cxDesfile 46s linear infinite}
.cx-t{flex:0 0 auto;width:174px;height:228px;border-radius:18px;padding:14px 13px;
  display:flex;flex-direction:column;
  background:linear-gradient(118deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.17) 42%,rgba(255,255,255,.12) 100%);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 22px 44px -18px rgba(70,40,0,.55);
  animation:cxFlota 7s ease-in-out infinite}
.cx-t:nth-child(2n){animation-delay:-1.4s}
.cx-t:nth-child(3n){animation-delay:-2.8s}
.cx-t:nth-child(5n){animation-delay:-4.2s}
.cx-b{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:#5A3406}
.cx-b i{width:16px;height:16px;border-radius:5px;display:flex;align-items:center;
  justify-content:center;font-size:9px;font-weight:800;color:#fff;font-style:normal}
.cx-s{margin-top:11px;font-size:11.5px;font-weight:700;color:#6B4408}
.cx-p{font-size:26px;font-weight:800;letter-spacing:-.035em;color:#241300;line-height:1;margin-top:3px}
.cx-q{margin-top:9px;font-size:12.5px;font-weight:700;color:#3A2200}
.cx-h{margin-top:2px;font-family:'DM Mono',ui-monospace,monospace;font-size:10.5px;color:#7A5210}
.cx-r{margin-top:auto;font-family:'DM Mono',ui-monospace,monospace;font-size:9.5px;color:#8A5E14;letter-spacing:.04em}
/*  El sello verde no esta desde el principio: aparece, que es justo lo que
    hace Cobra —leer el comprobante y confirmarlo— contado en un gesto.     */
.cx-ok{margin-top:9px;align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
  background:rgba(22,163,74,.18);border:1px solid rgba(22,163,74,.5);color:#14532D;
  border-radius:999px;padding:4px 9px;font-size:10px;font-weight:800;
  animation:cxSello 7s ease-in-out infinite}
.cx-ok svg{width:11px;height:11px}

/*  El chico: recorte con transparencia, apoyado en el suelo de la foto.    */
.cx-chico{position:absolute;bottom:0;right:17%;height:93%;z-index:3;
  filter:drop-shadow(0 18px 30px rgba(80,45,0,.35))}

/*  El reproductor va SOBRE las piernas del chico, como en la foto original:
    centrado en el, no en la pantalla. Puesto en medio quedaba detras de la
    fila de tarjetas del carrusel y no se veia.                            */
.cx-barra{position:absolute;z-index:4;right:2%;bottom:26%;
  width:min(44%,500px);border-radius:26px;padding:20px 26px;
  background:linear-gradient(160deg,rgba(255,255,255,.46),rgba(255,255,255,.30));
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 20px 50px -22px rgba(70,40,0,.55);
  display:flex;flex-direction:column;align-items:center;gap:16px}
.cx-m{display:flex;align-items:center;gap:38px;color:#fff}
.cx-m svg{filter:drop-shadow(0 2px 6px rgba(70,40,0,.45))}
.cx-l{width:100%;height:5px;border-radius:999px;background:rgba(255,255,255,.42);position:relative}
.cx-l i{position:absolute;inset:0 auto 0 0;border-radius:999px;background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.7);animation:cxAguja 46s linear infinite}
.cx-l b{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:999px;background:#fff;box-shadow:0 1px 6px rgba(70,40,0,.5);
  animation:cxPunta 46s linear infinite}

/*  Los pesos y los vistos que van saliendo.  */
.cx-ch{position:absolute;z-index:2;font-weight:800;color:#fff;font-size:22px;
  text-shadow:0 3px 12px rgba(90,50,0,.55);opacity:0;animation:cxSube 5.5s ease-out infinite}

@keyframes cxDesfile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes cxFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes cxSello{0%,58%{opacity:0;transform:scale(.8)}
  66%{opacity:1;transform:scale(1.08)}72%,100%{opacity:1;transform:scale(1)}}
@keyframes cxAguja{from{width:2%}to{width:100%}}
@keyframes cxPunta{from{left:2%}to{left:100%}}
@keyframes cxSube{0%{opacity:0;transform:translateY(14px) scale(.6)}
  18%{opacity:1;transform:translateY(0) scale(1)}
  65%{opacity:.9}
  100%{opacity:0;transform:translateY(-96px) scale(.85)}}

/*  Quien pidio menos movimiento ve la escena quieta, no una foto distinta. */
@media (prefers-reduced-motion:reduce){
  .cx-via,.cx-t,.cx-ok,.cx-l i,.cx-l b,.cx-ch{animation:none}
  .cx-ch{opacity:.9}
}
@media (max-width:820px){
  .cx-t{width:168px;height:224px}
  .cx-p{font-size:26px}
  .cx-barra{width:74%;padding:18px 20px;gap:14px}
  .cx-m{gap:26px}
}

/* ══ RENTABILIDAD: las notificaciones salen y se van ══════════════════════

   Misma idea que Comprobantes: la foto es fija y lo que se mueve va en una
   capa aparte. Aqui no hay desfile sino POPS — cada aviso aparece, se queda
   un momento y se desvanece, como las notificaciones de un telefono.

   Cada pastilla lleva su propio `animation-delay`, asi que nunca coinciden
   todas: el ciclo completo dura 16 s y en pantalla hay siempre dos o tres. */
.rx{position:absolute;inset:0;overflow:hidden;z-index:2;pointer-events:none}
.rx-p{position:absolute;display:flex;align-items:center;gap:10px;
  padding:9px 13px;border-radius:15px;width:290px;opacity:0;
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.19);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.9);
  animation:rxPop 16s ease-in-out infinite}
.rx-ic{width:36px;height:36px;border-radius:10px;flex:0 0 auto;object-fit:cover;display:block}
.rx-t{flex:1;min-width:0}
.rx-1{display:flex;align-items:baseline;gap:7px}
.rx-1 b{font-size:12.5px;font-weight:800;color:#fff;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-1 span{font-size:9.5px;color:rgba(255,255,255,.4);font-weight:600;margin-left:auto;flex:0 0 auto}
.rx-2{font-size:11px;color:rgba(255,255,255,.62);font-weight:600;margin-top:1px}
.rx-v{font-size:16px;font-weight:800;letter-spacing:-.025em;flex:0 0 auto}

/*  Aparece con un pequeno rebote, se queda ~4 s y se va hacia arriba.  */
@keyframes rxPop{
  0%      {opacity:0;transform:translateY(14px) scale(.86)}
  3%      {opacity:1;transform:translateY(0) scale(1.04)}
  5%      {opacity:1;transform:translateY(0) scale(1)}
  27%     {opacity:1;transform:translateY(0) scale(1)}
  32%     {opacity:0;transform:translateY(-16px) scale(.96)}
  100%    {opacity:0;transform:translateY(14px) scale(.86)}
}
@media (prefers-reduced-motion:reduce){
  .rx-p{animation:none;opacity:1;transform:none}
}
@media (max-width:820px){
  .rx-p{width:224px;padding:7px 10px;gap:8px;border-radius:13px}
  .rx-ic{width:30px;height:30px}
  .rx-v{font-size:14px}
}

/* ══ PUNTOS Y PREMIOS — APARCADO ═════════════════════════

   Estos estilos se quedan a proposito. La tarjeta salio del carrusel de
   la portada el 2-sep-2026 (Sergio: «esa informacion la colocamos mas
   abajo, igual tenemos espacio») y van a volver a usarse en su propia
   seccion. Las fotos siguen en img/landing/*-puntos.jpg.

   El contador corre y el nivel se desbloquea despues ═════════

   Las manos con los platos ya vienen en la foto. Aqui solo se anima lo que
   sale del telefono. El ciclo dura 9 s: cuenta, respira, se va y vuelve.   */
.px{position:absolute;inset:0;overflow:hidden;z-index:2;pointer-events:none}
.px-c{position:absolute;left:63%;top:5%;transform:translateX(-50%);text-align:center;
  filter:drop-shadow(0 10px 34px rgba(91,107,255,.75));animation:pxEntra 9s ease-in-out infinite}
.px-n{font-size:clamp(38px,6vw,86px);font-weight:800;letter-spacing:-.05em;line-height:.9;color:#fff;
  text-shadow:0 0 26px rgba(160,175,255,.85);font-variant-numeric:tabular-nums}
.px-l{font-size:clamp(11px,1.1vw,17px);font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:#C7D2FE;margin-top:6px}

/*  El nivel entra cuando el contador ya termino.  */
.px-niv{position:absolute;left:63%;top:20%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(140deg,rgba(255,255,255,.22),rgba(255,255,255,.1));
  border:1px solid rgba(255,255,255,.34);
  font-size:clamp(10px,.95vw,14px);font-weight:800;color:#fff;
  box-shadow:0 16px 36px -12px rgba(0,0,0,.6);opacity:0;
  animation:pxNivel 9s ease-in-out infinite}
.px-niv i{width:8px;height:8px;border-radius:999px;background:#FBBF24;display:block;
  box-shadow:0 0 12px #FBBF24}

/*  Las chispas suben del telefono hacia el numero.  */
.px-ch{position:absolute;color:#fff;font-weight:800;
  text-shadow:0 3px 16px rgba(120,140,255,.9);opacity:0;
  animation:pxSube 9s ease-out infinite}

@keyframes pxEntra{
  0%   {opacity:0;transform:translateX(-50%) translateY(16px) scale(.9)}
  6%   {opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  /* el golpecito justo cuando el contador llega al final */
  26%  {transform:translateX(-50%) scale(1.07)}
  30%  {transform:translateX(-50%) scale(1)}
  84%  {opacity:1}
  92%  {opacity:0;transform:translateX(-50%) translateY(-14px) scale(.96)}
  100% {opacity:0;transform:translateX(-50%) translateY(16px) scale(.9)}
}
@keyframes pxNivel{
  0%,28%  {opacity:0;transform:translateX(-50%) scale(.8)}
  34%     {opacity:1;transform:translateX(-50%) scale(1.06)}
  38%,84% {opacity:1;transform:translateX(-50%) scale(1)}
  92%,100%{opacity:0;transform:translateX(-50%) scale(.94)}
}
@keyframes pxSube{
  0%  {opacity:0;transform:translateY(10px) scale(.6)}
  10% {opacity:.95;transform:translateY(-10px) scale(1)}
  40% {opacity:.7}
  55% {opacity:0;transform:translateY(-110px) scale(.8)}
  100%{opacity:0;transform:translateY(10px) scale(.6)}
}
@media (prefers-reduced-motion:reduce){
  .px-c,.px-niv,.px-ch{animation:none;opacity:1;transform:translateX(-50%)}
  .px-ch{transform:none}
}
.carr-vuelo{position:absolute;z-index:2;border-radius:0;overflow:hidden;
  background-size:cover;background-position:center;pointer-events:none;
  /*  EL MISMO filtro que la foto de fondo. Si aqui es distinto, la imagen va
      de un color durante el vuelo y cambia al aterrizar.                   */
  filter:grayscale(.15) contrast(1.06) saturate(1.06);
  transition:clip-path .52s cubic-bezier(.62,0,.2,1),opacity .12s ease .4s}

/* ── el pie: flechas, la linea del reloj y el contador ── */
.carr-pie{display:flex;align-items:center;gap:10px;margin-top:16px}
.carr-fl{width:30px;height:30px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--linea);background:rgba(255,255,255,.06);color:var(--t2);
  display:grid;place-items:center;cursor:pointer;transition:all .16s}
.carr-fl svg{width:14px;height:14px}
.carr-fl:hover{background:var(--acid);border-color:var(--acid);color:#fff}
.carr-linea{flex:1;height:2px;background:var(--linea);border-radius:2px;overflow:hidden}
.carr-linea i{display:block;height:100%;width:0;background:var(--acid);border-radius:2px}
.carr-linea i.corriendo{width:100%;transition:width 4s linear}
.carr-num{font-family:'DM Mono',ui-monospace,monospace;font-size:11px;color:var(--t3);flex-shrink:0}
.carr-num b{color:#fff;font-weight:500;font-size:15px}

@media (max-width:900px){
  /*  En telefono la fila se va abajo del todo y se deja arrastrar con el
      dedo: cuatro tarjetas de 118px no caben al lado del titular. */
  .carr{position:relative;right:auto;bottom:auto;width:100%;
    margin:30px 0 0;padding:0 24px}
  .carr-marco{overflow:auto;scrollbar-width:none}
  .carr-marco::-webkit-scrollbar{display:none}
  .tj{flex:0 0 132px}
  /*  En el celular no hay tarjetas al lado: el titular usa todo el ancho.
      Con el 48 % de escritorio quedaba en una columna de 164 px, seis
      renglones de dos palabras.                                          */
  .hero .hero-txt{max-width:none}
  /*  `.hero-in` pisa el `padding:0 24px` de `.env` con el suyo (64px 0 72px):
      en el celular el texto quedaba pegado al borde y «Listo en una tarde»
      salia cortado. Se le devuelven los 24 px de los lados.              */
  .hero-in{padding-left:24px;padding-right:24px}
}
@media (max-width:760px){
  /*  Con la barra fija de abajo (.mb, 70 px) los botones de la portada
      quedaban debajo de ella. La portada ocupa lo que se ve entre la barra
      de arriba (64) y la de abajo (70), y los botones terminan encima.    */
  .hero-in{min-height:calc(100svh - 134px);padding-bottom:26px}
  /*  LA FOTO VERTICAL (13-sep-2026, Sergio). Las de fondo son de 1500x900 y
      en un celular solo se veia la franja del centro. Aqui va la misma foto
      de la tarjeta (500x680), que ya esta hecha para lo vertical. Con
      !important porque la horizontal viene escrita en el `style` del HTML;
      como esa ya no se aplica, el celular ni la descarga.

      Las fotos verticales de Comprobantes y Rentabilidad YA traen dibujados
      los comprobantes, el reproductor y los avisos: las capas animadas
      (.cx y .rx) se esconden para que no salgan repetidos.               */
  .hf[data-i="0"] .ph{background-image:url(../img/landing/tarjeta-chat.jpg)!important}
  .hf[data-i="1"] .ph{background-image:url(../img/landing/tarjeta-pedidos.jpg)!important}
  .hf[data-i="2"] .ph{background-image:url(../img/landing/tarjeta-cocina.jpg)!important}
  .hf[data-i="3"] .ph{background-image:url(../img/landing/tarjeta-comprobantes.jpg)!important}
  .hf[data-i="4"] .ph{background-image:url(../img/landing/tarjeta-rentabilidad.jpg)!important}
  .hf .cx,.hf .rx{display:none}
  /*  EL VELO DEL CELULAR (13-sep-2026, Sergio: "el texto se pierde sobre el
      fondo"). El de escritorio oscurece el lado IZQUIERDO, que es donde va
      el titular alli; en el celular el texto va a lo ancho en la mitad de
      abajo y le caia encima la cara de la foto. Aqui la foto se ve limpia
      arriba y se va a negro justo donde empieza el texto. Las alturas van
      contra la pantalla (svh) porque el texto se apoya en su borde de abajo
      (encima de la barra fija) y no en el de la portada.                  */
  .hero .velo{background:linear-gradient(180deg,
    rgba(6,7,11,.32) 0,rgba(6,7,11,.06) 110px,rgba(6,7,11,.10) calc(100svh - 700px),
    rgba(6,7,11,.72) calc(100svh - 570px),rgba(6,7,11,.92) calc(100svh - 470px),
    rgba(6,7,11,.96) 100%)}
}
/* ══ DE LA PORTADA HACIA ABAJO, EN BLANCO ════════════════════════════════

   La portada se queda oscura a proposito: su titular es blanco sobre foto y
   sus imagenes son de noche. Aclararla no es cambiar un color, es rehacerla.

   Aqui solo se vuelven a declarar las variables sobre los bloques de abajo.
   Como las variables bajan por el arbol, todo lo que vive dentro cambia solo
   y no hay que tocar los 89 sitios que las usan.                          */
body{background:#FFFFFF}
/*  OJO con quien NO entra aqui:
      · `.pie` no es el pie de pagina, es el rotulo que va ENCIMA de
        cada captura, con su degradado oscuro. Sale 6 veces.
      · `.mb` es la barra fija del movil, con su propio fondo oscuro.
    Los dos llevan texto claro sobre oscuro y se quedan como estaban. */
.sec, .precios-p2, .cierre{
  --neg:#FFFFFF; --neg2:#F8FAFC; --caja:#FFFFFF; --vidrio:rgba(255,255,255,.72);
  --linea:rgba(15,23,42,.10); --linea2:rgba(15,23,42,.06);
  --tinta:#0F172A; --t2:#475569; --t3:#64748B; --t4:#94A3B8;
  --ind:#5B6BFF; --claro:#5B6BFF; --verde:#16A34A;
  background:#FFFFFF;
  /*  El color se vuelve a APLICAR aqui, no solo la variable: `body` ya
      resolvio su `color:var(--tinta)` al tono claro y los hijos heredan ese
      valor ya calculado, no la variable. Sin esta linea el texto sigue
      saliendo casi blanco sobre blanco.                                  */
  color:var(--tinta);
}
/*  Los blancos translucidos de ABAJO: sobre blanco no existirian.  */
.precios-p2 .per{background:rgba(15,23,42,.05)}

/*  ══ LAS TARJETAS NO CAMBIAN ═════════════════════════════════════════════
    Su contraste lo da su propia foto o su propio fondo, no el de la pagina.
    Como las variables bajan por el arbol, la escala clara de `.sec` se
    colaba dentro de ellas y les oscurecia el texto encima de la foto.
    Aqui se les devuelve la escala de siempre, entera.                     */
.sec .arg,
.sec .p1, .sec .p2, .sec .p3, .pie, .mb{
  --neg:#070A18; --neg2:#0B1026; --caja:#141A38; --vidrio:rgba(26,32,64,.62);
  --linea:rgba(255,255,255,.09); --linea2:rgba(255,255,255,.05);
  --tinta:#F4F6FB; --t2:#B7BEDA; --t3:#8189AD; --t4:#5C6489;
  --ind:#A9B2FF; --claro:#A9B2FF; --verde:#4ADE80;
  color:var(--tinta);
}