/* Aquí establecemos una configuración para cuando el ancho de la pantalla sea inferior a 1024px. */
@media (max-width: 1024px) {

    /* Aquí establecemos que el contenedor "base" tenga un ancho del 90% de la pantalla y un margen de 30px verticalmente y automático horizontalmente (para centrarlo). */
    .base {
        width: 90%;
        margin: 30px auto;
    }

    /* Aquí establecemos que los párrafos tengan un tamaño de letra grande y un margen horizontal de 20px. */
    p {
        font-size: large;
        margin: auto 20px;
    }

    /* Aquí establecemos que el título principal tenga un tamaño xx-large. */
    .titulo {
        font-size: xx-large;
    }

    /* Aquí establecemos que los títulos secundarios tengan un tamaño x-large. */
    .titulo_secundario {
        font-size: x-large;
    }

    /* Aquí establecemos que todas las líneas horizontales ocupen el 80% del ancho de la pantalla. */
    .tit1,
    .tit2,
    .ts1,
    .ts2,
    .ts3,
    .ts4,
    .ts5,
    .ts6,
    .ts7,
    .ts8,
    .ts9,
    .ts10,
    .ts11,
    .ts12 {
        width: 80%;
    }
}


/* Aquí establecemos una configuración para cuando el ancho de la pantalla sea inferior a 768px. */
@media (max-width: 768px) {

    /* Aquí establecemos que el contenedor "base" tenga un ancho del 95% y un padding interno de 10px. */
    .base {
        width: 95%;
        padding: 10px;
    }

    /* Aquí establecemos que los párrafos tengan un tamaño mediano, un margen horizontal de 10px y un interlineado de 1.6. */
    p {
        font-size: medium;
        margin: auto 10px;
        line-height: 1.6;
    }

    /* Aquí establecemos que el título principal tenga un tamaño de 2rem. */
    .titulo {
        font-size: 2rem;
    }

    /* Aquí establecemos que los títulos secundarios tengan un tamaño grande y un margen superior de 20px. */
    .titulo_secundario {
        font-size: large;
        margin: 20px 5px 0px 5px;
    }

    /* Aquí establecemos que todas las líneas horizontales ocupen el 70% del ancho de la pantalla. */
    .tit1,
    .tit2,
    .ts1,
    .ts2,
    .ts3,
    .ts4,
    .ts5,
    .ts6,
    .ts7,
    .ts8,
    .ts9,
    .ts10,
    .ts11,
    .ts12 {
        width: 70%;
    }
}


/* Aquí establecemos una configuración para cuando el ancho de la pantalla sea inferior a 480px. */
@media (max-width: 480px) {

    /* Aquí establecemos una configuración para el contenedor "base". */
    .base {

        /* Aquí establecemos que ocupe el 100% del ancho de la pantalla. */
        width: 100%;

        /* Aquí establecemos un margen vertical de 15px y automático horizontalmente para centrarlo. */
        margin: 15px auto;

        /* Aquí establecemos un padding interno de 10px. */
        padding: 10px;
    }

    /* Aquí establecemos que los párrafos tengan un tamaño pequeño, un margen horizontal de 5px y un interlineado de 1.7. */
    p {
        font-size: small;
        margin: auto 5px;
        line-height: 1.7;
    }

    /* Aquí establecemos que el título principal tenga un tamaño de 1.5rem. */
    .titulo {
        font-size: 1.5rem;
    }

    /* Aquí establecemos que los títulos secundarios tengan un tamaño de 1.1rem y un margen superior de 15px. */
    .titulo_secundario {
        font-size: 1.1rem;
        margin: 15px 5px 0px 5px;
    }

    /* Aquí establecemos que todas las líneas horizontales ocupen el 90% del ancho de la pantalla. */
    .tit1,
    .tit2,
    .ts1,
    .ts2,
    .ts3,
    .ts4,
    .ts5,
    .ts6,
    .ts7,
    .ts8,
    .ts9,
    .ts10,
    .ts11,
    .ts12 {
        width: 90%;
    }
}