@font-face{font-family:"Fraunces";src:url("fraunces.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Figtree";src:url("figtree.woff2") format("woff2");font-weight:300 900;font-display:swap}

:root{
  --tinta:#000;
  --papel:#fff;
  --petala:#fcedf0;
  --cereja:#c8102e;
  --grafite:#4a4a4a;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --texto:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --coluna:40rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--texto);font-size:1.0625rem;line-height:1.65}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration-color:var(--cereja);text-underline-offset:.2em}
a:hover{color:var(--cereja)}
:focus-visible{outline:3px solid var(--cereja);outline-offset:3px;border-radius:4px}

h1,h2,h3{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:650;line-height:1.08;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.75rem,8vw,5.25rem)}
h2{font-size:clamp(2rem,4.6vw,3rem)}
h3{font-size:1.375rem;line-height:1.2}
p{margin:0}
p+p{margin-top:1em}

.miolo{width:min(100% - 3rem,68rem);margin-inline:auto}
.estreito{max-width:var(--coluna)}

/* botão */
.botao{display:inline-block;background:var(--tinta);color:var(--papel);font-weight:600;text-decoration:none;padding:.95rem 1.75rem;border-radius:999px;border:2px solid var(--tinta);transition:background .2s,border-color .2s}
.botao:hover{background:var(--cereja);border-color:var(--cereja);color:var(--papel)}
.botao.pequeno{padding:.55rem 1.15rem;font-size:.9375rem}

/* topo */
.topo{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem}
.topo img{width:9.5rem;height:auto}

/* abertura e convite: pattern ao fundo, clareira branca no centro */
.abertura,.convite{position:relative;isolation:isolate;text-align:center;overflow:hidden}
.abertura::before,.convite::before{content:"";position:absolute;inset:0;z-index:-2;background:url("pattern-wide.webp") center/cover;opacity:.5}
.abertura::after,.convite::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 46rem 100% at center,var(--papel) 38%,rgba(255,255,255,.85) 58%,rgba(255,255,255,0) 100%)}
.abertura{padding-block:clamp(3rem,8vw,6rem) clamp(4rem,9vw,7rem)}
.abertura .cereja{width:clamp(5.5rem,13vw,8.5rem);margin:0 auto 2rem;transform-origin:42% 0;animation:balanco 2.4s cubic-bezier(.3,.1,.3,1) .2s both}
@keyframes balanco{0%{transform:rotate(-9deg)}30%{transform:rotate(6deg)}55%{transform:rotate(-3.5deg)}78%{transform:rotate(1.5deg)}100%{transform:rotate(0)}}
.abertura .lema{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:400;font-size:clamp(1.375rem,3vw,1.875rem);line-height:1.25;margin-top:.9rem}
.abertura .apoio{max-width:33rem;margin:1.6rem auto 2.2rem;color:var(--grafite)}

/* seções */
.secao{padding-block:clamp(4rem,9vw,7rem)}
.secao h2{margin-bottom:1.5rem}
.secao.colada{padding-top:0}
.sobre p{font-size:1.1875rem}
.duas{display:grid;gap:0 clamp(2.5rem,6vw,5.5rem)}
.duas.topo-alinhado{row-gap:3.5rem}
@media (min-width:56rem){
  .duas{grid-template-columns:5fr 7fr;align-items:start}
  .duas.topo-alinhado{grid-template-columns:1fr 1fr}
  .sobre h2{position:sticky;top:2rem}
}

.categorias{background:var(--petala)}
.categorias h2{margin-bottom:2.5rem}
.grade{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:2.5rem 3rem}
.grade h3{margin-bottom:.6rem}
.grade p{color:var(--grafite)}

.bilhete{border:2px dashed var(--tinta);border-radius:1.25rem;padding:clamp(1.75rem,5vw,3.25rem);max-width:46rem}
.perguntas h2{font-size:clamp(1.75rem,3.6vw,2.375rem);margin-top:clamp(0rem,3vw,3.25rem)}
.bilhete h2{font-size:clamp(1.75rem,3.6vw,2.375rem)}

/* perguntas */
.perguntas details{border-bottom:1px solid var(--tinta)}
.perguntas details:first-of-type{border-top:1px solid var(--tinta)}
.perguntas summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.25rem 0;font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:600;font-size:1.25rem;line-height:1.25}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{content:"+";font-family:var(--texto);font-weight:400;font-size:1.75rem;line-height:1;transition:transform .2s}
.perguntas details[open] summary::after{transform:rotate(45deg);color:var(--cereja)}
.perguntas details p{padding:0 2.5rem 1.5rem 0;color:var(--grafite)}

/* convite final */
.convite{padding-block:clamp(5rem,11vw,8.5rem)}
.convite h2{max-width:14ch;margin:0 auto 2rem}
.convite .arroba{display:block;margin-top:1rem;color:var(--grafite);font-size:.9375rem}

/* rodapé */
.rodape{background:var(--tinta);color:var(--papel);padding-block:3.5rem 2.5rem;font-size:.9375rem;line-height:1.6}
.rodape .cereja{width:2.25rem;margin-bottom:1.5rem}
.rodape .colunas{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2rem 3rem}
.rodape address{font-style:normal;color:#cfcfcf}
.rodape strong{color:var(--papel);font-weight:600}
.rodape a{text-decoration-color:#777}
.rodape a:hover{color:#ff8fa3}
.rodape .fim{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #333;color:#9a9a9a;font-size:.875rem}
.rodape.simples .fim{margin:0;padding:0;border:0}

/* página de texto (privacidade) */
.documento{padding-top:3rem}
.documento h1{font-size:clamp(2.25rem,6vw,3.5rem);margin-bottom:1rem}
.documento h2{font-size:1.5rem;margin:2.5rem 0 .75rem}
.documento .data{color:var(--grafite);font-size:.9375rem}
.documento .voltar{margin-top:3rem}

@media (max-width:40rem){
  .abertura::before,.convite::before{background-image:url("pattern-tall.webp")}
  .topo img{width:8rem}
  .abertura::before,.convite::before{opacity:.6}
  .abertura::after,.convite::after{background:radial-gradient(ellipse 95% 62% at center,var(--papel) 45%,rgba(255,255,255,.8) 70%,rgba(255,255,255,0) 100%)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .abertura .cereja{animation:none}
  .botao,.perguntas summary::after{transition:none}
}