/* ===== 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);   /* Bodoni nunca abaixo de 28px */
  --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; }

.citacao {
  font-family: var(--fonte-didone);
  font-optical-sizing: auto;
  font-weight: 500;             /* Bodoni entre 28 e 48px sobe para 500 */
  font-size: var(--t-citacao);
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* 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; }

/* ===== curral/assets/css/chrome.css ===== */
/* ==========================================================================
   TBULL — moldura da página: marquee, header, rodapé e barra do representante.
   São as duas abas da pasta (marquee no topo e no rodapé, em direções opostas)
   mais a navegação. Só consome tokens de base.css.
   ========================================================================== */

/* ------------------------------------------------------------ marquee -- */
.marquee {
  position: relative;
  height: var(--altura-marquee);
  overflow: hidden;
  background: var(--grafite);
  box-shadow: inset 0 -1px 0 var(--chumbo);
}

.marquee__pista {
  display: flex;
  width: max-content;
  height: 100%;
  animation: marquee-corre 90s linear infinite;
}

.marquee--invertido .marquee__pista { animation-direction: reverse; }

.marquee:hover .marquee__pista { animation-play-state: paused; }

.marquee__conteudo {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  white-space: nowrap;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-stretch: 118%;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--taupe);
}

.marquee__glifo {
  flex: none;
  width: auto;
  height: 10px;
  color: var(--brasa);
  fill: currentColor;
}

@keyframes marquee-corre {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__pista { animation: 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;
}

.marca-logo__texto sup {
  font-size: .4em;
  font-weight: 600;
  vertical-align: super;
  letter-spacing: 0;
}

/* ----------------------------------------------------------- header --- */
.marquee#marquee-topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
}

.cabecalho {
  position: fixed;
  inset: var(--altura-marquee) 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);
  width: 100%;
  max-width: var(--container);
  height: var(--altura-header);
  margin-inline: auto;
  padding-inline: var(--gutter);
  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: "A marca" e "Como funciona" 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: calc(var(--altura-marquee) + var(--altura-header)) 0 0;
  z-index: 98;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  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 ul {
  display: flex;
  flex-direction: column;
  gap: clamp(.5rem, 2vw, 1rem);
}

/* Só os itens da lista: o CTA é um .btn e herdava 35px de display, estourando
   a largura da tela com "FALAR COM O REPRESENTANTE". */
.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 REPRESENTANTE, o item mais longo do menu:
     acima disso ele era 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; }
  .cabecalho__interno { justify-content: space-between; }
}

/* ------------------------------------------------------------ rodapé -- */
.rodape {
  position: relative;
  background: var(--preto);
  overflow: clip;
}

/* Monograma em outline sangrando pela esquerda. Ancorado no TOPO do rodapé,
   não na base: com `bottom: -80px` ele saía 80px por baixo do rodapé e ainda
   passava atrás do marquee invertido e da linha legal — sobrava um pedaço de
   traço solto que lia como falha de render, não como marca d'água. Ancorado
   no topo, a silhueta inteira cai dentro da faixa limpa das colunas, em
   qualquer altura de rodapé (que cresce quando as colunas empilham). */
.rodape__marca-dagua {
  position: absolute;
  left: -1vw;
  top: 18px;
  width: auto;
  height: clamp(190px, 24vw, 320px);
  fill: none;
  stroke: var(--chumbo);
  stroke-width: .5;
  opacity: .42;
  pointer-events: none;
}

.rodape__andar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: 72px;
}

.rodape__coluna + .rodape__coluna {
  padding-left: clamp(1rem, 3vw, 2.5rem);
  border-left: 1px solid var(--linha-escura);
}

.rodape__titulo {
  margin-bottom: 1.125rem;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--brasa);
}

.rodape__assinatura {
  margin: 1.25rem 0;
  font-size: var(--t-legenda);
  line-height: 1.6;
  color: var(--taupe);
}

.rodape__social { font-size: var(--t-legenda); }

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

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

.rodape__lista--contato li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  justify-content: space-between;
  padding-bottom: .5rem;
  border-bottom: 1px dotted var(--chumbo);
}

.rodape__campo {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--taupe);
}

.rodape__nome {
  margin-bottom: 1rem;
  font-family: var(--fonte-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.rodape__andar-2 { border-top: 1px solid var(--linha-escura); }

.rodape__legal {
  /* A barra flutuante mora no rodapé da viewport: o fim do documento reserva
     a altura dela, senão o marquee invertido e esta linha ficam por baixo. */
  padding-block: 1rem calc(1rem + var(--altura-barra));
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--chumbo);
  text-transform: none;
}

@media (max-width: 56rem) {
  .rodape__andar { grid-template-columns: 1fr; padding-block: 48px; }
  .rodape__coluna + .rodape__coluna {
    padding-left: 0;
    padding-top: 2rem;
    border-left: 0;
    border-top: 1px solid var(--linha-escura);
  }
  .rodape__marca-dagua { height: 260px; opacity: .35; }
}

/* --------------------------------------- barra do representante ------- */
.barra-rep {
  position: fixed;
  inset: auto 0 0;
  z-index: 95;
  display: flex;
  align-items: stretch;
  background: var(--preto);
  border-top: 1px solid var(--brasa);
  transform: translateY(100%);
  transition: transform 320ms var(--curva);
}

.barra-rep.visivel { transform: none; }

.barra-rep__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex: 1;
  width: 100%;
  max-width: var(--container);
  height: 64px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  overflow: hidden;
  transition: height 240ms var(--curva);
}

.barra-rep__identidade {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

/* O nome do representante nunca quebra: no celular ele virava três linhas
   dentro de uma barra de 56px de altura. */
.barra-rep__identidade .rotulo { white-space: nowrap; }

.barra-rep__mono {
  flex: none;
  width: auto;
  height: 18px;
  fill: currentColor;
  color: var(--brasa);
}

.barra-rep__papel {
  color: var(--taupe);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barra-rep__cta { flex: none; padding-block: 11px; }

.barra-rep__aba {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  border-left: 1px solid var(--linha-escura);
  color: var(--taupe);
  transition: color 180ms linear;
}
.barra-rep__aba:hover { color: var(--osso); }

.barra-rep.colapsada .barra-rep__interno { height: 40px; }
.barra-rep.colapsada .barra-rep__cta,
.barra-rep.colapsada .barra-rep__papel { display: none; }

@media (max-width: 40rem) {
  /* Numa barra de 390px sobram ~330px úteis: monograma + CTA + aba já ocupam
     306. O nome do representante (170px) só cabia por cima do botão — a
     identidade some e fica o monograma, que é o que a barra precisa dizer.
     "Curral de Dados" continua escrito na seção 08 e no rodapé. */
  .barra-rep__papel,
  .barra-rep__identidade .rotulo { display: none; }
  .barra-rep__interno { height: 56px; gap: .75rem; }
  .barra-rep__cta { padding-inline: 1rem; }
  :root { --altura-barra: 57px; }
}

/* ===== curral/assets/css/secoes/capa.css ===== */
/* ==========================================================================
   #capa — Capa da "Pasta do Representante"
   Duas páginas da pasta (texto 46% / foto 54%) coladas por uma lombada
   vermelha de 3px, e uma régua de dados de 56px fechando a dobra.
   Só consome tokens de base.css. Todo seletor prefixado por #capa.
   ========================================================================== */

#capa {
  position: relative;
  display: flex;
  flex-direction: column;
  /* O espaço da faixa + header fixos já vem do padding-top do <body>. */
  min-height: 86vh;
  overflow: clip;
}

/* ------------------------------------------------------------- páginas -- */
/* Mobile-first: as duas páginas empilham, foto no topo (order: -1). */
#capa .capa__pasta {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
}

#capa .capa__pagina--texto {
  display: flex;
  align-items: center;
  padding-block: clamp(2rem, 6vw, 4rem);
  padding-inline: clamp(1.25rem, 4vw, 4.5rem);
  background: var(--preto);
}

#capa .capa__bloco { width: 100%; }

#capa .capa__pagina--foto {
  position: relative;
  order: -1;
  background: var(--grafite);   /* placeholder enquanto a foto carrega */
  overflow: hidden;
}

/* Lombada da pasta. Preenchimento vermelho sobre escuro — nunca texto. */
#capa .capa__pagina--foto::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--vermelho);
  z-index: 2;
}

/* --------------------------------------------------------------- foto -- */
#capa .capa__foto {
  position: relative;
  height: 56vh;
  overflow: hidden;   /* segura o Ken Burns */
}

#capa .capa__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 34% da altura mantém chapéu, rosto e cabeça do cavalo no enquadramento. */
  object-position: 50% 34%;
  animation: capa-ken-burns 18s linear infinite alternate;
  will-change: transform;
}

@keyframes capa-ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

/* Empilhado, a foto desce para o preto sólido do texto.
   70% de --preto (não 100%) é a "base" pedida na direção — derivado do token,
   não uma cor nova. */
#capa .capa__foto::after {
  content: '';
  position: absolute;
  inset: 45% 0 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--preto) 70%, transparent) 100%
  );
}

/* ---------------------------------------------------------- tipografia -- */
#capa .capa__sobrelinha {
  margin-bottom: clamp(1rem, 2.4vw, 1.75rem);
  line-height: 1.7;
}

/* .titulo-hero já entrega Archivo 900, caixa alta, tracking -0.02em e
   var(--t-hero); a quebra em quatro linhas é manual, no HTML.
   A maior linha ("REPRESENTANTE.") mede 8,92em — medido, não estimado. O
   min() abaixo é só um teto de segurança contra estouro de coluna: nunca
   passa de var(--t-hero), só encolhe quando a coluna não cabe. */
#capa .capa__titulo {
  /* 7,6vw é o teto ditado por REPRESENTANTE. — a palavra mais longa da
     headline precisa caber inteira na coluna (100vw menos os dois recuos)
     nos 390px do iPhone. Acima disso a última letra era cortada. */
  font-size: min(var(--t-hero), 7.6vw);
  text-wrap: wrap;
  overflow-wrap: break-word;   /* rede de segurança se a headline mudar */
}

#capa .capa__apoio {
  margin-top: clamp(1.125rem, 2.4vw, 1.75rem);
  color: var(--taupe);
}

#capa .capa__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.75rem, 1.6vw, 1rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* Alvo de toque: .btn fica em ~43px só com padding. */
#capa .capa__cta { min-height: 44px; }

/* No celular os dois CTAs viram barras de largura cheia: mais alvo de toque
   e menos ruído do que duas caixas de larguras diferentes. */
@media (max-width: 479px) {
  #capa .capa__acoes {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --------------------------------------------------------------- régua -- */
/* gap de 1px sobre o fundo --chumbo desenha os filetes divisores sem borda. */
#capa .capa__regua {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--chumbo);
}

#capa .capa__dado {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-block: 10px;
  padding-inline: clamp(1.25rem, 4vw, 4.5rem);
  background: var(--grafite);
  color: var(--taupe);
  line-height: 1.35;
}

@media (min-width: 560px) {
  #capa .capa__regua { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------ desktop -- */
@media (min-width: 900px) {
  #capa .capa__pasta {
    display: grid;
    grid-template-columns: 46fr 54fr;
  }

  #capa .capa__pagina--foto { order: 0; }

  /* Fora do fluxo: senão a altura intrínseca do retrato manda na linha da
     grade e a capa cresce muito além dos 86vh. Assim quem define a altura é
     a página de texto (ou o min-height da seção). */
  #capa .capa__foto {
    position: absolute;
    inset: 0;
    height: auto;
  }

  /* Sem texto sobre a foto no split: o gradiente não tem função aqui. */
  #capa .capa__foto::after { content: none; }

  /* A lombada vira vertical e corre a altura toda das duas páginas. */
  #capa .capa__pagina--foto::after {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: 3px;
    height: auto;
  }

  /* No split a coluna é 46vw menos os recuos: o teto exato é 4,26vw; 4vw
     deixa ~6% de folga. A partir de ~1840px o token volta a mandar. */
  #capa .capa__titulo { font-size: min(var(--t-hero), 4vw); }
}

@media (min-width: 1100px) {
  /* Ficha técnica, não tabela: as quatro células medem o próprio conteúdo e a
     última come a folga. Com repeat(4, 1fr) a terceira ("Masculino · Feminino
     · Bonés") não caberá nunca nos 310px que sobram e quebrava em duas linhas,
     desalinhada das outras três. */
  #capa .capa__regua { grid-template-columns: auto auto auto 1fr; }

  #capa .capa__dado {
    padding-inline: clamp(1rem, 1.6vw, 1.75rem);
    white-space: nowrap;
  }

  /* Primeira célula alinhada com a headline da página esquerda. */
  #capa .capa__dado:first-child { padding-left: clamp(1.25rem, 4vw, 4.5rem); }
}

/* ------------------------------------------------------------- motion -- */
/* Entrada em cascata sem depender de JS: se o script falhar, o herói continua
   visível (por isso não uso .revela aqui). */
@keyframes capa-entra {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

#capa .capa__bloco > * {
  animation: capa-entra 560ms var(--curva) both;
}
#capa .capa__sobrelinha { animation-delay: 0ms; }
#capa .capa__titulo     { animation-delay: 80ms; }
#capa .capa__apoio      { animation-delay: 160ms; }
#capa .capa__acoes      { animation-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  #capa .capa__img {
    animation: none;
    transform: none;
    will-change: auto;
  }
  #capa .capa__bloco > * {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ===== curral/assets/css/secoes/como-funciona.css ===== */
/* ==========================================================================
   07 — Como você vira ponto TBull  ·  #como-funciona
   Aparição ÚNICA do Vinho Couro (--vinho) na página inteira: banda full-bleed
   com grão de papelão a 8% e vinheta radial nas bordas — couro batido, não
   banner de promoção. Todo o texto em Osso.
   Nenhuma cor, fonte ou escala nova: só token ou valor derivado de token.
   ========================================================================== */

#como-funciona {
  /* 88px é o corpo do número na direção. Abaixo de ~978px de viewport ele
     desce até 56px para caber na coluna do trilho vertical do mobile. */
  --num-tam: clamp(3.5rem, 9vw, 5.5rem);
  /* O "disco" que recorta o filete tem 1,5× o corpo do número: circunscreve
     os dois dígitos com folga. */
  --disco: calc(var(--num-tam) * 1.5);
  --coluna-gap: clamp(1.5rem, 2.6vw, 2.25rem);
  --pad-passo: clamp(1.75rem, 5vw, 2.5rem);

  /* Derivados de --osso — a direção pede filete a 40%, divisor a 30% e o
     número a 22%. Nenhum valor de cor novo é declarado aqui. */
  --filete:  color-mix(in srgb, var(--osso) 40%, transparent);
  --divisor: color-mix(in srgb, var(--osso) 30%, transparent);
  --num-cor: color-mix(in srgb, var(--osso) 22%, transparent);
  /* Osso rebaixado sobre o vinho para a sobrelinha e a linha de apoio: mistura
     com o próprio fundo (opaco e previsível), mantendo contraste acima de 6:1. */
  --osso-apoio: color-mix(in srgb, var(--osso) 84%, var(--vinho));

  /* Escala derivada de --t-corpo (18px): título de passo 17px, texto 16px. */
  --t-passo-titulo: calc(var(--t-corpo) - .0625rem);
  --t-passo-corpo:  calc(var(--t-corpo) - .125rem);

  /* A faixa preta do aviso fecha a banda: sem respiro inferior de vinho. */
  padding-bottom: 0;
}

/* Vinheta radial — abaixo do conteúdo (z-index 0) para não roubar contraste
   do texto que fica perto das bordas. */
#como-funciona::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 88% at 50% 42%,
              transparent 46%,
              color-mix(in srgb, var(--preto) 52%, transparent) 100%);
}

/* Grão de papelão a 8% — o .grao global roda a 5% e é fixo na viewport; aqui
   a direção pede a textura mais forte, presa à banda. Mesma malha do base.css.
   pointer-events: none é obrigatório: overlay que rouba hover é bug. */
#como-funciona::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .08;
  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");
}

/* O fólio (z-index 0 no base.css) vem depois do ::before no DOM, então pinta
   acima da vinheta e abaixo do container — que já é z-index 1. Nada a fazer. */

/* ------------------------------------------------------------ cabeçalho -- */
#como-funciona .cf__cabecalho {
  display: grid;
  gap: .875rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

#como-funciona .sobrelinha { color: var(--osso-apoio); }

#como-funciona .cf__intro {
  font-size: var(--t-passo-corpo);
  line-height: 1.6;
  color: var(--osso-apoio);
}

/* ---------------------------------------------- trilho — mobile primeiro --
   No mobile o trilho gira para vertical: o filete desce pela esquerda,
   passando por trás dos números. */
#como-funciona .cf__trilho { display: grid; }

#como-funciona .cf__passo {
  --furo: calc(var(--pad-passo) + var(--disco) / 2);
  position: relative;
  display: grid;
  grid-template-columns: var(--disco) minmax(0, 1fr);
  column-gap: clamp(1rem, 3.5vw, 1.75rem);
  padding-block: var(--pad-passo);
  /* Obrigatório: as colunas do trilho esticam até a altura da mais alta e, sem
     isto, o espaço sobrando seria distribuído entre as linhas — os números
     sairiam do filete. */
  align-content: start;
}
#como-funciona .cf__passo:first-child { --furo: calc(var(--disco) / 2); }

/* Divisor entre passos: pesponto tracejado Osso a 30%, começando depois da
   coluna do número para não cruzar o filete. */
#como-funciona .cf__passo + .cf__passo::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(var(--disco) + clamp(1rem, 3.5vw, 1.75rem));
  right: 0;
  height: 3px;
  background-image: repeating-linear-gradient(to right,
                    var(--divisor) 0 6px, transparent 6px 12px);
}

#como-funciona .cf__figura {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 1.25rem;
}

#como-funciona .cf__codigo {
  display: block;
  margin-top: .75rem;
  line-height: 1.45;
  color: var(--osso);
}

#como-funciona .cf__marca {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: relative;
}

/* Filete contínuo de 1px. O "disco em Vinho atrás do número" é resolvido como
   furo circular na máscara do próprio filete: pintar um círculo vinho por cima
   apagaria o grão e a vinheta e o disco apareceria como mancha lisa. Resultado
   idêntico ao da direção — a linha passa por trás dos números — e sem
   border-radius. O #000 do mask-image é canal alfa, não cor de página. */
#como-funciona .cf__marca::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--pad-passo));
  bottom: calc(-1 * var(--pad-passo));
  left: calc(var(--disco) / 2);
  width: 1px;
  background: var(--filete);
  -webkit-mask-image: radial-gradient(circle at 50% var(--furo),
                      transparent 0 calc(var(--disco) / 2),
                      #000 calc(var(--disco) / 2));
  mask-image: radial-gradient(circle at 50% var(--furo),
              transparent 0 calc(var(--disco) / 2),
              #000 calc(var(--disco) / 2));
}
#como-funciona .cf__passo:first-child .cf__marca::before { top: 0; }
#como-funciona .cf__passo:last-child  .cf__marca::before { bottom: 0; }

#como-funciona .cf__numero {
  display: grid;
  place-items: center;
  width: var(--disco);
  height: var(--disco);
  font-family: var(--fonte-display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: var(--num-tam);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--num-cor);
  user-select: none;
}

#como-funciona .cf__texto {
  grid-column: 2;
  grid-row: 2;
}

#como-funciona .cf__titulo {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: var(--t-passo-titulo);
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--osso);
  margin-bottom: .625rem;
}

#como-funciona .cf__corpo {
  font-size: var(--t-passo-corpo);
  line-height: 1.6;
  max-width: 34ch;
  color: var(--osso);
}

/* -------------------------------------------- trilho horizontal (≥992px) -- */
@media (min-width: 62rem) {
  #como-funciona .cf__trilho {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--coluna-gap);
  }

  #como-funciona .cf__passo {
    --furo: calc(var(--coluna-gap) + var(--disco) / 2);
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    padding-block: 0;
  }
  #como-funciona .cf__passo:first-child { --furo: calc(var(--disco) / 2); }

  /* Divisor vira vertical, na metade do gap entre as colunas. */
  #como-funciona .cf__passo + .cf__passo::before {
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--coluna-gap) / 2);
    right: auto;
    width: 3px;
    height: auto;
    background-image: repeating-linear-gradient(to bottom,
                      var(--divisor) 0 6px, transparent 6px 12px);
  }

  #como-funciona .cf__figura {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }

  /* Altura fixa da legenda (duas linhas) para que os quatro números caiam
     exatamente na mesma altura e o filete atravesse reto. */
  #como-funciona .cf__codigo {
    height: calc(2 * 1.45em);
    overflow: hidden;
  }

  #como-funciona .cf__marca {
    grid-column: 1;
    grid-row: 2;
    height: var(--disco);
    margin-block: clamp(.5rem, 1.4vw, 1.125rem);
  }

  #como-funciona .cf__marca::before {
    top: 50%;
    bottom: auto;
    left: calc(-1 * var(--coluna-gap));
    right: calc(-1 * var(--coluna-gap));
    width: auto;
    height: 1px;
    -webkit-mask-image: radial-gradient(circle at var(--furo) 50%,
                        transparent 0 calc(var(--disco) / 2),
                        #000 calc(var(--disco) / 2));
    mask-image: radial-gradient(circle at var(--furo) 50%,
                transparent 0 calc(var(--disco) / 2),
                #000 calc(var(--disco) / 2));
  }
  /* O filete começa e termina na medida do container, sem invadir a margem.
     top/bottom precisam ser redeclarados aqui: as regras :first-child e
     :last-child do trilho vertical têm especificidade maior que a regra
     genérica deste bloco e venceriam o top: 50%. */
  #como-funciona .cf__passo:first-child .cf__marca::before {
    top: 50%;
    bottom: auto;
    left: 0;
  }
  #como-funciona .cf__passo:last-child .cf__marca::before {
    top: 50%;
    bottom: auto;
    right: 0;
  }

  /* Linhas reservadas para o título: os quatro parágrafos começam na mesma
     altura mesmo quando um título quebra e o outro não. Com a coluna estreita
     (container ainda não travado em 1280) o título mais longo pede três. */
  #como-funciona .cf__titulo { min-height: calc(3 * 1.2em); }

  #como-funciona .cf__texto {
    grid-column: 1;
    grid-row: 3;
  }
}

/* Container travado em 1280: a coluna volta a ter 273px e duas linhas de
   título bastam — reservar a terceira só abriria buraco. */
@media (min-width: 80rem) {
  #como-funciona .cf__titulo { min-height: calc(2 * 1.2em); }
}

/* -------------------------------------------------------- aviso de fecho --
   Faixa Preto Curral atravessando a largura total, mono 12px em Taupe. */
#como-funciona .cf__aviso {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  min-height: 48px;
  margin-top: var(--respiro);
  background: var(--preto);
}

#como-funciona .cf__aviso-texto {
  max-width: var(--container);
  margin-inline: auto;
  padding: .75rem var(--gutter);
  color: var(--taupe);
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}

/* ===== curral/assets/css/secoes/detalhes.css ===== */
/* ==========================================================================
   #detalhes — 05 · Detalhe por detalhe
   O moodboard da coleção pregado na prancheta: seis macros em alturas
   deliberadamente desiguais, sem card, sem sombra, sem canto arredondado.
   Cada anotação é amarrada ao ponto exato da foto por uma LEADER LINE —
   hairline de 1px em --chumbo terminando num quadrado de 4px em --vermelho.
   A linha se desenha por stroke-dashoffset quando o bloco entra na viewport
   (500ms, escalonada 80ms pelo iniciarLeaderLines de app.js) e fica parada em
   prefers-reduced-motion.
   Todo seletor prefixado por #detalhes. Nenhuma cor, fonte ou escala nova:
   só token de base.css ou derivação comentada.
   ========================================================================== */

#detalhes {
  /* Faixa lateral reservada para a anotação. Ela é o "fora da foto": nenhum
     texto pousa sobre o still. */
  --faixa: clamp(7rem, 13vw, 11rem);
  /* Quanto a leader line avança para fora da moldura até encostar na anotação. */
  --saida: clamp(.875rem, 1.6vw, 1.5rem);
  /* Espelha o padding de .placa--fina (10px). Se aquele valor mudar em
     base.css, este precisa mudar junto — é ele que corrige a posição do ponto
     do quadro externo para dentro da área da imagem. */
  --moldura: 10px;

  scroll-margin-top: calc(var(--altura-header-compacto) + var(--altura-marquee));
}

/* Fólio sangrando pela ESQUERDA — o padrão de base.css é encostado à direita. */
#detalhes .detalhes__folio {
  right: auto;
  left: 0;
  top: calc(var(--respiro) * .08);
  transform: translateX(-24%);
}

/* ------------------------------------------------------------ abertura -- */
#detalhes .detalhes__abertura {
  max-width: 64ch;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

#detalhes .detalhes__titulo {
  margin-block: .625rem .875rem;
  color: var(--preto);
}

#detalhes .detalhes__apoio {
  /* 19px: mesmo degrau de corpo usado na abertura do manifesto. */
  font-size: calc(var(--t-corpo) + .0625rem);
  line-height: 1.5;
  color: var(--grafite);
  max-width: 46ch;
}

#detalhes .detalhes__lead {
  margin-top: 1.125rem;
  font-size: var(--t-legenda);
  line-height: 1.6;
  color: var(--chumbo);
  max-width: 58ch;
}

/* ------------------------------------------------------------- mosaico -- */
/* Base = celular: uma coluna, anotação embaixo da foto. */
#detalhes .detalhes__mosaico {
  display: grid;
  gap: clamp(2.75rem, 9vw, 3.5rem);
}

#detalhes .detalhes__item {
  position: relative;
  margin: 0;
  min-width: 0;
}

/* O palco tem exatamente a altura da moldura — é o que permite ancorar a
   anotação e a leader line no mesmo 50% e nunca sair de registro. */
#detalhes .detalhes__palco { position: relative; }

/* -------------------------------------------------------------- recorte -- */
/* A janela do macro. A foto de estúdio continua dentro da .placa (regra da
   pasta), mas a placa aqui é a mais fina possível: papel, não card. */
#detalhes .detalhes__recorte {
  position: relative;
  overflow: hidden;
}

#detalhes .detalhes__recorte--larga { aspect-ratio: 4 / 3; }
#detalhes .detalhes__recorte--alta  { aspect-ratio: 3 / 4; }

/* O macro é feito no CSS: object-position leva o ponto de interesse da foto
   (--foco-x/--foco-y) para a mesma coordenada da janela; a escala amplia em
   torno dele; a translação recoloca o detalhe em (--ponto-x, 50%), que é
   exatamente onde a leader line encosta. Zero texto queimado, zero recorte
   novo de arquivo. */
#detalhes .detalhes__recorte img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: calc(var(--foco-x) * 100%) calc(var(--foco-y) * 100%);
  transform-origin: calc(var(--foco-x) * 100%) calc(var(--foco-y) * 100%);
  transform:
    translate(calc(var(--ponto-x) * 100% - var(--foco-x) * 100%),
              calc(50% - var(--foco-y) * 100%))
    scale(var(--lupa));
}

/* --------------------------------------------------------- leader line -- */
/* Um único SVG serve às duas orientações: com preserveAspectRatio="none" a
   diagonal de canto a canto vira horizontal numa caixa de 1px de altura e
   vertical numa caixa de 1px de largura. vector-effect mantém o traço em 1px
   real nos dois casos. */
#detalhes .detalhes__leader {
  position: absolute;
  z-index: 2;
  pointer-events: none;

  /* Celular: a linha desce da foto até a anotação, logo abaixo. */
  top: 50%;
  left: calc(var(--moldura) + (100% - var(--moldura) * 2) * var(--ponto-x));
  width: 1px;
  height: calc(50% + var(--saida));
}

#detalhes .detalhes__leader svg {
  width: 100%;
  height: 100%;
  overflow: visible;   /* sem isso o traço de 1px é cortado pela viewBox rasa */
}

#detalhes .detalhes__leader line {
  stroke: var(--chumbo);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 1;         /* pathLength="1" normaliza o comprimento */
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 500ms var(--curva);
  transition-delay: var(--atraso, 0ms);
}

#detalhes .detalhes__leader.desenhada line { stroke-dashoffset: 0; }

/* O ponto Vermelho Ferro de 4px que pousa sobre o detalhe. Quadrado: o raio
   zero vale para a página inteira. Sobre Osso o vermelho tem 5,86:1 e aqui
   ele é preenchimento, não texto. */
#detalhes .detalhes__leader::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -1.5px;              /* centra o quadrado de 4px sobre o traço de 1px */
  width: 4px;
  height: 4px;
  background: var(--vermelho);
  opacity: 0;
  transform: scale(.35);
  transition: opacity 160ms linear, transform 160ms var(--curva);
  transition-delay: calc(var(--atraso, 0ms) + 420ms);
}

#detalhes .detalhes__leader.desenhada::after {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------ anotação -- */
#detalhes .detalhes__anotacao {
  margin: calc(var(--saida) + .75rem) 0 0;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-stretch: 118%;
  /* 11px. Não existe token abaixo de --t-rotulo (13px); derivado por 0,85×
     para não abrir uma escala tipográfica nova. */
  font-size: calc(var(--t-rotulo) * .85);
  line-height: 1.5;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--chumbo);
}

/* ----------------------------------------------------------- desdobra --- */
#detalhes .detalhes__desdobra {
  margin-top: clamp(.75rem, 1.4vw, 1.125rem);
  max-width: 46ch;
}

#detalhes .detalhes__desdobra p {
  font-size: var(--t-legenda);
  line-height: 1.55;
  color: var(--grafite);
}

#detalhes .detalhes__cod {
  margin-top: .625rem;
  color: var(--chumbo);
}

/* ---------------------------------------------- parâmetros de cada macro -- */
/* --foco-x/--foco-y: onde o detalhe está no arquivo (fração 0–1).
   --lupa: ampliação. --ponto-x: onde o detalhe (e o ponto vermelho) pousa na
   janela. Todos aferidos foto a foto contra o arquivo real. */
#detalhes .detalhes__item--01 { --foco-x: .336; --foco-y: .633; --lupa: 2.6; --ponto-x: .42; }
#detalhes .detalhes__item--02 { --foco-x: .533; --foco-y: .347; --lupa: 2.4; --ponto-x: .55; }
#detalhes .detalhes__item--03 { --foco-x: .490; --foco-y: .842; --lupa: 3.4; --ponto-x: .46; }
#detalhes .detalhes__item--04 { --foco-x: .582; --foco-y: .464; --lupa: 3.0; --ponto-x: .56; }
#detalhes .detalhes__item--05 { --foco-x: .484; --foco-y: .541; --lupa: 2.4; --ponto-x: .44; }
#detalhes .detalhes__item--06 { --foco-x: .491; --foco-y: .692; --lupa: 2.6; --ponto-x: .52; }

/* -------------------------------------------------------------- fecho --- */
#detalhes .detalhes__costura {
  margin-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
}

/* Medida em rem, não em ch: `ch` resolve no font-size DESTE bloco (18px), e a
   citação renderiza a 40px de Bodoni — 38ch dava 392px, ou seja 7 linhas de
   catorze caracteres. 41rem fecha a citação em 4 linhas. */
#detalhes .detalhes__fecho {
  max-width: min(41rem, 100%);
  margin-inline: auto;
  text-align: center;
  color: var(--preto);
}

#detalhes .detalhes__fonte {
  display: block;
  margin-top: 1.25rem;
  color: var(--chumbo);
}

#detalhes .detalhes__fonte sup {
  font-size: .7em;
  vertical-align: super;
  letter-spacing: 0;
}

/* ==========================================================================
   ≥ 48rem — a anotação sai de baixo da foto e vai para a faixa lateral.
   A leader line deita: passa a ser horizontal, na meia-altura da moldura.
   ========================================================================== */
@media (min-width: 48rem) {
  #detalhes .detalhes__mosaico {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    row-gap: clamp(3rem, 6vw, 4.5rem);
    align-items: start;
  }

  #detalhes .detalhes__item--nota-dir .detalhes__quadro,
  #detalhes .detalhes__item--nota-dir .detalhes__desdobra { margin-right: var(--faixa); }

  #detalhes .detalhes__item--nota-esq .detalhes__quadro,
  #detalhes .detalhes__item--nota-esq .detalhes__desdobra { margin-left: var(--faixa); }

  /* --- linha deitada --- */
  #detalhes .detalhes__leader {
    top: 50%;
    width: auto;
    height: 1px;
  }

  #detalhes .detalhes__item--nota-dir .detalhes__leader {
    left: calc(var(--moldura) + (100% - var(--moldura) * 2) * var(--ponto-x));
    right: calc(-1 * var(--saida));
  }

  #detalhes .detalhes__item--nota-esq .detalhes__leader {
    left: calc(-1 * var(--saida));
    right: calc(100% - var(--moldura) - (100% - var(--moldura) * 2) * var(--ponto-x));
  }

  /* A linha se desenha SEMPRE a partir da anotação em direção à foto: quando a
     nota está à direita, o traço nasce na ponta direita (offset negativo). */
  #detalhes .detalhes__item--nota-dir .detalhes__leader line { stroke-dashoffset: -1; }

  #detalhes .detalhes__leader::after {
    top: 50%;
    left: auto;
    margin-top: -2px;
  }
  #detalhes .detalhes__item--nota-dir .detalhes__leader::after { left: -2px; }
  #detalhes .detalhes__item--nota-esq .detalhes__leader::after { right: -2px; }

  /* --- anotação na faixa, centrada na linha --- */
  #detalhes .detalhes__anotacao {
    position: absolute;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
  }

  #detalhes .detalhes__item--nota-dir .detalhes__anotacao {
    left: calc(100% - var(--faixa) + var(--saida));
    right: 0;
    text-align: left;
  }

  #detalhes .detalhes__item--nota-esq .detalhes__anotacao {
    left: 0;
    right: calc(100% - var(--faixa) + var(--saida));
    text-align: right;
    /* o tracking de .28em deixa um vão depois da última letra; sem esta
       compensação o texto alinhado à direita não encosta na linha. */
    margin-right: -.28em;
  }
}

/* ==========================================================================
   ≥ 64rem — o mosaico de verdade: 12 colunas, larguras diferentes e recuos
   verticais irregulares. É prancheta, não grade.
   ========================================================================== */
@media (min-width: 64rem) {
  #detalhes .detalhes__mosaico {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: 0;
  }

  /* Os recuos são irregulares de propósito, mas o de item--04 (11rem) esticava
     a linha 2 tanto que a coluna esquerda abria um vão de 479px entre 03 e 05 —
     lido como falha, não como respiro. Recuos menores mantêm o desalinho de
     prancheta e fecham o vão. */
  #detalhes .detalhes__item--01 { grid-column: 1 / span 6; grid-row: 1; margin-top: 0; }
  #detalhes .detalhes__item--02 { grid-column: 8 / span 5; grid-row: 1; margin-top: 5rem; }
  #detalhes .detalhes__item--03 { grid-column: 1 / span 5; grid-row: 2; margin-top: 3rem; }
  #detalhes .detalhes__item--04 { grid-column: 7 / span 6; grid-row: 2; margin-top: 4.5rem; }
  #detalhes .detalhes__item--05 { grid-column: 2 / span 5; grid-row: 3; margin-top: 2.5rem; }
  #detalhes .detalhes__item--06 { grid-column: 8 / span 5; grid-row: 3; margin-top: 5.5rem; }
}

/* ==========================================================================
   < 48rem — a foto ocupa a largura inteira e o ponto recua para perto da
   margem, de onde a linha desce até a anotação.
   ========================================================================== */
@media (max-width: 47.99rem) {
  #detalhes .detalhes__item { --ponto-x: .22; }
}

/* ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* base.css já zera a duração das transições; falta zerar o atraso, senão o
     ponto vermelho apareceria 420ms depois sem nenhum motivo. */
  #detalhes .detalhes__leader line,
  #detalhes .detalhes__leader::after {
    transition-delay: 0s !important;
  }
  #detalhes .detalhes__leader line { stroke-dashoffset: 0; }
  #detalhes .detalhes__leader::after { opacity: 1; transform: none; }
}

/* ===== curral/assets/css/secoes/faq.css ===== */
/* ==========================================================================
   09 — Perguntas de lojista  (#faq)
   Fundo osso, duas colunas, TODAS as perguntas abertas: nenhum accordion
   esconde conteúdo de venda. Filete de 1px em --osso-sombra entre os itens
   e um bloco --osso-sombra nas duas respostas largas: a Q1 (condição de compra)
   e a Q6 (o que fica fora da coleção).
   Escala de 16px não existe em token: é derivada de --t-corpo (18px).
   ========================================================================== */

/* ------------------------------------------------------------ cabeçalho -- */
#faq .faq__cabecalho {
  display: grid;
  gap: .875rem;
  max-width: 56ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

#faq .faq__abertura {
  max-width: 52ch;
  color: var(--chumbo);
  font-size: calc(var(--t-corpo) - .125rem);  /* 16px — derivado de --t-corpo */
  line-height: 1.65;
}

/* ----------------------------------------------------------------- lista -- */
#faq .faq__lista {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(2rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--osso-sombra);
}

#faq .faq__item {
  /* O filete pedido pela direção. Sem row-gap, as bordas de topo de duas
     colunas vizinhas formam uma única linha contínua por fileira. */
  border-top: 1px solid var(--osso-sombra);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}

@media (min-width: 900px) {
  #faq .faq__lista { grid-template-columns: 1fr 1fr; }
  #faq .faq__item--largo { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ pergunta --- */
#faq .faq__indice {
  color: var(--vermelho);           /* 5,86:1 sobre --osso */
  margin-bottom: .625rem;
}

#faq .faq__pergunta {
  max-width: 34ch;
  margin-bottom: .625rem;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: var(--t-corpo);        /* 18px */
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--preto);
  text-wrap: balance;
}

#faq .faq__resposta {
  max-width: 46ch;
  color: var(--chumbo);
  font-size: calc(var(--t-corpo) - .125rem);  /* 16px */
  line-height: 1.65;
}

#faq .faq__resposta sup {
  font-size: .6em;
  line-height: 0;
  vertical-align: super;
}

/* --------------- Itens largos: Q1 (condição de compra) e Q6 (o que não tem) */
#faq .faq__corpo-largo {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  #faq .faq__corpo-largo {
    grid-template-columns: minmax(0, 46ch) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
  }
}

#faq .faq__limites {
  background: var(--osso-sombra);
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
}

#faq .faq__limites-rotulo {
  /* --vermelho cai para 4,53:1 sobre --osso-sombra; em 12px o rótulo vai de
     preto e o acento vermelho fica nos glifos da lista, que são preenchimento. */
  color: var(--preto);
  margin-bottom: .875rem;
}

#faq .faq__limites-lista {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem 1.5rem;
  margin-bottom: 1rem;
}

#faq .faq__limites-lista li {
  position: relative;
  padding-left: 1rem;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: calc(var(--t-corpo) - .125rem);  /* 16px */
  line-height: 1.5;
  color: var(--preto);
}

/* Glifo quadrado: vermelho como preenchimento, nunca como texto. */
#faq .faq__limites-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .6em;
  width: 6px;
  height: 6px;
  background: var(--vermelho);
}

#faq .faq__limites-nota {
  max-width: 46ch;
  color: var(--chumbo);
  font-size: var(--t-legenda);
  line-height: 1.6;
}

/* ---------------------------------------------------------------- saída -- */
#faq .faq__saida {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  color: var(--chumbo);
  font-size: calc(var(--t-corpo) - .125rem);  /* 16px */
}

#faq .faq__link {
  /* padding vertical leva o alvo de toque a 44px sem soltar o filete do texto */
  display: inline-block;
  padding-block: 14px;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: var(--t-rotulo);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--preto);
}

#faq .faq__link::after { bottom: 11px; }

/* ===== curral/assets/css/secoes/folha-contato.css ===== */
/* ==========================================================================
   04 — FOLHA DE CONTATO  (#folha-contato)
   Tira de quadros mais larga que a viewport: a prova física de que o catálogo
   existe, no formato de folha de contato de estúdio. Só consome tokens de
   base.css; todo seletor é prefixado por #folha-contato.
   ========================================================================== */

#folha-contato {
  /* Recuo que alinha o primeiro quadro com o .container e deixa a tira
     sangrar pela direita. Quando a viewport é menor que --container, o max()
     cai para o próprio gutter. */
  --fc-recuo: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));

  /* Largura do quadro: 248px no celular, teto de 336px no monitor grande. */
  --fc-quadro: clamp(15.5rem, 26vw, 21rem);

  /* O passo das setas em app.js é largura-do-quadro + 24px. Não mexer. */
  --fc-gap: 24px;
}

/* ------------------------------------------------------------ costura -- */
/* Divisor de pesponto no limite superior da seção. */
#folha-contato .fc-costura {
  position: absolute;
  inset: 0 var(--fc-recuo) auto;
  z-index: 1;
  margin: 0;
}

/* ------------------------------------------------------------- cabeça -- */
#folha-contato .fc-cabeca {
  display: grid;
  gap: .875rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

#folha-contato .fc-cabeca .titulo-secao { max-width: 20ch; }

/* --------------------------------------------------------------- tira -- */
/* z-index acima do fólio, que é posicionado e passaria por cima dos quadros. */
#folha-contato .fc-tira {
  position: relative;
  z-index: 1;
}

#folha-contato .fc-pista {
  display: flex;
  gap: var(--fc-gap);
  padding-inline: var(--fc-recuo);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--fc-recuo);
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* Edge legado */
}

#folha-contato .fc-pista::-webkit-scrollbar { display: none; }

#folha-contato .fc-item {
  flex: 0 0 var(--fc-quadro);
  scroll-snap-align: start;
  /* Folga para o marquee + header fixos quando o link direto (#cod-131)
     traz o lojista para a peça. */
  scroll-margin-block-start: calc(var(--altura-marquee) + var(--altura-header) + 2rem);
}

/* ------------------------------------------------------------- quadro -- */
#folha-contato .fc-quadro {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#folha-contato .fc-quadro .placa--filete {
  transition: box-shadow 240ms var(--curva);
}

/* Peça apontada por link direto: a moldura acende em brasa (filete, não texto).
   Vem antes do hover de propósito — mesma especificidade, hover ganha por ordem. */
#folha-contato .fc-item:target .placa--filete {
  box-shadow: inset 0 0 0 1px var(--brasa);
}

#folha-contato .fc-quadro:hover .placa--filete,
#folha-contato .fc-quadro:focus-within .placa--filete {
  box-shadow: inset 0 0 0 1px var(--taupe);
}

#folha-contato .fc-janela {
  position: relative;
  overflow: hidden;
}

/* ---------------------------------------------------- troca de imagem -- */
/* Capa some, detalhe do próprio catálogo entra. 500ms na curva de swap. */
#folha-contato .fc-foto {
  position: absolute;
  inset: 0;
  transition: opacity 500ms var(--curva-swap);
}

#folha-contato .fc-foto--detalhe { opacity: 0; }

#folha-contato .fc-quadro:hover .fc-foto--capa,
#folha-contato .fc-quadro:focus-within .fc-foto--capa { opacity: 0; }

#folha-contato .fc-quadro:hover .fc-foto--detalhe,
#folha-contato .fc-quadro:focus-within .fc-foto--detalhe { opacity: 1; }

/* No toque não existe hover: quem chega pelo teclado ou toca na legenda
   recebe o mesmo swap via :focus-within, sem JS extra. */

/* ------------------------------------------------------------ legenda -- */
/* Crédito de moda, uma linha por peça. A própria legenda é o link direto. */
#folha-contato .fc-legenda {
  display: block;
  min-height: 44px;                /* alvo de toque */
  padding-block: 12px 4px;
  line-height: 1.5;
  color: var(--taupe);
  transition: color 180ms linear;
}

#folha-contato .fc-legenda:hover { color: var(--osso); }

#folha-contato .fc-cod {
  color: var(--brasa);             /* vermelho de texto sobre escuro */
}

#folha-contato .fc-sep {
  /* Filete de separação sem peso de texto. */
  color: var(--chumbo);
  padding-inline: .1em;
}

/* ----------------------------------------------------------- controles -- */
#folha-contato .fc-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 1.75rem;
}

#folha-contato .fc-nota {
  flex: 1 1 26ch;
  max-width: 56ch;
  margin: 0;
}

#folha-contato .fc-setas {
  flex: none;
  display: flex;
  gap: 12px;
}

/* Setas QUADRADAS de 44px — a exceção circular do projeto é de outra seção. */
#folha-contato .fc-seta {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: var(--grafite);
  box-shadow: inset 0 0 0 1px var(--chumbo);
  color: var(--osso);
  transition: box-shadow 180ms linear, color 180ms linear;
}

#folha-contato .fc-seta:hover:not([disabled]) {
  box-shadow: inset 0 0 0 1px var(--osso);
}

#folha-contato .fc-seta[disabled] {
  opacity: .25;
  cursor: default;
}

/* O foco visível (2px --brasa, offset 3px) vem de :focus-visible em base.css. */

#folha-contato .fc-glifo {
  width: 18px;
  height: 18px;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* ------------------------------------------------------------- rodapé -- */
#folha-contato .fc-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

#folha-contato .fc-ressalva {
  flex: 1 1 24ch;
  margin: 0;
}

#folha-contato .fc-cta { flex: none; }

/* ---------------------------------------------------------- responsivo -- */
@media (max-width: 40rem) {
  #folha-contato .fc-controles {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  /* Em coluna o flex-basis viraria altura e abriria um vão morto. */
  #folha-contato .fc-nota { flex: none; }
  #folha-contato .fc-cta { width: 100%; }
}

/* ===== curral/assets/css/secoes/linhas.css ===== */
/* ==========================================================================
   #linhas — 03 · As seis linhas de 2026
   Grade estática de 6 cards sobre Preto Curral. Cada still de estúdio entra
   dentro da .placa (Osso Sombra + inset de 14px): a moldura de catálogo
   absorve o bege do fundo da foto e devolve contraste alto contra o preto.
   Nada aqui é escondido atrás de seta — o lojista vê o mix inteiro de uma vez.
   Todos os seletores prefixados por #linhas.
   ========================================================================== */

/* Fólio numerado em Bodoni, 6% (opacidade já vem de .folio), em Taupe. */
#linhas .folio { color: var(--taupe); }

/* ------------------------------------------------------------- cabeça -- */
#linhas .linhas__cabeca {
  display: grid;
  gap: clamp(1rem, 2.4vw, 2rem);
}

#linhas .linhas__cabeca > div > .sobrelinha { margin-bottom: .75rem; }

@media (min-width: 900px) {
  #linhas .linhas__cabeca {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: end;
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  #linhas .linhas__abertura { padding-bottom: .35rem; }
}

#linhas .linhas__pesponto {
  margin-block: clamp(2rem, 4vw, 2.75rem) clamp(1.75rem, 3.4vw, 2.5rem);
}

/* -------------------------------------------------------------- grade -- */
/* 3 x 2 no desktop, gap 24px, dentro do container de 1280px.
   Grade estática: sem carrossel, sem "ver mais". */
#linhas .linhas__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

/* Os pontos de quebra são 700 e 1120, não 640 e 1024: abaixo disso a coluna
   fica estreita demais e o pé de texto (descrição + código) come o card, o que
   derruba a área de imagem da seção abaixo do piso de 40%. */
@media (min-width: 700px) {
  #linhas .linhas__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1120px) {
  #linhas .linhas__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- card -- */
#linhas .linha { display: flex; }

#linhas .linha__corpo {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* .placa já entrega o fundo Osso Sombra e o inset de 14px. */
#linhas .linha__placa { flex: 0 0 auto; }

/* .retrato fixa 3/4 — as fotos são todas de retrato, nada de crop 16:9. */
#linhas .linha__quadro {
  position: relative;
  overflow: hidden;
  background: var(--preto);
}

#linhas .linha__quadro img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  /* HOVER "marca a fogo" — o único gesto desse tipo na página. */
  transition: transform 450ms var(--curva);
}

#linhas .linha:hover .linha__quadro img { transform: scale(1.045); }

/* Véu de gradiente: o nome da linha é HTML sobre a foto, nunca texto queimado.
   "Preto 0 → 65%": não existe token de --preto translúcido, então a opacidade
   é derivada do próprio token com color-mix. */
#linhas .linha__veu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--preto) 65%, transparent) 0%,
    color-mix(in srgb, var(--preto) 40%, transparent) 34%,
    color-mix(in srgb, var(--preto) 0%, transparent) 100%
  );
}

#linhas .linha__nome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 0 14px 12px;
  font-family: var(--fonte-display);
  font-weight: 800;
  font-stretch: 112%;
  /* 20px. A direção fixou esse corpo para o nome assentado na base da foto e
     não há token nessa medida — derivado de --t-corpo (18px) + 2px. */
  font-size: calc(var(--t-corpo) + 2px);
  line-height: 1.1;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--osso);
}

/* Monograma carimbado no canto superior direito.
   Cor --preto (e não --osso) porque o canto superior direito dos seis stills é
   parede clara: um carimbo escuro a 22% lê como marca a fogo no papel; osso
   sumiria no bege. Sobre escuro isso é glifo, não texto — regra respeitada. */
#linhas .linha__carimbo {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 21%;
  height: auto;
  aspect-ratio: 100 / 72.54;
  color: var(--preto);
  opacity: 0;
  transform: scale(1.4);
  filter: blur(6px);
  pointer-events: none;
  transition: opacity 320ms var(--curva),
              transform 320ms var(--curva),
              filter 320ms var(--curva);
}

#linhas .linha:hover .linha__carimbo {
  opacity: .22;
  transform: scale(1);
  filter: blur(0);
}

/* ---------------------------------------------------------- pé do card -- */
/* Descrição fora da placa, em Taupe (.legenda já cuida disso). */
#linhas .linha__desc {
  flex: 1 1 auto;
  margin-top: 14px;
}

/* Código de peça em mono, alinhado à direita, separado por filete de 1px. */
#linhas .linha__ref {
  position: relative;
  margin-top: 12px;
  padding-top: 11px;
  text-align: right;
  color: var(--taupe);
}

#linhas .linha__ref::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--chumbo);
  transition: height 320ms var(--curva), background-color 320ms linear;
}

/* --vermelho sobre fundo escuro só como preenchimento, filete ou glifo.
   Aqui é filete: permitido. */
#linhas .linha:hover .linha__ref::before {
  height: 3px;
  background: var(--vermelho);
}

/* ------------------------------------------------------------- motion -- */
/* .revela e o IntersectionObserver (dispara uma vez só) vêm do app.js.
   A direção pediu 16px de deslocamento e 60ms de stagger; a base entrega 18px
   e o observador injeta --atraso em passos de 80ms. Corrigimos os dois aqui
   sem tocar em base.css: 80ms * .75 = 60ms.
   O seletor com id ganha de .revela.visivel, então a volta ao repouso precisa
   ser reescrita junto. */
#linhas .revela { transform: translateY(16px); transition-delay: calc(var(--atraso, 0ms) * .75); }
#linhas .revela.visivel { transform: none; }

@media (prefers-reduced-motion: reduce) {
  #linhas .revela { transform: none; }
  #linhas .linha__quadro img,
  #linhas .linha:hover .linha__quadro img { transform: none; }
  #linhas .linha__carimbo,
  #linhas .linha:hover .linha__carimbo { transform: none; filter: none; }
  #linhas .linha__carimbo { opacity: 0; }
  #linhas .linha:hover .linha__carimbo { opacity: .22; }
}

/* --------------------------------------------------------- ajuste fino -- */
/* Coluna única muito estreita (360px): o nome cai para o corpo de texto para
   não quebrar em três linhas dentro da foto. */
@media (max-width: 400px) {
  #linhas .linha__nome { font-size: var(--t-corpo); }
}

/* Duas colunas em tablet: o nome ainda precisa caber em duas linhas. */
@media (min-width: 700px) and (max-width: 860px) {
  #linhas .linha__nome { font-size: var(--t-corpo); }
}

/* ===== curral/assets/css/secoes/marca.css ===== */
/* ==========================================================================
   #marca — 02 · Conectando o campo e a cidade
   Primeira quebra clara da pasta: fundo Osso de borda a borda, como a
   etiqueta de gola creme costurada por dentro da peça preta. Respiro duplo,
   split 45/55 e o still sangrando na borda direita — sempre dentro da placa.
   Todo seletor prefixado por #marca. Nenhuma cor, fonte ou escala nova:
   só token ou derivação comentada.
   ========================================================================== */

#marca {
  /* Distância da borda da página até a coluna de texto — o mesmo recuo da
     .container, recalculado aqui porque o spread precisa sangrar à direita e
     por isso não pode ser um .container. */
  --margem-pasta: max(var(--gutter), calc((100% - var(--container)) / 2));

  /* Moldura das duas pranchas e recuo da legenda: um valor só, para as fotos e
     as legendas compartilharem a mesma linha vertical na direita. */
  --moldura-prancha: 14px;

  padding-block: var(--respiro-duplo);   /* o dobro do respiro padrão */
  scroll-margin-top: calc(var(--altura-header-compacto) + var(--altura-marquee));
}

/* Fólio no canto INFERIOR direito (o padrão de base.css é no topo),
   levemente cortado pela base — cara de página impressa aparada. */
#marca .manifesto__folio {
  top: auto;
  bottom: -.05em;
}

/* ------------------------------------------------------------- spread -- */
#marca .manifesto__spread {
  position: relative;
  z-index: 1;                            /* acima do fólio */
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;                    /* foto alinhada ao topo */
  /* Simétrico com a .container nos dois lados. A versão anterior deixava
     `margin-inline-end: 0` para as pranchas sangrarem pela direita, mas a
     sangria cortava a prancha menor no meio — lida como foto fora de
     enquadramento, não como decisão editorial. */
  margin-inline: var(--margem-pasta);
}

/* -------------------------------------------------------------- texto -- */
#marca .manifesto__texto { max-width: 52ch; }

#marca .manifesto__titulo { margin-block: .5rem clamp(1.75rem, 3.5vw, 2.5rem); }

#marca .manifesto__abertura,
#marca .manifesto__corpo,
#marca .manifesto__camada-texto {
  /* 19px: o corpo do manifesto sobe um passo sobre --t-corpo (18px). É a
     única seção com esse ganho — o texto aqui É o argumento. */
  font-size: calc(var(--t-corpo) + .0625rem);
  line-height: 1.6;
  color: var(--grafite);
}

/* Capitular de 3 linhas em Bodoni.
   3 linhas × (19px × 1.6) = 91px de caixa. A caixa alta da Bodoni ocupa
   ~0,70em, daí font-size 6.8em (≈129px) com line-height .70 (≈90px de bloco).
   Bem acima do piso de 28px da didone. */
#marca .manifesto__abertura::first-letter {
  float: left;
  font-family: var(--fonte-didone);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 6.8em;
  line-height: .7;
  letter-spacing: -.02em;
  color: var(--preto);
  padding-inline-end: .06em;
  margin-block-start: .09em;   /* alinha a caixa alta da capitular à 1ª linha */
}

#marca .manifesto__costura { margin-block: clamp(2rem, 4vw, 2.75rem); }

#marca .manifesto__subtitulo {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 1.375rem;                   /* 22px — degrau entre corpo e --t-secao */
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--preto);
  margin-bottom: .75rem;
}

/* ------------------------------------------------- as duas linguagens -- */
#marca .manifesto__camadas {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

#marca .manifesto__camada {
  position: relative;
  padding-inline-start: 18px;
}

/* Filete Vermelho Ferro como PREENCHIMENTO — o vermelho de marca sobre osso
   tem 5,86:1, então aqui ele também poderia ser texto; segue como filete
   para não competir com a citação de fecho. */
#marca .manifesto__camada::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: .25em;
  width: 3px;
  height: 1.15em;
  background: var(--vermelho);
}

#marca .manifesto__camada-nome {
  color: var(--vermelho);
  text-transform: none;                  /* preserva "WILD and ROWDY™" */
  margin-bottom: .35rem;
}

/* ------------------------------------------------------------ citação -- */
#marca .manifesto__citacao {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  text-align: center;
  color: var(--preto);
}

/* Filete 48×3px acima da citação. */
#marca .manifesto__citacao::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--vermelho);
}

/* --------------------------------------------------------------- fotos -- */
/* As duas pranchas da página direita: a grande (4:5) e a prancha menor da
   linha feminina, ambas encostadas na borda direita — a lombada fica à
   esquerda, a sangria à direita. Still de estúdio só dentro da .placa. */
#marca .manifesto__pranchas {
  justify-self: end;
  width: 100%;
  /* 40rem = 640px = a largura nativa do WebP da prancha grande. A 48rem ela
     renderizava a 740px, ou seja, 16% de ampliação: a foto grande saía visi-
     velmente mais mole que a pequena, que tem candidato de 1280px no srcset.
     Aqui as duas param de ser ampliadas. */
  max-width: 40rem;
}

/* 68%, não 50%: em metade exata da largura a prancha feminina lia como
   miniatura de rodapé em vez de segunda peça do par — e o par é o argumento da
   seção ("duas linguagens, uma marca"). A 68% ela mantém a hierarquia (a
   masculina segue dominante) sem virar nota de pé de página. */
#marca .manifesto__figura--par {
  width: 68%;
  min-width: 15rem;
  margin-inline-start: auto;             /* alinha a borda direita com a grande */
  margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
}

/* UMA borda direita para as duas pranchas.
   A prancha menor usa .placa--fina (10px) e a grande .placa (14px): as molduras
   coincidiam na sangria, mas as FOTOS dentro delas paravam em pontos diferentes
   (4px de degrau), e a legenda, com `padding-inline-end: var(--gutter)`, parava
   40px antes das duas. Eram três linhas verticais quase alinhadas — o olho lê
   isso como erro, não como decisão. Aqui a moldura das duas volta a 14px, e a
   legenda passa a alinhar com a foto, não com o gutter da página. */
#marca .manifesto__placa { padding: var(--moldura-prancha); }

/* Na prancha menor a legenda empilha: dois campos curtos lado a lado
   quebrariam feio numa coluna estreita. */
#marca .manifesto__figura--par .manifesto__legenda {
  display: grid;
  gap: .25rem;
  justify-content: start;
}

/* Sem wash, sem gradiente, sem overlay: o still entra limpo dentro da placa.
   O enquadramento sobe um pouco para preservar o rosto no corte 4:5. */
#marca .manifesto__figura--capa .manifesto__placa img { object-position: 50% 32%; }
/* A prancha menor já é 3:4 nativo — corte zero. */
#marca .manifesto__figura--par .manifesto__placa img { object-position: 50% 30%; }

#marca .manifesto__legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .375rem 1.5rem;
  margin-top: 12px;
  /* Alinha com a foto de dentro da placa, não com o gutter da página. */
  padding-inline: var(--moldura-prancha);
}

#marca .manifesto__cod {
  color: var(--chumbo);
  white-space: nowrap;
}

/* ------------------------------------------------------------- pilha -- */
@media (max-width: 1080px) {
  #marca .manifesto__spread {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(2.5rem, 8vw, 3.5rem);
  }

  /* O recuo da direita agora vem do próprio spread (`margin-inline`), então
     aqui só cai a medida de leitura. */
  #marca .manifesto__texto { max-width: none; }

  /* Empilhada, a prancha pode ocupar a coluna inteira, mas nunca passar dos
     640px nativos do WebP. */
  #marca .manifesto__pranchas { max-width: 40rem; }

  /* Empilhada, a prancha grande volta ao 3:4 nativo: ganha altura e a seção
     mantém peso de imagem sem esticar um arquivo de 640px. */
  #marca .manifesto__figura--capa .manifesto__placa {
    aspect-ratio: 3 / 4;
  }

  #marca .manifesto__figura--par { width: 62%; }
}

@media (max-width: 560px) {
  /* Capitular menor: em 3 linhas de coluna estreita ela engoliria o parágrafo. */
  #marca .manifesto__abertura::first-letter { font-size: 5.2em; }

  #marca .manifesto__legenda {
    justify-content: flex-start;
    gap: .25rem 1rem;
  }
}

/* ===== curral/assets/css/secoes/prova.css ===== */
/* ==========================================================================
   #prova — 01 · A marca já roda
   Continuação escura da capa (--preto), não uma seção nova. Duas provas
   fotográficas dentro da placa de catálogo + quatro provas em bloco grafite
   com filete Brasa. Divisor de pesponto fecha. Zero cor fora de token.
   ========================================================================== */

/* O topo respira menos que uma seção normal: a dobra da capa continua aqui.
   Frações de --respiro em vez de valores novos. O rodapé também encolhe:
   a seção é densa de imagem de propósito. */
#prova {
  padding-block-start: calc(var(--respiro) * .45);
  padding-block-end: calc(var(--respiro) * .75);
}

/* O fólio "01" sobe um pouco para não bater no cabeçalho encurtado. */
#prova .folio { top: calc(var(--respiro) * .1); }

/* ------------------------------------------------------------ cabeçalho -- */
#prova .prova__titulo { margin-block: .75rem 1.25rem; }

#prova .prova__lead {
  color: var(--taupe);
  text-wrap: pretty;
}

/* ------------------------------------------- provas fotográficas (placa) -- */
#prova .prova__exibicao {
  display: grid;
  grid-template-columns: 1fr;
  /* Gutter curto de propósito: as duas placas leem como uma página dupla. */
  gap: clamp(.75rem, 1.6vw, 1.25rem);
  margin-block-start: clamp(2rem, 3.6vw, 2.75rem);
  /* Acima de --container sobra margem morta nas laterais. A prancha das fotos
     avança até 96px para cada lado — sempre descontando --gutter, para nunca
     encostar na borda da viewport nem criar rolagem horizontal. */
  --avanco: clamp(0px, calc((100vw - var(--container)) / 2 - var(--gutter)), 96px);
  margin-inline: calc(var(--avanco) * -1);
}

/* Abaixo de 900px as placas ficam uma por linha: a foto grande vale mais que
   a página dupla, e o arquivo nativo (605–640px) ainda cobre a largura. */
@media (min-width: 900px) {
  #prova .prova__exibicao { grid-template-columns: 1fr 1fr; }
}

/* .placa já entrega o fundo osso-sombra e o inset de 14px.
   Aqui só garanto que a legenda impressa na placa herde texto escuro. */
#prova .prova__placa {
  color: var(--preto);
  align-self: start;
}

#prova .prova__legenda {
  margin-block-start: 12px;
  padding-inline: 2px;
  max-width: 44ch;
}

#prova .prova__fig {
  display: block;
  margin-block-end: 4px;
  color: var(--vermelho);   /* 4,53:1 sobre --osso-sombra — vermelho é o acento do claro */
}

/* --------------------------------------------------- quatro provas-texto -- */
#prova .prova__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-block-start: clamp(2rem, 3.6vw, 2.75rem);
}

@media (min-width: 640px) {
  #prova .prova__lista { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  #prova .prova__lista { grid-template-columns: repeat(4, 1fr); }
}

#prova .prova__item {
  background: var(--grafite);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  min-width: 0;
}

/* Filete Brasa de 24x3 no topo do bloco: preenchimento, não texto. */
#prova .prova__item::before {
  content: '';
  display: block;
  width: 24px;
  height: 3px;
  background: var(--brasa);
  margin-block-end: clamp(1rem, 1.6vw, 1.25rem);
}

#prova .prova__rotulo {
  color: var(--brasa);      /* 4,56:1 sobre --grafite — texto vermelho só em Brasa */
  margin-block-end: .625rem;
}

#prova .prova__frase {
  color: var(--taupe);
  font-weight: 400;
  /* 16px: um degrau abaixo de --t-corpo (18px), sem inventar escala nova. */
  font-size: calc(var(--t-corpo) - .125rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ------------------------------ crossfade de uma prova por vez no mobile -- */
/* Só entra quando o JS da seção liga .em-crossfade. Sem JS, as quatro provas
   ficam empilhadas normalmente — a prova nunca depende de script. */
#prova .prova__lista.em-crossfade { grid-template-columns: 1fr; }

#prova .prova__lista.em-crossfade > .prova__item {
  grid-area: 1 / 1;
  opacity: 0;
  transform: none;
  pointer-events: none;
  transition: opacity .45s var(--curva-swap);
}

#prova .prova__lista.em-crossfade > .prova__item.ativa {
  opacity: 1;
  pointer-events: auto;
}

#prova .prova__pontos {
  display: flex;
  justify-content: center;
  gap: .25rem;
  margin-block-start: .5rem;
}

#prova .prova__pontos[hidden] { display: none; }

/* Alvo de toque de 44px com um traço de 24x3 dentro — o mesmo filete do bloco. */
#prova .prova__ponto {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
}

#prova .prova__ponto::before {
  content: '';
  display: block;
  width: 24px;
  height: 3px;
  background: var(--chumbo);
  transition: background-color 180ms linear;
}

#prova .prova__ponto[aria-pressed='true']::before { background: var(--brasa); }

@media (prefers-reduced-motion: reduce) {
  #prova .prova__lista.em-crossfade > .prova__item { opacity: 1; pointer-events: auto; }
}

/* ---------------------------------------------------------------- fecho -- */
#prova .prova__fecho {
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 68ch;
  color: var(--taupe);
  font-size: calc(var(--t-corpo) - .125rem);
  line-height: 1.55;
}

#prova .prova__perfil {
  color: var(--osso);
  font-weight: 600;
  font-stretch: 112%;
}

#prova .prova__divisor { margin-block-start: clamp(1.75rem, 3.2vw, 2.5rem); }

/* ===== curral/assets/css/secoes/representante.css ===== */
/* ==========================================================================
   08 — Representante oficial: Curral de Dados
   Seção de conversão: o maior contraste da página e o único formulário.
   Todos os seletores prefixados por #representante. Nenhuma cor, fonte ou
   escala nova — só tokens de base.css e derivações comentadas.
   ========================================================================== */

#representante {
  /* O topo fixo (72px) mais o marquee (34px) não podem cobrir o título
     quando o link "Representante" leva até aqui. */
  scroll-margin-top: calc(var(--altura-header) + var(--altura-marquee));
}

/* O carimbo ocupa o canto superior direito nesta seção. O fólio troca de
   lado só aqui para não brigar com ele — em todas as outras fica à direita. */
#representante > .folio {
  right: auto;
  left: var(--gutter);
}

/* ------------------------------------------------------------ cabeçalho -- */
#representante .rep__topo {
  margin-bottom: clamp(2.5rem, 4vw, 3.75rem);
}

#representante .rep__topo .pesponto {
  margin-top: 1rem;
}

/* ---------------------------------------------------------------- grade -- */
#representante .rep__grade {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
}

@media (min-width: 900px) {
  #representante .rep__grade {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }
}

/* ----------------------------------------------------------- identidade -- */
#representante .rep__posicionamento {
  margin-top: 1.25rem;
  color: var(--taupe);
}

#representante .rep__ficha {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  border-top: 1px dotted var(--chumbo);
}

#representante .rep__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1.5rem;
  min-height: 60px;            /* mantém as quatro linhas no mesmo ritmo */
  padding-block: .5rem;
  border-bottom: 1px dotted var(--chumbo);
}

#representante .rep__campo {
  color: var(--taupe);
  flex: 0 0 auto;
}

#representante .rep__valor {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Alvo de toque de 44px sem inflar a altura visual da linha. */
#representante .rep__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --------------------------------------------------------------- painel -- */
#representante .rep__painel {
  position: relative;
}

/* --------------------------------------------------------------- carimbo -- */
/* Único elemento rotacionado da página inteira — some abaixo de 900px. */
#representante .rep__carimbo {
  display: none;
}

@media (min-width: 900px) {
  /* O carimbo é a "cabeça" da coluna direita: o formulário desce para
     receber a impressão em vez de ser coberto por ela. */
  #representante .rep__painel {
    padding-top: 5.25rem;
  }

  #representante .rep__carimbo {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 168px;
    height: 168px;
    transform: translate(8%, -70%) rotate(-6deg);
    pointer-events: none;
  }
}

/* Anéis: vermelho de marca como FILETE sobre escuro (permitido). */
#representante .rep__anel {
  fill: none;
  stroke: var(--vermelho);
  stroke-width: 2.2;
}

#representante .rep__anel--fino {
  stroke-width: 1;
}

/* Texto e glifo sobre escuro: obrigatoriamente brasa, nunca o vermelho. */
#representante .rep__carimbo-texto,
#representante .rep__carimbo-ano {
  fill: var(--brasa);
  font-family: var(--fonte-mono);
  font-weight: 500;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

#representante .rep__carimbo-texto {
  font-size: 12px;          /* 12 unidades de viewBox = 10px renderizados */
  letter-spacing: .16em;
  text-anchor: middle;
}

#representante .rep__carimbo-ano {
  font-size: 15px;          /* 15 unidades de viewBox = 12,6px renderizados */
  letter-spacing: .14em;
}

#representante .rep__carimbo-mono {
  color: var(--brasa);
  fill: var(--brasa);
}

#representante .rep__carimbo-filete {
  stroke: var(--vermelho);
  stroke-width: 1;
}

/* ----------------------------------------------------------- formulário -- */
/* Sem caixa: cada campo é só um filete inferior que acende no foco. */
#representante .rep__form {
  display: grid;
  gap: 1.25rem;
}

#representante .rep__campo-bloco {
  display: grid;
  gap: .375rem;
}

#representante .rep__rotulo {
  /* 11px: um degrau abaixo do --t-mono (12px), derivado dele. */
  font-size: calc(var(--t-mono) - 1px);
  color: var(--taupe);
  transition: color 180ms linear;
}

#representante .rep__campo-bloco:focus-within .rep__rotulo {
  color: var(--osso);
}

#representante .rep__input {
  width: 100%;
  min-height: 44px;
  padding: .5rem 0 .625rem;
  border: 0;
  border-bottom: 1px solid var(--chumbo);
  border-radius: 0;
  background: transparent;
  color: var(--osso);
  font-family: var(--fonte-texto);
  font-weight: 400;
  font-size: var(--t-corpo);
  line-height: 1.4;
  transition: border-color 180ms linear;
}

#representante .rep__input:hover {
  border-bottom-color: var(--taupe);
}

#representante .rep__input:focus {
  outline: 0;
  border-bottom-color: var(--brasa);
}

/* O foco de teclado continua tendo o anel do sistema de base.css. */
#representante .rep__input:focus-visible {
  outline: 2px solid var(--brasa);
  outline-offset: 3px;
}

/* Autofill do Chrome pinta o campo de branco: devolvemos o fundo da seção. */
#representante .rep__input:-webkit-autofill,
#representante .rep__input:-webkit-autofill:hover,
#representante .rep__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--osso);
  -webkit-box-shadow: 0 0 0 1000px var(--preto) inset;
  caret-color: var(--osso);
}

/* ------------------------------------------------------------- seletor --- */
#representante .rep__seletor {
  position: relative;
  display: block;
}

#representante .rep__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

/* Enquanto a opção vazia estiver marcada, o select é :invalid (required). */
#representante .rep__select:invalid {
  color: var(--taupe);
}

#representante .rep__select option {
  background: var(--grafite);
  color: var(--osso);
}

/* Seta em SVG aplicada como máscara para a cor sair de um token, não de um
   hex cravado dentro do data-URI. */
#representante .rep__seletor::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 14px;
  height: 8px;
  transform: translateY(-50%);
  pointer-events: none;
  background-color: var(--taupe);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-color 180ms linear;
}

#representante .rep__seletor:focus-within::after {
  background-color: var(--brasa);
}

/* --------------------------------------------------------------- botão --- */
#representante .rep__enviar {
  width: 100%;
  min-height: 56px;
  margin-top: .5rem;
  font-size: var(--t-legenda);   /* 15px */
  letter-spacing: .08em;
}

/* ------------------------------------------------------ notas e atalho --- */
/* Archivo, não mono: é frase corrida, e mono não entra em parágrafo.
   13px = --t-rotulo, o menor degrau de texto que existe nos tokens. */
#representante .rep__nota {
  font-size: var(--t-rotulo);
  line-height: 1.5;
  color: var(--taupe);
}

#representante .rep__agora {
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  padding-top: clamp(1rem, 1.8vw, 1.5rem);
  border-top: 1px dotted var(--chumbo);
  font-size: var(--t-legenda);
  color: var(--taupe);
}

#representante .rep__agora .rep__link {
  color: var(--osso);
  font-weight: 600;
}

/* Número em texto: selecionável de uma vez e copiável. */
#representante .rep__numero {
  display: inline-block;
  margin-left: .5rem;
  color: var(--osso);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  user-select: all;
  -webkit-user-select: all;
}

/* ----------------------------------------------------------- a pasta ----- */
#representante .rep__pasta {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

/* Título e linha de apoio dividem a mesma faixa: a prancha manda na altura
   da seção, o texto só a legenda. */
#representante .rep__pasta-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .375rem 2rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

#representante .rep__pasta-linha {
  flex: 1 1 32ch;
  max-width: 62ch;
  text-align: right;
}

#representante .rep__pasta-titulo {
  color: var(--osso);
}

/* Prancha de catálogo: a pasta aberta de ponta a ponta da mesa. Sangra a
   largura toda (é moldura, não still solto) e tem teto para não explodir
   em telas ultralargas. */
#representante .rep__prancha {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: min(100%, 1920px);
  margin-inline: auto;
}

@media (min-width: 760px) {
  #representante .rep__prancha {
    grid-template-columns: 1fr 1fr;
  }
}

#representante .rep__janela {
  background: var(--preto);      /* fundo da janela enquanto a foto carrega */
}

#representante .rep__creditos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .125rem 1.5rem;
  padding: .75rem .125rem .125rem;
}

#representante .rep__peca {
  color: var(--preto);
}

#representante .rep__cod {
  color: var(--chumbo);
}

/* ===== curral/assets/css/secoes/sortimento.css ===== */
/* ==========================================================================
   #sortimento — "06 — Sortimento e o que consultar"
   A página técnica da pasta: a tabela que o lojista lê de verdade.
   Fundo Osso Sombra (terceiro nível do claro), sem zebra colorida — só filete.
   Desktop: tabela de 5 colunas na largura do container.
   Até 1024px: cards empilhados, rótulo mono à esquerda, valor à direita.
   Todos os seletores prefixados por #sortimento. Nenhuma cor ou família nova.
   ========================================================================== */

/* ------------------------------------------------------------- cabeça -- */
#sortimento .sortimento__cabeca {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

#sortimento .sortimento__intro {
  color: var(--chumbo);
  text-wrap: pretty;
}

#sortimento .sortimento__intro em {
  font-style: normal;
  font-weight: 600;
  color: var(--preto);
}

/* ------------------------------------------------------------- tabela -- */
#sortimento .sortimento__quadro {
  /* Sem overflow declarado de propósito: overflow rolável aqui mataria o
     thead sticky, e a versão mobile é card — nunca tabela com scroll lateral. */
  width: 100%;
}

/* A tabela sai 14px para fora do container e devolve os mesmos 14px como
   padding da primeira coluna: é a calha onde o bloco vermelho do hover
   encosta sem ser coberto pela moldura do thumb. O alinhamento visual das
   colunas com o container fica intacto. */
#sortimento .sortimento__tabela {
  table-layout: fixed;
  width: calc(100% + 14px);
  margin-left: -14px;
  border-collapse: collapse;
  text-align: left;
}

/* Cabeçalho: mono 11px. Fica ABAIXO do teto de 14px do IBM Plex Mono, e o
   11px é derivado de --t-mono (12px) para caber o tracking de .14em. */
#sortimento .sortimento__tabela thead th {
  position: sticky;
  top: calc(var(--altura-marquee) + var(--altura-header-compacto));
  z-index: 2;
  background: var(--osso-sombra);
  padding: 0 1.5rem 12px 0;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--chumbo);
  vertical-align: bottom;
  /* box-shadow em vez de border-bottom: borda em th sticky descola ao rolar. */
  box-shadow: inset 0 -2px 0 var(--preto);
}

#sortimento .sortimento__tabela thead th:first-child { padding-left: 14px; }
#sortimento .sortimento__tabela thead th:last-child  { padding-right: 0; }

#sortimento .sortimento__tabela thead th:nth-child(1) { width: 23%; }
#sortimento .sortimento__tabela thead th:nth-child(2) { width: 32%; }
#sortimento .sortimento__tabela thead th:nth-child(3) { width: 16%; }
#sortimento .sortimento__tabela thead th:nth-child(4) { width: 15%; }
#sortimento .sortimento__tabela thead th:nth-child(5) { width: 14%; }

#sortimento .sortimento__tabela tbody th,
#sortimento .sortimento__tabela tbody td {
  padding: 20px 1.5rem 20px 0;
  vertical-align: top;
  font-weight: 400;
  border-top: 1px solid var(--taupe);
  transition: background-color 140ms linear, box-shadow 140ms linear;
}

/* A primeira linha do corpo encosta no filete de 2px do cabeçalho. */
#sortimento .sortimento__tabela tbody tr:first-child th,
#sortimento .sortimento__tabela tbody tr:first-child td { border-top: 0; }

#sortimento .sortimento__tabela tbody th:first-child { padding-left: 14px; }
#sortimento .sortimento__tabela tbody td:last-child  { padding-right: 0; }

/* Hover da linha: fundo Osso e bloco Vermelho Ferro de 4px encostado na
   borda esquerda. Vermelho aqui é PREENCHIMENTO sobre claro — permitido. */
@media (hover: hover) {
  #sortimento .sortimento__tabela tbody tr:hover th,
  #sortimento .sortimento__tabela tbody tr:hover td { background: var(--osso); }

  #sortimento .sortimento__tabela tbody tr:hover th:first-child {
    box-shadow: inset 4px 0 0 var(--vermelho);
  }
}

/* --------------------------------------------------- coluna 1: a linha -- */
#sortimento .sortimento__linha {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Moldura reduzida: .placa usa padding de 14px, desproporcional num thumb
   deste tamanho. 4px mantém a leitura de moldura na escala certa. O fundo é
   --osso-claro (superfície elevada) para a placa não sumir no Osso Sombra. */
#sortimento .sortimento__thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 88px;
  padding: 4px;
  background: var(--osso-claro);
  box-shadow: inset 0 0 0 1px var(--taupe);
}

/* Retrato 64×80 em vez de um quadrado de 48: os stills são de corpo inteiro,
   e num quadrado pequeno a peça virava um borrão. O recorte sobe para 34% —
   ombro e peito, onde estão gola, monograma e estampa. */
#sortimento .sortimento__thumb img {
  width: 64px;
  height: 80px;
  object-fit: cover;
  object-position: 50% 34%;
}

#sortimento .sortimento__nome {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: var(--t-legenda);
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--preto);
  text-wrap: balance;
}

/* ----------------------------------------------------- células comuns -- */
#sortimento .sortimento__valor {
  display: block;
  color: var(--chumbo);
  text-wrap: pretty;
}

#sortimento .sortimento__extra {
  display: block;
  color: var(--chumbo);
  font-size: var(--t-rotulo);
}

/* Coluna REFERÊNCIAS: mono no teto de 14px, tabular, alinhada à direita. */
#sortimento .sortimento__col-ref { text-align: right; }

#sortimento .sortimento__ref-grupo { display: block; }

#sortimento .sortimento__ref {
  display: block;
  font-size: .875rem;          /* 14px — teto do IBM Plex Mono */
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--preto);
  white-space: nowrap;
}

/* Contagem por catálogo, uma linha abaixo da faixa de códigos. Só aparece
   onde o número vem de UM catálogo — faixa que atravessa catálogos não soma. */
#sortimento .sortimento__conta {
  display: block;
  margin-top: 3px;
  font-size: var(--t-mono);
  letter-spacing: .1em;
  line-height: 1.4;
  color: var(--chumbo);
  white-space: nowrap;
}

#sortimento .sortimento__grade {
  display: block;
  font-size: var(--t-legenda);
  line-height: 1.45;
  font-weight: 600;
  color: var(--preto);
}

/* O que não está fechado no catálogo lê mais baixo, de propósito. */
#sortimento .sortimento__grade--consultar {
  font-weight: 400;
  color: var(--chumbo);
}

/* Rótulos mono só existem no modo card. */
#sortimento .sortimento__rotulo { display: none; }

/* -------------------------------------------------------------- fecho -- */
#sortimento .sortimento__fecho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  box-shadow: inset 0 1px 0 var(--taupe);
}

/* Microtexto legal — o único parágrafo em mono da seção, dentro da regra:
   12px, caixa baixa (o .codigo global é caixa alta e não serve aqui). */
#sortimento .sortimento__nota {
  flex: 1 1 34ch;
  max-width: 66ch;
  font-family: var(--fonte-mono);
  font-weight: 400;
  font-size: var(--t-mono);
  line-height: 1.7;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--chumbo);
  text-wrap: pretty;
}

#sortimento .sortimento__acao {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
}

#sortimento .sortimento__cta { min-height: 48px; }

#sortimento .sortimento__regiao {
  max-width: 42ch;
  color: var(--chumbo);
}

/* ==========================================================================
   Até 1024px: cards empilhados. Zero scroll horizontal de tabela.
   O corte é 1024 e não 900 porque abaixo disso as cinco colunas espremem o
   nome da linha em três linhas — deixa de ser tabela e vira ruído.
   ========================================================================== */
@media (max-width: 1024px) {
  #sortimento .sortimento__tabela { width: 100%; margin-left: 0; }

  #sortimento .sortimento__tabela,
  #sortimento .sortimento__tabela tbody,
  #sortimento .sortimento__tabela tr,
  #sortimento .sortimento__tabela tbody th,
  #sortimento .sortimento__tabela tbody td { display: block; width: 100%; }

  /* O cabeçalho vira só rótulo de leitor de tela; os rótulos passam a viver
     dentro de cada célula, em mono, à esquerda. */
  #sortimento .sortimento__tabela thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #sortimento .sortimento__tabela tr {
    margin-bottom: 18px;
    padding: 0 16px 16px;
    background: var(--osso-claro);
    box-shadow: inset 0 2px 0 var(--preto);
  }

  #sortimento .sortimento__tabela tbody tr:last-child { margin-bottom: 0; }

  #sortimento .sortimento__tabela tbody th,
  #sortimento .sortimento__tabela tbody td {
    padding: 14px 0;
    border-top: 1px solid var(--taupe);
  }

  #sortimento .sortimento__tabela tbody tr th:first-child { padding: 18px 0 14px; }

  #sortimento .sortimento__tabela tbody tr:first-child th,
  #sortimento .sortimento__tabela tbody tr:first-child td { border-top: 1px solid var(--taupe); }

  #sortimento .sortimento__tabela tbody tr th:first-child { border-top: 0; }

  /* Rótulo mono à esquerda, valor à direita. */
  #sortimento .sortimento__rotulo {
    display: block;
    flex: 0 0 auto;
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--chumbo);
    padding-top: 2px;
  }

  #sortimento .sortimento__tabela tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.25rem;
  }

  #sortimento .sortimento__tabela tbody td > :not(.sortimento__rotulo) {
    text-align: right;
  }

  #sortimento .sortimento__col-ref { text-align: inherit; }

  /* No card, faixa de códigos e contagem viajam juntas, coladas à direita. */
  #sortimento .sortimento__ref-grupo {
    display: flex;
    align-items: baseline;
    gap: .75rem;
  }
  #sortimento .sortimento__conta { margin-top: 0; }

  #sortimento .sortimento__extra { display: inline; }
  #sortimento .sortimento__extra::before { content: ' '; }

  /* Exceção deliberada: a descrição é longa demais para viver à direita.
     Rótulo em cima, texto corrido embaixo, alinhado à esquerda. */
  #sortimento .sortimento__tabela tbody td:nth-of-type(1) {
    display: block;
  }
  #sortimento .sortimento__tabela tbody td:nth-of-type(1) .sortimento__rotulo {
    margin-bottom: 6px;
  }
  #sortimento .sortimento__tabela tbody td:nth-of-type(1) .sortimento__valor {
    text-align: left;
    max-width: 72ch;   /* card largo em tablet: segura a medida de leitura */
  }

  #sortimento .sortimento__fecho { align-items: flex-start; }
}

@media (max-width: 420px) {
  #sortimento .sortimento__tabela tbody td {
    display: block;
  }
  #sortimento .sortimento__tabela tbody td .sortimento__rotulo { margin-bottom: 4px; }
  #sortimento .sortimento__tabela tbody td > :not(.sortimento__rotulo) { text-align: left; }
  #sortimento .sortimento__col-ref { text-align: left; }
  #sortimento .sortimento__ref { white-space: normal; }
  #sortimento .sortimento__ref-grupo { justify-content: flex-start; }
  #sortimento .sortimento__cta { width: 100%; }
}

/* Telas largas: a tabela não engorda além do container, mas o respiro sim. */
@media (min-width: 1440px) {
  #sortimento .sortimento__tabela tbody th,
  #sortimento .sortimento__tabela tbody td { padding-block: 24px; }
}