/* ==========================================================================
   JR Estudio Musical - estilos compartilhados
   Reconstrucao do site que estava no GreatPages. Fonte: Roboto (400/700/900).
   ========================================================================== */

:root{
  --amarelo:#fff200;
  --amarelo-hover:#ffb81f;
  --preto:#000;
  --cinza-fundo:#fafafa;
  --texto-escuro:#242424;
  --largura:960px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-weight:400;
  color:var(--texto-escuro);
  background:#fff;
}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
a{color:inherit}

.container{
  width:100%;
  max-width:var(--largura);
  margin:0 auto;
  padding:0 20px;
}

/* ---------- botao CTA ---------- */
.botao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:272px;
  min-height:64px;
  padding:12px 24px;
  background:var(--amarelo);
  color:#000;
  font-size:18px;
  font-weight:400;
  line-height:1.3;
  text-align:center;
  text-decoration:none;
  border:0;
  border-radius:3px;
  cursor:pointer;
  animation:balanca 1.9s ease-in-out infinite;
}
.botao:hover,.botao:active,.botao:focus-visible{background:var(--amarelo-hover);color:#000}

@keyframes balanca{
  0%,58%,100%{transform:translateX(0)}
  62%{transform:translateX(-6px)}
  66%{transform:translateX(6px)}
  70%{transform:translateX(-5px)}
  74%{transform:translateX(5px)}
  78%{transform:translateX(-3px)}
  82%{transform:translateX(0)}
}
@media (prefers-reduced-motion:reduce){
  .botao{animation:none}
}

/* ---------- secao generica ---------- */
.secao{position:relative;padding:40px 0}
.secao--clara{background:var(--cinza-fundo)}
.secao--branca{background:#fff}
.secao--preta{background:var(--preto)}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background-color:#000;
  background-repeat:no-repeat;
  background-position:50% 0;
  background-size:cover;
  color:#fff;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.82);
}
.hero__inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  min-height:559px;
  padding-top:40px;
  padding-bottom:40px;
}
.hero__texto{max-width:480px}
.hero__logo{width:70px;height:auto;margin-bottom:28px}
.hero__eyebrow{
  font-size:18px;
  font-weight:900;
  line-height:1.5;
  max-width:302px;
  margin-bottom:16px;
}
.hero__titulo{
  font-size:48px;
  font-weight:900;
  line-height:1.2;
  max-width:434px;
  margin-bottom:24px;
}
.hero__descricao p{
  font-size:16px;
  line-height:1.8;
  max-width:374px;
}
.hero__descricao p + p{margin-top:10px}
.hero__seta{
  position:absolute;
  left:50%;
  bottom:10px;
  width:30px;
  transform:translateX(-50%);
}

/* ---------- numeros ---------- */
.numeros{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  text-align:center;
}
.numeros__valor{
  font-size:48px;
  font-weight:900;
  line-height:1.4;
  color:var(--texto-escuro);
}
.numeros__rotulo{
  font-size:20px;
  font-weight:900;
  line-height:1.4;
  color:var(--texto-escuro);
  max-width:230px;
  margin:0 auto;
}

/* ---------- video (facade do YouTube) ---------- */
.video{
  position:relative;
  width:100%;
  max-width:574px;
  margin:0 auto;
  aspect-ratio:16/9;
  background:#000 center/cover no-repeat;
  border:0;
  padding:0;
  cursor:pointer;
  overflow:hidden;
}
.video::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:68px;height:48px;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.75);
  border-radius:12px;
  transition:background .2s;
}
.video::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  z-index:2;
  width:0;height:0;
  transform:translate(-40%,-50%);
  border-style:solid;
  border-width:11px 0 11px 19px;
  border-color:transparent transparent transparent #fff;
}
.video:hover::after{background:#ff0000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video.is-ativo::before,.video.is-ativo::after{display:none}

/* ---------- carrossel ---------- */
.carrossel{position:relative;max-width:567px;margin:0 auto}
.carrossel__trilho{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.carrossel__trilho::-webkit-scrollbar{display:none}
.carrossel__item{
  flex:0 0 100%;
  scroll-snap-align:center;
  aspect-ratio:567/271;
  background:#000 center/cover no-repeat;
}
.carrossel__seta{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:26px;height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#000;
  border:1px solid #bfbfbf;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  z-index:2;
}
.carrossel__seta--ant{left:0}
.carrossel__seta--prox{right:0}
.carrossel__seta:hover{background:#f0f0f0}

/* ---------- rodape ---------- */
.rodape{
  background:var(--preto);
  color:#fff;
  text-align:center;
  padding:14px 20px;
  font-size:12px;
  line-height:18px;
}

/* ---------- CTA em faixa preta ---------- */
.faixa-cta{
  background:var(--preto);
  text-align:center;
  padding:12px 20px;
}

/* ---------- mobile ---------- */
@media (max-width:800px){
  .hero__inner{
    flex-direction:column;
    align-items:center;
    text-align:center;
    min-height:0;
    padding-top:24px;
    padding-bottom:32px;
    gap:24px;
  }
  .hero__texto{max-width:100%;display:flex;flex-direction:column;align-items:center}
  .hero__logo{width:98px;margin-bottom:16px}
  .hero__eyebrow{font-size:18px;max-width:320px;margin-bottom:14px}
  .hero__titulo{font-size:32px;max-width:320px;margin-bottom:18px}
  .hero__descricao p{font-size:16px;line-height:1.4;max-width:344px}
  .hero__seta{display:none}
  .botao{min-width:272px;max-width:100%}
  .numeros{grid-template-columns:1fr;gap:28px}
  .numeros__valor{font-size:40px}
  .secao{padding:32px 0}
}

/* ==========================================================================
   Tema escuro da home / gravacao (Sora + Roboto Condensed)
   ========================================================================== */
:root{
  --escuro:#0a0b0f;
  --card:#161821;
  --card-borda:#222531;
  --claro:#f7f7fa;
  --claro-2:#cfcfd1;
  --amarelo-2:#ffee00;
  --laranja:#ff9d00;
}

body.tema-escuro{
  font-family:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:var(--escuro);
  color:var(--claro);
}

/* ---------- cabecalho ---------- */
.topo{background:var(--escuro)}
.topo__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:90px;
}
.topo__logo{width:104px;height:auto}
.topo__nav{display:flex;align-items:center;gap:36px}
.topo__nav a{
  color:var(--claro);
  font-size:14px;
  text-decoration:none;
}
.topo__nav a:hover{color:var(--amarelo-2)}
.botao-linha{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:162px;
  min-height:38px;
  padding:8px 16px;
  border:2px solid var(--amarelo-2);
  border-radius:12px;
  background:transparent;
  color:#fff;
  font-size:14px;
  text-decoration:none;
}
.botao-linha:hover{background:#323232;color:#fff}

/* ---------- botao amarelo grande ---------- */
.botao-amarelo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:61px;
  padding:14px 32px;
  background:var(--amarelo-2);
  color:#000;
  font-size:16px;
  text-decoration:none;
  border:0;
  border-radius:12px;
}
.botao-amarelo:hover{background:#fff78e;color:#000}
.botao-amarelo--pequeno{min-height:54px;font-size:18px;border-radius:3px;padding:12px 28px}
.botao-amarelo--pequeno:hover{background:#c2c2c2}

/* ---------- hero da home ---------- */
.hero-home{
  background:#3d3d40 url("/img/home-hero.webp") 50% 50%/cover no-repeat;
  color:var(--claro);
}
.hero-home__inner{
  display:flex;
  justify-content:flex-end;
  min-height:538px;
  padding:77px 0;
}
.hero-home__texto{max-width:543px}
.hero-home__titulo{
  font-family:"Roboto Condensed",Arial,sans-serif;
  font-size:50px;
  line-height:55px;
  font-weight:400;
  margin-bottom:24px;
}
.hero-home__titulo b{font-weight:700}
.hero-home__sub{
  font-size:15px;
  line-height:21px;
  max-width:494px;
  margin-bottom:24px;
}

/* ---------- titulos de secao ---------- */
.titulo-secao{
  font-size:34px;
  line-height:1.2;
  font-weight:700;
  text-align:center;
}
.regua{
  width:96.5px;
  height:0;
  margin:16px auto;
  border-bottom:1px solid var(--amarelo-2);
}
.regua--cinza{border-bottom-color:#3d3d40;width:70px;margin:12px auto}
.subtitulo-secao{
  font-size:15px;
  line-height:1.4;
  text-align:center;
  color:#dee0df;
  max-width:592px;
  margin:0 auto 32px;
}

/* ---------- cards ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.card{
  background:var(--card);
  border:1px solid var(--card-borda);
  border-top:12px solid var(--amarelo-2);
  border-radius:12px;
  padding:24px 20px;
  text-align:center;
}
.card__icone{
  display:block;
  width:34px;
  height:34px;
  margin:0 auto 14px;
  color:var(--amarelo-2);
}
.card__titulo{font-size:18px;font-weight:700;color:var(--claro)}
.card__texto{font-size:13px;line-height:1.4;color:var(--claro-2)}
.card__texto b{color:#fff}

/* ---------- cursos ---------- */
.cursos{
  display:grid;
  grid-template-columns:473px 1fr;
  gap:20px;
  align-items:start;
}
.cursos__foto{
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:473/359;
  background:#161821 center/cover no-repeat;
}
.cursos__grade{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.curso{
  background:var(--card);
  border:1px solid var(--amarelo-2);
  border-radius:12px;
  padding:18px 14px;
  text-align:center;
}
.curso__nome{font-size:18px;font-weight:700;color:var(--claro)}
.curso__carga{font-size:13px;font-weight:700;color:var(--claro-2);margin-top:6px}
.curso__texto{font-size:13px;line-height:1.4;color:var(--claro-2)}

/* ---------- numeros da home ---------- */
.secao--cinza{background:var(--claro);color:var(--escuro)}
.numeros-home{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  text-align:center;
}
.numeros-home__barra{height:8px;border-radius:2px;margin-bottom:20px}
.numeros-home__valor{font-size:60px;line-height:1.2;font-weight:700;color:var(--escuro)}
.numeros-home__texto{font-size:15px;line-height:1.4;color:var(--escuro);margin-top:8px}

/* ---------- planos ---------- */
.planos{
  position:relative;
  background:#3d3d40 url("/img/home-planos.webp") 53.66% 34.97%/cover no-repeat;
  text-align:center;
  color:var(--claro);
}
.planos::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.8)}
.planos__inner{position:relative;padding:28px 20px 36px}
.planos__linha{font-size:34px;line-height:1.2;font-weight:700}
.planos__linha b{color:var(--laranja)}

/* ---------- FAQ ---------- */
.faq{max-width:1200px;margin:0 auto}
.faq__item{border-radius:12px;overflow:hidden;margin-bottom:10px;background:var(--laranja);color:#0a0b0f}
.faq__item summary{
  list-style:none;
  cursor:pointer;
  padding:25px;
  font-size:15px;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"\25BE";transition:transform .2s}
.faq__item[open] summary::after{transform:rotate(180deg)}
.faq__corpo{padding:0 25px 25px;font-size:15px;line-height:1.6}
.faq__corpo p + p{margin-top:10px}

/* ---------- rodape escuro ---------- */
.rodape-escuro{
  background:var(--escuro);
  color:#edeff5;
  text-align:center;
  font-size:12px;
  line-height:16.8px;
  padding:26px 20px;
}
.rodape-escuro b{font-weight:700}

/* ---------- botao flutuante do WhatsApp ---------- */
.zap{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:70;
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#00c800;
  color:#fff;
  border-radius:50%;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.zap:hover{background:#00b100}
.zap svg{width:34px;height:34px;fill:currentColor}

/* ---------- mobile: tema escuro ---------- */
@media (max-width:800px){
  .topo__nav,.topo .botao-linha{display:none}
  .topo__inner{justify-content:center;min-height:92px}
  .hero-home__inner{justify-content:center;text-align:center;min-height:0;padding:36px 0}
  .hero-home__titulo{font-size:32px;line-height:1.2}
  .hero-home__sub{display:none}
  .cards{grid-template-columns:1fr}
  .cursos{grid-template-columns:1fr}
  .cursos__grade{grid-template-columns:1fr}
  .numeros-home{grid-template-columns:1fr}
  .numeros-home__valor{font-size:48px}
  .planos__linha{font-size:26px}
  .titulo-secao{font-size:26px}
  .faq__item summary{padding:18px}
  .faq__corpo{padding:0 18px 18px}
}

/* slides da home tem proporcao mais larga que os da aulas2 */
.carrossel__item--home{aspect-ratio:690/345}

/* a home foi desenhada sobre uma faixa de 1200px, nao os 960 da aulas2 */
.container--largo{max-width:1200px}
body.tema-escuro .container{max-width:1200px}

/* ==========================================================================
   Louvai Music (/gravacao) - Poppins, azul #0652dd
   ========================================================================== */
:root{
  --azul:#0652dd;
  --azul-topo:#1b1464;
  --cinza-caixa:#f5f6fa;
  --laranja-louvai:#f79f1f;
  --laranja-cta:#ee5a24;
}

body.tema-louvai{
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:#fff;
  color:#000;
}
body.tema-louvai .container{max-width:1200px}

.louvai-topo{background:var(--azul-topo);color:#fff}
.louvai-topo__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:100px;
}
.louvai-topo img{width:140px;height:auto}
.louvai-topo p{font-size:16px;line-height:22.4px}
.louvai-topo b{font-weight:700}

/* hero */
.louvai-hero{
  position:relative;
  background:var(--azul) url("/img/grav-fundo.webp") 50% 50%/cover no-repeat;
  color:#fff;
  text-align:center;
  overflow:hidden;
}
.louvai-hero__inner{position:relative;z-index:2;padding:46px 20px 48px}
.louvai-hero h1{font-size:48px;line-height:1.4;font-weight:900}
.louvai-hero__sub{font-size:20px;line-height:28px;margin-bottom:24px}
.louvai-hero__sub b{font-weight:700}
.louvai-deco{position:absolute;z-index:1;pointer-events:none;opacity:.9}

/* titulos */
.louvai-titulo{font-size:48px;line-height:1.4;font-weight:900;color:var(--azul);text-align:center}
.louvai-sub{font-size:20px;line-height:1.4;text-align:center;margin-bottom:32px}

/* passos "Como funciona?" */
.passos{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  position:relative;
}
.passos__item img{width:178px;height:auto;margin-bottom:18px}
.passos__item h3{font-size:25px;line-height:1.4;font-weight:900;margin-bottom:10px}
.passos__item p{font-size:14px;line-height:1.7}

/* bloco Louvai Music */
.louvai-sobre{
  display:grid;
  grid-template-columns:400px 1fr;
  gap:40px;
  align-items:center;
  background:var(--cinza-caixa);
  border-radius:12px;
  padding:32px 40px;
}
.louvai-sobre__foto{width:100%;height:auto;border-radius:12px}
.louvai-sobre h2{font-size:48px;line-height:1.4;font-weight:900;color:var(--azul)}
.louvai-sobre__destaque{font-size:16px;line-height:1.4;font-weight:700;margin:12px 0}
.louvai-sobre p{font-size:16px;line-height:2}
.botao-laranja{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:24px;
  min-width:324px;
  min-height:60px;
  padding:12px 28px;
  background:var(--laranja-louvai);
  color:#fff;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  border-radius:100px;
}
.botao-laranja:hover{background:#e08c10;color:#fff}

/* faixa azul dos +50 */
.faixa-azul{background:var(--azul);color:#fff}
.faixa-azul__inner{
  display:flex;
  align-items:center;
  gap:32px;
  padding:56px 0;
}
.faixa-azul__circulo{
  flex:0 0 198px;
  width:198px;height:198px;
  border-radius:50%;
  background:#fff;
  color:var(--azul);
  display:flex;align-items:center;justify-content:center;
}
.faixa-azul h2{font-size:60px;line-height:1.2;font-weight:900}
.faixa-azul p{font-size:20px;line-height:1.4;margin-top:14px;max-width:591px}

/* etapas com circulos */
.etapas{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.etapas__circulo{
  width:82px;height:82px;
  border-radius:50%;
  background:#fff;
  color:var(--azul);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 8px rgba(0,0,0,.12);
  margin-bottom:18px;
}
.etapas h3{font-size:25px;line-height:1.4;font-weight:900;margin-bottom:10px}
.etapas p{font-size:14px;line-height:1.7}

/* projetos */
.projetos{display:grid;gap:20px;max-width:628px;margin:0 auto}

/* CTA final */
.louvai-cta{
  position:relative;
  background:var(--azul) url("/img/grav-fundo.webp") 50% 50%/cover no-repeat;
  color:#fff;
  text-align:center;
  padding:24px 20px 40px;
}
.louvai-cta h2{font-size:60px;line-height:1.4;font-weight:900}
.louvai-cta p{font-size:16px;line-height:2}
.botao-cta{
  display:inline-flex;
  align-items:center;justify-content:center;
  margin-top:18px;
  min-width:228px;min-height:54px;
  padding:12px 24px;
  background:var(--laranja-cta);
  color:#fff;font-size:18px;font-weight:700;
  text-decoration:none;border-radius:3px;
  animation:balanca 1.9s ease-in-out infinite;
}
.botao-cta:hover{background:#d94e1c;color:#fff}

/* duvidas */
.duvida{
  background:var(--cinza-caixa);
  border-radius:12px;
  padding:36px 40px;
  margin-bottom:28px;
}
.duvida h3{font-size:20px;line-height:2;font-weight:700;color:var(--azul)}
.duvida p{font-size:14px;line-height:2}

.louvai-rodape{background:var(--cinza-caixa);text-align:center;padding:32px 20px}
.louvai-rodape img{width:64px;height:auto;margin:0 auto 12px}
.louvai-rodape p{font-size:14px;line-height:28px}

@media (max-width:800px){
  .louvai-topo__inner{flex-direction:column;gap:8px;padding:16px 0;text-align:center}
  .louvai-hero h1{font-size:30px}
  .louvai-hero__sub{font-size:16px;line-height:24px}
  .louvai-deco{display:none}
  .louvai-titulo{font-size:30px}
  .louvai-sub{font-size:16px}
  .passos{grid-template-columns:1fr;gap:32px}
  .passos__item img{width:120px}
  .louvai-sobre{grid-template-columns:1fr;padding:24px 20px;gap:24px}
  .louvai-sobre h2{font-size:32px}
  .botao-laranja{min-width:0;width:100%}
  .faixa-azul__inner{flex-direction:column;text-align:center;padding:36px 0}
  .faixa-azul__circulo{flex:0 0 140px;width:140px;height:140px}
  .faixa-azul h2{font-size:36px}
  .etapas{grid-template-columns:1fr;gap:28px}
  .etapas__circulo{margin-left:auto;margin-right:auto}
  .etapas__item{text-align:center}
  .louvai-cta h2{font-size:32px}
  .duvida{padding:22px 20px}
}

/* as formas decorativas do hero da Louvai sao posicionadas sobre a mesma
   tela de 960px que o GreatPages usava, para caírem no lugar certo */
.louvai-deco-canvas{
  position:absolute;
  left:50%;
  top:0;
  width:960px;
  height:100%;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:1;
}
.louvai-deco-canvas img{position:absolute;height:auto}
@media (max-width:800px){ .louvai-deco-canvas{display:none} }

/* linha pontilhada ligando as 4 etapas (existia no original, so no desktop) */
.passos::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:57px;
  border-top:4px dotted #d8dbe4;
  z-index:-1;
}
@media (max-width:800px){ .passos::before{display:none} }