/* Terra Negra Viagens · site v2
   Direção: "o lugar carrega a página" (design-taste-frontend, seed 803693285).
   Identidade: a do portfólio em PDF. Big Shoulders Display (no lugar da Tusker) + Source Sans 3,
   preto-terra, off-white, amarelo TN. A terracota fica só na assinatura "Viagens".
   Ideia: a tarja dos vídeos do canal (lugar + o que se lê ali) é a legenda de toda foto. */

@font-face { font-family: "Big Shoulders"; src: url("../fonts/big-shoulders-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Big Shoulders"; src: url("../fonts/big-shoulders-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Source Sans"; src: url("../fonts/source-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans"; src: url("../fonts/source-sans-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans"; src: url("../fonts/source-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Sans"; src: url("../fonts/source-sans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --terra: #0B0A09;
  --terra-2: #171512;
  --terra-3: #23201C;
  --papel: #F2F0EB;
  --papel-2: #E4DFD5;
  --amarelo: #F2C12E;
  --terracota: #A8481F;
  --tinta-clara-2: #C9C2B6;
  --tinta-escura-2: #47423B;

  --display: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  --texto: "Source Sans", "Source Sans 3", "Segoe UI", Arial, sans-serif;

  /* cinco tamanhos, e só */
  --t-nome: clamp(5.5rem, 17.5vw, 19rem);
  --t-titulo: clamp(2.75rem, 6vw, 6rem);
  --t-meio: clamp(1.5rem, 2.4vw, 2.25rem);
  --t-corpo: 1.125rem;
  --t-nota: 0.9375rem;

  --margem: clamp(1rem, 2.4vw, 2rem);
  --secao: clamp(6rem, 12vw, 12rem);
  --mexe: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--terra);
  color: var(--papel);
  font-family: var(--texto);
  font-size: var(--t-corpo);
  line-height: 1.55;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .2em; }
::selection { background: var(--amarelo); color: var(--terra); }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: var(--margem); top: -4rem; background: var(--amarelo); color: var(--terra); padding: .75rem 1rem; z-index: 50; font-weight: 700; }
.pular:focus { top: var(--margem); }

/* ---------- tipografia ---------- */
.display, h1, h2 {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: .9;
  text-wrap: balance;
}
h2 { font-size: var(--t-titulo); }
h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: var(--t-meio); line-height: 1; letter-spacing: 0; }
.declaracao { font-size: var(--t-meio); line-height: 1.25; max-width: 34ch; font-weight: 600; }
.lead { font-size: 1.3125rem; line-height: 1.5; max-width: 52ch; }
.nota { font-size: var(--t-nota); color: var(--tinta-clara-2); }
.claro .nota, .amarelo .nota { color: var(--tinta-escura-2); }
p + p { margin-top: 1em; }

/* ---------- campos de cor ---------- */
.claro { background: var(--papel); color: var(--terra); color-scheme: light; }
.amarelo { background: var(--amarelo); color: var(--terra); color-scheme: light; }
.escuro-2 { background: var(--terra-2); }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3.25rem; padding: 0 1.5rem;
  background: var(--amarelo); color: var(--terra);
  font: 700 1.125rem/1 var(--texto); text-decoration: none;
  border: 0; border-radius: 0; cursor: pointer;
  transition: transform .18s var(--mexe), background-color .18s;
}
.botao:hover { background: #FFD24A; transform: translateY(-2px); }
.botao:active { transform: translateY(0) scale(.98); }
.claro .botao, .amarelo .botao { background: var(--terra); color: var(--papel); }
.claro .botao:hover, .amarelo .botao:hover { background: var(--terra-3); }
.link-seta { font-weight: 700; text-decoration: none; display: inline-flex; gap: .4em; align-items: baseline; }
.link-seta::after { content: "→"; transition: transform .2s var(--mexe); }
.link-seta:hover::after { transform: translateX(4px); }

/* ---------- a tarja (a ideia da página) ---------- */
.foto { position: relative; margin: 0; overflow: hidden; background: var(--terra-3); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.tarja {
  position: absolute; left: 0; bottom: clamp(.75rem, 2vw, 1.5rem);
  display: grid; grid-template-columns: .5rem auto; max-width: min(92%, 34rem);
  background: var(--terra); color: var(--papel);
}
.tarja::before { content: ""; background: var(--amarelo); grid-row: 1 / span 2; }
.tarja b { font: 800 clamp(1rem, 1.5vw, 1.25rem)/1.05 var(--display); text-transform: uppercase; padding: .55rem .9rem 0; }
.tarja span { font-size: .9375rem; line-height: 1.3; padding: .2rem .9rem .6rem; color: var(--tinta-clara-2); }
.tarja-sem-texto span { display: none; }

/* ---------- navegação ---------- */
.topo {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: var(--margem);
}
.topo .marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--papel); }
.topo .marca img { width: 2.25rem; height: auto; }
.topo .marca { display: grid; grid-template-columns: auto auto; column-gap: .6rem; align-items: center; }
.topo .marca img { grid-row: 1 / span 2; }
.topo .marca-nome { font: 900 1.375rem/.85 var(--display); text-transform: uppercase; }
.topo .marca-sub { font: 700 .9375rem/1 var(--texto); color: var(--amarelo); }
.topo nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); background: rgba(11,10,9,.55); padding: .5rem .5rem .5rem 1.25rem; }
.topo nav a { color: var(--papel); text-decoration: none; font-weight: 600; font-size: 1rem; }
.topo nav a:not(.botao):hover { color: var(--amarelo); }
.topo nav .botao { min-height: 2.75rem; padding: 0 1.1rem; font-size: 1rem; }
.menu-botao { display: none; }
@media (max-width: 900px) {
  .topo nav { display: none; }
  .menu-botao {
    display: inline-flex; min-height: 2.75rem; padding: 0 1rem; align-items: center;
    background: var(--terra); color: var(--papel); border: 0; font: 700 1rem var(--texto); cursor: pointer;
  }
  .topo.aberto nav {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem;
    position: absolute; top: calc(100% - .5rem); right: var(--margem); left: var(--margem);
    background: var(--terra); padding: 1.5rem;
  }
  .topo.aberto nav a { font-size: 1.25rem; }
}

/* ---------- abertura: nome sob a fotografia ---------- */
.abertura { display: grid; grid-template-rows: 58svh auto; min-height: 100svh; background: var(--terra); }
.abertura .foto { height: 100%; }
.abertura .foto img { object-position: var(--foco, 50% 40%); }
.abertura .faixa { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: 1.5rem var(--margem) 1.25rem; }
.abertura .linha { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.abertura .linha p { max-width: 44ch; font-size: 1.3125rem; }
.abertura .linha p b { color: var(--amarelo); font-weight: 700; }
.nome {
  font: 900 var(--nome, 21vw)/.82 var(--display);
  text-transform: uppercase; letter-spacing: -0.035em; white-space: nowrap;
  margin-left: -.04em; transform-origin: left bottom;
}
@media (max-width: 700px) {
  .abertura { grid-template-rows: 50svh auto; }
  .abertura .linha { flex-direction: column; gap: 1rem; }
  .abertura .faixa { flex-direction: column-reverse; justify-content: flex-end; }
  .abertura .linha p { font-size: 1.125rem; }
  .nome.duas-linhas { font-size: 24vw; white-space: normal; }
}

/* ---------- agenda: close-up com coluna ---------- */
.quadro { position: relative; min-height: 100svh; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding: var(--margem); }
.quadro > .foto { position: absolute; inset: 0; }
.quadro .cartao {
  position: relative; z-index: 2; grid-column: var(--col, 2) / span 1; min-width: 20rem;
  background: var(--terra); color: var(--papel); padding: 1.75rem; display: flex; flex-direction: column; gap: .9rem;
}
.quadro .cartao h2, .quadro .cartao h3 { font-size: clamp(3rem, 4.6vw, 4.5rem); line-height: .88; font-family: var(--display); font-weight: 900; }
.quadro .cartao .quando { font-weight: 700; color: var(--amarelo); font-size: 1.3125rem; line-height: 1.3; }
.quadro .cartao dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; font-size: 1rem; }
.quadro .cartao dt { color: var(--tinta-clara-2); }
.quadro .cartao dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.quadro .cartao .miniatura { aspect-ratio: 3 / 2; }
.quadro .cartao .botao { width: 100%; }
.quadro .tarja { left: auto; right: 0; }
@media (max-width: 900px) {
  .quadro { display: flex; align-items: flex-end; padding: 0; min-height: 100svh; }
  .quadro .cartao { width: 100%; min-width: 0; padding: 1.5rem var(--margem) 2rem; }
  .quadro .cartao .miniatura { display: none; }
  .quadro .tarja { top: 5rem; bottom: auto; }
}
.realizada { padding: 2.25rem var(--margem); display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: baseline; }
.realizada b { font: 900 var(--t-meio)/1 var(--display); text-transform: uppercase; }
.carimbo { display: inline-block; background: var(--terracota); color: var(--papel); font: 800 1rem/1 var(--display); text-transform: uppercase; padding: .45rem .7rem; transform: rotate(-2deg); }

/* ---------- linhas com fotos na margem ---------- */
.linhas { padding: var(--secao) var(--margem); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; }
.linhas > .abre { grid-column: 5 / -1; min-height: 52svh; display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
.linhas .item { grid-column: 5 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; margin-top: clamp(4rem, 8vw, 7.5rem); align-items: start; }
.linhas .item h3 { margin-bottom: 1rem; }
.linhas .item p { max-width: 38ch; }
.linhas .item .foto { width: var(--w, 18rem); aspect-ratio: var(--r, 4 / 5); }
.linhas .item:nth-of-type(3n+2) .foto { --w: 22rem; --r: 3 / 2; }
.linhas .item:nth-of-type(3n) .foto { --w: 14rem; --r: 1; }
@media (max-width: 900px) {
  .linhas { display: block; }
  .linhas > .abre { min-height: 0; padding-bottom: 1rem; }
  .linhas .item { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 4rem; }
  .linhas .item .foto { width: 100%; }
  .linhas .item:nth-of-type(3n+2) .foto { width: 72%; justify-self: end; }
  .linhas .item:nth-of-type(3n) .foto { width: 58%; }
}

/* ---------- quatro escalas (a parte viva) ---------- */
.escalas { padding: var(--secao) var(--margem); display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); }
.escalas .lado { display: flex; flex-direction: column; gap: 1.5rem; }
.escolhas { display: flex; flex-wrap: wrap; gap: .5rem; }
.escolhas button {
  min-height: 2.75rem; padding: 0 1rem; border: 0; cursor: pointer;
  background: var(--terra-3); color: var(--papel); font: 700 1rem var(--texto);
  transition: background-color .15s, color .15s, transform .15s var(--mexe);
}
.escolhas button:hover { transform: translateY(-2px); }
.escolhas button[aria-pressed="true"] { background: var(--amarelo); color: var(--terra); }
.escalas .regua { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; }
.escalas .regua button {
  min-height: 3.5rem; border: 0; cursor: pointer; text-align: left; padding: .6rem .75rem;
  background: var(--terra-3); color: var(--tinta-clara-2); font: 800 1.125rem/1 var(--display); text-transform: uppercase;
  transition: background-color .15s, color .15s;
}
.escalas .regua button[aria-pressed="true"] { background: var(--papel); color: var(--terra); }
.escalas .leitura { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-content: start; }
.escalas .leitura .foto { aspect-ratio: 16 / 10; }
.escalas .texto-escala { font-size: clamp(1.25rem, 1.8vw, 1.625rem); line-height: 1.35; min-height: 7.5em; font-weight: 600; }
.escalas .texto-escala small { display: block; font-size: var(--t-nota); font-weight: 400; color: var(--tinta-clara-2); margin-top: .75rem; }
.escalas noscript, .escalas .sem-js { display: block; }
.js .escalas .sem-js { display: none; }
@media (max-width: 900px) {
  .escalas { grid-template-columns: 1fr; }
  .escalas .regua { grid-template-columns: repeat(2, 1fr); }
  .escalas .texto-escala { min-height: 0; }
}

/* ---------- quem conduz: foto larga, tile, fatos ---------- */
.conduz { padding: var(--secao) var(--margem); }
.conduz .abre { display: grid; gap: 1.5rem; max-width: 60rem; margin-bottom: 4.5rem; }
.mosaico { display: grid; grid-template-columns: 8fr 4fr; gap: 1rem; align-items: start; }
.mosaico > .foto { aspect-ratio: 16 / 10; }
.mosaico .sobre-foto { position: absolute; top: 0; right: 0; width: 21rem; background: var(--papel); color: var(--terra); padding: 1.25rem; font-size: 1rem; }
.mosaico .tile { background: var(--amarelo); color: var(--terra); aspect-ratio: 4 / 4.2; display: grid; place-items: center; padding: 2rem; position: relative; }
.mosaico .tile img { width: 70%; }
.mosaico .tile .ponto { position: absolute; width: 1.1rem; height: 1.1rem; background: var(--terra); border-radius: 50%; left: var(--px); top: var(--py); }
.mosaico .tile .ponto-nome { position: absolute; left: calc(var(--px) + 1.5rem); top: calc(var(--py) - .2rem); font: 800 1rem/1 var(--display); text-transform: uppercase; }
.mosaico .fatos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; margin-top: 1.5rem; }
.mosaico .fatos div { display: flex; flex-direction: column; gap: .35rem; }
.mosaico .fatos dt { font-size: var(--t-nota); color: var(--tinta-escura-2); }
.mosaico .fatos dd { font: 900 2rem/1 var(--display); text-transform: uppercase; }
.pessoas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 5rem; }
.pessoa { display: flex; flex-direction: column; gap: .5rem; }
.pessoa .foto { aspect-ratio: 4 / 5; margin-bottom: .75rem; }
.pessoa .inicial { aspect-ratio: 4 / 5; margin-bottom: .75rem; background: var(--terra); display: grid; place-items: end start; padding: 1rem 1.25rem; font: 900 clamp(8rem, 14vw, 13rem)/.78 var(--display); color: var(--amarelo); }
.pessoa h3 { font-size: var(--t-meio); }
.pessoa p { color: var(--tinta-escura-2); }
.pessoa p b { color: var(--terra); font-weight: 700; }
@media (max-width: 900px) {
  .mosaico { grid-template-columns: 1fr; }
  .mosaico .sobre-foto { position: static; width: auto; }
  .mosaico > .foto { aspect-ratio: 4 / 3; overflow: visible; }
  .mosaico > .foto img { aspect-ratio: 4 / 3; }
  .mosaico .tile { aspect-ratio: 3 / 2; }
  .mosaico .tile img { width: 40%; }
  .pessoas { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
}

/* ---------- como funciona: fotos numa diagonal ---------- */
.diagonal { padding: var(--secao) var(--margem); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; row-gap: 0; }
.diagonal > h2 { grid-column: 7 / -1; grid-row: 1; font-size: clamp(2.5rem, 4.5vw, 4.5rem); }
.etapa { display: grid; column-gap: 1.5rem; align-items: start; }
.etapa p { max-width: 36ch; }
.etapa h3 { margin-bottom: .6rem; }
.etapa > div { max-width: 36ch; }
.etapa.um { grid-column: 1 / span 8; grid-row: 1; grid-template-columns: 4fr 4fr; }
.etapa.um .foto { aspect-ratio: 3 / 4; }
.etapa.um > div { align-self: end; }
.etapa.dois { grid-column: 4 / span 8; grid-template-columns: 3fr 5fr; margin-top: 4rem; }
.etapa.dois .foto { aspect-ratio: 1; }
.etapa.tres { grid-column: 1 / -1; grid-template-columns: 5fr 7fr; margin-top: 4rem; }
.etapa.tres > div { order: -1; justify-self: end; align-self: end; }
.etapa.tres .foto { aspect-ratio: 16 / 10; }
@media (max-width: 900px) {
  .diagonal { display: flex; flex-direction: column; gap: 3.5rem; }
  .etapa, .etapa.um, .etapa.dois, .etapa.tres { grid-template-columns: 1fr; row-gap: 1rem; margin: 0; }
  .etapa.dois .foto { width: 62%; justify-self: end; }
  .etapa.tres .foto { width: 78%; }
  .etapa.tres > div { order: 0; justify-self: start; }
}

/* ---------- onde já estivemos: nomes em colunas ---------- */
.lugares { padding: var(--secao) var(--margem); display: grid; grid-template-columns: 3fr 9fr; gap: 2rem; }
.lugares h2 { font-size: clamp(2.25rem, 3.4vw, 3.25rem); }
.lugares .colunas { columns: 3; column-gap: 2.5rem; font-size: 1.3125rem; line-height: 1.55; }
.lugares .colunas li.tipo { color: var(--tinta-escura-2); break-before: column; }
.lugares .colunas li.tipo:first-child { break-before: auto; }
@media (max-width: 900px) {
  .lugares { grid-template-columns: 1fr; }
  .lugares .colunas { columns: 2; column-gap: 1.25rem; font-size: 1.125rem; }
  .lugares .colunas li.tipo { break-before: auto; margin-top: 1.5rem; }
}

/* ---------- perguntas ao lado da foto alta ---------- */
.perguntas { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); padding: 0 var(--margem) var(--secao); }
.perguntas .col { padding-top: var(--secao); display: flex; flex-direction: column; gap: 1.75rem; }
.perguntas h2 { font-size: clamp(2.5rem, 3.5vw, 3.5rem); }
details { padding: .25rem 0; }
details + details { margin-top: .75rem; }
summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 1.3125rem; line-height: 1.3; display: flex; justify-content: space-between; gap: 1rem; min-height: 2.75rem; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; width: .65rem; height: .65rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--mexe); flex: none; }
details[open] summary::after { transform: rotate(-135deg); }
details p { color: var(--tinta-clara-2); padding: .5rem 0 .75rem; max-width: 56ch; }
.claro details p { color: var(--tinta-escura-2); }
.perguntas .fotos { position: relative; }
.perguntas .fotos .alta { aspect-ratio: 3 / 4; }
.perguntas .fotos .quadrada { position: absolute; width: 36%; aspect-ratio: 1; left: -2.5rem; bottom: -2.5rem; border: .75rem solid var(--terra); }
.claro .perguntas .fotos .quadrada { border-color: var(--papel); }
@media (max-width: 900px) {
  .perguntas { grid-template-columns: 1fr; }
  .perguntas .fotos { order: -1; margin-top: 0; }
  .perguntas .fotos .alta { aspect-ratio: 4 / 5; }
  .perguntas .fotos .quadrada { left: auto; right: 0; bottom: -2rem; width: 38%; }
  .perguntas .col { padding-top: 3.5rem; }
}

/* ---------- contato: cartão sobre a fotografia ---------- */
.contato { position: relative; min-height: 100svh; padding-top: 3.75rem; }
.contato > .foto { position: absolute; inset: 0; }
.contato .cartao {
  position: relative; z-index: 2; margin-left: auto; margin-right: clamp(1rem, 4vw, 3.75rem);
  width: min(26rem, calc(100% - 2rem)); background: var(--papel); color: var(--terra); padding: 2rem;
  display: flex; flex-direction: column; gap: 1rem; color-scheme: light;
}
.contato .cartao h2 { font-size: 2.75rem; }
.contato .cartao .botao { width: 100%; min-height: 3.5rem; }
.contato .espaco { height: 12svh; }
.campo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.campo select { width: 100%; }
.campo label { font-weight: 700; font-size: 1rem; }
.campo input, .campo select, .campo textarea {
  min-height: 3rem; padding: .6rem .75rem; font: 400 1.125rem var(--texto);
  background: #FFFFFF; color: var(--terra); border: 1px solid #8E867A; border-radius: 0;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 3px solid var(--amarelo); outline-offset: 0; border-color: var(--terra); }
.dois-campos { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.aviso-form { font-size: .9375rem; color: var(--tinta-escura-2); }
@media (max-width: 900px) {
  .contato { min-height: 0; padding-top: 70svh; }
  .contato > .foto { height: 70svh; bottom: auto; }
  .contato .cartao { position: relative; top: auto; margin: -5rem 1rem 0; width: auto; }
  .contato .espaco { height: 3rem; }
}

/* ---------- rodapé: colunas em cima, nome embaixo ---------- */
.rodape { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto auto; padding: 2.5rem var(--margem) 1.25rem; background: var(--papel); color: var(--terra); color-scheme: light; }
.rodape .colunas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; font-size: 1rem; }
.rodape .colunas li:first-child { font-weight: 700; }
.rodape .colunas li { color: var(--tinta-escura-2); }
.rodape .colunas li:first-child, .rodape .colunas a { color: var(--terra); }
.rodape .colunas a { text-decoration: none; }
.rodape .colunas a:hover { text-decoration: underline; }
.rodape .nome-final { font: 900 clamp(4rem, 15.4vw, 18rem)/.8 var(--display); text-transform: uppercase; letter-spacing: -0.035em; white-space: nowrap; margin-left: -.04em; }
.rodape .legal { font-size: .9375rem; color: var(--tinta-escura-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: 1.25rem; }
.rodape details { margin-top: 1.5rem; }
.rodape details summary { font-size: 1rem; min-height: 2.25rem; }
.rodape details ul { columns: 2; column-gap: 2rem; font-size: .9375rem; color: var(--tinta-escura-2); }
.rodape details li { break-inside: avoid; margin-bottom: .4rem; }
@media (max-width: 900px) {
  .rodape { min-height: 0; }
  .rodape .colunas { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .rodape .meio { height: 20svh; }
  .rodape .nome-final { font-size: 21vw; white-space: normal; }
  .rodape details ul { columns: 1; }
}

/* ---------- páginas de destino ---------- */
.relance { display: grid; grid-template-columns: repeat(6, 1fr); padding: 2.5rem var(--margem); gap: 1.5rem; }
.relance div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .35rem; }
.relance dt { font-size: var(--t-nota); color: var(--tinta-escura-2); }
.relance dd { font: 900 clamp(1.5rem, 2.2vw, 2.25rem)/1 var(--display); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.relance dd.detalhe { font: 600 .9375rem/1.3 var(--texto); text-transform: none; color: var(--tinta-escura-2); }
@media (max-width: 1000px) { .relance { grid-template-columns: repeat(2, 1fr); } }

.pergunta-grande { padding: var(--secao) var(--margem); display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; }
.pergunta-grande h2 { grid-column: 1 / span 10; font-size: clamp(2.75rem, 6vw, 6.5rem); }
.pergunta-grande .lead { grid-column: 5 / span 6; margin-top: 2rem; }
@media (max-width: 900px) { .pergunta-grande h2, .pergunta-grande .lead { grid-column: 1 / -1; } }

.atos { padding: 0 var(--margem) var(--secao); display: flex; flex-direction: column; gap: clamp(5rem, 9vw, 8rem); }
.ato { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; align-items: center; }
.ato .foto { grid-column: 1 / span 7; aspect-ratio: 3 / 2; }
.ato .texto { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 1rem; }
.ato .dias { font-weight: 700; color: var(--amarelo); }
.claro .ato .dias { color: var(--terracota); }
.ato:nth-child(even) .foto { grid-column: 6 / span 7; order: 2; }
.ato:nth-child(even) .texto { grid-column: 1 / span 4; }
.ato.retrato .foto { aspect-ratio: 4 / 5; grid-column-end: span 5; }
.ato:nth-child(even).retrato .foto { grid-column: 7 / span 5; }
@media (max-width: 900px) {
  .ato { display: flex; flex-direction: column; align-items: stretch; }
  .ato .foto, .ato.retrato .foto { order: 0 !important; }
}

.cidades { padding: var(--secao) var(--margem); }
.cidades .abre { display: grid; grid-template-columns: 6fr 6fr; gap: 2rem; align-items: end; margin-bottom: 4rem; }
.cidades ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; }
.cidades li h3 { font-size: var(--t-meio); margin-bottom: .5rem; }
.cidades li p { font-size: 1.125rem; }
.cidades li .onde { display: block; font-size: var(--t-nota); color: var(--tinta-escura-2); margin-top: .5rem; font-weight: 600; }
@media (max-width: 900px) { .cidades .abre { grid-template-columns: 1fr; } .cidades ol { grid-template-columns: 1fr; } }

.dia-a-dia { padding: var(--secao) var(--margem); display: grid; grid-template-columns: 4fr 8fr; gap: 2rem; }
.dia-a-dia h2 { font-size: clamp(2.5rem, 4vw, 4rem); }
.dia-a-dia details { padding: .35rem 0; }
.dia-a-dia summary span { color: var(--tinta-clara-2); font-weight: 400; margin-left: .5rem; }
.claro .dia-a-dia summary span, .dia-a-dia.claro summary span { color: var(--tinta-escura-2); }
@media (max-width: 900px) { .dia-a-dia { grid-template-columns: 1fr; } }

.para-quem { padding: var(--secao) var(--margem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
.para-quem h2 { font-size: clamp(2.25rem, 3.6vw, 3.5rem); margin-bottom: 1.5rem; }
.para-quem li { padding-left: 1.5rem; position: relative; margin-bottom: .75rem; }
.para-quem li::before { content: ""; position: absolute; left: 0; top: .65em; width: .6rem; height: .6rem; background: currentColor; }
@media (max-width: 900px) { .para-quem { grid-template-columns: 1fr; } }

.mosaico-tres { display: grid; grid-template-columns: 5fr 3fr 4fr; height: 58svh; gap: 0; }
.mosaico-tres .foto { height: 100%; }
@media (max-width: 700px) { .mosaico-tres { grid-template-columns: 1fr 1fr; height: 50svh; } .mosaico-tres .foto:nth-child(3) { display: none; } }

.entregas { padding: var(--secao) var(--margem); display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; }
.entregas > .abre { grid-column: 1 / span 7; margin-bottom: 3rem; display: grid; gap: 1.5rem; }
.entregas .tres { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.entregas .tres > div { padding: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.entregas .tres > div:nth-child(1) { background: var(--papel); color: var(--terra); }
.entregas .tres > div:nth-child(2) { background: var(--papel-2); color: var(--terra); }
.entregas .tres > div:nth-child(3) { background: var(--amarelo); color: var(--terra); }
.entregas .tres h3 { font-size: clamp(2.5rem, 4vw, 3.5rem); }
.entregas .tres .quem { font-weight: 700; }
.entregas .tres ul li { margin-bottom: .35rem; }
@media (max-width: 900px) { .entregas > .abre, .entregas .tres { grid-column: 1 / -1; } .entregas .tres { grid-template-columns: 1fr; } }

.passos { padding: var(--secao) var(--margem); }
.passos h2 { margin-bottom: 3.5rem; max-width: 16ch; }
.passos ol { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; counter-reset: passo; }
.passos li { counter-increment: passo; display: flex; flex-direction: column; gap: .6rem; }
.passos li::before { content: counter(passo); font: 900 4.5rem/.85 var(--display); color: var(--amarelo); }
.claro .passos li::before, .passos.claro li::before { color: var(--terracota); }
.passos li b { font: 800 1.5rem/1 var(--display); text-transform: uppercase; }
@media (max-width: 900px) { .passos ol { grid-template-columns: 1fr; gap: 2.5rem; } }

.frente { display: grid; grid-template-columns: 5fr 7fr; min-height: 90svh; }
.frente .foto { height: 100%; }
.frente .texto { padding: var(--secao) var(--margem); display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
@media (max-width: 900px) { .frente { grid-template-columns: 1fr; } .frente .foto { height: 70svh; } }

/* ---------- movimento ---------- */
.revela > * { transition: opacity .7s var(--mexe), transform .7s var(--mexe); }
.js .revela:not(.visto) > * { opacity: 0; transform: translateY(24px); }
.revela > *:nth-child(2) { transition-delay: .08s; }
.revela > *:nth-child(3) { transition-delay: .16s; }
.revela > *:nth-child(4) { transition-delay: .24s; }
.revela > *:nth-child(5) { transition-delay: .32s; }
.foto img { transition: transform 1.2s var(--mexe); }
a.foto:hover img, .quadro:hover > .foto img { transform: scale(1.03); }
.respira img { animation: respira 22s ease-in-out infinite alternate; }
@keyframes respira { from { transform: scale(1.0); } to { transform: scale(1.07); } }
@supports (animation-timeline: scroll()) {
  .nome.encolhe { animation: encolhe linear both; animation-timeline: scroll(root); animation-range: 0 90svh; }
  @keyframes encolhe { to { transform: scale(.93); opacity: .6; } }
  .rodape .nome-final { animation: cresce linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; transform-origin: left bottom; }
  @keyframes cresce { from { transform: scale(.94); } to { transform: scale(1); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .revela:not(.visto) > * { opacity: 1; transform: none; }
}

/* ---------- página de texto (políticas) ---------- */
.texto-longo { padding: var(--secao) var(--margem); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; row-gap: 4rem; }
.texto-longo section { grid-column: 4 / span 7; }
.texto-longo h2 { font-size: clamp(2rem, 3vw, 3rem); margin-bottom: 1.25rem; }
.texto-longo p, .texto-longo li { max-width: 68ch; }
.texto-longo ul { margin-top: 1rem; }
.texto-longo li { padding-left: 1.25rem; position: relative; margin-bottom: .75rem; }
.texto-longo li::before { content: ""; position: absolute; left: 0; top: .7em; width: .5rem; height: .5rem; background: var(--terracota); }
@media (max-width: 900px) { .texto-longo section { grid-column: 1 / -1; } }

@media (max-width: 900px) { .contato .tarja { top: 5rem; bottom: auto; } }
.foto video { width: 100%; height: 100%; object-fit: cover; display: block; }
