/* ===== Variáveis ===== */

:root {
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-yellow: #FFCC00;
  --color-yellow-2: #F4B800;
  --color-gray-dark: #1C1C1E;
  --color-gray-mid: #242424;
  --color-gray-light: #E6E6E6;
  --color-offwhite: #F5F5F7;
  --grid-line: rgba(255, 255, 255, 0.08);
  --grid-line-dark: rgba(0, 0, 0, 0.065);
  --font-title: "Bebas Neue", sans-serif;
  --font-body: "Poppins", sans-serif;
}

/* ===== Fontes =====
 *
 * Os .woff2 são as mesmas fontes recomprimidas e reduzidas ao repertório latin +
 * latin-ext (711 KB de TTF viraram 63 KB). O corte foi conferido contra todos os
 * caracteres que o site renderiza: a cobertura é idêntica à dos TTF originais,
 * inclusive no emoji do depoimento, que nenhuma das duas famílias jamais teve e
 * que o navegador sempre resolveu pela fonte de emoji do sistema.
 *
 * O .ttf continua como segunda entrada do src porque é o formato que navegador
 * sem woff2 entende. Quem suporta woff2 (97% do tráfego) nunca chega a pedi-lo.
 * A ordem importa: o navegador usa a PRIMEIRA entrada que sabe ler.
 *
 * font-display: block preservado de propósito. O texto do site nasce escondido
 * pelo loader e pelas timelines de entrada, então nunca houve FOUT para trocar
 * por swap, e swap traria um flash de fonte de sistema que hoje não existe.
 */

@font-face {
  font-family: "Bebas Neue";
  src: url("/public/fontes/bebas-neue/BebasNeue-Regular.woff2") format("woff2"),
       url("/public/fontes/bebas-neue/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Poppins";
  src: url("/public/fontes/poppins/Poppins-Regular.woff2") format("woff2"),
       url("/public/fontes/poppins/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Poppins";
  src: url("/public/fontes/poppins/Poppins-Italic.woff2") format("woff2"),
       url("/public/fontes/poppins/Poppins-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: "Poppins";
  src: url("/public/fontes/poppins/Poppins-Bold.woff2") format("woff2"),
       url("/public/fontes/poppins/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Poppins";
  src: url("/public/fontes/poppins/Poppins-BoldItalic.woff2") format("woff2"),
       url("/public/fontes/poppins/Poppins-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: block;
}

/* ===== Base ===== */

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

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
}

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

/* ===== Skip-link ===== */

/* Fica fora da tela até receber foco, então não aparece para quem usa mouse.
   Quem navega por teclado precisava percorrer o logo, o hambúrguer e o menu
   inteiro antes de chegar ao conteúdo; agora o primeiro Tab da página oferece o
   atalho. Acima do loader (1000) porque um indicador de foco invisível não
   serve para nada, e o Tab funciona mesmo com a abertura no ar.
   Sem transição: o alvo do foco precisa aparecer na hora. */
.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 1001;
  transform: translate(-50%, -120%);
  padding: 12px 22px;
  border-radius: 0 0 12px 12px;
  background-color: var(--color-yellow);
  color: var(--color-black);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  text-decoration: none;
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
}

/* ===== Loader ===== */

/* preto em tela cheia durante a fase do logo (0–270): a camada preta do JSON não
   cobre toda a viewport, então o fundo do container garante isso. No frame 270 o
   amarelo já cobre a tela inteira e o JS troca este fundo para transparente — a
   partir daí a varredura amarela revela a hero real por trás (sem mais preto) */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: var(--color-black);
}

.loader__anim {
  position: absolute;
  inset: 0;
  /* logo ~15% maior: escala a animação inteira a partir do centro. O fundo preto
     e a varredura amarela apenas sofrem corte nas bordas (irrelevante, pois já
     cobrem toda a tela); a lógica de reveal (frame 270→320) não é afetada */
  transform: scale(1.15);
  transform-origin: center;
}

/* ===== Cursor customizado ===== */

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: difference;
  visibility: hidden;
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-yellow);
  z-index: 2147483647;
}

.cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--color-yellow);
  z-index: 2147483646;
}

@media (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor * {
    cursor: none !important;
  }
}

/* ===== Header ===== */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 24px 48px;
}

.site-header__logo img {
  width: clamp(118px, 10vw, 150px);
}

/* ===== Botão do menu (sanduíche de 2 linhas desalinhadas) ===== */

.menu-toggle {
  position: fixed;
  top: 28px;
  right: 48px;
  z-index: 960;
  width: 54px;
  height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none;
  border-radius: 16px;
  background-color: var(--color-yellow);
  transition: background-color 0.35s ease;
}

.menu-toggle:hover {
  background-color: var(--color-yellow-2);
}

.menu-toggle__line {
  width: 24px;
  height: 2.5px;
  border-radius: 2px;
  background-color: var(--color-black);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.menu-toggle__line:nth-child(1) {
  transform: translateX(4px);
}

.menu-toggle__line:nth-child(2) {
  transform: translateX(-4px);
}

.menu-toggle.is-open .menu-toggle__line:nth-child(1) {
  transform: translateY(4.75px) rotate(45deg);
}

.menu-toggle.is-open .menu-toggle__line:nth-child(2) {
  transform: translateY(-4.75px) rotate(-45deg);
}

/* ===== Menu lateral ===== */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 940;
  background-color: rgba(0, 0, 0, 0.6);
  visibility: hidden;
}

.menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  width: min(440px, 88vw);
  visibility: hidden;
}

.menu__bg {
  position: absolute;
  inset: 0;
}

.menu__bg--yellow {
  background-color: var(--color-yellow);
}

.menu__bg--gray {
  background-color: #232323;
}

.menu__content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 140px 56px 56px;
}

.menu__nav {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.menu__nav a,
.menu__nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--color-white);
  text-decoration: none;
  width: fit-content;
  transition: color 0.35s ease;
}

/* toggle de Produtos é um <button>: zera a aparência nativa e herda o visual dos links */
.menu__nav-toggle {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}

.menu__nav a:hover,
.menu__nav-toggle:hover {
  color: var(--color-yellow);
}

.menu__nav-label {
  transition: transform 0.4s ease, text-shadow 0.5s ease;
}

.menu__nav a:hover .menu__nav-label,
.menu__nav-toggle:hover .menu__nav-label {
  transform: translateX(0.1em);
  text-shadow: 0 0 0.6em rgba(255, 204, 0, 0.35);
}

/* mesmas setas dos botões .btn — uma já visível em repouso; as outras duas
   surgem empilhadas e se espalham no hover */
.menu__nav-arrows {
  height: 0.5em;
  flex: none;
  fill: currentColor;
  transition: transform 0.4s ease, filter 0.5s ease;
}

.menu__nav a:hover .menu__nav-arrows,
.menu__nav-toggle:hover .menu__nav-arrows {
  filter: drop-shadow(0 0 0.5em var(--color-yellow));
}

.menu__nav-arrows polygon {
  transition: transform 0.5s ease, opacity 0.4s ease;
}

.menu__nav-arrows polygon:nth-child(1) {
  opacity: 0;
  transform: translateX(-60%);
}

.menu__nav-arrows polygon:nth-child(2) {
  opacity: 0;
  transform: translateX(-30%);
}

.menu__nav a:hover .menu__nav-arrows polygon,
.menu__nav-toggle:hover .menu__nav-arrows polygon {
  opacity: 1;
  transform: translateX(0%);
}

/* item com submenu (só Produtos): agrupa toggle + sublista das 4 páginas. Sem
   gap aqui: o respiro entre o toggle e a lista vive no padding-top da sublista,
   que é recortado junto com ela quando recolhida (height:0 + overflow:hidden) */
.menu__item--has-sub {
  display: flex;
  flex-direction: column;
  width: fit-content;
}

/* aberto: as 3 setas do toggle apontam para baixo e ficam espalhadas (mesma
   linguagem de "expandir" das setas de rolagem das heros internas) */
.menu__item--has-sub.is-open .menu__nav-toggle {
  color: var(--color-yellow);
}

.menu__item--has-sub.is-open .menu__nav-arrows {
  transform: rotate(90deg);
}

.menu__item--has-sub.is-open .menu__nav-arrows polygon {
  opacity: 1;
  transform: translateX(0%);
}

.menu__subnav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-left: 4px;
  padding-top: 16px;
  padding-left: 18px;
  border-left: 2px solid rgba(255, 204, 0, 0.35);
}

.menu__subnav a {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  width: fit-content;
  transition: color 0.35s ease, transform 0.4s ease;
}

.menu__subnav a:hover {
  color: var(--color-yellow);
  transform: translateX(0.15em);
}

@media (prefers-reduced-motion: reduce) {
  .menu__nav a,
  .menu__nav-toggle,
  .menu__nav-label,
  .menu__nav-arrows,
  .menu__nav-arrows polygon,
  .menu__subnav a {
    transition: none !important;
  }
}

.menu__social {
  display: flex;
  gap: 22px;
}

.menu__social a {
  color: var(--color-yellow);
  transition: color 0.35s ease;
}

.menu__social a:hover {
  color: var(--color-yellow-2);
}

.menu__social svg {
  width: 28px;
  height: 28px;
  display: block;
}

/* O glifo oficial do WhatsApp preenche toda a viewBox 24x24, ao contrário dos
   ícones de traço (Instagram, e-mail) que têm respiro interno. Reduzimos ~10%
   para casar o peso visual com os ícones vizinhos. */
.icon-whatsapp {
  transform: scale(0.9);
}

/* ===== Hero ===== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--color-gray-dark);
  overflow: hidden;
}

.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 84px 84px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 95%);
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 95%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: clamp(104px, 14vh, 140px) clamp(48px, 6vw, 120px) 60px;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(28px, 3vw, 40px);
}

.hero__title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(3.2rem, 5.8vw, 6.4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-white);
}

.hero__title-line {
  display: block;
  overflow: hidden;
}

.t-yellow {
  color: var(--color-yellow);
}

.hero__subtitle {
  margin-top: clamp(18px, 1.8vw, 26px);
  max-width: 44ch;
  font-size: clamp(0.95rem, 1.05vw, 1.1rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: clamp(28px, 2.8vw, 40px);
}

/* ===== Botões (padrão do site — setas + ripple) ===== */

.btn {
  --btn-text: var(--color-black);
  --btn-bg: var(--color-yellow);
  --btn-bg-hover: var(--color-yellow-2);
  --btn-glow: rgba(255, 204, 0, 0.45);
  --btn-shadow: rgba(0, 0, 0, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1.1em 2.1em;
  border: none;
  border-radius: 14px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.85rem, 0.95vw, 0.95rem);
  text-decoration: none;
  cursor: pointer;
  color: var(--btn-text);
  background-color: var(--btn-bg);
  transition: background-color 1s ease, box-shadow 1s ease;
}

.btn:hover {
  background-color: var(--btn-bg-hover);
  box-shadow: 0 0 1.4em 0.1em var(--btn-glow);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.btn:active {
  transform: scale(0.95);
}

.btn__label {
  transition: text-shadow 0.5s ease;
}

.btn:hover .btn__label {
  text-shadow: 4px 4px 4px var(--btn-shadow);
}

.btn:active .btn__label {
  text-shadow: none;
}

.btn svg {
  height: 0.8em;
  fill: var(--btn-text);
  transition: filter 0.5s ease;
}

.btn:hover svg {
  filter: drop-shadow(4px 4px 2px var(--btn-shadow));
}

.btn:active svg {
  filter: none;
}

.btn svg polygon {
  transition: transform 0.5s ease;
}

.btn svg polygon:nth-child(1) {
  transition-duration: 0.4s;
  transform: translateX(-60%);
}

.btn svg polygon:nth-child(2) {
  transform: translateX(-30%);
}

.btn:hover svg polygon {
  transform: translateX(0%);
}

/* variante vazada. O fundo NÃO é transparente de propósito: as quatro
   superfícies que recebem ghost (hero da home, prod-hero, prod-tipos e o banner
   de cookies) têm um grid decorativo de linhas atrás, e com fundo transparente
   essas linhas atravessavam o interior do botão e encostavam no texto. Como as
   quatro são --color-gray-dark, preencher com essa mesma cor tapa o grid sem
   mudar o que se vê: continua lendo como um botão vazado sobre a seção.
   As duas cores precisam ser opacas. Um --btn-bg-hover semitransparente traria
   o grid de volta justamente no hover; #333335 é o branco a 10% do valor antigo
   já achatado sobre --color-gray-dark, então o hover fica idêntico ao de antes.
   Um ghost sobre seção clara precisaria sobrescrever as duas. */
.btn--ghost {
  --btn-text: var(--color-white);
  --btn-bg: var(--color-gray-dark);
  --btn-bg-hover: #333335;
  --btn-glow: rgba(255, 255, 255, 0.25);
  --btn-shadow: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--color-white);
}

/* variante branca preenchida (para seções claras): mesma mecânica do padrão, com
   uma sombra de repouso para o branco se destacar sobre o off-white; no hover a
   sombra vira o glow suave escuro do sistema */
.btn--white {
  --btn-text: #0E0E0E;
  --btn-bg: var(--color-white);
  --btn-bg-hover: var(--color-white);
  --btn-glow: rgba(0, 0, 0, 0.16);
  --btn-shadow: rgba(0, 0, 0, 0.28);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn__label,
  .btn svg,
  .btn svg polygon,
  .calendario__poster-frame,
  .calendario__poster-hint,
  .calendario__lightbox-close {
    transition: none !important;
  }
}

/* ===== Hero — imagens ===== */

/* altura espelha o bloco de texto (height: 100% da linha do grid) e o
   container é ancorado à direita — espaçamento lateral simétrico ao do texto */
.hero__visual {
  position: relative;
  height: 100%;
  aspect-ratio: 1.87 / 1;
  justify-self: end;
}

/* max-width:none anula o `img { max-width: 100% }` global: estas imagens
   transbordam o container de propósito (o padding transparente fica para fora
   da moldura) e o clamp achataria a largura sem mexer no height, distorcendo */
.hero__img {
  position: absolute;
  width: auto;
  max-width: none;
  will-change: transform;
}

/* offsets compensam o padding transparente dos PNGs: o conteúdo visível
   preenche o container de borda a borda e parte da mesma linha inferior.
   Derivados do bounding box de cada arquivo (sharp().trim()): ao trocar
   um PNG, remedir o bbox e refazer os três valores da camada */
.hero__img--1 {
  left: -10.723%;
  bottom: -6%;
  /* pedido do cliente: +10%, mantendo a borda inferior da camada ancorada */
  height: 98.707%;
  z-index: 3;
}

/* o left tem um deslocamento de composição sobre o valor do bbox (11.902%):
   afasta o outdoor do painel da camada 1, que cobria a arte */
.hero__img--2 {
  left: 16.5%;
  bottom: -22.121%;
  height: 133.618%;
  z-index: 1;
}

.hero__img--3 {
  right: -5.395%;
  bottom: -0.301%;
  height: 103.149%;
  z-index: 2;
}

/* As peças novas da hero têm margens transparentes diferentes das imagens de
   fallback. Aplicar os ajustes só depois da troca pelo CMS preserva a composição
   original quando a rede falha. O outdoor volta a ser a maior peça e as bordas
   visíveis inferiores das três camadas passam a compartilhar a mesma base. */
.hero__img--2.is-cms-image {
  bottom: -39.15%;
  height: 164%;
}

.hero__img--3.is-cms-image {
  bottom: -3.05%;
}

/* O upload quadrado atual tem quase 40% de transparência em cada lateral. Esta
   compensação mantém o conteúdo visível à direita até ele ser substituído pelo
   arquivo vertical recomendado no Studio. */
.hero__img--3.is-cms-image.cms-source--square {
  right: -37%;
}

.hero__img--3.is-cms-image.cms-source--portrait {
  right: -16%;
}

/* No layout horizontal, o centro util fica entre a base amarela do botao do
   menu e o inicio visivel da faixa. A moldura recua como uma unidade para que
   as margens transparentes da imagem 3 nao alterem o gutter visivel. */
@media (min-width: 961px) {
  .hero__inner {
    transform: translateY(calc(
      71px
      - clamp(52px, 7vh, 70px)
      - 2.0833vw
    ));
  }

  .hero__visual:has(.hero__img--3.is-cms-image) {
    transform: translateX(-16.1%);
  }
}

/* ===== Faixa reta (marquee Hero → Produtos) ===== */

.marquee {
  position: absolute;
  top: -15vw;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 30vw;
  overflow: hidden;
  pointer-events: none;
}

.marquee-inner {
  display: grid;
  grid-template: 1fr / 1fr;
  height: 100%;
}

.marquee-band-svg,
.marquee-text-svg {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
}

.marquee-band-svg,
.marquee-text-svg {
  overflow: visible;
}

.marquee-band-svg path {
  stroke: var(--color-yellow);
  stroke-width: 120;
}

.marquee-text-svg text {
  fill: var(--color-white);
  font-family: var(--font-title);
  font-size: 84px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  user-select: none;
  /* desce o texto meia altura de capitular: centraliza na espessura da faixa
     (baseline alignment em textPath é inconsistente entre browsers) */
  transform: translate(0, 30px);
}

/* ===== Produtos ===== */

.produtos {
  position: relative;
  background-color: var(--color-gray-dark);
}

/* preserveAspectRatio="none": o path estica junto com a altura real da seção,
   então os segmentos retos são desenhados em frações da altura do viewBox (0–4000).
   O SVG começa na linha amarela do título (--cobrinha-top, medido em JS) e vai até
   a base da seção: o traço parte do "risco" sem cruzar o título. Mexer em top/height
   não afeta o draw (getTotalLength é em unidades do viewBox) nem o toque em y=4000 */
.cobrinha-svg {
  position: absolute;
  top: var(--cobrinha-top, 0px);
  left: 0;
  z-index: 1;
  width: 100%;
  height: calc(100% - var(--cobrinha-top, 0px));
  pointer-events: none;
}

/* traço amarelo desenhado no scroll (draw via stroke-dashoffset). stroke-width em
   unidades do viewBox (não px): escala junto com o path, então o draw
   (getTotalLength dá unidades de usuário) completa em qualquer tela. NÃO usar
   vector-effect:non-scaling-stroke aqui — ele interpretaria o dasharray em px de
   tela e quebraria o desenho. cap/join arredondados só suavizam a ponta e os
   cantos; os segmentos seguem 100% retos */
.cobrinha-path {
  stroke: var(--color-yellow);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* trilha tracejada estática sob o traço: revela o caminho a percorrer antes do
   preenchimento amarelo. Por ser estática (sem draw por getTotalLength) pode usar
   non-scaling-stroke — mantém o tracejado fino e uniforme em qualquer tela */
.cobrinha-ghost {
  stroke: var(--color-yellow);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-dasharray: 9 16;
  vector-effect: non-scaling-stroke;
  opacity: 0.3;
}

/* as versões mobile (traço verticalizado) só entram abaixo de 961px */
.cobrinha-path--mobile,
.cobrinha-ghost--mobile {
  display: none;
}

.produtos__inner {
  --pad-x: clamp(48px, 6vw, 120px);
  position: relative;
  max-width: 1520px;
  margin: 0 auto;
  padding: calc(15vw + 16px) var(--pad-x) clamp(96px, 12vh, 160px);
}

/* ===== Título de seção (padrão do site) ===== */

/* gutter lateral padrão e idêntico para todos os títulos: a margem negativa
   anula o --pad-x do container (que varia por seção) e o padding reaplica um
   recuo único. Assim o espaço disponível do título é o mesmo em toda seção,
   e o ajuste de "no máximo 2 linhas" (em JS) mexe só na fonte, nunca no gutter */
.section-title {
  --title-gutter: clamp(28px, 6vw, 48px);
  position: relative;
  z-index: 3;
  margin-inline: calc(-1 * var(--pad-x, 0px));
  padding-inline: var(--title-gutter);
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2.6rem, 4.6vw, 5rem);
  line-height: 1;
  text-align: center;
}

/* cada linha do SplitText vira máscara da revelação dos caracteres */
.section-title__line {
  overflow: hidden;
}

/* linha amarela de destaque sob o título de produtos: elemento em fluxo, então
   acompanha qualquer quebra (1 linha em telas menores, 2+ em telas maiores) e
   fica sempre logo abaixo do título — é dela que a cobrinha parte */
.produtos__inner .section-title::after {
  content: "";
  display: block;
  width: clamp(72px, 18vw, 132px);
  height: 4px;
  margin: clamp(16px, 2.2vw, 26px) auto 0;
  border-radius: 2px;
  background-color: var(--color-yellow);
}

.produto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  min-height: 78vh;
}

.produto--invertido .produto__media {
  order: -1;
}

.produto__conteudo {
  position: relative;
  z-index: 3;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(28px, 3vw, 44px) clamp(36px, 4vw, 60px);
  /* preenchimento OPACO equivalente ao vidro rgba(190,190,190,0.16) sobre o
     var(--color-gray-dark) (#1C1C1E) da seção (= #363638): recalculado após a
     seção passar a usar essa variável (antes era #0E0E0E, resultando em
     #2a2a2a, contraste que ficou baixo demais contra o novo fundo). A
     cobrinha, que passa atrás do card, não vaza mais pelo conteúdo por ser
     opaco. A borda segue rgba: com background-clip:border-box ela compõe
     sobre este fundo opaco, sem deixar o traço aparecer pela moldura */
  background-color: #363638;
  border: 2px solid rgba(230, 230, 230, 0.42);
  border-radius: clamp(18px, 1.8vw, 28px);
}

.produto__conteudo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center center;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 18%, #000 82%, transparent),
    linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 18%, #000 82%, transparent),
    linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect;
}

.produto__nome {
  position: relative;
  z-index: 1;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 1;
}

.produto__conteudo .btn {
  position: relative;
  z-index: 1;
  margin-top: clamp(20px, 2.4vw, 36px);
}

.produto__media {
  position: relative;
  z-index: 2;
  aspect-ratio: 4 / 3;
}

/* o <picture> sai do fluxo para o <img> continuar dimensionando contra o
   .produto__media (as alturas percentuais abaixo precisam do avô, não do
   wrapper inline) */
.produto__media picture {
  display: contents;
}

.produto__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===== Parceiros ===== */

.parceiros {
  position: relative;
  background-color: var(--color-gray-dark);
  color: var(--color-white);
}

/* duas camadas do mesmo grid da hero (linhas claras/escuras): o crossfade
   acompanha a virada de fundo preto↔branco da seção */
.parceiros__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 84px 84px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 95%);
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 95%);
}

.parceiros__grid--light {
  background-image:
    linear-gradient(to right, var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-dark) 1px, transparent 1px);
}

/* centralização por layout (margin auto + margin-top negativo), nunca por
   transform: o GSAP anima `scale` no transform e zeraria um `translate` CSS
   (assando um offset defasado no resize) — com margin o centro fica cravado
   no meio do topo da seção e o scale compõe limpo por cima */
.parceiros__ponto {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: clamp(96px, 11vw, 160px);
  height: auto;
  margin-inline: auto;
  margin-top: calc(clamp(96px, 11vw, 160px) * -0.5);
  pointer-events: none;
  fill: var(--color-yellow);
}

.parceiros__ponto circle:first-child {
  opacity: 0.35;
}

.parceiros__inner {
  --pad-x: 0px;
  position: relative;
  z-index: 3;
  padding: clamp(80px, 10vh, 140px) 0 clamp(96px, 12vh, 160px);
}

/* o título herda a cor da seção (branca no início, escura após a virada de
   fundo dirigida pela cobrinha); a sombra discreta acompanha em ambos os estados */
.parceiros .section-title {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.10);
}

/* mesma herança de cor do título (branca > escura na virada de fundo); opacidade
   reduzida (em vez de rgba) para acompanhar a transição de `color` via GSAP */
.parceiros__subtitle {
  margin: clamp(14px, 1.8vw, 22px) auto 0;
  max-width: 52ch;
  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  line-height: 1.7;
  text-align: center;
  opacity: 0.82;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.10);
}

.logos {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.5vw, 56px);
  margin-top: clamp(48px, 6vw, 88px);
}

.logos__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.logos__track {
  display: flex;
  width: max-content;
  margin-inline: auto;
  will-change: transform;
}

.logos__group {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  padding-right: clamp(40px, 5vw, 80px);
}

.logos__group img {
  height: clamp(56px, 7vw, 96px);
  width: auto;
}

/* ===== Sobre nós ===== */

.sobre {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--color-gray-dark);
  color: var(--color-white);
  overflow: hidden;
}

/* mesmo grid da hero/parceiros, mas a máscara desbota nas 4 arestas da seção
   (intersecção de dois gradientes lineares) em vez de um radial central */
.sobre__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 84px 84px;
  background-position: center center;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

.sobre__inner {
  --pad-x: clamp(48px, 6vw, 120px);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: clamp(80px, 10vh, 140px) var(--pad-x) clamp(96px, 12vh, 160px);
}

/* align-items: stretch (default do grid) faz o mosaico esticar até a altura do
   bloco de texto, garantindo que as bordas superior e inferior dos dois
   agrupamentos coincidam */
.sobre__conteudo {
  margin-top: clamp(48px, 6vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
  gap: clamp(36px, 5vw, 80px);
}

/* moldura: cantos arredondados + contorno amarelo discreto e glow suave estável.
   Reutilizada por outdoor.html (.prod-sobre__media) */
.sobre__media {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  border: 1px solid rgba(255, 204, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.12), 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

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

/* carrossel em loop (deslize automático): as imagens ficam num trilho flex e
   deslizam da direita para a esquerda (JS initLoopCarousels monta o trilho e um
   clone do 1º slide para o loop contínuo). A moldura hospedeira já tem
   aspect-ratio + overflow:hidden. Com reduced motion o trilho não é montado e o
   CSS deixa só o primeiro slide preenchendo a moldura */
[data-loop-carousel] {
  position: relative;
}

.loop-carousel__track {
  position: absolute;
  inset: 0;
  display: flex;
}

.loop-carousel__slide {
  flex: 0 0 100%;
  height: 100%;
}

.loop-carousel__slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

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

/* mosaico de 3 imagens (quadrada + horizontal empilhadas ao lado da vertical, que
   ocupa as duas linhas) formando um retângulo só, esticado pela altura do texto */
.sobre__mosaico {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-rows: 1.15fr 0.85fr;
  gap: clamp(12px, 1.4vw, 20px);
}

.sobre__mosaico-item {
  margin: 0;
  border-radius: 24px;
  border: 1px solid rgba(255, 204, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.12), 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.sobre__mosaico-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sobre__mosaico-item--quadrada {
  grid-column: 1;
  grid-row: 1;
}

.sobre__mosaico-item--horizontal {
  grid-column: 1;
  grid-row: 2;
}

.sobre__mosaico-item--vertical {
  grid-column: 2;
  grid-row: 1 / 3;
}

.sobre__texto {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.6vw, 22px);
  text-align: justify;
  hyphens: auto;
}

.sobre__texto p {
  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}

.sobre__texto strong {
  font-weight: 700;
  color: var(--color-white);
}

/* gancho de abertura do texto: mesmo tom de destaque do strong, porém maior */
.sobre__subtitulo {
  font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.5;
  color: var(--color-white);
}

/* hug do próprio conteúdo (não estica full-width no flex column do .sobre__texto) */
.sobre__cta {
  align-self: flex-start;
  margin-top: clamp(8px, 1.2vw, 16px);
}

/* ===== Blog do Outdoor (teaser da home) ===== */

/* fundo claro entre duas seções dark (Sobre e Benefícios) */
.blog-outdoor {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--color-offwhite);
  color: #0E0E0E;
  overflow: hidden;
}

/* mesma grade decorativa das seções claras (Depoimentos), linhas escuras
   desbotando nas 4 arestas */
.blog-outdoor__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-dark) 1px, transparent 1px);
  background-size: 84px 84px;
  background-position: center center;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

/* palavra-marca decorativa: cor sólida ecoada no fundo de .beneficios logo
   abaixo; tamanho preenchendo a seção via JS */
.blog-outdoor__brand {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 45%);
  z-index: 1;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--blogoutdoor-brand-size, clamp(5rem, 30vw, 22rem));
  line-height: 0.9;
  white-space: nowrap;
  color: var(--color-gray-dark);
  user-select: none;
  pointer-events: none;
}

.blog-outdoor__inner {
  --pad-x: clamp(48px, 6vw, 120px);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: clamp(80px, 10vh, 140px) var(--pad-x) clamp(96px, 12vh, 160px);
  text-align: center;
}

.blog-outdoor__subtitle {
  margin: clamp(18px, 2vw, 28px) auto 0;
  max-width: 56ch;
  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  line-height: 1.7;
  color: rgba(14, 14, 14, 0.72);
}

.mini-carousel {
  position: relative;
  margin-top: clamp(28px, 3.4vh, 48px);
}

/* setas e dots ficam ACIMA dos cards nesta seção (logo abaixo do subtítulo),
   ao contrário do carrossel do catálogo (onde ficam abaixo) */
.mini-carousel .carousel__controls {
  margin-top: 0;
  margin-bottom: clamp(24px, 3vh, 40px);
}

/* dots num tom escuro: o branco translúcido do catálogo (pensado pro fundo
   dark) fica invisível sobre o fundo claro deste teaser */
.mini-carousel .carousel__dot {
  background-color: rgba(14, 14, 14, 0.25);
}

/* recorta os cards fora de vista; buffer de padding/margem negativa evita que o
   hover (elevação + glow) seja cortado, mesma receita do .carousel__viewport */
.mini-carousel__viewport {
  overflow: hidden;
  padding: 28px 16px 56px;
  margin: -28px -16px -56px;
  cursor: grab;
  touch-action: pan-y;
}

.mini-carousel__viewport.is-dragging {
  cursor: grabbing;
}

.mini-carousel__track {
  --gap: clamp(18px, 2vw, 28px);
  --cards: 4;
  display: flex;
  gap: var(--gap);
  list-style: none;
  will-change: transform;
}

.mini-blog-card {
  flex: 0 0 calc((100% - (var(--cards) - 1) * var(--gap)) / var(--cards));
  display: flex;
}

/* cartão inteiro é um único link (mesmo padrão de .depoimento): sem botão
   "Ver mais" individual, só o CTA geral da seção leva ao catálogo */
.mini-blog-card a {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.1vw, 14px);
  width: 100%;
  padding: clamp(22px, 2.2vw, 30px);
  text-align: left;
  text-decoration: none;
  color: inherit;
  background-color: #FFFFFF;
  border: 1px solid rgba(14, 14, 14, 0.08);
  border-radius: clamp(16px, 1.6vw, 22px);
  box-shadow: 0 12px 28px rgba(14, 14, 14, 0.06);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.55s ease, border-color 0.55s ease;
}

.mini-blog-card a:hover,
.mini-blog-card a:focus-visible {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(255, 204, 0, 0.65);
  box-shadow: 0 20px 44px rgba(14, 14, 14, 0.12), 0 0 1.4em 0.05em rgba(255, 204, 0, 0.28);
}

/* uppercase escuro em vez do amarelo do catálogo: amarelo puro tem contraste
   ruim sobre o fundo claro do teaser.
   0.6 é o piso: a 0.55 a cor resultante sobre o branco do card dava 4.27:1 e
   reprovava o mínimo de 4.5:1 do WCAG AA, agravado por ser um texto de ~10px.
   Mesmo alfa do .mini-blog-card__cta logo abaixo, que já estava correto */
.mini-blog-card__meta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.66rem, 0.76vw, 0.76rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(14, 14, 14, 0.6);
}

.mini-blog-card__title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  line-height: 1.1;
  color: #0E0E0E;
}

/* resumo em 2 linhas (card mais curto sem imagem, contra 3 linhas no catálogo) */
.mini-blog-card__resumo {
  font-size: clamp(0.84rem, 0.95vw, 0.92rem);
  line-height: 1.55;
  color: rgba(14, 14, 14, 0.68);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mini-blog-card__cta {
  margin-top: auto;
  padding-top: clamp(10px, 1.2vw, 14px);
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(14, 14, 14, 0.08);
  font-size: clamp(0.78rem, 0.85vw, 0.86rem);
  font-weight: 600;
  color: rgba(14, 14, 14, 0.6);
  transition: color 0.4s ease;
}

.mini-blog-card__cta-seta {
  width: clamp(15px, 1.3vw, 18px);
  height: auto;
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 0.4s ease;
}

.mini-blog-card a:hover .mini-blog-card__cta,
.mini-blog-card a:focus-visible .mini-blog-card__cta {
  color: var(--color-yellow-2);
}

.mini-blog-card a:hover .mini-blog-card__cta-seta,
.mini-blog-card a:focus-visible .mini-blog-card__cta-seta {
  transform: translateX(4px);
}

.blog-outdoor__cta {
  margin-top: clamp(32px, 4vw, 56px);
  display: flex;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .mini-blog-card a,
  .mini-blog-card__cta,
  .mini-blog-card__cta-seta {
    transition: none !important;
  }
}

/* ===== Por que escolher (benefícios) ===== */

/* seção dark full-height, no mesmo padrão de Sobre/Pontos: sem nenhum
   container limitando a largura do conteúdo além do --pad-x do inner */
.beneficios {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--color-gray-dark);
  color: var(--color-white);
  overflow: hidden;
}

/* grids decorativos: mesmo passo (84px) dos grids de fundo das outras seções.
   Os dois preenchem um vértice da seção em formato triangular (fade diagonal):
   opacos no canto, encostando nas bordas, e desbotando em direção ao centro */
.beneficios__grid {
  --bf-line: rgba(255, 255, 255, 0.51);
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--bf-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bf-line) 1px, transparent 1px);
  background-size: 84px 84px;
}

/* canto superior direito: maior (mais quadrados), pois é o vértice com mais
   espaço vazio da seção */
/* deslocado meia célula para cima (-42px): a linha horizontal que ficava na
   borda superior da seção sai do quadro (cortada pelo overflow) */
.beneficios__grid--tr {
  top: -42px;
  right: 0;
  width: clamp(340px, 62%, 880px);
  height: clamp(300px, 60%, 720px);
  background-position: right top;
  -webkit-mask-image: linear-gradient(to bottom left, #000 0%, transparent 64%);
  mask-image: linear-gradient(to bottom left, #000 0%, transparent 64%);
}

/* canto inferior esquerdo: o mesmo grid espelhado, menor (o vértice tem menos
   espaço vazio) */
/* deslocado meia célula para baixo (-42px): a linha horizontal que ficava na
   borda inferior da seção sai do quadro (cortada pelo overflow) */
.beneficios__grid--bl {
  left: 0;
  bottom: -42px;
  width: clamp(240px, 44%, 600px);
  height: clamp(220px, 42%, 540px);
  background-position: left bottom;
  -webkit-mask-image: linear-gradient(to top right, #000 0%, transparent 64%);
  mask-image: linear-gradient(to top right, #000 0%, transparent 64%);
}

/* vignette na cor do fundo da seção nas quatro arestas. Na área vazia é
   invisível, mas sobre os grids apaga as linhas junto às bordas: assim a
   ORIGEM dos grids (cantos inf-esq e sup-dir) também desbota, não só a ponta
   que vai ao centro. Fica acima dos grids (mesmo z-index, depois no DOM) e
   abaixo do conteúdo */
.beneficios__edges {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--color-gray-dark), rgba(28, 28, 30, 0) 16%, rgba(28, 28, 30, 0) 84%, var(--color-gray-dark)),
    linear-gradient(to bottom, var(--color-gray-dark), rgba(28, 28, 30, 0) 16%, rgba(28, 28, 30, 0) 84%, var(--color-gray-dark));
}

.beneficios__inner {
  --pad-x: clamp(28px, 5vw, 80px);
  /* largura do agrupamento título + benefícios: os dois partilham esta medida
     para ficarem visualmente no mesmo bloco */
  --group-width: clamp(480px, 70%, 1000px);
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: clamp(80px, 10vh, 140px) var(--pad-x) clamp(96px, 12vh, 160px);
}

/* variante alinhada à esquerda do título de seção: mantém a MESMA animação de
   entrada (.section-title), mas anula o gutter centralizado, alinha à esquerda e
   ganha mais destaque (maior) */
.beneficios__title {
  margin-inline: 0;
  padding-inline: 0;
  max-width: var(--group-width);
  text-align: left;
  font-size: clamp(3rem, 6.4vw, 6.6rem);
}

/* benefícios contidos na mesma largura do título: o trio fica compacto e o
   conjunto título+benefícios lê como um único agrupamento */
.beneficios__lista {
  margin-top: clamp(34px, 4vw, 58px);
  max-width: var(--group-width);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 56px);
}

.beneficio {
  display: flex;
  flex-direction: column;
  gap: clamp(11px, 1.1vw, 16px);
}

.beneficio__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 3.6vw, 52px);
  height: clamp(44px, 3.6vw, 52px);
  border-radius: 12px;
  background-color: rgba(255, 204, 0, 0.16);
  color: var(--color-yellow-2);
}

.beneficio__icon svg {
  width: 56%;
  height: 56%;
}

.beneficio__titulo {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  letter-spacing: 0.02em;
  color: var(--color-white);
}

.beneficio__texto {
  font-size: clamp(0.85rem, 0.95vw, 0.98rem);
  line-height: 1.6;
  text-align: justify;
  hyphens: auto;
  color: rgba(255, 255, 255, 0.72);
}

.beneficio__texto strong {
  font-weight: 700;
  color: var(--color-white);
}

/* CTA no canto inferior direito: frase + botão redondo */
.beneficios__cta {
  margin-top: clamp(48px, 6vw, 88px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(20px, 2.5vw, 36px);
}

.beneficios__cta-text {
  max-width: 32ch;
  text-align: right;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.beneficios__cta-text strong {
  font-weight: 700;
  color: var(--color-white);
}

/* botão redondo: preenchimento amarelo sólido, sem contorno, texto branco. Hover
   na MESMA linguagem do site: transição única de fundo + glow estável */
.beneficios__cta-btn {
  flex-shrink: 0;
  width: clamp(120px, 12vw, 156px);
  height: clamp(120px, 12vw, 156px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1em;
  border-radius: 50%;
  border: none;
  /* estado de repouso invertido: já nasce "iluminado" (amarelo secundário + glow) */
  background-color: var(--color-yellow-2);
  box-shadow: 0 0 1.4em 0.1em rgba(255, 204, 0, 0.45);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.8rem, 0.95vw, 0.95rem);
  line-height: 1.25;
  color: #0E0E0E;
  text-decoration: none;
  transition: background-color 1s ease, box-shadow 1s ease;
}

/* no hover volta ao estado "apagado" (amarelo primário, sem glow) */
.beneficios__cta-btn:hover {
  background-color: var(--color-yellow);
  box-shadow: none;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.beneficios__cta-btn:active {
  transform: scale(0.95);
}

@media (prefers-reduced-motion: reduce) {
  .beneficios__cta-btn {
    transition: none !important;
  }
}

/* ===== Depoimentos ===== */

/* mesmo tom de cinza do fundo da seção de benefícios; altura cheia como Sobre/Pontos */
.depoimentos {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--color-offwhite);
  color: #0E0E0E;
  overflow: hidden;
}

/* grade decorativa em linhas escuras (sobre o fundo claro), desbotando nas 4
   arestas — mesmo motivo das seções Sobre/Pontos, adaptado ao fundo cinza */
.depoimentos__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-dark) 1px, transparent 1px);
  background-size: 84px 84px;
  background-position: center center;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

.depoimentos__inner {
  --pad-x: clamp(48px, 6vw, 120px);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: clamp(80px, 10vh, 140px) var(--pad-x) clamp(96px, 12vh, 160px);
}

/* o título fica sobre o fundo cinza: cor escura para contraste, com o mesmo
   tamanho do título de benefícios. text-shadow em camadas: cada letra projeta
   uma sombra própria, esfumaçada e difundida, descolando o título do fundo
   chapado. Letras pretas recebem sombra BRANCA (e as amarelas, sombra preta)
   para o halo contrastar com a cor da letra */
.depoimentos__title {
  color: #0E0E0E;
  font-size: clamp(3rem, 6.4vw, 6.6rem);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.10);
}

.depoimentos__title .t-yellow {
  color: #0E0E0E;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.10);
}

/* selo: 5 estrelas acima do logo do Google (versão com a palavra escrita),
   centralizados abaixo do título */
.depoimentos__selo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(22px, 2.6vw, 36px);
}

/* versão reduzida do mesmo halo radial (branco) atrás das estrelas + logo,
   descolando-os do fundo cinza (z-index negativo: fica atrás do conteúdo do selo) */
.depoimentos__selo::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 84%);
  height: 230%;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, 0.57) 0%,
    rgba(255, 255, 255, 0.34) 38%,
    rgba(255, 255, 255, 0) 72%);
  filter: blur(22px);
}

.depoimentos__estrelas {
  display: inline-flex;
  gap: clamp(4px, 0.5vw, 7px);
}

.depoimentos__estrelas svg {
  width: clamp(22px, 2.4vw, 30px);
  height: auto;
  fill: var(--color-yellow);
}

.depoimentos__google {
  width: clamp(120px, 13.8vw, 166px);
  height: auto;
}

.depoimentos__lista {
  margin-top: clamp(44px, 5vw, 72px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 34px);
}

/* desktop: cards retos e alinhados, todos com a mesma altura (grid stretch +
   sem escalonamento vertical). No hover ganham a leve rotação alternada (--tilt,
   um lado p/ cada) e crescem um pouco, com glow estável amarelo na mesma
   linguagem do site. O transform inline da entrada GSAP é limpo no fim
   (clearProps) para que estas regras de repouso/hover voltem a valer.
   Em telas ≤960 o comportamento se inverte (ver media query) */
.depoimento {
  --tilt: 0deg;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 20px);
  padding: clamp(26px, 2.4vw, 38px);
  border-radius: clamp(20px, 1.8vw, 28px);
  background-color: #0E0E0E;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  color: var(--color-white);
  text-decoration: none;
  overflow: hidden;
  transform: rotate(0deg);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.55s ease, border-color 0.55s ease;
}

.depoimento:nth-child(1) { --tilt: -4deg; }
.depoimento:nth-child(2) { --tilt: 3deg; }
.depoimento:nth-child(3) { --tilt: -3deg; }
.depoimento:nth-child(4) { --tilt: 4deg; }

.depoimento:hover,
.depoimento:focus-visible {
  transform: rotate(var(--tilt)) scale(1.045);
  border-color: rgba(255, 204, 0, 0.65);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45), 0 0 1.4em 0.05em rgba(255, 204, 0, 0.28);
  z-index: 2;
}

/* aspas decorativas grandes no canto do card */
.depoimento::before {
  content: "\201C";
  position: absolute;
  top: clamp(2px, 0.8vw, 10px);
  right: clamp(18px, 2vw, 30px);
  font-family: var(--font-title);
  font-size: clamp(4.5rem, 6vw, 7rem);
  line-height: 1;
  color: rgba(255, 204, 0, 0.16);
  pointer-events: none;
}

.depoimento__cabecalho {
  display: flex;
  align-items: center;
  gap: 14px;
}

.depoimento__avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(46px, 4vw, 56px);
  height: clamp(46px, 4vw, 56px);
  border-radius: 50%;
  background: linear-gradient(150deg, var(--color-yellow), var(--color-yellow-2));
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  line-height: 1;
  color: #0E0E0E;
}

.depoimento__quem {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.depoimento__nome {
  font-weight: 700;
  font-size: clamp(0.98rem, 1.1vw, 1.12rem);
  color: var(--color-white);
}

.depoimento__estrelas {
  display: inline-flex;
  gap: 3px;
}

.depoimento__estrelas svg {
  width: clamp(14px, 1.2vw, 17px);
  height: auto;
  fill: var(--color-yellow);
}

.depoimento__texto {
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}

/* fixado na base do card (margin-top: auto) com separador sutil acima */
.depoimento__cta {
  margin-top: auto;
  padding-top: clamp(12px, 1.4vw, 18px);
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: clamp(0.78rem, 0.85vw, 0.88rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.4s ease;
}

.depoimento__cta-google {
  width: clamp(15px, 1.3vw, 18px);
  height: auto;
  flex-shrink: 0;
}

.depoimento__cta-seta {
  width: clamp(15px, 1.3vw, 18px);
  height: auto;
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 0.4s ease;
}

.depoimento:hover .depoimento__cta,
.depoimento:focus-visible .depoimento__cta {
  color: var(--color-yellow);
}

.depoimento:hover .depoimento__cta-seta,
.depoimento:focus-visible .depoimento__cta-seta {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .depoimento,
  .depoimento__cta,
  .depoimento__cta-seta {
    transition: none !important;
  }
}

/* ===== Pontos de mídia ===== */

.pontos {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--color-gray-dark);
  color: var(--color-white);
  overflow: hidden;
}

/* mesma máscara de grid da seção Sobre (desbota nas 4 arestas) */
.pontos__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 84px 84px;
  background-position: center center;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

.pontos__inner {
  --pad-x: clamp(48px, 6vw, 120px);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: clamp(80px, 10vh, 140px) var(--pad-x) clamp(96px, 12vh, 160px);
  text-align: center;
}

.pontos__subtitle {
  margin: clamp(18px, 2vw, 28px) auto 0;
  max-width: 56ch;
  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}

.pontos__subtitle strong {
  font-weight: 700;
  color: var(--color-white);
}

/* moldura do mapa: a largura acompanha a do título (--pontos-media-w, medido em
   JS). position: relative ancora o botão sobreposto. Gap menor até o subtítulo */
.pontos__media {
  position: relative;
  width: 100%;
  max-width: min(var(--pontos-media-w, 580px), 92vw);
  margin: clamp(18px, 2.4vw, 36px) auto 0;
  aspect-ratio: 3 / 2;
  border-radius: 24px;
  border: 1px solid rgba(255, 204, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.12), 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

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

/* botão sobreposto à imagem, encostado à borda inferior da moldura com respiro */
.pontos__actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(14px, 2.2vw, 26px);
  z-index: 1;
  display: flex;
  justify-content: center;
}

.pontos__actions .btn {
  padding: 1.45em 2.9em;
}

/* dois ou três botões de praça lado a lado dentro da moldura: gap entre eles,
   respiro lateral e wrap para empilhar em molduras estreitas. O padding é bem
   mais enxuto que o do botão único porque aqui os botões dividem espaço com os
   pinos do mapa, que são o assunto da imagem e não podem ficar encobertos */
.pontos__actions--multipla {
  flex-wrap: wrap;
  gap: clamp(8px, 1.1vw, 14px);
  padding-inline: clamp(14px, 2.2vw, 26px);
}

.pontos__actions--multipla .btn {
  padding: 0.85em 1.15em;
  font-size: clamp(0.7rem, 0.8vw, 0.84rem);
}

/* ===== Calendário de bi-semanas (produto Outdoor) ===== */

/* seção clara: o pôster vertical (9:16, autossuficiente) emoldurado à esquerda e
   um painel de valor + CTAs à direita. Fundo off-white para o pôster quase preto
   "saltar" como objeto emoldurado, mantendo o ritmo escuro→claro após o mapa */
.calendario {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--color-offwhite);
  color: #0E0E0E;
  overflow: hidden;
}

/* mesma máscara de grade das demais seções (desbota nas 4 arestas), na cor escura */
.calendario__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-dark) 1px, transparent 1px);
  background-size: 84px 84px;
  background-position: center center;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

.calendario__inner {
  --pad-x: clamp(48px, 6vw, 120px);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: clamp(56px, 7vh, 100px) var(--pad-x);
}

/* título tratado como nas demais seções claras: escuro + halo (inclusive a
   palavra de destaque, que em amarelo não teria contraste no off-white) */
.calendario .section-title,
.calendario .section-title .t-yellow {
  color: #0E0E0E;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.10);
}

/* duas colunas: pôster (largura derivada da altura via aspect-ratio) + painel
   (título da seção + bullets + CTAs). O painel tem largura própria (não 1fr) e o
   conjunto é centralizado por justify-content, então as margens em relação às
   bordas da tela ficam iguais dos dois lados (nada de deslocar para a esquerda).
   minmax(0, ...) deixa o painel encolher em telas estreitas sem estourar */
.calendario__layout {
  display: grid;
  grid-template-columns: auto minmax(0, 580px);
  justify-content: center;
  align-items: center;
  gap: clamp(40px, 5vw, 96px);
  margin: 0 auto;
}

/* pôster clicável (abre o lightbox): o botão é só o invólucro de tamanho — o
   GSAP anima transform/opacity aqui, então NÃO leva transition de transform
   (a moldura interna é que faz o hover, sem conflitar com a entrada) */
.calendario__poster {
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  height: min(85vh, 880px);
  aspect-ratio: 9 / 16;
}

/* moldura visual: borda amarela + cantos + sombra suave, recorta a imagem */
.calendario__poster-frame {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 204, 0, 0.55);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.18), 0 20px 48px rgba(0, 0, 0, 0.14);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* mesmo motivo de .produto__media picture: o wrapper não pode entrar no fluxo */
.calendario__poster-frame picture {
  display: contents;
}

/* a imagem É 9:16, então cover preenche a moldura sem recorte */
.calendario__poster-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* pílula "Ampliar" que surge no hover/foco — convite claro a abrir o lightbox */
.calendario__poster-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 2vw, 22px);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1.05em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.74);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.calendario__poster-hint svg {
  width: 1.1em;
  height: 1.1em;
  color: var(--color-yellow);
}

.calendario__poster:hover .calendario__poster-frame,
.calendario__poster:focus-visible .calendario__poster-frame {
  transform: scale(1.015);
  box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.3), 0 26px 60px rgba(0, 0, 0, 0.2);
}

.calendario__poster:hover .calendario__poster-hint,
.calendario__poster:focus-visible .calendario__poster-hint {
  opacity: 1;
  transform: translate(-50%, 0);
}

.calendario__panel {
  display: flex;
  flex-direction: column;
}

/* o título da seção vive dentro do painel (alinhado à coluna, não centralizado):
   zera o gutter herdado do inner para encostar à esquerda; o resto (entrada
   SplitText, encaixe em 2 linhas, cor + halo) segue o padrão .section-title */
.calendario__title {
  --pad-x: 0px;
  --title-gutter: 0px;
  text-align: left;
  font-size: clamp(2.4rem, 4vw, 4.2rem);
}

.calendario__list {
  list-style: none;
  margin: clamp(22px, 2.4vw, 32px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
}

.calendario__list li {
  position: relative;
  padding-left: 2.1em;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  color: rgba(14, 14, 14, 0.82);
}

/* marcador: disco amarelo suave com um "check" desenhado por bordas (paint only) */
.calendario__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: rgba(255, 204, 0, 0.16);
}

.calendario__list li::after {
  content: "";
  position: absolute;
  left: 0.5em;
  top: 0.4em;
  width: 0.34em;
  height: 0.62em;
  border-right: 2px solid var(--color-yellow-2);
  border-bottom: 2px solid var(--color-yellow-2);
  transform: rotate(45deg);
}

.calendario__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: clamp(30px, 3.4vw, 44px);
}

.calendario__actions .btn {
  padding: 1.25em 2.4em;
  font-size: clamp(0.9rem, 1vw, 1rem);
}

/* lightbox do calendário: overlay em tela cheia com o pôster ampliado. Repouso
   escondido por visibility+opacity (fora da árvore de acessibilidade e do tab);
   o JS anima o autoAlpha (visibility+opacity) na abertura/fechamento */
/* acima do botão de menu fixo (960) para o backdrop cobri-lo, e abaixo do cursor
   customizado (980) para o pixel de LED seguir por cima do overlay */
.calendario__lightbox {
  position: fixed;
  inset: 0;
  z-index: 970;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 48px);
  visibility: hidden;
  opacity: 0;
}

.calendario__lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  cursor: pointer;
}

/* o dialog é o viewport do zoom: recorta a imagem ampliada (overflow) e desliga
   os gestos nativos de toque (touch-action: none) para o pinch/pan ser tratado
   por JS. line-height 0 remove o espaço de baseline abaixo da imagem inline */
.calendario__lightbox-dialog {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  line-height: 0;
  touch-action: none;
}

/* mesmo motivo de .calendario__poster-frame picture: o diálogo dimensiona
   contra a imagem e o zoom mede o rect dela, o wrapper não pode entrar no meio */
.calendario__lightbox-dialog picture {
  display: contents;
}

.calendario__lightbox-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(560px, 92vw);
  max-height: 90vh;
  transform-origin: 0 0;
  will-change: transform;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.calendario__lightbox-img.is-zoomed {
  cursor: zoom-out;
}

/* dentro do lightbox o cursor LED some e dá lugar aos cursores nativos de lupa
   (o padrão do site esconde o cursor nativo com cursor: none !important) */
html.has-custom-cursor .calendario__lightbox-img {
  cursor: zoom-in !important;
}

html.has-custom-cursor .calendario__lightbox-img.is-zoomed {
  cursor: zoom-out !important;
}

html.has-custom-cursor .calendario__lightbox-close,
html.has-custom-cursor .calendario__lightbox-backdrop {
  cursor: pointer !important;
}

html.is-lightbox-open .cursor-dot,
html.is-lightbox-open .cursor-ring {
  visibility: hidden !important;
}

.calendario__lightbox-close {
  position: absolute;
  top: clamp(14px, 3vw, 26px);
  right: clamp(14px, 3vw, 26px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--color-yellow);
  color: #000;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.calendario__lightbox-close:hover {
  background: var(--color-yellow-2);
  transform: scale(1.08);
}

.calendario__lightbox-close svg {
  width: 18px;
  height: 18px;
}

/* ===== Nossas Unidades ===== */

/* mesmo fundo cinza e linguagem da seção de depoimentos */
.unidades {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--color-offwhite);
  color: #0E0E0E;
  overflow: hidden;
}

/* grade escura desbotando nas 4 arestas — idêntica à de depoimentos (fundo claro) */
.unidades__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-dark) 1px, transparent 1px);
  background-size: 84px 84px;
  background-position: center center;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

.unidades__inner {
  --pad-x: clamp(48px, 6vw, 120px);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: clamp(80px, 10vh, 140px) var(--pad-x) clamp(96px, 12vh, 160px);
  text-align: center;
}

/* título sobre o cinza: cor escura + halo branco em camadas (mesma escolha de
   contraste do título de depoimentos) */
.unidades__title {
  color: #0E0E0E;
  font-size: clamp(3rem, 6.4vw, 6.6rem);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.10);
}

.unidades__title .t-yellow {
  color: #0E0E0E;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.10);
}

.unidades__subtitle {
  margin: clamp(18px, 2vw, 28px) auto 0;
  max-width: 58ch;
  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.72);
}

.unidades__lista {
  margin-top: clamp(44px, 5vw, 72px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 2.4vw, 38px);
  max-width: 1320px;
  margin-inline: auto;
}

/* card escuro reto (sem o tilt dos depoimentos): contato pede leitura firme.
   Hover sobe e cresce com o glow amarelo padrão. O transform inline da entrada
   GSAP é limpo no fim (clearProps) para o hover voltar a valer */
.unidade {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.2vw, 18px);
  padding: clamp(28px, 2.6vw, 44px);
  border-radius: clamp(20px, 1.8vw, 28px);
  background-color: #0E0E0E;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  color: var(--color-white);
  text-align: left;
  overflow: hidden;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.55s ease, border-color 0.55s ease;
}

.unidade:hover,
.unidade:focus-within {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(255, 204, 0, 0.65);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.45), 0 0 1.6em 0.05em rgba(255, 204, 0, 0.28);
  z-index: 2;
}

.unidade__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* selo "pílula": Matriz = primário (amarelo cheio), Filial = ghost (contornado) —
   espelha as variantes de botão do site */
.unidade__tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.72rem, 0.85vw, 0.82rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.unidade__tag--matriz {
  background-color: var(--color-yellow);
  color: var(--color-black);
}

.unidade__tag--filial {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--color-white);
}

/* pixel de LED (nó à marca): ponto aceso. Na pílula amarela vira um pixel preto;
   na ghost, um pixel amarelo com glow estável */
.unidade__led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.unidade__tag--matriz .unidade__led {
  background-color: var(--color-black);
}

.unidade__tag--filial .unidade__led {
  background-color: var(--color-yellow);
  box-shadow: 0 0 8px 1px rgba(255, 204, 0, 0.8);
}

.unidade__pin {
  width: clamp(24px, 2.2vw, 30px);
  height: auto;
  color: rgba(255, 204, 0, 0.7);
  flex-shrink: 0;
}

.unidade__cidade {
  margin-top: clamp(6px, 0.8vw, 12px);
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2.6rem, 4vw, 3.8rem);
  line-height: 0.95;
  color: var(--color-white);
}

.unidade__cidade .t-yellow {
  color: var(--color-yellow);
}

.unidade__contatos {
  list-style: none;
  margin: clamp(6px, 0.8vw, 12px) 0 0;
  padding: clamp(18px, 1.8vw, 24px) 0 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.2vw, 16px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.unidade__contato {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(0.88rem, 0.95vw, 0.98rem);
}

.unidade__contato-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(34px, 3vw, 40px);
  height: clamp(34px, 3vw, 40px);
  border-radius: 11px;
  background-color: rgba(255, 204, 0, 0.12);
  color: var(--color-yellow);
}

.unidade__contato-icon svg {
  width: clamp(17px, 1.5vw, 20px);
  height: auto;
}

.unidade__contato a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  word-break: break-word;
  transition: color 0.3s ease;
}

.unidade__contato a:hover,
.unidade__contato a:focus-visible {
  color: var(--color-yellow);
}

/* o botão senta na base do card (margin-top:auto) e alinha as duas unidades */
.unidade__btn {
  margin-top: clamp(24px, 2.4vw, 34px);
  align-self: center;
}

/* rótulo curto ("Fale Conosco") aparece só no mobile; desktop mantém o completo */
.unidade__btn-short {
  display: none;
}

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

/* ===== Rodapé ===== */

/* tom mais escuro que o --color-gray-dark das seções, mais próximo do preto
   (mesmo quase-preto já usado nos cards do site, como .unidade e
   .artigo__stat) */
.footer {
  background-color: #0E0E0E;
}

.footer__inner {
  max-width: 1520px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) clamp(48px, 6vw, 120px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(40px, 5vw, 90px);
}

.footer__col--brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer__col--mapa {
  width: clamp(260px, 26vw, 360px);
}

.footer__col--contato {
  width: clamp(230px, 20vw, 280px);
}

.footer__logo {
  width: fit-content;
}

.footer__logo img {
  width: clamp(130px, 11vw, 170px);
}

.footer__tagline {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

.footer__tagline strong {
  color: var(--color-yellow);
}

/* o anchor recebe o clique; o iframe é só visual (pointer-events: none) */
.footer__mapa {
  position: relative;
  display: block;
  height: 100%;
  min-height: 220px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.footer__mapa:hover {
  border-color: var(--color-yellow);
  box-shadow: 0 0 1.2em 0.05em rgba(255, 204, 0, 0.25);
}

.footer__mapa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  /* tema dark: inverte o mapa claro do embed preservando os tons */
  filter: invert(90%) hue-rotate(180deg) contrast(88%) grayscale(25%);
}

.footer__heading {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: var(--color-yellow);
  margin-bottom: 20px;
}

.footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__list a,
.footer__list span {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.35s ease;
}

.footer__list a:hover {
  color: var(--color-yellow);
}

.footer__list--contato li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.footer__list--contato a,
.footer__list--contato span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.footer__list--contato svg {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: var(--color-yellow);
}

/* ===== Faixa de copyright ===== */

.footer__bar {
  background-color: var(--color-gray-mid);
}

.footer__bar-inner {
  max-width: 1520px;
  margin: 0 auto;
  padding: 18px clamp(48px, 6vw, 120px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer__copy {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer__social {
  display: flex;
  gap: 18px;
}

.footer__social a {
  color: var(--color-yellow);
  transition: color 0.35s ease;
}

.footer__social a:hover {
  color: var(--color-yellow-2);
}

.footer__social svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ===== Sobre (página) — Hero ===== */

.sobre-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--color-gray-dark);
  overflow: hidden;
}

/* mesma grade desbotando nas 4 arestas das seções escuras do site (Apresentação/Pontos) */
.sobre-hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 84px 84px;
  background-position: center center;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

/* A hero empilha eyebrow → título → vídeo → seta numa coluna centralizada. Os
   quatro espaços saem todos de --ritmo, então a proporção entre eles se mantém
   igual em qualquer tela: nenhum respiro é escolhido isoladamente */
.sobre-hero__inner {
  --pad-x: clamp(48px, 6vw, 120px);
  --ritmo: clamp(16px, 2.1vh, 26px);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  /* padding vertical simétrico: com o inner centralizado no flex, é o que faz a
     distância do conteúdo até a borda de cima ser igual à de baixo */
  padding: clamp(80px, 10vh, 120px) var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sobre-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.76rem, 1vw, 0.92rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-yellow);
}

.sobre-hero__title {
  margin-top: calc(var(--ritmo) * 0.5);
  /* o vídeo é o peso principal da dobra: o título cede escala para ele */
  font-size: clamp(2.4rem, 4.2vw, 4.2rem);
  color: var(--color-white);
}

/* Moldura do vídeo institucional. A largura também é limitada pela ALTURA da
   janela (100vh de largura equivale a 56vh de altura no 16:9), para o conjunto
   título + vídeo + seta continuar cabendo na dobra em telas baixas, sem que
   nenhuma das três peças precise encolher. É um <button> porque o clique troca
   o conteúdo, então precisa ser focável e acionável por teclado */
.sobre-hero__player {
  position: relative;
  display: block;
  width: min(980px, 100%, 100vh);
  margin-top: calc(var(--ritmo) * 1.2);
  padding: 0;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 204, 0, 0.32);
  border-radius: clamp(14px, 1.4vw, 20px);
  background: none;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.sobre-hero__player picture,
.sobre-hero__player img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* escurece a capa em repouso para o play sobressair; some no hover */
.sobre-hero__player::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  transition: opacity 0.35s ease;
}

.sobre-hero__player:hover {
  border-color: var(--color-yellow);
  box-shadow: 0 0 2.6em rgba(255, 204, 0, 0.22);
}

.sobre-hero__player:hover::after {
  opacity: 0;
}

.sobre-hero__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: auto;
  width: clamp(56px, 5.2vw, 78px);
  height: clamp(56px, 5.2vw, 78px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--color-yellow);
  color: var(--color-black);
  transition: background-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.sobre-hero__play svg {
  width: 42%;
  height: 42%;
  fill: currentColor;
  /* o triângulo tem o peso visual à esquerda: desloca para o centro óptico */
  margin-left: 6%;
}

.sobre-hero__player:hover .sobre-hero__play {
  background-color: var(--color-yellow-2);
  box-shadow: 0 0 1.8em rgba(255, 204, 0, 0.55);
  transform: scale(1.06);
}

.sobre-hero__player:active .sobre-hero__play {
  transform: scale(0.95);
}

/* iframe que substitui a capa: herda a moldura para a troca não "pular" */
.sobre-hero__frame {
  display: block;
  width: min(980px, 100%, 100vh);
  margin-top: calc(var(--ritmo) * 1.2);
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 204, 0, 0.32);
  border-radius: clamp(14px, 1.4vw, 20px);
}

/* seta de "role para baixo": trio de chevrons (os mesmos dos botões e do menu,
   girados 90° para apontar para baixo) que sai de 1 e vira 3 num loop feito em JS,
   remetendo à linguagem de setas do site. Glow amarelo no hover */
.sobre-hero__cue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--ritmo);
  padding: 6px;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.35s ease, filter 0.35s ease;
}

.sobre-hero__cue:hover {
  color: var(--color-yellow);
  filter: drop-shadow(0 0 0.4em rgba(255, 204, 0, 0.45));
}

.sobre-hero__cue svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .sobre-hero__cue,
  .sobre-hero__player,
  .sobre-hero__player::after,
  .sobre-hero__play {
    transition: none !important;
  }
}

/* mesma faixa reta (marquee) da home entre Hero → Produtos, aqui entre o Hero e a
   Apresentação. Wrapper de altura zero: dá ao .marquee (position:absolute,
   top:-15vw) um ponto de ancoragem exatamente na costura entre as duas seções,
   sem precisar tirar o overflow:hidden de nenhuma delas */
.marquee-wrap {
  position: relative;
  height: 0;
}

/* ===== Sobre (página) — Apresentação ===== */

.apresentacao {
  position: relative;
  background-color: var(--color-gray-dark);
  color: var(--color-white);
  overflow: hidden;
}

/* mesma grade desbotando nas 4 arestas das seções Sobre/Pontos da home */
.apresentacao__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 84px 84px;
  background-position: center center;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

/* padding-top igual ao de .produtos__inner (home): soma a "sombra" que a faixa
   reta (marquee) projeta para baixo do topo da seção (metade da sua altura,
   15vw) com uma folga fixa, senão o conteúdo nasceria colado nela */
.apresentacao__inner {
  --pad-x: clamp(48px, 6vw, 120px);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: calc(15vw + 16px) var(--pad-x) 0;
}

/* o padding inferior (que era do __inner) vira padding do próprio __timeline:
   a linha (height:100% relativo a este container) passa a esticar até a borda
   inferior real da seção, onde fica o .porque__ponto — sem isso, a linha parava
   no fim do conteúdo, bem acima do círculo, e "o fim do trajeto" não coincidia
   com o centro dele */
.apresentacao__timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 9vw, 140px);
  padding-bottom: clamp(96px, 12vh, 160px);
}

/* linha vertical central: largura fixa em px (x-scale = 1), então a espessura do
   traço fica constante apesar do preserveAspectRatio="none" que estica o eixo Y
   junto com a altura da timeline. O traço amarelo é desenhado no scroll (JS) */
.apresentacao__line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 4px;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* trilha tracejada estática (caminho a percorrer), igual à .cobrinha-ghost */
.apresentacao__ghost {
  stroke: var(--color-yellow);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-dasharray: 9 16;
  vector-effect: non-scaling-stroke;
  opacity: 0.3;
}

/* traço desenhado via stroke-dashoffset (unidades do viewBox — NÃO usar
   non-scaling-stroke aqui, quebraria o draw), idêntico em técnica à .cobrinha-path */
.apresentacao__path {
  stroke: var(--color-yellow);
  stroke-width: 4;
  stroke-linecap: round;
}

.apresentacao__bloco {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
}

/* mídia hugando a linha central (mesma moldura amarela de .sobre__media) */
.apresentacao__media {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  border: 1px solid rgba(255, 204, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.12), 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

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

/* nó na linha: pixel de LED aceso (amarelo com glow estável) */
.apresentacao__node {
  grid-column: 2;
  grid-row: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--color-yellow);
  box-shadow: 0 0 0 6px rgba(255, 204, 0, 0.16), 0 0 1.2em 0.1em rgba(255, 204, 0, 0.5);
}

.apresentacao__texto {
  grid-column: 3;
  grid-row: 1;
  max-width: 460px;
}

/* alterna os lados: mídia à direita, texto à esquerda (texto sempre encostado
   na linha, alinhado em direção ao centro) */
.apresentacao__bloco--invertido .apresentacao__media {
  grid-column: 3;
  justify-self: start;
}

.apresentacao__bloco--invertido .apresentacao__texto {
  grid-column: 1;
  justify-self: end;
}

.apresentacao__paragrafo {
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  text-align: justify;
  hyphens: auto;
}

/* ===== Sobre (página) — Por que escolher a AllDoor ===== */

/* sem overflow:hidden (diferente das outras seções): o .porque__ponto precisa
   vazar pela borda de cima, igual a .parceiros na home */
.porque {
  position: relative;
  background-color: var(--color-gray-dark);
  color: var(--color-white);
}

/* mesmo círculo de transição de .parceiros__ponto (home): metade "encostada"
   na borda de cima da seção (margin-top negativo = -50% da própria largura) */
.porque__ponto {
  /* 15% menor que o círculo de transição da home (.parceiros__ponto): a escala
     do SVG reduz proporcionalmente os dois círculos (externo translúcido +
     interno opaco). A variável evita repetir o clamp no width e no margin-top */
  --porque-ponto-size: clamp(81.6px, 9.35vw, 136px);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: var(--porque-ponto-size);
  height: auto;
  margin-inline: auto;
  margin-top: calc(var(--porque-ponto-size) * -0.5);
  pointer-events: none;
  fill: var(--color-yellow);
}

.porque__ponto circle:first-child {
  opacity: 0.35;
}

.porque__inner {
  --pad-x: clamp(48px, 6vw, 120px);
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: clamp(80px, 10vh, 140px) var(--pad-x) clamp(96px, 12vh, 160px);
  text-align: center;
}

/* align-items:center (não stretch): o grupamento de logos centraliza no meio
   da altura do texto, que é quem manda na altura da linha do grid — não
   estica/esparrama pra bater ponta a ponta com o texto */
.porque__conteudo {
  margin-top: clamp(48px, 6vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
  text-align: left;
}

.porque__texto {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.6vw, 22px);
}

.porque__texto p {
  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  text-align: justify;
  hyphens: auto;
}

/* 1º parágrafo = antigo subtítulo de destaque (agora só em negrito, sem tratamento
   de subtítulo à parte) */
.porque__texto p:first-child {
  font-weight: 700;
}

/* bloco à direita do texto: moldura vertical 5:7 com um carrossel de imagens em
   loop (mesmo crossfade das seções "O que é" dos produtos), centralizada na
   altura do texto (.porque__conteudo{align-items:center}) */
.porque__carousel {
  justify-self: center;
  width: 100%;
  max-width: clamp(220px, 24vw, 320px);
  aspect-ratio: 5 / 7;
  border-radius: 24px;
  border: 1px solid rgba(255, 204, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.12), 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* ===== Sobre (página) — Trajetória (scroll horizontal pinado) ===== */

.trajetoria {
  position: relative;
  height: 100vh;
  background-color: var(--color-offwhite);
  color: #0E0E0E;
  overflow: hidden;
}

/* mesma grade clara das seções Depoimentos/Unidades/Por que, estática (fora do
   trilho que translada no scroll horizontal) */
.trajetoria__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-dark) 1px, transparent 1px);
  background-size: 84px 84px;
  background-position: center center;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

/* palavra-marca decorativa: OPACA (cor sólida, sem transparência), estática atrás
   do conteúdo (na frente do grid, atrás do trilho), de ponta a ponta da seção.
   Mesma técnica de .blog-outdoor__brand (ancorada na base, ~45% da altura
   "soterrada" abaixo da seção, tamanho medido em JS por syncTrajetoriaBrand para
   preencher a largura inteira). Cor igual à .cta-faixa logo abaixo, pra "enterrar"
   a palavra nela ao fim do scroll */
.trajetoria__brand {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 45%);
  z-index: 1;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--trajetoria-brand-size, clamp(5rem, 30vw, 22rem));
  line-height: 0.9;
  white-space: nowrap;
  color: var(--color-gray-dark);
  user-select: none;
  pointer-events: none;
}

.trajetoria__viewport {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.trajetoria__track {
  position: relative;
  display: flex;
  align-items: flex-start;
  height: 100%;
  gap: clamp(64px, 8vw, 120px);
  padding: clamp(96px, 14vh, 160px) clamp(48px, 6vw, 120px) 0;
  will-change: transform;
}

/* altura preenchida em JS (syncTrajetoriaIntroHeight) com a altura de UM
   acontecimento inteiro (ano + subtítulo + imagem) — flex-column + justify-
   content:center centraliza o título nessa altura (align-items:stretch,
   padrão, mantém o título na largura cheia do painel) */
.trajetoria__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 clamp(320px, 34vw, 520px);
}

/* única exceção ao gutter centralizado padrão de .section-title: aqui o título é
   o primeiro painel do trilho horizontal, não um cabeçalho fixo — só alinhamento,
   não mexe no --title-gutter nem na entrada/encaixe do título */
.trajetoria__intro .section-title {
  text-align: left;
}

.trajetoria__eventos {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(48px, 6vw, 96px);
}

/* linha horizontal: mesma técnica de .apresentacao__line, girada 90° (eixo X ao
   invés de Y) — cobre só a extensão dos eventos, não o painel de intro */
.trajetoria__line {
  position: absolute;
  top: 6px;
  left: 0;
  width: 100%;
  height: 4px;
  pointer-events: none;
  overflow: visible;
}

/* versão vertical, só usada em telas de tablet/mobile (≤960px — ver breakpoint
   no fim do arquivo): mesma técnica e mesma posição (left:11px) de
   .apresentacao__line no mobile. height:100% (NÃO top+bottom): o <svg> é um
   elemento substituído e com top+bottom sem height ele assume a altura intrínseca
   do viewBox (~1000px) em vez de esticar, cobrindo só o topo dos eventos. Igual
   a .apresentacao__line/.prod-galeria__line-mobile, que usam height:100% */
.trajetoria__line-mobile {
  display: none;
  position: absolute;
  top: 0;
  height: 100%;
  left: 11px;
  width: 4px;
  pointer-events: none;
  overflow: visible;
}

.trajetoria__ghost,
.trajetoria__ghost-mobile {
  stroke: var(--color-yellow);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-dasharray: 9 16;
  vector-effect: non-scaling-stroke;
  opacity: 0.3;
}

.trajetoria__path,
.trajetoria__path-mobile {
  stroke: var(--color-yellow);
  stroke-width: 4;
  stroke-linecap: round;
}

.trajetoria__evento {
  position: relative;
  flex: 0 0 clamp(260px, 26vw, 380px);
  padding-top: clamp(28px, 3vw, 40px);
}

/* bolinha acima-esquerda de cada acontecimento (mesma posição relativa do
   quadradinho do antigo .marco::before) */
.trajetoria__node {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(14px, 1.4vw, 18px);
  height: clamp(14px, 1.4vw, 18px);
  border-radius: 50%;
  background-color: var(--color-yellow);
  box-shadow: 0 0 0 6px rgba(255, 204, 0, 0.16), 0 0 1.2em 0.1em rgba(255, 204, 0, 0.5);
}

.trajetoria__ano {
  display: block;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2.2rem, 3vw, 3.2rem);
  line-height: 1;
  color: #0E0E0E;
}

/* altura fixa (medida em JS por syncTrajetoriaTitulos, a partir do maior
   subtítulo entre os 7 acontecimentos) — todas as imagens ficam alinhadas
   independente do tamanho do subtítulo, que fica centralizado nesse espaço */
.trajetoria__titulo-wrap {
  margin-top: 6px;
  min-height: var(--trajetoria-titulo-h, auto);
  display: flex;
  align-items: center;
}

.trajetoria__titulo {
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.72);
}

.trajetoria__media {
  margin-top: clamp(16px, 2vw, 24px);
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  border: 1px solid rgba(255, 204, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.12), 0 16px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

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

/* fallback estático: prefers-reduced-motion OU conteúdo cabendo sem overflow
   horizontal algum (JS decide via classList.toggle). Reproduz a mesma ideia do
   antigo grid de .historia__marcos — tudo empilhado, sem pin nem scroll horizontal */
.trajetoria--static {
  height: auto;
}

.trajetoria--static .trajetoria__viewport {
  height: auto;
  overflow: visible;
}

.trajetoria--static .trajetoria__track {
  display: block;
  height: auto;
  transform: none !important;
  padding: clamp(64px, 8vh, 100px) clamp(48px, 6vw, 120px) clamp(96px, 12vh, 160px);
}

.trajetoria--static .trajetoria__intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(32px, 5vw, 56px);
}

.trajetoria--static .trajetoria__intro .section-title {
  text-align: center;
}

.trajetoria--static .trajetoria__eventos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px);
  max-width: 1320px;
  margin-inline: auto;
}

.trajetoria--static .trajetoria__evento {
  flex-basis: auto;
}

.trajetoria--static .trajetoria__line,
.trajetoria--static .trajetoria__line-mobile,
.trajetoria--static .trajetoria__node {
  display: none;
}

/* ===== Sobre (página) — CTA final ===== */

.cta-faixa {
  position: relative;
  background-color: var(--color-gray-dark);
  color: var(--color-white);
  overflow: hidden;
}

.cta-faixa__inner {
  --pad-x: clamp(48px, 6vw, 120px);
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(72px, 10vh, 130px) var(--pad-x);
  text-align: center;
}

.cta-faixa__title {
  color: var(--color-white);
  font-size: clamp(2.6rem, 5vw, 4.6rem);
}

.cta-faixa__texto {
  margin: clamp(16px, 2vw, 24px) auto 0;
  max-width: 50ch;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

.cta-faixa .btn {
  margin-top: clamp(26px, 3vw, 38px);
}

/* dois botões por praça (Avaré e Botucatu) no CTA do Outdoor: o wrapper assume a
   margem superior para os dois não somarem a margem própria ao empilhar */
.cta-faixa__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(26px, 3vw, 38px);
}

.cta-faixa__acoes .btn {
  margin-top: 0;
}

/* ===== Blog (catálogo) ===== */

.blog {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--color-gray-dark);
  color: var(--color-white);
  overflow: hidden;
}

/* mesma grade desbotando nas 4 arestas das seções dark (Sobre/Pontos) */
.blog__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 84px 84px;
  background-position: center center;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

/* palavra-marca decorativa cobrindo TODA a extensão horizontal da página (o
   tamanho é medido em JS por syncBlogBrand). Fica À FRENTE do grid e do degradê
   das arestas (z-index 1) e ancorada na base da seção, com ~30% da altura
   "soterrada" abaixo dela (clipada pelo overflow:hidden) bem onde começa o rodapé,
   criando um corte horizontal na letra */
.blog__brand {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 30%);
  z-index: 1;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--blog-brand-size, clamp(5rem, 30vw, 22rem));
  line-height: 0.9;
  white-space: nowrap;
  /* mesma cor sólida do fundo do rodapé (.footer): a parte soterrada funde com o
     rodapé e a parte visível surge como um relevo discreto sobre o fundo da seção */
  color: #0E0E0E;
  user-select: none;
  pointer-events: none;
}

.blog__inner {
  --pad-x: clamp(48px, 6vw, 120px);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: clamp(64px, 8vh, 96px) var(--pad-x) clamp(28px, 3.5vh, 48px);
  text-align: center;
}

/* pequeno respiro entre o eyebrow e o título, sem inflar a altura da seção */
.blog .section-title {
  margin-top: clamp(8px, 1.1vw, 14px);
}

.blog__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.76rem, 1vw, 0.92rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-yellow);
}

/* ----- Carrossel ----- */

.carousel {
  position: relative;
  margin-top: clamp(20px, 3.4vh, 44px);
}

/* recorta os cards fora de vista; touch-action: pan-y libera o scroll vertical e
   deixa o gesto horizontal para o swipe do carrossel */
.carousel__viewport {
  overflow: hidden;
  /* padding + margem negativa ampliam a área de recorte (na vertical e na lateral)
     para o hover dos cards (elevação + glow) não ser cortado, sem mexer no
     alinhamento: a margem negativa devolve o box ao lugar e o padding reafasta os
     cards. O buffer lateral (16px) é menor que o gap entre cards, então revela só
     o glow das bordas, nunca um pedaço do card vizinho. O JS mede a largura de
     conteúdo (descontando esse padding) para o cálculo de cards por tela */
  padding: 28px 16px 56px;
  margin: -28px -16px -56px;
  cursor: grab;
  touch-action: pan-y;
}

.carousel__viewport.is-dragging {
  cursor: grabbing;
}

.carousel__track {
  --gap: clamp(20px, 2vw, 32px);
  --cards: 3;
  display: flex;
  gap: var(--gap);
  list-style: none;
  will-change: transform;
}

/* largura por nº de cards visíveis; texto à esquerda. Hover na linguagem dos
   cards do site (.unidade): sobe, ganha borda amarela e glow estável. O transform
   inline da entrada GSAP é limpo no fim (clearProps) p/ estas regras valerem */
.blog-card {
  flex: 0 0 calc((100% - (var(--cards) - 1) * var(--gap)) / var(--cards));
  display: flex;
  flex-direction: column;
  background-color: #161616;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: clamp(18px, 1.8vw, 26px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.55s ease, border-color 0.55s ease;
}

.blog-card:hover,
.blog-card:focus-within {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(255, 204, 0, 0.65);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.45), 0 0 1.6em 0.05em rgba(255, 204, 0, 0.28);
}

.blog-card__media {
  display: block;
  /* 16/8.1 = moldura ~10% mais baixa que o 16/9 (mesma largura, altura reduzida) */
  aspect-ratio: 16 / 8.1;
  overflow: hidden;
}

/* placeholder = logo: contain + padding deixam o logo menor, com espaço vazio até
   as bordas da moldura */
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(20px, 3vw, 40px);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* capa real publicada no CMS: é foto, então preenche o card inteiro. A classe é
   aplicada por cms-imagens.js antes de medir o quadro, para que o recorte pedido
   ao CDN já use a proporção da moldura cheia */
.blog-card__media.has-cms-image img {
  object-fit: cover;
  padding: 0;
}

.blog-card:hover .blog-card__media img,
.blog-card:focus-within .blog-card__media img {
  transform: scale(1.05);
}

/* tudo centralizado; justify-content: center distribui o grupo (meta, título,
   resumo e botão) de forma equilibrada na altura do corpo, com respiro igual acima
   e abaixo, e o gap uniforme dá o mesmo espaçamento entre os elementos */
.blog-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 1.1vw, 15px);
  flex: 1;
  padding: clamp(20px, 2vw, 30px);
  text-align: center;
}

.blog-card__meta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.68rem, 0.78vw, 0.78rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-yellow);
}

.blog-card__title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1.04;
  color: var(--color-white);
}

/* resumo limitado a 3 linhas: mantém todos os cards com a mesma altura de texto */
.blog-card__resumo {
  font-size: clamp(0.88rem, 1vw, 0.98rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* botão centralizado; um respiro um pouco maior que o gap separa a ação do texto */
.blog-card .btn {
  align-self: center;
  margin-top: clamp(4px, 0.6vw, 8px);
}

/* z-index positivo deixa as setas e os dots à frente da sombra dos cards (que
   invade este espaço por causa da margem negativa do viewport); o respiro maior
   afasta os controles da parte densa da sombra */
.carousel__controls {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(24px, 3vh, 40px);
}

/* setas circulares na linguagem do .btn--primary: amarelo cheio, hover único com
   glow estável (sem keyframes). :active aplica o mesmo scale dos botões do site */
.carousel__nav {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 3.2vw, 48px);
  height: clamp(40px, 3.2vw, 48px);
  border: none;
  border-radius: 50%;
  background-color: var(--color-yellow);
  color: #0E0E0E;
  cursor: pointer;
  transition: background-color 1s ease, box-shadow 1s ease, opacity 0.4s ease;
}

.carousel__nav:hover {
  background-color: var(--color-yellow-2);
  box-shadow: 0 0 1.4em 0.1em rgba(255, 204, 0, 0.45);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.carousel__nav:active {
  transform: scale(0.95);
}

.carousel__nav:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.carousel__nav svg {
  width: 42%;
  height: 42%;
}

.carousel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* pílula que se alonga e acende no índice ativo (anima só width/background) */
.carousel__dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: width 0.4s ease, background-color 0.4s ease;
}

/* alvo de toque maior sem alterar o desenho: a área transparente cresce a partir
   do centro e transborda o dot, que continua com os mesmos 8px na tela. Um dot
   de 8px dava 64px² de alvo, aqui passa de 380px².
   A largura para no dot + metade do gap de cada lado (o `+ 8px` é o gap de 8px
   do .carousel__dots): esticar mais faria os alvos vizinhos se sobreporem, que é
   pior do que o alvo pequeno.
   Os 24px de largura que o WCAG 2.5.8 pede exigiriam gap de 16px, para os
   centros ficarem a 24px um do outro. Isso foi avaliado e recusado: alargaria a
   barra de controles de 134px para 190px. O critério segue reprovando de
   propósito, e é a única violação de acessibilidade aberta no site. */
.carousel__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 8px);
  height: 24px;
  transform: translate(-50%, -50%);
}

.carousel__dot.is-active {
  width: 22px;
  background-color: var(--color-yellow);
}

@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .blog-card__media img,
  .carousel__nav,
  .carousel__dot {
    transition: none !important;
  }
}

/* ===== Produto (página) — Hero ===== */

/* fundo preto com grade desbotando nas 4 arestas (mesmo motivo das demais seções
   escuras do site). Acrescenta o bloco de botões (.prod-hero__actions) */
.prod-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--color-gray-dark);
  overflow: hidden;
}

.prod-hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 84px 84px;
  background-position: center center;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

.prod-hero__inner {
  --pad-x: clamp(48px, 6vw, 120px);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: clamp(104px, 14vh, 140px) var(--pad-x) 60px;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(28px, 3vw, 40px);
}

.prod-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.76rem, 1vw, 0.92rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-yellow);
}

.prod-hero__title {
  margin-top: clamp(14px, 1.6vw, 22px);
  margin-inline: 0;
  padding-inline: 0;
  font-size: clamp(3.6rem, 8vw, 8rem);
  color: var(--color-white);
  text-align: left;
}

.prod-hero__subtitle {
  margin: clamp(18px, 2vw, 28px) 0 0;
  max-width: 52ch;
  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}

/* botões alinhados à esquerda, na linguagem do site (.btn) */
.prod-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: clamp(28px, 3vw, 40px);
}

/* ===== Produto (página) — Hero: imagem única ===== */

/* container recortado (overflow hidden) na razão do CONTEÚDO VISÍVEL do PNG
   (sem o padding transparente), com height:100% da row: topo e base da imagem
   coincidem exatamente com o topo e a base do grupamento de texto */
.prod-hero__visual {
  position: relative;
  height: 100%;
  aspect-ratio: 1133 / 830;
  justify-self: end;
  overflow: hidden;
  will-change: transform;
}

/* offsets/escala compensam o padding transparente específico de outdoor hero.png
   (bbox do conteúdo visível: 1133x830 a partir de 39,181 num canvas de 1200x1200)
   — o conteúdo visível preenche o container de borda a borda. Ao trocar a imagem
   por outro produto, remedir o bbox (sharp().trim()) e refazer os 4 valores:
   aspect-ratio Vw/Vh · height (Ch/Vh) · left −(L/Vw) · top −(T/Vh) */
.prod-hero__img {
  position: absolute;
  left: -3.442%;
  top: -21.807%;
  width: auto;
  max-width: none;
  height: 144.578%;
}

/* variantes verticais (Painel de LED, LED Market): totens em pé, com o mesmo
   padding transparente da imagem do outdoor, então seguem a mesma técnica de
   offsets da regra base, só com o bbox de cada arquivo.
   A altura fixa em clamp() resolve um minúsculo do grid: a row é auto e um
   totem esguio, sem largura própria (justify-self:end, sem stretch), não
   empurra a row a crescer — com a altura fixada o item passa a ser centralizado
   (na largura E na altura) dentro da "metade" que ocupa no grid, como o outro
   grupo (texto/botões) */
.prod-hero--led .prod-hero__visual,
.prod-hero--ledmarket .prod-hero__visual {
  justify-self: center;
}

/* painel hero.png: visível 717x1127 a partir de 276,82 num canvas de 1254x1254 */
.prod-hero--led .prod-hero__visual {
  height: clamp(400px, 48vh, 640px);
  aspect-ratio: 717 / 1127;
}

/* led market hero.png: visível 431x1153 a partir de 97,53 num canvas de 624x1254 */
.prod-hero--ledmarket .prod-hero__visual {
  height: clamp(400px, 48vh, 640px);
  aspect-ratio: 431 / 1153;
}

.prod-hero--led .prod-hero__img {
  left: -38.494%;
  top: -7.276%;
  height: 111.269%;
}

.prod-hero--ledmarket .prod-hero__img {
  left: -22.506%;
  top: -4.597%;
  height: 108.760%;
}

/* seta de "role para baixo": mesmo trio de chevrons de .sobre-hero__cue (loop
   1 vira 3 feito em JS), girado 90° para apontar para baixo. Ancorada à seção
   (não ao grid de conteúdo) para ficar fixa no rodapé da hero */
.prod-hero__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 4vh, 48px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  color: rgba(255, 255, 255, 0.85);
  transform: translateX(-50%);
  transition: color 0.35s ease, filter 0.35s ease;
}

.prod-hero__cue:hover {
  color: var(--color-yellow);
  filter: drop-shadow(0 0 0.4em rgba(255, 204, 0, 0.45));
}

.prod-hero__cue svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .prod-hero__cue {
    transition: none !important;
  }
}

/* ===== Produto (página) — Sobre o produto ===== */

.prod-sobre {
  position: relative;
  background-color: var(--color-gray-dark);
  color: var(--color-white);
  overflow: hidden;
}

.prod-sobre__inner {
  --pad-x: clamp(48px, 6vw, 120px);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: clamp(80px, 10vh, 140px) var(--pad-x) clamp(96px, 12vh, 160px);
}

/* texto + imagem: mesma estrutura de .sobre__conteudo (a imagem reusa .sobre__media
   e o texto reusa .sobre__texto). Imagem à esquerda, texto à direita */
.prod-sobre__conteudo {
  margin-top: clamp(48px, 6vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
}

/* trio de destaques abaixo do texto (linguagem dos .beneficio da home) */
.prod-sobre__specs {
  list-style: none;
  margin-top: clamp(48px, 6vw, 88px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 56px);
}

.prod-spec {
  display: flex;
  flex-direction: column;
  gap: clamp(11px, 1.1vw, 16px);
}

.prod-spec__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 3.6vw, 52px);
  height: clamp(44px, 3.6vw, 52px);
  border-radius: 12px;
  background-color: rgba(255, 204, 0, 0.16);
  color: var(--color-yellow-2);
}

.prod-spec__icon svg {
  width: 56%;
  height: 56%;
}

.prod-spec__titulo {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  letter-spacing: 0.02em;
  color: var(--color-white);
}

.prod-spec__texto {
  font-size: clamp(0.85rem, 0.95vw, 0.98rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* ===== Produto (página) — Tipos (timeline) ===== */

/* mesma mecânica de .apresentacao (Sobre Nós): imagem + texto alternando de lado,
   ligados por uma linha central desenhada no scroll. Usado aqui para separar
   as variações do produto (poucas fotos disponíveis não sustentam mais uma
   galeria) */
.prod-tipos {
  position: relative;
  background-color: var(--color-gray-dark);
  color: var(--color-white);
  overflow: hidden;
}

.prod-tipos__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 84px 84px;
  background-position: center center;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

.prod-tipos__inner {
  --pad-x: clamp(48px, 6vw, 120px);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: clamp(80px, 10vh, 140px) var(--pad-x) clamp(96px, 12vh, 160px);
}

.prod-tipos__timeline {
  position: relative;
  margin-top: clamp(48px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 9vw, 140px);
}

/* linha vertical central: mesma técnica de .apresentacao__line (espessura fixa em
   px, traço amarelo desenhado no scroll via JS) */
.prod-tipos__line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 4px;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.prod-tipos__ghost {
  stroke: var(--color-yellow);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-dasharray: 9 16;
  vector-effect: non-scaling-stroke;
  opacity: 0.3;
}

.prod-tipos__path {
  stroke: var(--color-yellow);
  stroke-width: 4;
  stroke-linecap: round;
}

.prod-tipo {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
}

/* mídia hugando a linha central: moldura amarela igual à de .apresentacao__media,
   mas em 4:3 e com object-fit:contain, já que os PNGs (fundo transparente) não
   podem ser recortados como uma foto comum sem cortar o produto */
.prod-tipo__media {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2vw, 28px);
  border-radius: 24px;
  border: 1px solid rgba(255, 204, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.12), 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.prod-tipo__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* moldura de "Tipos de Outdoor" como carrossel com clique: fundo cinza opaco
   (esconde os grids da seção atrás dos PNGs de fundo transparente), slides
   deslizando por clique nas setas/dots reduzidos, tudo dentro da moldura sem
   alterar seu tamanho */
.prod-tipo__media--carousel {
  padding: 0;
  position: relative;
  background-color: #242424;
}

.frame-carousel__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.frame-carousel__track {
  display: flex;
  height: 100%;
  will-change: transform;
}

/* padrão: a foto sangra até a borda da moldura, sem padding. As setas/dots
   ficam por cima da imagem (têm fundo próprio), não numa faixa reservada */
.frame-carousel__slide {
  flex: 0 0 100%;
  height: 100%;
}

.frame-carousel__slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

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

/* exceção: o primeiro slide de cada carrossel é o mockup do produto (PNG de
   fundo transparente), que precisa aparecer inteiro. Volta ao enquadramento
   contido, com respiro embaixo para o produto não ficar sob as setas/dots */
.frame-carousel__slide--contain {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2vw, 28px) clamp(16px, 2vw, 28px) clamp(52px, 6vw, 64px);
}

.frame-carousel__slide--contain picture {
  height: auto;
}

.frame-carousel__slide--contain img {
  height: auto;
  object-fit: contain;
}

/* setas/dots reaproveitados (mesmas classes do carrossel do blog), porém menores
   e ancorados na base da moldura */
.frame-carousel__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(10px, 1.4vw, 16px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 16px);
}

.frame-carousel__controls .carousel__nav {
  width: clamp(28px, 2.4vw, 34px);
  height: clamp(28px, 2.4vw, 34px);
}

.prod-tipo__node {
  grid-column: 2;
  grid-row: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--color-yellow);
  box-shadow: 0 0 0 6px rgba(255, 204, 0, 0.16), 0 0 1.2em 0.1em rgba(255, 204, 0, 0.5);
}

.prod-tipo__texto {
  grid-column: 3;
  grid-row: 1;
  max-width: 460px;
}

.prod-tipo--invertido .prod-tipo__media {
  grid-column: 3;
  justify-self: start;
}

.prod-tipo--invertido .prod-tipo__texto {
  grid-column: 1;
  justify-self: end;
  text-align: right;
}

.prod-tipo__nome {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1;
  color: var(--color-white);
}

.prod-tipo__bio {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

/* ===== Produto (página) — Nossos Painéis (reaproveita o esqueleto de .prod-tipos:
   fundo dark, grade, linha central scrubada e nós; enriquece o texto com tag,
   dados, abrangência, CPM e botão) ===== */

/* subtítulo abaixo do título da seção (mesma família de .prod-galeria__intro-subtitle) */
.prod-paineis__subtitle {
  max-width: 62ch;
  margin: clamp(18px, 2vw, 26px) auto 0;
  text-align: center;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

/* variante da moldura para fotos reais (não PNGs com fundo transparente): preenche
   a moldura de borda a borda (cover) em vez de conter com respiro */
.prod-tipo__media--foto {
  padding: 0;
}

.prod-tipo__media--foto img {
  object-fit: cover;
  /* leve zoom para a foto cobrir a moldura de borda a borda, sem qualquer
     respiro de sub-pixel entre a imagem e a borda amarela (overflow:hidden
     da moldura recorta o excesso) */
  transform: scale(1.04);
}

/* o card de painel carrega mais conteúdo que os "tipos": foto e texto ganham largura */
.prod-painel .prod-tipo__media {
  max-width: 520px;
}

.prod-painel .prod-tipo__texto {
  max-width: 600px;
}

/* pílula do tipo de ponto (Centro Comercial etc.): receita de .unidade__tag--matriz
   da home (fundo amarelo, texto preto, pixel de LED preto à esquerda) */
.prod-painel__tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border-radius: 999px;
  background-color: var(--color-yellow);
  color: var(--color-black);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.72rem, 0.85vw, 0.82rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.prod-painel__led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--color-black);
}

.prod-painel .prod-tipo__nome {
  margin-top: clamp(14px, 1.4vw, 18px);
}

.prod-painel__local {
  margin-top: clamp(6px, 0.8vw, 10px);
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

/* grade 2×2 de mini-dados do painel (ícone amarelo + rótulo + valor). Sem linha
   divisória acima: um único respiro (margin-top) separa a grade do corpo de texto */
.prod-painel__dados {
  list-style: none;
  margin: clamp(20px, 2vw, 28px) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 32px);
}

.prod-painel__dado {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
}

.prod-painel__dado-icon {
  grid-row: 1 / 3;
  display: inline-flex;
  color: var(--color-yellow);
}

.prod-painel__dado-icon svg {
  width: clamp(22px, 2.2vw, 26px);
  height: auto;
}

.prod-painel__dado-label {
  font-size: clamp(0.66rem, 0.78vw, 0.74rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.prod-painel__dado-valor {
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  font-weight: 700;
  color: var(--color-white);
}

.prod-painel__dado-valor small {
  font-weight: 400;
  font-size: 0.78em;
  color: rgba(255, 255, 255, 0.55);
}

/* linha de abrangência: ícone de gráfico + lista de marcas/pontos */
.prod-painel__abrangencia {
  display: flex;
  gap: 10px;
  margin-top: clamp(16px, 1.8vw, 22px);
  font-size: clamp(0.86rem, 1vw, 0.96rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

.prod-painel__abrangencia-icon {
  flex-shrink: 0;
  color: var(--color-yellow);
}

.prod-painel__abrangencia-icon svg {
  width: 20px;
  height: auto;
}

/* rodapé do card: CPM em Bebas amarelo + botão ghost "Localize no mapa" */
.prod-painel__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
  margin-top: clamp(22px, 2.4vw, 30px);
}

.prod-painel__cpm {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.prod-painel__cpm-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.prod-painel__cpm-valor {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2rem, 3vw, 2.8rem);
  color: var(--color-yellow);
}

.prod-painel__cpm-nota {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
}

/* espelhamento dos internos nos cards invertidos (mídia à direita, texto à esquerda
   com text-align:right herdado de .prod-tipo--invertido .prod-tipo__texto) */
.prod-tipo--invertido .prod-painel__dado {
  grid-template-columns: 1fr auto;
  text-align: right;
}

.prod-tipo--invertido .prod-painel__dado-icon {
  grid-column: 2;
  grid-row: 1 / 3;
}

.prod-tipo--invertido .prod-painel__dado-label,
.prod-tipo--invertido .prod-painel__dado-valor {
  grid-column: 1;
}

.prod-tipo--invertido .prod-painel__abrangencia {
  flex-direction: row-reverse;
}

.prod-tipo--invertido .prod-painel__rodape {
  justify-content: flex-end;
}

.prod-tipo--invertido .prod-painel__cpm {
  text-align: right;
}

/* ===== Produto (página) — Audiência comprovada (seção clara com os dados do
   circuito: cards de métricas escuros, gráficos e faixa de CPM) ===== */

.prod-relatorio {
  position: relative;
  background-color: var(--color-offwhite);
  color: #0E0E0E;
  overflow: hidden;
}

/* grade escura desbotando nas 4 arestas — mesma receita das seções claras do site */
.prod-relatorio__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-dark) 1px, transparent 1px);
  background-size: 84px 84px;
  background-position: center center;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

.prod-relatorio__inner {
  --pad-x: clamp(48px, 6vw, 120px);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: clamp(80px, 10vh, 140px) var(--pad-x) clamp(96px, 12vh, 160px);
}

.prod-relatorio__cabecalho {
  text-align: center;
}

.prod-relatorio__subtitle {
  max-width: 64ch;
  margin: clamp(18px, 2vw, 26px) auto 0;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.7;
  color: rgba(14, 14, 14, 0.7);
}

/* 4 cards de métricas: card escuro sobre o fundo claro, barra amarela à esquerda
   — receita de .artigo__stat dos artigos do blog */
.prod-relatorio__metricas {
  list-style: none;
  margin: clamp(40px, 5vw, 72px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 28px);
}

.prod-relatorio__metrica {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1vw, 14px);
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: clamp(16px, 1.6vw, 22px);
  border-left: 4px solid var(--color-yellow);
  background-color: #0E0E0E;
  color: var(--color-white);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.prod-relatorio__metrica-icon {
  display: inline-flex;
  color: var(--color-yellow);
}

.prod-relatorio__metrica-icon svg {
  width: clamp(28px, 2.6vw, 34px);
  height: auto;
}

.prod-relatorio__metrica-num {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  line-height: 1;
  color: var(--color-yellow);
}

.prod-relatorio__metrica-label {
  font-size: clamp(0.9rem, 1vw, 1rem);
  font-weight: 600;
  line-height: 1.4;
}

.prod-relatorio__metrica-nota {
  font-size: clamp(0.78rem, 0.9vw, 0.86rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

/* rosca de % (3º card): anel amarelo desenhado por stroke-dashoffset sobre trilho.
   O offset inicial já mostra 87,84% (fallback sem JS); o JS anima de 0 até aqui.
   circunferência = 2·π·50 ≈ 314,159; offset = 314,159·(1−0,8784) ≈ 38,2 */
.prod-relatorio__rosca {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(96px, 9vw, 118px);
  aspect-ratio: 1;
}

.prod-relatorio__rosca svg {
  width: 100%;
  height: 100%;
}

.prod-relatorio__rosca-trilho {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 10;
}

.prod-relatorio__rosca-arco {
  stroke: var(--color-yellow);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 314.159;
  stroke-dashoffset: 38.2;
}

.prod-relatorio__rosca-valor {
  position: absolute;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.9vw, 1.85rem);
  color: var(--color-yellow);
}

/* 2 gráficos de linha (cobertura e frequência): mesma linguagem dos cards */
.prod-relatorio__graficos {
  margin-top: clamp(18px, 1.8vw, 28px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 28px);
}

.prod-relatorio__grafico {
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: clamp(16px, 1.6vw, 22px);
  background-color: #0E0E0E;
  color: var(--color-white);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.prod-relatorio__grafico-titulo {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.8rem, 0.95vw, 0.9rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
}

.prod-relatorio__grafico-desc {
  margin-top: 6px;
  font-size: clamp(0.8rem, 0.9vw, 0.88rem);
  color: rgba(255, 255, 255, 0.6);
}

.prod-relatorio__curva {
  width: 100%;
  height: auto;
  margin-top: clamp(16px, 2vw, 24px);
  overflow: visible;
}

.prod-relatorio__curva-base {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 2;
  stroke-dasharray: 6 8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* traço amarelo desenhado via stroke-dashoffset (getTotalLength dá unidades do
   viewBox): NÃO usar non-scaling-stroke aqui — ele interpretaria o dasharray em
   px de tela e o draw não completaria em telas largas (parava antes do 4º nó) */
.prod-relatorio__curva-linha {
  fill: none;
  stroke: var(--color-yellow);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prod-relatorio__curva-node {
  fill: var(--color-yellow);
  stroke: #0E0E0E;
  stroke-width: 2;
}

.prod-relatorio__curva-legenda {
  list-style: none;
  margin: clamp(12px, 1.4vw, 18px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.prod-relatorio__curva-legenda li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.prod-relatorio__curva-val {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  color: var(--color-yellow);
}

.prod-relatorio__curva-sem {
  font-size: clamp(0.68rem, 0.8vw, 0.76rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* faixa de CPM do circuito: texto explicativo à esquerda, valor gigante à direita */
.prod-relatorio__cpm {
  margin-top: clamp(18px, 1.8vw, 28px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(28px, 3vw, 44px) clamp(28px, 3.4vw, 52px);
  border-radius: clamp(16px, 1.6vw, 22px);
  background-color: #0E0E0E;
  color: var(--color-white);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.prod-relatorio__cpm-info {
  flex: 1 1 340px;
}

.prod-relatorio__cpm-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.72rem, 0.85vw, 0.82rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
}

/* na pílula ghost o pixel de LED vira aceso (amarelo com glow), reaproveitando
   .prod-painel__led */
.prod-relatorio__cpm-tag .prod-painel__led {
  background-color: var(--color-yellow);
  box-shadow: 0 0 8px 1px rgba(255, 204, 0, 0.8);
}

.prod-relatorio__cpm-texto {
  margin-top: clamp(12px, 1.4vw, 18px);
  max-width: 62ch;
  font-size: clamp(0.86rem, 1vw, 0.96rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

.prod-relatorio__cpm-destaque {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  flex-shrink: 0;
}

.prod-relatorio__cpm-valor {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(3.4rem, 6vw, 5.4rem);
  line-height: 0.9;
  color: var(--color-yellow);
}

.prod-relatorio__cpm-legenda {
  margin-top: 6px;
  font-size: clamp(0.78rem, 0.9vw, 0.9rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.prod-relatorio__fonte {
  margin-top: clamp(24px, 2.4vw, 34px);
  text-align: center;
  font-size: clamp(0.74rem, 0.85vw, 0.82rem);
  color: rgba(14, 14, 14, 0.5);
}

/* ===== Produto (página) — Formatos (mosaico de versatilidade, fundo escuro) =====
   Substitui a antiga seção "Tipos" no LED Market: em vez de dois tipos fixos,
   um mosaico que mostra o produto assumindo formatos e pontos diferentes */

.prod-formatos {
  position: relative;
  background-color: var(--color-gray-dark);
  color: var(--color-white);
  overflow: hidden;
}

.prod-formatos__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 84px 84px;
  background-position: center center;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

.prod-formatos__inner {
  --pad-x: clamp(48px, 6vw, 120px);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: clamp(80px, 10vh, 140px) var(--pad-x) clamp(96px, 12vh, 160px);
}

.prod-formatos__cabecalho {
  text-align: center;
}

.prod-formatos__subtitle {
  max-width: 62ch;
  margin: clamp(18px, 2vw, 26px) auto 0;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

/* grade 3x2: seis mídias em 4:3, todas do mesmo tamanho, três por linha */
.prod-formatos__cards {
  margin-top: clamp(44px, 5.5vw, 80px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
}

.formato-card {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.2vw, 18px);
}

.formato-card__media {
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 204, 0, 0.5);
  box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.14), 0 20px 44px rgba(0, 0, 0, 0.14);
}

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

.formato-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 2px;
}

.formato-card__tag {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--color-white);
}

.formato-card__local {
  font-size: clamp(0.8rem, 0.9vw, 0.92rem);
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 900px) {
  .prod-formatos__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .prod-formatos__cards {
    grid-template-columns: 1fr;
  }
}

/* ===== Produto (página) — Galeria (scroll horizontal pinado, mesma mecânica
   de .trajetoria da página Sobre, sem ano/título por cima da mídia) ===== */

.prod-galeria {
  position: relative;
  height: 100vh;
  background-color: var(--color-offwhite);
  color: #0E0E0E;
  overflow: hidden;
}

/* mesma grade clara das seções Trajetória/Depoimentos/Unidades, estática (fora
   do trilho que translada no scroll horizontal) */
.prod-galeria__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-dark) 1px, transparent 1px);
  background-size: 84px 84px;
  background-position: center center;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

/* palavra-marca decorativa: mesma técnica de .trajetoria__brand (tamanho medido
   em JS por syncProdGaleriaBrand para preencher a largura inteira) */
.prod-galeria__brand {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 45%);
  z-index: 1;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--prod-galeria-brand-size, clamp(5rem, 30vw, 22rem));
  line-height: 0.9;
  white-space: nowrap;
  color: var(--color-gray-dark);
  user-select: none;
  pointer-events: none;
}

.prod-galeria__viewport {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.prod-galeria__track {
  position: relative;
  display: flex;
  align-items: flex-start;
  height: 100%;
  gap: clamp(64px, 8vw, 120px);
  padding: clamp(96px, 14vh, 160px) clamp(48px, 6vw, 120px) 0;
  will-change: transform;
}

.prod-galeria__intro {
  --title-gutter: clamp(28px, 6vw, 48px);
  flex: 0 0 clamp(320px, 34vw, 520px);
}

/* única exceção ao gutter centralizado padrão de .section-title: aqui o título é
   o primeiro painel do trilho horizontal, não um cabeçalho fixo — só alinhamento,
   não mexe no --title-gutter nem na entrada/encaixe do título */
.prod-galeria__intro .section-title {
  text-align: left;
}

/* fundo claro (off-white): o destaque amarelo dos títulos vira preto — amarelo
   tem contraste ruim sobre claro. Mesmo tratamento de .depoimentos/.unidades/
   .artigo-relacionados. Cobre "Nossa galeria de..." (.prod-galeria, 3 páginas) e
   "Audiência comprovada" (.prod-relatorio, painel-led) */
.prod-galeria .section-title .t-yellow,
.prod-relatorio .section-title .t-yellow {
  color: #0E0E0E;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.1);
}

/* mesmo --title-gutter do título (redeclarado no .prod-galeria__intro acima)
   como padding lateral, para os dois respeitarem exatamente a mesma margem */
.prod-galeria__intro-subtitle {
  margin-top: clamp(16px, 2vw, 24px);
  padding-inline: var(--title-gutter);
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.72);
}

.prod-galeria__eventos {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(48px, 6vw, 96px);
}

/* linha horizontal: mesma técnica de .trajetoria__line */
.prod-galeria__line {
  position: absolute;
  top: 6px;
  left: 0;
  width: 100%;
  height: 4px;
  pointer-events: none;
  overflow: visible;
}

.prod-galeria__ghost {
  stroke: var(--color-yellow);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-dasharray: 9 16;
  vector-effect: non-scaling-stroke;
  opacity: 0.3;
}

.prod-galeria__path {
  stroke: var(--color-yellow);
  stroke-width: 4;
  stroke-linecap: round;
}

/* linha vertical usada só em telas ≤960px (galeria empilhada), desenhada no
   scroll pelo buildProdGaleriaVertical. height:100% (não top/bottom:0): um SVG
   é replaced element e não estica com top+bottom — a altura ficaria travada na
   intrínseca do viewBox (~1000px) e a linha não chegaria ao fim das fotos.
   height:100% força a altura do container (mesma técnica de .prod-tipos__line) */
.prod-galeria__line-mobile {
  display: none;
  position: absolute;
  top: 0;
  height: 100%;
  left: 8px;
  width: 4px;
  pointer-events: none;
  overflow: visible;
}

.prod-galeria__ghost-mobile {
  stroke: var(--color-yellow);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-dasharray: 9 16;
  vector-effect: non-scaling-stroke;
  opacity: 0.3;
}

.prod-galeria__path-mobile {
  stroke: var(--color-yellow);
  stroke-width: 4;
  stroke-linecap: round;
}

/* sem ano/título acima da mídia: só o nó aceso e a foto */
.prod-galeria__evento {
  position: relative;
  flex: 0 0 clamp(260px, 26vw, 380px);
  padding-top: clamp(28px, 3vw, 40px);
}

/* bolinha acima-esquerda de cada foto (mesma posição relativa de .trajetoria__node) */
.prod-galeria__node {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(14px, 1.4vw, 18px);
  height: clamp(14px, 1.4vw, 18px);
  border-radius: 50%;
  background-color: var(--color-yellow);
  box-shadow: 0 0 0 6px rgba(255, 204, 0, 0.16), 0 0 1.2em 0.1em rgba(255, 204, 0, 0.5);
}

.prod-galeria__media {
  margin-top: clamp(16px, 2vw, 24px);
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  border: 1px solid rgba(255, 204, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.12), 0 16px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

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

/* fallback estático: prefers-reduced-motion OU conteúdo cabendo sem overflow
   horizontal algum (JS decide via classList.toggle) */
.prod-galeria--static {
  height: auto;
}

.prod-galeria--static .prod-galeria__viewport {
  height: auto;
  overflow: visible;
}

.prod-galeria--static .prod-galeria__track {
  display: block;
  height: auto;
  transform: none !important;
  padding: clamp(64px, 8vh, 100px) clamp(48px, 6vw, 120px) clamp(96px, 12vh, 160px);
}

.prod-galeria--static .prod-galeria__intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(32px, 5vw, 56px);
}

.prod-galeria--static .prod-galeria__intro .section-title {
  text-align: center;
}

.prod-galeria--static .prod-galeria__intro-subtitle {
  margin-inline: auto;
}

.prod-galeria--static .prod-galeria__eventos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px);
  max-width: 1320px;
  margin-inline: auto;
}

.prod-galeria--static .prod-galeria__evento {
  flex-basis: auto;
}

.prod-galeria--static .prod-galeria__line,
.prod-galeria--static .prod-galeria__node {
  display: none;
}

/* ===== Blog (artigo) ===== */

/* barra de progresso de leitura: fixa no topo, só o preenchimento amarelo cresce
   (scaleX no JS, alimentado pelo scroll do corpo do artigo). Anima só transform */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 930;
  width: 100%;
  height: 4px;
  background-color: rgba(128, 128, 128, 0.22);
  pointer-events: none;
}

.reading-progress__fill {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-yellow);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ----- Hero do artigo (mesma linguagem das heros internas: foto + overlay) ----- */

.artigo-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  background-color: var(--color-gray-dark);
  overflow: hidden;
}

/* fundo preto com grade desbotando nas 4 arestas (mesmo padrão das seções escuras
   Sobre/Pontos/Blog), no lugar de uma foto de fundo */
.artigo-hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 84px 84px;
  background-position: center center;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

.artigo-hero__inner {
  --pad-x: clamp(28px, 6vw, 120px);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(128px, 17vh, 196px) var(--pad-x) clamp(60px, 8vh, 104px);
  text-align: center;
}

.artigo-hero__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 0.9vw, 0.82rem);
  color: rgba(255, 255, 255, 0.6);
}

.artigo-hero__breadcrumb a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.3s ease;
}

.artigo-hero__breadcrumb a:hover {
  color: var(--color-yellow);
}

.artigo-hero__breadcrumb [aria-current] {
  color: var(--color-yellow);
}

.artigo-hero__breadcrumb-sep {
  color: rgba(255, 255, 255, 0.32);
}

.artigo-hero__eyebrow {
  display: inline-block;
  margin-top: clamp(16px, 2vw, 24px);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.76rem, 1vw, 0.92rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-yellow);
}

.artigo-hero__title {
  margin-top: clamp(12px, 1.4vw, 20px);
  font-size: clamp(2.3rem, 5vw, 4.4rem);
  color: var(--color-white);
}

.artigo-hero__dek {
  margin: clamp(16px, 2vw, 26px) auto 0;
  max-width: 60ch;
  font-size: clamp(0.98rem, 1.25vw, 1.14rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}

/* linha de metadados (data e tempo de leitura) separada por um pixel de LED */
.artigo-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.9em;
  margin-top: clamp(18px, 2.2vw, 28px);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.74rem, 0.9vw, 0.84rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.artigo-hero__dot {
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background-color: var(--color-yellow);
  box-shadow: 0 0 8px 1px rgba(255, 204, 0, 0.5);
}

/* seta de "role para baixo": mesmo trio de chevrons das outras heros, girado 90° */
.artigo-hero__cue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(28px, 4vh, 48px);
  padding: 6px;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.35s ease, filter 0.35s ease;
}

.artigo-hero__cue:hover {
  color: var(--color-yellow);
  filter: drop-shadow(0 0 0.4em rgba(255, 204, 0, 0.45));
}

.artigo-hero__cue svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .artigo-hero__cue {
    transition: none !important;
  }
}

/* ----- Corpo do artigo (tema claro: leitura longa mais confortável) ----- */

.artigo {
  position: relative;
  background-color: var(--color-offwhite);
  color: #0E0E0E;
}

.artigo__inner {
  --pad-x: clamp(28px, 6vw, 120px);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(56px, 8vh, 108px) var(--pad-x) clamp(60px, 9vh, 116px);
}

/* sumário fixo à esquerda + coluna de leitura estreita; o grupo é centralizado.
   No mobile o sumário some e a coluna ocupa a largura toda (até o limite de leitura) */
.artigo__layout {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 720px);
  justify-content: center;
  gap: clamp(32px, 5vw, 88px);
}

/* ----- Sumário (índice com scroll-spy) ----- */

.sumario {
  position: sticky;
  top: clamp(100px, 12vh, 132px);
}

.sumario__titulo {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
}

.sumario__lista {
  list-style: none;
  margin-top: 16px;
  border-left: 2px solid rgba(0, 0, 0, 0.1);
}

/* marca a borda esquerda: o link ativo acende em amarelo (destacado pelo scroll-spy) */
.sumario__link {
  display: block;
  margin-left: -2px;
  padding: 9px 0 9px 16px;
  border-left: 2px solid transparent;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.58);
  text-decoration: none;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.sumario__link:hover {
  color: #0E0E0E;
}

.sumario__link.is-active {
  color: #0E0E0E;
  font-weight: 700;
  border-color: var(--color-yellow);
}

/* ----- Prosa ----- */

.artigo__conteudo {
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.8;
  color: rgba(0, 0, 0, 0.78);
}

/* ritmo vertical uniforme entre blocos; os títulos (h2) recebem respiro maior */
.artigo__conteudo > * {
  margin-top: clamp(18px, 1.8vw, 26px);
}

.artigo__conteudo > *:first-child {
  margin-top: 0;
}

.artigo__lead {
  font-size: clamp(1.14rem, 1.5vw, 1.4rem);
  line-height: 1.65;
  color: #0E0E0E;
}

.artigo__conteudo strong {
  font-weight: 700;
  color: #0E0E0E;
}

.artigo__conteudo em {
  font-style: italic;
}

.artigo__conteudo a {
  color: #0E0E0E;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--color-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.artigo__conteudo a:hover {
  color: var(--color-yellow-2);
  text-decoration-color: var(--color-yellow-2);
}

/* subtítulo de prosa (Bebas, à esquerda) com um risco amarelo acima, na linguagem
   da linha de destaque do título de produtos. NÃO usa a entrada do .section-title:
   char-reveal centralizado em cada h2 seria excessivo e prejudicaria a leitura */
.artigo__h2 {
  margin-top: clamp(40px, 5vw, 68px);
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  color: #0E0E0E;
}

.artigo__h2::before {
  content: "";
  display: block;
  width: 38px;
  height: 4px;
  margin-bottom: clamp(12px, 1.2vw, 18px);
  border-radius: 2px;
  background-color: var(--color-yellow);
  box-shadow: 0 0 10px 1px rgba(255, 204, 0, 0.45);
}

.artigo__lista,
.artigo__ordenada {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
}

.artigo__lista {
  gap: clamp(10px, 1vw, 14px);
}

.artigo__lista li {
  position: relative;
  padding-left: 1.9em;
}

/* marcador quadrado = pixel de LED aceso (mesmo motivo dos nós/marcos do site) */
.artigo__lista li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.66em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background-color: var(--color-yellow);
  box-shadow: 0 0 8px 1px rgba(255, 204, 0, 0.4);
}

/* lista numerada com numeral grande em Bebas (usada para etapas e listas de razões) */
.artigo__ordenada {
  counter-reset: passo;
  gap: clamp(16px, 1.6vw, 22px);
}

.artigo__ordenada > li {
  position: relative;
  counter-increment: passo;
  padding-left: 2.7em;
}

.artigo__ordenada > li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: -0.06em;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 1.7em;
  line-height: 1;
  color: var(--color-yellow-2);
}

/* destaque de dado: card escuro sobre o fundo claro, com barra amarela à esquerda */
.artigo__stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(22px, 2.4vw, 32px) clamp(24px, 2.6vw, 38px);
  border-radius: clamp(14px, 1.4vw, 20px);
  border-left: 4px solid var(--color-yellow);
  background-color: #0E0E0E;
  color: var(--color-white);
}

.artigo__stat-num {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1;
  color: var(--color-yellow);
}

.artigo__stat-label {
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

/* tabela comparativa: cabeçalho escuro, linhas zebradas. O wrapper rola na
   horizontal quando a tabela não cabe (telas estreitas), sem quebrar o layout */
.artigo__tabela-wrap {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}

.artigo__tabela {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: clamp(0.86rem, 1vw, 0.96rem);
}

.artigo__tabela th,
.artigo__tabela td {
  padding: clamp(10px, 1.1vw, 14px) clamp(12px, 1.3vw, 18px);
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.artigo__tabela thead th {
  background-color: #0E0E0E;
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.8rem, 0.9vw, 0.9rem);
}

.artigo__tabela thead th:first-child {
  border-top-left-radius: 10px;
}

.artigo__tabela thead th:last-child {
  border-top-right-radius: 10px;
}

.artigo__tabela tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.035);
}

.artigo__tabela tbody td:first-child {
  font-weight: 700;
  color: #0E0E0E;
}

/* linha de compartilhar (só WhatsApp por enquanto), na base da leitura */
.artigo__share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: clamp(44px, 5vw, 68px);
  padding-top: clamp(24px, 2.6vw, 34px);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.artigo__share-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
}

/* pílula ghost sobre fundo claro: preenche no hover, na linguagem do site. O
   prefixo .artigo__conteudo eleva a especificidade acima da regra de link de
   prosa (senão o botão herdaria o sublinhado amarelo e o texto amarelo no hover) */
.artigo__conteudo .artigo__share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.2em;
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: #0E0E0E;
  text-decoration: none;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.artigo__conteudo .artigo__share-btn:hover {
  background-color: #0E0E0E;
  border-color: #0E0E0E;
  color: var(--color-white);
}

.artigo__share-btn svg {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .sumario__link,
  .artigo__conteudo a,
  .artigo__share-btn {
    transition: none !important;
  }
}

/* ----- Continue lendo (relacionados) ----- */

.artigo-relacionados {
  position: relative;
  background-color: var(--color-offwhite);
  color: #0E0E0E;
}

.artigo-relacionados__inner {
  --pad-x: clamp(28px, 6vw, 120px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--pad-x) clamp(72px, 10vh, 132px);
  text-align: center;
}

.artigo-relacionados .section-title {
  color: #0E0E0E;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.1);
}

/* no fundo claro o destaque amarelo do título também vira preto */
.artigo-relacionados .section-title .t-yellow {
  color: #0E0E0E;
}

.artigo-relacionados__grid {
  margin: clamp(32px, 4vw, 56px) auto 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
}

/* card claro compacto, sem imagem, na linguagem dos .mini-blog-card do teaser da
   home (meta escura + título + resumo em 2 linhas + CTA "Ler artigo") */
.relacionado {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid rgba(14, 14, 14, 0.08);
  border-radius: clamp(16px, 1.6vw, 22px);
  box-shadow: 0 12px 28px rgba(14, 14, 14, 0.06);
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.55s ease, border-color 0.55s ease;
}

.relacionado:hover,
.relacionado:focus-visible {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(255, 204, 0, 0.65);
  box-shadow: 0 20px 44px rgba(14, 14, 14, 0.12), 0 0 1.4em 0.05em rgba(255, 204, 0, 0.28);
}

.relacionado__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.1vw, 14px);
  padding: clamp(22px, 2.2vw, 30px);
}

/* uppercase escuro (não amarelo): mesmo motivo do teaser, contraste sobre claro */
.relacionado__meta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.66rem, 0.76vw, 0.76rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(14, 14, 14, 0.55);
}

.relacionado__titulo {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  line-height: 1.06;
  color: #0E0E0E;
}

/* resumo em 2 linhas (card curto sem imagem) */
.relacionado__resumo {
  font-size: clamp(0.86rem, 1vw, 0.95rem);
  line-height: 1.55;
  color: rgba(14, 14, 14, 0.68);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.relacionado__cta {
  margin-top: auto;
  padding-top: clamp(10px, 1.2vw, 14px);
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(14, 14, 14, 0.08);
  font-size: clamp(0.78rem, 0.85vw, 0.86rem);
  font-weight: 600;
  color: rgba(14, 14, 14, 0.6);
  transition: color 0.4s ease;
}

.relacionado__cta-seta {
  width: clamp(15px, 1.3vw, 18px);
  height: auto;
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 0.4s ease;
}

.relacionado:hover .relacionado__cta,
.relacionado:focus-visible .relacionado__cta {
  color: var(--color-yellow-2);
}

.relacionado:hover .relacionado__cta-seta,
.relacionado:focus-visible .relacionado__cta-seta {
  transform: translateX(4px);
}

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

/* ===== Responsivo ===== */

@media (max-width: 960px) {
  .site-header {
    padding: 20px 28px;
  }

  .menu-toggle {
    top: 18px;
    right: 28px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  /* o vídeo em retrato é limitado pela LARGURA da tela, então esticar a seção
     até 100vh só produziria vazio em volta de um player pequeno: aqui a altura
     passa a ser a do conteúdo mais o padding */
  .sobre-hero {
    min-height: 0;
  }

  .sobre-hero__grid {
    background-size: 56px 56px;
  }

  /* telas estreitas: o gutter cede espaço para o vídeo, que é o que precisa de
     largura aqui. O .section-title tem gutter próprio e não é afetado */
  .sobre-hero__inner {
    --pad-x: clamp(20px, 5vw, 40px);
    padding-block: clamp(88px, 12vh, 116px);
  }

  /* "Olá, somos a Alldoor!" cabe na caixa como texto puro, mas os wrappers
     inline-block que o SplitText cria por palavra somam alguns px e empurram o
     "!" sozinho para uma segunda linha. O fit não corrige, porque duas linhas
     é um resultado aceitável para ele. A folga aqui evita a órfã */
  .sobre-hero__title {
    font-size: clamp(1.8rem, 9vw, 2.6rem);
  }

  .menu__content {
    padding: 120px 40px 44px;
  }

  .hero__grid {
    background-size: 56px 56px;
  }

  /* empilhado: hero deixa de ser viewport-tall — a altura passa a ser o conteúdo
     + padding vertical simétrico, então a margem título→topo é exatamente igual à
     margem imagens→base (sem o vão grande que sobrava embaixo no 100vh) */
  .hero {
    min-height: auto;
  }

  /* o hero empilhado é composto por DOIS grupamentos: (1) título+subtítulo+botões
     e (2) imagens. --hero-gap = espaçamento INTERNO do grupo 1; --hero-split =
     separação MAIOR entre os dois grupos (deixa claro que são dois blocos).
     --hero-pad-y: margem vertical-base (título→topo) — maior agora para descer o
     título, aproveitando o espaço do subtítulo encurtado. A img central tem
     bottom:-27% e transborda o container ~14,5% da largura visível; o padding
     inferior soma esse transbordo para a margem VISÍVEL imagens→base bater com a
     do topo. (largura visível do visual = min(560px, 100vw - 2*28px)) */
  .hero__inner {
    --hero-gap: clamp(26px, 6vw, 40px);
    --hero-split: clamp(72px, 18vw, 108px);
    --hero-pad-y: clamp(140px, 30vw, 188px);
    --hero-img-overflow: calc(0.145 * min(560px, 100vw - 56px));
    grid-template-columns: 1fr;
    padding: var(--hero-pad-y) 28px calc(var(--hero-pad-y) + var(--hero-img-overflow));
    gap: var(--hero-split);
    text-align: center;
  }

  /* título passa a ser o elemento dominante do hero empilhado */
  .hero__title {
    font-size: clamp(3.4rem, 9vw, 6rem);
  }

  /* grupo 1 alinhado a um "grid": título, subtítulo e bloco de botões partilham a
     MESMA extensão horizontal (--hero-measure = largura da maior linha do título,
     medida via JS), criando margens laterais idênticas para os três */
  .hero__subtitle {
    max-width: min(100%, var(--hero-measure, 44ch));
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--hero-gap);
    font-size: clamp(0.9rem, 2.1vw, 1.05rem);
  }

  /* trecho extra some no mobile: subtítulo fica só "Soluções completas em mídia exterior" */
  .hero__subtitle-extra {
    display: none;
  }

  /* botões seguem o mesmo padrão da hero de produto (Outdoor): centralizados e
     em fila no tablet, empilhados em largura cheia no celular (bloco ≤640), sempre
     com o mesmo tamanho de texto e padding internos do .btn base (sem encolher) */
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin-top: var(--hero-gap);
  }

  .hero__visual {
    height: auto;
    width: 100%;
    max-width: 560px;
    justify-self: center;
  }

  /* No layout estreito, restaurar a composição original da hero. Os ajustes
     finos pedidos para alinhamento e espaçamento valem apenas no desktop. */
  .hero__img--1 {
    bottom: -4.861%;
  }

  /* A base visível do painel direito é a linha de referência. Estes offsets
     compensam apenas a transparência inferior dos uploads atuais do CMS. */
  .hero__img--1.is-cms-image {
    bottom: -2.1%;
  }

  .hero__img--2.is-cms-image {
    /* +13,4% sobre o tamanho mobile original; o recuo no left mantém o mesmo
       centro horizontal. Os 3px finais refinam o alinhamento óptico da base. */
    left: 11.72%;
    bottom: calc(-33.62% + 3px);
    height: 151.5%;
  }

  .hero__img--3 {
    right: -0.395%;
  }

  .hero__img--3.is-cms-image {
    bottom: -0.301%;
  }

  .hero__img--3.is-cms-image.cms-source--square {
    /* O arquivo quadrado usado como solução temporária tem grandes margens
       transparentes. Este valor iguala seu gutter visível ao da imagem 1 em
       qualquer largura do layout mobile. */
    right: -18%;
  }

  .hero__img--3.is-cms-image.cms-source--portrait {
    right: -0.395%;
  }

  /* abaixo de 961px o layout empilha: troca a versão larga pela cobrinha de
     zigue-zague mais estreito, mantendo início no título e ponto final na 3ª seção
     (o offset do SVG via --cobrinha-top já vem da regra base) */
  .cobrinha-path--desktop,
  .cobrinha-ghost--desktop {
    display: none;
  }

  .cobrinha-path--mobile,
  .cobrinha-ghost--mobile {
    display: block;
  }

  /* x do viewBox é comprimido (largura estreita) — engrossa o traço para
     compensar o scale não-uniforme do preserveAspectRatio="none" */
  .cobrinha-path {
    stroke-width: 36;
  }

  .parceiros__grid {
    background-size: 56px 56px;
  }

  .sobre__grid {
    background-size: 56px 56px;
  }

  .pontos__grid {
    background-size: 56px 56px;
  }

  .depoimentos__grid {
    background-size: 56px 56px;
  }

  .unidades__grid {
    background-size: 56px 56px;
  }

  .blog__grid {
    background-size: 56px 56px;
  }

  .blog-outdoor__grid {
    background-size: 56px 56px;
  }

  /* catálogo de blog no mobile: deixa de centralizar em 100vh (em telas curtas o
     conteúdo excede a altura e o eyebrow/título encostavam no header) e ancora no
     topo com mais respiro superior, no mesmo padrão das heros internas */
  .blog {
    min-height: auto;
    align-items: flex-start;
  }

  .blog__inner {
    padding-top: clamp(132px, 30vw, 176px);
  }

  /* tablet: 2 cards de blog por vez no carrossel */
  .carousel__track {
    --cards: 2;
  }

  /* tablet: 2 mini-cards por vez no teaser da home */
  .mini-carousel__track {
    --cards: 2;
  }

  /* 3 cards de contato empilham em coluna única já no tablet — evita o card órfão
     que sobraria num grid de 2 colunas */
  .unidades__lista {
    grid-template-columns: 1fr;
    max-width: 460px;
  }

  /* 2x2: o escalonamento por margem deixa a coluna direita um degrau mais baixa */
  .depoimentos__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* telas menores mantêm o layout original: cards já rotacionados em repouso,
     endireitando no hover, com escalonamento vertical alternado por margem */
  .depoimento {
    transform: rotate(var(--tilt));
  }

  .depoimento:hover,
  .depoimento:focus-visible {
    transform: rotate(0deg) scale(1.045);
  }

  .depoimento:nth-child(even) {
    margin-top: clamp(20px, 3vw, 52px);
  }

  /* dois agrupamentos visuais centrados na coluna (sobra respiro em cima e
     embaixo, trazendo título p/ baixo e botão p/ cima): grupo 1 = título +
     subtítulo (colados), grupo 2 = imagem + botão (colados), separados pelo
     gap maior do meio. display:contents no .pontos__media "achata" o card e
     promove a imagem e o botão a itens diretos do inner, então as margens
     individuais é que desenham os dois grupos */
  .pontos {
    align-items: stretch;
  }

  .pontos__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* grupo 1: subtítulo centralizado, próximo do título */
  .pontos__subtitle {
    margin-top: clamp(30px, 7vw, 44px);
    text-align: center;
  }

  .pontos__media {
    display: contents;
  }

  /* a moldura (borda/cantos/glow) passa para a própria imagem; a margem maior
     abre o espaço do meio (entre subtítulo e imagem) que separa os dois grupos */
  .pontos__media img {
    align-self: center;
    margin-top: clamp(68px, 17vw, 128px);
    width: 100%;
    max-width: min(520px, 86vw);
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 24px;
    border: 1px solid rgba(255, 204, 0, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.12), 0 24px 60px rgba(0, 0, 0, 0.5);
  }

  /* grupo 2: botão próximo abaixo da imagem */
  .pontos__actions {
    position: static;
    margin-top: clamp(32px, 7vw, 46px);
  }

  /* calendário empilha em coluna única centralizada — o pôster 9:16 é nativo da
     tela do celular. O painel vira display:contents para promover seus filhos a
     itens do grid, e o order intercala o título ANTES do pôster:
     título → pôster → bullets → CTAs */
  .calendario {
    align-items: stretch;
  }

  .calendario__grid {
    background-size: 56px 56px;
  }

  .calendario__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* minmax(0, 1fr) impede a coluna de crescer além do container por causa da
     largura do pôster — senão o conteúdo estouraria o padding do lado direito */
  .calendario__layout {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: clamp(24px, 6vw, 40px);
  }

  .calendario__panel {
    display: contents;
  }

  .calendario__title {
    order: 1;
    justify-self: stretch;
    text-align: center;
    --title-gutter: clamp(20px, 5vw, 40px);
  }

  /* largura relativa ao container (não à viewport) para respeitar o padding; a
     altura deriva da largura via aspect-ratio, acompanhando a tela */
  .calendario__poster {
    order: 2;
    height: auto;
    width: 100%;
    max-width: 420px;
    min-width: 0;
  }

  /* bullets alinhados à esquerda, mas o bloco centralizado na coluna */
  .calendario__list {
    order: 3;
    display: inline-grid;
    text-align: left;
  }

  .calendario__actions {
    order: 4;
    justify-content: center;
  }

  /* grids menores e com passo de 56px (igual aos demais grids no mobile) */
  .beneficios__grid {
    width: clamp(180px, 52%, 320px);
    height: clamp(180px, 44%, 320px);
    background-size: 56px 56px;
  }

  /* empilhado: lista em coluna única e título/CTA centralizados */
  .beneficios__lista {
    max-width: none;
    grid-template-columns: 1fr;
    gap: clamp(36px, 7vw, 52px);
  }

  .beneficio {
    align-items: center;
    text-align: center;
  }

  /* empilhado e centralizado: corpo de texto volta a centralizar (justify só faz
     sentido nas colunas largas do desktop) */
  .beneficio__texto {
    text-align: center;
  }

  .beneficios__title {
    max-width: none;
    text-align: center;
  }

  .beneficios__cta {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: clamp(24px, 6vw, 36px);
  }

  .beneficios__cta-text {
    text-align: center;
  }

  /* empilhado: mosaico acima, texto abaixo */
  .sobre__conteudo {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* empilhado: CTA centralizado como os demais CTAs da home no mobile */
  .sobre__cta {
    align-self: center;
  }

  /* botões dos cards de contato usam rótulo curto no mobile */
  .unidade__btn-full {
    display: none;
  }

  .unidade__btn-short {
    display: inline;
  }

  /* imagem ocupa a largura total da coluna — a mesma que os textos ocupam */
  .sobre__media {
    width: 100%;
  }

  /* sem coluna irmã para esticar contra: o mosaico assume proporção própria */
  .sobre__mosaico {
    aspect-ratio: 16 / 11;
  }

  .produto {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 28px;
    padding: 56px 0;
    text-align: center;
  }

  /* card com preenchimento cinza sólido (equivalente opaco dos rgba atuais):
     no layout empilhado a cobrinha passa por trás e o vidro transparente
     deixava o traço vazar pelo card */
  .produto__conteudo {
    background-color: #1e1e1e;
    border-color: #5c5c5c;
  }

  .produto--invertido .produto__media {
    order: 0;
  }

  /* rodapé empilhado: cada coluna ocupa uma linha inteira, tudo centralizado
     e com espaçamento vertical equidistante entre os grupos */
  .footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(44px, 8vw, 64px);
    padding-left: 28px;
    padding-right: 28px;
  }

  .footer__col {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer__col--mapa {
    width: 100%;
  }

  .footer__col--mapa .footer__mapa {
    width: 100%;
  }

  .footer__logo {
    width: auto;
  }

  .footer__list {
    align-items: center;
  }

  .footer__list--contato li {
    justify-content: center;
  }

  .footer__bar-inner {
    padding-left: 28px;
    padding-right: 28px;
  }

  /* ----- Sobre (página) ----- */

  /* em coluna única, a linha do tempo vertical, os nós e as molduras das imagens
     já ocupam quase toda a largura: a grade atrás delas virava ruído em vez de
     textura. É a única das seções escuras que some em vez de só encolher */
  .apresentacao__grid {
    display: none;
  }

  /* timeline encostada à esquerda; cada bloco empilha (mídia acima, texto
     abaixo) à direita da linha, com o nó sobre o traço */
  .apresentacao__line {
    left: 11px;
    transform: none;
  }

  .apresentacao__timeline {
    gap: clamp(44px, 9vw, 72px);
  }

  .apresentacao__bloco {
    grid-template-columns: 24px 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: clamp(14px, 4vw, 24px);
    row-gap: clamp(14px, 3vw, 20px);
  }

  .apresentacao__node {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: start;
    margin-top: 12px;
  }

  .apresentacao__media,
  .apresentacao__bloco--invertido .apresentacao__media {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    max-width: 100%;
    aspect-ratio: 4 / 3;
  }

  .apresentacao__texto,
  .apresentacao__bloco--invertido .apresentacao__texto {
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
    max-width: none;
  }

  .porque__conteudo {
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vw, 48px);
  }

  .trajetoria__grid {
    background-size: 56px 56px;
  }

  .trajetoria--static .trajetoria__eventos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* mesmo círculo de .parceiros__ponto, mas alinhado à esquerda acompanhando a
     mesma "reta" da linha nesse breakpoint (.apresentacao__line: left:11px,
     4px de largura → centro em left+2px, dentro do __timeline, que começa em
     --pad-x do __inner) em vez de centralizado como no desktop */
  .porque__ponto {
    left: calc(clamp(48px, 6vw, 120px) + 11px + 2px);
    right: auto;
    margin-inline: 0;
    transform: translateX(-50%);
  }

  /* trajetoria em telas de tablet/mobile: scroll horizontal pinado não é uma
     boa interação no toque, então vira uma lista vertical única com a mesma
     timeline (tamanhos, easings, trigger points) de .apresentacao no mobile —
     as duas seções têm o mesmo propósito nesse breakpoint. Regra incondicional
     (não depende de classe JS): sempre vale ≤960px, igual à mudança de layout
     de .apresentacao */
  .trajetoria {
    height: auto;
  }

  .trajetoria__viewport {
    height: auto;
    overflow: visible;
  }

  /* padding horizontal igual ao --pad-x de .apresentacao__inner (clamp(48px,
     6vw,120px)) — "mesma timeline", incluindo a mesma margem lateral */
  .trajetoria__track {
    display: block;
    height: auto;
    transform: none !important;
    padding: clamp(64px, 8vh, 100px) clamp(48px, 6vw, 120px);
  }

  .trajetoria__intro {
    flex: none;
    margin-bottom: clamp(40px, 8vw, 64px);
  }

  .trajetoria__eventos {
    display: flex;
    flex-direction: column;
    gap: clamp(44px, 9vw, 72px);
  }

  .trajetoria__line {
    display: none;
  }

  .trajetoria__line-mobile {
    display: block;
  }

  /* :not(.trajetoria--static) — reduced motion continua na grade simples
     (sem indent de linha/nó, que ficam escondidos nesse modo) */
  .trajetoria:not(.trajetoria--static) .trajetoria__evento {
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: clamp(14px, 4vw, 24px);
    flex: none;
    padding-top: 0;
  }

  /* mesmo tamanho/posição do nó de .apresentacao__node no mobile (22px,
     margin-top: 12px) — "mesma timeline" nas duas seções */
  .trajetoria__node {
    position: static;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: start;
    width: 22px;
    height: 22px;
    margin-top: 12px;
  }

  .trajetoria__ano,
  .trajetoria__titulo-wrap,
  .trajetoria__media {
    grid-column: 2;
  }

  /* título centralizado horizontalmente no mobile (diferente do desktop) */
  .trajetoria__intro .section-title {
    text-align: center;
  }

  /* ----- Produto (página) ----- */

  .prod-hero__grid {
    background-size: 56px 56px;
  }

  /* empilhado: hero deixa de ser viewport-tall (mesmo motivo da .hero da home) */
  .prod-hero {
    min-height: auto;
  }

  /* empilhado: texto acima, imagem abaixo, tudo centralizado; padding inferior
     extra reserva o espaço da cue (agora ancorada à seção, fora do fluxo) */
  .prod-hero__inner {
    grid-template-columns: 1fr;
    padding: clamp(140px, 30vw, 188px) 28px clamp(100px, 22vw, 150px);
    gap: clamp(40px, 9vw, 64px);
    text-align: center;
  }

  .prod-hero__title {
    text-align: center;
  }

  .prod-hero__subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .prod-hero__actions {
    justify-content: center;
  }

  .prod-hero__visual {
    height: auto;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1133 / 830;
    justify-self: center;
    margin: 0 auto;
  }

  /* totem vertical: largura menor evita que a altura resultante domine a hero.
     height:auto anula o clamp() da regra base (2 classes, mais específica que o
     height:auto de .prod-hero__visual acima): com altura travada, o aspect-ratio
     não vale e a moldura sai fora de proporção, cortando a lateral do totem */
  .prod-hero--led .prod-hero__visual {
    height: auto;
    max-width: 240px;
    aspect-ratio: 717 / 1127;
  }

  .prod-hero--ledmarket .prod-hero__visual {
    height: auto;
    max-width: 220px;
    aspect-ratio: 431 / 1153;
  }

  /* empilhado: imagem acima, texto abaixo (mesma virada de .sobre__conteudo) */
  .prod-sobre__conteudo {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* trio de destaques em coluna única e centralizado */
  .prod-sobre__specs {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 44px);
  }

  .prod-spec {
    align-items: center;
    text-align: center;
  }

  /* timeline empilhada: mesma virada de .apresentacao__bloco (linha encostada à
     esquerda, mídia acima, texto abaixo, nó sobre o traço) */
  .prod-tipos__grid {
    background-size: 56px 56px;
  }

  /* seção "Conheça nossos Painéis" (só painel-led): grade de fundo oculta no
     mobile para não competir com os cards densos de dados */
  .prod-paineis .prod-tipos__grid {
    display: none;
  }

  .prod-tipos__line {
    left: 11px;
    transform: none;
  }

  .prod-tipos__timeline {
    gap: clamp(44px, 9vw, 72px);
  }

  .prod-tipo {
    grid-template-columns: 24px 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: clamp(14px, 4vw, 24px);
    row-gap: clamp(14px, 3vw, 20px);
  }

  .prod-tipo__node {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: start;
    margin-top: 12px;
  }

  .prod-tipo__media,
  .prod-tipo--invertido .prod-tipo__media {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    max-width: 100%;
  }

  .prod-tipo__texto,
  .prod-tipo--invertido .prod-tipo__texto {
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
    max-width: none;
    text-align: left;
  }

  /* "Tipos de Outdoor" (não os cards de "Nossos Painéis"): nome e bio de cada tipo
     centralizados. Como o conteúdo vive todo na coluna 2 do grid (a timeline ocupa
     a coluna 1), centralizar aqui usa o centro REAL da moldura, não o da seção,
     ficando no mesmo eixo das setas e dots do carrossel */
  .prod-tipos:not(.prod-paineis) .prod-tipo__texto {
    text-align: center;
  }

  /* painéis empilham como os demais .prod-tipo: mídia/texto esticam (a maior
     especificidade de .prod-painel exige reafirmar o stretch aqui) */
  .prod-painel .prod-tipo__media,
  .prod-painel .prod-tipo__texto {
    max-width: 100%;
  }

  /* desfaz o espelhamento do card invertido: internos voltam ao alinhamento à
     esquerda (ícone à esquerda, abrangência/rodapé em fluxo normal) */
  .prod-tipo--invertido .prod-painel__dado {
    grid-template-columns: auto 1fr;
    text-align: left;
  }

  .prod-tipo--invertido .prod-painel__dado-icon {
    grid-column: 1;
  }

  .prod-tipo--invertido .prod-painel__abrangencia {
    flex-direction: row;
  }

  .prod-tipo--invertido .prod-painel__rodape {
    justify-content: flex-start;
  }

  .prod-tipo--invertido .prod-painel__cpm {
    text-align: left;
  }

  /* relatório: métricas 4→2 colunas, gráficos e faixa de CPM empilham */
  .prod-relatorio__grid {
    background-size: 56px 56px;
  }

  .prod-relatorio__metricas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prod-relatorio__graficos {
    grid-template-columns: 1fr;
  }

  .prod-relatorio__cpm {
    justify-content: flex-start;
  }

  .prod-relatorio__cpm-destaque {
    align-items: flex-start;
    text-align: left;
  }

  .prod-galeria__grid {
    background-size: 56px 56px;
  }

  /* galeria em ≤960px: scroll horizontal pinado não é boa interação no toque —
     vira lista vertical única com a mesma timeline de .prod-tipos/.trajetoria
     (linha vertical à esquerda, nós acendendo, fotos empilhadas). Regra
     incondicional, igual à virada da trajetória da página Sobre */
  .prod-galeria {
    height: auto;
  }

  .prod-galeria__viewport {
    height: auto;
    overflow: visible;
  }

  .prod-galeria__track {
    display: block;
    height: auto;
    transform: none !important;
    padding: clamp(64px, 8vh, 100px) clamp(48px, 6vw, 120px) clamp(96px, 12vh, 160px);
  }

  .prod-galeria__intro {
    flex: none;
    margin-bottom: clamp(40px, 8vw, 64px);
  }

  /* título e subtítulo centralizados no mobile (diferente do desktop) */
  .prod-galeria__intro .section-title {
    text-align: center;
  }

  .prod-galeria__intro-subtitle {
    margin-inline: auto;
    text-align: center;
  }

  .prod-galeria__eventos {
    display: flex;
    flex-direction: column;
    gap: clamp(44px, 9vw, 72px);
  }

  .prod-galeria__line {
    display: none;
  }

  .prod-galeria__line-mobile {
    display: block;
  }

  /* :not(--static) — reduced motion continua na grade estática simples */
  .prod-galeria:not(.prod-galeria--static) .prod-galeria__evento {
    display: grid;
    grid-template-columns: 20px 1fr;
    column-gap: clamp(14px, 4vw, 24px);
    flex: none;
    padding-top: 0;
  }

  .prod-galeria:not(.prod-galeria--static) .prod-galeria__node {
    position: static;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: start;
    margin-top: 12px;
  }

  .prod-galeria:not(.prod-galeria--static) .prod-galeria__media {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .prod-galeria--static .prod-galeria__eventos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ----- Blog (artigo) ----- */

  .artigo-hero__grid {
    background-size: 56px 56px;
  }

  .artigo-hero__inner {
    max-width: 680px;
  }

  /* sumário some; a coluna de leitura ocupa a largura toda (até o limite de leitura) */
  .artigo__layout {
    grid-template-columns: minmax(0, 720px);
  }

  .artigo__aside {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero__title {
    font-size: clamp(3.2rem, 15vw, 4.8rem);
  }

  /* "SEMANA 4/5" é o rótulo mais longo do eixo e as 4 colunas do grid não
     acompanham a tela: abaixo de 640px a fonte passa a escalar pelo viewport
     para o texto caber em uma linha até 320px */
  .prod-relatorio__curva-sem {
    font-size: clamp(0.52rem, 2.3vw, 0.68rem);
    letter-spacing: 0.02em;
  }

  /* mobile: 1 card de blog por vez (navegação por swipe + setas) */
  .carousel__track {
    --cards: 1;
  }

  /* mobile: 1 mini-card por vez no teaser da home */
  .mini-carousel__track {
    --cards: 1;
  }

  /* mais respiro para o texto quando há um único card largo */
  .blog-card__resumo {
    -webkit-line-clamp: 4;
  }

  .hero__subtitle {
    font-size: clamp(0.85rem, 3.6vw, 1rem);
  }

  /* a faixa escala com o viewBox; em telas pequenas engrossa o traço e o
     texto para manter legibilidade proporcional */
  .marquee {
    top: -22vw;
    height: 44vw;
  }

  .marquee-band-svg path {
    stroke-width: 190;
  }

  .marquee-text-svg text {
    font-size: 132px;
    transform: translate(0, 47px);
  }

  .produtos__inner {
    padding-top: calc(23vw + 20px);
  }

  .apresentacao__inner {
    padding-top: calc(23vw + 20px);
  }

  .footer__bar-inner {
    flex-direction: column;
    gap: 14px;
  }

  /* empilhado: coluna única e sem o escalonamento vertical das colunas */
  .depoimentos__lista {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }

  .depoimento:nth-child(even) {
    margin-top: 0;
  }

  /* ----- Sobre (página) ----- */

  .trajetoria--static .trajetoria__eventos {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }

  /* ----- Padrão único de CTA no celular ----- */

  /* Todos os botões CTA seguem o padrão dos botões da hero de produto (Outdoor):
     largura cheia acompanhando o padding lateral da própria seção e o MESMO texto
     e padding internos do .btn base (nunca encolhem). Grupos com mais de um botão
     empilham um sob o outro. Exceção: botões dentro de cards (produtos e blog na
     home, unidades de contato), que mantêm o comportamento próprio. */
  .hero__actions,
  .prod-hero__actions,
  .calendario__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn,
  .prod-hero__actions .btn,
  .calendario__actions .btn,
  .pontos__actions .btn,
  .cta-faixa .btn {
    width: 100%;
    padding: 1.1em 2.1em;
    font-size: clamp(0.85rem, 0.95vw, 0.95rem);
  }

  /* CTA da home dentro do texto de "Sobre": mesma largura cheia via stretch do flex */
  .sobre__cta {
    align-self: stretch;
    padding: 1.1em 2.1em;
    font-size: clamp(0.85rem, 0.95vw, 0.95rem);
  }

  /* carrossel "Tipos de Outdoor" no celular: os controles (setas + dots) saem de
     dentro da moldura e passam para baixo dela. O wrapper vira uma coluna
     (moldura em cima, controles embaixo) e a moldura (borda, cantos e glow) migra
     para o viewport, que passa a ter altura própria pelo aspect-ratio */
  .prod-tipo__media--carousel {
    flex-direction: column;
    aspect-ratio: auto;
    gap: clamp(14px, 4vw, 20px);
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: none;
    overflow: visible;
  }

  .prod-tipo__media--carousel .frame-carousel__viewport {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
    border: 1px solid rgba(255, 204, 0, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.12), 0 24px 60px rgba(0, 0, 0, 0.5);
    background-color: #242424;
  }

  /* setas/dots saem de dentro da moldura: o mockup não precisa mais do respiro
     extra embaixo, só do padding uniforme */
  .prod-tipo__media--carousel .frame-carousel__slide--contain {
    padding: clamp(16px, 4vw, 24px);
  }

  .prod-tipo__media--carousel .frame-carousel__controls {
    position: static;
    bottom: auto;
  }

  /* mais respiro entre as setas/dots (agora abaixo da moldura) e o título do tipo
     logo abaixo — só na seção "Tipos de Outdoor", não nos cards de painéis */
  .prod-tipos:not(.prod-paineis) .prod-tipo {
    row-gap: clamp(28px, 7vw, 44px);
  }

  /* telas estreitas: mini-dados e métricas em coluna única */
  .prod-painel__dados {
    grid-template-columns: 1fr;
  }

  .prod-relatorio__metricas {
    grid-template-columns: 1fr;
  }

  .prod-galeria--static .prod-galeria__eventos {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }

  /* ----- Blog (artigo) ----- */

  /* relacionados empilham em coluna única */
  .artigo-relacionados__grid {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
}

/* ===== Telas muito estreitas (≤380px) ===== */

@media (max-width: 380px) {
  /* "SEMANA 4/5" não cabe em 4 colunas nessa largura sem quebrar a linha e
     desalinhar o eixo: o par de semanas por linha mantém tudo em uma linha só */
  .prod-relatorio__curva-legenda {
    grid-template-columns: repeat(2, 1fr);
    row-gap: clamp(10px, 3vw, 16px);
  }
}

/* ===== Aviso de cookies ===== */

/* Só entra no DOM quando o consentimento.js tem um container de GTM configurado.
   Fixo no rodapé da viewport, largura contida para não virar uma faixa gigante
   no desktop. Anima só transform e opacity. */
/* abaixo do .loader (1000) de propósito: enquanto a abertura da home está no ar
   o aviso fica coberto por ela, e reaparece sozinho quando o loader sai do DOM.
   Acima de tudo o mais, inclusive do menu lateral */
.cookie-aviso {
  position: fixed;
  z-index: 999;
  left: 50%;
  bottom: clamp(12px, 3vw, 24px);
  width: min(760px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2.5vw, 28px);
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.6vw, 26px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: var(--color-gray-dark);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.cookie-aviso--visivel {
  opacity: 1;
  transform: translate(-50%, 0);
}

.cookie-aviso__texto {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.82rem, 1.6vw, 0.92rem);
  line-height: 1.55;
  color: var(--color-gray-light);
}

.cookie-aviso__texto a {
  color: var(--color-yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-aviso__acoes {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
}

/* os botões herdam .btn; aqui só o tamanho compacto que a faixa pede */
.cookie-aviso__btn {
  padding: 10px 18px;
  font-size: 0.82rem;
}

@media (max-width: 620px) {
  .cookie-aviso {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-aviso__acoes {
    justify-content: flex-end;
  }
}

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