/* =====================================================================================================================
   Páginas de Soluciones (oct-2026): /restaurantes, /ya-vendo-en-apps, /vendo-por-whatsapp, /pastelerias-y-florerias.
   Hero con el celular en 3D y el Pin que aterriza, marquesina, «el viaje de un pedido» con la pantalla fija al bajar (pin),
   «todo lo que incluye» que se desliza de lado, el mismo pedido en dos caminos y la calculadora. Sin librerías externas.
   Con «reducir movimiento», en celular o sin JavaScript todo se ve en pasos fijos.
   ===================================================================================================================== */

/* Colores por giro */
.t-food { --sl-a: #f8a65a; --sl-b: #eb7115; --sl-c: #b9520c; --sl-glow: rgba(242, 163, 58, .38); }
.t-apps { --sl-a: #c49ad6; --sl-b: #8b5ba0; --sl-c: #5e3a70; --sl-glow: rgba(139, 91, 160, .32); }
.t-chat { --sl-a: #8fe0a6; --sl-b: #3aa860; --sl-c: #23763f; --sl-glow: rgba(58, 168, 96, .3); }
.t-cakes { --sl-a: #f6a5c0; --sl-b: #e0628a; --sl-c: #a83a5f; --sl-glow: rgba(224, 98, 138, .3); }
.t-any { --sl-a: #f8a65a; --sl-b: #eb7115; --sl-c: #b9520c; --sl-glow: rgba(242, 163, 58, .38); }
.t-pets { --sl-a: #7fd8cc; --sl-b: #1f9e8f; --sl-c: #0d6b60; --sl-glow: rgba(31, 158, 143, .3); }
.t-shop { --sl-a: #c49ad6; --sl-b: #7b4f8e; --sl-c: #4f2e5e; --sl-glow: rgba(123, 79, 142, .3); }
/* Por giro de tienda y la comparativa (nov-2026): el color de cada giro (Giros.cs). */
.t-flowers { --sl-a: #8fd6a2; --sl-b: #3f9a5b; --sl-c: #1d5230; --sl-glow: rgba(63, 154, 91, .3); }
.t-perfume { --sl-a: #dba0cf; --sl-b: #a24c8f; --sl-c: #55194a; --sl-glow: rgba(162, 76, 143, .3); }
.t-cleaning { --sl-a: #8cc8f0; --sl-b: #2b8fd6; --sl-c: #0f4670; --sl-glow: rgba(43, 143, 214, .3); }
.t-supplements { --sl-a: #a9b4f2; --sl-b: #4c5fd5; --sl-c: #1f2a73; --sl-glow: rgba(76, 95, 213, .3); }
.t-delivery { --sl-a: #f8a65a; --sl-b: #eb7115; --sl-c: #b9520c; --sl-glow: rgba(242, 163, 58, .38); }

/* ---------- Hero ---------- */
.sl-hero { position: relative; overflow: hidden; padding: 48px 0 76px; }
.sl-hero-glow { position: absolute; top: -30%; right: -20%; width: 80vw; height: 80vw; max-width: 1100px; max-height: 1100px; pointer-events: none;
    background: radial-gradient(closest-side at 55% 45%, var(--sl-glow), transparent), radial-gradient(closest-side at 25% 75%, rgba(242, 163, 58, .18), transparent);
    animation: sl-glow 14s ease-in-out infinite alternate; }
@keyframes sl-glow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6%, 4%) scale(1.08); } }
.sl-hero-grid { position: relative; display: grid; gap: 36px; align-items: center; }
@media (min-width: 992px) { .sl-hero-grid { grid-template-columns: 1.06fr .94fr; gap: 24px; } }
.sl-badge { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 99px; background: #fff; border: 1px solid var(--line);
    font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--grape); box-shadow: var(--shadow-1); animation: c2b-fade-up .7s var(--ease-out) both; }
.sl-badge i { color: var(--sl-b); }
.sl-badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .9) 50%, transparent 65%); transform: translateX(-120%);
    animation: cv-shine 4.2s 1s ease-in-out infinite; }
.sl-title { font-size: clamp(2.15rem, 4.4vw, 3.75rem); line-height: 1.03; letter-spacing: -.032em; font-weight: 700; margin: 20px 0 18px; text-wrap: balance; }
.sl-title em { display: block; color: var(--brand); font-weight: 500; }
.sl-title .w { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(2deg); filter: blur(6px);
    animation: sl-word .75s var(--ease-out) forwards; animation-delay: calc(var(--w, 0) * 65ms + .15s); }
@keyframes sl-word { to { opacity: 1; transform: none; filter: none; } }
.sl-lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--cocoa); line-height: 1.6; max-width: 600px; animation: c2b-fade-up .8s .5s var(--ease-out) both; }
.sl-points { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px; animation: c2b-fade-up .8s .62s var(--ease-out) both; }
.sl-points li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 8px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: .9rem; color: var(--espresso); box-shadow: var(--shadow-1); }
.sl-points i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #fff; background: linear-gradient(160deg, var(--sl-a), var(--sl-b) 60%, var(--sl-c)); }
.sl-hero .mk-cta { animation: c2b-fade-up .8s .74s var(--ease-out) both; }
.sl-glow { position: relative; animation: sl-pulse 2.6s ease-in-out infinite; }
@keyframes sl-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(235, 113, 21, .45), 0 14px 30px -14px rgba(215, 97, 18, .7); } 50% { box-shadow: 0 0 0 12px rgba(235, 113, 21, 0), 0 14px 30px -14px rgba(215, 97, 18, .7); } }
.sl-trust { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-weight: 700; color: var(--cocoa); animation: c2b-fade-up .8s .86s var(--ease-out) both; }
.sl-trust i { color: var(--saffron); }

/* El escenario: celular en 3D que sigue al cursor, órbitas, el Pin que aterriza y tarjetas que flotan. */
.sl-hero-stage { position: relative; height: 640px; display: grid; place-items: center; perspective: 1300px; }
.sl-orbit { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.sl-orbit i { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(123, 79, 142, .22); animation: sl-spin 40s linear infinite; }
.sl-orbit i:nth-child(1) { width: 420px; height: 420px; }
.sl-orbit i:nth-child(2) { width: 540px; height: 540px; animation-duration: 60s; animation-direction: reverse; border-color: rgba(235, 113, 21, .2); }
.sl-orbit i:nth-child(3) { width: 660px; height: 660px; animation-duration: 80s; border-style: dotted; }
@keyframes sl-spin { to { transform: rotate(360deg); } }
.sl-phone { position: relative; width: 290px; height: 590px; padding: 12px; border-radius: 46px; background: #1b100a; transform-style: preserve-3d;
    box-shadow: 0 60px 110px -38px rgba(42, 27, 18, .7), inset 0 0 0 2px #3a2a20;
    transform: rotateY(calc(-13deg + var(--ry, 0deg))) rotateX(calc(5deg + var(--rx, 0deg))); transition: transform .3s ease-out;
    animation: sl-phone-in 1.2s .2s var(--ease-out) both; }
@keyframes sl-phone-in { from { opacity: 0; transform: translateY(60px) rotateY(-35deg) rotateX(14deg); } }
.sl-cycle { position: absolute; inset: 0; opacity: 0; transform: translateX(26px) scale(.98); transition: opacity .55s var(--ease-out), transform .65s var(--ease-out); }
.sl-cycle.on { opacity: 1; transform: none; }
.sl-hero-cap { position: absolute; left: 50%; bottom: 2px; z-index: 7; transform: translateX(-50%); padding: 7px 14px; border-radius: 99px; white-space: nowrap;
    font-size: .8rem; font-weight: 800; color: #fff; background: #1b100a; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6); }
.sl-pin-land { position: absolute; top: 34px; right: 9%; width: 92px; z-index: 5; pointer-events: none; animation: sl-land 1.3s .9s var(--ease-spring) both, sl-bob 4.5s 2.3s ease-in-out infinite; }
.sl-pin-land img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgba(42, 27, 18, .3)); }
@keyframes sl-land { from { opacity: 0; transform: translateY(-260px) rotate(-18deg) scale(.7); } 70% { transform: translateY(8px) rotate(4deg) scale(1.04, .94); } to { opacity: 1; transform: none; } }
@keyframes sl-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-3deg); } }
.sl-float { position: absolute; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line);
    box-shadow: 0 22px 40px -22px rgba(42, 27, 18, .55); animation: sl-float-in .8s var(--ease-spring) both, sl-floaty 6s ease-in-out infinite; }
.sl-float i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #fff; background: linear-gradient(160deg, var(--sl-a), var(--sl-b) 60%, var(--sl-c)); }
.sl-float b { display: block; font-size: .88rem; color: var(--espresso); }
.sl-float small { font-size: .72rem; color: var(--muted); }
.sl-float.f1 { left: 2%; top: 30%; animation-delay: 1.4s, 2.2s; }
.sl-float.f2 { right: 0; bottom: 18%; animation-delay: 1.8s, 3s; }
.sl-float.f2 i { background: linear-gradient(160deg, #6fcf8d, #2f9a57 60%, #237a44); }
@keyframes sl-float-in { from { opacity: 0; transform: translateY(20px) scale(.85); } }
@keyframes sl-floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (max-width: 991.98px) {
    .sl-hero { padding-top: 28px; }
    .sl-hero-stage { height: 560px; }
    .sl-orbit i:nth-child(3) { display: none; }
}
@media (max-width: 575.98px) {
    .sl-hero-stage { height: 520px; transform: scale(.86); margin: -30px 0; }
    .sl-float.f1 { left: -4%; }
    .sl-float.f2 { right: -4%; }
    .sl-pin-land { right: 2%; width: 74px; }
    .sl-float { display: none; } /* en celular no tapan la escena */
}

/* ---------- Marquesina ---------- */
.sl-marquee { padding: 26px 0 22px; overflow: hidden; color: #fff; background: radial-gradient(600px 200px at 50% 0%, rgba(242, 163, 58, .25), transparent 70%), #1b100a; }
.sl-marquee-title { margin: 0 16px 16px; text-align: center; font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.8rem); line-height: 1.2; }
.sl-marquee-track { display: flex; width: max-content; animation: sl-marquee 45s linear infinite; }
.sl-marquee ul { display: flex; gap: 30px; margin: 0; padding: 0 15px; list-style: none; }
.sl-marquee li { white-space: nowrap; font-weight: 700; color: rgba(255, 255, 255, .88); }
.sl-marquee li i { color: var(--saffron); margin-right: 4px; }
.sl-marquee { position: relative; }
.sl-marquee:hover .sl-marquee-track, .sl-marquee:focus-within .sl-marquee-track, .sl-marquee.is-paused .sl-marquee-track { animation-play-state: paused; }
.sl-marquee-pause { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; }
.sl-marquee-pause:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; }
.sl-pro { margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: .66rem; font-weight: 800; color: #7a4a00; background: #fff3d6; vertical-align: middle; }
@keyframes sl-marquee { to { transform: translateX(-50%); } }

/* ---------- El viaje de un pedido ---------- */
.sl-story { padding: 80px 0; scroll-margin-top: 80px; }
.sl-step-ex { display: block; width: fit-content; margin: 14px auto 0; padding: 3px 10px; border-radius: 99px; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(42, 27, 18, .82); }
.is-pinned .sl-step-ex { display: none; }
.sl-story-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.05; letter-spacing: -.03em; margin: 8px 0 0; }
.sl-progress, .sl-story-phone { display: none; }
.sl-steps { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 34px; }
.sl-step-copy { display: flex; gap: 14px; align-items: flex-start; }
.sl-step-n { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; font-weight: 800; color: #fff;
    background: linear-gradient(160deg, var(--sl-a, #f8a65a), var(--sl-b, #eb7115) 60%, var(--sl-c, #b9520c)); box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .5); }
.sl-step h3 { font-size: 1.35rem; margin: 6px 0 6px; }
.sl-step p { margin: 0; color: var(--cocoa); }
.sl-screen { position: relative; width: 266px; height: 566px; border-radius: 36px; overflow: hidden; background: var(--cream); }
.sl-screen::before { content: ""; position: absolute; top: 9px; left: 50%; width: 88px; height: 22px; margin-left: -44px; border-radius: 99px; background: #000; z-index: 9; }
/* Pasos fijos (celular, sin JavaScript o «reducir movimiento»): cada paso con su pantalla, más chica. */
.sl-step-screen { margin: 16px auto 0; border: 11px solid #1b100a; box-sizing: content-box; border-radius: 46px; box-shadow: 0 30px 60px -30px rgba(42, 27, 18, .6);
    transform: scale(.78); transform-origin: top center; margin-bottom: -125px; }

/* Computadora: la pantalla se queda fija y la escena cambia con el scroll (soluciones.js pone .is-pinned y --p). */
.sl-story.is-pinned { height: calc(var(--n, 5) * 55vh + 100vh); padding: 0; }
.is-pinned .sl-story-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.is-pinned .sl-story-grid { position: relative; width: 100%; min-height: 620px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: center; column-gap: 40px; }
.is-pinned .sl-story-head, .is-pinned .sl-steps { grid-column: 1; }
.is-pinned .sl-progress { display: block; position: relative; height: 6px; max-width: 440px; margin: 46px 0 6px; border-radius: 99px; background: var(--cream-2);
    background-image: radial-gradient(circle, rgba(123, 79, 142, .35) 1.3px, transparent 1.4px); background-size: 12px 6px; }
.is-pinned .sl-progress .bar { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--saffron), var(--brand)); transition: width .7s var(--ease-out); }
.is-pinned .sl-walker { position: absolute; top: -36px; left: calc(var(--p, 0) * 100%); width: 26px; margin-left: -13px; animation: sl-walk .45s ease-in-out infinite alternate; transition: left .7s var(--ease-out); }
.sl-story-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 14px; }
.sl-story-pause { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); background: #fff; font-size: .8rem; font-weight: 800; color: var(--espresso); }
.sl-story-pause:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; }
.sl-story-hint { display: none; font-size: .78rem; color: var(--muted); }
.is-pinned .sl-story-hint { display: inline; }
.is-pinned .sl-step-copy { cursor: pointer; }
.is-pinned .sl-walker img { display: block; width: 100%; height: auto; }
@keyframes sl-walk { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-4px) rotate(6deg); } }
.is-pinned .sl-steps { gap: 6px; margin-top: 18px; }
.is-pinned .sl-step { opacity: .42; transition: opacity .45s; }
.is-pinned .sl-step.on { opacity: 1; }
.is-pinned .sl-step h3 { font-size: 1.15rem; margin: 8px 0 0; transition: font-size .4s var(--ease-out); }
.is-pinned .sl-step.on h3 { font-size: 1.55rem; }
.is-pinned .sl-step-n { width: 34px; height: 34px; border-radius: 11px; filter: grayscale(.7); transition: filter .4s, transform .4s var(--ease-spring); }
.is-pinned .sl-step.on .sl-step-n { filter: none; transform: scale(1.12); }
.is-pinned .sl-step p { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease-out), opacity .4s, margin .4s; }
.is-pinned .sl-step.on p { max-height: 140px; opacity: 1; margin-top: 6px; }
.is-pinned .sl-story-phone { display: block; position: absolute; top: 50%; right: 9%; width: 290px; height: 590px; margin-top: -295px; border-radius: 46px; background: #1b100a;
    box-shadow: 0 60px 110px -38px rgba(42, 27, 18, .7), inset 0 0 0 2px #3a2a20; z-index: 1; }
.is-pinned .sl-story-phone .mk-example-tag { z-index: 12; }
.is-pinned .sl-step-screen { position: absolute; top: 50%; right: calc(9% + 12px); margin: -283px 0 0; border: 0; box-shadow: none; z-index: 2;
    opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); pointer-events: none; }
.is-pinned .sl-step.on .sl-step-screen { opacity: 1; transform: none; }

/* ---------- Todo lo que incluye ---------- */
.sl-feats { padding: 70px 0 60px; }
.sl-feats .mk-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.sl-feats-rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 14px 0 34px; }
.sl-feats-rail::-webkit-scrollbar { display: none; }
.sl-feats-track { display: flex; gap: 18px; width: max-content; margin: 0; padding: 0 max(16px, calc((100vw - 1240px) / 2)); list-style: none; }
.sl-feat { width: 300px; scroll-snap-align: start; padding: 26px; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 44px -30px rgba(42, 27, 18, .45);
    transition: transform .35s var(--ease-out), box-shadow .35s; }
.sl-feat:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 30px 60px -30px rgba(42, 27, 18, .55); }
.sl-feat h3 { font-size: 1.25rem; margin: 18px 0 0; }
.sl-feat .mk-pro-pill { margin: 8px 0 0; }
.sl-feat p { margin: 10px 0 0; color: var(--cocoa); font-size: .95rem; }
.sl-feats.is-pinned { height: var(--h, 260vh); padding: 0; }
.is-pinned .sl-feats-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.is-pinned .sl-feats-rail { overflow: visible; }
.is-pinned .sl-feats-track { will-change: transform; }

/* ---------- El mismo pedido en dos caminos ---------- */
.sl-paths-grid { display: grid; gap: 18px; max-width: 900px; margin: 0 auto; }
@media (min-width: 768px) { .sl-paths-grid { grid-template-columns: 1fr 1fr; } }
.sl-path { padding: 26px; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.sl-path small { display: block; font-weight: 800; color: var(--muted); }
.sl-path strong { display: block; font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1.05; color: #8a6f5c; }
.sl-path.is-us { background: var(--basil-soft); border-color: #cfe6d6; }
.sl-path.is-us strong { color: var(--basil); }
.sl-path .bar { height: 12px; margin: 12px 0 10px; border-radius: 99px; background: rgba(0, 0, 0, .06); overflow: hidden; }
.sl-path .bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: #c9b8a6; transition: width 1.4s .3s var(--ease-out); }
.sl-path.is-us .bar span { background: linear-gradient(90deg, #6fcf8d, var(--basil)); }
.reveal.in .sl-path .bar span { width: var(--w); }
.sl-path > span { font-size: .9rem; color: var(--cocoa); }
.sl-paths-note { max-width: 900px; margin: 14px auto 0; text-align: center; font-size: .8rem; color: var(--muted); }

/* ---------- WhatsApp: hoy contra con Click2Bite ---------- */
.sl-vs-grid { display: grid; gap: 18px; max-width: 920px; margin: 0 auto; }
@media (min-width: 768px) { .sl-vs-grid { grid-template-columns: 1fr 1fr; } }
.sl-vs-col { padding: 26px; border-radius: 28px; border: 1px solid var(--line); background: #fff; }
.sl-vs-col h3 { font-size: 1.3rem; margin: 0 0 12px; }
.sl-vs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sl-vs-col li { position: relative; padding-left: 28px; color: var(--cocoa); }
.sl-vs-col li::before { position: absolute; left: 0; top: 0; font-family: "bootstrap-icons"; }
.sl-vs-col.is-before li::before { content: "\F62A"; color: #b35b5b; }
.sl-vs-col.is-before h3 i { color: #b35b5b; }
.sl-vs-col.is-after { background: var(--basil-soft); border-color: #cfe6d6; }
.sl-vs-col.is-after li::before { content: "\F26A"; color: var(--basil); }
.sl-vs-col.is-after h3 i { color: var(--basil); }
.sl-price-line { max-width: 920px; margin: 18px auto 0; text-align: center; color: var(--cocoa); font-size: .92rem; }
.sl-price-line a { font-weight: 800; white-space: nowrap; }

.sl-final { padding-top: 30px; }

/* ---------- Todo tipo de negocio: los 8 giros con su pin vestido ---------- */
.sl-giros-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 768px) { .sl-giros-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sl-giro { display: grid; justify-items: center; gap: 4px; padding: 16px 12px 18px; border-radius: 24px; text-align: center; text-decoration: none; color: var(--espresso);
    background: linear-gradient(180deg, var(--gs, #fff3e6), #fff 70%); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s; }
.sl-giro:hover { transform: translateY(-5px); border-color: var(--g); box-shadow: 0 22px 40px -26px rgba(42, 27, 18, .55); color: var(--espresso); }
.sl-giro-pin { display: block; width: 104px; height: 104px; }
.sl-giro-pin .gpin { width: 100%; height: 100%; }
.sl-giro strong { font-size: 1.05rem; }
.sl-giro small { font-size: .78rem; color: var(--muted); line-height: 1.3; }
.sl-giro-words { display: block; margin-top: 6px; padding: 3px 10px; border-radius: 99px; font-size: .72rem; font-weight: 800; color: var(--g); background: #fff; border: 1px solid var(--line); }
.sl-giro-words::first-letter { text-transform: uppercase; }

/* =====================================================================================================================
   Pantallas del celular de ejemplo (.ss-*), 266 × 566. Cada una es una escena corta que pasa de verdad: se escribe la
   búsqueda, cae el Pin, se toca «Agregar», se paga, suena la campana y se acepta… Las animaciones arrancan cuando la
   pantalla aparece (.sl-cycle.on en el hero, .sl-step.on en «el viaje»), así siempre se ven desde el principio.
   ===================================================================================================================== */
.ss { position: absolute; inset: 0; font-size: 13px; color: var(--espresso); background: var(--cream); overflow: hidden; }
.sl-cycle:not(.on) .ss *, .sl-step:not(.on) .ss * { animation: none !important; }
.ss-logo { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; font-weight: 800; font-size: .8rem; color: var(--sl-c, var(--brand)); background: #fff; }
.ss-toast { position: absolute; left: 14px; right: 14px; bottom: 18px; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px;
    background: #fff; font-size: .74rem; font-weight: 800; box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .5); opacity: 0; animation: ss-in-up .5s 2.3s var(--ease-spring) forwards; }
.ss-toast i { color: var(--sl-b, var(--brand)); font-size: 1rem; }
.ss-toast.is-top { top: 52px; bottom: auto; }
/* El dedo: un círculo que toca la pantalla. */
.ss-finger { position: absolute; z-index: 8; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; pointer-events: none; opacity: 0;
    background: rgba(42, 27, 18, .26); border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
@keyframes ss-tap { 0% { opacity: 0; transform: scale(1.6); } 35% { opacity: 1; transform: scale(1); } 55% { opacity: 1; transform: scale(.78); } 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes ss-in-up { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ss-in { to { opacity: 1; } }
@keyframes ss-out { to { opacity: 0; } }
@keyframes ss-slide-up { to { transform: none; } }
@keyframes ss-press { 0%, 100% { transform: none; } 50% { transform: scale(.93); } }
@keyframes ss-flash { 0%, 100% { border-color: var(--line); box-shadow: none; } 40% { border-color: var(--sl-b, var(--brand)); box-shadow: 0 0 0 3px rgba(235, 113, 21, .18); } }

/* 1. Mapa: escribe «pizza cerca de mí», cae el Pin, sube la ficha y toca «Pedir en línea». */
.ss-search { position: absolute; top: 46px; left: 12px; right: 12px; z-index: 3; padding: 9px 14px; border-radius: 99px; background: #fff; font-size: .74rem; color: #3c4043; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); white-space: nowrap; }
.ss-typed { display: inline-block; vertical-align: bottom; overflow: hidden; white-space: nowrap; max-width: 0; animation: ss-type 1s .3s steps(20, end) forwards; }
.ss-search::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: middle; background: #3c4043; animation: ss-caret .8s steps(1) infinite; }
@keyframes ss-type { to { max-width: 200px; } }
@keyframes ss-caret { 50% { opacity: 0; } }
.ss-map { position: absolute; inset: 0 0 168px 0; background: linear-gradient(0deg, rgba(255, 255, 255, .4) 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(90deg, rgba(255, 255, 255, .4) 1px, transparent 1px) 0 0 / 34px 34px, #e7efe2; }
.ss-map .road { position: absolute; border-radius: 6px; background: #fbe3b8; }
.ss-map .road.a { left: -10%; right: -10%; top: 50%; height: 10px; transform: rotate(-12deg); }
.ss-map .road.b { top: -10%; bottom: -10%; left: 40%; width: 9px; transform: rotate(8deg); }
.ss-map .road.c { left: 6%; right: -10%; top: 78%; height: 7px; transform: rotate(6deg); background: #fff; }
.ss-mpin { position: absolute; color: #d93025; font-size: 1.1rem; opacity: .6; }
.ss-mpin.p1 { left: 18%; top: 36%; }
.ss-mpin.p2 { left: 72%; top: 64%; }
.ss-drop { position: absolute; left: 50%; top: 40%; width: 40px; margin-left: -20px; opacity: 0; animation: ss-drop .9s 1.3s var(--ease-spring) forwards; }
.ss-drop img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .25)); }
@keyframes ss-drop { 0% { opacity: 0; transform: translateY(-120px); } 60% { opacity: 1; transform: translateY(4px) scale(1.06, .92); } 100% { opacity: 1; transform: none; } }
.ss-place { position: absolute; left: 0; right: 0; bottom: 0; height: 168px; padding: 16px 16px 14px; border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -8px 20px rgba(0, 0, 0, .1);
    transform: translateY(100%); animation: ss-slide-up .6s 1.9s var(--ease-out) forwards; }
.ss-place strong { display: block; font-size: 1rem; }
.ss-stars { display: block; color: #e2a100; font-size: .74rem; }
.ss-stars b { color: var(--espresso); }
.ss-place small { display: block; color: #188038; font-size: .72rem; margin: 2px 0 12px; }
.ss-order { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 99px; font-size: .78rem; font-weight: 800; color: #fff; background: #1a73e8; animation: ss-press .35s 3s ease-in-out; }
.f-order { left: 82px; top: 118px; animation: ss-tap .8s 2.75s forwards; }

/* 2. Menú: aparecen los productos, toca «Agregar» dos veces, sube el carrito y cuenta 1 → 2. */
.ss-menu { padding-top: 44px; }
.ss-brand { display: flex; align-items: center; gap: 10px; margin: 0 12px; padding: 14px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--sl-b, #eb7115), var(--sl-c, #b9520c)); }
.ss-brand small { display: block; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; font-weight: 800; }
.ss-brand strong { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.1; }
.ss-chips { display: flex; gap: 6px; margin: 10px 12px; }
.ss-chips span { padding: 4px 9px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-size: .66rem; font-weight: 700; }
.ss-chips i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2f9a57; }
.ss-item { display: flex; align-items: center; gap: 10px; margin: 8px 12px; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line); animation: c2b-fade-up .5s var(--ease-out) both; }
.ss-item.i1 { animation: c2b-fade-up .5s .1s var(--ease-out) both, ss-flash .6s 1.1s; }
.ss-item.i2 { animation: c2b-fade-up .5s .22s var(--ease-out) both, ss-flash .6s 2.05s; }
.ss-item.i3 { animation-delay: .34s; }
.ss-item div { flex: 1; min-width: 0; }
.ss-item strong { display: block; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-item small { font-size: .64rem; color: var(--sl-c, var(--muted)); font-weight: 700; }
.ss-item b { font-size: .8rem; }
.ss-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--sl-c, var(--brand)); background: var(--cream-2); font-size: 1.2rem; }
.f-menu { left: 96px; top: 194px; animation: ss-tap .8s .85s forwards, ss-tap2 .8s 1.8s forwards; }
.f-menu.is-one { animation: ss-tap .8s .85s forwards; }
@keyframes ss-tap2 { 0% { top: 266px; opacity: 0; transform: scale(1.6); } 35% { top: 266px; opacity: 1; transform: scale(1); } 55% { top: 266px; transform: scale(.78); } 75% { top: 266px; opacity: 1; transform: scale(1); } 100% { top: 266px; opacity: 0; } }
.ss-cart { position: absolute; left: 12px; right: 12px; bottom: 16px; display: flex; justify-content: space-between; padding: 12px 16px; border-radius: 99px; color: #fff; font-size: .78rem; font-weight: 800;
    background: linear-gradient(135deg, var(--sl-b, #eb7115), var(--sl-c, #b9520c)); transform: translateY(160%); animation: ss-slide-up .5s 1.25s var(--ease-spring) forwards, sl-pulse 2.6s 2.8s ease-in-out infinite; }
.ss-count { position: relative; display: inline-block; margin-right: 3px; }
.ss-count .c2 { position: absolute; left: 0; top: 0; opacity: 0; animation: ss-in .15s 2.1s forwards; }
.ss-count .c1:has(+ .c2) { animation: ss-out .15s 2.1s forwards; }

/* 3. Pagado: botón de pagar → procesando → ¡Pagado! → el dinero llega a su propia cuenta. */
.ss-sum { position: absolute; top: 64px; left: 24px; right: 24px; display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.ss-sum small { color: var(--muted); font-weight: 700; }
.ss-sum b { font-family: var(--font-display); font-size: 1.3rem; }
.ss-paybtn { position: absolute; left: 24px; right: 24px; top: 140px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: #fff; font-weight: 800; background: #111;
    animation: ss-press .3s .75s ease-in-out, ss-out .3s 1.55s forwards; }
.ss-paybtn .lbl { animation: ss-out .1s 1s forwards; }
.ss-paybtn .spin { position: absolute; width: 24px; height: 24px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; opacity: 0; animation: ss-in .1s 1s forwards, ss-rot .7s linear infinite; }
@keyframes ss-rot { to { transform: rotate(360deg); } }
.f-pay { left: 50%; top: 50%; margin: -17px 0 0 -17px; animation: ss-tap .7s .55s forwards; }
.ss-paidbox { position: absolute; top: 146px; left: 0; right: 0; display: grid; justify-items: center; gap: 6px; text-align: center; opacity: 0; animation: ss-in-up .45s 1.6s var(--ease-spring) forwards; }
.ss-check { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; color: #fff; font-size: 2.6rem; background: linear-gradient(160deg, #6fcf8d, #2f9a57 60%, #237a44);
    animation: ss-check 1.4s 1.6s ease-out both; }
@keyframes ss-check { 0% { transform: scale(.5); box-shadow: 0 0 0 0 rgba(47, 154, 87, .5); } 30% { transform: scale(1.1); } 45% { transform: none; } 100% { box-shadow: 0 0 0 26px rgba(47, 154, 87, 0); } }
.ss-paidbox strong { font-family: var(--font-display); font-size: 1.6rem; }
.ss-paidbox small { color: var(--muted); }
.ss-bank { position: absolute; left: 14px; right: 14px; bottom: 26px; padding: 18px; border-radius: 22px; color: #fff; background: radial-gradient(240px 120px at 0% 0%, rgba(242, 163, 58, .35), transparent 70%), #1b100a;
    transform: translateY(160%); animation: ss-slide-up .6s 2.15s var(--ease-out) forwards; }
.ss-bank small { display: block; opacity: .7; font-size: .7rem; }
.ss-bank strong { display: block; font-family: var(--font-display); font-size: 2rem; color: #8fe0a6; opacity: 0; animation: ss-in-up .5s 2.6s forwards; }
.ss-bank span { font-size: .7rem; opacity: .85; }
.ss-bank span i { color: #8fe0a6; }

/* 4. Campana: entra el pedido, suena, se toca «Aceptar» y queda «Aceptado». (También «Confirmar» de la agenda.) */
.ss-bell, .ss-list, .ss-confirm { background: #1b100a; color: #fff; }
.ss-kitchen-top { position: absolute; top: 40px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; font-size: .72rem; font-weight: 800; opacity: .9; }
.ss-kitchen-top span i { color: #3ad07a; font-size: .55rem; margin-right: 4px; }
.ss-kitchen-top b i { color: var(--saffron); animation: ill-ring 1.4s ease-in-out infinite; display: inline-block; }
.ss-bellbig { position: absolute; top: 120px; left: 50%; width: 120px; height: 120px; margin-left: -60px; display: grid; place-items: center; }
.ss-bellbig > span { display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; font-size: 3rem; color: #fff; background: radial-gradient(120% 120% at 28% 22%, #f8a65a, #eb7115 52%, #b9520c); }
.ss-bellbig > span i { animation: ill-ring 1.2s .5s ease-in-out 2; transform-origin: 50% 12%; display: inline-block; }
.ss-bellbig .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(242, 163, 58, .7); opacity: 0; animation: ss-ring 1.2s .5s ease-out 2; }
.ss-bellbig .ring.r2 { animation-delay: 1.1s; }
@keyframes ss-ring { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.ss-ticket { position: absolute; left: 14px; right: 14px; bottom: 34px; padding: 16px; border-radius: 20px; color: var(--espresso); background: #fff; transform: translateY(150%); animation: ss-slide-up .55s .4s var(--ease-spring) forwards; }
.ss-ticket strong { display: block; font-size: .95rem; }
.ss-ticket small { display: block; color: var(--muted); font-size: .72rem; margin: 3px 0 12px; }
.ss-accept { position: relative; display: block; padding: 10px; border-radius: 12px; text-align: center; font-weight: 800; font-size: .82rem; color: #fff; background: #2f9a57; animation: ss-press .3s 1.85s ease-in-out, ss-accepted .3s 2s forwards; }
.ss-accept .a2 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; opacity: 0; animation: ss-in .2s 2s forwards; }
.ss-accept .a1 { animation: ss-out .15s 1.95s forwards; }
@keyframes ss-accepted { to { background: #1f6b3d; } }
.f-accept { left: 50%; bottom: 20px; top: auto; margin: 0 0 -17px -17px; animation: ss-tap .7s 1.6s forwards; }
.ss-ticket.is-sched { bottom: auto; top: 110px; transform: none; opacity: 0; animation: ss-in-up .5s .3s forwards; }
.ss-confirm .ss-note { color: rgba(255, 255, 255, .7); }

/* 5. Rastreo: se dibuja la ruta, el repartidor llega a la casa y cae el sello de lealtad. */
.ss-map.is-track { inset: 0 0 150px 0; }
.ss-route-box { position: absolute; left: 13px; top: 50px; width: 240px; height: 280px; }
.ss-route { position: absolute; inset: 0; overflow: visible; clip-path: inset(0 100% 0 0); animation: ss-reveal .9s .2s ease-out forwards; }
@keyframes ss-reveal { to { clip-path: inset(0 0 0 0); } }
.ss-route path { fill: none; stroke: var(--sl-b, #eb7115); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 9; }
.ss-moto { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; color: #fff; font-size: 1rem;
    background: var(--sl-c, #b9520c); box-shadow: 0 6px 12px rgba(0, 0, 0, .3); offset-path: path("M30 250 C 70 190, 50 140, 120 130 S 200 80, 205 30"); offset-rotate: 0deg;
    offset-distance: 0%; animation: ss-ride 2.6s .7s ease-in-out forwards; }
@keyframes ss-ride { to { offset-distance: 100%; } }
.ss-home { position: absolute; left: 205px; top: 30px; margin: -16px 0 0 -16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #fff; background: #2f9a57; animation: ss-press .4s 3.25s; }
.ss-eta { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; padding: 18px 16px; border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -8px 20px rgba(0, 0, 0, .1); }
.ss-eta strong { display: block; font-family: var(--font-display); font-size: 1.25rem; }
.ss-eta small { color: var(--muted); }
.ss-track .ss-toast { animation-delay: 2.9s; }

/* 6. Bolsa con sello: el sello cae sobre la bolsa del pedido de app. */
.ss-seal { background: linear-gradient(180deg, #fbf6ee, #f1e6d6); }
.ss-bag { position: absolute; top: 80px; left: 50%; width: 180px; height: 250px; margin-left: -90px; border-radius: 8px 8px 16px 16px; background: linear-gradient(180deg, #c99a6a, #b0814f);
    box-shadow: inset -12px 0 18px rgba(0, 0, 0, .12), 0 30px 40px -24px rgba(42, 27, 18, .6); animation: c2b-fade-up .5s var(--ease-out) both; }
.ss-bag .fold { position: absolute; top: 0; left: 0; right: 0; height: 30px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #a8784a, #b98a5a); }
.ss-bag .ss-sticker { position: absolute; left: 22px; right: 22px; top: 82px; display: grid; justify-items: center; gap: 2px; padding: 12px 8px; border-radius: 16px; background: #fff;
    box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .5); opacity: 0; animation: ss-stamp .7s .6s var(--ease-spring) forwards; }
@keyframes ss-stamp { 0% { opacity: 0; transform: translateY(-70px) rotate(-22deg) scale(1.35); } 60% { opacity: 1; transform: translateY(3px) rotate(-6deg) scale(.95); } 100% { opacity: 1; transform: rotate(-6deg); } }
.ss-bag .ss-sticker i { font-size: 1.8rem; color: var(--sl-c, #5e3a70); }
.ss-bag .ss-sticker b { font-size: .78rem; }
.ss-bag .ss-sticker small { font-size: .62rem; color: var(--muted); }
.ss-note { position: absolute; left: 16px; right: 16px; bottom: 30px; text-align: center; font-size: .72rem; color: var(--muted); opacity: 0; animation: ss-in .5s 1.4s forwards; }

/* 7. Escanear el QR: la cámara enfoca, la línea lo lee y aparece «Abrir …». */
.ss-qr { background: radial-gradient(circle at 50% 40%, #3b2a20, #120a06); }
.ss-cam { position: absolute; top: 130px; left: 50%; width: 190px; height: 190px; margin-left: -95px; animation: ss-focus .8s ease-out both; }
@keyframes ss-focus { from { transform: scale(1.25); filter: blur(4px); } to { transform: none; filter: none; } }
.ss-cam .ss-qrcode { position: absolute; inset: 22px; display: grid; place-items: center; border-radius: 16px; background: #fff; font-size: 6rem; color: #1b100a; }
.ss-scan { position: absolute; left: 10px; right: 10px; top: 20px; height: 3px; border-radius: 3px; background: #3ad07a; box-shadow: 0 0 14px #3ad07a; animation: ss-scan 1s .6s ease-in-out 2 alternate; }
@keyframes ss-scan { to { top: 166px; } }
.ss-cam .c { position: absolute; width: 30px; height: 30px; border: 4px solid #fff; transition: border-color .3s; }
.ss-qr .ss-cam .c { animation: ss-locked .3s 2.5s forwards; }
@keyframes ss-locked { to { border-color: #3ad07a; } }
.ss-cam .tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.ss-cam .tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.ss-cam .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.ss-cam .br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.ss-qr .ss-toast { animation-delay: 2.6s; }

/* 8. Tarjeta de lealtad: se van sellando las 5 estrellas y sale el regalo. */
.ss-card { position: absolute; top: 96px; left: 14px; right: 14px; padding: 20px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, var(--sl-b, #8b5ba0), var(--sl-c, #5e3a70));
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .6); animation: ss-in-up .5s .1s both; }
.ss-card small { opacity: .8; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.ss-card strong { display: block; font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 14px; }
.ss-stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ss-stamps span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .5); }
.ss-stamps i { color: #ffd27a; opacity: 0; animation: ss-stamp .45s calc(.5s + var(--s) * .3s) var(--ease-spring) forwards; }
.ss-card p { margin: 14px 0 0; font-weight: 800; font-size: .82rem; opacity: 0; animation: ss-in-up .4s 2.2s forwards; }

/* 9 y 10. WhatsApp: los chats llegan uno tras otro; luego mandas tu link y tu cliente lo abre. */
.ss-chaos, .ss-link { background: #efe7dd; }
.ss-chat-top { position: absolute; top: 0; left: 0; right: 0; height: 84px; padding: 46px 16px 0; color: #fff; font-weight: 800; font-size: .82rem; background: #1f8a5a; }
.ss-chat-top i { margin-right: 4px; }
.ss-chat-top b { float: right; padding: 0 7px; border-radius: 99px; color: #1f8a5a; background: #fff; font-size: .7rem; animation: ss-badge .6s 1.9s ease-in-out 3 alternate; }
@keyframes ss-badge { to { transform: scale(1.25); } }
.ss-bubbles { position: absolute; top: 96px; left: 10px; right: 10px; display: grid; gap: 8px; }
.ss-bubbles span { max-width: 82%; padding: 8px 11px; border-radius: 14px 14px 14px 4px; background: #fff; font-size: .74rem; box-shadow: 0 2px 4px rgba(0, 0, 0, .08); justify-self: start; }
.ss-chaos .ss-bubbles span { opacity: 0; animation: ss-in-up .3s calc(var(--b, 0) * .32s + .2s) forwards, ss-jitter 1.4s 2.3s ease-in-out infinite alternate; }
.ss-chaos .ss-bubbles span:nth-child(2n) { justify-self: end; }
@keyframes ss-jitter { from { translate: -2px 0; rotate: -1.2deg; } to { translate: 2px 1px; rotate: 1.2deg; } }
.ss-link .ss-bubbles .in { opacity: 0; animation: ss-in-up .35s .2s forwards; }
.ss-bubbles .out { justify-self: end; border-radius: 14px 14px 4px 14px; background: #d9fdd3; opacity: 0; animation: ss-in-up .35s .95s forwards; }
.ss-preview { display: flex !important; gap: 10px; align-items: center; animation-delay: 1.6s !important; }
.ss-preview b { display: block; font-size: .8rem; }
.ss-preview small { font-size: .66rem; color: var(--muted); }
.ss-preview .ss-logo { background: linear-gradient(135deg, var(--sl-b), var(--sl-c)); color: #fff; }

/* 11. Pedidos ordenados: entra el pedido nuevo, pagado, arriba de la lista. */
.ss-rows { position: absolute; top: 80px; left: 12px; right: 12px; display: grid; gap: 8px; }
.ss-rows div { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .08); font-size: .76rem; }
.ss-rows div:first-child { background: rgba(58, 208, 122, .2); opacity: 0; animation: ss-in-up .55s .7s var(--ease-spring) forwards; }
.ss-rows b { color: var(--saffron); }
.ss-rows span { flex: 1; }
.ss-rows em { font-style: normal; font-weight: 800; }
.ss-list .ss-toast { animation-delay: 1.7s; }

/* 12. Calendario: toca el 12, luego las 5:00 pm, y sube «Pagar y apartar». */
.ss-cal { padding-top: 48px; }
.ss-cal-head { margin: 0 14px 12px; }
.ss-cal-head strong { display: block; font-family: var(--font-display); font-size: 1.3rem; }
.ss-cal-head small { color: var(--muted); font-size: .72rem; }
.ss-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 0 14px; }
.ss-days span { display: grid; place-items: center; height: 38px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: .8rem; }
.ss-days span.off { opacity: .35; }
.ss-days span.on { animation: ss-pick .3s 1.05s forwards; }
@keyframes ss-pick { to { color: #fff; border-color: transparent; background: var(--sl-b, #e0628a); box-shadow: 0 6px 14px -6px var(--sl-glow, rgba(224, 98, 138, .6)); } }
.f-day { left: 84px; top: 166px; animation: ss-tap .7s .8s forwards; }
.ss-times { position: relative; display: flex; gap: 6px; margin: 14px 14px 0; }
.ss-times span:not(.ss-finger) { flex: 1; padding: 8px 0; text-align: center; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-size: .72rem; font-weight: 700; }
.ss-times span.on { animation: ss-time .3s 1.85s forwards; }
@keyframes ss-time { to { color: #fff; background: var(--espresso); border-color: var(--espresso); } }
.f-time { left: 200px; top: 16px; animation: ss-tap .7s 1.6s forwards; }
.ss-cal .ss-cart { animation: ss-slide-up .5s 2.3s var(--ease-spring) forwards, sl-pulse 2.6s 3s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .sl-hero *, .sl-hero *::before, .sl-hero *::after, .sl-marquee-track, .sl-story *, .sl-feats *, .ss, .ss *, .sl-glow, .sl-final * { animation: none !important; transition: none !important; }
    .sl-marquee-pause { display: none; }
    .sl-title .w { opacity: 1; transform: none; filter: none; }
    .ss-stamps i, .ss-toast, .ss-bank strong, .ss-drop, .ss-paidbox, .ss-card p, .ss-note, .ss-bubbles span, .ss-rows div:first-child, .ss-ticket.is-sched, .ss-bag .ss-sticker { opacity: 1 !important; transform: none !important; }
    .ss-place, .ss-cart, .ss-bank, .ss-ticket { transform: none !important; }
    .ss-typed { max-width: none; }
    .ss-route { clip-path: none; }
    .ss-paybtn, .ss-finger, .ss-count .c1:has(+ .c2) { display: none; }
    .ss-count .c2, .ss-accept .a2 { opacity: 1; }
    .ss-accept .a1 { opacity: 0; }
    .sl-marquee-track { flex-wrap: wrap; width: auto; justify-content: center; }
    .sl-marquee ul[aria-hidden] { display: none; }
    .ss-moto { offset-distance: 70%; }
}

/* =====================================================================================================================
   «Ya vendo en apps»: el programa completo de «Clientes que vuelven» (3 etapas, 8 piezas con su escena animada)
   ===================================================================================================================== */
.lp .mk-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.lp-demo { margin: 8px 0 0; font-size: .8rem; font-weight: 700; color: var(--muted); }
.lp-stage { margin-top: 34px; }
.lp-stage-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.lp-stage-head h3 { font-size: 1.4rem; margin: 2px 0 2px; }
.lp-stage-head p { margin: 0; color: var(--cocoa); }
.lp-n { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; font-weight: 800; font-size: 1.1rem; color: #fff;
    background: linear-gradient(160deg, #c49ad6, #8b5ba0 60%, #5e3a70); box-shadow: 0 10px 20px -12px rgba(94, 58, 112, .8); }
.lp-grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .lp-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-card { padding: 12px 12px 18px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .3s var(--ease-out), box-shadow .3s; }
.lp-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(42, 27, 18, .5); }
.lp-card h4 { font-size: 1.12rem; margin: 14px 6px 6px; }
.lp-card p { margin: 0 6px; font-size: .9rem; color: var(--cocoa); }
.lp-plan { display: inline-block; vertical-align: middle; margin-left: 4px; padding: 2px 9px; border-radius: 99px; font-family: var(--font-body, inherit); font-size: .66rem; font-weight: 800;
    letter-spacing: .02em; color: #1d5230; background: #e3f4e7; }
.lp-plan.is-pro { color: #7a4a00; background: #fff3d6; }
.lp-scene { position: relative; height: 170px; border-radius: 18px; overflow: hidden; font-size: 11px; line-height: 1.25; background: linear-gradient(135deg, #f6effa, #e8dcf0); }
.lp-scene * { font-style: normal; }

/* 1. Imprimir sellos: sale la tira con 3 sellos y uno queda pegado en la bolsa */
.pr-box { position: absolute; left: 18px; top: 14px; width: 120px; height: 44px; border-radius: 12px; background: linear-gradient(180deg, #3a2a20, #1b100a); box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .6); z-index: 2; }
.pr-slot { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 4px; border-radius: 3px; background: #000; }
.pr-led { position: absolute; right: 12px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: #3ad07a; animation: lp-blink 1s steps(1) infinite; }
.pr-paper { position: absolute; left: 34px; top: 50px; width: 88px; display: grid; gap: 4px; padding: 6px; background: #fff; box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .5);
    clip-path: inset(0 0 100% 0); animation: lp-print 7s steps(14, end) infinite; }
.pr-sticker { display: grid; justify-items: center; padding: 4px 2px; border-radius: 6px; border: 1.5px dashed #c9b8a6; }
.pr-sticker i { font-size: 18px; color: #5e3a70; }
.pr-sticker b { font-size: 8px; white-space: nowrap; }
.pr-bag { position: absolute; right: 22px; top: 40px; width: 92px; height: 116px; border-radius: 5px 5px 12px 12px; background: linear-gradient(180deg, #c99a6a, #b0814f); box-shadow: inset -8px 0 12px rgba(0, 0, 0, .12); }
.pr-fold { position: absolute; top: 0; left: 0; right: 0; height: 16px; border-radius: 5px 5px 0 0; background: #a8784a; }
.pr-stuck { position: absolute; left: 18px; right: 18px; top: 38px; display: grid; place-items: center; height: 46px; border-radius: 8px; background: #fff; color: #5e3a70; font-size: 24px;
    box-shadow: 0 4px 8px -4px rgba(0, 0, 0, .5); opacity: 0; animation: lp-stick 7s var(--ease-spring) infinite; }
@keyframes lp-blink { 50% { opacity: .3; } }
@keyframes lp-print { 0% { clip-path: inset(0 0 100% 0); } 40%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes lp-stick { 0%, 48% { opacity: 0; transform: translate(-80px, -30px) rotate(-25deg) scale(.7); } 58% { opacity: 1; transform: rotate(-6deg) scale(1.08); } 62%, 94% { opacity: 1; transform: rotate(-6deg); } 100% { opacity: 0; } }

/* 2. Acceso directo: «Agregar a inicio» y aparece su ícono en la pantalla */
.lp-home { background: linear-gradient(135deg, #eaf1fb, #d9e6f7); }
.hm-phone { position: absolute; left: 50%; top: 12px; width: 150px; height: 148px; margin-left: -75px; padding: 14px 12px; border-radius: 22px; background: linear-gradient(160deg, #5b7bd5, #8b5ba0); box-shadow: 0 16px 28px -16px rgba(0, 0, 0, .6); }
.hm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hm-grid > i { aspect-ratio: 1; border-radius: 8px; background: rgba(255, 255, 255, .35); }
.hm-new { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; background: #fff; opacity: 0; transform: scale(0); animation: lp-pop 7s var(--ease-spring) infinite; }
.hm-new img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.hm-new span { position: absolute; top: 100%; left: 50%; margin-top: 2px; transform: translateX(-50%); font-size: 7px; font-weight: 800; color: #fff; white-space: nowrap; }
.hm-new::after { content: ""; position: absolute; inset: -4px; border-radius: 11px; border: 2px solid #ffd27a; opacity: 0; animation: lp-ring 7s infinite; }
.hm-sheet { position: absolute; left: 6px; right: 6px; bottom: 6px; display: grid; gap: 6px; padding: 10px; border-radius: 14px; background: #fff; text-align: center; transform: translateY(130%); animation: lp-sheet 7s var(--ease-out) infinite; }
.hm-sheet b { font-size: 10px; color: var(--espresso); }
.hm-sheet em { padding: 5px; border-radius: 9px; font-size: 10px; font-weight: 800; color: #fff; background: #1a73e8; animation: lp-tap 7s infinite; }
@keyframes lp-sheet { 0%, 8% { transform: translateY(130%); } 16%, 40% { transform: none; } 48%, 100% { transform: translateY(130%); } }
@keyframes lp-tap { 0%, 30% { transform: none; } 34% { transform: scale(.88); } 38%, 100% { transform: none; } }
@keyframes lp-pop { 0%, 46% { opacity: 0; transform: scale(0); } 54% { opacity: 1; transform: scale(1.15); } 58%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lp-ring { 0%, 54% { opacity: 0; transform: scale(.8); } 60% { opacity: 1; } 76%, 100% { opacity: 0; transform: scale(1.3); } }

/* 3. Regalo de bienvenida: el cupón entra al carrito y baja el total */
.lp-welcome { background: linear-gradient(135deg, #fff3e6, #ffe2c4); }
.wc-cart { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 12px 22px -16px rgba(0, 0, 0, .5); }
.wc-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; }
.wc-disc { color: #1f7a45; font-weight: 800; opacity: 0; max-height: 0; animation: lp-disc 7s infinite; }
.wc-total { position: relative; padding-top: 6px; border-top: 1px dashed var(--line); font-weight: 800; font-size: 13px !important; }
.wc-total .t2 { position: absolute; right: 0; color: #1f7a45; opacity: 0; animation: lp-t2 7s infinite; }
.wc-total .t1 { animation: lp-t1 7s infinite; }
.wc-chip { position: absolute; left: 50%; top: 18px; display: inline-flex; gap: 6px; align-items: center; padding: 7px 14px; border-radius: 10px; font-weight: 800; font-size: 12px; color: #fff;
    background: linear-gradient(135deg, #ff7a1a, #e3306c); box-shadow: 0 10px 18px -10px rgba(227, 48, 108, .8); transform: translateX(-50%); animation: lp-chip 7s var(--ease-out) infinite; }
@keyframes lp-chip { 0% { opacity: 0; transform: translate(-50%, -30px) rotate(-8deg); } 12%, 30% { opacity: 1; transform: translate(-50%, 0) rotate(-3deg); } 42% { opacity: 1; transform: translate(-50%, 60px) scale(.7); } 46%, 100% { opacity: 0; transform: translate(-50%, 60px) scale(.6); } }
@keyframes lp-disc { 0%, 42% { opacity: 0; max-height: 0; } 48%, 94% { opacity: 1; max-height: 20px; } 100% { opacity: 0; max-height: 0; } }
@keyframes lp-t1 { 0%, 46% { opacity: 1; } 50%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lp-t2 { 0%, 46% { opacity: 0; } 50%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* 4. Tarjeta de lealtad: se sellan las 5 estrellas y se abre el regalo */
.ly-card { position: absolute; left: 16px; top: 16px; width: calc(66% - 16px); padding: 12px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #8b5ba0, #5e3a70); box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .6); }
.ly-card small { display: block; opacity: .8; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.ly-card b { display: block; font-family: var(--font-display); font-size: 15px; margin-bottom: 10px; }
.ly-stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ly-stamps > i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .5); }
.ly-stamps > i > i { color: #ffd27a; font-size: 14px; opacity: 0; animation: lp-stamp 7s infinite; animation-delay: calc(var(--s) * .55s); }
@keyframes lp-stamp { 0% { opacity: 0; transform: scale(0) rotate(-40deg); } 4%, 70% { opacity: 1; transform: none; } 76%, 100% { opacity: 0; } }
.ly-gift { position: absolute; right: 16px; top: 40px; width: calc(34% - 24px); display: grid; justify-items: center; gap: 4px; padding: 12px 4px; border-radius: 16px; color: #fff; text-align: center;
    background: linear-gradient(135deg, #ff7a1a, #e3306c); opacity: 0; animation: lp-gift 7s var(--ease-spring) infinite; }
.ly-gift i { font-size: 28px; animation: lp-shake 7s infinite; }
.ly-gift b { font-size: 10px; }
@keyframes lp-gift { 0%, 44% { opacity: 0; transform: translateY(20px) scale(.6); } 50%, 72% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; } }
@keyframes lp-shake { 0%, 50%, 66%, 100% { transform: none; } 54%, 62% { transform: rotate(-12deg); } 58% { transform: rotate(12deg); } }

/* 5. Cupones: se arma el cupón y se comparte por WhatsApp */
.lp-coupon { background: linear-gradient(135deg, #ecf8f0, #d6efdf); }
.cp-form { position: absolute; left: 14px; top: 14px; width: calc(52% - 14px); display: grid; gap: 4px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 12px 22px -16px rgba(0, 0, 0, .5); }
.cp-row { display: flex; justify-content: space-between; font-size: 10px; opacity: 0; animation: lp-row 7s infinite; }
.cp-row:nth-child(2) { animation-delay: .35s; } .cp-row:nth-child(3) { animation-delay: .7s; } .cp-row:nth-child(4) { animation-delay: 1.05s; }
.cp-row small { color: var(--muted); }
.cp-share { margin-top: 4px; padding: 5px; border-radius: 9px; text-align: center; font-size: 10px; font-weight: 800; color: #fff; background: #1f8a5a; animation: lp-press 7s infinite; }
.cp-msg { position: absolute; right: 14px; top: 34px; width: calc(48% - 22px); display: grid; gap: 3px; padding: 8px 10px; border-radius: 12px 12px 2px 12px; background: #d9fdd3; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .4);
    opacity: 0; animation: lp-msg 7s var(--ease-spring) infinite; }
.cp-msg b { font-size: 11px; }
.cp-msg small { font-size: 8.5px; color: #3c6b4a; word-break: break-all; }
@keyframes lp-row { 0% { opacity: 0; transform: translateX(-10px); } 6%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lp-press { 0%, 34% { transform: none; } 38% { transform: scale(.88); } 42%, 100% { transform: none; } }
@keyframes lp-msg { 0%, 42% { opacity: 0; transform: translateY(16px) scale(.9); } 48%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 6. «Te extrañamos»: se elige a Ana, le llega el WhatsApp y vuelve a pedir */
.lp-miss { background: linear-gradient(135deg, #fdf0f4, #f8dbe5); }
.ms-list { position: absolute; left: 12px; right: 12px; top: 12px; display: grid; gap: 5px; }
.ms-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #fff; font-size: 10px; }
.ms-row b { min-width: 34px; }
.ms-row small { flex: 1; color: var(--muted); }
.ms-row em { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: #1f8a5a; }
.ms-row.is-hot { animation: lp-hot 7s infinite; }
.ms-row.is-hot em { animation: lp-press 7s infinite; animation-delay: -1.1s; }
.ms-msg { position: absolute; left: 22px; right: 22px; bottom: 44px; padding: 8px 10px; border-radius: 12px 12px 2px 12px; background: #d9fdd3; font-size: 10px; font-weight: 700; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .4);
    opacity: 0; animation: lp-msg2 7s var(--ease-spring) infinite; }
.ms-back { position: absolute; left: 50%; bottom: 10px; display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 99px; font-size: 10px; font-weight: 800; color: #fff; background: #2f9a57;
    white-space: nowrap; transform: translateX(-50%); opacity: 0; animation: lp-back 7s var(--ease-spring) infinite; }
@keyframes lp-hot { 0%, 18% { box-shadow: none; } 22%, 92% { box-shadow: 0 0 0 2px #e0628a; } 100% { box-shadow: none; } }
@keyframes lp-msg2 { 0%, 30% { opacity: 0; transform: translateY(14px); } 36%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lp-back { 0%, 58% { opacity: 0; transform: translate(-50%, 14px) scale(.9); } 64%, 92% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* 7. Reseñas en Google: «Entregado», toca «Calificar en Google» y se llenan las 5 estrellas */
.lp-review { background: linear-gradient(135deg, #fff8e1, #ffeab0); }
.rv-card { position: absolute; left: 50%; top: 14px; width: 190px; margin-left: -95px; display: grid; justify-items: center; gap: 8px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 12px 22px -16px rgba(0, 0, 0, .5); }
.rv-done { font-weight: 800; color: #1f7a45; font-size: 11px; }
.rv-stars { display: flex; gap: 4px; font-size: 18px; color: #e3dccf; }
.rv-stars i { animation: lp-star 7s infinite; animation-delay: calc(var(--s) * .3s); }
.rv-btn { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 99px; font-size: 10px; font-weight: 800; color: #fff; background: #1a73e8; animation: lp-press 7s infinite; animation-delay: -1.9s; }
.rv-thanks { font-size: 12px; color: var(--espresso); opacity: 0; animation: lp-thanks 7s infinite; }
@keyframes lp-star { 0%, 30% { color: #e3dccf; transform: none; } 34% { color: #fbbc04; transform: scale(1.35); } 38%, 92% { color: #fbbc04; transform: none; } 100% { color: #e3dccf; } }
@keyframes lp-thanks { 0%, 60% { opacity: 0; } 66%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* 8. De dónde llegan: las barras crecen por canal */
.lp-sources { background: linear-gradient(135deg, #eaf1fb, #d9e6f7); }
.sr-chart { position: absolute; left: 22px; right: 22px; top: 18px; bottom: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: end; }
.sr-bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.sr-bar i { display: block; width: 100%; height: var(--h); border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #8b5ba0, #5e3a70); transform-origin: bottom; transform: scaleY(0);
    animation: lp-bar 7s var(--ease-out) infinite; animation-delay: var(--d); }
.sr-bar:nth-child(2) i { background: linear-gradient(180deg, #6fb7e8, #2b8fd6); }
.sr-bar:nth-child(3) i { background: linear-gradient(180deg, #6fcf8d, #2f9a57); }
.sr-bar:nth-child(4) i { background: linear-gradient(180deg, #f8a65a, #eb7115); }
.sr-bar small { margin-top: 4px; font-size: 9.5px; font-weight: 800; color: var(--cocoa); }
@keyframes lp-bar { 0% { transform: scaleY(0); } 18%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0); } }

@media (prefers-reduced-motion: reduce) {
    .lp-scene *, .lp-scene *::before, .lp-scene *::after { animation: none !important; }
    .pr-paper { clip-path: none; }
    .pr-stuck, .hm-new, .wc-disc, .ly-stamps > i > i, .ly-gift, .cp-row, .cp-msg, .ms-msg, .ms-back, .rv-thanks, .wc-total .t2 { opacity: 1 !important; max-height: none !important; transform: none !important; }
    .ms-back { transform: translateX(-50%) !important; }
    .wc-chip, .wc-total .t1 { display: none; }
    .rv-stars i { color: #fbbc04; }
    .sr-bar i { transform: none; }
    .hm-sheet { display: none; }
}

/* =====================================================================================================================
   Pedidos con IA (/pedidos-con-ia) y Reparto propio (/reparto-propio): pantallas del celular (.ax-* el chat con su asistente,
   .dv-* la liga del repartidor, el rastreo y el mapa del equipo). Mismas reglas: arrancan cuando la pantalla aparece.
   ===================================================================================================================== */
.t-ai { --sl-a: #a9a5ff; --sl-b: #6c5ce7; --sl-c: #4532b8; --sl-glow: rgba(108, 92, 231, .32); }
.t-fleet { --sl-a: #7cc8f0; --sl-b: #1f7fc4; --sl-c: #0f5a92; --sl-glow: rgba(31, 127, 196, .3); }

/* Chat con su asistente */
.ss-ask, .ss-found, .ss-quote, .ss-aipay { background: #f6f5fb; }
.ax-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; height: 86px; padding: 44px 14px 0; display: flex; align-items: center; gap: 9px; background: #fff; border-bottom: 1px solid #ebe8f5; }
.ax-top b { display: block; font-size: .8rem; line-height: 1.1; }
.ax-top small { font-size: .62rem; font-weight: 700; color: #2f9a57; }
.ax-av { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: .85rem; background: linear-gradient(135deg, #8f7bff, #6c5ce7 55%, #ff7a59); }
.ax-av::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgba(108, 92, 231, .35); animation: ax-breathe 2.4s ease-in-out infinite; }
@keyframes ax-breathe { 50% { transform: scale(1.15); opacity: .2; } }
.ax-chat { position: absolute; top: 96px; left: 10px; right: 10px; display: flex; flex-direction: column; gap: 7px; }
.ax-u, .ax-a { max-width: 86%; padding: 8px 11px; font-size: .73rem; line-height: 1.35; }
.ax-u { align-self: flex-end; border-radius: 16px 16px 4px 16px; color: #fff; font-weight: 600; background: linear-gradient(135deg, var(--sl-b, #6c5ce7), var(--sl-c, #4532b8)); }
.ax-a { align-self: flex-start; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid #ebe8f5; box-shadow: 0 2px 6px rgba(40, 30, 90, .06); }
.ax-tool { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 99px; font-size: .62rem; font-weight: 700; color: #4532b8; background: #ebe8fd; }
.ax-tool b { font-weight: 800; }
.ax-pin { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.ax-pin img { width: 12px; height: auto; animation: ax-hop .5s ease-in-out infinite alternate; }
@keyframes ax-hop { to { transform: translateY(-2px) rotate(6deg); } }
.ax-pin::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--sl-b, #6c5ce7); border-right-color: var(--sl-b, #6c5ce7);
    animation: ss-rot .7s linear infinite, ss-out .15s var(--done, 99s) forwards; }
.ax-ok { color: #2f9a57; font-size: .8rem; opacity: 0; animation: ss-in .2s var(--done, 99s) forwards; }
.ax-sent, .ax-tool, .ax-reply, .ax-card, .ax-receipt, .ax-ask2, .ax-yes, .ax-m1, .ax-link { opacity: 0; animation: ss-in-up .35s var(--at, 0s) var(--ease-spring) forwards; }
.ax-tool .ax-pin img, .ax-live .ax-pin img { animation-play-state: running; }
/* Le pide: escribe, envía y el asistente usa Click2Bite. */
.ax-input { position: absolute; left: 10px; right: 10px; bottom: 16px; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 99px; background: #fff;
    border: 1px solid #e3dff3; box-shadow: 0 8px 20px -14px rgba(40, 30, 90, .5); font-size: .72rem; }
.ax-typed { flex: 1; min-width: 0; max-width: 0; overflow: hidden; white-space: nowrap; animation: ss-type 1s .2s steps(28, end) forwards, ss-out .1s 1.35s forwards; }
.ax-send { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; margin-left: auto; border-radius: 50%; color: #fff; background: #c9c4e6; animation: ax-send .2s 1.1s forwards, ss-press .3s 1.25s; }
@keyframes ax-send { to { background: var(--sl-b, #6c5ce7); } }
.f-send { left: auto; top: auto; right: 13px; bottom: 19px; margin: 0; animation: ss-tap .6s 1.05s forwards; }
.ss-ask .ax-sent { --at: 1.4s; }
.ss-ask .t1 { --at: 1.7s; --done: 2.3s; }
.ss-ask .t2 { --at: 2.35s; --done: 2.85s; }
.ss-ask .ax-reply { --at: 3s; }
.ax-conn { position: absolute; left: 50%; bottom: 66px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 99px; transform: translateX(-50%);
    white-space: nowrap; font-size: .62rem; font-weight: 800; color: #4532b8; background: #fff; border: 1px solid #e3dff3; }
.ax-conn .ax-pin::after { display: none; }
.ax-conn i { color: #2f9a57; }
/* Encuentra el menú en vivo: el asistente elige lo que pidió; lo agotado no se ofrece. */
.ax-card { --at: .2s; width: 92%; max-width: none; padding: 10px; }
.ax-store { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px dashed #e3dff3; }
.ax-store .ss-logo { width: 30px; height: 30px; font-size: .68rem; color: #fff; background: linear-gradient(135deg, #f8a65a, #b9520c); }
.ax-store b { display: block; font-size: .78rem; }
.ax-store small { font-size: .6rem; color: var(--muted); }
.ax-store .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #2f9a57; }
.ax-row { position: relative; display: flex; align-items: center; gap: 7px; padding: 5px 4px; border-radius: 10px; opacity: 0; animation: ss-in-up .3s var(--ease-out) forwards; }
.ax-row.i1 { animation-delay: .55s; } .ax-row.i2 { animation-delay: .7s; } .ax-row.i3 { animation-delay: .85s; }
.ax-row .ss-ico { width: 28px; height: 28px; border-radius: 9px; font-size: .9rem; color: #b9520c; }
.ax-row .nm { flex: 1; min-width: 0; font-size: .7rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-row b { font-size: .7rem; }
.ax-row em { padding: 1px 6px; border-radius: 99px; font-size: .56rem; font-weight: 800; }
.ax-pick { color: #fff; background: #2f9a57; opacity: 0; transform: scale(0); }
.ax-row.i1 .ax-pick { animation: ax-pop .35s 1.45s var(--ease-spring) forwards; }
.ax-row.i2 .ax-pick { animation: ax-pop .35s 1.8s var(--ease-spring) forwards; }
.ax-row.i1 { animation: ss-in-up .3s .55s var(--ease-out) forwards, ax-flash .6s 1.4s; }
.ax-row.i2 { animation: ss-in-up .3s .7s var(--ease-out) forwards, ax-flash .6s 1.75s; }
@keyframes ax-pop { to { opacity: 1; transform: none; } }
@keyframes ax-flash { 40% { background: #efedfb; } }
.ax-row.is-out .nm, .ax-row.is-out b { color: var(--muted); text-decoration: line-through; }
.ax-out { color: #8a6f5c; background: var(--cream-2); }
.ax-live { --at: 2.3s; }
.ax-live .ax-pin::after { display: none; }
/* Total exacto: aparece cada línea, se confirma y se crea el pedido. */
.ax-receipt { --at: .2s; width: 92%; max-width: none; display: grid; gap: 5px; padding: 10px 12px; }
.ax-rh { font-size: .62rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ax-receipt .r { display: flex; justify-content: space-between; gap: 8px; font-size: .72rem; opacity: 0; animation: ss-in-up .3s var(--ease-out) forwards; }
.ax-receipt .r1 { animation-delay: .45s; } .ax-receipt .r2 { animation-delay: .65s; } .ax-receipt .r3 { animation-delay: .85s; color: var(--muted); }
.ax-receipt .rt { padding-top: 6px; border-top: 1px dashed #e3dff3; font-weight: 800; font-size: .86rem; animation: ss-in-up .3s 1.1s var(--ease-out) forwards, ax-flash .8s 1.3s; }
.ax-ask2 { --at: 1.5s; }
.ax-yes { --at: 2.1s; }
.ss-quote .t3 { --at: 2.5s; --done: 3.05s; }
/* Paga en su página segura: toca la liga, sube la hoja de pago y queda pagado. */
.ax-m1 { --at: .2s; }
.ax-link { --at: .6s; display: flex; align-items: center; gap: 9px; border-color: #d9d3f5; }
.ax-link b { display: block; font-size: .72rem; }
.ax-link small { font-size: .6rem; color: var(--muted); }
.ax-lock { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #6fcf8d, #237a44); }
.f-link { left: 70px; top: 112px; animation: ss-tap .6s 1s forwards; }
.ax-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 16px 16px 76px; border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -12px 30px rgba(40, 30, 90, .18);
    transform: translateY(105%); animation: ss-slide-up .5s 1.3s var(--ease-out) forwards; }
.ax-sheet-h { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ax-sheet-h .ss-logo { color: #fff; background: linear-gradient(135deg, #f8a65a, #b9520c); }
.ax-sheet-h b { display: block; font-size: .85rem; }
.ax-sheet-h small { font-size: .66rem; color: var(--muted); }
.ax-wallets { display: grid; grid-template-columns: 1fr 1fr .6fr; gap: 6px; margin-bottom: 10px; }
.ax-wallets span { display: grid; place-items: center; padding: 8px 0; border-radius: 10px; font-size: .74rem; font-weight: 800; color: #fff; background: #111; }
.ax-wallets span:last-child { color: var(--espresso); background: var(--cream-2); }
.ax-paybtn { position: relative; display: grid; place-items: center; height: 44px; border-radius: 14px; color: #fff; font-weight: 800; font-size: .82rem; background: var(--sl-b, #6c5ce7);
    animation: ss-press .3s 1.75s ease-in-out, ax-paid .3s 2.4s forwards; }
.ax-paybtn .lbl { animation: ss-out .1s 1.9s forwards; }
.ax-paybtn .spin { position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; opacity: 0;
    animation: ss-in .1s 1.9s forwards, ss-rot .7s linear infinite, ss-out .1s 2.4s forwards; }
.ax-paybtn .ok { position: absolute; display: flex; align-items: center; gap: 4px; opacity: 0; animation: ss-in-up .3s 2.45s var(--ease-spring) forwards; }
@keyframes ax-paid { to { background: #2f9a57; } }
.ss-aipay .ss-toast { z-index: 6; animation-delay: 2.8s; }
/* Campana: el ticket dice de dónde llegó */
.ss-src { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 8px; border-radius: 99px; font-size: .64rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #8f7bff, #6c5ce7); }

/* Repartidor: escanea el QR del pedido en la pantalla de pedidos */
.ss-dscan { background: #1b100a; color: #fff; }
.dv-ticket { position: absolute; top: 78px; left: 14px; right: 14px; padding: 14px; border-radius: 20px; color: var(--espresso); background: #fff; animation: ss-in-up .45s .1s var(--ease-out) both; }
.dv-th { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .9rem; }
.dv-ready { padding: 2px 8px; border-radius: 99px; font-size: .62rem; font-weight: 800; color: #7a4a00; background: #fff3d6; }
.dv-ticket > small { display: block; margin: 3px 0 12px; font-size: .7rem; color: var(--muted); }
.dv-qr { position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin: 0 auto; border-radius: 14px; font-size: 7.4rem; line-height: 1; background: #fff; border: 1px solid var(--line); }
.dv-frame { position: absolute; inset: -12px; opacity: 0; animation: ss-in .1s .55s forwards, ss-focus .7s .55s ease-out both; }
.dv-frame .c { position: absolute; width: 26px; height: 26px; border: 4px solid var(--sl-b, #1f7fc4); animation: ss-locked .3s 2s forwards; }
.dv-frame .tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.dv-frame .tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.dv-frame .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.dv-frame .br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.dv-scan { position: absolute; left: 10px; right: 10px; top: 14px; height: 3px; border-radius: 3px; background: #3ad07a; box-shadow: 0 0 14px #3ad07a; opacity: 0; animation: ss-in .1s .9s forwards, dv-scan .5s .9s ease-in-out 2 alternate; }
@keyframes dv-scan { to { top: 156px; } }
.dv-ticket > .dv-cap { display: block; margin: 24px 0 0; text-align: center; font-size: .66rem; color: var(--muted); }
.ss-dscan .ss-toast { color: var(--espresso); animation-delay: 2.3s; }
/* Su liga: «Iniciar recorrido» → «En camino» y comparte su ubicación */
.ss-driver, .ss-done { background: #f3f7fb; }
.dv-head { position: absolute; top: 0; left: 0; right: 0; height: 160px; padding: 48px 16px 0; color: #fff; background: radial-gradient(220px 120px at 90% 10%, rgba(255, 255, 255, .25), transparent 70%), linear-gradient(160deg, var(--sl-b, #1f7fc4), var(--sl-c, #0f5a92)); }
.dv-head small { display: block; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.dv-head strong { display: block; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.15; }
.dv-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 3px 9px; border-radius: 99px; font-size: .62rem; font-weight: 800; background: rgba(255, 255, 255, .2); }
.dv-card { position: absolute; top: 132px; left: 12px; right: 12px; display: grid; gap: 4px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 14px 28px -18px rgba(15, 50, 90, .5); animation: ss-in-up .45s .15s var(--ease-out) both; }
.dv-card .dv-th { font-size: .82rem; }
.dv-addr { font-size: .76rem; font-weight: 700; }
.dv-addr i { color: #d93025; }
.dv-ref { font-size: .64rem; color: var(--muted); }
.dv-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.dv-nav span { display: grid; place-items: center; padding: 6px 0; border-radius: 10px; font-size: .64rem; font-weight: 800; color: var(--espresso); background: #eef3f8; }
.dv-nav .wa { color: #fff; background: #1f8a5a; }
.dv-go { position: absolute; top: 300px; left: 12px; right: 12px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: #fff; font-weight: 800; font-size: .9rem;
    background: var(--sl-b, #1f7fc4); box-shadow: 0 14px 26px -14px rgba(31, 127, 196, .8); animation: ss-press .3s 1.2s ease-in-out, dv-going .3s 1.35s forwards; }
.dv-go .g2 { position: absolute; display: flex; align-items: center; gap: 6px; opacity: 0; animation: ss-in .2s 1.35s forwards; }
.dv-go .g1 { animation: ss-out .15s 1.3s forwards; }
@keyframes dv-going { to { background: #2f9a57; box-shadow: 0 14px 26px -14px rgba(47, 154, 87, .8); } }
.f-go { left: 50%; top: 26px; animation: ss-tap .6s 1s forwards; }
.dv-gps { position: absolute; top: 368px; left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid #dfe9f2;
    opacity: 0; animation: ss-in-up .4s 1.7s var(--ease-spring) forwards; }
.dv-gps b { display: block; font-size: .74rem; }
.dv-gps small { font-size: .64rem; color: #2f9a57; font-weight: 700; }
.dv-gps .dot { position: relative; flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: #1a73e8; box-shadow: 0 0 0 4px rgba(26, 115, 232, .2); }
.dv-gps .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #1a73e8; animation: ss-ring 1.2s ease-out infinite; }
.dv-end { position: absolute; left: 12px; right: 12px; bottom: 26px; display: flex; justify-content: center; align-items: center; gap: 6px; padding: 12px; border-radius: 16px;
    font-weight: 800; font-size: .84rem; color: #2f9a57; background: #fff; border: 2px solid #2f9a57; opacity: 0; animation: ss-in-up .4s 2.3s var(--ease-out) forwards; }
/* Su cliente lo ve llegar: la ruta, la moto y «¡Está llegando!» */
.ss-live { background: #f3f7fb; }
.dv-ltop { position: absolute; top: 42px; left: 10px; right: 10px; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 16px; background: #fff; box-shadow: 0 8px 18px -12px rgba(15, 50, 90, .45); }
.dv-ltop .ss-logo { width: 30px; height: 30px; font-size: .68rem; color: #fff; background: linear-gradient(135deg, #f8a65a, #b9520c); }
.dv-ltop div { flex: 1; min-width: 0; }
.dv-ltop b { display: block; font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-ltop small { font-size: .62rem; color: var(--muted); }
.dv-pill { padding: 3px 9px; border-radius: 99px; font-size: .62rem; font-weight: 800; color: #fff; background: var(--sl-b, #1f7fc4); }
.ss-map.is-live { inset: 0 0 138px 0; }
.ss-live .ss-route-box { top: 96px; }
.ss-live .ss-route path { stroke: var(--sl-b, #1f7fc4); }
.ss-live .ss-moto { background: var(--sl-b, #1f7fc4); animation-duration: 2.5s; }
.ss-live .ss-moto::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(31, 127, 196, .5); animation: ss-ring 1.1s ease-out infinite; }
.dv-origin { position: absolute; left: 30px; top: 250px; width: 26px; margin: -34px 0 0 -13px; }
.dv-origin img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25)); }
.ss-live .ss-home { animation: ss-press .4s 3.15s, dv-arrive .5s 3.1s forwards; }
@keyframes dv-arrive { to { background: #1f7fc4; box-shadow: 0 0 0 6px rgba(31, 127, 196, .25); } }
.dv-eta { position: absolute; left: 0; right: 0; bottom: 0; height: 138px; padding: 16px 16px; border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -8px 20px rgba(0, 0, 0, .1); }
.dv-eta small { font-size: .66rem; font-weight: 800; color: var(--sl-b, #1f7fc4); }
.dv-eta strong { position: relative; display: block; height: 1.7rem; margin: 4px 0 10px; font-family: var(--font-display); font-size: 1.3rem; }
.dv-eta .e1, .dv-eta .e2 { position: absolute; left: 0; top: 0; white-space: nowrap; }
.dv-eta .e1 { animation: ss-out .2s 3s forwards; }
.dv-eta .e2 { color: #2f9a57; opacity: 0; animation: ss-in-up .35s 3.1s var(--ease-spring) forwards; }
.dv-bar { display: block; height: 8px; border-radius: 99px; background: #e6eef6; overflow: hidden; }
.dv-bar i { display: block; height: 100%; width: 12%; border-radius: inherit; background: linear-gradient(90deg, var(--sl-a, #7cc8f0), var(--sl-b, #1f7fc4)); animation: dv-fill 2.5s .7s ease-in-out forwards; }
@keyframes dv-fill { to { width: 100%; } }
/* El mapa de tu equipo: tu negocio (el Pin), las motos en camino y quién va llegando */
.ss-fleet { background: #f3f7fb; }
.dv-ftop { position: absolute; top: 42px; left: 10px; right: 10px; z-index: 4; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 14px; background: #fff;
    font-size: .76rem; box-shadow: 0 8px 18px -12px rgba(15, 50, 90, .45); }
.dv-ftop i { color: var(--sl-b, #1f7fc4); }
.ss-map.is-fleet { inset: 0 0 170px 0; }
.dv-routes { position: absolute; left: 0; top: 0; overflow: visible; }
.dv-routes path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 7; }
.dv-routes .r1 { stroke: #1f7fc4; } .dv-routes .r2 { stroke: #e0628a; } .dv-routes .r3 { stroke: #9a8f84; }
.dv-biz { position: absolute; left: 133px; top: 236px; width: 30px; margin: -40px 0 0 -15px; z-index: 2; animation: dv-bob 1.6s ease-in-out infinite alternate; }
.dv-biz img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .3)); }
.dv-biz::before { content: ""; position: absolute; left: 50%; bottom: -6px; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; border: 2px solid rgba(235, 113, 21, .55); animation: ss-ring 1.6s ease-out infinite; }
@keyframes dv-bob { to { transform: translateY(-4px); } }
.dv-home { position: absolute; display: grid; place-items: center; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 8px; color: #fff; font-size: .7rem; background: #2f9a57; }
.dv-home.h1 { left: 58px; top: 126px; } .dv-home.h2 { left: 220px; top: 146px; } .dv-home.h3 { left: 204px; top: 336px; background: #9a8f84; }
.dv-m { position: absolute; left: 0; top: 0; z-index: 3; display: grid; place-items: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; color: #fff; font-size: .85rem;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .3); offset-rotate: 0deg; }
.dv-m b { position: absolute; left: 50%; bottom: 100%; margin-bottom: 3px; padding: 1px 6px; border-radius: 99px; transform: translateX(-50%); font-size: .56rem; font-weight: 800; white-space: nowrap; color: var(--espresso); background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.dv-m.m1 { background: #1f7fc4; offset-path: path("M133 236 C 110 196, 70 176, 58 126"); offset-distance: 10%; animation: dv-ride1 3.4s .3s ease-in-out forwards; }
.dv-m.m2 { background: #e0628a; offset-path: path("M133 236 C 160 206, 212 196, 220 146"); offset-distance: 70%; animation: dv-ride2 2.6s .3s ease-in-out forwards; }
.dv-m.m3 { background: #9a8f84; offset-path: path("M133 236 C 150 276, 190 296, 204 336"); offset-distance: 30%; animation: dv-wait 1s ease-in-out infinite alternate; }
.dv-m.m3 b { left: 100%; bottom: auto; top: 50%; margin: 0 0 0 4px; transform: translateY(-50%); }
@keyframes dv-ride1 { to { offset-distance: 72%; } }
@keyframes dv-ride2 { to { offset-distance: 96%; } }
@keyframes dv-wait { to { transform: scale(1.12); } }
.dv-list { position: absolute; left: 10px; right: 10px; bottom: 14px; display: grid; gap: 6px; }
.dv-list div { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: #fff; font-size: .7rem; box-shadow: 0 4px 10px -8px rgba(0, 0, 0, .35); opacity: 0; animation: ss-in-up .35s var(--ease-out) forwards; }
.dv-list .l1 { animation-delay: .4s; } .dv-list .l2 { animation-delay: .55s; } .dv-list .l3 { animation-delay: .7s; }
.dv-list i { width: 10px; height: 10px; border-radius: 50%; }
.dv-list .l1 i { background: #1f7fc4; } .dv-list .l2 i { background: #e0628a; } .dv-list .l3 i { background: #9a8f84; }
.dv-list span { margin-left: auto; color: var(--muted); font-weight: 700; }
.dv-list .l2 span { color: #2f9a57; }
/* «Entregado»: lo toca, se confirma y queda el recorrido */
.dv-head.is-done { height: 150px; }
.dv-head.is-done strong { font-size: 1.05rem; }
.dv-endbtn { position: absolute; top: 116px; left: 12px; right: 12px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: #fff; font-weight: 800; font-size: .9rem; background: #2f9a57;
    box-shadow: 0 14px 26px -14px rgba(47, 154, 87, .8); animation: ss-press .3s .75s ease-in-out, ss-out .3s 1.05s forwards; }
.dv-endbtn > span:first-child { display: flex; align-items: center; gap: 6px; }
.f-end { left: 50%; top: 26px; animation: ss-tap .6s .55s forwards; }
.dv-donebox { top: 196px; animation-delay: 1.1s; }
.dv-donebox .ss-check { animation-delay: 1.1s; }
.dv-stats { position: absolute; top: 396px; left: 24px; right: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; opacity: 0; animation: ss-in-up .4s 1.7s var(--ease-out) forwards; }
.dv-stats span { padding: 10px; border-radius: 14px; text-align: center; background: #fff; border: 1px solid #dfe9f2; }
.dv-stats b { display: block; font-family: var(--font-display); font-size: 1.1rem; }
.dv-stats small { font-size: .64rem; color: var(--muted); }
.ss-done .ss-toast { animation-delay: 2.3s; }

@media (prefers-reduced-motion: reduce) {
    .ax-sent, .ax-tool, .ax-reply, .ax-card, .ax-receipt, .ax-ask2, .ax-yes, .ax-m1, .ax-link, .ax-row, .ax-receipt .r, .ax-ok, .ax-pick, .dv-frame, .dv-gps, .dv-end, .dv-list div, .dv-stats, .dv-eta .e2, .ax-paybtn .ok, .dv-go .g2 { opacity: 1 !important; transform: none !important; }
    .ax-typed, .ax-input .ss-finger, .ax-paybtn .lbl, .ax-paybtn .spin, .dv-go .g1, .dv-eta .e1, .dv-endbtn, .dv-scan, .ax-pin::after { display: none !important; }
    .ax-sheet { transform: none !important; }
    .ax-paybtn { background: #2f9a57; }
    .dv-go { background: #2f9a57; }
    .dv-bar i { width: 100%; }
    .dv-m.m1 { offset-distance: 72%; } .dv-m.m2 { offset-distance: 96%; }
}

/* =====================================================================================================================
   Pedidos con IA: «por dentro». La plática avanza sola (soluciones.js pone .is-in / .is-done a cada pieza en su tiempo),
   el Pin lleva el pedido a la tablet del negocio, y las 5 acciones del asistente con el Pin recorriéndolas.
   ===================================================================================================================== */
.ia .mk-head h2, .rp .mk-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.ia-stage { position: relative; display: grid; gap: 0; margin-top: 12px; }
@media (min-width: 992px) { .ia-stage { grid-template-columns: minmax(0, 1.12fr) 150px minmax(0, .88fr); align-items: center; } }
.ia-win { position: relative; z-index: 1; border-radius: 26px; background: #fff; border: 1px solid #e6e2f4; overflow: hidden; box-shadow: 0 50px 90px -50px rgba(40, 30, 90, .55); }
.ia-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #f6f5fb; border-bottom: 1px solid #ebe8f5; }
.ia-bar > i { width: 11px; height: 11px; border-radius: 50%; background: #f26b5b; }
.ia-bar > i:nth-child(2) { background: #f5bf4f; } .ia-bar > i:nth-child(3) { background: #4cc46a; }
.ia-bar > span { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; font-weight: 800; font-size: .9rem; color: var(--espresso); }
.ia-bar .ax-av { width: 26px; height: 26px; font-size: .72rem; }
.ia-msgs { height: 440px; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 18px 20px; overflow: hidden; background: #faf9fe; transition: opacity .5s; }
.ia-msgs .m { margin: 0; padding: 0 14px; max-height: 0; opacity: 0; overflow: hidden; font-size: .95rem; line-height: 1.4; transform: translateY(12px) scale(.97);
    transition: max-height .5s var(--ease-out), padding .5s var(--ease-out), margin .5s var(--ease-out), opacity .35s, transform .5s var(--ease-spring); }
.ia-msgs .m.is-in { max-height: 170px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; opacity: 1; transform: none; }
.ia-msgs .u { align-self: flex-end; max-width: 78%; border-radius: 20px 20px 5px 20px; color: #fff; font-weight: 600; background: linear-gradient(135deg, #7d6cf0, #4532b8); }
.ia-msgs .a { align-self: flex-start; max-width: 84%; border-radius: 20px 20px 20px 5px; background: #fff; box-shadow: 0 0 0 1px #ebe8f5, 0 4px 10px rgba(40, 30, 90, .06); }
.ia-msgs .t { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding-left: 5px; border-radius: 99px; font-size: .82rem; font-weight: 700; color: #4532b8; background: #ebe8fd; }
.ia-msgs .t.is-in { padding: 5px 14px 5px 5px; }
.ia-msgs .t b { font-weight: 800; }
.ia .ax-pin { width: 26px; height: 26px; }
.ia .ax-pin img { width: 14px; }
.ia .ax-pin::after { animation: ss-rot .7s linear infinite; transition: opacity .2s; }
.ia-msgs .t .ok { color: #2f9a57; opacity: 0; transition: opacity .25s; }
.ia-msgs .t.is-done .ok { opacity: 1; }
.ia-msgs .t.is-done .ax-pin::after { opacity: 0; }
.ia-msgs .pay { display: flex; align-items: center; gap: 10px; }
.ia-msgs .pay small { display: block; font-size: .74rem; color: var(--muted); }
.ia-msgs .pay .paid { margin-left: 6px; padding: 3px 9px; border-radius: 99px; font-size: .74rem; font-weight: 800; color: #fff; background: #2f9a57; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s var(--ease-spring); }
.ia-msgs .pay.is-done .paid { opacity: 1; transform: none; }
.ia-stage em { font-style: normal; }
.ia-stage.is-reset .ia-msgs, .ia-stage.is-reset .ia-ticket, .ia-stage.is-reset .ia-rider { opacity: 0 !important; transition: opacity .5s; }

/* El puente: una línea que fluye y el Pin que lleva el pedido a la tablet */
.ia-beam { position: relative; height: 110px; }
@media (min-width: 992px) { .ia-beam { height: 100%; min-height: 200px; } .ia-tab { min-height: 470px; } }
.ia-line { position: absolute; left: 50%; top: 10px; bottom: 10px; width: 4px; margin-left: -2px; border-radius: 4px;
    background: repeating-linear-gradient(180deg, rgba(108, 92, 231, .55) 0 8px, transparent 8px 16px); background-size: 4px 32px; animation: ia-flow-y 1s linear infinite; }
@keyframes ia-flow-y { to { background-position: 0 32px; } }
.ia-rider { position: absolute; left: 50%; top: 0; z-index: 3; display: grid; justify-items: center; width: 48px; margin-left: -24px; }
.ia-rider img { display: block; width: 40px; height: auto; filter: drop-shadow(0 10px 8px rgba(42, 27, 18, .3)); animation: sl-bob 2.4s ease-in-out infinite; }
.ia-rider b { margin-top: -6px; padding: 1px 8px; border-radius: 99px; font-size: .68rem; font-weight: 800; color: #fff; background: #2f9a57; opacity: 0; transition: opacity .25s; }
.ia-beam.is-in .ia-rider { animation: ia-drop 1.1s var(--ease-out) forwards; }
.ia-beam.is-in .ia-rider b { opacity: 1; }
@keyframes ia-drop { 0% { top: 0; } 45% { transform: translateY(-14px) rotate(-8deg); } 100% { top: calc(100% - 64px); transform: none; } }
@media (min-width: 992px) {
    .ia-line { left: 6px; right: 6px; top: 50%; bottom: auto; width: auto; height: 4px; margin: -2px 0 0;
        background: repeating-linear-gradient(90deg, rgba(108, 92, 231, .55) 0 8px, transparent 8px 16px); background-size: 32px 4px; animation-name: ia-flow-x; }
    @keyframes ia-flow-x { to { background-position: 32px 0; } }
    .ia-rider { left: 0; top: 50%; margin: -70px 0 0; }
    .ia-beam.is-in .ia-rider { animation-name: ia-ride; }
    @keyframes ia-ride { 0% { left: 0; } 45% { transform: translateY(-34px) rotate(10deg); } 85% { transform: translateY(4px) scale(1.05, .94); } 100% { left: calc(100% - 48px); transform: none; } }
}

/* La tablet del negocio: llega el pedido, suena, se acepta y suma en el contador */
.ia-tab { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 360px; padding: 16px; border-radius: 30px; color: #fff; background: #1b100a;
    box-shadow: 0 50px 90px -45px rgba(42, 27, 18, .7), inset 0 0 0 2px #3a2a20; }
.ia-tab-top { display: flex; align-items: center; justify-content: space-between; font-size: .82rem; font-weight: 800; opacity: .92; }
.ia-tab-top .dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #3ad07a; }
.ia-bell { color: var(--saffron); font-size: 1.1rem; display: inline-block; transform-origin: 50% 10%; }
.ia-tab:has(.ia-ticket.is-in) .ia-bell { animation: ill-ring 1.1s ease-in-out 2; }
.ia-idle { flex: 1; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; font-size: .86rem; color: rgba(255, 255, 255, .55); transition: opacity .3s; }
.ia-idle i { font-size: 1.8rem; }
.ia-tab:has(.ia-ticket.is-in) .ia-idle { opacity: 0; }
.ia-ticket { position: absolute; left: 16px; right: 16px; top: 64px; display: grid; gap: 4px; padding: 16px; border-radius: 22px; color: var(--espresso); background: #fff;
    opacity: 0; transform: translateX(60px) scale(.94); transition: transform .6s var(--ease-spring), opacity .35s; }
.ia-ticket.is-in { opacity: 1; transform: none; animation: ia-ringglow 1.1s ease-out 2; }
@keyframes ia-ringglow { from { box-shadow: 0 0 0 0 rgba(242, 163, 58, .7); } to { box-shadow: 0 0 0 22px rgba(242, 163, 58, 0); } }
.ia-ticket .ss-src { justify-self: start; }
.ia-ticket b { font-size: 1.1rem; }
.ia-ticket small { font-size: .82rem; color: var(--muted); }
.ia-total { justify-self: start; display: inline-flex; gap: 5px; align-items: center; margin-top: 2px; padding: 3px 10px; border-radius: 99px; font-size: .8rem; font-weight: 800; color: #1d5230; background: #e3f4e7; }
.ia-acc { position: relative; display: block; margin-top: 8px; padding: 11px; border-radius: 14px; text-align: center; font-weight: 800; color: #fff; background: #2f9a57; transition: background .3s; }
.ia-acc .a2 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; opacity: 0; transition: opacity .2s; }
.ia-ticket.is-done .ia-acc { background: #1f6b3d; animation: ss-press .3s; }
.ia-ticket.is-done .a1 { opacity: 0; }
.ia-ticket.is-done .a2 { opacity: 1; }
.ia-kpi { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .07); }
.ia-kpi small { font-size: .76rem; color: rgba(255, 255, 255, .7); }
.ia-kpi b { position: relative; display: inline-block; width: 2.2em; height: 1.3em; overflow: hidden; font-family: var(--font-display); font-size: 1.5rem; color: #b8adff; text-align: right; }
.ia-kpi b span { position: absolute; right: 0; top: 0; transition: transform .45s var(--ease-spring), opacity .3s; }
.ia-kpi .k2 { transform: translateY(110%); opacity: 0; }
.ia-kpi.is-in .k1 { transform: translateY(-110%); opacity: 0; }
.ia-kpi.is-in .k2 { transform: none; opacity: 1; }
.ia-kpi.is-in { animation: ia-kpi .8s ease-out; }
@keyframes ia-kpi { 30% { background: rgba(184, 173, 255, .25); } }

/* Las 5 acciones del asistente (el Pin las recorre) */
.ia-flow { margin-top: 56px; }
.ia-track { display: none; }
.ia-flow ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ia-flow li { position: relative; padding: 18px 16px 16px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1);
    animation: ia-lit 10s infinite; animation-delay: calc(var(--i) * 2s); }
.ia-flow strong { display: block; margin-top: 10px; font-size: 1.02rem; }
.ia-flow p { margin: 4px 0 8px; font-size: .86rem; color: var(--cocoa); }
.ia-flow code { font-size: .68rem; color: #6c5ce7; background: #f1effd; padding: 2px 7px; border-radius: 6px; }
.ia-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; font-size: 1.1rem; color: #6c5ce7; background: #f1effd; transition: color .3s, background .3s; }
@keyframes ia-lit { 0%, 13% { border-color: #a99ff5; transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(69, 50, 184, .55); } 19%, 100% { border-color: var(--line); transform: none; box-shadow: var(--shadow-1); } }
@media (min-width: 992px) {
    .ia-flow ol { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .ia-track { display: block; position: relative; height: 6px; margin: 0 10% 54px; border-radius: 99px; background-image: radial-gradient(circle, rgba(108, 92, 231, .45) 1.4px, transparent 1.6px); background-size: 12px 6px; }
    .ia-walker { position: absolute; left: 0; top: -40px; width: 26px; margin-left: -13px; animation: ia-walk 10s infinite; }
    .ia-walker img { display: block; width: 100%; height: auto; animation: sl-walk .45s ease-in-out infinite alternate; }
}
@keyframes ia-walk { 0% { left: 0; opacity: 0; } 3%, 12% { left: 0; opacity: 1; } 20%, 32% { left: 25%; } 40%, 52% { left: 50%; } 60%, 72% { left: 75%; } 80%, 94% { left: 100%; opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* Lo que tú controlas y cómo lo conectan tus clientes */
.ia-controls { display: grid; gap: 14px; margin-top: 40px; }
@media (min-width: 576px) { .ia-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ia-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ia-ctl { padding: 22px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); transition-delay: var(--d, 0ms); }
.ia-ctl h3 { font-size: 1.1rem; margin: 14px 0 6px; }
.ia-ctl p { margin: 0; font-size: .9rem; color: var(--cocoa); }
.ia-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 22px; padding: 24px 26px; border-radius: 26px;
    background: radial-gradient(420px 160px at 0% 0%, rgba(169, 165, 255, .35), transparent 70%), #f4f2fe; border: 1px solid #e3dff6; }
.ia-share > div { flex: 1 1 420px; }
.ia-share strong { display: block; font-family: var(--font-display); font-size: 1.35rem; }
.ia-share p { margin: 6px 0 8px; color: var(--cocoa); }
.ia-share small { color: var(--muted); }

/* =====================================================================================================================
   Reparto propio: el mapa en vivo (SVG con animación nativa), tu equipo con su estado y lo que cuesta.
   ===================================================================================================================== */
.rp-stage { display: grid; gap: 16px; margin-top: 12px; }
@media (min-width: 992px) { .rp-stage { grid-template-columns: minmax(0, 1fr) 330px; align-items: stretch; } }
.rp-map { position: relative; height: 360px; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 50px 90px -50px rgba(15, 50, 90, .55); background: #e8efe3; }
@media (min-width: 768px) { .rp-map { height: 480px; } }
.rp-svg { display: block; width: 100%; height: 100%; }
.rp-ico { font-family: "bootstrap-icons"; font-size: 17px; }
.rp-tagtxt { font-family: var(--font-body, system-ui, sans-serif); font-size: 12px; font-weight: 800; }
.rp-pin { transform-box: fill-box; transform-origin: 50% 100%; animation: rp-bob 1.8s ease-in-out infinite alternate; }
@keyframes rp-bob { to { transform: translateY(-7px) rotate(-3deg); } }
.rp-chip, .rp-live { position: absolute; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; font-size: .8rem; font-weight: 800;
    background: #fff; box-shadow: 0 10px 22px -14px rgba(15, 50, 90, .6); }
.rp-chip { left: 14px; color: var(--espresso); }
.rp-chip > i { color: #1f7fc4; }
.rp-chip .sl-pro { margin-left: 2px; }
.rp-live { right: 14px; color: #c4302b; }
.rp-live i { width: 8px; height: 8px; border-radius: 50%; background: #e53935; animation: rp-blink 1.2s ease-in-out infinite; }
@keyframes rp-blink { 50% { opacity: .25; } }
.rp-side { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.rp-side-t { font-family: var(--font-display); font-size: 1.3rem; }
.rp-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rp-side li { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 18px; background: var(--cream); }
.rp-av { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; font-weight: 800; color: #fff; background: var(--c); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c); }
.rp-who { flex: 1; min-width: 0; }
.rp-who b { display: block; font-size: .98rem; }
.rp-st { position: relative; display: block; height: 1.35em; font-size: .84rem; font-weight: 700; color: var(--cocoa); }
.rp-st > span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; animation: rp-s1 10s infinite; animation-delay: var(--off, 0s); }
.rp-st > .s0 { animation-name: rp-s0; } .rp-st > .s2 { animation-name: rp-s2; } .rp-st > .s3 { animation-name: rp-s3; color: #1f7a45; } .rp-st > .s4 { animation-name: rp-s4; color: #1f7a45; }
.rp-st > .s4::before { content: "✓ "; }
@keyframes rp-s0 { 0%, 7.9% { opacity: 1; } 8%, 100% { opacity: 0; } }
@keyframes rp-s1 { 0%, 7.9% { opacity: 0; } 8%, 34.9% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes rp-s2 { 0%, 34.9% { opacity: 0; } 35%, 61.9% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes rp-s3 { 0%, 61.9% { opacity: 0; } 62%, 69.9% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes rp-s4 { 0%, 69.9% { opacity: 0; } 70%, 99.4% { opacity: 1; } 99.5%, 100% { opacity: 0; } }
.rp-follow { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 8px; border-radius: 99px; font-size: .68rem; font-weight: 800; color: #0f5a92; background: #e3f0fa; }
.rp-side-note { margin: auto 0 0; font-size: .8rem; color: var(--muted); }
.rp-side-note i { color: var(--saffron); }
.rp-cards { display: grid; gap: 14px; margin-top: 30px; }
@media (min-width: 768px) { .rp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rp-card { padding: 24px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); transition-delay: var(--d, 0ms); }
.rp-card h3 { font-size: 1.2rem; margin: 14px 0 10px; }
.rp-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rp-card li { position: relative; padding-left: 26px; font-size: .92rem; color: var(--cocoa); }
.rp-card li::before { content: "\F26A"; position: absolute; left: 0; top: 0; font-family: "bootstrap-icons"; color: #1f7fc4; }
.rp-price { margin-top: 22px; padding: 26px; border-radius: 28px; background: radial-gradient(500px 180px at 100% 0%, rgba(124, 200, 240, .3), transparent 70%), #eef6fc; border: 1px solid #d6e8f5; }
.rp-price h3 { font-size: 1.35rem; margin: 0 0 14px; }
.rp-price-grid { display: grid; gap: 12px; }
@media (min-width: 768px) { .rp-price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rp-price-grid > div { padding: 18px; border-radius: 20px; background: #fff; border: 1px solid #dceaf5; }
.rp-price-grid i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #fff; background: linear-gradient(160deg, #7cc8f0, #1f7fc4 60%, #0f5a92); }
.rp-price-grid strong { display: block; margin: 10px 0 4px; }
.rp-price-grid p { margin: 0; font-size: .9rem; color: var(--cocoa); }

@media (prefers-reduced-motion: reduce) {
    .ia *, .ia *::before, .ia *::after, .rp *, .rp *::before, .rp *::after { animation: none !important; transition: none !important; }
    .ia-msgs .m, .ia-ticket, .ia-msgs .t .ok, .ia-msgs .pay .paid { opacity: 1 !important; transform: none !important; }
    .ia-msgs .m { max-height: none !important; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
    .ia-msgs .t { padding: 5px 14px 5px 5px; }
    .ia-msgs { height: auto; }
    .ia-idle, .ia .ax-pin::after { display: none; }
    .ia-ticket { position: relative; left: auto; right: auto; top: auto; margin-top: 12px; }
    .rp-st > span { opacity: 0; } .rp-st > .is-still { opacity: 1; }
}

/* =====================================================================================================================
   Tu app (/tu-app): el negocio guardado como app en el celular de su cliente. Pantallas del celular (.ap-*).
   El ícono del negocio de ejemplo usa su propio color de marca (uva), como el que Click2Bite genera con su logo o iniciales.
   ===================================================================================================================== */
.t-app { --sl-a: #ff9a5a; --sl-b: #e8505b; --sl-c: #b5294e; --sl-glow: rgba(232, 80, 91, .3); }
.ap-ico { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px; font-weight: 800; font-size: .9rem; color: #fff;
    background: linear-gradient(145deg, #a46fbb, #6b4382); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 12px -6px rgba(60, 30, 80, .6); }
/* 1. Te guarda: «¡Pedido recibido!» y «Guárdanos en tu celular» → Agregar a inicio */
.ss-save, .ss-filled { background: #f7f3fa; }
.ap-top { position: absolute; top: 0; left: 0; right: 0; height: 100px; padding: 46px 16px 0; display: flex; align-items: center; gap: 10px; color: #fff; background: linear-gradient(135deg, #8b5ba0, #5e3a70); }
.ap-top .ss-logo, .ap-brand .ss-logo { width: 34px; height: 34px; color: #5e3a70; }
.ap-top b { display: block; font-size: .86rem; }
.ap-top small { font-size: .66rem; opacity: .85; }
.ap-status { position: absolute; top: 114px; left: 14px; right: 14px; display: grid; justify-items: center; gap: 4px; padding: 18px 14px; border-radius: 20px; text-align: center; background: #fff; animation: ss-in-up .4s .1s both; }
.ap-ok { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: #fff; font-size: 1.6rem; background: linear-gradient(160deg, #6fcf8d, #2f9a57 60%, #237a44); animation: ss-check 1.4s .2s ease-out both; }
.ap-status strong { font-family: var(--font-display); font-size: 1.2rem; }
.ap-status small { font-size: .7rem; color: var(--muted); }
.ap-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; width: 100%; margin-top: 8px; }
.ap-steps i { height: 5px; border-radius: 5px; background: #ece6f0; }
.ap-steps i.on { background: #2f9a57; }
.ap-install { position: absolute; left: 12px; right: 12px; top: 312px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 14px; border-radius: 20px; background: #fff;
    border: 2px solid #e9dff0; box-shadow: 0 18px 34px -20px rgba(94, 58, 112, .6); opacity: 0; animation: ss-in-up .5s .6s var(--ease-spring) forwards; }
.ap-install b { display: block; font-size: .82rem; }
.ap-install small { font-size: .66rem; color: var(--muted); }
.ap-add, .ap-againbtn { grid-column: 1 / -1; position: relative; display: block; padding: 11px; border-radius: 12px; text-align: center; font-weight: 800; font-size: .8rem; color: #fff;
    background: var(--sl-b, #e8505b); animation: ss-press .3s 1.55s ease-in-out, ap-added .3s 1.7s forwards; }
.ap-add .a2, .ap-againbtn .a2 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; opacity: 0; animation: ss-in .2s 1.7s forwards; }
.ap-add .a1, .ap-againbtn .a1 { animation: ss-out .15s 1.65s forwards; }
@keyframes ap-added { to { background: #2f9a57; } }
.f-add, .f-again { left: 50%; top: auto; bottom: 34px; margin: 0 0 -17px -17px; animation: ss-tap .6s 1.3s forwards; }
.ss-save .ss-toast { animation-delay: 2.2s; }
/* 2. Su pantalla de inicio: cae tu ícono entre sus apps, lo toca y se abre */
.ss-homescreen { color: #fff; background: radial-gradient(140% 90% at 15% 0%, #ffb37a 0%, #e8505b 48%, #5e3a70 100%); }
.ap-clock { position: absolute; top: 13px; left: 28px; font-size: .74rem; font-weight: 800; }
.ap-grid { position: absolute; top: 58px; left: 18px; right: 18px; display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 14px; justify-items: center; }
.ap-gen, .ap-app { display: grid; justify-items: center; align-content: start; gap: 4px; width: 56px; height: 64px; }
.ap-gen i { width: 46px; height: 46px; border-radius: 13px; background: hsla(var(--h), 55%, 94%, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.ap-gen small { width: 30px; height: 5px; margin-top: 3px; border-radius: 4px; background: rgba(255, 255, 255, .45); }
.ap-app small { max-width: 62px; font-size: .56rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.ap-app .ap-ico { position: relative; animation: ap-pop .7s .5s var(--ease-spring) both; }
.ap-app .ap-ico::after { content: ""; position: absolute; inset: -5px; border-radius: 16px; border: 2px solid #ffe08a; opacity: 0; animation: ap-ring 1.1s 1.15s ease-out 2; }
@keyframes ap-pop { 0% { opacity: 0; transform: translateY(-90px) scale(1.9) rotate(-12deg); } 60% { opacity: 1; transform: translateY(4px) scale(.92, 1.08); } 100% { opacity: 1; transform: none; } }
@keyframes ap-ring { from { opacity: 1; transform: scale(.9); } to { opacity: 0; transform: scale(1.45); } }
.ap-dock { position: absolute; left: 14px; right: 14px; bottom: 16px; display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; padding: 12px; border-radius: 26px; background: rgba(255, 255, 255, .22); }
.ap-dock i { width: 44px; height: 44px; border-radius: 13px; background: rgba(255, 255, 255, .5); }
.f-icon { left: 161px; top: 159px; animation: ss-tap .6s 2.1s forwards; }
.ap-open { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: linear-gradient(145deg, #a46fbb, #6b4382); transform-origin: 161px 159px; opacity: 0; transform: scale(.17);
    animation: ap-open .5s 2.5s var(--ease-out) forwards; }
.ap-open .ap-ico { width: 86px; height: 86px; border-radius: 24px; font-size: 1.6rem; background: rgba(255, 255, 255, .16); box-shadow: none; }
@keyframes ap-open { 0% { opacity: 1; transform: scale(.17); border-radius: 60px; } 100% { opacity: 1; transform: none; border-radius: 0; } }
/* 3. La abre: tu menú con «¿Lo de siempre?» y «Pedir de nuevo» */
.ss-again { background: var(--cream); }
.ap-brand { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 44px 14px 14px; color: #fff; background: linear-gradient(135deg, #8b5ba0, #5e3a70); }
.ap-brand small { display: block; font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.ap-brand strong { font-family: var(--font-display); font-size: 1.05rem; }
.ap-openchip { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 99px; font-size: .6rem; font-weight: 800; background: rgba(255, 255, 255, .18); }
.ap-openchip i { width: 6px; height: 6px; border-radius: 50%; background: #3ad07a; }
.ap-again { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin: 108px 12px 10px; padding: 12px; border-radius: 18px; background: #fff;
    border: 2px solid var(--sl-a, #ff9a5a); box-shadow: 0 16px 30px -18px rgba(181, 41, 78, .6); opacity: 0; animation: ss-in-up .5s .3s var(--ease-spring) forwards; }
.ap-again > div { min-width: 0; }
.ap-again-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, var(--sl-a, #ff9a5a), var(--sl-b, #e8505b)); }
.ap-again b { display: block; font-size: .86rem; }
.ap-again small { display: block; font-size: .64rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-again .ss-item { opacity: .6; animation: c2b-fade-up .5s .6s var(--ease-out) both; }
.ss-again .ss-toast { animation-delay: 2.3s; }
/* 4. Sus datos ya llenos: nombre, teléfono y dirección recordados; paga */
.ap-cohead { position: absolute; top: 44px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.ap-cohead strong, .ap-cohead b { font-family: var(--font-display); font-size: 1.15rem; }
.ap-fields { position: absolute; top: 118px; left: 14px; right: 14px; display: grid; gap: 8px; }
.ap-f { position: relative; display: grid; padding: 9px 38px 9px 12px; border-radius: 14px; background: #fff; border: 1.5px solid var(--line); opacity: 0; animation: ss-in-up .35s var(--ease-out) forwards, ap-filled .4s forwards; }
.ap-f small { font-size: .6rem; font-weight: 700; color: var(--muted); }
.ap-f b { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-f i { position: absolute; right: 12px; top: 50%; margin-top: -9px; font-size: 1.1rem; color: #2f9a57; opacity: 0; transform: scale(0); animation: ax-pop .35s var(--ease-spring) forwards; }
.ap-f.f1 { animation-delay: .2s, .6s; } .ap-f.f1 i { animation-delay: .65s; }
.ap-f.f2 { animation-delay: .35s, .85s; } .ap-f.f2 i { animation-delay: .9s; }
.ap-f.f3 { animation-delay: .5s, 1.1s; } .ap-f.f3 i { animation-delay: 1.15s; }
@keyframes ap-filled { to { border-color: #9fd8b0; background: #f4fbf6; } }
.ap-remember { position: absolute; top: 322px; left: 0; right: 0; text-align: center; font-size: .68rem; font-weight: 800; color: #1f7a45; opacity: 0; animation: ss-in .3s 1.3s forwards; }
.ap-pay { position: absolute; left: 14px; right: 14px; bottom: 30px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: #fff; font-weight: 800; background: #111;
    animation: ss-press .3s 1.85s ease-in-out, ap-paid .3s 2.4s forwards; }
.ap-pay .lbl { display: flex; align-items: center; gap: 6px; animation: ss-out .1s 2s forwards; }
.ap-pay .spin { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; opacity: 0;
    animation: ss-in .1s 2s forwards, ss-rot .7s linear infinite, ss-out .1s 2.4s forwards; }
.ap-pay .ok { position: absolute; display: flex; align-items: center; gap: 4px; opacity: 0; animation: ss-in-up .3s 2.45s var(--ease-spring) forwards; }
@keyframes ap-paid { to { background: #2f9a57; } }
.f-cpay { left: 50%; top: 50%; animation: ss-tap .6s 1.6s forwards; }
/* 5. Mis pedidos (sin cuenta) y el aviso de su pedido */
.ss-history { background: var(--cream); }
.ap-notif { position: absolute; top: 40px; left: 10px; right: 10px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, .97);
    box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .45); transform: translateY(-160%); animation: ss-slide-up .55s 1.1s var(--ease-spring) forwards; }
.ap-notif .ap-ico { width: 34px; height: 34px; border-radius: 10px; font-size: .7rem; }
.ap-notif div { flex: 1; min-width: 0; }
.ap-notif b { display: block; font-size: .74rem; }
.ap-notif small { font-size: .68rem; }
.ap-notif em { align-self: flex-start; font-size: .6rem; font-style: normal; color: var(--muted); }
.ap-mohead { position: absolute; top: 112px; left: 16px; right: 16px; }
.ap-mohead strong { display: block; font-family: var(--font-display); font-size: 1.35rem; }
.ap-mohead small { font-size: .66rem; color: var(--muted); }
.ap-orders { position: absolute; top: 172px; left: 12px; right: 12px; display: grid; gap: 8px; }
.ap-orders > div { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-size: .74rem; opacity: 0; animation: ss-in-up .35s var(--ease-out) forwards; }
.ap-orders .o1 { animation-delay: .2s; border-color: #bcd9ef; } .ap-orders .o2 { animation-delay: .35s; } .ap-orders .o3 { animation-delay: .5s; } .ap-orders .o4 { animation-delay: .65s; }
.ap-orders b { color: #5e3a70; }
.ap-orders .pill { flex: 1; font-size: .64rem; font-weight: 700; color: var(--muted); }
.ap-orders .pill.go { flex: 0 0 auto; padding: 2px 8px; border-radius: 99px; color: #fff; background: #1f7fc4; }
.ap-orders em { margin-left: auto; font-style: normal; font-weight: 800; }
.ap-orders em.again { padding: 4px 9px; border-radius: 99px; font-size: .62rem; color: #fff; background: var(--sl-b, #e8505b); }
@media (prefers-reduced-motion: reduce) {
    .ap-install, .ap-f, .ap-f i, .ap-remember, .ap-orders > div, .ap-again, .ap-add .a2, .ap-againbtn .a2, .ap-pay .ok { opacity: 1 !important; transform: none !important; }
    .ap-notif { transform: none !important; }
    .ap-add .a1, .ap-againbtn .a1, .ap-pay .lbl, .ap-pay .spin, .ap-open { display: none !important; }
    .ap-add, .ap-againbtn, .ap-pay { background: #2f9a57; }
}

/* =====================================================================================================================
   Tu app: la escena grande en 4 tiempos (soluciones.js pone en .ta-stage las clases a1, tap1, a2, stamp, fly, land, a3,
   tap2, splash, menu, a4, sheet, fill, pay y paid, en su momento), los 6 «lo que se queda en su celular» y la franja que
   la anuncia en las demás soluciones.
   ===================================================================================================================== */
.ta .mk-head h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.ta-crown { display: inline-flex; align-items: center; gap: 6px; color: #b5294e; }
.ta-crown svg { color: #e8a317; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .15)); }
.ta-stage { position: relative; display: grid; gap: 30px; align-items: center; margin-top: 10px; }
@media (min-width: 992px) { .ta-stage { grid-template-columns: 380px minmax(0, 1fr); gap: 60px; } }
.ta-k { display: none; }
.ta-device { position: relative; justify-self: center; width: 300px; height: 620px; padding: 12px; border-radius: 48px; background: #1b100a; box-shadow: 0 60px 110px -40px rgba(42, 27, 18, .7), inset 0 0 0 2px #3a2a20; }
.ta-device .mk-example-tag { z-index: 12; }
.ta-screen { position: relative; width: 276px; height: 596px; border-radius: 38px; overflow: hidden; font-size: 13px; color: #fff; isolation: isolate;
    background: radial-gradient(140% 90% at 15% 0%, #ffb37a 0%, #e8505b 48%, #5e3a70 100%); }
.ta-screen::before { content: ""; position: absolute; top: 9px; left: 50%; z-index: 20; width: 88px; height: 22px; margin-left: -44px; border-radius: 99px; background: #000; }
.ta-home { position: absolute; inset: 0; }
.ta-clock { position: absolute; top: 13px; left: 30px; font-size: .74rem; font-weight: 800; }
.ta-grid { position: absolute; top: 60px; left: 20px; right: 20px; display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 14px; justify-items: center; }
.ta-gen { display: grid; justify-items: center; align-content: start; gap: 4px; width: 56px; height: 64px; }
.ta-gen i { width: 48px; height: 48px; border-radius: 14px; background: hsla(var(--h), 55%, 94%, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.ta-gen small { width: 30px; height: 5px; margin-top: 3px; border-radius: 4px; background: rgba(255, 255, 255, .45); }
.ta-gen.is-slot i { background: transparent; box-shadow: none; transition: box-shadow .3s; }
.ta-gen.is-slot small { visibility: hidden; }
.ta-stage.a2 .ta-gen.is-slot i { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75); animation: ta-slot .6s ease-in-out infinite alternate; }
.ta-stage.land .ta-gen.is-slot i { box-shadow: none; animation: none; }
@keyframes ta-slot { to { box-shadow: inset 0 0 0 2px rgba(255, 224, 138, .95), 0 0 16px rgba(255, 224, 138, .6); } }
.ta-dock { position: absolute; left: 14px; right: 14px; bottom: 16px; display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; padding: 12px; border-radius: 28px; background: rgba(255, 255, 255, .22); }
.ta-dock i { width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .5); }
.ta-ico { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; font-weight: 800; font-size: .95rem; color: #fff;
    background: linear-gradient(145deg, #a46fbb, #6b4382); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 16px -8px rgba(40, 10, 60, .7); }
.ta-ico.sm { width: 42px; height: 42px; border-radius: 12px; font-size: .85rem; }
.ta-ico.xl { width: 150px; height: 150px; border-radius: 40px; font-size: 3rem; }
/* El ícono ya en su lugar */
.ta-icon { position: absolute; left: 143.5px; top: 138px; z-index: 2; display: grid; justify-items: center; gap: 4px; width: 48px; opacity: 0; }
.ta-icon small { width: 72px; text-align: center; font-size: .58rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.ta-icon .ta-ico { position: relative; }
.ta-icon .ta-ico::after { content: ""; position: absolute; inset: -6px; border-radius: 18px; border: 2px solid #ffe08a; opacity: 0; }
.ta-stage.land .ta-icon { opacity: 1; animation: ta-land .6s var(--ease-spring); }
.ta-stage.land .ta-icon .ta-ico::after { animation: ap-ring 1.1s .2s ease-out 2; }
.ta-stage.tap2 .ta-icon .ta-ico { animation: ss-press .3s .25s; }
@keyframes ta-land { 0% { transform: scale(1.18, .84); } 50% { transform: translateY(-5px) scale(.94, 1.06); } 100% { transform: none; } }
/* 1. La página de su pedido con «Guárdanos en tu celular» */
.ta-page { position: absolute; inset: 0; z-index: 3; color: var(--espresso); background: #f7f3fa; opacity: 0; transform-origin: 50% 50%;
    transition: opacity .45s, transform .6s var(--ease-out), border-radius .6s; }
.ta-stage.a1 .ta-page { opacity: 1; }
.ta-stage.a2 .ta-page { opacity: 0; transform: scale(.5); border-radius: 70px; }
.ta-ptop { position: absolute; top: 0; left: 0; right: 0; height: 102px; padding: 46px 16px 0; display: flex; align-items: center; gap: 10px; color: #fff; background: linear-gradient(135deg, #8b5ba0, #5e3a70); }
.ta-ptop .ss-logo, .ta-mtop .ss-logo { width: 34px; height: 34px; color: #5e3a70; }
.ta-ptop b { display: block; font-size: .88rem; }
.ta-ptop small { font-size: .66rem; opacity: .85; }
.ta-pstatus { position: absolute; top: 118px; left: 14px; right: 14px; display: grid; justify-items: center; gap: 4px; padding: 18px 14px; border-radius: 20px; text-align: center; background: #fff; }
.ta-ok { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: #fff; font-size: 1.6rem; background: linear-gradient(160deg, #6fcf8d, #2f9a57 60%, #237a44); }
.ta-pstatus strong { font-family: var(--font-display); font-size: 1.2rem; }
.ta-pstatus small { font-size: .7rem; color: var(--muted); }
.ta-install { position: absolute; left: 12px; right: 12px; top: 300px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 14px; border-radius: 20px; background: #fff;
    border: 2px solid #e9dff0; box-shadow: 0 18px 34px -20px rgba(94, 58, 112, .6); opacity: 0; transform: translateY(30px); transition: opacity .45s .6s, transform .55s .6s var(--ease-spring); }
.ta-stage.a1 .ta-install { opacity: 1; transform: none; }
.ta-install b { display: block; font-size: .84rem; }
.ta-install small { font-size: .66rem; color: var(--muted); }
.ta-add, .ta-againbtn { grid-column: 1 / -1; position: relative; display: block; padding: 11px; border-radius: 12px; text-align: center; font-weight: 800; font-size: .82rem; color: #fff; background: #e8505b; transition: background .3s .35s; }
.ta-add .a2, .ta-againbtn .a2 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; opacity: 0; transition: opacity .2s .35s; }
.ta-add .a1, .ta-againbtn .a1 { transition: opacity .15s .3s; }
.ta-stage.tap1 .ta-add, .ta-stage.a4 .ta-againbtn { background: #2f9a57; animation: ss-press .3s .2s; }
.ta-stage.tap1 .ta-add .a1, .ta-stage.a4 .ta-againbtn .a1 { opacity: 0; }
.ta-stage.tap1 .ta-add .a2, .ta-stage.a4 .ta-againbtn .a2 { opacity: 1; }
.ta-f1, .ta-f3 { left: 50%; top: auto; bottom: 34px; margin: 0 0 -17px -17px; }
.ta-stage.tap1 .ta-f1, .ta-stage.a4 .ta-f3 { animation: ss-tap .6s forwards; }
/* 2. Se vuelve ícono, el Pin lo sella y vuela a su pantalla de inicio */
.ta-morph { position: absolute; left: 63px; top: 223px; z-index: 4; width: 150px; height: 150px; opacity: 0; transform: scale(1.7); transition: opacity .35s, transform .8s var(--ease-spring); }
.ta-morph::after { content: ""; position: absolute; inset: -10px; border-radius: 48px; border: 3px solid #ffe08a; opacity: 0; }
.ta-stage.a2 .ta-morph { opacity: 1; transform: none; }
.ta-stage.stamp .ta-morph { animation: ta-squash .5s .3s; }
.ta-stage.stamp .ta-morph::after { animation: ap-ring .8s .45s ease-out; }
.ta-stage.fly .ta-morph { transform: translate(29.5px, -136px) scale(.32); transition: opacity .3s, transform .85s cubic-bezier(.55, -0.35, .3, 1.25); }
.ta-stage.land .ta-morph { opacity: 0; transition: opacity .12s; }
@keyframes ta-squash { 40% { transform: scale(1.1, .86); } 70% { transform: scale(.97, 1.04); } }
.ta-stamp { position: absolute; left: 110px; top: 146px; z-index: 5; width: 56px; opacity: 0; transform: translateY(-160px) rotate(-14deg); }
.ta-stamp img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .3)); }
.ta-stage.stamp .ta-stamp { animation: ta-stamp 1.1s var(--ease-out) forwards; }
@keyframes ta-stamp { 0% { opacity: 0; transform: translateY(-160px) rotate(-14deg); } 35% { opacity: 1; transform: translateY(42px) scale(1.06, .88); } 50% { transform: translateY(34px) scale(.96, 1.05); }
    72% { opacity: 1; transform: translateY(-24px) rotate(8deg); } 100% { opacity: 0; transform: translateY(-150px) rotate(16deg); } }
/* 3. Días después: lo toca y abre directo en el menú */
.ta-later { position: absolute; top: 44px; left: 50%; z-index: 7; padding: 6px 12px; border-radius: 99px; white-space: nowrap; font-size: .72rem; font-weight: 800; background: rgba(27, 16, 10, .72);
    opacity: 0; transform: translate(-50%, -12px); transition: opacity .4s, transform .4s var(--ease-spring); }
.ta-stage.a3 .ta-later { opacity: 1; transform: translate(-50%, 0); }
.ta-stage.splash .ta-later { opacity: 0; }
.ta-f2 { left: 167.5px; top: 162px; }
.ta-stage.tap2 .ta-f2 { animation: ss-tap .6s forwards; }
.ta-splash { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; align-content: center; gap: 14px; background: linear-gradient(145deg, #a46fbb, #6b4382);
    transform-origin: 167.5px 162px; opacity: 0; transform: scale(.17); border-radius: 60px; transition: transform .55s var(--ease-out), border-radius .55s, opacity .2s; }
.ta-stage.splash .ta-splash { opacity: 1; transform: none; border-radius: 0; }
.ta-stage.menu .ta-splash { opacity: 0; transition: opacity .45s; }
.ta-splash .ta-ico.xl { width: 96px; height: 96px; border-radius: 28px; font-size: 2rem; background: rgba(255, 255, 255, .16); box-shadow: none; }
.ta-splash b { font-family: var(--font-display); font-size: 1.25rem; }
.ta-menu { position: absolute; inset: 0; z-index: 7; color: var(--espresso); background: var(--cream); opacity: 0; transition: opacity .3s; }
.ta-stage.menu .ta-menu { opacity: 1; }
.ta-mtop { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 46px 14px 14px; color: #fff; background: linear-gradient(135deg, #8b5ba0, #5e3a70); }
.ta-mtop small { display: block; font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.ta-mtop strong { font-family: var(--font-display); font-size: 1.05rem; }
.ta-openchip { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 99px; font-size: .6rem; font-weight: 800; background: rgba(255, 255, 255, .18); }
.ta-openchip i { width: 6px; height: 6px; border-radius: 50%; background: #3ad07a; }
.ta-again { position: absolute; top: 110px; left: 12px; right: 12px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 12px; border-radius: 18px; background: #fff;
    border: 2px solid #ff9a5a; box-shadow: 0 16px 30px -18px rgba(181, 41, 78, .6); opacity: 0; transform: translateY(16px); transition: opacity .45s .35s, transform .5s .35s var(--ease-spring); }
.ta-stage.menu .ta-again { opacity: 1; transform: none; }
.ta-again > div { min-width: 0; }
.ta-again-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, #ff9a5a, #e8505b); }
.ta-again b { display: block; font-size: .88rem; }
.ta-again small { display: block; font-size: .64rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-items { position: absolute; top: 262px; left: 12px; right: 12px; display: grid; gap: 8px; }
.ta-items span { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-size: .78rem; opacity: .6; }
.ta-items i { color: #5e3a70; font-size: 1.1rem; }
.ta-items b { flex: 1; }
.ta-items em { font-style: normal; font-weight: 800; }
/* 4. «Pedir de nuevo», sus datos ya llenos y paga */
.ta-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; padding: 18px 16px 24px; border-radius: 24px 24px 0 0; color: var(--espresso); background: #fff;
    box-shadow: 0 -16px 34px rgba(40, 10, 60, .25); visibility: hidden; transform: translateY(105%); transition: transform .5s var(--ease-out); }
.ta-stage.sheet .ta-sheet { visibility: visible; transform: none; }
.ta-sheet > strong { display: flex; justify-content: space-between; margin-bottom: 10px; font-family: var(--font-display); font-size: 1.15rem; }
.ta-fld { position: relative; display: grid; margin-bottom: 8px; padding: 8px 36px 8px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; transition: border-color .3s var(--d, 0s), background .3s var(--d, 0s); }
.ta-fld small { font-size: .6rem; font-weight: 700; color: var(--muted); }
.ta-fld b { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-fld i { position: absolute; right: 12px; top: 50%; margin-top: -9px; font-size: 1.05rem; color: #2f9a57; opacity: 0; transform: scale(0); transition: opacity .25s var(--d, 0s), transform .35s var(--d, 0s) var(--ease-spring); }
.ta-stage.fill .ta-fld { border-color: #9fd8b0; background: #f4fbf6; }
.ta-stage.fill .ta-fld i { opacity: 1; transform: none; }
.ta-remember { display: block; text-align: center; font-size: .66rem; font-weight: 800; color: #1f7a45; opacity: 0; transition: opacity .3s .8s; }
.ta-stage.fill .ta-remember { opacity: 1; }
.ta-pay { position: relative; display: grid; place-items: center; height: 48px; margin-top: 10px; border-radius: 14px; color: #fff; font-weight: 800; background: #111; transition: background .3s .5s; }
.ta-pay .ok { position: absolute; display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity .25s; }
.ta-pay .lbl { transition: opacity .2s; }
.ta-f4 { left: 50%; top: 50%; }
.ta-stage.pay .ta-f4 { animation: ss-tap .6s forwards; }
.ta-stage.pay .ta-pay { animation: ss-press .3s .25s; }
.ta-stage.paid .ta-pay { background: #2f9a57; transition-delay: 0s; }
.ta-stage.paid .ta-pay .lbl { opacity: 0; }
.ta-stage.paid .ta-pay .ok { opacity: 1; }
.ta-toast { position: absolute; top: 44px; left: 50%; z-index: 10; padding: 8px 14px; border-radius: 99px; white-space: nowrap; font-size: .74rem; font-weight: 800; color: #1f7a45; background: #fff;
    box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .5); opacity: 0; transform: translate(-50%, -20px); transition: opacity .35s, transform .45s var(--ease-spring); }
.ta-stage.paid .ta-toast { opacity: 1; transform: translate(-50%, 0); }
.ta-stage.is-reset .ta-page, .ta-stage.is-reset .ta-menu, .ta-stage.is-reset .ta-sheet, .ta-stage.is-reset .ta-splash, .ta-stage.is-reset .ta-icon, .ta-stage.is-reset .ta-toast { opacity: 0 !important; transition: opacity .4s !important; }
/* Los 4 tiempos, al lado: se ilumina el que está pasando */
.ta-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ta-acts li { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px 20px; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--line);
    opacity: .55; transition: opacity .4s, transform .4s var(--ease-out), box-shadow .4s, border-color .4s; }
.ta-n { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px; font-size: 1.1rem; color: #b5294e; background: #fdecee; transition: color .3s, background .3s; }
.ta-acts strong { display: block; font-size: 1.12rem; }
.ta-acts p { margin: 4px 0 0; font-size: .92rem; color: var(--cocoa); }
.ta-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: linear-gradient(90deg, #ff9a5a, #e8505b); }
.ta-stage.a1:not(.a2) .t1, .ta-stage.a2:not(.a3) .t2, .ta-stage.a3:not(.a4) .t3, .ta-stage.a4 .t4 { opacity: 1; border-color: #f6c2c6; box-shadow: 0 22px 40px -28px rgba(181, 41, 78, .55); }
@media (min-width: 992px) { .ta-stage.a1:not(.a2) .t1, .ta-stage.a2:not(.a3) .t2, .ta-stage.a3:not(.a4) .t3, .ta-stage.a4 .t4 { transform: translateX(6px); } }
.ta-stage.a1:not(.a2) .t1 .ta-n, .ta-stage.a2:not(.a3) .t2 .ta-n, .ta-stage.a3:not(.a4) .t3 .ta-n, .ta-stage.a4 .t4 .ta-n { color: #fff; background: linear-gradient(135deg, #ff9a5a, #e8505b); }
.ta-stage.a1:not(.a2) .t1 .ta-bar, .ta-stage.a2:not(.a3) .t2 .ta-bar, .ta-stage.a3:not(.a4) .t3 .ta-bar, .ta-stage.a4 .t4 .ta-bar { animation: ta-bar var(--dur, 3s) linear forwards; }
@keyframes ta-bar { to { width: 100%; } }
/* Lo que se queda en su celular */
.ta-tiles { display: grid; gap: 14px; margin-top: 46px; }
@media (min-width: 576px) { .ta-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ta-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ta-tile { padding: 22px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); transition-delay: var(--d, 0ms); }
.ta-tile-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, #ff9a5a, #e8505b 60%, #b5294e); box-shadow: 0 12px 22px -12px rgba(181, 41, 78, .7); }
.ta-tile h3 { font-size: 1.1rem; margin: 14px 0 6px; }
.ta-tile p { margin: 0; font-size: .9rem; color: var(--cocoa); }
.ta-note { max-width: 860px; margin: 18px auto 0; text-align: center; font-size: .84rem; color: var(--muted); }

/* La franja de la corona en las demás soluciones */
.sl-appnote { padding: 6px 0 40px; }
.sl-appnote-in { display: flex; align-items: center; gap: 22px; padding: 20px 24px; border-radius: 28px; text-decoration: none; color: var(--espresso);
    background: radial-gradient(420px 160px at 0% 50%, rgba(255, 154, 90, .25), transparent 70%), #fff5f2; border: 1px solid #f6d3cf; box-shadow: var(--shadow-1); transition: transform .3s var(--ease-out), box-shadow .3s; }
.sl-appnote-in:hover { color: var(--espresso); transform: translateY(-3px); box-shadow: 0 24px 44px -28px rgba(181, 41, 78, .5); }
.sl-appnote-ph { flex-shrink: 0; display: grid; place-items: center; width: 74px; height: 120px; padding: 6px; border-radius: 18px; background: #1b100a; }
.sl-appnote-ph .ph { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; align-content: start; width: 100%; height: 100%; padding: 10px 7px; border-radius: 13px;
    background: radial-gradient(140% 90% at 15% 0%, #ffb37a 0%, #e8505b 48%, #5e3a70 100%); }
.sl-appnote-ph .ph > i { display: block; aspect-ratio: 1; border-radius: 7px; background: rgba(255, 255, 255, .4); }
.sl-appnote-ph .ph > i.me { display: grid; place-items: center; color: #fff; font-size: .8rem; background: linear-gradient(145deg, #a46fbb, #6b4382); animation: sl-appnote 4s var(--ease-spring) infinite; }
@keyframes sl-appnote { 0% { opacity: 0; transform: translateY(-30px) scale(1.6); } 14%, 88% { opacity: 1; transform: none; } 92% { transform: scale(.85); } 100% { opacity: 0; } }
.sl-appnote-tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sl-appnote-tx .ta-crown { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sl-appnote-tx strong { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.2; }
.sl-appnote-tx small { font-size: .92rem; color: var(--cocoa); }
.sl-appnote-go { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 99px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff7a1a, #e3306c); }
@media (max-width: 575.98px) {
    .sl-appnote-in { flex-wrap: wrap; gap: 14px; padding: 18px; }
    .sl-appnote-ph { width: 60px; height: 98px; }
    .sl-appnote-tx { flex-basis: calc(100% - 80px); }
    .sl-appnote-go { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .ta *, .ta *::before, .ta *::after, .sl-appnote * { animation: none !important; transition: none !important; }
    .ta-acts li { opacity: 1; }
}

/* Íconos y logos con imagen (la hamburguesa 3D de «Burger Barrio»): la imagen llena el ícono y él la redondea. */
.ss-logo, .ap-ico, .ta-ico { position: relative; overflow: hidden; }
.ss-logo > img, .ap-ico > img, .ta-ico > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sl-appnote-ph .ph > i.me { background: url("/img/app-192.png") center / cover; }

@media (prefers-reduced-motion: reduce) { .sl-story-ctl { display: none; } }

/* La app que guarda el cliente es Click2Bite (el Pin); el negocio va adentro con su logo: la insignia en la esquina. */
.biz-badge { position: absolute; right: 6%; bottom: 6%; z-index: 1; width: 42%; height: 42%; overflow: hidden; border-radius: 30%; background: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(43, 26, 15, .3); }
.biz-badge img { display: block; width: 100%; height: 100%; }
.ta-ico.xl .biz-badge { border-width: 4px; }
/* /tu-app: el Pin le pone su sello al logo del negocio y el logo entra al ícono de Click2Bite antes de volar a su pantalla. */
.ta-morph .ta-ico { position: absolute; inset: 0; transition: opacity .35s; }
.ta-morph .ta-c2b { opacity: 0; }
.ta-stage.stamp .ta-morph .ta-c2b { opacity: 1; transition-delay: .6s; }
.ta-stage.stamp .ta-morph .ta-biz { opacity: 0; transition-delay: .6s; }
.ta-splash.is-c2b, .ap-open.is-c2b { background: #fbf6ee; color: var(--espresso); }
.ta-splash.is-c2b .ta-ico.xl, .ap-open.is-c2b .ap-ico { background: transparent; }

/* =====================================================================================================================
   Por giro de tienda (/florerias, /tiendas-de-mascotas, /perfumerias, /productos-de-limpieza, /suplementos) y la comparativa
   (/alternativa-a-apps-de-delivery), nov-2026: «Hecho para tu giro», la tabla comparativa, las preguntas del giro y «Por giro».
   ===================================================================================================================== */
/* Hecho para tu giro: el pin vestido del giro y 6 tarjetas con lo que ya trae Click2Bite. */
.sl-fit-head { position: relative; }
.sl-fit-pin { display: block; width: 96px; height: 96px; margin: 0 auto 4px; }
.sl-fit-pin .gpin { width: 100%; height: 100%; }
.sl-fit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .sl-fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sl-fit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sl-fit-card { padding: 24px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 44px -32px rgba(42, 27, 18, .45); }
.sl-fit-card h3 { font-size: 1.18rem; margin: 16px 0 0; }
.sl-fit-card .mk-pro-pill { margin: 8px 0 0; }
.sl-fit-card p { margin: 10px 0 0; color: var(--cocoa); font-size: .95rem; }

/* Comparativa: tabla de 3 columnas; en celular cada fila es una tarjeta con sus dos lados. */
.sl-cmp-wrap { max-width: 1000px; margin: 0 auto; border-radius: 28px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.sl-cmp-table { width: 100%; border-collapse: collapse; }
.sl-cmp-table th, .sl-cmp-table td { padding: 16px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); font-size: .95rem; overflow-wrap: anywhere; }
.sl-cmp-table thead th { border-top: 0; font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--cream); }
.sl-cmp-table thead th.is-us { color: var(--basil); background: var(--basil-soft); }
.sl-cmp-table tbody th { width: 24%; font-weight: 800; color: var(--espresso); }
.sl-cmp-table td { color: var(--cocoa); }
.sl-cmp-table td.is-us { background: var(--basil-soft); color: var(--espresso); font-weight: 600; }
@media (max-width: 767.98px) {
    .sl-cmp-wrap { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
    .sl-cmp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .sl-cmp-table, .sl-cmp-table tbody, .sl-cmp-table tr, .sl-cmp-table th, .sl-cmp-table td { display: block; width: 100%; }
    .sl-cmp-table tr { margin-bottom: 14px; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
    .sl-cmp-table tbody th { width: 100%; border-top: 0; padding: 14px 16px 6px; font-size: 1.02rem; }
    .sl-cmp-table td { padding: 10px 16px 12px; }
    .sl-cmp-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
    .sl-cmp-table td.is-us::before { color: var(--basil); }
}
.sl-cmp-note { max-width: 1000px; margin: 14px auto 0; text-align: center; font-size: .8rem; color: var(--muted); }
.sl-cmp-both { display: flex; align-items: center; gap: 16px; max-width: 1000px; margin: 26px auto 0; padding: 18px 22px; border-radius: 24px; text-decoration: none; color: var(--espresso);
    background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .25s var(--ease-out), border-color .25s; }
.sl-cmp-both:hover { transform: translateY(-2px); border-color: rgba(123, 79, 142, .45); color: var(--espresso); }
.sl-cmp-both > span:not(.c2b-clay) { flex: 1; min-width: 0; }
.sl-cmp-both strong { display: block; font-size: 1.02rem; }
.sl-cmp-both small { display: block; margin-top: 2px; color: var(--muted); }
.sl-cmp-both > .bi { color: var(--grape); font-size: 1.2rem; }
.sl-cmp-both .c2b-clay { flex-shrink: 0; }

/* Preguntas del giro: la pregunta es un h3 dentro del <summary> (mismo aspecto que las preguntas de la portada). */
.sl-faq .sl-faq-q { margin: 0; font: inherit; color: inherit; }

/* Por giro: tarjetas con el ícono y el color de cada giro. */
.sl-bygiro { padding-top: 30px; }
.sl-bygiro-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 576px) { .sl-bygiro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .sl-bygiro-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sl-bygiro-card { display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 16px; border-radius: 20px; text-decoration: none; color: var(--espresso);
    background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s; }
a.sl-bygiro-card:hover { transform: translateY(-3px); border-color: var(--g, var(--brand)); box-shadow: 0 18px 32px -22px rgba(42, 27, 18, .5); color: var(--espresso); }
.sl-bygiro-card > .bi { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 14px; color: #fff; background: var(--g, var(--brand)); font-size: 1.1rem; }
.sl-bygiro-card > span { min-width: 0; }
.sl-bygiro-card strong { display: block; font-size: 1rem; }
.sl-bygiro-card small { display: block; font-size: .8rem; color: var(--muted); line-height: 1.3; }
.sl-bygiro-card.is-here { background: var(--cream); border-style: dashed; box-shadow: none; }