/* =====================================================================
   manual.css — Landing de descarga del manual de cumplimiento
   ---------------------------------------------------------------------
   Dos columnas en escritorio: el argumento a la izquierda y el formulario
   a la derecha, pegado arriba. En móvil se apila, y ahí el formulario va
   PRIMERO: quien llega desde un anuncio en el móvil ya sabe a qué viene,
   y hacerle pasar por tres pantallas de texto antes del campo del correo
   solo sirve para perderlo.
   ===================================================================== */

.dman-envoltorio {
  max-width: 1360px;
  margin: 0 auto;
  /* El encabezado del sitio es position:fixed y layout.js sustituye el div que
     lo contiene, así que no queda nada reservando su altura: el espacio hay que
     ponerlo aquí. Los 8.5rem cuentan los 68px de la barra más el aire necesario
     para que la portada, que asoma por encima de la caja, no quede debajo. */
  padding: 8.5rem 1.25rem 4.5rem;
}

.dman-principal {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 62rem) {
  .dman-principal {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4rem;
    align-items: start;
  }
}

/* ── Columna del argumento ──────────────────────────────────────── */

.dman-etiqueta {
  display: inline-block;
  background: rgba(0, 108, 255, .1);
  color: var(--ds-blue, #006cff);
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .4rem .8rem;
  border-radius: 999px;
  margin: 0 0 1.25rem;
}

.dman-texto h1 {
  font: 600 clamp(2.1rem, 4.6vw, 3.35rem)/1.1 "Montserrat", Arial, sans-serif;
  color: var(--ds-navy, #061833);
  margin: 0 0 1rem;
}

.dman-texto h1 em {
  font-style: normal;
  color: var(--ds-blue, #006cff);
}

.dman-entradilla {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--ds-muted, #64748b);
  margin: 0 0 1.9rem;
  max-width: 36rem;
}

.dman-puntos {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.dman-puntos li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 1rem;
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--ds-ink, #0b1628);
}

/* Palomita dibujada con CSS: un icono menos que descargar. */
.dman-puntos li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .45rem;
  width: .42rem;
  height: .78rem;
  border: solid var(--ds-blue, #006cff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dman-puntos strong { font-weight: 600; }

.dman-indice {
  background: #f4f8fd;
  border: 1px solid var(--ds-line, #dbe7f5);
  border-radius: .75rem;
  padding: 1.35rem 1.5rem;
}

.dman-indice-titulo {
  margin: 0 0 .85rem;
  font-weight: 600;
  color: var(--ds-navy, #061833);
  font-size: 1.05rem;
}

.dman-indice ol {
  margin: 0;
  padding-left: 1.3rem;
  color: var(--ds-ink, #0b1628);
}

.dman-indice li {
  margin-bottom: .5rem;
  font-size: .98rem;
  line-height: 1.5;
}

/* ── Caja del formulario ────────────────────────────────────────── */

.dman-caja {
  background: #fff;
  border: 1px solid var(--ds-line, #dbe7f5);
  border-top: 4px solid var(--ds-blue, #006cff);
  border-radius: .85rem;
  padding: 1.75rem;
  box-shadow: 0 12px 34px rgba(6, 24, 51, .08);
}

@media (min-width: 62rem) {
  .dman-caja { position: sticky; top: 6rem; }
}

.dman-portada {
  text-align: center;
  margin: -2.5rem 0 1.25rem;      /* asoma por encima de la caja */
}

.dman-portada img {
  width: 12.5rem;
  height: auto;
  border-radius: .4rem;
  box-shadow: 0 10px 26px rgba(6, 24, 51, .22);
}

.dman-caja h2 {
  font: 600 1.5rem/1.25 "Montserrat", Arial, sans-serif;
  color: var(--ds-navy, #061833);
  margin: 0 0 .3rem;
  text-align: center;
}

.dman-caja-sub {
  margin: 0 0 1.5rem;
  text-align: center;
  color: var(--ds-muted, #64748b);
  font-size: .92rem;
}

.dman-campo { display: block; margin-bottom: 1rem; }

.dman-campo > span {
  display: block;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ds-navy, #061833);
  margin-bottom: .4rem;
}

.dman-campo > span em {
  font-style: normal;
  font-weight: 400;
  color: var(--ds-muted, #64748b);
}

.dman-campo input,
.dman-campo select {
  width: 100%;
  padding: .78rem .9rem;
  font: 400 1.02rem/1.4 "Montserrat", Arial, sans-serif;
  color: var(--ds-ink, #0b1628);
  background: #fff;
  border: 1px solid var(--ds-line, #dbe7f5);
  border-radius: .5rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.dman-campo input:focus,
.dman-campo select:focus {
  outline: none;
  border-color: var(--ds-blue, #006cff);
  box-shadow: 0 0 0 3px rgba(0, 108, 255, .16);
}

/* La trampa para robots: invisible, pero sin display:none, que algunos
   rellenadores automáticos detectan y saltan. */
.dman-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.dman-consiente {
  margin: 1.35rem 0 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ds-line, #dbe7f5);
}

.dman-check {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  margin-bottom: .85rem;
  font-size: .89rem;
  line-height: 1.55;
  color: var(--ds-ink, #0b1628);
  cursor: pointer;
}

.dman-check input {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .12rem;
  accent-color: var(--ds-blue, #006cff);
  cursor: pointer;
}

.dman-check a {
  color: var(--ds-blue, #006cff);
  text-decoration: underline;
}

.dman-nota-legal {
  margin: 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ds-muted, #64748b);
}

.dman-btn {
  display: block;
  width: 100%;
  padding: .9rem 1.2rem;
  font: 600 1.08rem/1.2 "Montserrat", Arial, sans-serif;
  color: #fff;
  background: var(--ds-blue, #006cff);
  border: 0;
  border-radius: .55rem;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}

.dman-btn:hover { background: #0057cc; }
.dman-btn:active { transform: translateY(1px); }

.dman-btn:disabled {
  background: #9dc2f5;
  cursor: progress;
}

.dman-btn:focus-visible {
  outline: 3px solid rgba(0, 108, 255, .4);
  outline-offset: 2px;
}

.dman-estado {
  margin: .75rem 0 0;
  text-align: center;
  font-size: .85rem;
  color: var(--ds-muted, #64748b);
  min-height: 1.2em;
}

/* ── Errores y confirmación ─────────────────────────────────────── */

.dman-errores {
  background: #fff5f7;
  border: 1px solid #f0c9d2;
  border-left: 3px solid var(--ds-danger, #e11d48);
  border-radius: .5rem;
  padding: .85rem 1rem;
  margin-bottom: 1.15rem;
  font-size: .87rem;
  color: #8a2740;
}

.dman-errores p { margin: 0 0 .4rem; font-weight: 600; }
.dman-errores ul { margin: 0; padding-left: 1.15rem; }
.dman-errores li { margin-bottom: .22rem; }
.dman-errores:focus { outline: none; }

.dman-hecho { text-align: center; padding: 1rem 0 .5rem; }

.dman-hecho-icono {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(15, 159, 110, .12);
  color: var(--ds-success, #0f9f6e);
  font-size: 1.5rem;
  line-height: 3rem;
}

.dman-hecho h3 {
  font: 600 1.25rem/1.3 "Montserrat", Arial, sans-serif;
  color: var(--ds-navy, #061833);
  margin: 0 0 .5rem;
}

.dman-hecho p { margin: 0 0 .85rem; font-size: .93rem; color: var(--ds-ink, #0b1628); }

/* En móvil, el formulario antes que el argumento. */
@media (max-width: 61.99rem) {
  .dman-texto { order: 2; }
  .dman-caja { order: 1; }
  .dman-principal { display: flex; flex-direction: column; }
  .dman-envoltorio { padding-top: 7rem; }
  .dman-portada { margin-top: -2rem; }
}