/* ============================================================
   LU — Kernel de Marca (fonte única de verdade do preview)
   Marca: Lu Matosinhos · app "LU" — neuroespiritualidade
   Estética: santuário editorial · quente · feminino · contemplativo
   Regra: NADA de roxo/neon/gradiente de IA. Sem emoji no chrome (SVG line-art).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500&family=Parisienne&display=swap');

:root{
  /* — Cor: mundo quente da Lu — */
  --bg:            #F5EFE6;  /* marfim quente (background-primary) */
  --bg-2:          #EFE7DA;  /* areia clara (background-secondary) */
  --surface:       #FBF7F0;  /* porcelana (surface-elevated) */
  --surface-soft:  #F1E9DC;  /* superfície suave */
  --sand:          #E4D8C4;  /* areia */
  --taupe:         #B9A88E;  /* taupe */
  --clay:          #9B7E5B;  /* terra/argila (accent-earth) */
  --gold:          #B48A4C;  /* dourado brasso (accent-gold) */
  --gold-soft:     #CDAE79;  /* dourado claro */
  --ink:           #33291F;  /* quase-preto quente (text-primary) */
  --ink-2:         #6F6252;  /* texto secundário (text-secondary) */
  --muted:         #948673;  /* texto mut (text-muted) */
  --line:          #E1D5C2;  /* borda sutil (border-subtle) */
  --line-2:        #D6C7B0;
  --ok:            #6E8B6A;  /* estado suave */
  --warn:          #C08A4E;

  /* — Tipografia — */
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --script:'Parisienne', 'Snell Roundhand', cursive;

  /* — Escala fluida — */
  --step--1: clamp(.82rem, .8rem + .1vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.6vw, 3.6rem);
  --step-4:  clamp(2.8rem, 1.9rem + 4.4vw, 5.4rem);

  /* — Espaço, raio, sombra, container — */
  --space: clamp(3.5rem, 2.4rem + 5vw, 7rem);
  --r-sm: 10px; --r: 16px; --r-lg: 26px; --r-pill: 999px;
  --shadow: 0 18px 50px -24px rgba(51,41,31,.35);
  --shadow-soft: 0 10px 30px -18px rgba(51,41,31,.28);
  --wrap: 1140px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--sans); font-weight:400; font-size:var(--step-0);
  line-height:1.65; color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold-soft); color:var(--ink); }

/* — Tipografia base — */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.08;
  letter-spacing:-.01em; color:var(--ink); text-wrap:balance; }
h1{ font-size:var(--step-4); font-weight:400; }
h2{ font-size:var(--step-3); font-weight:400; }
h3{ font-size:var(--step-2); }
h4{ font-size:var(--step-1); }
p{ text-wrap:pretty; }
.lead{ font-size:var(--step-1); line-height:1.5; color:var(--ink-2);
  font-weight:300; text-wrap:balance; max-width:60ch; }
.script{ font-family:var(--script); font-weight:400; color:var(--gold);
  letter-spacing:.01em; line-height:1; }
.eyebrow{ font-family:var(--sans); font-weight:400; font-size:var(--step--1);
  text-transform:uppercase; letter-spacing:.34em; color:var(--ink-2); }
.muted{ color:var(--muted); }
.gold{ color:var(--gold); }
.serif{ font-family:var(--serif); }

/* — Layout — */
.wrap{ width:min(var(--wrap), 100% - 2.5rem); margin-inline:auto; }
.section{ padding-block:var(--space); }
.center{ text-align:center; }
.stack{ display:flex; flex-direction:column; }
.divider{ height:1px; background:var(--line); border:0; }
.kicker{ display:inline-flex; align-items:center; gap:.6rem; }
.kicker::before{ content:""; width:34px; height:1px; background:var(--gold); }

.grid{ display:grid; gap:1.4rem; }
.grid-2{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* — Nav — */
.nav{ position:sticky; top:0; z-index:50;
  -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
  background:color-mix(in oklab, var(--bg) 72%, transparent);
  border-bottom:1px solid var(--line); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:68px; }
.nav .logo{ font-family:var(--script); font-size:1.7rem; color:var(--ink);
  line-height:1; padding-block:.2rem; }
.nav .logo b{ font-family:var(--serif); font-weight:500; font-size:1.05rem;
  letter-spacing:.42em; text-transform:uppercase; color:var(--clay);
  display:block; margin-top:-.1rem; }
.nav-links{ display:flex; align-items:center; gap:1.7rem; }
.nav-links a{ font-size:var(--step--1); letter-spacing:.12em; color:var(--ink-2);
  text-transform:uppercase; transition:color .3s var(--ease); }
.nav-links a:hover{ color:var(--gold); }
.nav-toggle{ display:none; align-items:center; justify-content:center; background:none;
  border:1px solid var(--line-2); border-radius:10px; padding:.5rem .6rem;
  color:var(--ink); cursor:pointer; }
@media (max-width:820px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{ display:none; }
  .nav.open .nav-links{ display:flex; flex-direction:column; align-items:flex-start; gap:1.15rem;
    position:absolute; top:100%; left:0; right:0; background:var(--surface);
    border-bottom:1px solid var(--line); box-shadow:var(--shadow-soft);
    padding:1.15rem clamp(1.25rem,5vw,2rem) 1.5rem; }
}

/* — Botões — */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--sans); font-size:var(--step--1); letter-spacing:.14em;
  text-transform:uppercase; padding:.95em 1.9em; border-radius:var(--r-pill);
  border:1px solid var(--ink); color:var(--ink); background:transparent;
  cursor:pointer; white-space:nowrap; transition:all .35s var(--ease); }
.btn:hover{ background:var(--ink); color:var(--surface); }
.btn-gold{ border-color:var(--gold); background:var(--gold); color:var(--ink); }
.btn-gold:hover{ background:var(--ink); border-color:var(--ink); color:var(--surface); }
.btn-ghost{ border-color:var(--line-2); color:var(--ink-2); }
.btn-ghost:hover{ background:var(--surface); color:var(--ink); border-color:var(--gold); }

/* — Cards — */
.card{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(1.4rem,1rem+1.4vw,2.2rem);
  box-shadow:var(--shadow-soft); }
.card-soft{ background:var(--surface-soft); border:1px solid var(--line);
  border-radius:var(--r); padding:1.4rem; }
.card h3,.card h4{ margin-bottom:.5rem; }
.card-feature{ grid-column:span 2;
  background:linear-gradient(135deg, color-mix(in oklab,var(--gold) 13%, var(--surface)), var(--surface) 62%);
  border-color:var(--gold-soft); }
@media (max-width:640px){ .card-feature{ grid-column:span 1; } }

/* — Chips / pílulas (NUNCA quebram) — */
.chip{ display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
  font-size:var(--step--1); letter-spacing:.04em; padding:.5em 1em;
  border-radius:var(--r-pill); border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink-2); }
.chip-gold{ background:color-mix(in oklab,var(--gold) 16%, var(--surface));
  border-color:var(--gold-soft); color:var(--ink-2); }

/* — Moldura de celular (app preview / view-as) — */
.device{ width:300px; max-width:100%; aspect-ratio:300/620; background:var(--ink);
  border-radius:42px; padding:11px; box-shadow:var(--shadow); flex-shrink:0; }
.device .screen{ width:100%; height:100%; background:var(--bg);
  border-radius:32px; overflow:hidden; position:relative;
  display:flex; flex-direction:column; }
.device .statusbar{ display:flex; justify-content:space-between; align-items:center;
  padding:.7rem 1.2rem .3rem; font-size:.62rem; letter-spacing:.05em; color:var(--ink-2); }
.device .appbody{ flex:1; overflow:hidden; padding:.4rem 1rem 1rem; }
.device .appnav{ display:flex; justify-content:space-around; align-items:center;
  padding:.6rem .4rem; border-top:1px solid var(--line);
  background:var(--surface); font-size:.55rem; letter-spacing:.06em; color:var(--muted); }
.device .appnav .on{ color:var(--gold); }
.device .screen::after{ content:""; position:absolute; bottom:6px; left:50%;
  transform:translateX(-50%); width:34%; height:4px; border-radius:999px;
  background:color-mix(in oklab, var(--ink) 22%, transparent); pointer-events:none; }
.device-title{ text-align:center; margin-top:1rem; font-size:var(--step--1);
  letter-spacing:.18em; text-transform:uppercase; color:var(--clay); }

/* — Swatch de paleta (kit de marca) — */
.swatch{ border-radius:var(--r); overflow:hidden; border:1px solid var(--line); }
.swatch .chip-c{ height:88px; }
.swatch .meta{ padding:.7rem .9rem; background:var(--surface); font-size:var(--step--1); }
.swatch .meta b{ display:block; font-family:var(--sans); font-weight:500; letter-spacing:.02em; }
.swatch .meta span{ color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }

/* — Footer — */
.footer{ background:var(--bg-2); border-top:1px solid var(--line);
  padding-block:3rem; color:var(--ink-2); font-size:var(--step--1); }

/* — Micro-reveal (respeitando reduced-motion) — */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* — Acessibilidade — */
a:focus-visible,.btn:focus-visible,button:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* — Responsivo — */
@media (max-width:640px){
  :root{ --wrap:100%; }
  .nav .wrap{ min-height:60px; }
  .btn{ padding:.85em 1.5em; }
}