/* =================================================================
   Miau Flip Grid — volteo 3D en hover (eje Y)

   Reposo : cara frontal  → solo la imagen, sin velo ni texto
   Hover  : cara trasera  → misma imagen, velo azul + título,
                            subtítulo y botón "Ver más", centrados

   Cada cara lleva únicamente su contenido, así que la trasera centra el
   bloque de texto por sí sola y la frontal queda limpia.

   Sin JS: el volteo es CSS puro. En táctil no hay hover, así que allí se
   muestra directamente la cara trasera —la que lleva la información—
   y se esconde la frontal (bloque @media (hover: none)).
   ================================================================= */

.miau-flip-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* Card --------------------------------------------------------------
   perspective da la profundidad del giro: sin ella el volteo se ve
   plano, como un simple encogimiento horizontal.
   overflow visible, si no el 3D se recorta durante el giro; el
   redondeo lo aplican las caras con border-radius: inherit.        */

.miau-flip-card {
	position: relative;
	height: 280px;
	border-radius: 20px;
	perspective: 1200px;
}

.miau-flip-card__inner {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	text-decoration: none;
	transform-style: preserve-3d;
	transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* El giro se dispara con el ratón y también con el teclado (:focus-visible
   en el propio enlace), para que sea navegable sin ratón. */
.miau-flip-card:hover .miau-flip-card__inner,
.miau-flip-card__inner:focus-visible {
	transform: rotateY(180deg);
}

/* Caras -------------------------------------------------------------
   backface-visibility: hidden es lo que hace que cada cara desaparezca
   al girarse: sin esto verías las dos superpuestas y el texto espejado.

   Safari lo declara pero no lo respeta cuando la cara lleva overflow
   hidden, y el texto salía en espejo. La separación de 1px en el eje Z
   deja una cara delante de la otra, así que el orden de pintado ya no
   depende de backface-visibility y las dos se ven bien. */

.miau-flip-card__face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden; /* Safari */
}

.miau-flip-card__face--front {
	transform: rotateY(0deg) translateZ(1px);
}

.miau-flip-card__face--back {
	transform: rotateY(180deg) translateZ(1px);
}

/* Imagen ------------------------------------------------------------ */

.miau-flip-card__image {
	position: absolute;
	inset: 0;
}

.miau-flip-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Velo azul ---------------------------------------------------------
   En reposo la foto va limpia (opacidad 0) y en hover el velo la apaga
   para que el texto y el botón despeguen. Las dos opacidades son
   controles de Elementor ("en reposo" / "en hover"), así que estas son
   solo el valor por defecto. */

.miau-flip-card__overlay {
	position: absolute;
	inset: 0;
	background-color: #003ca5;
}

.miau-flip-card__face--front .miau-flip-card__overlay {
	opacity: 0;
}

.miau-flip-card__face--back .miau-flip-card__overlay {
	opacity: 0.85;
}

/* Contenido de las caras -------------------------------------------- */

.miau-flip-card__content {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px;
	text-align: center;
}

/* Título -------------------------------------------------------------
   Vive solo en la cara trasera, que es la que se enseña en hover. */

.miau-flip-card__title {
	margin: 0;
	color: #fff;
	text-align: center;
	font-family: "Joan", serif;
	font-size: 40px;
	font-weight: 400;
	line-height: 120%;
	letter-spacing: -0.64px;
}

/* Subtítulo ---------------------------------------------------------- */

.miau-flip-card__subtitle {
	/* El contenedor es un flex con gap:16px, que separa por igual título,
	   subtítulo y botón. El subtítulo es la bajada del título y debe ir pegado a
	   él, no a la misma distancia que el botón: este margen negativo recorta solo
	   ese hueco (16 − 8 = 8px) sin tocar la separación del botón. */
	margin: -8px 0 0;
	padding: 0;
	color: #fff;
	text-align: center;
	font-family: "Albert Sans", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 115%;
	letter-spacing: -0.32px;
}

/* Botón -------------------------------------------------------------- */

.miau-flip-card__btn {
	display: inline-block;
	padding: 10px 25px;
	border-radius: 22px;
	background-color: #003ca5;
	color: #fff;
	text-align: center;
	font-family: "Albert Sans", sans-serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 120%;
	letter-spacing: -0.352px;
	text-decoration: none;
}

/* Táctil: sin hover, no hay volteo ----------------------------------
   En móvil no hay gesto que dispare el volteo, y la cara frontal por sí
   sola sería una foto muda. Se enseña directamente la trasera, que lleva
   título, subtítulo y botón.                                          */

@media (hover: none) {

	.miau-flip-card:hover .miau-flip-card__inner,
	.miau-flip-card__inner:focus-visible {
		transform: none;
	}

	/* Sin volteo tampoco hace falta separar las caras en Z. */
	.miau-flip-card__face--front,
	.miau-flip-card__face--back {
		transform: none;
	}

	/* La trasera va después en el DOM: con transform:none ya queda encima.
	   La frontal solo estorba (repite la misma foto). Fuera. */
	.miau-flip-card__face--front {
		display: none;
	}
}

/* Título más pequeño en tablet y móvil ------------------------------- */

@media (max-width: 1024px) {

	.miau-flip-card__title {
		font-size: 30px;
	}

	.miau-flip-card__subtitle {
		font-size: 16px;
		margin-top: -8px;
	}
}

/* Respeta a quien pide menos animación ------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.miau-flip-card__inner {
		transition: none;
	}
}