/* Motivo "cruz dorada delgada" detras de retratos, replica el detalle de los flyers */
.motif-cross {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.motif-cross::before,
.motif-cross::after {
  content: "";
  position: absolute;
  background: linear-gradient(
    var(--motif-dir, 180deg),
    transparent,
    var(--color-gold-500) 12%,
    var(--color-gold-500) 88%,
    transparent
  );
  opacity: 0.55;
}

.motif-cross::before {
  left: 42%;
  top: 0;
  bottom: 0;
  width: 1px;
}

.motif-cross::after {
  --motif-dir: 90deg;
  top: 38%;
  left: 0;
  right: 0;
  height: 1px;
}

/* Acento pequeno reutilizable: espiral de luz en SVG inline (assets/icons/sprite.svg#swirl-motif) */
.motif-swirl {
  color: var(--color-gold-500);
  opacity: 0.35;
  mix-blend-mode: screen;
}

section[data-theme="light"] .motif-swirl {
  mix-blend-mode: normal;
  opacity: 0.18;
}

.motif-swirl--corner {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  width: 140px;
  height: 140px;
  z-index: 0;
}

/* Overlay oscuro sobre fondos fotograficos, para legibilidad de texto (regla de contraste del plan) */
.has-photo-overlay {
  position: relative;
  isolation: isolate;
}

.has-photo-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim);
  z-index: -1;
}

.has-photo-overlay--flat::before {
  background: linear-gradient(180deg, rgba(11, 23, 48, 0.78), rgba(11, 23, 48, 0.88));
}

/* Scroll reveal: oculto solo si hay JS (clase .js en <html>, ver index.html) y
   solo hasta que reveal.js confirme visibilidad. Sin JS, el contenido se ve
   normal desde el primer render: nunca depende de un script para existir. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}