/* CSS Base para el sitio web de FGSTRUCK */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

:root {
  /* Variables de color */
  --color-fondo: #EBEFF3;
  --color-texto: #231F20;
  --color-texto-claro: #FFFFFF;
  --color-acento: #B63B3B;
  --color-contorno: #cccccc;
  --color-quito: #FFC000;
  --fuente-principal: 'Barlow', sans-serif;
  --fuente-secundaria: 'Rajdhani', sans-serif;
  
  /* Tamaño de fuente base para cálculos rem */
  font-size: 16px;
}

/* Estilos base */
body {
  font-family: var(--fuente-principal);
  font-weight: 400;
  color: var(--color-texto);
  line-height: 1.6;
  background: linear-gradient(rgba(255, 255, 255, 0.945), rgba(255, 255, 255, 0.945)), 
                url('../img/slider-5.1.webp') center/cover repeat-x;
    background-size: cover;
    background-position: center;
    height: 110vh;
    margin: 0;
    padding: 0;
}

/* Tipografía */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-principal);
  color: var(--color-texto);
}

a {
  color: var(--color-acento);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: darken(var(--color-acento), 10%);
}

/* Clases de utilidad */
.fondo-principal {
  background-color: var(--color-fondo);
}

.fondo-acento {
  background-color: var(--color-acento);
}

.texto-principal {
  color: var(--color-texto);
}

.texto-claro {
  color: var(--color-texto-claro);
}

.texto-acento {
  color: var(--color-acento);
}

/* Estilos de botón */
.btn-acento {
  background-color: var(--color-acento);
  color: var(--color-texto-claro);
  border: none;
  padding: 0.625em 1.25em;
  border-radius: 0.3125em;
  transition: background-color 0.3s ease;
}

.btn-acento:hover {
  background-color: darken(var(--color-acento), 10%);
}

/* Contenedor para mejor espaciado */
.contenedor {
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

header, .cabecera {
  position: relative;
  z-index: 1050; 
}

/* Estilos para la barra superior */
.barra-superior {
  background-color: var(--color-acento);
  color: var(--color-fondo);
  padding: 0.5rem 0;
  font-size: 0.9rem;
}

.barra-superior a {
  color: var(--color-texto-claro);
  text-decoration: none;
  margin-right: 1rem;
  transition: opacity 0.3s ease;
}

.barra-superior a:hover {
  opacity: 0.8;
}

.redes-sociales i {
  margin-right: 0.5rem;
}

.email {
  margin-left: 1rem;
}

.direccion {
  text-align: right;
}

.direccion i {
  margin-right: 0.5rem;
}

/* Estilos generales */
.cabecera {
  padding: 1rem 0;
  transition: all 0.5s ease;
}

.logo-img {
  max-height: 70px;
  width: auto;
  margin-left: 5rem;
  transition: all 0.5s ease;
}

.navegacion-principal .nav-link,
.navegacion-movil .nav-link {
  font-family: var(--fuente-secundaria);
  color: var(--color-texto);
  font-weight: 900;
  font-size: 1rem;
  transition: all 0.5s ease;
  position: relative;
  overflow: hidden;
}

.navegacion-principal .nav-link::after,
.navegacion-movil .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-acento);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.navegacion-principal .nav-link:hover::after,
.navegacion-movil .nav-link:hover::after {
  transform: translateX(0);
}

.navegacion-principal .nav-link:hover,
.navegacion-movil .nav-link:hover {
  color: var(--color-acento);
}

/* Estilos comunes para los submenús */
.submenu {
  background-color: var(--color-texto-claro);
  padding: 0.5rem 0;
  min-width: 200px;
  list-style: none;
  opacity: 0;
  transform: translateY(-10px);
  font-family: var(--fuente-secundaria);
  font-weight: 900;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.submenu a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--color-texto);
  font-weight: 900;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.submenu a:hover {
  background-color: var(--color-acento);
  color: var(--color-texto-claro);
}

/* Estilos para el submenú en el menú principal */
.navegacion-principal .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-texto-claro);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 0.5rem 0;
  list-style: none;
  z-index: 999;
}

.navegacion-principal .desplegable-servicios {
  position: relative;
}

.navegacion-principal .desplegable-servicios:hover .submenu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Estilos para el submenú en el panel lateral */
.panel-lateral .submenu {
  display: none;
  position: static;
  box-shadow: none;
  opacity: 1;
  transform: none;
  transition: max-height 0.5s ease;
  max-height: 0;
  overflow: hidden;
}

.panel-lateral .desplegable-servicios.active .submenu {
  display: block;
  max-height: 500px;
}

/* Estilos para botones del menú y panel lateral */
.btn-menu {
  background-color: var(--color-acento);
  border: none;
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
  cursor: pointer;
  transition: all 0.5s ease;
}

.btn-menu:hover {
  transform: scale(1.1);
}

.btn-menu span {
  width: 30px;
  height: 3px;
  background-color: var(--color-texto-claro);
  transition: all 0.5s ease;
}

.btn-menu span:first-child {
  transform: translateY(-4px);
}

.btn-menu span:last-child {
  transform: translateY(4px);
}

.btn-cerrar {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1060;
}

.btn-cerrar span:first-child {
  transform: rotate(45deg);
}

.btn-cerrar span:last-child {
  transform: rotate(-45deg);
}

.panel-lateral {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  background-color: var(--color-fondo);
  transition: right 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  z-index: 1050;
  overflow-y: auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.panel-lateral.abierto {
  right: 0;
}

.contenido-panel,
.navegacion-movil {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.panel-lateral.abierto .contenido-panel,
.panel-lateral.abierto .navegacion-movil {
  opacity: 1;
  transform: translateY(0);
}

/* Estilos de panel de contenido */
.logo-panel {
  max-width: 200px;
  margin: 0 auto 2rem;
}

.frase-motivadora {
  font-size: 1.1rem;
  font-weight: 300;
  font-family: var(--fuente-secundaria);
  color: var(--color-texto);
  line-height: 1.6;
  max-width: 80%;
  margin: 0 auto 2rem;
}

.icono-camion {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto 2rem;
  border-radius: 15px;
  display: block;
}

.info-contacto {
  margin-bottom: 2rem;
}

.panel-direccion,
.panel-email {
  font-size: 0.9rem;
  color: var(--color-texto);
  margin-bottom: 0.5rem;
}

.panel-email a {
  color: var(--color-acento);
  transition: color 0.3s ease;
}

.panel-email a:hover {
  color: darken(var(--color-acento), 10%);
}

.panel-redes-sociales {
  margin-top: 2rem;
}

.panel-red-social {
  color: var(--color-texto);
  font-size: 1.5rem;
  transition: color 0.3s ease, transform 0.3s ease;
  margin: 0 0.5rem;
}

.panel-red-social:hover {
  color: var(--color-acento);
  transform: scale(1.1);
}

  
  /* Estilos para la navegación móvil */
  .navegacion-movil {
    padding-top: 3rem;
  }
  
  .navegacion-movil .nav-link {
    font-size: 1.2rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-contorno);
  }
  
  .navegacion-movil .submenu {
    padding-left: 1rem;
  }
  
  .navegacion-movil .submenu a {
    font-size: 1rem;
    padding: 0.5rem 0;
  }


  /* carousel */

  .carrusel-container {
    padding: 4rem 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.carrusel {
    margin: 0 100px;
    position: relative;
    min-height: 400px;
}

.carrusel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.5s ease;
}

.carrusel-item.active {
    position: relative;
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

.carrusel-item .row {
    width: 100%;
}

.carrusel-content {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.5s ease 0.2s;
    padding: 1rem;
}

.carrusel-item.active .carrusel-content {
    opacity: 1;
    transform: translateX(0);
}

.carrusel-content h1,
.carrusel-content h2 {
    font-family: var(--fuente-secundaria);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    color: var(--color-texto);
    margin-bottom: 1rem;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease 0.4s;
}

.carrusel-item.active .carrusel-content h1,
.carrusel-item.active .carrusel-content h2 {
    opacity: 1;
    transform: translateY(0);
}

.carrusel-content p {
    font-family: var(--fuente-principal);
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 200;
    color: var(--color-texto);
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease 0.6s;
}

.carrusel-item.active .carrusel-content p {
    opacity: 1;
    transform: translateY(0);
}

.carrusel-imagen {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.5s ease 0.2s;
}

.carrusel-item.active .carrusel-imagen {
    opacity: 1;
    transform: translateX(0);
}

.carrusel-imagen img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    transition: transform 0.6s ease;
}

.carrusel-imagen img:hover {
    transform: scale(1.05);
}

.btn-saber-mas {
    display: inline-block;
    background-color: var(--color-acento);
    color: var(--color-texto-claro);
    padding: 0.8rem 1.5rem;
    border-radius: 30px;
    text-decoration: none;
    font-family: var(--fuente-principal);
    font-weight: 600;
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease 0.8s;
}

.carrusel-item.active .btn-saber-mas {
    opacity: 1;
    transform: translateY(0);
}

.btn-saber-mas:hover {
    background-color: var(--color-texto);
    color: var(--color-texto-claro);
    transform: translateY(-5px);
}

.carrusel-controles {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 10;
    pointer-events: none;
}

.carrusel-control {
    background-color: var(--color-acento);
    color: var(--color-texto-claro);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    opacity: 0.8;
}

.carrusel-control:hover {
    transform: scale(1.1);
    opacity: 1;
}

.carrusel-indicadores {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
    padding: 10px;
}

.indicador {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-acento);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.6;
}

.indicador.active {
    transform: scale(1.4);
    background-color: var(--color-texto);
    opacity: 1;
}

.indicador:hover {
    transform: scale(1.2);
    opacity: 0.8;
}

@media (max-width: 768px) {
    .carrusel {
        margin: 0 20px;
    }

    .carrusel-item {
        flex-direction: column-reverse;
    }

    .carrusel-content {
        text-align: center;
        padding: 2rem 1rem;
    }

    .carrusel-imagen {
        margin-bottom: 1rem;
    }

    .carrusel-control {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}

  /* seccion tractos */

  .enlace-servicio {
    text-decoration: none;
    color: var(--color-texto);
    font-weight: bold;
    border-top: 1px solid var(--color-contorno);
    margin-left: 0;
  }
  
  .enlace-servicio span {
    margin-top: 16px;
  }
  
  .icono-mas {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: var(--color-acento);
    color: var(--color-texto-claro);
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
  }
  
  .seccion-tractos {
    background-color: var(--color-texto-claro);
    padding: 50px 0;
  }
  
  .seccion-tractos-div {
    border-left: 1px solid var(--color-contorno);
  }
  
  .seccion-tractos-div h2 {
    font-family: var(--fuente-secundaria);
    font-weight: 900;
  }
  
  .seccion-tractos-div p {
    font-family: var(--fuente-principal);
    font-size: 1rem;
  }
  
  .imagen-tracto {
    height: 250px;
    object-fit: contain;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .imagen-tracto:hover {
    transform: scale(1.1); 
  }
  



/* infraestructura */

.text-center h1 {
  font-size: 2.5rem;
  color: #1a1a1a;
  margin-bottom: 1rem;
}

.text-muted {
  color: #6c757d !important;
}

/* Cards */
.card {
  background-color: #ffffff;
  border: none;
  padding: 2rem;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect on Cards */
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}

/* Icon Styling */
.icon-color {
  color: #0056b3;
  margin-bottom: 0.5rem;
}

/* Image Cards */
.image-card img {
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.image-card:hover img {
  transform: scale(1.05);
}

.image-card h4 {
  margin-top: 1.5rem;
  font-size: 1.25rem;
  color: #333;
}

.image-card p {
  font-size: 0.95rem;
  color: #666;
}

/* info mas encabezado */

.infomas_banner {
  position: relative;
  height: 300px;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 3rem;
}

.infomas_banner-image {
  position: absolute;
  width: 100%;
  height: 100%;
}

.infomas_banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.infomas_banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      45deg,
      rgba(182, 59, 59, 0.315),
      rgba(35, 31, 32, 0.322)
  );
}

.infomas_banner-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  color: var(--color-texto-claro);
}

.infomas_banner-icon {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  border: 2px solid var(--color-texto-claro);
}

.infomas_banner-icon i {
  font-size: 2rem;
  color: var(--color-texto-claro);
}

.infomas_banner-title {
  font-size: 2.5rem;
  font-weight: 700;
  font-family: var(--fuente-secundaria);
  margin: 0;
  max-width: 800px;
}

/* Card Styles Update */
.infomas_texto-card {
  background: var(--color-texto-claro);
  border-radius: 15px;
  padding: 2rem;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.infomas_texto-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.infomas_texto-icon {
  width: 50px;
  height: 50px;
  background: var(--color-acento);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.infomas_texto-icon i {
  color: var(--color-texto-claro);
  font-size: 1.2rem;
}

.infomas_texto-title {
  color: var(--color-texto);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
  font-family: var(--fuente-secundaria);
}

.infomas_texto-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.infomas_texto-card:hover .infomas_texto-icon {
  transform: rotate(360deg);
  background: var(--color-quito);
}

/* Media Queries Update */
@media (max-width: 992px) {
  .infomas_banner {
      height: 250px;
  }

  .infomas_banner-title {
      font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .infomas_banner {
      height: 200px;
  }

  .infomas_banner-title {
      font-size: 1.5rem;
  }

  .infomas_texto-header {
      flex-direction: column;
      text-align: center;
  }

  .infomas_texto-title {
      text-align: center;
  }
}

@media (max-width: 576px) {
  .infomas_banner-icon {
      width: 60px;
      height: 60px;
  }

  .infomas_banner-icon i {
      font-size: 1.5rem;
  }
}


/* carga general */

.carga_info {
  background-color: var(--color-fondo);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

/* Contenido principal */
.carga_info-content {
  padding: 2rem;
}

.carga_subtitulo {
  color: var(--color-acento);
  font-size: 1.2rem;
  font-weight: 600;
  font-family: var(--fuente-secundaria);
  display: inline-block;
  position: relative;
  margin-bottom: 1rem;
}

.carga_subtitulo::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-acento);
  transition: var(--transition);
}

.carga_info-content:hover .carga_subtitulo::after {
  width: 100%;
}

.carga_titulo {
  color: var(--color-texto);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  font-family: var(--fuente-secundaria);
}

.carga_descripcion p {
  color: var(--color-texto);
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 2rem;
}

/* Features */
.carga_features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.carga_feature {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.5rem;
  background: var(--color-texto-claro);
  border-radius: 12px;
  transition: var(--transition);
  cursor: pointer;
  transform-origin: left;
}

.carga_feature i {
  background: var(--color-acento);
  color: var(--color-texto-claro);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: var(--transition);
}

.carga_feature:hover {
  transform: translateX(10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.carga_feature:hover i {
  background: var(--color-quito);
  transform: rotate(360deg);
}

.feature_content {
  flex: 1;
}

.feature_title {
  color: var(--color-texto);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-family: var(--fuente-secundaria);
  transition: var(--transition);
}

.feature_content p {
  color: var(--color-texto);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.6;
}

/* Imagen y overlay */
.carga_info-image {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: var(--transition);
}

.carga_info-image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  transition: var(--transition);
  transform-origin: center;
}

.carga_image-overlay {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  padding: 2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  transition: var(--transition);
}

.carga_info-image:hover {
  transform: translateY(-10px);
}

.carga_info-image:hover img {
  transform: scale(1.1);
}

.carga_info-image:hover .carga_image-overlay {
  bottom: 0;
}

.overlay_content h3 {
  color: var(--color-texto-claro);
  font-size: 1.5rem;
  font-family: var(--fuente-secundaria);
  margin-bottom: 1rem;
}

.overlay_features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.overlay_features li {
  color: var(--color-texto-claro);
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.overlay_features li::before {
  content: '→';
  color: var(--color-quito);
}

/* Animaciones */
.animate__fadeInLeft {
  animation-duration: 1s;
}

.animate__fadeInRight {
  animation-duration: 1s;
}

/* Media Queries */
@media (max-width: 992px) {
  .carga_titulo {
      font-size: 2.2rem;
  }
  
  .carga_info-image img {
      height: 400px;
  }
}

@media (max-width: 768px) {
  .carga_info-content {
      padding: 1rem;
  }

  .carga_titulo {
      font-size: 1.8rem;
  }

  .carga_feature {
      padding: 1.2rem;
  }

  .carga_feature:hover {
      transform: translateX(5px);
  }

  .carga_info-image img {
      height: 300px;
  }
}

@media (max-width: 576px) {
  .carga_titulo {
      font-size: 1.6rem;
  }

  .carga_descripcion p {
      font-size: 1rem;
  }

  .feature_title {
      font-size: 1rem;
  }

  .feature_content p {
      font-size: 0.9rem;
  }
}

/* Variables */
:root {
  --color-fondo: #EBEFF3;
  --color-texto: #231F20;
  --color-texto-claro: #FFFFFF;
  --color-acento: #B63B3B;
  --color-contorno: #cccccc;
  --color-quito: #FFC000;
  --fuente-principal: 'Barlow', sans-serif;
  --fuente-secundaria: 'Rajdhani', sans-serif;
  --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sección principal */
.carga_servicios {
  background-color: var(--color-texto-claro);
  padding: 5rem 0;
  position: relative;
}

/* Encabezados */
.carga_subtitulo {
  color: var(--color-acento);
  font-size: 1.2rem;
  font-weight: 600;
  font-family: var(--fuente-secundaria);
  display: inline-block;
  position: relative;
  margin-bottom: 1rem;
}

.carga_subtitulo::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 2px;
  background: var(--color-acento);
  transition: var(--transition);
}

.text-center:hover .carga_subtitulo::after {
  width: 100px;
}

.carga_titulo {
  color: var(--color-texto);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  font-family: var(--fuente-secundaria);
}

/* Tarjetas de servicio */
.carga_servicio-card {
  background: var(--color-fondo);
  border-radius: 15px;
  overflow: hidden;
  height: 100%;
  transition: var(--transition);
  position: relative;
}

.carga_servicio-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Header de la tarjeta */
.card-header {
  background: var(--color-acento);
  padding: 2rem;
  border-bottom: none;
  text-align: center;
  position: relative;
}

.card-header h3 {
  color: var(--color-texto-claro);
  font-size: 1.5rem;
  margin: 1rem 0 0;
  font-family: var(--fuente-secundaria);
}

.carga_servicio-icon {
  width: 70px;
  height: 70px;
  background: var(--color-texto-claro);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: var(--transition);
}

.carga_servicio-icon i {
  color: var(--color-acento);
  font-size: 1.8rem;
  transition: var(--transition);
}

.carga_servicio-card:hover .carga_servicio-icon {
  transform: rotate(360deg);
  background: var(--color-quito);
}

.carga_servicio-card:hover .carga_servicio-icon i {
  color: var(--color-texto);
}

/* Cuerpo de la tarjeta */
.card-body {
  padding: 2rem;
}

/* Categorías */
.service-categories {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.category {
  background: var(--color-texto-claro);
  padding: 1.5rem;
  border-radius: 10px;
  transition: var(--transition);
}

.category:hover {
  transform: translateX(10px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.category h4 {
  color: var(--color-acento);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  font-family: var(--fuente-secundaria);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.category h4::before {
  content: '→';
  color: var(--color-quito);
}

/* Lista de servicios */
.carga_servicio-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.carga_servicio-list li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
  color: var(--color-texto);
  transition: var(--transition);
}

.carga_servicio-list li:hover {
  transform: translateX(5px);
  color: var(--color-acento);
}

.carga_servicio-list li i {
  color: var(--color-quito);
  font-size: 0.9rem;
}

/* Efecto de brillo */
.carga_servicio-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
      to right,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
  );
  transform: skewX(-25deg);
  transition: 0.75s;
}

.carga_servicio-card:hover::after {
  left: 200%;
}

/* Animaciones */
.animate__fadeInUp {
  animation-duration: 1s;
}

.animate__fadeInLeft,
.animate__fadeInRight {
  animation-duration: 1.2s;
}

/* Media Queries */
@media (max-width: 992px) {
  .carga_titulo {
      font-size: 2rem;
  }

  .card-header {
      padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .carga_servicios {
      padding: 3rem 0;
  }

  .category {
      padding: 1rem;
  }

  .category:hover {
      transform: translateX(5px);
  }

  .carga_servicio-icon {
      width: 60px;
      height: 60px;
  }

  .card-header h3 {
      font-size: 1.3rem;
  }
}

@media (max-width: 576px) {
  .carga_titulo {
      font-size: 1.8rem;
  }

  .category h4 {
      font-size: 1.1rem;
  }

  .carga_servicio-list li {
      font-size: 0.9rem;
  }
}


/* especializados */

/* Sección principal */
.especializada_servicios {
  background-color: var(--color-texto-claro);
  padding: 5rem 0;
  position: relative;
}

/* Encabezados */
.especializada_subtitulo {
  color: var(--color-acento);
  font-size: 1.2rem;
  font-weight: 600;
  font-family: var(--fuente-secundaria);
  display: inline-block;
  position: relative;
  margin-bottom: 1rem;
}

.especializada_subtitulo::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 2px;
  background: var(--color-acento);
  transition: var(--transition);
}

.especializada_titulo {
  color: var(--color-texto);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  font-family: var(--fuente-secundaria);
}

/* Tarjetas */
.especializada_card {
  background: var(--color-fondo);
  border-radius: 15px;
  overflow: hidden;
  height: 100%;
  transition: var(--transition);
  position: relative;
}

.especializada_card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Header de tarjeta */
.card-header {
  background: var(--color-acento);
  padding: 2rem;
  text-align: center;
  position: relative;
}

.card-header h3 {
  color: var(--color-texto-claro);
  font-size: 1.5rem;
  margin: 1rem 0 0;
  font-family: var(--fuente-secundaria);
}

.especializada_icon {
  width: 70px;
  height: 70px;
  background: var(--color-texto-claro);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: var(--transition);
}

.especializada_icon i {
  color: var(--color-acento);
  font-size: 1.8rem;
  transition: var(--transition);
}

/* Cuerpo de tarjeta */
.card-body {
  padding: 2rem;
}

/* Badges */
.info-destacada {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}

.badge-custom {
  background: var(--color-acento);
  color: var(--color-texto-claro);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  transition: var(--transition);
}

.badge-custom:hover {
  background: var(--color-quito);
  transform: translateY(-2px);
}

/* Descripción */
.descripcion-servicio {
  color: var(--color-texto);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* Lista de capacidades */
.capacidades-lista h4 {
  color: var(--color-acento);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  font-family: var(--fuente-secundaria);
}

.especializada_lista {
  list-style: none;
  padding: 0;
  margin: 0;
}

.especializada_lista li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem;
  margin-bottom: 0.8rem;
  background: var(--color-texto-claro);
  border-radius: 8px;
  transition: var(--transition);
}

.especializada_lista li:hover {
  transform: translateX(10px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.especializada_lista li i {
  color: var(--color-quito);
  font-size: 1.2rem;
}

/* Grid de características */
.caracteristicas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.caracteristica-item {
  background: var(--color-texto-claro);
  padding: 1rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  transition: var(--transition);
}

.caracteristica-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.caracteristica-item i {
  color: var(--color-acento);
  font-size: 1.2rem;
}

/* Efecto de brillo */
.especializada_card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
      to right,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
  );
  transform: skewX(-25deg);
  transition: 0.75s;
}

.especializada_card:hover::after {
  left: 200%;
}

/* Media Queries */
@media (max-width: 992px) {
  .especializada_titulo {
      font-size: 2rem;
  }

  .caracteristicas-grid {
      grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .card-header {
      padding: 1.5rem;
  }

  .especializada_icon {
      width: 60px;
      height: 60px;
  }

  .info-destacada {
      justify-content: center;
  }
}

@media (max-width: 576px) {
  .card-body {
      padding: 1.5rem;
  }

  .badge-custom {
      font-size: 0.8rem;
  }

  .especializada_lista li {
      font-size: 0.9rem;
  }
}


/* encabezado */

.seccion-encabezado {
  position: relative;
  width: 100%;
  height: 400px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.seccion-encabezado::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.contenedor-blanco {
  position: relative;
  z-index: 2;
  background-color: var(--color-texto);
  width: 98%;
  height: 380px;
  border-radius: 15px;
  margin: auto;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contenedor-texto-centrado {
  text-align: center;
}

.titulo-pagina {
  font-size: 4rem;
  font-family: var(--fuente-secundaria); 
  color: var(--color-texto-claro);
  margin: 0;
}

.ruta-navegacion {
  margin-top: 20px;
  font-size: 1.2rem;
  color: var(--color-texto-claro);
}

.ruta-navegacion a {
  text-decoration: none;
  color: var(--color-texto-claro);
}

.ruta-navegacion span {
  color: var(--color-texto-claro);
}


/* Sección logística */
.services-section {
  padding: 5rem 0;
  background-color: var(--color-fondo);
  position: relative;
}

/* Header Styles */
.section-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
}

.subtitle {
  color: var(--color-acento);
  font-size: 1.2rem;
  font-weight: 600;
  font-family: var(--fuente-secundaria);
}

.title {
  color: var(--color-texto);
  font-size: 2.5rem;
  font-weight: 700;
  margin: 1rem 0;
  font-family: var(--fuente-secundaria);
}

.title-line {
  width: 80px;
  height: 3px;
  background: var(--color-acento);
  margin: 1rem auto;
  position: relative;
}

.description {
  max-width: 700px;
  margin: 0 auto;
  color: var(--color-texto);
  font-family: var(--fuente-principal);
}

/* Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding: 1rem;
}

.service-card.wide {
  grid-column: 1 / -1;
}

/* Card Styles */
.service-card {
  background: var(--color-texto-claro);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.card-image {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-card:hover .card-image img {
  transform: scale(1.1);
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4));
}

.card-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: var(--color-acento);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.card-icon i {
  color: var(--color-texto-claro);
  font-size: 1.2rem;
}

.card-icon.special {
  background: var(--color-quito);
}

.card-icon.danger {
  background: #dc3545;
}

.service-card:hover .card-icon {
  transform: rotate(360deg);
}

.card-content {
  padding: 2rem;
}

.card-content h3 {
  color: var(--color-texto);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-family: var(--fuente-secundaria);
  position: relative;
  padding-bottom: 0.5rem;
}

.card-content h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 2px;
  background: var(--color-acento);
  transition: width 0.3s ease;
}

.service-card:hover h3::after {
  width: 100px;
}

.card-content p {
  color: var(--color-texto);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-family: var(--fuente-principal);
}

.card-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-acento);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.card-btn i {
  transition: transform 0.3s ease;
}

.card-btn:hover {
  color: var(--color-quito);
}

.card-btn:hover i {
  transform: translateX(5px);
}

/* Responsive */
@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card.wide {
    grid-column: auto;
  }
}

@media (max-width: 768px) {
  .title {
    font-size: 2rem;
  }

  .card-image {
    height: 200px;
  }

  .card-content {
    padding: 1.5rem;
  }
}


/* info mas */
.infomas_section {
  background-color: var(--color-fondo);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

/* Galería principal */
.infomas_galeria {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Imagen Principal */
.infomas_imagen-principal {
  width: 100%;
  height: 300px; /* Altura fija para la imagen principal */
}

.infomas_imagen-principal .infomas_imagen-contenedor {
  height: 100%;
}

/* Grid de imágenes pequeñas */
.infomas_imagen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  height: 150px; /* Altura fija para las imágenes pequeñas */
}

/* Contenedor común de imágenes */
.infomas_imagen-contenedor {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.infomas_imagen-contenedor:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* Imágenes */
.infomas_imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.infomas_imagen-contenedor:hover .infomas_imagen {
  transform: scale(1.1);
}

/* Overlay */
.infomas_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  opacity: 0;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  transition: opacity 0.3s ease;
}

.infomas_imagen-contenedor:hover .infomas_overlay {
  opacity: 1;
}

/* Tags */
.infomas_tag {
  color: var(--color-texto-claro);
  background: var(--color-acento);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s ease;
}

.infomas_imagen-contenedor:hover .infomas_tag {
  transform: translateY(0);
  opacity: 1;
}

/* Contenido */
.infomas_contenido {
  padding: 2rem;
}

.infomas_subtitulo {
  color: var(--color-acento);
  font-size: 1.2rem;
  font-weight: 600;
  display: block;
  margin-bottom: 1rem;
  font-family: var(--fuente-secundaria);
}

.infomas_titulo {
  color: var(--color-texto);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2rem;
  font-family: var(--fuente-secundaria);
}

/* Features */
.infomas_features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.infomas_feature {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--color-texto-claro);
  border-radius: 15px;
  transition: all 0.3s ease;
}

.infomas_feature:hover {
  transform: translateX(10px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.infomas_feature-icon {
  width: 50px;
  height: 50px;
  min-width: 50px;
  background: var(--color-acento);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.infomas_feature-icon i {
  color: var(--color-texto-claro);
  font-size: 1.2rem;
}

.infomas_feature:hover .infomas_feature-icon {
  transform: rotate(360deg);
}

.infomas_feature-content h3 {
  color: var(--color-texto);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  font-family: var(--fuente-secundaria);
}

.infomas_feature-content p {
  color: var(--color-texto);
  margin: 0;
  line-height: 1.6;
  font-family: var(--fuente-principal);
}

/* Botón CTA */
.infomas_btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: var(--color-acento);
  color: var(--color-texto-claro);
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.infomas_btn:hover {
  background: var(--color-quito);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(182, 59, 59, 0.2);
  color: var(--color-texto-claro);
}

.infomas_btn i {
  transition: transform 0.3s ease;
}

.infomas_btn:hover i {
  transform: translateX(5px);
}

/* Elemento decorativo */
.infomas_decoracion {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid var(--color-acento);
  border-radius: 20px;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  opacity: 0.1;
  z-index: -1;
}

/* Media Queries */
@media (max-width: 992px) {
  .infomas_titulo {
    font-size: 2rem;
  }
  
  .infomas_imagen-principal {
    height: 250px;
  }
  
  .infomas_imagen-grid {
    height: 120px;
  }
}

@media (max-width: 768px) {
  .infomas_galeria {
    margin-bottom: 2rem;
  }

  .infomas_imagen-grid {
    grid-template-columns: repeat(2, 1fr);
    height: auto;
  }

  .infomas_imagen-item {
    height: 150px;
  }

  .infomas_feature {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .infomas_decoracion {
    display: none;
  }

  .infomas_btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .infomas_section {
    padding: 3rem 0;
  }

  .infomas_titulo {
    font-size: 1.8rem;
  }

  .infomas_imagen-principal {
    height: 200px;
  }

  .infomas_feature {
    padding: 1rem;
  }
}


/* Header Styles */
.contact-header {
  margin-bottom: 3rem;
}

.contact-header .subtitle {
  color: var(--color-acento);
  font-size: 1.2rem;
  font-weight: 600;
  font-family: var(--fuente-secundaria);
  display: block;
  margin-bottom: 1rem;
}

.contact-header .title {
  color: var(--color-texto);
  font-size: 2.5rem;
  font-weight: 700;
  font-family: var(--fuente-secundaria);
  margin-bottom: 1rem;
}

.contact-header .description {
  color: var(--color-texto);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
  font-family: var(--fuente-principal);
}

/* Contact Card Styles */
.contact-card {
  background: var(--color-texto-claro);
  border-radius: 15px;
  padding: 2rem;
  height: 100%;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.contact-card:hover {
  transform: translateY(-10px);
}

.card-icon {
  width: 70px;
  height: 70px;
  background: var(--color-fondo);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  transition: all 0.3s ease;
}

.card-icon i {
  font-size: 1.8rem;
  color: var(--color-acento);
  transition: all 0.3s ease;
}

.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.action-button.phone,
.action-button.emergency {
  background: var(--color-acento);
  color: var(--color-texto-claro);
}

.action-button.quote,
.action-button.track,
.action-button.chat,
.action-button.email {
  background: var(--color-fondo);
  color: var(--color-texto);
}

.action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}


.action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.card-content {
  position: relative;
  z-index: 2;
}

.icon-wrapper {
  width: 70px;
  height: 70px;
  background: var(--color-fondo);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.icon-wrapper i {
  font-size: 1.8rem;
  color: var(--color-acento);
  transition: all 0.3s ease;
}

.contact-card:hover .icon-wrapper {
  background: var(--color-acento);
  transform: rotate(360deg);
}

.contact-card:hover .icon-wrapper i {
  color: var(--color-texto-claro);
}

.contact-card h3 {
  color: var(--color-texto);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: var(--fuente-secundaria);
}

.contact-card p {
  color: var(--color-texto);
  font-size: 1rem;
  margin-bottom: 1.5rem;
  font-family: var(--fuente-principal);
}

.contact-link {
  color: var(--color-acento);
  text-decoration: none;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-family: var(--fuente-principal);
  transition: all 0.3s ease;
}

.contact-link i {
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}

.contact-card:hover .contact-link {
  color: var(--color-quito);
}

.contact-card:hover .contact-link i {
  opacity: 1;
  transform: translateX(0);
}

/* Hover Effect */
.hover-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent 0%, rgba(255, 192, 0, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.contact-card:hover .hover-effect {
  opacity: 1;
}

/* Social Links Styles */
.social-links-container {
  margin-top: 4rem;
}

.social-links-container h4 {
  color: var(--color-texto);
  font-family: var(--fuente-secundaria);
  margin-bottom: 1.5rem;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.social-link {
  width: 45px;
  height: 45px;
  background: var(--color-texto-claro);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-acento);
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.social-link:hover {
  background: var(--color-acento);
  color: var(--color-texto-claro);
  transform: translateY(-5px);
  border-color: var(--color-texto-claro);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .contact-header .title {
    font-size: 2rem;
  }

  .social-links {
    flex-wrap: wrap;
  }
}

/* Animation for border highlight */
@keyframes borderHighlight {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

.contact-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-quito);
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.contact-card:hover .contact-link::after {
  transform-origin: left;
  transform: scaleX(1);
}


/* mas info */

.mas-info{
  background-image: url(../img/side-pattern.webp);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
}

.segunda-columna{
  padding: 0 50px;
}

.imagen-superior img,
.imagen-inferior img {
  display: block;
  width: 100%;
  height: auto; 
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.img-redondeada {
  border-radius: 10px;
  transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.img-redondeada:hover {
  transform: scale(1.1); 
  z-index: 2;/
}

.titulo-principal {
  color: var(--color-texto);
  font-family: var(--fuente-secundaria);
  font-size: 3.5rem;
}

.subtitulo-acento {
  color: var(--color-acento);
  font-family: var(--fuente-secundaria);
  font-size: 1.75rem;
}

.texto-principal {
  color: var(--color-texto);
  font-family: var(--fuente-principal);
  line-height: 1.6;
  font-size: 1.1rem;
}

.btn-acento {
  background-color: var(--color-acento);
  color: var(--color-texto-claro);
  text-decoration: none;
  font-family: var(--fuente-principal);
  border-radius: 50px; 
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; 
}

.btn-acento:hover {
  background-color: var(--color-texto); 
  color: var(--color-texto-claro);
}


.btn-redondeado {
  border-radius: 50px;
}

.titulo-proceso {
  font-size: 3.5rem;
  color: var(--color-texto);
  font-family: var(--fuente-secundaria);
}

.subtitulo-proceso {
  font-size: 1.25rem;
  color: var(--color-texto);
  font-family: var(--fuente-principal);
  margin-bottom: 2rem;
}

.icono-circulo {
  width: 150px;
  height: 150px;
  border: .5px solid var(--color-acento);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: transform 0.5s ease; /* Suavizado de la animación de giro */
}

.icono-circulo:hover {
  transform: rotate(360deg); /* Girar el círculo y el icono juntos al hacer hover */
}

.icono-circulo i {
  color: var(--color-acento);
  font-size: 5rem;
}

.icono-circulo:hover i {
  transform: rotate(-360deg);
}

.pasos-trabajo h4 {
  color: var(--color-acento);
  font-family: var(--fuente-secundaria);
  margin-top: 20px;
}

.pasos-trabajo p {
  color: var(--color-texto);
  font-family: var(--fuente-principal);
  font-size: 1rem;
}

.process-arrow {
  max-width: 100px; /* Tamaño máximo de la flecha */
  margin: auto; /* Centrar la flecha */
}


/* card */




/* mapa */ 
.map-section {
  position: relative;
  background: var(--color-fondo);
  padding: 0;
}

.map-container {
  position: relative;
  height: 500px;
  width: 100%;
}

#map {
  height: 100%;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Tarjeta de ubicación */
.location-card {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--color-texto-claro);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  max-width: 320px;
  z-index: 1;
}

.location-card h3 {
  color: var(--color-texto);
  font-family: var(--fuente-secundaria);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.location-details p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.8rem;
  color: var(--color-texto);
  font-family: var(--fuente-principal);
}

.location-details i {
  color: var(--color-acento);
  width: 20px;
}

.directions-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-acento);
  color: var(--color-texto-claro);
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  font-family: var(--fuente-principal);
  transition: all 0.3s ease;
  margin-top: 0.5rem;
}

.directions-btn:hover {
  background: var(--color-quito);
  transform: translateY(-2px);
}

/* Controles del mapa */
.map-controls {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1;
}

.control-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--color-texto-claro);
  color: var(--color-acento);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.control-btn:hover {
  background: var(--color-acento);
  color: var(--color-texto-claro);
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .location-card {
    position: relative;
    top: 0;
    left: 0;
    max-width: 100%;
    margin: 1rem;
    border-radius: 8px;
  }

  .map-container {
    height: 400px;
  }
}

/* formulario */.formulario-pagina-principal {
  padding: 80px 0;
  background-image: url(../img/bg.webp);
  background-color: var(--color-texto-claro);
  position: relative;
}

.formulario-pagina {
  background-color: var(--color-quito);
  padding: 40px;
  border-radius: 15px;
  color: var(--color-texto-claro);
  transition: all 0.3s ease-in-out;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Sección de cotización */
.cotizacion-title {
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--color-texto);
  margin-bottom: 1.5rem;
  font-family: var(--fuente-secundaria);
  position: relative;
  padding-bottom: 10px;
}

.cotizacion-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: var(--color-acento);
  transition: width 0.3s ease;
}

.cotizacion-section:hover .cotizacion-title::after {
  width: 100px;
}

.cotizacion-text {
  font-size: 1rem;
  color: var(--color-texto);
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

/* Tarjetas de estadísticas */
.stats-container {
  margin-top: 3rem;
}

.tarjeta-estadisticas {
  background-color: var(--color-quito);
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.tarjeta-estadisticas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--color-acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.tarjeta-estadisticas:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.tarjeta-estadisticas:hover::before {
  transform: scaleX(1);
}

.stats-icon {
  font-size: 2rem;
  color: var(--color-acento);
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
}

.tarjeta-estadisticas:hover .stats-icon {
  transform: scale(1.2);
}

.numero-estadisticas {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-texto);
  margin-bottom: 0.5rem;
  font-family: var(--fuente-secundaria);
}

.descripcion-estadisticas {
  font-size: 1.1rem;
  color: var(--color-texto);
  font-family: var(--fuente-principal);
}

/* Formulario */
.formulario-contacto {
  background: rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 15px;
}

.formulario-contacto .titulo {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-texto);
  margin-bottom: 2rem;
  font-family: var(--fuente-secundaria);
  text-align: center;
}

.grupo-formulario {
  margin-bottom: 1.5rem;
}

.grupo-formulario label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--color-texto);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Inputs y Selects */
input[type="text"],
input[type="email"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid transparent;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--color-texto);
  font-size: 1rem;
  transition: all 0.3s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-acento);
  box-shadow: 0 0 0 3px rgba(182, 59, 59, 0.1);
  outline: none;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* Botón */
.boton-tema {
  background-color: var(--color-acento);
  color: var(--color-texto-claro);
  padding: 1rem 2rem;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  width: auto;
  justify-content: center;
}

.boton-tema i {
  transition: transform 0.3s ease;
}

.boton-tema:hover {
  background-color: #a12e2e;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(182, 59, 59, 0.3);
}

.boton-tema:hover i {
  transform: translateX(5px);
}

.boton-tema:active {
  transform: translateY(1px);
}

```css
/* Modal Styles */
.modal-content {
  border: none;
  border-radius: 15px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.modal-header {
  background-color: var(--color-quito);
  color: var(--color-texto);
  border-radius: 15px 15px 0 0;
  border-bottom: none;
  padding: 1.5rem;
}

.modal-title {
  font-family: var(--fuente-secundaria);
  font-weight: 700;
  font-size: 1.5rem;
}

.modal-body {
  padding: 2rem;
  color: var(--color-texto);
  font-family: var(--fuente-principal);
}

.modal-footer {
  border-top: none;
  padding: 1.5rem;
}

.modal .btn-primary {
  background-color: var(--color-acento);
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 25px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.modal .btn-primary:hover {
  background-color: #a12e2e;
  transform: translateY(-2px);
}

/* Animaciones */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Clases de utilidad para animaciones */
.slide-in {
  animation: slideIn 0.5s ease forwards;
}

.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

/* Estilos para el ReCaptcha */
.g-recaptcha {
  margin: 1.5rem 0;
  display: flex;
  justify-content: center;
}

/* Mejoras para select personalizado */
.seleccion-personalizada {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231F20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
  padding-right: 2.5rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .formulario-pagina {
    padding: 30px;
  }

  .cotizacion-title {
    font-size: 2rem;
  }
}

@media (max-width: 992px) {
  .stats-container {
    margin-top: 2rem;
  }

  .tarjeta-estadisticas {
    margin-bottom: 1rem;
  }
}

@media (max-width: 768px) {
  .formulario-pagina-principal {
    padding: 40px 0;
  }

  .formulario-pagina {
    padding: 20px;
  }

  .cotizacion-title {
    font-size: 1.8rem;
  }

  .grupo-formulario {
    margin-bottom: 1rem;
  }

  .boton-tema {
    width: 100%;
  }

  .tarjeta-estadisticas {
    padding: 1.5rem;
  }

  .numero-estadisticas {
    font-size: 2rem;
  }
}

@media (max-width: 576px) {
  .formulario-contacto .titulo {
    font-size: 1.5rem;
  }

  .stats-container .col-12 {
    padding: 0 10px;
  }

  input[type="text"],
  input[type="email"],
  input[type="number"],
  select,
  textarea {
    font-size: 0.9rem;
  }
}

/* Estilos para mensajes de validación */
.grupo-formulario.error input,
.grupo-formulario.error select,
.grupo-formulario.error textarea {
  border-color: #dc3545;
}

.grupo-formulario.success input,
.grupo-formulario.success select,
.grupo-formulario.success textarea {
  border-color: #28a745;
}

.mensaje-error {
  color: #dc3545;
  font-size: 0.8rem;
  margin-top: 0.25rem;
  display: none;
}

.grupo-formulario.error .mensaje-error {
  display: block;
}

/* Estilos para el estado de carga */
.boton-tema.loading {
  position: relative;
  color: transparent;
}

.boton-tema.loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Estilos para el estado hover de los inputs */
.grupo-formulario:hover label {
  color: var(--color-acento);
}

/* Efecto de focus para todo el grupo del formulario */
.grupo-formulario:focus-within {
  transform: translateX(5px);
}

/* equipo */
.lowboys{
  background-color: var(--color-texto-claro);
}

.lowboys h3{
  font-family: var(--fuente-secundaria);
  font-weight: 900;
  font-size: 3.5rem;
  margin-bottom: 50px;
}

.imagen-lowboy img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.btn-especificaciones {
  background-color: var(--color-acento);
  color: var(--color-texto-claro);
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-especificaciones:hover {
  background-color: var(--color-texto);
}

.btn-especificaciones i {
  margin-right: 5px;
}

.tarjeta-lowboy {
  border: 1px solid var(--color-contorno);
  border-radius: 15px;
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
  overflow: hidden; 
}

.tarjeta-lowboy:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  filter: brightness(1.05);
}

.imagen-lowboy img {
  border-radius: 15px;
}

.btn-especificaciones {
  background-color: var(--color-acento);
  color: var(--color-texto-claro);
  border-radius: 20px;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}

.btn-especificaciones:hover {
  background-color: var(--color-texto);
  color: var(--color-texto-claro);
}


/* footer */

.site-footer {
  background-color: var(--color-texto);
  color: var(--color-texto-claro);
  font-family: var(--fuente-principal);
}

/* Newsletter Section */
.footer-top {
  background: linear-gradient(45deg, var(--color-acento), var(--color-texto));
  padding: 3rem 0;
}

.newsletter-box {
  background: rgba(255,255,255,0.1);
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.newsletter-form .input-group {
  display: flex;
  gap: 0.5rem;
}

.newsletter-form input {
  flex: 1;
  padding: 0.8rem;
  border: none;
  border-radius: 25px;
  background: rgba(255,255,255,0.2);
  color: var(--color-texto-claro);
}

.newsletter-form button {
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  background: var(--color-acento);
  color: var(--color-texto-claro);
  cursor: pointer;
  transition: all 0.3s ease;
}

.newsletter-form button:hover {
  background: var(--color-quito);
  transform: translateY(-2px);
}


.schedule-box {
  background: rgba(255,255,255,0.1);
  padding: 1.5rem;
  border-radius: 12px;
  margin-top: 1.5rem;
}

.schedule-box h5 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-texto-claro);
  margin-bottom: 1rem;
}

.schedule-box p {
  margin: 0;
  color: rgba(255,255,255,0.8);
}

.schedule-box .monitoring {
  margin-top: 0.5rem;
  color: var(--color-quito);
}

.newsletter-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
}

.newsletter-content h3 {
  color: var(--color-texto-claro);
  font-family: var(--fuente-secundaria);
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.newsletter-form {
  flex: 1;
  max-width: 500px;
}

.input-group {
  display: flex;
  gap: 1rem;
}

.input-group input {
  flex: 1;
  padding: 1rem;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-texto-claro);
}

.input-group button {
  padding: 1rem 2rem;
  border: none;
  border-radius: 8px;
  background: var(--color-quito);
  color: var(--color-texto);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.input-group button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Footer Main */
.footer-main {
  padding: 5rem 0 3rem;
  position: relative;
}

/* Company Info */
.footer-brand {
  margin-bottom: 2rem;
}

.footer-logo {
  height: 60px;
  margin-bottom: 1.5rem;
}

.company-description {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.certifications {
  display: flex;
  gap: 1rem;
}

.cert-badge {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  font-size: 0.9rem;
}

/* Footer Links */
.footer-title {
  color: var(--color-texto-claro);
  font-family: var(--fuente-secundaria);
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  position: relative;
}

.footer-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--color-acento);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 1rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.footer-links a i {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.footer-links a:hover {
  color: var(--color-quito);
  transform: translateX(5px);
}

.footer-links a:hover i {
  transform: translateX(3px);
}

/* Contact Grid */
.contact-grid {
  display: grid;
  gap: 2rem;
}

.info-item, .hours-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.info-item i, .hours-item i {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-acento);
}

.info-item h5, .hours-item h5 {
  color: var(--color-texto-claro);
  margin: 0 0 0.5rem;
  font-family: var(--fuente-secundaria);
}

.info-item p, .hours-item p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* Social Bar */
.social-bar {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-link {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-texto-claro);
  transition: all 0.3s ease;
}

.social-link:hover {
  background: var(--color-acento);
  transform: translateY(-3px);
}

/* Footer Bottom */
.footer-bottom {
  background: rgba(0, 0, 0, 0.2);
  padding: 1.5rem 0;
}

.bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.legal-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.legal-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.3s ease;
}

.legal-links a:hover {
  color: var(--color-quito);
}

.separator {
  color: rgba(255, 255, 255, 0.3);
}

/* Responsive */
@media (max-width: 992px) {
  .newsletter-container {
    flex-direction: column;
    text-align: center;
  }

  .input-group {
    flex-direction: column;
  }

  .social-bar {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .bottom-content {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .legal-links {
    flex-direction: column;
    gap: 0.5rem;
  }

  .separator {
    display: none;
  }
}

/* nosotros 3 */
.tabs-section {
  background-color: var(--background-color);
  padding: 4rem 0;
}

/* Tabs Navigation Styles */
.tabs-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 2rem;
  border: none;
  background: var(--white);
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition);
}

.tab-btn i {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.tab-btn span {
  font-weight: 600;
  color: var(--secondary-color);
}

.tab-btn.active {
  background: var(--primary-color);
  transform: translateY(-5px);
}

.tab-btn.active i,
.tab-btn.active span {
  color: var(--white);
}

.tab-btn:hover:not(.active) {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Tab Content Styles */
.tabs-content {
  position: relative;
  min-height: 300px;
}

.tab-panel {
  display: none;
  position: absolute;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tab-panel.active {
  display: block;
  opacity: 1;
}

.content-wrapper {
  background: var(--white);
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.content-wrapper h3 {
  color: var(--primary-color);
  margin-bottom: 1.5rem;
  text-align: center;
}

.text-content {
  color: var(--text-color);
  line-height: 1.6;
}

/* Objectives List Styles */
.objectives-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.objective-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  background: var(--background-color);
  border-radius: 8px;
  transition: var(--transition);
}

.objective-item:hover {
  transform: translateX(5px);
  background: #f8f9fa;
}

.objective-item i {
  color: var(--primary-color);
}

/* Info Cards Styles */
.info-card {
  background: var(--white);
  padding: 2rem;
  border-radius: 15px;
  text-align: center;
  transition: var(--transition);
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.info-card:hover {
  transform: translateY(-10px);
}

.info-card i {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.info-card h4 {
  color: var(--secondary-color);
  margin-bottom: 1rem;
}

.info-card p {
  color: var(--text-color);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .tabs-nav {
    flex-wrap: wrap;
  }
  
  .tab-btn {
    width: calc(50% - 0.5rem);
  }
  
  .content-wrapper {
    padding: 1.5rem;
  }
  
  .objectives-list {
    flex-direction: column;
  }
  
  .objective-item {
    width: 100%;
  }
}

/* Sección de Valores */
.values-section {
  padding: 5rem 0;
  background-color: var(--background-color);
}

.values-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
}

.section-title {
  color: var(--primary-color);
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 3px;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 1rem;
}

.value-card {
  position: relative;
  perspective: 1000px;
}

.card-content {
  background: var(--card-background);
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
  transition: var(--transition);
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transform-style: preserve-3d;
}

.value-card:hover .card-content {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--background-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  transition: var(--transition);
}

.icon-wrapper i {
  font-size: 2rem;
  color: var(--primary-color);
  transition: var(--transition);
}

.value-card:hover .icon-wrapper {
  background: var(--primary-color);
  transform: rotate(360deg);
}

.value-card:hover .icon-wrapper i {
  color: var(--card-background);
}

.value-card h3 {
  color: var(--secondary-color);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  transition: var(--transition);
}

.value-card p {
  color: var(--text-color);
  line-height: 1.6;
  margin: 0;
}

/* Agregamos un efecto de brillo al hover */
.card-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.value-card:hover .card-content::before {
  transform: translateX(100%);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .values-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .value-card {
    margin-bottom: 1rem;
  }
}

/* Animación para cargar los elementos gradualmente */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-on-scroll {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}


  /* historia */

  .feature-section {
    padding: 60px;
    margin: 20px;
    background-color: var(--color-fondo);
    border-radius: 16px;
    transition: transform 0.3s ease;
  }
  
  .feature-title {
    color: var(--color-acento);
    font-weight: bold;
    font-size: 2rem;
    position: relative;
    display: inline-block;
    margin-bottom: 2rem;
  }
  
  .feature-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--color-acento);
    transition: width 0.3s ease;
  }
  
  .feature-title:hover::after {
    width: 100%;
  }
  
  .content-block {
    padding: 20px;
    border-radius: 10px;
    transition: all 0.3s ease;
  }
  
  .content-block:hover {
    background-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
  
  .checklist-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: #6c757d;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
  }
  
  .checklist-item:hover {
    background-color: white;
    transform: translateX(10px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  }
  
  .checklist-item i {
    color: var(--color-acento);
    margin-right: 15px;
    transition: transform 0.3s ease;
  }
  
  .checklist-item:hover i {
    transform: rotate(90deg);
  }
  
  .image-container {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    transition: transform 0.3s ease;
  }
  
  .image-container:hover {
    transform: scale(1.02);
  }
  
  .stat-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
    cursor: pointer;
  }
  
  .stat-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
  
  .stat-icon {
    width: 40px;
    transition: transform 0.3s ease;
  }
  
  .stat-box:hover .stat-icon {
    transform: rotate(360deg);
  }
  
  .stat-box h4 {
    margin-top: 15px;
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--color-texto);
  }
  
  .progress-bar {
    transition: width 1.5s ease-in-out;
  }
  
  /* Animación para la barra de progreso */
  @keyframes progressAnimation {
    from { width: 0; }
    to { width: 80%; }
  }
  
  /* cookies */
.cookie-consent {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: var(--color-acento);
  color: var(--color-texto-claro);
  padding: 20px;
  border-radius: 15px;
  display: none;
  z-index: 1000;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  font-family: var(--fuente-principal);
  max-width: 500px;
  margin: 0 auto;
}

.cookie-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cookie-consent p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.cookie-link {
  color: var(--color-texto-claro);
  text-decoration: underline;
  font-weight: bold;
  margin-left: 5px;
}

.cookie-link:hover {
  color: #fff;
}

.btn-accept {
  background-color: #ffffff;
  color: var(--color-acento);
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-family: var(--fuente-secundaria);
}

.btn-accept:hover {
  background-color: #f5f5f5;
  color: var(--color-acento);
}

/* Animaciones */
.cookie-consent {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease-in-out;
}

.cookie-consent.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

  
  .cookie-consent button:hover {
    background-color: #ccc;
  }

  /* Media queries */

  @media (max-width: 1280px) {
    .carrusel-content h1, .carrusel-content h2 {
      font-size: 2.8rem;
    }
 
    .carrusel-content p {
      font-size: 1.5rem;
    }

    .carrusel-imagen img {
      width: 100%;
      height: auto;
      border-radius: 10px;
      transition: transform 0.3s ease;
  }

}

  @media (max-width: 1024px) {
    .carrusel-content h1, .carrusel-content h2 {
      font-size: 2.1rem;
    }
 
    .carrusel-content p {
      font-size: 1.2rem;
    }

    .carrusel-imagen img {
      width: 100%;
      height: auto;
      border-radius: 10px;
      transition: transform 0.3s ease;
  }
  
  .footer-grid {
    gap: 30px;
  }

  .social-link {
    font-size: 1.3rem;
  }
}

@media (max-width: 768px) {
  /* Menú lateral */
  .submenu {
    display: none;
    padding-left: 1rem;
  }

  .desplegable-servicios.activo .submenu {
    display: block;
    max-height: 500px;
    transition: max-height 0.5s ease;
  }

  .submenu a {
    font-size: 0.85rem;
  }

  /* Ajuste de la barra de navegación */
  .navegacion-principal .nav-link {
    font-size: 0.8rem; 
  }

  .navegacion-principal .submenu a {
    font-size: 0.7rem;
  }

  .navegacion-principal .nav-item {
    margin-right: 2px;
  }

  .navegacion-principal .nav-link {
    padding: 5px 10px;
  }

  /* Ajustes de carrusel */
  .carrusel-item {
    flex-direction: column;
  }

  .carrusel-content,
  .carrusel-imagen {
    width: 100%;
    padding: 1rem;
  }

  .carrusel-content h1,
  .carrusel-content h2 {
    font-size: 1.5rem;
  }

  .carrusel-content p {
    font-size: 0.7rem; 
  }

  .carrusel-imagen img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    transition: transform 0.3s ease;
  }

  .direccion {
    display: none;
  }

  .redes-sociales {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    text-align: center;
    width: 100%;
  }

  .email {
    display: inline-block;
    margin-top: 0.5rem;
  }

  .servicios h3 {
    font-size: 2.5rem;
  }

  .servicios h4 {
    font-size: 1.3rem;
  }

  .servicios p {
    font-size: 1rem;
    padding: 0 20px;
  }

  .tarjeta-servicio {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
  }

  .icono-tarjeta i {
    width: 90px;
    height: 90px;
    padding: 18px;
  }

  .titulo-servicio {
    font-size: 1.2rem;
  }

  .descripcion-servicio {
    font-size: 0.85rem;
  }

  .btn-leer-mas {
    padding: 9px 18px;
  }

  #map-container {
    height: 300px;
  }

  .footer-grid {
    flex-direction: column;
    text-align: center;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 10px;
  }

  .lowboys h3{
    font-family: var(--fuente-secundaria);

    font-size: .8rem;
  }

}

@media (max-width: 500px) {
  .carrusel {
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }

  .carrusel-content {
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
  }

  .carrusel-imagen {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .carrusel-imagen img {
    width: 100%;
    padding: 0 20px;
    height: auto;
  }
  
  .carrusel-controles {
    display: none;
  }

  .carrusel-content h1, .carrusel-content h2 {
    font-size: 1.9rem;
    margin-top: 15px;
  }

  .carrusel-content p {
    font-size: 1rem;
  }
  .servicios h3 {
    font-size: 2rem;
  }

  .servicios h4 {
    font-size: 1.2rem;
  }

  .servicios p {
    font-size: 0.9rem;
    padding: 0 15px;
  }

  /* Tarjetas se apilan verticalmente y ocupan todo el ancho */
  .tarjeta-servicio {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
  }

  .icono-tarjeta i {
    width: 80px;
    height: 80px;
    padding: 15px;
  }

  .titulo-servicio {
    font-size: 1.15rem;
  }

  .descripcion-servicio {
    font-size: 0.9rem;
  }

  /* Botón ajustado al tamaño de la pantalla */
  .btn-leer-mas {
    padding: 8px 16px;
  }
}
/* Ajuste general en pantallas medianas (tablets en vertical, móviles grandes) */
@media (max-width: 1024px) {
  /* Carrusel */
  .carrusel-content h1, .carrusel-content h2 {
      font-size: 2.1rem;
  }
  .carrusel-content p {
      font-size: 1.2rem;
  }
  .carrusel-imagen img {
      width: 100%;
      height: auto;
  }
  /* Footer */
  .footer-grid {
      gap: 30px;
  }
  .social-link {
      font-size: 1.3rem;
  }
  .feature-title {
    font-size: 1.8rem;
  }
  .stat-box h4 {
      font-size: 1rem;
  }
  .tabs-nav .tab-btn span {
      font-size: 0.9rem;
  }
  .info-card h4 {
      font-size: 1.1rem;
  }
}

/* Ajuste en pantallas pequeñas (móviles grandes en horizontal) */
@media (max-width: 768px) {
  /* Menú de navegación */
  .submenu {
      display: none;
  }
  .desplegable-servicios.activo .submenu {
      display: block;
      max-height: 500px;
      transition: max-height 0.5s ease;
  }
  .navegacion-principal .nav-link {
      font-size: 0.8rem;
  }
  .navegacion-principal .nav-item {
      margin-right: 2px;
  }
  /* Carrusel */
  .carrusel-item {
      flex-direction: column;
  }
  .carrusel-content h1, .carrusel-content h2 {
      font-size: 1.5rem;
  }
  .carrusel-content p {
      font-size: 0.7rem;
  }
  .carrusel-imagen img {
      width: 100%;
      height: auto;
  }
  .direccion {
      display: none;
  }
  /* Footer */
  .footer-grid {
      flex-direction: column;
      text-align: center;
  }
  .footer-bottom {
      flex-direction: column;
      gap: 10px;
  }

  .lowboys h3 {
      font-size: .8rem;
  }
  .contenedor-blanco {
    padding: 20px;
  }
  .titulo-pagina {
      font-size: 1.8rem;
  }
  .ruta-navegacion {
      font-size: 0.9rem;
  }
  .feature-title {
      font-size: 1.6rem;
  }
  .content-block, .text-content p, .objective-item span {
      font-size: 0.9rem;
  }
  .stat-box h4, .counter {
      font-size: 1rem;
  }
  .tabs-nav .tab-btn span {
      font-size: 0.8rem;
  }
  .tab-panel h3, .info-card h4, .value-card h3 {
      font-size: 1.1rem;
  }
  .value-card p {
      font-size: 0.9rem;
  }
  .values-grid {
      grid-template-columns: 1fr;
      gap: 20px;
  }
  .feature-section {
    width: 100vw;
    margin: 0 auto; 
    padding: 0; 
    box-sizing: border-box;
  }
  .section-ajuste{
    
  }
}

/* Ajustes en pantallas muy pequeñas (móviles pequeños en vertical) */
@media (max-width: 500px) {
  /* Carrusel */
  .carrusel-content {
      padding: 0 40px;
  }
  .carrusel-imagen {
      padding: 0 20px;
  }
  .carrusel-controles {
      display: none;
  }
  .carrusel-content h1, .carrusel-content h2 {
      font-size: 1.9rem;
      margin-top: 15px;
  }
  .carrusel-content p {
      font-size: 1rem;
  }
  /* Tarjetas de servicio */
  .tarjeta-servicio {
      width: 100%;
      height: auto;
      margin-bottom: 30px;
  }
  .titulo-servicio {
      font-size: 1.15rem;
  }
  .descripcion-servicio {
      font-size: 0.9rem;
  }
  .btn-leer-mas {
      padding: 8px 16px;
  }
  .contenedor-texto-centrado h1, .titulo-pagina {
    font-size: 1.5rem;
  }
  .feature-title {
      font-size: 1.3rem;
  }
  .content-block, .text-content p, .objective-item span {
      font-size: 0.8rem;
  }
  .stat-box h4, .counter {
      font-size: 0.9rem;
  }
  .tabs-nav .tab-btn span {
      font-size: 0.7rem;
  }
  .tab-panel h3, .info-card h4, .value-card h3 {
      font-size: 1rem;
  }
  .value-card p {
      font-size: 0.8rem;
  }
  .values-grid {
      grid-template-columns: 1fr;
      gap: 15px;
  }

}

/* Adaptación para pantallas de 320px o menos (móviles muy pequeños) */
@media (max-width: 320px) {
  /* Carrusel */
  .carrusel-content h1, .carrusel-content h2 {
      font-size: 1.5rem;
  }
  .carrusel-content p {
      font-size: 0.8rem;
  }
  /* Texto y botones */
  .text-center h1 {
      font-size: 1.8rem;
  }
  .btn-acento, .btn-saber-mas {
      padding: 10px 20px;
      font-size: 0.9rem;
  }
  .titulo-pagina, .feature-title {
    font-size: 1.2rem;
  }
  .tabs-nav .tab-btn span, .content-block, .text-content p {
      font-size: 0.7rem;
  }
  .values-section h2.section-title {
      font-size: 1.3rem;
  }
  .value-card h3, .stat-box h4, .counter {
      font-size: 0.8rem;
  }
}