/**
 * ¿Qué te trae por aquí?
 *
 * Medidas tomadas del diseño a 1366 px por comparación de píxel, no a ojo:
 * tarjetas de 206 px con hueco de 54 px dentro de un contenedor de 1246.
 * Con 5 tarjetas y el contenedor del sistema, repeat(5,1fr) da exactamente
 * esos 206 px. Por eso la rejilla se expresa en fracciones y no en píxeles:
 * si el cliente añade la sexta tarjeta, sigue cuadrando.
 */

.j-atino{
	display:grid;
	grid-template-columns:repeat(var(--j-atino-columnas,5),1fr);
	gap:54px;
	margin:0;padding:0;list-style:none;
}

/* Con 6 tarjetas el diseño no cabe a 5 columnas: pasa a 3x2. */
.j-atino:has(> li:nth-child(6)){ --j-atino-columnas:3; }

.j-atino__tarjeta{
	display:flex;flex-direction:column;align-items:center;
	gap:14px;min-height:195px;padding:22px 14px 20px;
	border:1px solid var(--j-lima);
	color:var(--j-lima);
	text-align:center;text-decoration:none;
	transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
	block-size:100%;
}
.j-atino__tarjeta svg{ inline-size:56px; block-size:56px; fill:currentColor; }
.j-atino__tarjeta span{ font-size:18px; line-height:1.28; }

/* El span lleva el color explícito además del enlace: el texto va dentro de
   un <span> y basta con que algo del tema o de un plugin pinte los spans o
   los enlaces para que se pierda el contraste sobre el lima. Aquí no se
   puede depender de la herencia: si falla, el texto desaparece. */
.j-atino__tarjeta:hover,
.j-atino__tarjeta:focus-visible,
.j-atino__tarjeta.es-destacada,
.j-atino__tarjeta:hover span,
.j-atino__tarjeta:focus-visible span,
.j-atino__tarjeta.es-destacada span{
	color:var(--j-burdeos);
}
.j-atino__tarjeta:hover,
.j-atino__tarjeta:focus-visible,
.j-atino__tarjeta.es-destacada{
	background:var(--j-lima);
	box-shadow:var(--j-relieve);
}
.j-atino__tarjeta:hover{ transform:translate(-2px,-2px); }

.j-atino__pie{ margin-top:44px; display:flex; justify-content:center; }

/* Base crema: la tarjeta invierte, pero el componente es el mismo. */
.base-crema .j-atino__tarjeta{ border-color:var(--j-burdeos); color:var(--j-burdeos); }
.base-crema .j-atino__tarjeta:hover,
.base-crema .j-atino__tarjeta.es-destacada{ background:var(--j-burdeos); }
.base-crema .j-atino__tarjeta:hover,
.base-crema .j-atino__tarjeta:hover span,
.base-crema .j-atino__tarjeta.es-destacada,
.base-crema .j-atino__tarjeta.es-destacada span{ color:var(--j-lima); }

/**
 * Móvil: 2x2 + 1 a lo ancho.
 *
 * Es una desviación deliberada del PDF, que en móvil mete las puertas en un
 * carrusel de 3. La recomendación del informe era que las cinco estuvieran
 * visibles a la vez, porque dentro de un carrusel la mitad no se ven nunca.
 * Si el cliente lo rechaza, se vuelve atrás borrando este bloque.
 */
@media (max-width:900px){
	.j-atino{ --j-atino-columnas:2; gap:16px; }
	.j-atino:has(> li:nth-child(6)){ --j-atino-columnas:2; }
	.j-atino > li:last-child:nth-child(odd){ grid-column:1 / -1; }
	.j-atino__tarjeta{ min-height:0; padding:18px 12px; }
	.j-atino__tarjeta span{ font-size:16px; }
}