/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 * Hallmark · macrostructure: Manifesto · tone: playful-declarativo · anchor hue: laranja 40°
 * theme: studied-DNA (source: image — carrossel v4 do designer, marca/carrossel-v4-2026-08-11/)
 * paper: creme #F9F3EC (L 96%) alternando com painel inundado · accent: laranja #FF8600, pegada de inundação
 * display: sans geométrico arredondado pesado (Baloo 2) · body: sans geométrico suave (Nunito)
 * studied: yes · DNA-source: image (material do próprio cliente, produzido pelo designer dele)
 * nav: herdada do site (não faz parte do escopo do piloto) · footer: Ft3 herdado
 *
 * Camada v4 (2026-08-12). Carrega DEPOIS de catalogo.css e SÓ nas páginas com
 * "v4": true no conteudo-paginas.json. Nada aqui altera página que não opta.
 * Rollback = tirar a chave do JSON e regerar.
 *
 * ⚠️ Regra dura de cor, MEDIDA e não estimada: o carrossel usa texto creme sobre
 * verde #00986E (3,33:1) e sobre teal #45ADA8 (2,44:1). Passa no slide porque lá
 * o tipo é gigante, e acima de 24px o mínimo cai pra 3:1. Numa página de 700
 * palavras em corpo de 17px, reprova. Por isso o verde de painel aqui é
 * #007F5F — mesmo matiz (164,7°), 19% mais escuro, 4,54:1 com creme — e o teal
 * e o laranja levam texto TINTA, nunca creme.
 */

:root {
  /* Cores derivadas para painel. Matiz preservado do v4; luminância corrigida. */
  --v4-verde:   #007E5E;   /* derivado de --verde #009D75, 20% mais escuro.
                              creme 4,60:1 · amarelo da ênfase 3,02:1 */
  /* ⚠️ Só existe tom secundário sobre painel CLARO. Medido: tinta a 72% sobre
     creme dá 6,15:1, passa. Mas creme a 82% sobre o verde de painel dá 3,56:1
     e reprova, então sobre painel inundado o texto é creme cheio (4,54:1).
     Rebaixar opacidade em cima de cor saturada é onde a acessibilidade quebra. */
  --v4-tinta-t: rgba(34, 32, 29, 0.72);   /* texto secundário, só sobre creme */

  /* Escala de tipo do v4: cinco tamanhos, razão ~1,3. O corpo sobe de 13px
     (o que estava no site, abaixo do piso de acessibilidade) para 17-19px. */
  --v4-display: clamp(2.5rem, 6.5vw, 4.25rem);
  --v4-titulo:  clamp(1.9rem, 4.2vw, 3rem);
  /* Registro corrente: um degrau real abaixo da declaração, não um "quase igual". */
  --v4-titulo-c: clamp(1.375rem, 2.2vw + 0.6rem, 1.9rem);
  /* ⚠️ O piso subiu de 1,0625rem. Ele era IDÊNTICO ao piso do corpo, então no
     celular rótulo e texto tinham o mesmo tamanho e a hierarquia dependia só do
     peso. Três tamanhos colados é hierarquia turva, não sutileza. */
  --v4-rotulo:  clamp(1.1875rem, 1vw + 0.9rem, 1.4rem);
  --v4-corpo:   clamp(1.0625rem, 0.4vw + 0.95rem, 1.1875rem);
  --v4-nota:    0.9375rem;

  /* Empilhamento nomeado, sem número solto. */
  --z-fundo:  0;
  --z-base:   1;
  --z-acima: 10;
}


/* ==========================================================================
   Painel — a unidade do v4. O fundo é o esqueleto, não o enfeite.
   ========================================================================== */
.painel {
  position: relative;
  overflow: hidden;
  padding: var(--sp-8) 0;
  border-bottom: var(--borda-grossa);
}
/* Ritmo desigual de propósito: o primeiro painel depois da hero respira mais,
   o último aperta antes da faixa de fechamento. */
.painel--alto  { padding: calc(var(--sp-8) * 1.35) 0; }
.painel--baixo { padding: var(--sp-7) 0; }

.painel--creme  { background: var(--creme); color: var(--tinta); }
.painel--verde  { background: var(--v4-verde); color: var(--creme); }
.painel--teal   { background: var(--teal); color: var(--tinta); }
.painel--laranja{ background: var(--laranja); color: var(--tinta); }
.painel--tinta  { background: var(--tinta); color: var(--creme); }

.painel__conteudo { position: relative; z-index: var(--z-base); max-width: 60ch; }
.painel--largo .painel__conteudo { max-width: none; }

/* Asset de marca sangrando pela borda. Escala grande, cortado, atrás do texto.
   Fora da árvore de acessibilidade e escondido de leitor de tela. */
.painel__marca {
  position: absolute;
  z-index: var(--z-fundo);
  pointer-events: none;
  line-height: 0;
}
.painel__marca svg { width: 100%; height: auto; }
.painel__marca--estrela { width: clamp(180px, 26vw, 380px); right: -7%;  top: -8%; }
.painel__marca--onda    { width: clamp(200px, 26vw, 400px); left: -14%;  bottom: -32%; }
.painel__marca--leque   { width: clamp(160px, 22vw, 320px); right: 4%;   bottom: -14%; }
.painel__marca--teal    { color: var(--teal); }
.painel__marca--amarelo { color: var(--amarelo); }
.painel__marca--verde   { color: var(--v4-verde); }
/* Sobre painel inundado o asset vira variação de luminância do próprio fundo,
   não uma segunda cor: duas cores saturadas brigando viram ruído. */
.painel--verde .painel__marca { color: rgba(249, 243, 236, 0.15); }
.painel--teal  .painel__marca { color: rgba(34, 32, 29, 0.13); }
.painel--laranja .painel__marca { color: rgba(34, 32, 29, 0.14); }

@media (max-width: 699px) {
  /* No celular o asset compete com o texto pelo mesmo espaço: encolhe e recua. */
  .painel__marca--estrela { width: 150px; right: -14%; top: -3%; }
  .painel__marca--onda,
  .painel__marca--leque   { display: none; }
}

/* ==========================================================================
   Título de duas cores — a assinatura do v4.
   A cor marca a ênfase semântica dentro da frase, não a linha.
   ========================================================================== */
.v4-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.04;
  font-size: var(--v4-titulo);
  max-width: 18ch;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}

/* ==========================================================================
   Três registros de cabeça de seção (2026-08-12)

   O problema que isso resolve: havia UMA forma de título, repetida cinco vezes
   por página em dezenove páginas. Tamanho igual, peso igual, caixa igual,
   ênfase de cor sempre. Quando toda seção é manchete, nenhuma é, e o site fica
   com aquele ritmo de lista que o Miguel apontou.

   O registro é escolhido por PAPEL, não por gosto:

   · declaração — a seção que carrega o argumento da página. UMA por página.
     Fica como está: grande, com a ênfase de duas cores.
   · corrente   — o padrão. Um degrau abaixo, sem ênfase de cor, com um traço
     curto de tinta antes. É a seção que informa, não a que convence.
   · quieta     — página jurídica e outras listas longas de seção. Vira rótulo
     em caixa alta espacejada, não manchete. `termos` tinha NOVE manchetes.
   ========================================================================== */
.v4-titulo--corrente {
  font-size: var(--v4-titulo-c);
  max-width: 26ch;
}
/* Traço curto no lugar da ênfase de cor: marca a cabeça sem gritar, e dá à
   corrente uma silhueta própria em vez de ser só "a declaração menor". */
.v4-titulo--corrente::before {
  content: "";
  display: block;
  width: 2.25rem; height: 5px;
  background: var(--laranja);
  border-radius: 2px;
  margin-bottom: var(--sp-3);
}
.painel--verde .v4-titulo--corrente::before,
.painel--tinta .v4-titulo--corrente::before { background: var(--amarelo); }
.painel--teal .v4-titulo--corrente::before,
.painel--laranja .v4-titulo--corrente::before { background: var(--tinta); }
/* Na corrente a ênfase de cor não entra: é o que a distingue da declaração. */
.v4-titulo--corrente em { color: inherit; }

.v4-titulo--quieta {
  font-size: var(--v4-rotulo);
  letter-spacing: 0.09em;   /* caixa alta pequena precisa abrir */
  max-width: 40ch;
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid currentColor;
}
.v4-titulo--quieta em { color: var(--laranja-texto); }
.v4-titulo em { font-style: normal; color: var(--laranja-display); }
.painel--verde .v4-titulo em,
.painel--tinta .v4-titulo em { color: var(--amarelo); }
/* ⚠️ Ênfase de cor no título só existe onde ela é legível. Medido: sobre teal,
   creme dá 2,37:1 e verde 1,92:1; sobre laranja, creme dá 2,2:1. Nesses dois
   painéis o título é de uma cor só, e não perde nada: o painel inteiro já é o
   acento. A ênfase de duas cores vive no creme (laranja) e no verde (amarelo). */
.painel--teal .v4-titulo em,
.painel--laranja .v4-titulo em { color: inherit; }
.painel--laranja .v4-titulo em { color: inherit; }
/* ⚠️ No painel laranja o título é de UMA cor só. Medido: creme sobre laranja dá
   2,2:1 e nem o limiar de texto grande (3:1) alcança; verde e amarelo sobre
   laranja são piores. O painel inteiro já é o acento, então a ênfase de cor ali
   seria redundante além de ilegível. A ênfase volta em qualquer outro painel. */

.v4-lede {
  font-size: var(--v4-corpo);
  line-height: 1.55;
  max-width: 58ch;
  margin-top: var(--sp-4);
}
.painel--creme .v4-lede { color: var(--v4-tinta-t); }
.painel--verde .v4-lede,
.painel--tinta .v4-lede { color: var(--creme); }

/* ==========================================================================
   Hero da página — declarativa, sem CTA centralizado e sem 100vh.
   ========================================================================== */
.v4-hero { padding: var(--sp-7) 0 var(--sp-8); }
.v4-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1.02;
  font-size: var(--v4-display);
  max-width: 15ch;
  overflow-wrap: anywhere;
  min-width: 0;
}
.v4-hero h1 em { font-style: normal; color: var(--laranja-display); }
.v4-hero .v4-lede { font-size: clamp(1.125rem, 0.6vw + 1rem, 1.3125rem); max-width: 52ch; }
/* Catálogo: o h1 é o nome da linha de produto e chega a 42 caracteres, contra os
   26 de "Playground para condomínio". Na medida de 15ch ele quebrava em 4 linhas,
   que é onde título grande vira drama em vez de peso. Um degrau abaixo, medida
   mais larga — a regra de dimensionar pelo comprimento da frase, não pelo slot. */
.v4-hero--catalogo h1 { font-size: var(--v4-titulo); max-width: 22ch; }
.v4-hero__acoes { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.v4-hero__acoes .btn { white-space: nowrap; }

/* Selo-pílula: fill chapado, sem contorno, como no v4. */
.v4-selos { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); list-style: none; }
.v4-selo {
  display: inline-flex; align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-weight: 700; font-size: 0.9375rem;
  background: var(--creme-2); color: var(--tinta);
}
.v4-selo--teal    { background: var(--teal);    color: var(--tinta); }
.v4-selo--amarelo { background: var(--amarelo); color: var(--tinta); }

/* ==========================================================================
   Lista empilhada — rótulo em cima, texto grande embaixo.
   Substitui a grade de duas colunas, que espremia o rótulo no celular.
   ========================================================================== */
.v4-lista { display: grid; gap: var(--sp-6); margin-top: var(--sp-7); list-style: none; }
.v4-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.v4-item__rotulo {
  font-family: var(--font-display);
  font-weight: 800; text-transform: uppercase;
  /* Caixa alta pede tracking POSITIVO: as capitais sentam perto demais no
     espacejamento padrão. Estava negativo, herdado do título display, onde a
     regra é a oposta. */
  letter-spacing: 0.015em; line-height: 1.18;
  font-size: var(--v4-rotulo);
  text-wrap: balance;
}
.v4-item__texto { font-size: var(--v4-corpo); line-height: 1.55; margin-top: var(--sp-2); max-width: 62ch; }
.painel--creme .v4-item__texto { color: var(--v4-tinta-t); }
.painel--verde .v4-item__texto,
.painel--tinta .v4-item__texto { color: var(--creme); }

/* Marcador 1 — faísca de 4 pontas (asset do designer). Painel inundado. */
.v4-marca-faisca { width: 42px; flex: none; color: var(--amarelo); line-height: 0; margin-top: -0.1em; }
.v4-marca-faisca svg { width: 100%; height: auto; }

/* Marcador 2 — numeral em disco. Amarelo com numeral tinta (9,7:1); o disco
   laranja com numeral creme daria 2,2:1 e por isso não existe aqui. */
.v4-marca-num {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--amarelo); color: var(--tinta);
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Cartão de contorno de tinta (v4-06) — um nível de contenção, nunca dois.
   ========================================================================== */
.v4-cartao {
  border: var(--borda); border-radius: var(--r-lg);
  padding: var(--sp-6);
  background: transparent;
  max-width: 74ch;   /* respira mais que a coluna de leitura, sem passar da medida */
}
@media (min-width: 720px) { .v4-cartao { padding: var(--sp-7); } }
.v4-cartao .v4-lista { margin-top: 0; gap: var(--sp-5); }
.v4-nota { font-size: var(--v4-nota); color: var(--v4-tinta-t); margin-top: var(--sp-5); }
.painel--teal .v4-nota, .painel--laranja .v4-nota { color: var(--tinta); }

/* ==========================================================================
   Foto com deslocamento sólido de cor atrás. Não é sombra.
   ========================================================================== */
.v4-foto { margin: 0; }
/* ⚠️ O deslocamento vive no QUADRO, não na figura. Ancorado na figura ele
   cobria a legenda, porque a figura inclui a legenda na sua altura. */
.v4-foto__quadro { position: relative; }
.v4-foto img {
  position: relative; z-index: var(--z-base);
  width: 100%;
  border-radius: var(--r-lg);
  border: var(--borda);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
/* ⚠️ Sem `height: 100%` aqui. Como figura é item de grade, o height esticava a
   imagem até a altura da linha e ela passava por cima da legenda. */
.v4-foto__quadro::after {
  content: ""; position: absolute; z-index: var(--z-fundo);
  inset: var(--sp-4) calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--teal);
}
.v4-foto__legenda {
  margin-top: calc(var(--sp-4) + var(--sp-3));  /* passa do deslocamento sólido */
  font-size: var(--v4-nota); color: var(--v4-tinta-t); max-width: 46ch;
}

/* Bloco de duas faixas: texto e foto. Alterna o lado a cada uso. */
.v4-duo { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 900px) {
  .v4-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); }
  .v4-duo--invertido > :first-child { order: 2; }
}

/* ==========================================================================
   Perguntas frequentes — mesma voz, tipo maior, sinal em laranja.
   ========================================================================== */
.v4-faq { max-width: 74ch; margin-top: var(--sp-6); }
.v4-faq__item { border-top: 2px solid currentColor; }
.v4-faq__item:last-child { border-bottom: 2px solid currentColor; }
.v4-faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--v4-rotulo); line-height: 1.2;
}
.v4-faq__item summary::-webkit-details-marker { display: none; }
.v4-faq__item summary::after {
  content: "+"; flex: none;
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1;
  color: var(--laranja-texto);
  transition: transform 120ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.v4-faq__item[open] summary::after { transform: rotate(45deg); }
.v4-faq__item summary:focus-visible { outline: 3px solid var(--laranja-texto); outline-offset: 3px; }
.v4-faq__resposta {
  padding: 0 0 var(--sp-5);
  font-size: var(--v4-corpo); line-height: 1.6; max-width: 66ch;
  color: var(--v4-tinta-t);
}
.v4-faq__resposta a { color: var(--laranja-texto); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.v4-item__texto a, .v4-lede a {
  color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--laranja-texto); text-decoration-thickness: 2px;
}

/* ==========================================================================
   Faixa de fechamento — laranja com texto TINTA.
   O padrão antigo (.comercial-band, creme sobre laranja) dá 2,2:1 e reprova.
   ========================================================================== */
.v4-fecho { padding: var(--sp-8) 0; }
.v4-fecho__inner { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 860px) {
  .v4-fecho__inner { grid-template-columns: 1.4fr auto; gap: var(--sp-7); }
}
.v4-fecho .v4-titulo { max-width: 20ch; }
.v4-fecho .v4-lede { color: rgba(34, 32, 29, 0.78); }
.v4-fecho .btn { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .v4-faq__item summary::after { transition: none; }
}