/* ===========================================================================
   ECOM20 · capa propia sobre la plantilla de Next
   Todo lo que NO viene en next-core.css vive aquí. No se toca next-core.css:
   así una actualización de la plantilla del proveedor no se lleva por delante
   nuestro diseño.
   =========================================================================== */

/* ── Etiqueta «New 2026 Edition» ─────────────────────────────────────────── */
.ecom20-edition {
  color: #d92d20;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}

/* ── Imagen principal (sin carrusel) ─────────────────────────────────────── */
.ecom20-hero-media {
  position: relative;
  width: 100%;
  border-radius: var(--radius--cards, 10px);
  overflow: hidden;
  background: #f4f5f7;
}

.ecom20-hero-media__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.ecom20-hero-media__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 74px;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.ecom20-hero-media__flag {
  position: absolute;
  top: 14px;
  right: 12px;
  background: #111827;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
  .ecom20-hero-media__badge { width: 58px; }
  .ecom20-hero-media__flag { font-size: 0.65rem; padding: 5px 8px; }
}

/* ── Iconos de las cuatro ventajas ───────────────────────────────────────── */
.ecom20-ficon {
  color: var(--brand--color--primary, #1f4ba2);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
}

.ecom20-ficon svg { width: 100%; height: 100%; display: block; }

/* ── Popup de salida ─────────────────────────────────────────────────────── */
.ecom20-exit {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 24, 39, 0.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.ecom20-exit.is-open { opacity: 1; visibility: visible; }

.ecom20-exit__dialog {
  position: relative;
  display: flex;
  width: min(780px, 100%);
  max-height: calc(100vh - 40px);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  transform: translateY(10px) scale(0.98);
  transition: transform 0.18s ease;
}

.ecom20-exit.is-open .ecom20-exit__dialog { transform: none; }

.ecom20-exit__media {
  width: 45%;
  flex: 0 0 45%;
  background: #f4f5f7;
}

/* contain, no cover: la foto de producto va sobre fondo claro y un recorte
   deja el panel en blanco. */
.ecom20-exit__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.ecom20-exit__media img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.ecom20-exit__body {
  flex: 1;
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.ecom20-exit__eyebrow { font-size: 2rem; font-weight: 800; line-height: 1; margin: 0; }
.ecom20-exit__lead { margin: 0; color: #4b5563; font-size: 0.95rem; }
.ecom20-exit__title { margin: 6px 0 0; font-size: 1.55rem; font-weight: 800; line-height: 1.2; }
.ecom20-exit__offer { margin: 4px 0 0; font-size: 1.1rem; font-weight: 700; }
.ecom20-exit__note { margin: 0; color: #6b7280; font-size: 0.85rem; }

.ecom20-exit__cta {
  margin-top: 14px;
  border: 0;
  cursor: pointer;
  background: #ffd431;
  color: #111827;
  font-weight: 800;
  font-size: 1rem;
  padding: 15px 18px;
  border-radius: 8px;
  width: 100%;
}

.ecom20-exit__cta:hover { filter: brightness(0.95); }

.ecom20-exit__close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px 8px;
}

.ecom20-exit__close:hover { color: #374151; }

@media (max-width: 700px) {
  .ecom20-exit__dialog { flex-direction: column; overflow-y: auto; }
  .ecom20-exit__media { width: 100%; flex: none; max-height: 190px; }
  .ecom20-exit__body { padding: 22px 20px 26px; }
  .ecom20-exit__eyebrow { font-size: 1.6rem; }
  .ecom20-exit__title { font-size: 1.25rem; }
}