/* ======================================================================================
   Bloque de líneas de la portada — tres pósters con acordeón.

   Vive encima de «Categorías de juegos», que es automática (todas las categorías por ventas)
   y no puede afirmar nada. Aquí sí se dice qué es cada línea, y se lleva a la LANDING.

   El formato es vertical a propósito: la parrilla de abajo es toda apaisada, así que el
   formato por sí solo ya separa un bloque del otro sin decorar nada.
   ====================================================================================== */
.nsr-lin{--lin-ink:#fff; --lin-tinta:#ccc; --lin-hilo:#404040}
.nsr-lin__wrap{padding-top:10px; padding-bottom:26px}

/* El color de cada línea es el de su propia landing, no un invento de este módulo. */
.nsr-lin--adom{--c:#c03060; --c-hi:#e8497f}
.nsr-lin--tov {--c:#0f5d99; --c-hi:#2f8fd6}
.nsr-lin--vmp {--c:#c8102e; --c-hi:#ff2e40}

.nsr-lin__fila{display:flex; height:500px; gap:3px; background:var(--lin-hilo); border:1px solid var(--lin-hilo)}
.nsr-lin__p{position:relative; flex:1 1 0; min-width:0; overflow:hidden; background:#000;
  transition:flex-grow .55s cubic-bezier(.2,.7,.2,1)}

/* Anclado ARRIBA, no al centro: el arte es cuadrado y el póster mide 500 de alto siempre, así
   que en reposo (381 de ancho) no recorta nada en vertical, pero al abrirse a 676 el arte crece
   a 676 de alto y sobran 176. Con `center` se iban 88 por arriba y descabezaban a las figuras;
   así lo que sobra se va por abajo, que es fondo. */
.nsr-lin__art{position:absolute; inset:0; background-position:center top; background-size:cover;
  background-repeat:no-repeat; filter:grayscale(.5) brightness(.62);
  /* El zoom del hover crece desde arriba por lo mismo: desde el centro subía el arte 10 px y
     volvía a morder las cabezas. */
  transform-origin:center top;
  transition:filter .55s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.nsr-lin__scrim{position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 26%, rgba(0,0,0,.72) 66%, #000 100%)}
.nsr-lin__glow{position:absolute; inset:0; opacity:0; transition:opacity .55s ease;
  background:radial-gradient(120% 62% at 22% 100%, color-mix(in srgb, var(--c) 52%, transparent), transparent 64%)}
.nsr-lin__linea{position:absolute; z-index:3; inset:auto 0 0 0; height:3px; background:var(--c);
  transform:scaleX(.3); transform-origin:left; transition:transform .55s cubic-bezier(.2,.7,.2,1)}

/* El enlace principal cubre el póster entero y es hermano del contenido, no hijo: colgado del
   logo, su inset:0 se resolvería contra .nsr-lin__c -que es absolute- y solo taparía esa esquina. */
.nsr-lin__link{position:absolute; z-index:2; inset:0}

/* Todo a la izquierda y anclado abajo. pointer-events:none deja pasar el clic al enlace de
   debajo; el menú y el botón lo recuperan. */
.nsr-lin__c{position:absolute; z-index:3; inset:auto 24px 24px 24px; pointer-events:none}
.nsr-lin__logo{display:block; height:46px; background-position:left bottom; background-size:contain;
  background-repeat:no-repeat}
.nsr-lin__ex{display:block; max-height:0; opacity:0; overflow:hidden;
  transition:max-height .55s cubic-bezier(.2,.7,.2,1), opacity .45s ease}
.nsr-lin__claim{font-weight:600; font-size:15px; line-height:1.4; color:var(--lin-ink);
  margin:16px 0 0; max-width:36ch}

/* El menú es la razón de que el póster ya no pueda ser UN enlace: no se anidan enlaces. */
.nsr-lin__menu{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-wrap:wrap; gap:6px 8px}
.nsr-lin__menu li{margin:0}
.nsr-lin__menu a{pointer-events:auto; display:inline-block; text-decoration:none;
  font-size:12.5px; line-height:1; color:var(--lin-tinta); padding:7px 11px;
  border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.35);
  transition:border-color .25s ease, color .25s ease, background .25s ease}
.nsr-lin__menu a:hover, .nsr-lin__menu a:focus{color:#fff; border-color:var(--c-hi);
  background:color-mix(in srgb, var(--c) 30%, transparent)}
.nsr-lin__cta{pointer-events:auto; display:inline-block; margin:16px 0 0; text-decoration:none;
  font-family:'Oxanium', sans-serif; font-weight:600; font-size:11px; line-height:1;
  letter-spacing:.16em; text-transform:uppercase; color:#fff;
  background:var(--c); padding:12px 22px; transition:background .3s ease}
.nsr-lin__cta:hover, .nsr-lin__cta:focus{background:var(--c-hi); color:#fff}

/* El acordeón SOLO donde hay ratón de verdad. :focus-within lo abre con el teclado, o quien
   navegue con él no vería nunca ni el menú ni el botón.

   OJO al :not(): comprime a los HERMANOS, no a «todos». Sin él, `.nsr-lin__fila:hover
   .nsr-lin__p` (0,3,0) le gana por especificidad a `.nsr-lin__p:hover` (0,2,0), los tres se
   quedan en .62 -o sea, iguales- y el acordeón no abre nunca aunque el texto sí aparezca. */
@media (hover:hover){
  .nsr-lin__fila:hover .nsr-lin__p:not(:hover),
  .nsr-lin__fila:focus-within .nsr-lin__p:not(:focus-within){flex-grow:.62}
  .nsr-lin__p:hover, .nsr-lin__p:focus-within{flex-grow:1.8}
  .nsr-lin__p:hover .nsr-lin__art, .nsr-lin__p:focus-within .nsr-lin__art{filter:none; transform:scale(1.04)}
  .nsr-lin__p:hover .nsr-lin__glow, .nsr-lin__p:focus-within .nsr-lin__glow{opacity:1}
  .nsr-lin__p:hover .nsr-lin__ex, .nsr-lin__p:focus-within .nsr-lin__ex{max-height:230px; opacity:1}
  .nsr-lin__p:hover .nsr-lin__linea, .nsr-lin__p:focus-within .nsr-lin__linea{transform:scaleX(1)}
}

/* Sin ratón no hay hover, y esconder el argumento tras un gesto que no existe es esconderlo:
   los tres se apilan ya abiertos, en color. La condición es hover:none y no el ancho, para que
   una tableta táctil ancha también los reciba abiertos en vez de un bloque que no reacciona. */
@media (hover:none), (max-width:900px){
  .nsr-lin__fila{display:grid; grid-template-columns:1fr; height:auto; gap:16px; background:none; border:0}
  /* Cuadrado y no 4:5: apilados y ya abiertos, tres pósters altos se comían 1,8 pantallas. El
     suelo lo pone el contenido (232 px), así que por debajo de cuadrado el arte desaparece. */
  .nsr-lin__p{aspect-ratio:1/1}
  .nsr-lin__c{inset:auto 20px 20px 20px}
  .nsr-lin__art{filter:none}
  .nsr-lin__glow{opacity:1}
  .nsr-lin__ex{max-height:none; opacity:1}
  .nsr-lin__linea{transform:scaleX(1)}
  .nsr-lin__claim{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .nsr-lin__p, .nsr-lin__art, .nsr-lin__glow, .nsr-lin__ex, .nsr-lin__linea{transition:none}
}