.elementor-599 .elementor-element.elementor-element-eff5ee0{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;}@media(max-width:1024px){.elementor-599 .elementor-element.elementor-element-eff5ee0{--padding-top:0px;--padding-bottom:0px;--padding-left:25px;--padding-right:25px;}}@media(max-width:767px){.elementor-599 .elementor-element.elementor-element-eff5ee0{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS */:root{
      --brand-from:#24ACFF;
      --brand-to:#625DFF;
      --bg:#111111;
      --text:#ffffff;
    }
    *{box-sizing:border-box;margin:0;padding:0;}
    html,body{height:100%;scroll-behavior:smooth;font-family:'Montserrat',sans-serif;color:var(--text);background:var(--bg);}
    a{text-decoration:none;color:inherit;}

    /* Utils */
    .gradient{background:linear-gradient(90deg,var(--brand-from),var(--brand-to));-webkit-background-clip:text;color:transparent;}
    .btn{display:inline-block;padding:0.75rem 2.5rem;border-radius:9999px;font-weight:600;background:linear-gradient(90deg,var(--brand-from),var(--brand-to));transition:background .3s;}
    .btn:hover{opacity:.85;}
    .section{padding:4rem 1rem;max-width:1200px;margin:0 auto;}
    .title{font-size:2rem;font-weight:700;margin-bottom:2rem;text-align:center;}
    @media(min-width:768px){.title{font-size:3rem;}}
    @media (max-width: 639px){
      #hero{ gap: 0.75rem; }                 /* de 24 px → 12 px */
        #hero img{
          max-width: 120px;                    /* logo un poco más pequeño */
          margin-bottom: 0.5rem;               /* menos aire bajo el logo */
        }
      }

    /* Hero */
    #hero{;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:1.5rem;}
    #hero h1{font-size:2.5rem;font-weight:700;} @media(min-width:768px){#hero h1{font-size:4rem;}}
    #hero p{max-width:600px;line-height:1.5;font-size:1.1rem;}

    /* Arrow down */
    .arrow-down{
      margin-top:2rem;
      animation:bounce 2.5s infinite;
      width:48px;height:48px;
      display:flex;align-items:center;justify-content:center;
      border:none;outline:none;cursor:pointer;
      border-radius:50%;
      background:linear-gradient(90deg,var(--brand-from),var(--brand-to));
      transition: opacity .3s ease;
    }
    .arrow-down svg{width:24px;height:24px;fill:#fff;}
    .arrow-down:hover{opacity: .8}
    @keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0);}40%{transform:translateY(10px);}60%{transform:translateY(5px);}}


    /* Services */
    #services .cards{display:grid;gap:1.5rem;grid-template-columns:1fr;}@media(min-width:640px){#services .cards{grid-template-columns:1fr 1fr;}}@media(min-width:1024px){#services .cards{grid-template-columns:repeat(3,1fr);}}
    .card{background:#1a1a1a;border-radius:1rem;padding:2rem;display:flex;flex-direction:column;gap:1rem;}
    .card h3{font-size:1.25rem;font-weight:700;line-height:1.3;}

    /* Tools */
    .tool{margin-bottom:1.5rem;}
    .tool-header{display:flex;justify-content:space-between;font-weight:600;margin-bottom:.5rem;align-items:center;}
    .tool-left{display:flex;align-items:center;gap:.5rem;}
    .tool-left img{width:24px;height:24px;}
    .bar-bg{width:100%;height:.75rem;background:#333;border-radius:9999px;overflow:hidden;}
    .elementor-progress-bar{background:linear-gradient(90deg,var(--brand-from),var(--brand-to));border-radius:9999px;transition:width 2s ease;}
    .elementor-progress-wrapper{background-color: #333 !important;}

    /* Testimonials */
    #testimonials{position:relative;overflow:hidden;}
    .testimonial-wrapper{display:flex;transition:transform .6s ease;}
    .testimonial{min-width:100%;padding:2rem;text-align:center;display:flex;flex-direction:column;gap:1rem;}
    .testimonial p{font-size:1.1rem;font-style:italic;}
    .testimonial img{width:64px;height:64px;border-radius:50%;margin:0 auto;object-fit:cover;}
    .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.3);
      border: none;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      outline: none;
      box-shadow: none;
      transition: background 0.3s ease !important;
    }
    
    .arrow svg {
      fill: var(--brand-from);
      width: 20px;
      height: 20px;
    }
    
    .arrow.prev {
      left: 1rem;
      z-index: 2;
    }
    
    .arrow.next {
      right: 1rem;
      z-index: 2;
    }
    
    .arrow:hover {
      background: linear-gradient(90deg, var(--brand-from), var(--brand-to));
    }
    
    .arrow:hover svg {
      fill: #111111;
    }
    
    .arrow:focus,
    .arrow:active {
      outline: none;
      box-shadow: none;
      background: rgba(0, 0, 0, 0.3);
    }

    /* CTA */
    #cta{display:block;align-items:center;text-align:center;gap:1rem;}
    #cta h2{font-size:2rem;font-weight:700;} @media(min-width:768px){#cta h2{font-size:2.5rem;}}

    /* Footer */
    footer{padding:2rem 1rem;text-align:center;font-size:.9rem;background:#0d0d0d;color:#777;}

    /* ========== FORM ========== */
    .form-box{
      max-width:720px;
      margin:0 auto;
      display:grid;
      gap:1.2rem;
    }
    @media(min-width:600px){
      .form-box{grid-template-columns:1fr 1fr;}
      .form-box .full{grid-column:span 2;}
    }
    .form-box label{display:flex;flex-direction:column;font-size:.9rem;gap:.4rem}
    .form-box input,
    .form-box select,
    .form-box textarea{
      width:100%;
      padding:.8rem 1rem;border-radius:.6rem;border:none;
      background:#1a1a1a;color:#fff
    }
    .form-box input:focus,
    .form-box select:focus,
    .form-box textarea:focus{
      outline:2px solid #24ACFF
    }
    .msg{font-size:.85rem;margin-top:.5rem}

    /* ========== POPUP ========== */
    .popup {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(6px);
      background: rgba(0, 0, 0, .4);
      z-index: 100;
    }
    .popup.hidden {
      display: none;
    }
    .popup-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #1a1a1a;
      padding: 2rem;
      border-radius: 1rem;
      max-width: 340px;
      text-align: center;
      box-shadow: 0 10px 20px rgba(0, 0, 0, .4);
    }
    .popup-card p {
      margin-bottom: 1.2rem;
    }
    #popup-msg {
      white-space: pre-line; /* respeta \n → <br> virtuales */
    }
    .popup-card .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      min-width: 180px;
      padding: .75rem 2.5rem;
    }

    /* ========== BOTÓN IA ========== */
    @property --glow-angle {
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: false;
    }
    #btn {
      appearance: none;
      -webkit-appearance: none;
      border: 2px solid transparent;
      outline: none;
      position: relative;
      isolation: isolate;
      font-weight: 600;
      border-radius: 9999px;
      cursor: pointer;
      color: #fff;
      background:
        linear-gradient(90deg, #111) padding-box,
        conic-gradient(from var(--glow-angle),
          #FFD760 0deg, #24ACFF 120deg, #625DFF 240deg, #FFD760 360deg)
        border-box;
      animation: halo-spin 3s linear infinite;
      filter: drop-shadow(0 0 4px rgba(255, 215, 96, .35))
              drop-shadow(0 0 6px rgba(98, 93, 255, .25));
    }
    @keyframes halo-spin {
      to { --glow-angle: 360deg; }
    }

    @media (max-width:600px){

      #cta.section{
        box-sizing:border-box;
        width:100vw;
        max-width:100vw;
        margin:0;
        padding:2rem 0.25rem;
      }

      #cta .form-box{
        max-width:100%;
        width:100%;
        margin:0;
        padding:2rem 1rem;
      }
    }

    /* contorno IA giratorio + glow */
    @property --ia-angle{
      syntax:"<angle>";
      initial-value:0deg;
      inherits:false;
    }

    .ia-halo{
      position:relative;
      display:inline-block;
    }

    /* ------------ 1) borde nítido ------------ */
    .ia-halo::after{
      content:attr(data-text);
      position:absolute; inset:-3px;
      z-index:1;
      pointer-events:none;

      background:conic-gradient(from var(--ia-angle),
                #FFD760 0deg,#24ACFF 120deg,#625DFF 240deg,#FFD760 360deg);
      animation:ia-spin 4s linear infinite;

      -webkit-background-clip:text;background-clip:text;
      color:#111;
      -webkit-text-stroke:4px transparent;

      /* muestra SOLO el trazo */
      -webkit-mask:linear-gradient(#000 0 0) text;
              mask:linear-gradient(#000 0 0) text;
      -webkit-mask-composite:xor;
              mask-composite:exclude;
    }

    /* ------------ 2) halo difuso (glow) ------------ */
    .ia-halo::before{
      content:attr(data-text);
      position:absolute; inset:0;
      pointer-events:none;
      z-index:0;                     

      background:conic-gradient(from var(--ia-angle),
                #FFD760 0deg,#24ACFF 120deg,#625DFF 240deg,#FFD760 360deg);
      animation:ia-spin 4s linear infinite;

      -webkit-background-clip:text;background-clip:text;
      color:transparent; -webkit-text-fill-color:transparent;

      transform:scale(1.02);
      filter:blur(10px);
      opacity:.6;
    } 

    @keyframes ia-spin{to{--ia-angle:360deg;}}/* End custom CSS */