body {
    font-family: 'Roboto', sans-serif;
    padding-top: 30px; /* Para compensar el header fijo */
  }
/* Espaciado de la barra de navegación (si aplica) */
.navbar-nav .nav-item {
margin-left: 26px;
}

/* Sección principal con mayor altura */
.hero-section {
position: relative;
min-height: 660px;
background-color: #191919;
overflow: hidden;
}

/* Contenedor de los círculos decorativos (más pequeño) */
.decoration-circles {
position: absolute;
top: 30%;
right: 0;
transform: translateY(-50%);
width: 150px; /* Disminuido */
height: 150px; /* Disminuido */
pointer-events: none;
z-index: 0;
}

/* Círculos concéntricos */
.decoration-circles .circle {
position: absolute;
border: 2px solid #e20001;
border-radius: 50%;
width: 100%;
height: 100%;
top: 0;
left: 0;
animation: circlePulse 4s ease-in-out infinite;
opacity: 0.8;
}


/* Círculo 2: ligeramente más pequeño y centrado */
.decoration-circles .circle2 {
width: 80%;
height: 80%;
left: 10%;
top: 10%;
animation-delay: 1s;
}

/* Animación de “crecimiento” continuo */
@keyframes circlePulse {
0%, 100% {
  transform: scale(1);
  opacity: 0.6;
}
50% {
  transform: scale(1.2);
  opacity: 1;
}
}
@media (max-width: 768px) {
  .qr-section {
    display: none;
  }
}
/* Bloque rojo extendido a la izquierda */
.title-block {
background-color: #e20001;
padding: 1rem 2rem;
color: #fff;
max-width: 500px;
margin-left: 0;

}
.logo-shrink {
  width: 160px !important; /* o el tamaño pequeño que prefieras */
  height: auto;
  transition: all 0.3s ease;
}

.navbar-brand img {
  transition: all 0.3s ease;
}

  /* Responsive para tablets */
  @media (max-width: 768px) {
  .navbar-brand img {
    height: 60px;
    width: 50px;
  }

 
}

/* Responsive para móviles */
@media (max-width: 576px) {
  .navbar-brand img {
    width: 130px;
  }


}
/* Subtítulo con fondo blanco y con ícono Font Awesome */
.intro-text {
background-color: #fff;
color: #000;
margin-top: 1rem;
padding: 0.5rem 1rem;
display: inline-block;
}

/* Botones con bordes cuadrados */
.btn-hero {
border-radius: 0;
font-weight: 500;
padding: 0.7rem 1.2rem;
}
.carousel-control{
  background-color: rgb(139 139 139 / 60%) !important;
}
/* Placeholder para video */
.video-placeholder {
background-color: #000;
display: flex;
align-items: center;
justify-content: center;
height: 400px;
margin-top: 1rem;
color: #fff;
}

/* Animación para los cuadrados decorativos */
@keyframes grow {
0%, 100% {
  transform: scale(1);
  opacity: 0.6;
}
50% {
  transform: scale(1.4);
  opacity: 1;
}
}

/* Cuadrados decorativos con animación */
.decoration-square {
position: absolute;
background-color: rgba(192, 0, 0, 0.2);
width: 50px;
height: 50px;
animation: grow 4s ease-in-out infinite;
}

/* Posiciones personalizadas para los cuadrados decorativos */
.decoration-square.sq1 { top: 0; left: 0; }
.decoration-square.sq2 { top: 20%; right: 10%; animation-delay: 1s; }
.decoration-square.sq3 { bottom: 15%; left: 10%; animation-delay: 2s; }
.decoration-square.sq4 { bottom: 10%; right: 0; animation-delay: 3s; }



/*

--------- ESTILOS DE CARRUSEL -------------

*/

.carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.carousel-inner {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 20px 10px; /* Ajuste del relleno para evitar que las tarjetas se corten */
}

.publicaciones-card {
  flex: 0 0 16.66%; /* 6 tarjetas por fila */
  margin: 0 4px;
  scroll-snap-align: start;
  box-sizing: border-box;
  margin-top: 20px;
  margin-bottom: 20px;

  /* Sombra suave */
  box-shadow: 0 4px 8px rgba(34, 34, 34, 0.1);
  transition: box-shadow 0.3s ease;
}

.publicaciones-card:hover {
  /* Sombra un poco más intensa al pasar el mouse */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.publicaciones-card img {
  width: 270px;
  height: 200px;
  object-fit: cover; /* Esto asegura que la imagen se recorte si es necesario para llenar el espacio */
  display: block;
  margin: 0 auto; /* Centrar la imagen horizontalmente si deseas */
}



.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(49, 49, 49, 0.6);
  color: #fff;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 10;
}

.carousel-control.prev {
  left: 5px;
}

.carousel-control.next {
  right: 5px;
}

.carousel-inner::-webkit-scrollbar {
  display: none;
}

.publicaciones-section {
  position: relative;
  margin-top: 20px; /* Añadimos espacio en la parte superior para separar la sección */
}

.publicaciones-franja {
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  height: 300px;
  background-color: #000;
  z-index: 0;
}

.publicaciones-card {
  z-index: 1;
}

#publicaciones .card {
  min-height: 350px;
  border-radius: 0 !important; /* Quitar borde redondeado de la tarjeta */
}

#publicaciones .card-img-top {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important; /* Quitar redondeado superior de la imagen */
}

#publicaciones .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.9rem;
}

#publicaciones .card-title {
  font-weight: bold;
  font-size: 1rem;
}

#publicaciones .card-text {
  font-size: 0.85rem;
}

#publicaciones .text-danger i {
  font-size: 1.2rem;
}


@media (max-width: 1024px) {
  .publicaciones-card {
    flex: 0 0 33.33%; /* 3 tarjetas por fila */
  }
}

@media (max-width: 768px) {
  .publicaciones-card {
    flex: 0 0 50%; /* 2 tarjetas por fila en pantallas más pequeñas */
  }
  .card {
    min-height: 320px; /* Ajuste de altura para pantallas más pequeñas */
  }
}

@media (max-width: 480px) {
  .publicaciones-card {
    flex: 0 0 90%; /* 1 tarjeta por fila en pantallas muy pequeñas */
  }
  .card {
    min-height: 280px; /* Ajuste de altura para pantallas aún más pequeñas */
  }
}


/*

---------- ESTILOS SECCION QR
*/
.btn-danger {
  background-color: #e20001 !important;
  border-color: #e20001 !important;
}

.btn-danger:hover {
  background-color: #bf0000 !important; /* Un tono más oscuro */
  border-color: #bf0000 !important;
}


.descarga-section {
  margin-top: 40px;
  background-color: #e20001;
  padding-bottom: 80px;
  margin-bottom: 60px; /* Espacio debajo de la sección */
}

.icono-descarga {
  font-size: 3rem;
}

.qr-img {
  width: 100px;
  height: 100px;
  background-color: white;
  padding: 10px;
  border-radius: 5px;
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 576px) {
  .descarga-section {
    padding-top: 120px; /* Espacio superior más grande en móviles */
  }

  .col-2 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }

  .qr-img {
    width: 80px; /* Hacer el QR más pequeño en móviles */
    height: 80px;
  }
}

/*
--------- BOTONES FLOTANTES -----------------------------
*/

.botones-sociales {
  position: fixed;
  top: 40%;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 1000;
  animation: slideInLeft 1s ease forwards;
}

.btn-social {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 26px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

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

/* Colores específicos */
.btn-social.whatsapp { background-color: #25D366; }
.btn-social.facebook { background-color: #3b5998; }
.btn-social.instagram { background-color: #C13584; }
.btn-social.youtube { background-color: #FF0000; }
.btn-social.tiktok {
  background-color: #000;
  color: #fff;}
  
.btn-social.tiktok:hover {
  background-color: #010101;
  color: #69C9D0; /* Color característico de TikTok */
}
/* Animación */
@keyframes slideInLeft {
  0% {
    transform: translateX(-60px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


/*
--------- ESTILO DE NOSTROS -----------------------------
*/


.conocenos-section {
  background-color: #fff;
  color: #333;
}

.parrafo-contenido {
  max-width: 650px;
  font-size: 1rem;
  padding-bottom: 17px;
}

.numero {
  background-color: #e20001;
  color: white;
  font-weight: bold;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.boton-ajustado {
  padding: 12px 36px;
  font-size: 1rem;
  border-radius: 0;
}

/* Solo afecta esta sección */
.imagen-ajustada {
  padding-right: 40px; /* un poco más de espacio */
}

.texto-ajustado {
  padding-left: 15px; /* espacio hacia la izquierda del texto */
}

/*

--------------- ESTILOS DE SERVICIOS

*/
/* Estilos específicos solo para la sección 'Nuestros Servicios' */
.servicios-section {
  background-color: #f8f9fa;
  color: #333;
}

.servicios-section .card-img-top {
  height: 200px;
  object-fit: cover;
}

.servicios-section .card-body {
  padding: 1rem;
}

.servicios-section .card {
  border-radius: 0 !important;
}

.servicios-section .boton-ajustado {
  padding: 12px 36px;
  font-size: 1rem;
  border-radius: 0;
  margin-top: 20px;
}

.servicios-section .text-muted {
  font-size: 1rem;
}

.servicios-section .text-end {
  text-align: right;
}

.servicios-section .parrafo-contenido {
  max-width: 650px;
}

@media (max-width: 767px) {
  .servicios-section .text-lg-end {
    text-align: center;
  }
}

@media (max-width: 991px) {
  .servicios-section .col-lg-6 {
    margin-bottom: 30px;
  }
}


/*

----------- DISEÑO DE CLIENTES

*/

/* Sección Testimonios */
.conocenos-section {
  background-color: #fff;
  color: #333;
}
.parrafo-contenido {
  max-width: 650px;
  font-size: 1rem;
}


.carousel-track-container {
  overflow: hidden;
  /* Ajusta la altura para acomodar las tarjetas */
  padding: 0 1rem;
}
.carousel-track {
  transition: transform 0.5s ease-in-out;
}
.testimonial-card {
  /* Queremos ver dos tarjetas a la vez, cada una ocupa el 50% menos márgenes */
  min-width: calc(50% - 1rem);
  margin-right: 1rem;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.user-card {
  min-width: calc(33.333% - 1rem);
  margin-right: 1rem;
  background: #fff;
  border: none;
  border-radius: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
  z-index: 10;
}
.carousel-button.prev {
  left: 10px;
}
.carousel-button.next {
  right: 10px;
}

/* Responsive: Si queda poco ancho, se adapta a una tarjeta por vista */
@media (max-width: 768px) {
  .testimonial-card {
    min-width: 100%;
    margin-right: 0.5rem;
  }
}




.footer p,
.footer a,
.footer li,
.footer small,
.footer form {
  color: #cccccc;
}

.footer h2,
.footer h5,
.footer .fw-bold {
  color: #ffffff;
}

.footer a {
  color: #cccccc;
}
.footer a:hover {
  color: #ffffff;
}

.footer .btn {
  border-radius: 0 !important;
  padding: 10px 30px;
  font-size: 0.875rem;
}

.footer-bottom {
  font-size: 0.8rem;
}
/* Estilos solo para esta sección */
.impulsar-exito-section {
  background-color: #e20001; /* Fondo rojo (ajusta el color a tu preferencia) */
  color: #fff;
  margin-top: 23px;
}

.impulsar-exito-section .boton-consulta {
  border-radius: 0;
  padding: 12px 36px;
  font-size: 1rem;
  border: none;
  text-transform: none; /* Puedes cambiarlo a uppercase si gustas */
  font-weight: 600;     /* Resalta un poco el texto del botón */
}

    /* ======= Estilos exclusivos para la sección "nuestra-historia" ======= */
    .nuestra-historia {
      background-color: #f8f9fa; /* Color claro de fondo, puedes cambiarlo */
    }
    
    .nuestra-historia .img-box {
      /* Agregar margen, border-radius o bordes personalizados */
      position: relative;
      overflow: hidden;
    }
    
    .nuestra-historia .img-box img {
      /* Asegurarte de que las imágenes ocupen todo el espacio */
      display: block;
      width: 100%;
      height: auto;
    }
    .experience-container {
      background-color: #f0f0f0; /* Fondo gris claro */
      border-radius: 8px;        /* Bordes redondeados */
    }
    /* Estilos exclusivos para la sección de Visión, Misión y Valores */
    .seccion-vmv {
      margin-top: 70px;
      margin-bottom: 70px;
    }
    
    /* Estilos de las tarjetas */
    .vmv-box {
      background-color: #fff; 
      border: 1px solid #eee;  /* Borde gris claro */
      border-radius: 8px;      /* Bordes redondeados */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* Sombra ligera */
      font-size: 0.9rem;       /* Letra un poco más pequeña */
      color: #333;             /* Color de texto (ajusta si es necesario) */
    }
    
    /* Ajustar lista de valores */
    .vmv-box ul {
      list-style-type: disc;
      margin-bottom: 0;
      padding-left: 1.5rem;
    }