/* NINIA — Solicitar demo. Depende de base.css. */

.dwrap {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: var(--cream);
  padding: clamp(7.5rem, 13vw, 9.5rem) 0 clamp(4rem, 8vw, 6rem);
  /* Era 100vh. En Safari iOS el 100vh incluye la barra de direcciones y
     recorta el formulario; dvh mide el viewport real. */
  min-height: 100dvh;
}
.dwrap-bg { position: absolute; inset: 0; display: block; }
.dwrap-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 30% 40%;
  opacity: .34;
}
.dwrap-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(266deg,
      rgb(var(--dark-rgb) / .98) 0%,
      rgb(var(--dark-rgb) / .93) 34%,
      rgb(var(--dark-rgb) / .66) 60%,
      rgb(var(--dark-rgb) / .5) 100%),
    linear-gradient(180deg,
      rgb(var(--dark-rgb) / .6) 0%,
      rgb(var(--dark-rgb) / 0) 30%,
      rgb(var(--dark-rgb) / .4) 78%,
      var(--dark) 100%);
}

.dgrid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(3rem, 6vw, 4.5rem);
  align-items: start;
}
.dleft, .dform-col { min-width: 0; }

.dtag {
  display: inline-block;
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terracota-3);
  border: 1px solid rgb(var(--terracota-3-rgb) / .3);
  background: rgb(var(--terracota-3-rgb) / .1);
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  margin-bottom: 26px;
}
.dtitle {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-fluid-h1-sm);
  line-height: 1.06;
  letter-spacing: -.03em;
  margin-bottom: 20px;
}
.dtitle em { font-style: italic; color: var(--terracota-3); }
.dsub { font-size: var(--t-xs); line-height: 1.62; color: rgb(var(--cream-rgb) / .78); max-width: 48ch; }

/* Los tres puntos llevaban border-left de color, que el sistema no permite.
   Una regla superior agrupa igual de bien y no es acento lateral. */
.dpoints { margin-top: 40px; display: grid; gap: 22px; }
.dpoint { padding-top: 18px; border-top: 1px solid rgb(var(--terracota-3-rgb) / .35); }
.dpoint h2 {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 5px;
  letter-spacing: 0;
}
.dpoint p { font-size: var(--t-2xs); line-height: 1.58; color: rgb(var(--cream-rgb) / .68); }

/* ───────── formulario ───────── */
.dform {
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 38px 36px 34px;
  box-shadow: 0 24px 60px rgb(0 0 0 / .35);
}
.dform-title { font-family: var(--font-serif); font-size: var(--t-md); font-weight: 400; margin-bottom: 7px; }
.dform-sub { font-size: var(--t-2xs); color: var(--ink-2); margin-bottom: 6px; }
.dform-req { font-size: var(--t-2xs); color: var(--muted); margin-bottom: 24px; }
.dform-req i, .f label i { color: var(--terracota); font-style: normal; }

.f { display: block; margin-bottom: 17px; }
.f label {
  display: block;
  font-size: var(--t-2xs);
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 7px;
}
.f label .opt { color: var(--muted); font-weight: 400; font-style: normal; }
.f input, .f select {
  width: 100%;
  padding: 13px 15px;
  font-family: inherit;
  font-size: var(--t-xs);
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.f input:focus, .f select:focus {
  outline: none;
  border-color: var(--terracota);
  box-shadow: 0 0 0 3px rgb(var(--terracota-rgb) / .1);
}
/* El foco por teclado necesita un indicador propio: el tinte del borde no basta. */
.f input:focus-visible, .f select:focus-visible {
  outline: 2px solid var(--terracota);
  outline-offset: 2px;
}
/* El campo en error se marca también por borde, no solo por el mensaje:
   el color no puede ser el único portador de la información. */
.f input[aria-invalid='true'] { border-color: var(--danger); }

.frow-set { border: 0; padding: 0; margin: 0 0 17px; min-width: 0; }
.frow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 14px;
}
.frow .f { margin-bottom: 0; }

.err {
  font-size: var(--t-2xs);
  font-style: normal;
  color: var(--danger);
  margin-top: 6px;
}
.err[hidden] { display: none; }
.err-grupo { margin-top: 10px; }

.dsubmit { width: 100%; margin-top: 10px; padding: 16px 30px; font-size: var(--t-xs); }
.dlegal { margin-top: 16px; font-size: var(--t-2xs); line-height: 1.5; color: var(--muted); text-align: center; }
.dlegal a { color: var(--terracota); }

.dfail {
  margin-top: 16px;
  font-size: var(--t-2xs);
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid rgb(166 63 41 / .25);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.dfail[hidden] { display: none; }
.dfail a { color: var(--danger); font-weight: 600; }

/* El honeypot no puede usar display:none: algunos bots lo detectan. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.dok {
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 48px 38px;
  text-align: center;
  box-shadow: 0 24px 60px rgb(0 0 0 / .35);
}
.dok[hidden] { display: none; }
.dok-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--sage-bg);
  color: var(--sage);
  display: grid; place-items: center;
  margin: 0 auto 20px;
}
.dok-icon svg { width: 26px; height: 26px; display: block; }
.dok h2 { font-family: var(--font-serif); font-size: var(--t-md); font-weight: 400; margin-bottom: 12px; }
/* El título recibe el foco al enviarse; sin esto no se vería el anillo. */
.dok h2:focus-visible { outline: 2px solid var(--terracota); outline-offset: 4px; }
.dok p { font-size: var(--t-xs); line-height: 1.6; color: var(--ink-2); margin-bottom: 22px; }

@media (max-width: 980px) {
  .dwrap-bg img { opacity: .2; }
  .dwrap-veil {
    background: linear-gradient(180deg, rgb(var(--dark-rgb) / .95), var(--dark) 60%);
  }
  .dform { padding: 30px 24px 28px; }
}