/* ═══════════════════════════════════════════════════════════════
   HOJAS — ramas de olivo en línea fina, un solo color, discretas.
   Se dibujan con mask-image para que tomen el color de la paleta.
   rama.svg (vertical, para esquinas) · ramita.svg (horizontal, detalles)
═══════════════════════════════════════════════════════════════ */
.leaf,
.hero::before, .intro::before, .intro::after,
.dark-section::before, .foot::before, .foot::after,
#confirmar::before, .sec-label::before, .fotos-leaf::before {
  -webkit-mask: url(rama.svg) center / contain no-repeat;
          mask: url(rama.svg) center / contain no-repeat;
  pointer-events: none;
}

/* Portada: rama sobre la foto, arriba a la derecha, con vaivén lento */
.hero::before {
  content: ""; position: absolute; z-index: 1;
  top: 54px; right: -34px;
  width: clamp(130px, 34vw, 230px); aspect-ratio: 230 / 470;
  background: var(--gd-light);
  opacity: 0; transform-origin: 60% 100%;
  transform: scaleX(-1) rotate(10deg) translateY(12px);
  transition: opacity 1.6s ease .9s, transform 2s cubic-bezier(.22,1,.36,1) .9s;
}
.shown .hero::before {
  opacity: .38; transform: scaleX(-1) rotate(10deg);
  animation: hoja-vaiven 9s ease-in-out 3s infinite alternate;
}
@keyframes hoja-vaiven {
  from { transform: scaleX(-1) rotate(10deg); }
  to   { transform: scaleX(-1) rotate(6deg); }
}

/* Sobre de entrada: dos ramas enmarcando */
.intro::before, .intro::after {
  content: ""; position: absolute; z-index: -1;
  width: clamp(120px, 30vw, 200px); aspect-ratio: 230 / 470;
  background: var(--ol-soft); opacity: .32;
}
.intro::before { top: -20px; left: -30px; transform: rotate(160deg); }
.intro::after  { bottom: -20px; right: -30px; transform: rotate(-20deg); }

/* Etiqueta de cada sección: ramita pequeña antes del texto */
.sec-label::before {
  content: ""; flex: none;
  width: 42px; height: 19px;
  -webkit-mask-image: url(ramita.svg); mask-image: url(ramita.svg);
  background: var(--gold-deep); opacity: .85;
}
.dark-section .sec-label::before { background: var(--gd-light); }

/* Álbum (sección oscura): rama grande y muy suave en la esquina */
.dark-section { position: relative; overflow: hidden; }
.dark-section::before {
  content: ""; position: absolute; z-index: 0;
  bottom: -40px; right: -50px;
  width: clamp(160px, 40vw, 280px); aspect-ratio: 230 / 470;
  background: var(--gd-light); opacity: .12; transform: rotate(-24deg);
}
.dark-section > * { position: relative; z-index: 1; }

/* Confirmación: rama clara arriba a la derecha */
#confirmar { position: relative; overflow: clip; }
#confirmar::before {
  content: ""; position: absolute; z-index: -1;
  top: 28px; right: 6px;
  width: clamp(80px, 20vw, 140px); aspect-ratio: 230 / 470;
  background: var(--ol-pale); opacity: .7; transform: rotate(12deg);
}
#confirmar { isolation: isolate; }

/* Pie de página: dos ramas que abrazan el monograma */
.foot { position: relative; overflow: hidden; isolation: isolate; }
.foot::before, .foot::after {
  content: ""; position: absolute; z-index: -1; top: 28px;
  width: clamp(80px, 20vw, 130px); aspect-ratio: 230 / 470;
  background: var(--gd-light); opacity: .22;
}
.foot::before { left: calc(50% - clamp(110px, 27vw, 170px)); transform: rotate(-28deg); }
.foot::after  { right: calc(50% - clamp(110px, 27vw, 170px)); transform: scaleX(-1) rotate(-28deg); }

/* Página de fotos */
.fotos-leaf { position: relative; isolation: isolate; }
.fotos-leaf::before {
  content: ""; position: absolute; z-index: -1;
  top: -10px; right: -40px;
  width: clamp(120px, 32vw, 200px); aspect-ratio: 230 / 470;
  background: var(--gd-light); opacity: .2; transform: scaleX(-1) rotate(12deg);
}

@media (prefers-reduced-motion: reduce) {
  .hero::before, .shown .hero::before { animation: none; transition: none; opacity: .38; transform: scaleX(-1) rotate(10deg); }
}