/* Hallmark · genre: modern-minimal · macrostructure: Marquee Hero em vídeo com faixas de ritmo alternado · nav: N1b · footer: Ft5 Statement
 * theme: custom (marca R&B: papel branco · tinta petróleo · acento laranja · Open Sans condensada + Open Sans) · design-system: design.md
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
 *
 * O HTML e os textos são os do protótipo original, sem nenhuma alteração.
 * Este arquivo define a aparência compartilhada do site e a da página inicial. Cada página interna soma o seu
 * próprio arquivo (rb-empresa.css, rb-produtos.css). Cores, fontes e medidas vêm de tokens.css.
 */

/* ---------- Base ---------- */

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-sm));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}

h2 {
  font-size: var(--text-2xl);
  line-height: 1.04;
}

button {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

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

.skip {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 100;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transform: translateY(-300%);
}

.skip:focus {
  transform: none;
}

.reb-video-home .crumb {
  display: none;
}

/* ---------- Peças que se repetem ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  color: var(--color-accent-deep);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 2.5rem;
  height: var(--beam);
  background: var(--color-accent);
}

.button,
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: var(--space-sm) var(--space-lg);
  overflow: hidden;
  background: var(--color-accent-deep);
  color: var(--color-on-accent);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}

.button::before,
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-ink);
  transform: translateY(101%);
  transition: transform var(--dur-short) var(--ease-out);
}

.button:hover::before,
.button:focus-visible::before,
.btn:hover::before,
.btn:focus-visible::before {
  transform: none;
}

.button:active,
.btn:active {
  transform: scale(0.98);
}

.text-link {
  display: inline-block;
  padding-bottom: var(--space-2xs);
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) left bottom / 0 var(--beam) no-repeat,
    linear-gradient(var(--color-ink), var(--color-ink)) left bottom / 100% var(--rule) no-repeat;
  color: var(--color-ink);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: background-size var(--dur-med) var(--ease-out);
}

.text-link:hover,
.text-link:focus-visible {
  background-size:
    100% var(--beam),
    100% var(--rule);
}

/* Moldura criada pelo script em volta das fotos: segura o zoom e a varredura */
.rb-frame {
  position: relative;
  overflow: hidden;
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
}

.rb-frame img {
  transition: scale var(--dur-long) var(--ease-out);
}

.rb-scan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--beam);
  background: var(--color-accent);
  box-shadow: 0 0 1.25rem 0.125rem color-mix(in oklch, var(--color-accent) 70%, transparent);
  opacity: 0;
  pointer-events: none;
}

/* Marcas de mira nos cantos da foto */
.rb-frame::after {
  --mark: var(--color-on-accent);
  --len: 1.125rem;
  content: "";
  position: absolute;
  inset: var(--space-sm);
  background:
    linear-gradient(var(--mark), var(--mark)) left top / var(--len) var(--beam) no-repeat,
    linear-gradient(var(--mark), var(--mark)) left top / var(--beam) var(--len) no-repeat,
    linear-gradient(var(--mark), var(--mark)) right top / var(--len) var(--beam) no-repeat,
    linear-gradient(var(--mark), var(--mark)) right top / var(--beam) var(--len) no-repeat,
    linear-gradient(var(--mark), var(--mark)) left bottom / var(--len) var(--beam) no-repeat,
    linear-gradient(var(--mark), var(--mark)) left bottom / var(--beam) var(--len) no-repeat,
    linear-gradient(var(--mark), var(--mark)) right bottom / var(--len) var(--beam) no-repeat,
    linear-gradient(var(--mark), var(--mark)) right bottom / var(--beam) var(--len) no-repeat;
  opacity: 0;
  transform: scale(1.05);
  transition:
    opacity var(--dur-short) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
  pointer-events: none;
}

/* ---------- Cabeçalho ---------- */

body > header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-lg);
  height: var(--header-h);
  padding-inline: var(--pad);
  background: color-mix(in oklch, var(--color-paper) 90%, transparent);
  border-bottom: var(--rule) solid var(--color-rule);
  backdrop-filter: saturate(1.4) blur(14px);
  transition: box-shadow var(--dur-short) var(--ease-out);
}

body > header.is-scrolled {
  box-shadow: 0 0.75rem 1.75rem -1.25rem color-mix(in oklch, var(--color-ink) 40%, transparent);
}

/* Fio laranja que acompanha a rolagem da página */
body > header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(var(--rule) * -1);
  left: 0;
  height: var(--beam);
  background: var(--color-accent);
  transform: scaleX(var(--rb-scroll, 0));
  transform-origin: left;
  pointer-events: none;
}

.brand {
  display: block;
  border-radius: var(--radius-sm);
}

.brand img {
  width: auto;
  height: 2.75rem;
}

.menu {
  display: none;
}

body > header nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.875rem, 0.2rem + 1.5vw, 2rem);
  font-size: var(--text-sm);
  font-weight: 600;
}

body > header nav a,
body > header nav summary {
  padding-block: var(--space-2xs);
  background: linear-gradient(var(--color-accent), var(--color-accent)) left bottom / 0 var(--beam) no-repeat;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-size var(--dur-short) var(--ease-out);
}

body > header nav a:hover,
body > header nav a:focus-visible,
body > header nav summary:hover,
body > header nav details[open] > summary {
  background-size: 100% var(--beam);
}

.institutional-menu {
  position: relative;
}

.institutional-menu summary {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  cursor: pointer;
  list-style: none;
}

.institutional-menu summary::-webkit-details-marker {
  display: none;
}

.institutional-menu summary::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: var(--beam) solid currentColor;
  border-bottom: var(--beam) solid currentColor;
  transform: translateY(-0.125rem) rotate(45deg);
  transition: transform var(--dur-short) var(--ease-out);
}

.institutional-menu[open] summary::after {
  transform: translateY(0.125rem) rotate(225deg);
}

.institutional-menu > div {
  position: absolute;
  top: calc(100% + var(--space-sm));
  left: calc(var(--space-sm) * -1);
  display: grid;
  min-width: 17rem;
  padding: var(--space-2xs);
  background: var(--color-paper);
  border: var(--rule) solid var(--color-rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
}

body > header .institutional-menu > div a {
  padding: var(--space-xs) var(--space-sm);
  background: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease-out);
}

body > header .institutional-menu > div a:hover,
body > header .institutional-menu > div a:focus-visible {
  background: var(--color-paper-2);
}

body > header nav .contact-link {
  order: 2;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-accent-deep);
  color: var(--color-on-accent);
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-short) var(--ease-out);
}

body > header nav .contact-link:hover,
body > header nav .contact-link:focus-visible {
  background: var(--color-ink);
}

.switch {
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule) solid var(--color-rule);
  border-radius: var(--radius-sm);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-decoration: none;
  transition:
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}

.switch:hover,
.switch:focus-visible {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

/* ---------- Abertura em vídeo ---------- */

main > section {
  padding: var(--space-section) var(--pad);
}

main > .cinematic-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  align-items: end;
  gap: var(--space-md) var(--space-lg);
  min-height: clamp(35rem, calc(100svh - var(--header-h)), 60rem);
  padding-block: var(--space-2xl) var(--space-md);
  overflow: clip;
  background: var(--color-ink-deep);
  color: var(--color-on-accent);
}

.hero-video-background {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Véu que garante a leitura do texto sobre o vídeo */
.cinematic-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      100deg,
      color-mix(in oklch, var(--color-ink-deep) 88%, transparent) 0%,
      color-mix(in oklch, var(--color-ink-deep) 58%, transparent) 40%,
      transparent 76%
    ),
    linear-gradient(0deg, color-mix(in oklch, var(--color-ink-deep) 72%, transparent) 0%, transparent 34%);
}

/* Feixe laranja que fecha a abertura */
.cinematic-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.1875rem;
  background: var(--color-accent);
  transform-origin: left;
}

.hero-video-copy {
  grid-column: 1 / -1;
  max-width: 60rem;
  padding-bottom: var(--space-lg);
}

.hero-video-copy .eyebrow {
  color: var(--color-on-accent);
}

.hero-video-copy h1 {
  max-width: 7.6em;
  margin-bottom: var(--space-md);
  font-size: var(--text-display);
  line-height: 0.92;
  letter-spacing: -0.022em;
}

.hero-video-copy .lead {
  max-width: 36rem;
  margin-bottom: var(--space-lg);
  color: color-mix(in oklch, var(--color-on-accent) 90%, transparent);
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
  line-height: 1.55;
}

.hero-video-copy .button::before {
  background: var(--color-paper);
}

.hero-video-copy .button:hover,
.hero-video-copy .button:focus-visible {
  color: var(--color-ink);
}

.cinematic-hero :focus-visible {
  outline-color: var(--color-on-accent);
}

.hero-video-credit {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  color: color-mix(in oklch, var(--color-on-accent) 78%, transparent);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

.hero-video-toggle {
  grid-column: 2;
  grid-row: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding: var(--space-2xs) var(--space-sm);
  background: color-mix(in oklch, var(--color-paper) 14%, transparent);
  border: var(--rule) solid color-mix(in oklch, var(--color-paper) 42%, transparent);
  border-radius: var(--radius-pill);
  color: var(--color-on-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background-color var(--dur-short) var(--ease-out);
}

.hero-video-toggle:hover {
  background: color-mix(in oklch, var(--color-paper) 26%, transparent);
}

.hero-video-toggle:active {
  transform: scale(0.98);
}

/* Ícone de pausa, que vira triângulo quando o vídeo está parado */
.hero-video-toggle::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.75rem;
  border-inline: 0.1875rem solid currentColor;
}

.video-paused .hero-video-toggle::before {
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ---------- Conheça a R&B ---------- */

main > .home-introduction {
  padding: 0;
}

.home-company {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto auto 1fr;
  column-gap: var(--space-md);
  padding: var(--space-section) var(--pad);
}

.home-company > h2 {
  grid-column: 1 / 6;
  grid-row: 1;
  margin-bottom: var(--space-md);
  font-size: var(--text-3xl);
  line-height: 1;
}

.home-company > p {
  grid-column: 1 / 6;
  grid-row: 2;
  max-width: 34rem;
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.65;
}

.home-company > .text-link {
  grid-column: 1 / 6;
  grid-row: 3;
  justify-self: start;
  margin-top: var(--space-lg);
}

.home-company > figure {
  position: relative;
  grid-column: 7 / 13;
  grid-row: 1 / 5;
  cursor: zoom-in;
  border-radius: var(--radius-md);
}

.home-company figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.home-company figure .rb-frame img {
  border-radius: 0;
}

.home-company figcaption {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.home-company figcaption::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: var(--beam);
  background: var(--color-accent);
  transform: translateY(-0.25rem);
}

.zoom-hint {
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.home-company .zoom-hint,
.compact-reference > .zoom-hint {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  padding: var(--space-2xs) var(--space-xs);
  background: color-mix(in oklch, var(--color-ink-deep) 70%, transparent);
  border-radius: var(--radius-pill);
  color: var(--color-on-accent);
  backdrop-filter: blur(8px);
}

/* ---------- Representadas ---------- */

.home-represented {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  column-gap: var(--space-md);
  padding: var(--space-2xl) var(--pad);
  background: var(--color-paper-2);
}

.home-represented > h2 {
  grid-column: 1 / 6;
  grid-row: 1;
  margin-bottom: var(--space-sm);
}

.home-represented > p {
  grid-column: 1 / 6;
  grid-row: 2;
  max-width: 26rem;
  color: var(--color-ink-2);
}

.home-represented > .text-link {
  grid-column: 1 / 6;
  grid-row: 3;
  align-self: start;
  justify-self: start;
  margin-top: var(--space-lg);
}

.home-brand-row {
  grid-column: 7 / 13;
  grid-row: 1 / 4;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.home-brand-row a {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  padding: var(--space-md);
  overflow: hidden;
  background: var(--color-paper);
  border-radius: var(--radius-md);
  transition:
    transform var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out);
}

.home-brand-row a::after,
.product::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 0.1875rem;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}

.home-brand-row a::after {
  bottom: 0;
}

.home-brand-row img {
  width: auto;
  max-width: min(76%, 11rem);
  height: auto;
  max-height: 3.25rem;
  object-fit: contain;
}

/* ---------- Equipamentos portáteis ---------- */

.home-portable-story {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  column-gap: var(--space-md);
}

.home-portable-story > div {
  grid-column: 1 / 6;
}

.home-portable-story h2 {
  margin-bottom: var(--space-md);
  font-size: var(--text-3xl);
  line-height: 1;
}

.home-portable-story p {
  max-width: 32rem;
  margin-bottom: var(--space-lg);
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.65;
}

.home-portable-story > figure {
  grid-column: 7 / 13;
}

.home-portable-story figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.home-portable-story .rb-frame img {
  border-radius: 0;
}

.home-portable-story figcaption {
  margin-top: var(--space-sm);
  padding-top: var(--space-xs);
  border-top: var(--rule) solid var(--color-rule);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

/* ---------- Tecnologia na peça ---------- */

.nv-tech {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-md);
  border-top: var(--rule) solid var(--color-rule);
}

.nv-tech > h2 {
  grid-column: 1 / 7;
  font-size: var(--text-3xl);
  line-height: 1;
}

.nv-tech > .nv-intro {
  grid-column: 8 / 13;
  align-self: end;
  color: var(--color-ink-2);
  font-size: var(--text-md);
}

.nv-band {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.nv-band a {
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: opacity var(--dur-short) var(--ease-out);
}

.nv-band img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.nv-band .rb-frame img {
  border-radius: 0;
}

.nv-band figcaption {
  padding-top: var(--space-sm);
  color: var(--color-ink-2);
  line-height: 1.5;
}

.nv-band figcaption strong {
  display: block;
  margin-bottom: var(--space-2xs);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  line-height: 1.1;
}

.nv-band figcaption strong::after {
  content: "";
  display: block;
  width: 2rem;
  height: var(--beam);
  margin-top: var(--space-xs);
  background: var(--color-accent);
  transition: width var(--dur-med) var(--ease-out);
}

/* ---------- Faixas de declaração ---------- */

.revision-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  column-gap: var(--space-md);
}

main > .nv-tech + .revision-section {
  padding-top: 0;
}

/* Fio que se acende em laranja conforme a faixa entra na tela */
.revision-section::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1;
  height: var(--beam);
  margin-bottom: var(--space-xl);
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) left / calc(var(--rb-beam, 1) * 100%) 100% no-repeat,
    var(--color-rule);
}

.revision-section > h2 {
  grid-column: 1 / 8;
  grid-row: 2 / 4;
  max-width: 15em;
  font-size: var(--text-3xl);
  line-height: 1.02;
}

.revision-section > p {
  grid-column: 8 / 13;
  grid-row: 2;
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.65;
}

.revision-section > .text-link {
  grid-column: 8 / 13;
  grid-row: 3;
  align-self: start;
  justify-self: start;
  margin-top: var(--space-lg);
}

/* ---------- Conheça as tecnologias ---------- */

.collection {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--space-lg);
  background: var(--color-paper-2);
}

.collection > .eyebrow {
  grid-column: 1;
  grid-row: 1;
}

.collection > h2 {
  grid-column: 1;
  grid-row: 2;
  font-size: var(--text-3xl);
  line-height: 1;
}

.collection > .text-link {
  grid-column: 2;
  grid-row: 2;
  margin-bottom: var(--space-2xs);
}

.products {
  display: grid;
  gap: var(--space-md);
}

/* Na página inicial são 5 produtos: três em cima e as duas máquinas largas embaixo */
.collection > .products {
  grid-column: 1 / -1;
  grid-row: 3;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: var(--space-xl);
}

.collection .product {
  grid-column: span 2;
}

.product {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--space-md);
  overflow: hidden;
  background: var(--color-paper);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out);
}

.collection .product:nth-child(n + 4) {
  grid-column: span 3;
}

.product::after {
  top: 0;
}

.product-image {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-md);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  overflow: hidden;
  border-bottom: var(--rule) solid var(--color-rule);
  cursor: zoom-in;
}

.product-image img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  transition: scale var(--dur-long) var(--ease-out);
}

/* As duas linhas de embalagem são máquinas largas: a foto ocupa a faixa inteira */
.collection .product:nth-child(n + 4) .product-image {
  aspect-ratio: 2 / 1;
  padding: 0 var(--space-md);
}

/* As fotos da linha PackLine têm muita margem branca: preencher o quadro deixa a máquina maior */
.product-image img[src*="PackLine"] {
  object-fit: cover;
}

.product-image .zoom-hint,
.hero-product .zoom-hint {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  padding: var(--space-3xs) var(--space-xs);
  background: color-mix(in oklch, var(--color-paper) 88%, transparent);
  border: var(--rule) solid var(--color-rule);
  border-radius: var(--radius-pill);
  color: var(--color-ink-2);
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}

.product-image:hover .zoom-hint,
.product-image:focus-visible .zoom-hint,
.hero-product:hover .zoom-hint,
.hero-product:focus-visible .zoom-hint {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

.product-image:focus-visible {
  outline-offset: -4px;
}

.product > small,
.product > h3,
.product > p {
  padding-inline: var(--space-md);
}

.product > small {
  margin-bottom: var(--space-2xs);
  color: var(--color-accent-deep);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.product > h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xs);
  font-size: var(--text-xl);
  line-height: 1.1;
}

.product > h3 span {
  flex: none;
  color: var(--color-accent-deep);
  font-weight: 400;
  transition: transform var(--dur-short) var(--ease-out);
}

.product > p {
  max-width: 34rem;
  color: var(--color-ink-2);
  line-height: 1.5;
}

/* ---------- Chamada para conversa ---------- */

.cta {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xl);
  overflow: clip;
  background: var(--color-accent-deep);
  color: var(--color-on-accent);
}

/* Dois raios que convergem para o botão, como um feixe focalizado */
.cta::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--pad) + var(--space-lg)) 0 0;
  z-index: -1;
  background: var(--color-on-accent);
  opacity: 0.26;
  clip-path: inset(0 calc(var(--rb-cone, 0) * 1%) 0 0);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 100 50 0 100' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  pointer-events: none;
}

.cta .eyebrow {
  color: var(--color-on-accent);
}

.cta .eyebrow::before {
  background: var(--color-on-accent);
}

.cta h2 {
  max-width: 11em;
  margin-bottom: var(--space-md);
  font-size: clamp(2.25rem, 1.1rem + 4.6vw, 5.25rem);
  line-height: 0.96;
}

.cta p:not(.eyebrow) {
  max-width: 36rem;
  font-size: var(--text-md);
  line-height: 1.6;
}

.cta .button {
  background: var(--color-paper);
  color: var(--color-accent-deep);
}

.cta .button:hover,
.cta .button:focus-visible {
  color: var(--color-on-accent);
}

.cta :focus-visible {
  outline-color: var(--color-on-accent);
}

/* ---------- BOFA e MLT ---------- */

main > .campaign-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  padding-top: 0;
}

.revision-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
}

.revision-split > img,
.revision-split > .rb-frame {
  width: 100%;
  aspect-ratio: 1;
  background: var(--color-paper);
  border-radius: var(--radius-sm);
}

.revision-split > img,
.revision-split > .rb-frame img {
  height: 100%;
  object-fit: contain;
}

.revision-split > .rb-frame img {
  width: 100%;
}

.revision-split > .rb-frame::after {
  content: none;
}

.revision-split h2 {
  margin-bottom: var(--space-xs);
  font-size: var(--text-xl);
  line-height: 1.1;
}

.revision-split p {
  margin-bottom: var(--space-md);
  color: var(--color-ink-2);
}

/* ---------- Rodapé ---------- */

body > footer {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-md);
  padding: var(--space-2xl) var(--pad) var(--space-lg);
  background: var(--color-paper-2);
  font-size: var(--text-sm);
}

body > footer > div:first-child {
  grid-column: 1 / -1;
  grid-row: 1;
  padding-bottom: var(--space-xl);
  border-bottom: var(--rule) solid var(--color-rule);
}

body > footer strong {
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 1rem + 10.5vw, 10rem);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: -0.025em;
  line-height: 0.88;
}

body > footer p {
  color: var(--color-ink-2);
  font-size: var(--text-md);
}

body > footer > div:nth-child(2),
.institutional-footer {
  grid-row: 2;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-xs);
}

body > footer > div:nth-child(2) {
  grid-column: 1 / 5;
}

.institutional-footer {
  grid-column: 5 / 9;
}

body > footer a {
  padding-block: var(--space-3xs);
  background: linear-gradient(var(--color-accent), var(--color-accent)) left bottom / 0 var(--beam) no-repeat;
  font-weight: 600;
  text-decoration: none;
  transition: background-size var(--dur-short) var(--ease-out);
}

body > footer a:hover,
body > footer a:focus-visible {
  background-size: 100% var(--beam);
}

body > footer > small {
  grid-column: 9 / 13;
  grid-row: 2;
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  line-height: 1.6;
}

body > footer > .review-link {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: start;
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  font-weight: 400;
}

/* ---------- Janela de imagem ampliada ---------- */

.zoomable-figure {
  cursor: zoom-in;
}

.image-viewer {
  width: min(86.25rem, 96vw);
  max-width: 96vw;
  max-height: 94dvh;
  padding: 0;
  overflow: hidden;
  background: var(--color-paper);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  color: var(--color-ink);
}

.image-viewer::backdrop {
  background: color-mix(in oklch, var(--color-ink-deep) 82%, transparent);
  backdrop-filter: blur(6px);
}

.viewer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs) var(--space-md);
  border-bottom: var(--rule) solid var(--color-rule);
  font-size: var(--text-sm);
  font-weight: 600;
}

.viewer-close {
  min-height: 2.75rem;
  padding: var(--space-2xs) var(--space-sm);
  background: none;
  border: var(--rule) solid var(--color-rule);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}

.viewer-close:hover {
  background: var(--color-ink);
  color: var(--color-paper);
}

.viewer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(18.75rem, 1fr);
  height: min(45.5rem, 78dvh);
}

.viewer-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.viewer-scroll {
  flex: 1;
  min-height: 0;
  padding: var(--space-md);
  overflow: auto;
}

.viewer-stage {
  position: relative;
  max-width: none;
  margin: auto;
  aspect-ratio: 1;
}

.viewer-img {
  width: 100%;
  height: auto;
}

.viewer-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.viewer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
  border-top: var(--rule) solid var(--color-rule);
}

.viewer-controls button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-paper-2);
  border: 0;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.viewer-controls button:hover {
  background: var(--color-rule);
}

.viewer-controls button[aria-pressed="true"] {
  box-shadow: inset 0 calc(var(--beam) * -1) 0 var(--color-accent);
}

.viewer-controls output {
  min-width: 3rem;
  font-size: var(--text-sm);
  text-align: center;
}

.viewer-copy {
  padding: var(--space-lg) var(--space-md);
  overflow: auto;
  background: var(--color-paper-2);
}

.viewer-copy h2 {
  margin-bottom: var(--space-sm);
  font-size: var(--text-xl);
  line-height: 1.1;
}

.viewer-summary {
  color: var(--color-ink-2);
  line-height: 1.65;
}

.viewer-notes {
  margin-top: var(--space-md);
}

.detail-note {
  display: block;
  width: 100%;
  margin-block: var(--space-xs);
  padding: var(--space-sm);
  background: transparent;
  border: 0;
  border-left: var(--beam) solid var(--color-rule);
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out);
}

.detail-note strong {
  display: block;
  margin-bottom: var(--space-2xs);
}

.detail-note span {
  display: block;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.detail-note:hover,
.detail-note.selected {
  background: var(--color-paper);
  border-left-color: var(--color-accent);
}

.viewer-product {
  display: inline-block;
  margin-top: var(--space-md);
  padding-bottom: var(--space-3xs);
  border-bottom: var(--beam) solid var(--color-accent);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

/* ---------- Efeitos de passar o mouse (só onde existe mouse) ---------- */

@media (hover: hover) {
  .home-brand-row a:hover,
  .product:hover {
    box-shadow: var(--shadow-lift);
    transform: translateY(-0.25rem);
  }

  .home-brand-row a:hover::after,
  .product:hover::after {
    transform: none;
  }

  .product:hover .product-image img,
  .rb-frame:hover img,
  .nv-band a:hover .rb-frame img,
  .revision-split:hover .rb-frame img {
    scale: 1.045;
  }

  .product:hover > h3 span {
    transform: translate(0.1875rem, -0.1875rem);
  }

  .nv-band:hover a:not(:hover) {
    opacity: 0.5;
  }

  .nv-band a:hover figcaption strong::after {
    width: 100%;
  }

  .nv-band a:hover .rb-frame::after,
  .home-company figure:hover .rb-frame::after {
    opacity: 1;
    transform: none;
  }
}

.home-brand-row a:focus-visible::after,
.product:focus-visible::after {
  transform: none;
}

.nv-band a:focus-visible figcaption strong::after {
  width: 100%;
}

/* ---------- Entrada da abertura (sem depender de script) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero-video-copy > * {
    animation: rb-rise var(--dur-long) var(--ease-out) backwards;
  }

  .hero-video-copy > .eyebrow {
    animation-delay: 120ms;
  }

  .hero-video-copy > h1 {
    animation-name: rb-unmask;
    animation-delay: 220ms;
  }

  .hero-video-copy > .lead {
    animation-delay: 440ms;
  }

  .hero-video-copy > .button {
    animation-delay: 560ms;
  }

  .cinematic-hero::after {
    animation: rb-beam 1500ms var(--ease-in-out) 250ms backwards;
  }

  .hero-video-toggle,
  .hero-video-credit {
    animation: rb-fade var(--dur-long) var(--ease-out) 900ms backwards;
  }

  .institutional-menu[open] > div,
  body > header nav.open {
    animation: rb-drop var(--dur-short) var(--ease-out) backwards;
  }

  /* Com o script de movimento ativo, as fotos grandes ganham folga para o deslocamento suave */
  .rb-motion .home-company .rb-frame img,
  .rb-motion .home-portable-story .rb-frame img {
    scale: 1.1;
  }

  @media (hover: hover) {
    .rb-motion .home-company .rb-frame:hover img,
    .rb-motion .home-portable-story .rb-frame:hover img {
      scale: 1.14;
    }
  }
}

@keyframes rb-rise {
  from {
    opacity: 0;
    transform: translateY(1.75rem);
  }
}

@keyframes rb-unmask {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(2.5rem);
  }

  to {
    clip-path: inset(-12% -6% -24% -6%);
  }
}

@keyframes rb-beam {
  from {
    transform: scaleX(0);
  }
}

@keyframes rb-fade {
  from {
    opacity: 0;
  }
}

@keyframes rb-drop {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}

/* ---------- Telas médias ---------- */

@media (max-width: 1000px) {
  .home-company,
  .home-represented,
  .home-portable-story,
  .nv-tech,
  .revision-section {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .home-company > h2,
  .home-company > p,
  .home-company > .text-link,
  .home-company > figure,
  .home-represented > h2,
  .home-represented > p,
  .home-represented > .text-link,
  .home-represented > .home-brand-row,
  .home-portable-story > div,
  .home-portable-story > figure,
  .nv-tech > h2,
  .nv-tech > .nv-intro,
  .revision-section > h2,
  .revision-section > p,
  .revision-section > .text-link,
  .revision-section::before {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .home-company > figure {
    margin-top: var(--space-xl);
  }

  .home-company > .text-link {
    margin-top: var(--space-lg);
  }

  .home-brand-row {
    margin-top: var(--space-lg);
  }

  .home-portable-story > figure {
    max-width: 34rem;
    margin-top: var(--space-xl);
  }

  .nv-tech > .nv-intro {
    margin-top: var(--space-sm);
  }

  .revision-section > p {
    max-width: 40rem;
    margin-top: var(--space-md);
  }

  .collection .product,
  .collection .product:nth-child(n + 4) {
    grid-column: span 3;
  }

  .collection .product:last-child {
    grid-column: 1 / -1;
  }

  main > .campaign-paths {
    grid-template-columns: minmax(0, 1fr);
  }

  body > footer > div:nth-child(2),
  .institutional-footer {
    grid-column: span 6;
  }

  body > footer > small {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  body > footer > .review-link {
    grid-row: 4;
  }
}

/* ---------- Menu em botão: mesma largura de corte do protótipo original (até 1150 px) ---------- */

@media (max-width: 1150px) {
  body > header {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: var(--space-xs);
  }

  .switch {
    display: block;
    grid-column: 3;
    grid-row: 1;
  }

  .menu {
    grid-column: 4;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-height: 2.75rem;
    padding: var(--space-2xs) var(--space-sm);
    background: transparent;
    border: var(--rule) solid var(--color-ink);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    transition:
      background-color var(--dur-short) var(--ease-out),
      color var(--dur-short) var(--ease-out);
  }

  .menu::before {
    content: "";
    width: 1rem;
    height: 0.4375rem;
    border-block: var(--beam) solid currentColor;
  }

  .menu[aria-expanded="true"] {
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .menu:active {
    transform: scale(0.98);
  }

  body > header nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - var(--header-h));
    padding: var(--space-2xs) var(--gutter) var(--space-lg);
    overflow: auto;
    background: var(--color-paper);
    border-bottom: var(--rule) solid var(--color-rule);
    box-shadow: var(--shadow-lift);
    font-size: var(--text-md);
  }

  body > header nav.open {
    display: flex;
  }

  body > header nav > a,
  body > header nav summary {
    padding-block: var(--space-sm);
    background: none;
    border-bottom: var(--rule) solid var(--color-rule);
  }

  .institutional-menu summary {
    justify-content: space-between;
  }

  .institutional-menu > div {
    position: static;
    min-width: 0;
    padding: var(--space-2xs) 0 var(--space-2xs) var(--space-sm);
    border: 0;
    border-bottom: var(--rule) solid var(--color-rule);
    border-radius: 0;
    box-shadow: none;
  }

  body > header nav .contact-link {
    margin-top: var(--space-md);
    padding: var(--space-sm);
    border-bottom: 0;
    text-align: center;
  }
}

/* Em telas largas o menu aberto vira um cartão à direita, em vez de ocupar a largura toda */
@media (min-width: 700px) and (max-width: 1150px) {
  body > header nav {
    right: var(--pad);
    left: auto;
    width: 22rem;
    margin-top: var(--space-2xs);
    padding-inline: var(--space-md);
    border: var(--rule) solid var(--color-rule);
    border-radius: var(--radius-md);
  }
}

/* ---------- Tablet ---------- */

@media (max-width: 900px) {
  .brand img {
    height: 2.375rem;
  }

  .cta {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-lg);
  }

  .cta::before {
    content: none;
  }

  .cta .button {
    justify-self: start;
  }
}

/* ---------- Celular ---------- */

@media (max-width: 640px) {
  main > .cinematic-hero {
    min-height: clamp(33rem, calc(100svh - var(--header-h)), 46rem);
    padding-top: var(--space-xl);
  }

  .cinematic-hero::before {
    background: linear-gradient(
      0deg,
      color-mix(in oklch, var(--color-ink-deep) 90%, transparent) 0%,
      color-mix(in oklch, var(--color-ink-deep) 62%, transparent) 55%,
      color-mix(in oklch, var(--color-ink-deep) 30%, transparent) 100%
    );
  }

  .hero-video-copy {
    padding-bottom: var(--space-sm);
  }

  .hero-video-toggle {
    padding-inline: var(--space-xs);
    font-size: var(--text-xs);
  }

  .button {
    padding-inline: var(--space-md);
    font-size: var(--text-sm);
  }

  .home-brand-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-brand-row a {
    aspect-ratio: 5 / 2;
  }

  .nv-band {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .collection {
    grid-template-columns: minmax(0, 1fr);
  }

  .collection > .text-link {
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
    margin-top: var(--space-lg);
  }

  .collection > .products {
    grid-template-columns: minmax(0, 1fr);
  }

  .collection .product,
  .collection .product:nth-child(n + 4),
  .collection .product:last-child {
    grid-column: 1 / -1;
  }

  .revision-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .revision-split > img,
  .revision-split > .rb-frame {
    aspect-ratio: 16 / 10;
  }

  body > footer > div:nth-child(2),
  .institutional-footer {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  body > footer > small,
  body > footer > .review-link {
    grid-row: auto;
    order: 1;
  }

  .image-viewer {
    overflow: auto;
  }

  .viewer-top {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-paper);
  }

  .viewer-grid {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
}

/* ---------- Celular estreito: links e botões seguem em uma linha só ---------- */

@media (max-width: 380px) {
  .text-link,
  .button {
    font-size: var(--text-sm);
  }

  .button {
    padding-inline: var(--space-sm);
  }
}

/* ==========================================================================
   Peças das páginas internas (compartilhadas)
   ========================================================================== */

/* ---------- Migalha de navegação ---------- */

.crumb {
  padding: var(--space-sm) var(--pad) 0;
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

.crumb a {
  background: linear-gradient(var(--color-accent), var(--color-accent)) left bottom / 0 var(--rule) no-repeat;
  text-decoration: none;
  transition: background-size var(--dur-short) var(--ease-out);
}

.crumb a:hover,
.crumb a:focus-visible {
  background-size: 100% var(--rule);
}

/* ---------- Abertura de página ---------- */

main > .intro {
  padding-block: var(--space-xl) var(--space-lg);
}

.intro h1,
.company-hero-copy h1 {
  margin-bottom: var(--space-md);
  font-size: clamp(2.75rem, 1rem + 6.6vw, 7rem);
  line-height: 0.94;
  letter-spacing: -0.022em;
}

.intro h1 {
  max-width: 9.5em;
}

.intro .lead,
.company-hero-copy .lead {
  max-width: 40rem;
  color: var(--color-ink-2);
  font-size: var(--text-lg);
  line-height: 1.5;
}

/* ---------- Legenda de foto ---------- */

.rb-caption,
.company-page figcaption,
.rb-layout-products figcaption {
  margin-top: var(--space-xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* ---------- Sanfona (perguntas e textos que abrem) ---------- */

:is(.faq, .lp-faq) details,
details.nv-history {
  border-top: var(--rule) solid var(--color-rule);
}

:is(.faq, .lp-faq) details:last-of-type,
details.nv-history {
  border-bottom: var(--rule) solid var(--color-rule);
}

:is(.faq, .lp-faq) details > summary,
details.nv-history > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-short) var(--ease-out);
}

:is(.faq, .lp-faq) details > summary::-webkit-details-marker,
details.nv-history > summary::-webkit-details-marker {
  display: none;
}

/* Sinal de mais desenhado, que gira e vira um xis quando aberto */
:is(.faq, .lp-faq) details > summary::after,
details.nv-history > summary::after {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) center / 100% var(--beam) no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) center / var(--beam) 100% no-repeat;
  transition: transform var(--dur-short) var(--ease-out);
}

:is(.faq, .lp-faq) details[open] > summary::after,
details.nv-history[open] > summary::after {
  transform: rotate(45deg);
}

:is(.faq, .lp-faq) details > summary:hover,
details.nv-history > summary:hover {
  color: var(--color-accent-deep);
}

:is(.faq, .lp-faq) details > p,
details.nv-history > p {
  max-width: 46rem;
  padding-bottom: var(--space-md);
  color: var(--color-ink-2);
  line-height: 1.65;
}

/* ---------- Entrada da abertura das páginas internas ---------- */

@media (prefers-reduced-motion: no-preference) {
  .intro > *,
  .company-hero-copy > * {
    animation: rb-rise var(--dur-long) var(--ease-out) backwards;
  }

  .intro > h1,
  .company-hero-copy > h1 {
    animation-name: rb-unmask;
    animation-delay: 120ms;
  }

  .intro > .lead,
  .company-hero-copy > .lead {
    animation-delay: 320ms;
  }

  :is(.faq, .lp-faq) details[open] > p,
  details.nv-history[open] > p {
    animation: rb-drop var(--dur-short) var(--ease-out) backwards;
  }
}

/* ==========================================================================
   Página de leitura (fichas de produto, processos, guias): índice ao lado e texto em coluna
   ========================================================================== */

.article-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--space-md);
  padding: var(--space-2xl) var(--pad) var(--space-section);
}

/* ---------- Índice "Nesta página" ---------- */

.contents {
  grid-column: 1 / 4;
  position: sticky;
  top: calc(var(--header-h) + var(--space-lg));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: var(--text-sm);
}

.contents b {
  margin-bottom: var(--space-sm);
  color: var(--color-accent-deep);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.contents a {
  position: relative;
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-sm);
  border-left: var(--rule) solid var(--color-rule);
  color: var(--color-ink-2);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}

/* O fio laranja marca a seção que está na tela */
.contents a::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--rule) * -1);
  width: var(--beam);
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-short) var(--ease-out);
}

.contents a:hover,
.contents a:focus-visible,
.contents a[aria-current] {
  color: var(--color-ink);
}

.contents a[aria-current]::before {
  transform: none;
}

/* ---------- Texto ---------- */

.article-layout > article {
  grid-column: 5 / 12;
  min-width: 0;
}

.article-layout article > * + * {
  margin-top: var(--space-2xl);
}

/* Cada bloco abre com um fio e um trecho aceso em laranja, como o rótulo das seções */
.article-layout article > section {
  position: relative;
  padding-top: var(--space-lg);
  border-top: var(--rule) solid var(--color-rule);
}

.article-layout article > section::before {
  content: "";
  position: absolute;
  top: calc(var(--rule) * -1);
  left: 0;
  width: 2.5rem;
  height: var(--beam);
  background: var(--color-accent);
}

.article-layout article h2,
.article-layout caption {
  margin-bottom: var(--space-md);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.375rem);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  line-height: 1.08;
  text-align: left;
}

.article-layout article h3 {
  margin: var(--space-lg) 0 var(--space-xs);
  font-size: var(--text-lg);
  line-height: 1.2;
}

.article-layout article p {
  max-width: 44rem;
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.7;
}

.article-layout article p + p {
  margin-top: var(--space-sm);
}

/* Lista de pontos: o marcador é um traço laranja */
.article-layout article section > ul {
  display: grid;
  gap: var(--space-xs);
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}

.article-layout article section > ul > li {
  position: relative;
  padding-left: var(--space-lg);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.5;
}

.article-layout article section > ul > li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: var(--space-sm);
  height: var(--beam);
  background: var(--color-accent);
}

/* ---------- Tabela de dados técnicos ---------- */

.article-layout table {
  width: 100%;
  border-collapse: collapse;
  line-height: 1.5;
}

.article-layout th,
.article-layout td {
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: var(--rule) solid var(--color-rule);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.article-layout tr:first-child > * {
  border-top: var(--rule) solid var(--color-ink);
}

.article-layout th {
  width: 40%;
  font-weight: 700;
}

.article-layout td {
  padding-right: 0;
  color: var(--color-ink-2);
}

.article-layout article p.note {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* Links dentro do texto corrido */
.article-layout article p a,
.sources a {
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--color-ink) 45%, transparent);
  text-decoration-thickness: var(--rule);
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--dur-short) var(--ease-out);
}

.article-layout article p a:hover,
.article-layout article p a:focus-visible,
.sources a:hover,
.sources a:focus-visible {
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: var(--beam);
}

.article-layout article p.context-link {
  max-width: none;
  padding-block: var(--space-md);
  border-block: var(--rule) solid var(--color-rule);
  font-size: var(--text-base);
}

/* ---------- Documentação e fontes ---------- */

.article-layout .sources {
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
}

.article-layout .sources h2 {
  margin-bottom: var(--space-xs);
  font-size: var(--text-lg);
  line-height: 1.2;
}

.article-layout .sources p {
  font-size: var(--text-sm);
  line-height: 1.6;
}

.sources ul {
  display: grid;
  gap: var(--space-2xs);
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}

.sources li {
  font-size: var(--text-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.sources a {
  font-weight: 600;
}

/* ---------- Soluções relacionadas: título à esquerda, cartões à direita ---------- */

.article-layout ~ .collection {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  align-items: start;
  column-gap: var(--space-md);
}

.article-layout ~ .collection > .eyebrow,
.article-layout ~ .collection > h2 {
  grid-column: 1 / 5;
}

.article-layout ~ .collection > .products {
  grid-column: 5 / -1;
  grid-row: 1 / span 3;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
}

.article-layout ~ .collection .product:nth-child(n) {
  grid-column: auto;
}

/* Quatro cartões ficam em dois pares */
.article-layout ~ .collection > .products:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.article-layout ~ .collection .product:nth-child(n) .product-image {
  aspect-ratio: 4 / 3;
  padding: var(--space-lg) var(--space-md) var(--space-md);
}

.article-layout ~ .collection .product > h3 {
  font-size: var(--text-lg);
}

@media (max-width: 1000px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0;
  }

  /* O índice vira uma barra que acompanha a leitura, como na página da empresa */
  .contents {
    grid-column: 1 / -1;
    top: var(--header-h);
    z-index: 40;
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    background: color-mix(in oklch, var(--color-paper) 92%, transparent);
    border-bottom: var(--rule) solid var(--color-rule);
    backdrop-filter: saturate(1.4) blur(14px);
    scrollbar-width: none;
  }

  .contents::-webkit-scrollbar {
    display: none;
  }

  .contents b {
    flex: none;
    margin-bottom: 0;
  }

  .contents a {
    flex: none;
    padding: var(--space-sm) 0;
    border-left: 0;
    background: linear-gradient(var(--color-accent), var(--color-accent)) left bottom / 0 var(--beam) no-repeat;
    transition:
      color var(--dur-short) var(--ease-out),
      background-size var(--dur-short) var(--ease-out);
  }

  .contents a::before {
    content: none;
  }

  .contents a[aria-current] {
    background-size: 100% var(--beam);
  }

  .contents a:focus-visible {
    outline-offset: -2px;
  }

  .article-layout > article {
    grid-column: 1 / -1;
    margin-top: var(--space-xl);
  }

  .article-layout article [id] {
    scroll-margin-top: 3.25rem;
  }

  .article-layout ~ .collection {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .article-layout ~ .collection > .eyebrow,
  .article-layout ~ .collection > h2,
  .article-layout ~ .collection > .products {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .article-layout ~ .collection > .products {
    margin-top: var(--space-xl);
  }
}

@media (max-width: 640px) {
  .article-layout article > * + * {
    margin-top: var(--space-xl);
  }

  .article-layout article p,
  .article-layout article section > ul > li {
    font-size: var(--text-base);
  }

  .article-layout th,
  .article-layout td {
    padding-right: var(--space-sm);
    font-size: var(--text-sm);
  }

  .article-layout td {
    padding-right: 0;
  }

  .article-layout .sources {
    padding: var(--space-md);
  }

  .article-layout ~ .collection > .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
  }
}

@media (max-width: 420px) {
  .article-layout ~ .collection > .products {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Fotos dentro do texto ---------- */

.article-layout figure {
  min-width: 0;
}

.article-layout figcaption {
  padding-top: var(--space-xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.article-layout .nv-band {
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.nv-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.nv-pair img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.nv-pair .rb-frame img {
  border-radius: 0;
}

/* Equipamento em fundo branco: quadro branco com fio, foto inteira, sem corte */
.nv-pair .nv-fit img {
  background: var(--color-paper);
  border: var(--rule) solid var(--color-rule);
  object-fit: contain;
}

.nv-pair .nv-fit .rb-frame {
  background: var(--color-paper);
  border: var(--rule) solid var(--color-rule);
}

.nv-pair .nv-fit .rb-frame img {
  border: 0;
}

.compact-reference {
  position: relative;
}

@media (max-width: 520px) {
  .nv-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Fotos e faixas das páginas internas (compartilhadas)
   ========================================================================== */

/* Foto real (.pdf-photo): preenche a moldura em 3:2. Equipamento em fundo branco (.pdf-equipment): quadro branco
   com fio, foto inteira, sem corte. O catálogo (/reb/produtos/) tem a sua própria medida em rb-produtos.css. */
body:not(.rb-layout-products) .pdf-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
}

body:not(.rb-layout-products) .pdf-visual img.pdf-equipment {
  background: var(--color-paper);
  border: var(--rule) solid var(--color-rule);
  object-fit: contain;
}

body:not(.rb-layout-products) .pdf-visual .rb-frame img {
  border: 0;
  border-radius: 0;
}

body:not(.rb-layout-products) .pdf-visual .rb-frame:has(.pdf-equipment) {
  background: var(--color-paper);
  border: var(--rule) solid var(--color-rule);
}

body:not(.rb-layout-products) .pdf-visual figcaption {
  margin-top: var(--space-xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* ---------- Dica "Ampliar e explorar" sobre as fotos ---------- */

:where(.zoomable-figure) {
  position: relative;
}

:where(.zoomable-figure) > .zoom-hint {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  padding: var(--space-2xs) var(--space-xs);
  background: color-mix(in oklch, var(--color-ink-deep) 70%, transparent);
  border-radius: var(--radius-pill);
  color: var(--color-on-accent);
  backdrop-filter: blur(8px);
}

/* ---------- Galeria de processos (título e chamada em cima, fotos embaixo) ---------- */

main > .nv-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-md);
}

main > .nv-section > h2 {
  grid-column: 1 / 7;
  font-size: var(--text-3xl);
  line-height: 1;
}

main > .nv-section > .nv-intro {
  grid-column: 8 / 13;
  align-self: end;
  color: var(--color-ink-2);
  font-size: var(--text-md);
}

/* ---------- Foto ao lado de um texto curto ---------- */

main > .photo-story {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  column-gap: var(--space-md);
  background: var(--color-paper-2);
}

.photo-story > figure:first-child {
  grid-column: 1 / 8;
}

.photo-story > figure:first-child + div {
  grid-column: 9 / 13;
}

.photo-story > div:first-child {
  grid-column: 1 / 6;
}

.photo-story > div:first-child + figure {
  grid-column: 7 / 13;
}

.photo-story h2 {
  margin-bottom: var(--space-md);
  font-size: var(--text-3xl);
  line-height: 1.02;
}

.photo-story > div > p:not(.eyebrow) {
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.65;
}

.photo-story .text-link {
  margin-top: var(--space-lg);
}

@media (max-width: 1000px) {
  main > .nv-section,
  main > .photo-story {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-lg);
  }

  main > .nv-section {
    row-gap: 0;
  }

  main > .nv-section > h2,
  main > .nv-section > .nv-intro,
  .photo-story > figure:first-child,
  .photo-story > figure:first-child + div,
  .photo-story > div:first-child,
  .photo-story > div:first-child + figure {
    grid-column: 1 / -1;
  }

  main > .nv-section > .nv-intro {
    margin-top: var(--space-sm);
  }
}

/* Foto panorâmica (faixa 4:1): mantém a proporção do arquivo, nunca maior que ele, com o texto embaixo */
body:not(.rb-layout-products) .pdf-visual.panorama-photo img {
  aspect-ratio: auto;
}

.pdf-visual.panorama-photo {
  max-width: 62.5rem;
}

main > .photo-story:has(> .panorama-photo) {
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-lg);
}

.photo-story:has(> .panorama-photo) > figure:first-child,
.photo-story:has(> .panorama-photo) > figure:first-child + div {
  grid-column: 1 / -1;
}

.photo-story:has(> .panorama-photo) > div {
  max-width: 46rem;
}

/* ==========================================================================
   Faixas, grades e formulários das páginas internas (compartilhados)
   ========================================================================== */

/* ---------- Abertura sem migalha (blog) ---------- */

main > .page-heading {
  padding-block: var(--space-2xl) var(--space-lg);
}

.page-heading h1 {
  max-width: 9.5em;
  margin-bottom: var(--space-md);
  font-size: clamp(2.75rem, 1rem + 6.6vw, 7rem);
  line-height: 0.94;
  letter-spacing: -0.022em;
}

.page-heading .lead {
  max-width: 40rem;
  color: var(--color-ink-2);
  font-size: var(--text-lg);
  line-height: 1.5;
}

/* ---------- Faixa de declaração com mais conteúdo ----------
   Na página inicial a faixa tem só título, um parágrafo e um link. Nas internas ela recebe rótulo, vários
   parágrafos, listas, botões e grades: o título fica à esquerda, o texto corre à direita e o que é largo
   ocupa a linha inteira, embaixo. */

.revision-section > p,
.revision-section > .text-link,
.revision-section > .button,
.revision-section > ul,
.revision-section > .revision-actions {
  grid-column: 8 / 13;
  grid-row: auto;
}

.revision-section > p + p,
.revision-section > ul {
  margin-top: var(--space-sm);
}

.revision-section > .button {
  justify-self: start;
  margin-top: var(--space-lg);
}

.revision-section > .eyebrow {
  grid-column: 1 / -1;
}

.revision-section > .eyebrow + h2 {
  grid-row: 3 / 5;
}

.revision-section > ul {
  display: grid;
  gap: var(--space-xs);
  padding: 0;
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.6;
  list-style: none;
}

.revision-section > ul > li {
  position: relative;
  padding-left: var(--space-lg);
}

.revision-section > ul > li::before {
  content: "";
  position: absolute;
  top: 0.8em;
  left: 0;
  width: var(--space-sm);
  height: var(--beam);
  background: var(--color-accent);
}

.revision-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-lg);
}

.revision-section > :is(.revision-grid, .functional-pair, .engineering-gallery, .mlt-photo-grid, .revision-steps, figure) {
  grid-column: 1 / -1;
  grid-row: auto;
  margin-top: var(--space-xl);
}

.revision-section > :is(.mlt-photo-source, .engineering-photo-note) {
  grid-column: 1 / -1;
  grid-row: auto;
  margin-top: var(--space-md);
  font-size: var(--text-sm);
}

/* ---------- Grade de três blocos ---------- */

.revision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-md);
}

main > .revision-grid {
  padding: 0 var(--pad) var(--space-section);
}

.revision-grid > * {
  position: relative;
  padding-top: var(--space-md);
  border-top: var(--rule) solid var(--color-rule);
}

/* O fio laranja marca o começo de cada bloco */
.revision-grid > *::before {
  content: "";
  position: absolute;
  top: calc(var(--rule) * -1);
  left: 0;
  width: 2.5rem;
  height: var(--beam);
  background: var(--color-accent);
}

.revision-grid :is(h2, h3) {
  margin-bottom: var(--space-xs);
  font-size: var(--text-xl);
  line-height: 1.1;
}

.revision-grid p {
  color: var(--color-ink-2);
  line-height: 1.6;
}

.revision-grid .text-link {
  margin-top: var(--space-md);
}

/* Foto de equipamento dentro do bloco: quadro branco com fio, foto inteira */
.revision-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: var(--color-paper);
  border: var(--rule) solid var(--color-rule);
  border-radius: var(--radius-md);
  object-fit: contain;
}

/* ---------- Duas colunas de texto (título à esquerda, texto à direita) ---------- */

.hub-depth {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-md);
}

.hub-depth > h2 {
  grid-column: 1 / 6;
  font-size: var(--text-3xl);
  line-height: 1.02;
}

.hub-depth > div:not(.equipment-comparison) {
  grid-column: 7 / 13;
}

.hub-depth > div:not(.equipment-comparison) p {
  margin-bottom: var(--space-sm);
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.65;
}

.hub-depth .text-link {
  margin-top: var(--space-sm);
}

/* ---------- Formulários ---------- */

.contact-form,
.campaign-inquiry,
#bofa-quote {
  display: grid;
  gap: var(--space-md);
}

:is(.contact-form, .campaign-inquiry, #bofa-quote) label {
  display: block;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
}

:is(.contact-form, .campaign-inquiry, #bofa-quote) :is(input:not([type="checkbox"]), select, textarea) {
  display: block;
  width: 100%;
  min-height: 3rem;
  margin-top: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-paper);
  border: var(--rule) solid var(--color-rule);
  border-bottom: var(--beam) solid var(--color-ink);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 400;
  transition: border-color var(--dur-short) var(--ease-out);
}

:is(.contact-form, .campaign-inquiry, #bofa-quote) textarea {
  min-height: 8rem;
  resize: vertical;
}

:is(.contact-form, .campaign-inquiry, #bofa-quote) ::placeholder {
  color: var(--color-ink-2);
  opacity: 1;
}

/* O fio de baixo acende em laranja no campo em uso */
:is(.contact-form, .campaign-inquiry, #bofa-quote) :is(input, select, textarea):is(:hover, :focus) {
  border-bottom-color: var(--color-accent);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.form-note,
#quote-status {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

#quote-status:empty {
  display: none;
}

:is(.contact-form, .campaign-inquiry, #bofa-quote) :is(.btn, .button) {
  justify-self: start;
  border: 0;
  cursor: pointer;
}

@media (max-width: 1000px) {
  .revision-section > :is(*, .rb-todos) {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .revision-section > .eyebrow + h2 {
    grid-row: auto;
  }

  .revision-section > .revision-actions,
  .revision-section > ul {
    margin-top: var(--space-md);
  }

  .hub-depth {
    grid-template-columns: minmax(0, 1fr);
  }

  .hub-depth > h2,
  .hub-depth > div:not(.equipment-comparison) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .revision-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }
}

@media (max-width: 560px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Grade de cartões com foto e peças de apoio (compartilhadas)
   ========================================================================== */

/* ---------- Grade de cartões (setores, caminhos da BOFA) ---------- */

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  padding: var(--space-xl) var(--pad) var(--space-section);
  background: var(--color-paper-2);
}

.editorial-grid > a {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--space-md);
  overflow: hidden;
  background: var(--color-paper);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out);
}

/* Fio laranja que se desenha no topo do cartão */
.editorial-grid > a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.1875rem;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}

.editorial-image {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: var(--rule) solid var(--color-rule);
  cursor: zoom-in;
}

.editorial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--dur-long) var(--ease-out);
}

/* Equipamento em fundo branco: foto inteira, sem corte */
.editorial-image img[src*="/products/"] {
  padding: var(--space-md);
  object-fit: contain;
}

.editorial-image .zoom-hint {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  padding: var(--space-3xs) var(--space-xs);
  background: color-mix(in oklch, var(--color-paper) 88%, transparent);
  border: var(--rule) solid var(--color-rule);
  border-radius: var(--radius-pill);
  color: var(--color-ink-2);
}

.editorial-grid h3 {
  margin-top: var(--space-md);
  padding-inline: var(--space-md);
  font-size: var(--text-xl);
  line-height: 1.1;
}

.editorial-grid p {
  margin-top: var(--space-2xs);
  padding-inline: var(--space-md);
  color: var(--color-ink-2);
  line-height: 1.5;
}

@media (hover: hover) {
  .editorial-grid > a:hover {
    box-shadow: var(--shadow-lift);
    transform: translateY(-0.25rem);
  }

  .editorial-grid > a:hover::after {
    transform: none;
  }

  .editorial-grid > a:hover img {
    scale: 1.045;
  }
}

.editorial-grid > a:focus-visible::after {
  transform: none;
}

/* ---------- Galeria de duas fotos em faixa própria ---------- */

main > .nv-section > .nv-pair {
  grid-column: 1 / -1;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

main > .nv-section > .nv-pair figcaption {
  padding-top: var(--space-xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* ---------- Texto em duas colunas com fotos embaixo ---------- */

.hub-depth > .production-examples {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.hub-depth > figure {
  grid-column: 7 / 13;
}

.revision-grid .pdf-visual img {
  margin-bottom: 0;
  padding: 0;
  border: 0;
}

.revision-grid .pdf-visual {
  margin-bottom: var(--space-md);
}

@media (max-width: 1000px) {
  .editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hub-depth > figure {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .hub-depth > .production-examples {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .editorial-grid {
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--space-lg);
  }
}

/* ==========================================================================
   Peças que mais de um modelo usa (06/11)
   ========================================================================== */

/* ---------- Faixa de foto com texto ao lado (filtros BOFA, Conhecimento, Embalagens) ---------- */

/* Faixa "A reposição merece atenção": foto à esquerda, texto à direita */
main > .photo-band {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  column-gap: var(--space-md);
  background: var(--color-paper-2);
  cursor: zoom-in;
}

.photo-band > img {
  grid-column: 1 / 8;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.photo-band-content {
  grid-column: 9 / 13;
}

.photo-band-content h2 {
  margin-bottom: var(--space-md);
  font-size: var(--text-3xl);
  line-height: 1.02;
}

.photo-band-content p {
  margin-bottom: var(--space-md);
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.65;
}

.photo-band-content small {
  display: block;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.photo-band > .zoom-hint {
  top: calc(var(--space-section) + var(--space-sm));
  right: auto;
  left: calc(var(--pad) + var(--space-sm));
}

.photo-band:focus-visible {
  outline-offset: -4px;
}

@media (max-width: 1000px) {
  main > .photo-band {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-lg);
  }

  .photo-band > img,
  .photo-band-content {
    grid-column: 1 / -1;
  }

  .photo-band > .zoom-hint {
    left: calc(var(--gutter) + var(--space-sm));
  }
}

/* ---------- Nota sobre a galeria e grade de quatro cartões (Setores e Conhecimento) ---------- */

.gallery-note {
  padding: var(--space-lg) var(--pad) 0;
  background: var(--color-paper-2);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.gallery-note + .editorial-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: var(--space-md);
}

.gallery-note + .editorial-grid h3 {
  font-size: var(--text-lg);
}

.gallery-note + .editorial-grid p {
  font-size: var(--text-sm);
}

@media (max-width: 1200px) {
  .gallery-note + .editorial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .gallery-note + .editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .gallery-note + .editorial-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Link que fecha a página, fora de qualquer faixa (Furação, Perfuração, Microfuração) ---------- */

main > .text-link {
  display: block;
  width: fit-content;
  margin: calc(var(--space-section) * -0.5) var(--pad) var(--space-section);
  white-space: nowrap;
}

@media (max-width: 420px) {
  main > .text-link {
    font-size: min(var(--text-base), 4.1vw);
  }
}