/* ==========================================================================
   MATESEREÑO — Campaña Día de la Madre 2026 · "Carta a Mamá"
   --------------------------------------------------------------------------
   Capa temporal: TODO cuelga de body.tema-madre, que lo prende
   js/tema-dia-madre.js solo hasta el 19/10/2026. Sin esa clase, este
   archivo no cambia nada y la tienda se ve exactamente igual que siempre.

   Dos partes:
   1) Re-tinte de la tienda: se redefinen los tokens de variables.css
      (verde → bordó, dorado → rosa) para que las secciones de siempre
      combinen con la campaña sin tocar sus estilos.
   2) Secciones nuevas (.madre-*): portada, marquesina, reloj, vales,
      combo, grabado y cierre.
   ========================================================================== */


/* ===================== Tokens de la campaña ===================== */

body.tema-madre {
  /* Paleta de la dirección C */
  --madre-fondo:        #1A0B10;
  --madre-superficie:   #2A1218;
  --madre-superficie-2: #3A1A22;
  --madre-rosa:         #FF5C93;
  --madre-rosa-claro:   #FFD9E3;
  --madre-crema:        #FFF4F0;
  --madre-texto-2:      #E9CBD3;
  --madre-tinta:        #3A0E1D;   /* texto sobre papel (carta, polaroids) */
  --madre-vino:         #8A2A4A;   /* manuscrita sobre crema: 7.8:1 */
  --madre-rosa-tinta:   #C2185B;   /* rosa para texto sobre crema: 5.5:1 */
  --madre-gris:         #6E4F57;   /* texto secundario sobre crema: 6.7:1 */
  --madre-linea:        rgba(255, 217, 227, 0.16);
  --madre-linea-rosa:   rgba(255, 92, 147, 0.35);

  --madre-fuente: 'Bricolage Grotesque', 'Jost', sans-serif;
  --madre-mano:   'Caveat', cursive;

  --madre-sombra-papel: 0 30px 60px -28px rgba(0, 0, 0, 0.85);
  --madre-ancho: 1320px;
  --madre-gutter: clamp(20px, 4vw, 32px);
  --madre-seccion-y: clamp(72px, 9vw, 112px);

  /* Re-tinte de la tienda: mismos nombres, colores de campaña */
  --verde-mate:        #3A0E1D;
  --verde-mate-oscuro: #2A0A15;
  --verde-mate-suave:  #5A1A30;
  --verde-tinta:       #1A0B10;

  --madera:        #8A2A4A;
  --madera-claro:  #E9A3BA;
  --cuero:         #6B1F3A;
  --beige:         #FBE8EC;
  --crema:         #FFF4F0;
  --dorado-sutil:  #C2185B;
  --dorado-claro:  #FF8FB3;

  --verde-tenue:  #FCE4EB;
  --verde-borde:  rgba(58, 14, 29, 0.16);
  --arena-tenue:  #FFE8EE;
  --arena-borde:  rgba(194, 24, 91, 0.3);
  --arena-texto:  #A3164F;

  /* Celular de Ofertas en titanio rosado y sello rosa */
  --titanio-claro:  #F7E4EA;
  --titanio:        #D2A6B4;
  --titanio-oscuro: #7C4A5A;
  --oferta-fondo:   #FF5C93;
  --oferta-texto:   #1A0B10;

  --texto-principal: #1A0B10;
  --texto-suave:     #6E4F57;
  --texto-invertido: #FFF4F0;

  --fuente-display: 'Bricolage Grotesque', 'Fraunces', serif;
  --fuente-cuerpo:  'Bricolage Grotesque', 'Jost', sans-serif;

  --sombra-suave:  0 20px 60px -25px rgba(58, 14, 29, 0.35);
  --sombra-media:  0 24px 60px -30px rgba(58, 14, 29, 0.45);
  --sombra-fuerte: 0 30px 80px -20px rgba(26, 11, 16, 0.5);
  --linea: rgba(58, 14, 29, 0.10);

  background: var(--madre-crema);
}


/* ===================== Mostrar / ocultar ===================== */

/* Las secciones nuevas vienen con hidden: solo se ven con el tema */
body.tema-madre .madre[hidden] { display: block; }

/* Adentro de la campaña, hidden sigue mandando (reloj apagado, sin ofertas…) */
body.tema-madre .madre [hidden] { display: none !important; }

/* La portada y la franja de siempre se reemplazan por las de campaña.
   El reloj chico de Ofertas queda oculto: se ve en grande arriba. */
body.tema-madre .hero,
body.tema-madre .franja-envios,
body.tema-madre #reloj-oferta { display: none !important; }


/* ===================== Re-tinte de piezas con colores fijos ===================== */

/* Header: degradé bordó arriba y papel crema al scrollear */
body.tema-madre .header__fila-principal {
  background: linear-gradient(180deg, rgba(26, 11, 16, 0.75) 0%, rgba(26, 11, 16, 0) 100%);
}
body.tema-madre .header--scrolled .header__fila-principal {
  background: rgba(255, 244, 240, 0.95);
}
body.tema-madre .header__fila-nav { background: rgba(26, 11, 16, 0.6); }
body.tema-madre .header--scrolled .header__fila-nav { background: rgba(251, 232, 236, 0.96); }
body.tema-madre .header--scrolled .filtro-pill { border-color: rgba(58, 14, 29, 0.25); }
body.tema-madre .filtro-pill--activo,
body.tema-madre .filtro-pill--activo:hover { box-shadow: 0 8px 18px -8px rgba(194, 24, 91, 0.7); }
/* Con el header scrolleado, la pastilla activa heredaba el texto oscuro (3.1:1) */
body.tema-madre .header--scrolled .filtro-pill--activo { color: var(--blanco); }
body.tema-madre .nav__oferta,
body.tema-madre .menu-mobile__oferta { color: var(--madre-rosa) !important; }
body.tema-madre .header--scrolled .nav__oferta { color: var(--madre-rosa-tinta) !important; }

/* Categorías: la ilustración toma el tono bordó (duotono) y recupera
   su color al pasar el mouse */
body.tema-madre .categoria-tile:not(.es-grafica) .categoria-tile__imagen {
  mix-blend-mode: luminosity;
  transition: transform var(--dur-lenta) var(--ease-suave), mix-blend-mode 0s;
}
body.tema-madre .categoria-tile:not(.es-grafica):hover .categoria-tile__imagen,
body.tema-madre .categoria-tile--activa .categoria-tile__imagen { mix-blend-mode: normal; }
body.tema-madre .categoria-tile__velo {
  background: linear-gradient(0deg, rgba(26, 11, 16, 0.92) 0%, rgba(26, 11, 16, 0.2) 58%, transparent 100%);
}

/* Botón principal (WhatsApp) en rosa de campaña */
body.tema-madre .boton--primario {
  background: var(--madre-rosa);
  color: var(--madre-fondo);
  box-shadow: 0 14px 30px -12px rgba(255, 92, 147, 0.6);
}
body.tema-madre .boton--primario:hover { box-shadow: 0 20px 40px -12px rgba(255, 92, 147, 0.7); }
/* El verde de WhatsApp con texto blanco daba 2:1; en rosa con texto oscuro, 6.5:1 */
body.tema-madre .contacto__boton--wa {
  background: var(--madre-rosa);
  color: var(--madre-fondo);
  box-shadow: 0 16px 34px -12px rgba(255, 92, 147, 0.6);
}

/* Títulos de sección con la grotesca de campaña */
body.tema-madre .seccion__titulo {
  font-weight: 800;
  letter-spacing: -0.035em;
}

/* Títulos del pie: el rosa oscuro no se leía sobre el bordó (3.2:1) */
body.tema-madre .footer__titulo { color: var(--dorado-claro); }

/* ---- Ofertas = "Regalos": papel crema con un halo rosa ---- */
body.tema-madre .ofertas {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 92, 147, 0.14) 0%, transparent 55%),
    var(--madre-crema);
  border-color: rgba(194, 24, 91, 0.18);
}
body.tema-madre .ofertas__titulo { color: var(--madre-tinta); }
body.tema-madre .ofertas__insignia { color: var(--madre-rosa-tinta); }
body.tema-madre .chip-oferta--rojo { color: var(--madre-rosa-tinta); }
body.tema-madre .boton--oferta {
  background: var(--madre-fondo);
  color: var(--madre-crema);
  box-shadow: 0 16px 34px -14px rgba(26, 11, 16, 0.6);
}

/* ---- Tarjetas: badge rosa, tachado claro, hover con zoom suave ---- */
body.tema-madre .producto-card {
  border-radius: 20px;
  box-shadow: 0 18px 40px -28px rgba(58, 14, 29, 0.45);
}
body.tema-madre .producto-card:hover {
  border-color: rgba(255, 92, 147, 0.55);
  box-shadow: 0 32px 64px -30px rgba(58, 14, 29, 0.55);
}
body.tema-madre .producto-card__media {
  background: linear-gradient(155deg, var(--madre-superficie-2) 0%, var(--madre-fondo) 100%);
}
body.tema-madre .producto-card:hover .producto-card__media img {
  transform: scale(1.07) translateY(-4px);
}
body.tema-madre .producto-card--oferta {
  border-color: rgba(255, 92, 147, 0.45);
  box-shadow: 0 20px 45px -28px rgba(194, 24, 91, 0.5);
}
body.tema-madre .producto-card--oferta:hover {
  border-color: var(--madre-rosa);
  box-shadow: 0 34px 70px -28px rgba(194, 24, 91, 0.5);
}
body.tema-madre .producto-card--oferta .producto-card__precio,
body.tema-madre .producto-card__envio { color: var(--madre-rosa-tinta); }
body.tema-madre .producto-card__antes,
body.tema-madre .mini-card__antes {
  color: var(--madre-gris);
  opacity: 1;
}
body.tema-madre .badge-off {
  color: var(--madre-fondo);
  background: var(--madre-rosa);
  border-radius: var(--radio-pill);
  padding: 3px 10px;
  font-weight: 700;
}
body.tema-madre .producto-card--oferta:not(.producto-card--sin-stock) .boton--producto {
  background: var(--madre-rosa);
  color: var(--madre-fondo);
  box-shadow: 0 12px 26px -12px rgba(255, 92, 147, 0.7);
}
body.tema-madre .producto-card--oferta:not(.producto-card--sin-stock) .boton--producto:hover { background: #FF77A6; }
/* La etiqueta "Oferta" ya toma el rosa de --oferta-fondo / --oferta-texto */


/* ---- Mini carrito (css/carrito.css) en clave de campaña ---- */
body.tema-madre .carrito-flotante {
  background: var(--madre-rosa);
  color: var(--madre-fondo);
  box-shadow: 0 14px 34px -10px rgba(194, 24, 91, 0.6);
}
body.tema-madre .carrito-flotante__cantidad {
  background: var(--madre-fondo);
  color: var(--madre-rosa);
  box-shadow: 0 0 0 2px var(--madre-rosa);
}
body.tema-madre .carrito__fondo { background: rgba(26, 11, 16, 0.55); }
body.tema-madre .carrito-aviso { background: var(--madre-fondo); }
body.tema-madre .carrito-aviso__ver {
  background: var(--madre-rosa);
  color: var(--madre-fondo);
}


/* ===================== Base de las secciones nuevas ===================== */

body.tema-madre .madre {
  position: relative;
  background: var(--madre-fondo);
  color: var(--madre-crema);
  font-family: var(--madre-fuente);
  overflow: hidden;
}

body.tema-madre .madre-contenedor {
  max-width: var(--madre-ancho);
  margin: 0 auto;
  padding-inline: var(--madre-gutter);
}

body.tema-madre .madre a { text-decoration: none; }

body.tema-madre .madre-eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--madre-rosa-claro);
}
body.tema-madre .madre-eyebrow--rosa { color: var(--madre-rosa); }

body.tema-madre .madre-titulo {
  margin: 0;
  font-family: var(--madre-fuente);
  font-weight: 800;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--madre-crema);
}

body.tema-madre .madre-parrafo {
  margin: 0;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.6;
  color: var(--madre-texto-2);
}

/* Texto calado: solo el contorno en rosa */
body.tema-madre .madre-calado {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--madre-rosa);
}
@supports not (-webkit-text-stroke: 1px black) {
  body.tema-madre .madre-calado { color: var(--madre-rosa); }
}

body.tema-madre .madre-corazon {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  fill: currentColor;
  vertical-align: 0.02em;
}

/* ---- Botones ---- */
body.tema-madre .madre-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 30px;
  border-radius: var(--radio-pill);
  font-family: var(--madre-fuente);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  transition: transform var(--dur-rapida) var(--ease-suave),
              background-color var(--dur-rapida) var(--ease-suave),
              box-shadow var(--dur-rapida) var(--ease-suave),
              color var(--dur-rapida) var(--ease-suave);
}
body.tema-madre .madre-boton:hover { transform: translateY(-3px); }
body.tema-madre .madre-boton:active { transform: translateY(0); }
body.tema-madre .madre-boton:focus-visible,
body.tema-madre .madre button:focus-visible,
body.tema-madre .madre-link:focus-visible {
  outline: 2px solid var(--madre-rosa);
  outline-offset: 3px;
}

body.tema-madre .madre-boton--rosa {
  background: var(--madre-rosa);
  color: var(--madre-fondo);
  box-shadow: 0 16px 36px -16px rgba(255, 92, 147, 0.75);
}
body.tema-madre .madre-boton--rosa:hover {
  background: #FF77A6;
  color: var(--madre-fondo);
  box-shadow: 0 22px 44px -16px rgba(255, 92, 147, 0.85);
}
body.tema-madre .madre-boton--borde {
  border: 1.5px solid var(--madre-rosa-claro);
  color: var(--madre-crema);
}
body.tema-madre .madre-boton--borde:hover {
  background: var(--madre-rosa-claro);
  color: var(--madre-fondo);
}
body.tema-madre .madre-boton--oscuro {
  background: var(--madre-fondo);
  color: var(--madre-crema);
}
body.tema-madre .madre-boton--oscuro:hover {
  background: var(--madre-tinta);
  color: var(--madre-crema);
}
body.tema-madre .madre-boton__off {
  padding: 4px 10px;
  border-radius: var(--radio-pill);
  background: var(--madre-fondo);
  color: var(--madre-rosa);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
body.tema-madre .madre-boton--ancho { width: 100%; }
body.tema-madre .madre-boton--grande {
  min-height: 62px;
  padding: 0 38px;
  font-size: 18px;
  font-weight: 800;
}
body.tema-madre .madre-boton svg { width: 20px; height: 20px; flex-shrink: 0; }
body.tema-madre .madre-boton[aria-disabled="true"] {
  background: var(--madre-superficie-2);
  color: var(--madre-texto-2);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

body.tema-madre .madre-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--madre-rosa-claro);
  border-bottom: 1px solid var(--madre-linea-rosa);
  transition: color var(--dur-rapida) var(--ease-suave), border-color var(--dur-rapida) var(--ease-suave);
}
body.tema-madre .madre-link:hover { color: var(--madre-rosa); border-color: var(--madre-rosa); }

/* ---- Aparición al scrollear (la activa js/tema-dia-madre.js) ---- */
body.tema-madre .madre-aparece {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.9s var(--ease-suave), transform 0.9s var(--ease-suave);
}
body.tema-madre .madre-aparece.es-visible { opacity: 1; transform: none; }

/* Las grillas entran tarjeta por tarjeta */
body.tema-madre .madre-vales__grilla.madre-aparece,
body.tema-madre .madre-combo__opciones.madre-aparece { opacity: 1; transform: none; }
body.tema-madre .madre-vales__grilla.madre-aparece > *,
body.tema-madre .madre-combo__opciones.madre-aparece > * {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.8s var(--ease-suave), transform 0.8s var(--ease-suave);
}
body.tema-madre .madre-aparece.es-visible > * { opacity: 1; transform: none; }
body.tema-madre .madre-aparece.es-visible > :nth-child(2) { transition-delay: 0.1s; }
body.tema-madre .madre-aparece.es-visible > :nth-child(3) { transition-delay: 0.2s; }
body.tema-madre .madre-aparece.es-visible > :nth-child(4) { transition-delay: 0.3s; }


/* ===================== Franja de avisos ===================== */

body.tema-madre .madre-portada { padding-top: var(--header-alto); }

body.tema-madre .madre-franja {
  background: var(--madre-rosa);
  color: var(--madre-fondo);
  overflow: hidden;
}
body.tema-madre .madre-franja__pista {
  display: flex;
  width: max-content;
  animation: madre-desliza 34s linear infinite;
}
body.tema-madre .madre-franja:hover .madre-franja__pista { animation-play-state: paused; }
body.tema-madre .madre-franja__grupo {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.tema-madre .madre-franja__grupo li {
  display: flex;
  align-items: center;
  min-height: 42px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.tema-madre .madre-franja__grupo li b { font-weight: 800; }
/* Separador: rombito, y el último del grupo también para que el loop no se note */
body.tema-madre .madre-franja__grupo li::after {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 28px;
  background: currentColor;
  transform: rotate(45deg);
}

@keyframes madre-desliza {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}


/* ===================== Portada (hero) ===================== */

body.tema-madre .madre-hero {
  padding: clamp(40px, 6vw, 72px) 0 clamp(72px, 8vw, 104px);
}

body.tema-madre .madre-hero__grilla {
  display: grid;
  gap: clamp(48px, 6vw, 64px);
  align-items: center;
}

body.tema-madre .madre-hero__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  min-width: 0;
}

/* Entrada escalonada del texto al cargar */
body.tema-madre .madre-hero__texto > * {
  opacity: 0;
  animation: madre-entra 0.9s var(--ease-suave) forwards;
}
body.tema-madre .madre-hero__texto > :nth-child(2) { animation-delay: 0.1s; }
body.tema-madre .madre-hero__texto > :nth-child(3) { animation-delay: 0.22s; }
body.tema-madre .madre-hero__texto > :nth-child(4) { animation-delay: 0.34s; }

@keyframes madre-entra {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}

body.tema-madre .madre-hero__cuenta {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.tema-madre .madre-latido {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--madre-rosa);
  flex-shrink: 0;
  animation: madre-latido 1.6s ease-in-out infinite;
}
@keyframes madre-latido {
  0%, 100% { transform: scale(1);    opacity: 1; }
  15%      { transform: scale(1.35); opacity: 1; }
  30%      { transform: scale(1);    opacity: 0.7; }
  45%      { transform: scale(1.2);  opacity: 1; }
}

body.tema-madre .madre-hero__titulo {
  margin: 0;
  font-family: var(--madre-fuente);
  font-weight: 800;
  font-size: clamp(50px, 7.6vw, 124px);
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--madre-crema);
}
body.tema-madre .madre-hero__titulo em {
  font-style: normal;
  color: var(--madre-rosa);
}

body.tema-madre .madre-hero__bajada {
  margin: 0;
  max-width: 30em;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--madre-texto-2);
}

body.tema-madre .madre-hero__acciones {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
body.tema-madre .madre-hero__acciones .madre-boton {
  flex: 1 1 220px;
  min-height: 58px;
  padding: 0 32px;
  font-size: 17px;
}

/* ---- Collage: polaroids flotando + carta ---- */
body.tema-madre .madre-hero__collage {
  position: relative;
  height: clamp(400px, 108vw, 520px);
  min-width: 0;
}

body.tema-madre .madre-polaroid {
  --r: 0deg;
  position: absolute;
  margin: 0;
  padding: 10px 10px 44px;
  background: var(--madre-crema);
  box-shadow: var(--madre-sombra-papel);
  transform: rotate(var(--r));
  opacity: 0;
  animation:
    madre-aparece-foto 1s var(--ease-suave) forwards,
    madre-flota 7s ease-in-out 1s infinite;
}
body.tema-madre .madre-polaroid img {
  display: block;
  width: 100%;
  height: auto;
}
body.tema-madre .madre-polaroid figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  text-align: center;
  font-family: var(--madre-mano);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--madre-tinta);
}
body.tema-madre .madre-polaroid figcaption .madre-corazon { color: var(--madre-rosa-tinta); }

body.tema-madre .madre-polaroid--1 {
  --r: -6deg;
  left: 0;
  top: 0;
  width: 60%;
  z-index: 1;
}
body.tema-madre .madre-polaroid--2 {
  --r: 5deg;
  right: 0;
  top: 13%;
  width: 50%;
  z-index: 2;
  animation-delay: 0.15s, 1.15s;
}

@keyframes madre-aparece-foto {
  from { opacity: 0; transform: translate3d(0, 30px, 0) rotate(var(--r)); }
  to   { opacity: 1; transform: rotate(var(--r)); }
}
@keyframes madre-flota {
  0%, 100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(var(--r)); }
  50%      { opacity: 1; transform: translate3d(0, -12px, 0) rotate(var(--r)); }
}

/* La carta manuscrita: las líneas se escriben de a una */
body.tema-madre .madre-carta {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 20px;
  border-radius: 6px;
  background: var(--madre-rosa-claro);
  color: var(--madre-tinta);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.85);
  font-family: var(--madre-mano);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
  transform: rotate(-2deg);
}
/* La carta no "sube" como el resto: queda quieta y se escriben las líneas */
body.tema-madre .madre-carta.madre-aparece { opacity: 1; transform: rotate(-2deg); }

body.tema-madre .madre-carta__linea {
  margin: 0;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
}
body.tema-madre .madre-carta.es-visible .madre-carta__linea {
  animation: madre-linea 0.7s ease forwards;
}
body.tema-madre .madre-carta.es-visible .madre-carta__linea:nth-child(1) { animation-delay: 0.3s; }
body.tema-madre .madre-carta.es-visible .madre-carta__linea:nth-child(2) { animation-delay: 1.1s; }
body.tema-madre .madre-carta.es-visible .madre-carta__linea:nth-child(3) { animation-delay: 1.9s; }
body.tema-madre .madre-carta.es-visible .madre-carta__linea:nth-child(4) { animation-delay: 2.7s; }

@keyframes madre-linea {
  to { opacity: 1; transform: none; }
}

body.tema-madre .madre-carta__firma {
  text-align: right;
  font-weight: 700;
  color: var(--madre-rosa-tinta);
}


/* ===================== Marquesina gigante ===================== */

body.tema-madre .madre-marquesina {
  padding: 22px 0;
  border-top: 1px solid var(--madre-linea-rosa);
  border-bottom: 1px solid var(--madre-linea-rosa);
  overflow: hidden;
}
body.tema-madre .madre-marquesina__pista {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-weight: 800;
  font-size: clamp(56px, 8vw, 112px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  animation: madre-desliza 26s linear infinite;
}
body.tema-madre .madre-marquesina__pista > span {
  display: inline-flex;
  align-items: center;
}
/* Estrella de cuatro puntas entre frases (forma CSS, no emoji) */
body.tema-madre .madre-marquesina__pista > span::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  margin: 0 0.45em;
  background: var(--madre-rosa);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}


/* ===================== Ofertas: reloj + vales ===================== */

body.tema-madre .madre-ofertas {
  padding: var(--madre-seccion-y) 0;
}

body.tema-madre .madre-reloj {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: var(--madre-seccion-y);
  text-align: center;
}

body.tema-madre .madre-reloj__cifras {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(4px, 1vw, 10px);
  font-weight: 800;
  font-size: clamp(54px, 11vw, 168px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
body.tema-madre .madre-reloj__bloque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
body.tema-madre .madre-reloj__bloque b { font-weight: 800; }
body.tema-madre .madre-reloj__bloque small {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--madre-texto-2);
}
body.tema-madre .madre-reloj__bloque--seg b { color: var(--madre-rosa); }
body.tema-madre .madre-reloj__sep {
  color: var(--madre-rosa);
  animation: madre-titila 1s steps(1) infinite;
}
@keyframes madre-titila {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

body.tema-madre .madre-reloj__nota {
  margin: 4px 0 0;
  max-width: 46em;
  text-wrap: balance;
  font-size: 15px;
  line-height: 1.5;
  color: var(--madre-texto-2);
}
body.tema-madre .madre-reloj__nota span:first-letter { text-transform: uppercase; }

/* ---- Vales ---- */
body.tema-madre .madre-vales {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
body.tema-madre .madre-vales > .madre-link { align-self: flex-start; }

body.tema-madre .madre-vales__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 32px;
}
body.tema-madre .madre-vales__chip {
  margin: 0;
  padding: 10px 18px;
  border-radius: var(--radio-pill);
  border: 1px solid var(--madre-linea-rosa);
  font-size: 14px;
  font-weight: 700;
  color: var(--madre-rosa);
}

body.tema-madre .madre-vales__grilla {
  display: grid;
  gap: 24px;
}

/* El vale: papel crema con dos muescas troqueladas a la altura del corte.
   Cada vale es un contenedor: si le sobra ancho se acuesta (foto a la
   izquierda), si no queda parado (foto arriba). */
body.tema-madre .madre-vale-caja { container-type: inline-size; }

body.tema-madre .madre-vale {
  --muesca: 15px;
  --corte-y: 220px;
  display: grid;
  grid-template-rows: 220px auto;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: var(--madre-crema);
  color: var(--madre-fondo);
  -webkit-mask:
    radial-gradient(circle var(--muesca) at 0 var(--corte-y), #0000 97%, #000) top left / 51% 100% no-repeat,
    radial-gradient(circle var(--muesca) at 100% var(--corte-y), #0000 97%, #000) top right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle var(--muesca) at 0 var(--corte-y), #0000 97%, #000) top left / 51% 100% no-repeat,
    radial-gradient(circle var(--muesca) at 100% var(--corte-y), #0000 97%, #000) top right / 51% 100% no-repeat;
  transition: transform 0.35s var(--ease-suave);
}
body.tema-madre .madre-vale:hover { transform: translateY(-6px); }

body.tema-madre .madre-vale__foto {
  position: relative;
  overflow: hidden;
  background: var(--madre-superficie-2);
}
body.tema-madre .madre-vale__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-suave);
}
body.tema-madre .madre-vale:hover .madre-vale__foto img { transform: scale(1.06); }

body.tema-madre .madre-vale__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 24px 24px 26px;
  border-top: 2px dashed rgba(26, 11, 16, 0.22);
}
body.tema-madre .madre-vale__sello {
  padding: 5px 12px;
  border-radius: var(--radio-pill);
  background: var(--madre-rosa);
  color: var(--madre-fondo);
  font-size: 13px;
  font-weight: 800;
}
body.tema-madre .madre-vale__nombre {
  margin: 0;
  font-family: var(--madre-fuente);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--madre-fondo);
  text-wrap: balance;
}
body.tema-madre .madre-vale__frase {
  margin: 0;
  font-family: var(--madre-mano);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.1;
  color: var(--madre-vino);
}
body.tema-madre .madre-vale__precios {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: auto 0 6px;
  padding-top: 6px;
}
body.tema-madre .madre-vale__precio {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
body.tema-madre .madre-vale__precios s {
  font-size: 15px;
  color: var(--madre-gris);
}
body.tema-madre .madre-vale .madre-boton { width: 100%; min-height: 50px; font-size: 15px; }
body.tema-madre .madre-vale__acciones {
  display: flex;
  gap: 8px;
  width: 100%;
}
body.tema-madre .madre-vale__acciones .madre-boton { flex: 1 1 auto; width: auto; min-width: 0; }
body.tema-madre .madre-vale__acciones .boton-carrito { width: 50px; height: 50px; }

@container (min-width: 520px) {
  body.tema-madre .madre-vale {
    grid-template-rows: none;
    grid-template-columns: 40% 1fr;
    min-height: 290px;
    -webkit-mask:
      radial-gradient(circle var(--muesca) at 40% 0, #0000 97%, #000) top / 100% 51% no-repeat,
      radial-gradient(circle var(--muesca) at 40% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
    mask:
      radial-gradient(circle var(--muesca) at 40% 0, #0000 97%, #000) top / 100% 51% no-repeat,
      radial-gradient(circle var(--muesca) at 40% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  }
  body.tema-madre .madre-vale__cuerpo {
    border-top: 0;
    border-left: 2px dashed rgba(26, 11, 16, 0.22);
    padding: 26px 28px 26px 26px;
  }
}


/* ===================== Armá su combo ===================== */

body.tema-madre .madre-combo {
  background: var(--madre-superficie);
  padding: var(--madre-seccion-y) 0;
}

body.tema-madre .madre-combo__grilla {
  display: grid;
  gap: 32px;
}
body.tema-madre .madre-combo__texto {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body.tema-madre .madre-combo__opciones {
  display: grid;
  gap: 14px;
}

body.tema-madre .madre-opcion {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 2px solid var(--madre-linea);
  background: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s var(--ease-suave);
}
body.tema-madre .madre-opcion:hover { transform: translateY(-3px); border-color: rgba(255, 217, 227, 0.35); }
body.tema-madre .madre-opcion.es-elegida {
  border-color: var(--madre-rosa);
  background: var(--madre-superficie-2);
}

body.tema-madre .madre-opcion__elegir {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: var(--madre-crema);
  font-family: var(--madre-fuente);
  text-align: left;
  cursor: pointer;
}
body.tema-madre .madre-opcion__elegir img {
  width: 84px;
  height: 104px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 14px;
  opacity: 0.8;
  transition: opacity 0.25s ease;
}
body.tema-madre .madre-opcion.es-elegida .madre-opcion__elegir img { opacity: 1; }

body.tema-madre .madre-opcion__texto {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 0;
  min-width: 0;
}
body.tema-madre .madre-opcion__tipo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--madre-rosa);
}
body.tema-madre .madre-opcion__nombre {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
}
body.tema-madre .madre-opcion__precio {
  font-size: 15px;
  color: var(--madre-rosa-claro);
}
body.tema-madre .madre-opcion__precio s {
  margin-left: 4px;
  font-size: 13px;
  color: var(--madre-texto-2);
  opacity: 0.85;
}

body.tema-madre .madre-opcion__check {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 217, 227, 0.4);
  color: transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.3s var(--ease-rebote);
}
body.tema-madre .madre-opcion__check svg { width: 16px; height: 16px; }
body.tema-madre .madre-opcion.es-elegida .madre-opcion__check {
  background: var(--madre-rosa);
  border-color: var(--madre-rosa);
  color: var(--madre-fondo);
  transform: scale(1.08);
}

body.tema-madre .madre-opcion__otro {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  margin: 0 14px 6px;
  padding: 0 4px;
  border: 0;
  border-top: 1px solid var(--madre-linea);
  background: transparent;
  color: var(--madre-texto-2);
  font-family: var(--madre-fuente);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease;
}
body.tema-madre .madre-opcion__otro:hover { color: var(--madre-rosa); }
body.tema-madre .madre-opcion__otro svg { width: 16px; height: 16px; flex-shrink: 0; }
body.tema-madre .madre-opcion__cuenta {
  margin-left: auto;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

body.tema-madre .madre-combo__resumen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px;
  border-radius: 24px;
  border: 1px solid var(--madre-linea);
  background: var(--madre-fondo);
}
body.tema-madre .madre-combo__resumen p { margin: 0; }
body.tema-madre .madre-combo__cantidad,
body.tema-madre .madre-combo__ahorro {
  font-size: 15px;
  color: var(--madre-texto-2);
}
body.tema-madre .madre-combo__total {
  font-weight: 800;
  font-size: clamp(44px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--madre-rosa);
  font-variant-numeric: tabular-nums;
}
body.tema-madre .madre-combo__resumen .madre-boton { margin-top: 12px; }
body.tema-madre .madre-combo__nota {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  color: var(--madre-texto-2);
}

@media (min-width: 640px) {
  body.tema-madre .madre-combo__opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  body.tema-madre .madre-combo__grilla {
    grid-template-columns: minmax(320px, 5fr) 7fr;
    grid-template-areas:
      "texto   opciones"
      "resumen opciones";
    grid-template-rows: auto 1fr;
    column-gap: 56px;
    row-gap: 32px;
  }
  body.tema-madre .madre-combo__texto    { grid-area: texto; }
  body.tema-madre .madre-combo__opciones { grid-area: opciones; align-content: start; }
  body.tema-madre .madre-combo__resumen  { grid-area: resumen; align-self: start; position: sticky; top: 120px; }
}


/* ===================== Grabado láser ===================== */

body.tema-madre .madre-grabado {
  padding: var(--madre-seccion-y) 0;
}

body.tema-madre .madre-grabado__grilla {
  display: grid;
  gap: 56px;
  align-items: center;
}

body.tema-madre .madre-grabado__foto {
  position: relative;
  justify-self: center;
  width: min(100%, 420px);
  margin: 0;
  padding: 12px 12px 52px;
  background: var(--madre-crema);
  box-shadow: var(--madre-sombra-papel);
  transform: rotate(-3deg);
}
body.tema-madre .madre-grabado__foto.madre-aparece { transform: translate3d(0, 28px, 0) rotate(-3deg); }
body.tema-madre .madre-grabado__foto.madre-aparece.es-visible { transform: rotate(-3deg); }
body.tema-madre .madre-grabado__foto img {
  display: block;
  width: 100%;
  height: auto;
}
body.tema-madre .madre-grabado__foto figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  text-align: center;
  font-family: var(--madre-mano);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--madre-tinta);
}

body.tema-madre .madre-grabado__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}

body.tema-madre .madre-grabado__precio {
  margin: 0;
  font-size: 18px;
  color: var(--madre-texto-2);
}
body.tema-madre .madre-junto { white-space: nowrap; }
body.tema-madre .madre-grabado__precio b {
  font-size: 24px;
  font-weight: 800;
  color: var(--madre-crema);
}
body.tema-madre .madre-grabado__precio s {
  margin-left: 6px;
  font-size: 15px;
  color: var(--madre-texto-2);
}

body.tema-madre .madre-pasos {
  display: grid;
  gap: 16px;
  margin: 8px 0 12px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
body.tema-madre .madre-pasos li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--madre-texto-2);
}
body.tema-madre .madre-pasos li b {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--madre-rosa);
  color: var(--madre-rosa);
  font-size: 18px;
  font-weight: 800;
}
body.tema-madre .madre-pasos li span { padding-top: 10px; }
body.tema-madre .madre-pasos li strong { color: var(--madre-crema); font-weight: 700; }


/* ===================== Cierre ===================== */

body.tema-madre .madre-cierre {
  padding: calc(var(--madre-seccion-y) * 1.1) 0 var(--madre-seccion-y);
  border-top: 1px solid var(--madre-linea-rosa);
}

body.tema-madre .madre-cierre__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
body.tema-madre .madre-cierre__caja .madre-parrafo { margin-inline: auto; }

body.tema-madre .madre-cierre__logo {
  width: 64px;
  height: auto;
}

body.tema-madre .madre-cierre__firma {
  margin: 0;
  font-family: var(--madre-mano);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1;
  color: var(--madre-rosa-claro);
}

body.tema-madre .madre-cierre__marca {
  margin: -6px 0 0;
  font-family: var(--madre-fuente);
  font-weight: 800;
  font-size: clamp(54px, 9vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
body.tema-madre .madre-cierre__marca { color: var(--madre-crema); }
body.tema-madre .madre-cierre__marca span { color: var(--madre-rosa); }

body.tema-madre .madre-cierre__aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 34em;
  margin: 4px 0 0;
  padding: 14px 20px;
  border-radius: 16px;
  border: 1px solid var(--madre-linea-rosa);
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  color: var(--madre-texto-2);
}
body.tema-madre .madre-cierre__aviso svg {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  flex-shrink: 0;
  color: var(--madre-rosa);
}
body.tema-madre .madre-cierre__aviso strong { color: var(--madre-crema); }


/* ===================== Tablet y escritorio ===================== */

@media (min-width: 768px) {
  body.tema-madre .madre-hero__collage { height: 600px; max-width: 620px; width: 100%; justify-self: center; }
  body.tema-madre .madre-hero__acciones .madre-boton { flex: 0 0 auto; }
  body.tema-madre .madre-carta { padding: 26px 30px; font-size: 26px; left: 12%; right: 4%; }
  body.tema-madre .madre-polaroid { padding: 14px 14px 52px; }
  body.tema-madre .madre-polaroid figcaption { font-size: 26px; bottom: 12px; }
  body.tema-madre .madre-polaroid--1 { left: 4%; width: 56%; }
  body.tema-madre .madre-polaroid--2 { width: 46%; }
}

@media (min-width: 1024px) {
  body.tema-madre .madre-hero__grilla { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  body.tema-madre .madre-vales__grilla { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  body.tema-madre .madre-hero__collage { height: 580px; max-width: none; }
  body.tema-madre .madre-polaroid--1 { left: 0; width: 62%; }
  body.tema-madre .madre-polaroid--2 { top: 15%; width: 50%; }
  body.tema-madre .madre-carta { left: 10%; right: 0; }
  body.tema-madre .madre-grabado__grilla { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 80px; }
}


/* ===================== Menos movimiento ===================== */

@media (prefers-reduced-motion: reduce) {
  body.tema-madre .madre-franja__pista,
  body.tema-madre .madre-marquesina__pista,
  body.tema-madre .madre-latido,
  body.tema-madre .madre-reloj__sep { animation: none; }

  body.tema-madre .madre-hero__texto > *,
  body.tema-madre .madre-carta__linea,
  body.tema-madre .madre-carta.es-visible .madre-carta__linea {
    opacity: 1;
    transform: none;
    animation: none;
  }
  body.tema-madre .madre-polaroid {
    opacity: 1;
    animation: none;
  }

  body.tema-madre .madre-aparece,
  body.tema-madre .madre-aparece > * { transition: none; }

  body.tema-madre .madre-vale,
  body.tema-madre .madre-vale__foto img,
  body.tema-madre .madre-opcion,
  body.tema-madre .madre-boton { transition: none; }
  body.tema-madre .madre-vale:hover,
  body.tema-madre .madre-opcion:hover,
  body.tema-madre .madre-boton:hover { transform: none; }
  body.tema-madre .madre-vale:hover .madre-vale__foto img { transform: none; }

  /* Sin la marquesina en movimiento, que al menos se lea el principio */
  body.tema-madre .madre-franja__pista { margin: 0 auto; }
}