/* =============================
Configuraciones texto
============================= */

p {
    line-height: 1.5em;
    text-wrap: wrap;
    margin: 10px auto;
}

/* =============================
Configuraciones tamaño de fuentes
============================= */

.fsS {
    font-size: 0.8rem;
}

.fsM {
    font-size: 1rem;
}

.fsL {
    font-size: 1.5rem;
}

.fsXL {
    font-size: 2rem;
}

.tituloMenu {
    font-weight: bold;
    transition: 200ms;
}

.tituloMenu:hover {
    font-size: 1.2rem;
    transition: 200ms;
}

/* =============================
Configuraciones de colores
============================= */

.colorRojo {
    color: var(--color-rojo);
}

.colorVerde {
    color: var(--color-verde);
}

.colorNaranja {
    color: var(--color-naranja);
}

.colorCafe {
    color: var(--color-cafe);
}

.colorAzul {
    color: var(--color-azul);
}

/* =============================
Configuraciones de alineacion
============================= */

.textoCentro {
    text-align: center;
}

.textoDerecha {
    text-align: right;
}

.textoIzquierda {
    text-align: left;
}

/* =============================
Configuraciones de fuente externa
============================= */

.lato-thin {    
    font-weight: 100;
    font-style: normal;
}

.lato-light {    
    font-weight: 300;
    font-style: normal;
}

.lato-regular {    
    font-weight: 400;
    font-style: normal;
}

.latoBold {    
    font-weight: 700;
    font-style: normal;
}

.lato-black {    
    font-weight: 900;
    font-style: normal;
}

.lato-thin-italic {    
    font-weight: 100;
    font-style: italic;
}

.lato-light-italic {    
    font-weight: 300;
    font-style: italic;
}

.lato-regular-italic {    
    font-weight: 400;
    font-style: italic;
}

.latoBold-italic {    
    font-weight: 700;
    font-style: italic;
}

.lato-black-italic {    
    font-weight: 900;
    font-style: italic;
}

@media (min-width: 768px) {

    .fsXXL {
        font-size: 3rem;
    }

    .fsXXXL {
        font-size: 4rem;
    }
}