:root { --navy:#075b82; --teal:#0b96aa; --ink:#162033; --muted:#657187; --line:#e2e8ee; --wash:#f3f7fa; }
* { box-sizing:border-box; }
body { margin:0; background:var(--wash); color:var(--ink); font-family:Arial,sans-serif; font-size:18px; }
.page-shell { padding:34px 24px 60px; min-height:100vh; }
.hero { max-width:1120px; margin:0 auto 42px; text-align:center; }
.eyebrow { color:var(--teal); font-size:15px; font-weight:800; letter-spacing:.16em; margin:0 0 8px; text-transform:uppercase; }
h1 { color:var(--navy); font-size:clamp(27px,4vw,54px); font-weight:800; line-height:1.13; margin:0; }
.hero > p:not(.eyebrow) { color:#526277; font-size:clamp(17px,2vw,22px); font-weight:600; line-height:1.6; margin:15px auto 0; max-width:850px; }
.hero .optional-note { color:var(--teal); font-size:14px; font-weight:700; margin-top:10px; }
.form-card { background:#fff; border-radius:0 0 14px 14px; box-shadow:0 14px 38px rgba(28,52,80,.12); margin:0 auto; max-width:1120px; min-height:650px; overflow:hidden; position:relative; }
.progress-track { background:#e8edf2; height:14px; width:100%; }
.progress-fill { background:linear-gradient(90deg,#0786aa,#0b6d9a); height:100%; transition:width .25s ease; width:6.667%; }
form { padding:66px clamp(30px,8vw,92px) 58px; }
.step-counter { color:#8d98a8; font-size:15px; font-weight:800; letter-spacing:.1em; margin-bottom:20px; }
.form-step { display:none; min-height:390px; }
.form-step.active { display:block; animation:appear .25s ease; }
.form-step:not([data-step="15"])::after { color:#c4323f; content:'Puedes omitir cualquier pregunta!'; display:block; font-size:15px; font-weight:700; margin-top:24px; }
@keyframes appear { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:none; } }
.step-icon { display:none; }
h2 { font-size:clamp(30px,3.5vw,45px); line-height:1.18; margin:0; font-weight:800; }
.lead { color:#6b7890; font-size:19px; font-weight:500; line-height:1.55; margin:12px 0 29px; max-width:780px; }
label { color:#31405a; display:block; font-size:16px; font-weight:700; margin:0 0 20px; }
input[type="text"], input[type="tel"], textarea { border:1px solid #dce4ec; border-radius:10px; color:var(--ink); display:block; font:500 18px Arial,sans-serif; margin-top:8px; outline:none; padding:16px 17px; transition:border-color .2s,box-shadow .2s; width:100%; }
textarea { min-height:104px; resize:vertical; }
input:focus, textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(11,150,170,.13); }
input::placeholder, textarea::placeholder { color:#a1abb8; }
.choices { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:25px; }
.choices label { align-items:center; border:1px solid #dfe6ed; border-radius:10px; color:#35445e; cursor:pointer; display:flex; font-size:17px; font-weight:600; margin:0; min-height:62px; padding:12px 17px; transition:.18s; }
.choices label:has(input:checked) { background:#effbfd; border-color:var(--teal); box-shadow:inset 0 0 0 1px var(--teal); color:var(--navy); }
.choices input { accent-color:var(--teal); height:17px; margin:0 12px 0 0; width:17px; }
.upload-label { border:1px dashed #aac9d4; border-radius:10px; color:var(--navy); padding:17px; }
input[type="file"] { color:#657187; display:block; font:500 13px Arial,sans-serif; margin-top:10px; max-width:100%; }
small { color:#7b879a; display:block; font-size:12px; font-weight:500; margin-top:10px; }
.form-navigation { align-items:center; display:flex; gap:18px; justify-content:flex-end; margin-top:37px; }
.button { background:var(--navy); border:2px solid var(--navy); border-radius:10px; color:#fff; cursor:pointer; font:800 18px Arial,sans-serif; min-width:155px; padding:17px 24px; transition:.2s; }
.button:hover { background:#064b6c; border-color:#064b6c; transform:translateY(-1px); }
.button-secondary { background:#eef3f6; border-color:#eef3f6; color:var(--navy); }
.button-secondary:hover { background:#e0ebf0; border-color:#e0ebf0; }
.button:disabled { cursor:not-allowed; opacity:.48; transform:none; }
#submit { display:none; }
.contact-error { color:#c03345; font-size:13px; font-weight:600; min-height:19px; }
@media (max-width:650px) { .page-shell { padding:25px 14px 35px; } .hero { margin-bottom:26px; } .form-card { min-height:0; } form { padding:35px 24px 30px; } .form-step { min-height:355px; } .choices { gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); } .choices label { font-size:15px; min-height:56px; padding:10px; } .choices input { margin-right:8px; } .form-navigation { gap:10px; margin-top:20px; } .button { font-size:14px; min-width:0; padding:14px 17px; } }