/*
 * Ventana de suscripción a la revista. Mismo lenguaje que el lector (<dialog>, papel y tinta,
 * naranjo corporativo). En celular no ocupa la pantalla: sube desde abajo y deja ver la nota.
 */

.suscripcion{
  width:min(760px,94vw);max-width:none;max-height:92vh;margin:auto;padding:0;border:0;
  background:var(--paper);color:var(--ink);overflow:auto;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55);
}
.suscripcion[open]{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr)}
.suscripcion:not(:has(.susc__tapa))[open]{grid-template-columns:1fr}
.suscripcion::backdrop{background:rgba(14,16,19,.7)}
html.susc-abierta{overflow:hidden}

.susc__cerrar{
  position:absolute;top:10px;right:10px;z-index:2;cursor:pointer;
  width:36px;height:36px;border-radius:50%;border:1px solid var(--rule);
  background:var(--paper);color:var(--ink);font:inherit;font-size:14px;line-height:1;
}
.suscripcion .susc__cerrar:hover,
.suscripcion .susc__cerrar:focus{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.suscripcion .susc__cerrar:focus-visible{outline:2px solid var(--rust);outline-offset:2px}

.susc__tapa{background:var(--paper-2);display:flex;align-items:center;justify-content:center;padding:28px}
.susc__tapa img{display:block;width:100%;height:auto;box-shadow:0 14px 34px -22px rgba(20,22,26,.7)}

.susc__cuerpo{padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;justify-content:center}
.susc__titulo{
  margin:.35em 0 .4em;font-family:var(--display);font-weight:500;
  font-size:clamp(28px,3.4vw,40px);line-height:1.06;letter-spacing:-.02em;
}
.susc__texto{margin:0 0 22px;color:var(--ink-2);font-size:16px;line-height:1.5}

.susc__form{display:flex;flex-wrap:wrap;gap:10px}
.susc__form input[type=email]{
  flex:1 1 220px;min-width:0;padding:14px 16px;font:inherit;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--rule);border-radius:2px;
}
.susc__form input[type=email]:focus{outline:2px solid var(--rust);outline-offset:1px;border-color:var(--rust)}
.susc__form .btn{flex:0 0 auto;padding:14px 26px}
.susc__form .btn[disabled]{opacity:.6;cursor:wait}
/* Campo trampa para robots: fuera de pantalla, no display:none (algunos robots lo detectan). */
.susc__trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.susc__form.is-hecho input,.susc__form.is-hecho .btn{display:none}
.susc__aviso{flex:0 0 100%;min-height:20px;margin:2px 0 0;font-size:14px;color:var(--muted)}
.susc__aviso.is-error{color:#b3261e}
.susc__aviso.is-ok{color:#1f6b3a;font-weight:500}

.susc__legal{margin:18px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.susc__legal a{color:inherit;text-decoration:underline}

/* Celular: hoja que sube desde abajo, sin portada, para no tapar la lectura. */
@media (max-width:700px){
  .suscripcion{width:100vw;max-width:100vw;margin:auto 0 0;max-height:80vh;max-height:80dvh}
  .suscripcion[open]{grid-template-columns:1fr}
  .susc__tapa{display:none}
  .susc__cuerpo{padding:30px 22px 26px}
  .susc__titulo{font-size:28px}
}

/* Los disparadores de la ventana se muestran solo cuando el JavaScript los activa
   (el atributo hidden pierde contra display:inline-flex de .btn). */
[data-suscribir][hidden]{display:none!important}