/* Fontes servidas localmente: o CSP do núcleo é style-src 'self', então nada de CDN. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/manrope-800.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-400.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-500.ttf') format('truetype');
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fonte-display);
  font-size: var(--texto-corpo);
  line-height: 1.6;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--cor-azul-cobalto); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--fonte-display);
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: var(--texto-hero);
  line-height: var(--entrelinha-display);
  letter-spacing: var(--tracking-display);
}
h2 {
  font-size: var(--texto-h2);
  line-height: var(--entrelinha-h2);
  letter-spacing: var(--tracking-h2);
  color: var(--cor-texto-titulo);
}
h3 {
  font-size: var(--texto-h3);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
p { margin: 0; max-width: var(--medida-leitura); }
h1 + p, h2 + p, p + p { margin-top: 1.25rem; }

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--cor-destaque);
  color: var(--cor-tinta-sobre-destaque);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
}
.pular-para-conteudo:focus { left: 0; }

.container {
  width: 100%;
  max-width: var(--largura-container);
  margin-inline: auto;
  padding-inline: var(--espaco-container);
}

/* Rótulo técnico: o contraponto de engenharia previsto no manual */
.mono {
  font-family: var(--fonte-mono);
  font-size: var(--texto-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--cor-texto-apoio);
}
.mono--claro { color: var(--cor-texto-mono-escuro); }
.mono--destaque { color: var(--cor-destaque); }

.regua {
  height: 2px;
  width: 64px;
  background: var(--cor-destaque);
  border: 0;
  margin: 0 0 1.5rem;
}

.secao { padding-block: var(--espaco-secao); }
.secao--escura {
  background: var(--cor-fundo-escuro);
  color: var(--cor-texto-sobre-escuro);
}
.secao--escura h2 { color: var(--cor-texto-sobre-escuro); }
.secao--escura p { color: var(--cor-texto-apoio-escuro); }
.secao__cabeca { margin-bottom: var(--espaco-bloco); }
.secao__texto { color: var(--cor-texto-apoio); }

/* ============ Tratamento de imagem (sistema) ============ */
.foto { position: relative; overflow: hidden; }
.foto__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--grade-fria);
}
.foto__tom {
  position: absolute;
  inset: 0;
  background: var(--duotone);
  mix-blend-mode: color;
  opacity: var(--duotone-opacidade-fria);
  pointer-events: none;
}
.foto__grao {
  position: absolute;
  inset: 0;
  background-image: var(--textura-grao);
  background-size: var(--grao-escala);
  opacity: var(--grao-opacidade);
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* Fotografia de relacionamento e varejo conserva calor; operação e capacidade ficam frias. */
.foto--quente .foto__img { filter: var(--grade-quente); }
.foto--quente .foto__tom { opacity: var(--duotone-opacidade-quente); }

/* ============ Botões ============ */
.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: var(--alvo-toque-min);
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--raio-padrao);
  font-weight: 800;
  font-size: var(--texto-apoio);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--transicao-media), color var(--transicao-rapida),
              border-color var(--transicao-rapida), background var(--transicao-rapida);
}
.botao > span { position: relative; z-index: 1; }
.botao::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateY(101%);
  transition: transform var(--transicao-media);
}

.botao--destaque {
  background: var(--cor-destaque);
  color: var(--cor-tinta-sobre-destaque);
}
.botao--destaque::before { background: var(--cor-azul-cobalto); }
.botao--destaque:hover { color: var(--cor-branco); }
.botao--destaque:hover::before { transform: translateY(0); }

.botao--contorno {
  background: transparent;
  color: var(--cor-destaque);
  border-color: var(--cor-destaque);
}
.botao--contorno::before { background: var(--cor-destaque); }
.botao--contorno:hover { color: var(--cor-tinta-sobre-destaque); }
.botao--contorno:hover::before { transform: translateY(0); }

.botao--fantasma {
  background: transparent;
  color: var(--cor-texto-sobre-escuro);
  border-color: rgba(234, 239, 247, 0.4);
}
.botao--fantasma:hover { border-color: var(--cor-texto-sobre-escuro); }

.botao--azul {
  background: var(--cor-azul-cobalto);
  color: var(--cor-branco);
}
.botao--azul::before { background: var(--cor-destaque); }
.botao--azul:hover { color: var(--cor-tinta-sobre-destaque); }
.botao--azul:hover::before { transform: translateY(0); }

/* Link com régua: desenha no sentido da leitura */
.link-regua {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--alvo-toque-min);
  font-weight: 800;
  color: var(--cor-texto-titulo);
}
.link-regua::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.6rem;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transicao-media);
}
.link-regua:hover::after { transform: scaleX(1); transform-origin: left; }
.link-regua svg { transition: transform var(--transicao-media); }
.link-regua:hover svg { transform: translateX(6px); }
.link-regua--claro { color: var(--cor-destaque); }

/* ============ Cabeçalho ============ */
.cabecalho {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--transicao-cabecalho), border-color var(--transicao-cabecalho);
}
.cabecalho-sentinela {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: var(--deslocamento-cabecalho-solido);
  pointer-events: none;
  visibility: hidden;
}
.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--altura-cabecalho);
}
.cabecalho__logo { position: relative; display: flex; align-items: center; flex-shrink: 0; min-height: var(--altura-cabecalho-marca); }
.cabecalho__logo img,
.cabecalho__logo .marca {
  display: block;
  height: var(--altura-cabecalho-marca);
  width: auto;
  flex-shrink: 0;
  overflow: visible;
  transition: opacity var(--transicao-cabecalho);
}
.cabecalho__logo .logo-claro { position: relative; opacity: 1; }
.cabecalho__logo .logo-escuro {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}
.marca__cobalto { fill: var(--cor-azul-cobalto); }
.marca__prata { fill: var(--cor-logo-prata); }
.marca__gema { fill: var(--cor-amarelo-gema); }
.marca__clara { fill: var(--cor-branco); }

.cabecalho__nav { display: flex; align-items: center; gap: 1.75rem; }
.cabecalho__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-toque-min);
  font-size: var(--texto-apoio);
  font-weight: 700;
  color: var(--cor-texto-sobre-escuro);
  transition: color var(--transicao-cabecalho);
}
.cabecalho__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  height: 1px;
  background: var(--cor-destaque);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transicao-media);
}
.cabecalho__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.cabecalho__nav a[aria-current='page']::after { transform: scaleX(1); }

.cabecalho__acoes { display: flex; align-items: center; gap: 0.75rem; }
.cabecalho__acoes .botao {
  min-height: var(--altura-cabecalho-marca);
  height: var(--altura-cabecalho-marca);
}

/* Estado sólido: some da foto e vira barra branca */
.cabecalho.solido {
  background-color: var(--cor-branco);
  border-bottom-color: var(--cor-linha);
}
.cabecalho.solido .cabecalho__logo .logo-claro { opacity: 0; }
.cabecalho.solido .cabecalho__logo .logo-escuro { opacity: 1; }
.cabecalho.solido .cabecalho__nav a { color: var(--cor-azul-cobalto); }

.menu-alternar {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--alvo-toque-min);
  height: var(--alvo-toque-min);
  padding: 0;
  background: transparent;
  border: 1px solid rgba(234, 239, 247, 0.4);
  border-radius: var(--raio-padrao);
  color: var(--cor-texto-sobre-escuro);
  cursor: pointer;
  transition: border-color var(--transicao-cabecalho), color var(--transicao-cabecalho);
}
.cabecalho.solido .menu-alternar {
  border-color: var(--cor-linha);
  color: var(--cor-azul-cobalto);
}

/* ============ Hero ============ */
.hero {
  position: relative;
  min-height: var(--altura-hero-interna-reserva);
  min-height: var(--altura-hero-interna);
  height: var(--altura-hero-interna-reserva);
  height: var(--altura-hero-interna);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--cor-fundo-escuro);
  color: var(--cor-texto-sobre-escuro);
}
.pagina-home .hero,
.pagina-havaianas .hero {
  width: 100%;
  height: auto;
  min-height: var(--altura-hero-home-reserva);
  min-height: var(--altura-hero-home);
}
.pagina-atacado .hero,
.pagina-regioes .hero,
.pagina-quem .hero {
  height: auto;
}
.hero__palco { position: absolute; inset: -6% 0 0; will-change: transform; }
.hero__palco .foto__img { height: 112%; }
.hero__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(102deg, rgba(10, 21, 36, 0.95) 0%, rgba(10, 21, 36, 0.66) 44%, rgba(10, 21, 36, 0.12) 100%);
  pointer-events: none;
}
.hero__corpo {
  position: relative;
  padding-top: clamp(8rem, 18vw, 12rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.hero__titulo { margin: 1.5rem 0 0; max-width: 15ch; }
.hero__titulo em { font-style: normal; color: var(--cor-destaque); }
.hero__lead {
  margin: 1.75rem 0 2.25rem;
  max-width: 44ch;
  color: rgba(234, 239, 247, 0.82);
  font-size: 1.0625rem;
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero__prova {
  position: relative;
  border-top: 1px solid rgba(234, 239, 247, 0.18);
}
.hero__prova .container {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  padding-block: 1.5rem;
}
.prova__item { display: flex; flex-direction: column; gap: 0.2rem; }
.prova__item .mono {
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prova__numero {
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  font-family: var(--fonte-mono);
  font-size: var(--texto-numero);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--cor-destaque);
}
.prova__numero small {
  font-size: 0.5em;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ============ Duas frentes ============ */
.frentes__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
/* Deslocamento vertical quebra a leitura em bloco único */
.frente--deslocada { margin-top: clamp(2rem, 7vw, 6rem); }

.frente {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(380px, 46vw, 560px);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  overflow: hidden;
  border-radius: var(--raio-padrao);
  color: var(--cor-texto-sobre-escuro);
  isolation: isolate;
}
.frente .foto {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.frente .foto__img {
  transition: transform 1.1s var(--ease-padrao), filter var(--transicao-padrao);
}
.frente .foto__tom { transition: opacity var(--transicao-padrao); }
.frente__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 21, 36, 0.1) 0%, rgba(10, 21, 36, 0.86) 100%);
  pointer-events: none;
}
.frente__corpo { position: relative; }
.frente h3 { margin-bottom: 0.6rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.03em; }
.frente p { color: rgba(234, 239, 247, 0.82); margin-bottom: 1.5rem; max-width: 38ch; }

.frente:hover .foto__img { transform: scale(1.06); }
.frente:hover .foto__tom { opacity: 0.28; }
.frente--fria:hover .foto__img { filter: grayscale(0.2) contrast(1.05) brightness(0.92); }

/* ============ Estrutura operacional (sangria à esquerda) ============ */
.estrutura { background: var(--cor-fundo); }
.estrutura__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: stretch;
}
.estrutura__foto { position: relative; min-height: clamp(360px, 48vw, 620px); }
.estrutura__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--espaco-secao);
  padding-left: clamp(1.5rem, 5vw, 4.5rem);
  /* alinha a borda direita ao container central, mesmo fora dele */
  padding-right: max(var(--espaco-container), calc((100vw - var(--largura-container)) / 2 + var(--espaco-container)));
}
.pilares {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: var(--espaco-bloco);
  padding-top: var(--espaco-bloco);
  border-top: 1px solid var(--cor-linha);
}
.pilar { display: flex; flex-direction: column; gap: 0.45rem; }
.pilar__icone { color: var(--cor-texto-apoio); margin-bottom: 0.25rem; }
.pilar h3 { font-size: var(--texto-apoio); color: var(--cor-azul-cobalto); }
.pilar p { font-size: 0.875rem; color: var(--cor-texto-apoio); }

/* ============ Regiões (amarelo como bisturi) ============ */
.regioes__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.mapa { position: relative; overflow: visible; }
.mapa__base {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 46px rgba(3, 8, 20, 0.55));
}
.mapa__marcas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mapa__cidade { fill: var(--cor-azul-luz); transition: fill var(--transicao-rapida); }
.mapa__grupo:hover .mapa__cidade:not(.mapa__pulso),
.mapa__grupo:focus-visible .mapa__cidade:not(.mapa__pulso),
.mapa__grupo.ativo .mapa__cidade:not(.mapa__pulso) { fill: var(--cor-branco); }
.mapa__rotulo {
  font-family: var(--fonte-mono);
  font-size: 19px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  fill: var(--cor-texto-apoio-escuro);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicao-rapida);
}
.mapa__hub { fill: var(--cor-destaque); transition: fill var(--transicao-rapida); }
.mapa__grupo:hover .mapa__hub:not(.mapa__pulso),
.mapa__grupo:focus-visible .mapa__hub:not(.mapa__pulso),
.mapa__grupo.ativo .mapa__hub:not(.mapa__pulso) { fill: var(--cor-branco); }
.mapa__rotulo--hub { fill: var(--cor-destaque); font-weight: 500; }
.mapa__ligacao { stroke: var(--cor-azul-luz); stroke-width: 1.6; opacity: 0.35; }

/* Ponto de embarque animado: um traço âmbar percorre cada rota, bem lento e em
   ritmo desencontrado por linha, para não ler como sincronizado.
   Duração/atraso vão por nth-child (não por custom property inline) porque
   navegadores variam na hora de aplicar --var em atributo style de SVG. */
@keyframes mapa-brilho { to { stroke-dashoffset: -600; } }
.mapa__brilho line {
  stroke: var(--cor-destaque);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 3 54;
  opacity: 0.75;
  animation-name: mapa-brilho;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 10s;
}
.mapa__brilho line:nth-child(8n+1) { animation-duration: 9s;  animation-delay: -1s; }
.mapa__brilho line:nth-child(8n+2) { animation-duration: 12s; animation-delay: -4s; }
.mapa__brilho line:nth-child(8n+3) { animation-duration: 8s;  animation-delay: -7s; }
.mapa__brilho line:nth-child(8n+4) { animation-duration: 11s; animation-delay: -2.5s; }
.mapa__brilho line:nth-child(8n+5) { animation-duration: 7s;  animation-delay: -9s; }
.mapa__brilho line:nth-child(8n+6) { animation-duration: 13s; animation-delay: -3s; }
.mapa__brilho line:nth-child(8n+7) { animation-duration: 10s; animation-delay: -6s; }
.mapa__brilho line:nth-child(8n+8) { animation-duration: 14s; animation-delay: -1.5s; }

/* Rótulo só aparece sob interação: o mapa fica limpo em repouso.
   O play-state do pulso é decidido em animations.css, que carrega depois
   e já define o shorthand 'animation' daquela classe. */
.mapa__alvo { fill: transparent; cursor: pointer; }
.mapa__grupo:hover .mapa__rotulo,
.mapa__grupo:focus-visible .mapa__rotulo,
.mapa__grupo.ativo .mapa__rotulo { opacity: 1; }

.cidades {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: var(--espaco-bloco) 0 0;
  padding: 1.25rem 0 0;
  list-style: none;
  border-top: 1px solid var(--cor-linha-escura);
  grid-column: 1 / -1;
}
.cidades li {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--alvo-toque-min);
  padding-block: var(--raio-padrao);
  font-family: var(--fonte-mono);
  font-size: var(--texto-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--cor-texto-apoio-escuro);
  cursor: pointer;
  overflow-wrap: anywhere;
  transition: color var(--transicao-rapida);
}
.cf-turnstile {
  max-width: 100%;
  overflow: hidden;
}
.cidades li[data-hub] { color: var(--cor-destaque); }
.cidades li:hover,
.cidades li:focus-visible,
.cidades li.ativo { color: var(--cor-texto-sobre-escuro); }
.cidades li[data-hub]:hover,
.cidades li[data-hub]:focus-visible,
.cidades li[data-hub].ativo { color: var(--cor-destaque); }

/* ============ Chamada final ============ */
.chamada {
  position: relative;
  overflow: hidden;
  background: var(--cor-fundo-escuro);
  color: var(--cor-texto-sobre-escuro);
}
.chamada__palco { position: absolute; inset: 0; }
.chamada__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 21, 36, 0.82) 0%, rgba(10, 21, 36, 0.94) 100%);
  pointer-events: none;
}
.chamada__corpo {
  position: relative;
  padding-block: var(--espaco-secao);
  max-width: 46rem;
}
.chamada h2 { color: var(--cor-texto-sobre-escuro); }
.chamada p { color: rgba(234, 239, 247, 0.82); margin: 1.25rem 0 2rem; }
.chamada__acoes { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ============ Rodapé ============ */
.rodape { background: var(--cor-fundo); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.rodape__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.rodape__logo { display: block; height: var(--altura-rodape-marca); width: auto; margin-bottom: 1.25rem; overflow: visible; }
.rodape address {
  font-style: normal;
  color: var(--cor-texto-apoio);
  line-height: 1.8;
  font-size: var(--texto-apoio);
  overflow-wrap: anywhere;
}
.rodape__coluna h3 { font-size: var(--texto-apoio); margin-bottom: 1rem; color: var(--cor-azul-cobalto); }
.rodape__nav { display: flex; flex-direction: column; }
.rodape__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: var(--alvo-toque-min);
  font-size: var(--texto-apoio);
  color: var(--cor-texto-apoio);
  transition: color var(--transicao-rapida);
}
.rodape__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  height: 1px;
  background: var(--cor-azul-cobalto);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transicao-media);
}
.rodape__nav a:hover { color: var(--cor-azul-cobalto); }
.rodape__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.rodape__contato { font-size: var(--texto-apoio); color: var(--cor-texto-apoio); overflow-wrap: anywhere; }
.rodape__contato + .rodape__nav { margin-top: 1.25rem; }
.rodape__contato a { display: inline-flex; align-items: center; min-height: var(--alvo-toque-min); }
.rodape__social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.rodape__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--alvo-toque-min);
  min-height: var(--alvo-toque-min);
  padding-inline: 0.75rem;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-padrao);
  color: var(--cor-azul-cobalto);
  font-size: var(--texto-apoio);
  overflow-wrap: anywhere;
  transition: border-color var(--transicao-rapida), background var(--transicao-rapida), color var(--transicao-rapida);
}
.rodape__social a:hover {
  border-color: var(--cor-azul-cobalto);
  background: var(--cor-azul-cobalto);
  color: var(--cor-branco);
}
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--cor-linha);
}
.rodape__credito {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--cor-texto-apoio);
  transition: color var(--transicao-rapida);
}
.rodape__credito::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2rem;
  height: 1px;
  background: var(--cor-azul-cobalto);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transicao-media);
}
.rodape__credito:hover { color: var(--cor-azul-cobalto); }
.rodape__credito:hover::after { transform: scaleX(1); transform-origin: left; }

/* ============ Formulário público ============ */
.formulario {
  position: relative;
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
}
.formulario__linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.campo { display: flex; flex-direction: column; gap: 0.4rem; }
.campo span,
.campo label {
  font-family: var(--fonte-mono);
  font-size: var(--texto-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--cor-azul-cobalto);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: var(--alvo-toque-min);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-padrao);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-display);
  font-size: var(--texto-corpo);
}
.campo textarea { min-height: 8rem; resize: vertical; }
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 2px solid var(--cor-azul-cobalto);
  outline-offset: 2px;
}
.campo input[type='file'] {
  padding: var(--espaco-controle-formulario);
  font-family: var(--fonte-display);
  font-size: var(--texto-apoio);
  cursor: pointer;
}
.campo input[type='file']::file-selector-button {
  min-height: var(--alvo-toque-min);
  margin-right: var(--espaco-controle-formulario);
  padding-inline: var(--espaco-controle-formulario);
  border: var(--borda-fina) solid var(--cor-azul-cobalto);
  border-radius: var(--raio-padrao);
  background: var(--cor-azul-cobalto);
  color: var(--cor-branco);
  font-family: var(--fonte-display);
  font-size: var(--texto-apoio);
  font-weight: 800;
  cursor: pointer;
  transition: background var(--transicao-rapida), color var(--transicao-rapida);
}
.campo input[type='file']::file-selector-button:hover {
  background: var(--cor-destaque);
  color: var(--cor-tinta-sobre-destaque);
}
.campo input[type='file']::-webkit-file-upload-button {
  min-height: var(--alvo-toque-min);
  margin-right: var(--espaco-controle-formulario);
  padding-inline: var(--espaco-controle-formulario);
  border: var(--borda-fina) solid var(--cor-azul-cobalto);
  border-radius: var(--raio-padrao);
  background: var(--cor-azul-cobalto);
  color: var(--cor-branco);
  font-family: var(--fonte-display);
  font-size: var(--texto-apoio);
  font-weight: 800;
  cursor: pointer;
}
.formulario .botao {
  width: 100%;
  font-family: var(--fonte-display);
}
.campo--erro input,
.campo--erro select,
.campo--erro textarea { border-color: var(--cor-alerta); }
.campo__erro { color: var(--cor-alerta); font-size: var(--texto-apoio); }
.campo-armadilha {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.aviso {
  max-width: 40rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--cor-azul-cobalto);
  background: var(--cor-fundo-suave);
}
.aviso--erro { border-left-color: var(--cor-alerta); }
.aviso p { margin: 0; max-width: none; }

.legal { padding-block: var(--espaco-secao); padding-top: clamp(8rem, 18vw, 12rem); }
.legal h1 {
  font-size: var(--texto-h2);
  color: var(--cor-texto-titulo);
  margin-bottom: 1.5rem;
}
.legal__corpo { max-width: 62ch; overflow-wrap: anywhere; }
.legal__corpo h2 { margin-top: 2.5rem; }
.legal__corpo p + p { margin-top: 1rem; }
.legal__corpo ul {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  color: var(--cor-texto-apoio);
}

.clientes-faixa {
  background: var(--cor-branco);
  color: var(--cor-texto);
  padding-block: var(--espaco-secao);
}
.clientes-faixa h2 { color: var(--cor-texto); overflow-wrap: anywhere; }
.clientes-faixa p { color: var(--cor-texto-apoio); margin: 1rem 0 2rem; overflow-wrap: anywhere; }
.clientes-faixa__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--espaco-grade-parceiros);
  align-items: center;
}
.clientes-faixa__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--altura-logo-parceiro);
}
.clientes-faixa__grade img {
  display: block;
  height: var(--altura-logo-parceiro);
  object-fit: contain;
  width: 100%;
  margin-inline: auto;
  filter: none;
}

/* ============ Catálogo Havaianas (Dist. Exclusiva) ============ */
.pagina-havaianas .hero--havaianas { background: var(--hv-vermelho); }
.pagina-havaianas .hero--havaianas .hero__veu {
  background: var(--hv-veu-hero);
}
.pagina-havaianas .hero--havaianas .hero__titulo {
  max-width: 16ch;
  text-transform: lowercase;
  font-size: var(--hv-display);
  color: var(--hv-branco);
}
.pagina-havaianas .hero--havaianas .hero__titulo em {
  color: var(--hv-branco);
  font-style: normal;
}
.pagina-havaianas .hero__lead { color: var(--hv-sobre-cor); }
.pagina-havaianas main .mono,
.pagina-havaianas main .mono--claro {
  color: var(--hv-sobre-cor);
  font-size: var(--texto-apoio);
  font-weight: 700;
}
.pagina-havaianas .chamada h2,
.pagina-havaianas .chamada p { color: var(--hv-sobre-cor); }
.pagina-havaianas .foto--catalogo .foto__img { filter: none; }
.pagina-havaianas .foto--catalogo .foto__tom,
.pagina-havaianas .foto--catalogo .foto__grao { display: none; }

.hv-marquee {
  overflow: hidden;
  background: var(--hv-vermelho);
  color: var(--hv-branco);
  padding-block: 0.85rem;
}
.hv-marquee__trilha {
  display: flex;
  width: max-content;
  gap: 0;
}
.hv-marquee__grupo { display: flex; }
.hv-marquee__item {
  flex: none;
  padding-inline: 1.75rem;
  font-family: var(--fonte-display);
  font-size: var(--texto-h3);
  font-weight: 800;
  letter-spacing: var(--tracking-h2);
  text-transform: lowercase;
  white-space: nowrap;
}

.hv-campo {
  position: relative;
  overflow: hidden;
  padding-block: var(--hv-espaco);
  color: var(--hv-sobre-cor);
}
.hv-campo--vermelho { background: var(--hv-vermelho); }
.hv-campo--laranja { background: var(--hv-laranja); }
.hv-campo--ciano { background: var(--hv-ciano); }
.hv-campo--navy { background: var(--hv-navy); }
.hv-campo--tinta { background: var(--hv-tinta); }
.hv-campo--modelos .hv-modelos,
.hv-campo--modelos .hv-campo__veu {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hv-campo--modelos .hv-campo__veu {
  background: var(--hv-veu-vitrine);
}
.hv-campo--modelos .hv-campo__grid {
  position: relative;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
.hv-modelos__slide {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  justify-items: end;
  margin: 0;
  padding: var(--hv-espaco) var(--espaco-container);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.hv-modelos__slide img {
  width: var(--hv-modelo-largura);
  height: var(--hv-modelo-altura);
  object-fit: contain;
  filter: drop-shadow(var(--hv-modelo-sombra));
}
.hv-modelos__slide figcaption {
  position: absolute;
  right: var(--espaco-container);
  bottom: var(--espaco-container);
  font-family: var(--fonte-mono);
  font-size: var(--texto-mono);
  font-weight: 700;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--hv-sobre-cor);
}
.hv-campo h2,
.hv-campo h3 { color: var(--hv-sobre-cor); text-transform: lowercase; }
.hv-campo p { color: var(--hv-sobre-cor); max-width: 46ch; }
.hv-campo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--espaco-bloco);
  align-items: center;
}
.hv-campo__grid--inverso { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.hv-campo__foto {
  position: relative;
  min-height: clamp(18rem, 40vw, 32rem);
}
.hv-campo__foto .foto__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}
.hv-blocos {
  display: grid;
  grid-template-columns: var(--hv-colunas-blocos);
}
.hv-bloco {
  min-height: 22rem;
  padding: var(--espaco-bloco) var(--espaco-container);
  color: var(--hv-sobre-cor);
}
.hv-bloco h3 {
  margin-top: 2.5rem;
  color: var(--hv-sobre-cor);
  text-transform: lowercase;
  font-size: var(--texto-h2);
}
.hv-bloco p { margin-top: 1rem; max-width: 36ch; }
.hv-bloco--vermelho {
  background: var(--hv-vermelho);
  grid-column: 1;
  grid-row: 1;
}
.hv-bloco--laranja {
  background: var(--hv-laranja);
  grid-column: 2;
  grid-row: 1;
}
.hv-bloco--ciano {
  background: var(--hv-ciano);
  grid-column: 2;
  grid-row: 2;
}
.hv-bloco--navy {
  background: var(--hv-navy);
  grid-column: 1;
  grid-row: 2;
}
.hv-pdv {
  display: grid;
  grid-template-columns: var(--hv-colunas-dupla);
  align-items: stretch;
  min-height: var(--hv-pdv-min);
  background: var(--hv-branco);
  color: var(--cor-texto-apoio);
}
.hv-pdv__cena {
  position: relative;
  overflow: hidden;
  min-height: var(--hv-pdv-min);
  background: var(--hv-tinta);
}
.hv-pdv__galeria {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.hv-pdv__galeria:focus-visible {
  outline: 2px solid var(--hv-vermelho);
  outline-offset: -2px;
}
.hv-pdv__galeria::-webkit-scrollbar { display: none; }
.hv-pdv__galeria.is-arrastando {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}
.hv-pdv__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.hv-pdv__slide img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}
.hv-pdv__slide figcaption {
  position: absolute;
  z-index: 1;
  font-family: var(--fonte-mono);
  font-size: var(--texto-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  top: var(--espaco-container);
  left: var(--espaco-container);
  padding: var(--espaco-controle-formulario);
  background: var(--hv-vermelho);
  color: var(--hv-branco);
}
.hv-pdv__painel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--espaco-bloco) var(--espaco-container);
  background: var(--hv-branco);
}
.hv-pdv h2 {
  color: var(--hv-vermelho);
  text-transform: lowercase;
}
.hv-pdv p {
  color: var(--cor-texto-apoio);
  max-width: var(--hv-pdv-leitura);
}

.hv-tese {
  position: relative;
  overflow: hidden;
  padding-block: var(--hv-espaco);
  background: var(--hv-vermelho);
  color: var(--hv-sobre-cor);
}
.hv-tese__palco,
.hv-tese__veu {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hv-tese__palco .foto__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hv-chamada-foco);
  filter: var(--hv-chamada-foto);
}
.hv-tese__veu { background: var(--hv-veu-chamada); }
.hv-tese h2 { color: var(--hv-sobre-cor); }
.hv-tese .secao__texto { color: var(--hv-sobre-cor); }
.hv-tese__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--espaco-bloco);
  align-items: end;
}
.pagina-havaianas .botao--sobre-cor {
  background: var(--hv-branco);
  color: var(--hv-tinta);
}
.pagina-havaianas .botao--sobre-cor::before {
  background: var(--hv-botao-hover);
}
.pagina-havaianas .botao--sobre-cor:hover {
  color: var(--hv-botao-hover-texto);
}
.pagina-havaianas .botao--sobre-cor-linha {
  background: transparent;
  color: var(--hv-branco);
  border-color: var(--hv-branco);
}