/*
Theme Name: FinPath Child
Theme URI: https://finpath.keydesign.xyz/
Description: Finance & Consulting Elementor WordPress theme
Author: Key-Design
Author URI: http://themeforest.net/user/Key-Design
Template: finpath
Version: 1.0
License: Envato Standard License
License URI: https://themeforest.net/licenses/standard
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-menu, featured-images, flexible-header, post-formats, sticky-post, translation-ready
Text Domain: finpath-child
*/

/*
Theme Name: FinPath Child
Theme URI: https://finpath.keydesign.xyz/
Description: Finance & Consulting Elementor WordPress theme
Author: Key-Design
Author URI: http://themeforest.net/user/Key-Design
Template: finpath
Version: 1.0
License: Envato Standard License
License URI: https://themeforest.net/licenses/standard
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-menu, featured-images, flexible-header, post-formats, sticky-post, translation-ready
Text Domain: finpath-child
*/

/*html, body, header, footer, p, a, ul, li, ol, h1, h2, h3, h4, h5, h6, span {
    font-family: 'Silka', sans-serif !important;
}*/

:root {
	--orange: #FF6462;
	--blue: #1E22AA;
}

.elementskit-navbar-nav-default .elementskit-submenu-panel>li>a {
    color: white !important;
}

.e-con.elementskit-parallax-multi-container.header-static {
	transition: none !important;
}

.header-sticky {
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.5s ease, transform 0.5s ease;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.menu-static .ekit-menu-nav-link, .language-menu-static .ekit-menu-nav-link, .language-menu-sticky .ekit-menu-nav-link {
    font-style: normal !important;
}

.menu-sticky .ekit-menu-nav-link {
    font-style: normal !important;
}

.menu-sticky a.dropdown-item, .menu-static a.dropdown-item {
    white-space: normal;
}

.menu-sticky .elementskit-dropdown.elementskit-submenu-panel, .menu-static .elementskit-dropdown.elementskit-submenu-panel {
    width: -webkit-fill-available;
}

.elementskit-dropdown.elementskit-submenu-panel li {
    padding: 15px 20px !important;
}

.menu-static .elementskit-dropdown.elementskit-submenu-panel li:hover {
    background-color: var(--orange);
}

.menu-sticky .elementskit-dropdown.elementskit-submenu-panel li:hover {
    background-color: var(--blue);
}

.elementskit-dropdown.elementskit-submenu-panel li a:hover::after {
    display: none;
}

.header-button-search a span {
   color: white !important;
   font-size: 1rem !important;
   margin-left: 6px !important;
}

.footer-info, .footer-info a {
    color: white !important;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
}

.subject-text-page p, .subject-text-page ul li {
    font-size: 1.9rem;
    line-height: 2.4rem;
}

.elementskit-submenu-panel {
    border: 0px !important;
}

.ekit-nav-dropdown-hover .menu-item-object-custom.elementskit-dropdown-has > .elementskit-dropdown {
    text-align: center !important;
    top: 150% !important;
    /*left: -50% !important;*/
}

.elementskit-navbar-nav-default .elementskit-dropdown-has .elementskit-dropdown .elementskit-submenu-panel {
    margin-top: 0px !important;
}

.site-header .menu-item>a {
	white-space: normal !important;
}

.site-header .menu-item.menu-item-has-children {
    justify-content: center !important;
}

.list-ciclo-formativo strong {
    color: white;
}

.list-ciclo-formativo span, .list-etwinning span {
    font-weight: 600;
}

.subject-text-page strong {
    color: var(--blue);
}

.cky-notice-des p {
    font-size: 0.9rem !important;
    line-height: 1.3rem;
}

.list-organigrama span, .list-contact ul li a span span, .list-horario ul li span span {
    font-weight: 600;
}

.swiper-nav-button.swiper-button-prev {
    left: -35px !important;
}

.swiper-nav-button.swiper-button-next {
    right: -35px !important;
}

/* ----- ANIMATION SQUARE BLUE ----- */
/* Esquina superior izquierda (before) */
.animation-square-blue::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 15px;
  width: 35px;
  height: 35px;
  border-top: 6px solid var(--blue);
  border-left: 6px solid var(--blue);
  transition: all 0.5s ease;
}

/* Esquina inferior derecha (after) */
.animation-square-blue::after {
  content: '';
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 35px;
  height: 35px;
  border-bottom: 6px solid var(--blue);
  border-right: 6px solid var(--blue);
  transition: all 0.5s ease;
}

/* Al hacer hover comienza la animación */
.animation-square-blue:hover::before {
  animation: moveTopLeftToTopRightBlue 1s forwards;
}

.animation-square-blue:hover::after {
  animation: moveBottomRightToBottomLeftBlue 1s forwards;
}

/* Al quitar el hover (mouseleave) */
.animation-square-blue:not(:hover)::before {
  animation: moveTopRightToTopLeftBlue 1s forwards;
}

.animation-square-blue:not(:hover)::after {
  animation: moveBottomLeftToBottomRightBlue 1s forwards;
}

/* Animación de la esquina superior izquierda */
@keyframes moveTopLeftToTopRightBlue {
  0% {
    top: 15px;
    left: 15px;
    width: 35px;
    height: 35px;
    border-top: 6px solid var(--blue);
    border-left: 6px solid var(--blue);
    border-right: none;
  }
  50% {
    left: 15px;
    width: calc(100% - 30px); /* Se convierte en una línea */
    height: 6px;
    border-left: none;
  }
  100% {
    left: calc(100% - 50px);
    width: 35px;
    height: 35px;
    border-left: none;
    border-right: 6px solid var(--blue);
    border-top: 6px solid var(--blue);
  }
}

/* Animación de la esquina inferior derecha */
@keyframes moveBottomRightToBottomLeftBlue {
  0% {
    bottom: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    border-bottom: 6px solid var(--blue);
    border-right: 6px solid var(--blue);
    border-left: none;
  }
  50% {
    right: 15px;
    width: calc(100% - 30px); /* Se convierte en una línea */
    height: 6px;
    border-right: none;
  }
  100% {
    right: calc(100% - 50px);
    width: 35px;
    height: 35px;
    border-right: none;
    border-left: 6px solid var(--blue);
    border-bottom: 6px solid var(--blue);
  }
}

/* Animación inversa de la esquina superior derecha hacia la izquierda */
@keyframes moveTopRightToTopLeftBlue {
  0% {
    top: 15px;
    left: calc(100% - 50px);
    width: 35px;
    height: 35px;
    border-right: 6px solid var(--blue);
    border-top: 6px solid var(--blue);
    border-left: none;
  }
  50% {
    left: 15px;
    width: calc(100% - 30px); /* Se convierte en una línea */
    height: 6px;
    border-right: none;
  }
  100% {
    left: 15px;
    width: 35px;
    height: 35px;
    border-right: none;
    border-left: 6px solid var(--blue);
    border-top: 6px solid var(--blue);
  }
}

/* Animación inversa de la esquina inferior izquierda hacia la derecha */
@keyframes moveBottomLeftToBottomRightBlue {
  0% {
    bottom: 15px;
    right: calc(100% - 50px);
    width: 35px;
    height: 35px;
    border-left: 6px solid var(--blue);
    border-bottom: 6px solid var(--blue);
    border-right: none;
  }
  50% {
    right: 15px;
    width: calc(100% - 30px); /* Se convierte en una línea */
    height: 6px;
    border-left: none;
  }
  100% {
    right: 15px;
    width: 35px;
    height: 35px;
    border-left: none;
    border-right: 6px solid var(--blue);
    border-bottom: 6px solid var(--blue);
  }
}

/* ----- ANIMATION SQUARE ORANGE ----- */
/* Esquina superior izquierda (before) */
.animation-square-orange::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 15px;
  width: 35px;
  height: 35px;
  border-top: 6px solid var(--orange);
  border-left: 6px solid var(--orange);
  transition: all 0.5s ease;
}

/* Esquina inferior derecha (after) */
.animation-square-orange::after {
  content: '';
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 35px;
  height: 35px;
  border-bottom: 6px solid var(--orange);
  border-right: 6px solid var(--orange);
  transition: all 0.5s ease;
}

/* Al hacer hover comienza la animación */
.animation-square-orange:hover::before {
  animation: moveTopLeftToTopRightOrange 1s forwards;
}

.animation-square-orange:hover::after {
  animation: moveBottomRightToBottomLeftOrange 1s forwards;
}

/* Al quitar el hover (mouseleave) */
.animation-square-orange:not(:hover)::before {
  animation: moveTopRightToTopLeftOrange 1s forwards;
}

.animation-square-orange:not(:hover)::after {
  animation: moveBottomLeftToBottomRightOrange 1s forwards;
}

/* Animación de la esquina superior izquierda */
@keyframes moveTopLeftToTopRightOrange {
  0% {
    top: 15px;
    left: 15px;
    width: 35px;
    height: 35px;
    border-top: 6px solid var(--orange);
    border-left: 6px solid var(--orange);
    border-right: none;
  }
  50% {
    left: 15px;
    width: calc(100% - 30px); /* Se convierte en una línea */
    height: 6px;
    border-left: none;
  }
  100% {
    left: calc(100% - 50px);
    width: 35px;
    height: 35px;
    border-left: none;
    border-right: 6px solid var(--orange);
    border-top: 6px solid var(--orange);
  }
}

/* Animación de la esquina inferior derecha */
@keyframes moveBottomRightToBottomLeftOrange {
  0% {
    bottom: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    border-bottom: 6px solid var(--orange);
    border-right: 6px solid var(--orange);
    border-left: none;
  }
  50% {
    right: 15px;
    width: calc(100% - 30px); /* Se convierte en una línea */
    height: 6px;
    border-right: none;
  }
  100% {
    right: calc(100% - 50px);
    width: 35px;
    height: 35px;
    border-right: none;
    border-left: 6px solid var(--orange);
    border-bottom: 6px solid var(--orange);
  }
}

/* Animación inversa de la esquina superior derecha hacia la izquierda */
@keyframes moveTopRightToTopLeftOrange {
  0% {
    top: 15px;
    left: calc(100% - 50px);
    width: 35px;
    height: 35px;
    border-right: 6px solid var(--orange);
    border-top: 6px solid var(--orange);
    border-left: none;
  }
  50% {
    left: 15px;
    width: calc(100% - 30px); /* Se convierte en una línea */
    height: 6px;
    border-right: none;
  }
  100% {
    left: 15px;
    width: 35px;
    height: 35px;
    border-right: none;
    border-left: 6px solid var(--orange);
    border-top: 6px solid var(--orange);
  }
}

/* Animación inversa de la esquina inferior izquierda hacia la derecha */
@keyframes moveBottomLeftToBottomRightOrange {
  0% {
    bottom: 15px;
    right: calc(100% - 50px);
    width: 35px;
    height: 35px;
    border-left: 6px solid var(--orange);
    border-bottom: 6px solid var(--orange);
    border-right: none;
  }
  50% {
    right: 15px;
    width: calc(100% - 30px); /* Se convierte en una línea */
    height: 6px;
    border-left: none;
  }
  100% {
    right: 15px;
    width: 35px;
    height: 35px;
    border-left: none;
    border-right: 6px solid var(--orange);
    border-bottom: 6px solid var(--orange);
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1366px) {
    .footer-info, .footer-info a {
        font-size: 1.5vw !important;
    }
}

@media only screen and (max-width: 575px) {
    .subject-text-page p, .subject-text-page ul li {
        font-size: 0.8rem;
        line-height: 1.2rem;
    }
    
    .footer-info {
        margin-bottom: 5px !important;
    }
    
    .footer-info, .footer-info a {
        font-size: 0.5rem !important;
        letter-spacing: 0px; 
    }
    
    .footer-info img {
        width: 25px !important;
    }
    
    .ekit-sticky .elementskit-navbar-nav-default .elementskit-navbar-nav {
        padding: 20px 0px;
    }
    
    .elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon {
        background-color: white !important;
    }
    
    .ekit-sticky .elementskit-menu-offcanvas-elements.active::before {
        display: none !important;
    }
    
    .elementskit-dropdown.elementskit-submenu-panel li {
        padding: 8px 0px !important;
    }
    
    .elementskit-navbar-nav-default .elementskit-submenu-panel>li>a {
        color: var(--blue) !important;
    }
    
    .elementskit-menu-container {
        padding: 0px !important;
    }
    
    .elementskit-navbar-nav .menu-item {
        text-align: center;
    }
    
    .elementskit-navbar-nav .menu-item .ekit-menu-nav-link {
        justify-content: center;
    }
    
    .elementskit-navbar-nav .menu-item .ekit-menu-nav-link .icon {
        margin-left: 15px !important;
        margin-right: 0px !important;
    }
    
    .elementskit-navbar-nav-default .elementskit-dropdown-has>a {
        display: flex !important;
        justify-content: center;
        align-items: center;
    }
    
    .elementskit-navbar-nav-default .elementskit-dropdown-has>a .elementskit-submenu-indicator {
        margin-left: 15px !important;
        margin-right: 0px !important;
        float: none;
    }
    
    .animation-square-orange::before {
        content: '';
        position: absolute;
        top: 5px !important;
        left: 5px !important;
        width: 20px !important;
        height: 20px !important;
        border-top: 2px solid var(--orange) !important;
        border-left: 2px solid var(--orange) !important;
        transition: none;
    }
    
    .animation-square-orange::after {
        content: '';
        position: absolute;
        bottom: 5px !important;
        right: 5px !important;
        width: 20px !important;
        height: 20px !important;
        border-bottom: 2px solid var(--orange) !important;
        border-right: 2px solid var(--orange) !important;
        transition: none;
    }
    
    .animation-square-blue::before {
        content: '';
        position: absolute;
        top: 5px !important;
        left: 5px !important;
        width: 20px !important;
        height: 20px !important;
        border-top: 2px solid var(--blue) !important;
        border-left: 2px solid var(--blue) !important;
        transition: none !important;
    }
    
    .animation-square-blue::after {
        content: '';
        position: absolute;
        bottom: 5px !important;
        right: 5px !important;
        width: 20px !important;
        height: 20px !important;
        border-bottom: 2px solid var(--blue) !important;
        border-right: 2px solid var(--blue) !important;
        transition: none;
    }
    
    .list-matricula-date span {
        font-weight: 600;
    }

	.animation-square-orange:hover::before, .animation-square-blue:hover::before {
	  animation: none;
	}

	.animation-square-orange:hover::after, .animation-square-blue:hover::after {
	  animation: none;
	}
	
	p.title-project-investigation {
		font-size: 1.5rem;
		line-height: 1.7rem;
	}
	
	p.text-project-investigation {
		font-size: 1rem;
		line-height: 1.3rem;
	}
}