/* Plan de lealtad Diseñístico — página pública [dsn_lealtad].
   Escrito a mano (a diferencia de cotizador.css, que se regenera). Todo el
   CSS está acotado a .dsn-lealtad para no afectar al tema, misma paleta e
   idea visual que el cotizador de closets. */

.dsn-lealtad {
  --amarillo: #F5C45D;
  --coral: #F7624D;
  --coral-soft: rgba(247, 98, 77, .10);
  --navy: #1A2545;
  --morado: #620A4F;
  --tinta: #252529;
  --gris: #6B7280;
  --linea: #ECECF0;
  --ok: #1E7A41;
  --ok-bg: #E9F6EE;
  --r: 14px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05);

  font: 400 16px/1.55 Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--tinta);
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 22px 64px;
  -webkit-font-smoothing: antialiased;
}
.dsn-lealtad *, .dsn-lealtad *::before, .dsn-lealtad *::after { box-sizing: border-box; }
.dsn-lealtad h1, .dsn-lealtad h2, .dsn-lealtad h3 { margin: 0; font-weight: 700; letter-spacing: -.3px; }
.dsn-lealtad p { margin: 0; }
.dsn-lealtad ul, .dsn-lealtad ol { margin: 0; padding: 0; list-style: none; }
.dsn-lealtad a { color: inherit; }
.dsn-lealtad [hidden] { display: none; } /* el tema pone display propio en varios elementos */

/* ---------- hero ---------- */
.dsn-lealtad__hero {
  text-align: center;
  padding: 20px 0 34px;
}
.dsn-lealtad__estrellas {
  font-size: 22px;
  letter-spacing: 6px;
  color: var(--amarillo);
  margin-bottom: 10px;
}
.dsn-lealtad__hero h1 {
  font-size: clamp(26px, 4vw, 38px);
}
.dsn-lealtad__lead {
  margin: 14px auto 0;
  max-width: 560px;
  color: var(--gris);
  font-size: 16px;
}

/* ---------- secciones ---------- */
.dsn-lealtad__seccion {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  box-shadow: var(--sombra);
  padding: 26px 26px 28px;
  margin-bottom: 20px;
}
.dsn-lealtad__seccion h2 {
  font-size: 21px;
  margin-bottom: 14px;
}

.dsn-lealtad__pasos {
  counter-reset: paso;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dsn-lealtad__pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 38px;
  font-size: 15px;
  color: var(--tinta);
}
.dsn-lealtad__pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--coral-soft);
  color: var(--coral);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- dos columnas: cliente nuevo / ya cliente ---------- */
.dsn-lealtad__dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
@media (max-width: 700px) {
  .dsn-lealtad__dos-columnas { grid-template-columns: 1fr; }
}
.dsn-lealtad__col {
  border-radius: var(--r);
  padding: 24px 24px 26px;
  box-shadow: var(--sombra);
}
.dsn-lealtad__col p { margin-top: 10px; font-size: 14.5px; color: var(--tinta); }
.dsn-lealtad__col--nuevo {
  background: #fff;
  border: 1px solid var(--linea);
}
.dsn-lealtad__col--actual {
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--navy);
}
.dsn-lealtad__col--actual h2 { color: #fff; }
.dsn-lealtad__col--actual p { color: #E6E9F2; }
.dsn-lealtad__col--actual .dsn-lealtad__nota { color: #B9C0D6; }
.dsn-lealtad__nota { font-size: 12.5px; color: var(--gris); margin-top: 10px; }

.dsn-lealtad__btn {
  display: inline-block;
  margin-top: 16px;
  background: var(--coral);
  color: #fff !important;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  white-space: normal; /* el tema fuerza nowrap en todo botón */
}
.dsn-lealtad__btn:hover { filter: brightness(1.08); }
.dsn-lealtad__btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.dsn-lealtad__btn--secundario {
  background: #fff;
  color: var(--navy) !important;
  border: 1.5px solid var(--navy);
}

/* ---------- formulario ---------- */
.dsn-lealtad__form-wrap h2 { margin-bottom: 6px; }
.dsn-lealtad__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-top: 16px;
}
@media (max-width: 620px) {
  .dsn-lealtad__grid { grid-template-columns: 1fr; }
}
.dsn-lealtad__campo { margin-top: 14px; }
.dsn-lealtad__grid .dsn-lealtad__campo { margin-top: 0; }
.dsn-lealtad__campo label {
  display: block;
  font-size: 13px;
  color: var(--gris);
  margin-bottom: 5px;
}
.dsn-lealtad__campo input[type="text"],
.dsn-lealtad__campo input[type="tel"],
.dsn-lealtad__campo input[type="email"],
.dsn-lealtad__campo select,
.dsn-lealtad__campo textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  color: var(--tinta);
  background: #fff;
  min-height: 0;
}
.dsn-lealtad__campo textarea { resize: vertical; }
.dsn-lealtad__campo--trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.dsn-lealtad__preview {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.dsn-lealtad__preview img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--linea);
}

#dsn-l-enviar { margin-top: 22px; }
.dsn-lealtad__estado {
  margin-top: 12px;
  font-size: 14px;
}
.dsn-lealtad__estado[data-tipo="ok"] { color: var(--ok); }
.dsn-lealtad__estado[data-tipo="error"] { color: var(--coral); }
.dsn-lealtad__estado[data-tipo="enviando"] { color: var(--gris); }

/* ---------- beneficios ---------- */
.dsn-lealtad__beneficios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 20px;
}
@media (max-width: 500px) {
  .dsn-lealtad__beneficios { grid-template-columns: 1fr; }
}
.dsn-lealtad__beneficios li {
  font-size: 14.5px;
  padding-left: 22px;
  position: relative;
}
.dsn-lealtad__beneficios li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--amarillo);
}

/* ---------- banner de cierre ---------- */
.dsn-lealtad__banner {
  text-align: center;
  background: var(--navy);
  color: #fff;
  border-radius: var(--r);
  padding: 30px 26px;
  border-top: 6px solid var(--amarillo);
}
.dsn-lealtad__banner h2 { color: #fff; font-size: 22px; }
.dsn-lealtad__banner p {
  margin: 12px auto 0;
  max-width: 560px;
  color: #E6E9F2;
  font-size: 14.5px;
}