.h1-title {
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}


.h2-subtitle {
    text-align: center;
    font-size: 28px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: -0.5px;
}

.h4-subtitle {
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    text-align: center;
}


.h3-subtitle {
    text-align: center;
    font-size: 38px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.h6-subtitle {
    color: #0033A0;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 160%;
    letter-spacing: 0.15px;
}
/*se deben de eliminar los p4, p7 y p8*/
.p4 {
    color: var(--dark-blue);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}

.p7 {
    color: var(--primary);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.15px;
}

.p8 {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.15px;
    text-align: center;
}

.p1 {
  font-family: Montserrat;
  font-weight: 300;
  line-height: 1.6;
  color: var(--primary);
  font-size: 14px;
}
.p2 {
  font-family: Montserrat;
  font-weight: 300; 
  line-height: 1.6;
  color: var(--primary);
  font-size: 11px; 
}

@media(min-width:800px) {
    .h2-subtitle {
        text-align: left;
    }

    .h4-subtitle {
        text-align: left;
    }


    .p8 {
        text-align: left;
    }

}

@media(min-width:1200px) {
    .h2-subtitle {

        font-weight: 500;
    }

    .p8 {
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
}


/*Modificadores*/

.title--primary {
    color: var(--primary);
}

.title--secondary {
    color: var(--secondary);
}

.title--blue {
    color: var(--dark-blue);
}

.title--accent {
    color: var(--accent);
}

.title--white {
    color: var(--white);
}

.title--light-blue {
    color: var(--light-blue);
}

.txt--left {
    text-align: left;
}

.txt--right {
    text-align: right;
}


/*Hero*/

.h1-title--hero {
    text-align: center;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.60);
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
    padding: 0;
}

@media(min-width:700px) {
    .h1-title--hero {
        text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.30);
        font-size: 60px;
    }

    .h2-subtitle {
        text-align: left;
    }
}