/* ==========================================================================
   Clima Central — Componentes
   ========================================================================== */

/* --- Píldora / badge ---------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  padding: 7px 16px;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--c-ink);
}

.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-lime);
  flex: none;
}

.pill--soft {
  border-color: var(--c-line);
  padding: 7px 14px;
  font-weight: 400;
  color: var(--c-body);
}

.pill--on-dark {
  border-color: var(--c-body);
  color: var(--c-white);
}

.pill--square::before {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.pill--nodot::before { display: none; }

.pill__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

/* --- Eyebrow ------------------------------------------------------------ */

.eyebrow {
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
}

.eyebrow--lime { color: var(--c-lime); }
.eyebrow--ink { color: var(--c-ink); }
.eyebrow--on-dark { color: var(--c-on-dark-55); }

/* --- Botones ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: none;
  border-radius: var(--r-pill);
  padding: 14px 30px;
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.btn--dark { background: var(--c-ink); color: var(--c-white); }
.btn--dark:hover { background: var(--c-green); color: var(--c-white); }

.btn--lime { background: var(--c-lime); color: var(--c-ink); }
.btn--lime:hover { background: var(--c-lime-hover); color: var(--c-ink); }

.btn--green { background: var(--c-green); color: var(--c-white); }
.btn--green:hover { background: var(--c-ink); color: var(--c-white); }

.btn--white { background: var(--c-white); color: var(--c-ink); }
.btn--white:hover { background: var(--c-lime); color: var(--c-ink); }

.btn--ghost {
  background: transparent;
  border: 1.5px solid var(--c-line);
  color: var(--c-body);
  padding: 12px 26px;
}

.btn--ghost:hover { border-color: var(--c-ink); color: var(--c-ink); }

.btn--sm { padding: 12px 24px; }

/* Botón con flecha en círculo: el padding derecho se reduce para el círculo */
.btn--arrow { padding-right: 10px; padding-block: 10px; padding-left: 28px; }
.btn--arrow.btn--sm { padding: 8px 8px 8px 22px; }
.btn--arrow.btn--lg { padding: 16px 16px 16px 32px; font-size: var(--fs-16); }

.btn__arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--fs-14);
  flex: none;
}

.btn--dark .btn__arrow { background: var(--c-lime); color: var(--c-ink); }
.btn--lime .btn__arrow { background: var(--c-ink); color: var(--c-lime); }
.btn--sm .btn__arrow { width: 28px; height: 28px; font-size: var(--fs-13); }
.btn--lg .btn__arrow { width: 34px; height: 34px; font-size: var(--fs-15); }

/* Enlace con subrayado lima */
.link-mark {
  font-size: var(--fs-15);
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-lime);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.link-mark:hover { color: var(--c-green); }

/* Sobre fondo oscuro, el color de tinta del enlace es el mismo que el fondo:
   solo se vería el subrayado lima flotando. */
.card--dark .link-mark,
.card--inner-dark .link-mark,
.section--dark .link-mark,
.panel-green .link-mark { color: var(--c-white); }

.card--dark .link-mark:hover,
.card--inner-dark .link-mark:hover,
.section--dark .link-mark:hover,
.panel-green .link-mark:hover { color: var(--c-lime); }

/* Chip de enlace (ciudades, filtros) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-size: var(--fs-14);
  color: var(--c-body);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.chip:hover { border-color: var(--c-ink); color: var(--c-ink); }

.chip--active { border-color: var(--c-ink); color: var(--c-ink); font-weight: 500; }

/* --- Tarjetas ----------------------------------------------------------- */

.card {
  border-radius: var(--r-card);
  padding: var(--pad-card);
}

.card--outline { border: 1.5px solid var(--c-line); }
.card--surface { background: var(--c-surface); }
.card--white { background: var(--c-white); }
.card--dark { background: var(--c-ink); color: var(--c-white); }
.card--lime { background: var(--c-lime); color: var(--c-ink); }
.card--green { background: var(--c-green); color: var(--c-white); }
.card--inner-dark { background: var(--c-ink-soft); color: var(--c-white); }

.card--dark p:not(.card__figure),
.card--inner-dark p:not(.card__figure) { color: var(--c-muted-dark); }

.card--pad-lg { padding: clamp(28px, 5vw, 56px); }

/* Tarjeta clicable */
a.card { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--c-ink); }
a.card--surface:hover { background: var(--c-line); color: var(--c-ink); }
a.card--outline:hover { border-color: var(--c-ink); color: var(--c-ink); }
a.card--dark { color: var(--c-white); }
a.card--dark:hover { background: var(--c-green); color: var(--c-white); }

.card__title { font-size: var(--fs-22); font-weight: 500; line-height: var(--lh-heading); }
.card__text { font-size: var(--fs-15); line-height: var(--lh-body); color: var(--c-body); }
.card--dark .card__text { color: var(--c-muted-dark); }

/* Tarjeta de dato (observatorio de precios) */
.figure-card { background: var(--c-white); border-radius: var(--r-card); padding: 28px; }
.figure-card--dark { background: var(--c-ink); }

.figure-card__label { font-size: var(--fs-13); color: var(--c-muted); }
.figure-card--dark .figure-card__label { color: var(--c-muted-dark); }

.figure-card__value {
  margin-top: 10px;
  font-size: var(--fs-figure);
  font-weight: 700;
  letter-spacing: var(--ls-title);
  color: var(--c-ink);
}

.figure-card--dark .figure-card__value { color: var(--c-lime); }

.figure-card__note { margin-top: 8px; font-size: var(--fs-13); color: var(--c-body); }
.figure-card--dark .figure-card__note { color: var(--c-muted-dark); }

/* --- Icono cuadrado ----------------------------------------------------- */

.icon-tile {
  width: 40px;
  height: 40px;
  border-radius: var(--r-icon);
  background: var(--c-lime);
  color: var(--c-ink);
  display: grid;
  place-items: center;
  font-size: var(--fs-15);
  font-weight: 600;
  flex: none;
}

.icon-tile--sm {
  width: 30px;
  height: 30px;
  border-radius: var(--r-icon-sm);
  font-size: 11px;
}

.step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-lime);
  display: grid;
  place-items: center;
  font-size: var(--fs-13);
  font-weight: 600;
  flex: none;
}

/* Fila con icono + texto */
.media {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
}

.media--sm { gap: 18px; }

/* --- Estadísticas ------------------------------------------------------- */

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
}

.stat__value {
  font-size: var(--fs-stat);
  font-weight: 700;
  letter-spacing: var(--ls-title);
}

.stat__value--lime { color: var(--c-lime); }
.stat__label { margin-top: 4px; font-size: var(--fs-13); color: var(--c-muted); }

/* --- Migas de pan ------------------------------------------------------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-13);
  color: var(--c-muted);
  margin-bottom: 28px;
}

.breadcrumb a { color: var(--c-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-ink); }
.breadcrumb [aria-current] { color: var(--c-ink); }

/* --- Hero interior ------------------------------------------------------ */

.hero-inner { padding: 28px var(--pad-x) var(--pad-y-sm); }
.hero-inner__title { margin-top: 22px; font-size: var(--fs-h1-inner); max-width: 860px; }
.hero-inner__lead {
  margin-top: 20px;
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--c-body);
  max-width: 640px;
}

/* --- Imagen ------------------------------------------------------------- */

.media-frame {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-surface);
}

.media-frame--sm { border-radius: var(--r-block); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-16-10 { aspect-ratio: 16 / 10; }

/* La ilustración del héroe trae su propio fondo (#F7F7F7): el marco lo iguala
   para que no se vea un borde de otro tono mientras carga. */
.media-frame--illustration { background: #F7F7F7; }
.media-frame--illustration img { object-fit: contain; }

/* Figura con pie: el texto del figcaption es contexto real para el lector y
   para el buscador, así que se muestra siempre, no al pasar el ratón. */

.figure { margin: 0; }

.figure__caption {
  margin-top: 14px;
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--c-body);
  text-wrap: pretty;
}

.figure__caption strong { color: var(--c-ink); font-weight: 600; }

/* Marcador de imagen pendiente (equivale al <image-slot> del design) */
.img-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 24px;
  background: var(--c-surface);
  border: 1.5px dashed var(--c-line);
  color: var(--c-muted);
  font-size: var(--fs-13);
  text-align: center;
}

/* --- Lista de titulares (normativa, blog) ------------------------------- */

.headline-list { display: flex; flex-direction: column; }

.headline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: center;
  padding: 26px 8px;
  border-top: 1px solid var(--c-line);
  text-decoration: none;
  color: var(--c-ink);
}

.headline-list .headline:last-child { border-bottom: 1px solid var(--c-line); }
.headline:hover { background: var(--c-surface); color: var(--c-ink); }

.headline__date { font-size: var(--fs-13); color: var(--c-muted); }
.headline__title { flex: 1 1 300px; font-size: var(--fs-19); font-weight: 500; line-height: 1.4; }
.headline__tag { font-size: var(--fs-13); font-weight: 500; color: var(--c-green); }

/* --- Tarjeta de artículo ------------------------------------------------ */

.post { display: flex; flex-direction: column; text-decoration: none; color: var(--c-ink); }
.post__meta { margin-top: 16px; font-size: var(--fs-13); color: var(--c-muted); }
.post__title { margin-top: 8px; font-size: var(--fs-20); font-weight: 500; line-height: var(--lh-heading); }
.post:hover .post__title { color: var(--c-green); }

/* --- Tabla de datos ----------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-card);
}

.data-table { min-width: 640px; font-size: var(--fs-15); }

.data-table th,
.data-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}

.data-table thead th {
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
  background: var(--c-surface);
  white-space: nowrap;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--c-surface); }
.data-table td strong { font-weight: 600; }
.data-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.table-note { margin-top: 12px; font-size: var(--fs-13); color: var(--c-muted); }

/* Estado de convocatoria */
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-13);
  font-weight: 500;
  white-space: nowrap;
}

.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.status--open { color: var(--c-green); }
.status--open::before { background: var(--c-lime); }
.status--soon { color: var(--c-body); }
.status--soon::before { background: var(--c-line-strong); }
.status--closed { color: var(--c-muted); }
.status--closed::before { background: var(--c-muted); }

/* --- Acordeón / FAQ ----------------------------------------------------- */

.faq { border-top: 1px solid var(--c-line); }

.faq__item { border-bottom: 1px solid var(--c-line); }

.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 8px;
  font-size: var(--fs-18);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "+";
  font-size: var(--fs-20);
  color: var(--c-green);
  flex: none;
}

.faq__item[open] summary::after { content: "−"; }
.faq__item summary:hover { color: var(--c-green); }

.faq__body {
  padding: 0 8px 24px;
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--c-body);
  max-width: 72ch;
}

.faq__body > * + * { margin-top: 14px; }

/* --- Sumario lateral ---------------------------------------------------- */

.toc {
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 22px;
}

.toc__title {
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 14px;
}

.toc a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-chip);
  font-size: var(--fs-15);
  color: var(--c-body);
}

.toc a:hover { background: var(--c-surface); color: var(--c-ink); }
.toc a[aria-current="true"] { background: var(--c-surface); color: var(--c-ink); font-weight: 500; }

/* --- Aviso de dato ------------------------------------------------------ */

.datanote {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--c-surface);
  border-radius: var(--r-block);
  padding: 18px 22px;
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--c-body);
}

.datanote strong { color: var(--c-ink); }

/* --- Buscador ----------------------------------------------------------- */

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-surface);
  border-radius: var(--r-pill);
  padding: 8px 8px 8px 26px;
}

.search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--fs-16);
  color: var(--c-ink);
}

.search__go {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-lime);
  display: grid;
  place-items: center;
  font-size: var(--fs-15);
  flex: none;
}

.search__go:hover { background: var(--c-green); }

.search-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
  background: var(--c-white);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 10px;
}

.search-results[hidden] { display: none; }

.search-results a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-item);
  font-size: var(--fs-15);
  color: var(--c-ink);
}

.search-results a:hover { background: var(--c-surface); }
.search-results .tag { font-size: var(--fs-12); color: var(--c-muted); }
.search-results .empty { padding: 12px 16px; font-size: var(--fs-15); color: var(--c-muted); }

/* --- Formulario / calculadora ------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 8px; }

.field__label { font-size: var(--fs-14); font-weight: 500; color: var(--c-ink); }
.field__hint { font-size: var(--fs-13); color: var(--c-muted); }

.field input,
.field select {
  width: 100%;
  background: var(--c-white);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-chip);
  padding: 12px 16px;
  font-size: var(--fs-15);
  outline: none;
}

.field input:focus,
.field select:focus { border-color: var(--c-ink); }

.result {
  background: var(--c-ink);
  border-radius: var(--r-card);
  padding: 28px;
  color: var(--c-white);
}

/* Fila repetible: una estancia de la calculadora de frigorías */

.fila {
  position: relative;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-block);
  padding: 20px;
  background: var(--c-white);
}

.fila + .fila { margin-top: 12px; }

.fila__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.fila__title {
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
}

.fila__remove {
  border: none;
  background: transparent;
  font-size: var(--fs-13);
  color: var(--c-muted);
  text-decoration: underline;
  padding: 4px;
}

.fila__remove:hover { color: var(--c-ink); }
.fila__remove[hidden] { display: none; }

.fila__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 14px;
}

/* Desglose de resultados por estancia */

.desglose {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.desglose__fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--fs-14);
  color: var(--c-muted-dark);
}

.desglose__fila strong { color: var(--c-white); font-weight: 600; }

/* Barra de sección (área para instaladores) */

.subbar {
  background: var(--c-green);
  color: var(--c-white);
  padding: 10px var(--pad-x);
}

.subbar__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-14);
}

.subbar__label { display: inline-flex; align-items: center; gap: 8px; }

.subbar__label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-lime);
}

.subbar__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.subbar__links a { color: rgba(255, 255, 255, 0.8); }
.subbar__links a:hover { color: var(--c-lime); }
.subbar__links a[aria-current="page"] { color: var(--c-lime); font-weight: 500; }

/* Selector de servicio con aspecto de píldora (radios ocultos) */

.toggle { display: flex; flex-wrap: wrap; gap: 8px; }

.toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.toggle label {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--c-body);
  border-radius: var(--r-pill);
  padding: 10px 20px;
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--c-white);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.toggle input:checked + label {
  background: var(--c-lime);
  border-color: var(--c-lime);
  color: var(--c-ink);
}

.toggle input:focus-visible + label {
  outline: 2px solid var(--c-lime);
  outline-offset: 3px;
}

/* Deslizadores */

.rango { display: flex; flex-direction: column; gap: 10px; }

.rango__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.rango__label {
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted-dark);
}

.rango__valor { font-size: var(--fs-17); font-weight: 600; color: var(--c-white); }

.rango input[type="range"] {
  width: 100%;
  accent-color: var(--c-lime);
}

/* Ficha de solicitud (ejemplo de lo que recibe el partner) */

.solicitud {
  background: var(--c-white);
  border-radius: var(--r-block);
  padding: 24px;
}

.solicitud__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-line);
}

.solicitud__title { font-size: var(--fs-17); font-weight: 600; }

.badge {
  display: inline-flex;
  align-items: center;
  background: var(--c-lime);
  color: var(--c-ink);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  font-size: var(--fs-13);
  font-weight: 500;
}

.badge--muted { background: #333333; color: var(--c-muted-dark); }

.solicitud__body { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }

.solicitud__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  font-size: var(--fs-15);
}

.solicitud__row dt { color: var(--c-muted); }
.solicitud__row dd { margin: 0; font-weight: 500; text-align: right; }

.solicitud__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
}

/* Lista con marca de verificación */

.checklist { display: flex; flex-direction: column; gap: 10px; }

/* El marcador va posicionado y no como ítem flex a propósito. Con `display:
   flex` en el <li>, cada <strong> o <a> de dentro se convierte en un ítem más
   y el texto se reparte en columnas en lugar de fluir: en móvil eso sacaba la
   lista fuera de la pantalla. Con posición absoluta el contenido es texto
   normal y se puede poner en negrita o enlazar sin romper el bloque. */
.checklist li {
  position: relative;
  background: var(--c-surface);
  border-radius: var(--r-block);
  padding: 20px 22px 20px 60px;
  font-size: var(--fs-16);
  line-height: 1.55;
}

.checklist--on-white li { background: var(--c-white); }

.checklist li::before {
  content: "✓";
  position: absolute;
  left: 22px;
  top: 20px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-lime);
  color: var(--c-ink);
  display: grid;
  place-items: center;
  font-size: var(--fs-12);
  font-weight: 600;
}

/* Resultado secundario dentro del panel oscuro */

.result__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 20px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.result__item p:first-child {
  font-size: var(--fs-13);
  color: var(--c-muted-dark);
}

.result__item p:last-child {
  margin-top: 6px;
  font-size: var(--fs-18);
  font-weight: 500;
  color: var(--c-white);
}

.result__item--lime p:last-child { color: var(--c-lime); }

.result__label { font-size: var(--fs-13); color: var(--c-muted-dark); }
.result__value {
  margin-top: 10px;
  font-size: var(--fs-figure);
  font-weight: 700;
  letter-spacing: var(--ls-title);
  color: var(--c-lime);
}
.result__note { margin-top: 8px; font-size: var(--fs-13); color: var(--c-muted-dark); }

/* --- Respuesta corta (bloque destacado de la guía) ---------------------- */

.answer {
  background: var(--c-surface);
  border-radius: var(--r-card);
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3.2vw, 32px);
}

.answer__label {
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
}

.answer__text {
  margin-top: 12px;
  font-size: var(--fs-19);
  line-height: 1.55;
  color: var(--c-ink);
}

/* --- Tabla de especificaciones (etiqueta / valor) ----------------------- */

.spec {
  background: var(--c-white);
  border-radius: var(--r-card);
  padding: 12px clamp(18px, 3vw, 32px) 20px;
}

.spec table { font-size: var(--fs-16); }

.spec td {
  padding: 20px 0;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}

.spec tr:last-child td { border-bottom: none; }
.spec td:first-child { color: var(--c-body); width: 38%; padding-right: 24px; }
.spec td:last-child { font-weight: 500; }

@media (max-width: 560px) {
  .spec td:first-child { width: 50%; }
}

/* --- Tile de clúster ---------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.tile {
  display: block;
  background: var(--c-surface);
  border-radius: var(--r-block);
  padding: 24px;
  color: var(--c-ink);
}

.tile:hover { background: var(--c-line); color: var(--c-ink); }

.tile--dark { background: var(--c-ink); color: var(--c-white); }
.tile--dark:hover { background: var(--c-green); color: var(--c-white); }

.tile h3 { font-size: var(--fs-18); font-weight: 500; line-height: var(--lh-heading); }
.tile p { margin-top: 8px; font-size: var(--fs-14); line-height: 1.55; color: var(--c-body); }
.tile--dark h3 { color: var(--c-white); }
.tile--dark p { color: var(--c-muted-dark); }

/* --- Panel verde con subtarjetas ---------------------------------------- */

.panel-green {
  background: var(--c-green);
  border-radius: var(--r-card);
  padding: clamp(28px, 5vw, 56px);
  color: var(--c-white);
  display: grid;
  gap: clamp(30px, 4.5vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: center;
}

.panel-green h2,
.panel-green h3 { color: var(--c-white); }
.panel-green > div > p { color: rgba(255, 255, 255, 0.75); }

.pill--on-green {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--c-white);
}

/* Nació dentro de `.panel-green` y daba por hecho el fondo oscuro: blanco
   translúcido sobre blanco translúcido. Ahora el caso claro es el de por
   defecto —se apoya en el borde, no en el contraste de fondo, para verse igual
   sobre blanco que sobre superficie— y el oscuro es la variante heredada. */
.subcard {
  background: var(--c-white);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-block);
  padding: 22px 24px;
}

.subcard h3 { font-size: var(--fs-18); font-weight: 500; color: var(--c-ink); }
.subcard p { margin-top: 8px; font-size: var(--fs-15); line-height: var(--lh-body); color: var(--c-body); }

.panel-green .subcard,
.section--dark .subcard,
.card--dark .subcard,
.card--inner-dark .subcard {
  background: rgba(255, 255, 255, 0.07);
  border-color: transparent;
}

.panel-green .subcard h3,
.section--dark .subcard h3,
.card--dark .subcard h3,
.card--inner-dark .subcard h3 { color: var(--c-white); }

.panel-green .subcard p,
.section--dark .subcard p,
.card--dark .subcard p,
.card--inner-dark .subcard p { color: rgba(255, 255, 255, 0.7); }

/* --- Banda CTA sobre superficie clara ----------------------------------- */

.cta-band {
  background: var(--c-surface);
  border-radius: var(--r-card);
  padding: clamp(28px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: center;
}

.cta-band h2 { font-size: var(--fs-h2-sm); max-width: 600px; }
.cta-band p { margin-top: 14px; font-size: var(--fs-16); line-height: var(--lh-body); color: var(--c-body); max-width: 600px; }

/* --- Columna que acompaña al scroll ------------------------------------- */

@media (min-width: 900px) {
  .sticky-col { position: sticky; top: 120px; align-self: start; }
}

/* --- Bloque CTA final --------------------------------------------------- */

.cta {
  background: var(--c-ink);
  border-radius: var(--r-card);
  padding: clamp(40px, 7vw, 72px) clamp(24px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  align-items: center;
}

.cta__title { font-size: var(--fs-cta); color: var(--c-white); line-height: 1.15; }
.cta__text { margin-top: 16px; font-size: var(--fs-16); line-height: var(--lh-body); color: var(--c-muted-dark); }

/* ==========================================================================
   Navegación
   ========================================================================== */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 12px clamp(12px, 3vw, 24px);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-nav__bar {
  max-width: var(--wrap-nav);
  margin-inline: auto;
  background: var(--c-white);
  border-radius: var(--r-nav);
  box-shadow: var(--sh-nav);
  padding: 10px 10px 10px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: var(--fs-17);
  font-weight: 700;
  letter-spacing: var(--ls-title);
  color: var(--c-ink);
  white-space: nowrap;
}

.brand__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-lime);
  display: inline-block;
}

.brand--lg { font-size: var(--fs-19); }

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 14px;
  font-size: var(--fs-14);
}

.site-nav__item { position: relative; }

.site-nav__link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  color: var(--c-body);
  white-space: nowrap;
}

.site-nav__link:hover,
.site-nav__item[data-open="true"] .site-nav__link {
  background: var(--c-surface);
  color: var(--c-ink);
}

/* Sección activa: se marca con data-nav-active en <body>, así el HTML del
   nav es idéntico en todas las páginas y tools/build.py puede reemplazarlo
   sin conocer el contexto. */
body[data-nav-active="aerotermia"]    .site-nav__link[data-key="aerotermia"],
body[data-nav-active="aire"]          .site-nav__link[data-key="aire"],
body[data-nav-active="datos"]         .site-nav__link[data-key="datos"],
body[data-nav-active="normativa"]     .site-nav__link[data-key="normativa"],
body[data-nav-active="herramientas"]  .site-nav__link[data-key="herramientas"],
body[data-nav-active="ciudades"]      .site-nav__link[data-key="ciudades"] {
  color: var(--c-ink);
  font-weight: 500;
}

body[data-nav-active="aerotermia"]    .site-nav__link[data-key="aerotermia"]::before,
body[data-nav-active="aire"]          .site-nav__link[data-key="aire"]::before,
body[data-nav-active="datos"]         .site-nav__link[data-key="datos"]::before,
body[data-nav-active="normativa"]     .site-nav__link[data-key="normativa"]::before,
body[data-nav-active="herramientas"]  .site-nav__link[data-key="herramientas"]::before,
body[data-nav-active="ciudades"]      .site-nav__link[data-key="ciudades"]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-lime);
  flex: none;
}

.site-nav__caret { font-size: 10px; color: var(--c-muted-dark); }

.site-nav__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Mega menú */
.megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 12px;
  z-index: 70;
}

.megamenu[hidden] { display: none; }

.megamenu__panel {
  width: 520px;
  background: var(--c-white);
  border-radius: var(--r-card);
  box-shadow: var(--sh-pop);
  padding: 14px;
}

.megamenu__panel--narrow {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.megamenu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }

.megamenu__link {
  display: block;
  padding: 14px 16px;
  border-radius: var(--r-item);
  color: var(--c-ink);
}

.megamenu__link:hover { background: var(--c-surface); color: var(--c-ink); }
.megamenu__link b { display: block; font-size: var(--fs-15); font-weight: 500; }
.megamenu__link span { display: block; margin-top: 3px; font-size: var(--fs-13); color: var(--c-muted); }

.megamenu__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-item);
  color: var(--c-ink);
  font-size: var(--fs-15);
}

.megamenu__row:hover { background: var(--c-surface); color: var(--c-ink); }

.megamenu__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: var(--r-item);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-14);
  font-weight: 500;
}

.megamenu__foot:hover { background: var(--c-line); color: var(--c-ink); }
.megamenu__foot .arrow { color: var(--c-green); font-weight: 400; }

.megamenu__foot--dark { background: var(--c-ink); color: var(--c-white); }
.megamenu__foot--dark:hover { background: var(--c-green); color: var(--c-white); }
.megamenu__foot--dark .arrow { color: var(--c-lime); }

/* Teléfono de la barra
   En escritorio se lee entero; por debajo de 1160 px se queda solo el icono,
   al lado de la hamburguesa, porque es la acción que más convierte en una
   página local y no puede depender de abrir el menú. */
.nav-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 8px;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-ink);
  white-space: nowrap;
  text-decoration: none;
}

.nav-phone:hover { background: var(--c-lime); color: var(--c-ink); }

.nav-phone__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-lime);
  color: var(--c-ink);
  display: grid;
  place-items: center;
  font-size: var(--fs-15);
  flex: none;
}

.nav-phone:hover .nav-phone__icon { background: var(--c-ink); color: var(--c-lime); }

.nav-phone__label { display: block; font-size: var(--fs-12); line-height: 1.2; color: var(--c-muted); }
.nav-phone:hover .nav-phone__label { color: var(--c-ink); }

.nav-phone__number {
  display: block;
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--ls-title);
}

/* Teléfono del cajón móvil */
.nav-drawer__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  padding: 14px 20px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-line);
  font-size: var(--fs-16);
  color: var(--c-ink);
}

.nav-drawer__phone:hover { background: var(--c-surface); color: var(--c-ink); }
.nav-drawer__phone strong { font-weight: 700; letter-spacing: var(--ls-title); }

/* Botón hamburguesa */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  border: none;
  background: var(--c-ink);
  color: var(--c-white);
  border-radius: var(--r-pill);
  padding: 11px 20px;
  font-size: var(--fs-14);
  font-weight: 500;
}

.nav-toggle__bars { display: flex; flex-direction: column; gap: 3px; }
.nav-toggle__bars span { width: 16px; height: 2px; background: var(--c-lime); display: block; }

/* Panel móvil */
.nav-drawer {
  max-width: var(--wrap-nav);
  margin: 10px auto 0;
  background: var(--c-white);
  border-radius: var(--r-drawer);
  box-shadow: var(--sh-pop);
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

.nav-drawer[hidden] { display: none; }

.nav-drawer__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--c-ink);
  color: var(--c-white);
  border-radius: var(--r-block);
  padding: 16px 20px;
  font-size: var(--fs-16);
  font-weight: 500;
  margin-bottom: 16px;
}

.nav-drawer__cta:hover { background: var(--c-green); color: var(--c-white); }

.nav-drawer__cta .arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-lime);
  color: var(--c-ink);
  display: grid;
  place-items: center;
  font-size: var(--fs-14);
  flex: none;
}

.nav-drawer__group { margin-top: 20px; }
.nav-drawer__group:first-of-type { margin-top: 0; }

.nav-drawer__label {
  margin-bottom: 6px;
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
}

.nav-drawer__link {
  display: block;
  padding: 13px 4px;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-16);
  color: var(--c-ink);
}

.nav-drawer__link--sub { color: var(--c-body); }
.nav-drawer__group > .nav-drawer__link:last-child { border-bottom: none; }

/* Cambio escritorio / móvil — mismo punto que el design (1160px) */
@media (max-width: 1159.98px) {
  .site-nav__menu,
  .site-nav__actions .btn { display: none; }
  .nav-toggle { display: flex; }

  /* El teléfono sobrevive al cambio a móvil, pero reducido a icono. */
  .nav-phone { padding: 0; background: transparent; }
  .nav-phone__text { display: none; }
  .nav-phone__icon { width: 42px; height: 42px; font-size: var(--fs-18); }
  .nav-phone:hover { background: transparent; }
}

@media (min-width: 1160px) {
  .nav-drawer { display: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--c-green);
  color: var(--c-white);
  padding: clamp(48px, 8vw, 80px) var(--pad-x) 32px;
}

.footer-partner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--c-on-dark-fill-strong);
  border: 1px solid var(--c-on-dark-line);
  border-radius: var(--r-block);
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px);
  margin-bottom: clamp(40px, 6vw, 56px);
}

.footer-partner__title { font-size: var(--fs-19); font-weight: 700; letter-spacing: var(--ls-title); }
.footer-partner__text { margin-top: 6px; font-size: var(--fs-15); line-height: var(--lh-body); color: var(--c-on-dark-70); max-width: 560px; }

.footer-partner__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-lime);
  color: var(--c-green);
  font-size: var(--fs-16);
  font-weight: 600;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.footer-partner__cta:hover { background: var(--c-white); color: var(--c-green); }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--c-on-dark-line);
}

.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col__title {
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-on-dark-55);
}

.footer-col a { font-size: var(--fs-15); color: var(--c-white); }
.footer-col a:hover { color: var(--c-lime); }

.footer-about { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.footer-about p { font-size: var(--fs-15); line-height: var(--lh-body); color: var(--c-on-dark-70); max-width: 320px; }

.footer-phone { display: flex; flex-direction: column; gap: 4px; }
.footer-phone a { color: var(--c-lime); font-size: var(--fs-20); letter-spacing: var(--ls-title); }
.footer-phone a:hover { color: var(--c-white); }
.footer-phone span { font-size: var(--fs-13); color: var(--c-on-dark-55); }

.footer-news { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
.footer-news__title {
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-lime);
}

.footer-news__field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--c-on-dark-fill);
  border-radius: var(--r-pill);
  padding: 6px 6px 6px 20px;
}

.footer-news__field input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--c-white);
  font-size: var(--fs-14);
}

.footer-news__field input::placeholder { color: var(--c-on-dark-50); }

.footer-news__field button {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-green);
  font-size: var(--fs-14);
  flex: none;
}

.footer-news__field button:hover { background: var(--c-lime); }
.footer-news__legal { font-size: var(--fs-12); color: var(--c-on-dark-50); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
}

.footer-bottom p { font-size: var(--fs-13); line-height: var(--lh-body); color: var(--c-on-dark-60); max-width: 640px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: var(--fs-13); color: var(--c-on-dark-60); }
.footer-legal a { color: var(--c-on-dark-60); }
.footer-legal a:hover { color: var(--c-lime); }

/* ==========================================================================
   Solicitud de presupuesto
   Formulario por pasos (partials/presupuesto-form.html), su modal y la barra
   fija de móvil. Los pasos se ocultan con `hidden` desde el JS: sin JS se ven
   los seis seguidos y todo esto sigue teniendo sentido.
   ========================================================================== */

.lead { display: flex; flex-direction: column; gap: 24px; }

/* --- Progreso ----------------------------------------------------------- */

.lead-progress { display: flex; flex-direction: column; gap: 8px; }
.lead-progress[hidden] { display: none; }

.lead-progress__track {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--c-line);
  overflow: hidden;
}

.lead-progress__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--c-lime);
  transition: width 0.25s ease;
}

.lead-progress__count {
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
}

/* --- Paso --------------------------------------------------------------- */

.lead-step {
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lead-step[hidden] { display: none; }

.lead-step__title {
  padding: 0;
  font-size: var(--fs-h2-card);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-title);
}

.lead-step__hint {
  margin-top: -8px;
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--c-body);
  max-width: 58ch;
}

.lead-step__error {
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--c-ink);
  padding: 10px 16px;
  border-radius: var(--r-chip);
  background: var(--c-surface);
  border-left: 3px solid var(--c-ink);
}

.lead-step__error[hidden] { display: none; }

/* --- Opción tipo botón (con un radio de verdad por debajo) -------------- */

.lead-opts { display: flex; flex-direction: column; gap: 10px; }

.lead-opt { display: block; cursor: pointer; }

/* El radio se esconde con la misma técnica que `.visually-hidden`, no con
   opacity ni display: así sigue en el árbol de accesibilidad y se puede
   recorrer con las flechas como cualquier grupo de radios. */
.lead-opt__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lead-opt__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 56px 16px 20px;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-item);
  background: var(--c-white);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.lead-opt__body::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--c-line-strong);
  background: var(--c-white);
}

.lead-opt:hover .lead-opt__body { border-color: var(--c-line-strong); }

.lead-opt__input:checked + .lead-opt__body {
  border-color: var(--c-ink);
  background: var(--c-surface);
}

.lead-opt__input:checked + .lead-opt__body::after {
  border-color: var(--c-ink);
  background: var(--c-lime);
  box-shadow: inset 0 0 0 3px var(--c-white);
}

.lead-opt__input:focus-visible + .lead-opt__body {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
}

.lead-opt__title { font-size: var(--fs-17); font-weight: 500; }
.lead-opt__text { font-size: var(--fs-14); line-height: var(--lh-body); color: var(--c-body); }

/* --- Campos ------------------------------------------------------------- */

.lead-grid { display: grid; gap: var(--gap); }

@media (min-width: 620px) {
  .lead-grid { grid-template-columns: 1fr 1fr; }
  .lead-grid .field:last-child { grid-column: 1 / -1; }
}

.field--short input { max-width: 180px; }

.lead-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--c-body);
  max-width: 62ch;
}

.lead-consent input { margin-top: 3px; width: auto; flex: none; accent-color: var(--c-green); }
.lead-consent strong { color: var(--c-ink); font-weight: 600; }

.lead-consent a {
  text-decoration: underline;
  text-decoration-color: var(--c-lime);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.lead-note {
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--c-body);
  padding: 14px 18px;
  border-radius: var(--r-chip);
  background: var(--c-surface);
}

.lead-note[hidden] { display: none; }
.lead-note strong { color: var(--c-ink); font-weight: 600; }
.lead-note--ok { background: var(--c-green); color: var(--c-white); }
.lead-note--ok strong { color: var(--c-lime); }

/* La trampa de bots no puede usar `display:none`: hay bots que descartan lo
   que no se pinta. Se saca de la pantalla y se deja fuera del tabulador. */
.lead-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Navegación del formulario ------------------------------------------ */

.lead__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding-top: 4px;
}

.lead__nav [hidden] { display: none; }

.lead__back {
  border: none;
  background: none;
  padding: 12px 4px;
  font-size: var(--fs-15);
  font-weight: 500;
  color: var(--c-muted);
}

.lead__back:hover { color: var(--c-ink); }

.lead-trust {
  font-size: var(--fs-13);
  line-height: var(--lh-body);
  color: var(--c-muted);
  max-width: 60ch;
}

/* --- Confirmación ------------------------------------------------------- */

.lead-done { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.lead-done[hidden] { display: none; }
.lead-done__title { font-size: var(--fs-h2-sm); }

.lead-done__text {
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--c-body);
  max-width: 60ch;
}

.lead-done__text a {
  text-decoration: underline;
  text-decoration-color: var(--c-lime);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* --- Modal -------------------------------------------------------------- */

.lead-modal {
  width: min(680px, calc(100% - 2 * var(--pad-x)));
  max-width: none;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--c-ink);
  overflow: visible;
}

.lead-modal::backdrop { background: rgba(26, 26, 26, 0.6); }

.lead-modal__panel {
  position: relative;
  background: var(--c-white);
  border-radius: var(--r-card);
  padding: clamp(24px, 4vw, 44px);
  max-height: min(88dvh, 900px);
  overflow-y: auto;
  box-shadow: var(--sh-pop);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lead-modal__title { font-size: var(--fs-h2-card); }

.lead-modal__lead {
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--c-body);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
}

.lead-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-20);
  line-height: 1;
  display: grid;
  place-items: center;
}

.lead-modal__close:hover { background: var(--c-ink); color: var(--c-white); }

/* --- Barra fija de móvil ------------------------------------------------ */

.lead-dock {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 90;
  display: none;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 12px 20px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-pop);
}

.lead-dock__title { font-size: var(--fs-14); font-weight: 500; }
.lead-dock__note { font-size: var(--fs-12); color: var(--c-muted); }

@media (max-width: 760px) {
  .lead-dock:not([hidden]) { display: flex; }
}

/* ==========================================================================
   Páginas locales de servicio
   El héroe de una guía informa; el de una página local tiene que vender en el
   primer pantallazo. De ahí el panel verde a sangre con el H1 y, al lado, la
   tarjeta de contacto: el teléfono y el presupuesto siempre visibles sin
   scroll, que es lo que separa una landing local que convierte de una que no.
   ========================================================================== */

.hero-local {
  background: var(--c-green);
  border-radius: var(--r-card);
  color: var(--c-white);
  padding: clamp(28px, 4.5vw, 56px);
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  align-items: start;
}

.hero-local__title {
  margin-top: 18px;
  font-size: var(--fs-h1-inner);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-white);
}

.hero-local__kicker {
  margin-top: 16px;
  font-size: var(--fs-17);
  font-weight: 500;
  line-height: var(--lh-heading);
  color: var(--c-lime);
}

.hero-local__lead {
  margin-top: 16px;
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--c-on-dark-70);
}

.hero-local__lead + .hero-local__lead { margin-top: 14px; }
.hero-local__lead strong { color: var(--c-white); font-weight: 600; }

.hero-local__actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-local__note {
  margin-top: 18px;
  font-size: var(--fs-13);
  line-height: 1.55;
  color: var(--c-on-dark-55);
}

/* --- Tarjeta de contacto del héroe -------------------------------------- */

.contact-card {
  background: var(--c-white);
  border-radius: var(--r-card);
  padding: clamp(24px, 3.2vw, 32px);
  color: var(--c-ink);
}

.contact-card__title { font-size: var(--fs-h2-card); letter-spacing: var(--ls-title); }
.contact-card__text {
  margin-top: 12px;
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--c-body);
}

.contact-card__phone {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-block);
  background: var(--c-surface);
  color: var(--c-ink);
  text-decoration: none;
}

.contact-card__phone:hover { background: var(--c-lime); color: var(--c-ink); }
.contact-card__phone-label { display: block; font-size: var(--fs-12); color: var(--c-muted); }
.contact-card__phone:hover .contact-card__phone-label { color: var(--c-ink); }
.contact-card__phone-number {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-20);
  font-weight: 700;
  letter-spacing: var(--ls-title);
}

.contact-card__list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-card__list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--fs-15);
  line-height: 1.5;
  color: var(--c-body);
}

.contact-card__list li::before {
  content: "✓";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-lime);
  color: var(--c-ink);
  display: grid;
  place-items: center;
  font-size: var(--fs-12);
  font-weight: 600;
  flex: none;
}

.contact-card .btn { margin-top: 22px; width: 100%; justify-content: center; }
.contact-card__note {
  margin-top: 14px;
  font-size: var(--fs-12);
  line-height: 1.5;
  color: var(--c-muted);
  text-align: center;
}

/* Teléfono secundario de la tarjeta: para las páginas donde el formulario es
   la acción principal (ticket alto, decisión meditada) y la llamada es la
   alternativa, no al revés. */
.contact-card__alt {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--fs-14);
  color: var(--c-body);
  text-align: center;
}

.contact-card__alt:hover { color: var(--c-green); }
.contact-card__alt strong { font-weight: 700; letter-spacing: var(--ls-title); color: var(--c-ink); }
.contact-card__alt:hover strong { color: var(--c-green); }

/* --- Franja de credenciales bajo el héroe ------------------------------- */

.trust-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 12px;
}

.trust-band__item {
  background: var(--c-surface);
  border-radius: var(--r-block);
  padding: 22px 24px;
}

.trust-band__value {
  font-size: var(--fs-22);
  font-weight: 700;
  letter-spacing: var(--ls-title);
  color: var(--c-ink);
}

.trust-band__label {
  margin-top: 6px;
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--c-body);
}

/* --- Zonas cubiertas ---------------------------------------------------- */

.zonas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.zonas li {
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 7px 16px;
  font-size: var(--fs-14);
  color: var(--c-body);
  background: var(--c-white);
}

/* Dentro de .prose, las reglas de lista (columna, viñeta lima, sangría) ganan
   por especificidad y dejarían cada zona en su propia fila con un punto
   delante. Aquí se anulan para que la lista siga siendo una fila de píldoras
   esté donde esté. */
.prose .zonas { flex-direction: row; flex-wrap: wrap; gap: 8px; padding-left: 0; }
.prose .zonas li { padding: 7px 16px; font-size: var(--fs-14); }
.prose .zonas li::before { content: none; }

/* --- Mapa del área de servicio ------------------------------------------ */
/* El SVG lo genera tools/build_mapa.py desde las coordenadas de Idescat. El
   grosor del trazo de la mancha lo escribe el propio generador como atributo,
   para no tener la misma medida en dos sitios. */

.mapa-zona { display: block; width: 100%; max-width: 620px; height: auto; margin-inline: auto; }

.mapa-zona__mancha {
  fill: var(--c-surface);
  stroke: var(--c-surface);
  stroke-linejoin: round;
}

.mapa-zona__punto { fill: var(--c-green); opacity: 0.5; }
.mapa-zona__punto--destacado { opacity: 1; }
.mapa-zona__halo { fill: var(--c-lime); }

.mapa-zona__nombre {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  fill: var(--c-body);
}

.mapa-zona__nombre--destacado { font-size: 17px; font-weight: 700; fill: var(--c-ink); }

.mapa-zona-pie {
  margin-top: 14px;
  font-size: var(--fs-13);
  line-height: 1.55;
  color: var(--c-muted);
}

/* Sobre fondo oscuro la mancha clara deslumbra y los nombres desaparecen. */
.section--dark .mapa-zona__mancha { fill: var(--c-on-dark-fill); stroke: var(--c-on-dark-fill); }
.section--dark .mapa-zona__punto { fill: var(--c-white); opacity: 0.45; }
.section--dark .mapa-zona__nombre { fill: var(--c-muted-dark); }
.section--dark .mapa-zona__nombre--destacado { fill: var(--c-white); }

/* --- Proceso numerado --------------------------------------------------- */

.pasos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: paso;
}

.pasos li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  background: var(--c-white);
  border-radius: var(--r-block);
  padding: 22px 24px;
}

.pasos li::before {
  counter-increment: paso;
  content: counter(paso);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-lime);
  display: grid;
  place-items: center;
  font-size: var(--fs-14);
  font-weight: 600;
  flex: none;
}

.pasos h3 { font-size: var(--fs-18); font-weight: 500; line-height: var(--lh-heading); }
.pasos p {
  margin-top: 8px;
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--c-body);
}

/* --- Opiniones ---------------------------------------------------------- */

.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}

.review {
  background: var(--c-surface);
  border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 30px);
  display: flex;
  flex-direction: column;
}

.review__stars { color: var(--c-green); font-size: var(--fs-15); letter-spacing: 2px; }

.review__text {
  margin-top: 14px;
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--c-body);
  flex: 1;
}

.review__author {
  margin-top: 20px;
  font-size: var(--fs-15);
  font-weight: 500;
  color: var(--c-ink);
}

.review__meta { margin-top: 4px; font-size: var(--fs-13); color: var(--c-muted); }

/* --- Barra fija de móvil con llamada ------------------------------------ */

.lead-dock__actions { display: flex; gap: 8px; align-items: center; flex: none; }

/* Con dos botones (llamar y pedir) el contenido ya no cabe en 375 px si el
   bloque de texto no puede encogerse: un elemento flex no baja de su ancho
   mínimo mientras conserve `min-width: auto`, y la barra se sale de la
   pantalla por la derecha. */
.lead-dock__text { min-width: 0; }

@media (max-width: 400px) {
  .lead-dock { padding-left: 16px; gap: 12px; }
}

/* --- Consentimiento de cookies ------------------------------------------- */

/* La primera capa se ancla abajo y por encima de la barra de móvil, que se
   esconde mientras haya una decisión pendiente: dos elementos fijos peleando
   por el mismo borde inferior tapan justo los botones que hay que pulsar. */

.cookies {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 150;
  display: flex;
  justify-content: center;
  padding: var(--pad-x);
  pointer-events: none;
}

.cookies[hidden] { display: none; }

body.con-cookies .lead-dock:not([hidden]) { display: none; }

.cookies__caja {
  pointer-events: auto;
  width: min(720px, 100%);
  max-height: calc(100dvh - 2 * var(--pad-x));
  overflow-y: auto;
  padding: var(--pad-card);
  border-radius: var(--r-card);
  background: var(--c-ink);
  color: var(--c-on-dark-70);
  box-shadow: var(--sh-pop);
}

.cookies__titulo {
  margin: 0 0 8px;
  font-size: var(--fs-20);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-title);
  color: var(--c-white);
}

/* El foco va al título al abrirse para que un lector de pantalla anuncie el
   aviso; el anillo sobraría en un elemento que nadie tabula hasta él. */
.cookies__titulo:focus { outline: none; }
.cookies__titulo:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }

.cookies__texto {
  margin: 0 0 20px;
  font-size: var(--fs-14);
  line-height: var(--lh-body);
}

.cookies__texto strong { color: var(--c-white); font-weight: 600; }

.cookies__texto a {
  color: var(--c-lime);
  text-underline-offset: 3px;
}

.cookies__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Aceptar y rechazar comparten clase y tamaño a propósito: en cuanto uno de
   los dos pesa más que el otro, el consentimiento deja de ser libre. */
.cookies__acciones .btn--dark {
  flex: 1 1 auto;
  min-width: 160px;
  justify-content: center;
  background: var(--c-white);
  color: var(--c-ink);
}

.cookies__acciones .btn--dark:hover { background: var(--c-lime); color: var(--c-ink); }

.cookies__ajustes {
  flex: none;
  padding: 12px 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-14);
  color: var(--c-on-dark-70);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cookies__ajustes:hover { color: var(--c-white); }

.cookies__panel {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--c-on-dark-line);
}

.cookies__panel[hidden] { display: none; }

.cookies__grupo + .cookies__grupo { margin-top: 16px; }

.cookies__opcion {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--fs-13);
  line-height: var(--lh-body);
  cursor: pointer;
}

.cookies__opcion input {
  margin-top: 3px;
  flex: none;
  width: auto;
  accent-color: var(--c-lime);
}

.cookies__opcion input:disabled { cursor: not-allowed; opacity: 0.5; }
.cookies__opcion:has(input:disabled) { cursor: default; }

.cookies__opcion strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--c-white);
}

.cookies__opcion code {
  padding: 1px 5px;
  border-radius: var(--r-icon-sm);
  background: var(--c-on-dark-fill);
  font-size: 0.92em;
}

.cookies__acciones--panel { margin-top: 20px; }
.cookies__acciones--panel .btn--dark { flex: none; min-width: 0; }

@media (max-width: 560px) {
  .cookies__acciones .btn--dark { flex: 1 1 100%; }
  .cookies__ajustes { width: 100%; text-align: center; }
}

/* --- Consentimiento del boletín ------------------------------------------ */

.footer-news__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0 8px;
  font-size: var(--fs-12);
  line-height: var(--lh-body);
  color: var(--c-on-dark-60);
  cursor: pointer;
}

.footer-news__consent input {
  margin-top: 2px;
  flex: none;
  width: auto;
  accent-color: var(--c-lime);
}

.footer-news__consent a { color: var(--c-on-dark-70); text-underline-offset: 3px; }
.footer-news__consent a:hover { color: var(--c-white); }

/* --- Respuesta de los formularios simples (contacto y boletín) ------------
   La escribe presupuesto.js debajo del formulario. Hereda el color del
   contexto: sirve igual en la página de contacto que en el pie oscuro. */
.form-estado {
  margin-top: 12px;
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: inherit;
}
.form-estado[hidden] { display: none; }
.form-estado--ok { font-weight: 600; }
.form-estado--ok::before { content: "\2713  "; color: var(--c-lime); }
.form-estado--error { font-weight: 600; }
.form-estado--error::before { content: "\26A0  "; }