/* =========================================================================
   Páginas legales (política de privacidad y lo que venga)
   Mismo lenguaje que las interiores: banda oscura arriba y panel claro con el
   texto. Aquí manda la lectura: el ancho de línea se limita a ~78 caracteres.
   ========================================================================= */

.lgl {
    position: relative;
    background: #29384B;
    padding-bottom: clamp(40px, calc(90 * var(--u)), 90px);
    overflow: hidden;
}

.lgl__banda {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(300 * var(--u));
    background: #4D6271;
    z-index: 0;
}

.lgl::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(137 * var(--u));
    background: rgba(23, 35, 48, 0.88);
    z-index: 2;
    pointer-events: none;
}

.lgl__panel {
    position: relative;
    z-index: 3;
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(30px, calc(70 * var(--u)), 70px) clamp(22px, calc(74 * var(--u)), 74px)
             clamp(34px, calc(74 * var(--u)), 74px);
    transform: translateY(calc(200 * var(--u)));
    background: #F3F3F3;
    color: #101821;
}

.lgl__titulo {
    margin: 0 0 clamp(18px, calc(34 * var(--u)), 34px);
    font-family: 'TT Hoves', sans-serif;
    font-weight: 300;
    font-size: clamp(24px, calc(38 * var(--u)), 38px);
    line-height: 1.2;
    letter-spacing: 0;
    color: #101821;
}

.lgl__texto {
    font-family: 'TT Hoves', sans-serif;
    font-weight: 300;
    font-size: clamp(14px, calc(17 * var(--u)), 17px);
    line-height: 1.75;
    max-width: 74ch;
}

.lgl__texto h2 {
    margin: clamp(28px, calc(44 * var(--u)), 44px) 0 clamp(8px, calc(14 * var(--u)), 14px);
    font-family: 'TT Hoves', sans-serif;
    font-weight: 500;
    font-size: clamp(16px, calc(20 * var(--u)), 20px);
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    color: #101821;
}

.lgl__texto p { margin: 0 0 clamp(12px, calc(18 * var(--u)), 18px); }
.lgl__texto ul { margin: 0 0 clamp(12px, calc(18 * var(--u)), 18px); padding-left: 1.3em; }
.lgl__texto li { margin-bottom: 6px; }
.lgl__texto a { color: #7d6845; }
.lgl__texto em { color: #5b6875; font-style: normal; font-size: .92em; }

.lgl__texto table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 clamp(14px, calc(22 * var(--u)), 22px);
}

.lgl__texto td {
    padding: 10px 14px 10px 0;
    border-bottom: 1px solid #d8d8d8;
    vertical-align: top;
}

.lgl__volver {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: clamp(26px, calc(44 * var(--u)), 44px);
    width: calc(181 * var(--u));
    min-width: 140px;
    height: clamp(40px, calc(41 * var(--u)), 41px);
    background: #151F2B;
    color: #fff;
    text-decoration: none;
    font-size: clamp(12px, calc(14 * var(--u)), 14px);
    letter-spacing: clamp(0.8px, calc(2 * var(--u)), 2px);
    text-transform: uppercase;
    transition: background .25s ease;
}

.lgl__volver:hover { background: #29384B; color: #fff; }

@media (max-width: 900px) {
    .lgl__banda { height: 200px; }
    .lgl::before { display: none; }
    .lgl__panel { transform: translateY(140px); margin: 0 14px; }
    .lgl { padding-bottom: 180px; }
}

@media (max-width: 900px) {
    /* los correos son enlaces dentro del texto: 16px de alto no se tocan */
    .lgl__texto a { display: inline-block; padding: 5px 0; }
    .lgl__texto em { font-size: 13px; }
    .lgl__texto td { font-size: 14px; }
}