/* =========================================================================
   XTRALIFE — Páginas legales (.pg-legal)

   Diseño para las páginas de texto largo hechas con el maquetador: Privacy
   Policy, Terms of Service, Shipping Policy… El contenedor del maquetador
   lleva la clase personalizada `pg-legal` (pestaña «Clases CSS» del
   contenedor) y esta hoja se encola sola en cuanto esa clase aparece en el
   layout guardado (ver pz_uses_legal_styles() en inc/site-chrome.php).

   El bloque de texto pasa a ser una ficha blanca centrada de 1120 px (ver
   --pz-legal-width), con titulares en el verde de marca sobre filete dorado y
   párrafos con interlineado alto. Solo hace falta que el texto use <h2> y <p>
   de verdad, nada de <br> encadenados.

   Por qué el prefijo `.oz-pb-root`:
   el CSS nativo del maquetador (assets/native/texto.css, servido dentro de
   uploads/oz-page-builder/global/global.css) fija tipografía y márgenes con
   `html body .oz-pb-root .oz-pb-text …` — dos clases y tres elementos. Con
   la clase de página delante suman tres clases y ganan por especificidad sin
   necesidad de `!important`.

   Tokens de marca (los define assets/css/pz-header.css):
     --xl-green  #0e4d2c   verde oscuro
     --xl-gold   degradado dorado (--xl-gold-a / --xl-gold-b, los extremos)
     --xl-ink    #1e2a22   texto
     --xl-muted  #5d6b62   texto secundario
     --xl-line   #e2e6df   filetes
     --xl-sand   #e9ebdb   arena
   ========================================================================= */

.oz-pb-root .pg-legal {
	/* Tokens locales: los tamaños se afinan en un solo sitio y el responsive
	   de abajo solo tiene que redefinir estas variables. */
	--pz-legal-width: 1120px;
	--pz-legal-body: 1.0625rem;
	--pz-legal-lead: 1.125rem;
	--pz-legal-h2: clamp(1.25rem, 1.9vw, 1.5rem);
	--pz-legal-text: #3a4740;
}

/* -------------------------------------------------------------------------
   La ficha

   `.oz-pb-text` es el div que envuelve el HTML del bloque de texto. Se le da
   el papel de tarjeta para que el texto deje de ir a sangre de lado a lado y
   quede sobre una superficie con borde y sombra.
   ------------------------------------------------------------------------- */
.oz-pb-root .pg-legal .oz-pb-text {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--pz-legal-width);
	margin-inline: auto;
	padding: clamp(30px, 4vw, 64px) clamp(22px, 4.4vw, 76px) clamp(26px, 4vw, 60px);
	background: var(--pz-white, #ffffff);
	border: 1px solid var(--xl-line, #e2e6df);
	border-radius: 20px;
	box-shadow: 0 18px 48px rgba(14, 77, 44, .08);
	color: var(--pz-legal-text);
	font-size: var(--pz-legal-body);
	line-height: 1.8;
	overflow: hidden; /* recorta la cinta dorada a las esquinas redondeadas */
}

/* Cinta dorada superior: el mismo degradado de los botones de marca. */
.oz-pb-root .pg-legal .oz-pb-text::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background-image: var(--xl-gold, linear-gradient(90deg, #bd8f32 0%, #d09f3b 100%));
}

/* -------------------------------------------------------------------------
   Tipografía
   ------------------------------------------------------------------------- */
.oz-pb-root .pg-legal .oz-pb-text p {
	margin: 0 0 1.15em;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* Entradilla: el primer párrafo, antes del primer titular, va un punto más
   grande y en el color de texto principal. */
.oz-pb-root .pg-legal .oz-pb-text > p:first-of-type {
	color: var(--xl-ink, #1e2a22);
	font-size: var(--pz-legal-lead);
	line-height: 1.75;
}

/* Frase que presenta una lista («You must not:», «Partial refunds are granted
   for:»). Se pega a su lista para que las dos se lean como una sola unidad. */
.oz-pb-root .pg-legal .oz-pb-text p.pz-legal-intro {
	margin-bottom: .5em;
	color: var(--xl-ink, #1e2a22);
	font-weight: 600;
}

.oz-pb-root .pg-legal .oz-pb-text h2,
.oz-pb-root .pg-legal .oz-pb-text h3 {
	font-family: var(--OZ-Font-Headings, inherit);
	color: var(--xl-green, #0e4d2c);
	letter-spacing: -0.01em;
	/* Deja sitio bajo la cabecera fija cuando se salta a un #ancla. */
	scroll-margin-top: calc(var(--pz-header-h, 118px) + 20px);
}

.oz-pb-root .pg-legal .oz-pb-text h2 {
	position: relative;
	margin: 2.4em 0 .7em;
	padding-top: 1.5em;
	border-top: 1px solid var(--xl-line, #e2e6df);
	font-size: var(--pz-legal-h2);
	font-weight: 700;
	line-height: 1.3;
}

/* Marca dorada sobre cada titular, montada en el filete. */
.oz-pb-root .pg-legal .oz-pb-text h2::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 42px;
	height: 3px;
	border-radius: 2px;
	background-image: var(--xl-gold, linear-gradient(90deg, #bd8f32 0%, #d09f3b 100%));
}

/* El primer titular no separa nada: viene justo detrás de la entradilla, así
   que se queda sin filete ni marca. */
.oz-pb-root .pg-legal .oz-pb-text h2:first-child,
.oz-pb-root .pg-legal .oz-pb-text > p:first-of-type + h2 {
	margin-top: 1.6em;
	padding-top: 0;
	border-top: 0;
}

.oz-pb-root .pg-legal .oz-pb-text h2:first-child::before,
.oz-pb-root .pg-legal .oz-pb-text > p:first-of-type + h2::before {
	display: none;
}

.oz-pb-root .pg-legal .oz-pb-text h3 {
	margin: 1.8em 0 .55em;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
}

.oz-pb-root .pg-legal .oz-pb-text strong,
.oz-pb-root .pg-legal .oz-pb-text b {
	color: var(--xl-ink, #1e2a22);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   Listas
   ------------------------------------------------------------------------- */
.oz-pb-root .pg-legal .oz-pb-text ul,
.oz-pb-root .pg-legal .oz-pb-text ol {
	margin: 0 0 1.15em;
	padding-left: 1.35em;
}

.oz-pb-root .pg-legal .oz-pb-text li {
	margin-bottom: .5em;
}

.oz-pb-root .pg-legal .oz-pb-text li::marker {
	color: var(--xl-gold-a, #bd8f32);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   Enlaces

   El nativo del maquetador deja los enlaces en `color:inherit` y sin
   subrayado. En un texto legal hay URLs y correos por todas partes, así que
   aquí sí conviene que se distingan del texto corrido.
   ------------------------------------------------------------------------- */
.oz-pb-root .pg-legal .oz-pb-text a,
.oz-pb-root .pg-legal .oz-pb-text a:link,
.oz-pb-root .pg-legal .oz-pb-text a:visited {
	color: var(--xl-green, #0e4d2c);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(189, 143, 50, .55);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere; /* una URL larga no desborda la ficha */
	transition: color .18s var(--pz-ease, ease), text-decoration-color .18s var(--pz-ease, ease);
}

.oz-pb-root .pg-legal .oz-pb-text a:hover,
.oz-pb-root .pg-legal .oz-pb-text a:focus,
.oz-pb-root .pg-legal .oz-pb-text a:active {
	color: var(--xl-orange, #f26522);
	text-decoration: underline;
	text-decoration-color: currentColor;
}

/* -------------------------------------------------------------------------
   Otros bloques del texto
   ------------------------------------------------------------------------- */
.oz-pb-root .pg-legal .oz-pb-text blockquote {
	margin: 1.6em 0;
	padding: .2em 0 .2em 1.1em;
	border-left: 3px solid var(--xl-gold-a, #bd8f32);
	color: var(--xl-muted, #5d6b62);
	font-style: italic;
}

.oz-pb-root .pg-legal .oz-pb-text hr {
	height: 1px;
	margin: 2.2em 0;
	border: 0;
	background: var(--xl-line, #e2e6df);
}

.oz-pb-root .pg-legal .oz-pb-text table {
	width: 100%;
	margin: 1.6em 0;
	border-collapse: collapse;
	font-size: .9375rem;
}

.oz-pb-root .pg-legal .oz-pb-text th,
.oz-pb-root .pg-legal .oz-pb-text td {
	padding: .6em .8em;
	border: 1px solid var(--xl-line, #e2e6df);
	text-align: left;
	vertical-align: top;
}

.oz-pb-root .pg-legal .oz-pb-text th {
	background: var(--xl-sand, #e9ebdb);
	color: var(--xl-green, #0e4d2c);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   Responsive (breakpoints del maquetador: 1366 / 1024 / 480)
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.oz-pb-root .pg-legal {
		/* Por debajo del ancho fijo la ficha pasa a ocupar toda la columna. */
		--pz-legal-width: 100%;
		--pz-legal-lead: 1.0625rem;
	}
}

@media (max-width: 480px) {
	.oz-pb-root .pg-legal {
		--pz-legal-body: 1rem;
		--pz-legal-lead: 1rem;
	}

	.oz-pb-root .pg-legal .oz-pb-text {
		border-radius: 14px;
		line-height: 1.7;
	}

	.oz-pb-root .pg-legal .oz-pb-text h2 {
		margin-top: 2em;
		padding-top: 1.25em;
	}
}

/* -------------------------------------------------------------------------
   Impresión: estas páginas se imprimen y se guardan en PDF más de lo que
   parece, así que fuera sombras, bordes y fondos.
   ------------------------------------------------------------------------- */
@media print {
	.oz-pb-root .pg-legal .oz-pb-text {
		max-width: none;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.oz-pb-root .pg-legal .oz-pb-text::before {
		display: none;
	}

	.oz-pb-root .pg-legal .oz-pb-text h2 {
		break-after: avoid;
	}
}