/* CLASES PRECARGADAS WOOXI */
/* Configuración general */
html, body {
    margin: 0;
    padding: 0;

}

.cuerpo {
  overflow-x: hidden;
  overflow-y: visible;
}

.text-shadow {text-shadow: 2px 2px 3px #000;}

.fs-a1 {font-size: 36px;}
.fs-a2 {font-size: 28px;}
.fw-800 {font-weight: 800;}
.fs-10 {font-size: 10px;}
.fs-12 {font-size: 12px;}
.fs-15  {font-size: 15px;}
.fs-16  {font-size: 16px;}




/* Contenedor principal del timeline */
.timeline {
    position: relative;

}

/* Estilos de cada elemento del timeline */
.item-tl {
    position: relative;
    padding-left: 40px; /* Espacio para el círculo */
    padding-bottom: 1px; /* Espacio de padding para evitar margin-bottom */
}

/* Círculo en cada elemento (estado apagado por defecto) */
.circle {
    position: absolute;
    left: 8px;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #FFFFFF; /* Fondo blanco cuando está apagado */
    border: 1px solid #003A81; /* Borde fino azul cuando está apagado */
    transition: none; /* Sin transición */
}

/* Estado encendido */
.circle.on {
    background-color: #FCD751; /* Fondo amarillo cuando está encendido */
    border: 5px solid #003A81; /* Borde grueso azul cuando está encendido */
}


/* Línea punteada debajo de cada círculo */
.item-tl::after {
    content: "";
    position: absolute;
    left: 17px; /* Centrado de la línea debajo del círculo */
    top: 20px; /* Comienza justo debajo del círculo */
    width: 1px;
    height: calc(100% - 20px); /* Ajuste de la longitud de la línea */
    background: repeating-linear-gradient(
        to bottom,
        #FCD751,
        #FCD751 6px,
        transparent 6px,
        transparent 12px
    ); /* Línea punteada en color #FCD751 */
}

/* Oculta la línea en el último elemento */
.item-tl:last-child::after {
    display: none;
}


/* Aplica un margen de 60px a todos los elementos .descripcion_cf */
p.descripcion_cf {
    margin-bottom: 60px !important;
}

/* Elimina el margen en el último .descripcion_cf dentro del último .item-tl */
.item-tl:last-child p.descripcion_cf {
    margin-bottom: 0 !important;
}


.margin-b {margin-bottom: 100px!important;}


/* Contenedor de sucursales con scroll */
.scrollable-sucursales {
    max-height: 460px; /* Ajuste a la altura de la columna del mapa */
    overflow-y: auto; /* Activa el scroll vertical */
    padding-right: 10px; /* Añade espacio para evitar superposición con el scroll */
}

/* Estilo personalizado del scroll */
.scrollable-sucursales::-webkit-scrollbar {
    width: 8px; /* Ancho del scroll */
    background-color: #1a2a7f; /* Color de fondo del contenedor del scroll */
    border-radius: 10px;
}

.scrollable-sucursales::-webkit-scrollbar-thumb {
    background-color: #b0b7f8; /* Color de la barra de scroll */
    border-radius: 10px;
    border: 2px solid #1a2a7f; /* Espacio entre la barra y el contenedor del scroll */
}

.scrollable-sucursales::-webkit-scrollbar-thumb:hover {
    background-color: #8a9bee; /* Color cuando se pasa el mouse por encima */
}

/* Ajustes generales para el scroll en otros navegadores */
.scrollable-sucursales {
    scrollbar-width: thin; /* Para Firefox: ancho del scroll */
    scrollbar-color: #b0b7f8 #1a2a7f; /* Para Firefox: color de la barra y el fondo */
}


/* Elimina el icono SVG predeterminado de Bootstrap */
.accordion-button::after {
    content: none !important;
}

.accordion-button {border: solid 4px #fff!important;}
/* Añade el icono de Font Awesome como flecha hacia abajo a la derecha */
.accordion-button.collapsed .fa-chevron-down {
    content: "\f078"; /* Unicode de fa-chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #272727;
    font-size: 1rem;
    margin-left: auto;
    display: inline-block;
}

/* Cambia el icono al estado de abierto */
.accordion-button:not(.collapsed) .fa-chevron-down {
    content: "\f077"; /* Unicode de fa-chevron-up */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #272727;
    font-size: 1rem;
    margin-left: auto;
    display: inline-block;
}

/* Asegura que el icono esté alineado a la derecha */
.accordion-button .fa-chevron-down {
    margin-left: auto;
    transition: transform 0.3s ease; /* Añade transición para el efecto suave */
}

/* Aplica la rotación cuando el acordeón está abierto */
.accordion-button:not(.collapsed) .fa-chevron-down {
    transform: rotate(180deg); /* Rota el icono 180 grados */
}


/* Aplica el color solo al texto ingresado en los campos de formulario */
input,
select,
textarea {
    color: #000 !important;
    background-color: transparent!important; 
    color: #fff!important;
   /* Color del texto cuando el usuario escribe */
}

input.form-control, select.form-control { border: solid 1px #fff!important;}
/* Deja el placeholder en su color predeterminado */
input::placeholder,
textarea::placeholder {
    color: initial; /* Mantiene el color predeterminado del placeholder */
    opacity: 1; /* Asegura que se vea en su color normal */
}

.titulo {height: 30px;}


.btn-primary.text-white {
    transition: background-color 0.6s ease, color 0.6s ease; /* Transición suave */
}

.btn-primary.text-white:hover {
    background-color: var(--bs-secondary); /* Cambia al color btn-secondary */
    border-color: var(--bs-primary);
    color: var(--bs-primary)!important; /* Cambia el color del texto a btn-primary */
    transition: background-color 0.8s ease, color 0.8s ease; /* Efecto lento y suave */
    transition: border-color 0.8s ease, color 0.8s ease; /* Efecto lento y suave */
}

.btn-secondary.text-white {
    transition: background-color 0.6s ease, color 0.6s ease; /* Transición suave */
}

.btn-secondary.text-white:hover {
    background-color: var(--bs-primary); /* Cambia al color btn-secondary */
    color: var(--bs-secondary)!important; /* Cambia el color del texto a btn-primary */
    border-color: var(--bs-secondary);
    transition: background-color 0.8s ease, color 0.8s ease; /* Efecto lento y suave */
    transition: border-color 0.8s ease, color 0.8s ease; /* Efecto lento y suave */
}

#map {
    width: 100%; /* Ajusta el mapa al 100% del ancho del contenedor */
    height: 460px; /* Puedes ajustar la altura según tus necesidades */
}


.skills {
    position: relative;
}

.line-wrapper {
    position: absolute;
    top: 60%;
    width: 80%; /* Ajusta este valor para que coincida con la anchura total de las tarjetas */
    left: 50%;
    transform: translate(-50%, -50%);
    height: 2px;
    z-index: 0; /* Coloca el contenedor de la línea detrás de las tarjetas */
}

.line-background {
    width: 100%;
    height: 2px;
    background-color: #FCD751;
}

.skill-item {
    position: relative;
    z-index: 1; /* Asegura que las tarjetas estén sobre la línea */
}



/* NAV */

.dropdown-toggle::after {
    border: none!important;
    font-family: 'font awesome 5 free';
    content: '\f107'!important;
    vertical-align: 0!important;
    margin-left: 7px!important;
    font-weight: bold;
  }
  
  
  
 .navbar-light .menu-item a, .modal .menu-item a {color: #272727; text-decoration: none; font-size: 16px; font-weight: 700; margin-right: 15px;}
 .navbar-light .menu-item a:hover {border-bottom: #84B212 4px solid; padding-bottom: 5px; color:#84B212;}

  .navbar-light {
    box-shadow: 0px 2px 2px rgba(16, 35, 140, 0.25) !important;
  
  }
  
  .navbar-toggler {border:0px!important; color:#84B212!important; }

  /* MODAL FADE LEFT RIGHT BOTTOM */

.btn-close {color: #10238C!important; opacity: 1 !important;}

.modal.fade:not(.in).right .modal-dialog {
  width: 340px!important;
  -webkit-transform: translate3d(25%, 0, 0);
  transform: translate3d(0%, 0, 0);
}


.modal.right .modal-dialog {
	position:absolute;
	top:0;
	right:0;
	margin:0;
  
}



.modal.right .modal-content {
	min-height:100vh;
	border:0;
  border-radius: 0px!important;
}

.redes a, .cards-enlace a {text-decoration: none;}


#quehacemos {
    position: relative; /* Asegura que los elementos internos absolutos se posicionen en relación al contenedor */
    overflow: hidden; /* Evita que la imagen o cualquier contenido sobresalga de los límites del section */
  }
  
  #arq {
    position: relative;
    overflow-x: hidden;
    box-sizing: border-box; /* Garantiza que el padding y border no inflen las dimensiones */
  }
  .img-house img {
    position: absolute; /* Posiciona la imagen en relación al contenedor .img-house */
    right: 0; /* Asegura que esté alineada a la derecha del contenedor */
    bottom: 0px; /* Ajusta la posición vertical según lo necesites */
    max-width: none; /* Permite que la imagen no tenga restricciones de ancho */
    height: auto; /* Mantiene las proporciones de la imagen */
  }

  .img-lineas img {
    position: absolute; 
    /* Posiciona la imagen en relación al contenedor .img-house */
    /* Asegura que esté alineada a la derecha del contenedor */
    left: -1px;
    bottom: 103px; /* Ajusta la posición vertical según lo necesites */
    max-width: none; /* Permite que la imagen no tenga restricciones de ancho */
    height: auto; /* Mantiene las proporciones de la imagen */
  }
  

 /* Contenedor principal */
#arq {
  position: relative;
  overflow-x: hidden; /* Oculta desbordamientos horizontales */
  /* No se usa overflow-y para que las imágenes sean visibles */
}

/* Imagen .img-arq */
.img-arq img {
  position: absolute;
  right: 0; /* Alineación derecha */
  bottom: 0; /* Evita valores negativos */
  max-width: none; /* Permite que la imagen mantenga su tamaño */
  height: auto; /* Mantiene las proporciones de la imagen */
  z-index: 0; /* Envía la imagen al fondo */
}

/* Imagen .img-lineas-arq */
.img-lineas-arq img {
  position: absolute;
  left: 0; /* Alineación izquierda */
  bottom: 98px; /* Evita valores negativos */
  max-width: none; /* Permite que la imagen mantenga su tamaño */
  height: auto; /* Mantiene las proporciones de la imagen */
  z-index: 0; /* Envía la imagen al fondo */
}

/* Ajustar el espacio del contenedor */
#arq {
    position: relative;
    overflow-x: hidden; /* Oculta desbordamiento horizontal */
    margin-bottom: -1px; /* Solución para eliminar cualquier línea residual */
    padding-bottom: 120px;
  }
  .boton-qh {bottom: 15%}

  .como-llevamos {
    position: relative;
  }
  
  .como-llevamos::before {
    /* Aplica filtro de blanco y negro a la imagen de fondo */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit; /* Usa la misma imagen de fondo definida en el HTML */
    background-size: inherit;
    background-position: inherit;
    background-repeat: no-repeat;
    filter: grayscale(100%); /* Blanco y negro */
    z-index: 1;
  }
  

  .como-llevamos {
    position: relative;
    box-shadow: 0 -10px 15px rgba(0, 0, 0, 0.3), 0 10px 15px rgba(0, 0, 0, 0.3);
    /* Sombra arriba y abajo */
  }

  
  
  .como-llevamos .overlay {
    /* Capa de color semitransparente */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #272727; /* Color semitransparente */
    opacity: 0.9;
    z-index: 2;
  }
  
  .como-llevamos .container {
    position: relative;
    z-index: 3; /* Coloca el contenido encima de las capas */
  }
  
  .boton-qh a {
    z-index: 3;
  }
  
  .h-arq-t {min-height: 175px;}

  .accordion-item button {border-color: #fff !important; background:#fff;}

  .menu-foot a {text-decoration: none;}

  .gifmakers a {text-decoration: underline!important;}

  .fondo-verde {
    position: relative;
    padding: 0px;
    color: #fff; /* Color del texto verde */
    background-color: #84B212; /* Fondo transparente para evitar interferencias */
    box-shadow: inset 0 -20px 0px #84B212; /* Efecto de fondo detrás del texto */
    display: inline-block; /* Asegura que solo afecte el contenido del span */
  }
  

  .icon-img {
    height: 24px; /* Tamaño de la imagen para que combine con el texto */
    width: auto; /* Mantiene la proporción de la imagen */
  }
  
  .icon {
    display: flex;
    align-items: center; /* Asegura que la imagen esté alineada verticalmente */
  }
  
  .d-flex.align-items-center {
    display: flex;
    align-items: center; /* Alinea la imagen con el texto */
  }
  
  .item-skill p.desc {
    margin-top: 1rem; /* Separa el texto de descripción del título */
    min-height: 100px;
  }
  
  /* Contenedor principal del slider */
.slider-img {
    position: relative;
    height: 530px;
    overflow: hidden; /* Evita desbordamientos */
  }
  
  /* Imagen de fondo con filtro */
  .slider-img .background-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0; /* Coloca la imagen en el fondo */
    filter: grayscale(100%); /* Blanco y negro */
  }
  
  /* Capa semi-transparente superpuesta */
  .slider-img .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Mayor opacidad */
    z-index: 1; /* Coloca la capa sobre la imagen de fondo */
  }
  
  /* Información del slider */
  .slider-info {
    z-index: 2; /* Asegura que el contenido esté por encima de la capa semi-transparente */
  }
  
  .slider-info h1 {
    font-size: 2rem; /* Ajusta el tamaño del título */
    margin-bottom: 1rem;
  }
  
  .slider-info p {
    margin-bottom: 2rem; /* Espaciado entre el texto y otros elementos */
  }
  
  /* Imagen en img-slider */
  .img-slider {
    position: relative;
    z-index: 2; /* Coloca la imagen en el mismo nivel que el contenido */
  }
  
  .img-slider img {
    max-width: 100%; 
  }  

  .skit  {margin-bottom: 200px; padding-bottom: 300px;}

  .proyecto-prev,
  .proyecto-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 2.5rem; /* Tamaño más grande */
      cursor: pointer;
      z-index: 10;
      color: var(--bs-primary); /* Color primario de Bootstrap */
  }
  
  /* Asegurar que las flechas se alineen con la imagen principal */
  .proyecto-prev,
  .proyecto-next {
      top: 50%!important;
      transform: translateY(-50%)!important;
  }
  
  /* Ajustar la posición para que estén alineadas con .img-1 */
  .swiper-container {
      position: relative;
  }
  
  .proyecto-prev {
      left: -80px!important; /* Ajusta la posición izquierda */
  }
  
  .proyecto-next {
      right: -80px!important; /* Ajusta la posición derecha */
  }
  
  /* Si las flechas siguen sin alinearse bien, centrarlas con respecto a .img-1 */
  .proyecto-prev,
  .proyecto-next {
      top: calc(50% - 10px)!important; /* Ajustar altura manualmente si es necesario */
  }
  
  /* Ajustes en pantallas pequeñas */
  @media (max-width: 768px) {
      .proyecto-prev {
          left: -30px;
      }
  
      .proyecto-next {
          right: -30px;
      }
  }
  

  /* Asegurar que todas las columnas dentro de .row-proyectos tengan la misma altura */
.row-proyectos {
  display: flex;
  align-items: stretch;
}

/* La imagen 1 ahora será un fondo */
.row-proyectos .img-1 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  position: relative;
}

/* Overlay para hacer clic y abrir Fancybox */
.row-proyectos .img-1 .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.wpcf7-form p {
  margin-bottom: 0;
}

.wpcf7-checkbox input[type="checkbox"] {
  background-color: transparent;
  border: 1px solid #6c757d; /* equivalente a border-secondary */
  accent-color: #6c757d;
}

.wpcf7-list-item-label {
  color: white;
}

.wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wpcf7-response-output {display: none!important;}