/* =============================================================
   RenovaTech Energía Solar — "Un día de sol en tu techo"
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Marca (tomados del logo) */
  --verde-renova: #5E9A2C;
  --verde-texto: #3F7419;
  --verde-hondo: #2E5712;
  --verde-hoja: #8CC63F;
  --azul-hoja: #3E7BB2;
  --azul-panel: #12304D;
  --naranja: #E1740B;
  --ambar: #F2A007;
  --amarillo-sol: #FFD21F;

  /* Neutros */
  --papel: #FBF8F1;
  --tinta: #1C1C1A;
  --gris: #565B57;
  --linea: #E4DED1;
  --noche: #0D1B2A;
  --noche-2: #132538;
  --crepusculo: #1C3550;

  /* Capítulos del día */
  --cielo-manana: #EAF2F9;
  --cielo-mediodia: #FFFBEF;

  /* Tipografía */
  --f-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --f-text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-small: 0.9375rem;
  --fs-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --fs-h1: clamp(2.875rem, 1.4rem + 6vw, 6.25rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.7vw, 3.75rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);

  /* Espacio (escala de 8) */
  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 3rem; --s-6: 4rem; --s-7: 6rem; --s-8: 8rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 10rem);
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --radius: 22px;
  --radius-lg: 28px;
  --header-h: 72px;

  /* Movimiento */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Sol (cambia por capítulo) */
  --sun: var(--ambar);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--f-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--amarillo-sol); color: var(--tinta); }

:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; border-radius: 6px; }

[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--tinta); color: #fff; padding: .75rem 1rem; border-radius: 10px; text-decoration: none; font-weight: 600; }
.skip-link:focus { top: 1rem; }

.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--lg { width: 2rem; height: 2rem; }

.h2 { font-size: var(--fs-h2); line-height: 1.04; }
.h3 { font-size: var(--fs-h3); line-height: 1.15; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--gris); max-width: 38ch; }

/* ---------- Botones ---------- */
.btn {
  --bg: var(--verde-texto); --fg: #fff; --bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .75rem 1.35rem;
  border-radius: 999px; border: 1.5px solid var(--bd);
  background: var(--bg); color: var(--fg);
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn--primary { --bg: var(--verde-texto); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover { --bg: var(--verde-hondo); } }
.btn--ghost { --bg: transparent; --fg: var(--tinta); --bd: rgba(28,28,26,.28); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { --bd: var(--tinta); --bg: rgba(255,255,255,.5); } }
.btn--light { --bg: var(--papel); --fg: var(--verde-hondo); }
@media (hover: hover) and (pointer: fine) { .btn--light:hover { --bg: #fff; } }
.btn--dark { --bg: var(--tinta); --fg: #fff; }
@media (hover: hover) and (pointer: fine) { .btn--dark:hover { --bg: #000; } }
.btn--outline-light { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.4); }
@media (hover: hover) and (pointer: fine) { .btn--outline-light:hover { --bd: #fff; --bg: rgba(255,255,255,.08); } }
.btn--sm { min-height: 44px; padding: .55rem 1.05rem; font-size: .9375rem; }
.btn--lg { min-height: 56px; padding: .95rem 1.6rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled { background: rgba(251, 248, 241, .94); box-shadow: 0 1px 0 rgba(28,28,26,.08); }
@supports (backdrop-filter: blur(8px)) { .site-header.is-scrolled { background: rgba(251, 248, 241, .86); backdrop-filter: saturate(1.4) blur(10px); } }
.site-header__inner { height: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: var(--s-3); }
.brand { display: block; margin-right: auto; border-radius: 8px; }
.brand img { width: clamp(168px, 14vw + 70px, 216px); height: auto; }
.nav__list { display: flex; gap: clamp(.75rem, 1.5vw, 1.75rem); list-style: none; margin: 0; padding: 0; }
.nav__list a { text-decoration: none; font-weight: 500; font-size: .98rem; padding: .5rem .1rem; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav__list a:hover { background-size: 100% 1.5px; } }
.nav__cta-mobile { display: none; }
.menu-toggle { display: none; }

@media (max-width: 1023.98px) {
  .header-cta { display: none; }
  .menu-toggle {
    display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
    border: 1.5px solid rgba(28,28,26,.18); background: rgba(251,248,241,.7); cursor: pointer;
  }
  .menu-toggle .icon { width: 24px; height: 24px; grid-area: 1 / 1; transition: opacity .2s ease, transform .2s var(--ease-out); }
  .menu-toggle .icon--close { opacity: 0; transform: rotate(-45deg) scale(.9); }
  .menu-open .menu-toggle .icon--open { opacity: 0; transform: rotate(45deg) scale(.9); }
  .menu-open .menu-toggle .icon--close { opacity: 1; transform: none; }
  .menu-open .menu-toggle { background: var(--papel); }
  .nav__list {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: -1;
    flex-direction: column; gap: 0; padding: var(--s-3) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom));
    background: var(--verde-texto); color: #fff;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility 0s linear .22s;
  }
  .menu-open .nav__list { opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--ease-out), transform .22s var(--ease-out); }
  .menu-open .site-header { background: var(--papel); }
  .nav__list li { border-bottom: 1px solid rgba(255,255,255,.18); }
  .nav__list a { display: block; padding: 1.05rem 0; font-family: var(--f-display); font-size: 1.75rem; font-weight: 700; background: none; }
  .nav__list .nav__cta-mobile { display: block; border: 0; margin-top: auto; }
  .nav__cta-mobile .btn { --bg: var(--papel); --fg: var(--verde-hondo); font-family: var(--f-text); font-size: 1.0625rem; padding: 1rem; }
}

/* ---------- Arco del sol (global) ---------- */
body[data-chapter="amanecer"] { --sun: #F2A007; }
body[data-chapter="manana"] { --sun: #FFC21F; }
body[data-chapter="mediodia"] { --sun: #FFD21F; }
body[data-chapter="tarde"] { --sun: #F2A007; }
body[data-chapter="atardecer"] { --sun: #E1740B; }
body[data-chapter="noche"] { --sun: #E8EEF5; }

.sun-arc { display: none; }
.sun-progress { display: none; }
@media (min-width: 1024px) {
  .js .sun-arc {
    position: fixed; z-index: 40; right: 22px; bottom: 22px; width: 112px;
    display: grid; justify-items: center; gap: 2px; pointer-events: none;
    padding: 8px 8px 6px; border-radius: 16px; background: rgba(251,248,241,.72);
    box-shadow: 0 1px 0 rgba(28,28,26,.06);
    transition: background-color .4s ease;
  }
  @supports (backdrop-filter: blur(6px)) { .js .sun-arc { backdrop-filter: blur(8px); } }
  body[data-chapter="noche"] .sun-arc, body[data-chapter="tarde"] .sun-arc { background: rgba(13,27,42,.55); }
  .sun-arc__svg { width: 96px; height: 48px; overflow: visible; }
  .sun-arc__track { fill: none; stroke: rgba(28,28,26,.18); stroke-width: 1.5; stroke-dasharray: 2 4; }
  .sun-arc__done { fill: none; stroke: var(--sun); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--day, 0)); transition: stroke .4s ease; }
  .sun-arc__horizon { stroke: rgba(28,28,26,.25); stroke-width: 1; }
  .sun-arc__sun circle { fill: var(--sun); transition: fill .4s ease; }
  .sun-arc__glow { opacity: .25; }
  .sun-arc__label { font-size: .75rem; font-weight: 600; color: var(--gris); letter-spacing: .01em; transition: color .4s ease; }
  body[data-chapter="noche"] .sun-arc__label, body[data-chapter="tarde"] .sun-arc__label { color: rgba(255,255,255,.85); }
  body[data-chapter="noche"] .sun-arc__track, body[data-chapter="tarde"] .sun-arc__track { stroke: rgba(255,255,255,.3); }
  body[data-chapter="noche"] .sun-arc__horizon, body[data-chapter="tarde"] .sun-arc__horizon { stroke: rgba(255,255,255,.35); }
}
@media (max-width: 1023.98px) {
  .js .sun-progress { display: block; position: fixed; z-index: 60; inset: 0 0 auto 0; height: 3px; pointer-events: none; }
  .sun-progress span { display: block; height: 100%; background: var(--sun); transform-origin: 0 50%; transform: scaleX(var(--day, 0)); transition: background-color .4s ease; }
}

/* ---------- 1 · Hero (amanecer) ---------- */
.hero {
  position: relative; isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4.5rem));
  padding-bottom: clamp(4rem, 8vw, 7rem);
  overflow: clip;
}
.hero__sky {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 55% at 72% 100%, rgba(255, 196, 92, .55), rgba(255, 196, 92, 0) 70%),
    linear-gradient(180deg, #F4F6F2 0%, #FBF5E8 46%, #FFE9C4 100%);
}
.hero__sky::after { /* el amanecer sube con el scroll */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(234,242,249,0) 55%, var(--cielo-manana) 100%);
  opacity: var(--sky, 0);
}
.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.hero__kicker { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--verde-texto); font-size: var(--fs-small); margin-bottom: var(--s-3); }
.hero__kicker .icon { width: 1.1em; height: 1.1em; }
.hero__title { font-size: var(--fs-h1); line-height: .96; letter-spacing: -0.035em; font-weight: 800; margin-bottom: var(--s-3); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__title .line > span { display: inline-block; }
.hero__lead { font-size: var(--fs-lead); line-height: 1.5; color: #3F4440; max-width: 34ch; margin-bottom: var(--s-4); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: var(--s-4); }
.hero__chips { display: flex; flex-wrap: wrap; gap: .5rem .6rem; list-style: none; padding: 0; margin: 0; }
.hero__chips li { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 999px; background: rgba(255,255,255,.66); border: 1px solid rgba(63,116,25,.18); font-size: .9375rem; font-weight: 500; }
.hero__chips .icon { color: var(--verde-texto); width: 1.05em; height: 1.05em; stroke-width: 2.25; }

.hero__media { position: relative; }
.hero__art { position: relative; width: min(100%, 520px); margin-left: auto; }
.leaves { position: absolute; z-index: 0; left: -58%; bottom: -3%; width: 116%; overflow: visible; pointer-events: none; }
.leaf { transform-origin: 0 0; transform: rotate(var(--r)); }
.leaf path:first-child { mix-blend-mode: multiply; opacity: .92; }
.leaf .vein { fill: none; stroke: rgba(255,255,255,.6); stroke-width: 3; stroke-linecap: round; }

.leaf-mask { border-radius: clamp(110px, 16vw, 220px) 24px clamp(110px, 16vw, 220px) 24px; overflow: hidden; }
.hero__photo { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; background: #D9C7A8; box-shadow: 0 30px 60px -30px rgba(90, 50, 0, .35); }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1.04)); will-change: transform; }
.hero__caption { position: relative; z-index: 1; margin-top: .75rem; text-align: right; font-size: .875rem; color: var(--gris); }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; }
  .hero { min-height: min(100svh, 980px); display: grid; align-items: center; }
}
@media (max-width: 899.98px) {
  .hero__art { margin-inline: auto; width: min(86%, 440px); }
  .hero__caption { text-align: center; }
  .leaves { left: -42%; width: 96%; bottom: -2%; }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* Entrada del hero */
@keyframes leafIn { from { opacity: 0; transform: rotate(0deg) scale(.6); } to { opacity: 1; transform: rotate(var(--r)) scale(1); } }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes photoIn { from { clip-path: inset(38% 30% 0 30% round 200px 24px 200px 24px); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.js-motion .leaf { animation: leafIn .9s var(--ease-out) both; animation-delay: calc(.15s + var(--i) * 80ms); }
.js-motion .hero__title .line > span { animation: lineUp .7s var(--ease-out) both; }
.js-motion .hero__title .line:nth-child(2) > span { animation-delay: .07s; }
.js-motion .hero__title .line:nth-child(3) > span { animation-delay: .14s; }
.js-motion .hero__photo { animation: photoIn 1s var(--ease-out) .1s both; }
.js-motion .hero__kicker, .js-motion .hero__lead, .js-motion .hero__actions, .js-motion .hero__chips, .js-motion .hero__caption { animation: fadeUp .6s var(--ease-out) both; }
.js-motion .hero__kicker { animation-delay: 0s; }
.js-motion .hero__lead { animation-delay: .3s; }
.js-motion .hero__actions { animation-delay: .4s; }
.js-motion .hero__chips { animation-delay: .5s; }
.js-motion .hero__caption { animation-delay: .8s; }

/* ---------- 2 · Del sol a tu recibo (mañana) ---------- */
.story { position: relative; background: linear-gradient(180deg, var(--cielo-manana) 0%, #DDEAF5 100%); }
.story__pin { padding-block: var(--section-y); }
.story__grid { display: grid; gap: var(--s-4); }
.story__head .lead { margin-top: var(--s-2); }
.story__figure { background: rgba(255,255,255,.55); border-radius: var(--radius-lg); padding: clamp(1rem, 3vw, 2rem); border: 1px solid rgba(62,123,178,.15); }
.diagram { width: 100%; height: auto; overflow: visible; }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); counter-reset: s; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; transition: opacity .3s ease; }
.step__n { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff; border: 1.5px solid var(--azul-hoja); color: var(--azul-hoja); font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color .3s ease, color .3s ease; }
.step h3 { font-size: var(--fs-h3); line-height: 1.2; margin-bottom: .25rem; }
.step p { color: var(--gris); max-width: 36ch; }
.step.is-active .step__n { background: var(--azul-hoja); color: #fff; }

/* Diagrama */
.d-sun__core { fill: var(--amarillo-sol); }
.d-sun__rays { stroke: var(--ambar); stroke-width: 5; stroke-linecap: round; fill: none; }
.ray { fill: none; stroke: var(--ambar); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--o, 0); opacity: .9; }
.d-house__wall { fill: #FFFFFF; stroke: #B9C9D8; stroke-width: 2; }
.d-house__slab { fill: #D9E3EC; }
.d-house__door { fill: #E9D7BC; }
.d-house__window { fill: #CFE2F2; }
.d-house__frame { stroke: #fff; stroke-width: 3; fill: none; }
.d-panel { fill: var(--azul-panel); stroke: #0B1E31; stroke-width: 2; stroke-linejoin: round; transition: fill .4s ease; }
.d-panel__grid { stroke: #4E7DA8; stroke-width: 1.5; fill: none; }
.d-panel__edge, .d-panel__leg { stroke: #8B9AA8; stroke-width: 3; fill: none; stroke-linecap: round; }
.wire { fill: none; stroke: var(--verde-renova); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: var(--o, 0); }
.wire--grid { stroke: var(--azul-hoja); }
.d-inverter rect:first-child { fill: #fff; stroke: #9AA9B6; stroke-width: 2; }
.d-inverter__screen { fill: #1E3A55; transition: fill .3s ease; }
.d-inverter__led { fill: #C9D2DA; transition: fill .3s ease; }
.d-meter rect { fill: #fff; stroke: #9AA9B6; stroke-width: 2; }
.d-meter__arrows { fill: none; stroke: #9AA9B6; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease; }
.d-pole path { stroke: #7C6A55; stroke-width: 5; stroke-linecap: round; fill: none; }
.d-pole circle { fill: #7C6A55; }
.d-bill__paper { fill: #fff; stroke: #B9C9D8; stroke-width: 2; }
.d-bill__lines { stroke: #CBD6E0; stroke-width: 6; stroke-linecap: round; }
.d-bill__lines-fill { fill: #E3EAF0; }
.d-bill__track { fill: #EEF2F5; }
.d-bill__bar { fill: var(--naranja); transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(var(--bill, .32)); }
.diagram.s2 .d-inverter__led, .diagram:not(.is-scripted) .d-inverter__led { fill: var(--verde-hoja); }
.diagram.s2 .d-inverter__screen, .diagram:not(.is-scripted) .d-inverter__screen { fill: #3E7BB2; }
.diagram.s3 .d-meter__arrows, .diagram:not(.is-scripted) .d-meter__arrows { stroke: var(--verde-texto); }

@media (min-width: 1024px) {
  .story__grid { grid-template-columns: 7fr 5fr; grid-template-areas: "head head" "fig steps"; column-gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  .story__head { grid-area: head; }
  .story__figure { grid-area: fig; }
  .steps { grid-area: steps; }
  /* Escena fijada: solo con JS y movimiento permitido */
  .js-motion .story { height: 320vh; }
  .js-motion .story__pin { position: sticky; top: 0; height: 100vh; min-height: 640px; display: flex; align-items: center; padding-block: calc(var(--header-h) + 1rem) 2rem; }
  .js-motion .story__grid { row-gap: var(--s-3); }
  .js-motion .story__figure { max-height: calc(100vh - var(--header-h) - 12rem); display: grid; place-items: center; }
  .js-motion .story__figure .diagram { max-height: calc(100vh - var(--header-h) - 14rem); width: auto; }
  .js-motion .story .step { opacity: .38; }
  .js-motion .story .step.is-active, .js-motion .story .step.is-done { opacity: 1; }
  .js-motion .story .step.is-done:not(.is-active) { opacity: .6; }
}

/* ---------- 3 · Calculadora (mediodía) ---------- */
.calc { position: relative; isolation: isolate; overflow: clip; padding-block: var(--section-y); background: var(--cielo-mediodia); }
.calc__sun { position: absolute; z-index: -1; left: 50%; top: 10%; width: min(110vw, 1100px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,210,31,.55) 0%, rgba(255,210,31,.22) 38%, rgba(255,210,31,0) 66%); pointer-events: none; }
.calc__head { text-align: center; margin-bottom: var(--s-5); }
.calc__head .h2 { max-width: 18ch; margin-inline: auto; }
.calc__head .lead { margin: var(--s-2) auto 0; max-width: 46ch; }
.calc__card { max-width: 1040px; margin-inline: auto; display: grid; background: #fff; border-radius: var(--radius-lg); box-shadow: 0 1px 0 rgba(28,28,26,.05), 0 30px 70px -40px rgba(120, 80, 0, .45); overflow: hidden; }
.calc__form { padding: clamp(1.5rem, 4vw, 2.75rem); display: grid; gap: 1.35rem; }
.calc__result { padding: clamp(1.5rem, 4vw, 2.75rem); background: linear-gradient(160deg, #FFF6D6, #FFE9A8); display: grid; align-content: center; }
@media (min-width: 900px) { .calc__card { grid-template-columns: 1.1fr .9fr; } }

.field { display: grid; gap: .45rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.field__label { font-weight: 600; font-size: 1rem; padding: 0; }
.field__help { font-size: .875rem; color: var(--gris); }
.field__error { font-size: .875rem; color: #B42318; font-weight: 600; min-height: 0; }
.field__error:empty { display: none; }
.opt { font-weight: 400; color: var(--gris); }
input[type="text"], input[type="tel"], input[type="number"], textarea, select {
  width: 100%; min-height: 52px; padding: .8rem 1rem; border-radius: 14px;
  border: 1.5px solid #D5CFC2; background: #fff; font-size: 1.0625rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
textarea { min-height: 96px; resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--verde-texto); box-shadow: 0 0 0 4px rgba(94,154,44,.22); }
[aria-invalid="true"] { border-color: #B42318 !important; }
.input-unit { position: relative; display: flex; align-items: center; }
.input-unit input { padding-right: 3.5rem; font-variant-numeric: tabular-nums; }
.input-unit span { position: absolute; right: 1rem; color: var(--gris); font-weight: 600; pointer-events: none; }
.input-unit--pre input { padding-right: 1rem; padding-left: 2rem; }
.input-unit--pre span { left: 1rem; right: auto; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.select { position: relative; }
.select select { appearance: none; padding-right: 2.75rem; cursor: pointer; }
.select::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris); transform: translateY(-70%) rotate(45deg); pointer-events: none; }

.segmented { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 999px; background: #F3EFE6; width: 100%; max-width: 360px; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented label { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .5rem 1rem; border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--gris); transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.segmented input:checked + label { background: #fff; color: var(--tinta); box-shadow: 0 1px 2px rgba(28,28,26,.12), 0 2px 8px rgba(28,28,26,.06); }
.segmented input:focus-visible + label { outline: 3px solid var(--ambar); outline-offset: 2px; }
.segmented--dark { background: rgba(255,255,255,.08); }
.segmented--dark label { color: rgba(255,255,255,.75); }
.segmented--dark input:checked + label { background: #fff; color: var(--tinta); }

.check { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; font-size: .98rem; line-height: 1.45; }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--verde-texto); cursor: pointer; }
.check--dark a { color: #fff; }

.bill-help summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--verde-texto); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.bill-help summary::-webkit-details-marker { display: none; }
.bill-help figure { margin-top: .5rem; padding: 1rem; border-radius: 16px; background: #F7F4EC; }
.bill-help svg { width: 100%; max-width: 360px; }
.bill-help figcaption { font-size: .875rem; color: var(--gris); margin-top: .5rem; }
.bh-paper { fill: #fff; stroke: #D5CFC2; stroke-width: 1.5; }
.bh-line { fill: #CFC8B8; } .bh-line--soft { fill: #E7E2D6; }
.bh-hl { fill: #FFF1BF; stroke: var(--ambar); stroke-width: 2; }
.bh-small { font: 500 11px var(--f-text); fill: #7A7F7B; }
.bh-strong { font: 700 13px var(--f-text); fill: var(--tinta); }
.bh-note { font: 700 12px var(--f-text); fill: var(--naranja); }
.bh-arrow { fill: none; stroke: var(--naranja); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.result-empty { display: grid; justify-items: center; text-align: center; gap: 1rem; color: #6B5A1E; }
.result-empty__icon { width: 64px; height: 64px; fill: none; stroke: var(--ambar); stroke-width: 3; stroke-linecap: round; }
.result-empty p { max-width: 26ch; font-weight: 500; }
.result { display: grid; gap: 1rem; }
.result[hidden] { display: none; }
.result__label { font-weight: 600; color: #6B5A1E; }
.result__big { font-family: var(--f-display); font-weight: 800; font-size: clamp(3.5rem, 2.5rem + 4vw, 5.5rem); line-height: .95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.result__panels { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; }
.result__panels i { width: 26px; height: 18px; border-radius: 3px; background: linear-gradient(135deg, #1D4673, var(--azul-panel)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.js-motion .result__panels i { animation: panelIn .35s var(--ease-out) both; animation-delay: calc(var(--k) * 40ms + .5s); }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px) scale(.95); } to { opacity: 1; transform: none; } }
.result__panels .more { font-size: .875rem; font-weight: 600; align-self: center; color: #6B5A1E; }
.result__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; border-top: 1px solid rgba(107, 90, 30, .2); padding-top: 1rem; }
.result__grid dt { font-size: .8125rem; color: #6B5A1E; font-weight: 500; }
.result__grid dd { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.result__note { font-size: .9375rem; color: #514416; }
.result__note:empty { display: none; }
.result__legal { font-size: .8125rem; color: #6B5A1E; }

/* ---------- 4 · Lo que va en tu techo ---------- */
.gear { background: var(--azul-panel); color: #fff; padding-block: var(--section-y); position: relative; overflow: clip; }
.gear::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 90% 0%, rgba(62,123,178,.45), transparent 70%); pointer-events: none; }
.gear__grid { position: relative; display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.gear__media { position: relative; padding-bottom: 10%; max-width: 560px; }
.gear__photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; width: 74%; }
.gear__photo img { width: 100%; height: 100%; object-fit: cover; }
.gear__inset { position: absolute; right: 0; bottom: 0; width: 42%; aspect-ratio: 4 / 5; border-radius: 20px 80px 20px 80px; overflow: hidden; border: 6px solid var(--azul-panel); }
.gear__inset img { width: 100%; height: 100%; object-fit: cover; }
.gear .lead { color: rgba(255,255,255,.75); margin-top: var(--s-2); }
.spec { list-style: none; padding: 0; margin: var(--s-4) 0 0; position: relative; display: grid; gap: var(--s-4); }
.spec::before { content: ""; position: absolute; left: 1rem; top: 1rem; bottom: 1rem; width: 2px; background: var(--verde-hoja); transform-origin: 50% 0; }
.spec__item { position: relative; display: grid; grid-template-columns: 2rem 1fr; gap: 1.25rem; }
.spec__item .icon--lg { color: var(--verde-hoja); background: var(--azul-panel); padding: 2px 0; position: relative; }
.spec__item h3 { font-size: var(--fs-h3); line-height: 1.2; margin-bottom: .35rem; }
.spec__item p { color: rgba(255,255,255,.78); max-width: 44ch; }
@media (min-width: 900px) { .gear__grid { grid-template-columns: 1.05fr .95fr; } }

.js-motion .reveal-mask { clip-path: inset(0 100% 0 0 round var(--radius-lg)); transition: clip-path .9s var(--ease-out); }
.js-motion .reveal-mask.is-in { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
.js-motion .spec::before { transform: scaleY(0); transition: transform 1.1s var(--ease-out) .2s; }
.js-motion .spec.is-in::before { transform: scaleY(1); }
.js-motion .spec__item { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js-motion .spec.is-in .spec__item { opacity: 1; transform: none; }
.js-motion .spec.is-in .spec__item:nth-child(2) { transition-delay: .12s; }
.js-motion .spec.is-in .spec__item:nth-child(3) { transition-delay: .24s; }

/* ---------- 5 · Proceso (tarde) ---------- */
.process { position: relative; color: #fff; background: linear-gradient(180deg, #3A6C17 0%, var(--verde-texto) 35%, #4A8420 100%); }
.process::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; background: linear-gradient(180deg, var(--azul-panel), rgba(18,48,77,0)); pointer-events: none; }
.process__pin { position: relative; padding-block: var(--section-y); }
.process__head .h2 { max-width: 20ch; }
.process__cta { margin-top: var(--s-5); }
.timeline { position: relative; margin-top: var(--s-5); }
.timeline__arc, .timeline__sun { display: none; }
.timeline__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); position: relative; }
.tstep { position: relative; padding-left: 3.75rem; transition: opacity .35s ease; }
.tstep__n { position: absolute; left: 0; top: -.15rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.5); font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.tstep h3 { font-size: var(--fs-h3); line-height: 1.2; margin-bottom: .35rem; }
.tstep p { color: rgba(255,255,255,.82); max-width: 30ch; }
.tstep.is-lit .tstep__n { background: var(--amarillo-sol); border-color: var(--amarillo-sol); color: var(--tinta); }
.timeline__fill { position: absolute; left: calc(1.375rem - 1px); top: .5rem; bottom: .5rem; width: 2px; background: rgba(255,255,255,.25); }
.timeline__fill::after { content: ""; position: absolute; inset: 0; background: var(--amarillo-sol); transform-origin: 50% 0; transform: scaleY(var(--tl, 1)); }

@media (min-width: 1024px) {
  .timeline__fill { display: none; }
  .timeline { padding-top: 120px; }
  .timeline__arc { display: block; position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 120px; overflow: visible; }
  .timeline__track { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 2; stroke-dasharray: 3 7; }
  .timeline__done { fill: none; stroke: var(--amarillo-sol); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--tl, 1)); }
  .js .timeline__sun { display: block; position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--amarillo-sol); box-shadow: 0 0 0 10px rgba(255,210,31,.22), 0 0 40px 12px rgba(255,210,31,.35); transform: translate(var(--sx, 0px), var(--sy, 112px)); will-change: transform; }
  .timeline__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
  .tstep { padding-left: 0; padding-top: 3.75rem; }
  .tstep__n { top: 0; }
  .js-motion .process { height: 260vh; }
  .js-motion .process__pin { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding-block: calc(var(--header-h) + 1.5rem) 2.5rem; }
  .js-motion .process__pin > .container { width: 100%; }
  .js-motion .tstep { opacity: .5; }
  .js-motion .tstep.is-lit { opacity: 1; }
}

/* ---------- 6 · Instalaciones ---------- */
.work { position: relative; padding-block: var(--section-y); background: var(--papel); overflow: clip; }
.work::before { content: ""; position: absolute; right: -140px; top: -120px; width: 420px; height: 560px; background: var(--ambar); opacity: .16; border-radius: 0 100% 0 100%; transform: rotate(18deg); pointer-events: none; }
.work__head { position: relative; display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.work__head .h2 { max-width: 20ch; }
.work__head .lead { max-width: 52ch; }
.gallery { position: relative; display: grid; gap: 12px; }
.gallery__item { position: relative; border-radius: var(--radius); overflow: hidden; background: #E9E1D1; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item figcaption { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .75rem; border-radius: 999px; background: rgba(13,27,42,.78); color: #fff; font-size: .875rem; font-weight: 600; }
.gallery__item figcaption .icon { width: 1em; height: 1em; }
@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(12, 1fr); grid-template-rows: clamp(260px, 26vw, 360px) clamp(190px, 18vw, 240px); }
  .gallery__item--big { grid-column: 1 / span 8; grid-row: 1; }
  .gallery__item--tall { grid-column: 9 / span 4; grid-row: 1 / span 2; }
  .gallery__item--wide:nth-of-type(3) { grid-column: 1 / span 4; grid-row: 2; }
  .gallery__item--wide:nth-of-type(4) { grid-column: 5 / span 4; grid-row: 2; }
}
@media (max-width: 899.98px) {
  .gallery { grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery__item { scroll-snap-align: start; aspect-ratio: 4 / 5; }
}
.js-motion .gallery__item--big { clip-path: inset(30% 40% 30% 0 round var(--radius)); transition: clip-path 1s var(--ease-out); }
.js-motion .gallery__item--big.is-in { clip-path: inset(0 0 0 0 round var(--radius)); }

.log { position: relative; display: grid; gap: var(--s-4); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--linea); }
.log__intro p { color: var(--gris); margin-top: .5rem; max-width: 40ch; }
.log__places { display: flex; gap: .5rem; align-items: flex-start; color: var(--tinta) !important; font-weight: 500; }
.log__places .icon { color: var(--verde-texto); margin-top: .2rem; }
.log__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--s-3); }
.log__table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.log__table th, .log__table td { text-align: left; padding: .8rem .5rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.log__table thead th { font-size: .8125rem; font-weight: 600; color: var(--gris); padding-block: .5rem; }
.log__table tbody th { font-weight: 600; }
.log__table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.log__table td:last-child { min-width: 200px; }
.kwp { display: flex; align-items: center; gap: .75rem; }
.log__table b { font-family: var(--f-display); font-weight: 700; min-width: 5.5em; text-align: right; }
.bar { flex: 1; height: 10px; border-radius: 999px; background: #EFE9DC; overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--verde-renova), var(--ambar)); transform-origin: 0 50%; transform: scaleX(calc(var(--v) / 14.49)); }
.js-motion .log__table .bar span { transform: scaleX(0); transition: transform .9s var(--ease-out); }
.js-motion .log__table.is-in .bar span { transform: scaleX(calc(var(--v) / 14.49)); }
.js-motion .log__table.is-in tr:nth-child(2) .bar span { transition-delay: .05s; }
.js-motion .log__table.is-in tr:nth-child(3) .bar span { transition-delay: .1s; }
.js-motion .log__table.is-in tr:nth-child(4) .bar span { transition-delay: .15s; }
.js-motion .log__table.is-in tr:nth-child(5) .bar span { transition-delay: .2s; }
.js-motion .log__table.is-in tr:nth-child(6) .bar span { transition-delay: .25s; }
.js-motion .log__table.is-in tr:nth-child(7) .bar span { transition-delay: .3s; }
.js-motion .log__table.is-in tr:nth-child(8) .bar span { transition-delay: .35s; }
.js-motion .log__table.is-in tr:nth-child(9) .bar span { transition-delay: .4s; }
@media (min-width: 1024px) { .log { grid-template-columns: 4fr 8fr; column-gap: var(--s-6); align-items: start; } }
@media (max-width: 640px) {
  .log__table thead { display: none; }
  .log__table tr { display: grid; grid-template-columns: 1fr auto; column-gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--linea); }
  .log__table th, .log__table td { border: 0; padding: 0; }
  .log__table tbody th { grid-column: 1 / -1; margin-bottom: .35rem; }
  .log__table td:nth-of-type(1) { color: var(--gris); }
  .log__table td:last-child { min-width: 0; grid-column: 1 / -1; grid-row: 3; margin-top: .5rem; }
  .log__table td:nth-of-type(1) { grid-row: 2; }
}

/* ---------- 7 · Formas de pago (atardecer) ---------- */
.pay { position: relative; overflow: clip; padding-block: var(--section-y) calc(var(--section-y) + 40px); background: linear-gradient(180deg, var(--papel) 0, #FCE3B8 16%, #F7B33A 55%, var(--naranja) 100%); }
.pay__grid { position: relative; z-index: 1; }
.pay__sun { position: absolute; left: 50%; bottom: 0; width: clamp(220px, 26vw, 360px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, 50%); background: radial-gradient(circle, #FFE36B 0 52%, #FFD21F 60%, rgba(255,210,31,0) 71%); box-shadow: 0 0 120px 40px rgba(255, 200, 60, .35); pointer-events: none; }
.pay__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.pay__photo { border-radius: clamp(80px, 12vw, 160px) 24px clamp(80px, 12vw, 160px) 24px; overflow: hidden; aspect-ratio: 16 / 11; box-shadow: 0 30px 60px -35px rgba(80, 30, 0, .5); }
.pay__photo img { width: 100%; height: 100%; object-fit: cover; }
.pay__copy .h2 { max-width: 16ch; }
.pay__list { list-style: none; padding: 0; margin: var(--s-4) 0; display: grid; gap: 1rem; }
.pay__list li { display: flex; gap: .85rem; align-items: flex-start; font-size: var(--fs-lead); line-height: 1.4; font-weight: 500; max-width: 34ch; }
.pay__list .icon { width: 1.6rem; height: 1.6rem; margin-top: .1rem; }
@media (min-width: 900px) { .pay__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- 8 · Preguntas ---------- */
.faq { position: relative; padding-block: var(--section-y); color: #fff; background: radial-gradient(60% 220px at 50% 0, rgba(225,116,11,.35), rgba(225,116,11,0) 100%), linear-gradient(180deg, #2A3D5C 0, var(--crepusculo) 30%, #172C44 100%); }
.faq__grid { display: grid; gap: var(--s-5); }
.faq__head p { color: rgba(255,255,255,.75); margin-top: var(--s-2); }
.faq__head a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.accordion { display: grid; border-top: 1px solid rgba(255,255,255,.18); }
.acc { border-bottom: 1px solid rgba(255,255,255,.18); }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: 1.1rem 0; cursor: pointer; list-style: none; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.25; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .icon { width: 1.5rem; height: 1.5rem; color: var(--amarillo-sol); transition: transform .25s var(--ease-out); }
.acc[open] summary .icon { transform: rotate(45deg); }
.acc__body { overflow: hidden; }
.acc__body p { padding-bottom: 1.35rem; color: rgba(255,255,255,.82); max-width: 60ch; }
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: 5fr 7fr; column-gap: var(--s-6); }
  .faq__head { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}

/* ---------- 9 · Contacto (noche) ---------- */
.contact { position: relative; isolation: isolate; color: #fff; background: linear-gradient(180deg, #172C44 0%, var(--noche) 30%); padding-block: var(--section-y) calc(var(--section-y) + 40px); overflow: clip; }
.stars { position: absolute; inset: 0 0 auto 0; z-index: -1; width: 100%; height: 60%; }
.stars__g circle { fill: #fff; opacity: .7; }
.js-motion .stars__g circle { opacity: 0; transition: opacity 1.2s ease; }
.js-motion .contact.is-in .stars__g circle { opacity: .7; }
.js-motion .contact.is-in .stars__g circle:nth-child(3n) { transition-delay: .3s; }
.js-motion .contact.is-in .stars__g circle:nth-child(3n+1) { transition-delay: .6s; }
.moon { fill: #E8EEF5; opacity: .9; }
.volcano { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(90px, 14vw, 180px); }
.volcano path { fill: #0A1622; }
.contact__grid { display: grid; gap: var(--s-5); align-items: start; }
.contact__copy .h2 { max-width: 16ch; }
.contact .lead { color: rgba(255,255,255,.75); margin-top: var(--s-2); }
.contact__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: var(--s-4) 0; }
.contact__data { display: grid; gap: 1rem; margin-bottom: var(--s-4); }
.contact__data dt { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; color: rgba(255,255,255,.6); }
.contact__data dt .icon { width: 1rem; height: 1rem; }
.contact__data dd { font-size: 1.0625rem; padding-left: 1.5rem; }
.contact__data a { color: #fff; }
.map { border-radius: var(--radius); overflow: hidden; background: var(--noche-2); border: 1px solid rgba(255,255,255,.12); }
.map__facade { position: relative; }
.map__art { width: 100%; height: 180px; background: #102236; }
.map__road { fill: none; stroke: #23405E; stroke-width: 14; stroke-linecap: round; }
.map__road--thin { stroke-width: 8; }
.map__halo { fill: rgba(242,160,7,.18); }
.map__pin { fill: var(--ambar); }
.map__dot { fill: var(--noche); }
.map__actions { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem; }
.map iframe { display: block; width: 100%; height: 320px; border: 0; }

.lead-form { display: grid; gap: 1.1rem; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--radius-lg); background: var(--noche-2); border: 1px solid rgba(255,255,255,.1); }
.lead-form__intro { color: rgba(255,255,255,.7); font-size: .9375rem; margin-top: -.5rem; }
.lead-form .field__label { color: #fff; }
.lead-form input[type="text"], .lead-form input[type="tel"], .lead-form input[type="number"], .lead-form textarea { background: #0F1F30; border-color: rgba(255,255,255,.18); color: #fff; }
.lead-form input::placeholder, .lead-form textarea::placeholder { color: rgba(255,255,255,.4); }
.lead-form .input-unit span { color: rgba(255,255,255,.6); }
.lead-form .opt { color: rgba(255,255,255,.55); }
.lead-form .field__error { color: #FFB4A8; }
.field-row { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; align-items: end; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (min-width: 1024px) { .contact__grid { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); } }

/* ---------- Footer ---------- */
.site-footer { background: #08121C; color: rgba(255,255,255,.75); padding: var(--s-5) 0 calc(var(--s-4) + 72px); font-size: .9375rem; }
@media (min-width: 1024px) { .site-footer { padding-bottom: var(--s-4); } }
.site-footer__grid { display: grid; gap: var(--s-4); }
.site-footer__slogan { margin-top: .75rem; color: rgba(255,255,255,.6); }
.site-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.site-footer a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.site-footer__contact { display: grid; gap: .25rem; align-content: start; }
.social { display: flex; gap: .5rem; margin-top: .25rem; }
.social a { width: 44px; height: 44px; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); }
.site-footer__legal { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,.1); font-size: .8125rem; color: rgba(255,255,255,.5); }
@media (min-width: 900px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }

/* ---------- Barra de WhatsApp en móvil ---------- */
.wa-bar { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; padding: .65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(251,248,241,0), rgba(251,248,241,.96) 35%); transform: translateY(110%); transition: transform .25s var(--ease-out); }
.wa-bar.is-visible { transform: none; }
.wa-bar .btn { min-height: 52px; box-shadow: 0 10px 30px -10px rgba(46,87,18,.6); }
@media (min-width: 1024px) { .wa-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .wa-bar { transition: none; } }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* ---------- Página secundaria ---------- */
.page { padding: calc(var(--header-h) + 3rem) 0 5rem; }
.page .container { max-width: 820px; }
.page h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem); line-height: 1.05; margin-bottom: 1rem; }
.page h2 { font-size: 1.5rem; margin: 2.25rem 0 .75rem; }
.page p, .page li { color: #3F4440; margin-bottom: .75rem; }
.page ul { padding-left: 1.25rem; }
.page .note { padding: 1rem 1.25rem; border-radius: 14px; background: #FFF4D6; border: 1px solid #F2D27A; color: #5C4A10; }
.site-header--solid { background: rgba(251,248,241,.96); box-shadow: 0 1px 0 rgba(28,28,26,.08); }