/* 20/10 · vida.css · O KIT DE VIDA das páginas de conteúdo D (server/siteD/paginaConteudoD.ts) — esteve no fim do blocos.css
   na 1.ª leva (/tecnologia e /ia) e passa a folha própria porque também a carregam as páginas de negócio (negocioD.ts),
   que não levam o blocos.css. Entra depois das folhas da moldura e antes da folha de cada página. */
/* =====================================================================================================================
   20/10 · O KIT DE VIDA (server/siteD/paginaConteudoD.ts: ecraReal, claro, sobreFoto, faixaChamada, portas).
   O dono: «muito escuras, sem alma… não pode ser só fotos, tem de ter boas motions, killer imagens, design e conversão».
   Ritmo: noite → espuma/areia (folhas claras, encaixadas a 12 px das bordas) → fotografia → noite. Um acento quente, o
   do pôr do sol (âmbar 400 sobre a noite, 700 sobre claro), só em pontos: nunca em texto corrido. Movimento só com
   transform/opacity/clip-path, do motor da d2; com «reduzir movimento» fica tudo à vista e parado (base.css).
   ⚠️ Nas folhas claras nenhuma letra é ciano, nem o ciano 700: o `semazul.js` (regra do dono, «nada de letras azuis»)
   pinta de espuma tudo o que lê como ciano, e numa folha clara a letra desaparecia. As etiquetas vão a tinta, com o ponto quente.
   ===================================================================================================================== */
:root { --vd-espuma: #F1F5F9; --vd-areia: #F4EFE7; --vd-tinta: #0F172A; --vd-texto: #334155; --vd-fraco: #475569;
  --vd-quente: #FBBF24; --vd-quente-e: #B45309; --vd-ciano-e: #0E7490; --vd-inset: clamp(8px, 1vw, 14px); }

/* ---------- esticar à janela dentro de um contentor estreito, com o conteúdo alinhado ao contentor ---------- */
.vd-sangra { margin-inline: calc(50% - 50vw + var(--vd-inset)); padding-inline: calc(50vw - 50% - var(--vd-inset)); }

/* ---------- a folha clara ---------- */
.vd-claro { position: relative; z-index: 1; color: var(--vd-tinta); background: var(--vd-espuma); border-radius: clamp(28px, 3.6vw, 48px);
  padding-block: clamp(56px, 7vw, 112px); box-shadow: 0 -30px 80px -40px rgba(0,0,0,.6); }
.vd-claro:not(.vd-sangra) { margin-inline: var(--vd-inset); }
.vd-areia { background: var(--vd-areia); }
.vd-claro .etq { color: var(--vd-tinta); }
.vd-claro .etq::before { content: ''; display: inline-block; vertical-align: middle; width: 7px; height: 7px; margin: -2px 10px 0 0; border-radius: 50%; background: var(--vd-quente); box-shadow: 0 0 0 4px rgba(251,191,36,.22); }
.vd-claro .h1, .vd-claro .h2, .vd-claro h2, .vd-claro h3, .vd-claro b, .vd-claro strong { color: var(--vd-tinta); }
.vd-claro .lead, .vd-claro p { color: var(--vd-texto); }
.vd-claro .bt-2 { color: var(--vd-tinta); background: transparent; box-shadow: inset 0 0 0 1px rgba(15,23,42,.24); }
.vd-claro .bt-2:hover { background: rgba(15,23,42,.05); }
.vd-claro :focus-visible { outline-color: var(--vd-ciano-e); }
.vd-claro .pg-cartao { color: var(--vd-texto); background: #fff; box-shadow: inset 0 0 0 1px rgba(15,23,42,.07), 0 24px 48px -32px rgba(15,23,42,.35); }
.vd-claro .pg-c-t { color: var(--vd-tinta); }
.vd-claro .pg-c-d, .vd-claro .pg-c-etq { color: var(--vd-fraco); }
.vd-claro .pg-num, .vd-claro .pg-p-n { color: rgba(15,23,42,.28); }
.vd-claro .pg-lista li { color: var(--vd-texto); }
.vd-claro .pg-lista i { background: rgba(4,120,87,.12); color: #047857; }
.vd-claro .pg-c-mais { color: var(--vd-tinta); text-decoration-color: rgba(15,23,42,.3); }
.vd-claro .pg-cartao-l:hover { box-shadow: inset 0 0 0 1px rgba(15,23,42,.14), 0 30px 60px -34px rgba(15,23,42,.45); }
.vd-claro .pg-selo { color: var(--vd-tinta); box-shadow: inset 0 0 0 1px rgba(15,23,42,.22); }

/* ---------- por cima de uma fotografia ---------- */
.vd-sobre { position: relative; isolation: isolate; overflow: hidden; }
.vd-sobre-foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.vd-sobre-m { position: absolute; inset: -10% 0; }
.vd-sobre-m img { width: 100%; height: 100%; object-fit: cover; }
.vd-sobre-foto::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--noite) 0%, rgba(6,14,26,.5) 20%, rgba(6,14,26,.3) 50%, rgba(6,14,26,.62) 82%, var(--noite) 100%); }

/* ---------- a captura real numa moldura (a cena endireita-a ao rolar) ---------- */
.vd-ecra { position: relative; margin: 0; perspective: 1800px; }
.vd-ecra-in { position: relative; transform-origin: 50% 100%; }
.vd-ecra img { display: block; width: 100%; height: auto; }
.vd-ecra-ecra .vd-ecra-in { padding: clamp(6px, .8vw, 12px); border-radius: clamp(16px, 2vw, 26px); background: linear-gradient(180deg, #1B2536, #0B1120);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(255,255,255,.08), 0 70px 120px -50px rgba(0,0,0,.95), 0 30px 60px -40px rgba(8,145,178,.35); }
.vd-ecra-ecra img { border-radius: clamp(10px, 1.3vw, 16px); }
.vd-ecra-janela .vd-ecra-in { overflow: hidden; border-radius: 16px; background: #0B1120;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 50px 90px -40px rgba(0,0,0,.9); }
.vd-ecra-barra { display: flex; gap: 7px; align-items: center; height: 30px; padding: 0 14px; background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.07); }
.vd-ecra-barra i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.22); }
.vd-ecra-telefone { width: min(300px, 70vw); }
.vd-ecra-telefone .vd-ecra-in { padding: 9px; border-radius: 46px; background: #0B1120;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 0 0 5px #111a2b, 0 60px 90px -40px rgba(0,0,0,.95); }
.vd-ecra-telefone img { border-radius: 38px; }
.vd-claro .vd-ecra-janela .vd-ecra-in, .vd-claro .vd-ecra-ecra .vd-ecra-in { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(15,23,42,.1), 0 60px 100px -50px rgba(15,23,42,.6); }

/* ---------- a faixa de chamada: a frase à esquerda, sobre a noite com o calor do pôr do sol; a fotografia à direita ---------- */
.vd-chamada { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); min-height: clamp(520px, 78vh, 760px);
  margin-block: clamp(64px, 8vw, 120px) 0; border-radius: clamp(28px, 3.6vw, 48px); background: var(--sup);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 40px 90px -50px rgba(0,0,0,.9); }
.vd-chamada.vd-sangra { padding-inline: 0; }
.vd-chamada:not(.vd-sangra) { margin-inline: var(--vd-inset); }
.vd-chamada::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 0% 100%, rgba(251,191,36,.20), transparent 70%), radial-gradient(50% 60% at 30% 0%, rgba(8,145,178,.18), transparent 70%); }
.vd-chamada-txt { align-self: center; padding: clamp(48px, 7vw, 96px) clamp(24px, 4vw, 64px) clamp(48px, 7vw, 96px) calc((100vw - min(var(--max), 100vw - 2 * var(--gut))) / 2 - var(--vd-inset)); }
.vd-chamada-foto { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%); mask-image: linear-gradient(90deg, transparent 0%, #000 42%); }
.vd-chamada-m { position: absolute; inset: -6% 0; }
.vd-chamada-m img { width: 100%; height: 100%; object-fit: cover; }
.vd-chamada-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(251,191,36,.12), transparent 40%); }
.vd-chamada-t { margin: 0; max-width: 21ch; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; color: #fff; text-wrap: balance; }
.vd-chamada .pg-ctas { margin-top: 36px; }

/* ---------- as três portas ---------- */
.vd-portas { position: relative; z-index: 1; margin: clamp(64px, 8vw, 112px) var(--vd-inset) 0; padding-block: clamp(48px, 6vw, 88px); border-radius: clamp(28px, 3.6vw, 48px); background: var(--vd-areia); color: var(--vd-tinta); }
.vd-portas .etq { color: var(--vd-tinta); }
.vd-portas .etq::before { content: ''; display: inline-block; vertical-align: middle; width: 7px; height: 7px; margin: -2px 10px 0 0; border-radius: 50%; background: var(--vd-quente); box-shadow: 0 0 0 4px rgba(251,191,36,.22); }
.vd-portas-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vd-porta { position: relative; isolation: isolate; display: flex; align-items: flex-end; gap: 12px; min-height: clamp(320px, 34vw, 460px); padding: 22px; overflow: hidden; border-radius: 24px; color: #fff; text-decoration: none;
  box-shadow: 0 30px 60px -36px rgba(15,23,42,.6); }
.vd-porta-foto { position: absolute; inset: 0; z-index: -1; }
.vd-porta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.vd-porta-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,7,15,0) 35%, rgba(3,7,15,.82) 100%); }
.vd-porta:hover .vd-porta-foto img { transform: scale(1.05); }
.vd-porta-txt { display: grid; gap: 4px; flex: 1; }
.vd-porta-txt b { font-size: var(--t4); line-height: 1.15; letter-spacing: -.02em; }
.vd-porta-txt span { font-size: 15px; line-height: 1.45; color: #E2E8F0; }
.vd-porta .ic { flex: none; width: 44px; height: 44px; border-radius: 9999px; display: grid; place-items: center; background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .3s var(--ease), background-color .3s; }
.vd-porta .ic svg { width: 18px; height: 18px; }
.vd-porta:hover .ic { transform: translateX(3px); background: var(--ciano-f); }
.vd-porta:focus-visible { outline: 3px solid var(--vd-ciano-e); outline-offset: 3px; }

@media (max-width: 860px) {
  .vd-portas-g { grid-template-columns: 1fr; }
  .vd-porta { min-height: 240px; }
  .vd-chamada { grid-template-columns: 1fr; min-height: 0; }
  .vd-chamada-foto { order: -1; aspect-ratio: 4 / 3; -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 45%); mask-image: linear-gradient(0deg, transparent 0%, #000 45%); }
  .vd-chamada-txt { padding: 8px 24px 40px; }
}

/* ---------- 20/10 (2.ª leva) · uma folha clara à volta de secções inteiras (pg-sec das páginas de conteúdo, pd-sec das
   de negócio): a folha dá o espaço de cima, a secção deixa de o dar; e as peças de negócio passam a tinta ---------- */
.vd-claro:not(.vd-sangra) { margin-top: clamp(64px, 8vw, 112px); }
.vd-claro > .pg-sec:first-child, .vd-claro > .pd-sec:first-child { padding-top: 0; }
.vd-claro .pg-abre { background: #fff; box-shadow: inset 0 0 0 1px rgba(15,23,42,.08); }
.vd-claro .pg-abre > summary { color: var(--vd-tinta); }
.vd-claro .pg-abre > summary:hover { background: rgba(15,23,42,.03); }
.vd-claro .pg-abre-c > p { color: var(--vd-texto); }
.vd-claro .pg-passos li { border-top-color: rgba(15,23,42,.14); }
.vd-claro .pg-passos span:not(.pg-p-n) { color: var(--vd-texto); }
.vd-claro .pd-faq details { background: #fff; box-shadow: inset 0 0 0 1px rgba(15,23,42,.08); }
.vd-claro .pd-faq summary { color: var(--vd-tinta); }
.vd-claro .pd-faq summary::after { color: var(--vd-tinta); background: rgba(15,23,42,.06); }
.vd-claro .pd-faq details > p { color: var(--vd-texto); }
.vd-claro .ng-caps li { border-top-color: rgba(15,23,42,.12); }
.vd-claro .ng-caps-n { color: rgba(15,23,42,.32); }
/* (a folha de negócio entra depois desta: as letras dela que são brancas pedem o selector mais forte) */
.vd-claro .ng-caps b, .vd-claro .ng-regiao-cab h3, .vd-claro .ng-zona-t b, .vd-claro .pd-cab .h2, .vd-claro .ng-dupla-cab .h2 { color: var(--vd-tinta); }
.vd-claro .pd-cab .lead, .vd-claro .ng-dupla-cab .lead { color: var(--vd-texto); }
.vd-claro .ng-caps li span:not(.ng-caps-n) { color: var(--vd-texto); }
.vd-claro .ng-regiao { border-top-color: rgba(15,23,42,.12); }
.vd-claro .ng-regiao-cab span, .vd-claro .ng-zona-t span, .vd-claro .ng-zona-t b svg { color: var(--vd-fraco); }
.vd-claro .ng-zona { background: #fff; box-shadow: inset 0 0 0 1px rgba(15,23,42,.07), 0 24px 48px -34px rgba(15,23,42,.45); }
.vd-claro .ng-zona:hover { background: #fff; }
.vd-claro .pd-chips li { color: var(--vd-tinta); background: #fff; box-shadow: inset 0 0 0 1px rgba(15,23,42,.1); }
.vd-claro .ng-decl { color: var(--vd-tinta); }
.vd-claro .pd-nota { color: var(--vd-fraco); }

/* uma secção inteira por cima de uma fotografia: a secção dá o espaço por dentro da foto, e a foto tem cantos de folha */
.vd-sobre:not(.vd-sangra) { margin: clamp(64px, 8vw, 112px) var(--vd-inset) 0; border-radius: clamp(28px, 3.6vw, 48px); }
.vd-sobre > .vd-sobre-in > .pg-sec, .vd-sobre > .vd-sobre-in > .pd-sec { padding-block: clamp(80px, 11vw, 160px); }
.vd-sobre:not(.vd-sangra) .vd-sobre-foto::after { background: linear-gradient(180deg, rgba(6,14,26,.55) 0%, rgba(6,14,26,.38) 45%, rgba(6,14,26,.72) 100%); }
.vd-sobre .ng-decl { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.45); }
.vd-sobre .pd-chips li { background: rgba(6,14,26,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }