/*! BaseBlue — piezas de páginas V2. Designed and developed by Luis Koepke — https://www.luiskoepke.com */

/* ==========================================================================
   CAMBIOS DEL CLIENTE (octubre): pmap (el mapa de la Cuenca Pérmica con
   los 250 MW), pcards con imagen, psteps con imagen, pend (el hero al final
   de la página) y pstage (el vídeo de la pila en Technology). Se apoya en
   pages.css y solo añade.
   ========================================================================== */

/* ===================================================================== pmap */

.pmap { padding-top: calc(var(--hdr-h, 8rem) + clamp(4rem, 8svh, 9.6rem)); overflow: clip; }
.pmap__grid { align-items: center; row-gap: var(--block-gap); }
.pmap__text { grid-column: 1 / span 5; display: grid; gap: var(--head-gap); align-content: center; }
.pmap__crumb a { color: inherit; }
.pmap__crumb .sep { margin-inline: 0.6rem; }
.pmap__title {
	margin: 0;
	font-size: var(--t-h2, clamp(2.6rem, 1.6rem + 3.2vw, 5.4rem));
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -0.022em;
	text-wrap: balance;
}
.pmap__num {
	margin: 0;
	font-size: clamp(8rem, 4rem + 9vw, 18rem);
	font-weight: 200;
	line-height: 0.9;
	letter-spacing: -0.05em;
	color: #fff;
}
.pmap__num span { margin-left: 0.6rem; font-size: 0.24em; font-weight: 400; letter-spacing: 0; color: var(--bb-sky); vertical-align: top; }
.pmap__lead { max-width: 38ch; color: var(--text2); }
.pmap__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, auto));
	justify-content: start;
	gap: 1.2rem clamp(2.4rem, 3vw, 4.8rem);
	margin: 1.2rem 0 0;
	padding-top: 2rem;
	border-top: 1px solid var(--rule);
}
.pmap__facts dt { font-size: var(--t-micro); color: var(--muted); text-transform: none; letter-spacing: 0; }
.pmap__facts dd { margin: 0.4rem 0 0; font-size: var(--t-body); }

.pmap__map { grid-column: 6 / -1; margin: 0; }
.pmap__svg { display: block; width: 100%; height: auto; overflow: visible; }
.pmap__band {
	fill: none;
	stroke: var(--bb-pale);
	stroke-width: 2.4;
	stroke-linecap: round;
	opacity: 0.16;
	transition: opacity 1.2s var(--ease-out);
	transition-delay: calc(0.35s + var(--b) * 0.07s);
}
/* Se enciende hacia fuera desde el emplazamiento al entrar en pantalla. */
.is-in .pmap__band { opacity: 0.62; }
.pmap__band[style*="--b:0"], .pmap__band[style*="--b:1"] { stroke: var(--bb-sky); }
.is-in .pmap__band[style*="--b:0"], .is-in .pmap__band[style*="--b:1"] { opacity: 1; }
.pmap__basin { opacity: 0; transition: opacity 1.6s var(--ease-out) 0.3s; }
.is-in .pmap__basin { opacity: 1; }
.pmap__core { fill: #fff; }
.pmap__ring {
	fill: none;
	stroke: var(--bb-sky);
	stroke-width: 1.2;
	transform-box: fill-box;
	transform-origin: center;
	animation: pmap-ring 2.8s var(--ease-out) infinite;
}
.pmap__ring--2 { animation-delay: 1.4s; }
@keyframes pmap-ring { from { transform: scale(1); opacity: 0.9; } to { transform: scale(6); opacity: 0; } }
.pmap__label line { stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pmap__label text { fill: #fff; font-family: inherit; }
.pmap__name { font-size: 15px; font-weight: 400; }
.pmap__mw { font-size: 11px; fill: var(--bb-sky) !important; letter-spacing: 0; }
.pmap__state { fill: rgba(222, 227, 235, 0.22); font-size: 12px; letter-spacing: 0; font-family: inherit; }

/* ============================================================ pcards + foto */

.pcard__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin-bottom: 2rem;
	border-radius: var(--r-media);
	background: var(--bb-paper-2, #ebebe8);
}
.pcard__media :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.pcard:hover .pcard__media :is(img, video) { transform: scale(1.04); }
}
.pcards .pcard { border-top: 0; padding-top: 0; }
.pcard__n { margin: 0; font-size: var(--t-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.pcard__title { margin-top: 0.6rem; }
.pcard__text { margin-top: 1rem; color: var(--text2); max-width: 36ch; }

/* =========================================================== psteps + foto */

.psteps--media .psteps__media {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin-bottom: 0.8rem;
	border-radius: var(--r-media);
	background: rgba(255, 255, 255, 0.04);
}
.psteps--media .psteps__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.psteps--media .psteps__media--dark img { object-fit: contain; padding: 8%; box-sizing: border-box; }

/* ===================================================== pend (hero al final) */

.pend { padding-top: var(--sec-pad); }
/* La película del cierre es desierto claro y hormigón: con el 30 % de serie
   el título blanco se quedaba por debajo de 3:1 en retrato. El mismo 46 %
   que los renders claros (financing, data centers). */
.pend .phero__stage { --shade: 0.46; }

/* ================================================== pstage (Technology) */
/* La pila que se desarma y se multiplica: el vídeo a sangre con el texto a
   la izquierda, sobre tinta. */
.pstage__grid { align-items: center; row-gap: var(--block-gap); }
.pstage__text { grid-column: 1 / span 4; display: grid; gap: var(--head-gap); }
.pstage__media { grid-column: 5 / -1; margin: 0; }
.pstage__steps { display: grid; gap: 1.2rem; margin: 1.2rem 0 0; padding: 0; list-style: none; counter-reset: st; }
.pstage__steps li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 0.4rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); color: var(--text2); }
.pstage__steps li::before { counter-increment: st; content: "0" counter(st); color: var(--accent); font-variant-numeric: tabular-nums; }

/* ================================================================= Retrato */

@media (orientation: portrait), (max-width: 899px) {
	.pmap__text, .pmap__map { grid-column: 1 / -1; }
	.pmap__map { margin-inline: -4vw; }
	.pmap__facts { grid-template-columns: repeat(2, minmax(0, auto)); }
	.psteps--media .psteps__media { aspect-ratio: 16 / 9; }
	.pstage__text, .pstage__media { grid-column: 1 / -1; }
}
@media (orientation: landscape) and (min-width: 900px) and (max-width: 1279px) {
	.pcards:has(.pcard__media) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4.8rem; }
}

@media (prefers-reduced-motion: reduce) {
	.pmap__band, .pmap__basin { transition: none; }
	.pmap__ring { animation: none; opacity: 0; }
}

/* Technology V3: la pila abre la página (la pista con scroll va al final). */
.pstage--open { padding-top: calc(var(--header-h, 8rem) + clamp(4rem, 8svh, 9.6rem)); }
.pstage--open nav a { color: inherit; }
.pstage__title {
	margin: 0;
	font-size: var(--t-h2);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -0.022em;
	text-wrap: balance;
}