/* =================================================================
   JACUTÁ — Terreiro de Umbanda Congo/Angola
   Paleta 60/30/10:
     60% creme osso  #F2ECDD  (fundos)
     30% verde mata  #1F3D2B  (header/rodapé, blocos, contraste)
     10% ocre ouro   #C8973F  (CTAs, detalhes, links)
   Apoio: terra/argila #A6552E · texto marrom quase preto #221A14
   Tipografia: Fraunces (títulos, serifa humanista quente) + Mulish (corpo)
   ================================================================= */

:root{
  --creme:#F2ECDD;
  --creme-2:#EAE1CC;      /* variação p/ seções alternadas */
  --verde:#1F3D2B;
  --verde-2:#16301F;
  --ocre:#C8973F;
  --ocre-escuro:#A87B2C;
  --terra:#A6552E;
  --tinta:#221A14;
  --tinta-suave:#4A3F33;
  --branco-quente:#FBF7EE;

  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw:1140px;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 14px 40px -18px rgba(34,26,20,.45);
  --shadow-sm:0 6px 20px -12px rgba(34,26,20,.5);
  --ring:0 0 0 3px rgba(200,151,63,.55);
  --t:.45s cubic-bezier(.2,.7,.2,1);
}

/* ----------------------------- Reset ----------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(16px,1rem + .15vw,18px);
  line-height:1.7;
  color:var(--tinta);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0}
p{margin:0 0 1rem}
a{color:var(--terra);text-decoration:none}
a:hover{color:var(--ocre-escuro)}
ol,ul{margin:0;padding:0;list-style:none}

/* foco de teclado visível (acessibilidade) */
:focus-visible{outline:3px solid var(--ocre);outline-offset:3px;border-radius:6px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--verde);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 10px 0;font-weight:700;
}
.skip-link:focus{left:0}

/* ----------------------------- Layout ----------------------------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.narrow{max-width:820px}
.center{text-align:center}
.section{padding:clamp(56px,9vw,110px) 0}
.section--alt{background:var(--creme-2)}
.section--green{background:var(--verde);color:var(--branco-quente)}
.section--green p{color:#E9E0CC}

.eyebrow{
  font-family:var(--sans);font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;
  color:var(--terra);margin:0 0 .8rem;
}
.eyebrow--light{color:var(--ocre)}
.eyebrow::before{content:"";display:inline-block;width:26px;height:2px;background:currentColor;vertical-align:middle;margin-right:.6em;opacity:.8}

.section__title{
  font-size:clamp(1.7rem,1.2rem + 2.3vw,2.85rem);
  margin-bottom:.7rem;max-width:18ch;
}
.section--green .section__title{color:#fff}
.section__head{max-width:760px;margin-bottom:clamp(32px,5vw,56px)}
.section__intro{font-size:1.08rem;color:var(--tinta-suave)}
.section--green .section__intro{color:#E9E0CC}
.section__foot{margin-top:clamp(32px,5vw,52px);text-align:center}
.lead{font-size:1.25rem}
.lead-emph{font-family:var(--serif);font-size:1.22rem;color:var(--verde);line-height:1.4}
.section--green .lead-emph{color:var(--ocre)}

/* ----------------------------- Botões ----------------------------- */
.btn{
  --bg:var(--ocre);--fg:var(--tinta);
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:48px;padding:.85em 1.5em;
  background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-weight:700;font-size:1rem;line-height:1.1;
  border:2px solid transparent;border-radius:999px;cursor:pointer;
  transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t);
  will-change:transform;
}
.btn .ico{width:1.25em;height:1.25em;flex:0 0 auto}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0)}
.btn--lg{min-height:56px;padding:1em 1.9em;font-size:1.06rem}
.btn--block{display:flex;width:100%}

.btn--gold{--bg:var(--ocre);--fg:var(--tinta)}
.btn--gold:hover{--bg:var(--ocre-escuro);color:var(--branco-quente)}
.btn--green{--bg:var(--verde);--fg:var(--branco-quente)}
.btn--green:hover{--bg:var(--verde-2);color:#fff}
.btn--header{--bg:var(--ocre);--fg:var(--tinta);min-height:42px;padding:.55em 1.1em;font-size:.95rem}
.btn--ghost-light{background:transparent;color:var(--branco-quente);border-color:rgba(251,247,238,.6)}
.btn--ghost-light:hover{background:rgba(251,247,238,.12);color:#fff;border-color:#fff}

.cta-row{display:flex;flex-wrap:wrap;gap:.9rem}

/* ----------------------------- Header ----------------------------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(31,61,43,.96);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid rgba(200,151,63,.25);
}
.site-header__inner{display:flex;align-items:center;gap:1rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--branco-quente)}
.brand img{width:46px;height:46px;border-radius:50%}
.brand__name{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--branco-quente)}
.main-nav{display:none;margin-left:auto;gap:1.6rem}
.main-nav a{color:#E9E0CC;font-weight:600;font-size:.97rem;position:relative;padding:.25rem 0}
.main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--ocre);transition:right var(--t)}
.main-nav a:hover{color:#fff}
.main-nav a:hover::after{right:0}
.site-header .btn--header{margin-left:auto}
.main-nav + .btn--header{margin-left:0}

@media (min-width:920px){
  .main-nav{display:flex}
  .site-header .btn--header{margin-left:0}
}

/* ----------------------------- Hero ----------------------------- */
.hero{position:relative;isolation:isolate;color:var(--branco-quente);min-height:min(86vh,720px);display:flex;align-items:flex-end}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(22,48,31,.35) 0%, rgba(22,48,31,.30) 40%, rgba(22,48,31,.82) 100%),
    linear-gradient(90deg, rgba(22,48,31,.55) 0%, rgba(22,48,31,0) 60%);
}
.hero__inner{padding-top:clamp(90px,18vh,150px);padding-bottom:clamp(48px,8vw,86px)}
.eyebrow--light.eyebrow{color:#F0D9A6}
.hero h1{
  font-size:clamp(2.3rem,1.4rem + 4.6vw,4.4rem);
  max-width:16ch;text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.hero h1 span{display:block;color:#F0D9A6;font-size:.62em;margin-top:.18em}
.hero__sub{
  max-width:54ch;margin:1.3rem 0 1.9rem;font-size:clamp(1.05rem,1rem + .4vw,1.25rem);
  color:#F3ECDE;text-shadow:0 1px 12px rgba(0,0,0,.3);
}

/* ----------------------- Split (texto + imagem) ----------------------- */
.split{display:grid;gap:clamp(28px,5vw,64px);align-items:center}
.split__media img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;object-fit:cover}
@media (min-width:860px){
  .split{grid-template-columns:5fr 6fr}
  .split--reverse .split__media{order:2}
}
.split__body .btn{margin-top:.6rem}

/* ----------------------------- Pessoas ----------------------------- */
.people{display:grid;gap:clamp(28px,5vw,48px)}
@media (min-width:720px){.people{grid-template-columns:1fr 1fr}}
.person{
  background:var(--branco-quente);border-radius:var(--radius);padding:clamp(26px,4vw,40px);
  box-shadow:var(--shadow-sm);border:1px solid rgba(166,85,46,.12);text-align:center;
}
.person__photo{
  width:160px;height:160px;border-radius:50%;object-fit:cover;margin:0 auto 1.1rem;
  border:4px solid var(--creme);box-shadow:0 0 0 3px var(--ocre);
}
.person__name{font-size:1.6rem}
.person__role{
  font-family:var(--sans);font-weight:700;color:var(--terra);
  text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;margin:.25rem 0 1rem;
}
.person__atende{font-style:italic;color:var(--tinta-suave);margin-bottom:0}

/* ----------------------------- Serviços ----------------------------- */
.services{display:grid;gap:clamp(18px,2.4vw,26px);grid-template-columns:1fr}
@media (min-width:640px){.services{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.services{grid-template-columns:1fr 1fr 1fr}}
.service{
  display:flex;flex-direction:column;
  background:var(--branco-quente);border-radius:var(--radius);
  padding:clamp(22px,3vw,30px);border:1px solid rgba(166,85,46,.14);
  box-shadow:var(--shadow-sm);transition:transform var(--t),box-shadow var(--t);
}
.service:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.service__icon{font-size:2rem;line-height:1;margin-bottom:.7rem}
.service__name{font-size:1.32rem;margin-bottom:.5rem}
.service__name small{font-family:var(--sans);font-weight:400;font-size:.7em;color:var(--tinta-suave);display:inline-block}
.service__desc{color:var(--tinta-suave);font-size:.98rem;flex:1;margin-bottom:1.2rem}
.service .btn{margin-top:auto}
.service--wide{grid-column:1/-1}
@media (min-width:1000px){
  .service--wide{flex-direction:row;align-items:center;flex-wrap:wrap;gap:.4rem 2rem}
  .service--wide .service__icon{margin:0}
  .service--wide .service__name{flex-basis:100%;margin:0}
  .service--wide .service__desc{flex:1 1 320px;border:0;padding:0;margin:0}
  .service--wide .btn{width:auto;margin:0}
}

/* ----------------------------- Vídeos (facade) ----------------------------- */
.videos{display:grid;gap:clamp(18px,3vw,28px);grid-template-columns:1fr}
@media (min-width:760px){.videos{grid-template-columns:1fr 1fr 1fr}}
.video__facade{
  position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  background:#000;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
  aspect-ratio:16/9;
}
.video__facade img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:transform var(--t),opacity var(--t)}
.video__facade:hover img{transform:scale(1.05);opacity:1}
.video__play{
  position:absolute;inset:0;margin:auto;width:68px;height:68px;border-radius:50%;
  background:rgba(200,151,63,.95);box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform var(--t),background var(--t);
}
.video__play::after{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent var(--tinta);
}
.video__facade:hover .video__play{transform:scale(1.08);background:var(--ocre)}
.video__facade iframe,.video__facade video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__title{font-size:1.15rem;margin:1rem 0 .15rem;color:#fff}
.video__meta{color:var(--ocre);font-weight:700;font-size:.9rem;margin:0 0 .3rem}
.video__caption{color:#E9E0CC;font-style:italic;font-size:.95rem}

/* ----------------------------- Passos ----------------------------- */
.steps{display:grid;gap:1.4rem;margin:0 0 1.8rem}
.step{display:flex;gap:1.1rem;align-items:flex-start}
.step__num{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:1.4rem;
  background:var(--verde);color:var(--ocre);box-shadow:inset 0 0 0 2px rgba(200,151,63,.5);
}
.step__title{font-size:1.18rem;margin-bottom:.15rem}
.step p{margin:0;color:var(--tinta-suave)}

/* ----------------------------- FAQ ----------------------------- */
.faq{display:grid;gap:.8rem}
.faq__item{
  background:var(--branco-quente);border:1px solid rgba(166,85,46,.16);
  border-radius:var(--radius-sm);overflow:hidden;
}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  list-style:none;cursor:pointer;padding:1.05rem 1.25rem;
  font-family:var(--serif);font-size:1.1rem;font-weight:600;color:var(--verde);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__chevron{width:1.3em;height:1.3em;color:var(--terra);flex:0 0 auto;transition:transform var(--t)}
.faq__item[open] .faq__chevron{transform:rotate(180deg)}
.faq__answer{padding:0 1.25rem 1.15rem}
.faq__answer p{margin:0;color:var(--tinta-suave)}

/* ----------------------------- Chamada final ----------------------------- */
.final{
  position:relative;isolation:isolate;
  background:radial-gradient(120% 120% at 50% 0%, var(--verde) 0%, var(--verde-2) 100%);
  color:var(--branco-quente);padding:clamp(64px,10vw,120px) 0;text-align:center;overflow:hidden;
}
.final::before{ /* marca-d'água sóbria do logo */
  content:"";position:absolute;inset:0;z-index:-1;
  background:url("assets/logo.png?v=1") center 18% / clamp(220px,30vw,360px) no-repeat;
  opacity:.06;
}
.final__title{font-size:clamp(1.9rem,1.3rem + 3vw,3.2rem);max-width:18ch;margin:0 auto .8rem;color:#fff}
.final__sub{max-width:48ch;margin:0 auto 2rem;color:#EADFC9;font-size:1.15rem}
.final__sarava{margin-top:1.6rem;font-family:var(--serif);font-style:italic;color:var(--ocre);font-size:1.25rem}

/* ----------------------------- Rodapé ----------------------------- */
.site-footer{background:var(--verde-2);color:#D9CFB8;padding:clamp(40px,6vw,64px) 0 1.6rem}
.site-footer__inner{display:grid;gap:1.8rem;align-items:center}
@media (min-width:780px){.site-footer__inner{grid-template-columns:1fr auto}}
.site-footer__brand{display:flex;align-items:center;gap:1rem}
.site-footer__brand img{width:64px;height:64px;border-radius:50%}
.site-footer__name{font-family:var(--serif);font-size:1.15rem;color:var(--branco-quente);margin:0}
.site-footer__loc{margin:.15rem 0 0;font-size:.92rem;opacity:.85}
.site-footer__links{display:flex;flex-direction:column;gap:.55rem}
@media (min-width:780px){.site-footer__links{align-items:flex-end}}
.site-footer__links a{color:#D9CFB8;font-weight:600}
.site-footer__links a:hover{color:var(--ocre)}
.site-footer__wa{display:inline-flex;align-items:center;gap:.45em;color:var(--ocre)!important}
.site-footer__wa .ico{width:1.2em;height:1.2em}
.site-footer__tag{
  text-align:center;margin:2.2rem 0 0;padding-top:1.4rem;
  border-top:1px solid rgba(217,207,184,.18);
  font-family:var(--serif);font-style:italic;color:var(--ocre);
}

/* ----------------------------- Reveal no scroll ----------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.service,.video__facade img,.video__play,.faq__chevron{transition:none!important}
  .btn:hover,.service:hover{transform:none}
}

/* mapa (quando ativado) */
.map-embed{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);margin:1.6rem 0;line-height:0}

/* ----------------------- Interlúdio / fundo parallax ----------------------- */
.parallax{
  position:relative;isolation:isolate;
  min-height:clamp(340px,60vh,540px);
  display:grid;place-items:center;text-align:center;
  padding:clamp(48px,9vw,96px) 0;
  color:var(--branco-quente);
  background-color:var(--verde-2);
  background-image:linear-gradient(rgba(22,48,31,.58),rgba(22,48,31,.74)), url("assets/interlude.webp?v=1");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
}
/* efeito parallax só no desktop com ponteiro fino (no mobile o 'fixed' trava/buga) */
@media (hover:hover) and (min-width:920px){
  .parallax{background-attachment:fixed,fixed}
}
@media (prefers-reduced-motion: reduce){
  .parallax{background-attachment:scroll,scroll}
}
.parallax__mark{display:block;width:46px;height:2px;background:var(--ocre);margin:0 auto 1.4rem}
.parallax__quote{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.55rem,1.1rem + 2.4vw,2.8rem);line-height:1.22;
  max-width:20ch;margin:0 auto;text-shadow:0 2px 22px rgba(0,0,0,.45);
}

/* ----------------------- Casa afirmativa (LGBTQIA+) ----------------------- */
.afirmativa__media{display:flex;justify-content:center}
.afirmativa__flag{
  width:min(340px,82%);height:auto;display:block;
  border-radius:18px;box-shadow:0 22px 55px -20px rgba(0,0,0,.65);
  transform:rotate(-3deg);
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.afirmativa__flag:hover{transform:rotate(0deg) scale(1.02)}
@media (prefers-reduced-motion: reduce){ .afirmativa__flag{transition:none} }