/* ===================================================================================

* Theme Name: Liko Child
* Theme URI: https://wp.hixstudio.net/liko/
* Author: fox-themes 
* Author URI: https://themeforest.net/user/fox-themes
* Description: Liko - Creative Agency & Portfolio WordPress Theme
* Version: 1.0.0
* Template: liko
* License: GNU General Public License version 3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
* Tags: one-column, right-sidebar, left-sidebar, custom-menu, featured-images, post-formats, sticky-post, translation-ready

* We encourage you to create Child theme for any modifications you will want to do.

* Why use Child theme?

* Because of future updates we may provide for this theme that will overwrite your
* modifications and all your custom work.

* If you are not familiar with Child Themes, you can read about it here:
* http://codex.wordpress.org/Child_Themes
* http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/

====================================================================================== */

h2 span {
	font-weight: 700;
}

/* ==== Menu Custom === */

.tp-header-area .container {
    max-width: 100%;
}

.tp-header-area .row.align-items-center {
  display: flex;
  flex-wrap: nowrap;
}

.tp-header-area .row.align-items-center > div:nth-child(1) {
  flex: 0 0 auto;
  width: auto; 
}
.tp-header-area .row.align-items-center > div:nth-child(2) {
  flex: 1 1 auto;
  max-width: 100%;
}


.tp-header-area .row.align-items-center > div:nth-child(3) {
  display: none; 
}
/*.tp-inner-header-area .row.align-items-center > div {
  width: 50% !important;
  max-width: 50% !important;
}*/


.liko-breadcrumb-padding{
	background-color:#0B637F !important;
}

.liko-breadcrumb-padding .breadcrumb__title{
	padding-top:40px;
	color:#FFFFFF;
	font-family: "kinetika", Sans-serif !important;
	font-size:60px;
}
@media (max-width: 1199.98px) { 
  .tp-header-area .row.align-items-center {
  flex-direction: row !important;
  align-items: center !important;
}

.tp-header-area .row.align-items-center > div {
  width: 50% !important;
  max-width: 50% !important;
}

.tp-header-height .header-sticky .container{
  padding: 0px 40px;
}
.tp-header-area .row.align-items-center > div:nth-child(3) {
      display: block; 
  }
}

.tp-header-area .tp-header-logo img {
    width: 240px !important;
}

.tp-main-menu-content .tp-nav-menu {
	text-align: right;
}

.tp-main-menu-content .tp-nav-menu .nav-links {
   font-family: "kinetika", Sans-serif !important;
    font-weight: 400 !important;
	color: #FFFFFF;
	text-align:left;
}
.tp-header-area .tp-main-menu-content ul li a {
    color: #FFFFFF;
    font-size: 18px;
    text-transform: capitalize;
}

.tp-header-area.header-sticky{
	background: #0B637F;
}

.tp-header-bar button span{
    background-color: #FFFFFF;
}

.tp-offcanvas-area{
    background: #0B637F;
}

/* ==== Menu Custom === */



/* Contenedor general */
.custom-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Fila con dos columnas */
.form-two-cols {
    display: flex;
    gap: 20px;
}

/* Columna individual */
.form-col {
    flex: 1;
}

/* Inputs estilo */
.custom-form input,
.custom-form textarea {
    width: 100%;
    padding: 12px 14px;
    border:none;
    border-radius: 40px;
    font-size: 15px;
    box-sizing: border-box;
    background:#F5F5F5;
    font-family: "kinetika", Sans-serif;
}

.custom-form input.wpcf7-submit{
    width:30%;
    background:#2F2F2F;
    color:#FFFFFF;
}

.custom-form input.wpcf7-submit:hover{
    background:rgba(169, 16, 24, 0.10);
    color:#2F2F2F;
}
    


.custom-form label {
    font-weight: 400;
    margin-bottom: 5px;
    display: block;
    font-family: "kinetika", Sans-serif;
    font-size:16px;
    color:#0B637F;
}

/* Responsive */
@media (max-width: 768px) {
    .form-two-cols {
        flex-direction: column;
    }
    
    .custom-form input.wpcf7-submit{
    width:50%;
    
}
}

.selected-flag{
    background-color:transparent !important;
}
/* ==== End Contact Form Custom === */



/* === Secction Abouth 2 === */
.borde-renovex {
    position: relative;
    padding-right: 40px; /* espacio para el borde */
}

.borde-renovex::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 21px;
    height: 100%;

    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='21' height='169' viewBox='0 0 21 169' fill='none'><path d='M1 0V62.86L19.0995 80.63L1.22421 98.17V168.69' stroke='%23E7E9B5' stroke-width='2' stroke-miterlimit='10'/></svg>");

    /* Ocultarlo completamente al inicio */
    clip-path: inset(0 0 100% 0); 
    transition: clip-path 1.2s ease-out;
}


@media (max-width: 992px) {
    .borde-renovex {
        position: relative;
        padding-bottom: 40px; /* espacio para el borde abajo */
        padding-right: 0;
    }

    .borde-renovex::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 31px;

        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;

        background-image: url("data:image/svg+xml;utf8,<svg width='1392' height='36' viewBox='0 0 1392 36' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1389.1 1.98535H1058.02H726.94L695.836 33.0826L665.122 2.37615H1.98511' stroke='%23E7E9B5' stroke-width='3.97' stroke-miterlimit='10' stroke-linecap='round'/></svg>");

        /* Oculto COMPLETAMENTE desde la izquierda */
        clip-path: inset(0 100% 0 0); 
        transition: clip-path 1.2s ease-out;
        top: 50%;
        transform: translateY(80px);
    
    }


}




/*Clase que se activa al entrar en viewport */
.borde-renovex.animated::after {
    clip-path: inset(0 0 0 0);
}


@keyframes bordeReveal {
    0% {
        clip-path: inset(100% 0 0 0); /* totalmente oculto */
    }
    100% {
        clip-path: inset(0 0 0 0); /* totalmente visible */
    }
}

/* === End Secction Abouth 2 === */


/* === Secction Process  === */

/*#carro {
  animation: moverCarro 4s ease-in-out infinite alternate;
}
@keyframes moverCarro {
  from { transform: translateX(0); }
  to   { transform: translateX(200px); }
}*/

svg .n-fill{
    fill: none;
}

#carro {
  animation: moverCarro 8s linear infinite;
}


#nube1{
    animation: moverCarro 8s linear infinite;
}

#nube2{
    animation: moverCarro 6s linear infinite;
}



@keyframes moverCarro {
  0% {
    transform: translateX(-120px);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateX(800px);
    opacity: 0;
  }
}


@keyframes moverDerechaLoop {
    0% {
        transform: translateX(0); /* posición actual */
    }
    50% {
        transform: translateX(400px); /* sale por la derecha */
    }
    51% {
        transform: translateX(-50px); /* reaparece por la izquierda */
    }
    100% {
        transform: translateX(400px); /* sigue hasta salir por la derecha otra vez */
    }
}


/*
.s-humo {
    stroke: #B5B5B5;
    stroke-width: 1;
    fill: none;

    
    stroke-dasharray: 200;
    stroke-dashoffset: 200;

    animation: dibujar 3s ease-in-out infinite;
}

@keyframes dibujar {
    0% {
        stroke-dashoffset: 200;
        opacity: 0.3;
    }
    50% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    100% {
        stroke-dashoffset: -200;
        opacity: 0.3;
    }
}
*/
.s-humo {
    animation: onda 3s ease-in-out infinite;
    transform-origin: center;
    opacity: .7;
}

@keyframes onda {
    0% {
        transform: translateY(10px) scaleX(1);
        opacity: 0;
    }
    30% {
        opacity: .9;
    }
    50% {
        transform: translateY(-10px) scaleX(1.05);
    }
    100% {
        transform: translateY(-40px) scaleX(.95);
        opacity: 0;
    }
}




#avion {
    transform-origin: center;
    animation:
        rotarInicial 1.2s ease-out forwards,
        vuelo 3s ease-in-out infinite 1.2s; /* empieza después de la rotación */
}

/* Solo se ejecuta una vez */
@keyframes rotarInicial {
    0% {
        transform: rotate(45deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Animación de vuelo infinito */
@keyframes vuelo {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(0deg); /* se puede agregar vibración si quieres */
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

#check {
  stroke: #51A897;
  stroke-width: 1;
  fill: #51A897;
  stroke-linecap: round;
  animation: drawCheck 2.5s ease-in-out infinite;
}

@keyframes drawCheck {
  0% {
    stroke-dasharray: 0 100;
    opacity: 0.2;
  }
  25% {
    stroke-dasharray: 40 100;
    opacity: 1;
  }
  50% {
    stroke-dasharray: 80 100;
  }
  75% {
    opacity: 1;
  }
  100% {
    stroke-dasharray: 0 100;
    opacity: 0.2;
  }
}



.gas {
  stroke: #E7E8B5;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 10 2;
  animation: waveGas 5s cubic-bezier(.55,.08,.68,.53) infinite;
}

@keyframes waveGas {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 60; /* ← Antes era negativo, ahora positivo */
  }
}


/*=== Metas ===*/

@media (max-width: 992px) {
    .swiper-slide  .swiper-slide-inner .swiper-slide-image{
        width: 90%;
    }
}
/*===End Metas ===*/




.bordes-procesos {
    position: relative;
    padding-bottom: 40px; /* espacio para el borde inferior */
}

.bordes-procesos::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 31px; /* altura del borde */
    
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    /* Usamos un SVG horizontal ahora */
    background-image: url("data:image/svg+xml;utf8,<svg width='1392' height='36' viewBox='0 0 1392 36' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1389.1 1.98535H726.94L695.836 33.0826L665.122 2.37615H1.98499' stroke='white' stroke-width='3.97' stroke-miterlimit='10' stroke-linecap='round'/></svg>");

    /* Ocultarlo completamente al inicio */
    clip-path: inset(0 100% 0 0); /* empieza oculto desde abajo */
    transition: clip-path 1.2s ease-out;
}

.bordes-procesos.animated::after {
    clip-path: inset(0 0 0 0); /* mostrar completo */
}




.btn-proceso {
    position: sticky;
    top: 0; /* o el valor que necesites */
    z-index: 9999;
}

/*.btn-proceso.fijo {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
}*/


.nuestro-proceso {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all .4s ease;
}

.nuestro-proceso.active {
    max-height: 100%; /* ajusta según tu contenido */
    opacity: 1;
}



/* === End Secction Process  === */

/* ===  Secction proyectos  === */
@media (max-width: 992px) {
    .imagen-proyecto{
        height: 100%;
        width: 100%;
    }
}

/* === End Secction proyectos  === */