/**
 * Tarjeta de cupón — plantilla divcupon (plnatillachancay/divcupon)
 * Solo markup .home-cupon-card--divcupon; carrusel y API sin cambios.
 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap');

.home-page.home-coastal-pulse .home-cupon-card--divcupon {
  flex-direction: column !important;
  align-items: stretch !important;
  display: flex !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 0 !important;
  background: var(--cp-surface-lowest, #ffffff) !important;
  border: 1px solid var(--cp-outline-variant, #e7bcb8) !important;
  border-radius: var(--cp-radius-xl, 12px) !important;
  box-shadow: 0 4px 20px -2px rgba(168, 0, 19, 0.08) !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
  container-type: inline-size;
  container-name: dcupon-card;
  --dcupon-pad: 11px;
  --dcupon-gap: 5px;
  --dcupon-eyebrow: 11px;
  --dcupon-brand: 13px;
  --dcupon-title: 17px;
  --dcupon-price: 1.65rem;
  --dcupon-price-old: 13px;
  --dcupon-save: 11px;
  --dcupon-btn: 12px;
  --dcupon-btn-pad: 11px 8px;
  --dcupon-foot: 12px;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon:hover {
  box-shadow: 0 12px 32px -4px rgba(168, 0, 19, 0.14) !important;
  transform: translateY(-2px);
}

/* Imagen cuadrada Stitch + badge HOT */
.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-media {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: var(--cp-surface-container, #f1ede8) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.5s ease !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon:hover .dcupon-media img {
  transform: scale(1.05);
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-media.no-img img {
  display: none !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-img-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cp-on-surface-variant, #5e3f3c);
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-img-fallback .material-symbols-outlined {
  font-size: 2.5rem;
  opacity: 0.45;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-hot {
  position: absolute !important;
  top: 1rem !important;
  left: 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: #ff6d00 !important;
  color: #ffffff !important;
  font-family: 'Space Grotesk', var(--cp-font, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  box-shadow: 0 2px 8px rgba(255, 109, 0, 0.35) !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-hot .material-symbols-outlined {
  font-size: 14px !important;
  font-variation-settings: 'FILL' 1 !important;
}

/* Cuerpo — grid interno legible */
.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-body {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--dcupon-gap) !important;
  padding: var(--dcupon-pad) !important;
  background: var(--cp-surface-lowest, #ffffff) !important;
  min-width: 0 !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-brand-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: center !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  gap: 2px !important;
  text-align: center !important;
  width: 100% !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-eyebrow {
  font-family: 'Space Grotesk', var(--cp-font, sans-serif) !important;
  font-size: var(--dcupon-eyebrow) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--cp-primary, #a80013) !important;
  opacity: 0.85 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  width: 100% !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-brand-name {
  font-family: var(--cp-font, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: var(--dcupon-brand) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  color: var(--cp-primary, #a80013) !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Fila inferior: descuento + Ver más (50% / 50%) */
.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-title-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: calc(var(--dcupon-title) * 1.35) !important;
  min-height: calc(var(--dcupon-title) * 1.35) !important;
  max-height: calc(var(--dcupon-title) * 1.35) !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-actions-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 0 !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-discount-btn,
.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-discount-pill {
  flex: 1 1 50% !important;
  width: 50% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: var(--dcupon-btn-pad) !important;
  border-radius: 10px !important;
  background: var(--cp-primary-container, #d6001c) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(214, 0, 28, 0.25) !important;
  font-family: 'Space Grotesk', var(--cp-font, sans-serif) !important;
  font-size: var(--dcupon-btn) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-discount-btn .material-symbols-outlined,
.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-discount-pill .material-symbols-outlined {
  font-size: 16px !important;
  font-variation-settings: 'FILL' 1 !important;
  flex-shrink: 0 !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-discount-btn span:last-child,
.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-discount-pill span:last-child {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* CTA Ver más — negro por defecto; rojo solo al hover del botón */
.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-cta {
  flex: 1 1 50% !important;
  width: 50% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: var(--dcupon-btn-pad) !important;
  border-radius: 10px !important;
  background: #0b1c30 !important;
  background-image: none !important;
  border: none !important;
  color: #ffffff !important;
  font-family: 'Space Grotesk', var(--cp-font, sans-serif) !important;
  font-size: calc(var(--dcupon-btn) + 1px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  box-shadow: 0 2px 6px rgba(11, 28, 48, 0.22) !important;
  transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.15s ease !important;
  white-space: nowrap !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-title {
  margin: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  font-family: var(--cp-font, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: var(--dcupon-title) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.02em !important;
  color: var(--cp-on-surface, #1c1c19) !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-title--long {
  font-size: calc(var(--dcupon-title) * 0.88) !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-title--xlong {
  font-size: calc(var(--dcupon-title) * 0.76) !important;
  letter-spacing: -0.03em !important;
}

/* Precio: final + original + ahorro en fila */
.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-price-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 4px 10px !important;
  padding-top: 0 !important;
  margin-top: -1px !important;
  text-align: center !important;
  width: 100% !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-price-main {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  color: var(--cp-on-surface, #1c1c19) !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-currency {
  font-family: 'Space Grotesk', var(--cp-font, sans-serif) !important;
  font-size: calc(var(--dcupon-price) * 0.45) !important;
  font-weight: 700 !important;
  color: var(--cp-primary, #a80013) !important;
  margin-right: 2px !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-price-value {
  font-family: 'Space Grotesk', var(--cp-font, sans-serif) !important;
  font-size: var(--dcupon-price) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-price-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  text-align: center !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-price-original {
  font-size: var(--dcupon-price-old) !important;
  color: var(--cp-on-surface-variant, #5e3f3c) !important;
  text-decoration: line-through !important;
  opacity: 0.6 !important;
  line-height: 1.2 !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-price-save {
  font-family: 'Space Grotesk', var(--cp-font, sans-serif) !important;
  font-size: var(--dcupon-save) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: var(--cp-primary, #a80013) !important;
  line-height: 1.2 !important;
}


.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-cta:hover {
  background: var(--cp-primary-container, #d6001c) !important;
  box-shadow: 0 2px 8px rgba(214, 0, 28, 0.32) !important;
  transform: translateY(-1px);
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-cta .material-symbols-outlined {
  font-size: 18px !important;
}

/* Pie */
.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--dcupon-foot) !important;
  line-height: 1.35 !important;
  color: var(--cp-on-surface-variant, #5e3f3c) !important;
  opacity: 0.72 !important;
  text-align: center !important;
}

.home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-foot .material-symbols-outlined {
  font-size: calc(var(--dcupon-foot) + 2px) !important;
  flex-shrink: 0 !important;
}

.home-coastal-pulse .home-cupon-card--divcupon {
  flex-direction: column !important;
  height: auto !important;
}

/* Tarjetas anchas (≥250px): texto más cómodo en PC y cupón central del carrusel */
@container dcupon-card (min-width: 250px) {
  .home-page.home-coastal-pulse .home-cupon-card--divcupon {
    --dcupon-pad: 13px;
    --dcupon-gap: 6px;
    --dcupon-eyebrow: 12px;
    --dcupon-brand: 14px;
    --dcupon-title: 18px;
    --dcupon-price: 1.85rem;
    --dcupon-price-old: 14px;
    --dcupon-save: 12px;
    --dcupon-btn: 13px;
    --dcupon-btn-pad: 12px 10px;
    --dcupon-foot: 12px;
  }
}

/* Tarjetas estrechas (carrusel lateral 3D) */
@container dcupon-card (max-width: 249px) {
  .home-page.home-coastal-pulse .home-cupon-card--divcupon {
    --dcupon-pad: 10px;
    --dcupon-gap: 4px;
    --dcupon-eyebrow: 10px;
    --dcupon-brand: 12px;
    --dcupon-title: 16px;
    --dcupon-price: 1.5rem;
    --dcupon-price-old: 12px;
    --dcupon-save: 10px;
    --dcupon-btn: 11px;
    --dcupon-btn-pad: 10px 6px;
    --dcupon-foot: 11px;
  }

  .home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-discount-btn,
  .home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-discount-pill,
  .home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-cta {
    min-height: 38px !important;
  }
}

/* Imagen: proporción equilibrada en móvil y PC */
@media (max-width: 767px) {
  .home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-media {
    aspect-ratio: 4 / 3 !important;
    max-height: none !important;
  }
}

@media (min-width: 768px) {
  .home-page.home-coastal-pulse .home-cupon-card--divcupon .dcupon-media {
    aspect-ratio: 1 / 1 !important;
    max-height: none !important;
  }

  .home-page.home-coastal-pulse .home-cupones-loop__slide[data-offset="0"] .home-cupon-card--divcupon .dcupon-media {
    aspect-ratio: 4 / 3 !important;
  }
}