html { scroll-behavior: smooth; }
    body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
    .glass { background: rgba(255,255,255,.7); backdrop-filter: blur(10px); }
    .container-xl { max-width: 1200px; }
    /* Animaciones topbar y enlaces */
    .topbar a.link-anim{position:relative;transition:color .2s ease;}
    .topbar a.link-anim::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:currentColor;transition:width .2s ease;}
    .topbar a.link-anim:hover::after{width:100%;}
    /* Clientes (logos) */
    .client-logo {
    filter: grayscale(100%);
    opacity: .5;
    transition: opacity .2s ease, filter .2s ease, transform .2s ease;
    height: 60px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
  }
  /* Ajuste fino de tamaño para algunos logos */
  .client-logo[alt="GEFCO"],
  .client-logo[alt="Diputación de Zamora"],
  .client-logo[alt="Ayuntamiento de Cieza"],
  .client-logo[alt="Transpacar"] {
    height: 60px;
    max-width: 220px;
  }

.client-logo:hover { filter: grayscale(0%); opacity: .9; transform: scale(1.02); }
    
    /* Checkbox estilo IMS (morado) */
    .ims-checkbox {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 4px;
      border: 1px solid #0ea5e9;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background-color: #ffffff;
      box-shadow: 0 0 0 1px rgba(14,165,233,0.2);
      transition: background-color .15s ease, box-shadow .15s ease, transform .08s ease;
    }
    .ims-checkbox:checked {
      background-color: #0ea5e9;
      box-shadow: 0 0 0 1px rgba(14,165,233,0.35);
    }
    .ims-checkbox:focus-visible {
      outline: 2px solid rgba(14,165,233,0.7);
      outline-offset: 2px;
    }
    .ims-checkbox::before {
      content: "";
      width: 10px;
      height: 10px;
      display: block;
      clip-path: polygon(14% 53%, 0 66%, 38% 100%, 100% 24%, 87% 10%, 38% 73%);
      background: #ffffff;
      opacity: 0;
      transform: scale(.8);
      transition: opacity .15s ease, transform .15s ease;
    }
    .ims-checkbox:checked::before {
      opacity: 1;
      transform: scale(1);
    }
    .client-track { scroll-behavior: smooth; }
    /* Logos integraciones API */
    #integraciones .api-logo {
      max-height: 420px;
      width: 100%;
      height: auto;
      object-fit: contain;
    }
    #integraciones-panel {
      min-height: 360px;
    }

  
    /* Estilos específicos del banner de Navidad compacto */
.xmas-title {
      font-family: "Great Vibes", system-ui, -apple-system, "Segoe UI", cursive;
    }

    /* Brillo suave del banner */
    @keyframes glowPulse {
      0%, 100% { box-shadow: 0 12px 28px rgba(59,130,246,0.25); }
      50% { box-shadow: 0 16px 40px rgba(59,130,246,0.45); }
    }
    .banner-glow {
      animation: glowPulse 6s ease-in-out infinite;
    }

    /* Efecto de brillo en el texto Feliz Navidad */
    @keyframes shineText {
      0% { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }
    .xmas-gradient-text {
      background: linear-gradient(120deg, #0369a1, #0ea5e9, #38bdf8, #0ea5e9, #0369a1);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: shineText 10s ease-in-out infinite;
    }

    /* Luces del árbol */
    @keyframes lightBlinkSoft {
      0%, 100% { opacity: 0.2; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.12); }
    }
    .xmas-light {
      animation-name: lightBlinkSoft;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
    }
    .xmas-light-fast {
      animation-duration: 1.3s;
    }
    .xmas-light-medium {
      animation-duration: 1.9s;
    }
    .xmas-light-slow {
      animation-duration: 2.6s;
    }

    /* Flotado suave del árbol */
    @keyframes treeFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    .tree-float {
      animation: treeFloat 4.5s ease-in-out infinite;
    }

    /* Estrellas brillando alrededor del árbol (muchas y de colores) */
    @keyframes starTwinkle {
      0%, 100% { opacity: 0.3; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.25); }
    }
    .star {
      position: absolute;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
      animation-name: starTwinkle;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      z-index: 25;
    }
    .star.slow { animation-duration: 3.2s; }
    .star.medium { animation-duration: 2.1s; }
    .star.fast { animation-duration: 1.4s; }