/* ============================================================
   POSICIONES — overrides de flores decorativas
   ============================================================
   Las reglas de posición están scopeadas a desktop (>720px) porque
   fueron afinadas con esa relación de aspecto. En mobile, las flores
   side-left/right caen al default de 02-fondo.css (chicas y en los
   bordes) y los clones se ocultan. Para agregar posiciones mobile
   propias, usar el editor visual con la ventana en <720px — el bloque
   que copies viene ya envuelto en `@media (max-width: 720px)`.
   ============================================================ */


/* ──────────────────────────────────────────────────────────────
   GLOBAL — siempre aplican (eliminadas / overflow de sección)
   ────────────────────────────────────────────────────────────── */

.cards__floral--side-left  { display: none !important; }
.cards__floral--side-right { display: none !important; }
.datetime__floral--clone-4-l { display: none !important; }
.story__floral--clone-2-l    { display: none !important; }

.hero     { overflow: visible; }
.datetime { overflow: visible; }
.story    { overflow: visible; }
#cover    { overflow: visible; }

/* Fondo de la PORTADA igual al fondo de la INVITACIÓN (off-white var(--bg)),
   en vez del beige propio de la portada. Aplica en escritorio y celular. */
.cover { background: var(--bg); }

/* Sin tope de ancho en las flores de la portada: el ancho debe ser EXACTO en
   vw para que el espejo izq/der calce (el max-width:360px las recortaba y
   descuadraba la simetría). */
.cover__floral { max-width: none; }


/* ──────────────────────────────────────────────────────────────
   MARCO FLORAL FIJO (estático)
   ────────────────────────────────────────────────────────────────
   En celular, en vez de flores pegadas a cada sección (que se montan
   sobre el texto y caen en posiciones raras), usamos un marco floral
   FIJO a la pantalla: las flores quedan quietas en las esquinas y el
   contenido se desliza por encima.
   En escritorio se mantiene el diseño afinado de siempre.
   ────────────────────────────────────────────────────────────── */

/* Por defecto (escritorio) el marco fijo está apagado. */
.floral-frame { display: none; }

/* Base del marco: posición FIJA a la pantalla y detrás del contenido.
   Las flores del marco usan la convención "__floral" para que el EDITOR
   VISUAL las reconozca (abrir con ?edit y arrastrar/escalar/opacidad).
   Sus posiciones afinadas las escribe el editor más abajo, dentro del
   bloque @media de mobile. */
.frame__floral {
  position: fixed;
  width: 44vw;
  max-width: 240px;
  opacity: 0.15;
  z-index: -1;            /* detrás de todo el contenido, sobre el fondo */
  pointer-events: none;
  user-select: none;
  height: auto;
}
/* Las posiciones afinadas de cada esquina están en el bloque @media de
   mobile (abajo), generadas con el editor visual. En escritorio el marco
   está oculto (display:none), así que no necesita posiciones propias. */


/* ──────────────────────────────────────────────────────────────
   MOBILE — apagamos las flores POR-SECCIÓN y encendemos el marco
   fijo. Excluimos el marco (frame__floral) de la regla que oculta,
   para que sí se muestre. Las posiciones de las esquinas las afina
   el editor visual (?edit) y se pegan acá.
   ────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* Ocultamos las flores de sección, PERO dejamos visibles el marco fijo
     (frame__floral) y las flores de la portada (cover__floral). */
  [class*="__floral"]:not([class*="frame__floral"]):not([class*="cover__floral"]) { display: none !important; }
  .floral-frame { display: block; }

  /* El par de la portada para ESCRITORIO (clone-1) se oculta en celular;
     en celular usamos su propio par (clone-2). */
  .cover__floral--clone-1-r,
  .cover__floral--clone-1-l { display: none !important; }

  /* Flores de la PORTADA en celular (afinadas con el editor en vista móvil). */
  .cover__floral--side-left {
    left: -23.92vw;
    top: 5.52vh;
    right: auto;
    bottom: auto;
    width: 44vw;
    height: auto;
    transform: none;
    opacity: 0.24;
  }

  .cover__floral--side-right {
    left: 79.92vw;
    top: 5.52vh;
    right: auto;
    bottom: auto;
    width: 44vw;
    height: auto;
    transform: scaleX(-1);
    opacity: 0.24;
  }

  .cover__floral--clone-2-r {
    left: -20.55vw;
    top: 80.65vh;
    right: auto;
    bottom: auto;
    width: 44vw;
    height: auto;
    transform: none;
    opacity: 0.33;
  }

  .cover__floral--clone-2-l {
    left: 76.55vw;
    top: 80.65vh;
    right: auto;
    bottom: auto;
    width: 44vw;
    height: auto;
    transform: scaleX(-1);
    opacity: 0.33;
  }

  .frame__floral--tl {
    left: -25.94vw;
    top: 8.59vh;
    right: auto;
    bottom: auto;
    width: 44vw;
    height: auto;
    transform: none;
    opacity: 0.18;
  }

  .frame__floral--tr {
    left: 81.94vw;
    top: 8.59vh;
    right: auto;
    bottom: auto;
    width: 44vw;
    height: auto;
    transform: scaleX(-1);
    opacity: 0.18;
  }

  .frame__floral--bl {
    left: -22.95vw;
    top: 74.63vh;
    right: auto;
    bottom: auto;
    width: 44vw;
    height: auto;
    transform: scaleY(-1);
    opacity: 0.18;
  }

  .frame__floral--br {
    left: 78.95vw;
    top: 74.63vh;
    right: auto;
    bottom: auto;
    width: 44vw;
    height: auto;
    transform: scaleX(-1) scaleY(-1);
    opacity: 0.18;
  }
}


/* ──────────────────────────────────────────────────────────────
   DESKTOP — posiciones afinadas con el editor (no aplican en mobile)
   ────────────────────────────────────────────────────────────── */

@media (min-width: 721px) {

  /* ── PORTADA (sobre) ──────────────────────────────────────── */
  /* En escritorio usamos el par clone-1; el clone-2 (de móvil) se oculta. */
  .cover__floral--clone-2-r,
  .cover__floral--clone-2-l { display: none !important; }

  .cover__floral--side-left {
    left: -7.58vw;
    top: -12.74vh;
    right: auto;
    bottom: auto;
    width: 26.66vw;
    height: auto;
    transform: rotate(25deg);
    opacity: 0.6;
  }

  .cover__floral--side-right {
    left: 80.92vw;
    top: -12.74vh;
    right: auto;
    bottom: auto;
    width: 26.66vw;
    height: auto;
    transform: scaleX(-1) rotate(25deg);
    opacity: 0.6;
  }

  .cover__floral--clone-1-r {
    left: -10.88vw;
    top: 65.54vh;
    right: auto;
    bottom: auto;
    width: 30.23vw;
    height: auto;
    transform: none;
    opacity: 0.6;
  }

  .cover__floral--clone-1-l {
    left: 80.65vw;
    top: 65.54vh;
    right: auto;
    bottom: auto;
    width: 30.23vw;
    height: auto;
    transform: scaleX(-1);
    opacity: 0.6;
  }

  .hero__floral--side-left {
    left: -11.51vw;
    top: 123.69vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: none;
    opacity: 0.2;
  }

  .hero__floral--side-right {
    left: 89.51vw;
    top: 123.69vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: scaleX(-1);
    opacity: 0.2;
  }

  .hero__floral--clone-1 {
    left: -11.12vw;
    top: 435.51vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: none;
    opacity: 0.15;
  }

  .hero__floral--clone-1-r {
    left: 89.12vw;
    top: 435.51vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: none;
    opacity: 0.15;
  }

  .hero__floral--clone-3-r {
    left: -11.4vw;
    top: 832.04vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: none;
    opacity: 0.15;
  }

  .hero__floral--clone-3-l {
    left: 89.4vw;
    top: 832.04vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: none;
    opacity: 0.15;
  }

  .datetime__floral--side-left {
    left: -11.03vw;
    top: -132.27vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: none;
    opacity: 0.25;
  }

  .datetime__floral--side-right {
    left: 89.03vw;
    top: -132.27vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: scaleX(-1);
    opacity: 0.25;
  }

  .datetime__floral--clone-1 {
    left: -11.05vw;
    top: 183.29vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: none;
    opacity: 0.21;
  }

  .datetime__floral--clone-1-r {
    left: 89.05vw;
    top: 183.29vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: none;
    opacity: 0.21;
  }

  .datetime__floral--clone-2 {
    left: -11.71vw;
    top: 482.01vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: none;
    opacity: 0.25;
  }

  .datetime__floral--clone-2-r {
    left: 89.71vw;
    top: 482.01vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: none;
    opacity: 0.25;
  }

  .datetime__floral--clone-4 {
    left: -10.74vw;
    top: 796.5vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: none;
    opacity: 0.2;
  }

  .datetime__floral--clone-4-r {
    left: 88.74vw;
    top: 796.5vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: none;
    opacity: 0.2;
  }

  .story__floral--side-left {
    left: -11.43vw;
    top: -149.23vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: none;
    opacity: 0.25;
  }

  .story__floral--side-right {
    left: 89.43vw;
    top: -149.23vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: scaleX(-1);
    opacity: 0.25;
  }

  .story__floral--clone-1 {
    left: -12.18vw;
    top: 167.39vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: none;
    opacity: 0.2;
  }

  .story__floral--clone-1-r {
    left: 90.18vw;
    top: 167.39vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: none;
    opacity: 0.2;
  }

  .story__floral--clone-2 {
    left: -11.8vw;
    top: 383.09vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: none;
    opacity: 0.25;
  }

  .story__floral--clone-2-r {
    left: 89.8vw;
    top: 383.09vh;
    right: auto;
    bottom: auto;
    width: 22vw;
    height: auto;
    transform: none;
    opacity: 0.25;
  }

  /* ── Flores eliminadas en escritorio ──────────────────────── */
  .hero__floral--clone-2,
  .hero__floral--clone-2-r,
  .datetime__floral--clone-3,
  .datetime__floral--clone-3-r { display: none !important; }
}


/* ============================================================
   FOTOS (DESKTOP) — encuadre generado por el editor de fotos (?editfoto)
   ============================================================ */

.datetime__frame img[src$="fecha/foto-novios.jpg"] {
  object-position: 42.04% 100%;
  scale: 1.2;
  translate: 0% -5.26%;
}