/* estilos.css */

  .navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
  }


  .section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("img/hero-image1.png");
}

    .btn{
        color: #4b0e2a;

}

.btn-custom {
    background-color: #800020; /* Color de fondo vino */
    color: white; /* Color del texto */
  }
  
  .btn-custom:hover {
    background-color: #4b0e2a; /* Color vino más oscuro al pasar el mouse */
  }


  /* para encimar los svg*/
  .svg-container.overlay-svgs {
    position: relative;
    width: 256px;  /* Ancho del contenedor basado en tus necesidades */
    height: 276px; /* Altura del contenedor basado en tus necesidades */
  }
  
  .overlay-svg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.9;  /* Si quieres ver la superposición */
  }
  

  .overlay-svg:nth-child(2) {
    top: 0px;  /* Ajusta según la superposición deseada */
    left: 0px;  /* Ajusta según la superposición deseada */
  }
  .overlay-svg:nth-child(1) {
    top: 65px;  /* Ajusta según la superposición deseada */
    left: 85px;  /* Ajusta según la superposición deseada */
  }
  .svg-container {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    height: 100%; /* Ocupa el 100% de la altura del contenedor */
  }


 /*GENERAL PARA LOS 3 */
  .svg-wrapper {
    text-align: center; /* Centra el contenido horizontalmente */
    margin: 16px auto; /* Opcional, asegura que el SVG esté en el centro */
    display: flex;
    flex-direction: column; /* Alinea los elementos en columna */
    align-items: center; /* Centra los elementos horizontalmente en el contenedor */
  }

  .svg-wrapper svg {
    margin-bottom: 20px; /* Espacio entre el SVG y el título */
  }

  .svg-wrapper h1 {
    margin-top: 0; /* Elimina el margen superior del título para mantenerlo cerca del SVG */
  }
  /*////////////////////////////////////*/

  footer .fa-whatsapp {
  color: #25D366; /* Color oficial de WhatsApp */
  font-size: 2em; /* Ajusta el tamaño del icono */
}
  
  footer .fas{
    font-size: 1.5em; 
  }

  .footer-col {
    text-align: center; /* Centra el texto y los elementos en línea */
  }
  .footer-col img,
.footer-col ul,
.footer-col p,
.footer-col h5 {
  display: block; /* Hace que los elementos sean bloques para centrarlos más fácilmente */
  margin-left: auto;
  margin-right: auto;
}

.footer-credits {
  text-align: center; /* Asegura que los créditos también estén centrados */
}

.whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: white;
  border-radius: 50px; /* Hacer el borde un poco menos redondo para acomodar el texto */
  text-align: center;
  line-height: 50px; /* Ajusta esto según el tamaño del icono y texto */
  font-size: 16px; /* Tamaño de la fuente del texto */
  padding: 10px 20px; /* Añade un poco de padding alrededor del texto e icono */
  box-shadow: 2px 2px 3px #999;
  z-index: 1000;
  display: flex; /* Usa flexbox para centrar el icono y el texto */
  align-items: center; /* Centra verticalmente el contenido dentro del botón */
  justify-content: center; /* Centra horizontalmente el contenido dentro del botón */
}
.whatsapp-button i {
  font-size: 30px;  /* Ajusta el tamaño a tu preferencia */
  margin-right: 10px; /* Mantiene un margen entre el icono y el texto */
}


.whatsapp-button i {
  margin-right: 10px; /* Espacio entre el icono y el texto */
}


/*cosas para talleres*/

.image-fullwidth {
  position: relative;
  text-align: center;
  color: white;
}

.image-fullwidth img {
  width: 68%; /* Asegura que la imagen cubra el ancho completo */
  height: auto; /* Mantiene la proporción de la imagen */
  margin: 32px;
}

@media(max-width: 768px) {
  .image-fullwidth img{
    margin-left: 14px;
    margin-right: 14px;
    width: 95%; 
  }

}



.image-fullwidth div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; /* Centra el texto horizontalmente */
}

.image-fullwidth h1 {
  margin-bottom: 0.5em; /* Espacio entre el título y la descripción */
}

/* para que no haga cosas raras el email*/ 
li {
  display: flex;
  align-items: center;
  word-wrap: break-word;
  word-break: break-all;
  padding: 5px;
}

@media (max-width: 600px) {
  li {
    font-size: 14px;
  }
}

.ofertaText{
  padding: 4%;
  padding-left: 16%;
  padding-right: 16%;
}


/*oferta*/
.card-text {
  position: relative;
  padding-left: 12px; /* Espacio para el punto medio */
  white-space: pre-line; /* Mantiene los saltos de línea y secuencia los espacios */

}

.card-text br:before {
  content: "·"; /* Punto medio */
  position: absolute;
  left: 0;
}

/*gente calmecac*/
.gallery-image {
  margin: 15px; /* Añade un margen de 15px alrededor de cada imagen */
  width: 100%; /* Asegura que la imagen sea fluida y ocupe todo el ancho del contenedor */
  height: 400px; /* Establece una altura fija para todas las imágenes */
  object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
}

.title-box {
  background-color: #004085; /* Azul oscuro */
  color: white; /* Texto en color blanco para contraste */
  padding: 20px; /* Espacio alrededor del texto */
  border-radius: 5px; /* Bordes redondeados para un aspecto más suave */
}