/* =========================================================
   Section: five_species (grid 5 cards)
   Silueta SVG por especie sobre placeholder cromático.
   ========================================================= */

.five-species__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-4);
}
@media (max-width: 1100px) {
	/* En tablet: 3+2 con la última fila centrada */
	.five-species__grid {
		grid-template-columns: repeat(6, 1fr);
	}
	.five-species__grid > :nth-child(1) { grid-column: span 2; }
	.five-species__grid > :nth-child(2) { grid-column: span 2; }
	.five-species__grid > :nth-child(3) { grid-column: span 2; }
	.five-species__grid > :nth-child(4) { grid-column: 2 / span 2; }
	.five-species__grid > :nth-child(5) { grid-column: 4 / span 2; }
}
@media (max-width: 640px) {
	.five-species__grid { grid-template-columns: repeat(2, 1fr); }
	.five-species__grid > * { grid-column: auto !important; }
}

.species-card {
	display: flex;
	flex-direction: column;
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	overflow: hidden;
	text-decoration: none;
	color: var(--color-ink-primary);
	transition: transform var(--duration-base) var(--easing-default),
	            box-shadow var(--duration-base) var(--easing-default),
	            border-color var(--duration-base) var(--easing-default);
}
.species-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: transparent;
}
.species-card:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.species-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--color-bg-subtle);
	position: relative;
	overflow: hidden;
}
.species-card__placeholder {
	position: absolute; inset: 0;
	transition: transform var(--duration-base) var(--easing-default);
}
.species-card:hover .species-card__placeholder { transform: scale(1.04); }

.species-card__placeholder--perros   { background: linear-gradient(135deg, #D9C09A 0%, #B58F5B 100%); }
.species-card__placeholder--gatos    { background: linear-gradient(135deg, #C4D1C0 0%, #6B8E6A 100%); }
.species-card__placeholder--roedores { background: linear-gradient(135deg, #E2CDA8 0%, #C58A2C 100%); }
.species-card__placeholder--caballos { background: linear-gradient(135deg, #C7B89A 0%, #8A6F3F 100%); }
.species-card__placeholder--pajaros  { background: linear-gradient(135deg, #F2A589 0%, #C95838 100%); }

.species-card__silhouette {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(250, 244, 232, 0.85);
	transition: color var(--duration-base) var(--easing-default),
	            transform var(--duration-base) var(--easing-default);
}
.species-card__silhouette svg {
	width: 55%;
	height: auto;
	max-height: 70%;
	filter: drop-shadow(0 4px 12px rgba(28, 38, 32, 0.18));
}
.species-card:hover .species-card__silhouette {
	color: var(--color-bg-base);
	transform: scale(1.06);
}

.species-card__body {
	display: flex;
	flex-direction: column;
	padding: var(--space-4);
	gap: 2px;
}
.species-card__label {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 500;
	color: var(--color-ink-primary);
	letter-spacing: -0.005em;
}
.species-card__count {
	font-size: var(--fs-caption);
	color: var(--color-ink-muted);
}
.species-card__hint {
	margin-top: 8px;
	font-size: var(--fs-caption);
	color: var(--color-ink-secondary);
	line-height: 1.4;
	min-height: 2.4em;
}
.species-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border-default);
	font-size: var(--fs-body-s);
	font-weight: 600;
	color: var(--color-brand-primary);
	transition: gap var(--duration-fast) var(--easing-default);
}
.species-card:hover .species-card__cta { gap: 10px; }

@media (prefers-reduced-motion: reduce) {
	.species-card,
	.species-card__placeholder,
	.species-card__silhouette { transition: none; }
	.species-card:hover { transform: none; }
	.species-card:hover .species-card__placeholder,
	.species-card:hover .species-card__silhouette { transform: none; }
}