/* =========================================================================
   JOMARCA KITS — main.css
   Arquivo unico e sem build step. Ordem: tokens, base, componentes, secoes.
   Tokens espelham specs/design.md. Nao alterar valores sem atualizar a spec.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. FONTE
   Montserrat variavel, subset latin, hospedada localmente (sem Google Fonts).
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-variable-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;
}

/* -------------------------------------------------------------------------
   2. TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Paleta oficial — imagens-site/paleta-jomarca-kits.png */
  --azul-900: #002559;
  --azul-700: #003485;
  --azul-500: #1155be;
  --azul-100: #e5edf8;

  --amarelo-500: #f4ce0f;
  --amarelo-600: #d9b60a;
  --amarelo-100: #fff6d1;

  --branco: #ffffff;
  --cinza-50: #f7f8fa;
  --cinza-200: #e3e6eb;
  --cinza-500: #6b7280;
  --cinza-900: #111827;

  /* Tipografia fluida */
  --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --fs-h1: clamp(2rem, 1.45rem + 2.2vw, 3.25rem);
  --fs-h2: clamp(1.625rem, 1.28rem + 1.4vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.625rem);
  --fs-lg: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --fs-base: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);
  --fs-sm: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
  --fs-xs: clamp(0.75rem, 0.74rem + 0.06vw, 0.8125rem);

  /* Espacamento — escala base 8px */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px;  --e-6: 32px;  --e-7: 48px;  --e-8: 64px;
  --e-9: 96px;  --e-10: 128px;

  --secao-y: var(--e-8);
  --container: 1280px;
  --gutter: var(--e-5);

  --raio-sm: 4px;
  --raio-md: 8px;
  --raio-lg: 12px;

  --sombra-sm: 0 1px 2px rgba(0, 37, 89, 0.06);
  --sombra-md: 0 4px 16px rgba(0, 37, 89, 0.08);
  --sombra-lg: 0 12px 32px rgba(0, 37, 89, 0.12);

  --transicao: 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
  --header-h: 68px;
}

@media (min-width: 768px) {
  :root { --secao-y: var(--e-9); --gutter: var(--e-6); }
}
@media (min-width: 1024px) {
  :root { --secao-y: var(--e-10); --gutter: var(--e-7); --header-h: 84px; }
}

/* -------------------------------------------------------------------------
   3. RESET E BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--e-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--cinza-900);
  background: var(--branco);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--e-4);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }

p { margin: 0 0 var(--e-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--azul-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--azul-500); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--e-4); padding-left: 1.25em; }
li { margin-bottom: var(--e-2); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--azul-500);
  outline-offset: 2px;
  border-radius: 2px;
}

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

.secao { padding-block: var(--secao-y); }
.secao--cinza { background: var(--cinza-50); }
.secao--azul-claro { background: var(--azul-100); }
.secao--escura { background: var(--azul-900); color: var(--branco); }
.secao--escura h2, .secao--escura h3 { color: var(--branco); }
/* :not(.btn) é obrigatório: sem ele esta regra vence a cor do botão primário
   por especificidade e o rótulo fica amarelo sobre fundo amarelo. */
.secao--escura a:not(.btn) { color: var(--amarelo-500); }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.pular-conteudo {
  position: absolute;
  top: -100px; left: var(--e-4);
  z-index: 200;
  padding: var(--e-3) var(--e-5);
  background: var(--amarelo-500);
  color: var(--azul-900);
  font-weight: 600;
  border-radius: 0 0 var(--raio-md) var(--raio-md);
  transition: top var(--transicao);
}
.pular-conteudo:focus { top: 0; }

.eyebrow {
  display: block;
  margin-bottom: var(--e-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azul-700);
}
.secao--escura .eyebrow { color: var(--amarelo-500); }

.secao__cabecalho { max-width: 720px; margin-bottom: var(--e-7); }
.secao__cabecalho p { font-size: var(--fs-lg); color: var(--cinza-500); }
.secao--escura .secao__cabecalho p { color: rgba(255, 255, 255, 0.82); }

.filete {
  display: block;
  width: 56px; height: 3px;
  background: var(--amarelo-500);
  margin-bottom: var(--e-5);
  border-radius: 2px;
}

/* -------------------------------------------------------------------------
   5. BOTOES
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: var(--raio-md);
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao),
    border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.btn svg { flex: none; }

.btn--primario { background: var(--amarelo-500); color: var(--azul-900); }
.btn--primario:hover {
  background: var(--amarelo-600); color: var(--azul-900);
  transform: translateY(-1px); box-shadow: var(--sombra-md);
}

.btn--secundario { background: var(--azul-700); color: var(--branco); }
.btn--secundario:hover { background: var(--azul-900); color: var(--branco); }

.btn--contorno { background: transparent; border-color: var(--azul-700); color: var(--azul-700); }
.btn--contorno:hover { background: var(--azul-100); color: var(--azul-700); }

.btn--fantasma { background: transparent; color: var(--azul-700); padding: 10px 12px; min-height: 44px; }
.btn--fantasma:hover { color: var(--azul-500); text-decoration: underline; }

.secao--escura .btn--contorno { border-color: rgba(255, 255, 255, 0.7); color: var(--branco); }
.secao--escura .btn--contorno:hover { background: rgba(255, 255, 255, 0.12); color: var(--branco); }
.secao--escura .btn--primario:hover { color: var(--azul-900); }

/* 44px é o mínimo de alvo de toque em specs/site.md 11. O botão parece
   pequeno pelo padding e pelo tamanho da fonte, não por encolher a altura. */
.btn--pequeno { min-height: 44px; padding: 8px 16px; font-size: var(--fs-sm); }

.btn[aria-disabled='true'], .btn:disabled {
  background: var(--cinza-200); color: var(--cinza-500);
  border-color: transparent; cursor: not-allowed; transform: none; box-shadow: none;
}

.grupo-botoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* -------------------------------------------------------------------------
   6. HEADER
   ------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-200);
  transition: box-shadow 200ms ease, padding 200ms ease;
}
.header--rolado { box-shadow: var(--sombra-sm); }

.header__interno {
  display: flex; align-items: center; gap: var(--e-5);
  min-height: var(--header-h);
  padding-block: var(--e-2);
}

.header__logo { flex: none; display: block; line-height: 0; }
.header__logo img { height: 34px; width: auto; transition: height 200ms ease; }
@media (min-width: 1024px) { .header__logo img { height: 44px; } }
.header--rolado .header__logo img { height: 32px; }
@media (min-width: 1024px) { .header--rolado .header__logo img { height: 38px; } }

.nav { margin-left: auto; }
.nav__lista { display: flex; align-items: center; gap: var(--e-5); margin: 0; padding: 0; list-style: none; }
.nav__lista li { margin: 0; }
.nav__link {
  display: block; padding: var(--e-2) 0;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--cinza-900); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--transicao), border-color var(--transicao);
}
.nav__link:hover { color: var(--azul-700); border-bottom-color: var(--amarelo-500); }
.nav__link[aria-current='true'] { color: var(--azul-700); border-bottom-color: var(--amarelo-500); }

.header__acoes { display: flex; align-items: center; gap: var(--e-3); }

.menu-toggle {
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--cinza-200);
  border-radius: var(--raio-md); cursor: pointer;
}
.menu-toggle__barra {
  display: block; position: relative;
  width: 20px; height: 2px; background: var(--azul-900);
  transition: background 120ms ease;
}
.menu-toggle__barra::before, .menu-toggle__barra::after {
  content: ''; position: absolute; left: 0;
  width: 20px; height: 2px; background: var(--azul-900);
  transition: transform var(--transicao), top var(--transicao);
}
.menu-toggle__barra::before { top: -6px; }
.menu-toggle__barra::after { top: 6px; }
.menu-toggle[aria-expanded='true'] .menu-toggle__barra { background: transparent; }
.menu-toggle[aria-expanded='true'] .menu-toggle__barra::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-toggle__barra::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1023px) {
  .menu-toggle { display: inline-flex; order: 3; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    background: var(--branco);
    border-bottom: 1px solid var(--cinza-200);
    box-shadow: var(--sombra-md);
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
  }
  .nav[data-aberto='true'] { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; padding: var(--e-3) var(--gutter) var(--e-5); }
  .nav__link {
    padding: var(--e-4) 0; font-size: var(--fs-base);
    border-bottom: 1px solid var(--cinza-200);
  }
  .nav__link:hover, .nav__link[aria-current='true'] { border-bottom-color: var(--cinza-200); }
  .header__acoes .btn--primario { display: none; }
}
@media (max-width: 479px) {
  .header__acoes .btn--fantasma { display: none; }
}

/* -------------------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------------------- */
.hero { padding-block: var(--e-8) var(--e-8); }
@media (min-width: 1024px) { .hero { padding-block: var(--e-9) var(--e-9); } }

.hero__grid { display: grid; gap: var(--e-7); align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1fr 1fr; gap: var(--e-8); } }

.hero__titulo { font-size: var(--fs-display); margin-bottom: var(--e-5); }
.hero__titulo em { font-style: normal; color: var(--azul-700); }
.hero__lead { font-size: var(--fs-lg); color: var(--cinza-500); margin-bottom: var(--e-6); max-width: 34em; }
.hero__conteudo { max-width: 560px; }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5);
  margin-top: var(--e-6); padding-top: var(--e-5);
  border-top: 1px solid var(--cinza-200);
  font-size: var(--fs-sm); color: var(--cinza-500);
}
.hero__meta span { display: inline-flex; align-items: center; gap: var(--e-2); }
.hero__meta svg { color: var(--azul-700); }

.hero__media {
  background: var(--cinza-50);
  border-radius: var(--raio-lg);
  padding: var(--e-5);
  display: grid; place-items: center;
}
.hero__media img { width: 100%; max-width: 520px; border-radius: var(--raio-md); }

/* -------------------------------------------------------------------------
   8. FAIXA DE PROVA
   ------------------------------------------------------------------------- */
.prova__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-6) var(--e-5);
}
@media (min-width: 900px) { .prova__grid { grid-template-columns: repeat(4, 1fr); } }

.prova__item { padding-top: var(--e-4); border-top: 3px solid var(--amarelo-500); }
.prova__numero {
  display: block;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  color: var(--azul-700);
}
.prova__rotulo {
  display: block; margin-top: var(--e-2);
  font-size: var(--fs-sm); color: var(--cinza-500);
}

/* -------------------------------------------------------------------------
   9. SOBRE + VIDEO
   ------------------------------------------------------------------------- */
.sobre__grid { display: grid; gap: var(--e-7); align-items: start; }
@media (min-width: 1024px) { .sobre__grid { grid-template-columns: 5fr 7fr; gap: var(--e-8); } }

.lista-marcada { list-style: none; padding: 0; margin: var(--e-5) 0 0; }
.lista-marcada li {
  position: relative; padding-left: var(--e-5); margin-bottom: var(--e-3);
  font-weight: 600;
}
.lista-marcada li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 10px; height: 3px; background: var(--amarelo-500); border-radius: 2px;
}

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--azul-900);
  border-radius: var(--raio-lg);
  overflow: hidden;
}
.video img { width: 100%; height: 100%; object-fit: cover; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video__play {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e-3);
  width: 100%; background: rgba(0, 37, 89, 0.38);
  border: 0; color: var(--branco);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background var(--transicao);
}
.video__play:hover { background: rgba(0, 37, 89, 0.52); }
.video__play span:last-child { font-size: var(--fs-sm); }
.video__icone {
  display: grid; place-items: center;
  width: 68px; height: 68px;
  background: var(--amarelo-500); color: var(--azul-900);
  border-radius: 50%;
  transition: transform var(--transicao);
}
.video__play:hover .video__icone { transform: scale(1.06); }
.video__nota { margin-top: var(--e-3); font-size: var(--fs-xs); color: var(--cinza-500); }

/* -------------------------------------------------------------------------
   10. LOGISTICA + MASCOTE
   ------------------------------------------------------------------------- */
.logistica__grid { display: grid; gap: var(--e-6); align-items: end; }
@media (min-width: 768px) { .logistica__grid { grid-template-columns: 1fr auto; gap: var(--e-8); } }

.lista-icones { list-style: none; padding: 0; margin: var(--e-6) 0 0; display: grid; gap: var(--e-5); }
@media (min-width: 600px) { .lista-icones { grid-template-columns: repeat(3, 1fr); } }
.lista-icones li { margin: 0; }
.lista-icones svg { color: var(--azul-700); margin-bottom: var(--e-2); }
.lista-icones strong { display: block; font-size: var(--fs-base); }
.lista-icones span { display: block; font-size: var(--fs-sm); color: var(--cinza-500); }

.mascote { align-self: end; justify-self: center; }
.mascote img { height: 260px; width: auto; mix-blend-mode: multiply; }
@media (min-width: 1024px) { .mascote img { height: 320px; } }
@media (max-width: 479px) { .mascote { display: none; } }

/* -------------------------------------------------------------------------
   11. CARDS DE PRODUTO
   ------------------------------------------------------------------------- */
.grid-produtos { display: grid; gap: var(--e-5); }
@media (min-width: 768px) { .grid-produtos { grid-template-columns: repeat(2, 1fr); gap: var(--e-6); } }
@media (min-width: 1024px) { .grid-produtos { grid-template-columns: repeat(3, 1fr); } }

.card-produto {
  display: flex; flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio-md);
  overflow: hidden;
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.card-produto:hover {
  border-color: var(--azul-500);
  box-shadow: var(--sombra-md);
  transform: translateY(-2px);
}
.card-produto__media {
  aspect-ratio: 4 / 3;
  background: var(--cinza-50);
  display: grid; place-items: center;
  padding: var(--e-5);
  border-bottom: 1px solid var(--cinza-200);
}
.card-produto__media img { max-height: 100%; width: auto; max-width: 78%; object-fit: contain; }
.card-produto__corpo { padding: var(--e-5); display: flex; flex-direction: column; flex: 1; }
@media (min-width: 1024px) { .card-produto__corpo { padding: var(--e-6); } }
.card-produto__corpo h3 { margin-bottom: var(--e-3); }
.card-produto__corpo p { font-size: var(--fs-sm); color: var(--cinza-500); margin-bottom: var(--e-4); }
.card-produto__variacoes {
  list-style: none; padding: 0; margin: auto 0 0;
  display: flex; flex-wrap: wrap; gap: var(--e-2);
}
.card-produto__variacoes li { margin: 0; }
.tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--azul-100);
  color: var(--azul-700);
  border-radius: var(--raio-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.sem-foto {
  display: grid; place-items: center; gap: var(--e-2);
  width: 100%; height: 100%;
  color: var(--cinza-500);
}
.sem-foto svg { color: var(--cinza-200); }
.sem-foto span { font-size: var(--fs-xs); }

/* -------------------------------------------------------------------------
   12. DESTAQUE TECNICO
   ------------------------------------------------------------------------- */
.destaque__grid { display: grid; gap: var(--e-7); align-items: center; }
@media (min-width: 1024px) { .destaque__grid { grid-template-columns: 6fr 5fr; gap: var(--e-8); } }

.destaque__media {
  background: var(--branco);
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio-lg);
  padding: var(--e-7);
  display: grid; place-items: center;
}
.destaque__media img { width: 100%; max-width: 460px; }

.specs { margin: var(--e-6) 0 var(--e-6); display: grid; gap: 0; }
.specs__linha {
  display: flex; flex-wrap: wrap; gap: var(--e-3);
  justify-content: space-between;
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--cinza-200);
}
.specs dt { font-weight: 600; margin: 0; }
.specs dd { margin: 0; color: var(--cinza-500); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------
   13. CATALOGO
   ------------------------------------------------------------------------- */
.catalogo__grid { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 900px) { .catalogo__grid { grid-template-columns: 1fr auto; gap: var(--e-8); } }
.catalogo__nota { margin-top: var(--e-4); font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.72); }

/* -------------------------------------------------------------------------
   14. REPRESENTANTES
   ------------------------------------------------------------------------- */
.busca-rep__controles {
  display: grid; gap: var(--e-4);
  padding: var(--e-5);
  background: var(--cinza-50);
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio-md);
  margin-bottom: var(--e-6);
}
@media (min-width: 768px) {
  .busca-rep__controles { grid-template-columns: auto 1fr; align-items: end; gap: var(--e-5); }
}

.segmentos { display: flex; gap: var(--e-2); }
.segmentos__btn {
  min-height: 44px; padding: 10px 20px;
  background: var(--branco);
  border: 1px solid var(--cinza-200);
  border-radius: 999px;
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--cinza-900); cursor: pointer;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.segmentos__btn:hover { border-color: var(--azul-500); color: var(--azul-700); }
.segmentos__btn[aria-pressed='true'] {
  background: var(--azul-700); border-color: var(--azul-700); color: var(--branco);
}

.campo { display: grid; gap: var(--e-2); }
.campo label { font-size: var(--fs-sm); font-weight: 600; }
.campo select, .campo input {
  min-height: 48px;
  padding: 10px 14px;
  font: inherit;
  color: var(--cinza-900);
  background: var(--branco);
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio-sm);
  transition: border-color var(--transicao);
}
.campo select:hover, .campo input:hover { border-color: var(--azul-500); }

.busca-rep__status {
  margin-bottom: var(--e-5);
  font-size: var(--fs-sm); font-weight: 600; color: var(--cinza-500);
}

.grid-rep { display: grid; gap: var(--e-4); list-style: none; padding: 0; margin: 0; }
@media (min-width: 700px) { .grid-rep { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-rep { grid-template-columns: repeat(3, 1fr); } }
.grid-rep li { margin: 0; }

.card-rep {
  display: flex; flex-direction: column; height: 100%;
  padding: var(--e-5);
  background: var(--branco);
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio-md);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.card-rep:hover { border-color: var(--azul-500); box-shadow: var(--sombra-sm); }
.card-rep__uf {
  display: inline-block; align-self: flex-start;
  margin-bottom: var(--e-3);
  padding: 3px 9px;
  background: var(--azul-700); color: var(--branco);
  border-radius: var(--raio-sm);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em;
}
.card-rep__nome { font-size: var(--fs-base); font-weight: 700; margin: 0 0 var(--e-1); line-height: 1.3; }
.card-rep__contato { font-size: var(--fs-sm); color: var(--cinza-900); margin: 0 0 var(--e-1); }
.card-rep__regiao { font-size: var(--fs-sm); color: var(--cinza-500); margin: 0 0 var(--e-4); }
.card-rep__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: auto; }
.card-rep__acoes .btn { flex: 1 1 auto; }

.estado-vazio {
  padding: var(--e-7) var(--e-5);
  background: var(--azul-100);
  border-radius: var(--raio-md);
  text-align: center;
}
.estado-vazio h3 { margin-bottom: var(--e-3); }
.estado-vazio p { margin-inline: auto; }

/* -------------------------------------------------------------------------
   15. UNIDADES
   ------------------------------------------------------------------------- */
.grid-unidades { display: grid; gap: var(--e-5); }
@media (min-width: 700px) { .grid-unidades { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-unidades { grid-template-columns: repeat(3, 1fr); gap: var(--e-6); } }

.card-unidade {
  padding: var(--e-6);
  background: var(--branco);
  border-radius: var(--raio-md);
  border: 1px solid var(--cinza-200);
  height: 100%;
  display: flex; flex-direction: column;
}
.card-unidade__icone { color: var(--azul-700); margin-bottom: var(--e-4); }
.card-unidade h3 { font-size: var(--fs-h3); margin-bottom: var(--e-2); }
.card-unidade address {
  font-style: normal; font-size: var(--fs-sm);
  color: var(--cinza-500); margin-bottom: var(--e-4);
}
.card-unidade__tel { margin-top: auto; font-weight: 600; }
.card-unidade__nota {
  display: inline-block; margin-top: var(--e-3);
  font-size: var(--fs-xs); color: var(--cinza-500);
}

.contato-direto {
  margin-top: var(--e-7);
  padding: var(--e-6);
  background: var(--azul-100);
  border-radius: var(--raio-md);
  display: grid; gap: var(--e-4);
  align-items: center;
}
@media (min-width: 768px) { .contato-direto { grid-template-columns: 1fr auto; gap: var(--e-6); } }
.contato-direto h3 { margin-bottom: var(--e-1); }
.contato-direto p { color: var(--cinza-500); font-size: var(--fs-sm); }

/* -------------------------------------------------------------------------
   16. CTA FINAL
   ------------------------------------------------------------------------- */
.cta-final {
  position: relative;
  background-image: url('../img/secoes/galpao-jomarca.jpg');
  background-size: cover;
  background-position: 68% center;
  color: var(--branco);
  isolation: isolate;
}
.cta-final::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0, 37, 89, 0.88);
  z-index: -1;
}
.cta-final__conteudo { max-width: 640px; }
.cta-final h2 { color: var(--branco); }
.cta-final p { color: rgba(255, 255, 255, 0.88); font-size: var(--fs-lg); margin-bottom: var(--e-6); }

/* -------------------------------------------------------------------------
   17. FOOTER
   ------------------------------------------------------------------------- */
.footer { background: var(--azul-900); color: rgba(255, 255, 255, 0.8); padding-block: var(--e-8) 0; }
.footer__grid { display: grid; gap: var(--e-6); }
@media (min-width: 700px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--e-7); } }

.footer__logo img { height: 46px; width: auto; margin-bottom: var(--e-4); }
.footer__sobre { font-size: var(--fs-sm); max-width: 34ch; }

.footer h2, .footer h3 {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--branco); margin-bottom: var(--e-4);
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: var(--e-3); }
.footer a { color: rgba(255, 255, 255, 0.8); text-decoration: none; font-size: var(--fs-sm); }
.footer a:hover { color: var(--amarelo-500); text-decoration: underline; }

.footer__sociais { display: flex; gap: var(--e-3); margin-top: var(--e-4); }
.footer__sociais a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--raio-md);
  transition: background var(--transicao), border-color var(--transicao);
}
.footer__sociais a:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--amarelo-500); }

.footer__legal {
  margin-top: var(--e-8);
  padding-block: var(--e-5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5);
  justify-content: space-between; align-items: center;
  font-size: var(--fs-xs);
}
.footer__legal p { margin: 0; }
.footer__legal a { font-size: var(--fs-xs); }

@media (max-width: 699px) {
  .footer__coluna details summary {
    list-style: none;
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--e-3) 0; cursor: pointer;
    font-size: var(--fs-sm); font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--branco);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }
  .footer__coluna details summary::-webkit-details-marker { display: none; }
  .footer__coluna details summary::after {
    content: ''; width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); margin-top: -4px;
    transition: transform var(--transicao);
  }
  .footer__coluna details[open] summary::after { transform: rotate(-135deg); margin-top: 2px; }
  .footer__coluna details ul { padding-block: var(--e-4); }
}
@media (min-width: 700px) {
  .footer__coluna details summary { display: none; }
  .footer__coluna details ul { display: block; }
}

/* -------------------------------------------------------------------------
   18. BARRA STICKY MOBILE
   ------------------------------------------------------------------------- */
.barra-mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: var(--e-3);
  padding: var(--e-3) var(--gutter);
  padding-bottom: calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
  background: var(--branco);
  border-top: 1px solid var(--cinza-200);
  box-shadow: 0 -4px 16px rgba(0, 37, 89, 0.08);
  transform: translateY(110%);
  transition: transform var(--transicao);
}
.barra-mobile .btn { flex: 1; }
.barra-mobile .btn--contorno { flex: none; width: 52px; padding: 0; }
@media (max-width: 767px) {
  .barra-mobile { display: flex; }
  .barra-mobile[data-visivel='true'] { transform: translateY(0); }
  body { padding-bottom: 0; }
  body.tem-barra-mobile { padding-bottom: 84px; }
}

/* -------------------------------------------------------------------------
   19. PAGINAS INTERNAS
   ------------------------------------------------------------------------- */
.pagina-cabecalho {
  background: var(--azul-900);
  color: var(--branco);
  padding-block: var(--e-8);
}
@media (min-width: 1024px) { .pagina-cabecalho { padding-block: var(--e-9); } }
.pagina-cabecalho h1 { color: var(--branco); max-width: 20ch; }
.pagina-cabecalho p { color: rgba(255, 255, 255, 0.82); font-size: var(--fs-lg); }
.pagina-cabecalho .eyebrow { color: var(--amarelo-500); }

.migalhas { font-size: var(--fs-sm); margin-bottom: var(--e-5); }
.migalhas ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-2); padding: 0; margin: 0; }
.migalhas li { margin: 0; color: rgba(255, 255, 255, 0.6); }
.migalhas li + li::before { content: '/'; margin-right: var(--e-2); }
.migalhas a { color: rgba(255, 255, 255, 0.8); }

.texto-legal { max-width: 68ch; }
.texto-legal h2 { font-size: var(--fs-h3); margin-top: var(--e-7); }
.texto-legal h2:first-of-type { margin-top: 0; }

.aviso {
  padding: var(--e-5);
  background: var(--amarelo-100);
  border-left: 3px solid var(--amarelo-500);
  border-radius: var(--raio-sm);
  margin-bottom: var(--e-6);
}
.aviso p { font-size: var(--fs-sm); }

/* -------------------------------------------------------------------------
   20. ANIMACAO DE ENTRADA
   ------------------------------------------------------------------------- */
/* O estado escondido so vale quando ha JavaScript para revelar de volta.
   A classe .js e adicionada no <head>. Sem JS — ou se o script falhar —
   o conteudo nasce visivel em vez de sumir da pagina. */
.js .revelar { opacity: 0; transform: translateY(16px); }
.js .revelar--visivel {
  opacity: 1; transform: none;
  transition: opacity 400ms cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 400ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

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

@media print {
  .header, .barra-mobile, .cta-final, .video__play { display: none !important; }
  body { color: #000; }
}

/* Item de nav exclusivo do menu mobile: no desktop essa acao ja vive no header. */
.nav__item--mobile { display: none; }
@media (max-width: 1023px) {
  .nav__item--mobile { display: block; }
}

/* -------------------------------------------------------------------------
   21. CORRECOES DE CONTRASTE
   --cinza-500 sobre --azul-100 mede 4.1:1, abaixo do minimo AA de 4.5:1
   exigido em specs/site.md 12. Sobre esse fundo o texto de apoio escurece.
   ------------------------------------------------------------------------- */
.secao--azul-claro .prova__rotulo,
.secao--azul-claro .secao__cabecalho p,
.contato-direto p,
.estado-vazio p {
  color: var(--cinza-900);
}

/* Se a foto do galpao nao carregar, o overlay ainda precisa de um fundo
   escuro por baixo para o texto branco manter contraste. */
.cta-final { background-color: var(--azul-900); }

/* -------------------------------------------------------------------------
   22. CONTEXTO ESCURO — CTA FINAL E CABECALHO DE PAGINA
   .cta-final e .pagina-cabecalho tem fundo escuro mas nao usam a classe
   .secao--escura. Sem estas regras, o botao de contorno herda azul sobre
   azul e some (medido em 1.1:1).
   ------------------------------------------------------------------------- */
.cta-final .eyebrow,
.pagina-cabecalho .eyebrow { color: var(--amarelo-500); }

.cta-final .btn--contorno,
.pagina-cabecalho .btn--contorno {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--branco);
}
.cta-final .btn--contorno:hover,
.pagina-cabecalho .btn--contorno:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--branco);
}
.cta-final .btn--primario,
.cta-final .btn--primario:hover { color: var(--azul-900); }

/* No mobile os links do rodape ganham area de toque confortavel.
   No desktop continuam como texto corrido. */
@media (max-width: 699px) {
  .footer li a { display: inline-block; padding-block: var(--e-2); }
}

/* =========================================================================
   23. TEMA AMARELO — hero, header e ritmo de cor
   Revisao de 12/08/2026. O amarelo deixa de ser so acento e passa a abrir a
   pagina, retomando a primeira versao do site. Ver specs/design.md 13.
   ========================================================================= */

/* --- Hero amarelo ------------------------------------------------------- */
.hero {
  background: var(--amarelo-500);
  color: var(--azul-900);
  padding-block: var(--e-8);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .hero { padding-block: var(--e-9) 0; }
}

.hero .eyebrow { color: var(--azul-900); opacity: 0.72; }
.hero__titulo { color: var(--azul-900); }
.hero__titulo em { color: var(--azul-700); }
.hero__lead { color: var(--azul-900); opacity: 0.86; }

.hero__meta {
  border-top-color: rgba(0, 37, 89, 0.22);
  color: var(--azul-900);
}
.hero__meta svg { color: var(--azul-900); }

/* Sobre amarelo o botao primario amarelo desapareceria. O par inverte:
   azul solido para a acao principal, contorno azul para a secundaria. */
.hero .btn--primario {
  background: var(--azul-700);
  color: var(--branco);
}
.hero .btn--primario:hover {
  background: var(--azul-900);
  color: var(--branco);
}
.hero .btn--secundario {
  background: transparent;
  border-color: var(--azul-900);
  color: var(--azul-900);
}
.hero .btn--secundario:hover {
  background: rgba(0, 37, 89, 0.1);
  color: var(--azul-900);
}

/* --- Mascote no hero ---------------------------------------------------- */
/* Painel claro atras do mascote: a camisa dele e amarela e sumiria contra o
   fundo do hero. O JPEG ja vem achatado exatamente sobre --azul-100. */
.hero__media {
  background: var(--azul-100);
  border-radius: var(--raio-lg) var(--raio-lg) 0 0;
  padding: 0;
  align-self: end;
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  max-width: 460px;
  border-radius: 0;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .hero__media img { max-width: 520px; }
}

/* --- Header emendado no hero ------------------------------------------- */
/* No topo o header e amarelo e forma um bloco unico com o hero. Ao rolar
   ele vira branco: amarelo fixo na tela inteira o tempo todo seria area
   grande demais para um acento. */
.header {
  background: var(--amarelo-500);
  border-bottom-color: transparent;
}
.header .nav__link { color: var(--azul-900); }
.header .nav__link:hover,
.header .nav__link[aria-current] {
  color: var(--azul-900);
  border-bottom-color: var(--azul-900);
}
.header .btn--primario { background: var(--azul-700); color: var(--branco); }
.header .btn--primario:hover { background: var(--azul-900); color: var(--branco); }
.header .btn--fantasma { color: var(--azul-900); }
.header .menu-toggle { border-color: rgba(0, 37, 89, 0.28); }
.header .menu-toggle__barra,
.header .menu-toggle__barra::before,
.header .menu-toggle__barra::after { background: var(--azul-900); }
.header[aria-expanded='true'] .menu-toggle__barra { background: transparent; }

.header--rolado {
  background: var(--branco);
  border-bottom-color: var(--cinza-200);
}
.header--rolado .nav__link { color: var(--cinza-900); }
.header--rolado .nav__link:hover,
.header--rolado .nav__link[aria-current] {
  color: var(--azul-700);
  border-bottom-color: var(--amarelo-500);
}
.header--rolado .btn--fantasma { color: var(--azul-700); }
.header--rolado .menu-toggle { border-color: var(--cinza-200); }

/* Paginas internas nao tem hero amarelo: o header ja nasce branco. */
.header--claro,
.header--claro.header--rolado { background: var(--branco); border-bottom-color: var(--cinza-200); }
.header--claro .nav__link { color: var(--cinza-900); }
.header--claro .btn--fantasma { color: var(--azul-700); }
.header--claro .menu-toggle { border-color: var(--cinza-200); }

@media (max-width: 1023px) {
  .nav { background: var(--branco); }
  .header .nav .nav__link { color: var(--cinza-900); }
}

/* --- Faixa de prova em azul escuro -------------------------------------- */
/* Amarelo em cima, azul embaixo: o contraste e a propria marca. */
.prova {
  background: var(--azul-900);
  color: var(--branco);
}
.prova .prova__item { border-top-color: var(--amarelo-500); }
.prova .prova__numero { color: var(--amarelo-500); }
.prova .prova__rotulo { color: rgba(255, 255, 255, 0.82); }

/* --- Destaque tecnico em azul claro ------------------------------------- */
.destaque-bloco { background: var(--azul-100); }
.destaque-bloco .destaque__media { border-color: rgba(0, 52, 133, 0.14); }

/* --- Texto justificado --------------------------------------------------- */
/* Pedido do cliente. hyphens:auto e obrigatorio junto: sem hifenizacao o
   justificado abre rios de espaco em coluna estreita. */
p, .texto-legal li, .card-produto__corpo p {
  text-align: justify;
  hyphens: auto;
}
/* Linhas curtas nao se justificam bem — ficam alinhadas a esquerda. */
.hero__meta, .prova__rotulo, .card-rep__contato, .card-rep__regiao,
.footer__legal p, .migalhas, .busca-rep__status, .catalogo__nota,
.lista-icones span, .card-unidade__nota, .video__nota {
  text-align: left;
  hyphens: none;
}

/* --- Bloco de compromissos (logistica dentro de Quem somos) ------------- */
.compromissos {
  display: grid;
  gap: var(--e-4);
  margin-top: var(--e-6);
  padding: var(--e-5);
  background: var(--amarelo-100);
  border-left: 3px solid var(--amarelo-500);
  border-radius: 0 var(--raio-md) var(--raio-md) 0;
}
@media (min-width: 600px) { .compromissos { grid-template-columns: repeat(3, 1fr); gap: var(--e-5); } }
.compromissos div { display: flex; flex-direction: column; gap: 2px; }
.compromissos svg { color: var(--azul-700); margin-bottom: var(--e-1); }
.compromissos strong { font-size: var(--fs-base); color: var(--azul-900); }
.compromissos span { font-size: var(--fs-sm); color: var(--cinza-900); text-align: left; }

/* --- Rodape do grid de produtos ----------------------------------------- */
.produtos__rodape {
  margin-top: var(--e-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
}
.produtos__rodape p { margin: 0; color: var(--cinza-500); font-size: var(--fs-sm); text-align: left; }

/* Grid de 4 linhas: 2x2 no tablet, 4 colunas no desktop largo. */
@media (min-width: 1024px) {
  .grid-produtos--quatro { grid-template-columns: repeat(4, 1fr); }
}


/* --cinza-500 sobre --azul-100 mede 4.1:1. No bloco de destaque, que agora
   tem fundo azul claro, os valores das specs escurecem. */
.destaque-bloco .specs dd { color: var(--cinza-900); }
.destaque-bloco .specs__linha { border-bottom-color: rgba(0, 52, 133, 0.16); }

/* =========================================================================
   24. REVISÃO: mascote sem painel, produtos em amarelo, catálogo e rodapé
   ========================================================================= */

/* --- Mascote solto sobre o hero, sem painel --- */
/* Decisão do cliente. A camisa dele é amarela e encosta no fundo amarelo;
   o que ainda separa a silhueta são a calça azul e a caixa da marca. */
.hero__media {
  background: transparent;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}
.hero__media img { max-width: 420px; }
@media (min-width: 1024px) { .hero__media img { max-width: 520px; } }

/* --- Cards de produto com fundo amarelo --- */
/* As fotos vêm recortadas e achatadas exatamente sobre --amarelo-500, então a
   media do card usa a mesma cor e a peça parece flutuar sobre o amarelo. */
.card-produto__media {
  background: var(--amarelo-500);
  border-bottom-color: var(--amarelo-600);
  padding: 0;
}
.card-produto__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

/* --- Catálogo sobre a foto do galpão --- */
.catalogo-bloco {
  position: relative;
  background-color: var(--azul-900);
  background-image: url('../img/secoes/galpao-jomarca.jpg');
  background-size: cover;
  background-position: 68% center;
  color: var(--branco);
  isolation: isolate;
}
.catalogo-bloco::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0, 37, 89, 0.9);
  z-index: -1;
}
.catalogo-bloco h2 { color: var(--branco); }
.catalogo-bloco p { color: rgba(255, 255, 255, 0.88); }
.catalogo-bloco .eyebrow { color: var(--amarelo-500); }
.catalogo-bloco .catalogo__nota { color: rgba(255, 255, 255, 0.72); }
.catalogo-bloco .btn--primario,
.catalogo-bloco .btn--primario:hover { color: var(--azul-900); }

.catalogo__grid { align-items: center; }
@media (min-width: 900px) { .catalogo__grid { grid-template-columns: 1fr 0.85fr; } }


/* --- Rodapé amarelo --- */
.footer--amarelo {
  background: var(--amarelo-500);
  color: var(--azul-900);
}
.footer--amarelo h2,
.footer--amarelo h3,
.footer--amarelo summary { color: var(--azul-900); }
.footer--amarelo a { color: var(--azul-900); }
.footer--amarelo a:hover { color: var(--azul-700); text-decoration: underline; }
.footer--amarelo .footer__sobre { color: var(--azul-900); }
.footer--amarelo .footer__sociais a { border-color: rgba(0, 37, 89, 0.3); }
.footer--amarelo .footer__sociais a:hover {
  background: rgba(0, 37, 89, 0.1);
  border-color: var(--azul-900);
}
.footer--amarelo .footer__legal { border-top-color: rgba(0, 37, 89, 0.22); }
@media (max-width: 699px) {
  .footer--amarelo .footer__coluna details summary { border-bottom-color: rgba(0, 37, 89, 0.22); }
}

/* A regra do acordeão do rodapé (.footer__coluna details summary) tem
   especificidade maior que .footer--amarelo summary e deixava o título
   branco sobre amarelo — 1.5:1. */
@media (max-width: 699px) {
  .footer--amarelo .footer__coluna details summary { color: var(--azul-900); }
}

/* =========================================================================
   25. REVISÃO DE RITMO — espaçamento, movimento e legibilidade
   ========================================================================= */

/* --- Blocos mais próximos --- */
/* O respiro de 128px no desktop deixava a leitura arrastada. Reduzido em
   ~25% mantendo a escala de 8px de specs/design.md §5. */
@media (min-width: 768px) { :root { --secao-y: 72px; } }
@media (min-width: 1024px) { :root { --secao-y: var(--e-9); } }
.secao__cabecalho { margin-bottom: var(--e-6); }
@media (min-width: 1024px) { .secao__cabecalho { margin-bottom: var(--e-7); } }


/* --- Entrada do hero --- */
/* Uma vez so, no carregamento. Texto sobe, mascote entra depois. */
@keyframes hero-sobe {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-mascote {
  from { opacity: 0; transform: translateY(28px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.js .hero__conteudo > * { animation: hero-sobe 620ms cubic-bezier(.2,.7,.3,1) both; }
.js .hero__conteudo > *:nth-child(1) { animation-delay: 60ms; }
.js .hero__conteudo > *:nth-child(2) { animation-delay: 130ms; }
.js .hero__conteudo > *:nth-child(3) { animation-delay: 200ms; }
.js .hero__conteudo > *:nth-child(4) { animation-delay: 270ms; }
.js .hero__conteudo > *:nth-child(5) { animation-delay: 340ms; }
.js .hero__media img { animation: hero-mascote 760ms cubic-bezier(.2,.7,.3,1) 220ms both; }

/* --- Header e menu: transição menos dura --- */
.header {
  transition: background-color 320ms ease, box-shadow 320ms ease,
    border-color 320ms ease;
}
.header__logo img { transition: height 320ms cubic-bezier(.2,.7,.3,1); }
.nav__link {
  position: relative;
  transition: color 220ms ease;
  border-bottom-color: transparent !important;
}
/* O sublinhado cresce do centro em vez de aparecer inteiro de uma vez. */
.nav__link::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%; bottom: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: left 240ms cubic-bezier(.2,.7,.3,1), right 240ms cubic-bezier(.2,.7,.3,1);
}
.nav__link:hover::after,
.nav__link[aria-current]::after { left: 0; right: 0; }
@media (max-width: 1023px) { .nav__link::after { display: none; } }

/* --- Cards de produto: volta o fundo claro --- */
/* As fotos agora vem compostas num quadro 4:3 branco, com a peca centralizada
   ocupando 80% — o enquadramento fica igual nos quatro cards. */
.card-produto__media {
  background: var(--branco);
  border-bottom-color: var(--cinza-200);
  padding: 0;
}
.card-produto__media img {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: cover;
}
.card-produto__corpo h3 { margin-bottom: var(--e-2); }

/* --- Unidades: leitura em linhas --- */
.unidades-bloco { background: var(--cinza-50); }
.card-unidade { padding: var(--e-5); }
@media (min-width: 1024px) { .card-unidade { padding: var(--e-6); } }
.card-unidade h3 {
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--fs-h3); margin-bottom: var(--e-4);
}
.card-unidade__cidade {
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0;
  color: var(--azul-700); text-transform: none;
}
.card-unidade address {
  display: flex; flex-direction: column; gap: 2px;
  font-style: normal; font-size: var(--fs-sm);
  color: var(--cinza-900); margin-bottom: var(--e-5);
  text-align: left;
}
.card-unidade__linha { display: block; }
.card-unidade__tel {
  display: inline-flex; align-items: center; gap: var(--e-2);
  margin-top: auto;
  font-weight: 700; text-decoration: none;
  color: var(--azul-700);
  transition: color 200ms ease;
}
.card-unidade__tel:hover { color: var(--azul-500); text-decoration: underline; }
.card-unidade__nota {
  margin-top: var(--e-3);
  font-size: var(--fs-xs); color: var(--cinza-500); text-align: left;
}

/* --- Fecho: CTA absorvido pelo bloco de unidades --- */
.fecho {
  margin-top: var(--e-7);
  padding: var(--e-6);
  background: var(--azul-900);
  color: var(--branco);
  border-radius: var(--raio-lg);
  display: grid; gap: var(--e-5);
  align-items: center;
}
@media (min-width: 900px) {
  .fecho { grid-template-columns: 1fr auto; gap: var(--e-8); padding: var(--e-7); }
}
.fecho .eyebrow { color: var(--amarelo-500); }
.fecho h3 { color: var(--branco); font-size: var(--fs-h2); margin-bottom: var(--e-3); }
.fecho p { color: rgba(255, 255, 255, 0.88); }
.fecho__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.fecho .btn--contorno { border-color: rgba(255, 255, 255, 0.7); color: var(--branco); }
.fecho .btn--contorno:hover { background: rgba(255, 255, 255, 0.12); color: var(--branco); }
.fecho .btn--primario, .fecho .btn--primario:hover { color: var(--azul-900); }

@media (prefers-reduced-motion: reduce) {
  .js .hero__conteudo > *,
  .js .hero__media img { animation: none; }
}

/* =========================================================================
   26. TEXTURA DO HERO E GALERIA DE EVENTO
   ========================================================================= */

/* --- Textura do hero --- */
/* Arquivo do cliente (textura.svg), rasterizado para PNG de 600px com alfa.
   O SVG original tem 3,5 MB — inviável para web; o PNG tem 25 KB.
   Servido a 300px para ficar nítido em tela 2x. */
.hero {
  position: relative;
  background-color: var(--amarelo-500);
  background-image: url('../img/texturas/textura-hero.png');
  background-size: 600px 600px;
  background-repeat: repeat;
}
/* Faixa de contato com a seção seguinte: dá profundidade sem gradiente. */
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--amarelo-600);
  opacity: 0.55;
}
/* Testei um painel amarelo liso atrás do texto: contra a malha ele virava um
   retângulo visível. A malha é sutil o bastante (7%) para o título em
   --azul-900 passar por cima sem perder leitura. */
.hero__conteudo { position: relative; z-index: 1; }


/* --- Galeria do último evento --- */
.evento-bloco { background: var(--cinza-50); }

.evento__cabecalho {
  display: grid; gap: var(--e-5);
  margin-bottom: var(--e-6);
  align-items: end;
}
@media (min-width: 900px) {
  .evento__cabecalho { grid-template-columns: 1fr auto; gap: var(--e-8); }
}
.evento__cabecalho p { max-width: 62ch; color: var(--cinza-900); }

.galeria__controles { display: flex; gap: var(--e-3); }
.galeria__btn {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--branco);
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio-md);
  color: var(--azul-700);
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease,
    color 200ms ease, transform 200ms ease;
}
.galeria__btn:hover:not(:disabled) {
  background: var(--azul-700); border-color: var(--azul-700);
  color: var(--branco); transform: translateY(-1px);
}
.galeria__btn:disabled {
  color: var(--cinza-200); cursor: not-allowed; transform: none;
}

.galeria { position: relative; }
.galeria__trilho {
  display: flex;
  gap: var(--e-4);
  margin: 0; padding: 0 0 var(--e-3);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--cinza-200) transparent;
  overscroll-behavior-x: contain;
}
.galeria__trilho::-webkit-scrollbar { height: 6px; }
.galeria__trilho::-webkit-scrollbar-thumb {
  background: var(--cinza-200); border-radius: 999px;
}
.galeria__trilho:focus-visible { outline: 3px solid var(--azul-500); outline-offset: 4px; }

.galeria__slide {
  flex: 0 0 auto;
  margin: 0;
  width: 74%;
  scroll-snap-align: start;
}
@media (min-width: 600px) { .galeria__slide { width: 46%; } }
@media (min-width: 900px) { .galeria__slide { width: 31%; } }
@media (min-width: 1200px) { .galeria__slide { width: 23.5%; } }

.galeria__slide img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--raio-lg);
  background: var(--cinza-200);
}

.galeria__legenda {
  margin-top: var(--e-4);
  font-size: var(--fs-sm);
  color: var(--cinza-500);
  text-align: left;
}


/* =========================================================================
   27. MASCOTE DE CORPO INTEIRO, ALINHADO AO TOPO DO TEXTO
   O recorte no busto deixava a base cortada em cima da faixa azul. Agora a
   figura e inteira: nao ha corte para disfarcar. O topo dela acompanha a
   linha do eyebrow "Ferragens e acessorios para moveis".
   ========================================================================= */
.hero__media {
  background: transparent;
  padding: 0;
  align-self: start;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) {
  .hero__grid { align-items: start; }
  .hero__conteudo { padding-bottom: var(--e-6); }
}
/* Sem overflow escondido o hero corta a figura na base. */
.hero { overflow: visible; }


/* =========================================================================
   28. MOBILE: HERO E CATÁLOGO SEM IMAGEM
   No celular as duas imagens só empurravam o conteúdo para baixo — o mascote
   ocupava uma tela inteira antes da faixa de prova, e o mockup do catálogo
   entrava depois do botão, sem função. Some abaixo de 768px, some também do
   download: `display:none` não baixa o arquivo.
   ========================================================================= */
@media (max-width: 767px) {
  .hero__media,
  .catalogo__mockup { display: none; }
  .hero { padding-block: var(--e-8); }
}

/* As duas imagens entram por background-image a partir de 768px. Como <img>
   com display:none o Chrome baixa o arquivo assim mesmo; declarada só dentro
   da media query, o celular nunca faz a requisição. */
@media (min-width: 768px) {
  .hero__media {
    background-image: url('../img/secoes/mascote-hero.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    width: 100%;
    aspect-ratio: 350 / 751;
    max-width: 300px;
    margin-inline: auto;
  }
  .catalogo__mockup {
    background-image: url('../img/secoes/catalogo-mockup.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 100%;
    aspect-ratio: 680 / 525;
    max-width: 420px;
    margin-inline: auto;
  }
}
@media (min-width: 1024px) {
  .hero__media { max-width: 350px; }
  .catalogo__mockup { max-width: 480px; }
}

/* =========================================================================
   29. AJUSTES DE MARCA E CABECALHO
   ========================================================================= */

/* --- Logo maior --- */
.header__logo img { height: 44px; }
@media (min-width: 768px) { .header__logo img { height: 52px; } }
@media (min-width: 1024px) { .header__logo img { height: 60px; } }
.header--rolado .header__logo img { height: 40px; }
@media (min-width: 1024px) { .header--rolado .header__logo img { height: 50px; } }
.footer__logo img { height: 58px; }

/* --- Hamburguer encostado na direita --- */
/* Sem isso ele fica colado no logo, no meio do vazio. */
@media (max-width: 1023px) {
  .menu-toggle { margin-left: auto; }
  .nav { order: 4; }
}

/* --- Cabecalho de secao com subtitulo em uma linha --- */
/* O max-width de 720px do cabecalho quebrava "Brasil." sozinho na linha de
   baixo. Aqui o bloco respira mais e a frase fica inteira no desktop; no
   mobile ela quebra normalmente, porque a largura da tela manda. */
.secao__cabecalho--largo { max-width: 920px; }
.secao__cabecalho--largo p { max-width: none; text-wrap: pretty; }

/* =========================================================================
   30. DIAGRAMAÇÃO: MENOS HIFENIZAÇÃO, SUBTÍTULOS EM UMA LINHA
   O justificado com hyphens resolve a coluna larga do "Quem somos", mas em
   coluna estreita ele quebra palavra no meio e polui a leitura. Aqui o
   justificado fica só onde a linha é longa o bastante para justificar bem.
   ========================================================================= */

/* Subtítulos de seção: nunca justificados, nunca hifenizados. */
.secao__cabecalho p,
.evento__cabecalho p,
.galeria__legenda,
.hero__lead,
.pagina-cabecalho p,
.fecho p,
.contato-direto p,
.card-unidade address {
  text-align: left;
  hyphens: none;
  text-wrap: pretty;
}

/* Cabeçalhos que precisam da frase inteira em uma linha no desktop. */
.evento__cabecalho--largo p { max-width: none; }
@media (min-width: 900px) {
  .secao__cabecalho--largo { max-width: 980px; }
  .evento__cabecalho--largo > div:first-child { max-width: 820px; }
}

/* Texto de card é coluna estreita: justificar ali abre rios e hifeniza demais. */
.card-produto__corpo p,
.card-rep__contato,
.card-rep__regiao,
.compromissos span,
.lista-icones span,
.specs dd,
.texto-legal li {
  text-align: left;
  hyphens: none;
}

/* No celular nenhuma coluna é larga o bastante para justificado ficar bom. */
@media (max-width: 767px) {
  p, .texto-legal li {
    text-align: left;
    hyphens: none;
  }
}

/* O slogan do fecho não pode quebrar "Jomarca Kits" ao meio. */
.fecho h3 { text-wrap: balance; }

/* --- Logo do header não encolhe ao rolar --- */
/* Antes ela diminuía junto com o header e a marca ficava miúda na rolagem. */
.header--rolado .header__logo img { height: 44px; }
@media (min-width: 768px) { .header--rolado .header__logo img { height: 52px; } }
@media (min-width: 1024px) { .header--rolado .header__logo img { height: 60px; } }

/* O slogan do fecho é longo: a coluna de texto precisa de mais largura para
   ele fechar em duas linhas em vez de três. */
@media (min-width: 900px) {
  .fecho { grid-template-columns: minmax(0, 1.6fr) auto; }
  .fecho h3 { max-width: 24ch; }
}

/* =========================================================================
   31. FIM DO TEXTO JUSTIFICADO
   O justificado só fica bom em coluna larga. Nenhuma coluna deste site passa
   de ~60 caracteres: no "Quem somos" são ~490px. Ali o justificado só tinha
   duas saídas, e as duas incomodam — com `hyphens: auto` ele corta palavra
   no meio, sem ele abre rios de espaço branco. Alinhado à esquerda o texto
   fica parelho e sem buraco. Revoga a decisão 33 de @memoria.md.
   ========================================================================= */
p, li, dd, address, figcaption, .texto-legal li {
  text-align: left;
  hyphens: none;
}

/* O slogan precisa de largura livre para fechar em duas linhas. */
@media (min-width: 900px) {
  .fecho h3 { max-width: none; }
}

/* O slogan é o elemento mais longo do fecho. Dividir a linha com os botões
   espremia ele em três linhas — agora ele ocupa a largura toda e os botões
   descem para baixo. */
@media (min-width: 900px) {
  .fecho { grid-template-columns: 1fr; gap: var(--e-6); }
  .fecho__acoes { justify-content: flex-start; }
}

/* =========================================================================
   32. HEADER EM PÍLULA COM VIDRO FOSCO (ao rolar)
   Pedido do cliente, na referência da Filmly. Abre exceção à proibição de
   glassmorphism em specs/design.md §13 — vale só para o header rolado, e
   com opacidade alta o bastante para o menu continuar legível.
   No topo da página o header segue chapado, emendado no hero amarelo.
   ========================================================================= */
@media (min-width: 1024px) {
  .header {
    background: transparent;
    border-bottom-color: transparent;
    padding-block: var(--e-3);
  }

  /* A pílula é o próprio container: encolhe, arredonda e ganha o vidro. */
  .header__interno {
    width: auto;
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: var(--e-5);
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--amarelo-500);
    transition: max-width 320ms cubic-bezier(.2,.7,.3,1),
      background-color 320ms ease, border-color 320ms ease,
      box-shadow 320ms ease, backdrop-filter 320ms ease;
  }

  /* No topo a pílula some: o interno fica transparente e quem dá a cor é o
     próprio header, em amarelo, emendando com o hero. Sem esta regra o
     header fica transparente e aparece o branco do body atrás dele. */
  .header:not(.header--rolado):not(.header--claro) {
    background: var(--amarelo-500);
  }
  .header:not(.header--rolado):not(.header--claro) .header__interno {
    max-width: var(--container);
    border-radius: 0;
    background: transparent;
  }

  .header--rolado .header__interno,
  .header--claro .header__interno {
    max-width: 1000px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-color: rgba(0, 37, 89, 0.1);
    box-shadow: 0 8px 28px rgba(0, 37, 89, 0.1);
  }

  /* O header inteiro perde o fundo branco: quem tem cor agora é a pílula. */
  .header--rolado, .header--claro { background: transparent; border-bottom-color: transparent; }

  /* Navegador sem backdrop-filter recebe um branco mais sólido no lugar. */
  @supports not (backdrop-filter: blur(1px)) {
    .header--rolado .header__interno,
    .header--claro .header__interno { background: rgba(255, 255, 255, 0.95); }
  }
}

/* --- Logo maior e do mesmo tamanho em qualquer estado --- */
/* Altura fixa: no topo, com a página rolada e nas páginas internas o logo
   mede o mesmo. A barra cresce junto (--header-h) para ele não encostar na
   borda da pílula. */
.header__logo img,
.header--rolado .header__logo img,
.header--claro .header__logo img { height: 56px; }
@media (min-width: 768px) {
  .header__logo img,
  .header--rolado .header__logo img,
  .header--claro .header__logo img { height: 68px; }
}
@media (min-width: 1024px) {
  .header__logo img,
  .header--rolado .header__logo img,
  .header--claro .header__logo img { height: 80px; }
}

/* A barra precisa acompanhar a altura do logo. */
:root { --header-h: 80px; }
@media (min-width: 1024px) { :root { --header-h: 108px; } }

@media (prefers-reduced-motion: reduce) {
  .header__interno { transition: none; }
}