/* ═══════════════════════════════════════════════════════════════
   O RIAD
   Tipografia e cores do brandbook; tudo em vanilla CSS/JS.

   Este arquivo é o desenho do site. O conteúdo vem do CMS; a
   aparência vem daqui. A Camila não mexe neste arquivo — é
   justamente essa separação que garante que o site não quebra
   quando ela troca uma foto.
═══════════════════════════════════════════════════════════════ */

:root {
  /* Só as cinco cores do brandbook. Dia e noite são a mesma marca invertida. */
  --dark:#3F2021; --cream:#EFD19F; --terracotta:#B25C51;
  --wine:#7F3035; --navy:#253746;

  /* DIA — fundo creme, texto marrom */
  --bg:   var(--cream);
  --fg:   var(--dark);
  --fg-2: rgba(63,32,33,.62);
  --line: rgba(63,32,33,.20);
  --panel:    var(--dark);   /* blocos escuros: mapa, contato, rodapé */
  --panel-fg: var(--cream);

  --font:'Addington CF', Georgia,'Times New Roman',serif;
  --mono:'DM Mono',ui-monospace,Menlo,monospace;
  --pad: clamp(1.25rem,5vw,5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
  --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M4 100 V44 Q4 4 50 4 Q96 4 96 44 V100 Z' fill='%23fff'/%3E%3C/svg%3E");
}

/* NOITE — marrom e creme trocam de papel. Como a página inteira fica
   escura, os blocos deixam de ter fundo próprio e passam a ser separados
   por fios de 1px. */
body.night {
  --bg:   var(--dark);
  --fg:   var(--cream);
  --fg-2: rgba(239,209,159,.62);
  --line: rgba(239,209,159,.18);
  --panel:    transparent;
  --panel-fg: var(--cream);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font); background:var(--bg); color:var(--fg);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  transition:background .9s var(--ease), color .9s var(--ease);
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--terracotta);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.mono{font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase}
.display{font-weight:normal;line-height:1.03;letter-spacing:-.02em;text-wrap:balance}
.d-l {font-size:clamp(1.95rem,4.6vw,3.7rem)}
.d-m {font-size:clamp(1.55rem,3vw,2.45rem);line-height:1.12}

/* ─── 03 · GRAIN + PROGRESS ──────────────────────────────────── */
.grain{position:fixed;inset:-50%;z-index:700;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:gr 6s steps(6) infinite}
@keyframes gr{0%{transform:translate(0,0)}20%{transform:translate(-4%,-3%)}40%{transform:translate(3%,-5%)}
  60%{transform:translate(-2%,4%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}}
.prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--terracotta);z-index:950}

/* ─── 04 · NAV ───────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;height:76px;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  transition:transform .5s var(--ease),opacity .35s,background .5s}
.nav.solid{background:color-mix(in srgb,var(--dark) 92%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.nav.up{transform:translateY(-102%);opacity:0;pointer-events:none}
.nav__logo img{height:21px;width:auto;
  filter:brightness(0) invert(1) sepia(.25) saturate(2) hue-rotate(-5deg) brightness(1.05)}
.nav__right{display:flex;align-items:center;gap:.85rem}

/* Day / night switch */
.sw{position:relative;width:70px;height:30px;border:1px solid rgba(239,209,159,.4);
  background:transparent;cursor:pointer;border-radius:30px;flex-shrink:0}
.sw i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:var(--cream);transition:transform .55s var(--ease),background .55s}
body.night .sw i{transform:translateX(40px);background:var(--terracotta)}
.sw span{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--mono);
  font-size:.48rem;letter-spacing:.14em;color:var(--cream);opacity:.6;transition:opacity .4s}
.sw .s-d{right:9px}.sw .s-n{left:9px;opacity:0}
body.night .sw .s-d{opacity:0}body.night .sw .s-n{opacity:.6}

.lang{display:flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.14em;color:var(--cream);flex-shrink:0}
.lang a{opacity:.42;transition:opacity .3s}
.lang a.on,.lang a:hover{opacity:1}
.lang i{opacity:.22;font-style:normal}

.cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  padding:.72rem 1.4rem;border:1px solid rgba(239,209,159,.42);background:rgba(42,20,21,.26);
  backdrop-filter:blur(10px);color:var(--cream);font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;transition:color .4s,border-color .4s}
.cta span{position:relative;z-index:1}
.cta::before{content:'';position:absolute;inset:0;background:var(--cream);
  transform:translateY(101%);transition:transform .45s var(--ease)}
.cta:hover{color:var(--dark);border-color:var(--cream)}
.cta:hover::before{transform:translateY(0)}

/* ─── 05 · HERO (arch mask reveal + parallax) ────────────────── */
.hero{position:relative;height:100svh;min-height:600px;background:var(--dark);
  display:grid;place-items:center;overflow:hidden}
.hero__frame{position:absolute;inset:0;
  -webkit-mask-image:var(--arch);mask-image:var(--arch);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center 58%;mask-position:center 58%;
  -webkit-mask-size:34% 60%;mask-size:34% 60%;
  animation:archOpen 2s var(--ease) .15s forwards}
@keyframes archOpen{to{-webkit-mask-size:260% 260%;mask-size:260% 260%}}
.hero__img{position:absolute;inset:0;background-size:cover;background-position:center 45%;
  will-change:transform;transition:background-image .8s}
.hero__veil{position:absolute;inset:0;background:
  radial-gradient(ellipse 80% 60% at 50% 45%,rgba(0,0,0,.1),rgba(0,0,0,.6)),
  linear-gradient(to bottom,rgba(42,20,21,.5),rgba(0,0,0,.15) 45%,rgba(42,20,21,.75))}
.hero__c{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:1.8rem;
  will-change:transform}
.hero__logo{width:clamp(210px,29vw,370px);
  filter:brightness(0) invert(1) sepia(.25) saturate(2) hue-rotate(-5deg) brightness(1.05);
  opacity:0;animation:fadeUp 1.2s var(--ease) 1s forwards}
.hero__rule{width:0;height:1px;background:var(--cream);opacity:0;
  animation:ruleIn 1.2s var(--ease) 1.4s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ruleIn{to{width:52px;opacity:.45}}
.hero__cue{position:absolute;bottom:2rem;left:50%;width:1px;height:52px;z-index:3;
  background:linear-gradient(to bottom,rgba(239,209,159,.7),transparent);
  transform:translateX(-50%);opacity:0;animation:fadeUp 1s var(--ease) 2.6s forwards,cue 2.2s ease-in-out 3s infinite}
@keyframes cue{0%,100%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(.6)}}

/* ─── SECTION SHELL ──────────────────────────────────────────── */
.sec{position:relative;padding:clamp(5rem,11vw,10rem) var(--pad)}
.sec__ix{position:absolute;top:clamp(2rem,5vw,3.5rem);left:var(--pad);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;opacity:.45}
.wrap{max-width:1240px;margin:0 auto}

/* ─── 07 · STORY — word-by-word scroll reveal ────────────────── */
.story__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.story__head{position:sticky;top:150px}
.story__mark{display:flex;align-items:center;gap:1rem;margin-top:1.8rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta)}
.story__mark::before{content:'';width:40px;height:1px;background:currentColor}
.reveal-text{font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.78;margin-bottom:1.7rem}
.reveal-text w{opacity:.16;transition:opacity .35s linear;display:inline-block}
.reveal-text w.lit{opacity:1}
.quote{font-style:italic;font-size:clamp(1.35rem,2.6vw,2.05rem);line-height:1.32;color:var(--terracotta);
  margin:2.5rem 0;padding-left:1.6rem;border-left:1px solid currentColor}

/* ─── 10 · AERIAL MAP ────────────────────────────────────────── */
.map-sec{background:var(--panel);color:var(--panel-fg);border-block:1px solid var(--line)}
.map-sec .sec__ix{color:var(--cream)}
.map{position:relative;margin-top:clamp(2rem,4vw,3.5rem);overflow:hidden;
  border:1px solid rgba(239,209,159,.18)}
.map__img{width:100%;display:block;filter:saturate(.85) brightness(.92);transition:filter .6s}
.map:hover .map__img{filter:saturate(1) brightness(1)}
.hot{position:absolute;width:34px;height:34px;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(239,209,159,.75);background:rgba(42,20,21,.45);
  backdrop-filter:blur(4px);cursor:pointer;display:grid;place-items:center;
  font-family:var(--mono);font-size:.58rem;color:var(--cream);
  transition:background .35s,transform .35s var(--ease),border-color .35s}
.hot::before{content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(239,209,159,.35);animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{transform:scale(.85);opacity:.8}70%,100%{transform:scale(1.5);opacity:0}}
.hot:hover,.hot.on{background:var(--terracotta);border-color:var(--terracotta);transform:translate(-50%,-50%) scale(1.22)}
.hot:hover::before,.hot.on::before{animation:none;opacity:0}

.map__card{position:absolute;z-index:5;width:min(280px,70vw);background:var(--dark);
  border:1px solid rgba(239,209,159,.25);padding:0;pointer-events:none;
  opacity:0;transform:translateY(8px) scale(.97);transition:opacity .35s,transform .45s var(--ease)}
.map__card.on{opacity:1;transform:none}
.map__card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.map__card div{padding:.9rem 1rem 1.1rem}
.map__card b{display:block;font-weight:normal;font-size:1.05rem;margin-bottom:.35rem}
.map__card p{font-size:.78rem;line-height:1.6;color:rgba(239,209,159,.62)}
.map__hint{margin-top:1rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(239,209,159,.45)}

.map__list{display:none;list-style:none;margin-top:1.5rem}
.map__list li{display:grid;grid-template-columns:2.2rem 1fr;gap:1rem;padding:1.1rem 0;
  border-top:1px solid rgba(239,209,159,.14)}
.map__list img{grid-column:2;margin-top:.8rem;aspect-ratio:3/2;object-fit:cover;width:100%}
.map__list b{font-weight:normal;font-size:1.15rem;display:block}
.map__list p{font-size:.82rem;line-height:1.65;color:rgba(239,209,159,.6);margin-top:.3rem}
.map__list span{font-family:var(--mono);font-size:.6rem;color:var(--terracotta);padding-top:.35rem}

/* ─── 11 · HORIZONTAL PINNED GALLERY ─────────────────────────── */
.hgal{position:relative;background:var(--bg)}
.hgal__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;
  flex-direction:column;justify-content:center}
.hgal__bar{display:flex;justify-content:space-between;align-items:center;
  padding:0 var(--pad) 1.5rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
.hgal__track{display:flex;gap:clamp(1rem,2vw,2rem);padding:0 var(--pad);will-change:transform}
.hgal__s{position:relative;flex:0 0 clamp(240px,34vw,470px);height:min(56vh,470px);overflow:hidden;
  background:color-mix(in srgb,var(--fg) 10%,transparent)}
.hgal__s img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.hgal__s:hover img{transform:scale(1.05)}
.hgal__s figcaption{position:absolute;left:0;bottom:0;background:var(--bg);color:var(--fg);
  padding:.6rem 1rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase}
.hgal__s:nth-child(even){align-self:flex-end;height:min(42vh,350px)}
.hgal__line{margin:1.5rem var(--pad) 0;height:1px;background:var(--line);position:relative}
.hgal__line i{position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--terracotta)}

/* ─── 12 · CONTACT ───────────────────────────────────────────── */
.contact{position:relative;background:var(--panel);color:var(--panel-fg);overflow:hidden;border-top:1px solid var(--line)}
.contact .sec__ix{color:var(--cream)}
.contact__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.1fr;
  gap:clamp(2.5rem,6vw,6rem);align-items:start}
.contact__list{display:flex;flex-direction:column;margin-top:2.5rem}
.contact__list a,.contact__list span{display:block;padding:.7rem 0;
  border-bottom:1px solid rgba(239,209,159,.12);font-size:.92rem;color:rgba(239,209,159,.72);
  transition:color .3s,padding-left .35s var(--ease)}
.contact__list a:hover{color:var(--cream);padding-left:.5rem}

.form{display:grid;gap:1.7rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.7rem}
.f{position:relative;padding-top:1.15rem}
.f input,.f select,.f textarea{width:100%;background:transparent;border:none;
  border-bottom:1px solid rgba(239,209,159,.22);padding:.5rem 0;font-size:1rem;color:var(--cream);
  outline:none;appearance:none;-webkit-appearance:none;border-radius:0;transition:border-color .35s}
.f textarea{min-height:2.7rem;height:2.7rem;resize:none;overflow:hidden;line-height:1.6}
.f label{position:absolute;left:0;top:1.45rem;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(239,209,159,.4);
  pointer-events:none;transform-origin:left;
  transition:transform .38s var(--ease),color .38s,opacity .3s}
.f input:focus~label,.f textarea:focus~label,.f.filled label{
  transform:translateY(-1.5rem) scale(.78);color:var(--terracotta)}
.f select~label,.f--up label{transform:translateY(-1.5rem) scale(.78)}
.f input[type=date]{cursor:pointer}
.f input[type=date]::-webkit-calendar-picker-indicator{
  filter:invert(1) sepia(.4) saturate(3) hue-rotate(-10deg);cursor:pointer;opacity:.7}
.f input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:1}
/* Enquanto não há data escolhida, o dd/mm/aaaa fica discreto */
.f:not(.filled) input[type=date]::-webkit-datetime-edit{color:rgba(239,209,159,.3)}
.f input::placeholder,.f textarea::placeholder{color:rgba(239,209,159,.3);font-style:italic}
.f input:focus,.f select:focus,.f textarea:focus{border-bottom-color:var(--terracotta)}
.f select{cursor:pointer;color:var(--cream);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23B25C51' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .2rem center}
.f select option{background:var(--dark);color:var(--cream)}
.form__note{font-size:.78rem;line-height:1.7;color:rgba(239,209,159,.5);max-width:46ch}
.form__note a{color:rgba(239,209,159,.85);text-decoration:underline;text-underline-offset:3px;
  transition:color .3s}
.form__note a:hover{color:var(--cream)}

/* ─── POLÍTICA DE PRIVACIDADE (modal) ────────────────────────── */
.policy{border:none;padding:0;background:transparent;color:var(--cream);
  max-width:min(620px,92vw);width:100%;margin:auto}
.policy::backdrop{background:rgba(28,14,15,.78);backdrop-filter:blur(5px)}
.policy__in{position:relative;background:var(--dark);
  border:1px solid rgba(239,209,159,.22);
  padding:clamp(1.6rem,4vw,2.6rem);max-height:84svh;overflow-y:auto}
.policy__x{position:absolute;top:1rem;right:1rem;width:34px;height:34px;
  display:grid;place-items:center;background:transparent;cursor:pointer;
  border:1px solid rgba(239,209,159,.28);color:var(--cream);
  transition:background .3s,color .3s}
.policy__x:hover{background:var(--cream);color:var(--dark)}
.policy h2{font-size:clamp(1.35rem,2.6vw,1.8rem);font-weight:normal;
  line-height:1.15;letter-spacing:-.015em;margin-bottom:.5rem;padding-right:2.5rem}
.policy__date{font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--terracotta);display:block;margin-bottom:1.7rem}
.policy h3{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--terracotta);font-weight:400;margin:1.6rem 0 .55rem}
.policy p,.policy li{font-size:.88rem;line-height:1.72;color:rgba(239,209,159,.72)}
.policy ul{margin:.3rem 0 0 1.05rem}
.policy li{margin-bottom:.3rem}
.policy a{color:var(--cream);text-decoration:underline;text-underline-offset:3px}

.submit{position:relative;overflow:hidden;justify-self:start;min-width:250px;
  background:var(--cream);color:var(--dark);border:none;padding:1.1rem 2.2rem;cursor:pointer;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  transition:color .4s var(--ease)}
.submit span{position:relative;z-index:1}
.submit::before{content:'';position:absolute;inset:0;background:var(--terracotta);
  transform:translateY(101%);transition:transform .45s var(--ease)}
.submit:hover{color:#fff}
.submit:hover::before{transform:translateY(0)}

/* ─── 13 · FOOTER with reactive wordmark ─────────────────────── */
.foot{background:var(--panel);color:var(--panel-fg);border-top:1px solid var(--line);padding:4rem var(--pad) 2rem;overflow:hidden}
.foot__logo{display:inline-block;margin-bottom:1.3rem;opacity:.85;transition:opacity .3s}
.foot__logo:hover{opacity:1}
.foot__logo img{height:20px;width:auto;
  filter:brightness(0) invert(1) sepia(.25) saturate(2) hue-rotate(-5deg) brightness(1.05)}
.foot__tag{font-style:italic;font-size:1rem;line-height:1.5;
  color:rgba(239,209,159,.5);max-width:24ch}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem}
.foot__l{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--terracotta);display:block;margin-bottom:1.1rem}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.foot a,.foot li span{font-size:.9rem;color:rgba(239,209,159,.55);transition:color .3s}
.foot a:hover{color:var(--cream)}
.foot__bot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid rgba(239,209,159,.08);margin-top:2.5rem;padding-top:1.5rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(239,209,159,.3)}
.foot__bot nav{display:flex;gap:1.4rem}

/* ─── REVEAL ─────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.on{opacity:1;transform:none}
.dl1{transition-delay:.08s}.dl2{transition-delay:.18s}.dl3{transition-delay:.28s}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:1040px){
  .story__grid{grid-template-columns:1fr}
  .story__head{position:static}
  .contact__grid{grid-template-columns:1fr}
  /* the aerial map gives way to a plain list */
  .map,.map__hint{display:none}
  .map__list{display:block}
}
@media (max-width:720px){
  .nav{height:62px}
  .form__row{grid-template-columns:1fr}
  .submit{width:100%}
  .foot__grid{grid-template-columns:1fr}
  .hgal__s:nth-child(even){align-self:auto;height:min(52vh,440px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1!important;transform:none!important;transition:none}
  .grain,.hero__cue,.hot::before{animation:none!important}
  .hero__frame{animation:none;-webkit-mask-size:260% 260%;mask-size:260% 260%}
  .hero__logo,.hero__rule{opacity:1;animation:none;width:auto}
  .reveal-text w{opacity:1!important}
}

/* ─── Política vinda do CMS (markdown renderizado) ───────────── */
.policy__body > :first-child{margin-top:0}
.policy__body p + ul{margin-top:.3rem}

/* ═══════════════════════════════════════════════════════════════
   PÁGINAS INTERNAS — Sobre, FAQ, Imprensa, 404
   Mesmas variáveis da home, então o modo noite vale aqui também.
═══════════════════════════════════════════════════════════════ */
.eyebrow{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--terracotta);margin-bottom:1.1rem}
.center{text-align:center}
.center .display{margin-inline:auto;max-width:22ch}
.wrap--md{max-width:860px}
.sec--tight{padding-block:clamp(3.5rem,7vw,6rem) 0}
.sec--alt{background:color-mix(in srgb,var(--fg) 5%,var(--bg))}
.sec--panel{background:var(--panel);color:var(--panel-fg);border-block:1px solid var(--line)}
.body{font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.8;color:var(--fg-2);margin-top:1.3rem}
.arrow{display:inline-flex;align-items:center;gap:.55rem;margin-top:2rem;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta);
  border-bottom:1px solid currentColor;padding-bottom:.3rem;transition:gap .35s var(--ease)}
.arrow:hover{gap:.9rem}

/* Topo */
.phero{position:relative;min-height:clamp(420px,68svh,720px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--dark);color:var(--cream)}
.phero--plain{min-height:clamp(340px,50svh,520px)}
.phero__img{position:absolute;inset:-6% 0 0;background-size:cover;background-position:center 40%;will-change:transform}
.phero__veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(42,20,21,.55),rgba(42,20,21,.25) 40%,rgba(42,20,21,.85))}
.phero__c{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;
  padding:clamp(7rem,14vw,10rem) var(--pad) clamp(2.5rem,6vw,4.5rem)}
.phero .display{max-width:16ch}
.phero__eyebrow{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(239,209,159,.85);margin:1.6rem 0 1rem}
.phero__sub{max-width:52ch;margin-top:1.2rem;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.7;color:rgba(239,209,159,.75)}
.crumb{display:flex;gap:.6rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(239,209,159,.55)}
.crumb a:hover{color:var(--cream)}
.crumb i{font-style:normal;opacity:.5}

.callout{font-size:clamp(1.02rem,1.3vw,1.15rem);line-height:1.85;padding-left:1.6rem;
  border-left:2px solid var(--terracotta)}

/* Foto + texto */
.portrait{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5.5rem);align-items:center}
.portrait__img{aspect-ratio:4/5;overflow:hidden;-webkit-mask-image:var(--arch);mask-image:var(--arch);
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
.portrait__img img{width:100%;height:100%;object-fit:cover}

/* Linha do tempo */
.tl{list-style:none;margin-top:3rem;border-left:1px solid var(--line)}
.tl li{display:grid;grid-template-columns:9rem 1fr;gap:1.5rem;padding:0 0 2.6rem 1.8rem;position:relative}
.tl li::before{content:"";position:absolute;left:-5px;top:.45rem;width:9px;height:9px;border-radius:50%;background:var(--terracotta)}
.tl__ano{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);padding-top:.3rem}
.tl h3{font-weight:normal;font-size:1.25rem;margin-bottom:.5rem}
.tl p{color:var(--fg-2);line-height:1.75}

/* Valores */
.vals{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:3.5rem;
  background:rgba(239,209,159,.14);border:1px solid rgba(239,209,159,.14)}
.vals li{background:var(--dark);padding:2.2rem 2rem}
body.night .vals li{background:var(--bg)}
.vals__n{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--terracotta)}
.vals h3{font-weight:normal;font-size:1.2rem;margin:1rem 0 .7rem;color:var(--cream)}
.vals p{font-size:.9rem;line-height:1.7;color:rgba(239,209,159,.6)}

/* Imprensa */
.press-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:3rem 0 1rem}
.press{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem;
  min-height:240px;padding:1.8rem;border:1px solid var(--line);transition:border-color .35s,background .35s}
.press:hover{border-color:var(--terracotta);background:color-mix(in srgb,var(--terracotta) 6%,transparent)}
.press__pub{font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.1}
.press__foot{display:flex;flex-direction:column;gap:.6rem;padding-right:1.5rem}
.press__meta{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta)}
.press__t{font-size:.92rem;line-height:1.6;color:var(--fg-2)}
.press__arrow{position:absolute;right:1.4rem;bottom:1.6rem;color:var(--terracotta);transition:transform .35s var(--ease)}
.press:hover .press__arrow{transform:translate(3px,-3px)}
.case{padding:2.4rem 0;border-top:1px solid var(--line)}
.case:first-of-type{margin-top:2.5rem}
.case__eyebrow{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta)}
.case h3{font-weight:normal;font-size:clamp(1.3rem,2vw,1.6rem);margin:.8rem 0 1rem}
.case p{line-height:1.8;color:var(--fg-2)}
.case .arrow{margin-top:1.4rem}

/* FAQ */
.faq-layout{display:grid;grid-template-columns:220px 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.faq-side{position:sticky;top:110px}
.faq-side ul{list-style:none;display:flex;flex-direction:column;gap:.8rem}
.faq-side a{color:var(--fg-2);transition:color .3s}
.faq-side a:hover{color:var(--terracotta)}
.faq-cat{margin-bottom:3.5rem;scroll-margin-top:110px}
.faq-cat__t{font-family:var(--mono);font-weight:400;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--terracotta);margin-bottom:1rem}
.faq{border-top:1px solid var(--line)}
.faq:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;
  padding:1.3rem 0;font-size:clamp(1.02rem,1.3vw,1.15rem);line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--terracotta);transition:transform .35s var(--ease)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq__a{padding:0 2.5rem 1.6rem 0;color:var(--fg-2);line-height:1.8}
.faq__a a{color:var(--terracotta);text-decoration:underline;text-underline-offset:3px}

/* Faixa de chamada */
.strip{background:var(--panel);color:var(--panel-fg);border-top:1px solid var(--line);
  padding:clamp(4.5rem,9vw,7rem) var(--pad);text-align:center}
.strip__in{max-width:640px;margin:0 auto}
.strip__eyebrow{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--terracotta);margin-bottom:1.1rem}
.strip p{margin:1.3rem auto 2.2rem;line-height:1.8;color:rgba(239,209,159,.65)}

/* 404 */
.err{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;
  background:var(--dark);color:var(--cream);padding:8rem var(--pad) 4rem}
.err__arch{position:absolute;width:min(420px,70vw);bottom:0;left:50%;transform:translateX(-50%);opacity:.14;color:var(--cream)}
.err__c{position:relative;text-align:center;max-width:560px}
.err__c .display{margin-bottom:1.2rem}
.err__c p{line-height:1.8;color:rgba(239,209,159,.7)}
.err__links{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:center;align-items:center;margin-top:2.4rem}
.err__links .arrow{margin-top:0}

@media (max-width:1040px){
  .portrait,.faq-layout{grid-template-columns:1fr}
  .faq-side{position:static}
  .vals,.press-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .vals,.press-grid{grid-template-columns:1fr}
  .tl li{grid-template-columns:1fr;gap:.4rem}
}

/* ═══════════════════════════════════════════════════════════════
   MODO EDIÇÃO — só aparece para quem abriu o site com ?editar
═══════════════════════════════════════════════════════════════ */
.edit-hover{outline:2px dashed var(--terracotta)!important;outline-offset:4px}
.edit-pencil{position:fixed;z-index:1000;display:none;align-items:center;gap:.45rem;
  padding:.45rem .8rem;background:var(--terracotta);color:#fff;border-radius:999px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 6px 20px rgba(0,0,0,.25);white-space:nowrap}
.edit-pencil.on{display:inline-flex}
.edit-bar{position:fixed;left:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:1001;
  display:flex;gap:.8rem;align-items:center;padding:.6rem .9rem;border-radius:999px;
  background:var(--dark);color:var(--cream);border:1px solid rgba(239,209,159,.3);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.edit-bar a{color:var(--terracotta);text-decoration:underline;text-underline-offset:3px}