/* Mesero solution pages (2026-10-22): one page per kind of venue, in the product pages' language (home.css and
   product.css load first). This file adds what a solution page shows on top of them:
     - the day in that venue: the walk-through's steps carry an hour, and above the tablet a clock and the day's track
       follow them while the light behind moves from the morning to the close (solution.js keeps them in step);
     - a phone's screen inside the walk's tablet, for the moments that happen on the guest's or the waiter's phone;
     - the hero's own film, muted behind the stage, when the page has one.
   Without solution.js the clock shows the first moment and the steps still read top to bottom. */

/* ── The day ──────────────────────────────────────────────────────────── */
@property --day-t{syntax:"<number>";inherits:true;initial-value:0}
@property --day-glow{syntax:"<color>";inherits:true;initial-value:rgba(255,183,107,.3)}
.p-walk--day{position:relative;isolation:isolate;overflow:clip;--day-glow:rgba(255,183,107,.3);transition:--day-t 1.3s var(--ease),--day-glow 1.3s var(--ease)}
.p-walk--day::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(38% 46% at calc(58% + var(--day-t) * 34%) 26%,var(--day-glow),transparent 74%)}
.p-walk--day[data-period="manana"]{--day-glow:rgba(255,183,107,.32)}
.p-walk--day[data-period="mediodia"]{--day-glow:rgba(255,214,102,.34)}
.p-walk--day[data-period="tarde"]{--day-glow:rgba(255,128,96,.3)}
.p-walk--day[data-period="noche"]{--day-glow:rgba(124,108,255,.28)}
.p-walk--day[data-period="cierre"]{--day-glow:rgba(64,92,196,.32)}

.day-clock{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:18px;margin:0 0 18px}
.day-clock b{grid-row:span 2;font:700 clamp(2.6rem,1.5rem + 2.3vw,3.7rem)/.86 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--text)}
.day-clock span{color:var(--coral-ink);font:800 .76rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase}
.day-track{position:relative;height:6px;margin:12px 0 6px;border-radius:6px;background:linear-gradient(90deg,#ffc98a 0%,#ffe29a 30%,#ffa27e 58%,#8c83ff 80%,#2c3a78 100%)}
.day-sun{position:absolute;top:50%;left:calc(var(--day-t) * 100%);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px var(--day-glow),0 0 24px 8px var(--day-glow),0 2px 6px rgba(21,22,28,.25)}

/* On a phone the tablet is not shown: each step's label carries its hour. */
.walk-step .num time{font-variant-numeric:tabular-nums}

/* A phone's screen inside a tablet (a flex box: a grid's auto row would leave the image's height unresolved). */
.device-screen .layer--phone{display:flex;align-items:center;justify-content:center;background:radial-gradient(70% 90% at 50% 38%,#2b2e3b 0%,#12131a 72%)}
.device-screen .layer--phone img{width:auto;height:92%;border-radius:clamp(14px,1.6vw,24px);box-shadow:0 0 0 clamp(4px,.5vw,7px) #0c0d12,0 0 0 clamp(5px,.6vw,8px) rgba(255,255,255,.09),0 30px 50px -20px rgba(0,0,0,.85)}

/* Which plan fits which venue: the plan cards carry a kind of venue instead of a figure. */
.p-plans--profiles strong{font-size:clamp(1.3rem,1rem + .9vw,1.65rem);line-height:1.15;letter-spacing:-.02em}

/* A phone's screenshot in a step, on a phone: not the full width of the column. */
.walk-shot--phone img{max-width:min(240px,62%);margin-inline:auto;border-radius:18px}

/* ── The hero's film (muted, behind the stage) ────────────────────────── */
.p-hero--film{position:relative;isolation:isolate;overflow:clip}
.p-hero-film{position:absolute;inset:0;z-index:-1;pointer-events:none}
.p-hero-film video,.p-hero-film img{width:100%;height:100%;object-fit:cover;opacity:.4}
.p-hero-film::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(10,11,17,.86) 38%,rgba(10,11,17,.42) 100%),linear-gradient(0deg,var(--ink) 0%,transparent 34%)}

/* ── The product overview (/producto) ─────────────────────────────────── */
/* The hero's tablet takes turns showing real screens of different products; the pills under it pick one (product.js
   initSlides: picks and layers in the same order). */
.p-showcase .device-screen .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease)}
.p-showcase .device-screen .layer.is-on{opacity:1}
.p-showcase-picks{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.p-showcase-picks button{padding:8px 13px;border:1px solid var(--line-ink);border-radius:999px;background:rgba(246,241,232,.04);color:var(--on-ink-2);font:700 .84rem/1 var(--body);cursor:pointer;transition:background-color .3s,border-color .3s,color .3s}
.p-showcase-picks button:hover{color:var(--on-ink);border-color:rgba(246,241,232,.3)}
.p-showcase-picks button.is-on{background:rgba(255,97,82,.16);border-color:rgba(255,97,82,.5);color:var(--on-ink)}
.p-showcase-picks button:focus-visible{outline:2px solid var(--coral-soft);outline-offset:2px}

/* The catalogue: each family's title stays in view while its products scroll by. */
.prod-cats{display:grid;gap:clamp(56px,7vw,104px);margin-top:clamp(36px,4vw,60px)}
.prod-cat{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,2fr);gap:clamp(24px,4vw,64px);align-items:start}
.prod-cat-head{position:sticky;top:calc(var(--site-header-h,72px) + 36px)}
.prod-cat-head .count{display:block;font:700 clamp(2.8rem,2rem + 1.8vw,3.8rem)/1 var(--display);letter-spacing:-.05em;color:var(--coral-ink)}
.prod-cat-head h3{margin-top:12px;font-size:clamp(1.4rem,1.1rem + .8vw,1.85rem);line-height:1.15}
.prod-cat-head p{margin-top:10px;color:var(--text-2);line-height:1.62}
.prod-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.prod-card{position:relative;display:grid;grid-template-rows:auto 1fr;overflow:hidden;border-radius:22px;background:#fff;border:1px solid var(--line);color:inherit;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.prod-card:hover,.prod-card:focus-visible{transform:translateY(-4px);box-shadow:0 28px 50px -30px rgba(21,22,28,.4);border-color:rgba(235,64,55,.32)}
.prod-card:focus-visible{outline:2px solid var(--coral-btn);outline-offset:3px}
.prod-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(80% 120% at 50% 0%,#2b2e3b 0%,#101118 70%)}
.prod-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .8s var(--ease)}
.prod-card:hover .prod-thumb img{transform:scale(1.045)}
.prod-thumb--phone{display:flex;justify-content:center;padding-top:16px}
.prod-thumb--phone img{width:44%;height:auto;align-self:flex-start;border-radius:16px 16px 0 0;box-shadow:0 0 0 5px #0c0d12,0 0 0 6px rgba(255,255,255,.09);transform-origin:top center}
.prod-thumb--icon{display:grid;place-items:center}
.prod-thumb--icon svg{width:64px;height:64px;color:var(--coral-soft);filter:drop-shadow(0 10px 24px rgba(255,97,82,.35))}
.prod-body{display:grid;align-content:start;gap:7px;padding:18px 20px 22px}
.prod-plan{justify-self:start;padding:5px 9px;border-radius:999px;background:rgba(235,64,55,.08);color:var(--coral-ink);font:800 .66rem/1 var(--body);letter-spacing:.09em;text-transform:uppercase}
.prod-body strong{margin-top:4px;font:700 1.22rem/1.2 var(--display);letter-spacing:-.02em;color:var(--text)}
.prod-line{color:var(--text-2);font-size:.92rem;line-height:1.5}
.prod-card::after{content:"→";position:absolute;right:20px;bottom:18px;color:var(--coral-ink);font-weight:800;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s var(--ease)}
.prod-card:hover::after,.prod-card:focus-visible::after{opacity:1;transform:none}

/* One order, followed through the products it touches (product.js initSteps lights them in turn). */
.order-trail{list-style:none;margin:clamp(36px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;counter-reset:trail}
.order-trail li{position:relative;padding:22px 18px 20px;border-radius:20px;background:rgba(246,241,232,.04);border:1px solid var(--line-ink);opacity:.38;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .5s,background-color .5s}
.order-trail li.is-on{opacity:1;transform:none;border-color:rgba(255,97,82,.4);background:rgba(255,97,82,.07)}
.order-trail li::before{counter-increment:trail;content:counter(trail);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(246,241,232,.08);color:var(--on-ink);font:800 .8rem/1 var(--body)}
.order-trail li.is-on::before{background:var(--coral-btn)}
.order-trail li + li::after{content:"";position:absolute;left:-15px;top:35px;width:16px;height:2px;background:var(--coral-btn);opacity:0;transition:opacity .5s}
.order-trail li.is-on + li.is-on::after,.order-trail li.is-on + li::after{opacity:.8}
.order-trail b{display:block;margin-top:14px;color:var(--coral-soft);font:800 .7rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase}
.order-trail span{display:block;margin-top:8px;color:var(--on-ink);font-size:.95rem;line-height:1.45;font-weight:600}
.order-trail small{display:block;margin-top:8px;color:var(--on-ink-3);font-size:.78rem}

/* ── The solutions hub (/soluciones) ─────────────────────────────────── */
.sol-hub{margin:0}
.sol-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(32px,4vw,52px)}
.sol-card{scroll-margin-top:calc(var(--site-header-h,72px) + 24px)}
.sol-card .prod-thumb{aspect-ratio:16/10}
.sol-card .prod-body strong{font-size:1.38rem}
.sol-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.sol-chips li{padding:4px 9px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);color:var(--text-2);font-size:.76rem;font-weight:700}
.sol-go{margin-top:10px;color:var(--coral-ink);font-weight:800;font-size:.9rem}
.sol-card::after{display:none}
.sol-card:target{border-color:rgba(235,64,55,.55);box-shadow:0 0 0 4px rgba(235,64,55,.12)}

/* position:relative makes the box the containing block of the cells' screen-reader labels (position:absolute), so they
   scroll with the table instead of widening the page on a phone. */
.sol-matrix{position:relative;margin-top:clamp(28px,3.5vw,44px);overflow-x:auto;border-radius:22px;background:#fff;border:1px solid var(--line)}
.sol-matrix:focus-visible{outline:2px solid var(--coral-btn);outline-offset:3px}
.sol-matrix table{width:100%;min-width:760px;border-collapse:collapse;font-size:.92rem}
.sol-matrix th,.sol-matrix td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:center}
.sol-matrix thead th{position:sticky;top:0;background:#fff;color:var(--text-2);font:800 .74rem/1.25 var(--body);letter-spacing:.06em;text-transform:uppercase;vertical-align:bottom}
.sol-matrix tbody th{position:sticky;left:0;z-index:1;background:#fff;text-align:left;white-space:nowrap}
.sol-matrix tbody th a{color:var(--text);font-weight:700;text-decoration:none}
.sol-matrix tbody th a:hover{color:var(--coral-ink)}
.sol-matrix td{color:rgba(21,22,28,.22);font-size:1.1rem}
.sol-matrix td.on{color:var(--coral-btn)}
.sol-matrix tbody tr:last-child th,.sol-matrix tbody tr:last-child td{border-bottom:0}
.sol-matrix tbody tr:hover th,.sol-matrix tbody tr:hover td{background:#fff8f5}

/* ── Contact (/contacto) ───────────────────────────────────────────────── */
.c-stage{display:grid;place-items:center;min-height:460px}
.c-panel{position:relative;z-index:1;width:min(470px,100%);padding:26px 24px 22px;border-radius:26px;background:rgba(16,17,25,.74);border:1px solid rgba(246,241,232,.12);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
.c-panel-title{color:var(--on-ink);font:700 1.35rem/1.2 var(--display);letter-spacing:-.02em}
.c-panel-sub{margin-top:6px;color:var(--on-ink-3);font-size:.9rem;line-height:1.5}
.c-channels{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.c-channel{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;border:1px solid var(--line-ink);background:rgba(246,241,232,.03);color:var(--on-ink);text-decoration:none;transition:border-color .25s,background-color .25s,transform .25s var(--ease)}
.c-channel:hover,.c-channel:focus-visible{border-color:rgba(255,97,82,.5);background:rgba(255,97,82,.08);transform:translateX(3px)}
.c-channel:focus-visible{outline:2px solid var(--coral-soft);outline-offset:2px}
.c-ico{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:rgba(255,97,82,.14);color:var(--coral-soft)}
.c-ico svg{width:22px;height:22px}
.c-txt{display:grid;gap:3px;min-width:0}
.c-txt b{color:var(--coral-soft);font:800 .68rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.c-txt strong{font-size:1rem;font-weight:800;overflow-wrap:anywhere}
.c-txt small{color:var(--on-ink-3);font-size:.82rem}
.c-go{color:var(--coral-soft);font-weight:800}
.c-hero .hero-actions .btn svg{width:18px;height:18px;margin-right:8px;flex:none}

.c-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,56px);align-items:start}
.c-card{padding:clamp(24px,3vw,40px);border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(21,22,28,.35)}
.c-card h2{margin-top:10px}
.c-intro{margin-top:10px;color:var(--text-2);line-height:1.62}
.c-form{margin-top:24px}
.c-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.c-row{display:grid;gap:7px}
.c-full{grid-column:1 / -1}
.c-row label{color:var(--text);font-size:.9rem;font-weight:700}
.c-row input,.c-row select,.c-row textarea{width:100%;padding:13px 14px;border:1px solid rgba(21,22,28,.16);border-radius:14px;background:var(--paper);color:var(--text);font:500 1rem/1.4 var(--body);transition:border-color .2s,box-shadow .2s,background-color .2s}
.c-row textarea{min-height:130px;resize:vertical}
.c-row input:focus,.c-row select:focus,.c-row textarea:focus{outline:none;border-color:var(--coral-btn);background:#fff;box-shadow:0 0 0 4px rgba(235,64,55,.14)}
.c-hp{position:absolute;left:-9999px;opacity:0}
.c-submit{margin-top:20px}
.c-error{margin-top:12px;color:#c2321f;font-weight:700}
.c-note{margin-top:14px;color:var(--text-2);font-size:.9rem;line-height:1.55}
.c-note a{color:var(--coral-ink);font-weight:700}
.success-panel{display:none}
.success-panel.is-visible{display:block}
.c-success h3{font:700 1.6rem/1.2 var(--display)}
.c-success p{margin-top:10px;color:var(--text-2);line-height:1.6}
.c-side{display:grid;gap:16px}
.c-side-card{padding:22px 22px 20px;border-radius:22px;background:var(--paper-2);border:1px solid var(--line)}
.c-side-card h3{font-size:1.12rem}
.c-side-card .ticks{margin-top:12px}
.c-proof{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.c-proof li{display:grid;gap:4px;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.c-proof strong{color:var(--coral-ink);font:700 1.3rem/1 var(--display);letter-spacing:-.03em}
.c-proof span{font-size:.86rem;font-weight:800}
.c-proof small{color:var(--text-2);font-size:.78rem;line-height:1.4}
.c-app-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,56px);align-items:center}
.c-app-text{max-width:36rem;margin-top:14px;color:var(--on-ink-2);line-height:1.65}
.c-app-text a{color:var(--coral-soft);font-weight:700}
.c-app .store-badges{margin-top:24px}
.c-app-phone{margin:0;display:grid;place-items:center}
.c-app-phone .device--phone{width:min(260px,70%)}

/* ── Pricing (/precios) ───────────────────────────────────────────────── */
/* The plan picker in the hero (solution.js): choices on the left, the answer read from the plan's own card. */
.pp-stage{display:grid;place-items:center;min-height:500px}
.pp-picker{position:relative;z-index:1;width:min(500px,100%);margin:0;padding:24px 24px 22px;border-radius:26px;background:rgba(16,17,25,.76);border:1px solid rgba(246,241,232,.12);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);color:var(--on-ink)}
.pp-picker-title{font:700 1.35rem/1.2 var(--display);letter-spacing:-.02em}
.pp-picker-sub{margin-top:6px;color:var(--on-ink-3);font-size:.9rem}
.pp-q{margin:16px 0 0;padding:0;border:0}
.pp-q legend{margin-bottom:9px;color:var(--on-ink-2);font-size:.86rem;font-weight:800}
.pp-opts{display:flex;flex-wrap:wrap;gap:7px}
.pp-opts label{position:relative;cursor:pointer}
.pp-opts input{position:absolute;opacity:0;pointer-events:none}
.pp-opts span{display:inline-flex;align-items:center;min-height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--line-ink);background:rgba(246,241,232,.03);color:var(--on-ink-2);font-size:.86rem;font-weight:700;transition:background-color .2s,border-color .2s,color .2s}
.pp-opts label:hover span{border-color:rgba(246,241,232,.3);color:var(--on-ink)}
.pp-opts input:checked + span{background:rgba(255,97,82,.18);border-color:rgba(255,97,82,.6);color:var(--on-ink)}
.pp-opts input:focus-visible + span{outline:2px solid var(--coral-soft);outline-offset:2px}
.pp-result{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:4px 16px;margin-top:18px;padding:16px 16px 14px;border-radius:18px;background:linear-gradient(135deg,rgba(255,97,82,.16),rgba(255,97,82,.05));border:1px solid rgba(255,97,82,.32)}
.pp-result-kicker{grid-column:1 / -1;color:var(--coral-soft);font:800 .68rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.pp-result strong{font:700 1.7rem/1.1 var(--display);letter-spacing:-.03em}
.pp-result-price{justify-self:end;color:var(--on-ink);font-weight:800}
.pp-result-price b{font:700 1.7rem/1 var(--display);letter-spacing:-.04em}
.pp-result-tax{display:block;margin-top:3px;color:var(--on-ink-3);font-size:.74rem;font-weight:700;text-align:right}
.pp-result small{grid-column:1 / -1;color:var(--on-ink-2);font-size:.86rem;line-height:1.5}
.pp-result .btn{grid-column:1 / -1;justify-self:start;margin-top:8px}

/* The plan cards, switches and table moved from the old page (their markup is what the tests and the switches read). */
.pp .billing-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 36px;margin:0 0 22px}
.pp .billing-controls-divider{display:none}
.pp .billing-toggle{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.pp .billing-toggle span{color:var(--text-3);font-size:.94rem;font-weight:800}
.pp .billing-toggle .is-active{color:var(--text)}
.pp .billing-switch{width:66px;height:36px;padding:0;border:0;border-radius:999px;background:rgba(21,22,28,.12);cursor:pointer;transition:background-color .25s}
.pp .billing-switch.is-annual,.pp .billing-switch.is-iva{background:var(--coral-btn)}
.pp .billing-switch:focus-visible{outline:2px solid var(--coral-btn);outline-offset:3px}
.pp .billing-knob{display:block;width:28px;height:28px;margin:4px;border-radius:50%;background:#fff;box-shadow:0 6px 14px rgba(21,22,28,.25);transition:transform .3s var(--ease)}
.pp .billing-switch.is-annual .billing-knob,.pp .billing-switch.is-iva .billing-knob{transform:translateX(30px)}
.pp .billing-save{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:rgba(42,170,110,.12);color:#1f7a50;font-size:.8rem}
.pp .pricing-guarantees{margin:0;text-align:center;color:#1f7a50;font-weight:800}
.pp .support-chips{list-style:none;margin:14px 0 24px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pp .support-chips li{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 13px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--text-2);font-size:.82rem;font-weight:700}
.pp .support-chips .dot{width:8px;height:8px;border-radius:50%;flex:none}
.pp .support-chips .dot-on{background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.16)}
.pp .support-chips .dot-urgent{background:#ff8a3d;box-shadow:0 0 0 4px rgba(255,138,61,.18)}
.pp .pricing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.pp .plan-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:24px 20px 22px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 22px 44px -36px rgba(21,22,28,.35);transition:box-shadow .3s,border-color .3s}
.pp .plan-card.featured{border-color:rgba(235,64,55,.35);background:linear-gradient(180deg,#fff6f2,#fff 46%)}
.pp .plan-card.is-pick{border-color:var(--coral-btn);box-shadow:0 0 0 4px rgba(235,64,55,.16),0 26px 50px -30px rgba(235,64,55,.5)}
.pp .plan-card .btn{width:100%;justify-content:center}
.pp .btn-secondary{background:#fff;color:var(--text);border:1px solid rgba(21,22,28,.18)}
.pp .btn-secondary:hover{border-color:var(--coral-btn);color:var(--coral-ink)}
.pp .plan-badge{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:var(--coral-btn);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.04em}
.pp .plan-label{color:var(--text);font:800 .9rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
.pp .plan-desc{margin:0;color:var(--text-2);font-size:.9rem;line-height:1.55}
.pp .price-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px}
.pp .price-row .price-from-label{flex-basis:100%;color:var(--text-3);font-size:.95rem;font-weight:800}
.pp .price-number{font:700 3.4rem/.9 var(--display);letter-spacing:-.06em;color:var(--text)}
.pp .currency{padding-bottom:6px;font:700 1.4rem/1 var(--display)}
.pp .price-period{padding-bottom:7px;color:var(--text-3);font-weight:800}
.pp .price-note{margin:0;min-height:24px;color:var(--text-2);font-size:.86rem;line-height:1.5}
.pp .price-savings{margin:0;color:#1f7a50;font-size:.84rem;font-weight:800}
.pp .price-savings:empty{display:none}
.pp .may-offer-line{margin:0;padding:9px 11px;border-radius:12px;background:rgba(255,152,96,.08);border:1px solid rgba(255,152,96,.24);color:#b45309;font-size:.86rem;line-height:1.4}
.pp .may-offer-line strong{color:#9a3412}
.pp .cta-subtitle{display:block;margin-top:-6px;text-align:center;color:var(--text-3);font-size:.76rem}
.pp .plan-divider{height:1px;background:var(--line)}
.pp .plan-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pp .plan-list li{font-size:.9rem;line-height:1.5}
.pp .feature-accordion summary{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;cursor:pointer;list-style:none}
.pp .feature-accordion summary::-webkit-details-marker{display:none}
.pp .feature-accordion summary::before{content:"+";width:20px;height:20px;margin-top:1px;display:grid;place-items:center;border-radius:50%;background:rgba(235,64,55,.1);color:var(--coral-ink);font-weight:800;font-size:.9rem;line-height:1}
.pp .feature-accordion[open] summary::before{content:"−";background:var(--coral-btn);color:#fff}
.pp .feature-accordion summary span{color:var(--text);font-weight:700}
.pp .feature-desc{margin:6px 0 2px 30px;color:var(--text-2);font-size:.86rem;line-height:1.55}
.pp .plan-list li.off{padding-left:30px;color:var(--text-3);position:relative}
.pp .plan-list li.off::before{content:"";position:absolute;left:6px;top:.62em;width:8px;height:2px;border-radius:2px;background:rgba(21,22,28,.3)}
.pp .plan-list li.off[title]{cursor:help}
.pp .pricing-note{margin:18px 0 0;color:var(--text-2);font-size:.92rem;line-height:1.65}
.pp .compare-banner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;margin-top:26px;padding:20px 22px;border-radius:20px;background:var(--paper-2);border:1px solid var(--line)}
.pp .compare-banner > div{flex:1;min-width:260px}
.pp .compare-banner strong{display:block;margin-bottom:4px}
.pp .compare-banner p{margin:0;color:var(--text-2);font-size:.92rem}
.pp .may-promo-banner{display:flex;align-items:center;gap:20px;margin:0 0 24px;padding:20px 24px;border-radius:22px;border:1px solid rgba(255,152,96,.32);background:linear-gradient(135deg,rgba(255,152,96,.16),rgba(255,98,79,.08)),#fff}
.pp .may-promo-pill{flex:none;padding:8px 12px;border-radius:999px;background:rgba(255,152,96,.18);color:#b45309;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.pp .may-promo-copy{flex:1;min-width:0}
.pp .may-promo-copy strong{display:block;font-size:1.25rem}
.pp .may-promo-copy span{display:block;color:var(--text-2)}
.pp .compare-scroll-hint{display:none;margin:0 0 10px;color:var(--text-3);font-size:.84rem;font-weight:700}
.pp .compare-wrap{overflow-x:auto;border-radius:22px;background:#fff;border:1px solid var(--line)}
.pp .compare-table{width:100%;min-width:860px;border-collapse:collapse;font-size:.9rem}
.pp .compare-table th{position:sticky;top:0;padding:14px;background:#fff;color:var(--text);font:800 .76rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;text-align:left;border-bottom:1px solid var(--line)}
.pp .compare-table td{padding:13px 14px;color:var(--text-2);line-height:1.55;border-bottom:1px solid var(--line);vertical-align:top}
.pp .compare-table td:first-child strong{display:block;color:var(--text)}
.pp .compare-table td:first-child small{display:block;margin-top:3px;color:var(--text-3);font-size:.8rem}
.pp .compare-table .compare-group td{padding-top:20px;color:var(--coral-ink);font:800 .74rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;background:var(--paper)}
.pp .compare-highlight{background:rgba(235,64,55,.05)}
.pp .check{color:#1f7a50!important;font-weight:800}
.pp .dash{color:var(--text-3)!important}
.pp-same{grid-template-columns:repeat(4,minmax(0,1fr))}
.pp-beyond-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(28px,3.5vw,44px)}
.pp-beyond .prod-body{padding:22px 22px 24px}
.pp-beyond .prod-body strong{font-size:1.15rem}
.pp-beyond::after{display:none}
.pp-faq .faq-item summary{cursor:pointer}
.pp-faq .faq-answer{margin-top:10px;color:var(--text-2);line-height:1.65}
.pp-faq .faq-answer a,.pp-faq .faq-list > p a{color:var(--coral-ink);font-weight:700}

@media (max-width:1100px){
  .pp .pricing-grid,.pp-same,.pp-beyond-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sol-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .order-trail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .order-trail li:nth-child(4)::after{display:none}
}
@media (max-width:960px){
  .prod-cat,.c-grid,.c-app-grid{grid-template-columns:minmax(0,1fr)}
  .prod-cat-head{position:static}
  .c-stage{min-height:0}
}
@media (max-width:960px){
  .pp-stage{min-height:0}
  .pp .compare-scroll-hint{display:block}
}
@media (max-width:620px){
  .pp .pricing-grid,.pp-same,.pp-beyond-grid{grid-template-columns:minmax(0,1fr)}
  .pp .may-promo-banner{flex-direction:column;align-items:stretch}
  .prod-grid,.order-trail,.sol-cards,.c-fields,.c-proof{grid-template-columns:minmax(0,1fr)}
  .order-trail li::after{display:none}
}
@media (prefers-reduced-motion: reduce){
  .p-walk--day{transition:none}
  .order-trail li{transform:none}
}

/* ── An AI scene: a full-width band under the hero (solution pages), or the payment pages' stage. The poster is the
   loop's first frame; the muted loop fades in over it once it plays (solution.js). Its label says what it is. ── */
.p-scene{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(280px,46vw,620px);background:#0b0c11;color:#f6f1e8}
.p-scene-media{position:absolute;inset:0;z-index:-2}
.p-scene-media img,.p-scene-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-scene-media video{opacity:0;transition:opacity .9s ease}
.p-scene.is-playing .p-scene-media video{opacity:1}
.p-scene::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,12,17,.7) 0%,rgba(11,12,17,0) 22%,rgba(11,12,17,0) 52%,rgba(11,12,17,.86) 100%)}
.p-scene-copy{position:absolute;left:0;right:0;bottom:clamp(20px,4.5vw,52px);width:var(--wrap);margin-inline:auto}
.p-scene-line{max-width:36rem;margin:0;font:700 clamp(1.2rem,.85rem + 1.3vw,1.85rem)/1.22 var(--display);letter-spacing:-.025em;text-shadow:0 2px 22px rgba(0,0,0,.5)}
.p-scene-line .kicker{display:block;margin-bottom:10px;color:#ffb3a6;text-shadow:none}
.p-scene-ai{position:absolute;top:12px;right:16px;padding:4px 10px;border-radius:999px;background:rgba(11,12,17,.55);
  color:rgba(246,241,232,.82);font-size:.72rem;font-weight:700;letter-spacing:.01em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media (max-width:679.98px){
  .p-scene{min-height:max(300px,72vw)}
  .p-scene-ai{top:10px;right:10px;font-size:.66rem}
}
@media (prefers-reduced-motion: reduce){.p-scene-media video{display:none}}

/* ── The payment pages (/datafono-integrado, /cobro-con-el-movil): the hero's stage is the AI scene in a frame, with a
   real Mesero Comandas screen in front of it where there is one; four steps on the dark trail. ── */
.pay-stage{position:relative;padding:4% 0 8%}
.pay-frame{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;border-radius:26px;background:#0b0c11;
  border:1px solid rgba(246,241,232,.12);box-shadow:0 30px 56px -24px rgba(0,0,0,.7)}
.pay-frame img,.pay-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pay-frame video{opacity:0;transition:opacity .9s ease}
.pay-stage.is-playing .pay-frame video{opacity:1}
.pay-frame .p-scene-ai{z-index:1;left:14px;right:auto}   /* the phone stands at the frame's right */
.pay-frame--still img{animation:pay-drift 18s ease-in-out infinite alternate}
@keyframes pay-drift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.09) translate(-1.5%,-1%)}}
.pay-stage .device--phone{position:absolute;right:-3%;bottom:-2%;width:30%;z-index:3}
.order-trail--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pay-soon{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:6px 12px;border-radius:999px;
  background:rgba(255,97,82,.14);border:1px solid rgba(255,97,82,.35);color:var(--coral-soft);font:800 .74rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase}
.pay-soon::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral-btn);box-shadow:0 0 0 4px rgba(255,97,82,.22)}
@media (max-width:959.98px){.order-trail--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:679.98px){
  .pay-stage{padding:2% 0 14%}
  .pay-stage .device--phone{width:34%;right:2%;bottom:0}
  .order-trail--4{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){.pay-frame video{display:none}.pay-frame--still img{animation:none}}