: clickear el nombre lleva a la ficha del juego (ver
home.js). text-decoration:none porque, si no, el subrayado que pone
base.css en hover se ve por debajo del título.
position: absolute a propósito, tapando todo el cuerpo: en reposo mide
justo lo mismo (min-height: 100%) y centra el título en vertical con
flex; en hover el título se muestra completo y la caja crece hacia abajo
por encima de lo que haya, sin cambiar el alto de la card ni de la fila
(que un elemento absoluto no cuenta para el layout). */
.game-card__texto {
position: absolute;
top: 0;
/* -1px a los costados y +1px de alto: la caja cubre justo el borde de 1px
de la card (.card), así en hover su propio borde (ver más abajo) tapa
el de la card y, si el título se sale por abajo, el trazo sigue sin
cortarse. Sin borde arriba: ahí está la unión con la imagen. */
left: -1px;
right: -1px;
min-height: calc(100% + 1px);
box-sizing: border-box;
display: flex;
align-items: center;
padding: var(--espaciado-3);
border: 1px solid transparent;
border-top: 0;
border-radius: 0 0 var(--radio-md) var(--radio-md);
text-decoration: none;
}
/* Deja libre el lugar del botón de carrito (que va encima, a la derecha). */
.game-card__cuerpo:has(.game-card__carrito) .game-card__texto {
padding-right: calc(var(--espaciado-3) + var(--control-alto) + var(--espaciado-2));
}
.game-card__texto:hover {
text-decoration: none;
}
/* Con hover o foco en la card, la caja del título se pinta del mismo color
que la card: así la parte que se sale por debajo (si el título es largo)
se ve como una continuación de la card, no como texto suelto. */
.game-card:hover .game-card__texto,
.game-card:focus-within .game-card__texto {
background: var(--superficie);
border-color: var(--primario-o1);
box-shadow: 0 12px 30px var(--sombra-elevacion);
}
.game-card__title {
margin: 0;
/* Ahora que .game-card__texto es un
, sin esto heredaría el celeste
de base.css en vez del blanco de siempre. */
color: var(--primario-c3);
font-size: 16px;
/* Máximo 2 líneas en reposo (con "…"): 2 × 19px entra en el alto fijo de
la fila, así todas las cards miden lo mismo. En hover se muestra completo. */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
overflow-wrap: anywhere;
}
.game-card:hover .game-card__title,
.game-card:focus-within .game-card__title {
-webkit-line-clamp: unset;
line-clamp: unset;
}
/* Cuadrado con esquinas redondeadas del botón "Agregar al carrito" (solo en cards "de pago",
simulado, ver carrito.js) de las filas de la Home: 44px de área táctil
(--control-alto) aunque se vea chico, mismo criterio que el resto de
los controles de ícono del proyecto. El banner "Destacados" ya no tiene
este botón — ver DECISIONES.md, "Ficha de producto" (etapa 3). */
.game-card__carrito {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--control-alto);
height: var(--control-alto);
border: 2px solid var(--acento);
border-radius: var(--radio-md);
background: var(--fondo-o1);
color: var(--acento);
font-size: 18px;
flex-shrink: 0;
/* margin-left:auto lo manda a la derecha (ya no hay otro item en el flex
que lo empuje), y position+z-index lo dejan por encima de
.game-card__texto, que es absoluto y tapa todo el cuerpo. */
position: relative;
z-index: 1;
margin-left: auto;
cursor: pointer;
transition: background-color var(--duracion-rapida) ease, color var(--duracion-rapida) ease, transform var(--duracion-hover) var(--easing-rebote);
}
.game-card__carrito:hover {
background: var(--acento);
color: var(--fondo);
}
/* Ya está en el carrito: queda "hundido" y relleno en vez de volver al
estado normal — así se nota de un vistazo cuál ya se agregó, sin
necesidad de leer texto. */
.game-card__carrito[aria-pressed="true"] {
background: var(--acento);
color: var(--fondo);
transform: scale(0.9);
}
@media (prefers-reduced-motion: reduce) {
.carrusel__flecha,
.game-card__carrito {
transition: none;
}
}
/* =========================================================
4. Detalles de la página
========================================================= */
/* Con el header fijo (desde tablet, ver .header--fijo en header.css), un
link a un ancla como "Mis juegos" (index.html#fila-mis-juegos) dejaba el
título de la fila tapado por el header. scroll-margin-top le dice al
navegador cuánto espacio dejar arriba cuando scrollea hasta ese elemento:
alto del header (control + padding de arriba y de abajo) más un poco de aire.
Va en cada destino (títulos de fila, banner, mensaje de búsqueda) y no como
scroll-padding-top en html: ese margen marcaba toda la franja del header
como "tapada", y al escribir en el buscador (que vive ahí) el navegador
scrolleaba para arriba en cada tecla intentando sacar el cursor de esa zona. */
@media (min-width: 48rem) {
.carrusel h2,
#banner,
.busqueda-estado {
scroll-margin-top: calc(var(--control-alto) + 2 * var(--espaciado-2) + var(--espaciado-4));
}
}
/* Resultado de la búsqueda del header (buscador.js). Vacío no ocupa lugar.
No hace falta una regla para [hidden]: base.css ya la tiene global. */
.busqueda-estado {
margin: var(--espaciado-8) 0 0;
color: var(--primario-c3);
}
.busqueda-estado:empty {
display: none;
}