/* ==========================================================
   PROMO · 2x1 el primer mes
   ========================================================== */

.promo { background: linear-gradient(120deg, #1a0408, var(--color-bg)); overflow: hidden; }
.promo:before {
  content: "";
  position: absolute;
  right: -10%;
  top: 0;
  width: 55%;
  height: 100%;
  background: var(--color-accent);
  opacity: .14;
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
}
.promo h2 { transform: none; font-size: clamp(2rem, 5vw, 3.4rem); margin: 0; }
.promo .promo-grid { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }

.promo-big {
  font: 400 clamp(7rem, 24vw, 16rem)/.85 var(--font-title);
  color: var(--color-cream);
  transform: skewX(-8deg);
  text-shadow: 6px 6px 0 var(--color-accent);
}
.promo-text { margin-top: 1rem; font-size: 1.05rem; color: var(--color-cream); }
.promo-note { margin-top: 1.2rem; font-size: .85rem; }

.promo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.2rem 0 1.8rem; }
.promo-chips span {
  border: 1px solid var(--color-silver);
  padding: .25em .9em;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-cream);
}

/* Móvil: una sola columna y la foto intercalada entre el texto y los chips.
   .promo-copy pasa a display:contents para que sus hijos se ordenen junto a la foto:
   kicker · 2x1 · título · línea → FOTO → chips · botón · condiciones */
@media (max-width: 900px) {
  .promo .promo-grid { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  .promo-copy { display: contents; }
  .promo-copy > * { order: 1; }
  .promo-photo {
    order: 2;
    align-self: center;
    width: 100%;
    max-width: 420px;
    margin: 1.6rem auto 0;
    padding: 0 20px 20px 8px; /* deja lugar a la rotación y a la sombra roja del marco */
  }
  .promo-copy > .promo-chips, .promo-copy > .btn, .promo-copy > .promo-note { order: 3; }
}