
:root{
  --primary:#ff7a00;
  --primary-600:#e56e00;
  --secondary:#18233b;
  --bg:#f7f7f9;
  --text:#24324a;
  --ring: rgba(255,122,0,.3);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;color:var(--text);background:var(--bg);}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px;margin-inline:auto;padding:24px}
header.site{position:sticky;top:0;z-index:30;background:linear-gradient(0deg,rgba(255,255,255,.6),rgba(255,255,255,.9));backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid #e5e7eb}
header .row{display:flex;align-items:center;gap:16px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--secondary)}
.brand .logo{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--primary);color:#fff;font-weight:900;box-shadow:0 6px 16px rgba(255,122,0,.35)}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--primary);color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;border:0;cursor:pointer;box-shadow:0 8px 20px var(--ring);transition:all .22s ease}
.cta:hover{background:var(--primary-600);transform:translateY(-1px)}
.cta:focus{outline:3px solid var(--ring);outline-offset:3px}

.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;padding-block:36px}
.badge{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#0f172a;border:1px solid #e5e7eb;border-radius:999px;padding:8px 12px;font-size:.9rem}
.badge .dot{width:8px;height:8px;border-radius:999px;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.16)}
h1{font-size:clamp(1.8rem,2.6vw,2.6rem);line-height:1.15;margin:12px 0 10px;color:var(--secondary)}
.lead{font-size:1.1rem;color:#334155;max-width:60ch}
.hero-card{background:linear-gradient(180deg,#fff, #fdf6f0);border:1px solid #ffe4cc;border-radius:18px;padding:18px;box-shadow:0 10px 30px rgba(27,38,59,.08)}

section{padding-block:36px}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 980px){.hero{grid-template-columns:1fr}.grid.cols-3,.grid.cols-4{grid-template-columns:1fr 1fr}}
@media (max-width: 640px){.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px;box-shadow:0 6px 18px rgba(24,35,59,.06)}
.card h3{margin:4px 0 6px;color:var(--secondary)}
.card.nopad{padding:0;border:none;box-shadow:none;background:transparent}
.icon{width:28px;height:28px;display:grid;place-items:center;border-radius:10px;background:rgba(255,122,0,.12);color:var(--primary)}

.iframe-wrap{position:relative;overflow:hidden;border-radius:16px;border:1px solid #e5e7eb;background:#fff;box-shadow:0 10px 30px rgba(24,35,59,.08)}
.iframe-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #f1f5f9;background:linear-gradient(0deg,#fff,#fff)}
.iframe-top strong{color:var(--secondary)}
.iframe-note{font-size:.9rem;color:#6b7280}
.ratio{position:relative;width:100%;padding-bottom:0}
.ratio iframe{width:100%;height:min(1200px,75vh);border:0}

.chip{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid #e5e7eb;margin:6px 6px 0 0}
.chip:hover{border-color:#d1d5db}

footer{border-top:1px solid #e5e7eb;background:#fff;color:#475569}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
footer small{color:#64748b}
@media (max-width: 900px){footer .cols{grid-template-columns:1fr}}

.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px;align-items:center}
.sep{height:1px;background:linear-gradient(90deg,#fff,#e5e7eb,#fff);margin:10px 0}
.center{text-align:center}
.banner{width:100%;border-radius:12px;display:block}
.breadcrumbs{font-size:.9rem;color:#64748b;margin-bottom:10px}
.badge-local{background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:6px 10px;margin-left:8px}
