/* Día de la Madre 2026: banda maximalista de la portada y de /regalo.
   Vive hasta el domingo 18/10/2026 inclusive: un script inline en index.html
   saca la banda desde el 19/10 a las 00:00 de Buenos Aires. Pasada la fecha,
   borrar la banda del index y la cinta de /regalo, y de este archivo todo MENOS
   .madre-precios y .madre-placa-precios, que los usa /regalo, una página permanente.

   Excepción temporal y pedida a DESIGN.md (nahuel, 09/10/2026: "un hero
   maximalista hasta el 18"): acá se rompen a propósito la Una Pincelada Rule
   (hay varias pinceladas, una cinta que corre y un sello que gira) y la densidad
   baja. Se respetan el resto: una sola letra, placas con doble filete, oro solo
   ornamental, el rojo esmalte solo en el CTA (las pinceladas son bordó, coral
   y oro) y prefers-reduced-motion apaga todo. */

:root { --bordo: #8e3b52; }

.madre {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 0;
  background-color: var(--verde-hondo);
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(233, 226, 205, 0.10), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='%23b99a5f' fill-opacity='0.22'%3E%3Cpath d='M28 18l3 10-3 10-3-10z'/%3E%3Cpath d='M18 28l10-3 10 3-10 3z'/%3E%3Ccircle cx='0' cy='0' r='1.6'/%3E%3Ccircle cx='56' cy='0' r='1.6'/%3E%3Ccircle cx='0' cy='56' r='1.6'/%3E%3Ccircle cx='56' cy='56' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  border-bottom: 1px solid rgba(185, 154, 95, 0.45);
}

/* ---------- Cintas que corren arriba y abajo ---------- */

.madre-cinta {
  position: relative;
  z-index: 3;
  overflow: hidden;
  background: var(--bordo);
  border-block: 1px solid rgba(185, 154, 95, 0.7);
  box-shadow: inset 0 3px 0 -2px rgba(253, 250, 242, 0.25), inset 0 -3px 0 -2px rgba(4, 18, 13, 0.35);
  color: var(--porcelana-luz);
  white-space: nowrap;
}
.madre-cinta.abajo { background: var(--filete); }
.madre-cinta-pista {
  display: inline-flex;
  animation: correr 28s linear infinite;
}
.madre-cinta.abajo .madre-cinta-pista { animation-direction: reverse; animation-duration: 34s; }
.madre-cinta span {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.55rem 0.55rem 0.55rem 0;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.madre-cinta svg { color: var(--filete-oro); flex-shrink: 0; }
@keyframes correr { to { transform: translateX(-50%); } }

/* ---------- Escenario ---------- */

.madre-escenario {
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
  padding: 4.2rem 1.25rem 4.6rem;
}

/* Pinceladas grandes de fondo: se pintan al cargar, escalonadas. */
.madre-trazo {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.madre-trazo svg { display: block; width: 100%; height: auto; }
.madre-trazo g { clip-path: inset(0 100% 0 0); }
.pintada .madre-trazo g { animation: pintar 1.1s cubic-bezier(0.25, 0.7, 0.3, 1) forwards; }
.madre-trazo.uno { width: min(46rem, 120%); top: 2.2rem; left: -12%; transform: rotate(-8deg); opacity: 0.9; }
.madre-trazo.dos { width: min(40rem, 110%); bottom: 2.6rem; right: -14%; transform: rotate(-4deg); opacity: 0.85; }
.madre-trazo.tres { width: min(30rem, 80%); top: 46%; left: 52%; transform: rotate(7deg); opacity: 0.55; }
.pintada .madre-trazo.dos g { animation-delay: 0.35s; }
.pintada .madre-trazo.tres g { animation-delay: 0.7s; }

/* Sello que gira, arriba a la derecha de la tarjeta. */
.madre-sello {
  position: absolute;
  z-index: 2;
  top: 1.4rem;
  right: max(1rem, calc(50% - 25rem));
  width: 8.6rem;
  color: var(--filete-oro);
  filter: drop-shadow(0 8px 14px rgba(4, 18, 13, 0.6));
}
.madre-sello svg { display: block; width: 100%; height: auto; }
.madre-sello .aro { transform-origin: 70px 70px; animation: girar 36s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* La tarjeta de regalo que asoma por detrás de la placa. */
.madre-tarjeta {
  position: absolute;
  z-index: 1;
  top: 2rem;
  left: max(0.5rem, calc(50% - 31rem));
  width: 15rem;
  padding: 1.5rem 1.2rem 1.4rem;
  transform: rotate(-11deg);
  text-align: center;
}
.madre-tarjeta .leyenda-chica {
  display: block;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bordo);
}
.madre-tarjeta strong {
  display: block;
  margin: 0.5rem 0 0.7rem;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta);
}
.madre-tarjeta .renglon { display: block; height: 1px; margin: 0.55rem 0.4rem 0; background: rgba(39, 77, 63, 0.3); }

/* ---------- La placa principal ---------- */

.madre-placa.placa {
  z-index: 2;
  max-width: 38rem;
  margin: 2.6rem auto 0;
  padding: 3.2rem 2.4rem 2.6rem;
  text-align: center;
  transform: rotate(-1.2deg);
  box-shadow:
    0 0 0 6px var(--verde-hondo),
    0 0 0 7px rgba(185, 154, 95, 0.9),
    0 0 0 12px var(--verde-hondo),
    0 0 0 13px rgba(185, 154, 95, 0.45),
    0 30px 60px -20px rgba(4, 18, 13, 0.95);
}
.madre-placa .ornamento svg { display: block; margin: 0 auto; }
.madre-leyenda {
  display: block;
  margin-top: 1rem;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bordo);
}
.madre-placa h2 {
  margin: 0.7rem 0 0;
  font-weight: 700;
  font-size: clamp(2.7rem, 11vw, 4.9rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--tinta);
  text-wrap: balance;
}
.madre-placa h2 .linea { display: block; }
.madre-placa .madre-pincel { display: block; width: min(16rem, 70%); margin: 0.7rem auto 0.9rem; }
.madre-placa .madre-pincel svg { display: block; width: 100%; height: auto; }
.madre-placa .madre-pincel g { clip-path: inset(0 100% 0 0); }
.pintada .madre-placa .madre-pincel g { animation: pintar 0.9s cubic-bezier(0.25, 0.7, 0.3, 1) 0.9s forwards; }
.madre-sub {
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta);
}
.madre-lead {
  max-width: 29rem;
  margin: 1rem auto 1.6rem;
  font-size: 1.08rem;
  color: var(--tinta-suave);
  text-wrap: pretty;
}

.madre-precios {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto 1.8rem;
  max-width: 30rem;
  border-block: 1px solid rgba(39, 77, 63, 0.35);
}
.madre-precios li {
  padding: 0.85rem 0.4rem;
  border-left: 1px solid rgba(39, 77, 63, 0.22);
}
.madre-precios li:first-child { border-left: 0; }
.madre-precios span {
  display: block;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.madre-precios strong {
  display: block;
  margin-top: 0.2rem;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.madre-letra {
  margin-top: 1.4rem;
  font-size: 0.86rem;
  color: var(--tinta-suave);
}
.madre-letra .ver {
  color: var(--esmalte);
  text-decoration: none;
  border-bottom: 1px solid rgba(176, 30, 60, 0.4);
  font-weight: 600;
}
.madre-letra .ver:hover { color: var(--esmalte-hondo); border-color: var(--esmalte-hondo); }

@media (max-width: 640px) {
  .madre-escenario { padding: 3rem 1rem 3.6rem; }
  .madre-sello { width: 6.2rem; top: 0.9rem; right: 0.6rem; }
  .madre-tarjeta { width: 11.5rem; top: 1.2rem; left: -1.2rem; padding: 1.1rem 0.9rem 1rem; }
  .madre-tarjeta strong { font-size: 1.05rem; }
  .madre-placa.placa { margin-top: 5.2rem; padding: 2.6rem 1.4rem 2.2rem; transform: rotate(-0.8deg); }
  .madre-precios strong { font-size: 1.08rem; }
  .madre-precios span { letter-spacing: 0.12em; }
  .madre-leyenda { font-size: 0.68rem; letter-spacing: 0.14em; }
}

/* /regalo: la misma cinta, sola, arriba de la página hasta el 18. */
.madre-chica { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .madre-cinta-pista, .madre-sello .aro { animation: none; }
  .madre-trazo g, .madre-placa .madre-pincel g { clip-path: none; animation: none; }
}

/* /regalo: placa de precios (página permanente, no se borra con la banda). */
.madre-placa-precios { text-align: center; }
.madre-placa-precios .madre-precios { margin-bottom: 1.2rem; }