:root{
  --header-h:72px;
  --header-h-scrolled:56px;
  --header-bg: rgba(0,0,0,0.22);
  --header-bg-scrolled: rgba(0,0,0,0.38);
  --text-on-video:#fff;
  --accent:#25D366;
  --rose: 182, 87, 168; /* purplish rose base */
  --rose-glass: rgba(var(--rose), 0.18);
  --rose-glass-strong: rgba(var(--rose), 0.32);
  --cell-pink: rgba(233, 30, 99, 0.8);
  --cell-purple: rgba(111, 31, 212, 0.82);
}

html{ scroll-behavior:smooth; scroll-padding-top: var(--header-h-current, var(--header-h)); }
body{ padding-top: var(--header-h-current, var(--header-h)); }
.page-section{ scroll-snap-align: start; scroll-snap-stop: always; min-height: 100svh; }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:20;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 .75rem; color:var(--text-on-video);
  background:var(--header-bg); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.15);
  transition:height .18s ease, background .18s ease, border-color .18s ease;
}
.site-header.scrolled{
  height:var(--header-h-scrolled);
  background:var(--header-bg-scrolled);
  border-bottom-color: rgba(255,255,255,.25);
}

.brand, .brand:link, .brand:visited{ color:var(--text-on-video); text-decoration:none; font-weight:700; letter-spacing:.3px }
.site-header .brand{ display:flex; align-items:center }
.site-header .brand-logo{ height:36px; width:auto; display:block }
.site-header.scrolled .brand-logo{ height:30px }
.left-group{display:flex;align-items:center;gap:.5rem}
.nav-desktop{display:none; align-items:center; gap:1rem; margin-left:.5rem}
.nav-desktop a{ color:#fff; text-decoration:none; font-weight:500; opacity:.9}
.nav-desktop a:hover, .nav-desktop a.active{ opacity:1; text-decoration:underline; text-underline-offset:4px }

.hamburger{display:inline-flex;flex-direction:column;justify-content:center;width:44px;height:44px;gap:4px;border:0;background:transparent;color:inherit;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px}
.hamburger:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}

.menu-panel{
  position:fixed; inset:0; z-index:19; display:grid; place-items:center;
  background:rgba(0,0,0,.7); opacity:0; transform:scale(.98);
  pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.menu-panel.open{opacity:1; pointer-events:auto; transform:none}
.menu{list-style:none;margin:0;padding:0;display:grid;gap:1rem;text-align:center}
.menu a{color:#fff;text-decoration:none;font-size:1.25rem;font-weight:600}

.socials{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.socials a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12)}
.socials a:hover{background:rgba(255,255,255,.22)}
.socials svg{width:18px;height:18px;fill:#fff}

/* WhatsApp CTA pill */
.socials .whatsapp-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background: var(--accent); color:#fff; font-weight:600;
  height:36px; padding:0 .75rem; border-radius:9999px;
  width:auto;
}
.socials .whatsapp-cta:hover{ filter:brightness(0.95) }
.socials .whatsapp-cta svg{ width:18px;height:18px;fill:#fff }

/* On narrow screens, show icon-only to save space */
@media (max-width: 899px){
  .socials .whatsapp-cta span{ display:none }
  .socials .whatsapp-cta{ width:36px; padding:0; border-radius:50%; justify-content:center; gap:0 }
  .socials .whatsapp-cta svg{ margin:0 }
}

@media (min-width: 900px){
  .hamburger{display:none}
  .menu-panel{display:none}
  .nav-desktop{display:flex}
}

@media (prefers-reduced-motion: reduce){
  .site-header, .menu-panel{transition:none}
}

/* Ensure sections align below header when linked */
section[id]{ scroll-margin-top: var(--header-h) }

/* Responsive sizing to keep images readable on mobile */
img.logo{ width: clamp(180px, 45vw, 420px); height: auto; display:block }
img.schedule{ width: clamp(300px, 92vw, 960px); height: auto; display:block; 
  /* avoid touching bottom and fit within viewport on large screens */
  max-height: calc(100svh - var(--header-h) - 6vh);
  margin-bottom: 2vh;
}

/* Give the home section some breathing room at the bottom on big displays */
section#home{ padding-bottom: 2vh; padding-top: calc(var(--header-h) + 2vh) }

/* Fixed background video layer */
/* Fixed background layers: image placeholder then video */
.bg-image{ position: fixed; top:0; left:0; width:100%; height:100%; background-image: url('resources/static.png'); background-size: cover; background-position: center; z-index:-2; pointer-events:none }
.bg-video{ position: fixed; top:0; left:0; width:100%; height:100%; object-fit: cover; z-index:-1; pointer-events:none; opacity:0; transition: opacity .35s ease }
html.bg-video-ready .bg-video{ opacity: 1 }

/* Elegant signature above schedule */
.signature{
  font-family: "Great Vibes", "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(48px, 5vw, 64px);
  color:#fff; text-align:center;
  margin: 0 0 30px; line-height:1.1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Schedule grid styles */
.schedule-scroll{ max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
.schedule-card{
  width: clamp(340px, 92vw, 960px);
  margin: 0 auto;
  background: var(--rose-glass);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.2);
  backdrop-filter: blur(8px);
}
.schedule-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px;
}
.day-col{ display:grid; grid-template-rows: auto repeat(4, auto); gap: 8px; background: rgba(255,255,255,0.18); border-radius: 12px; padding: 8px }
.schedule-head{ background: var(--rose-glass-strong); color:#fff; text-align:center; font-weight:700; padding:10px 12px; border-radius: 8px }
.schedule-cell{ display:flex; flex-direction:column; min-height:112px; }
.schedule-cell .time-badge{ align-self:stretch; margin:6px 8px 8px; padding:4px 6px; text-align:center; border-radius:4px; background: rgba(255,255,255,0.9); color:#2c2c2c; font-weight:600 }
.schedule-cell .class-box{ margin:0 8px 8px; padding:16px 12px; border-radius:4px; text-align:center; font-weight:700; line-height:1.25 }
.schedule-cell.theme-pink .class-box{ background: var(--cell-pink) }
.schedule-cell.theme-purple .class-box{ background: var(--cell-purple) }

@media (max-width: 800px){ .schedule-grid{ grid-template-columns: 1fr } }

/* Vem Dançar section */
.section-vemdancar{
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
}
.section-vemdancar::before{
  content:""; position:absolute; inset:0; z-index:0; background: rgba(0,0,0,0.45);
}
.section-vemdancar > *{ position: relative; z-index:1 }

.vd-container{ width: min(1100px, 92vw); margin: 0 auto; padding: 24px 0 }
.vd-intro{ color:#fff; text-align:center; font-size: clamp(16px, 2.4vw, 20px); line-height:1.6; margin-bottom: 18px; 
  background: transparent; padding: 0; border-radius: 0; backdrop-filter: none; text-shadow: 0 2px 8px rgba(0,0,0,.4); }

.vd-gallery{ display:grid; gap: 12px; grid-template-columns: repeat(5, 1fr); }
.vd-card{ position:relative; overflow:hidden; border-radius: 8px; padding:0; border:0; cursor:pointer; background: rgba(255,255,255,0.1); }
.vd-card img{ display:block; width:100%; height: 220px; object-fit: cover; filter: saturate(0.95) contrast(1.02); transition: transform .25s ease }
.vd-card .label{ display:none }
.vd-card:hover img{ transform: scale(1.05) }

@media (max-width: 1024px){ .vd-gallery{ grid-template-columns: repeat(3, 1fr) } .vd-card img{ height: 200px } }
@media (max-width: 640px){ .vd-gallery{ grid-template-columns: repeat(2, 1fr) } .vd-card img{ height: 180px } }

/* Video modal */
.vd-modal{ position: fixed; inset:0; z-index: 40; display:grid; place-items:center; opacity:0; pointer-events:none; transition: opacity .18s ease }
.vd-modal.open{ opacity:1; pointer-events:auto }
.vd-modal .overlay{ position:absolute; inset:0; background: rgba(0,0,0,0.65) }
.vd-modal .dialog{ position:relative; width:min(960px, 92vw); background: rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.2); border-radius: 10px; 
  transform: scale(0.98); transition: transform .2s ease; backdrop-filter: blur(8px); }
.vd-modal.open .dialog{ transform: scale(1) }
.vd-modal .close{ position:absolute; top:8px; right:12px; width:36px; height:36px; border-radius:50%; border:0; cursor:pointer; background: rgba(0,0,0,0.5); color:#fff; font-size:22px }
.vd-modal .frame-wrap{ position:relative; width:100%; aspect-ratio: 16 / 9; }
.vd-modal .video-frame{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* Sobre section */
.section-sobre{
  position: relative;
  display: grid;
  justify-items: end; /* move content to the right */
  align-items: center; /* center vertically */
  padding-right: clamp(16px, 4vw, 56px);
}
.section-sobre::before{ content:""; position:absolute; inset:0; z-index:0; background: rgba(0,0,0,0.45) }
.section-sobre{ justify-items: start }
.section-sobre > *{ position: relative; z-index:1 }

.sobre-card{ width: min(1200px, 96vw); margin: 0; color:#fff; text-align:left; line-height:1.7; 
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; padding: 24px; backdrop-filter: blur(6px);
  display:grid; grid-template-columns: 70% 1fr; gap:16px; align-items:center; }
.sobre-card h2{ font-size: clamp(28px, 4.5vw, 40px); margin-bottom: 8px; font-weight: 800 }
.sobre-card p{ font-size: clamp(15px, 2.3vw, 18px) }
.sobre-photo{ width:100%; height: auto; max-height: 80vh; object-fit: contain; border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.35) }
@media (max-width: 700px){ .sobre-card{ grid-template-columns: 1fr } }