/*
CTC Separate Stylesheet
Updated: 2025-11-21 15:24:19
*/

/* ==========================================
   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: #0F4C8E;
    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: #0F4C8E;
    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%;
  }
}

/* ====================================================== */
/* 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: #0d47a1 !important; /* Texto Azul */
    border-bottom: 3px solid #0d47a1 !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; 
}

/* Línea vertical de scroll */
.scroll-vline {
    position: relative;
    width: 2px;
    height: 140px;
    background-color: rgba(255,255,255,0.25);
    overflow: hidden;
}

.scroll-vline__inner {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 0;
    background-color: #ffffff;
    will-change: height;
    transition: height 0.35s ease-out;
}