/* =============================================================
   vittare life — landing, suporte e páginas de conta
   Carregado DEPOIS de styles.css (que segue servindo /privacidade
   e /termos). Tudo aqui é prefixado `lp-` pra não colidir.

   Cores espelham src/constants/colors.ts do app.
   ============================================================= */

@font-face { font-family:'Poppins'; src:url('/assets/fonts/Poppins_400Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/assets/fonts/Poppins_600SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/assets/fonts/Poppins_700Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/assets/fonts/Poppins_300Light_Italic.ttf') format('truetype'); font-weight:300; font-style:italic; font-display:swap; }

:root {
  --teal-700:#0f766e; --teal-600:#0d9488; --teal-500:#14b8a6; --teal-400:#2dd4bf; --emerald:#34d399;
  --glp1-50:#edfaf5;  --glp1-100:#d7f5ec; --glp1-400:#5bc8a8; --glp1-600:#3fa98a; --glp1-700:#2f8a70;
  --preg-50:#fff4ef;  --preg-100:#ffe9e1; --preg-400:#ffb59e; --preg-600:#f0875f; --preg-700:#d96a43;
  --cycle-50:#fff1f4; --cycle-100:#ffe3e9; --cycle-400:#ff7e97; --cycle-600:#f5305c; --cycle-700:#d11a47;
  --lav-100:#ede9fe;  --lav-600:#8b6fe0;

  --ink:#221f33; --ink-2:#403d56; --muted:#6b6880; --line:#e9e6f2;
  --surface:#fff; --canvas:#faf9fd;
  --night:#15131f; --night-2:#221f33;

  --r:26px; --r-sm:18px;
  --max:1160px;
}

.lp { font-family:'Poppins', system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--canvas); color:var(--ink); overflow-x:hidden; }
/* height:auto é obrigatório: os <img> trazem width/height como atributo (pra
   reservar espaço e o layout não pular ao carregar) e sem isto o browser usa a
   altura literal e estica a imagem. */
.lp img { max-width:100%; height:auto; display:block; }
.lp-wrap { max-width:var(--max); margin:0 auto; padding:0 24px; }
.lp-nowrap { white-space:nowrap; }

/* ===== Revelação no scroll (progressive enhancement) ===== */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } }

/* ===== Topo ===== */
/* Transparente sobre o hero; ganha fundo só depois que a página rola (.stuck
   é aplicada por JS — sem JS o header fica legível do mesmo jeito porque o
   hero atrás dele já é escuro). */
.lp-top { position:sticky; top:0; z-index:40; background:transparent; border-bottom:1px solid transparent; transition:background .25s ease, border-color .25s ease; }
.lp-top.stuck { background:rgba(21,19,31,.82); backdrop-filter:saturate(180%) blur(16px); border-bottom-color:rgba(255,255,255,.08); }
.lp-top-in { display:flex; align-items:center; gap:24px; height:70px; }
.lp-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.lp-logo:hover { text-decoration:none; }
.lp-logo b { font-weight:700; color:#fff; font-size:1.28rem; letter-spacing:-.02em; }
/* `life` colado no `vittare`, como na marca dentro do app. */
.lp-logo i { font-weight:300; font-style:italic; color:var(--teal-400); font-size:1.28rem; margin-left:-1px; letter-spacing:-.01em; }
.lp-nav { margin-left:auto; display:flex; gap:28px; align-items:center; }
.lp-nav a { color:#cfcbe0; font-size:.94rem; font-weight:600; }
.lp-nav a:hover { color:#fff; text-decoration:none; }

/* ===== Botões ===== */
.lp-btn { display:inline-flex; align-items:center; gap:9px; padding:15px 26px; border-radius:16px; font-weight:600; font-size:1rem; transition:transform .18s ease, box-shadow .18s ease; }
.lp-btn:hover { text-decoration:none; transform:translateY(-2px); }
.lp-btn-primary { background:linear-gradient(135deg,var(--emerald),var(--teal-600)); color:#0b1f1a; box-shadow:0 14px 34px -12px rgba(52,211,153,.6); }
.lp-btn-primary:hover { color:#0b1f1a; box-shadow:0 20px 44px -12px rgba(52,211,153,.7); }
/* Badges de loja. Eram <span aria-disabled> com "em breve" ate o app sair nas
   duas lojas (ago/2026); viraram links de verdade, com icone. O icone nao e
   enfeite: badge de loja sem ele parece botao generico, e a pessoa hesita
   antes de tocar no que deveria ser a acao mais obvia da pagina. */
.lp-store { display:inline-flex; align-items:center; gap:11px; padding:11px 20px; border-radius:14px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#fff; font-weight:600; font-size:.98rem; line-height:1.2; text-decoration:none; transition:background .18s ease, border-color .18s ease, transform .18s ease; }
.lp-store:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.26); transform:translateY(-1px); }
.lp-store:focus-visible { outline:2px solid var(--emerald); outline-offset:3px; }
.lp-store svg { width:21px; height:21px; flex:none; }
.lp-store span { display:flex; flex-direction:column; }
.lp-store small { font-size:.7rem; font-weight:400; opacity:.65; }


/* ===== HERO (escuro, com o produto em cena) ===== */
/* O hero sobe por baixo do header (70px) para que o topo transparente caia
   sobre o escuro, e não sobre a faixa clara do body. */
.lp-hero { position:relative; background:var(--night); color:#fff; overflow:hidden; margin-top:-70px; padding:120px 0 0; }
.lp-hero::before {
  content:''; position:absolute; inset:-260px -10% auto -10%; height:900px; pointer-events:none;
  background:
    radial-gradient(42% 46% at 22% 26%, rgba(52,211,153,.34), transparent 68%),
    radial-gradient(38% 44% at 78% 16%, rgba(45,212,191,.26), transparent 66%),
    radial-gradient(34% 40% at 62% 62%, rgba(255,126,151,.20), transparent 68%);
}
.lp-hero-in { position:relative; display:grid; grid-template-columns:1.02fr .98fr; gap:40px; align-items:center; padding-bottom:24px; }
.lp-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:999px; background:rgba(52,211,153,.14); border:1px solid rgba(52,211,153,.3); color:#a7f3d8; font-size:.8rem; font-weight:600; letter-spacing:.02em; }
.lp-h1 { margin:20px 0 16px; font-size:clamp(2.4rem,5.4vw,4rem); line-height:1.04; font-weight:700; letter-spacing:-.035em; }
.lp-h1 em { font-style:normal; background:linear-gradient(100deg,var(--emerald),var(--teal-400)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lp-lead { font-size:1.14rem; line-height:1.65; color:#c4c0d6; max-width:32rem; margin:0 0 30px; }
.lp-cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.lp-hero-note { margin:20px 0 0; font-size:.88rem; color:#8f8ba6; }

/* Indicador de rolagem para a primeira seção.
   Era um terceiro botão ("Ver como funciona") ao lado dos badges de loja.
   Quando os badges viraram links de verdade e ganharam ícone, os três
   passaram a ter peso parecido — e um hero com três ações concorrentes não
   tem ação nenhuma. A seta preserva o caminho para o conteúdo sem disputar
   com o download, que é o que a página quer. O rótulo continua existindo no
   aria-label: some do olho, não do leitor de tela. */
/* Vive fora das duas colunas do hero, ocupando uma linha propria do grid:
   dentro da coluna de texto ela centralizava naquela metade, e na tela
   larga isso lia como "encostada a esquerda". `1 / -1` faz ela atravessar
   as duas colunas, e o justify-self centra no eixo da pagina. No mobile o
   grid ja vira uma coluna so, entao a regra continua valendo sem media query. */
.lp-scroll { grid-column:1 / -1; justify-self:center; display:inline-flex; flex-direction:column; align-items:center; gap:1px; padding:11px 16px; color:var(--emerald); transition:color .18s ease; }
.lp-scroll:hover { color:#fff; }
.lp-scroll:focus-visible { outline:2px solid var(--emerald); outline-offset:4px; border-radius:12px; }
/* O padding leva o alvo de toque a 44x47 — os dois chevrons sozinhos dariam
   22x25, pequeno demais para o polegar. Cresce a área, não o desenho. */
.lp-scroll svg { width:22px; height:12px; }
/* Os dois chevrons acendem em tempos diferentes: a onda desce, e é ela que
   diz "continua para baixo". Sem a defasagem viram um piscar só, sem direção.
   Com movimento reduzido ficam ambos opacos e legíveis — nada se perde. */
@media (prefers-reduced-motion: no-preference) {
  .lp-scroll svg:first-child { animation:chevron-cascata 1.9s ease-in-out infinite; }
  .lp-scroll svg:last-child { animation:chevron-cascata 1.9s ease-in-out .28s infinite; }
}
@keyframes chevron-cascata { 0%,100% { opacity:.25; } 40% { opacity:1; } }

/* Cluster de aparelhos */
.lp-devices { position:relative; height:580px; }
/* Os aparelhos são dimensionados pela ALTURA, não pela largura: assim eles
   nunca estouram a caixa quando o layout estreita — a largura sai sozinha da
   proporção 560x1212 do print. */
.lp-dev { position:absolute; box-sizing:border-box; border-radius:34px; padding:9px; background:linear-gradient(160deg,#3a3651,#181628); box-shadow:0 44px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07); }
/* max-width:none anula o `.lp img { max-width:100% }`: com o pai absoluto de
   largura automática, aquele limite vira uma referência circular e o aparelho
   colapsa para uma tira fina. */
.lp-dev img { border-radius:26px; height:100%; width:auto; max-width:none; }
.lp-dev-a { height:82%; left:0;   top:4%;    transform:rotate(-9deg); z-index:1; }
.lp-dev-b { height:96%; right:0;  top:2%;    transform:rotate(4deg);  z-index:3; }
.lp-dev-c { height:68%; left:14%; bottom:2%; transform:rotate(-3deg); z-index:2; }
@media (prefers-reduced-motion: no-preference) {
  .lp-dev-a { animation:float 7s ease-in-out infinite; }
  .lp-dev-b { animation:float 8s ease-in-out .6s infinite; }
  .lp-dev-c { animation:float 9s ease-in-out 1.2s infinite; }
}
@keyframes float { 0%,100% { translate:0 0; } 50% { translate:0 -14px; } }

/* Faixa de trilhas colada no fim do hero */
.lp-tracks { position:relative; margin-top:34px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding-bottom:44px; }
.lp-tcard { display:block; border-radius:var(--r); padding:24px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:#fff; transition:background .2s ease, transform .2s ease, border-color .2s ease; }
.lp-tcard:hover { text-decoration:none; color:#fff; background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.2); transform:translateY(-3px); }
.lp-tcard b { display:block; font-size:1.06rem; margin-bottom:5px; }
.lp-tcard p { margin:0; font-size:.9rem; color:#a5a1bb; line-height:1.5; }
.lp-tdot { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; margin-bottom:14px; }
.lp-tdot svg { width:19px; height:19px; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* ===== Seções ===== */
.lp-sec { padding:96px 0; }
.lp-sec.tint { background:var(--surface); border-block:1px solid var(--line); }
.lp-kicker { display:inline-block; padding:7px 14px; border-radius:999px; font-size:.76rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin-bottom:16px; }
.lp-kicker.glp1 { background:var(--glp1-50); color:var(--glp1-700); }
.lp-kicker.preg { background:var(--preg-50); color:var(--preg-700); }
.lp-kicker.cycle { background:var(--cycle-50); color:var(--cycle-700); }
.lp-kicker.lav { background:var(--lav-100); color:var(--lav-600); }
.lp-h2 { font-size:clamp(1.9rem,3.7vw,2.8rem); line-height:1.14; font-weight:700; letter-spacing:-.028em; margin:0 0 16px; }
.lp-p { color:var(--ink-2); font-size:1.06rem; line-height:1.7; max-width:38rem; margin:0 0 24px; }
.lp-center { text-align:center; }
.lp-center .lp-p { margin-inline:auto; }

/* Bloco trilha */
.lp-split { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.lp-split.flip > .lp-shot { order:-1; }
.lp-shot { position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:1/1; box-shadow:0 30px 70px -34px rgba(34,31,51,.5); }
.lp-shot > img.art { width:100%; height:100%; object-fit:cover; }
.lp-shot > img.tela { position:absolute; right:6%; bottom:-13%; height:106%; width:auto; border-radius:26px; box-shadow:0 30px 60px -14px rgba(34,31,51,.6); }
.lp-list { list-style:none; padding:0; margin:0; }
.lp-list li { position:relative; padding-left:32px; margin:14px 0; color:var(--ink-2); }
.lp-list li::before { content:''; position:absolute; left:6px; top:.58em; width:10px; height:10px; border-radius:50%; background:currentColor; opacity:.35; }
.lp-note-inline { margin-top:22px; font-size:.88rem; color:var(--muted); }

/* Cartão "pra quem é" */
.lp-who { margin-top:22px; padding:16px 20px; border-radius:var(--r-sm); background:var(--glp1-50); border:1px solid var(--glp1-100); color:var(--glp1-700); font-size:.95rem; font-weight:600; }

/* Grade */
/* 3 colunas fixas no desktop: são 6 cartões, e o auto-fit deixava 4+2. */
.lp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px) { .lp-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .lp-grid { grid-template-columns:1fr; } }
.lp-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px; transition:transform .2s ease, box-shadow .2s ease; }
.lp-card:hover { transform:translateY(-4px); box-shadow:0 22px 48px -26px rgba(34,31,51,.4); }
.lp-card h3 { margin:0 0 8px; font-size:1.08rem; font-weight:600; letter-spacing:-.01em; }
.lp-card p { margin:0; color:var(--muted); font-size:.96rem; line-height:1.6; }
.lp-ico { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--glp1-50); margin-bottom:16px; }
.lp-ico svg { width:21px; height:21px; stroke:var(--glp1-700); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Preços */
.lp-plans { display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:820px; margin:0 auto; }
.lp-plan { border-radius:var(--r); padding:32px; border:1px solid var(--line); background:var(--surface); }
.lp-plan.hi { border:0; background:linear-gradient(160deg,var(--night-2),var(--night)); color:#fff; box-shadow:0 30px 70px -30px rgba(34,31,51,.6); }
.lp-plan h3 { margin:0 0 4px; font-size:1.3rem; font-weight:700; }
.lp-plan .price { font-size:2rem; font-weight:700; letter-spacing:-.03em; margin:8px 0 4px; }
.lp-plan .price.sm { font-size:1.35rem; }
.lp-plan .price small { display:block; font-size:.88rem; font-weight:400; color:var(--muted); margin-top:4px; letter-spacing:0; }
.lp-plan.hi .price small { color:#a5a1bb; }
.lp-tag { display:inline-block; padding:5px 12px; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:rgba(52,211,153,.16); color:var(--emerald); margin-bottom:10px; }
.lp-plan ul { list-style:none; padding:0; margin:20px 0 0; }
.lp-plan li { position:relative; padding-left:28px; margin:11px 0; font-size:.96rem; color:var(--ink-2); }
.lp-plan.hi li { color:#cfcbe0; }
.lp-plan li::before { content:'✓'; position:absolute; left:2px; color:var(--teal-600); font-weight:700; }
.lp-plan.hi li::before { color:var(--emerald); }

/* Privacidade (escura) */
.lp-dark { background:var(--night); color:#fff; padding:96px 0; }
.lp-dark .lp-h2 { color:#fff; }
.lp-dark .lp-p { color:#b8b4cc; }
.lp-dark .lp-list li { color:#cfcbe0; }
.lp-dark .lp-list li strong { color:#fff; }
.lp-dark .lp-shot { box-shadow:0 40px 80px -34px rgba(0,0,0,.8); }

/* Profissional */
.lp-pro { border-radius:var(--r); padding:44px; background:linear-gradient(135deg,var(--glp1-50),var(--preg-50)); border:1px solid var(--line); display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.lp-pro h3 { margin:0 0 6px; font-size:1.4rem; font-weight:700; letter-spacing:-.02em; }
.lp-pro p { margin:0; color:var(--ink-2); max-width:38rem; }
.lp-pro a { margin-left:auto; }
.lp-btn-dark { background:var(--ink); color:#fff; }
.lp-btn-dark:hover { color:#fff; }

/* FAQ */
.lp-faq { max-width:800px; margin:0 auto; }
.lp-faq details { border-bottom:1px solid var(--line); padding:20px 0; }
.lp-faq summary { cursor:pointer; font-weight:600; font-size:1.05rem; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.lp-faq summary::-webkit-details-marker { display:none; }
.lp-faq summary::after { content:'+'; font-size:1.5rem; color:var(--teal-600); font-weight:400; line-height:1; }
.lp-faq details[open] summary::after { content:'–'; }
.lp-faq p { margin:14px 0 0; color:var(--ink-2); line-height:1.7; }

/* CTA final */
.lp-close { position:relative; overflow:hidden; background:var(--night); color:#fff; padding:96px 0; text-align:center; }
.lp-close::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(46% 78% at 28% 108%, rgba(52,211,153,.30), transparent 70%),
    radial-gradient(46% 78% at 74% 108%, rgba(255,126,151,.22), transparent 70%);
}
.lp-close > * { position:relative; }
.lp-close .lp-h2 { color:#fff; }
.lp-close p { color:#b8b4cc; font-size:1.06rem; max-width:34rem; margin:0 auto 30px; line-height:1.65; }
.lp-close .lp-cta { justify-content:center; }

/* Aviso médico */
.lp-med { background:var(--preg-50); border:1px solid var(--preg-100); border-radius:var(--r); padding:28px 30px; color:#8a4a2c; font-size:.96rem; line-height:1.7; }
.lp-med strong { color:#7a3d22; }

/* Rodapé */
.lp-foot { background:var(--night); color:#a5a1bb; padding:64px 0 30px; }
.lp-foot a { color:#cfcbe0; } .lp-foot a:hover { color:#fff; }
.lp-foot-cols { display:grid; grid-template-columns:1.5fr repeat(2,1fr); gap:40px; }
.lp-foot h4 { color:#fff; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin:0 0 14px; font-weight:700; }
.lp-foot ul { list-style:none; padding:0; margin:0; }
.lp-foot li { margin:10px 0; font-size:.95rem; }
.lp-foot-bottom { margin-top:46px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.88rem; }

/* Páginas simples */
.lp-page { padding:64px 0 48px; max-width:780px; }
.lp-page h1 { font-size:clamp(2rem,4vw,2.6rem); font-weight:700; letter-spacing:-.025em; margin:0 0 12px; }
.lp-page h2 { font-size:1.3rem; font-weight:600; margin:44px 0 10px; letter-spacing:-.01em; }
.lp-page p, .lp-page li { color:var(--ink-2); line-height:1.7; }
.lp-page ol, .lp-page ul { padding-left:1.3rem; }
.lp-page li { margin:8px 0; }
.lp-box { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:24px; margin:24px 0; }
.lp-box h3 { margin:0 0 6px; font-size:1rem; font-weight:600; }
.lp-box p { margin:0; }
.lp-mail { display:inline-flex; align-items:center; gap:9px; padding:14px 22px; border-radius:14px; background:var(--teal-600); color:#fff; font-weight:600; }
.lp-mail:hover { background:var(--teal-700); color:#fff; text-decoration:none; }

/* ===== Responsivo ===== */
@media (max-width:960px) {
  .lp-hero-in, .lp-split { grid-template-columns:1fr; gap:36px; }
  .lp-split.flip > .lp-shot { order:0; }
  .lp-nav { display:none; }
  /* width explícito + justify-self: `margin-inline:auto` faria o item de grid
     encolher para o conteúdo — e como todos os aparelhos são absolutos, o
     conteúdo mede zero e a caixa some. */
  .lp-devices { height:470px; width:min(520px,100%); justify-self:center; }
  .lp-tracks { grid-template-columns:1fr; }
  .lp-plans { grid-template-columns:1fr; }
  .lp-sec, .lp-dark { padding:64px 0; }
  .lp-hero { padding-top:52px; }
  .lp-pro { padding:30px; }
  .lp-pro a { margin-left:0; }
  /* O hero sobe 70px por baixo do header, então o padding-top do mobile
     também precisa compensar essa altura — senão o texto encosta no logo. */
  .lp-hero { padding-top:122px; }
}
@media (max-width:560px) {
  .lp-foot-cols { grid-template-columns:1fr; }
  /* No celular o aparelho vai para o centro em vez de sumir — a ilustração
     sozinha não mostra o produto. */
  .lp-shot > img.tela { right:50%; transform:translateX(50%); height:92%; bottom:-10%; }
  .lp-devices { height:400px; }
  .lp-dev-a { height:76%; }
  .lp-dev-b { height:96%; }
  .lp-dev-c { height:64%; left:10%; }
}