/* AVISO LEGAL Y PRIVACIDAD */

html {
    scroll-behavior: smooth;
}


/* CABECERA (sin imagen, más baja que en el resto de páginas) */

#legal-header {
    height: auto;
    padding: 45px 0;
}

#legal-header #left-header {
    width: 100%;
    max-width: 780px;
}

#legal-fecha {
    color: #ffa8db;
    font-size: 14px;
    font-weight: 700;
}


/* ÍNDICE + CONTENIDO */

#legal-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 35px;
    align-items: start;
    margin-top: 40px;
}

#legal-indice {
    position: sticky;
    top: 130px;
    padding: 22px;
    border-radius: 12px;
    background: #1d051d;
    border: 0.5px solid #ffd1ec;
    box-shadow: 0 0 10px -3px rgb(255, 165, 240);
}

#legal-indice h2 {
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffa8db;
}

#legal-indice ol {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    counter-reset: indice;
}

#legal-indice li {
    counter-increment: indice;
}

#legal-indice a {
    display: flex;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    color: #e8d5e2;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

#legal-indice a::before {
    content: counter(indice, decimal-leading-zero);
    color: #ff6fc8;
    font-weight: 800;
}

#legal-indice a:hover {
    background: #381321;
    color: white;
}

#legal-contenido {
    display: flex;
    flex-direction: column;
    gap: 22px;
}


/* SECCIONES */

.legal-seccion {
    /* deja sitio a la barra superior al saltar desde el índice */
    scroll-margin-top: 130px;
    padding: 28px 30px;
    border-radius: 12px;
    background: #1d051d;
    border: 0.5px solid #ffd1ec;
    box-shadow: 0 0 10px -3px rgb(255, 165, 240);

    display: flex;
    flex-direction: column;
    gap: 14px;
}

.legal-titulo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ff0095;
}

.legal-numero {
    font-family: "Abril Fatface", serif;
    font-size: 30px;
    line-height: 1;
    color: #ffa8db;
}

.legal-titulo h2 {
    font-family: "Abril Fatface", serif;
    font-size: 25px;
}

.legal-seccion p,
.legal-seccion li {
    font-size: 16px;
    line-height: 1.65;
}

.legal-seccion ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 22px;
}

.legal-seccion li::marker {
    color: #ff6fc8;
}

.legal-seccion a {
    color: #ff9fe9;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.legal-seccion a:hover {
    color: white;
}

.legal-destacado {
    padding: 14px 18px;
    border-radius: 10px;
    background: #381321;
    border-left: 3px solid #ff6fc8;
    line-height: 1.6;
}

.legal-destacado strong {
    display: block;
    color: #ffd1ec;
}

#legal-datos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

#legal-datos div {
    padding: 14px 16px;
    border-radius: 10px;
    background: #13001c;
    border: 0.5px solid rgba(255, 209, 236, 0.3);
}

#legal-datos dt {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffa8db;
}

#legal-datos dd {
    font-weight: 700;
    overflow-wrap: anywhere;
}


/* PANTALLAS CHICAS */

@media (max-width: 1000px) {
    #legal-layout {
        grid-template-columns: 1fr;
    }

    #legal-indice {
        position: static;
    }

    #legal-datos {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    #legal-header {
        padding: 10px 0 20px;
    }

    .legal-seccion {
        padding: 22px 18px;
    }

    .legal-titulo h2 {
        font-size: 21px;
    }
}