/* ============ Broad Ventas — landing styles ============ */
/* Familia visual Broad (Sora/Inter, pills, navlinks) sobre base clara SaaS. */

:root {
  --brand: #2347b8;
  --brand-hover: #1c3a9c;
  --brand-soft: #eef2fc;
  --brand-soft-2: #e3eafa;
  --ink: #0e1320;
  --soft: #4b5563;
  --mute: #8a909b;
  --bg: #ffffff;
  --bg-alt: #f6f8fb;
  --rule: rgba(14, 19, 32, 0.10);
  --rule-soft: rgba(14, 19, 32, 0.06);
  --panel: #ffffff;
  --deep: #0b1d3d;
  --ok: #1e9e6a;
  --warn: #d97706;
  color-scheme: light;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--ink); }
.font-display { font-family: 'Sora', system-ui, sans-serif; }
::selection { background: var(--brand); color: #fff; }
section { scroll-margin-top: 84px; }

.fg-soft { color: var(--soft); }
.fg-mute { color: var(--mute); }
.rule { border-color: var(--rule); }
.rule-soft { border-color: var(--rule-soft); }
.bg-alt { background: var(--bg-alt); }
.bg-brand-soft { background: var(--brand-soft); }
.text-brand { color: var(--brand); }
.num { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }

/* ---- CTAs (misma familia que broadmkt.com) ---- */
.cta-block { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; padding: .95rem 1.4rem .95rem 1.55rem; border-radius: 999px; background: var(--brand); color: #fff; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; box-shadow: 0 14px 32px -14px rgba(35, 71, 184, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.14); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .25s; position: relative; overflow: hidden; }
.cta-block::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform: translateX(-100%); transition: transform .8s; }
.cta-block:hover { background: var(--brand-hover); transform: translateY(-3px); box-shadow: 0 20px 40px -14px rgba(35, 71, 184, 0.7), inset 0 0 0 1px rgba(255,255,255,0.24); }
.cta-block:hover::before { transform: translateX(100%); }
.cta-block .arrow { transition: transform .35s cubic-bezier(.2,.8,.2,1); position: relative; z-index: 1; }
.cta-block:hover .arrow { transform: translateX(5px); }
.cta-block > span { position: relative; z-index: 1; }

.cta-ghost { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .9rem 1.35rem; border-radius: 999px; border: 1.5px solid var(--brand); color: var(--brand); font-family: 'Sora', sans-serif; font-weight: 600; font-size: .95rem; letter-spacing: -0.01em; transition: background .25s, color .25s, transform .35s cubic-bezier(.2,.8,.2,1); }
.cta-ghost:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }

.cta-inline { display: inline-flex; align-items: center; gap: .5rem; padding: .48rem .95rem .48rem 1.1rem; border-radius: 999px; background: var(--brand); color: #fff; font-family: 'Sora', sans-serif; font-weight: 600; font-size: .85rem; letter-spacing: -0.01em; line-height: 1; transition: background .25s, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; box-shadow: 0 8px 20px -10px rgba(35,71,184,0.6); white-space: nowrap; }
.cta-inline:hover { background: var(--brand-hover); transform: translateY(-2px); }

.navlink { position: relative; font-size: .92rem; color: var(--soft); transition: color .25s; }
.navlink:hover { color: var(--ink); }
.navlink::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.navlink:hover::after { transform: scaleX(1); }

/* ---- Header ---- */
#top-nav { background: rgba(255,255,255,0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
#top-nav.scrolled { border-bottom-color: var(--rule-soft); box-shadow: 0 8px 30px -18px rgba(14,19,32,0.18); }
#progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 90; background: var(--brand); transition: width .12s linear; }

/* ---- Chips / badges ---- */
.chip { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .85rem; border-radius: 999px; background: var(--brand-soft); border: 1px solid rgba(35,71,184,0.16); color: var(--brand); font-family: 'Sora', sans-serif; font-weight: 600; font-size: .78rem; letter-spacing: .01em; }
.tick { width: 6px; height: 6px; border-radius: 999px; background: var(--brand); display: inline-block; flex: none; }
.badge-launch { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem; border-radius: 999px; background: #fff7e8; border: 1px solid #f3d9a4; color: #92600a; font-size: .7rem; font-weight: 600; font-family: 'Sora', sans-serif; }

/* ---- Feature bullets ---- */
.feat { display: flex; gap: .8rem; align-items: flex-start; }
.feat svg.fi { flex: none; width: 20px; height: 20px; margin-top: .15rem; color: var(--brand); }
.feat b { color: var(--ink); font-weight: 600; }
.feat p { color: var(--soft); font-size: .95rem; line-height: 1.55; }

/* ---- "Ver todo" details ---- */
details.more { border-top: 1px solid var(--rule-soft); margin-top: 1.4rem; padding-top: .4rem; }
details.more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; font-family: 'Sora', sans-serif; font-weight: 600; font-size: .85rem; color: var(--brand); padding: .55rem 0; user-select: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary svg { transition: transform .3s; }
details.more[open] summary svg { transform: rotate(45deg); }
details.more ul { columns: 1; margin-top: .35rem; }
@media (min-width: 768px) { details.more ul { columns: 2; column-gap: 2.2rem; } }
details.more li { break-inside: avoid; display: flex; gap: .55rem; font-size: .88rem; color: var(--soft); line-height: 1.5; padding: .3rem 0; }
details.more li::before { content: ''; width: 5px; height: 5px; border-radius: 99px; background: var(--brand); flex: none; margin-top: .55rem; }

/* ---- Cards ---- */
.card { background: var(--panel); border: 1px solid var(--rule); border-radius: 18px; transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .45s; }
.card:hover { transform: translateY(-4px); border-color: rgba(35,71,184,0.35); box-shadow: 0 24px 48px -28px rgba(14,19,32,0.22); }

/* ---- Mockups ---- */
.mock { background: #fff; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px -35px rgba(11,29,61,0.35); position: relative; }
.mock-bar { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-bottom: 1px solid var(--rule-soft); background: #fbfcfe; }
.mock-dots { display: flex; gap: .3rem; }
.mock-dots i { width: 8px; height: 8px; border-radius: 99px; background: #e3e6ec; }
.mock-url { flex: 1; max-width: 260px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: .68rem; color: var(--mute); background: #fff; border: 1px solid var(--rule-soft); border-radius: 99px; padding: .28rem .8rem; font-family: 'Inter', sans-serif; }
.mock-tag { position: absolute; top: 10px; right: 10px; z-index: 5; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; background: rgba(14,19,32,0.78); color: #fff; font-size: .66rem; font-family: 'Sora', sans-serif; font-weight: 600; letter-spacing: .02em; backdrop-filter: blur(4px); }
.mock-tag i { width: 6px; height: 6px; border-radius: 99px; background: #7ea1f5; }

/* skeleton bars for abstracted content */
.sk { display: block; height: 8px; border-radius: 99px; background: #e8ebf1; }
.sk.w1 { width: 34%; } .sk.w2 { width: 52%; } .sk.w3 { width: 68%; } .sk.w4 { width: 84%; }
.sk-avatar { width: 28px; height: 28px; border-radius: 99px; background: var(--brand-soft-2); flex: none; }

.mrow { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border-radius: 10px; }
.mrow + .mrow { margin-top: .3rem; }
.mrow.hl { background: var(--brand-soft); outline: 1px solid rgba(35,71,184,0.18); }
.mprice { font-family: 'Sora', sans-serif; font-weight: 600; font-size: .82rem; color: var(--ink); margin-left: auto; white-space: nowrap; }
.mlabel { font-size: .78rem; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbadge { font-size: .62rem; font-weight: 600; font-family: 'Sora', sans-serif; padding: .18rem .5rem; border-radius: 99px; white-space: nowrap; }
.mbadge.ok { background: #e7f6ef; color: var(--ok); }
.mbadge.low { background: #fdf0e3; color: var(--warn); }
.mbadge.brand { background: var(--brand-soft); color: var(--brand); }
.mbtn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border-radius: 10px; font-family: 'Sora', sans-serif; font-weight: 600; font-size: .78rem; padding: .6rem .9rem; }
.mbtn.primary { background: var(--brand); color: #fff; }
.mbtn.soft { background: var(--brand-soft); color: var(--brand); }
.mbtn.wa { background: #e9f9ef; color: #128c4b; }
.mkpi { border: 1px solid var(--rule-soft); border-radius: 12px; padding: .7rem .8rem; }
.mkpi .v { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.mkpi .l { font-size: .64rem; color: var(--mute); margin-top: .1rem; }

/* phone frame (tienda) */
.phone { width: min(300px, 78vw); border-radius: 38px; background: #0e1320; padding: 10px; box-shadow: 0 40px 80px -40px rgba(11,29,61,0.55); position: relative; }
.phone-screen { border-radius: 30px; background: #fff; overflow: hidden; }
.phone-notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 86px; height: 20px; border-radius: 99px; background: #0e1320; z-index: 4; }

/* ---- Sección oscura (seguridad) ---- */
.dark-sec { background: var(--deep); color: #fff; }
.dark-sec .fg-soft { color: rgba(255,255,255,0.72); }
.dark-sec .fg-mute { color: rgba(255,255,255,0.5); }
.dark-sec .tile { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; transition: border-color .3s, background .3s; }
.dark-sec .tile:hover { border-color: rgba(126,161,245,0.5); background: rgba(255,255,255,0.07); }
.dark-sec .tile svg { color: #7ea1f5; }

/* ---- Planes ---- */
.plan { position: relative; background: #fff; border: 1px solid var(--rule); border-radius: 20px; display: flex; flex-direction: column; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .3s; }
.plan:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -30px rgba(14,19,32,0.25); }
.plan.featured { border: 2px solid var(--brand); box-shadow: 0 30px 70px -30px rgba(35,71,184,0.4); }
.plan .price { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 2.35rem; letter-spacing: -0.03em; }
.plan li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: var(--soft); line-height: 1.5; padding: .32rem 0; }
.plan li svg { flex: none; width: 16px; height: 16px; margin-top: .2rem; color: var(--brand); }
.plan-flag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; font-family: 'Sora', sans-serif; font-weight: 600; font-size: .72rem; letter-spacing: .02em; padding: .35rem .95rem; border-radius: 999px; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(35,71,184,0.7); }

/* billing toggle */
.bill-toggle { display: inline-flex; background: var(--bg-alt); border: 1px solid var(--rule); border-radius: 999px; padding: 4px; gap: 2px; }
.bill-toggle button { border: 0; background: transparent; padding: .5rem 1.15rem; border-radius: 999px; font-family: 'Sora', sans-serif; font-weight: 600; font-size: .85rem; color: var(--soft); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.bill-toggle button.active { background: #fff; color: var(--ink); box-shadow: 0 4px 14px -6px rgba(14,19,32,0.25); }
.bill-note { font-size: .72rem; color: var(--ok); font-weight: 600; }

/* ---- Tabla comparativa ---- */
.cmp-wrap { border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; background: #fff; }
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.cmp { width: 100%; min-width: 660px; border-collapse: collapse; font-size: .88rem; }
table.cmp th, table.cmp td { padding: .68rem 1rem; text-align: center; border-bottom: 1px solid var(--rule-soft); }
table.cmp th:first-child, table.cmp td:first-child { text-align: left; color: var(--soft); font-weight: 400; width: 44%; }
table.cmp thead th { position: sticky; top: 0; background: #fff; z-index: 2; font-family: 'Sora', sans-serif; font-weight: 600; color: var(--ink); font-size: .85rem; padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
table.cmp thead th.hl-col { color: var(--brand); }
table.cmp tr.group td { background: var(--bg-alt); font-family: 'Sora', sans-serif; font-weight: 600; color: var(--ink); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; padding: .55rem 1rem; }
table.cmp td.hl-col { background: rgba(35,71,184,0.035); }
.cmp-yes { display: inline-flex; width: 20px; height: 20px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); align-items: center; justify-content: center; }
.cmp-no { color: #c6cad2; font-weight: 600; }

/* ---- FAQ ---- */
details.faq { border: 1px solid var(--rule); border-radius: 14px; background: #fff; transition: border-color .3s; }
details.faq + details.faq { margin-top: .7rem; }
details.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.3rem; font-family: 'Sora', sans-serif; font-weight: 600; font-size: .98rem; color: var(--ink); user-select: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary svg { flex: none; color: var(--brand); transition: transform .3s; }
details.faq[open] { border-color: rgba(35,71,184,0.4); }
details.faq[open] summary svg { transform: rotate(45deg); }
details.faq .a { padding: 0 1.3rem 1.2rem; color: var(--soft); font-size: .93rem; line-height: 1.65; max-width: 62ch; }

/* ---- Form ---- */
.field { display: block; width: 100%; background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: .85rem 1rem; font-size: .95rem; color: var(--ink); transition: border-color .25s, box-shadow .25s; }
.field::placeholder { color: var(--mute); }
.field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(35,71,184,0.14); }
label.flabel { display: block; font-family: 'Sora', sans-serif; font-weight: 600; font-size: .78rem; color: var(--ink); margin-bottom: .4rem; }

/* ---- Reveal ---- */
[data-io] { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
[data-io].in { opacity: 1; transform: translateY(0); }
[data-io-stagger] > * { opacity: 0; transform: translateY(14px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
[data-io-stagger].in > *:nth-child(1) { transition-delay: .05s; opacity: 1; transform: translateY(0); }
[data-io-stagger].in > *:nth-child(2) { transition-delay: .12s; opacity: 1; transform: translateY(0); }
[data-io-stagger].in > *:nth-child(3) { transition-delay: .2s; opacity: 1; transform: translateY(0); }
[data-io-stagger].in > *:nth-child(4) { transition-delay: .28s; opacity: 1; transform: translateY(0); }
[data-io-stagger].in > *:nth-child(5) { transition-delay: .36s; opacity: 1; transform: translateY(0); }
[data-io-stagger].in > *:nth-child(6) { transition-delay: .44s; opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-io], [data-io-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* hero aurora suave */
#hero { position: relative; overflow: hidden; }
#hero::before { content: ''; position: absolute; inset: -20% -10% auto -10%; height: 130%; z-index: 0; pointer-events: none; background: radial-gradient(46% 54% at 80% 12%, rgba(35,71,184,0.1), transparent 70%), radial-gradient(40% 50% at 8% 70%, rgba(35,71,184,0.06), transparent 72%); }
#hero > * { position: relative; z-index: 1; }

/* mobile menu */
#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

/* WhatsApp fab-like footer button */
.wa-card { display: flex; align-items: center; gap: .9rem; border: 1px solid var(--rule); border-radius: 16px; padding: 1rem 1.2rem; background: #fff; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .35s; }
.wa-card:hover { transform: translateY(-3px); border-color: rgba(37,211,102,0.5); box-shadow: 0 20px 40px -24px rgba(18,140,75,0.4); }