/**
 * templo.css — a identidade do templo (2026-10-26): tipografia, a escala de cor tirada da gravura e os
 * componentes das seções da home nova. O herói tem o próprio estilo (includes/templo/heroi-estilo.php,
 * porque usa as coordenadas da arte); este arquivo é o que as outras páginas vão herdar.
 *
 * ═══ A ESCALA ═══
 * Medida na arte (assets/images/novo-layout.png) e gerada em OKLCH, com a cor do dono EXATA no seu degrau:
 *   pergaminho 200 = #E8E1D2 (o papel) · roxo 600 = #7167B5 · verde 500 = #5F9A83 · índigo 900 = #25284A
 *   lavanda 300 = #B9B6C3 (nuvens e mar)
 * Contraste conferido (WCAG): tinta índigo 900 no papel 10,9 · índigo 700 no papel 5,4 · roxo 700 no papel 5,6 ·
 * verde 700 no papel 5,2 · papel no índigo 950 13,3 · verde 300 / roxo 300 na noite > 10. Roxo 600 (3,7) e
 * verde 500 (2,5) são cor de DESENHO e título grande, nunca de texto corrido.
 *
 * ═══ DIA E NOITE ═══
 * Não é troca de cor: o papel vira a noite índigo, o acento passa do roxo ao verde, e cada cabeçalho tem o
 * sol e a lua da gravura num disco que gira com o tema (o mesmo gesto do herói).
 */

/* ── Tipos da casa (arquivos já servidos pelo site) ─────────────────────────────────────── */
@font-face { font-family: "Cardo"; src: url("/assets/fonts/recorte/cardo_normal_400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cardo"; src: url("/assets/fonts/recorte/cardo_italic_400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cardo"; src: url("/assets/fonts/recorte/cardo_normal_700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Ysabeau Office"; src: url("/assets/fonts/recorte/YsabeauOffice-VariableFont_wght.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }

:root {
  /* escala (gerada; ver o cabeçalho) */
  --pergaminho-50: #FDF6E8; --pergaminho-100: #F3ECDE; --pergaminho-200: #E8E1D2; --pergaminho-300: #CAC3B7; --pergaminho-400: #ACA79C;
  --pergaminho-500: #8E8A81; --pergaminho-600: #74716A; --pergaminho-700: #5C5954; --pergaminho-800: #44423E; --pergaminho-900: #2F2E2B;
  --roxo-50: #F6F6FF; --roxo-100: #EBEAFF; --roxo-200: #DAD8FE; --roxo-300: #C1BDF5; --roxo-400: #A49FDF; --roxo-500: #8780C8;
  --roxo-600: #7167B5; --roxo-700: #574E90; --roxo-800: #413970; --roxo-900: #2D2653; --roxo-950: #1B1539;
  --verde-50: #E2FFF2; --verde-100: #D2F7E7; --verde-200: #BFE7D6; --verde-300: #A3D0BD; --verde-400: #81B5A0; --verde-500: #5F9A83;
  --verde-600: #4B7E6A; --verde-700: #396453; --verde-800: #274B3D; --verde-900: #18342A; --verde-950: #0A2119;
  --indigo-50: #F5F6FF; --indigo-100: #EAECF7; --indigo-200: #DADCE7; --indigo-300: #C1C3D1; --indigo-400: #A3A6B9; --indigo-500: #8589A0;
  --indigo-600: #6C708A; --indigo-700: #535774; --indigo-800: #3B3F5F; --indigo-900: #25284A; --indigo-950: #161835;
  --lavanda-100: #EDEBF6; --lavanda-200: #DDDAE6; --lavanda-300: #B9B6C3; --lavanda-400: #A8A6B2; --lavanda-500: #8B8993;

  /* papéis semânticos — de dia */
  --t-papel: #EDE6D6;                /* o papel da página: o mesmo em que a luz da porta do herói termina */
  --t-papel-2: #E6DECF;               /* a seção alternada: o mesmo papel, um tom mais fundo */
  --t-pedra: var(--pergaminho-100);   /* placa, carta, tábua */
  --t-tinta: var(--indigo-900);
  --t-tinta-2: var(--indigo-700);
  --t-acento: var(--roxo-700);        /* texto e link em destaque */
  --t-acento-desenho: var(--roxo-600);
  --t-acento-2: var(--verde-700);
  --t-acento-2-desenho: var(--verde-500);
  --t-fio: color-mix(in srgb, var(--indigo-900) 28%, transparent);
  --t-fio-forte: color-mix(in srgb, var(--indigo-900) 55%, transparent);

  --t-serifa: "Cardo", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --t-texto: "Ysabeau Office", "Segoe UI", system-ui, sans-serif;
  --t-ease: cubic-bezier(.65, 0, .35, 1);
  /* uma duração só para tudo que muda de cor com o tema: o rodapé sem transição e o resto a 1,8 s deixavam uma faixa
     de outra cor por quase dois segundos (dono, 27/10: "demorando muito, faixa diferente durante a transição") */
  --t-troca: .7s;
  --t-saida: cubic-bezier(.23, 1, .32, 1);
  --t-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .4  0 0 0 0 .32  0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
html.dark {
  --t-papel: var(--indigo-950);
  --t-papel-2: #1B1E40;
  --t-pedra: #1F2247;
  --t-tinta: var(--pergaminho-200);
  --t-tinta-2: var(--indigo-300);
  --t-acento: var(--verde-300);        /* de noite o acento é o verde */
  --t-acento-desenho: var(--verde-400);
  --t-acento-2: var(--roxo-300);
  --t-acento-2-desenho: var(--roxo-400);
  --t-fio: color-mix(in srgb, var(--pergaminho-200) 18%, transparent);
  --t-fio-forte: color-mix(in srgb, var(--pergaminho-200) 40%, transparent);
}

/* ── Base da página ─────────────────────────────────────────────────────────────────────── */
body.pagina-templo {
  background: var(--t-papel); color: var(--t-tinta);
  font-family: var(--t-texto); font-size: 1.125rem; line-height: 1.6;
  transition: background-color var(--t-troca) var(--t-ease), color var(--t-troca) var(--t-ease);
}
.pagina-templo main { background: var(--t-papel); transition: background-color var(--t-troca) var(--t-ease); }
.tp-container { width: min(1200px, 100% - 2 * clamp(1rem, 4vw, 3rem)); margin-inline: auto; }
.tp-container--estreito { width: min(860px, 100% - 2 * clamp(1rem, 4vw, 3rem)); }
.tp-secao {
  position: relative; padding-block: clamp(4.5rem, 10vw, 8.5rem);
  background-image: var(--t-grao); background-color: var(--t-papel);
  transition: background-color var(--t-troca) var(--t-ease);
}
/* um papel só (portão UI, P2): o papel alternado fazia uma borda dura de ponta a ponta a cada seção, o divisor que o dono reprovou */
/* de noite, umas poucas estrelas no papel das seções — fixas, discretas */
/* de noite o grão escurece em vez de clarear o índigo */
html.dark .tp-secao { background-blend-mode: multiply; }
html.dark .tp-secao::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 78% 12%, #fff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 64% 72%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 30% 84%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 90% 58%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 46% 34%, #fff 50%, transparent 52%);
}
.tp-secao > * { position: relative; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Cabeçalho de seção ─────────────────────────────────────────────────────────────────── */
.tp-cab { max-width: 52rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.tp-cab__ordem {
  display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem;
  font-family: var(--t-serifa); font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; color: var(--t-tinta-2);
}
.tp-cab__ordem--livre { text-transform: none; letter-spacing: .03em; }
.tp-romano { font-variant-numeric: lining-nums; color: var(--t-acento); font-weight: 700; letter-spacing: .08em; }
.tp-romano::after { content: "·"; margin-left: .7rem; color: var(--t-tinta-2); font-weight: 400; }
.tp-cab h2 {
  font-family: var(--t-serifa); font-weight: 400; font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.04;
  letter-spacing: -.01em; margin: 0 0 1.2rem; text-wrap: balance;
}
.tp-cab h2 em, .tp-cab h2 i { font-style: italic; color: var(--t-acento); transition: color var(--t-troca) var(--t-ease); }
.tp-lede { font-size: clamp(1.05rem, 1.35vw, 1.22rem); color: var(--t-tinta-2); max-width: 44rem; margin: 0; text-wrap: pretty; }

/* O emblema: o sol e a lua da gravura num disco. Gira com o tema, como o céu do herói. */
.tp-emblema { position: relative; width: 2.6rem; height: 2.6rem; flex: none; transition: transform 2.2s var(--t-ease); }
.tp-emblema img { position: absolute; max-width: none; height: auto; transition: opacity 1.4s var(--t-ease); }
.tp-emblema__sol { width: 6rem; aspect-ratio: 460 / 360; left: 50%; top: 50%; transform: translate(-50%, -38.9%); }
/* a lua cheia não precisa de desvirar: o disco gira meia volta e ela continua lua */
.tp-emblema__lua { width: 2rem; height: 2rem; left: calc(50% - 1rem); top: calc(50% - 1rem); opacity: 0; }
html.dark .tp-emblema { transform: rotate(180deg); }
html.dark .tp-emblema__sol { opacity: 0; }
html.dark .tp-emblema__lua { opacity: 1; }
.tp-emblema { overflow: hidden; border-radius: 50%; }
html.dark .tp-emblema__lua { filter: drop-shadow(0 0 6px rgba(232, 225, 210, .35)); }

/* ── Botões e links ──────────────────────────────────────────────────────────────────────── */
.pagina-templo .tp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: 0 1.4rem;
  border: 1.5px solid var(--t-tinta); border-radius: 2px; background: transparent; color: var(--t-tinta);
  font: 600 1rem/1 var(--t-texto); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.pagina-templo .tp-btn--main { background: var(--t-tinta); color: var(--t-papel); }
.pagina-templo .tp-btn:hover { background: var(--t-acento); border-color: var(--t-acento); color: var(--t-papel); }
.pagina-templo .tp-btn:focus-visible, .tp-link:focus-visible, .tp-faq summary:focus-visible { outline: 2px solid var(--t-acento-2); outline-offset: 3px; }
.tp-link {
  font: inherit; color: var(--t-acento); background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
  transition: color .2s, text-decoration-color .2s;
}
.tp-link:hover { text-decoration-thickness: 2px; }
.tp-saidas { display: flex; flex-wrap: wrap; gap: .8rem; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }
.tp-saidas--discreta { margin-top: 2rem; }
.tp-nota { color: var(--t-tinta-2); margin: 2.5rem 0 0; }

/* ── O fio entre as seções: a linha de terra, os tiques 3·6·9 e o templo pequeno ───────────── */
.tp-fio { position: relative; height: 0; z-index: 2; }
.tp-fio svg { position: absolute; left: 0; right: 0; top: -12px; width: 100%; height: 24px; fill: none; stroke: var(--t-fio-forte); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tp-fio__templo { position: absolute; left: 50%; top: 0; width: 64px; height: auto; transform: translate(-50%, -78%); }
html.dark .tp-fio__templo, html.dark .tp-orn { filter: brightness(.82) saturate(.9); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tp-fio__linha, .tp-pedras__terra path { stroke-dasharray: 1; animation: tpDesenha linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@keyframes tpDesenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* revelação suave: o que entra sobe pouco e acende (rolagem, sem JS) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-revela] { animation: tpRevela linear both; animation-timeline: view(); animation-range: entry 5% cover 30%; }
  }
}
@keyframes tpRevela { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ── I · O caminho (colunata) ─────────────────────────────────────────────────────────────── */
.tp-colunata { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.5rem, 5vw, 4rem); counter-reset: parada; }
.tp-parada { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
  padding-top: clamp(1.5rem, 3vw, 2.2rem); border-top: 1px solid var(--t-fio); }
.tp-parada__cab { position: sticky; top: 6rem; }
.tp-parada__num { display: block; font-family: var(--t-serifa); font-size: clamp(3.4rem, 6vw, 5rem); line-height: .9; color: var(--t-acento-desenho);
  transition: color var(--t-troca) var(--t-ease); margin-bottom: .6rem; }
.tp-parada h3 { font-family: var(--t-serifa); font-weight: 700; font-size: 1.7rem; margin: 0 0 .5rem; }
.tp-parada__cab p { margin: 0; color: var(--t-tinta-2); font-style: italic; font-family: var(--t-serifa); font-size: 1.12rem; line-height: 1.45; }
.tp-parada__entregas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(1.25rem, 2.4vw, 2rem); }
.tp-entrega { position: relative; display: flex; flex-direction: column; gap: .55rem; }
/* a capa como gravura emoldurada: fio duplo e o papel em volta */
.tp-entrega__gravura { display: block; padding: .55rem; background: var(--t-pedra); border: 1px solid var(--t-fio-forte); outline: 1px solid var(--t-fio); outline-offset: 4px;
  transition: transform .5s var(--t-saida), background-color var(--t-troca) var(--t-ease); }
.tp-entrega__gravura img { display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; object-position: top;   /* a proporção das capas (1200 × 630): em 16:10 o corte comia a 1ª letra da faixa (portão UI, P2) */ filter: saturate(.92) sepia(.08); }
@media (hover: hover) and (pointer: fine) { .tp-entrega:hover .tp-entrega__gravura { transform: translateY(-4px); } }
.tp-entrega h4 { font-family: var(--t-serifa); font-weight: 700; font-size: 1.32rem; line-height: 1.2; margin: .2rem 0 0; }
.tp-entrega h4 a { color: inherit; text-decoration: none; }
.tp-entrega h4 a:hover { color: var(--t-acento); }
.tp-entrega__acoes { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 0; }
.tp-link--toque { display: inline-flex; align-items: center; min-height: 44px; }
.tp-estado { display: flex; align-items: center; gap: .45rem; margin: .4rem 0 0; font-size: .9375rem; letter-spacing: .1em; text-transform: uppercase; color: var(--t-tinta-2); }
.tp-estado span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--t-acento-2-desenho); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-acento-2-desenho) 25%, transparent); }
.tp-estado--documento span { background: var(--t-acento-desenho); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-acento-desenho) 25%, transparent); }
.tp-estado--preparacao span { background: transparent; border: 1.5px solid var(--t-tinta-2); box-shadow: none; }
.tp-entrega__conversa { padding: 1.1rem 1.2rem; background: var(--t-pedra); border: 1px solid var(--t-fio-forte); display: grid; gap: .6rem;
  transition: background-color var(--t-troca) var(--t-ease); }
.tp-entrega__conversa .vc__fala { margin: 0; font-size: 1rem; line-height: 1.5; max-width: 92%; }
.tp-entrega__conversa .vc__fala--assistente { font-family: var(--t-serifa); font-style: italic; font-size: 1.05rem; }
.tp-entrega__conversa .vc__fala--cliente { justify-self: end; text-align: right; color: var(--t-tinta-2); }

/* ── II · A obra (quatro pedras sobre a linha de terra) ───────────────────────────────────── */
.tp-pedras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.tp-pedra { position: relative; padding: 2.2rem 1.6rem 1.8rem; background: var(--t-pedra); border: 1px solid var(--t-fio-forte);
  transition: background-color var(--t-troca) var(--t-ease); }
.tp-pedra::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--t-fio); pointer-events: none; }
.tp-pedra__ferramenta { width: 3rem; height: 3rem; fill: none; stroke: var(--t-acento-desenho); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--t-troca) var(--t-ease); }
.tp-pedra__num { position: absolute; top: 1.1rem; right: 1.3rem; font-family: var(--t-serifa); font-size: 2.6rem; line-height: 1; color: var(--t-fio-forte); }
.tp-pedra h3 { font-family: var(--t-serifa); font-weight: 700; font-size: 1.45rem; margin: 1rem 0 .6rem; }
.tp-pedra p { margin: 0; color: var(--t-tinta-2); font-size: 1rem; }
.tp-pedra__entregavel { margin-top: 1.1rem !important; padding-top: .9rem; border-top: 1px dashed var(--t-fio-forte); font-size: 1rem !important; letter-spacing: .02em; color: var(--t-acento-2) !important; }
.tp-pedras__terra { display: block; width: 100%; height: 20px; margin-top: 1.6rem; fill: none; stroke: var(--t-tinta); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tp-pedra { animation-delay: calc(var(--i, 0) * 60ms); }
  }
}

/* ── III · As inscrições ───────────────────────────────────────────────────────────────────── */
.tp-inscricoes { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); padding-top: clamp(4rem, 9vw, 7rem); }
.tp-inscricoes__templo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(420px, 70%); height: auto;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent); opacity: .9; }
.tp-inscricao { position: relative; padding: clamp(2rem, 4vw, 3rem); text-align: center; background: var(--t-pedra);
  border: 1px solid var(--t-fio-forte); box-shadow: inset 0 0 0 6px var(--t-pedra), inset 0 0 0 7px var(--t-fio); transition: background-color var(--t-troca) var(--t-ease); }
.tp-inscricao__marca { font-family: var(--t-serifa); font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1; margin: 0 0 1rem; color: var(--t-acento); }
.tp-inscricao__marca small { display: block; font-size: 0.95rem; letter-spacing: .16em; text-transform: uppercase; color: var(--t-tinta-2); margin-top: .5rem; font-family: var(--t-texto); }
.tp-inscricao h3 { font-family: var(--t-serifa); font-weight: 700; font-size: 1.55rem; margin: 0 0 .7rem; letter-spacing: .02em; }
.tp-inscricao p { color: var(--t-tinta-2); margin: 0 auto; max-width: 30rem; }
.tp-inscricao__pe { margin-top: 1.3rem !important; font-size: 1rem; letter-spacing: .03em; }

/* ── IV · O índice de ofícios ──────────────────────────────────────────────────────────────── */
.tp-indice { list-style: none; margin: 0; padding: 0; columns: 3 16rem; column-gap: clamp(2rem, 4vw, 3.5rem); }
.tp-indice li { display: flex; align-items: baseline; gap: .5rem; padding: .45rem 0; break-inside: avoid; }
.tp-indice__nome { font-family: var(--t-serifa); font-size: 1.12rem; white-space: nowrap; }
.tp-indice__pontos { flex: 1; border-bottom: 1px dotted var(--t-fio-forte); transform: translateY(-.25em); min-width: 1rem; }
.tp-indice__fonte { font-size: 1rem; color: var(--t-tinta-2); white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; }
.tp-indice li.is-cert .tp-indice__fonte { color: var(--t-acento-2); font-weight: 600; }
.tp-selo { width: .85rem; height: .85rem; border-radius: 50%; background: var(--t-acento-2-desenho);
  -webkit-mask: radial-gradient(circle, #000 55%, transparent 58%, transparent 66%, #000 69%); mask: radial-gradient(circle, #000 55%, transparent 58%, transparent 66%, #000 69%); }

/* ── V · As tábuas ──────────────────────────────────────────────────────────────────────────── */
.tp-tabuas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.tp-tabua { padding: 2rem 1.7rem; border-top: 3px double var(--t-fio-forte); border-bottom: 1px solid var(--t-fio); }
.tp-tabua__palavra { font-family: var(--t-serifa); font-style: italic; font-size: clamp(2.6rem, 4.5vw, 3.6rem); line-height: 1; margin: 0 0 .7rem; color: var(--t-acento); transition: color var(--t-troca) var(--t-ease); }
.tp-tabua h3 { font-family: var(--t-serifa); font-weight: 700; font-size: 1.3rem; line-height: 1.25; margin: 0 0 .8rem; }
.tp-tabua p { color: var(--t-tinta-2); margin: 0 0 1rem; }

/* ── VI · O friso ───────────────────────────────────────────────────────────────────────────── */
.tp-friso { border-block: 1px solid var(--t-fio-forte); padding-block: 1.1rem; overflow: hidden; display: grid; gap: .9rem;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tp-friso__faixa { display: flex; width: max-content; animation: tpFriso 60s linear infinite; }
.tp-friso__faixa--volta { animation-direction: reverse; animation-duration: 70s; }
.tp-friso:hover .tp-friso__faixa { animation-play-state: paused; }
.tp-friso__trilha { display: flex; list-style: none; margin: 0; padding: 0; }
.tp-friso__trilha li { font-family: var(--t-serifa); font-size: clamp(1.25rem, 2vw, 1.7rem); white-space: nowrap; padding-inline: 1.4rem; display: flex; align-items: center; gap: 2.8rem; }
.tp-friso__trilha li::after { content: "✦"; font-size: .7em; color: var(--t-acento-desenho); margin-left: 1.4rem; transition: color var(--t-troca) var(--t-ease); }
.tp-friso__faixa--volta li { font-style: italic; color: var(--t-tinta-2); }
@keyframes tpFriso { to { transform: translateX(-50%); } }

/* ── VII · Perguntas ───────────────────────────────────────────────────────────────────────── */
.tp-faq { border-top: 1px solid var(--t-fio-forte); }
.tp-faq__item { border-bottom: 1px solid var(--t-fio-forte); }
.tp-faq summary { display: grid; grid-template-columns: 3rem 1fr 1.5rem; align-items: center; gap: .8rem; padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-family: var(--t-serifa); font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.3; }
.tp-faq summary::-webkit-details-marker { display: none; }
.tp-faq__num { color: var(--t-acento-desenho); font-size: 1.05rem; letter-spacing: .08em; }
.tp-faq__sinal { position: relative; width: 1rem; height: 1rem; }
.tp-faq__sinal::before, .tp-faq__sinal::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform .35s var(--t-saida); }
.tp-faq__sinal::after { transform: rotate(90deg); }
.tp-faq__item[open] .tp-faq__sinal::after { transform: rotate(0); }
.tp-faq__item p { margin: 0 0 1.5rem 3.8rem; color: var(--t-tinta-2); max-width: 40rem; }

/* ── VIII · A porta ────────────────────────────────────────────────────────────────────────── */
.tp-porta { text-align: left; }
.tp-porta__pavilhao { display: block; width: 150px; height: auto; margin: 0 auto 1.5rem; }
.tp-porta .tp-cab { text-align: center; margin-inline: auto; }
.tp-porta .tp-cab__ordem { justify-content: center; }
.tp-porta .tp-lede { margin-inline: auto; }
.tp-carta { padding: clamp(1.75rem, 4vw, 3rem); background: var(--t-pedra); border: 1px solid var(--t-fio-forte);
  box-shadow: inset 0 0 0 7px var(--t-pedra), inset 0 0 0 8px var(--t-fio); transition: background-color var(--t-troca) var(--t-ease); }
.tp-carta__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1.4rem; }
.tp-campo--cheio { grid-column: 1 / -1; }
.tp-carta label { display: block; font-family: var(--t-serifa); font-size: 1.05rem; margin-bottom: .35rem; }
.tp-carta input, .tp-carta select, .tp-carta textarea {
  width: 100%; min-height: 48px; padding: .7rem .2rem; font: inherit; color: var(--t-tinta);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--t-fio-forte); border-radius: 0;
  transition: border-color .2s, background-color .2s;
}
.tp-carta select { background-image: none; appearance: auto; }
.tp-carta select option { color: #25284A; background: #F3ECDE; }
.tp-carta input:focus, .tp-carta select:focus, .tp-carta textarea:focus { outline: none; border-bottom-color: var(--t-acento); background: color-mix(in srgb, var(--t-acento) 6%, transparent); }
.tp-carta textarea { resize: vertical; min-height: 7rem; }
.tp-carta ::placeholder { color: color-mix(in srgb, var(--t-tinta-2) 75%, transparent); }
.tp-carta .field__hint { margin: -.2rem 0 0; font-size: 1rem; color: var(--t-tinta-2); }
.tp-carta .field__error { display: block; min-height: 1.1em; font-family: var(--t-texto); font-size: 1rem; font-weight: 500; line-height: 1.45; color: #b3322a; }
html.dark .tp-carta .field__error { color: #f0a29b; }
.tp-carta .lead-form__consent-note { font-size: 1rem; color: var(--t-tinta-2); margin: 1.6rem 0 1.2rem; }
.tp-carta__acoes { display: flex; flex-wrap: wrap; gap: .8rem; }
/* o aceite pedido no envio (quem recusou ou ignorou o banner): um selo na carta, não um alerta */
.tp-carta .lead-form__aceite { margin: 0 0 1.2rem; padding: 1rem 1.1rem; border: 1px solid var(--t-fio-forte); border-left: 3px solid var(--t-acento);
  background: color-mix(in srgb, var(--t-papel) 70%, transparent); display: grid; gap: .8rem; }
.tp-carta .lead-form__aceite[hidden] { display: none; }
.tp-carta .lead-form__aceite p { margin: 0; font-size: 1rem; color: var(--t-tinta); line-height: 1.5; }
.tp-carta .lead-form__aceite a { color: var(--t-acento); }
.tp-carta .lead-form__aceite .tp-btn { justify-self: start; }
.tp-carta .lead-form__status a { color: var(--t-acento); text-decoration: underline; }
/* a linha de status na voz da carta (a herdada era mono e laranja, sem contraste no papel) */
.tp-carta .lead-form__status { font-family: var(--t-texto); font-size: 1rem; line-height: 1.5; color: var(--t-tinta-2); margin: 1rem 0 0; }
.tp-carta .lead-form__status:empty { display: none; }
.tp-carta .lead-form__status[data-state=blocked] { color: #8f2f24; }
html.dark .tp-carta .lead-form__status[data-state=blocked] { color: #f0a29b; }
.tp-carta .lead-form__status[data-state=ok] { color: var(--t-acento-2); font-weight: 600; }
.tp-carta .field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── A porta em três passos (spec 009 F2) ─────────────────────────────────────────────────────
   Sem JavaScript os três <fieldset> aparecem empilhados e enviam por form-urlencoded. Com ele (lead-form.js põe
   .lead-form--passos) viram passos, e o cartão "Recebido" ocupa o lugar do formulário. Texto de apoio nunca abaixo de
   14 px, e Cardo itálico só de 16 px para cima (o dono reclamou de texto pequeno difícil de ler). */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tp-carta fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.lead-form [hidden] { display: none !important; }   /* os seletores .tp-carta … vencem o [hidden] do navegador */
.lead-passo + .lead-passo { margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--t-fio); }
.lead-form--passos .lead-passo + .lead-passo { margin-top: 0; padding-top: 0; border-top: 0; }
.lead-passo[hidden], .tp-passos[hidden], .lead-grupo[hidden], .lead-chipserv[hidden], .lead-form__retomada[hidden],
.lead-passo__servinfo[hidden], .lead-aceite__js[hidden], .lead-aceite__ok[hidden], .lead-aceite__check[hidden], .lead-nav [hidden] { display: none; }
.lead-passo__tit { margin: 0 0 .35rem; font-family: var(--t-serifa); font-weight: 400; font-size: clamp(1.45rem, 3.4vw, 1.8rem); line-height: 1.2; color: var(--t-tinta); }
.lead-passo__tit:focus { outline: none; }
.lead-passo__tit:focus-visible { outline: 2px solid var(--t-acento); outline-offset: 4px; }
.lead-passo__micro { margin: 0 0 1rem; font-size: 1rem; line-height: 1.5; color: var(--t-tinta-2); }
.lead-passo__erro { margin: .2rem 0 0; }
.lead-passo__servinfo { margin: 0 0 1rem; padding: .7rem .9rem; font-size: 1rem; line-height: 1.5; color: var(--t-tinta); border-left: 3px solid var(--t-acento); background: color-mix(in srgb, var(--t-acento) 8%, transparent); }
.lead-campo { margin-top: 1rem; }
.lead-form--passos .lead-grupo__sem-js { display: none; }
.lead-grupo { margin: 0 0 1rem; }
.lead-grupo > legend, .tp-carta .lead-campo > label { display: block; padding: 0; margin: 0 0 .45rem; font-family: var(--t-serifa); font-size: 1.05rem; color: var(--t-tinta); }
.lead-grupo__sem-js { font-family: var(--t-texto); font-size: 1rem; color: var(--t-tinta-2); }

/* os rádios em "chips": o rádio fica ao alcance do teclado e do leitor de tela, o desenho é do <span> */
.lead-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .55rem; }
.lead-chips--frente { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lead-chips--porte  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lead-chips--faixa  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lead-chips--canal  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lead-chips--urg    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lead-chips--horario { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lead-chips--horario .lead-chip span { font-size: 1rem; padding-inline: .2rem; }
.lead-chips--frente .lead-chip:last-child { grid-column: 1 / -1; }
.tp-carta .lead-chip { display: flex; position: relative; margin: 0; font-family: var(--t-texto); font-size: 1rem; cursor: pointer; }
.tp-carta .lead-chip input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; border: 0; }
.lead-chip span { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; min-height: 48px; padding: .45rem .7rem; line-height: 1.25;
  color: var(--t-tinta); background: transparent; border: 1.5px solid var(--t-fio-forte); transition: background-color .15s, border-color .15s, color .15s; }
@media (hover: hover) and (pointer: fine) { .lead-chip:hover span { border-color: var(--t-acento); } }
.lead-chip input:checked + span { border-color: var(--t-acento); background: color-mix(in srgb, var(--t-acento) 14%, transparent); font-weight: 600; box-shadow: inset 0 -3px 0 var(--t-acento); }
.lead-chip input:focus-visible + span { outline: 2px solid var(--t-acento); outline-offset: 2px; }

/* o indicador de passo: o número e o rótulo; a cor nunca é o único sinal (o atual sublinha, o feito leva ✓) */
.tp-passos { display: flex; gap: .4rem; margin: 0 0 1.2rem; padding: 0; list-style: none; counter-reset: passo; }
.tp-passos li { flex: 1 1 0; display: flex; align-items: center; gap: .45rem; padding-bottom: .4rem; font-size: 1rem; color: var(--t-tinta-2); border-bottom: 3px solid var(--t-fio); }
.tp-passos__n { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1.5px solid currentColor; border-radius: 50%; font-size: 1rem; flex: none; }
.tp-passos .is-feito { color: var(--t-acento-2); border-bottom-color: var(--t-acento-2); }
.tp-passos .is-feito .tp-passos__n::before { content: "\2713"; }
.tp-passos .is-feito .tp-passos__n { font-size: 0; }
.tp-passos .is-feito .tp-passos__n::before { font-size: .9rem; }
.tp-passos .is-atual { color: var(--t-tinta); font-weight: 600; border-bottom-color: var(--t-acento); }
.lead-form__retomada { margin: 0 0 1rem; font-size: 1rem; color: var(--t-tinta-2); }

.lead-chipserv { margin: 1rem 0 0; padding: .6rem .8rem; border: 1px solid var(--t-fio-forte); font-size: 1rem; }
.lead-chipserv .tp-link, .lead-form__retomada .tp-link { background: none; border: 0; padding: 0; font: inherit; color: var(--t-acento); text-decoration: underline; cursor: pointer; min-height: 44px; }

/* o aceite fica à vista no passo 3 (nada de esconder até o clique) */
.tp-carta .lead-form__aceite { margin: 1rem 0 1.1rem; padding: .85rem 1rem; display: block; }
.tp-carta .lead-aceite__check { display: flex; gap: .7rem; align-items: flex-start; margin: 0; font-family: var(--t-texto); font-size: 1rem; line-height: 1.5; }
.tp-carta .lead-aceite__check input { width: 1.4rem; min-height: 1.4rem; height: 1.4rem; flex: none; margin-top: .15rem; accent-color: var(--t-acento); }
.tp-carta .lead-aceite__ok { color: var(--t-acento-2); }
.tp-carta .lead-aceite__js, .tp-carta .lead-aceite__ok { margin: 0; font-size: 1rem; }

.lead-nav { margin-top: 1.1rem; justify-content: space-between; }
.lead-nav .tp-btn { min-height: 48px; min-width: 44px; }
.lead-form--passos .lead-nav__continuar, .lead-form--passos .lead-nav__enviar { margin-left: auto; }
.lead-form__criterio { margin: .9rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--t-tinta-2); }
.lead-form__alerta:focus { outline: none; }
.lead-form__alerta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.lead-form__alerta { scroll-margin-top: 96px; margin: 0 0 1.2rem; padding: .8rem 1rem; font-size: 1rem; line-height: 1.5; color: #8f2f24; border: 1px solid currentColor; border-left-width: 4px; }
html.dark .lead-form__alerta { color: #f0a29b; }

/* o cartão "Recebido" no lugar do formulário */
/* o cabeçalho fixo (77 px) não cobre o passo nem o "Recebido" quando o foco ou o scroll chegam neles */
.lead-form, .lead-passo, .lead-recebido, .lead-recebido__tit { scroll-margin-top: calc(var(--altura-cabecalho, 77px) + 1rem); }
.chat-panel .lead-recebido, .chat-panel .lead-recebido__tit { scroll-margin-top: 0; } /* no widget a área rolável não tem cabeçalho fixo por cima */
.lead-recebido:focus { outline: none; }
.lead-recebido__tit { margin: 0 0 .5rem; font-family: var(--t-serifa); font-weight: 400; font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.2; color: var(--t-tinta); }
.lead-recebido__tit:focus { outline: none; }
.lead-recebido__tit:focus-visible { outline: 2px solid var(--t-acento); outline-offset: 4px; }
.lead-recebido__prot { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin: 0 0 1.2rem; font-size: 1.05rem; color: var(--t-tinta-2); }
.lead-recebido__prot-cod { font-family: var(--t-serifa); font-size: 1.6rem; letter-spacing: .06em; color: var(--t-tinta); }
.lead-recebido__copiar { background: none; border: 0; padding: 0; font: inherit; color: var(--t-acento); text-decoration: underline; cursor: pointer; min-height: 44px; }
.lead-recebido__sub { margin: 1.4rem 0 .5rem; font-family: var(--t-serifa); font-weight: 400; font-size: 1.15rem; color: var(--t-tinta); padding-top: 1rem; border-top: 1px solid var(--t-fio); }
.lead-recebido__resumo { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; font-size: 1rem; line-height: 1.45; }
.lead-recebido__resumo dt { color: var(--t-tinta-2); }
.lead-recebido__resumo dd { margin: 0; color: var(--t-tinta); }
.lead-recebido__tempo { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; font-size: 1.05rem; line-height: 1.5; color: var(--t-tinta); }
.lead-recebido__motivo, .lead-recebido__aviso, .lead-recebido__txt { margin: .8rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--t-tinta-2); }
.lead-recebido__txt a, .lead-recebido__tempo a { color: var(--t-acento); text-decoration: underline; }
.lead-recebido__saidas { display: flex; flex-direction: column; gap: .6rem; }
.lead-recebido__saidas .tp-btn { min-height: 48px; justify-content: center; text-align: center; }
@media (min-width: 720px) {
  .lead-chips--frente { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lead-chips--frente .lead-chip:last-child { grid-column: auto; }
  .lead-chips--porte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lead-chips--faixa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lead-recebido__saidas { flex-direction: row; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .lead-chip span { transition: none; } }

/* a caixinha nome + WhatsApp no painel do chat: pílulas e botão de 16 px como os botões vizinhos do resumo */
.lead-whats--widget { border-radius: 16px; border-left-width: 1px; }
.lead-whats--widget .lead-whats__campo input { border-radius: 999px; padding-inline: 1rem; font-size: 1rem; }
.lead-whats--widget .lead-whats__btn.chat-resumo__btn { width: 100%; min-height: 44px; border-radius: 999px; font-size: 16px; font-weight: 600; background: var(--cd-fg); color: var(--cd-bg); border: 1px solid var(--cd-fg); }
.lead-recebido__volta { margin-top: 1rem; }

/* o salto para #contato não deixa o cabeçalho fixo (77 px) cobrir o rótulo e o título da seção */
.tp-porta { scroll-margin-top: 4.75rem; }

/* Âncora #contato estável: .section-fx usa content-visibility:auto com altura de reserva, e a altura acima do formulário muda
   enquanto a rolagem suave corre (a home encolhia ~350 px): o alvo ficava para trás e a pessoa pousava DEPOIS do formulário.
   Antes de ir a #contato o main.js força a renderização real (.cv-visivel) e salta sem animação. */
html.cv-visivel .section-fx { content-visibility: visible; }

/* Acabamento do cartão Recebido e do indicador (portão de UI, rodada 2) */
.lead-recebido__tempo strong { display: block; margin-bottom: .1rem; }
.lead-recebido__saidas .tp-btn { height: auto; padding-block: .65rem; line-height: 1.3; }
@media (max-width: 560px) {
  .lead-form--passos .tp-passos li:not(.is-atual) { flex: 0 0 auto; }
  .lead-form--passos .tp-passos li.is-atual { flex: 1 1 auto; }
  .lead-form--passos .tp-passos__t { white-space: nowrap; }
  /* o aviso de privacidade do celular (116 px, 2 linhas a 16 px) mora na seção "A soleira", no fim deste arquivo */
}

/* ── O WhatsApp e o cartão "Recebido" do chat (spec 009, components/lead-whats.js) ───────────────── */
.lead-whats { display: grid; gap: .6rem; margin: .8rem 0 0; padding: .8rem; border: 1px solid var(--t-fio-forte); border-left: 3px solid var(--t-acento); background: color-mix(in srgb, var(--t-papel) 70%, transparent); font-family: var(--t-texto); }
.lead-whats[hidden] { display: none; }
.lead-whats__txt, .lead-whats__st { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--t-tinta); }
.lead-whats__st:empty { display: none; }
.lead-whats__st a { color: var(--t-acento); text-decoration: underline; }
.lead-whats__campo label { display: block; margin: 0 0 .2rem; font-size: 1rem; color: var(--t-tinta); }
.lead-whats__campo input { width: 100%; min-height: 44px; padding: .4rem .6rem; font: inherit; font-size: 1rem; color: var(--t-tinta); background: transparent; border: 1.5px solid var(--t-fio-forte); border-radius: 0; }
.lead-whats__campo input:focus-visible { outline: 2px solid var(--t-acento); outline-offset: 1px; }
.lead-whats__btn { min-height: 48px; padding: .5rem 1rem; font: inherit; font-weight: 600; color: var(--t-papel); background: var(--t-acento); border: 0; cursor: pointer; }
.lead-whats__btn:disabled { opacity: .6; cursor: default; }
.lead-recebido--chat { margin: .8rem 0; padding: 1rem; border: 1px solid var(--t-fio-forte); background: var(--t-pedra); }
.lead-recebido--chat .lead-recebido__tit { font-size: 1.35rem; }

/* O que é fixo embaixo (o aviso; no celular também a soleira) não pode cobrir o fim da página: a altura de quem está lá vem de
   --barra-h (main.js) e vira espaço no fim do body. O gatilho do chat e o voltar-ao-topo deixaram de subir acima do aviso: no
   celular o primeiro é a "Perguntar" da soleira e o segundo a pedra-chave, ambos posicionados por --barra-h (seção "A soleira"). */
html:has(> body.pagina-templo) body { padding-bottom: var(--barra-h, 0px); }
/* Com o aviso aberto, Voltar/Continuar/Enviar ficam colados logo acima dele (sticky) em vez de atrás: o formulário é maior que a
   janela menos o aviso, então rolar sozinho não os tira de baixo. Volta ao lugar natural quando o aviso some. */
html:has(.cookie-banner.is-visible) .lead-form--passos .lead-nav { position: sticky; bottom: calc(var(--barra-h, 15rem) + 1rem); z-index: 5;
  padding: .5rem 0; background: var(--t-pedra); box-shadow: 0 -1px 0 var(--t-fio); }
/* celular: cada passo cabe em 390 x 844 sem rolar (aceite do passo 3 à vista, teclado fechado). O critério só aparece no passo 3. */
@media (max-width: 560px) {
  .lead-form--passos.tp-carta { padding: 1.1rem 1rem 1.2rem; box-shadow: none; }
  .lead-form--passos .lead-passo__tit { font-size: 1.4rem; }
  .lead-form--passos .lead-passo__micro { margin-bottom: .7rem; font-size: 1rem; }
  .lead-form--passos .lead-chips { gap: .4rem; }
  .lead-form--passos .lead-chip span { min-height: 44px; padding: .3rem .5rem; font-size: 1rem; }
  .lead-form--passos .lead-campo { margin-top: .7rem; }
  .lead-form--passos .tp-carta .lead-campo > label, .lead-form--passos .lead-campo > label, .lead-form--passos .lead-grupo > legend { font-size: 1rem; margin-bottom: .3rem; }
  .lead-form--passos select { min-height: 44px; padding-block: .4rem; }
  .lead-form--passos textarea { min-height: 3.6rem; }
  .lead-form--passos .lead-grupo { margin-bottom: .7rem; }
  .lead-form--passos .tp-passos { margin-bottom: .8rem; }
  .lead-form--passos .lead-nav { margin-top: .8rem; }
  .lead-form--passos .tp-carta__campos { gap: .6rem 1rem; }
  .lead-form--passos .field__error { min-height: 0; }
  .lead-form--passos.tp-carta input, .lead-form--passos.tp-carta select, .lead-form--passos.tp-carta textarea { min-height: 44px; padding-block: .35rem; }
  .lead-form--passos.tp-carta textarea { min-height: 3.6rem; }
  .lead-form--passos .tp-carta__campos label, .lead-form--passos.tp-carta label { margin-bottom: .15rem; font-size: 1rem; }
  .lead-form--passos .tp-passos li:not(.is-atual) .tp-passos__t { display: none; }
  .lead-form--passos .tp-passos li { padding-bottom: .3rem; }
  .lead-form--passos .lead-chips--urg .lead-chip span { font-size: 1rem; padding-inline: .25rem; }
  .lead-form--passos .lead-grupo .field__hint { display: none; }
  .lead-form--passos .lead-form__aceite { margin: .6rem 0 0; padding: .6rem .8rem; }
  .lead-form--passos .lead-form__criterio { margin-top: .6rem; font-size: 1rem; }
}
.lead-form:not([data-passo-atual="3"]).lead-form--passos .lead-form__criterio { display: none; }
/* o voltar-ao-topo e o botão do chat não cobrem o Continuar enquanto o formulário está na tela (celular) */
@media (max-width: 900px) { body.lead-form-visivel .back-to-top, body.lead-form-visivel .chat-trigger { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (max-width: 560px) {
  .lead-form--passos .lead-aceite__ok { display: none; }              /* "você já aceitou": a informação não vale 66 px de altura */
  .lead-form--passos .lead-grupo { margin-bottom: .85rem; }
  .lead-form--passos [data-passo="3"] .lead-passo__micro { margin-bottom: .5rem; }
  .lead-form--passos .lead-nav { flex-wrap: nowrap; gap: .5rem; }   /* Voltar e Enviar na mesma linha (eram duas: 61 px a mais) */
  .lead-form--passos .lead-nav .tp-btn { padding-inline: .8rem; font-size: 1rem; }
  .lead-form--passos .lead-nav__enviar, .lead-form--passos .lead-nav__continuar { flex: 1 1 auto; }
}

/* ── Cabeçalho e rodapé do site, no papel ─────────────────────────────────────────────────── */
/* Os componentes do site (cabeçalho, rodapé, chat, botões) leem os tokens --cd-*. Nas páginas do templo eles passam a
   apontar para a paleta da gravura, nos dois temas: sem isso o rodapé ficava metade num sistema, metade no outro (dono, 26/10). */
body.pagina-templo {
  --cd-bg: var(--t-papel); --cd-fg: var(--t-tinta); --cd-card: var(--t-pedra); --cd-card-fg: var(--t-tinta); --cd-popover: var(--t-pedra);
  --cd-border: var(--t-fio-forte); --cd-muted: var(--t-papel-2); --cd-muted-fg: var(--t-tinta-2); --cd-input-bg: var(--t-pedra);
  --cd-primary: var(--roxo-700); --cd-primary-fg: var(--pergaminho-100); --cd-good: var(--verde-600);
}
html.dark body.pagina-templo { --cd-primary: var(--roxo-300); --cd-primary-fg: var(--indigo-950); --cd-good: var(--verde-300); }
.pagina-templo .site-footer { background: var(--t-papel-2); color: var(--t-tinta); border-top: 1px solid var(--t-fio-forte);
  transition: background-color var(--t-troca) var(--t-ease), color var(--t-troca) var(--t-ease), border-color var(--t-troca) var(--t-ease); }

/* ── Celular ───────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tp-parada { grid-template-columns: 1fr; }
  .tp-parada__cab { position: static; }
  .tp-pedras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-tabuas, .tp-inscricoes { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tp-pedras { grid-template-columns: 1fr; }
  .tp-carta__campos { grid-template-columns: 1fr; }
  .tp-faq summary { grid-template-columns: 2.2rem 1fr 1.2rem; }
  .tp-faq__item p { margin-left: 3rem; }
  .tp-indice__nome { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-friso__faixa { animation: none; flex-wrap: wrap; width: auto; }
  .tp-friso__trilha + .tp-friso__trilha { display: none; }
  .tp-emblema, .tp-emblema img, body.pagina-templo, .tp-secao { transition: none; }
}

/* ── O botão do chat só aparece depois da entrada ─────────────────────────────────────────
   No herói ele cobria a cena e, ao surgir sob o cursor, tirava o mouse do palco: o paralaxe saltava. Só nas
   páginas com herói (`tem-heroi`); o JS do herói põe `heroi-passou` no body quando a entrada fica para trás. */
.pagina-templo .chat-trigger { transition: opacity .5s var(--t-saida), transform .5s var(--t-saida), visibility .5s; }
body.tem-heroi:not(.heroi-passou) .chat-trigger { opacity: 0; visibility: hidden; transform: translateY(18px) scale(.96); pointer-events: none; }

/* ══ Rodada do dono (26/10, 2ª revisão) ════════════════════════════════════════════════════════════════
   "A arte uns 85%; o restante do site com as cores mais vivas." A gravura fica nos tons dela; fora dela o roxo e o
   verde ganham croma (conferido: roxo vivo no papel 5,5, branco nele 6,8; à noite roxo 8,2 e verde 10,5).
   Cartões e formulário saem do "discreto": fundo próprio, borda com cor, sombra e um fio de acento em cima. */
:root {
  --t-vivo-roxo: #5B3FD1; --t-vivo-verde: #167A57;
  --t-cartao: #FBF8F1;
  --t-acento: var(--t-vivo-roxo);
  --t-acento-desenho: var(--t-vivo-roxo);
  --t-acento-2-desenho: var(--t-vivo-verde);
}
html.dark {
  --t-vivo-roxo: #B5A8FF; --t-vivo-verde: #5EE0B0;
  --t-cartao: #20234A;
  --t-acento: var(--t-vivo-verde);
  --t-acento-desenho: var(--t-vivo-verde);
  --t-acento-2: var(--t-vivo-roxo);
  --t-acento-2-desenho: var(--t-vivo-roxo);
}
body.pagina-templo { --cd-primary: var(--t-vivo-roxo); --cd-primary-fg: #fff; --cd-good: var(--t-vivo-verde); }
html.dark body.pagina-templo { --cd-primary: var(--t-vivo-roxo); --cd-primary-fg: var(--indigo-950); --cd-good: var(--t-vivo-verde); }

/* botão principal no roxo vivo */
.pagina-templo .tp-btn--main { background: var(--t-vivo-roxo); border-color: var(--t-vivo-roxo); color: #fff; }
html.dark .pagina-templo .tp-btn--main { color: var(--indigo-950); }
.pagina-templo .tp-btn--main:hover { background: var(--t-tinta); border-color: var(--t-tinta); color: var(--t-papel); }

/* as seções oficiais (vitrine, credenciais, por que agora, soluções) no tipo e no papel do templo */
.pagina-templo .section-fx { background-color: transparent; }
.pagina-templo .section-head h2 { font-family: var(--t-serifa); font-weight: 400; letter-spacing: -.01em; }
.pagina-templo .section-head h2 em { font-style: italic; color: var(--t-acento); }
.pagina-templo .section-head__eyebrow { color: var(--t-acento); }

/* cartões com presença: pedra, inscrição, carta, pergunta */
.tp-pedra, .tp-inscricao, .tp-carta {
  background: var(--t-cartao);
  border: 1px solid color-mix(in srgb, var(--t-acento) 30%, var(--t-fio-forte));
  border-top: 3px solid var(--t-acento);
  box-shadow: 0 18px 40px -26px rgba(37, 40, 74, .45);
  transition: transform .35s var(--t-saida), box-shadow .35s var(--t-saida), background-color var(--t-troca) var(--t-ease);
}
.tp-inscricao { box-shadow: 0 18px 40px -26px rgba(37, 40, 74, .45), inset 0 0 0 6px var(--t-cartao), inset 0 0 0 7px var(--t-fio); }
@media (hover: hover) and (pointer: fine) { .tp-pedra:hover, .tp-inscricao:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -26px rgba(37, 40, 74, .55); } }
html.dark .tp-pedra, html.dark .tp-inscricao, html.dark .tp-carta { box-shadow: 0 18px 44px -24px rgba(0, 0, 0, .7); }
.tp-pedra__ferramenta { stroke: var(--t-vivo-verde); }
.tp-pedra__num { color: color-mix(in srgb, var(--t-acento) 68%, transparent); }
.tp-pedra::before { display: none; }

/* formulário: campos com caixa própria (antes era só um fio embaixo) */
.tp-carta input, .tp-carta select, .tp-carta textarea {
  padding: .75rem .9rem; border: 1px solid var(--t-fio-forte); border-radius: 4px;
  background: color-mix(in srgb, var(--t-papel) 55%, var(--t-cartao));
}
.tp-carta input:focus, .tp-carta select:focus, .tp-carta textarea:focus {
  border-color: var(--t-vivo-roxo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-vivo-roxo) 22%, transparent); background: var(--t-cartao);
}
html.dark .tp-carta select option { color: var(--pergaminho-200); background: var(--indigo-950); }

/* FAQ: a pergunta aberta ganha o acento */
.tp-faq__item[open] summary { color: var(--t-acento); }

/* o rodapé no MESMO papel da página (o tom alternado o fazia parecer de outro site) */
.pagina-templo .site-footer { background: var(--t-papel); }

/* sem a malha de linhas das seções oficiais (dono, 26/10: "essa imagem de fundo em linhas, remover") */
.pagina-templo .section-fx::before { display: none; }

/* ── O cartão enxuto do templo dentro da vitrine oficial (o desenho da linha e das paradas é o oficial) ── */
.vitrine--templo .tp-entrega { margin-top: 1rem; }
.vitrine--templo .tp-entrega__gravura { position: relative; overflow: hidden; }
.vitrine--templo .tp-entrega__gravura img { filter: grayscale(1) contrast(1.05); transition: filter .5s var(--t-saida), transform .6s var(--t-saida); }
/* o véu da identidade: a capa em cinza com a cor da casa por cima (mesma ideia do overlay da vitrine oficial) */
.vitrine--templo .tp-entrega__gravura::after {
  content: ""; position: absolute; inset: .55rem; pointer-events: none; mix-blend-mode: color;
  background: linear-gradient(150deg, var(--t-vivo-roxo), color-mix(in srgb, var(--t-vivo-roxo) 55%, var(--t-vivo-verde)));
  opacity: .85; transition: opacity .5s var(--t-saida);
}
@media (hover: hover) and (pointer: fine) { .vitrine--templo .tp-entrega:hover .tp-entrega__gravura img { filter: none; transform: scale(1.03); } }
.vitrine--templo .tp-entrega:hover .tp-entrega__gravura::after { opacity: 0; }
html.dark .vitrine--templo .tp-entrega__gravura img { filter: grayscale(1) brightness(.8) contrast(1.08); }
.vitrine--templo .tp-entrega h4 { font-size: 1.15rem; }
/* a conversa do assistente: duas falas curtas, o cartão inteiro abre o chat */
.vitrine--templo .tp-entrega__conversa {
  display: grid; gap: .55rem; width: 100%; padding: 1rem; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--t-cartao); border: 1px solid color-mix(in srgb, var(--t-acento) 30%, var(--t-fio-forte)); border-radius: 0;
}
.vitrine--templo .tp-entrega__fala { display: block; max-width: 88%; padding: .5rem .75rem; font-size: 1rem; line-height: 1.4;
  background: color-mix(in srgb, var(--t-vivo-roxo) 10%, var(--t-cartao)); border-radius: 12px 12px 12px 3px; }
.vitrine--templo .tp-entrega__fala--cliente { justify-self: end; background: color-mix(in srgb, var(--t-vivo-verde) 12%, var(--t-cartao)); border-radius: 12px 12px 3px 12px; }
.vitrine--templo .tp-entrega__conversa:hover { border-color: var(--t-acento); }
.vitrine--templo .tp-entrega__conversa:focus-visible { outline: 2px solid var(--t-acento-2); outline-offset: 3px; }

/* ── A colunata com o desenho da home oficial: a linha pontilhada que se desenha com a rolagem (aqui na vertical,
   ligando as paradas), o nó de cada parada que se preenche e o numeral que acende quando ela chega. ── */
.tp-colunata { position: relative; padding-left: clamp(2rem, 4vw, 3.2rem); }
.tp-colunata::before {
  content: ""; position: absolute; left: .55rem; top: 1.4rem; bottom: 1.4rem; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--t-vivo-roxo) 0 3px, transparent 3px 8px);
  transform-origin: top;
}
.tp-parada { position: relative; }
.tp-parada::before {   /* o nó */
  content: ""; position: absolute; left: calc(-1 * clamp(2rem, 4vw, 3.2rem) + .55rem - 7px); top: calc(clamp(1.5rem, 3vw, 2.2rem) + 1.1rem);
  width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--t-vivo-roxo); background: var(--t-vivo-roxo);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tp-colunata::before { animation: tpLinhaDesce linear both; animation-timeline: view(); animation-range: entry 10% exit 60%; }
    .tp-parada::before { animation: tpNoAcende linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }
    .tp-parada__num { animation: tpNumAcende linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }
  }
}
@keyframes tpLinhaDesce { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tpNoAcende { from { background: var(--t-papel); transform: scale(.7); } to { background: var(--t-vivo-roxo); transform: scale(1); } }
@keyframes tpNumAcende { from { color: color-mix(in srgb, var(--t-vivo-roxo) 22%, transparent); } to { color: var(--t-vivo-roxo); } }
.tp-parada__num { color: var(--t-vivo-roxo); font-variant-numeric: lining-nums; }
@media (max-width: 900px) {
  .tp-parada::before { top: 1.6rem; }
}

/* ── 3ª rodada do dono (26/10) ─────────────────────────────────────────────────────────────────────────── */
/* o cabeçalho das seções oficiais no modelo novo: sem o filete vertical, com o tipo do templo */
.pagina-templo .section-head.tp-cab { padding-left: 0; }
.pagina-templo .section-head.tp-cab::before { display: none; }
.pagina-templo .section-head.tp-cab h2 { font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.04; }
/* sem as bolas de cor (o brilho ambiente roxo e verde) atrás das seções oficiais */
.pagina-templo .section-fx::after { display: none; }
/* Prova de trabalho: volta a placa de pedra de antes (o dono preferiu sem o fio de acento e a sombra) */
.tp-inscricao, .tp-inscricao:hover {
  background: var(--t-pedra); border: 1px solid var(--t-fio-forte); transform: none;
  box-shadow: inset 0 0 0 6px var(--t-pedra), inset 0 0 0 7px var(--t-fio);
}

/* ══ Pórtico: a cabeça das páginas internas (spec 007, tp_portico() em includes/templo/componentes.php) ══════════
   Uma peça só da gravura por tela (DIRECAO §4): o céu em CSS que anoitece com o tema, o traço do céu da arte e a
   faixa da paisagem embaixo, que se desfaz no papel da página. Sem colunas, sem paralaxe, nada anima sozinho: a
   página interna é sobre o conteúdo; a cena só diz "é o mesmo templo". O cabeçalho fica por cima, como na home. */
.pagina-templo.tem-portico .site-header { position: fixed; inset-inline: 0; top: 0; border-bottom: 0 solid transparent; box-shadow: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--t-papel) 72%, transparent), transparent);
  -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color .5s, border-color .5s, backdrop-filter .5s; }
.pagina-templo.tem-portico .site-header.is-scrolled { background: color-mix(in srgb, var(--t-papel) 90%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--t-tinta) 12%, transparent); }
.pagina-templo.tem-portico main { padding-top: 0 !important; }

.tp-portico {
  --paisagem-l: max(100%, 62rem);
  position: relative; isolation: isolate; overflow: clip; display: flex; align-items: flex-start;
  min-height: clamp(31rem, 74svh, 47rem);
  padding-top: clamp(7.5rem, 15vh, 10.5rem); padding-bottom: clamp(10rem, 21vw, 17rem);
}
.tp-portico--compacto { min-height: clamp(25rem, 56svh, 35rem); padding-bottom: clamp(7rem, 14vw, 11rem); }
.tp-portico__ceu { position: absolute; inset: 0; z-index: -3;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .4  0 0 0 0 .32  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, #e9e2d3, #e8e1d2 55%, #e4ddcf); }
.tp-portico__ceu::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-troca) var(--t-ease);
  background: radial-gradient(60% 50% at 52% 22%, rgba(120, 125, 200, .22), transparent 70%),
    linear-gradient(to bottom, #121430 0%, #1c1f48 40%, #2f3166 72%, #4b4880 100%); }
html.dark .tp-portico__ceu::before { opacity: 1; }
.tp-portico__traco, .tp-portico__paisagem { position: absolute; max-width: none; height: auto; pointer-events: none; user-select: none;
  width: var(--paisagem-l); left: calc((100% - var(--paisagem-l)) * var(--foco)); }
/* o traço do céu: o de cima da arte, alinhado à paisagem; de noite clareia, como carta celeste */
.tp-portico__traco { z-index: -2; bottom: 0; opacity: .7; transition: filter var(--t-troca) var(--t-ease), opacity var(--t-troca);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%); mask-image: linear-gradient(to bottom, transparent, #000 30%); }
html.dark .tp-portico__traco { filter: invert(1) hue-rotate(180deg) brightness(.95); opacity: .4; }
/* a paisagem: a parte de baixo da arte (o parapeito) fica abaixo da dobra; o pé se desfaz no papel da página */
.tp-portico__paisagem { z-index: -1; bottom: calc(var(--paisagem-l) * -0.075);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 96%); mask-image: linear-gradient(to bottom, #000 72%, transparent 96%);
  transition: filter var(--t-troca) var(--t-ease); }
html.dark .tp-portico__paisagem { filter: brightness(.5) saturate(.85); }
/* o texto fica no céu liso; um véu da cor do céu atrás apaga o traço que passaria pela letra */
.tp-portico__texto { position: relative; }
.tp-portico__texto::before { content: ""; position: absolute; z-index: -1; inset: -3rem -4rem -2rem -5rem; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, #e9e2d3 96%, transparent) 55%, transparent); transition: opacity var(--t-troca); }
html.dark .tp-portico__texto::before { background: radial-gradient(closest-side, color-mix(in srgb, #1a1d44 85%, transparent), transparent); }
.tp-portico h1 { font-family: var(--t-serifa); font-weight: 600; font-size: clamp(2.3rem, 4.6vw, 4.2rem); line-height: 1;
  letter-spacing: -.01em; margin: 0 0 1rem; max-width: 18ch; text-wrap: balance; color: var(--t-tinta); }
.tp-portico h1 em { font-style: italic; color: var(--t-acento); }
.tp-portico .tp-lede { max-width: 40rem; }
.tp-portico__texto > :last-child { margin-bottom: 0; }
.tp-portico .tp-acoes { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
/* a trilha (onde você está): versalete pequeno, o acento só no que é link */
.tp-trilha ol { display: flex; flex-wrap: wrap; gap: .25rem .6rem; list-style: none; margin: 0 0 1.4rem; padding: 0;
  font-size: 1rem; letter-spacing: .03em; color: var(--t-tinta-2); }
.tp-trilha li + li::before { content: "·"; margin-right: .6rem; color: var(--t-tinta-2); }
.tp-trilha a { color: var(--t-acento); text-decoration: none; }
.tp-trilha a:hover { text-decoration: underline; text-underline-offset: .2em; }
.tp-trilha a:focus-visible { outline: 2px solid var(--t-acento-2); outline-offset: 3px; }
@media (max-width: 700px) {
  .tp-portico { --paisagem-l: max(100%, 46rem); min-height: auto; padding-top: 6.5rem; padding-bottom: clamp(11rem, 52vw, 15rem); }
  .tp-portico--compacto { padding-bottom: clamp(8rem, 40vw, 11rem); }
}
/* o sol e a lua da arte no pórtico (dono, 27/10): no céu liso da direita, onde o texto não chega. De dia o sol; de
   noite ele desce e some, e a lua acende no mesmo lugar do disco — a mesma troca da home, sem o giro do disco. */
.tp-portico__astros { position: absolute; z-index: -2; right: clamp(1rem, 11vw, 12rem); top: clamp(5.5rem, 15%, 9rem);
  width: clamp(12rem, 21vw, 19rem); aspect-ratio: 460 / 360; pointer-events: none; }
.tp-portico__astros img { position: absolute; max-width: none; height: auto; transition: opacity var(--t-troca) var(--t-ease), transform var(--t-troca) var(--t-ease); }
.tp-portico__sol { inset: 0; width: 100%; }
.tp-portico__lua { width: 21%; left: 50%; top: 38.9%; transform: translate(-50%, -30%); opacity: 0;
  filter: drop-shadow(0 0 1.4rem rgba(232, 225, 210, .38)); }
html.dark .tp-portico__sol { opacity: 0; transform: translateY(12%); }
html.dark .tp-portico__lua { opacity: 1; transform: translate(-50%, -50%); }
@media (max-width: 700px) { .tp-portico__astros { width: 8.5rem; right: -.5rem; top: 4.6rem; } }
@media (prefers-reduced-motion: reduce) { .tp-portico__astros img { transition: none; } }

/* Portão UI volta 1 (P1-02, P1-03). A borda de baixo do pórtico era uma linha dura contra o papel (forte à noite: o fim do
   degradê do céu contra o papel índigo): agora tudo se desfaz no papel da página nos últimos 22%. E de dia o texto
   secundário (trilha, rótulo, abertura, metadados) media 3,5 a 4,5:1 sobre o céu e o traço: tinta mais funda dentro do pórtico. */
.tp-portico::after { content: ""; position: absolute; inset: auto 0 0 0; height: 22%; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--t-papel)); }
html:not(.dark) .tp-portico { --t-tinta-2: var(--indigo-900); }
/* Faixas que rolam sozinhas (credenciais, soluções): param no hover e no foco, viram grade em movimento reduzido e param fora da
   tela (.is-pausado, posta pelo IntersectionObserver de tp_oficial); não há botão de pausa (dono, 06/11). O contraste das credenciais:
   a opacidade .62 da home oficial ficava em 2,6–3,7:1 sobre o papel do templo (portão UI, P1-06). */
.is-pausado, .is-pausado * { animation-play-state: paused !important; }
.pagina-templo .cred { opacity: 1; color: var(--t-tinta-2); }
.pagina-templo .cred__name, .pagina-templo .cred__wordmark { color: var(--t-tinta-2); }
/* Menu do celular e painel do chat FECHADOS saíam na ordem do Tab (em 390 a 6ª parada era "Serviços" do menu fechado;
   portão UI, P1-08). visibility tira do Tab e do leitor; o atraso deixa a animação de fechar terminar antes de sumir. */
.nav-mobile { visibility: hidden;
  transition: max-height var(--dur-base, .3s) var(--ease-in-out, ease), border-color var(--dur-base, .3s) var(--ease-out, ease), visibility 0s linear var(--dur-base, .3s); }
.nav-mobile.is-open { visibility: visible; transition-delay: 0s; }
.chat-panel { visibility: hidden;
  transition: transform var(--dur-base, .3s) var(--ease-out, ease), opacity var(--dur-base, .3s) var(--ease-out, ease), visibility 0s linear var(--dur-base, .3s); }
.chat-panel.is-open { visibility: visible; transition-delay: 0s; }
/* O rodapé no idioma do templo (portão UI, P1-11): títulos no versalete da casa em vez do mono, a marca-fantasma no tipo
   do templo, o contêiner na mesma largura das seções (estava 8 px deslocado: era o .container do Bootstrap). */
.pagina-templo .site-footer__conteudo { width: min(1200px, 100% - 2 * clamp(1rem, 4vw, 3rem)); max-width: none; margin-inline: auto; padding-inline: 0; }
.pagina-templo .site-footer h2 { font-family: var(--t-serifa); font-size: 1rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--t-tinta); margin-bottom: 1rem; }
.pagina-templo .site-footer p, .pagina-templo .site-footer__links a { font-family: var(--t-texto); color: var(--t-tinta-2); }
.pagina-templo .site-footer__links a:hover { color: var(--t-acento); }
.pagina-templo .site-footer__bottom, .pagina-templo .site-footer__bottom * { font-family: var(--t-texto); letter-spacing: 0; text-transform: none; }
.pagina-templo .site-footer__bottom { color: var(--t-tinta-2); border-top-color: var(--t-fio-forte); }
.pagina-templo .site-footer__marca-fantasma { font-family: var(--t-serifa); font-weight: 600; letter-spacing: -.01em; color: var(--t-tinta); }

/* Portão UI, P2: alvos de toque de 44 px onde o dedo é o ponteiro (os links de texto mediam 27 px; os do rodapé, 24),
   e as partes do navegador na paleta (cursor de texto, controles, barra de rolagem). */
@media (pointer: coarse) {
  .pagina-templo .tp-link, .pagina-templo .site-footer__links a, .pagina-templo .site-footer__bottom a, .chat-panel a {
    display: inline-flex; align-items: center; min-height: 44px; }
}
.pagina-templo { caret-color: var(--t-acento); accent-color: var(--t-acento); scrollbar-color: var(--t-fio-forte) var(--t-papel); }
/* O banner de cookies no tipo da casa: o título e os botões vinham em JetBrains Mono (sistema antigo, sem preload), e a
   troca de fonte mudava a altura do banner fixo na 1ª visita — CLS de 0,07 medido pelo conferir-heroi, que agora diz
   quem se mexeu. Com a Ysabeau (já pré-carregada pela moldura) e a Cardo, nada reflui. */
.pagina-templo .cookie-banner, .pagina-templo .cookie-banner * { font-family: var(--t-texto); }
/* Duas redações do mesmo aviso (specs/011-caminho-curto/AVISO-LGPD.md §3): a curta no celular (2 linhas), a explícita no computador */
.cookie-banner .ck-curto { display: none; }
.cookie-banner .ck-longo { display: inline; }
.cookie-banner__corpo p { margin: 0; }
.pagina-templo .cookie-banner__title { text-transform: uppercase; }
.pagina-templo .cookie-banner :is(h2, h3, strong, .cookie-banner__title, [class*="titulo"], [class*="title"]) {
  font-family: var(--t-serifa); letter-spacing: .12em; }
/* O espaço da barra de rolagem reservado desde o 1º quadro: quando ela aparecia depois (página ainda curta), a largura
   útil mudava 15 px e tudo o que é fixo (cabeçalho, chat, banner) andava de lado junto — CLS de 0,07 no Edge. */
html:has(> body.pagina-templo) { scrollbar-gutter: stable; }

/* ── Portão UI, volta 2 ─────────────────────────────────────────────────────────────────────────────────────
   A: o banner de cookies saía por translateY e seguia focável (3 paradas de Tab invisíveis depois de aceitar). */
.cookie-banner:not(.is-visible) { visibility: hidden; }
/* B: o link da trilha de dia ficava em 3,7–4,5:1 sobre o céu: um degrau mais fundo */
html:not(.dark) .tp-trilha a { color: var(--roxo-800); }
/* C: de dia sobrava um degrau na borda de baixo do pórtico; o mesmo papel com grão e máscara que o case usa */
.tp-portico::after { background: var(--t-papel) var(--t-grao); transition: background-color var(--t-troca) var(--t-ease);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000); mask-image: linear-gradient(to bottom, transparent, #000); }
html.dark .tp-portico::after { background-blend-mode: multiply; }
/* D: botões do sistema antigo que se mexiam no hover também no toque */
@media not ((hover: hover) and (pointer: fine)) {
  .btn-primary:hover, .theme-toggle:hover { transform: none; }
}
/* E: placeholder do formulário a 3,5:1 */
.tp-carta ::placeholder { color: var(--t-tinta-2); opacity: .9; }
/* Alvos de toque de 44 px no cabeçalho e no rodapé (qa-responsivo antes da virada para main, 03/11): tema e menu tinham
   40, o logo 32 de altura, o ícone de e-mail do rodapé 36, o botão pequeno 43, o link da LGPD 21. */
.pagina-templo .theme-toggle, .pagina-templo .menu-toggle { width: 44px; height: 44px; }
.pagina-templo .site-header .brand, .pagina-templo .site-footer .brand { min-height: 44px; display: inline-flex; align-items: center; }
.pagina-templo .site-footer__social a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.pagina-templo .btn-sm { min-height: 44px; }
.pagina-templo .site-footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }


/* ── Portão UI, volta 3 ─────────────────────────────────────────────────────────────────────────────────────
   A2 (WCAG 2.4.11): com o banner de cookies aberto, o Tab parava em elementos cobertos por ele; o scroll do foco agora
   deixa a altura do banner livre embaixo. */
html:has(> body.pagina-templo) { scroll-padding-bottom: calc(var(--barra-h, 0px) + 1rem); }
/* D: três hovers do sistema antigo que ainda moviam no toque */
@media not ((hover: hover) and (pointer: fine)) {
  .nav-mobile__list a:hover svg, .chat-chip:hover svg, .chat-panel__send:hover { transform: none; }
}
/* G: placeholder do chat no cinza padrão (3,7:1) */
[data-chat-input]::placeholder { color: var(--t-tinta-2); opacity: .9; }
/* CLS de /servicos: o traço do céu mudava de altura ao chegar; a proporção da arte reservada antes */
.tp-portico__traco, .tp-portico__paisagem { aspect-ratio: 1807 / 870; }
/* Animações infinitas que pintavam a cada quadro sem ninguém ver (medido a 390@3x antes da virada para main):
   o anel do botão do chat pulsa três vezes e para; o avatar do painel fechado não anima; a faixa ganha camada própria. */
.pagina-templo .chat-trigger__ring { animation-iteration-count: 3; }
.chat-panel:not(.is-open) * { animation-play-state: paused !important; }
.cred-marquee__track, .solucoes__track { will-change: transform; }

/* ══ A SOLEIRA (specs/011-caminho-curto, conceito A, escolhido pelo dono em 06/11/2026) ══════════════════════════════════════
   A pedra da porta do templo, sempre sob o polegar, SÓ no celular (até 899 px, a mesma largura em que o menu vira painel):
   as duas portas ("Perguntar" e "Pedir orçamento"), o aviso de privacidade no mesmo lugar (primeiro estado da mesma peça) e o
   voltar-ao-topo como pedra-chave sobre a borda de cima. No computador nada disso aparece: ficam o gatilho do chat, o
   voltar-ao-topo e o CTA do cabeçalho de sempre, e do aviso só mudam o texto e os botões.
   Medidas a 390 px: aviso 116 px; portas 60 px + safe-area; pedra-chave 44 px a 8 px acima da borda.
   O aviso compacto vem do parecer AVISO-LGPD.md: o par Recusar/Aceitar tem o MESMO tamanho e o MESMO tratamento (a ANPD trata
   destaque só no "Aceitar" como padrão manipulativo), e o comentário antigo "consentimento não se encurta" deixou de valer: o que
   não se encurta é o conteúdo mínimo (as duas finalidades, a recusa na 1ª camada, o link e a revogação), não a contagem de palavras. */
.soleira { display: none; }
.pagina-templo .cookie-banner__btn {
  min-height: 44px; padding: .3rem 1.1rem; background: transparent; color: var(--t-acento); border: 2px solid var(--t-acento);
  border-radius: 0; font-weight: 600; font-size: 1rem; line-height: 1.2; cursor: pointer; box-shadow: none;
}
.pagina-templo .cookie-banner__btn:hover { background: color-mix(in srgb, var(--t-acento) 10%, transparent); transform: none; }
.pagina-templo .cookie-banner__btn:focus-visible, .soleira__porta:focus-visible { outline: 3px solid var(--t-acento); outline-offset: 2px; }
.pagina-templo .cookie-banner p a { color: var(--t-acento); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__prefs { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; font: inherit;
  color: var(--cd-muted-fg); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.site-footer__prefs:hover { color: var(--cd-primary); }

@media (max-width: 899px) {
  /* ── o aviso, na soleira ── */
  .cookie-banner .ck-curto { display: inline; }
  .cookie-banner .ck-longo { display: none; }
  .pagina-templo .cookie-banner {
    left: 0; right: 0; bottom: 0; max-width: none; margin: 0; max-height: none; overflow: visible; gap: 8px;
    padding: 9px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--t-papel); border: 0; border-top: 1px solid var(--t-fio-forte); border-radius: 0; box-shadow: none;
  }
  .pagina-templo .cookie-banner::before { content: ""; position: absolute; left: 25%; right: 25%; top: 3px; height: 1px; background: var(--t-fio-forte); opacity: .6; }
  .pagina-templo .cookie-banner .cookie-banner__title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pagina-templo .cookie-banner p { margin: 0; font-size: 16px; line-height: 22px; color: var(--t-tinta); }
  .pagina-templo .cookie-banner__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex-wrap: nowrap; }
  .pagina-templo .cookie-banner__actions > * { width: 100%; flex: none; }
  html.teclado-aberto .cookie-banner { visibility: hidden; transition: none; }

  /* ── as duas portas ── */
  .soleira {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
    display: grid; grid-template-columns: 1fr 1.15fr; gap: 8px;
    padding: 7px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--t-papel); border-top: 1px solid var(--t-fio-forte);
    transition: transform .24s var(--t-saida), visibility 0s;
  }
  .soleira::before { content: ""; position: absolute; left: 25%; right: 25%; top: 3px; height: 1px; background: var(--t-fio-forte); opacity: .6; pointer-events: none; }
  .soleira__porta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 8px;
    font-family: var(--t-texto); font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
    border: 1.5px solid var(--t-fio-forte); border-radius: 0; -webkit-tap-highlight-color: transparent;
  }
  .soleira__porta--perguntar { background: var(--t-papel); color: var(--t-tinta); }
  .soleira__porta--pedir { background: var(--t-acento); border-color: var(--t-acento); color: var(--t-papel); }
  .soleira__pomba { flex: none; width: 28px; height: 28px; display: inline-flex; }
  /* a barra descansa embaixo e sai da frente: formulário à vista desce (240 ms entrando, 180 ms saindo); herói da home, menu,
     chat e teclado a escondem na hora, para não boiar sobre o teclado do iOS nem cobrir o que a pessoa está fazendo */
  body.lead-form-visivel .soleira, body.tem-heroi:not(.heroi-passou) .soleira {
    transform: translateY(100%); visibility: hidden; transition: transform .18s var(--t-saida), visibility 0s .18s; }
  html.soleira-off .soleira, body.has-menu-open .soleira { transform: translateY(100%); visibility: hidden; transition: none; }
  .pagina-chatbot .soleira, .pagina-recebido .soleira { display: none; }

  /* o gatilho flutuante do chat cede o lugar à "Perguntar"; o painel desce para o pé */
  .pagina-templo:not(.pagina-chatbot) .chat-trigger { display: none; }
  .pagina-templo .chat-panel { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 6rem); }

  /* ── o voltar-ao-topo vira a pedra-chave: 44 px a 8 px acima da soleira, no meio, com o anel de nove marcas que mede a página ── */
  html .pagina-templo .back-to-top {
    left: calc(50% - 22px); right: auto; bottom: calc(var(--barra-h, 0px) + 8px); z-index: 240;
    background: var(--t-pedra); color: var(--t-tinta); border: 1px solid var(--t-fio-forte); box-shadow: none;
  }
  html .pagina-templo .back-to-top .back-to-top__anel { opacity: 1; color: var(--t-acento); animation: none; }
  .pagina-templo .back-to-top__anel path { opacity: .22; transition: opacity .2s; }
  .pagina-templo .back-to-top__anel path.is-aceso { opacity: 1; }
  html:has(.cookie-banner.is-visible) .back-to-top, html.soleira-off .back-to-top, body.has-menu-open .back-to-top,
  body.tem-heroi:not(.heroi-passou) .back-to-top { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  /* entrada da pedra-chave: o anel gira uma volta e para */
  .pagina-templo .back-to-top.is-visible .back-to-top__anel { animation: soleiraAnel .9s var(--t-saida) 1; }
}
@keyframes soleiraAnel { from { transform: rotate(-120deg); } to { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) {
  .soleira, body.lead-form-visivel .soleira { transition: none; }
}

/* ══ Portão de UI da 011, rodada 1 (specs/011-caminho-curto/portao-ui-1.md) ═══════════════════════════════════════════════ */
/* P1-02: com o painel do chat aberto o aviso sai da frente (os links do rodapé do painel ficavam atrás dele e o aceite era pedido
   duas vezes: o cartão "Aceitar e conversar" já grava o mesmo aceite). Volta quando o painel fecha, se a decisão continua pendente. */
html.chat-aberto .cookie-banner { visibility: hidden; transition: none; }
/* P2-01/P2-08: o cabeçalho fixo tem 77 px; sem margem o alvo pousava com o título escondido sob ele */
#cookies { scroll-margin-top: 6rem; }
#exemplos { scroll-margin-top: 2.75rem; }
#cases { scroll-margin-top: 6rem; }
/* P2-06: o par Recusar/Aceitar do computador com a mesma largura */
.pagina-templo .cookie-banner__btn { min-width: 7.5rem; }

@media (max-width: 899px) {
  /* P1-01: a soleira é o "segundo estado" da mesma peça: enquanto o aviso está à vista ela não existe (nem para o toque nem para o Tab) */
  html:has(.cookie-banner.is-visible) .soleira { visibility: hidden; transition: none; }
  /* P2-07: a pomba da barra é a do widget (desenho cheio, 40 x 44), sem aumentar a porta */
  .soleira__pomba { width: 36px; height: 40px; align-items: center; justify-content: center; }
  .soleira__pomba .av { transform: scale(.88); transform-origin: center; }
  .soleira__porta--perguntar { padding-left: 4px; }
  /* P2-02: o fim do rodapé não fica sob a pedra-chave (44 px + 8 px de vão) */
  .pagina-templo:not(.pagina-chatbot):not(.pagina-recebido) .site-footer::after { content: ""; display: block; height: 3.5rem; }
}
/* P2-05: de 600 a 899 px a soleira não estica: uma pedra centrada de 34 rem, não a largura da tela */
@media (min-width: 600px) and (max-width: 899px) {
  .soleira { left: 0; right: 0; max-width: 34rem; margin-inline: auto; border: 1px solid var(--t-fio-forte); border-bottom: 0; }
  .soleira::before { left: 25%; right: 25%; }
}
/* P2-01: a tabela de cookies vira um cartão por linha no celular e no tablet (as colunas Duração e Controlador ficavam fora da tela) */
@media (max-width: 899px) {
  #cookies table, #cookies tbody { display: block; overflow: visible; }
  #cookies thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  #cookies tr { display: block; margin: 0 0 1rem; border: 1px solid var(--t-fio-forte); background: color-mix(in srgb, var(--t-pedra) 60%, transparent); }
  #cookies tr > * { display: block; padding: .55rem .9rem; border: 0; border-top: 1px solid var(--t-fio); white-space: normal; }
  #cookies tbody th { border-top: 0; background: var(--t-papel-2); font-size: 1.05rem; }
  #cookies td::before { content: attr(data-rotulo); display: block; font: italic 400 1rem/1.3 var(--t-serifa); color: var(--t-acento); }
  #cookies caption { display: block; margin-bottom: .6rem; text-align: left; font-weight: 600; }
}

/* ── Legibilidade (A4, spec 010 CONCEITOS.md §4.3) ─────────────────────────────────────────
   A Ysabeau Office tem olho baixo (0,42 do corpo): 14 px dela lê como ~11 px. Por isso o texto corrido não desce de 16 px,
   a legenda sobe o peso (a fonte é variável, o traço fino some pequeno) e o rótulo em caixa-alta fica em 15 px (piso 14). */
.pagina-templo :is(.field__hint, .cb-dica, .cb-legenda, .cb-medida-tokens, .cb-status, .lead-form__criterio, .lead-form__retomada,
  .lead-form__consent-note, .lead-passo__micro, .tp-nota, .site-footer__bottom, .cookie-banner p) { font-weight: 460; }

/* QA 011 P2-3: no celular, com o aviso de privacidade aberto, "Continuar" no formulário da home rolava com scroll suave enquanto as
   seções acima (content-visibility:auto) mudavam de altura: o botão Enviar ia parar fora da janela. Enquanto a pessoa usa o
   formulário (foco dentro dele ou já no passo 2/3), as seções ficam com a altura real e a rolagem é seca, como no html.cv-visivel. */
html:has(.lead-form:focus-within, .lead-form[data-passo-atual="2"], .lead-form[data-passo-atual="3"]) { scroll-behavior: auto; }
html:has(.lead-form:focus-within, .lead-form[data-passo-atual="2"], .lead-form[data-passo-atual="3"]) .section-fx { content-visibility: visible; }