/* =========================================================================
   Recepta — tela inicial (landing) para quem não está logado.
   Criada em 27/09/2026 (Claude Opus 5.5, pedido do Elias). Usa os tokens de
   cor do style.css (--bg, --brand, --ink...), então segue o tema do painel e
   o botão de tema do topo. Tudo aqui tem prefixo lp- para não colidir com o
   painel. Mobile primeiro.
   ========================================================================= */

/* a landing ocupa a largura toda; o painel logado continua com o main padrão */
main:has(> #login:not(.hidden)){max-width:none;padding:0}

/* itens do topo que só existem na landing (o topo é o mesmo do painel logado) */
.lp-nav,.lp-top-enter{display:none}
body:has(#login:not(.hidden)) .lp-top-enter{
  display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;
  border:1px solid var(--border-strong);color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;
}
body:has(#login:not(.hidden)) .lp-top-enter:hover{border-color:var(--brand);color:var(--brand)}
@media (min-width:1000px){
  body:has(#login:not(.hidden)) .lp-nav{display:flex;gap:28px;margin-right:auto;margin-left:40px}
  .lp-nav a{font:500 12px/1 var(--lp-mono,ui-monospace,monospace);letter-spacing:.08em;color:var(--ink-2);text-decoration:none}
  .lp-nav a:hover{color:var(--brand)}
}

.lp{--lp-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;overflow-x:clip}
.lp em{font-style:italic;color:var(--brand)}
.lp h1,.lp h2,.lp h3{text-transform:none;letter-spacing:normal;color:var(--ink)}
.lp-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.lp-h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,9vw,74px);line-height:1;letter-spacing:-.02em;margin:0 0 34px}

/* ---------- hero ---------- */
.lp-hero{position:relative;min-height:calc(100svh - var(--topbar-h));display:flex;align-items:center;padding:8px 0 44px;overflow:hidden}
.lp-hero::before{
  content:"";position:absolute;width:95vw;height:95vw;max-width:900px;max-height:900px;right:-35vw;top:-18vw;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 16%,transparent),transparent);pointer-events:none;
}
.lp-stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lp-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.lp-visual{order:-1;height:32svh;min-height:200px;max-height:300px;margin:0 -20px}
.lp-visual canvas{width:100%;height:100%;display:block;touch-action:pan-y}

@keyframes lp-live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 60%,transparent)}100%{box-shadow:0 0 0 10px transparent}}

.lp-title{font-family:var(--serif);font-weight:400;font-size:clamp(48px,13.5vw,112px);line-height:.95;letter-spacing:-.025em;margin:0}
.lp-ln{display:block;overflow:hidden;padding-bottom:.07em}
.lp-ln>span{display:block;transform:translateY(105%);transition:transform 1s cubic-bezier(.19,1,.22,1)}
.lp-ln:nth-child(2)>span{transition-delay:.08s}
.lp-ln:nth-child(3)>span{transition-delay:.16s}
.lp-ready .lp-ln>span{transform:none}
.lp-fade{opacity:0;transform:translateY(14px);transition:opacity .8s .35s,transform .8s .35s cubic-bezier(.19,1,.22,1)}
.lp-ready .lp-fade{opacity:1;transform:none}

/* portas de login: a do estabelecimento é a principal */
.lp-doors{display:grid;gap:10px;max-width:520px;margin-top:12px}
.lp-door{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;text-decoration:none;color:var(--ink);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.lp-door:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:var(--shadow-md)}
.lp-door>.icon{width:22px;height:22px;color:var(--ink-3)}
.lp-door span{display:flex;flex-direction:column;min-width:0;flex:1}
.lp-door small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink-3)}
.lp-door b{font-size:16px;font-weight:600;line-height:1.3}
.lp-go{color:var(--ink-3);transition:transform .2s}
.lp-door:hover .lp-go{transform:translateX(3px)}
.lp-door-main>.icon{color:var(--brand)}
/* CTA em texto abaixo das portas (estilo aprovado pelo Elias; restaurado do e28d514) */
.lp-want{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:15px;color:var(--ink-2);text-decoration:none}
.lp-want b{color:var(--brand);font-weight:600}
.lp-want .icon{width:16px;height:16px;color:var(--brand);transition:transform .2s}
.lp-want:hover .icon{transform:translateX(3px)}

/* ---------- seções ---------- */
.lp-sec{padding:92px 0;border-top:1px solid var(--border)}
.lp-rv{opacity:0;transform:translateY(24px);transition:opacity .9s,transform .9s cubic-bezier(.19,1,.22,1)}
.lp-rv.lp-in{opacity:1;transform:none}

/* como é: celular com a conversa */
.lp-live-grid{display:grid;gap:48px}
.lp-phone{
  width:min(100%,340px);height:520px;margin:0 auto;padding:10px;border-radius:38px;
  background:#070B0A;border:1px solid var(--border-strong);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
}
.lp-phone-top{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;background:var(--surface);border-radius:28px 28px 0 0}
.lp-phone-top b{display:block;font-size:14px}
.lp-phone-top small{font-size:12px;color:var(--brand)}
.lp-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--brand-on);font:400 20px/1 var(--serif)}
.lp-phone-body{flex:1;overflow:hidden;background:var(--surface-3);border-radius:0 0 28px 28px;padding:14px 12px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px}
.lp-m{max-width:84%;padding:8px 11px;border-radius:12px;font-size:13.5px;line-height:1.38;color:var(--ink);box-shadow:0 1px 1px #0000000f}
.lp-bot{align-self:flex-start;background:var(--surface);border-top-left-radius:4px}
.lp-user{align-self:flex-end;background:var(--brand-soft);color:var(--brand-soft-ink);border-top-right-radius:4px}
.lp-sys{align-self:center;font:500 10px/1 var(--lp-mono);letter-spacing:.1em;color:var(--accent);background:var(--accent-soft);padding:6px 10px;border-radius:999px}
.lp-typing{align-self:flex-start;display:none;gap:4px;padding:11px 13px;background:var(--surface);border-radius:12px}
.lp-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:lp-dot 1s infinite}
.lp-typing i:nth-child(2){animation-delay:.15s}
.lp-typing i:nth-child(3){animation-delay:.3s}
@keyframes lp-dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
/* com JS a conversa entra aos poucos; sem JS aparece inteira */
.lp-anim .lp-m,.lp-anim .lp-sys{display:none}
.lp-anim .lp-show{display:block;animation:lp-pop .35s cubic-bezier(.19,1,.22,1)}
.lp-anim .lp-typing.lp-show{display:flex}
@keyframes lp-pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}

.lp-steps{list-style:none;margin:0;padding:0}
.lp-steps li{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--border);font-size:18px;color:var(--ink-2)}
.lp-steps li span{font:500 12px/1 var(--lp-mono);color:var(--brand)}

/* recursos: grade "bento" */
.lp-bento{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.lp-tile{
  position:relative;overflow:hidden;min-height:190px;padding:20px;border-radius:var(--r3);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;justify-content:flex-end;transition:border-color .3s,transform .3s;
}
.lp-tile:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand) 45%,var(--border))}
.lp-tile h3{font-size:17px;font-weight:600;margin:0 0 6px}
.lp-tile p{margin:0;font-size:14px;color:var(--ink-3);line-height:1.4}
.lp-t-agenda{grid-column:span 2}
.lp-viz{flex:1;display:flex;align-items:center;margin-bottom:14px}
.lp-viz-cal{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%;max-width:280px}
.lp-viz-cal i{height:26px;border-radius:7px;border:1px solid var(--border-strong)}
.lp-viz-cal i.busy{background:var(--surface-3);border-color:transparent}
.lp-viz-cal i.pick{background:var(--brand);border-color:var(--brand);animation:lp-pick 3s infinite}
@keyframes lp-pick{0%,30%{opacity:.15}45%,100%{opacity:1}}
.lp-viz-wave{gap:4px;height:44px}
.lp-viz-wave i{width:4px;border-radius:3px;background:var(--brand);height:30%;animation:lp-wave 1.1s ease-in-out infinite}
.lp-viz-wave i:nth-child(3n){animation-delay:-.3s}
.lp-viz-wave i:nth-child(3n+1){animation-delay:-.6s}
.lp-viz-wave i:nth-child(4n){animation-delay:-.9s}
@keyframes lp-wave{0%,100%{height:20%}50%{height:100%}}
/* chama um humano: o pedido viaja do robô até a pessoa, que acende e ganha o aviso */
.lp-viz-hand{gap:8px}
.lp-ho-bot,.lp-ho-you{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none}
.lp-ho-bot{background:var(--brand);color:var(--brand-on);font:400 21px/1 var(--serif)}
.lp-ho-you{border:1.5px solid var(--border-strong);color:var(--ink-3);animation:lp-ho-you 3s infinite}
.lp-ho-you .icon{width:20px;height:20px}
.lp-ho-you b{position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);transform:scale(0);animation:lp-ho-badge 3s infinite}
.lp-ho-line{position:relative;width:64px;height:0;border-top:2px dashed var(--border-strong)}
.lp-ho-line i{position:absolute;top:-5px;left:0;width:8px;height:8px;border-radius:50%;background:var(--accent);animation:lp-ho-dot 3s infinite}
@keyframes lp-ho-dot{0%{transform:translateX(0);opacity:0}8%{opacity:1}45%{transform:translateX(56px);opacity:1}52%,100%{transform:translateX(56px);opacity:0}}
@keyframes lp-ho-you{0%,45%{border-color:var(--border-strong);color:var(--ink-3);background:transparent}52%,88%{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}100%{border-color:var(--border-strong);color:var(--ink-3);background:transparent}}
@keyframes lp-ho-badge{0%,48%{transform:scale(0)}56%,88%{transform:scale(1)}100%{transform:scale(0)}}
.lp-viz-switch{gap:10px}
.lp-viz-switch small{font:500 11px/1 var(--lp-mono);color:var(--ink-3)}
.lp-sw{width:52px;height:30px;border-radius:999px;background:var(--brand);position:relative;animation:lp-swbg 4s infinite}
.lp-sw i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;animation:lp-sw 4s infinite}
@keyframes lp-sw{0%,40%{transform:translateX(22px)}50%,90%{transform:none}100%{transform:translateX(22px)}}
@keyframes lp-swbg{0%,40%{background:var(--brand)}50%,90%{background:var(--border-strong)}100%{background:var(--brand)}}
.lp-viz-lock .icon{width:40px;height:40px;color:var(--brand);stroke-width:1.4}

/* roadmap: vertical no celular, linha do tempo no desktop */
.lp-road{list-style:none;margin:0;padding:0 0 0 26px;position:relative;display:grid;gap:30px}
.lp-road::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--brand) 0 50%,var(--border-strong) 50% 100%)}
.lp-stop{position:relative}
.lp-stop::before{content:"";position:absolute;left:-26px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--border-strong)}
.lp-done::before{background:var(--brand);border-color:var(--brand)}
.lp-now::before{border-color:var(--accent);animation:lp-live 2s infinite}
.lp-chip{display:inline-block;font:600 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:1px solid var(--border-strong);color:var(--ink-3);margin-bottom:10px}
.lp-done .lp-chip{background:var(--brand-soft);color:var(--brand-soft-ink);border-color:transparent}
.lp-now .lp-chip{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.lp-stop h3{font-size:19px;font-weight:600;margin:0 0 4px}
.lp-stop p{margin:0;color:var(--ink-3);font-size:15px}

/* fim */
.lp-end{text-align:center;padding:104px 0 112px;background:radial-gradient(60% 70% at 50% 100%,color-mix(in srgb,var(--brand) 14%,transparent),transparent)}
.lp-end .lp-h2{font-size:clamp(50px,12.5vw,124px)}
.lp-end-cta{display:flex;flex-direction:column;gap:10px;max-width:360px;margin:0 auto}
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;border:1px solid transparent;transition:background .2s,border-color .2s}
.lp-btn .icon{transition:transform .2s}
.lp-btn:hover .icon{transform:translateX(3px)}
.lp-btn-primary{background:var(--brand);color:var(--brand-on)}
.lp-btn-primary:hover{background:var(--brand-hover)}
.lp-btn-ghost{border-color:var(--border-strong);color:var(--ink)}
.lp-btn-ghost:hover{border-color:var(--brand);color:var(--brand)}

.lp-foot{border-top:1px solid var(--border);padding:26px 0 34px;font-size:13px;color:var(--ink-3)}
.lp-foot p{margin:0 0 6px}

/* ---------- tablet ---------- */
@media (min-width:700px){
  .lp-wrap{padding:0 32px}
  .lp-doors{grid-template-columns:1fr 1fr}
  .lp-bento{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lp-end-cta{flex-direction:row;justify-content:center;max-width:none}
}
/* ---------- desktop ---------- */
@media (min-width:1000px){
  .lp-hero-grid{grid-template-columns:1.1fr .9fr;align-items:center;gap:24px}
  .lp-visual{order:0;height:540px;max-height:none;margin:0}
  .lp-hero::before{right:-10vw;top:0}
  .lp-live-grid{grid-template-columns:380px 1fr;align-items:center;gap:96px}
  .lp-phone{margin:0;height:560px}
  .lp-sec{padding:132px 0}
  .lp-bento{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:230px}
  .lp-tile{min-height:0;padding:26px}
  .lp-t-agenda,.lp-t-audio{grid-column:span 3}
  .lp-tile:not(.lp-t-agenda):not(.lp-t-audio){grid-column:span 2}
  .lp-road{grid-template-columns:repeat(5,1fr);gap:0;padding:34px 0 0}
  .lp-road::before{left:0;right:0;top:5px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,var(--brand) 0 40%,var(--border-strong) 40% 100%)}
  .lp-stop{padding-right:24px}
  .lp-stop::before{left:0;top:-34px}
}

@media (prefers-reduced-motion:reduce){
  .lp *,.lp *::before,.lp *::after{animation:none!important;transition:none!important}
  .lp-ln>span,.lp-fade,.lp-rv{transform:none;opacity:1}
}

/* =========================================================================
   AVISO DE COOKIES (LGPD) — banner com "Aceitar todos" / "Somente essenciais".
   Criado em 27/09/2026 (Buffy/Freebuff). Prefixo ck-; usa os mesmos tokens
   de cor do painel (--surface, --border, --brand, --ink...).
   ========================================================================= */
.ck-banner{position:fixed;bottom:20px;left:16px;right:16px;z-index:90;max-width:380px;margin:0 auto;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow-sm)}
@media(min-width:640px){.ck-banner{left:24px;right:auto;margin:0}}
.ck-text{font-size:13px;line-height:1.55;color:var(--ink-2)}
.ck-text a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.ck-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ck-btn{flex:1 1 140px;min-width:0;min-height:36px;padding:6px 10px;white-space:normal;border-radius:999px;border:1px solid var(--brand);background:var(--brand);color:#fff;font-weight:600;font-size:13px;cursor:pointer;transition:filter .2s}
.ck-btn:hover{filter:brightness(.92)}
.ck-btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.ck-btn-ghost:hover{border-color:var(--ink-2);filter:none}
.ck-prefs{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ck-prefs:hover{color:var(--brand)}

.connecta-partnership{display:flex;align-items:center;justify-content:center;gap:26px;min-height:58px;margin-top:22px;padding-top:22px;border-top:1px solid var(--border)}.connecta-partnership__link{display:flex;align-items:center}.connecta-partnership__link img{display:block;width:160px;height:auto}.connecta-partnership__divider{width:1px;height:34px;background:rgba(0,0,0,.2)}.connecta-partnership__hostinger{display:block;width:96px;height:auto}@media(max-width:520px){.connecta-partnership{gap:14px}.connecta-partnership__link img{width:128px}.connecta-partnership__hostinger{width:76px}}