/* ============================================================
   trak — site styles
   Paleta espelha o app: creme + laranta + serif editorial.
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/newsreader-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader'; font-style:italic; font-weight:400; font-display:swap;
  src:url('/fonts/newsreader-latin-400-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/fonts/newsreader-latin-600-normal.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root{
  --ink:#1a1a22; --ink-soft:#2a2a32; --muted:#6b6b76;
  --bg:#f6f4ef; --card:#fffdf9; --accent:#d96a33; --accent-soft:#fbe7d6;
  --line:#e6e2d8;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --maxw:1040px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); line-height:1.65; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto;}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.15; letter-spacing:-.01em; margin:0;}
.serif-em{font-style:italic; color:var(--accent);}
.overline{text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color:var(--accent); font-weight:700;}
.muted{color:var(--muted);}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
.container{max-width:var(--maxw); margin:0 auto; padding-left:24px; padding-right:24px;}

/* ---------- Nav ---------- */
.nav{position:sticky; top:0; z-index:30;
  backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px);
  background:rgba(246,244,239,.82); border-bottom:1px solid var(--line);}
.nav .container{display:flex; align-items:center; justify-content:space-between; height:60px;}
.brand{display:inline-flex; align-items:center; gap:9px; font-family:var(--serif); font-weight:600; font-size:1.35rem; letter-spacing:-.01em; color:var(--ink);}
.brand:hover{text-decoration:none;}
.brand .mark{width:28px; height:28px; border-radius:7px; display:block;}
.nav-links{display:flex; gap:26px; align-items:center; font-size:.92rem;}
.nav-links a{color:var(--ink); font-weight:500;}
.nav-cta{background:var(--ink); color:#fff!important; padding:8px 16px; border-radius:10px; font-weight:600;}
.nav-cta:hover{text-decoration:none; background:var(--ink-soft);}
@media(max-width:640px){ .nav-links a:not(.nav-cta){display:none;} }

/* ---------- Buttons ---------- */
/* Badge oficial da Apple: usar como é, sem hover/efeito próprio (guideline) */
.appstore-badge{display:inline-block; line-height:0;}
.appstore-badge img{height:48px; width:auto; display:block;}
.cta-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap;}
.cta-note{font-size:.82rem; color:var(--muted);}

/* ---------- Phone frame ---------- */
.phone{justify-self:center; width:282px; border-radius:42px; padding:9px;
  background:linear-gradient(160deg,#2a2a32,#15151b);
  box-shadow:0 30px 70px -20px rgba(26,26,34,.55), 0 4px 14px rgba(0,0,0,.2);}
.phone img{display:block; width:100%; height:auto; border-radius:34px;}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:radial-gradient(120% 90% at 80% -10%, var(--accent-soft) 0%, rgba(251,231,214,0) 55%), var(--bg);}
.hero-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:72px 24px 64px;}
.hero h1{font-size:3.4rem; margin:14px 0 18px;}
.hero .sub{font-size:1.22rem; color:var(--muted); max-width:430px; margin:0 0 30px;}

/* ---------- Sections ---------- */
.section{padding:86px 0;}
.idea{display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:center;}
.idea .phone{width:262px;}
.idea h2{font-size:2.2rem; margin:12px 0 22px;}
.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px;}
.steps li{display:flex; gap:14px; align-items:flex-start;}
.steps .n{flex:0 0 28px; height:28px; border-radius:8px; background:var(--accent-soft); color:var(--accent);
  font-family:var(--serif); font-weight:700; font-size:.95rem; display:flex; align-items:center; justify-content:center;}
.steps .t{font-size:1.05rem;}
.steps .t b{font-weight:600;}
.steps .t span{color:var(--muted);}

/* ---------- Trio ---------- */
.trio-wrap{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding:72px 0;}
.feat .ico{width:44px; height:44px; margin-bottom:16px; color:var(--accent);}
.feat .ico svg{width:100%; height:100%; stroke:currentColor; stroke-width:1.5; fill:none;
  stroke-linecap:round; stroke-linejoin:round;}
.feat h3{font-size:1.22rem; margin:0 0 8px;}
.feat p{color:var(--muted); font-size:1rem; margin:0;}

/* ---------- FAQ ---------- */
.faq{max-width:760px;}
.faq h2{font-size:2rem; margin-bottom:8px;}
.faq .lead{color:var(--muted); margin:0 0 28px;}
.qa{border-top:1px solid var(--line);}
.qa:last-child{border-bottom:1px solid var(--line);}
.qa summary{cursor:pointer; list-style:none; padding:20px 0; font-family:var(--serif); font-weight:600;
  font-size:1.12rem; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{content:"+"; color:var(--accent); font-family:var(--sans); font-weight:400; font-size:1.4rem; transition:transform .2s;}
.qa[open] summary::after{transform:rotate(45deg);}
.qa p{margin:0 0 20px; color:var(--muted); font-size:1rem; max-width:640px;}

/* ---------- Final CTA ---------- */
.final{background:#15151b; color:var(--bg); text-align:center;}
.final .inner{padding:80px 24px;}
.final h2{font-size:2.4rem; color:#fff; margin-bottom:14px;}
.final p{color:#c9c5bd; max-width:420px; margin:0 auto 28px;}
.final .appstore-badge{margin:0 auto;}

/* ---------- Footer ---------- */
footer.site{font-size:.9rem; color:var(--muted); border-top:1px solid var(--line);}
footer.site .inner{padding:48px 24px 64px; display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between;}
footer.site .links{display:flex; flex-wrap:wrap; gap:8px 18px;}
footer.site .links a{color:var(--ink);}
footer.site .copy{opacity:.7; align-self:flex-end;}

/* ---------- Prose (tutorial + legal) ---------- */
.prose{max-width:740px; margin:0 auto; padding:56px 24px 88px;}
.prose .updated{color:var(--muted); font-size:.9rem; margin:4px 0 0;}
.prose h1{font-size:2.6rem; margin:10px 0 6px;}
.prose h2{font-size:1.5rem; margin:42px 0 12px;}
.prose h3{font-size:1.18rem; margin:28px 0 8px;}
.prose p{margin:0 0 16px;}
.prose ul,.prose ol{margin:0 0 18px; padding-left:22px;}
.prose li{margin:6px 0;}
.prose hr{border:none; border-top:1px solid var(--line); margin:40px 0;}
.breadcrumb{font-size:.85rem; color:var(--muted); margin-bottom:8px;}
.breadcrumb a{color:var(--muted);}
.lead-p{font-size:1.18rem; color:var(--muted); margin:0 0 28px;}

/* Tutorial step blocks */
.tut-step{display:flex; gap:18px; padding:26px 0; border-top:1px solid var(--line);}
.tut-step .num{flex:0 0 40px; height:40px; border-radius:11px; background:var(--accent-soft); color:var(--accent);
  font-family:var(--serif); font-weight:700; font-size:1.2rem; display:flex; align-items:center; justify-content:center;}
.tut-step .body{flex:1; min-width:0;}
.tut-step .body h3{margin:6px 0 8px;}
.tut-step .body p{margin:0 0 12px;}
.kbd{display:inline-block; background:var(--card); border:1px solid var(--line); border-radius:7px;
  padding:1px 8px; font-size:.92em; font-weight:600; color:var(--ink); white-space:nowrap;}
.callout{background:var(--accent-soft); border-radius:14px; padding:16px 18px; margin:18px 0; font-size:.96rem;}
.callout strong{color:var(--accent);}
.note{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:18px 0; font-size:.96rem; color:var(--muted);}
.btn-inline{display:inline-flex; align-items:center; gap:7px; background:var(--ink); color:#fff!important;
  padding:9px 16px; border-radius:11px; font-weight:600; font-size:.95rem; margin:4px 0 8px;}
.btn-inline:hover{text-decoration:none; background:var(--ink-soft);}
.prereq{list-style:none; padding:0; margin:0 0 8px;}
.prereq li{display:flex; gap:10px; align-items:flex-start; margin:8px 0;}
.prereq li::before{content:"✓"; color:var(--accent); font-weight:700;}

/* ---------- Lock screen mockup (hero) ----------
   Grade gerada por scripts/gen_lockscreen.py (12 meses, Monday-first).
   .a = célula clara, .b = célula queimada, .t = hoje, <i> vazio = futuro, <u> = gap. */
.ls{position:relative; aspect-ratio:1206/2622; border-radius:34px; overflow:hidden;
  display:flex; flex-direction:column; padding:34px 15px 30px;
  background:
    radial-gradient(90% 50% at 85% -8%, rgba(217,106,51,.32) 0%, rgba(217,106,51,0) 60%),
    radial-gradient(70% 40% at 10% 108%, rgba(217,106,51,.14) 0%, rgba(217,106,51,0) 60%),
    #17110c;}
.ls-top{text-align:center; color:#f3ede4; margin-bottom:12px;}
.ls-date{display:block; font-size:.68rem; font-weight:600; letter-spacing:.01em; color:#e9e2d6;}
.ls-clock{display:block; font-size:52px; font-weight:200; line-height:1.05; letter-spacing:-.01em;}
.ls-cal{flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:10px 9px;
  align-content:center; padding:6px 2px;}
.mo b{display:block; text-align:center; font-weight:600; text-transform:uppercase;
  letter-spacing:.22em; font-size:6.5px; color:#8d8175; margin-bottom:4px;}
.mg{display:grid; grid-template-columns:repeat(7,1fr); gap:2.5px;}
.mg i,.mg u{display:block; aspect-ratio:1; border-radius:2.5px; background:#262019;}
.mg u{background:transparent;}
.mg i.a{--c:#e8703f;}
.mg i.b{--c:#a8542e;}
.mg i.a,.mg i.b{animation:cell-in .5s cubic-bezier(.2,.7,.3,1.25) var(--d) both;}
.mg i.t{--c:#dcb591; border-radius:50%;
  animation:cell-in .5s cubic-bezier(.2,.7,.3,1.25) var(--d) both,
            today-pulse 2.6s ease-in-out calc(var(--d) + .7s) infinite;}
@keyframes cell-in{
  from{background:#262019; transform:scale(.55);}
  to{background:var(--c); transform:scale(1);}
}
@keyframes today-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(220,181,145,.45);}
  50%{box-shadow:0 0 0 3px rgba(220,181,145,0);}
}
.ls-foot{text-align:center; font-size:7px; letter-spacing:.3em; text-transform:uppercase;
  color:#7d7368; margin-top:10px;}
@media (prefers-reduced-motion: reduce){
  .mg i.a,.mg i.b,.mg i.t{animation:none; background:var(--c);}
}

/* ---------- Demo (vídeo) ---------- */
.demo{border-top:1px solid var(--line);}
.demo-inner{text-align:center;}
.demo-inner h2{font-size:2.2rem; margin:12px 0 14px;}
.demo-inner .lead{color:var(--muted); max-width:520px; margin:0 auto 36px;}
.demo-phone{margin:0 auto;}
.demo-phone video{display:block; width:100%; height:auto; border-radius:34px; background:#17110c;}

/* ---------- Estilos e paletas ---------- */
.styles-wrap{background:var(--card); border-top:1px solid var(--line);}
.styles-wrap h2{font-size:2.2rem; margin:12px 0 14px;}
.styles-wrap .lead{color:var(--muted); max-width:560px; margin:0 0 40px;}
.styles-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 28px;}
.style-card{margin:0;}
.style-card img{display:block; width:100%; height:auto; border-radius:20px;
  box-shadow:0 14px 34px -14px rgba(26,26,34,.4);}
.style-card figcaption{margin-top:12px;}
.style-card b{display:block; font-family:var(--serif); font-weight:600; font-size:1.08rem;}
.style-card span{display:block; color:var(--muted); font-size:.92rem; margin-top:2px;}
.palettes{margin-top:56px; text-align:center;}
.palette-thumbs{display:flex; justify-content:center; gap:20px; margin-bottom:22px;}
.palette-thumbs figure{margin:0; width:110px;}
.palette-thumbs img{display:block; width:100%; height:auto; border-radius:14px;
  box-shadow:0 10px 24px -12px rgba(26,26,34,.4);}
.palette-thumbs figcaption{margin-top:8px; font-family:var(--serif); font-weight:600; font-size:.95rem;}
.palette-note{max-width:520px; margin:0 auto 10px; color:var(--muted);}
.pricing-note{max-width:520px; margin:0 auto; font-size:.92rem; color:var(--muted);
  background:var(--accent-soft); border-radius:12px; padding:10px 16px; display:inline-block;}

/* ---------- Quem fez ---------- */
.maker{border-top:1px solid var(--line);}
.maker-inner{max-width:620px;}
.maker-inner h2{font-size:2rem; margin:12px 0 18px;}
.maker-inner p{color:var(--ink-soft); margin:0 0 14px; font-size:1.05rem;}
.maker-sign{font-family:var(--serif); font-style:italic; color:var(--muted); margin-top:18px;}

/* ---------- Responsive ---------- */
@media(max-width:760px){
  body{font-size:16px;}
  .hero-inner,.idea{grid-template-columns:1fr; text-align:center; gap:36px;}
  .hero h1{font-size:2.6rem;} .hero .sub{margin:0 auto 30px;}
  .cta-row{justify-content:center;}
  .steps{text-align:left; max-width:430px; margin:0 auto;}
  .idea .order-text{order:2;} .idea .phone{order:-1;}
  .trio{grid-template-columns:1fr; gap:36px; text-align:center;}
  .feat .ico{margin-left:auto; margin-right:auto;}
  .prose h1{font-size:2.1rem;}
  footer.site .copy{align-self:flex-start;}
  .styles-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 18px;}
  .palette-thumbs{gap:14px;} .palette-thumbs figure{width:92px;}
  .demo-inner h2,.styles-wrap h2{font-size:1.9rem;}
}