/* Shared public layout: keep intrinsic content and motion inside the viewport. */
html { scroll-padding-top: 6rem; }
#navbar { top: 0; left: 0; }
#mobile-menu { max-height: calc(100svh - 5rem); overflow-y: auto; overscroll-behavior: contain; }
section .grid > *, footer .grid > *, section .flex-1 { min-width: 0; }
section .flex-col > * { max-width: 100%; }
section :is(h1, h2, h3, h4, p), footer :is(p, a) { overflow-wrap: anywhere; }
#modal-inscripcion-panel { width: 100%; max-width: 56rem; }
#modal-inscripcion-panel a > div:last-child { min-width: 0; overflow-wrap: anywhere; }

/* AOS lateral transforms change the scrollable width before the first scroll. */
@media (max-width: 1279px), (prefers-reduced-motion: reduce) {
    [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (max-width: 639px) {
    section > [class*="max-w-"] { width: 100%; }
    section h1[class] { font-size: clamp(2rem, 8.5vw, 3rem); line-height: 1.12; }
    section h2[class] { font-size: clamp(1.6rem, 7vw, 2rem); line-height: 1.2; }
    section h3.text-3xl { font-size: 1.5rem; line-height: 1.25; }
    section .p-8, section .p-7 { padding: 1.25rem; }
    section .gap-16 { gap: 2.5rem; }
    section.py-24, section.py-20 { padding-top: 3rem; padding-bottom: 3rem; }
    section.pt-36 { padding-top: 7.5rem; padding-bottom: 3rem; }
    #modal-inscripcion-panel a { padding: 1rem; }
    #modal-inscripcion-panel a > div:first-child { width: 2.75rem; height: 2.75rem; }
    #modal-inscripcion-panel a > div:last-child { margin-left: 0.75rem; }
    #modal-inscripcion-panel h4 { font-size: 1rem; }
    #modal-rol-title { font-size: 1.5rem; padding-right: 1rem; }
    input, select, textarea { font-size: 16px; max-width: 100%; }
}