/* ============================================================
   02-FONDO.css — DECORACIÓN FLORAL (pares izq/der)
   ============================================================
   Reglas genéricas para CUALQUIER imagen con clase que termine
   en "__floral--side-left" o "__floral--side-right":

     - Se anclan al borde lateral del contenedor (negativos para
       que asomen desde fuera).
     - La derecha siempre se espeja con scaleX(-1).
     - Centradas verticalmente con translateY(-50%).

   Esto cubre: hero, cover, datetime, story, cards (y cualquier
   sección futura que use la misma convención de nombres).

   ─────── PARA AJUSTAR POR INVITACIÓN ───────
   Cada invitación tiene su propio posiciones.css que puede
   sobreescribir estas reglas si necesita variar tamaño,
   posición o desactivar el espejo de una flor en particular.
   ============================================================ */


/* Posicionamiento base (común a todas las flores decorativas).
   z-index: 0 deja a las flores en el fondo. La regla de abajo
   sube el resto del contenido a z-index: 2, así textos e imágenes
   siempre quedan por encima aunque la flor se redimensione. */
[class*="__floral"] {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: auto;
  height: auto;
}

/* Cualquier hijo directo de una sección con flores que NO sea una flor
   queda por encima de ellas (textos, fotos, tarjetas, etc.). */
.cover     > :not([class*="__floral"]),
.hero      > :not([class*="__floral"]),
.datetime  > :not([class*="__floral"]),
.story     > :not([class*="__floral"]),
.cards     > :not([class*="__floral"]) {
  position: relative;
  z-index: 2;
}


/* ──────────────── LADO IZQUIERDO ──────────────── */
[class*="__floral--side-left"] {
  top: 50%;
  left: -3vw;
  right: auto;
  width: 22vw;
  max-width: 360px;
  opacity: 0.6;
  transform: translateY(-50%);
}


/* ──────────────── LADO DERECHO (espejado) ──────────────── */
[class*="__floral--side-right"] {
  top: 50%;
  right: -3vw;
  left: auto;
  width: 22vw;
  max-width: 360px;
  opacity: 0.6;
  transform: translateY(-50%) scaleX(-1);
}


/* ──────────────── RESPONSIVE ──────────────── */
@media (max-width: 900px) {
  [class*="__floral--side-left"],
  [class*="__floral--side-right"] {
    width: 24vw;
    opacity: 0.4;
  }
  [class*="__floral--side-left"]  { left:  -8vw; }
  [class*="__floral--side-right"] { right: -8vw; }
}

/* En celulares achicamos más y empujamos hacia afuera para que las flores
   asomen por los bordes sin tapar el texto del medio. Buscamos que el
   contenido tenga ~50% del ancho libre de flores. */
@media (max-width: 480px) {
  [class*="__floral--side-left"],
  [class*="__floral--side-right"] {
    width: 28vw;
    opacity: 0.32;
  }
  [class*="__floral--side-left"]  { left:  -10vw; }
  [class*="__floral--side-right"] { right: -10vw; }
}