/* Demo Solaria Hogar · marca ficticia. Manrope. Paleta: verde profundo, amarillo sol, blanco cálido, cielo. */
:root { --s-verde: #0E3B2E; --s-verde-2: #155240; --s-sol: #FFC93C; --s-blanco: #FFFDF6; --s-cielo: #DDF0FF; --s-suave: #4A5D56; --s-linea: rgba(14,59,46,.14); --s-g: clamp(16px, 4vw, 48px); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--s-blanco); color: var(--s-verde); font: 400 17px/1.6 "Manrope", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--s-sol); outline-offset: 3px; }
.s-c { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--s-g); }
.s-h1 { font-weight: 800; font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; }
.s-h2 { font-weight: 800; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); line-height: 1.08; letter-spacing: -.03em; margin-bottom: 18px; }
.s-eti { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--s-sol); margin-bottom: 18px; }
.s-eti--oscuro { color: var(--s-verde-2); }
.s-lead { font-size: 1.18rem; color: #CFE3DA; max-width: 50ch; margin: 20px 0 30px; }
.s-lead--oscuro { color: var(--s-suave); }
.s-aviso { font-size: 14px; background: #FFF6D9; border: 1px dashed #D9A90F; border-radius: 12px; padding: 10px 14px; color: #5C4600; max-width: 560px; margin: 12px 0; }
.s-sec { padding: clamp(56px, 8vw, 104px) 0; }
.s-verde { background: var(--s-verde); color: #fff; }
.s-claro { background: var(--s-cielo); }
.s-fila { display: flex; flex-wrap: wrap; gap: 12px; }
.s-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border-radius: 14px; border: 2px solid transparent; font: 800 16px "Manrope", sans-serif; text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.s-btn:hover { transform: translateY(-2px); }
.s-btn--sol { background: var(--s-sol); color: var(--s-verde); box-shadow: 0 10px 30px -12px rgba(255,201,60,.9); }
.s-btn--linea { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.s-btn--linea-oscuro { border-color: var(--s-verde); color: var(--s-verde); background: transparent; }
.s-btn--bloque { width: 100%; }
.s-cab { background: var(--s-verde); color: #fff; }
.s-cab .s-c { display: flex; justify-content: space-between; align-items: center; min-height: 72px; gap: 16px; }
.s-cab .s-btn { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
.s-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; text-decoration: none; }
.s-logo svg { width: 28px; height: 28px; }
.s-logo span { font-weight: 500; opacity: .75; margin-left: 2px; }
.s-heroe { background: var(--s-verde); color: #fff; padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 8vw, 112px); }
.s-heroe__g { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.s-heroe__img { border-radius: 28px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
.s-puntos { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; color: #CFE3DA; }
.s-puntos li::before { content: "✓ "; color: var(--s-sol); font-weight: 800; }
.s-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.s-card { padding: 28px; border-radius: 22px; background: #fff; border: 1px solid var(--s-linea); }
.s-card h3 { font-weight: 800; font-size: 1.2rem; margin: 14px 0 6px; }
.s-card p { color: var(--s-suave); }
.s-ico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--s-sol); font-weight: 800; font-size: 1.3rem; }
.s-pasos { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.s-pasos li { padding: 28px; border-radius: 22px; background: var(--s-verde-2); }
.s-pasos b { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--s-sol); color: var(--s-verde); }
.s-pasos h3 { font-weight: 800; margin: 14px 0 6px; font-size: 1.2rem; }
.s-pasos p { color: #CFE3DA; }
.s-dos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.s-sim { background: #fff; border: 1px solid var(--s-linea); border-radius: 26px; padding: clamp(22px, 3vw, 36px); display: grid; gap: 16px; box-shadow: 0 30px 60px -40px rgba(14,59,46,.5); }
.s-sim label { font-weight: 700; }
.s-sim__valor { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; }
.s-sim input[type=range] { width: 100%; accent-color: var(--s-verde); height: 28px; }
.s-sim__res { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.s-sim__res div { background: var(--s-cielo); border-radius: 16px; padding: 14px 16px; display: grid; }
.s-sim__res span { font-size: 13px; color: var(--s-suave); }
.s-sim__res b { font-size: 1.5rem; font-weight: 800; }
.s-galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.s-galeria figure { margin: 0; background: #fff; border-radius: 22px; overflow: hidden; }
.s-galeria figure > svg, .s-galeria figure > div { aspect-ratio: 4 / 3; width: 100%; }
.s-galeria figcaption { padding: 12px 16px; font-size: 14px; color: var(--s-suave); }
.s-panel { background: repeating-linear-gradient(90deg, #1F5F8B 0 46px, #BFE3FF 46px 48px), #1F5F8B; background-size: 48px 100%; position: relative; }
.s-panel::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 46px, #BFE3FF 46px 48px), linear-gradient(135deg, rgba(255,255,255,.35), transparent 50%); }
.s-app { background: var(--s-verde); color: #fff; display: grid; align-content: center; justify-items: start; padding: 28px; gap: 6px; }
.s-app b { font-size: 2rem; }
.s-app i { width: 100%; height: 60px; border-radius: 10px; background: linear-gradient(90deg, var(--s-sol) 62%, rgba(255,255,255,.15) 62%); }
.s-faq details { border-bottom: 1px solid var(--s-linea); padding: 18px 0; }
.s-faq summary { cursor: pointer; font-weight: 800; font-size: 1.1rem; }
.s-faq p { color: var(--s-suave); margin-top: 8px; }
.s-cta { background: var(--s-sol); padding: clamp(48px, 7vw, 96px) 0; text-align: center; }
.s-cta p { margin: 0 0 24px; font-size: 1.15rem; }
.s-cta .s-btn--sol { background: var(--s-verde); color: #fff; box-shadow: none; }
.s-pie { background: var(--s-verde); color: #CFE3DA; padding: 36px 0 96px; font-size: 14px; }
.s-pie .s-c { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.s-pie .s-logo { color: #fff; }
.s-sec--form { min-height: 70vh; }
.s-form-c { max-width: 720px; }
.s-progreso { list-style: none; padding: 0; margin: 28px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; counter-reset: p; font-size: 14px; font-weight: 700; color: var(--s-suave); }
.s-progreso li { border-top: 5px solid var(--s-linea); padding-top: 8px; }
.s-progreso li.activo { border-color: var(--s-sol); color: var(--s-verde); }
.s-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 18px; }
.s-form legend { font-weight: 800; font-size: 1.4rem; margin-bottom: 16px; padding: 0; }
.s-opciones { display: grid; gap: 10px; }
.s-opciones label { position: relative; display: block; }
.s-opciones input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.s-opciones label span { display: flex; align-items: center; min-height: 58px; padding: 0 20px; border-radius: 16px; border: 2px solid var(--s-linea); font-weight: 700; background: #fff; }
.s-opciones input:checked + span { border-color: var(--s-verde); background: #F1F8F4; box-shadow: inset 0 0 0 1px var(--s-verde); }
.s-opciones input:focus-visible + span { outline: 3px solid var(--s-sol); outline-offset: 2px; }
.s-campo { display: grid; gap: 6px; }
.s-campo label { font-weight: 700; }
.s-campo input { min-height: 56px; padding: 0 18px; border-radius: 14px; border: 2px solid var(--s-linea); font: inherit; font-size: 17px; background: #fff; color: inherit; }
.s-campo input:focus { outline: none; border-color: var(--s-verde); }
.s-campo [aria-invalid="true"] { border-color: #B42318; }
[data-campo] [data-error] { color: #B42318; font-size: 14px; display: block; }
[data-campo] [data-error]:empty { display: none; }
.s-check { display: flex; gap: 10px; align-items: flex-start; color: var(--s-suave); }
.s-check input { width: 20px; height: 20px; accent-color: var(--s-verde); margin-top: 3px; }
.s-form__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.s-form__nav [data-siguiente] { margin-left: auto; }
.s-ok { width: 88px; height: 88px; margin: 0 auto 24px; }
.js [data-rev] { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.js [data-rev].visible { opacity: 1; transform: none; }
@media (max-width: 860px) { .s-heroe__g, .s-dos, .s-grid3, .s-pasos, .s-galeria { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .s-fila .s-btn { width: 100%; } .s-sim__res { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-rev] { opacity: 1; transform: none; transition: none; } * { transition: none !important; } }