/* Overrides para mejorar navbar y carrusel responsive */
:root{--nav-bg-solid:var(--primary-purple);--nav-bg-scrolled:rgba(75,0,130,0.75)}

/* Navbar: sólido al inicio, semitransparente al scrollear */
.main-navbar{background-color:var(--nav-bg-solid);transition:background-color .35s ease,box-shadow .35s ease;height:var(--navbar-height);backdrop-filter:none}
.main-navbar.navbar-scrolled{background-color:var(--nav-bg-scrolled);box-shadow:0 6px 24px rgba(0,0,0,.12)}

/* Mejor contraste para enlaces del navbar */
.nav-links a{color:var(--white) !important}

/* Responsive: mejora del menú hamburguesa */
.nav-toggle{display:none}
@media (max-width:768px){
  .nav-toggle{display:block}
  .nav-links{background:transparent}
  .nav-links.nav-active{background-color:var(--nav-bg-solid);padding-bottom:1rem}
  .nav-links a{color:var(--white);padding:.8rem 1.2rem}
}

/* Flyers: usar aspect-ratio para mantener proporciones y adaptarse */
.flyer-card{width:260px;flex-shrink:0}
.flyer-image{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;object-position:center;background-color:#fff;border-bottom:4px solid var(--accent-purple);display:block}

@media (min-width:1200px){
  .flyer-card{width:300px}
}
@media (min-width:992px) and (max-width:1199px){
  .flyer-card{width:260px}
}
@media (max-width:768px){
  .flyer-card{width:75vw;max-width:340px}
  .class-flyer-grid{padding-inline:calc(50% - 40vw)}
}

/* Mejoras de accesibilidad y visual */
.carousel-arrow{background-color:rgba(0,0,0,.45)}
.carousel-arrow:focus{outline:3px solid rgba(123,31,162,.25)}
.nav-toggle:focus{outline:3px solid rgba(123,31,162,.25)}

/* Evitar que el hero se cubra por la navbar en dispositivos pequeños */
@media (max-width:768px){
  .hero{padding-top:var(--navbar-height-mobile-closed)}
}