/*
 * NAPISA — Naves y Parques Industriales S.A.
 * napisa.com
 * Desarrollo: EENDA · eenda.com
 * © 2026
 */

/*
 * napisa.com — Breakpoints del front
 *
 * Regla unica: siempre min-width, nunca max-width. style.css es la version
 * movil y aqui solo se anade lo que cambia al crecer el viewport (§39).
 *
 * Los breakpoints son los de Bootstrap 5.3 para no introducir una escala
 * paralela: sm 576 · md 768 · lg 992 · xl 1200.
 */


/* ── sm · 576px ─────────────────────────────────────────────────────────── */
@media (min-width: 36em){

	:root{
		--np-gutter: 1.75rem;
	}

	/* Con sitio, las cifras recuperan aire y la etiqueta su interletrado. */
	.np-figure{
		padding: 1.125rem 1.25rem 0;
	}

	.np-figure__t{
		letter-spacing: .13em;
	}

	/* A partir de sm la cifra pasa a su propia columna, alineada a la derecha. */
	.np-door{
		grid-template-columns: minmax(0, 1fr) auto 1.25rem;
		grid-template-areas: "texto cifra flecha";
		gap: 1.5rem;
		padding: 1.625rem 0;
	}

	.np-door__m{
		text-align: right;
	}

	.np-sheet{
		padding: 1.5rem 1.5rem 1.125rem;
	}

	.np-deck__ctrl{
		padding: 0 1.5rem 1.5rem;
	}

	.np-slide__ph{
		left: 1.5rem;
		top: 1.25rem;
	}
}


/* ── md · 768px ─────────────────────────────────────────────────────────── */
@media (min-width: 48em){

	.np-hero__body{
		padding: 3.5rem 0 2.75rem;
	}

	.np-footer__top{
		grid-template-columns: 1.4fr 1fr 1fr;
		gap: 2.5rem;
	}
}


/* ── lg · 992px ─────────────────────────────────────────────────────────── */
@media (min-width: 62em){

	:root{
		--np-gutter: 2.5rem;
		--np-header-h: 4.75rem;
	}

	/*
	 * Tres pistas: margen, texto y panel.
	 *
	 * La primera reproduce el margen del contenedor MAS su canal, para que el
	 * texto del hero quede alineado con el logotipo de la cabecera y con el
	 * resto de franjas. Las otras dos reparten lo que sobra, de modo que el
	 * panel de obra llega hasta el borde del viewport y no queda banda blanca
	 * a su derecha.
	 *
	 * La primera pista es de tamano fijo y las otras dos son fr, asi que no hay
	 * desbordamiento aunque 100vw incluya la barra de scroll.
	 */
	.np-hero__grid{
		grid-template-columns:
			max(var(--np-gutter), calc((100vw - 78rem) / 2 + var(--np-gutter)))
			minmax(0, 1.02fr)
			minmax(0, .96fr);
		align-items: stretch;
	}

	/*
	 * Hero mas bajo. El aire de antes —4,5rem arriba mas el reparto que separa
	 * las cifras del titular— hacia que el blanco del hero se derramara sobre
	 * la franja siguiente y las dos se leyeran como una.
	 */
	.np-hero__body{
		grid-column: 2;
		padding: 3.25rem 3.5rem 2.75rem 0;
	}

	/*
	 * 29rem es la altura minima del panel; el texto del hero puede subirla.
	 * Con la ficha sobre la foto, toda esa altura menos la barra de controles
	 * es fotografia.
	 */
	.np-deck{
		grid-column: 3;
		min-height: 29rem;
	}

	/*
	 * Ficha SOBRE la foto. Foto y ficha comparten la unica celda de la
	 * diapositiva; la ficha se apoya en el borde inferior sobre un degradado
	 * que garantiza el contraste del texto sea cual sea la fotografia: en su
	 * tramo denso equivale a un fondo #1D1C1A, con el que el marfil pasa de
	 * 13:1 y el gris de las etiquetas de 5:1.
	 */
	.np-slide{
		grid-template-rows: minmax(0, 1fr);
	}

	/* La proporcion movil se libera: la foto llena la altura del panel. */
	.np-slide__media{
		grid-area: 1 / 1;
		aspect-ratio: auto;
	}

	.np-sheet{
		grid-area: 1 / 1;
		align-self: end;
		position: relative;
		z-index: 1;
		border-top: 0;
		padding: 5rem 1.5rem 1.125rem;
		background: linear-gradient(
			to top,
			rgba(21, 20, 18, .96) 0%,
			rgba(21, 20, 18, .9) 45%,
			rgba(21, 20, 18, .55) 72%,
			rgba(21, 20, 18, 0) 100%
		);
	}

	/* El menu movil desaparece: la navegacion vuelve a ser horizontal. */
	.np-menu{
		border-left: 0;
	}

	.np-menu .np-nav{
		flex-direction: row;
		gap: 1.75rem;
	}

	.np-menu .np-nav li + li{
		border-top: 0;
	}

	.np-menu .np-nav a{
		padding: .375rem 0;
		font-family: var(--np-body);
		font-size: .9375rem;
	}

	.np-band{
		padding: 4rem 0 4.25rem;
	}

	.np-door{
		grid-template-columns: minmax(0, 1fr) minmax(0, 15rem) 1.5rem;
		gap: 2rem;
		padding: 1.875rem 0;
	}

	.np-door__p{
		font-size: 1rem;
	}

	.np-answer{
		padding: 4.5rem 0 4.75rem;
	}

	/*
	 * Dos columnas: la respuesta principal a la izquierda, las secundarias a
	 * la derecha. La principal manda, asi que se lleva algo mas de ancho.
	 */
	.np-proof{
		padding: 4.25rem 0 4.5rem;
	}

	.np-works,
	.np-breakdown{
		padding: 4rem 0 4.25rem;
	}

	.np-close{
		padding: 4rem 0 4.25rem;
	}

	.np-page{
		padding: 3.5rem 0 4.25rem;
	}

	.np-group{
		margin-top: 3.75rem;
	}

	.np-single{
		margin-top: 3.25rem;
	}

	.np-single + .np-single{
		margin-top: 1.75rem;
	}

	/* La ficha lateral acompana al texto mientras se lee. */
	.np-facts{
		position: sticky;
		top: calc(var(--np-header-h) + 1.5rem);
	}

	.np-footer{
		padding: 4rem 0 2.5rem;
	}

	.np-footer__top{
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
	}
}


/* ── xl · 1200px ────────────────────────────────────────────────────────── */
@media (min-width: 75em){

	.np-hero__body{
		padding: 4rem 4rem 3.25rem 0;
	}

	.np-deck{
		min-height: 32rem;
	}
}