/**
 * Portada tipo cartel (front-page).
 *
 * Objetivo: todo el contenido visible cabe en el primer pantallazo, sin
 * scroll, con una composicion parecida a la del flyer.
 *
 * Estrategia: la portada es un contenedor de altura fija (100dvh) dividido
 * en fracciones mediante CSS Grid. Cada bloque recibe su proporcion con
 * minmax() y las tipografias escalan con clamp() y dvh, de modo que la
 * composicion se adapta a cualquier tamano de pantalla.
 */

/* Oculta el contenido de ejemplo de la pagina cuando el theme ya aporta
   todas las secciones. El bloque siguiente solo aparece si el cliente escribe
   contenido real en la pagina Inicio. */
.psc-inicio__extra:empty {
	display: none;
}

.psc-cartel {
	display: grid;
	grid-template-rows:
		minmax(0, 40fr)  /* foto de la planta */
		minmax(0, 10fr)  /* bloque naranja: Llegamos a Barranquilla */
		minmax(0, 29fr)  /* bloque blanco: marca y descripcion */
		minmax(0, 7fr)   /* barra negra: tres ejes */
		minmax(0, 14fr); /* pie: contacto */

	height: 100dvh;
	max-height: 100dvh;
	overflow: hidden;
	background: var(--psc-surface);
}

/* El logo del theme aparece en el bloque de marca de la portada, asi que
   aqui no se repite. */
body.home .psc-marca__logo .custom-logo {
	filter: none;
}

/* --- Foto de la planta -------------------------------------------------- */

.psc-cartel__foto {
	position: relative;
	overflow: hidden;
	background: var(--psc-ink);
	/* Ancla de los distintivos y del QR: ambos se alinean al contenedor. */
	--psc-cartel-margen: clamp(1rem, 3vw, 2.5rem);
}

.psc-cartel__imagen {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* La foto es vertical: se enfoca la cuba, en el tercio inferior. */
	object-position: center 60%;
}

/* Velo muy suave: el flyer no oscurece la foto. */
.psc-cartel__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		color-mix(in oklab, var(--psc-ink) 28%, transparent) 0%,
		transparent 42%
	);
}

/* Respaldo cuando no hay foto: textura industrial con la marca. */
.psc-cartel__respaldo {
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(
			118deg,
			transparent 0 22px,
			color-mix(in oklab, var(--psc-surface) 6%, transparent) 22px 24px
		),
		linear-gradient(
			150deg,
			var(--psc-accent) 0%,
			color-mix(in oklab, var(--psc-accent) 70%, var(--psc-ink)) 100%
		);
}

/* --- Distintivos de capacidad ------------------------------------------- */

.psc-cartel__distintivos {
	position: absolute;
	/* Baja lo suficiente para no chocar con la barra de navegacion. */
	inset-block-start: clamp(3.25rem, 8vh, 4.75rem);
	inset-inline-end: var(--psc-cartel-margen);
	display: flex;
	gap: clamp(0.4rem, 1vw, 0.75rem);
	z-index: 3;
}

.psc-distintivo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15em;
	padding: clamp(0.35rem, 1vh, 0.7rem) clamp(0.5rem, 1.4vw, 0.9rem);
	color: var(--psc-ink);
	background: var(--psc-accent);
	border: 2px solid var(--psc-ink);
	border-radius: 4px;
	font-family: var(--psc-font-heading);
	line-height: 1.05;
	text-align: center;
}

.psc-distintivo .psc-icono {
	width: clamp(1.5rem, 4.5vh, 2.75rem);
	height: clamp(1.5rem, 4.5vh, 2.75rem);
	stroke-width: 2;
}

.psc-distintivo__pie {
	font-size: clamp(0.42rem, 1.15vh, 0.66rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.psc-distintivo--cifra .psc-distintivo__etiqueta {
	font-size: clamp(0.5rem, 1.4vh, 0.8rem);
	font-weight: 700;
	text-transform: uppercase;
}

.psc-distintivo__numero {
	font-size: clamp(1.6rem, 6.5vh, 3.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 0.9;
}

.psc-distintivo__unidad {
	font-size: clamp(0.42rem, 1.15vh, 0.66rem);
	font-weight: 700;
	text-transform: uppercase;
}

/* --- Bloque "Como llegar" con QR ---------------------------------------- */

.psc-cartel__llegada {
	position: absolute;
	/* Se ancla dentro de la foto, por encima del bloque naranja. */
	inset-block-end: clamp(0.5rem, 1.5vh, 1rem);
	inset-inline-end: var(--psc-cartel-margen);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}

.psc-llegada__etiqueta {
	padding: 0.15rem 0.75rem;
	color: var(--psc-surface);
	background: var(--psc-ink);
	border-radius: 999px;
	font-family: var(--psc-font-heading);
	font-size: clamp(0.5rem, 1.5vh, 0.8rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.psc-llegada__marco {
	display: grid;
	place-items: center;
	padding: clamp(0.25rem, 0.8vh, 0.45rem);
	background: var(--psc-surface);
	border: 3px solid var(--psc-ink);
	border-radius: 6px;
}

.psc-llegada__imagen,
.psc-llegada__placeholder {
	width: clamp(3.5rem, 11vh, 6.5rem);
	height: clamp(3.5rem, 11vh, 6.5rem);
}

.psc-llegada__imagen {
	object-fit: contain;
}

.psc-llegada__placeholder {
	display: grid;
	place-items: center;
	color: var(--psc-neutral-500);
	background: var(--psc-neutral-100);
	border-radius: 3px;
}

.psc-llegada__placeholder .psc-icono {
	width: 65%;
	height: 65%;
	stroke-width: 1.5;
}

/* --- Bloque naranja ----------------------------------------------------- */

.psc-cartel__bloque {
	display: flex;
	align-items: center;
	padding-inline: clamp(1rem, 3vw, 2.5rem);
	background: var(--psc-accent);
}

.psc-cartel__titulo {
	margin: 0;
	overflow: hidden;
	font-family: var(--psc-font-heading);
	font-size: clamp(1.05rem, 4vh, 2.1rem);
	font-weight: 500;
	line-height: 1.1;
	color: var(--psc-ink);
	letter-spacing: -0.01em;
}

.psc-cartel__titulo strong {
	font-weight: 700;
}

/* --- Bloque de marca ---------------------------------------------------- */

.psc-cartel__marca {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(0.35rem, 1.2vh, 0.9rem);
	padding-inline: clamp(1rem, 3vw, 2.5rem);
	background: var(--psc-surface);
	overflow: hidden;
}

.psc-marca__logo {
	display: flex;
	align-items: center;
}

.psc-marca__logo .custom-logo {
	max-height: clamp(2rem, 8vh, 5rem);
	width: auto;
}

.psc-marca__nombre {
	font-family: var(--psc-font-heading);
	font-size: clamp(1.1rem, 4.5vh, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.psc-marca__titulo {
	margin: 0;
	font-family: var(--psc-font-heading);
	font-size: clamp(0.95rem, 3.4vh, 1.9rem);
	font-weight: 700;
	line-height: 1.15;
}

.psc-marca__texto {
	margin: 0;
	max-width: 62ch;
	font-size: clamp(0.75rem, 2.4vh, 1.15rem);
	line-height: 1.5;
	color: var(--psc-ink);
	text-wrap: pretty;
}

/* --- Barra de ejes ------------------------------------------------------ */

.psc-cartel__ejes {
	display: flex;
	align-items: center;
	background: var(--psc-ink);
}

.psc-cartel__ejes-lista {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	gap: clamp(0.5rem, 2vw, 2rem);
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0 clamp(0.5rem, 2vw, 2rem);
	list-style: none;
}

.psc-cartel__eje {
	display: flex;
	align-items: center;
	gap: clamp(0.3rem, 0.9vw, 0.7rem);
	color: var(--psc-surface);
	min-width: 0;
	flex: 0 1 auto;
}

.psc-cartel__eje-icono {
	display: inline-flex;
	font-size: clamp(0.95rem, 3.2vh, 1.75rem);
	color: var(--psc-accent);
}

.psc-cartel__eje-texto {
	font-family: var(--psc-font-heading);
	font-size: clamp(0.62rem, 2.1vh, 1.15rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- Pie de contacto ---------------------------------------------------- */

.psc-cartel__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(0.75rem, 2vw, 2rem);
	padding-inline: clamp(1rem, 3vw, 2.5rem);
	background: var(--psc-accent);
	overflow: hidden;
}

.psc-cartel__contacto {
	display: flex;
	flex-direction: column;
	font-family: var(--psc-font-heading);
	font-size: clamp(0.6rem, 1.75vh, 0.95rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--psc-ink);
}

.psc-cartel__contacto a {
	color: var(--psc-ink);
	text-decoration: none;
}

.psc-cartel__contacto a:hover {
	text-decoration: underline;
}

.psc-cartel__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(0.4rem, 1vw, 0.75rem);
}

.psc-cartel__boton {
	min-height: clamp(2rem, 6vh, 2.9rem);
	padding-inline: clamp(0.75rem, 2vw, 1.5rem);
	font-size: clamp(0.68rem, 1.9vh, 0.95rem);
}

.psc-cartel .psc-boton--whatsapp {
	background: var(--psc-ink);
}

.psc-cartel .psc-boton--whatsapp:hover {
	background: var(--psc-accent-strong);
	color: var(--psc-surface);
}

/* --- Adaptacion a pantallas bajas -------------------------------------- */

@media (max-height: 620px) {
	.psc-cartel__distintivos,
	.psc-cartel__llegada {
		display: none;
	}
}

/* En movil el cartel se convierte en una pagina con scroll normal: una
   composicion de altura fija no es legible en vertical. */
@media (max-width: 767px) {
	.psc-cartel {
		display: block;
		height: auto;
		max-height: none;
		overflow: visible;
	}

	.psc-cartel__foto {
		aspect-ratio: 4 / 3;
	}

	.psc-cartel__distintivos,
	.psc-cartel__llegada {
		display: flex;
	}

	.psc-cartel__bloque,
	.psc-cartel__marca,
	.psc-cartel__ejes,
	.psc-cartel__pie {
		padding-block: clamp(1rem, 3vh, 1.75rem);
	}

	.psc-cartel__ejes-lista {
		flex-direction: column;
		gap: var(--psc-space-3);
	}

	.psc-cartel__pie {
		flex-direction: column;
		align-items: flex-start;
	}

	.psc-cartel__acciones {
		width: 100%;
	}

	.psc-cartel__boton {
		flex: 1 1 auto;
	}
}