/* ══════════════════════════════════════════════════════════════════
   BANDA DE OFERTAS
   ──────────────────────────────────────────────────────────────────
   Tres cards en una sola fila: foto · cartel · foto. Forman un único
   bloque: mismo alto, separación chica, sin aire entre ellas.

   La del medio es el cartel de color sólido (no es imagen, es texto
   sobre un color, y por eso no se toca). Las de los costados son
   configurables desde el panel: foto, velo, textos y enlace.

   La foto de las laterales va con object-fit:contain: entra entera y se
   achica hasta llenar el lado que sobra. Casi siempre hay que achicarla,
   porque la card es ancha y las fotos que se suben son más altas. Lo que
   queda alrededor es el color de la card, no un recorte, y así se ve la
   foto completa. object-position sigue diciendo dónde se apoya.

   La altura sale de una sola regla (--of-h) para que las tres midan
   exactamente lo mismo sin importar cuánto texto lleve cada una.
   ══════════════════════════════════════════════════════════════════ */

/* La banda no se apoya en el aire de la sección de arriba: se lleva una
   parte chica y se la deja al resto. Ver .section + .section y
   .section--pegado en style.css.

   El reparto importa. Con todo el aire de un solo lado, el título queda
   pegado al borde del bloque de color y la transición se lee como un
   corte. Repartido, hay un respiro antes y después del cambio de
   fondo. Los dos juntos dan 60 a 80px, que es lo que pidió. */
.section-ofertas{
  padding-top:clamp(1.5rem,2.5vw,2.25rem);
  padding-bottom:clamp(3rem,5.5vw,4.75rem);
}

/* ── El encabezado ──────────────────────────────────────────────
   Va compacto a propósito. El título de sección del resto de la
   portada mide hasta 4rem y solo: con la banda abajo llenaba casi
   media pantalla de aire y empujaba las tres cards fuera de vista.
   Acá baja a escala de subtítulo, que es lo que le corresponde: no
   es el arranque de una sección nueva, es el rótulo de un bloque que
   ya se está leyendo. */
.section-ofertas .section-header-row{
  margin-bottom:clamp(1.25rem,2.2vw,1.9rem);
  align-items:center;
}
.section-ofertas .section-label{margin-bottom:.6rem}
.section-ofertas .section-title{
  font-size:clamp(1.375rem,2.4vw,1.875rem);
  line-height:1.1;
  letter-spacing:-.02em;
  max-width:30ch;
}

.ofertas-band{
  --of-gap:clamp(.75rem,1.1vw,.9375rem);   /* 12 a 15px */
  --of-h:clamp(15rem,25vw,20rem);           /* alto único de las tres */

  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:var(--of-gap);
  align-items:stretch;
}
/* La grilla tiene una columna por cada panel que se dibujó. Es una
   cuenta explícita y no un "si son menos de tres, dos columnas": con
   una sola tarjeta, dos columnas la dejarían mirando a la nada en la
   mitad izquierda de la fila. */
.ofertas-band--n1{grid-template-columns:1fr}
.ofertas-band--n2{grid-template-columns:1fr 1fr}

/* ── Las laterales ─────────────────────────────────────────────── */
.ofertas-card{
  position:relative;display:block;overflow:hidden;
  /* height y no min-height: la banda es una maqueta de proporción fija.
     Con min-height, un texto largo del panel estiraba la tarjeta y la
     fila entera; medido, la banda pasaba de 251px a 608px. La alto se
     decide una vez, acá, y de ahí no se sale. Lo que no entra, se
     recorta (más abajo, con -webkit-line-clamp). */
  height:var(--of-h);
  background:var(--ink);color:#fff;
  border-radius:var(--r-lg);
  text-decoration:none;
  isolation:isolate;
}

/* La foto y el velo van como capas de fondo: así el texto nunca queda
   debajo de la imagen y el velo nunca tapa el texto. */
.ofertas-card-media{position:absolute;inset:0;z-index:0;display:block;overflow:hidden}
.ofertas-card-media img{
  width:100%;height:100%;display:block;
  object-fit:contain;
  object-position:center;      /* replaced inline */
  transition:transform 1.1s var(--ease-out);
}
.ofertas-card-velo{position:absolute;inset:0;z-index:1;display:block;pointer-events:none}

/* El texto se apoya abajo, como un pie de foto. Arriba queda la
   imagen, que es lo que vende. */
.ofertas-card-body{
  position:relative;z-index:2;display:block;
  height:100%;min-height:0;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  gap:.55rem;
  padding:clamp(1.15rem,2.1vw,1.85rem);
  /* Si el texto no entra, se esconde en vez de empujar la tarjeta.
     min-height:0 en un flex es lo que permite que el bloque se encoja
     dentro de la altura fija en vez de desbordarla. */
  overflow:hidden;
}

/* Los textos de la card se acotan en cantidad de renglones.

   Es lo que hace que un texto largo del panel no rompa la maqueta: en
   vez de empujar la tarjeta, se corta con puntos suspensivos y el alto
   de la banda sigue siendo el de siempre. Cada campo tiene un tope
   porque si el dueño escribe una línea gigante y las otras son
   normales, el que se lleva el recorte es el que más crece.

   -webkit-line-clamp es la forma estándar; display:-webkit-box la
   necesita para funcionar. */
.ofertas-card-kicker{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;
  overflow:hidden;
  font-size:.625rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
/* El badge va en un solo renglón, siempre: es el número grande de la
   promoción ("-30%", "9 cuotas"). Si el dueño escribe algo largo se
   corta con puntos suspensivos, en vez de partirse en dos renglones
   que comerían media tarjeta, o de salirse del borde. */
.ofertas-card-badge{
  display:block;
  max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--ff-serif);font-weight:300;
  font-size:clamp(2rem,4.4vw,3.25rem);
  line-height:.94;letter-spacing:-.035em;
  color:#fff;
}
.ofertas-card-title{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
  font-family:var(--ff-serif);font-weight:400;
  font-size:clamp(1.05rem,1.75vw,1.5rem);
  line-height:1.14;letter-spacing:-.015em;
  color:#fff;max-width:18ch;
}
.ofertas-card-sub{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
  font-size:.8125rem;font-weight:400;line-height:1.5;
  color:rgba(255,255,255,.82);max-width:30ch;
}
.ofertas-card-extra{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;
  overflow:hidden;
  font-size:.6875rem;letter-spacing:.04em;
  color:rgba(255,255,255,.58);
}
.ofertas-card-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:.35rem;
  padding-bottom:.2rem;
  border-bottom:1px solid rgba(255,255,255,.42);
  font-size:.75rem;font-weight:500;letter-spacing:.03em;
  color:#fff;
  transition:border-color 300ms var(--ease);
}

/* Sin animación de imagen al hover: la foto se queda quieta. */
a.ofertas-card:hover .ofertas-card-media img{transform:none}
a.ofertas-card:hover .ofertas-card-cta{border-color:#fff}
a.ofertas-card:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ── El cartel central ────────────────────────────────────────────
   Sin foto y sin cambios: un color sólido con el número grande. Lo que
   había antes sigue siendo exactamente esto.                            */
.ofertas-flyer{
  position:relative;overflow:hidden;
  /* La misma altura fija que las laterales, por el mismo motivo: el
     cartel tiene que seguir midiendo lo que miden ellas. El texto que
     no entra se recorta en vez de estirar la fila. */
  height:var(--of-h);
  background:var(--ink);color:#fff;
  border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.6vw,2.4rem) clamp(1.15rem,2.2vw,2.1rem);
  display:flex;flex-direction:column;justify-content:flex-start;
}
/* Sin degradado ni brillo por encima: el cartel es un color plano con
   texto, y es lo que se pidió que se mantuviera igual. */

/* El título del cartel sale del panel (offers_title), así que también
   se acota: si el dueño escribe un párrafo, no tiene que comerse la
   fila. */
.ofertas-flyer-title{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;
}
.ofertas-flyer-eyebrow{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;
  overflow:hidden;
  flex-shrink:0;
}

.ofertas-flyer-eyebrow{
  display:block;
  font-size:.6875rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  margin-bottom:.9rem;
}
.ofertas-flyer-num{
  display:block;
  flex-shrink:0;
  font-family:var(--ff-serif);font-weight:300;
  font-size:clamp(2.75rem,6vw,4.75rem);
  line-height:.86;letter-spacing:-.04em;
  margin-bottom:.5rem;
}
.ofertas-flyer-num i{font-style:normal;font-size:.42em;vertical-align:super;letter-spacing:0}

.ofertas-flyer-title{
  font-family:var(--ff-serif);font-weight:300;
  font-size:clamp(1.05rem,1.9vw,1.5rem);
  line-height:1.12;letter-spacing:-.02em;
  color:#fff;margin:0 0 1.1rem;max-width:16ch;
}
.ofertas-flyer-cta{
  position:relative;z-index:2;align-self:flex-start;margin-top:auto;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.68rem 1.2rem;
  border:1px solid rgba(255,255,255,.28);
  border-radius:100px;
  font-size:.8125rem;font-weight:500;letter-spacing:.02em;
  color:#fff;background:transparent;text-decoration:none;
  transition:background 300ms var(--ease),border-color 300ms var(--ease),color 300ms var(--ease);
}
.ofertas-flyer-cta::after{content:'→';font-size:1rem;line-height:1;transition:transform 300ms var(--ease-out)}
.ofertas-flyer-cta:hover{background:#fff;border-color:#fff;color:var(--ink)}
.ofertas-flyer-cta:hover::after{transform:translateX(3px)}

/* ── Tamaños ──────────────────────────────────────────────────── */
@media(max-width:1000px){
  /* Con dos columnas la del medio deja de ser "la central": se pasa a
     una sola columna y el orden se decide en el HTML. */
  .ofertas-band,
  .ofertas-band--n1,
  .ofertas-band--n2{grid-template-columns:1fr;gap:clamp(.7rem,2vw,.9rem)}
  /* Una sola columna y tres tarjetas de 250px cada una son un scroll
     larguísimo. En vertical la banda se lee mejor con tarjetas bajas:
     se sigue viendo la foto y entra el texto.

     El piso de 13.75rem no es un número arbitrario: es lo que necesita
     el cartel central para que entre su texto (etiqueta, número, título
     y botón) sin recortarse. Si el piso fuera menor, las tarjetas con
     foto quedarían más bajas que el cartel y la banda dejaría de medir
     igual en las tres, que es justo lo que se pidió. */
  .ofertas-band{--of-h:clamp(13.75rem,30vw,15rem)}
}
@media(max-width:560px){
  .ofertas-card-body{padding:1.1rem 1.15rem;gap:.45rem}
  .ofertas-card-sub{font-size:.78125rem}
  .ofertas-flyer{padding:1.25rem 1.15rem}
}