/* ─────────────────────────────────────────────────────────────
   PROMOCIONES · mosaico de piezas de campaña · 31-ago-2026

   David: "rediseñala con lo que tenemos ahorita en face".

   Cambio de fondo: antes la sección leía una promo del Sheet y
   pintaba UNA tarjeta compuesta (foto + título + precio + botón),
   más la del NX600 mudada desde su propia sección. Producía cero
   leads y no se parecía a nada de lo que anunciamos.

   Ahora la sección son las piezas 4:5 que ya corren en Meta. Cada
   una trae horneados el producto, la marca, la oferta y su botón
   verde de WhatsApp: por eso el mosaico completo es el enlace y NO
   se le monta ningún botón HTML encima — habría dos botones, uno
   falso. El único texto que se agrega es un pie con marca y código,
   que es lo que la imagen no le puede dar ni a Google ni a un
   lector de pantalla.

   Los loops de 12 s se quedaron fuera a propósito: son 9:16 y aquí
   el mosaico es 4:5. Recortarlos se comería la línea de producto de
   arriba y la oferta de abajo. Para usarlos hay que re-renderizarlos
   en 4:5, no recortarlos.
   ───────────────────────────────────────────────────────────── */

/* Gana al `grid-template-columns:1fr 1fr!important` de index.html
   por especificidad (2 ids + 1 clase). */
#promos-section #promos-grid.promos-mosaico{
  display:grid!important;
  grid-template-columns:1fr!important;   /* móvil: una columna — la pieza
                                            se ve al mismo ancho que en el
                                            feed, que es para lo que se
                                            diseñó (~390 px). En dos
                                            columnas su letra de piso,
                                            34 px sobre 1080, cae a 5 px. */
  gap:18px!important;
  max-width:1180px!important;
  margin:0 auto!important;
}
@media(min-width:640px){
  #promos-section #promos-grid.promos-mosaico{grid-template-columns:1fr 1fr!important}
}
@media(min-width:1024px){
  #promos-section #promos-grid.promos-mosaico{grid-template-columns:repeat(3,1fr)!important;gap:20px!important}
}

.promo-pieza{
  display:block;
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;
  transition:transform .25s cubic-bezier(.23,1,.32,1),
             box-shadow .25s cubic-bezier(.23,1,.32,1),
             border-color .25s ease;
}
.promo-pieza:hover,
.promo-pieza:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(4,16,28,.42);
  border-color:rgba(94,234,212,.42);
}
.promo-pieza:focus-visible{outline:2px solid #5EEAD4;outline-offset:3px}
.promo-pieza:active{transform:translateY(-1px)}

/* La caja reserva el 4:5 exacto antes de que baje la imagen: sin esto
   el pie de página salta al cargar cada pieza. */
/* `display:block` es obligatorio, no cosmético: son <span> dentro del <a>,
   y en `inline` el navegador ignora aspect-ratio, alto y padding. Sin esto
   la caja no reserva el 4:5 y el pie de marca/código no se dibujaba. */
.promo-pieza__arte{
  display:block;
  position:relative;
  aspect-ratio:4/5;
  background:#0F2233;
  overflow:hidden;
}
.promo-pieza__arte img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.23,1,.32,1);
}
.promo-pieza:hover .promo-pieza__arte img{transform:scale(1.028)}

/* Marca y código: lo único que la imagen no comunica a un buscador
   ni a un lector de pantalla. Una sola línea — la oferta ya está
   dentro del arte y repetirla aquí la ensucia. */
.promo-pieza__pie{
  display:block;
  padding:12px 14px 13px;
  font-size:12.5px;
  line-height:1.35;
  color:#A9C8D8;
  letter-spacing:.01em;
  border-top:1px solid rgba(255,255,255,.08);
}
.promo-pieza__pie b{color:#fff;font-weight:600}
.promo-pieza__sku{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;letter-spacing:.05em;
  color:rgba(255,255,255,.42);
}

/* ── Páginas de familia · fondo CLARO ──────────────────────────
   La home es navy; /pruebas-rapidas y compañía son #F4F7FA. Las mismas
   piezas necesitan borde y pie oscuros o desaparecen sobre el gris.

   Estas zonas reemplazan al banner que llenaba `catalog.v5.js` desde el
   Sheet. Ese banner anunciaba "$1,950 tachado → $1,550, te ahorras $400",
   pero el precio de lista de IDEC-425 en product_catalog ES $1,550: el
   tachado lo calculaba el código sumando `valor` al precio promocional
   (catalog.v5.js:840), y salía en las seis páginas de familia. */
.promo-zona{max-width:1400px;margin:0 auto 26px;padding:0 24px}

/* El grid de la home está amarrado a sus ids (`#promos-section #promos-grid`),
   que aquí no existen: sin esta regla las piezas se apilan a ancho completo
   y la zona mide 4,778 px de alto. Mismos cortes que en la home. */
.promo-zona .promos-mosaico{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:640px){ .promo-zona .promos-mosaico{grid-template-columns:1fr 1fr} }
@media(min-width:1024px){ .promo-zona .promos-mosaico{grid-template-columns:repeat(3,1fr);gap:20px} }
.promo-zona__t{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#7A93A6;margin:0 0 12px;
}
.promo-zona .promo-pieza{
  background:#fff;
  border:1px solid rgba(20,56,79,.10);
  box-shadow:0 6px 20px rgba(15,41,64,.07);
}
.promo-zona .promo-pieza:hover,
.promo-zona .promo-pieza:focus-visible{
  box-shadow:0 16px 38px rgba(15,41,64,.16);
  border-color:rgba(20,56,79,.22);
}
.promo-zona .promo-pieza__pie{
  color:#5C7387;
  border-top:1px solid rgba(20,56,79,.08);
}
.promo-zona .promo-pieza__pie b{color:#14384F}
.promo-zona .promo-pieza__sku{color:rgba(20,56,79,.42)}

/* Una sola promo en la familia: la pieza ANCHA 1200×628. Un solo mosaico
   4:5 en una zona de 1400 px se ve perdido; la ancha llena el renglón y
   es el formato para el que se diseñó. */
.promo-ancha{
  /* A todo el ancho de la zona (1232 px) la pieza mide 645 px de alto y
     empuja el catálogo fuera de la primera pantalla. Acotada a 980 queda en
     ~513, la misma altura que los mosaicos 4:5 de la home. */
  max-width:980px;margin:0 auto;
  display:block;border-radius:18px;overflow:hidden;
  border:1px solid rgba(20,56,79,.10);
  box-shadow:0 6px 20px rgba(15,41,64,.07);
  transition:transform .25s cubic-bezier(.23,1,.32,1),
             box-shadow .25s cubic-bezier(.23,1,.32,1);
}
.promo-ancha img{width:100%;height:auto;display:block}
.promo-ancha:hover,.promo-ancha:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 16px 38px rgba(15,41,64,.16);
}
.promo-ancha:focus-visible{outline:2px solid #1976d2;outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .promo-ancha{transition:none}
  .promo-ancha:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .promo-pieza,
  .promo-pieza__arte img{transition:none}
  .promo-pieza:hover{transform:none}
  .promo-pieza:hover .promo-pieza__arte img{transform:none}
}