/* ==== HERO: base optimizada y lazy background ==== */
.hero-section{
    /* Una sola capa de background: overlay + imagen -> menos repintados */
    --overlay: linear-gradient(0deg, rgba(0,0,0,.60), rgba(0,0,0,.50));
    --bg-image: none;                    /* se rellena vía JS (lazy) */
    background-image: var(--overlay), var(--bg-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #111;
    color: #F8F1E7;                      /* texto crema por defecto */
}

/* Variantes: puedes ajustar solo el overlay */
.hero-home{   --overlay: linear-gradient(0deg, rgba(0,0,0,.70), rgba(0,0,0,.55)); }
.hero-agenda{ --overlay: linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,.45)); }

/* Carga diferida y transición suave */
.bg-lazy{ filter: saturate(.9) contrast(.95); }
.bg-loaded{ transition: filter .4s ease, opacity .4s ease; filter: none; }

/* Contenido del hero (igual que antes) */
.hero-content{
    display:inline-block; background:rgba(0,0,0,.35); backdrop-filter: blur(2px);
    padding:1rem 1.25rem; border-radius:.5rem; color:#F8F1E7;
}
.hero-home .btn, .hero-agenda .btn{ box-shadow:0 2px 8px rgba(0,0,0,.5); }
.hero-home h1, .hero-home p, .hero-agenda h1, .hero-agenda p{ 
    color: inherit !important; text-shadow:0 3px 12px rgba(0,0,0,.7); 
}

/* Accesibilidad/ahorro de datos: evita imágenes pesadas */
@media (prefers-reduced-data: reduce){
    .hero-section{ --bg-image: none !important; }
}

/* ===== Scroll por secciones (ligero) ===== */
.snap-container{
    scroll-snap-type: y proximity; scroll-behavior:smooth;
    scroll-padding-top:64px; scroll-padding-bottom:56px;
    height:100vh; overflow-y:auto;
}
.snap-section{
    min-height:100%;
    scroll-snap-align:start; scroll-snap-stop:normal;
    content-visibility:auto; contain-intrinsic-size: 1000px 800px;
}

/* Móviles */
@media (max-width:576px){ .hero-home{ background-position:center top; } }
@media (max-width:768px){ .snap-container{ scroll-snap-type:none; } }