/* ═══════════════════════════════════════════════════════════════════════════════════════════
   calc-morosos-piel.css — PIEL de la calculadora de morosos (s2, 28-ago-2026).

   POR QUE EXISTE
   ──────────────
   La calculadora se sirve DENTRO de un <iframe> en la portada, y era lo que partia la pagina
   por la mitad: traia su propio diseno —cabecera en degradado azul, esquinas de 12px, sombra
   difusa y, sobre todo, la LETRA DEL SISTEMA— dentro de una pagina con otra letra y otros
   angulos. Encima, `.calculator-iframe-wrap` le ponia OTRA caja alrededor: caja dentro de caja
   dentro de seccion.

   QUE ES Y QUE NO ES
   ──────────────────
   Es una PIEL, no una reescritura. Se carga DESPUES de `calc-morosos.css`, que sigue siendo la
   hoja buena y no se toca. Casi todo el trabajo lo hacen cinco variables: la hoja original ya
   estaba escrita con tokens (`--radio`, `--sombra`, `--borde`, `--bg-suave`, `--azul`), asi que
   redefinirlos cambia el objeto entero sin tocar una sola regla de maquetacion.

   🧨 SE HIZO ASI Y NO REESCRIBIENDO LAS 180 LINEAS A PROPOSITO. El wizard FUNCIONA: cinco
      pasos, validacion, envio del lead al CRM y modal de exito. Reescribir su hoja para que
      «combine» es arriesgar un formulario que ya capta clientes por un motivo estetico. Si
      algun dia se rehace de verdad, se rehace con el JS delante y probando el envio, no de
      pasada.

   🧨 ESTA HOJA NO DECLARA NI UN `@font-face`. Las caras las emite el motor `estetica` desde
      `calculadora-morosos/index.php`, que carga el bootstrap del sitio igual que cualquier
      otra pagina. Escribirlas aqui a mano seria repetir la lista de ficheros en un tercer
      sitio, y esa es exactamente la averia que costo meses en esta casa: `config.php` decia
      Poppins, `layout.php` la precargaba, los .woff2 estaban en disco y `critical.css` no la
      declaraba, asi que el navegador se la bajaba en cada visita y la tiraba.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  /* Los cinco tokens que reescriben el objeto entero. */
  --radio:2px;               /* era 12px: el angulo casi recto es lo que lee como editorial */
  --sombra:none;             /* era una sombra de 24px: la que hacia que flotara sobre la pagina */
  --borde:#E3DDD4;           /* hairline calida, la misma de la portada (era el gris frio #dce1e6) */
  --bg-suave:#F7F4EF;        /* crema calida, la misma de la portada (era el gris azulado #f5f7f9) */
  --azul:#171E29;            /* la tinta de las bandas oscuras (era #252D3A) */
  --azul-2:#171E29;          /* mata el degradado de la cabecera: dos paradas iguales = plano */
}

body{
  /* La letra del cuerpo, apuntando a la variable que emite el motor. El respaldo repite la pila
     del sitio por si la ficha no llegara: la calculadora seguiria legible. */
  font-family:var(--texto-familia,'Source Sans 3'),system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ── El marco ─────────────────────────────────────────────────────────────────────────────
   Sigue habiendo UNA caja, y esta bien que la haya: la calculadora es un objeto, no una
   seccion de texto. Lo que se quita es que sean DOS (el <div> de fuera ya no la lleva: lo
   apaga `.portada .calculator-iframe-wrap` en portada.css). */
.wizard{border:1px solid var(--borde);box-shadow:none;max-width:none}

/* ── Cabecera: de degradado a papel ───────────────────────────────────────────────────────
   El titulo pasa a la serifa de display, igual que los h2 de la portada, y la linea de debajo
   se convierte en el mismo rotulo naranja en versalitas que abre cada seccion. */
.wizard__head{
  background:#fff;color:#242B33;text-align:left;
  padding:1.75rem 1.5rem 1.5rem;border-bottom:1px solid var(--borde);
}
.wizard__head h2{
  font-family:var(--display-familia,Georgia,'Times New Roman',serif);
  font-weight:400;font-size:1.375rem;line-height:1.25;letter-spacing:-.01em;color:#242B33;
}
.wizard__head p{
  margin-top:.625rem;opacity:1;
  font-family:var(--titulo-familia,'Poppins'),system-ui,sans-serif;
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--naranja);
}

.wizard__body{padding:1.75rem 1.5rem}
.wizard__nav{padding:1.125rem 1.5rem;background:var(--bg-suave)}

/* ── Interfaz: la sans de la casa y angulos rectos ────────────────────────────────────────
   Los botones y las etiquetas comparten letra con los de la portada; si no, el iframe se
   delata en cuanto se mira dos veces. */
.btn,.paso__num,.campo label,.check,.progress{
  font-family:var(--titulo-familia,'Poppins'),system-ui,sans-serif;
}
.btn{border-radius:2px;letter-spacing:.02em}
.btn--ghost{background:transparent;border:1px solid var(--borde);color:#5B656E}
.btn--ghost:hover:not(:disabled){background:var(--bg-suave)}

.paso__num{letter-spacing:.16em}
.paso__titulo{
  font-family:var(--display-familia,Georgia,serif);font-weight:400;
  font-size:1.25rem;line-height:1.3;letter-spacing:-.01em;
}
.op{border-width:1px;border-radius:2px}
.op.sel{border-width:1px}
.campo input[type=text],.campo input[type=tel],.campo input[type=email]{border-radius:2px}

/* ── Resultado ────────────────────────────────────────────────────────────────────────────
   Los bloques de resultado conservan sus colores (rojo/verde): ahi el color ES informacion —
   dice si un requisito falla o se cumple— y cambiarlo por estetica seria quitarle sentido. */
.res__bloque,.horquilla,.nota{border-radius:2px}
.horquilla{border-width:1px;border-color:var(--borde);background:var(--bg-suave)}
.horquilla__cifra{
  font-family:var(--display-familia,Georgia,serif);font-weight:400;font-size:2rem;color:var(--azul);
}
.nota{border-radius:0}
.modal__box{border-radius:2px}
.modal__box h3{font-family:var(--display-familia,Georgia,serif);font-weight:400;font-size:1.375rem}
.overlay__box{border-radius:2px}

@media (max-width:520px){
  .wizard{border-radius:2px}
  .wizard__head{padding:1.25rem 1.125rem 1.125rem}
  .wizard__head h2{font-size:1.1875rem}
  .wizard__body{padding:1.25rem 1.125rem}
  .wizard__nav{padding:1rem 1.125rem}
  .paso__titulo{font-size:1.125rem}
}