/* ==========================================================================
   CAPSI — site institucional
   Conceito: as pessoas em primeiro plano. Fotos de gente na abertura, em quem
   somos, nas áreas de atuação, na experiência e no contato; o azul-petróleo e
   o ouro da marca seguram o resto.
   Base: kit responsivo-de-cara (mobile-first, 360 → 1440, clamp sem media query).
   ========================================================================== */

@font-face { font-family: "Lexend"; src: url("../fontes/lexend-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lexend"; src: url("../fontes/lexend-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- 1. Tokens ---------- */
:root {
  /* cores medidas na marca do cliente */
  --tinta: #022A38;          /* o azul-petróleo do nome CAPSI */
  --tinta-2: #34505B;
  --folha: #1A3827;          /* o verde da folha */
  --ouro: #B29947;           /* os fios dourados da marca */
  --ouro-vivo: #D8BE6A;      /* o mesmo ouro, para fundo escuro e botão */
  --ouro-tinta: #6B5B1E;     /* ouro que dá leitura sobre o papel (6:1) */
  --luz: #F7D9AB;            /* o céu dentro do símbolo */
  --papel: #F0F4F2;          /* névoa: o petróleo bem diluído; o ouro se destaca sobre o frio */
  --papel-2: #E2EAE7;
  --cartao: #FAFCFB;
  --creme: #F6F8F5;          /* a tinta clara sobre fundo escuro */
  --noite: #00141B;          /* o fundo escuro: o mesmo tom do modo de alto contraste */
  --fio: rgba(2, 42, 56, 0.12);
  --fio-claro: rgba(246, 248, 245, 0.18);

  /* tipografia fluida. O corpo começa em 17px: o público inclui pessoa idosa. */
  --fs-sm:   clamp(0.9375rem, 0.92rem + 0.09vw, 1rem);       /* 15 → 16 */
  --fs-base: clamp(1.0625rem, 1.02rem + 0.19vw, 1.1875rem);  /* 17 → 19 */
  --fs-lg:   clamp(1.1875rem, 1.09rem + 0.44vw, 1.5rem);     /* 19 → 24 */
  --fs-h3:   clamp(1.25rem, 1.13rem + 0.56vw, 1.625rem);     /* 20 → 26 */
  --fs-h2:   clamp(1.875rem, 1.33rem + 2.41vw, 3.5rem);      /* 30 → 56 */
  --fs-h1:   clamp(2.5rem, 1.33rem + 5.19vw, 5.375rem);      /* 40 → 86 */

  --sp-xs:  clamp(0.5rem, 0.46rem + 0.19vw, 0.63rem);
  --sp-sm:  clamp(0.75rem, 0.69rem + 0.28vw, 0.94rem);
  --sp-md:  clamp(1rem, 0.91rem + 0.37vw, 1.25rem);
  --sp-lg:  clamp(1.5rem, 1.33rem + 0.74vw, 2rem);
  --sp-xl:  clamp(2rem, 1.67rem + 1.48vw, 3rem);
  --sp-sec: clamp(2.5rem, 2rem + 2.22vw, 4.5rem);

  --gutter: clamp(1rem, 0.78rem + 0.93vw, 2rem);
  --gap:    clamp(0.625rem, 0.5rem + 0.56vw, 1.25rem);
  --shell:  min(100% - 2 * var(--gutter), 76rem);
  --vao:    clamp(3rem, 6vw, 6rem);       /* o vão entre as duas colunas */
  --raio:   clamp(1rem, 0.85rem + 0.65vw, 1.5rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sombra: 0 18px 44px rgba(8, 16, 20, 0.14);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
html[data-texto="grande"] { font-size: 112.5%; }
html[data-texto="maior"] { font-size: 125%; }
body { margin: 0; font-family: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: var(--fs-base); font-weight: 350; line-height: 1.6;
  color: var(--tinta); background: var(--papel); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
img, svg, picture { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0 0 var(--sp-xs); line-height: 1.1; text-wrap: balance; font-weight: 300; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.08; margin-bottom: var(--sp-md); }
h3 { font-size: var(--fs-h3); font-weight: 450; line-height: 1.22; letter-spacing: -0.01em; }
p { margin: 0 0 var(--sp-sm); text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button, input, textarea { font: inherit; font-size: max(16px, 1em); color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--ouro-tinta); outline-offset: 3px; border-radius: 0.4rem; }
:where(.abertura, .afluentes, .curso--noite, .foz) :focus-visible { outline-color: var(--luz); }
::selection { background: var(--ouro-vivo); color: var(--tinta); }

.shell { width: var(--shell); margin-inline: auto; }
.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }
.icone { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pular { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.75rem 1rem; border-radius: 0.6rem; background: var(--tinta); color: var(--creme); }
.pular:focus { top: 1rem; }
.lead { font-size: var(--fs-lg); line-height: 1.5; color: var(--tinta-2); max-width: 34rem; }
.estacao { margin: 0 0 var(--sp-xs); font-size: 1rem; font-weight: 500; color: var(--ouro-tinta); }
.estacao--clara { color: var(--ouro-vivo); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-xs); align-items: center; }
.cluster--cta > * { flex: 1 1 8.5rem; }

/* botões: cápsula, toque de 52px, rótulo numa linha só */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.25rem; padding: 0.7rem 0.9rem; border: 1px solid transparent; border-radius: 999px;
  font-size: 0.97rem; font-weight: 500; line-height: 1.4; white-space: nowrap; text-decoration: none; touch-action: manipulation;
  transition: transform 160ms var(--ease-out), box-shadow 220ms var(--ease-out), background-color 220ms, border-color 220ms; }
.botao:active { transform: scale(0.98); }
.botao--ouro { color: var(--tinta); background-color: var(--ouro-vivo); }
.botao--tinta { color: var(--creme); background: var(--tinta); }
.botao--vidro { color: var(--creme); background: rgba(246, 248, 245, 0.12); border-color: rgba(246, 248, 245, 0.5); }
.botao--linha { color: var(--tinta); background: transparent; border-color: rgba(2, 42, 56, 0.32); }
@media (hover: hover) and (pointer: fine) {
  .botao:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(8, 16, 20, 0.2); }
  .botao--ouro:hover { background-color: #E3CB7C; }
  .botao--vidro:hover { background: rgba(246, 248, 245, 0.22); }
  .botao--linha:hover { border-color: var(--tinta); }
}
@media (min-width: 48rem) { .botao { padding-inline: 1.5rem; font-size: 1rem; } .cluster--cta > * { flex: 0 0 auto; min-width: 11rem; } }

/* entrada das peças: só depois que o script roda (sem script, nada some) */
.js-ok .revelar { opacity: 0; transform: translateY(16px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js-ok .revelar.visivel { opacity: 1; transform: none; }

/* ---------- 3. Barra do topo: cápsula em três zonas ---------- */
.topo { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 0; }
.capsula { position: relative; width: min(100% - 2 * var(--gutter), 76rem); margin: max(0.6rem, env(safe-area-inset-top)) auto 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.4rem 0.35rem 0.9rem; border: 1px solid rgba(2, 42, 56, 0.08); border-radius: 999px; background: var(--papel); box-shadow: 0 6px 18px rgba(8, 16, 20, 0.12); }
.marca { display: inline-flex; align-items: center; min-height: 2.75rem; }
.marca { flex: none; }
.marca img { height: 2.4rem; width: auto; max-width: none; }
.capsula__nav { display: none; }
.capsula__acoes { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; }
.capsula .botao { min-height: 2.75rem; padding-inline: 1.1rem; }
@media (min-width: 60rem) {
  .capsula { grid-template-columns: 1fr auto 1fr; padding-left: 1.25rem; }
  .capsula__nav { display: flex; gap: 0.15rem; }
  .capsula__nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.85rem; border-radius: 999px; font-size: 0.97rem; font-weight: 400; text-decoration: none; color: var(--tinta); transition: background-color 200ms; }
  .capsula__nav a:hover, .capsula__nav a[aria-current="true"] { background: rgba(2, 42, 56, 0.08); }
}

.acesso { position: static; }
.acesso summary { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; list-style: none; cursor: pointer; color: var(--tinta); transition: background-color 200ms; }
.acesso summary::-webkit-details-marker { display: none; }
.acesso summary:hover, .acesso[open] summary { background: rgba(2, 42, 56, 0.08); }
.acesso__painel { position: absolute; right: 0; top: calc(100% + 0.6rem); width: min(19rem, 100%); display: grid; gap: 0.5rem; padding: 1rem; border-radius: 1.25rem; background: var(--cartao); border: 1px solid var(--fio); box-shadow: var(--sombra); font-size: 0.97rem; }
.acesso__titulo { margin: 0; font-weight: 500; }
.acesso__linha { display: grid; gap: 0.4rem; }
.acesso__grupo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
.acesso__grupo button { min-height: 2.75rem; border: 1px solid var(--fio); border-radius: 0.75rem; background: var(--papel); font-weight: 500; }
.acesso__grupo button[aria-checked="true"] { background: var(--tinta); color: var(--creme); border-color: var(--tinta); }
.acesso__chave { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: 0 0.25rem; border: 0; background: none; text-align: left; }
.acesso__chave i { position: relative; flex: none; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: rgba(2, 42, 56, 0.22); transition: background-color 200ms; }
.acesso__chave i::after { content: ""; position: absolute; top: 0.19rem; left: 0.19rem; width: 1.12rem; height: 1.12rem; border-radius: 50%; background: var(--cartao); transition: transform 200ms var(--ease-out); }
.acesso__chave[aria-pressed="true"] i { background: var(--tinta); }
.acesso__chave[aria-pressed="true"] i::after { transform: translateX(1.1rem); }

/* ---------- 4. Abertura ---------- */
/* Texto e foto não disputam o mesmo espaço. No celular a foto vem em cima e o texto embaixo, no
   fundo escuro; no computador o texto ocupa a metade esquerda e a foto a metade direita. */
.abertura { position: relative; z-index: 2; isolation: isolate; padding: 0 0 clamp(2rem, 4vw, 3.5rem); color: var(--creme); background: var(--noite); }
.abertura__quadro { position: relative; height: clamp(15rem, 60vw, 27rem); margin-bottom: var(--sp-md); overflow: hidden; }
/* a foto se desfaz no fundo escuro na borda que encosta no texto, e escurece um pouco sob a barra do topo */
.abertura__quadro::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(0, 20, 27, 0.5) 0%, rgba(0, 20, 27, 0) 34%, rgba(0, 20, 27, 0) 72%, var(--noite) 100%); }
/* as pessoas ficam na metade direita da foto: o recorte prende ali em qualquer largura */
.abertura__foto { width: 100%; height: 100%; object-fit: cover; object-position: 80% 30%; }
.abertura__titulo { margin: 0 0 var(--sp-md); font-size: var(--fs-h1); font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; }
/* cada frase do lema ocupa uma linha: o corpo acompanha a largura disponível */
.abertura__titulo span { display: block; }
@media (max-width: 47.99rem) { .abertura__titulo { font-size: clamp(1.6rem, 8.2vw, 3.5rem); line-height: 1.14; } }
.abertura__sub { max-width: 35rem; margin-bottom: var(--sp-lg); font-size: var(--fs-lg); line-height: 1.45; color: rgba(246, 248, 245, 0.9); }
.provas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--sp-lg); }
.provas li { display: grid; gap: 0.1rem; padding-inline: 0.5rem; text-align: center; border-inline-start: 1px solid var(--fio-claro); }
.provas li:first-child { border-inline-start: 0; }
.provas strong { font-size: clamp(1.9rem, 1.5rem + 1.8vw, 3rem); font-weight: 300; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.provas span { font-size: var(--fs-sm); line-height: 1.25; color: var(--creme); }
.atalhos { display: flex; justify-content: space-between; gap: 0.25rem; margin-top: var(--sp-md); padding-top: var(--sp-xs); border-top: 1px solid var(--fio-claro); }
.atalhos a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.9375rem; color: var(--creme); text-decoration: none; }

@media (min-width: 48rem) {
  .abertura__titulo { line-height: 1.06; }
  .provas { grid-template-columns: repeat(3, auto); justify-content: start; }
  .provas li { padding-inline: clamp(1.25rem, 2.6vw, 2.25rem); }
  .provas li:first-child { padding-inline-start: 0; }
}
@media (min-width: 60rem) { .atalhos { display: none; } }
@media (min-width: 64rem) {
  .abertura { display: grid; align-items: center; min-height: min(46rem, 100svh); padding: 6.5rem 0 3rem; }
  .abertura__quadro { position: absolute; inset: 0 0 0 50%; z-index: -1; height: auto; margin: 0; }
  .abertura__quadro::after { background:
    linear-gradient(90deg, var(--noite) 0%, rgba(0, 20, 27, 0.5) 12%, rgba(0, 20, 27, 0) 30%),
    linear-gradient(180deg, rgba(0, 20, 27, 0.45) 0%, rgba(0, 20, 27, 0) 24%); }
  .abertura__foto { object-position: 88% 35%; }
  /* o texto fica todo na metade esquerda, com um respiro antes da foto */
  .abertura__conteudo > * { max-width: calc(50% - 3rem); }
  .abertura__titulo { font-size: min(3.25rem, 3.5vw); }
  .abertura__sub { font-size: clamp(1.0625rem, 0.6rem + 0.75vw, 1.3125rem); }
  .provas li { padding-inline: clamp(1rem, 1.8vw, 1.75rem); }
}
/* celulares estreitos: tudo continua lado a lado, só um ponto menor */
@media (max-width: 22.99rem) { .atalhos a { font-size: 0.875rem; } }
@media (max-width: 22.49rem) {
  .atalhos { display: none; }
  .marca img { height: 2rem; }
  .botao { padding-inline: 0.5rem; font-size: 0.875rem; }
  .capsula .botao { padding-inline: 0.8rem; }
}
/* tela baixa de celular: foto mais curta para o texto e os botões aparecerem na primeira tela */
@media (max-height: 46rem) and (max-width: 47.99rem) {
  .abertura__quadro { height: clamp(11rem, 30svh, 15rem); }
  .abertura__sub { font-size: var(--fs-base); margin-bottom: var(--sp-md); }
  .provas, .atalhos { margin-top: var(--sp-sm); }
}

/* ---------- 5. Seções claras ---------- */
.secao { position: relative; padding-block: var(--sp-sec); }
.curso { background: var(--papel); }
.curso > .shell { position: relative; z-index: 1; }
.espinha { display: grid; gap: var(--sp-lg); }
.espinha__b { display: grid; gap: var(--gap); align-content: start; }
.so-largo { display: none; }
.quadro { padding: clamp(1.1rem, 0.9rem + 1vw, 1.75rem); border: 1px solid var(--fio); border-radius: var(--raio); background: var(--cartao); }
.quadro p { margin: 0; color: var(--tinta-2); }
.quadro h3 { margin-bottom: var(--sp-xs); }

/* fotos de quem somos: uma larga em cima e duas menores embaixo, ao lado do texto no computador */
.mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.mosaico li { overflow: hidden; border-radius: var(--raio); background: var(--papel-2); aspect-ratio: 4 / 3; }
.mosaico li:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.mosaico img, .retrato { width: 100%; height: 100%; object-fit: cover; }
/* missão e visão: dois quadros lado a lado, na largura toda */
.par-quadros { display: grid; gap: var(--gap); margin-top: var(--sp-lg); }
@media (min-width: 40rem) { .par-quadros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.retrato { height: auto; aspect-ratio: 3 / 2; border-radius: var(--raio); }
/* experiência: o texto de um lado e a foto do outro, alinhados pelo meio */
@media (min-width: 64rem) { #experiencia .espinha, #quem-somos .espinha { align-items: center; } }

/* os três pilares do lema */
.pilares { position: relative; display: flex; margin-top: var(--sp-lg); border-radius: var(--raio); background: var(--tinta); color: var(--creme); }
.pilares li { flex: 1 1 0; min-width: 0; display: grid; gap: 0.3rem; align-content: start; padding: 0.85rem 0.5rem; text-align: center; border-inline-start: 1px solid var(--fio-claro); }
.pilares li:first-child { border-inline-start: 0; }
.pilares strong { font-size: 0.875rem; font-weight: 500; line-height: 1.2; color: var(--ouro-vivo); }
.pilares span { display: none; font-size: var(--fs-sm); line-height: 1.4; color: rgba(246, 248, 245, 0.85); }
@media (max-width: 22.49rem) {
  .pilares { flex-direction: column; }
  .pilares li { padding: 0.7rem 1rem; text-align: left; border-inline-start: 0; border-top: 1px solid var(--fio-claro); }
  .pilares li:first-child { border-top: 0; }
}

.troca { display: none; }
.detalhe { display: none; }
.junto { white-space: nowrap; }
@media (max-width: 39.99rem) {
  .js-ok .troca { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--fio); border-radius: 999px; background: var(--cartao); }
  .troca button { min-height: 2.75rem; border: 0; border-radius: 999px; background: none; font-weight: 500; transition: background-color 220ms, color 220ms; }
  .troca button[aria-pressed="true"] { background: var(--tinta); color: var(--creme); }
  .js-ok [data-troca="missao"] #visao, .js-ok [data-troca="visao"] #missao { display: none; }
  .js-ok [data-troca] .quadro h3 { display: none; }
  .js-ok [data-troca] .quadro { animation: abrir 320ms var(--ease-out) both; }
}
@media (min-width: 40rem) {
  .pilares li { padding: clamp(1.1rem, 2.4vw, 1.75rem); text-align: left; }
  .pilares strong { font-size: var(--fs-lg); }
  .pilares span { display: block; }
}
@media (min-width: 48rem) { .so-largo { display: block; color: var(--tinta-2); max-width: 34rem; } .detalhe { display: inline; } }
@media (min-width: 64rem) {
  .espinha { grid-template-columns: minmax(0, 1fr) var(--vao) minmax(0, 1fr); gap: 0; align-items: start; }
  .espinha__a { grid-column: 1; }
  .espinha__b { grid-column: 3; }
}

/* ---------- 6. Áreas de atuação ---------- */
.afluentes { position: relative; isolation: isolate; padding-block: var(--sp-sec); color: var(--creme); background: var(--noite); }
.afluentes__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.afluentes__veu { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 20, 27, 0.9) 0%, rgba(0, 20, 27, 0.74) 30%, rgba(0, 20, 27, 0.76) 70%, rgba(0, 20, 27, 0.9) 100%); }
.afluentes__cab { max-width: 44rem; margin: 0 auto var(--sp-lg); text-align: center; }
.afluentes__cab p:last-child { margin: 0 auto; max-width: 32rem; color: rgba(246, 248, 245, 0.88); }
.confluencia { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.confluencia__linhas { display: none; }
.eixo { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.55rem; min-height: 3.25rem; padding: 0.6rem 0.7rem; border: 1px solid rgba(246, 248, 245, 0.24); border-radius: 1rem; background: rgba(0, 20, 27, 0.8);
  color: var(--creme); font-size: 0.9375rem; line-height: 1.2; text-align: left;
  transition: background-color 240ms, color 240ms, border-color 240ms, transform 160ms var(--ease-out); }
.eixo .icone { width: 1.35rem; height: 1.35rem; color: var(--ouro-vivo); transition: color 240ms; }
.eixo span, .valores strong, .frente span { min-width: 0; overflow-wrap: anywhere; }
.eixo[aria-pressed="true"] { background: var(--ouro-vivo); border-color: var(--ouro-vivo); color: var(--tinta); }
.eixo[aria-pressed="true"] .icone { color: var(--tinta); }
.eixo:active { transform: scale(0.98); }
@media (max-width: 22.49rem) { .eixo { padding: 0.6rem 0.5rem; gap: 0.4rem; font-size: 0.875rem; } }
@media (hover: hover) and (pointer: fine) { .eixo:not([aria-pressed="true"]):hover { border-color: var(--ouro-vivo); background: rgba(0, 20, 27, 0.82); } }
.confluencia__painel { position: relative; z-index: 1; grid-column: 1 / -1; display: grid; margin-top: 0.35rem; padding: clamp(1.1rem, 0.9rem + 1.2vw, 2rem); padding-bottom: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); border: 1px solid rgba(216, 190, 106, 0.4); border-radius: var(--raio); background: rgba(0, 20, 27, 0.92); }
.eixo-painel { grid-area: 1 / 1; }
.eixo-painel h3 { font-weight: 400; color: var(--creme); }
.eixo-painel__nota { margin: -0.15rem 0 0.5rem; font-size: var(--fs-sm); color: var(--ouro-vivo); }
.eixo-painel ul { display: grid; gap: 0.3rem; margin-top: var(--sp-xs); }
.eixo-painel li, .frente-painel li, .itens li { position: relative; padding-inline-start: 1.6rem; }
.eixo-painel li::before, .frente-painel li::before, .itens li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 1rem; height: 1rem; background: currentColor; opacity: 0.9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.4 4.4L19 7.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.4 4.4L19 7.4'/%3E%3C/svg%3E") center / contain no-repeat; }
.eixo-painel li::before { color: var(--ouro-vivo); }
.js-ok .eixo-painel { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s 320ms; }
.js-ok .eixo-painel.ativo { opacity: 1; visibility: visible; transform: none; transition-delay: 60ms, 60ms, 0s; }
html:not(.js-ok) .eixo-painel + .eixo-painel { margin-top: var(--sp-md); }
html:not(.js-ok) .eixo-painel { grid-area: auto; }
.confluencia__tempo { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 0.8rem; height: 2px; border-radius: 2px; background: rgba(246, 248, 245, 0.14); overflow: hidden; }
.confluencia__tempo::after { content: ""; position: absolute; inset: 0; background: var(--ouro-vivo); transform: scaleX(0); transform-origin: left; }
.confluencia.girando .confluencia__tempo::after { animation: encher var(--giro, 5200ms) linear both; }
@keyframes encher { to { transform: scaleX(1); } }

@media (min-width: 40rem) { .confluencia { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .confluencia { grid-template-columns: minmax(0, 1fr) minmax(21rem, 27rem) minmax(0, 1fr); column-gap: clamp(2.5rem, 5.5vw, 5.5rem); row-gap: 0.85rem; align-items: center; }
  .confluencia__linhas { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .confluencia__linhas path { fill: none; stroke: rgba(216, 190, 106, 0.38); stroke-width: 1.5; stroke-linecap: round; transition: stroke 300ms; }
  .confluencia__linhas path.ativo { stroke: var(--ouro-vivo); stroke-width: 2.5; }
  .eixo { width: min(100%, 19rem); min-height: 3.5rem; padding: 0.55rem 1.1rem; border-radius: 999px; font-size: 1rem; }
  .eixo:nth-of-type(-n + 4) { grid-column: 1; justify-self: end; flex-direction: row-reverse; text-align: right; }
  .eixo:nth-of-type(n + 5) { grid-column: 3; justify-self: start; }
  .eixo:nth-of-type(4n + 1) { grid-row: 1; }
  .eixo:nth-of-type(4n + 2) { grid-row: 2; }
  .eixo:nth-of-type(4n + 3) { grid-row: 3; }
  .eixo:nth-of-type(4n) { grid-row: 4; }
  .confluencia__painel { grid-column: 2; grid-row: 1 / span 4; align-self: stretch; align-content: center; margin: 0; min-height: 20rem; }
}

/* ---------- 7. Serviços: cinco frentes ---------- */
.frentes { gap: 0.5rem; }
.frentes__cab { margin-bottom: var(--sp-xs); }
.frente { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.85rem; width: 100%; min-height: 3.75rem; padding: 0.6rem 0.9rem 0.6rem 0.6rem; border: 1px solid var(--fio); border-radius: 1.1rem; background: var(--cartao);
  font-size: var(--fs-base); line-height: 1.25; text-align: left; transition: background-color 240ms, color 240ms, border-color 240ms, transform 160ms var(--ease-out); }
.frente b { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--papel-2); font-weight: 500; transition: background-color 240ms, color 240ms; }
.frente .icone { width: 1.25rem; height: 1.25rem; transition: transform 300ms var(--ease-out); }
.frente[aria-expanded="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--creme); }
.frente[aria-expanded="true"] b { background: var(--ouro-vivo); color: var(--tinta); }
.frente[aria-expanded="true"] .icone { transform: rotate(45deg); }
.frente:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .frente:not([aria-expanded="true"]):hover { border-color: rgba(2, 42, 56, 0.4); } }
.frente-painel { padding: 0.35rem 0.5rem 0.9rem 0.6rem; }
.frente-painel h3 { display: none; }
.frente-painel ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.75rem; font-size: var(--fs-sm); line-height: 1.35; color: var(--tinta-2); }
.frente-painel li::before, .itens li::before { color: var(--ouro-tinta); }
.js-ok .frente-painel:not(.ativo) { display: none; }
.js-ok .frente-painel.ativo { animation: abrir 360ms var(--ease-out) both; }
@keyframes abrir { from { opacity: 0; transform: translateY(-6px); } }
.link-seta { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; margin-top: var(--sp-xs); font-weight: 500; text-decoration: none; color: var(--tinta); border-bottom: 1px solid transparent; justify-self: start; }
.link-seta .icone { width: 1.25rem; height: 1.25rem; transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-seta:hover .icone { transform: translateX(4px); } }

@media (min-width: 64rem) {
  .frentes { row-gap: 0.6rem; }
  .frentes__cab { grid-column: 1; grid-row: 1; margin-bottom: var(--sp-sm); }
  .frente { grid-column: 1; }
  .frente .icone { display: none; }
  .link-seta { grid-column: 1; }
  .frente-painel { grid-column: 3; grid-row: 1 / span 7; align-self: center; padding: clamp(1.5rem, 3vw, 2.75rem); border: 1px solid var(--fio); border-radius: var(--raio); background: var(--cartao); box-shadow: var(--sombra); }
  .frente-painel h3 { display: block; margin-bottom: var(--sp-md); font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem); font-weight: 300; letter-spacing: -0.02em; }
  .frente-painel ul { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; font-size: var(--fs-base); }
}

/* ---------- 8. Experiência e valores ---------- */
.curso--noite { isolation: isolate; background: var(--noite); color: var(--creme); }
.curso--noite .lead { color: rgba(246, 248, 245, 0.84); }
.valores__titulo { margin: var(--sp-xl) 0 var(--sp-md); font-weight: 400; }
/* os valores: sem caixas, só o nome, a frase e um fio em cima; cinco por linha no computador */
.valores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap); }
.valores li { display: grid; align-content: start; gap: 0.35rem; padding: 0.8rem 0; border-top: 1px solid var(--fio-claro); }
.valores strong { font-size: 1rem; font-weight: 500; line-height: 1.25; }
.valores span { display: none; font-size: var(--fs-sm); line-height: 1.45; color: rgba(246, 248, 245, 0.78); }
@media (min-width: 40rem) {
  .valores { column-gap: var(--sp-lg); }
  .valores li { padding: 1rem 0 1.25rem; }
  .valores strong { font-size: var(--fs-base); }
  .valores span { display: block; }
}
@media (min-width: 64rem) {
  .valores { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-lg) clamp(1.25rem, 2.2vw, 2rem); }
  .valores li { padding: 1rem 0 0; }
}
}

/* ---------- 9. Transparência ---------- */
.principio { margin: 0 0 var(--sp-lg); }
.principio::before { content: ""; display: block; width: 3.5rem; height: 3px; margin-bottom: 0.9rem; border-radius: 2px; background: var(--ouro); }
.principio p { margin: 0; font-size: var(--fs-lg); line-height: 1.42; color: var(--tinta); }
.itens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 0.75rem; margin-top: var(--sp-xs); font-size: var(--fs-sm); line-height: 1.35; color: var(--tinta-2); }
.ver-mais { justify-self: start; min-height: 2.75rem; margin-top: 0.35rem; padding: 0; border: 0; background: none; font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; }
.ficha { display: grid; margin: var(--sp-lg) 0 0; }
.ficha div { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; padding: 0.55rem 0; border-top: 1px solid var(--fio); }
.ficha div:last-child { border-bottom: 1px solid var(--fio); }
.ficha dt { font-size: var(--fs-sm); color: var(--tinta-2); }
.ficha dd { margin: 0; font-weight: 500; line-height: 1.35; }
.ficha div:first-child dd { white-space: nowrap; }
@media (max-width: 47.99rem) {
  .mais-celular > :nth-child(n + 5):not(.mostrar) { display: none; }
  .principio { margin-bottom: var(--sp-md); }
  .principio p { font-size: var(--fs-base); line-height: 1.5; }
  .ficha { margin-top: var(--sp-md); }
}
@media (min-width: 48rem) { .ver-mais { display: none; } }

/* ---------- 10. Contato ---------- */
.foz { position: relative; isolation: isolate; padding-block: var(--sp-sec); color: var(--creme); background: var(--noite); }
.foz__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.foz__veu { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 20, 27, 0.84) 0%, rgba(0, 20, 27, 0.62) 45%, rgba(0, 20, 27, 0.7) 100%); }
.foz__dentro { display: grid; gap: var(--sp-lg); align-items: center; }
.foz .lead { color: rgba(246, 248, 245, 0.92); }
.canais { display: grid; gap: 0.6rem; margin-top: var(--sp-md); }
.canais li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.7rem 0.85rem; border: 1px solid var(--fio-claro); border-radius: 1.1rem; background: rgba(0, 20, 27, 0.8); }
.canais .icone { color: var(--ouro-vivo); }
.canais div { display: grid; gap: 0.1rem; }
.canais div > span { font-size: var(--fs-sm); color: rgba(246, 248, 245, 0.78); }
.canais a { display: block; padding-block: 0.65rem; margin-block: -0.55rem -0.65rem; font-size: var(--fs-base); line-height: 1.35; text-underline-offset: 0.2em; text-decoration-color: rgba(246, 248, 245, 0.5); overflow-wrap: anywhere; }
.copiar { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--fio-claro); border-radius: 50%; background: none; color: var(--creme); transition: background-color 200ms, color 200ms; }
.copiar[data-ok] { background: var(--ouro-vivo); color: var(--tinta); border-color: var(--ouro-vivo); }
.carta { display: grid; gap: var(--sp-sm); padding: clamp(1.1rem, 0.8rem + 1.5vw, 2rem); border-radius: var(--raio); background: var(--papel); color: var(--tinta); box-shadow: 0 24px 60px rgba(8, 16, 20, 0.3); }
.carta fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.carta__assunto span { justify-content: center; width: 100%; }
@media (min-width: 30rem) { .carta fieldset { display: flex; flex-wrap: wrap; } .carta__assunto span { width: auto; } }
.carta legend { grid-column: 1 / -1; width: 100%; padding: 0; margin-bottom: 0.5rem; font-weight: 500; }
.carta__assunto label { position: relative; }
.carta__assunto input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.carta__assunto span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.95rem; border: 1px solid rgba(2, 42, 56, 0.28); border-radius: 999px; font-size: 0.97rem; transition: background-color 200ms, color 200ms, border-color 200ms; }
.carta__assunto input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--creme); }
.carta__assunto input:focus-visible + span { outline: 3px solid var(--ouro-tinta); outline-offset: 2px; }
.carta__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-xs); }
.campo { display: grid; gap: 0.3rem; min-width: 0; }
.campo span { font-size: var(--fs-sm); font-weight: 500; }
.campo input, .campo textarea { width: 100%; min-height: 3rem; padding: 0.65rem 0.8rem; border: 1px solid rgba(2, 42, 56, 0.3); border-radius: 0.8rem; background: var(--cartao); transition: border-color 200ms, box-shadow 200ms; }
.campo textarea { resize: vertical; min-height: 5.5rem; line-height: 1.45; }
.campo input:focus, .campo textarea:focus { outline: 3px solid var(--ouro); outline-offset: 1px; border-color: var(--tinta); }
.campo [aria-invalid="true"] { border-color: #9A2B1C; }
.carta__aviso { min-height: 1.4em; margin: 0; font-size: var(--fs-sm); color: var(--tinta-2); }
.carta__aviso:empty { display: none; }
.carta__nota { margin: 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--tinta-2); }
@media (min-width: 64rem) {
  .foz__dentro { grid-template-columns: minmax(0, 1fr) minmax(24rem, 30rem); gap: clamp(2rem, 6vw, 6rem); }
  .foz__veu { background: linear-gradient(90deg, rgba(0, 20, 27, 0.88) 0%, rgba(0, 20, 27, 0.66) 42%, rgba(0, 20, 27, 0.3) 100%), linear-gradient(180deg, rgba(0, 20, 27, 0.5) 0%, rgba(0, 20, 27, 0) 30%); }
}

/* ---------- 11. Rodapé ---------- */
.rodape { padding-top: var(--sp-xl); background: var(--papel); }
.rodape__topo { display: grid; gap: var(--sp-md) var(--gap); padding-bottom: var(--sp-md); }
.rodape__col--nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
.rodape__col--nav p { grid-column: 1 / -1; }
.rodape__marca img { width: min(24rem, 78%); }
.rodape__col { display: grid; align-content: start; font-size: var(--fs-sm); line-height: 1.4; }
.rodape__col p { margin: 0 0 0.25rem; font-weight: 500; font-size: var(--fs-base); }
.rodape__col a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; color: var(--tinta-2); overflow-wrap: anywhere; }
.rodape__col span { padding-block: 0.35rem; color: var(--tinta-2); }
.rodape__par { display: flex; gap: 1.5rem; }
@media (hover: hover) and (pointer: fine) { .rodape__col a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 0.2em; } }
.rodape-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 0.6rem max(0.9rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--fio); font-size: 0.875rem; color: var(--tinta-2); }
.rodape-produto { margin: 0; }
.rodape-visionx { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; color: inherit; text-decoration: none; }
.rodape-x { width: 0.95rem; height: 0.95rem; }
@media (min-width: 48rem) { .rodape__topo { grid-template-columns: 1.7fr 1fr 1.25fr; gap: var(--sp-lg) var(--gap); padding-bottom: var(--sp-lg); } .rodape__col--nav { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 12. Página de texto (privacidade e acessibilidade) ---------- */
.texto { padding: 8rem 0 var(--sp-sec); }
.texto .shell { max-width: 46rem; }
.texto h1 { font-size: var(--fs-h2); letter-spacing: -0.02em; margin-bottom: var(--sp-md); }
.texto h2 { font-size: var(--fs-h3); font-weight: 450; letter-spacing: -0.01em; margin: var(--sp-xl) 0 var(--sp-xs); }
.texto p, .texto li { color: var(--tinta-2); }
.texto ul { display: grid; gap: 0.35rem; margin: 0 0 var(--sp-sm); padding-inline-start: 1.2rem; list-style: disc; }
.texto a { text-underline-offset: 0.2em; }

/* ---------- 13. Movimento ---------- */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-calmo]) { scroll-behavior: smooth; }
  html:not([data-calmo]) .abertura__titulo span { animation: subir 900ms var(--ease-out) both; }
  html:not([data-calmo]) .abertura__titulo span:nth-child(2) { animation-delay: 110ms; }
  html:not([data-calmo]) .abertura__titulo span:nth-child(3) { animation-delay: 220ms; }
  html:not([data-calmo]) :is(.abertura__sub, .abertura__acoes, .provas, .atalhos) { animation: subir 800ms var(--ease-out) 320ms both; }
}
@keyframes subir { from { opacity: 0; transform: translateY(22px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .js-ok .revelar { transform: none; transition: opacity 200ms linear; transition-delay: 0ms; }
  .botao, .botao:active, .botao:hover { transform: none; }
}
html[data-calmo] *, html[data-calmo] *::before, html[data-calmo] *::after { animation: none !important; scroll-behavior: auto !important; }
html[data-calmo] .revelar { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------- 14. Alto contraste ---------- */
html[data-contraste="alto"] { --tinta: #00151D; --tinta-2: #0A2530; --papel: #FFFDF7; --cartao: #FFFFFF; --ouro-tinta: #443908; --fio: rgba(0, 21, 29, 0.45); --fio-claro: rgba(255, 253, 247, 0.5); --creme: #FFFDF7; --noite: #00141B; }
html[data-contraste="alto"] :is(.afluentes__veu, .foz__veu) { background: rgba(0, 20, 27, 0.86); }
html[data-contraste="alto"] :is(.eixo, .confluencia__painel, .canais li) { background: #00141B; border-color: var(--creme); }
html[data-contraste="alto"] :is(.lead, .quadro p, .abertura__sub, .provas span, .valores span, .canais span) { color: inherit; }
html[data-contraste="alto"] a:not(.botao, .marca) { text-decoration: underline; text-underline-offset: 0.2em; }