/* ==========================================================================
   GUARDIO — Textos legales de la suscripción (VISTA PREVIA, 27/09/2026)
   Se carga DESPUÉS de /assets/css/styles.css y /impressum/impressum.css y
   reutiliza sus design tokens. Ningún color ni variable nueva: todo sale del
   design system de la landing (los tintes son color-mix() de tokens que ya
   existen). Mismo patrón que /impressum/impressum.css y /guia/guia.css.
   ========================================================================== */

/* ---------- Seguridad del [hidden] ----------
   Lección de FinanzLatina (25/09): una regla `display: grid` en un campo pisó
   el atributo hidden y el paso 2 se veía antes de tiempo. Aquí manda hidden. */
.legal-wrap [hidden] { display: none !important; }

/* ---------- Cabecera fija ----------
   .site-header es sticky (68 px): sin margen, un salto del índice o el foco del
   paso 2 dejarían el título escondido debajo de la cabecera. */
.legal-wrap [id] { scroll-margin-top: 5.5rem; }

/* ---------- Palabras alemanas largas ----------
   «Geschäftsbedingungen», «Widerrufsbelehrung», «Kündigungserklärung» no caben
   en 360 px. Guiones automáticos en alemán y corte de emergencia. */
.legal-wrap [lang="de"] { hyphens: auto; }
.legal-hero h1,
.legal-bloque h2,
.legal-bloque h3,
.legal-cortesia h2,
.legal-cortesia h3 { overflow-wrap: break-word; }

/* ---------- Aviso de vista previa (arriba de cada página) ---------- */
.vp-aviso {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--warning);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--warning) 16%, var(--surface));
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
}
.vp-aviso p { margin: 0; max-width: 68ch; }
.vp-aviso p + p { margin-top: 0.35rem; color: var(--body); }
.vp-aviso strong { color: var(--ink); }

/* ---------- Línea de versión bajo el h1 ---------- */
.legal-hero .vp-version {
  margin-top: 0.85rem;
  color: var(--muted);
  font-size: 0.92rem;
}

/* ---------- Punto abierto dentro del texto (solo en la vista previa) ---------- */
.vp-hinweis {
  margin: 0.9rem 0;
  padding: 0.75rem 0.95rem;
  border: 1px dashed var(--warning);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--warning) 9%, var(--surface));
  color: var(--ink);
  font-size: 0.93rem;
  max-width: 68ch;
}
.vp-hinweis strong { color: var(--ink); }
.legal-bloque .vp-hinweis p,
.legal-cortesia .vp-hinweis p { margin: 0; color: var(--ink); }
.vp-hinweis p + p { margin-top: 0.3rem; }

/* ---------- Índice de secciones ---------- */
.vp-indice {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  padding: clamp(1rem, 3vw, 1.35rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.vp-indice h2 {
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}
.vp-indice ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.15rem 1.5rem;
}
@media (min-width: 40rem) {
  .vp-indice ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vp-indice a {
  display: block;
  padding: 0.3rem 0;
  color: var(--body);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.2s var(--ease);
}
.vp-indice a:hover { color: var(--teal-700); }

/* ---------- Texto corrido de los bloques legales ---------- */
.legal-bloque h3 {
  font-size: 1.04rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 1.25rem 0 0.5rem;
}
.legal-bloque ul,
.legal-bloque ol,
.legal-cortesia ul,
.legal-cortesia ol {
  margin: 0 0 0.85rem;
  padding-left: 1.3rem;
  max-width: 66ch;
  color: var(--body);
}
.legal-bloque li + li,
.legal-cortesia li + li { margin-top: 0.4rem; }
.legal-bloque li::marker,
.legal-cortesia li::marker { color: var(--teal-700); }
.legal-cortesia h4 {
  font-size: 0.98rem;
  color: var(--ink);
  margin: 1.1rem 0 0.4rem;
}
.legal-hero a,
.legal-bloque a,
.legal-cortesia a,
.vp-aviso a { color: var(--navy); font-weight: 600; text-underline-offset: 0.18em; }
.legal-hero a:hover,
.legal-bloque a:hover,
.legal-cortesia a:hover { color: var(--teal-700); }

/* Resumen «Das Wichtigste in Kürze» y el límite de prestación (§ 4) */
.vp-kurz { margin-top: clamp(1.4rem, 3vw, 2rem); }
.vp-kurz ul { margin-bottom: 0; }

.vp-grenze {
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--danger) 45%, var(--line));
  border-radius: var(--radius);
  padding: clamp(1.1rem, 3vw, 1.5rem);
  margin-top: clamp(1.4rem, 3vw, 2rem);
}
.vp-grenze h2 { color: var(--ink); }
.vp-grenze .vp-notruf {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--danger) 12%, var(--surface));
  color: color-mix(in oklab, var(--danger) 72%, var(--navy-900));
  font-weight: 800;
}

/* La Widerrufsbelehrung en su caja: se distingue del resto del texto */
.vp-belehrung {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  margin-top: 1rem;
}
.vp-belehrung h3:first-child { margin-top: 0; }

/* El modelo de desistimiento: líneas para rellenar a mano */
.vp-muster {
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  padding: clamp(1rem, 3vw, 1.35rem);
  margin-top: 0.75rem;
}
.vp-muster p { color: var(--ink); margin-bottom: 0.6rem; }
.vp-muster .vp-linea {
  display: block;
  margin-top: 0.35rem;
  border-bottom: 1px solid var(--muted);
  min-height: 1.6rem;
}
.vp-muster .vp-nota-muster { color: var(--muted); font-size: 0.9rem; }

/* ---------- Formularios (desistimiento y cancelación) ---------- */
.vp-form {
  display: grid;
  gap: 1.15rem;
  margin-top: 1.1rem;
}
.vp-campo {
  display: grid;
  gap: 0.35rem;
}
.vp-campo label,
.vp-opciones legend {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.98rem;
}
.vp-obligatorio { color: color-mix(in oklab, var(--danger) 72%, var(--navy-900)); }
.vp-campo input[type="text"],
.vp-campo input[type="email"],
.vp-campo input[type="date"],
.vp-campo textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--muted);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.vp-campo textarea { min-height: 6.5rem; resize: vertical; }
.vp-campo input:focus-visible,
.vp-campo textarea:focus-visible {
  outline: 3px solid var(--teal-700);
  outline-offset: 1px;
  border-color: var(--teal-700);
}
.vp-campo [aria-invalid="true"] {
  border-color: color-mix(in oklab, var(--danger) 72%, var(--navy-900));
}
.vp-ayuda {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 62ch;
}
.vp-ayuda[lang="es"] { font-style: italic; }

.vp-opciones {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.vp-opciones legend { margin-bottom: 0.45rem; padding: 0; }
.vp-opcion {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  align-items: start;
  padding: 0.8rem 0.95rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.vp-opcion:hover { border-color: var(--teal); }
.vp-opcion:has(input:checked) {
  border-color: var(--teal-700);
  background: color-mix(in oklab, var(--teal) 9%, var(--surface));
}
.vp-opcion input {
  margin: 0.2rem 0 0;
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--teal-700);
}
.vp-opcion strong { color: var(--ink); font-weight: 700; }
.vp-opcion .vp-ayuda { grid-column: 2; }

.vp-error {
  color: color-mix(in oklab, var(--danger) 72%, var(--navy-900));
  font-weight: 700;
  font-size: 0.94rem;
  min-height: 1.2em;
}
.vp-error:empty { min-height: 0; }

.vp-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.vp-acciones .btn { min-height: 3rem; }
/* .btn trae line-height: 1 (pensado para una línea). En alemán hay rótulos que
   en móvil ocupan dos («Kündigungserklärung mit Datum und Uhrzeit speichern»). */
.legal-wrap .btn { line-height: 1.3; text-align: center; }
.vp-acciones .vp-ayuda { flex-basis: 100%; }

/* Paso a paso: el número del paso SÍ es información (es una secuencia real) */
.vp-paso {
  margin-top: 1.1rem;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.vp-paso-num {
  display: inline-block;
  margin-bottom: 0.35rem;
  color: var(--teal-700);
  font-weight: 800;
  font-size: 0.92rem;
}
.vp-paso h2,
.vp-paso h3 { margin-top: 0; }

.vp-resumen {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: 0.45rem 1.1rem;
  margin: 1rem 0 1.1rem;
  padding: 1rem 1.1rem;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
}
.vp-resumen dt { font-weight: 700; color: var(--muted); font-size: 0.92rem; }
.vp-resumen dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }

.vp-ok {
  margin-top: 1.1rem;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border: 1px solid color-mix(in oklab, var(--success) 55%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--success) 9%, var(--surface));
  color: var(--ink);
}
.vp-ok h2,
.vp-ok h3 { margin-top: 0; }
.vp-ok p { color: var(--ink); max-width: 66ch; }
.vp-ok p + p { margin-top: 0.55rem; }
.vp-descarga { margin-top: 0.9rem; }

/* Entrada suave de cada paso: el contenido ya es visible por defecto; la
   animación solo acompaña el cambio. Sin movimiento si se pide menos. */
@media (prefers-reduced-motion: no-preference) {
  .vp-paso,
  .vp-ok { animation: vp-entrar 0.35s var(--ease) both; }
}
@keyframes vp-entrar {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Botón-enlace a la función de desistimiento dentro del texto */
.vp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* ---------- Pie: los dos botones que la ley quiere en todas las páginas ---------- */
.vp-footer-vertrag {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.vp-footer-vertrag a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--surface) 42%, transparent);
  border-radius: 999px;
  color: var(--surface);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.vp-footer-vertrag a:hover {
  background: color-mix(in srgb, var(--surface) 12%, transparent);
  border-color: var(--surface);
}

/* ---------- Móvil ---------- */
@media (max-width: 34rem) {
  .vp-resumen { grid-template-columns: 1fr; gap: 0.1rem; }
  .vp-resumen dd { margin-bottom: 0.55rem; }
  .vp-acciones .btn { width: 100%; }
}