/* ══════════════════════════════════════════════
   craft.css — camada da auditoria de UX/UI de 10/nov/2026
   Carrega por último na home. O que tem aqui:
   1. toque (realce, atraso, alvo mínimo, hover que gruda)
   2. foco visível com contraste
   3. cards que viram: faces, verso tocável, botão de voltar
   4. ícones dos cards (Como posso ajudar e Sobre) na língua dos grafismos
   5. tipografia fina e estabilidade de layout
   Referência: design-system-v2 (Hub).
══════════════════════════════════════════════ */

/* ── 1. Toque ── */
a,button,summary,[role=button]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* o alvo cresce sem mexer no desenho: a área invisível passa do traço */
.lab-case-link,.wc-ponto,.service-reset,.card-site{position:relative}
.lab-case-link::before,.wc-ponto::before,.service-reset::before,.card-site::before{content:"";position:absolute;inset:-14px -8px}
.wc-ponto::before{inset:-11px 0}
.service-reset::before{inset:-9px}
/* em tela de toque o :hover gruda depois do toque: o card não fica levantado */
@media(hover:none){
 .sb-card-frente:hover{transform:none}
 .portfolio-v5 .flip-service:hover .service-front{box-shadow:inset 0 1px 1px rgba(255,255,255,.85),inset 0 -1px 1px rgba(20,45,30,.05)}
}
/* resposta ao toque: o card cede um pouco sob o dedo */
.service-front:active{transform:scale(.985)}
.sb-card-frente:active{transform:translateY(-1px) scale(.985)}
.service-front,.sb-card-frente{transition-timing-function:var(--ease-saida)}
@media(prefers-reduced-motion:reduce){.service-front:active,.sb-card-frente:active{transform:none}}

/* ── 2. Foco ── */
/* o anel era verde a 45%: 2,1:1 no papel, abaixo dos 3:1 pedidos para contorno de foco */
:focus-visible{outline:var(--anel);outline-offset:3px}
.wc-ponto:focus-visible{outline:var(--anel)}
.service-back :focus-visible{outline:var(--anel-prancha)}
/* sobre a prancha nada é curvo nem fora da grade: o foco é um quadro reto, um módulo (8px) em volta do controle */
.prancha .btn{position:relative}
.prancha .btn:focus-visible{outline:0}
.prancha .btn:focus-visible::after{content:"";position:absolute;inset:-9px;border:2px solid var(--luz);pointer-events:none}
.prancha :focus-visible:not(.btn){outline:2px solid var(--luz);outline-offset:-2px;border-radius:0}

/* ── 3. Cards que viram ── */
/* a face que entra aparece já; a que sai só some depois de passar dos 90°.
   Antes as duas trocavam aos 100ms: o card sumia um instante e o foco não achava o verso. */
.portfolio-v5 .flip-service .service-face{transition:box-shadow .35s,border-color .35s,transform var(--dur-fast) var(--ease-saida),visibility 0s linear .36s}
.portfolio-v5 .flip-service.is-flipped .service-back,
.portfolio-v5 .flip-service:not(.is-flipped) .service-front{visibility:visible;transition-delay:0s}
.service-turn{transition-timing-function:var(--ease-virada);transition-duration:var(--dur-virada)}
@media(hover:none),(pointer:coarse){.service-back{cursor:pointer}}
@media(prefers-reduced-motion:reduce){.portfolio-v5 .flip-service .service-face{transition:none}.service-turn{transition-duration:0s}}

/* ── 4. Ícones ──
   Prancheta de 64×48 (8×6 módulos de 8). Três pesos de traço, os mesmos dos
   objetos da faixa: linha 1,3 · detalhe ,85 · construção ,6 tracejada.
   Nó vazado = estado; um único ponto cheio por desenho = a decisão. */
svg.ic{stroke:var(--verde);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;fill:none;overflow:visible}
svg.ic *{vector-effect:non-scaling-stroke}
svg.ic>*{transform-box:fill-box;transform-origin:center;transition:transform .5s var(--ease-saida),opacity .4s,stroke-dasharray .5s var(--ease-saida),stroke .4s}
svg.ic .ic-det{stroke-width:.85}
svg.ic .ic-cons{stroke:var(--tinta-3);stroke-width:.6;stroke-dasharray:2 3;opacity:.75}
svg.ic circle.ic-no{fill:var(--papel-1);stroke-width:1}
svg.ic circle.ic-ponto{fill:var(--verde-vivo);stroke:none}
:root[data-theme=dark] svg.ic circle.ic-no{fill:#222423}
.portfolio-v5 .service-front .service-art.ic{width:64px;height:48px}
.sb-arte.ic{width:64px;height:48px}
@media(max-width:760px){.portfolio-v5 .service-front .service-art.ic,.sb-arte.ic{width:48px;height:36px}}
/* o gesto de cada ícone: um movimento só, curto, que diz o que o card promete */
:is(.flip-service,.sb-card-frente):is(:hover,:focus-visible,:focus-within) .ic-decidir .ic-ponto{transform:translateX(4px)}
:is(.flip-service,.sb-card-frente):is(:hover,:focus-visible,:focus-within) .ic-fluxo .ic-ruido{opacity:.25}
:is(.flip-service,.sb-card-frente):is(:hover,:focus-visible,:focus-within) .ic-fluxo .ic-ponto{transform:translateX(3px)}
:is(.flip-service,.sb-card-frente):is(:hover,:focus-visible,:focus-within) .ic-sistema .ic-desce{transform:translateY(-3px)}
:is(.flip-service,.sb-card-frente):is(:hover,:focus-visible,:focus-within) .ic-sistema .ic-sobe{transform:translateY(3px)}
:is(.flip-service,.sb-card-frente):is(:hover,:focus-visible,:focus-within) .ic-ia .ic-anel{transform:scale(1.15)}
:is(.flip-service,.sb-card-frente):is(:hover,:focus-visible,:focus-within) .ic-valor .ic-ponto{transform:translateY(-4px)}
:is(.flip-service,.sb-card-frente):is(:hover,:focus-visible,:focus-within) .ic-rede .ic-falta{stroke:var(--verde);stroke-dasharray:5 0;opacity:1}
:is(.flip-service,.sb-card-frente):is(:hover,:focus-visible,:focus-within) .ic-origem .ic-ponto{transform:translate(3px,-3px)}
:is(.flip-service,.sb-card-frente):is(:hover,:focus-visible,:focus-within) .ic-fora .ic-barras{transform:scaleY(.7)}
:is(.flip-service,.sb-card-frente):is(:hover,:focus-visible,:focus-within) .ic-design .ic-supor{stroke:var(--verde);stroke-dasharray:5 0;opacity:1}
:is(.flip-service,.sb-card-frente):is(:hover,:focus-visible,:focus-within) .ic-jeito .ic-pendulo{transform:translateX(22px)}
@media(prefers-reduced-motion:reduce){svg.ic>*{transition:none;transform:none!important}}

/* ── 5. Tipografia fina e estabilidade ── */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.timeline-year,.year-label,.proof-value,.chip{font-variant-numeric:tabular-nums}
/* a barra de rolagem tem lugar reservado: abrir um case não empurra a página para o lado */
html{scrollbar-gutter:stable}