/* =============================================================
   LÍDER PEÇAS — design system
   Direção: engenharia industrial / blueprint pesado.
   Base normativa: Manual de Identidade Visual (paleta, Montserrat,
   proporção 70/20/10). IBM Plex Mono entra só em rótulos técnicos,
   numeração e specs — não substitui a família institucional.
   ============================================================= */

/* ---------- 1. Tokens ---------- */

:root {
  /* Primárias (70%) */
  --azul: #0068a0;
  --laranja: #ff5c3d;
  --preto: #1e1e1e;
  --branco: #ffffff;

  /* Secundárias (20%) */
  --ouro: #fa902e;
  --azul-escuro: #004678;
  --cinza-medio: #787878;
  --cinza-claro: #e6e6e6;

  /* Derivadas dentro da família — profundidade sem sair da marca */
  --azul-noite: #002b4a;
  --azul-tinta: #001c31;
  --cinza-fundo: #f4f6f8;
  --linha: #dde3e8;
  --linha-escura: rgba(255, 255, 255, 0.14);

  /* Tipografia */
  --fonte: "Montserrat", "Open Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Escala fluida */
  --t-display: clamp(2.6rem, 6.2vw, 5rem);
  --t-h1: clamp(2.1rem, 4.6vw, 3.4rem);
  --t-h2: clamp(1.6rem, 3vw, 2.4rem);
  --t-h3: clamp(1.15rem, 1.8vw, 1.4rem);
  --t-corpo: clamp(1rem, 1.05vw, 1.0625rem);

  /* Ritmo */
  --gap: clamp(1.25rem, 2.4vw, 2rem);
  --secao-y: clamp(4rem, 9vw, 7.5rem);
  --largura: 1220px;
  --largura-texto: 68ch;

  /* Ângulo do chevron do símbolo — repetido em cortes e detalhes */
  --chanfro: 22px;

  --sombra: 0 1px 2px rgba(0, 43, 74, 0.06), 0 12px 32px -12px rgba(0, 43, 74, 0.18);
  --sombra-alta: 0 2px 4px rgba(0, 43, 74, 0.08), 0 28px 60px -20px rgba(0, 43, 74, 0.32);

  --transicao: 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --topo: 84px;
}

/* ---------- 2. Reset ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

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

@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;
  }
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.6;
  color: var(--preto);
  background: var(--branco);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

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

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--laranja);
  color: #fff;
  padding: 0.9rem 1.4rem;
  font-weight: 700;
}
.pular-para-conteudo:focus { left: 0; }

/* ---------- 3. Utilitários de layout ---------- */

.wrap {
  width: min(100% - 2.5rem, var(--largura));
  margin-inline: auto;
}

.secao { padding-block: var(--secao-y); position: relative; }
.secao--compacta { padding-block: clamp(2.75rem, 6vw, 4.5rem); }

.secao--escura {
  background: var(--azul-noite);
  color: var(--branco);
}
.secao--escura h2, .secao--escura h3 { color: var(--branco); }

.secao--tinta { background: var(--azul-tinta); color: var(--branco); }
.secao--cinza { background: var(--cinza-fundo); }

/* Malha de blueprint: sutil, dá textura sem virar ruído */
.malha { position: relative; isolation: isolate; }
.malha::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 100%);
}
.malha--clara::before {
  background-image:
    linear-gradient(rgba(0, 43, 74, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 43, 74, 0.05) 1px, transparent 1px);
}

.grade {
  display: grid;
  gap: var(--gap);
}
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* ---------- 4. Tipografia ---------- */

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.012em; }

.display {
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.032em;
}

.lead {
  font-size: clamp(1.075rem, 1.5vw, 1.3rem);
  font-weight: 300;
  line-height: 1.55;
  max-width: 56ch;
}

.texto-medio { max-width: var(--largura-texto); }

/* Rótulo técnico: o elemento que dá a assinatura industrial */
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--laranja);
  margin-bottom: 1.1rem;
}
.rotulo::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  flex: none;
}
.rotulo--azul { color: var(--azul); }
.secao--escura .rotulo, .secao--tinta .rotulo { color: var(--ouro); }

.num {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

mark, .destaque {
  background: none;
  color: var(--laranja);
  font-weight: 700;
}

.cabecalho-secao { max-width: 62ch; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.cabecalho-secao p { color: var(--cinza-medio); margin-top: 1rem; font-weight: 300; font-size: 1.075rem; }
.secao--escura .cabecalho-secao p, .secao--tinta .cabecalho-secao p { color: rgba(255, 255, 255, 0.72); }

/* ---------- 5. Botões ---------- */

.btn {
  --btn-bg: var(--laranja);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.05rem 1.9rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: 0.925rem;
  letter-spacing: 0.02em;
  border: 2px solid var(--btn-bg);
  border-radius: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
  /* Canto chanfrado: eco do bisel do símbolo */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -12px rgba(255, 92, 61, 0.6);
}
.btn:active { transform: translateY(-1px); }

.btn--azul { --btn-bg: var(--azul); }
.btn--azul:hover { box-shadow: 0 14px 28px -12px rgba(0, 104, 160, 0.6); }

.btn--vazado {
  --btn-bg: transparent;
  --btn-fg: var(--preto);
  border-color: currentColor;
}
.btn--vazado:hover { background: var(--preto); color: #fff; box-shadow: none; }

.secao--escura .btn--vazado, .secao--tinta .btn--vazado { --btn-fg: #fff; }
.secao--escura .btn--vazado:hover, .secao--tinta .btn--vazado:hover { background: #fff; color: var(--azul-noite); }

.btn--bloco { width: 100%; }
.btn--grande { padding: 1.25rem 2.4rem; font-size: 1rem; }

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--azul);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: gap var(--transicao), border-color var(--transicao);
}
.link-seta::after { content: "→"; transition: transform var(--transicao); }
.link-seta:hover { gap: 0.85rem; border-color: currentColor; }
.link-seta[hidden] { display: none !important; }
.secao--escura .link-seta, .secao--tinta .link-seta { color: var(--ouro); }

/* ---------- 6. Cabeçalho ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--linha);
  transition: box-shadow var(--transicao);
}
.topo.rolou { box-shadow: 0 6px 24px -14px rgba(0, 43, 74, 0.35); }

.topo__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 84px;
}

/* Área de respiro do manual: ≥50% da altura do símbolo em volta da logo */
.topo__logo { display: block; padding: 10px 0; flex: none; }
.topo__logo img { height: 46px; width: auto; }

.nav { display: flex; align-items: center; gap: 0.35rem; }
.nav [hidden] { display: none !important; }

.nav__link {
  padding: 0.65rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--preto);
  position: relative;
  transition: color var(--transicao);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 0.35rem;
  height: 2px;
  background: var(--laranja);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--azul); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Dropdown de produtos */
.nav__grupo { position: relative; }
.nav__gatilho {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__gatilho svg { transition: transform var(--transicao); }
.nav__grupo[data-aberto="true"] .nav__gatilho svg { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  translate: -50% 0;
  width: min(92vw, 560px);
  background: var(--branco);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra-alta);
  padding: 0.7rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.nav__grupo[data-aberto="true"] .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__item { padding: 0.85rem 0.95rem; border-left: 2px solid transparent; transition: background var(--transicao), border-color var(--transicao); }
.nav__item:hover { background: var(--cinza-fundo); border-left-color: var(--laranja); }
.nav__item strong { display: block; font-size: 0.9rem; font-weight: 700; }
.nav__item span { display: block; font-size: 0.78rem; color: var(--cinza-medio); line-height: 1.4; margin-top: 0.2rem; }

.topo__acoes { display: flex; align-items: center; gap: 0.85rem; flex: none; }
.topo__tel {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-family: var(--mono);
  font-size: 0.94rem;
  font-weight: 500;
}
.topo__tel small {
  font-family: var(--fonte);
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  font-weight: 600;
}

.menu-btn {
  display: none;
  width: 46px;
  height: 46px;
  background: var(--azul-noite);
  border: 0;
  cursor: pointer;
  position: relative;
}
.menu-btn span {
  position: absolute;
  left: 13px;
  width: 20px;
  height: 2px;
  background: #fff;
  transition: var(--transicao);
}
.menu-btn span:nth-child(1) { top: 17px; }
.menu-btn span:nth-child(2) { top: 23px; }
.menu-btn span:nth-child(3) { top: 29px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { top: 23px; rotate: 45deg; }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { top: 23px; rotate: -45deg; }

@media (max-width: 1040px) {
  :root { --topo: 72px; }
  .menu-btn { display: block; }
  .topo__tel { display: none; }
  .topo__barra { height: 72px; }
  .topo__logo img { height: 40px; }

  .nav {
    position: fixed;
    inset: 72px 0 0;
    background: var(--azul-noite);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.5rem 1.25rem 3rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transicao);
  }
  .nav[data-aberto="true"] { transform: translateX(0); }
  .nav__link {
    color: #fff;
    padding: 1.1rem 0.25rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--linha-escura);
  }
  .nav__link::after { display: none; }
  .nav__grupo { width: 100%; }
  .nav__gatilho { width: 100%; justify-content: space-between; }
  .nav__menu {
    position: static;
    translate: none;
    width: 100%;
    display: none;
    grid-template-columns: 1fr;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0 0 0.5rem;
  }
  .nav__grupo[data-aberto="true"] .nav__menu { display: grid; }
  .nav__item { color: #fff; border-left-color: var(--laranja); background: rgba(255, 255, 255, 0.05); margin-bottom: 2px; }
  .nav__item:hover { background: rgba(255, 255, 255, 0.1); }
  .nav__item span { color: rgba(255, 255, 255, 0.65); }
  .nav .btn { margin-top: 1.5rem; }
}

/* ---------- 7. Hero ---------- */

.hero {
  position: relative;
  background: var(--azul-noite);
  color: var(--branco);
  overflow: hidden;
  isolation: isolate;
}

.hero::after {
  /* Chevron gigante do símbolo, escala arquitetônica, quase imperceptível */
  content: "";
  position: absolute;
  right: -12%;
  top: -18%;
  width: 780px;
  height: 780px;
  z-index: -1;
  background:
    conic-gradient(from 45deg at 50% 50%, rgba(0, 104, 160, 0.5) 0deg 90deg, transparent 90deg 360deg);
  filter: blur(2px);
  opacity: 0.5;
  transform: rotate(12deg);
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: linear-gradient(90deg, var(--azul) 0%, var(--azul) 38%, var(--laranja) 38%, var(--laranja) 72%, var(--ouro) 72%);
  z-index: 2;
}

.hero--capa > picture {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.hero--capa .hero__capa {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 35%;
}
.hero--capa::after {
  right: auto;
  top: auto;
  width: auto;
  height: auto;
  inset: 0;
  background:
    linear-gradient(
      105deg,
      rgba(0, 28, 49, 0.88) 0%,
      rgba(0, 43, 74, 0.74) 48%,
      rgba(0, 43, 74, 0.58) 100%
    );
  filter: none;
  opacity: 1;
  transform: none;
}
.hero--capa .hero__grade { position: relative; z-index: 1; }
.hero--capa .ficha {
  background: rgba(0, 28, 49, 0.72);
  backdrop-filter: blur(8px);
}

.hero__grade {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

.hero__titulo { margin-bottom: 1.6rem; }
.hero__titulo .destaque { display: block; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.4rem;
}

.hero__provas {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 3.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--linha-escura);
  justify-content: start;
}
.hero__prova strong {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 500;
  line-height: 1;
  color: var(--ouro);
  letter-spacing: -0.03em;
}
.hero__prova span {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
  margin-top: 0.6rem;
  font-weight: 600;
  max-width: 15ch;
}

/* Primeira dobra: no desktop o hero cabe na viewport, abaixo do cabeçalho. */
@media (min-width: 901px) {
  .hero {
    display: flex;
    flex-direction: column;
    height: calc(100svh - var(--topo));
    min-height: 36rem;
  }
  .hero__grade {
    flex: 1;
    min-height: 0;
    padding-block: clamp(1rem, 3.6vh, 2.5rem);
    gap: clamp(1.25rem, 3vw, 2.75rem);
  }
  .hero .display { font-size: clamp(2.05rem, 4.8vh, 3.55rem); }
  .hero .lead {
    font-size: clamp(0.98rem, 1.35vh + 0.45rem, 1.12rem);
    line-height: 1.45;
  }
  .hero__titulo { margin-bottom: 0.85rem; }
  .hero__cta { margin-top: 1.25rem; }
  .hero .btn--grande { padding: 0.92rem 1.65rem; }
  .hero__provas {
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    gap: clamp(1rem, 2.2vw, 2rem);
  }
  .hero__prova strong { font-size: clamp(1.45rem, 3.2vh, 2.05rem); }
  .hero__prova span { margin-top: 0.4rem; }
  .hero .ficha { padding: 1.25rem 1.4rem; }
  .hero .ficha__topo { margin-bottom: 0.7rem; padding-bottom: 0.65rem; }
  .hero .ficha__lista li { padding: 0.45rem 0; font-size: 0.86rem; }
}

/* Painel de specs — a "ficha técnica" do hero */
.ficha {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--linha-escura);
  padding: 2rem;
  clip-path: polygon(0 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% 100%, var(--chanfro) 100%, 0 calc(100% - var(--chanfro)));
}
.ficha__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--linha-escura);
  margin-bottom: 1.4rem;
}
.ficha__topo h2 { font-size: 1.05rem; font-weight: 700; }
.ficha__topo span { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--ouro); }
.ficha__lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.72rem 0;
  font-size: 0.94rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.ficha__lista li:last-child { border-bottom: 0; }
.ficha__lista li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 0.45rem;
  background: var(--laranja);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media (max-width: 900px) {
  .hero__grade { grid-template-columns: 1fr; }
  .hero__provas { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .hero__cta .btn { width: 100%; }
  .hero__provas {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
  .hero__prova strong { font-size: 1.45rem; }
  .hero__prova span {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    max-width: none;
    margin-top: 0.4rem;
  }
}

/* Cabeçalho de páginas internas */
.capa {
  background: var(--azul-noite);
  color: #fff;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  position: relative;
  border-bottom: 5px solid var(--laranja);
}
.capa h1 { max-width: 20ch; margin-bottom: 1.2rem; }
.capa .lead { color: rgba(255, 255, 255, 0.8); }

/* ---------- 8. Breadcrumb ---------- */

.trilha { padding-block: 1rem 0; }
.trilha ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.trilha li { display: flex; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.6); }
.trilha li:not(:last-child)::after { content: "/"; color: rgba(255, 255, 255, 0.3); }
.trilha a { color: rgba(255, 255, 255, 0.82); border-bottom: 1px solid transparent; }
.trilha a:hover { border-color: var(--ouro); color: var(--ouro); }
.trilha--clara li { color: var(--cinza-medio); }
.trilha--clara li:not(:last-child)::after { color: var(--linha); }
.trilha--clara a { color: var(--azul); }
.trilha--clara a:hover { color: var(--laranja); border-color: currentColor; }

/* ---------- 9. Cards ---------- */

.card {
  position: relative;
  background: var(--branco);
  border: 1px solid var(--linha);
  padding: 2rem 1.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--laranja);
  transition: width var(--transicao);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: transparent; }
.card:hover::before { width: 100%; }
.card h3 { line-height: 1.25; }
.card p { color: var(--cinza-medio); font-size: 0.94rem; line-height: 1.6; }
.card .link-seta { margin-top: auto; padding-top: 0.5rem; }

.card--foto { padding: 0; overflow: hidden; height: 100%; }
.card--foto .card__num,
.card--foto h3,
.card--foto p { padding-inline: 1.85rem; }
.card--foto .card__num { padding-top: 1.5rem; }
.card--foto h3 { min-height: 2.5em; }
.card--foto p { padding-bottom: 2rem; flex: 1; }
.card__foto {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--azul-noite);
  flex: 0 0 auto;
  position: relative;
}
.card__foto picture {
  position: absolute;
  inset: 0;
  display: block;
}
.card__foto img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 500ms var(--transicao);
}
.card--foto:hover .card__foto img { transform: scale(1.05); }

.card__num {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--cinza-medio);
}

.icone {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--azul-noite);
  color: var(--ouro);
  margin-bottom: 0.5rem;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.icone svg { width: 24px; height: 24px; }

/* Card de produto — com lista de itens */
.produto {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--linha);
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.produto:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); }
.produto__foto {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--azul-noite);
  flex: 0 0 auto;
}
.produto__foto picture {
  position: absolute;
  inset: 0;
  display: block;
}
.produto__foto img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 500ms var(--transicao);
}
.produto:hover .produto__foto img { transform: scale(1.05); }
.produto__selo {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.4rem 0.85rem;
  background: var(--laranja);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.produto__faixa { height: 5px; background: linear-gradient(90deg, var(--azul), var(--laranja) 60%, var(--ouro)); }
.produto__corpo { padding: 2rem 1.85rem 2.2rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.produto__itens { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; }
.produto__itens li {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  padding: 0.32rem 0.6rem;
  background: var(--cinza-fundo);
  color: var(--azul-escuro);
  border: 1px solid var(--linha);
}

/* ---------- 10. Tabela de specs ---------- */

.specs { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.specs caption { text-align: left; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cinza-medio); padding-bottom: 0.9rem; }
.specs th, .specs td { text-align: left; padding: 0.95rem 1rem; border-bottom: 1px solid var(--linha); }
.specs thead th { background: var(--azul-noite); color: #fff; font-size: 0.74rem; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 700; border-bottom: 0; }
.specs tbody tr:nth-child(even) { background: var(--cinza-fundo); }
.specs td:first-child { font-weight: 600; }
.tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 11. Etapas / processo ---------- */

.etapas { counter-reset: etapa; display: grid; gap: 0; }
.etapa {
  counter-increment: etapa;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 2rem 0;
  border-top: 1px solid var(--linha);
  align-items: start;
}
.etapa:last-child { border-bottom: 1px solid var(--linha); }
.etapa::before {
  content: "0" counter(etapa);
  font-family: var(--mono);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 500;
  color: var(--cinza-claro);
  line-height: 1;
  letter-spacing: -0.03em;
}
.etapa h3 { margin-bottom: 0.55rem; }
.etapa p { color: var(--cinza-medio); max-width: 62ch; }
.secao--escura .etapa, .secao--tinta .etapa { border-color: var(--linha-escura); }
.secao--escura .etapa::before, .secao--tinta .etapa::before { color: rgba(255, 255, 255, 0.2); }
.secao--escura .etapa p, .secao--tinta .etapa p { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 600px) {
  .etapa { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* ---------- 12. FAQ ---------- */

.faq { border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  list-style: none;
  transition: color var(--transicao);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--azul); }
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--laranja);
  transition: transform var(--transicao);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: 1.6rem; color: var(--cinza-medio); max-width: var(--largura-texto); }
.faq details > div p + p { margin-top: 0.9rem; }

/* ---------- 13. CTA em faixa ---------- */

.faixa-cta {
  background: var(--laranja);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.faixa-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 22px);
}
.faixa-cta .wrap { position: relative; }
.faixa-cta__grade {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(2.75rem, 6vw, 4.25rem);
}
.faixa-cta h2 { max-width: 24ch; }
.faixa-cta p { max-width: 46ch; margin-top: 0.9rem; font-weight: 300; font-size: 1.075rem; }
.faixa-cta .btn { --btn-bg: #fff; --btn-fg: var(--laranja); }
.faixa-cta .btn:hover { box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.35); }

/* CTA dentro de post do blog */
.cta-post {
  background: var(--azul-noite);
  color: #fff;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  margin-block: clamp(2rem, 5vw, 3rem);
  clip-path: polygon(0 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% 100%, var(--chanfro) 100%, 0 calc(100% - var(--chanfro)));
}
.cta-post h3 { font-size: 1.35rem; margin-bottom: 0.75rem; }
.cta-post p { color: rgba(255, 255, 255, 0.78); margin-bottom: 1.5rem; max-width: 54ch; }

/* ---------- 14. Formulário ---------- */

.form { display: grid; gap: 1.15rem; }
.form__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 620px) { .form__linha { grid-template-columns: 1fr; } }

.campo { display: flex; flex-direction: column; gap: 0.45rem; }
.campo label {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--preto);
}
.campo label .req { color: var(--laranja); }

/* Sobre fundo escuro o cinza médio não alcança contraste legível — o rótulo some.
   Branco quase pleno resolve, e o mono já dá o ar técnico sem depender da cor. */
.secao--escura .campo label,
.secao--tinta .campo label,
.hero .campo label,
.modal-zap .campo label { color: rgba(255, 255, 255, 0.92); }

.secao--escura .campo input,
.secao--escura .campo select,
.secao--escura .campo textarea,
.secao--tinta .campo input,
.secao--tinta .campo select,
.secao--tinta .campo textarea,
.modal-zap .campo input,
.modal-zap .campo textarea {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}
.secao--escura .campo input::placeholder,
.secao--escura .campo textarea::placeholder,
.secao--tinta .campo textarea::placeholder,
.modal-zap .campo textarea::placeholder { color: rgba(255, 255, 255, 0.5); }

.secao--escura .campo input:focus,
.secao--escura .campo select:focus,
.secao--escura .campo textarea:focus,
.secao--tinta .campo input:focus,
.secao--tinta .campo textarea:focus,
.modal-zap .campo input:focus,
.modal-zap .campo textarea:focus {
  border-color: var(--ouro);
  box-shadow: 0 0 0 3px rgba(250, 144, 46, 0.24);
  background: rgba(255, 255, 255, 0.1);
}

.secao--escura .consentimento,
.secao--tinta .consentimento,
.modal-zap .consentimento { color: rgba(255, 255, 255, 0.8); }
.secao--escura .consentimento a,
.secao--tinta .consentimento a,
.modal-zap .consentimento a { color: var(--ouro); }

.campo input,
.campo select,
.campo textarea {
  font: inherit;
  font-size: 0.98rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--linha);
  background: var(--branco);
  color: var(--preto);
  border-radius: 0;
  transition: border-color var(--transicao), box-shadow var(--transicao);
  width: 100%;
}
.campo textarea { resize: vertical; min-height: 130px; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(0, 104, 160, 0.16);
}
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: var(--laranja); }
.campo .erro { font-size: 0.8rem; color: var(--laranja); font-weight: 600; min-height: 1.1em; }

.consentimento {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.84rem;
  color: var(--cinza-medio);
  line-height: 1.5;
}
.consentimento input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--laranja); }
.consentimento a { color: var(--azul); text-decoration: underline; }

.form__status { font-size: 0.9rem; font-weight: 600; min-height: 1.4em; }
.form__status[data-tipo="erro"] { color: var(--laranja); }
.form__status[data-tipo="ok"] { color: #0a7d40; }

.btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

/* ---------- 15. WhatsApp flutuante ---------- */

/* Só o ícone: o canal principal deste mercado é e-mail e formulário, então o
   WhatsApp fica disponível sem competir com o CTA da página. */
.zap {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: #128c7e;
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.4);
  transition: transform var(--transicao), background var(--transicao),
    box-shadow var(--transicao);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.zap:hover {
  transform: translateY(-3px);
  background: #0f7a6d;
  box-shadow: 0 16px 34px -10px rgba(0, 0, 0, 0.5);
}
.zap svg { width: 26px; height: 26px; }

/* ---------- 15b. Modal do WhatsApp ---------- */

.modal-zap {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}
.modal-zap[data-aberto="true"] { display: block; }

.modal-zap__fundo {
  position: absolute;
  inset: 0;
  background: rgba(0, 28, 49, 0.72);
  backdrop-filter: blur(3px);
  animation: modal-fundo 220ms ease-out;
}

.modal-zap__painel {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(100% - 2rem, 480px);
  max-height: min(88dvh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--azul-noite);
  color: #fff;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
  animation: modal-painel 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  clip-path: polygon(0 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% 100%, var(--chanfro) 100%, 0 calc(100% - var(--chanfro)));
}

@keyframes modal-fundo { from { opacity: 0; } }
@keyframes modal-painel { from { opacity: 0; translate: -50% -46%; } }
@media (prefers-reduced-motion: reduce) {
  .modal-zap__fundo, .modal-zap__painel { animation: none; }
}

.modal-zap h2 { font-size: clamp(1.35rem, 3.5vw, 1.7rem); margin-bottom: 0.75rem; }
.modal-zap__texto {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 1.75rem;
}
.modal-zap .form { gap: 0.9rem; }
.modal-zap .btn { background: #128c7e; border-color: #128c7e; }
.modal-zap .btn:hover { box-shadow: 0 14px 28px -12px rgba(18, 140, 126, 0.7); }

.modal-zap__x {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transicao);
}
.modal-zap__x:hover { color: #fff; }

/* ---------- 16. Rodapé ---------- */

.rodape {
  background: var(--azul-tinta);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  border-top: 5px solid var(--laranja);
}
.rodape__grade {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3.5rem;
}
@media (max-width: 900px) { .rodape__grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rodape__grade { grid-template-columns: 1fr; } }

.rodape img { height: 62px; width: auto; margin-bottom: 1.4rem; }
.rodape h3 {
  font-size: 0.74rem;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 1.15rem;
}
.rodape li { margin-bottom: 0.65rem; }
.rodape [hidden] { display: none !important; }
.rodape a { border-bottom: 1px solid transparent; transition: color var(--transicao), border-color var(--transicao); }
.rodape a:hover { color: #fff; border-color: var(--laranja); }
.rodape address { font-style: normal; line-height: 1.7; }

.rodape__base {
  border-top: 1px solid var(--linha-escura);
  padding-block: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}
.rodape__base .num { letter-spacing: 0.02em; }

/* ---------- 17. Blog ---------- */

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--linha);
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); }
.post-card__capa { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--azul-noite); }
.post-card__capa img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--transicao); }
.post-card:hover .post-card__capa img { transform: scale(1.05); }
.post-card__corpo { padding: 1.6rem 1.5rem 1.8rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.post-card h3 { font-size: 1.13rem; line-height: 1.3; }
.post-card p { font-size: 0.9rem; color: var(--cinza-medio); line-height: 1.6; }
.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--linha);
}

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  background: var(--azul-noite);
  color: #fff;
}
.tag--laranja { background: var(--laranja); }

/* Filtro de categorias */
.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.filtro {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--linha);
  background: var(--branco);
  transition: var(--transicao);
}
.filtro:hover { border-color: var(--azul); color: var(--azul); }
.filtro[aria-current="true"] { background: var(--azul-noite); color: #fff; border-color: var(--azul-noite); }

/* Corpo do artigo */
.artigo { max-width: var(--largura-texto); }
.artigo > * + * { margin-top: 1.35rem; }
.artigo p { line-height: 1.72; }
.artigo p:first-of-type { font-size: 1.1rem; }
.artigo p:first-of-type strong { font-weight: 700; }
.artigo h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 3px solid var(--azul-noite);
}
.artigo h3 { font-size: 1.2rem; margin-top: 2rem; }
.artigo ul, .artigo ol { display: grid; gap: 0.7rem; }
.artigo ul li { position: relative; padding-left: 1.6rem; }
.artigo ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  background: var(--laranja);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.artigo ol { counter-reset: item; }
.artigo ol li { counter-increment: item; position: relative; padding-left: 2.2rem; }
.artigo ol li::before {
  content: counter(item, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--laranja);
  font-weight: 500;
}
.artigo strong { font-weight: 700; }
.artigo a:not(.btn):not(.link-seta) { color: var(--azul); border-bottom: 1px solid rgba(0, 104, 160, 0.35); }
.artigo a:not(.btn):not(.link-seta):hover { border-color: var(--azul); background: rgba(0, 104, 160, 0.06); }
.artigo blockquote {
  border-left: 4px solid var(--laranja);
  padding: 0.4rem 0 0.4rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 300;
  font-style: italic;
  color: var(--azul-escuro);
}
.artigo table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.artigo th, .artigo td { text-align: left; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--linha); }
.artigo thead th { background: var(--azul-noite); color: #fff; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; }

.post-head { display: grid; gap: 1.5rem; }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.autor-box {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.85rem;
  background: var(--cinza-fundo);
  border-left: 4px solid var(--azul);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.autor-box img { width: 58px; height: auto; flex: none; }
.autor-box h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.autor-box p { font-size: 0.88rem; color: var(--cinza-medio); line-height: 1.6; }

.paginacao { display: flex; justify-content: center; gap: 0.5rem; margin-top: 3.5rem; }
.paginacao a, .paginacao span {
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding-inline: 0.75rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  border: 1px solid var(--linha);
  transition: var(--transicao);
}
.paginacao a:hover { border-color: var(--azul); color: var(--azul); }
.paginacao [aria-current="page"] { background: var(--azul-noite); color: #fff; border-color: var(--azul-noite); }

/* ---------- 18. Avisos ---------- */

.vazio {
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) 1.5rem;
  border: 2px dashed var(--linha);
  color: var(--cinza-medio);
}

/* ---------- 17a. Catálogo ---------- */

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

.busca-catalogo {
  display: flex;
  gap: 0.6rem;
  margin-top: 2rem;
  max-width: 640px;
}
.busca-catalogo input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--linha-escura);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  border-radius: 0;
}
.busca-catalogo input::placeholder { color: rgba(255, 255, 255, 0.5); }
.busca-catalogo input:focus {
  outline: none;
  border-color: var(--ouro);
  background: rgba(255, 255, 255, 0.12);
}
.busca-catalogo .btn { flex: none; }
@media (max-width: 560px) {
  .busca-catalogo { flex-direction: column; }
}

/* Cards de família com capa — a entrada do catálogo é visual */
.familia-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: var(--gap);
}

.familia-card {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--linha);
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.familia-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); }

.familia-card__capa {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--azul-noite);
  overflow: hidden;
}
.familia-card__capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--transicao);
}
.familia-card:hover .familia-card__capa img { transform: scale(1.05); }

.familia-card__contagem {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.4rem 0.85rem;
  background: var(--laranja);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.familia-card__corpo {
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}
.familia-card__corpo h3 { font-size: 1.08rem; line-height: 1.3; }
.familia-card__corpo p { font-size: 0.9rem; color: var(--cinza-medio); line-height: 1.55; }
.familia-card__corpo .link-seta { margin-top: auto; padding-top: 0.4rem; }

/* Capa da família como fundo do cabeçalho da página */
.capa--foto { position: relative; isolation: isolate; overflow: hidden; }
.capa--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--capa-foto);
  background-size: cover;
  background-position: center;
  opacity: 0.34;
}

.capa--familia { position: relative; isolation: isolate; overflow: hidden; }
.capa--familia::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--capa-familia);
  background-size: cover;
  background-position: center;
  opacity: 0.22;
}

/* Grade densa: catálogo é para varrer com o olho, não para contemplar */
.produto-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
}

.produto-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.15rem 1.25rem 1.25rem;
  background: var(--branco);
  transition: background var(--transicao), transform var(--transicao);
}
.produto-card:hover { background: var(--cinza-fundo); }
.produto-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.produto-card__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; min-height: 22px; }
.produto-card__cod {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--cinza-medio);
}
.produto-card__un {
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
}
.produto-card .tag { font-size: 0.6rem; padding: 0.15rem 0.4rem; }

/* ---------- 17b. Foto com legenda ---------- */

.foto-equipe { margin: 0 0 2rem; }
.foto-equipe img {
  width: 100%;
  height: auto;
  display: block;
  /* Mesmo bisel do símbolo da marca, para a foto não parecer colada na página */
  clip-path: polygon(0 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% 100%, var(--chanfro) 100%, 0 calc(100% - var(--chanfro)));
}
.foto-equipe figcaption {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--cinza-medio);
  margin-top: 0.85rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--laranja);
}

/* ---------- 18a. Carrossel ---------- */
/* Rolagem horizontal nativa com ancoragem: funciona sem JS, e o JS só acrescenta
   as setas e os pontos. Teclado e leitor de tela continuam navegando normalmente. */

.carrossel { position: relative; }

.carrossel__palco {
  position: relative;
  /* Calha para as setas: os cards começam depois dela, não por baixo do botão. */
  padding-inline: 58px;
}

.carrossel__trilho {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Espaço para a sombra do hover não ser cortada na rolagem */
  padding: 6px 0 1.25rem;
  margin: -6px 0 0;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }

.carrossel__item {
  flex: 0 0 clamp(268px, 30%, 380px);
  scroll-snap-align: start;
  display: flex;
}
.carrossel__item > * { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .carrossel__trilho { scroll-behavior: auto; }
}

.carrossel__controles {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* As setas ficam sobre as laterais dos cards — é onde a mão procura.
   Fundo sólido para não sumirem sobre a foto. A seta inativa fica visível
   (só mais fraca): esconder com opacity 0 faz parecer que o carrossel não tem seta. */
.carrossel__seta {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 5;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: var(--branco);
  color: var(--azul-noite);
  border: 1px solid var(--linha);
  box-shadow: 0 6px 22px -8px rgba(0, 43, 74, 0.45);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao), opacity var(--transicao),
    transform var(--transicao), border-color var(--transicao);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.carrossel__seta[data-dir="-1"] { left: 2px; }
.carrossel__seta[data-dir="1"] { right: 2px; }

.carrossel__seta:hover:not(:disabled) {
  background: var(--laranja);
  border-color: var(--laranja);
  color: #fff;
  transform: scale(1.06);
}
.carrossel__seta:disabled { opacity: 0.4; cursor: default; }
.carrossel__seta svg { width: 20px; height: 20px; }

/* Em seção escura a seta continua clara — contraste alto contra o fundo azul. */
.secao--escura .carrossel__seta,
.secao--tinta .carrossel__seta {
  background: var(--branco);
  color: var(--azul-noite);
  border-color: transparent;
}
.secao--escura .carrossel__seta:hover:not(:disabled),
.secao--tinta .carrossel__seta:hover:not(:disabled) { background: var(--laranja); color: #fff; }

/* Degradê nas bordas: sinaliza que há mais conteúdo além do que se vê. */
.carrossel__palco::before,
.carrossel__palco::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 1.25rem;
  width: clamp(28px, 5%, 64px);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transicao);
}
.carrossel__palco::before { left: 0; background: linear-gradient(90deg, var(--branco), transparent); }
.carrossel__palco::after { right: 0; background: linear-gradient(270deg, var(--branco), transparent); }
.carrossel[data-inicio="false"] .carrossel__palco::before { opacity: 1; }
.carrossel[data-fim="false"] .carrossel__palco::after { opacity: 1; }

.secao--cinza .carrossel__palco::before { background: linear-gradient(90deg, var(--cinza-fundo), transparent); }
.secao--cinza .carrossel__palco::after { background: linear-gradient(270deg, var(--cinza-fundo), transparent); }
.secao--escura .carrossel__palco::before { background: linear-gradient(90deg, var(--azul-noite), transparent); }
.secao--escura .carrossel__palco::after { background: linear-gradient(270deg, var(--azul-noite), transparent); }
.secao--tinta .carrossel__palco::before { background: linear-gradient(90deg, var(--azul-tinta), transparent); }
.secao--tinta .carrossel__palco::after { background: linear-gradient(270deg, var(--azul-tinta), transparent); }

.carrossel__pontos { display: flex; gap: 0.4rem; }
.carrossel__ponto {
  width: 28px;
  height: 4px;
  padding: 0;
  border: 0;
  background: var(--linha);
  cursor: pointer;
  transition: background var(--transicao), width var(--transicao);
}
.carrossel__ponto[aria-current="true"] { background: var(--laranja); width: 44px; }
.secao--escura .carrossel__ponto,
.secao--tinta .carrossel__ponto { background: rgba(255, 255, 255, 0.22); }
.secao--escura .carrossel__ponto[aria-current="true"],
.secao--tinta .carrossel__ponto[aria-current="true"] { background: var(--ouro); }

.carrossel__contador {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--cinza-medio);
  font-variant-numeric: tabular-nums;
}
.secao--escura .carrossel__contador,
.secao--tinta .carrossel__contador { color: rgba(255, 255, 255, 0.6); }

/* Sem JS o carrossel continua sendo uma faixa rolável — só escondemos os controles. */
.carrossel:not([data-pronto]) .carrossel__controles { display: none; }

@media (max-width: 640px) {
  .carrossel__item { flex-basis: min(84%, 320px); }
  .carrossel__palco { padding-inline: 48px; }
  .carrossel__seta { width: 44px; height: 44px; }
  .carrossel__controles { justify-content: center; }
}

/* ---------- 18b. Faixa do vendedor ---------- */
/* Injetada pelo servidor quando o visitante chega pelo link de um vendedor.
   Fica acima do cabeçalho e rola junto — o objetivo é identificar, não perseguir. */

.faixa-vendedor {
  background: var(--azul-tinta);
  color: #fff;
  border-bottom: 2px solid var(--laranja);
}

.faixa-vendedor__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.5rem;
  padding-block: 0.7rem;
}

.faixa-vendedor__quem { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }

.faixa-vendedor__quem img,
.faixa-vendedor__iniciais {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--azul);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.faixa-vendedor__quem strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
}
.faixa-vendedor__quem span {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.15rem;
}

.faixa-vendedor__acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.faixa-vendedor__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  transition: background var(--transicao), border-color var(--transicao);
}
.faixa-vendedor__btn:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.faixa-vendedor__btn--zap { background: #128c7e; border-color: #128c7e; }
.faixa-vendedor__btn--zap:hover { background: #0f7a6d; border-color: #0f7a6d; }

@media (max-width: 560px) {
  .faixa-vendedor__interno { justify-content: center; text-align: center; }
  .faixa-vendedor__quem { flex: 1 1 100%; justify-content: center; }
  .faixa-vendedor__acoes { flex: 1 1 100%; justify-content: center; }
}

@media print { .faixa-vendedor { display: none; } }

/* ---------- 19. Revelação no scroll ---------- */

[data-revelar] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 620ms var(--transicao), transform 620ms var(--transicao);
}
[data-revelar].visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-revelar] { opacity: 1; transform: none; }
}

/* =============================================================
   20. Mobile
   Ajustes concentrados aqui em vez de espalhados: em telas pequenas
   o problema quase nunca é layout quebrado — é densidade, alvo de
   toque pequeno demais e texto que fica grande a ponto de empurrar
   o conteúdo para fora da primeira dobra.
   ============================================================= */

@media (max-width: 768px) {
  :root {
    --secao-y: 3.25rem;
    --gap: 1.1rem;
    /* Título gigante no celular ocupa a tela inteira e esconde o CTA. */
    --t-display: clamp(2.05rem, 8.6vw, 2.9rem);
    --t-h1: clamp(1.8rem, 7.4vw, 2.4rem);
    --t-h2: clamp(1.4rem, 5.6vw, 1.8rem);
  }

  body { font-size: 1rem; line-height: 1.62; }
  .wrap { width: calc(100% - 2rem); }

  /* Toda ação principal vira alvo largo e confortável. */
  .btn { width: 100%; padding: 1.05rem 1.4rem; }
  .hero__cta { flex-direction: column; gap: 0.7rem; }
  .hero__cta .btn { width: 100%; }
  .faixa-cta__grade { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .faixa-cta .btn { width: 100%; }

  .hero__grade { padding-block: 2.75rem 3rem; }
  .lead { font-size: 1.02rem; }

  /* A ficha do hero é apoio; no celular ela vem depois da chamada. */
  .ficha { padding: 1.5rem 1.25rem; }
  .ficha__lista li { font-size: 0.9rem; padding: 0.62rem 0; }

  .capa { padding-block: 2.25rem 2rem; }
  .cabecalho-secao { margin-bottom: 1.75rem; }

  /* Tabela larga não quebra: ganha rolagem própria com dica visual. */
  .tabela-scroll {
    margin-inline: -1rem;
    padding-inline: 1rem;
    -webkit-overflow-scrolling: touch;
  }
  .specs th, .specs td { padding: 0.7rem 0.75rem; font-size: 0.88rem; }

  .etapa { padding: 1.5rem 0; }
  .faq summary { font-size: 0.98rem; padding: 1.2rem 0; gap: 1rem; }
  .faq details > div { padding-bottom: 1.25rem; font-size: 0.94rem; }

  .artigo p:first-of-type { font-size: 1.04rem; }
  .artigo h2 { margin-top: 2.25rem; padding-top: 1.1rem; }

  /* O flutuante não pode cobrir o botão da última seção. */
  .zap { right: 1rem; bottom: 1rem; }

  .rodape { padding-top: 2.75rem; }
  .rodape__grade { gap: 2rem; padding-bottom: 2.25rem; }
  .rodape__base { flex-direction: column; align-items: flex-start; gap: 0.6rem; }

  .produto-grade { grid-template-columns: 1fr 1fr; }
  .produto-card { padding: 0.95rem 1rem 1.1rem; }
  .produto-card h3 { font-size: 0.88rem; }

  .autor-box { flex-direction: column; gap: 0.9rem; padding: 1.35rem; }
  .cta-post { padding: 1.5rem 1.25rem; }
  .cta-post .btn { width: 100%; }

  /* Sticky em coluna única faz o bloco perseguir a rolagem sem necessidade. */
  .secao aside[style*="sticky"] { position: static !important; }
}

@media (max-width: 480px) {
  .produto-grade { grid-template-columns: 1fr; }
  .hero__provas { gap: 1.25rem 1rem; padding-top: 1.75rem; margin-top: 2.25rem; }
  .hero__prova span { font-size: 0.7rem; }
  .paginacao a, .paginacao span { min-width: 40px; height: 40px; }
  .filtros { gap: 0.35rem; }
  .filtro { padding: 0.5rem 0.8rem; font-size: 0.7rem; }
}

/* Em tela baixa e deitada o modal não pode ficar maior que a viewport. */
@media (max-height: 560px) {
  .modal-zap__painel { top: 0; translate: -50% 0; max-height: 100dvh; }
}

/* ---------- 21. Impressão ---------- */

@media print {
  .topo, .zap, .faixa-cta, .rodape__base { display: none; }
  body { color: #000; background: #fff; }
  .secao--escura, .secao--tinta, .hero, .capa { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}