/* ============================================================
   PROMO BAGS — Catálogo (10 renders / 6 modelos) + Precios/Promo · Bloque B
   - Catálogo sobre crema #F4F1E8: los renders YA traen ese fondo, así que
     la bolsa se funde con la sección (mismo espíritu que la máscara del hero).
   - Jerarquía: Strong flagship grande; los otros 5 en grid con personalidad.
   - Anti-"grid frío": tag de uso propio, color de marca por modelo, swatches.
   - Precios: escalera visual (más pides, menos pagas) + promo 5,000 protagonista.
   ============================================================ */

/* ---------- cabecera de sección reutilizable ---------- */
.sec-head { max-width: 46ch; margin: 0 auto clamp(2rem, 1rem + 3vw, 3.4rem); text-align: center; }
.sec-head h2 { margin-top: .7rem; }
.sec-sub { margin-top: 1rem; font-size: var(--t-lead); color: var(--texto-tenue); }

/* eyebrow legible sobre CREMA (el verde de marca no contrasta en claro) */
.section--crema .eyebrow, .eyebrow--tinta { color: var(--verde-bosque); }
.section--crema .eyebrow i, .eyebrow--tinta i { background: var(--verde-marca); box-shadow: 0 0 10px rgba(125,192,93,.6); }
.section--crema .sec-sub { color: var(--tinta-tenue); }
/* acento editorial: en crema el verde-vibrante se pierde -> verde oscuro legible */
.section--crema .accent { color: #3f7d2e; }

/* ============================================================
   CATÁLOGO
   ============================================================ */
.catalogo__grid {
  display: grid; gap: clamp(1.1rem, .6rem + 1.6vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  margin-top: clamp(1.1rem, .6rem + 1.6vw, 2rem);
}

/* --- tarjeta base: crema + sombra (se separa de la sección sin recuadro frío) --- */
.card {
  display: flex; flex-direction: column;
  background: #F7F5EE;                    /* un pelín más clara que la sección: lift sutil */
  border: 1px solid var(--linea-crema);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 30px rgba(35,48,43,.08);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(35,48,43,.14); }

/* media: el render se funde (su fondo crema ≈ el de la card). Halo sutil detrás. */
.card__media {
  position: relative; aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 50% 42%, rgba(125,192,93,.14), transparent 62%),
    #F7F5EE;
}
.card__media img { width: 100%; height: 100%; object-fit: contain; }

/* swatches de color (usan los renders extra: Strong, Jumbo, Regalo) */
.card__swatches {
  position: absolute; left: .8rem; bottom: .8rem; display: flex; gap: .4rem; z-index: 2;
}
.swatch {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(35,48,43,.25);
  transition: transform .2s var(--ease), outline-color .2s var(--ease);
  outline: 2px solid transparent; outline-offset: 2px;
}
.swatch:hover { transform: scale(1.12); }
.swatch[aria-pressed="true"] { outline-color: var(--verde-bosque); }

/* cuerpo de la card */
.card__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.15rem 1.25rem 1.25rem; flex: 1; }
.card__top { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.card__top h3 { color: var(--tinta); font-size: var(--t-h3); }
.card__tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--verde-bosque); background: rgba(125,192,93,.16);
  padding: .22rem .55rem; border-radius: var(--r-pill); white-space: nowrap;
}
.card__use { color: var(--tinta-tenue); font-size: .96rem; }
.card__specs { list-style: none; padding: 0; margin: .15rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.card__specs li { position: relative; font-size: .84rem; color: var(--tinta-tenue); padding-left: 1.1rem; }
.card__specs li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 2px;
  background: var(--verde-marca);
}
.card__foot {
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--linea-crema);
  display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
}
.price { display: flex; flex-direction: column; line-height: 1.05; }
.price__from { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-tenue); }
.price b { font-family: var(--font-display); font-size: 1.5rem; color: var(--tinta); font-weight: 800; }
.price__unit { font-size: .72rem; color: var(--tinta-tenue); }
/* CTA sobre crema: el verde-vibrante ok pero el texto verde-bosque ya contrasta */
.card .cta--sm { box-shadow: 0 6px 18px rgba(125,192,93,.25); }

/* --- FLAGSHIP: Strong grande, media al lado del texto en desktop --- */
.card--flagship {
  grid-column: 1 / -1;              /* no usado (va fuera del grid) */
  flex-direction: row; align-items: stretch;
  background: #F7F5EE;
  margin-bottom: clamp(1.1rem, .6rem + 1.6vw, 2rem);
}
.card--flagship .card__media { flex: 0 0 46%; aspect-ratio: auto; min-height: 340px; }
.card--flagship .card__body { justify-content: center; padding: clamp(1.4rem, 1rem + 2vw, 2.6rem); gap: .8rem; }
.card--flagship .card__top h3 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); }
.flagship__ribbon {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--crema); background: var(--verde-bosque);
  padding: .3rem .7rem; border-radius: var(--r-pill);
}
.card--flagship .card__use { font-size: var(--t-body); max-width: 42ch; }
.card--flagship .price b { font-size: 1.9rem; }

@media (max-width: 720px) {
  .card--flagship { flex-direction: column; }
  .card--flagship .card__media { flex: none; aspect-ratio: 1 / 1; min-height: 0; }
}

/* ============================================================
   PRECIOS / PROMO (sobre carbón profundo, contraste tras la crema)
   ============================================================ */
.precios .sec-head { max-width: 52ch; }

/* --- ESCALERA visual: más piezas -> barra más baja -> menos pagas --- */
.escalera {
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(.4rem, .2rem + 1.5vw, 1.4rem);
  max-width: 760px; margin: 0 auto; padding: 1.2rem 0 .4rem;
}
.rung { flex: 1 1 0; max-width: 130px; display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.rung__track {
  width: 100%; height: clamp(150px, 32vw, 200px);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
.rung__bar {
  width: 100%; min-height: 22px; border-radius: var(--r-sm) var(--r-sm) 5px 5px;
  background: linear-gradient(180deg, rgba(110,176,200,.5), rgba(110,176,200,.13));
  border: 1px solid var(--panel-borde); border-bottom: 0;
}
.rung__price { font-family: var(--font-display); font-weight: 800; font-size: clamp(.9rem, .7rem + .7vw, 1.15rem); color: var(--texto); }
.rung__qty { font-size: .74rem; color: var(--texto-suave); font-weight: 600; text-align: center; }
/* peldaño ESTRELLA (5,000) */
.rung--star .rung__bar {
  background: linear-gradient(180deg, var(--verde-vibrante), rgba(162,237,85,.32));
  box-shadow: var(--glow-verde); border-color: transparent;
}
.rung--star .rung__price { color: var(--verde-vibrante); }
.rung--star .rung__qty { color: var(--verde-vibrante); }
.rung__flag {
  font-size: .6rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  color: var(--verde-bosque); background: var(--verde-vibrante);
  padding: .12rem .4rem; border-radius: var(--r-pill); margin-bottom: .35rem; white-space: nowrap;
}
.escalera__cap { text-align: center; color: var(--texto-suave); font-size: .85rem; margin: .8rem auto 0; max-width: 56ch; }

/* --- PROMO ESTRELLA 5,000 (protagonista) --- */
.promo-estrella {
  position: relative; margin-top: clamp(2rem, 1rem + 3vw, 3.2rem);
  border: 1px solid rgba(162,237,85,.3); border-radius: var(--r-xl);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(162,237,85,.14), transparent 55%),
    var(--panel);
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.8rem);
  overflow: hidden;
}
.promo__badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--verde-bosque); background: var(--verde-vibrante);
  padding: .3rem .75rem; border-radius: var(--r-pill);
}
.promo-estrella h3 { margin-top: 1rem; font-size: var(--t-h2); max-width: 20ch; }
.promo__perks { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .7rem; }
.promo__perks li { display: flex; align-items: flex-start; gap: .6rem; font-weight: 600; color: var(--texto); }
.promo__perks svg { width: 1.25em; height: 1.25em; color: var(--verde-vibrante); flex: none; margin-top: .12em; }
.promo__more { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.promo__more span { font-size: .82rem; color: var(--texto-suave); display: inline-flex; align-items: center; gap: .35rem; }
.promo__more b { color: var(--texto-tenue); font-weight: 700; }
.promo-estrella .cta { margin-top: 1.8rem; }

/* --- P2-2.9: cluster de promo (2 tarjetas laterales + estrella al centro) --- */
.sec-head--light h2, .sec-head--light .eyebrow { color: var(--crema, #F4F1E8); }
.promo-cluster {
  display: grid; gap: clamp(1rem, .6rem + 1.6vw, 1.6rem);
  grid-template-columns: 1fr; align-items: stretch;
  margin-top: clamp(1.6rem, 1rem + 2vw, 2.4rem);
}
@media (min-width: 900px) {
  .promo-cluster { grid-template-columns: .72fr 1.56fr .72fr; align-items: center; }
}
.promo-cluster .promo-estrella { margin-top: 0; height: 100%; }
.promo-side {
  border: 1px solid rgba(162,237,85,.18); border-radius: var(--r-xl);
  background: rgba(255,255,255,.04);
  padding: clamp(1.2rem, .9rem + 1.4vw, 1.7rem);
  display: flex; flex-direction: column; gap: .55rem; justify-content: center;
}
.promo-side__k {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); color: var(--verde-vibrante);
  line-height: 1;
}
.promo-side p { color: var(--texto-suave); font-size: .92rem; line-height: 1.5; margin: 0; }
.promo-side b { color: var(--crema, #F4F1E8); font-weight: 700; }

/* --- P2-2.7: enlace "ver más" (nav interno, distinto del CTA de WhatsApp) --- */
.link-more {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  color: var(--verde-bosque); text-decoration: none; min-height: 44px;
  padding: .5rem .2rem; border-bottom: 2px solid transparent;
  transition: gap .2s var(--ease), border-color .2s var(--ease);
}
.link-more svg { width: 1.1em; height: 1.1em; }
.link-more:hover { gap: .8rem; border-color: var(--verde-bosque); }

/* --- nota de honestidad + empuje al bot --- */
.precios__nota {
  margin-top: clamp(1.8rem, 1rem + 2vw, 2.6rem); text-align: center;
  max-width: 60ch; margin-inline: auto; color: var(--texto-tenue);
}
.precios__nota b { color: var(--texto); }
.precios__nota .cta { margin-top: 1.3rem; }

/* ---------- responsive escalera 390px ---------- */
@media (max-width: 520px) {
  .escalera { gap: .35rem; padding-top: .6rem; }
  .rung__bar { min-height: 44px; padding-top: .35rem; }
  .rung__price { font-size: .82rem; }
  .rung__qty { font-size: .66rem; }
  .rung__flag { font-size: .54rem; padding: .1rem .3rem; }
  .promo-estrella h3 { font-size: 1.7rem; }
}