/* Estilos de la landing pública (antes incrustados en resources/views/landing/layout.blade.php).
   Fuera del HTML para que el navegador los guarde en caché entre páginas: cada página pesaba ~100 KB más. */
:root {
    --green: #00c853;
    --green-bright: #00e676;
    --green-deep: #00994d;
    --cyan: #00b0ff;
    --violet: #6c4bff;

    --bg: #ffffff;
    --bg-soft: #f4f9f6;
    --bg-mist: #eef5f1;
    --ink: #08130d;          /* headings */
    --body-txt: #47605a;     /* paragraphs */
    --muted: #7d938c;
    --line: rgba(8, 19, 13, 0.08);
    --line-soft: rgba(8, 19, 13, 0.05);
    --glass: rgba(255, 255, 255, 0.65);
    --shadow-sm: 0 2px 10px rgba(8, 30, 20, 0.05);
    --shadow-md: 0 18px 50px -18px rgba(8, 40, 26, 0.18);
    --shadow-lg: 0 40px 90px -30px rgba(8, 45, 28, 0.28);
    --radius: 20px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* 🔴 `overflow-x: hidden` TAMBIÉN en `html`, no solo en `body`. El scroll
   horizontal ocurre en el elemento raíz: con solo el `body` tapado, en un
   teléfono de 320 px la página seguía desbordando (medido: 362 px de contenido
   en 320 de pantalla) por los anillos decorativos del hero, un `span.b2` y el
   botón de hamburguesa. Es seguro aquí porque la nav es `position: fixed` y NO
   hay ni un solo elemento `sticky` en la página —verificado en el navegador—,
   que es lo único que este arreglo rompería. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--body-txt);
    overflow-x: hidden;
    position: relative;
}

h1, h2, h3, h4, h5 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.14;
    color: var(--ink);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--green), var(--cyan)); border-radius: 4px; }
::selection { background: rgba(0,200,83,.18); color: var(--ink); }

/* ═══ AMBIENT FX: aurora + dot grid + cursor spotlight ═══ */
.fx-aurora {
    position: fixed; inset: 0; z-index: -2;
    overflow: hidden; pointer-events: none;
}
.fx-aurora span {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    mix-blend-mode: multiply;
}
.fx-aurora .b1 { width: 46vw; height: 46vw; left: -10vw; top: -8vw;  background: radial-gradient(circle at 30% 30%, rgba(0,230,118,.5), transparent 62%); animation: drift1 22s ease-in-out infinite; }
.fx-aurora .b2 { width: 40vw; height: 40vw; right: -8vw; top: 4vw;   background: radial-gradient(circle at 60% 40%, rgba(0,176,255,.42), transparent 62%); animation: drift2 26s ease-in-out infinite; }
.fx-aurora .b3 { width: 38vw; height: 38vw; left: 30vw; bottom: -14vw; background: radial-gradient(circle at 50% 50%, rgba(108,75,255,.28), transparent 60%); animation: drift3 30s ease-in-out infinite; }

@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6vw,4vw) scale(1.12)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-5vw,6vw) scale(1.08)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-4vw,-5vw) scale(1.15)} }

.fx-grid {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(8,19,13,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8,19,13,.045) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 78%);
            mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 78%);
}

.fx-spot {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 30%), rgba(0,200,83,.07), transparent 70%);
    transition: background .12s ease-out;
}

/* ═══ NAV ═══ */
nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 2.5rem; height: 74px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid transparent;
    transition: border-color .3s, box-shadow .3s, background .3s;
}
nav.scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); background: rgba(255,255,255,.85); }
nav .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
nav .logo-img { height: 46px; width: auto; object-fit: contain; }
nav .logo-fallback { display: flex; align-items: center; gap: .6rem; }
nav .logo-fallback .icon {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    border-radius: 11px; display: flex; align-items: center; justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.2rem; color: #fff;
    box-shadow: 0 6px 18px -6px rgba(0,200,83,.6);
}
nav .logo-fallback span { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; color: var(--ink); }
nav .logo-fallback .sub { font-size: .64rem; font-weight: 600; color: var(--green-deep); letter-spacing: .12em; text-transform: uppercase; display: block; line-height: 1; }

.nav-links { display: flex; align-items: center; gap: 2.2rem; }
.nav-links a { color: var(--body-txt); text-decoration: none; font-size: .9rem; font-weight: 600; letter-spacing: .01em; transition: color .2s; position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; right: 100%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--green), var(--cyan)); transition: right .25s ease; }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { right: 0; }

.btn-nav {
    background: linear-gradient(135deg, var(--ink), #16302320);
    background: var(--ink);
    color: #fff !important;
    padding: .62rem 1.4rem; border-radius: 50px;
    font-weight: 700 !important; font-size: .85rem !important; letter-spacing: .02em;
    transition: transform .15s, box-shadow .2s !important;
    box-shadow: 0 10px 24px -12px rgba(8,40,26,.6);
}
.btn-nav::after { display: none !important; }
.btn-nav:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(8,40,26,.7); }
.btn-nav i { color: var(--green-bright); }

.nav-mobile { display: none; align-items: center; gap: .35rem; }
.nav-login-m { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 50px; padding: .5rem .95rem; font-weight: 700; font-size: .85rem; text-decoration: none; box-shadow: var(--shadow-sm); min-height: 40px; }
.nav-login-m i { color: var(--green-deep); }
.drawer-login { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .75rem; border: 1px solid var(--line); border-radius: 50px; padding: .9rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.hamburger { display: none; background: none; border: none; color: var(--ink); font-size: 1.4rem; cursor: pointer; padding: .5rem; }

/* ═══ MOBILE MENU ═══ */
#mobile-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 285px; background: #fff; border-left: 1px solid var(--line); z-index: 2000; transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column; padding: 2rem 1.5rem; box-shadow: -20px 0 60px -30px rgba(0,0,0,.3); }
#mobile-drawer.open { transform: translateX(0); }
#mobile-overlay { position: fixed; inset: 0; background: rgba(8,19,13,.35); backdrop-filter: blur(3px); z-index: 1999; opacity: 0; pointer-events: none; transition: opacity .3s; }
#mobile-overlay.open { opacity: 1; pointer-events: all; }
.drawer-close { align-self: flex-end; background: none; border: none; color: var(--muted); font-size: 1.5rem; cursor: pointer; margin-bottom: 2rem; }
.drawer-links { display: flex; flex-direction: column; gap: 1.4rem; }
.drawer-links a { color: var(--ink); text-decoration: none; font-size: 1.05rem; font-weight: 600; transition: color .2s; }
.drawer-links a:hover { color: var(--green-deep); }
.drawer-cta { margin-top: auto; background: var(--ink); color: #fff; border: none; border-radius: 50px; padding: 1rem; font-weight: 700; font-size: 1rem; text-align: center; text-decoration: none; display: block; }
.drawer-cta i { color: var(--green-bright); }

/* ═══ HERO ═══ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hero-inner {
    max-width: 1240px; margin: 0 auto; width: 100%;
    padding: 8.5rem 2rem 4rem;
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center;
    position: relative; z-index: 2;
}

.hero-badge {
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--glass); backdrop-filter: blur(10px);
    border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    border-radius: 50px; padding: .45rem 1rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .04em;
    color: var(--green-deep); text-transform: uppercase;
    margin-bottom: 1.75rem;
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(0,200,83,.5); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(0,200,83,.5)} 50%{box-shadow:0 0 0 7px rgba(0,200,83,0)} }

/* 🔴 El titular pasó de 6 palabras a 11 («Tu restaurante vende por WhatsApp,
   incluso cuando tú no estás»). Con los 4.3rem de antes ocupaba CINCO líneas en
   escritorio y empujaba los botones fuera de la primera pantalla: la frase larga
   pide cuerpo más chico, no más alto. */
.hero h1 { font-size: clamp(2.2rem, 3.9vw, 3.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; margin-bottom: 1.35rem; }
.hero h1 .accent { position: relative; background: linear-gradient(100deg, var(--green-deep), var(--cyan) 60%, var(--violet)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero p.lead { font-size: clamp(1rem, 1.6vw, 1.18rem); color: var(--body-txt); max-width: 540px; line-height: 1.72; margin-bottom: 2.2rem; }
.hero p.lead strong { color: var(--ink); font-weight: 700; }

.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-primary {
    display: inline-flex; align-items: center; gap: .6rem;
    background: linear-gradient(135deg, var(--green), var(--green-deep));
    color: #fff; padding: .95rem 1.9rem; border-radius: 50px;
    font-weight: 700; font-size: .95rem; text-decoration: none;
    transition: transform .2s, box-shadow .25s;
    box-shadow: 0 16px 34px -14px rgba(0,180,80,.7);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -14px rgba(0,180,80,.85); }
.btn-secondary {
    display: inline-flex; align-items: center; gap: .6rem;
    background: #fff; border: 1px solid var(--line); color: var(--ink);
    padding: .95rem 1.9rem; border-radius: 50px; font-weight: 700; font-size: .95rem;
    text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { border-color: rgba(0,200,83,.4); transform: translateY(-3px); box-shadow: var(--shadow-md); }

.hero-trust { margin-top: 2rem; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.hero-trust .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }
.hero-trust i { color: var(--green); margin-right: .3rem; }

/* Hero visual — Agent console */
.hero-visual { position: relative; height: 100%; min-height: 460px; display: flex; align-items: center; justify-content: center; }
.orbit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.orbit .ring { position: absolute; border: 1px dashed rgba(8,19,13,.1); border-radius: 50%; }
.orbit .ring.r1 { width: 340px; height: 340px; animation: spin 40s linear infinite; }
.orbit .ring.r2 { width: 470px; height: 470px; animation: spin 60s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.orbit .node {
    position: absolute; width: 46px; height: 46px; border-radius: 14px;
    background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md);
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
    color: var(--green-deep);
}
.orbit .node.n1 { top: 6%; left: 44%; color: #12b76a; }
.orbit .node.n2 { top: 40%; right: 2%; color: var(--cyan); }
.orbit .node.n3 { bottom: 8%; left: 12%; color: var(--violet); }
.orbit .node.n4 { bottom: 26%; right: 8%; color: #f59e0b; }
.orbit .node::after { content: ''; position: absolute; inset: 0; border-radius: 14px; box-shadow: 0 0 0 6px rgba(0,200,83,.06); animation: haloPulse 3s ease-in-out infinite; }
@keyframes haloPulse { 0%,100%{opacity:.4} 50%{opacity:1} }

.agent-card {
    position: relative; z-index: 3; width: min(360px, 100%);
    background: var(--glass); backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid rgba(255,255,255,.7); border-radius: 24px;
    box-shadow: var(--shadow-lg); padding: 1.1rem 1.1rem 1.25rem;
    animation: floatCard 6s ease-in-out infinite;
}
@keyframes floatCard { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.agent-head { display: flex; align-items: center; gap: .7rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line-soft); margin-bottom: .9rem; }
.agent-avatar { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--green), var(--cyan)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.05rem; box-shadow: 0 8px 18px -8px rgba(0,200,83,.7); }
.agent-head .who { flex: 1; }
.agent-head .who .nm { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: .92rem; color: var(--ink); }
.agent-head .who .st { font-size: .72rem; color: var(--green-deep); display: flex; align-items: center; gap: .35rem; }
.agent-head .who .st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(0,200,83,.6); animation: pulse 2s infinite; }
.agent-head .waz { color: #25d366; font-size: 1.25rem; }

.bubble { max-width: 82%; padding: .6rem .8rem; border-radius: 14px; font-size: .82rem; line-height: 1.45; margin-bottom: .5rem; opacity: 0; transform: translateY(6px); animation: bubbleIn .5s ease var(--d, 0s) forwards; }
.bubble.in { background: #eef4f1; color: var(--ink); border-bottom-left-radius: 4px; }
.bubble.out { background: linear-gradient(135deg, var(--green), var(--green-deep)); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
/* Orden del chat: cliente → ACCIÓN del agente → respuesta → cliente → ACCIÓN.
   El retardo va en una variable para que burbujas y acciones compartan reloj. */
.s1 { --d: .3s; } .s2 { --d: 1.1s; } .s3 { --d: 2.3s; } .s4 { --d: 3.1s; } .s5 { --d: 3.9s; }
/* ═══ LO QUE EL AGENTE HACE entre mensaje y mensaje ═══
   Es la prueba visible de que no es un bot de respuestas: entre la pregunta y la
   contestación el agente CONSULTA, VERIFICA y REGISTRA. El engranaje gira mientras
   «trabaja» y se convierte en check al terminar. */
.agent-act { display: flex; align-items: center; gap: .45rem; margin: .1rem 0 .55rem; padding: .38rem .6rem; border: 1px dashed rgba(108,75,255,.35); border-radius: 10px; background: linear-gradient(90deg, rgba(108,75,255,.06), rgba(0,200,83,.06)); font-size: .7rem; font-weight: 600; color: #4c3fb8; opacity: 0; transform: translateY(6px); animation: bubbleIn .45s ease var(--d, 0s) forwards; }
.agent-act .aa-lbl { font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); white-space: nowrap; }
.agent-act .aa-ic { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.agent-act .aa-ic i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .72rem; }
.agent-act .aa-run { color: var(--violet); animation: spin .8s linear var(--d, 0s) 2, aaGone 0s linear calc(var(--d, 0s) + 1.6s) forwards; }
.agent-act .aa-ok { color: var(--green-deep); opacity: 0; animation: bubbleIn .3s ease calc(var(--d, 0s) + 1.6s) forwards; }
@keyframes aaGone { to { opacity: 0; } }

/* ═══ DUELO: bot tradicional vs agente de IA ═══
   🔴 El contenido NACE VISIBLE. Solo el JS le pone `.armed` (y lo esconde para
   animarlo) cuando hay JS y no se pidió reducir movimiento. Sin JS, o con «reducir
   movimiento», se lee la conversación entera: es la misma lección de las burbujas
   del hero que salían en blanco (4-sep-2026). */
.duel { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; max-width: 980px; margin: 2rem auto 1rem; }
.duel-col { border-radius: 22px; padding: 1.2rem; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.duel-col.agent { border-color: rgba(0,200,83,.35); box-shadow: 0 24px 50px -30px rgba(0,160,70,.55); background: linear-gradient(170deg, #f3fcf7, #fff 40%); }
.duel-head { display: flex; align-items: center; gap: .6rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: .95rem; color: var(--ink); padding-bottom: .8rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line-soft); }
.duel-head > i { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.duel-col.bot .duel-head > i { background: #f1f3f5; color: #6b7280; }
.duel-col.agent .duel-head > i { background: linear-gradient(135deg, var(--violet), var(--green)); color: #fff; }
.duel-head small { display: block; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .7rem; color: var(--muted); }
.duel-chat { display: flex; flex-direction: column; flex: 1; }
.dm { max-width: 88%; padding: .55rem .75rem; border-radius: 14px; font-size: .82rem; line-height: 1.45; margin-bottom: .5rem; }
.dm.in { background: #eef4f1; color: var(--ink); border-bottom-left-radius: 4px; }
.dm.out { background: linear-gradient(135deg, var(--green), var(--green-deep)); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.dm.out-bot { background: #f3f4f6; color: #4b5563; margin-left: auto; border-bottom-right-radius: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .76rem; }
.dm.think { max-width: 100%; display: flex; gap: .5rem; align-items: flex-start; font-size: .74rem; font-weight: 600; color: #4c3fb8; border: 1px dashed rgba(108,75,255,.35); border-radius: 10px; background: linear-gradient(90deg, rgba(108,75,255,.05), rgba(0,200,83,.12), rgba(108,75,255,.05)); background-size: 200% 100%; }
.dm.think i { color: var(--violet); margin-top: .15rem; }
.dm.end { max-width: 100%; margin-top: auto; text-align: center; font-weight: 800; font-size: .8rem; border-radius: 12px; padding: .65rem .8rem; }
.dm.end.bad { background: rgba(239,68,68,.08); color: #b91c1c; }
.dm.end.good { background: rgba(0,200,83,.12); color: var(--green-deep); }
.duel.armed .dm { opacity: 0; transform: translateY(8px); }
.duel.armed.play .dm { animation: bubbleIn .45s ease calc(var(--t) * .9s + .2s) forwards; }
.duel.armed.play .dm.think { animation: bubbleIn .45s ease calc(var(--t) * .9s + .2s) forwards, shimmer 2.4s linear calc(var(--t) * .9s + .6s) infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.duel-replay { display: none; justify-content: center; margin-bottom: 1.5rem; }
.duel.armed + .duel-replay { display: flex; }
.duel-replay button { display: inline-flex; align-items: center; gap: .45rem; background: #fff; border: 1px solid var(--line); border-radius: 50px; padding: .5rem 1.1rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .8rem; color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); }
.duel-replay button:hover { border-color: rgba(0,200,83,.4); }

/* ═══ PANEL DE EJEMPLO: la actividad del agente entra fila a fila ═══ */
.dash-note { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9fb8ab; }
.dash-row .aa-tag { display: inline-flex; align-items: center; gap: .25rem; font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #b8a8ff; margin-top: .15rem; }
.dashboard-wrap.in .dash-row { animation: bubbleIn .5s ease both; animation-delay: calc(var(--i) * .45s + .4s); }
@keyframes bubbleIn { to { opacity: 1; transform: translateY(0); } }
.agent-foot { margin-top: .7rem; display: flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .55rem .75rem; font-size: .78rem; color: var(--muted); }
.agent-foot i { color: var(--green); }
.agent-tag { position: absolute; top: -14px; right: 18px; background: var(--ink); color: #fff; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .35rem .75rem; border-radius: 50px; box-shadow: var(--shadow-md); }
.agent-tag i { color: var(--green-bright); }

/* ═══ STATS STRIP ═══ */
.stats-strip { position: relative; z-index: 2; max-width: 1100px; margin: -1rem auto 0; padding: 0 2rem; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat-item { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1.4rem 1.2rem; text-align: center; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.stat-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stat-item .val { font-family: 'Plus Jakarta Sans'; font-size: 2rem; font-weight: 800; background: linear-gradient(120deg, var(--green-deep), var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-item .lbl { font-size: .76rem; color: var(--muted); margin-top: .35rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* ═══ SECTIONS COMMON ═══ */
section { position: relative; z-index: 1; }
.section-inner { max-width: 1200px; margin: 0 auto; padding: 6rem 2rem; }
.section-label { display: inline-flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green-deep); margin-bottom: .85rem; background: rgba(0,200,83,.08); padding: .35rem .8rem; border-radius: 50px; }
.section-title { font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -.025em; margin-bottom: 1rem; }
.section-title .g { background: linear-gradient(100deg, var(--green-deep), var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.section-sub { color: var(--body-txt); font-size: 1.05rem; line-height: 1.7; max-width: 580px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.two-col.reverse > *:first-child { order: 2; }
.two-col.reverse > *:last-child { order: 1; }

.bg-soft { background: var(--bg-soft); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

/* ═══ REVEAL ═══ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ═══ PROBLEM ═══ */
.problem-visual { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg); }
.problem-visual img { width: 100%; height: 470px; object-fit: cover; display: block; }
.problem-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0,200,83,.12), transparent 55%), linear-gradient(0deg, rgba(8,19,13,.28), transparent 45%); }
.problem-float { position: absolute; bottom: 18px; left: 18px; right: 18px; z-index: 2; background: var(--glass); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.6); border-radius: 16px; padding: 1rem 1.15rem; display: flex; align-items: center; gap: .9rem; box-shadow: var(--shadow-md); }
.problem-float .pf-ic { width: 38px; height: 38px; border-radius: 10px; background: rgba(239,68,68,.12); color: #ef4444; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.problem-float .pf-t { font-size: .84rem; color: var(--ink); font-weight: 700; }
.problem-float .pf-s { font-size: .74rem; color: var(--muted); }

.pain-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; margin-top: 1.75rem; }
.pain-list li { display: flex; align-items: flex-start; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.05rem 1.2rem; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.pain-list li:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.pain-icon { width: 34px; height: 34px; flex-shrink: 0; background: rgba(239,68,68,.1); border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #ef4444; font-size: .8rem; }
.pain-list h4 { font-size: .96rem; font-weight: 700; margin-bottom: .2rem; }
.pain-list p { font-size: .86rem; color: var(--muted); }

/* ═══ COMPARISON ═══ */
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 3rem; }
.comp-col { padding: 2.4rem; border-radius: 22px; }
.comp-col.old { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.comp-col.new { position: relative; overflow: hidden; background: linear-gradient(160deg, #06231a, #041710); border: 1px solid rgba(0,230,118,.25); box-shadow: var(--shadow-lg); color: #cdeadd; }
.comp-col.new::before { content: ''; position: absolute; top: -70px; right: -70px; width: 240px; height: 240px; background: radial-gradient(var(--green-bright), transparent 70%); opacity: .22; }
.comp-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.comp-icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.comp-col.old .comp-icon { background: #eef4f1; color: var(--muted); }
.comp-col.new .comp-icon { background: rgba(0,230,118,.18); color: var(--green-bright); }
.comp-title { font-family: 'Plus Jakarta Sans'; font-size: 1.2rem; font-weight: 800; }
.comp-col.old .comp-title { color: var(--muted); }
.comp-col.new .comp-title { color: #fff; }
.comp-list { list-style: none; display: flex; flex-direction: column; gap: .85rem; }
.comp-list li { display: flex; align-items: center; gap: .8rem; font-size: .9rem; }
.comp-col.old .comp-list li { color: var(--body-txt); }
.comp-col.new .comp-list li { color: #b9e5cf; }
.ic-bad { color: #ef4444; }
.ic-good { color: var(--green-bright); }

/* ═══ SECTORS ═══ */
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

.sector-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
/* La vitrina son 6 tarjetas: a 240px caen 4+2 y queda un hueco que parece
   un error. A 300px caen 3+3 en escritorio y 2+2+2 en tableta.
   El `min(300px, 100%)` es obligatorio: un minmax de 300px fijo DESBORDA
   en un telefono de 320px, porque la pista no puede encoger por debajo
   de su minimo y saca barra horizontal a toda la pagina. */
.sector-cards.vitrina { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); max-width: 1080px; margin-inline: auto; }
.sector-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1.6rem; transition: border-color .2s, transform .2s, box-shadow .2s; box-shadow: var(--shadow-sm); }
.sector-card:hover { border-color: rgba(0,200,83,.35); transform: translateY(-5px); box-shadow: var(--shadow-md); }
.sector-card .s-icon { width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 1.1rem; }
.sector-card h4 { font-family: 'Plus Jakarta Sans'; font-size: 1.02rem; font-weight: 700; margin-bottom: .5rem; }
.sector-card p { font-size: .86rem; color: var(--muted); line-height: 1.55; }

.sector-cta { margin-top: 2.25rem; border-radius: 20px; padding: 2rem 2.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; position: relative; overflow: hidden; }
.sector-cta h3 { font-family: 'Plus Jakarta Sans'; font-size: 1.2rem; font-weight: 700; margin-bottom: .35rem; color: #fff; }
.sector-cta p { font-size: .9rem; }
.btn-white { display: inline-flex; align-items: center; gap: .5rem; background: #fff; color: var(--ink); padding: .8rem 1.6rem; border-radius: 50px; font-weight: 700; font-size: .86rem; text-decoration: none; white-space: nowrap; transition: transform .2s; box-shadow: var(--shadow-md); }
.btn-white:hover { transform: translateY(-2px); }
.btn-white i { color: #25d366; }

/* ═══ PAGOS destacado card ═══ */
.sector-card.hot { border-color: rgba(0,200,83,.4); background: linear-gradient(160deg, #f2fbf6, #fff); box-shadow: 0 20px 50px -22px rgba(0,180,80,.35); }
.exclusive-tag { display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--green-deep); background: rgba(0,200,83,.12); padding: .22rem .65rem; border-radius: 50px; margin-bottom: .65rem; }

/* ═══ DASHBOARD MOCKUP (dark inset) ═══ */
.dashboard-wrap { background: linear-gradient(165deg, #08130d, #0d1f16); border: 1px solid rgba(0,230,118,.14); border-radius: 24px; padding: 1.35rem; box-shadow: var(--shadow-lg); }
.dash-topbar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 1rem; margin-bottom: 1.25rem; }
.dash-title { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: .95rem; color: #fff; }
.dash-dots { display: flex; gap: .4rem; }
.dash-dots span { width: 10px; height: 10px; border-radius: 50%; }
.dash-dot-r { background: #f87171; } .dash-dot-y { background: #fbbf24; } .dash-dot-g { background: var(--green-bright); }
.dash-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.dash-metric { border-radius: 13px; padding: 1rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.dash-metric .mk { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .4rem; }
.dash-metric .mv { font-family: 'Plus Jakarta Sans'; font-size: 1.5rem; font-weight: 800; }
.dash-row { display: flex; align-items: center; gap: .8rem; padding: .8rem; border-radius: 13px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); margin-bottom: .5rem; }
.dash-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--cyan)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .78rem; color: #fff; flex-shrink: 0; }
.dash-row-info { flex: 1; }
.dash-row-info .n { font-size: .85rem; font-weight: 600; color: #eaf5ef; }
.dash-row-info .d { font-size: .72rem; color: #7d9c8d; margin-top: .1rem; }
.dash-badge { font-size: .67rem; font-weight: 700; padding: .25rem .6rem; border-radius: 20px; }
.badge-ok { background: rgba(0,230,118,.14); color: var(--green-bright); }
.badge-pend { background: rgba(0,176,255,.14); color: #6fd0ff; }

.control-feat { display: flex; gap: 1rem; align-items: flex-start; }
.control-feat .cf-ic { width: 44px; height: 44px; flex-shrink: 0; background: rgba(0,200,83,.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--green-deep); }
.control-feat h4 { font-family: 'Plus Jakarta Sans'; font-weight: 700; margin-bottom: .3rem; font-size: .98rem; }
.control-feat p { font-size: .87rem; color: var(--muted); }

/* ═══ SECURITY ═══ */
.security-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3rem; }
.sec-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 2rem; transition: border-color .2s, transform .2s, box-shadow .2s; box-shadow: var(--shadow-sm); }
.sec-card:hover { border-color: rgba(0,200,83,.3); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.sec-card .si { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, rgba(0,200,83,.12), rgba(0,176,255,.12)); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--green-deep); margin-bottom: 1.1rem; }
.sec-card h4 { font-family: 'Plus Jakarta Sans'; font-size: 1.02rem; font-weight: 700; margin-bottom: .6rem; }
.sec-card p { font-size: .86rem; color: var(--muted); line-height: 1.6; }

/* ═══ TESTIMONIOS ═══ */
.testi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 3rem; }
.testi-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1.9rem; display: flex; flex-direction: column; transition: border-color .2s, transform .2s, box-shadow .2s; box-shadow: var(--shadow-sm); }
.testi-card:hover { border-color: rgba(0,200,83,.3); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testi-stars { color: #fbbf24; font-size: .9rem; margin-bottom: 1rem; letter-spacing: .12em; }
.testi-quote { font-size: .95rem; line-height: 1.7; color: var(--ink); margin-bottom: 1.4rem; flex: 1; }
.testi-author { display: flex; align-items: center; gap: .85rem; }
.testi-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--cyan)); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex-shrink: 0; font-family: 'Plus Jakarta Sans'; font-size: .9rem; }
.testi-author .ta-name { font-weight: 700; font-size: .9rem; color: var(--ink); }
.testi-author .ta-biz { font-size: .8rem; color: var(--muted); }

/* ═══ PLANES ═══ */
.planes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3rem; align-items: stretch; }
.plan-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 2.25rem 1.75rem; display: flex; flex-direction: column; position: relative; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.plan-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.plan-card.featured { border-color: rgba(0,200,83,.4); background: linear-gradient(165deg, #f2fbf6, #fff); box-shadow: 0 30px 60px -28px rgba(0,180,80,.4); }
.plan-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--green), var(--green-deep)); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .05em; padding: .38rem 1rem; border-radius: 50px; text-transform: uppercase; white-space: nowrap; box-shadow: 0 10px 20px -10px rgba(0,180,80,.8); }
/* 🔴 ALTURA FIJA + `cover`: las tres tarjetas van en una rejilla y una captura más
   alta que las otras las desalinearía. Recortar por el centro mantiene la fila
   pareja sin deformar la imagen. */
.plan-foto { display: block; width: 100%; height: 210px; object-fit: cover; object-position: top center; border: 1px solid var(--line); border-radius: 12px; margin: 1rem 0 1.25rem; background: var(--bg-soft); }
.plan-name { font-family: 'Plus Jakarta Sans'; font-size: 1.1rem; font-weight: 700; color: var(--body-txt); margin-bottom: .75rem; }
.plan-price { font-family: 'Plus Jakarta Sans'; font-size: 2.8rem; font-weight: 800; color: var(--ink); line-height: 1; }
.plan-price span { font-size: 1rem; font-weight: 500; color: var(--muted); }
.plan-msgs { font-size: .85rem; color: var(--green-deep); margin: .6rem 0 1.5rem; font-weight: 700; }
.plan-feats { list-style: none; display: flex; flex-direction: column; gap: .7rem; margin-bottom: 2rem; flex: 1; }
.plan-feats li { display: flex; align-items: flex-start; gap: .6rem; font-size: .87rem; color: var(--body-txt); }
.plan-feats li i { color: var(--green); font-size: .75rem; margin-top: .25rem; flex-shrink: 0; }
.plan-feats li.off { color: var(--muted); }
.plan-feats li.off i { color: var(--muted); }
.plan-contratar {
    display: block; text-align: center; margin-top: .6rem;
    padding: .75rem 1rem; border-radius: 50px;
    border: 1px solid var(--green); color: var(--green-deep);
    font-weight: 700; font-size: .88rem; text-decoration: none;
    transition: background .2s, color .2s;
}
.plan-contratar:hover { background: var(--green); color: #fff; }
.plan-cta { display: block; text-align: center; background: #fff; border: 1px solid var(--line); color: var(--ink); padding: .9rem; border-radius: 12px; font-weight: 700; font-size: .9rem; text-decoration: none; transition: all .2s; }
.plan-cta:hover { border-color: rgba(0,200,83,.5); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.plan-cta.f { background: linear-gradient(135deg, var(--green), var(--green-deep)); color: #fff; border-color: transparent; box-shadow: 0 14px 30px -14px rgba(0,180,80,.8); }
.plan-cta.f:hover { box-shadow: 0 18px 36px -14px rgba(0,180,80,.9); }

/* ═══ EMPEZAR GRATIS ═══ */
.empezar-section { position: relative; overflow: hidden; }
.empezar-inner { max-width: 1200px; margin: 0 auto; padding: 6.5rem 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }
.empezar-text .desc { color: var(--body-txt); font-size: 1.05rem; line-height: 1.75; margin-bottom: 2rem; }
.empezar-perks { list-style: none; display: flex; flex-direction: column; gap: .85rem; margin-bottom: 2rem; }
.empezar-perks li { display: flex; align-items: center; gap: .9rem; font-size: .95rem; color: var(--ink); }
.empezar-perks .pk-icon { width: 28px; height: 28px; flex-shrink: 0; background: rgba(0,200,83,.12); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--green-deep); font-size: .75rem; }

.empezar-card { background: linear-gradient(165deg, #08130d, #0d2318); border: 1px solid rgba(0,230,118,.22); border-radius: 28px; padding: 2.5rem; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.empezar-card::before { content: ''; position: absolute; top: -60px; right: -60px; width: 240px; height: 240px; background: radial-gradient(var(--green-bright), transparent 70%); opacity: .18; }
.empezar-badge-top { display: inline-flex; align-items: center; gap: .5rem; background: rgba(0,230,118,.14); border: 1px solid rgba(0,230,118,.3); color: var(--green-bright); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .4rem .9rem; border-radius: 50px; margin-bottom: 1.5rem; }
.empezar-heading { font-family: 'Plus Jakarta Sans'; font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .75rem; color: #fff; }
.empezar-heading span { background: linear-gradient(100deg, var(--green-bright), var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.empezar-card > p { color: #9fbcae; font-size: .95rem; line-height: 1.65; margin-bottom: 2rem; }


.btn-empezar { display: flex; align-items: center; justify-content: center; gap: .75rem; width: 100%; background: linear-gradient(135deg, var(--green-bright), var(--green-deep)); color: #04140c; padding: 1.1rem 2rem; border-radius: 14px; font-weight: 800; font-size: 1.05rem; text-decoration: none; border: none; cursor: pointer; transition: transform .2s, box-shadow .2s; box-shadow: 0 14px 34px -12px rgba(0,230,118,.6); font-family: 'Plus Jakarta Sans'; }
.btn-empezar:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -12px rgba(0,230,118,.75); }
.empezar-disclaimer { text-align: center; font-size: .78rem; color: #7d9c8d; margin-top: 1rem; }
.empezar-disclaimer i { color: var(--green-bright); margin-right: .3rem; }
.empezar-included { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); }
.empezar-included .pi-lbl { font-size: .72rem; color: #7d9c8d; text-align: center; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .1em; }
.empezar-included .pi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.empezar-included .pi-grid div { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: #cdeadd; }
.empezar-included .pi-grid i { color: var(--green-bright); }

/* ═══ FAQ ═══ */
.faq-list { display: flex; flex-direction: column; gap: .75rem; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.4rem; transition: box-shadow .2s, border-color .2s; }
.faq-item[open] { box-shadow: var(--shadow-md); border-color: rgba(0,200,83,.25); }
.faq-item summary { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: .95rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--green-deep); font-size: 1.4rem; font-weight: 400; flex-shrink: 0; transition: transform .2s; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { color: var(--muted); font-size: .88rem; line-height: 1.65; margin-top: .9rem; }

/* ═══ CTA FINAL ═══ */
.cta-box { position: relative; overflow: hidden; background: linear-gradient(155deg, #08130d, #0d2318); border-radius: 32px; padding: 5rem 3rem; text-align: center; box-shadow: var(--shadow-lg); }
.cta-box::before { content: ''; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 620px; height: 360px; background: radial-gradient(var(--green-bright), transparent 65%); opacity: .16; }
.cta-box::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent 75%); }
.cta-box > * { position: relative; z-index: 1; }
.cta-box h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin-bottom: 1.25rem; color: #fff; }
.cta-box p { color: #9fbcae; font-size: 1.1rem; margin-bottom: 2.5rem; max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cta-box .btn-secondary { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; }
.cta-box .btn-secondary:hover { background: rgba(255,255,255,.12); }

/* ═══ FOOTER ═══ */
footer { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 4rem 2rem 2rem; }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line); margin-bottom: 2rem; }
.footer-logo-img { height: 46px; width: auto; object-fit: contain; margin-bottom: 1rem; }
.footer-about { font-size: .87rem; color: var(--muted); line-height: 1.65; margin-bottom: 1.5rem; }
.footer-socials { display: flex; gap: .7rem; }
.footer-socials a { width: 38px; height: 38px; background: #fff; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .9rem; transition: all .2s; text-decoration: none; }
.footer-socials a:hover { background: var(--green); color: #fff; border-color: transparent; transform: translateY(-2px); }
.footer-col h5 { font-family: 'Plus Jakarta Sans'; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 1.25rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.footer-col ul li a { font-size: .86rem; color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-col ul li a:hover { color: var(--green-deep); }
.footer-contact-item { display: flex; align-items: flex-start; gap: .7rem; font-size: .86rem; color: var(--muted); margin-bottom: .7rem; }
.footer-contact-item i { color: var(--green-deep); margin-top: .15rem; flex-shrink: 0; }
.libro-reclamaciones {
    display: flex; align-items: center; gap: 1rem;
    border: 2px solid var(--ink); border-radius: var(--radius);
    padding: 1rem 1.25rem; margin: 2rem 0 0; text-decoration: none;
    transition: border-color .2s, background .2s;
}
.libro-reclamaciones:hover { border-color: var(--green); background: var(--bg-soft); }
.libro-reclamaciones .libro-icono { font-size: 1.7rem; }
.libro-reclamaciones strong { display: block; color: var(--ink); font-size: .97rem; }
.libro-reclamaciones span span { display: block; color: var(--muted); font-size: .87rem; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--muted); flex-wrap: wrap; gap: 1rem; }
.footer-bottom a { color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-bottom a:hover { color: var(--green-deep); }

/* ═══ COPILOTO IA ═══ */
.copilot-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 440px; }
.copilot-glow { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(108,75,255,.16), transparent 65%); filter: blur(18px); }
.copilot-card {
    position: relative; z-index: 2; width: min(390px, 100%);
    background: var(--glass); backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid rgba(255,255,255,.7); border-radius: 24px;
    box-shadow: var(--shadow-lg); padding: 1.15rem 1.15rem 1.3rem;
}
.copilot-head { display: flex; align-items: center; gap: .7rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line-soft); margin-bottom: 1rem; }
.copilot-spark { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--violet), var(--cyan)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; box-shadow: 0 8px 18px -8px rgba(108,75,255,.7); }
.copilot-head .ct { flex: 1; }
.copilot-head .ct .nm { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: .92rem; color: var(--ink); }
.copilot-head .ct .st { font-size: .72rem; color: var(--violet); }
.cop-q { max-width: 82%; margin-left: auto; background: #eef4f1; color: var(--ink); border-radius: 14px; border-bottom-right-radius: 4px; padding: .55rem .8rem; font-size: .83rem; margin-bottom: .6rem; }
.cop-a { max-width: 90%; background: linear-gradient(135deg, #f4f0ff, #eef6ff); border: 1px solid rgba(108,75,255,.15); color: var(--ink); border-radius: 14px; border-bottom-left-radius: 4px; padding: .7rem .85rem; font-size: .84rem; line-height: 1.5; margin-bottom: .8rem; }
.cop-a strong { color: var(--violet); }
.cop-metric { display: flex; gap: .5rem; }
.cop-metric .cm { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .6rem .7rem; text-align: center; }
.cop-metric .cm .v { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.cop-metric .cm .k { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: .1rem; }
.cop-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.cop-chips span { font-size: .72rem; color: var(--violet); background: rgba(108,75,255,.08); border: 1px solid rgba(108,75,255,.15); border-radius: 50px; padding: .3rem .7rem; }
.copilot-fab { position: absolute; bottom: 12px; right: 12px; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, var(--violet), var(--cyan)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; box-shadow: 0 14px 30px -10px rgba(108,75,255,.7); z-index: 3; animation: floatCard 5s ease-in-out infinite; }

.copilot-benefits { list-style: none; display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.75rem; }
.copilot-benefits li { display: flex; gap: 1rem; align-items: flex-start; }
.copilot-benefits .cb-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: linear-gradient(135deg, rgba(108,75,255,.12), rgba(0,176,255,.12)); display: flex; align-items: center; justify-content: center; color: var(--violet); font-size: 1rem; }
.copilot-benefits h4 { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: .98rem; margin-bottom: .2rem; }
.copilot-benefits p { font-size: .87rem; color: var(--muted); line-height: 1.55; }
.copilot-note { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.75rem; background: rgba(108,75,255,.08); color: var(--violet); font-size: .78rem; font-weight: 700; padding: .45rem 1rem; border-radius: 50px; }

/* ═══ META PROVIDER ═══ */
.meta-section { position: relative; overflow: hidden; }
.meta-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; }
.meta-glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(0,129,255,.18), transparent 65%); filter: blur(20px); }
.meta-card {
    position: relative; z-index: 2; width: min(400px, 100%);
    background: var(--glass); backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid rgba(255,255,255,.7); border-radius: 26px;
    box-shadow: var(--shadow-lg); padding: 2.25rem 2rem; text-align: center;
}
.meta-logo { width: 82px; height: 82px; border-radius: 22px; margin: 0 auto 1.1rem; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: #fff; background: linear-gradient(135deg, #0081fb, #6c4bff); box-shadow: 0 18px 40px -14px rgba(0,129,255,.6); }
.meta-partner { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 1.25rem; color: var(--ink); }
.meta-partner-sub { font-size: .8rem; color: var(--muted); margin-top: .25rem; letter-spacing: .04em; text-transform: uppercase; }
.meta-connector { height: 34px; width: 2px; margin: 1rem auto; background: linear-gradient(var(--cyan), var(--green)); position: relative; }
.meta-connector::after { content: '\f063'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); color: var(--green); font-size: .8rem; }
.meta-wa-chip { display: inline-flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--line); border-radius: 50px; padding: .55rem 1.1rem; box-shadow: var(--shadow-sm); font-size: .9rem; font-weight: 700; color: var(--ink); }
.meta-wa-chip .wa { color: #25d366; font-size: 1.15rem; }
.meta-wa-chip .vf { color: #0081fb; font-size: .95rem; }
.meta-approved { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.25rem; background: rgba(0,200,83,.1); color: var(--green-deep); font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .4rem .9rem; border-radius: 50px; }
.meta-benefits { list-style: none; display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.75rem; }
.meta-benefits li { display: flex; gap: 1rem; align-items: flex-start; }
.meta-benefits .mb-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: linear-gradient(135deg, rgba(0,129,255,.12), rgba(108,75,255,.12)); display: flex; align-items: center; justify-content: center; color: #0081fb; font-size: 1rem; }
.meta-benefits h4 { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: .98rem; margin-bottom: .2rem; }
.meta-benefits p { font-size: .87rem; color: var(--muted); line-height: 1.55; }

/* ═══ HERO: palabra de rubro rotativa + tubería del flujo ═══
   🔴 La palabra rota entre los 5 rubros de la vitrina, PERO el HTML nace con
   «restaurante» escrito: sin JS (o con `prefers-reduced-motion`) la frase se
   lee entera igual, y el buscador indexa una frase real, no un hueco.
   Solo se desvanece y vuelve: sin escalado ni recorte, para que el cambio no
   llame más la atención que la frase. */
.rot .rot-w, .rot .rot-a { display: inline-block; transition: opacity .35s ease, transform .35s ease; }
/* El degradado marca el SUJETO; el verbo va en tinta normal. Pintar los dos de
   color dejaba media frase en degradado y el titular perdía el punto de apoyo. */
.rot .rot-w { background: linear-gradient(100deg, var(--green-deep), var(--cyan) 60%, var(--violet)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rot.swap .rot-w, .rot.swap .rot-a { opacity: 0; transform: translateY(-8px); }

.hero-pipe { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.6rem 0 2rem; }
.hero-pipe .pp { display: inline-flex; align-items: center; gap: .45rem; background: #fff; border: 1px solid var(--line); border-radius: 50px; padding: .45rem .9rem; font-size: .82rem; font-weight: 700; color: var(--ink); box-shadow: var(--shadow-sm); white-space: nowrap; }
.hero-pipe .pp i { color: var(--green-deep); font-size: .78rem; }
.hero-pipe .ar { color: var(--muted); font-size: .7rem; }

/* ═══ CÓMO COMPRA TU CLIENTE (flujo por rubro) ═══ */
.flow-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 2.5rem; }
.flow-tab { display: inline-flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--line); color: var(--body-txt); border-radius: 50px; padding: .6rem 1.15rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .85rem; cursor: pointer; transition: border-color .2s, color .2s, background .2s, box-shadow .2s; box-shadow: var(--shadow-sm); }
.flow-tab:hover { border-color: rgba(0,200,83,.4); color: var(--ink); }
.flow-tab[aria-selected="true"] { background: var(--ink); border-color: transparent; color: #fff; box-shadow: 0 12px 26px -14px rgba(8,40,26,.7); }
.flow-tab[aria-selected="true"] i { color: var(--green-bright); }

.flow-panel[hidden] { display: none; }
.flow-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.flow-step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.25rem 1.15rem; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.flow-step:hover { transform: translateY(-4px); border-color: rgba(0,200,83,.35); box-shadow: var(--shadow-md); }
.flow-step .fs-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(0,200,83,.1); color: var(--green-deep); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: .82rem; margin-bottom: .8rem; }
.flow-step h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .95rem; font-weight: 700; margin-bottom: .35rem; }
.flow-step p { font-size: .84rem; color: var(--muted); line-height: 1.55; }
/* El paso del cliente y el que hace NSA se distinguen a simple vista: la promesa
   es «esto lo hace solo», y si todos los pasos se pintan igual no se ve cuál. */
.flow-step.by-nsa { background: linear-gradient(160deg, #f2fbf6, #fff); border-color: rgba(0,200,83,.28); }
.flow-step .fs-tag { position: absolute; top: .85rem; right: .9rem; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green-deep); }
.flow-foot { display: flex; align-items: center; gap: .85rem; margin-top: 1.75rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.3rem; box-shadow: var(--shadow-sm); }
.flow-foot i { color: var(--green-deep); font-size: 1.1rem; }
.flow-foot p { font-size: .89rem; color: var(--body-txt); line-height: 1.6; }
.flow-foot strong { color: var(--ink); }

@media (max-width: 760px) {
    .duel { grid-template-columns: 1fr; }
}

/* ═══════════ 3D (28-sep-2026) ═══════════
   Todo con transformaciones CSS: nada de librerías ni CDN nuevos (la CSP del panel
   va en Report-Only, pero el día que se active no hay que acordarse de esto). */

/* Giroscopio: los anillos del hero giran en TRES planos distintos alrededor del agente. */
.orbit { perspective: 900px; transform-style: preserve-3d; }
.orbit .ring { border: 1.5px solid rgba(0,200,83,.22); box-shadow: 0 0 24px rgba(0,200,83,.08) inset; }
.orbit .ring.r1 { animation: gyro1 16s linear infinite; }
.orbit .ring.r2 { border-color: rgba(0,176,255,.2); animation: gyro2 22s linear infinite; }
.orbit .ring.r3 { width: 400px; height: 400px; border-color: rgba(108,75,255,.2); animation: gyro3 28s linear infinite; }
@keyframes gyro1 { from { transform: rotateX(68deg) rotateZ(0); } to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes gyro2 { from { transform: rotateY(66deg) rotateZ(0); } to { transform: rotateY(66deg) rotateZ(-360deg); } }
@keyframes gyro3 { from { transform: rotateX(-55deg) rotateY(35deg) rotateZ(0); } to { transform: rotateX(-55deg) rotateY(35deg) rotateZ(360deg); } }

/* La tarjeta del agente se inclina hacia el cursor, con un brillo que lo sigue. */
.hero-visual { perspective: 1100px; }
.tilt3d { position: relative; z-index: 3; width: min(360px, 100%); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; transform-style: preserve-3d; }
.tilt3d .agent-card { width: 100%; }
.tilt3d::after { content: ''; position: absolute; inset: 0; border-radius: 24px; pointer-events: none; z-index: 4; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.35), transparent 45%); opacity: var(--glare, 0); transition: opacity .3s; }

/* Burbujas y acciones entran VOLTEÁNDOSE desde abajo (bisagra en su base). */
@keyframes flipUp { from { opacity: 0; transform: perspective(600px) rotateX(-65deg) translateY(8px); } to { opacity: 1; transform: none; } }
.bubble, .agent-act { transform-origin: 50% 100%; animation-name: flipUp; }
.duel.armed.play .dm { transform-origin: 50% 100%; animation-name: flipUp; }
.duel.armed.play .dm.think { animation-name: flipUp, shimmer; }

/* Duelo: las dos columnas entran girando desde los lados; al final el chatbot tradicional se
   hunde hacia atrás y en gris, y el agente se adelanta. La moneda «VS» gira entre ambos. */
.duel { position: relative; perspective: 1400px; }
.duel-col { transform-style: preserve-3d; transition: filter .6s; }
.duel.armed .duel-col { opacity: 0; }
.duel.armed.play .duel-col.bot { animation: colInL .8s cubic-bezier(.2,.7,.2,1) forwards, botLoses .9s ease 4.6s forwards; }
.duel.armed.play .duel-col.agent { animation: colInR .8s cubic-bezier(.2,.7,.2,1) .1s forwards, agentWins .9s ease 6.4s forwards; }
@keyframes colInL { from { opacity: 0; transform: rotateY(35deg) translateZ(-180px) translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes colInR { from { opacity: 0; transform: rotateY(-35deg) translateZ(-180px) translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes botLoses { from { opacity: 1; transform: none; filter: none; } to { opacity: 1; transform: rotateY(14deg) rotateX(5deg) translateZ(-90px); filter: grayscale(.9) opacity(.75); } }
@keyframes agentWins { from { opacity: 1; transform: none; } to { opacity: 1; transform: translateZ(50px) rotateY(-5deg); box-shadow: 0 40px 70px -30px rgba(0,160,70,.7); } }
.duel-vs { position: absolute; left: 50%; top: 42%; z-index: 5; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: linear-gradient(135deg, var(--ink), #1f3b2d); color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 34px -12px rgba(8,19,13,.6), 0 0 0 5px #fff; transform-style: preserve-3d; }
.duel-vs span { background: linear-gradient(100deg, var(--green-bright), var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.duel.armed .duel-vs { opacity: 0; }
.duel.armed.play .duel-vs { animation: vsSpin 1.3s cubic-bezier(.2,.7,.2,1) .5s forwards; }
@keyframes vsSpin { from { opacity: 0; transform: perspective(500px) rotateY(-540deg) scale(.3); } to { opacity: 1; transform: perspective(500px) rotateY(0) scale(1); } }

/* Secciones que emergen en perspectiva, y cifras que se voltean una tras otra. */
.reveal { transform: perspective(1200px) rotateX(10deg) translateY(34px); transform-origin: 50% 0; }
.stats-row { perspective: 900px; }
.stats-row.reveal { transform: none; }
.stats-row .stat-item { opacity: 0; transform: rotateX(-90deg); transform-origin: 50% 0; }
.stats-row.in .stat-item { animation: statFlip .7s cubic-bezier(.2,.7,.2,1) forwards; }
.stats-row.in .stat-item:nth-child(2) { animation-delay: .12s; }
.stats-row.in .stat-item:nth-child(3) { animation-delay: .24s; }
.stats-row.in .stat-item:nth-child(4) { animation-delay: .36s; }
@keyframes statFlip { to { opacity: 1; transform: none; } }

/* Filas del panel de ejemplo: entran girando sobre su eje vertical. */
@keyframes rowIn3d { from { opacity: 0; transform: perspective(700px) rotateY(-40deg) translateX(-24px); } to { opacity: 1; transform: none; } }
.dashboard-wrap.in .dash-row { animation: rowIn3d .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * .45s + .4s); }

/* Tarjetas que se inclinan bajo el mouse (el JS pone --rx/--ry; solo con ratón). */
.tilt-card { transition: transform .2s ease-out, box-shadow .2s, border-color .2s; }
.tilt-card.tilting { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px) !important; }

@media (max-width: 760px) {
    .duel { grid-template-columns: 1fr; }
    .duel-vs { position: relative; left: auto; top: auto; margin: -.2rem auto; order: 0; }
}

/* ═══════════ P1/P2 (28-sep-2026) ═══════════ */
/* Por qué NSA: los cuatro diferenciales que ningún competidor local junta. */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.5rem; perspective: 1000px; }
.why-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1.3rem 1.2rem; box-shadow: var(--shadow-sm); }
.why-card .wi { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: .8rem; background: linear-gradient(135deg, rgba(0,200,83,.14), rgba(108,75,255,.12)); color: var(--green-deep); font-size: 1.05rem; }
.why-card h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .95rem; font-weight: 800; margin-bottom: .35rem; }
.why-card p { font-size: .84rem; color: var(--muted); line-height: 1.55; }

/* Precio en SOLES primero; el dólar queda como referencia. */
.plan-usd { font-size: .8rem; color: var(--muted); font-weight: 600; margin-top: .35rem; }
.plan-links { display: flex; justify-content: center; gap: .9rem; flex-wrap: wrap; margin-top: .8rem; font-size: .82rem; }
.plan-links a { color: var(--green-deep); font-weight: 700; text-decoration: none; }
.plan-links a:hover { text-decoration: underline; }

/* Garantía: la misma condición que la política de devoluciones, dicha corta. */
.garantia { display: flex; align-items: center; gap: 1rem; max-width: 760px; margin: 2rem auto 0; background: #fff; border: 1px solid rgba(0,200,83,.35); border-radius: 18px; padding: 1.1rem 1.3rem; box-shadow: 0 18px 40px -28px rgba(0,160,70,.6); }
.garantia .gi { width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; background: linear-gradient(135deg, var(--green), var(--green-deep)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.garantia p { font-size: .9rem; color: var(--body-txt); line-height: 1.55; }
.garantia strong { color: var(--ink); }
.garantia a { color: var(--green-deep); font-weight: 700; }

/* Confianza: subtítulos dentro de la sección fusionada. */
.sub-block { margin-top: 4.5rem; }
.sub-head { text-align: center; margin-bottom: 1.5rem; }
.sub-head h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.sub-head p { color: var(--muted); font-size: .95rem; margin-top: .35rem; }

.demo-alt { text-align: center; margin-top: 1.25rem; font-size: .88rem; color: var(--muted); }
.demo-alt a { color: var(--green-deep); font-weight: 700; }
.nav-demo { display: inline-flex; align-items: center; gap: .35rem; }
.nav-demo i { color: #25d366; }

/* La barra tiene 9 elementos: por debajo de 1120 px ya no caben en una línea y los
   enlaces se partían en dos («Cómo / funciona»). Ahí pasa al menú móvil. */
.nav-links a { white-space: nowrap; }
@media (max-width: 1120px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .nav-mobile { display: flex; }
}
@media (max-width: 960px) {
    .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .why-grid { grid-template-columns: 1fr; }
    .garantia { flex-direction: column; text-align: center; }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 960px) {
    .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 7rem; text-align: center; }
    .hero-badge { margin-left: auto; margin-right: auto; }
    .hero p.lead { margin-left: auto; margin-right: auto; }
    .hero-ctas, .hero-trust { justify-content: center; }
    /* 🔴 En el teléfono manda el TITULAR, no la ilustración. La tarjeta del chat
       iba primera (`order: -1`) y empujaba la promesa —«tu restaurante vende por
       WhatsApp aunque tú no estés»— por debajo de una pantalla entera de adorno.
       Con el mensaje nuevo eso es enterrar justo lo que hay que leer. */
    .hero-visual { min-height: 420px; }
}
@media (max-width: 960px) {
    .hero-pipe { justify-content: center; }
    .flow-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    nav { padding: 0 1.25rem; }
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .nav-mobile { display: flex; }
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .comparison-grid { grid-template-columns: 1fr; }
    .security-cards { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .two-col { grid-template-columns: 1fr; gap: 2.5rem; }
    .two-col.reverse > *:first-child { order: 1; }
    .two-col.reverse > *:last-child { order: 2; }
    .empezar-inner { grid-template-columns: 1fr; gap: 3rem; padding: 5rem 1.5rem; }
    .planes-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
    .testi-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .hero h1 { font-size: 2.3rem; }
    .flow-steps { grid-template-columns: 1fr; }
    .flow-tab { font-size: .8rem; padding: .5rem .9rem; }
    .stats-row { grid-template-columns: 1fr 1fr; }
    .sector-cards { grid-template-columns: 1fr; }
    .comp-col, .cta-box { padding: 2.5rem 1.5rem; }
    .footer-grid { grid-template-columns: 1fr; }
}
/* 🔴 POLÍTICA NUEVA (28-sep-2026). Antes esta regla apagaba TODAS las animaciones y
   en el PC de Oscar —que tiene «reducir movimiento» activado— la portada no se movía
   nada: «no veo animaciones». Ahora, con esa preferencia, se apaga solo lo que se
   mueve SIN PARAR o sigue al cursor (auroras, giroscopio, flotación, pulsos, brillo,
   inclinación). Las ENTRADAS —una vez, cortas— se mantienen: el duelo, las burbujas,
   las cifras. El JS hace lo mismo con la inclinación (ver `quieto`). */
@media (prefers-reduced-motion: reduce) {
    .fx-aurora span, .orbit .ring, .orbit .node::after, .agent-card, .copilot-fab,
    .hero-badge .dot, .agent-head .who .st::before, .agent-act .aa-run { animation: none !important; }
    .orbit .ring.r1 { transform: rotateX(68deg); }
    .orbit .ring.r2 { transform: rotateY(66deg); }
    .orbit .ring.r3 { transform: rotateX(-55deg) rotateY(35deg); }
    .duel.armed.play .dm.think { animation-name: flipUp !important; }
    /* 🔴 BUG REAL, CAZADO EN EL NAVEGADOR EL 4-SEP-2026: apagar las animaciones
       dejaba el chat de ejemplo del hero EN BLANCO. Las tres burbujas nacen con
       `opacity: 0` y solo las revelaba la animación `bubbleIn`; a quien tiene
       «reducir movimiento» activado en su sistema —Windows lo pone solo en modo
       ahorro— la prueba principal de la portada le salía vacía y no se veía en
       ninguna captura. Quitar el movimiento nunca puede esconder el contenido. */
    .agent-act .aa-run { display: none; }
    .agent-act .aa-ok { opacity: 1; animation: none !important; }
}
/* ── Páginas internas (fuera de la portada): cabecera propia, menú activo y resumen de planes ── */
.page-head { padding: 7rem 1.5rem 0; text-align: center; }
.page-head .section-inner { padding-top: 0; padding-bottom: 0; }
.page-head .section-sub { margin: 0 auto; }
.page-head + section .section-inner { padding-top: 1.5rem; }
.page-head + section .cat-grupo:first-child { margin-top: 0; }
.nav-links a[aria-current="page"] { color: var(--green-deep); font-weight: 700; }
.drawer-links a[aria-current="page"] { color: var(--green-deep); font-weight: 700; }
.mini-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.25rem; max-width: 980px; margin: 0 auto; }
.mini-planes .plan-card { text-align: center; }
.cat-grupo { margin-top: 2.5rem; }
.cat-grupo > h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.15rem; color: var(--ink); margin-bottom: 1rem; }
.cat-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.cat-tabla { width: 100%; border-collapse: collapse; }
.cat-tabla th, .cat-tabla td { padding: .9rem 1rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; font-size: .92rem; }
.cat-tabla thead th { background: var(--bg-soft); color: var(--ink); font-family: 'Plus Jakarta Sans', sans-serif; font-size: .85rem; }
.cat-tabla td.pl, .cat-tabla th.pl { text-align: center; white-space: nowrap; width: 1%; }
.cat-tabla tr:last-child td { border-bottom: 0; }
.cat-nombre { font-weight: 700; color: var(--ink); display: block; }
.cat-nombre i { color: var(--green-deep); margin-right: .45rem; width: 1.1rem; text-align: center; }
.cat-texto { color: var(--body-txt); display: block; margin-top: .2rem; font-size: .88rem; }
.cat-si { color: var(--green-deep); font-weight: 700; }
.cat-no { color: var(--muted); }
.cat-nota { display: block; color: var(--muted); font-size: .76rem; margin-top: .15rem; }
@media (max-width: 680px) {
    .cat-tabla th, .cat-tabla td { padding: .7rem .6rem; font-size: .84rem; }
    .cat-tabla td.pl, .cat-tabla th.pl { white-space: normal; }
}