/* ==========================================================================
   PG Hero Carrusel — Pisos Gómez
   Paleta y tipografías del manual de marca. Montserrat y Roboto ya las carga
   el tema, así que este archivo no baja ninguna fuente extra.
   Todo va prefijado con .pg-hero para no chocar con Betheme.
   ========================================================================== */

.pg-hero {
	--pg-mostaza: #e8ba40;
	--pg-mostaza-oscuro: #c4991f;
	--pg-negro: #111111;
	--pg-blanco: #ffffff;
	--pg-alto: clamp(420px, 74vh, 680px);
	--pg-ancho: 1220px;
	--pg-gutter: clamp(20px, 5vw, 40px);
	/* Borde interior: se pega al ancho del contenido del tema en pantallas
	   grandes y al margen mínimo en las chicas. */
	--pg-borde: max(var(--pg-gutter), calc(50% - var(--pg-ancho) / 2 + var(--pg-gutter)));
	--pg-ctrl: clamp(26px, 4vh, 40px);

	position: relative;
	width: 100%;
	height: var(--pg-alto);
	margin: 0;
	overflow: hidden;
	background: var(--pg-negro);
	isolation: isolate;
}

/* --- pista y diapositivas ------------------------------------------------ */

.pg-hero__pista {
	position: absolute;
	inset: 0;
}

.pg-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 700ms ease, visibility 0s linear 700ms;
}

.pg-hero__slide.es-activa {
	opacity: 1;
	visibility: visible;
	transition: opacity 700ms ease, visibility 0s;
	z-index: 1;
}

/* --- foto ---------------------------------------------------------------- */

.pg-hero__foto {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
}

.pg-hero__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Cada diapositiva puede fijar su encuadre con --pg-foco (ver el PHP). */
	object-position: var(--pg-foco, center);
	display: block;
	transform: scale(1.06);
	transition: transform 7000ms linear;
	will-change: transform;
}

.pg-hero__slide.es-activa .pg-hero__foto img {
	transform: scale(1);
}

/* Velo oscuro para que el texto se lea sobre cualquier foto.
   Más denso abajo-izquierda, que es donde va el bloque de texto. */
.pg-hero__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(9, 9, 9, .88) 0%, rgba(9, 9, 9, .55) 30%, rgba(9, 9, 9, .12) 62%, rgba(9, 9, 9, .28) 100%),
		linear-gradient(to right, rgba(9, 9, 9, .55) 0%, rgba(9, 9, 9, .12) 55%, rgba(9, 9, 9, 0) 100%);
	pointer-events: none;
}

/* --- texto --------------------------------------------------------------- */

.pg-hero__texto {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	/* Deja libre la franja de abajo, donde viven los puntos y las flechas. */
	bottom: clamp(96px, 13vh, 136px);
	width: 100%;
	max-width: var(--pg-ancho);
	padding: 0 var(--pg-gutter);
	box-sizing: border-box;
	z-index: 2;
	color: var(--pg-blanco);
}

/* En escritorio el texto va a la izquierda y la muestra del producto a la
   derecha, apoyadas las dos sobre la misma linea de base. */
@media (min-width: 768px) {
	.pg-hero__texto {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: clamp(24px, 4vw, 64px);
	}

	/* En el HTML la muestra va primero (en movil se lee antes que el titulo),
	   asi que aca hay que mandarla a la segunda columna a mano. */
	.pg-hero__contenido {
		grid-column: 1;
		grid-row: 1;
	}

	.pg-hero__producto {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}
}

.pg-hero__contenido {
	min-width: 0;
}

.pg-hero__producto,
.pg-hero__volanta,
.pg-hero__titulo,
.pg-hero__bajada,
.pg-hero__acciones {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms ease, transform 620ms cubic-bezier(.2, .7, .3, 1);
}

.pg-hero__slide.es-activa .pg-hero__volanta { transition-delay: 180ms; }
.pg-hero__slide.es-activa .pg-hero__titulo  { transition-delay: 260ms; }
.pg-hero__slide.es-activa .pg-hero__bajada  { transition-delay: 340ms; }
.pg-hero__slide.es-activa .pg-hero__acciones { transition-delay: 420ms; }
.pg-hero__slide.es-activa .pg-hero__producto { transition-delay: 500ms; }

.pg-hero__slide.es-activa .pg-hero__producto,
.pg-hero__slide.es-activa .pg-hero__volanta,
.pg-hero__slide.es-activa .pg-hero__titulo,
.pg-hero__slide.es-activa .pg-hero__bajada,
.pg-hero__slide.es-activa .pg-hero__acciones {
	opacity: 1;
	transform: none;
}

.pg-hero__volanta {
	margin: 0 0 14px;
	font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pg-mostaza);
	line-height: 1.3;
	display: flex;
	align-items: center;
	gap: 12px;
}

.pg-hero__volanta::before {
	content: "";
	width: 34px;
	height: 3px;
	background: var(--pg-mostaza);
	flex: none;
}

.pg-hero__titulo {
	margin: 0 0 16px;
	font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(2rem, 5.2vw, 4rem);
	font-weight: 800;
	line-height: 1.03;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: var(--pg-blanco);
	max-width: 18ch;
	text-shadow: 0 2px 22px rgba(0, 0, 0, .45);
}

.pg-hero__bajada {
	margin: 0 0 26px;
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(.95rem, 1.35vw, 1.075rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, .92);
	max-width: 46ch;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}

.pg-hero__acciones {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Titulo largo: mismo peso, menos cuerpo y renglon mas ancho, para que no
   empuje al resto fuera de la diapositiva. Lo marca el PHP por el largo del
   texto, asi vale para cualquier titulo futuro. */
.pg-hero__titulo--largo {
	font-size: clamp(1.55rem, 3.4vw, 2.6rem);
	max-width: 22ch;
}

/* --- producto destacado --------------------------------------------------
   Muestra cuadrada en marco negro + chapa amarilla con el nombre. Los dos
   colores son opacos, asi que se leen sobre cualquier foto sin necesidad de
   velo extra. Lleva al mismo destino que el boton.
   -------------------------------------------------------------------- */

.pg-hero .pg-hero__producto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 13px;
	width: max-content;
	max-width: 100%;
	text-decoration: none;
	border: 0;
}

/* Los cuatro puntitos de la marca. */
.pg-hero__producto::before {
	content: "";
	display: block;
	width: 64px;
	height: 6px;
	background-image: radial-gradient(circle, var(--pg-mostaza) 3px, transparent 3.5px);
	background-size: 16px 6px;
	background-repeat: repeat-x;
}

.pg-hero__swatch {
	display: block;
	padding: 14px;
	background: var(--pg-negro);
	box-shadow: 0 16px 44px rgba(0, 0, 0, .45);
	transition: transform 220ms cubic-bezier(.2, .7, .3, 1);
}

/* !important por lo mismo que en pg-marcas.css: Smush reescribe las <img> al
   hacer el lazy-load y les mete su propio tamano por variables CSS. Sin esto
   la muestra puede salir a su tamano real (400x400). */
.pg-hero__swatch img {
	display: block !important;
	width: clamp(104px, 11vw, 164px) !important;
	height: auto !important;
	aspect-ratio: 1 !important;
	object-fit: cover !important;
}

.pg-hero__chapa {
	display: block;
	padding: 11px 30px;
	background: var(--pg-mostaza);
	color: var(--pg-negro);
	font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(12px, 1.05vw, 15px);
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.2;
	/* El paralelogramo del diseno. El padding lateral cubre el sesgo para que
	   el texto no quede cortado en los extremos. */
	clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
	transition: background 180ms ease;
}

.pg-hero__producto:hover .pg-hero__swatch,
.pg-hero__producto:focus-visible .pg-hero__swatch {
	transform: translateY(-4px);
}

.pg-hero__producto:hover .pg-hero__chapa,
.pg-hero__producto:focus-visible .pg-hero__chapa {
	background: var(--pg-blanco);
}

/* --- botón --------------------------------------------------------------- */

.pg-hero .pg-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 28px;
	background: var(--pg-mostaza);
	color: var(--pg-negro);
	font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	border-radius: 0;
	/* Sin esto, una etiqueta larga empuja el boton fuera de la pantalla en
	   telefonos angostos (paso con "Consultar por porcelanatos pulidos"). */
	max-width: 100%;
	text-align: left;
	line-height: 1;
	transition: background 180ms ease, transform 180ms ease;
}

.pg-hero .pg-hero__cta::after {
	content: "→";
	font-size: 15px;
	line-height: 1;
	transition: transform 180ms ease;
}

.pg-hero .pg-hero__cta:hover,
.pg-hero .pg-hero__cta:focus-visible {
	background: var(--pg-blanco);
	color: var(--pg-negro);
	text-decoration: none;
}

.pg-hero .pg-hero__cta:hover::after {
	transform: translateX(4px);
}

/* --- flechas ------------------------------------------------------------- */

/* Barra de controles: abajo a la izquierda. Al medio se montan encima del
   título, y a la derecha está fijo el botón flotante de WhatsApp. */
.pg-hero__controles {
	position: absolute;
	left: var(--pg-borde);
	bottom: var(--pg-ctrl);
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 22px;
}

.pg-hero__flechas {
	display: flex;
	gap: 8px;
}

.pg-hero__flecha {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	background: rgba(9, 9, 9, .34);
	color: #fff;
	cursor: pointer;
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.pg-hero__flecha svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pg-hero__flecha:hover,
.pg-hero__flecha:focus-visible {
	background: var(--pg-mostaza);
	border-color: var(--pg-mostaza);
	color: var(--pg-negro);
}

/* --- puntos -------------------------------------------------------------- */

.pg-hero__puntos {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pg-hero__punto {
	width: 34px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(255, 255, 255, .34);
	cursor: pointer;
	transition: background 200ms ease, width 200ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.pg-hero__punto.es-activo {
	background: var(--pg-mostaza);
	width: 54px;
}

.pg-hero__punto:hover {
	background: rgba(255, 255, 255, .7);
}

.pg-hero__punto.es-activo:hover {
	background: var(--pg-mostaza);
}

/* --- foco visible -------------------------------------------------------- */

.pg-hero :focus-visible {
	outline: 3px solid var(--pg-mostaza);
	outline-offset: 3px;
}

/* --- móvil --------------------------------------------------------------- */

@media (max-width: 767px) {
	.pg-hero {
		--pg-alto: clamp(500px, 82vh, 660px);
	}

	.pg-hero__foto img {
		/* la versión vertical ya viene recortada; --pg-foco-m es el ajuste fino */
		object-position: var(--pg-foco-m, center 42%);
	}

	.pg-hero__texto {
		bottom: 76px;
	}

	.pg-hero__controles {
		bottom: 28px;
	}

	.pg-hero__titulo {
		max-width: 14ch;
	}

	.pg-hero__titulo--largo {
		font-size: 1.5rem;
		max-width: 18ch;
	}

	/* En vertical no entra una columna a la derecha: la muestra se vuelve una
	   chapita horizontal y se apoya arriba del titulo. */
	.pg-hero .pg-hero__producto {
		flex-direction: row;
		align-items: center;
		gap: 11px;
		margin: 0 0 18px;
	}

	.pg-hero__producto::before {
		display: none;
	}

	.pg-hero__swatch {
		padding: 7px;
		box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
	}

	.pg-hero__swatch img {
		width: 54px !important;
	}

	.pg-hero__chapa {
		padding: 8px 20px;
		font-size: 11px;
	}

	.pg-hero__bajada {
		font-size: .95rem;
		max-width: 34ch;
	}

	.pg-hero__flechas {
		display: none;
	}

	/* Sin ancho completo: abajo a la derecha está fijo el botón de WhatsApp
	   y un botón de borde a borde le queda pegado. */
	.pg-hero .pg-hero__cta {
		padding: 14px 22px;
		font-size: 12px;
	}
}

@media (max-width: 340px) {
	.pg-hero__bajada {
		display: none;
	}
}

/* --- movimiento reducido ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.pg-hero__slide,
	.pg-hero__foto img,
	.pg-hero__producto,
	.pg-hero__swatch,
	.pg-hero__volanta,
	.pg-hero__titulo,
	.pg-hero__bajada,
	.pg-hero__acciones,
	.pg-hero .pg-hero__cta::after {
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}

	.pg-hero__foto img,
	.pg-hero__slide.es-activa .pg-hero__foto img {
		transform: none;
	}
}

/* --- sin JavaScript ------------------------------------------------------ */

.pg-hero:not([data-listo]) .pg-hero__controles {
	display: none;
}