/* ==========================================================================
   Pop-up Newsletter (obs. 14) — misma gramática que la V8: caja de papel,
   línea fina, tipografía condensada y cero adornos.
   ========================================================================== */

.nl-overlay{
  position: fixed;
  inset: 0;
  z-index: 240;   /* por encima del header (200) y del drawer móvil (220) */
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(18,17,15,.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s;
}
.nl-overlay.is-open{ opacity: 1; visibility: visible; }

.nl-modal{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  width: min(880px, 100%);
  max-height: min(640px, 88vh);
  background: var(--paper);
  border: 1px solid var(--line-2, rgba(23,21,17,.14));
  overflow: hidden;
  transform: translateY(14px);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.nl-overlay.is-open .nl-modal{ transform: none; }

.nl-modal__media{ position: relative; overflow: hidden; background: var(--crema-2); }
.nl-modal__media img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

.nl-modal__body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1.6rem, 3.4vw, 2.6rem);
  min-width: 0;
}

.nl-modal__mark{ width: 34px; height: auto; margin-bottom: .2rem; }

.nl-modal__kicker{
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-faint, #8C8375);
  margin: 0;
}
.nl-modal__title{
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0;
}
.nl-modal__text{
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text-dim, #6B6255);
  margin: 0;
  max-width: 34ch;
}

.nl-form{ display: flex; flex-direction: column; gap: .7rem; margin-top: .4rem; }
.nl-form__field{
  width: 100%;
  height: 48px;
  padding: 0 .9rem;
  font: inherit;
  font-size: .92rem;
  color: var(--text, #171511);
  background: transparent;
  border: 1px solid var(--line-2, rgba(23,21,17,.22));
  border-radius: 0;
  transition: border-color .2s ease;
}
.nl-form__field::placeholder{ color: var(--text-faint, #8C8375); }
.nl-form__field:focus{ outline: none; border-color: var(--text, #171511); }

.nl-form__submit{
  height: 48px;
  font: inherit;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-inv, #F3EFE7);
  background: var(--negro, #12110F);
  border: 1px solid var(--negro, #12110F);
  cursor: pointer;
  transition: opacity .2s ease;
}
.nl-form__submit:hover{ opacity: .84; }
.nl-form__submit[disabled]{ opacity: .5; cursor: default; }

.nl-form__msg{
  font-size: .8rem;
  line-height: 1.45;
  color: var(--text-dim, #6B6255);
  min-height: 1.1em;
  margin: 0;
}
.nl-form__msg--error{ color: #9B2C1E; }

.nl-modal__skip{
  align-self: flex-start;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint, #8C8375);
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  /* zona táctil ≥44 px de alto sin separar el texto de la línea inferior */
  padding: .8rem 0 .55rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.nl-modal__skip:hover{ color: var(--text, #171511); border-bottom-color: currentColor; }

.nl-modal__close{
  position: absolute;
  top: .6rem; right: .6rem;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: none;
  color: var(--text, #171511);
  cursor: pointer;
  z-index: 2;
}
.nl-modal__close .icon{ width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.4; fill: none; }
.nl-modal__close:hover{ opacity: .6; }

.nl-legal{
  font-size: .66rem;
  line-height: 1.5;
  color: var(--text-faint, #8C8375);
  margin: 0;
  max-width: 38ch;
}

/* Móvil: la foto pasa a banda superior — el modal no debe empujar el pliegue */
@media (max-width: 720px){
  .nl-modal{
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    max-height: 90vh;
  }
  .nl-modal__media{ height: 32vh; max-height: 240px; }
  .nl-modal__close{ color: var(--text-inv, #F3EFE7); }
  .nl-modal__body{ overflow-y: auto; }
}
@media (max-width: 380px){
  .nl-modal__media{ height: 24vh; }
}

@media (prefers-reduced-motion: reduce){
  .nl-overlay, .nl-modal{ transition: none; }
}

/* ==========================================================================
   Fondos alternos de portada (obs. 9) — el rojo y el amarillo llegaron con
   dos fotos cada uno; se cruzan en fundido lento en vez de elegir una.
   ========================================================================== */
.portada-bg--alt{
  opacity: 0;
  animation: portada-cruce 18s ease-in-out infinite;
}
@keyframes portada-cruce{
  0%, 42%   { opacity: 0; }
  50%, 92%  { opacity: 1; }
  100%      { opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .portada-bg--alt{ animation: none; opacity: 0; }
}

/* El cursor técnico de la V8 esconde el puntero nativo (html.v8-cursor-active
   { cursor:none }). Dentro de un formulario eso es hostil: no se ve dónde se
   escribe. Mientras el pop-up está abierto se devuelve el cursor del sistema y
   se apaga el de la retícula. */
html.nl-abierto.v8-cursor-active,
html.nl-abierto.v8-cursor-active *{ cursor: auto; }
html.nl-abierto .nl-form__field{ cursor: text; }
html.nl-abierto .nl-form__submit,
html.nl-abierto .nl-modal__close,
html.nl-abierto .nl-modal__skip{ cursor: pointer; }
html.nl-abierto .v8-cursor,
html.nl-abierto .v8-cursor-frame{ opacity: 0; }

/* ==========================================================================
   Carga diferida de fondos (28-ago-2026): la foto ya no viene escrita en el
   HTML, la pone js/imagenes.js cuando la sección se acerca. Mientras tanto la
   portada no debe verse como un hueco blanco: se queda en el negro de marca y
   la foto entra con un fundido corto.
   ========================================================================== */
.portada-bg{ background-color: var(--negro, #12110F); }
.has-js .portada-bg:not(.portada-bg--alt){ opacity: 0; transition: opacity .5s ease; }
.has-js .portada-bg.bg-cargado{ opacity: 1; }
.has-js .portada-bg--alt{ transition: none; }
.has-js .portada-bg--alt:not(.bg-cargado){ animation: none; }

/* El recorte de producto aparece cuando llega, no de golpe con el placeholder */
.producto-img[data-img]{ transition: opacity .35s ease; }

/* ==========================================================================
   Tagline del hero (29-ago-2026): el video abre con el wordmark "MIRALOS®"
   sobreimpreso y el tagline caía encima. js/main.js lo aparta durante ese
   primer segundo y medio. Con JS arranca oculto —el póster es ese mismo
   fotograma— y sin JS se comporta como siempre.
   ========================================================================== */
.has-js .hero__tagline{
  opacity: 0;
  transition: opacity .22s ease;   /* se va rápido, para no pisar el wordmark */
}
.has-js .hero__tagline.is-visible{
  opacity: 1;
  transition: opacity .55s ease .1s;   /* y vuelve con calma */
}
@media (prefers-reduced-motion: reduce){
  .has-js .hero__tagline{ transition: none; }
  .has-js .hero__tagline.is-visible{ transition: none; }
}

/* ==========================================================================
   Póster del hero — va por CSS, no por el atributo `poster`, para controlar
   cuándo se pide y que sirva de respaldo si el video no llega a reproducirse.
   ========================================================================== */
.hero video{
  background-image: url("../assets/img/hero-poster-hq.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==========================================================================
   Hero en pantallas altas (30-ago-2026)
   Hasta ayer había que recortar la altura del hero en móvil porque el clip
   era panorámico y, a pantalla completa, el wordmark del propio video se
   salía por los lados. Ya no: hay un montaje vertical 3:4 —el clip original
   extendido arriba y abajo con IA— así que el hero vuelve a ocupar la
   pantalla entera, que es como debe verse.
   El póster acompaña al video que toque.
   ========================================================================== */
html.hero-vertical .hero video{
  background-image: url("../assets/img/hero-poster-vertical.jpg");
}