/* =====================================================================================================================
   Conversión (oct-2026): hero «Tus clientes ya te eligieron», calculadora a la vista, Programa Fundadores, «qué pagas y qué
   no», ayuda por WhatsApp y el menú «Soluciones». Se carga en todas las páginas del sitio público, después de landing.css.
   Todo respeta «reducir movimiento».
   ===================================================================================================================== */

/* ---------- Hero ---------- */
.mk-hero h1 .mk-join-line { display: block; font-size: 1.32em; line-height: 1; margin-bottom: 12px; letter-spacing: -.03em; }
.mk-hero h1 .mk-chosen-line { display: block; font-size: 1em; line-height: 1.06; margin-bottom: 6px; letter-spacing: -.03em; color: var(--espresso); }
.mk-hero h1 em.flair { display: inline; }

/* Los 4 canales: se encienden por turno (cada 2 s) y sueltan un «+1» como si mandaran un pedido al celular. */
.mk-channels { flex-wrap: wrap !important; }
@media (min-width: 992px) {
    .mk-channels { display: grid !important; grid-template-columns: repeat(4, max-content); gap: 6px !important; }
    .mk-channels li { padding: 6px 10px 6px 6px !important; font-size: .82rem !important; white-space: nowrap; gap: 7px !important; }
    .mk-channels li i { min-width: 30px !important; height: 30px !important; border-radius: 10px !important; }
}
@media (min-width: 992px) and (max-width: 1239.98px) { .mk-channels { grid-template-columns: repeat(2, max-content); } }
.mk-channels li { position: relative; animation: cv-ch-lit 8s var(--ease-out) infinite; animation-delay: calc(var(--i, 0) * 2s); }
.mk-channels li span { display: flex; flex-direction: column; line-height: 1.15; }
.mk-channels li small { font-size: .68rem; font-weight: 700; color: var(--muted); text-transform: none; letter-spacing: 0; }
.mk-channels li:nth-child(1) i { background: linear-gradient(160deg, #f6a04f, var(--c2b-orange) 55%, #c95a10); }
.mk-channels li:nth-child(2) i { background: linear-gradient(160deg, #6fb7e8, #2b8fd6 60%, #1d6aa3); }
.mk-channels li:nth-child(3) i { background: linear-gradient(160deg, #a77bc0, var(--grape) 60%, #5d3a6d); }
.mk-channels li:nth-child(4) i { background: linear-gradient(160deg, #6fcf8d, #2f9a57 60%, #237a44); }
.mk-ch-pop { position: absolute; top: -12px; right: -8px; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 99px; display: grid; place-items: center;
    font-size: .72rem; font-weight: 800; color: #fff; background: var(--basil); box-shadow: 0 6px 14px -6px rgba(37, 106, 64, .8);
    opacity: 0; pointer-events: none; animation: cv-ch-pop 8s var(--ease-out) infinite; animation-delay: calc(var(--i, 0) * 2s); }
@keyframes cv-ch-lit {
    0% { transform: none; box-shadow: var(--shadow-1); }
    4%, 18% { transform: translateY(-3px); box-shadow: 0 0 0 3px rgba(235, 113, 21, .28), 0 14px 26px -14px rgba(235, 113, 21, .75); border-color: rgba(235, 113, 21, .45); }
    25%, 100% { transform: none; box-shadow: var(--shadow-1); }
}
@keyframes cv-ch-pop {
    0% { opacity: 0; transform: translateY(8px) scale(.6); }
    5% { opacity: 1; transform: translateY(-2px) scale(1.05); }
    16% { opacity: 1; transform: translateY(-10px) scale(1); }
    22%, 100% { opacity: 0; transform: translateY(-26px) scale(.9); }
}
.mk-hero-price { flex-wrap: wrap; line-height: 1.45; }
.mk-hero-price span { flex: 1 1 260px; }
.mk-hero .mk-cta .bi-calculator { margin-left: 4px; }

/* «Ejemplo»: el celular del hero no es un negocio real. */
.mk-example-tag { position: absolute; top: -12px; right: 18px; z-index: 6; padding: 4px 11px; border-radius: 99px; font-size: .66rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(42, 27, 18, .82); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .6); }

@media (max-width: 575.98px) {
    .mk-channels { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
    .mk-channels li { padding: 9px 4px !important; font-size: .68rem !important; }
    .mk-channels li small { font-size: .6rem; }
    .mk-ch-pop { top: -10px; right: -4px; height: 20px; min-width: 22px; font-size: .66rem; }
}

/* ---------- Calculadora «¿Cuánto te queda?» ---------- */
.cv-calc-sec { padding-top: 56px; padding-bottom: 56px; }
.cv-anchor { position: relative; top: -95px; display: block; height: 0; }
.cv-calc { display: grid; grid-template-columns: 1fr; border-radius: 36px; overflow: hidden; box-shadow: var(--shadow-3); background: var(--paper); }
@media (min-width: 992px) { .cv-calc { grid-template-columns: 1.08fr 1fr; } }
.cv-calc-in { background: radial-gradient(520px 320px at 0% 0%, rgba(242, 163, 58, .25), transparent 60%), #1b100a; color: #fff; padding: 38px 34px 30px; }
.cv-calc-in h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin: 10px 0 24px; color: #fff; }
.cv-share { margin: 4px 0 18px; border: 0; padding: 0; }
.cv-share legend { font-size: 1rem; font-weight: 600; color: rgba(255, 255, 255, .85); margin-bottom: 10px; }
.cv-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cv-seg label { position: relative; cursor: pointer; }
.cv-seg input { position: absolute; opacity: 0; inset: 0; }
.cv-seg span { display: block; text-align: center; padding: 10px 6px; border-radius: 14px; font-weight: 800; color: rgba(255, 255, 255, .8);
    border: 1.5px solid rgba(255, 255, 255, .2); transition: background .2s, color .2s, border-color .2s; }
.cv-seg input:checked + span { background: var(--saffron); border-color: var(--saffron); color: #1b100a; }
.cv-seg input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.cv-driver label { display: block; font-weight: 600; color: rgba(255, 255, 255, .85); margin-bottom: 8px; }
.cv-driver label span { color: rgba(255, 255, 255, .55); font-weight: 500; }
.cv-driver .input-group { max-width: 220px; }
.cv-driver .input-group-text { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .2); }
.cv-driver .form-control { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .2); }
.cv-calc-out { padding: 34px 30px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.cv-res { border-radius: 22px; padding: 16px 20px; background: var(--cream); border: 1px solid var(--line); }
.cv-res small { display: block; color: var(--muted); font-weight: 700; }
.cv-res strong { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1; color: var(--espresso); }
.cv-res > span { font-size: .86rem; color: var(--cocoa); }
.cv-res.is-net { background: var(--basil-soft); border-color: #cfe6d6; }
.cv-res.is-net strong { color: var(--basil); }
.is-negative .cv-res.is-net { background: #fbebeb; border-color: #f1caca; }
.is-negative .cv-res.is-net strong { color: #a3262a; }
.cv-sentence { margin: 0; font-weight: 600; color: var(--espresso); }
.cv-cur { margin: 0; font-size: .82rem; font-weight: 700; color: var(--grape); }
.cv-calc input[type=range]:focus-visible { outline: 3px solid #fff; outline-offset: 5px; border-radius: 99px; }
.cv-driver .form-control:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mk-links > a { white-space: nowrap; }
.cv-break { font-size: .88rem; color: var(--cocoa); }
.cv-break summary { cursor: pointer; font-weight: 700; color: var(--brand); }
.cv-break ul { list-style: none; padding: 8px 0 0; margin: 0; display: grid; gap: 4px; }
.cv-break li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line); padding: 3px 0; }
.cv-actions { display: grid; gap: 10px; }
.cv-wa .bi-whatsapp { color: #1f9e5a; }
.cv-note { grid-column: 1 / -1; margin: 0; padding: 14px 30px 18px; font-size: .76rem; color: var(--muted); background: var(--paper); border-top: 1px solid var(--line); }
@media (max-width: 575.98px) {
    .cv-calc { border-radius: 26px; }
    .cv-calc-in, .cv-calc-out { padding: 26px 20px; }
    .cv-note { padding: 12px 20px 16px; }
}

/* ---------- Franja de la inauguración: solo «Acceso anticipado» (el chip es el título de la sección) ---------- */
.inau-copy h2.inau-chip { font-family: inherit; font-size: .9rem; line-height: 1.3; letter-spacing: .06em; font-weight: 800; text-wrap: nowrap; }
/* ---------- «Qué pagas y qué no» ---------- */
.cv-pay { max-width: 920px; margin: 30px auto 0; padding: 22px 24px; border-radius: 24px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.cv-pay h3 { font-size: 1.25rem; margin: 0 0 12px; }
.cv-pay-row { display: grid; grid-template-columns: 1.1fr 1fr 1.5fr; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--cocoa); }
.cv-pay-row.is-head { border-top: 0; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-top: 0; }
.cv-pay-row b { color: var(--espresso); }
.cv-pay-row.is-zero span:last-child { font-weight: 800; color: var(--basil); }
@media (max-width: 640px) {
    .cv-pay { padding: 18px 16px; }
    .cv-pay-row { grid-template-columns: 1fr; gap: 2px; }
    .cv-pay-row.is-head { display: none; }
    .cv-pay-row span:nth-child(2) { font-size: .82rem; color: var(--muted); }
}

/* ---------- Ayuda por WhatsApp ---------- */
.cv-help { position: fixed; right: 18px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 99px;
    background: #fff; color: var(--espresso); text-decoration: none; border: 1px solid var(--line); box-shadow: 0 16px 34px -16px rgba(42, 27, 18, .55);
    animation: c2b-fade-up .6s 1.2s var(--ease-out) both; }
.cv-help:hover { color: var(--espresso); transform: translateY(-2px); }
.cv-help-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.25rem; background: linear-gradient(160deg, #3ad07a, #1f9e5a); }
.cv-help-txt { font-size: .9rem; }
@media (max-width: 991.98px) {
    .cv-help { bottom: 86px; right: 12px; padding: 6px; }
    .cv-help-txt { display: none; }
}

/* ---------- Menú «Soluciones» ---------- */
.cv-sol { position: relative; display: inline-flex; align-items: center; }
.cv-sol-btn { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; border: 0; cursor: pointer;
    font-weight: 700; font-size: .95rem; color: var(--espresso); background: #fff; isolation: isolate; box-shadow: 0 6px 18px -10px rgba(123, 79, 142, .7); }
/* El destello recorre el borde: un degradado cónico que gira detrás, recortado a un anillo de 2 px. */
.cv-sol-btn::before { content: ""; position: absolute; inset: -2px; z-index: -2; border-radius: inherit;
    background: conic-gradient(from var(--cv-angle, 0deg), #ff7a1a, #e3306c, #7b4f8e, #2b8fd6, #3aa860, #ff7a1a); animation: cv-spin 4s linear infinite; }
.cv-sol-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; }
@property --cv-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes cv-spin { to { --cv-angle: 360deg; } }
.cv-new { padding: 2px 7px; border-radius: 99px; font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff;
    background: linear-gradient(135deg, #ff7a1a, #e3306c); }
.cv-sol-caret { font-size: .7rem; transition: transform .25s var(--ease-out); }
.cv-sol-btn[aria-expanded="true"] .cv-sol-caret { transform: rotate(180deg); }
.cv-sol-peek { position: absolute; left: 50%; top: 2px; width: 20px; margin-left: -10px; z-index: -3; transform: translateY(0); transition: transform .45s var(--ease-spring); pointer-events: none; }
.cv-sol-peek img { display: block; width: 20px; height: auto; }
.cv-sol-btn:hover .cv-sol-peek, .cv-sol-btn:focus-visible .cv-sol-peek, .cv-sol-btn[aria-expanded="true"] .cv-sol-peek { transform: translateY(-22px) rotate(-8deg); }
.cv-sol-btn:focus-visible { outline: 3px solid var(--grape); outline-offset: 3px; }

.cv-mega { position: absolute; top: calc(100% + 16px); left: var(--cv-x, 50%); width: min(1040px, 94vw); transform: translateX(var(--cv-tx, -38%)); z-index: 60;
    padding: 18px; border-radius: 24px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 40px 80px -30px rgba(42, 27, 18, .5);
    animation: cv-mega-in .35s var(--ease-out) both; }
.cv-mega[hidden] { display: none; }
@media (min-width: 992px) { .cv-mega { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; } }
@keyframes cv-mega-in { from { opacity: 0; transform: translateX(var(--cv-tx, -38%)) translateY(-8px) scale(.98); } to { opacity: 1; transform: translateX(var(--cv-tx, -38%)); } }
.cv-mega-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 2px 4px 14px; }
.cv-mega-head strong { font-family: var(--font-display); font-size: 1.3rem; color: var(--espresso); }
.cv-mega-kicker { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--grape); }
.cv-mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mk-links .cv-mega-card, .cv-mega-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 12px; border-radius: 18px; text-decoration: none; color: var(--espresso);
    background: #fff; border: 1px solid var(--line); transition: transform .25s var(--ease-out), box-shadow .25s, border-color .25s; }
.mk-links .cv-mega-card::after, .mk-links .cv-mega-foot a::after { display: none; }
.cv-mega-card:hover, .cv-mega-card[aria-current="page"] { transform: translateY(-2px); border-color: rgba(235, 113, 21, .45); box-shadow: 0 16px 30px -18px rgba(42, 27, 18, .45); color: var(--espresso); }
.mk-links .cv-mega-card, .mk-links .cv-mega-card * { white-space: normal; }
.cv-mega-card > strong { font-size: 1rem; margin: 6px 2px 0; }
.cv-mega-card > small { font-size: .82rem; color: var(--muted); line-height: 1.35; margin: 0 2px; }
.cv-mega-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 4px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.mk-links .cv-mega-foot a, .cv-mega-foot a { padding: 0; font-size: .9rem; font-weight: 700; color: var(--brand); text-decoration: none; }
/* «Por giro» (nov-2026): una pastilla por giro de tienda con su página, bajo las tarjetas. */
.cv-mega-giros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 4px 0; }
.cv-mega-giros-label { margin-right: 4px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--grape); }
.mk-links .cv-giro-chip, .cv-giro-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; font-size: .86rem; font-weight: 700; white-space: nowrap;
    color: var(--espresso); text-decoration: none; background: #fff; border: 1px solid var(--line); transition: border-color .2s, transform .2s var(--ease-out); }
.mk-links .cv-giro-chip::after { display: none; }
.cv-giro-chip i { color: var(--g, var(--brand)); }
.cv-giro-chip:hover, .cv-giro-chip[aria-current="page"] { border-color: var(--g, var(--brand)); transform: translateY(-1px); color: var(--espresso); }
.cv-giro-chip[aria-current="page"] { background: var(--cream); }
/* Calculadora: la comisión con la que arranca es un ejemplo. */
.cv-fee-hint { display: block; margin-top: 8px; font-size: .8rem; line-height: 1.4; color: rgba(255, 255, 255, .7); }

.cv-card-new { position: absolute; top: 16px; right: 16px; z-index: 2; padding: 2px 8px; border-radius: 99px; font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: #fff; background: linear-gradient(135deg, #ff7a1a, #e3306c); box-shadow: 0 6px 14px -8px rgba(227, 48, 108, .8); }

/* Escenas en miniatura de cada solución (se repiten): lo que dice la tarjeta, pasando en chiquito. */
.cv-scene { position: relative; display: block; height: 108px; border-radius: 14px; overflow: hidden; font-size: 10px; line-height: 1.2; }
.t-food .cv-scene { background: linear-gradient(135deg, #fff3e6, #ffe2c4); }
.t-apps .cv-scene { background: linear-gradient(135deg, #f6effa, #e8dcf0); }
.t-chat .cv-scene { background: linear-gradient(135deg, #ecf8f0, #d6efdf); }
.t-cakes .cv-scene { background: linear-gradient(135deg, #fdf0f4, #f8dbe5); }
.cv-scene * { font-style: normal; }

/* Tablet de la cocina (la usa «Todo tipo de negocio») */
.sc-tablet { position: absolute; left: 8px; top: 8px; bottom: 8px; width: 56%; padding: 6px; border-radius: 10px; background: #1b100a; color: #fff; }
.sc-bar { display: flex; align-items: center; gap: 4px; font-weight: 800; font-size: 9px; opacity: .9; }
.sc-bar .dot { width: 6px; height: 6px; border-radius: 50%; background: #3ad07a; }
.sc-bell { margin-left: auto; color: var(--saffron); display: inline-block; transform-origin: 50% 10%; animation: sc-bell 6s ease-in-out infinite; }
.sc-ticket { position: absolute; left: 6px; right: 6px; bottom: 6px; display: grid; gap: 2px; padding: 6px 7px; border-radius: 8px; color: var(--espresso); background: #fff; animation: sc-enter 6s var(--ease-out) infinite; }
.sc-ticket b { font-size: 10px; }
.sc-ticket small { font-size: 8.5px; color: var(--muted); }
.sc-btn { position: relative; justify-self: start; min-width: 66px; text-align: center; margin-top: 2px; padding: 3px 9px; border-radius: 99px; font-size: 8.5px; font-weight: 800; color: #fff; background: #2f9a57; animation: sc-btn 6s infinite; }
.sc-btn .b2 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; white-space: nowrap; opacity: 0; animation: sc-b2 6s infinite; }
.sc-btn .b1 { animation: sc-b1 6s infinite; }
@keyframes sc-enter { 0% { transform: translateX(115%); opacity: 0; } 8%, 92% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
@keyframes sc-bell { 0%, 8%, 30%, 100% { transform: rotate(0); } 12%, 20% { transform: rotate(18deg); } 16%, 24% { transform: rotate(-18deg); } }
@keyframes sc-btn { 0%, 30%, 34%, 100% { transform: none; } 32% { transform: scale(.88); } 35%, 95% { background: #1f6b3d; } }
@keyframes sc-b1 { 0%, 33% { opacity: 1; } 34%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sc-b2 { 0%, 33% { opacity: 0; } 34%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* Todo tipo de negocio: pedidos de 4 giros por turno (2 s cada uno) y se enciende su ícono */
.t-any .cv-scene { background: linear-gradient(135deg, #fff3e6, #ffe2c4); }
.sc-any .sc-tablet { width: 60%; }
.sc-rot { position: relative; display: inline-block; height: 12px; min-width: 70px; vertical-align: middle; }
.sc-rot > * { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; animation: sc-rot 8s infinite; animation-delay: calc(var(--n) * 2s); }
.sc-bar .sc-rot b { font-size: 9px; }
.sc-items { display: block; height: 11px; }
.sc-any .sc-ticket { animation: sc-enter2 2s var(--ease-out) infinite; }
.sc-any .sc-btn { animation: sc-btn2 2s infinite; }
.sc-any .sc-btn .b1 { animation: sc-b1x 2s infinite; }
.sc-any .sc-btn .b2 { animation: sc-b2x 2s infinite; }
.sc-any .sc-bell { animation: sc-bell 2s ease-in-out infinite; }
.sc-giros { position: absolute; right: 10px; top: 10px; bottom: 10px; width: calc(40% - 26px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; align-content: center; justify-items: center; }
.sc-giros i { display: grid; place-items: center; width: 100%; aspect-ratio: 1; max-width: 40px; border-radius: 12px; font-size: 16px; color: var(--g); background: #fff; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .4);
    animation: sc-glow 8s infinite; animation-delay: calc(var(--n) * 2s); }
.sc-giros b { grid-column: 1 / -1; font-size: 9px; font-weight: 800; color: var(--muted); }
@keyframes sc-rot { 0% { opacity: 0; transform: translateY(5px); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; } }
@keyframes sc-enter2 { 0% { transform: translateX(110%); } 14%, 100% { transform: none; } }
@keyframes sc-btn2 { 0%, 50%, 56%, 100% { transform: none; } 53% { transform: scale(.88); } 57%, 100% { background: #1f6b3d; } }
@keyframes sc-b1x { 0%, 54% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes sc-b2x { 0%, 54% { opacity: 0; } 56%, 100% { opacity: 1; } }
@keyframes sc-glow { 0% { color: var(--g); background: #fff; transform: none; } 4%, 21% { color: #fff; background: var(--g); transform: scale(1.12); } 25%, 100% { color: var(--g); background: #fff; transform: none; } }

/* Ya vendo en apps: el sello cae sobre la bolsa y un celular lo escanea */
.sc-bag { position: absolute; left: 12%; top: 12px; width: 32%; height: 86px; border-radius: 4px 4px 9px 9px; background: linear-gradient(180deg, #c99a6a, #b0814f); box-shadow: inset -6px 0 10px rgba(0, 0, 0, .12); }
.sc-fold { position: absolute; top: 0; left: 0; right: 0; height: 12px; border-radius: 4px 4px 0 0; background: #a8784a; }
.sc-sticker { position: absolute; left: 10%; right: 10%; top: 26px; display: grid; justify-items: center; gap: 1px; padding: 5px 3px; border-radius: 7px; background: #fff; box-shadow: 0 4px 8px -4px rgba(0, 0, 0, .5);
    animation: sc-stamp 6s var(--ease-spring) infinite; }
.sc-sticker i { font-size: 15px; color: #5e3a70; }
.sc-sticker b { font-size: 7.5px; white-space: nowrap; }
.sc-phone { position: absolute; right: 12%; top: 8px; width: 30%; height: 92px; padding: 5px; border-radius: 12px; background: #1b100a; animation: sc-phone 6s var(--ease-out) infinite; }
.sc-cam { position: relative; display: grid; place-items: center; height: 56px; border-radius: 8px; background: #2c1f17; color: #fff; font-size: 26px; overflow: hidden; }
.sc-scan { position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; background: #3ad07a; box-shadow: 0 0 8px #3ad07a; animation: sc-scan 6s ease-in-out infinite; }
.sc-ok { display: block; margin-top: 5px; padding: 3px 0; border-radius: 99px; text-align: center; font-size: 8.5px; font-weight: 800; color: #fff; background: #2f9a57; opacity: 0; animation: sc-okin 6s infinite; }
@keyframes sc-stamp { 0% { opacity: 0; transform: translateY(-40px) rotate(-22deg) scale(1.3); } 10% { opacity: 1; transform: translateY(1px) rotate(-6deg) scale(.95); } 14%, 92% { opacity: 1; transform: rotate(-6deg); } 100% { opacity: 0; transform: rotate(-6deg); } }
@keyframes sc-phone { 0%, 22% { transform: translateX(140%); } 32%, 92% { transform: none; } 100% { transform: translateX(140%); } }
@keyframes sc-scan { 0%, 34% { top: 6px; opacity: 0; } 36% { opacity: 1; } 48% { top: 48px; } 60% { top: 6px; opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes sc-okin { 0%, 62% { opacity: 0; transform: translateY(6px); } 66%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Vendo por WhatsApp: chats revueltos → link → pedido pagado */
.sc-chat { position: absolute; left: 8px; top: 8px; bottom: 8px; width: 58%; border-radius: 10px; overflow: hidden; background: #efe7dd; }
.sc-head { display: flex; align-items: center; gap: 4px; padding: 4px 7px; font-size: 9px; font-weight: 800; color: #fff; background: #1f8a5a; }
.sc-head b { margin-left: auto; padding: 0 5px; border-radius: 99px; color: #1f8a5a; background: #fff; }
.sc-b { position: absolute; left: 6px; max-width: 86%; padding: 3px 6px; border-radius: 8px 8px 8px 2px; font-size: 8.5px; white-space: nowrap; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); opacity: 0; }
.sc-b.b1 { top: 24px; animation: sc-chat1 6.5s infinite; }
.sc-b.b2 { top: 42px; left: auto; right: 6px; animation: sc-chat2 6.5s infinite; }
.sc-b.b3 { top: 60px; animation: sc-chat3 6.5s infinite; }
.sc-b.sc-link { top: auto; bottom: 6px; left: auto; right: 6px; border-radius: 8px 8px 2px 8px; background: #d9fdd3; font-weight: 800; animation: sc-chatlink 6.5s infinite; }
.sc-order { position: absolute; right: 8px; top: 14px; width: calc(42% - 22px); display: grid; gap: 2px; padding: 8px; border-radius: 10px; background: #fff; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .45);
    opacity: 0; animation: sc-orderin 6.5s var(--ease-spring) infinite; }
.sc-order b { font-size: 10px; }
.sc-order small { font-size: 8.5px; color: var(--muted); }
.sc-order em { margin-top: 3px; padding: 2px 0; border-radius: 99px; text-align: center; font-size: 8.5px; font-weight: 800; color: #fff; background: #2f9a57; }
@keyframes sc-chat1 { 0%, 3% { opacity: 0; transform: translateY(6px); } 7%, 44% { opacity: 1; transform: rotate(-3deg); } 50%, 100% { opacity: 0; } }
@keyframes sc-chat2 { 0%, 12% { opacity: 0; transform: translateY(6px); } 16%, 44% { opacity: 1; transform: rotate(3deg); } 50%, 100% { opacity: 0; } }
@keyframes sc-chat3 { 0%, 21% { opacity: 0; transform: translateY(6px); } 25%, 44% { opacity: 1; transform: rotate(-2deg); } 50%, 100% { opacity: 0; } }
@keyframes sc-chatlink { 0%, 34% { opacity: 0; transform: translateY(6px); } 38%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sc-orderin { 0%, 52% { opacity: 0; transform: translateY(14px) scale(.9); } 58%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Pastelerías y florerías: elige el 12 y las 5:00 pm, paga y queda apartado */
.sc-cal { position: absolute; left: 8px; top: 8px; bottom: 8px; width: 56%; padding: 6px; border-radius: 10px; background: #fff; }
.sc-calhead { display: block; font-size: 9px; font-weight: 800; margin-bottom: 4px; }
.sc-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.sc-days i { display: grid; place-items: center; height: 17px; border-radius: 5px; font-size: 8.5px; font-weight: 700; background: var(--cream); }
.sc-days .d12 { animation: sc-day 6s infinite; }
.sc-time { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 99px; font-size: 8.5px; font-weight: 800; border: 1px solid var(--line); animation: sc-time 6s infinite; }
.sc-cake { position: absolute; right: 8px; top: 12px; width: calc(44% - 24px); display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; text-align: center;
    color: #fff; background: linear-gradient(135deg, #e0628a, #a83a5f); opacity: 0; animation: sc-cake 6s var(--ease-spring) infinite; }
.sc-cake i { font-size: 18px; }
.sc-cake b { font-size: 9px; }
.sc-cake em { padding: 1px 6px; border-radius: 99px; font-size: 8px; font-weight: 800; color: #a83a5f; background: #fff; }
@keyframes sc-day { 0%, 18% { background: var(--cream); color: inherit; transform: none; } 20% { transform: scale(.85); } 22%, 94% { background: #e0628a; color: #fff; transform: none; } 100% { background: var(--cream); } }
@keyframes sc-time { 0%, 36% { background: #fff; color: inherit; } 38% { transform: scale(.88); } 40%, 94% { background: var(--espresso); color: #fff; transform: none; } 100% { background: #fff; } }
@keyframes sc-cake { 0%, 50% { opacity: 0; transform: translateY(16px) scale(.9); } 56%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cv-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* La corona («Tu app»): tarjeta ancha arriba. La página de su pedido se vuelve ícono, vuela a su celular y pide «lo de siempre». */
.cv-mega-card.is-feature { grid-column: 1 / -1; background: radial-gradient(420px 140px at 0% 50%, rgba(255, 154, 90, .2), transparent 70%), #fff7f4; border-color: #f6cdc7; }
.cv-feature-copy { display: grid; gap: 3px; }
.cv-feature-copy > strong { font-size: 1.1rem; }
.cv-feature-copy > small { font-size: .84rem; color: var(--muted); line-height: 1.35; }
.cv-crown { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #b5294e; }
.cv-crown svg { color: #e8a317; }
@media (min-width: 992px) {
    .cv-mega-card.is-feature { flex-direction: row; align-items: center; gap: 18px; }
    .cv-mega-card.is-feature .cv-scene { flex: 0 0 320px; }
}
.t-app .cv-scene { background: radial-gradient(120% 120% at 100% 0%, #ffd0b8, #ffe8df 60%, #fff3ee); }
.sc-apbox { position: absolute; left: 50%; top: 8px; width: 300px; height: 92px; margin-left: -150px; }
.sc-appage { position: absolute; left: 10px; top: 4px; width: 62px; height: 84px; display: grid; align-content: start; gap: 4px; padding: 0 0 6px; border-radius: 9px; overflow: hidden; background: #fff;
    box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .45); transform-origin: 50% 50%; animation: sc-appage 8s var(--ease-out) infinite; }
.sc-appage i { display: block; height: 5px; margin: 0 7px; border-radius: 4px; background: #eee6f0; }
.sc-appage i.h { height: 18px; margin: 0 0 3px; border-radius: 0; background: linear-gradient(135deg, #8b5ba0, #5e3a70); }
.sc-appage i.s { width: 60%; }
.sc-appage em { margin: auto 6px 0; padding: 3px 0; border-radius: 6px; text-align: center; font-size: 7px; font-weight: 800; color: #fff; background: #e8505b; animation: sc-appadd 8s infinite; }
.sc-apfly { position: absolute; left: 28px; top: 33px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 9px; font-weight: 800; color: #fff;
    background: url("/img/app-192.png") center / cover; box-shadow: 0 6px 12px -6px rgba(40, 10, 60, .7); opacity: 0; animation: sc-apfly 8s cubic-bezier(.5, -0.2, .3, 1.2) infinite; }
.sc-apphone { position: absolute; left: 190px; top: 0; width: 64px; height: 92px; padding: 6px; border-radius: 14px; background: #1b100a; }
.sc-apgrid { display: grid; grid-template-columns: repeat(3, 10px); gap: 4px; justify-content: center; align-content: start; height: 100%; padding-top: 8px; border-radius: 9px;
    background: radial-gradient(140% 90% at 15% 0%, #ffb37a 0%, #e8505b 48%, #5e3a70 100%); }
.sc-apgrid i { display: grid; place-items: center; width: 10px; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, .45); font-size: 4px; font-weight: 800; color: #fff; }
.sc-apgrid .sc-apslot { background: url("/img/app-192.png") center / cover; opacity: 0; animation: sc-apslot 8s var(--ease-spring) infinite; }
.sc-apagain { position: absolute; left: 82px; top: 26px; width: 100px; display: grid; gap: 3px; padding: 6px 7px; border-radius: 9px; background: #fff; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .45); opacity: 0;
    animation: sc-apagain 8s var(--ease-spring) infinite; }
.sc-apagain b { font-size: 8.5px; }
.sc-apagain em { position: relative; display: block; padding: 3px 0; border-radius: 6px; text-align: center; font-size: 7.5px; font-weight: 800; color: #fff; background: #e8505b; animation: sc-apbtn 8s infinite; }
.sc-apagain .a2 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; opacity: 0; animation: sc-apa2 8s infinite; }
.sc-apagain .a1 { animation: sc-apa1 8s infinite; }
@keyframes sc-appage { 0%, 15% { opacity: 1; transform: none; } 22% { opacity: 0; transform: scale(.35); } 96% { opacity: 0; transform: scale(.35); } 100% { opacity: 1; transform: none; } }
@keyframes sc-appadd { 0%, 9%, 13%, 100% { transform: none; } 11% { transform: scale(.85); } }
@keyframes sc-apfly { 0%, 17% { opacity: 0; transform: scale(1.6); } 21% { opacity: 1; transform: none; } 27% { transform: translate(60px, -30px) rotate(-10deg); } 38% { opacity: 1; transform: translate(181px, -13px) scale(.385); } 40%, 100% { opacity: 0; transform: translate(181px, -13px) scale(.385); } }
@keyframes sc-apslot { 0%, 38% { opacity: 0; transform: scale(.4); } 42% { opacity: 1; transform: scale(1.4); } 46%, 50% { transform: none; opacity: 1; } 52% { transform: scale(.75); } 55%, 94% { opacity: 1; transform: none; box-shadow: 0 0 0 2px #ffe08a; } 100% { opacity: 0; } }
@keyframes sc-apagain { 0%, 54% { opacity: 0; transform: translateX(14px) scale(.9); } 60%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sc-apbtn { 0%, 72% { background: #e8505b; transform: none; } 74% { transform: scale(.9); } 76%, 100% { background: #2f9a57; transform: none; } }
@keyframes sc-apa1 { 0%, 75% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes sc-apa2 { 0%, 75% { opacity: 0; } 76%, 100% { opacity: 1; } }

/* Pedidos con IA: le pide a su asistente, Click2Bite (el Pin) trabaja y el pedido llega pagado a la tablet */
.t-ai .cv-scene { background: linear-gradient(135deg, #f1effd, #e1dcfb); }
.sc-aichat { position: absolute; left: 8px; top: 8px; bottom: 8px; width: 58%; border-radius: 10px; overflow: hidden; background: #faf9fe; box-shadow: 0 0 0 1px #e6e2f4; }
.sc-aihead { display: flex; align-items: center; gap: 4px; padding: 4px 7px; font-size: 9px; font-weight: 800; color: #4532b8; background: #fff; border-bottom: 1px solid #ebe8f5; }
.sc-ab { position: absolute; padding: 3px 7px; font-size: 8.5px; white-space: nowrap; opacity: 0; }
.sc-ab.u { top: 24px; right: 6px; border-radius: 8px 8px 2px 8px; color: #fff; font-weight: 700; background: #6c5ce7; animation: sc-ai1 7s infinite; }
.sc-ab.t { top: 44px; left: 6px; display: inline-flex; align-items: center; gap: 3px; border-radius: 99px; font-weight: 800; color: #4532b8; background: #ebe8fd; animation: sc-ai2 7s infinite; }
.sc-ab.t img { width: 9px; height: auto; animation: ax-hop .4s ease-in-out infinite alternate; }
.sc-ab.a { top: 64px; left: 6px; border-radius: 8px 8px 8px 2px; background: #fff; box-shadow: 0 0 0 1px #ebe8f5; animation: sc-ai3 7s infinite; }
.sc-aitab { position: absolute; right: 8px; top: 12px; width: calc(42% - 22px); display: grid; gap: 2px; padding: 8px; border-radius: 10px; color: #fff; background: #1b100a; opacity: 0; animation: sc-ai4 7s var(--ease-spring) infinite; }
.sc-aitab b { font-size: 9.5px; }
.sc-aitab small { font-size: 8px; color: #b8adff; }
.sc-aitab em { margin-top: 3px; padding: 2px 0; border-radius: 99px; text-align: center; font-size: 8.5px; font-weight: 800; background: #2f9a57; }
@keyframes ax-hop { to { transform: translateY(-2px) rotate(6deg); } }
@keyframes sc-ai1 { 0%, 4% { opacity: 0; transform: translateY(6px); } 8%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sc-ai2 { 0%, 18% { opacity: 0; transform: translateY(6px); } 22%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sc-ai3 { 0%, 36% { opacity: 0; transform: translateY(6px); } 40%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sc-ai4 { 0%, 54% { opacity: 0; transform: translateX(16px) scale(.9); } 60%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Reparto propio: la moto sale del negocio (el Pin) y llega a la casa; «~6 min» → «Entregado» */
.t-fleet .cv-scene { background: linear-gradient(135deg, #eaf4fb, #d4e8f6); }
.sc-fmap { position: absolute; left: 8px; top: 8px; width: 150px; height: 92px; border-radius: 10px; overflow: hidden;
    background: linear-gradient(0deg, rgba(255, 255, 255, .5) 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px) 0 0 / 18px 18px, #e7efe2; }
.sc-fmap svg { position: absolute; left: 0; top: 0; }
.sc-fmap path { fill: none; stroke: #1f7fc4; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 6; }
.sc-fbiz { position: absolute; left: 24px; top: 70px; width: 18px; margin: -24px 0 0 -9px; animation: sc-fbob 1.4s ease-in-out infinite alternate; }
.sc-fbiz img { display: block; width: 100%; height: auto; }
@keyframes sc-fbob { to { transform: translateY(-3px); } }
.sc-fhome { position: absolute; left: 128px; top: 20px; display: grid; place-items: center; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 6px; font-size: 10px; color: #fff; background: #2f9a57; animation: sc-fhome 7s infinite; }
.sc-fmoto { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; font-size: 10px; color: #fff; background: #1f7fc4;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .3); offset-path: path("M24 70 C 52 70, 58 34, 92 32 S 124 22, 128 20"); offset-rotate: 0deg; animation: sc-fride 7s ease-in-out infinite; }
.sc-feta { position: absolute; right: 8px; top: 30px; width: calc(100% - 182px); display: grid; gap: 2px; padding: 8px; border-radius: 10px; background: #fff; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .45); }
.sc-feta small { font-size: 8px; font-weight: 800; color: #1f7fc4; }
.sc-feta b { position: relative; height: 13px; font-size: 10.5px; white-space: nowrap; }
.sc-feta .e2 { position: absolute; left: 8px; top: 24px; color: #1f7a45; opacity: 0; animation: sc-fe2 7s infinite; }
.sc-feta .e1 { animation: sc-fe1 7s infinite; }
.sc-fbar { display: block; height: 4px; margin-top: 4px; border-radius: 4px; background: #e6eef6; overflow: hidden; }
.sc-fbar i { display: block; height: 100%; width: 10%; border-radius: inherit; background: #1f7fc4; animation: sc-fbar 7s ease-in-out infinite; }
@keyframes sc-fride { 0%, 8% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 62%, 94% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes sc-fhome { 0%, 60% { transform: none; box-shadow: none; } 64% { transform: scale(1.25); } 68%, 94% { transform: none; box-shadow: 0 0 0 4px rgba(47, 154, 87, .3); } }
@keyframes sc-fe1 { 0%, 62% { opacity: 1; } 64%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sc-fe2 { 0%, 62% { opacity: 0; transform: translateY(4px); } 66%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sc-fbar { 0%, 8% { width: 10%; } 62%, 94% { width: 100%; background: #2f9a57; } 100% { width: 10%; } }

@media (min-width: 992px) {
    .mk-links { align-items: center; }
}
/* Laptops chicas: «Soluciones» sin la pastilla para que quepan Entrar y Prueba gratis («Clientes que vuelven» se oculta como «Preguntas»). */
@media (min-width: 992px) and (max-width: 1439.98px) {
    .cv-new { display: none; }
    .cv-sol-btn { padding: 5px 10px; font-size: .88rem; }
}
@media (min-width: 1200px) and (max-width: 1439.98px) { .mk-links { gap: 12px; } }
/* Celular y tableta: dentro del menú desplegable, con las 6 tarjetas primero. */
@media (max-width: 991.98px) {
    .mk-links.is-open { max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; }
    .mk-links.is-open .cv-sol { order: -1; display: block; }
    .cv-sol-btn { width: 100%; justify-content: flex-start; padding: 12px; margin-bottom: 6px; }
    .cv-sol-caret { margin-left: auto; }
    .cv-mega { position: static; width: auto; transform: none; animation: none; padding: 6px 0 10px; border: 0; box-shadow: none; background: transparent; }
    .cv-mega-head { display: none; }
    .cv-mega-grid { grid-template-columns: 1fr; gap: 8px; }
    .mk-links .cv-mega-card { padding: 8px 8px 10px; }
    .cv-scene { height: 96px; }
    .cv-mega-giros { margin: 12px 0 0; }
    .mk-links .cv-giro-chip { padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .mk-channels li, .mk-ch-pop, .cv-sol-btn::before, .cv-scene *, .cv-help, .cv-mega { animation: none !important; }
    .sc-ticket, .sc-sticker, .sc-ok, .sc-order, .sc-cake, .sc-b.sc-link, .sc-ab, .sc-aitab { opacity: 1 !important; transform: none !important; }
    .sc-fmoto { offset-distance: 70%; } .sc-fbar i { width: 70%; }
    .sc-apgrid .sc-apslot, .sc-apagain { opacity: 1 !important; transform: none !important; }
    .sc-apfly { display: none; }
    .sc-phone { transform: none !important; }
    .sc-btn .b1 { opacity: 0; } .sc-btn .b2 { opacity: 1; }
    .sc-rot > :first-child { opacity: 1 !important; }
    .mk-ch-pop { display: none; }
}
