/* =================================================================
   Miau Accordion Horizontal
   ================================================================= */

.miau-acc-h {
	display: flex;
	height: 522px;
	gap: 14px;
	overflow: hidden;
}

/* Panel -------------------------------------------------------------- */

.miau-acc-h__panel {
	position: relative;
	flex: 1;
	border-radius: 30px;
	overflow: hidden;
	cursor: pointer;
	transition: flex 400ms ease;
}

.miau-acc-h__panel--active {
	flex: 2.1;
}

/* Content (always visible, adapts to panel width) -------------------- */

.miau-acc-h__content {
	position: absolute;
	top: 73px;
	left: 0;
	right: 0;
	padding: 0 30px 30px 30px;
	color: #fff;
	overflow: hidden;
	z-index: 1;
	transition: opacity 300ms ease;
}

/* Title -------------------------------------------------------------- */

/* El título envuelve en varias líneas: los paneles colapsados miden 246px y con
   `white-space: nowrap` salía "Cuidado del pr…", "Tradición y ev…". */
.miau-acc-h__title {
	font-family: 'Joan', serif;
	font-size: 35px;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -1.4px;
	color: #fff;
	text-align: center;
	margin: 0 0 28px;
	overflow-wrap: break-word;
	transition: font-size 400ms ease;
}

/* Text --------------------------------------------------------------- */

.miau-acc-h__text {
	font-family: 'Outfit', sans-serif;
	font-size: 25px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.8px;
	color: #fff;
}

/* Decorative image (positionable, no deformation) -------------------- */

.miau-acc-h__image {
	position: absolute;
	top: 250px;
	right: 13px;
	width: 140px;
	height: 260px;
	opacity: 0.2;
	object-fit: contain;
	pointer-events: none;
	z-index: 0;
	transition: width 400ms ease, height 400ms ease, opacity 400ms ease;
}

/* Plegada: sin gato. Solo lo lleva la card abierta, en todos los tamaños.
   Se oculta con opacidad y no con display para que entre y salga en fundido
   junto al despliegue.
   El encogido de tamaño se mantiene: si el navegador no animase la opacidad, la
   imagen seguiría reduciéndose en vez de desaparecer de golpe. */
.miau-acc-h__panel:not(.miau-acc-h__panel--active) .miau-acc-h__image {
	width: 80px;
	height: 150px;
	opacity: 0;
}

/* Link overlay ------------------------------------------------------- */

.miau-acc-h__link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* =================================================================
   Móvil + tablet (<= 1024px): cards apiladas verticalmente.
   En horizontal los paneles colapsados caen a 126px de ancho a 768px, con el
   texto a una palabra por línea y cortado por abajo. Apilados se leen igual
   que en móvil.
   ================================================================= */

@media (max-width: 1024px) {

	.miau-acc-h {
		flex-direction: column;
		height: auto !important;
	}

	/* Cada card crece con su contenido, sin flex-grow
	   (Figma 600:572 → 341 / 222 / 281 / 233 px). Los !important ganan a los
	   estilos inline que aplican PHP y el JS de hover (que fija `flex` y una
	   transición de `flex`, inútil aquí). Al tocar una card se activa y crece:
	   se anima el min-height para que no dé un salto seco. */
	.miau-acc-h__panel,
	.miau-acc-h__panel--active {
		flex: 0 0 auto !important;
		height: auto !important;
		transition: min-height 400ms ease !important;
	}

	/* La primera card reserva la altura de su imagen decorativa (81 + 260). */
	.miau-acc-h__panel--active {
		min-height: 341px !important;
	}

	/* El contenido deja de estar posicionado en absoluto: es él quien da altura. */
	.miau-acc-h__content {
		position: static !important;
		padding: 36px 33px !important;
	}

	.miau-acc-h__title {
		text-align: left;
	}

	/* Que solo la card activa lleve gato ya es el comportamiento base (Figma
	   602:875): estaba aquí, acotado a móvil, y en escritorio salía en las cuatro.
	   Aquí solo queda ajustar la transición: apilado no hay cambio de ancho ni de
	   alto que animar, así que se anima únicamente la opacidad. */
	.miau-acc-h__image {
		transition: opacity 400ms ease !important;
	}

	/* Tipografía más pequeña por defecto. Editable desde Elementor
	   (pestaña móvil del control Tipografía). */
	.miau-acc-h__title {
		font-size: 26px;
		letter-spacing: -1px;
		margin-bottom: 18px;
	}

	.miau-acc-h__text {
		font-size: 18px;
		letter-spacing: -0.5px;
	}
}