/* ============================================================
   Nuevos Productos · Arletex Design System v3.3
   --------------------------------------------------------------
   Va inmediatamente debajo del Hero (ink). Se diseña como
   contrapunto editorial: paper de fondo, top-rule de imprenta,
   cabecera de redacción y tarjetas chunky con sombra sólida.

   Declaración:
     registro : @news  (Periódico)
     apertura : RunInHeadline (Anton + Fraunces italic inline)
     marco    : Top-rule + tick-marks de masthead
     hover    : lift-orange canónico
   ============================================================ */

.arl-np{
  --np-ink:        var(--ax-ink, #1F2530);
  --np-paper:      var(--ax-paper, #FAF6EE);
  --np-cream:      var(--ax-cream, #F2EDE4);
  --np-white:      var(--ax-white, #FFFFFF);
  --np-orange:     var(--ax-orange, #F15A29);
  --np-orange-dp:  var(--ax-orange-deep, #B0401A);
  --np-muted:      var(--ax-muted, #6E6A60);
  --np-rule:       2px;

  position: relative;
  background: var(--np-paper);
  color: var(--np-ink);
  padding: clamp(56px, 7vw, 96px) 0 clamp(72px, 9vw, 120px);
  border-top: var(--np-rule) solid var(--np-ink);
  font-family: 'Lato', system-ui, sans-serif;
  overflow: hidden;
}

/* Tick-marks de masthead — sin invadir contenido */
.arl-np::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 14px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--np-ink) 0,
    var(--np-ink) 1px,
    transparent 1px,
    transparent 56px
  );
  opacity: .18;
  pointer-events: none;
}

.arl-np > .container{
  max-width: 1380px;
  padding-left: clamp(20px, 4vw, 56px);
  padding-right: clamp(20px, 4vw, 56px);
  position: relative;
}

/* ---------- Cabecera ---------------------------------------- */
.arl-np__header{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  padding-bottom: clamp(24px, 3vw, 40px);
  border-bottom: var(--np-rule) solid var(--np-ink);
  margin-bottom: clamp(32px, 4vw, 56px);
  position: relative;
}

.arl-np__dateline{
  position: absolute;
  top: -36px;
  left: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--np-ink);
  background: var(--np-paper);
  padding: 0 14px 0 0;
}
.arl-np__dateline b{ color: var(--np-orange); font-weight: 700; }

.arl-np__display{
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(64px, 11vw, 156px);
  line-height: .82;
  letter-spacing: -.015em;
  color: var(--np-ink);
  margin: 0;
}
.arl-np__display em{
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  font-size: .96em;
  color: var(--np-orange);
  letter-spacing: -.02em;
  display: inline-block;
}

.arl-np__aside{
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-self: end;
}
.arl-np__intro{
  font-family: 'Lato', sans-serif;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--np-muted);
  margin: 0;
  max-width: 42ch;
}
.arl-np__intro b{ color: var(--np-ink); font-weight: 800; }

.arl-np__link{
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 14px;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--np-paper);
  text-decoration: none;
  background: var(--np-ink);
  border: var(--np-rule) solid var(--np-ink);
  border-radius: 0;
  padding: 16px 24px 15px;
  line-height: 1;
  box-shadow: 6px 6px 0 0 var(--np-orange);
  transition: transform .22s ease, box-shadow .22s ease,
              background .22s ease, color .22s ease;
  cursor: pointer;
}

/* Chip de libro abierto — fondo igual al botón (ink) con borde
   delgado orange para que tenga presencia sin desentonar. */
.arl-np__link i{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 13px;
  line-height: 1;
  color: var(--np-orange);
  background: var(--np-ink);
  border: 1.5px solid var(--np-orange);
  transition: transform .22s ease, background .22s ease,
              color .22s ease, border-color .22s ease;
}

.arl-np__link:hover,
.arl-np__link:focus-visible{
  background: var(--np-orange);
  color: var(--np-ink);
  border-color: var(--np-ink);
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 0 var(--np-ink);
  outline: none;
  text-decoration: none;
}
.arl-np__link:hover i,
.arl-np__link:focus-visible i{
  background: var(--np-orange);
  border-color: var(--np-ink);
  color: var(--np-ink);
  transform: translateX(3px);
}

.arl-np__link:active{
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--np-ink);
}

/* ---------- Rail -------------------------------------------- */
.arl-np__rail{
  position: relative;
  margin: 0 -12px;
}

.arl-np__cell{
  padding: 8px 12px;
  outline: none;
}

/* ---------- Card -------------------------------------------- */
.arl-np__card{
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--np-ink);
  background: var(--np-white);
  border: var(--np-rule) solid var(--np-ink);
  border-radius: 0;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.arl-np__card:hover,
.arl-np__card:focus-visible{
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 0 var(--np-orange);
  outline: none;
  text-decoration: none;
  color: var(--np-ink);
}
.arl-np__card:focus-visible{
  box-shadow: 5px 5px 0 0 var(--np-orange), 0 0 0 3px var(--np-ink);
}

/* Stamp — esquina superior izquierda */
.arl-np__stamp{
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--np-paper);
  background: var(--np-ink);
  padding: 6px 12px 5px;
  box-shadow: 3px 3px 0 0 var(--np-orange);
  line-height: 1;
}

/* Index Nº — esquina superior derecha (mono dateline) */
.arl-np__num{
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--np-ink);
  background: var(--np-paper);
  padding: 4px 8px 3px;
  line-height: 1;
}

/* Media */
.arl-np__media{
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--np-cream);
  border-bottom: var(--np-rule) solid var(--np-ink);
}
.arl-np__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s ease;
}
.arl-np__card:hover .arl-np__media img{
  transform: scale(1.045);
}

/* Foot — banda blanca con nombre + CTA */
.arl-np__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 18px;
  background: var(--np-white);
  border-top: 1px solid rgba(31, 37, 48, .08);
}
.arl-np__name{
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: .015em;
  color: var(--np-ink);
  line-height: 1;
}
.arl-np__cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--np-orange);
  white-space: nowrap;
}
.arl-np__cta::after{
  content: "→";
  font-size: 14px;
  line-height: 1;
  transition: transform .2s ease;
}
.arl-np__card:hover .arl-np__cta::after{
  transform: translateX(4px);
}

/* ---------- Slick — flechas y dots ------------------------- */
.arl-np .slick-list{ overflow: visible; padding: 4px 0 8px; }
.arl-np .slick-track{ display: flex; align-items: stretch; }
.arl-np .slick-slide{ height: auto; }
.arl-np .slick-slide > div{ height: 100%; }
.arl-np .slick-slide > div > .arl-np__cell{ height: 100%; }
.arl-np .slick-slide .arl-np__card{ height: 100%; }

/* Flechas ocultas — el carrusel se mueve por autoplay (5s) e
   infinite loop; en mobile/tablet el swipe nativo basta. Slick
   sigue inyectándolas en el DOM, sólo las quitamos visualmente. */
.arl-np .slick-prev,
.arl-np .slick-next{
  display: none !important;
}

/* Dots — barras chunky */
.arl-np .slick-dots{
  position: relative;
  bottom: auto;
  margin: 32px 0 0;
  padding: 0;
  display: flex !important;
  justify-content: center;
  gap: 10px;
  list-style: none;
}
.arl-np .slick-dots li{
  width: 32px;
  height: 4px;
  margin: 0;
}
.arl-np .slick-dots li button{
  width: 100%;
  height: 100%;
  padding: 0;
  background: var(--np-ink);
  border: 0;
  opacity: .25;
  transition: opacity .2s ease, background .2s ease, transform .2s ease;
  cursor: pointer;
}
.arl-np .slick-dots li button::before{ content: ""; }
.arl-np .slick-dots li.slick-active button{
  background: var(--np-orange);
  opacity: 1;
  transform: scaleX(1.4);
  transform-origin: left center;
}

/* ---------- Responsive ------------------------------------- */
@media (max-width: 991px){
  .arl-np__header{
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
  }
  .arl-np__intro{ max-width: 64ch; }
}

@media (max-width: 575px){
  .arl-np{ padding: 56px 0 64px; }
  .arl-np__display{ font-size: clamp(48px, 13vw, 76px); }
  .arl-np__stamp{ font-size: 12px; padding: 5px 10px 4px; }
  .arl-np__num{ font-size: 10px; }
  .arl-np__foot{ padding: 14px 16px 16px; }
}

/* ---------- Reduced motion --------------------------------- */
@media (prefers-reduced-motion: reduce){
  .arl-np__card,
  .arl-np__media img,
  .arl-np__cta::after,
  .arl-np__link,
  .arl-np__link i{
    transition: none !important;
  }
  .arl-np__card:hover,
  .arl-np__card:hover .arl-np__media img,
  .arl-np__card:hover .arl-np__cta::after,
  .arl-np__link:hover,
  .arl-np__link:hover i,
  .arl-np__link:active{
    transform: none !important;
  }
}