:root{
  --red:#e11d48;
  --blue:#0ea5e9;
  --navy:#0f172a;
  --gold:#f59e0b;
  --paper:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --card:#fafafa;
  --ring:#e5e7eb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Poppins, Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial; color:var(--ink); background:var(--paper); line-height:1.65;}
a{color:var(--red); text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1200px; margin:0 auto; padding:0 1rem}
.header{position:sticky; top:0; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--ring); z-index:50;}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.brand{display:flex; gap:.65rem; align-items:center} .brand .dot{height:12px;width:12px;background:var(--red);border-radius:999px;box-shadow:0 0 0 6px rgba(225,29,72,.12)} .brand .name{font-weight:900; letter-spacing:.2px}
.menu{display:flex; gap:1rem; align-items:center} .menu a{color:var(--muted); font-weight:600}
.btn{display:inline-block; padding:.8rem 1.1rem; border-radius:999px; background:linear-gradient(135deg, var(--red), var(--blue)); color:#fff; font-weight:800; border:1px solid rgba(0,0,0,.05); box-shadow:0 10px 24px rgba(14,165,233,.2);}
.btn.alt{background:#fff; color:var(--ink); border:1px solid var(--ring)}
.hero{padding:3.5rem 0 2rem; position:relative; overflow:hidden; background: radial-gradient(70% 60% at 20% 0%, rgba(14,165,233,.12), transparent 60%), radial-gradient(80% 60% at 100% 0%, rgba(225,29,72,.10), transparent 60%);}
.hero .grid{display:grid; grid-template-columns: 1.3fr .7fr; gap:2rem; align-items:center}
.hero h1{font-size: clamp(2.2rem, 4vw, 3.25rem); margin:.25rem 0; line-height:1.2} .hero p{color:var(--muted)}
.mascot-wrap{text-align:center; position:relative} .mascot{max-width: 360px; width:100%; filter: drop-shadow(0 16px 32px rgba(0,0,0,.12));}
.badge{display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem; border-radius:999px; background:#fff0; border:1px dashed var(--red); color:var(--red); font-weight:800; font-size:.8rem}
.kpis{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.25rem} .k{flex:1 min(220px); text-align:center; background:var(--card); border:1px solid var(--ring); border-radius:20px; padding:1rem; box-shadow:0 6px 18px rgba(0,0,0,.04);} .k strong{font-size:1.4rem}
.section{padding:2.6rem 0} .section h2{font-size: clamp(1.6rem, 2.8vw, 2.1rem)}
.grid{display:grid; gap:1rem} .cols-3{grid-template-columns: repeat(3, 1fr)} .cols-2{grid-template-columns: repeat(2, 1fr)}
@media (max-width:960px){ .hero .grid{grid-template-columns:1fr} .menu{display:none} }
@media (max-width:720px){ .cols-3{grid-template-columns:1fr} .cols-2{grid-template-columns:1fr} }
.card{background:var(--card); border:1px solid var(--ring); border-radius:20px; padding:1rem; position:relative} .card .tag{position:absolute; top:.75rem; right:.75rem; font-size:.7rem; padding:.2rem .5rem; border-radius:999px; background:#fff; border:1px solid var(--ring); color:var(--muted)}
.icon{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg, var(--blue), var(--red)); color:#fff; font-weight:900; box-shadow:0 6px 14px rgba(225,29,72,.16)}
form{display:grid; gap:.85rem; max-width:640px; background:#fff; border:1px solid var(--ring); border-radius:20px; padding:1rem; box-shadow:0 6px 18px rgba(0,0,0,.04)} input, textarea{width:100%; padding:.9rem; border-radius:14px; border:1px solid var(--ring); font:inherit} input:focus, textarea:focus{outline:3px solid rgba(14,165,233,.25); border-color:transparent}
.small{color:var(--muted)} footer{border-top:1px solid var(--ring); padding:2rem 0; color:var(--muted); font-size:.95rem}