/* calculadora.css — la calculadora de ahorro.
 *
 * Va ENCIMA de styles.css, no en lugar de él: la cabecera, el menú flotante, el
 * logo y la tipografía son los del resto del sitio y se heredan tal cual. Aquí
 * sólo está lo propio de esta página.
 *
 * Dos reglas de forma que explican todo lo demás:
 *   · cabe en una pantalla — nada de desplazamiento en escritorio;
 *   · los resultados no existen hasta que hay datos — el formulario arranca
 *     centrado y solo, y se recoge a un lado cuando hay algo que enseñar.
 */

/* ─────────────────────────────── estructura ─────────────────────────────── */
html, body.cal-body {
  height: 100%;
}
body.cal-body {
  /* En escritorio la página no se desplaza: todo entra de una. En móvil sí,
     porque tres gráficas apiladas no caben en 844 px de alto por mucho que se
     encojan. */
  overflow: hidden;
}

.cal-shell {
  --cal-pt: 122px;
  --cal-pb: 30px;
  height: 100vh;
  height: 100dvh;
  padding: var(--cal-pt) 40px var(--cal-pb);
  display: grid;
  /* Tres columnas SIEMPRE —hueco | formulario | resultados—, y lo que cambia
     al calcular es cuánto mide cada una. El reparto anterior pasaba de una
     columna a dos, y eso el navegador no lo sabe interpolar: la rejilla daba
     un salto seco y la transición que había escrita aquí no llegaba a correr
     nunca. Con el número de columnas fijo, los tres tamaños sí se interpolan
     y la tarjeta se va a su sitio andando. El hueco de la izquierda pasa de
     1fr a 0fr, que es lo que la lleva del centro al margen. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 1fr);
  grid-template-rows: minmax(0, auto);
  justify-content: stretch;
  align-content: center;
  row-gap: 26px;
  /* Sin hueco de columna: con tres columnas hay DOS huecos, y el de la
     izquierda —entre el hueco vacío y la tarjeta— la empujaría 26 px hacia
     dentro justo cuando acaba de llegar al margen. La separación entre
     formulario y resultados la pone el propio panel con su margen. */
  column-gap: 0;
  box-sizing: border-box;
  max-width: 1580px;
  margin: 0 auto;
  /* Despacio y frenando al final. El reparto ya no cambia a mitad de un
     arrastre —el JS lo aplaza hasta que se suelta la barra—, así que este
     movimiento ocurre con las manos quietas y puede permitirse ser un gesto
     en vez de un salto. */
  transition: grid-template-columns 0.8s cubic-bezier(0.32, 0.72, 0, 1);
}
/* Cada uno en su columna: sin esto la rejilla los coloca por orden y el
   formulario se metería en el hueco de la izquierda. */
.cal-form { grid-column: 2; }
.cal-out { grid-column: 3; }
/* Con resultados en pantalla el formulario se estrecha y cede el sitio. */
.cal-shell.has-out {
  grid-template-columns: minmax(0, 0fr) minmax(0, 384px) minmax(0, 1fr);
  max-width: 1580px;
  /* Una sola fila que ocupa lo que queda de alto, y `minmax(0, …)` para que sus
     hijos puedan encogerse: sin eso el contenido empuja la rejilla y lo de
     abajo —el botón del formulario, las gráficas— se sale de la pantalla. */
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  max-width: 1580px;
  margin: 0 auto;
}
/* La separación con el formulario, puesta aquí y no como hueco de la rejilla
   —ver arriba—. El panel sólo existe con `.has-out`, así que no hace falta
   apagarla en el otro estado. */
.cal-shell.has-out .cal-out { margin-left: 26px; }
/* El formulario nunca pasa del alto de la ventana: si no cabe, se desplaza por
   dentro. Con el techo dibujado y las fotos del material ya no cabía entero ni
   antes de calcular, y como en escritorio la página no se desplaza, lo de abajo
   —el consumo, la ayuda— quedaba cortado sin forma de llegar. El tope va contra
   la ventana y no con `max-height: 100%`: dentro de la rejilla ese porcentaje
   no se resolvía y la tarjeta se salía por abajo. */
.cal-form {
  max-height: calc(100vh - var(--cal-pt) - var(--cal-pb));
  max-height: calc(100dvh - var(--cal-pt) - var(--cal-pb));
  overflow-y: auto;
  box-sizing: border-box;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #e4ded6 transparent;
}
.cal-shell.has-out .cal-form {
  align-self: start;
  /* Barra de desplazamiento discreta: la tarjeta es blanca, no un panel. */
  scrollbar-width: thin;
  scrollbar-color: #e4ded6 transparent;
}
.cal-form::-webkit-scrollbar { width: 6px; }
.cal-form::-webkit-scrollbar-thumb {
  background: #e4ded6; border-radius: 3px;
}
.cal-form::-webkit-scrollbar-track { background: transparent; }

/* Antes del resultado, en escritorio, el formulario está solo en pantalla y
   sobra ancho: va en dos columnas —tus datos y tu consumo a la izquierda, el
   techo a la derecha— para que se vea entero sin desplazarse. En una sola
   columna de 560 px el techo con sus fotos lo alargaba por debajo de la
   ventana. El techo ocupa las dos filas de la derecha, y la fila de abajo a
   la izquierda se lleva el alto que sobre para que el consumo quede pegado a
   la factura y no a media tarjeta. Al calcular, `.has-out` lo devuelve a una
   columna estrecha y apilada. */
@media (min-width: 1081px) {
  .cal-shell:not(.has-out) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1000px) minmax(0, 1fr);
  }
  /* Antes todo caía en dos columnas largas y la de la izquierda crecía hacia
     abajo con cada campo nuevo. Ahora va por filas a lo ancho: el título y el
     tipo de predio en una línea; tu consumo a la izquierda y, a la derecha, el
     techo, los aparatos y NIC/factura; debajo, el material del techo en una
     tira de cinco fotos bajas. */
  .cal-shell:not(.has-out) .cal-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "t p"
      "a b"
      "a c"
      "e e"
      "g g"
      "f f";
    align-items: start;
    column-gap: 36px;
    padding: 24px 32px 18px;
  }
  .cal-shell:not(.has-out) .cal-title { grid-area: t; margin: 0; align-self: center; }
  .cal-shell:not(.has-out) .cal-grp-a { grid-area: p; }
  .cal-shell:not(.has-out) .cal-grp-d { grid-area: a; }
  .cal-shell:not(.has-out) .cal-grp-b { grid-area: b; }
  .cal-shell:not(.has-out) .cal-grp-e { grid-area: e; }
  .cal-shell:not(.has-out) .cal-grp-c { grid-area: c; }
  .cal-shell:not(.has-out) .cal-ver { grid-area: g; }
  .cal-shell:not(.has-out) .cal-foot { grid-area: f; }
  /* Las pastillas comparten fila con el título: más bajas, y la nota debajo. */
  .cal-shell:not(.has-out) .cal-pills button { padding: 7px 4px; }
  .cal-shell:not(.has-out) .cal-tipo-nota { margin-top: 5px; font-size: 12px; }
  /* Las dos columnas del medio arrancan a la misma altura. */
  .cal-shell:not(.has-out) .cal-grp-d > :first-child,
  .cal-shell:not(.has-out) .cal-grp-b > :first-child { margin-top: 14px; }
  .cal-shell:not(.has-out) .cal-grp-d .cal-sld,
  .cal-shell:not(.has-out) .cal-grp-b .cal-sld { margin-top: 12px; }
  .cal-shell:not(.has-out) .cal-grp-b .cal-ubic { margin-top: 12px; }
  .cal-shell:not(.has-out) .cal-grp-b > .cal-ubic:first-child { margin-top: 14px; }
  .cal-shell:not(.has-out) .cal-ubic-pie,
  .cal-shell:not(.has-out) .cal-estr-pie { margin-top: 4px; font-size: 12px; }
  /* A lo ancho, las fotos del techo van bajas y sin la línea de debajo: el
     nombre basta para confirmar lo que la foto ya enseña. */
  .cal-shell:not(.has-out) .cal-cub { margin-top: 14px; }
  .cal-shell:not(.has-out) .cal-cub-op img { aspect-ratio: 16 / 7; }
  .cal-shell:not(.has-out) .cal-cub-op b { margin-top: 5px; font-size: 14px; }
  .cal-shell:not(.has-out) .cal-cub-op small { display: none; }
  .cal-shell:not(.has-out) .cal-cub-otro { margin-top: 7px; }
  .cal-shell:not(.has-out) .cal-extra { margin-top: 12px; }
  .cal-shell:not(.has-out) .cal-ver { margin-top: 16px; }
}

/* Pantallas de portátil (1440×900, 1512×982 con la barra de Chrome, 1366×768):
   con el alto que deja el navegador la tarjeta no cabía y el botón «Ver mis
   resultados» quedaba debajo, dentro del desplazamiento de la tarjeta, sin que
   nada dijera que había más. Se aprieta por alto en dos escalones; el botón no
   puede ir pegado (sticky) porque es una celda de la rejilla y no sale de su
   fila. */
@media (min-width: 1081px) and (max-height: 940px) {
  .cal-shell:not(.has-out) { --cal-pt: 112px; --cal-pb: 18px; }
  .cal-shell:not(.has-out) .cal-form { padding: 18px 30px 12px; }
  .cal-shell:not(.has-out) .cal-title { font-size: 26px; }
  .cal-shell:not(.has-out) .cal-pills button { padding: 5px 4px; }
  .cal-shell:not(.has-out) .cal-grp-d > :first-child,
  .cal-shell:not(.has-out) .cal-grp-b > :first-child { margin-top: 10px; }
  .cal-shell:not(.has-out) .cal-estr-opts span { padding: 7px 0; }
  .cal-shell:not(.has-out) .cal-grp-d .cal-sld,
  .cal-shell:not(.has-out) .cal-grp-b .cal-sld { margin-top: 8px; }
  .cal-shell:not(.has-out) .cal-grp-b .cal-ubic { margin-top: 8px; }
  .cal-shell:not(.has-out) .cal-ubic-btn { padding: 9px 16px; }
  .cal-shell:not(.has-out) .cal-nic-in,
  .cal-shell:not(.has-out) .cal-fac-zona { height: 44px; }
  .cal-shell:not(.has-out) .cal-extra { margin-top: 8px; }
  .cal-shell:not(.has-out) .cal-cub { margin-top: 10px; }
  .cal-shell:not(.has-out) .cal-cub-op img { aspect-ratio: 16 / 5; }
  .cal-shell:not(.has-out) .cal-cub-op b { margin-top: 4px; font-size: 13.5px; }
  .cal-shell:not(.has-out) .cal-cub-otro { margin-top: 4px; }
  .cal-shell:not(.has-out) .cal-ver { margin-top: 12px; padding: 13px 28px; }
  .cal-shell:not(.has-out) .cal-foot { margin-top: 6px; }
}
/* Pantallas bajas de verdad (1366×768 con barras, 1280×720): fuera las notas
   de ayuda de debajo de cada campo y las fotos del techo quedan en franja. */
@media (min-width: 1081px) and (max-height: 760px) {
  .cal-shell:not(.has-out) { --cal-pt: 116px; --cal-pb: 8px; }
  .cal-shell:not(.has-out) .cal-form { padding-top: 14px; padding-bottom: 10px; }
  .cal-shell:not(.has-out) .cal-title { font-size: 24px; }
  .cal-shell:not(.has-out) .cal-tipo-nota,
  .cal-shell:not(.has-out) .cal-estr-pie,
  .cal-shell:not(.has-out) .cal-ubic-pie,
  .cal-shell:not(.has-out) .cal-extra-nota,
  .cal-shell:not(.has-out) .cal-foot { display: none; }
  .cal-shell:not(.has-out) .cal-cub-op img { aspect-ratio: 16 / 3; }
}

/* ─────────────────────────────── formulario ─────────────────────────────── */
.cal-form {
  background: #fff;
  border-radius: 26px;
  padding: 30px 30px 26px;
  box-shadow: 0 2px 26px rgba(31, 39, 27, 0.07);
  align-self: start;
  min-width: 0;
}
.cal-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #1F271B;
  margin: 0 0 22px;
}

/* Rótulo de grupo dentro del formulario. */
.cal-lbl {
  margin: 20px 2px 8px;
  font-size: 13px;
  color: #6b7280;
}
.cal-lbl:first-of-type { margin-top: 0; }
.cal-lbl span { color: #a8adaa; }

.cal-fld-wide { display: block; margin-top: 14px; }
.cal-city {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  color: #1F271B;
  padding: 13px 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239aa0a6' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 20px;
}

/* Tipo de predio. */
.cal-pills {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  background: #f6f3ef;
  border-radius: 100px;
  padding: 5px;
}
.cal-pills button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  background: transparent;
  border-radius: 100px;
  padding: 10px 4px;
  font-family: 'Satoshi', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.cal-pills button:hover { color: #1F271B; }
/* Nombre y, debajo, cómo va conectado: «conectado a red» o «con baterías». */
.cal-pills button > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  min-width: 0;
}
.cal-pills button small {
  font-size: 11px;
  font-weight: 500;
  color: #9aa0a6;
  margin-top: 2px;
  white-space: nowrap;
}
.cal-pills button.on small { color: #6b7280; }
/* Tres pastillas no caben en fila con icono al lado en un móvil: el icono
   sube encima del nombre y la cápsula se vuelve tarjeta. */
/* Lo mismo con los resultados abiertos: el formulario se estrecha a una
   columna y las tres en fila tampoco caben. */
.cal-shell.has-out .cal-pills { border-radius: 20px; gap: 4px; }
.cal-shell.has-out .cal-pills button { flex-direction: column; gap: 4px; border-radius: 15px; }
.cal-shell.has-out .cal-pills button > span { align-items: center; }
@media (max-width: 560px) {
  .cal-pills { border-radius: 20px; gap: 4px; }
  .cal-pills button { flex-direction: column; gap: 4px; border-radius: 15px; }
  .cal-pills button > span { align-items: center; }
  .cal-pills button span { font-size: 14px; }
  .cal-pills button small { font-size: 10.5px; }
}
.cal-pills button.on { background: #fff; color: #1F271B; box-shadow: 0 1px 4px rgba(31, 39, 27, 0.1); }
/* El edificio va del color de la etiqueta, y el faldón —donde irían los
   paneles— lleva el degradado de la casa, el mismo naranja→turquesa de los
   botones y los subrayados. Es el único punto de color del formulario, así que
   sólo lo lleva la opción elegida: fuera de ella el icono vuelve a un solo tono
   y las dos pastillas no compiten. El degradado va puesto en el SVG y es esta
   regla la que lo retira, porque un `stroke` en degradado no se puede escribir
   desde CSS sin repetir el `url()` de cada icono. El trazo es de 1,6 y no de
   1,4 como el resto de iconos de la página: el turquesa del final del
   degradado es claro, y a 1,4 el alero de la derecha se perdía sobre el blanco.
   El SVG no encoge —flex lo apretaría contra el texto en la pastilla larga. */
.cal-ico { width: 20px; height: 20px; flex: none; }
.cal-pills button:not(.on) .cal-ico-sol { stroke: currentColor; }
/* Qué modelo le toca al perfil elegido: el PPA es sólo para empresas. */
.cal-tipo-nota {
  margin: 8px 4px 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: #6b7280;
}
.cal-tipo-nota b { color: #1F271B; }

.cal-fld { display: block; min-width: 0; }
.cal-fld > span {
  display: block;
  font-size: 13px;
  line-height: 1.3;
  color: #6b7280;
  margin: 0 0 7px 2px;
}
.cal-wrap {
  display: flex;
  align-items: center;
  background: #f6f3ef;
  border: 1.5px solid transparent;
  border-radius: 100px;
  padding: 0 16px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cal-wrap:focus-within { border-color: #ff4500; background: #fff; }
.cal-wrap b {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  color: #a8adaa;
  font-weight: 400;
}
.cal-wrap b.r { font-size: 14px; }
.cal-wrap input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  color: #1F271B;
  padding: 12px 6px;
}

/* ── factura, área y consumo ──────────────────────────────────────────────
   Eran tres cajas en blanco, y una caja en blanco es una pregunta de examen:
   no dice qué orden de magnitud espera ni cuánto hay que teclear para ver algo.
   El rango sí —llega con un valor puesto, se mueve con el pulgar y recalcula
   mientras se arrastra— y el número de al lado sigue siendo un campo de texto
   para quien tenga el recibo delante y quiera la cifra exacta. */
.cal-sld { margin-top: 18px; }
.cal-sld-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 7px;
}
.cal-sld-lbl {
  font-size: 13px;
  line-height: 1.3;
  color: #6b7280;
  /* Es un <label for>: tocarlo lleva el foco al número. Sin esto el único
     blanco para escribir la cifra eran los dígitos. */
  cursor: pointer;
}
/* El valor va en caja. Sin ella la cifra se leía como un resultado impreso y
   nadie sabía que podía escribir la suya: una factura de 300 millones no se
   alcanza arrastrando con precisión, se teclea. */
.cal-sld-num {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  flex: none;
  padding: 5px 12px 6px;
  border: 1.5px solid #e4ded6;
  border-radius: 12px;
  background: #fff;
  font-family: 'Space Grotesk', sans-serif;
  color: #1F271B;
  cursor: text;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cal-sld-num:hover { border-color: #c9c3bb; }
.cal-sld-num:focus-within { border-color: #ff4500; box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.12); }
.cal-sld-num b {
  font-size: 15px;
  font-weight: 400;
  color: #a8adaa;
}
.cal-sld-num b.r { font-size: 13px; }
.cal-sld-num input {
  width: 4ch;
  min-width: 2ch;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  text-align: right;
  font-family: inherit;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  /* Cifras de ancho fijo: el campo se mide en `ch` desde el JS y sin esto el
     ancho bailaba según qué dígitos hubiera escritos. */
  font-variant-numeric: tabular-nums;
  color: inherit;
}
.cal-sld-num input::placeholder { color: #cfcac3; font-weight: 400; }

.cal-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  /* Alto de dedo aunque la barra sean 6 px. */
  height: 26px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  /* El navegador arrastra el pulgar; la página no se desplaza con él. */
  touch-action: pan-y;
  --f: 0%;
}
.cal-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 100px;
  background: linear-gradient(to right, #ff4500 var(--f), #eceae6 var(--f));
}
.cal-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 21px;
  height: 21px;
  margin-top: -7.5px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #ff4500;
  box-shadow: 0 2px 7px rgba(31, 39, 27, 0.2);
  transition: transform 0.15s ease;
}
.cal-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.cal-range::-moz-range-track {
  height: 6px;
  border-radius: 100px;
  background: #eceae6;
}
.cal-range::-moz-range-progress {
  height: 6px;
  border-radius: 100px;
  background: #ff4500;
}
.cal-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #ff4500;
  box-shadow: 0 2px 7px rgba(31, 39, 27, 0.2);
}
.cal-range:focus { outline: none; }
.cal-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255, 69, 0, 0.24); }
.cal-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(255, 69, 0, 0.24); }

/* Eco de la cifra mientras el dedo está en una barra.
   En el móvil el formulario ocupa la pantalla entera y los resultados quedan
   por debajo del pliegue, así que sin esto la barra se arrastra a ciegas. En
   escritorio no hace falta —las gráficas están al lado, cambiando— y por eso
   sólo se enciende cuando la página se apila. */
.cal-vivo {
  position: fixed;
  z-index: 900;
  /* Justo en el hueco entre la cabecera y la tarjeta del formulario: en un
     teléfono el logo acaba en 52 px y la tarjeta empieza en 100, y la cápsula
     mide 50. Se apoya en el borde de la tarjeta sin llegar a comerse el
     título, que es lo único que hay debajo. */
  top: 50px;
  left: 50%;
  display: none;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 28px);
  padding: 9px 15px 10px 19px;
  border: none;
  border-radius: 100px;
  background: #1F271B;
  box-shadow: 0 10px 30px rgba(31, 39, 27, 0.32);
  white-space: nowrap;
  font-family: 'Satoshi', sans-serif;
  color: #fff;
  /* Es un botón: lleva al desglose. */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.cal-vivo[hidden] { display: none; }
/* El envoltorio del texto, que es donde escribe el JS: mantiene «Ahorras»,
   la cifra y «al mes» sobre una misma línea base, ahora que el botón alinea
   sus dos piezas por el centro para cuadrar con la flecha. */
.cal-vivo > span {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
.cal-vivo > span span { font-size: 13px; color: #b9bfb6; }
.cal-vivo b {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.025em;
  /* El naranja de marca, aclarado: sobre el verde oscuro el #ff4500 se queda
     en 4,1 de contraste y éste sube a 6. */
  color: #ff7a4d;
}
/* La flecha es lo que dice que se puede pulsar. En su propio círculo, que sin
   él se lee como parte de la cifra. */
.cal-vivo svg {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.cal-vivo:active { transform: translate(-50%, 0) scale(0.97); }
.cal-vivo:focus-visible {
  outline: 2px solid #ff7a4d;
  outline-offset: 3px;
}

/* Precio del kWh deducido de la factura y el consumo. */
.cal-precio {
  margin: 9px 2px 0;
  font-size: 13px;
  color: #1F271B;
}
.cal-precio b { font-weight: 700; }
.cal-precio span { color: #a8adaa; }
.cal-precio[hidden] { display: none; }

/* Aviso de incoherencia entre factura y kWh. */
.cal-aviso {
  margin: 9px 2px 0;
  padding: 9px 12px;
  background: #fff5ec;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #b4470f;
}
.cal-aviso[hidden] { display: none; }

/* El mismo aviso, pero dentro de la cabecera de resultados: ocupa la fila
   entera bajo las cuatro cifras. */
.cal-aviso-diseno {
  flex: 1 1 100%;
  margin: 0;
  border-radius: 0;
  border-top: 1px solid #efeae3;
  padding: 12px 20px 14px;
}

/* ── Ubicación del proyecto ───────────────────────────────────────────────
   Antes esto era un enlace de ayuda con un icono de información, del mismo
   tamaño y color que «¿Dónde encuentro los kWh?». Se leía como una nota al
   pie y se saltaba: pero medir el techo sobre la foto cambia dos entradas del
   cálculo —el área deja de ser una cifra a ojo y la ubicación deja de ser el
   centro de la ciudad—, así que pesa lo que un campo y se presenta como uno.
   Sigue siendo opcional, y eso lo dice la etiqueta, no el tamaño. */
.cal-ubic { margin-top: 16px; }
.cal-ubic-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: #f6f3ef;
  border: 1.5px solid transparent;
  border-radius: 100px;
  padding: 13px 16px;
  cursor: pointer;
  text-align: left;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  color: #1F271B;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.cal-ubic-btn:hover { border-color: #ff4500; background: #fff; }
.cal-ubic-btn:focus-visible { outline: 2px solid #ff4500; outline-offset: 2px; }
.cal-ubic-pin { width: 17px; height: 17px; flex: none; color: #a8adaa; }
.cal-ubic-txt { flex: 1; min-width: 0; }
.cal-ubic-ir { width: 15px; height: 15px; flex: none; color: #a8adaa; }
.cal-ubic-btn:hover .cal-ubic-pin,
.cal-ubic-btn:hover .cal-ubic-ir { color: #ff4500; }

/* Con el techo ya medido el campo deja de pedir y pasa a confirmar. El verde
   azulado es el mismo que marca el número que vino del mapa, para que se lean
   como lo que son: una cosa y su consecuencia. */
.cal-ubic.on .cal-ubic-btn {
  background: #fff;
  border-color: #3dbdb5;
  font-weight: 700;
}
.cal-ubic.on .cal-ubic-pin { color: #3dbdb5; }

.cal-ubic-pie {
  margin: 7px 2px 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: #a8adaa;
}

/* Ya hay factura y falta el techo: el botón pide que lo pulsen. Naranja y
   con un latido lento — es lo único entre el visitante y su resultado. */
.cal-ubic.pide .cal-ubic-btn {
  background: #fff;
  border-color: #ff4500;
  color: #1F271B;
  font-weight: 700;
}
.cal-ubic.pide .cal-ubic-pin,
.cal-ubic.pide .cal-ubic-ir { color: #ff4500; }
.cal-ubic.pide .cal-ubic-pie { color: #c2410c; }
@media (prefers-reduced-motion: no-preference) {
  .cal-ubic.pide .cal-ubic-btn { animation: calPide 1.8s ease-in-out infinite; }
}
@keyframes calPide {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); }
  50% { box-shadow: 0 0 0 5px rgba(255, 69, 0, 0.16); }
}
.cal-ubic + .cal-sld { margin-top: 18px; }

/* ── De qué es el techo ────────────────────────────────────────────────────
   Tres fotos que se eligen como una opción. La foto va primero porque es lo
   que se reconoce; el nombre y la línea de abajo confirman. */
.cal-cub { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.cal-cub legend {
  padding: 0;
  font-size: 13px;
  line-height: 1.3;
  color: #6b7280;
  margin: 0 0 8px 2px;
}
.cal-cub-opts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
/* Cinco en fila caben en el escritorio, pero en el móvil cada foto quedaría
   en 55 px y el techo dejaría de reconocerse, que es todo lo que se les pide.
   Tres y dos: la foto vuelve a tener tamaño de foto. */
@media (max-width: 640px) {
  .cal-cub-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Con los resultados abiertos el formulario es una columna estrecha: cinco
   fotos en fila quedarían de sello. Tres y dos. */
.cal-shell.has-out .cal-cub-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cal-cub-op {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 5px 5px 9px;
  border: 1.5px solid transparent;
  border-radius: 16px;
  background: #f6f3ef;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.cal-cub-op:hover { border-color: #e4ded6; background: #fff; }
.cal-cub-op img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 11px;
  background: #e4ded6;
}
.cal-cub-op b {
  margin: 8px 4px 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  color: #1F271B;
}
.cal-cub-op small {
  margin: 2px 4px 0;
  font-size: 11.5px;
  line-height: 1.3;
  color: #8b918c;
}
/* El radio de verdad sigue ahí —teclado y lectores de pantalla lo usan—,
   pero se ve como una marca sobre la foto. */
.cal-cub input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.cal-cub-op::after {
  content: '';
  position: absolute;
  top: 11px;
  right: 11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease;
}
.cal-cub-op:has(input:checked) {
  border-color: #ff4500;
  background: #fff;
  box-shadow: 0 2px 10px rgba(255, 69, 0, 0.14);
}
.cal-cub-op:has(input:checked)::after {
  background: #ff4500 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.cal-cub-op:has(input:focus-visible),
.cal-cub-otro:has(input:focus-visible) { outline: 2px solid #ff4500; outline-offset: 2px; }

.cal-cub-otro {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0 2px;
  font-size: 13px;
  color: #6b7280;
  cursor: pointer;
  border-radius: 6px;
}
.cal-cub-otro::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid #c9c3bb;
  background: #fff;
  box-sizing: border-box;
  transition: border 0.15s ease;
}
.cal-cub-otro:hover { color: #1F271B; }
.cal-cub-otro:has(input:checked) { color: #1F271B; font-weight: 700; }
.cal-cub-otro:has(input:checked)::before { border: 5px solid #ff4500; }

@media (max-width: 400px) {
  .cal-cub-opts { gap: 6px; }
  .cal-cub-op { padding: 4px 4px 8px; }
  .cal-cub-op small { display: none; }
}

/* Estrato. Seis casillas en una sola tira, como las pastillas del perfil:
   es un número que se elige, no una foto que se reconoce. */
.cal-estr { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.cal-estr[hidden] { display: none; }
.cal-estr legend {
  padding: 0;
  font-size: 13px;
  line-height: 1.3;
  color: #6b7280;
  margin: 0 0 8px 2px;
}
.cal-estr-opts {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  background: #f6f3ef;
  border-radius: 100px;
  padding: 5px;
}
.cal-estr-opts label { position: relative; cursor: pointer; }
.cal-estr-opts input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.cal-estr-opts span {
  display: block;
  text-align: center;
  border-radius: 100px;
  padding: 9px 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #6b7280;
  transition: background 0.2s ease, color 0.2s ease;
}
.cal-estr-opts label:hover span { color: #1F271B; }
.cal-estr-opts input:checked + span {
  background: #fff;
  color: #ff4500;
  box-shadow: 0 1px 4px rgba(31, 39, 27, 0.1);
}
.cal-estr-opts input:focus-visible + span { outline: 2px solid #ff4500; outline-offset: 1px; }
.cal-estr-pie {
  margin: 6px 4px 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: #8b918c;
}
/* Ya hay factura y falta el estrato: lo mismo que con el techo, se pide. */
.cal-estr.pide .cal-estr-opts { box-shadow: inset 0 0 0 1.5px #ff4500; }
@media (max-width: 768px) {
  .cal-estr-opts span { padding: 12px 0; }
}

/* ── La capa del mapa ─────────────────────────────────────────────────────
   Pantalla casi completa: es una foto satelital sobre la que hay que
   distinguir el propio tejado del vecino, y una ventanita lo vuelve
   inservible. En el móvil ocupa todo, sin bordes, porque cualquier margen ahí
   es superficie de mapa que se pierde. */
.cal-mapa-capa {
  position: fixed;
  inset: 0;
  /* Por encima de la cabecera, que es fija y va en 1000 —y del menú de mano,
     que va en 1100—. En 120 el logotipo caía encima del mapa y de su buscador:
     una capa modal que no tapa la cabecera no es modal. */
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(31, 39, 27, 0.55);
  backdrop-filter: blur(2px);
  animation: calModalFondo 0.2s ease both;
}
.cal-mapa-caja {
  position: relative;
  width: min(1100px, 100%);
  height: min(760px, 100%);
  background: #fffcf9;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(31, 39, 27, 0.3);
  animation: calModalCaja 0.25s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.cal-mapa-marco { display: block; width: 100%; height: 100%; border: 0; }

/* Por encima del marco: dentro va un mapa a pantalla completa y su propio
   «Cerrar» queda entre los mandos, que en el móvil se pliegan. */
.cal-mapa-x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 252, 249, 0.94);
  box-shadow: 0 2px 10px rgba(31, 39, 27, 0.22);
  color: #1F271B;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-mapa-x:hover { background: #fff; }

/* Y la cabecera se retira mientras se mide. Subirla de plano ya bastaba para
   que no estorbara, pero el logotipo seguía asomando tras el velo, en la
   esquina donde el mapa pone «volver» y la barra de búsqueda: dos marcas
   naranjas discutiendo por el mismo rincón. Medir un techo es una tarea de
   pantalla completa, y la navegación del sitio no pinta nada ahí. Va con
   `:has()` —el modal es hijo de <body>— para no tener que tocar el JS; donde
   no haya `:has()`, el z-index de arriba deja la cabecera detrás del velo,
   que es el estado que había antes de este añadido y tampoco tapa nada. */
body:has(.cal-mapa-capa) header {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  body:has(.cal-mapa-capa) header { transition: opacity 0.2s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .cal-mapa-capa, .cal-mapa-caja { animation: none; }
}
@media (max-width: 640px) {
  .cal-mapa-capa { padding: 0; }
  .cal-mapa-caja { width: 100%; height: 100%; border-radius: 0; }
  /* En el teléfono la flecha del propio mapa ya cierra la capa: esta X
     quedaba encima del buscador y de su botón. */
  .cal-mapa-x { display: none; }
}

/* El área que vino medida del mapa se marca una vez: confirma al volver que el
   número llegó. */
.cal-sld-num:has(.cal-desde-mapa) { border-color: #3dbdb5; }

/* «¿Dónde encuentro los kWh?». Discreto, porque el campo es opcional: quien
   no lo necesite no debería tropezarse con él. */
.cal-help {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 0 2px;
  font-size: 12.5px;
  color: #6b7280;
  text-decoration: none;
  border-bottom: 1px solid #e4ded6;
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.cal-help svg { width: 15px; height: 15px; flex: none; }
.cal-help:hover { color: #ff4500; border-color: #ff4500; }

/* ── NIC y factura (opcionales) ───────────────────────────────────────────
   No mueven el cálculo de la página; viajan con el contacto. El NIC va en la
   misma caja que las cifras, alineado a la izquierda porque es un código y
   no una cantidad. */
.cal-extra { margin-top: 18px; }
/* Los dos en una fila: el NIC es corto y la factura lleva la zona de soltar. */
.cal-extra-fila {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 12px;
  align-items: end;
}
.cal-extra-lbl {
  display: block;
  font-size: 13px;
  line-height: 1.3;
  color: #6b7280;
  margin: 0 0 6px 2px;
}
.cal-nic-in {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 50px;
  padding: 0 14px;
  border: 1.5px solid #e4ded6;
  border-radius: 14px;
  background: #fff;
  outline: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #1F271B;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cal-nic-in::placeholder { color: #c9c3bb; font-weight: 400; }
.cal-nic-in:hover { border-color: #c9c3bb; }
.cal-nic-in:focus { border-color: #ff4500; box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.12); }

/* La zona de la factura: se pulsa o se le suelta el archivo encima. */
.cal-fac-zona {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1.5px dashed #d6cfc6;
  border-radius: 14px;
  background: #f9f7f4;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cal-fac-zona:hover { border-color: #ff4500; background: #fff; }
.cal-fac-ico { width: 18px; height: 18px; flex: none; color: #a8adaa; }
.cal-fac-zona:hover .cal-fac-ico { color: #ff4500; }
.cal-fac-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cal-fac-txt b {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  color: #1F271B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-fac-txt small {
  font-size: 11.5px;
  color: #8b918c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Arrastrando un archivo por encima de la página: la zona se señala. */
.cal-fac.arrastre .cal-fac-zona {
  border-color: #ff4500;
  background: #fff5ec;
}
.cal-fac.arrastre .cal-fac-ico { color: #ff4500; }
/* Ya subida: borde lleno en turquesa, como el techo medido. */
.cal-fac.on .cal-fac-zona { border-style: solid; border-color: #3dbdb5; background: #fff; }
.cal-fac.on .cal-fac-ico { color: #3dbdb5; }
.cal-fac-in {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cal-fac:focus-within .cal-fac-zona { outline: 2px solid #ff4500; outline-offset: 2px; }
/* En la columna estrecha de los resultados y en el móvil pequeño, uno encima
   del otro: la zona no se lee en 180 px. */
.cal-shell.has-out .cal-extra-fila { grid-template-columns: 1fr; gap: 10px; }
@media (max-width: 440px) {
  .cal-extra-fila { grid-template-columns: 1fr; gap: 10px; }
}
.cal-fac-err { margin: 6px 2px 0; font-size: 12px; color: #c2410c; }
.cal-fac-err[hidden] { display: none; }
.cal-extra-nota {
  margin: 6px 2px 0;
  font-size: 11px;
  line-height: 1.4;
  color: #a8adaa;
}

.cal-fld > span em {
  font-style: normal;
  color: #a8adaa;
}

.cal-cta {
  width: 100%;
  margin-top: 22px;
  padding: 16px 20px;
  border: none;
  border-radius: 100px;
  background: #ff4500;
  color: #fff;
  font-family: 'Satoshi', sans-serif;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255, 69, 0, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Mismo barrido de marca que el botón del hero, y por el mismo motivo en una
   capa aparte: un degradado no interpola contra un color plano. */
.cal-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cal-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, #FF4500 0%, #FF6B35 32%, #FF8C42 58%, #6BDBD0 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cal-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255, 69, 0, 0.42); }
.cal-cta:hover:not(:disabled)::before { opacity: 1; }
/* El paso al resultado. Ancho completo y al final del formulario: es el
   único botón de la tarjeta mientras no hay cálculo, así que no compite con
   nada y se encuentra sin buscarlo. Apagado no se esconde —de un botón que
   aparece de repente nadie se entera—: se queda en gris diciendo qué falta. */
.cal-ver {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 22px 0 0;
  padding: 17px 28px;
  border: none;
  border-radius: 100px;
  background: #ff4500;
  color: #fff;
  font-family: 'Satoshi', sans-serif;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(255, 69, 0, 0.32);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease,
    color 0.2s ease;
}
.cal-ver::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.cal-ver:hover { background: #ff5a1f; transform: translateY(-1px); }
.cal-ver:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.cal-ver:focus-visible { outline: 2px solid #1F271B; outline-offset: 3px; }
.cal-ver[disabled] {
  background: #f0ece6;
  color: #a8adaa;
  box-shadow: none;
  cursor: default;
  transform: none;
}
.cal-ver[disabled]::after { display: none; }
/* Con los resultados en pantalla ya no lleva a ninguna parte. */
.cal-shell.has-out .cal-ver { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cal-ver, .cal-ver::after { transition: none; }
  .cal-ver:hover { transform: none; }
}

.cal-foot {
  margin: 14px 4px 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #a8adaa;
  text-align: center;
}

/* ─────────────────────────────── resultados ─────────────────────────────── */
/* `display: flex` gana al `[hidden] { display: none }` de la hoja del
   navegador, así que las tarjetas vacías se veían antes de calcular. */
.cal-out[hidden] { display: none; }
.cal-out {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: calIn 0.7s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes calIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Cabecera de resultados.
   Cuatro tarjetas iguales en fila convierten cualquier cosa en un panel de
   control genérico. Aquí hay UNA cifra —lo que te ahorras— y tres que la
   sostienen, dentro de la misma superficie y separadas por filetes de 1 px. */
.cal-hero {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 2px 20px rgba(31, 39, 27, 0.06);
  overflow: hidden;
  flex: none;
}
.cal-hero-main {
  flex: 1 1 320px;
  min-width: 0;
  padding: 22px 28px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cal-hero-main .l {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 2px;
}
.cal-hero-main strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #ff4500;
  display: block;
}
.cal-hero-main strong span {
  font-size: 0.42em;
  color: #1F271B;
  letter-spacing: -0.01em;
  margin-left: 8px;
  font-weight: 400;
}
.cal-hero-main .s {
  margin-top: 8px;
  font-size: 13.5px;
  color: #6b7280;
}
.cal-hero-main .s b { color: #1F271B; font-weight: 700; }

/* Cuatro datos y no tres desde que el inversor se declara: potencia, equipo,
   inversión y retorno. En una fila de 380 px no caben, así que se reparten en
   dos columnas y la cabecera crece una fila en vez de estrujarlos. */
.cal-hero-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  flex: 1 1 420px;
}
.cal-hero-side > div {
  min-width: 0;
  padding: 16px 18px 15px;
  border-left: 1px solid #efeae3;
}
.cal-hero-side > div:nth-child(n + 3) { border-top: 1px solid #efeae3; }
.cal-hero-side dt {
  font-size: 12.5px;
  color: #6b7280;
  margin-bottom: 4px;
}
.cal-hero-side dd {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(18px, 1.5vw, 23px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1F271B;
  line-height: 1.1;
}
.cal-hero-side dd em {
  display: block;
  font-style: normal;
  font-family: 'Satoshi', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #8b918c;
  margin-top: 5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cal-charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  flex: 1;
  min-height: 0;
}
.cal-card {
  margin: 0;
  background: #fff;
  border-radius: 20px;
  padding: 18px 18px 14px;
  box-shadow: 0 2px 20px rgba(31, 39, 27, 0.06);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.cal-card figcaption {
  font-family: 'Satoshi', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1F271B;
  margin-bottom: 10px;
}
/* Leyenda en la misma línea del título: dice qué es cada color sin gastar una
   fila entera ni obligar a pasar el ratón por encima. */
/* La leyenda es lo que convierte tres manchas de color en una explicación, y
   estaba escrita más pequeña y más pálida que el pie de fuentes. Ahora pesa lo
   que pesa: 14 px, color de texto y no de nota al margen. */
.cal-card figcaption i {
  display: block;
  margin-top: 7px;
  font-style: normal;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #4a5250;
}
/* Cada entrada, cuadrito y palabra, es una pieza indivisible: con cuatro
   colores la leyenda ya no cabe en una línea en el móvil, y sin esto el salto
   dejaba un cuadrito huérfano al final de la primera y su palabra sola en la
   segunda. */
.cal-card figcaption i em {
  display: inline-block;
  white-space: nowrap;
  font-style: normal;
  margin-right: 16px;
}
.cal-card figcaption i em:last-child { margin-right: 0; }
.cal-card figcaption i b { font-weight: inherit; }
.cal-card figcaption i span {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  margin: 0 6px 0 0;
  vertical-align: -1px;
}
.cal-card figcaption i span.k1 { background: #dfe6ff; }
.cal-card figcaption i span.k2 { background: #ff4500; }
.cal-card figcaption i span.k3 { background: #e4ded6; }
.cal-card figcaption i span.k4 { background: #3dbdb5; }
.cal-card figcaption i span.k5 { background: #7c8cff; }
.cal-card figcaption i span.k6 { background: #f4a418; }
/* El verde es el solape de las otras dos: la energía del sol que de verdad
   te ahorras, que es de lo que va toda la gráfica. */
.cal-card figcaption i span.k7 { background: #9ad9d4; }
/* Y lo que sobra del sol por encima de tu consumo: se va a la red. Amarillo
   pálido porque sigue siendo energía del sol, sólo que no te la quedas. */
.cal-card figcaption i span.k8 { background: #f7dca8; }
.cal-canvas { position: relative; flex: 1; min-height: 150px; }

.cal-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  flex: none;
}
.cal-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 40px;
  border-radius: 100px;
  background: #ff4500;
  color: #fff;
  text-decoration: none;
  font-family: 'Satoshi', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.005em;
  box-shadow: 0 10px 28px rgba(255, 69, 0, 0.36);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  animation: calWaPulse 3s ease-in-out infinite;
}
.cal-wa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cal-wa::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, #FF4500 0%, #FF6B35 32%, #FF8C42 58%, #6BDBD0 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cal-wa:hover::before { opacity: 1; }

.cal-wa::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.cal-wa:hover {
  transform: translateY(-2px);
  background: #f03f00;
  box-shadow: 0 14px 34px rgba(255, 69, 0, 0.48);
  animation: none;
}
.cal-wa:hover::after { transform: rotate(45deg) translate(2px, -2px); }
/* Un latido lento. Lo justo para que la vista vuelva ahí después de leer las
   gráficas, sin convertirse en un anuncio parpadeante. */
@keyframes calWaPulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(255, 69, 0, 0.36), 0 0 0 0 rgba(255, 69, 0, 0.34); }
  55%      { box-shadow: 0 10px 28px rgba(255, 69, 0, 0.36), 0 0 0 14px rgba(255, 69, 0, 0); }
}
.cal-ppa { font-size: 12.5px; color: #6b7280; max-width: 62ch; line-height: 1.5; }
.cal-ppa a { color: #ff4500; font-weight: 700; }
.cal-ppa b { color: #1F271B; }
/* En residencial la línea no invita al PPA: aclara que no aplica. */
.cal-ppa--hogar { padding-left: 10px; border-left: 2px solid #2aa79e; }

/* ─────────────────────────────── responsive ─────────────────────────────── */
@media (max-width: 1280px) {
  .cal-shell.has-out { grid-template-columns: minmax(0, 0fr) minmax(0, 340px) minmax(0, 1fr); }
  .cal-shell { --cal-pt: 118px; --cal-pb: 24px; padding: var(--cal-pt) 24px var(--cal-pb); }
}
@media (max-width: 1080px) {
  /* Ya no cabe en una pantalla: se apila y se deja desplazar. */
  html, body.cal-body { height: auto; overflow: visible; }
  .cal-shell, .cal-shell.has-out {
    height: auto;
    grid-template-columns: minmax(0, 620px);
    justify-content: center;
    padding: 112px 20px 50px;
  }
  /* Apilado no hay hueco ni columna de resultados: las dos piezas vuelven a
     colocarse por orden. Sin esto, el `grid-column` de arriba les inventaría
     una columna 2 y una 3 que aquí no existen. */
  .cal-shell .cal-form, .cal-shell .cal-out { grid-column: auto; }
  /* Apilado, la página se desplaza entera: el formulario ya no hace de panel. */
  .cal-form, .cal-shell.has-out .cal-form { max-height: none; overflow: visible; }
  /* Y apilado el margen lateral sobra: aquí separa el `row-gap`. */
  .cal-shell.has-out .cal-out { margin-left: 0; }
  .cal-charts { grid-template-columns: 1fr; }
  /* Apiladas, la primera es la que se lee. Y la que contesta la pregunta con
     la que se llega aquí —cuánto baja mi factura— es la de las dos barras;
     el día típico explica por qué, y eso se lee después. */
  .cal-charts > .cal-card:nth-child(1) { order: 2; }
  .cal-charts > .cal-card:nth-child(2) { order: 1; }
  .cal-canvas { height: 230px; }
  .cal-hero-side { flex: 1 1 100%; }
  .cal-hero-side > div:first-child { border-left: none; }
}
@media (max-width: 768px) {
  /* Los campos y el enlace de ayuda, a tamaño de dedo. Y 16 px en los `input`:
     por debajo de eso Safari hace zoom al enfocar el campo y deja la página
     descuadrada al salir. */
  .cal-wrap input, .cal-city { font-size: 17px; padding-top: 15px; padding-bottom: 15px; }
  .cal-pills button { padding: 13px 4px; gap: 7px; }
  /* Todo a tamaño de dedo. El pulgar tapa por completo un pulsador de 21 px,
     y la barra entera —no sólo el pulsador— tiene que poder tocarse: en un
     rango, tocar la barra lleva el valor a ese punto, que en el móvil es más
     rápido que arrastrar. De ahí los 44 px de alto de zona activa, que es el
     mínimo que piden tanto Apple como Google, sobre una barra de 8. */
  .cal-sld { margin-top: 22px; }
  .cal-range { height: 44px; }
  .cal-range::-webkit-slider-runnable-track { height: 8px; }
  .cal-range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -10px; }
  .cal-range::-moz-range-track,
  .cal-range::-moz-range-progress { height: 8px; }
  .cal-range::-moz-range-thumb { width: 22px; height: 22px; }
  /* Los 44 px son de zona táctil, pero la barra pintada son 8: quedan 18 px de
     nada arriba y abajo que separaban la barra de su propio rótulo tanto como
     de la siguiente fila, y entonces no se veía qué barra manda qué cifra. El
     margen negativo recoge ese hueco sin tocar el blanco del dedo, que sigue
     midiendo lo mismo. */
  .cal-range { margin: -6px 0 -10px; }
  /* El número es el otro blanco: se puede teclear. 23 px con hueco arriba y
     abajo hasta los 44, y el filete permanente para que se lea como campo y no
     como cifra impresa. */
  .cal-sld-top { margin-bottom: 0; }
  .cal-sld-num { padding: 7px 12px 8px; }
  .cal-sld-num input { font-size: 23px; }
  /* El rótulo también lleva al campo —es un <label for>— y medía 17 px de
     alto. Crece alrededor de su línea base, así que el dibujo no se mueve. */
  .cal-sld-lbl { padding: 13px 0; }
  /* El campo de ubicación ya es un botón de 48 px de alto, así que aquí no
     hace falta agrandar el blanco de alrededor: sólo respirar un poco más
     entre él y la barra del área que lleva encima. */
  .cal-ubic { margin-top: 18px; }
  .cal-ubic-btn { padding: 15px 16px; font-size: 17px; }
  .cal-help { padding: 13px 0; margin-top: 2px; }
  /* El eco de la cifra vive aquí: es donde el formulario ocupa la pantalla
     entera y los resultados quedan por debajo del pliegue. */
  .cal-vivo { display: flex; }
  .cal-vivo.on { opacity: 1; transform: translate(-50%, 0); }
  .cal-cta { padding: 18px 20px; }
  /* En el móvil ocupa la línea entera: es lo único que hay que pulsar al
     terminar de leer los resultados. */
  .cal-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .cal-wa { width: 100%; box-sizing: border-box; padding: 18px 26px; font-size: 17px; }
  .cal-ppa { max-width: none; text-align: center; }
  .cal-ppa--hogar { padding-left: 0; border-left: none; }
  .guia-back { padding: 15px 26px 15px 20px; }
}

@media (max-width: 560px) {
  .cal-shell, .cal-shell.has-out { padding: 100px 14px 40px; }
  .cal-form { padding: 24px 20px 22px; border-radius: 22px; }
  .cal-title { font-size: 25px; }
  .cal-hero-main { padding: 20px 20px 16px; }
  .cal-hero-side > div { padding: 14px 16px; border-top: 1px solid #efeae3; }
  .cal-hero-side > div:nth-child(odd) { border-left: none; }
  .cal-card figcaption { font-size: 14px; }
  .cal-card figcaption i { font-size: 13px; }
  .cal-card figcaption i em { margin-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .cal-out { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ═══════════════════════ guía «dónde están los kWh» ═══════════════════════
   Página aparte, ésta sí con desplazamiento: es para leer, no para operar. */
body.guia-body { overflow: auto; height: auto; }

.guia {
  max-width: 1080px;
  margin: 0 auto;
  /* 150 px arriba: la cabecera es fija y de unos 115 px, y con menos hueco su
     caja se comía el clic del botón de volver aunque se viera debajo. */
  padding: 150px 24px 70px;
}
.guia-back {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px 13px 20px;
  border-radius: 100px;
  background: #fff;
  border: 1.5px solid #e4ded6;
  font-family: 'Satoshi', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1F271B;
  text-decoration: none;
  margin-bottom: 26px;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.guia-back svg { width: 17px; height: 17px; }
.guia-back:hover {
  color: #ff4500;
  border-color: #ff4500;
  transform: translateX(-3px);
}

.guia-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 22px;
}
.guia-step {
  position: relative;
  background: #fff;
  border-radius: 22px;
  padding: 26px 26px 22px;
  box-shadow: 0 2px 20px rgba(31, 39, 27, 0.06);
}
.guia-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ff4500;
  color: #fff;
  display: grid;
  place-items: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 12px;
}
.guia-step h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 21px;
  letter-spacing: -0.015em;
  color: #1F271B;
  margin: 0 0 8px;
}
.guia-step p {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #4a5250;
}
.guia-fig { margin: 0; }
.guia-fig svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  background: #f6f3ef;
}
.guia-fig figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}
.guia-fig figcaption b { color: #e11d1d; }

@media (max-width: 560px) {
  .guia { padding: 100px 16px 50px; }
  .guia-grid { grid-template-columns: 1fr; }
  .guia-step { padding: 22px 18px 18px; }
}

/* ═══════════════════ medir el área del techo ═══════════════════
   Pantalla completa de ortofoto con un panel flotante. La foto necesita todo
   el sitio: es donde el visitante tiene que reconocer su propio techo. */
body.ma-body { overflow: hidden; height: 100%; }

#maMapa {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: #dcd8d2;
}
.leaflet-container { font-family: 'Satoshi', sans-serif; }
.leaflet-control-attribution { font-size: 10px !important; }

/* El vértice arrastrable. Blanco con aro naranja para que se vea sobre
   cualquier cubierta, clara u oscura. */
.ma-pin {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #ff4500;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  cursor: move;
}

/* El puntero. Leaflet pone una mano —«arrástrame»— y aquí lo que se hace es
   pinchar esquinas, así que va una mira: naranja con borde blanco para que
   se lea sobre un tejado claro y sobre uno oscuro. Al arrastrar el mapa
   vuelve la mano cerrada, que es lo que está pasando. */
#maMapa.leaflet-grab,
#maMapa .leaflet-interactive {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg stroke-linecap='round'%3E%3Cpath d='M14 2v8M14 18v8M2 14h8M18 14h8' stroke='white' stroke-width='4.5'/%3E%3Cpath d='M14 2v8M14 18v8M2 14h8M18 14h8' stroke='%23ff4500' stroke-width='2'/%3E%3C/g%3E%3Ccircle cx='14' cy='14' r='2.6' fill='%23ff4500' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") 14 14, crosshair;
}
#maMapa.leaflet-dragging .leaflet-grab,
#maMapa.leaflet-dragging.leaflet-grab { cursor: grabbing; }
#maMapa .leaflet-marker-draggable { cursor: move; }

/* El rótulo que sigue al puntero: qué esquina toca ahora. */
.ma-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 450;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 9px;
  background: rgba(31, 39, 27, 0.9);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}
.ma-tip[hidden],
body.ma-con-demo .ma-tip { display: none; }

/* «Ver cómo se hace». Pequeño y bajo la ayuda: está para quien se atasque. */
.ma-demo-ver {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0 2px;
  padding: 0;
  border: 0;
  background: none;
  font-family: 'Satoshi', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #ff4500;
  cursor: pointer;
}
.ma-demo-ver svg { width: 17px; height: 17px; flex: none; }
.ma-demo-ver:hover span { text-decoration: underline; }

/* La demostración, encima del mapa. */
.ma-demo {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(31, 39, 27, 0.5);
  animation: calModalFondo 0.2s ease both;
}
.ma-demo[hidden] { display: none; }
.ma-demo-caja {
  position: relative;
  width: min(440px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: #fffcf9;
  border-radius: 22px;
  padding: 20px 20px 18px;
  box-shadow: 0 18px 60px rgba(31, 39, 27, 0.3);
}
.ma-demo-caja h2 {
  margin: 0 40px 14px 2px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: #1F271B;
}
.ma-demo-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f1ede8;
  color: #1F271B;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ma-demo-x:hover { background: #e9e3db; }
.ma-demo-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  font-family: 'Satoshi', sans-serif;
}
.ma-demo-pasos {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.ma-demo-pasos li {
  counter-increment: paso;
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #8b918c;
  transition: background 0.25s ease, color 0.25s ease;
}
.ma-demo-pasos li::before {
  content: counter(paso);
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e9e3db;
  color: #6b7280;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  transition: background 0.25s ease, color 0.25s ease;
}
.ma-demo-pasos li.on { background: #fdf1ec; color: #1F271B; }
.ma-demo-pasos li.on::before { background: #ff4500; color: #fff; }
.ma-demo-ok { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) {
  .ma-demo { animation: none; }
  .ma-demo-pasos li { color: #1F271B; }
}

.ma-panel {
  position: fixed;
  z-index: 500;
  top: 22px;
  left: 22px;
  width: 356px;
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  background: rgba(255, 252, 249, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 24px;
  padding: 20px 22px 22px;
  box-shadow: 0 8px 40px rgba(31, 39, 27, 0.22);
}
.ma-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  text-decoration: none;
  margin-bottom: 14px;
  transition: color 0.2s ease;
}
.ma-back svg { width: 15px; height: 15px; }
.ma-back:hover { color: #ff4500; }
.ma-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 25px;
  letter-spacing: -0.02em;
  color: #1F271B;
  margin: 0 0 16px;
}

.ma-form {
  position: relative;
  display: flex;
  align-items: stretch;
  background: #f1ede8;
  border: 1.5px solid transparent;
  border-radius: 100px;
  padding: 4px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ma-form:focus-within { border-color: #ff4500; background: #fff; }
.ma-in {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: 'Satoshi', sans-serif;
  font-size: 15px;
  color: #1F271B;
  padding: 11px 8px 11px 14px;
}
.ma-in::placeholder { color: #a8adaa; }
.ma-go {
  flex: none;
  width: 40px; height: 40px;
  border: none;
  border-radius: 50%;
  background: #1F271B;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}
.ma-go svg { width: 18px; height: 18px; }
.ma-go:hover:not(:disabled) { background: linear-gradient(90deg, #FF4500 0%, #FF6B35 32%, #FF8C42 58%, #6BDBD0 100%); }
.ma-go:disabled { opacity: 0.45; cursor: default; }

/* Sugerencias de dirección. Cuelgan de la píldora de búsqueda y sólo salen
   con cuatro caracteres tecleados: por debajo de eso Nominatim devuelve medio
   país. El título es la calle; la línea gris de abajo es lo que distingue dos
   calles con el mismo nombre en ciudades distintas. */
.ma-sug {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 306px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid #e9e3db;
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(31, 39, 27, 0.18);
}
.ma-sug[hidden] { display: none; }
.ma-sug li {
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  line-height: 1.3;
}
.ma-sug li b {
  display: block;
  font-family: 'Satoshi', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1F271B;
}
.ma-sug li span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #8b918c;
}
.ma-sug li:hover,
.ma-sug li.on { background: #fdf1ec; }
.ma-sug li.on b { color: #ff4500; }

/* Pie de la caja: por qué hay seis calles con el mismo nombre y qué escribir
   para quedarse con una. No se elige ni se resalta. */
.ma-sug li.ma-pista {
  /* Pegado al fondo de la caja: con siete calles la lista tiene scroll, y un
     pie normal se queda por debajo del recorte sin que nadie lo lea. */
  position: sticky;
  bottom: -6px;
  margin-top: 4px;
  padding: 9px 12px 10px;
  background: #fff;
  border-top: 1px solid #f0eae3;
  border-radius: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: #8b918c;
  cursor: default;
}
.ma-sug li.ma-pista:hover { background: none; }

.ma-msg {
  margin: 10px 2px 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #6b7280;
}
.ma-msg.err { color: #c2410c; }
.ma-msg[hidden] { display: none; }

/* La medida. El número manda: es lo único que el visitante vino a buscar. */
.ma-medida {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(31, 39, 27, 0.12);
}
.ma-big { display: flex; align-items: baseline; gap: 9px; }
.ma-big b {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #ff4500;
}
.ma-big span { font-size: 14px; color: #6b7280; }
.ma-meta {
  display: flex;
  margin: 14px 0 0;
  border-top: 1px solid rgba(31, 39, 27, 0.09);
}
.ma-meta > div { flex: 1; padding: 10px 10px 0 0; }
.ma-meta > div + div { padding-left: 14px; border-left: 1px solid rgba(31, 39, 27, 0.09); }
.ma-meta dt { font-size: 11.5px; color: #a8adaa; }
.ma-meta dd {
  margin: 3px 0 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1F271B;
}

.ma-ayuda {
  margin: 16px 0 0;
  padding: 10px 12px;
  background: #f1ede8;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #4a5250;
}
.ma-big b.mal { color: #c2410c; }
.ma-ayuda.mal { background: #fff0e6; color: #b4470f; }
.ma-acciones { display: flex; gap: 8px; margin-top: 14px; }
.ma-btn {
  flex: 1;
  padding: 10px 12px;
  border: 1.5px solid #e4ded6;
  border-radius: 100px;
  background: #fff;
  font-family: 'Satoshi', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #1F271B;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.ma-btn:hover:not(:disabled) { border-color: #ff4500; color: #ff4500; }
.ma-btn:disabled { opacity: 0.4; cursor: default; }
.ma-usar { margin-top: 10px; }
.ma-usar:disabled {
  background: #e4ded6;
  color: #a8adaa;
  box-shadow: none;
  cursor: default;
  transform: none;
}
.ma-fine {
  margin: 12px 2px 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #a8adaa;
}

@media (max-width: 700px) {
  /* La foto es la herramienta: en un teléfono no puede ir de acompañante.
     Antes el panel era una hoja inferior de hasta 62 vh y al mapa le quedaba
     un tercio de pantalla — justo la superficie sobre la que hay que
     reconocer un techo propio y acertarle a sus cuatro esquinas con el dedo.
     Se le devuelve la pantalla entera y el panel se deshace en dos piezas que
     flotan encima: arriba lo de encontrar el techo, abajo lo de medirlo. */
  .ma-panel {
    display: contents;
  }

  /* ── arriba: volver y buscar ─────────────────────────────────────────── */
  .ma-top {
    position: fixed;
    z-index: 500;
    top: calc(10px + env(safe-area-inset-top));
    left: 10px;
    right: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    /* Sin fondo propio: cada pieza flota por sí misma sobre la foto, que es
       lo que la hace leerse como mando y no como barra. */
    background: none;
    box-shadow: none;
    padding: 0;
    max-height: none;
    overflow: visible;
  }
  /* El rótulo sobra cuando la flecha está sola en una esquina, y el sitio que
     ocupa lo necesita el buscador. Sigue estando para quien lea la página con
     un lector de pantalla. */
  .ma-back {
    flex: none;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
    background: rgba(255, 252, 249, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 3px 14px rgba(31, 39, 27, 0.25);
    color: #1F271B;
  }
  .ma-back span { display: none; }
  .ma-back svg { width: 18px; height: 18px; }
  /* El título se calla, pero no se borra: sigue siendo el <h1> de la página. */
  .ma-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ma-form {
    flex: 1 1 auto;
    min-width: 0;
    background: rgba(255, 252, 249, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 3px 14px rgba(31, 39, 27, 0.25);
  }
  /* El mensaje del buscador cae debajo, y necesita fondo propio: va sobre una
     ortofoto, y ahí no hay color de letra que se lea contra cualquier cosa. */
  .ma-msg {
    flex: 1 1 100%;
    margin: 0;
    padding: 8px 14px;
    border-radius: 14px;
    background: rgba(255, 252, 249, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 3px 14px rgba(31, 39, 27, 0.2);
  }

  /* ── abajo: la medida y los botones ──────────────────────────────────── */
  .ma-hoja {
    position: fixed;
    z-index: 500;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 13px 16px 15px;
    border-radius: 22px;
    background: rgba(255, 252, 249, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 34px rgba(31, 39, 27, 0.26);
  }
  .ma-medida { margin-top: 0; padding-top: 0; border-top: none; }
  .ma-big b { font-size: 34px; }
  /* Las dos cifras de apoyo pasan de dos columnas con filete a una línea
     suelta: dicen lo mismo en 18 px de alto en vez de en 50. */
  .ma-meta {
    display: flex;
    gap: 0;
    margin-top: 6px;
    border-top: none;
  }
  .ma-meta > div { flex: none; padding: 0; }
  .ma-meta > div + div { padding-left: 0; border-left: none; }
  .ma-meta > div + div::before {
    content: '\00b7';
    color: #a8adaa;
    margin: 0 8px;
  }
  .ma-meta > div { display: inline; }
  .ma-meta dt, .ma-meta dd { display: inline; font-size: 12.5px; }
  .ma-meta dt::after { content: ' '; }
  .ma-meta dd { margin: 0; }
  .ma-ayuda { margin-top: 10px; padding: 8px 11px; font-size: 11.5px; line-height: 1.4; }
  /* Sin un solo punto marcado no hay nada que medir: el «sin datos» grande, la
     línea de apoyo vacía y tres botones apagados son 130 px de techo tapado
     para no decir nada. La hoja arranca siendo sólo la instrucción, y crece
     cuando hay algo que enseñar. */
  body.ma-vacio .ma-medida,
  body.ma-vacio .ma-botonera { display: none; }
  body.ma-vacio .ma-ayuda { margin-top: 0; }
  /* Deshacer, Limpiar y la llamada en una sola fila: eran dos, y una fila de
     botón en un teléfono son 55 px de mapa. */
  .ma-botonera {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
  }
  .ma-acciones { flex: none; margin-top: 0; }
  .ma-btn { flex: none; padding: 12px 13px; }
  .ma-usar {
    flex: 1;
    min-width: 0;
    margin-top: 0;
    padding: 14px 12px;
    font-size: 15px;
  }
  /* La letra pequeña sólo mientras no hay nada marcado: es una instrucción
     para antes de empezar, y después son tres líneas de mapa tapado. */
  body:not(.ma-vacio) .ma-fine { display: none; }
  .ma-fine { margin: 10px 2px 0; }

  /* Los mandos de Leaflet se apartan de los nuestros: el zoom baja por debajo
     del buscador y la atribución de Esri sube por encima de la hoja — taparla
     no sería sólo feo, es la licencia de la ortofoto. Las dos medidas las
     publica el JS, porque las dos piezas cambian de alto: el buscador cuando
     sale un mensaje debajo, la hoja cuando empieza a haber puntos. */
  .leaflet-top.leaflet-right { top: var(--ma-top, 63px); }
  .leaflet-bottom { bottom: var(--ma-hoja, 180px); }
}

/* Pantallas cortas —un iPhone SE, un Android pequeño— donde el mapa se queda
   por debajo de la mitad aunque la hoja ya sea la mínima. Ahí no sobra nada
   que quitar, así que se encoge todo un punto: la cifra sigue siendo lo más
   grande de la hoja y los botones siguen pasando de los 44 px. */
@media (max-width: 700px) and (max-height: 620px) {
  .ma-hoja { padding: 11px 14px 12px; }
  .ma-big b { font-size: 27px; }
  .ma-meta dt, .ma-meta dd { font-size: 12px; }
  .ma-ayuda { margin-top: 8px; padding: 7px 9px; font-size: 11px; }
  .ma-botonera { margin-top: 9px; }
  .ma-btn { padding: 12px 10px; font-size: 12.5px; }
  .ma-usar { padding: 13px 10px; font-size: 14px; }
  .ma-fine { margin-top: 8px; font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Puerta de datos
   ----------------------------------------------------------------------
   La cifra del ahorro se ve siempre: es lo que se vino a buscar. Lo que
   se cubre es el detalle —el equipo, la inversión, el retorno y las dos
   gráficas—, que se deja entrever borroso con un solo botón encima.

   El formulario no vive en la página: vive en un diálogo que se abre al
   pulsar ese botón. Puesto en la página empujaba las gráficas hacia
   abajo y ocupaba más sitio que el resultado.

   El desenfoque es decorativo, no seguridad: los números siguen en el
   HTML y cualquiera con la consola abierta los ve. Es un intercambio,
   no una caja fuerte.
   ══════════════════════════════════════════════════════════════════════ */

.cal-hero-side,
.cal-charts {
  transition: filter 0.45s ease, opacity 0.45s ease;
}
.cal-out.cal-cerrado .cal-hero-side,
.cal-out.cal-cerrado .cal-charts {
  filter: blur(7px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
@media (prefers-reduced-motion: reduce) {
  .cal-hero-side, .cal-charts { transition: none; }
}

/* Envoltorio de las gráficas: sólo existe para dar un lienzo sobre el que
   posar el botón. Hereda el sitio que tenían las gráficas en la columna
   para no alterar el reparto vertical. */
.cal-velo {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cal-velo > .cal-charts { flex: 1; min-height: 0; }

.cal-abrir {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(320px, calc(100% - 32px));
  text-align: center;
}
.cal-abrir button {
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #ff4500;
  border: none;
  border-radius: 999px;
  padding: 14px 26px;
  width: 100%;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(255, 69, 0, 0.32);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.cal-abrir button:hover { filter: brightness(0.94); transform: translateY(-1px); }
.cal-abrir span {
  font-size: 12.5px;
  color: #1F271B;
  background: rgba(255, 252, 249, 0.86);
  border-radius: 999px;
  padding: 4px 12px;
}

/* ── el diálogo ──────────────────────────────────────────────────────── */

.cal-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(31, 39, 27, 0.42);
  backdrop-filter: blur(2px);
  animation: calModalFondo 0.2s ease both;
}
/* Todo lo de dentro mide su ancho con el borde y el relleno incluidos: un
   campo al 100 % cabe en la caja en vez de asomarse 28 px por la derecha y
   comerse el margen. */
.cal-modal-caja, .cal-modal-caja * { box-sizing: border-box; }

.cal-modal-caja {
  background: #fff;
  border-radius: 20px;
  padding: 26px 26px 22px;
  width: min(400px, 100%);
  max-height: calc(100vh - 40px);
  /* Sólo se desplaza a lo alto; a lo ancho no hay nada que desplazar. */
  overflow: hidden auto;
  box-shadow: 0 18px 60px rgba(31, 39, 27, 0.24);
  position: relative;
  animation: calModalCaja 0.25s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes calModalFondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes calModalCaja {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cal-modal, .cal-modal-caja { animation: none; }
}

.cal-modal-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  color: #6b7280;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-modal-x:hover { background: #f6f3ef; color: #1F271B; }

.cal-modal-caja h2 {
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 5px;
  padding-right: 30px;
  color: #1F271B;
}
.cal-modal-sub {
  font-size: 13.5px;
  color: #6b7280;
  margin: 0 0 18px;
  line-height: 1.5;
}

.cal-puerta-campos { display: grid; gap: 10px; }
.cal-puerta-campos label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  color: #6b7280;
  min-width: 0;
}
.cal-puerta-campos input {
  font: inherit;
  font-size: 15px;
  color: #1F271B;
  padding: 11px 13px;
  border: 1px solid #e4ded6;
  border-radius: 11px;
  background: #fdfcfa;
  width: 100%;
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cal-puerta-campos input:focus {
  outline: none;
  border-color: #ff4500;
  box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.12);
}
.cal-puerta-campos input[aria-invalid="true"] { border-color: #d92d20; }

.cal-puerta-check {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.45;
  color: #6b7280;
  margin-top: 12px;
}
.cal-puerta-check input {
  margin: 1px 0 0;
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: #ff4500;
}
.cal-puerta-check a { color: #ff4500; }

.cal-puerta-btn {
  margin-top: 18px;
  width: 100%;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: #ff4500;
  border: none;
  border-radius: 999px;
  padding: 14px 20px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.cal-puerta-btn:hover { filter: brightness(0.94); }
.cal-puerta-btn[disabled] { opacity: 0.6; cursor: progress; }

.cal-puerta-err { margin: 11px 0 0; font-size: 13px; color: #d92d20; line-height: 1.45; }
.cal-puerta-nota { margin: 12px 0 0; font-size: 11.5px; color: #a8adaa; line-height: 1.45; }

/* El campo trampa: invisible para una persona, irresistible para un bot
   que rellena todo lo que encuentra. Si llega con algo, se descarta. */
.cal-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Acuse de recibo, arriba del todo y por su cuenta. */
.cal-puerta-ok {
  background: #fff;
  border: 1px solid #e4ded6;
  border-left: 3px solid #ff4500;
  border-radius: 14px;
  padding: 13px 17px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #1F271B;
  flex: none;
}

@media (max-width: 620px) {
  .cal-modal { padding: 14px; align-items: flex-end; }
  .cal-modal-caja { padding: 22px 20px 18px; border-radius: 18px; }
  .cal-abrir button { font-size: 14.5px; padding: 13px 20px; }
}


/* ── Medir el techo en el móvil, más limpio ─────────────────────────────
   Mandos más ligeros, el aviso compacto, y la hoja de abajo solo con la
   instrucción hasta que hay un punto marcado. */
@media (max-width: 768px) {
  .ma-back, .ma-form, .ma-msg, .ma-hoja { box-shadow: 0 2px 10px rgba(31, 39, 27, 0.16); }
  .ma-form { border-radius: 14px; }
  .ma-back { border-radius: 14px; }
  .ma-msg { padding: 7px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; }
  .ma-hoja { border-radius: 18px; padding: 12px 14px 13px; }
  .ma-ayuda { margin-top: 8px; padding: 0; background: none !important; font-size: 13px; line-height: 1.45; color: #1F271B; }
  body.ma-vacio .ma-ayuda { margin-top: 0; }
  .ma-demo-ver { margin-top: 8px; font-size: 12.5px; }
  body.ma-vacio .ma-fine { display: none; }
  .ma-fine { margin-top: 8px; font-size: 11.5px; }
  .leaflet-top.leaflet-right { margin-top: 64px; }
}