/* Estrutura: cabeçalho, régua, grade de canaleta, abertura e rodapé.
   Profundidade vem de campo de cor chapado, nunca de desfoque ou sombra. */

.faixa{
  width:100%;
  max-width:var(--faixa);
  margin:0 auto;
  padding:0 var(--v-3);
}

/* ── Cabeçalho ───────────────────────────────────────────────────────────────
   Estático e opaco. Não encolhe, não desfoca, não ganha sombra ao rolar. */

.topo{
  background:var(--papel);
  border-bottom:1px solid var(--risco);
}

.topo-in{
  display:flex;
  align-items:center;
  gap:var(--v-3);
  min-height:72px;
}

.marca{
  display:flex; align-items:center; gap:10px;
  color:var(--tinta); text-decoration:none;
  flex:0 0 auto; margin-right:auto;
}
.marca-icone{
  width:26px; height:26px;
  fill:none; stroke:var(--azul); stroke-width:2.1; stroke-linecap:round;
}
/* O ponto verde do logotipo: um dos quatro lugares onde o verde entra. */
.marca-icone .vivo{fill:var(--verde-vivo); stroke:none}
.marca-txt{
  font-family:var(--titulo);
  font-weight:650; font-stretch:92%;
  font-size:1.125rem;
  letter-spacing:.01em;
}

.nav{display:flex; align-items:center; gap:var(--v-3)}
.nav a{
  font-family:var(--titulo);
  font-weight:500;
  font-size:.9375rem;
  color:var(--tinta-2);
  text-decoration:none;
  padding:6px 0;
  border-bottom:2px solid transparent;
  transition:color var(--t-estado) var(--curva-estado),
             border-color var(--t-estado) var(--curva-estado);
}
.nav a:hover{color:var(--tinta)}
.nav a[aria-current]{color:var(--tinta); border-bottom-color:var(--azul)}

.nav-contato{
  border:1px solid var(--azul) !important;
  color:var(--azul) !important;
  padding:7px 16px !important;
}
.nav-contato:hover{background:var(--azul); color:var(--papel) !important}

.menu-btn{
  display:none;
  width:42px; height:42px;
  padding:0; margin:0;
  background:none; border:1px solid var(--risco-forte);
  cursor:pointer;
}
.menu-btn span{
  display:block; width:18px; height:1.5px;
  margin:3px auto; background:var(--tinta);
}

/* ── Abertura ──────────────────────────────────────────────────────────────
   Campo azul chapado. É o único bloco de cor cheia do topo da página, e é o que
   dá peso sem precisar de degradê nem de imagem. */

.abertura{
  background:var(--chapa);
  color:var(--chapa-txt);
  padding:var(--v-5) 0;
}
.abertura h1{color:var(--chapa-txt); max-width:20ch}
.abertura .sobrenome{color:var(--azul-claro)}
.abertura .linha-fina{color:var(--chapa-txt-2)}
.abertura a{color:var(--azul-claro)}

.identificacao{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--v-2) var(--v-4);
  margin:var(--v-4) 0 0;
  padding-top:var(--v-3);
  border-top:1px solid rgba(255,255,255,.16);
}
.abertura .identificacao dt{color:var(--chapa-txt-2)}
.identificacao dd{margin:0; font-size:.9375rem}

/* ── Grade de duas colunas ─────────────────────────────────────────────────── */

.secao{padding:var(--v-5) 0}
.secao-alt{background:var(--papel-2)}

.colunas{
  display:grid;
  grid-template-columns:var(--canaleta) minmax(0,1fr);
  gap:var(--v-3);
  align-items:start;
}

.canaleta{
  position:sticky; top:var(--v-3);
  padding-top:.45rem;
}

.corpo > :last-child{margin-bottom:0}

/* ── Rodapé ────────────────────────────────────────────────────────────────── */

.rodape{
  background:var(--chapa);
  color:var(--chapa-txt);
  margin-top:var(--v-6);
  padding:var(--v-5) 0 var(--v-3);
}
.rodape a{color:var(--chapa-txt)}
.rodape a:hover{color:#fff}

.rodape-in{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:var(--v-4);
  padding-bottom:var(--v-4);
}
.rodape-col .marca-txt{display:block; margin-bottom:var(--v-2)}
.rodape-legal,.rodape-area{color:var(--chapa-txt-2); font-size:.9375rem}

.rodape-tit,.rodape-dados dt{color:var(--chapa-txt-2)}
.rodape-tit{margin-bottom:var(--v-2)}

.rodape-lista{list-style:none; padding:0; margin:0; font-size:.9375rem}
.rodape-dados{margin:0; font-size:.9375rem}
.rodape-dados dt{margin-top:var(--v-2)}
.rodape-dados dt:first-child{margin-top:0}
.rodape-dados dd{margin:0}

.rodape-base{
  display:flex; flex-wrap:wrap; gap:var(--v-2) var(--v-4);
  align-items:center;
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:var(--v-3);
  font-size:.875rem;
  color:var(--chapa-txt-2);
}
.rodape-base p{margin:0; max-width:none}
.rodape-base p:last-child{margin-left:auto}