:root{
  --bg:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --line:#e2e8f0;
  --card:#ffffff;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --primary:#2563eb;
  --primary2:#06b6d4;
  --ok:#16a34a;
  --wa:#22c55e;
  --radius:18px;
  --max:1120px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--ink); background: linear-gradient(180deg,#f8fafc 0%, #ffffff 55%);}

.container{max-width:var(--max); margin:0 auto; padding:0 18px}

.topbar{background:#0b1220; color:#e2e8f0; font-size:13px}
.topbar__inner{display:flex; justify-content:space-between; gap:12px; padding:10px 0; flex-wrap:wrap}
.topbar__left{display:flex; gap:8px; flex-wrap:wrap}
.topbar__right{display:flex; gap:12px; flex-wrap:wrap}

.chip{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12)}
.chip--ok{background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.25)}

.link{color:inherit; text-decoration:none; opacity:.9}
.link:hover{opacity:1; text-decoration:underline}

.header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.85); backdrop-filter: blur(10px); border-bottom:1px solid var(--line)}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0}

.brand{display:flex; gap:12px; align-items:center}
.brand__logo{width:42px; height:42px; border-radius:14px; background: radial-gradient(circle at 30% 20%, var(--primary2), var(--primary)); display:grid; place-items:center; color:#fff; font-weight:900}
.brand__name{font-weight:900; letter-spacing:-.2px}
.brand__sub{font-size:13px; color:var(--muted)}

.nav{display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.nav a{color:var(--muted); text-decoration:none; font-weight:600; font-size:14px}
.nav a:hover{color:var(--ink)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 14px; border-radius:14px; border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:800; text-decoration:none; cursor:pointer; box-shadow: 0 6px 16px rgba(2,6,23,.06); transition: transform .12s ease, box-shadow .12s ease}
.btn:hover{transform: translateY(-1px); box-shadow: 0 10px 22px rgba(2,6,23,.10)}
.btn--primary{background: linear-gradient(135deg, var(--primary), var(--primary2)); color:#fff; border-color: transparent}
.btn--wa{background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35)}

.hero{padding:28px 0 10px}
.hero__grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:stretch}
@media (max-width: 980px){.hero__grid{grid-template-columns:1fr}}

.hero__copy{padding:18px}
.h1{margin:0 0 10px; font-size: clamp(28px, 3.4vw, 46px); line-height:1.05; letter-spacing:-.8px}
.accent{color:var(--primary)}
.lead{margin:0 0 14px; color:var(--muted); font-size:16px; max-width:62ch}

.ab{display:none; position:fixed; left:12px; bottom:12px; background:#0b1220; color:#e2e8f0; padding:6px 10px; border-radius:999px; font-size:12px; z-index:60; opacity:.9}

.cta{display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 12px}
.kpis{display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-top:12px}
@media (max-width: 700px){.kpis{grid-template-columns:1fr}}
.kpi{background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow: var(--shadow)}
.kpi b{display:block}
.kpi span{color:var(--muted); font-size:12px}

.note{margin:10px 0 0; color:var(--muted); font-size:12px}

.hero__media{display:grid; gap:12px}
.media{margin:0; border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow)}
.media img{width:100%; height:320px; object-fit:cover; display:block}
@media (max-width: 980px){.media img{height:240px}}

.media__grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.media__grid img{width:100%; height:140px; object-fit:cover; border-radius: var(--radius); border:1px solid var(--line); box-shadow: var(--shadow)}

.section{padding: 18px 0}
.card{background:var(--card); border:1px solid var(--line); border-radius: var(--radius); padding:16px; box-shadow: var(--shadow)}

.card--form{display:grid; grid-template-columns:1.2fr .8fr; gap:16px}
@media (max-width: 980px){.card--form{grid-template-columns:1fr}}

.muted{color:var(--muted)}

.form{display:grid; gap:10px; margin-top:10px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width: 700px){.grid2{grid-template-columns:1fr}}
label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px; font-weight:700}
input, select, textarea{width:100%; padding:12px 12px; border-radius:14px; border:1px solid var(--line); background:#fff; outline:none; font-size:14px}
textarea{min-height:92px; resize:vertical}
input:focus, select:focus, textarea:focus{border-color: rgba(37,99,235,.45); box-shadow: 0 0 0 4px rgba(37,99,235,.12)}

.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}

.consent{display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:16px; border:1px solid var(--line); background:#f8fafc}
.consent input{margin-top:3px; width:18px; height:18px}
.consent label{margin:0; font-size:13px; color:var(--muted); font-weight:600}

.form__msg{font-weight:800; font-size:14px}
.fine{font-size:12px; color:var(--muted)}

.list{margin:10px 0 0; padding-left:18px; color:var(--ink)}
.list li{margin:6px 0}

.mini{margin-top:12px; border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow)}
.mini img{display:block; width:100%; height:170px; object-fit:cover}

.tableWrap{overflow:auto; border-radius: var(--radius); border:1px solid var(--line)}
.table{width:100%; border-collapse:collapse; min-width: 720px}
.table th,.table td{padding:12px; text-align:left; border-bottom:1px solid var(--line); font-size:14px}
.table th{background:#f8fafc; color:var(--muted)}

.grid3{display:grid; grid-template-columns: repeat(3,1fr); gap:12px}
@media (max-width: 980px){.grid3{grid-template-columns:1fr}}

.price__big{font-size:34px; font-weight:900; margin:6px 0; color:var(--primary)}

details{border:1px solid var(--line); border-radius: 16px; padding:12px; margin-top:10px; background:#fff}
summary{cursor:pointer; font-weight:900}

.footer{margin-top:18px; padding: 22px 0; border-top:1px solid var(--line); background:#fff}
.footer__inner{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap}
.footer__title{font-weight:900}
.footer__links{display:flex; gap:14px; flex-wrap:wrap}