@charset "UTF-8";
/* ox2-legal.css — páginas legales (aviso legal, privacidad, cookies, accesibilidad).
   Páginas de lectura: la misma mano que la portada (blanco, Mona Sans, precisión) y ningún efecto.
   Se carga DESPUÉS de ox2.css y solo en esas cuatro páginas. Todo va en rem/em para que el texto
   crezca con el tamaño de letra que tenga puesto cada persona en su navegador.

   Retícula: dos columnas que recorren la página entera. A la izquierda, los rótulos y el índice;
   a la derecha, lo que se lee. Por debajo de 62.5em (1000 px con la letra normal), una sola columna y el
   índice plegable. Los cortes van en em para que quien agranda la letra del navegador pase antes a una columna.

   Clases para localizar lo provisional:  .por-completar  (dato o tarea pendiente)  ·  .nota-borrador */

html { scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body.lg-pag { font-size: 1.0625rem; line-height: 1.6; }

/* ---------- foco: muy visible, también sobre la cápsula oscura ---------- */
.lg-pag :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.lg-pag .isla :focus-visible { outline-color: #8ec2ee; outline-offset: 2px; border-radius: 18px; }
.lg-pag .isla[data-over="dark"] :focus-visible { outline-color: var(--blue); }
.lg-pag .isla-links { overflow: visible; }   /* en la portada recorta (por su transición); aquí cortaría el aro de foco */
.lg-pag main:focus { outline: 0; }

/* ---------- saltar al contenido ---------- */
.lg-saltar { position: fixed; z-index: 200; top: 12px; left: 12px; padding: .8rem 1.2rem; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 650; font-size: 1rem; line-height: 1.2; transform: translateY(-220%); }
.lg-saltar:focus { transform: none; }
.lg-pag .lg-saltar:focus-visible { outline-offset: 2px; border-radius: 12px; }

/* ---------- la hoja ---------- */
.lg { --c1: calc(36vw - var(--pad)); --medida: 32.5em; --pc: #b53a12;
  position: relative; background: var(--bg); padding: 0 var(--pad); }
.lg-cab { padding-top: clamp(6.25rem, 13vh, 9rem); }

/* ---------- las cuatro páginas, y la vuelta a la portada ---------- */
.lg-nav ul { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem 1.75rem; }
.lg-nav a { position: relative; display: block; padding: .7rem 0 .8rem; font-size: .9375rem; line-height: 1.4; font-weight: 560; letter-spacing: -.006em; color: var(--ink2); transition: color .2s; }
.lg-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hair); transition: background-color .2s; }
.lg-nav a:hover { color: var(--ink); }
.lg-nav a:hover::after { background: var(--ink3); }
.lg-nav a[aria-current="page"] { color: var(--ink); font-weight: 650; }
.lg-nav a[aria-current="page"]::after { background: var(--ink); }
.lg-nav .lg-volver { margin-left: auto; }
.lg-nav .lg-volver a::after { content: none; }
.lg-nav .lg-volver a:hover { color: var(--blue); }

/* ---------- el título: la voz de la web ---------- */
.lg-h1 { margin-top: clamp(1.5rem, 4.4vh, 3rem); margin-left: -.035em; max-width: 15em; font-size: clamp(2.375rem, 5vw, 5.25rem); }
.lg-h1 .l { display: block; }
.lg-h1 em.l { font-style: normal; }
.lg-fecha { margin-top: clamp(1.1rem, 2.6vh, 1.6rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.5rem; font-size: .9375rem; line-height: 1.4; color: var(--ink2); }
.lg-imprimir { font-size: inherit; font-weight: 560; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1.5px; text-underline-offset: .28em; padding: .35rem 0; transition: text-decoration-color .2s; }
.lg-imprimir:hover { text-decoration-color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  /* cada línea sube desde detrás de su propio borde. La columna flex evita que los márgenes negativos (que compensan el
     relleno del recorte) se fundan entre sí: así el título ocupa exactamente lo mismo con y sin movimiento */
  .lg-h1 { display: flex; flex-direction: column; align-items: flex-start; }
  .lg-h1 .l { overflow: clip; padding: .12em .04em .16em; margin: -.12em -.04em -.16em; }
  .lg-h1 .l > span { display: block; animation: lg-sube .95s var(--e-out) both; }
  .lg-h1 .l + .l > span { animation-delay: .09s; }
}
@keyframes lg-sube { from { transform: translateY(112%); } }

/* ---------- «En pocas palabras»: lo que va a leer casi todo el mundo ---------- */
.lg-resumen { margin-top: clamp(2rem, 5.4vh, 3.75rem); padding: clamp(1.5rem, 3.6vh, 2.5rem) 0 clamp(2.75rem, 7.5vh, 5rem); border-top: 1px solid var(--line); display: grid; grid-template-columns: var(--c1) minmax(0, 1fr); }
.lg-rot { font-size: .9375rem; line-height: 1.4; font-weight: 650; letter-spacing: -.006em; color: var(--ink); }
.lg-resumen .lg-rot { padding-top: .42em; }
.lg-resumen p { max-width: 26em; font-size: clamp(1.375rem, 1.95vw, 2.125rem); line-height: 1.2; font-weight: 640; font-stretch: 104%; letter-spacing: -.033em; text-wrap: pretty; }
.lg-resumen mark { background: var(--blue); color: #fff; padding: .02em .17em .07em; margin: 0 .05em 0 -.05em; border-radius: .17em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lg-resumen a { color: inherit; text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: .075em; text-underline-offset: .16em; }
.lg-resumen a:hover { color: var(--blue); }

/* ---------- cuerpo: índice que acompaña + columna de lectura ---------- */
.lg-cuerpo { border-top: 1px solid var(--line); padding-top: clamp(1.5rem, 3.6vh, 2.5rem); display: grid; grid-template-columns: var(--c1) minmax(0, 1fr); align-items: start; }

.lg-indice { position: sticky; top: 5.75rem; max-height: calc(100vh - 7rem); max-height: calc(100svh - 7rem); overflow-y: auto; width: min(100% - 2.5rem, 19.5rem); padding: .5em 0 1rem; scrollbar-width: thin; }
.lg-indice summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; }
.lg-indice summary::-webkit-details-marker { display: none; }
.lg-indice ol { margin-top: .85rem; padding-left: 1.85em; }
.lg-indice li { font-size: .9375rem; line-height: 1.34; }
.lg-indice li::marker { color: var(--ink2); font-weight: 500; font-variant-numeric: normal; }   /* el navegador pone cifras tabulares, que en Mona Sans traen el cero barrado */
.lg-indice li a { display: block; padding: .34rem 0 .34rem .1em; font-weight: 500; letter-spacing: -.006em; color: var(--ink2); transition: color .15s; }
.lg-indice li a:hover { color: var(--ink); }
.lg-indice li a[aria-current] { color: var(--ink); }
.lg-indice li:has(> a[aria-current])::marker { color: var(--blue); font-weight: 700; }

.lg-texto { min-width: 0; padding-top: .28rem; font-size: 1.125rem; line-height: 1.62; letter-spacing: -.009em; }
.lg-texto > section + section { margin-top: clamp(3rem, 8.5vh, 5.25rem); }
.lg-texto :where(p, ul, ol, h3) { max-width: var(--medida); }
.lg-texto h2 { position: relative; max-width: 17em; font-size: clamp(1.625rem, 2.5vw, 2.625rem); line-height: 1.04; font-weight: 760; font-stretch: 108%; letter-spacing: -.038em; text-wrap: balance; }
.lg-texto h2 .n { color: var(--blue); }
.lg-texto h3 { margin-top: 2.4rem; font-size: 1.25rem; line-height: 1.22; font-weight: 700; font-stretch: 104%; letter-spacing: -.024em; }
.lg-texto p { margin-top: 1.05rem; text-wrap: pretty; }
.lg-texto h2 + p, .lg-texto h2 + ul, .lg-texto h2 + ol { margin-top: 1.6rem; }
.lg-texto h3 + p { margin-top: .7rem; }
.lg-texto b, .lg-texto strong { font-weight: 660; }
.lg-texto a { color: var(--blue); text-decoration: underline; text-decoration-thickness: .075em; text-underline-offset: .19em; overflow-wrap: anywhere; transition: text-decoration-thickness .15s; }
.lg-texto a:hover { text-decoration-thickness: .15em; }

.lg-texto ul { margin-top: 1.05rem; padding-left: 1.5em; list-style-type: "–\2002"; }
.lg-texto ol { margin-top: 1.05rem; padding-left: 1.5em; }
.lg-texto li + li { margin-top: .5rem; }
.lg-texto li::marker { color: var(--ink2); font-weight: 600; font-variant-numeric: normal; }
.lg-texto ol li { padding-left: .25em; }

/* frase que manda en un apartado (la situación de cumplimiento, por ejemplo) */
.lg-texto .lg-dicho { max-width: 25em; font-size: clamp(1.3125rem, 1.75vw, 1.75rem); line-height: 1.26; font-weight: 600; font-stretch: 103%; letter-spacing: -.026em; }
.lg-texto .lg-dicho strong { font-weight: 760; color: var(--blue); }

/* ---------- fichas (pares rótulo–dato) y tablas: filetes finos, sin rejilla ---------- */
.lg-ficha { margin-top: 1.75rem; max-width: 47rem; border-top: 1.5px solid var(--ink); }
.lg-ficha > div { display: grid; grid-template-columns: minmax(8.5rem, 15rem) minmax(0, 1fr); gap: .15rem 1.5rem; padding: .82rem 0 .86rem; border-bottom: 1px solid var(--line); }
.lg-ficha dt { font-size: .9375rem; line-height: 1.5; font-weight: 650; letter-spacing: -.006em; padding-top: .16rem; }
.lg-ficha dd { font-size: 1.0625rem; line-height: 1.5; min-width: 0; }

.lg-tabla { margin-top: 1.75rem; width: 100%; max-width: 62rem; border-collapse: collapse; font-size: 1rem; line-height: 1.46; letter-spacing: -.006em; }
.lg-tabla th, .lg-tabla td { text-align: left; vertical-align: top; padding: .86rem 1.5rem .9rem 0; border-bottom: 1px solid var(--line); }
.lg-tabla th:last-child, .lg-tabla td:last-child { padding-right: 0; }
.lg-tabla thead th { vertical-align: bottom; padding-top: 0; padding-bottom: .6rem; font-size: .875rem; line-height: 1.3; font-weight: 650; color: var(--ink2); border-bottom: 1.5px solid var(--ink); }
.lg-tabla tbody th { font-weight: 650; width: 30%; }
.lg-tabla.es-ancha tbody th { width: 24%; }
.lg-tabla .lg-no { font-weight: 650; white-space: nowrap; }
.lg-tabla thead th:last-child { white-space: nowrap; }
.lg-tabla td { min-width: 0; }
.lg-tabla .lg-dir { overflow-wrap: anywhere; }   /* direcciones largas: que puedan partirse antes que desbordar */

/* ---------- los tres ceros de la página de cookies ---------- */
.lg-texto .lg-ceros { list-style: none; max-width: 47rem; margin-top: 2rem; padding: 1.1rem 0 1.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 2rem; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line); }
.lg-texto .lg-ceros li { margin: 0; font-size: 1rem; line-height: 1.3; font-weight: 600; letter-spacing: -.012em; }
.lg-texto .lg-ceros b { display: block; margin: 0 0 .06em -.02em; font-size: clamp(4.5rem, 8.2vw, 8.25rem); line-height: .86; font-weight: 800; font-stretch: 114%; letter-spacing: -.05em; color: var(--blue); }

/* ---------- huecos por completar: discretos, pero inconfundibles ---------- */
.por-completar { display: inline-block; max-width: 100%; vertical-align: baseline; padding: .12em .6em .16em; border: 1.5px dashed var(--pc); border-radius: .5em; background: #fff6f0; color: var(--ink); font-size: .9375rem; line-height: 1.38; font-weight: 500; font-stretch: 100%; letter-spacing: -.004em; text-wrap: wrap; overflow-wrap: anywhere; }
.por-completar b { font-weight: 700; color: var(--pc); }
.por-completar i { font-style: normal; color: #5c5c61; }
.lg-texto p.por-completar { display: block; width: fit-content; max-width: var(--medida); margin-top: 1.25rem; padding: .7em .95em .78em; }
.lg-texto li > p.por-completar { margin-top: .6rem; }

.lg-texto .nota-borrador { margin-top: clamp(3rem, 8vh, 4.5rem); padding-top: 1rem; max-width: var(--medida); border-top: 1px dashed var(--pc); font-size: .9375rem; line-height: 1.45; color: var(--ink2); }

/* ---------- cierre: las otras páginas ---------- */
.lg-fin { margin-top: clamp(3.5rem, 10vh, 6.5rem); padding: clamp(1.5rem, 3.6vh, 2.5rem) 0 clamp(4.5rem, 14vh, 9rem); border-top: 1px solid var(--line); display: grid; grid-template-columns: var(--c1) minmax(0, 1fr); align-items: start; }
.lg-cab + .lg-fin { margin-top: 0; border-top: 0; }   /* página de error: el cierre va justo debajo de la cabecera */
.lg-fin .lg-rot { padding-top: .6em; }
.lg-fin ul { list-style: none; }
.lg-fin li + li { margin-top: .12em; }
.lg-fin li a { display: inline-block; padding: .1em 0 .14em; font-size: clamp(1.75rem, 3.3vw, 3.5rem); line-height: 1.08; font-weight: 760; font-stretch: 108%; letter-spacing: -.04em; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: .06em; text-underline-offset: .12em; transition: color .15s, text-decoration-color .15s; }
.lg-fin li a:hover { color: var(--blue); text-decoration-color: currentColor; }
.lg-fin p { margin-top: clamp(1.5rem, 4vh, 2.5rem); max-width: var(--medida); font-size: 1.0625rem; color: var(--ink2); }
.lg-fin p a { color: var(--ink); font-weight: 560; text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1.5px; text-underline-offset: .26em; transition: text-decoration-color .2s; }
.lg-fin p a:hover { text-decoration-color: var(--ink); }

/* ---------- pie estático de reserva (lo sustituye montarPie(); se ve solo si el script no carga) ---------- */
.lg-pie0 { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 28px; padding-bottom: clamp(36px, 6vh, 72px); }
.lg-pie0 .logo { font-size: 30px; color: var(--ink); }
.lg-pie0 p { margin-top: 12px; max-width: 22em; }
.lg-pie0 h2 { font-size: 13px; font-weight: 650; color: var(--ink); margin-bottom: 10px; }
.lg-pie0 ul { list-style: none; }
.lg-pie0 li a { display: block; line-height: 2.05; transition: color .2s; }
.lg-pie0 li a:hover { color: var(--ink); }

/* ---------- pantallas anchas: el número del apartado cuelga en el margen de la columna ---------- */
@media (min-width: 62.5em) {
  .lg-texto h2 .n { position: absolute; right: 100%; top: 0; margin-right: .46em; }
  .lg-indice details[open] summary { cursor: default; pointer-events: none; }   /* abierto y fijo: el rótulo deja de ser un botón */
  .lg-indice details::details-content { content-visibility: visible; display: block; }
}
@media (min-width: 106.25em) {
  .lg { --medida: 33em; }
  .lg-texto { font-size: 1.1875rem; }
}

/* ---------- pantallas estrechas: una columna; el índice se pliega ---------- */
@media (max-width: 62.49em) {
  .lg-cab { padding-top: 5.75rem; }
  .lg-nav ul { column-gap: 1.25rem; }
  .lg-h1 { font-size: clamp(2rem, 9.6vw, 4.25rem); }
  .lg-resumen, .lg-cuerpo, .lg-fin { display: block; }
  .lg-resumen { padding-top: 1.25rem; }
  .lg-resumen .lg-rot, .lg-fin .lg-rot { padding-top: 0; margin-bottom: .9rem; }
  .lg-resumen p { font-size: clamp(1.375rem, 4.6vw, 2rem); }
  .lg-cuerpo { padding-top: 0; border-top: 0; }
  .lg-indice { position: static; width: auto; max-height: none; overflow: visible; padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .lg-indice summary { padding: 1rem 0; min-height: 3.25rem; }
  /* el signo es texto (no un fondo dibujado) para que siga ahí con los colores forzados del sistema; la barra final lo calla en los lectores de pantalla */
  .lg-indice summary::after { flex: none; content: "+"; content: "+" / ""; font-size: 1.6rem; line-height: 1; font-weight: 300; }
  .lg-indice details[open] summary::after { content: "−"; content: "−" / ""; }
  .lg-indice ol { margin: 0 0 1rem; }
  .lg-indice li { font-size: 1rem; }
  .lg-indice li a { padding: .56rem 0 .56rem .1em; }
  .lg-texto { padding-top: clamp(2.25rem, 6vh, 3rem); font-size: 1.0625rem; }
  .lg-texto h2 .n { margin-right: .22em; }
  .lg-pie0 { grid-template-columns: 1fr 1fr; }
  .lg-pie0 > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 44.99em) {
  .lg-ficha > div { display: block; }
  .lg-ficha dt { padding-top: 0; }
  .lg-ficha dd { margin-top: .12rem; }
  /* las tablas pasan a fichas: cada fila, un bloque; cada dato lleva delante el nombre de su columna */
  .lg-tabla, .lg-tabla tbody, .lg-tabla tr, .lg-tabla th, .lg-tabla td { display: block; }
  .lg-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lg-tabla tbody { border-top: 1.5px solid var(--ink); }
  .lg-tabla tbody tr { padding: .9rem 0 1rem; border-bottom: 1px solid var(--line); }
  .lg-tabla tbody th, .lg-tabla td, .lg-tabla.es-ancha tbody th { width: auto; padding: 0; border: 0; }
  .lg-tabla tbody th { font-size: 1.0625rem; }
  .lg-tabla td { margin-top: .5rem; }
  .lg-tabla td[data-th]::before { content: attr(data-th); display: block; margin-bottom: .05rem; font-size: .8125rem; line-height: 1.4; font-weight: 650; color: var(--ink2); }
  .lg-texto .lg-ceros { grid-template-columns: 1fr; gap: 1rem; }
  .lg-texto .lg-ceros li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: center; font-size: 1.0625rem; }
  .lg-texto .lg-ceros b { font-size: 4.75rem; margin-bottom: 0; }
}

@media (forced-colors: active) {
  .lg-nav a[aria-current="page"] { border-bottom: 2px solid CanvasText; }   /* la raya es un fondo: aquí no se pintaría */
  .lg-resumen mark { forced-color-adjust: none; }
  .por-completar { border-color: CanvasText; }
}

/* ---------- impresión: solo el documento ---------- */
@media print {
  @page { margin: 18mm 17mm 20mm; }
  html, body.lg-pag { background: #fff !important; }
  body.lg-pag { font-size: 10.5pt; color: #000; }
  .lg-saltar, .lg-barra, .isla, .lg-nav, .lg-indice, .lg-fin, .lg-imprimir, #pie { display: none !important; }
  .lg { --pc: #000; padding: 0; background: none; }
  .lg, .lg * { color: #000 !important; }
  .lg-cab { padding-top: 0; }
  .lg-cab::before { content: "OXGENESIS"; display: block; margin-bottom: 9mm; font-family: var(--logo); font-size: 13pt; letter-spacing: .055em; }
  .lg-h1 { margin: 0; font-size: 30pt; max-width: none; }
  .lg-h1 .l { overflow: visible; padding: 0; margin: 0; }
  .lg-h1 .l > span { animation: none !important; transform: none !important; }
  .lg-fecha { margin-top: 4mm; font-size: 9.5pt; }
  .lg-resumen, .lg-cuerpo { display: block; }
  .lg-resumen { margin-top: 7mm; padding: 4mm 0 6mm; border-top: .75pt solid #000; }
  .lg-resumen .lg-rot { padding: 0; margin-bottom: 2mm; font-size: 9.5pt; }
  .lg-resumen p { max-width: none; font-size: 13.5pt; line-height: 1.26; font-weight: 600; }
  .lg-resumen mark { background: none; padding: 0; margin: 0; text-decoration: underline; text-decoration-thickness: 1.2pt; text-underline-offset: 2pt; }
  .lg-cuerpo { padding-top: 6mm; border-top: .75pt solid #000; }
  .lg-texto { padding: 0; font-size: 10.5pt; line-height: 1.5; }
  .lg-texto > section + section { margin-top: 8mm; }
  .lg-texto :where(p, ul, ol, h3), .lg-texto h2, .lg-ficha, .lg-tabla, .lg-ceros { max-width: none !important; }
  .lg-texto h2 { font-size: 15pt; }
  .lg-texto h2 .n { position: static; margin-right: .3em; }
  .lg-texto h3 { margin-top: 5mm; font-size: 11.5pt; }
  .lg-texto h2, .lg-texto h3 { break-after: avoid; }
  .lg-texto p, .lg-texto li { orphans: 3; widows: 3; }
  .lg-ficha > div, .lg-tabla tr, .lg-ceros, .por-completar { break-inside: avoid; }
  .lg-ficha, .lg-tabla thead th, .lg-ceros { border-top-color: #000; border-bottom-color: #000; }
  .lg-ficha > div, .lg-tabla th, .lg-tabla td { border-bottom-color: #999; }
  .lg-tabla { font-size: 9.5pt; }
  .lg-texto .lg-ceros b { font-size: 44pt; }
  .lg-texto .lg-dicho { font-size: 13pt; }
  .lg-texto a { text-decoration: underline; overflow-wrap: anywhere; }
  .lg-texto a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .88em; font-weight: 400; word-break: break-all; }
  .lg-texto a.lg-url::after { content: none; }   /* el texto del enlace ya es su dirección */
  .lg a, .lg mark { text-decoration-color: #000 !important; }
  .por-completar { background: none; border: 1pt dashed #000; }
  .lg-texto .nota-borrador { margin-top: 9mm; border-top: 1pt dashed #000; font-size: 9pt; }
}