/* =========================================================================
   AK BioSystems — Design System

   Paleta OFICIAL da marca, nao escolhida por olho:
     escuro  -> video_pipeline/config.py  (VINHETA["navy"], VINHETA["cyan"])
     claro   -> Brand/Padrao_Claro/PALETA.md (amostrado das telas reais do app)
   Fonte Poppins = BRAND["font_family"].

   Escuro e' o padrao. O claro sobrescreve SO' o que muda de cor; espaco,
   raio e peso sao compartilhados. Trocar cor solta aqui quebra o contraste
   verificado - rode o check antes de commitar.

   Ordem: tokens -> base -> layout -> componentes -> utilitarios -> media.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* --- superficie (escuro) ----------------------------------------------
     O fundo e' escuro e as superficies sao veus CLAROS por cima. E' isso que
     produz o glass; no tema claro a logica inverte (veus escuros). */
  --bg: #021524;
  --bg-deep: #010d17;
  --bg-raised: #04202f;
  --surface-1: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-3: rgba(255, 255, 255, 0.09);
  --surface-solid: #0a2130;

  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* --- acento ------------------------------------------------------------
     Turquoise 500 do Brand Portfolio v1.0 (22/08/2026). Trocou o ciano #2fd4cf,
     que nao era cor institucional. Medido sobre --bg: 8.18:1, passa AA.

     NAO adotamos a paleta do manual inteira: o Teal 700 que ele indica para
     links da 3.65:1 sobre o navy dele, e o Slate 500 da 4.03:1 -- os dois
     reprovam AA para texto normal. O manual entrega sistema de cor, nao rampa
     de texto verificada. Fundo e rampa continuam sendo os daqui.

     --accent para texto e traco; --accent-bright para preenchimento sob texto
     escuro. */
  --accent: #00c2a8;
  --accent-bright: #00c2a8;
  --accent-veil: rgba(0, 194, 168, 0.1);
  --accent-line: rgba(0, 194, 168, 0.3);

  /* --- texto -------------------------------------------------------------
     Tres niveis de enfase, todos >= 4.5:1 sobre --bg (verificado). */
  --text: #ffffff;
  --text-2: #a8c0ca;
  --text-3: #8aa3ae;
  --text-on-accent: #021524;

  /* --- aviso ------------------------------------------------------------- */
  --warn-veil: rgba(240, 190, 90, 0.09);
  --warn-line: rgba(240, 190, 90, 0.3);
  --warn-text: #f0cd8a;

  /* --- brilho ambiente do body ------------------------------------------- */
  --ambient-1: rgba(0, 194, 168, 0.09);
  --ambient-2: rgba(0, 194, 168, 0.05);

  /* --- elevacao ---------------------------------------------------------- */
  --sh-2: 0 8px 28px rgba(0, 0, 0, 0.4);
  --sh-3: 0 24px 64px rgba(0, 0, 0, 0.5);
  --glow: 0 10px 34px rgba(0, 194, 168, 0.18);

  /* --- hero sobre fotografia --------------------------------------------
     O Brand Portfolio exige campo de contraste sobre foto. No tema escuro o
     veu e' navy e o texto e' claro; no claro tudo inverte, incluindo um
     filtro na propria foto -- as tres nasceram para fundo escuro. */
  --hero-veil: linear-gradient(
    90deg,
    rgba(2, 21, 36, 0.94) 0%,
    rgba(2, 21, 36, 0.76) 44%,
    rgba(2, 21, 36, 0.1) 80%
  );
  --hero-filter: none;
  --hero-fg: #ffffff;
  --hero-fg-2: #cfe0e6;
  --hero-fg-3: #9db3bd;
  --hero-dot: rgba(255, 255, 255, 0.28);

  /* --- espaco ----------------------------------------------------------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  /* --- raio -------------------------------------------------------------
     16px e' a base dos cards (Bento). */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* --- tipografia -------------------------------------------------------- */
  --w-med: 500;
  --w-semi: 600;
  --w-bold: 700;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.22s;
}

/* =========================================================================
   Tema claro — Brand/Padrao_Claro/PALETA.md

   O acento NAO e' o turquesa: #00c2a8 sobre #f6f7f9 da 2.16:1, ilegivel -- e o
   proprio Brand Portfolio avisa disso. No claro entra o Teal 700 (#007f73,
   4.57:1), que e' a cor de marca/links do manual.
   ========================================================================= */

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f6f7f9;
  --bg-deep: #e4ebe8;
  --bg-raised: #edf2f0;
  /* veus ESCUROS sobre fundo claro - inverso do tema escuro */
  --surface-1: rgba(20, 38, 31, 0.035);
  --surface-2: rgba(20, 38, 31, 0.06);
  --surface-3: rgba(20, 38, 31, 0.09);
  --surface-solid: #e8f1ee;

  --border: rgba(20, 38, 31, 0.12);
  --border-strong: rgba(20, 38, 31, 0.22);

  --accent: #007f73;
  --accent-bright: #007f73;
  --accent-veil: rgba(0, 127, 115, 0.09);
  --accent-line: rgba(0, 127, 115, 0.28);

  --text: #14261f;
  --text-2: #3d4f48;
  --text-3: #55665f;
  --text-on-accent: #ffffff;

  --warn-veil: rgba(150, 100, 10, 0.08);
  --warn-line: rgba(150, 100, 10, 0.32);
  --warn-text: #6b4708;

  --ambient-1: rgba(0, 127, 115, 0.07);
  --ambient-2: rgba(0, 127, 115, 0.04);

  --sh-2: 0 8px 28px rgba(2, 21, 36, 0.08);
  --sh-3: 0 24px 64px rgba(2, 21, 36, 0.12);
  --glow: 0 10px 30px rgba(0, 127, 115, 0.2);

  --hero-veil: linear-gradient(
    90deg,
    rgba(246, 247, 249, 0.95) 0%,
    rgba(246, 247, 249, 0.8) 44%,
    rgba(246, 247, 249, 0.14) 80%
  );
  --hero-filter: brightness(1.65) saturate(0.82) contrast(0.92);
  --hero-fg: #14261f;
  --hero-fg-2: #3d4f48;
  --hero-fg-3: #55665f;
  --hero-dot: rgba(20, 38, 31, 0.22);
}

/* =========================================================================
   Base
   ========================================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family:
    Poppins,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  /* brilho ambiente: sutil, ancora o topo da pagina */
  background-image:
    radial-gradient(circle at 14% -6%, var(--ambient-1), transparent 42%),
    radial-gradient(circle at 88% 2%, var(--ambient-2), transparent 38%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Palavra longa (URL, termo tecnico) nao deve empurrar a largura da pagina.
   Isto trata o sintoma; overflow de layout se corrige no componente. */
p,
li,
h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  display: block;
}

/* Foco visivel em TODO interativo. Antes so' .skip e .play-download tinham
   estilo de foco; no escuro o outline padrao do browser some. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

h1,
h2,
h3 {
  color: var(--text);
}

h1 {
  font-size: clamp(2.5rem, 6vw, 5.3rem);
  line-height: 1;
  margin: var(--s5) 0;
  letter-spacing: -0.05em;
  font-weight: var(--w-bold);
}

h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.08;
  margin: 0 0 var(--s4);
  letter-spacing: -0.035em;
  font-weight: var(--w-bold);
}

h3 {
  font-size: 1.3rem;
  line-height: 1.28;
  margin: 0 0 var(--s2);
  letter-spacing: -0.015em;
  font-weight: var(--w-semi);
}

p {
  margin: 0 0 var(--s4);
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--s5);
}

.skip {
  position: absolute;
  left: -999px;
}

.skip:focus {
  left: var(--s3);
  top: var(--s3);
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: var(--w-semi);
  padding: var(--s2) var(--s3);
  z-index: 10;
  border-radius: var(--r-sm);
}

/* =========================================================================
   Tipografia auxiliar
   ========================================================================= */

.lead {
  font-size: 1.18rem;
  color: var(--text-2);
  max-width: 760px;
}

.muted {
  color: var(--text-2);
}

.small {
  font-size: 0.88rem;
  color: var(--text-3);
}

.caption {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--w-bold);
  color: var(--accent);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--accent);
  background: var(--accent-veil);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  padding: var(--s2) var(--s3);
  font-weight: var(--w-semi);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =========================================================================
   Cabecalho
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header {
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(18px) saturate(1.4);
  }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-weight: var(--w-bold);
  letter-spacing: 0.01em;
}

.brand img {
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  object-fit: cover;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s1);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-links a {
  font-size: 0.94rem;
  color: var(--text-2);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-pill);
  transition:
    color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.nav-links a:hover {
  color: var(--text);
  background: var(--surface-2);
}

.nav-links a.active {
  color: var(--accent);
  background: var(--accent-veil);
}

.lang-switch {
  display: flex;
  gap: var(--s1);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: var(--s1);
}

.lang-switch button,
.lang-switch a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border: 0;
  background: transparent;
  border-radius: var(--r-pill);
  min-height: 36px;
  padding: var(--s2) var(--s4);
  font: inherit;
  font-size: 0.82rem;
  font-weight: var(--w-semi);
  color: var(--text-3);
  cursor: pointer;
  transition:
    color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.lang-switch button:hover,
.lang-switch a:hover {
  color: var(--text);
}

.lang-switch button.active,
.lang-switch a.active {
  background: var(--accent);
  color: var(--text-on-accent);
}

/* Botao de tema — mesma linguagem visual do .lang-switch.
   Alvo de 44px, minimo recomendado para toque. */
.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--text-2);
  cursor: pointer;
  transition:
    color var(--dur) var(--ease),
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.theme-btn:hover {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--surface-2);
}

.theme-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* O icone mostra o destino do clique, nao o estado atual: no escuro
   aparece o sol (clicar leva ao claro) e no claro aparece a lua. */
.icon-moon {
  display: none;
}

:root[data-theme="light"] .icon-sun {
  display: none;
}

:root[data-theme="light"] .icon-moon {
  display: block;
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
  padding: var(--s9) 0 var(--s8);
}

.home-hero {
  padding: var(--s8) 0 var(--s7);
}

.home-hero h1 {
  font-size: clamp(2.15rem, 4.7vw, 4.35rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
  margin: var(--s4) 0 var(--s4);
  max-width: 900px;
}

.home-hero .lead {
  font-size: 1.12rem;
  line-height: 1.7;
  max-width: 720px;
}

.home-hero .muted {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 720px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: var(--s7);
  align-items: center;
}

.page-hero {
  padding: var(--s8) 0 var(--s6);
}

.page-hero h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
}

.breadcrumbs {
  font-size: 0.88rem;
  color: var(--text-3);
  margin-bottom: var(--s3);
}

.breadcrumbs a {
  color: var(--accent);
  font-weight: var(--w-med);
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.soft-brand-card {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: linear-gradient(145deg, var(--surface-2), rgba(46, 230, 207, 0.04));
  box-shadow: var(--sh-3);
  padding: var(--s6);
}

.soft-brand-card::before {
  content: "";
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, rgba(46, 230, 207, 0.16), transparent 62%);
  filter: blur(2px);
}

.soft-brand-card img {
  position: relative;
  width: min(74%, 330px);
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

.app-icon-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 420px;
  margin-inline: auto;
  padding: clamp(20px, 4vw, 42px);
}

.app-icon-hero img {
  width: min(260px, 72vw);
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
}

/* =========================================================================
   Secoes
   ========================================================================= */

.section {
  padding: var(--s9) 0;
}

.section.alt {
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* .section.dark e .card.dark-card sao heranca do tema claro. No dark-first
   viraram superficies mais profundas, para continuarem lendo como blocos
   intencionais em vez de virarem no-op. */
.section.dark {
  background: var(--bg-deep);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s6);
  margin-bottom: var(--s6);
}

.section-head p {
  max-width: 680px;
  color: var(--text-2);
  margin: 0;
}

/* =========================================================================
   Grid — Bento + utilitarios legados
   ========================================================================= */

.grid {
  display: grid;
  gap: var(--s4);
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Bento Box: 6 colunas, celulas de larguras variadas.
   Sem classe de span a celula ocupa 1/3. */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s4);
}

.bento > * {
  grid-column: span 2;
  min-width: 0;
}

.bento > .span-2 {
  grid-column: span 2;
}

.bento > .span-3 {
  grid-column: span 3;
}

.bento > .span-4 {
  grid-column: span 4;
}

.bento > .span-6 {
  grid-column: span 6;
}

/* Espacador vertical — evita style inline quando um bloco precisa respirar
   depois do Bento. */
.stack-lg {
  margin-top: var(--s7);
}

/* =========================================================================
   Cards (superficie glass)
   ========================================================================= */

.card {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--s5);
  box-shadow: var(--sh-2);
}

/* Glass so' onde ha suporte. Sem isto o texto fica sobre transparencia
   pura em browsers antigos. */
@supports (backdrop-filter: blur(1px)) {
  .card {
    background: var(--surface-1);
    backdrop-filter: blur(14px) saturate(1.3);
  }
}

/* Botao no rodape do cartao. Dentro de .grid os cartoes ja' esticam para a
   mesma altura, mas o botao seguia o texto e subia quando a descricao era
   curta -- na pagina de privacidade os quatro "Open" ficavam em quatro alturas
   diferentes. O :has() limita a mudanca aos cartoes que TERMINAM em botao;
   cartao com imagem ou lista no fim nao vira flex. `align-self` e' obrigatorio:
   sem ele o stretch padrao do flex esticaria a pilula ate a largura do cartao. */
.card:has(> .btn:last-child),
.card:has(> .actions:last-child) {
  display: flex;
  flex-direction: column;
}

.card > .btn:last-child {
  margin-top: auto;
  align-self: flex-start;
}

/* Cartao que termina em GRUPO de botoes -- o do OsteoFlow, que oferece politica
   e exclusao de conta. Mesma ancoragem do botao solto, para que os quatro
   cartoes da pagina de privacidade continuem com a base alinhada. */
.card > .actions:last-child {
  margin-top: auto;
}

.card.dark-card {
  background: var(--bg-deep);
  border-color: var(--border-strong);
}

.card img.logo-wide {
  max-height: 132px;
  object-fit: contain;
  margin: 0 auto var(--s5);
  border-radius: var(--r-sm);
}

.card img.logo-square {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: var(--r);
  margin-bottom: var(--s4);
}

.app-card {
  display: flex;
  flex-direction: column;
}

/* Caixa de logo IGUAL nos quatro cartoes. Sem isto, icone quadrado (112px) e
   logo deitado (ate' 132px, com outra margem) deixam os <h3> em alturas
   diferentes na mesma linha da grade. */
/* `.card.app-card` e nao `.app-card`: `.card img.logo-wide` tem duas classes e
   ganhava na margem inferior, deixando o <h3> dos dois logos deitados 8px mais
   baixo que o dos icones quadrados. */
.card.app-card > img {
  height: 112px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto var(--s4);
}

.app-card .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: auto;
  padding-top: var(--s4);
}

/* Os quatro cartoes tem numeros de botoes diferentes: Vagal HRV tem tres (saiba
   mais + duas lojas), Vagal Sense dois, LombarFlow e OsteoFlow um. O grupo e'
   ancorado na base pelo `margin-top: auto` acima, o que alinha o RODAPE dos
   cartoes -- mas fazia o PRIMEIRO botao cair em tres alturas diferentes, e e' o
   primeiro botao ("Saiba mais") que os quatro cartoes tem em comum.

   Reserva a altura do maior grupo e encosta as linhas no topo dessa reserva:
   assim "Saiba mais" fica na mesma linha nos quatro, e as lojas descem abaixo
   dele. `align-content` e nao `justify-content` porque .actions e' uma LINHA que
   quebra, entao o empilhamento acontece no eixo transversal.

   So' vale onde os cartoes estao lado a lado; abaixo de 980px a grade vira uma
   coluna so' e a reserva deixaria um vao morto embaixo de cada cartao.

   ponytail: 11.5rem e' a altura de 3 pilulas de 51px mais 2 gaps, medida no
   layout atual. Se entrar um quarto botao, ou se uma traducao quebrar um botao
   em duas linhas, o alinhamento se perde mas nada quebra -- min-height deixa o
   grupo crescer. O conserto definitivo seria `grid-template-rows: subgrid` nos
   cartoes, que hoje nao da' porque dois deles tem <span class="pill"> a mais. */
@media (min-width: 981px) {
  .app-card .actions {
    min-height: 11.5rem;
    align-content: flex-start;
  }

  /* Simetria das caixas de texto. Com os botoes ja' alinhados, sobravam tres
     desencontros DENTRO do texto, e cada um empurrava a linha seguinte:

     1. a <span class="pill"> ("Em desenvolvimento", "Programa de fundadores")
        so' existe no LombarFlow e no OsteoFlow, e come 32px de altura;
     2. a linha de destaque tem 3 linhas em dois cartoes e 2 nos outros;
     3. o corpo tem 6 linhas num cartao e 5 nos demais.

     Cada caixa passa a ter a altura da MAIOR, entao as quatro comecam e
     terminam na mesma linha. Medido nos tres idiomas: destaque nunca passa de
     3 linhas, e o corpo cresce sozinho ate' encostar nos botoes. */

  /* 1. reserva a faixa da pilula em quem nao tem uma. `:has()` ja' e' usado
        neste arquivo (ver `.card:has(> .btn:last-child)`), entao nao introduz
        dependencia nova. Margem de item flex nunca colapsa, entao esta margem
        vale exatamente a caixa da pilula nos outros dois cartoes.
        ponytail: 1.953125rem = os 31,25px que a `.pill` renderiza hoje
        (0.82rem de fonte + var(--s1) de padding + 1px de borda). Em rem para
        acompanhar a fonte raiz, como a propria pilula. Se o padding ou o
        tamanho da fonte da pilula mudarem, este numero desencosta - o sintoma
        e' 1px de desalinhamento no corpo do texto entre os cartoes. */
  .app-card:not(:has(> .pill)) > p:first-of-type {
    margin-top: 1.953125rem;
  }

  /* 2. destaque com a altura da maior versao. `lh` = uma linha desta caixa,
        entao acompanha mudanca de fonte sem recalcular. O px antes e' so'
        para browser sem suporte a `lh`. */
  .app-card > p:first-of-type {
    min-height: 79px;
    min-height: 3lh;
  }

  /* 3. o corpo cresce e ocupa a sobra ate' o grupo de botoes. Sem numero
        magico: seja qual for o idioma, as quatro caixas terminam na mesma
        linha. `flex-grow` e nao `flex: 1` de proposito - manter a base `auto`
        impede que um texto longo seja espremido. */
  .app-card > p:nth-of-type(2) {
    flex-grow: 1;
  }
}

/* Tile de recurso — usado no Bento para quebrar as listas <ul> de features
   em blocos curtos e agrupados. */
.feature-tile {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--s4) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  transition:
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

@supports (backdrop-filter: blur(1px)) {
  .feature-tile {
    background: var(--surface-1);
    backdrop-filter: blur(10px);
  }
}

.feature-tile:hover {
  border-color: var(--accent-line);
  background: var(--surface-2);
  transform: translateY(-2px);
}

.feature-tile h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--w-semi);
  color: var(--text);
  letter-spacing: -0.01em;
}

.feature-tile p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-3);
  line-height: 1.55;
}

.logo-tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--s4);
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-tile img {
  max-height: 128px;
  object-fit: contain;
  border-radius: var(--r-sm);
}

.logo-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
  align-items: center;
}

/* =========================================================================
   Botoes
   ========================================================================= */

.actions {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s5);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  padding: var(--s3) var(--s5);
  font-weight: var(--w-semi);
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform var(--dur) var(--ease),
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.btn.primary {
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  color: var(--text-on-accent);
  box-shadow: var(--glow);
}

.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(0, 194, 168, 0.28);
}

.btn.secondary {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn.secondary:hover {
  background: var(--surface-3);
  border-color: var(--accent-line);
  transform: translateY(-2px);
}

.btn.dark {
  background: var(--bg-deep);
  color: var(--text);
  border-color: var(--border-strong);
}

.btn.dark:hover {
  border-color: var(--accent-line);
}

/* Botao de loja compacto com icone SVG inline */
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  white-space: nowrap;
}

.store-icon {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  fill: currentColor;
}

/* Marca "em breve": nao e' link, nao promete loja que nao existe */
.btn.soon {
  background: var(--surface-1);
  border: 1px dashed var(--border-strong);
  color: var(--text-3);
  cursor: default;
}

/* =========================================================================
   Blocos de download
   ========================================================================= */

.download-section {
  padding: var(--s7) 0;
}

.download-card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(180px, 0.55fr);
  align-items: center;
  gap: var(--s6);
  background: linear-gradient(145deg, var(--surface-2), var(--accent-veil));
  border-color: var(--accent-line);
}

.download-card h2 {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  margin: var(--s2) 0 var(--s3);
}

.download-card .lead {
  font-size: 1.05rem;
  max-width: 760px;
}

.download-card.sense-card {
  background: linear-gradient(145deg, var(--surface-2), rgba(90, 170, 230, 0.07));
  border-color: rgba(120, 190, 240, 0.24);
}

.download-art {
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle, rgba(46, 230, 207, 0.16), transparent 62%);
  border-radius: var(--r);
  min-height: 200px;
}

.download-art img {
  width: min(160px, 70%);
  height: auto;
  border-radius: var(--r);
  box-shadow: var(--sh-2);
}

.store-note {
  margin-top: var(--s3);
  max-width: 760px;
}

/* Barra de download fixa no fim das paginas de produto */
.store-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s6);
  border-radius: var(--r);
  border: 1px solid var(--accent-line);
  background: linear-gradient(135deg, var(--surface-2), var(--accent-veil));
}

.store-cta h3 {
  margin: 0 0 var(--s1);
}

.store-cta p {
  margin: 0;
  color: var(--text-3);
  font-size: 0.9rem;
}

/* =========================================================================
   Avisos
   ========================================================================= */

/* Definicao unica. Antes .notice existia duas vezes em conflito, e a
   segunda usava var(--text), que nao existia no :root. */
.notice {
  background: var(--accent-veil);
  border: 1px solid var(--accent-line);
  border-radius: var(--r);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s5);
  color: var(--text-2);
}

.warning {
  background: var(--warn-veil);
  border-color: var(--warn-line);
  color: var(--warn-text);
}

.warning h3 {
  color: var(--warn-text);
}

.pill-row {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin: var(--s4) 0;
}

.pill {
  font-size: 0.82rem;
  font-weight: var(--w-med);
  color: var(--accent);
  background: var(--accent-veil);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  padding: var(--s1) var(--s3);
}

/* =========================================================================
   Conteudo longo / politicas
   ========================================================================= */

.content {
  max-width: 900px;
}

.content h2 {
  font-size: 1.85rem;
  margin-top: var(--s7);
}

.content h3 {
  margin-top: var(--s5);
}

.content ul {
  padding-left: 1.15rem;
  color: var(--text-2);
}

.content li {
  margin: var(--s2) 0;
}

.policy {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--s6);
  box-shadow: var(--sh-2);
}

.policy.content ul {
  margin: var(--s3) 0 var(--s5) 1.2rem;
}

.policy.content li {
  margin: var(--s1) 0;
}

.policy.content h2 {
  scroll-margin-top: 90px;
}

.policy-meta {
  margin-top: var(--s5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  color: var(--text-3);
  font-size: 0.95rem;
}

.policy-meta p {
  margin: 0;
}

.table-wrap {
  overflow-x: auto;
  margin: var(--s4) 0 var(--s5);
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.table-wrap th,
.table-wrap td {
  border: 1px solid var(--border);
  padding: var(--s3);
  text-align: left;
  vertical-align: top;
  color: var(--text-2);
}

.table-wrap th {
  background: var(--surface-2);
  color: var(--text);
  font-weight: var(--w-semi);
}

/* =========================================================================
   Galeria de screenshots
   ========================================================================= */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  margin-top: var(--s5);
}

.phone-shot {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--s2);
  box-shadow: var(--sh-2);
  transition:
    transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.phone-shot:hover {
  transform: translateY(-3px);
  border-color: var(--accent-line);
}

.phone-shot img {
  border-radius: var(--r-sm);
  width: 100%;
  height: auto;
}

.shot-caption {
  font-size: 0.85rem;
  color: var(--text-3);
  margin-top: var(--s2);
  text-align: center;
}

.product-logo {
  /* max-width sozinho nao segura: 420px estoura uma viewport de 375 e criava
     78px de scroll lateral (medido 22/08). O min() e o display block resolvem
     nas duas pontas. */
  display: block;
  width: 100%;
  max-width: min(420px, 100%);
  height: auto;
  /* Teto de ALTURA: sem ele, logo quadrado e logo deitado com a mesma largura
     saem com alturas muito diferentes -- o do LombarFlow (640x640) ficava com o
     triplo da altura do OsteoFlow (840x271) no mesmo par de cartoes. */
  max-height: 140px;
  object-fit: contain;
  margin: 0 auto var(--s5);
}

/* Faixa de confianca do hero. Só afirmacao verificavel: dados no aparelho e
   gratuidade. Nada de selo cientifico ou contagem de usuarios — a regra de
   linguagem de 19/07 proibe alegacao de efeito, e numeros inventados. */
.trust-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin: var(--s5) 0 0;
  padding: 0;
}

.trust-list li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.9rem;
  color: var(--text-2);
}

.trust-list li::before {
  content: "✓";
  color: var(--accent);
  font-weight: var(--w-med);
}

/* =========================================================================
   Rodape
   ========================================================================= */

.footer {
  padding: var(--s8) 0 var(--s5);
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
}

.footer a {
  color: var(--accent);
}

.footer a:hover {
  text-decoration: underline;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--s6);
}

/* Lista de lojas do rodape. O CSS antigo tinha regras .footer-store-list
   e .footer-download escondidas por display:none, mas NENHUM html as
   usava — era CSS morto. Aqui elas passam a ter markup de verdade. */
.footer-stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s4) 0;
}

.footer-stores .btn {
  font-size: 0.88rem;
  padding: var(--s2) var(--s4);
}

.divider {
  height: 1px;
  background: var(--border);
  margin: var(--s6) 0 var(--s4);
}

/* =========================================================================
   i18n — os 3 idiomas coexistem no DOM, alternados por classe no body
   ========================================================================= */

.lang-block {
  display: none;
}

/* Bloco que so' existe em alguns idiomas. Caso real: o video tem legenda
   queimada na imagem, entao so' serve no idioma em que foi produzido - ha
   versao PT e ES, nao ha EN. Sem isto a secao ficaria vazia mas ocupando
   os 96px de padding em ingles. */
.lang-only-pt-es {
  display: none;
}

body.lang-pt .lang-only-pt-es,
body.lang-es .lang-only-pt-es {
  display: block;
}

/* Video vertical 9:16 do app */
.video-wrap {
  /* 16:9 desde 22/08 -- os videos eram 720x1280 verticais e foram
     reenquadrados para 1920x1080 com fundo desfocado do proprio quadro. */
  max-width: 760px;
  margin-inline: auto;
  margin-top: var(--s5);
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-deep);
  box-shadow: var(--sh-3);
}

.video-wrap video {
  display: block;
  width: 100%;
  height: auto;
}

body.lang-en .lang-block[data-lang-block="en"],
body.lang-pt .lang-block[data-lang-block="pt"],
body.lang-es .lang-block[data-lang-block="es"] {
  display: block;
}

/* Dentro de um cartao de app o bloco do idioma precisa CRESCER e ser flex, senao
   o `margin-top: auto` do `.actions` nao tem contêiner onde empurrar e os botoes
   ficam logo abaixo do texto, cada cartao numa altura. Vem depois da regra acima
   de proposito: mesma especificidade, ganha a ultima. */
body.lang-en .app-card > .lang-block[data-lang-block="en"],
body.lang-pt .app-card > .lang-block[data-lang-block="pt"],
body.lang-es .app-card > .lang-block[data-lang-block="es"] {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Slides que nao sao o primeiro nao podem ser <h1>: um documento tem UM.
   O gerador de idiomas rebaixa os demais para <p class="hero-h1">, que
   precisa continuar com a aparencia de titulo. */
.hero-h1 {
  font-size: clamp(2.15rem, 4.7vw, 4.35rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
  font-weight: var(--w-bold);
  margin: var(--s5) 0;
  color: var(--hero-fg);
  text-wrap: pretty;
}

/* =========================================================================
   Hero com rodizio (home)

   Tres fotos empilhadas; so' a que tem .is-on aparece. A copy troca junto,
   dentro do .lang-block do idioma -- as duas dimensoes sao independentes:
   .lang-block decide o IDIOMA, .hero-copy decide o SLIDE.

   O avanco automatico e' desligado no JS quando ha prefers-reduced-motion.
   Aqui so' matamos a transicao, que e' a metade visual da guarda.
   ========================================================================= */

.hero-rotator {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  display: flex;
  align-items: center;
  background: var(--bg-deep);
}

.hero-bg {
  position: absolute;
  inset: 0;
}

.hero-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: var(--hero-filter);
  transition: opacity 0.7s var(--ease);
}

.hero-shot.is-on {
  opacity: 1;
}

.hero-veil {
  position: absolute;
  inset: 0;
  background: var(--hero-veil);
}

.hero-rotator-body {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-copy {
  display: none;
  /* 560px servia a home, de titulo curto. Titulo longo (autonomic-wellness
     tem 64 caracteres) empilhava em 5 linhas a 64px. 720px devolve 3.
     ARMADILHA REGISTRADA: nao colocar grade de 2 colunas aqui dentro -- foi
     o que espremeu o titulo a ~190px e partiu "measured" ao meio. */
  max-width: 720px;
}

.hero-copy.is-on {
  display: block;
}

/* Sobre foto o texto nao usa a rampa normal: ele tem o proprio par de
   tokens, que inverte junto com o veu. */
.hero-rotator h1 {
  color: var(--hero-fg);
}

.hero-rotator .lead {
  color: var(--hero-fg-2);
}

.hero-note {
  font-size: 0.82rem;
  color: var(--hero-fg-3);
  margin: var(--s4) 0 0;
}

.hero-rotator .btn.secondary {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--hero-fg);
}

.hero-dots {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s6);
}

.hero-dot {
  width: 30px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--hero-dot);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.hero-dot.is-on {
  background: var(--accent);
}

@media (max-width: 560px) {
  .hero-rotator {
    min-height: 560px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-shot {
    transition: none;
  }
}

/* =========================================================================
   Responsivo
   ========================================================================= */

@media (max-width: 980px) {
  .hero-grid,
  .grid.two,
  .grid.three,
  .grid.four,
  .footer-grid,
  .download-card {
    grid-template-columns: 1fr;
  }

  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .bento > .span-6 {
    grid-column: span 4;
  }

  /* span-3 dentro de uma grade de 4 colunas ocupa 3/4 e deixa uma coluna
     orfa ao lado, larga demais para caber outra celula. Vira metade. */
  .bento > .span-3 {
    grid-column: span 2;
  }

  .section-head {
    display: block;
  }

  .section-head p {
    margin-top: var(--s4);
  }

  /* align-items:stretch (padrao) e' obrigatorio aqui. Com flex-start os
     filhos ficam shrink-to-fit, o flex-wrap dos links nunca dispara e a
     nav estoura a viewport no mobile. */
  .nav {
    flex-direction: column;
    align-items: stretch;
    padding: var(--s4) 0;
  }

  .nav-right,
  .nav-links {
    width: 100%;
    justify-content: flex-start;
  }

  .hero,
  .home-hero,
  .page-hero {
    padding-top: var(--s6);
  }

  .section {
    padding: var(--s7) 0;
  }

  .soft-brand-card {
    min-height: 320px;
  }

  .soft-brand-card img {
    width: min(68%, 280px);
  }

  .download-art {
    min-height: 160px;
    order: -1;
  }

  .download-art img {
    width: 118px;
  }

  .logo-strip {
    grid-template-columns: 1fr 1fr;
  }

  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .container {
    padding: 0 var(--s4);
  }

  /* No mobile o Bento colapsa para coluna unica — celula larga demais
     em tela estreita vira scroll horizontal. */
  .bento,
  .bento > *,
  .bento > .span-2,
  .bento > .span-3,
  .bento > .span-4,
  .bento > .span-6 {
    grid-column: auto;
  }

  .bento {
    grid-template-columns: 1fr;
  }

  .logo-strip,
  .gallery {
    grid-template-columns: 1fr;
  }

  .card {
    padding: var(--s4);
  }

  .nav-links a {
    font-size: 0.9rem;
    padding: var(--s3) var(--s4);
  }

  h1 {
    font-size: 2.4rem;
  }

  .home-hero h1 {
    font-size: 2.2rem;
  }

  .policy,
  .store-cta {
    padding: var(--s5);
  }

  .soft-brand-card {
    min-height: 250px;
    padding: var(--s5);
  }

  .app-icon-hero {
    max-width: 320px;
    padding: var(--s5);
  }

  .app-icon-hero img {
    width: min(220px, 70vw);
  }

  .footer-stores .btn {
    width: 100%;
  }
}

/* =========================================================================
   Movimento reduzido — requisito de acessibilidade.
   A folha antiga nao tinha uma unica guarda destas, e scroll-behavior:
   smooth era incondicional.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}