* { box-sizing: border-box; }
body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f4f7f6; margin: 0; }
.card { width: 90%; max-width: 700px; padding: 40px; background: white; border-radius: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.input-group { display: flex; align-items: center; gap: 20px; margin-bottom: 25px; font-weight: bold; }
input[type="range"] { flex-grow: 1; accent-color: #6366f1; height: 8px; cursor: pointer; }
input[type="number"] { width: 80px; padding: 10px; border: 2px solid #e5e7eb; border-radius: 12px; text-align: center; }
.valor-imc { font-size: 70px; color: #4ade80; font-weight: bold; margin: 10px 0; }
.grafica-container { position: relative; margin-top: 50px; }
.grafica { display: flex; height: 60px; border-radius: 12px; overflow: hidden; background: #eee; }
.rango { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; }
.rango:nth-child(1) { background: #a3c6ff; }
.rango:nth-child(2) { background: #a5f3bc; }
.rango:nth-child(3) { background: #fce079; }
.rango:nth-child(4) { background: #f59e0b; }
.rango:nth-child(5) { background: #fb923c; }
.rango:nth-child(6) { background: #f87171; }
.selector { position: absolute; top: -15px; height: 80px; width: 16.66%; border: 4px solid #312e81; border-bottom: none; border-radius: 12px 12px 0 0; transition: left 0.3s ease; pointer-events: none; z-index: 10; }

@media (max-width: 480px) {
    .input-group { flex-direction: column; align-items: stretch; }
    .grafica { height: 100px; flex-wrap: wrap; }
    .rango { flex: 50%; }
    .selector { width: 33.33%; height: 110px; }
}