/* ============================================================
   SALAFORMA — panels.364a.css
   Contenedores y secciones. Media queries estilo desktop-first
   (max-width), ritmo de espaciado distinto por seccion.
   ============================================================ */

@layer layout {

	* { box-sizing: border-box; }

	html { scroll-behavior: smooth; }

	@media (prefers-reduced-motion: reduce) {
		html { scroll-behavior: auto; }
	}

	body {
		background: var(--c-paper);
		margin: 0;
	}

	img { max-width: 100%; display: block; }

	.container {
		width: 100%;
		max-width: var(--w-container);
		margin-inline: auto;
		padding-inline: var(--sp-5);
	}

	.container--wide {
		max-width: var(--w-container-wide);
	}

	.container--narrow {
		max-width: var(--w-container-narrow);
	}

	.section {
		padding-block: var(--sp-8);
	}

	.section--tight { padding-block: var(--sp-6); }
	.section--roomy { padding-block: var(--sp-10); }

	.section--dark {
		background: var(--c-ink);
		color: var(--c-grey-100);
	}

	.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--c-white); }

	.hero__copy h1,
	.page-header__body h1 {
		color: var(--c-white);
	}

	/* contraste >=4.5:1: el acento base (993399) sobre fondo oscuro no llega a 4.5:1 */
	.hero__copy .eyebrow,
	.section--dark .eyebrow {
		color: var(--c-accent-soft);
	}

	.section--paper2 { background: var(--c-paper-2); }

	.section__head {
		max-width: 640px;
		margin-bottom: var(--sp-7);
	}

	.section__head p { margin-top: var(--sp-3); }

	/* -- hero dividido (split-hero) -- */
	.hero {
		position: relative;
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
		min-height: 640px;
		background: var(--c-ink);
		color: var(--c-white);
		overflow: hidden;
	}

	.hero__copy {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--sp-4);
		padding: var(--sp-9) var(--sp-6) var(--sp-8) var(--sp-6);
		max-width: 560px;
		margin-left: auto;
	}

	.hero__copy p { color: var(--c-grey-300); }

	.hero__actions {
		display: flex;
		align-items: center;
		gap: var(--sp-5);
		margin-top: var(--sp-3);
		flex-wrap: wrap;
	}

	.hero__meta {
		display: flex;
		gap: var(--sp-2);
		font-size: 13px;
		color: var(--c-grey-500);
	}

	.hero__media {
		position: relative;
		overflow: hidden;
	}

	.hero__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform: translateY(0);
		transition: transform var(--dur-slow) var(--ease-out);
	}

	.hero:hover .hero__media img {
		transform: translateY(-2%);
	}

	.hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 11, .5) 100%);
		pointer-events: none;
	}

	/* -- cabecera interior con foto (paginas de categoria) -- */
	.page-header {
		position: relative;
		background: var(--c-ink);
		color: var(--c-white);
		min-height: 380px;
		display: flex;
		align-items: flex-end;
		overflow: hidden;
	}

	.page-header__media {
		position: absolute;
		inset: 0;
	}

	.page-header__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: .55;
	}

	.page-header__body {
		position: relative;
		z-index: 1;
		padding-block: var(--sp-7);
	}

	.crumbs {
		display: flex;
		gap: var(--sp-2);
		font-size: 13px;
		color: var(--c-grey-500);
		margin-bottom: var(--sp-3);
	}

	.crumbs a { text-decoration: none; }
	.crumbs a:hover { color: var(--c-accent-soft); }

	/* -- rejillas -- */
	.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
	.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
	.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }

	.split {
		display: grid;
		grid-template-columns: .85fr 1.15fr;
		gap: var(--sp-7);
		align-items: center;
	}

	.split--reverse { grid-template-columns: 1.15fr .85fr; }
	.split--reverse .split__media { order: 2; }

	.split__media img {
		border-radius: var(--r-lg);
		width: 100%;
	}

	.stat-row {
		display: flex;
		gap: var(--sp-7);
		flex-wrap: wrap;
		margin-top: var(--sp-6);
	}

	.stat-row__item strong {
		display: block;
		font-family: var(--ff-display);
		font-size: 30px;
		color: var(--c-accent);
	}

	.stat-row__item span {
		font-size: 13px;
		color: var(--c-grey-500);
	}

	/* -- equipo -- */
	.team-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-6);
	}

	.team-card__media {
		border-radius: var(--r-lg);
		overflow: hidden;
		margin-bottom: var(--sp-4);
	}

	.team-card__media img { width: 100%; }

	/* -- contacto -- */
	.contact-layout {
		display: grid;
		grid-template-columns: 1fr .85fr;
		gap: var(--sp-8);
		align-items: start;
	}

	.contact-info {
		background: var(--c-ink);
		color: var(--c-grey-100);
		border-radius: var(--r-lg);
		padding: var(--sp-6);
	}

	.contact-info h3 { color: var(--c-white); margin-bottom: var(--sp-4); }

	.contact-info dl {
		display: grid;
		gap: var(--sp-4);
		margin: 0;
	}

	.contact-info dt {
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: .08em;
		color: var(--c-grey-500);
	}

	.contact-info dd {
		margin: 4px 0 0;
		font-size: 15px;
	}

	.contact-info a { text-decoration: none; }
	.contact-info a:hover { color: var(--c-accent-soft); }

	/* -- legal -- */
	.legal-body {
		max-width: var(--w-container-narrow);
	}

	.legal-body h2 {
		margin-top: var(--sp-7);
		margin-bottom: var(--sp-3);
		font-size: 22px;
	}

	.legal-body p, .legal-body li { color: var(--c-grey-700); }

	/* -- 404 -- */
	.error-panel {
		min-height: 60vh;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: var(--sp-4);
	}

	.error-panel .num {
		font-size: clamp(70px, 12vw, 160px);
		line-height: 1;
	}

	/* -- reveal (visible por defecto; JS puede anadir .is-priming/.is-visible) -- */
	.reveal {
		opacity: 1;
		transform: none;
	}

	.reveal.is-priming {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
	}

	.reveal.is-priming.is-visible {
		opacity: 1;
		transform: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.reveal.is-priming { opacity: 1; transform: none; transition: none; }
		.hero__media img, .hero:hover .hero__media img { transition: none; transform: none; }
	}

	/* ============ desktop-first: pantallas medianas ============ */
	@media (max-width: 1080px) {
		.grid-4 { grid-template-columns: repeat(2, 1fr); }
		.stepped-grid { grid-template-columns: repeat(2, 1fr); }
		.stepped-grid__item:nth-child(3) { transform: translateY(0); }
	}

	/* ============ desktop-first: tablet ============ */
	@media (max-width: 860px) {
		.hero { grid-template-columns: 1fr; min-height: 0; }
		.hero__copy { max-width: none; margin-left: 0; padding: var(--sp-8) var(--sp-5); }
		.hero__media { min-height: 360px; }
		.hero__media img { position: relative; }

		.split, .split--reverse { grid-template-columns: 1fr; }
		.split--reverse .split__media { order: 0; }

		.contact-layout { grid-template-columns: 1fr; }
		.team-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
		.grid-2, .grid-3 { grid-template-columns: 1fr; }
	}

	/* ============ desktop-first: movil ============ */
	@media (max-width: 560px) {
		.section { padding-block: var(--sp-6); }
		.section--roomy { padding-block: var(--sp-7); }
		.stepped-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
		.stepped-grid__item:nth-child(2) { transform: translateY(0); }
		.grid-4 { grid-template-columns: 1fr 1fr; }
		.stat-row { gap: var(--sp-5); }
		.page-header { min-height: 300px; }
	}
}