/* ============================================================
   Projeto Mais Cantoria — folha de estilos
   Paleta: vinho profundo (robes de coral) + creme de partitura
   Tipografia: Fraunces (display, serifada, calorosa) + Work Sans
   ============================================================ */

:root{
  --bg:         #040724;      /* fundo principal escuro (navy quase preto) */
  --bg-alt:     #282B4F;      /* variação de seção (azul-arroxeado) */
  --paper:      #D9CFE8;      /* faixa lilás de destaque (sobre foto) */
  --paper-ink:  #040724;      /* texto sobre a faixa clara */
  --ink:        #E9E9E9;      /* texto claro padrão sobre fundo escuro */
  --muted:      rgba(233,233,233,0.82);
  --wine:       #6B0F90;      /* roxo do botão CTA (fim do degradê) */
  --wine-dark:  #4F0B6B;
  --gold:       #C30083;      /* magenta/rosa de destaque (início do degradê, CTA) */
  --accent:     #FF00AB;      /* rosa do link ativo no menu */
  --skyblue:    #B6BEE7;      /* lilás-claro dos rótulos de seção */
  --navy:       #040724;      /* header e overlay do hero */
  --navy-deep:  #040724;
  --navy-darker:#020310;      /* tom mais escuro para separar seções vizinhas */
  --whatsapp:   #25D366;
  --line:       rgba(255,255,255,0.12);
  --max-w:      1440px;
  --radius:     2px;
  --font-body:      "Imprima", sans-serif;
  --font-display:   "Expletus Sans", sans-serif;
  --font-heading:   "Lato", sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.15;
  margin:0 0 0.5em;
  color:var(--ink);
}

p{ max-width:62ch; margin:0 0 1.1em; color:var(--muted); font-family:var(--font-body); }
a{ color:var(--gold); }
img{ max-width:100%; display:block; }

h2{ font-size:2.6rem; }
h3{ font-size:1.6rem; }
.eyebrow + h2{ text-transform:uppercase; }
@media (max-width:600px){
  h2{ font-size:1.9rem; }
}

/* Musical staff-line motif used as a section divider */
.staff-rule{
  width:100%;
  height:14px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--line) 0, var(--line) 1px,
    transparent 1px, transparent 4px
  );
  opacity:0.6;
  margin: 0 0 3rem;
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--wine); color:#fff; padding:.6em 1em; z-index:200;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.site-header__inner{
  max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.1rem 1.5rem;
}
.brand{
  display:flex; align-items:center; gap:.65rem;
  text-decoration:none;
}
.brand img{ height:85px; width:auto; display:block; }
.brand__text{
  display:flex; flex-direction:column; line-height:1.15;
}
.brand__name{
  font-family:var(--font-display);
  font-weight:700; font-size:1.2rem; letter-spacing:.02em;
  color:#fff;
}
.brand__tagline{
  font-size:.62rem; letter-spacing:.08em;
  color:rgba(255,255,255,0.55); text-transform:uppercase;
}

.nav-toggle{
  display:none;
  background:none; border:none;
  padding:.25rem; cursor:pointer; font-size:2rem; line-height:1; color:var(--whatsapp);
}

.main-nav ul{
  display:flex; gap:2.25rem; list-style:none; margin:0; padding:0;
}
.main-nav a{
  text-decoration:none; color:rgba(255,255,255,0.85);
  font-family:"Inter", sans-serif;
  font-size:.875rem; letter-spacing:normal; text-transform:uppercase; font-weight:400;
  padding-bottom:4px; border-bottom:2px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.main-nav a:hover,
.main-nav a[aria-current="page"]{
  color:var(--accent); border-color:var(--accent);
}

@media (max-width:760px){
  .brand img{ height:52px; }

  .nav-toggle{ display:block; position:relative; z-index:101; }

  .main-nav{
    display:none;
    position:fixed; inset:0; z-index:90;
    padding-top:6.5rem;
    background:rgba(4,7,36,0.8);
    -webkit-backdrop-filter:blur(24px) saturate(140%);
    backdrop-filter:blur(24px) saturate(140%);
  }
  .main-nav.is-open{
    display:flex; flex-direction:column; justify-content:space-between;
    height:100vh; height:100dvh; overflow-y:auto;
  }
  .main-nav ul{
    flex-direction:column; gap:0; margin:0; padding:1rem 2rem;
  }
  .main-nav li{ border-bottom:1px solid rgba(255,255,255,0.1); }
  .main-nav a{
    display:block; padding:1.1rem 0; font-size:1.1rem;
  }

  .main-nav__footer{
    padding:1.5rem 2rem 2.5rem; text-align:center;
    border-top:1px solid rgba(255,255,255,0.1);
  }
  .main-nav__footer .social-row{ justify-content:center; margin-top:0; margin-bottom:1.25rem; }
  .main-nav__copyright{
    font-family:var(--font-body); font-size:.82rem;
    color:rgba(233,233,233,0.55); margin:0;
  }
}

@media (min-width:761px){
  .main-nav__footer{ display:none; }
}

/* ---------- Hero (full-bleed photo background) ---------- */
.hero{
  position:relative;
  background-size:cover; background-position:center;
  isolation:isolate;
  min-height:100vh; display:flex; align-items:center;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--navy-deep) 15%, rgba(4,7,36,0.78) 45%, rgba(4,7,36,0.45) 75%);
  z-index:-1;
}
.hero__inner{
  width:100%;
  max-width:var(--max-w); margin:0 auto;
  padding: 5rem 1.5rem 5.5rem;
}
.hero__content{ max-width:640px; }
.hero__eyebrow{
  font-family:var(--font-display); font-weight:500; text-transform:uppercase;
  letter-spacing:normal;
  color:var(--ink); font-size:1.5rem; margin-bottom:.25rem; display:block;
}
.hero h1{ font-family:var(--font-heading); font-weight:500; font-size:clamp(2.2rem, 4.5vw, 3.5rem); color:var(--ink); margin-bottom:.5rem; }
.hero h1.hero__title--jumbo{ font-weight:700; font-size:clamp(3.5rem, 9vw, 6.5rem); line-height:1; margin-bottom:.5rem; }
.hero__eyebrow--big{ font-size:1.75rem; }
.hero .lede{
  font-family:var(--font-heading); font-size:1.3rem; font-weight:400; color:#fff; max-width:44ch;
}
.hero p{ font-family:var(--font-body); font-size:1.02rem; color:#fff; }

@media (max-width:820px){
  .hero__inner{ padding: 3.5rem 1.5rem 3.5rem; max-width:100%; }
}

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-float{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:150;
  display:flex; align-items:center; gap:.55rem;
  background:var(--whatsapp); color:#fff !important; text-decoration:none;
  padding:.8rem 1.15rem; border-radius:999px;
  font-family:var(--font-body); font-weight:600; font-size:.92rem;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  transition: transform .15s ease;
}
.whatsapp-float:hover{ transform:translateY(-2px); }
.whatsapp-float svg{ width:20px; height:20px; flex:none; }
@media (max-width:600px){
  .whatsapp-float span{ display:none; }
  .whatsapp-float{ padding:.85rem; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  background:linear-gradient(178deg, var(--gold) 0%, var(--wine) 72%);
  color:#fff !important;
  text-decoration:none;
  padding:.85rem 1.6rem;
  border-radius:var(--radius);
  font-family:var(--font-heading); font-weight:700; font-size:1.05rem;
  letter-spacing:normal;
  transition:filter .15s ease, transform .15s ease;
}
.btn:hover{ filter:brightness(1.1); }
.btn--ghost{
  background:transparent; color:var(--ink) !important;
  border:1.5px solid var(--ink);
}
.btn--ghost:hover{ background:var(--ink); color:var(--navy-deep) !important; }

/* ---------- Sections ---------- */
.section{
  max-width:var(--max-w); margin:0 auto;
  padding: 4rem 1.5rem;
}
.section--paper{
  background-color:var(--paper);
  background-size:cover; background-position:center;
  position:relative;
}
.section--paper::before{
  content:""; position:absolute; inset:0;
  background:var(--paper); opacity:0.9;
}
.section--paper > .section-inner{ position:relative; z-index:1; }
.section--paper > .section-inner{ max-width:var(--max-w); margin:0 auto; padding:4rem 1.5rem; }
.section--paper h1, .section--paper h2, .section--paper h3, .section--paper h4{ color:var(--paper-ink); font-weight:500; font-size:1.9rem; }
.section--paper p{ color:rgba(4,7,36,0.78); }
.section--paper .eyebrow{ color:var(--wine); }

.eyebrow{
  font-family:var(--font-body); font-weight:500; text-transform:uppercase; letter-spacing:normal;
  color:var(--skyblue); display:block; margin-bottom:.5rem; font-size:1.35rem;
}

/* ---------- Full-bleed photo section (dark overlay) ---------- */
.section--photo{
  max-width:100%; margin:0; padding:0;
  position:relative;
  background-size:cover; background-position:center;
  isolation:isolate;
}
.section--photo::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,15,36,0.88), rgba(8,15,36,0.94));
  z-index:-1;
}
.section--photo__inner{
  max-width:var(--max-w); margin:0 auto; padding:3.5rem 1.5rem;
}
.heading-photo{
  font-family:var(--font-body); font-weight:500; text-transform:uppercase;
  letter-spacing:normal; font-size:1.5rem; color:var(--skyblue); margin-bottom:.75rem;
}

.section--stars{
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:var(--navy-deep);
}

.section--darkblue{
  background-color:var(--navy-darker);
}

.two-col{
  display:grid; grid-template-columns: 1fr 1fr; gap:2.5rem; align-items:center;
}
.two-col.reverse .col-media{ order:2; }
.two-col--image-left{ align-items:center; }
.two-col--image-right{ align-items:center; }
.col-media--tall{ aspect-ratio: 4/5; overflow:hidden; border-radius:var(--radius); }
.col-media--tall img{ width:100%; height:100%; object-fit:cover; border-radius:0; }
.col-media--wide{ aspect-ratio: 3/2; overflow:hidden; border-radius:var(--radius); }
.col-media--wide img{ width:100%; height:100%; object-fit:cover; border-radius:0; }
@media (max-width:820px){
  .two-col{ grid-template-columns:1fr; }
  .two-col.reverse .col-media{ order:0; }
}
.col-media img{ border-radius:var(--radius); }

/* ---------- Lists ---------- */
.benefits-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.9rem;
}
.benefits-list li{
  padding-left:1.6rem; position:relative;
  border-bottom:1px solid var(--line); padding-bottom:.9rem;
}
.benefits-list li:last-child{ border-bottom:none; }
.benefits-list li::before{
  content:"♪";
  position:absolute; left:0; top:0;
  color:var(--gold); font-size:1.1rem;
}

/* ---------- Cards: regentes ---------- */
.people{
  display:grid; grid-template-columns:repeat(2,1fr); gap:2rem;
}
@media (max-width:620px){ .people{ grid-template-columns:1fr; } }

/* ---------- Single centered regente (home page) ---------- */
.regente-section{ text-align:center; }
.regente-section h2{ margin-bottom:2rem; }
.regente-single{
  display:inline-flex; flex-direction:column; align-items:center; gap:1.25rem;
}
.regente-single__photo{
  display:block; width:280px; max-width:80vw; aspect-ratio:1/1; overflow:hidden;
  border-radius:4px;
}
.regente-single__photo img{ width:100%; height:100%; object-fit:cover; }
.regente-single h3{ margin:0; font-size:1.5rem; font-weight:500; }
.btn-outline{
  display:inline-block; background:#fff; color:var(--navy-deep) !important;
  text-decoration:none; font-family:var(--font-heading); font-weight:700; letter-spacing:normal; text-transform:uppercase;
  font-size:.9rem; padding:.85rem 2rem;
}
.btn-outline:hover{ background:#e9e9f2; }

.person-card{
  background:rgba(255,255,255,0.04); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
}
.person-card__photo{ aspect-ratio:3/4; overflow:hidden; }
.person-card__photo img{ width:100%; height:100%; object-fit:cover; }
.person-card__body{ padding:1.25rem 1.4rem 1.5rem; }
.person-card__body h3{ font-size:1.5rem; font-weight:500; margin-bottom:.2rem; }
.person-card__role{ color:var(--skyblue); font-style:normal; font-weight:300; font-family:var(--font-display); margin-bottom:.9rem; display:block; font-size:1.05rem; }

/* ---------- Numbered format list (presencial/hibrida/remota) ---------- */
.formats{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.25rem;
  counter-reset: formats;
}
.formats li{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:baseline;
}
.formats li::before{
  counter-increment: formats;
  content: counter(formats);
  font-family:"Inter", sans-serif; font-size:1.4rem; color:var(--gold);
  border:1.5px solid var(--gold); border-radius:50%;
  width:2.1rem; height:2.1rem; display:flex; align-items:center; justify-content:center;
}
.formats strong{ color:var(--gold); }

/* ---------- Bio page ---------- */
.bio{
  display:grid; grid-template-columns: 1fr 1fr; gap:2.5rem;
}
@media (max-width:760px){ .bio{ grid-template-columns:1fr; } }

/* ---------- Curriculo hero variant (with circular portrait) ---------- */
.hero--curriculo{ min-height:420px; display:flex; align-items:center; }
.hero--short{ min-height:50vh; }
.hero__inner--curriculo{ padding-top:3rem; padding-bottom:3rem; }
.hero__portrait{
  position:absolute; right:6%; top:50%; transform:translateY(-50%);
  width:280px; height:280px; border-radius:50%; overflow:hidden;
  border:4px solid rgba(255,255,255,0.15); box-shadow:0 20px 50px rgba(0,0,0,0.4);
}
.hero__portrait img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){ .hero__portrait{ display:none; } }

/* ---------- Video grid ---------- */
.video-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}
@media (max-width:900px){ .video-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .video-grid{ grid-template-columns:1fr; } }
.video-embed{
  position:relative; padding-top:56.25%; border-radius:var(--radius); overflow:hidden;
  background:rgba(255,255,255,0.04);
}
.video-embed iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* ---------- Contact / footer CTA ---------- */
.contact-block{
  text-align:center; padding: 3.5rem 1.5rem;
}
.contact-block h2{ font-size:2rem; text-transform:none; font-weight:700; }

/* ---------- Circular social icons ---------- */
.social-row{
  display:flex; justify-content:center; gap:1.25rem; margin-top:1.75rem; flex-wrap:wrap;
}
.social-row--hero{ justify-content:flex-start; margin-top:1.5rem; }
.social-icon{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.85);
  background:transparent; color:#fff !important;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.social-icon:hover{ background:#fff; color:var(--navy-deep) !important; transform:translateY(-2px); }
.social-icon svg{ width:22px; height:22px; }

/* ---------- Footer contact block (two columns) ---------- */
.footer-contact{
  display:grid; grid-template-columns:1fr 1fr;
  background:#000;
}
.footer-contact__text{
  padding:4rem 1.5rem; display:flex; flex-direction:column; justify-content:center;
  max-width:600px; margin:0 auto;
}
.footer-contact__text h2{ font-size:1.7rem; text-transform:none; font-weight:700; }
.footer-contact__text p{ margin-bottom:0; }
.footer-contact__photo{ min-height:420px; }
.footer-contact__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.social-row--footer{ margin-top:1.75rem; justify-content:flex-start; }
@media (max-width:900px){
  .footer-contact{ grid-template-columns:1fr; }
  .footer-contact__photo{ min-height:280px; order:-1; }
  .footer-contact__text{ text-align:center; align-items:center; }
  .social-row--footer{ justify-content:center; }
}

/* ---------- Contact page (hero with form) ---------- */
.contact-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:3.5rem; align-items:center;
}
.contact-info h1{ font-family:var(--font-body); font-weight:500; font-size:1.9rem; text-transform:none; color:var(--ink); }
.contact-info p{ font-family:var(--font-body); font-size:1.02rem; color:#fff; max-width:44ch; }
.contact-form{
  display:flex; flex-direction:column; gap:1rem;
}
.contact-form input,
.contact-form textarea{
  background:rgba(255,255,255,0.95); border:none; border-radius:8px;
  padding:.9rem 1.1rem; font-family:var(--font-body); font-size:1rem; color:#333;
}
.contact-form textarea{ min-height:180px; resize:vertical; }
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:rgba(51,51,51,0.6); }
.contact-form button{
  align-self:flex-start; background:#007AFF; color:#fff; border:none; border-radius:25px;
  padding:.85rem 2rem; font-family:var(--font-body); font-weight:600; font-size:1rem;
  cursor:pointer; transition:filter .15s ease;
}
.contact-form button:hover{ filter:brightness(1.1); }
@media (max-width:820px){
  .contact-grid{ grid-template-columns:1fr; gap:2.5rem; }
}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding: 2rem 1.5rem;
  text-align:center;
  background:#000;
  color: rgba(233,236,247,0.5);
  font-size:.88rem;
}

/* ---------- Focus states ---------- */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--wine); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}