/* ==========================================================================
   ARREGLAMIHOGAR — Configurador de reformas

   Ni un color ni una fuente nueva: todo sale de los tokens de base.css y
   reutiliza los componentes que ya hay (.f, .f__in, .f--select, .btn,
   .agree__box, .kicker). Lo propio de aquí es la retícula de dos columnas,
   el resumen fijo y la barra de precio de móvil.

   Se diseña primero para el móvil, que es por donde va a entrar casi todo el
   mundo a calcular un precio.
   ========================================================================== */

.cfg {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}

@media (min-width: 1000px) {
  .cfg { grid-template-columns: minmax(0, 1fr) minmax(320px, 25rem); gap: var(--s-7); }
}

/* --------------------------------------------------------------------------
   Los pasos
   -------------------------------------------------------------------------- */

.cfg__pasos { display: grid; gap: var(--s-5); }

/* El primer paso (qué reformar) va suelto; del segundo en adelante cada uno
   se separa con su filete, para que la secuencia tenga un ritmo parejo. */
.cfg__pasos .cfg__paso {
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline-soft);
}

/* Los desplegables son nativos a propósito: en el móvil, el selector del
   sistema se maneja mejor que cualquier lista que dibujemos nosotros. */
.cfg__paso .f__in { font-size: var(--t-base); }

.cfg__pista {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--stone-100);
  border-left: 2px solid var(--brass-400);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--text-soft);
}

.cfg__foto {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: var(--r-sm);
}

/* --- Extras --------------------------------------------------------------- */

.cfg__extras { display: grid; gap: var(--s-3); margin-top: var(--s-3); }

@media (min-width: 620px) {
  .cfg__extras { grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); }
}

.cfg__extra {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--out-quart),
              background-color var(--t-fast) var(--out-quart),
              transform var(--t-press) var(--out-quart);
}

.cfg__extra:hover { border-color: var(--brass-400); }
.cfg__extra:active { transform: scale(0.99); }
.cfg__extra:has(:checked) { border-color: var(--brass-500); background: var(--stone-100); }

.cfg__extra > span:last-child { display: grid; gap: 0.15rem; }
.cfg__extra b { font-size: var(--t-sm); font-weight: 600; color: var(--ink-900); }
.cfg__extra b + span { font-size: var(--t-xs); line-height: 1.5; color: var(--text-mute); }

/* --------------------------------------------------------------------------
   El resumen

   En escritorio se queda pegado al desplazar, para que el precio no se pierda
   de vista mientras se eligen opciones más abajo.
   -------------------------------------------------------------------------- */

@media (min-width: 1000px) {
  .cfg__panel { position: sticky; top: calc(var(--head-h) + var(--s-4)); }
}

.cfg__caja {
  padding: var(--s-5);
  background: var(--wine-800);
  color: var(--stone-100);
  border-radius: var(--r-md);
  box-shadow: var(--lift-2);
}

.cfg__cifra {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  line-height: 1.1;
  color: var(--stone-50);
}

.cfg__caja .kicker--light { color: var(--brass-300); }

.cfg__aviso {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid oklch(0.885 0.044 82 / 0.24);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--brass-300);
}

.cfg__falta { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--stone-300); }

.cfg__filas {
  display: grid;
  gap: 0;
  margin-top: var(--s-4);
  padding: 0;
  list-style: none;
}

.cfg__filas li {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: 0.6rem 0;
  border-top: 1px solid oklch(0.885 0.044 82 / 0.18);
  font-size: var(--t-sm);
}

.cfg__filas span {
  flex: none;
  min-width: 7.5rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-400);
}

.cfg__filas b { font-weight: 400; color: var(--stone-100); }

.cfg__acciones { display: grid; gap: var(--s-3); margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   Barra de precio en móvil

   El resumen queda lejísimos en un móvil. Esta barra mantiene el precio y el
   acceso al resumen siempre a la vista mientras se configura.
   -------------------------------------------------------------------------- */

.cfg-barra {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 195;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--edge);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: var(--wine-800);
  border-top: 1px solid oklch(0.885 0.044 82 / 0.28);
  box-shadow: 0 -10px 30px oklch(0.185 0.055 18 / 0.22);
}

.cfg-barra__txt { flex: 1; min-width: 0; }

.cfg-barra__et {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-400);
}

.cfg-barra__v {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: 1.2;
  color: var(--stone-50);
}

.cfg-barra .btn { flex: none; }

/* En escritorio manda el panel pegado, no la barra. */
@media (min-width: 1000px) { .cfg-barra { display: none; } }

/* La barra ocuparía el mismo sitio que el botón flotante de WhatsApp, y en
   esta página el WhatsApp ya está en las acciones del resumen. */
@media (max-width: 999px) {
  .wa-dot { display: none; }
  .cfg-hueco { height: 5.5rem; }
}

@media (min-width: 1000px) { .cfg-hueco { display: none; } }

/* Titulillo de apartado dentro de la columna de pasos. Son catorce
   desplegables: sin separarlos en bloques, el visitante se pierde. */
.cfg__grupo {
  margin: var(--s-6) 0 var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-700);
}

.cfg__grupo:first-child { margin-top: var(--s-3); }

/* El titulillo ya cierra con su propio filete: el paso que viene detrás no
   necesita otro, o se ven dos rayas seguidas. */
.cfg__grupo + .cfg__paso { padding-top: var(--s-3); border-top: 0; }