@layer base {
      html, body {
        font-family: 'Nunito Sans', sans-serif;
        color: #1A1A1A;
        background-color: #FCFDFB;
        overflow-x: hidden;
      }
    }
    ::-webkit-scrollbar {
      width: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #F5F7F2;
    }
    ::-webkit-scrollbar-thumb {
      background: #8CC63F;
      border-radius: 4px;
    }

    /* Carrusel Hero */
    .carousel-track {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .carousel-slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transform: scale(1.05);
      transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
    }
    .carousel-slide.active {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
    }
    .carousel-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .carousel-dot {
      width: 8px;
      height: 8px;
      border-radius: 9999px;
      background-color: rgba(255, 255, 255, 0.5);
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      padding: 0;
    }
    .carousel-dot.active {
      width: 28px;
      background-color: #FFFFFF;
      box-shadow: 0 0 0 2px rgba(140, 198, 63, 0.6);
    }
    @media (max-width: 640px) {
      .carousel-btn {
        width: 36px !important;
        height: 36px !important;
      }
      .carousel-dots {
        bottom: 20px !important;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .carousel-slide {
        transition: none;
        transform: none;
      }
    }

    /* ===== SV-DEVS.COM — FOOTER BAR (full-width, low-profile) ===== */
    .svdevs-bar {
      width: 100%;
      background: linear-gradient(90deg, #0f172a 0%, #1e1b4b 35%, #2E1B73 55%, #6D28D9 75%, #06B6D4 100%);
      position: relative;
      overflow: hidden;
      isolation: isolate;
      border-top: 1px solid rgba(255,255,255,0.08);
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    /* Shine animado de izquierda a derecha */
    .svdevs-bar::before {
      content: "";
      position: absolute;
      top: 0;
      left: -75%;
      width: 45%;
      height: 100%;
      background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 45%, rgba(6,182,212,0.22) 55%, transparent 100%);
      transform: skewX(-22deg);
      animation: svdevs-bar-shine 4.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
      pointer-events: none;
      z-index: -1;
    }
    /* Grilla sutil de puntos tech (opcional, muy baja opacidad) */
    .svdevs-bar::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 36px 36px;
      mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
      pointer-events: none;
      z-index: -1;
    }
    @keyframes svdevs-bar-shine {
      0%   { left: -75%; }
      60%  { left: 130%; }
      100% { left: 130%; }
    }
    .svdevs-bar:hover::before { animation-duration: 1.6s; }
    .svdevs-bar:hover {
      background: linear-gradient(90deg, #0f172a 0%, #221c57 30%, #3a2391 55%, #7c3aed 75%, #22d3ee 100%);
    }
    .svdevs-bar:hover .svdevs-bar-pill {
      box-shadow: 0 0 0 1px rgba(255,255,255,0.25),
                  0 8px 24px -8px rgba(6, 182, 212, 0.45);
      transform: translateX(0);
    }
    .svdevs-bar:hover .svdevs-bar-arrow {
      transform: translateX(3px);
      color: #06B6D4;
    }
    .svdevs-bar:hover .svdevs-bar-dot {
      transform: scale(1.4);
      box-shadow: 0 0 0 5px rgba(140,198,63,0.18);
    }
    @media (prefers-reduced-motion: reduce) {
      .svdevs-bar::before { animation: none; }
      .svdevs-bar:hover, .svdevs-bar:hover .svdevs-bar-pill { transition: none; }
    }