/* site.css: componentes. Toda cor e tamanho vem de tokens.css. */
:root { --rodape-fundo: var(--tijolo-500); --faixa-fundo: var(--tijolo-500); --rodape-texto: var(--branco); --rodape-suave: oklch(0.90 0.03 26); --cabecalho-h: 4.5rem; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --rodape-fundo: var(--tijolo-900); --faixa-fundo: var(--tijolo-700); --rodape-suave: oklch(0.86 0.03 26); } }
:root[data-tema="escuro"] { --rodape-fundo: var(--tijolo-900); --faixa-fundo: var(--tijolo-700); --rodape-suave: oklch(0.86 0.03 26); }

/* anel de foco claro onde o fundo é escuro ou vermelho */
.barra-topo :focus-visible, .rodape :focus-visible, .secao--marca :focus-visible, .lista-aba:focus-visible, .fachada :focus-visible { outline-color: var(--branco); }

/* ── botões ─────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-block-size: 48px; padding: .75rem 1.25rem; border-radius: var(--raio-2); border: 2px solid transparent;
  font-weight: 600; text-decoration: none; line-height: 1.2; transition: background var(--d-rapido) var(--ease-ui), color var(--d-rapido) var(--ease-ui), transform var(--d-rapido) var(--ease-ui); }
.btn:active { transform: translateY(1px); }
.btn--zap { background: var(--acao); color: var(--texto-sobre-zap); }
.btn--zap:hover { background: var(--acao-hover); color: var(--texto-sobre-zap); }
.rodape .btn--zap, .rodape .btn--zap:hover, .secao--marca .btn--zap, .secao--marca .btn--zap:hover, .barra-topo .btn--zap { color: var(--texto-sobre-zap); }
.btn--marca { background: var(--marca); color: var(--texto-sobre-marca); }
.btn--marca:hover { background: var(--marca-hover); color: var(--texto-sobre-marca); }
.btn--contorno { background: transparent; color: var(--marca); border-color: var(--marca); }
.btn--contorno:hover { background: var(--marca-suave); color: var(--marca-hover); }
.btn--claro { background: var(--branco); color: var(--tijolo-600); }
.btn--claro:hover { background: var(--creme-100); color: var(--tijolo-700); }
.btn--texto { background: transparent; color: var(--link); text-decoration: underline; text-underline-offset: .2em; padding-inline: .5rem; }
.btn--texto:hover { color: var(--marca-hover); }
.btn--mini { min-block-size: 44px; padding: .5rem .9rem; font-size: var(--t--1); }
.btn--pequeno { min-block-size: 44px; padding: .6rem 1rem; font-size: var(--t--1); }
.btn--icone { min-inline-size: 44px; min-block-size: 44px; padding: 0; background: transparent; color: var(--texto); }
.btn--icone:hover { background: var(--superficie-2); }
.btn .ico { flex: none; }
.btn--zap .ico { width: 22px; height: 22px; }
.link-seta { display: inline-flex; align-items: center; gap: .35rem; min-block-size: 44px; font-weight: 600; color: var(--link); text-decoration: none; }
.link-seta:hover { text-decoration: underline; }
.link-seta .ico { transition: transform var(--d-rapido) var(--ease-ui); }
.link-seta:hover .ico { transform: translateX(3px); }
.link-seta--claro { color: var(--branco); }
.link-simples { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 600; color: var(--link); }
.link-seta--claro:hover { color: var(--branco); }

/* ── barra do topo ──────────────────────────────────────────────────── */
.barra-topo { background: var(--marca-profunda); color: var(--branco); font-size: var(--t--1); }
.barra-topo__in { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: center; min-block-size: 44px; }
.barra-topo a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; min-block-size: 44px; }
.barra-topo a:hover { text-decoration: underline; color: inherit; }
.barra-topo__end { display: none !important; }
.barra-topo__zap { margin-inline-start: auto; }
@media (min-width: 640px) { .barra-topo__end { display: inline-flex !important; } }

/* ── seletor de tema: pílula com polegar que desliza ───────────────── */
.tema { --tema-i: 1; position: relative; display: inline-grid; grid-template-columns: repeat(3, 34px); align-items: center; margin: 0; padding: 3px; border: 1px solid oklch(1 0 0 / .22); border-radius: var(--raio-cheio); background: oklch(0 0 0 / .22); flex: none; }
.barra-topo__zap + .tema { margin-inline-start: .25rem; }
.tema:has(input[value="claro"]:checked) { --tema-i: 0; }
.tema:has(input[value="escuro"]:checked) { --tema-i: 2; }
.tema__opcao { position: relative; z-index: 1; display: grid; place-items: center; block-size: 30px; border-radius: var(--raio-cheio); color: oklch(1 0 0 / .72); cursor: pointer; transition: color var(--d-normal) var(--ease-ui); }
.tema__opcao input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tema__opcao:hover { color: var(--branco); }
.tema__opcao:has(input:checked) { color: var(--tijolo-700); }
.tema__opcao:has(input:focus-visible) { outline: 2px solid var(--branco); outline-offset: 2px; }
.tema__opcao .ico { transition: transform var(--d-lento) var(--ease-entrada); }
.tema__opcao:has(input[value="claro"]:checked) .ico { transform: rotate(90deg); }
.tema__opcao:has(input[value="escuro"]:checked) .ico { transform: rotate(-12deg); }
.tema__opcao:has(input[value="sistema"]:checked) .ico { transform: rotate(180deg); }
.tema__polegar { position: absolute; inset-block: 3px; inset-inline-start: 3px; inline-size: 34px; border-radius: var(--raio-cheio); background: var(--creme-100); box-shadow: 0 1px 2px oklch(0 0 0 / .25), 0 2px 8px oklch(0 0 0 / .18); transform: translateX(calc(var(--tema-i) * 100%)); transition: transform var(--d-normal) var(--ease-entrada); }
@media (max-width: 639px) {
  .barra-topo__in { flex-wrap: nowrap; gap: .75rem; }
  .barra-topo a { white-space: nowrap; }
  .barra-topo .ico { flex: none; }
  .tema { grid-template-columns: repeat(3, 30px); }
  .tema__polegar { inline-size: 30px; }
  .tema__opcao { block-size: 28px; }
}
@media (max-width: 359px) { .barra-topo__zap span { display: none; } }
@media (prefers-reduced-motion: reduce) { .tema__polegar, .tema__opcao .ico { transition: none; } }
@media (forced-colors: active) { .tema__polegar { background: Highlight; } .tema__opcao:has(input:checked) { color: HighlightText; } }

/* ── cabeçalho ──────────────────────────────────────────────────────── */
.cabecalho { position: sticky; top: 0; z-index: 50; background: var(--fundo); border-block-end: 1px solid var(--borda); transition: box-shadow var(--d-normal) var(--ease-ui); }
.cabecalho.rolou { box-shadow: var(--sombra-3); }
.cabecalho__in { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-block-size: var(--cabecalho-h); }
.marca { display: block; flex: none; }
.marca img { width: 108px; height: auto; filter: drop-shadow(0 1px 1px oklch(0 0 0/.12)); }
@media (min-width: 900px) { .marca img { width: 120px; } }
.menu-botao { display: inline-flex; align-items: center; gap: .6rem; min-block-size: 44px; padding: .5rem .8rem; border: 2px solid var(--borda-controle); border-radius: var(--raio-2); background: transparent; color: var(--texto); font-weight: 600; }
.menu-botao__tracos { position: relative; width: 20px; height: 2px; background: currentColor; border-radius: 2px; }
.menu-botao__tracos::before, .menu-botao__tracos::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px; }
.menu-botao__tracos::before { top: -6px; } .menu-botao__tracos::after { top: 6px; }
.menu { display: none; }
.menu.aberto { display: block; position: absolute; inset-inline: 0; top: 100%; background: var(--fundo); border-block-end: 1px solid var(--borda); box-shadow: var(--sombra-3); padding: var(--e-2) var(--e-4) var(--e-4); max-block-size: calc(100svh - var(--cabecalho-h) - 40px); overflow-y: auto; }
.menu__lista { display: flex; flex-direction: column; }
.menu__item { position: relative; display: flex; flex-wrap: wrap; align-items: center; border-block-end: 1px solid var(--borda); }
.menu__item > a { flex: 1; display: flex; align-items: center; min-block-size: 48px; padding: .5rem 0; color: var(--texto); font-weight: 600; text-decoration: none; }
.menu__item > a:hover, .menu__item > a[aria-current="page"] { color: var(--marca); }
.menu__abrir { min-inline-size: 48px; min-block-size: 48px; border: 0; background: transparent; color: var(--texto-suave); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--raio-1); }
.menu__abrir .ico { transition: transform var(--d-rapido) var(--ease-ui); }
.menu__abrir[aria-expanded="true"] .ico { transform: rotate(180deg); }
.submenu { display: none; flex-basis: 100%; padding: 0 0 .75rem .75rem; }
.menu__item--sub.aberto .submenu { display: block; }
.submenu a { display: flex; align-items: center; min-block-size: 44px; color: var(--texto); text-decoration: none; }
.submenu a:hover { color: var(--marca); text-decoration: underline; }
.submenu__todos a { font-weight: 600; color: var(--link); }
.menu__cta { margin-block-start: var(--e-3); width: 100%; }
@media (min-width: 900px) {
  .menu-botao { display: none; }
  .menu, .menu.aberto { display: flex; align-items: center; gap: var(--e-3); position: static; background: transparent; border: 0; box-shadow: none; padding: 0; max-block-size: none; overflow: visible; }
  .menu__lista { flex-direction: row; gap: .25rem; }
  .menu__item { border: 0; flex-wrap: nowrap; }
  .menu__item > a { padding: .5rem .6rem; min-block-size: 44px; }
  .menu__abrir { min-inline-size: 32px; min-block-size: 44px; margin-inline-start: -.4rem; }
  .submenu { position: absolute; top: 100%; left: 0; min-inline-size: 15rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-2); box-shadow: var(--sombra-3); padding: .5rem; z-index: 60; }
  .menu__item--sub:hover .submenu, .menu__item--sub:focus-within .submenu, .menu__item--sub.aberto .submenu { display: block; }
  .submenu a { padding: .35rem .75rem; border-radius: var(--raio-1); }
  .submenu a:hover { background: var(--superficie-2); text-decoration: none; }
  .menu__cta { margin: 0; width: auto; }
}

/* ── hero (home) ────────────────────────────────────────────────────── */
.hero { padding-block-start: 0; }
.hero__topo { display: grid; }
.hero__in { display: grid; gap: var(--e-3); align-content: center; padding-block: clamp(var(--e-5), 6vw, var(--e-7)) clamp(var(--e-4), 4vw, var(--e-6)); }
.hero__imagem { position: relative; }
.hero__imagem img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .hero__topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .hero__in { width: auto; margin: 0; padding-inline: max(var(--e-4), calc((100vw - 1200px) / 2)) var(--e-6); }
  .hero__imagem img { aspect-ratio: auto; min-block-size: 560px; max-block-size: 720px; }
  .hero__imagem::after { content: ""; position: absolute; inset-block: 0; left: 0; width: 18%; background: linear-gradient(90deg, var(--fundo), transparent); pointer-events: none; }
}
.hero h1 { max-inline-size: 15ch; color: var(--marca); }
.hero__sub { font-size: var(--t-1); max-inline-size: 42ch; color: var(--texto-suave); }
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.hero__provas { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-weight: 600; font-size: var(--t--1); color: var(--texto-suave); }
.hero__provas li { display: inline-flex; align-items: center; gap: .5rem; }
.hero__provas li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--acao); }

.fachada { position: relative; }
.fachada img { width: 100%; height: auto; aspect-ratio: 2423 / 850; object-fit: cover; min-block-size: 220px; max-block-size: 440px; }
.fachada figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: .5rem var(--e-4); background: oklch(0.15 0.01 60 / .6); color: var(--branco); font-size: var(--t--1); }
.regua { color: var(--madeira); line-height: 0; overflow: hidden; }
.regua svg { display: block; }
.regua--rodape { color: var(--rodape-suave); opacity: .7; }

/* um momento orquestrado: a entrada do hero */
[data-anim] { opacity: 0; transform: translateY(14px); animation: entrar var(--d-lento) var(--ease-entrada) forwards; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes entrar { to { opacity: 1; transform: none; } }

/* ── seções ─────────────────────────────────────────────────────────── */
.secao__cabeca { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e-2) var(--e-4); margin-block-end: var(--e-5); }
.secao__cabeca p { color: var(--texto-suave); font-size: var(--t-0); }
.secao__cabeca h2 { color: var(--marca); }
.secao--marca .secao__cabeca h2 { color: inherit; }

/* tiles de produto e serviço: foto, nome, uma linha, sem caixa */
.tiles { display: grid; gap: var(--e-5) var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }
.tile__foto { display: block; border-radius: var(--raio-2); position: relative; }
.tile__foto::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 5px; background: var(--marca); transform: scaleX(0); transform-origin: left; transition: transform var(--d-normal) var(--ease-ui); }
.tile:hover .tile__foto::after, .tile:focus-within .tile__foto::after { transform: scaleX(1); }
.tile__foto img { transition: transform var(--d-lento) var(--ease-ui); }
.tile:hover .tile__foto img { transform: scale(1.03); }
.tile__texto { padding-block-start: var(--e-2); }
.tile h3 a, .tile h2 a, .artigo-card h3 a, .artigo-card h2 a { display: inline-flex; align-items: center; min-block-size: 44px; margin-block: -.55rem; color: var(--texto); text-decoration: none; }
.tile h3 a:hover, .tile h2 a:hover { color: var(--marca); text-decoration: underline; }
.tile h2 { font-size: var(--t-1); letter-spacing: -0.01em; }
.tile p { color: var(--texto-suave); margin-block: .35rem .75rem; font-size: var(--t--1); }
.tile__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }

/* serviços em faixa */
.servicos-faixa { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }

/* para quem */
.para-quem { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.para-quem li { padding-inline-start: var(--e-2); border-inline-start: 3px solid var(--marca); }
.para-quem h3 { font-size: var(--t-0); margin-block-end: .25rem; }
.para-quem p { color: var(--texto-suave); font-size: var(--t--1); }

/* como pedir (sequência real) */
.passos { counter-reset: passo; display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.passos li { counter-increment: passo; display: grid; grid-template-columns: 2.25rem 1fr; gap: .75rem; align-items: start; }
.passos li::before { content: counter(passo); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--marca); color: var(--texto-sobre-marca); font-weight: 800; }
.secao--marca .passos li::before { background: var(--branco); color: var(--tijolo-600); }
.passos h3 { font-size: var(--t-0); margin-block-end: .2rem; }
.passos p { font-size: var(--t--1); color: var(--texto-suave); }
.secao--marca .passos p { color: var(--rodape-suave); }

/* quem somos (prévia e página) */
.sobre { display: grid; gap: var(--e-5); align-items: center; }
@media (min-width: 900px) { .sobre { grid-template-columns: 1.1fr 1fr; } .sobre--inverso > :first-child { order: 2; } }
.sobre__foto { border-radius: var(--raio-3); overflow: hidden; aspect-ratio: 1; }
.sobre__foto img { width: 100%; height: 100%; object-fit: cover; }
.sobre h2 { color: var(--marca); }
.provas { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
.provas li strong { display: block; font-size: var(--t-1); font-weight: 800; color: var(--marca); letter-spacing: -0.01em; }
.provas li span { font-size: var(--t--1); color: var(--texto-suave); }
.compromissos { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.compromissos li { display: grid; grid-template-columns: 1.75rem 1fr; gap: .75rem; }
.compromissos li .ico { color: var(--acao-hover); width: 24px; height: 24px; }
.compromissos h3 { font-size: var(--t-0); }
.compromissos p { font-size: var(--t--1); color: var(--texto-suave); }
.fotos-grade { display: grid; gap: var(--e-2); grid-template-columns: repeat(2, 1fr); }
.fotos-grade figure { border-radius: var(--raio-2); overflow: hidden; }
.fotos-grade figure:first-child, .fotos-grade figure:nth-child(4) { grid-column: 1 / -1; }
.fotos-grade img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.fotos-grade figure:first-child img { aspect-ratio: 2 / 1; }
.fotos-grade figure:nth-child(4) img { aspect-ratio: 720 / 253; }
@media (min-width: 900px) { .fotos-grade { grid-template-columns: repeat(3, 1fr); } .fotos-grade figure:first-child { grid-column: 1 / 3; grid-row: 1 / 3; } .fotos-grade figure:first-child img { aspect-ratio: auto; } .fotos-grade figure:nth-child(4) { grid-column: 1 / -1; } .fotos-grade figure:nth-child(4) img { aspect-ratio: 4 / 1; } }

/* marcas */
.marcas-linha { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); align-items: center; }
.marcas-linha li { display: grid; place-items: center; min-block-size: 64px; padding: .5rem 1rem; background: var(--superficie); border-radius: var(--raio-2); border: 1px solid var(--borda); }
.marcas-linha img { max-block-size: 40px; width: auto; }
.marcas-linha .marca-nome { font-weight: 800; font-size: var(--t-0); letter-spacing: -0.01em; color: var(--texto); text-align: center; }
.marcas-grupo + .marcas-grupo { margin-block-start: var(--e-5); }
.marcas-grupo h2 { font-size: var(--t-1); margin-block-end: var(--e-3); }
.marcas-cards { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); }
.marca-card { display: grid; gap: .5rem; padding: var(--e-3); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-2); }
.marca-card__logo { display: grid; place-items: center; min-block-size: 56px; }
.marca-card__logo img { max-block-size: 44px; width: auto; }
.marca-card__logo .marca-nome { font-weight: 800; font-size: var(--t-1); letter-spacing: -0.02em; }
.marca-card p { font-size: var(--t--1); color: var(--texto-suave); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .marcas-linha img, :root:not([data-tema="claro"]) .marca-card__logo img { filter: invert(1) hue-rotate(180deg) brightness(1.1); } }
:root[data-tema="escuro"] .marcas-linha img, :root[data-tema="escuro"] .marca-card__logo img { filter: invert(1) hue-rotate(180deg) brightness(1.1); }

/* guia (cards e artigo) */
.artigos { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.artigo-card h3, .artigo-card h2 { margin-block: var(--e-2) .35rem; font-size: var(--t-1); letter-spacing: -0.01em; }
.artigo-card h3 a, .artigo-card h2 a { color: var(--texto); text-decoration: none; }
.artigo-card h3 a:hover, .artigo-card h2 a:hover { color: var(--marca); text-decoration: underline; }
.artigo-card p { color: var(--texto-suave); font-size: var(--t--1); }
.artigo-card .tempo { display: block; margin-block-start: .5rem; font-size: var(--t--1); color: var(--texto-suave); }
.artigo { --medida: 66ch; }
.artigo__cabeca { display: grid; gap: var(--e-2); margin-block-end: var(--e-4); }
.artigo__cabeca h1 { font-size: var(--t-4); color: var(--marca); max-inline-size: 20ch; }
.artigo__cabeca .resumo { font-size: var(--t-1); color: var(--texto-suave); }
.artigo__capa { border-radius: var(--raio-3); overflow: hidden; margin-block-end: var(--e-5); }
.artigo__capa img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.artigo h2 { font-size: var(--t-2); color: var(--marca); margin-block: var(--e-5) var(--e-2); }
.artigo p + p { margin-block-start: var(--e-2); }

/* cabeçalho de página interna */
.trilha { font-size: var(--t--1); padding-block: var(--e-2); }
.trilha ol { display: flex; flex-wrap: wrap; gap: .35rem; color: var(--texto-suave); }
.trilha li + li::before { content: "/"; margin-inline-end: .35rem; color: var(--borda-controle); }
.trilha a { color: var(--texto-suave); }
.trilha a:hover { color: var(--marca); }
.pagina-cabeca { display: grid; gap: var(--e-4); padding-block: var(--e-3) var(--e-5); }
.pagina-cabeca h1 { font-size: var(--t-4); color: var(--marca); max-inline-size: 18ch; }
.pagina-cabeca .curta { font-size: var(--t-1); color: var(--texto-suave); max-inline-size: 46ch; }
.pagina-cabeca__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.pagina-cabeca__foto { border-radius: var(--raio-3); overflow: hidden; background: var(--superficie-2); }
.pagina-cabeca__foto img { width: 100%; height: 100%; object-fit: cover; }
.pagina-cabeca__foto--16-9 img { aspect-ratio: 16 / 9; }
.pagina-cabeca__foto--3-2 img { aspect-ratio: 3 / 2; }
.pagina-cabeca__foto--quadrada img { aspect-ratio: 1; }
@media (min-width: 900px) {
  .pagina-cabeca { grid-template-columns: 1fr 1fr; align-items: center; }
  .pagina-cabeca--larga { grid-template-columns: 1fr; }
  .pagina-cabeca--larga .pagina-cabeca__foto img { aspect-ratio: 21 / 9; }
}

/* corpo de produto e serviço */
.detalhe { display: grid; gap: var(--e-6); }
@media (min-width: 900px) { .detalhe { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.detalhe__texto p + p { margin-block-start: var(--e-2); }
.detalhe__lado { display: grid; gap: var(--e-4); }
.caixa { padding: var(--e-4); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-3); }
.caixa h2, .caixa h3 { font-size: var(--t-1); margin-block-end: var(--e-2); }
.caixa .itens { display: grid; gap: .5rem; }
.caixa .itens li { display: grid; grid-template-columns: 1.25rem 1fr; gap: .5rem; align-items: start; font-size: var(--t-0); }
.caixa .itens li .ico { color: var(--acao-hover); margin-block-start: .2rem; }
.chips li { white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.chips__rotulo { font-weight: 600; font-size: var(--t--1); color: var(--texto-suave); margin-inline-end: .25rem; }
.chips ul { display: contents; }
.chips li { padding: .25rem .7rem; border-radius: var(--raio-cheio); background: var(--marca-suave); color: var(--tijolo-700); font-size: var(--t--1); font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .chips li { color: var(--tijolo-200); } }
:root[data-tema="escuro"] .chips li { color: var(--tijolo-200); }
.galeria { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
.galeria figure { border-radius: var(--raio-2); overflow: hidden; }
.galeria img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.faq h2 { color: var(--marca); font-size: var(--t-2); margin-block-end: var(--e-3); }
.faq__item { border-block-start: 1px solid var(--borda); }
.faq__item:last-child { border-block-end: 1px solid var(--borda); }
.faq__item summary { cursor: pointer; padding: var(--e-2) 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--e-2); min-block-size: 48px; align-items: center; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-weight: 800; color: var(--marca); font-size: var(--t-1); }

.faq__item p { padding-block: 0 var(--e-3); color: var(--texto-suave); }

.relacionados__grade { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.relacionados h3 { font-size: var(--t-0); color: var(--texto-suave); margin-block-end: .75rem; }
.lista-links { display: grid; gap: .75rem; }
.lista-links li { display: grid; gap: .1rem; }
.lista-links a { font-weight: 600; }
.lista-links span { font-size: var(--t--1); color: var(--texto-suave); }

/* catálogos */
.catalogos { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); }
.catalogo { display: grid; gap: .75rem; scroll-margin-top: 7rem; }
.catalogo .moldura { box-shadow: var(--sombra-3); }
.catalogo h3 { font-size: var(--t-0); }
.catalogo p { font-size: var(--t--1); color: var(--texto-suave); }
.catalogo .btn { justify-self: start; }
.catalogos-grupo + .catalogos-grupo { margin-block-start: var(--e-6); }
.catalogos-grupo h2 { font-size: var(--t-1); margin-block-end: var(--e-3); color: var(--marca); }

/* cta em faixa */
.cta-faixa__in { display: grid; gap: var(--e-4); align-items: center; }
.cta-faixa h2 { font-size: var(--t-3); max-inline-size: 16ch; }
.cta-faixa p { margin-block-start: .75rem; color: var(--rodape-suave); max-inline-size: 52ch; }
.cta-faixa__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
@media (min-width: 900px) { .cta-faixa__in { grid-template-columns: 1.2fr 1fr; } .cta-faixa__acoes { justify-content: end; } }
.secao--marca .cta-faixa p { color: var(--rodape-suave); }
.secao--marca { background: var(--faixa-fundo); color: var(--branco); }
.secao--marca .secao__cabeca p { color: var(--rodape-suave); }
.secao--marca .passos li::before { background: var(--branco); color: var(--tijolo-600); }
.secao--marca .lista-aba { color: var(--branco); }

/* formulários */
.campo { display: grid; gap: .35rem; }
.campo label { font-weight: 600; font-size: var(--t--1); }
.campo input, .campo textarea, .campo select { width: 100%; min-block-size: 48px; padding: .6rem .8rem; border: 2px solid var(--borda-controle); border-radius: var(--raio-2); background: var(--superficie); color: var(--texto); }
.campo textarea { min-block-size: 7rem; resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible, .campo select:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-color: var(--marca); }
.form { display: grid; gap: var(--e-3); }
.form__linha { display: grid; gap: var(--e-3); }
@media (min-width: 640px) { .form__linha { grid-template-columns: 1fr 1fr; } }
.form__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.form__nota { font-size: var(--t--1); color: var(--texto-suave); }
.contato { display: grid; gap: var(--e-6); }
@media (min-width: 900px) { .contato { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.contato__bloco { display: grid; gap: var(--e-4); }
.contato__bloco address { display: grid; gap: .75rem; }
.contato__bloco address a, .contato__bloco address span { display: inline-flex; align-items: start; gap: .6rem; min-block-size: 44px; align-items: center; }
.contato__bloco address .ico { color: var(--marca); flex: none; }
.mapa { border-radius: var(--raio-3); overflow: hidden; border: 1px solid var(--borda); }
.mapa iframe { width: 100%; height: 320px; display: block; }

/* lista de pedido: aba, painel e versão inline */
.lista-aba { position: fixed; right: var(--e-2); bottom: var(--e-2); z-index: 70; display: inline-flex; align-items: center; gap: .5rem; min-block-size: 52px; padding: .75rem 1.1rem; border: 0; border-radius: var(--raio-cheio); background: var(--marca); color: var(--texto-sobre-marca); font-weight: 600; box-shadow: var(--sombra-3); transition: transform var(--d-rapido) var(--ease-ui); }
.lista-aba:hover { background: var(--marca-hover); transform: translateY(-1px); }
.lista-aba__n { display: grid; place-items: center; min-inline-size: 1.5rem; height: 1.5rem; padding-inline: .4rem; border-radius: var(--raio-cheio); background: var(--branco); color: var(--tijolo-600); font-size: var(--t--1); font-weight: 800; }
.lista-aba.pulsa { animation: pulsa .5s var(--ease-entrada); }
@keyframes pulsa { 50% { transform: scale(1.06); } }
.lista-fundo { position: fixed; inset: 0; z-index: 80; background: oklch(0.15 0.01 60 / .5); }
.lista-painel { position: fixed; inset-block: 0; right: 0; z-index: 90; width: min(100%, 26rem); background: var(--fundo); box-shadow: var(--sombra-3); display: grid; grid-template-rows: auto 1fr; transform: translateX(0); animation: deslizar var(--d-normal) var(--ease-entrada); }
@keyframes deslizar { from { transform: translateX(100%); } }
.lista-painel__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); padding: var(--e-3) var(--e-3) var(--e-2); border-block-end: 1px solid var(--borda); }
.lista-painel__topo h2 { font-size: var(--t-1); }
.lista-painel__corpo { overflow-y: auto; padding: var(--e-3); display: grid; gap: var(--e-3); align-content: start; }
.lista-vazia { color: var(--texto-suave); }
.lista-itens { display: grid; gap: var(--e-2); }
.lista-item { display: grid; gap: .5rem; padding: var(--e-2); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-2); }
.lista-item__cabeca { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.lista-item__cabeca strong { font-weight: 600; }
.lista-item__tipo { font-size: var(--t--1); color: var(--texto-suave); }
.lista-item__campos { display: grid; grid-template-columns: 5rem 1fr; gap: .5rem; }
.lista-item__campos input { min-block-size: 44px; padding: .4rem .6rem; border: 2px solid var(--borda-controle); border-radius: var(--raio-1); background: var(--superficie); color: var(--texto); width: 100%; }
.lista-form { display: grid; gap: var(--e-2); }
.lista-form__acoes { display: grid; gap: .5rem; }
.lista-inline { display: grid; gap: var(--e-4); padding: var(--e-4); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-3); }
.lista-inline .lista-painel__corpo { padding: 0; overflow: visible; }
.aviso { position: fixed; left: 50%; bottom: 5.5rem; z-index: 75; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; padding: .6rem 1rem; border-radius: var(--raio-2); background: var(--texto); color: var(--fundo); font-weight: 600; font-size: var(--t--1); transition: opacity var(--d-normal) var(--ease-ui), transform var(--d-normal) var(--ease-ui); max-inline-size: calc(100% - 2rem); text-align: center; }
.aviso.visivel { opacity: 1; transform: translate(-50%, 0); }

/* rodapé */
.rodape { background: var(--rodape-fundo); color: var(--rodape-texto); margin-block-start: var(--e-6); }
/* página que termina num bloco vermelho (faixa de CTA ou o "Manda a lista" da inicial): o rodapé encosta nela, sem tira creme no meio, e um fio separa os dois vermelhos */
main:has(> .secao--marca:last-child) + .rodape { margin-block-start: 0; border-block-start: 1px solid oklch(1 0 0 / .16); }
.rodape a { color: inherit; }
.rodape a:hover { color: inherit; text-decoration: underline; }
.rodape__grade { display: grid; gap: var(--e-5) var(--e-4); padding-block: var(--e-6) var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
.rodape__marca { grid-column: 1 / -1; display: grid; gap: var(--e-2); justify-items: start; }
.rodape__marca p { color: var(--rodape-suave); max-inline-size: 46ch; font-size: var(--t--1); }
.rodape__marca img { width: 140px; height: auto; }
/* no rodapé tijolo do tema claro a faixa vermelha da logo some: ela ganha uma placa creme */
:root:not([data-tema="escuro"]) .rodape__marca img { box-sizing: content-box; padding: .6rem .7rem; background: var(--creme-50); border-radius: var(--raio-2); box-shadow: 0 1px 2px oklch(0 0 0 / .18), 0 6px 16px oklch(0 0 0 / .14); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .rodape__marca img { padding: 0; background: none; box-shadow: none; } }
.rodape h2 { color: inherit; }
.rodape__col h2 { font-size: var(--t-0); font-weight: 800; margin-block-end: var(--e-2); }
.rodape__col ul { display: grid; gap: .25rem; }
.rodape__col li a { display: inline-flex; align-items: center; min-block-size: 44px; text-decoration: none; color: var(--rodape-suave); font-size: var(--t--1); }
.rodape__col li a:hover { color: var(--rodape-texto); text-decoration: underline; }
.rodape__contato address { display: grid; gap: .5rem; }
.rodape__contato address a, .rodape__linha { display: inline-flex; align-items: center; gap: .6rem; min-block-size: 44px; color: var(--rodape-suave); text-decoration: none; font-size: var(--t--1); }
.rodape__contato address .ico { flex: none; }
.rodape__barra { display: flex; flex-wrap: wrap; gap: .5rem var(--e-4); justify-content: space-between; padding-block: var(--e-3) var(--e-4); font-size: var(--t--1); color: var(--rodape-suave); }
.rodape__barra a { color: inherit; }
@media (min-width: 900px) { .rodape__grade { grid-template-columns: 1.5fr .9fr .9fr .9fr 1.5fr; } .rodape__marca { grid-column: auto; } }

/* privacidade e texto corrido */
.prosa { --medida: 68ch; display: grid; gap: var(--e-2); }
.prosa h2 { font-size: var(--t-1); color: var(--marca); margin-block-start: var(--e-3); }
.prosa ul { padding-inline-start: 1.25rem; display: grid; gap: .35rem; }

/* 404 */
.erro { text-align: left; padding-block: var(--e-7); display: grid; gap: var(--e-3); justify-items: start; }
.erro h1 { color: var(--marca); }