/* ANTTIAMARE — sistema visual 2.0
   Preto quente + osso, acento oxblood tirado da estampa.
   Bodoni Moda (display) sobre Space Grotesk (estrutura). */

:root {
  --noir: #0E0D0C;
  --carvao: #171512;
  --osso: #EAE4D6;
  --osso-dim: #D3CCBE;
  --cinza: #9A938A;
  --cinza-off: #5D5850;
  --oxblood: #6E2024;
  --estudio: #FFFFFF;
  --linha: rgba(234, 228, 214, 0.12);
  --linha-forte: rgba(234, 228, 214, 0.3);
  --display: 'Bodoni Moda', Georgia, serif;
  --corpo: 'Space Grotesk', system-ui, sans-serif;
  --gutter: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--noir);
  color: var(--osso);
  font-family: var(--corpo);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: var(--osso); text-decoration: none; }
a:hover { color: #fff; }
button { font-family: inherit; }
::selection { background: var(--osso); color: var(--noir); }
:focus-visible { outline: 2px solid var(--osso); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Tipografia ---------- */

.display { font-family: var(--display); font-weight: 500; line-height: 1; letter-spacing: -0.015em; }
.rotulo { font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--cinza); display: block; }
.marca { font-size: 20px; font-weight: 700; letter-spacing: -0.04em; text-transform: uppercase; color: #fff; white-space: nowrap; }

/* ---------- Aviso do topo ---------- */

.aviso {
  background: var(--oxblood); min-height: 38px; display: flex;
  align-items: center; justify-content: center; gap: 22px;
  padding: 9px 16px; text-align: center; flex-wrap: wrap;
  position: relative; z-index: 61;
}
.aviso span { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; }
.aviso .aviso-sec { font-weight: 400; color: rgba(234, 228, 214, 0.85); }
.aviso .ponto { width: 3px; height: 3px; border-radius: 999px; background: rgba(234, 228, 214, 0.6); }

/* ---------- Cabeçalho: marca ao centro ---------- */

.topo {
  position: sticky; top: 0; z-index: 60;
  background: rgba(14, 13, 12, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linha);
}
.topo-nav {
  position: relative;
  max-width: 1920px; margin: 0 auto; min-height: 72px;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.topo-esq { display: flex; align-items: center; gap: 28px; }
/* centrado pela viewport, não pelo peso das laterais */
.topo-centro { position: absolute; left: 50%; transform: translateX(-50%); }
.topo-dir { display: flex; align-items: center; gap: 22px; }

.topo-link {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cinza); padding-bottom: 3px; border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.topo-link:hover, .topo-link[aria-current="page"] { color: var(--osso); border-bottom-color: var(--osso); }

.icone-btn {
  background: none; border: none; color: var(--osso); cursor: pointer;
  padding: 11px; display: flex; align-items: center; justify-content: center;
}
.icone-btn:hover { color: #fff; }

.sacola-btn {
  display: flex; align-items: center; gap: 8px; background: none;
  border: none; color: var(--osso); cursor: pointer; padding: 10px 4px; min-height: 44px;
}
.sacola-btn:hover { color: #fff; }
.sacola-num {
  font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
  border-radius: 999px; background: var(--osso); color: var(--noir);
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
.menu-btn { display: none; }

.menu-mobile { display: none; }
.menu-mobile[hidden] { display: none; }

/* ---------- Hero em tela cheia ---------- */

.hero {
  position: relative; height: calc(100vh - 110px); min-height: 560px; max-height: 900px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.hero-midia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero-veu {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,13,12,.55) 0%, rgba(14,13,12,.3) 45%, rgba(14,13,12,.9) 100%);
  transition: opacity .7s ease;
}
.hero-conteudo {
  position: relative; z-index: 2; text-align: center;
  padding: 0 var(--gutter); max-width: 780px;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  transition: opacity .7s ease, transform .7s ease;
}
.hero h1 { margin: 0; font-size: clamp(52px, 9vw, 104px); line-height: 0.9; }
.hero p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--osso-dim); max-width: 520px; }
.hero-acoes { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* modo filme: o vídeo assume a tela e o texto sai da frente */
.hero.tocando .hero-conteudo { opacity: 0; pointer-events: none; transform: translateY(14px); }
.hero.tocando .hero-veu { opacity: 0.18; }
.hero.tocando { height: calc(100vh - 110px); max-height: none; }

.filme-controles {
  position: absolute; z-index: 3; left: 50%; bottom: 32px; transform: translateX(-50%);
  display: none; gap: 10px; align-items: center;
}
.hero.tocando .filme-controles { display: flex; }
.filme-controles button {
  background: rgba(14,13,12,.7); backdrop-filter: blur(8px);
  border: 1px solid var(--linha-forte); color: var(--osso);
  min-height: 44px; padding: 0 20px; cursor: pointer;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.filme-controles button:hover { background: var(--osso); color: var(--noir); border-color: var(--osso); }

/* ---------- Botões ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 36px; border: 1px solid transparent;
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; cursor: pointer; text-align: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primario { background: var(--osso); color: var(--noir); }
.btn-primario:hover { background: #fff; color: var(--noir); }
.btn-fantasma { background: transparent; color: var(--osso); border-color: var(--linha-forte); font-weight: 600; }
.btn-fantasma:hover { border-color: var(--osso); color: #fff; }
.btn-bloco { width: 100%; }
.btn-som { display: inline-flex; align-items: center; gap: 10px; }

/* ---------- Faixa de confiança ---------- */

.confianca { border-bottom: 1px solid var(--linha); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.confianca div {
  min-height: 86px; display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 16px 12px; text-align: center; border-right: 1px solid var(--linha);
}
.confianca div:last-child { border-right: none; }
.confianca span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.confianca svg { flex-shrink: 0; }

/* ---------- Seções e grade ---------- */

.secao { padding: 84px var(--gutter) 0; }
.secao-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.secao-topo h2 { margin: 0; font-size: 52px; }
.secao-topo .rotulo { margin-bottom: 12px; }
.link-ver { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; border-bottom: 1px solid var(--linha-forte); padding-bottom: 5px; white-space: nowrap; }

.grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }

/* Trilho horizontal: sangra até a borda da tela para o card cortado na
   direita avisar que tem mais coisa. */
.secao-acoes { display: flex; align-items: center; gap: 24px; }
.trilho-setas { display: flex; gap: 8px; }
.seta {
  width: 44px; height: 44px; background: transparent; color: var(--osso);
  border: 1px solid var(--linha-forte); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.seta:hover { background: var(--osso); color: var(--noir); border-color: var(--osso); }
.seta:disabled { color: var(--cinza-off); border-color: var(--linha); cursor: default; background: transparent; }

.trilho {
  display: flex; gap: 24px; align-items: start;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter); padding-bottom: 4px;
}
.trilho .card { flex: 0 0 clamp(210px, 25vw, 330px); scroll-snap-align: start; }
.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

.card { display: flex; flex-direction: column; gap: 14px; }
.card-foto { position: relative; aspect-ratio: 4 / 5; background: var(--estudio); overflow: hidden; }
.card-foto img { width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.card-foto .foto-hover { position: absolute; inset: 0; opacity: 0; }
/* A troca para a foto da frente só existe onde há mouse (o app.js nem baixa a
   foto de hover no toque). No celular o :hover fica "grudado" depois que o dedo
   encosta no card, e sem esta guarda a foto principal sumia e sobrava o fundo
   branco. O :has() garante que só some a foto principal se a de hover existe. */
@media (hover: hover) {
  .card:has(.foto-hover):hover .foto-base { opacity: 0; transform: scale(1.04); }
  .card:hover .foto-hover { opacity: 1; transform: scale(1.04); }
}
.selo {
  position: absolute; top: 13px; left: 13px; background: var(--oxblood); color: var(--osso);
  font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 6px 10px; z-index: 2;
}
.card-info { display: flex; flex-direction: column; gap: 7px; }
.card-cores { display: flex; gap: 6px; }
.disco { width: 14px; height: 14px; border-radius: 999px; border: 1px solid var(--linha-forte); display: inline-block; }
.card-nome { font-family: var(--display); font-size: 20px; line-height: 1.1; }
.card-desc { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cinza); }
.card-preco { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card-preco .valor { font-size: 15px; font-weight: 700; }
.card-preco .total { font-size: 11px; color: var(--cinza); }

/* ---------- Faixa do presente (home) ----------
   Foto do boné | oferta | como pedir. Os três passos ocupam o lado direito
   e explicam o pedido pela conversa, que é novidade para quem chega. */

.presente {
  margin: 84px var(--gutter) 0; display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1.3fr) minmax(0, 0.9fr);
  background: var(--carvao); border: 1px solid var(--linha);
}
.presente-foto { position: relative; display: block; min-height: 540px; background: #E4E1DB; overflow: hidden; }
.presente-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.presente-foto:hover img { transform: scale(1.03); }
.presente-txt { padding: 48px 52px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.presente-txt h2 { margin: 0; font-size: clamp(40px, 4.2vw, 64px); line-height: 0.95; }
.presente-txt h2 em { color: var(--osso-dim); }
.presente-txt p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--osso-dim); max-width: 440px; }
.presente-preco {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 16px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
}
.presente-preco .valor { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.presente-preco span:last-child { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cinza); }
.presente-acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.presente-acoes .btn { padding: 0 26px; }

.presente-passos {
  list-style: none; margin: 0; padding: 36px 52px; border-left: 1px solid var(--linha);
  display: flex; flex-direction: column; justify-content: center;
}
.presente-passos li { display: flex; gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--linha); }
.presente-passos li:last-child { border-bottom: none; }
.presente-passos .num { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--cinza); flex-shrink: 0; }
.presente-passos li > span:last-child { font-size: 13px; line-height: 1.7; color: var(--cinza); }
.presente-passos strong {
  display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--osso);
}

/* ---------- Faixa do filme ---------- */

.filme {
  position: relative; margin-top: 96px; height: 78vh; min-height: 520px; max-height: 820px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.filme-midia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.filme-veu {
  position: absolute; inset: 0; transition: opacity .6s ease;
  background: linear-gradient(180deg, rgba(14,13,12,.72) 0%, rgba(14,13,12,.4) 45%, rgba(14,13,12,.85) 100%);
}
.filme-conteudo {
  position: relative; z-index: 2; text-align: center; padding: 0 var(--gutter);
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  transition: opacity .5s ease;
}
.filme-conteudo h2 { margin: 0; font-size: clamp(40px, 6.4vw, 78px); line-height: 0.96; }
.filme-conteudo p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--osso-dim); max-width: 440px; }

.filme-play {
  margin-top: 8px; background: none; border: none; cursor: pointer; color: var(--osso);
  display: inline-flex; align-items: center; gap: 16px; padding: 8px;
}
.filme-play-icone {
  width: 64px; height: 64px; border-radius: 999px; flex-shrink: 0;
  border: 1px solid var(--linha-forte); display: flex; align-items: center; justify-content: center;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.filme-play:hover .filme-play-icone { background: var(--osso); color: var(--noir); border-color: var(--osso); }
.filme-play-txt { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.filme-play-txt strong { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.filme-play-txt span { font-size: 11px; color: var(--cinza); letter-spacing: 0.1em; }

/* no canto: a barra de controles do próprio vídeo fica embaixo */
.filme-fechar { position: absolute; z-index: 3; top: 14px; right: 14px; display: none; }
.filme-fechar button {
  background: rgba(14,13,12,.72); backdrop-filter: blur(8px);
  border: 1px solid var(--linha-forte); color: var(--osso);
  min-height: 44px; padding: 0 18px; cursor: pointer;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.filme-fechar button:hover { background: var(--osso); color: var(--noir); border-color: var(--osso); }

.filme.tocando .filme-conteudo { opacity: 0; pointer-events: none; }
.filme.tocando .filme-veu { opacity: 0; }
.filme.tocando .filme-fechar { display: block; }

/* tocando, o vídeo aparece inteiro em vez de preencher a caixa: o filme é
   16:9 e a faixa é mais alta, então "cover" cortava as laterais */
.filme.tocando [data-filme-video] { object-fit: contain; background: #000; }
.filme.tocando { background: #000; }

/* ---------- A marca ---------- */

.sobre { margin-top: 100px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
/* a foto preenche a coluna sem mandar na altura: quem define a altura da
   seção é o texto. Antes a imagem vertical esticava a linha inteira. */
.sobre-foto { position: relative; min-height: 600px; overflow: hidden; }
.sobre-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%;
}

.sobre-txt {
  position: relative; overflow: hidden;
  background: var(--carvao); padding: 88px var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
}
/* o monograma ocupa o vão à direita sem virar ruído */
.sobre-marca {
  position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
  width: 46%; max-width: 460px; opacity: 0.07; pointer-events: none; user-select: none;
}
/* bloco centrado na coluna: a folga fica dos dois lados, como margem
   de página, em vez de virar um vão morto só à direita */
.sobre-corpo {
  position: relative; z-index: 1; width: 100%; max-width: 620px; margin-inline: auto;
  display: flex; flex-direction: column; gap: 22px;
}

.sobre-txt h2 { margin: 0; font-size: 58px; line-height: 0.98; }
.sobre-txt p { margin: 0; font-size: 14px; line-height: 1.9; color: var(--osso-dim); }

/* parágrafo de abertura: degrau de hierarquia por tipografia, sem moldura */
.sobre-abertura {
  font-family: var(--display); font-size: 28px; line-height: 1.36; color: var(--osso);
}

.sobre-local {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cinza);
}
.ponto-cor {
  width: 7px; height: 7px; border-radius: 999px; background: var(--oxblood);
  box-shadow: 0 0 0 4px rgba(110, 32, 36, 0.28); flex-shrink: 0; display: inline-block;
}

/* linha de especificação, no espírito da etiqueta costurada na peça */
.sobre-etiqueta {
  margin-top: 14px !important; padding-top: 22px;
  border-top: 1px solid var(--linha);
  font-size: 10px !important; line-height: 2.1 !important;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--cinza) !important; max-width: none !important;
}

/* ---------- Rodapé ---------- */

.rodape { border-top: 1px solid var(--linha); }

.rodape-topo { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }

.rodape-news {
  border-right: 1px solid var(--linha); display: flex; flex-direction: column;
}
.rodape-news-txt { padding: 48px var(--gutter); display: flex; align-items: flex-start; gap: 20px; flex-grow: 1; }
.rodape-news-txt img { width: 58px; flex-shrink: 0; }
.rodape-news-txt p { margin: 0; font-size: 14px; line-height: 1.6; }
.rodape-form { border-top: 1px solid var(--linha); display: flex; flex-direction: column; }
.rodape-campo { display: grid; grid-template-columns: 150px 1fr; align-items: stretch; border-bottom: 1px solid var(--linha); }
.rodape-campo label {
  display: flex; align-items: center; padding: 0 var(--gutter);
  font-size: 13px; border-right: 1px solid var(--linha);
}
.rodape-campo input {
  background: none; border: none; color: var(--osso); padding: 22px 24px;
  font-family: var(--corpo); font-size: 14px; min-height: 64px; width: 100%;
}
.rodape-campo input::placeholder { color: var(--cinza-off); }
.rodape-campo input:focus { outline: none; background: rgba(234,228,214,.04); }
.rodape-enviar {
  background: var(--osso); color: var(--noir); border: none; cursor: pointer;
  min-height: 72px; display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
}
.rodape-enviar:hover { background: #fff; }
.rodape-enviar:disabled { opacity: .6; cursor: wait; }

/* aviso de consentimento da lista e campo isca (entram pelo app.js) */
.lista-aviso {
  margin: 0; padding: 14px var(--gutter); font-size: 11px; line-height: 1.6;
  color: var(--cinza); border-bottom: 1px solid var(--linha);
}
.lista-aviso a { color: var(--osso-dim); text-decoration: underline; }
.lista-aviso.erro { color: var(--osso); }
.lista-isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.rodape-colunas {
  padding: 48px var(--gutter);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
}
.rodape-col h3 { margin: 0 0 20px 0; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.rodape-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.rodape-col a, .rodape-col span { font-size: 13px; color: var(--osso-dim); }
.rodape-col a:hover { color: #fff; }
.rodape-col .nota { font-size: 11px; color: var(--cinza); line-height: 1.7; margin-top: 4px; display: block; }
.rodape-social a { display: flex; align-items: center; gap: 12px; }
.rodape-social svg { flex-shrink: 0; }

.rodape-pagamento {
  padding: 26px var(--gutter); border-top: 1px solid var(--linha);
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.rodape-pagamento .rotulo { flex-shrink: 0; }
.pg-selo {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--linha); padding: 9px 14px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--osso-dim);
}

.rodape-wordmark { padding: 30px var(--gutter) 10px; overflow: hidden; }
.rodape-wordmark span {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: clamp(48px, 13.2vw, 260px); line-height: 0.82; letter-spacing: -0.02em;
  color: var(--osso); text-align: center; white-space: nowrap;
}

.rodape-legal {
  padding: 22px var(--gutter) 34px; border-top: 1px solid var(--linha);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.rodape-legal p, .rodape-legal a { margin: 0; font-size: 10px; letter-spacing: 0.12em; color: var(--cinza); line-height: 1.8; }
.rodape-legal a:hover { color: var(--osso); }

/* Crédito do site: faixa própria, logo abaixo de "Como comprar" e acima do wordmark */
.rodape-credito {
  padding: 26px var(--gutter); border-top: 1px solid var(--linha);
  display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap;
}
.rodape-credito .rotulo { flex-shrink: 0; }
.credito-logo { display: block; flex-shrink: 0; }
.rodape-credito img { display: block; height: 36px; width: auto; }
.rodape-credito p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--osso-dim); }
.rodape-credito p strong { color: var(--osso); font-weight: 600; }
.rodape-credito .credito-link {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  padding-bottom: 3px; border-bottom: 1px solid var(--osso); color: var(--osso);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.rodape-credito .credito-link:hover { color: #fff; border-color: #fff; }

@media (max-width: 860px) {
  .rodape-credito { flex-direction: column; align-items: flex-start; padding: 24px var(--gutter); }
  .rodape-credito .credito-link { margin-left: 0; }
}

/* Nas páginas legais o rodapé é centralizado e o crédito vem antes dos dados da marca */
.rodape-simples .rodape-credito {
  flex-direction: column; align-items: center; text-align: center;
  padding: 0 0 28px; margin-bottom: 28px; border-top: none; border-bottom: 1px solid var(--linha);
}
.rodape-simples .rodape-credito .credito-link { margin-left: 0; }

/* ---------- Coleção ---------- */

.colecao-cabeca { padding: 60px var(--gutter) 30px; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.colecao-cabeca h1 { margin: 0; font-size: 58px; }
.colecao-cabeca .rotulo { margin-bottom: 12px; }
.colecao-cabeca p { margin: 0; max-width: 300px; font-size: 12px; line-height: 1.75; color: var(--cinza); text-align: right; }

.filtros {
  margin: 0 var(--gutter); padding: 18px 0;
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
}
.filtros-esq { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.chip {
  min-height: 40px; background: transparent; color: var(--osso);
  border: 1px solid rgba(234,228,214,.22); padding: 0 20px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
}
.chip:hover { border-color: var(--osso); }
.chip[aria-pressed="true"] { background: var(--osso); color: var(--noir); border-color: var(--osso); font-weight: 700; }
.chip-cor { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--linha-forte); padding: 0; cursor: pointer; }
.chip-cor[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--noir), 0 0 0 4px var(--osso); }
.filtros .divisor { width: 1px; height: 26px; background: rgba(234,228,214,.16); margin: 0 6px; }

/* ---------- Página de produto ---------- */

.produto { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.galeria { display: flex; flex-direction: column; gap: 10px; }
.galeria-principal { background: var(--estudio); aspect-ratio: 4 / 5; overflow: hidden; }
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria-miniaturas { display: flex; gap: 10px; padding: 0 10px 10px; }
.galeria-miniaturas button {
  width: 100px; aspect-ratio: 4 / 5; padding: 0; background: var(--estudio);
  border: 1px solid var(--linha); cursor: pointer; overflow: hidden;
}
.galeria-miniaturas button[aria-current="true"] { border-color: var(--osso); }
.galeria-miniaturas img { width: 100%; height: 100%; object-fit: cover; }

.detalhes { padding: 52px var(--gutter); border-left: 1px solid var(--linha); display: flex; flex-direction: column; gap: 26px; }
.detalhes-cabeca { display: flex; flex-direction: column; gap: 14px; }
.detalhes-cabeca .rotulo { letter-spacing: 0.28em; }
.detalhes h1 { margin: 0; font-size: 56px; line-height: 0.96; }

.bloco-preco { display: flex; flex-direction: column; gap: 10px; padding-bottom: 24px; border-bottom: 1px solid var(--linha); }
.bloco-preco .linha { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.bloco-preco .valor { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.bloco-preco .parcela { font-size: 13px; color: var(--cinza); }
.selo-pix {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 9px;
  background: var(--oxblood); color: var(--osso); padding: 8px 13px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}

/* brinde da primeira compra: aparece em cada camiseta e leva à aba do boné */
.brinde {
  display: flex; align-items: center; gap: 14px; margin-top: 4px;
  background: rgba(110, 32, 36, 0.22); border: 1px solid var(--oxblood);
  padding: 10px 16px 10px 10px; transition: background .2s ease;
}
.brinde:hover { background: rgba(110, 32, 36, 0.4); }
.brinde img { width: 56px; height: 70px; object-fit: cover; flex-shrink: 0; background: #E4E1DB; }
.brinde-txt { display: flex; flex-direction: column; gap: 4px; }
.brinde-txt strong { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--osso); }
.brinde-txt span { font-size: 12px; color: var(--osso-dim); line-height: 1.5; }

.passos-bone { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.passos-bone li { display: flex; gap: 16px; align-items: baseline; font-size: 13px; line-height: 1.6; color: var(--osso-dim); }
.passos-bone .num { font-family: var(--display); font-size: 18px; color: var(--cinza); flex-shrink: 0; }
.passos-bone strong { color: var(--osso); }
.acoes .dica a { color: var(--osso); border-bottom: 1px solid var(--linha-forte); }

.grupo { display: flex; flex-direction: column; gap: 12px; }
.grupo-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.grupo-cabeca .rotulo { letter-spacing: 0.22em; }
.link-guia {
  background: none; border: none; color: var(--osso); font-family: var(--corpo);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
  border-bottom: 1px solid var(--linha-forte); padding: 0 0 3px; min-height: 24px;
}
.tamanhos { display: flex; gap: 10px; }
.tam {
  flex: 1 1 0; min-height: 52px; background: transparent; color: var(--osso);
  border: 1px solid rgba(234,228,214,.28); font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; cursor: pointer;
}
.tam:hover { border-color: var(--osso); }
.tam[aria-pressed="true"] { background: var(--osso); color: var(--noir); border-color: var(--osso); font-weight: 700; }
.tam:disabled { color: var(--cinza-off); border-color: var(--linha); cursor: not-allowed; text-decoration: line-through; }
.dica { font-size: 11px; color: var(--cinza); line-height: 1.6; }

.acoes { display: flex; flex-direction: column; gap: 12px; }
.acoes .btn { min-height: 58px; }

.garantias { display: flex; flex-direction: column; gap: 11px; padding: 20px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.garantias .item { display: flex; align-items: center; gap: 11px; }
.garantias .item span { font-size: 12px; color: var(--osso-dim); }
.garantias svg { flex-shrink: 0; }

.sanfona { display: flex; flex-direction: column; }
.sanfona-botao {
  width: 100%; background: none; border: none; border-bottom: 1px solid var(--linha);
  color: var(--osso); padding: 17px 0; display: flex; justify-content: space-between;
  align-items: center; gap: 12px; cursor: pointer; min-height: 48px; text-align: left;
}
.sanfona-botao span:first-child { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.sanfona-sinal { font-size: 17px; color: var(--cinza); line-height: 1; }
.sanfona-corpo { padding: 4px 0 20px; border-bottom: 1px solid var(--linha); }
.sanfona-corpo[hidden] { display: none; }
.sanfona-corpo p { margin: 0; font-size: 12px; line-height: 1.85; color: var(--cinza); }
.sanfona-corpo strong { color: var(--osso-dim); }

.medidas { width: 100%; border-collapse: collapse; font-size: 12px; }
.medidas th { text-align: left; padding: 0 0 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 10px; border-bottom: 1px solid var(--linha-forte); }
.medidas td { padding: 12px 0; border-bottom: 1px solid var(--linha); color: var(--cinza); }
.medidas td:first-child { font-family: var(--display); color: var(--osso); font-size: 15px; }

.barra-fixa { display: none; }

/* ---------- Sacola ---------- */

.veu {
  position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px); opacity: 0; pointer-events: none;
  transition: opacity .4s ease; border: none; padding: 0;
}
.veu.aberto { opacity: 1; pointer-events: auto; }

.sacola {
  position: fixed; top: 0; right: 0; z-index: 90; height: 100%;
  width: 400px; max-width: 100%; background: var(--carvao);
  border-left: 1px solid var(--linha); display: flex; flex-direction: column;
  padding: 28px; gap: 20px; transform: translateX(100%);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.sacola.aberta { transform: translateX(0); }
.sacola-cabeca { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--linha); }
.sacola-cabeca h2 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.sacola-itens { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding: 4px 0; }
.sacola-vazia { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cinza); text-align: center; margin-top: 60px; }
.sacola-item { display: flex; gap: 14px; align-items: stretch; }
.sacola-item .foto { width: 72px; aspect-ratio: 4 / 5; background: var(--estudio); flex-shrink: 0; overflow: hidden; }
.sacola-item .foto img { width: 100%; height: 100%; object-fit: cover; }
.sacola-item .info { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.sacola-item .nome { font-family: var(--display); font-size: 16px; line-height: 1.15; }
.sacola-item .variante { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cinza); }
.sacola-item .base { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sacola-item .preco { font-size: 13px; font-weight: 700; }
.lixo { background: none; border: none; color: var(--cinza); cursor: pointer; padding: 8px; display: flex; min-height: 36px; }
.lixo:hover { color: var(--osso); }
.sacola-pe { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; border-top: 1px solid var(--linha); }
.sacola-total { display: flex; justify-content: space-between; align-items: baseline; }
.sacola-total .rotulo { letter-spacing: 0.2em; }
.sacola-total .valor { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.sacola-total .valor-bloco { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sacola-total .parcelas { font-size: 11px; color: var(--cinza); }
.sacola-nota { font-size: 10px; color: var(--cinza); text-align: center; line-height: 1.6; margin: 0; }
.sacola-nota:empty { display: none; }
.sacola-vazia a { display: inline-block; margin-top: 18px; color: var(--osso); border-bottom: 1px solid var(--linha-forte); padding-bottom: 3px; }

.sacola-pedido { display: flex; flex-direction: column; gap: 12px; }
.sacola-pedido[hidden] { display: none; }
.brinde-check {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--oxblood); background: rgba(110, 32, 36, 0.22);
  font-size: 12px; line-height: 1.5; color: var(--osso-dim);
}
.brinde-check[hidden] { display: none; }
.brinde-check input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--osso); cursor: pointer; }
.brinde-check strong { color: var(--osso); }
.btn-pedido { gap: 10px; padding: 0 18px; font-size: 11px; letter-spacing: 0.14em; }

/* ---------- Busca ---------- */

.busca {
  position: fixed; inset: 0; z-index: 100; background: rgba(14, 13, 12, .97);
  backdrop-filter: blur(18px); display: flex; flex-direction: column;
  align-items: center; padding: 96px 24px 24px; opacity: 0; pointer-events: none;
  transition: opacity .4s ease; overflow-y: auto;
}
.busca.aberta { opacity: 1; pointer-events: auto; }
.busca-fechar { position: absolute; top: 24px; right: 24px; }
.busca-caixa { width: 100%; max-width: 900px; }
.busca-caixa input {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--linha-forte); color: var(--osso);
  padding: 20px 4px; font-family: var(--display); font-size: 46px; letter-spacing: -0.02em;
}
.busca-caixa input::placeholder { color: rgba(234, 228, 214, .18); }
.busca-caixa input:focus { border-bottom-color: var(--osso); outline: none; }
.busca-resultados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.busca-item { display: flex; gap: 18px; align-items: center; padding: 14px; border: 1px solid transparent; }
.busca-item:hover { background: rgba(234, 228, 214, .05); border-color: var(--linha); }
.busca-item .foto { width: 72px; aspect-ratio: 4 / 5; background: var(--estudio); flex-shrink: 0; overflow: hidden; }
.busca-item .foto img { width: 100%; height: 100%; object-fit: cover; }
.busca-item .nome { font-family: var(--display); font-size: 19px; line-height: 1.15; }
.busca-item .desc { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cinza); margin: 4px 0 8px; }
.busca-item .preco { font-size: 13px; font-weight: 700; }
.busca-item .preco .total { font-size: 11px; font-weight: 400; color: var(--cinza); margin-left: 4px; }
.busca-nada { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cinza); grid-column: 1 / -1; }

/* ---------- Policy pages ---------- */

.politica-main {
  max-width: 720px; margin: 0 auto;
  padding: 60px var(--gutter) 100px;
}
.politica-main h1 { margin: 0 0 8px; font-size: 48px; }
.politica-data { font-size: 11px; color: var(--cinza); letter-spacing: 0.16em; margin-bottom: 48px; display: block; }

.politica-secao { padding: 32px 0; border-bottom: 1px solid var(--linha); }
.politica-secao:last-child { border-bottom: none; }
.politica-secao h2 {
  margin: 0 0 18px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.politica-secao p, .politica-secao li {
  margin: 0; font-size: 14px; line-height: 1.85; color: var(--osso-dim);
}
.politica-secao p + p { margin-top: 14px; }
.politica-secao strong { color: var(--osso); }
.politica-secao ul, .politica-secao ol { margin: 14px 0 0; padding-left: 22px; }
.politica-secao li { margin-bottom: 8px; }
.politica-secao a { color: var(--osso-dim); text-decoration: underline; }
.politica-secao a:hover { color: #fff; }

/* ---------- Cookie banner ---------- */

.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: var(--carvao); border-top: 1px solid var(--linha-forte);
  padding: 20px var(--gutter); display: flex; align-items: center;
  justify-content: space-between; gap: 24px;
  transform: translateY(100%); transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.cookie-banner.visivel { transform: translateY(0); }
.cookie-banner p { margin: 0; font-size: 12px; color: var(--osso-dim); line-height: 1.6; flex-grow: 1; }
.cookie-banner a { color: var(--osso); text-decoration: underline; }
.cookie-acoes { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-acoes .btn { min-height: 40px; padding: 0 20px; font-size: 10px; }

/* ---------- Telas menores ---------- */

@media (max-width: 1180px) {
  :root { --gutter: 36px; }
  .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .produto { grid-template-columns: 1fr; }
  .detalhes { border-left: none; border-top: 1px solid var(--linha); }
  .galeria-principal { aspect-ratio: 1 / 1; }
  .rodape-topo { grid-template-columns: 1fr; }
  .rodape-news { border-right: none; border-bottom: 1px solid var(--linha); }
  .rodape-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .sobre-foto { min-height: 460px; }

  .presente { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
  .presente-txt { padding: 40px; }
  .presente-passos {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0; border-left: none; border-top: 1px solid var(--linha);
  }
  .presente-passos li { padding: 26px 28px; border-bottom: none; border-right: 1px solid var(--linha); }
  .presente-passos li:last-child { border-right: none; }
}

@media (max-width: 860px) {
  :root { --gutter: 20px; }
  .topo-nav { min-height: 60px; gap: 8px; }
  .topo-esq .topo-link, .topo-dir .topo-link { display: none; }
  .menu-btn { display: flex; }
  .topo-esq, .topo-dir { gap: 2px; }
  .marca { font-size: 16px; }
  /* as duas frases do aviso quebram em duas linhas; o ponto sobraria pendurado */
  .aviso { gap: 4px 22px; }
  .aviso .ponto { display: none; }

  .menu-mobile { display: flex; flex-direction: column; border-top: 1px solid var(--linha); }
  .menu-mobile[hidden] { display: none; }
  .menu-mobile a {
    padding: 18px var(--gutter); border-bottom: 1px solid var(--linha);
    font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; min-height: 54px;
    display: flex; align-items: center;
  }
  .menu-mobile a:last-child { border-bottom: none; }

  .hero { height: calc(100vh - 98px); min-height: 480px; }
  .hero h1 { font-size: clamp(42px, 13vw, 64px); }
  .hero p { font-size: 13px; }
  .hero-conteudo { gap: 16px; }
  .hero-acoes { flex-direction: column; align-items: center; gap: 10px; margin-top: 10px; }
  .hero-acoes .btn {
    width: auto; min-height: 44px; padding: 0 26px;
    font-size: 10px; letter-spacing: 0.16em;
  }

  .confianca { grid-template-columns: 1fr; }
  .confianca div { min-height: 54px; border-right: none; border-bottom: 1px solid var(--linha); }
  .confianca div:last-child { border-bottom: none; }

  .secao { padding: 48px var(--gutter) 0; }
  .secao-topo h2 { font-size: 34px; }
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .trilho { gap: 12px; }
  .trilho .card { flex-basis: 62vw; }
  .trilho-setas { display: none; }
  .secao-acoes { gap: 0; }
  .card-nome { font-size: 16px; }

  .presente { margin-top: 48px; grid-template-columns: 1fr; }
  .presente-foto { min-height: 0; aspect-ratio: 1 / 1; }
  .presente-txt { padding: 30px 22px; gap: 18px; }
  .presente-txt h2 { font-size: 38px; }
  .presente-preco .valor { font-size: 22px; }
  .presente-acoes .btn { flex: 1 1 auto; min-height: 48px; padding: 0 18px; font-size: 10px; }
  .presente-passos { grid-template-columns: 1fr; }
  .presente-passos li { padding: 18px 22px; border-right: none; border-bottom: 1px solid var(--linha); }
  .presente-passos li:last-child { border-bottom: none; }
  .presente-passos .num { font-size: 24px; }

  .filme { margin-top: 56px; height: 62vh; min-height: 420px; }
  /* no celular a faixa vira uma caixa 16:9 enquanto toca, do tamanho exato
     do filme — sem barras enormes e sem corte */
  .filme.tocando { height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 9; }
  .filme-conteudo { gap: 16px; }
  .filme-conteudo p { font-size: 13px; }
  .filme-play { gap: 12px; }
  .filme-play-icone { width: 54px; height: 54px; }

  .sobre { margin-top: 56px; grid-template-columns: 1fr; }
  .sobre-foto { min-height: 340px; }
  .sobre-txt { padding: 48px var(--gutter); }
  .sobre-txt h2 { font-size: 38px; }
  .sobre-marca { width: 66%; right: -18%; opacity: 0.05; }
  .sobre-abertura { font-size: 21px; max-width: none; }
  .sobre-etiqueta { letter-spacing: 0.2em; }

  .rodape-news-txt { padding: 32px var(--gutter); }
  .rodape-campo { grid-template-columns: 1fr; }
  .rodape-campo label { border-right: none; border-bottom: 1px solid var(--linha); padding: 14px var(--gutter); }
  .rodape-campo input { padding: 16px var(--gutter); min-height: 56px; }
  .rodape-colunas { grid-template-columns: 1fr; gap: 30px; padding: 36px var(--gutter); }
  .rodape-pagamento { padding: 22px var(--gutter); gap: 14px; }
  .rodape-wordmark { padding: 18px 10px 4px; }
  .rodape-legal { padding: 18px var(--gutter) 28px; }

  .colecao-cabeca { padding: 40px var(--gutter) 20px; }
  .colecao-cabeca h1 { font-size: 36px; }
  .colecao-cabeca p { text-align: left; max-width: none; }
  .filtros { overflow-x: auto; }
  .filtros-esq { flex-wrap: nowrap; }

  .galeria-principal { aspect-ratio: 4 / 5; }
  .galeria-miniaturas button { width: 64px; }
  .detalhes { padding: 28px var(--gutter) 120px; gap: 22px; }
  .detalhes h1 { font-size: 40px; }
  .bloco-preco .valor { font-size: 28px; }

  .barra-fixa {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    min-height: 88px; background: var(--carvao); border-top: 1px solid var(--linha-forte);
    padding: 14px var(--gutter); align-items: center; gap: 14px;
  }
  .barra-fixa .info { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
  .barra-fixa .valor { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
  .barra-fixa .nota { font-size: 10px; color: var(--cinza); }
  .barra-fixa .btn { flex-grow: 1; min-height: 56px; padding: 0 16px; }

  .sacola { width: 100%; padding: 20px; }
  .busca { padding: 76px 20px 20px; }
  .busca-caixa input { font-size: 28px; }
  .busca-resultados { grid-template-columns: 1fr; }

  .politica-main { padding: 40px var(--gutter) 60px; }
  .politica-main h1 { font-size: 32px; }

  .cookie-banner { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px var(--gutter); }
  .cookie-acoes { justify-content: stretch; }
  .cookie-acoes .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Páginas legais: topo e rodapé simples ----------
   Estavam só no <style> embutido da página de trocas, então a política de
   privacidade carregava sem eles. Ficam aqui para as quatro páginas usarem. */

.topo-simples {
  padding: 24px var(--gutter); display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 100;
  background: rgba(14, 13, 12, 0.92); backdrop-filter: blur(14px);
}
.topo-simples .voltar {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--osso); font-size: 13px; min-height: 44px;
}
.topo-simples .voltar:hover { color: #fff; }
.topo-simples .marca { font-size: 20px; }

.rodape-simples {
  border-top: 1px solid var(--linha); padding: 40px var(--gutter);
  text-align: center; font-size: 12px; color: var(--cinza); line-height: 1.7;
}
.rodape-simples p { margin: 0 0 4px; }
.rodape-simples a { color: var(--cinza); }
.rodape-simples a:hover { color: var(--osso); }
.rodape-simples .rodape-links,
.rodape-simples .links-uteis {
  margin-top: 16px; display: flex; justify-content: center;
  flex-wrap: wrap; gap: 14px 24px;
}
.rodape-simples .rodape-links a { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }

@media (max-width: 860px) {
  .topo-simples { padding: 18px var(--gutter); }
  .topo-simples .marca { font-size: 16px; }
  .rodape-simples { padding: 32px var(--gutter); }
}

/* As duas páginas legais nasceram com marcações diferentes: uma usa
   section.politica-secao + span.rotulo, a outra section + h2. As regras
   abaixo cobrem as duas, para nenhuma depender de <style> embutido. */

.politica-main section { padding: 32px 0; border-bottom: 1px solid var(--linha); }
.politica-main section:last-of-type { border-bottom: none; }
.politica-main h2 {
  margin: 0 0 16px; font-family: var(--corpo); font-weight: 400;
  font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--cinza);
}
.politica-main p, .politica-main li { font-size: 14px; line-height: 1.85; color: var(--osso-dim); }
.politica-main p { margin: 0 0 14px; }
.politica-main ul, .politica-main ol { margin: 14px 0; padding-left: 22px; }
.politica-main li { margin-bottom: 8px; }
.politica-main strong { color: var(--osso); }
.politica-main a { color: var(--osso-dim); text-decoration: underline; }
.politica-main a:hover { color: #fff; }
.politica-main .data-atualizacao,
.politica-main .politica-data {
  display: block; text-align: center; margin-bottom: 48px;
  font-size: 11px; letter-spacing: 0.16em; color: var(--cinza);
}
.politica-main h1 { text-align: center; }