.full-bleed { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }

/* Base: ocupar alto de la ventana y dejar footer pegado abajo en páginas normales */
html { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
footer { margin-top: auto; }

/* One-page: bloquear scroll del body cuando exista snap-container */
body:has(.snap-container) { overflow: hidden; }

/* Navbar y footer fijos (solo se aplicarán si no son sobreescritos más abajo) */
.navbar { z-index: 1020; }
.fixed-top { position: fixed; top: 0; left: 0; right: 0; }
.fixed-bottom { position: fixed; bottom: 0; left: 0; right: 0; }

/* Alturas dinámicas de cabecera y pie */
:root { --navbar-h: 64px; --footer-h: 56px; }

/* Contenedor con scroll entre header y footer (modo one-page) */
.snap-container {
    position: fixed;
    top: var(--navbar-h);
    bottom: var(--footer-h);
    left: 0;
    right: 0;
    overflow-y: auto;
    /* Antes: scroll-snap-type: y mandatory; */
    scroll-snap-type: y proximity; /* permite detenerse entre secciones */
}

/* Secciones a pantalla completa y encaje */
.snap-section { min-height: 100vh; scroll-snap-align: start; display: flex; align-items: center; }
.snap-section .container, .snap-section .container-fluid { padding-top: 2rem; padding-bottom: 2rem; }

/* En páginas normales (sin snap-container), NO fijar navbar ni footer */
body:not(:has(.snap-container)) .fixed-top { position: static; top: auto; left: auto; right: auto; }
body:not(:has(.snap-container)) .fixed-bottom { position: static; bottom: auto; left: auto; right: auto; }

html { scroll-behavior: smooth; }

/* Layout fluido: medios responsivos */
img, video, iframe, canvas, svg { max-width: 100%; height: auto; }

/* Cuando se usa snap-container, que el main no añada padding lateral */
body:has(.snap-container) main.container-fluid { padding-left: 0 !important; padding-right: 0 !important; }

/* Centrar el menú y los iconos dentro de cada item */
.navbar .navbar-collapse { justify-content: center; }            /* centra el bloque del menú */
.navbar-nav .nav-link { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.navbar-nav .nav-link .bi { font-size: 1.1rem; line-height: 1; } /* tamaño de icono */

/* Fondos de héroe */
.hero-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Estado base antes de cargar */
.bg-lazy {
    background-color: #e9ecef;
}
/* Opcional: si quieres un fade-in solo del fondo, usa un pseudo-elemento en lugar de opacidad del section */

/* Asegura altura cómoda en pantallas altas si no la controlas en otro lado */
.hero-section .container-fluid {
    padding-top: 2rem;
    padding-bottom: 2rem;
}