@font-face {
    font-family: 'Arial';
    src: url('fonts/arial.ttf') format('truetype');
    font-weight: 600;
    font-style: bold;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}



@media screen {

    :root{
       /* --heigh-window  : calc((100vw * 1024) / 1920);
        --window-width  : 1200px;
        --window-centro : calc(calc((100vw * 1024) / 1920) / 2);
*/
        --window : 100vw;
        --heigh-window  : 1024px;
        --window-width  : 1200px;
        --window-centro : 240px;

        --pos_ajolote_y : 1123px;
        --pos_ajolote_x : 422px;
    }

    
    /********************* estilos comun ****************************/
    div,h1,h2,h3,h4,p{
        margin:0;
        padding:0;
        display:block;
    }
    * { margin: 0; padding: 0;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
    }
    body {
        background-color:white;
        width:1920px;
        padding:0px;
        margin:0px;
        display:block;
        font-size:24px;
        font-family: 'Arial';
        font-weight: 400;
        background-color: white;
    }
    a{
        text-decoration:none;
    }
        
    section{
        width:100%;
        float:left;
    }
    #principal{
        overflow:hidden;
        width:1920px;
    }
    #contenido{
        width:100%;
        float:left;
    }
        
    .cont-centrado{
        width:var(--window-width);
        margin:auto;
        display: block;
      
    }
    section{
        width:100%;
        float:left;
    }
    header{
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-between;
    }
    header .logo{
        width: 27%;
        display: flex;
        align-items: center;
        justify-content: end;


    }
    header .logo img{
        width: 15%;
        margin-right: 20px;
    }
    header menu{
        width: 83%;
        background-color:#e46435;
        display: flex;
        justify-content: center;
        align-items: center;
    }

  

    /******************* menu *************************/
    .btnMenu{
        width:40px;
        height:40px;
        display:block;
    }
    .btnMenu .btn{
        width:100%;
        height:100%;
        float:left;
        display:block;
    }
    .btnMenu span {
        background-color: #ffffff;
        position: relative;
        height: 4px;
        width: 100%;
        display: block;
    }

    .linea1 {
        margin-top: 0px;
    }
    .linea2 {
        margin-top: 10px;
    }
    .linea3 {
        margin-top: 10px;
    }


    .animbtnM {
        transition: all 0.2s ease-out 0s;
        -webkit-transition: all 0.2s ease-out 0s;
    }


    .linea1.mact {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        margin-left: 0px;
        margin-top: 19px
    }
    .linea2.mact {
        display: none;
    }
    .linea3.mact {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        margin-left: 0px;
        margin-top: 0px;
    }
    /**************************** objetos globales *************************/
    .boton1{
        background-image:url(images/boton1.png);
        width:190px;
        height: 71px;
        display: flex;
        justify-content: center;
        align-items: center;
        color:white;
        margin:auto;
        animation: glown;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-direction: alternate;
        margin-top:30px;
    }
    @keyframes glown {
        from {filter: drop-shadow( 0px 0px 5px #ff4f00);}
        to {filter:drop-shadow( 0px 0px 10px #ff4f00);}
    } 
    /********************* secciones fondo ***********************/
    #pd{
        background-image: url(images/fondo_total.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }
    #servicios,#posicionamiento,#redes_sociales,#nosotros,#casos_exito{
        width: 100%;
        background-position: center top;
        z-index: 999;
        position: relative;
        height:var(--heigh-window);
        
    }
    #servicios{
        padding-top: 4%;
    }
    #posicionamiento{
        padding-top: 2%;
    }
    #redes_sociales{
        padding-top: 20%;
    }


   /* #servicios{
        background-image: url(images/fondopd_01.webp);
        background-repeat: no-repeat;
        background-size: cover;
        height:var(--heigh-window);
    }
    #posicionamiento{
        background-image: url(images/fondopd_02.webp);
        background-repeat: no-repeat;
        background-size: cover;
        height: var(--heigh-window);
    }
    #redes_sociales{
        background-image: url(images/fondopd_03.webp);
        background-repeat: no-repeat;
        background-size: cover;
        height: var(--heigh-window);
    }
    #nosotros{
        background-image: url(images/fondopd_04.webp);
        background-repeat: no-repeat;
        background-size: cover;
        height: var(--heigh-window);
    }
    #casos_exito{
        background-image: url(images/fondopd_05.webp);
        background-repeat: no-repeat;
        background-size: cover;
        height: var(--heigh-window);
    }*/
    

/*********************** evolucion ****************/
    #evolucion{
        margin-top:100px;
        margin-bottom: 100px;
        height:calc(1024px - 80px);
    }
    .animacion-evol{
        position: relative;
        width: 100%;
        height: 700px;
    }
    .animacion-evol .cont-centrado{
        display: flex;
        justify-content: space-between;
    }
    #animflecha{
        width:535px;
        height: 535px;
        position: relative;
        filter:drop-shadow(2px 2px 10px rgb(61, 61, 61));
        margin-top: 149px;
    }
    .flecha{
        width:546px;
        height:546px;
        position:absolute;
        transition: transform 3s ease-in;
    }

    .flecha0{
        width:546px;
        height:546px;
        background-image: url(images/flecha0.png);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        transform: rotate(0deg);
        z-index: 105;
        display: block;
        position: absolute;
        opacity:0;
        filter: none;
    }

    .flecha1{
        background-image: url(images/flecha1.png);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        transform: rotate(0deg);
        z-index: 104;
        transition: transform 3s ease-in
    }

    .flecha2{
        background-image: url(images/flecha2.png);
        background-position: 0px 0px;
        background-repeat: no-repeat; 
        z-index: 103;
    }
    .flecha3{
        background-image: url(images/flecha3.png);
        background-position: 0px 0px;
        background-repeat: no-repeat; 
        z-index: 102;
    }
    .flecha4{
        background-image: url(images/flecha4.png);
        background-position: 0px 0px;
        background-repeat: no-repeat; 
        z-index: 101;
    }
    .flecha5{
        background-image: url(images/flecha5.png);
        background-position: 0px 0px;
        background-repeat: no-repeat; 
        z-index: 100;
    }
    .flecha5b{
        background-image: url(images/flecha5b.png);
        background-position: 0px 0px;
        background-repeat: no-repeat; 
        z-index: 105;
        filter: none;
        opacity:0;
        transition: transform 3s ease-in, opacity 1s;
    }


    .flecha {
        & figure{
            filter: drop-shadow(0px 0px 10px white);
            color:white;
            width: 86px;
            & img{
                width: 56px;
                height: 56px;
            }
        }
        & figcaption{
            font-size: 16px;
        }
    }

    .flecha1 {
        & figure{
            position: absolute;
            top: 237px;
            left: 35px;
            transform: rotate(284deg);
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            text-align: center;
            opacity:0;
            transition: opacity 1s;
        }
    }
    .flecha2 { 
        & figure{
            position: absolute;
            top: 234px;
            left: 23px;
            transform: rotate(208deg);
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            text-align: center;
            opacity:0;
            transition: opacity 1s;
        }
    }
    .flecha3 {
        & figure{
            position: absolute;
            top: 249px;
            left: 45px;
            transform: rotate(132deg);
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            text-align: center;
            opacity:0;
            transition: opacity 1s;
        }
    }
    .flecha4 { 
        & figure{
            position: absolute;
            top: 232px;
            left: 44px;
            transform: rotate(61deg);
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            text-align: center;
            opacity:0;
            transition: opacity 1s;
        }
    }
    .flecha5b { 
        & figure{
            position: absolute;
            top: 234px;
            left: 34px;
            transform: rotate(356deg);
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            text-align: center;
            opacity:0;
            transition: opacity 1s;
        }
    }
    .flechat{
        width:100px;
        height: 100px;
        position: absolute;
        top: calc(50% - 46px);
        left: calc(50% - 44px);
        animation: animflechas;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        & img{
            height: 100%;
            width: 100%;
            display: block;
        }
    
    }

    @keyframes animflechas{
        from { transform:rotate(0deg);}
        to {transform:rotate(360deg);}
    }


    .darwin_evol{
        background-image: url(images/Circulos.png);
        background-repeat: no-repeat;
        position: relative;
    }
    .imgdarwin{
        background-image: url(images/Darwin.png);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        width: 275px;
        height: 275px;
        top: 0px;
        left: 85px;
        position: relative;
        margin-bottom: 50px;
    }
    .darwin_evol h2{
        margin-left: 98px;
    }
/******************** titulo *************************/
    .info{
        width: 50%;
        text-align: center;
        margin: auto;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    h2{
        font-size: 50px;
        text-align: center;
        font-family: 'Poppins';
    }
    h2{
        font-size: 30px;
        text-align: center;
        margin-bottom: 0px;
        font-family: 'Poppins';
    }
    h3{
        font-size: 30px;
        text-align: center;
        margin-top: 10px;
        font-family: 'Poppins';
    }
    .titulo{
        font-family: 'Poppins';
        font-size: 70px;
        color:#00000036;
        background: linear-gradient(90deg, rgba(186,73,219,1) 42%, rgba(254,121,126,1) 100%);
        -webkit-background-clip: text;
        color: transparent;
        text-align:left;
        line-height: 127px;
        & span{
            font-size:100px;
            font-size: calc(var(--window-width) / 13 );
        }
    }
   
    .tituloprinposder{
        display:flex;
        justify-content:space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    .tituloprinposizq{
        display:flex;
        justify-content:space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    .tituloprinposizq .titulo{
        text-align: right;
    }
    .t1 {
        width:740px;
        margin-left: 20%;
    }
    .t2 {
        width:780px;
    }
    .t3 {
        width:630px;
        margin-left: 49%;
    }
    .t4 {
        width:630px;
        margin: auto;
    }

    vermas{
        width:100px;
    }
    .tituloprinposder vermas .admiracion, .tituloprinposizq vermas .admiracion{
        width:80px;
        height:200px;
        margin-bottom:20px;
        border-radius:40px;
       
       
        z-index: 9999;
        position: relative;
        overflow: hidden;
    }
    .t1 vermas .admiracion{
        animation: glow2;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-direction: alternate; 
    }
    .t2 vermas .admiracion{
        animation: glow;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-direction: alternate; 
    }
    .t3 vermas .admiracion{
        animation: glow3;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-direction: alternate; 
    }

    .t1 .admiracion::before{
        content:"";
        width:80px;
        height:200px;
        display: block;
        position: relative;
    }
    .t1 .admiracion::after{
        content:"";
        width:80px;
        height:200px;
        background-image: url(images/pildora1.png);
        background-size: cover;
        background-position: 0px 0px;
        background-repeat: no-repeat;
        display: block;
        position: absolute;
        top: 0px;
    }
    .t2 .admiracion::before{
        content:"";
        width:80px;
        height:200px;
        display: block;
        position: relative;
        background-repeat: no-repeat;
    }
    .t2 .admiracion::after{
        content:"";
        width:80px;
        height:200px;
        background-image: url(images/pildora2.png);
        background-size: 100%;
        background-position: 0px 0px;
        background-repeat: no-repeat;
        display: block;
        position: absolute;
        top: 0px;
    }
    .t3 .admiracion::before{
        content:"";
        width:80px;
        height:200px;
        display: block;
        position: relative;
        background-repeat: no-repeat;
    }
    .t3 .admiracion::after{
        content:"";
        width:80px;
        height:200px;
        background-image: url(images/pildora3.png);
        background-size: 100%;
        background-position: 0px 0px;
        background-repeat: no-repeat;
        display: block;
        position: absolute;
        top: 0px;
    }

    .tituloprinposder vermas .circulo, .tituloprinposizq vermas .circulo{
        width:80px;
        height:80px;
        border-radius:40px;
        position:relative;
        transition:1s width;
        font-size:30px;
        left:0px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition:1s width,1s left;
        color:white;
        font-family: fantasy;
    }
    
    .t1 vermas .circulo{
        background: radial-gradient(circle, rgba(109,111,219,1) 0%, rgba(36,208,237,1) 100%);
        animation: glow2;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-direction: alternate;  
    }
    .t2 vermas .circulo{
        background: radial-gradient(circle, rgba(255,186,74,1) 0%, rgba(255,139,18,1) 40%, rgba(220,121,100,1) 100%);
        animation: glow;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-direction: alternate;  
    }
    .t3 vermas .circulo{
        background: radial-gradient(circle, rgb(255 255 255 / 0%) 40%, rgb(255 255 255 / 12%) 100%),radial-gradient(circle, rgba(255,107,85,1) 0%, rgba(188,125,127,1) 100%);
        animation: glow3;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-direction: alternate;  
    }


    @keyframes glow3 {
        from {box-shadow: 0px 0px 10px #ff6b55;}
        to {box-shadow: 0px 0px 30px #ff6b55;}
    } 

    @keyframes glow2 {
        from {box-shadow: 0px 0px 10px #2ccce9;}
        to {box-shadow: 0px 0px 30px #2ccce9;}
    } 

    @keyframes glow {
        from {box-shadow: 0px 0px 10px #ffe211;}
        to {box-shadow: 0px 0px 30px #ffe211;}
    } 

    .tituloprinposder:hover vermas .circulo{
        width:300px;
        left:-220px;
        transition:1s width,1s left;
    }
    .tituloprinposizq:hover vermas .circulo{
        width:300px;
        left:0px;
        transition:1s width,1s left;
    }
    .tituloprinposder:hover vermas .circulo:after{
        content:" ";
        width: 280px;
        transition:1s width;
        word-wrap:nowraph;
        position:absolute;
    }
    .tituloprinposizq:hover vermas .circulo:after{
        content:" ";
        width: 280px;
        transition:1s width;
        word-wrap:nowraph;
        position:absolute;
    }
    .tituloprinposder vermas .circulo .txtcuadro,.tituloprinposizq vermas .circulo .txtcuadro{
        width:0px;
        height:30px;
        overflow:hidden;
        white-space:nowrap;
        text-align:center;
        transition: 1s width;
        position:relative;
        display: block;
    }

    .tituloprinposizq:hover vermas .circulo .txtanim img{
        width: 9px;
        height: 19px;
        display: block;
        margin: auto;
        transition: 1s margin;
    }

    .tituloprinposder:hover vermas .circulo .txtcuadro{
        width:150px;
        transition: 1s width;
    }
    .tituloprinposizq:hover vermas .circulo .txtcuadro{
        width:150px;
        transition: 1s width;
    }
    .tituloprinposder vermas .circulo .txtpos,.tituloprinposizq vermas .circulo .txtpos{
        position:absolute;
        left: calc(50% - 50px);
    }
    .txt-izq h3{
        text-align: left;
        margin-bottom: 10px;
    }
    .txt-izq,.txt-der{
        width: 100%;
        text-align: left;
        line-height: 32px;
        padding: 0px 6%;
    }
    .txt-der{
        color:white;
        text-align: right;
        padding-right: 30%;
    }
    .txt-izq2{
        color:white;
        text-align: left;
        padding-right: 20%;
        padding-left: 0px;
        line-height: 32px;
    }
    .txt-cent{
        text-align: justify;
        color:white;
        margin-top: 50px;
        font-size: 27px;
        line-height: 36px;
    }
    .txt-cent b{
        color:#b5591e;
    }
    .txt-cent b:nth-child(1){
        text-transform: uppercase;
        font-weight: bold;
    }

    #nosotros{
        padding-top: 7%;
    }
    #nosotros .logo{
        display: block;
        margin: auto;
        width: 20%;
    }

    #ajoloteanim1{
        background-image: url(images/ajolote-fases.png);
        width:467px;
        height: 260px;
        display: block;
        background-position: 0px 0px;
        background-repeat: no-repeat;
        position: absolute;
        top : 1123px;
        right: 234px;
        transition: top 3s;
    }

    #ajoloteanim2{
        background-image: url(images/ajolote-fases.png);
        width:467px;
        height: 260px;
        display: block;
        background-position: 0px -260px;
        background-repeat: no-repeat;
        position: absolute;
        top: 1859px;
        right: 373px;
        transition: top 3s;
    }

    #ajoloteanim3{
        background-image: url(images/ajolote-fases.png);
        width:467px;
        height: 260px;
        display: block;
        background-position: 0px -520px;
        background-repeat: no-repeat;
        position: absolute;
        top:2678px;
        right:1165px;
        transition: top 3s;
    }
    #ajoloteanim4{
        background-image: url(images/ajolote-fases.png);
        width:467px;
        height: 260px;
        display: block;
        background-position: 0px -780px;
        background-repeat: no-repeat;
        position: absolute;
        top:3087px;
        right:18px;
        transition: top 3s;
    }

    #ajoloteanim1.anim1{
        transition: top 2s;
    }
    #ajoloteanim2.anim2{
        transition: top 3s,right 3s;
    }
    #ajoloteanim3.anim3{
        transition: top 3s,right 3s;
    }
    #ajoloteanim4.anim4{
        transition: top 3s,right 3s;
    }


    #roca1{
       
        width: 1064px;
        height: 1287px;
        display: block;
        position: absolute;
        background-image: url(images/roca1.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
        top:1290px;
        right:0px;
        z-index: 99;
    }
    #roca2{
        
        width: 832px;
        height:991px;
        display: block;
        position: absolute;
        background-image: url(images/roca2.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
        top: 2361px;
        left: 4px;
        z-index: 99;
    }
    #submarino{
       
        width: 718px;
        height:590px;
        display: block;
        position: absolute;
        background-image: url(images/submarino.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
        top:2888px;
        right:0px;
        z-index: 99;
    }
    #footer{
        padding-top: 120px;
        color:#00214a;
    }
    #footer .columnas1, #footer .columnas2{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    
    #footer .columnas1 .col1{
        width:55%;
    }
    #footer .columnas1 .col2{
        width:480px;
        height: 480px;
        background-image: url(images/circulo.png);
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        float: right;
        filter: drop-shadow(-21px 49px 22px rgb(0,0,0,0.3));
    }
    #footer .columnas1 .col2 ul{
        list-style: none;
        text-align: center;
    }

    #footer .columnas2{
        display: flex;
        align-items: center;
    }
    #footer .columnas2 .col2b{
        width:45%;
        background-image: none;
    }
    #footer .columnas2 .col1a{
        width:206px;
    }

    #footer .columnas2 .logof img{
        width:100%;
        height: auto;
    }

    #footer .columnas2 .col2{
        width:469px;
        padding-left: 20px;
    }
    #footer .titulo {
        
        & span{
            font-size: 70px;
            line-height: 127px;
        }
    }
    #footer .tel{
        font-size: 54px;
        color:#00214a;
    }
    #footer .social{
        width: 50%;
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
    }
    #footer .social img{
        width: 50px;
        height: 50px;
    }
    #footer .separador{
        display: block;
        width: 90%;
        height:8px;
        margin: 50px 0px;
        background-color:#c25300;
    }
    #footer .sociosyclientes{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-row-gap: 30px;
    }
    #footer .sociosyclientes div{
        display: flex;
        align-items: center;
    }
    #footer .sociosyclientes img{
        width: 126px;
        height: auto;
    }




    #barraderechos{
        background-color: #c25300;
        text-align: center;
        padding: 20px 0px;
        font-size: 16px;
        margin-top:40px;
    }
    #barraderechos a{
        color: white;
        font-size: 16px;
        display: block;
    }

}