/* =========================================================================
   PÁGINAS LEGALES DEL PORTAL   (.legal)
   =========================================================================
   Hoja propia de /aviso-de-privacidad y de cualquier página legal que venga
   después. Se sirve con asset('css/legal.css') desde el @push('styles') de la
   vista, así que solo la descarga quien abre una de estas páginas.

   CONVENCIONES
   -------------------------------------------------------------------------
   1. Todo cuelga de `.legal` y va prefijado `legal-`. El portal carga Tailwind
      de forma global y cada micrositio trae su propia hoja: sin ámbito ni
      prefijo, un nombre como `.tarjeta` chocaría con media docena de sitios.

   2. Los colores NO se escriben a mano: salen de los tokens de marca del
      portal (--brand-burgundy, --brand-gold, --brand-cream, --brand-muted, y
      los dos burdeos derivados), que es lo que deja cambiar la paleta desde
      /admin → Apariencia sin tocar esta hoja. Los valores de reserva de
      `rgb(var(--x, a b c))` son los del manual de identidad.

   3. Tipografía: Montserrat para el cuerpo (la del portal) y la clase
      compartida `.fuente-titulos` (Marion → Playfair Display) para los
      títulos. Aquí no se declara ninguna familia nueva.

   POR QUÉ ESTA PÁGINA SE VE COMO UN DOCUMENTO Y NO COMO UNA SECCIÓN MÁS
   -------------------------------------------------------------------------
   Un aviso de privacidad se abre para BUSCAR una respuesta, no para recorrerlo.
   De ahí las tres decisiones que gobiernan toda la hoja:

     · UNA COLUMNA ESTRECHA (720px). La línea legible ronda los 75 caracteres;
       a lo ancho de la pantalla, un párrafo corrido obliga a barrer con la
       vista en cada renglón y se pierde el sitio.
     · CABECERA DE OFICIO, no de campaña: título a la izquierda y ficha del
       documento (estado, fecha, alcance) a la derecha. Sin foto de fondo.
     · EL ORO SE GASTA EN UN SOLO SITIO por bloque — el filete que abre la
       cabecera, el marcador del apartado, la flecha de la tarjeta. Es el
       acento de la marca; repartido, deja de señalar nada.

   ÍNDICE
    1. Entorno y tokens locales
    2. Cabecera del documento
    3. El cuerpo de la página
    4. «Lo esencial» (las cuatro tarjetas)
    5. Las garantías (los cuatro NO del documento)
    6. El documento (los apartados plegables)
    7. Cierre (los dos botones)
    8. Adaptable / impresión / movimiento reducido
   ========================================================================= */


/* =========================================================================
   1. ENTORNO Y TOKENS LOCALES
   ========================================================================= */
.legal {
    --legal-vino: rgb(var(--brand-burgundy, 92 17 60));
    --legal-vino-oscuro: rgb(var(--brand-burgundy-mid, 63 11 41));
    --legal-vino-profundo: rgb(var(--brand-burgundy-deep, 35 6 22));
    --legal-oro: rgb(var(--brand-gold, 221 179 4));
    --legal-crema: rgb(var(--brand-cream, 244 240 233));
    --legal-crema-alt: rgb(var(--brand-cream-dim, 231 223 209));
    --legal-bronce: rgb(var(--brand-muted, 177 150 87));

    /* Derivados. La tinta del cuerpo es un burdeos muy desaturado y no un gris
       neutro: sobre crema, el gris se ve sucio al lado del burdeos de los
       títulos. */
    --legal-tinta: #3b2a33;
    --legal-tinta-suave: #6b5560;
    --legal-linea: rgb(var(--brand-burgundy, 92 17 60) / 0.14);

    /* El oro puro sobre crema da 1.9:1 y el mínimo legal para texto pequeño es
       4.5:1. Sobre fondo CLARO se usa este oro con la luminosidad bajada; sobre
       el burdeos de la cabecera, el oro puro contrasta de sobra. Mismo criterio
       —y mismos valores— que --inv-etiqueta en Invierte y --prin-oro-sobre-claro
       en Principal: no se inventa un tercer oro. */
    --legal-oro-sobre-claro: #8a7003;

    --legal-env: 720px;

    background: var(--legal-crema);
    color: var(--legal-tinta);
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.legal-env {
    width: 100%;
    max-width: var(--legal-env);
    margin: 0 auto;
    padding-inline: 24px;
}

/* Rótulo pequeño en versalitas. Es el mismo device que usan Invierte
   (.inv-etiqueta) y Principal (.prin-etiqueta): quien llega aquí desde
   cualquiera de los dos reconoce el antetítulo. */
.legal-etiqueta {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--legal-oro);
}
.legal-etiqueta--tinta { color: var(--legal-oro-sobre-claro); }


/* =========================================================================
   2. CABECERA DEL DOCUMENTO  (.legal-masthead)
   -------------------------------------------------------------------------
   Dos tramos: el título a la izquierda y la ficha del documento a la derecha.
   NO es una rejilla de mitades — el título necesita el ancho y la ficha son
   tres líneas cortas — así que va 1fr / auto y la ficha se queda con lo suyo.

   El filete de oro de arriba cruza la cabecera entera. Es lo único dorado del
   bloque y hace de membrete.
   ========================================================================= */
.legal-masthead {
    position: relative;
    background: linear-gradient(
        160deg,
        var(--legal-vino) 0%,
        var(--legal-vino-oscuro) 58%,
        var(--legal-vino-profundo) 100%
    );
    color: var(--legal-crema);
    padding: 68px 0 56px;
}
.legal-masthead::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--legal-oro);
}

.legal-masthead__reja {
    display: grid;
    /* -----------------------------------------------------------------
       DOS COLUMNAS CON REPARTO FIJO  (arreglo 2026-09-08)
       -----------------------------------------------------------------
       Antes era `1fr auto`, y `auto` significa «lo que pida el contenido».
       Mientras la ficha tuvo tres datos cortos (Vigente, Sin indicar, una
       línea de alcance) eso funcionó. En la ronda del 2026-09-07 le entró
       el ÁREA RESPONSABLE —«Dirección de Modernización, Innovación y
       Gobierno Abierto»—, la ficha reclamó todo el ancho que esa línea
       pedía y la columna del título se quedó sin sitio: el titular se
       montaba encima de la ficha, que es el fallo que se vino a arreglar.

       Con `minmax(0, Nfr)` en las dos, el reparto lo manda la hoja y no el
       texto que haya dentro. El `0` del minmax es la pieza importante:
       un `fr` a secas guarda un suelo de min-content y la ficha volvería a
       empujar. El 1.1 / 0.9 le da un poco más al titular, que es el que
       manda en una cabecera de documento.
       ----------------------------------------------------------------- */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 48px;
    align-items: end;
}
/* min-width:0 para que la celda pueda encoger por debajo de su contenido, y
   `container-type` para que el titular pueda medirse contra ESTA columna en
   vez de contra la ventana (ver .legal-masthead h1). */
.legal-masthead__texto {
    min-width: 0;
    container-type: inline-size;
}

.legal-migas {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 26px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgb(var(--brand-cream, 244 240 233) / 0.6);
}
.legal-migas a { color: rgb(var(--brand-cream, 244 240 233) / 0.85); text-decoration: none; }
.legal-migas a:hover { color: var(--legal-oro); text-decoration: underline; text-underline-offset: 4px; }

.legal-masthead h1 {
    margin: 0;
    /* -----------------------------------------------------------------
       EL TITULAR SE MIDE CONTRA SU COLUMNA, NO CONTRA LA VENTANA
       -----------------------------------------------------------------
       El otro medio del fallo del 2026-09-08. El tamaño era `4.6vw`, o sea
       que crecía con la VENTANA — pero esta columna es una fracción de
       `--legal-env`, que está topado en 720px y no crece nunca. En un
       monitor grande el titular llegaba a su tope de 3.2rem (51px) dentro
       de una columna de unos 340px, y «privacidad» no cabe.

       `12cqi` es el 12% del ancho de la columna: a 343px da 41px y a
       pantalla completa —cuando la ficha baja y el texto ocupa todo el
       ancho— sube hasta el tope de 3.2rem, que es donde sí se lo puede
       permitir. El titular crece con el sitio que tiene, que es lo que
       debió hacer desde el principio.

       El 12 y no el 13 lo decide el FRANCÉS, no el español: «privacidad»
       son diez letras y «confidentialité» quince, y esta página está en
       tres idiomas. A 13cqi el francés entraba por ocho píxeles, que es
       entrar de milagro; a 12cqi entra por treinta y cinco. Cuatro píxeles
       menos de titular a cambio de que ningún idioma vaya justo.
       ----------------------------------------------------------------- */
    font-size: clamp(1.75rem, 12cqi, 3.2rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--legal-crema);
    /*
     * La red de seguridad, por lo que venga: este título se edita desde
     * /admin y la página está en tres idiomas, así que la palabra más larga
     * no es la de hoy — el francés ya trae «confidentialité», de quince
     * letras. `hyphens` parte por sílabas según el <html lang> y
     * `overflow-wrap` corta por donde sea lo que no se pueda silabear.
     */
    overflow-wrap: break-word;
    hyphens: auto;
}
/*
 * Respaldo sin consultas de contenedor: se vuelve a `vw` con el tope bajado a
 * 2.6rem (41.6px), que es lo que «confidentialité» aguanta en la columna
 * estrecha. Menos presencia en pantalla grande, pero nunca encima de la ficha.
 */
@supports not (container-type: inline-size) {
    .legal-masthead h1 { font-size: clamp(1.75rem, 3.1vw, 2.6rem); }
}

.legal-entrada {
    margin: 20px 0 0;
    max-width: 54ch;
    font-size: 16.5px;
    line-height: 1.7;
    font-weight: 300;
    color: rgb(var(--brand-cream, 244 240 233) / 0.86);
}

/* --- La ficha del documento ---
   Tres pares rótulo/valor separados por filetes finos. Va alineada al fondo de
   la rejilla para que su última línea case con la última línea de la
   entradilla: es lo que hace que los dos tramos se lean como una sola
   cabecera y no como dos bloques sueltos. */
.legal-ficha {
    margin: 0;
    /* Un suelo BLANDO: no más estrecha de 240px mientras quepa, pero nunca más
       ancha que su columna. Un `min-width: 240px` a secas es un suelo duro y
       desbordaría la celda el día que alguien baje `--legal-env`; con el `min()`
       el tope de la columna gana siempre. */
    min-width: min(240px, 100%);
    padding: 20px 22px;
    border: 1px solid rgb(var(--brand-cream, 244 240 233) / 0.18);
    border-left: 3px solid var(--legal-oro);
    border-radius: 0 10px 10px 0;
    background: rgb(var(--brand-burgundy-deep, 35 6 22) / 0.35);
}
.legal-ficha > div + div {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgb(var(--brand-cream, 244 240 233) / 0.12);
}
.legal-ficha dt {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--legal-bronce);
}
.legal-ficha dd {
    margin: 5px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 600;
    color: var(--legal-crema);
    /* Los valores se escriben en /admin y ya hay uno de cincuenta y siete
       letras («Dirección de Modernización, Innovación y Gobierno Abierto»).
       Parte normalmente por espacios; esto es para lo que no los tenga. */
    overflow-wrap: break-word;
}


/* =========================================================================
   3. EL CUERPO DE LA PÁGINA
   -------------------------------------------------------------------------
   Aquí vivía además `.legal-muestra`, el recuadro de «contenido de muestra»
   que avisaba de que el texto no lo había revisado el área jurídica. Se retiró
   en la ronda 2026-09-07: el texto de esta página es ya el del documento que
   el área firma, así que ese aviso dejó de ser cierto y su regla, muerta.
   ========================================================================= */
.legal-cuerpo { padding: 56px 24px 88px; }


/* =========================================================================
   4. «LO ESENCIAL»  (.legal-resumen)
   -------------------------------------------------------------------------
   Las cuatro preguntas con las que la gente llega a esta página, contestadas
   en una línea, cada una enlazando al apartado que la desarrolla.

   POR QUÉ ESTÁ ANTES DEL DOCUMENTO Y NO DESPUÉS. Un resumen al final es un
   resumen para quien ya leyó, que es justo quien no lo necesita. Al principio
   es un índice con respuesta: quien venía por una sola cosa la resuelve sin
   bajar, y quien quiere el texto completo lo tiene tres centímetros más abajo.

   Las tarjetas son <a> y no botones: llevan a otra parte de la misma página,
   así se pueden abrir en otra pestaña y copiar su dirección.
   ========================================================================= */
.legal-resumen { margin-bottom: 72px; }

.legal-resumen__cabeza { margin-bottom: 22px; }
.legal-resumen__cabeza h2 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--legal-vino);
}

.legal-resumen__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.legal-tarjeta {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "pregunta ir"
        "respuesta ir";
    gap: 6px 14px;
    align-items: start;
    height: 100%;
    padding: 18px 18px 18px 20px;
    border: 1px solid var(--legal-linea);
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}
.legal-tarjeta__pregunta {
    grid-area: pregunta;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--legal-vino);
}
.legal-tarjeta__respuesta {
    grid-area: respuesta;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--legal-tinta-suave);
}
/* La flecha apunta ABAJO, no a la derecha: el destino no es otra página, es un
   apartado más abajo de ésta. Una flecha a la derecha prometería una salida. */
.legal-tarjeta__ir {
    grid-area: ir;
    align-self: center;
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--legal-linea);
    color: var(--legal-oro-sobre-claro);
    transition: background .18s, border-color .18s, transform .18s;
}
.legal-tarjeta__ir svg { width: 15px; height: 15px; }

.legal-tarjeta:hover,
.legal-tarjeta:focus-visible {
    border-color: var(--legal-oro);
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -22px rgb(var(--brand-burgundy-deep, 35 6 22) / 0.6);
}
.legal-tarjeta:hover .legal-tarjeta__ir,
.legal-tarjeta:focus-visible .legal-tarjeta__ir {
    background: var(--legal-oro);
    border-color: var(--legal-oro);
    color: var(--legal-vino-profundo);
    transform: translateY(2px);
}

.legal-resumen__pie {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--legal-tinta-suave);
}


/* =========================================================================
   5. LAS GARANTÍAS  (.legal-garantias)
   -------------------------------------------------------------------------
   Los cuatro NO explícitos del documento firmado, en una banda propia entre el
   resumen y el articulado.

   POR QUÉ EN BURDEOS MACIZO. La página tenía dos superficies oscuras —la
   cabecera y el cierre— y ochenta centímetros de crema entre medias. Poniendo
   aquí la tercera, el documento queda apoyado en tres paradas oscuras y el
   recorrido alterna claro y oscuro al bajar: cabecera · resumen · GARANTÍAS ·
   articulado · cierre. Es todo el color que se añadió, y no es adorno — marca
   el punto donde el documento pasa de «lo esencial» a la letra completa.

   LA MARCA ES UN ASPA, NO UNA PALOMA. Estas cuatro frases dicen lo que NO se
   hace; una paloma de visto bueno diría lo contrario de lo que se lee. El aspa
   va en oro sobre el burdeos, que es donde el oro puro contrasta de sobra, y
   dentro de un círculo hueco para que no se lea como un error ni como un botón.
   ========================================================================= */
.legal-garantias {
    margin-bottom: 72px;
    padding: 40px 38px 36px;
    border-radius: 14px;
    background: linear-gradient(150deg, var(--legal-vino) 0%, var(--legal-vino-oscuro) 100%);
    color: var(--legal-crema);
}
.legal-garantias .legal-etiqueta { color: var(--legal-oro); }
.legal-garantias h2 {
    margin: 0 0 26px;
    font-size: clamp(1.4rem, 2.8vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--legal-crema);
}

/* Dos columnas: las cuatro frases son cortas y en una sola columna la banda se
   estira sin motivo, alejando la última del título. */
.legal-garantias__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 34px;
}
.legal-garantias__lista li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgb(var(--brand-cream, 244 240 233) / 0.88);
}
/* El filete de la izquierda separa las dos columnas sin una línea vertical:
   cada frase se apoya en su propia marca. */
.legal-garantias__marca {
    display: inline-flex;
    width: 26px;
    height: 26px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgb(var(--brand-gold, 221 179 4) / 0.55);
    color: var(--legal-oro);
}
.legal-garantias__marca svg { width: 12px; height: 12px; }


/* =========================================================================
   6. EL DOCUMENTO  (.legal-documento)
   -------------------------------------------------------------------------
   Siete preguntas con su respuesta, PLEGADAS: cada apartado es un <details> y
   la pregunta es su <summary>. Cerrado, el documento es su propio índice —las
   siete preguntas caben de una vez— y quien llega con una duda abre solo la
   suya. Es la misma idea que gobierna la página entera desde el principio,
   llevada al cuerpo del texto.

   EL FILETE DE ORO ES EL MANDO, Y NO HAY OTRO
   -------------------------------------------------------------------------
   El marcador de oro que ya abría cada apartado ahora también dice en qué
   estado está: 34 px cuando la respuesta está guardada, la anchura entera de
   la columna cuando está abierta, como la raya que se traza bajo el
   encabezamiento de un expediente al abrirlo. No se añade un galón encima: el
   único adorno de la fila es esa raya, que ya estaba.

   Lo que sí se añade es una PALABRA — «Ver respuesta» / «Ocultar» — y no un
   triángulo. Esta página la abre gente que viene a resolver un trámite, no a
   descifrar iconos, y una palabra no se interpreta. Va en la misma micro-tipo
   en versalitas que los antetítulos de la página (.legal-etiqueta), así que no
   estrena ni familia ni escala.

   NUMERAR SIGUE SIN VENIR A CUENTO: los apartados no son una secuencia. Lo que
   sí es información es CUÁNTOS son, y eso lo dice la cabecera del registro.
   ========================================================================= */

/* --- Cabecera del registro: el recuento y el mando de abrir/cerrar todas --- */
.legal-registro {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--legal-linea);
}
.legal-registro__cuenta {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--legal-tinta-suave);
}
.legal-registro__todas {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--legal-oro-sobre-claro);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    text-decoration-color: var(--legal-linea);
    transition: text-decoration-color .18s, color .18s;
}
.legal-registro__todas:hover { text-decoration-color: var(--legal-oro); }

/* --- El apartado --- */
.legal-apartado {
    border-bottom: 1px solid var(--legal-linea);
}
/* Al llegar por un ancla, la pregunta no debe quedar pegada al borde de
   arriba: `scroll-margin-top` reserva ese respiro SOLO en el salto, sin añadir
   relleno visible a quien llega leyendo. Bastan 28 px porque la barra superior
   del portal es `relative`, no fija (ver partials/navbar.blade.php): no hay
   nada colgando que pueda tapar el destino. */
.legal-apartado { scroll-margin-top: 28px; }

.legal-apartado__pregunta {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 22px;
    align-items: center;
    padding: 24px 0 22px;
    cursor: pointer;
    /* Fuera el triángulo del navegador: el estado lo dicen el filete y la
       palabra. Hacen falta las dos reglas — la moderna y la de WebKit. */
    list-style: none;
}
.legal-apartado__pregunta::-webkit-details-marker { display: none; }

/* El filete. Va a -1px para montarse sobre el hilo separador del apartado
   anterior: al abrirse lo tapa de extremo a extremo, y esa raya de oro que
   cruza la columna es toda la señal de «esto está abierto» que hace falta. */
.legal-apartado__pregunta::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 34px;
    height: 3px;
    background: var(--legal-oro);
    transition: width .32s cubic-bezier(.22, .61, .36, 1);
}
.legal-apartado[open] > .legal-apartado__pregunta::before { width: 100%; }

.legal-apartado__pregunta h2 {
    margin: 0;
    font-size: clamp(1.2rem, 2.4vw, 1.45rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--legal-vino);
    transition: color .18s;
}
.legal-apartado__pregunta:hover h2 { color: var(--legal-vino-oscuro); }

.legal-apartado__estado {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--legal-oro-sobre-claro);
}
.legal-apartado__pregunta:hover .legal-apartado__estado { text-decoration: underline; text-underline-offset: 4px; }

/* Las dos palabras están las dos en el HTML y se turnan según el estado: así
   el cambio no depende de ningún guion. */
.legal-apartado__estado-ocultar { display: none; }
.legal-apartado[open] > .legal-apartado__pregunta .legal-apartado__estado-ver { display: none; }
.legal-apartado[open] > .legal-apartado__pregunta .legal-apartado__estado-ocultar { display: inline; }

/* El foco del teclado: el <summary> es un control, y hasta ahora la hoja solo
   vestía el de los enlaces. */
.legal-apartado__pregunta:focus-visible,
.legal-registro__todas:focus-visible {
    outline: 2px solid var(--legal-oro);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- La respuesta --- */
.legal-apartado__cuerpo {
    padding-bottom: 28px;
    /* El texto llega del archivo de idioma sin envolver en <p> mientras nadie
       lo edite: se le da el mismo cuerpo e interlínea al contenedor para que un
       apartado sin párrafos explícitos se lea igual que los demás. */
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--legal-tinta);
    /* Entra deslizándose desde debajo de la pregunta, como una hoja que sale de
       su carpeta. Un solo movimiento, corto: la altura no se anima porque
       hacerlo bien pide un guion y esto se lee igual sin él. */
    animation: legal-desplegar .26s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes legal-desplegar {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

.legal-apartado__cuerpo p {
    margin: 0 0 12px;
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--legal-tinta);
}
.legal-apartado__cuerpo p:last-child { margin-bottom: 0; }
.legal-apartado__cuerpo strong { font-weight: 700; color: var(--legal-vino); }
.legal-apartado__cuerpo a {
    color: var(--legal-oro-sobre-claro);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- LISTAS DENTRO DE UNA RESPUESTA ---
   Hacían falta desde que el texto de la página es el del documento firmado:
   sus finalidades, los datos que se recaban, las tres vías para ejercer los
   derechos y los seis requisitos de la solicitud SON listas en el original, y
   el editor de formato del panel las deja escribir. Hasta esta ronda no había
   ni una regla para ellas y salían con el punto gris de serie, pegadas al
   margen.

   La viñeta es un cuadradito de oro, no un punto: el mismo filete corto que
   marca los apartados, reducido. Y va fuera del texto (`position:absolute`)
   para que las líneas de un elemento largo queden alineadas entre sí y no
   sangradas bajo la viñeta. */
.legal-apartado__cuerpo ul,
.legal-apartado__cuerpo ol {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.legal-apartado__cuerpo ul:last-child,
.legal-apartado__cuerpo ol:last-child { margin-bottom: 0; }

.legal-apartado__cuerpo li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 9px;
    font-size: 15.5px;
    line-height: 1.7;
}
.legal-apartado__cuerpo li:last-child { margin-bottom: 0; }

.legal-apartado__cuerpo ul > li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.62em;
    width: 8px;
    height: 3px;
    background: var(--legal-oro);
}

/* Las numeradas sí llevan número: cuando el documento numera —los seis
   requisitos de una solicitud ARCO— el orden es parte de lo que dice, y
   sustituirlo por una viñeta perdería información. */
.legal-apartado__cuerpo ol { counter-reset: legal-punto; }
.legal-apartado__cuerpo ol > li { counter-increment: legal-punto; }
.legal-apartado__cuerpo ol > li::before {
    content: counter(legal-punto) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 2.1;
    color: var(--legal-oro-sobre-claro);
}

/* --- La vista previa del panel: todo abierto y sin mando ---
   Allí un clic sobre un texto significa «edítame este campo», así que la
   pregunta no puede además plegar el apartado (lo impide legal.js) y ni el
   botón de abrir todas ni la palabra de estado pintan nada. */
.legal-documento--fijo .legal-registro__todas,
.legal-documento--fijo .legal-apartado__estado { display: none; }
.legal-documento--fijo .legal-apartado__pregunta { cursor: default; }
/* Y sin la entrada deslizada: allí los siete están abiertos desde el principio,
   así que no hay ningún despliegue que acompañar — solo siete bloques moviéndose
   a la vez cada vez que el panel recarga la vista previa. */
.legal-documento--fijo .legal-apartado__cuerpo { animation: none; }


/* =========================================================================
   7. CIERRE  (.legal-cierre)
   -------------------------------------------------------------------------
   A dónde ir cuando ya se sabe qué se quiere hacer. Va en burdeos macizo: es
   lo único de la página que pide una acción, y cerrar en oscuro le pone punto
   final al documento.

   DOS BOTONES, Y NO DOS IGUALES. Desde la ronda 2026-09-07 aquí salen las dos
   salidas del documento, y compiten si se visten igual:

     · EL PDF FIRMADO va en oro macizo. Es la respuesta a «¿y esto quién lo
       firma?», que es la duda que trae hasta aquí a quien no se conformó con
       leer la página, y solo aparece si el área ha subido el documento.
     · GOBIERNO ABIERTO va en línea de oro sobre el burdeos. Sigue estando y
       sigue llevando a donde se ejercen los derechos, pero un paso por detrás.

   Cuando no hay PDF cargado, el de Gobierno Abierto se queda solo en el
   recuadro. No hace falta ninguna regla para eso: el botón perfilado se
   defiende igual de bien solo, y así el cierre no cambia de forma según haya
   documento o no.
   ========================================================================= */
.legal-cierre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 32px;
    margin-top: 72px;
    padding: 30px 32px;
    border-radius: 14px;
    background: linear-gradient(120deg, var(--legal-vino) 0%, var(--legal-vino-oscuro) 100%);
    color: var(--legal-crema);
}
/* min-width:0 y flex:1 en el texto: sin ellos, la columna de botones —que es
   `auto`— cede el sitio y el párrafo se estrecha a media línea. */
.legal-cierre__texto { flex: 1 1 22rem; min-width: 0; }

.legal-cierre h2 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--legal-crema);
}
/* La prosa del cierre, por CLASE y no por `.legal-cierre p`. Dos motivos, y
   los dos ya salieron antes en esta hoja:

     · La nota de debajo de los botones también es un <p> dentro del cierre, y
       un selector de dos piezas (clase + etiqueta) le gana en especificidad a
       la clase de la nota: con el selector amplio, la nota salía a 14px y con
       el color del párrafo grande.
     · El texto llega del archivo de idioma SIN envolver en <p> mientras nadie
       lo edite, así que un selector `p` tampoco lo alcanzaría. Se estila el
       contenedor, y los párrafos solo heredan de él. */
.legal-cierre__prosa,
.legal-cierre__prosa p {
    margin: 0;
    max-width: 52ch;
    font-size: 14px;
    line-height: 1.65;
    color: rgb(var(--brand-cream, 244 240 233) / 0.8);
}
.legal-cierre__prosa p + p { margin-top: 8px; }

/* Los botones, uno debajo del otro y estirados a la misma anchura: puestos en
   fila, «Consulta el Aviso de Privacidad» es tres veces más largo que «Ir a
   Gobierno Abierto» y la pareja queda descuadrada. */
.legal-cierre__acciones {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    flex: none;
}
.legal-cierre__nota {
    margin: 2px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    text-align: center;
    color: rgb(var(--brand-cream, 244 240 233) / 0.62);
}

.legal-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: none;
    padding: 13px 22px;
    border: 1px solid var(--legal-oro);
    border-radius: 999px;
    background: var(--legal-oro);
    color: var(--legal-vino-profundo);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.legal-boton svg { width: 16px; height: 16px; transition: transform .18s; }
.legal-boton:hover { background: #e8c64b; border-color: #e8c64b; transform: translateY(-1px); }
.legal-boton:hover svg { transform: translateX(3px); }

/* El segundo botón: mismo tamaño y misma forma, sin el relleno. Al pasar por
   encima se rellena de oro, así que los dos acaban en el mismo sitio — lo que
   los separa es cuál pesa más EN REPOSO, que es cuando se elige. */
.legal-boton--linea {
    background: transparent;
    border-color: rgb(var(--brand-gold, 221 179 4) / 0.55);
    color: var(--legal-oro);
}
.legal-boton--linea:hover {
    background: var(--legal-oro);
    border-color: var(--legal-oro);
    color: var(--legal-vino-profundo);
}
/* El icono del PDF es un documento, no una flecha: no debe deslizarse. */
.legal-boton[data-legal-pdf]:hover svg { transform: none; }


/* =========================================================================
   8. ADAPTABLE / IMPRESIÓN / MOVIMIENTO REDUCIDO
   ========================================================================= */

/* El foco del teclado tiene que verse en las dos superficies de la página: la
   crema y el burdeos. Un solo color no vale para las dos, así que el anillo va
   en oro (que contrasta con ambas) y con un hueco que lo despega del borde. */
.legal a:focus-visible {
    outline: 2px solid var(--legal-oro);
    outline-offset: 3px;
    border-radius: 4px;
}
/* Los dos botones del cierre son píldoras: un anillo de esquinas rectas
   alrededor se ve como un error. */
.legal-boton:focus-visible { border-radius: 999px; }

@media (max-width: 860px) {
    /* La ficha del documento baja debajo del título: a esta anchura, dos
       columnas dejan el título en cuatro renglones de tres palabras. */
    .legal-masthead__reja { grid-template-columns: 1fr; gap: 32px; align-items: start; }
    .legal-ficha { min-width: 0; }
    .legal-masthead { padding: 52px 0 44px; }

    /* Las garantías, una por renglón: en dos columnas a este ancho cada frase
       cae en tres renglones y la banda deja de leerse de un vistazo, que es lo
       único que tiene que hacer. */
    .legal-garantias__lista { grid-template-columns: 1fr; gap: 14px; }
    .legal-garantias { padding: 32px 26px 30px; }
}

@media (max-width: 620px) {
    /* Las tarjetas del resumen, una por renglón: en dos columnas a este ancho,
       la respuesta cae en cinco renglones y deja de ser «una línea». */
    .legal-resumen__lista { grid-template-columns: 1fr; }

    /* La palabra de estado baja debajo de la pregunta y se alinea a la
       izquierda: a esta anchura, disputarle sitio al titular en la misma línea
       le cuesta a la pregunta dos renglones más. */
    .legal-apartado__pregunta { grid-template-columns: 1fr; gap: 8px; }
    .legal-apartado__estado { justify-self: start; }
    .legal-cuerpo { padding: 40px 20px 64px; }
    .legal-env { padding-inline: 20px; }
    .legal-cierre { padding: 24px 22px; }
    /* La columna de botones ocupa el ancho: apilada bajo el texto, dos píldoras
       a media caja se leen como un resto de la fila anterior. */
    .legal-cierre__acciones { width: 100%; }
    .legal-boton { width: 100%; }
    .legal-garantias { padding: 28px 22px 26px; }
}

/* En papel, el aviso es solo el documento: fuera el degradado de la cabecera
   (se lleva el tóner por delante), fuera el cierre (es un enlace) y fuera las
   tarjetas del resumen, que en papel no llevan a ninguna parte. */
@media print {
    .legal { background: #fff; }

    /* EN PAPEL NO HAY NADA PLEGADO: un aviso de privacidad impreso a medias no
       es un aviso de privacidad. legal.js abre los apartados antes de imprimir
       y los deja como estaban después; esto es el respaldo para cuando el guion
       no llegue — el navegador esconde la respuesta de un <details> cerrado con
       `content-visibility` sobre ::details-content, así que hay que levantar las
       dos cosas, la propiedad moderna y el display del bloque. */
    .legal-apartado::details-content { content-visibility: visible !important; }
    .legal-apartado__cuerpo { display: block !important; animation: none !important; }
    .legal-apartado__pregunta { cursor: auto; }
    .legal-apartado__pregunta::before { width: 34px !important; }
    .legal-registro,
    .legal-apartado__estado { display: none; }
    .legal-masthead {
        background: #fff;
        color: #000;
        padding: 0 0 24px;
        border-bottom: 2px solid #000;
    }
    .legal-masthead::before { display: none; }
    .legal-masthead h1,
    .legal-entrada,
    .legal-ficha dd { color: #000; }
    .legal-ficha { background: none; border-color: #999; }
    .legal-resumen,
    .legal-cierre,
    .legal-migas { display: none; }

    /* Las garantías SÍ se imprimen: son parte de lo que el documento declara,
       no un adorno de pantalla. Lo que se va es el fondo oscuro, que se lleva
       el tóner por delante y dejaría el texto crema ilegible en papel. */
    .legal-garantias {
        padding: 0 0 20px;
        background: none;
        color: #000;
        border-bottom: 1px solid #999;
    }
    .legal-garantias h2,
    .legal-garantias__lista li { color: #000; }
    .legal-garantias .legal-etiqueta { color: #555; }
    .legal-garantias__marca { border-color: #999; color: #000; }
    .legal-apartado { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
    .legal-tarjeta,
    .legal-tarjeta__ir,
    .legal-boton,
    .legal-boton svg,
    .legal-apartado__pregunta h2,
    .legal-apartado__pregunta::before { transition: none; }
    /* El filete cambia de largo igual, pero de golpe; y la respuesta aparece
       sin deslizarse. El estado se sigue viendo, que es lo que importa. */
    .legal-apartado__cuerpo { animation: none; }
    .legal-tarjeta:hover,
    .legal-tarjeta:focus-visible,
    .legal-boton:hover { transform: none; }
    .legal-tarjeta:hover .legal-tarjeta__ir,
    .legal-tarjeta:focus-visible .legal-tarjeta__ir { transform: none; }
    .legal-boton:hover svg { transform: none; }
}