:root { --g9:#0b2e20; --g7:#14523a; --g5:#1f8a5b; --lime:#c8e63c; --ink:#16211b; --mut:#5b6b62; --line:#dde5e0; --bg:#f3f6f4; --ok:#15803d; --warn:#b45309; --danger:#c0352b; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--bg); }
.hero { min-height: 100vh; background: linear-gradient(150deg, var(--g9), var(--g7) 70%); color: #fff; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.hero .caja { max-width: 560px; }
.marca { font-weight: 800; letter-spacing: .08em; font-size: 15px; display: inline-flex; align-items: center; gap: 10px; }
.bola { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e9ff7a, var(--lime) 55%, #9cbc12); display: inline-block; }
h1 { font-size: clamp(30px, 6vw, 46px); line-height: 1.1; margin: 22px 0 12px; letter-spacing: -.02em; }
.hero p { color: #cfe3d8; font-size: 17px; line-height: 1.5; }
.btn { display: inline-block; background: var(--lime); color: var(--g9); font-weight: 800; border: 0; border-radius: 12px; padding: 12px 20px; text-decoration: none; cursor: pointer; font-size: 15px; }
.chica { font-size: 13px; color: #a9c8b7; margin-top: 28px; }