/* =============================================================================
 * Site público do Kite Sessions.
 *
 * Os tokens são os mesmos de `html/assets/css/app.css` e de `app/src/theme.ts`.
 * Um site que apresenta um app com outra paleta é um site que apresenta outro
 * app — e a pessoa percebe isso no instante em que instala.
 *
 * A diferença em relação ao app é só a escala: aqui a tela é larga e a leitura
 * acontece de longe, então a tipografia abre e o espaçamento cresce.
 *
 * **Zero dependência externa**, como no resto do projeto: nenhuma CDN, nenhum
 * framework, nenhum script de terceiro. A página abre offline por `file://`
 * exatamente como foi validada, e não há como um provedor de fonte derrubar a
 * apresentação do produto.
 * ========================================================================== */

/* ---- fontes (locais, variáveis) ---- */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/plusjakartasans-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/plusjakartasans-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/caveat-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --teal:#01889F;
  --teal-600:#03809A;
  --teal-700:#027183;
  --teal-900:#02323C;
  --teal-ghost:#E7F4F7;

  --ink:#0A1420;
  --ink-2:#132433;
  --body:#4B5A6E;
  --muted:#626D80;

  --bg:#FFFFFF;
  --surface:#F4F7F9;
  --surface-2:#EDF2F5;
  --line:#E4EAEF;

  --green:#0BA660;
  --green-bg:#EDF9F3;
  --green-tx:#116B43;
  --amber-bg:#FEE9CE;
  --amber-tx:#B4560A;
  --sun:#FDB816;

  --r-sm:12px;
  --r:16px;
  --r-lg:22px;
  --r-pill:999px;

  --largura:1140px;
}

*{box-sizing:border-box;margin:0;padding:0}
/* `display` declarado numa classe vence o atributo `hidden`, que é só
   `display:none` de folha do navegador. Sem esta linha, o bloco de números
   nasceria visível com zeros antes de a API responder. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
/* O cabeçalho é fixo: sem isto, pular para uma âncora esconde o título dela
   embaixo da barra. */
section[id]{scroll-margin-top:84px}

body{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* `height:auto` não é detalhe: as imagens trazem `width`/`height` no HTML (o
   que evita o salto de layout enquanto carregam), e sem isto o CSS que muda a
   largura deixa a altura presa no valor do atributo. O herói ficava com 1177px
   de altura reservados para um aparelho de 433px, e o título descia meia
   tela. */
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-700);text-decoration:none}
a:hover{text-decoration:underline}

.env{width:100%;max-width:var(--largura);margin:0 auto;padding:0 24px}

h1,h2,h3{color:var(--ink);line-height:1.15;letter-spacing:-0.025em;font-weight:800}
h1{font-size:clamp(34px,5.4vw,58px)}
h2{font-size:clamp(27px,3.6vw,40px)}
h3{font-size:19px;letter-spacing:-0.015em}

.chapeu{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal-700);
}
.chapeu::before{content:'';width:18px;height:2px;border-radius:2px;background:var(--teal)}

.lead{font-size:clamp(16px,1.6vw,19px);line-height:1.65;color:var(--body)}
.escrito{font-family:'Caveat',cursive;font-size:30px;font-weight:600;line-height:1.1}

/* ---------------------------------------------------------------- botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:52px;padding:0 24px;border-radius:var(--r-pill);
  font-size:15.5px;font-weight:800;letter-spacing:-0.01em;
  background:var(--teal);color:#fff;border:0;cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.btn:hover{background:var(--teal-600);text-decoration:none;transform:translateY(-1px)}
.btn.contorno{background:transparent;color:var(--ink);border:1.6px solid var(--line)}
.btn.contorno:hover{background:var(--surface);border-color:#D3DDE4}
.btn.clara{background:#fff;color:var(--ink)}
.btn.clara:hover{background:#F2F7F9}

/* ---- botões de loja ----
 *
 * Desenhados aqui e não com a arte oficial das lojas: os selos da Apple e do
 * Google são marcas com regras próprias de uso, e uma cópia aproximada é pior
 * do que um botão honestamente nosso.
 *
 * Enquanto o app não está publicado, o botão fica `aria-disabled` e sem href:
 * um link de download que dá 404 é a primeira impressão mais cara que existe.
 */
.lojas{display:flex;flex-wrap:wrap;gap:12px}
.loja{
  display:inline-flex;align-items:center;gap:12px;
  height:60px;padding:0 22px 0 18px;border-radius:14px;
  background:var(--ink);color:#fff;text-decoration:none;
  transition:transform .15s ease,background .15s ease;
}
.loja:hover{background:#1A2938;text-decoration:none;transform:translateY(-1px)}
.loja svg{width:26px;height:26px;flex:none}
.loja .txt{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.loja .txt small{font-size:10.5px;font-weight:600;opacity:.72;letter-spacing:.02em}
.loja .txt strong{font-size:16px;font-weight:800;letter-spacing:-0.015em}
.loja[aria-disabled='true']{opacity:.55;pointer-events:none}
/* Sobre o cartão escuro da chamada final, 55% de branco já some. O desativado
   ali se diz por outro meio: fundo translúcido em vez de opacidade no texto. */
.lojas.claras .loja[aria-disabled='true']{
  opacity:1;background:rgba(255,255,255,.14);color:rgba(255,255,255,.72);
}
.loja[aria-disabled='true'] .txt small::after{content:' · em breve'}

.lojas.claras .loja{background:#fff;color:var(--ink)}
.lojas.claras .loja:hover{background:#F2F7F9}

/* ------------------------------------------------------------ cabeçalho */
.topo{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.topo .env{display:flex;align-items:center;gap:28px;height:68px}
.marca{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;font-size:17px;letter-spacing:-0.03em}
.marca:hover{text-decoration:none}
.marca .selo{
  width:34px;height:34px;border-radius:10px;flex:none;
  background:linear-gradient(145deg,#01A0BB,#026A7C);
  display:grid;place-items:center;
}
/* A marca é imagem desde que existe logo de verdade; `height:auto`
   porque ela é mais larga que alta e fixar os dois a esmagaria. */
.marca .selo img{width:24px;height:auto;display:block}
.menu{display:flex;gap:26px;margin-left:auto}
.menu a{font-size:14.5px;font-weight:700;color:var(--ink-2)}
.menu a:hover{color:var(--teal-700);text-decoration:none}
.topo .btn{height:42px;padding:0 18px;font-size:14px}

@media (max-width:860px){
  .menu{display:none}
  .topo .env{gap:12px}
  .topo .btn{margin-left:auto}
}

/* ---------------------------------------------------------------- herói */
.heroi{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 520px at 76% -8%, rgba(1,160,187,.26), transparent 62%),
    linear-gradient(168deg,#02323C 0%, #013947 44%, #01262F 100%);
  color:#fff;
}
.heroi::after{
  /* A onda da marca em escala pequena e opacidade mínima: a ideia é textura,
     não estampa. Em 160px e 5,5% ela virava papel de parede e competia com o
     título — em 72px e 2,6% some de longe e só aparece de perto. */
  content:'';position:absolute;inset:0;opacity:.026;pointer-events:none;
  background-size:72px 36px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='80'><path d='M0 56c20-30 40-30 60-7s40 23 60-7 40-30 60-7' fill='none' stroke='white' stroke-width='6' stroke-linecap='round'/></svg>");
}
.heroi .env{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.12fr .88fr;gap:40px;align-items:center;
  padding-top:58px;padding-bottom:0;
}
.heroi h1{color:#fff;max-width:13ch}
.heroi h1 em{font-style:normal;color:#7FE3F5}
.heroi .lead{color:rgba(255,255,255,.82);max-width:46ch;margin-top:20px}
.heroi .lojas{margin-top:30px}
.heroi .nota{margin-top:18px;font-size:13px;color:rgba(255,255,255,.6)}

.heroi-fotos{
  position:relative;display:flex;justify-content:center;align-items:flex-end;
  /* A altura acompanha o aparelho da frente (228px × 2353/1120 ≈ 479px) menos
     o quanto ele sangra para fora da seção. Fixa em 520px, os dois ficavam
     cortados no meio — o que parecia bug, não sangria. */
  min-height:440px;
}
.heroi-fotos img{
  width:232px;filter:drop-shadow(0 34px 60px rgba(0,0,0,.5));
}
/* O de trás é um vislumbre, não um segundo protagonista: menor, inclinado e
   parcialmente escondido pelo da frente. */
.heroi-fotos img:first-child{
  position:absolute;left:0;bottom:48px;width:180px;opacity:.72;
  transform:rotate(-9deg);z-index:0;
}
/* O da frente sangra para fora da seção de propósito: é o que diz "tem mais
   app aqui embaixo" sem precisar de uma seta. */
.heroi-fotos img:last-child{position:relative;bottom:-48px;z-index:1}

.marquise{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:34px;
  padding:24px 0 28px;margin-top:24px;
  border-top:1px solid rgba(255,255,255,.12);
}
.marquise div{display:flex;flex-direction:column}
.marquise strong{font-size:26px;font-weight:800;color:#fff;letter-spacing:-0.03em}
.marquise span{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.6)}

@media (max-width:900px){
  .heroi .env{grid-template-columns:1fr;padding-top:52px;text-align:center}
  .heroi h1,.heroi .lead{max-width:none;margin-left:auto;margin-right:auto}
  .heroi .lojas{justify-content:center}
  .heroi-fotos{min-height:360px;margin-top:4px}
  .heroi-fotos img:first-child{display:none}
  .heroi-fotos img:last-child{width:212px;bottom:-44px}
  .marquise{justify-content:center;gap:24px}
}

/* --------------------------------------------------------------- seções */
.secao{padding:92px 0}
.secao.fundo{background:var(--surface)}
.secao-cabeca{max-width:640px;margin-bottom:46px}
.secao-cabeca h2{margin-top:14px}
.secao-cabeca .lead{margin-top:14px}
.secao-cabeca.centro{margin-left:auto;margin-right:auto;text-align:center}
.secao-cabeca.centro .chapeu{justify-content:center}

/* ---- o problema ---- */
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tres .carta{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
}
.secao.fundo .tres .carta{background:#fff}
.tres .carta .num{
  display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:var(--teal-ghost);color:var(--teal-700);font-weight:800;font-size:17px;
  margin-bottom:16px;
}
.tres .carta h3{margin-bottom:8px}
.tres .carta p{font-size:14.8px;line-height:1.62}

@media (max-width:860px){.tres{grid-template-columns:1fr}}

/* ---- recursos ---- */
.recursos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.recurso{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px;transition:border-color .15s ease,transform .15s ease;
}
.recurso:hover{border-color:#CFE3E9;transform:translateY(-2px)}
.recurso .ico{
  display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--teal-ghost);margin-bottom:15px;
}
.recurso .ico svg{width:22px;height:22px;stroke:var(--teal);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.recurso h3{font-size:16.5px;margin-bottom:7px}
.recurso p{font-size:14.2px;line-height:1.6}

@media (max-width:980px){.recursos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.recursos{grid-template-columns:1fr}}

/* ---- destaques alternados ---- */
.destaque{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
  padding:64px 0;
}
.destaque + .destaque{border-top:1px solid var(--line)}
.destaque.invertido .destaque-texto{order:2}
.destaque-texto h2{font-size:clamp(24px,2.8vw,32px);margin:12px 0 16px}
.destaque-texto p{font-size:15.6px;line-height:1.68}
.destaque-lista{list-style:none;margin-top:20px;display:grid;gap:11px}
.destaque-lista li{
  display:flex;gap:11px;align-items:flex-start;font-size:14.8px;line-height:1.55;
}
.destaque-lista li::before{
  content:'';flex:none;width:19px;height:19px;border-radius:50%;margin-top:2px;
  background:var(--green-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23116B43' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/12px no-repeat;
}
.destaque-foto{display:flex;justify-content:center}
.destaque-foto img{width:268px;filter:drop-shadow(0 30px 56px rgba(11,32,54,.18))}

@media (max-width:900px){
  .destaque{grid-template-columns:1fr;gap:34px;padding:46px 0}
  .destaque.invertido .destaque-texto{order:0}
  .destaque-foto img{width:232px}
}

/* ---- previsão × comunidade ---- */
.dois-lados{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.lado{border-radius:var(--r-lg);padding:26px;border:1px solid var(--line);background:#fff}
.lado.comunidade{background:var(--teal-900);border-color:var(--teal-900);color:rgba(255,255,255,.78)}
.lado.comunidade h3{color:#fff}
.lado .etiqueta{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;
  border-radius:var(--r-pill);font-size:11.5px;font-weight:800;letter-spacing:.02em;
  background:var(--surface-2);color:var(--ink-2);margin-bottom:14px;
}
.lado.comunidade .etiqueta{background:rgba(255,255,255,.14);color:#9FEAF8}
.lado h3{margin-bottom:9px}
.lado p{font-size:14.6px;line-height:1.62}
@media (max-width:860px){.dois-lados{grid-template-columns:1fr}}

/* ---- spots ---- */
.spots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.spot{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;
}
.spot img{width:100%;height:150px;object-fit:cover}
.spot .corpo{padding:16px 18px 20px}
.spot h3{font-size:16.5px;margin-bottom:3px}
.spot .onde{font-size:13px;font-weight:600;color:var(--muted)}
.spot p{font-size:14px;line-height:1.58;margin-top:10px}
.lista-spots{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;
}
.lista-spots span{
  display:inline-flex;align-items:center;height:34px;padding:0 15px;
  border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);
  font-size:13.5px;font-weight:700;color:var(--ink-2);
}
@media (max-width:860px){.spots{grid-template-columns:1fr}}

/* ---- segurança ---- */
.seguranca{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px;
}
.seguranca .item{
  display:flex;gap:14px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
}
.seguranca .item svg{
  width:21px;height:21px;flex:none;margin-top:2px;
  stroke:var(--teal);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.seguranca .item h3{font-size:15.5px;margin-bottom:5px}
.seguranca .item p{font-size:14px;line-height:1.58}
@media (max-width:760px){.seguranca{grid-template-columns:1fr}}

/* ---- chamada final ---- */
.chamada{
  background:linear-gradient(160deg,#027183,#02323C);
  color:#fff;border-radius:28px;padding:62px 48px;text-align:center;
  margin:0 24px;
}
.chamada h2{color:#fff;max-width:17ch;margin:0 auto}
.chamada p{color:rgba(255,255,255,.78);max-width:52ch;margin:16px auto 0;font-size:16.5px}
.chamada .lojas{justify-content:center;margin-top:30px}
@media (max-width:640px){.chamada{padding:44px 24px;margin:0 16px}}

/* --------------------------------------------------------------- rodapé */
/* `margin-top` pequeno: a seção da chamada já traz o respiro dela, e os dois
   somados abriam 180px de nada entre o cartão e o rodapé. */
.rodape{padding:60px 0 44px;border-top:1px solid var(--line);margin-top:28px}
.rodape .env{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.rodape .sobre p{font-size:14px;margin-top:14px;max-width:38ch}
.rodape h4{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);margin-bottom:14px}
.rodape ul{list-style:none;display:grid;gap:9px}
.rodape ul a{font-size:14.2px;font-weight:600;color:var(--body)}
.rodape ul a:hover{color:var(--teal-700)}
.rodape .fim{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);
}
@media (max-width:760px){.rodape .env{grid-template-columns:1fr;gap:28px}}

/* ------------------------------------------------- páginas legais e 404 */
.pagina-simples{max-width:720px;margin:0 auto;padding:60px 24px 90px}
.pagina-simples h1{font-size:clamp(28px,4vw,40px)}
.pagina-simples .data{font-size:13px;color:var(--muted);margin-top:10px}