/* ==========================================================================
   GaonaSoft — Vitrina (landing) — Etapa 5 (marketing)
   Marca: azul/navy del logo + acento cálido para acciones.
   ========================================================================== */

:root {
    --navy-900: #081428;
    --navy-800: #0d214f;
    --navy-700: #16316e;
    --blue-600: #2563eb;
    --blue-500: #3b82f6;
    --cyan-400: #38bdf8;
    --accent: #f97316;
    --accent-hover: #ea6a0c;
    --wa: #25d366;
    --wa-hover: #1ebe5b;

    --ink: #0f172a;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-400: #94a3b8;

    --bg: #ffffff;
    --bg-soft: #f8fafc;
    --border: #e2e8f0;

    --radius: 14px;
    --radius-lg: 22px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 10px 25px -8px rgba(15, 23, 42, .15);
    --shadow-lg: 0 30px 60px -18px rgba(13, 33, 79, .35);
    --maxw: 1160px;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 22px;
}

section { scroll-margin-top: 84px; }

/* ---- Botones ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-weight: 600;
    font-size: 1rem;
    padding: 13px 24px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 20px; height: 20px; }

.btn-accent {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 8px 20px -6px rgba(249, 115, 22, .5);
}
.btn-accent:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(249, 115, 22, .55); }

.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 8px 20px -6px rgba(37, 211, 102, .5); }
.btn-wa:hover { background: var(--wa-hover); transform: translateY(-2px); }

.btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .28); }
.btn-ghost:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }

.btn-outline { background: transparent; color: var(--navy-800); border-color: var(--border); }
.btn-outline:hover { border-color: var(--navy-700); transform: translateY(-2px); }

.btn-lg { padding: 16px 30px; font-size: 1.06rem; }
.btn-block { width: 100%; }

/* ---- Navbar ---- */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: box-shadow .25s ease, border-color .25s ease;
}
.nav.scrolled { box-shadow: var(--shadow-sm); border-color: var(--border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.22rem; color: var(--navy-800); letter-spacing: -.02em; }
.brand img { width: 38px; height: 38px; border-radius: 9px; }
.brand span b { color: var(--accent); }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a.link { font-weight: 500; color: var(--slate-600); font-size: .96rem; transition: color .15s; }
.nav-links a.link:hover { color: var(--navy-800); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-login { font-weight: 600; color: var(--navy-800); font-size: .96rem; }
.nav-login:hover { color: var(--accent); }

.hamburger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; color: var(--navy-800); }
.hamburger svg { width: 28px; height: 28px; }

/* ---- Hero ---- */
.hero {
    position: relative;
    background: radial-gradient(1200px 600px at 80% -10%, #1b3d86 0%, transparent 55%),
                linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 100%);
    color: #fff;
    padding: 92px 0 110px;
    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .06) 1px, transparent 0);
    background-size: 34px 34px;
    opacity: .6;
    pointer-events: none;
}
.hero-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: center; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(56, 189, 248, .14);
    border: 1px solid rgba(56, 189, 248, .3);
    color: var(--cyan-400);
    padding: 7px 15px; border-radius: 999px; font-size: .84rem; font-weight: 600; margin-bottom: 22px;
}
.hero h1 {
    font-size: clamp(1.9rem, 3.6vw, 2.85rem);
    line-height: 1.12;
    letter-spacing: -.03em;
    font-weight: 800;
    margin-bottom: 20px;
}
.hero h1 .grad {
    background: linear-gradient(100deg, var(--cyan-400), var(--blue-500));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p.lead { font-size: 1.16rem; color: rgba(255, 255, 255, .82); max-width: 540px; margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.hero-stack { color: rgba(255, 255, 255, .55); font-size: .86rem; font-weight: 500; margin-bottom: 22px; }
.hero-stack span { color: rgba(255, 255, 255, .3); margin: 0 2px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 20px 26px; color: rgba(255, 255, 255, .7); font-size: .92rem; }
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust svg { width: 18px; height: 18px; color: var(--cyan-400); }

/* Mockup del POS (foto real en un monitor de restaurante) */
.mockup { position: relative; }
.mock-photo {
    display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: var(--shadow-lg);
}
.mock-float {
    position: absolute; right: -14px; bottom: -18px; background: #fff; border-radius: 14px;
    box-shadow: var(--shadow-md); padding: 12px 15px; display: flex; align-items: center; gap: 11px; font-size: .82rem;
}
.mock-float .mf-dot { width: 34px; height: 34px; border-radius: 9px; background: rgba(37, 211, 102, .14); color: var(--wa); display: grid; place-items: center; }
.mock-float b { color: var(--navy-800); }

/* ---- Secciones genéricas ---- */
.section { padding: 88px 0; }
.section.alt { background: var(--bg-soft); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 54px; }
.eyebrow { color: var(--accent); font-weight: 700; font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; }
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); letter-spacing: -.025em; font-weight: 800; margin: 12px 0 14px; color: var(--navy-900); }
.section-head p { color: var(--slate-600); font-size: 1.08rem; }

/* ---- Apps (una tarjeta por app real) ---- */
.apps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.app-card {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 22px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.app-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #cdd8e8; }
.app-card .ai { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; background: linear-gradient(135deg, rgba(249, 115, 22, .14), rgba(251, 146, 60, .1)); color: var(--accent); }
.app-card .ai svg { width: 25px; height: 25px; }
.app-card h3 { font-size: 1.05rem; margin-bottom: 7px; color: var(--navy-900); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.app-card p { color: var(--slate-600); font-size: .93rem; }
.tag-pro { display: inline-block; background: rgba(249, 115, 22, .12); color: var(--accent-hover); font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }

/* ---- En acción (galería de fotos reales) ---- */
.gallery-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; }
.gallery-item { border-radius: var(--radius); overflow: hidden; background: var(--bg); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.gallery-item img { display: block; width: 100%; height: 360px; object-fit: cover; }
.gallery-caption { padding: 18px 20px; }
.gallery-caption b { display: block; font-size: .98rem; color: var(--navy-900); margin-bottom: 4px; }
.gallery-caption p { color: var(--slate-600); font-size: .88rem; line-height: 1.45; }

/* ---- Funciones (agrupadas por área) ---- */
.func-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: start; }
.func-group { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; }
.func-group-title { font-size: 1rem; font-weight: 800; letter-spacing: .02em; color: var(--navy-900); text-transform: uppercase; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.func-items { display: grid; gap: 16px; }
.func-item { display: flex; gap: 12px; align-items: flex-start; }
.func-item .fii { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(56, 189, 248, .14)); color: var(--blue-600); }
.func-item .fii svg { width: 18px; height: 18px; }
.func-item b { display: block; font-size: .92rem; color: var(--navy-900); margin-bottom: 2px; }
.func-item p { color: var(--slate-600); font-size: .84rem; line-height: 1.45; }

/* ---- Cómo funciona ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.steps-5 { grid-template-columns: repeat(5, 1fr); }
.step { text-align: center; position: relative; padding: 0 10px; }
.step .sn { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 16px; background: var(--navy-800); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.4rem; box-shadow: var(--shadow-md); }
.step h3 { font-size: 1.16rem; margin-bottom: 8px; color: var(--navy-900); }
.step p { color: var(--slate-600); }

/* ---- Planes ---- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 380px)); gap: 26px; justify-content: center; align-items: start; }
.plan {
    background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 34px 30px;
    position: relative; transition: transform .2s ease, box-shadow .2s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan.featured { border-color: var(--accent); box-shadow: var(--shadow-lg); }
.plan .ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; }
.plan .pname { font-weight: 700; color: var(--slate-600); font-size: 1.05rem; }
.plan .pclaim { font-weight: 800; color: var(--navy-900); font-size: 1.3rem; letter-spacing: -.015em; margin-top: 4px; }
.plan .price { display: flex; align-items: baseline; gap: 6px; margin: 12px 0 4px; }
.plan .price b { font-size: 2.6rem; font-weight: 800; color: var(--navy-900); letter-spacing: -.03em; }
.plan .price .per { color: var(--slate-500); font-weight: 500; }
.plan .price .iva { color: var(--slate-600); font-weight: 700; }
.plan .price-total { color: var(--slate-500); font-size: .84rem; margin-bottom: 14px; }
.plan .pdesc { color: var(--slate-500); font-size: .92rem; margin-bottom: 22px; }
.plan ul { list-style: none; margin-bottom: 26px; display: grid; gap: 12px; }
.plan li { display: flex; gap: 11px; align-items: flex-start; color: var(--slate-700); font-size: .96rem; }
.plan li svg { width: 20px; height: 20px; color: var(--wa); flex: none; margin-top: 1px; }
.plan li.muted { color: var(--slate-400); }
.plan li.muted svg { color: var(--slate-400); }

/* ---- CTA banner ---- */
.cta-band { background: linear-gradient(160deg, var(--navy-800), var(--navy-900)); color: #fff; border-radius: 26px; padding: 56px 40px; text-align: center; position: relative; overflow: hidden; }
/* Ancla del boton "Probar gratis" del nav: sin este margen, el nav sticky
   (z-index 100) taparia el titulo de la banda al aterrizar el scroll. */
#prueba-gratis { scroll-margin-top: 90px; }
/* pointer-events:none es OBLIGATORIO: este ::after es una grilla decorativa con
   inset:0 que cubre TODA la banda y, al ser el ultimo en el orden de pintado,
   queda ENCIMA del boton "Comenzar prueba gratis". Sin esto se comia el clic
   real (el boton "no hacia nada"); un clic sintetico via JS lo ocultaba porque
   salta el hit-testing. Confirmado con elementFromPoint. */
.cta-band::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0); background-size: 30px 30px; opacity: .5; pointer-events: none; }
.cta-band h2 { position: relative; font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -.02em; margin-bottom: 12px; }
.cta-band p { position: relative; color: rgba(255, 255, 255, .8); font-size: 1.1rem; margin-bottom: 26px; }
.cta-band .hero-actions { position: relative; justify-content: center; }

/* ---- Footer ---- */
.footer { background: var(--navy-900); color: rgba(255, 255, 255, .72); padding: 60px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer .brand { color: #fff; margin-bottom: 14px; }
.footer .fdesc { font-size: .95rem; max-width: 320px; }
.footer h4 { color: #fff; font-size: .9rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 16px; }
.footer ul { list-style: none; display: grid; gap: 11px; }
.footer ul a { color: rgba(255, 255, 255, .72); font-size: .95rem; transition: color .15s; }
.footer ul a:hover { color: #fff; }
.footer .contact-item { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: .95rem; color: inherit; text-decoration: none; }
.footer .contact-item svg { width: 18px; height: 18px; color: var(--cyan-400); flex: none; }
.footer a.contact-item:hover { text-decoration: underline; }
.socials { display: flex; gap: 12px; margin-top: 18px; }
.socials a { width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .08); display: grid; place-items: center; transition: background .18s, transform .18s; }
.socials a:hover { background: rgba(255, 255, 255, .18); transform: translateY(-2px); }
.socials a svg { width: 20px; height: 20px; color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 22px; text-align: center; font-size: .88rem; color: rgba(255, 255, 255, .55); }

/* ---- WhatsApp flotante ---- */
.wa-float {
    position: fixed; right: 20px; bottom: 22px; z-index: 90;
    width: 58px; height: 58px; border-radius: 50%; background: var(--wa);
    display: grid; place-items: center; box-shadow: 0 12px 28px -6px rgba(37, 211, 102, .6);
    transition: transform .2s ease; animation: wa-pulse 2.6s infinite;
    /* border-radius solo recorta lo VISUAL: el area clicable real sigue siendo
     * el cuadrado 58x58 completo (las 4 esquinas invisibles fuera del circulo
     * tambien responden al toque). Si un boton "Contratar" de la seccion de
     * planes queda cerca del borde inferior en cierto scroll, esas esquinas
     * invisibles pueden robarle el toque sin que se note nada raro. clip-path
     * recorta tambien el AREA CLICABLE al circulo real, sin cambiar como se ve. */
    clip-path: circle(50%);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 32px; height: 32px; color: #fff; }
@keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); } 70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }

/* ---- Animación de entrada ---- */
/* Solo opacidad, SIN transform: el translateY desplazaba la posición real del
 * elemento (y de sus hijos, ej. los botones "Contratar") durante los 700ms de
 * transición. Un toque justo en esa ventana (conexión lenta, o simplemente
 * tocar rápido después de scrollear) se resolvía contra una posición que
 * todavía no había asentado, y el click caía en otro elemento o en nada —
 * bug real reportado en producción: "toco Contratar y no pasa nada". La
 * opacidad sola no mueve el layout, así que el objetivo del toque nunca se
 * desalinea, tocable desde el primer frame aunque todavía se esté desvaneciendo. */
.reveal { opacity: 0; transition: opacity .7s ease; }
.reveal.in { opacity: 1; }

/* ==========================================================================
   RESPONSIVE — laptop (base) · tablet (≤980) · celular (≤620)
   ========================================================================== */

/* --- Laptops chicas / tablet horizontal --- */
@media (max-width: 1100px) {
    .apps-grid { grid-template-columns: repeat(3, 1fr); }
    .func-groups { grid-template-columns: repeat(2, 1fr); }
    .steps-5 { grid-template-columns: repeat(3, 1fr); }
}

/* --- Tablet (portrait y horizontal): menú hamburguesa + apilar hero --- */
@media (max-width: 980px) {
    .nav-links.desktop { display: none; }
    .nav-cta.desktop { display: none; }
    .hamburger { display: inline-flex; }

    /* Menú desplegable (mismo para tablet y celular) */
    .mobile-panel {
        display: none;
        position: absolute; top: 70px; left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--border);
        padding: 16px 22px 22px; box-shadow: var(--shadow-md);
        flex-direction: column; gap: 4px;
    }
    .nav.open .mobile-panel { display: flex; }
    .mobile-panel a.link { padding: 13px 6px; border-bottom: 1px solid var(--border); color: var(--slate-700); font-weight: 500; }
    .mobile-panel .nav-cta { flex-direction: column; align-items: stretch; margin-top: 12px; gap: 10px; }
    .mobile-panel .nav-login { padding: 8px 6px; }

    .hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .hero { padding: 64px 0 84px; }
    .mockup { max-width: 480px; margin: 6px auto 0; }
    .hero-actions .btn { flex: 1 1 auto; }
    .apps-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .section { padding: 72px 0; }
}

/* --- Celular --- */
@media (max-width: 620px) {
    .container { padding: 0 18px; }
    .steps { grid-template-columns: 1fr; }
    .steps-5 { grid-template-columns: 1fr; }
    .plans { grid-template-columns: 1fr; }
    .apps-grid { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-item img { height: 240px; }
    .func-groups { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .cta-band { padding: 42px 20px; }
    .section { padding: 56px 0; }
    .section-head { margin-bottom: 40px; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
    .hero-trust { gap: 12px 20px; }
    .wa-float { width: 54px; height: 54px; right: 16px; bottom: 16px; }
    .brand { font-size: 1.1rem; }
    .brand img { width: 34px; height: 34px; }
    .mock-float { right: 6px; bottom: -14px; }
}

/* Menú desktop visible por defecto; los .mobile-* se activan en ≤980 */
.mobile-panel { display: none; }

/* ==========================================================================
   Modal — registro + pago (Contratar Básico/Pro)
   ========================================================================== */
.modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(8, 20, 40, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
    position: relative;
    width: 100%; max-width: 440px;
    background: var(--bg);
    border-radius: var(--radius-lg);
    padding: 34px 30px;
    box-shadow: var(--shadow-lg);
    max-height: 90vh; overflow-y: auto;
}
.modal-close {
    position: absolute; top: 14px; right: 14px;
    width: 34px; height: 34px; border-radius: 50%;
    border: none; background: var(--bg-soft); color: var(--slate-600);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--border); }
.modal-card h3 { font-size: 1.3rem; margin-bottom: 8px; padding-right: 30px; }
.modal-sub { color: var(--slate-600); font-size: .92rem; line-height: 1.5; margin-bottom: 22px; }
.modal-label {
    display: block; font-size: .84rem; font-weight: 600; color: var(--slate-700);
    margin-bottom: 14px;
}
.modal-label input {
    display: block; width: 100%; margin-top: 6px;
    padding: 11px 14px; font-size: .95rem; font-family: var(--font);
    border: 1.5px solid var(--border); border-radius: 10px;
    background: var(--bg-soft);
}
.modal-label input:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.modal-error {
    background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
    border-radius: 10px; padding: 10px 14px; font-size: .86rem; margin-bottom: 14px;
}
.modal-error[hidden] { display: none; }
.modal-error a {
    display: inline-block; margin-top: 6px; color: #b91c1c; font-weight: 700;
    text-decoration: underline;
}
.modal-precio {
    background: var(--bg); border: 1px solid var(--border); color: var(--slate-700);
    border-radius: 10px; padding: 10px 14px; font-size: .86rem; margin-bottom: 14px;
}
.modal-precio[hidden] { display: none; }
.modal-precio b { color: var(--navy-900); }
.modal-fineprint { text-align: center; font-size: .78rem; color: var(--slate-500); margin-top: 12px; }
.modal-card .btn-block { width: 100%; }
.modal-card .btn-block:disabled { opacity: .65; cursor: not-allowed; }