/*
 * AUTORETOQUES — LEGAL.CSS OPTIMIZADO
 * Sustituye el contenido actual de:
 * /assets/css/legal.css
 *
 * - Mantiene el diseño y comportamiento actuales.
 * - Usa las variables globales definidas en main.css.
 * - Sustituye el ancho fijo por --at-container.
 * - Sustituye fondos y radios repetidos por variables globales.
 * - Conserva todos los selectores y breakpoints.
 */

.at-legal {
    padding: 90px 0;
    background: var(--at-soft);
}

.at-legal__container {
    width: var(--at-container);
    max-width: calc(100% - 60px);
    margin: 0 auto;
    padding: 0 50px;
}

.at-legal__header {
    margin-bottom: 42px;
}

.at-legal__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--at-yellow);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.at-legal h1 {
    margin: 0;
    color: var(--at-navy-900);
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1;
    letter-spacing: -.05em;
}

.at-legal__content {
    color: #475467;
    font-size: 16px;
    line-height: 1.85;
}

.at-legal__content h2 {
    margin: 46px 0 14px;
    color: var(--at-navy-900);
    font-size: 26px;
    line-height: 1.2;
}

.at-legal__content h2:first-child {
    margin-top: 0;
}

.at-legal__content p {
    margin: 0 0 18px;
}

.at-legal__content ul {
    margin: 0 0 22px;
    padding-left: 22px;
}

.at-legal__content li {
    margin-bottom: 8px;
}

.at-legal__box {
    margin-top: 32px;
    padding: 24px;
    border-radius: var(--at-radius);
    background: var(--at-soft);
    border-left: 4px solid var(--at-yellow);
}

.at-legal__box strong {
    display: block;
    margin-bottom: 10px;
    color: var(--at-navy-900);
}

/* Tablet */

@media (max-width: 1200px) {

    .at-legal__container {
        width: 100%;
        max-width: calc(100% - 50px);
        padding: 0;
    }

}

/* Móvil */

@media (max-width: 768px) {

    .at-legal {
        padding: 60px 0;
    }

    .at-legal__container {
        max-width: calc(100% - 32px);
    }

    .at-legal h1 {
        font-size: 38px;
        line-height: 1.05;
    }

    .at-legal__content {
        font-size: 15px;
        line-height: 1.75;
    }

    .at-legal__content h2 {
        margin: 38px 0 12px;
        font-size: 22px;
    }

    .at-legal__box {
        padding: 18px;
    }

}

/* Móvil pequeño */

@media (max-width: 480px) {

    .at-legal {
        padding: 50px 0;
    }

    .at-legal__container {
        max-width: calc(100% - 24px);
    }

    .at-legal h1 {
        font-size: 32px;
    }

    .at-legal__content {
        font-size: 14px;
    }

    .at-legal__content h2 {
        font-size: 20px;
    }

}