/*
 * DÍA DE LA MADRE — edición especial (temporal)
 *
 * Se carga después de modo_tranqui.css, editorial-background-test.css y
 * mobile-v2.css: reutiliza toda la estructura de las páginas de box y solo
 * cambia la personalidad cromática, igual que Box 2 (verde) y Box 4 (terracota).
 *
 * Paleta natural, con apenas rosa sobre la crema de Vinito Q:
 *   rosa empolvado  #E8B4AA  → botones (texto negro, como los otros box)
 *   nude            #F8EAE3  → superficies suaves
 *   rosa terroso    #A85A53  → textos chicos y acentos
 *   dorado          #C5A03F  → detalles de celebración (ya está en la marca)
 */

:root {
  --madre-rosa: #E8B4AA;
  --madre-rosa-hover: #DFA196;
  --madre-nude: #F8EAE3;
  --madre-accent: #A85A53;
}

.box-page--madre {
  --coral: var(--madre-accent);
  --teal: var(--madre-rosa);
  --teal-deep: var(--madre-accent);
  --rose: var(--madre-rosa-hover);
}

/* Header */
.box-page--madre .mp-nav a:hover,
.box-page--madre .mp-footer-nav-col a:hover {
  color: var(--madre-accent);
}

/* CTAs: mismo tratamiento que Box 2 y Box 4 */
.box-page--madre .mp-btn-primary,
.box-page--madre .mp-nav-cta,
.box-page.box-page--madre .mp-detail-buy,
.box-page--madre .mp-box-buy {
  border-color: var(--madre-rosa);
  background: var(--madre-rosa);
  color: var(--color-ink) !important;
}

.box-page--madre .mp-btn-primary:hover,
.box-page--madre .mp-nav-cta:hover,
.box-page.box-page--madre .mp-detail-buy:hover,
.box-page--madre .mp-box-buy:hover {
  border-color: var(--madre-rosa-hover);
  background: var(--madre-rosa-hover);
  color: var(--color-ink) !important;
}

.box-page--madre .mp-btn-ghost,
.box-page--madre .mp-hero-actions .mp-btn-ghost {
  color: var(--madre-accent);
}

/* Hero: foto de brindis de fondo, como las portadas de Box 2 y Box 4 */
.box-page--madre .mp-hero {
  background-color: var(--color-cream);
  background-image: url('../imagenes/brindis.webp');
  background-size: cover;
  background-position: 72% 42%;
}

.box-page--madre .mp-hero h1 em {
  color: var(--madre-accent);
}

/* Corazones flotando del lado derecho del hero */
.madre-hearts {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.madre-hearts span {
  position: absolute;
  bottom: -40px;
  color: var(--madre-rosa);
  opacity: 0;
  animation: madre-float 9s ease-in infinite;
}

.madre-hearts span:nth-child(1) { left: 58%; font-size: 22px; animation-delay: 0s; }
.madre-hearts span:nth-child(2) { left: 68%; font-size: 14px; animation-delay: 1.6s; color: var(--madre-accent); }
.madre-hearts span:nth-child(3) { left: 76%; font-size: 28px; animation-delay: 3.1s; }
.madre-hearts span:nth-child(4) { left: 84%; font-size: 16px; animation-delay: 4.4s; color: var(--color-gold); }
.madre-hearts span:nth-child(5) { left: 91%; font-size: 20px; animation-delay: 5.9s; color: var(--madre-accent); }
.madre-hearts span:nth-child(6) { left: 63%; font-size: 12px; animation-delay: 7.2s; color: var(--color-gold); }

/* Corazones en toda la página: capa fija, detrás del contenido clickeable,
   que acompaña el scroll. */
.madre-hearts--page {
  position: fixed;
  inset: 0;
  z-index: 50;
}

.madre-hearts--page span {
  animation-duration: 14s;
  opacity: 0;
}

.madre-hearts--page span:nth-child(1) { left: 4%;  font-size: 24px; animation-delay: 0s; }
.madre-hearts--page span:nth-child(2) { left: 14%; font-size: 16px; animation-delay: 5s; color: var(--madre-accent); }
.madre-hearts--page span:nth-child(3) { left: 27%; font-size: 30px; animation-delay: 9s; color: var(--color-gold); }
.madre-hearts--page span:nth-child(4) { left: 41%; font-size: 18px; animation-delay: 2.5s; }
.madre-hearts--page span:nth-child(5) { left: 55%; font-size: 26px; animation-delay: 11s; color: var(--madre-accent); }
.madre-hearts--page span:nth-child(6) { left: 68%; font-size: 15px; animation-delay: 6.5s; }
.madre-hearts--page span:nth-child(7) { left: 80%; font-size: 32px; animation-delay: 1.5s; color: var(--color-gold); }
.madre-hearts--page span:nth-child(8) { left: 93%; font-size: 20px; animation-delay: 8s; color: var(--madre-accent); }

/* Un corazón en cada título de sección */
.box-page--madre .mp-overline::after,
.box-page--madre .product-label::after {
  content: '♥';
  margin-left: 8px;
  color: var(--madre-rosa);
  font-size: 12px;
  letter-spacing: 0;
  display: inline-block;
  animation: madre-beat 1.6s ease-in-out infinite;
}

.box-page--madre .mp-chip::before {
  content: '♥ ';
  color: var(--madre-accent);
}

@keyframes madre-beat {
  0%, 100% { transform: scale(1); }
  20%      { transform: scale(1.3); }
  40%      { transform: scale(1); }
}

/* Tarjetas */
.box-page--madre .mp-wine-card:hover,
.box-page--madre .mp-wine-card.is-active {
  border-color: var(--madre-rosa);
  background: rgba(232, 180, 170, .28);
}

.box-page--madre .mp-wine-card,
.box-page--madre .mp-wine-card strong {
  color: var(--color-ink) !important;
}

.box-page--madre .mp-detail-card,
.box-page--madre .mp-box-card {
  border-color: rgba(168, 90, 83, .24);
}

.box-page--madre .mp-box-card {
  background: var(--madre-nude);
}

.box-page--madre .mp-detail-left {
  background: linear-gradient(145deg, #FBF1EC 0%, #F8EAE3 52%, #F4E1D8 100%);
}

/* Las fotos de esta edición son botella + ramo (4:5), no botellas recortadas:
   el marco angosto de Box 2/4 las cortaría a la mitad. */
.box-page--madre .mp-detail-left {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

/* La foto ocupa todo el alto de la ficha, crezca lo que crezca el texto. */
.box-page--madre .mp-detail-photo {
  width: 100%;
  height: 100%;
  min-height: 560px;
  aspect-ratio: auto;
  border-radius: 0;
}

@media (max-width: 980px) {
  .box-page--madre .mp-detail-photo {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
}

.box-page--madre .mp-detail-photo img {
  object-position: 50% 45%;
  transform: none;
}

.box-page--madre .mp-detail-curiosities-block {
  border-color: rgba(168, 90, 83, .2);
  background: rgba(248, 234, 227, .6);
}

.box-page--madre .product-carousel__dot {
  background: rgba(168, 90, 83, .22);
}

.box-page--madre .product-carousel__dot.is-active {
  background: var(--madre-accent);
}

/* Footer */
.box-page--madre .mp-footer-col-title,
.box-page--madre .mp-footer-social-title {
  color: var(--madre-accent);
}

@keyframes madre-float {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  12%  { opacity: .8; }
  80%  { opacity: .45; }
  100% { transform: translateY(-110vh) rotate(18deg); opacity: 0; }
}

@media (max-width: 768px) {
  .madre-hearts span:nth-child(n+4) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .madre-hearts {
    display: none;
  }
}