:root{
    --bg:#0b0d12;
    --ink:#0f172a;
    --brand:#2faadd;
    --brand-ink:#0f5f78;
    --text:#0f172a;
    --muted:#64748b;
    --surface:#ffffff;
    --alt:#f6f8fb;
    --card:#ffffff;
    --ring:rgba(47,170,221,.35);
    --shadow: 0 10px 30px rgba(2,8,20,.06), 0 2px 10px rgba(2,8,20,.06);
  }
  
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
    color:var(--text);
    background:var(--surface);
    line-height:1.5;
  }
  
  /* Layout helpers */
  .container{width:min(1120px, 92%); margin-inline:auto}
  
  /* Header */
  .site-header{
    position:sticky; top:0; z-index:50;
    background:#fff; border-bottom:1px solid #eef2f7;
    backdrop-filter:saturate(180%) blur(8px);
  }
  .header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
  .logo{font-weight:900; letter-spacing:.5px; font-size:1.25rem; color:var(--brand); text-decoration:none}
  .logo-footer{font-size:1.1rem; font-weight:800}
  
  .nav{display:flex; gap:22px; align-items:center}
  .nav a{color:#0f172a; text-decoration:none; font-weight:600}
  .nav a:hover{color:var(--brand)}
  .btn{display:inline-block; background:var(--brand); color:#fff; padding:12px 18px; border-radius:10px; font-weight:700; text-decoration:none; box-shadow: var(--shadow)}
  .btn:hover{filter:brightness(.95)}
  .btn-secondary{background:#fff; color:var(--brand); border:1px solid var(--brand); box-shadow:none}
  .btn-small{padding:8px 12px; border-radius:8px; font-size:.95rem}
  .btn-invert{background:#fff; color:var(--brand); border:1px solid var(--brand)}
  
  .nav-toggle{display:none; background:none; border:0; padding:6px 4px}
  .nav-toggle span{display:block; width:24px; height:2px; background:#0f172a; margin:5px 0; transition:.2s}
  
  /* Hero */
  .hero{position:relative; min-height:64vh; display:grid; place-items:center; overflow:clip}
  .hero-bg{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.2) brightness(.75);
  }
  .hero::after{
    content:""; position:absolute; inset:0;
    background:radial-gradient(80% 60% at 50% 50%, rgba(47,170,221,.25), transparent 60%);
  }
  .hero-content{position:relative; color:#fff; text-align:left; padding:64px 0}
  .hero h1{font-size:clamp(2rem, 4vw, 3rem); line-height:1.1; margin:0 0 10px}
  .hero p{font-size:1.125rem; opacity:.95; max-width:720px}
  .hero-cta{display:flex; gap:12px; margin-top:18px}
  .hero-badges{display:flex; gap:16px; flex-wrap:wrap; list-style:none; padding:0; margin:22px 0 0}
.hero-badges li{
  background:rgba(11,13,18,.75);
  color:#f8fafc;
  border:1px solid rgba(15,23,42,.45);
  padding:8px 12px;
  border-radius:999px;
  font-size:.95rem;
  box-shadow:0 8px 18px rgba(10,12,18,.28);
  backdrop-filter:blur(4px);
}
  
  /* Sections */
  .section{padding:64px 0}
  .section-alt{background:var(--alt)}
  .section-header h2{font-size:1.9rem; margin:0 0 6px}
  .section-header p{color:var(--muted); margin:0}
  
  /* Cards grid */
  .cards-grid{
    display:grid; gap:22px; margin-top:26px;
    grid-template-columns: repeat(12, 1fr);
  }
  .card{
    grid-column: span 4;
    background:var(--card); border:1px solid #eef2f7; border-radius:14px; overflow:hidden; box-shadow: var(--shadow);
    display:flex; flex-direction:column; transition:transform .2s ease;
  }
  .card:hover{transform:translateY(-3px)}
  .card img{width:100%; height:190px; object-fit:cover}
  .card-body{padding:18px}
  .card h3{margin:0 0 6px; font-size:1.15rem}
  .card p{margin:0 0 10px; color:#475569}
  .card-link{font-weight:700; color:var(--brand); text-decoration:none}
  .card-link:hover{text-decoration:underline}
  
  /* Features */
  .features{
    display:grid; gap:18px; margin-top:14px;
    grid-template-columns: repeat(12, 1fr);
  }
  .feature{grid-column: span 3; background:#fff; border:1px solid #eef2f7; border-radius:14px; padding:18px; box-shadow:var(--shadow)}
  .feature h3{margin:0 0 6px; font-size:1.05rem}
  
  /* Pills & cases */
  .pill-list{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
  .pill{background:#fff; border:1px solid #e6eef6; border-radius:999px; padding:8px 12px; color:#0f172a}
  .case-grid{display:grid; gap:18px; margin-top:18px; grid-template-columns:repeat(3, 1fr)}
  .case{background:#fff; border:1px solid #eef2f7; border-radius:14px; padding:18px; box-shadow:var(--shadow)}
  .case h3{margin:0 0 6px}
  
  /* Quotes */
  .quotes{display:grid; gap:18px; grid-template-columns:repeat(2,1fr)}
  blockquote{
    margin:0; background:#fff; border-left:4px solid var(--brand); padding:18px; border-radius:8px; box-shadow:var(--shadow)
  }
  blockquote p{margin:0 0 8px}
  blockquote cite{color:var(--muted); font-style:normal}
  
  /* Recursos */
  .resource-grid{display:grid; gap:18px; grid-template-columns:repeat(3,1fr); margin-top:12px}
  .resource{display:block; text-decoration:none; color:inherit}
  .resource img{width:100%; height:160px; object-fit:cover; border-radius:12px}
  .resource span{display:block; margin-top:8px; font-weight:700}
  
  /* CTA */
  .cta{background:linear-gradient(135deg, var(--brand), var(--brand-ink)); color:#fff}
  .cta-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:34px 0}
  .cta h2{margin:0}
  .cta p{margin:0; opacity:.95}
  
  /* Contacto */
  .contact-form{display:grid; gap:14px; max-width:720px}
  .form-row{display:flex; flex-direction:column; gap:8px}
  label{font-weight:700}
  input, textarea{
    padding:12px 14px; border-radius:10px; border:1px solid #d9e3ee; font:inherit; outline:none;
    box-shadow: inset 0 1px 0 rgba(2,8,20,.03)
  }
  input:focus, textarea:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
  
  /* Footer */
  .site-footer{background:#0b1220; color:#dbe5f3; margin-top:40px}
  .footer-grid{
    display:grid; gap:22px; padding:32px 0;
    grid-template-columns: 2fr 1fr 1fr;
  }
  .site-footer a{color:#fff; opacity:.9; text-decoration:none}
  .site-footer a:hover{text-decoration:underline}
  .site-footer h4{margin:0 0 8px}
  .footer-grid p{margin:12px 0 0}
  .footer-base{border-top:1px solid rgba(255,255,255,.12); padding:14px 0}
  
  /* Responsive */
  @media (max-width: 1024px){
    .card{grid-column: span 6}
    .feature{grid-column: span 6}
  }
  @media (max-width: 768px){
    .nav{position:fixed; inset:64px 0 auto 0; background:#fff; border-bottom:1px solid #eef2f7; padding:12px 24px; transform:translateY(-150%); transition:.2s; flex-direction:column; gap:14px}
    .nav.open{transform:translateY(0)}
    .nav-toggle{display:block}
    .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .nav-toggle.open span:nth-child(2){opacity:0}
    .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    .hero{min-height:72vh}
    .cards-grid{grid-template-columns: repeat(2, 1fr)}
    .features{grid-template-columns: repeat(2, 1fr)}
    .case-grid{grid-template-columns: 1fr}
    .quotes{grid-template-columns: 1fr}
    .resource-grid{grid-template-columns: 1fr}
    .cta-inner{flex-direction:column; text-align:center}
    .footer-grid{grid-template-columns: 1fr}
  }