/* ============================================================
   COLETIVO WILD · NATAL 2026
   Camada de SITE.

   O HTML nasceu como documento A4 para virar PDF. Este arquivo
   reaproveita o mesmo HTML e o apresenta como site: seções de
   largura total, capa em tela cheia, tipografia fluida.

   No fim do arquivo, o @media print devolve o formato A4, então
   imprimir ou salvar em PDF continua funcionando como antes.
   ============================================================ */

@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-300-normal.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-300-italic.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url(fonts/jost-latin-300-normal.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Jost";src:url(fonts/jost-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url(fonts/jost-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --cream:#F4EEE3; --paper:#FAF6EF; --ink:#2B2522; --muted:#6F655D;
  --gold:#B08D57; --line:#DCCFBE;

  --larg: 1080px;          /* largura de leitura */
  --lado: clamp(1.4rem, 5vw, 4rem);
  --secao: clamp(4.5rem, 11vw, 9.5rem);
}
.t-bordo{--accent:#5E1A22; --accent-2:#7A2A33; --on-accent:#F4EAE0}
.t-verde{--accent:#1F3328; --accent-2:#2E4A3B; --on-accent:#EEF0E6}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  font-family:"Cormorant",Georgia,serif;
  color:var(--ink);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}

/* ---------- seções ---------- */

.page{
  position:relative;
  width:100%;
  background:var(--paper);
  padding:var(--secao) 0;
  overflow:hidden;
}
.inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--larg);
  margin:0 auto;
  padding:0 var(--lado);
}
.dark{background:var(--accent);color:var(--on-accent)}

/* moldura e rodapé de página são coisa de papel */
.frame{display:none}
.pfoot{display:none}

/* ---------- tipografia ---------- */

h1,h2,h3{font-weight:300;line-height:1.05;letter-spacing:-.01em}
h2{font-size:clamp(2.1rem,5.2vw,3.5rem);margin-top:.5rem;color:var(--accent)}
.dark h2{color:var(--on-accent)}
h2 em,h1 em{font-style:italic;font-weight:300;color:var(--gold)}
h3{font-size:clamp(1.7rem,4vw,2.6rem);color:var(--accent)}
h4{font-family:"Jost",sans-serif;font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.dark h4{color:var(--gold)}
p{font-size:clamp(1.02rem,.42vw + .92rem,1.2rem);line-height:1.68}

.eyebrow{
  font-family:"Jost",sans-serif;font-size:.7rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold);font-weight:400;
}

.rule{display:flex;align-items:center;gap:1rem;margin:1.9rem 0;color:var(--gold)}
.rule::before,.rule::after{content:"";height:1px;background:currentColor;opacity:.45;flex:1 1 auto}
.spark{width:11px;height:11px;flex:0 0 auto}

/* ---------- capa ---------- */

.cover{
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:calc(var(--secao) * .8) var(--lado);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb,var(--accent-2) 55%,transparent) 0%, transparent 60%),
    var(--accent);
}
.cover .brand{
  font-family:"Jost",sans-serif;letter-spacing:.5em;text-transform:uppercase;
  font-size:clamp(.66rem,1.6vw,.82rem);font-weight:400;padding-left:.5em;
  opacity:.9;
}
.cover-mid{display:flex;flex-direction:column;align-items:center;margin:clamp(2.2rem,6vw,4rem) 0 0}
.emblem-wrap{color:var(--gold);margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.emblem{width:clamp(72px,11vw,124px);height:auto}
.emblem-wrap.small .emblem{width:clamp(52px,7vw,78px)}
.cover h1{
  font-size:clamp(3.4rem,13vw,7.5rem);
  margin-top:.6rem;color:var(--on-accent);line-height:.98;
}
.cover .hero{
  font-style:italic;font-size:clamp(1.3rem,4vw,2.3rem);
  color:var(--gold);margin-top:.7rem;font-weight:300;
}
.cover-foot{margin-top:clamp(2.4rem,7vw,4.5rem);max-width:40rem}
.cover .tag{font-size:clamp(1.05rem,2.4vw,1.35rem);font-style:italic;opacity:.92;line-height:1.5;text-wrap:balance;-webkit-text-wrap:balance}
.city{
  font-family:"Jost",sans-serif;font-size:.64rem;letter-spacing:.28em;
  text-transform:uppercase;margin-top:1.6rem;opacity:.65;
}

/* seta de rolagem, só na capa */
.cover::after{
  content:"";
  position:absolute;left:50%;bottom:2.2rem;
  width:1px;height:clamp(28px,5vh,46px);
  background:linear-gradient(to bottom,transparent,var(--gold));
  opacity:.7;
  animation:desce 2.4s ease-in-out infinite;
}
@keyframes desce{
  0%,100%{transform:translateY(0);opacity:.25}
  50%{transform:translateY(7px);opacity:.8}
}

/* ---------- carta ---------- */

.letter .inner{max-width:52rem}
.lead p{margin-bottom:1.1rem;font-size:clamp(1.05rem,.5vw + .95rem,1.28rem);line-height:1.7}
.lead p:first-child::first-letter{
  font-size:3.6em;float:left;line-height:.78;
  padding:.1em .1em 0 0;color:var(--accent);font-weight:400;
}
.trio{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;
  margin-top:2.8rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.8rem 0;
}
.trio div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem}
.roman{font-size:1.5rem;color:var(--gold);font-weight:300;font-style:italic;line-height:1}
.tname{font-size:1.05rem;color:var(--accent);line-height:1.3}
.sign{margin-top:2.6rem;font-style:italic;font-size:1.1rem}
.sign span{
  font-family:"Jost",sans-serif;font-style:normal;font-size:.68rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
  display:inline-block;margin-top:.3rem;
}

/* ---------- cenário principal ---------- */

.big-num{
  position:absolute;right:var(--lado);top:clamp(1rem,4vw,3rem);
  font-size:clamp(7rem,22vw,16rem);font-style:italic;font-weight:300;
  color:var(--accent);opacity:.06;line-height:1;pointer-events:none;
}
.scene-main h2{font-size:clamp(2.3rem,6vw,4rem)}
.body{max-width:52rem}
.body.two{column-count:2;column-gap:2.6rem;max-width:none}
.body p{margin-bottom:1rem;line-height:1.7}
.body.two p{break-inside:avoid-column}
.body.two p:first-child,
.scene .body p:first-child{
  font-size:clamp(1.2rem,2.4vw,1.5rem);font-style:italic;
  line-height:1.5;color:var(--accent);
}
.dark .body.two p:first-child,
.dark .scene .body p:first-child{color:var(--gold)}

.notes{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.notes li{
  font-family:"Jost",sans-serif;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);
  color:var(--accent);padding:.5rem 1rem;border-radius:999px;
}
.dark .notes li{color:var(--gold)}

/* ---------- cenas II e III ---------- */

.scene-head{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:1.2rem}
.scene-head .roman{font-size:clamp(2.4rem,7vw,4rem);line-height:.85}
.scenes .rule{margin:clamp(3rem,7vw,5rem) 0}

/* ---------- feito à mão ---------- */

.lead-l{font-size:clamp(1.15rem,2.6vw,1.6rem);line-height:1.6;font-style:italic;max-width:44rem}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;margin-top:clamp(2.4rem,6vw,4rem)}
.pillars div{border-top:1px solid color-mix(in srgb,var(--gold) 60%,transparent);padding-top:1.1rem}
.pillars p{font-size:1rem;margin-top:.5rem;line-height:1.6;opacity:.92}

/* ---------- espaço ---------- */

.amgrid{display:grid;grid-template-columns:1fr 1fr;gap:2rem 2.6rem;margin-top:2.4rem}
.am{display:flex;gap:1rem;align-items:flex-start}
.ic{flex:0 0 2rem;width:2rem;height:2rem;color:var(--gold);margin-top:.1rem}
.am p{font-size:1rem;line-height:1.55;margin-top:.15rem;color:#3d3531}
.dark .am p{color:color-mix(in srgb,var(--on-accent) 88%,transparent)}

/* ---------- investimento ---------- */

.price{
  background:var(--accent);color:var(--on-accent);
  padding:clamp(2.2rem,6vw,3.4rem) clamp(1.4rem,5vw,3rem);
  text-align:center;position:relative;border-radius:2px;
  margin-top:2.4rem;
}
.price::after{
  content:"";position:absolute;inset:.6rem;
  border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);
  border-radius:2px;pointer-events:none;
}
.plabel{font-family:"Jost",sans-serif;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.pval{font-size:clamp(3rem,10vw,5.4rem);font-variant-numeric:lining-nums;font-weight:300;line-height:1;margin-top:.6rem}
.pval .cur{font-size:.32em;vertical-align:top;margin-right:.25em;position:relative;top:.5em}
.pval .per{font-size:.28em;font-style:italic;margin-left:.15em;color:var(--gold)}
.pnote{font-size:1rem;font-style:italic;margin-top:.7rem;opacity:.9}
.conds{display:grid;grid-template-columns:1fr 1fr;gap:2rem 2.6rem;margin-top:clamp(2.2rem,5vw,3.2rem)}
.conds p{font-size:1rem;line-height:1.55;margin-top:.35rem}

.table{margin-top:2.2rem;border-top:1px solid var(--line)}
.trow{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--line);font-size:1.02rem;
}
.trow .tval{font-variant-numeric:lining-nums;color:var(--accent)}
.trow:last-child{color:var(--muted);font-style:italic}
.dark .table,.dark .trow{border-color:color-mix(in srgb,var(--gold) 30%,transparent)}
.dark .trow .tval{color:var(--gold)}

/* ---------- mínimo de reserva (mesmo peso do preço) ---------- */

.minimo{
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:clamp(1.4rem,4vw,3rem);
  margin-top:clamp(2rem,5vw,3rem);
  padding:clamp(1.6rem,4vw,2.4rem) clamp(1.4rem,4vw,2.6rem);
  border:1px solid color-mix(in srgb,var(--gold) 70%,transparent);
  background:color-mix(in srgb,var(--accent) 5%,var(--paper));
  border-radius:2px;
}
.min-num{text-align:center;padding-right:clamp(1.2rem,3vw,2.4rem);
  border-right:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.mval{
  font-size:clamp(3.2rem,9vw,5rem);font-weight:300;line-height:.95;
  color:var(--accent);font-variant-numeric:lining-nums;margin-top:.3rem;
}
.mval .per{
  display:block;font-size:.26em;font-style:italic;color:var(--gold);
  margin-top:.35em;letter-spacing:.02em;
}
.min-txt p{font-size:clamp(1rem,.4vw + .9rem,1.12rem);line-height:1.6}
.min-semana{margin-top:.7rem;font-style:italic;color:var(--accent)}
.conds.one{grid-template-columns:1fr}

@media (max-width:640px){
  .minimo{grid-template-columns:1fr;gap:1.2rem;text-align:center}
  .min-num{padding:0 0 1.2rem;border-right:none;
    border-bottom:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
  .min-txt{text-align:left}
}

/* ---------- políticas e faq ---------- */

.faqgrid{display:grid;grid-template-columns:1fr 1fr;gap:2rem 2.6rem;margin-top:2.4rem}
.faq h4{color:var(--accent);line-height:1.4}
.faq p{font-size:1rem;line-height:1.6;margin-top:.5rem;color:#3d3531}

/* ---------- encerramento ---------- */

.closing .inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.closing .rule{justify-content:center;width:min(22rem,80%)}
.closing .lead-l{margin:0 auto}
.final{margin-top:clamp(2.4rem,6vw,3.6rem);font-size:clamp(1.25rem,3vw,1.7rem);font-style:italic;color:var(--gold)}
.brand-end{
  margin-top:clamp(2.6rem,7vw,4.4rem);font-family:"Jost",sans-serif;
  letter-spacing:.5em;text-transform:uppercase;font-size:.8rem;padding-left:.5em;
}

/* ---------- ornamentos ---------- */

.deco-bottom{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;justify-content:center;color:var(--accent);
  opacity:.16;z-index:1;pointer-events:none;
}
.deco-bottom.light{color:var(--gold);opacity:.4}
.pines{height:clamp(48px,7vw,86px)}
.village{width:min(90%,620px);height:auto}

/* ---------- botões e topo fixo ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-family:"Jost",sans-serif;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  border:1px solid var(--gold);
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.btn:hover{background:var(--gold);color:var(--paper);transform:translateY(-1px)}

.btn-grande{
  font-size:clamp(.72rem,1.6vw,.84rem);
  padding:1.15em 2.6em;
  color:var(--gold);background:transparent;
}
.dark .btn-grande{color:var(--gold)}
.dark .btn-grande:hover{background:var(--gold);color:var(--accent)}

.cta-bloco{
  margin-top:clamp(2.2rem,6vw,3.4rem);
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
}
.cta-nota{
  font-family:"Jost",sans-serif;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;opacity:.6;
}

.ico-zap{
  width:1.35em;height:1.35em;flex:0 0 auto;
  display:block;margin-top:-.08em;
}
.btn-nav .ico-zap{width:1.25em;height:1.25em}

/* topo fixo: nasce escondido e entra depois da capa */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem clamp(1rem,4vw,2.4rem);
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid color-mix(in srgb,var(--gold) 28%,transparent);
  transform:translateY(-110%);
  transition:transform .35s ease;
}
.site-nav.vis{transform:none}
.nav-marca{
  font-family:"Jost",sans-serif;font-size:.66rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.nav-marca em{
  font-style:normal;color:var(--gold);
  border-left:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
  margin-left:.7em;padding-left:.7em;
}
.btn-nav{
  font-size:.62rem;padding:.75em 1.5em;color:var(--accent);
  background:transparent;flex:0 0 auto;
}
.btn-nav:hover{background:var(--accent);color:var(--paper);border-color:var(--accent)}

@media (max-width:520px){
  .nav-marca em{display:none}
  .btn-nav{font-size:.6rem;padding:.7em 1.2em}
}

/* ---------- textos justificados ----------
   Só o corpo de texto. Capa, encerramento e os blocos curtos
   continuam centralizados, porque ali justificar não faz sentido. */

.lead p,
.body p,
.min-txt p,
.pillars p,
.am p,
.conds p,
.faq p{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}

/* o encerramento é centralizado de propósito, não justificar lá */
.closing p,
.cover p,
.pnote,
.cta-nota,
.final,
.sign,
.trow{text-align:center}
.trow{text-align:left}
.closing .lead-l{text-align:center}

/* ---------- movimento ao rolar ---------- */

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .cover::after{animation:none}
}

/* ---------- telas estreitas ---------- */

@media (max-width:820px){
  .body.two{column-count:1}
  .pillars,.amgrid,.conds,.faqgrid{grid-template-columns:1fr;gap:1.6rem}
  .trio{grid-template-columns:1fr;gap:1.1rem;padding:1.4rem 0}
  .trio div{flex-direction:row;align-items:baseline;gap:.9rem;text-align:left}
  .roman{font-size:1.25rem}
  .scene-head{gap:.9rem}
  .big-num{opacity:.05}
  .lead p:first-child::first-letter{font-size:3em}
}

/* ============================================================
   IMPRESSÃO · devolve o formato A4 original
   ============================================================ */
@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff}
  .reveal{opacity:1!important;transform:none!important}
  .cover::after{display:none}

  .page{
    width:210mm;height:297mm;padding:0;margin:0 auto;
    overflow:hidden;page-break-after:always;break-after:page;
    background:var(--paper);
  }
  .page:last-child{page-break-after:auto}
  .cover{min-height:0;background:var(--accent);padding:0;
         display:flex;flex-direction:column;align-items:center}
  .inner{max-width:none;padding:30mm 24mm 0}
  .letter .inner,.scene-main .inner,.space .inner,.invest .inner,
  .policy .inner,.faqs .inner{padding-top:26mm}
  .scenes .inner{padding-top:24mm}
  .craft .inner{padding-top:34mm}
  .closing .inner{padding-top:40mm}

  .frame{display:block;position:absolute;inset:10mm;z-index:1;
         border:1px solid color-mix(in srgb,var(--gold) 70%,transparent)}
  .frame::after{content:"";position:absolute;inset:2.2mm;
         border:.5px solid color-mix(in srgb,var(--gold) 35%,transparent)}
  .pfoot{display:flex;position:absolute;left:24mm;right:24mm;bottom:12mm;
         justify-content:space-between;font-family:"Jost",sans-serif;
         font-size:7pt;letter-spacing:.24em;text-transform:uppercase;
         color:var(--muted);z-index:3}
  .dark .pfoot{left:28mm;right:28mm;bottom:16mm;
         color:color-mix(in srgb,var(--on-accent) 60%,transparent)}

  h2{font-size:44pt}h3{font-size:32pt}p{font-size:14.6pt;line-height:1.52}
  .cover h1{font-size:74pt}.cover .hero{font-size:26pt}
  .cover-mid{margin-top:34mm}.cover .brand{margin-top:24mm}
  .cover-foot{position:absolute;bottom:24mm;left:30mm;right:30mm;margin-top:0}
  .big-num{font-size:190pt}
  .body.two{column-count:2}
  .deco-bottom{bottom:22mm;opacity:.22}
  .pines{height:24mm}.village{width:162mm}
  .price{margin-top:0}
  .minimo{margin-top:7mm;padding:6mm 7mm;gap:7mm;
    grid-template-columns:auto 1fr;text-align:left;
    background:color-mix(in srgb,var(--accent) 5%,var(--paper))}
  .min-num{padding:0 7mm 0 0;border-right:.5px solid color-mix(in srgb,var(--gold) 45%,transparent);border-bottom:none;text-align:center}
  .mval{font-size:46pt}
  .mval .per{font-size:12pt}
  .min-txt p{font-size:12.4pt;line-height:1.45}
  .site-nav,.cta-bloco,.cta-fixo{display:none!important}
}