/* =============================================================================
   ÚLTIMAS NOVEDADES · las actualizaciones gordas, en la portada
   =============================================================================

   DE DÓNDE VIENE. La referencia que puso el usuario es el bloque «LATEST NEWS»
   de kineticgames.co.uk: banda roja, titular a la izquierda, botón de «más» a la
   derecha y tres tarjetas oscuras con foto, fecha, título y un «leer más» con
   flecha. Eso es lo que hay aquí, contado con las piezas de esta casa y no con
   las suyas:

   · LA BANDA ES `acto--rojo`, que ya existía sin usar. El rojo suyo es un naranja
     de póster; el nuestro es el granate del expediente, que es el color que ya
     tiene esta web para lo que se subraya. Copiar el naranja habría metido un
     color de otra casa en medio de la nuestra.
   · LOS TÍTULOS SIGUEN SIENDO PEGATINAS (`.titulo`, en actos.css), no rótulos en
     versalitas: es la regla de la portada entera y no se rompe por una sección.
   · Y NADA ACABA EN LÍNEA RECTA. La foto de cada tarjeta se corta con un
     desgarrón por abajo, igual que las secciones se rasgan entre ellas.

   LA VERSIÓN Y LA FECHA VAN DELANTE DEL TÍTULO, y no es adorno: la mitad del
   mensaje de esta sección es que hay TRES tandas con TRES fechas distintas. Quien
   no lea ni una tarjeta entera tiene que llevarse eso.
============================================================================= */

/* --- La cabecera: titular a la izquierda, «más» a la derecha ---------------- */
.nov-cab {
  display: flex;
  flex-wrap: wrap;
  /* El botón se alinea con el TITULAR y no con el final del párrafo: pegado
     abajo se queda flotando a media altura, lejos de todo y sin pareja. A la
     altura del titular forma una línea con él, que es lo que hace la
     referencia. */
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 34px;
  margin-bottom: clamp(30px, 4vw, 48px);
}
.nov-cab-texto { max-width: 62ch; }
/* El párrafo de debajo del titular no lleva el margen de abajo de siempre: aquí
   lo que separa de las tarjetas es el hueco de la cabecera, no el suyo. */
.nov-cab .parrafo { margin-bottom: 0; }
/* Un pelo por debajo del borde superior del titular: las mayúsculas de la
   pegatina empiezan más abajo que la caja de la letra, y a ras se ve alto. */
.nov-mas { margin-top: clamp(8px, 1.4vw, 22px); }

/* --- La fila de tarjetas ---------------------------------------------------- */
.novedades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  /* Todas las de una fila, igual de altas, y el «leer más» alineado abajo: tres
     tarjetas con el pie a tres alturas distintas se ven descuadradas aunque los
     resúmenes midan lo que midan. */
  align-items: stretch;
}

/* UNA TARJETA ES UN RECORTE DE PRENSA CLAVADO EN LA PÁGINA ROJA.
   Fondo casi negro para que la foto sea lo único que tiene color, un filo de
   ámbar de un píxel y sombra con desplazamiento y desenfoque de verdad — un halo
   sin desplazamiento no es profundidad, es decoración. */
.nov {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(14, 8, 12, .94), rgba(6, 4, 8, .97));
  box-shadow:
    inset 0 0 0 1px rgba(255, 196, 71, .16),
    0 18px 40px rgba(0, 0, 0, .55);
  transition:
    transform 220ms var(--ease-out),
    box-shadow 220ms ease;
}
.nov:hover {
  transform: translateY(-5px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 196, 71, .42),
    0 28px 58px rgba(0, 0, 0, .68);
}
/* El foco vive en el título, que es el control de verdad; el aro se dibuja
   alrededor de la tarjeta entera para que se vea qué se va a abrir. */
.nov:has(.nov-abrir:focus-visible) {
  box-shadow:
    inset 0 0 0 2px var(--lime),
    0 28px 58px rgba(0, 0, 0, .68);
}

/* --- La foto, con el borde de abajo arrancado ------------------------------- */
.nov-foto {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, #2a1020, #08060c 70%);
  clip-path: polygon(
    0 0, 100% 0, 100% 88%,
    92% 100%, 84% 91%, 76% 99%, 68% 90%, 60% 100%, 52% 92%,
    44% 99%, 36% 90%, 28% 100%, 20% 91%, 12% 99%, 4% 90%, 0 98%);
}
.nov-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--ease-out), filter 420ms ease;
}
.nov:hover .nov-foto img { transform: scale(1.05); filter: saturate(1.08); }
/* Un velo por abajo: la etiqueta de la versión se apoya ahí y sin él se pierde
   sobre las fotos claras. */
.nov-foto::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(4, 3, 6, .82));
}

/* LA TARJETA SIN FOTO NO ES UN HUECO GRIS. Se pinta con la marca al fondo y muy
   bajita: una novedad recién escrita, sin lámina todavía, tiene que verse como
   una tarjeta terminada y no como una imagen rota.
   El selector lleva el padre delante a propósito: sin él gana la regla de la
   foto de arriba —misma clase, un elemento más— y la marca sale recortada a lo
   ancho de la tarjeta. */
.nov-foto .nov-marca {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64%;
  height: auto;
  object-fit: contain;
  opacity: .15;
  filter: grayscale(1);
}

/* La etiqueta de la versión: una pegatina ladeada, del mismo palo que los
   titulares. Es el dato que dice «esto es una tanda», no una noticia suelta. */
.nov-ver {
  position: absolute;
  left: 14px;
  bottom: 16px;
  z-index: 2;
  padding: 4px 11px 5px;
  background: var(--amber);
  color: #241703;
  font-family: var(--face-gorda), var(--face-ui);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .06em;
  line-height: 1;
  transform: rotate(-2.2deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}

/* --- El texto --------------------------------------------------------------- */
.nov-cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 22px;
}
.nov-fecha {
  font-family: var(--face-ui);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* Tintado del ámbar de la sección, nunca gris: un gris sobre un fondo con
     color se ve sucio y encima se lee peor. */
  color: rgba(255, 205, 120, .82);
}
.nov-t { margin: 0; }
/* EL TÍTULO ES EL BOTÓN. La tarjeta entera se puede pulsar, pero lo que recibe
   el foco y responde al teclado es esto: un `<button>` no puede llevar un título
   dentro, y una tarjeta que solo se abre con el ratón no se abre para todo el
   mundo. */
.nov-abrir {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-family: var(--face-gorda), var(--face-ui);
  font-weight: 800;
  font-size: clamp(20px, 1.5vw, 24px);
  line-height: 1.16;
  text-align: left;
  text-wrap: balance;
  cursor: pointer;
  transition: color 160ms ease;
}
.nov:hover .nov-abrir { color: var(--amber); }
/* El aro lo pinta la tarjeta (regla de arriba); aquí sobra y encima quedaba un
   rectángulo suelto alrededor de las letras. */
.nov-abrir:focus-visible { outline: none; }
/* Y toda la tarjeta es zona de clic, sin envolver nada en un enlace: el
   pseudoelemento se estira por encima y el navegador manda el clic al botón. */
.nov-abrir::after { content: ""; position: absolute; inset: 0; }

.nov-r {
  margin: 0;
  flex: 1;
  font-size: 15.5px;
  line-height: 1.62;
  color: rgba(255, 236, 230, .74);
}
.nov-leer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-family: var(--face-gorda), var(--face-ui);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber);
}
.nov-leer svg { width: 17px; height: 17px; transition: transform 220ms var(--ease-out); }
.nov:hover .nov-leer svg { transform: translateX(5px); }

/* =============================================================================
   LA NOVEDAD ABIERTA
   =============================================================================
   Se lee entera aquí y no en otra página: son cuatro párrafos y una lista, y
   mandar a alguien a otra dirección para eso le saca de la portada justo cuando
   estaba a punto de leer el precio.

   Con flechas se pasa de una a otra sin cerrar, como en las cartas de los
   catorce: quien abre la primera casi siempre quiere ver la siguiente.
============================================================================= */
.nota-fondo {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: clamp(14px, 4vh, 46px) clamp(12px, 4vw, 40px);
  background: rgba(3, 2, 6, .84);
  backdrop-filter: blur(7px);
  overflow-y: auto;
  animation: nota-entra 220ms var(--ease-out);
}
@keyframes nota-entra { from { opacity: 0; } to { opacity: 1; } }

.nota {
  position: relative;
  width: min(780px, 100%);
  max-height: min(88vh, 940px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #150c16, #07050b 58%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 196, 71, .28),
    0 36px 90px rgba(0, 0, 0, .78);
  animation: nota-sube 300ms var(--ease-out);
}
@keyframes nota-sube {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.nota-scroll { overflow-y: auto; }

.nota-foto {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: radial-gradient(120% 130% at 50% 0%, #2f1226, #07050b 72%);
  clip-path: polygon(
    0 0, 100% 0, 100% 90%,
    93% 100%, 85% 92%, 77% 100%, 69% 91%, 61% 100%, 53% 93%,
    45% 100%, 37% 91%, 29% 100%, 21% 92%, 13% 100%, 5% 91%, 0 99%);
}
.nota-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

.nota-cab { padding: 22px clamp(20px, 4vw, 40px) 0; }
/* Sin lámina, la cabecera es lo primero y necesita su aire arriba. */
.nota-scroll > .nota-cab:first-child { padding-top: clamp(28px, 4vw, 40px); }
.nota-sello {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.nota-ver {
  padding: 4px 11px 5px;
  background: var(--amber);
  color: #241703;
  font-family: var(--face-gorda), var(--face-ui);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .06em;
  line-height: 1;
  transform: rotate(-2deg);
}
.nota-fecha {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 205, 120, .8);
}
.nota-t {
  margin: 0;
  font-family: var(--face-gorda), var(--face-ui);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: #fff;
  text-wrap: balance;
}

.nota-cuerpo {
  padding: 18px clamp(20px, 4vw, 40px) 30px;
  max-width: 68ch;
}
.nota-cuerpo p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.72;
  color: rgba(255, 240, 235, .82);
}
.nota-cuerpo strong { color: #fff; font-weight: 700; }
/* Los subtítulos del texto («## » al escribirlo). Más pequeños que el título de
   la novedad y en ámbar: dentro de un texto largo lo que hace falta es saber por
   dónde vas, no otro titular que compita con el de arriba. */
.nota-cuerpo h4 {
  margin: 30px 0 12px;
  font-family: var(--face-gorda), var(--face-ui);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  color: var(--amber);
}
.nota-cuerpo h4:first-child { margin-top: 0; }
.nota-cuerpo ul { margin: 0 0 20px; padding: 0; list-style: none; }
.nota-cuerpo li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  font-size: 16.5px;
  line-height: 1.66;
  color: rgba(255, 240, 235, .82);
}
/* La viñeta, dibujada: un cuadrado ámbar girado. Un guion o un punto del sistema
   son de otra casa. */
.nota-cuerpo li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--amber);
  transform: rotate(45deg);
}

.nota-pie {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px clamp(16px, 3vw, 26px);
  background: rgba(255, 196, 71, .05);
  box-shadow: inset 0 1px 0 rgba(255, 196, 71, .18);
}
.nota-flecha,
.nota-x {
  border: 0;
  cursor: pointer;
  font-family: var(--face-gorda), var(--face-ui);
  font-weight: 800;
  line-height: 1;
  transition: background 140ms ease, color 140ms ease, transform 140ms var(--ease-pop);
}
.nota-flecha {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: rgba(255, 196, 71, .12);
  color: var(--amber);
}
.nota-flecha svg { width: 20px; height: 20px; }
.nota-flecha:hover:not(:disabled) { background: rgba(255, 196, 71, .26); transform: translateY(-2px); }
.nota-flecha:disabled { opacity: .3; cursor: default; }
.nota-flecha--antes svg { transform: rotate(180deg); }
.nota-x {
  flex: 1;
  padding: 13px 18px;
  background: var(--amber);
  color: #241703;
  font-size: 15px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.nota-x:hover { background: #ffd873; transform: translateY(-2px); }

/* --- El índice: todas las novedades, cuando hay más de tres ----------------- */
.nota-indice { padding: 8px clamp(14px, 3vw, 26px) 22px; }
.nota-fila {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 16px;
  width: 100%;
  padding: 16px 14px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 -1px 0 rgba(255, 196, 71, .14);
  transition: background 160ms ease;
}
.nota-fila:hover { background: rgba(255, 196, 71, .08); }
.nota-fila:last-child { box-shadow: none; }
.nota-fila .nota-ver { transform: none; }
.nota-fila-medio { display: grid; gap: 4px; }
.nota-fila-t {
  font-family: var(--face-gorda), var(--face-ui);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  color: #fff;
}
.nota-fila svg { width: 18px; height: 18px; color: var(--amber); }

/* Con la novedad abierta, la página de detrás no se mueve: si se moviera, al
   cerrar uno acabaría en otro sitio del que estaba. */
body.con-nota { overflow: hidden; }

/* --- Estrecho --------------------------------------------------------------- */
@media (max-width: 720px) {
  .nov-cab { flex-direction: column; }
  .nov-mas { margin-top: 0; }
  .nota-fila { grid-template-columns: 1fr auto; }
  .nota-fila .nota-ver { grid-column: 1 / -1; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .nota-fondo, .nota { animation: none; }
  .nov, .nov-foto img, .nov-leer svg { transition: none; }
}