/* Sevia — site institucional, versão 2
   Tokens do index.css do app (violeta, ultravioleta, névoa, bruma, âmbar, mel),
   Hanken Grotesk no texto e Petrona na voz da marca, como no app. */

:root{
  --violeta:#7C2FE8;
  --violeta-forte:#5A1FD0;
  --ultravioleta:#1F1147;
  --nevoa:#F4F0FD;
  --bruma:#F1EFF8;
  --lilas:#E4DAFA;
  --ambar:#FF9E1B;
  --mel:#C98A2D;
  --ink:#181818;
  --texto-2:#57546A;
  --linha:#E3DDF3;
  --fundo:#FAF8FF;
  --branco:#FFFFFF;

  --serif:"Petrona", Georgia, "Times New Roman", serif;
  --sans:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --sh-card:0 1px 2px rgba(31,17,71,.04), 0 4px 18px -6px rgba(124,47,232,.10);
  --sh-cta:0 6px 20px -4px rgba(124,47,232,.45), inset 0 1px 0 rgba(255,255,255,.28);

  --largura:1160px;
  --topo:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--topo) + 20px)}
body{margin:0;background:var(--fundo);color:var(--ink);font-family:var(--sans);font-size:1.125rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:var(--violeta);text-decoration-thickness:1.5px;text-underline-offset:.2em}
a:hover{color:var(--violeta-forte)}
:focus-visible{outline:3px solid var(--violeta);outline-offset:3px;border-radius:8px}
h1,h2,h3,h4{margin:0;color:var(--ultravioleta);text-wrap:balance}
p{margin:0}
p + p{margin-top:1em}
ul,ol{margin:0;padding:0}
strong{font-weight:700}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pular{position:absolute;left:-9999px;top:10px;z-index:100;background:var(--branco);color:var(--ultravioleta);padding:12px 18px;border-radius:12px;font-weight:700;box-shadow:var(--sh-card)}
.pular:focus{left:16px}
.conteiner{max-width:var(--largura);margin:0 auto;padding-left:clamp(20px,4vw,32px);padding-right:clamp(20px,4vw,32px)}

/* ---------- Tipografia ---------- */
.titulo-1{font-family:var(--serif);font-weight:600;font-size:clamp(2.4rem, 1.45rem + 3vw, 3.8rem);line-height:1.04;letter-spacing:-.022em}
.titulo-2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem, 1.45rem + 1.9vw, 2.8rem);line-height:1.08;letter-spacing:-.018em}
.titulo-3{font-family:var(--sans);font-weight:800;font-size:clamp(1.3rem, 1.15rem + .5vw, 1.55rem);line-height:1.22;letter-spacing:-.012em}
.ponto{color:var(--mel)}
.kicker{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.15rem;line-height:1.3;color:var(--violeta)}
.lede{font-size:clamp(1.15rem, 1.07rem + .35vw, 1.3rem);line-height:1.55;color:var(--texto-2);max-width:44ch}
.texto{max-width:62ch}
.nota{font-size:1rem;line-height:1.55;color:var(--texto-2)}

/* ---------- Marca ---------- */
.marca{flex:none;display:inline-flex;align-items:baseline;text-decoration:none;color:var(--ultravioleta);border-radius:8px}
.marca-texto{white-space:nowrap}
.marca-texto{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1;letter-spacing:-.02em}
.marca-i{position:relative;display:inline-block}
.marca-i::after{content:"";position:absolute;left:50%;top:-.02em;transform:translateX(-50%);width:.17em;height:.17em;border-radius:50%;background:var(--ambar)}

/* ---------- Botões ---------- */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:54px;padding:0 28px;border-radius:999px;font-family:var(--sans);font-weight:700;font-size:1.0625rem;line-height:1.1;text-decoration:none;border:0;cursor:pointer;transition:background-color .18s ease, border-color .18s ease, transform .18s ease}
.botao:active{transform:translateY(1px)}
.botao{white-space:nowrap}
.botao-primario{background:var(--violeta);color:var(--branco);box-shadow:var(--sh-cta)}
.botao-primario:hover{background:var(--violeta-forte);color:var(--branco)}
.botao-secundario{background:var(--branco);color:var(--ultravioleta);border:1.5px solid var(--linha)}
.botao-secundario:hover{border-color:var(--violeta);color:var(--violeta)}
.botao-pequeno{min-height:44px;padding:0 20px;font-size:1rem}
.acoes{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Topo ---------- */
.topo{position:sticky;top:0;z-index:50;background:rgba(250,248,255,.9);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--linha)}
.topo-interno{display:flex;align-items:center;gap:24px;height:var(--topo)}
.nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav a{color:var(--ink);font-weight:600;font-size:1rem;text-decoration:none;border-radius:6px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--violeta)}
.nav a.botao-primario,.nav a.botao-primario:hover{color:var(--branco)}
.topo-cta{display:none}
.menu-botao{display:none;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--linha);background:var(--branco);font:700 1rem var(--sans);color:var(--ultravioleta);cursor:pointer}
.menu-icone{width:18px;height:12px;position:relative}
.menu-icone::before,.menu-icone::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease, top .2s ease}
.menu-icone::before{top:1px}
.menu-icone::after{top:9px}
.menu-botao[aria-expanded="true"] .menu-icone::before{top:5px;transform:rotate(45deg)}
.menu-botao[aria-expanded="true"] .menu-icone::after{top:5px;transform:rotate(-45deg)}
@media (max-width:980px){
  .topo-cta{display:inline-flex;margin-left:auto}
  .menu-botao{display:inline-flex}
  .nav{display:none;position:absolute;top:var(--topo);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:var(--branco);padding:12px clamp(20px,4vw,32px) 22px;border-bottom:1px solid var(--linha);box-shadow:0 18px 30px -18px rgba(31,17,71,.25)}
  .nav.aberta{display:flex}
  .nav a{padding:13px 4px;font-size:1.125rem}
  .nav a.botao{margin-top:10px}
}
@media (max-width:980px){.topo-interno{gap:12px}}
@media (max-width:440px){.menu-texto{display:none}.menu-botao{padding:0 13px}.topo-cta{padding:0 16px;font-size:.95rem}}

/* ---------- Aparelho com tela real ---------- */
.aparelho{position:relative;z-index:1;width:min(290px, 76vw);margin:0 auto;padding:10px;border-radius:46px;background:var(--ultravioleta);box-shadow:0 40px 70px -30px rgba(31,17,71,.55), inset 0 0 0 1.5px rgba(255,255,255,.08)}
.aparelho-pequeno{width:min(250px, 68vw);border-radius:42px;padding:9px}
.aparelho-tela{position:relative;aspect-ratio:1283 / 2627;border-radius:36px;overflow:hidden;background:var(--branco)}
.aparelho-pequeno .aparelho-tela{border-radius:33px}
.aparelho-tela picture,.aparelho-tela img{display:block;width:100%;height:100%}
.aparelho-tela img{object-fit:cover;object-position:top}
.tela-img{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.tela-img.ativa{opacity:1}
.aparelho-abas{position:absolute;left:1%;right:3%;bottom:3.5%;height:11%;display:grid;grid-template-columns:repeat(5,1fr);z-index:2}
.aparelho-abas button{background:transparent;border:0;border-radius:18px;cursor:pointer;padding:0}
.aparelho-abas button:focus-visible{outline:3px solid var(--ambar);outline-offset:-4px}
.aparelho-legenda{text-align:center;margin-top:14px;font-size:.95rem;color:var(--texto-2)}

/* ---------- Abertura ---------- */
.abertura{overflow:hidden;background:
  radial-gradient(55% 70% at 0% 0%, rgba(124,47,232,.10), transparent 72%),
  radial-gradient(40% 50% at 100% 10%, rgba(255,158,27,.08), transparent 72%)}
.abertura-grade{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center;min-height:calc(90vh - var(--topo));padding-top:48px;padding-bottom:64px}
.abertura .titulo-1{max-width:18ch}
.abertura .lede{margin-top:24px}
.abertura .acoes{margin-top:34px}
.abertura .nota{margin-top:16px;max-width:46ch}
.abertura-aparelho{position:relative;display:flex;justify-content:center}
.abertura-aparelho::before{content:"";position:absolute;inset:6% -8% 2%;background:radial-gradient(closest-side, rgba(124,47,232,.16), transparent);pointer-events:none}
@media (min-width:960px) and (max-height:820px){.abertura .aparelho{width:260px}}
@media (max-width:959px){
  .abertura-grade{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:40px;padding-bottom:56px}
  .abertura-aparelho{margin-top:8px}
}
@media (max-width:520px){.abertura .acoes .botao{flex:1 1 100%}}

/* ---------- Seções ---------- */
.secao{padding-top:clamp(72px,8vw,120px);padding-bottom:clamp(72px,8vw,120px)}
.secao-nevoa{background:var(--nevoa)}
.secao-cabeca{max-width:760px}
.secao-cabeca .texto{margin-top:16px;color:var(--texto-2)}

/* Como começar */
.passos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,36px);margin-top:48px}
.passo{padding-top:20px;border-top:2px solid var(--lilas)}
.passo-numero{font-family:var(--serif);font-weight:600;font-size:2.6rem;line-height:1;color:var(--violeta)}
.passo h3{font-size:1.15rem;font-weight:800;margin-top:14px;line-height:1.3}
.passo p{margin-top:8px;color:var(--texto-2);font-size:1.0625rem}
.como-acoes{margin-top:44px;align-items:center;gap:18px}
@media (max-width:900px){.passos{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.passos{grid-template-columns:1fr}}

/* Tour: telas reais com o aparelho fixo ao lado do texto */
.palco{display:grid;grid-template-columns:minmax(0,1fr) 330px;column-gap:clamp(40px,6vw,96px);max-width:var(--largura);margin:0 auto;padding:clamp(72px,8vw,112px) clamp(20px,4vw,32px) 0}
.tour-cabeca{grid-column:1}
.tour-cabeca .texto{margin-top:16px;color:var(--texto-2)}
.palco-aparelho{grid-column:2;grid-row:1 / span 5}
.aparelho-fixo{position:sticky;top:max(96px, calc(50vh - 300px))}
@media (min-width:960px) and (max-height:820px){.palco .aparelho{width:250px}}
.recurso{grid-column:1;min-height:58vh;display:flex;flex-direction:column;justify-content:center;padding-top:40px;padding-bottom:40px}
.recurso:last-child{padding-bottom:104px}
.recurso .kicker{margin-bottom:8px}
.recurso .texto{margin-top:16px}
.recurso .nota{margin-top:14px;max-width:58ch}
.recurso-tela{display:none;margin:28px 0 0}
@media (max-width:959px){
  .palco{grid-template-columns:minmax(0,1fr);padding-top:64px}
  .palco-aparelho{display:none}
  .recurso,.recurso:last-child{min-height:0;padding-top:36px;padding-bottom:36px}
  .recurso:last-child{padding-bottom:72px}
  .recurso-tela{display:block}
}

/* Medicamentos */
.remedios{margin-top:40px;background:var(--branco);border-radius:28px;padding:clamp(22px,3vw,34px);box-shadow:var(--sh-card)}
.remedio-grupo + .remedio-grupo{margin-top:26px}
.remedio-grupo h3{font-size:1rem;font-weight:800;color:var(--texto-2)}
.remedio-lista{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.remedio-lista li{border:1.5px solid var(--linha);border-radius:999px;padding:8px 15px;font-size:1rem;font-weight:700;color:var(--ink);background:var(--fundo);line-height:1.3}
.remedio-lista li span{font-weight:500;color:var(--texto-2)}
.remedios-nota{margin-top:24px;font-size:.95rem;line-height:1.55;color:var(--texto-2);max-width:80ch}

/* O que a Sevia não faz */
.limites{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,72px);margin-top:44px}
.limite{padding:24px 0;border-top:1px solid var(--linha)}
.limite h3{font-size:1.2rem;font-weight:800;line-height:1.3}
.limite p{margin-top:8px;color:var(--texto-2)}
@media (max-width:760px){.limites{grid-template-columns:1fr}}

/* Instalação */
.instalar{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,88px);align-items:start}
.instalar .texto{margin-top:16px;color:var(--texto-2)}
.seletor{display:inline-flex;padding:5px;border-radius:999px;background:var(--bruma);gap:4px}
.seletor button{min-height:44px;padding:0 22px;border-radius:999px;border:0;background:none;cursor:pointer;font:700 1rem var(--sans);color:var(--texto-2)}
.seletor button[aria-selected="true"]{background:var(--branco);color:var(--ultravioleta);box-shadow:var(--sh-card)}
.passos-instalar{list-style:none;margin-top:26px;counter-reset:item}
.passos-instalar li{counter-increment:item;display:grid;grid-template-columns:40px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--linha)}
.passos-instalar li:first-child{border-top:0;padding-top:4px}
.passos-instalar li::before{content:counter(item);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--nevoa);color:var(--violeta);font:600 1.25rem/1 var(--serif)}
.passos-instalar b{color:var(--ultravioleta)}
.instalar-aviso{padding:16px 18px;border-radius:18px;background:var(--nevoa);font-size:1rem;line-height:1.55;color:var(--ink)}
.secao-nevoa .instalar-aviso{background:var(--branco)}
@media (max-width:860px){.instalar{grid-template-columns:1fr}}

/* Perguntas */
.perguntas-grade{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,88px);align-items:start}
.perguntas-grade .texto{margin-top:16px;color:var(--texto-2)}
.pergunta{border-top:1px solid var(--linha)}
.pergunta:last-of-type{border-bottom:1px solid var(--linha)}
.pergunta summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:22px 2px;font-weight:700;font-size:1.15rem;line-height:1.4;color:var(--ultravioleta);border-radius:8px}
.pergunta summary::-webkit-details-marker{display:none}
.pergunta summary::after{content:"";flex:none;width:12px;height:12px;margin:.35em 6px 0 0;border-right:2.5px solid var(--violeta);border-bottom:2.5px solid var(--violeta);transform:rotate(45deg);transition:transform .2s ease, margin .2s ease}
.pergunta[open] summary::after{transform:rotate(-135deg);margin-top:.65em}
.pergunta summary:hover{color:var(--violeta)}
.resposta{padding:0 2px 24px;max-width:64ch}
.resposta p + p{margin-top:.8em}
@media (max-width:860px){.perguntas-grade{grid-template-columns:1fr}}

/* Chamada final */
.chamada{background:var(--ultravioleta);color:#EDE8FA;text-align:center}
.chamada .titulo-2{color:var(--branco)}
.chamada .ponto{color:var(--ambar)}
.chamada .texto{margin:18px auto 0;color:#CFC6EA;max-width:52ch}
.chamada .acoes{justify-content:center;margin-top:34px}
.chamada .nota{color:#CFC6EA;margin-top:18px}
.chamada a:not(.botao){color:#D9C9FF}
.chamada .botao-primario{box-shadow:0 8px 26px -6px rgba(124,47,232,.8), inset 0 1px 0 rgba(255,255,255,.28)}

/* ---------- Rodapé ---------- */
.rodape{background:var(--branco);border-top:1px solid var(--linha);padding:56px 0 36px;font-size:1rem}
.rodape-grade{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:32px}
.rodape-sobre p{margin-top:14px;color:var(--texto-2);max-width:30ch}
.rodape h2{font-family:var(--sans);font-size:.95rem;font-weight:800;color:var(--ultravioleta);margin-bottom:12px}
.rodape ul{list-style:none;display:grid;gap:8px}
.rodape a{color:var(--ink);text-decoration:none}
.rodape a:hover{color:var(--violeta);text-decoration:underline}
.rodape-base{margin-top:44px;padding-top:22px;border-top:1px solid var(--linha);font-size:.875rem;line-height:1.6;color:var(--texto-2)}
.rodape-linha{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px}
.rodape-linha > p{margin-top:0}
.rodape-contato{display:flex;flex-wrap:wrap;gap:4px 20px}
.rodape-base .rodape-contato a{color:var(--texto-2)}
.rodape-aviso{margin-top:10px;max-width:120ch}
@media (max-width:860px){.rodape-grade{grid-template-columns:1fr 1fr}.rodape-sobre{grid-column:1 / -1}}
@media (max-width:480px){.rodape-grade{grid-template-columns:1fr}}

/* ---------- Páginas de documento ---------- */
.doc-topo{padding:clamp(56px,8vw,96px) 0 clamp(36px,5vw,56px);background:radial-gradient(50% 90% at 0% 0%, rgba(124,47,232,.09), transparent 70%), var(--fundo);border-bottom:1px solid var(--linha)}
.migalha{font-size:1rem;font-weight:600;color:var(--texto-2)}
.migalha a{color:var(--texto-2)}
.doc-topo .titulo-1{margin-top:14px;font-size:clamp(2.4rem, 1.6rem + 3vw, 3.7rem)}
.doc-topo .lede{margin-top:18px;max-width:54ch}
.doc-atualizado{margin-top:18px;font-size:1rem;color:var(--texto-2)}
.doc-grade{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(32px,6vw,80px);padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(72px,9vw,120px)}
.doc-indice{position:sticky;top:calc(var(--topo) + 28px);align-self:start;font-size:.975rem}
.doc-indice p{font-weight:800;color:var(--ultravioleta);margin-bottom:10px}
.doc-indice ol{list-style:none;display:grid;gap:4px;counter-reset:ind}
.doc-indice li{counter-increment:ind}
.doc-indice a{display:block;padding:5px 0;color:var(--texto-2);text-decoration:none;line-height:1.35}
.doc-indice a::before{content:counter(ind) ". ";color:var(--violeta);font-weight:700}
.doc-indice.sem-numero a::before{content:none}
.doc-indice a:hover{color:var(--violeta)}
.doc-corpo{max-width:720px}
.doc-corpo section + section{margin-top:52px}
.doc-corpo h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.55rem,1.3rem + .8vw,1.95rem);line-height:1.15;letter-spacing:-.012em}
.doc-corpo h3{font-size:1.15rem;font-weight:800;margin-top:28px}
.doc-corpo h2 + p,.doc-corpo h2 + ul,.doc-corpo h2 + ol,.doc-corpo h3 + p,.doc-corpo h3 + ul{margin-top:14px}
.doc-corpo p + ul,.doc-corpo p + ol,.doc-corpo ul + p,.doc-corpo ol + p,.doc-corpo p + p{margin-top:1em}
.doc-corpo ul,.doc-corpo ol{padding-left:1.25em}
.doc-corpo li + li{margin-top:.55em}
.doc-corpo li::marker{color:var(--violeta)}
.doc-corpo .destaque{padding:18px 20px;border-radius:18px;background:var(--nevoa);margin-top:18px}
.doc-corpo > .destaque:first-child{margin-top:0;padding:22px 24px}
.doc-corpo .destaque h2{font-size:1.3rem}
.doc-corpo .destaque h2 + p,.doc-corpo .destaque h2 + ul{margin-top:10px}
.doc-corpo h2 .n{color:var(--violeta)}
.doc-corpo .ficha{margin-top:20px}
.doc-corpo .perguntas{margin-top:18px}
.doc-corpo .instalar-aviso{margin-top:18px}
@media (max-width:900px){.doc-grade{grid-template-columns:1fr}.doc-indice{position:static;padding:18px 20px;border-radius:18px;background:var(--nevoa)}}

/* Ficha da empresa: discreta */
.ficha{background:var(--branco);border-radius:22px;padding:6px 24px;box-shadow:var(--sh-card);font-size:1rem}
.ficha div{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--linha)}
.ficha div:first-child{border-top:0}
.ficha dt{font-size:.9rem;font-weight:600;color:var(--texto-2)}
.ficha dd{margin:0;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
@media (max-width:480px){.ficha{padding:4px 18px}.ficha div{grid-template-columns:1fr;gap:2px}}

.contato-cartao{background:var(--branco);border-radius:22px;padding:22px;box-shadow:var(--sh-card);margin-top:20px}
.contato-cartao h3{margin:0;font-size:1.05rem;font-weight:800}
.contato-cartao a.grande{display:inline-block;margin-top:6px;font-size:1.2rem;font-weight:800;overflow-wrap:anywhere}
.contato-cartao p{margin-top:8px;font-size:1rem;color:var(--texto-2)}

/* 404 */
.nao-encontrada{min-height:calc(100vh - var(--topo) - 260px);display:flex;flex-direction:column;justify-content:center;padding-top:80px;padding-bottom:80px}
.nao-encontrada .lede{margin-top:18px}
.nao-encontrada .acoes{margin-top:30px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}