/* ANIMACION DE SCROLL SOBRE EL CONTENIDO */
@keyframes show {
    from {
        opacity: 0;
        scale: 90%;
    }

    to {
        opacity: 500;
        scale: 100%;
    }
}

img,
h1,
h2,
h3,
span,
p {
    view-timeline-name: --image;
    view-timeline-axis: block;
    animation-timeline: --image;
    animation-name: show;
    animation-range: entry 0% cover 30%;
    animation-fill-mode: both;
}

/* ANIMACION JAVAS PARA ICONO LOGO */

@font-face {
    font-family: 'LOGOTYPE';
    src: url(./fuentes/LOGOTYPE-ExtraBold.otf);
}

@font-face {
    font-family: 'Yapari Triallight';
    src: url(./fuentes/YapariTrial-Light.ttf);
}

@font-face {
    font-family: 'centgot';
    src: url(./fuentes/CenturyGothic.ttf);
}

/* Estilos generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scrollbar-color: #F19104 #000;

}

/* ================================================== */
/* MEMBRETE PAGINA */
.inicio {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url(./img/fonfo1.jpg);
    background-size: cover;
    width: 100%;
    height: 100vh;
}

.inicio .img {
    width: 46%;
}

.membt {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
}

.membt h1 {
    color: #F19104;
    font-family: 'Yapari Triallight';
    letter-spacing: 1px;
    font-size: 14px;
}

/* ================================================== */
/* SECCION INTRODUCCION */
.nosotros {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50vh;
    background: #000000;
}

.nosotros h1 {
    display: flex;
    justify-content: center;
    width: 100%;
    font-size: 20pt;
    font-family: 'LOGOTYPE';
    color: #F19104;
}

.nosotros p {
    width: 51%;
    font-size: 11pt;
    font-family: 'centgot';
    text-align: start;
    color: #fff;
}

/* ================================================== */
/* SECTION MISIO/VISION VALORES*/
.vision {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 90vh;
    background: #000;
}

.empre1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 50%;
    height: 72vh;
}

.vision .empre {
    width: 400px;
    height: 50vh;
}

.empre h1 {
    width: 45%;
    font-size: 20pt;
    font-family: 'LOGOTYPE';
    color: #F19104;
}

.empre p {
    font-size: 11pt;
    font-family: 'centgot';
    color: #ffffff;
    text-align: start;
}

/* ================================================== */
/* VALORES  CORPORATIVOS  */
.valor {
    width: 500px;
    height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.valor div {
    display: flex;
    align-items: center;
    gap: 30px;
}

.valor h1 {
    width: 45%;
    font-size: 20pt;
    font-family: 'LOGOTYPE';
    color: #F19104;
}

.valor img {
    width: 40px;
    height: 40px;
    transition: .5s ease;
}

.valor img:hover {
    transform: scale(1.2);
}

.valor p {
    font-size: 11pt;
    font-family: 'centgot';
    color: #ffffff;
}

/* ========================================================= */
/* SERVICIOS */
.logosclientes {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 130vh;
    background-image: url(./img/nuestrosservicios.png);
    background-color: #F19104;
    background-size: 70% 100%;
    background-repeat: no-repeat;
}

.servicios {
    width: 45%;
    height: 85%;
}

.services {
    display: flex;
    justify-content: space-around;
    align-items: start;
    flex-direction: column;
    gap: 3px;
    width: 90%;
    height: 110vh;
}

.servicios h1 {
    display: flex;
    width: 100%;
    font-size: 20pt;
    font-family: 'LOGOTYPE';
    line-height: 30px;
    color: #000000;
}

.servicios p {
    color: #000000;
    font-family: 'LOGOTYPE';
    font-size: 11pt;
}

.servicios .sencillo {
    font-size: 10pt;
    font-family: 'centgot';
}

.servicios li {
    width: 100%;
    font-size: 10pt;
    font-family: 'centgot';
}

/* ========================================================= */
/* SERVICIOS 2 */
.ser2 {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    width: 40%;
    height: 110vh;
}

.ser2 h1 {
    display: flex;
    justify-content: center;
    width: 55%;
    color: #000000;
    font-family: 'LOGOTYPE';
    line-height: 30px;
    font-size: 20pt;
}

.slider-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 85vh;
}

.slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    flex: 30%;
}

.slide img {
    width: 90px;
    height: 100%;
    transition: 0.5s ease-in-out;
}

.slide img:hover {
    transform: scale(1.1);
}

/* ========================================================= */
/*TITLEPRO*/
.titlepro {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10vh;
}

.titlepro h1 {
    display: flex;
    justify-content: start;
    align-items: flex-end;
    font-family: 'LOGOTYPE';
    font-size: 20pt;
    width: 70%;
    height: 100%;
    color: #2b1802;
}

/* ========================================================= */
/* PROYECTOS */
.proyectos {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 40vh;
}

/* ========================================================= */
/* ==== BASES 1 =========== */
.bases1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 60%;
    height: 85px;
    background: none;
}

.bases1 span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75px;
    height: 75px;
    border-radius: 10px 0 0 0;
    background: #F19104;
}

.bases1 img {
    width: 100%;
    height: 55px;
    transition: .5s ease;
}

.bases1 img:hover {
    transform: scale(1.1);
}

/* ========================================================= */
/* BASES 2 */
.bases2 {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 65px;
    width: 60%;
    height: 90px;
}

.bases2 .obrs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    width: 90px;
    height: 70px;
}

.bases2 h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 130px;
    height: 50px;
    font-size: 9pt;
    font-family: 'LOGOTYPE';
    gap: 5px;
}

.bases2 sup {
    font-size: 8pt;
    position: relative;
    bottom: 5px;
    right: 5px;
}

.bases2 p {
    font-size: 7pt;
    font-family: 'LOGOTYPE';
    gap: 90px;
}

/* ========================================================= */
/* TRABAJO DE CAMPO TITULO*/
.trabajodecampo {
    display: flex;
    justify-content: start;
    width: 100%;
    height: 20vh;
}

.trabajodecampo h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20pt;
    font-family: 'LOGOTYPE';
    width: 70%;
    height: 100%;
}

/* ========================================================= */
/* TRABAJO DE CAMPO TRABAJO DE CAMPO 0 */
.proyec2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 70vh;
}

.proyec2 img {
    width: 45%;
}

.proyec2 .content {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-direction: column;
    width: 45%;
    height: 40vh;
}

.proyec2 h1 {
    font-size: 10pt;
    font-family: 'LOGOTYPE';
}

.proyec2 p {
    width: 90%;
    color: #000;
    font-size: 10pt;
    font-family: 'centgot';
}

.proyec2 .subtitulo {
    font-family: 'centgot';
    font-size: 10pt;
    color: #F19104;
}

.proyec2 .subtitulo span {
    color: #000;
}

/* ========================================================= */
/* TRABAJO DE CAMPO 1 */
.traca1 {
    display: flex;
    width: 100%;
    height: 110vh;
}

.textotraca1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 60%;
}

.textotraca1 h1 {
    width: 50%;
    font-size: 12pt;
    font-family: 'LOGOTYPE';
}

.textotraca1 .subtitulo {
    color: #F19104;
    font-size: 9pt;
    font-family: 'centgot';
}

.textotraca1 .subtitulo span {
    color: #000000;
}

.textotraca1 p {
    width: 50%;
    color: #000;
    font-size: 10pt;
    font-family: 'centgot';
}

.imagentraca1 {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 47%;
    height: 100%;
}

.imagentraca1 img {
    width: 100%;
    height: 50%;
}

/* ========================================================= */
/* TRABAJO DE CAMPO 2 */
.traca2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 110vh;
}

/*.imagenytextotraca2A {
width: 10%;
height: 150vh;
background: red;
}*/

/*.imagenytextotraca2 {
width: 100%;
height: 150vh;
background: blue;
}*/

.imagenytextotraca2A .aliniz,
.imagenytextotraca2 .aliniz {
    width: 80%;
    background: none;
}

/*.imagenytextotraca2 .aliniz {
width: 80%;
    background: orange;
}*/

.imagenytextotraca2A .subtitulo,
.imagenytextotraca2 .subtitulo {
    color: #F19104;
    font-size: 10pt;
    font-family: 'centgot';
}

.imagenytextotraca2A .subtitulo span,
.imagenytextotraca2 .subtitulo span {
    font-size: 9pt;
    color: #000000;
}

/*.imagenytextotraca2 .subtitulo {
    color: #F19104;
    font-size: 10pt;
    font-family: 'centgot';
}*/

/*.imagenytextotraca2 .subtitulo span {
    font-size: 9pt;
    color: #000000;
}*/

.imagenytextotraca2A p,
.imagenytextotraca2 p {
    width: 100%;
    color: #000;
    font-size: 10pt;
    font-family: 'centgot';
    background: none;
}

/*.imagenytextotraca2 p {
    width: 100%;
    color: #000;
    font-size: 10pt;
    font-family: 'centgot';
}*/

.imagenytextotraca2 .texto {
    max-width: 400px;
    background: none;
}

.imagenytextotraca2A .texto,
.imagenytextotraca2 .texto {
    max-width: 400px;
    background: none;
}

.traca2 h1 {
    font-size: 10pt;
    font-family: 'LOGOTYPE';
}

.textotraca2 h1 {
    font-size: 12pt;
    font-family: 'LOGOTYPE';
}

.imagenytextotraca2,
.imagenytextotraca2A {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    gap: 20px;
    width: 90%;
    height: 90%;
    background: none;
}

.imagenytextotraca2 .fila,
.imagenytextotraca2A .fila1 {
    display: flex;
    justify-content: center;
    width: 80%;
    height: 60%;
}

.imagenytextotraca2 img,
.imagenytextotraca2A img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}


/* ========================================================= */
/* TRABAJO DE CAMPO 3 */
.traca3 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 120vh;
}

.textotraca3 {
    width: 80%;
    height: 37vh;
}

.textotraca3 h1 {
    display: flex;
    align-items: center;
    width: 70%;
    height: 40px;
    font-size: 12pt;
    font-family: 'LOGOTYPE';
}

.textotraca3 .subtitulo {
    color: #F19104;
    font-size: 10pt;
    font-family: 'centgot';
}

.textotraca3 .subtitulo span {
    font-size: 9pt;
    color: #000000;
}

.textotraca3 p {
    color: #000;
    font-size: 10pt;
    font-family: 'centgot';
}

.imagentraca3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 60%;
}

.imagentraca3 img {
    width: 100%;
    height: 100%;
}

/* ========================================================= */
/* TRABAJO DE CAMPO 4 */
.traca4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 20px;
    height: 120vh;
}

.textotraca4 h1 {
    font-size: 12pt;
    font-family: 'LOGOTYPE';
}

.textotraca4 .subtitulo {
    color: #F19104;
    font-size: 10pt;
    font-family: 'centgot';

}

.textotraca4 .subtitulo span {
    font-size: 9pt;
    color: #000000;
}

.textotraca4 p {
    width: 100%;
    font-size: 10pt;
    font-family: 'centgot';
}

.textotraca4,
.imagentraca4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 20px;
}

.textotraca4 .cajatexto {
    width: 500px;
    height: 320px;
}

.textotraca4 {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
}

.FILA4 img {
    width: 520px;
    height: 296px;
}

.columna-imagenes {
    display: flex;
    flex-direction: column;
    gap: 35px;
    align-items: center;
}

.columna-imagenes img {
    width: 90%;
    height: 100%;
}

/* =========================================================
/* TRABAJO DE CAMPO 5 */
.traca5 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    height: 110vh;
}

.traca5 .textotraca5 {
    width: 75%;
    height: 30vh;
}

.textotraca5 h1 {
    font-size: 12pt;
    font-family: 'LOGOTYPE';
}

.textotraca5 .subtitulo {
    color: #F19104;
    font-size: 10pt;
    font-family: 'centgot';

}

.textotraca5 .subtitulo span {
    font-size: 9pt;
    color: #000000;
}

.textotraca5 p {
    font-size: 10pt;
    font-family: 'centgot';
}

.imagentraca5 {
    display: flex;
    justify-content: center;
    width: 80%;
    height: 65vh;
}

.traca5 img {
    width: 100%;
    height: 100%;
}

/* =========================================================
/* TRABAJO DE CAMPO 6 */
.traca6 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 135vh;
}

.imagentraca6 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
    height: 100%;
}

.imagentraca6 img {
    width: 85%;
    height: 85%;
}

.imagentraca6 .cuadros {
    width: 5%;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 18px;
}

.imagentraca6 .cuadros img {
    width: 29px;
    height: auto;
}

.textotraca6 {
    width: 95%;
    height: 100%;
}

.textotraca6 h1 {
    font-size: 12pt;
    font-family: 'LOGOTYPE';
}

.textotraca6 .subtitulo {
    color: #F19104;
    font-size: 10pt;
    font-family: 'centgot';
}

.textotraca6 .subtitulo span {
    font-size: 9pt;
    color: #000000;
}

.textotraca6 p {
    width: 90%;
    font-size: 10pt;
    font-family: 'centgot';
}

.fila-inferior {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 75%;
    height: 35%;
}

/* =========================================================*/
/* TRABAJO DE CAMPO 7 */
.traca7 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
    width: 100%;
    height: 120vh;
}

.texto-imagen-columna {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: start;
    gap: 20px;
    width: 80%;
    height: 100vh;
}

.texto-imagen-columna h1 {
    width: 70%;
    font-size: 12pt;
    font-family: 'LOGOTYPE';
}

.texto-imagen-columna .subtitulo {
    color: #F19104;
    font-size: 10pt;
    font-family: 'centgot';
}

.texto-imagen-columna .subtitulo span {
    font-size: 9pt;
    color: #000000;
}

.texto-imagen-columna p {
    font-size: 10pt;
    font-family: 'centgot';
}

.imagen-texto-columna img {
    width: 100%;
}

/* =========================================================
/* TRABAJO DE CAMPO 8 */
.traca8 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    width: 100%;
    height: 105vh;
}

.textotraca8 {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 80%;
    height: 100vh;
}

.textotraca8 h1 {
    width: 100%;
    font-size: 12pt;
    font-family: 'LOGOTYPE';
}

.textotraca8 .subtitulo {
    color: #F19104;
    font-size: 10pt;
    font-family: 'centgot';

}

.textotraca8 .subtitulo span {
    font-size: 9pt;
    color: #000000;
}

.textotraca8 p {
    width: 100%;
    font-size: 10pt;
    font-family: 'centgot';
}

.imagentraca8 {
    display: flex;
    /*    flex-direction: column;*/
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 100vh;
}

.imagentraca8 img {
    width: 75%;
}

.textotraca8 img {
    width: 100%;
    height: 50vh;
}

/* ========================================================= */
/* TRABAJO DE CAMPO 9 */
.proyec9 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    width: 100%;
    height: 70vh;
}

.proyec9 img {
    width: 60%;
    height: 100%;
}

.proyec9 .content {
    display: flex;
    justify-content: space-around;
    align-items: start;
    flex-direction: column;
    width: 40%;
    height: 100%;
}

.proyec9 h1 {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
    font-size: 12pt;
    font-family: 'LOGOTYPE';
}

.proyec9 p {
    color: #000;
    font-size: 10pt;
    font-family: 'centgot';
    width: 85%;
}

.proyec9 .subtitulo {
    width: 50%;
    font-family: 'centgot';
    font-size: 10pt;
    color: #F19104;
}

.proyec9 .subtitulo span {
    font-size: 9pt;
    color: #000;
}

/* ========================================================= */
/* TRABAJO DE CAMPO 10 */
.traca10 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80vh;
}

.textotraca10 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 54%;
    height: 75vh;
}

.text10 {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    width: 60%;
    height: 65vh;
}

.textotraca10 h1 {
    font-size: 12pt;
    font-family: 'LOGOTYPE';
}

.textotraca10 .subtitulo {
    color: #F19104;
    font-size: 10pt;
    font-family: 'centgot';
}

.textotraca10 .subtitulo span {
    font-size: 9pt;
    color: #000000;
}

.textotraca10 p {
    width: 100%;
    font-size: 10pt;
    font-family: 'centgot';
}

.imagentraca10 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
}

.imagentraca10 img {
    width: 100%;
}

/* ========================================================= */
/* FOOTER 01 */
.fin {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
    font-size: 15px;
    width: 100%;
    height: 60vh;
    font-family: 'LOGOTYPE';
    background: #000;
}

.fin .color {
    color: #F19104;
    font-family: 'LOGOTYPE';
    font-size: 28pt;
}

.fin h3 {
    color: #F19104;
    font-family: 'Yapari Triallight';
    font-size: 11pt;
    letter-spacing: 2px;
}

.fin p {
    background: #000;
    font-family: 'centgot';
    text-align: center;
    font-size: 13pt;
}

/* ========================================================= */
/* FIN2 */
.fin2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40vh;
}

.fin2 a img {
    width: 130px;
}