/* ==========================================================================
   VISOFLEX — MAIN.CSS (v3 · "a seta")
   Mobile first. Breakpoints: 768px e 1024px (CLAUDE.md regra 5).
   Todo valor de cor/fonte/espaçamento vem de tokens.css via var().

   Linguagem visual: a seta do logo (chevron do "X") é o elemento gráfico.
   - seções escuras terminam em V (a seta apontando para baixo)
   - o painel do hero termina em ponta, apontando para a foto
   - CTAs principais têm ponta de seta
   - toda foto vive num quadro com o canto chanfrado + traço ciano deslocado
   ========================================================================== */

/* ---------- 1. BASE ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: var(--texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: var(--fw-bold); line-height: var(--lh-titulo); letter-spacing: var(--ls-titulo); text-wrap: balance; }
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: normal; line-height: var(--lh-compacto); }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: var(--borda-forte) solid var(--ciano); outline-offset: var(--borda-forte); }
.secao:not(.secao--escura):not(.secao--profunda) :focus-visible { outline-color: var(--azul); }
section[id], [id].categoria { scroll-margin-top: calc(var(--e-16) + var(--subnav-h)); }

.pular { position: absolute; left: var(--e-4); top: var(--e-4); z-index: var(--z-menu); padding: var(--e-2) var(--e-4); background: var(--branco); color: var(--azul); transform: translateY(-200%); }
.pular:focus { transform: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 2. LAYOUT -------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.secao { position: relative; padding-block: var(--secao-py); }
.secao--clara { background: var(--cinza-fundo); }
.secao--escura { background: var(--azul-escuro); color: var(--texto-claro); }
.secao--profunda { background: var(--azul-profundo); color: var(--texto-claro); }
.secao--escura .texto-suave, .secao--profunda .texto-suave { color: var(--texto-claro-suave); }

/* A seta: seção escura termina em V apontando para a próxima */
.secao--seta { z-index: var(--z-base); padding-bottom: calc(var(--secao-py) + var(--seta-secao)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--seta-secao)), 50% 100%, 0 calc(100% - var(--seta-secao))); }
.secao--seta + * { margin-top: calc(var(--seta-secao) * -1); padding-top: calc(var(--secao-py) + var(--seta-secao)); }
/* Última seção antes do rodapé (ex.: página de obrigado): sem a ponta em V, senão sobra uma faixa branca entre os dois blocos escuros */
.secao--seta:last-child { clip-path: none; padding-bottom: var(--secao-py); }

.texto-suave { color: var(--texto-suave); }
.medida { max-width: var(--medida); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-corpo); }

/* Cabeçalho de seção: eyebrow com a seta */
.cabecalho-secao { display: grid; gap: var(--e-4); margin-bottom: var(--e-10); }
.cabecalho-secao--centro { justify-items: center; text-align: center; }
@media (min-width: 1024px) { .cabecalho-secao { margin-bottom: var(--e-12); } }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); line-height: var(--lh-compacto);
  text-transform: uppercase; color: var(--azul);
}
.eyebrow::before {
  content: ""; flex: none; width: var(--e-3); height: var(--e-3);
  background: currentColor; -webkit-mask: var(--seta-svg) center / contain no-repeat; mask: var(--seta-svg) center / contain no-repeat;
}
.secao--escura .eyebrow, .secao--profunda .eyebrow, .hero .eyebrow, .hero-produto .eyebrow, .hero-simples .eyebrow,
.promo-config .eyebrow, .cta-produto .eyebrow, .config-hero .eyebrow { color: var(--ciano); }

/* Chevron gigante de fundo (marca d'água) */
.hero__marca {
  position: absolute; z-index: -1; pointer-events: none;
  right: calc(var(--marca-tam) * -0.25); bottom: calc(var(--marca-tam) * -0.3);
  width: var(--marca-tam); aspect-ratio: 1;
  background: var(--branco-08);
  -webkit-mask: var(--seta-svg) center / contain no-repeat; mask: var(--seta-svg) center / contain no-repeat;
}

/* ---------- 3. BOTÕES — os principais têm ponta de seta ---------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--btn-h); padding: var(--e-3) var(--e-6);
  border: var(--borda) solid transparent; border-radius: var(--raio);
  font-size: var(--fs-nav); font-weight: var(--fw-semi); line-height: var(--lh-compacto); white-space: nowrap;
  cursor: pointer; transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}
.btn .seta { flex: none; transition: transform var(--transicao); }
.btn:hover .seta { transform: translateX(var(--e-1)); }
.btn--primario, .btn--acento {
  padding-right: calc(var(--e-6) + var(--seta-ponta)); border: 0; border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--seta-ponta)) 0, 100% 50%, calc(100% - var(--seta-ponta)) 100%, 0 100%);
}
.btn--primario { background: var(--azul); color: var(--branco); }
.btn--primario:hover { background: var(--azul-hover); }
.btn--acento { background: var(--ciano); color: var(--azul-profundo); }
.btn--acento:hover { background: var(--branco); }
.btn--branco { background: var(--branco); color: var(--azul); }
.btn--contorno { border-color: var(--azul); color: var(--azul); }
.btn--contorno:hover { background: var(--azul); color: var(--branco); }
.btn--fantasma { border-color: var(--branco-16); background: transparent; color: var(--branco); }
.btn--fantasma:hover { border-color: var(--branco); background: var(--branco-08); }
.link-seta { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--fs-pequeno); font-weight: var(--fw-semi); color: var(--azul); }
.link-seta .seta { transition: transform var(--transicao); }
.link-seta:hover .seta, a:hover .link-seta .seta { transform: translateX(var(--e-1)); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* ---------- 4. MOLDURA — nenhuma foto solta ---------------------------- */
.moldura { position: relative; isolation: isolate; }
.moldura::before {
  /* traço ciano deslocado, fora do quadro */
  content: ""; position: absolute; z-index: -1;
  inset: var(--moldura-desloc) calc(var(--moldura-desloc) * -1) calc(var(--moldura-desloc) * -1) var(--moldura-desloc);
  border: var(--borda-forte) solid var(--ciano);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%);
}
.moldura > img, .moldura > .video, .moldura > .midia-par {
  width: 100%; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%);
}
.moldura > img { aspect-ratio: var(--proporcao-card); object-fit: cover; }
.moldura::after {
  /* a seta no canto chanfrado */
  content: ""; position: absolute; right: 0; bottom: 0; width: var(--corte); height: var(--corte);
  background: var(--azul); -webkit-mask: var(--seta-svg) center / 55% no-repeat; mask: var(--seta-svg) center / 55% no-repeat;
  transform: translate(35%, 35%);
}
.moldura--escura::after, .secao--escura .moldura::after, .secao--profunda .moldura::after { background: var(--ciano); }

/* ---------- 5. TOPBAR (oculta < 1024) ---------------------------------- */
.topbar { display: none; }
@media (min-width: 1024px) {
  .topbar { display: block; background: var(--branco); border-bottom: var(--borda) solid var(--cinza-borda); font-size: var(--fs-pequeno); }
  .topbar__inner { display: flex; align-items: center; gap: var(--e-8); min-height: var(--e-10); }
  .topbar__tel { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: var(--fw-semi); color: var(--azul); }
  .topbar__links { display: flex; gap: var(--e-6); margin-left: auto; }
  .topbar__links a { color: var(--texto-suave); font-weight: var(--fw-medio); transition: color var(--transicao); }
  .topbar__links a:hover { color: var(--azul); }
  .topbar__social { display: flex; gap: var(--e-3); color: var(--azul); }
}

/* ---------- 6. NAVBAR + MEGA MENU ------------------------------------- */
.navbar { position: sticky; top: 0; z-index: var(--z-navbar); background: var(--azul); color: var(--branco); transition: box-shadow var(--transicao); }
.navbar.rolou { box-shadow: var(--sombra-forte); }
.navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--e-6); min-height: var(--e-16); }
.navbar__logo img { height: var(--logo-h); width: auto; }
.navbar__toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--btn-h); height: var(--btn-h); margin-right: calc(var(--e-3) * -1); background: none; border: 0; color: var(--branco); cursor: pointer; }
.navbar__toggle .ico-fechar { display: none; }
.navbar.aberto .ico-fechar { display: block; }
.navbar.aberto .ico-abrir { display: none; }

/* painel mobile/tablet */
.navbar__nav {
  display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-menu);
  max-height: calc(100vh - var(--e-16)); overflow-y: auto;
  padding: var(--e-2) var(--gutter) var(--e-8); background: var(--azul-profundo); border-top: var(--borda) solid var(--branco-16);
}
.navbar.aberto .navbar__nav { display: grid; gap: var(--e-6); }
.navbar__links { display: grid; }
.navbar__links > li { border-bottom: var(--borda) solid var(--branco-16); }
.navbar__link { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); width: 100%; padding: var(--e-4) 0; background: none; border: 0; font-size: var(--fs-lead); font-weight: var(--fw-semi); text-align: left; cursor: pointer; }
.navbar__chev { flex: none; transition: transform var(--transicao); }
.navbar__abre[aria-expanded="true"] .navbar__chev { transform: rotate(180deg); }
.navbar__extra { display: grid; gap: var(--e-3); color: var(--texto-claro-suave); }
.navbar__ctas { display: flex; flex-wrap: wrap; gap: var(--e-3); }

.mega { display: none; }
.navbar__abre[aria-expanded="true"] + .mega { display: block; }
.mega__inner { display: grid; gap: var(--e-6); padding: 0 0 var(--e-6); }
.mega__trilho { display: none; }
.mega__paineis { display: grid; gap: var(--e-6); }
.mega__cat { margin-bottom: var(--e-2); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ciano); }
.mega__painel ul { display: grid; gap: var(--e-1); }
.mega__item { display: grid; grid-template-columns: var(--mega-thumb) 1fr; gap: var(--e-4); align-items: start; padding: var(--e-3); border-radius: var(--raio); transition: background-color var(--transicao); }
.mega__item:hover, .mega__item:focus-visible { background: var(--branco-08); }
.mega__thumb { display: block; width: var(--mega-thumb); aspect-ratio: var(--proporcao-card); overflow: hidden; background: var(--branco-08); clip-path: polygon(0 0, 100% 0, 100% 72%, 82% 100%, 0 100%); }
.mega__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mega__item strong { display: block; margin-bottom: var(--e-1); font-size: var(--fs-corpo); line-height: var(--lh-compacto); }
.mega__item:hover strong { color: var(--ciano); }
.mega__item small { display: block; font-size: var(--fs-pequeno); line-height: var(--lh-corpo); color: var(--texto-claro-suave); }
.mega__grade--aplicacoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); }
.mega__cartao { position: relative; display: block; aspect-ratio: var(--proporcao-card); overflow: hidden; isolation: isolate; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--e-6)), calc(100% - var(--e-6)) 100%, 0 100%); }
.mega__cartao img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform var(--transicao); }
.mega__cartao::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--veu-cartao); }
.mega__cartao span { position: absolute; left: var(--e-3); right: var(--e-3); bottom: var(--e-3); font-size: var(--fs-pequeno); font-weight: var(--fw-bold); line-height: var(--lh-compacto); color: var(--branco); }
.mega__cartao:hover img { transform: scale(var(--zoom-foto)); }
.mega__lado { display: grid; gap: var(--e-4); align-content: start; }
.mega__destaque { display: grid; gap: var(--e-2); padding: var(--e-5); background: var(--ciano-16); border-left: var(--borda-forte) solid var(--ciano); font-size: var(--fs-pequeno); color: var(--branco); }
.mega__destaque-t { font-size: var(--fs-corpo); font-weight: var(--fw-bold); }
.mega__destaque .link-seta { color: var(--ciano); }
.mega .mega__todos { color: var(--branco); }
.mega .mega__todos:hover { color: var(--ciano); }
.mega__lista { display: grid; gap: var(--e-1); }
.mega__linha { display: grid; grid-template-columns: 1fr auto; column-gap: var(--e-4); align-items: center; padding: var(--e-3); border-radius: var(--raio); transition: background-color var(--transicao); }
.mega__linha:hover { background: var(--branco-08); }
.mega__linha small { grid-column: 1; font-size: var(--fs-label); color: var(--texto-claro-suave); }
.mega__linha .seta { grid-column: 2; grid-row: 1 / span 2; color: var(--ciano); }

@media (min-width: 1024px) {
  .navbar__toggle { display: none; }
  .navbar__inner { position: relative; }
  .navbar__nav { display: flex; align-items: center; gap: var(--e-8); position: static; padding: 0; max-height: none; overflow: visible; background: none; border: 0; }
  .navbar__links { display: flex; gap: var(--e-6); }
  .navbar__links > li { border: 0; }
  .navbar__link { position: relative; width: auto; padding: var(--e-2) 0; font-size: var(--fs-nav); font-weight: var(--fw-medio); color: var(--texto-claro-suave); transition: color var(--transicao); }
  .navbar__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--borda-forte); background: var(--ciano); transform: scaleX(0); transform-origin: left; transition: transform var(--transicao); }
  .navbar__link:hover, .navbar__link[aria-current], .navbar__abre[aria-expanded="true"] { color: var(--branco); }
  .navbar__link:hover::after, .navbar__link[aria-current]::after, .navbar__abre[aria-expanded="true"]::after { transform: scaleX(1); }
  .navbar__extra { display: none; }
  .navbar__ctas { flex-wrap: nowrap; }
  .navbar__ctas .btn { min-height: var(--e-10); padding-block: var(--e-2); }

  .mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--azul-profundo); color: var(--branco); border-top: var(--borda-forte) solid var(--ciano); box-shadow: var(--sombra-forte); }
  .navbar__abre[aria-expanded="true"] + .mega { display: block; animation: mega-entra 180ms ease-out; }
  .mega__inner { grid-template-columns: var(--mega-trilho) 1fr var(--mega-lado); gap: var(--e-8); padding: var(--e-8) var(--gutter) var(--e-10); }
  .mega__trilho { display: grid; gap: var(--e-1); align-content: start; padding-right: var(--e-6); border-right: var(--borda) solid var(--branco-16); }
  .mega__cat-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); width: 100%; padding: var(--e-3) var(--e-4); background: none; border: 0; border-radius: var(--raio); font-size: var(--fs-pequeno); font-weight: var(--fw-semi); text-align: left; color: var(--texto-claro-suave); cursor: pointer; transition: background-color var(--transicao), color var(--transicao); }
  .mega__cat-btn .seta { opacity: 0; transition: opacity var(--transicao); }
  .mega__cat-btn:hover, .mega__cat-btn.ativo { background: var(--branco-08); color: var(--branco); }
  .mega__cat-btn.ativo { color: var(--ciano); }
  .mega__cat-btn.ativo .seta { opacity: 1; }
  .mega__paineis { display: block; }
  .mega__painel { display: none; }
  .mega__painel.ativo { display: block; }
  .mega__painel ul { grid-template-columns: repeat(2, 1fr); gap: var(--e-3) var(--e-6); }
  .mega__grade--aplicacoes { grid-column: 1 / 3; grid-template-columns: repeat(4, 1fr); gap: var(--e-4); }
  .navbar__nav, .navbar__links { align-self: stretch; }
  .navbar__links > li { display: flex; align-items: center; }
  .navbar__item--menu:has(.mega--compacto) { position: relative; }
  .mega--compacto { left: 50%; right: auto; width: var(--mega-compacto); margin-left: calc(var(--mega-compacto) / -2); }  /* centralizado sob o item */
  .mega--compacto .mega__inner { grid-template-columns: 1fr; padding: var(--e-4); }
}
@keyframes mega-entra { from { opacity: 0; transform: translateY(calc(var(--e-2) * -1)); } }

/* ---------- 7. HERO DA HOME — painel em seta sobre a foto -------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; display: grid; min-height: var(--hero-min); background: var(--azul-profundo); color: var(--texto-claro); }
.hero__fundo { position: absolute; inset: 0; z-index: -2; }
.hero__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero--direita .hero__fundo img { object-position: 15% center; }
/* Capa com texto à direita — base mobile: foto limpa em cima,
   painel embaixo com a ponta da seta apontando para as portas */
.hero--direita { min-height: 0; }
.hero--direita::before { display: none; }
.hero--direita .hero__fundo { position: relative; inset: auto; z-index: 0; height: var(--produto-foto-min); }
.hero--direita .hero__painel {
  position: relative; z-index: var(--z-base); margin-top: calc(var(--seta-secao) * -1);
  padding-top: calc(var(--seta-secao) + var(--e-8)); background: var(--azul-profundo);
  clip-path: polygon(0 var(--seta-secao), 50% 0, 100% var(--seta-secao), 100% 100%, 0 100%);
}

.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--veu-hero-mobile); }
.hero__painel { display: flex; align-items: flex-end; padding: var(--hero-py) var(--gutter); }
.hero__texto { display: grid; gap: var(--e-6); max-width: var(--container-txt); }
.hero__sub { font-size: var(--fs-lead); color: var(--texto-claro-suave); max-width: var(--medida); }
@media (min-width: 1024px) {
  .hero::before { display: none; }
  .hero__painel {
    align-items: center; width: 62%;
    padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    padding-right: calc(var(--seta-hero) + var(--e-8));
    background: var(--veu-painel);
    clip-path: polygon(0 0, calc(100% - var(--seta-hero)) 0, 100% 50%, calc(100% - var(--seta-hero)) 100%, 0 100%);
  }
  .hero .hero__marca { display: none; }

  /* Capa com o texto à direita: a ponta da seta aponta para as portas */
  .hero--direita { min-height: var(--hero-min); }
  /* a foto termina onde começa o título; o degradê azul nasce antes da ponta
     da seta, então a seta continua visível sobre a foto que vai sumindo */
  .hero--direita .hero__fundo {
    position: absolute; inset: 0 auto 0 0; z-index: -2; height: auto;
    width: calc(100% - var(--capa-painel) + var(--seta-hero) + var(--e-8));
  }
  .hero--direita .hero__fundo img { object-position: left center; filter: var(--capa-filtro); }
  .hero--direita .hero__fundo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to left, var(--azul-profundo) 0, var(--azul-profundo) calc(var(--seta-hero) * .35), transparent var(--capa-degrade));
  }
  .hero--direita h1 { font-size: var(--fs-capa); }
  .hero--direita .hero__painel {
    justify-self: end; width: var(--capa-painel); margin-top: 0; padding-top: var(--hero-py); background: var(--azul-profundo);
    padding-left: calc(var(--seta-hero) + var(--e-8));
    padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    clip-path: polygon(var(--seta-hero) 0, 100% 0, 100% 100%, var(--seta-hero) 100%, 0 50%);
  }
}

/* Faixa de estatísticas */
.estatisticas { background: var(--azul); color: var(--texto-claro); }
.estat__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.estat__item { position: relative; display: grid; gap: var(--e-1); align-content: start; padding: var(--e-6) var(--e-4); }
.estat__item:nth-child(odd) { padding-left: 0; }
.estat__item:nth-child(n+3)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: var(--borda) solid var(--branco-16); }
.estat__numero { font-size: var(--fs-estat); font-weight: var(--fw-bold); line-height: var(--lh-titulo); letter-spacing: var(--ls-titulo); }
.estat__label { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ciano); }
@media (min-width: 1024px) {
  .estat__grid { grid-template-columns: repeat(6, 1fr); }
  .estat__item, .estat__item:nth-child(odd) { padding: var(--e-8) var(--e-4) var(--e-8) var(--e-6); }
  .estat__item:first-child { padding-left: 0; }
  .estat__item:nth-child(n)::before { content: ""; position: absolute; top: var(--e-8); bottom: var(--e-8); left: 0; right: auto; border: 0; border-left: var(--borda) solid var(--branco-16); }
  .estat__item:first-child::before { display: none; }
  .estat__numero { font-size: var(--fs-estat-6); }
}

/* ---------- 8. CARDS DE PRODUTO — etiqueta inclinada sobre a foto ------ */
/* Cards de produto — celular: foto pequena ao lado do texto (rolagem curta);
   a partir de 768 px: foto em cima, grade de 2 e 4 colunas. */
.cards { display: grid; gap: var(--e-4); }
@media (min-width: 768px)  { .cards { grid-template-columns: repeat(2, 1fr); gap: var(--e-8) var(--e-6); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(4, 1fr); } .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card { display: flex; flex-direction: row; align-items: stretch; gap: var(--e-4); height: 100%; padding-bottom: var(--e-4); border-bottom: var(--borda-forte) solid var(--cinza-borda); transition: border-color var(--transicao), transform var(--transicao); }
.card:hover { border-bottom-color: var(--ciano); transform: translateY(var(--elevar)); }
.card__midia { position: relative; flex: none; align-self: flex-start; width: var(--card-thumb-cel); aspect-ratio: 1; overflow: hidden; background: var(--cinza-fundo); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%); }
.card__midia img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicao); }
.card:hover .card__midia img { transform: scale(var(--zoom-foto)); }
.card__midia--vazia { display: grid; place-items: center; color: var(--azul-20); }
.card__corpo { display: flex; flex-direction: column; gap: var(--e-1); flex: 1; padding: 0; }
.card__tag {
  position: relative; align-self: flex-start; margin: 0 0 var(--e-1);
  padding: var(--e-1) var(--e-3); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--branco); background: var(--azul); transform: skewX(-12deg);
}
.card h3, .card h2 { font-size: var(--fs-h3); }
.card__resumo { font-size: var(--fs-pequeno); color: var(--texto-suave); }
.card .link-seta { margin-top: auto; padding-top: var(--e-2); }
@media (min-width: 768px) {
  .card { flex-direction: column; gap: 0; padding-bottom: 0; }
  .card__midia { align-self: stretch; width: auto; aspect-ratio: var(--proporcao-card); }
  .card__corpo { gap: var(--e-2); padding: var(--e-5) 0 var(--e-6); }
  .card__tag { margin: calc(var(--e-10) * -1) 0 var(--e-2) var(--e-3); }
  .card .link-seta { padding-top: var(--e-3); }
}
.secao__acoes { display: flex; justify-content: center; margin-top: var(--e-10); }

/* Tiles de aplicação: foto inteira, título sobre o véu, seta no canto */
.topicos { display: grid; border-top: var(--borda) solid var(--cinza-borda); }
@media (min-width: 768px)  { .topicos { grid-template-columns: repeat(2, 1fr); column-gap: var(--e-8); } }
@media (min-width: 1024px) { .topicos { grid-template-columns: repeat(4, 1fr); } }
.topico { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); height: 100%; padding: var(--e-5) 0; font-size: var(--fs-corpo); font-weight: var(--fw-semi); color: var(--titulo); border-bottom: var(--borda) solid var(--cinza-borda); transition: color var(--transicao), border-color var(--transicao); }
.topico .seta { flex: none; color: var(--ciano); transition: transform var(--transicao); }
.topico:hover { color: var(--azul); border-bottom-color: var(--ciano); }
.topico:hover .seta { transform: translateX(var(--e-1)); }
.tiles { display: grid; gap: var(--e-3); }
@media (min-width: 768px)  { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(4, 1fr); } .tiles li:nth-child(1), .tiles li:nth-child(6) { grid-column: span 2; } }
.tile { position: relative; display: block; height: var(--tile-h); overflow: hidden; isolation: isolate; color: var(--branco); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%); }
.tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicao); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--veu-cartao); }
.tile__t { position: absolute; left: var(--e-5); right: calc(var(--e-10) + var(--e-6)); bottom: var(--e-5); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-compacto); }
.tile .seta { position: absolute; right: var(--e-10); bottom: var(--e-6); color: var(--ciano); transition: transform var(--transicao); }
.tile:hover img { transform: scale(var(--zoom-foto)); }
.tile:hover .seta { transform: translateX(var(--e-1)); }

/* ---------- 9. PROMO DO CONFIGURADOR / CTA DE PRODUTO ------------------ */
.promo-config, .cta-produto { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--secao-py); background: var(--azul); color: var(--texto-claro); }
.promo-config__grid { display: grid; gap: var(--e-10); align-items: center; }
.promo-config__texto { display: grid; gap: var(--e-5); }
.promo-config .lead, .cta-produto .lead { color: var(--texto-claro-suave); }
.promo-config__passos { display: grid; gap: var(--e-2); }
.promo-config__passos li {
  display: flex; align-items: center; gap: var(--e-4); padding: var(--e-4) var(--e-8) var(--e-4) var(--e-5);
  font-weight: var(--fw-semi); background: var(--branco-08);
  clip-path: polygon(0 0, calc(100% - var(--seta-ponta)) 0, 100% 50%, calc(100% - var(--seta-ponta)) 100%, 0 100%);
}
.promo-config__passos span { font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--ciano); }
@media (min-width: 1024px) {
  .promo-config__grid { grid-template-columns: 6fr 5fr; gap: var(--e-16); }
  .promo-config__passos li:nth-child(2), .promo-config__passos li:nth-child(4) { margin-left: var(--e-6); }
  .promo-config__passos li:nth-child(3) { margin-left: var(--e-12); }
}
.cta-produto { background: var(--azul-profundo); }
.cta-faixa { display: grid; gap: var(--e-6); align-items: center; }
.cta-faixa h2 { margin-bottom: var(--e-3); }
@media (min-width: 1024px) { .cta-faixa { grid-template-columns: 1fr auto; gap: var(--e-12); } }

/* ---------- 10. DUAS COLUNAS / TEXTO + MÍDIA -------------------------- */
.duas-col { display: grid; gap: var(--e-12); align-items: center; }
.duas-col--topo { align-items: start; }
.duas-col__texto { display: grid; gap: var(--e-5); align-content: start; }
.duas-col__img { padding-right: var(--moldura-desloc); padding-bottom: var(--moldura-desloc); }
@media (min-width: 1024px) {
  .duas-col { grid-template-columns: 1fr 1fr; gap: var(--e-16); }
  .duas-col--invertida .duas-col__img { order: -1; }
}
.coluna-leitura { max-width: var(--container-txt); }
/* parágrafos não ficam soltos: frase de abertura em destaque + texto preso a um fio ciano */
.destaque-txt { font-size: var(--fs-lead); font-weight: var(--fw-semi); line-height: var(--lh-corpo); color: var(--azul); }
.secao--escura .destaque-txt, .secao--profunda .destaque-txt { color: var(--ciano); }
.prosa { display: grid; gap: var(--e-4); max-width: var(--medida); padding-left: var(--e-5); border-left: var(--borda-forte) solid var(--ciano); }
.prosa:empty { display: none; }
.prosa p { color: var(--texto-suave); }
.secao--escura .prosa p, .secao--profunda .prosa p { color: var(--texto-claro-suave); }
.sub-itens { display: grid; gap: var(--e-3); }
.sub-itens li { display: grid; gap: var(--e-1); padding: var(--e-4) var(--e-5); background: var(--cinza-fundo); border-left: var(--borda-forte) solid var(--azul); }
.secao--clara .sub-itens li { background: var(--branco); }
.sub-itens h3 { font-size: var(--fs-corpo); }
.sub-itens p { font-size: var(--fs-pequeno); color: var(--texto-suave); }
.legenda { margin-top: var(--e-4); font-size: var(--fs-pequeno); color: var(--texto-suave); }
.midia-par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.midia-par img { width: 100%; height: 100%; aspect-ratio: var(--proporcao-retrato); object-fit: cover; }
.fecho { margin-top: var(--e-10); }

.institucional__logo { width: auto; height: var(--institucional-logo-h); margin-bottom: var(--e-6); }
.institucional__grid { display: grid; gap: var(--e-12); align-items: center; }
@media (min-width: 1024px) { .institucional__grid { grid-template-columns: 5fr 7fr; gap: var(--e-16); } }
.video { position: relative; aspect-ratio: var(--proporcao-video); background: var(--azul-profundo); overflow: hidden; }
.video video { width: 100%; height: 100%; object-fit: cover; }

.mini-cards { display: grid; gap: var(--e-3); }
@media (min-width: 768px) { .mini-cards { grid-template-columns: repeat(2, 1fr); } }
.mini-card { display: grid; gap: var(--e-1); align-content: start; padding: var(--e-4) var(--e-5); background: var(--branco); border-left: var(--borda-forte) solid var(--azul); }
.secao:not(.secao--clara) .mini-card { background: var(--cinza-fundo); }
.mini-card h3, .mini-card h4 { font-size: var(--fs-pequeno); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--azul); }
.mini-card p { font-size: var(--fs-pequeno); color: var(--texto-suave); }
.secao--escura .mini-card, .secao--profunda .mini-card { background: var(--branco-08); border-left-color: var(--ciano); }
.secao--escura .mini-card h3, .secao--profunda .mini-card h3 { color: var(--ciano); }
.secao--escura .mini-card p, .secao--profunda .mini-card p { color: var(--texto-claro-suave); }

/* ---------- 11. PÁGINA DE PRODUTO -------------------------------------- */
.breadcrumb { font-size: var(--fs-pequeno); color: var(--texto-claro-suave); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.breadcrumb li + li::before { content: "›"; margin-right: var(--e-2); color: var(--ciano); }
.breadcrumb a:hover, .breadcrumb [aria-current] { color: var(--branco); }

/* Hero: painel escuro em seta; a foto ocupa toda a metade direita e continua
   por baixo da ponta da seta, sangrando até a borda da tela. */
.hero-produto { position: relative; display: grid; background: var(--azul-profundo); }
.hero-produto__texto { position: relative; z-index: var(--z-base); padding: var(--e-8) var(--gutter) calc(var(--e-10) + var(--seta-secao)); color: var(--texto-claro); background: var(--azul-profundo); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--seta-secao)), 50% 100%, 0 calc(100% - var(--seta-secao))); }
.hero-produto__miolo { display: grid; gap: var(--e-5); max-width: var(--container-txt); }
.hero-produto__miolo .breadcrumb { margin-bottom: var(--e-4); }
.hero-produto h1 { font-size: var(--fs-display); }
.hero-produto__sub { color: var(--texto-claro-suave); }
.hero-produto__rotulo { font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--texto-claro-suave); }
.hero-produto__componentes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.hero-produto__componentes li { display: inline-flex; align-items: center; gap: var(--e-2); padding: var(--e-1) var(--e-3); font-size: var(--fs-pequeno); color: var(--texto-claro-suave); background: var(--branco-08); }
.hero-produto__componentes li::before { content: ""; flex: none; width: var(--e-2); height: var(--e-2); background: var(--ciano); -webkit-mask: var(--seta-svg) center / contain no-repeat; mask: var(--seta-svg) center / contain no-repeat; }
.lista-dif__comp { display: grid; gap: var(--e-3); margin-top: var(--e-12); padding-top: var(--e-8); border-top: var(--borda) solid var(--branco-16); }

.hero-produto__img { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: var(--produto-foto-min); margin-top: calc(var(--seta-secao) * -1); background: var(--azul-profundo); }
.hero-produto__foto { position: absolute; inset: 0; z-index: -1; }
.hero-produto__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

/* Miniaturas "aplicações reais" flutuando sobre a foto */
.galeria-mini { display: grid; gap: var(--e-2); padding: var(--e-5) var(--gutter); }
.galeria-mini__rotulo { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--branco); }
.galeria-mini__rotulo::before { content: ""; width: var(--e-3); height: var(--e-3); background: var(--ciano); -webkit-mask: var(--seta-svg) center / contain no-repeat; mask: var(--seta-svg) center / contain no-repeat; }
.galeria-mini ul { display: flex; gap: var(--e-2); }
.galeria-mini a { position: relative; display: block; width: var(--thumb-galeria); aspect-ratio: 1; overflow: hidden; border: var(--borda-forte) solid var(--branco); box-shadow: var(--sombra-forte); transition: transform var(--transicao), border-color var(--transicao); }
.galeria-mini a:hover, .galeria-mini a:focus-visible { transform: translateY(var(--elevar)); border-color: var(--ciano); }
.galeria-mini img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 1024px) {
  .hero-produto { grid-template-columns: 50% 50%; min-height: var(--hero-produto-min); }
  .hero-produto__texto {
    display: flex; align-items: center;
    margin-right: calc(var(--seta-hero) * -1);
    padding: var(--e-8) calc(var(--seta-hero) + var(--e-8)) var(--e-10) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    clip-path: polygon(0 0, calc(100% - var(--seta-hero)) 0, 100% 50%, calc(100% - var(--seta-hero)) 100%, 0 100%);
  }
  .hero-produto__img { min-height: 0; margin-top: 0; }
  .galeria-mini { justify-items: end; padding: var(--e-6) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) var(--e-6) calc(var(--seta-hero) + var(--e-8)); }
}

/* Números-chave */
.numeros { background: var(--azul); color: var(--branco); }
.numeros__lista { display: grid; grid-template-columns: repeat(2, 1fr); }
.numeros__lista li { display: grid; gap: var(--e-1); align-content: start; padding: var(--e-5) var(--e-4); border-left: var(--borda) solid var(--branco-16); }
.numeros__lista li:nth-child(odd) { padding-left: 0; border-left: 0; }
.numeros__lista li:nth-child(n+3) { border-top: var(--borda) solid var(--branco-16); }
.numeros__n { font-size: var(--fs-numero); font-weight: var(--fw-bold); line-height: var(--lh-titulo); letter-spacing: var(--ls-titulo); }
.numeros__l { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ciano); }
@media (min-width: 1024px) {
  .numeros__lista { grid-template-columns: repeat(4, 1fr); }
  .numeros__lista li, .numeros__lista li:nth-child(odd), .numeros__lista li:nth-child(n+3) { padding: var(--e-8) var(--e-6); border-top: 0; border-left: var(--borda) solid var(--branco-16); }
  .numeros__lista li:first-child { padding-left: 0; border-left: 0; }
}

/* Subnavegação fixa da página de produto */
.subnav { position: sticky; top: var(--e-16); z-index: calc(var(--z-navbar) - 1); background: var(--branco); border-bottom: var(--borda) solid var(--cinza-borda); }
.subnav__inner { display: flex; align-items: center; gap: var(--e-6); min-height: var(--subnav-h); }
.subnav ul { display: flex; gap: var(--e-6); overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav ul a { display: block; padding-block: var(--e-4); font-size: var(--fs-pequeno); font-weight: var(--fw-semi); white-space: nowrap; color: var(--texto-suave); border-bottom: var(--borda-forte) solid transparent; transition: color var(--transicao), border-color var(--transicao); }
.subnav ul a:hover, .subnav ul a.ativo { color: var(--azul); border-bottom-color: var(--azul); }

/* Destaques (4 cards abaixo do hero) */
.destaques-secao { padding-block: var(--e-12); }
.destaques { display: grid; gap: var(--e-4); }
.destaque { display: grid; gap: var(--e-3); align-content: start; padding: var(--e-6); background: var(--cinza-fundo); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--e-6)), calc(100% - var(--e-6)) 100%, 0 100%); }
.destaque__seta { width: var(--e-6); height: var(--e-6); background: var(--azul); -webkit-mask: var(--seta-svg) center / contain no-repeat; mask: var(--seta-svg) center / contain no-repeat; }
.destaque__t { font-size: var(--fs-corpo); letter-spacing: var(--ls-label); text-transform: uppercase; line-height: var(--lh-compacto); color: var(--azul); }
.destaque p { font-size: var(--fs-pequeno); color: var(--texto-suave); }
@media (min-width: 768px)  { .destaques { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .destaques { grid-template-columns: repeat(4, 1fr); } .destaque { padding: var(--e-8) var(--e-6); } }

/* Diferenciais: faixa escura com números vazados */
.lista-dif { display: grid; gap: var(--e-8); }
@media (min-width: 768px) { .lista-dif:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .lista-dif { grid-template-columns: repeat(3, 1fr); gap: var(--e-10); }
  .lista-dif:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); gap: var(--e-8); }
}
.lista-dif li { display: grid; gap: var(--e-3); align-content: start; padding-top: var(--e-5); border-top: var(--borda) solid var(--branco-16); }
.dif__n { font-size: var(--fs-dif-n); font-weight: var(--fw-bold); line-height: var(--lh-titulo); color: transparent; -webkit-text-stroke: var(--contorno-num) var(--ciano); }
.lista-dif h3 { color: var(--branco); }
.lista-dif p { color: var(--texto-claro-suave); }

/* Aplicações: foto com título sobre o véu + desafio/garantia presos ao card */
.aplicacoes { display: grid; gap: var(--e-6); }
@media (min-width: 768px) { .aplicacoes { grid-template-columns: repeat(2, 1fr); } }
.aplicacao { display: flex; flex-direction: column; background: var(--branco); }
.secao:not(.secao--clara) .aplicacao { background: var(--cinza-fundo); }
.aplicacao__midia { position: relative; aspect-ratio: var(--proporcao-faixa); overflow: hidden; isolation: isolate; }
.aplicacao__midia img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.aplicacao__midia::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--veu-cartao); }
.aplicacao__t { position: absolute; left: var(--e-6); right: var(--e-6); bottom: var(--e-5); color: var(--branco); }
.aplicacao__t--sem { position: static; padding: var(--e-6) var(--e-6) 0; color: var(--azul); }
.aplicacao__corpo { flex: 1; padding: var(--e-6); }
.aplicacao dl { display: grid; gap: var(--e-4); font-size: var(--fs-pequeno); }
.aplicacao dt { margin-bottom: var(--e-1); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--texto-suave); }
.aplicacao dd { color: var(--texto-suave); }
.aplicacao__garante { padding: var(--e-4); background: var(--azul-06); border-left: var(--borda-forte) solid var(--azul); }
.aplicacao__garante dt { color: var(--azul); }
.aplicacao__garante dd { color: var(--texto); }

/* Ficha técnica — tabela HTML (GEO), scroll horizontal, nunca reduz fonte */
.tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--branco); border: var(--borda) solid var(--cinza-borda); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-corpo); min-width: 36rem; }
.tabela caption { padding: var(--e-4) var(--e-5); font-weight: var(--fw-bold); text-align: left; color: var(--branco); background: var(--azul); }
.tabela thead th { padding: var(--e-3) var(--e-5); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; text-align: left; color: var(--branco); background: var(--azul); }
.tabela th, .tabela td { padding: var(--e-3) var(--e-5); text-align: left; vertical-align: top; border-bottom: var(--borda) solid var(--cinza-borda); }
.tabela tbody tr:nth-child(even) { background: var(--cinza-fundo); }
.tabela tr:last-child th, .tabela tr:last-child td { border-bottom: 0; }
.tabela tbody th[scope="row"] { width: 40%; font-weight: var(--fw-semi); color: var(--texto-suave); }
.tabela td { font-weight: var(--fw-semi); }
.tabela--ficha caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 1024px) { .tabela { min-width: 0; } }

/* FAQ — <details> nativo */
.faq { display: grid; gap: var(--e-2); }
.faq details { background: var(--branco); border-left: var(--borda-forte) solid var(--cinza-borda); transition: border-color var(--transicao); }
.secao:not(.secao--clara) .faq details { background: var(--cinza-fundo); }
.faq details[open] { border-left-color: var(--azul); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); padding: var(--e-5) var(--e-6); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: var(--fs-corpo); font-weight: var(--fw-semi); letter-spacing: normal; }
.faq summary svg { flex: none; color: var(--azul); transition: transform var(--transicao); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details > div { max-width: var(--medida); padding: 0 var(--e-6) var(--e-6); color: var(--texto-suave); }
.faq-grid { display: grid; gap: var(--e-6); }
@media (min-width: 1024px) {
  .faq-grid { grid-template-columns: 4fr 8fr; gap: var(--e-16); align-items: start; }
  .faq-grid > .cabecalho-secao { position: sticky; top: calc(var(--e-16) + var(--subnav-h) + var(--e-6)); }
}

/* Produtos recomendados (aplicações / conforto térmico) */
.produtos-rec { display: grid; gap: var(--e-16); }
.produto-rec { display: grid; gap: var(--e-8); align-items: start; }
.produto-rec__img { padding-right: var(--moldura-desloc); padding-bottom: var(--moldura-desloc); }
.produto-rec__corpo { display: grid; gap: var(--e-4); align-content: start; }
.produto-rec__tag { font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--texto-suave); }
.produto-rec__corpo h3 { font-size: var(--fs-h2); letter-spacing: var(--ls-titulo); color: var(--azul); }
.produto-rec__extra { display: grid; gap: var(--e-8); }
@media (min-width: 1024px) {
  .produto-rec { grid-template-columns: 5fr 7fr; gap: var(--e-12); }
  .produto-rec:nth-child(even) .produto-rec__img { order: 2; }
  .produto-rec__extra { grid-column: 1 / -1; grid-template-columns: 5fr 7fr; gap: var(--e-12); align-items: start; }
}

/* Próximos passos: setas encadeadas */
.passos { display: grid; gap: var(--e-3); }
.passo { display: grid; gap: var(--e-3); align-content: start; padding: var(--e-6); background: var(--branco-08); }
.passo__num { font-size: var(--fs-dif-n); font-weight: var(--fw-bold); line-height: var(--lh-titulo); color: transparent; -webkit-text-stroke: var(--contorno-num) var(--ciano); }
.passo h3 { color: var(--branco); }
.passo p { font-size: var(--fs-pequeno); color: var(--texto-claro-suave); }
@media (min-width: 768px) { .passos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .passos { grid-template-columns: repeat(4, 1fr); gap: var(--e-1); }
  .passo { padding: var(--e-8) var(--e-12) var(--e-8) var(--e-8); clip-path: polygon(0 0, calc(100% - var(--e-8)) 0, 100% 50%, calc(100% - var(--e-8)) 100%, 0 100%); }
  .passo:not(:first-child) { padding-left: var(--e-16); clip-path: polygon(0 0, calc(100% - var(--e-8)) 0, 100% 50%, calc(100% - var(--e-8)) 100%, 0 100%, var(--e-8) 50%); }
}

/* Cards azuis, linha do tempo, lista numerada, galeria */
.cards-destaque { display: grid; gap: var(--e-3); }
.cards-destaque li { display: flex; align-items: center; gap: var(--e-3); min-height: var(--e-20); padding: var(--e-5) var(--e-8) var(--e-5) var(--e-6); font-size: var(--fs-pequeno); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--branco); background: var(--azul); clip-path: polygon(0 0, calc(100% - var(--seta-ponta)) 0, 100% 50%, calc(100% - var(--seta-ponta)) 100%, 0 100%); }
.cards-destaque li::before { content: ""; flex: none; width: var(--e-4); height: var(--e-4); background: var(--ciano); -webkit-mask: var(--seta-svg) center / contain no-repeat; mask: var(--seta-svg) center / contain no-repeat; }
@media (min-width: 768px)  { .cards-destaque { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards-destaque { grid-template-columns: repeat(4, 1fr); } }

.timeline { display: grid; }
.timeline li { position: relative; display: grid; gap: var(--e-2); padding: 0 0 var(--e-8) var(--e-8); border-left: var(--borda-forte) solid var(--azul-20); }
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before { content: ""; position: absolute; left: calc(var(--e-3) * -1 - var(--borda)); top: 0; width: var(--e-6); height: var(--e-6); background: var(--azul); -webkit-mask: var(--seta-svg) center / contain no-repeat; mask: var(--seta-svg) center / contain no-repeat; }
.timeline__ano { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-compacto); color: var(--azul); }
.timeline p { max-width: var(--medida); color: var(--texto-suave); }
@media (min-width: 1024px) { .timeline li { grid-template-columns: var(--e-32) 1fr; gap: var(--e-8); } }

.lista-num { display: grid; gap: var(--e-5); counter-reset: n; }
.lista-num li { position: relative; padding-left: var(--e-12); counter-increment: n; }
.lista-num li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--azul); }
.lista-num h3 { margin-bottom: var(--e-1); font-size: var(--fs-corpo); }
.lista-num p { font-size: var(--fs-pequeno); color: var(--texto-suave); }

.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); }
.galeria a { display: block; aspect-ratio: var(--proporcao-card); overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 80%, 85% 100%, 0 100%); }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicao); }
.galeria a:hover img { transform: scale(var(--zoom-foto)); }
@media (min-width: 1024px) { .galeria { grid-template-columns: repeat(3, 1fr); } }
/* Aplicações reais (página de produto): fotos de porta, em pé, numa linha só */
.galeria--aplicacoes a { aspect-ratio: var(--proporcao-retrato); }
@media (min-width: 1024px) { .galeria--aplicacoes { grid-template-columns: repeat(4, 1fr); } }

/* Visualizador de fotos (sobreposição real — regra 3 permite).
   Grade topo / palco / miniaturas; o palco tem min-height: 0 para a foto
   caber inteira na tela, nunca cortada. */
.lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--e-3); padding: var(--e-3) var(--e-3) var(--e-4); background: var(--veu-escuro); color: var(--branco); }
.lightbox[hidden] { display: none; }
.lightbox__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); }
.lightbox__cont { font-size: var(--fs-pequeno); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); color: var(--texto-claro-suave); }
.lightbox__palco { position: relative; min-height: 0; margin: 0; }
.lightbox__palco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity var(--transicao); }
.lightbox__palco img.carregando { opacity: 0; }
.lightbox__legenda { max-width: var(--medida); margin-inline: auto; font-size: var(--fs-pequeno); text-align: center; color: var(--texto-claro-suave); }
.lightbox__thumbs { display: flex; justify-content: center; gap: var(--e-2); overflow-x: auto; }
.lightbox__thumbs button { flex: none; width: var(--thumb-galeria); aspect-ratio: 1; padding: 0; overflow: hidden; background: none; border: var(--borda-forte) solid transparent; opacity: .55; cursor: pointer; transition: opacity var(--transicao), border-color var(--transicao); }
.lightbox__thumbs button[aria-current="true"] { opacity: 1; border-color: var(--ciano); }
.lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__btn { display: grid; place-items: center; width: var(--btn-h); height: var(--btn-h); background: var(--branco-08); border: var(--borda) solid var(--branco-16); border-radius: var(--raio-pill); color: var(--branco); cursor: pointer; transition: background-color var(--transicao); }
.lightbox__btn:hover { background: var(--branco-16); }
.lightbox__ant, .lightbox__prox { position: absolute; z-index: var(--z-base); top: 50%; transform: translateY(-50%); }
.lightbox__ant { left: 0; }
.lightbox__prox { right: 0; }
@media (min-width: 768px) {
  .lightbox { padding: var(--e-4) var(--e-6) var(--e-6); }
  .lightbox__palco img { inset: 0 var(--e-16); width: calc(100% - var(--e-16) * 2); }
}

/* ---------- 12. HERO SIMPLES (banner) / PÁGINAS DE LISTA --------------- */
.hero-simples { position: relative; isolation: isolate; overflow: hidden; z-index: var(--z-base); padding-block: var(--e-10) calc(var(--e-12) + var(--seta-secao)); color: var(--texto-claro); background: var(--azul-profundo); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--seta-secao)), 50% 100%, 0 calc(100% - var(--seta-secao))); }
.hero-simples + * { margin-top: calc(var(--seta-secao) * -1); padding-top: calc(var(--secao-py) + var(--seta-secao)); }
.hero-simples + .numeros { padding-top: var(--seta-secao); }
.hero-simples__texto { display: grid; gap: var(--e-4); margin-top: var(--e-6); max-width: var(--container-txt); }
.hero-simples .lead, .hero-simples__texto p { color: var(--texto-claro-suave); }
.hero-simples--foto { padding-block: var(--e-12) calc(var(--e-16) + var(--seta-secao)); }
.hero-simples--foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--veu-hero); }
.hero-simples .hero__fundo img { object-position: center; }
.hero-simples .hero__fundo--topo img { object-position: center top; }  /* mostra a parte de cima da foto */

.atalhos { position: sticky; top: var(--e-16); z-index: var(--z-base); margin-bottom: var(--e-10); padding-block: var(--e-3); background: inherit; overflow-x: auto; }
.atalhos ul { display: flex; gap: var(--e-2); }
.atalhos a { display: block; padding: var(--e-2) var(--e-4); white-space: nowrap; font-size: var(--fs-pequeno); font-weight: var(--fw-semi); background: var(--branco); border: var(--borda) solid var(--cinza-borda); transition: border-color var(--transicao), color var(--transicao); }
.atalhos a:hover { border-color: var(--azul); color: var(--azul); }
.categoria + .categoria { margin-top: var(--e-16); padding-top: var(--e-16); border-top: var(--borda) solid var(--cinza-borda); }
.categoria .cabecalho-secao { margin-bottom: var(--e-8); }

.grade-3 { display: grid; gap: var(--e-6); }
@media (min-width: 768px)  { .grade-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grade-3 { grid-template-columns: repeat(3, 1fr); } }

.noticia { display: flex; flex-direction: column; height: 100%; background: var(--branco); border-bottom: var(--borda-forte) solid var(--cinza-borda); transition: border-color var(--transicao); }
.noticia:hover { border-bottom-color: var(--ciano); }
.noticia__midia { aspect-ratio: var(--proporcao-video); overflow: hidden; background: var(--cinza-fundo); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--e-6)), calc(100% - var(--e-6)) 100%, 0 100%); }
.noticia__midia img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicao); }
.noticia:hover .noticia__midia img { transform: scale(var(--zoom-foto)); }
.noticia__corpo { display: grid; flex: 1; gap: var(--e-3); align-content: start; padding: var(--e-5) var(--e-5) var(--e-6); }
.noticia__data { font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--azul); }
.noticia__t { font-size: var(--fs-h3); letter-spacing: normal; line-height: var(--lh-compacto); }
.noticia p { font-size: var(--fs-pequeno); color: var(--texto-suave); }
.noticia .link-seta { margin-top: auto; }

.social-lista { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.social-btn { display: inline-flex; align-items: center; gap: var(--e-2); padding: var(--e-3) var(--e-5); font-weight: var(--fw-semi); color: var(--azul); background: var(--branco); border: var(--borda) solid var(--cinza-borda); transition: background-color var(--transicao), color var(--transicao); }
.social-btn:hover { background: var(--azul); color: var(--branco); }

.lista-arquivos { display: grid; gap: var(--e-2); }
.arquivo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); padding: var(--e-4) var(--e-5); background: var(--branco); border-left: var(--borda-forte) solid var(--azul); transition: box-shadow var(--transicao); }
.arquivo:hover { box-shadow: var(--sombra); }
.arquivo > svg { flex: none; color: var(--azul); }
.arquivo__info { flex: 1; min-width: 0; display: grid; gap: var(--e-1); }
.arquivo__cat { font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--azul); }
.arquivo__nome { font-size: var(--fs-corpo); letter-spacing: normal; }
.arquivo__info p { font-size: var(--fs-pequeno); color: var(--texto-suave); }
.arquivo .btn { width: 100%; min-height: var(--e-10); padding-block: var(--e-2); }
@media (min-width: 768px) { .arquivo .btn { width: auto; } }

.filtro-uf { max-width: var(--container-txt); margin-bottom: var(--e-10); }
.cred-grupo + .cred-grupo { margin-top: var(--e-10); }
.cred-grupo__nota { margin-bottom: var(--e-2); font-size: var(--fs-pequeno); font-weight: var(--fw-semi); color: var(--azul); }
.cred-grupo[hidden] { display: none; }
.cred-grupo__uf { margin-bottom: var(--e-2); font-size: var(--fs-h3); color: var(--azul); }
.cred-grupo__uf span { font-size: var(--fs-pequeno); color: var(--texto-suave); }
.cred-grupo__n, .cred-grupo__vazio { margin-bottom: var(--e-4); font-size: var(--fs-pequeno); color: var(--texto-suave); }
.credenciado { display: grid; gap: var(--e-2); align-content: start; padding: var(--e-5); background: var(--branco); border-top: var(--borda-forte) solid var(--azul); }
.credenciado h4 { font-size: var(--fs-corpo); line-height: var(--lh-compacto); }
.credenciado p { font-size: var(--fs-pequeno); color: var(--texto-suave); }
.credenciado__nivel { justify-self: start; padding: var(--e-1) var(--e-2); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--branco); background: var(--azul); transform: skewX(-12deg); }
.credenciado__cidade { font-weight: var(--fw-medio); }
.credenciado a { color: var(--azul); word-break: break-word; }
.credenciado a:hover { text-decoration: underline; }

/* mapa clicável — cada estado é um botão que filtra a lista */
.cred { display: grid; gap: var(--e-10); align-items: start; }
.cred .filtro-uf { margin-bottom: var(--e-6); }
.cred__mapa { display: grid; gap: var(--e-4); justify-items: center; }
.cred__mapa figcaption { font-size: var(--fs-pequeno); color: var(--texto-suave); text-align: center; }
.mapa-br { width: 100%; max-width: var(--mapa-max); height: auto; overflow: visible; }
.mapa-uf { cursor: pointer; outline: none; }
.mapa-uf__forma, .mapa-uf__circulo { stroke: var(--branco); stroke-width: var(--borda); stroke-linejoin: round; transition: fill var(--transicao); }
.mapa-uf--com :is(.mapa-uf__forma, .mapa-uf__circulo) { fill: var(--azul); }
.mapa-uf--sem :is(.mapa-uf__forma, .mapa-uf__circulo) { fill: var(--cinza-borda); }
.mapa-uf text { font-size: var(--fs-mapa); font-weight: var(--fw-bold); fill: var(--branco); pointer-events: none; }
.mapa-uf--sem text { fill: var(--texto-suave); }
.mapa-uf:is(:hover, :focus-visible) :is(.mapa-uf__forma, .mapa-uf__circulo) { fill: var(--azul-hover); }
.mapa-uf--sem:is(:hover, :focus-visible) :is(.mapa-uf__forma, .mapa-uf__circulo) { fill: var(--texto-suave); }
.mapa-uf--sem:is(:hover, :focus-visible) text { fill: var(--branco); }
.mapa-uf:focus-visible :is(.mapa-uf__forma, .mapa-uf__circulo) { stroke: var(--azul-profundo); stroke-width: var(--borda-forte); }
.mapa-uf.is-ativo :is(.mapa-uf__forma, .mapa-uf__circulo) { fill: var(--ciano); }
.mapa-uf.is-ativo text { fill: var(--azul-profundo); }
.mapa-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2) var(--e-6); font-size: var(--fs-pequeno); color: var(--texto-suave); }
.mapa-legenda li { display: flex; align-items: center; gap: var(--e-2); }
.mapa-legenda__cor { width: var(--e-3); height: var(--e-3); background: var(--azul); }
.mapa-legenda__cor--sem { background: var(--cinza-borda); }
.cred__lista { scroll-margin-top: var(--e-24); }
.cred__aviso { padding: var(--e-10) var(--e-6); font-size: var(--fs-corpo); color: var(--texto-suave); text-align: center; border: var(--borda) dashed var(--cinza-borda); }
.cred__aviso[hidden] { display: none; }
.cred-grupo__lista { display: grid; gap: var(--e-4); }
@media (min-width: 768px) { .cred-grupo__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .cred { grid-template-columns: 5fr 7fr; gap: var(--e-16); }
  .cred__mapa { position: sticky; top: var(--e-24); }
}

/* ---------- Canal com o CEO (home) — foto em moldura + texto à direita */
.ceo { max-width: var(--ceo-max); margin-inline: auto; }
.ceo__foto { width: 100%; max-width: var(--ceo-foto); order: -1; }
.ceo__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ceo__nome { font-size: var(--fs-h3); font-weight: var(--fw-semi); color: var(--texto); }
.ceo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4) var(--e-6); }
.ceo__acoes .btn svg:not(.seta) { flex: none; width: var(--icone); height: var(--icone); }
.ceo__link { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--fs-nav); font-weight: var(--fw-semi); color: var(--texto); }
.ceo__link:hover { color: var(--azul); }
.ceo__in { display: grid; place-items: center; width: var(--e-8); height: var(--e-8); background: var(--azul); color: var(--branco); border-radius: var(--raio-md); }
.ceo__in svg { width: var(--e-4); height: var(--e-4); }
@media (min-width: 768px) {
  .ceo { grid-template-columns: var(--ceo-foto) 1fr; gap: var(--e-16); }
}

/* ---------- 13. CLIENTES — faixa rolante ------------------------------ */
.logos { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, var(--preto) 8%, var(--preto) 92%, transparent); }
.logos__trilho { display: flex; flex: none; align-items: center; gap: var(--e-10); padding-right: var(--e-10); animation: logos-rolar var(--logos-duracao) linear infinite; }
.logos:hover .logos__trilho { animation-play-state: paused; }
.logos__trilho img { width: var(--logo-cliente-w); height: var(--logo-cliente-h); max-width: none; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter var(--transicao), opacity var(--transicao); }
.logos__trilho li:hover img { filter: none; opacity: 1; }
/* Nomes dos clientes (sem logo): texto separado pela seta da marca */
.logos--nomes .logos__trilho li { display: inline-flex; align-items: center; gap: var(--e-10); font-size: var(--fs-h3); font-weight: var(--fw-semi); white-space: nowrap; color: var(--texto-suave); }
.logos--nomes .logos__trilho li::after { content: ""; width: var(--e-3); height: var(--e-3); background: var(--ciano); -webkit-mask: var(--seta-svg) center / contain no-repeat; mask: var(--seta-svg) center / contain no-repeat; }
@keyframes logos-rolar { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .logos { flex-wrap: wrap; mask-image: none; }
  .logos__trilho { flex-wrap: wrap; justify-content: center; }
  .logos__trilho[aria-hidden] { display: none; }
}

/* ---------- 14. CONTATO + FORMULÁRIO ----------------------------------- */
.contato__grid { display: grid; gap: var(--e-8); }
@media (min-width: 1024px) {
  .contato__grid { grid-template-columns: 5fr 7fr; grid-template-areas: "cab form" "lista form"; gap: var(--e-8) var(--e-16); align-items: start; }
  .contato__cab { grid-area: cab; }
  .contato__lista { grid-area: lista; }
  .contato__grid > form { grid-area: form; }
}
.contato__cab .cabecalho-secao, .contato__info .cabecalho-secao { margin-bottom: 0; }
.contato__info { display: grid; gap: var(--e-8); align-content: start; }  /* chamado técnico */
.contatos { display: grid; gap: var(--e-2); }
.contatos a { display: flex; align-items: flex-start; gap: var(--e-4); padding: var(--e-4) var(--e-5); background: var(--branco); border-left: var(--borda-forte) solid var(--cinza-borda); transition: border-color var(--transicao); }
.contatos a:hover { border-left-color: var(--azul); }
.contatos svg { flex: none; width: var(--icone); height: var(--icone); color: var(--azul); }
.contatos small { display: block; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--texto-suave); }
.contatos span { font-weight: var(--fw-semi); }

.form { display: grid; gap: var(--e-6); padding: var(--e-6); background: var(--branco); border-top: var(--borda-forte) solid var(--azul); box-shadow: var(--sombra); }
@media (min-width: 768px) { .form { padding: var(--e-10); } }
.form__grid { display: grid; gap: var(--e-5); }
@media (min-width: 768px) { .form__grid { grid-template-columns: 1fr 1fr; } .campo--largo { grid-column: 1 / -1; } }
.campo { display: grid; gap: var(--e-2); }
.campo label { font-size: var(--fs-pequeno); font-weight: var(--fw-semi); }
.campo small { font-size: var(--fs-pequeno); color: var(--texto-suave); }
.campo__obrigatorio { color: var(--azul); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: var(--campo-h); padding: var(--e-3) var(--e-4); font-size: var(--fs-campo);
  background: var(--cinza-fundo); border: var(--borda) solid var(--cinza-borda); border-bottom: var(--borda-forte) solid var(--cinza-borda); border-radius: 0;
  transition: border-color var(--transicao), background-color var(--transicao);
}
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--azul); background: var(--branco); }
.campo input[type="file"] { padding: var(--e-3); background: var(--branco); }
.form__consent { font-size: var(--fs-pequeno); color: var(--texto-suave); }
.form__acoes .btn { width: 100%; }
@media (min-width: 768px) { .form__acoes .btn { width: auto; } }
.form__status:empty { display: none; }
.form__status { font-size: var(--fs-pequeno); font-weight: var(--fw-semi); color: var(--azul); }
.form__status[data-tipo="ok"] { color: var(--sucesso); }
.form__status[data-tipo="erro"] { color: var(--erro); }

/* Chips (produtos de interesse, opcionais) */
.chips { min-width: 0; margin: 0; padding: 0; border: 0; }
.chips legend { margin-bottom: var(--e-2); padding: 0; font-size: var(--fs-pequeno); font-weight: var(--fw-semi); }
.chips__lista { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--e-10); padding: var(--e-2) var(--e-4); font-size: var(--fs-pequeno); font-weight: var(--fw-medio); background: var(--cinza-fundo); border: var(--borda) solid var(--cinza-borda); transition: background-color var(--transicao), border-color var(--transicao), color var(--transicao); }
.chip input:checked + span { background: var(--azul); border-color: var(--azul); color: var(--branco); }
.chip input:checked + span::before { content: ""; flex: none; width: var(--e-3); height: var(--e-3); background: var(--ciano); -webkit-mask: var(--seta-svg) center / contain no-repeat; mask: var(--seta-svg) center / contain no-repeat; }
.chip input:focus-visible + span { outline: var(--borda-forte) solid var(--azul); outline-offset: var(--borda-forte); }

/* ---------- 15. RODAPÉ ------------------------------------------------- */
.rodape { position: relative; isolation: isolate; overflow: hidden; padding-top: var(--e-16); font-size: var(--fs-pequeno); color: var(--texto-claro-suave); background: var(--azul-profundo); border-top: var(--borda-forte) solid var(--ciano); }
.rodape::after { content: ""; position: absolute; z-index: -1; right: calc(var(--marca-tam) * -0.3); top: calc(var(--marca-tam) * -0.2); width: var(--marca-tam); aspect-ratio: 1; background: var(--branco-08); -webkit-mask: var(--seta-svg) center / contain no-repeat; mask: var(--seta-svg) center / contain no-repeat; }
.rodape__grid { display: grid; gap: var(--e-10); }
.rodape__marca { display: grid; gap: var(--e-4); align-content: start; max-width: var(--container-txt); }
.rodape__marca img { height: var(--logo-h); width: auto; }
.rodape .h-rodape { margin-bottom: var(--e-4); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ciano); }
.rodape__coluna ul { display: grid; gap: var(--e-2); }
.rodape__coluna a { transition: color var(--transicao); }
.rodape__coluna a:hover { color: var(--branco); }
.rodape__social { display: flex; gap: var(--e-3); }
.rodape__social a { display: grid; place-items: center; width: var(--e-10); height: var(--e-10); color: var(--branco); border: var(--borda) solid var(--branco-16); transition: background-color var(--transicao); }
.rodape__social a:hover { background: var(--branco-16); }
.rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-4); margin-top: var(--e-12); padding-block: var(--e-6); padding-right: calc(var(--btn-flutuante) + var(--flutuante-borda)); border-top: var(--borda) solid var(--branco-16); }
@media (min-width: 768px) { .rodape__grid { grid-template-columns: 1fr 1fr; } .rodape__marca { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .rodape__grid { grid-template-columns: 3fr 2fr 2fr 2fr 3fr; gap: var(--e-8); } .rodape__marca { grid-column: auto; } }

/* ---------- 16. BOTÕES FLUTUANTES ------------------------------------- */
.flutuantes { position: fixed; right: var(--flutuante-borda); bottom: var(--flutuante-borda); z-index: var(--z-flutuante); display: grid; gap: var(--e-3); }
.flutuante { display: grid; place-items: center; width: var(--btn-flutuante); height: var(--btn-flutuante); border-radius: var(--raio-pill); color: var(--branco); box-shadow: var(--sombra-forte); transition: transform var(--transicao); }
.flutuante:hover { transform: scale(1.06); }
.flutuante--whatsapp { background: var(--whatsapp); }
.flutuante--telefone { display: none; background: var(--azul); }
@media (min-width: 1024px) { .flutuante--telefone { display: grid; } }

/* ---------- 17. ENTRADA SUAVE AO ROLAR (só com JS) --------------------- */
.js .revela { opacity: 0; transform: translateY(var(--e-6)); transition: opacity 350ms ease, transform 350ms ease; }
.js .revela.visivel { opacity: 1; transform: none; }
.js .revela.revela--ja { transition: none; }
/* ======================================================================
   20. CONFIGURADOR
   ====================================================================== */
.config-hero { padding-block: var(--e-10) var(--e-12); background: var(--azul-profundo); color: var(--texto-claro); }
.config-hero__texto { display: grid; gap: var(--e-4); margin-top: var(--e-6); max-width: var(--container-txt); }
.config-hero .lead { color: var(--texto-claro-suave); }
.config { padding-top: var(--e-10); }
.config__layout { display: grid; gap: var(--e-6); }
.config__preview { display: grid; gap: var(--e-3); align-content: start; padding: var(--e-5); background: var(--branco); border: var(--borda) solid var(--cinza-borda); border-radius: var(--raio-md); }
.config__palco { background: var(--cinza-fundo); border-radius: var(--raio); }
.porta-svg { width: 100%; height: auto; }
.config__nota { font-size: var(--fs-label); color: var(--texto-suave); }
.config__resumo dt { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--azul); }
.config__resumo dd { font-weight: var(--fw-semi); }
.config__passos { display: grid; gap: var(--e-6); align-content: start; padding: var(--e-6); background: var(--branco); border: var(--borda) solid var(--cinza-borda); border-radius: var(--raio-md); }
.config__progresso { display: none; }
.config__passo { display: grid; gap: var(--e-4); min-width: 0; margin: 0; padding: 0; border: 0; }
.config__passo:focus { outline: none; }
.config__legend { display: grid; gap: var(--e-1); padding: 0; }
.config__n { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--azul); }
.config__t { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-compacto); }
.config__ajuda, .config__area { color: var(--texto-suave); font-size: var(--fs-pequeno); }
.config__area strong { color: var(--texto); }
.config__sub { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--texto-suave); }
.config__grupo { display: grid; gap: var(--e-3); }
.config__medidas { display: grid; gap: var(--e-4); }
.config__alerta { padding: var(--e-3) var(--e-4); font-size: var(--fs-pequeno); background: var(--ciano-16); border-left: var(--borda-forte) solid var(--azul); }
.config__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-3); padding-bottom: var(--e-4); border-bottom: var(--borda) solid var(--cinza-borda); }
.config__form.config--ultimo .config__nav { order: 1; padding-top: var(--e-4); padding-bottom: 0; border-top: var(--borda) solid var(--cinza-borda); border-bottom: 0; }
.config__form.config--ultimo .form__status { order: 2; }
.config__nav [data-avancar], .config__nav [data-enviar] { margin-left: auto; }
.config__fim { display: grid; gap: var(--e-3); justify-items: start; }
.config__aviso { padding: var(--e-4); background: var(--branco); border-left: var(--borda-forte) solid var(--azul); }
/* sem JS: tudo visível em sequência, sem navegação */
.config__form:not(.config--js) .config__nav [data-voltar], .config__form:not(.config--js) .config__nav [data-avancar] { display: none; }

/* Cartões de opção (ambiente / modelo) */
.opcoes { display: grid; gap: var(--e-3); }
.opcao { position: relative; display: flex; align-items: center; gap: var(--e-4); padding: var(--e-4); background: var(--branco); border: var(--borda) solid var(--cinza-borda); border-radius: var(--raio); cursor: pointer; transition: border-color var(--transicao), box-shadow var(--transicao), background-color var(--transicao); }
.opcao:hover { border-color: var(--azul-20); box-shadow: var(--sombra); }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao:has(input:checked) { border-color: var(--azul); background: var(--azul-06); box-shadow: inset 0 0 0 var(--borda) var(--azul); }
.opcao:has(input:focus-visible) { outline: var(--borda-forte) solid var(--azul); outline-offset: var(--borda-forte); }
.opcao__corpo { display: grid; gap: var(--e-1); flex: 1; }
.opcao__corpo small { font-size: var(--fs-pequeno); color: var(--texto-suave); }
.opcao__chev { color: var(--azul); opacity: .4; transition: opacity var(--transicao), transform var(--transicao); }
.opcao:hover .opcao__chev, .opcao:has(input:checked) .opcao__chev { opacity: 1; transform: translateX(var(--e-1)); }
.opcoes--modelos { display: flex; flex-direction: column; }
.opcao--modelo { align-items: stretch; }
.opcao__img { flex: none; width: var(--e-24); aspect-ratio: 1; overflow: hidden; border-radius: var(--raio); background: var(--cinza-fundo); }
.opcao__img img { width: 100%; height: 100%; object-fit: cover; }
.opcao--modelo .link-seta { justify-self: start; }
.opcao--modelo.sugerido::before { content: attr(data-selo); position: absolute; top: calc(var(--e-2) * -1); right: var(--e-3); padding: 0 var(--e-2); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--branco); background: var(--azul); border-radius: var(--raio); }

/* Cores */
.cores { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-3); }
.cor { position: relative; display: grid; gap: var(--e-2); justify-items: center; cursor: pointer; }
.cor input { position: absolute; opacity: 0; }
.cor__amostra { width: 100%; aspect-ratio: 1; max-width: var(--e-16); background: var(--amostra); border-radius: var(--raio-md); box-shadow: inset 0 0 0 var(--borda) var(--azul-20); transition: box-shadow var(--transicao), transform var(--transicao); }
.cor input:checked + .cor__amostra { box-shadow: 0 0 0 var(--borda-forte) var(--branco), 0 0 0 calc(var(--borda-forte) * 2) var(--azul); transform: scale(1.04); }
.cor input:focus-visible + .cor__amostra { outline: var(--borda-forte) solid var(--azul); outline-offset: var(--e-1); }
.cor__nome { font-size: var(--fs-label); font-weight: var(--fw-medio); }
.config__visor { margin-top: var(--e-2); }

@media (min-width: 768px) {
  .opcoes:not(.opcoes--modelos) { grid-template-columns: repeat(2, 1fr); }
  .config__medidas { grid-template-columns: repeat(3, 1fr); }
  .cores { grid-template-columns: repeat(8, 1fr); }
}
@media (min-width: 1024px) {
  .config__layout { grid-template-columns: 5fr 7fr; gap: var(--e-8); align-items: start; }
  .config__preview { position: sticky; top: calc(var(--e-16) + var(--e-6)); }
  .config__passos { padding: var(--e-10); }
  .config__progresso { display: flex; gap: var(--e-1); counter-reset: p; }
  .config__progresso li { flex: 1; display: grid; gap: var(--e-2); padding-top: var(--e-3); font-size: var(--fs-label); line-height: var(--lh-compacto); color: var(--texto-suave); border-top: var(--borda-forte) solid var(--cinza-borda); cursor: pointer; }
  .config__progresso li span { font-weight: var(--fw-bold); }
  .config__progresso li.feito { border-top-color: var(--azul); color: var(--texto); }
  .config__progresso li.atual { border-top-color: var(--ciano); color: var(--azul); font-weight: var(--fw-semi); }
}
.institucional .titulo-secao, .cta-produto .titulo-secao { font-size: var(--fs-titulo-longo); }

/* Configurador — opções por modelo */
.config__local { margin-top: var(--e-2); }
.config__info { padding: var(--e-3) var(--e-4); font-size: var(--fs-pequeno); background: var(--azul-06); border-left: var(--borda-forte) solid var(--azul); }
ul.config__info { display: grid; gap: var(--e-1); }
[data-visor-702] li { color: var(--texto-suave); }
[data-visor-702] li.ativo { font-weight: var(--fw-semi); color: var(--azul); }
[data-visor-702] li.ativo::before { content: "› "; color: var(--azul); }
.cor__amostra--consulta { background: repeating-linear-gradient(45deg, var(--cinza-fundo) 0 var(--e-1), var(--cinza-borda) var(--e-1) var(--e-2)); }
.cores { grid-template-columns: repeat(auto-fill, minmax(var(--e-20), 1fr)); }
@media (min-width: 768px) { .cores { grid-template-columns: repeat(auto-fill, minmax(var(--e-20), 1fr)); } }

/* ======================================================================
   21. BRAND BOOK 2026
   Títulos ExtraBold em Azul Títulos; títulos de seção em Light com a
   palavra-chave em Bold Italic Azul Destaque; CTA em Azul Destaque;
   seta dupla (»); Amarelo Destaque só em números sobre fundo escuro.
   ====================================================================== */
h1, .hero-produto h1, .config-hero h1 { font-weight: var(--fw-titulo); }
h2, h3, h4 { color: var(--titulo); }
.secao--escura h2, .secao--profunda h2, .secao--escura h3, .secao--profunda h3, .secao--escura h4, .secao--profunda h4,
.hero h1, .hero-produto h1, .hero-simples h1, .config-hero h1, .promo-config h2, .cta-produto h2, .aplicacao__t, .tile__t, .mega h2, .mega h3 { color: var(--branco); }
.aplicacao__t--sem { color: var(--titulo); }
.titulo-secao { font-weight: var(--fw-light); letter-spacing: var(--ls-titulo); }
.titulo-secao em, h1 em { font-style: italic; font-weight: var(--fw-bold); color: var(--azul); }
.secao--escura .titulo-secao em, .secao--profunda .titulo-secao em, .promo-config .titulo-secao em, .cta-produto .titulo-secao em, h1 em { color: var(--ciano); }

.btn--primario { background: var(--azul); }
.btn--primario:hover { background: var(--azul-hover); }
.btn--contorno { border-color: var(--azul); color: var(--azul); }
.btn--contorno:hover { background: var(--azul); color: var(--branco); }
.link-seta, .credenciado a, .chip input:checked + span { color: var(--azul); }
.chip input:checked + span { color: var(--branco); background: var(--azul); border-color: var(--azul); }

.eyebrow::before { width: var(--e-4); -webkit-mask-image: var(--seta-dupla-svg); mask-image: var(--seta-dupla-svg); }
.hero__marca, .rodape::after { -webkit-mask-image: var(--seta-dupla-svg); mask-image: var(--seta-dupla-svg); background: var(--branco-08); }

.dif__n, .passo__num { -webkit-text-stroke-color: var(--ciano); }
.estat__numero, .numeros__n { color: var(--branco); }
.estat__item::after, .numeros__lista li::after { content: ""; display: block; width: var(--e-6); height: var(--borda-forte); margin-top: var(--e-2); background: var(--ciano); order: 3; }

.rodape__assinatura { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: lowercase; color: var(--branco); }
/* Comparativo: 1ª coluna fixa ao rolar no celular */
.tabela--comparativo { min-width: 64rem; font-size: var(--fs-pequeno); }
.tabela--comparativo caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tabela--comparativo tbody th[scope="row"] { position: sticky; left: 0; z-index: var(--z-base); width: auto; min-width: var(--e-32); background: inherit; font-weight: var(--fw-bold); }
.tabela--comparativo tbody tr { background: var(--branco); }
.tabela--comparativo tbody tr:nth-child(even) { background: var(--cinza-fundo); }
.tabela--comparativo a { color: var(--azul); }
.tabela--comparativo td { font-weight: var(--fw-regular); }
.notas { display: grid; gap: var(--e-1); margin-top: var(--e-4); font-size: var(--fs-pequeno); color: var(--texto-suave); }

/* Resumo (GEO): resposta direta logo abaixo do topo */
.resumo { padding-block: var(--e-10) 0; }
.resumo__caixa--secao { margin-top: var(--e-12); }
.resumo__caixa { display: grid; gap: var(--e-2); max-width: var(--container-txt); padding: var(--e-6); background: var(--azul-06); border-left: var(--borda-forte) solid var(--azul); }
.resumo__rotulo { font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--azul); }
.resumo__texto { font-size: var(--fs-lead); line-height: var(--lh-corpo); color: var(--texto); }
.resumo + .destaques-secao, .numeros + .subnav + .destaques-secao { padding-top: var(--e-10); }

/* Artigo do VisoNews */
.artigo__meta { display: flex; flex-wrap: wrap; gap: var(--e-4); font-size: var(--fs-pequeno); color: var(--texto-claro-suave); }
.artigo__grade { display: grid; gap: var(--e-12); }
.artigo__capa { margin-bottom: var(--e-10); padding-right: var(--moldura-desloc); padding-bottom: var(--moldura-desloc); }
.artigo__corpo { display: grid; gap: var(--e-5); max-width: var(--medida); }
.artigo__corpo h2 { margin-top: var(--e-6); font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.artigo__corpo h3 { margin-top: var(--e-4); font-size: var(--fs-corpo); }
.artigo__corpo ul, .artigo__corpo ol { display: grid; gap: var(--e-2); padding-left: var(--e-6); list-style: revert; }
.artigo__corpo blockquote { margin: 0; padding: var(--e-4) var(--e-6); font-size: var(--fs-lead); font-style: italic; border-left: var(--borda-forte) solid var(--ciano); background: var(--cinza-fundo); }
.artigo__fig img { width: 100%; }
.artigo__fig figcaption { margin-top: var(--e-2); font-size: var(--fs-pequeno); color: var(--texto-suave); }
.artigo__rel { display: grid; gap: var(--e-3); align-content: start; padding: var(--e-6); background: var(--cinza-fundo); border-top: var(--borda-forte) solid var(--azul); }
.artigo__rel ul { display: grid; gap: var(--e-2); }
@media (min-width: 1024px) {
  .artigo__grade { grid-template-columns: 8fr 4fr; }
  .artigo__rel { position: sticky; top: calc(var(--e-16) + var(--e-6)); }
}

/* Cases */
.case__grade { display: grid; gap: var(--e-12); max-width: var(--container-txt); }
.case__bloco { display: grid; gap: var(--e-5); }
.case__citacao { margin: 0; padding: var(--e-8); color: var(--branco); background: var(--azul-profundo); border-left: var(--borda-forte) solid var(--ciano); }
.case__citacao p { font-size: var(--fs-lead); font-style: italic; }
.case__citacao cite { display: block; margin-top: var(--e-3); font-size: var(--fs-pequeno); font-style: normal; color: var(--ciano); }
.card__destaque { font-size: var(--fs-h3); font-weight: var(--fw-titulo); color: var(--azul); }
.numeros__rotulo { padding-top: var(--e-6); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ciano); }
.numeros__nota { max-width: var(--medida); padding-bottom: var(--e-6); font-size: var(--fs-label); color: var(--texto-claro-suave); }
.case__titulo { font-size: var(--fs-h3); font-weight: var(--fw-semi); color: var(--branco); }
.case__fontes { padding-top: var(--e-6); border-top: var(--borda) solid var(--cinza-borda); }
/* Atalhos (Suporte) */
.atalho { display: grid; gap: var(--e-3); align-content: start; height: 100%; padding: var(--e-6); background: var(--branco); border-top: var(--borda-forte) solid var(--azul); transition: box-shadow var(--transicao), transform var(--transicao); }
.secao:not(.secao--clara) .atalho { background: var(--cinza-fundo); }
.atalho:hover { box-shadow: var(--sombra-forte); transform: translateY(var(--elevar)); }
.atalho__t { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.atalho p { font-size: var(--fs-pequeno); color: var(--texto-suave); }
.atalho .link-seta { margin-top: auto; }
.artigo .hero-simples h1, .case-hero h1 { font-size: var(--fs-titulo-artigo); max-width: var(--container-txt); }
.artigo__capa .moldura > img { aspect-ratio: auto; object-fit: contain; background: var(--cinza-fundo); }
/* Galeria com 5 fotos: a primeira ocupa duas linhas e fecha a grade 3 × 2 */
@media (min-width: 1024px) {
  .galeria li:first-child:nth-last-child(5) { grid-row: span 2; }
  .galeria li:first-child:nth-last-child(5) a { height: 100%; aspect-ratio: auto; }
}

/* ---------- Banner de cookies (LGPD + Consent Mode) ------------------
   Sobreposição real (regra 3). Layout simples: fundo branco, texto e botões no azul da navbar.
   Mobile: faixa inteira no rodapé da tela; desktop: cartão no canto inferior esquerdo. */
.cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-cookies); display: grid; gap: var(--e-3); padding: var(--e-5) var(--gutter); background: var(--branco); color: var(--azul); box-shadow: var(--sombra-forte); }
.cookies__t { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--azul); }
.cookies__d { font-size: var(--fs-pequeno); color: var(--azul); }
.cookies__d a { color: var(--azul); text-decoration: underline; }
.cookies__rot { margin-bottom: var(--e-2); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--azul); }
.cookies__prefs ul { display: grid; gap: var(--e-2); }
.cookies__cat { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-3); border: var(--borda) solid var(--azul); cursor: pointer; }
.cookies__cat input { flex: none; width: var(--e-5); height: var(--e-5); margin-top: var(--e-1); accent-color: var(--azul); }
.cookies__cat span { display: grid; gap: var(--e-1); font-size: var(--fs-pequeno); color: var(--azul); }
.cookies__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.cookies__bt { flex: 1 1 auto; min-height: var(--e-10); padding: var(--e-2) var(--e-4); font: inherit; font-size: var(--fs-pequeno); font-weight: var(--fw-semi); color: var(--azul); background: var(--branco); border: var(--borda) solid var(--azul); cursor: pointer; }
.cookies__bt--cheio { color: var(--branco); background: var(--azul); }
.cookies__bt:hover { opacity: 0.85; }
.cookies__bt:focus-visible { outline: var(--borda-forte) solid var(--azul); outline-offset: var(--borda); }
.rodape__cookies { padding: 0; background: none; border: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.rodape__cookies:hover { color: var(--ciano); }
@media (min-width: 768px) {
  .cookies { left: var(--e-6); right: auto; bottom: var(--e-6); max-width: var(--cookies-max); padding: var(--e-6); }
}

/* ---------- Entrada do topo de produto: fade in suave --------------- */
@keyframes topo-entra { from { opacity: 0; } }
.hero-produto { animation: topo-entra var(--entrada-dur) var(--entrada-curva) both; }
@media (prefers-reduced-motion: reduce) { .hero-produto { animation: none; } }

/* Downloads: janela do formulário curto */
.baixar { width: min(100% - var(--e-8), var(--janela-largura)); max-height: calc(100dvh - var(--e-8)); padding: var(--e-6); border: 0; border-radius: var(--raio-md); background: var(--branco); color: var(--texto); }
.baixar::backdrop { background: var(--veu-janela); }
.baixar .form { display: grid; gap: var(--e-4); }
.baixar__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); }
.baixar__t { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-compacto); }
.baixar__fechar { flex: none; width: var(--e-10); height: var(--e-10); font-size: var(--fs-h3); line-height: var(--lh-titulo); color: var(--texto-suave); background: var(--cinza-fundo); border: 0; border-radius: var(--raio); cursor: pointer; }
.baixar__material { font-weight: var(--fw-semi); color: var(--azul); }
.baixar__texto { font-size: var(--fs-pequeno); color: var(--texto-suave); }
@media (min-width: 768px) {
  .baixar { padding: var(--e-8); }
}

/* Opcionais: números sobre a ilustração (badge sobre imagem — CLAUDE.md permite absolute aqui) */
.marcadores { position: relative; }
.marcador { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: var(--marcador); height: var(--marcador); font-size: var(--fs-pequeno); font-weight: var(--fw-bold); color: var(--branco); background: var(--azul); border: var(--borda-forte) solid var(--branco); border-radius: 50%; box-shadow: var(--sombra); transform: translate(-50%, -50%); }
@media (min-width: 768px) {
  .marcador { width: var(--marcador-lg); height: var(--marcador-lg); }
}
/* Seções brancas em sequência: uma transição suave de cinza para branco no topo */
.secao--divisor { background: linear-gradient(180deg, var(--cinza-fundo), var(--branco)) top / 100% var(--divisor-altura) no-repeat, var(--branco); }
/* Seta para rolar: indica que a página continua abaixo */
.seta-baixo { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); width: max-content; margin: var(--e-10) auto 0; font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--azul); text-decoration: none; }
.seta-baixo svg { animation: seta-desce 1.6s ease-in-out infinite; }
@keyframes seta-desce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--e-2)); } }
@media (prefers-reduced-motion: reduce) { .seta-baixo svg { animation: none; } }

.moldura--quadrada > img { aspect-ratio: var(--proporcao-quadrada); }
@media (min-width: 1024px) {
  .duas-col--img-larga { grid-template-columns: 2fr 3fr; }
}

/* Caixa de consentimento (Trabalhe conosco) */
.form__aceite { display: flex; align-items: flex-start; gap: var(--e-3); font-size: var(--fs-pequeno); color: var(--texto-suave); cursor: pointer; }
.form__aceite input { flex: none; width: var(--e-5); height: var(--e-5); margin-top: var(--e-1); accent-color: var(--azul); }

/* Artigos: link ou palavra longa quebra dentro da coluna em vez de alargar a página no celular */
.artigo__corpo { overflow-wrap: anywhere; }
.artigo__grade > * { min-width: 0; }
/* Setores com 3 cards: 3 colunas no desktop, sem buraco ao lado do último */
@media (min-width: 1024px) {
  .aplicacoes:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}

/* Vídeo em loop (animações do Motion, barreira): sem controles; no celular, toque para tocar/pausar */
.video--loop { background: var(--cinza-fundo); cursor: pointer; }
.video--loop::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: var(--e-12); height: var(--e-12); border-radius: 50%; background: var(--azul) var(--play-svg) center / 40% no-repeat; transform: translate(-50%, -50%); opacity: 0; transition: opacity var(--transicao); pointer-events: none; }
.video--loop.parado::after { opacity: .9; }

/* Vídeo com texto dentro (animações): a mídia ocupa 3/5 da largura para dar para ler */
@media (min-width: 1024px) {
  .duas-col--midia-larga { grid-template-columns: 2fr 3fr; align-items: center; }
  .duas-col--midia-larga.duas-col--invertida { grid-template-columns: 3fr 2fr; }
}

/* Lista numerada com ilustração: no celular a imagem vem logo depois do título, antes dos itens (chama a atenção) */
.lista-img { gap: var(--e-6); }
.lista-img .duas-col__texto { display: contents; }
.lista-img .duas-col__texto > h2 { order: 1; }
.lista-img > .duas-col__img { order: 2; }
.lista-img .duas-col__texto > :not(h2) { order: 3; }
@media (min-width: 1024px) {
  .lista-img { gap: var(--e-16); }
  .lista-img .duas-col__texto { display: grid; }
  .lista-img > .duas-col__img, .lista-img .duas-col__texto > * { order: 0; }
}

/* Linha de baixo das seções com animação: mídia (vídeo do Roberto ou foto) + resumo lado a lado */
.midia-resumo { margin-top: var(--e-12); }
.midia-resumo__lado { display: grid; gap: var(--e-4); align-content: center; }
.midia-resumo__lado .resumo__caixa--secao { margin: 0; max-width: none; }