/* ==========================================================
   Marina Txupē · floresta escura, cinematográfico
   ========================================================== */

:root{
  --bg:        #0B100C;
  --bg-2:      #0F1611;
  --surface:   #141C16;
  --line:      rgba(217,199,163,.14);
  --ink:       #EDE7DA;
  --ink-soft:  #B6BCAE;
  --ink-mute:  #8B9385;
  --urucum:    #C4622D;
  --urucum-lt: #E08246;
  --sand:      #D9C7A3;
  --leaf:      #4F6B4A;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw: 1120px;
  --pad: clamp(20px, 5vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------- grão de filme ---------- */
.grain{
  position:fixed; inset:-50%;
  pointer-events:none; z-index:9;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- tipografia ---------- */
h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:.005em; margin:0; }
h1{ font-size:clamp(56px,12vw,132px); line-height:.92; }
h1 em{ font-style:italic; color:var(--sand); }
h2{ font-size:clamp(30px,4.4vw,52px); line-height:1.12; margin-bottom:.6em; }
h3{ font-size:clamp(21px,2.2vw,26px); line-height:1.25; }
p{ margin:0 0 1.15em; }

.kicker{
  font-family:var(--sans); font-size:12px; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--urucum); margin-bottom:1.4em;
}
.eyebrow{
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:2.2em;
}
.lead{ font-size:clamp(17px,1.7vw,21px); color:var(--ink-soft); max-width:46ch; }
.sub{ color:var(--ink-mute); max-width:58ch; }
.center{ text-align:center; }
.center.sub{ margin-inline:auto; }
strong{ font-weight:500; color:var(--sand); }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap.narrow{ max-width:760px; }
.section{ padding:clamp(74px,8.5vw,116px) 0; position:relative; }

.two-col{
  display:grid; gap:clamp(36px,6vw,80px);
  grid-template-columns:1fr 1fr; align-items:center;
}
.two-col.reverse .col-text{ order:2; }

/* ---------- topbar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px var(--pad);
  background:linear-gradient(to bottom, rgba(11,16,12,.92), rgba(11,16,12,0));
  backdrop-filter:blur(2px);
}
.brand{
  font-family:var(--serif); font-size:20px; letter-spacing:.02em;
  text-decoration:none; color:var(--ink);
}
.topbar nav{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.topbar nav a{
  font-size:13px; letter-spacing:.06em; text-decoration:none;
  color:var(--ink-soft); transition:color .3s ease;
}
.topbar nav a:hover{ color:var(--sand); }
.nav-cta{
  border:1px solid var(--line); border-radius:999px;
  padding:8px 18px; color:var(--sand) !important;
}
.nav-cta:hover{ border-color:var(--urucum); }
@media (max-width:820px){
  .topbar nav a:not(.nav-cta){ display:none; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:120px var(--pad) 90px;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 85% at 72% 34%, rgba(11,16,12,.18), rgba(11,16,12,.82) 68%, #0B100C 100%),
    linear-gradient(to bottom, rgba(11,16,12,.62), rgba(11,16,12,.2) 42%, rgba(11,16,12,.92) 88%, #0B100C 100%),
    url("img/floresta-rio.jpg") center 38%/cover no-repeat;
  filter:saturate(.5) contrast(1.08) brightness(.72);
  transform:scale(1.06);
}
.hero-inner{ position:relative; z-index:1; max-width:var(--maxw); margin-inline:auto; width:100%; }
.hero h1{ margin-bottom:.35em; }
.hero .lead{ margin-bottom:2.4em; }

.scroll-hint{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  z-index:1; width:1px; height:56px; background:var(--line); overflow:hidden;
}
.scroll-hint span{
  position:absolute; inset:0; display:block; background:var(--urucum);
  animation:drop 2.6s ease-in-out infinite;
}
@keyframes drop{
  0%{ transform:translateY(-100%); }
  60%,100%{ transform:translateY(100%); }
}

/* ---------- botões ---------- */
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; }
.cta-row.center-row{ justify-content:center; }
.btn{
  display:inline-block; text-decoration:none;
  font-size:14px; letter-spacing:.1em; text-transform:uppercase;
  padding:15px 30px; border-radius:2px; border:1px solid transparent;
  transition:background-color .3s ease, border-color .3s ease, color .3s ease;
}
.btn-primary{ background:var(--urucum); color:#12100C; font-weight:500; }
.btn-primary:hover{ background:var(--urucum-lt); }
.btn-ghost{ border-color:var(--line); color:var(--ink-soft); }
.btn-ghost:hover{ border-color:var(--sand); color:var(--sand); }
a.btn.reveal{ align-self:flex-start; }

/* ---------- caminho ---------- */
.caminho{ background:linear-gradient(to bottom, var(--bg), var(--bg-2)); }
.col-img{ margin:0; }
.col-img img{
  width:100%; border-radius:2px;
  filter:saturate(.7) contrast(1.04) brightness(.92);
}
.col-img figcaption{
  margin-top:14px; font-size:12.5px; letter-spacing:.04em;
  color:var(--ink-mute); line-height:1.6;
}
.quote-line{
  border-left:1px solid var(--urucum); padding-left:20px;
  font-family:var(--serif); font-size:clamp(19px,2vw,23px);
  font-style:italic; color:var(--sand); line-height:1.45;
}

/* ---------- faixa ---------- */
.band{ position:relative; min-height:44svh; display:grid; place-items:center; overflow:hidden; }
.band-img{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 120% at 50% 50%, rgba(79,107,74,.22), transparent 68%),
    radial-gradient(40% 80% at 20% 100%, rgba(196,98,45,.14), transparent 70%),
    linear-gradient(to bottom, var(--bg-2), #0A0E0B 55%, var(--bg-2));
}
.band::before,.band::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:min(520px,60vw); height:1px; background:var(--line);
}
.band::before{ top:0; }
.band::after{ bottom:0; }
.band-quote{
  position:relative; margin:0; padding:0 var(--pad);
  max-width:820px; text-align:center;
}
.band-quote p{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(24px,3.6vw,42px); line-height:1.3;
  color:var(--ink); margin:0;
}

/* ---------- cards ---------- */
.cards{
  display:grid; gap:clamp(16px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  margin-top:clamp(40px,5vw,64px);
}
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:3px; padding:clamp(28px,3vw,38px);
  transition:border-color .35s ease, transform .35s ease;
  display:flex; flex-direction:column;
}
.card p:not(.card-meta){ margin-bottom:1.4em; }
.card .card-meta{ margin-top:auto; }
.card:hover{ border-color:rgba(196,98,45,.5); transform:translateY(-3px); }
.card-num{
  font-family:var(--serif); font-size:15px; letter-spacing:.2em;
  color:var(--urucum); display:block; margin-bottom:18px;
}
.card h3{ margin-bottom:.55em; }
.card p{ color:var(--ink-soft); font-size:15.5px; }
.card-meta{
  font-size:12px !important; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mute) !important; margin-bottom:0 !important;
  padding-top:14px; border-top:1px solid var(--line);
}

/* ---------- voz ---------- */
.voz{ background:var(--bg-2); }
.voz .col-text{ display:flex; flex-direction:column; align-items:flex-start; }
.stack{ position:relative; margin:0; }
.stack img:first-child{ width:78%; }
.stack .stack-2{
  position:absolute; right:0; bottom:-8%; width:52%;
  border:6px solid var(--bg-2);
}
.tick-list{ list-style:none; margin:0 0 2em; padding:0; }
.tick-list li{
  position:relative; padding-left:26px; margin-bottom:12px;
  color:var(--ink-soft); font-size:15.5px;
}
.tick-list li::before{
  content:""; position:absolute; left:0; top:11px;
  width:9px; height:1px; background:var(--urucum);
}

/* ---------- preparo ---------- */
.preparo{ background:linear-gradient(to bottom, var(--bg-2), var(--bg)); }
.prep-grid{
  display:grid; gap:clamp(16px,2.4vw,34px);
  grid-template-columns:1fr 1fr;
  margin-top:clamp(40px,5vw,60px);
}
@media (max-width:700px){ .prep-grid{ grid-template-columns:1fr; } }
.prep{ padding:clamp(24px,2.6vw,32px); border-top:1px solid var(--line); }
.prep h3{ margin-bottom:.6em; font-size:clamp(19px,2vw,23px); }
.prep p{ color:var(--ink-soft); font-size:15.5px; }
.prep.warn{
  border-top-color:var(--urucum);
  background:rgba(196,98,45,.055);
  grid-column:1/-1;
}

/* ---------- agenda ---------- */
.agenda{ background:var(--bg); }
.event{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,48px);
  align-items:center;
  background:var(--surface); border:1px solid var(--line); border-left:2px solid var(--urucum);
  border-radius:3px; padding:clamp(28px,3.4vw,44px);
  margin:clamp(40px,5vw,60px) 0 clamp(30px,4vw,44px);
}
.event-date{ text-align:center; line-height:1; }
.event-date .d{
  display:block; font-family:var(--serif);
  font-size:clamp(52px,7vw,80px); color:var(--sand);
}
.event-date .m{
  display:block; margin-top:8px; font-size:12px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-mute);
}
.event-body h3{ margin-bottom:.4em; }
.event-body p{ color:var(--ink-soft); font-size:15.5px; margin-bottom:.5em; }
.event-where{ color:var(--sand) !important; letter-spacing:.03em; }
.event-links{ margin-bottom:0 !important; font-size:14.5px !important; }
.event-links a{ color:var(--urucum-lt); text-decoration:none; border-bottom:1px solid rgba(224,130,70,.4); }
.event-links a:hover{ border-bottom-color:var(--urucum-lt); }
@media (max-width:620px){
  .event{ grid-template-columns:1fr; text-align:left; }
  .event-date{ display:flex; align-items:baseline; gap:12px; text-align:left; }
  .event-date .d{ font-size:44px; }
  .event-date .m{ margin-top:0; }
}

/* ---------- perguntas ---------- */
.qa{ border-bottom:1px solid var(--line); padding:6px 0; }
.qa summary{
  cursor:pointer; list-style:none; padding:20px 30px 20px 0;
  font-family:var(--serif); font-size:clamp(19px,2vw,23px);
  color:var(--ink); position:relative;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-size:20px; font-weight:300; color:var(--urucum);
}
.qa[open] summary::after{ content:"–"; }
.qa p{ color:var(--ink-soft); font-size:15.5px; padding:0 40px 18px 0; margin:0; }
#perguntas .kicker, #perguntas h2{ text-align:center; }
#perguntas h2{ margin-bottom:1.4em; }

/* ---------- contato ---------- */
.contato{
  background:
    radial-gradient(80% 100% at 50% 100%, rgba(196,98,45,.13), transparent 70%),
    var(--bg-2);
}
.contato .sub{ margin:0 auto 2.4em; }

/* ---------- rodapé ---------- */
.footer{ background:var(--bg); border-top:1px solid var(--line); padding:56px 0 44px; }
.foot-brand{ font-family:var(--serif); font-size:22px; color:var(--sand); margin-bottom:1.2em; }
.legal{
  font-size:12.5px; line-height:1.75; color:var(--ink-mute);
  max-width:78ch; margin-bottom:1.6em;
}
.copy{ font-size:12.5px; color:var(--ink-mute); margin:0; }

/* ---------- reveal ---------- */
html.js .reveal{ opacity:0; transform:translateY(18px); }
html.js .reveal.in{ opacity:1; transform:none; transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1); }

/* ---------- responsivo ---------- */
@media (max-width:860px){
  .two-col{ grid-template-columns:1fr; }
  .two-col.reverse .col-text{ order:0; }
  .stack{ margin-top:20px; }
  .stack img:first-child{ width:86%; }
}

/* ---------- acessibilidade / movimento ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  html.js .reveal{ opacity:1; transform:none; transition:none; }
  .scroll-hint span{ animation:none; opacity:.5; }
  .card:hover{ transform:none; }
}