/* Alua · landing pages das submarcas (Vitals e Praxis)
   Fonte única: comum/estilo.css → copiado para cada site por tools/montar.js
   Regras do manual de marca v1.0: noite = cada marca a sua cor; violeta = lima; claro = violeta. */

@font-face { font-family: "Oswald"; src: url(fontes/oswald-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Oswald"; src: url(fontes/oswald-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fontes/barlow-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fontes/barlow-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fontes/barlow-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fontes/jetbrains-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* paleta oficial (manual v1.0 = website) */
  --noite: #1A1023;
  --noite-2: #2A1B3D;
  --violeta: #7A27CF;
  --lima: #E6F13A;
  --violeta-claro: #B48CFF;
  --papel: #F4F1F8;
  --branco: #FFFFFF;
  --lilas: #A89BC2;
  --lilas-claro: #E8DCFF;
  --texto-suave: #6F6384;
  --linha-escura: rgb(255 255 255 / .1);
  --linha-clara: rgb(26 16 35 / .12);

  /* cor da marca (sobre noite); cada site define data-marca no <html> */
  --acento: var(--lima);

  --f-titulo: "Oswald", "Arial Narrow", sans-serif;
  --f-texto: "Barlow", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --t-base: 1.125rem;
  --t-pequeno: .9375rem;
  --t-rotulo: .8125rem;
  --t-lead: clamp(1.19rem, 1.7vw, 1.44rem);
  --t-h1: clamp(2.6rem, 5vw, 4.9rem);
  --t-h2: clamp(2.1rem, 4.6vw, 4.2rem);
  --t-h3: clamp(1.3rem, 1.9vw, 1.65rem);

  --largura: 77.5rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --seccao: clamp(4.5rem, 10vw, 8.5rem);
  --raio: 1rem;
  --raio-g: 1.5rem;
  --suave: cubic-bezier(.2, .7, .2, 1);
}
html[data-marca="vitals"] { --acento: var(--violeta-claro); }
html[data-marca="praxis"] { --acento: var(--lima); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; font-family: var(--f-texto); font-size: var(--t-base); line-height: 1.55; color: var(--papel); background: var(--noite); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
.contentor { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999rem; top: .5rem; background: var(--acento); color: var(--noite); padding: .5rem 1rem; border-radius: 999px; z-index: 100; }
.saltar:focus { left: .5rem; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

/* tipografia */
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 600; text-transform: uppercase; line-height: 1.08; letter-spacing: .005em; margin: 0; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
.rotulo { font-family: var(--f-mono); font-size: var(--t-rotulo); letter-spacing: .02em; color: var(--acento); margin: 0 0 1rem; }
.rotulo::after { content: "_"; }
.acento { color: var(--acento); }
.lima { color: var(--lima); }
.lead { font-size: var(--t-lead); max-width: 44ch; color: var(--lilas-claro); }
.suave { color: var(--lilas); }

/* botões */
.botao { white-space: nowrap; display: inline-flex; align-items: center; gap: .6rem; font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .04em; font-size: 1.0625rem; font-weight: 500; padding: 1rem 1.75rem; border-radius: 999px; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .2s var(--suave), background .2s, color .2s, border-color .2s; }
.botao:hover { transform: translateY(-2px); }
.botao-acento { background: var(--acento); color: var(--noite); }
.botao-lima { background: var(--lima); color: var(--noite); }
.botao-escuro { background: var(--noite); color: var(--branco); }
.botao-contorno { border-color: currentColor; color: inherit; background: transparent; }
.botao-pequeno { padding: .6rem 1.1rem; font-size: .9375rem; }
.seta { display: inline-block; transition: transform .2s var(--suave); }
a:hover .seta, button:hover .seta { transform: translateX(5px); }
.botoes { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* faixa de endosso + cabeçalho */
.endosso { background: var(--papel); color: var(--noite); font-size: var(--t-pequeno); }
.endosso .contentor { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.5rem; }
.endosso a { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 500; }
.endosso img { height: 1.1rem; width: auto; }
.endosso .mono { font-family: var(--f-mono); font-size: var(--t-rotulo); color: var(--texto-suave); }
.endosso a:hover span { text-decoration: underline; text-underline-offset: 3px; }

.topo { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--noite) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha-escura); }
.topo .contentor { display: flex; align-items: center; gap: 1.75rem; height: 4.5rem; }
.topo .logo img { height: 2.1rem; width: auto; }
.menu { display: flex; gap: 1.6rem; margin: 0 0 0 auto; list-style: none; padding: 0; font-size: var(--t-pequeno); }
.menu a { white-space: nowrap; text-decoration: none; color: var(--lilas-claro); }
.menu a:hover { color: var(--acento); }
.topo .botoes { flex-wrap: nowrap; }
@media (max-width: 70rem) { .menu { display: none; } .topo .botoes { margin-left: auto; } }
@media (max-width: 34rem) { .topo .so-largo { display: none; } .topo .logo img { height: 1.7rem; } .endosso .mono { display: none; } }

/* secções */
.seccao { padding: var(--seccao) 0; position: relative; }
.seccao-clara { background: var(--papel); color: var(--noite); }
.seccao-clara .rotulo { color: var(--violeta); }
.seccao-clara .lead, .seccao-clara .suave { color: var(--texto-suave); }
.seccao-violeta { background: var(--violeta); color: var(--branco); }
.seccao-violeta .rotulo, .seccao-violeta .acento { color: var(--lima); }
.seccao-violeta .lead { color: var(--lilas-claro); }
.cabeca { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 62rem) { .cabeca-dupla { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 4rem; } }

/* herói */
.heroi { padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(4rem, 8vw, 6.5rem); position: relative; overflow: hidden; isolation: isolate; }
.heroi-grelha { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 62rem) { .heroi-grelha { grid-template-columns: 1fr 1.1fr; } }
.heroi h1 { margin-bottom: 1.5rem; }
.heroi .lead { margin-bottom: 2rem; }
.heroi-nota { font-family: var(--f-mono); font-size: var(--t-rotulo); color: var(--lilas); margin-top: 1.25rem; }
.lua-fundo { position: absolute; z-index: -1; right: -12vw; top: -8vw; width: min(62vw, 46rem); opacity: .07; pointer-events: none; }

/* cartões de sinais (dores) */
.sinais { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.sinal { background: var(--branco); border: 1px solid var(--linha-clara); border-radius: var(--raio); padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.sinal blockquote { margin: 0; font-family: var(--f-titulo); font-weight: 500; text-transform: uppercase; font-size: 1.35rem; line-height: 1.15; color: var(--noite); }
.sinal p { margin: 0; color: var(--texto-suave); font-size: var(--t-pequeno); }
.sinal .n { font-family: var(--f-mono); font-size: var(--t-rotulo); color: var(--violeta); }

/* oferta */
.oferta { display: grid; gap: 1px; background: var(--linha-escura); border: 1px solid var(--linha-escura); border-radius: var(--raio-g); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); }
.item { background: var(--noite); padding: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: .85rem; transition: background .25s; }
.item:hover { background: var(--noite-2); }
.item .icone { width: 2.75rem; height: 2.75rem; border-radius: .75rem; display: grid; place-items: center; background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento); }
.item .icone svg { width: 1.4rem; height: 1.4rem; }
.item p { margin: 0; color: var(--lilas); font-size: var(--t-pequeno); }
.item .meta { font-family: var(--f-mono); font-size: var(--t-rotulo); color: var(--acento); margin-top: auto; padding-top: .5rem; }

/* passos */
.passos { display: grid; gap: 1.25rem; counter-reset: passo; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); list-style: none; padding: 0; margin: 0; }
.passo { counter-increment: passo; border-top: 2px solid currentColor; padding-top: 1.25rem; }
.passo::before { content: "0" counter(passo); display: block; font-family: var(--f-titulo); font-size: 3.25rem; font-weight: 600; line-height: 1; margin-bottom: .75rem; color: var(--lima); }
.passo .fase { font-family: var(--f-mono); font-size: var(--t-rotulo); letter-spacing: .06em; display: inline-block; margin-bottom: .5rem; padding: .2rem .55rem; border-radius: 999px; background: rgb(255 255 255 / .14); }
.passo h3 { margin-bottom: .6rem; }
.passo p { margin: 0; color: var(--lilas-claro); font-size: var(--t-pequeno); }

/* garantias */
.garantias { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); list-style: none; padding: 0; margin: 2.5rem 0 0; }
.garantias li { display: flex; gap: .85rem; align-items: flex-start; padding: 1.25rem; border-radius: var(--raio); border: 1px solid var(--linha-escura); background: rgb(255 255 255 / .03); font-size: var(--t-pequeno); color: var(--lilas-claro); }
.garantias strong { display: block; color: var(--papel); font-weight: 600; font-size: 1rem; margin-bottom: .2rem; }
.garantias svg { flex: none; width: 1.4rem; height: 1.4rem; color: var(--acento); margin-top: .1rem; }

/* família de marcas */
.familia { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.marca { display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem; border-radius: var(--raio); background: var(--branco); border: 1px solid var(--linha-clara); text-decoration: none; color: var(--noite); transition: transform .2s var(--suave), box-shadow .2s; }
a.marca:hover { transform: translateY(-3px); box-shadow: 0 1rem 2.5rem -1.25rem rgb(26 16 35 / .35); }
.marca img { height: 2.4rem; width: auto; align-self: flex-start; }
.marca-mae { background: var(--noite); color: var(--papel); border-color: var(--noite); }
.marca-mae img { height: 2.9rem; }
.marca p { margin: 0; font-size: var(--t-pequeno); color: var(--texto-suave); }
.marca-mae p { color: var(--lilas); }
.marca .ir { margin-top: auto; font-family: var(--f-mono); font-size: var(--t-rotulo); color: var(--violeta); }
.marca-mae .ir { color: var(--lima); }
.marca .aqui { margin-top: auto; font-family: var(--f-mono); font-size: var(--t-rotulo); color: var(--texto-suave); }

/* contacto */
.contacto-grelha { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 62rem) { .contacto-grelha { grid-template-columns: 1fr 1fr; } }
.canais { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .25rem; }
.canais a { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--linha-escura); text-decoration: none; font-size: 1.15rem; }
.canais a:hover { color: var(--acento); }
.canais .tipo { font-family: var(--f-mono); font-size: var(--t-rotulo); color: var(--lilas); min-width: 6.5rem; }
.cartao-acao { background: var(--noite-2); border-radius: var(--raio-g); padding: clamp(1.75rem, 3.5vw, 2.75rem); border: 1px solid var(--linha-escura); }
.cartao-acao h3 { margin-bottom: .75rem; }
.cartao-acao p { color: var(--lilas-claro); }

/* formulário (gera um email; nada é guardado no site) */
.form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.form-duplo { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.form label { display: grid; gap: .4rem; font-size: var(--t-pequeno); color: var(--lilas-claro); }
.form input, .form select, .form textarea { font: inherit; font-size: 1rem; color: var(--papel); background: var(--noite); border: 1px solid rgb(255 255 255 / .18); border-radius: .75rem; padding: .85rem 1rem; width: 100%; }
.form textarea { min-height: 6.5rem; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: transparent; }
.form .nota { font-size: var(--t-rotulo); font-family: var(--f-mono); color: var(--lilas); margin: 0; }
.form button { justify-self: start; }

/* rodapé */
.rodape { background: var(--noite); border-top: 1px solid var(--linha-escura); padding: 3.5rem 0 2rem; font-size: var(--t-pequeno); color: var(--lilas); }
.rodape-grelha { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); align-items: start; }
.rodape img { height: 3.4rem; width: auto; }
.rodape h4 { font-family: var(--f-mono); font-weight: 400; font-size: var(--t-rotulo); color: var(--acento); margin: 0 0 .85rem; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--acento); }
.rodape-fim { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linha-escura); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-family: var(--f-mono); font-size: var(--t-rotulo); }
.slogan { font-family: var(--f-texto); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; color: var(--lilas-claro); }

/* barra fixa no telemóvel */
.barra-movel { display: none; }
@media (max-width: 40rem) {
  .barra-movel { display: flex; position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 60; gap: .5rem; padding: .5rem; border-radius: 999px; background: color-mix(in srgb, var(--noite-2) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--linha-escura); transform: translateY(150%); transition: transform .3s var(--suave); }
  .barra-movel.visivel { transform: none; }
  .barra-movel .botao { flex: 1; justify-content: center; padding: .8rem 1rem; font-size: .95rem; }
  .rodape { padding-bottom: 6rem; }
}

/* aparecer ao deslizar */
.revelar { opacity: 0; transform: translateY(1.5rem); transition: opacity .7s var(--suave), transform .7s var(--suave); }
.revelar.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; }
}

/* telemóvel: botões longos podem quebrar linha; colunas nunca alargam a página */
.heroi-grelha > *, .contacto-grelha > *, .cabeca > * { min-width: 0; }
@media (max-width: 34rem) {
  .botao { white-space: normal; text-align: center; }
  .heroi .botoes .botao { width: 100%; justify-content: center; }
  .topo .botoes .botao { white-space: nowrap; }
}

/* seletor de língua (PT | EN) */
.linguas { display: inline-flex; border: 1px solid var(--linha-escura); border-radius: 999px; padding: .2rem; font-family: var(--f-mono); font-size: var(--t-rotulo); }
.linguas a { text-decoration: none; color: var(--lilas); padding: .3rem .6rem; border-radius: 999px; }
.linguas a:hover { color: var(--acento); }
.linguas a[aria-current] { background: var(--acento); color: var(--noite); }
/* sugestão discreta de outra língua (só para visitantes cujo navegador não está em português) */
.aviso-lingua { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 1rem; padding: .6rem .6rem .6rem 1.2rem; border-radius: 999px; background: var(--papel); color: var(--noite); font-size: var(--t-pequeno); box-shadow: 0 1rem 2.5rem -1rem rgb(0 0 0 / .5); max-width: calc(100% - 2rem); }
.aviso-lingua[hidden] { display: none; }
.aviso-lingua a { font-weight: 600; color: var(--violeta); white-space: nowrap; }
.aviso-lingua button { font: inherit; border: 0; background: var(--noite); color: var(--papel); width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer; flex: none; }
@media (max-width: 40rem) { .aviso-lingua { bottom: 5.5rem; } }

/* Formulários enviados pelo Netlify (consentimento, aviso Praxis online) */
.form .consentimento, .form-aviso .consentimento { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-pequeno); }
.form .consentimento input, .form-aviso .consentimento input { width: auto; margin-top: .2rem; accent-color: var(--acento); }
.form .consentimento a, .form-aviso .consentimento a { color: inherit; text-decoration: underline; }
.form-titulo { margin: 2.5rem 0 0; }
.form-aviso { display: grid; gap: .75rem; max-width: 34rem; }
.form-aviso-linha { display: flex; flex-wrap: wrap; gap: .75rem; }
.form-aviso-linha input { flex: 1 1 14rem; font: inherit; font-size: 1rem; color: var(--noite); background: var(--branco); border: 2px solid var(--noite); border-radius: 999px; padding: .85rem 1.2rem; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }