/* =============================================================================
   Palm · main.css
   Folha de estilo única do site. Marca v2 (palm/marca/MARCA.md, 14/10/2026).

   Por que foi refeita: a v1 reproduzia a especificação visual do apple.com (cores,
   pílula de 980 px, escala 80/56/40, barra de 44 px com desfoque, blocos de largura
   total separados por 12 px com texto centralizado em cima e produto embaixo).
   Nenhum desses valores sobrevive aqui. O que é da Palm ficou e ganhou papel maior:
   o preto como palco, o mapa das veias e o Verde Infravermelho.

   Regras desta folha
   - TODA cor sai dos tokens de :root. Claro e escuro com seletor Sistema/Claro/Escuro
     (rodapé); o "palco" (Preto Palm) é igual nos dois temas.
   - Verde Infravermelho (--verde) só em veias, halos e no ponto dos selos. Ação
     (botões e links) em Verde profundo.
   - IBM Plex Sans para texto, Plex Mono para dado. Escala 61/39/25/20/16/14/12.
   - Botão retângulo de 10 px (40 px; 32 compacto). Pílula só em selo.
   - Cartão: borda de 1 px, cantos de 12 px, sem sombra. Barra de 56 px sólida.
   - Composição: grade de duas colunas, texto à esquerda e produto à direita,
     alternando o lado (.split / .split--rev). Faixas encostadas, separadas por
     linha de 1 px.

   Convenções
   - Nomes de classe no padrão bloco / bloco-elemento / bloco--variação.
   - Estados usam o prefixo "is-" e são ligados pelo JavaScript.
   - Pontos de quebra: 1068px (notebook), 833px (tablet) e 734px (celular).

   Índice
    1. Fontes e tokens
    2. Base
    3. Componentes comuns (botões, selos, seletor de tema)
    4. Barra de navegação, mega-menu, menu mobile e busca
    5. Faixas e grade de duas colunas (home)
    6. Motivo das veias e animação de leitura
    7. Home: grade de produtos
    8. Home: carrossel "Palm em operação"
    9. Páginas de produto
   10. Páginas específicas
   11. Rodapé e aviso de cookies
   12. Responsivo
   13. Movimento reduzido
   ============================================================================= */


/* =============================================================================
   1. Fontes e tokens
   ============================================================================= */

/* IBM Plex servida pelo próprio site (subconjunto latino, licença OFL em assets/fonts/OFL.txt):
   sem chamada a terceiros antes do aceite de cookies. */
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/plex-sans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* superfícies (mesmos nomes do Palm Access) */
  --pagina: #FFFFFF; --fundo: #F4F7F6; --sup: #FFFFFF; --sup2: #F4F7F6; --barra: #FFFFFF;
  /* texto e linhas */
  --texto: #10201B; --texto2: #56665F; --texto3: #7A8A84; --linha: #D6E0DC; --linha-forte: #7A8A84;
  /* ação: Verde profundo */
  --acao: #00785B; --acao-hover: #00664D; --acao-texto: #FFFFFF; --link: #00785B; --acao-suave: #E3F1EC;
  /* estados */
  --verde: #00D4A0; --verde-halo: rgba(0, 212, 160, .32);
  --aviso: #9A5B00; --aviso-fundo: #FBF1E2; --critico: #C2362F; --critico-fundo: #FBEAE8;
  /* palco: Preto Palm, igual nos dois temas (aberturas, veias, produto) */
  --palco: #000000; --palco-sup: #0E1513; --palco-sup2: #16201D; --palco-linha: #26332F;
  --palco-texto: #FFFFFF; --palco-texto2: #9AABA4;
  --palco-acao: #00A47C; --palco-acao-hover: #00B88A; --palco-acao-texto: #04110D; --palco-link: #5EDDBA;
  /* linhas endossadas */
  --clinico: #00A37B; --vamo: #6D28D8; --vamo-claro: #A87BF0; --vamo-fundo: #12061F;
  --branco: #FFFFFF;
  /* véu de menu e busca: cor chapada, sem desfoque */
  --veu: rgba(16, 32, 27, .4);
  --f: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.3, .1, .3, 1);
  --barra-h: 56px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --pagina: #0E1513; --fundo: #16201D; --sup: #16201D; --sup2: #1B2723; --barra: #0E1513;
    --texto: #E8EFEC; --texto2: #9AABA4; --texto3: #6F807A; --linha: #26332F; --linha-forte: #5E6F68;
    --acao: #00A47C; --acao-hover: #00B88A; --acao-texto: #04110D; --link: #5EDDBA; --acao-suave: #0F2C24;
    --aviso: #F0B45C; --aviso-fundo: #2A2010; --critico: #FF7A70; --critico-fundo: #331B19;
    --clinico: #5EDDBA;
    --veu: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

/* Contexto de palco: dentro dele, os tokens de texto e ação viram os do preto (nos dois temas). */
.band--palco, .phero--palco, .phero--vamo, .section--dark, .cta-band, .hero--dark, .prod--palco, .prod--vamo,
.store-card--dark, .store-card--purple, .mvv li, .form-success {
  --texto: var(--palco-texto); --texto2: var(--palco-texto2); --linha: var(--palco-linha);
  --acao: var(--palco-acao); --acao-hover: var(--palco-acao-hover); --acao-texto: var(--palco-acao-texto);
  --link: var(--palco-link); --acao-suave: rgba(0, 164, 124, .16); --sup: var(--palco-sup); --sup2: var(--palco-sup2);
  color: var(--texto);
}


/* =============================================================================
   2. Base
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 112px; }

body {
  margin: 0;
  background: var(--pagina);
  color: var(--texto);
  font-family: var(--f);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* foco (§8): anel de 2 px em Verde profundo, 2 px de afastamento */
:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; border-radius: 4px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 10000; background: var(--texto); color: var(--pagina); padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }

.container { width: min(1200px, 100% - 64px); margin-inline: auto; }
.container--narrow { width: min(760px, 100% - 64px); }

/* Revelar ao rolar: o JavaScript adiciona .js no <html> e .is-in em cada elemento. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }


/* =============================================================================
   3. Componentes comuns
   ============================================================================= */

/* Botões (§8): retângulo de cantos de 10 px, 40 px de altura, padding 10×18, Plex SemiBold 15 px, 8 px entre botões. */
.cta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 10px 18px; border-radius: 10px; border: 1.5px solid transparent;
  font: 600 15px/1.2 var(--f); text-align: center; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--acao); color: var(--acao-texto); }
.btn--primary:hover { background: var(--acao-hover); }
.btn--secondary { border-color: var(--acao); color: var(--link); background: transparent; }
.btn--secondary:hover { background: var(--acao-suave); }
.btn--sm, .btn--xs { min-height: 32px; padding: 5px 12px; font-size: 14px; }
.btn--lg { min-width: 200px; }

/* Link com seta: "Saiba mais ›" */
.more { font-size: inherit; font-weight: 600; }
.more::after { content: " ›"; }

/* Selos (§8): pílula pequena com ponto colorido; o texto fica na Tinta. Único lugar da pílula. */
.badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  padding: 4px 12px 4px 10px; border-radius: 999px; border: 1px solid var(--linha);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto);
  background: var(--sup);
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.badge--ir::before { background: var(--verde); box-shadow: 0 0 0 3px var(--verde-halo); }
.badge--dev::before { background: var(--aviso); }
.badge--lg { font-size: 14px; padding: 6px 16px 6px 12px; }

/* Selo de confirmação (§6): pílula preta translúcida com check verde ("Embarque liberado"). Sem desfoque. */
.ok-badge {
  position: absolute; right: 20px; top: 20px; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 8px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--palco-texto);
  background: rgba(0, 0, 0, .78);
  animation: okPulse 3.6s var(--ease) infinite;
}
.ok-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--verde); color: var(--palco-acao-texto); }
.ok-dot .icon { stroke-width: 2.6; }
@keyframes okPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 160, 0); }
  50% { box-shadow: 0 0 0 7px rgba(0, 212, 160, .2); }
}

/* Logo tipográfica de produto: símbolo + nome. */
.plockup { display: inline-flex; align-items: center; gap: .32em; line-height: 1; color: inherit; }
.plockup .palm-logo { height: 1em; width: auto; }
.plockup-word { font-size: .95em; }
.plockup--w600 .plockup-word { font-weight: 600; }
.plockup--w400 .plockup-word { font-weight: 400; }
.phero-lockup { display: flex; font-size: 32px; margin-bottom: 16px; }
.is-care .plockup .palm-logo, .phero--clinico .plockup .palm-logo { color: var(--clinico); }

/* Endosso "um produto Palm". */
.endorse { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.endorse-logo { font-size: 40px; color: var(--texto); }
.endorse-img { width: auto; }
.endorse-text { font-weight: 400; line-height: 1.2; color: var(--texto2); }
.ft-endorse { padding: 24px 0 8px; }

/* Faixa de selos de conformidade (home). */
.seals { border-top: 1px solid var(--linha); background: var(--pagina); }
.seals-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 28px 0; }
.seals-list a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; border: 1px solid var(--linha); font-size: 14px; font-weight: 600; color: var(--texto); background: var(--sup); }
.seals-list a:hover { text-decoration: none; border-color: var(--acao); }
.seals-list .icon { color: var(--link); }

/* Status do sistema (Suporte). */
.status-ok { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--texto); margin-right: 6px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px var(--verde-halo); }

/* Link cruzado Access ↔ Ponto no hero de produto. */
.cross-link { margin-top: 24px; font-size: 16px; color: var(--texto2); }

/* Botão flutuante de WhatsApp: só no celular (seção 12). */
.wa-fab { display: none; }

/* Número de nota de rodapé. */
sup.fn { font-size: .45em; vertical-align: super; line-height: 0; margin-left: 1px; }
sup.fn a { color: inherit; }

/* Seletor de tema (Sistema/Claro/Escuro), no rodapé. */

/* Still de produto sobre branco puro (§7): para fotos de fundo branco em qualquer tema. */
.still { background: var(--branco); border-radius: 12px; }
.still img { mix-blend-mode: multiply; }


/* =============================================================================
   4. Barra de navegação (§8: 56 px, sólida, sem desfoque)
   ============================================================================= */

.gn {
  position: sticky; top: 0; z-index: 9999; height: var(--barra-h);
  background: var(--barra); border-bottom: 1px solid var(--linha);
}
.gn-content { width: min(1200px, 100% - 64px); margin: 0 auto; height: 100%; }
.gn-list { display: flex; align-items: center; gap: 2px; height: var(--barra-h); }
.gn-item { height: 100%; display: flex; align-items: center; }
.gn-link {
  display: flex; align-items: center; height: var(--barra-h); padding: 0 10px;
  font-size: 14px; line-height: 1; font-weight: 500; color: var(--texto2); transition: color .15s;
}
.gn-link:hover, .gn-link.is-current, .gn-item.is-open > .gn-link { color: var(--texto); text-decoration: none; }
.gn-link.is-current { box-shadow: inset 0 -2px 0 var(--acao); }
.gn-item--logo { margin-right: auto; }
.gn-item--logo .gn-link { padding: 0 12px 0 0; color: var(--texto); }
.gn-item--logo .palm-logo { width: auto; height: 24px; }
.gn-btn { height: var(--barra-h); }
.gn-item--menu { display: none; }

/* Mega-menu: painel sólido sob a barra; o resto da página escurece (.gn-curtain). */
.gn-flyout {
  position: absolute; left: 0; right: 0; top: var(--barra-h); z-index: 1;
  background: var(--pagina); border-bottom: 1px solid var(--linha);
  max-height: 0; overflow: hidden; visibility: hidden;
  transition: max-height .3s var(--ease), visibility 0s linear .3s;
}
.gn-item.is-open .gn-flyout { max-height: 420px; visibility: visible; transition: max-height .35s var(--ease), visibility 0s; }
.gn-fly-inner {
  width: min(1200px, 100% - 64px); margin: 0 auto; padding: 32px 0 48px;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px;
  opacity: 0; transition: opacity .2s;
}
.gn-item.is-open .gn-fly-inner { opacity: 1; transition-delay: .06s; }
.gn-fly-title { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto2); margin-bottom: 14px; }
.gn-fly-col li + li { margin-top: 8px; }
.gn-fly-col a { font-size: 14px; font-weight: 500; color: var(--texto); }
.gn-fly-col--big a { font-size: 20px; line-height: 1.4; font-weight: 600; }
.gn-fly-col--big li + li { margin-top: 6px; }

.gn-curtain {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: 0; visibility: hidden; background: var(--veu);
  transition: opacity .25s var(--ease), visibility 0s linear .25s;
}
body.fly-open .gn-curtain { opacity: 1; visibility: visible; transition: opacity .25s var(--ease); }

/* Menu mobile em tela cheia. */
.gn-mobile { position: fixed; top: var(--barra-h); left: 0; right: 0; bottom: 0; background: var(--pagina); overflow-y: auto; padding: 16px 16px 60px; }
.gn-mobile li { opacity: 0; transform: translateY(-8px); border-bottom: 1px solid var(--linha); }
.gn.is-menu-open .gn-mobile li { animation: cascade .4s var(--ease) forwards; animation-delay: calc(var(--i) * 25ms + 40ms); }
.gn-mobile a { display: block; font-size: 20px; line-height: 1.4; font-weight: 600; color: var(--texto); padding: 12px 0; }
@keyframes cascade { to { opacity: 1; transform: none; } }

.gn-burger { width: 44px; justify-content: center; flex-direction: column; gap: 6px; }
.gn-burger span { display: block; width: 18px; height: 1.6px; background: var(--texto); transition: transform .3s var(--ease); }
.gn.is-menu-open .gn-burger span:first-child { transform: translateY(3.8px) rotate(45deg); }
.gn.is-menu-open .gn-burger span:last-child { transform: translateY(-3.8px) rotate(-45deg); }

/* Busca: painel sólido que desce do topo. */
.search { position: fixed; inset: 0; z-index: 10001; background: var(--veu); }
.search-inner { background: var(--pagina); border-bottom: 1px solid var(--linha); padding: 32px 16px 48px; animation: dropIn .3s var(--ease); }
.search-inner > * { max-width: 760px; margin-inline: auto; }
.search-form { display: flex; align-items: center; gap: 12px; color: var(--texto2); border-bottom: 1px solid var(--linha-forte); }
.search-form input {
  flex: 1; font: 600 25px/1.25 var(--f); border: 0; background: none; color: var(--texto); outline: none; padding: 10px 0; min-width: 0;
}
.search-form input::placeholder { color: var(--texto3); }
.search-close { color: var(--texto2); padding: 8px; border-radius: 8px; }
.search-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto2); margin-top: 28px; margin-bottom: 10px; }
.search-results a { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; font-size: 16px; font-weight: 600; color: var(--texto); }
.search-results a::before { content: "→"; color: var(--link); font-weight: 400; }
.search-results small { font-weight: 400; color: var(--texto2); font-size: 14px; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-12px); } }


/* =============================================================================
   5. Faixas e grade de duas colunas
   ============================================================================= */

/* Faixa de aviso no topo da home: alinhada à grade, em Névoa. */
.ribbon { background: var(--fundo); border-bottom: 1px solid var(--linha); padding: 12px 0; font-size: 14px; line-height: 1.5; color: var(--texto2); }

/* Faixa: largura total, encostada na seguinte, separada por 1 px. */
.band { position: relative; overflow: hidden; padding: 96px 0; border-top: 1px solid var(--linha); }
.band:first-of-type { border-top: 0; }
.band--clara { background: var(--pagina); }
.band--nevoa { background: var(--fundo); }
.band--palco { background: var(--palco); border-top-color: var(--palco); }
.band--abertura { padding: 88px 0 72px; }

/* Grade própria: 5/7, texto à esquerda e mídia à direita; --rev troca o lado da mídia. */
.split { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--rev .split-media { order: -1; }
.split-copy { max-width: 520px; }
.split-media { position: relative; min-width: 0; }

/* Tipografia de abertura e de faixa (§4). */
.hero-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto2); margin-bottom: 12px; }
.hero-title { font-size: 39px; line-height: 1.12; font-weight: 600; letter-spacing: -.01em; }
.hero-title--xl { font-size: 61px; line-height: 1.05; font-weight: 700; letter-spacing: -.015em; }
.hero-sub { font-size: 20px; line-height: 1.4; margin-top: 12px; }
.hero-support { font-size: 16px; color: var(--texto2); margin-top: 8px; }
.hero-headline { font-size: 25px; line-height: 1.25; font-weight: 600; margin-top: 16px; }

/* Palm Sensor: a palavra PALM em metal com veias, o sensor à frente. */
.palm-stage { display: flex; align-items: flex-end; justify-content: center; min-height: 380px; }
.palm-word { width: 100%; height: auto; overflow: visible; margin-bottom: 110px; }
.pw-text { font-family: var(--f); font-weight: 700; font-size: 390px; letter-spacing: -.02em; }
.palm-sensor { position: absolute; left: 50%; bottom: 0; z-index: 2; width: min(420px, 62%); transform: translateX(-50%); }
.palm-sensor img { position: relative; z-index: 2; width: 100%; filter: drop-shadow(0 28px 36px rgba(0, 0, 0, .85)); }
.palm-beam {
  position: absolute; left: 20%; right: 20%; bottom: 55%; z-index: 1; height: 240px;
  background: linear-gradient(to top, var(--verde-halo), transparent 85%);
  clip-path: polygon(22% 100%, 78% 100%, 100% 0, 0 0);
  filter: blur(6px); mix-blend-mode: screen;
  opacity: 0; transition: opacity 1.4s var(--ease) .6s;
}
.palm-beam::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(0, 212, 160, .45) 22px 23px);
  -webkit-mask: linear-gradient(to top, #000, transparent); mask: linear-gradient(to top, #000, transparent);
}
.palm-stage.is-in .palm-beam, html:not(.js) .palm-beam { opacity: 1; }   /* main.js marca .palm-stage ao entrar na tela */

/* Bilhetagem: foto em moldura de 12 px, com o selo de confirmação. */
.bil-media { overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3; border: 1px solid var(--linha); }
.bil-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }

/* Palm Care: assinatura da linha e as duas fotos do Fleboscópio num still branco. */
.care-lockup { display: inline-flex; align-items: center; gap: 12px; font-size: 39px; line-height: 1.12; font-weight: 400; }
.care-lockup b { font-weight: 700; }
.care-lockup .palm-logo { color: var(--clinico); height: 1em; width: auto; }
.care-duo { display: flex; justify-content: center; align-items: center; gap: 4%; padding: 32px; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; }
.care-duo img { width: 48%; mix-blend-mode: multiply; }

/* OEM: módulo dentro dos contornos de luz infravermelha. */
.oem-stage { display: grid; place-items: center; min-height: 420px; }
.oem-stage .ir-art { position: absolute; width: 100%; max-width: 480px; }
.oem-stage img {
  position: relative; width: 58%; max-width: 320px;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35)) drop-shadow(0 0 36px var(--verde-halo));
}

/* Abertura genérica das páginas internas (Empresa, Segurança, 404, Obrigado, Fleboscópio). */
.hero { position: relative; overflow: hidden; padding: 96px 0 88px; }
.hero > .hero-copy, .hero > .care-duo { position: relative; z-index: 2; width: min(1200px, 100% - 64px); margin-inline: auto; }
.hero--dark { background: var(--palco); }
.hero--page .hero-copy { max-width: 760px; margin-left: max(32px, calc((100% - 1200px) / 2)); }
.hero-copy--after { margin-top: 24px; }


/* =============================================================================
   6. Motivo das veias e animação de leitura
   ============================================================================= */

.vein {
  stroke: var(--verde);
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s cubic-bezier(.5, 0, .2, 1) var(--d, 0s);   /* gesto de leitura: 1,2 s */
}
.vein--d1 { stroke-opacity: .85; }
.vein--d2 { stroke-opacity: .65; }
.vein--d3 { stroke-opacity: .5; }
.palm-word .vein { stroke-opacity: .8; }
.is-drawn .vein { stroke-dashoffset: 0; }

/* Fundo de veias (aberturas): sempre sobre preto. */
.vein-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; }
.vein-bg--dim { opacity: .28; }
.vein-bg--purple .vein { stroke: var(--vamo-claro); }

.ir-ring { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) var(--d, 0s); }
.is-drawn .ir-ring { stroke-dashoffset: 0; }

/* Mão estilizada: as veias se desenham e um anel de confirmação fecha em volta. */
.hand-art { overflow: visible; }
.scan-ring {
  stroke: var(--verde); stroke-width: 3;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transform: rotate(-90deg); transform-origin: 120px 175px;
  transition: stroke-dashoffset .9s var(--ease) 1.2s;
  filter: drop-shadow(0 0 6px var(--verde));
}
.is-drawn .scan-ring { stroke-dashoffset: 0; }
.scan-check { opacity: 0; transform-box: fill-box; transition: opacity .4s 2s; }
.scan-check circle { fill: var(--verde); }
.scan-check path { stroke: var(--palco-acao-texto); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.is-drawn .scan-check { opacity: 1; }


/* =============================================================================
   7. Home: grade de produtos (cartões de 12 px com borda, texto à esquerda, produto à direita)
   ============================================================================= */

.band--produtos { padding: 64px 0; display: grid; gap: 16px; }
.prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.prod {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end;
  min-height: 400px; border: 1px solid var(--linha); border-radius: 12px; background: var(--sup);
}
.prod-copy { position: relative; z-index: 2; align-self: start; padding: 36px 0 36px 36px; }
.prod-copy .cta-row { margin-top: 24px; }
.prod-title { font-size: 25px; line-height: 1.25; font-weight: 600; }
.prod-title--logo { line-height: 0; padding: 4px 0 6px; }
.prod-logo { height: 30px; width: auto; }
.prod-sub { font-size: 20px; line-height: 1.4; margin-top: 8px; }
.prod-support { font-size: 14px; color: var(--texto2); margin-top: 8px; }
.prod-media { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 100%; min-height: 0; padding: 24px 24px 0; }
.prod .badge { margin-bottom: 12px; }

.prod--palco { background: var(--palco); border-color: var(--palco-linha); }
.prod--clara { background: var(--sup); }
.prod--vamo { background: radial-gradient(80% 70% at 80% 100%, #3b1466 0%, var(--vamo-fundo) 60%, var(--palco) 100%); border-color: #2a1446; }

.prod-media--terminal img { width: min(150px, 80%); margin-bottom: -48px; }
.prod--palco .prod-media--terminal::before {
  content: ""; position: absolute; left: 50%; bottom: 40px; width: 240px; height: 240px; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(var(--verde-halo), transparent 70%); filter: blur(10px);
}
.prod--palco .prod-media--terminal img { position: relative; filter: drop-shadow(0 0 48px var(--verde-halo)); }
.prod-media--terminal .ok-badge--ponto { top: auto; right: 12px; bottom: 32%; white-space: nowrap; animation: none; }
.prod-media--pos { align-self: center; align-items: center; margin: 24px 24px 24px 0; padding: 16px; height: auto; }
.prod-media--pos img { width: 100%; max-height: 300px; object-fit: contain; }
.prod-media--vamo img { width: min(150px, 80%); margin-bottom: -120px; transform: rotate(-6deg); filter: drop-shadow(0 0 48px rgba(139, 92, 246, .55)); transition: transform .8s var(--ease); }
.prod--vamo:hover .prod-media--vamo img { transform: rotate(-3deg) translateY(-10px); }


/* =============================================================================
   8. Home: carrossel "Palm em operação"
   ============================================================================= */

.carousel { padding: 0 0 48px; overflow: hidden; background: var(--pagina); }
.carousel-viewport { overflow: hidden; }
.carousel-track { display: flex; gap: 16px; transition: transform 1s var(--ease); will-change: transform; }

.slide { position: relative; overflow: hidden; flex: 0 0 min(1200px, 100vw - 64px); max-height: 640px; aspect-ratio: 16 / 8; border-radius: 12px; background: var(--palco); color: var(--palco-texto); }
.slide-media { position: absolute; inset: 0; }
.slide-media > img { width: 100%; height: 100%; object-fit: cover; }
.slide-media > .art { width: 100%; height: 100%; }
.art .vein-clinic .vein { stroke: var(--clinico); }

.slide--night { background: radial-gradient(80% 90% at 70% 40%, #0f2a24 0%, #050c0a 70%); }
.slide--gym { background: linear-gradient(135deg, #0e1513, #1f332d); }
.slide--bar { background: radial-gradient(70% 90% at 60% 60%, #4c1d95 0%, #1a0633 55%, #07010f 100%); }
.slide--care { background: linear-gradient(135deg, #eaf6f2, #d3e9e3); color: #10201b; }
.slide--lab { background: radial-gradient(80% 80% at 50% 60%, #16201d, #050807); }

.slide-grid {
  position: absolute; inset: 0; background-size: 48px 48px;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  -webkit-mask: radial-gradient(circle at 50% 55%, #000, transparent 70%); mask: radial-gradient(circle at 50% 55%, #000, transparent 70%);
}
.slide-product { position: absolute; right: 12%; top: 50%; transform: translateY(-50%); display: flex; align-items: center; height: 82%; }
.slide-product img { height: 100%; width: auto; filter: drop-shadow(0 0 60px rgba(0, 212, 160, .25)); }
.slide-product--wide { right: 50%; transform: translate(50%, -50%); height: auto; width: 46%; }
.slide-product--wide img { height: auto; width: 100%; }
.slide--bar .slide-product img { filter: drop-shadow(0 0 60px rgba(168, 85, 247, .5)); transform: rotate(-8deg); }
.slide--bus .slide-media > img { object-position: 50% 42%; }
.slide-product--wall { right: 7%; height: 46%; top: 44%; }
.slide-product--wall img { filter: drop-shadow(0 0 50px rgba(0, 212, 160, .45)); }
.slide-product--bar { right: 14%; height: 66%; top: 42%; }
.slide--lab .slide-product--wide { width: 30%; top: 44%; }
.slide--lab .slide-product--wide img { filter: drop-shadow(0 0 70px rgba(0, 212, 160, .35)); }
.slide-icon { position: absolute; right: 16%; top: 50%; transform: translateY(-50%); color: var(--verde); opacity: .9; filter: drop-shadow(0 0 20px var(--verde-halo)); }
.slide-icon .icon { width: 180px; height: 180px; stroke-width: 1; }
.slide-hand { position: absolute; right: 14%; top: 8%; height: 84%; }
.slide-hand svg { height: 100%; width: auto; }
.slide--care .hand-fill { fill: #d6e6e2; }
.slide--care .vein { stroke: #00a37b; }

/* Legenda: rótulo e botão no canto inferior esquerdo, sobre uma faixa escura. */
.slide-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 20px;
  padding: 64px 40px 32px;
  background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
}
.slide-caption p { font-size: 20px; line-height: 1.4; }
.slide--care .slide-caption { background: linear-gradient(to top, rgba(255, 255, 255, .75), transparent); }
.slide:not(.is-active) .slide-caption { opacity: 0; transition: opacity .4s; }
.slide.is-active .slide-caption { opacity: 1; transition: opacity .6s .4s; }

/* Botão da legenda: botão primário do palco (retângulo), sem vidro. */
.pill-glass {
  flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 10px 18px; border-radius: 10px;
  font: 600 15px/1.2 var(--f); color: var(--palco-acao-texto); background: var(--palco-acao);
  transition: background .15s;
}
.pill-glass:hover { background: var(--palco-acao-hover); text-decoration: none; }

/* Controles: barras de paginação + pausar/reproduzir. */
.carousel-controls { position: relative; display: flex; align-items: center; gap: 16px; height: 36px; margin-top: 20px; width: min(1200px, 100% - 64px); margin-inline: auto; }
.carousel-dots { display: flex; align-items: center; gap: 6px; height: 36px; }
.carousel-dots button { width: 24px; height: 4px; border-radius: 2px; background: var(--linha); transition: width .4s var(--ease), background .3s; }
.carousel-dots button[aria-selected="true"] { width: 48px; background: var(--texto); }
.carousel-play { margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--linha); color: var(--texto); background: var(--sup); }
.carousel-play .i-play, .carousel-play[data-playing="true"] .i-pause { display: block; }
.carousel-play .i-pause, .carousel-play[data-playing="true"] .i-play { display: none; }


/* =============================================================================
   9. Páginas de produto
   ============================================================================= */

/* Navegação local fixa (nome do produto + âncoras + botão). Sólida, 48 px. */
.has-localnav .gn { position: relative; }
.localnav { position: sticky; top: 0; z-index: 9000; height: 48px; border-bottom: 1px solid var(--linha); background: var(--barra); }
.localnav-inner { display: flex; align-items: center; gap: 24px; width: min(1200px, 100% - 64px); height: 100%; margin: 0 auto; }
.localnav-title { font-size: 16px; font-weight: 600; color: var(--texto); margin-right: auto; }
.localnav-title:hover { text-decoration: none; }
.localnav-links { display: flex; gap: 20px; font-size: 14px; }
.localnav-links a { color: var(--texto2); }
.localnav-links a:hover { color: var(--texto); text-decoration: none; }

/* Abertura de produto: Preto Palm com as veias, texto à esquerda e produto à direita. */
.phero { position: relative; overflow: hidden; padding: 88px 0 72px; }
.phero--palco { background: var(--palco); }
.phero--vamo { background: radial-gradient(90% 80% at 85% 100%, #3b1466 0%, var(--vamo-fundo) 55%, var(--palco) 100%); }
.phero--clinico { background: var(--fundo); border-bottom: 1px solid var(--linha); }
.phero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.phero-copy { max-width: 600px; }
.phero-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto2); margin-bottom: 12px; }
.phero-title { font-size: 61px; line-height: 1.05; font-weight: 700; letter-spacing: -.015em; }
.phero-intro { margin-top: 20px; font-size: 20px; line-height: 1.4; color: var(--texto2); }
.phero-media { position: relative; display: flex; justify-content: center; min-width: 0; }

/* Mídia do hero: foto em moldura, ou produto recortado. */
.media-art { width: 100%; }
.media-art .art { width: 100%; height: auto; }
.media-art img { max-height: 520px; width: auto; margin: 0 auto; }
.media-frame { position: relative; overflow: hidden; width: 100%; aspect-ratio: 4 / 3.4; border-radius: 12px; border: 1px solid var(--linha); }
.media-frame--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
.media-product { position: relative; display: flex; justify-content: center; width: 100%; }
.media-product img { max-height: 520px; width: auto; }
.media-product .ok-badge { top: 38%; right: 4%; }
.media-product--glow::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(var(--verde-halo), transparent 65%); filter: blur(20px);
}
.media-product--glow img { position: relative; }
/* foto de fundo branco (maquininha): still sobre branco puro, mesmo no palco (§7) */
.media-product--multiply { background: var(--branco); border-radius: 12px; padding: 32px; }
.media-product--multiply img { mix-blend-mode: multiply; max-height: 440px; }
.media-product--vamo img { max-height: 560px; filter: drop-shadow(0 0 80px rgba(139, 92, 246, .5)); }
.media-product--mobile img { max-height: 520px; filter: drop-shadow(0 0 60px var(--verde-halo)); }

/* Seções */
.section { padding: 96px 0; border-top: 1px solid var(--linha); }
.section--alt { background: var(--fundo); }
.section--dark { background: var(--palco); border-top-color: var(--palco); }
.section-title { font-size: 39px; line-height: 1.12; font-weight: 600; letter-spacing: -.01em; margin-bottom: 40px; max-width: 18ch; }
.section-title--left { margin-bottom: 24px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.section-head .section-title { margin-bottom: 0; }
.lead { font-size: 20px; line-height: 1.4; }
.prose p { font-size: 16px; line-height: 1.55; color: var(--texto2); }
.prose p + p { margin-top: 1.1em; }
.prose .lead { font-size: 20px; line-height: 1.4; color: var(--texto); font-weight: 400; }

/* Benefícios: cartões com ícone em Verde dentro de um quadrado preto (§6). */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.features--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.feature { background: var(--sup); border: 1px solid var(--linha); border-radius: 12px; padding: 28px; }
.feature-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: var(--palco); color: var(--verde); margin-bottom: 20px; }
.feature-icon .icon { width: 26px; height: 26px; }
.feature h3 { font-size: 20px; line-height: 1.4; font-weight: 600; margin-bottom: 6px; }
.feature p { font-size: 16px; color: var(--texto2); }

/* Como funciona: passos numerados em Plex Mono, ligados por uma linha. */
.steps { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.step { position: relative; padding-top: 64px; }
.step::before { content: ""; position: absolute; top: 20px; left: 52px; right: -24px; height: 1px; background: var(--linha-forte); }
.step:last-child::before { display: none; }
.step-n {
  position: absolute; top: 0; left: 0; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--texto);
  font: 400 16px/1 var(--mono); color: var(--texto); background: var(--pagina);
}
.section--alt .step-n { background: var(--fundo); }
.step h3 { font-size: 20px; line-height: 1.4; font-weight: 600; margin-bottom: 6px; }
.step p { color: var(--texto2); }

/* O que está incluído */
.included { display: grid; gap: 24px; }
.included li { display: flex; gap: 20px; align-items: flex-start; padding-bottom: 24px; border-bottom: 1px solid var(--linha); }
.included li:last-child { border-bottom: 0; padding-bottom: 0; }
.included .icon { flex: none; color: var(--link); margin-top: 3px; }
.included h3 { font-size: 20px; line-height: 1.4; font-weight: 600; }
.included p { color: var(--texto2); }

/* Especificações técnicas: rótulo e dado (Plex Mono só no que é número/código fica a cargo do conteúdo). */
.specs { border-top: 1px solid var(--linha); }
.spec { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.spec dt { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto2); padding-top: 3px; }
.spec dd { color: var(--texto); }
.spec dd a { color: var(--link); }
.specs--mt { margin-top: 32px; }
.specs-media { display: flex; justify-content: flex-start; margin: 0 0 32px; }
.specs-media img { width: min(420px, 80%); mix-blend-mode: multiply; }
.certs-note { margin-top: 20px; font-size: 14px; color: var(--texto2); }

/* Onde usar (palco; variação clara na linha Care) */
.uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.use { border-radius: 12px; padding: 28px 24px; background: var(--palco-sup); border: 1px solid var(--palco-linha); }
.use .icon { margin: 0 0 16px; color: var(--verde); }
.use h3 { font-size: 20px; line-height: 1.4; font-weight: 600; }
.use p { color: var(--texto2); font-size: 14px; margin-top: 6px; }
.uses--light .use { background: var(--sup); border-color: var(--linha); }
.uses--light .use .icon { color: var(--clinico); }
.uses-note { margin-top: 40px; font-size: 20px; color: var(--texto2); max-width: 60ch; }
.uses-note strong { color: var(--texto); }

/* Chamada final: mão com o anel de confirmação à esquerda, texto à direita. */
.cta-band { background: var(--palco); padding: 88px 0; }
.cta-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; align-items: center; }
.cta-band h2 { font-size: 39px; line-height: 1.12; font-weight: 600; letter-spacing: -.01em; }
.cta-band p { font-size: 20px; color: var(--texto2); margin-top: 10px; }
.cta-hand { width: 170px; }


/* =============================================================================
   10. Páginas específicas
   ============================================================================= */

/* --- Sensores: seção OEM --------------------------------------------------- */
.oem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.oem-copy p { font-size: 16px; color: var(--texto2); }
.oem-media { position: relative; display: grid; place-items: center; min-height: 440px; }
.oem-media .ir-art { position: absolute; width: 100%; max-width: 440px; }
.oem-media img { position: relative; width: 56%; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35)) drop-shadow(0 0 36px var(--verde-halo)); }

/* --- Produtos: vitrine ----------------------------------------------------- */
.store-head { padding: 64px 0 16px; }
.store-title { max-width: 760px; font-size: 39px; line-height: 1.12; font-weight: 600; letter-spacing: -.01em; }
.store-title span { color: var(--texto2); font-weight: 400; }

.chipnav { display: flex; gap: 8px; overflow-x: auto; padding: 32px 0 8px; scrollbar-width: none; }
.chipnav::-webkit-scrollbar { display: none; }
.chipnav a { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 104px; padding: 12px 8px; border: 1px solid var(--linha); border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--texto); background: var(--sup); }
.chipnav a:hover { text-decoration: none; border-color: var(--acao); }
.chip-img { display: grid; place-items: center; overflow: hidden; width: 88px; height: 56px; }
.chip-img img { max-height: 56px; width: auto; object-fit: contain; }
.chip-img .art { width: 88px; height: 56px; }

.store-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 24px 0 96px; }
.store-card a {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; overflow: hidden;
  min-height: 320px; border-radius: 12px; border: 1px solid var(--linha); color: var(--texto); background: var(--sup);
  transition: border-color .2s;
}
.store-card a:hover { text-decoration: none; border-color: var(--acao); }
.store-card-copy { align-self: start; padding: 32px 0 32px 32px; }
.store-card h2 { font-size: 25px; line-height: 1.25; font-weight: 600; }
.store-card p { font-size: 16px; color: var(--texto2); margin: 8px 0 12px; }
.store-card .more { color: var(--link); }
.store-card-media { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; min-height: 0; padding: 24px 24px 0; }
.store-card-media img { max-height: 260px; width: auto; max-width: 100%; object-fit: contain; }

.store-card--dark a { background: var(--palco); border-color: var(--palco-linha); }
.store-card--dark .store-card-media { align-items: center; padding-bottom: 24px; }
.store-card--dark .store-card-media img { filter: drop-shadow(0 0 40px var(--verde-halo)); }
.store-card--purple a { background: radial-gradient(90% 70% at 80% 100%, #3b1466 0%, var(--vamo-fundo) 70%); border-color: #2a1446; }
.store-card--purple .store-card-media img { margin-bottom: -60px; max-height: 300px; }
.store-card--light .store-card-media, .store-card--white .store-card-media { align-self: center; margin: 24px 24px 24px 0; padding: 16px; background: var(--branco); border-radius: 8px; }
.store-card--light img, .store-card--white img { mix-blend-mode: multiply; }
.store-card--mint .store-card-media .art { width: 100%; height: auto; margin-bottom: -20px; }
.store-card--sunset .store-card-media img { max-width: 50%; }
.store-card--photo .store-card-media { padding: 0; height: 100%; }
.store-card--photo .store-card-media img { width: 100%; max-width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 40%; }

/* --- Palm Care (visual clínico, Verde clínico) ------------------------------ */
.care-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "titulo midia" "sub midia"; column-gap: 56px; align-items: end; padding: 88px 0 72px; }
.care-title { grid-area: titulo; display: inline-flex; align-items: center; gap: 14px; font-size: 61px; line-height: 1.05; font-weight: 700; letter-spacing: -.015em; }
.care-title span { font-weight: 400; }
.care-title .palm-logo { color: var(--clinico); }
.care-sub { grid-area: sub; align-self: start; font-size: 20px; margin-top: 16px; color: var(--texto2); }
.care-hero-media { grid-area: midia; align-self: center; }
.care-hero-media img { width: min(360px, 80%); margin: 0 auto; filter: drop-shadow(0 32px 32px rgba(16, 32, 27, .18)); }
.care-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.care-card { overflow: hidden; padding: 0 32px 32px; border-radius: 12px; border: 1px solid var(--linha); background: var(--sup); }
.care-card-media { display: grid; place-items: center; height: 260px; margin: 0 -32px 28px; background: var(--branco); border-bottom: 1px solid var(--linha); }
.care-card-media img { max-height: 220px; max-width: 84%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.care-card h2 { font-size: 25px; line-height: 1.25; font-weight: 600; margin-bottom: 10px; }
.care-card p { color: var(--texto2); margin-bottom: 12px; }
/* Aviso regulatório obrigatório (Anvisa) nas páginas da linha Care. */
.care-notice { margin-bottom: 24px; padding: 20px 24px; border: 1px solid var(--linha); border-left: 3px solid var(--clinico); border-radius: 12px; font-size: 14px; line-height: 1.5; color: var(--texto2); background: var(--sup); }
.care-notice strong { color: var(--texto); }

/* Fleboscópio: abertura clínica em grade (texto à esquerda, fotos à direita). */
.hero--clinic { background: var(--fundo); border-bottom: 1px solid var(--linha); }
.hero--clinic.hero--care { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto; column-gap: 56px; padding-inline: max(32px, calc((100% - 1200px) / 2)); }
.hero--clinic.hero--care > .hero-copy, .hero--clinic.hero--care > .care-duo { width: auto; margin: 0; }
.hero--clinic.hero--care > .hero-copy:first-child { grid-column: 1; grid-row: 1; align-self: end; }
.hero--clinic.hero--care > .care-duo { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.hero--clinic.hero--care > .hero-copy--after { grid-column: 1; grid-row: 2; align-self: start; }

/* --- Empresa ------------------------------------------------------------------ */
.hero--about { padding: 112px 0 96px; }
.hero--about .vein-bg { opacity: .4; }
.about-lockup { display: flex; margin-bottom: 32px; color: var(--palco-texto); }
.about-lockup svg { height: 120px; width: auto; }

.scroller-btns { display: flex; gap: 8px; }
.round-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--linha-forte); color: var(--texto); background: var(--sup); transition: border-color .15s; }
.round-btn:hover { border-color: var(--acao); }
.timeline { position: relative; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 2px 24px; scrollbar-width: none; }
.timeline::-webkit-scrollbar { display: none; }
.tl-item { position: relative; flex: 0 0 280px; scroll-snap-align: start; padding: 24px; border-radius: 12px; border: 1px solid var(--linha); background: var(--sup); }
.tl-year { display: block; font: 400 25px/1.25 var(--mono); color: var(--texto); }
.tl-dot { position: relative; display: block; width: 100%; height: 1px; margin: 14px 0 16px; background: var(--linha); }
.tl-dot::before { content: ""; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px var(--verde-halo); }
.tl-item p { font-size: 16px; color: var(--texto2); }

/* Missão, visão e valores (sobre preto) */
.mvv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mvv li { padding: 32px 28px; border-radius: 12px; background: var(--palco); }
.mvv h2 { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; color: var(--texto2); }
.mvv p { font-size: 20px; line-height: 1.4; }

/* Liderança: nome e cargo */
.leaders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.leader { padding: 24px 28px; border-radius: 12px; border: 1px solid var(--linha); background: var(--sup); }
.leader-avatar { display: grid; place-items: center; width: 120px; height: 120px; margin: 0 0 20px; border-radius: 50%; background: var(--palco); overflow: hidden; }
.leader-avatar img { width: 100%; height: 100%; object-fit: cover; }
.monogram { font-size: 39px; font-weight: 600; color: var(--palco-texto); }
.leader-name { font-size: 20px; line-height: 1.4; font-weight: 600; }
.leader-role { margin-top: 2px; font: 400 14px/1.4 var(--mono); color: var(--texto2); }

/* --- Segurança ------------------------------------------------------------------ */
.shield-art { width: 64px; margin: 0 0 24px; color: var(--verde); filter: drop-shadow(0 0 20px var(--verde-halo)); }
.shield-art .icon { stroke-width: 1.2; }
.sec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sec-item { padding: 32px; border-radius: 12px; border: 1px solid var(--linha); background: var(--sup); }
.sec-item .icon { color: var(--link); margin-bottom: 16px; }
.sec-item h2 { font-size: 25px; line-height: 1.25; font-weight: 600; margin-bottom: 10px; }
.sec-item p { color: var(--texto2); }
.doc-links li { border-bottom: 1px solid var(--linha); }
.doc-links a { display: block; padding: 16px 0; font-size: 20px; font-weight: 600; }
.doc-links a::after { content: " ›"; }

/* --- Suporte -------------------------------------------------------------------- */
.support-hero { padding: 88px 0 24px; }
.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.support-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px; border-radius: 12px; border: 1px solid var(--linha); background: var(--sup); }
.support-card .icon { color: var(--link); }
.support-card h2 { font-size: 20px; line-height: 1.4; font-weight: 600; }
.support-card p { color: var(--texto2); }

/* --- Contato: formulário com rótulos flutuantes ---------------------------------- */
.contact { padding: 72px 0 96px; }
.contact-head { margin-bottom: 48px; }
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { position: relative; }
.field--area, .field--select, .form .check, .form .btn, .form-error, .captcha { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 56px; padding: 26px 14px 8px;
  font: inherit; font-size: 16px; color: var(--texto); background: var(--sup);
  border: 1px solid var(--linha-forte); border-radius: 10px; outline: none;
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 140px; }
.field--select::after {
  content: ""; position: absolute; right: 18px; top: 24px; width: 8px; height: 8px; pointer-events: none;
  border-right: 1.5px solid var(--texto2); border-bottom: 1.5px solid var(--texto2); transform: rotate(45deg);
}
.field label {
  position: absolute; left: 15px; top: 17px; pointer-events: none;
  font-size: 16px; color: var(--texto2);
  transform-origin: left top; transition: transform .15s var(--ease), font-size .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--acao); box-shadow: 0 0 0 2px var(--acao); }
.field input:not(:placeholder-shown) + label, .field input:focus + label,
.field textarea:not(:placeholder-shown) + label, .field textarea:focus + label,
.field select:focus + label, .field select.has-value + label { transform: translateY(-10px); font-size: 12px; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--critico); background: var(--critico-fundo); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--texto2); }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--acao); }
.check.is-invalid span { color: var(--critico); }
.form-error { color: var(--critico); font-size: 14px; }
.form .btn { justify-self: start; margin-top: 8px; }
.form.is-sending .btn { opacity: .6; pointer-events: none; }

.form-success { padding: 40px 32px; border-radius: 12px; background: var(--palco); }
.form-success h2 { font-size: 25px; line-height: 1.25; font-weight: 600; margin-top: 8px; }
.form-success p { font-size: 16px; margin-top: 8px; color: var(--texto2); }
.success-hand { width: 160px; }

.contact-info ul { display: grid; gap: 24px; margin-bottom: 28px; }
.contact-info li { display: flex; gap: 16px; }
.contact-info .icon { flex: none; color: var(--link); margin-top: 2px; }
.contact-info h2 { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto2); margin-bottom: 2px; }
.contact-info p, .contact-info a { font-size: 16px; }
.map { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 12px; border: 1px solid var(--linha); background: var(--fundo); }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.4); }

/* --- Páginas legais ---------------------------------------------------------------- */
.legal { padding: 72px 0 96px; }
.legal h1 { font-size: 39px; font-weight: 600; line-height: 1.12; letter-spacing: -.01em; }
.legal h2 { font-size: 25px; line-height: 1.25; font-weight: 600; margin: 36px 0 8px; }
.legal-date { color: var(--texto2); margin-top: 10px; font-size: 14px; }
.legal p, .legal li { font-size: 16px; line-height: 1.55; color: var(--texto); }
.legal p + p { margin-top: 12px; }
.legal-lead { margin-top: 24px; }
.legal-list { list-style: disc; padding-left: 22px; }
.legal-list li + li { margin-top: 8px; }
.legal-ol { counter-reset: legal; }
.legal-ol li { counter-increment: legal; }
.legal-ol h2::before { content: counter(legal) ". "; }
.legal-table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 14px; }
.legal-table th, .legal-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha); }
.legal-table th { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto2); background: var(--fundo); }
.legal .cta-row { margin-top: 32px; }
.legal .btn--secondary { margin-top: 0; }

/* --- 404 e Obrigado ----------------------------------------------------------------- */
.hero--404 { min-height: 64vh; display: flex; align-items: center; }
.nf-hand { width: 140px; margin: 0 0 24px; }


/* =============================================================================
   11. Rodapé e aviso de cookies
   ============================================================================= */

.ft { background: var(--fundo); border-top: 1px solid var(--linha); font-size: 12px; line-height: 1.5; color: var(--texto2); }
.ft-inner { width: min(1200px, 100% - 64px); margin: 0 auto; padding: 24px 0 28px; }
.ft a { color: var(--texto); }

.ft-notes { padding: 12px 0 16px; border-bottom: 1px solid var(--linha); }
.ft-notes p, .ft-notes li { margin-bottom: 8px; }
.ft-notes-list { counter-reset: fn; }
.ft-notes-list li { list-style: none; counter-increment: fn; }
.ft-notes-list li[value="2"] { counter-reset: fn 1; }
.ft-notes-list li::before { content: counter(fn) ". "; font-family: var(--mono); }
.ft-notes-list li:target { color: var(--texto); }

.ft-directory { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 24px; padding: 24px 0 8px; }
.ft-group { margin-bottom: 24px; }
.ft-title { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto2); margin-bottom: 10px; }
.ft-title button { cursor: default; text-align: left; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.ft-group li { margin-bottom: 8px; line-height: 1.4; font-size: 14px; }

.ft-more { padding: 12px 0 14px; font-size: 14px; }
.ft-more a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.ft-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 8px; padding: 14px 0 0; border-top: 1px solid var(--linha); }
.ft-legal-links { display: flex; flex-wrap: wrap; }
.ft-legal-links li + li { border-left: 1px solid var(--linha); padding-left: 8px; margin-left: 8px; }
.ft-locale { margin-left: 0; }

/* Aviso de cookies (o Analytics só carrega depois do aceite). Cartão sólido, borda de 1 px. */
.cookie {
  position: fixed; left: 50%; bottom: 16px; z-index: 9990; transform: translateX(-50%);
  width: min(760px, 100% - 24px); padding: 16px 18px 16px 20px; border-radius: 12px;
  font-size: 14px; line-height: 1.5;
  background: var(--sup); border: 1px solid var(--linha);
  box-shadow: 0 8px 24px rgba(16, 32, 27, .14);
  animation: dropUp .4s var(--ease);
}
.cookie-main { display: flex; gap: 18px; align-items: center; }
.cookie-actions { display: flex; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.cookie-config { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha); display: grid; gap: 10px; }
.cookie-config[hidden] { display: none; }
.cookie-opt { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--texto2); }
.cookie-opt input { margin-top: 3px; accent-color: var(--acao); }
@keyframes dropUp { from { opacity: 0; transform: translate(-50%, 16px); } }


/* =============================================================================
   12. Responsivo
   ============================================================================= */

/* Notebook */
@media (max-width: 1068px) {
  .gn-link { padding: 0 7px; font-size: 13px; }
  .hero-title--xl, .phero-title, .care-title { font-size: 49px; }
  .support-grid { grid-template-columns: repeat(2, 1fr); }
  .prod { grid-template-columns: 1fr; }
  .prod-copy { padding: 32px 32px 0; }
  .prod-media { height: 240px; padding-top: 16px; }
  .prod-media--pos { margin: 16px 32px 32px; height: auto; }
  .prod-media--vamo img { margin-bottom: -80px; }
}

/* Tablet: menu vira hambúrguer; grades de duas colunas viram uma, texto antes da mídia. */
@media (max-width: 833px) {
  .gn-item:not(.gn-item--logo):not(.gn-item--icon):not(.gn-item--menu) { display: none; }
  .gn-item--menu { display: flex; }
  .gn.is-menu-open { background: var(--pagina); }

  .localnav-links { display: none; }

  .split, .split--rev, .phero-grid, .oem-grid, .contact-grid, .care-cards, .cta-grid, .care-hero { grid-template-columns: 1fr; gap: 40px; }
  .split--rev .split-media { order: 0; }
  .care-hero { grid-template-areas: "titulo" "sub" "midia"; }
  .hero--clinic.hero--care { grid-template-columns: 1fr; }
  .hero--clinic.hero--care > .care-duo { grid-column: 1; grid-row: 2; margin: 32px 0; }
  .hero--clinic.hero--care > .hero-copy--after { grid-row: 3; }
  .prod-grid, .mvv, .sec-grid, .store-grid { grid-template-columns: 1fr; }
  .prod { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .prod-copy { padding: 32px 0 32px 32px; }
  .prod-media { height: 100%; }
  .leaders { grid-template-columns: repeat(2, 1fr); }
  .ft-directory { grid-template-columns: repeat(3, 1fr); }
  .palm-stage { min-height: 300px; }
}

/* Celular: 16 px de margem lateral, escala reduzida mantendo a proporção. */
@media (max-width: 734px) {
  .container, .container--narrow, .gn-content, .localnav-inner, .ft-inner, .carousel-controls, .gn-fly-inner { width: calc(100% - 32px); }
  .hero > .hero-copy, .hero > .care-duo { width: calc(100% - 32px); }
  .hero--page .hero-copy { margin-left: 16px; }
  .hero--clinic.hero--care { padding-inline: 16px; }
  .cta-row { margin-top: 20px; }

  .band, .section { padding: 64px 0; }
  .band--abertura, .phero { padding: 56px 0 48px; }
  .hero { padding: 64px 0 56px; }
  .hero-title { font-size: 31px; }
  .hero-title--xl, .phero-title, .care-title { font-size: 39px; line-height: 1.1; }
  .hero-sub, .phero-intro, .lead, .prose .lead { font-size: 18px; }
  .hero-headline { font-size: 20px; line-height: 1.4; }
  .care-lockup { font-size: 31px; gap: 10px; }
  .section-title, .store-title, .cta-band h2, .legal h1 { font-size: 31px; margin-bottom: 28px; }
  .section-title--left { margin-bottom: 20px; }
  .palm-stage { min-height: 240px; }
  .palm-word { margin-bottom: 64px; }
  .palm-sensor { width: 70%; }
  .ok-badge { right: 12px; top: 12px; font-size: 12px; padding: 6px 12px 6px 6px; }
  .care-duo { padding: 20px; }
  .oem-stage, .oem-media { min-height: 300px; }

  .band--produtos { padding: 40px 0; }
  .prod { grid-template-columns: 1fr; min-height: 0; }
  .prod-copy { padding: 28px 24px 0; }
  .prod-media { height: 240px; }
  .prod-media--pos { margin: 16px 24px 24px; }
  .seals-list a { font-size: 13px; padding: 6px 12px 6px 10px; }

  .slide { flex-basis: calc(100vw - 32px); aspect-ratio: 3 / 4; max-height: 560px; }
  .slide-caption { flex-direction: column; align-items: flex-start; gap: 12px; padding: 60px 20px 20px; }
  .slide-caption p { font-size: 16px; }
  .slide-product { right: 50%; transform: translate(50%, -60%); height: 55%; }
  .slide-product--wide { width: 80%; height: auto; }
  .slide-icon { right: 50%; transform: translate(50%, -70%); }
  .slide-hand { right: 50%; transform: translateX(50%); height: 60%; }
  .slide-product--wall { right: 50%; transform: translate(50%, -62%); height: 40%; }
  .slide-product--bar { right: 50%; transform: translate(50%, -62%); height: 54%; }
  .slide--lab .slide-product--wide { width: 70%; top: 42%; }

  .phero-lockup { font-size: 26px; }
  .media-frame { aspect-ratio: 4 / 3.6; }
  .media-product img, .media-product--vamo img { max-height: 380px; }
  .features, .steps { grid-template-columns: 1fr; }
  .step { padding: 0 0 0 60px; min-height: 40px; }
  .step::before { top: 48px; bottom: -32px; left: 20px; right: auto; width: 1px; height: auto; }
  .spec { grid-template-columns: 1fr; gap: 4px; }
  .uses { grid-template-columns: repeat(2, 1fr); }
  .cta-hand { width: 120px; }

  .store-card a { grid-template-columns: 1fr; min-height: 0; }
  .store-card-copy { padding: 28px 24px 0; }
  .store-card-media { height: 220px; }
  .store-card--light .store-card-media, .store-card--white .store-card-media { margin: 16px 24px 24px; height: auto; }
  .care-card { padding: 0 24px 28px; }
  .care-card-media { margin: 0 -24px 24px; height: 220px; }
  .about-lockup svg { height: 90px; }
  .leaders { grid-template-columns: 1fr; }
  .endorse-logo { font-size: 32px; }
  .legal-table { display: block; overflow-x: auto; }

  .wa-fab {
    position: fixed; right: 16px; bottom: 16px; z-index: 9980;
    display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    background: var(--palco-acao); color: var(--palco-acao-texto); border: 1px solid var(--palco-linha);
  }
  .wa-fab:hover { text-decoration: none; }
  .wa-fab .icon { stroke-width: 1.8; }
  .support-grid { grid-template-columns: 1fr; }
  .contact { padding-top: 48px; }
  .form { grid-template-columns: 1fr; }
  .form .btn { justify-self: stretch; }

  .cookie { bottom: 84px; }
  .cookie-main { flex-direction: column; align-items: stretch; }
  .cookie-actions .btn { flex: 1; }

  /* Rodapé em acordeão */
  .ft-directory { display: block; padding-top: 8px; }
  .ft-group { margin: 0; border-bottom: 1px solid var(--linha); }
  .ft-title { margin: 0; }
  .ft-title button { cursor: pointer; display: flex; justify-content: space-between; width: 100%; padding: 12px 0; color: var(--texto); }
  .ft-title button::after {
    content: ""; width: 7px; height: 7px; margin: 2px 4px 0 0;
    border-right: 1.3px solid var(--texto2); border-bottom: 1.3px solid var(--texto2);
    transform: rotate(45deg); transition: transform .3s var(--ease);
  }
  .ft-title button[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 6px; }
  .ft-group ul { display: none; padding: 0 0 10px 14px; }
  .ft-group.is-open ul { display: block; }
  .ft-legal { flex-direction: column; align-items: flex-start; }
}


/* =============================================================================
   13. Movimento reduzido
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .vein, .scan-ring, .ir-ring { stroke-dashoffset: 0 !important; }
  .scan-check, .palm-beam { opacity: 1 !important; }
  .js .reveal { opacity: 1; transform: none; }
}