/* Infinity Ventiladores – camada futurista ("tech premium")
   Carregada depois de site.css em todas as páginas que usam views/partials/head.ejs.
   O painel /admin e /admin/entrar têm <head> próprio e NÃO carregam este arquivo.
   Regras: nada aqui desenha produto; os efeitos são abstratos (grade, linhas, brilho).
   Sem animações infinitas (nada para pausar fora da tela); prefers-reduced-motion
   desliga as transições (ver fim do arquivo e site.css). */

/* Tipografia no estilo Apple (pedido da cliente, 05/10/2026): nos aparelhos Apple, a própria SF Pro do sistema
   (-apple-system / BlinkMacSystemFont); nos demais, Inter (auto-hospedada em site.css, 400/500/600), a mais parecida.
   Títulos em 600 com entreletra fechada; sem negrito sintético (pesos 700/800 caem no 600 da Inter). Os rótulos que
   eram mono (JetBrains) usam a mesma família, com algarismos tabulares. */
:root {
  --f-head: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-mono: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* gradiente de ação: todas as paradas com contraste ≥ 4,8:1 para texto branco */
  --grad: linear-gradient(115deg, #104f8e 0%, #1565a8 50%, #127aa6 100%);
  /* gradiente vivo do logotipo: só para linhas, ícones e brilhos (nunca atrás de texto) */
  --grad-vivid: linear-gradient(115deg, #1569ab 0%, #1b8cc8 50%, #24b6cd 100%);
  --edge: linear-gradient(135deg, #24b6cd 0%, rgba(27, 140, 200, .35) 45%, rgba(201, 166, 94, .9) 100%);
  --cyan-lt: #8fe3f0;
  --hud-ink: #11598f;                      /* rótulos HUD sobre claro: 7,4:1 */
  --glass: rgba(6, 22, 40, .95);
  --glass-solid: #0a1b2c;
  --glass-line: rgba(143, 227, 240, .14);
  --on-dark: #d7e6f1; --on-dark-2: #b9cddd; --on-dark-3: #8fa7bb;
  --focus: #0a7d95;                        /* 4,8:1 sobre branco */
  --focus-ring: rgba(36, 182, 205, .28);
  --glow-1: 0 0 0 1px rgba(36, 182, 205, .14), 0 22px 48px -24px rgba(12, 32, 51, .4), 0 14px 38px -20px rgba(36, 182, 205, .5);
  --grid-line: rgba(143, 227, 240, .075);
}

::selection { background: rgba(36, 182, 205, .28); }
/* barra de rolagem e cursor de texto no tom do cromo escuro (só na home, que é escura de ponta a ponta) */
html:has(body.home) { scrollbar-color: rgba(143, 227, 240, .3) #050e18; }
body.home { caret-color: #6fe0f0; }

/* zonas escuras: foco claro */
.topbar, .header, .drawer-panel, .page-head, .footer, .lightbox { --focus: #6fe0f0; --focus-ring: rgba(111, 224, 240, .25); }

/* ------------------------------------------------ calha lateral
   Em site.css, .two-col, .dash, .pdp-sections, .footer-top e .footer-bottom usam o atalho
   "padding" e zeram o padding lateral do .container: no celular o conteúdo encostava na
   borda e, no desktop, ficava desalinhado do cabeçalho. */
.container.two-col, .container.dash, .container.pdp-sections, .container.footer-top, .container.footer-bottom { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ------------------------------------------------ foco visível (ciano) */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.btn:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--focus-ring); }
.g-main button.g-zoom-area:focus-visible { outline: 2px solid var(--focus); outline-offset: -6px; border-radius: inherit; }
.video button:focus-visible { outline: 2px solid #6fe0f0; outline-offset: -6px; }
.opt input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 3px; }
.input:focus { border-color: #127aa6; box-shadow: 0 0 0 4px rgba(36, 182, 205, .2); }

/* ------------------------------------------------ tipografia */
h1, h2, h3, h4 { font-family: var(--f-head); letter-spacing: -.02em; }
h1 { font-weight: 700; letter-spacing: -.035em; }
h2 { font-weight: 700; letter-spacing: -.028em; }
h3 { font-weight: 700; }
.field label, .label { font-family: var(--f-body); font-weight: 600; }
.opt-group .label em { font-family: var(--f-body); }

/* rótulo HUD */
.eyebrow { gap: 10px; font: 500 12px/1.3 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--hud-ink); }
.eyebrow::before { width: 7px; height: 7px; flex: none; border-radius: 1.5px; transform: rotate(45deg); background: #24b6cd;
  box-shadow: 0 0 0 3px rgba(36, 182, 205, .16), 0 0 12px 1px rgba(36, 182, 205, .7); }
.eyebrow::after { content: ''; width: 28px; height: 1px; flex: none; background: linear-gradient(90deg, var(--gold-2), transparent); }
.eyebrow.on-dark, .page-head .eyebrow, .footer .eyebrow, .drawer .eyebrow { color: var(--cyan-lt); }
.pcard-kicker { font: 500 12px/1.3 var(--f-mono); letter-spacing: .1em; color: var(--muted); }
.crumbs { font: 400 12px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.result-meta .count { font: 500 13px/1.3 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: 10px; }
.result-meta .count::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #24b6cd; box-shadow: 0 0 0 3px rgba(36, 182, 205, .16), 0 0 10px rgba(36, 182, 205, .7); flex: none; }
.protocol { font: 500 22px/1.2 var(--f-mono); letter-spacing: .06em; border-color: rgba(36, 182, 205, .5); background: linear-gradient(180deg, #fff, #eef8fb); }

/* ------------------------------------------------ botões */
.btn { font-family: var(--f-head); font-weight: 700; letter-spacing: .01em; }
.btn-primary { position: relative; isolation: isolate; overflow: hidden; background: var(--grad); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(36, 182, 205, .28), 0 10px 26px -12px rgba(27, 140, 200, .9); }
.btn-primary::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .1) 50%, transparent 70%); transform: translateX(-110%); transition: transform .7s var(--ease); }
.btn-primary:hover { color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 0 0 1px rgba(36, 182, 205, .6), 0 14px 34px -12px rgba(36, 182, 205, .8); }
.btn-primary:hover::after { transform: translateX(110%); }
.btn-primary:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 6px var(--focus-ring); }
.btn-outline:hover { border-color: #24b6cd; box-shadow: 0 0 0 3px rgba(36, 182, 205, .14); }
.link-arrow { font-family: var(--f-head); font-weight: 700; }

/* ------------------------------------------------ topo: vidro escuro */
.topbar { background: #050f1b; color: #c7dcec; border-bottom: 1px solid rgba(143, 227, 240, .08); }
.topbar a { color: #e6f1f9; }
.topbar a:hover { color: #fff; }
.topbar a .ic { color: #6fe0f0; }

.header { background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--glass-line); box-shadow: 0 12px 32px -20px rgba(0, 0, 0, .7); color: var(--on-dark); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .header { background: var(--glass-solid); } }
.header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 4%, rgba(36, 182, 205, .7) 32%, rgba(201, 166, 94, .55) 68%, transparent 96%); }
.header .logo img { filter: drop-shadow(0 0 14px rgba(36, 182, 205, .28)); }
.nav > a, .nav-drop > button { color: var(--on-dark); font-weight: 500; letter-spacing: .005em; transition: color .2s, background-color .2s, box-shadow .2s; }
.nav > a:hover, .nav-drop > button:hover { color: #fff; background: rgba(143, 227, 240, .08); }
.nav > a.is-active, .nav-drop.is-active > button { color: var(--cyan-lt); background: rgba(36, 182, 205, .1); box-shadow: inset 0 -2px 0 -0.5px #24b6cd; }
.nav-drop.open > button { color: #fff; background: rgba(143, 227, 240, .1); }

.header .icon-btn, .drawer .icon-btn { background: rgba(255, 255, 255, .04); border-color: rgba(143, 227, 240, .2); color: #e6f1f9; transition: color .2s, border-color .2s, background-color .2s, box-shadow .2s; }
.header .icon-btn:hover, .drawer .icon-btn:hover { color: #fff; border-color: rgba(143, 227, 240, .55); background: rgba(36, 182, 205, .12); box-shadow: 0 0 18px -4px rgba(36, 182, 205, .55); }
.header .btn-outline, .drawer-foot .btn-outline { background: rgba(255, 255, 255, .04); color: #eef5fa; border-color: rgba(143, 227, 240, .28); }
.header .btn-outline:hover, .drawer-foot .btn-outline:hover { color: #fff; border-color: #5fd6e8; background: rgba(36, 182, 205, .12); box-shadow: 0 0 20px -6px rgba(36, 182, 205, .6); }
.header .btn-outline .ic { color: #6fe0f0; }

/* mega menu */
.mega { background: #091828; border-color: rgba(143, 227, 240, .16); color: var(--on-dark);
  box-shadow: 0 34px 80px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(36, 182, 205, .06), 0 0 60px -30px rgba(36, 182, 205, .45); }
.mega::before { content: ''; position: absolute; left: 22px; right: 22px; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(36, 182, 205, .8), transparent); }
.mega-cats a { color: #e3eef6; font-weight: 500; transition: background-color .2s, color .2s, box-shadow .2s; }
.mega-cats a:hover { background: rgba(36, 182, 205, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(143, 227, 240, .2); }
/* sem contagem de modelos (26/10/2026: os números de categorias que se sobrepõem confundiam); só uma seta discreta */
.mega-cats a .ic { flex: none; color: #6fe0f0; opacity: .35; transition: opacity .2s, transform .2s var(--ease); }
.mega-cats a:hover .ic, .mega-cats a:focus-visible .ic { opacity: 1; transform: translateX(3px); }
.mega-side { background: linear-gradient(160deg, rgba(36, 182, 205, .12), rgba(255, 255, 255, .02)); border: 1px solid rgba(143, 227, 240, .14); }
.mega-side strong { color: #fff; font-family: var(--f-head); }
.mega-side p { color: var(--on-dark-2); }

/* busca do topo */
.search-pop { background: rgba(8, 22, 37, .98); border-bottom-color: var(--glass-line); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .7); }

/* gaveta mobile */
.drawer-backdrop { background: rgba(3, 10, 18, .64); }
.drawer-panel { background: linear-gradient(180deg, #0b1d2f 0%, #071422 100%); color: var(--on-dark); border-left: 1px solid var(--glass-line);
  box-shadow: -30px 0 80px -30px rgba(0, 0, 0, .8); }
.drawer-head { border-bottom-color: var(--glass-line); }
.drawer-head img { filter: drop-shadow(0 0 14px rgba(36, 182, 205, .28)); }
.drawer-body > a, .acc > summary { color: #eef5fa; border-bottom-color: rgba(143, 227, 240, .1); font-weight: 700; }
.drawer-body > a .ic, .acc > summary .ic { color: #6fe0f0; }
.drawer-body > a:hover, .acc > summary:hover { color: #fff; }
.acc-list a { color: #c3d5e3; }
.acc-list a:hover { background: rgba(36, 182, 205, .1); color: #fff; }
.drawer .muted { color: var(--on-dark-3); }
.drawer-foot { border-top-color: var(--glass-line); }

/* ------------------------------------------------ cabeçalho de página: grade + brilho */
.page-head { position: relative; isolation: isolate; overflow: hidden; color: var(--on-dark-2); border-bottom: 0;
  padding: clamp(32px, 4.5vw, 56px) 0 clamp(30px, 4vw, 48px);
  background:
    radial-gradient(620px 300px at 88% -12%, rgba(36, 182, 205, .3), transparent 70%),
    radial-gradient(560px 320px at -6% 125%, rgba(21, 105, 171, .34), transparent 70%),
    linear-gradient(165deg, #071523 0%, #0b1d2f 48%, #0f2c48 100%); }
.page-head::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 36px 36px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 85% 130% at 72% 0%, #000 15%, transparent 78%); mask-image: radial-gradient(ellipse 85% 130% at 72% 0%, #000 15%, transparent 78%); }
.page-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(36, 182, 205, .85) 30%, rgba(201, 166, 94, .75) 70%, transparent) no-repeat;
  animation: fx-line-in 1.4s var(--ease) both; transform-origin: left center; }
@keyframes fx-line-in { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
.page-head h1 { color: #fff; text-wrap: balance; }
.page-head p { color: var(--on-dark-2); }
.page-head p strong { color: #fff; }
.page-head a { color: #cfe6f3; }
.page-head a:hover { color: #fff; }
.page-head .crumbs { color: var(--on-dark-3); }
.page-head .crumbs a { color: #c3d5e3; }
.page-head .crumbs a:hover { color: var(--cyan-lt); }
.page-head .crumbs li + li::before { color: rgba(143, 227, 240, .45); }
.page-head .crumbs [aria-current] { color: var(--cyan-lt); }

/* ------------------------------------------------ cards: borda em gradiente + cantos HUD */
.pcard, .cat-card, .support, .feat, .dash-card { position: relative; isolation: isolate; }
.pcard, .cat-card, .support, .dash-card, .catalog-grid a {
  transition: opacity .6s var(--ease), transform .45s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.feat { transition: box-shadow .3s var(--ease), border-color .3s; }
/* borda em gradiente (aparece no hover/foco) */
.pcard::after, .cat-card::after, .support::after, .feat::after, .dash-card::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1px; background: var(--edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s var(--ease); }
/* cantos HUD (superior esquerdo e inferior direito) */
.pcard::before, .cat-card::before, .support::before, .feat::before, .dash-card::before {
  --c: rgba(36, 182, 205, .9); --l: 14px; --t: 1.5px;
  content: ''; position: absolute; inset: 8px; z-index: 3; pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) left top / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) right bottom / var(--t) var(--l);
  background-repeat: no-repeat; opacity: 0; transform: scale(1.03); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.pcard:hover, .cat-card:hover, .support:hover, .dash-card:hover, .feat:hover { border-color: rgba(36, 182, 205, .35); box-shadow: var(--glow-1); }
.pcard:hover::after, .cat-card:hover::after, .support:hover::after, .feat:hover::after, .dash-card:hover::after,
.pcard:focus-within::after, .cat-card:focus-visible::after, .support:focus-visible::after, .dash-card:focus-visible::after { opacity: 1; }
.pcard:hover::before, .cat-card:hover::before, .support:hover::before, .feat:hover::before, .dash-card:hover::before,
.pcard:focus-within::before, .cat-card:focus-visible::before, .support:focus-visible::before, .dash-card:focus-visible::before { opacity: 1; transform: none; }
.cat-card.all::before { --c: rgba(255, 255, 255, .85); }
.cat-card.all:hover { box-shadow: 0 0 0 1px rgba(143, 227, 240, .4), 0 22px 48px -22px rgba(21, 101, 168, .7); }

.pcard :is(h2, h3) { font-weight: 700; letter-spacing: -.02em; }
.pcard-body { border-top-color: var(--line); }
.pcard:hover .pcard-body { border-top-color: rgba(36, 182, 205, .25); }
.pcard .specs-mini .ic { color: #127aa6; }
.cat-card .go { transition: background-color .2s, color .2s, box-shadow .2s; }
.cat-card:hover .go { background: var(--grad); color: #fff; box-shadow: 0 0 0 1px rgba(36, 182, 205, .4), 0 6px 18px -6px rgba(36, 182, 205, .8); }
.feat .ico, .dash-card .ico { background: linear-gradient(145deg, #eef8fb, #e3eff8); color: var(--brand); box-shadow: inset 0 0 0 1px rgba(36, 182, 205, .28); }
.support .ico { background: var(--grad-vivid); box-shadow: 0 10px 24px -10px rgba(36, 182, 205, .75), inset 0 1px 0 rgba(255, 255, 255, .25); }
.catalog-grid a:hover { border-color: rgba(36, 182, 205, .4); box-shadow: var(--glow-1); }

/* blocos de leitura: continuam claros, só com acabamento */
.form-card { background: linear-gradient(90deg, #1569ab, #24b6cd 55%, rgba(201, 166, 94, .85)) top / 100% 2px no-repeat, #fff; }
.form-section legend span { border-radius: 8px; background: #eef8fb; color: var(--brand-ink); font: 500 13px var(--f-mono);
  box-shadow: inset 0 0 0 1px rgba(36, 182, 205, .5), 0 0 14px -4px rgba(36, 182, 205, .6); }
.aside-card { border: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-soft), #fff); }
.quick div { border: 1px solid var(--line); background: linear-gradient(180deg, #fff, var(--bg-soft)); }
.quick .ic { color: #127aa6; }
.subnav a { font-weight: 700; }
.subnav a.is-on { color: var(--brand-ink); border-bottom-color: #24b6cd; }
.table thead th { letter-spacing: .01em; }

/* galeria do produto: moldura HUD discreta (não toca na foto) */
.g-main::after { --c: rgba(21, 105, 171, .38); --l: 18px; --t: 1.5px;
  content: ''; position: absolute; inset: 12px; z-index: 1; pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) left top / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) right top / var(--t) var(--l);
  background-repeat: no-repeat; }
.g-thumbs button.is-on { border-color: #24b6cd; box-shadow: 0 0 0 2px rgba(36, 182, 205, .3), 0 0 16px -4px rgba(36, 182, 205, .7); }

/* ------------------------------------------------ rodapé */
.footer { position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(900px 320px at 50% -8%, rgba(36, 182, 205, .14), transparent 70%), linear-gradient(180deg, #08172a 0%, #050f1b 100%); }
.footer::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px; background-position: center -1px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.footer::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(36, 182, 205, .8) 35%, rgba(201, 166, 94, .6) 65%, transparent); }
.footer h3 { display: flex; align-items: center; gap: 10px; font: 500 12px/1.3 var(--f-mono); letter-spacing: .16em; color: var(--cyan-lt); }
.footer h3::before { content: ''; width: 6px; height: 6px; flex: none; border-radius: 1px; transform: rotate(45deg); background: #24b6cd; box-shadow: 0 0 10px 1px rgba(36, 182, 205, .75); }
.footer a { transition: color .2s; }
.footer a:hover { color: #fff; text-decoration-color: #24b6cd; }
.footer .brand img { filter: drop-shadow(0 0 16px rgba(36, 182, 205, .25)); }
.footer-bottom { border-top-color: transparent; font: 400 12px/1.5 var(--f-mono); letter-spacing: .03em; color: var(--on-dark-3);
  background: linear-gradient(90deg, rgba(143, 227, 240, .22), rgba(143, 227, 240, .08) 60%, rgba(201, 166, 94, .25)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat; }

/* ------------------------------------------------ cabeçalho no desktop (≥ 1280 px, menu completo)
   Menu numa barra única de vidro (26/10/2026: as pílulas soltas quebravam em duas linhas com zoom). Nunca quebra
   linha: rótulos curtos ("Manual", "Assistência"; os nomes completos ficam na gaveta); e, se ainda faltar espaço (zoom,
   espaçamento de texto WCAG 1.4.12), o site.js põe .is-compacto no cabeçalho e o menu vai para a gaveta. */
@media (min-width: 1280px) {
  .header .container { gap: 16px; }
  .header .logo img { height: 32px; }
  .nav { flex: none; flex-wrap: nowrap; gap: 2px; margin-inline: auto; padding: 4px; border-radius: 999px;
    border: 1px solid rgba(143, 227, 240, .14); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px -18px rgba(0, 0, 0, .8); }
  .nav > a, .nav-drop > button { padding: 8px 14px; border-radius: 999px; font-size: 14px; white-space: nowrap; box-shadow: none; }
  .nav > a:hover, .nav-drop > button:hover, .nav-drop.open > button { color: #fff; background: rgba(143, 227, 240, .09); }
  .nav > a.is-active, .nav-drop.is-active > button { color: #fff; background: linear-gradient(180deg, rgba(36, 182, 205, .3), rgba(21, 101, 168, .3));
    box-shadow: inset 0 0 0 1px rgba(95, 214, 232, .5), 0 4px 14px -6px rgba(36, 182, 205, .7); }
  .nav > a:focus-visible, .nav-drop > button:focus-visible { outline: 2px solid #6fe0f0; outline-offset: 1px; }
  .nav-drop > button .ic { opacity: .7; }
  .header-actions { flex: none; gap: 8px; }
  .header-actions .btn-sm { padding: 0 14px; }
  .header.is-compacto .nav, .header.is-compacto .header-actions .hide-md { display: none; }
  .header.is-compacto .menu-btn { display: inline-grid; }
  .header.is-compacto .header-actions { margin-left: auto; }
}

/* ------------------------------------------------ movimento reduzido e impressão */
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after { display: none; }
  .page-head::after { animation: none; }
  .pcard::before, .cat-card::before, .support::before, .feat::before, .dash-card::before { transform: none; }
}
@media print {
  .page-head { background: none; color: #000; padding: 12px 0; }
  .page-head::before, .page-head::after { display: none; }
  .page-head h1, .page-head p, .page-head .crumbs, .page-head .crumbs a { color: #000; }
}

/* ---------- tipografia estilo Apple (05/10/2026) ---------- */
html { font-synthesis-weight: none; }
body { letter-spacing: -.003em; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.022em; }
h1 { letter-spacing: -.035em; }
.eyebrow, .mono-label { font-variant-numeric: tabular-nums; letter-spacing: .1em; }


/* ================================================================ auditoria de animações (09/10/2026), páginas internas
   Mesmas regras aplicadas na home (home-tech.css): entrada em sequência do cabeçalho de página e da ficha do produto,
   resposta ao clique, sem deslocamento no :hover em telas de toque, e troca de foto da galeria com esmaecimento.
   Tudo com a curva padrão --ease; com movimento reduzido só fica um esmaecimento curto (sem deslocamento). */
@media (prefers-reduced-motion: no-preference) {
  .page-head .crumbs, .page-head h1, .page-head p, .page-head .page-actions { animation: fx-in .6s var(--ease) both; }
  .page-head h1 { animation-delay: .08s; }
  .page-head p, .page-head .page-actions { animation-delay: .16s; }
  /* página do produto: galeria e coluna de informações */
  .pdp .gallery { animation: fx-in .7s var(--ease) both; }
  .pdp-info > * { animation: fx-in .6s var(--ease) both; animation-delay: .3s; }
  .pdp-info > :nth-child(1) { animation-delay: .06s; }
  .pdp-info > :nth-child(2) { animation-delay: .12s; }
  .pdp-info > :nth-child(3) { animation-delay: .18s; }
  .pdp-info > :nth-child(4) { animation-delay: .24s; }
}
@keyframes fx-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }

/* resposta ao clique: encolhe de leve enquanto pressionado (120 ms) e volta na transição normal.
   Em site.css o .btn descia 1 px; aqui vale para o site todo. Os botões do lightbox ficam de fora (usam transform para centrar). */
.btn:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
.icon-btn:active, .g-thumbs button:active, .opt label:active, .nav > a:active, .nav-drop > button:active { transform: scale(.95); transition-duration: .12s; }
.icon-btn, .g-thumbs button, .opt label { transition-property: transform, border-color, box-shadow, background-color, color; transition-duration: .2s; transition-timing-function: var(--ease), ease, ease, ease, ease; }
.pcard:active, .cat-card:active, .support:active, .dash-card:active, .catalog-grid a:active, .manual .models .chip:active, .mega-cats a:active, .acc-list a:active {
  transform: translateY(0) scale(.985); transition-duration: .12s; }

/* galeria do produto: a foto some e volta em 180 ms na troca (classe is-swap posta pelo site.js) */
.g-main img[data-main] { transition: opacity .18s ease; }
.g-main.is-swap img[data-main] { opacity: 0; }

/* toque: o :hover fica "grudado" depois do toque; só o deslocamento é desligado, cor e brilho continuam */
@media (hover: none) {
  .btn-primary:hover, .pcard:hover, .cat-card:hover, .support:hover { transform: none; }
  .pcard:hover .pcard-media img, .link-arrow:hover .ic { transform: none; }
}

/* movimento reduzido: entrada só com esmaecimento curto (vence o "animation: none !important" de site.css) */
@media (prefers-reduced-motion: reduce) {
  .page-head .crumbs, .page-head h1, .page-head p, .page-head .page-actions, .pdp .gallery, .pdp-info > * { animation: fx-fade .4s ease both !important; }
  .page-head h1, .pdp-info > :nth-child(2) { animation-delay: .06s !important; }
  .page-head p, .page-head .page-actions, .pdp-info > :nth-child(3) { animation-delay: .12s !important; }
  .pdp-info > :nth-child(n+4) { animation-delay: .18s !important; }
  .g-main img[data-main] { transition: none; }
}