/* ============================================================
   Ventana de newsletter "EDITION" (views/public/_newsletter.ejs)
   Autocontenida: todo va bajo .nl-overlay y no toca main.css.
   ============================================================ */

.nl-overlay {
  --nl-paper:      #F2EBE2;
  --nl-ink:        #1C1915;
  --nl-ink-soft:   #3A342D;
  --nl-gold:       #9A7328;
  --nl-gold-btn:   #8E6A26;
  --nl-gold-hover: #7A5A1F;
  --nl-line:       rgba(154,115,40,.28);
  --nl-muted:      #7C7369;
  --nl-error:      #a6452f;
  --nl-head:       'Cormorant Garamond', Georgia, serif;
  --nl-body:       'Montserrat', 'Helvetica Neue', sans-serif;
  --nl-ease:       cubic-bezier(.25,.46,.45,.94);

  /* Por encima de la mascota (10000) y del resplandor del cursor (9999) */
  position:fixed; inset:0; z-index:20000;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  background:rgba(30,24,18,.45);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--nl-ease), visibility 0s linear .45s;
  text-align:center; color:var(--nl-ink);
}
.nl-overlay[hidden] { display:none; }
.nl-overlay.is-open {
  opacity:1; visibility:visible;
  transition:opacity .45s var(--nl-ease);
}
html.nl-lock { overflow:hidden; }

.nl-card {
  position:relative;
  width:min(560px,100%);
  max-height:calc(100dvh - 32px); overflow-x:hidden; overflow-y:auto;
  background:radial-gradient(120% 80% at 50% 0%, #F6F0E8 0%, var(--nl-paper) 55%, #EDE4D8 100%);
  border-radius:22px;
  box-shadow:0 30px 80px -20px rgba(20,14,8,.55), 0 2px 6px rgba(20,14,8,.12);
  padding:clamp(56px,9vw,88px) clamp(24px,7vw,56px) 32px;
  transform:translateY(18px) scale(.985);
  transition:transform .55s var(--nl-ease);
}
.nl-overlay.is-open .nl-card { transform:none; }
.nl-card:focus { outline:none; }   /* recibe el foco al abrir; no es un control */

/* Sombra de hojas, arriba a la izquierda */
.nl-leaves {
  position:absolute; top:-20px; left:-30px; width:260px; height:300px;
  color:#8b8174; opacity:.22; filter:blur(3px);
  pointer-events:none;
}

.nl-close {
  position:absolute; top:22px; right:22px;
  width:44px; height:44px; display:grid; place-items:center;
  background:none; border:0; cursor:pointer; color:var(--nl-gold);
  border-radius:50%; transition:background .2s;
}
.nl-close:hover { background:rgba(154,115,40,.08); }
.nl-close:focus-visible { outline:2px solid var(--nl-gold); outline-offset:2px; }

/* Logo original (logo-negro.png, transparente) tenido de dorado */
.nl-logo {
  position:relative; display:block;
  width:clamp(190px,42vw,250px); aspect-ratio:908/275;
  margin:0 auto;
  background:var(--nl-gold);
  -webkit-mask:url('/images/marca/logo-negro.png') center/contain no-repeat;
          mask:url('/images/marca/logo-negro.png') center/contain no-repeat;
}
.nl-rule {
  width:84px; height:1px; background:var(--nl-line);
  margin:clamp(28px,5vw,40px) auto;
}
.nl-title {
  font-family:var(--nl-head); font-weight:400;
  font-size:clamp(46px,10vw,72px); line-height:1;
  letter-spacing:.18em; margin:0 -.18em 0 0; /* compensa el espaciado final */
  color:var(--nl-ink);
}
.nl-lead {
  font-family:var(--nl-head); font-style:italic; font-weight:400;
  font-size:clamp(22px,4.2vw,28px); line-height:1.3; color:var(--nl-ink-soft);
  margin:16px 0 0;
}
.nl-text {
  font-family:var(--nl-head); font-size:clamp(18px,3.4vw,21px);
  line-height:1.5; color:var(--nl-ink-soft);
  max-width:26ch; margin:22px auto 0;
}

.nl-icon {
  width:52px; height:52px; margin:26px auto 18px;
  border:1px solid var(--nl-gold); border-radius:50%;
  display:grid; place-items:center; color:var(--nl-gold);
}

/* ── Boton y formulario ─────────────────────────────────── */
.nl-actions { max-width:340px; margin:0 auto; }

.nl-btn {
  width:100%; min-height:54px;
  font:600 15px/1 var(--nl-body); letter-spacing:.2em; text-transform:uppercase;
  color:#fff; background:var(--nl-gold-btn);
  border:0; border-radius:2px; cursor:pointer;
  transition:background .2s;
}
.nl-btn:hover { background:var(--nl-gold-hover); }
.nl-btn:focus-visible { outline:2px solid var(--nl-ink); outline-offset:3px; }
.nl-btn[disabled] { opacity:.6; cursor:wait; }

.nl-form { display:none; text-align:left; }
.nl-card.is-form .nl-form { display:block; animation:nl-in .4s var(--nl-ease); }
.nl-card.is-form .nl-cta  { display:none; }

.nl-field {
  display:block; width:100%; min-height:52px;
  font:400 16px var(--nl-body); color:var(--nl-ink);   /* 16px: iOS no hace zoom */
  background:rgba(255,255,255,.55);
  border:1px solid var(--nl-line); border-radius:2px;
  padding:0 16px; margin-bottom:12px;
  transition:border-color .2s, background .2s;
}
.nl-field::placeholder { color:#9a9086; }
.nl-field:focus { outline:none; border-color:var(--nl-gold); background:#fff; }
.nl-field[aria-invalid="true"] { border-color:var(--nl-error); }

.nl-consent {
  display:flex; gap:10px; align-items:flex-start;
  font:400 12px/1.5 var(--nl-body); color:var(--nl-muted);
  margin:4px 0 16px; cursor:pointer;
}
.nl-consent input {
  flex:none; width:18px; height:18px; margin:1px 0 0;
  accent-color:var(--nl-gold-btn);
}
.nl-consent a { color:var(--nl-gold); text-decoration:underline; text-underline-offset:2px; }

.nl-error {
  font:500 12px/1.4 var(--nl-body); color:var(--nl-error);
  min-height:17px; margin:10px 0 0; text-align:center;
}

/* Campo trampa: invisible para personas */
.nl-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.nl-thanks { display:none; }
.nl-card.is-done .nl-thanks { display:block; animation:nl-in .4s var(--nl-ease); }
.nl-card.is-done .nl-actions { display:none; }
.nl-thanks p {
  font-family:var(--nl-head); font-style:italic; font-size:24px; color:var(--nl-ink-soft);
  margin:0;
}
.nl-thanks small {
  display:block; margin-top:8px;
  font:400 13px/1.5 var(--nl-body); color:var(--nl-muted);
}

/* ── Pie de la tarjeta ──────────────────────────────────── */
.nl-foot {
  margin:clamp(36px,6vw,48px) -24px 0; padding-top:28px;
  border-top:1px solid var(--nl-line);
  font:500 10.5px/1.6 var(--nl-body); letter-spacing:.16em; text-transform:uppercase;
  color:var(--nl-ink-soft);
  display:flex; justify-content:center; gap:10px; white-space:nowrap;
}
.nl-foot span + span::before { content:'·'; margin-right:10px; color:var(--nl-gold); }

/* ── Boton flotante que abre la ventana ─────────────────── */
.nl-fab {
  position:fixed; right:20px; bottom:20px; z-index:10001;   /* sobre la mascota */
  width:64px; height:64px; border-radius:50%;
  /* Sobre arriba y la palabra debajo, centrados en el circulo */
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:0;
  color:#fff; background:#8E6A26;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 10px 26px -8px rgba(20,14,8,.55);
  cursor:pointer;
  /* --nl-subir: lo que sube para no tapar la ultima franja del pie (newsletter.js) */
  transform:translateY(calc(-1 * var(--nl-subir, 0px)));
  transition:background .2s, transform .25s cubic-bezier(.25,.46,.45,.94);
  animation:nl-in .5s cubic-bezier(.25,.46,.45,.94);
}
.nl-fab[hidden] { display:none; }
.nl-fab:hover { background:#7A5A1F; transform:translateY(calc(-2px - var(--nl-subir, 0px))); }
.nl-fab:focus-visible { outline:2px solid #8E6A26; outline-offset:3px; }
html.nl-lock .nl-fab { display:none; }
.nl-fab__txt {
  font:500 8.5px/1 'Montserrat', 'Helvetica Neue', sans-serif;
  letter-spacing:.04em;
}

@media (max-width:520px) {
  .nl-fab { right:16px; bottom:16px; width:58px; height:58px; gap:2px; }
  .nl-fab svg { width:19px; height:15px; }
  .nl-fab__txt { font-size:8px; }
}

@keyframes nl-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* En movil no caben en una linea: dos columnas y sin puntos */
@media (max-width:520px) {
  .nl-foot { margin-left:0; margin-right:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; }
  .nl-foot span + span::before { content:none; }
}
@media (prefers-reduced-motion:reduce) {
  .nl-overlay, .nl-card, .nl-fab { transition:none; animation:none; }
  .nl-card.is-form .nl-form, .nl-card.is-done .nl-thanks { animation:none; }
}