/* ==========================================================================
   Portada · sección de productos y pilares.

   Dos bloques:
   1. .p7prod — el portafolio. Tres tarjetas verticales y un panel que cambia
      al elegir una (mecánica del componente 01, selector de acrónimo).
   2. .p7cf  — los cinco pilares en carrusel de portada (coverflow).

   Hereda los tokens de .p7deck (protocolos.css), que sigue el color que anima
   el scroll.
   ========================================================================== */

/* ══════════ 1 · Productos ══════════ */
.p7prod {
	position: relative;
	z-index: 2;
	padding: 0 var(--p7-gut);
}

.p7prod-head { margin-bottom: clamp(28px, 3.4vw, 54px); }

.p7prod-title {
	margin: 0;
	font-family: var(--p7-display, Butler, serif);
	font-weight: 300;
	font-size: clamp(2.1rem, 5.4vw, 5.4rem);
	line-height: 1.04;
	letter-spacing: -.026em;
}

.p7prod-lede {
	margin: clamp(16px, 1.8vw, 26px) 0 0;
	max-width: 46ch;
	font-size: clamp(1rem, 1.15vw, 1.16rem);
	line-height: 1.6;
	opacity: .74;
}

.p7prod-zona {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: clamp(26px, 3.4vw, 56px);
	align-items: center;
}

.p7prod-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 1.4vw, 22px);
}

/* La tarjeta CRECE al señalarla, así que no puede llevar `aspect-ratio`: eso
   le fijaba la altura y el texto —que además iba en posición absoluta— no tenía
   forma de empujar la caja. Era el motivo de que no se alargara nunca.
   Ahora es una columna flex con un alto MÍNIMO: en reposo mide ese mínimo y al
   desplegarse la descripción, crece lo que haga falta. */
.p7prod-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(196px, 15.6vw, 268px);
	transition: transform .5s cubic-bezier(.22, 1, .36, 1),
	            border-color .5s ease,
	            box-shadow .5s ease,
	            min-height .5s cubic-bezier(.22, 1, .36, 1);
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid rgba(245, 244, 240, .14);
	text-decoration: none;
	color: var(--p7-ink, #F5F4F0);
	background: rgba(8, 8, 10, .92);
	transition: transform .5s cubic-bezier(.22, 1, .36, 1), border-color .5s ease, box-shadow .5s ease;
}

.p7prod-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
	filter: saturate(.5) brightness(.62);
	transform: scale(1.04);
	transition: filter .55s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}

/* El velo no es decoración: sostiene el contraste del texto sobre una foto
   que no controlamos zona a zona. */
.p7prod-card__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(6, 6, 7, .96), rgba(6, 6, 7, .58) 46%, rgba(6, 6, 7, .06));
}

/* En flujo, no en posición absoluta: es lo que permite que al desplegarse la
   descripción el bloque empuje la tarjeta y ésta se alargue. En absoluto se
   quedaba flotando sobre una caja de altura fija y el texto se recortaba. */
.p7prod-card__txt {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: clamp(16px, 1.7vw, 24px);
}

.p7prod-card__rot {
	font-family: var(--p7-sans, system-ui, sans-serif);
	font-size: .6rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--p7-champagne, #B5A58E);
}

/* El nombre manda en la tarjeta: es lo único que se lee en reposo, así que
   pesa bastante más que antes. */
.p7prod-card__n {
	font-family: var(--p7-display, Butler, serif);
	font-weight: 300;
	font-size: clamp(1.35rem, 1.95vw, 2.05rem);
	line-height: 1.08;
	color: #FFF;
	text-wrap: balance;
}

/* La descripción no se ve en reposo. Al señalar la tarjeta, se despliega.
   Se anima grid-template-rows y no la altura: es la forma de llevar un bloque
   de alto desconocido de 0 a su medida sin fijar un número a mano y sin que
   el navegador tenga que recalcular la caja en cada fotograma. */
.p7prod-card__desp {
	display: grid;
	grid-template-rows: 0fr;
	/* El recorte va AQUÍ, en el contenedor, y no en el hijo. `1fr` es en
	   realidad minmax(auto, 1fr), y con la caja auto no hay espacio libre que
	   repartir, así que la pista se queda en su mínimo automático. Un hijo con
	   overflow:hidden tiene ese mínimo en CERO, de modo que la pista valía 0
	   tanto plegada como desplegada y el despliegue no ocurría nunca. */
	overflow: hidden;
	transition: grid-template-rows .5s cubic-bezier(.22, 1, .36, 1);
}

.p7prod-card__desp > span { min-height: 0; }

/* Solo al señalar o enfocar. NO con .es-activa: esa clase marca cuál alimenta
   el panel de al lado y la lleva puesta la primera desde el principio, así que
   incluirla dejaba una tarjeta con la descripción desplegada en reposo. */
.p7prod-card:hover .p7prod-card__desp,
.p7prod-card:focus-visible .p7prod-card__desp { grid-template-rows: 1fr; }

.p7prod-card__d {
	display: block;
	padding-top: 8px;
	font-family: var(--p7-sans, system-ui, sans-serif);
	font-size: .8rem;
	line-height: 1.5;
	color: rgba(245, 244, 240, .8);
	opacity: 0;
	transition: opacity .4s ease .1s;
}

.p7prod-card:hover .p7prod-card__d,
.p7prod-card:focus-visible .p7prod-card__d { opacity: 1; }

.p7prod-card__ir {
	position: absolute;
	top: clamp(14px, 1.4vw, 20px);
	right: clamp(14px, 1.4vw, 20px);
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(245, 244, 240, .3);
	color: #FFF;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}

.p7prod-card__ir svg { width: 15px; height: 15px; }

/* Al señalarla, la tarjeta se ALARGA. El alto mínimo sube explícitamente en
   vez de dejarlo al contenido: en reposo la caja ya era más alta que el texto
   desplegado, así que por contenido no crecía nada y el despliegue pasaba
   desapercibido. Con un mínimo mayor la extensión se ve, y el texto entra en
   el espacio que se abre. */
.p7prod-card:hover,
.p7prod-card:focus-visible {
	min-height: clamp(272px, 21.5vw, 372px);
}

.p7prod-card:hover,
.p7prod-card.es-activa {
	transform: translateY(-8px);
	border-color: var(--p7-champagne, #B5A58E);
	box-shadow: 0 30px 66px -32px rgba(0, 0, 0, .92);
}

.p7prod-card:hover .p7prod-card__img,
.p7prod-card.es-activa .p7prod-card__img { filter: none; transform: scale(1); }

.p7prod-card:hover .p7prod-card__ir,
.p7prod-card.es-activa .p7prod-card__ir { opacity: 1; transform: none; }

.p7prod-card:focus-visible { outline: 2px solid var(--p7-champagne, #B5A58E); outline-offset: 4px; }

/* El panel que cambia al elegir tarjeta. */
.p7prod-panel__rot {
	margin: 0 0 .5em;
	font-family: var(--p7-sans, system-ui, sans-serif);
	font-size: .62rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--p7-champagne, #B5A58E);
}

.p7prod-panel__t {
	margin: 0 0 .5em;
	font-family: var(--p7-display, Butler, serif);
	font-weight: 300;
	font-size: clamp(1.4rem, 2.2vw, 2.1rem);
	line-height: 1.14;
}

.p7prod-panel__d {
	margin: 0;
	font-size: clamp(.95rem, 1.05vw, 1.06rem);
	line-height: 1.62;
	opacity: .74;
	text-wrap: pretty;
}

/* La entrada del contenido al cambiar de tarjeta. El JS reinicia la animación
   forzando un reflow: sin eso el navegador no vuelve a lanzarla, porque la
   clase nunca llegó a salir del DOM. */
.p7prod-panel.es-nuevo > * {
	animation: p7prod-entra .42s cubic-bezier(.22, .9, .3, 1) both;
}
.p7prod-panel.es-nuevo .p7prod-panel__t { animation-delay: .05s; }
.p7prod-panel.es-nuevo .p7prod-panel__d { animation-delay: .1s; }

@keyframes p7prod-entra {
	from { opacity: 0; transform: translateY(9px); }
	to   { opacity: 1; transform: none; }
}

/* El título de los pilares venía pegado a las tarjetas de arriba: las de
   producto crecen al señalarlas, así que necesitan aire por debajo o el título
   se les monta encima. Y el tamaño se iguala al de los demás títulos de la
   página, en vez de ser el mayor de la sección. */
.p7deck-head--pilares {
	margin-top: clamp(64px, 8vw, 130px);
}

.p7deck-head--pilares .p7deck-title {
	font-size: clamp(2.1rem, 5.4vw, 5.4rem);
}

/* ══════════ 2 · Los cinco pilares — coverflow ══════════ */
.p7cf {
	position: relative;
	z-index: 2;
	padding: 0 var(--p7-gut);
	margin-top: clamp(30px, 4vw, 62px);
	--cf-card: clamp(216px, 21vw, 310px);
	/* La PROPORCIÓN de la tarjeta, en variable y no escrita dos veces. La
	   usan el alto de la pista y el de la tarjeta, y tienen que ser el mismo
	   número: si divergen, la tarjeta sobresale de la pista y el recorte de
	   .p7cf-marco le corta el pie —que es justo donde vive "Ver pilar"—. */
	--cf-ratio: 1.34;
}

.p7cf-marco {
	/* El relleno vertical deja sitio a las sombras, que si no las recorta el
	   overflow. */
	padding: clamp(26px, 3vw, 52px) 0;
	overflow: hidden;
	outline: none;
	cursor: grab;
	/* El arrastre horizontal es nuestro; el vertical se lo queda la página. */
	touch-action: pan-y;
	perspective: calc(var(--cf-card) * 3);
}

.p7cf-marco.es-arrastrando { cursor: grabbing; }
.p7cf-marco:focus-visible { outline: 2px solid var(--p7-champagne, #B5A58E); outline-offset: 6px; }

.p7cf-pista {
	position: relative;
	height: calc(var(--cf-card) * var(--cf-ratio));
	transform-style: preserve-3d;
	user-select: none;
	/* ESTA es la razón por la que las tarjetas no abrían su página, y no el
	   JavaScript: con las tarjetas transformadas en 3D dentro de un
	   preserve-3d que a su vez cuelga de un contenedor con overflow:hidden,
	   el navegador resolvía cada clic sobre LA PISTA y no sobre la tarjeta
	   que se ve encima. document.elementsFromPoint sí las encontraba, pero
	   el clic real aterrizaba en la pista, el manejador no hallaba tarjeta y
	   el enlace nunca llegaba a dispararse.

	   Dejando la pista transparente al puntero, el navegador la salta y
	   sigue buscando: la siguiente candidata es la tarjeta. El arrastre no
	   se resiente porque sus manejadores viven en .p7cf-marco. */
	pointer-events: none;
}

.p7cf-card { pointer-events: auto; }

/* Sin JS las tarjetas no se colocan: se ven en fila y siguen siendo enlaces.
   Con JS (.es-vivo) pasan a posicionarse en abanico. */
.p7cf-pista:not(.es-vivo) {
	display: flex;
	gap: 16px;
	height: auto;
	flex-wrap: wrap;
	justify-content: center;
}

.p7cf-pista:not(.es-vivo) .p7cf-card { position: static; }

.p7cf-card {
	position: absolute;
	left: 50%;
	top: 0;
	width: var(--cf-card);
	height: calc(var(--cf-card) * var(--cf-ratio));
	transform-style: preserve-3d;
	text-decoration: none;
	color: var(--p7-ink, #F5F4F0);
	will-change: transform;
}

/* La cara. El canto va aparte para dar grosor real. */
.p7cf-card__cara {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(10px, 1.1vw, 15px);
	width: 100%;
	height: 100%;
	padding: clamp(18px, 1.8vw, 26px) clamp(14px, 1.5vw, 20px);
	border-radius: 5px;
	border: 1px solid rgba(245, 244, 240, .16);
	background: linear-gradient(168deg, rgba(20, 20, 23, .96), rgba(8, 8, 10, .96));
	box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .92);
	transition: border-color .5s ease, box-shadow .5s ease;
}

/* El grosor. No es una losa suelta: son varias sombras encadenadas en el
   propio canto, cada una un poco más atrás, que al girar la tarjeta se leen
   como el espesor del canto. Con una sola losa a 14px el volumen sólo se veía
   de perfil; encadenando capas se ve desde cualquier ángulo. */
.p7cf-card__canto {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 5px;
	background: linear-gradient(168deg, rgba(181, 165, 142, .40), rgba(90, 80, 66, .30));
	transform: translateZ(-26px);
	box-shadow:
		0 0 0 1px rgba(181, 165, 142, .26),
		6px 0 0 -1px rgba(120, 108, 90, .30),
		12px 0 0 -2px rgba(120, 108, 90, .22),
		-6px 0 0 -1px rgba(120, 108, 90, .30),
		-12px 0 0 -2px rgba(120, 108, 90, .22);
}

.p7cf-card__alto {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
}

.p7cf-card__n {
	font-family: var(--p7-display, Butler, serif);
	font-size: clamp(1.2rem, 1.45vw, 1.5rem);
	line-height: 1;
	color: var(--p7-champagne, #B5A58E);
}

.p7cf-card__rot {
	font-family: var(--p7-sans, system-ui, sans-serif);
	font-size: .64rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(245, 244, 240, .6);
	text-align: right;
}

/* Icono bastante mayor: es lo primero que identifica el pilar dentro de la
   tarjeta, y la tarjeta no cambia de tamano. */
.p7cf-card__i {
	display: block;
	width: clamp(118px, 12.4vw, 168px);
	height: auto;
	margin-top: auto;
}

.p7cf-card__t {
	font-family: var(--p7-display, Butler, serif);
	font-weight: 400;
	font-size: clamp(1.24rem, 1.62vw, 1.66rem);
	line-height: 1.12;
	text-align: center;
	text-wrap: balance;
}

.p7cf-card__d {
	font-family: var(--p7-sans, system-ui, sans-serif);
	font-size: clamp(.84rem, .98vw, .96rem);
	line-height: 1.5;
	text-align: center;
	color: rgba(245, 244, 240, .8);
	text-wrap: pretty;
}

.p7cf-card__ir {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--p7-sans, system-ui, sans-serif);
	font-size: .62rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--p7-champagne, #B5A58E);
	opacity: 0;
	transition: opacity .45s ease;
}

.p7cf-card__ir svg { width: 14px; height: 14px; }

.p7cf-card.es-activa .p7cf-card__cara {
	border-color: var(--p7-champagne, #B5A58E);
	box-shadow: 0 0 0 1px var(--p7-champagne, #B5A58E), 0 38px 84px -34px rgba(0, 0, 0, .94);
}

.p7cf-card.es-activa .p7cf-card__ir { opacity: 1; }
.p7cf-card:focus-visible .p7cf-card__cara { outline: 2px solid var(--p7-champagne, #B5A58E); outline-offset: 3px; }

/* Los cinco accesos numerados. */
.p7cf-nums {
	list-style: none;
	margin: clamp(18px, 2vw, 30px) 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 10px;
}

/* El color sale de la tinta de la SECCIÓN, no de un claro fijo. Esta sección
   tiene el fondo blanco, así que en un gris claro los números resultaban
   invisibles; y como el fondo se mueve con el scroll, un color fijo se rompería
   igual más abajo. */
.p7cf-num {
	width: 46px;
	height: 34px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 3px;
	background: transparent;
	color: var(--atlas-ink, #0A0A0C);
	opacity: .45;
	font-family: var(--p7-display, Butler, serif);
	font-size: .9rem;
	cursor: pointer;
	transition: opacity .35s ease, color .35s ease, background .35s ease;
}

.p7cf-num:hover { opacity: .85; }

.p7cf-num.es-activo {
	opacity: 1;
	color: #14130F;
	background: var(--p7-champagne, #B5A58E);
	border-color: var(--p7-champagne, #B5A58E);
}

.p7cf-num:focus-visible { outline: 2px solid var(--p7-champagne, #B5A58E); outline-offset: 3px; }

/* ══════════ Responsive ══════════ */
@media (max-width: 1024px) {
	.p7prod-zona { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   MÓVIL · Productos — la tarjeta se acuesta

   En vertical, la tarjeta de columna se convertía en un cartel de pantalla
   completa: la fotografía ocupaba casi todo el alto útil y para ver las tres
   líneas de producto había que recorrer tres pantallas. Y la descripción
   colgaba de :hover, que en un teléfono no llega nunca, así que las tres
   tarjetas se leían sólo por su nombre.

   Acostada, la lámina queda a la izquierda a su tamaño de miniatura y el
   texto —rótulo, nombre y descripción— ocupa la derecha, siempre visible. Las
   tres líneas caben ahora en una pantalla y cada una se lee entera.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
	.p7prod-lista { grid-template-columns: 1fr; gap: 12px; }

	.p7prod-card {
		flex-direction: row;
		align-items: stretch;
		justify-content: flex-start;
		min-height: 0;
		gap: 0;
	}
	/* En reposo la tarjeta ya no crece: la descripción no está plegada. */
	.p7prod-card:hover,
	.p7prod-card:focus-visible { min-height: 0; transform: none; }

	/* La lámina deja de ser fondo y pasa a ser una columna del flujo. */
	.p7prod-card__img {
		position: relative;
		inset: auto;
		flex: none;
		width: 38%;
		max-width: 168px;
		height: auto;
		aspect-ratio: 3 / 4;
		align-self: stretch;
		object-position: center 38%;
		/* Sin puntero no hay nada que devuelva el color: la fotografía va ya
		   corregida, no apagada a la espera de un hover. */
		filter: none;
		transform: none;
	}

	/* El velo se queda sobre la lámina, no sobre el texto: el texto ya cae
	   sobre el fondo oscuro de la tarjeta y no necesita nada debajo. */
	.p7prod-card__velo {
		right: auto;
		width: 38%;
		max-width: 168px;
		background: linear-gradient(90deg, rgba(6, 6, 7, 0.34) 0%, rgba(6, 6, 7, 0) 46%, rgba(6, 6, 7, 0.42) 100%);
	}

	.p7prod-card__txt {
		flex: 1;
		min-width: 0;
		justify-content: center;
		gap: 5px;
		padding: 16px 44px 16px 16px;
	}

	.p7prod-card__n { font-size: 1.24rem; }

	/* Desplegada de partida. Es el mismo contenido que en escritorio; lo que
	   cambia es que aquí no hay gesto que lo abra. */
	.p7prod-card__desp { grid-template-rows: 1fr; }
	.p7prod-card__d { opacity: 1; padding-top: 4px; font-size: .78rem; line-height: 1.45; }

	.p7prod-card__ir {
		top: 50%;
		right: 12px;
		transform: translateY(-50%);
		opacity: .72;
		width: 26px;
		height: 26px;
	}
	.p7prod-card.es-activa .p7prod-card__ir { opacity: 1; transform: translateY(-50%); }

	/* El panel de al lado repetía, palabra por palabra, la descripción que
	   ahora vive dentro de cada tarjeta. Dos veces el mismo párrafo en la
	   misma pantalla no informa: alarga. */
	.p7prod-panel { display: none; }

	/* Las tarjetas de pilar ya no se cortan por abajo.

	   El alto de la tarjeta salía de multiplicar el ancho por 1,34, y ese
	   número venía del escritorio, donde la tarjeta es ancha. En vertical la
	   tarjeta se estrecha pero su contenido no encoge igual —el número, el
	   rótulo, el ícono, el nombre, la frase y "Ver pilar" son siete cosas—,
	   así que la última se salía de la caja y el recorte de .p7cf-marco se la
	   comía. Se le da la proporción que el contenido pide y se baja el ícono,
	   que era lo que más espacio ocupaba sin decir nada nuevo. */
	.p7cf {
		--cf-card: clamp(190px, 58vw, 258px);
		--cf-ratio: 1.62;
	}
	.p7cf-card__i { width: clamp(76px, 24vw, 104px); }
	.p7cf-card__cara { gap: 8px; padding: 16px 14px; }
	.p7cf-card__t { font-size: 1.16rem; }
	.p7cf-card__d { font-size: .8rem; line-height: 1.42; }
	.p7cf-card__ir { font-size: .58rem; }
}

@media (prefers-reduced-motion: reduce) {
	.p7prod-card,
	.p7prod-card__img { transition: none; }
	.p7prod-card:hover, .p7prod-card.es-activa { transform: none; }
	.p7prod-panel.es-nuevo > * { animation: none; }
}