/* ============================================================
   Aquamundo – Conoce Nuestros Peces
   Galeria de especies con iconos cartoon + ficha en popup.
   Todo va con prefijo .amq- para no chocar con el tema/Elementor
   ============================================================ */

.amq-peces {
	position: relative;
	font-family: "Poppins", "Montserrat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--amq-azul: #0b5ea8;
	--amq-azul-claro: #2fa8e0;
	--amq-cian: #47e3cf;
	--amq-profundo: #04294e;
	--amq-borde: #dceefa;
	/* --amq-col-user lo fija el atributo "columnas" del shortcode (estilo inline);
	   --amq-col es el que usa la grilla y lo pisan los breakpoints de abajo. */
	--amq-col-user: 250px;
	--amq-col: var(--amq-col-user);
	margin: 0 auto;
	max-width: 1240px;
}

.amq-peces *,
.amq-peces *::before,
.amq-peces *::after {
	box-sizing: border-box;
}

.amq-peces button {
	font-family: inherit;
	cursor: pointer;
}

/* ---------- Barra superior ---------- */

.amq-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 0 4px 20px;
}

.amq-count {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	color: var(--amq-azul);
	font-size: 17px;
	letter-spacing: .01em;
	margin-right: auto;
}

.amq-count svg {
	width: 30px;
	height: 30px;
	fill: var(--amq-azul-claro);
	flex: none;
}

.amq-search {
	position: relative;
	display: block;
}

.amq-search input {
	border: 2px solid #cfe7f5;
	background: #f4fbfe;
	border-radius: 999px;
	padding: 13px 18px 13px 46px;
	font-size: 16px;
	color: var(--amq-profundo);
	width: 280px;
	max-width: 100%;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
}

.amq-search input::placeholder {
	color: #7ba3c0;
}

.amq-search input:focus {
	border-color: var(--amq-azul-claro);
	box-shadow: 0 0 0 4px rgba(47, 168, 224, .2);
}

.amq-search svg {
	position: absolute;
	left: 17px;
	top: 50%;
	transform: translateY(-50%);
	width: 19px;
	height: 19px;
	fill: none;
	stroke: var(--amq-azul-claro);
	stroke-width: 2.4;
	pointer-events: none;
}

/* ---------- Galeria ---------- */

.amq-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--amq-col), 1fr));
	gap: 22px;
	padding: 4px 2px;
}

.amq-card {
	border: 2px solid var(--amq-borde);
	background: #fff;
	border-radius: 22px;
	padding: 0 0 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	box-shadow: 0 4px 18px rgba(9, 62, 110, .10);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* el buscador oculta tarjetas con [hidden]; sin esta regla el display:flex
   de arriba le gana al display:none del navegador y no se filtraria nada */
.amq-card[hidden] {
	display: none;
}

.amq-card:hover,
.amq-card:focus-visible {
	transform: translateY(-6px);
	border-color: var(--amq-azul-claro);
	box-shadow: 0 18px 34px rgba(9, 62, 110, .22);
	outline: none;
}

.amq-card:focus-visible {
	box-shadow: 0 0 0 4px rgba(47, 168, 224, .45), 0 18px 34px rgba(9, 62, 110, .22);
}

/* la ficha del PDF como portada de la tarjeta (es cuadrada) */
.amq-card-fig {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #0b5ea8;
}

.amq-card-fig img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

/* al pasar el mouse se insinua que se puede ampliar */
.amq-card-fig::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(4, 41, 78, .35);
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}

.amq-card-zoom {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .95);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(.7);
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
	z-index: 2;
}

.amq-card-zoom svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: var(--amq-azul);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.amq-card:hover .amq-card-fig img,
.amq-card:focus-visible .amq-card-fig img {
	transform: scale(1.07);
}

.amq-card:hover .amq-card-fig::after,
.amq-card:focus-visible .amq-card-fig::after {
	opacity: 1;
}

.amq-card:hover .amq-card-zoom,
.amq-card:focus-visible .amq-card-zoom {
	opacity: 1;
	transform: scale(1);
}

.amq-card-body {
	padding: 18px 16px 0;
}

.amq-card-name {
	display: block;
	font-size: 17px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--amq-azul);
	line-height: 1.25;
}

.amq-card-sci {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	font-style: italic;
	color: #5d829c;
	line-height: 1.3;
}

.amq-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--amq-azul-claro);
	letter-spacing: .02em;
	transition: color .2s;
}

.amq-card-cta svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s ease;
}

.amq-card:hover .amq-card-cta,
.amq-card:focus-visible .amq-card-cta {
	color: var(--amq-azul);
}

.amq-card:hover .amq-card-cta svg,
.amq-card:focus-visible .amq-card-cta svg {
	transform: translateX(3px);
}

.amq-noresults {
	text-align: center;
	color: #5d829c;
	font-size: 17px;
	padding: 50px 20px;
}

/* ---------- Modal ficha ---------- */

.amq-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
}

.amq-modal[hidden] {
	display: none;
}

.amq-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(3, 22, 44, .82);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: amq-fade .25s ease;
}

@keyframes amq-fade {
	from { opacity: 0; }
}

.amq-dialog {
	position: relative;
	max-width: min(580px, 100%);
	width: 100%;
	animation: amq-pop .3s cubic-bezier(.16, 1, .3, 1);
}

@keyframes amq-pop {
	from { opacity: 0; transform: scale(.9) translateY(16px); }
}

.amq-dialog img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
	background: #0b5ea8;
}

.amq-caption {
	margin-top: 12px;
	text-align: center;
	color: #fff;
}

.amq-caption b {
	display: block;
	font-size: 18px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.amq-caption i {
	font-size: 14px;
	opacity: .82;
}

.amq-modal-btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, .95);
	color: var(--amq-azul);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
	transition: transform .18s ease, background .18s ease;
	z-index: 5;
}

.amq-modal-btn:hover,
.amq-modal-btn:focus-visible {
	transform: scale(1.1);
	background: var(--amq-cian);
	color: var(--amq-profundo);
	outline: none;
}

.amq-modal-btn svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.amq-close {
	top: -14px;
	right: -14px;
}

.amq-prev,
.amq-next {
	top: 50%;
	transform: translateY(-50%);
}

.amq-prev { left: -62px; }
.amq-next { right: -62px; }

.amq-prev:hover, .amq-prev:focus-visible,
.amq-next:hover, .amq-next:focus-visible {
	transform: translateY(-50%) scale(1.1);
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
	.amq-peces { --amq-col: 200px; }
	.amq-grid { gap: 16px; }
}

@media (max-width: 600px) {
	.amq-peces { --amq-col: 150px; }
	.amq-grid { gap: 12px; }
	.amq-card { border-radius: 18px; padding-bottom: 16px; }
	.amq-card-body { padding: 14px 10px 0; }
	.amq-card-name { font-size: 14px; }
	.amq-card-sci { font-size: 12px; }
	.amq-card-cta { display: none; }
	.amq-count { font-size: 15px; width: 100%; }
	.amq-search { width: 100%; }
	.amq-search input { width: 100%; }
	.amq-prev { left: 6px; }
	.amq-next { right: 6px; }
	.amq-close { top: 8px; right: 8px; }
}

/* accesibilidad: menos movimiento */
@media (prefers-reduced-motion: reduce) {
	.amq-card,
	.amq-card-fig img { transition: none; }
	.amq-dialog,
	.amq-backdrop { animation: none; }
}