/* Wisdom: área pública (landing, entrar, cadastro). Web e celular são experiências diferentes. */
:root {
  --violeta: #5B3DF5;
  --violeta-escuro: #4A2EE0;
  --magenta: #D93CF0;
  --coral: #FF6B5E;
  --grafite: #17151F;
  --texto: #4D4A5C;
  --suave: #8A869A;
  --nevoa: #F7F5FA;
  --borda: #E7E3F0;
  --branco: #FFFFFF;
  --verde: #1F9D55;
  --degrade: linear-gradient(110deg, #5B3DF5 0%, #D93CF0 58%, #FF6B5E 100%);
  --titulo: 'Sora', Arial, Helvetica, sans-serif;
  --ui: 'Inter', Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--ui); color: var(--grafite); background: var(--nevoa); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: var(--violeta); }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Botões: grafite sólido em pílula, seta em círculo violeta. Sem degradê, sem brilho colorido. */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; border: 0; border-radius: 999px; height: 56px; padding: 0 1.6rem;
  font: 600 1rem var(--ui); letter-spacing: -.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.botao.principal { background: var(--violeta); color: #fff; padding: 0 .45rem 0 1.6rem; }
.botao.principal .seta { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--violeta); display: grid; place-items: center; transition: transform .25s cubic-bezier(.3, .7, .3, 1.3); }
.botao.principal:hover { background: #4A2EE0; }
.botao.principal:hover .seta { transform: translateX(3px) rotate(-8deg); }
.botao.contorno { background: transparent; color: var(--grafite); border: 1.5px solid rgba(23, 21, 31, .18); }
.botao.contorno:hover { border-color: var(--violeta); color: var(--violeta); }
.botao.texto { background: none; color: var(--grafite); padding: 0 1rem; height: 46px; position: relative; }
.botao.texto::after { content: ''; position: absolute; left: 1rem; right: 1rem; bottom: 10px; height: 2px; background: var(--violeta); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.botao.texto:hover::after { transform: scaleX(1); }
.botao.pequeno { height: 48px; font-size: .95rem; }
.botao.principal.pequeno { padding-left: 1.3rem; }
.botao.principal.pequeno .seta { width: 36px; height: 36px; }
.botao[disabled] { opacity: .6; cursor: progress; }
.botao svg { width: 20px; height: 20px; flex: none; }
.botao .seta svg { width: 18px; height: 18px; }

/* Fitas animadas de fundo (o W da marca, desfocado e lento) */
.fitas { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.fitas img { position: absolute; opacity: .16; filter: blur(2px); animation: flutuar 22s ease-in-out infinite; }
.fitas .f1 { width: 62vw; max-width: 900px; right: -12vw; top: -14vh; }
.fitas .f2 { width: 40vw; max-width: 560px; left: -14vw; bottom: -20vh; opacity: .1; animation-duration: 28s; animation-delay: -8s; }
.fitas::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(91, 61, 245, .09) 1px, transparent 1px); background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%); }
@keyframes flutuar { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(-2.5%, 3%, 0) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .fitas img, .flutua { animation: none !important; } }

.marca-logo { height: 48px; width: auto; aspect-ratio: 1994 / 452; object-fit: contain; }

/* ================= LANDING ================= */
.landing { min-height: 100dvh; }
.lp { position: relative; z-index: 1; height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; max-width: 1360px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3.5rem); }
.lp-topo { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 0 .4rem; }
.lp-topo nav { display: flex; align-items: center; gap: .6rem; }
.lp-heroi { display: grid; align-items: center; gap: 3rem; min-height: 0; }
.lp-texto h1 { font: 800 clamp(2.6rem, 4.6vw, 4.6rem)/1.02 var(--titulo); letter-spacing: -.035em; margin: 0 0 1.4rem; }
.lp-texto h1 .grad { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; padding-bottom: .06em; }
.lp-texto p { font-size: clamp(1.05rem, 1.25vw, 1.22rem); line-height: 1.6; color: var(--texto); max-width: 33rem; margin: 0 0 2rem; }
.lp-acoes { display: flex; gap: .8rem; flex-wrap: wrap; }
.lp-rodape { padding: .9rem 0 1.1rem; color: var(--suave); font-size: .85rem; text-align: center; }
.lp-rodape b { font-weight: 600; color: var(--texto); }

/* Prévia do produto (montada em HTML) */
.produto { position: relative; height: min(68vh, 600px); }
.janela { position: absolute; inset: 0 0 8% 6%; background: #fff; border-radius: 18px; border: 1px solid var(--borda); box-shadow: 0 40px 80px -30px rgba(60, 30, 140, .35); display: grid; grid-template-columns: 150px 1fr; overflow: hidden; }
.janela .lado { border-right: 1px solid var(--borda); padding: 1rem .7rem; display: flex; flex-direction: column; gap: .35rem; }
.janela .lado img { height: 24px; width: auto; aspect-ratio: 1994 / 452; align-self: flex-start; margin: .2rem .4rem 1rem; }
.janela .lado span { font-size: .78rem; padding: .45rem .55rem; border-radius: 8px; color: var(--texto); display: flex; gap: .45rem; align-items: center; }
.janela .lado span.ativo { background: #EFEBFF; color: var(--violeta); font-weight: 600; }
.janela .lado i { width: 12px; height: 12px; border-radius: 3px; border: 1.6px solid currentColor; flex: none; }
.janela .meio { padding: 1.1rem 1.2rem; min-width: 0; }
.janela h4 { font: 700 .95rem var(--titulo); margin: 0 0 .8rem; display: flex; justify-content: space-between; align-items: center; }
.janela h4 em { font: 600 .72rem var(--ui); font-style: normal; color: #fff; background: var(--violeta); padding: .4rem .8rem; border-radius: 999px; }
.semana { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; }
.dia { border: 1px solid var(--borda); border-radius: 10px; padding: .45rem; font-size: .68rem; color: var(--texto); }
.dia b { display: block; font-size: .7rem; color: var(--grafite); margin-bottom: .35rem; }
.dia img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7px; margin-bottom: .35rem; }
.etiqueta { display: inline-block; font-size: .62rem; font-weight: 600; padding: .15rem .4rem; border-radius: 5px; background: #EFEBFF; color: var(--violeta); }
.etiqueta.ok { background: #E3F6EA; color: var(--verde); }
.etiqueta.pub { background: #FDE8F8; color: #B02AC4; }
.metricas { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .9rem; }
.metricas div { border: 1px solid var(--borda); border-radius: 10px; padding: .5rem .6rem; font-size: .66rem; color: var(--suave); }
.metricas b { display: block; font: 700 1rem var(--titulo); color: var(--grafite); margin: .1rem 0; }
.metricas small { color: var(--verde); font-weight: 600; }
.curva { margin-top: .9rem; height: calc(100% - 330px); min-height: 90px; width: 100%; }
.janela .meio { display: flex; flex-direction: column; }
.cartao-flutua { position: absolute; background: #fff; border-radius: 16px; border: 1px solid var(--borda); box-shadow: 0 24px 48px -20px rgba(60, 30, 140, .35); padding: .9rem 1rem; }
.automacao { left: 0; bottom: 4%; width: 255px; }
.automacao h5 { font: 700 .85rem var(--titulo); margin: 0 0 .55rem; }
.automacao li { list-style: none; display: flex; align-items: center; gap: .55rem; font-size: .76rem; padding: .38rem 0; color: var(--texto); }
.automacao li span { width: 26px; height: 26px; border-radius: 8px; background: #EFEBFF; display: grid; place-items: center; color: var(--violeta); font-weight: 700; font-size: .7rem; flex: none; }
.automacao li::after { content: ''; margin-left: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/10px no-repeat; }
.automacao ul { margin: 0; padding: 0; }
.aviso-post { right: -2%; bottom: -1%; width: 250px; display: flex; gap: .7rem; align-items: center; }
.aviso-post img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; }
.aviso-post b { display: block; font-size: .8rem; }
.aviso-post small { color: var(--suave); font-size: .72rem; }
.flutua { animation: boiar 7s ease-in-out infinite; }
.flutua.d2 { animation-delay: -3.5s; }
@keyframes boiar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Diálogo "Ver como funciona" */
dialog.como { border: 0; border-radius: 20px; padding: 1.8rem; max-width: 560px; width: calc(100% - 2rem); box-shadow: 0 40px 80px -20px rgba(23, 21, 31, .45); }
dialog.como::backdrop { background: rgba(23, 21, 31, .45); backdrop-filter: blur(3px); }
dialog.como h2 { font: 700 1.5rem var(--titulo); margin: 0 0 1.2rem; }
dialog.como ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
dialog.como li { display: grid; grid-template-columns: 40px 1fr; gap: .9rem; }
dialog.como li > span { width: 40px; height: 40px; border-radius: 12px; background: var(--degrade); color: #fff; display: grid; place-items: center; font: 700 1rem var(--titulo); }
dialog.como li b { display: block; font-family: var(--titulo); margin-bottom: .2rem; }
dialog.como li p { margin: 0; color: var(--texto); line-height: 1.5; }
dialog.como .fim { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.6rem; }

/* Web */
@media (min-width: 1024px) {
  .landing { overflow: hidden; }
  .lp-heroi { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
  .so-celular { display: none !important; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .lp-texto h1 { font-size: clamp(2.3rem, 4vw, 3.6rem); margin-bottom: 1rem; }
  .lp-texto p { margin-bottom: 1.4rem; }
  .produto { height: 62vh; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .lp { height: auto; min-height: 100dvh; }
  .lp-heroi { grid-template-columns: 1fr; padding: 2rem 0; }
  .produto { height: 520px; }
  .so-celular { display: none !important; }
}

/* Celular: tela de abertura de app */
@media (max-width: 767px) {
  .so-web { display: none !important; }
  .landing { overflow: hidden; background: #fff; }
  .lp { height: 100dvh; padding: env(safe-area-inset-top) 1.25rem 0; grid-template-rows: auto 1fr auto; }
  .lp-topo { justify-content: center; padding: 1.4rem 0 0; }
  .marca-logo { height: 42px; }
  .lp-heroi { display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; }
  .lp-texto h1 { font-size: clamp(2.15rem, 10.5vw, 2.7rem); margin-bottom: .9rem; }
  .lp-texto p { font-size: 1rem; margin: 0; }
  .fitas .f1 { width: 150vw; right: -60vw; top: -10vh; opacity: .14; }
  .fitas .f2 { display: none; }
  .resumo-app { display: flex; gap: .6rem; width: 100%; }
  .resumo-app div { flex: 1; background: var(--nevoa); border-radius: 16px; padding: .8rem .85rem; font-size: .72rem; color: var(--suave); }
  .resumo-app b { display: block; font: 700 1.15rem var(--titulo); color: var(--grafite); margin-top: .15rem; white-space: nowrap; }
  .resumo-app small { color: var(--verde); font-weight: 600; }
  .lp-baixo { display: grid; gap: .65rem; padding: 1rem 0 calc(.6rem + env(safe-area-inset-bottom)); }
  .lp-baixo .botao { width: 100%; height: 56px; font-size: 1.02rem; }
  .lp-baixo .botao.principal { justify-content: space-between; }
  .lp-rodape { padding: .3rem 0 0; font-size: .78rem; }
}
@media (max-width: 767px) and (max-height: 640px) {
  .resumo-app { display: none; }
  .lp-texto h1 { font-size: 2rem; }
}

/* ================= ENTRAR / CADASTRO =================
   Referência: telas de acesso de Linear, Stripe e Vercel. Formulário enxuto, campos sem ícone,
   título curto, um único botão forte. Na web, vitrine escura com o W da marca em movimento. */
.acesso { min-height: 100dvh; display: grid; background: #fff; }
.vitrine-escura { position: relative; overflow: hidden; background: #0E0C14; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 2.6rem 3rem; isolation: isolate; }
.vitrine-escura .simbolo { position: absolute; width: 118%; max-width: none; left: -10%; top: 4%; opacity: .9; filter: blur(.4px) saturate(1.1); animation: deriva 24s ease-in-out infinite; z-index: -1; }
.vitrine-escura::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 30% 70%, rgba(91, 61, 245, .45), transparent 70%), radial-gradient(45% 40% at 80% 30%, rgba(217, 60, 240, .32), transparent 70%); }
.vitrine-escura::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 12, 20, .55) 0%, rgba(14, 12, 20, 0) 35%, rgba(14, 12, 20, 0) 48%, rgba(14, 12, 20, .97) 78%); }
@keyframes deriva { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(-3%, -4%, 0) rotate(-4deg) scale(1.04); } }
.vitrine-escura .logo-branca { height: 36px; width: auto; aspect-ratio: 1994 / 452; }
.vitrine-escura blockquote { margin: 0; max-width: 30rem; }
.vitrine-escura blockquote p { font: 600 clamp(1.35rem, 2vw, 1.75rem)/1.35 var(--titulo); letter-spacing: -.015em; margin: 0 0 1.2rem; color: #fff; }
.vitrine-escura blockquote footer { display: flex; align-items: center; gap: .8rem; font-size: .9rem; color: rgba(255, 255, 255, .7); }
.vitrine-escura blockquote footer b { display: block; color: #fff; font-weight: 600; }
.vitrine-escura .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--degrade); display: grid; place-items: center; font: 700 .9rem var(--titulo); color: #fff; }

.painel-form { display: flex; flex-direction: column; padding: 2rem clamp(1.5rem, 5vw, 4rem); }
.painel-form .topo-form { display: flex; justify-content: space-between; align-items: center; font-size: .92rem; color: var(--texto); }
.painel-form .topo-form a { color: var(--grafite); font-weight: 600; text-decoration: none; }
.painel-form .topo-form a:hover { color: var(--violeta); }
.painel-form .simbolo-mini { width: 40px; height: 40px; }
.painel-form form { width: 100%; max-width: 380px; margin: auto; padding: 2rem 0; }
.painel-form h1 { font: 700 1.75rem/1.2 var(--titulo); letter-spacing: -.025em; margin: 0 0 .5rem; }
.painel-form .sub { color: var(--texto); margin: 0 0 2rem; font-size: .98rem; line-height: 1.5; }
.campo { margin-bottom: 1.1rem; }
.campo label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 500; font-size: .9rem; margin-bottom: .45rem; color: var(--grafite); }
.campo label .dica { font-weight: 400; color: var(--suave); font-size: .82rem; }
.entrada { position: relative; }
.entrada input { width: 100%; height: 48px; border: 1px solid #DCD8E6; border-radius: 10px; padding: 0 .95rem; font: 400 1rem var(--ui); color: var(--grafite); background: #fff;
  box-shadow: 0 1px 2px rgba(23, 21, 31, .04); transition: border-color .15s, box-shadow .15s; }
.entrada input::placeholder { color: #A9A5B8; }
.entrada input:hover { border-color: #C6C0D6; }
.entrada input:focus { outline: none; border-color: var(--violeta); box-shadow: 0 0 0 3px rgba(91, 61, 245, .15); }
.entrada input[type=password], .entrada input.com-olho { padding-right: 3rem; }
.entrada .olho { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); border: 0; background: none; width: 42px; height: 42px; border-radius: 8px; cursor: pointer; color: var(--suave); display: grid; place-items: center; }
.entrada .olho:hover { color: var(--grafite); }
.entrada .olho svg { width: 20px; height: 20px; }
.marcar { display: flex; align-items: center; gap: .55rem; cursor: pointer; font-size: .92rem; color: var(--texto); margin: .2rem 0 1.5rem; }
.marcar input { width: 18px; height: 18px; accent-color: var(--violeta); margin: 0; }
.botao-form { width: 100%; height: 50px; border: 0; border-radius: 10px; background: var(--violeta); color: #fff; font: 600 1rem var(--ui); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .6rem; transition: background .15s; }
.botao-form:hover { background: #4A2EE0; }
.botao-form[disabled] { opacity: .65; cursor: progress; }
.legal a { color: var(--grafite); font-weight: 600; text-decoration: none; }
.legal { color: var(--suave); font-size: .82rem; line-height: 1.5; margin: 1.4rem 0 0; text-align: center; }
.painel-form .base { text-align: center; font-size: .82rem; color: var(--suave); }
.mensagem { border-radius: 10px; padding: .75rem .9rem; margin-bottom: 1.1rem; font-size: .9rem; background: #FFF0EE; color: #B4271A; border: 1px solid #FFD6D0; }
.mensagem:empty { display: none; }
.duas-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
.carregando { width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

@media (min-width: 1024px) {
  .acesso { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 100dvh; }
  .painel-form { overflow-y: auto; }
  .so-celular { display: none !important; }
}
/* Celular: tela de app. Sem vitrine; símbolo no topo, título à esquerda, botão grande. */
@media (max-width: 1023px) {
  .vitrine-escura { display: none; }
  .painel-form { min-height: 100dvh; padding: calc(1.2rem + env(safe-area-inset-top)) 1.4rem calc(1.2rem + env(safe-area-inset-bottom)); }
  .painel-form .topo-form .texto-topo { display: none; }
  .painel-form form { margin: 1.6rem 0 auto; padding: 0; max-width: none; }
  .painel-form h1 { font-size: 2rem; }
  .entrada input { height: 54px; font-size: 1.05rem; border-radius: 14px; }
  .botao-form { height: 56px; border-radius: 16px; font-size: 1.05rem; }
  .duas-col { grid-template-columns: 1fr; }
  .so-celular { display: block; }
  .painel-form .base { padding-top: 1.2rem; }
}

/* Cadastro na web cabe numa tela só, sem rolagem */
@media (min-width: 1024px) {
  .acesso { height: 100dvh; overflow: hidden; }
  .painel-form { overflow: hidden; padding-top: 1.4rem; padding-bottom: 1rem; }
  .painel-form form { padding: 0; }
  .acesso.cadastro .painel-form h1 { font-size: 1.6rem; margin-bottom: .35rem; }
  .acesso.cadastro .painel-form .sub { margin-bottom: 1.2rem; }
  .acesso.cadastro .campo { margin-bottom: .75rem; }
  .acesso.cadastro .campo label { margin-bottom: .35rem; }
  .acesso.cadastro .entrada input { height: 44px; }
  .acesso.cadastro .botao-form { height: 48px; }
}

.erro-campo { color: #C0322B; font-size: .82rem; margin: .35rem 0 0; }
.erro-campo:empty { display: none; }
input.invalido { border-color: #E5534B !important; box-shadow: 0 0 0 3px rgba(229, 83, 75, .12) !important; }