/* =====================================================================
   Políticas de privacidad — Destino Castilla (LTSM-5691 / LTSM-5451)
   Figma cb3izHyJ3uWqfAzbtHjEGP · página "12. Políticas de privacidad"
     desktop 1366 x 1047 -> 31139:215531 · mobile 375 x 2333.89 -> 31139:215540

   OJO con el node-id: el que trae la descripción de LTSM-5451 (6851-35023)
   NO resuelve — abre el Cover, igual que pasaba con FAQs (LTSM-5461) y con
   Amenidades. Los buenos son los de arriba. Y los frames se llaman
   `faqs1 - pp- desktop/mobile` porque el layout se derivó del de Preguntas
   Frecuentes: el «faqs1 - p...» del Escenario 3 de la historia es el nombre
   literal del frame, no una errata.

   La pantalla es dos bloques y nada más: encabezado (antetítulo dorado +
   título) y el cuerpo legal. Ni acordeones, ni tarjetas, ni CTA.

   Mobile-first, igual que home.css, ubicacion.css, amenidades.css y
   faqs.css: la base es el frame de 375 y el layout de 1366 entra en
   @media (min-width:1200px). El Figma NO trae frame de tablet; el tramo
   intermedio se derivó aquí.

   Segunda pantalla CLARA de Castilla (el frame es #FFFFFF), después de
   FAQs. El header del chrome ya es blanco con borde `--chrome-line` por
   defecto, así que no hace falta variante.

   Los paddings superiores salen de restarle el header sticky al padding del
   frame: 96 - 54 = 42 en mobile y 164 - 84 = 80 en desktop (las alturas del
   header están en chrome.css).

   PENDIENTE (diseño): el cuerpo del frame mobile está en Alexandria Light
   300 y sin estilo tipográfico asignado, mientras que el de desktop lleva
   `Desktop/Text Medium` (Montserrat 500). Se implementa Montserrat en los
   dos, que es la familia del resto del sitio; el mobile parece un descuido.
   ===================================================================== */

.pp-page {
	--pp-accent: #b08524;      /* secondary/base — dorado de marca         */
	--pp-ink:    #14142b;      /* Alias/Grayscale/Header — título          */
	--pp-body:   #4e4b66;      /* Alias/Grayscale/Body — cuerpo legal      */
	--pp-line:   #d9dbe9;      /* Alias/Grayscale/Line — reglas y bordes   */
	--pp-white:  #ffffff;

	--pp-max:    864px;        /* ancho del contenido en el frame de 1366  */
	--pp-parrafo: 24px;        /* aire entre párrafos: una línea del Figma */

	background: var(--pp-white);
	color: var(--pp-ink);
	font-family: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
	overflow-x: hidden;

	/* Es la única pantalla de Castilla cuyo cuerpo lo escribe el administrador,
	   así que es la única que puede quedar más corta que la ventana: una
	   política de tres párrafos dejaba el pie a media pantalla y una banda
	   blanca debajo. Se le da el alto de la ventana menos el header sticky
	   (54 en mobile, 84 desde 1200) para que el pie apoye siempre en el borde.

	   OJO: una sola declaración. El primer intento la escribió dos veces —`vh`
	   y debajo `svh` como mejora progresiva— y el minificador de Autoptimize
	   se quedó con la última, que no reconoce, y tiró las dos: en el fuente
	   estaba y en el CSS servido no aparecía `min-height` por ningún lado. */
	min-height: calc(100vh - 54px);
}
.pp-page *,
.pp-page *::before,
.pp-page *::after { box-sizing: border-box; }
.pp-page * { margin: 0; }
.pp-page img { display: block; max-width: 100%; height: auto; }

/* castilla.css trae reglas globales para `p` dentro del contenido heredado
   (fondo, padding, text-align: center). Se neutralizan aquí, igual que hacen
   chrome.css con el header y faqs.css con su pantalla. */
.pp-page :where(p) {
	background: none;
	padding: 0;
	letter-spacing: normal;
	text-align: left;
}

/* ------------------------------ tipografía ------------------------------ */

.pp-eyebrow {
	font-size: 16px;
	line-height: 1.5;          /* 24px */
	font-weight: 600;
	text-transform: uppercase;
	color: var(--pp-accent);
}
.pp-display {
	font-size: 36px;           /* 48px en el frame de 1366 */
	line-height: 1.1;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--pp-ink);
}

/* ============================== ENCABEZADO ============================== */

.pp-intro {
	display: flex;
	flex-direction: column;
	gap: 8px;                  /* Frame 296 del Figma */
	max-width: var(--pp-max);
	margin: 0 auto;
	padding: 42px 16px 0;      /* 96 del frame − 54 del header sticky */
}

/* ============================ CUERPO LEGAL ============================= */

/* Lo que sale del editor de WordPress. El diseño sólo dibuja párrafos, pero
   el Escenario 1 de la historia exige que el administrador pueda usar
   títulos, viñetas y enlaces: se estilan todos aunque el Figma no los
   muestre, porque el día que el área legal los use tienen que heredar el
   sistema de diseño y no el CSS de Mariscal (que aquí no se carga). */
.pp-content {
	max-width: var(--pp-max);
	margin: 0 auto;
	/* 32 de gap contra el título (Frame 824) y 40 contra el pie, que es el
	   `space` del frame mobile: el diseño no deja más aire ahí. */
	padding: 32px 16px 40px;
	font-size: 16px;
	line-height: 1.5;          /* 24px */
	font-weight: 500;
	color: var(--pp-body);
}

.pp-content > * + * { margin-top: var(--pp-parrafo); }

.pp-content :where(h2, h3, h4) {
	color: var(--pp-ink);
	font-weight: 700;
	line-height: 1.2;
}
.pp-content :where(h2) { font-size: 24px; }
.pp-content :where(h3) { font-size: 20px; }
.pp-content :where(h4) { font-size: 18px; }
/* Un título necesita más aire por arriba que por abajo respecto de su texto. */
.pp-content :where(h2, h3, h4) + * { margin-top: 12px; }
.pp-content > :where(h2, h3, h4) + * { margin-top: 12px; }
.pp-content > :where(* + h2, * + h3, * + h4) { margin-top: 40px; }

.pp-content :where(ul, ol) { padding-left: 24px; }
.pp-content :where(li) { margin-top: 8px; }
.pp-content :where(li):first-child { margin-top: 0; }
.pp-content :where(ul) { list-style: disc; }
.pp-content :where(ol) { list-style: decimal; }
.pp-content :where(li)::marker { color: var(--pp-accent); }

.pp-content :where(a) {
	color: var(--pp-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	/* Los correos y las URLs legales son largos y el contenedor es angosto
	   en mobile: sin esto desbordan la caja. */
	overflow-wrap: anywhere;
}
.pp-content :where(a:hover, a:focus-visible) { text-decoration-thickness: 2px; }

.pp-content :where(strong, b) { font-weight: 700; color: var(--pp-ink); }

.pp-content :where(table) {
	width: 100%;
	border-collapse: collapse;
	display: block;
	overflow-x: auto;
}
.pp-content :where(th, td) {
	border: 1px solid var(--pp-line);
	padding: 12px;
	text-align: left;
}

.pp-content :where(blockquote) {
	border-left: 3px solid var(--pp-accent);
	padding-left: 16px;
}

.pp-content :where(hr) {
	border: 0;
	border-top: 1px solid var(--pp-line);
}

/* ---------------------------- tramo intermedio -------------------------- */
/* Derivado: el Figma no trae frame de tablet. Sólo se suelta el respiro
   lateral, que a 375 va pegado al borde. */
@media (min-width: 768px) {
	.pp-intro   { padding-left: 48px; padding-right: 48px; }
	.pp-content { padding-left: 48px; padding-right: 48px; }
}

/* ------------------------------- 1366 ---------------------------------- */
@media (min-width: 1200px) {
	.pp-page { min-height: calc(100vh - 84px); }
	.pp-intro {
		padding: 80px 0 0;     /* 164 del frame − 84 del header sticky */
	}
	.pp-display { font-size: 48px; }

	.pp-content {
		/* Los dos 48 son el `space` del frame de 1366: uno contra el título y
		   otro contra el pie. El frame no lleva margen interior inferior. */
		padding: 48px 0;
		line-height: 1.4;      /* 22.4px — el frame de 1366 usa 140% */
	}
	.pp-page { --pp-parrafo: 22px; }
}