/* ============================================================
   BOLETÍN — pestaña lateral + panel deslizante de suscripción
   Depende de los tokens definidos en main.css (:root).
   ============================================================ */

/* ---- Pestaña (launcher) ---- */
.nlt {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 540;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 16px 9px;
  background: var(--orange); color: #fff;
  border: 0; border-radius: 0 6px 6px 0;
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
  cursor: pointer;
  transition: background .25s var(--ease), padding-left .25s var(--ease), opacity .25s var(--ease);
}
.nlt:hover { background: var(--orange-h); padding-left: 14px; }
.nlt__ico { width: 18px; height: 18px; }
.nlt__txt {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--mono); font-weight: 700; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
}
body.nl-open .nlt { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---- Contenedor / overlay ---- */
.nl { position: fixed; inset: 0; z-index: 620; visibility: hidden; pointer-events: none; }
.nl.open { visibility: visible; pointer-events: auto; }
.nl__overlay { position: absolute; inset: 0; background: rgba(15,15,15,.55); opacity: 0; transition: opacity .3s var(--ease); }
.nl.open .nl__overlay { opacity: 1; }

/* ---- Panel (entra desde la izquierda) ---- */
.nl__panel {
  position: absolute; top: 0; left: 0; height: 100%;
  width: min(92vw, 440px);
  background: var(--dark); color: rgba(255,255,255,.92);
  border-right: 3px solid var(--orange);
  box-shadow: 16px 0 48px rgba(0,0,0,.4);
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  padding: 56px 44px;
  transform: translateX(-100%);
  transition: transform .4s var(--ease-out);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.nl.open .nl__panel { transform: translateX(0); }

.nl__close { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: rgba(255,255,255,.7); cursor: pointer; transition: color .2s; }
.nl__close:hover { color: #fff; }
.nl__close svg { width: 22px; height: 22px; }

.nl__kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--orange); }
.nl__title { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.15; letter-spacing: -.01em; color: #fff; }
.nl__sub { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.62); }

/* ---- Formulario (Fluent Forms id 4 — ver réplica .nl__panel .fluentform abajo) ---- */
.nl__note { font-size: 11px; color: rgba(255,255,255,.4); text-align: center; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .nl__panel { width: 100vw; padding: 48px 26px; }
  /* Pestaña del boletín: en móvil va abajo (margen inferior 1em) y en horizontal,
     para no tapar la tipografía como hacía en el lateral. */
  .nlt {
    top: auto; bottom: 1em; left: 1em; transform: none;
    flex-direction: row; gap: 8px; padding: 10px 16px;
    border-radius: 8px;
  }
  .nlt__txt { writing-mode: horizontal-tb; transform: none; font-size: 11px; }
  .nl__title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .nlt, .nl__overlay, .nl__panel { transition: none; }
}

/* ============================================================
   Réplica del diseño .nl__ aplicada al form de boletín (Fluent Forms id 4).
   Scopeado a .nl__panel .fluentform — reproduce inputs underline, labels
   flotantes (:has/:focus-within), consent y submit naranja del panel.
   ============================================================ */
.nl__panel .fluentform { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; }
.nl__panel .fluentform .ff-el-group { margin: 0; position: relative; }
.nl__panel .fluentform .ff-t-container,
.nl__panel .fluentform .ff-step-body { gap: 22px; }

/* Inputs underline (= .nl__input) */
.nl__panel .fluentform .ff-el-input--content input[type="text"],
.nl__panel .fluentform .ff-el-input--content input[type="email"] {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid rgba(255,255,255,.22); border-radius: 0;
  padding: 12px 2px 8px; color: #fff; -webkit-text-fill-color: #fff;
  font-family: var(--sans); font-size: 15px; line-height: 1.3;
  box-shadow: none; outline: none; height: auto;
  transition: border-color .25s;
}
.nl__panel .fluentform .ff-el-input--content input[type="text"]:focus,
.nl__panel .fluentform .ff-el-input--content input[type="email"]:focus {
  border-bottom-color: var(--orange); background: transparent; box-shadow: none;
}
/* el placeholder " " no se ve (sólo dispara :placeholder-shown del label flotante) */
.nl__panel .fluentform .ff-el-input--content input::placeholder { color: transparent; -webkit-text-fill-color: transparent; }

/* Label flotante (= .nl__label). El wrapper viene ANTES del input → absoluto + :has() */
.nl__panel .fluentform .ff-el-group .ff-el-input--label {
  position: absolute; left: 2px; top: 12px; margin: 0; padding: 0; z-index: 1; pointer-events: none;
}
.nl__panel .fluentform .ff-el-group .ff-el-input--label label {
  color: rgba(255,255,255,.45); font-family: var(--sans); font-weight: 400; font-size: 15px;
  text-transform: none; letter-spacing: normal; margin: 0;
  transform-origin: left; transition: transform .2s var(--ease), color .2s, font-size .2s;
}
.nl__panel .fluentform .ff-el-group .ff-el-input--label .ff-el-is-required { display: none; }
.nl__panel .fluentform .ff-el-group:focus-within .ff-el-input--label label,
.nl__panel .fluentform .ff-el-group:has(input:not(:placeholder-shown)) .ff-el-input--label label {
  transform: translateY(-20px); font-size: 11px; letter-spacing: .04em; color: var(--orange);
}

/* Consent checkbox (= .nl__consent): oculta el label superior del campo */
.nl__panel .fluentform .ff-el-group:has(.ff-el-form-check) .ff-el-input--label { display: none; }
.nl__panel .fluentform .ff-el-form-check label.ff-el-form-check-label {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.6); cursor: pointer;
  text-transform: none; letter-spacing: normal; font-weight: 400; margin: 0;
}
.nl__panel .fluentform .ff-el-form-check input[type="checkbox"] {
  margin: 2px 0 0; width: 15px; height: 15px; flex: 0 0 auto; accent-color: var(--orange);
}
.nl__panel .fluentform .ff-el-form-check a { color: var(--orange); text-decoration: underline; }

/* Submit (= .btn-cta + .nl__submit) */
.nl__panel .fluentform .ff-btn-submit {
  display: block; width: 100%; text-align: center;
  background: var(--orange); color: #fff; padding: 14px 20px; border: 0; border-radius: 2px;
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; box-shadow: none; transition: background .2s, transform .2s;
}
.nl__panel .fluentform .ff-btn-submit:hover { background: var(--orange-h); transform: translateY(-1px); }

/* Mensajes Fluent al tono del panel */
.nl__panel .fluentform .error,
.nl__panel .fluentform .text-danger { color: #ff9f9f; font-size: 11px; margin-top: 6px; }
.nl__panel .fluentform .ff-message-success { color: var(--orange); font-size: 14px; line-height: 1.55; }
.nl__fluent .nl__note { margin-top: 10px; }