/* ════════════════════════════════════════════════════
   HOME "3 LÍNEAS" - viewport único, sin scroll
   Ver fitness-pro-hero-lineas.php (agrega el body class
   "fp-hero-page" y mide con JS el offset real hasta donde empieza
   .fp-home-viewport, sin importar el alto del header ni paddings del
   tema) y post 1817 ("Inicio" - página de pruebas, slug inicio-2, NO
   es la home real todavía, esa sigue siendo el post 26).

   Orden de armado (a propósito, no es solo visual): primero el bloque
   de abajo (series/texto/contacto) con su alto natural, y las cards
   del hero ocupan lo que sobra del viewport (flex:1) - así el hero
   nunca empuja al bloque de abajo fuera de pantalla.
════════════════════════════════════════════════════ */

.full-width {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	position: relative;
}

/* Neutraliza cualquier padding/margin que el tema le ponga al
   contenedor de contenido en esta página - sin esto, ese espacio
   extra no entra en el cálculo de "resto del viewport" y aparece
   scroll aunque el alto esté bien calculado. */
.fp-hero-page .entry-content,
.fp-hero-page article,
.fp-hero-page .content-area {
	padding: 0 !important;
	margin: 0 !important;
}

.fp-home-viewport {
	display: flex;
	flex-direction: column;
	/* --fp-viewport-offset: distancia real medida por JS desde el tope
	   de la ventana hasta donde empieza este bloque (header + cualquier
	   padding) - el fallback es solo para el primer instante antes de
	   que el JS corra. */
	height: calc(100vh - var(--fp-viewport-offset, 84px));
	height: calc(100dvh - var(--fp-viewport-offset, 84px)); /* dvh: evita el salto por la barra de direcciones en mobile */
	overflow: hidden;
}

.fp-hero-lineas {
	flex: 1 1 auto;
	min-height: 0; /* deja que flex encoja esto en vez de desbordar */
	display: flex;
	flex-direction: row;
	gap: 20px;
}

.fp-hero-linea-item {
	flex: 1 1 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-decoration: none;
	overflow: hidden;
}

/* Oscurece la foto lo justo para que el texto blanco siempre sea
   legible, sin importar qué tan clara sea la imagen de fondo. */
.fp-hero-linea-item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	transition: background 0.2s ease;
}

.fp-hero-linea-item:hover::before {
	background: rgba(0, 0, 0, 0.5);
}

.fp-hero-linea-copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.fp-hero-linea-eyebrow {
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.fp-hero-linea-title {
	color: #ffffff;
	font-family: 'Fjalla One', sans-serif;
	font-size: 42px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
}

/* ── Bloque de abajo: alto natural (flex:0 0 auto), nunca se estira -
   las cards de arriba son las que ceden/ganan espacio. ── */
.fp-home-bottom {
	flex: 0 0 auto;
	padding: 20px 20px 24px;
	text-align: center;
}

.fp-home-series {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 28px;
	margin-bottom: 14px;
}

.fp-home-serie {
	display: flex;
	align-items: center;
}

.fp-home-serie-icon {
	height: 68px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
	opacity: 0.9;
}

.fp-home-serie-text {
	color: #ffffff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}

.fp-home-about {
	color: #ffffff;
	font-size: 18px;
	line-height: 1.5;
	max-width: 760px;
	margin: 0 auto 16px;
}

.fp-home-contact {
	display: flex;
	justify-content: center;
	gap: 48px;
	flex-wrap: wrap;
}

.fp-home-contact-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.fp-home-contact-label {
	position: relative;
	color: #ffffff;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding-bottom: 10px;
}

/* Rayita roja centrada debajo de cada label (CORREO/TELÉFONO/DIRECCIÓN). */
.fp-home-contact-label::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 28px;
	height: 2px;
	background: var(--theme-palette-color-1, #FA0000);
}

.fp-home-contact-value {
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
	line-height: 1.5;
}

/* ── RESPONSIVE ──
   En mobile el criterio cambia: las 3 imágenes deben ocupar TODA la
   pantalla visible (menos la cabecera) por sí solas - el bloque de
   abajo (series/texto/contacto) ya no comparte ese primer viewport,
   queda debajo y se ve haciendo scroll. Por eso acá .fp-home-viewport
   deja de tener alto fijo (crece según su contenido) y es
   .fp-hero-lineas quien toma ese cálculo de "resto de la pantalla". */
@media (max-width: 768px) {
	.fp-home-viewport {
		height: auto;
		overflow: visible;
	}

	.fp-hero-lineas {
		flex: none;
		flex-direction: column;
		gap: 0;
		height: calc(100vh - var(--fp-viewport-offset, 84px));
		height: calc(100dvh - var(--fp-viewport-offset, 84px));
	}

	.fp-hero-linea-title {
		font-size: 26px;
	}

	.fp-home-bottom {
		padding: 14px 16px 18px;
	}

	.fp-home-series {
		gap: 8px 16px;
	}

	.fp-home-serie-text {
		font-size: 12px;
	}

	.fp-home-serie-icon {
		height: 48px;
	}

	.fp-home-about {
		font-size: 14px;
	}

	.fp-home-contact {
		gap: 20px;
	}

	.fp-home-contact-label {
		font-size: 14px;
	}

	.fp-home-contact-value {
		font-size: 12px;
	}
}