/* ============================================================
   INSTITUTO DIALÉTICA — site institucional
   Sistema de design: "Canal / Igapó"
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Cores derivadas da identidade existente (logotipo #8C1B11)
     e da fotografia de igapó amazônico do material institucional */
  --igapo:      #0D1310;   /* preto-esverdeado: água preta, floresta noturna */
  --igapo-2:    #151D19;   /* superfície elevada no escuro */
  --igapo-3:    #1E2823;
  --fibra:      #EDEFE9;   /* off-white frio, papel de fibra */
  --fibra-2:    #E3E7DE;
  --tinta:      #161C18;   /* texto sobre claro */
  --tinta-mid:  #58635B;
  --tinta-soft: #8A938B;
  --urucum:     #8C1B11;   /* vermelho da marca, extraído do logotipo */
  --urucum-lit: #B8402F;
  --agua:       #14707E;   /* teal do material institucional */
  --agua-lit:   #2FA0AF;
  --linha:      color-mix(in srgb, var(--tinta) 14%, transparent);
  --linha-esc:  color-mix(in srgb, var(--fibra) 16%, transparent);

  /* Tipografia */
  --display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --util:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Ritmo */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --sec: clamp(4.5rem, 11vw, 9.5rem);
  --max: 1240px;
  --nav-h: 74px;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--fibra);
  color:var(--tinta);
  font-family:var(--body);
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

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

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-0.018em;
  margin:0;
  text-wrap:balance;
}
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--urucum); color:var(--fibra); }

:focus-visible{
  outline:2px solid var(--agua-lit);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--urucum); color:#fff; padding:.75rem 1.25rem;
  font-family:var(--util); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
}
.skip:focus{ left:0; }

/* ---------- 3. Layout ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sec); }
.section--tight{ padding-block:clamp(3rem,7vw,5.5rem); }

.dark{ background:var(--igapo); color:var(--fibra); }
.dark h1,.dark h2,.dark h3{ color:var(--fibra); }

.split{ display:grid; gap:clamp(2rem,5vw,4.5rem); }
@media (min-width:900px){
  .split{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start; }
  .split--even{ grid-template-columns:1fr 1fr; }
  .split--flip > :first-child{ order:2; }
}

/* ---------- 4. Micro-tipografia ---------- */
.eyebrow{
  font-family:var(--util);
  font-size:.685rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--urucum);
  margin:0 0 1.35rem;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:currentColor; flex:none;
}
.dark .eyebrow{ color:var(--agua-lit); }

.lead{
  font-family:var(--display);
  font-size:clamp(1.3rem,1.05rem + 1.05vw,1.75rem);
  line-height:1.38;
  letter-spacing:-0.012em;
  color:var(--tinta);
}
.dark .lead{ color:color-mix(in srgb, var(--fibra) 92%, transparent); }

.h-xl{ font-size:clamp(2.6rem, 1.4rem + 5.2vw, 5.4rem); }
.h-lg{ font-size:clamp(2.1rem, 1.35rem + 3.1vw, 3.6rem); }
.h-md{ font-size:clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem); }
.h-sm{ font-size:clamp(1.2rem, 1.08rem + .55vw, 1.45rem); letter-spacing:-0.01em; }

.muted{ color:var(--tinta-mid); }
.dark .muted{ color:color-mix(in srgb, var(--fibra) 62%, transparent); }
.measure{ max-width:60ch; }
.measure-sm{ max-width:46ch; }

.rule{ border:0; height:1px; background:var(--linha); margin:0; }
.dark .rule{ background:var(--linha-esc); }

/* ---------- 5. Cabeçalho + seletor de canal ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom:1px solid transparent;
}
.site-header .wrap{ display:flex; align-items:center; gap:1.5rem; }

.site-header[data-mode="over"]{ color:var(--fibra); }
.site-header[data-mode="solid"]{
  background:color-mix(in srgb, var(--fibra) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--linha);
  color:var(--tinta);
}

.brand{ display:flex; align-items:center; text-decoration:none; flex:none; }
.brand img{ height:26px; width:auto; }
.brand .logo-light{ display:none; }
.site-header[data-mode="over"] .brand .logo-light{ display:block; }
.site-header[data-mode="over"] .brand .logo-dark{ display:none; }

.nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem); }
.nav a{
  font-size:.875rem; font-weight:500; text-decoration:none; letter-spacing:.005em;
  padding-block:.35rem; position:relative; white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--urucum); }
.site-header[data-mode="over"] .nav a[aria-current="page"]{ color:var(--agua-lit); }

/* — o seletor de idioma como um receptor de interpretação simultânea — */
.channel{
  display:flex; align-items:center; gap:.5rem;
  border:1px solid currentColor; border-radius:2px;
  padding:.28rem .34rem .28rem .6rem;
  font-family:var(--util); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  opacity:.85;
}
.channel__led{
  width:5px; height:5px; border-radius:50%; background:var(--agua-lit); flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--agua-lit) 70%, transparent);
  animation:led 2.6s ease-out infinite;
}
@keyframes led{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--agua-lit) 55%,transparent); }
  70%{ box-shadow:0 0 0 6px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}
.channel__label{ opacity:.6; }
@media (max-width:560px){ .channel__label{ display:none; } }
.channel__btns{ display:flex; gap:2px; }
.channel button{
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  background:none; border:0; cursor:pointer; color:inherit;
  padding:.28rem .5rem; border-radius:1px; opacity:.55;
  transition:opacity .2s ease, background .2s ease, color .2s ease;
}
.channel button:hover{ opacity:.9; }
.channel button[aria-pressed="true"]{
  background:var(--urucum); color:#fff; opacity:1;
}
.site-header[data-mode="over"] .channel button[aria-pressed="true"]{ background:var(--urucum-lit); }

.nav-toggle{
  display:none; background:none; border:0; color:inherit; cursor:pointer;
  padding:.5rem; margin-right:-.5rem;
}
.nav-toggle svg{ display:block; }

@media (max-width:880px){
  .nav-toggle{ display:block; margin-left:0; }
  .channel{ margin-left:auto; }
  .nav{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--igapo); color:var(--fibra);
    padding:1rem var(--gut) 2rem;
    border-bottom:1px solid var(--linha-esc);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    margin-left:0;
  }
  .nav[data-open="true"]{ opacity:1; transform:none; pointer-events:auto; }
  .nav a{ width:100%; padding-block:.85rem; border-bottom:1px solid var(--linha-esc); font-size:1.05rem; }
  .nav a::after{ display:none; }
  .site-header .wrap{ gap:.75rem; }
}

/* ---------- 6. Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  background:var(--igapo); color:var(--fibra); overflow:hidden;
  padding-block:calc(var(--nav-h) + 3rem) clamp(2.5rem,6vw,4.5rem);
}
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,12,10,.72) 0%, rgba(8,12,10,.30) 32%, rgba(8,12,10,.55) 66%, rgba(8,12,10,.90) 100%),
    linear-gradient(90deg, rgba(8,12,10,.78) 0%, rgba(8,12,10,.28) 55%, rgba(8,12,10,.05) 100%);
}
.hero .wrap{ position:relative; width:100%; }

/* Pilha de canais: a mesma frase, cinco vozes */
.stack{ margin:0 0 clamp(1.75rem,4vw,2.5rem); display:flex; flex-direction:column; }
.stack__row[data-active="true"]{ order:-1; }
.stack__row{
  display:grid; grid-template-columns:2.9rem 1fr; align-items:baseline;
  gap:.85rem; padding-block:.12rem;
  opacity:0; transform:translateY(10px);
  animation:rise .85s cubic-bezier(.2,.75,.3,1) forwards;
}
.stack__row:nth-child(1){ animation-delay:.15s; }
.stack__row:nth-child(2){ animation-delay:.26s; }
.stack__row:nth-child(3){ animation-delay:.34s; }
.stack__row:nth-child(4){ animation-delay:.42s; }
.stack__row:nth-child(5){ animation-delay:.50s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

.stack__code{
  font-family:var(--util); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb,var(--fibra) 42%, transparent);
  position:relative; padding-left:.9rem;
}
.stack__code::before{
  content:""; position:absolute; left:0; top:.42em; width:5px; height:1px;
  background:currentColor;
}
.stack__text{
  font-family:var(--display);
  font-size:clamp(1.02rem,.95rem + .35vw,1.2rem);
  line-height:1.34;
  color:color-mix(in srgb,var(--fibra) 34%, transparent);
  transition:color .4s ease, font-size .4s ease;
}
.stack__row[data-active="true"] .stack__code{
  color:var(--agua-lit);
}
.stack__row[data-active="true"] .stack__text{
  font-size:clamp(2.35rem,1.2rem + 4.9vw,4.9rem);
  line-height:1.02; letter-spacing:-0.025em;
  color:var(--fibra);
  text-wrap:balance;
}
.stack__row[data-active="true"]{ padding-block:.35rem .55rem; }
@media (max-width:600px){
  .stack__row{ grid-template-columns:2.4rem 1fr; gap:.6rem; }
  .stack__row:not([data-active="true"]) .stack__text{ font-size:.94rem; }
}

.hero__sub{ max-width:52ch; color:color-mix(in srgb,var(--fibra) 76%, transparent); font-size:1.06rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }

.hero__meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.75rem;
  margin-top:clamp(2.5rem,6vw,4rem); padding-top:1.25rem;
  border-top:1px solid var(--linha-esc);
  font-family:var(--util); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase;
  color:color-mix(in srgb,var(--fibra) 52%, transparent);
}

/* ---------- 7. Botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--body); font-size:.86rem; font-weight:600; letter-spacing:.01em;
  padding:.85rem 1.45rem; border-radius:2px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn svg{ transition:transform .3s cubic-bezier(.2,.7,.3,1); }
.btn:hover svg{ transform:translateX(3px); }
.btn--primary{ background:var(--urucum); color:#fff; }
.btn--primary:hover{ background:var(--urucum-lit); }
.btn--ghost{ border-color:currentColor; color:inherit; }
.btn--ghost:hover{ background:color-mix(in srgb, currentColor 12%, transparent); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-family:var(--util); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--urucum); border-bottom:1px solid color-mix(in srgb,var(--urucum) 35%, transparent);
  padding-bottom:.2rem; transition:border-color .25s ease;
}
.link-arrow:hover{ border-bottom-color:var(--urucum); }
.link-arrow svg{ transition:transform .3s cubic-bezier(.2,.7,.3,1); }
.link-arrow:hover svg{ transform:translateX(3px); }
.dark .link-arrow{ color:var(--agua-lit); border-bottom-color:color-mix(in srgb,var(--agua-lit) 35%, transparent); }
.dark .link-arrow:hover{ border-bottom-color:var(--agua-lit); }

/* ---------- 8. Declaração de posicionamento ---------- */
.statement{
  font-family:var(--display);
  font-size:clamp(1.75rem,1.1rem + 2.7vw,3.2rem);
  line-height:1.14; letter-spacing:-0.022em;
  max-width:20ch;
}
.statement em{ font-style:italic; color:var(--urucum); }
.dark .statement em{ color:var(--agua-lit); }

.factbar{
  display:flex; flex-wrap:wrap; gap:.6rem 2.25rem;
  font-family:var(--util); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-mid); margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--linha);
}

/* ---------- 9. Índice de capacidades ---------- */
.index{ border-top:1px solid var(--linha); }
.index__item{
  display:block; text-decoration:none; border-bottom:1px solid var(--linha);
  padding-block:clamp(1.5rem,3vw,2.1rem);
  position:relative; transition:padding-left .35s cubic-bezier(.2,.7,.3,1);
}
.index__item:hover{ padding-left:1rem; }
.index__item::before{
  content:""; position:absolute; left:0; top:0; bottom:-1px; width:2px;
  background:var(--urucum); transform:scaleY(0); transform-origin:bottom;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.index__item:hover::before{ transform:scaleY(1); transform-origin:top; }
.index__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; }
.index__title{ font-family:var(--display); font-size:clamp(1.35rem,1.1rem + 1.15vw,2rem); letter-spacing:-0.015em; }
.index__go{
  font-family:var(--util); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-soft); flex:none; transition:color .25s ease;
}
.index__item:hover .index__go{ color:var(--urucum); }
.index__desc{ margin-top:.55rem; max-width:62ch; color:var(--tinta-mid); font-size:.98rem; }

/* ---------- 10. Ciclo (sequência real: por isso numerado) ---------- */
.cycle{ display:grid; gap:1px; background:var(--linha-esc); border-block:1px solid var(--linha-esc); }
@media (min-width:820px){ .cycle{ grid-template-columns:repeat(3,1fr); } }
.cycle__step{ background:var(--igapo); padding:clamp(1.75rem,3.5vw,2.75rem) clamp(1.5rem,3vw,2.25rem); }
.cycle__n{
  font-family:var(--util); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--agua-lit); display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem;
}
.cycle__n b{ font-weight:500; color:color-mix(in srgb,var(--fibra) 45%, transparent); }
.cycle__title{ font-family:var(--display); font-size:clamp(1.5rem,1.25rem + 1vw,2rem); margin-bottom:.85rem; }
.cycle__body{ color:color-mix(in srgb,var(--fibra) 68%, transparent); font-size:.97rem; }
.cycle__list{ list-style:none; margin:1.35rem 0 0; padding:0; font-size:.88rem; }
.cycle__list li{
  padding:.42rem 0 .42rem 1.1rem; position:relative;
  color:color-mix(in srgb,var(--fibra) 58%, transparent);
  border-top:1px solid color-mix(in srgb,var(--fibra) 8%, transparent);
}
.cycle__list li::before{
  content:""; position:absolute; left:0; top:1.08em; width:4px; height:1px; background:var(--agua);
}

/* ---------- 11. Fotografia ---------- */
.plate figure{ margin:0; }
.plate img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.plate figcaption{
  margin-top:.85rem; font-family:var(--util); font-size:.68rem; line-height:1.6;
  letter-spacing:.03em; color:var(--tinta-soft); max-width:44ch;
}
.dark .plate figcaption{ color:color-mix(in srgb,var(--fibra) 48%, transparent); }

.gallery{ display:grid; gap:clamp(1.5rem,3vw,2.25rem); }
@media (min-width:680px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .gallery{ grid-template-columns:repeat(3,1fr); } }

.faixa{ display:block; width:100%; height:clamp(90px,13vw,180px); object-fit:cover; }

/* ---------- 12. Blocos de serviço ---------- */
.svc{ border-top:1px solid var(--linha); padding-top:clamp(2rem,4vw,3rem); margin-top:clamp(2.5rem,5vw,4rem); scroll-margin-top:calc(var(--nav-h) + 2rem); }
.svc:first-of-type{ margin-top:0; }
.taglist{ list-style:none; margin:1.5rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem; }
.taglist li{
  font-family:var(--util); font-size:.7rem; letter-spacing:.06em;
  border:1px solid var(--linha); border-radius:2px; padding:.42rem .7rem;
  color:var(--tinta-mid); background:color-mix(in srgb,var(--fibra-2) 60%, transparent);
}
.dark .taglist li{ border-color:var(--linha-esc); background:transparent; color:color-mix(in srgb,var(--fibra) 62%, transparent); }

.pairs{ display:grid; gap:0; border-top:1px solid var(--linha); margin-top:2rem; }
.pairs div{ display:grid; gap:.35rem 2rem; padding-block:1.05rem; border-bottom:1px solid var(--linha); }
@media (min-width:720px){ .pairs div{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); align-items:baseline; } }
.pairs dt{ font-family:var(--util); font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--urucum); }
.pairs dd{ margin:0; color:var(--tinta-mid); font-size:.97rem; }
.dark .pairs{ border-color:var(--linha-esc); }
.dark .pairs div{ border-color:var(--linha-esc); }
.dark .pairs dt{ color:var(--agua-lit); }
.dark .pairs dd{ color:color-mix(in srgb,var(--fibra) 68%, transparent); }

/* ---------- 13. Idiomas ---------- */
.langs{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.75rem; }
.langs span{
  font-family:var(--display); font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);
  border:1px solid var(--linha-esc); border-radius:2px; padding:.5rem 1rem;
  color:color-mix(in srgb,var(--fibra) 88%, transparent);
}
.langs span.more{ font-family:var(--util); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb,var(--fibra) 52%, transparent); display:flex; align-items:center; }

/* ---------- 14. Parceiros ---------- */
.orgs{ display:flex; flex-wrap:wrap; gap:.5rem 0; align-items:center; margin-top:1.75rem; }
.orgs span{
  font-family:var(--display); font-size:clamp(1.05rem,.95rem + .55vw,1.4rem);
  color:var(--tinta); padding-right:1.1rem; margin-right:1.1rem;
  border-right:1px solid var(--linha); line-height:1.3;
}
.orgs span:last-child{ border-right:0; }
.dark .orgs span{ color:color-mix(in srgb,var(--fibra) 88%, transparent); border-right-color:var(--linha-esc); }

/* ---------- 15. Faixa de chamada ---------- */
.cta{ position:relative; overflow:hidden; background:var(--igapo); color:var(--fibra); }
.cta__bg{ position:absolute; inset:0; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.cta__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,12,10,.94) 0%, rgba(8,12,10,.78) 45%, rgba(8,12,10,.35) 100%); }
.cta .wrap{ position:relative; }

/* ---------- 16. Formulário ---------- */
.form{ display:grid; gap:1.15rem; margin-top:2rem; }
@media (min-width:720px){ .form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; } }
.field{ display:grid; gap:.4rem; }
.field label{
  font-family:var(--util); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-mid);
}
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:.98rem; color:var(--tinta);
  background:transparent; border:0; border-bottom:1px solid var(--linha);
  padding:.7rem 0; border-radius:0; width:100%;
  transition:border-color .25s ease;
}
.field textarea{ resize:vertical; min-height:118px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--urucum); }
.field select{ appearance:none; cursor:pointer; }
.form__note{ font-size:.82rem; color:var(--tinta-soft); }

/* ---------- 17. Rodapé ---------- */
.footer{ background:var(--igapo); color:var(--fibra); padding-block:clamp(3.5rem,7vw,5.5rem) 2rem; }
.footer a{ text-decoration:none; }
.footer__grid{ display:grid; gap:2.5rem; }
@media (min-width:820px){ .footer__grid{ grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr); } }
.footer__brand img{ height:30px; }
.footer__tag{ font-family:var(--display); font-size:1.28rem; line-height:1.34; margin-top:1.5rem; max-width:26ch; color:color-mix(in srgb,var(--fibra) 82%, transparent); }
.footer__label{ font-family:var(--util); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--agua-lit); margin-bottom:1.1rem; }
.footer__list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; font-size:.94rem; }
.footer__list a{ color:color-mix(in srgb,var(--fibra) 72%, transparent); transition:color .2s ease; }
.footer__list a:hover{ color:var(--fibra); }
.footer__bottom{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.5rem; border-top:1px solid var(--linha-esc);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
  font-family:var(--util); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:color-mix(in srgb,var(--fibra) 42%, transparent);
}

/* ---------- 18. Revelação em rolagem ---------- */
[data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- 19. Troca de canal ---------- */
body[data-tuning="true"] main,
body[data-tuning="true"] .footer{ opacity:.35; filter:blur(1.5px); }
main,.footer{ transition:opacity .18s ease, filter .18s ease; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .stack__row{ opacity:1; transform:none; }
}

/* ---------- 20. Página interna: cabeçalho ---------- */
.pagehead{ padding-block:calc(var(--nav-h) + clamp(3.5rem,8vw,6rem)) clamp(2.5rem,5vw,4rem); background:var(--igapo); color:var(--fibra); }
.pagehead .h-lg{ max-width:18ch; }
.pagehead .lead{ margin-top:1.75rem; max-width:56ch; }