/* ================================================================
   CONF. DOS FILHOS 26 — sistema
   Paleta extraída da marca (Igreja dos Filhos) e da identidade 2025.
   ================================================================ */

@font-face{font-family:'Anton';src:url('../assets/fonts/anton-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Anton';src:url('../assets/fonts/anton-latin-ext.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';src:url('../assets/fonts/inter-latin.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ----------------------------------------------------------------
   Identidade CONF. DOS FILHOS 26 — papel lima, marca-texto amarelo,
   preto quente de impressão, cinza do fundo sob o rasgo.
   Nada aqui vem da edição de 2025.
   ---------------------------------------------------------------- */
:root{
  --paper:#E9EDA4;        /* papel lima do cartaz                    */
  --paper-2:#F1F4C4;      /* variação clara (fundos secundários)     */
  --paper-3:#DDE294;      /* papel na sombra                          */
  --yellow:#FFE04A;       /* marca-texto                              */
  --yellow-2:#FFD016;
  --ink:#191A16;          /* preto quente, impresso                   */
  --ink-2:#22241D;
  --ink-3:#2E3128;
  --grey:#9A9A94;         /* fundo cinza sob o papel rasgado          */
  --grey-2:#6E6E68;
  --soft:#656747;         /* texto secundário sobre papel (4,8:1)    */
  --dim:#8E9089;          /* texto secundário sobre preto             */

  --fd:'Anton','Arial Narrow',Impact,sans-serif;
  --fb:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --pad:clamp(1.15rem,5vw,4.5rem);
  --wrap:1440px;
  --sec:clamp(5rem,12vw,11rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

html{background:var(--ink)}
body{font-family:var(--fb);background:var(--ink);color:var(--paper-2);
  font-size:clamp(1rem,.96rem + .18vw,1.075rem);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* textura de papel impresso ------------------------------------- */
.grain{position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.2;
  background-image:url('../assets/textures/grain.png');background-size:160px 160px;
  mix-blend-mode:overlay}

/* rasgo do papel — a folha de papel lima sobre o cinza ------------ */
.torn-b{clip-path:polygon(0 0, 100% 0, 100.00% calc(100% - 0.0px), 98.28% calc(100% - 3.5px), 96.55% calc(100% - 6.7px), 94.83% calc(100% - 4.4px), 93.10% calc(100% - 8.4px), 91.38% calc(100% - 7.8px), 89.66% calc(100% - 4.4px), 87.93% calc(100% - 9.5px), 86.21% calc(100% - 7.8px), 84.48% calc(100% - 9.6px), 82.76% calc(100% - 11.3px), 81.03% calc(100% - 6.7px), 79.31% calc(100% - 9.5px), 77.59% calc(100% - 10.5px), 75.86% calc(100% - 11.1px), 74.14% calc(100% - 9.1px), 72.41% calc(100% - 5.3px), 70.69% calc(100% - 11.5px), 68.97% calc(100% - 6.3px), 67.24% calc(100% - 7.4px), 65.52% calc(100% - 8.9px), 63.79% calc(100% - 9.5px), 62.07% calc(100% - 8.0px), 60.34% calc(100% - 12.7px), 58.62% calc(100% - 12.7px), 56.90% calc(100% - 10.9px), 55.17% calc(100% - 14.4px), 53.45% calc(100% - 14.8px), 51.72% calc(100% - 12.7px), 50.00% calc(100% - 13.8px), 48.28% calc(100% - 12.3px), 46.55% calc(100% - 15.0px), 44.83% calc(100% - 12.3px), 43.10% calc(100% - 16.1px), 41.38% calc(100% - 14.3px), 39.66% calc(100% - 13.3px), 37.93% calc(100% - 13.9px), 36.21% calc(100% - 11.1px), 34.48% calc(100% - 10.2px), 32.76% calc(100% - 11.3px), 31.03% calc(100% - 5.1px), 29.31% calc(100% - 4.9px), 27.59% calc(100% - 4.6px), 25.86% calc(100% - 3.4px), 24.14% calc(100% - 3.0px), 22.41% calc(100% - -0.9px), 20.69% calc(100% - 1.6px), 18.97% calc(100% - -1.8px), 17.24% calc(100% - -2.0px), 15.52% calc(100% - 1.3px), 13.79% calc(100% - 3.5px), 12.07% calc(100% - -1.3px), 10.34% calc(100% - 3.6px), 8.62% calc(100% - 1.6px), 6.90% calc(100% - 4.6px), 5.17% calc(100% - 4.2px), 3.45% calc(100% - 4.3px), 1.72% calc(100% - 5.2px), 0.00% calc(100% - 4.1px))}

/* marca-texto — traço de caneta com bordas trêmulas e pontas irregulares */
.mark{position:absolute;pointer-events:none;color:var(--yellow);z-index:0}
.mark svg{width:100%;height:auto;display:block}
.mark path{fill:currentColor}

/* textura de papel impresso sobre os fundos claros ---------------- */
.tex{position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:multiply;
  background-image:url('../assets/textures/grain.png');background-size:150px 150px}

/* ---------------------------------------------------------------
   tipos utilitários
   --------------------------------------------------------------- */
.eyebrow{font:500 .72rem/1 var(--fb);letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);margin-bottom:clamp(1.4rem,3vw,2.6rem)}
/* sobre fundo claro o teal institucional cai para ~3,3:1 — texto pequeno
   precisa de 4,5:1, então usamos o tom escuro da mesma família */
.manifesto .eyebrow,.estrutura .eyebrow,.faq .eyebrow,.data .count__lbl{color:var(--ink-2)}
.eyebrow--hero{color:var(--paper-3);margin-bottom:clamp(1rem,2.4vw,1.8rem)}
.micro{font:400 .8rem/1.5 var(--fb);color:var(--dim);letter-spacing:.01em}

.h-display{font-family:var(--fd);text-transform:uppercase;line-height:.84;
  letter-spacing:-.02em;font-weight:400}

/* a máscara precisa de folga: com line-height apertado o Anton
   transborda a caixa de linha. O padding abre espaço e a margem
   negativa devolve a métrica original. */
.mask{display:block;overflow:hidden;padding-block:var(--mp,.2em);margin-block:calc(var(--mp,.2em) * -1)}
.mask__i{display:block}

.cap{font:500 .68rem/1.4 var(--fb);letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin-top:.85rem}
.cap span{display:block;color:var(--dim)}
.cap--over{position:absolute;left:var(--pad);bottom:clamp(1rem,3vw,2rem);margin:0;
  color:var(--paper-2);mix-blend-mode:difference}
.cap--over span{display:inline;color:inherit;opacity:.65}
/* legenda sobre foto */
.cap--over::before{content:'';display:block;width:34px;height:1px;background:currentColor;
  margin-bottom:.6rem;opacity:.5}

/* ---------------------------------------------------------------
   botões
   --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.6em;
  font:600 .84rem/1 var(--fb);letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-2);background:var(--ink);
  padding:1.15em 1.6em;border-radius:999px;min-height:44px;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease-out);
  will-change:transform}
.btn span{transition:transform .35s var(--ease-out)}
.btn:hover{background:#000;color:var(--yellow);transform:translateY(-2px)}
.btn:hover span{transform:translate(3px,-3px)}
.btn--sm{font-size:.74rem;padding:.9em 1.25em;letter-spacing:.09em}
.btn--lg{font-size:clamp(.82rem,.78rem + .25vw,.95rem);padding:1.25em 2em}
.btn--block{display:flex;justify-content:center;width:100%}
/* sobre fundo preto o amarelo é que salta */
.btn--hot{background:var(--yellow);color:var(--ink)}
.btn--hot:hover{background:var(--yellow-2);color:var(--ink)}

.lnk{font:500 .82rem/1 var(--fb);letter-spacing:.06em;color:var(--dim);
  text-decoration:underline;text-underline-offset:4px;padding:.6rem;min-height:44px}
.lnk:hover{color:var(--paper-2)}

/* ---------------------------------------------------------------
   header
   --------------------------------------------------------------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:600;
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease),
             border-color .4s var(--ease),transform .45s var(--ease);
  border-bottom:1px solid transparent}
.hdr__in{max-width:var(--wrap);margin-inline:auto;padding:1.05rem var(--pad);
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem)}
.hdr__logo{flex:0 0 auto}
.hdr__logo img{width:clamp(108px,11vw,150px);height:auto}
.hdr__nav{display:flex;gap:clamp(1.2rem,2.6vw,2.4rem);margin-left:auto}
.hdr__nav a{font:500 .76rem/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);opacity:.78;padding:.7rem 0;position:relative;
  transition:opacity .25s,color .35s var(--ease)}
.hdr__nav a::after{content:'';position:absolute;left:0;right:100%;bottom:.35rem;height:1px;
  background:currentColor;transition:right .35s var(--ease-out)}
.hdr__nav a:hover{opacity:1}
.hdr__nav a:hover::after{right:0}

/* ao rolar vira uma tarja preta — a mesma do cartaz */
.hdr.is-stuck{background:rgba(25,26,22,.9);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom-color:rgba(233,237,164,.14)}
.hdr.is-stuck .hdr__nav a{color:var(--paper-2)}
.hdr.is-stuck .hdr__logo img{filter:invert(1)}
.hdr.is-stuck .burger span{background:var(--paper-2)}
.hdr.is-stuck .hdr__cta{background:var(--yellow);color:var(--ink)}
.hdr.is-hidden{transform:translateY(-102%)}

.burger{display:none;width:44px;height:44px;margin-left:.2rem;position:relative}
.burger span{position:absolute;left:11px;width:22px;height:1.5px;background:var(--ink);
  transition:transform .35s var(--ease-out),opacity .2s}
.burger span:nth-child(1){top:19px}
.burger span:nth-child(2){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* drawer mobile */
.drawer{position:fixed;inset:0;z-index:590;background:var(--ink);
  padding:clamp(6rem,18vw,8rem) var(--pad) calc(2rem + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:center;gap:2.4rem}
.drawer[hidden]{display:none}
.drawer__nav{display:flex;flex-direction:column;gap:.35rem}
.drawer__nav a{font-family:var(--fd);text-transform:uppercase;font-size:clamp(2rem,10vw,3.4rem);
  line-height:1.06;letter-spacing:-.015em;display:flex;align-items:baseline;gap:.7rem;
  padding:.28rem 0;color:var(--paper-2)}
.drawer__nav a span{font:500 .68rem/1 var(--fb);letter-spacing:.2em;color:var(--dim)}
.drawer__micro{font:500 .72rem/1 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

/* ---------------------------------------------------------------
   hero — o cartaz de 2026 traduzido para a tela:
   folha de papel lima rasgada sobre o cinza, marca-texto amarelo,
   tipografia preta e o "26" manuscrito com o disco escuro atrás.
   --------------------------------------------------------------- */
.hero{position:relative;background:var(--grey);min-height:84svh;
  display:flex;overflow:hidden;isolation:isolate}
.hero__sheet{position:relative;width:100%;display:flex;flex-direction:column;
  justify-content:flex-end;background:var(--paper);
  padding-block:clamp(5.5rem,11vw,6rem) clamp(3rem,6vw,4rem)}

/* o hero é o único bloco centralizado do site: é um cartaz, não um
   parágrafo. O lockup é 1,877:1 e nunca preenche a largura sem empurrar
   o CTA para fora da dobra — centralizar torna a folga intencional. */
.hero__in{position:relative;z-index:2;width:100%;max-width:var(--wrap);
  margin-inline:auto;padding-inline:var(--pad);
  display:flex;flex-direction:column;align-items:center;text-align:center}

/* traços de marca-texto */
.mark--a{left:-4%;right:-4%;width:108%;top:38%;transform:rotate(-1.1deg);opacity:.92}
.mark--b{right:-2%;width:46%;top:9%;transform:rotate(.7deg);opacity:.85}
.mark--c{left:-6%;width:52%;bottom:9%;transform:rotate(-.8deg);opacity:.8}

.eyebrow--hero{color:var(--ink);opacity:.55;margin-bottom:clamp(1rem,2.4vw,1.8rem)}

/* O título é o lockup oficial, usado como imagem — nada recria a marca
   com fonte. Ele vem em duas camadas registradas no mesmo recorte: o
   letreiro (com o disco) e o "26". Empilhadas, cada uma pode se mover
   por conta própria no scroll.
   A largura obedece também à altura da janela (o lockup é 1,913:1),
   senão o CTA cai abaixo da dobra em telas baixas. */
.hero__logo{position:relative;margin:0;aspect-ratio:926/484;
  width:min(100%, 1180px, calc(52vh * 1.9132))}
.hero__logo-in{position:absolute;inset:0;display:block}
.lockup{position:absolute;inset:0;display:block}
.lockup img{width:100%;height:auto;display:block}

/* o JS escreve estas variáveis. translate, rotate e scale são
   propriedades independentes, então o movimento do scroll não
   conflita com a animação de entrada. */
.lockup--word{translate:0 var(--wy,0px)}
.lockup--26{translate:0 var(--ny,0px);rotate:var(--nr,0deg);
  transform-origin:63% 63%;will-change:translate,rotate}


.hero__meta{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(1.6rem,3.4vw,2.6rem);
  font:500 .82rem/1 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.hero__meta strong{font-weight:700}
.hero__meta p:last-of-type{opacity:.62}
.hero__meta .dot{width:5px;height:5px;border-radius:50%;background:var(--ink);opacity:.4}

.hero__act{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,2.4vw,1.8rem);
  flex-wrap:wrap;margin-top:clamp(1.4rem,3vw,2.2rem)}
.hero__act .micro{color:var(--ink);opacity:.55}

.hero__scroll{position:absolute;left:var(--pad);bottom:clamp(1.4rem,3.4vw,2.6rem);z-index:3;
  display:flex;align-items:center;gap:.8rem;
  font:500 .64rem/1 var(--fb);letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);opacity:.5}
.hero__scroll i{display:block;width:44px;height:1px;background:currentColor;position:relative;overflow:hidden}
.hero__scroll i::after{content:'';position:absolute;inset:0;background:var(--ink);
  animation:scrollLine 2.4s var(--ease) infinite}
.hero__scroll:hover{opacity:.85}

/* faixas de foto que cortam a página: o palco logo abaixo do cartaz
   e a fachada da igreja no fim, antes do convite */
.hero-photo,.house-photo{position:relative;background:var(--ink)}
.hero-photo .cap--over,.house-photo .cap--over{color:#fff;mix-blend-mode:normal;
  text-shadow:0 1px 12px rgba(0,0,0,.6)}

/* ---------------------------------------------------------------
   manifesto
   --------------------------------------------------------------- */
.manifesto{position:relative;background:var(--paper-2);color:var(--ink);
  padding-block:clamp(6rem,15vw,13rem);overflow:hidden}
.manifesto .wrap{position:relative}
.manifesto__h{font-family:var(--fd);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.85rem,6.2vw,5.4rem);line-height:.98;letter-spacing:-.018em;
  max-width:26ch;margin-bottom:clamp(2.6rem,6vw,4.5rem)}
.manifesto__body{max-width:48ch;margin-left:auto;display:flex;flex-direction:column;
  gap:clamp(1.3rem,2.6vw,1.9rem)}
.manifesto__body p{font-size:clamp(1.06rem,1rem + .5vw,1.4rem);line-height:1.62;color:#3A3B2E}
.manifesto__body p:last-child{color:var(--ink);font-weight:500}
.manifesto__end{margin-top:clamp(3.4rem,8vw,6.5rem);text-align:right}
.manifesto__end span{font-family:var(--fd);text-transform:uppercase;
  font-size:clamp(2.4rem,11vw,9rem);line-height:.94;letter-spacing:-.025em;
  display:inline-block;position:relative}
/* marca-texto: multiply mantém a letra preta e pinta só o papel.
   z-index negativo não serve — o fundo da seção cobriria o grifo. */
.manifesto__end span::after{content:'';position:absolute;left:-.04em;right:-.04em;bottom:.07em;
  height:.2em;background:var(--yellow);mix-blend-mode:multiply;pointer-events:none;
  transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-out) .3s}
.manifesto__end.is-in span::after{transform:scaleX(1)}

/* ---------------------------------------------------------------
   marquee — transição papel → preto
   --------------------------------------------------------------- */
.marquee{position:relative;background:var(--yellow);color:var(--ink);overflow:hidden;
  padding-block:clamp(.9rem,2vw,1.5rem)}
.marquee::before,.marquee::after{content:'';position:absolute;left:0;right:0;height:clamp(40px,8vw,90px)}
.marquee::before{top:-1px;transform:translateY(-100%);background:linear-gradient(180deg,var(--paper-2),var(--yellow))}
.marquee::after{bottom:-1px;transform:translateY(100%);background:linear-gradient(180deg,var(--yellow),var(--ink))}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__track span{font-family:var(--fd);text-transform:uppercase;
  font-size:clamp(1.6rem,5.4vw,4.2rem);line-height:1;letter-spacing:-.01em;
  white-space:nowrap;padding-right:.32em}
.marquee__track i{font-style:normal;color:var(--grey-2);padding-inline:.32em}

/* ---------------------------------------------------------------
   frase central
   --------------------------------------------------------------- */
.frase{background:var(--ink);padding-block:clamp(6rem,17vw,15rem);position:relative}
.frase__a,.frase__b{font-family:var(--fd);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.9rem,7.1vw,6.6rem);line-height:.98;letter-spacing:-.022em}
.frase__a{color:var(--dim)}
.frase__b{color:var(--paper-2);margin-top:clamp(2.6rem,7vw,6rem)}
.frase__nota{margin-top:clamp(3rem,8vw,6rem);
  font-family:var(--fd);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.05rem,2.4vw,2.1rem);line-height:1.1;letter-spacing:-.012em;
  color:var(--paper-3);opacity:.74}
.frase__nota strong{color:var(--paper-2);font-weight:400}

.hl{font-style:normal;position:relative;display:inline-block;color:var(--yellow)}
.hl__line{position:absolute;left:-2%;right:-2%;bottom:-.22em;width:104%;height:auto;
  color:var(--yellow);overflow:visible}
.hl__line .ink{stroke:currentColor;stroke-width:5;stroke-linecap:round;fill:none;
  vector-effect:non-scaling-stroke}

/* ---------------------------------------------------------------
   lineup — suspense
   --------------------------------------------------------------- */
.lineup{background:var(--ink-2);padding-block:clamp(4.5rem,11vw,9rem)}
.lineup__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(1.2rem,3vw,3rem);margin-bottom:clamp(2.6rem,6vw,4.5rem)}
.lineup__h{font-family:var(--fd);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.85rem,6.2vw,5.4rem);line-height:.98;letter-spacing:-.018em}
.lineup__ans{font:500 .82rem/1.4 var(--fb);letter-spacing:.2em;text-transform:uppercase;
  color:var(--yellow);padding-bottom:.5rem}

/* Flex em vez de grid: com um número ímpar de preletores a última
   linha fica centralizada em vez de deixar um card órfão à esquerda.
   Acrescentar nomes não exige tocar no CSS. */
.cards{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(1.4rem,3vw,2.6rem)}
.pre{flex:1 1 260px;max-width:300px}

/* card de preletor: foto, nome, papel e duas linhas de biografia.
   Sem caixa nem borda — a foto já é a moldura. */
.pre{display:flex;flex-direction:column;min-width:0}
.pre .ph{width:100%}
.pre .ph img{transition:scale 1.1s var(--ease-out),filter .5s var(--ease)}
.pre:hover .ph img{scale:1.03}
.pre__txt{padding-top:clamp(.9rem,2vw,1.3rem)}
.pre__nome{font-family:var(--fd);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.25rem,2.5vw,2rem);line-height:1;letter-spacing:-.012em;
  color:var(--paper-2)}
.pre__papel{font:600 .66rem/1.4 var(--fb);letter-spacing:.2em;text-transform:uppercase;
  color:var(--yellow);margin-top:.65rem}
.pre__bio{font-size:.9rem;line-height:1.6;color:var(--dim);margin-top:.85rem;max-width:36ch}
.pre__bio em{font-style:normal;color:var(--paper-3)}

.lineup__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.2rem;margin-top:clamp(2rem,4.5vw,3.2rem)}

/* ---------------------------------------------------------------
   data
   --------------------------------------------------------------- */
.data{background:var(--paper);color:var(--ink);padding-block:clamp(4.5rem,11vw,9rem)}
.data__grid{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(1.4rem,4vw,4rem);
  justify-content:space-between}
.data__days{font-family:var(--fd);line-height:.94;letter-spacing:-.045em;
  font-size:clamp(5.5rem,23vw,19rem);display:flex;flex-direction:column}
.data__days .mask{--mp:.1em}
.data__days .mask__i{display:block}
.data__side{padding-bottom:clamp(.6rem,2vw,2rem);display:flex;flex-direction:column;
  gap:clamp(1.6rem,4vw,3rem);text-align:right;margin-left:auto}
.data__month{font-family:var(--fd);text-transform:uppercase;
  font-size:clamp(1.9rem,5.4vw,4.4rem);line-height:.92;letter-spacing:-.02em}
.data__month span{color:var(--soft)}
.data__place{font:500 .82rem/1.7 var(--fb);letter-spacing:.16em;text-transform:uppercase}
.data__place span{color:#5A5C46}

.count{margin-top:clamp(3rem,7vw,5.5rem);border-top:1px solid rgba(25,26,22,.16);
  padding-top:clamp(1.4rem,3vw,2.2rem)}
.count__lbl{font:500 .7rem/1 var(--fb);letter-spacing:.24em;text-transform:uppercase;
  color:var(--soft);margin-bottom:clamp(1rem,2.2vw,1.6rem)}
.count__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,2vw,2rem);
  max-width:760px}
.count__grid li{display:flex;flex-direction:column;gap:.35rem}
.count__grid b{font-family:var(--fd);font-weight:400;
  font-size:clamp(2.1rem,7vw,5rem);line-height:.86;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.count__grid span{font:500 .64rem/1 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:#5A5C46}

/* ---------------------------------------------------------------
   estrutura
   --------------------------------------------------------------- */
.estrutura{background:var(--paper);color:var(--ink);padding-block:0 clamp(5rem,12vw,10rem)}
.estrutura__h{font-family:var(--fd);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.7rem,5.4vw,4.6rem);line-height:.98;letter-spacing:-.018em;
  max-width:26ch;margin-bottom:clamp(2.6rem,6vw,4.5rem)}
.info{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid rgba(25,26,22,.2)}
.info__i{padding:clamp(1.4rem,3vw,2.4rem) clamp(1rem,1.8vw,1.6rem) clamp(1.8rem,4vw,3rem) 0;
  border-right:1px solid rgba(25,26,22,.16);position:relative}
.info__i:nth-child(3n){border-right:0}
.info__i:nth-child(n+4){border-top:1px solid rgba(25,26,22,.16)}
/* o nome da Igreja das Crianças recebe o marca-texto do cartaz */
.info__i--kids h3{position:relative;display:inline-block}
.info__i--kids h3::after{content:'';position:absolute;left:-.09em;right:-.09em;bottom:.04em;height:.46em;
  background:var(--yellow);mix-blend-mode:multiply;pointer-events:none}
.info__k{font:500 .68rem/1 var(--fb);letter-spacing:.2em;color:var(--soft);
  display:block;margin-bottom:clamp(1.8rem,4vw,3.4rem)}
.info__i h3{font-family:var(--fd);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.1rem,2.2vw,1.85rem);line-height:1.02;letter-spacing:-.01em;margin-bottom:.5rem}
.info__i p{font-size:.88rem;line-height:1.5;color:#4A4C3B;max-width:30ch}

/* ---------------------------------------------------------------
   inscrição
   --------------------------------------------------------------- */
.comu{position:relative;background:var(--yellow);color:var(--ink);overflow:hidden;
  padding-block:clamp(5.5rem,14vw,12rem)}
.comu .wrap{position:relative}
.comu__h{font-family:var(--fd);text-transform:uppercase;font-weight:400;
  font-size:clamp(2.3rem,9.6vw,9rem);line-height:.94;letter-spacing:-.028em}
.comu__sub{font-family:var(--fd);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.05rem,2.8vw,2.3rem);line-height:1.04;letter-spacing:-.01em;
  color:#5E5C2C;margin-top:clamp(.8rem,2vw,1.4rem)}
.comu__p{max-width:44ch;margin-top:clamp(2rem,4.5vw,3.2rem);
  font-size:clamp(1rem,.96rem + .4vw,1.24rem);line-height:1.62;color:#3A3A20}
.comu .btn{margin-top:clamp(2rem,4.5vw,3rem)}
.comu__micro{margin-top:clamp(1rem,2.2vw,1.5rem);
  font:500 .72rem/1 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:#6B6833}

/* ---------------------------------------------------------------
   igreja das crianças
   ----------------------------------------------------------------
   Banda escura logo depois da inscrição amarela. A troca de fundo é
   o que impede alguém de confundir as duas inscrições — por isso o
   botão daqui é lima, cor que nenhum outro botão do site usa, e
   diz de quem é a inscrição em vez de só "inscreva-se".
   A conferência continua sendo a ação mais alta da página.
   --------------------------------------------------------------- */
.kids{background:var(--ink);color:var(--paper-2);
  padding-block:clamp(4.5rem,11vw,9rem)}
.kids__h{font-family:var(--fd);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.85rem,6.2vw,5.4rem);line-height:.98;letter-spacing:-.018em}
.kids__p{max-width:46ch;margin-top:clamp(1.6rem,3.6vw,2.6rem);
  font-size:clamp(1rem,.96rem + .4vw,1.14rem);line-height:1.62;color:var(--dim)}

/* as cinco turmas provam sozinhas que há divisão por idade */
.kids__turmas{display:flex;flex-wrap:wrap;gap:1rem clamp(1.3rem,3.4vw,2.8rem);
  margin-top:clamp(1.8rem,4vw,2.8rem);padding-top:clamp(1.4rem,3vw,2rem);
  border-top:1px solid rgba(241,244,196,.14)}
.kids__turmas li{display:flex;flex-direction:column;gap:.38rem}
.kids__turmas b{font:600 .68rem/1 var(--fb);letter-spacing:.18em;
  text-transform:uppercase;color:var(--yellow)}
.kids__turmas span{font:500 .78rem/1 var(--fb);color:var(--dim)}

.btn--kids{background:var(--paper);color:var(--ink)}
.btn--kids:hover{background:var(--paper-2);color:var(--ink)}
.kids .btn{margin-top:clamp(2.2rem,5vw,3.2rem)}

/* em texto corrido, não em caixa-alta minúscula: esta linha precisa
   ser lida, não decorar o rodapé da seção */
.kids__micro{max-width:50ch;margin-top:clamp(1rem,2.2vw,1.5rem);
  font:500 .82rem/1.55 var(--fb);color:var(--dim)}
.kids__micro b{font-weight:600;color:var(--paper-3)}

/* ---------------------------------------------------------------
   faq
   --------------------------------------------------------------- */
.faq{background:var(--paper-2);color:var(--ink);padding-block:clamp(4.5rem,11vw,9rem)}
.faq__h{font-family:var(--fd);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.7rem,5.4vw,4.6rem);line-height:.98;letter-spacing:-.018em;
  margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.acc{border-top:1px solid rgba(25,26,22,.16);max-width:980px}
.acc__i{border-bottom:1px solid rgba(25,26,22,.16)}
.acc__i summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.1rem,2.4vw,1.7rem) 0;min-height:44px;
  font-size:clamp(1rem,.96rem + .32vw,1.18rem);font-weight:500;line-height:1.35;
  transition:color .25s}
.acc__i summary:hover{color:var(--soft)}
.acc__i summary i{flex:0 0 auto;width:18px;height:18px;position:relative}
.acc__i summary i::before,.acc__i summary i::after{content:'';position:absolute;
  background:var(--soft);transition:transform .38s var(--ease-out)}
.acc__i summary i::before{left:0;top:8.5px;width:18px;height:1.5px}
.acc__i summary i::after{left:8.5px;top:0;width:1.5px;height:18px}
.acc__i[open] summary i::after{transform:scaleY(0)}
.acc__i[open] summary{color:var(--soft)}
.acc__c{overflow:hidden}
.acc__c p{padding:0 0 clamp(1.2rem,2.6vw,1.8rem);max-width:62ch;
  font-size:1rem;line-height:1.62;color:#4A4C3B}

/* ---------------------------------------------------------------
   footer
   --------------------------------------------------------------- */
.ft{background:var(--ink);padding-block:clamp(3.5rem,8vw,6rem) clamp(2rem,4vw,3rem)}
.ft__top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(1.6rem,4vw,3rem);padding-bottom:clamp(2.4rem,5vw,3.6rem);
  border-bottom:1px solid rgba(233,237,164,.14)}
.ft__logo{width:clamp(130px,15vw,190px);height:auto;filter:invert(1);opacity:.88}
.ft__id{font-family:var(--fd);text-transform:uppercase;font-size:clamp(1.05rem,2.4vw,1.9rem);
  line-height:1.06;letter-spacing:-.01em;text-align:right}
.ft__id span{display:block;font:500 .7rem/1.6 var(--fb);letter-spacing:.18em;color:var(--dim);
  margin-top:.5rem}
.ft__nav{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,3vw,2.6rem);
  padding-block:clamp(1.8rem,4vw,2.6rem)}
.ft__nav a{font:500 .78rem/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-2);opacity:.66;padding:.55rem 0;transition:opacity .25s,color .25s}
.ft__nav a:hover{opacity:1;color:var(--yellow)}
.ft__c{font:400 .72rem/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* ---------------------------------------------------------------
   CTA fixo (mobile) · consentimento
   --------------------------------------------------------------- */
.stick{position:fixed;left:.9rem;right:.9rem;bottom:calc(.9rem + env(safe-area-inset-bottom));
  z-index:580;display:none;align-items:center;justify-content:center;gap:.6em;
  background:var(--yellow);color:var(--ink);border-radius:999px;min-height:52px;
  font:600 .8rem/1 var(--fb);letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 10px 34px rgba(0,0,0,.42);
  transform:translateY(160%);transition:transform .5s var(--ease-out)}
.stick.is-on{transform:translateY(0)}

.consent{position:fixed;left:.9rem;right:.9rem;bottom:calc(.9rem + env(safe-area-inset-bottom));
  z-index:820;max-width:520px;background:var(--ink-2);border:1px solid rgba(233,237,164,.18);
  border-radius:4px;padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:1rem;
  box-shadow:0 16px 50px rgba(0,0,0,.5)}
.consent[hidden]{display:none}
.consent p{font-size:.86rem;line-height:1.55;color:var(--paper-2)}
.consent__act{display:flex;align-items:center;gap:1rem}

/* ---------------------------------------------------------------
   proporções fixas das imagens — sem layout shift
   --------------------------------------------------------------- */
.r-21x9{aspect-ratio:21/9}
.r-16x9{aspect-ratio:16/9}
.r-3x2 {aspect-ratio:3/2}
.r-4x5 {aspect-ratio:4/5}
.r-3x4 {aspect-ratio:3/4}
.hero__bg .ph{aspect-ratio:auto}
@media (max-width:700px){
  .bleed .ph{aspect-ratio:4/5}
}

/* folga para o parallax não descolar a borda da imagem */
[data-par] .ph img{height:116%;margin-top:-8%}

/* âncoras param abaixo do header fixo */
:target,section[id],#topo{scroll-margin-top:clamp(70px,9vw,92px)}