/* ====== TOKENS / ÁREA AISLADA ====== */
        #promos-sec {
          --ink: var(--clr-ink);
          --muted: var(--clr-muted);
          --accent: var(--clr-accent);
          --panel: var(--clr-panel);
          --soft: var(--clr-soft);
          --ring: var(--clr-ring);
          --borderGrad: linear-gradient(135deg, var(--clr-accent), rgba(77, 163, 255, .2));
          --shadow: var(--shadow-lg);
          --radius: var(--radius);
          --radius-lg: var(--radius-lg);

          font-family: var(--font-main);
          color: var(--ink);
          background: linear-gradient(180deg, var(--clr-soft), var(--clr-accent-light));
          padding: clamp(28px, 5vw, 72px) clamp(16px, 4vw, 24px);
        }

        /* ====== GRID ====== */
        #promos-sec .promo-grid {
          max-width: 1200px;
          margin: 0 auto;
          display: grid;
          grid-template-columns: 1.05fr 1fr;
          gap: clamp(24px, 4vw, 40px);
          align-items: start;
        }

        #promos-sec .promo-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          /* 2 columnas */
          grid-template-areas: "copy media";
          /* izquierda copy, derecha media */
          gap: clamp(24px, 4vw, 40px);
          align-items: start;
        }

        #promos-sec .promo-copy {
          grid-area: copy;
        }

        #promos-sec .promo-media {
          grid-area: media;
        }


        @media (max-width: 980px) {
          #promos-sec .promo-grid {
            grid-template-columns: 1fr;
          }
        }

        /* ====== MEDIA (izquierda) ====== */
        #promos-sec .promo-media {
          margin: 0;
          position: relative;
        }

        #promos-sec .media-caption {
          margin-top: 12px;
          color: var(--muted);
          font-size: 14px;
        }

        @keyframes blobFloat {
          from {
            transform: translateY(0) rotate(6deg) scale(1);
          }

          to {
            transform: translateY(-14px) rotate(10deg) scale(1.03);
          }
        }

        #promos-sec .frame {
          position: relative;
          z-index: 1;
          overflow: hidden;
        }

        #promos-sec .media-img {
          display: block;
          width: 100%;
          height: auto;
          border-radius: calc(var(--radius-lg) - 6px);
          object-fit: cover;
          transform: translateZ(0);
        }

        /* Badges flotantes */

        /* ====== COPY (derecha) ====== */
        #promos-sec .title-wrap {
          margin-bottom: clamp(8px, 1.6vw, 12px);
        }

        #promos-sec .title {
          margin: 0 0 6px 0;
          font-weight: 900;
          line-height: 1.04;
          font-size: clamp(28px, 4.6vw, 44px);
          letter-spacing: -0.5px;
        }

        #promos-sec .title-accent {
          background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-dark) 70%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }


        #promos-sec .kicker {
          margin: 0;
          color: var(--muted);
          font-weight: 600;
          font-size: clamp(13px, 1.6vw, 14px);
        }

        /* ====== CARD glass con borde degradado ====== */
        #promos-sec .card {
          position: relative;
          border: 1.5px solid transparent;
          border-radius: var(--radius);
          padding: clamp(18px, 2.6vw, 26px);
          box-shadow: var(--shadow);
          overflow: hidden;
        }

        #promos-sec .card-glow {
          content: "";
          position: absolute;
          inset: -30% -10% auto -10%;
          height: 120px;
          background: radial-gradient(60% 100% at 20% 50%, rgba(247, 181, 0, .22), transparent 70%);
          pointer-events: none;
        }

        /* ====== BLOQUES ====== */
        #promos-sec .block {
          margin-bottom: clamp(12px, 2.2vw, 18px);
        }

        #promos-sec .block-title {
          margin: 0 0 6px 0;
          font-size: clamp(16px, 2.4vw, 20px);
          font-weight: 800;
        }

        /* Lista con iconos */
        #promos-sec .list {
          list-style: none;
          margin: 0;
          padding: 0;
        }

        #promos-sec .list-item {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 10px 12px;
          border: 1px dashed var(--ring);
          border-radius: 12px;
          background: #fff;
          transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
          will-change: transform;
        }

        #promos-sec .list-item+.list-item {
          margin-top: 10px;
        }

        #promos-sec .list-item:hover {
          transform: translateY(-2px);
          border-color: rgba(247, 181, 0, .6);
          box-shadow: 0 10px 20px rgba(15, 26, 42, .06);
        }

        #promos-sec .icon {
          width: 18px;
          height: 18px;
          display: inline-grid;
          place-items: center;
          flex: 0 0 18px;
          color: #0fbf5f;
        }

        #promos-sec .icon svg {
          width: 100%;
          height: 100%;
          fill: currentColor;
        }

        /* Chips (filtros) */
        #promos-sec .chips {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          margin: 6px 0 0 0;
          padding: 0;
          list-style: none;
        }

        #promos-sec .chip {
          padding: 8px 12px;
          font-size: 14px;
          font-weight: 700;
          color: #111;
          background: linear-gradient(#fff, #fff) padding-box, var(--borderGrad) border-box;
          border: 1px solid transparent;
          border-radius: 999px;
          box-shadow: 0 6px 14px rgba(15, 26, 42, .06);
          transition: transform .2s ease, box-shadow .2s ease;
        }

        #promos-sec .chip:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 20px rgba(15, 26, 42, .1);
        }

        /* ====== REVEAL on-scroll ====== */
        #promos-sec .reveal {
          opacity: 0;
          transform: translateY(12px);
        }

        #promos-sec .reveal.is-in {
          opacity: 1;
          transform: none;
          transition: all .6s cubic-bezier(.2, .75, .2, 1) .05s;
        }

        #promos-sec .reveal.is-in:nth-child(2) {
          transition-delay: .12s;
        }

        #promos-sec .reveal.is-in:nth-child(3) {
          transition-delay: .18s;
        }

        /* ====== ACCESIBILIDAD ====== */
        @media (prefers-reduced-motion: reduce) {
          #promos-sec * {
            animation: none !important;
            transition: none !important;
          }
        }

        /* ====== Mobile responsiveness (añadir al final) ====== */
@media (max-width: 980px) {
  #promos-sec .promo-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "copy";
    align-items: stretch;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  #promos-sec {
    padding: 24px 14px;
  }

  #promos-sec .title-wrap { margin-bottom: 8px; }
  #promos-sec .title { line-height: 1.1; }

  #promos-sec .card {
    padding: 16px;
    border-radius: 14px;
    box-shadow: 0 8px 16px rgba(15,26,42,.06);
  }

  #promos-sec .list-item {
    padding: 10px 12px;
    border-radius: 10px;
  }

  /* Evita “saltos” por hover en pantallas táctiles */
  @media (pointer: coarse) {
    #promos-sec .list-item:hover { transform: none; box-shadow: none; }
  }

  /* Imagen siempre al 100% y sin desbordes */
  #promos-sec .promo-media { margin: 0; }
  #promos-sec .frame { border-radius: var(--radius-lg); overflow: hidden; }
  #promos-sec .media-img { width: 100%; height: auto; display: block; }
}
@media (max-width: 980px) {
  #promos-sec .promo-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "media";
  }
}