/* Academia de Música Sebastião e Melo — Static Site
   Simple, accessible, responsive layout using pure CSS (no JS).
*/
:root{
  --brand:#1560c9;
  --brand-dark:#075395;
  --brand-light:#add8fe;
  --accent:#fbbf24;
  --text:#111827;
  --muted:#6b7280;
  --bg:#ffffff;
  --max:1100px;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  line-height:1.6;
  background:#fff;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:0 auto;padding:0 1.2rem}
header{
  position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:10
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0;}
.brand{font-weight:800;font-size:1.1rem;color:var(--brand-dark)}
.menu{display:flex;gap:1rem;flex-wrap:wrap}
.menu a{padding:.5rem .7rem;border-radius:10px}
.menu a.cta{background:var(--brand);color:#fff;font-weight:700}
.menu a.cta:hover{filter:brightness(.95)}

.btns{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1rem}
.btn{display:inline-block;padding:.8rem 1rem;border-radius:10px;font-weight:700}
.btn.primary{background:var(--brand);color:#fff}
.btn.secondary{border:2px solid var(--brand);color:var(--brand)}
.section{padding:3rem 0}
.section.alt{background:#f7f7f8}
.section h2{font-size:clamp(24px,3.5vw,34px);margin-top:0}
.grid{display:grid;gap:1.4rem}
.grid.cols-2{grid-template-columns:1fr}
.card{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:1rem;border-color: var(--brand); /* uses your blue brand color */}
.badge{display:inline-block;background:var(--accent);color:#111827;font-weight:700;padding:.25rem .6rem;border-radius:999px;font-size:.85rem}
.list{padding-left:1.1rem}
.footer{background:var(--brand-dark);color:#fff}
.footer a{color:#fff;text-decoration:underline}
.footer .cols{display:grid;gap:1rem;grid-template-columns:1fr}
.copy{text-align:center;opacity:.9;margin-top:1rem;font-size:.9rem}

.logo {vertical-align: middle; 
    margin: auto;
    display: flex;
  justify-content: center;  /* horizontal centering */
  align-items: center;      /* vertical centering */
  }


/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

/* responsive */
@media (min-width: 820px){
  .grid.cols-2{grid-template-columns:repeat(2,1fr)}
  .nav .menu{gap:1.2rem}
}

/* Base header styles */
.container.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu {
  display: flex;
  gap: 1rem;
}

/* Hide hamburger by default */
.menu-toggle {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
}

/* --- Responsive adjustments --- */
@media (max-width: 768px) {
  .menu {
    display: none;                /* hidden by default */
    flex-direction: column;       /* vertical list */
    position: absolute;
    top: 80px;                    /* adjust below header */
    right: 1rem;
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }

  .menu.show {
    display: flex;                /* visible when toggled */
  }

  .menu-toggle {
    display: block;               /* show hamburger */
  }
}


.hero-banner {
  background-color: var(--brand-light); /* your desired banner color */
  color: black;              /* make text readable on banner */
  padding: 4rem 0;           /* vertical space for text */
  object-position: center
}

.hero-banner .container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.2rem;
}

.slideshow-container {
  width: 100%;
  height: 500px;       /* fixed height */
  position: relative;
  overflow: hidden;
  object-position: center
}

.mySlides {
  display: none;          /* hide initially */
  width: 100%;
  height: 100%;
  position: absolute;     /* stack slides */
  top: 0;
  left: 0;
}

.mySlides img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* scale & crop */
  object-position: center;    /* center crop */
  display: block;
}

/* Navigation arrows */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 2rem;
  padding: 0.5rem;
  cursor: pointer;
  user-select: none;
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  z-index: 2;
}
.prev { left: 20px; }
.next { right: 20px; }

/* Fade animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}
@keyframes fade {
  from {opacity: 0.4;}
  to {opacity: 1;}
}

/* Desktop & larger screens: align vertically */
#oferta .grid.cols-2 {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  align-items: center;      /* vertical centering */
}

/* Each column responsive */
#oferta .grid.cols-2 > div {
  flex: 1 1 45%;
  display: flex;            /* allow vertical centering in column */
  flex-direction: column;
  justify-content: center;  /* center content vertically */
}

/* Center the card horizontally in its column */
#oferta .grid.cols-2 > div:last-child .card {
  margin: 0 auto;
}

/* Mobile screens: stack columns */
@media (max-width: 768px) {
  #oferta .grid.cols-2 {
    flex-direction: column;     /* stack columns */
    align-items: stretch;       /* full width */
  }

  #oferta .grid.cols-2 > div {
    flex: 1 1 100%;
    justify-content: flex-start; /* top-align content */
    margin-bottom: 1.5rem;      /* spacing between stacked sections */
  }

  #oferta .grid.cols-2 > div:last-child .card {
    margin: 0;                  /* remove horizontal centering */
  }
}

.banner-logo {
  position: absolute;       
}

.banner-logo img {
  height: 60px;          /* adjust size as needed */
  width: auto;           /* keep aspect ratio */
  display: block;
}