:root{
    --navy:#0f2e4a;           /* azul profundo del logo */
    --ink:#10243a;
    --bg:#f7f9fc;
    --card:#ffffff;
    --muted:#64748b;
    --ring:rgba(16,36,58,.08);
  
    /* Gradiente inspirado en el cerebro del logo */
    --g1:#12c2e9;  /* turquesa */
    --g2:#7f5af0;  /* violeta */
    --g3:#ff5ea2;  /* magenta */
    --g4:#ffb24d;  /* naranja suave */
  }
  
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
    color:var(--ink);
    background:var(--bg);
    line-height:1.6;
    scroll-behavior:smooth;
  }
  
  /* Layout helpers */
  .container{width:min(1120px, 92%); margin-inline:auto}
  .section{padding:72px 0}
  .section.alt{background:#fff}
  .section-head{margin-bottom:28px}
  .section-head h2{font-size:clamp(1.6rem,2.5vw,2rem); margin:0 0 8px}
  .section-head p{color:var(--muted); margin:0}
  .tag{display:inline-block; padding:.35rem .65rem; border-radius:999px; background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3),var(--g4)); color:#fff; font-weight:600}
  
  .grid{display:grid; gap:24px}
  .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid.areas{grid-template-columns:repeat(2,minmax(0,1fr))}
  @media (max-width:960px){.grid.two,.grid.cards,.grid.areas{grid-template-columns:1fr}}
  .top-gap{margin-top:28px}
  
  /* Header / nav */
  .site-header{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,.75);
    backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--ring);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--navy); font-weight:700; letter-spacing:.5px}
  .brand img{width:40px; height:40px}
  .menu{display:flex; align-items:center; gap:18px}
  .menu a{color:var(--ink); text-decoration:none; font-weight:500}
  .menu .btn{margin-left:8px}
  .nav-toggle{display:none; background:none; border:none}
  .nav-toggle span{display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; transition:.2s}
  @media (max-width:900px){
    .nav-toggle{display:block}
    .menu{position:absolute; right:0; top:64px; background:#fff; width:min(420px,100%); box-shadow:0 16px 40px rgba(0,0,0,.08); padding:16px; border:1px solid var(--ring); border-radius:14px; display:none; flex-direction:column; align-items:flex-start}
    .menu.open{display:flex}
  }
  
  /* Buttons */
  .btn{display:inline-block; padding:.8rem 1.1rem; border-radius:12px; font-weight:600; text-decoration:none; border:2px solid transparent}
  .btn-primary{color:#fff; background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3)); box-shadow:0 8px 24px rgba(127,90,240,.25)}
  .btn-outline{border-color:var(--navy); color:var(--navy); background:transparent}
  .btn-ghost{background:#fff; color:var(--navy); border-color:transparent}
  
  /* Hero */
  .hero{
    padding:84px 0 48px;
    background:
      radial-gradient(1200px 50% at 80% -10%, rgba(18,194,233,.15), transparent 60%),
      linear-gradient(180deg, rgba(127,90,240,.06), transparent 20%),
      linear-gradient(180deg, rgba(255,94,162,.05), transparent 30%);
  }
  .hero-grid{display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:28px}
  @media (max-width:960px){.hero-grid{grid-template-columns:1fr}}
  .hero-text h1{font-size:clamp(2rem,4vw,3rem); margin:0 0 8px}
  .mark{background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3),var(--g4)); -webkit-background-clip:text; background-clip:text; color:transparent}
  .lead{font-size:1.05rem; color:var(--ink); max-width:56ch}
  .cta{display:flex; gap:12px; margin:18px 0 10px; flex-wrap:wrap}
  .bullets{display:flex; gap:16px; padding:0; margin:10px 0 0; list-style:none; color:var(--muted); flex-wrap:wrap}
  .hero-art{position:relative; min-height:260px}
  .hero-logo{width:min(280px, 70%); display:block; margin:0 auto; position:relative; z-index:2}
  .blob{
    position:absolute; inset:auto 0 0 0; height:60%;
    background:radial-gradient(circle at 30% 30%, var(--g1), transparent 60%),
               radial-gradient(circle at 70% 40%, var(--g2), transparent 60%),
               radial-gradient(circle at 50% 70%, var(--g3), transparent 60%),
               radial-gradient(circle at 50% 50%, var(--g4), transparent 60%);
    filter:blur(40px); opacity:.35; border-radius:24px;
  }
  
  /* Cards / content */
  .card{
    background:var(--card);
    border:1px solid var(--ring);
    border-radius:16px;
    padding:18px;
    box-shadow:0 6px 18px rgba(0,0,0,.04);
  }
  .card h3{margin:0 0 6px; font-size:1.05rem}
  .card.line{border-left:6px solid transparent; border-image:linear-gradient(var(--g1),var(--g2),var(--g3)) 1}
  
  .check, .dash, .dot{padding-left:1rem}
  .check li{list-style:"✔  " outside; margin:.25rem 0}
  .dash li{list-style:"—  " outside; margin:.25rem 0}
  .dot li{list-style:disc; margin:.25rem 0}
  
  .note{
    background:linear-gradient(180deg, rgba(18,194,233,.08), rgba(127,90,240,.08));
    border:1px dashed rgba(16,36,58,.2);
    border-radius:16px; padding:16px;
  }
  
  .pill-wrap{display:flex; gap:10px; flex-wrap:wrap}
  .pill{background:linear-gradient(90deg, var(--g1), var(--g2)); color:#fff; padding:.45rem .7rem; border-radius:999px; font-weight:600; box-shadow:0 6px 16px rgba(127,90,240,.25)}
  .muted{color:var(--muted)}
  
  /* CTA band */
  .cta-band{
    background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3),var(--g4));
    color:#fff;
  }
  .cta-band-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:28px 0}
  .cta-band .btn-ghost{background:rgba(255,255,255,.2); color:#fff}
  @media (max-width:900px){.cta-band-inner{flex-direction:column; text-align:center}}
  
  .contact{padding-left:0; list-style:none}
  .contact a{color:var(--navy); text-decoration:none}
  
  .map iframe{width:100%; height:320px; border:0; border-radius:14px}
  
  /* Footer */
  .site-footer{background:#0f1d31; color:#c7d2fe}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:24px; padding:36px 0}
  .footer-brand img{width:48px; height:48px; display:block; margin-bottom:6px}
  .links{padding-left:0; list-style:none}
  .links a{color:#c7d2fe; text-decoration:none}
  .copy{padding:10px 0 22px; border-top:1px solid rgba(255,255,255,.08); text-align:center; color:#9aa6d6}
  @media (max-width:900px){.footer-grid{grid-template-columns:1fr}}
  
  /* Back to top */
  .to-top{
    position:fixed; right:16px; bottom:16px; width:40px; height:40px; border-radius:10px;
    border:none; background:linear-gradient(180deg,var(--g2),var(--g3)); color:#fff; font-size:18px;
    box-shadow:0 10px 20px rgba(0,0,0,.15); cursor:pointer; opacity:0; visibility:hidden; transition:.2s;
  }
  .to-top.show{opacity:1; visibility:visible}
  
  /* Small tweaks */
  h4{margin:0 0 .4rem}