/* SAL · o CSS do site inteiro, na marca vermelha (vermelho, grafite e Cloud Dancer, 13/11/2026).
   Ordem: fontes, tokens, componentes do design system (sal-), o site (s-), a home (b-),
   as páginas internas (p-, a-) e, no fim, as peças que só existem no WordPress.
   O blog tem um arquivo à parte (blog.css) e a agenda outro (agenda.css). */
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/SchibstedGrotesk-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/Newsreader-Italic-var.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
/* Desenho: vitrine clara. Cloud Dancer no fundo, branco no que se toca, um bloco vermelho no meio da página
   e outro no fim, grafite só no rodapé. A lâmpada do logo, grande e em tom sobre tom, despejando os grãos de sal, é o único ornamento. */
:root{
--fundo:#F0EEE9;
--fundo-2:#E7E4DD;
--superficie:#FFFFFF;
--linha:#DDD9D1;
--linha-forte:#7D7671;
--tinta:#1E1A1A;
--tinta-suave:#5F5957;
--vermelho:#D71920;
--vermelho-escuro:#B71C1C;
--vermelho-texto:#B71C1C;
--vermelho-veu:#FBE3E2;
--sobre-vermelho:#FFFFFF;
--grafite:#1E1A1A;
--sobre-grafite:#F0EEE9;
--sobre-grafite-suave:#B5AEA9;
--linha-grafite:#3D3737;
--branco:#FFFFFF;
--aviso:#9A4A12;
--aviso-veu:#FBEBDD;
--sucesso:#1F6B45;
--sucesso-veu:#E3F1E8;
--foco:#1E1A1A;
--sombra-flutuante:0 16px 40px #1e1a1a2e;
--sombra-foto:0 20px 60px #1e1a1a24;
--espaco-1:4px;
--espaco-2:8px;
--espaco-3:12px;
--espaco-4:16px;
--espaco-5:24px;
--espaco-6:32px;
--espaco-7:48px;
--espaco-8:64px;
--espaco-9:96px;
--raio-sm:12px;
--raio:16px;
--raio-lg:24px;
--raio-xl:40px;
--raio-pill:999px;
--largura-max:1160px;
--largura-leitura:42rem;
--calha:clamp(1.25rem, 4vw, 2.5rem);
--secao:clamp(4rem, 8vw, 6.5rem);
--font-display:"Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
--font-destaque:"Newsreader", Georgia, "Times New Roman", serif;
--font-corpo:"Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
}
:root { color-scheme: light; }

/* ---------- design system: components/bundle.css, sem alteração ---------- */
/* SAL: componentes em CSS puro. Usa as variáveis dos tokens. Sem JavaScript. */
body { margin: 0; font-family: var(--font-corpo); font-size: 16px; line-height: 1.6; background: var(--fundo); color: var(--tinta); -webkit-font-smoothing: antialiased; }

/* palco das prévias */
.sal-palco { display: flex; flex-wrap: wrap; gap: var(--espaco-4); align-items: center; padding: var(--espaco-5); box-sizing: border-box; }
.sal-palco--coluna { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.sal-palco--vermelho { background: var(--vermelho); --foco: var(--branco); }
.sal-palco--grafite { background: var(--grafite); --foco: var(--sobre-grafite); }
.sal-palco--branco { background: var(--superficie); }

/* ícone em linha */
.sal-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* título, destaque, lead e rótulo */
.sal-titulo { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; font-size: clamp(2rem, 1.2rem + 2.8vw, 2.75rem); color: var(--tinta); text-wrap: balance; }
.sal-titulo--hero { font-size: clamp(2.4rem, 1.1rem + 5.2vw, 4rem); line-height: 1.04; }
.sal-titulo--2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2rem); letter-spacing: -.03em; line-height: 1.12; }
.sal-titulo--3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.sal-titulo em, .sal-destaque { font-family: var(--font-destaque); font-style: italic; font-weight: 500; letter-spacing: -.02em; color: var(--vermelho); }
.sal-lead { margin: 0; font-size: clamp(1.06rem, 1rem + .4vw, 1.25rem); line-height: 1.5; color: var(--tinta-suave); max-width: var(--largura-leitura); }
.sal-rotulo { margin: 0; font: 700 .75rem/1.2 var(--font-corpo); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); }

/* botão */
.sal-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2); min-height: 48px; padding: 0 var(--espaco-5); box-sizing: border-box; border-radius: var(--raio-pill); border: 1.5px solid transparent; font: 600 .9375rem/1.1 var(--font-corpo); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .26s cubic-bezier(.22, 1, .36, 1), background-color .14s, border-color .14s, color .14s; }
.sal-btn:hover { transform: translateY(-2px); }
.sal-btn:focus-visible, .sal-link:focus-visible, .sal-cartao:focus-visible, .sal-pergunta summary:focus-visible, .sal-cabecalho__menu a:focus-visible, .sal-rodape a:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.sal-btn--primario { background: var(--vermelho); color: var(--sobre-vermelho); }
.sal-btn--primario:hover { background: var(--vermelho-escuro); }
.sal-btn--secundario { background: var(--superficie); border-color: var(--linha-forte); color: var(--tinta); }
.sal-btn--secundario:hover { border-color: var(--tinta); }
.sal-btn--invertido { background: var(--branco); color: var(--vermelho-escuro); }
.sal-btn--contorno { background: transparent; border-color: var(--sobre-vermelho); color: var(--sobre-vermelho); }
.sal-btn--contorno:hover { background: var(--branco); color: var(--vermelho-escuro); }
.sal-btn--pequeno { min-height: 40px; padding: 0 20px; font-size: .875rem; }
.sal-btn .sal-ic { width: 18px; height: 18px; }

/* link de ação */
.sal-link { display: inline-flex; align-items: center; gap: 6px; font: 600 .9375rem/1.2 var(--font-corpo); color: var(--vermelho-texto); text-decoration: none; border-radius: 4px; }
.sal-link .sal-ic { width: 16px; height: 16px; stroke-width: 2; transition: transform .26s cubic-bezier(.22, 1, .36, 1); }
.sal-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.sal-link:hover .sal-ic { transform: translateX(4px); }

/* etiqueta */
.sal-etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--raio-pill); font: 600 .8125rem/1.2 var(--font-corpo); background: var(--vermelho-veu); color: var(--vermelho-texto); }
.sal-etiqueta--cheia { background: var(--vermelho); color: var(--sobre-vermelho); }
.sal-etiqueta--neutra { background: var(--fundo-2); color: var(--tinta); }

/* campo de formulário */
.sal-campo { display: grid; gap: 6px; min-width: 0; }
.sal-campo__rotulo { font: 600 .875rem/1.3 var(--font-corpo); color: var(--tinta); }
.sal-campo__entrada { font: 400 1rem/1.3 var(--font-corpo); color: var(--tinta); background: var(--superficie); border: 1.5px solid var(--linha-forte); border-radius: var(--raio-sm); padding: 13px 14px; width: 100%; min-width: 0; box-sizing: border-box; }
.sal-campo__entrada::placeholder { color: var(--tinta-suave); opacity: 1; }
.sal-campo__entrada:focus { outline: 3px solid var(--foco); outline-offset: 1px; border-color: var(--tinta); }
.sal-campo__ajuda { display: flex; gap: 6px; align-items: flex-start; font: 400 .8125rem/1.4 var(--font-corpo); color: var(--tinta-suave); }
.sal-campo__ajuda .sal-ic { width: 16px; height: 16px; margin-top: 1px; }
.sal-campo--erro .sal-campo__entrada { border-color: var(--aviso); background: var(--aviso-veu); }
.sal-campo--erro .sal-campo__ajuda { color: var(--aviso); font-weight: 500; }

/* aviso */
.sal-aviso { display: flex; gap: var(--espaco-3); align-items: flex-start; padding: var(--espaco-4); border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--linha); color: var(--tinta); font-size: .9375rem; line-height: 1.5; }
.sal-aviso .sal-ic { margin-top: 2px; }
.sal-aviso b { display: block; }
.sal-aviso--erro { background: var(--aviso-veu); border-color: transparent; }
.sal-aviso--erro .sal-ic { color: var(--aviso); }
.sal-aviso--sucesso { background: var(--sucesso-veu); border-color: transparent; }
.sal-aviso--sucesso .sal-ic { color: var(--sucesso); }

/* cartão de serviço e grade */
.sal-grade { display: grid; gap: var(--espaco-4); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.sal-cartao { display: flex; flex-direction: column; gap: var(--espaco-3); padding: var(--espaco-5); background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-lg); color: var(--tinta); text-decoration: none; min-width: 0; box-sizing: border-box; transition: border-color .14s, transform .26s cubic-bezier(.22, 1, .36, 1); }
a.sal-cartao:hover { border-color: var(--tinta); transform: translateY(-2px); }
.sal-cartao__icone { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--raio-sm); background: var(--vermelho-veu); color: var(--vermelho-texto); }
.sal-cartao__icone .sal-ic { width: 24px; height: 24px; }
.sal-cartao__titulo { margin: var(--espaco-1) 0 0; font: 700 1.25rem/1.2 var(--font-display); letter-spacing: -.02em; }
.sal-cartao__texto { margin: 0; flex: 1; color: var(--tinta-suave); font-size: .9375rem; line-height: 1.55; }
.sal-cartao--vermelho { background: var(--vermelho); border-color: var(--vermelho); color: var(--sobre-vermelho); --foco: var(--tinta); }
.sal-cartao--vermelho .sal-cartao__icone { background: var(--branco); color: var(--vermelho-escuro); }
.sal-cartao--vermelho .sal-cartao__texto, .sal-cartao--vermelho .sal-link { color: var(--sobre-vermelho); }
a.sal-cartao--vermelho:hover { border-color: var(--vermelho-escuro); background: var(--vermelho-escuro); }

/* lista com check */
.sal-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-3); }
.sal-lista li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--espaco-3); align-items: start; line-height: 1.5; }
.sal-lista .sal-ic { margin-top: 2px; color: var(--vermelho-texto); stroke-width: 2.2; }

/* números de prova */
.sal-numeros { list-style: none; margin: 0; padding: 0; display: grid; }
.sal-numeros li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--espaco-4); align-items: baseline; padding: var(--espaco-4) 0; border-top: 1px solid var(--linha); }
.sal-numeros li:last-child { border-bottom: 1px solid var(--linha); }
.sal-numeros b { font: 800 2rem/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sal-numeros span { color: var(--tinta-suave); font-size: .9375rem; line-height: 1.45; }

/* etapas em sequência */
.sal-etapas { list-style: none; margin: 0; padding: 0; counter-reset: etapa; display: grid; gap: var(--espaco-5); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.sal-etapas li { counter-increment: etapa; padding-top: var(--espaco-4); border-top: 2px solid var(--tinta); min-width: 0; }
.sal-etapas li::before { content: counter(etapa, decimal-leading-zero); font: italic 500 1.75rem/1 var(--font-destaque); color: var(--vermelho); }
.sal-etapas b { display: block; margin-top: var(--espaco-2); font: 700 1.125rem/1.25 var(--font-display); letter-spacing: -.02em; }
.sal-etapas span { display: block; margin-top: 6px; color: var(--tinta-suave); font-size: .9375rem; line-height: 1.5; }

/* pergunta frequente */
.sal-pergunta { border-top: 1px solid var(--linha); }
.sal-pergunta:last-of-type { border-bottom: 1px solid var(--linha); }
.sal-pergunta summary { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-4); padding: var(--espaco-4) 0; cursor: pointer; list-style: none; font: 700 1.0625rem/1.35 var(--font-display); letter-spacing: -.01em; border-radius: 4px; }
.sal-pergunta summary::-webkit-details-marker { display: none; }
.sal-pergunta summary .sal-ic { color: var(--vermelho-texto); transition: transform .26s cubic-bezier(.22, 1, .36, 1); }
.sal-pergunta[open] summary .sal-ic { transform: rotate(45deg); }
.sal-pergunta p { margin: 0; padding: 0 0 var(--espaco-4); color: var(--tinta-suave); max-width: var(--largura-leitura); line-height: 1.6; }

/* foto e cartão flutuante */
.sal-foto { position: relative; border-radius: var(--raio-lg); overflow: hidden; background: var(--fundo-2); box-shadow: var(--sombra-foto); }
.sal-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sal-flutuante { display: inline-flex; align-items: center; gap: var(--espaco-3); padding: 12px 16px 12px 12px; background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra-flutuante); color: var(--tinta); }
.sal-flutuante__icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--raio-sm); background: var(--vermelho-veu); color: var(--vermelho-texto); flex: none; }
.sal-flutuante__icone--cheio { background: var(--vermelho); color: var(--sobre-vermelho); }
.sal-flutuante b { display: block; font: 700 .9375rem/1.25 var(--font-corpo); }
.sal-flutuante small { display: block; font-size: .8125rem; line-height: 1.3; color: var(--tinta-suave); }
.sal-flutuante__barras { display: flex; align-items: flex-end; gap: 4px; height: 30px; margin-left: 6px; }
.sal-flutuante__barras i { display: block; width: 6px; border-radius: 3px; background: var(--vermelho); transform-origin: bottom; }
.sal-flutuante__barras i:nth-child(1) { height: 36%; }
.sal-flutuante__barras i:nth-child(2) { height: 55%; }
.sal-flutuante__barras i:nth-child(3) { height: 74%; }
.sal-flutuante__barras i:nth-child(4) { height: 100%; }

/* bloco de chamada */
.sal-bloco { display: grid; gap: var(--espaco-5); justify-items: start; padding: clamp(2rem, 5vw, 3.5rem); border-radius: var(--raio-lg); box-sizing: border-box; }
.sal-bloco--centro { justify-items: center; text-align: center; }
.sal-bloco--sangrado { border-radius: 0; }
.sal-bloco--vermelho { background: var(--vermelho); color: var(--sobre-vermelho); --foco: var(--branco); }
.sal-bloco--vermelho .sal-titulo, .sal-bloco--vermelho .sal-titulo em, .sal-bloco--vermelho .sal-lead, .sal-bloco--vermelho .sal-rotulo { color: inherit; }
.sal-bloco--branco { background: var(--superficie); border: 1px solid var(--linha); }
.sal-bloco__acoes { display: flex; gap: var(--espaco-3); flex-wrap: wrap; }

/* cabeçalho */
.sal-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-5); padding: var(--espaco-3) var(--calha); background: var(--superficie); border-bottom: 1px solid var(--linha); }
.sal-cabecalho__logo { display: block; height: 44px; width: auto; }
.sal-cabecalho__menu { display: flex; gap: clamp(12px, 1.6vw, 24px); list-style: none; margin: 0; padding: 0; }
.sal-cabecalho__menu a { display: block; padding: 8px 0; white-space: nowrap; font: 500 .9375rem/1 var(--font-corpo); color: var(--tinta); text-decoration: none; border-bottom: 2px solid transparent; }
.sal-cabecalho__menu a:hover, .sal-cabecalho__menu a[aria-current="page"] { border-bottom-color: var(--vermelho); }

/* rodapé */
.sal-rodape { background: var(--grafite); color: var(--sobre-grafite); padding: var(--espaco-7) var(--calha) var(--espaco-5); --foco: var(--sobre-grafite); }
.sal-rodape__topo { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--espaco-6); }
.sal-rodape__logo { display: block; height: 48px; width: auto; margin-bottom: var(--espaco-4); }
.sal-rodape p { margin: 0; color: var(--sobre-grafite-suave); font-size: .9375rem; line-height: 1.5; max-width: 22rem; }
.sal-rodape h4 { margin: 0 0 var(--espaco-3); font: 700 .75rem/1.2 var(--font-corpo); letter-spacing: .16em; text-transform: uppercase; color: var(--sobre-grafite); }
.sal-rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-2); }
.sal-rodape a { color: var(--sobre-grafite-suave); font-size: .9375rem; text-decoration: none; border-radius: 4px; }
.sal-rodape a:hover { color: var(--sobre-grafite); }
.sal-rodape__base { display: flex; justify-content: space-between; gap: var(--espaco-4); flex-wrap: wrap; margin-top: var(--espaco-7); padding-top: var(--espaco-4); border-top: 1px solid var(--linha-grafite); color: var(--sobre-grafite-suave); font-size: .8125rem; }

@media (max-width: 900px) {
  .sal-cabecalho__menu { display: none; }
}
@media (max-width: 760px) {
  .sal-rodape__topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sal-rodape__topo > :first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .sal-btn, .sal-cartao, .sal-link .sal-ic, .sal-pergunta summary .sal-ic { transition: none; }
  .sal-btn:hover, a.sal-cartao:hover { transform: none; }
}

/* ---------- o site ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--ab-bg); }
body.rolou::before { background: var(--superficie); }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }

.s-cx { max-width: calc(var(--largura-max) + 2 * var(--calha)); margin-inline: auto; padding-left: max(var(--calha), env(safe-area-inset-left, 0px)); padding-right: max(var(--calha), env(safe-area-inset-right, 0px)); }
.s-sec { padding-block: var(--secao); }
.s-sec--branca { background: var(--superficie); border-block: 1px solid var(--linha); }
.s-sec--justa { padding-top: 0; }
.s-cab { display: grid; gap: var(--espaco-4); max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.s-cab--linha { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--espaco-5); max-width: none; }
.s-etapa { display: flex; align-items: baseline; gap: var(--espaco-3); }
.s-etapa em { font: italic 500 1.75rem/1 var(--font-destaque); letter-spacing: 0; text-transform: none; color: var(--vermelho); }

/* cores da abertura: vermelha por padrão, clara como alternativa de teste */
body { --ab-bg: var(--vermelho); --ab-fg: var(--sobre-vermelho); --ab-suave: var(--sobre-vermelho); --ab-em: var(--sobre-vermelho); --ab-foco: var(--branco); --ab-marca: var(--vermelho-escuro); --ab-grao: var(--sobre-vermelho); }
/* abertura clara: nas páginas internas (functions.php põe a classe no body) */
body.ab-clara { --ab-bg: var(--fundo); --ab-fg: var(--tinta); --ab-suave: var(--tinta-suave); --ab-em: var(--vermelho); --ab-foco: var(--tinta); --ab-marca: var(--linha); --ab-grao: var(--vermelho); }

/* topo: da cor da abertura enquanto a página está no alto, branco depois de rolar */
.s-topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--ab-bg); color: var(--ab-fg); border-bottom: 1px solid transparent; --foco: var(--ab-foco); transition: background-color .26s cubic-bezier(.22, 1, .36, 1), color .26s, border-color .26s; }
.s-topo.rolou { background: var(--superficie); color: var(--tinta); border-bottom-color: var(--linha); --foco: var(--tinta); }
.s-topo__dentro { position: relative; display: flex; align-items: center; gap: var(--espaco-5); min-height: 72px; }
.s-marca { display: block; flex: none; max-width: 120px; overflow: hidden; border-radius: 4px; transition: max-width .26s cubic-bezier(.22, 1, .36, 1), opacity .26s, margin .26s; }
.s-marca img { height: 44px; width: auto; max-width: none; }
.s-marca .l-tinta { display: none; }
.s-topo.rolou .s-marca .l-clara, body.ab-clara .s-marca .l-clara { display: none; }
.s-topo.rolou .s-marca .l-tinta, body.ab-clara .s-marca .l-tinta { display: block; }
.s-nav { display: flex; align-items: center; gap: var(--espaco-1); }
.s-nav__grupo { position: relative; }
.s-nav__grupo--mega { position: static; }
.s-nav__item { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0; border-radius: var(--raio-pill); background: none; color: inherit; font: 500 .9375rem/1 var(--font-corpo); text-decoration: none; cursor: pointer; transition: background-color .14s; }
.s-nav__item:hover, .s-nav__item[aria-expanded="true"] { background: color-mix(in srgb, currentColor 12%, transparent); }
.s-nav__item .sal-ic { width: 16px; height: 16px; stroke-width: 2; transition: transform .26s cubic-bezier(.22, 1, .36, 1); }
.s-nav__item[aria-expanded="true"] .sal-ic { transform: rotate(180deg); }
.s-nav__item:focus-visible, .s-zap:focus-visible, .s-marca:focus-visible, .s-menu-btn:focus-visible, .s-painel a:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.s-topo__acoes { margin-left: auto; display: flex; align-items: center; gap: var(--espaco-3); }
.s-zap { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--raio-pill); color: inherit; font: 600 .9375rem/1 var(--font-corpo); text-decoration: none; white-space: nowrap; }
.s-zap:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.s-topo:not(.rolou) .s-agenda { background: var(--branco); color: var(--vermelho-escuro); }
.s-painel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; background: var(--superficie); color: var(--tinta); border: 1px solid var(--linha); border-radius: var(--raio-lg); box-shadow: var(--sombra-flutuante); padding: var(--espaco-5); --foco: var(--tinta); }
.s-painel--mega { right: 0; padding: var(--espaco-6); }
.s-painel--pequeno { width: 340px; display: grid; gap: var(--espaco-1); }
.s-painel a { display: block; padding: 8px 0; border-radius: 4px; color: var(--tinta); font: 500 1rem/1.3 var(--font-corpo); text-decoration: none; }
.s-painel a:hover { color: var(--vermelho-texto); }
.s-painel a span { display: block; margin-top: 2px; color: var(--tinta-suave); font-size: .875rem; font-weight: 400; }
.s-painel a.sal-link { display: inline-flex; color: var(--vermelho-texto); }
.s-mega { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-6); }
.s-mega .s-etapa { margin-bottom: var(--espaco-3); }
.s-mega__pe { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-4) var(--espaco-6); flex-wrap: wrap; margin-top: var(--espaco-5); padding-top: var(--espaco-4); border-top: 1px solid var(--linha); }
.s-mega__parceira { display: flex; align-items: center; gap: var(--espaco-4); flex-wrap: wrap; }
.s-menu-btn { display: none; place-items: center; margin-left: auto; width: 44px; height: 44px; border-radius: var(--raio-sm); border: 1.5px solid currentColor; background: none; color: inherit; cursor: pointer; }
.s-gaveta { background: var(--superficie); color: var(--tinta); border-top: 1px solid var(--linha); padding-block: var(--espaco-2) var(--espaco-5); max-height: calc(100vh - 80px); overflow-y: auto; --foco: var(--tinta); }
.s-gaveta .s-etapa { margin: var(--espaco-4) 0 var(--espaco-1); }
.s-gaveta a.s-gaveta__link { display: block; padding: 11px 0; font: 500 1.0625rem/1.25 var(--font-corpo); color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--linha); }
.s-gaveta__acoes { display: grid; gap: var(--espaco-3); margin-top: var(--espaco-5); }
@media (min-width: 1041px) {
  .s-gaveta { display: none; }
}
@media (max-width: 1040px) {
  .s-nav, .s-topo__acoes { display: none; }
  .s-menu-btn { display: grid; }
  .s-topo.aberto { background: var(--superficie); color: var(--tinta); border-bottom-color: var(--linha); --foco: var(--tinta); }
  .s-topo.aberto .s-marca .l-clara { display: none; }
  .s-topo.aberto .s-marca .l-tinta { display: block; }
}

/* abertura: bloco de cor de ponta a ponta. À esquerda o logo, o título com o fim digitado e os botões;
   à direita, o filme: grãos de sal que caem e formam o logo e os quatro serviços. */
.s-abre { position: relative; overflow: hidden; background: var(--ab-bg); color: var(--ab-fg); --foco: var(--ab-foco); padding-block: clamp(1.5rem, 4vw, 3.25rem) calc(var(--raio-xl) + clamp(2.5rem, 6vw, 4.5rem)); }
.s-abre__grade { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 440px); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.s-abre__texto { position: relative; display: grid; justify-items: start; min-width: 0; }
.s-abre .sal-titulo { color: inherit; font-size: clamp(2.2rem, 1rem + 2.6vw, 3.2rem); line-height: 1.06; text-wrap: initial; }
.s-abre .sal-titulo em { color: var(--ab-em); }
.s-cursor { display: none; width: 3px; height: .86em; margin-left: 6px; background: currentColor; vertical-align: -.06em; }
.s-abre .sal-lead { margin-top: var(--espaco-5); color: var(--ab-suave); }
.s-abre__acoes { display: flex; gap: var(--espaco-3); flex-wrap: wrap; margin-top: var(--espaco-6); }
.s-abre__acoes .sal-btn { min-height: 54px; padding-inline: 30px; font-size: 1rem; }
.s-filme-cx { display: grid; gap: var(--espaco-4); min-width: 0; }
.s-filme { position: relative; aspect-ratio: 1 / 1; max-width: 100%; color: var(--ab-grao); }
.s-filme canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.s-filme__parado { position: absolute; inset: 4% 0; width: 100%; height: 92%; }
.s-filme.is-rodando .s-filme__parado { display: none; }
.s-filme__pe { display: flex; align-items: center; gap: var(--espaco-4); min-height: 20px; }
.s-filme__pe .sal-rotulo { flex: 0 1 auto; min-width: 9.5rem; max-width: 62%; color: var(--ab-fg); }
.s-filme__segs { display: flex; gap: 6px; flex: 1; }
.s-filme__segs span { flex: 1; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ab-fg) 28%, transparent); overflow: hidden; }
.s-filme__segs i { display: block; width: 0; height: 100%; background: var(--ab-fg); }
/* a página sobe sobre a abertura como uma folha de cantos arredondados */
.s-folha { position: relative; margin-top: calc(var(--raio-xl) * -1); border-radius: var(--raio-xl) var(--raio-xl) 0 0; background: var(--fundo); }
body.ab-clara .s-folha { background: var(--superficie); border-top: 1px solid var(--linha); }
body.ab-clara .s-topo:not(.rolou) .s-agenda { background: var(--vermelho); color: var(--sobre-vermelho); }
body.ab-clara .s-abre .sal-btn--invertido { background: var(--vermelho); color: var(--sobre-vermelho); }
body.ab-clara .s-abre .sal-btn--contorno { background: var(--superficie); border-color: var(--linha-forte); color: var(--tinta); }
/* a lâmpada do logo, em tom sobre tom, despejando grãos: fecha a página, no bloco da agenda */
.s-sal { position: absolute; top: clamp(1rem, 3vw, 2.5rem); right: max(4vw, calc((100vw - 1240px) / 2)); width: clamp(170px, 17vw, 230px); pointer-events: none; color: var(--ab-marca); }
.s-sal__lamp { display: block; width: 100%; height: auto; }
.s-sal__graos { position: absolute; left: 60%; top: 93%; width: 40%; height: 0; }
.s-sal__graos i { position: absolute; top: 0; left: calc(var(--x) * 1%); width: 8px; height: 8px; border-radius: 50%; background: var(--ab-grao); translate: var(--dx) calc(var(--y) * 1px); }
@media (prefers-reduced-motion: no-preference) { .s-sal__graos i { animation: s-cai var(--d) linear var(--a) infinite; } }
@keyframes s-cai { 0% { translate: 0 0; opacity: 0; } 12%, 78% { opacity: 1; } 100% { translate: var(--dx) 230px; opacity: 0; } }
@media (max-width: 1099px) { .s-sal { display: none; } }
@media (min-width: 900px) {
  .s-abre .sal-titulo span { display: block; }
  .s-abre .sal-titulo em { white-space: nowrap; }
  .s-cursor { display: inline-block; }
}
@media (prefers-reduced-motion: no-preference) { .s-cursor { animation: s-pisca 1.1s steps(1) infinite; } }
@keyframes s-pisca { 50% { opacity: 0; } }
@keyframes s-cresce { from { transform: scaleY(.2); } to { transform: scaleY(1); } }

/* controle do protótipo: troca a cor da abertura */

/* índice de serviços: quatro linhas grandes, com a prévia ao lado */
.s-row:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
/* vinhetas: uma janela branca e um cartão flutuante por serviço, na linguagem dos cartões da abertura */
@media (prefers-reduced-motion: no-preference) {
  /* cada ciclo começa já montado (atraso negativo), para o primeiro quadro nunca sair vazio */
}
@keyframes v-monta { 0%, 4% { transform: scaleX(0); } 16%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes v-surge { 0%, 14% { scale: .9; opacity: 0; } 24%, 92% { scale: 1; opacity: 1; } 100% { scale: .96; opacity: 0; } }
@keyframes v-sobe { 0%, 10% { translate: 0 112px; } 26%, 92% { translate: 0 0; } 100% { translate: 0 112px; } }
@keyframes v-desce { 0%, 10% { translate: 0 -56px; } 26%, 92% { translate: 0 0; } 100% { translate: 0 -56px; } }

/* as três etapas: cartões que se empilham ao rolar, com a aba de cada um à mostra */
@media (min-width: 1000px) and (min-height: 700px) { .s-pilha__cartao { position: sticky; top: var(--pilha-topo, 96px); } }
.s-rows { list-style: none; width: 100%; border-bottom: 1px solid var(--linha); }
.s-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 20px; gap: var(--espaco-4); align-items: center; padding: var(--espaco-4) 0; border-top: 1px solid var(--linha); color: var(--tinta); text-decoration: none; }
.s-row__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--raio-sm); background: var(--vermelho-veu); color: var(--vermelho-texto); }
.s-row b { display: block; font: 700 1.0625rem/1.3 var(--font-display); letter-spacing: -.01em; transition: color .14s; }
.s-row small { display: block; margin-top: 2px; color: var(--tinta-suave); font-size: .9375rem; line-height: 1.45; }
.s-rows--so .s-row { grid-template-columns: minmax(0, 1fr) 20px; }
.s-row > .sal-ic { color: var(--vermelho-texto); transition: translate .26s cubic-bezier(.22, 1, .36, 1); }
a.s-row:hover b { color: var(--vermelho-texto); }
a.s-row:hover > .sal-ic { translate: 4px 0; }
.s-dado { display: grid; gap: var(--espaco-3); width: 100%; padding: var(--espaco-5); border-radius: var(--raio); background: var(--fundo); }
.s-dado__numero { font: 800 clamp(4rem, 2.4rem + 6vw, 6.25rem)/.86 var(--font-display); letter-spacing: -.05em; }
.s-dado__numero em { color: var(--vermelho); font: italic 500 .46em/1 var(--font-destaque); letter-spacing: -.02em; }
.s-dado p { line-height: 1.5; }
.s-dado .s-dado__fonte { color: var(--tinta-suave); font-size: .8125rem; }

/* cases: grade aberta, com filtro */
@media (min-width: 901px) { .s-filtros { flex: none; } }
.s-cases { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--espaco-6) var(--espaco-5); }
.s-case { grid-column: span 4; display: grid; gap: var(--espaco-3); align-content: start; justify-items: start; min-width: 0; }
.s-cases:not(.is-filtrado) .s-case:nth-child(-n+2) { grid-column: span 6; }
.s-cases:not(.is-filtrado) .s-case:nth-child(n+3) { grid-column: span 3; }
.s-cases:not(.is-filtrado) .s-case:nth-child(n+7) { display: none; }
.s-case figure { width: 100%; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha); background: var(--fundo-2); }
.s-case img { width: 100%; transition: scale .52s cubic-bezier(.22, 1, .36, 1); }
.s-case:hover img { scale: 1.03; }
.s-case h3 { font: 700 1.1875rem/1.25 var(--font-display); letter-spacing: -.02em; }
.s-cases:not(.is-filtrado) .s-case:nth-child(-n+2) h3 { font-size: 1.5rem; }
.s-case p { color: var(--tinta-suave); font-size: .9375rem; line-height: 1.5; }
/* clientes, junto dos cases; selos de parceira, no rodapé */
.s-confiam { display: flex; align-items: center; gap: var(--espaco-4) var(--espaco-5); flex-wrap: wrap; }
.s-confiam img { height: 30px; width: auto; filter: grayscale(1); opacity: .72; }
.s-rod__selos { display: grid; gap: var(--espaco-3); margin-top: var(--espaco-5); }
.s-rod__selos .sal-rotulo { color: var(--sobre-grafite-suave); font-size: .75rem; line-height: 1.2; }
.s-rod__selos div { display: flex; gap: var(--espaco-3); flex-wrap: wrap; align-items: center; }
.s-rod__selos img { height: 34px; width: auto; border-radius: 6px; }

/* dois negócios: abas com a página de cada um */
.s-chips { display: flex; gap: var(--espaco-2); flex-wrap: wrap; }

/* como começar, quem e perguntas */
.s-duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.s-quem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.s-quem__lado { display: grid; gap: var(--espaco-5); justify-items: start; min-width: 0; }
.s-quem__lado > p { color: var(--tinta-suave); font-size: 1.0625rem; max-width: var(--largura-leitura); }
.s-assina { display: flex; align-items: center; gap: var(--espaco-3); }
.s-assina img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.s-assina b { display: block; font: 700 1rem/1.3 var(--font-display); letter-spacing: -.01em; }
.s-assina small { display: block; color: var(--tinta-suave); font-size: .875rem; }
.s-fatos { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-5); margin-top: clamp(2.5rem, 5vw, 4rem); }
.s-fatos li { display: grid; gap: var(--espaco-2); align-content: start; padding-top: var(--espaco-4); border-top: 2px solid var(--tinta); min-width: 0; }
.s-fatos b { font: 800 clamp(2.5rem, 1.8rem + 2.6vw, 4rem)/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.s-fatos span { color: var(--tinta-suave); font-size: .9375rem; line-height: 1.45; max-width: 22rem; }
.s-faq { min-width: 0; }

/* entrada das seções ao rolar: só deslocamento, nunca transparência, e só onde o navegador faz isso em CSS */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .s-rev { animation: s-sobe linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}
@keyframes s-sobe { from { translate: 0 20px; } to { translate: 0 0; } }

/* fechamento */
.s-fim { position: relative; overflow: hidden; background: var(--vermelho); color: var(--sobre-vermelho); --foco: var(--branco); }
.s-fim__dentro { position: relative; display: grid; gap: var(--espaco-5); justify-items: start; padding-block: var(--secao); }
.s-fim .sal-titulo, .s-fim .sal-titulo em, .s-fim .sal-lead { color: inherit; }
.s-fim__zap a { color: inherit; font-weight: 600; text-underline-offset: 4px; }
.s-fim { --ab-marca: var(--vermelho-escuro); --ab-grao: var(--sobre-vermelho); }
/* o saleiro em 3D no canto do bloco de fechamento: mais discreto que o da abertura, para não disputar com a chamada */
.s-fim__saleiro { position: absolute; top: 0; bottom: 0; right: max(3vw, calc((100vw - 1240px) / 2)); width: clamp(230px, 24vw, 310px); aspect-ratio: auto; pointer-events: none; color: var(--sobre-vermelho); opacity: .62; }
.s-fim__saleiro .s-filme__parado { inset: 12% 22% auto; width: 56%; height: 60%; color: var(--vermelho-escuro); }
@media (max-width: 1099px) { .s-fim__saleiro { display: none; } }

/* rodapé */
.sal-rodape { padding-left: max(var(--calha), env(safe-area-inset-left, 0px)); padding-right: max(var(--calha), env(safe-area-inset-right, 0px)); }
.s-rod { max-width: var(--largura-max); margin-inline: auto; }
.s-rod .sal-rodape__topo { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.3fr); gap: var(--espaco-5); }
.s-rod__contato li, .s-rod__contato li a { color: var(--sobre-grafite-suave); font-size: .875rem; overflow-wrap: anywhere; }

/* aviso do protótipo */

/* ---------- versão B da home ----------
   Layout: palco cinético. O sal é o fio da página: os grãos formam as quatro portas na abertura, viram o ícone
   de cada etapa num painel que acompanha a rolagem e fecham na agenda. Tipografia em escala grande, uma ideia por faixa. */
body.home { --ab-bg: var(--vermelho); --ab-fg: var(--sobre-vermelho); --ab-suave: var(--sobre-vermelho); --ab-em: var(--sobre-vermelho); --ab-foco: var(--branco); --ab-marca: var(--vermelho-escuro); --ab-grao: var(--sobre-vermelho); }

/* abertura: título em escala grande e, logo abaixo, a folha com as quatro portas feitas de grãos */
.b-abre { position: relative; overflow: hidden; background: var(--vermelho); color: var(--sobre-vermelho); --foco: var(--branco); padding-top: clamp(2rem, 5vw, 4.25rem); }
.b-titulo { color: inherit; font-size: clamp(2.4rem, 1rem + 5.1vw, 5.5rem); line-height: 1; letter-spacing: -.045em; text-wrap: initial; }
.b-titulo em { color: inherit; letter-spacing: -.03em; }
.b-abre__linha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espaco-5); justify-items: start; max-width: 37rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.b-abre__linha .sal-lead { color: inherit; max-width: 34rem; }
.b-abre .s-abre__acoes { margin-top: 0; }
/* o saleiro do logo em três dimensões, feito de grãos: fica atrás do texto, à direita, e despeja sobre a folha das portas.
   Acima da folha os grãos são brancos; quando passam para ela, vermelhos (--grao2). */
.b-abre > .s-cx { position: relative; z-index: 1; }
.b-saleiro { position: absolute; z-index: -1; pointer-events: none; aspect-ratio: auto; right: max(var(--calha), env(safe-area-inset-right, 0px)); top: calc(clamp(2.4rem, 1rem + 5.1vw, 5.5rem) + 4px); bottom: calc((clamp(2.5rem, 5vw, 4rem) + 150px) * -1); width: clamp(260px, 30vw, 410px); color: var(--sobre-vermelho); --grao2: var(--vermelho); }
.b-saleiro .s-filme__parado { inset: 6% 18% auto; width: 64%; height: 60%; opacity: .55; }
.b-palco { margin-top: clamp(2.5rem, 5vw, 4rem); background: var(--fundo); color: var(--tinta); border-radius: var(--raio-xl) var(--raio-xl) 0 0; --foco: var(--tinta); }
.b-palco__rot { padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.b-portas { --b-pad: clamp(1rem, 2vw, 1.75rem); list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--espaco-3); margin-left: calc(var(--b-pad) * -1); }
.b-portas li { min-width: 0; }
.b-portas li + li { border-left: 1px solid var(--linha); }
.b-porta { display: grid; gap: var(--espaco-2); align-content: start; justify-items: start; height: 100%; padding: var(--espaco-3) var(--b-pad) clamp(1.75rem, 3.5vw, 3rem); color: var(--tinta); text-decoration: none; }
.b-porta__graos { position: relative; display: block; width: 100%; aspect-ratio: 1 / .7; color: var(--vermelho); }
.b-porta__graos canvas, .b-tela__graos canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.b-porta__graos > svg, .b-tela__graos > svg { position: absolute; inset: 16% 22%; width: 56%; height: 68%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.b-porta__graos.is-vivo > svg, .b-tela__graos.is-vivo > svg { display: none; }
.b-porta__nome { font: 800 clamp(1.4rem, 1rem + 1.5vw, 2.125rem)/1.05 var(--font-display); letter-spacing: -.035em; transition: color .14s; }
.b-porta__texto { color: var(--tinta-suave); font-size: .9375rem; line-height: 1.5; }
.b-porta__seta { display: grid; place-items: center; width: 44px; height: 44px; margin-top: var(--espaco-3); border-radius: 50%; border: 1.5px solid var(--linha-forte); transition: background-color .14s, border-color .14s, color .14s, translate .26s cubic-bezier(.22, 1, .36, 1); }
.b-porta:hover .b-porta__nome { color: var(--vermelho); }
.b-porta:hover .b-porta__seta, .b-case--fim:hover .b-porta__seta { background: var(--vermelho); border-color: var(--vermelho); color: var(--sobre-vermelho); translate: 4px 0; }
.b-porta:focus-visible, .b-case--fim:focus-visible, .b-painel__abre:focus-visible, .b-trilho:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: var(--raio-sm); }
@media (min-width: 900px) {
  .b-titulo span { display: block; }
  .b-titulo em { white-space: nowrap; }
}

/* manifesto: a frase da marca acende palavra por palavra conforme a página rola */
.b-manifesto { padding-block: clamp(4rem, 10vw, 8.5rem); display: grid; }
.b-manifesto .s-cx { display: grid; gap: var(--espaco-6); justify-items: start; width: 100%; }
.b-frase { max-width: 64rem; font: 800 clamp(1.7rem, 1rem + 2.9vw, 3.5rem)/1.1 var(--font-display); letter-spacing: -.04em; color: var(--tinta); text-wrap: balance; }
.b-frase em { font-family: var(--font-destaque); font-style: italic; font-weight: 500; letter-spacing: -.02em; color: var(--vermelho); }
.b-frase.is-anim span { color: color-mix(in srgb, var(--tinta) 20%, transparent); transition: color .36s cubic-bezier(.22, 1, .36, 1); }
.b-frase.is-anim span.on { color: var(--tinta); }
.b-frase.is-anim em span { color: color-mix(in srgb, var(--vermelho) 26%, transparent); }
.b-frase.is-anim em span.on { color: var(--vermelho); }

/* as três etapas: o texto rola à direita e o painel vermelho, fixo, mostra o ícone da etapa em vista */
.b-roteiro { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; margin-top: var(--espaco-5); }
.b-tela { position: sticky; top: 100px; height: min(calc(100vh - 132px), 620px); display: grid; grid-template-rows: minmax(0, 1fr) auto; border-radius: var(--raio-xl); background: var(--vermelho); color: var(--sobre-vermelho); overflow: hidden; }
.b-tela__graos { position: relative; min-height: 0; }
.b-tela__pe { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--espaco-4); padding: 0 clamp(1.25rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.6vw, 2.25rem); }
.b-tela__pe p { display: grid; gap: var(--espaco-2); }
.b-tela__num { font: italic 500 clamp(3rem, 2rem + 3vw, 4.75rem)/.86 var(--font-destaque); }
.b-tela__nome { font: 800 clamp(1.4rem, 1rem + 1.5vw, 2.125rem)/1.05 var(--font-display); letter-spacing: -.035em; }
.b-tela__pontos { display: flex; gap: 6px; padding-bottom: 8px; }
.b-tela__pontos span { width: 30px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--sobre-vermelho) 30%, transparent); transition: background-color .26s; }
.b-tela__pontos span.on { background: var(--sobre-vermelho); }
.b-blocos { display: grid; min-width: 0; }
.b-bloco { display: grid; gap: var(--espaco-5); justify-items: start; align-content: start; min-width: 0; padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--linha); }
.b-bloco:first-child { border-top: 0; padding-top: var(--espaco-2); }
.b-bloco > p:not(.sal-lead):not(.sal-rotulo) { color: var(--tinta-suave); max-width: var(--largura-leitura); }
.b-bloco h3 { font: 700 1.5rem/1.2 var(--font-display); letter-spacing: -.02em; }
.b-bloco .sal-lista a { color: var(--vermelho-texto); text-underline-offset: 3px; }
.b-bloco__rot { display: none; }

/* projetos: a faixa fica presa e os cartões passam na horizontal enquanto a página rola */
.b-cases { position: relative; background: var(--superficie); border-block: 1px solid var(--linha); }
.b-cases__fixo { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); align-content: center; padding-block: clamp(3rem, 6vw, 5rem); overflow: hidden; }
.b-cases.is-preso .b-cases__fixo { position: sticky; top: var(--b-topo, 73px); height: calc(100vh - var(--b-topo, 73px)); padding-block: var(--espaco-5); }
.b-cases__fixo > .s-cx { width: 100%; }
.b-cases__cab .sal-titulo { max-width: 22ch; }
.b-trilho { display: flex; min-width: 0; gap: var(--espaco-5); padding-inline: max(var(--calha), calc((100vw - var(--largura-max)) / 2)); will-change: transform; }
.b-cases:not(.is-preso) .b-trilho { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--espaco-4); scrollbar-width: thin; }
.b-case { flex: none; width: clamp(264px, min(31vw, 44vh), 430px); display: grid; gap: var(--espaco-3); align-content: start; justify-items: start; scroll-snap-align: center; color: var(--tinta); text-decoration: none; }
.b-case figure { width: 100%; border-radius: var(--raio-lg); overflow: hidden; border: 1px solid var(--linha); background: var(--fundo-2); }
.b-case img { width: 100%; transition: scale .52s cubic-bezier(.22, 1, .36, 1); }
.b-case:hover img { scale: 1.03; }
.b-case h3 { font: 700 1.375rem/1.2 var(--font-display); letter-spacing: -.02em; }
.b-case p { color: var(--tinta-suave); font-size: .9375rem; line-height: 1.5; }
.b-case--fim { align-self: stretch; align-content: end; padding: var(--espaco-5); border-radius: var(--raio-lg); background: var(--fundo); border: 1px solid var(--linha); width: clamp(220px, 22vw, 300px); }
.b-case--fim b { font: 800 clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem)/1.05 var(--font-display); letter-spacing: -.035em; }
.b-cases__barra { height: 3px; border-radius: 2px; background: var(--fundo-2); overflow: hidden; }
.b-cases__barra i { display: block; height: 100%; background: var(--vermelho); transform-origin: left center; transform: scaleX(0); }
.b-cases:not(.is-preso) .b-cases__barra { display: none; }

/* quem: os números da trajetória em escala de cartaz */
.b-numeros { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(3rem, 6vw, 5rem); border-top: 2px solid var(--tinta); }
.b-numeros li { display: grid; gap: var(--espaco-3); align-content: start; min-width: 0; padding: var(--espaco-5) var(--espaco-5) 0 0; }
.b-numeros li + li { padding-left: var(--espaco-5); border-left: 1px solid var(--linha); }
.b-numeros b { font: 800 clamp(3.25rem, 1.2rem + 8.4vw, 8.75rem)/.84 var(--font-display); letter-spacing: -.065em; font-variant-numeric: tabular-nums; }
.b-numeros b em { font: italic 500 .5em/1 var(--font-destaque); letter-spacing: 0; color: var(--vermelho); }
.b-numeros span { color: var(--tinta-suave); font-size: .9375rem; line-height: 1.45; max-width: 20rem; }
.b-confiam { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* dois negócios: dois painéis; o escolhido se abre e o outro recolhe */
.b-paineis { display: flex; gap: var(--espaco-4); min-height: 30rem; }
.b-painel { flex: 1 1 0; min-width: 0; display: grid; gap: var(--espaco-5); align-content: space-between; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--raio-lg); background: var(--fundo); border: 1px solid var(--linha); overflow: hidden; transition: flex-grow .52s cubic-bezier(.22, 1, .36, 1), border-color .26s; }
.b-painel.is-aberto { flex-grow: 2.3; border-color: var(--tinta); }
.b-painel__abre { display: flex; align-items: center; gap: var(--espaco-3); padding: 0; border: 0; background: none; color: var(--tinta); cursor: pointer; text-align: left; }
.b-painel__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--raio-sm); background: var(--vermelho-veu); color: var(--vermelho-texto); flex: none; }
.b-painel__ic .sal-ic { width: 26px; height: 26px; }
.b-painel.is-aberto .b-painel__ic { background: var(--vermelho); color: var(--sobre-vermelho); }
.b-painel__corpo { display: grid; gap: var(--espaco-4); justify-items: start; min-width: 0; }
.b-painel__corpo > p { color: var(--tinta-suave); max-width: var(--largura-leitura); }
.b-painel:not(.is-aberto) .b-painel__corpo > :not(h3) { display: none; }
.b-painel:not(.is-aberto) .b-painel__corpo h3 { font-size: 1.375rem; color: var(--tinta-suave); }
.b-painel:not(.is-aberto) .b-painel__corpo h3 em { color: inherit; }

/* como começar: três passos numa linha que se completa ao rolar */
.b-passos { position: relative; list-style: none; counter-reset: p; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-6); padding-top: var(--espaco-6); }
.b-passos::before, .b-passos::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--linha); }
.b-passos::after { background: var(--vermelho); transform-origin: left center; transform: scaleX(var(--b-passos, 1)); transition: transform .2s linear; }
.b-passos li { counter-increment: p; display: grid; gap: var(--espaco-2); align-content: start; min-width: 0; }
.b-passos li::before { content: counter(p, decimal-leading-zero); font: italic 500 3.25rem/1 var(--font-destaque); color: var(--vermelho); }
.b-passos b { font: 700 1.375rem/1.2 var(--font-display); letter-spacing: -.02em; }
.b-passos span { color: var(--tinta-suave); line-height: 1.5; }

/* fechamento com o filme, e a palavra Sal em tamanho de rodapé inteiro */
.b-fim__grade { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 25vw, 360px); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.b-marca-rodape { display: none; }
body.home .b-marca-rodape { display: block; margin-top: var(--espaco-7); margin-bottom: calc(var(--espaco-5) * -1); aspect-ratio: 1038 / 400; overflow: hidden; opacity: .07; }
.b-marca-rodape img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  .b-roteiro, .b-fim__grade { grid-template-columns: minmax(0, 1fr); }
  .b-saleiro { position: relative; right: auto; top: auto; bottom: auto; width: 230px; height: 350px; margin: var(--espaco-4) auto -150px; }
  .b-portas { --b-pad: var(--espaco-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-portas li + li { border-left: 0; }
  .b-portas li:nth-child(even) { border-left: 1px solid var(--linha); }
  .b-portas li:nth-child(n+3) { border-top: 1px solid var(--linha); }
  .b-porta { padding-bottom: var(--espaco-5); }
  .b-palco { border-radius: var(--raio-lg) var(--raio-lg) 0 0; }
  .b-tela { display: none; }
  .b-bloco__rot { display: flex; }
  .b-numeros, .b-passos { grid-template-columns: minmax(0, 1fr); }
  .b-numeros li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--linha); }
  .b-paineis { flex-direction: column; min-height: 0; }
  .b-painel { flex: none; }
  .b-painel:not(.is-aberto) .b-painel__corpo > :not(h3) { display: revert; }
  .b-painel:not(.is-aberto) .b-painel__corpo h3 { font-size: revert; color: inherit; }
  .b-painel:not(.is-aberto) .b-painel__corpo h3 em { color: var(--vermelho); }
  .b-fim .s-filme-cx { max-width: 300px; }
}
/* ---------- páginas internas e LPs de serviço ---------- */
.p-migalha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: var(--espaco-5); font: 600 .8125rem/1.2 var(--font-corpo); letter-spacing: .04em; color: var(--ab-fg); }
.p-migalha a { color: inherit; text-decoration: none; }
.p-migalha a:hover { text-decoration: underline; text-underline-offset: 3px; }
.p-migalha a:focus-visible, .p-prosa a:focus-visible, .p-redes a:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
.p-provas { list-style: none; display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-5); margin-top: var(--espaco-5); }
.p-provas li { display: inline-flex; align-items: center; gap: 8px; font: 600 .9375rem/1.3 var(--font-corpo); }
.p-provas .sal-ic { width: 18px; height: 18px; stroke-width: 2.4; }
.p-garantia { display: flex; align-items: center; gap: 8px; margin-top: var(--espaco-4); font-size: .875rem; color: var(--ab-suave); }
.p-garantia .sal-ic { width: 18px; height: 18px; }
.p-selo { display: flex; align-items: center; gap: var(--espaco-3); margin-top: var(--espaco-5); }
.p-selo .sal-rotulo { color: var(--ab-fg); }
.p-selo img { height: 38px; width: auto; border-radius: 6px; }
.p-redes { list-style: none; display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-5); margin-top: var(--espaco-5); }
.p-redes a { color: inherit; font: 600 .9375rem/1.3 var(--font-corpo); text-underline-offset: 4px; }
.p-retrato { border-radius: var(--raio-lg); overflow: hidden; aspect-ratio: 4 / 5; max-width: 100%; background: var(--fundo-2); }
.p-retrato img { width: 100%; height: 100%; object-fit: cover; }
.p-dupla { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.p-dupla__texto { display: grid; gap: var(--espaco-4); justify-items: start; min-width: 0; }
.p-dupla__texto > p { color: var(--tinta-suave); font-size: 1.0625rem; max-width: var(--largura-leitura); }
.p-dupla__texto > p a { color: var(--vermelho-texto); text-underline-offset: 3px; }
.p-dupla__texto .sal-lista { margin-top: var(--espaco-3); }
.p-meio { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-5) var(--espaco-7); flex-wrap: wrap; }
.p-meio > div:first-child { display: grid; gap: var(--espaco-3); max-width: 38rem; min-width: 0; }
.p-meio p { color: var(--tinta-suave); }
.p-fonte { margin-top: var(--espaco-5); color: var(--tinta-suave); font-size: .8125rem; }
.p-pe { margin-top: var(--espaco-6); }
.p-plats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-4); }
.p-plats .sal-cartao img { height: 40px; width: auto; align-self: flex-start; border-radius: 6px; }
.p-destaque { grid-template-columns: auto minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--espaco-5) clamp(1.5rem, 4vw, 3rem); align-items: start; justify-items: stretch; }
.p-destaque p { color: var(--tinta-suave); }
.p-destaque .p-fonte { margin-top: var(--espaco-3); }
.s-fatos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s-fatos--4 b { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.25rem); }
.p-faq-lado { display: grid; gap: var(--espaco-4); justify-items: start; align-content: start; }
.p-faq-lado p { color: var(--tinta-suave); }
.p-letras { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-5); }
.p-letras li { display: grid; gap: var(--espaco-2); align-content: start; padding-top: var(--espaco-4); border-top: 2px solid var(--tinta); }
.p-letras b { font: italic 500 4.5rem/.9 var(--font-destaque); color: var(--vermelho); }
.p-letras h3 { font: 700 1.375rem/1.2 var(--font-display); letter-spacing: -.02em; }
.p-letras p { color: var(--tinta-suave); }
.p-carta { max-width: 46rem; margin-inline: auto; padding: clamp(1.75rem, 5vw, 3.5rem); background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-lg); display: grid; gap: var(--espaco-4); }
.p-carta h2 { margin-bottom: var(--espaco-3); }
.p-carta p { color: var(--tinta); font-size: 1.0625rem; line-height: 1.7; }
.p-carta .s-assina { margin-top: var(--espaco-4); }
.p-prosa { max-width: 46rem; display: grid; gap: var(--espaco-4); }
.p-prosa h2 { margin-top: var(--espaco-5); font: 700 1.375rem/1.25 var(--font-display); letter-spacing: -.02em; }
.p-prosa p, .p-prosa li { color: var(--tinta); line-height: 1.7; }
.p-prosa small { color: var(--tinta-suave); }
.p-prosa ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: var(--espaco-2); }
.p-prosa a { color: var(--vermelho-texto); text-underline-offset: 3px; }
.p-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-5); }
.p-fotos figure { min-width: 0; }
.p-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raio); }
.p-fotos figcaption { margin-top: var(--espaco-2); color: var(--tinta-suave); font-size: .875rem; line-height: 1.45; }
.p-simples { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }

/* grades de cartões com colunas fechadas, para não sobrar um cartão sozinho na última linha */
.s-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .s-g3, .s-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .s-g3, .s-g4 { grid-template-columns: minmax(0, 1fr); } }

/* agenda */
.a-fatos { list-style: none; display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-5); margin-top: var(--espaco-5); }
.a-fatos li { display: inline-flex; align-items: center; gap: 8px; font: 600 .9375rem/1.3 var(--font-corpo); }

@media (max-width: 900px) {
  .p-dupla, .p-plats, .p-destaque { grid-template-columns: minmax(0, 1fr); }
  .p-letras, .p-fotos { grid-template-columns: minmax(0, 1fr); }
  .s-fatos--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .s-duas, .s-quem { grid-template-columns: minmax(0, 1fr); }
  .s-cases .s-case, .s-cases:not(.is-filtrado) .s-case:nth-child(-n+2), .s-cases:not(.is-filtrado) .s-case:nth-child(n+3) { grid-column: span 6; }
  .s-cab--linha { align-items: flex-start; flex-direction: column; }
  .s-abre__grade { grid-template-columns: minmax(0, 1fr); }
  .s-filme-cx { max-width: 340px; }
  .s-folha { border-radius: var(--raio-lg) var(--raio-lg) 0 0; }
  .s-mega { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .s-rod .sal-rodape__topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sal-flutuante { padding: 8px 12px 8px 8px; gap: var(--espaco-2); }
  .sal-flutuante small { display: none; }
  .sal-flutuante b { font-size: .8125rem; }
  .sal-flutuante__icone { width: 32px; height: 32px; }
  .s-abre__acoes .sal-btn, .s-fim .sal-btn { width: 100%; }
  .s-abre__acoes { width: 100%; }
  .s-cases .s-case, .s-cases:not(.is-filtrado) .s-case:nth-child(-n+2), .s-cases:not(.is-filtrado) .s-case:nth-child(n+3) { grid-column: 1 / -1; }
  .s-fatos { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- peças que só existem no WordPress ---------- */
[hidden] { display: none !important; }
.s-pula { position: absolute; left: var(--espaco-4); top: -80px; z-index: 50; padding: 10px 16px; border-radius: var(--raio-sm); background: var(--tinta); color: var(--superficie); font: 600 .9375rem/1.2 var(--font-corpo); text-decoration: none; }
.s-pula:focus { top: var(--espaco-3); }
.s-nav__item[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }

/* com a barra do WordPress (quem está logado), o cabeçalho e os painéis presos descem junto */
.admin-bar .s-topo { top: 32px; }
.admin-bar .b-tela { top: 132px; height: min(calc(100vh - 164px), 620px); }
@media (max-width: 782px) { .admin-bar .s-topo { top: 46px; } }
@media (max-width: 600px) { .admin-bar .s-topo { top: 0; } }

/* rodapé: os guias do blog numa linha, o CNPJ e as preferências de cookies */
.s-rod__selos a { display: block; border-radius: 6px; }
.s-rod__guias { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-5); margin-top: var(--espaco-7); }
.s-rod__guias h4 { font: 700 .75rem/1.2 var(--font-corpo); letter-spacing: .12em; text-transform: uppercase; color: var(--sobre-grafite); }
.s-rod__guias ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-5); }
.s-rod__guias a { color: var(--sobre-grafite-suave); font-size: .875rem; text-decoration: none; }
.s-rod__guias a:hover { color: var(--sobre-grafite); text-decoration: underline; }
.s-rod__guias + .sal-rodape__base { margin-top: var(--espaco-5); }
.s-rod__legal { display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-5); }
.s-rod__legal button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.s-rod__legal button:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }

/* botão fixo no celular: aparece depois da abertura e some perto do rodapé (js/tema.js) */
.s-fixo { display: none; }
@media (max-width: 760px) {
  .s-fixo { position: fixed; z-index: 18; left: 0; right: 0; bottom: 0; display: flex; gap: var(--espaco-2); padding: 10px max(var(--calha), env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(var(--calha), env(safe-area-inset-left, 0px)); background: var(--superficie); border-top: 1px solid var(--linha); box-shadow: 0 -10px 30px #1e1a1a14; }
  .s-fixo .sal-btn { min-height: 48px; }
  .s-fixo .sal-btn--primario { flex: 1; justify-content: center; }
  .s-fixo .sal-btn--secundario { flex: none; padding-inline: 14px; }
}

/* barra de cookies */
.s-cookies { position: fixed; z-index: 30; left: var(--espaco-4); right: var(--espaco-4); bottom: calc(var(--espaco-4) + env(safe-area-inset-bottom, 0px)); max-width: 46rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-4) var(--espaco-5); flex-wrap: wrap; padding: var(--espaco-4) var(--espaco-5); border-radius: var(--raio); background: var(--superficie); color: var(--tinta); border: 1px solid var(--linha); box-shadow: var(--sombra-flutuante); --foco: var(--tinta); }
.s-cookies p { flex: 1 1 18rem; font-size: .875rem; line-height: 1.5; color: var(--tinta-suave); }
.s-cookies p a { color: var(--vermelho-texto); text-underline-offset: 3px; }
.s-cookies div { display: flex; gap: var(--espaco-2); flex-wrap: wrap; }

/* seguir a SAL: faixa no alto do rodapé (em todas as páginas) e atalhos no menu do celular */
.s-rod__siga { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--espaco-4) var(--espaco-5); padding-bottom: var(--espaco-6); margin-bottom: var(--espaco-7); border-bottom: 1px solid var(--linha-grafite); }
.s-rod__siga p { max-width: none; font: 800 clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)/1.1 var(--font-display); letter-spacing: -.035em; color: var(--sobre-grafite); }
.s-rod__siga div { display: flex; flex-wrap: wrap; gap: var(--espaco-3); }
.s-rod__siga .sal-btn { border-radius: var(--raio-pill); border-color: var(--sobre-grafite); color: var(--sobre-grafite); font-size: .9375rem; }
.s-rod__siga .sal-btn:hover { background: var(--sobre-grafite); color: var(--grafite); }
.s-gaveta__siga { display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-5); margin-top: var(--espaco-5); padding-top: var(--espaco-4); border-top: 1px solid var(--linha); }
.s-gaveta__rede { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; color: var(--tinta); font: 600 .9375rem/1.2 var(--font-corpo); text-decoration: none; }
.s-gaveta__rede:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 600px) { .s-rod__siga .sal-btn { flex: 1 1 100%; } .s-rod__siga div { width: 100%; } }