/* ============================================================================
   CARTÕES VIVOS — o vocabulário visual dos cards do InvenTI, trazido para o site.

   Pedido do titular (26/09): *«modernizar os cards do site com SVG animados no estilo
   do InvenTI»* — fio de luz no topo, desenho de canto por tema com traço fino, relevo e
   vidro. O vidro já existia (movimento.css, «vidro fosco em todas as páginas»); este
   arquivo acrescenta as outras três camadas, e o `cartoes.js` injeta a marcação.

   Regras herdadas do produto (cards.css do InvenTI, SPEC-DASH-2) e mantidas aqui:
   · R6 — em REPOUSO nada se mexe. O desenho entra UMA vez (acende em sequência quando
     o card aparece na tela) e corre em onda só no gesto (hover/foco). Movimento é
     resposta, não ruído.
   · R7 — cor por token nos DOIS temas: no escuro o acento é o tom 300/400 (néon sobre
     azul-noite); no claro é o tom 700, que passa 3:1 de objeto gráfico sobre branco.
   · Só `opacity`, `transform` e `stroke-dashoffset` animam — nada de `filter` em laço.
   · `prefers-reduced-motion: reduce` → o desenho aparece INTEIRO e parado.
   · Decorativo: tudo `aria-hidden`, sem texto — não vira chave de tradução.
   ========================================================================== */

:root {
  --deco-opacidade: .62;
  --deco-opacidade-gesto: .95;
  --deco-largura: min(36%, 132px);
  --deco-mascara: linear-gradient(225deg, #000 36%, rgb(0 0 0 / .55) 60%, transparent 88%);
}
:root:not([data-theme="light"]) { --deco-opacidade: .7; }
:root[data-theme="light"] { --deco-opacidade: .82; }

/* ── acentos por tema do desenho: escuro (padrão) ── */
[data-deco-tema]              { --ac: #c084fc; --ac2: #60a5fa; }
[data-deco-tema="ativo"]      { --ac: #a78bfa; --ac2: #60a5fa; }
[data-deco-tema="custo"]      { --ac: #fbbf24; --ac2: #f472b6; }
[data-deco-tema="frota"]      { --ac: #22d3ee; --ac2: #34d399; }
[data-deco-tema="chamado"]    { --ac: #60a5fa; --ac2: #a78bfa; }
[data-deco-tema="seguranca"]  { --ac: #fb7185; --ac2: #c084fc; }
[data-deco-tema="licenca"]    { --ac: #a3e635; --ac2: #2dd4bf; }
[data-deco-tema="pessoas"]    { --ac: #f472b6; --ac2: #a78bfa; }
[data-deco-tema="trilha"]     { --ac: #2dd4bf; --ac2: #60a5fa; }
[data-deco-tema="neutro"]     { --ac: #e879f9; --ac2: #818cf8; }

/* ── tema claro: o tom 700 de cada acento ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) [data-deco-tema]             { --ac: #7e22ce; --ac2: #1d4ed8; }
  :root:not([data-theme="dark"]) [data-deco-tema="ativo"]     { --ac: #6d28d9; --ac2: #1d4ed8; }
  :root:not([data-theme="dark"]) [data-deco-tema="custo"]     { --ac: #b45309; --ac2: #be185d; }
  :root:not([data-theme="dark"]) [data-deco-tema="frota"]     { --ac: #0e7490; --ac2: #047857; }
  :root:not([data-theme="dark"]) [data-deco-tema="chamado"]   { --ac: #1d4ed8; --ac2: #6d28d9; }
  :root:not([data-theme="dark"]) [data-deco-tema="seguranca"] { --ac: #be123c; --ac2: #7e22ce; }
  :root:not([data-theme="dark"]) [data-deco-tema="licenca"]   { --ac: #4d7c0f; --ac2: #0f766e; }
  :root:not([data-theme="dark"]) [data-deco-tema="pessoas"]   { --ac: #be185d; --ac2: #6d28d9; }
  :root:not([data-theme="dark"]) [data-deco-tema="trilha"]    { --ac: #0f766e; --ac2: #1d4ed8; }
  :root:not([data-theme="dark"]) [data-deco-tema="neutro"]    { --ac: #a21caf; --ac2: #4338ca; }
}
:root[data-theme="light"] [data-deco-tema]             { --ac: #7e22ce; --ac2: #1d4ed8; }
:root[data-theme="light"] [data-deco-tema="ativo"]     { --ac: #6d28d9; --ac2: #1d4ed8; }
:root[data-theme="light"] [data-deco-tema="custo"]     { --ac: #b45309; --ac2: #be185d; }
:root[data-theme="light"] [data-deco-tema="frota"]     { --ac: #0e7490; --ac2: #047857; }
:root[data-theme="light"] [data-deco-tema="chamado"]   { --ac: #1d4ed8; --ac2: #6d28d9; }
:root[data-theme="light"] [data-deco-tema="seguranca"] { --ac: #be123c; --ac2: #7e22ce; }
:root[data-theme="light"] [data-deco-tema="licenca"]   { --ac: #4d7c0f; --ac2: #0f766e; }
:root[data-theme="light"] [data-deco-tema="pessoas"]   { --ac: #be185d; --ac2: #6d28d9; }
:root[data-theme="light"] [data-deco-tema="trilha"]    { --ac: #0f766e; --ac2: #1d4ed8; }
:root[data-theme="light"] [data-deco-tema="neutro"]    { --ac: #a21caf; --ac2: #4338ca; }

/* ── o card decorado: relevo (luz de cima, sombra de baixo) ── */
[data-deco-tema] { position: relative; }
body :is(.card, .numero)[data-deco-tema] {
  box-shadow: var(--sombra), inset 0 1px 0 color-mix(in srgb, #fff 9%, transparent),
              inset 0 -1px 0 color-mix(in srgb, #000 18%, transparent);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
body :is(.card, .numero)[data-deco-tema]:is(:hover, :focus-within) {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--ac) 45%, transparent);
  box-shadow: var(--sombra), 0 14px 34px -18px color-mix(in srgb, var(--ac) 70%, transparent),
              inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
}
/* o texto do card fica ACIMA do desenho: o desenho é camada de fundo */
:where([data-deco-tema]) > :where(:not(.card-fio, .card-motivo)) { position: relative; z-index: 1; }

/* o título não passa por baixo do desenho: o desenho é do canto, o título é do texto.
   🔴 SITE-2 r2 (29/09) · relato do dono: «desenhos em svg desalinhados». Medido (Playwright 1440/375):
   a reserva era min(20%, 64px) para um desenho de até 132 px (36 %) — o traço cruzava o título; e ela
   só valia para h2/h3, então o card cujo título é um <p><b> (as «Quatro disciplinas») não reservava
   nada. A reserva agora é do tamanho do desenho e vale para o PRIMEIRO bloco de conteúdo, seja qual for. */
/* (o card com o desenho no PÉ não reserva nada no título — senão o título quebra em cinco linhas à toa) */
:where([data-deco-tema]:not(:has(> .card-motivo.no-pe))) > :where(h2, h3, h4),
:where([data-deco-tema]:not(:has(> .card-motivo.no-pe))) > :where(.card-motivo) + :where(:not(.hud, span)),
:where([data-deco-tema]:not(:has(> .card-motivo.no-pe))) > :where(.card-motivo) + :where(.hud, span) + * { padding-right: calc(var(--deco-largura) * .7); }
/* desenho no PÉ do card (.no-pe, cards com número grande): o texto não desce até ele */
[data-deco-tema]:has(> .card-motivo.no-pe) { padding-bottom: calc(var(--deco-largura) * .62); }
@media (max-width: 600px) {
  :root { --deco-largura: 104px; }
  :root:not([data-theme="light"]) { --deco-opacidade: .5; }
  :root[data-theme="light"] { --deco-opacidade: .6; }
}

/* ── 1. o fio de luz no topo ── */
[data-deco-tema] > .card-fio {
  position: absolute; top: 0; left: 12%; right: 12%; height: 2px; border-radius: 2px;
  z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ac) 22%, var(--ac2) 78%, transparent);
  transform: scaleX(.35); opacity: .55; transform-origin: 50% 50%;
  transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .9s ease;
}
:root:not([data-theme="light"]) .card-fio { box-shadow: 0 0 12px 1px color-mix(in srgb, var(--ac) 55%, transparent); }
.deco-vista > .card-fio { transform: scaleX(1); opacity: 1; }
/* no gesto, um brilho corre pelo fio (transform, não filter) */
.card-fio::after {
  content: ""; position: absolute; top: -1px; bottom: -1px; left: 0; width: 22%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff, transparent); opacity: 0;
}
[data-deco-tema]:is(:hover, :focus-within, .deco-ativo) > .card-fio::after { animation: fio-corre 1.6s ease-in-out infinite; }
@keyframes fio-corre { 0% { transform: translateX(-30%); opacity: 0; } 20% { opacity: .75; } 100% { transform: translateX(480%); opacity: 0; } }

/* ── 2. o desenho de canto ── */
[data-deco-tema] > .card-motivo {
  position: absolute; right: 0; top: 0; width: var(--deco-largura); aspect-ratio: 4 / 3; max-height: 100%;
  z-index: 0; pointer-events: none; overflow: hidden; color: var(--ac);
  opacity: var(--deco-opacidade); transition: opacity .3s ease;
  -webkit-mask: var(--deco-mascara); mask: var(--deco-mascara);
}
.hud-card > .card-motivo { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
/* card com número grande no canto de cima (`.resolve-n`): o desenho desce para o canto de baixo */
[data-deco-tema] > .card-motivo.no-pe { top: auto; bottom: 0; --deco-mascara: linear-gradient(315deg, #000 36%, rgb(0 0 0 / .55) 60%, transparent 88%); clip-path: none; }
.card-motivo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.card-motivo svg * { vector-effect: non-scaling-stroke; stroke-width: 1.5px; }
.card-motivo .mv-2 { color: var(--ac2); stroke: var(--ac2); }
[data-deco-tema]:is(:hover, :focus-within, .deco-ativo) > .card-motivo { opacity: var(--deco-opacidade-gesto); }

/* ENTRADA — uma vez, quando o card aparece: cada traço se desenha, na ordem --k */
.card-motivo [pathLength] { stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.deco-vista .card-motivo [pathLength] {
  animation: mv-desenha .9s cubic-bezier(.3,.7,.2,1) forwards;
  animation-delay: calc(var(--k, 0) * 90ms + 150ms);
}
@keyframes mv-desenha { to { stroke-dashoffset: 0; } }
.card-motivo .mv-no { opacity: 0; transform-box: fill-box; transform-origin: center; }
.deco-vista .card-motivo .mv-no { animation: mv-acende .5s ease-out forwards; animation-delay: calc(var(--k, 0) * 110ms + 450ms); }
@keyframes mv-acende { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* GESTO — enquanto durar o hover/foco. A entrada já terminou; o gesto troca a animação. */
[data-deco-tema]:is(:hover, :focus-within, .deco-ativo) .card-motivo .mv-flui {
  stroke-dasharray: 6 5; stroke-dashoffset: 0; animation: mv-flui 1.3s linear infinite;
}
@keyframes mv-flui { to { stroke-dashoffset: -22; } }
[data-deco-tema]:is(:hover, :focus-within, .deco-ativo) .card-motivo .mv-no { opacity: 1; animation: mv-pulsa 1.5s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 150ms); }
@keyframes mv-pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.card-motivo .mv-onda { transform-box: fill-box; transform-origin: center; fill: currentColor; fill-opacity: 0; }
[data-deco-tema]:is(:hover, :focus-within, .deco-ativo) .card-motivo .mv-onda { animation: mv-onda 1.9s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 140ms); }
@keyframes mv-onda { 0%, 100% { fill-opacity: 0; transform: none; } 40% { fill-opacity: .22; transform: scale(1.08); } }
.card-motivo .mv-gira { transform-box: view-box; transform-origin: 116px 48px; }  /* = centro do radar (cartoes.js) */
[data-deco-tema]:is(:hover, :focus-within, .deco-ativo) .card-motivo .mv-gira { animation: mv-gira 2.8s linear infinite; }
@keyframes mv-gira { to { transform: rotate(360deg); } }
.card-motivo .mv-ponteiro { transform-box: view-box; transform-origin: 116px 48px; transform: rotate(var(--a0, 0deg)); }
[data-deco-tema]:is(:hover, :focus-within, .deco-ativo) .card-motivo .mv-minutos { animation: mv-ponteiro 9s linear infinite; }
[data-deco-tema]:is(:hover, :focus-within, .deco-ativo) .card-motivo .mv-horas { animation: mv-ponteiro 108s linear infinite; }
@keyframes mv-ponteiro { from { transform: rotate(var(--a0, 0deg)); } to { transform: rotate(calc(var(--a0, 0deg) + 360deg)); } }
.card-motivo .mv-barra { transform-box: fill-box; transform-origin: 50% 100%; }
[data-deco-tema]:is(:hover, :focus-within, .deco-ativo) .card-motivo .mv-barra { animation: mv-respira 1.6s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 120ms); }
@keyframes mv-respira { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.14); } }
.card-motivo .mv-linha { transform-box: fill-box; transform-origin: 0 50%; }
[data-deco-tema]:is(:hover, :focus-within, .deco-ativo) .card-motivo .mv-linha { animation: mv-escreve 1.8s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 200ms); }
@keyframes mv-escreve { 0% { transform: scaleX(.15); opacity: .35; } 55%, 100% { transform: scaleX(1); opacity: 1; } }

/* ── 3. o HUB do provisionamento — ilustração do EFEITO, sem ordem de etapas ──
   🔴 Um trilho em linha reta diria «primeiro isto, depois aquilo» — e a SEQUÊNCIA da esteira
   é matéria de patente (FRONTEIRA-DE-DIVULGACAO §4). O hub diz só «a máquina nova sai com
   tudo isto»: raios que partem do centro, nenhum antes do outro. */
.prov-hub { display: grid; gap: clamp(1.2rem, 3vw, 2.4rem); grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; margin-top: 2rem; }
@media (max-width: 820px) { .prov-hub { grid-template-columns: 1fr; } .prov-hub svg { max-width: 280px; margin-inline: auto; } }
.prov-hub svg { display: block; width: 100%; height: auto; overflow: visible; }
.prov-hub .ph-raio { stroke: color-mix(in srgb, var(--fg) 16%, transparent); stroke-width: 1.5; fill: none; }
.prov-hub .ph-luz {
  stroke: var(--rosa-texto); stroke-width: 3; fill: none; stroke-linecap: round;
  stroke-dasharray: 16 100; stroke-dashoffset: 16;
  animation: ph-corre 3.2s cubic-bezier(.45,.05,.55,.95) infinite; animation-delay: calc(var(--k, 0) * 400ms);
}
.prov-hub .ph-luz:nth-of-type(even) { stroke: var(--azul-texto); }
@keyframes ph-corre { 0% { stroke-dashoffset: 16; opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
.prov-hub .ph-no { fill: var(--bg-soft); stroke: var(--rosa-texto); stroke-width: 1.5; }
.prov-hub .ph-no-2 { stroke: var(--azul-texto); }
.prov-hub .ph-aro { fill: none; stroke: var(--rosa-texto); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: ph-aro 3.2s ease-out infinite; animation-delay: calc(var(--k, 0) * 400ms + 1.9s); }
@keyframes ph-aro { 0% { transform: scale(.6); opacity: 0; } 20% { opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.prov-hub .ph-centro { fill: color-mix(in srgb, var(--rosa) 16%, var(--bg-soft)); stroke: var(--rosa-texto); stroke-width: 2; }
.prov-hub .ph-onda { fill: none; stroke: var(--rosa-texto); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: ph-aro 3.2s ease-out infinite; }
.prov-hub .ph-icone { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── 4. a faixa de foto — imagem REAL (Unsplash/Pexels, ver /assets/img/fotos/CREDITOS.md) entre texto e telas ──
   Sem texto por cima: a foto é ambiente, não fundo de leitura — o contraste do texto não depende dela.
   As bordas esvaem no fundo da página, e no tema claro um véu leve baixa o peso da foto escura. */
.foto-faixa { position: relative; margin: 1.8rem 0 0; border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 1; background: var(--bg-inset); }
.foto-faixa img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 6s ease-out; }
.foto-faixa.deco-vista img, .foto-faixa:hover img { transform: none; }
.foto-faixa::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 40%, transparent), transparent 22%, transparent 78%, color-mix(in srgb, var(--bg) 40%, transparent)),
              linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--bg) 35%, transparent)); }
:root[data-theme="light"] .foto-faixa.escura::after { background: linear-gradient(90deg, rgb(255 255 255 / .35), rgb(255 255 255 / .08) 25%, rgb(255 255 255 / .08) 75%, rgb(255 255 255 / .35)); }
@media (max-width: 600px) { .foto-faixa { aspect-ratio: 2 / 1; } }

@media (prefers-reduced-motion: reduce) {
  .foto-faixa img { transform: none; transition: none; }
  .card-fio, .card-motivo { transition: none !important; }
  .card-fio { transform: none; opacity: 1; }
  .card-fio::after { display: none; }
  .card-motivo svg, .card-motivo svg * { animation: none !important; }
  .card-motivo [pathLength] { stroke-dasharray: none; stroke-dashoffset: 0; }
  .card-motivo .mv-no { opacity: 1; }
  body :is(.card, .numero)[data-deco-tema]:is(:hover, :focus-within) { transform: none; }
  .prov-hub .ph-luz { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: .45; }
  .prov-hub .ph-aro, .prov-hub .ph-onda { animation: none; opacity: 0; }
}

/* ============================================================================
   27/09 · os cards de DISCIPLINA da página do InvenTI (ITAM, ITSM, ITOM, Segurança e LGPD).
   A classe `carta` não tinha regra nenhuma: os quatro cards saíam sem borda nem fundo, soltos
   na página. Agora levam `card` (mesma borda, fundo, sombra e desenho de canto dos outros) e um
   rodapé que mostra, um de cada vez, os módulos reais da disciplina (`giro.js`).
   ========================================================================== */
.carta { display: flex; flex-direction: column; }
.carta h4 { margin: 0 0 .45em; }
.carta > p { margin-bottom: .8rem; font-size: .93rem; }
.carta-giro {
  list-style: none; margin: auto 0 0; padding: .75rem 0 0; display: grid; align-items: start;
  border-top: 1px dashed color-mix(in srgb, var(--ac, var(--rosa)) 45%, var(--line));
}
.carta-giro li {
  grid-area: 1 / 1;   /* todos na MESMA célula: o card cresce até o item mais alto, e nada vaza */
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
.carta-giro li.giro-ativo { opacity: 1; transform: none; pointer-events: auto; }
.carta-giro a {
  display: block; font: 400 .84rem/1.4 var(--texto); letter-spacing: 0; color: var(--fg-soft); text-decoration: none;
}
.carta-giro a b { color: var(--fg); font-weight: 600; }
.carta-giro a:hover b, .carta-giro a:focus-visible b { color: var(--rosa-texto); text-decoration: underline; }
.carta-giro a:focus-visible { outline: 2px solid var(--azul-texto); outline-offset: 2px; border-radius: 4px; }
.giro-pausa {
  justify-self: end; grid-column: 1 / -1; width: 2.2rem; height: 2.2rem; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--fg-soft); font-size: .75rem;
}
.giro-pausa:hover { color: var(--fg); border-color: var(--rosa); }
.giro-pausa:focus-visible { outline: 3px solid var(--azul-texto); outline-offset: 2px; }

/* parado (movimento reduzido ou «Pausar animações»): a lista inteira, sem giro */
.giro-parado .carta-giro li { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; margin-bottom: .4rem; }
@media (prefers-reduced-motion: reduce) {
  .carta-giro li { transition: none; }
}

/* 28/09 · card de vitrine «dor → resultado»: a dor em destaque discreto, o resultado logo abaixo */
.card .card-dor { margin: .2rem 0 .5rem; font: 600 .95rem/1.4 var(--texto); color: var(--fg); }
.card .card-dor::before { content: "“"; color: var(--rosa-texto); margin-right: .1em; }
.card .card-dor::after { content: "”"; color: var(--rosa-texto); margin-left: .05em; }
.cta-lead .btn { min-height: 44px; }

/* O motivo anima quando o card ESTA NA TELA (deco-ativo, pelo IntersectionObserver), não só no hover. */
@media (prefers-reduced-motion: reduce) {
  .deco-ativo .card-motivo *, .deco-ativo > .card-fio::after { animation: none !important; }
}