:root{
/* Paleta da marca */
--azul-petroleo:#006666;
--azul-escuro:#003B4D;
--bege:#FFEBD1;
--laranja:#F4A300;
--laranja-2:#E29400;


/* Tokens UI */
--bg:var(--azul-petroleo);
--surface:var(--azul-escuro);
--text:var(--bege);
--muted:#cfc6b9;
--border:#004d4d;
--shadow:0 10px 25px rgba(0,0,0,.20);
--radius:16px;
--container:1200px;
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
background:
radial-gradient(1200px 800px at 10% -10%, rgba(244,163,0,.08), transparent 55%),
radial-gradient(900px 600px at 110% 10%, rgba(0,59,77,.10), transparent 60%),
var(--bg);
color:var(--text);
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }


.container{ width:min(var(--container), 92vw); margin-inline:auto }
.btn-primary{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; background:linear-gradient(135deg, var(--laranja), var(--laranja-2)); color:#1a1a1a; font-weight:700 }
.btn-outline{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:#004a4a; color:var(--bege) }
.btn-ghost{ padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:#004a4a; color:var(--bege) }
.only-mobile{ display:none }


/* NAVBAR */
.navbar{ position:sticky; top:0; z-index:50; background:rgba(0,59,77,.85); backdrop-filter:blur(6px); border-bottom:1px solid var(--border) }
.nav-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0 }
.brand{ display:flex; align-items:center; gap:10px }
.brand strong{ letter-spacing:.5px }
.brand-mark{ width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg, var(--laranja), var(--laranja-2)) }
.nav{ display:flex; align-items:center; gap:12px }
.nav a{ padding:8px 10px; border-radius:10px }
.nav a:hover{ background:#004a4a }

/* HERO */
.hero{ padding: clamp(28px, 6vw, 64px) 0 }
.hero-grid{ display:grid; gap:24px; grid-template-columns:1.2fr 1fr; align-items:center }
.hero-copy h1{ margin:0 0 10px 0; font-size: clamp(28px, 4.6vw, 42px); line-height:1.15 }
.hero-copy h1 span{ color:var(--laranja) }
.hero-copy p{ color:var(--muted); margin:0 0 16px 0 }
.cta{ display:flex; gap:10px; flex-wrap:wrap }
.hero-card{ background:rgba(0,59,77,.85); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow) }
.mini-kpis{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:10px }
.kpi{ background:#004a4a; border:1px solid var(--border); border-radius:12px; padding:10px 12px; text-align:center }
.kpi-label{ display:block; font-size:12px; color:var(--muted) }
.kpi-val{ display:block; font-size:20px; font-weight:800 }
.progress-head{ display:flex; align-items:center; justify-content:space-between; margin:8px 2px }
progress{ width:100%; height:14px; border-radius:999px; overflow:hidden; accent-color:var(--laranja) }
progress::-webkit-progress-bar{ background:#004a4a }
progress::-webkit-progress-value{ background:linear-gradient(90deg, var(--laranja), var(--laranja-2)) }
progress::-moz-progress-bar{ background:linear-gradient(90deg, var(--laranja), var(--laranja-2)) }
/* SEÇÕES */
.section{ padding: clamp(28px, 6vw, 64px) 0 }
.section.alt{ background: rgba(0,59,77,.35); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.section-title{ margin:0 0 16px 0; font-size: clamp(22px, 3.2vw, 30px) }
.cards-3{ display:grid; gap:16px; grid-template-columns:repeat(3, minmax(0,1fr)) }
.card{ background:rgba(0,59,77,.85); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow) }
.card .icon{ font-size:22px; margin-bottom:8px }
.card.plan{ text-align:center }
.card.plan .price{ font-size:20px; font-weight:800; margin:8px 0 12px 0 }
.card.plan.featured{ outline:2px solid var(--laranja); outline-offset:2px }
.card.quote p{ margin:0 0 8px 0; font-style:italic }
.card.quote footer{ color:var(--muted); font-size:14px }


/* FOOTER */
.footer{ border-top:1px solid var(--border); padding:16px 0; background:rgba(0,59,77,.6) }
.footer-row{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.footer-nav{ display:flex; gap:10px; flex-wrap:wrap }
/* RESPONSIVO */
@media (max-width: 1024px){
.only-mobile{ display:inline-flex }
.nav{ position:fixed; inset:60px 0 0 0; background:rgba(0,59,77,.97); padding:14px; border-top:1px solid var(--border); transform: translateY(-110%); transition: transform .25s ease, opacity .25s ease, visibility .25s ease; z-index:1000; flex-direction:column; gap:10px; opacity:0; visibility:hidden; pointer-events:none }
.nav a{ padding:12px 10px }
.nav .btn-primary{ justify-content:center; width:100% }
.nav.open{ transform: translateY(0); opacity:1; visibility:visible; pointer-events:auto }
body.nav-open{ overflow:hidden }


.hero-grid{ grid-template-columns:1fr }
.cards-3{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
@media (max-width: 640px){
.cards-3{ grid-template-columns:1fr }
}


/* Acessibilidade */
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }