:root{
    --navy:#0B1F3A;
    --navy-soft:#132a4d;
    --navy-softer:#1c3660;
    --mint:#00C878;
    --mint-dim:rgba(0,200,120,.14);
    --bg:#F7F8FA;
    --ink:#0E1420;
    --muted:#5B6472;
    --stale:#98A2B3;
    --stale-bg:#EEF0F3;
    --line:#E4E7EC;
    --line-dark:#24406e;
    --white:#FFFFFF;
    --radius:14px;
    --shadow: 0 20px 50px -20px rgba(11,31,58,.25);
  }

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

  html{scroll-behavior:smooth;}

  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,.display{
    font-family:'Space Grotesk', sans-serif;
    letter-spacing:-0.01em;
    line-height:1.12;
  }

  .mono{ font-family:'JetBrains Mono', monospace; }

  img,svg{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  section{padding:88px 24px;}
  .wrap{max-width:1120px; margin:0 auto;}

  :focus-visible{
    outline:3px solid var(--mint);
    outline-offset:3px;
    border-radius:4px;
  }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 24px;
    border-radius:999px;
    font-weight:600;
    font-size:15px;
    border:1.5px solid transparent;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    white-space:nowrap;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn-primary{
    background:var(--mint);
    color:#04150D;
    box-shadow:0 10px 30px -10px rgba(0,200,120,.55);
  }
  .btn-primary:hover{ box-shadow:0 14px 34px -10px rgba(0,200,120,.7); }
  .btn-ghost{
    background:transparent;
    color:var(--white);
    border-color:rgba(255,255,255,.28);
  }
  .btn-ghost:hover{ border-color:rgba(255,255,255,.6); }
  .btn-dark{
    background:var(--navy);
    color:var(--white);
  }
  .btn-dark:hover{ box-shadow:0 14px 34px -10px rgba(11,31,58,.5); }

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(11,31,58,.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav{
    max-width:1120px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px;
  }
  .logo{
    color:var(--white);
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:18px;
    display:flex; align-items:center; gap:8px;
  }
  .logo .dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--mint);
    box-shadow:0 0 0 4px var(--mint-dim);
  }
  .nav-links{
    display:flex; gap:32px; align-items:center;
  }
  .nav-links a{
    color:rgba(255,255,255,.75);
    font-size:14.5px; font-weight:500;
    transition:color .15s ease;
  }
  .nav-links a:hover{ color:var(--white); }
  .nav-cta{ display:flex; align-items:center; }
  .nav-toggle{ display:none; }

  /* ---------- Hero ---------- */
  .hero{
    background:
      radial-gradient(900px 500px at 85% -10%, rgba(0,200,120,.16), transparent 60%),
      linear-gradient(180deg, var(--navy) 0%, var(--navy-soft) 100%);
    color:var(--white);
    padding:96px 24px 80px;
    overflow:hidden;
  }
  .hero-grid{
    max-width:1120px; margin:0 auto;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:56px;
    align-items:center;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'JetBrains Mono', monospace;
    font-size:12.5px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--mint);
    background:var(--mint-dim);
    border:1px solid rgba(0,200,120,.35);
    padding:7px 14px;
    border-radius:999px;
    margin-bottom:22px;
  }
  .eyebrow .pulse{
    width:6px; height:6px; border-radius:50%;
    background:var(--mint);
    animation:pulse 1.8s infinite;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(0,200,120,.6);}
    70%{box-shadow:0 0 0 8px rgba(0,200,120,0);}
    100%{box-shadow:0 0 0 0 rgba(0,200,120,0);}
  }
  .hero h1{
    font-size:clamp(34px, 4.4vw, 52px);
    font-weight:700;
    margin-bottom:22px;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--mint);
  }
  .hero p.lead{
    font-size:18px;
    color:rgba(255,255,255,.72);
    max-width:520px;
    margin-bottom:34px;
  }
  .hero-actions{
    display:flex; gap:14px; flex-wrap:wrap;
    margin-bottom:36px;
  }
  .hero-trust{
    display:flex; gap:22px; flex-wrap:wrap;
    font-size:13.5px; color:rgba(255,255,255,.55);
  }
  .hero-trust li{ display:flex; align-items:center; gap:7px; }
  .hero-trust svg{ width:15px; height:15px; flex-shrink:0; color:var(--mint); }

  /* ---------- Live feed widget (signature element) ---------- */
  .feed-card{
    background:var(--navy-softer);
    border:1px solid rgba(255,255,255,.09);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .feed-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .feed-head-label{
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    color:rgba(255,255,255,.55);
    letter-spacing:.04em;
  }
  .feed-live{
    display:flex; align-items:center; gap:6px;
    font-family:'JetBrains Mono', monospace;
    font-size:11.5px;
    color:var(--mint);
    font-weight:500;
  }
  .feed-live .pulse{
    width:6px; height:6px; border-radius:50%;
    background:var(--mint);
    animation:pulse 1.8s infinite;
  }
  .feed-body{
    padding:6px 0;
    min-height:280px;
  }
  .feed-row{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:14px;
    align-items:center;
    padding:13px 18px;
    border-bottom:1px solid rgba(255,255,255,.05);
    font-family:'JetBrains Mono', monospace;
    font-size:12.5px;
    opacity:0;
    transform:translateY(6px);
    animation:rowIn .5s ease forwards;
  }
  @keyframes rowIn{
    to{ opacity:1; transform:translateY(0); }
  }
  .feed-row .badge{
    width:7px; height:7px; border-radius:50%;
    background:var(--mint);
  }
  .feed-row .name{ color:rgba(255,255,255,.88); }
  .feed-row .meta{ color:rgba(255,255,255,.4); text-align:right; }
  .feed-foot{
    padding:12px 18px 16px;
    font-size:11.5px;
    color:rgba(255,255,255,.35);
    border-top:1px solid rgba(255,255,255,.06);
  }

  /* ---------- Trust bar ---------- */
  .trustbar{
    background:var(--white);
    border-bottom:1px solid var(--line);
    padding:36px 24px;
  }
  .trustbar .wrap{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;
  }
  .trust-item{
    display:flex; align-items:center; gap:10px;
    font-size:14px; font-weight:500; color:var(--muted);
  }
  .trust-item svg{ width:18px; height:18px; color:var(--mint); flex-shrink:0; }

  /* ---------- Section headers ---------- */
  .section-head{
    max-width:620px;
    margin-bottom:52px;
  }
  .section-head .tag{
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--navy);
    opacity:.55;
    display:block;
    margin-bottom:12px;
  }
  .section-head h2{
    font-size:clamp(26px, 3vw, 36px);
    margin-bottom:14px;
  }
  .section-head p{ color:var(--muted); font-size:16px; }

  /* ---------- Comparison ---------- */
  .compare{ background:var(--bg); }
  .compare-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .compare-col{
    border-radius:var(--radius);
    padding:28px 26px;
    border:1.5px solid var(--line);
  }
  .compare-col.stale{
    background:var(--stale-bg);
  }
  .compare-col.live{
    background:var(--navy);
    border-color:var(--navy);
    box-shadow:var(--shadow);
  }
  .compare-col h3{
    font-size:19px;
    margin-bottom:4px;
  }
  .compare-col.stale h3{ color:var(--muted); }
  .compare-col.live h3{ color:var(--white); }
  .compare-col .sub{
    font-size:13px;
    margin-bottom:22px;
    display:block;
  }
  .compare-col.stale .sub{ color:var(--stale); }
  .compare-col.live .sub{ color:var(--mint); }
  .compare-list li{
    display:flex; align-items:flex-start; gap:11px;
    padding:11px 0;
    border-top:1px solid rgba(0,0,0,.06);
    font-size:14.5px;
  }
  .compare-col.live .compare-list li{ border-top-color:rgba(255,255,255,.08); color:rgba(255,255,255,.85); }
  .compare-col.stale .compare-list li{ color:var(--muted); }
  .compare-list li:first-child{ border-top:none; }
  .compare-list svg{ width:17px; height:17px; flex-shrink:0; margin-top:2px; }
  .compare-col.stale svg{ color:var(--stale); }
  .compare-col.live svg{ color:var(--mint); }

  /* ---------- How it works ---------- */
  .steps{ background:var(--white); }
  .steps-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:0;
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
  }
  .step{
    padding:32px 26px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .step .num{
    font-family:'JetBrains Mono', monospace;
    font-size:13px;
    color:var(--mint);
    margin-bottom:16px;
    display:block;
  }
  .step h3{
    font-size:16.5px;
    margin-bottom:10px;
  }
  .step p{ font-size:14px; color:var(--muted); }

  /* Variante de 3 columnas usada en páginas de vertical (con su propio responsive) */
  .steps-grid.cols-3{ grid-template-columns:repeat(3, 1fr); }
  @media (max-width: 880px){
    .steps-grid.cols-3{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 560px){
    .steps-grid.cols-3{ grid-template-columns:1fr; }
  }

  /* ---------- Article body (guía pilar, comparativa) ---------- */
  .article-body{
    max-width:760px;
    margin:0 auto;
  }
  .article-body h2{
    font-size:24px;
    margin:44px 0 16px;
    color:var(--ink);
  }
  .article-body h2:first-child{ margin-top:0; }
  .article-body h3{
    font-size:18px;
    margin:28px 0 12px;
    color:var(--ink);
  }
  .article-body p{
    font-size:16px;
    color:var(--muted);
    margin-bottom:16px;
  }
  .article-body ul, .article-body ol{
    margin:0 0 20px 20px;
    color:var(--muted);
  }
  .article-body li{
    font-size:15.5px;
    margin-bottom:10px;
    padding-left:4px;
  }
  .article-body strong{ color:var(--ink); }
  .article-body a{
    color:var(--navy);
    font-weight:600;
    border-bottom:1.5px solid var(--mint);
  }
  .article-body a:hover{ color:var(--mint); }
  .article-callout{
    background:var(--stale-bg);
    border-left:3px solid var(--mint);
    border-radius:0 10px 10px 0;
    padding:18px 22px;
    margin:24px 0;
    font-size:15px;
    color:var(--ink);
  }
  .toc{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:22px 26px;
    margin-bottom:36px;
  }
  .toc-label{
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--mint);
    display:block;
    margin-bottom:12px;
  }
  .toc ol{ margin:0 0 0 20px; }
  .toc li{ margin-bottom:8px; font-size:14.5px; }
  .toc a{ color:var(--ink); font-weight:500; }
  .toc a:hover{ color:var(--mint); }

  /* ---------- Directorio de rubros ---------- */
  .rubros-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
  }
  @media (max-width: 880px){ .rubros-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width: 560px){ .rubros-grid{ grid-template-columns:1fr; } }
  .rubro-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:22px;
    scroll-margin-top:90px;
  }
  .rubro-card h3{
    font-size:16px;
    margin-bottom:8px;
  }
  .rubro-card p{
    font-size:14px;
    color:var(--muted);
  }

  /* ---------- FAQ ---------- */
  .faq{ background:var(--bg); }
  .faq-list{ max-width:760px; }
  details{
    border-bottom:1px solid var(--line);
    padding:22px 0;
  }
  details summary{
    cursor:pointer;
    font-weight:600;
    font-size:16.5px;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
  }
  details summary::-webkit-details-marker{ display:none; }
  details summary .plus{
    font-family:'JetBrains Mono', monospace;
    font-size:20px;
    color:var(--mint);
    flex-shrink:0;
    transition:transform .2s ease;
  }
  details[open] summary .plus{ transform:rotate(45deg); }
  details p{
    margin-top:14px;
    color:var(--muted);
    font-size:15px;
    max-width:640px;
  }

  /* ---------- Final CTA ---------- */
  .final-cta{
    background:linear-gradient(135deg, var(--navy) 0%, #0f2a52 100%);
    color:var(--white);
    text-align:center;
    padding:96px 24px;
  }
  .final-cta h2{
    font-size:clamp(28px, 3.6vw, 40px);
    max-width:680px;
    margin:0 auto 18px;
  }
  .final-cta p{
    color:rgba(255,255,255,.7);
    max-width:520px;
    margin:0 auto 36px;
    font-size:16px;
  }
  .final-actions{
    display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  }
  .final-cta .secondary-link{
    display:inline-flex; align-items:center; gap:6px;
    margin-top:22px;
    font-size:14px;
    color:rgba(255,255,255,.6);
  }
  .final-cta .secondary-link a{
    color:var(--mint);
    font-weight:600;
    border-bottom:1px solid rgba(0,200,120,.4);
  }

  /* ---------- Footer ---------- */
  footer{
    background:#081527;
    color:rgba(255,255,255,.5);
    padding:44px 24px 28px;
    font-size:13.5px;
  }
  .footer-grid{
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:20px;
    padding-bottom:24px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .footer-logo{
    color:var(--white); font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:16px;
  }
  .footer-links{ display:flex; gap:26px; flex-wrap:wrap; }
  .footer-links a:hover{ color:var(--white); }
  .footer-bottom{
    padding-top:20px;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  }

  /* ---------- Floating WhatsApp ---------- */
  .float-wa{
    position:fixed;
    bottom:22px; right:22px;
    z-index:200;
    display:flex; align-items:center; gap:9px;
    background:var(--mint);
    color:#04150D;
    padding:14px 20px;
    border-radius:999px;
    font-weight:600;
    font-size:14px;
    box-shadow:0 12px 30px -10px rgba(0,200,120,.6);
    transition:transform .15s ease;
  }
  .float-wa:hover{ transform:translateY(-2px) scale(1.02); }
  .float-wa svg{ width:19px; height:19px; }

  /* ---------- Responsive ---------- */
  @media (max-width: 880px){
    .nav-links{ display:none; }
    .hero-grid{ grid-template-columns:1fr; }
    .hero p.lead{ max-width:100%; }
    .compare-grid{ grid-template-columns:1fr; }
    .steps-grid{ grid-template-columns:1fr 1fr; }
    .trustbar .wrap{ justify-content:flex-start; }
  }
  @media (max-width: 560px){
    section{ padding:64px 20px; }
    .steps-grid{ grid-template-columns:1fr; }
    .hero{ padding-top:76px; }
    .float-wa span{ display:none; }
    .float-wa{ padding:14px; }
    .logo{ font-size:15px; }
    .nav{ padding:14px 16px; }
    .nav-cta .btn{ padding:10px 14px; font-size:13px; }
    .feed-row{ grid-template-columns:auto 1fr; row-gap:4px; }
    .feed-row .meta{
      grid-column:1 / -1;
      text-align:left;
      padding-left:21px;
      font-size:11px;
    }
    .hero-actions .btn{ width:100%; justify-content:center; }
  }
  @media (max-width: 400px){
    .nav-cta{ display:none; }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .pulse, .feed-row{ animation:none !important; opacity:1 !important; transform:none !important; }
  }