/* Página de descuentos (tema "pagina-de-descuentos"). Rejilla de 12 columnas
   con filas de 10 px: cada ítem declara --x/--y/--w/--h por pantalla y aquí se
   elige cuál aplica. No hace falta JS para acomodar nada. */
.dp-root { background-color: var(--dp-bg, transparent); overflow-x: clip; }

.dp-c { position: relative; display: flex; flex-direction: column; isolation: isolate; }
.dp-sec { width: var(--dp-sw, 100%); margin-inline: auto; }
.dp-va-center { justify-content: center; }
.dp-va-end    { justify-content: flex-end; }
.dp-inner { position: relative; z-index: 1; width: 100%; }
.dp-inner.container { padding-left: var(--bs-gutter-x, .75rem); padding-right: var(--bs-gutter-x, .75rem); }
.dp-c-fill { position: relative; display: flex; flex-direction: column; isolation: isolate; height: 100%; min-height: inherit; }

.dp-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(10px, auto);
}
.dp-i {
  --x: var(--xl); --y: var(--yl); --w: var(--wl); --h: var(--hl);
  grid-column: calc(var(--x) + 1) / span var(--w);
  grid-row: calc(var(--y) + 1) / span var(--h);
  align-self: start;
  min-width: 0;
  width: 100%;
  min-height: calc(var(--h) * 10px);
}
/* Alto completo de su lugar en la rejilla, con el contenido arriba, al centro o abajo */
.dp-iv { align-self: stretch; display: flex; flex-direction: column; }
.dp-ha-center { justify-self: center; }
.dp-ha-end    { justify-self: end; }
.dp-fixed     { height: calc(var(--h) * 10px); overflow: hidden; }
.dp-fixed img, .dp-fixed video { height: 100%; }

@media (min-width: 992px) { .dp-hide-lg { display: none; } }
@media (min-width: 576px) and (max-width: 991.98px) { .dp-hide-md { display: none; } }
@media (max-width: 991.98px) {
  .dp-i { --x: var(--xm); --y: var(--ym); --w: var(--wm); --h: var(--hm); }
}
@media (max-width: 575.98px) {
  .dp-hide-sm { display: none; }
  .dp-i { --x: var(--xs); --y: var(--ys); --w: var(--ws); --h: var(--hs); }
}

/* Fondos de contenedor */
.dp-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.dp-bg img, .dp-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dp-overlay { position: absolute; inset: 0; background: #000; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dp-parallax img, .dp-parallax video {
      top: calc(var(--dp-plx) * -1);
      height: calc(100% + 2 * var(--dp-plx));
      animation: dp-parallax linear both;
      animation-timeline: view();
    }
  }
}
@keyframes dp-parallax {
  from { transform: translateY(calc(var(--dp-plx) * -.8)); }
  to   { transform: translateY(calc(var(--dp-plx) * .8)); }
}

/* Elementos */
.dp-heading { margin: 0; overflow-wrap: anywhere; }
.dp-text { overflow-wrap: anywhere; }
.dp-text > :last-child { margin-bottom: 0; }
.dp-i img, .dp-i video { display: block; width: 100%; max-width: 100%; }
.dp-t-image img { height: auto; }
.dp-t-image.dp-fixed img { height: 100%; }
.dp-btn { white-space: normal; }
.dp-ha-start .dp-btn { display: inline-block; }

.dp-ratio, .dp-carousel { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.dp-r-21x9 { aspect-ratio: 21 / 9; }
.dp-r-4x3  { aspect-ratio: 4 / 3; }
.dp-r-1x1  { aspect-ratio: 1 / 1; }
.dp-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dp-carousel { overflow: hidden; container-type: inline-size; }
.dp-carousel .swiper-slide { background: #212529; }
.dp-carousel .swiper-slide > a { display: block; height: 100%; color: inherit; text-decoration: none; }
.dp-carousel img { width: 100%; height: 100%; object-fit: cover; }
.dp-caption {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(.2rem, 1.5cqw, .75rem); padding: 1.75rem 3.5rem; overflow: hidden;
  color: #fff; text-align: center; background: rgba(0, 0, 0, .4);
}
.dp-cv-t { justify-content: flex-start; }
.dp-cv-b { justify-content: flex-end; }
.dp-ch-l { align-items: flex-start; text-align: left; }
.dp-ch-r { align-items: flex-end; text-align: right; }
.dp-caption strong { display: block; font-size: clamp(1rem, 3cqw, 2rem); line-height: 1.2; }
.dp-caption p { margin: 0; font-size: clamp(.8rem, 1.6cqw, 1.1rem); }
/* Si no alcanza el alto cede el texto, nunca el botón: es el único enlace */
.dp-caption strong, .dp-caption p { flex: 0 1 auto; min-height: 0; overflow: hidden; }
.dp-caption .dp-btn { flex: none; }
@container (max-width: 575.98px) {
  .dp-caption { padding: 1.25rem 2.5rem 1.5rem; }
  .dp-caption .dp-btn { padding: .25rem .75rem; font-size: .85rem; }
  .dp-caption strong, .dp-caption p { display: -webkit-box; -webkit-box-orient: vertical; }
  .dp-caption strong { -webkit-line-clamp: 2; }
  .dp-caption p { -webkit-line-clamp: 1; }
}
@container (max-width: 359.98px) {
  .dp-caption p { display: none; }
  .dp-caption strong { -webkit-line-clamp: 1; }
}

/* La tarjeta del catálogo trae columnas de Bootstrap: aquí manda la rejilla */
.dp-pslider { position: relative; }
.dp-products {
  --c: var(--cl); display: grid; grid-auto-flow: column; gap: 1rem;
  grid-auto-columns: calc((100% - (var(--c) - 1) * 1rem) / var(--c));
  padding-block: .25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.dp-products::-webkit-scrollbar { display: none; }
.dp-pdrag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.dp-ptable { grid-auto-flow: row; grid-template-columns: repeat(var(--c), minmax(0, 1fr)); overflow-x: visible; scroll-snap-type: none; }
.dp-products > div { width: auto; max-width: none; flex: none; padding: 0; scroll-snap-align: start; }
.dp-pnav {
  position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-top: -22px; color: #0a192f; background: #fff;
  border: 1px solid #dee2e6; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.dp-pnav[hidden] { display: none; }
.dp-pnav:disabled { opacity: .35; }
.dp-pprev { left: .25rem; }
.dp-pnext { right: .25rem; }
@media (max-width: 991.98px) { .dp-products { --c: var(--cm); } }
@media (max-width: 575.98px) {
  .dp-sec { width: 100%; }
}
@media (max-width: 575.98px) { .dp-products { --c: var(--cs); } }

.dp-code-frame { display: block; width: 100%; height: 100%; min-height: calc(var(--h) * 10px); border: 0; }