/*
CTC Separate Stylesheet
Updated: 2025-11-21 15:24:15
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.5.1763756655
--20260424-cambio color de azul por #005589
*/


.elementor-element-0dc7606 .swiper-slide {
    transition: opacity 0.7s ease-in-out;
}



/* menu nav con cursor azul */
/* ======================================
   MENÚ PATRICH + UNDERLINE DESDE EL CENTRO
   ====================================== */

@media (min-width: 1025px) {

  /* Contenedor del nav (alineado a la derecha) */
  .patrich-menu-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  /* UL del menú horizontal, sin viñetas */
  .patrich-menu-wrapper .patrich-menu {
    display: flex;
    gap: 40px;                 /* separacion entre items */
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* LI de primer nivel */
  .patrich-menu-wrapper .patrich-menu > li {
    position: relative;
  }

  /* Enlaces de primer nivel */
  .patrich-menu-wrapper .patrich-menu > li > a {
    position: relative;
    display: inline-block;
    padding: 0 0 8px;          /* espacio para la línea */
    color: #FFFBF9 !important; /* texto blanco */
    font-family: "Aspekta 400", sans-serif;
    font-size: 16px;
    line-height: 26px;
    text-decoration: none;
    font-family: "Aspekta 400", sans-serif !important;
  }

  /* Línea azul que nace desde el centro (oculta al inicio) */
  .patrich-menu-wrapper .patrich-menu > li > a::after {
    content: '';
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 0;                 /* si querés más abajo: -2px */
    width: 0;
    height: 2px;
    background-color: #005589;
    transform: translateX(-50%);
    transition: width 0.3s ease-in-out;
  }

  /* Hover: la línea se expande todo el ancho del texto */
  .patrich-menu-wrapper .patrich-menu > li > a:hover::after {
    width: 100%;
  }

  /* Mantener línea en el ítem activo */
  .patrich-menu-wrapper .patrich-menu > li.current-menu-item > a::after,
  .patrich-menu-wrapper .patrich-menu > li.current-menu-ancestor > a::after {
    width: 100%;
  }

  /* ===== SUBMENÚ (si tu menú tiene hijos) ===== */

  .patrich-menu-wrapper .patrich-menu li .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #181818;
    padding: 15px 25px;
    list-style: none;
    margin: 0;
    display: none;
  }

  .patrich-menu-wrapper .patrich-menu li:hover > .sub-menu {
    display: block;
  }

  .patrich-menu-wrapper .patrich-menu li .sub-menu li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
  }

  .patrich-menu-wrapper .patrich-menu li .sub-menu li a::after {
    content: "➜";
    font-size: 11px;
    opacity: 0.7;
  }

  .patrich-menu-wrapper .patrich-menu li .sub-menu li a:hover {
    opacity: 0.8;
  }
}

/* Línea de scroll reutilizable */
/* Contenedor gris, siempre al 100% */
.scroll-line {
    position: relative;
    width: 100%;
    height: 2px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #EAEBEB; /* gris medio */
    overflow: hidden;
}

/* Barra azul animada por scroll */
.scroll-line::after {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--scroll-line-progress, 0%);
    background-color: #005589;
    will-change: width;
    transition: width 1.8s ease-out;  /* bien lenta y suave */
}


/* ==========================================
   UNDERLINE AZUL DESDE EL CENTRO
   Reutilizable con la clase: menu-underline-center
   ========================================== */

@media (min-width: 1025px) {

  /* --- CASO 1: WIDGET NAV MENU DE ELEMENTOR --- */

  .menu-underline-center .elementor-nav-menu--main .elementor-item {
    position: relative;
    display: inline-block;
    /*padding-bottom: 8px;*/
    text-decoration: none;
  }

  .menu-underline-center .elementor-nav-menu--main .elementor-item::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #005589;
    transform: translateX(-50%);
    transition: width 0.3s ease-in-out;
  }

  .menu-underline-center .elementor-nav-menu--main .elementor-item:hover::after,
  .menu-underline-center .elementor-nav-menu--main .elementor-item.elementor-item-active::after {
    width: 100%;
  }


  /* --- CASO 2: WIDGET "WORDPRESS MENU" (ul.menu > li > a) --- */

  .menu-underline-center ul.menu > li > a {
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
    text-decoration: none;
  }

  .menu-underline-center ul.menu > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #005589;
    transform: translateX(-50%);
    transition: width 0.3s ease-in-out;
  }

  .menu-underline-center ul.menu > li:hover > a::after,
  .menu-underline-center ul.menu > li.current-menu-item > a::after,
  .menu-underline-center ul.menu > li.current-menu-ancestor > a::after {
    width: 100%;
  }
}

.scroll-fade-scale {
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    will-change: opacity, transform;
}

/* ====================================================== */
/* ESTILOS PARA WIDGET PESTAÑAS - servicios-tabs-personalizado */
/* ====================================================== */

/* 1. ANULAR ESTILOS NATIVOS DE ELEMENTOR Y DIVISORES (MENU LATERAL) */
.elementor-widget-tabs.servicios-tabs-personalizado .elementor-tabs-wrapper {
    /* Anula bordes y sombras que interfieren */
    border-right: none !important;
    box-shadow: none !important;
}

.elementor-widget-tabs.servicios-tabs-personalizado button.elementor-tab-title {
    /* Desactiva cualquier borde nativo y establece los divisores gris claro */
    border: none !important;
    border-top: 1px solid #dcdcdc !important; 
    border-bottom: 1px solid #dcdcdc !important; 
    
    color: #555555 !important; /* Texto gris */
    padding: 15px 10px !important; 
    transition: all 0.3s ease;
}

/* Eliminar el borde superior de la primera pestaña */
.elementor-widget-tabs.servicios-tabs-personalizado button.elementor-tab-title:first-child {
    border-top: none !important;
}

/* 2. ESTILO ACTIVO Y HOVER */
.elementor-widget-tabs.servicios-tabs-personalizado button.elementor-tab-title.elementor-active {
    color: #005589 !important; /* Texto Azul */
    border-bottom: 3px solid #005589 !important; /* Línea Azul Gruesa */
    border-top: 1px solid #dcdcdc !important; /* Mantiene el divisor superior */
}

/* 3. ALINEACIÓN DEL CONTENIDO DE SUB-SERVICIOS A LA DERECHA */
/* Asegura que el contenedor de la lista de íconos se alinee a la derecha del panel */
.elementor-widget-tabs.servicios-tabs-personalizado .elementor-tab-content {
    /* Habilita Flexbox en el contenedor de contenido */
    display: flex;
    /* Empuja el contenido (la lista de sub-servicios) completamente a la derecha */
    justify-content: flex-end; 
    /* Asegura que el texto y los ítems internos también se alineen a la derecha */
    text-align: right; 
}

.elementor-widget-tabs.servicios-tabs-personalizado .elementor-icon-list-items {
    /* Asegura que la lista de íconos completa se alinee a la derecha */
    width: auto;
    /* Alinea el texto dentro de la lista de íconos a la derecha */
    align-items: flex-end; 
}


/* Contenedor de la línea vertical */
.scroll-vline {
    position: relative;
    width: 2px;                     /* grosor de la línea */
    height: 120px;                  /* alto por defecto, podés sobreescribirlo */
    background-color: rgba(255,255,255,0.25); /* pista tenue */
    overflow: hidden;
}

/* Barra que se rellena */
.scroll-vline__inner {
    position: absolute;
    inset-inline: 0;                /* left + right */
    bottom: 0;                      /* crece desde abajo hacia arriba */
    height: 0;
    background-color: var(--scroll-vline-color, #ffffff); /* color por defecto blanco */
    transition: height 0.35s ease-out;                     /* velocidad de la animación */
    will-change: height;
}