:root{
	--main-color-verde:#00B0AA;
	--main-color-azul:#006DB9;
    --blanco:#ffff;
    --negro:black;
}
#textoJustificado{
    text-align: justify;
}
@media (max-width: 768px) {
    #txtBanner {
        font-size: 1.2rem; }
}

.bold{
    font-weight: 400;
}
.tituloh2{
    text-align: center;
    padding: 30px;
    font-family: "Zilla Slab", "Times New Roman", Times, serif;
}
.txtAlinear{
    align-items: center;
    text-align: justify;
    font-size: 20px;
}
.resaltado{
    color: var(--main-color-azul);
    font-weight: 500;   
}
#colorCel{
    color: var(--blanco);
}

#textoOscuro{
    color: black;
    font-size: large;
    font-weight: 400; 
    display: inline-block; /* Para que el fondo se ajuste al tamaño del texto */
}
/* estilosValores */
.valores-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  
  .valor {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .valor:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }
  
  .valor img {
    max-width: 60px;
    margin-bottom: 10px;
  }
  .valor h3 {
    font-size: 32px;
    margin-bottom: 10px;
  }
  .valor p {
    font-size: 20px;
    color: #555;
    text-align: justify;
  }
  .valor:hover {
    background-color:var(--blanco);
    color: white;
    transform: scale(1.07);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
  }
  @media (max-width: 768px) {
    .valores-container {
      grid-template-columns: 1fr 1fr; /* Dos columnas en pantallas medianas */
    }
  }
  
  @media (max-width: 480px) {
    .valores-container {
      grid-template-columns: 1fr; /* Una columna en móviles */
    }
  }

.image{
    width: auto;           /* Ancho del contenedor */
    height: auto;         /* Alto del contenedor */
    background-size: cover;  /* La imagen cubre todo el cuadro */
    background-position: center;  /* Centra la imagen dentro del cuadro */
    background-repeat: no-repeat;  /* No repetir la imagen */
}

 /* Estilo del banner */
.banner1 {
    position: relative;
    width: 100%;
    height: 80vh; /* Ocupa toda la altura de la pantalla */
    background-image: url('../images/images-a&b/banner.jpg'); /* Ruta de la imagen de fondo */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: flex-end; /* Alinea el contenido a la derecha */
    padding: 0 20px;
    color: #fff;
    overflow: hidden; /* Evita que el contenido sobrepase el contenedor */
}

/* Contenedor de contenido con sombra */
.banner1-content {
    max-width: 650px;
    padding: 40px;
    background: rgba(244, 241, 241, 0.6); /* Fondo oscuro con transparencia */
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Sombra suave */
    text-align: justify; /* Justifica el texto */
    backdrop-filter: blur(10px); /* Da un efecto de desenfoque al fondo */
}

/* Título del banner */
.banner1 h1 {
    font-size: 34.6px;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 1px; /* Espaciado entre letras */
    line-height: 1.3;
    font-family: "Zilla Slab", "Times New Roman", Times, serif;
}

/* Párrafo del banner */
.banner1 p {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #000000; /* Color de texto más suave */
    font-family: "Zilla Slab", "Times New Roman", Times, serif;
}

/* Botón de llamada a la acción */
.cta-btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--main-color-azul); /* Un color vibrante para el botón */
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 30px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Efecto hover del botón */
.cta-btn:hover {
    background-color: var(--main-color-verde); /* Cambio de color en hover */
    transform: translateY(-5px); /* Efecto de elevación al pasar el ratón */
}

/* Para pantallas medianas (tabletas y pantallas más pequeñas) */
@media (max-width: 768px) {
    .banner1 {
        justify-content: center; /* Centramos el contenido en pantallas pequeñas */
        padding: 0 10px; /* Reducimos el padding */
    }

    .banner1-content {
        max-width: 90%; /* Aumentamos el ancho del contenido */
        padding: 20px; /* Reducimos el padding */
    }

    .banner1 h1 {
        font-size: 1.6rem; /* Reducimos el tamaño del título */
    }

    .banner1 p {
        font-size: 0.9rem; /* Reducimos el tamaño del párrafo */
    }

    .cta-btn {
        font-size: 0.9rem; /* Reducimos el tamaño del botón */
        padding: 10px 20px; /* Reducimos el padding del botón */
    }
}

/* Para pantallas pequeñas (móviles) */
@media (max-width: 480px) {
    .banner1 {
        height: 60vh; /* Reducimos la altura del banner */
    }

    .banner1-content {
        max-width: 100%; /* El contenido ocupa todo el ancho */
        padding: 15px; /* Reducimos el padding */
    }

    .banner1 h1 {
        font-size: 1.4rem; /* Reducimos el tamaño del título */
        margin-bottom: 15px; /* Ajustamos el margen */
    }

    .banner1 p {
        font-size: 0.97rem; /* Reducimos el tamaño del párrafo */
        margin-bottom: 15px; /* Ajustamos el margen */
    }

    .cta-btn {
        font-size: 0.8rem; /* Reducimos el tamaño del botón */
        padding: 8px 15px; /* Reducimos el padding del botón */
    }
}
/* Reset de márgenes y paddings */

/* Contenedor principal */


/* Estilo de los servicios */
.services {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.service {
    padding: 20px;
    background-color: var(--main-color-azul);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.service:hover {
    transform: translateY(-7px);
    background-color: var(--main-color-verde);
}
.service.active {
    background-color: var(--main-color-verde); /* Un color más oscuro cuando se selecciona */
}

.service h3 {
    font-size: 23px;
    font-weight: 500;
    color: var(--blanco);
    text-align: center;
    font-family: "Zilla Slab", "Times New Roman", Times, serif;
}

/* Contenedor de información */
.info {
    background-color: whitesmoke;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: none;
    margin-top: 20px;
}

#info-text {
    font-size: 21px;
    line-height: 1.6;
    color: black;
    text-align: left;
    font-weight: 300;
    text-align: justify;
    font-family: "Zilla Slab", "Times New Roman", Times, serif;
}

/* Animación para la transición de la información */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.info.show {
    display: block;
    animation: fadeIn 0.5s ease;
}
/* Estilos Responsivos */

/* Para pantallas medianas (tabletas en modo horizontal y pantallas pequeñas) */
@media (max-width: 1024px) {
    .services {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en lugar de 5 */
    }

    .service h3 {
        font-size: 20px; /* Ajustamos el tamaño de fuente */
    }
}

/* Para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .services {
        grid-template-columns: 1fr 1fr; /* 2 columnas en lugar de 5 */
    }

    h2 {
        font-size: 28px; /* Reducimos el tamaño del título */
        margin-bottom: 20px;
    }

    .service {
        padding: 15px; /* Reducimos el padding */
    }

    .info {
        padding: 15px; /* Reducimos el padding en la sección de información */
    }

    #info-text {
        font-size: 19px; /* Reducimos el tamaño del texto */
    }
}

/* Para pantallas muy pequeñas (móviles en modo retrato) */
@media (max-width: 480px) {
    .services {
        grid-template-columns: 1fr; /* 1 columna en lugar de 2 */
    }

    .service h3 {
        font-size: 19px; /* Aún más pequeño en pantallas muy pequeñas */
    }

    #info-text {
        font-size: 17px; /* Reducimos aún más el tamaño del texto */
    }
}
.service-title {
    display: block; /* Hace que el texto se comporte como un bloque */
    text-align: center; /* Centra el texto horizontalmente */
    font-weight: bold; /* Pone el texto en negrita */
    margin-bottom: 5px; /* Espacio debajo del título */
    margin-top: 5px;
}


/* Estilo para las columnas de los servicios */
.service-columns {
    display: flex; /* Utiliza flexbox para las columnas */
    justify-content: space-between; /* Distribuye las columnas con espacio entre ellas */
    gap: 20px; /* Espacio entre las columnas */
}

.service-columns div {
    width: 48%; /* Ajusta el ancho de cada columna a 48% */
}

.service-columns ul {
    list-style-type: none; /* Elimina los puntos de la lista */
    padding-left: 0; /* Elimina los márgenes de la lista */
}

.service-columns li {
    margin-bottom: 3px; /* Espacio entre los elementos de la lista */
}

/* Media Query para pantallas pequeñas (menos de 768px) */
@media (max-width: 768px) {
    .service-columns {
        flex-direction: column; /* Cambia la dirección de las columnas a vertical */
        gap: 15px; /* Ajusta el espacio entre las "columnas" apiladas */
    }

    .service-columns div {
        width: 100%; /* Hace que cada columna ocupe el 100% del ancho en pantallas pequeñas */
    }
}

/* Media Query para pantallas aún más pequeñas (menos de 480px) */
@media (max-width: 480px) {
    .service-title {
        font-size: 16px; /* Ajusta el tamaño del título en pantallas pequeñas */
        margin-bottom: 10px; /* Reduce el margen debajo del título */
    }

    .service-columns div {
        width: 100%; /* Asegura que las columnas sigan apiladas en pantallas aún más pequeñas */
    }

    .service-columns ul {
        font-size: 14px; /* Ajusta el tamaño de la fuente de las listas */
    }

    .service-columns li {
        margin-bottom: 5px; /* Reduce el espacio entre los elementos de la lista en pantallas pequeñas */
    }
}

/* Estilos para el <hr> */
hr.separator {
    border: 0;              /* Elimina el borde predeterminado */
    border-top: 2px solid #333; /* Línea de 2px, color gris oscuro */
    margin: 20px 0;         /* Espacio arriba y abajo de la línea */
    width: 80%;             /* Ancho de la línea (puedes ajustar este valor) */
    margin-left: auto;      /* Centra la línea horizontalmente */
    margin-right: auto;
}

/* Estilo de la imagen de fondo */
.hero {
    position: relative;
    width: 100%;
    height: 80vh; /* Ocupa toda la altura de la ventana */
    background-image: url('../images/images-a&b/productos1.jpg'); /* Cambia esta ruta por la imagen que quieras */
    background-size: cover; /* La imagen cubre toda el área */
    background-position: center; /* Centra la imagen */
    background-attachment: fixed; /* Fija la imagen en su lugar para el efecto parallax */
    transition: background-position 0.1s ease-out; /* Suaviza el movimiento de la imagen */
}

/* Capa de superposición para mejorar la legibilidad */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Filtro oscuro */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contenedor de texto centrado sobre la imagen */
.text-container {
    text-align: center;
    max-width: 1000px; /* Limitar el ancho del contenedor */
    padding: 20px;
    justify-content: flex-end;
    font-family: "Zilla Slab", "Times New Roman", Times, serif;
}

/* Estilo para el título */
.text-container h1 {
    font-size: 42px;
    margin-bottom: 15px;
    text-transform: uppercase; /* Todo en mayúsculas */
    font-weight: bold;
    letter-spacing: 2px; /* Espaciado entre letras */
    color: var(--blanco);
}

/* Estilo para el párrafo */
.text-container p {
    font-size: 22px;
    line-height: 1.6;
    margin-bottom: 25px;
    font-weight: 300;
    
    color: white;
    text-align: justify;
}
/* Estilo responsivo para pantallas más pequeñas */
@media (max-width: 768px) {
    /* Ajustes para el texto y el contenedor en pantallas pequeñas */
    .text-container h1 {
        font-size: 2.5rem;
    }

    .text-container p {
        font-size: 1rem;
    }

    /* Desactivar el efecto parallax en dispositivos móviles */
    .hero {
        background-attachment: scroll; /* Desactiva el parallax */
    }

    /* Ajustar el tamaño de la imagen para que se vea bien en pantallas más pequeñas */
    .hero {
        background-size: cover;
        background-position: center;
    }
}
#whatsapp-button {
    position: fixed; /* Fija el botón en una posición específica de la pantalla */
    bottom: 40px; /* Espacio desde el borde inferior */
    right: 40px; /* Espacio desde el borde derecho */
    z-index: 9999; /* Asegura que el botón esté por encima de otros elementos */
    background-color: #25d366; /* Color de fondo (verde de WhatsApp) */
    border-radius: 50%; /* Hace el botón redondeado */
    padding: 10px; /* Espaciado interno */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para dar un efecto de profundidad */
    transition: transform 0.3s ease; /* Transición suave para un efecto al hacer hover */
}

#whatsapp-button img {
    width: 38px; /* Tamaño de la imagen (logo de WhatsApp) */
    height: 38px;
}

#whatsapp-button:hover {
    transform: scale(1.1); /* Efecto de agrandado cuando se pasa el ratón por encima */
}

@media (max-width: 600px) {
    #whatsapp-button {
        bottom: 20px; /* Reduce el espacio en pantallas pequeñas */
        right: 20px;
        padding: 10px; /* Reduce el tamaño del botón */
    }
}
.footer{
    color: #ededf2;
}