/* ═══════════════════════════════════════════════════════════════
   NOTICIAS — partials/noticias.php

   Las tarjetas de /news. La pieza está calcada de las de
   /case-carousel —imagen a sangre, velo que sube desde abajo, texto
   encima— porque es la que el visitante ya conoce de la portada.

   HOJA APARTE Y NO REUTILIZANDO case-carousel.css: aquel carrusel
   arrastra scroll horizontal, JavaScript y vídeo de fondo, y /news no
   dibuja nada de eso. Cargar su CSS entero para copiar el aspecto de
   una tarjeta sería bajar tres cosas para usar una.

   LA DIFERENCIA de fondo: allí el texto aparece al pasar el puntero;
   aquí va siempre puesto. Una noticia que hay que descubrir pasando el
   ratón no es una noticia — y en una pantalla táctil no hay puntero.
   ═══════════════════════════════════════════════════════════════ */

.nt {
  background: var(--bg);
  padding: clamp(80px, 14vh, 170px) var(--hd-pad) clamp(60px, 11vh, 140px);
}

.nt-dentro {
  max-width: var(--ancho-max);
  margin: 0 auto;
}


/* ── La cabecera ───────────────────────────────────────────────── */
.nt-cabeza {
  margin-bottom: clamp(36px, 7vh, 90px);
}

.nt-titular {
  font-size: clamp(52px, 11vw, 168px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .92;
  color: var(--tinta-alta);
}

.nt-entrada {
  max-width: 52ch;
  margin-top: clamp(16px, 3vh, 28px);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--muted);
}

.nt-vacio {
  font-size: clamp(15px, 1.3vw, 19px);
  color: var(--muted);
}
.nt-vacio a { color: var(--acento); text-decoration: none; }
.nt-vacio a:hover { text-decoration: underline; }


/* ── La rejilla ────────────────────────────────────────────────────
   Tres columnas cuando hay material. Con menos, se ajusta: una sola
   tarjeta en una rejilla de tres deja dos tercios en blanco y se lee
   como si faltara algo por cargar, no como una decisión.

   El número lo escribe el PHP en data-n, así que esto se ajusta solo
   según cuántas noticias haya en config/noticias.php. */
.nt-rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Con UNA sola no se estira a los 1440 del contenedor: una tarjeta de
   ese ancho con una imagen 16/10 dentro ocupa media pantalla de alto y
   deja de parecer una tarjeta. Se le pone un techo y se centra. */
.nt-rejilla[data-n="1"] {
  grid-template-columns: minmax(0, clamp(300px, 46vw, 560px));
  justify-content: center;
}
.nt-rejilla[data-n="2"] {
  grid-template-columns: repeat(2, minmax(0, clamp(300px, 42vw, 520px)));
  justify-content: center;
}


/* ── La tarjeta ────────────────────────────────────────────────── */
.nt-tarjeta {
  display: flex;
  flex-direction: column;
  border-radius: clamp(14px, 1.5vw, 24px);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.nt-tarjeta:hover {
  transform: translateY(-4px);
  border-color: var(--dim);
}

.nt-medio {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #16181c;
}

.nt-medio picture { display: contents; }

.nt-medio img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.nt-tarjeta:hover .nt-medio img { transform: scale(1.04); }

/* El velo sube desde abajo. No lleva texto encima —el de esta tarjeta
   va debajo de la imagen— pero funde el borde inferior de la foto con
   el cuerpo de la tarjeta: sin él hay un corte duro entre la imagen y
   el fondo, y las dos piezas se ven pegadas en vez de una sola. */
.nt-velo {
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(12,12,12,.55), transparent);
  pointer-events: none;
}


/* ── El texto ──────────────────────────────────────────────────── */
.nt-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(18px, 1.8vw, 28px);
}

.nt-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(11px, .92vw, 13px);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.nt-punto {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* El rótulo va en el acento: es lo único de la tarjeta que dice de qué
   TIPO de aviso se trata, y de un vistazo. */
.nt-rotulo { color: var(--acento); }

.nt-titulo {
  margin-top: clamp(10px, 1.4vh, 16px);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--tinta-alta);
}

.nt-nota {
  margin-top: clamp(8px, 1.2vh, 14px);
  max-width: 46ch;
  font-size: clamp(13.5px, 1.05vw, 15.5px);
  line-height: 1.6;
  color: var(--tinta);
}

.nt-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(14px, 2vh, 22px);
  font-size: clamp(11px, .92vw, 13px);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-alta);
  text-decoration: none;
  transition: color .25s ease;
}
.nt-cta:hover { color: var(--acento); }

.nt-flecha {
  width: 17px; height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.nt-cta:hover .nt-flecha { transform: translateX(4px); }


/* ═══════════════════════════════════════════════════════════════
   Tamaños
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
  /* Dos por fila. A tres, la nota baja de 30 caracteres por renglón y
     se lee a tirones. */
  .nt-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  /* Una por fila, y los topes de arriba dejan de aplicar: a este ancho
     la tarjeta debe ocupar lo que haya. */
  .nt-rejilla,
  .nt-rejilla[data-n="1"],
  .nt-rejilla[data-n="2"] {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nt-tarjeta, .nt-medio img, .nt-cta, .nt-flecha { transition: none; }
  .nt-tarjeta:hover { transform: none; }
  .nt-tarjeta:hover .nt-medio img { transform: none; }
  .nt-cta:hover .nt-flecha { transform: none; }
}