/* =============================================================================
   Santi - hojas legales (terminos y privacidad).
   -----------------------------------------------------------------------------
   Estilo propio y separado de estilos.css: las legales son documentos largos de
   lectura, no una landing, asi que no necesitan el grueso de la hoja principal.
   Comparten la paleta de marca para que no parezcan de otro sitio.

   OJO: el TEXTO de estas paginas es el texto legal definitivo y es IDENTICO al
   de viajessde12/public/legal/ (el que abren las apps Flutter). Aca solo se
   cambia la presentacion.
   ============================================================================= */

:root {
    --celeste: #2E7FD1;
    --celeste-oscuro: #1B5FA6;
    --rojo: #D0263B;
    --blanco: #FFFFFF;
    --gris-frio: #5B6472;
    --tinta: #16202B;
    --celeste-velo: #EAF3FC;
    --borde: #DDE5EE;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.62;
    color: var(--tinta);
    background: #FFFFFF;
}

a {
    color: var(--celeste-oscuro);
}

a:focus-visible {
    outline: 3px solid var(--celeste);
    outline-offset: 3px;
}

/* --- Encabezado con la marca ------------------------------------------------ */

.legal-barra {
    background: linear-gradient(160deg, var(--celeste) 0%, var(--celeste-oscuro) 100%);
    color: #FFFFFF;
    padding: 16px 0;
}

.legal-barra__interior {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.legal-marca {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.legal-marca svg {
    width: 30px;
    height: 30px;
    flex: none;
}

/* El punto de la marca va dentro de este span y no suelto al lado del texto:
   .legal-marca es un flex con gap, y un nodo de texto suelto se convierte en
   otro item, con lo que aparece un hueco entre "Santi" y el punto. Sobre el
   azul del encabezado el punto va en blanco: el rojo de marca contra el celeste
   queda casi indistinguible (1.2:1). */
.legal-marca__texto {
    color: #FFFFFF;
}

.legal-barra__volver {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

/* --- Documento -------------------------------------------------------------- */

.legal-hoja {
    max-width: 780px;
    margin: 0 auto;
    padding: 28px 20px 56px;
}

h1 {
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
}

h2 {
    font-size: 1.16rem;
    margin: 32px 0 8px;
    color: var(--celeste-oscuro);
}

p {
    margin: 0 0 14px;
}

.meta {
    color: var(--gris-frio);
    font-size: 0.88rem;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--borde);
}

ol,
ul {
    padding-left: 22px;
    margin: 0 0 14px;
}

li {
    margin-bottom: 7px;
}

/* --- Pie -------------------------------------------------------------------- */

.legal-pie {
    background: var(--celeste-velo);
    border-top: 1px solid var(--borde);
    padding: 26px 0 30px;
}

.legal-pie__interior {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 20px;
    font-size: 0.92rem;
    color: var(--gris-frio);
}

.legal-pie__enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 14px;
}

@media (min-width: 700px) {
    h1 {
        font-size: 2.1rem;
    }

    .legal-hoja {
        padding: 40px 20px 72px;
    }
}