:root{
  --orange: #f97316;
  --orange-dark: #c2410c;
  --bg: #f5f6f7;
  --card: #ffffff;
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --width: 720px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:20px;
  color:var(--text);
}
.container{
  width:100%;
  max-width:var(--width);
  background:var(--card);
  border-radius:14px;
  box-shadow:0 8px 30px rgba(10,10,10,0.08);
  padding:28px;
  text-align:center;
}
.top {
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:space-between;
  margin-bottom:8px;
}
.logo img{ max-height:56px; display:block; }
h1{ margin:8px 0 18px; font-size:20px; letter-spacing:0.2px; }
p.lead{ margin:0 0 18px; color:var(--muted); font-size:14px; }
.progress { height:12px; background:#e9e9e9; border-radius:999px; overflow:hidden; margin:18px 0 26px; }
.progress-bar{ height:100%; width:0%; background:linear-gradient(90deg,var(--orange), #ff8a3d); transition:width .35s ease; }
.step { display:none; animation:fadeIn .28s ease; text-align:left; }
.step.active { display:block; }
@keyframes fadeIn { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.field { margin:14px 0; }
label.field-label { display:block; margin-bottom:8px; font-weight:600; font-size:14px; color:var(--text); }
select, .radio-group { width:100%; background:#fff; border:1px solid #e6e6e6; padding:10px 12px; border-radius:8px; font-size:14px; }

/* Grid de checkboxes en dos columnas */
.checkbox-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px 18px;
  background:#fff;
  border:1px solid #e6e6e6;
  padding:12px;
  border-radius:8px;
  margin-bottom:8px;
}
.checkbox-grid label{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 6px;
  border-radius:6px;
  cursor:pointer;
  color:var(--text);
}
.checkbox-grid input[type="checkbox"]{ width:18px; height:18px; }

/* Estilo para inputs deshabilitados y su label */
.checkbox-grid label.disabled {
  opacity: 0.85;
  color: #444;
}
.checkbox-grid label.disabled input[type="checkbox"] {
  accent-color: #bdbdbd;
  cursor: default;
}
.note.included {
  font-size:13px;
  color:#0b6b3a;
  margin-top:8px;
  background:#f0fff4;
  padding:8px 10px;
  border-radius:6px;
  border:1px solid #e6f6ea;
}

/* Radios */
.radio-group { padding:12px; display:flex; flex-direction:column; gap:8px; }
.radio-group label { display:flex; align-items:center; gap:10px; padding:8px 6px; cursor:pointer; border-radius:6px; }

.note { font-size:13px; color:var(--muted); margin-top:6px; }
.actions { display:flex; justify-content:space-between; gap:12px; margin-top:18px; }
.actions .btn { flex:1; padding:10px 14px; border-radius:8px; border:none; cursor:pointer; font-weight:600; }
.btn.secondary { background:#f0f0f0; color:#333; }
.btn.primary { background:var(--orange); color:#fff; }
.btn.primary:hover { background:var(--orange-dark); }
.summary { background:#fbfbfb; border:1px solid #f0f0f0; padding:12px; border-radius:8px; font-size:14px; color:var(--text); }

/* Final box styles */
.final-box {
  background: linear-gradient(180deg, #fff 0%, #fffaf5 100%);
  border: 1px solid #f0e6dd;
  padding:18px;
  border-radius:10px;
  text-align:center;
}
.final-box .plan {
  font-size:20px;
  font-weight:700;
  color:var(--orange);
  margin-bottom:8px;
}
.final-box .one-time {
  font-size:18px;
  font-weight:700;
  margin-top:12px;
}
.final-box .small-note {
  font-size:13px;
  color:var(--muted);
  margin-top:10px;
}

.price { font-size:18px; font-weight:700; margin:12px 0; text-align:center; }
footer.small { text-align:center; margin-top:12px; font-size:13px; color:var(--muted); }
.recotizar { background:transparent; border:1px solid #e6e6e6; padding:8px 10px; border-radius:8px; cursor:pointer; color:var(--muted); }

@media (max-width:700px){
  .container{ padding:18px; border-radius:10px; }
  :root{ --width: 100%;}
  .checkbox-grid{ grid-template-columns: 1fr; } /* una columna en móviles */
  .final-box .plan { font-size:18px; }
  .final-box .one-time { font-size:16px; }
}