/* Two full, distinct lateral drawings per section. Heading marks and dividers
   are independent. Reserved side lanes prevent content/ornament collisions. */
:root {
  --ornament-lane: clamp(34px, 6vw, 96px);
  --ornament-size: clamp(24px, 4vw, 64px);
}
main > .page-section > .wrap,
main > .hero > .wrap {
  width: min(calc(100% - 2 * var(--ornament-lane)), var(--max));
}
:is(#inicio, #nosotros, #ofertas, #carta, #galeria, #equipo, #ubicacion, #contacto) .section-motifs .motif {
  inline-size: var(--ornament-size);
  block-size: var(--ornament-size);
  opacity: var(--ornament-opacity, .25);
  overflow: visible;
  transform: rotate(var(--ornament-angle, 0deg));
  /* Keep an entire rotated square inside the reserved lane. */
  --ornament-angle: 0deg;
}
:is(#inicio, #nosotros, #ofertas, #carta, #galeria, #equipo, #ubicacion, #contacto) .section-motifs .motif-left {
  left: calc((var(--ornament-lane) - var(--ornament-size)) / 2);
  right: auto;
}
:is(#inicio, #nosotros, #ofertas, #carta, #galeria, #equipo, #ubicacion, #contacto) .section-motifs .motif-right {
  right: calc((var(--ornament-lane) - var(--ornament-size)) / 2);
  left: auto;
}
#inicio .section-motifs .motif-left { top: 12%; bottom: auto; --ornament-angle: 6deg; }
#inicio .section-motifs .motif-right { top: auto; bottom: 14%; }
#nosotros .section-motifs .motif-left { top: auto; bottom: 13%; --ornament-angle: -5deg; }
#nosotros .section-motifs .motif-right { top: 12%; bottom: auto; }
#ofertas .section-motifs .motif-left { top: 15%; bottom: auto; --ornament-angle: -6deg; }
#ofertas .section-motifs .motif-right { top: auto; bottom: 15%; --ornament-angle: 5deg; }
#carta .section-motifs .motif-left { top: calc(50% - var(--ornament-size) / 2); bottom: auto; }
#carta .section-motifs .motif-right { top: 12%; bottom: auto; }
#galeria .section-motifs .motif-left { top: 12%; bottom: auto; }
#galeria .section-motifs .motif-right { top: auto; bottom: 13%; }
#equipo .section-motifs .motif-left { top: auto; bottom: 12%; --ornament-angle: -5deg; }
#equipo .section-motifs .motif-right { top: 12%; bottom: auto; }
#ubicacion .section-motifs .motif-left { top: 12%; bottom: auto; }
#ubicacion .section-motifs .motif-right { top: calc(50% - var(--ornament-size) / 2); bottom: auto; }
#contacto .section-motifs .motif-left { top: calc(50% - var(--ornament-size) / 2); bottom: auto; --ornament-angle: -6deg; }
#contacto .section-motifs .motif-right { top: auto; bottom: 13%; }
.hero, .contact-section { --ornament-opacity: .45; }
@media (max-width: 599px) {
  .hero h1 { font-size: clamp(1.8rem, 7.5vw, 2.8rem); }
  .review-scroll { padding-inline: .8rem; }
}