.gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .tech-gradient {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #7c3aed 100%);
        }
   
        
        .floating {
            animation: floating 3s ease-in-out infinite;
        }
        @keyframes floating {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        .logo-gradient {
            background: linear-gradient(90deg, #a78bfa 0%, #ffffff 50%, #a78bfa 100%);
            background-size: 200% 100%;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradient-shift 3s ease-in-out infinite;
        }
        .logo-gradient:hover {
            animation: gradient-shift 0.8s ease-in-out infinite;
        }
        @keyframes gradient-shift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        /* Aparición al scroll */
        .fade-in{
            opacity:0;
            transform:translateY(30px);
            transition:all .6s ease;
        }

        .fade-in.visible{
            opacity:1;
            transform:translateY(0)
        }

        /* Cápsulas */
        .cap{
            display:flex;
            align-items:center;
            gap:.75rem;
            padding:.9rem 1rem;
            border-radius:9999px;
            border:1px solid rgba(168,85,247,.35);
            background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
            transition:border-color .2s,box-shadow .2s,transform .2s
        }

        .cap:hover{
            border-color:rgba(168,85,247,.6);
            box-shadow:0 4px 18px rgba(0,0,0,.25),inset 0 0 16px rgba(168,85,247,.07);
            transform:translateY(-2px)
        }

        .cap-icon{
            position:relative;
            display:grid;
            place-items:center;
            width:32px;height:32px;
            border-radius:9999px;
            color:#a855f7;
            background:rgba(168,85,247,.12);
            box-shadow:0 0 0 2px rgba(168,85,247,.55),0 0 12px rgba(168,85,247,.25)
        }

        .cap-text{
            display:flex;
            flex-direction:column;
            line-height:1.15
        }

        .cap-text strong{
            color:#fff;
            font-weight:700;
            letter-spacing:.01em
        }

        .cap-text span{
            color:#cbd5e1;
            font-size:.85rem
        }

        @media (prefers-reduced-motion:reduce){
            .cap,.cap:hover{
                transform:none;
                transition:none
            }
        }

        /* Sombra glow usada en botones */
        .glow-effect{
            box-shadow:0 0 20px rgba(168,85,247,.3)
        }

        :root{ 
          --nav-h:56px; 
        }

        @media (min-width:1024px){ 
          :root{ --nav-h:72px; 
          } 
        }

        body{
          padding-top: 0;
        }


        .header-pill{
          transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease, transform .25s ease;
        }
        .btn-lines span{ 
          display:block;
          height:2px;
          width:20px;
          background:#fff;
          transition:transform .25s ease,opacity .25s ease; 
        }

        .btn-lines span+span{ 
          margin-top:5px; 
        }

        .btn-open .line-1{ 
          transform:translateY(7px) rotate(45deg); 
        }

        .btn-open .line-2{ 
          opacity:0; 
        }

        .btn-open .line-3{ 
          transform:translateY(-7px) rotate(-45deg); 
        }


        /* Base: como lo tenés ahora */

        /* Pantallas normales: logo grande */
        #mobileHeader .brand img { 
          width: 48px; 
          height: 48px; 
        }   /* logo más grande */

        #mobileHeader h2 { 
          font-size: 1.25rem; 
        }                  /* ~20px */

        /* Pantallas bajas: solo achicamos links y botones, NO logo ni nombre */
        @media (max-height: 780px) {
          #mobileHeader { 
            padding: 10px 16px !important; 
          }

          #mobileHeader h2 { 
            font-size: 1.2rem !important; 
          }

          #mobileHeader .brand img { 
            width: 44px; height: 44px; 
          }


          #mobileList { 
            row-gap: 6px !important; 
          }

          .mobile-link { 
            padding: 10px 12px !important; 
            font-size: 1rem !important; 
          }

          #mobileCtas { 
            margin-top: 12px !important; 
            row-gap: 8px !important; 
          }

          .cta { 
            padding: 10px 12px !important; 
            font-size: 1rem !important; 
          }
        }

        @media (max-height: 680px) {
          #mobileHeader h2 { 
            font-size: 1.1rem !important; 
          }

          #mobileHeader .brand img { 
            width: 40px; 
            height: 40px; 
          }

          .mobile-link { 
            padding: 9px 10px !important; 
            font-size: 0.95rem !important; 
          }

          .cta { 
            padding: 9px 10px !important; 
            font-size: 0.95rem !important; 
          }


        }

        @media (max-height: 600px) {
          #mobileHeader h2 { 
            font-size: 1rem !important; 
          }

          #mobileHeader .brand img { 
            width: 36px; 
            height: 36px; 
          }

          .mobile-link { 
            padding: 8px 9px !important; 
            font-size: 0.9rem !important; 
          }

          .cta { 
            padding: 8px 9px !important; 
            font-size: 0.9rem !important; 
          }

        }

        /* ===== Redes del panel móvil (limpias y estables) ===== */
        .social-list { 
          list-style: none;
           padding: 0; 
           margin: 0; 
          }

        .social-row{
          display:flex; align-items:center; justify-content:space-between;
          width:100%;
          padding:.85rem 1rem;
          border-radius:.9rem;
          border:1px solid rgba(255,255,255,.10);
          background: rgba(255,255,255,.05);
          transition: background .2s, border-color .2s;
        }
        .social-row:hover{
          background: rgba(124,58,237,.10);
          border-color: rgba(168,85,247,.45);
        }

        .social-left{ 
          display:flex; 
          align-items:center; 
          gap:.8rem; 
          min-width:0; 
        }

        .social-icon{
          width:38px; height:38px; border-radius:9999px;
          display:grid; place-items:center; flex-shrink:0;
          background: rgba(15,15,20,.75);
          border:1px solid rgba(168,85,247,.45);
          box-shadow:none;                 /* sin glows ni aros extra */
        }
        .social-icon svg{ 
          width:18px; 
          height:18px; 
          color:#fff; 
        }

        .social-text{ 
          min-width:0; 
          line-height:1.15; 
        }

        .social-title{ 
          font-weight:700; 
          color:#fff; 
        }

        .social-sub{ 
          font-size:.9rem; 
          color:rgba(255,255,255,.7); 
          white-space:nowrap; 
          overflow:hidden; 
          text-overflow:ellipsis; 
        }

        .social-arrow{ 
          width:20px; 
          height:20px; 
          color:rgba(255,255,255,.6); 
        }

        /* Compactación por altura (nada se oculta, solo se achica) */
        @media (max-height:680px){
          .social-icon{ width:34px; height:34px; }
          .social-icon svg{ width:16px; height:16px; }
          .social-title{ font-size:1rem; }
          .social-sub{ font-size:.85rem; }
        }
        @media (max-height:600px){
          .social-icon{ width:30px; height:30px; }
          .social-icon svg{ width:15px; height:15px; }
          .social-title{ font-size:.95rem; }
          .social-sub{ font-size:.8rem; }
        }
        /* ===== Redes del menú móvil: estilo lista simple ===== */
        #mobileSocial .social-item{
          display:flex; align-items:center; gap:12px;
          text-decoration:none;
        }

        #mobileSocial .social-icon{
          width: 36px; height: 36px;
          display:grid; place-items:center;
          border-radius:9999px;
          background: rgba(255,255,255,.04);
          border:1px solid rgba(168,85,247,.55); /* violeta */
          flex-shrink:0;
          box-shadow:none;
          position:relative;
        }
        /* anula cualquier aro/glow heredado */
        #mobileSocial .social-icon::before,
        #mobileSocial .social-icon::after{ 
          content:none !important; 
          display:none !important; 
        }

        #mobileSocial .social-icon svg{ 
          width:18px; 
          height:18px; 
          color:#fff; 
        }

        #mobileSocial .social-text{ 
          line-height:1.1; 
        }

        #mobileSocial .social-title{ 
          font-weight:800; 
          color:#fff; 
        }

        #mobileSocial .social-sub{ 
          margin-top:2px; 
          color:rgba(255,255,255,.85); 
        }

        /* compactación por altura: solo tamaños, no ocultamos nada */
        @media (max-height:680px){
          #mobileSocial .social-icon{ 
            width:32px; 
            height:32px; 
          }

          #mobileSocial .social-icon svg{ 
            width:16px; 
            height:16px; 
          }

          #mobileSocial .social-title{ 
            font-size:1rem; 
          }

          #mobileSocial .social-sub{ 
            font-size:.95rem; 
          }
        }

        @media (max-height:600px){
          #mobileSocial .social-icon{ 
            width:30px; 
            height:30px; 
          }

          #mobileSocial .social-icon svg{ 
            width:15px; 
            height:15px; 
          }

          #mobileSocial .social-title{ 
            font-size:.95rem; 
          }

          #mobileSocial .social-sub{ 
            font-size:.9rem; 
          }
        }

        /* Offset para anclas internas cuando hay header fijo */
        section {
          scroll-margin-top: var(--nav-h);
        }
        /* Mata cualquier banda de fondo heredada del header viejo */
        #capsuleHeader {
          background: transparent !important;
          box-shadow: none !important;
          border: 0 !important;
        }

        /* Por si quedó algún contenedor interno con fondo de ancho completo */
        #capsuleHeader > *, 
        #capsuleHeader nav {
          background: transparent !important;
          box-shadow: none !important;
          border: 0 !important;
        }

        /* La única que pinta es la píldora */
        #capsuleHeader .header-pill {
          background: rgba(17, 24, 39, .85) !important; /* bg-gray-900/85 */
          backdrop-filter: blur(12px) !important;
          -webkit-backdrop-filter: blur(12px) !important;
          border: 1px solid rgba(255,255,255,.1) !important;
        }

        /* Borde que se va llenando con el scroll (solo desktop) */
        @media (min-width:1024px){
          .scroll-paint{ position: relative; }

          /* Grosor del borde: cambiá --bw si querés más/menos grosor */
          .scroll-paint{ --bw: 2px; --p: 0; --deg: 0deg; }

          .scroll-paint::before{
            content:"";
            position:absolute; inset:0;
            border-radius:inherit;

            /* Borde con conic-gradient que se “rellena” según --p y gira con --deg */
            background:
              conic-gradient(from var(--deg),
                rgba(168,85,247,.95) calc(var(--p) * 1turn),
                rgba(168,85,247,.12) 0deg);

            /* recortamos para que quede solo el ANILLO (truco de máscara) */
            padding: var(--bw);

            /* primero la versión estándar */
            mask:
              linear-gradient(#000 0 0) content-box,
              linear-gradient(#000 0 0);
            mask-composite: exclude;

            /* después la versión con prefijo para WebKit */
            -webkit-mask:
              linear-gradient(#000 0 0) content-box,
              linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;

            pointer-events:none;
            transition: background .08s linear;
          }



          /* Un glow suave que crece con el progreso */
          .scroll-paint{
            box-shadow:
              0 10px 28px rgba(0,0,0,.35),
              0 0 calc(6px + 12px*var(--p)) rgba(168,85,247,.25);
          }
        }

        .cap-text span:first-child {
          color: #fff;      /* mismo color que antes */
          font-weight: 700; /* negrita igual que <strong> */
          font-size: 1rem;  /* asegura que no se achique */
        }