:root{
  --cal:#F2F0E9; --sal:#FBFAF7; --mares:#DFCEB2;
  --garballo:#8C9682; --sol:#E4C077; --profund:#22414E;
  --linha:rgba(34,65,78,.16); --suave:rgba(34,65,78,.66);
  --serif:"Cormorant Garamond",serif; --sans:"Jost",Arial,sans-serif;
  --topo-h:61px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cal);color:var(--profund);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:var(--profund)}
a:focus-visible,button:focus-visible{outline:2px solid var(--sol);outline-offset:3px}
img{max-width:100%}
em{font-family:var(--serif);font-style:italic}

.pular-conteudo{position:absolute;left:-9999px;top:auto;background:var(--profund);color:var(--cal);
  padding:12px 20px;z-index:200;font-family:var(--sans);font-size:13px;letter-spacing:.08em;text-decoration:none}
.pular-conteudo:focus{left:16px;top:16px}

.wrap{max-width:820px;margin:0 auto;padding:0 24px}
.wrap.largo{max-width:1000px}

/* ---------- tipografia ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:300;margin:0}
h1{font-size:clamp(40px,9vw,86px);line-height:1.03}
h2{font-size:clamp(30px,5.5vw,50px);line-height:1.1;margin-bottom:18px}
h3{font-size:clamp(21px,3.4vw,27px);line-height:1.3;margin-bottom:8px}
p{margin:0 0 18px}
.rotulo{font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--suave)}
.grande{font-family:var(--serif);font-weight:300;font-size:clamp(20px,3vw,26px);line-height:1.5}
.nota{font-size:14px;line-height:1.65;color:var(--suave)}

/* ---------- topo fixo ---------- */
.topo{position:sticky;top:0;z-index:50;background:rgba(242,240,233,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linha)}
.topo-in{max-width:1000px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.topo .h-marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.topo .h-marca span{font-family:var(--serif);font-size:19px;letter-spacing:.02em;white-space:nowrap}
.topo nav{display:flex;gap:26px}
.topo nav a{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--suave);
  padding:4px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.topo nav a:hover,.topo nav a.ativo{color:var(--profund);border-color:var(--sol)}

.menu-toggle{display:none;background:none;border:0;padding:8px;margin:-8px;cursor:pointer;
  width:44px;height:44px;align-items:center;justify-content:center}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{
  content:"";display:block;width:22px;height:1px;background:var(--profund);position:relative;transition:transform .25s,opacity .25s}
.menu-toggle span::before{position:absolute;top:-7px}
.menu-toggle span::after{position:absolute;top:7px}
.menu-toggle[aria-expanded="true"] span{background:transparent}
.menu-toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

@media(max-width:680px){
  .menu-toggle{display:flex}
  .topo nav{position:fixed;inset:var(--topo-h) 0 0 0;background:var(--cal);flex-direction:column;
    align-items:center;justify-content:center;gap:34px;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
  .topo nav.aberto{opacity:1;transform:none;pointer-events:auto}
  .topo nav a{font-size:14px}
  body.menu-aberto{overflow:hidden}
  /* backdrop-filter no cabeçalho cria um containing block para os filhos
     position:fixed; remover enquanto o menu está aberto evita que o
     overlay do menu fique preso à altura do cabeçalho. */
  body.menu-aberto .topo{backdrop-filter:none;background:var(--cal)}
}

/* ---------- hero ---------- */
.hero{min-height:calc(100svh - var(--topo-h));display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:56px 24px 48px}
.hero .mono{width:min(240px,56vw);margin-bottom:30px}
.hero .datona{font-family:var(--serif);font-weight:300;font-size:clamp(52px,12vw,120px);line-height:.95;letter-spacing:.02em;margin:24px 0 8px}
.hero .cidade{font-family:var(--serif);font-weight:300;font-size:clamp(28px,6vw,46px)}
.hero .sub{margin-top:6px}
.hero .aviso{margin-top:40px;max-width:52ch}

.contagem{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.contagem .c-item{min-width:64px}
.contagem .c-num{font-family:var(--serif);font-weight:300;font-size:clamp(28px,5vw,40px);line-height:1}
.contagem .c-rot{font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--suave);margin-top:6px;display:block}

.acoes-hero{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:38px;position:relative}
.seta{margin-top:34px;color:var(--suave);text-decoration:none;font-size:11px;letter-spacing:.24em;text-transform:uppercase}

.menu-calendario{position:relative;display:inline-block}
.lista-calendario{list-style:none;margin:0;padding:6px;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--sal);border:1px solid var(--linha);min-width:190px;box-shadow:0 12px 28px rgba(34,65,78,.12);
  opacity:0;visibility:hidden;transition:opacity .18s;z-index:20}
.menu-calendario.aberto .lista-calendario{opacity:1;visibility:visible}
.lista-calendario li{padding-left:0;margin-bottom:0}
.lista-calendario li::before{display:none}
.lista-calendario li a{display:block;padding:11px 14px;font-size:12px;letter-spacing:.06em;text-decoration:none;color:var(--profund)}
.lista-calendario li a:hover{background:var(--cal)}

/* animação única de entrada */
@media(prefers-reduced-motion:no-preference){
  .lamina{stroke-dasharray:140;stroke-dashoffset:140;animation:desenha .9s ease-out forwards}
  .lamina:nth-child(1){animation-delay:.42s}.lamina:nth-child(2){animation-delay:.36s}
  .lamina:nth-child(3){animation-delay:.30s}.lamina:nth-child(4){animation-delay:.24s}
  .lamina:nth-child(5){animation-delay:.18s}.lamina:nth-child(6){animation-delay:.12s}
  .lamina:nth-child(7){animation-delay:.06s}.lamina:nth-child(8){animation-delay:.06s}
  .lamina:nth-child(9){animation-delay:.12s}.lamina:nth-child(10){animation-delay:.18s}
  .lamina:nth-child(11){animation-delay:.24s}.lamina:nth-child(12){animation-delay:.30s}
  .lamina:nth-child(13){animation-delay:.36s}.lamina:nth-child(14){animation-delay:.42s}
  @keyframes desenha{to{stroke-dashoffset:0}}
  .surge{opacity:0;transform:translateY(8px);animation:surge .5s ease-out forwards}
  .surge.s2{animation-delay:.55s}.surge.s3{animation-delay:.7s}.surge.s4{animation-delay:.85s}.surge.s5{animation-delay:1s}
  @keyframes surge{to{opacity:1;transform:none}}
}

/* ---------- divisor horizonte ---------- */
.horizonte{display:block;width:100%;height:26px;margin:0}
section{padding:clamp(52px,10vw,84px) 0}
section.areia{background:var(--mares)}
section.escura{background:var(--profund);color:var(--cal)}
section.escura .rotulo{color:rgba(242,240,233,.72)}
section.escura .nota{color:rgba(242,240,233,.68)}
section.escura a{color:var(--cal)}

.cartao{background:var(--sal);border:1px solid var(--linha);padding:clamp(22px,4vw,28px)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:720px){.g2{grid-template-columns:1fr}}

ul{margin:0 0 18px;padding-left:0;list-style:none}
ul li{padding-left:22px;position:relative;margin-bottom:10px}
ul li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:1px;background:var(--garballo)}

.fato{display:flex;gap:16px;align-items:baseline;border-top:1px solid var(--linha);padding:16px 0}
.fato:last-child{border-bottom:1px solid var(--linha)}
.fato .f-k{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--suave);min-width:132px;flex:none}
.fato .f-v{font-size:16px}
@media(max-width:480px){
  .fato{flex-direction:column;gap:4px}
  .fato .f-k{min-width:0}
}

.btn{display:inline-block;font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;padding:15px 32px;text-decoration:none;border:1px solid var(--profund);color:var(--profund);
  background:none;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--profund);color:var(--cal)}
.btn[aria-expanded="true"]{background:var(--profund);color:var(--cal)}
section.escura .btn{border-color:var(--sol);color:var(--sol)}
section.escura .btn:hover{background:var(--sol);color:var(--profund)}

.breve{display:inline-block;font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  padding:4px 10px;border:1px solid var(--linha);color:var(--suave);vertical-align:middle;margin-left:10px}
section.escura .breve{border-color:rgba(242,240,233,.3);color:rgba(242,240,233,.72)}

footer{background:var(--profund);color:var(--cal);text-align:center;padding:72px 24px 60px}
footer .assin{font-family:var(--serif);font-size:24px}
footer .rotulo{color:rgba(242,240,233,.62);margin-top:10px}
footer a.dominio{text-decoration:none;border-bottom:1px solid rgba(242,240,233,.4)}
footer a.dominio:hover{border-color:var(--sol)}