/* KleosAI landing v2 · base compartilhada (index.html e precos.html)
   Papel de dia (cream) e noite (ink). Papel derrete na noite; a noite volta ao
   papel em pixels (dither). Ouro só como luz. */

:root{
  --ink:#10192B; --ink-2:#16223A; --ink-3:#1B2942; --navy:#1D3557;
  --cream:#F1E8D3; --parchment:#E7D9B4; --paper-hi:#FBF5E6;
  --gold:#B98D40; --gold-night:#D2A65A; --gold-text:#8A5A0B;
  --app-bg:#0D0E10; --app-surface:#16171A; --app-surface-2:#1F2125;
  --app-text:#ECEAE5; --app-soft:rgba(236,234,229,.64); --app-faint:rgba(236,234,229,.42); --app-line:rgba(255,255,255,.08);

  --rail:58px;
  --gutter:clamp(20px,4.4vw,78px);
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --f-disp:"Playfair Display",Georgia,serif;
  --f-calm:"Instrument Serif",Georgia,serif;
  --f-body:Montserrat,system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --f-app:Geist,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--navy);
  font-family:var(--f-body); font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{max-width:100%}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- grão: papel (multiply) + filme na noite (screen, vivo) ---------- */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:60;
  opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.22'/></svg>");
}
body::before{
  content:""; position:fixed; inset:-60px; pointer-events:none; z-index:59;
  opacity:.09; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)'/></svg>");
  animation:grain .9s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 17%{transform:translate(-22px,14px)} 33%{transform:translate(18px,-26px)}
  50%{transform:translate(-30px,-8px)} 67%{transform:translate(12px,30px)} 83%{transform:translate(28px,6px)} 100%{transform:translate(0,0)}
}

/* ---------- friso grego (borda direita do papel) ---------- */
.meander{
  position:absolute; top:0; right:0; bottom:0; width:var(--rail); z-index:5; pointer-events:none;
  background:url("assets/meander.png?v=2") repeat-y right top / var(--rail) auto;
}

/* ---------- tipografia ---------- */
.eyebrow{
  font-family:var(--f-mono); font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  margin:0 0 18px; display:flex; align-items:center; gap:12px;
}
.eyebrow::before{content:""; width:28px; height:1px; background:currentColor; opacity:.6}
.h2{
  font-family:var(--f-calm); font-weight:400; letter-spacing:-.012em;
  font-size:clamp(34px,4.4vw,64px); line-height:1.02; margin:0 0 22px; max-width:18ch;
}
.h2 em{font-style:italic}
.lead{font-size:clamp(16px,1.3vw,19px); line-height:1.6; max-width:52ch; margin:0 0 28px}
.mono{font-family:var(--f-mono)}

/* ---------- botões ---------- */
.btn{
  --bg:var(--navy); --fg:var(--cream);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:18px 34px; background:var(--bg); color:var(--fg); border:0; cursor:pointer;
  font:500 13px/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  transition:transform .25s var(--ease), box-shadow .35s var(--ease), background .25s;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(185,141,64,.5), 0 10px 40px -8px rgba(185,141,64,.65)}
.btn--gold{--bg:var(--gold-night); --fg:var(--ink)}
.btn--gold:hover{box-shadow:0 0 0 1px rgba(210,166,90,.8), 0 0 60px -6px rgba(210,166,90,.75)}
.btn--line{--bg:transparent; --fg:currentColor; box-shadow:inset 0 0 0 1px currentColor}
.btn--line:hover{box-shadow:inset 0 0 0 1px var(--gold-night), 0 0 40px -10px rgba(210,166,90,.6)}
.link-arrow{font:500 13px/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; display:inline-flex; gap:10px; align-items:center; opacity:.85}
.link-arrow:hover{opacity:1; color:var(--gold-night)}
.link-arrow span{transition:transform .25s var(--ease)}
.link-arrow:hover span{transform:translateX(4px)}

/* ---------- nav flutuante (aparece depois do hero) ---------- */
.pill{
  position:fixed; top:14px; left:50%; z-index:50;
  transform:translate(-50%,-140%); opacity:0; visibility:hidden; transition:transform .5s var(--ease), opacity .4s, visibility 0s .5s;
  display:flex; align-items:center; gap:clamp(12px,2vw,26px);
  padding:8px 8px 8px 22px; border-radius:999px;
  background:rgba(16,25,43,.72); color:var(--cream);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 0 0 1px rgba(231,217,180,.14), 0 18px 50px -20px rgba(0,0,0,.6), 0 0 40px -18px rgba(210,166,90,.5);
}
.pill.on{transform:translate(-50%,0); opacity:1; visibility:visible; transition:transform .5s var(--ease), opacity .4s}
.pill .wm{font:700 18px/1 var(--f-disp); text-decoration:none; letter-spacing:.02em}
.pill nav{display:flex; gap:clamp(10px,1.6vw,22px)}
.pill nav a{font:500 11px/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; opacity:.75}
.pill nav a:hover{opacity:1; color:var(--gold-night)}
.pill .btn{padding:12px 18px; font-size:11px; border-radius:999px; white-space:nowrap}
@media (max-width:820px){ .pill nav{display:none} .pill{gap:14px} }

/* ---------- seções ---------- */
.sec{position:relative; padding:clamp(90px,14vh,170px) var(--gutter)}
.wrap{max-width:var(--maxw); margin:0 auto; position:relative; z-index:2}
.night{background:var(--ink); color:var(--cream)}
.night + .night{margin-top:-1px}   /* sem fresta de 1px entre duas seções da noite */
.night .eyebrow{color:var(--gold-night)}
.paper{background:var(--cream); color:var(--navy)}
.paper .eyebrow{color:var(--gold-text)}

.glow-text{color:var(--gold-night); text-shadow:0 0 18px rgba(210,166,90,.55), 0 0 42px rgba(210,166,90,.25)}

/* ---------- cartão com luz que segue o cursor ---------- */
.glow{
  --mx:50%; --my:50%; --gc:210,166,90;
  position:relative; isolation:isolate; border-radius:18px;
}
.glow::before{   /* borda acesa */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:2; pointer-events:none;
  background:radial-gradient(260px circle at var(--mx) var(--my), rgba(var(--gc),.9), rgba(var(--gc),0) 70%), var(--edge, rgba(231,217,180,.12));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.9;
}
.glow::after{    /* luz no miolo */
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--gc),.13), transparent 60%);
  opacity:0; transition:opacity .4s;
}
.glow:hover::after{opacity:1}
.paper .glow{--edge:rgba(29,53,87,.16)}
.paper .glow::after{background:radial-gradient(420px circle at var(--mx) var(--my), rgba(185,141,64,.16), transparent 60%)}

/* ---------- pixels: cobertura que se desfaz quando entra na tela ---------- */
.px{position:relative}
.px-cover{position:absolute; inset:-1px; z-index:6; display:grid; pointer-events:none}
.px-cover i{display:block; background:var(--px-bg, var(--ink)); transition:opacity .01s linear; outline:1px solid var(--px-bg, var(--ink))}
.px-cover.go i{opacity:0}

/* ---------- dither: a noite volta ao papel em pixels ---------- */
.dither{position:absolute; left:0; right:0; top:-1px; height:clamp(160px,22vh,260px); width:100%; z-index:1; pointer-events:none; display:block; image-rendering:pixelated}

/* ---------- derretimento (papel → noite) ---------- */
.melt{position:absolute; top:0; left:0; width:100%; height:62vh; z-index:5; pointer-events:none; overflow:hidden}

/* ---------- celular (mock do app, tema noite) ---------- */
.phone{
  --w:300px;
  position:relative; width:var(--w); aspect-ratio:300/620; border-radius:46px; padding:10px;
  background:linear-gradient(145deg,#2a2c31,#0a0b0d 40%,#1b1c20);
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 40px 90px -30px rgba(0,0,0,.85), 0 0 120px -40px rgba(210,166,90,.45);
}
.phone .scr{
  position:relative; height:100%; border-radius:37px; overflow:hidden; background:var(--app-bg);
  color:var(--app-text); font-family:var(--f-app); font-size:13px; line-height:1.45;
}
.phone .notch{position:absolute; top:10px; left:50%; transform:translateX(-50%); width:92px; height:26px; border-radius:20px; background:#000; z-index:9}
.phone .bar{display:flex; justify-content:space-between; padding:14px 26px 0; font:600 12px var(--f-app); color:var(--app-text)}

/* bits de UI do app */
.ui-card{background:var(--app-surface); border:1px solid var(--app-line); border-radius:16px; padding:12px 14px}
.ui-row{display:flex; align-items:center; gap:10px}
.ui-soft{color:var(--app-soft)} .ui-faint{color:var(--app-faint)}
.ui-label{font:500 10px/1 var(--f-app); letter-spacing:.12em; text-transform:uppercase; color:var(--app-faint)}
.ui-btn{display:inline-flex; align-items:center; justify-content:center; height:30px; padding:0 14px; border-radius:999px; font:600 12px var(--f-app); background:var(--app-text); color:var(--app-bg); border:0}
.ui-btn--ghost{background:transparent; color:var(--app-text); box-shadow:inset 0 0 0 1px var(--app-line)}
.ui-chip{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; font:500 11px var(--f-app); background:var(--app-surface-2); color:var(--app-soft)}
.ui-me{align-self:flex-end; background:var(--app-text); color:var(--app-bg); padding:9px 13px; border-radius:20px 20px 6px 20px; max-width:82%}
.ui-agent{max-width:92%}
.ui-av{width:26px; height:26px; border-radius:50%; flex:none; background:radial-gradient(circle at 35% 30%, #F1D9A6, #B98D40 60%, #7a5a22); box-shadow:0 0 0 2px var(--app-bg), 0 0 0 3px rgba(210,166,90,.5)}
.ui-ok{color:#8FC9A0}

/* ---------- rodapé simples (precos.html) ---------- */
.foot{padding:56px var(--gutter) 40px; background:var(--ink); color:rgba(231,217,180,.7); font-size:13px}
.foot .wrap{display:flex; flex-wrap:wrap; gap:18px 36px; align-items:center; justify-content:space-between}
.foot a{text-decoration:none; opacity:.8} .foot a:hover{opacity:1; color:var(--gold-night)}
.foot .wm{font:700 22px/1 var(--f-disp); color:var(--parchment)}

/* ---------- lista de espera (folha de papel) ---------- */
.wl{border:0; padding:0; margin:auto; width:min(520px,calc(100vw - 32px)); background:var(--cream); color:var(--navy); box-shadow:0 30px 80px rgba(6,10,20,.55), 0 0 90px -20px rgba(210,166,90,.5)}
.wl::backdrop{background:rgba(11,18,32,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.wl-in{position:relative; padding:clamp(28px,5vw,48px)}
.wl-in::before{content:""; position:absolute; inset:10px; border:1px solid rgba(29,53,87,.35); pointer-events:none}
.wl h3{font:700 clamp(30px,5vw,40px)/1.05 var(--f-disp); margin:0 0 12px}
.wl p{font-size:15px; line-height:1.6; margin:0 0 22px; max-width:40ch}
.wl label.f{display:block; font:12px var(--f-mono); letter-spacing:.14em; text-transform:uppercase; margin:0 0 8px}
.wl input[type=email]{width:100%; padding:15px 14px; font:inherit; font-size:16px; color:var(--navy); background:var(--paper-hi); border:1px solid var(--navy); border-radius:0; outline:none}
.wl input[type=email]:focus{box-shadow:0 0 0 3px rgba(185,141,64,.45)}
.wl .ok{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5; margin:16px 0 22px; cursor:pointer}
.wl .ok input{margin-top:3px; accent-color:var(--navy)}
.wl .hp{position:absolute; left:-9999px}
.wl button[type=submit]{width:100%; padding:17px 20px; border:0; cursor:pointer; background:var(--navy); color:var(--cream); font:500 14px/1 var(--f-body); letter-spacing:.13em; text-transform:uppercase}
.wl button[type=submit]:hover{background:var(--ink)}
.wl button[disabled]{opacity:.6; cursor:wait}
.wl .msg{min-height:1.4em; font-size:14px; margin:14px 0 0}
.wl .msg.err{color:#8A2B1D}
.wl .x{position:absolute; top:18px; right:18px; background:none; border:0; font-size:26px; line-height:1; color:var(--navy); cursor:pointer; padding:6px}
.wl .ok a{color:var(--navy); text-underline-offset:2px}

/* ---------- entrada suave ---------- */
.rise{opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.rise.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
  .rise{opacity:1; transform:none; transition:none}
  .px-cover{display:none}
}

/* =========================================================
   v2.1 · textura da noite, planos, movimento
   ========================================================= */

/* ---------- textura da noite: luz, hachura de gravura e estrelas ---------- */
.tex{position:relative; isolation:isolate}
.tex::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  -webkit-mask:linear-gradient(transparent, #000 12%, #000 88%, transparent); mask:linear-gradient(transparent, #000 12%, #000 88%, transparent);
  background:
    radial-gradient(900px 520px at 10% 6%, rgba(210,166,90,.11), transparent 65%),
    radial-gradient(1000px 720px at 94% 72%, rgba(60,78,140,.30), transparent 70%),
    radial-gradient(700px 500px at 50% 110%, rgba(210,166,90,.07), transparent 70%),
    repeating-linear-gradient(-38deg, rgba(231,217,180,.026) 0 1px, transparent 1px 7px);
}
.tex::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(1.2px 1.2px at 24px 38px, rgba(241,232,211,.9), transparent 60%),
    radial-gradient(1px 1px at 140px 90px, rgba(241,232,211,.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 210px 20px, rgba(210,166,90,.9), transparent 60%),
    radial-gradient(1px 1px at 80px 170px, rgba(241,232,211,.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 190px 200px, rgba(241,232,211,.8), transparent 60%),
    radial-gradient(1px 1px at 260px 140px, rgba(241,232,211,.5), transparent 60%);
  background-size:300px 240px;
  -webkit-mask:linear-gradient(transparent, #000 18%, #000 82%, transparent);
  mask:linear-gradient(transparent, #000 18%, #000 82%, transparent);
  animation:twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle{0%{opacity:.35} 50%{opacity:.7} 100%{opacity:.45; background-position:12px -8px}}
.tex > .wrap{position:relative; z-index:2}

/* ---------- ornamento divisor ---------- */
.divider{position:relative; z-index:2; display:flex; justify-content:center; padding:0 var(--gutter)}
.divider img{width:min(760px,92vw); height:auto; display:block;
  clip-path:inset(0 calc(50% - 50% * var(--dv,0)) 0 calc(50% - 50% * var(--dv,0)));
  filter:drop-shadow(0 0 18px var(--dv-glow, rgba(185,141,64,.35)))}

/* ---------- títulos que entram palavra por palavra ---------- */
.split .w{display:inline-block; white-space:pre}
.split .w > span{display:inline-block; opacity:0; filter:blur(10px); transform:translateY(.45em);
  transition:opacity .8s var(--ease), filter .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--i) * 55ms)}
.split.in .w > span{opacity:1; filter:none; transform:none}

/* ---------- planos ---------- */
.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:50px; align-items:stretch; perspective:1400px}
.plan{
  position:relative; padding:34px 30px 30px; display:flex; flex-direction:column; color:var(--cream);
  background:linear-gradient(180deg, rgba(231,217,180,.055), rgba(231,217,180,.015) 40%, rgba(16,25,43,.4));
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transform-style:preserve-3d; transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  overflow:hidden;
}
.plan .frame{position:absolute; inset:9px; border:1px solid rgba(210,166,90,.16); border-radius:12px; pointer-events:none; z-index:1}
.plan .shine{position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, transparent 35%, rgba(241,232,211,.10) 48%, transparent 60%);
  transform:translateX(-120%); transition:transform 1.1s var(--ease)}
.plan:hover .shine{transform:translateX(120%)}
.plan > *:not(.frame):not(.shine):not(.badge){position:relative; z-index:2}
.plan .art{height:170px; display:flex; align-items:center; justify-content:center; margin:-8px 0 10px; position:relative}
.plan .art::before{content:""; position:absolute; width:150px; height:150px; border-radius:50%; background:radial-gradient(closest-side, rgba(210,166,90,.28), transparent); filter:blur(10px); transition:transform .6s var(--ease), opacity .6s}
.plan .art img{height:100%; width:auto; position:relative; filter:drop-shadow(0 0 22px rgba(210,166,90,.25)); transition:filter .5s, transform .7s var(--ease); animation:float 7s ease-in-out infinite}
.plan:nth-child(2) .art img{animation-delay:-2.3s} .plan:nth-child(3) .art img{animation-delay:-4.6s}
@keyframes float{0%,100%{translate:0 0} 50%{translate:0 -7px}}
.plan:hover .art img{filter:drop-shadow(0 0 40px rgba(210,166,90,.7)); transform:scale(1.05)}
.plan:hover .art::before{transform:scale(1.25)}
.plan .name{margin:0; font:400 italic 34px/1 var(--f-calm); letter-spacing:-.01em}
.plan .for{font:400 italic 18px/1.35 var(--f-calm); opacity:.7; margin:6px 0 20px; min-height:2.7em}

.price{display:flex; align-items:flex-start; gap:4px; margin:18px 0 0; font-family:var(--f-disp); font-variant-numeric:lining-nums; color:var(--parchment); line-height:1}
.price .cur{font:500 15px/1 var(--f-body); letter-spacing:.06em; margin-top:12px; opacity:.75}
.price .int{font-weight:600; font-size:clamp(64px,6vw,86px); letter-spacing:-.035em; line-height:.86;
  background:linear-gradient(180deg, #FBF0D6 0%, #E7D9B4 45%, #C9A05A 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(210,166,90,.25))}
.price .dec{font-weight:600; font-size:26px; margin-top:6px; letter-spacing:-.01em}
.price .per{align-self:flex-end; font:400 14px/1 var(--f-body); opacity:.6; margin:0 0 8px 6px}
.price-note{font:500 10.5px var(--f-mono); letter-spacing:.16em; text-transform:uppercase; opacity:.55; margin:12px 0 22px}

.plan ul{list-style:none; padding:22px 0 0; margin:0 0 28px; display:grid; gap:12px; align-content:start; flex:1; font-size:14.5px; line-height:1.45; border-top:1px solid rgba(231,217,180,.1)}
.plan li{display:flex; gap:12px}
.plan li::before{content:""; flex:none; width:14px; height:14px; margin-top:2px; border-radius:50%;
  background:radial-gradient(circle, var(--gold-night) 0 3px, transparent 3.5px), rgba(210,166,90,.14); box-shadow:0 0 10px rgba(210,166,90,.35)}
.plan .btn{width:100%}

.plan.hl{background:linear-gradient(180deg, rgba(210,166,90,.16), rgba(210,166,90,.03) 45%, rgba(16,25,43,.5)); box-shadow:0 30px 100px -30px rgba(210,166,90,.55)}
.plan.hl::before{    /* borda que gira */
  background:conic-gradient(from var(--ang), transparent 0 62%, rgba(210,166,90,.95) 72%, #FBF0D6 76%, rgba(210,166,90,.95) 80%, transparent 90%), rgba(210,166,90,.35);
  animation:spin 6s linear infinite; opacity:1;
}
@property --ang{syntax:"<angle>"; initial-value:0deg; inherits:false}
@keyframes spin{to{--ang:360deg}}
.plan .badge{position:absolute; top:18px; right:18px; z-index:3; font:500 10px/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ink); background:linear-gradient(180deg,#F1D9A6,#D2A65A); padding:7px 10px; border-radius:999px; box-shadow:0 0 24px rgba(210,166,90,.6)}

@media (max-width:1100px){ .plans{grid-template-columns:1fr; max-width:540px; margin-left:auto; margin-right:auto} }
@media (prefers-reduced-motion:reduce){ .tex::after, .plan .art img, .plan.hl::before{animation:none} .split .w > span{opacity:1; filter:none; transform:none} }