/* =================================================================
   legal.css — page-legal.php (Template Name: Legal, Figma 33-Legals-Desktop,
   node-id=4508-18185, archivo BdUd1g6K6cuVm4036Z5p6p).
   Página estática, un solo WYSIWYG (the_content()) — reusa .hero-title/.hero-desc (base.css)
   para el hero, mismo criterio que contact.css/search.css.
   Breakpoint estándar 80rem (§12).
   ================================================================= */

@layer views {

	/* ---- Wrap de página: mismo patrón que .news-page/.contact-page (§12.41). ---- */
	.legal-page {
		padding-inline: clamp(var(--space-m), 6vw, 7.5rem);
	}
	@media (width >= 80rem) {
		.legal-page { padding-inline: 0; }
	}
	.legal-page__inner {
		max-width: var(--container);
		margin-inline: auto;
	}

	/* ---- Hero: título + "Last updated", borde inferior full-bleed (mismo truco que
	   .news-header/.contact-hero). ---- */
	.legal-hero {
		position: relative;
		padding-block: 3rem;
	}
	.legal-hero::after {
		content: "";
		position: absolute;
		left: 50%; width: 100vw; margin-left: -50vw;
		bottom: 0;
		border-bottom: 1px solid #e5e5e5;
	}
	/* max-width vive en un wrapper aparte, NO en .legal-hero — el truco full-bleed de arriba
	   (left:50%/width:100vw/margin-left:-50vw) asume que .legal-hero llena el ancho de
	   .legal-page__inner (centrado en el viewport); si .legal-hero tuviera su propio max-width,
	   ese 50% se calcula sobre SU caja angosta, no el viewport, y la línea queda descentrada/corta
	   (bug real reportado por el usuario). */
	.legal-hero__inner {
		max-width: 586px;
	}
	@media (48rem <= width < 80rem) {
		.legal-hero__inner { max-width: 386px; }
	}
	@media (width < 48rem) {
		.legal-hero__inner { max-width: 286px; }
	}
	.legal-hero__desc {
		max-width: 585px;
	}
	@media (width < 48rem) {
		.legal-hero { padding-block: 1.5rem; }
	}

	/* ---- Contenido (the_content()): columna única centrada, 790px (spec Figma). ---- */
	.legal-content {
		max-width: 790px;
		margin-inline: auto;
		padding-block: clamp(3rem, 2rem + 5vw, 5rem);
		font-family: var(--font-sans);
		font-size: 20px;
		line-height: 32px;
		color: var(--dia-color-text-primary, #121212);
	}
	.legal-content > :first-child { margin-top: 0; }
	.legal-content h1,
	.legal-content h2 {
		margin-top: 3rem; /* 48px entre secciones, spec Figma */
	}
	.legal-content p,
	.legal-content ul,
	.legal-content ol {
		margin-top: 1.5rem; /* 24px, spec Figma */
	}
	.legal-content h1 + p,
	.legal-content h1 + ul,
	.legal-content h1 + ol,
	.legal-content h2 + p,
	.legal-content h2 + ul,
	.legal-content h2 + ol {
		margin-top: 1.5rem; /* título → párrafo, spec Figma */
	}
	.legal-content h1 {
		margin-bottom: 0;
		font-weight: 700;
		font-size: 40px;
		line-height: 50px;
		letter-spacing: -1px;
	}
	.legal-content h2 {
		margin-bottom: 0;
		font-weight: 700;
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -.5px;
	}
	.legal-content p { margin-bottom: 0; }
	.legal-content ul,
	.legal-content ol {
		margin-bottom: 0;
		padding-left: 1.5rem;
	}
	.legal-content li + li { margin-top: 8px; }
	.legal-content a {
		color: var(--dia-color-brand-secondary, #3e8391);
		text-decoration: underline;
	}
	.legal-content strong { font-weight: 700; }
	.legal-content hr {
		margin: 3rem 0; /* 48px, spec Figma */
		border: 0;
		border-top: 1px solid #e5e5e5;
	}

	@media (width < 48rem) {
		.legal-content {
			font-size: 16px;
			line-height: 24px;
		}
		.legal-content h1 { font-size: 28px; line-height: 36px; }
		.legal-content h2 { font-size: 20px; line-height: 28px; }
	}
}