/* ===== comum/css/fontes.css (inline) ===== */
/* Fontes self-hosted — subsets latin e latin-ext apenas. Sem CDN externo. */
/* Archivo · latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/Archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo · latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/Archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* BodoniModa · latin-ext */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/BodoniModa-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* BodoniModa · latin */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/BodoniModa-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* PlexMono · latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/PlexMono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* PlexMono · latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/PlexMono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== comum/css/base.css ===== */
/* ==========================================================================
   TBULL — Pasta do Representante
   Fundação: reset, tokens, tipografia, utilitários estruturais.
   Cada seção tem seu próprio arquivo em assets/css/secoes/ e só consome
   os tokens e utilitários daqui. Nada de cor ou tamanho solto nas seções.
   ========================================================================== */
/* --------------------------------------------------------------- reset -- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }

ul, ol { list-style: none; }

img, picture, svg, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; width: 100%; }

/* ------------------------------------------------------------- tokens -- */
:root {
  /* ---- Cor ----------------------------------------------------------
     REGRA DE ACESSIBILIDADE — LER ANTES DE USAR VERMELHO:
     --vermelho (#B00000) sobre --preto (#0D100F) dá 1,55:1. Sobre fundo
     ESCURO o vermelho de marca só pode ser PREENCHIMENTO, FILETE ou GLIFO.
     Como TEXTO ou ÍCONE sobre escuro, usar sempre --brasa (#E84A45 = 5,0:1).
     E --brasa é PROIBIDO sobre --osso (cai para 3,0:1).
     ------------------------------------------------------------------- */
  --osso:          #E6E4E1;  /* fundo claro + texto sobre escuro — 15,1:1 sobre --preto */
  --osso-sombra:   #D0CABF;  /* placa das molduras, fundo da tabela de sortimento */
  --osso-claro:    #F2F2F2;  /* superfície elevada sobre --osso */
  --preto:         #0D100F;  /* fundo escuro base (preto levemente esverdeado) */
  --grafite:       #1A1A1A;  /* superfície elevada sobre --preto */
  --linha-escura:  #222123;  /* filetes sobre fundo escuro */
  --chumbo:        #4D4E53;  /* texto secundário sobre osso — 6,54:1 */
  --taupe:         #AFA893;  /* texto secundário sobre escuro — 8,06:1 */
  --vermelho:      #B00000;  /* acento sobre claro — 5,86:1 sobre --osso */
  --vermelho-alt:  #BB0018;  /* hover/active dos elementos vermelhos */
  --brasa:         #E84A45;  /* texto/ícone vermelho SOBRE ESCURO — 5,0:1 */
  --vinho:         #6E2328;  /* aparição única: seção "Como você vira ponto TBull" */

  /* ---- Tipografia --------------------------------------------------- */
  --fonte-display: 'Archivo', 'Arial Narrow', Helvetica, sans-serif;
  --fonte-texto:   'Archivo', 'Arial Narrow', Helvetica, sans-serif;
  --fonte-didone:  'Bodoni Moda', Didot, 'Bodoni MT', Georgia, serif;
  --fonte-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-hero:    clamp(2.6rem, 5.2vw, 4.6rem);
  --t-secao:   clamp(1.9rem, 3.4vw, 3rem);
  --t-citacao: clamp(2rem, 3vw, 2.5rem);   /* 32–40px, ver .citacao */
  --t-folio:   clamp(140px, 18vw, 260px);
  --t-corpo:   1.125rem;                    /* 18px / 1.6 */
  --t-legenda: 0.9375rem;                   /* 15px / 1.5 */
  --t-rotulo:  0.8125rem;                   /* 13px, tracking 0.10em */
  --t-mono:    0.75rem;                     /* 12px, tracking 0.12em */

  /* ---- Layout ------------------------------------------------------- */
  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --altura-header: 72px;
  --altura-header-compacto: 56px;
  --altura-marquee: 34px;
  --altura-barra: 65px;   /* barra-rep: 64px de interno + 1px de filete */
  --respiro: clamp(5rem, 9vw, 7.5rem);        /* padding vertical padrão */
  --respiro-duplo: clamp(7rem, 13vw, 10rem);  /* manifesto e representante */

  /* ---- Motion ------------------------------------------------------- */
  --curva: cubic-bezier(.2, .6, .2, 1);
  --curva-swap: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------- base -- */
body {
  background: var(--preto);
  color: var(--osso);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* marquee + header são fixos no topo */
  padding-top: calc(var(--altura-marquee) + var(--altura-header));
}

/* Âncora não pode parar embaixo do header fixo. */
[id] { scroll-margin-top: calc(var(--altura-marquee) + var(--altura-header-compacto) + 8px); }

::selection { background: var(--vermelho); color: var(--osso); }

:focus-visible {
  outline: 2px solid var(--brasa);
  outline-offset: 3px;
}

.claro :focus-visible { outline-color: var(--vermelho); }

/* Pula para o conteúdo — visível só no teclado */
.pular-para {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--vermelho);
  color: var(--osso);
  font: 600 var(--t-rotulo) / 1 var(--fonte-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: top 180ms var(--curva);
}
.pular-para:focus { top: calc(var(--altura-marquee) + 12px); }

/* ----------------------------------------------------------- container -- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao {
  position: relative;
  padding-block: var(--respiro);
  overflow: clip;
}

/* Fundos das seções. .claro marca o contexto para foco e vermelho. */
.fundo-preto   { background: var(--preto);       color: var(--osso); }
.fundo-grafite { background: var(--grafite);     color: var(--osso); }
.fundo-osso    { background: var(--osso);        color: var(--preto); }
.fundo-sombra  { background: var(--osso-sombra); color: var(--preto); }
.fundo-vinho   { background: var(--vinho);       color: var(--osso); }

/* --------------------------------------------------------- tipografia -- */
.sobrelinha {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--taupe);
}
.claro .sobrelinha { color: var(--chumbo); }

.titulo-hero {
  font-family: var(--fonte-display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: var(--t-hero);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.titulo-secao {
  font-family: var(--fonte-display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: var(--t-secao);
  line-height: 1.06;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.rotulo {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-stretch: 118%;
  font-size: var(--t-rotulo);
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Mono tem teto: código de peça, rótulo de campo, coluna de referência e
   microtexto legal. Nunca em parágrafo, nunca acima de 14px. */
.codigo {
  font-family: var(--fonte-mono);
  font-weight: 500;
  font-size: var(--t-mono);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.legenda {
  font-size: var(--t-legenda);
  line-height: 1.5;
  color: var(--taupe);
}
.claro .legenda { color: var(--chumbo); }

.medida { max-width: 68ch; }
.medida-estreita { max-width: 52ch; }

/* Frase de marca. Era Bodoni Moda até 2026-08-11, e a troca foi pedida pelo
   Thiago olhando a home no ar: "achei a tipografia errada, o N está bem zoado".
   Ele tinha razão, e por dois motivos que se somam:

   1. LEGIBILIDADE. Didone tem haste grossa e filete finíssimo. Sobre fundo
      escuro o texto claro espalha e o filete desaparece — e o `opsz` da Bodoni
      Moda (eixo 6–96) com `font-optical-sizing: auto` em 40px aplicava o corte
      de DISPLAY, que afina os filetes ainda mais. A regra pedia à fonte para
      ficar mais delicada exatamente onde precisava ficar robusta.
   2. MARCA. Bodoni é letra de revista de moda. A escolha original não veio de
      material nenhum da TBull — não está justificada em nenhum doc, plano ou
      comentário, e a tipografia da marca nunca foi apurada nos catálogos. Pior:
      o próprio site promete peças "para uso diário, não para fantasia", e o
      curral escreve "Não é fantasia. É estilo de vida." Um didone parisiense
      contradiz as duas frases.

   Archivo 700: é a fonte que o site JÁ carrega — a mesma do wordmark TBULL e do
   corpo do texto — então a frase passa a soar como a marca falando, e não custa
   um byte a mais. Largura em 100% de propósito: os títulos usam font-stretch
   112–118% em caixa alta, e manter a citação em largura normal faz o contraste
   com eles ser deliberado em vez de acidental.

   O Bodoni CONTINUA carregado e em uso: `.folio` (o número gigante de marca
   d'água) e a seção da marca do curral. Não remover os arquivos. */
.citacao {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: var(--t-citacao);
  line-height: 1.2;
  letter-spacing: -.015em;
}

/* Fólio numerado — cara de publicação, custo de uma regra. */
.folio {
  position: absolute;
  right: var(--gutter);
  top: calc(var(--respiro) * .18);
  z-index: 0;
  font-family: var(--fonte-didone);
  font-weight: 500;
  font-size: var(--t-folio);
  line-height: .78;
  letter-spacing: -.04em;
  opacity: .06;
  pointer-events: none;
  user-select: none;
}

.secao > .container { position: relative; z-index: 1; }

/* ---------------------------------------------------------- estrutura -- */
/* Pesponto: nenhum border-top de 1px na página. Costura vista de perto. */
.pesponto {
  position: relative;
  height: 3px;
  border: 0;
  background-image: repeating-linear-gradient(
    to right, currentColor 0 6px, transparent 6px 12px);
  color: var(--chumbo);
  opacity: .55;
}
.pesponto::after {
  content: '';
  position: absolute;
  inset: 2px 0 auto 3px;
  height: 1px;
  background-image: inherit;
  opacity: .6;
}

/* Moldura de catálogo — o elemento estrutural da direção.
   A placa osso absorve o fundo bege dos stills de estúdio. */
.placa {
  position: relative;
  background: var(--osso-sombra);
  padding: 14px;
}
.placa--fina { padding: 10px; }
.placa--filete {
  background: none;
  padding: 10px;
  box-shadow: inset 0 0 0 1px var(--chumbo);
}
.placa img { width: 100%; height: 100%; object-fit: cover; }

.retrato { aspect-ratio: 3 / 4; }
.retrato-alto { aspect-ratio: 4 / 5; }

/* Grão de papelão — faz o #0D100F ler como a caixa WILD and ROWDY.
   pointer-events: none é obrigatório: overlay fixo que rouba hover é bug. */
.grao {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- botões -- */
/* border-radius 0 em tudo. Raio de 8px é linguagem de checkout. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: 14px 22px;
  border-radius: 0;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: var(--t-rotulo);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background-color 180ms linear, color 180ms linear,
              box-shadow 180ms linear;
}

.btn-primario {
  background: var(--vermelho);
  color: var(--osso);
}
.btn-primario:hover { background: var(--vermelho-alt); }

.btn-fantasma {
  color: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
}
.btn-fantasma:hover { background: rgba(230, 228, 225, .1); }
.claro .btn-fantasma:hover { background: rgba(13, 16, 15, .07); }

/* Link com filete que cresce da esquerda */
.link-filete {
  position: relative;
  padding-bottom: 3px;
}
.link-filete::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--brasa);
  transition: width 180ms var(--curva);
}
.claro .link-filete::after { background: var(--vermelho); }
.link-filete:hover::after,
.link-filete[aria-current='true']::after { width: 100%; }

/* ------------------------------------------------------------- motion -- */
.revela {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms var(--curva), transform 560ms var(--curva);
  transition-delay: var(--atraso, 0ms);
}
.revela.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .revela { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- utilitários -- */
.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.monograma { display: block; width: auto; color: currentColor; }

/* ===== raiz/assets/css/chrome.css ===== */
/* ==========================================================================
   TBULL — tbull.com.br — moldura: header, menu mobile e rodapé.
   Só consome tokens de ../../comum/css/base.css. Nada de cor solta aqui.
   ========================================================================== */

/* O base.css é compartilhado com o site da coleção, e lá existe um marquee
   fixo acima do header. Aqui não existe. Em vez de duplicar as fórmulas de
   `padding-top` do body, do `scroll-margin-top` das âncoras e do `inset` do
   menu mobile, zeramos a altura do marquee e deixamos os calc() do base.css
   se resolverem sozinhos. Uma linha no lugar de três overrides. */
:root { --altura-marquee: 0px; }

/* REDE DE SEGURANÇA — não remover sem ler.
   O `.revela` do base.css nasce com `opacity: 0` e só ganha `.visivel` pelo
   IntersectionObserver. Isso significa que QUALQUER falha do JS deixa a página
   inteira invisível: script bloqueado, erro de rede no app.js, aba em segundo
   plano que o navegador congela, print para PDF, leitor de conteúdo.
   Aqui o padrão é invertido — o conteúdo só se esconde depois que o JS assumiu
   o controle e marcou <html class="js">. Sem JS, tudo aparece.
   O `.js` é adicionado por um script inline no <head>, antes da primeira
   pintura, para não haver flash de conteúdo. */
html:not(.js) .revela { opacity: 1; transform: none; }

/* --------------------------------------------------------- logotipo --- */
.marca-logo {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  color: var(--osso);
}

.marca-logo__mono {
  width: auto;
  height: 26px;
  fill: currentColor;
  transition: height 240ms var(--curva);
}

.marca-logo__texto {
  font-family: var(--fonte-display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------- header --- */
.cabecalho {
  position: fixed;
  inset: 0 0 auto;
  z-index: 99;
  background: var(--preto);
  transition: box-shadow 240ms var(--curva);
}

.cabecalho.compacto { box-shadow: inset 0 -1px 0 var(--linha-escura); }

.cabecalho__interno {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  height: var(--altura-header);
  transition: height 240ms var(--curva);
}

.cabecalho.compacto .cabecalho__interno { height: var(--altura-header-compacto); }
.cabecalho.compacto .marca-logo__mono { height: 20px; }

.cabecalho__nav { margin-inline: auto; }

.cabecalho__nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
}

/* Item de menu não quebra linha: "Para lojistas" e "Onde comprar" viravam
   duas linhas e desalinhavam a altura do header inteiro. */
.cabecalho__nav li { flex: none; }

.cabecalho__nav a {
  display: block;
  white-space: nowrap;
  padding-block: 4px;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-stretch: 118%;
  font-size: var(--t-rotulo);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--taupe);
  transition: color 180ms linear;
}

.cabecalho__nav a:hover,
.cabecalho__nav a[aria-current='true'] { color: var(--osso); }

.cabecalho__cta { flex: none; }

/* ------------------------------------------------------ menu mobile --- */
.cabecalho__hamburguer {
  display: none;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: calc(var(--gutter) * -.4);
  color: var(--osso);
}

.cabecalho__tracos,
.cabecalho__tracos::before,
.cabecalho__tracos::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 240ms var(--curva), opacity 120ms linear;
}

.cabecalho__tracos::before,
.cabecalho__tracos::after {
  content: '';
  position: absolute;
}
.cabecalho__tracos::before { transform: translateY(-7px); }
.cabecalho__tracos::after  { transform: translateY(7px); }

[aria-expanded='true'] .cabecalho__tracos { background: transparent; }
[aria-expanded='true'] .cabecalho__tracos::before { transform: rotate(45deg); }
[aria-expanded='true'] .cabecalho__tracos::after  { transform: rotate(-45deg); }

.menu-mobile {
  position: fixed;
  inset: var(--altura-header) 0 0;
  z-index: 98;
  padding: clamp(2rem, 8vw, 3.5rem) var(--gutter) calc(var(--gutter) + 2rem);
  background: var(--preto);
  overflow-y: auto;
}

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

.menu-mobile__nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  height: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.menu-mobile ul {
  display: flex;
  flex-direction: column;
  gap: clamp(.5rem, 2vw, 1rem);
}

/* Só os itens da lista: o CTA é um .btn e herdaria o corpo gigante abaixo,
   estourando a largura da tela com "QUERO VENDER TBULL". */
.menu-mobile ul a {
  display: block;
  padding-block: 6px;
  font-family: var(--fonte-display);
  font-weight: 900;
  font-stretch: 112%;
  /* 8,3vw é o teto ditado por "PARA LOJISTAS", o item mais longo do menu:
     acima disso ele é cortado na direita nos 390px do iPhone. */
  font-size: clamp(1.75rem, 8.3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.menu-mobile__cta { width: 100%; text-align: center; }

@media (max-width: 60rem) {
  .cabecalho__nav,
  .cabecalho__cta { display: none; }
  .cabecalho__hamburguer { display: grid; }
}

@media (min-width: 60.0625rem) {
  .menu-mobile { display: none; }
}

/* ----------------------------------------------------------- rodapé --- */
.rodape {
  position: relative;
  padding-block: var(--respiro) calc(var(--gutter) * 1.5);
  overflow: clip;
}

/* Marca d'água de contracapa: o monograma aparece uma última vez, em outline,
   sangrando pela borda esquerda e cortado pela base. */
.rodape__marca-dagua {
  position: absolute;
  left: -4%;
  bottom: -18%;
  z-index: 0;
  width: clamp(220px, 34vw, 460px);
  height: auto;
  fill: none;
  stroke: var(--osso);
  stroke-width: 1.2;
  opacity: .05;
  pointer-events: none;
}

.rodape__interno {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: var(--respiro);
}

.rodape__logo {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: 1rem;
  color: var(--osso);
}

.rodape__mono { width: auto; height: 32px; fill: currentColor; }

.rodape__titulo { color: var(--osso); margin-bottom: 1rem; }

.rodape__links {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  font-size: var(--t-legenda);
  color: var(--taupe);
}

.rodape__links a:hover { color: var(--osso); }

.rodape__social {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem 1.5rem;
  margin-top: 1.25rem;
}

/* Alvo de toque de 44px de altura mínima: no rodapé, dedo grande em link
   pequeno é o erro clássico de mobile. O padding vertical faz a conta sem
   afastar visualmente os dois links. */
.rodape__rede {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-stretch: 118%;
  font-size: var(--t-rotulo);
  letter-spacing: .06em;
  color: var(--taupe);
  transition: color 180ms linear;
}

.rodape__rede:hover { color: var(--osso); }

.rodape__rede-icone {
  flex: none;
  width: 20px;
  height: 20px;
  color: currentColor;
}

/* --taupe, não --chumbo. O base.css é explícito: --chumbo é "texto secundário
   sobre osso" (6,54:1 ali) e sobre fundo escuro cai para 2,30:1, reprovado em
   AA. Para deixar a linha discreta sem apagá-la, o peso vem do tamanho e do
   tracking — não da falta de contraste.
   (O site da coleção tem esta mesma linha em --chumbo sobre escuro e está no
   ar assim. É defeito pré-existente lá, reportado ao Thiago; não foi alterado
   aqui porque aquele site foi portado sem mudanças de propósito.) */
.rodape__legal {
  margin-top: 1.5rem;
  color: var(--taupe);
  line-height: 1.6;
}

@media (max-width: 60rem) {
  .rodape__interno { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 34rem) {
  .rodape__interno { grid-template-columns: 1fr; }
}

/* ===== raiz/assets/css/secoes/capa.css ===== */
/* ---------------------------------------------------------------- capa -- */
.capa { padding-block: clamp(3rem, 7vw, 5.5rem) var(--respiro); }

.capa__grade {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 4.5rem);
}

.capa__titulo {
  margin-block: .75rem 1.25rem;
  font-family: var(--fonte-display);
  font-weight: 900;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* O <h1> carrega duas informações com pesos visuais diferentes: o nome da
   marca domina, o descritor de categoria fica de apoio. Um <h1> só, porque a
   busca precisa das duas coisas na mesma tag. */
.capa__titulo-marca {
  display: block;
  font-size: var(--t-hero);
}

.capa__titulo-desc {
  display: block;
  margin-top: .35rem;
  font-weight: 600;
  font-stretch: 118%;
  font-size: clamp(1rem, 1.9vw, 1.375rem);
  letter-spacing: .1em;
  color: var(--taupe);
}

.capa__lema {
  margin-bottom: 1.5rem;
  color: var(--osso);
}

.capa__apoio { margin-bottom: 2rem; color: var(--taupe); }
.capa__apoio strong { color: var(--osso); font-weight: 600; }

.capa__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
}

.capa__figura { margin: 0; }
.capa__img { width: 100%; height: auto; }

/* ------------------------------------------------------------- régua -- */
.capa__regua {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 0;
}

.capa__dado {
  flex: 1 1 14rem;
  padding: 1.125rem 1.25rem;
  color: var(--taupe);
  box-shadow: inset 0 1px 0 var(--linha-escura);
}

/* O último dado é o argumento mais forte para o lojista — a régua é o lugar
   mais caro da dobra e "sem pedido mínimo" é o que trava a decisão dele. */
.capa__dado:last-child { color: var(--brasa); }

@media (max-width: 60rem) {
  .capa__grade { grid-template-columns: 1fr; }
  .capa__figura { order: -1; max-width: 26rem; }
}

/* ===== raiz/assets/css/secoes/linhas.css ===== */
/* -------------------------------------------------------------- linhas -- */
.linhas__lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}

.linha__corpo { height: 100%; }

.linha__quadro {
  position: relative;
  margin-bottom: 1.125rem;
}

.linha__quadro img { width: 100%; height: 100%; object-fit: cover; }

/* Carimbo do monograma no canto da moldura — mesmo recurso do site da
   coleção, para as duas peças lerem como a mesma casa. */
.linha__carimbo {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 34px;
  height: auto;
  fill: var(--osso);
  opacity: .82;
  filter: drop-shadow(0 1px 2px rgba(13, 16, 15, .45));
  pointer-events: none;
}

.linha__nome {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  margin-bottom: .625rem;
}

.linha__desc { color: var(--taupe); }

.linhas__acoes { margin-top: clamp(2rem, 4vw, 2.75rem); }

@media (max-width: 68rem) {
  .linhas__lista { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 34rem) {
  .linhas__lista { grid-template-columns: 1fr; }
  .linha__quadro { max-width: 20rem; }
}

/* ===== raiz/assets/css/secoes/lojistas.css ===== */
/* ------------------------------------------------------------ lojistas -- */
/* Fundo vinho: aparição única na página. É a seção comercial, e ela precisa
   se separar visualmente tanto do preto (marca) quanto do osso (institucional)
   sem introduzir uma cor nova no sistema. */
.lojistas { padding-block: var(--respiro-duplo); }

.lojistas .titulo-secao { margin-block: .5rem 1.25rem; }

.lojistas__condicoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}

.condicao {
  position: relative;
  padding: 1.75rem 1.5rem;
  background: rgba(13, 16, 15, .22);
}

.condicao__marca {
  display: block;
  margin-bottom: 1rem;
  color: var(--osso);
  opacity: .45;
}

.condicao__titulo { margin-bottom: .625rem; }

.condicao__texto { color: var(--osso); opacity: .82; }

.lojistas__ressalva {
  max-width: 52ch;
  margin-top: 2rem;
  color: var(--osso);
  opacity: .72;
}

.lojistas__acoes { margin-top: 2rem; }

/* Sobre vinho, o vermelho de marca não separa o suficiente do fundo. O botão
   primário aqui inverte: osso sólido com texto vinho. Contraste 9,4:1. */
.lojistas__acoes .btn-primario {
  background: var(--osso);
  color: var(--vinho);
}
.lojistas__acoes .btn-primario:hover { background: var(--osso-claro); }

@media (max-width: 60rem) {
  .lojistas__condicoes { grid-template-columns: 1fr; }
}

/* ===== raiz/assets/css/secoes/marca.css ===== */
/* --------------------------------------------------------------- marca -- */
.marca__titulo { margin-block: .5rem 2.5rem; }

.marca__grade {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(2rem, 6vw, 4rem);
  align-items: start;
}

.marca__coluna > * + * { margin-top: 1.25rem; }

.marca__figura { margin: 0; max-width: 28rem; }

/* Assinaturas de etiqueta. São as marcações que a marca realmente imprime —
   por isso ficam em mono, com cara de carimbo, e não em corpo de texto. */
.marca__assinaturas {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.marca__assinaturas li {
  padding: .5rem .75rem;
  color: var(--chumbo);
  box-shadow: inset 0 0 0 1px var(--osso-sombra);
  background: var(--osso-claro);
}

/* --------------------------------------------------------------- prova -- */
.marca__prova { margin-top: clamp(2.5rem, 6vw, 3.5rem); }

.marca__prova-itens {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 1.75rem;
}

.marca__prova-item {
  font-size: var(--t-legenda);
  line-height: 1.55;
  color: var(--chumbo);
}

.marca__prova-item strong { color: var(--preto); font-weight: 600; }

.marca__prova-rotulo {
  display: block;
  margin-bottom: .5rem;
  color: var(--vermelho);
}

@media (max-width: 60rem) {
  .marca__grade { grid-template-columns: 1fr; }
  .marca__figura { max-width: 22rem; }
  .marca__prova-itens { grid-template-columns: 1fr; }
}

/* ===== raiz/assets/css/secoes/revendedores.css ===== */
/* -------------------------------------------------------- revendedores -- */
.revendedores .titulo-secao { margin-block: .5rem 1.25rem; }

/* auto-fit + minmax: a grade se ajusta sozinha conforme entram representantes
   novos, sem tocar no layout.
   O teto de 26rem na faixa é o que faz UM cartão sozinho — a situação de hoje,
   com só Goiás — parar num bloco de largura de leitura em vez de esticar pelos
   1280px do container, o que deixaria um telefone perdido numa faixa vazia.
   O justify-content encosta o conjunto à esquerda quando sobra espaço. */
.revendedores__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 26rem));
  justify-content: start;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}

.rep__corpo {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--preto);
  box-shadow: inset 0 0 0 1px var(--linha-escura);
}

.rep__uf { color: var(--brasa); margin-bottom: .875rem; }

.rep__nome {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  margin-bottom: .75rem;
}

.rep__cobertura { color: var(--taupe); }

.rep__dados {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: .625rem 1.25rem;
  margin-block: 1.75rem;
  font-size: var(--t-legenda);
}

/* --taupe e não --chumbo: o cartão tem fundo --preto, e --chumbo sobre escuro
   dá 2,30:1. Ver a nota em chrome.css sobre .rodape__legal. */
.rep__dados dt { color: var(--taupe); }
.rep__dados dd { color: var(--osso); }

/* margin-top auto encosta o CTA no rodapé do cartão: com representantes de
   textos de tamanhos diferentes, os botões continuam alinhados entre si. */
.rep__cta { margin-top: auto; align-self: flex-start; }

.rep--vago .rep__corpo {
  background: none;
  box-shadow: inset 0 0 0 1px var(--chumbo);
}

.rep--vago .rep__uf { color: var(--taupe); }
.rep--vago .rep__cta { margin-top: 1.75rem; }