/* ─────────────────────────────────────────────────────────────
   widerruf.css — Función de desistimiento (Directiva UE 2023/2673,
   art. 11a Directiva 2011/83/UE, vigente desde el 19/06/2026).
   Solo variables del design system de LegalClaro. Sin hex propios.
   ───────────────────────────────────────────────────────────── */

.wf-intro {
  max-width: 46rem;
}

.wf-intro__lead {
  font-size: 1.125rem;
  color: var(--navy-900);
}

.wf-cortesia {
  color: var(--navy-700);
}

/* ── Formulario ─────────────────────────────────────────────── */

.wf-form {
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
  margin-block-start: 2rem;
  padding: 1.75rem;
  border: 1px solid var(--navy-200);
  border-radius: 12px;
  background-color: var(--navy-50);
}

.wf-campo {
  display: grid;
  gap: 0.375rem;
}

.wf-campo label {
  font-weight: 600;
  color: var(--navy-900);
}

.wf-campo__ayuda {
  font-size: 0.875rem;
  color: var(--navy-700);
  margin: 0;
}

.wf-campo input,
.wf-campo textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: var(--navy-950);
  background-color: var(--color-ink-inverted);
  border: 1px solid var(--navy-300);
  border-radius: 8px;
}

.wf-campo input:focus-visible,
.wf-campo textarea:focus-visible {
  outline: 3px solid var(--claro-500);
  outline-offset: 1px;
}

.wf-campo textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.wf-obligatorio {
  color: var(--color-error);
}

.wf-boton {
  justify-self: start;
  padding: 0.85rem 1.6rem;
  font: inherit;
  font-weight: 700;
  color: var(--color-ink-inverted);
  background-color: var(--navy-800);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.wf-boton:hover {
  background-color: var(--navy-700);
}

.wf-boton:disabled {
  opacity: 0.6;
  cursor: progress;
}

.wf-estado {
  margin: 0;
  min-height: 1.5rem;
  font-weight: 600;
}

.wf-estado--ok {
  color: var(--color-success);
}

.wf-estado--error {
  color: var(--color-error);
}

/* ── Bloque legal ───────────────────────────────────────────── */

.wf-nota {
  max-width: 46rem;
  margin-block-start: 2.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--claro-500);
  background-color: var(--claro-50);
  border-radius: 0 8px 8px 0;
}

.wf-nota h2 {
  margin-block-start: 0;
}

.wf-nota p:last-child {
  margin-block-end: 0;
}

/* ── Sección "Widerrufsrecht" bajo un bloque de compra ───────── */

.wf-bloque {
  margin-block-start: 1.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--navy-200);
  border-radius: 10px;
  background-color: var(--navy-50);
}

.wf-bloque h3 {
  margin-block-start: 0;
  margin-block-end: 0.4rem;
  font-size: 1rem;
  color: var(--navy-900);
}

.wf-bloque p {
  margin-block-start: 0;
  margin-block-end: 0.85rem;
  font-size: 0.9375rem;
  color: var(--navy-900);
}

.wf-bloque__btn {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--navy-900);
  text-decoration: none;
  background-color: var(--color-ink-inverted);
  border: 2px solid var(--navy-800);
  border-radius: 8px;
}

.wf-bloque__btn:hover {
  color: var(--color-ink-inverted);
  background-color: var(--navy-800);
}