:root {
    --primario: #DDDBE2;
    --menu: #EFE7E6;
    --blanco: #FFF;
    --negro: #000;
    --resaltado: #5E5E5E;
    --nav-v: #C5D1E0;
    --bg-footer: #212121;
    --sombra: rgba(50, 50, 50, .3);
    --estela: rgba(239, 231, 230, .3);
    --activo: #FC4C02;
    --activoSombra: rgba(252, 76, 2, .3);

    --fuentePrincipal: 'Roboto', sans-serif;
}

/*************** GLOBALES ***************/
html {
    box-sizing: border-box;
    font-size: 62.5%;
    scroll-snap-type: y mandatory;
}

/*** Scroll Snap ***/
.header,
.perfilCorporativo,
.dondeEstamos,
.queOfrecemos,
.servicios,
.especializados,
.footer {
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    background-color: var(--primario);
    /* font-size: 1.6rem; */
    line-height: 1.5;
}

p {
    font-size: 1.5rem;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--negro);
}

a {
    text-decoration: none;
    color: var(--blanco);
}

img {
    width: 100%;
}

h1,
h2,
h3,
h4 {
    text-align: center;
    color: var(--blanco);
    font-family: var(--fuentePrincipal);
}

h1 {
    font-size: 4rem;
    text-transform: uppercase;
}

h2 {
    font-size: 3.2rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.5rem;
    /* text-align: left; */
}

/*************** HEADER ***************/
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

/*************** NAVEGACION ***************/
.nav-bg {
    background-color: var(--sombra);
    /* background: transparent; */
    backdrop-filter: blur(10px);
}

.navegacion {
    /* display: flex;
    flex-direction: column; */
    /* padding: 1rem; */
    text-align: center;
    font-family: var(--fuentePrincipal);
    text-transform: uppercase;
    font-size: 1.5rem;
}

.navegacion__enlace {
    display: block;
    padding: 1rem;
    /* color: var(--blanco); */
    transition: 0.5s;
}

.navegacion__enlace:hover {
    background-color: var(--resaltado);
    color: var(--blanco);
    padding: 1rem;
}

.navegacion__enlace--activo {
    display: block;
    color: var(--activo);
    padding: 1rem;
    transition: 0.5s;
}

.navegacion__enlace--activo:hover {
    background-color: var(--resaltado);
    color: var(--blanco);
    padding: 1rem;
}

@media (min-width: 992px) {
    .navegacion {
        display: flex;
        flex-direction: unset;
        justify-content: space-evenly;
        /* padding: 1rem; */
        font-size: 1.3rem;
    }

    .navegacion__enlace,
    .navegacion__enlace--activo {
        width: 22rem;
        /* width: max-content; */
        line-height: 3rem;
    }
}

@media (min-width: 1400px) {
    .navegacion {
        font-size: 1.5rem;
    }
}

/*************** CONTENEDORES ***************/
.contenedor {
    max-width: 180rem;
    /* width: 90%; */
    max-height: 112rem;
}

.contenedor-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 2fr) repeat(4, 1fr);
    row-gap: 2rem;
    height: 992px;
}

@media (min-width: 768px) {
    .contenedor-grid {
        height: 1200px;
    }
}

@media (min-width: 992px) {
    .contenedor-grid {
        grid-template-columns: 1fr repeat(8, 2fr) 1fr;
        grid-template-rows: repeat(6, 1fr);
        column-gap: 2rem;
        align-items: center;
        height: 768px;
    }
}

@media (min-width: 1200px) {
    .contenedor-grid {
        height: 992px;
    }
}

@media (min-width: 1700px) {
    .contenedor-grid {
        height: 1140px;
    }
}

/*** Sombras ***/
.sombra1 {
    position: absolute;
    grid-row: 4 / 5;
    background-color: var(--sombra);
    width: 100%;
    height: 100%;
}

@media (min-width: 992px) {
    .sombra1 {
        grid-row: 4 / 5;
    }
}

.sombra2 {
    position: absolute;
    grid-row: 5 / 6;
    background-color: var(--estela);
    width: 100%;
    height: 100%;
}

.sombra3 {
    position: absolute;
    background-color: var(--estela);
    width: 100%;
    height: 100%;
    grid-column: 5 / 10;
    grid-row: 1 / 7;
}

/*************** CARATULAS ***************/
/*** Perfil Corporativo ***/
.caratula {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    width: 100%;
    /* height: 85rem; */
}

.webp .perfilCorporativo {
    background-image: url(../img/Esporos04.webp);
}
.no-webp .perfilCorporativo {
    background-image: url(../img/Esporos04.png);
}

.webp .dondeEstamos {
    background-image: url(../img/Esporos02.webp);
}
.no-webp .dondeEstamos {
    background-image: url(../img/Esporos02.jpg);
}

.webp .queOfrecemos {
    background-image: url(../img/Esporos03.webp);
}
.no-webp .queOfrecemos {
    background-image: url(../img/Esporos03.png);
}

.webp .servicios {
    background-image: url(../img/Esporos05.webp);
    
}
.no-webp .servicios {
    background-image: url(../img/Esporos05.jpg);
}

.webp .especializados {
    background-image: url(../img/Esporos06.webp);
}
.no-webp .especializados {
    background-image: url(../img/Esporos06.jpg);
}

/*************** CONTENIDOS ***************/
/*** Logo ***/
.logo {
    grid-row: 2 / 4;
    max-width: 100%;
    margin: 0 auto;
    padding-top: 5rem;
}

@media (min-width: 768px) {
    .logo {
        grid-row: 1 / 4;
        /* max-width: 75%; */
    }
}

@media (min-width: 992px) {
    .logo {
        grid-column: 1 / 5;
        grid-row: 4 / 5;
        max-width: 100%;
        padding: 0;
    }
}

/* @media (min-width: 1200px) {
    .logo {
        max-width: 200%;
    }
} */

/*** PERFIL CORPORATIVO ***/
.contenidoPerfil {
    grid-row: 4 / 5;
    color: var(--blanco);
    text-align: justify;
    font-size: 1.7rem;
    margin: 0;
    padding: 4rem;
}

.contenidoPerfil span {
    color: var(--activo);
}

@media (min-width: 768px) {
    .contenidoPerfil {
        /* grid-row: 4 / 5; */
        font-size: 2.5rem;
        padding: 5rem 8rem;
        align-items: center;
    }
}

@media (min-width: 992px) {
    .contenidoPerfil {
        grid-column: 5 / 10;
        grid-row: 4 / 5;
        height: max-content;
        text-align: justify;
        padding: 0;
        margin: 0;
        font-size: 2rem;
        color: var(--blanco);
    }
}

@media (min-width: 1200px) {
    .contenidoPerfil {
        /* grid-column: 6 / 10; */
        font-size: 3.3rem;
    }
}

@media (min-width: 1700px) {
    .contenidoPerfil {
        font-size: 3.8rem;
    }
}

/*** DÓNDE ESTAMOS ***/
.dondeEstamos__contenido {
    grid-row: 4 / 5;
    color: var(--blanco);
    text-align: justify;
    font-size: 1.7rem;
    margin: 0;
    padding: 4rem;
}

.dondeEstamos__imagen {
    grid-row: 5 / 6;
    max-width: 70%;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .dondeEstamos__contenido {
        grid-row: 4 / 5;
        font-size: 2.5rem;
        /* padding: 0 2rem; */
        /* align-items: center; */
    }

    .dondeEstamos__imagen {
        /* grid-row: 6 / 7; */
        max-width: 50%;
    }
}

@media (min-width: 992px) {
    .dondeEstamos__contenido {
        grid-column: 3 / 10;
        grid-row: 2 / 3;
        font-size: 2.5rem;
    }

    .dondeEstamos__imagen {
        grid-column: 6 / 10;
        grid-row: 4 / 5;
        max-width: 100%;
        margin: 0 auto;
    }
}

@media (min-width: 1200px) {
    .dondeEstamos__contenido {
        grid-column: 5 / 10;
        grid-row: 2 / 3;
    }
}

@media (min-width: 1700px) {
    .dondeEstamos__contenido {
        font-size: 3rem;
    }
}

/*** QUÉ OFRECEMOS ***/
.queOfrecemos-c1 {
    grid-row: 4 / 5;
}

.queOfrecemos__contenidoCentral {
    grid-row: 5 / 6;
    color: var(--activo);
    text-transform: uppercase;
    font-weight: 900;
    padding: 1rem 0;
}

.queOfrecemos-c2 {
    grid-row: 6 / 7;
    margin-top: 1rem;
}

.queOfrecemos__encabezado {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    font-size: 4.5rem;
    color: var(--blanco);
    text-transform: uppercase;
    padding: 0 3rem;
}

.queOfrecemos__encabezado-h4 {
    text-align: center;
}

.queOfrecemos__encabezado-h4--c2 {
    grid-column: 2 / 4;
    text-align: left;
}

.queOfrecemos__contenido {
    display: flex;
    align-items: center;
    text-align: justify;
    color: var(--blanco);
    font-size: 1.7rem;
    padding: 0 3rem;
}

.queOfrecemos-logo {
    display: none;
}

.queOfrecemos__encabezado-logo {
    grid-column: 3 / 4;
    max-width: 80%;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .queOfrecemos__contenidoCentral {
        font-size: 3rem;
    }

    .queOfrecemos__encabezado {
        padding-left: 7rem;
        padding-right: 5rem;
    }

    .queOfrecemos__encabezado-h4,
    .queOfrecemos__encabezado-h4--c2 {
        font-size: 2rem;
        margin: 0;
    }

    .queOfrecemos__encabezado-logo {
        width: 50%;
    }

    .queOfrecemos__contenido {
        font-size: 2.5rem;
        padding: 0 7rem;
    }
}

@media (min-width: 992px) {
    .queOfrecemos-c1 {
        grid-column: 2 / 4;
        grid-row: 2 / 4;
    }

    .queOfrecemos__contenidoCentral {
        display: flex;
        align-items: center;
        grid-column: 4 / 6;
        grid-row: 3 / 5;
        background-color: var(--primario);
        height: 80%;
        font-size: 1.5rem;
        text-align: left;
        padding-left: 1.5rem;
    }

    .queOfrecemos-c2 {
        grid-column: 6 / 8;
        grid-row: 3 / 5;
        padding-right: 1rem;
    }

    .queOfrecemos__encabezado {
        display: block;
        font-size: 4rem;
        padding: 0;
    }

    .queOfrecemos__encabezado-h4,
    .queOfrecemos__encabezado-h4--c2 {
        font-size: 1rem;
        text-align: left;
    }

    .queOfrecemos__encabezado-logo {
        display: none;
    }

    .queOfrecemos__contenido {
        font-size: 1.8rem;
        text-align: left;
        padding: 0;
    }

    .queOfrecemos-logo {
        display: block;
        grid-column: 8 / 10;
        grid-row: 3 / 5;
        max-width: 100%;
        padding: 0;
    }

    .sombra2 {
        grid-row: 3 / 5;
    }
}

@media (min-width: 1200px) {
    .queOfrecemos-c2 {
        padding-right: 2rem;
    }

    .queOfrecemos__contenidoCentral {
        font-size: 2rem;
        padding-left: 3rem;
    }

    .queOfrecemos__contenido {
        font-size: 2.6rem;
    }
}

/*** SERVICIOS ***/
.servicios-logo {
    grid-row: 2 / 3;
    max-width: 30%;
    margin: 0 auto;
    padding-top: 7rem;
}

.servicios1,
.servicios2,
.servicios3,
.servicios4 {
    display: grid;
}

.servicios1 {
    grid-row: 3 / 4;
}

.servicios2 {
    grid-row: 4 / 5;
}

.servicios3 {
    grid-row: 5 / 6;
}

.servicios4 {
    grid-row: 6 / 7;
}

.servicios__contenido {
    display: grid;
    grid-template-columns: 10% 90%;
    column-gap: 1rem;
    align-items: center;
    background-color: var(--estela);
}

.servicios1__contenido__id,
.servicios2__contenido__id,
.servicios3__contenido__id,
.servicios4__contenido__id {
    font-size: 1.8rem;
    text-align: right;
}

.servicios1__contenido__valor,
.servicios2__contenido__valor,
.servicios3__contenido__valor,
.servicios4__contenido__valor {
    font-size: 1.8rem;
    text-transform: uppercase;
    color: var(--blanco);
}

@media (min-width: 768px) {
    .servicios__contenido {
        column-gap: 2rem;
    }

    .servicios1__contenido__id,
    .servicios2__contenido__id,
    .servicios3__contenido__id,
    .servicios4__contenido__id,
    .servicios1__contenido__valor,
    .servicios2__contenido__valor,
    .servicios3__contenido__valor,
    .servicios4__contenido__valor {
        font-size: 2.3rem;
    }
}

@media (min-width: 992px) {
    .servicios-logo {
        grid-column: 2 / 6;
        grid-row: 2 / 3;
        max-width: 250%;
        /* max-width: max-content; */
        padding: 0;
    }
    
    .servicios1,
    .servicios2,
    .servicios3,
    .servicios4 {
        grid-row: 1 / 2;
        /* position: relative; */
        /* top: 5rem; */
        max-height: 30rem;
        width: 15rem;
    }

    .servicios1 {
        grid-column: 7 / 8;
    }
    .servicios2 {
        grid-column: 8 / 9;
    }
    .servicios3 {
        grid-column: 9 / 10;
    }
    .servicios4 {
        grid-column: 10 / 11;
    }

    .servicios__contenido {
        grid-template-columns: 50% 50%;
        grid-template-rows: 20% 80%;
        column-gap: unset;
    }

    .servicios1__contenido__id,
    .servicios2__contenido__id,
    .servicios3__contenido__id,
    .servicios4__contenido__id {
        grid-column: 2 / 3;
        text-align: right;
        font-size: 1.5rem;
        margin: 0;
        padding-top: 15rem;
        padding-right: 2rem;
    }
    
    .servicios1__contenido__valor,
    .servicios2__contenido__valor,
    .servicios3__contenido__valor,
    .servicios4__contenido__valor {
        grid-row: 2 / 3;
        height: 50rem;
        font-size: 1.3rem;
        margin: 0;
        padding-left: 1rem;
        padding-top: 2rem;
    }
}

@media (min-width: 1400px) { 
    .servicios1,
    .servicios2,
    .servicios3,
    .servicios4 {
        width: 25rem;
    }

    .servicios1__contenido__id,
    .servicios2__contenido__id,
    .servicios3__contenido__id,
    .servicios4__contenido__id {
        font-size: 2.2rem;
        padding-top: 20rem;
        padding-right: 3rem;
    }

    .servicios1__contenido__valor,
    .servicios2__contenido__valor,
    .servicios3__contenido__valor,
    .servicios4__contenido__valor {
        font-size: 2.2rem;
        padding-left: 2rem;
        padding-top: 3rem;
    }
}


/*** SERVICIOS ESPECIALIZADOS ***/
.especializados-contenido {
    grid-row: 4 / 5;
    color: var(--blanco);
    text-align: justify;
    font-size: 3rem;
    margin: 0;
    padding: 4rem;
}

@media (min-width: 768px) {
    .especializados-contenido {
        font-size: 5.8rem;
        padding: 5rem 8rem;
        align-items: center;
    }
}

@media (min-width: 992px) {
    .especializados-contenido {
        grid-column: 5 / 10;
        grid-row: 4 / 5;
        height: max-content;
        font-size: 5rem;
        color: var(--blanco);
        text-align: justify;
        padding: 0;
        /* margin-right: 3rem; */
        margin: 0;
    }
}

@media (min-width: 1200px) {
    .especializados-contenido {
        font-size: 7rem;
    }
}

/*************** FOOTER ***************/
.footer {
    background-color: var(--bg-footer);
    padding: 2rem;
}

.contenedor__footer {
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.legal,
.nosotros,
.contacto {
    margin: 1rem 0;
}

.footer__encabezado {
    font-weight: 900;
    margin: 0;
}

.footer__texto {
    color: var(--blanco);
    font-size: 1.2rem;
}

.footer__iconos {
    display: flex;
    justify-content: space-evenly;
    font-size: 2rem;
    color: var(--blanco);
    margin-top: 1.5rem;
}

.footer__copy {
    color: var(--blanco);
    font-size: 1rem;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .footer__iconos {
        margin: 1rem 2rem;
    }

    .footer__copy {
        display: flex;
        justify-content: flex-end;
    }
}

@media (min-width: 992px) {
    .footer__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        text-align: left;
    }

    .footer__encabezado {
        text-align: left;
    }

    .footer__iconos {
        justify-content: space-between;
        font-size: 2.5rem;
        margin: 1rem 2rem;
    }

    .footer__copy {
        grid-column: 2 / 4;
    }
}