:root {
    /* Brand — Wintracker brand manual (official) */
    /* Azul principal #002145  ·  Amarillo #F5C518  ·  Tipografía Montserrat */
    --navy: #002145; --navy-deep: #001432; --navy-soft: #0F2E55; --navy-tint: #E4E8F1;
    --yellow: #F5C518; --yellow-deep: #D9AC10; --yellow-tint: #FEF4CC;
    /* Back-compat aliases used across the file */
    --blue: var(--navy); --blue-dark: var(--navy-deep); --blue-tint: var(--navy-tint);
    --accent: var(--yellow); --accent-tint: var(--yellow-tint);
    --violet: var(--yellow); --violet-dark: var(--yellow-deep); --violet-tint: var(--yellow-tint);
    --purple: var(--yellow); --purple-tint: var(--yellow-tint);
    --ink: var(--navy); --muted: #5B6B82; --line: #E2E8F0;
    --soft: #F6F8FC; --green: #22c55e;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: #fff; color: var(--ink); font-family: 'Montserrat', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
  nav.top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 32px; padding: 16px 48px; background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
  nav.top .links { display: flex; gap: 28px; font-size: 14px; font-weight: 500; }
  nav.top .links a { text-decoration: none; color: inherit; opacity: 0.75; transition: opacity 160ms; }
  nav.top .links a:hover { opacity: 1; }
  nav.top .spacer { flex: 1; }
  nav.top .auth { display: flex; gap: 8px; align-items: center; }
  .btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; border: 0; transition: transform 120ms, background 160ms; }
  .btn:hover { transform: translateY(-1px); }
  .btn-ghost { background: transparent; color: var(--ink); }
  .btn-primary { background: var(--yellow); color: var(--navy); }
  .btn-primary:hover { background: var(--yellow-deep); }
  .btn-outline { background: #fff; color: var(--ink); border: 1px solid var(--line); }
  .btn-onnavy-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.25); }
  .btn-onnavy-outline:hover { background: rgba(255,255,255,0.08); }
  /* Hero — light surface variant */
  .hero { position: relative; padding: 56px 0 88px; text-align: left; background: linear-gradient(180deg, #fff 0%, var(--soft) 100%); color: var(--ink); overflow: hidden; }
  .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(245,197,24,0.18), transparent 70%); pointer-events: none; }
  .hero > * { position: relative; }
  .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 0; background: transparent; color: var(--yellow); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 28px; white-space: nowrap; }
  .eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--yellow); }
  .eyebrow .dot { display: none; }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
  h1.headline { font-size: clamp(40px, 5.6vw, 76px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; margin: 0 auto; max-width: 16ch; text-wrap: balance; color: #fff; }
  h1.headline .accent { color: var(--yellow); }
  .subhead { margin: 24px auto 0; max-width: 56ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: rgba(255,255,255,0.72); text-wrap: pretty; }
  .hero-ctas { display: flex; justify-content: center; gap: 12px; margin-top: 36px; }
  .hero-ctas .btn { padding: 13px 22px; font-size: 14px; }
  .hero-trust { margin-top: 28px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.48); }
  .showcase { position: relative; margin: 100px auto 0; max-width: 1280px; padding: 0 48px; z-index: 5; }
  .showcase-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--soft); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 30px 60px -20px rgba(15,23,42,0.25), 0 0 0 1px rgba(15,23,42,0.04); }
  .showcase-tabs { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px; box-shadow: 0 10px 30px rgba(10,31,68,0.18); z-index: 4; }
  .showcase-tabs button { appearance: none; border: 0; background: transparent; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: background 160ms, color 160ms; }
  .showcase-tabs button:hover { color: var(--ink); }
  .showcase-tabs button.active { background: var(--navy); color: #fff; }
  .pane { position: absolute; inset: 0; display: none; }
  .pane.active { display: block; }
  .live-tag { position: absolute; top: 16px; left: 18px; z-index: 6; background: rgba(10,10,10,0.78); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; backdrop-filter: blur(6px); display: flex; align-items: center; gap: 8px; }
  .live-tag .ping { width: 6px; height: 6px; border-radius: 3px; background: var(--green); box-shadow: 0 0 0 0 rgba(34,197,94,0.6); animation: ping 1.6s infinite; }
  @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); } 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
  .shot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 32px; }
  .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 10px; box-shadow: 0 14px 40px -10px rgba(15,23,42,0.18), 0 0 0 1px rgba(15,23,42,0.06); transform: rotate(-0.4deg); }
  /* Antes/Después */
  .ba { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .ba-side { position: relative; padding: 32px; display: flex; flex-direction: column; }
  .ba-side.before { background: #f1f5f9; }
  .ba-side.after { background: #fff; }
  .ba-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; }
  .ba-side.before .ba-label { color: #94a3b8; }
  .ba-side.after .ba-label { color: var(--navy); }
  .ba-divider { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, var(--yellow) 20%, var(--yellow) 80%, transparent); transform: translateX(-1px); z-index: 3; }
  .ba-arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--navy); color: var(--yellow); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; z-index: 4; box-shadow: 0 6px 20px rgba(10,31,68,0.4); white-space: nowrap; }
  .gads-mock { flex: 1; background: #fff; border-radius: 8px; border: 1px solid #cbd5e1; padding: 18px; opacity: 0.78; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 4px 14px rgba(15,23,42,0.04); }
  .gads-mock .gads-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; font-size: 13px; font-weight: 600; color: #475569; }
  .gads-mock .gads-head .gads-dot { width: 18px; height: 18px; border-radius: 9px; background: linear-gradient(135deg, #4285F4 50%, #EA4335 50%); }
  .gads-row { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 6px; align-items: center; padding: 8px 6px; border-radius: 4px; }
  .gads-row.h { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; border-bottom: 1px solid #f1f5f9; }
  .gads-row .name { font-size: 12px; font-weight: 600; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gads-row .qm { color: #94a3b8; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; }
  .gads-warn { display: flex; gap: 8px; padding: 10px 12px; background: #fef3c7; border-radius: 6px; font-size: 11px; color: #92400e; }
  .wt-mock { flex: 1; background: #fff; border-radius: 8px; border: 1px solid var(--line); padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 8px 24px rgba(15,23,42,0.06); }
  .wt-mock .wt-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .wt-mock .wt-head img { height: 22px; }
  .wt-row { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 6px; align-items: center; padding: 8px 6px; border-radius: 4px; }
  .wt-row.h { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; border-bottom: 1px solid #f1f5f9; }
  .wt-row .name { font-size: 12px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wt-row .v { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
  .wt-row .v.good { color: var(--green); }
  .wt-row .v.bad { color: #ef4444; }
  .wt-good { display: flex; gap: 8px; padding: 10px 12px; background: var(--yellow-tint); border-radius: 6px; font-size: 11px; color: var(--navy); font-weight: 600; }
  .section { max-width: 1180px; margin: 140px auto 0; padding: 0 48px; }
  .section-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); margin-bottom: 12px; display: inline-flex; align-items: center; gap: 8px; }
  .section-eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--yellow); }
  .section h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; margin: 0; max-width: 22ch; text-wrap: balance; }
  .section .lede { margin-top: 16px; max-width: 56ch; font-size: 17px; line-height: 1.55; color: var(--muted); }
  .steps { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .step { padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: border-color 200ms, transform 200ms; }
  .step:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: 0 12px 32px -16px rgba(10,31,68,0.18); }
  .step-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--navy); color: var(--yellow); font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; }
  .step h3 { margin: 18px 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
  .step p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
  .logos { margin: 100px auto 0; padding: 0 48px; text-align: center; }
  .logos-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; }
  .logos-row-1 { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; }
  .logos-row-1 .l { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); opacity: 0.7; }
  .logos-row-2 { margin-top: 22px; display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; }
  .logos-row-2 .l { font-size: 14px; font-weight: 600; color: var(--muted); opacity: 0.55; }
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 100px 0 0; }
  .stat { padding: 36px 24px; border-right: 1px solid var(--line); }
  .stat:last-child { border-right: 0; }
  .stat .num { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .stat .num .accent { color: var(--navy); position: relative; }
  .stat .num .accent::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; background: var(--yellow); border-radius: 2px; }
  .stat .label { margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.45; }
  /* About Vidika */
  .about-vidika { display: grid; grid-template-columns: 6fr 4fr; gap: 64px; margin-top: 56px; align-items: start; }
  .about-vidika .body { font-size: 16px; line-height: 1.65; color: var(--ink); }
  .about-vidika .body p { margin: 0 0 16px; }
  .about-vidika .body p:first-child { color: var(--muted); }
  .about-vidika .pillars { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
  .about-vidika .pillars div { font-size: 13px; color: var(--muted); padding-left: 14px; position: relative; }
  .about-vidika .pillars div::before { content: '·'; position: absolute; left: 0; color: var(--yellow); font-weight: 800; }
  .about-vidika .vidika-card { background: linear-gradient(160deg, #fff, var(--soft)); border: 1px solid var(--line); border-radius: 18px; padding: 36px; box-shadow: 0 14px 40px -10px rgba(15,23,42,0.08); }
  .vidika-mark { font-family: 'Montserrat', sans-serif; font-style: italic; font-weight: 900; font-size: 56px; letter-spacing: -0.04em; color: var(--ink); line-height: 1; }
  .vidika-mark .v { color: var(--yellow); }
  /* Wintracker logo — inline SVG so the wordmark inherits page-loaded Inter */
  .wt-logo { display: inline-flex; align-items: center; vertical-align: middle; line-height: 0; }
  .wt-logo svg { display: block; height: 100%; width: auto; }
  .vidika-tag { margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
  .vidika-meta { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.7; color: var(--muted); }
  .vidika-meta strong { color: var(--ink); font-weight: 600; }
  .about-vidika a.tiny { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: 2px; }
  .about-vidika a.tiny:hover { text-decoration: underline; }
  /* Contact form */
  .contact-card { max-width: 560px; margin: 56px auto 0; padding: 36px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 14px 40px -10px rgba(15,23,42,0.08); }
  .contact-card form { display: flex; flex-direction: column; gap: 14px; }
  .field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
  .field input, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-family: 'Montserrat', sans-serif; font-size: 14px; color: var(--ink); background: #fff; transition: border-color 160ms, box-shadow 160ms; }
  .field input:focus, .field textarea:focus { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 3px var(--yellow-tint); }
  .field textarea { resize: vertical; min-height: 90px; }
  .contact-card .submit { background: var(--yellow); color: var(--navy); padding: 13px 18px; border-radius: 10px; border: 0; font-weight: 700; font-size: 14px; cursor: pointer; transition: background 160ms; }
  .contact-card .submit:hover { background: var(--yellow-deep); }
  .contact-foot { margin-top: 16px; font-size: 12px; color: var(--muted); text-align: center; }
  .contact-alt { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); text-align: center; }
  .contact-alt a { color: var(--ink); font-weight: 600; text-decoration: none; }
  .contact-alt a:hover { color: var(--navy); }
  /* CTA */
  .cta-final { margin: 140px auto 100px; max-width: 1180px; padding: 72px 48px; border-radius: 24px; background: linear-gradient(140deg, var(--navy-deep), var(--navy) 50%, var(--navy-soft)); color: #fff; text-align: center; position: relative; overflow: hidden; }
  .cta-final::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 18% 30%, rgba(245,197,24,0.18), transparent 45%), radial-gradient(circle at 82% 70%, rgba(245,197,24,0.10), transparent 45%); pointer-events: none; }
  .cta-final > * { position: relative; }
  .cta-final h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; letter-spacing: -0.025em; margin: 0 auto; max-width: 18ch; text-wrap: balance; }
  .cta-final p { margin: 16px auto 0; max-width: 48ch; opacity: 0.72; }
  .cta-final .btn-primary { margin-top: 28px; background: var(--yellow); color: var(--navy); }
  .cta-final .btn-primary:hover { background: var(--yellow-deep); }
  /* Footer */
  footer { padding: 32px 48px 28px; }
  footer .product-of { padding-top: 18px; padding-bottom: 14px; font-size: 13px; font-weight: 500; color: var(--muted); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 14px; }
  footer .product-of img { height: 22px; opacity: 0.7; }
  footer .links-row { display: flex; align-items: center; gap: 24px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
  footer .links-row .spacer { flex: 1; }
  footer .links-row a { color: inherit; text-decoration: none; }
  footer .links-row a:hover { color: var(--ink); }
  
  .wt-wordmark { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.03em; color: var(--navy); line-height: 1; display: inline-block; white-space: nowrap; }
  .wt-wordmark .y { color: var(--yellow); }

  /* ───── Marquee (top ticker) ───── */
  .marquee { background: var(--navy-deep); border-top: 1px solid rgba(255,255,255,0.06); overflow: hidden; padding: 10px 0; position: relative; }
  .marquee::before, .marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; }
  .marquee::before { left: 0; background: linear-gradient(90deg, var(--navy-deep), transparent); }
  .marquee::after { right: 0; background: linear-gradient(-90deg, var(--navy-deep), transparent); }
  .marquee-track { display: flex; gap: 56px; animation: marquee 38s linear infinite; width: max-content; }
  .marquee-item { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.55); font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; white-space: nowrap; }
  .marquee-item .dot { width: 4px; height: 4px; background: var(--yellow); border-radius: 2px; }
  .marquee-item img.mq { width: 14px; height: 14px; object-fit: contain; display: inline-block; vertical-align: middle; }
  .marquee-item.hot { color: var(--yellow); }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  @keyframes wt-pulse { 0%, 100% { opacity: 0.5; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.05); } }

  /* ───── Hero v2 ───── */
  .hero-grid { max-width: 1340px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; padding: 0 48px; position: relative; }
  .hero-grid::before { content: ''; position: absolute; inset: -40px -20px; background-image: radial-gradient(rgba(0,33,69,0.07) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 70%); pointer-events: none; }
  .hero-left { position: relative; text-align: left; }
  .hero-left h1 { text-align: left; max-width: none; }
  .hero-left .subhead { margin-left: 0; max-width: 40ch; text-align: left; }
  .hero-left .hero-ctas { justify-content: flex-start; }
  .hero-left .eyebrow { margin-bottom: 24px; }
  .hero .eyebrow { color: var(--yellow-deep); }
  .hero .btn-onnavy-outline { background: #fff; color: var(--ink); border: 1px solid var(--line); }
  .hero .btn-onnavy-outline:hover { background: var(--soft); border-color: var(--navy-tint); }
  .hero h1.headline { color: var(--ink); }
  .hero .subhead { color: var(--muted); }
  .hero h1.headline .strike { position: relative; display: inline-block; color: rgba(0,33,69,0.32); }
  .hero h1.headline .strike::after { content: ''; position: absolute; left: -4%; right: -4%; top: 52%; height: 6px; background: var(--yellow); transform: scaleX(0); transform-origin: left; animation: strike 1.2s 0.6s cubic-bezier(.6,.1,.2,1) forwards; border-radius: 3px; }
  @keyframes strike { to { transform: scaleX(1); } }
  .hero h1.headline .accent { background: linear-gradient(180deg, transparent 62%, rgba(245,197,24,0.4) 62%, rgba(245,197,24,0.4) 92%, transparent 92%); padding: 0 4px; }
  .hero-stats { display: flex; gap: 32px; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(0,33,69,0.10); }
  .hero-stat .v { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
  .hero-stat .v .accent { color: var(--yellow-deep); }
  .hero-stat .l { margin-top: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
  .hero-cta-row { display: flex; flex-direction: column; gap: 12px; }
  .hero-cta-row .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .hero-cta-row .meta { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
  .hero-cta-row .meta .avatars { display: inline-flex; }
  .hero-cta-row .meta .avatars span { display: block; width: 22px; height: 22px; border-radius: 999px; border: 2px solid #fff; margin-left: -8px; font-size: 9px; font-weight: 800; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; }
  .hero-cta-row .meta .avatars span:nth-child(1) { background: #FCD34D; margin-left: 0; }
  .hero-cta-row .meta .avatars span:nth-child(2) { background: #FCA5A5; }
  .hero-cta-row .meta .avatars span:nth-child(3) { background: #93C5FD; }
  .hero-cta-row .meta .avatars span:nth-child(4) { background: #86EFAC; }

  /* Right column — confident quote + KPI cards */
  .hero-right { position: relative; }
  /* Variant toggle */
  .hero-variant-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; margin: 0 0 14px; background: rgba(0,33,69,0.04); border: 1px solid rgba(0,33,69,0.10); border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
  .hero-variant-toggle button { appearance: none; border: 0; background: transparent; color: var(--muted); padding: 7px 12px; border-radius: 999px; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: background 200ms, color 200ms; display: inline-flex; align-items: center; gap: 6px; }
  .hero-variant-toggle button:hover { color: var(--ink); }
  .hero-variant-toggle button.active { background: var(--yellow); color: var(--navy-deep); font-weight: 700; }
  .hero-variant-toggle button .dot { display: inline-block; width: 6px; height: 6px; border-radius: 3px; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,0.6); animation: ping 1.6s infinite; }
  .hero-variant-toggle button.active .dot { background: var(--navy-deep); animation: none; }
  .hero-variant { display: none; }
  .hero-right[data-hero="dash"] .hero-variant[data-variant="dash"] { display: block; }
  .hero-right[data-hero="quote"] .hero-variant[data-variant="quote"] { display: block; }
  .hero-dash-mount { position: relative; width: 100%; aspect-ratio: 480 / 420; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px -24px rgba(0,33,69,0.28); }
  .hero-quote { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 32px 32px 28px; position: relative; box-shadow: 0 24px 60px -24px rgba(0,33,69,0.18); }
  .hero-quote-mark { position: absolute; top: 14px; left: 24px; font-family: 'Instrument Serif', Georgia, serif; font-size: 90px; line-height: 1; color: var(--yellow); opacity: 0.85; }
  .hero-quote p { margin: 0; padding-left: 8px; font-family: 'Instrument Serif', Georgia, serif; font-size: 24px; line-height: 1.32; color: var(--ink); letter-spacing: -0.005em; font-style: italic; position: relative; z-index: 1; }
  .hero-quote-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
  .hero-quote-foot .av { width: 38px; height: 38px; border-radius: 12px; background: var(--yellow); color: var(--navy-deep); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; letter-spacing: -0.02em; }
  .hero-quote-foot .nm { color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
  .hero-quote-foot .rl { margin-top: 2px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

  .hero-card-row { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .hero-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 14px; transition: transform 280ms cubic-bezier(.2,.8,.2,1), background 280ms; }
  .hero-card:hover { transform: translateY(-3px); background: var(--soft); }
  .hero-card.emph { background: var(--yellow); border-color: var(--yellow); }
  .hero-card-l { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
  .hero-card.emph .hero-card-l { color: rgba(10,31,68,0.7); }
  .hero-card-v { margin-top: 6px; font-size: 28px; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
  .hero-card.emph .hero-card-v { color: var(--navy-deep); }
  .hero-card-s { margin-top: 4px; font-size: 11px; color: var(--muted); }
  .hero-card.emph .hero-card-s { color: rgba(10,31,68,0.6); }

  /* Big mark watermark behind hero text */
  .hero-watermark { position: absolute; top: -40px; left: -120px; width: 380px; opacity: 0.05; pointer-events: none; }

  /* ───── Reveal on scroll ───── */
  [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 700ms cubic-bezier(.2,.8,.2,1), transform 700ms cubic-bezier(.2,.8,.2,1); }
  [data-reveal].in { opacity: 1; transform: translateY(0); }
  [data-reveal][data-delay="1"] { transition-delay: 100ms; }
  [data-reveal][data-delay="2"] { transition-delay: 200ms; }
  [data-reveal][data-delay="3"] { transition-delay: 300ms; }
  [data-reveal][data-delay="4"] { transition-delay: 400ms; }

  /* Icon wells */
  .icowell { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: var(--yellow); }
  .icowell-y { background: var(--yellow); color: var(--navy); }
  .icowell svg, .icowell-y svg { width: 22px; height: 22px; }

  /* Step cards — enhanced */
  .step { position: relative; overflow: hidden; }
  .step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
  .step:hover::before { transform: scaleX(1); }
  .step .step-head { display: flex; align-items: center; gap: 14px; }
  .step svg.lucide { width: 22px; height: 22px; }

  /* Integration tiles — real brand marks */
  .integ-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; max-width: 1100px; margin-left: auto; margin-right: auto; }
  .integ-tile { aspect-ratio: 1; background: #fff; border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px; transition: transform 300ms, border-color 300ms, box-shadow 300ms; }
  .integ-tile:hover { transform: translateY(-4px); border-color: var(--navy); box-shadow: 0 18px 40px -18px rgba(10,31,68,0.25); }
  .integ-tile .logo { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
  .integ-tile .logo svg, .integ-tile .logo img { max-width: 44px; max-height: 44px; }
  .integ-tile .nm { font-size: 11px; font-weight: 600; color: var(--ink); text-align: center; letter-spacing: -0.01em; }

  /* Stat counters */
  .stat { transition: background 250ms; }
  .stat:hover { background: var(--soft); }
  .stat .icowell-mini { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--yellow-tint); color: var(--navy); margin-bottom: 12px; }
  .stat .icowell-mini svg { width: 14px; height: 14px; }

  @media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; gap: 48px; padding: 0 20px; }
    .hero-stats { gap: 22px; }
    .integ-grid { grid-template-columns: repeat(3, 1fr); }
    .hero-card-row { grid-template-columns: 1fr 1fr 1fr; }
  }
  @media (max-width: 860px) {
    /* Carrusel horizontal swipe para secciones de cards (menos scroll vertical) */
    .steps {
      display: flex;
      grid-template-columns: none;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 14px;
      margin: 32px -20px 0;
      padding: 4px 20px 14px;
      scroll-padding-left: 20px;
      scrollbar-width: none;
    }
    .steps::-webkit-scrollbar { display: none; }
    .steps > .step {
      flex: 0 0 80%;
      scroll-snap-align: center;
      margin: 0;
    }
    /* Stats producción en 2x2 */
    .stats { grid-template-columns: 1fr 1fr; }
    .stat { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .stat:nth-child(even) { border-right: 0; }
    nav.top .links { display: none; }
    /* Nav compacto: evita overflow horizontal de los botones */
    nav.top { padding: 12px 18px; gap: 12px; }
    nav.top .auth { gap: 6px; }
    nav.top .auth .btn { padding: 8px 12px; font-size: 12px; }
    nav.top .wt-logo { height: 28px !important; }
    /* Headline: evita que palabras largas desborden */
    h1.headline { font-size: clamp(29px, 8.2vw, 46px); overflow-wrap: break-word; word-break: break-word; }
    /* Fix overflow horizontal: permitir que la columna encoja + stats en 2x2 */
    .hero-left { min-width: 0; }
    .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
    /* Integraciones: carrusel horizontal de 2 filas (menos scroll vertical) */
    .integ-grid {
      display: grid;
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-template-rows: 1fr 1fr;
      grid-auto-columns: 31%;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
      gap: 10px;
      margin: 56px -20px 0;
      padding: 4px 20px 14px;
      scrollbar-width: none;
    }
    .integ-grid::-webkit-scrollbar { display: none; }
    .integ-grid > .integ-tile { scroll-snap-align: start; }
    .showcase-tabs button { padding: 6px 12px; font-size: 11px; }
    .hero { padding: 56px 20px 16px; }
    .showcase, .section { padding: 0 20px; }
    .about-vidika { grid-template-columns: 1fr; gap: 32px; }
    .ba { grid-template-columns: 1fr; }
    .ba-divider { display: none; }
    footer { padding: 24px 20px; }
    footer .links-row { flex-wrap: wrap; gap: 10px 18px; }
    footer .links-row .spacer { display: none; }
    footer .product-of { flex-wrap: wrap; }
  }
  /* ───── FAQ accordion ───── */
  .faq-list { margin-top: 48px; display: flex; flex-direction: column; gap: 12px; max-width: 880px; }
  .faq-item { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; transition: border-color 200ms, box-shadow 200ms; }
  .faq-item[open] { border-color: var(--navy-tint); box-shadow: 0 12px 32px -18px rgba(10,31,68,0.18); }
  .faq-item summary { list-style: none; cursor: pointer; padding: 20px 24px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: '+'; flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--yellow-tint); color: var(--navy); font-size: 18px; font-weight: 700; transition: transform 200ms, background 200ms; }
  .faq-item[open] summary::after { content: '−'; background: var(--yellow); }
  .faq-item summary:hover { color: var(--navy); }
  .faq-a { padding: 0 24px 22px; }
  .faq-a p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 70ch; }

/* ─────────────────────────────────────────────────────────
   Article / category subpages (atribución, lead-tracking, etc.)
   Reusa el sistema de diseño de la home (vars, nav .top, footer, .btn)
   ───────────────────────────────────────────────────────── */
.article-wrap{max-width:840px;margin:0 auto;padding:0 24px}
.bc{font-size:13px;color:var(--muted);padding:20px 0 0}
.bc a{color:var(--muted);text-decoration:none}
.bc a:hover{color:var(--navy)}
.article-hero{padding:32px 0 26px;border-bottom:1px solid var(--line)}
.article-hero .eyebrow{margin-bottom:14px}
.article-hero h1{font-family:Montserrat,sans-serif;font-size:44px;line-height:1.08;font-weight:800;letter-spacing:-1.4px;color:var(--navy);margin:0 0 18px}
.article-hero .lede{font-size:19px;line-height:1.6;color:#243b5c}
.article-hero .lede strong{color:var(--navy)}
.article-body{padding:34px 0 8px;font-family:Montserrat,sans-serif;color:#1f2d44;line-height:1.7}
.article-body h2{font-size:28px;font-weight:800;letter-spacing:-.6px;color:var(--navy);margin:42px 0 14px;line-height:1.2}
.article-body h3{font-size:20px;font-weight:700;color:var(--navy);margin:28px 0 10px}
.article-body p{margin:0 0 16px;font-size:17px}
.article-body ul,.article-body ol{margin:0 0 18px;padding-left:22px}
.article-body li{margin:0 0 9px;font-size:17px}
.article-body li strong{color:var(--navy)}
.article-body a{color:var(--navy);font-weight:600}
.article-callout{background:var(--soft);border-left:3px solid var(--yellow);padding:18px 22px;border-radius:0 8px 8px 0;margin:24px 0}
.article-callout p{margin:0;font-style:italic;font-size:16px;color:#243b5c}
.article-cta{background:var(--navy);color:#fff;border-radius:16px;padding:34px;margin:42px 0;text-align:center}
.article-cta h3{font-size:23px;font-weight:800;color:#fff;margin:0 0 10px}
.article-cta p{color:#cdd7e6;margin:0 0 20px;font-size:16px}
.article-faq{margin-top:42px;padding-top:28px;border-top:1px solid var(--line)}
.article-faq h3{font-size:17px;font-weight:700;color:var(--navy);margin:22px 0 6px}
.article-faq p{font-size:16px;color:#1f2d44;margin:0 0 10px}
@media(max-width:640px){.article-hero h1{font-size:32px}.article-body h2{font-size:24px}}