:root {
  --ground: #0b1512;
  --ground-2: #10221c;
  --paper: #f5f7f4;
  --white: #ffffff;
  --brand: #0b5b4b;
  --brand-deep: #083d32;
  --brand-pale: #e4efeb;
  --gold: #f6b33d;
  --gold-pale: #fff3d9;
  --ink: #0f1712;
  --ink-soft: #526159;
  --mist: #dce8e2;
  --line: #d9e2dd;
  --line-dark: rgba(255, 255, 255, .14);
  --danger: #9b2c24;
  --success: #16614e;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --max: 1180px;
  /* Ancho útil solo del hero -- más generoso que --max a propósito: en
     pantallas anchas (~1600px) le da a la imagen el espacio real que pide
     ser protagonista (~45-48% del ancho útil), sin ensanchar el resto del
     sitio (que sigue usando --max). */
  --hero-max: 1440px;
  --radius: 22px;
  --shadow: 0 24px 70px rgba(9, 30, 24, .13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.55; -webkit-font-smoothing: antialiased; }
body, button, input, select { font: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { color: inherit; }
button, label, select { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
::selection { background: var(--gold); color: #251800; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
h2 { font-size: clamp(2rem, 6.4vw, 3.55rem); }

/* Revelado al hacer scroll (a prueba de fallos: solo se oculta con JS activo,
   igual que en la landing principal — si el script no corre, el contenido
   queda visible por default en vez de perderse). */
.reveal { transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1); }
html.js .reveal { opacity: 0; transform: translateY(22px); }
html.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .06s; } .reveal.d2 { transition-delay: .14s; } .reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .34s; } .reveal.d5 { transition-delay: .46s; }
.content-wrap { width: min(100% - 40px, var(--max)); margin-inline: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--brand); font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { width: 25px; height: 1px; background: currentColor; content: ''; }
.button { min-height: 48px; border: 1px solid transparent; border-radius: 13px; padding: 13px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 750; letter-spacing: -.01em; cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.button:hover { transform: translateY(-2px); }
.button:disabled { opacity: .58; cursor: wait; transform: none; }
.button-primary { background: var(--gold); color: #2b1b00; box-shadow: 0 12px 30px rgba(246, 179, 61, .22); }
.button-primary:hover { background: #ffc45b; }
.button-secondary { border-color: var(--line); background: var(--white); color: var(--brand-deep); }
.button-secondary:hover { border-color: var(--brand); }
.button-whatsapp { background: #25d366; color: #063c20; }
.button-large { min-height: 56px; padding-inline: 28px; text-transform: uppercase; font-size: .96rem; letter-spacing: .035em; }

.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; color: var(--white); transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease; border-bottom: 1px solid transparent; }
.site-nav.solid { background: rgba(11, 21, 18, .88); backdrop-filter: blur(14px); border-color: var(--line-dark); }
.nav-inner { width: min(100% - 32px, var(--max)); min-height: 76px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line-dark); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { width: 38px; flex: 0 0 auto; color: var(--gold); filter: drop-shadow(0 0 8px rgba(246, 179, 61, .28)); }
.brand span { display: grid; line-height: 1.05; }
.brand b { font-family: var(--display); font-size: 1.05rem; }
.brand small { margin-top: 3px; color: var(--mist); font-size: .7rem; }
.nav-cta { min-height: 42px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 999px; padding: 9px 15px; font-size: .88rem; font-weight: 700; }
.nav-cta:hover { border-color: var(--gold); }

.hero { min-height: 780px; padding: 116px max(20px, calc((100vw - var(--hero-max)) / 2)) 72px; background: var(--ground); color: var(--white); display: grid; align-items: center; gap: 44px; overflow: hidden; position: relative; isolation: isolate; }
.hero::before { position: absolute; z-index: -1; width: 460px; height: 460px; right: -250px; top: 70px; border: 1px solid rgba(246, 179, 61, .14); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255, 255, 255, .018), 0 0 0 160px rgba(255, 255, 255, .012); content: ''; }
.hero .eyebrow { color: var(--gold); }
.hero-copy { max-width: 650px; }
/* max-width en `ch` (escala con el propio font-size, no un px fijo): sin esto,
   "acondicionado" -- una palabra larga sin punto de quiebre -- se salía del
   contenedor a partir de ~880px de ancho y quedaba cortada visualmente detrás
   de la foto del hero. Mismo criterio que usa .hero h1 en la landing principal
   (max-width:15ch) — bug real encontrado 2026-08-14 revisando la página. */
/* overflow-wrap es la garantía real (parte la palabra si de plano no cabe, en
   vez de desbordar el contenedor) -- max-width/font-size a solas no alcanzan
   porque la columna de texto del grid es más angosta que cualquier ancho fijo
   que se le ponga al h1 (verificado: a 1920px la columna mide ~553px, mucho
   menos que los 650px que "acondicionado" necesita incluso ya reducida la
   fuente). Confirmado con getBoundingClientRect() en Chrome real. */
.hero h1 { margin-bottom: 24px; max-width: 16ch; overflow-wrap: break-word; word-break: break-word; font-size: clamp(3rem, 10.5vw, 5.4rem); }
.hero h1 span { color: var(--gold); }
.hero-lead { max-width: 49ch; margin-bottom: 24px; color: var(--mist); font-size: clamp(1.08rem, 3.3vw, 1.35rem); }
.hours-line { margin-bottom: 9px; display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: var(--white); font-family: var(--display); font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; }
.hours-line i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.hero-support { margin-bottom: 28px; color: rgba(220, 232, 226, .75); font-size: .95rem; }
.microcopy { max-width: 54ch; margin: 14px 0 0; color: rgba(220, 232, 226, .66); font-size: .82rem; }
/* SIN margin-inline:auto a propósito: en un grid item, un margen automático
   en el eje inline cambia su sizing de "stretch" (llenar la celda) a
   "fit-content" -- colapsaba el visual al ancho del texto corto de la nota
   (bug real encontrado verificando en Chrome). El centrado VERTICAL ya lo
   resuelve `align-items:center` en `.hero` (grid container); no hace falta
   nada más acá. */
.hero-visual { position: relative; max-width: 680px; }
/* Esquema conceptual (no foto): aspect-ratio 16/9 coincide exacto con el
   PNG generado (1672x941) y object-fit:contain asegura que nunca se recorte
   ningun elemento del diagrama (a diferencia de una foto, perder el poste
   desconectado en un recorte rompería el mensaje). */
.hero-photo { margin: 0; border: 1px solid var(--line-dark); border-radius: 28px; background: var(--ground-2); overflow: hidden; box-shadow: 0 28px 80px rgba(0, 0, 0, .32); transform: rotate(1deg); }
/* height:auto es obligatorio acá: el atributo HTML height="941" del <img>
   (necesario para no reservar el layout equivocado antes de cargar) gana
   sobre aspect-ratio si no se anula explícitamente -- bug real encontrado
   probando en Chrome (computedStyle.height daba 941px literales en vez de
   calcularse desde el ancho real). */
.hero-photo img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--ground); }
/* Nota discreta FUERA de la tarjeta de la imagen a propósito (antes era un
   figcaption con fondo oscuro integrado, compitiendo visualmente con la
   imagen como si fuera parte de la misma tarjeta) -- el disclaimer de
   honestidad debe quedar legible pero secundario, no protagonista. */
.hero-visual-note { margin: 12px 2px 0; color: rgba(220, 232, 226, .55); font-size: .76rem; }

/* Franja compacta de confianza entre el hero y el configurador -- a propósito
   una sola línea de texto, sin imágenes ni cifras propias, para no retrasar el
   CTA. Las cifras/galería reales viven más abajo en .experience-section. */
.trust-strip { padding: 16px 0; background: var(--brand-pale); border-bottom: 1px solid var(--line); }
.trust-strip-inner { text-align: center; }
.trust-strip p { margin: 0; color: var(--brand-deep); font-size: .92rem; }
.trust-strip b { color: var(--ink); }

.config-section { padding: 78px 0 90px; background: var(--paper); }
.section-heading { max-width: 730px; margin-bottom: 38px; }
.section-heading.centered { width: min(100% - 40px, 760px); margin-inline: auto; text-align: center; }
.section-heading h2 { margin-bottom: 16px; }
.section-heading > p:last-child { margin-bottom: 0; color: var(--ink-soft); font-size: 1.03rem; }
.section-heading.centered .eyebrow { justify-content: center; }
.wizard-card { width: min(100% - 24px, 930px); min-height: 600px; margin: 38px auto 0; border: 1px solid var(--line); border-radius: 26px; padding: 22px 18px 24px; background: var(--white); box-shadow: var(--shadow); }
.wizard-progress { margin-bottom: 34px; }
.progress-copy { margin-bottom: 8px; display: flex; justify-content: space-between; gap: 12px; color: var(--ink-soft); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.progress-track { height: 6px; border-radius: 999px; background: #edf1ef; overflow: hidden; }
.progress-track span { width: 10%; height: 100%; display: block; border-radius: inherit; background: var(--gold); transition: width .25s ease; }
.wizard-step { animation: step-in .24s ease-out; }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } }
.step-kicker { margin-bottom: 6px; color: var(--brand); font-size: .76rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.wizard-step > h3, .success-state h3 { max-width: 760px; margin-bottom: 15px; font-size: clamp(1.75rem, 7vw, 2.7rem); }
.step-intro, .step-help { max-width: 680px; color: var(--ink-soft); }
.step-help { margin: 20px 0 0; border-left: 3px solid var(--gold); padding-left: 13px; font-size: .9rem; }

fieldset { min-width: 0; margin: 0 0 30px; border: 0; padding: 0; }
legend { width: 100%; margin-bottom: 11px; font-family: var(--display); font-size: 1rem; font-weight: 700; letter-spacing: -.015em; }
.option-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.option-card, .choice { min-height: 58px; border: 1px solid var(--line); border-radius: 15px; padding: 14px; background: var(--white); display: flex; align-items: center; cursor: pointer; position: relative; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.option-card:hover, .choice:hover { border-color: #91b3a8; transform: translateY(-1px); }
.option-card:has(input:checked), .choice:has(input:checked) { border-color: var(--brand); background: var(--brand-pale); box-shadow: inset 0 0 0 1px var(--brand); }
.option-card:focus-within, .choice:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.option-card input, .choice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.option-card span, .choice span { width: 100%; }
.option-card span { display: grid; gap: 2px; }
.option-card b { font-family: var(--display); font-size: 1.03rem; line-height: 1.15; }
.option-card small { color: var(--ink-soft); font-size: .78rem; }
.choice { min-height: 50px; justify-content: center; padding: 11px 9px; font-weight: 700; text-align: center; }
.air-fields { margin-top: 26px; }
.photo-field { border: 1px dashed #9db8af; border-radius: 16px; padding: 16px; background: #f8faf9; }
.photo-field label { margin-bottom: 11px; display: grid; }
.photo-field label small { color: var(--ink-soft); font-weight: 400; }
.photo-field input { width: 100%; min-height: 44px; }
.photo-field input::file-selector-button { min-height: 40px; margin-right: 10px; border: 0; border-radius: 10px; padding: 8px 12px; background: var(--brand); color: var(--white); font-weight: 700; cursor: pointer; }
.photo-note { margin: 7px 0 0; color: var(--ink-soft); font-size: .78rem; }
.photo-note.error { color: var(--danger); }
.photo-note.selected { color: var(--success); font-weight: 650; }

.field-row, .contact-fields { display: grid; gap: 16px; margin-top: 26px; }
.field { display: grid; gap: 7px; }
.field > span { font-weight: 700; }
.field input, .field select { width: 100%; min-height: 52px; border: 1px solid var(--line); border-radius: 13px; padding: 11px 13px; background: var(--white); font-size: 16px; }
.field input:focus, .field select:focus { border-color: var(--brand); outline: 3px solid rgba(246, 179, 61, .45); }
.field select:disabled { background: #edf1ef; color: #718078; }
.consent { margin-top: 21px; border-radius: 13px; padding: 14px; background: var(--brand-pale); display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start; cursor: pointer; font-size: .88rem; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brand); }
.consent a { color: var(--brand-deep); text-decoration: underline; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wizard-message { min-height: 25px; margin: 22px 0 0; color: var(--danger); font-size: .9rem; font-weight: 650; }
.wizard-actions { margin-top: 10px; display: flex; justify-content: flex-end; gap: 10px; }
.wizard-actions .button { flex: 1; }

.summary { display: grid; gap: 16px; margin-top: 24px; }
.summary-primary { border-radius: 16px; padding: 20px; background: var(--ground); color: var(--white); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.summary-primary span { color: var(--mist); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; }
.summary-primary b { font-family: var(--display); font-size: 1.35rem; }
.summary-airs { display: grid; gap: 10px; }
.summary-air { border: 1px solid var(--line); border-radius: 15px; padding: 15px; }
.summary-air h4 { margin: 0 0 8px; font-family: var(--display); font-size: 1rem; }
.summary-air p { margin: 3px 0; color: var(--ink-soft); font-size: .88rem; }
.summary-details { margin: 0; border-top: 1px solid var(--line); }
.summary-details div { border-bottom: 1px solid var(--line); padding: 12px 2px; display: grid; gap: 2px; }
.summary-details dt { color: var(--ink-soft); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.summary-details dd { margin: 0; font-weight: 700; }
.review-note { margin: 20px 0 0; border-radius: 13px; padding: 14px; background: var(--gold-pale); color: #5e410d; font-size: .84rem; }
.success-state { max-width: 680px; margin: 20px auto; text-align: center; }
.success-mark { width: 58px; height: 58px; margin: 0 auto 17px; border-radius: 50%; background: var(--brand); color: var(--white); display: grid; place-items: center; font-family: var(--display); font-size: 1.8rem; }
.success-state > p:not(.step-kicker):not(.request-code) { color: var(--ink-soft); }
.request-code { margin: 23px auto; border: 1px solid var(--line); border-radius: 13px; padding: 13px 18px; display: table; }
.request-code b { margin-left: 6px; color: var(--brand); font-family: var(--display); font-size: 1.15rem; }
.success-summary { margin-bottom: 23px; color: var(--ink-soft); font-size: .9rem; }
.submit-error { margin-top: 18px; border: 1px solid #e4b4af; border-radius: 14px; padding: 16px; background: #fff5f3; color: var(--danger); text-align: center; }
.submit-error p { margin-bottom: 12px; }

.process-section, .storage-section, .final-cta { padding: 82px 0; background: var(--ground); color: var(--white); }
.process-section .eyebrow, .storage-section .eyebrow, .final-cta .eyebrow { color: var(--gold); }
.process-list { margin: 0; border-top: 1px solid var(--line-dark); padding: 0; list-style: none; }
.process-list li { border-bottom: 1px solid var(--line-dark); padding: 24px 0; display: grid; grid-template-columns: 52px 1fr; gap: 15px; }
.process-list li > span { color: transparent; font-family: var(--display); font-size: 1.9rem; font-weight: 700; line-height: .9; -webkit-text-stroke: 1px var(--gold); }
.process-list h3 { margin-bottom: 6px; font-size: 1.22rem; }
.process-list p { margin: 0; color: var(--mist); }

/* Refuerzo visual del retiro en oficina + showroom (pasos 05/06 de "Cómo
   recibes tu sistema"). Composiciones DISTINTAS por breakpoint (no un mismo
   recorte escalado): mobile es una foto vertical propia, desktop es 16:9.
   aspect-ratio explícito por breakpoint evita CLS en ambos casos. */
.showroom-section { padding: 78px 0; background: var(--white); }
.showroom-grid { display: grid; gap: 28px; align-items: center; }
.showroom-photo { margin: 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.showroom-photo img { width: 100%; height: auto; aspect-ratio: 1122 / 1402; object-fit: cover; display: block; }
.showroom-photo figcaption { padding: 10px 14px; background: var(--white); color: var(--ink-soft); font-size: .75rem; }
.showroom-copy h2 { margin-bottom: 14px; }
.showroom-copy > p { margin-bottom: 20px; color: var(--ink-soft); }
.showroom-points { margin: 0; padding-left: 20px; color: var(--ink); font-weight: 650; font-size: .92rem; line-height: 1.9; }

/* Incluye / no incluye / extras -- 3 tarjetas iguales, sin jerarquía de tamaño
   entre ellas (ninguna "gana" visualmente), solo color de borde para
   distinguir a simple vista qué categoría es cada una. */
.scope-section { padding: 70px 0 82px; background: var(--paper); }
.scope-grid { display: grid; gap: 16px; margin-top: 10px; }
.scope-card { border: 1px solid var(--line); border-top: 4px solid var(--line); border-radius: 18px; padding: 22px 20px; background: var(--white); }
.scope-card h3 { margin-bottom: 14px; font-family: var(--display); font-size: 1.1rem; }
.scope-card ul { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }
.scope-card li { margin-bottom: 6px; }
.scope-card li:last-child { margin-bottom: 0; }
.scope-card--yes { border-top-color: var(--brand); }
.scope-card--yes h3 { color: var(--brand-deep); }
.scope-card--no { border-top-color: var(--ink-soft); }
.scope-card--extra { border-top-color: var(--gold); }

.development-section, .experience-section, .faq-section { padding: 82px 0; }
.split { display: grid; gap: 36px; }
.split h2, .storage-grid h2 { margin-bottom: 20px; }
.lead-copy { color: var(--ink); font-size: 1.15rem; }
.split > div > p:last-child, .storage-grid > div p { color: var(--ink-soft); }
.transparency-card { border-top: 5px solid var(--gold); border-radius: 0 0 18px 18px; padding: 24px; background: var(--white); box-shadow: var(--shadow); }
.transparency-card > span { color: var(--brand); font-size: .75rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.transparency-card h3 { margin: 10px 0 12px; font-size: 1.5rem; }
.transparency-card p { margin: 0; color: var(--ink-soft); }

.experience-section { background: var(--white); }

/* Franja de cifras reales de Nueva Era Solar (no de Aire Solar -- misma
   distinción honesta que ya declara el proof-grid de abajo). Reutiliza los
   mismos números ya publicados y verificados en la landing principal. */
.proof-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 26px 0 6px; padding-top: 22px; border-top: 1px solid var(--line); }
.proof-stats .item { display: flex; align-items: baseline; gap: 7px; font-size: .9rem; color: var(--ink-soft); }
.proof-stats .n { font-family: var(--display); font-weight: 700; font-size: 1.22rem; color: var(--ink); letter-spacing: -.01em; }

.proof-grid { display: grid; gap: 14px; }
.proof-grid figure { margin: 0; border-radius: 18px; background: var(--ground); color: var(--white); overflow: hidden; }
.proof-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.proof-grid figcaption { padding: 15px; display: grid; }
.proof-grid figcaption b { font-family: var(--display); }
.proof-grid figcaption span { color: var(--gold); font-size: .82rem; }
.proof-grid figcaption small { margin-top: 6px; color: var(--mist); line-height: 1.4; }
.proof-feature img { aspect-ratio: 16 / 9; }

/* Tira de fotos adicionales, scroll horizontal -- mismo patrón que
   .gallery-row de la landing principal. */
.gallery-row { display: flex; gap: 14px; margin-top: 22px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.gallery-row::-webkit-scrollbar { display: none; }
.g-card { flex: 0 0 78%; max-width: 260px; scroll-snap-align: center; border-radius: 16px; overflow: hidden; position: relative; aspect-ratio: 3 / 2; transition: transform .35s ease, box-shadow .35s ease; }
.g-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(6, 16, 13, .24); }
.g-card img { width: 100%; height: 100%; object-fit: cover; }
.g-card figcaption { position: absolute; inset: auto 0 0 0; padding: 20px 12px 10px; font-size: .78rem; color: #fff; background: linear-gradient(to top, rgba(7, 17, 14, .88), transparent); }

.storage-grid { display: grid; gap: 34px; align-items: center; }
.storage-grid figure { margin: 0; border: 1px solid var(--line-dark); border-radius: 20px; overflow: hidden; }
.storage-grid figure img { width: 100%; max-height: 500px; object-fit: cover; }
.storage-grid figcaption { padding: 12px 14px; color: var(--mist); font-size: .75rem; }
.storage-grid > div p { color: var(--mist); }

.faq-section { background: var(--paper); }
.faq-list { max-width: 820px; margin-inline: auto; display: grid; gap: 10px; }
.faq-list details { border: 1px solid var(--line); border-radius: 15px; padding: 0 18px; background: var(--white); }
.faq-list details[open] { border-color: #8aafa3; }
.faq-list summary { min-height: 62px; padding: 17px 35px 17px 0; display: flex; align-items: center; cursor: pointer; position: relative; font-family: var(--display); font-weight: 700; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; right: 4px; width: 10px; height: 10px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg); content: ''; transition: transform .2s ease; }
.faq-list details[open] summary::after { transform: rotate(225deg); }
.faq-list details p { margin: -2px 0 19px; color: var(--ink-soft); }

.final-cta { text-align: center; }
.final-cta .content-wrap { max-width: 800px; }
.final-cta .eyebrow { justify-content: center; }
.final-cta h2 { margin-bottom: 18px; }
.final-cta p:not(.eyebrow) { margin-bottom: 28px; color: var(--mist); font-size: 1.05rem; }
.site-footer { padding: 45px 0; background: #07110e; color: var(--mist); text-align: center; }
.footer-brand { display: grid; justify-items: center; margin-bottom: 13px; }
.footer-logo { width: 72px; height: auto; margin-bottom: 10px; }
.footer-brand b { color: var(--white); font-family: var(--display); font-size: 1.3rem; }
.footer-brand span { color: var(--gold); font-size: .75rem; }
.site-footer p { margin-bottom: 10px; font-size: .86rem; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; color: var(--white); font-weight: 650; }
.footer-note { max-width: 560px; margin: 18px auto 0; color: rgba(220, 232, 226, .58); font-size: .75rem !important; }
.noscript { padding: 15px; background: var(--gold); color: #2b1b00; text-align: center; font-weight: 700; }

/* CTA flotante persistente -- visible tras pasar el hero, mismo patrón que el
   flotante de WhatsApp de la landing principal, pero llevando al configurador
   (la acción primaria de esta página) en vez de a WhatsApp directo. */
.config-float { position: fixed; right: 18px; bottom: 18px; z-index: 45; min-height: 48px; border-radius: 100px; padding: 13px 20px; background: var(--gold); color: #2b1b00; font-weight: 750; font-size: .92rem; display: flex; gap: 9px; align-items: center; box-shadow: 0 12px 30px rgba(0, 0, 0, .28); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s ease, visibility .2s ease, transform .2s ease; }
.config-float.visible { opacity: 1; visibility: visible; transform: none; }
.config-float:hover { transform: translateY(-2px); }
.config-float svg { width: 18px; height: 18px; fill: currentColor; }

@media (min-width: 540px) {
  .wizard-card { padding: 28px 30px 30px; }
  .option-grid-2, .option-grid-3, .option-grid-4, .option-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wizard-actions .button { flex: 0 1 190px; }
  .summary-details div { grid-template-columns: 150px 1fr; align-items: baseline; gap: 18px; }
}

@media (min-width: 760px) {
  /* 53:47 aprox (texto:imagen) -- la imagen es protagonista, no una tarjeta
     secundaria empujada a un 40% o menos. */
  .hero { min-height: 720px; grid-template-columns: minmax(0, 1.13fr) minmax(280px, 1fr); gap: 54px; }
  .hero h1 { font-size: clamp(4rem, 6.4vw, 5.4rem); }
  .option-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .option-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .option-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .field-row { grid-template-columns: 1fr 1fr; }
  .contact-fields { grid-template-columns: 1fr 1fr; }
  .contact-fields .field:last-child { grid-column: 1 / -1; }
  .summary-airs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-list li { grid-template-columns: 80px 1fr; gap: 28px; padding: 30px 0; }
  .process-list li > span { font-size: 2.7rem; }
  .split { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 70px; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-feature { grid-column: 1 / -1; }
  .storage-grid { grid-template-columns: .85fr 1.15fr; gap: 70px; }
  .g-card { flex-basis: 260px; }
  .scope-grid { grid-template-columns: repeat(3, 1fr); }
  .showroom-grid { grid-template-columns: 1.05fr .95fr; gap: 50px; }
  .showroom-photo img { aspect-ratio: 1672 / 941; }
}

@media (min-width: 1000px) {
  .hero { gap: 80px; }
  .wizard-card { padding: 34px 46px 38px; }
  .option-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .contact-fields { grid-template-columns: repeat(3, 1fr); }
  .contact-fields .field:last-child { grid-column: auto; }
  .proof-grid { grid-template-columns: 1.3fr .7fr .7fr; }
  .proof-feature { grid-column: auto; grid-row: span 1; }
  .proof-grid img, .proof-feature img { height: 100%; min-height: 280px; aspect-ratio: auto; }
  .proof-grid figure { display: grid; grid-template-rows: minmax(280px, 1fr) auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-photo { transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}