/* =================================================================
   Miau Hero Slider
   ================================================================= */

/* El control «Alto del banner» del widget emite el alto DOS veces: como `height`
   (comportamiento de siempre, el que usa el móvil) y como variable
   `--miau-hero-height`, que es la que consume el bloque de ≥768px para
   convertirlo en un mínimo y dejar que la tarjeta crezca con el texto. */
.miau-hero-slider {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	--miau-hero-height: 809px;
	height: var(--miau-hero-height);
}

/* Background slider ------------------------------------------------- */

.miau-hero-swiper {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.miau-hero-swiper .swiper-wrapper,
.miau-hero-swiper .swiper-slide {
	height: 100%;
}

/* El <picture> que envuelve a la imagen del slide (permite una versión móvil). */
.miau-hero-swiper .swiper-slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

.miau-hero-swiper .swiper-slide img {
	transition: opacity 0.6s ease;
}

.miau-hero-swiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
        object-position: center top;
}

/* Left overlay column ----------------------------------------------- */

.miau-hero-slider__overlay {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 33%;
	z-index: 1;
	background-color: transparent;
	border-radius: 20px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden;
}

/* Rótulo rojo del overlay ------------------------------------------
   Ya no es una <img> en ningún tamaño: es el FONDO del overlay, en escritorio
   y en móvil. El porqué, en los bloques de media query de más abajo. */

.miau-hero-slider__content {
	position: relative;
	z-index: 1;
	padding: 32px 28px;
}

/* Title -------------------------------------------------------------
   Tipografia de marca "Gautreaux", la misma que la frase de cierre de la home
   (.miau-cierre-center, ~linea 2908 del style.css del tema) y que las citas de
   Conocenos (.miau-cita-banda). Peticion del cliente: que el titulo del hero
   lea igual que ese bloque.

   Los valores salen de medir el elemento de referencia en el navegador:
   Gautreaux 400, 32px en escritorio y 29px en movil, sin letter-spacing.

   El line-height va a 1.2, no al 1.5 de la referencia: aquel es un parrafo
   suelto sobre fondo claro y este es un titulo de dos lineas dentro de una
   tarjeta, donde 1.5 se come el alto disponible.

   La familia se declara en el tema (@font-face, una sola cara Medium/500). Al
   pedir 400 el navegador usa esa misma cara, sin negrita sintetica: es lo que
   hace tambien la referencia, que computa 400. ------------------------- */

.miau-hero-slider__title {
	color: #FFF;
	font-family: "Gautreaux", Georgia, serif;
	font-size: 32px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: normal;
	margin: 0 0 12px;
}

/* Description ------------------------------------------------------- */

.miau-hero-slider__desc {
	color: #FFF;
	font-family: "Albert Sans", sans-serif;
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%;
	letter-spacing: -0.352px;
	margin: 0;
}

/* Button (bottom right) --------------------------------------------- */

.miau-hero-slider__btn {
	position: absolute;
	bottom: 24px;
	right: 24px;
	z-index: 2;
	display: inline-block;
	padding: 14px 26px;
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: #E7002A;
	color: #FFF;
	font-family: "Albert Sans", sans-serif;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.miau-hero-slider__btn:hover {
	background-color: #c50024;
	color: #FFF;
}

/* Mobile layout (<= 767px) — según Figma 345×545 -------------------
   Mismo problema que había en escritorio, y misma cura: la banda roja tenía
   alto fijo (54,9% de 545 = 299px) y el padre `overflow:hidden`, así que en
   cuanto la pantalla bajaba de los 345px del Figma el texto pedía una línea
   más y se cortaba por la mitad justo en el borde del rojo.

   Ahora la tarjeta es una columna flex, el overlay entra en el flujo y su alto
   lo pone el texto; el alto del Figma se aplica como mínimo, no como tope. El
   rótulo rojo pasa a FONDO (`--miau-overlay-bg-mobile`) por lo mismo que en
   escritorio: contra un alto `auto` la <img> recuperaba su relación de aspecto
   y dejaba el rojo corto por abajo. El slider (`inset:0`) y el botón siguen
   absolutos, o sea fuera del flujo, así que no se mueven. */

@media (max-width: 767px) {
	.miau-hero-slider {
		display: flex;
		flex-direction: column;
		height: auto !important;
		min-height: var(--miau-hero-height);
	}

	.miau-hero-slider__overlay {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		width: 100%;
		height: auto;
		/* La misma proporción de siempre (299/545 del Figma), pero calculada sobre
		   el alto que tenga puesto el widget, no sobre los 545px. La home va a
		   379px: con el 54,9% en `height` la banda salían 208px y el texto pedía
		   257px → los 49px que se veían cortados. Como mínimo, ya no como tope. */
		min-height: calc(var(--miau-hero-height) * 0.549);
		/* El aire hasta el borde del rojo va aquí y no en `__content`: el padding
		   del contenido es un control de Elementor («Padding», móvil) y su regla
		   gana por especificidad, así que lo que pusiéramos allí lo pisaría. */
		padding-bottom: 24px;
		flex: 0 0 auto;
		align-items: flex-start;
		justify-content: flex-start;
		background-image: var(--miau-overlay-bg-mobile, var(--miau-overlay-bg, none));
		/* ── El sobreescaneo va SOLO por arriba ──
		   El arte de móvil (346×300) no es un rectángulo liso: lleva el DENTADO
		   de la marca en el borde de abajo (festón de ~9px), igual que el de
		   escritorio lo lleva en el borde derecho. Es parte del rótulo, no un
		   defecto del PNG.

		   Con `120%` centrado se recortaba el 10% de arriba y el 10% de abajo, o
		   sea 29px por lado sobre esta caja: por abajo se comía el dentado entero
		   y el rojo terminaba en corte recto.

		   Ahora `110%` anclado abajo: el dentado queda intacto y los 29px que
		   sobran salen por arriba, que es donde había que esconder las esquinas
		   redondeadas del arte (~21px ya escalados). En porcentaje, no en px,
		   para que siga valiendo con cualquier «Alto del banner».

		   Y el radio propio de la banda solo arriba: con los 20px de abajo, la
		   caja recortaba las ondas de las dos puntas. Arriba sí interesa, para
		   acompañar al redondeo de la tarjeta. */
		background-size: 100% 110%;
		background-position: left bottom;
		background-repeat: no-repeat;
		border-radius: 20px 20px 0 0;
	}

	.miau-hero-slider__content {
		width: 100%;
		max-width: 100%;
		padding: 37px 29px 0; /* offset según Figma */
		text-align: left;
	}

	/* 29px es el tamaño del elemento de referencia y el que se quiere, pero
	   por debajo de 375px de ancho el claim salta de 4 a 6 lineas: la banda roja
	   pasa de 282 a 370px sobre una tarjeta de 379, se come la foto y el boton
	   —que va absoluto al pie— aterriza encima de la descripcion.

	   Medido con emulacion de movil real (CDP), a 360px aguanta hasta 27px y a
	   320px hasta 24px. El clamp da justo eso: 24px a 320, 27px a 360, 29px a
	   partir de 387px, que es donde estan los moviles corrientes. */
	.miau-hero-slider__title {
		font-size: clamp(24px, 7.5vw, 29px);
		letter-spacing: normal;
		line-height: 1.2;
		margin: 0 0 28px; /* separación al desc ~99px entre inicios de bloque */
	}

	.miau-hero-slider__desc {
		font-family: "Albert Sans", sans-serif;
		font-size: 24px;
		letter-spacing: -0.384px;
		line-height: 1.2;
		margin: 0;
	}

	.miau-hero-slider__btn {
		bottom: 24px;
		right: 24px;
		padding: 12px 22px;
		font-size: 16px;
	}
}

/* =================================================================
   Escritorio y tablet (>= 768px): la tarjeta crece con el texto
   =================================================================

   El overlay era `position:absolute`, así que su texto no contaba para el alto
   de la tarjeta: con un alto fijo en px y `overflow:hidden`, en cuanto la
   columna se estrechaba (es un % del ancho) el texto necesitaba más líneas y se
   cortaba por abajo. Aquí el overlay pasa al flujo como ítem flex, de modo que
   su contenido empuja el alto de la tarjeta, y el alto de Elementor se aplica
   como mínimo, no como tope.

   El `!important` de `height` es necesario: Elementor emite `height:<N>px` con
   un selector de mayor especificidad (`.elementor-13 .elementor-element-...`).
   El valor no se pierde, se recupera por `--miau-hero-height`.

   El slider (`position:absolute; inset:0`) y el botón siguen fuera del flujo,
   así que no son ítems flex y no cambian de sitio. El móvil (<768px) mantiene
   el overlay absoluto y el alto fijo, tal cual estaba.

   ── El rótulo rojo pasa a ser FONDO, no <img> ──
   Con el overlay en el flujo su alto ya no está declarado: lo pone el estirado
   del flex. Y contra un alto `auto` el navegador descarta los porcentajes, así
   que el `height:100%` de la <img> caía a su relación de aspecto (407×251) y el
   rojo se quedaba 26px corto por abajo. No es cosa de esa propiedad: se probó
   también con `grid` apilado, con `inset:0` y con `-webkit-fill-available`, y
   los tres daban los mismos 204px.

   Un fondo no tiene relación de aspecto que respetar: `background-size:100% 100%`
   cubre la caja pintada, mida lo que mida. La URL llega desde el widget en la
   variable `--miau-overlay-bg`; no puede estar aquí, la elige quien edita. El
   arte es un rectángulo plano con el dentado en un borde, así que estirarlo no
   se aprecia. */
@media (min-width: 768px) {
	.miau-hero-slider {
		display: flex;
		height: auto !important;
		min-height: var(--miau-hero-height);
	}

	.miau-hero-slider__overlay {
		position: relative;
		top: auto;
		left: auto;
		bottom: auto;
		flex: 0 0 auto;
		background-image: var(--miau-overlay-bg, none);
		/* ── Por qué 120% de alto y no 100% ──
		   El arte NO es un rectángulo: es un rectángulo con las cuatro esquinas
		   redondeadas (radio ~20px sobre 407×251) y con la última fila entera
		   transparente. Medido en el alfa del PNG: en y=0 solo hay pintura de
		   x=14 a x=391, y no llega a x=0 hasta y=20.

		   Con `100% 100%` esas esquinas se estiran como todo lo demás. En la home
		   el factor vertical es 809/251 = 3,22×, así que los 20px de curva pasan a
		   64px y la fila muerta a 3px: eso es la foto que asomaba por arriba y por
		   abajo de la banda roja.

		   La cura es sacar las esquinas fuera de la caja. Hace falta recortar
		   21/251 = 8,4% por lado; con el 120% centrado se van el 10% de arriba y
		   el 10% de abajo (25px de arte), y el borde visible cae en la zona donde
		   la pintura ya llega de x=0 a x=406. En porcentaje y no en px porque la
		   curva escala con la caja: así vale para cualquier «Alto del banner».

		   Horizontal se queda en 100%: el dentado del borde derecho no se mueve.
		   Lo que se recorta arriba y abajo es rojo plano, no hay dibujo ahí. */
		background-size: 100% 120%;
		background-position: left center;
		background-repeat: no-repeat;
	}
}