/* LF3 — Design moderno com tema claro/escuro, tipografia fluida e glassmorphism leve */

/* Tokens */
:root{
  --bg: #0b1220;
  --bg-2: #0e1628;
  --surface: rgba(255,255,255,0.06);
  --text: #eaf2f8;
  --muted: #b7c3cc;
  --brand: #58c1ff;
  --brand-2: #9ae6b4;
  --border: rgba(255,255,255,0.16);
  --shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* Tema claro */
:root[data-theme="light"]{
  --bg: #f7fafc;
  --bg-2: #ffffff;
  --surface: rgba(255,255,255,0.8);
  --text: #0a2230;
  --muted: #4e6672;
  --brand: #0e5a79;
  --brand-2: #0aa0c8;
  --border: rgba(10,34,48,0.12);
  --shadow: 0 12px 32px rgba(10,34,48,.08);
}

/* Reset e base */
*{box-sizing:border-box}
html{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.6}
body{margin:0; color:var(--text); background:
  radial-gradient(1200px 600px at 10% 10%, #11304a 0%, transparent 60%),
  radial-gradient(900px 500px at 90% 10%, #213b4f 0%, transparent 55%),
  linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  min-height:100dvh;}
img,svg{display:block; max-width:100%}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* Acessibilidade */
.skip{position:absolute; left:-9999px; top:-9999px}
.skip:focus{left:16px; top:16px; background:#fff; color:#000; padding:10px 14px; border-radius:10px; box-shadow:var(--shadow)}

/* Container e seção */
.wrap{max-width:1200px; margin:0 auto; padding:0 20px}
.section{padding:72px 0}
.section--alt{background:linear-gradient(180deg, transparent, rgba(255,255,255,0.02))}

/* Header e navegação (glassmorphism leve) */
.header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(160%) blur(10px); background:var(--surface); border-bottom:1px solid var(--border)}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px}
.nav__toggle,.theme-toggle{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background:transparent; color:var(--text); padding:10px 14px; border-radius:12px}
.nav__stack{display:flex; align-items:center; gap:10px}
.nav__list{list-style:none; margin:0; padding:0; display:flex; gap:10px}
.nav__list a{display:block; padding:10px 12px; border-radius:12px; color:var(--muted)}
.nav__list a:hover,.nav__list a[aria-current="page"]{background:var(--surface); color:var(--text)}

/* Hero full-bleed */
.hero{padding:48px 0 24px}
.hero__inner{display:grid; grid-template-columns:1fr; gap:24px; align-items:center}
.hero__copy h1{font-size:clamp(1.8rem, 3.8vw, 3rem); margin:0 0 12px; letter-spacing:-0.02em}
.hero__copy p{color:var(--muted); margin:0 0 18px}
.hero__actions{display:flex; gap:12px; flex-wrap:wrap}
.hero__card{border:1px solid var(--border); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden}
.hero__art{border-radius:18px; overflow:hidden; border:1px solid var(--border)}

/* Cards com borda gradiente */
.cards{display:grid; grid-template-columns:1fr; gap:16px}
 .cards--two{grid-template-columns:1fr; gap:16px}
 .card{position:relative; border-radius:16px; padding:18px; background:var(--surface); border:1px solid transparent; background-image: linear-gradient(var(--surface), var(--surface)), linear-gradient(135deg, var(--brand), var(--brand-2)); background-origin: border-box; background-clip: padding-box, border-box}
 /* .card:before removido para compatibilidade ampla */
 .card h3,.card h2{margin:0 0 8px}
 .card p{margin:0 0 10px; color:var(--muted)}

/* Grids e notas */
.grid{display:grid; gap:16px}
.grid--split{grid-template-columns:1fr}
.note{border-left:4px solid var(--brand); background:rgba(88,193,255,.08); padding:12px; border-radius:10px}

/* Depoimentos */
.testimonials{display:grid; grid-template-columns:1fr; gap:16px}
blockquote{margin:0; padding:18px; border:1px solid var(--border); border-radius:14px; background:var(--surface)}
blockquote p{margin:0 0 8px}
blockquote cite{color:var(--muted)}

/* Botões */
.btn{border:1px solid var(--border); background:var(--surface); color:var(--text); padding:12px 16px; border-radius:12px; transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn--brand{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#041018; border-color:transparent}
.btn--ghost{background:transparent}

/* Formulários */
.form{display:grid; gap:14px}
.form__row{display:grid; gap:8px}
.form__row input,.form__row textarea{border:1px solid var(--border); border-radius:12px; padding:12px; font:inherit; background:var(--surface); color:var(--text)}
.form__row input::placeholder{color:var(--muted)}
.form__actions{display:flex; gap:12px}
.form__status{margin-top:8px; color:var(--muted)}
.checkbox{display:flex; gap:8px; align-items:flex-start}

/* Footer */
.footer{border-top:1px solid var(--border); background:var(--surface)}
.footer__grid{display:grid; gap:16px; padding:28px 0}
.footer__links{display:flex; gap:12px; flex-wrap:wrap}
.footer__copy{color:var(--muted)}

/* Cookie — pill discreto */
.cookie{position:fixed; right:16px; bottom:16px; max-width:420px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px; box-shadow:var(--shadow)}
.cookie p{margin:0 0 10px; color:var(--muted)}
.cookie__actions{display:flex; gap:8px; flex-wrap:wrap}
.cookie[hidden]{display:none!important}
.cookie-modal{position:fixed; inset:0; background:rgba(0,0,0,.45); display:grid; place-items:center; padding:16px}
.cookie-modal[hidden]{display:none!important}
.cookie-modal__inner{background:var(--surface); border-radius:16px; border:1px solid var(--border); padding:16px; max-width:520px; width:100%}
.cookie-modal fieldset{border:1px solid var(--border); border-radius:12px; padding:10px}
.cookie-modal label{display:flex; gap:8px; align-items:center; margin-bottom:8px}

/* Responsivo */
@media(min-width:768px){
  .nav__stack{gap:12px}
  .hero__inner{grid-template-columns:1.15fr .85fr}
  .cards{grid-template-columns:repeat(3,1fr)}
  .cards--two{grid-template-columns:repeat(2,1fr)}
  .grid--split{grid-template-columns:1.2fr .8fr}
  .footer__grid{grid-template-columns:1.2fr .8fr}
}