:root{
    --pink:#ff134a; --blue:#63b2f5; --dark-blue:#335e83;
    --gradient:linear-gradient(90deg,#ff134a 5.83%,#335e83 39.89%,#63b2f5 88.37%);
    --gradient-name:linear-gradient(90deg,#ff134a 5.83%,#335e83 39.89%,#63b2f5 88.37%);
    --font-display:'Hanken Grotesk',sans-serif;
    --font-ui:'Inter',sans-serif;
    --ink:#14141a; --gray-600:#5a5a66; --gray-400:#9a9aa6;
    --border:rgba(0,0,0,.08);
    /* Sistema de espaciado unificado */
    --container-max:1340px;
    --space-x:100px;
    --space-y:48px;
  }
  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; scroll-padding-top:80px; }
  @media (max-width:768px){ html{ scroll-padding-top:68px; } }
  @media (max-width:480px){ html{ scroll-padding-top:60px; } }
  body{ font-family:var(--font-ui); color:var(--ink); background:#fff; line-height:1.6; overflow-x:hidden; }
  a{ color:inherit; text-decoration:none; }
  img{ display:block; max-width:100%; }

  /* ============ NAVBAR ============ */
  .navbar{
    position:sticky; top:0; z-index:100;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(12px) saturate(180%);
    -webkit-backdrop-filter:blur(12px) saturate(180%);
    border-bottom:1px solid rgba(0,0,0,.06);
    padding:16px 28px;
    transition:padding .3s ease, background .3s ease, box-shadow .3s ease;
  }
  .navbar.scrolled{ padding:10px 28px; background:rgba(255,255,255,.95); box-shadow:0 4px 24px rgba(0,0,0,.06); }
  .nav-container{ display:flex; align-items:center; justify-content:space-between; max-width:1300px; margin:0 auto; gap:24px; }
  .nav-logo{
    display:flex; align-items:center; gap:8px;
    font-family:var(--font-display); font-weight:800; font-size:1.25rem;
    background:linear-gradient(90deg,#ff134a,#63b2f5);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    flex-shrink:0; transition:transform .3s ease;
  }
  .nav-logo:hover{ transform:scale(1.05); }
  .nav-back{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-ui); font-weight:600; font-size:.9rem;
    color:var(--ink); padding:8px 16px; border-radius:50px;
    position:relative; transition:color .3s ease;
  }
  .nav-back::after{
    content:''; position:absolute; bottom:4px; left:16px; right:16px;
    height:2px; background:var(--ink);
    transform:scaleX(0); transform-origin:center;
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    border-radius:2px;
  }
  .nav-back:hover{ color:var(--ink); }
  .nav-back:hover::after{ transform:scaleX(1); }
  .nav-back svg{ width:18px; height:18px; transition:transform .3s ease; }
  .nav-back:hover svg{ transform:translateX(-4px); }

  /* Barra de progreso */
  .scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0%; background:var(--gradient); z-index:101; transition:width .1s ease; box-shadow:0 1px 8px rgba(99,178,245,.4); }

  /* Botón volver arriba */
  .back-to-top{
    position:fixed; bottom:32px; right:32px; z-index:90;
    width:48px; height:48px; border-radius:50%;
    background:#14141a; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
    opacity:0; pointer-events:none; transform:translateY(20px) scale(.8);
    transition:opacity .35s ease, transform .35s ease, box-shadow .35s ease, background .35s ease;
  }
  .back-to-top.visible{ opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
  .back-to-top:hover{
    transform:translateY(-4px) scale(1.08);
    background:#4A5FE8;
    box-shadow:0 12px 32px rgba(74,95,232,.5), 0 0 28px rgba(74,95,232,.45), 0 0 60px rgba(74,95,232,.25);
  }
  .back-to-top:active{
    background:#6B7CFF;
    box-shadow:0 0 40px rgba(74,95,232,.7), 0 0 80px rgba(74,95,232,.4);
    animation:backGlow .6s ease-out;
  }
  @keyframes backGlow{
    0%{ box-shadow:0 0 20px rgba(74,95,232,.5), 0 0 40px rgba(74,95,232,.3); }
    50%{ box-shadow:0 0 50px rgba(74,95,232,.9), 0 0 100px rgba(74,95,232,.5); }
    100%{ box-shadow:0 12px 32px rgba(74,95,232,.5), 0 0 28px rgba(74,95,232,.45); }
  }
  .back-to-top svg{ width:20px; height:20px; color:#fff; transition:color .35s ease, filter .35s ease; }
  .back-to-top:hover svg{ filter:drop-shadow(0 0 6px rgba(255,255,255,.8)); }
  .back-to-top::before{ content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid rgba(74,95,232,.4); animation:backPulse 2.5s ease-out infinite; }
  @keyframes backPulse{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.6); opacity:0; } }

  /* Partículas del mouse */