/* Páginas legales (aviso legal, privacidad, cookies, accesibilidad) — «La letra pequeña, en grande»
   (docs/diseno-paginas/legal.md). Solo se carga en estas cuatro páginas (gb_pieza() = «legal») y todo va acotado a
   .legalx (su <main>) o a la clase de su <body>. Móvil primero. El texto es el oficial, sin tocar: aquí solo cambia
   cómo se lee (medida de línea, apartados numerados, títulos en mayúsculas vistos en minúscula, listas y fichas).
   Todo el movimiento va bajo html.animar (header.php); lo que espera su entrada solo se esconde con .con-revela, que
   pone legal.js: sin JS o con «reducir movimiento», la página se ve completa y quieta. El avance del índice lo mueve el
   navegador con el scroll (main.js mide los tramos una vez). Sin backdrop-filter, sin bucles, sin nada por fotograma. */

.legalx {
	--lx-curva: cubic-bezier(0.2, 0.75, 0.2, 1);
	--lx-ruta: linear-gradient(90deg, #90c947 0%, #5fb0b0 50%, #106189 100%); /* la firma: del campo al mar */
	--lx-texto: #26363b;
	--lx-acento: #cfe8a6;
	--lx-barra: 56px; /* la barra del índice en el móvil */
	padding-top: 0; /* la portada sube por detrás de la cabecera fundida (D-14) */
}
/* Acento de cada apartado: del verde (el primero) al azul (el último), como se va leyendo (--k de 0 a 1) */
.legalx [style*="--k"] { --lx-k: color-mix(in srgb, var(--azul) calc(var(--k, 0) * 100%), var(--verde-oscuro)); }

/* ── Portada en papel ──────────────────────────────────────────────────────── */
.legalx-portada {
	position: relative; isolation: isolate; overflow: hidden;
	padding-block: calc(var(--cabecera) + clamp(20px, 4vw, 52px)) clamp(32px, 4vw, 56px);
	background:
		radial-gradient(55% 70% at 100% 0%, rgb(255 214 120 / 0.16) 0%, transparent 70%),
		radial-gradient(50% 60% at 0% 100%, rgb(144 201 71 / 0.12) 0%, transparent 70%),
		var(--arena);
}
.legalx-portada::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lx-ruta); }
.legalx-portada__dentro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 1040px) { .legalx-portada__dentro { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: clamp(48px, 6vw, 96px); } }
.legalx-portada__texto { min-width: 0; }
.legalx-portada__ante { margin-bottom: 14px; }
.legalx-portada__titulo { font-size: clamp(2.9rem, 1.3rem + 5vw, 6rem); font-weight: 200; line-height: 0.98; letter-spacing: -0.03em; text-wrap: initial; }
.legalx-portada__titulo em { font-style: italic; color: var(--verde-oscuro); }
.legalx-mascara { display: block; overflow: hidden; padding: 0 0.06em 0.12em 0; margin-bottom: -0.12em; }
.legalx-mascara > span { display: inline-block; }
.legalx-portada__entradilla { max-width: 36em; margin-top: 22px; font-size: var(--t-l); line-height: 1.45; color: var(--tinta-suave); }

/* La ficha del texto: empresa, apartados y minutos, fecha e idioma */
.legalx-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 28px 0 0; border-block: 1px solid var(--linea); }
.legalx-datos > div { min-width: 0; padding: 12px 16px 12px 0; }
.legalx-datos > div:nth-child(n+3) { border-top: 1px solid var(--linea); }
.legalx-datos dt { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); }
.legalx-datos dd { margin: 4px 0 0; font-family: var(--f-titulo); font-size: 1.2rem; line-height: 1.2; color: var(--tinta); overflow-wrap: anywhere; }
.legalx-datos .por-confirmar { text-underline-offset: 6px; }
@media (min-width: 1180px) {
	.legalx-datos { display: flex; flex-wrap: wrap; }
	.legalx-datos > div { padding: 14px 20px 14px 0; margin-right: 20px; border-right: 1px solid var(--linea); }
	.legalx-datos > div:last-child { margin-right: 0; border-right: 0; }
	.legalx-datos > div:nth-child(n+3) { border-top: 0; }
}

.legalx-aviso {
	display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 16px 8px 12px; border-radius: 999px;
	background: #fff; box-shadow: inset 0 0 0 1px var(--linea); font-size: var(--t-s); color: var(--tinta);
}
.legalx-aviso .icono { width: 20px; height: 20px; color: var(--azul); }

.legalx-portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.legalx-portada__acciones .boton, .legalx-portada__acciones > a { min-height: 48px; font-size: var(--t-s); }
.legalx-imprimir .icono { width: 20px; height: 20px; }
.legalx-imprimir:hover .icono { transform: none; }

/* «Directo a»: los apartados que más se buscan, en lenguaje llano */
.legalx-atajos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; }
.legalx-atajos__titulo { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); }
.legalx-atajos__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.legalx-atajos__lista a {
	display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px 8px 12px; border-radius: 999px;
	background: #fff; box-shadow: inset 0 0 0 1px var(--linea); color: var(--tinta); font-size: var(--t-s); text-decoration: none; white-space: nowrap;
	transition: color var(--suave), transform var(--suave);
}
.legalx-atajos__lista a span { font-family: var(--f-titulo); color: var(--verde-oscuro); }
.legalx-atajos__lista a:hover { box-shadow: inset 0 0 0 1.5px var(--verde-oscuro); color: var(--verde-oscuro); transform: translateY(-1px); }
@media (pointer: coarse) { .legalx-atajos__lista a { min-height: 44px; } }
@media (max-width: 767px) {
	.legalx-atajos { display: block; }
	.legalx-atajos__titulo { margin-bottom: 8px; }
	.legalx-atajos__lista { flex-wrap: nowrap; margin-inline: calc(var(--hueco) * -1); padding: 2px var(--hueco) 4px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--hueco); scrollbar-width: none; }
	.legalx-atajos__lista::-webkit-scrollbar { display: none; }
	.legalx-atajos__lista li { scroll-snap-align: start; }
}

.legalx-revisar-ir { margin-top: 18px; }
.legalx-revisar-ir a {
	display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1.5px dashed var(--ambar); border-radius: 999px;
	font-size: var(--t-xs); color: var(--tinta-suave); text-decoration: none;
}
.legalx-revisar-ir a:hover { color: var(--tinta); background: rgb(217 154 0 / 0.08); }
.legalx-impresion { display: none; }

/* El sello de la casa (decorativo) */
.legalx-portada__sello { display: none; }
@media (min-width: 1040px) { .legalx-portada__sello { display: block; justify-self: end; width: min(100%, 300px); } }
.legalx-sello { display: block; width: 100%; height: auto; overflow: visible; color: var(--azul-noche); }
.legalx-sello--grande { transform: rotate(-8deg); }
.legalx-sello__aro { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.55; }
.legalx-sello__aro--fino { stroke-width: 0.75; opacity: 0.35; }
.legalx-sello__texto { font-family: var(--f-texto); font-size: 15px; letter-spacing: 0.08em; fill: currentColor; }
.legalx-sello__amp { font-family: var(--f-titulo); font-size: 124px; font-style: italic; font-weight: 200; }
.legalx-sello__giro { transform-box: view-box; transform-origin: 50% 50%; }

/* ── La carpeta: los cuatro textos ─────────────────────────────────────────── */
.legalx-carpeta { margin-top: clamp(28px, 4vw, 44px); }
.legalx-carpeta__lista { display: flex; gap: 12px; margin-inline: calc(var(--hueco) * -1); padding: 4px var(--hueco) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hueco); scrollbar-width: none; }
.legalx-carpeta__lista::-webkit-scrollbar { display: none; }
.legalx-carpeta__lista > li { flex: 0 0 min(80%, 300px); scroll-snap-align: start; }
@media (min-width: 600px) {
	.legalx-carpeta__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 0; padding: 0; overflow: visible; }
}
@media (min-width: 900px) { .legalx-carpeta__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.legalx-doc {
	position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; height: 100%;
	padding: 18px 20px 14px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea);
	color: var(--tinta); text-decoration: none; transition: transform var(--suave), background-color var(--suave);
}
.legalx-doc:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--verde-oscuro), var(--sombra); }
.legalx-doc__n { font-family: var(--f-titulo); font-size: 2.3rem; font-weight: 200; line-height: 0.9; color: rgb(255 255 255 / 0); -webkit-text-stroke: 1px var(--verde-oscuro); }
.legalx-doc__t { font-family: var(--f-titulo); font-size: 1.32rem; font-weight: 400; line-height: 1.12; }
.legalx-doc__d { font-size: var(--t-xs); line-height: 1.35; color: var(--tinta-suave); }
.legalx-doc__min {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; padding-top: 10px;
	border-top: 1px solid var(--linea); font-size: var(--t-xs); letter-spacing: 0.04em; color: var(--verde-oscuro);
}
.legalx-doc__min .icono { width: 18px; height: 18px; transition: transform var(--suave); }
.legalx-doc:hover .legalx-doc__min .icono { transform: translateX(4px); }
.legalx-doc.is-actual { background: var(--azul-noche); color: #fff; box-shadow: none; }
.legalx-doc.is-actual:hover { transform: none; }
.legalx-doc.is-actual .legalx-doc__n { -webkit-text-stroke-color: var(--lx-acento); }
.legalx-doc.is-actual .legalx-doc__d { color: rgb(255 255 255 / 0.78); }
.legalx-doc.is-actual .legalx-doc__min { border-top-color: rgb(255 255 255 / 0.18); color: var(--lx-acento); }
.legalx-doc.is-actual .legalx-doc__min .icono { display: none; }
.legalx-doc__aqui {
	position: absolute; top: 16px; right: 16px; padding: 4px 10px; border-radius: 999px; background: var(--lx-acento);
	color: var(--azul-profundo); font-size: 0.75rem; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase;
}

/* ── El cuerpo: índice y texto ─────────────────────────────────────────────── */
.legalx-cuerpo { padding-block: clamp(32px, 6vw, 88px) clamp(56px, 8vw, 112px); }
@media (min-width: 1040px) {
	.legalx-cuerpo { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); gap: clamp(48px, 6vw, 104px); align-items: start; }
}
.legalx-columna { min-width: 0; max-width: 42rem; }

/* Índice «En esta página»: sin JS, una lista normal encima del texto */
.legalx-indice { position: relative; margin-bottom: 36px; }
.legalx-indice__barra, .legalx-indice__ruta { display: none; }
.legalx-indice__titulo { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--verde-oscuro); }
.legalx-indice__titulo span { color: var(--tinta-suave); letter-spacing: 0.08em; }
.legalx-indice__lista { position: relative; display: grid; gap: 2px; }
.legalx-indice__lista::before { content: ""; position: absolute; left: 14px; top: 10px; bottom: 10px; width: 1px; background: var(--linea); }
.legalx-indice__lista a {
	position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 44px;
	padding: 7px 8px 7px 0; border-radius: 10px; color: var(--tinta-suave); font-size: var(--t-s); line-height: 1.3; text-decoration: none;
	transition: color var(--suave);
}
.legalx-indice__lista a:hover { color: var(--tinta); }
/* Tramo de línea de cada apartado: se llena al leerlo (main.js: --a0/--a1 con animación ligada al scroll; si no, --p) */
.legalx-indice__lista a::before {
	content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; margin-left: -0.5px; border-radius: 2px;
	background: var(--lx-k, var(--verde-oscuro)); transform: scaleY(var(--p, 0)); transform-origin: top; will-change: transform;
}
.legalx-indice__n {
	position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	background: #fff; box-shadow: inset 0 0 0 1px var(--linea); font-family: var(--f-titulo); font-size: 0.95rem; line-height: 1;
	color: var(--lx-k, var(--verde-oscuro)); transition: background-color var(--suave), color var(--suave);
}
.legalx-indice__t { display: block; max-height: calc(1.3em * 3); overflow: hidden; padding-top: 5px; }
.legalx-indice__t--largo { font-size: var(--t-xs); letter-spacing: 0.03em; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.legalx-indice__lista a[aria-current="true"] { color: var(--tinta); }
.legalx-indice__lista a[aria-current="true"] .legalx-indice__n { background: var(--azul-noche); color: #fff; box-shadow: none; }
.legalx-indice__lista a.is-leida:not([aria-current]) .legalx-indice__n { background: var(--lx-k, var(--verde-oscuro)); color: rgb(255 255 255 / 0); box-shadow: none; }
.legalx-indice__lista a.is-leida:not([aria-current]) .legalx-indice__n::after {
	content: ""; position: absolute; inset: 0;
	background: center / 15px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.legalx-indice__pie { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea); }
.legalx-indice__accion {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none;
	color: var(--tinta-suave); font: inherit; font-size: var(--t-s); text-decoration: none; cursor: pointer;
}
.legalx-indice__accion:hover { color: var(--verde-oscuro); }
.legalx-indice__accion .icono { width: 18px; height: 18px; }

@media (min-width: 1040px) {
	.legalx-indice {
		position: sticky; top: calc(var(--cabecera) + 28px); max-height: calc(100vh - var(--cabecera) - 48px); margin-bottom: 0;
		overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--linea) transparent;
	}
}
/* Móvil y tableta con JS: una barra fija bajo la cabecera («03/09 · Propósitos») que despliega la lista */
@media (max-width: 1039px) {
	.js .legalx-indice {
		position: sticky; top: var(--cabecera); z-index: 20; margin: 0 calc(var(--hueco) * -1) 32px;
		background: #fff; box-shadow: 0 1px 0 var(--linea), 0 8px 18px rgb(15 76 92 / 0.06);
	}
	.js .legalx-indice__barra {
		display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--lx-barra); padding: 8px var(--hueco);
		border: 0; background: transparent; color: var(--tinta); text-align: left;
	}
	.legalx-indice__cuenta { flex: none; min-width: 3.4em; font-family: var(--f-titulo); font-size: 1.15rem; color: var(--verde-oscuro); white-space: nowrap; }
	.legalx-indice__actual { flex: 1; min-width: 0; overflow: hidden; font-size: var(--t-s); white-space: nowrap; text-overflow: ellipsis; }
	.legalx-indice__flecha { flex: none; width: 22px; height: 22px; transition: transform var(--suave); }
	.legalx-indice.is-abierto .legalx-indice__flecha { transform: rotate(180deg); }
	.js .legalx-indice__ruta { display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
	.js .legalx-indice__ruta::before { content: ""; position: absolute; inset: 0; background: var(--lx-ruta); transform: scaleX(var(--total, 0)); transform-origin: left; will-change: transform; }
	.js .legalx-indice__panel {
		position: absolute; top: 100%; left: 0; right: 0; max-height: min(66vh, 540px); overflow-y: auto; overscroll-behavior: contain;
		padding: 18px var(--hueco) 14px; background: #fff; box-shadow: 0 1px 0 var(--linea), 0 24px 48px rgb(15 76 92 / 0.18);
		visibility: hidden; opacity: 0; transform: translateY(-6px);
		transition: opacity var(--suave), transform var(--suave), visibility 0s linear 220ms;
	}
	.js .legalx-indice.is-abierto .legalx-indice__panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
	.js .legalx-indice__titulo { display: none; }
	.legalx-indice__lista a { font-size: 1.0625rem; }
	.js .legalx-cap { scroll-margin-top: calc(var(--lx-barra) + 8px); }
}

/* ── El texto ─────────────────────────────────────────────────────────────── */
.legalx-texto { color: var(--lx-texto); }
.legalx-texto p, .legalx-lista li {
	font-size: clamp(1.1875rem, 1.12rem + 0.22vw, 1.3125rem); line-height: 1.65;
	-webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
}
.legalx-texto p { margin-top: 1em; }
.legalx-intro > :first-child, .legalx-cap__cuerpo > :first-child { margin-top: 0; }
.legalx-intro { padding-bottom: clamp(24px, 4vw, 40px); }
.legalx-intro p { font-size: clamp(1.25rem, 1.15rem + 0.35vw, 1.4375rem); color: var(--tinta); }
/* Capitular en la primera línea del texto */
.legalx-capitular::first-letter {
	float: left; margin: 0.04em 0.1em 0 -0.02em; font-family: var(--f-titulo); font-size: 4.25em; font-weight: 200; line-height: 0.8;
	color: var(--verde-oscuro);
}
@supports (initial-letter: 3) {
	.legalx-capitular::first-letter { float: none; margin: 0 0.12em 0 0; font-size: 1em; line-height: 1; -webkit-initial-letter: 3; initial-letter: 3; }
}
/* Solo cambia cómo se ve: la razón social en versalitas, las direcciones web que se pueden partir */
.legalx-razon { font-size: 0.86em; letter-spacing: 0.05em; }
.legalx-dir { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: anywhere; color: var(--tinta); }

/* Apartados */
.legalx-cap { padding-top: clamp(36px, 5vw, 60px); scroll-margin-top: 8px; }
.legalx-cap + .legalx-cap, .legalx-intro + .legalx-cap { margin-top: clamp(12px, 2vw, 20px); border-top: 1px solid var(--linea); }
.legalx-cap:first-child { padding-top: 0; }
.legalx-cap__cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 16px; margin-bottom: clamp(18px, 2.4vw, 26px); }
.legalx-cap__num { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.legalx-cap__num span {
	font-family: var(--f-titulo); font-size: clamp(3.1rem, 2.3rem + 2.4vw, 4.6rem); font-weight: 200; line-height: 0.8; letter-spacing: -0.02em;
	color: rgb(255 255 255 / 0); -webkit-text-stroke: 1.2px var(--lx-k, var(--verde-oscuro));
}
.legalx-cap__num small { font-size: var(--t-s); letter-spacing: 0.14em; color: var(--tinta-suave); }
.legalx-cap__titulo { grid-column: 1 / -1; font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.45rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--tinta); }
.legalx-cap__titulo--largo { font-family: var(--f-texto); font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); line-height: 1.45; letter-spacing: 0.06em; }
/* Títulos en mayúsculas: en minúscula con CSS, la primera letra en mayúscula (el texto sigue siendo el original) */
.legalx-versal { text-transform: lowercase; }
.legalx-versal::first-letter { text-transform: uppercase; }
/* Enlace propio de cada apartado (con JS lo copia) */
.legalx-cap__enlace {
	grid-column: 2; grid-row: 1; align-self: center; position: relative; display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 8px;
	min-height: 44px; padding: 6px 14px 6px 12px; border-radius: 999px; color: var(--tinta-suave); font-size: var(--t-xs); text-decoration: none;
	transition: color var(--suave), background-color var(--suave);
}
.legalx-cap__enlace .icono { grid-area: 1 / 1; width: 18px; height: 18px; transition: transform var(--suave), opacity var(--suave); }
.legalx-cap__enlace .icono--hecho { opacity: 0; transform: scale(0.6); }
.legalx-cap__enlace:hover { background: var(--arena); color: var(--tinta); }
.legalx-cap__enlace.is-copiado { color: var(--verde-oscuro); background: var(--verde-claro); }
.legalx-cap__enlace.is-copiado .icono--enlace { opacity: 0; transform: scale(0.6); }
.legalx-cap__enlace.is-copiado .icono--hecho { opacity: 1; transform: none; }
@media (max-width: 599px) {
	.legalx-cap__enlace { width: 44px; padding: 0; justify-content: center; grid-template-columns: auto; }
	.legalx-cap__enlace-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.legalx-cap__enlace.is-copiado { width: auto; padding-inline: 12px 14px; grid-template-columns: auto auto; }
	.legalx-cap__enlace.is-copiado .legalx-cap__enlace-texto { position: static; width: auto; height: auto; clip: auto; }
}
.legalx-sub { margin-top: 1.6em; font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.6rem); }

/* Listas: puntos del verde al azul. Las de navegadores (cookies), como fichas pequeñas */
.legalx-lista { display: grid; gap: 10px; margin-top: 1em; }
.legalx-lista li { position: relative; padding-left: 28px; line-height: 1.55; }
.legalx-lista li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; background: var(--lx-ruta); }
.legalx-lista .legalx-lista__web { display: grid; gap: 2px; padding: 14px 18px; border-radius: 16px; background: var(--arena); }
.legalx-lista .legalx-lista__web::before { display: none; }
.legalx-lista__web strong { font-family: var(--f-titulo); font-size: 1.2rem; font-weight: 400; line-height: 1.2; color: var(--tinta); }
.legalx-lista__web span { font-size: var(--t-s); line-height: 1.4; color: var(--tinta-suave); }
@media (min-width: 640px) { .legalx-lista:has(> .legalx-lista__web) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Fichas (los tipos de cookies): del verde al azul */
.legalx-fichas { display: grid; gap: 14px; margin-top: 1em; }
.legalx-ficha { position: relative; padding: clamp(20px, 3vw, 28px); border-radius: 22px; background: var(--verde-claro); }
.legalx-ficha:nth-child(2) { background: #eaf4f1; }
.legalx-ficha:nth-child(3) { background: #e8f1f6; }
.legalx-ficha__n {
	position: absolute; top: 14px; right: 20px; font-family: var(--f-titulo); font-size: 2.8rem; font-style: italic; font-weight: 200; line-height: 1;
	color: rgb(255 255 255 / 0); -webkit-text-stroke: 1px var(--verde-oscuro); opacity: 0.75;
}
.legalx-ficha:nth-child(2) .legalx-ficha__n { -webkit-text-stroke-color: #1d6b5c; }
.legalx-ficha:nth-child(3) .legalx-ficha__n { -webkit-text-stroke-color: var(--azul); }
.legalx-ficha__t { padding-right: 56px; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.65rem); }
.legalx-ficha p { margin-top: 10px; font-size: var(--t-m); }

/* Fin del texto: el sello pequeño como firma */
.legalx-fin { display: grid; justify-items: center; gap: 6px; margin-top: clamp(48px, 6vw, 72px); padding-top: 40px; border-top: 1px solid var(--linea); text-align: center; }
.legalx-sello--firma { width: 108px; margin-bottom: 8px; }
.legalx-fin .legalx-fin__t { margin: 0; font-family: var(--f-titulo); font-size: 1.7rem; font-style: italic; line-height: 1.1; color: var(--tinta); }
.legalx-fin .legalx-fin__firma { margin: 0; font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); }
.legalx-fin__arriba {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px;
	color: var(--verde-oscuro); font-size: var(--t-s); text-decoration: none; border-bottom: 1px solid currentColor;
}
.legalx-fin__arriba .icono { width: 18px; height: 18px; transition: transform var(--suave); }
.legalx-fin__arriba:hover .icono { transform: translateY(-3px); }

/* Normas que se citan (con su texto oficial) */
.legalx-normas { margin-top: 40px; padding: clamp(22px, 3vw, 30px); border-radius: 24px; background: var(--verde-claro); }
.legalx-normas__t { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.85rem); }
.legalx-normas__d { margin-top: 6px; font-size: var(--t-s); color: var(--tinta-suave); }
.legalx-normas__lista { margin-top: 14px; }
.legalx-normas__lista a {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; min-height: 56px; padding: 12px 0;
	border-top: 1px solid rgb(61 107 31 / 0.16); color: var(--tinta); text-decoration: none;
}
.legalx-normas__nombre { font-family: var(--f-titulo); font-size: 1.18rem; line-height: 1.25; }
.legalx-normas__lista a:hover .legalx-normas__nombre { text-decoration: underline; text-decoration-color: var(--verde); text-underline-offset: 4px; }
.legalx-normas__fuente { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--verde-oscuro); white-space: nowrap; }
.legalx-normas__fuente .icono { width: 16px; height: 16px; transform: rotate(-45deg); transition: transform var(--suave); }
.legalx-normas__lista a:hover .legalx-normas__fuente .icono { transform: rotate(-45deg) translateX(3px); }
@media (max-width: 479px) { .legalx-normas__lista a { grid-template-columns: minmax(0, 1fr); } }

/* Para revisar antes de publicar (solo demo) */
.legalx-revisar { margin-top: 24px; padding: clamp(20px, 3vw, 28px); border: 1.5px dashed var(--ambar); border-radius: 22px; background: #fffaf0; scroll-margin-top: calc(var(--cabecera) + 72px); }
.legalx-revisar__t { font-size: 1.45rem; }
.legalx-revisar__d { margin-top: 6px; font-size: var(--t-s); color: var(--tinta-suave); }
.legalx-revisar__lista { display: grid; gap: 10px; margin-top: 14px; padding-left: 1.4em; list-style: decimal; }
.legalx-revisar__lista li { padding-left: 4px; font-size: var(--t-s); line-height: 1.45; color: var(--tinta); }
.legalx-revisar__lista li::marker { font-family: var(--f-titulo); color: #8a6200; }

/* ── Despedida: ¿algo no queda claro? y el siguiente texto ──────────────────── */
.legalx-adios { padding-block: clamp(64px, 9vw, 120px) clamp(36px, 5vw, 56px); background: radial-gradient(90% 120% at 100% 0%, #135b6d 0%, var(--azul-noche) 50%, var(--azul-profundo) 100%); color: #fff; }
.legalx-adios__dentro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 960px) { .legalx-adios__dentro { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(48px, 6vw, 96px); align-items: stretch; } }
.legalx-adios .antetitulo { color: var(--lx-acento); }
.legalx-adios__titulo { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.4rem); font-weight: 200; line-height: 1.02; letter-spacing: -0.025em; }
.legalx-adios__titulo em { display: block; font-style: italic; color: var(--lx-acento); }
.legalx-adios__d { max-width: 30em; margin-top: 18px; font-size: var(--t-l); color: rgb(255 255 255 / 0.85); }
.legalx-canales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }
@media (max-width: 520px) { .legalx-canales { grid-template-columns: minmax(0, 1fr); } }
.legalx-canal {
	display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; min-height: 72px; padding: 12px 16px;
	border: 1px solid rgb(255 255 255 / 0.2); border-radius: 18px; color: #fff; text-decoration: none;
	transition: transform var(--suave), background-color var(--suave), border-color var(--suave);
}
.legalx-canal:hover { border-color: rgb(255 255 255 / 0.45); background: rgb(255 255 255 / 0.08); transform: translateY(-2px); }
.legalx-canal__icono { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(255 255 255 / 0.1); color: var(--lx-acento); }
.legalx-canal__icono .icono { width: 22px; height: 22px; }
.legalx-canal--wa .legalx-canal__icono { background: var(--whatsapp); color: #073b1d; }
.legalx-canal strong { font-family: var(--f-titulo); font-size: 1.3rem; font-weight: 400; line-height: 1.15; }
.legalx-canal > span:not(.legalx-canal__icono):not(.solo-lectores) { font-size: var(--t-xs); line-height: 1.35; color: rgb(255 255 255 / 0.78); overflow-wrap: anywhere; }

.legalx-sigue {
	position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr auto auto; gap: 10px; min-height: 280px; overflow: hidden;
	padding: clamp(24px, 3vw, 32px); border-radius: 28px; background: #fff; color: var(--tinta); text-decoration: none;
	transition: transform var(--suave);
}
.legalx-sigue:hover { transform: translateY(-4px); }
.legalx-sigue__ante { font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--verde-oscuro); }
.legalx-sigue__n {
	position: absolute; z-index: -1; top: 0.16em; right: 0.12em; font-family: var(--f-titulo); font-size: clamp(7rem, 4rem + 6vw, 11rem); font-weight: 200; line-height: 0.8; letter-spacing: -0.03em;
	color: rgb(255 255 255 / 0); -webkit-text-stroke: 1.2px rgb(61 107 31 / 0.34); pointer-events: none;
}
.legalx-sigue__t { align-self: end; max-width: 12ch; font-family: var(--f-titulo); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.9rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.02em; }
.legalx-sigue__d { max-width: 26em; font-size: var(--t-s); color: var(--tinta-suave); }
.legalx-sigue__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: var(--t-xs); letter-spacing: 0.04em; color: var(--tinta-suave); }
.legalx-sigue__flecha { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--verde-oscuro); color: #fff; transition: transform var(--suave); }
.legalx-sigue__flecha .icono { width: 22px; height: 22px; }
.legalx-sigue:hover .legalx-sigue__flecha { transform: translateX(4px); }
.legalx-adios__villas { margin-top: clamp(32px, 5vw, 56px); }
.legalx-adios__villas a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--lx-acento); font-size: var(--t-m); text-decoration: none; border-bottom: 1px solid currentColor; }
.legalx-adios__villas .icono { width: 20px; height: 20px; transition: transform var(--suave); }
.legalx-adios__villas a:hover .icono { transform: translateX(4px); }

/* ── Movimiento (solo con html.animar) ─────────────────────────────────────── */
@keyframes legalx-sube { from { transform: translateY(105%); } to { transform: none; } }
@keyframes legalx-aparece { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes legalx-traza { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes legalx-gira { from { opacity: 0; transform: rotate(-36deg); } to { opacity: 1; transform: none; } }
@keyframes legalx-amp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Portada al cargar: el titular sube de su máscara; la entradilla, la ficha y las acciones después (máx. 3) */
.animar .legalx-mascara > span { animation: legalx-sube 0.9s var(--lx-curva) both; }
.animar .legalx-portada__titulo em.legalx-mascara > span { animation-delay: 0.08s; }
.animar .legalx-portada__entradilla { animation: legalx-aparece 0.8s var(--lx-curva) 0.24s both; }
.animar .legalx-datos, .animar .legalx-aviso { animation: legalx-aparece 0.8s var(--lx-curva) 0.32s both; }
.animar .legalx-portada__acciones, .animar .legalx-atajos, .animar .legalx-revisar-ir { animation: legalx-aparece 0.8s var(--lx-curva) 0.4s both; }
.animar .legalx-carpeta__lista > li { animation: legalx-aparece 0.7s var(--lx-curva) 0.36s both; }
.animar .legalx-carpeta__lista > li:nth-child(2) { animation-delay: 0.44s; }
.animar .legalx-carpeta__lista > li:nth-child(n+3) { animation-delay: 0.52s; }
/* El sello se dibuja una vez (SVG pequeño, ≤ 1,2 s) */
.animar .legalx-portada__sello .legalx-sello__aro { stroke-dasharray: 100; animation: legalx-traza 1.2s ease-out 0.2s both; }
.animar .legalx-portada__sello .legalx-sello__giro { animation: legalx-gira 1.2s var(--lx-curva) 0.3s both; }
.animar .legalx-portada__sello .legalx-sello__amp { animation: legalx-amp 0.8s var(--lx-curva) 0.6s both; }
/* Al aparecer (legal.js pone .con-revela e .is-revelada): cabezas de apartado, fin, despedida. Los párrafos, quietos */
.animar .legalx.con-revela [data-revela]:not(.is-revelada) > * { opacity: 0; transform: translateY(18px); }
.animar .legalx [data-revela].is-revelada:not(.sin-entrada) > * { transition: opacity 0.7s ease, transform 0.8s var(--lx-curva); transition-delay: calc(var(--i, 0) * 80ms); }
.animar .legalx [data-revela].is-revelada:not(.sin-entrada) > :nth-child(2) { transition-delay: calc(var(--i, 0) * 80ms + 70ms); }
.animar .legalx [data-revela].is-revelada:not(.sin-entrada) > :nth-child(n+3) { transition-delay: calc(var(--i, 0) * 80ms + 140ms); }
.animar .legalx.con-revela .legalx-fin:not(.is-revelada) .legalx-sello__aro { stroke-dasharray: 100; stroke-dashoffset: 100; }
.animar .legalx-fin.is-revelada:not(.sin-entrada) .legalx-sello__aro { stroke-dasharray: 100; animation: legalx-traza 1.2s ease-out 0.1s both; }
.animar .legalx-fin.is-revelada:not(.sin-entrada) .legalx-sello__giro { animation: legalx-gira 1.2s var(--lx-curva) 0.15s both; }
/* La tarjeta «Sigue leyendo» entra entera con transform (sin fundir el bloque grande) */
.animar .legalx.con-revela .legalx-sigue[data-revela]:not(.is-revelada) { transform: translateY(24px); }
.animar .legalx.con-revela .legalx-sigue[data-revela]:not(.is-revelada) > * { transform: none; }
.animar .legalx .legalx-sigue[data-revela].is-revelada:not(.sin-entrada) { transition: transform 0.8s var(--lx-curva); }

/* Índice: el avance lo mueve el navegador con el scroll (va con el dedo: también con «reducir movimiento») */
@supports (animation-timeline: scroll()) {
	@keyframes legalx-llena-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
	@keyframes legalx-llena-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
	html .legalx-indice.con-linea .legalx-indice__lista a::before { animation: legalx-llena-y linear both; animation-timeline: scroll(root); animation-range: var(--a0, 0px) var(--a1, 1px); animation-duration: auto !important; animation-delay: 0s !important; }
	html .legalx-indice.con-linea .legalx-indice__ruta::before { animation: legalx-llena-x linear both; animation-timeline: scroll(root); animation-range: var(--r0, 0px) var(--r1, 1px); animation-duration: auto !important; animation-delay: 0s !important; }
}

/* ── Imprimir o guardar en PDF: solo el título, la ficha y el texto, en negro ── */
@media print {
	@page { margin: 16mm 18mm; }
	:is(.pagina-privacy-policy, .pagina-cookie-policy, .pagina-terms-and-services, .pagina-accesibility-statement) :is(.cabecera, .pie, .contacto-form, .whatsapp-flotante, .aviso-demo, .saltar) { display: none !important; }
	:is(.pagina-privacy-policy, .pagina-cookie-policy, .pagina-terms-and-services, .pagina-accesibility-statement) { background: #fff; color: #000; }
	.legalx *, .legalx *::before, .legalx *::after { animation: none !important; transition: none !important; }
	.legalx-carpeta, .legalx-indice, .legalx-portada__sello, .legalx-portada__acciones, .legalx-atajos, .legalx-revisar-ir, .legalx-aviso .icono,
	.legalx-adios, .legalx-cap__enlace, .legalx-fin__arriba, .legalx-revisar, .legalx-normas__d, .legalx-normas__fuente .icono { display: none !important; }
	.legalx [data-revela] > *, .legalx-sigue { opacity: 1 !important; transform: none !important; }
	.legalx-portada { padding: 0 0 10pt; background: none; overflow: visible; }
	.legalx-portada::after { display: none; }
	.legalx-portada__ante { margin-bottom: 4pt; font-size: 8pt; color: #333; }
	.legalx-portada__titulo { font-size: 28pt; line-height: 1.05; color: #000; }
	.legalx-portada__titulo em { color: #000; }
	.legalx-mascara { overflow: visible; }
	.legalx-portada__entradilla { margin-top: 6pt; font-size: 10pt; color: #333; }
	.legalx-datos { margin-top: 8pt; border-color: #999; }
	.legalx-datos > div { padding: 4pt 12pt 4pt 0; border-color: #999 !important; }
	.legalx-datos dt { font-size: 7pt; color: #333; }
	.legalx-datos dd { font-size: 10pt; color: #000; }
	.legalx-impresion { display: block; margin-top: 6pt; font-size: 8pt; color: #555; }
	.legalx-cuerpo { display: block; max-width: none; padding: 0; }
	.legalx-columna { max-width: none; }
	.legalx-texto, .legalx-texto * { color: #000 !important; }
	.legalx-texto p, .legalx-lista li { font-size: 10.5pt; line-height: 1.5; orphans: 3; widows: 3; -webkit-hyphens: auto; hyphens: auto; }
	.legalx-intro p { font-size: 11pt; }
	.legalx-capitular::first-letter { initial-letter: 2; -webkit-initial-letter: 2; }
	.legalx-cap { padding-top: 12pt; border-color: #bbb !important; }
	.legalx-cap__cabeza { margin-bottom: 6pt; break-after: avoid; break-inside: avoid; }
	.legalx-cap__num span { font-size: 20pt; -webkit-text-stroke: 0.6pt #000; }
	.legalx-cap__num small { font-size: 8pt; }
	.legalx-cap__titulo { font-size: 14pt; }
	.legalx-cap__titulo--largo { font-size: 10pt; }
	.legalx-ficha, .legalx-lista__web { background: none !important; border: 0.5pt solid #999; break-inside: avoid; }
	.legalx-lista li::before { background: #000; }
	.legalx .por-confirmar { text-decoration: none; }
	.legalx-fin { margin-top: 16pt; padding-top: 10pt; border-color: #bbb; break-inside: avoid; }
	.legalx-sello--firma { width: 54pt; color: #000; }
	.legalx-fin__t { font-size: 12pt; }
	.legalx-normas { margin-top: 12pt; padding: 8pt 0 0; border-top: 0.5pt solid #999; border-radius: 0; background: none; break-inside: avoid; }
	.legalx-normas__t { font-size: 11pt; }
	.legalx-normas__lista a { min-height: 0; padding: 3pt 0; border: 0; }
	.legalx-normas__nombre { font-size: 9.5pt; }
	.legalx-normas__lista a::after { content: attr(href); grid-column: 1 / -1; font-size: 8pt; color: #555; }
}