/* ============================================================================
   Documentos legales — aviso legal, privacidad, RRSS, envíos y devoluciones.

   Un documento legal se lee de otra manera que una landing: no se recorre, se
   consulta. Por eso aquí no hay ni una animación, el ancho de la columna se corta
   en 66 caracteres, y el índice de la izquierda se queda pegado mientras bajas.

   Todo cuelga de .dlg. El texto viene tal cual de las vistas antiguas, así que las
   etiquetas que hay que vestir son las que ya traía: h3, h4, h5, p, ul, li, a,
   strong, em y br. Nada de clases en el cuerpo: lo que se escriba ahí es texto
   legal y no se toca.
   ============================================================================ */

.dlg {
    /* Ojo con `ch`: mide el ancho del cero, más gordo que una letra media, así que 70ch
       son unos 83 caracteres de verdad. 62ch deja la línea en unos 72, que es donde se
       lee bien (el rango sano va de 45 a 75). Solo manda por debajo de la retícula. */
    --dlg-col: 62ch;
    padding-bottom: var(--sec);
}

/* ---- El ancho del documento ------------------------------------------------ */

/* Lo que ocupa de verdad: índice (236) + hueco (~86) + columna de texto (66ch ≈ 620),
   unos 940 px. Suelto en una pantalla de 1440 se queda pegado al margen izquierdo con
   medio folio vacío a la derecha, así que se centra. El filo de la cabecera no entra
   aquí: ese sí va de lado a lado. */
/* 990 no es un número redondo porque no lo es el problema: es lo que miden el índice, el
   hueco y una columna de unos 72 caracteres a 1440. Al ser el contenedor quien corta, y
   no la columna, los márgenes salen iguales a izquierda y derecha en cualquier pantalla. */
.dlg__in {
    max-width: 990px;
    margin-inline: auto;
    padding-inline: var(--gut);
}

/* ---- Cabecera -------------------------------------------------------------- */

.dlg__cab {
    padding-top: calc(var(--hdr) + clamp(48px, 9vh, 112px));
    padding-bottom: clamp(28px, 5vh, 56px);
    border-bottom: 1px solid var(--line);
}

.dlg__kicker {
    color: var(--champ);
    margin: 0 0 18px;
}

/* El título del documento es largo de verdad («Ley de los servicios de la sociedad
   de la información»), así que la escala se limita por caracteres además de por
   ventana: si no, en pantalla ancha ocupa media página él solo. */
.dlg__h1 {
    font-family: var(--f-d);
    font-stretch: 112%;
    font-variation-settings: "wght" 300, "wdth" 112;
    font-weight: 300;
    text-transform: uppercase;
    font-size: clamp(28px, min(5.2vw, 4.4vh), 56px);
    line-height: 1.08;
    letter-spacing: -.015em;
    color: var(--w);
    max-width: 26ch;
    margin: 0;
    text-wrap: balance;
}

.dlg__pie {
    color: var(--t4);
    margin: 22px 0 0;
}

/* ---- Retícula -------------------------------------------------------------- */

.dlg__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 5vh, 56px);
    padding-top: clamp(36px, 6vh, 72px);
}

@media (min-width: 1040px) {
    .dlg__cuerpo {
        grid-template-columns: minmax(0, 236px) minmax(0, 1fr);
        gap: clamp(48px, 6vw, 112px);
        align-items: start;
    }

    .dlg__nav {
        position: sticky;
        top: calc(var(--hdr) + 28px);
        max-height: calc(100vh - var(--hdr) - 56px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

}

/* ---- Índice ---------------------------------------------------------------- */

/* En pantalla grande el sumario sobra como botón: se abre siempre y el triángulo
   del navegador se esconde. Plegado solo tiene sentido en móvil. */
.dlg__sum {
    color: var(--t4);
    cursor: pointer;
    list-style: none;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.dlg__sum::-webkit-details-marker { display: none; }

.dlg__sum::after {
    content: "+";
    float: right;
    font-size: 14px;
    line-height: 1;
}

.dlg__det[open] .dlg__sum::after { content: "–"; }

@media (min-width: 1040px) {
    .dlg__sum { pointer-events: none; }
    .dlg__sum::after { display: none; }
}

.dlg__ol {
    list-style: none;
    margin: 0;
    padding: 10px 0 0;
}

.dlg__li { margin: 0; }

.dlg__a {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    padding: 9px 0;
    color: var(--mut);
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.45;
    transition: color .25s var(--e-expo);
}

.dlg__a:hover,
.dlg__a:focus-visible { color: var(--w); }

.dlg__num {
    color: var(--t4);
    font-size: 10px;
    transition: color .25s var(--e-expo);
}

.dlg__a:hover .dlg__num,
.dlg__a:focus-visible .dlg__num { color: var(--champ); }

/* ---- El texto -------------------------------------------------------------- */

.dlg__texto {
    max-width: var(--dlg-col);
    color: var(--mut2);
    font-family: var(--f-b);
    font-size: clamp(15px, 1.05vw, 16.5px);
    /* 400, como el cuerpo de las fichas. En 300 el texto sale más fino que el del
       resto del sitio, y sobre negro una letra fina además se lee peor. */
    font-weight: 400;
    line-height: 1.78;
}

/* A partir de la retícula el tope lo pone el contenedor, no la columna: si lo pusiera la
   columna sobraría hueco a su derecha y el documento volvería a quedar descentrado.
   Va aquí y no en el bloque de la retícula a propósito: sin más especificidad, en CSS
   gana la regla escrita después, y allí arriba esta línea no servía de nada. */
@media (min-width: 1040px) {
    .dlg__texto { max-width: none; }
}

.dlg__texto > :first-child { margin-top: 0; }

.dlg__texto p { margin: 0 0 1.35em; }

/* El apartado numerado lleva un filo arriba en vez de un tamaño mayor: en un
   documento de cuatro niveles de titular, separar pesa más que agrandar. */
.dlg__texto h3 {
    font-family: var(--f-d);
    font-stretch: 112%;
    font-variation-settings: "wght" 300, "wdth" 112;
    font-weight: 300;
    text-transform: uppercase;
    font-size: clamp(19px, 1.8vw, 24px);
    line-height: 1.22;
    letter-spacing: -.01em;
    color: var(--w);
    margin: 2.6em 0 .9em;
    padding-top: 1.5em;
    border-top: 1px solid var(--line);
    scroll-margin-top: calc(var(--hdr) + 24px);
}

.dlg__texto h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.dlg__texto h4 {
    font-family: var(--f-b);
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1.4;
    color: var(--w);
    margin: 2.1em 0 .7em;
    scroll-margin-top: calc(var(--hdr) + 24px);
}

.dlg__texto h5 {
    font-family: var(--f-m);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--champ);
    margin: 1.8em 0 .6em;
}

/* En «envíos y devoluciones» los apartados son h2, no h3: se visten igual para que
   las cuatro páginas se lean como el mismo documento. */
.dlg__texto h2 {
    font-family: var(--f-d);
    font-stretch: 112%;
    font-variation-settings: "wght" 300, "wdth" 112;
    font-weight: 300;
    text-transform: uppercase;
    font-size: clamp(19px, 1.8vw, 24px);
    line-height: 1.22;
    letter-spacing: -.01em;
    color: var(--w);
    margin: 2.6em 0 .9em;
    padding-top: 1.5em;
    border-top: 1px solid var(--line);
    scroll-margin-top: calc(var(--hdr) + 24px);
}

.dlg__texto h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.dlg__texto ul {
    list-style: none;
    margin: 0 0 1.35em;
    padding: 0;
}

.dlg__texto li {
    position: relative;
    padding-left: 22px;
    margin: 0 0 .62em;
}

.dlg__texto li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .78em;
    width: 6px;
    height: 1px;
    background: var(--champ-deep);
}

.dlg__texto strong { color: var(--w); font-weight: 600; }

.dlg__texto em { color: var(--mut2); }

.dlg__texto a {
    color: var(--w);
    text-decoration: underline;
    text-decoration-color: var(--champ-deep);
    text-underline-offset: .22em;
    text-decoration-thickness: 1px;
    transition: text-decoration-color .25s var(--e-expo);
}

.dlg__texto a:hover,
.dlg__texto a:focus-visible { text-decoration-color: var(--champ); }

/* Hay direcciones de correo y domicilios largos; en móvil estrecho se salen de la
   columna y empujan la página entera. */
.dlg__texto a { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
    .dlg__a,
    .dlg__num,
    .dlg__texto a { transition: none; }
}