/* =========================================================================
   Marileide Oliveira Arquitetura e Interiores
   Folha de estilo unica do site.

   Montada por ferramentas/montar.py a partir de cinco blocos de partes/css/.
   A ORDEM IMPORTA: o ultimo bloco pode sobrescrever os anteriores.

   NAO EDITE ESTE ARQUIVO. Edite o bloco em partes/css/ e rode montar.py.
   ========================================================================= */

/* ====================================================================
   BLOCO 1 de 8: estilo.css
   ==================================================================== */

@charset "utf-8";

/* =========================================================================
   Marileide Oliveira Arquitetura e Interiores
   Folha de estilo principal
   Sistema de design editorial - cantos retos, filetes de 1px, muito respiro.
   O vermelho e usado apenas como cor de acao, indice e detalhe.
   ========================================================================= */

/* ---------------------------------------------------------- 0. TIPOGRAFIA
   Fontes hospedadas no proprio servidor. Nenhuma requisicao externa, nenhum
   salto de layout: o navegador ja conhece a metrica antes de pintar o texto. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fontes/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fontes/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fontes/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fontes/inter-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fontes/inter-tight-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fontes/inter-tight-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fontes/inter-tight-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fontes/inter-tight-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fontes/inter-tight-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fontes/inter-tight-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------- 1. TOKENS */

:root {
  /* Paleta da marca */
  --cor-vermelho: #d92d35;
  --cor-vermelho-escuro: #b5222b;
  --cor-grafite: #292c30;
  --cor-bege: #d8d5cf;
  --cor-branco-quente: #f5f3ef;

  /* Papeis de superficie */
  --sup-papel: var(--cor-branco-quente);
  --sup-papel-puro: #ffffff;
  --sup-suave: var(--cor-bege);
  --sup-escura: var(--cor-grafite);
  --sup-escura-alt: #32363b;

  /* Texto - cada par abaixo foi verificado para WCAG AA */
  --txt-forte: var(--cor-grafite);          /* 12,6:1 sobre papel */
  --txt-suave: #565a60;                     /* 6,3:1 sobre papel, 4,7:1 sobre bege */
  --txt-sobre-escuro: var(--cor-branco-quente); /* 12,6:1 sobre grafite */
  --txt-suave-escuro: #b9b6af;              /* 6,9:1 sobre grafite */

  /* Acento - variantes por fundo */
  --acento: var(--cor-vermelho);            /* preenchimentos e textos grandes */
  --acento-hover: var(--cor-vermelho-escuro);
  --acento-texto: var(--cor-vermelho-escuro);   /* 5,9:1 sobre papel */
  --acento-no-escuro: #ef7a80;              /* 5,2:1 sobre grafite */
  --acento-suave: #fbeceb;

  /* Estrela de avaliacao. O primeiro alcanca 3:1 sobre branco, que e o
     minimo de um elemento grafico; o segundo e a versao para fundo
     escuro, com 7,3:1 sobre o grafite. */
  --dourado: #c0860c;
  --dourado-claro: #e8b23a;

  /* Filetes */
  --filete: #ccc8c0;
  --filete-claro: var(--cor-bege);
  --filete-escuro: #3d4147;

  /* Sobreposicoes */
  --veu-escuro: rgba(41, 44, 48, 0.42);
  --veu-forte: rgba(41, 44, 48, 0.72);

  /* Tipografia */
  --fonte-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --fonte-texto: "Inter", "Helvetica Neue", Arial, sans-serif;

  --ts-xs: 0.75rem;
  --ts-sm: 0.875rem;
  --ts-base: 1rem;
  --ts-lg: 1.125rem;
  --ts-xl: 1.375rem;
  --ts-h4: clamp(1.375rem, 2vw, 1.875rem);
  --ts-h3: clamp(1.75rem, 3vw, 2.75rem);
  --ts-h2: clamp(2.125rem, 5vw, 4.25rem);
  --ts-h1: clamp(2.5rem, 6.4vw, 6rem);
  --ts-metrica: clamp(3rem, 7vw, 6.5rem);

  --al-justa: 0.92;
  --al-display: 0.98;
  --al-titulo: 1.06;
  --al-texto: 1.6;

  --ee-display: -0.045em;
  --ee-titulo: -0.035em;
  --ee-texto: -0.011em;

  /* Espacos */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.25rem;
  --e6: 1.5rem;
  --e8: 2rem;
  --e10: 2.5rem;
  --e12: 3rem;
  --e16: 4rem;
  --e20: 5rem;
  --e24: 6rem;

  /* Layout */
  --largura-conteudo: 1440px;
  --gutter: 3rem;
  --espaco-secao: clamp(5rem, 9vw, 10rem);

  /* Movimento */
  --t-rapido: 180ms;
  --t-normal: 300ms;
  --t-lento: 640ms;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1023px) {
  :root { --gutter: 1.75rem; }
}

@media (max-width: 767px) {
  :root {
    --gutter: 1.125rem;
    --espaco-secao: 4rem;
  }
}

/* ---------------------------------------------------------------- 2. BASE */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background-color: var(--sup-papel);
  color: var(--txt-forte);
  font-family: var(--fonte-texto);
  font-size: var(--ts-base);
  line-height: var(--al-texto);
  letter-spacing: var(--ee-texto);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--fonte-display);
  font-weight: 500;
  letter-spacing: var(--ee-titulo);
  line-height: var(--al-titulo);
  text-wrap: balance;
}

h1 { font-size: var(--ts-h1); line-height: var(--al-display); letter-spacing: var(--ee-display); }
h2 { font-size: var(--ts-h2); line-height: var(--al-display); letter-spacing: var(--ee-display); }
h3 { font-size: var(--ts-h3); }
h4 { font-size: var(--ts-h4); }

p { margin: 0 0 var(--e4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a { color: inherit; text-decoration: none; }

img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; border-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

address { font-style: normal; }

dl, dd { margin: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--filete);
  margin: 0;
}

::selection {
  background-color: var(--acento);
  color: #ffffff;
}

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

.secao-escura :focus-visible { outline-color: var(--acento-no-escuro); }

/* Pular para o conteudo */
.pular-link {
  position: absolute;
  left: var(--e4);
  top: var(--e4);
  z-index: 200;
  padding: var(--e3) var(--e5);
  background-color: var(--cor-grafite);
  color: var(--txt-sobre-escuro);
  font-size: var(--ts-sm);
  font-weight: 500;
  transform: translateY(-160%);
  transition: transform var(--t-rapido) var(--curva);
}

.pular-link:focus-visible { transform: translateY(0); }

.apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- 3. LAYOUT */

.envoltorio {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao { padding-block: var(--espaco-secao); }

.secao-escura {
  background-color: var(--sup-escura);
  color: var(--txt-sobre-escuro);
}

.secao-escura h1,
.secao-escura h2,
.secao-escura h3,
.secao-escura h4 { color: var(--txt-sobre-escuro); }

/* O bege e mais claro que o papel, entao o vermelho de texto precisa descer um
   tom para se manter em WCAG AA. A diferenca e imperceptivel a olho nu. */
.secao-suave {
  background-color: var(--sup-suave);
  --acento-texto: #a81f27;                  /* 5,0:1 sobre bege */
  --filete: #bdb9b0;
}

.trama-pontos {
  background-image: radial-gradient(circle, rgba(245, 243, 239, 0.09) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
}

.cabecalho-secao {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--e10);
  align-items: end;
}

@media (max-width: 899px) {
  .cabecalho-secao { grid-template-columns: 1fr; gap: var(--e6); }
}

.medida { max-width: 62ch; }
.medida-curta { max-width: 46ch; }

/* --------------------------------------------------------- 4. COMPONENTES */

/* Sobrancelha */
.sobrancelha {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e5);
  font-family: var(--fonte-texto);
  font-size: var(--ts-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--acento-texto);
}

.sobrancelha::before,
.sobrancelha::after {
  content: "";
  width: 5px;
  height: 5px;
  background-color: var(--acento);
  flex: none;
}

.secao-escura .sobrancelha { color: var(--acento-no-escuro); }
.secao-escura .sobrancelha::before,
.secao-escura .sobrancelha::after { background-color: var(--acento-no-escuro); }

/* Botoes */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e3);
  min-height: 48px;
  padding-inline: var(--e5);
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--fonte-texto);
  font-size: var(--ts-sm);
  font-weight: 500;
  letter-spacing: var(--ee-texto);
  text-align: center;
  transition: background-color var(--t-rapido) var(--curva),
              color var(--t-rapido) var(--curva),
              border-color var(--t-rapido) var(--curva);
}

/* Marcador de entrada: um quadrado de 6px que se estica em barra ao passar o
   ponteiro, empurrando o texto. Ao mesmo tempo a seta da direita sai de cena.
   O marcador é pseudo-elemento, então nenhum botão precisou de HTML extra. */
.botao::before {
  content: "";
  width: 28px;          /* a caixa não muda de tamanho: só o preenchimento */
  height: 6px;
  flex: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 6px 100%;
  transition: background-size var(--t-normal) var(--curva),
              border-radius var(--t-normal) var(--curva);
}

.botao:hover::before,
.botao:focus-visible::before {
  background-size: 100% 100%;
  border-radius: 999px;
}

.botao .icone {
  flex: none;
  transition: transform var(--t-normal) var(--curva),
              opacity var(--t-rapido) var(--curva);
}

.botao:hover .icone,
.botao:focus-visible .icone {
  opacity: 0;
  transform: translateX(14px);
}

.botao-principal {
  background-color: var(--acento);
  border-color: var(--acento);
  color: #ffffff;
}

.botao-principal:hover {
  background-color: var(--acento-hover);
  border-color: var(--acento-hover);
}

.botao-contorno {
  background-color: transparent;
  border-color: var(--acento);
  color: var(--acento-texto);
}

.botao-contorno:hover {
  background-color: var(--acento);
  color: #ffffff;
}

.secao-escura .botao-contorno {
  border-color: var(--acento-no-escuro);
  color: var(--acento-no-escuro);
}

.secao-escura .botao-contorno:hover {
  background-color: var(--acento);
  border-color: var(--acento);
  color: #ffffff;
}

.botao-claro {
  background-color: var(--cor-branco-quente);
  border-color: var(--cor-branco-quente);
  color: var(--txt-forte);
}

.botao-claro:hover {
  background-color: var(--sup-suave);
  border-color: var(--sup-suave);
}

.grupo-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
}

/* Link de texto com filete */
.link-filete {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  font-size: var(--ts-sm);
  font-weight: 500;
  color: var(--acento-texto);
  transition: color var(--t-rapido) var(--curva);
}

.link-filete:hover { color: var(--acento); }

.secao-escura .link-filete { color: var(--acento-no-escuro); }
.secao-escura .link-filete:hover { color: var(--cor-branco-quente); }

/* Botao quadrado com seta */
.seta-quadrada {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--filete);
  color: var(--txt-suave);
  transition: background-color var(--t-rapido) var(--curva),
              border-color var(--t-rapido) var(--curva),
              color var(--t-rapido) var(--curva);
}

.icone {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.icone-md { width: 1.25rem; height: 1.25rem; }
.icone-lg { width: 1.625rem; height: 1.625rem; }

/* ------------------------------------------------------- 5. CABECALHO/NAV */

.cabecalho {
  position: relative;
  z-index: 60;
  background-color: var(--sup-papel);
  border-bottom: 1px solid var(--filete-claro);
}

.cabecalho-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e6);
  min-height: 84px;
}

.marca {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.marca img {
  width: auto;
  height: 52px;
}

.nav-principal ul {
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-principal li { display: flex; align-items: center; }

.nav-principal li + li::before {
  content: "/";
  margin-inline: 0.45rem;
  color: var(--filete);
  font-size: var(--ts-xs);
}

.nav-principal a {
  padding: var(--e2) var(--e1);
  font-size: var(--ts-xs);
  font-weight: 500;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--txt-forte);
  transition: color var(--t-rapido) var(--curva);
}

.nav-principal a:hover { color: var(--acento-texto); }

.acoes-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex: none;
}

/* Menu compacto - <details>, funciona sem JavaScript */
.menu-compacto { display: none; }

.menu-compacto > summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--filete);
  cursor: pointer;
  list-style: none;
  color: var(--txt-forte);
}

.menu-compacto > summary::-webkit-details-marker { display: none; }
.menu-compacto > summary .icone-fechar { display: none; }
.menu-compacto[open] > summary .icone-fechar { display: block; }
.menu-compacto[open] > summary .icone-abrir { display: none; }

.painel-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: var(--e4) var(--gutter) var(--e8);
  background-color: var(--sup-papel);
  border-bottom: 1px solid var(--filete-claro);
}

.painel-menu ul { display: grid; }

.painel-menu li + li { border-top: 1px solid var(--filete-claro); }

.painel-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding-block: var(--e4);
  font-family: var(--fonte-display);
  font-size: var(--ts-lg);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.painel-menu .botao { margin-top: var(--e6); width: 100%; }

/* Com seis itens o menu completo volta a caber em tela de notebook, entao o
   menu compacto so entra abaixo de 1024px. Medido: em 1024 ainda sobra folga
   entre o menu e o botao de chamada. */
@media (max-width: 1023px) {
  .nav-principal,
  .acoes-cabecalho > .botao { display: none; }   /* filho direto: preserva o botao dentro do painel */
  .menu-compacto { display: block; }
  .cabecalho-interno { min-height: 70px; }
}

/* --------------------------------------------- 5b. SUPERMENU DE SERVICOS
   Dropdown ancorado ao item "Servicos", aberto por ponteiro (hover) e por
   teclado (:focus-within). CSS puro, sem JavaScript. Os tres grupos ficam
   empilhados na vertical, alinhados, com "Ver todos os servicos" ao final.
   Abaixo de 1024px vira o painel compacto (.submenu-compacto). */
.tem-supermenu { position: relative; }

.supermenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 70;
  width: 320px;
  max-width: 92vw;
  padding: var(--e5);
  background-color: var(--sup-papel-puro);
  border: 1px solid var(--filete);
  box-shadow: 0 24px 60px -40px rgba(41, 44, 48, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--t-rapido) var(--curva),
              transform var(--t-rapido) var(--curva),
              visibility 0s linear var(--t-rapido);
}

.tem-supermenu:hover > .supermenu,
.tem-supermenu:focus-within > .supermenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Fechado pela tecla Esc: vence o :focus-within enquanto o foco fica no
   proprio item "Servicos", ate o foco sair ou o ponteiro reentrar. */
.tem-supermenu.supermenu-fechado > .supermenu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
}

.supermenu-grupo + .supermenu-grupo {
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--filete-claro);
}

.supermenu-titulo {
  margin: 0 0 var(--e2);
  font-size: var(--ts-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-suave);
}

.supermenu ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; }
.supermenu li { display: block; }
.supermenu li + li::before { content: none; margin: 0; }   /* cancela o "/" do menu */

.supermenu a {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e3);
  font-size: var(--ts-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: var(--txt-forte);
}

.supermenu a .icone { flex: none; color: var(--acento-texto); }

.supermenu a:hover,
.supermenu a:focus-visible {
  background-color: var(--acento-suave);
  color: var(--acento-texto);
}

.supermenu-todos {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--filete);
  font-size: var(--ts-xs);
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--acento-texto);
}

.supermenu-todos .icone { color: var(--acento-texto); }

/* Servicos dentro do painel compacto (celular). */
.submenu-compacto { margin: 0 0 var(--e4); padding: 0; list-style: none; display: grid; }
.submenu-compacto li + li { border-top: none; }
.submenu-compacto a {
  justify-content: flex-start;
  gap: var(--e2);
  padding-block: var(--e3);
  padding-left: var(--e4);
  font-family: var(--fonte-texto);
  font-size: var(--ts-sm);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--txt-suave);
}
.submenu-compacto a:hover { color: var(--acento-texto); }

/* No celular, "Servicos" e um <details>: fica fechado e abre ao toque,
   sem JavaScript. O resumo imita os demais itens do painel compacto. */
.servico-compacto > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding-block: var(--e4);
  font-family: var(--fonte-display);
  font-size: var(--ts-lg);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--txt-forte);
  cursor: pointer;
  list-style: none;
}
.servico-compacto > summary::-webkit-details-marker { display: none; }
.servico-compacto > summary .icone { transition: transform var(--t-rapido) var(--curva); }
.servico-compacto[open] > summary .icone { transform: rotate(90deg); }
.servico-compacto .submenu-compacto { margin-top: var(--e2); }
/* Fechado: o display:grid do submenu sobrepunha o ocultamento nativo do
   <details>. Aqui o submenu volta a ficar escondido enquanto fechado. */
.servico-compacto:not([open]) > .submenu-compacto { display: none; }

@media (prefers-reduced-motion: reduce) {
  .servico-compacto > summary .icone { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .supermenu { transition: none; transform: translateX(-50%); }
  .tem-supermenu:hover > .supermenu,
  .tem-supermenu:focus-within > .supermenu { transform: translateX(-50%); }
}

/* ------------------------------------------------------------- 6. CAPA */

.capa {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(880px, 92svh);
  overflow: hidden;
  background-color: var(--cor-grafite);
  isolation: isolate;
}

.capa-midia {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.capa-midia img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: capa-troca 21s infinite var(--curva);
}

.capa-midia img:nth-child(1) { animation-delay: 0s; }
.capa-midia img:nth-child(2) { animation-delay: 7s; }
.capa-midia img:nth-child(3) { animation-delay: 14s; }

@keyframes capa-troca {
  0%      { opacity: 0; }
  3%      { opacity: 1; }
  33.33%  { opacity: 1; }
  36.33%  { opacity: 0; }
  100%    { opacity: 0; }
}

.capa-veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(41, 44, 48, 0.72) 0%,
    rgba(41, 44, 48, 0.52) 34%,
    rgba(41, 44, 48, 0.66) 62%,
    rgba(41, 44, 48, 0.9) 100%
  );
}

.capa-conteudo {
  width: 100%;
  padding-block: clamp(6rem, 12vw, 9rem) clamp(2.5rem, 5vw, 4rem);
  color: var(--cor-branco-quente);
}

.capa .sobrancelha { color: #ffffff; }
.capa .sobrancelha::before,
.capa .sobrancelha::after { background-color: var(--acento); }

.capa h1 {
  max-width: 17ch;
  color: #ffffff;
  text-shadow: 0 1px 24px rgba(41, 44, 48, 0.32);
}

.capa-resumo {
  max-width: 54ch;
  margin-top: var(--e6);
  font-size: var(--ts-lg);
  color: rgba(245, 243, 239, 0.94);
}

.capa .grupo-botoes { margin-top: var(--e8); }

.capa-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e5);
  margin-top: clamp(3rem, 7vw, 5.5rem);
  padding-top: var(--e5);
  border-top: 1px solid rgba(245, 243, 239, 0.28);
}

.capa-projetos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e6);
  font-size: var(--ts-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(245, 243, 239, 0.82);
}

.capa-projetos li { display: flex; align-items: center; gap: var(--e2); }

.capa-projetos li::before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: var(--acento);
  flex: none;
}

.capa-registro {
  font-size: var(--ts-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(245, 243, 239, 0.7);
}

@media (max-width: 767px) {
  .capa { min-height: 84svh; }
}

/* ------------------------------------------------------- 7. CAMINHOS */

/* Cinco servicos. O filete de 1px vem do fundo da grade, nao das bordas de
   cada cartao: assim a malha fecha certo em qualquer quantidade de colunas. */
.caminhos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--filete);
  border: 1px solid var(--filete);
}

.caminho {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 330px;
  padding: var(--e8) var(--e5) var(--e6);
  background-color: var(--sup-papel);
  transition: background-color var(--t-normal) var(--curva),
              color var(--t-normal) var(--curva);
}

.caminho-icone {
  color: var(--acento-texto);
  margin-bottom: var(--e6);
  transition: color var(--t-normal) var(--curva);
}

.caminho h3 {
  font-size: clamp(1.125rem, 1.5vw, 1.5rem);
  line-height: 1.12;
  margin-bottom: var(--e3);
  text-wrap: balance;
}

.caminho p {
  font-size: var(--ts-sm);
  color: var(--txt-suave);
  transition: color var(--t-normal) var(--curva);
}

.caminho-rodape {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-top: auto;
  padding-top: var(--e6);
  font-size: var(--ts-sm);
  font-weight: 500;
  color: var(--acento-texto);
  transition: color var(--t-normal) var(--curva);
}

.caminho:hover,
.caminho:focus-visible {
  background-color: var(--acento);
  color: #ffffff;
}

.caminho:hover .caminho-icone,
.caminho:hover p,
.caminho:hover .caminho-rodape,
.caminho:focus-visible .caminho-icone,
.caminho:focus-visible p,
.caminho:focus-visible .caminho-rodape { color: #ffffff; }

.caminho:hover .caminho-rodape .icone,
.caminho:focus-visible .caminho-rodape .icone { transform: translate(3px, -3px); }

.caminho-rodape .icone { transition: transform var(--t-rapido) var(--curva); }

@media (max-width: 1259px) {
  .caminhos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .caminho { min-height: 290px; }
}

@media (max-width: 899px) {
  .caminhos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caminho { min-height: 270px; }
}

@media (max-width: 599px) {
  .caminhos { grid-template-columns: 1fr; }
  .caminho { min-height: 0; }
}

/* --------------------------------------------------- 8. ABERTURA EDITORIAL */

.abertura h2 { max-width: 20ch; }

.abertura-grade {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  gap: var(--e8);
  margin-top: var(--e16);
  padding-top: var(--e8);
  border-top: 1px solid var(--filete-escuro);
}

.abertura-grade p { color: var(--txt-suave-escuro); }

.abertura-grade h3 {
  font-size: var(--ts-xl);
  margin-bottom: var(--e3);
}

@media (max-width: 899px) {
  .abertura-grade { grid-template-columns: 1fr; gap: var(--e8); }
}

/* --------------------------------------------------------- 9. SOBRE */

.sobre-grade {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.sobre-texto > p + p { margin-top: var(--e4); }

.sobre-texto .medida { margin-top: var(--e8); }

.sobre-figura { position: relative; }

.sobre-figura img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* ------------------------------------------------- Ladrilho com painel
   Sem ponteiro (toque, teclado, leitor de tela) o painel fica sempre visível
   como um selo no rodapé da imagem. Com ponteiro fino, ele passa a cobrir o
   ladrilho inteiro e só aparece ao passar o mouse. */

.ladrilho { overflow: hidden; }

.ladrilho img { transition: transform var(--t-lento) var(--curva); }

.ladrilho-marca { display: none; }

/* Base (toque, teclado, leitura): o painel fica embaixo da imagem, inteiro e
   legível. Nada é escondido atrás de um gesto que o aparelho não tem. */
.ladrilho-painel {
  padding: var(--e6);
  background-color: var(--acento);
  color: #ffffff;
}

.ladrilho-asterisco {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: var(--e5);
  stroke-width: 1.4;
}

.ladrilho-titulo {
  margin: 0 0 var(--e2);
  font-family: var(--fonte-display);
  font-size: var(--ts-xl);
  font-weight: 500;
  letter-spacing: var(--ee-titulo);
  line-height: 1.15;
}

.ladrilho-texto {
  margin: 0;
  font-size: var(--ts-sm);
  line-height: 1.55;
  color: #ffffff;
}

.ladrilho-dados {
  display: grid;
  gap: var(--e2);
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid rgba(255, 255, 255, 0.38);
  font-size: var(--ts-sm);
}

.ladrilho-dados div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

.ladrilho-dados dt { color: #ffffff; font-weight: 400; }
.ladrilho-dados dt::after { content: ":"; }
.ladrilho-dados dd { font-weight: 500; }

@media (hover: hover) and (pointer: fine) {
  .ladrilho-marca {
    position: absolute;
    right: var(--e5);
    bottom: var(--e5);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    color: #ffffff;
    transition: opacity var(--t-normal) var(--curva),
                transform var(--t-normal) var(--curva);
  }

  .ladrilho-marca .icone {
    width: 100%;
    height: 100%;
    stroke-width: 1;
    filter: drop-shadow(0 1px 6px rgba(41, 44, 48, 0.55));
  }

  .ladrilho-painel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    opacity: 0;
    transform: scale(0.985);
    transition: opacity var(--t-normal) var(--curva),
                transform var(--t-normal) var(--curva);
  }

  .ladrilho-painel > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--t-normal) var(--curva),
                transform var(--t-normal) var(--curva);
  }

  .ladrilho:hover .ladrilho-marca,
  .ladrilho:focus-within .ladrilho-marca {
    opacity: 0;
    transform: rotate(45deg) scale(0.85);
  }

  .ladrilho:hover img,
  .ladrilho:focus-within img { transform: scale(1.03); }

  .ladrilho:hover .ladrilho-painel,
  .ladrilho:focus-within .ladrilho-painel {
    opacity: 1;
    transform: scale(1);
  }

  .ladrilho:hover .ladrilho-painel > *,
  .ladrilho:focus-within .ladrilho-painel > * {
    opacity: 1;
    transform: none;
  }

  .ladrilho:hover .ladrilho-painel > *:nth-child(2) { transition-delay: 60ms; }
  .ladrilho:hover .ladrilho-painel > *:nth-child(3) { transition-delay: 110ms; }
  .ladrilho:hover .ladrilho-painel > *:nth-child(4) { transition-delay: 160ms; }

  .ladrilho-titulo { font-size: var(--ts-h4); }
}

@media (prefers-reduced-motion: reduce) {
  .ladrilho-painel,
  .ladrilho-painel > *,
  .ladrilho-marca,
  .ladrilho img { transition: none; transform: none; }
}

@media (max-width: 899px) {
  .sobre-grade { grid-template-columns: 1fr; }
  .sobre-figura { order: -1; }
}

/* Metricas */
.metricas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e8);
  margin-top: var(--espaco-secao);
}

.metrica { border-top: 1px solid var(--filete); padding-top: var(--e6); }

.metrica dt {
  font-size: var(--ts-sm);
  color: var(--txt-suave);
  margin-bottom: var(--e4);
}

.metrica dd {
  font-family: var(--fonte-display);
  font-size: var(--ts-metrica);
  font-weight: 500;
  line-height: var(--al-justa);
  letter-spacing: var(--ee-display);
  font-variant-numeric: tabular-nums;
}

.metrica-nota {
  display: block;
  margin-top: var(--e3);
  font-family: var(--fonte-texto);
  font-size: var(--ts-sm);
  font-weight: 400;
  letter-spacing: var(--ee-texto);
  line-height: 1.5;
  color: var(--txt-suave);
}

@media (max-width: 899px) {
  .metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e6); }
}

@media (max-width: 479px) {
  .metricas { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- 10. SERVICOS */

.lista-servicos {
  margin-top: var(--e12);
  border-top: 1px solid var(--filete);
}

.linha-servico {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e5);
  min-height: 112px;
  padding: var(--e6) var(--e4) var(--e6) 0;
  border-bottom: 1px solid var(--filete);
  transition: background-color var(--t-normal) var(--curva),
              padding-left var(--t-normal) var(--curva);
}

.linha-servico:hover,
.linha-servico:focus-visible {
  background-color: var(--sup-papel-puro);
  padding-left: var(--e5);
}

.servico-indice {
  font-family: var(--fonte-display);
  font-size: var(--ts-xl);
  font-weight: 500;
  color: var(--txt-suave);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-normal) var(--curva);
}

.linha-servico:hover .servico-indice,
.linha-servico:focus-visible .servico-indice { color: var(--acento); }

.servico-titulo {
  font-family: var(--fonte-display);
  font-size: clamp(1.375rem, 2.4vw, 2.25rem);
  font-weight: 500;
  line-height: var(--al-titulo);
  letter-spacing: var(--ee-titulo);
  margin-bottom: var(--e2);
}

.servico-resumo {
  max-width: 54ch;
  font-size: var(--ts-sm);
  color: var(--txt-suave);
}

.linha-servico:hover .seta-quadrada,
.linha-servico:focus-visible .seta-quadrada {
  background-color: var(--acento);
  border-color: var(--acento);
  color: #ffffff;
}

/* Miniatura flutuante - somente em telas grandes e com ponteiro fino */
.servico-previa {
  position: absolute;
  right: 17%;
  bottom: -0.75rem;
  z-index: 2;
  width: clamp(9.5rem, 13vw, 14.5rem);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  pointer-events: none;
  transition: opacity var(--t-normal) var(--curva),
              transform var(--t-normal) var(--curva);
}

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

.linha-servico:nth-child(odd) .servico-previa { rotate: -7deg; }
.linha-servico:nth-child(even) .servico-previa { rotate: 7deg; }

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .linha-servico:hover .servico-previa,
  .linha-servico:focus-within .servico-previa {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 1023px) {
  .servico-previa { display: none; }
  .linha-servico { grid-template-columns: 3rem minmax(0, 1fr) auto; min-height: 0; gap: var(--e4); }
}

@media (max-width: 479px) {
  .linha-servico { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .linha-servico .seta-quadrada { display: none; }
}

/* ------------------------------------------------------- 11. PROJETOS */

.grade-projetos {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: var(--e10) var(--e6);
  margin-top: var(--e16);
}

.cartao-projeto { grid-column: span 6; }
.cartao-projeto--largo { grid-column: span 7; }
.cartao-projeto--estreito { grid-column: span 5; }

.projeto-midia {
  position: relative;
  overflow: hidden;
  background-color: var(--sup-escura-alt);
}

.projeto-midia img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-lento) var(--curva);
}

.cartao-projeto:hover .projeto-midia img,
.cartao-projeto:focus-within .projeto-midia img { transform: scale(1.03); }

.projeto-veu {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-color: rgba(217, 45, 53, 0.5);
  opacity: 0;
  transition: opacity var(--t-normal) var(--curva);
}

.cartao-projeto:hover .projeto-veu,
.cartao-projeto:focus-within .projeto-veu { opacity: 1; }

.projeto-rotulo {
  padding: var(--e2) var(--e4);
  background-color: rgba(245, 243, 239, 0.95);
  color: var(--txt-forte);
  font-size: var(--ts-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.projeto-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  padding-top: var(--e4);
}

.projeto-meta h3 { font-size: var(--ts-xl); }

.projeto-meta span {
  font-size: var(--ts-sm);
  color: var(--txt-suave-escuro);
}

@media (max-width: 899px) {
  .grade-projetos { grid-template-columns: 1fr; gap: var(--e10); }
  .cartao-projeto,
  .cartao-projeto--largo,
  .cartao-projeto--estreito { grid-column: auto; }
}

/* --------------------------------------------- 10b. PROJETOS PRONTOS */

.grade-plantas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e6);
  margin-top: var(--e12);
}

.planta {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--filete);
  background-color: var(--sup-papel-puro);
}

.planta-desenho {
  position: relative;
  padding: var(--e6) var(--e6) var(--e4);
  background-color: var(--sup-suave);
  border-bottom: 1px solid var(--filete);
  /* Sobre o bege, o vermelho escuro fica em 4,44:1 e reprova. Este tom
     alcanca 5,0:1 e mantem a leitura da marca. */
  --acento-texto: #a81f27;
}

.planta-desenho svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Esquema do lote: a rua, o terreno e a area construida, desenhados na
   proporcao real de cada largura de frente. */
.planta-rua {
  fill: none;
  stroke: var(--txt-suave);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.planta-lote {
  fill: var(--sup-papel-puro);
  stroke: var(--txt-suave);
  stroke-width: 1.2;
}

.planta-casa {
  fill: var(--cor-grafite);
  stroke: none;
}

.planta-cota {
  fill: none;
  stroke: var(--acento-texto);
  stroke-width: 1.4;
  stroke-linecap: square;
}

.planta-cota-fina {
  fill: none;
  stroke: var(--txt-suave);
  stroke-width: 1;
  stroke-linecap: square;
}

.planta-frente {
  margin-top: var(--e3);
  font-size: var(--ts-sm);
  color: var(--txt-suave);
}

.planta-frente span {
  font-family: var(--fonte-display);
  font-size: var(--ts-xl);
  font-weight: 500;
  color: var(--acento-texto);
  font-variant-numeric: tabular-nums;
  margin-right: var(--e1);
}

.planta-corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--e6);
}

.planta-corpo h3 {
  font-size: var(--ts-xl);
  margin-bottom: var(--e3);
}

.planta-corpo > p {
  color: var(--txt-suave);
  font-size: var(--ts-sm);
  margin-bottom: var(--e6);
}

.planta-dados {
  margin: 0 0 var(--e6);
  border-top: 1px solid var(--filete);
}

.planta-dados > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--filete);
}

.planta-dados dt {
  font-size: var(--ts-sm);
  color: var(--txt-suave);
}

.planta-dados dd {
  margin: 0;
  font-size: var(--ts-sm);
  font-weight: 500;
  text-align: right;
  color: var(--txt-forte);
}

/* O botao fica preso embaixo, na mesma altura nos tres cartoes. */
.planta-acao {
  margin-top: auto;
  justify-content: flex-start;
  width: 100%;
}

.prontos-subtitulo {
  font-size: var(--ts-h4);
  margin-top: var(--e24);
  padding-top: var(--e8);
  border-top: 1px solid var(--filete);
}

.grade-entregaveis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e10) var(--e8);
  margin: var(--e10) 0 0;
  padding: 0;
  list-style: none;
}

.grade-entregaveis > li > .icone { color: var(--acento-texto); }

.grade-entregaveis h3,
.grade-entregaveis h4 {
  font-size: var(--ts-lg);
  line-height: var(--al-titulo);
  margin: var(--e4) 0 var(--e2);
}

/* Oito itens pedem quatro colunas: duas linhas cheias, sem sobra. */
.grade-entregaveis--quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1199px) {
  .grade-entregaveis--quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.grade-entregaveis p {
  color: var(--txt-suave);
  font-size: var(--ts-sm);
}

/* Em telas estreitas a tabela rola na horizontal. O aviso so aparece
   quando isso acontece de fato. */
.aviso-arrastar {
  display: none;
  margin-top: var(--e8);
  font-size: var(--ts-sm);
  color: var(--txt-suave);
}

@media (max-width: 799px) {
  .aviso-arrastar { display: block; }
}

.tabela-rolavel {
  margin-top: var(--e10);
  overflow-x: auto;
}

@media (max-width: 799px) {
  .tabela-rolavel { margin-top: var(--e4); }
}

.tabela-rolavel:focus-visible {
  outline: 2px solid var(--acento-texto);
  outline-offset: 4px;
}

.tabela-comparativa {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}

.tabela-comparativa th,
.tabela-comparativa td {
  padding: var(--e4);
  border-bottom: 1px solid var(--filete);
  vertical-align: top;
  font-size: var(--ts-sm);
}

.tabela-comparativa thead th {
  border-bottom: 2px solid var(--cor-grafite);
  font-family: var(--fonte-display);
  font-size: var(--ts-base);
  font-weight: 500;
  color: var(--txt-forte);
}

.tabela-comparativa tbody th {
  width: 20%;
  font-weight: 500;
  color: var(--txt-forte);
}

.tabela-comparativa td { color: var(--txt-suave); }

/* A coluna recomendada recebe o realce. Por padrao e a do meio; a
   variacao --ultima realca a ultima, em tabelas de quatro colunas. */
.tabela-comparativa thead th:nth-child(3),
.tabela-comparativa tbody td:nth-child(3) {
  background-color: var(--acento-suave);
  color: var(--txt-forte);
}

.tabela-comparativa--ultima thead th:nth-child(3),
.tabela-comparativa--ultima tbody td:nth-child(3) {
  background-color: transparent;
  color: var(--txt-suave);
}

.tabela-comparativa--ultima thead th:last-child,
.tabela-comparativa--ultima tbody td:last-child {
  background-color: var(--acento-suave);
  color: var(--txt-forte);
}

.prontos-ressalva {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e6);
  align-items: start;
  margin-top: var(--e16);
  padding: var(--e8);
  background-color: var(--sup-suave);
  --acento-texto: #a81f27;
}

.prontos-ressalva > .icone { color: var(--acento-texto); }

.prontos-ressalva h3 {
  font-size: var(--ts-lg);
  margin-bottom: var(--e3);
}

.prontos-ressalva p {
  color: #565a60;
  max-width: 78ch;
}

@media (max-width: 1023px) {
  .grade-plantas { grid-template-columns: 1fr; }
  .grade-entregaveis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .grade-entregaveis { grid-template-columns: 1fr; }
  .prontos-ressalva {
    grid-template-columns: 1fr;
    padding: var(--e6);
  }
}

/* ------------------------------------------- 11b. ANTES E DEPOIS */

.comparativo-cabeca {
  margin-top: var(--e24);
  padding-top: var(--e10);
  border-top: 1px solid var(--filete-escuro);
}

.comparativo-cabeca h3 {
  font-size: var(--ts-h3);
  max-width: 20ch;
  margin-bottom: var(--e4);
}

.comparativo-cabeca p {
  color: var(--txt-suave-escuro);
  max-width: 54ch;
}

.comparativo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e6);
  margin-top: var(--e10);
}

.comparativo-lado {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.comparativo-quadro {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--sup-escura-alt);
}

.comparativo-quadro > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-lento) var(--curva);
}

.comparativo-lado:hover .comparativo-quadro > img { transform: scale(1.03); }

.comparativo-selo {
  position: absolute;
  left: 0;
  top: 0;
  padding: var(--e2) var(--e5);
  background-color: var(--cor-branco-quente);
  color: var(--cor-grafite);
  font-size: var(--ts-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Branco puro sobre o vermelho da marca: 4,80:1, acima do minimo AA. */
.comparativo-lado--depois .comparativo-selo {
  background-color: var(--acento);
  color: #ffffff;
}

.comparativo-lado > figcaption {
  padding-top: var(--e4);
  font-size: var(--ts-sm);
  color: var(--txt-suave-escuro);
}

@media (max-width: 767px) {
  .comparativo { grid-template-columns: 1fr; gap: var(--e8); }
}

/* ------------------------------------------------------- 12. PROCESSO */

/* A entrada lateral desloca os cartoes para fora da area util por alguns
   milissegundos. O clip impede que isso crie rolagem horizontal, sem
   transformar a secao em um contexto de rolagem. A classe vale para
   qualquer pagina que use as etapas, nao so para a home. */
.recorta-lateral { overflow-x: clip; }

.grade-processo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 4.5rem);
  margin-top: var(--e16);
}

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

.etapa:nth-child(even) { margin-top: clamp(0rem, 6vw, 5rem); }

/* Moldura fixa: a imagem se move dentro dela, nunca a caixa. */
.etapa-quadro {
  position: relative;
  overflow: hidden;
  background-color: var(--sup-escura-alt);
  margin-bottom: var(--e6);
}

.etapa-quadro > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Filete que corre sob a imagem quando a etapa entra em cena. */
.etapa-quadro::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(1);
  transform-origin: left center;
  background-color: var(--acento-no-escuro);
  transition: transform 900ms var(--curva) 260ms;
}

.js .etapa-quadro::after { transform: scaleX(0); }
.js .etapa.visivel .etapa-quadro::after { transform: scaleX(1); }

.etapa-indice {
  display: block;
  font-family: var(--fonte-display);
  font-size: var(--ts-xl);
  font-weight: 500;
  color: var(--acento-no-escuro);
  margin-bottom: var(--e3);
  font-variant-numeric: tabular-nums;
}

.etapa h3 { font-size: var(--ts-h4); margin-bottom: var(--e3); }

.etapa p { color: var(--txt-suave-escuro); max-width: 46ch; }

@media (max-width: 767px) {
  .grade-processo { grid-template-columns: 1fr; gap: var(--e12); }
  .etapa:nth-child(even) { margin-top: 0; }
}

/* ------------------------------------------------------- 13. CIDADES */

.grade-cidades {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--e12);
  background-color: var(--filete);
  border: 1px solid var(--filete);
}

.cidade {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e8) var(--e6);
  background-color: var(--sup-papel);
  transition: background-color var(--t-normal) var(--curva);
}

.cidade:hover { background-color: var(--sup-papel-puro); }

.cidade-nome {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-family: var(--fonte-display);
  font-size: var(--ts-xl);
  font-weight: 500;
  letter-spacing: var(--ee-titulo);
}

.cidade-nome .icone { color: var(--acento-texto); flex: none; }

.cidade p { font-size: var(--ts-sm); color: var(--txt-suave); }

.cidade-sede {
  font-size: var(--ts-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--acento-texto);
}

@media (max-width: 899px) { .grade-cidades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .grade-cidades { grid-template-columns: 1fr; } }

/* --------------------------------------------------- 14. AVALIAÇÕES */

.prova-topo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: stretch;
}

.prova-texto { display: flex; flex-direction: column; }
.prova-texto .medida { margin-top: var(--e6); color: var(--txt-suave); }

/* Cartão de nota */
.nota-google {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--e8);
  background-color: var(--sup-papel-puro);
  border: 1px solid var(--filete);
}

.nota-valor {
  margin: 0;
  font-family: var(--fonte-display);
  font-size: clamp(3.5rem, 6vw, 5.25rem);
  font-weight: 500;
  line-height: var(--al-justa);
  letter-spacing: var(--ee-display);
  font-variant-numeric: tabular-nums;
}

.nota-estrelas {
  display: flex;
  gap: 3px;
  margin: var(--e3) 0 var(--e4);
  color: var(--dourado);
}

.nota-estrelas .icone { fill: currentColor; stroke: none; }

.nota-texto {
  margin: 0;
  font-size: var(--ts-sm);
  color: var(--txt-suave);
}

.nota-texto strong { color: var(--txt-forte); font-weight: 500; }

.nota-google .link-filete { margin-top: auto; padding-top: var(--e6); }

/* Avatares com iniciais. Nenhuma foto de terceiros é hospedada aqui. */
.avatar-inicial {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 999px;
  background-color: var(--cor-grafite);
  color: var(--cor-branco-quente);
  font-family: var(--fonte-display);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
}

.avatar-pilha {
  display: flex;
  margin-top: var(--e6);
  padding-left: 6px;
}

.avatar-inicial--pequeno {
  width: 42px;
  height: 42px;
  margin-left: -10px;
  font-size: 0.75rem;
  box-shadow: 0 0 0 2px var(--sup-papel-puro);
}

@media (max-width: 899px) {
  .prova-topo { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ Carrossel contínuo */

.area-carrossel { margin-top: var(--e12); }

.carrossel-controle {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--e5);
}

.botao-pausa {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  min-height: 44px;
  padding-inline: var(--e5);
  border: 1px solid var(--filete);
  background-color: var(--sup-papel-puro);
  cursor: pointer;
  font-size: var(--ts-sm);
  font-weight: 500;
  color: var(--txt-forte);
  transition: border-color var(--t-rapido) var(--curva),
              color var(--t-rapido) var(--curva);
}

.botao-pausa:hover { border-color: var(--acento); color: var(--acento-texto); }

/* Os dois rótulos existem no DOM; o CSS mostra um de cada vez. A especificidade
   precisa empatar com a regra do <span> acima, senão os dois aparecem juntos. */
.botao-pausa > span { align-items: center; gap: var(--e3); }
.botao-pausa > .rotulo-pausar { display: inline-flex; }
.botao-pausa > .rotulo-retomar { display: none; }

.carrossel-check:checked ~ .carrossel-controle .botao-pausa > .rotulo-pausar { display: none; }
.carrossel-check:checked ~ .carrossel-controle .botao-pausa > .rotulo-retomar { display: inline-flex; }

.carrossel-check:focus-visible ~ .carrossel-controle .botao-pausa {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

.carrossel {
  overflow: hidden;
  padding-block: 2px;
  border-block: 1px solid var(--filete);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.carrossel-trilha {
  display: flex;
  width: max-content;
  animation: deslizar 64s linear infinite;
}

@keyframes deslizar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.carrossel:hover .carrossel-trilha,
.carrossel:focus-within .carrossel-trilha,
.carrossel-check:checked ~ .carrossel .carrossel-trilha {
  animation-play-state: paused;
}

/* Todos os cartões com a mesma largura e a mesma altura: o rodapé de cada um
   fica na mesma linha, independentemente do tamanho do texto. */
.depo-cartao {
  display: flex;
  flex-direction: column;
  flex: none;
  width: clamp(16.5rem, 22vw, 21rem);
  min-height: 19rem;
  margin: 0;
  padding: var(--e8) var(--e6);
  background-color: var(--sup-papel-puro);
  border-right: 1px solid var(--filete);
}

.depo-tema {
  font-size: var(--ts-lg);
  font-weight: 500;
  margin-bottom: var(--e4);
}

.depo-fala {
  margin: 0 0 var(--e6);
  flex: 1;
}

.depo-fala p {
  font-size: var(--ts-sm);
  line-height: 1.62;
  color: var(--txt-suave);
}

.depo-autor {
  display: flex;
  align-items: center;
  gap: var(--e4);
  margin-top: auto;
}

.depo-identidade {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.depo-identidade strong {
  font-size: var(--ts-sm);
  font-weight: 500;
  color: var(--txt-forte);
}

.depo-origem {
  font-size: var(--ts-xs);
  color: var(--txt-suave);
}

@media (max-width: 599px) {
  .carrossel-controle { justify-content: stretch; }
  .botao-pausa { width: 100%; justify-content: center; }
  .depo-cartao { width: 17rem; padding: var(--e6) var(--e5); }
}

/* ------------------------------------------------------------ 15. FAQ */

.lista-faq {
  margin-top: var(--e12);
  border-top: 1px solid var(--filete);
}

.item-faq {
  border-bottom: 1px solid var(--filete);
  transition: background-color var(--t-normal) var(--curva);
}

.item-faq[open] { background-color: var(--sup-papel-puro); }

.item-faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e6);
  padding: var(--e6) var(--e4) var(--e6) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--fonte-display);
  font-size: clamp(1.0625rem, 1.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--ee-titulo);
  transition: padding-left var(--t-normal) var(--curva),
              color var(--t-normal) var(--curva);
}

.item-faq > summary::-webkit-details-marker { display: none; }
.item-faq > summary:hover { color: var(--acento-texto); }
.item-faq[open] > summary { padding-left: var(--e5); }

.faq-sinal {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--acento);
}

.faq-sinal::before,
.faq-sinal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: currentColor;
  transition: transform var(--t-normal) var(--curva);
}

.faq-sinal::before {
  width: 18px;
  height: 1.6px;
  transform: translate(-50%, -50%);
}

.faq-sinal::after {
  width: 1.6px;
  height: 18px;
  transform: translate(-50%, -50%);
}

.item-faq[open] .faq-sinal::after { transform: translate(-50%, -50%) scaleY(0); }

.faq-resposta {
  max-width: 76ch;
  padding: 0 var(--e4) var(--e8) 0;
  color: var(--txt-suave);
}

.item-faq[open] .faq-resposta { padding-left: var(--e5); }

.faq-resposta p + p { margin-top: var(--e3); }

.faq-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e4) var(--e6);
  margin-top: var(--e10);
}

.faq-rodape p { color: var(--txt-suave); font-size: var(--ts-sm); }

/* --------------------------------------------------------- 16. CHAMADA */

.chamada-final {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 27rem;
  padding-block: var(--espaco-secao);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--cor-grafite);
}

.chamada-final > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chamada-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(41, 44, 48, 0.82);
}

.chamada-final h2 { max-width: 20ch; margin-inline: auto; color: #ffffff; }

.chamada-final p {
  max-width: 52ch;
  margin: var(--e6) auto 0;
  color: rgba(245, 243, 239, 0.92);
}

.chamada-final .grupo-botoes { justify-content: center; margin-top: var(--e8); }

/* ---------------------------------------------------------- 17. RODAPE */

.rodape {
  background-color: var(--sup-escura);
  color: var(--txt-sobre-escuro);
  border-top: 1px solid var(--filete-escuro);
  padding-block: var(--e20) var(--e8);
}

.rodape-topo {
  display: grid;
  grid-template-columns: minmax(0, 4.5fr) minmax(0, 3.5fr) minmax(0, 2fr) minmax(0, 2fr);
  gap: var(--e10);
  padding-bottom: var(--e16);
  border-bottom: 1px solid var(--filete-escuro);
}

.rodape-marca img { height: 92px; width: auto; margin-bottom: var(--e6); }

.rodape-marca p {
  max-width: 34ch;
  color: var(--txt-suave-escuro);
  font-size: var(--ts-sm);
}

.rodape h2 {
  font-size: var(--ts-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-suave-escuro);
  margin-bottom: var(--e5);
  font-family: var(--fonte-texto);
}

.rodape-contato a {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  font-family: var(--fonte-display);
  font-size: var(--ts-lg);
  font-weight: 500;
  letter-spacing: var(--ee-titulo);
  line-height: 1.35;
  /* o e-mail e longo: nunca deixar estourar a coluna */
  overflow-wrap: anywhere;
  /* sublinhado para o link nao depender so da cor (a11y: link-in-text-block) */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--t-rapido) var(--curva);
}

.rodape-contato a:hover { color: var(--acento-no-escuro); }

.rodape-contato li + li { margin-top: var(--e4); }

.rodape-contato .icone { color: var(--acento-no-escuro); flex: none; }

.rodape-links a {
  display: inline-block;
  padding-block: var(--e2);
  font-size: var(--ts-sm);
  color: var(--txt-suave-escuro);
  transition: color var(--t-rapido) var(--curva);
}

.rodape-links a:hover { color: var(--txt-sobre-escuro); }

.rodape-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding-top: var(--e8);
  font-size: var(--ts-xs);
  color: var(--txt-suave-escuro);
}

.rodape-base ul { display: flex; flex-wrap: wrap; gap: var(--e5); }

@media (max-width: 1023px) {
  .rodape-topo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e10); }
}

@media (max-width: 599px) {
  .rodape-topo { grid-template-columns: 1fr; }
}

/* Botao flutuante de conversa em telas pequenas */
.conversa-fixa {
  position: fixed;
  left: var(--e4);
  right: var(--e4);
  bottom: var(--e4);
  z-index: 80;
  display: none;
  box-shadow: 0 8px 28px rgba(41, 44, 48, 0.26);
}

@media (max-width: 767px) {
  .conversa-fixa { display: flex; }
  .rodape { padding-bottom: 6rem; }
}

/* -------------------------------------------------------- 18. MOVIMENTO */

/* Aplicado apenas quando o JavaScript esta ativo, para que o conteudo
   permaneca visivel caso o script nao carregue. */
.js .revelar {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-lento) var(--curva),
              transform var(--t-lento) var(--curva);
}

.js .revelar.visivel {
  opacity: 1;
  transform: none;
}

.js .revelar-grupo > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-lento) var(--curva),
              transform var(--t-lento) var(--curva);
}

.js .revelar-grupo.visivel > * { opacity: 1; transform: none; }

.js .revelar-grupo.visivel > *:nth-child(2) { transition-delay: 80ms; }
.js .revelar-grupo.visivel > *:nth-child(3) { transition-delay: 160ms; }
.js .revelar-grupo.visivel > *:nth-child(4) { transition-delay: 240ms; }
.js .revelar-grupo.visivel > *:nth-child(5) { transition-delay: 320ms; }
.js .revelar-grupo.visivel > *:nth-child(6) { transition-delay: 400ms; }

/* Entrada lateral. Os blocos chegam deslizando da direita, em cascata,
   em vez de subirem. Usada nas etapas do processo. A distancia percorrida
   acompanha a largura da tela para nunca criar rolagem horizontal, ja que
   o transform parte de dentro da area util. */
.js .revelar.entrada-lateral {
  transform: translate3d(clamp(3rem, 9vw, 7rem), 0, 0);
  transition-duration: 900ms;
}

.js .revelar.entrada-lateral.visivel { transform: none; }

/* A coluna da direita chega um pouco depois da esquerda, o que forma a
   cascata em diagonal em vez de dois blocos entrando ao mesmo tempo. */
.js .grade-processo > .etapa:nth-child(even),
.js .grade-processo > .etapa:nth-child(even) .etapa-quadro > img {
  transition-delay: 170ms;
}

.js .grade-processo > .etapa:nth-child(even) .etapa-quadro::after {
  transition-delay: 430ms;
}

/* A imagem entra depois do texto e faz dois movimentos ao mesmo tempo:
   desliza de dentro da moldura e e revelada por uma varredura da direita
   para a esquerda. Os dois juntos tornam a entrada inconfundivel, mesmo
   para quem rola a pagina depressa. */
.js .entrada-lateral .etapa-quadro > img {
  transform: scale(1.1) translate3d(5%, 0, 0);
  clip-path: inset(0 0 0 100%);
  transition: transform 1100ms var(--curva),
              clip-path 900ms var(--curva);
}

.js .entrada-lateral.visivel .etapa-quadro > img {
  transform: scale(1) translate3d(0, 0, 0);
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .revelar,
  .js .revelar.entrada-lateral,
  .js .revelar-grupo > * { opacity: 1; transform: none; }

  .js .entrada-lateral .etapa-quadro > img {
    transform: none;
    clip-path: none;
  }
  .js .etapa-quadro::after { transform: scaleX(1); }

  .capa-midia img { opacity: 0; animation: none; }
  .capa-midia img:first-child { opacity: 1; }

  /* Sem o giro automático, o carrossel vira uma faixa rolável pelo teclado
     e pelo toque, com encaixe em cada cartão. */
  .carrossel-trilha { animation: none; }

  .carrossel {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    mask-image: none;
  }

  .depo-cartao { scroll-snap-align: start; }
  .carrossel-controle { display: none; }
}

/* ------------------------------------------ 19. LINKS DENTRO DO TEXTO

   Ligacao contextual entre paginas. Diferente do link de navegacao: vive
   no meio da frase, entao precisa ser reconhecivel como link sem quebrar
   a leitura. Sublinhado fino que engrossa no hover. */

.link-no-texto {
  color: var(--acento-texto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--t-rapido) var(--curva),
              color var(--t-rapido) var(--curva);
}

.link-no-texto:hover,
.link-no-texto:focus-visible {
  color: var(--acento-hover);
  text-decoration-thickness: 2px;
}

.secao-escura .link-no-texto,
.link-no-escuro {
  color: var(--acento-no-escuro);
}

.secao-escura .link-no-texto:hover,
.link-no-escuro:hover,
.secao-escura .link-no-texto:focus-visible,
.link-no-escuro:focus-visible {
  color: var(--txt-sobre-escuro);
}

/* Fecho de secao em prosa. Nenhuma secao do site termina em lista de
   marcadores: sempre ha uma frase que conclui e conduz ao proximo passo. */
.fecho-secao {
  margin-top: var(--e10);
  max-width: 62ch;
  font-size: var(--ts-md);
  line-height: 1.7;
  color: var(--txt-suave);
}

.fecho-coluna {
  margin-top: var(--e6);
  font-size: var(--ts-sm);
  line-height: 1.7;
  color: var(--txt-suave);
}

/* Redes sociais no rodape: linha compacta e discreta */
.rodape-redes { list-style: none; margin: var(--e4) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e3); font-size: var(--ts-xs); }
.rodape-redes li { margin: 0; display: flex; align-items: center; }
.rodape-redes li + li::before { content: "\00B7"; margin-right: var(--e3); color: var(--txt-suave-escuro); }
.rodape-redes a { color: var(--txt-suave-escuro); text-decoration: none; letter-spacing: 0.01em; display: inline-flex; align-items: center; min-height: 24px; }
.rodape-redes a:hover, .rodape-redes a:focus-visible { color: var(--cor-branco-quente); text-decoration: underline; }

/* Consentimento de cookies (LGPD/RGPD): banner na primeira visita, painel de
   preferencias, e mapa do Google sob consentimento. Banner e painel sao
   position:fixed, entao nao empurram o conteudo (sem CLS). */
.aviso-cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--sup-escura); color: var(--txt-sobre-escuro); border-top: 1px solid var(--filete-escuro); box-shadow: 0 -18px 40px -30px rgba(0,0,0,0.6); padding: var(--e5) var(--gutter); }
.aviso-cookies[hidden], .cookie-painel[hidden] { display: none !important; }
.aviso-cookies-corpo { width: 100%; max-width: var(--largura-conteudo); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e4) var(--e8); }
.aviso-cookies-texto { margin: 0; font-size: var(--ts-sm); line-height: 1.55; max-width: 70ch; color: var(--txt-suave-escuro); }
.aviso-cookies-texto a { color: #fff; text-decoration: underline; }
.aviso-cookies-acoes { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* Tres botoes com o mesmo destaque visual */
.cookie-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--e2) var(--e5); border: 1px solid var(--cor-branco-quente); border-radius: 0; background-color: var(--cor-branco-quente); color: var(--txt-forte); font-family: var(--fonte-texto); font-size: var(--ts-sm); font-weight: 500; letter-spacing: var(--ee-texto); cursor: pointer; transition: background-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva); }
.cookie-botao:hover { background-color: transparent; color: #fff; border-color: #fff; }
.cookie-botao:focus-visible { outline: 2px solid var(--acento-no-escuro); outline-offset: 3px; }

/* Painel de preferencias (modal) */
.cookie-painel { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: var(--e5); }
.cookie-painel-veu { position: absolute; inset: 0; background: var(--veu-forte); }
.cookie-painel-caixa { position: relative; z-index: 1; width: 100%; max-width: 34rem; max-height: 88vh; overflow-y: auto; background: var(--sup-escura); color: var(--txt-sobre-escuro); border: 1px solid var(--filete-escuro); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: 0 40px 90px -50px rgba(0,0,0,0.8); }
.cookie-painel-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e4); margin-bottom: var(--e4); }
.cookie-painel-titulo { font-size: var(--ts-h4); line-height: var(--al-titulo); color: #fff; }
.cookie-fechar { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; background: transparent; border: 1px solid var(--filete-escuro); color: var(--txt-sobre-escuro); cursor: pointer; transition: border-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva); }
.cookie-fechar:hover { border-color: #fff; color: #fff; }
.cookie-fechar:focus-visible { outline: 2px solid var(--acento-no-escuro); outline-offset: 3px; }
.cookie-painel-intro { margin: 0 0 var(--e5); font-size: var(--ts-sm); line-height: 1.55; color: var(--txt-suave-escuro); }
.cookie-painel-intro a { color: #fff; text-decoration: underline; }

.cookie-cat { padding: var(--e5) 0; border-top: 1px solid var(--filete-escuro); }
.cookie-cat-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); margin-bottom: var(--e2); }
label.cookie-cat-topo { cursor: pointer; }
.cookie-cat-nome { font-family: var(--fonte-display); font-size: var(--ts-lg); font-weight: 500; color: #fff; }
.cookie-cat-fixo { font-size: var(--ts-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--acento-no-escuro); }
.cookie-cat-desc { margin: 0; font-size: var(--ts-sm); line-height: 1.55; color: var(--txt-suave-escuro); }

/* Interruptor construido a partir do checkbox nativo */
.cookie-switch { position: relative; flex: none; width: 46px; height: 26px; }
.cookie-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cookie-switch-tr { position: absolute; inset: 0; background: var(--sup-escura-alt); border: 1px solid var(--filete-escuro); border-radius: 999px; transition: background-color var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva); }
.cookie-switch-tr::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--cor-branco-quente); border-radius: 50%; transition: transform var(--t-rapido) var(--curva); }
.cookie-switch input:checked + .cookie-switch-tr { background: var(--acento); border-color: var(--acento); }
.cookie-switch input:checked + .cookie-switch-tr::after { transform: translateX(20px); }
.cookie-switch input:focus-visible + .cookie-switch-tr { outline: 2px solid var(--acento-no-escuro); outline-offset: 3px; }

.cookie-painel-acoes { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); padding-top: var(--e6); border-top: 1px solid var(--filete-escuro); }
.cookie-painel-acoes .cookie-botao { flex: 1 1 auto; }

/* Link "Preferencias de cookies" no rodape, com aparencia dos demais links */
.rodape-cookies-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.rodape-cookies-link:hover { text-decoration: underline; }
.rodape-cookies-link:focus-visible { outline: 2px solid var(--acento-no-escuro); outline-offset: 3px; }

@media (max-width: 720px) {
  .aviso-cookies-acoes { width: 100%; }
  .aviso-cookies-acoes .cookie-botao { flex: 1 1 auto; }
}
.mapa-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e4); text-align: center; padding: var(--e12) var(--e6); min-height: 320px; color: var(--txt-suave-escuro); }
.mapa-placeholder p { margin: 0; max-width: 46ch; }

/* Lista discreta de "ultimos textos" dentro de cada nucleo do hub do blog.
   Gerada por montar.py a partir de ferramentas/artigos.py. */
.nucleo-recentes { margin-top: var(--e6); }
.nucleo-recentes-titulo { font-size: var(--ts-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--txt-suave); margin: 0 0 var(--e3); }
.nucleo-recentes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e2); }
.nucleo-recentes li { margin: 0; }
.nucleo-recentes li a { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2); font-size: var(--ts-sm); color: var(--txt-forte); font-weight: 500; }
.nucleo-recentes li a:hover { color: var(--acento-texto); }
.nucleo-recentes li a span { font-weight: 400; font-size: var(--ts-xs); color: var(--txt-suave); }


/* ====================================================================
   BLOCO 2 de 8: pagina-servico.css
   ==================================================================== */

/* =========================================================================
   Marileide Oliveira Arquitetura e Interiores
   Componentes da pagina de servico.

   Carrega depois de estilo.css e usa os mesmos tokens. Aqui ficam so as
   pecas que nao existem na home: o formulario, a capa em duas colunas, a
   faixa de prova, a qualificacao do lead, os cartoes de preco, os relatos
   em grade e a barra fixa de conversao.
   ========================================================================= */

/* ----------------------------------------------- 0. RITMO DAS SECOES
   Nas paginas de servico e locais havia muito respiro entre uma secao e
   outra: o token global soma o padding de cima de uma com o de baixo da
   vizinha. Aqui ele e reduzido APENAS no escopo .pagina-servico, sem
   mexer no token global nem nas paginas principais. */
.pagina-servico { --espaco-secao: clamp(3.25rem, 5vw, 5.5rem); }

/* ------------------------------------------------------- 1. CABECALHO */

/* Paginas de servico e categorias da expansao: mesmo sistema de tokens. */
.expansao-leitura { max-width: 76ch; margin-block: var(--e6); }
.expansao-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e6); margin-block: var(--e8); }
.expansao-cartao { border: 1px solid var(--filete); padding: var(--e6); }
.expansao-cartao h3 { margin-block: var(--e4); font-size: var(--ts-h4); }
.expansao-cartao > .icone { color: var(--acento-texto); }
.expansao-imagem { margin-block: var(--e6); }
.expansao-imagem img { width: 100%; height: auto; }
.expansao-imagem figcaption { margin-top: var(--e2); font-size: var(--ts-xs); overflow-wrap: anywhere; }
.expansao-tabela { overflow-x: auto; margin-block: var(--e6); }
.expansao-tabela table { width: 100%; border-collapse: collapse; font-size: var(--ts-sm); }
.expansao-tabela caption { text-align: left; font-weight: 600; padding-bottom: var(--e4); }
.expansao-tabela th, .expansao-tabela td { text-align: left; vertical-align: top; padding: var(--e4); border: 1px solid var(--filete); }
.expansao-tabela th { color: var(--txt-forte); }
.expansao-tabela:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 3px; }
.expansao-links a { text-decoration: underline; text-underline-offset: 0.2em; }
.pagina-expansao .grupo-botoes .botao { white-space: normal; text-align: left; }
@media (max-width: 767px) {
  .expansao-grade { grid-template-columns: minmax(0, 1fr); }
  .expansao-tabela th, .expansao-tabela td { padding: var(--e2); overflow-wrap: anywhere; }
}

/* --------------------------------------------- 2. CAPA COM FORMULARIO */

.capa-servico {
  padding-block: clamp(2.5rem, 5vw, 5rem) clamp(3rem, 6vw, 6rem);
  background-color: var(--sup-papel);
  border-bottom: 1px solid var(--filete);
}

.capa-servico-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}

.migalhas { margin-bottom: var(--e6); }

.migalhas ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ts-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-suave);
}

.migalhas li + li::before {
  content: "/";
  margin-right: var(--e2);
  color: var(--filete);
}

.migalhas a { color: var(--txt-suave); }
.migalhas a:hover { color: var(--acento-texto); }
.migalhas [aria-current="page"] { color: var(--txt-forte); }

/* Um pouco menor que o H1 da home: aqui ele divide a dobra com o
   formulario, e o formulario e quem converte. */
.capa-servico h1 {
  font-size: clamp(2.125rem, 4vw, 3.75rem);
  line-height: var(--al-display);
  letter-spacing: var(--ee-display);
  max-width: 19ch;
}

.capa-servico-apoio {
  margin-top: var(--e6);
  max-width: 52ch;
  font-size: var(--ts-lg);
  color: var(--txt-suave);
}

.lista-prova {
  margin: var(--e8) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e3);
}

.lista-prova > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e3);
  align-items: start;
  font-size: var(--ts-sm);
  color: var(--txt-forte);
}

.lista-prova > li > .icone {
  color: var(--acento-texto);
  margin-top: 2px;
}

.lista-prova--escura > li { color: var(--txt-sobre-escuro); }
.lista-prova--escura > li > .icone { color: var(--acento-no-escuro); }

/* ---------------------------------------------------- 3. FORMULARIO */

.caixa-formulario {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background-color: var(--sup-papel-puro);
  border: 1px solid var(--filete);
  box-shadow: 0 24px 60px -40px rgba(41, 44, 48, 0.55);
  scroll-margin-top: 96px;
}

.formulario-titulo {
  font-size: var(--ts-h4);
  margin-bottom: var(--e2);
}

.formulario-apoio {
  font-size: var(--ts-sm);
  color: var(--txt-suave);
  margin-bottom: var(--e6);
}

.formulario {
  display: grid;
  gap: var(--e4);
}

.campo { display: grid; gap: var(--e2); }

.campo > label {
  font-size: var(--ts-sm);
  font-weight: 500;
  color: var(--txt-forte);
}

.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo select {
  width: 100%;
  min-height: 48px;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--filete);
  border-radius: 0;
  background-color: var(--sup-papel);
  font-family: var(--fonte-texto);
  font-size: var(--ts-base);
  color: var(--txt-forte);
  transition: border-color var(--t-rapido) var(--curva),
              box-shadow var(--t-rapido) var(--curva);
}

/* O seletor nativo recebe a seta da propria biblioteca de icones,
   desenhada em SVG e embutida, sem requisicao extra. */
.campo select {
  appearance: none;
  padding-right: var(--e10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565a60' stroke-width='1.6'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e4) center;
  background-size: 18px 18px;
}

.campo input::placeholder { color: #7b7f85; }

.campo input:focus-visible,
.campo select:focus-visible {
  outline: none;
  border-color: var(--acento-texto);
  box-shadow: 0 0 0 3px rgba(217, 45, 53, 0.18);
}

/* O navegador so marca o campo depois que a pessoa tenta enviar. */
.formulario:not([novalidate]) .campo input:user-invalid,
.formulario:not([novalidate]) .campo select:user-invalid {
  border-color: var(--acento-texto);
}

.campo-consentimento {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--e3);
  margin-top: var(--e2);
}

.campo-consentimento input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--cor-vermelho);
}

.campo-consentimento label {
  font-size: var(--ts-sm);
  font-weight: 400;
  color: var(--txt-suave);
  line-height: 1.45;
}

.campo-consentimento a {
  color: var(--acento-texto);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.formulario-enviar {
  width: 100%;
  margin-top: var(--e2);
  justify-content: flex-start;
}

.formulario-nota {
  font-size: var(--ts-xs);
  color: var(--txt-suave);
  line-height: 1.5;
}

.formulario-nota a {
  color: var(--acento-texto);
  font-variant-numeric: tabular-nums;
  /* sublinhado: link no meio de texto nao pode depender so da cor (a11y) */
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 899px) {
  .capa-servico-grade { grid-template-columns: 1fr; }
  .capa-servico h1 { max-width: 20ch; }
}

/* --------------------------------------------------- 4. FAIXA DE PROVA */

.faixa-prova {
  position: relative;
  overflow: hidden;
  padding-block: var(--e10);
  background-color: var(--sup-escura);
  color: var(--txt-sobre-escuro);
}

/* Filete que corre de ponta a ponta quando a faixa entra na tela. */
.faixa-risco {
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 100%;
  background-image: linear-gradient(90deg, var(--acento), var(--dourado));
  transform: scaleX(1);
  transform-origin: left center;
}

.js .faixa-risco {
  transform: scaleX(0);
  transition: transform 1200ms var(--curva);
}

.js .faixa-risco.visivel { transform: scaleX(1); }

.faixa-prova-lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e6);
  margin: 0;
}

.faixa-prova-lista > div {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--e2);
  text-align: center;
}

.faixa-prova-lista dt {
  font-size: var(--ts-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-suave-escuro);
}

.faixa-prova-lista dd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  margin: 0;
}

.faixa-icone {
  color: var(--acento-no-escuro);
  transition: transform var(--t-lento) var(--curva);
}

.faixa-icone--estrela {
  fill: currentColor;
  stroke: none;
  color: var(--dourado-claro);
}

/* O ícone assenta junto com o número, com um leve avanço de escala. */
.js .faixa-prova-lista > div .faixa-icone { transform: scale(0.72); }
.js .faixa-prova-lista.visivel > div .faixa-icone { transform: scale(1); }

.faixa-numero {
  font-family: var(--fonte-display);
  font-size: var(--ts-h3);
  font-weight: 500;
  line-height: var(--al-display);
  color: var(--acento-no-escuro);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 599px) {
  .faixa-prova-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e8) var(--e4); }
  /* Duas linhas reservadas para o rótulo: os quatro blocos ficam com a
     mesma altura mesmo quando só um deles quebra. */
  .faixa-prova-lista dt { min-height: 2.6em; }
}

/* ------------------------------------------------- 5. QUALIFICACAO */

.grade-qualificacao {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e6);
  margin-top: var(--e12);
}

.qualificacao {
  padding: var(--e8);
  border: 1px solid var(--filete);
}

.qualificacao h3 {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-size: var(--ts-xl);
  margin-bottom: var(--e6);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--filete);
}

.qualificacao ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e4);
}

.qualificacao li {
  position: relative;
  padding-left: var(--e6);
  color: var(--txt-suave);
  font-size: var(--ts-sm);
}

.qualificacao li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
}

.qualificacao--sim { background-color: var(--acento-suave); }
.qualificacao--sim h3 .icone { color: var(--acento-texto); }
.qualificacao--sim li::before { background-color: var(--acento); }
.qualificacao--sim li { color: #565a60; }

.qualificacao--nao h3 .icone { color: var(--txt-suave); }
.qualificacao--nao li::before {
  background-color: transparent;
  border: 1px solid var(--txt-suave);
}

@media (max-width: 767px) {
  .grade-qualificacao { grid-template-columns: 1fr; }
  .qualificacao { padding: var(--e6); }
}

/* ------------------------------------------------------- 6. PRECO */

.grade-preco {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e6);
  margin-top: var(--e12);
}

.cartao-preco {
  display: flex;
  flex-direction: column;
  padding: var(--e6);
  border-top: 3px solid var(--cor-grafite);
  background-color: var(--sup-papel-puro);
}

.preco-rotulo {
  font-size: var(--ts-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-suave);
  min-height: 2.6em;
}

.preco-numero {
  font-family: var(--fonte-display);
  font-size: var(--ts-h3);
  font-weight: 500;
  line-height: var(--al-display);
  letter-spacing: var(--ee-titulo);
  color: var(--txt-forte);
  margin: var(--e3) 0 var(--e4);
  font-variant-numeric: tabular-nums;
}

.preco-texto {
  font-size: var(--ts-sm);
  color: var(--txt-suave);
}

.cartao-preco--realce {
  border-top-color: var(--cor-vermelho);
  background-color: var(--acento-suave);
}

.cartao-preco--realce .preco-numero { color: var(--cor-vermelho-escuro); }
.cartao-preco--realce .preco-texto { color: #565a60; }

.nota-preco {
  margin-top: var(--e10);
  padding-top: var(--e6);
  border-top: 1px solid var(--filete);
  max-width: 62ch;
  color: var(--txt-suave);
}

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

@media (max-width: 599px) {
  .grade-preco { grid-template-columns: 1fr; }
  .preco-rotulo { min-height: 0; }
}

/* ----------------------------------------------------- 7. RELATOS */

.grade-relatos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e6);
  margin-top: var(--e12);
}

.relato {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--e6);
  border: 1px solid var(--filete);
  background-color: var(--sup-papel-puro);
}

.relato-estrelas {
  display: flex;
  gap: 3px;
  color: var(--dourado);
  margin-bottom: var(--e4);
}

/* Estrela cheia. Vazia parecia nota zero. */
.relato-estrelas .icone { fill: currentColor; stroke: none; }

.relato blockquote { margin: 0 0 var(--e6); }

.relato blockquote p {
  color: var(--txt-forte);
  font-size: var(--ts-base);
}

.relato figcaption {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-top: auto;
  padding-top: var(--e4);
  border-top: 1px solid var(--filete);
}

.relato-inicial {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background-color: var(--cor-grafite);
  color: var(--txt-sobre-escuro);
  font-size: var(--ts-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* O nome é o link para a avaliação original: é o que prova que o relato
   existe fora daqui. */
.relato-nome {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--ts-base);
  font-weight: 500;
  color: var(--txt-forte);
}

.relato-nome .icone {
  color: var(--acento-texto);
  transition: transform var(--t-rapido) var(--curva);
}

.relato-nome:hover,
.relato-nome:focus-visible { color: var(--acento-texto); }

.relato-nome:hover .icone,
.relato-nome:focus-visible .icone { transform: translate(3px, -3px); }

@media (max-width: 899px) {
  .grade-relatos { grid-template-columns: 1fr; }
}

/* ------------------------------------------------ 8. CHAMADA FINAL */

.chamada-servico-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.chamada-servico h2 {
  font-size: var(--ts-h2);
  max-width: 18ch;
}

.chamada-servico-texto {
  margin-top: var(--e6);
  max-width: 54ch;
  color: var(--txt-suave-escuro);
}

.chamada-servico-acoes {
  display: grid;
  gap: var(--e3);
}

.chamada-servico-acoes .botao { justify-content: flex-start; }

@media (max-width: 899px) {
  .chamada-servico-grade { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------- 9. RODAPE */

.rodape-topo--servico { grid-template-columns: 1.5fr 1.4fr 1fr 1fr; }

.rodape-base a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rodape-base a:hover { color: var(--acento-no-escuro); }

@media (max-width: 899px) {
  .rodape-topo--servico { grid-template-columns: 1fr; }
}

/* ------------------------------------------- 10. BARRA FIXA NO CELULAR */

.barra-fixa { display: none; }

@media (max-width: 767px) {
  .barra-fixa {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--e2);
    padding: var(--e3);
    padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom, 0px));
    background-color: var(--sup-papel-puro);
    border-top: 1px solid var(--filete);
  }

  .barra-fixa .botao {
    min-height: 52px;
    padding-inline: var(--e4);
    gap: var(--e2);
    white-space: nowrap;
  }

  /* Sem o marcador da marca: nesta barra o espaco horizontal e escasso
     e o rotulo inteiro precisa caber em uma linha. */
  .barra-fixa .botao::before { display: none; }

  /* Espaco para a barra nao cobrir o fim do rodape. */
  .rodape-servico { padding-bottom: calc(var(--e20) + 76px); }
}

/* ----------------------------------- 11. MOVIMENTO REDUZIDO NESTA PÁGINA */

@media (prefers-reduced-motion: reduce) {
  .js .faixa-risco { transform: scaleX(1); }
  .js .faixa-prova-lista > div .faixa-icone { transform: none; }
}

/* Revisão editorial: leitura longa e imagens integrais do acervo. */
.expansao-aprofundamento .expansao-leitura { max-width: 76ch; }
.expansao-aprofundamento h3 { margin-top: 1.6rem; }
.expansao-aprofundamento p { margin-top: .9rem; }
.pagina-expansao .expansao-imagem img { height: auto; object-fit: contain; }
.pagina-hub.pagina-expansao .expansao-imagem { max-width: 920px; }

/* Serviços: componentes da referência residencial, com conteúdo próprio. */
.servico-completo .cabecalho-secao > .medida-curta { color: var(--txt-suave); }
.servico-completo .secao-escura .cabecalho-secao > .medida-curta,
.servico-completo .servico-nota-escura { color: var(--txt-suave-escuro); }
.servico-completo .servico-nota-escura { margin-top: var(--e8); }
.servico-textos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e8); margin-top: var(--e10); }
.servico-texto-cartao { border-top: 1px solid var(--filete); padding-top: var(--e6); }
.servico-texto-cartao h3 { font-size: var(--ts-h4); margin-bottom: var(--e4); }
.servico-texto-cartao p { color: var(--txt-suave); }
.servico-completo .grade-projetos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.servico-completo .cartao-projeto { grid-column: auto; }
.servico-completo .cartao-projeto figure { margin: 0; }
.servico-completo .projeto-midia { background: var(--sup-escura); aspect-ratio: 1 / 1; }
.servico-completo .projeto-midia img { object-fit: contain; width: 100%; height: 100%; }
.servico-completo .servico-legenda { display: block; color: var(--txt-suave-escuro); font-size: var(--ts-sm); }
@media (max-width: 767px) {
  .servico-textos, .servico-completo .grade-projetos { grid-template-columns: minmax(0, 1fr); }
  .servico-completo .rodape { padding-bottom: calc(var(--e20) + 76px); }
}

/* ---------------------- 13. GRADE "OUTROS SERVICOS" (piloto de referencia)
   Cartoes numerados com zoom da imagem e pilula "Ver" no hover, e revelacao
   ao rolar (usa .revelar-grupo). Traz o efeito da referencia mantendo o
   design system: cantos retos, filete de 1px e o vermelho da marca. */
.grade-servicos-cards {
  list-style: none;
  margin: var(--e12) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e10) var(--e6);
}

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

.oserv-midia {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--filete);
  background-color: var(--sup-suave);
}

.oserv-midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-lento) var(--curva);
}

.oserv:hover .oserv-midia img,
.oserv:focus-within .oserv-midia img { transform: scale(1.05); }

.oserv-ver {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -44%);
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e4);
  background-color: var(--sup-papel-puro);
  border: 1px solid var(--filete);
  color: var(--txt-forte);
  font-size: var(--ts-sm);
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-rapido) var(--curva),
              transform var(--t-rapido) var(--curva);
}

.oserv-ver .icone { color: var(--acento-texto); }

.oserv:hover .oserv-ver,
.oserv:focus-within .oserv-ver { opacity: 1; transform: translate(-50%, -50%); }

.oserv-indice {
  margin: var(--e4) 0 var(--e2);
  font-family: var(--fonte-display);
  font-size: var(--ts-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--acento-texto);
  font-variant-numeric: tabular-nums;
}

.oserv h3 { font-size: var(--ts-h4); margin: 0 0 var(--e3); }
.oserv-titulo { color: var(--txt-forte); }
.oserv-titulo:hover,
.oserv-titulo:focus-visible {
  color: var(--acento-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.oserv-desc { margin: 0; color: var(--txt-suave); font-size: var(--ts-sm); }

@media (max-width: 899px) { .grade-servicos-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .grade-servicos-cards { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .oserv-midia img,
  .oserv:hover .oserv-midia img,
  .oserv:focus-within .oserv-midia img { transition: none; transform: none; }
}

/* ------------------------------ 14. CATALOGO DE MODELOS (projetos prontos)
   Reaproveita o cartao .oserv (zoom + pilula no hover) e acrescenta a area
   e a ficha de caracteristicas do modelo. */
.planta-area { margin: var(--e4) 0 var(--e2); font-size: var(--ts-sm); color: var(--txt-suave); }
.planta-specs {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--e2) 0;
  font-size: var(--ts-xs); color: var(--txt-forte);
  font-variant-numeric: tabular-nums;
}
.planta-specs li { padding-inline: var(--e3); border-left: 1px solid var(--filete); }
.planta-specs li:first-child { padding-left: 0; border-left: 0; }

/* ------------------------------ 12. FORMULARIO: ERRO, HONEYPOT, CARREGANDO
   Mensagens de erro junto ao campo, campo-armadilha (honeypot) escondido,
   estado de carregamento no botao e versao do formulario dentro dos hubs. */
.campo-erro {
  margin: 0;
  font-size: var(--ts-xs);
  line-height: 1.4;
  color: var(--acento-texto);
}
.campo-erro:empty { display: none; }

/* Campo isca: invisivel para a pessoa, preenchido so por robo. */
.campo-oculto {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario-enviar .botao-carregando { pointer-events: none; }
.formulario-enviar[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

/* Formulario nos hubs (/servicos/ e /blog/): cartao centralizado. */
.orcamento-centro {
  max-width: 560px;
  margin-inline: auto;
  margin-top: var(--e10);
}
.orcamento-centro .caixa-formulario { scroll-margin-top: 96px; }

/* ============================================================
   MAPAS DAS PAGINAS CIDADE x SERVICO
   Mapa interativo da regiao (SVG) + mapa da cidade (OpenStreetMap).
   Sem JavaScript: o pulso e animacao de CSS e os pontos sao links.
   ============================================================ */

.mapa-cidades-grade {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--e10);
  align-items: center;
  margin-top: var(--e12);
}
@media (max-width: 899px) {
  .mapa-cidades-grade { grid-template-columns: 1fr; gap: var(--e8); }
}

.mapa-cidades-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.mapa-cidades-lista li { display: block; }
.mapa-cidades-lista li + li::before { content: none; margin: 0; }
.mapa-cidades-lista a {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--filete);
  text-decoration: none; color: var(--txt-forte); font-weight: 500;
  transition: border-color var(--t-normal) var(--curva),
              background-color var(--t-normal) var(--curva),
              transform var(--t-rapido) var(--curva);
}
.mapa-cidades-lista a:hover,
.mapa-cidades-lista a:focus-visible { border-color: var(--acento); background-color: var(--sup-suave); transform: translateX(2px); }
.mapa-cidades-lista a .icone { color: var(--acento-texto); flex: none; }
.mapa-cidades-lista a[aria-current="page"] { border-color: var(--acento); background-color: var(--sup-suave); font-weight: 700; }
.mapa-cidades-lista .mapa-cidade-nota { display: block; font-size: var(--ts-xs); color: var(--txt-suave); font-weight: 400; }

.mapa-cidades-figura { margin: 0; }
.mapa-svg { width: 100%; height: auto; display: block; }
.mapa-svg .mapa-terra { fill: var(--sup-suave); stroke: var(--filete); stroke-width: 1.5; }
.mapa-svg .mapa-linha { stroke: var(--filete-escuro); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.45; }
.mapa-svg .mapa-rotulo { font-size: 12px; fill: var(--txt-suave-escuro); font-weight: 600; }
.mapa-svg .mapa-ponto { fill: var(--acento); transition: fill var(--t-normal) var(--curva); }
.mapa-svg .mapa-sede .mapa-ponto { fill: var(--cor-grafite); }
.mapa-svg a { cursor: pointer; }
.mapa-svg a:hover .mapa-ponto,
.mapa-svg a:focus-visible .mapa-ponto { fill: var(--acento-hover); }
.mapa-svg a:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.mapa-svg .mapa-atual .mapa-ponto { fill: var(--acento-hover); }
.mapa-svg .mapa-anel {
  fill: none; stroke: var(--acento); stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
  animation: pulsoMapa 2.6s ease-out infinite;
}
.mapa-svg .mapa-sede .mapa-anel { stroke: var(--cor-grafite); }
.mapa-svg .mapa-atual .mapa-anel { animation-duration: 1.8s; }
.mapa-svg .mapa-ponto-grupo:nth-child(2) .mapa-anel { animation-delay: 0.3s; }
.mapa-svg .mapa-ponto-grupo:nth-child(3) .mapa-anel { animation-delay: 0.6s; }
.mapa-svg .mapa-ponto-grupo:nth-child(4) .mapa-anel { animation-delay: 0.9s; }
.mapa-svg .mapa-ponto-grupo:nth-child(5) .mapa-anel { animation-delay: 1.2s; }
.mapa-svg .mapa-ponto-grupo:nth-child(6) .mapa-anel { animation-delay: 1.5s; }
@keyframes pulsoMapa {
  0%   { transform: scale(0.5); opacity: 0.9; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mapa-svg .mapa-anel { animation: none; opacity: 0.35; transform: scale(1.1); }
}

.mapa-cidade { border: 1px solid var(--filete); overflow: hidden; background-color: var(--sup-suave); margin-top: var(--e10); }
.mapa-cidade iframe { display: block; width: 100%; height: 440px; border: 0; }
@media (max-width: 599px) { .mapa-cidade iframe { height: 320px; } }
.mapa-cidade-legenda { margin-top: var(--e3); font-size: var(--ts-sm); color: var(--txt-suave); }

/* ============================================================
   HERO IMERSIVO DAS PAGINAS INTERNAS (reaproveita .capa da home)
   Imagem grande em crossfade + titulo + CTA. Formulario vem abaixo.
   ============================================================ */
.capa-interna { min-height: min(660px, 82svh); }
.capa-interna .capa-conteudo { padding-top: var(--e20); padding-bottom: var(--e16); }
.capa-interna .migalhas { margin-bottom: var(--e5); }
.capa-interna .migalhas ol { flex-wrap: wrap; }
.capa-interna .migalhas a,
.capa-interna .migalhas li,
.capa-interna .migalhas li[aria-current] { color: rgba(255,255,255,0.9); }
.capa-interna .migalhas a:hover { color: #fff; }
.capa-interna .migalhas li + li::before { color: rgba(255,255,255,0.5); }
.capa-interna .capa-resumo { max-width: 46ch; }

/* Seccao de formulario (movida para baixo do hero) */
.form-secao-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--e12);
  align-items: start;
}
@media (max-width: 899px) { .form-secao-grade { grid-template-columns: 1fr; gap: var(--e8); } }
.form-secao-texto .lista-prova { margin-top: var(--e6); }

/* ---- Halo da regiao atendida no mapa da Bahia ---- */
.mapa-bahia-svg .mapa-halo {
  fill: var(--acento); opacity: 0.16;
  transform-box: fill-box; transform-origin: center;
  animation: haloBahia 2.8s ease-out infinite;
}
@keyframes haloBahia {
  0%   { transform: scale(0.7); opacity: 0.24; }
  70%  { transform: scale(1.3);  opacity: 0; }
  100% { transform: scale(1.3);  opacity: 0; }
}
.mapa-bahia-svg .mapa-ponto { stroke: var(--sup-papel); stroke-width: 1.2; }

/* ============================================================
   ANIMACOES DE DESTAQUE (avaliacoes + imagens)
   ============================================================ */

/* Faixa de avaliacoes: brilho passando + estrela pulsando */
.faixa-prova { position: relative; overflow: hidden; }
.faixa-prova::after {
  content: ""; position: absolute; top: 0; left: -35%; width: 28%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg); pointer-events: none;
  animation: faixaBrilho 6s ease-in-out infinite;
}
@keyframes faixaBrilho {
  0%, 8% { left: -35%; }
  40%, 100% { left: 135%; }
}
.faixa-icone--estrela { transform-box: fill-box; transform-origin: center; animation: estrelaPulsa 2.6s ease-in-out infinite; }
@keyframes estrelaPulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
.js .faixa-numero { will-change: contents; }

/* Imagens do acervo: leve inclinacao + brilho girando ao redor no hover */
.cartao-projeto { transition: transform var(--t-normal) var(--curva); }
.cartao-projeto:hover, .cartao-projeto:focus-within { transform: rotate(-1deg); }
.cartao-projeto .projeto-midia { isolation: isolate; }
@property --ang-acervo { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
/* Contorno vermelho SEMPRE percorrendo a borda, evidente */
.cartao-projeto .projeto-midia::after {
  content: ""; position: absolute; inset: 0; padding: 3px; z-index: 2;
  background: conic-gradient(from var(--ang-acervo),
      transparent 0deg, transparent 250deg,
      var(--acento) 300deg, #ff7a70 322deg, var(--acento) 344deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  animation: giraAcervo 3.8s linear infinite;
}
@keyframes giraAcervo { to { --ang-acervo: 360deg; } }
/* leve reforco de brilho no hover, alem do contorno continuo */
.cartao-projeto:hover .projeto-midia::after,
.cartao-projeto:focus-within .projeto-midia::after { padding: 4px; }

/* Imagens do acervo tambem ganham entrada suave (escala) ao revelar */
.js .revelar .projeto-midia > img { transform: scale(1.06); transition: transform var(--t-lento) var(--curva); }
.js .revelar.visivel .projeto-midia > img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .mapa-bahia-svg .mapa-halo,
  .faixa-prova::after,
  .faixa-icone--estrela,
  .cartao-projeto .projeto-midia::after { animation: none; }
  .cartao-projeto .projeto-midia::after { display: none; }
  .faixa-prova::after { display: none; }
  .cartao-projeto:hover, .cartao-projeto:focus-within { transform: none; }
  .js .revelar .projeto-midia > img { transform: none; }
}

/* ---- Todos os municipios da Bahia como pontos (o contorno atendido pulsa) ---- */
.mapa-bahia-svg .mapa-municipios {
  fill: none; stroke: var(--cor-grafite);
  stroke-width: 2.4; stroke-linecap: round; opacity: 0.4;
}

/* ---- Contorno vermelho percorrendo as imagens das etapas ---- */
@property --ang-etapa { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.etapa-quadro { isolation: isolate; }
.js .etapa-quadro::before {
  content: ""; position: absolute; inset: 0; z-index: 2; padding: 3px;
  background: conic-gradient(from var(--ang-etapa),
      transparent 0deg, transparent 250deg,
      var(--acento-no-escuro) 296deg, #ff8f86 320deg, var(--acento-no-escuro) 344deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  animation: contornoEtapa 4s linear infinite;
}
@keyframes contornoEtapa { to { --ang-etapa: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .js .etapa-quadro::before { animation: none; }
}

/* sede como ponto estatico de orientacao no mapa da Bahia */
.mapa-bahia-svg .mapa-sede-fixa .mapa-ponto { fill: var(--cor-grafite); opacity: 0.75; stroke: var(--sup-papel); stroke-width: 1; }


/* ====================================================================
   BLOCO 3 de 8: pagina-sobre.css
   ==================================================================== */

/* =========================================================================
   Marileide Oliveira Arquitetura e Interiores
   Componentes da pagina Sobre, a referencia canonica da pessoa.

   Carrega depois de estilo.css e de pagina-servico.css, e reaproveita o
   cabecalho enxuto, a faixa de prova e o rodape de quatro colunas de la.
   Aqui ficam so as pecas proprias: a capa com retrato, a ficha da
   entidade, a linha do tempo, o bloco do titulo profissional, as citacoes,
   a grade de premios, a lista de imprensa e o cartao de endereco.
   ========================================================================= */

/* ------------------------------------------------------------- 1. CAPA */

.capa-sobre {
  padding-block: clamp(2.5rem, 5vw, 5rem) clamp(3rem, 6vw, 6rem);
  background-color: var(--sup-papel);
}

.capa-sobre-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

/* O nome e o cargo sao duas linhas dentro do mesmo H1: o buscador le um
   titulo so, e a leitura humana ganha a hierarquia. */
.capa-sobre h1 {
  margin-top: var(--e4);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

.nome-entidade {
  font-size: clamp(2.5rem, 5.4vw, 5rem);
  line-height: var(--al-justa);
  letter-spacing: var(--ee-display);
}

.cargo-entidade {
  font-family: var(--fonte-texto);
  font-size: var(--ts-lg);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento-texto);
}

.capa-sobre-apoio {
  margin-top: var(--e8);
  max-width: 54ch;
  font-size: var(--ts-lg);
  color: var(--txt-suave);
}

/* ---------------------------------------------------- 2. FICHA DA PESSOA */

.ficha-entidade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: var(--e10) 0 0;
  border-top: 1px solid var(--filete);
}

.ficha-entidade > div {
  padding: var(--e4) 0;
  border-bottom: 1px solid var(--filete);
}

.ficha-entidade > div:nth-child(odd) { padding-right: var(--e6); }
.ficha-entidade > div:nth-child(even) { padding-left: var(--e6); border-left: 1px solid var(--filete); }

.ficha-entidade dt {
  font-size: var(--ts-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-suave);
  margin-bottom: var(--e1);
}

.ficha-entidade dd {
  margin: 0;
  font-size: var(--ts-sm);
  font-weight: 500;
  color: var(--txt-forte);
}

/* -------------------------------------------------------- 3. RETRATO */

.capa-sobre-retrato {
  position: relative;
  margin: 0;
}

.retrato-quadro { position: relative; display: block; }

.retrato-quadro > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.capa-sobre-retrato figcaption {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding-top: var(--e4);
  font-size: var(--ts-sm);
  color: var(--txt-suave);
}

.retrato-marca {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  background-color: var(--acento);
  color: #ffffff;
}

.retrato-marca .icone { width: 16px; height: 16px; }

@media (max-width: 899px) {
  .capa-sobre-grade { grid-template-columns: 1fr; }
  .capa-sobre-retrato { order: -1; }
  .ficha-entidade { grid-template-columns: 1fr; }
  .ficha-entidade > div:nth-child(odd),
  .ficha-entidade > div:nth-child(even) {
    padding-inline: 0;
    border-left: 0;
  }
}

/* ---------------------------------------------------- 4. LINHA DO TEMPO */

.linha-tempo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e8);
  margin: var(--e16) 0 0;
  padding: 0;
  list-style: none;
}

.marco {
  position: relative;
  padding-top: var(--e8);
  border-top: 1px solid var(--filete);
}

/* Marcador sobre o filete: liga visualmente os quatro marcos. */
.marco::before {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  width: 9px;
  height: 9px;
  background-color: var(--acento);
}

.marco-ano {
  font-size: var(--ts-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento-texto);
  margin-bottom: var(--e3);
}

.marco h3 {
  font-size: var(--ts-xl);
  margin-bottom: var(--e3);
}

.marco p:last-child {
  font-size: var(--ts-sm);
  color: var(--txt-suave);
}

@media (max-width: 1023px) {
  .linha-tempo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e10) var(--e8); }
}

@media (max-width: 599px) {
  .linha-tempo { grid-template-columns: 1fr; }
}

/* ------------------------------------------- 5. TITULO PROFISSIONAL */

.bloco-registro {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e8);
  align-items: start;
  max-width: 82ch;
}

.bloco-registro > .icone { color: var(--acento-texto); }

.bloco-registro h2 {
  font-size: var(--ts-h4);
  max-width: 30ch;
  margin-bottom: var(--e6);
}

.bloco-registro p {
  color: #565a60;
  margin-bottom: var(--e4);
}

.bloco-registro strong { color: var(--txt-forte); }

@media (max-width: 599px) {
  .bloco-registro { grid-template-columns: 1fr; gap: var(--e4); }
}

/* -------------------------------------------------------- 6. METODO */

.metodo-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.metodo-retrato { margin: 0; position: sticky; top: 120px; }

.metodo-retrato > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.grade-entregaveis--duas {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--e10);
}

@media (max-width: 1023px) {
  .metodo-grade { grid-template-columns: 1fr; }
  .metodo-retrato { position: static; max-width: 420px; }
}

@media (max-width: 599px) {
  .grade-entregaveis--duas { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- 7. CITACOES */

.citacao-destaque {
  margin: var(--e8) 0 0;
  padding: var(--e6) 0 var(--e6) var(--e8);
  border-left: 3px solid var(--acento);
}

.citacao-destaque p {
  font-family: var(--fonte-display);
  font-size: var(--ts-xl);
  line-height: 1.32;
  letter-spacing: var(--ee-titulo);
  color: var(--txt-forte);
}

.citacao-destaque footer {
  margin-top: var(--e4);
  font-size: var(--ts-sm);
  color: var(--txt-suave);
}

.citacao-destaque cite { font-style: normal; }

/* A medida vai em rem, nao em ch: o ch aqui seria calculado sobre o corpo
   do blockquote, e nao sobre o tamanho grande do paragrafo. */
.citacao-larga {
  max-width: 46rem;
  margin: var(--e16) auto 0;
  text-align: center;
}

.citacao-larga p {
  font-family: var(--fonte-display);
  font-size: var(--ts-h3);
  line-height: 1.24;
  letter-spacing: var(--ee-titulo);
  color: var(--txt-sobre-escuro);
}

.citacao-larga footer {
  margin-top: var(--e6);
  font-size: var(--ts-sm);
  color: var(--txt-suave-escuro);
}

.citacao-larga cite { font-style: normal; }

/* -------------------------------------------------------- 8. PREMIOS */

.grade-premios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e6);
  margin-top: var(--e12);
}

.premio {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--filete);
  background-color: var(--sup-papel-puro);
}

.premio-midia {
  overflow: hidden;
  background-color: var(--sup-suave);
}

.premio-midia > img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform var(--t-lento) var(--curva);
}

.premio:hover .premio-midia > img { transform: scale(1.03); }

.premio figcaption {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--e6);
}

.premio-ano {
  font-size: var(--ts-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento-texto);
  margin-bottom: var(--e3);
}

.premio figcaption h3 {
  font-size: var(--ts-lg);
  margin-bottom: var(--e3);
}

.premio-texto {
  font-size: var(--ts-sm);
  color: var(--txt-suave);
  margin-bottom: var(--e6);
}

.premio figcaption > a,
.premio-nota {
  margin-top: auto;
  font-size: var(--ts-sm);
}

.premio-nota { color: var(--txt-suave); }

@media (max-width: 899px) {
  .grade-premios { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ 9. IMPRENSA */

.lista-imprensa {
  margin: var(--e12) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--filete);
}

.lista-imprensa > li { border-bottom: 1px solid var(--filete); }

.lista-imprensa article {
  display: grid;
  grid-template-columns: minmax(0, 0.28fr) minmax(0, 0.72fr);
  gap: var(--e8);
  align-items: start;
  padding: var(--e8) 0;
}

.imprensa-meta {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  font-size: var(--ts-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-suave);
}

.imprensa-meta span { color: var(--acento-texto); font-weight: 500; }

.imprensa-corpo { display: grid; gap: var(--e3); }

.lista-imprensa h3 {
  font-size: var(--ts-h4);
  max-width: 32ch;
  margin: 0;
}

.lista-imprensa h3 a { color: var(--txt-forte); }

.lista-imprensa h3 a:hover,
.lista-imprensa h3 a:focus-visible { color: var(--acento-texto); }

.imprensa-resumo {
  font-size: var(--ts-sm);
  color: var(--txt-suave);
  max-width: 62ch;
}

.imprensa-ler {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  justify-self: start;
  min-height: 44px;
  font-size: var(--ts-sm);
  font-weight: 500;
  color: var(--acento-texto);
}

.imprensa-ler .icone { transition: transform var(--t-rapido) var(--curva); }

.imprensa-ler:hover .icone,
.imprensa-ler:focus-visible .icone { transform: translate(3px, -3px); }

@media (max-width: 767px) {
  .lista-imprensa article { grid-template-columns: 1fr; gap: var(--e3); }
  .imprensa-meta { flex-direction: row; gap: var(--e3); }
}

/* ---------------------------------------------------- 10. ESCRITORIO */

.escritorio-grade {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.escritorio-foto { margin: 0; }

.escritorio-foto > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.cartao-endereco {
  margin-top: var(--e10);
  padding: var(--e6);
  background-color: var(--sup-suave);
  font-style: normal;
  --acento-texto: #a81f27;
}

.endereco-rotulo {
  font-size: var(--ts-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #565a60;
  margin-bottom: var(--e3);
}

.endereco-linha {
  font-size: var(--ts-base);
  font-weight: 500;
  color: var(--txt-forte);
}

.endereco-contato {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e8);
  margin-top: var(--e5);
  padding-top: var(--e5);
  border-top: 1px solid #bdb9b0;
}

.endereco-contato a {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 44px;
  font-size: var(--ts-sm);
  font-weight: 500;
  color: var(--acento-texto);
}

.endereco-contato a:hover { color: var(--txt-forte); }

@media (max-width: 899px) {
  .escritorio-grade { grid-template-columns: 1fr; }
  .escritorio-foto { order: -1; }
}

/* ==================================================== 11. MOLDURA VIVA

   Dois tracos percorrem o contorno do retrato sem parar: um no vermelho da
   marca e outro no grafite, defasados em meia volta. O desenho e um
   retangulo de 394 x 494 unidades, entao o perimetro e 1776; a corrida e
   feita deslocando o tracejado por essa distancia exata, o que faz o laco
   fechar sem salto.

   Nada disso e imagem nem script: e um SVG de duas linhas animado por CSS,
   e o retrato continua sendo o unico arquivo que a capa carrega. */

.retrato-moldura {
  position: absolute;
  inset: -14px;
  z-index: 2;
  pointer-events: none;
}

.retrato-moldura svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cobra {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  /* 210 de traco para 1566 de vao: um corpo longo e um intervalo generoso */
  stroke-dasharray: 210 1566;
  animation: correr-moldura 9s linear infinite;
}

.cobra-vermelha { stroke: var(--cor-vermelho); }

.cobra-grafite {
  stroke: var(--cor-grafite);
  /* meia volta de atraso: os dois nunca se encontram */
  animation-delay: -4.5s;
}

@keyframes correr-moldura {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -1776; }
}

/* Ao passar o ponteiro, os dois aceleram. */
@media (hover: hover) and (pointer: fine) {
  .capa-sobre-retrato:hover .cobra { animation-duration: 4s; }
}

/* Cantos fixos, para a moldura existir mesmo com o movimento desligado. */
.retrato-quadro::before,
.retrato-quadro::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  z-index: 2;
  pointer-events: none;
}

.retrato-quadro::before {
  left: -14px;
  top: -14px;
  border-left: 3px solid var(--cor-vermelho);
  border-top: 3px solid var(--cor-vermelho);
}

.retrato-quadro::after {
  right: -14px;
  bottom: -14px;
  border-right: 3px solid var(--cor-grafite);
  border-bottom: 3px solid var(--cor-grafite);
}

/* ================================================= 12. ENTRADAS PROPRIAS */

/* Os marcos da trajetoria sobem em cascata e o quadradinho vermelho
   aparece depois, como se assentasse no filete. */
.js .entrada-marcos > .marco::before {
  transform: scale(0);
  transform-origin: left center;
  transition: transform 500ms var(--curva) 320ms;
}

.js .entrada-marcos.visivel > .marco::before { transform: scale(1); }

/* Os cartoes de premio entram com um leve avanco de escala na foto. */
.js .entrada-premios .premio-midia > img {
  transform: scale(1.08);
  transition: transform 1100ms var(--curva);
}

.js .entrada-premios.visivel .premio-midia > img { transform: scale(1); }

/* A citacao grande cresce de 0,96 para 1: chama o olho sem piscar. */
.js .entrada-citacao {
  transform: translateY(28px) scale(0.96);
  transform-origin: center top;
}

.js .entrada-citacao.visivel { transform: none; }

/* Cada item de imprensa desliza um pouco da esquerda. */
.js .entrada-imprensa > li {
  transform: translate3d(-24px, 0, 0);
}

.js .entrada-imprensa.visivel > li { transform: none; }

/* A ficha da capa abre linha por linha. */
.js .ficha-entidade > div { transform: translateY(12px); }
.js .ficha-entidade.visivel > div { transform: none; }

/* As perguntas do FAQ entram em cascata curta. */
.js .lista-faq > .item-faq { transform: translateY(16px); }
.js .lista-faq.visivel > .item-faq { transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* Sem movimento, a moldura vira um contorno inteiro e parado. */
  .cobra {
    animation: none;
    stroke-dasharray: none;
    stroke-width: 2;
  }

  .cobra-grafite { display: none; }

  .js .entrada-marcos > .marco::before,
  .js .entrada-premios .premio-midia > img,
  .js .entrada-citacao,
  .js .entrada-imprensa > li,
  .js .ficha-entidade > div,
  .js .lista-faq > .item-faq { transform: none; }
}


/* ====================================================================
   BLOCO 4 de 8: pagina-hub.css
   ==================================================================== */

/* =========================================================================
   Marileide Oliveira Arquitetura e Interiores
   Componentes da pagina hub de servicos.

   Carrega depois de estilo.css e de pagina-servico.css. Aqui ficam a capa
   com atalhos, os cartoes de servico e a lista de rotas.
   ========================================================================= */

/* ------------------------------------------------------------- 1. CAPA */

.capa-hub {
  padding-block: clamp(2.5rem, 5vw, 5rem) clamp(2.5rem, 5vw, 4.5rem);
  background-color: var(--sup-papel);
}

.capa-hub-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}

.capa-hub h1 {
  font-size: clamp(2.375rem, 5vw, 4.75rem);
  line-height: var(--al-justa);
  letter-spacing: var(--ee-display);
  max-width: 14ch;
  margin-top: var(--e3);
}

.capa-hub-apoio {
  max-width: 52ch;
  color: var(--txt-suave);
}

/* Atalhos para os tres hubs: a pagina e longa e o visitante chega com um
   objetivo, nao com vontade de ler tudo. */
.atalhos-hub {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e3);
  margin: var(--e12) 0 0;
  padding: 0;
  list-style: none;
}

.atalhos-hub a {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 56px;
  padding: var(--e3) var(--e5);
  border: 1px solid var(--filete);
  background-color: var(--sup-papel-puro);
  font-size: var(--ts-sm);
  font-weight: 500;
  color: var(--txt-forte);
  transition: border-color var(--t-rapido) var(--curva),
              color var(--t-rapido) var(--curva);
}

.atalhos-hub .icone { color: var(--acento-texto); flex: none; }

.atalhos-hub a:hover,
.atalhos-hub a:focus-visible {
  border-color: var(--acento);
  color: var(--acento-texto);
}

@media (max-width: 899px) {
  .capa-hub-grade { grid-template-columns: 1fr; align-items: start; }
  .capa-hub h1 { max-width: 18ch; }
  .atalhos-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
  .atalhos-hub { grid-template-columns: 1fr; }
}

/* -------------------------------------------------- 2. CARTOES DE SERVICO */

.grade-hub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e6);
  margin-top: var(--e12);
}

.grade-hub--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cartao-hub {
  display: flex;
  flex-direction: column;
  padding: var(--e8);
  border: 1px solid var(--filete);
  background-color: var(--sup-papel-puro);
  transition: border-color var(--t-normal) var(--curva),
              transform var(--t-normal) var(--curva);
}

.cartao-hub:hover {
  border-color: var(--acento);
  transform: translateY(-4px);
}

/* O serviço com página própria recebe o realce: é para onde queremos levar. */
.cartao-hub--destaque {
  background-color: var(--acento-suave);
  border-color: #f0c9c7;
  --acento-texto: #a81f27;
}

.hub-indice {
  font-family: var(--fonte-display);
  font-size: var(--ts-xl);
  font-weight: 500;
  color: var(--acento-texto);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--e4);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--filete);
}

.cartao-hub h3 {
  font-size: var(--ts-xl);
  line-height: var(--al-titulo);
  margin-bottom: var(--e4);
}

.cartao-hub h3 a { color: var(--txt-forte); }
.cartao-hub h3 a:hover,
.cartao-hub h3 a:focus-visible { color: var(--acento-texto); }

.hub-resumo {
  font-size: var(--ts-sm);
  color: var(--txt-suave);
  margin-bottom: var(--e6);
}

.cartao-hub--destaque .hub-resumo,
.cartao-hub--destaque .hub-lista li { color: #565a60; }

.hub-lista {
  margin: 0 0 var(--e8);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e3);
}

.hub-lista li {
  position: relative;
  padding-left: var(--e6);
  font-size: var(--ts-sm);
  color: var(--txt-suave);
}

.hub-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background-color: var(--acento);
}

.hub-rodape {
  margin-top: auto;
}

.hub-rodape .botao {
  width: 100%;
  justify-content: flex-start;
}

@media (max-width: 1023px) {
  .grade-hub,
  .grade-hub--duas { grid-template-columns: 1fr; }
  .cartao-hub { padding: var(--e6); }
}

/* ------------------------------------------------------ 3. LISTA DE ROTAS */

.lista-rota {
  margin: var(--e16) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--filete-escuro);
}

.lista-rota > li {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--e6);
  align-items: baseline;
  padding: var(--e6) 0;
  border-bottom: 1px solid var(--filete-escuro);
}

.rota-frase {
  font-family: var(--fonte-display);
  font-size: var(--ts-lg);
  color: var(--txt-sobre-escuro);
}

.rota-destino {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-size: var(--ts-sm);
  color: var(--txt-suave-escuro);
}

.rota-destino .icone {
  color: var(--acento-no-escuro);
  flex: none;
  transition: transform var(--t-rapido) var(--curva);
}

.rota-destino a {
  font-weight: 500;
  color: var(--acento-no-escuro);
  border-bottom: 1px solid transparent;
}

.rota-destino a:hover,
.rota-destino a:focus-visible {
  color: var(--txt-sobre-escuro);
  border-bottom-color: currentColor;
}

.lista-rota > li:hover .rota-destino .icone { transform: translateX(4px); }

@media (max-width: 767px) {
  .lista-rota > li { grid-template-columns: 1fr; gap: var(--e3); }
}


/* ====================================================================
   BLOCO 5 de 8: pagina-artigo.css
   ==================================================================== */

/* =========================================================================
   Marileide Oliveira Arquitetura e Interiores
   Componentes do artigo e do hub de conteudo.

   Carrega depois de estilo.css, pagina-servico.css e pagina-hub.css.
   Regra de formatacao adotada aqui: nenhum filete horizontal separa blocos
   do corpo do artigo. A separacao e feita por espaco, escala tipografica e
   mudanca de fundo.
   ========================================================================= */

/* ------------------------------------------ 1. PROGRESSO DE LEITURA */

.progresso-leitura {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  width: 100%;
  height: 3px;
  pointer-events: none;
}

.progresso-leitura > span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background-image: linear-gradient(90deg, var(--acento), var(--dourado));
}

/* Barra guiada pela rolagem, sem uma linha de JavaScript. Navegadores que
   nao suportam animation-timeline simplesmente nao mostram a barra. */
@supports (animation-timeline: scroll()) {
  .progresso-leitura > span {
    animation: encher-progresso linear;
    animation-timeline: scroll();
  }
}

@keyframes encher-progresso {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .progresso-leitura { display: none; }
}

/* ------------------------------------------------- 2. CAPA DO ARTIGO */

.artigo-capa {
  padding-block: clamp(2rem, 4vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  background-color: var(--sup-papel);
}

.artigo-categoria {
  font-size: var(--ts-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acento-texto);
  margin-bottom: var(--e4);
}

.artigo-capa h1 {
  font-size: clamp(2.125rem, 4.4vw, 4rem);
  line-height: var(--al-justa);
  letter-spacing: var(--ee-display);
  max-width: 24ch;
}

/* A linha fina responde a pergunta antes de o leitor rolar a pagina. */
.artigo-lide {
  margin-top: var(--e8);
  max-width: 68ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.55;
  color: var(--txt-suave);
}

.artigo-lide strong { color: var(--txt-forte); font-weight: 500; }

.artigo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4) var(--e10);
  margin: var(--e10) 0 0;
  padding-top: var(--e6);
  border-top: 1px solid var(--filete);
}

.artigo-meta > div { display: grid; gap: var(--e1); }

.artigo-meta dt {
  font-size: var(--ts-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-suave);
}

.artigo-meta dd {
  margin: 0;
  font-size: var(--ts-sm);
  font-weight: 500;
  color: var(--txt-forte);
}

.artigo-meta dd a { color: var(--acento-texto); }
.artigo-meta dd a:hover { color: var(--txt-forte); }

.artigo-figura { margin: var(--e10) 0 0; }

.artigo-figura > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.artigo-figura figcaption {
  padding-top: var(--e4);
  max-width: 72ch;
  font-size: var(--ts-sm);
  color: var(--txt-suave);
}

/* ------------------------------------------------------- 3. GRADE */

.artigo-grade {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
  padding-block: clamp(2.5rem, 5vw, 5rem) clamp(3rem, 6vw, 6rem);
}

/* A coluna tem a altura do artigo inteiro, e nao a do proprio conteudo.
   Indice e leituras rolam junto com o texto; o cartao de contato e que
   fica preso no topo e acompanha o leitor ate o fim, de modo que a coluna
   nunca aparece vazia ao lado de um texto longo. Nenhuma rolagem interna:
   o leitor rola a pagina, e so. */
.artigo-lateral {
  align-self: stretch;
  display: grid;
  align-content: start;
  gap: var(--e5);
}

.artigo-lateral > .cartao-lateral:last-child {
  position: sticky;
  top: 104px;
}

.artigo-indice {
  padding: var(--e6);
  background-color: var(--sup-suave);
}

.indice-titulo,
.lateral-rotulo {
  font-size: var(--ts-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #565a60;
  margin-bottom: var(--e4);
}

.artigo-indice ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: indice;
  display: grid;
  gap: var(--e1);
}

.artigo-indice li { counter-increment: indice; }

.artigo-indice a {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--e2);
  padding: var(--e2) 0;
  font-size: var(--ts-sm);
  color: #565a60;
}

.artigo-indice a::before {
  content: counter(indice, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  color: #a81f27;
}

.artigo-indice a:hover,
.artigo-indice a:focus-visible { color: var(--txt-forte); }

/* ---------------------------------------- cartoes da coluna lateral */

.cartao-lateral {
  padding: var(--e6);
  background-color: var(--cor-grafite);
  color: var(--txt-no-escuro);
}

.cartao-lateral .lateral-rotulo { color: var(--acento-no-escuro); }

.cartao-lateral h2 {
  font-size: var(--ts-md);
  line-height: var(--al-titulo);
  color: #fff;
  margin-bottom: var(--e3);
}

.lateral-apoio {
  font-size: var(--ts-sm);
  line-height: 1.6;
  color: var(--txt-suave-escuro);
  margin-bottom: var(--e5);
}

.lateral-acoes { display: grid; gap: var(--e2); }

.lateral-acoes .botao {
  width: 100%;
  justify-content: space-between;
  font-size: var(--ts-sm);
  padding-inline: var(--e4);
  white-space: nowrap;
}
/* O marcador quadrado da marca nao cabe na coluna estreita e empurraria
   o rotulo para duas linhas. */
.lateral-acoes .botao::before { display: none; }

.lateral-acoes .botao-contorno {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.lateral-acoes .botao-contorno:hover {
  background-color: #fff;
  color: var(--cor-grafite);
  border-color: #fff;
}

.lateral-dados {
  margin: var(--e5) 0 0;
  padding: var(--e5) 0 0;
  list-style: none;
  display: grid;
  gap: var(--e3);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.lateral-dados li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--e3);
  align-items: start;
  font-size: var(--ts-xs);
  line-height: 1.55;
  color: var(--txt-suave-escuro);
}

.lateral-dados .icone { color: var(--acento-no-escuro); margin-top: 2px; }
.lateral-dados a { color: #fff; font-weight: 500; }

.lateral-assinatura {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--e3);
  align-items: center;
  margin: var(--e5) 0 0;
  padding-top: var(--e5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--ts-xs);
  line-height: 1.5;
  color: var(--txt-suave-escuro);
}

.lateral-assinatura img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 50%;
}

.lateral-assinatura strong { display: block; font-weight: 500; }
.lateral-assinatura strong a { color: #fff; }

/* Segundo cartao, em superficie clara, para separar do bloco de contato */
.cartao-lateral--claro {
  background-color: var(--sup-suave);
  color: var(--txt-suave);
}
.cartao-lateral--claro h2 { color: var(--txt-forte); }
/* O rotulo claro volta ao cinza de leitura: o dourado do cartao escuro
   daria 1,85:1 sobre o bege, muito abaixo do minimo AA. */
.cartao-lateral--claro .lateral-rotulo { color: #565a60; }

.lateral-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e4);
}

.lateral-links li { display: grid; gap: 2px; }

.lateral-links a {
  font-size: var(--ts-sm);
  font-weight: 500;
  color: #a81f27;
}
.lateral-links a:hover { color: var(--txt-forte); }
.lateral-links span { font-size: var(--ts-xs); line-height: 1.5; color: #565a60; }

@media (max-width: 1023px) {
  /* minmax(0, 1fr) e nao 1fr: o piso de min-content de 1fr deixaria a
     tabela larga esticar a coluna alem da largura da tela. */
  .artigo-grade { grid-template-columns: minmax(0, 1fr); }
  .artigo-lateral {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .artigo-lateral > .cartao-lateral:last-child { position: static; }
  .artigo-indice { grid-column: 1 / -1; }
  .artigo-indice ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .artigo-lateral { grid-template-columns: 1fr; }
  .artigo-indice ol { grid-template-columns: 1fr; }
}

/* -------------------------------------------- 4. CORPO DO ARTIGO */

.artigo-corpo { max-width: 74ch; }

.artigo-corpo > section { margin-bottom: var(--e24); }
.artigo-corpo > section:last-child { margin-bottom: 0; }

.artigo-corpo h2 {
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  line-height: var(--al-titulo);
  letter-spacing: var(--ee-titulo);
  margin-bottom: var(--e6);
  scroll-margin-top: 104px;
}

.artigo-corpo h3 {
  font-size: var(--ts-xl);
  line-height: var(--al-titulo);
  margin: var(--e12) 0 var(--e4);
  scroll-margin-top: 104px;
}

.artigo-corpo h4 {
  font-size: var(--ts-lg);
  font-weight: 500;
  color: var(--acento-texto);
  margin: var(--e8) 0 var(--e2);
}

/* Os dois niveis mais profundos marcam cenarios dentro de um mesmo
   raciocinio. O h5 abre o bloco, o h6 nomeia cada cenario. */
.artigo-corpo h5 {
  font-size: var(--ts-md);
  font-weight: 500;
  color: var(--txt-forte);
  margin: var(--e10) 0 var(--e3);
  padding-left: var(--e4);
  border-left: 3px solid var(--acento);
}

.artigo-corpo h6 {
  font-size: var(--ts-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-suave);
  margin: var(--e6) 0 var(--e2);
}

/* Nota que fecha a lista de fontes: nenhuma secao termina em lista. */
.nota-fontes {
  margin-top: var(--e8);
  max-width: 68ch;
  font-size: var(--ts-sm);
  line-height: 1.7;
  color: var(--txt-suave);
}

.artigo-corpo p {
  margin-bottom: var(--e5);
  font-size: var(--ts-lg);
  line-height: 1.68;
  color: var(--txt-suave);
}

.artigo-corpo p strong { color: var(--txt-forte); font-weight: 500; }

.artigo-corpo a:not(.botao) {
  color: var(--acento-texto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.artigo-corpo a:not(.botao):hover { color: var(--acento-hover); }

/* ----------------------------------------------- 5. CAIXA DE RESPOSTA */

/* Bloco desenhado para virar trecho em destaque na busca: pergunta
   respondida em um paragrafo fechado, sem depender do resto da pagina. */
.caixa-resposta {
  margin-bottom: var(--e8);
  padding: var(--e8);
  background-color: var(--acento-suave);
  border-left: 4px solid var(--acento);
  --acento-texto: #a81f27;
}

.resposta-rotulo {
  font-size: var(--ts-xs) !important;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a81f27 !important;
  margin-bottom: var(--e3) !important;
}

.caixa-resposta p:last-child {
  margin-bottom: 0;
  color: #565a60;
}

/* ------------------------------------------------------ 6. TABELAS */

.tabela-artigo {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  text-align: left;
}

.tabela-artigo caption {
  caption-side: top;
  padding-bottom: var(--e4);
  font-size: var(--ts-sm);
  font-weight: 500;
  color: var(--txt-forte);
  text-align: left;
}

.tabela-artigo th,
.tabela-artigo td {
  padding: var(--e4);
  border-bottom: 1px solid var(--filete);
  vertical-align: top;
  font-size: var(--ts-sm);
  line-height: 1.5;
}

.tabela-artigo thead th {
  border-bottom: 2px solid var(--cor-grafite);
  font-family: var(--fonte-display);
  font-weight: 500;
  color: var(--txt-forte);
}

.tabela-artigo tbody th {
  font-weight: 500;
  color: var(--txt-forte);
  background-color: var(--sup-suave);
}

.tabela-artigo td { color: var(--txt-suave); }

.tabela-artigo tbody tr:last-child td,
.tabela-artigo tbody tr:last-child th { border-bottom: 0; }

.artigo-corpo .tabela-rolavel { margin: var(--e6) 0 var(--e8); }

/* ------------------------------------------------------- 7. LISTAS */

.lista-numerada {
  margin: var(--e6) 0 var(--e8);
  padding: 0;
  list-style: none;
  counter-reset: passo;
  display: grid;
  gap: var(--e4);
}

/* Numeracao posicionada em vez de coluna de grade: o conteudo do item
   continua sendo texto corrido, e qualquer <strong> ou <a> dentro dele
   flui na mesma linha em vez de virar uma celula separada. */
.lista-numerada > li {
  counter-increment: passo;
  position: relative;
  padding-left: 3.25rem;
  font-size: var(--ts-lg);
  line-height: 1.6;
  color: var(--txt-suave);
}
.lista-numerada > li::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--fonte-display);
  font-size: var(--ts-lg);
  font-weight: 500;
  line-height: 1.6;
  color: var(--acento-texto);
  font-variant-numeric: tabular-nums;
}

.lista-numerada strong { color: var(--txt-forte); font-weight: 500; }


/* ------------------------------------------------- 8. ASSINATURA */

.assinatura-autor {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--e8);
  align-items: start;
  margin-top: var(--e24);
  padding: var(--e8);
  background-color: var(--sup-suave);
}

.assinatura-autor > img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 50%;
}

.autor-rotulo {
  font-size: var(--ts-xs) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #565a60 !important;
  margin-bottom: var(--e2) !important;
}

.assinatura-autor h2 {
  font-size: var(--ts-xl) !important;
  margin-bottom: var(--e1) !important;
}

.assinatura-autor h2 a { text-decoration: none !important; color: var(--txt-forte) !important; }
.assinatura-autor h2 a:hover { color: #a81f27 !important; }

.autor-cargo {
  font-size: var(--ts-sm) !important;
  color: #a81f27 !important;
  margin-bottom: var(--e4) !important;
}

.assinatura-autor p { font-size: var(--ts-base) !important; color: #565a60 !important; }

@media (max-width: 599px) {
  .assinatura-autor { grid-template-columns: 1fr; gap: var(--e5); }
  .assinatura-autor > img { max-width: 7rem; }
}

/* ---------------------------------------------------- 9. FONTES */

.lista-fontes {
  margin: var(--e8) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e5);
  max-width: 76ch;
}

.lista-fontes > li { display: grid; gap: var(--e1); }

.lista-fontes a {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 44px;
  font-size: var(--ts-base);
  font-weight: 500;
  color: #a81f27;
}

.lista-fontes a:hover { color: var(--txt-forte); }

.lista-fontes span { font-size: var(--ts-sm); color: #565a60; }

/* ================================================ 10. HUB DE CONTEÚDO */

.destaque-conteudo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  margin-top: var(--e12);
  padding: var(--e8);
  border: 1px solid var(--filete);
  background-color: var(--sup-papel-puro);
}

.destaque-midia { margin: 0; overflow: hidden; }

.destaque-midia > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-lento) var(--curva);
}

.destaque-conteudo:hover .destaque-midia > img { transform: scale(1.03); }

.destaque-etiqueta {
  display: inline-block;
  padding: var(--e1) var(--e4);
  background-color: var(--acento);
  color: #ffffff;
  font-size: var(--ts-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--e5);
}

.destaque-conteudo h3 {
  font-size: var(--ts-h3);
  line-height: var(--al-titulo);
  letter-spacing: var(--ee-titulo);
  margin-bottom: var(--e4);
}

.destaque-conteudo h3 a { color: var(--txt-forte); }
.destaque-conteudo h3 a:hover { color: var(--acento-texto); }

.destaque-resumo { color: var(--txt-suave); margin-bottom: var(--e6); }

.destaque-dados {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e6);
  margin-bottom: var(--e8);
  font-size: var(--ts-sm);
  color: var(--txt-suave);
}

.destaque-dados span { display: inline-flex; align-items: center; gap: var(--e2); }
.destaque-dados .icone { color: var(--acento-texto); }

@media (max-width: 899px) {
  .destaque-conteudo { grid-template-columns: 1fr; padding: var(--e6); }
  .destaque-midia { order: -1; }
}

/* Cada cartao responde uma pergunta antes de oferecer o texto longo:
   a pergunta, a resposta com o numero, o que costuma pegar e a saida. */
.grade-nucleos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e6);
  margin-top: var(--e12);
}

.nucleo {
  display: flex;
  flex-direction: column;
  padding: var(--e8);
  border: 1px solid var(--filete);
  background-color: var(--sup-papel-puro);
}

.nucleo > .icone { color: var(--acento-texto); margin-bottom: var(--e4); }

.nucleo h3 { font-size: var(--ts-xl); margin-bottom: var(--e3); }

.nucleo > p {
  font-size: var(--ts-sm);
  color: var(--txt-suave);
  margin-bottom: var(--e6);
}

.nucleo ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e3);
}

.nucleo li {
  position: relative;
  padding-left: var(--e6);
  font-size: var(--ts-sm);
  color: var(--txt-suave);
}

.nucleo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background-color: transparent;
  border: 1px solid var(--acento);
}

.nucleo li.publicado::before { background-color: var(--acento); }
.nucleo li.publicado a { color: var(--acento-texto); font-weight: 500; }
.nucleo li.publicado a:hover { color: var(--txt-forte); }

/* A pergunta e a resposta curta: o unico bloco do cartao que o leitor
   precisa ler para sair dali com o numero na mao. */
.nucleo-pergunta {
  font-size: var(--ts-md) !important;
  font-weight: 500;
  color: var(--txt-forte) !important;
  margin-bottom: var(--e2) !important;
  line-height: var(--al-titulo);
}

.nucleo-resposta {
  font-size: var(--ts-base) !important;
  line-height: 1.62;
  color: var(--txt-suave) !important;
  margin-bottom: var(--e6) !important;
  padding-bottom: var(--e6);
  border-bottom: 1px solid var(--filete);
}

.nucleo-resposta strong { color: var(--txt-forte); font-weight: 500; }

.nucleo-intro {
  font-size: var(--ts-xs) !important;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #565a60 !important;
  margin-bottom: var(--e4) !important;
}

/* Nenhum cartao termina em lista: a saida fecha o bloco em prosa
   e leva para a pagina que aprofunda. */
.nucleo-saida {
  margin: auto 0 0;
  padding-top: var(--e6);
  font-size: var(--ts-sm) !important;
}

.nucleo-saida a {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-weight: 500;
  color: #a81f27;
}
.nucleo-saida a:hover { color: var(--txt-forte); }

@media (max-width: 899px) {
  .grade-nucleos { grid-template-columns: 1fr; }
  .nucleo { padding: var(--e6); }
}

/* Na superficie bege a marca vermelha padrao fica em 4,44:1, abaixo do
   minimo AA para texto pequeno. O bloco de assinatura usa o vermelho
   escurecido #a81f27, que atinge 4,98:1 sobre o mesmo fundo. */
.assinatura-autor .botao-contorno {
  color: #a81f27;
  border-color: #a81f27;
}
.assinatura-autor .botao-contorno:hover {
  background-color: #a81f27;
  color: #fff;
}

/* ------------------------------------------- 11. FIGURAS DO ARTIGO */

/* Os graficos sao gerados por ferramentas/graficos_artigo.py a partir dos
   mesmos numeros escritos no texto, entao figura e texto nunca divergem.
   Em telas largas a figura avanca um pouco alem da coluna de leitura,
   porque um grafico com rotulos precisa de mais largura que um paragrafo. */
.figura-artigo {
  margin: var(--e10) 0;
  background-color: var(--sup-papel);
}

.figura-artigo > img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--filete);
}

.figura-artigo figcaption {
  padding-top: var(--e4);
  max-width: 68ch;
  font-size: var(--ts-sm);
  line-height: 1.6;
  color: var(--txt-suave);
}

@media (min-width: 1280px) {
  .figura-artigo { width: calc(100% + 6rem); max-width: none; }
}

/* ------------------------------------ 12. CONTATO E FAQ (sete blocos) */

/* Sete atalhos nao cabem em quatro colunas sem sobrar buraco na segunda
   linha. Em tela larga viram sete colunas iguais; abaixo disso a grade
   cai para numeros que fecham a linha sem deixar celula vazia. */
.atalhos-hub--sete { grid-template-columns: repeat(7, minmax(0, 1fr)); }

@media (max-width: 1279px) {
  .atalhos-hub--sete { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .atalhos-hub--sete > li:nth-child(5) { grid-column: 1 / 3; }
  .atalhos-hub--sete > li:nth-child(6) { grid-column: 3 / 5; }
  .atalhos-hub--sete > li:nth-child(7) { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .atalhos-hub--sete,
  .atalhos-hub--sete > li:nth-child(n) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atalhos-hub--sete > li:nth-child(5),
  .atalhos-hub--sete > li:nth-child(6) { grid-column: auto; }
  .atalhos-hub--sete > li:nth-child(7) { grid-column: 1 / -1; }
}

@media (max-width: 479px) {
  .atalhos-hub--sete { grid-template-columns: 1fr; }
  .atalhos-hub--sete > li:nth-child(n) { grid-column: auto; }
}

/* Endereco, horario e cidades, em tres colunas de mesma altura */
.grade-contato {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e6);
  margin-top: var(--e12);
}

.bloco-contato {
  display: flex;
  flex-direction: column;
  padding: var(--e8);
  border: 1px solid var(--filete);
  background-color: var(--sup-papel-puro);
}

.bloco-contato h3 {
  font-size: var(--ts-xl);
  margin-bottom: var(--e5);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--filete);
}

.bloco-contato address {
  font-style: normal;
  font-size: var(--ts-md);
  line-height: 1.75;
  color: var(--txt-forte);
}

.bloco-contato-nota {
  margin-top: var(--e5);
  font-size: var(--ts-sm);
  line-height: 1.6;
  color: var(--txt-suave);
}

.bloco-contato .nucleo-saida { margin-top: auto; }

.lista-horario { margin: 0; display: grid; gap: var(--e3); }

.lista-horario > div {
  display: flex;
  justify-content: space-between;
  gap: var(--e4);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--filete);
}

.lista-horario dt { font-size: var(--ts-sm); color: var(--txt-suave); }

.lista-horario dd {
  margin: 0;
  font-size: var(--ts-sm);
  font-weight: 500;
  color: var(--txt-forte);
  text-align: right;
}

.lista-cidades {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e3);
}

.lista-cidades li {
  position: relative;
  padding-left: var(--e6);
  font-size: var(--ts-md);
  color: var(--txt-forte);
}

.lista-cidades li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  background-color: var(--acento);
}

/* Atalhos para a duvida que ja tem resposta em outra pagina */
.lista-atalho-duvida {
  margin: var(--e12) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e6);
}

.lista-atalho-duvida li {
  padding: var(--e6);
  background-color: var(--sup-suave);
}

.atalho-pergunta {
  font-size: var(--ts-md);
  font-weight: 500;
  line-height: var(--al-titulo);
  color: var(--txt-forte);
  margin-bottom: var(--e3);
}

.atalho-resposta { font-size: var(--ts-sm); }

@media (max-width: 899px) {
  .grade-contato { grid-template-columns: 1fr; }
  .lista-atalho-duvida { grid-template-columns: 1fr; }
  .bloco-contato { padding: var(--e6); }
}

/* O cartao de atalho usa fundo bege, onde a marca vermelha padrao fica em
   4,44:1, abaixo do minimo AA para texto de 14px. O vermelho escurecido
   sobe para 4,98:1 sobre o mesmo fundo. */
.lista-atalho-duvida .link-no-texto { color: #a81f27; }
.lista-atalho-duvida .link-no-texto:hover { color: var(--txt-forte); }

/* Tres cartoes em duas colunas deixariam uma celula vazia na segunda
   linha. Com tres colunas a linha fecha cheia. */
.grade-nucleos--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1023px) {
  .grade-nucleos--tres { grid-template-columns: 1fr; }
}

/* ============================ 13. DOCUMENTOS LEGAIS, OBRIGADO E 404 */

/* ---------------------------------------------- ficha do documento legal */

.ficha-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4) var(--e10);
  margin: var(--e10) 0 0;
  padding-top: var(--e6);
  border-top: 1px solid var(--filete);
}

.ficha-legal > div { display: grid; gap: var(--e1); }

.ficha-legal dt {
  font-size: var(--ts-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-suave);
}

.ficha-legal dd {
  margin: 0;
  font-size: var(--ts-sm);
  font-weight: 500;
  color: var(--txt-forte);
}

/* Dado que ainda nao existe fica visivel como pendencia, e nao inventado.
   Quem revisar o documento enxerga na hora o que falta preencher. */
.a-preencher {
  display: inline-block;
  padding: 2px var(--e2);
  background-color: var(--acento-suave);
  color: #a81f27;
  font-size: var(--ts-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* --------------------------------------------- grade do documento legal */

.legal-grade {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
  padding-block: clamp(2.5rem, 5vw, 5rem) clamp(3rem, 6vw, 6rem);
}

.legal-lateral {
  align-self: stretch;
  display: grid;
  align-content: start;
  gap: var(--e5);
}

/* O sumario acompanha a leitura: documento longo sem sumario fixo obriga
   a pessoa a rolar de volta ao topo toda vez. */
.legal-lateral > .artigo-indice {
  position: sticky;
  top: 104px;
  max-height: calc(100vh - 124px);
  overflow-y: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.legal-corpo { max-width: 74ch; }

.legal-corpo > section { margin-bottom: var(--e20); }
.legal-corpo > section:last-child { margin-bottom: 0; }

.legal-corpo h2 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: var(--al-titulo);
  letter-spacing: var(--ee-titulo);
  margin-bottom: var(--e5);
  padding-bottom: var(--e4);
  border-bottom: 2px solid var(--acento);
  scroll-margin-top: 104px;
}

.legal-corpo h3 {
  font-size: var(--ts-lg);
  line-height: var(--al-titulo);
  margin: var(--e10) 0 var(--e3);
  scroll-margin-top: 104px;
}

.legal-corpo p {
  margin-bottom: var(--e5);
  font-size: var(--ts-md);
  line-height: 1.7;
  color: var(--txt-suave);
}

.legal-corpo p strong { color: var(--txt-forte); font-weight: 500; }

.legal-corpo a:not(.botao) {
  color: #a81f27;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.legal-corpo .tabela-artigo { font-size: var(--ts-sm); }

@media (max-width: 1023px) {
  .legal-grade { grid-template-columns: minmax(0, 1fr); }
  .legal-lateral > .artigo-indice {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .legal-lateral .artigo-indice ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .legal-lateral .artigo-indice ol { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- pagina de obrigado */

.capa-obrigado {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  background-color: var(--sup-papel);
  text-align: center;
}

.selo-confirmado {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e5);
  margin-bottom: var(--e6);
  background-color: var(--acento-suave);
  color: #a81f27;
  font-size: var(--ts-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.capa-obrigado h1 {
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  line-height: var(--al-justa);
  letter-spacing: var(--ee-display);
  max-width: 20ch;
  margin-inline: auto;
}

.obrigado-apoio {
  margin: var(--e6) auto 0;
  max-width: 60ch;
  font-size: var(--ts-lg);
  line-height: 1.6;
  color: var(--txt-suave);
}

.obrigado-apoio strong { color: var(--txt-forte); font-weight: 500; }

.obrigado-ficha {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e6);
  margin: var(--e10) auto 0;
  max-width: 56rem;
  padding: var(--e6) 0;
  border-block: 1px solid var(--filete);
}

.obrigado-ficha > div { display: grid; gap: var(--e1); }

.obrigado-ficha dt {
  font-size: var(--ts-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-suave);
}

.obrigado-ficha dd {
  margin: 0;
  font-size: var(--ts-sm);
  font-weight: 500;
  color: var(--txt-forte);
}

.capa-obrigado .grupo-botoes {
  justify-content: center;
  margin-top: var(--e10);
}

.obrigado-nota {
  margin: var(--e6) auto 0;
  max-width: 52ch;
  font-size: var(--ts-sm);
  line-height: 1.6;
  color: var(--txt-suave);
}

/* ----------------------------------------------------- as tres etapas */

.grade-etapas-obrigado {
  margin: var(--e12) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e6);
}

.etapa-obrigado {
  display: flex;
  flex-direction: column;
  padding: var(--e8);
  background-color: var(--sup-papel-puro);
  border-top: 3px solid var(--acento);
}

.etapa-numero {
  font-family: var(--fonte-display);
  font-size: var(--ts-h4);
  font-weight: 500;
  color: var(--acento-texto);
  margin-bottom: var(--e3);
}

.etapa-obrigado h3 {
  font-size: var(--ts-lg);
  line-height: var(--al-titulo);
  margin-bottom: var(--e3);
}

.etapa-prazo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e5);
  font-size: var(--ts-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #565a60;
}

.etapa-prazo .icone { color: var(--acento-texto); }

.etapa-obrigado > p {
  font-size: var(--ts-sm);
  line-height: 1.65;
  color: var(--txt-suave);
  margin-bottom: var(--e4);
}

/* Fecha o cartao em prosa, alinhado na base para as tres alturas baterem */
.etapa-seu-papel {
  margin-top: auto;
  margin-bottom: 0 !important;
  padding-top: var(--e5);
  border-top: 1px solid var(--filete);
}

.etapa-seu-papel strong { color: var(--txt-forte); font-weight: 500; }

/* ------------------------------------------ serviços e leituras no fim */

.duas-colunas-obrigado {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e6);
  margin-top: var(--e12);
}

.bloco-obrigado {
  display: flex;
  flex-direction: column;
  padding: var(--e8);
  border: 1px solid var(--filete);
  background-color: var(--sup-papel-puro);
}

.bloco-obrigado h3 {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-size: var(--ts-xl);
  margin-bottom: var(--e6);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--filete);
}

.bloco-obrigado h3 .icone { color: var(--acento-texto); }

.lista-atalho-obrigado {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e5);
}

.lista-atalho-obrigado li { display: grid; gap: 3px; }

.lista-atalho-obrigado a {
  font-size: var(--ts-md);
  font-weight: 500;
  color: var(--acento-texto);
  line-height: var(--al-titulo);
}
.lista-atalho-obrigado a:hover { color: var(--txt-forte); }

.lista-atalho-obrigado span {
  font-size: var(--ts-sm);
  line-height: 1.5;
  color: var(--txt-suave);
}

.bloco-obrigado-saida {
  margin: auto 0 0;
  padding-top: var(--e6);
  font-size: var(--ts-sm);
}

.bloco-obrigado-saida a {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-weight: 500;
  color: #a81f27;
}
.bloco-obrigado-saida a:hover { color: var(--txt-forte); }

/* --------------------------------------------------------- pagina 404 */

.capa-404 {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  background-color: var(--sup-papel);
  text-align: center;
}

.codigo-404 {
  font-family: var(--fonte-display);
  font-size: clamp(5rem, 16vw, 11rem);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: var(--ee-display);
  /* O numero e decorativo, mas precisa ser visto. Em var(--acento-suave)
     dava 1,04:1 sobre o papel, ou seja, quase invisivel. Este cinza quente
     atinge 3,34:1, acima do minimo de 3:1 para texto grande, sem competir
     com o titulo. */
  color: #82858a;
  margin-bottom: var(--e4);
}

.capa-404 h1 {
  font-size: clamp(1.875rem, 3.8vw, 3.25rem);
  line-height: var(--al-justa);
  letter-spacing: var(--ee-display);
  max-width: 22ch;
  margin-inline: auto;
}

.apoio-404 {
  margin: var(--e6) auto 0;
  max-width: 62ch;
  font-size: var(--ts-md);
  line-height: 1.65;
  color: var(--txt-suave);
}

.capa-404 .grupo-botoes {
  justify-content: center;
  margin-top: var(--e10);
}

.capa-404 .sobrancelha,
#mapa .sobrancelha {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
}

/* ------------------------------------------------------- telas menores */

@media (max-width: 1023px) {
  .obrigado-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-etapas-obrigado { grid-template-columns: 1fr; }
  .duas-colunas-obrigado { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
  .obrigado-ficha { grid-template-columns: 1fr; text-align: left; }
  .etapa-obrigado,
  .bloco-obrigado { padding: var(--e6); }
}

/* Fecho em prosa do cartao lateral: nenhum bloco termina em lista. */
.lateral-fecho {
  margin: var(--e5) 0 0;
  padding-top: var(--e5);
  border-top: 1px solid var(--filete);
  font-size: var(--ts-xs);
  line-height: 1.55;
  color: #565a60;
}

/* A etiqueta de categoria do artigo e do blog vira link para a categoria. */
.artigo-categoria a,
.destaque-etiqueta a { color: inherit; text-decoration: none; }
.artigo-categoria a:hover,
.destaque-etiqueta a:hover { text-decoration: underline; text-underline-offset: 3px; }


/* ====================================================================
   BLOCO 6 de 8: pagina-home.css
   ==================================================================== */

/* =========================================================================
   Marileide Oliveira Arquitetura e Interiores
   Refinamento visual da home — Parte 1.

   Carrega por ultimo, depois de estilo.css e dos demais blocos, para poder
   ajustar sem alterar o sistema compartilhado. Tudo aqui esta preso ao
   escopo .pagina-home: nenhuma outra pagina e afetada enquanto o padrao nao
   for aprovado e promovido.

   So camada visual. Nenhuma mudanca de conteudo, ordem, estrutura ou copy.
   Usa apenas tokens ja existentes, para manter a consistencia do sistema.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Profundidade discreta e parificacao de interacao nos cartoes.

   O resto da home ja responde ao ponteiro; os cartoes de planta ("projetos
   prontos") eram os unicos planos e sem retorno. Ganham uma sombra-fantasma
   em repouso, sutil, e uma elevacao no hover, no mesmo idioma editorial.
   A grade de cidades, um bloco solto sobre o papel, ganha a mesma sombra
   leve para assentar na composicao.

   Os cartoes de depoimento ficam de fora de proposito: vivem num carrossel
   com recorte e mascara laterais, onde qualquer sombra seria cortada.
   ------------------------------------------------------------------------- */

.pagina-home .planta {
  box-shadow:
    0 2px 4px -2px rgba(41, 44, 48, 0.05),
    0 18px 40px -30px rgba(41, 44, 48, 0.28);
  transition:
    transform var(--t-normal) var(--curva),
    border-color var(--t-normal) var(--curva),
    box-shadow var(--t-normal) var(--curva);
}

.pagina-home .planta:hover,
.pagina-home .planta:focus-within {
  transform: translateY(-4px);
  border-color: var(--txt-suave);
  box-shadow:
    0 4px 8px -4px rgba(41, 44, 48, 0.08),
    0 26px 56px -34px rgba(41, 44, 48, 0.5);
}

.pagina-home .grade-cidades {
  box-shadow:
    0 2px 4px -2px rgba(41, 44, 48, 0.04),
    0 20px 46px -34px rgba(41, 44, 48, 0.26);
}

/* -------------------------------------------------------------------------
   2. Hierarquia mais forte nos cabecalhos de secao.

   A sobrancelha ganha mais peso e trilha para ler como rotulo, e afasta-se
   um pouco do titulo. O titulo de secao cresce um degrau para ter mais
   presenca, sem alcancar o tamanho da capa. O texto de apoio fica mais
   confortavel de ler, mantendo a cor secundaria que o deixa em segundo plano.
   ------------------------------------------------------------------------- */

.pagina-home .sobrancelha {
  font-weight: 600;
  letter-spacing: 0.14em;
  margin-bottom: var(--e6);
}

.pagina-home .cabecalho-secao h2 {
  font-size: clamp(2.125rem, 5.4vw, 4.75rem);
}

.pagina-home .cabecalho-secao .medida-curta {
  font-size: var(--ts-lg);
  line-height: 1.65;
}

/* -------------------------------------------------------------------------
   3. Respiro maior entre as secoes.

   Ritmo vertical mais generoso no desktop, mantendo o mobile enxuto.
   ------------------------------------------------------------------------- */

.pagina-home .secao {
  padding-block: clamp(4.5rem, 10vw, 12rem);
}

/* -------------------------------------------------------------------------
   4. Destaque para a prova social (faixa de metricas).

   Um filete de acento no topo de cada metrica chama o olho para os numeros,
   que crescem um degrau. O filete e decorativo; os numeros seguem em texto
   forte, com contraste de sobra sobre o papel.
   ------------------------------------------------------------------------- */

.pagina-home .metrica {
  border-top: 2px solid var(--acento);
  padding-top: var(--e6);
}

.pagina-home .metrica dd {
  font-size: clamp(3.25rem, 7.5vw, 7rem);
}

/* Sem movimento para quem pediu menos animacao no sistema. */
@media (prefers-reduced-motion: reduce) {
  .pagina-home .planta:hover,
  .pagina-home .planta:focus-within {
    transform: none;
  }
}

/* =========================================================================
   PARTE 2 — direcao de arte premium (home).

   Mesma linha editorial arquitetonica: geometria reta, luz e profundidade
   controladas, o vermelho como acento com funcao. Sem novas cores, sem
   arredondar cantos, sem tocar em texto. So atmosfera, camada e acabamento.
   ========================================================================= */

/* -------------------------------------------------------------------------
   P2.1 Hero mais cinematografico.

   O veu passa de um degrade vertical simples para uma composicao com
   vinheta: o canto superior direito abre para a imagem respirar, o rodape
   fecha em grafite quase solido para o texto ganhar contraste e drama.
   O titulo recebe uma sombra mais profunda, de leitura premium sobre foto.
   ------------------------------------------------------------------------- */

.pagina-home .capa-veu {
  background:
    linear-gradient(
      180deg,
      rgba(41, 44, 48, 0.55) 0%,
      rgba(41, 44, 48, 0.30) 38%,
      rgba(41, 44, 48, 0.62) 72%,
      rgba(41, 44, 48, 0.94) 100%
    ),
    radial-gradient(
      130% 105% at 78% 18%,
      rgba(41, 44, 48, 0) 0%,
      rgba(41, 44, 48, 0.30) 58%,
      rgba(41, 44, 48, 0.62) 100%
    );
}

.pagina-home .capa h1 {
  font-size: clamp(2.5rem, 6.8vw, 6.5rem);
  text-shadow:
    0 1px 3px rgba(41, 44, 48, 0.45),
    0 2px 40px rgba(41, 44, 48, 0.5);
}

/* -------------------------------------------------------------------------
   P2.2 Chamada final com profundidade.

   O overlay chapado vira uma vinheta: mais luz no centro-alto, fechando nas
   bordas, para o bloco de texto ganhar foco sem perder contraste.
   ------------------------------------------------------------------------- */

.pagina-home .chamada-final::before {
  background:
    radial-gradient(
      120% 120% at 50% 28%,
      rgba(41, 44, 48, 0.70) 0%,
      rgba(41, 44, 48, 0.90) 100%
    ),
    linear-gradient(
      180deg,
      rgba(41, 44, 48, 0.42) 0%,
      rgba(41, 44, 48, 0.62) 100%
    );
}

/* -------------------------------------------------------------------------
   P2.3 Atmosfera nas secoes escuras.

   Uma luz difusa no topo da secao da profundidade ao grafite, sem apagar a
   trama de pontos existente, que fica combinada na mesma camada de fundo.
   Efeito sutil: nao altera o contraste do texto claro sobre o escuro.
   ------------------------------------------------------------------------- */

.pagina-home .secao-escura {
  background-image:
    radial-gradient(90% 70% at 50% -12%, rgba(245, 243, 239, 0.05), transparent 62%);
}

.pagina-home .trama-pontos {
  background-image:
    radial-gradient(90% 70% at 50% -12%, rgba(245, 243, 239, 0.05), transparent 62%),
    radial-gradient(circle, rgba(245, 243, 239, 0.09) 1px, transparent 1px);
  background-size: auto, 20px 20px;
  background-position: center top, 0 0;
}

/* -------------------------------------------------------------------------
   P2.4 Botao principal com volume.

   Uma sombra discreta com o tom do proprio acento da a sensacao de peso e
   desejo ao CTA, sem arredondar nem mudar a cor. O hover aprofunda.
   ------------------------------------------------------------------------- */

.pagina-home .botao-principal {
  box-shadow:
    0 1px 2px rgba(41, 44, 48, 0.14),
    0 14px 28px -18px rgba(217, 45, 53, 0.55);
  transition:
    background-color var(--t-rapido) var(--curva),
    border-color var(--t-rapido) var(--curva),
    box-shadow var(--t-normal) var(--curva),
    transform var(--t-rapido) var(--curva);
}

.pagina-home .botao-principal:hover {
  box-shadow:
    0 2px 4px rgba(41, 44, 48, 0.18),
    0 18px 34px -16px rgba(181, 34, 43, 0.6);
}

/* -------------------------------------------------------------------------
   P2.5 Profundidade nas imagens de projeto.

   Sobre o fundo escuro, uma sombra profunda separa as fotos do fundo e da
   materia a grade, integrando a imagem a direcao visual.
   ------------------------------------------------------------------------- */

.pagina-home .projeto-midia {
  box-shadow: 0 30px 60px -38px rgba(0, 0, 0, 0.7);
}

/* =========================================================================
   PARTE 3 — polimento final e QA.

   Revisao de responsividade e acabamento. Os ajustes de escala das Partes 1 e
   2 subiram os minimos de tipografia; no celular, com titulos que sao frases
   longas, os minimos foram reduzidos para leitura confortavel, preservando o
   impacto no desktop (o maximo do clamp nao muda). Demais aspectos revisados
   por medicao em 390, 768, 1024 e 1440 px: sem rolagem horizontal, grids
   colapsando corretamente (4 para 2 para 1 coluna), areas de toque acima de
   44 px e contraste preservado. Nenhuma alteracao adicional foi necessaria,
   para nao poluir a direcao ja refinada.
   ========================================================================= */


/* ====================================================================
   BLOCO 7 de 8: refino-servico.css
   ==================================================================== */

/* =========================================================================
   Marileide Oliveira Arquitetura e Interiores
   Refinamento visual das paginas de servico.

   Carrega por ultimo. Escopo restrito a `.pagina-servico.refino-servico`, que
   por enquanto so a pagina de Projeto arquitetonico residencial carrega. As
   outras paginas de servico so recebem o gancho `refino-servico` quando o
   padrao for aprovado e replicado, para nada mudar antes da validacao.

   Mesma direcao aprovada na home (editorial arquitetonico premium), adaptada
   aos componentes da pagina de servico. So camada visual. Nenhuma mudanca de
   conteudo, ordem, estrutura ou copy. Usa apenas tokens ja existentes.
   ========================================================================= */

/* =========================================================================
   PARTE 1 — base visual.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Profundidade e interacao nos cartoes.

   Os cartoes de preco e os de qualificacao eram planos e sem retorno ao
   ponteiro. Ganham uma sombra-fantasma em repouso e uma elevacao discreta no
   hover, no mesmo idioma editorial e plano do restante do site. O cartao de
   preco em realce sobe um pouco mais, reforcando a opcao recomendada.
   ------------------------------------------------------------------------- */

.pagina-servico.refino-servico .cartao-preco,
.pagina-servico.refino-servico .qualificacao {
  box-shadow:
    0 2px 4px -2px rgba(41, 44, 48, 0.05),
    0 18px 40px -30px rgba(41, 44, 48, 0.26);
  transition:
    transform var(--t-normal) var(--curva),
    border-color var(--t-normal) var(--curva),
    box-shadow var(--t-normal) var(--curva);
}

.pagina-servico.refino-servico .cartao-preco:hover,
.pagina-servico.refino-servico .cartao-preco:focus-within,
.pagina-servico.refino-servico .qualificacao:hover,
.pagina-servico.refino-servico .qualificacao:focus-within {
  transform: translateY(-4px);
  box-shadow:
    0 4px 8px -4px rgba(41, 44, 48, 0.08),
    0 26px 56px -34px rgba(41, 44, 48, 0.5);
}

.pagina-servico.refino-servico .cartao-preco--realce:hover,
.pagina-servico.refino-servico .cartao-preco--realce:focus-within {
  transform: translateY(-6px);
}

/* -------------------------------------------------------------------------
   2. Hierarquia mais forte nos cabecalhos de secao.

   Mesmos valores da home: sobrancelha com mais peso e trilha, titulo de secao
   um degrau maior (com minimo mobile confortavel), texto de apoio mais
   comodo mantendo a cor secundaria.
   ------------------------------------------------------------------------- */

.pagina-servico.refino-servico .sobrancelha {
  font-weight: 600;
  letter-spacing: 0.14em;
  margin-bottom: var(--e6);
}

.pagina-servico.refino-servico .cabecalho-secao h2 {
  font-size: clamp(2.125rem, 5.4vw, 4.75rem);
}

.pagina-servico.refino-servico .cabecalho-secao .medida-curta {
  font-size: var(--ts-lg);
  line-height: 1.65;
}

/* -------------------------------------------------------------------------
   3. Respiro maior entre as secoes (desktop generoso, mobile enxuto).
   ------------------------------------------------------------------------- */

.pagina-servico.refino-servico .secao {
  padding-block: clamp(4.5rem, 10vw, 12rem);
}

/* -------------------------------------------------------------------------
   4. Destaque para a prova social (faixa de metricas escura).

   A faixa ja traz um filete de acento no topo (.faixa-risco). Aqui so os
   numeros crescem um degrau para ganhar presenca. O numero ja usa o vermelho
   claro que passa no contraste sobre o grafite; nada de cor nova.
   ------------------------------------------------------------------------- */

.pagina-servico.refino-servico .faixa-numero {
  font-size: clamp(2rem, 3.4vw, 3.25rem);
}

/* Sem movimento para quem pediu menos animacao no sistema. */
@media (prefers-reduced-motion: reduce) {
  .pagina-servico.refino-servico .cartao-preco:hover,
  .pagina-servico.refino-servico .cartao-preco:focus-within,
  .pagina-servico.refino-servico .cartao-preco--realce:hover,
  .pagina-servico.refino-servico .qualificacao:hover,
  .pagina-servico.refino-servico .qualificacao:focus-within {
    transform: none;
  }
}

/* =========================================================================
   PARTE 2 — direcao de arte premium (servico residencial).

   Mesma linha editorial arquitetonica aprovada na home, adaptada aos
   componentes da pagina de servico. Sem novas cores, sem arredondar cantos,
   sem tocar em texto. So atmosfera, camada e acabamento.
   ========================================================================= */

/* -------------------------------------------------------------------------
   P2.1 Hero interno mais cinematografico.

   O veu ganha vinheta em duas camadas: abre a imagem no alto e fecha em
   grafite quase solido na base, onde o texto se apoia. O titulo recebe uma
   sombra de leitura premium sobre a foto.
   ------------------------------------------------------------------------- */

.pagina-servico.refino-servico .capa-veu {
  background:
    linear-gradient(
      180deg,
      rgba(41, 44, 48, 0.58) 0%,
      rgba(41, 44, 48, 0.34) 36%,
      rgba(41, 44, 48, 0.64) 70%,
      rgba(41, 44, 48, 0.94) 100%
    ),
    radial-gradient(
      130% 108% at 78% 16%,
      rgba(41, 44, 48, 0) 0%,
      rgba(41, 44, 48, 0.30) 58%,
      rgba(41, 44, 48, 0.62) 100%
    );
}

.pagina-servico.refino-servico .capa h1 {
  text-shadow:
    0 1px 3px rgba(41, 44, 48, 0.45),
    0 2px 40px rgba(41, 44, 48, 0.5);
}

/* -------------------------------------------------------------------------
   P2.2 Atmosfera nas secoes escuras.

   Luz difusa no topo do grafite, sem apagar a trama de pontos, que fica
   combinada na mesma camada de fundo. Cobre etapas, prova e a chamada final.
   Efeito sutil, sem alterar o contraste do texto claro.
   ------------------------------------------------------------------------- */

.pagina-servico.refino-servico .secao-escura {
  background-image:
    radial-gradient(90% 70% at 50% -12%, rgba(245, 243, 239, 0.05), transparent 62%);
}

.pagina-servico.refino-servico .trama-pontos {
  background-image:
    radial-gradient(90% 70% at 50% -12%, rgba(245, 243, 239, 0.05), transparent 62%),
    radial-gradient(circle, rgba(245, 243, 239, 0.09) 1px, transparent 1px);
  background-size: auto, 20px 20px;
  background-position: center top, 0 0;
}

/* -------------------------------------------------------------------------
   P2.3 Botao principal com volume.

   Sombra discreta com o tom do proprio acento, para dar peso e desejo ao CTA,
   sem arredondar nem mudar a cor. O hover aprofunda.
   ------------------------------------------------------------------------- */

.pagina-servico.refino-servico .botao-principal {
  box-shadow:
    0 1px 2px rgba(41, 44, 48, 0.14),
    0 14px 28px -18px rgba(217, 45, 53, 0.55);
  transition:
    background-color var(--t-rapido) var(--curva),
    border-color var(--t-rapido) var(--curva),
    box-shadow var(--t-normal) var(--curva),
    transform var(--t-rapido) var(--curva);
}

.pagina-servico.refino-servico .botao-principal:hover {
  box-shadow:
    0 2px 4px rgba(41, 44, 48, 0.18),
    0 18px 34px -16px rgba(181, 34, 43, 0.6);
}

/* -------------------------------------------------------------------------
   P2.4 Profundidade nas imagens de referencia (secao escura de prova).
   ------------------------------------------------------------------------- */

.pagina-servico.refino-servico .projeto-midia {
  box-shadow: 0 30px 60px -38px rgba(0, 0, 0, 0.7);
}


/* ====================================================================
   BLOCO 8 de 8: refino-global.css
   ==================================================================== */

/* =========================================================================
   Marileide Oliveira Arquitetura e Interiores
   Refinamento visual global — mesma direcao editorial premium aprovada na
   home e nas paginas de servico, aplicada a seletores base para alcancar as
   demais paginas (sobre, blog, categorias, artigo, FAQ, contato, legais,
   obrigado, 404).

   Carrega por ultimo. Home e paginas de servico ja trazem estas regras em
   blocos escopados (`.pagina-home ...`, `.pagina-servico.refino-servico ...`),
   de maior especificidade e valores identicos, entao nada muda nelas: aqui
   so estendemos o mesmo tratamento ao resto do site.

   So camada visual. Nenhuma mudanca de conteudo, ordem, estrutura ou copy.
   Usa apenas tokens ja existentes.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Hierarquia dos cabecalhos de secao.
   ------------------------------------------------------------------------- */

.sobrancelha {
  font-weight: 600;
  letter-spacing: 0.14em;
  margin-bottom: var(--e6);
}

.cabecalho-secao h2 {
  font-size: clamp(2.125rem, 5.4vw, 4.75rem);
}

.cabecalho-secao .medida-curta {
  font-size: var(--ts-lg);
  line-height: 1.65;
}

/* -------------------------------------------------------------------------
   2. Respiro entre secoes (desktop generoso, mobile enxuto).
   ------------------------------------------------------------------------- */

.secao {
  padding-block: clamp(4.5rem, 10vw, 12rem);
}

/* -------------------------------------------------------------------------
   3. Atmosfera nas secoes escuras (luz difusa no topo, trama de pontos
   preservada). Efeito sutil, sem alterar o contraste do texto claro.
   ------------------------------------------------------------------------- */

.secao-escura {
  background-image:
    radial-gradient(90% 70% at 50% -12%, rgba(245, 243, 239, 0.05), transparent 62%);
}

.trama-pontos {
  background-image:
    radial-gradient(90% 70% at 50% -12%, rgba(245, 243, 239, 0.05), transparent 62%),
    radial-gradient(circle, rgba(245, 243, 239, 0.09) 1px, transparent 1px);
  background-size: auto, 20px 20px;
  background-position: center top, 0 0;
}

/* -------------------------------------------------------------------------
   4. Hero cinematografico, onde houver capa com imagem (paginas com .capa;
   as demais usam capa-hub, sem imagem, e nao sao afetadas).
   ------------------------------------------------------------------------- */

.capa-veu {
  background:
    linear-gradient(
      180deg,
      rgba(41, 44, 48, 0.58) 0%,
      rgba(41, 44, 48, 0.34) 36%,
      rgba(41, 44, 48, 0.64) 70%,
      rgba(41, 44, 48, 0.94) 100%
    ),
    radial-gradient(
      130% 108% at 78% 16%,
      rgba(41, 44, 48, 0) 0%,
      rgba(41, 44, 48, 0.30) 58%,
      rgba(41, 44, 48, 0.62) 100%
    );
}

.capa h1 {
  text-shadow:
    0 1px 3px rgba(41, 44, 48, 0.45),
    0 2px 40px rgba(41, 44, 48, 0.5);
}

/* -------------------------------------------------------------------------
   5. Botao principal com volume (sombra do tom do acento; hover aprofunda).
   ------------------------------------------------------------------------- */

.botao-principal {
  box-shadow:
    0 1px 2px rgba(41, 44, 48, 0.14),
    0 14px 28px -18px rgba(217, 45, 53, 0.55);
  transition:
    background-color var(--t-rapido) var(--curva),
    border-color var(--t-rapido) var(--curva),
    box-shadow var(--t-normal) var(--curva),
    transform var(--t-rapido) var(--curva);
}

.botao-principal:hover {
  box-shadow:
    0 2px 4px rgba(41, 44, 48, 0.18),
    0 18px 34px -16px rgba(181, 34, 43, 0.6);
}

/* -------------------------------------------------------------------------
   6. Profundidade e interacao nos cartoes de conteudo das demais paginas.
   Os nucleos (hub: blog, categorias, FAQ, 404) e os cartoes de expansao
   (categorias do blog) eram planos e sem retorno ao ponteiro. Os cartoes
   laterais escuros do artigo e das paginas legais ganham uma sombra em
   repouso para assentar sobre o papel. Os relatos seguem planos, como no
   resto do site.
   ------------------------------------------------------------------------- */

.nucleo,
.expansao-cartao {
  box-shadow:
    0 2px 4px -2px rgba(41, 44, 48, 0.05),
    0 18px 40px -30px rgba(41, 44, 48, 0.26);
  transition:
    transform var(--t-normal) var(--curva),
    border-color var(--t-normal) var(--curva),
    box-shadow var(--t-normal) var(--curva);
}

.nucleo:hover,
.nucleo:focus-within,
.expansao-cartao:hover,
.expansao-cartao:focus-within {
  transform: translateY(-4px);
  border-color: var(--txt-suave);
  box-shadow:
    0 4px 8px -4px rgba(41, 44, 48, 0.08),
    0 26px 56px -34px rgba(41, 44, 48, 0.5);
}

.cartao-lateral {
  box-shadow: 0 20px 46px -34px rgba(41, 44, 48, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .nucleo:hover,
  .nucleo:focus-within,
  .expansao-cartao:hover,
  .expansao-cartao:focus-within {
    transform: none;
  }
}