./* Estilos generales */
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* Estilos para la barra de navegación */
#navbar {
background-color: #000;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
#navbar .logo img {
height: 80px; /* Ajusta esto según el tamaño de tu logo */
}
#navbar ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
#navbar ul li {
padding: 0 15px;
}
#navbar ul li a {
text-decoration: none;
color: white;
transition: color 0.3s ease;
}
#navbar ul li a:hover {
color: #ddd;
}
.welcome-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* Relación de aspecto 16:9 (ajústala según tu necesidad) */
overflow: hidden;
}
.welcome-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.welcome-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Estilos para la sección de Servicios */
.services-section {
padding: 20px 0; /* Ajusta el relleno vertical como desees */
text-align: center;
}
.services-title {
background-color: #000; /* Fondo negro aplicado directamente al título */
color: #fff;
font-size: 3em;
margin: 0; /* Elimina el margen por defecto */
margin-bottom: 30px; /* Agrega un margen inferior para separar del siguiente contenedor */
padding: 10px 0; /* Ajusta el relleno vertical como desees */
width: 100%; /* Asegura que el fondo se extienda a lo largo de la página */
display: block; /* Ocupa toda la línea */
}
.services-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.service-item {
display: flex;
background-color: #fff;
color: #000;
margin-bottom: 20px;
align-items: stretch; /* Asegura que los elementos hijos llenen el contenedor en altura */
}
.service-photo img {
max-width: 100%;
height: auto;
display: block;
border-radius: 20px; /* Ajusta este valor para cambiar el redondeo de las esquinas */
cursor: pointer; /* Cambia el cursor para indicar que la imagen es clicable */
}
/* Estilos para enlaces de fotos de servicio para pantallas más pequeñas */
@media (max-width: 768px) {
.service-photo-link {
display: block;
margin-bottom: 15px; /* Espacio debajo de la imagen */
}
.service-photo img {
width: auto; /* Ajusta el ancho automáticamente */
max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
height: auto; /* Ajusta la altura automáticamente */
}
}
.service-text {
padding: 20px;
text-align: left; /* Alinea el texto a la izquierda */
}
/* Estilos responsivos para pantallas más pequeñas */
@media (max-width: 768px) {
.service-item {
flex-direction: column;
}
.service-photo, .service-text {
width: 100%;
flex-basis: auto; /* Restablece el comportamiento de tamaño automático para dispositivos móviles */
}
}
/* Estilos para la sección de Contacto */
.contacto-section {
padding: 20px 0; /* Ajusta el relleno vertical como desees */
text-align: center;
}
.contacto-title {
color: #fff;
background-color: #000;
font-size: 3em;
padding: 10px 0;
margin: 0 auto; /* Centra el título */
width: 100%; /* Asegura que el fondo se extienda a lo largo de la página */
display: block; /* Ocupa toda la línea */
}
.contacto-content-container {
display: flex;
justify-content: space-around; /* Distribuye el espacio alrededor de las columnas */
align-items: flex-start;
flex-wrap: wrap; /* Permite que las columnas se apilen en pantallas pequeñas */
gap: 20px;
max-width: 1200px; /* Opcional: limita el ancho máximo del contenedor */
margin: 0 auto; /* Centra el contenedor */
}
.contacto-form-container {
flex: 1;
max-width: 600px; /* Ajusta el ancho máximo del formulario */
}
.contacto-info-container {
flex: 1;
max-width: 600px; /* Ajusta el ancho máximo del contenedor de información */
padding: 15px;
}
/* Estilos para el iframe del formulario para que sea completamente visible */
.contacto-form-container iframe {
width: 100%; /* Ancho del 100% para que ocupe todo el contenedor */
min-height: 600px; /* Altura mínima para que el formulario sea completamente visible */
border: none; /* Elimina el borde del iframe */
}
/* Estilos para agrupar elementos en filas en pantallas más grandes */
.form-row {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.form-row > label,
.form-row > input,
.form-row > select {
flex: 1;
margin-right: 10px;
}
.form-row > label:last-child,
.form-row > input:last-child,
.form-row > select:last-child {
margin-right: 0;
}
input[type="text"] {
width: 30%; /* Ancho fijo */
}
input[type="number"] {
width: 20%; /* Ancho relativo al contenedor */
}
input, select, textarea {
border: 1px solid #0c0000;
padding: 8px;
border-radius: 4px;
transition: border-color 0.3s;
}
.cotizador-container form #cantidad {
width: 10%; /* Establece el ancho del campo 'cantidad' a 40% */
}
input:focus, select:focus, textarea:focus {
border-color: #0056b3; /* Cambio de color en foco para mejorar la visibilidad */
}
/* Estilos responsivos para pantallas más pequeñas */
@media (max-width: 768px) {
.contacto-content-container {
flex-direction: column;
max-width: 100%;
}
.contacto-form-container,
.contacto-info-container {
max-width: 100%; /* Ocupa el ancho completo en pantallas pequeñas */
flex-basis: auto; /* Restablece el comportamiento de tamaño automático */
}
}
/* Estilos para la sección de Ubicación */
.ubicacion-section {
text-align: center;
padding: 20px 0;
}
.ubicacion-title {
color: #fff;
background-color: #000;
font-size: 3em;
padding: 10px 0;
margin: 0;
width: 100%;
}
.map-container {
margin-top: 20px;
}
.map-container iframe {
width: 100%;
height: 400px; /* Puedes ajustar esto según tus necesidades */
border: none;
}
/* Estilos responsivos para el mapa en pantallas más pequeñas */
@media (max-width: 768px) {
.map-container iframe {
height: 300px; /* Altura más pequeña para pantallas más pequeñas */
}
}
/* Estilos para el pie de página */
.footer {
background-color: #000;
color: #fff;
padding: 20px; /* Ajusta el relleno según tus necesidades */
text-align: center; /* Centra el contenido del pie de página */
}
.footer-content p {
margin: 0; /* Elimina cualquier margen por defecto */
}
/* Estilos para el botón de WhatsApp */
#whatsapp-button {
position: fixed;
bottom: 180px;
right: 100px;
z-index: 9999;
}
#whatsapp-button a {
display: block;
width: 60px;
height: 60px;
border-radius: 50%;
text-align: center;
line-height: 60px;
color: #fff;
font-size: 24px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
/* Estilos adicionales para el botón de menú hamburguesa */
.navbar-toggler {
display: none; /* Asegúrate de que el botón esté oculto en pantallas grandes */
background-color: transparent;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
}
.navbar-toggler-icon {
display: inline-block;
}
/* Estilos responsivos para pantallas más pequeñas */
@media (max-width: 768px) {
.navbar-toggler {
display: block; /* Muestra el botón de hamburguesa en pantallas pequeñas */
}
/* Oculta el menú horizontal en pantallas pequeñas */
#navbar ul.nav-links {
display: none; /* Oculta los enlaces de navegación */
flex-direction: column; /* Cambia la dirección a vertical */
width: 100%; /* Ocupa el ancho completo */
}
/* Muestra el menú vertical cuando la clase 'responsive' está activa */
#navbar ul.nav-links.responsive {
display: flex; /* Muestra los enlaces de navegación */
}
/* Ajusta el estilo de los enlaces para que se vean como un menú vertical */
#navbar ul.nav-links.responsive li {
text-align: center; /* Centra el texto de los enlaces */
padding: 10px 0; /* Agrega relleno superior e inferior */
}
}
.cotizador-section {
padding: 20px 0; /* Ajusta el relleno vertical como desees */
text-align: center;
}
.cotizador-title {
background-color: #000; /* Fondo negro aplicado directamente al título */
color: #fff;
font-size: 3em;
margin: 0; /* Elimina el margen por defecto */
margin-bottom: 30px; /* Agrega un margen inferior para separar del siguiente contenedor */
padding: 10px 0; /* Ajusta el relleno vertical como desees */
width: 100%; /* Asegura que el fondo se extienda a lo largo de la página */
display: block; /* Ocupa toda la línea */
}
.cotizador-container form {
text-align: left;
width: 100%;
max-width: 800px; /* Ajusta este valor según tus necesidades */
margin: 0 auto;
padding: 20px;
}
/* Reducción de padding y ajuste de tamaños de fuente para dispositivos pequeños */
@media (max-width: 768px) {
.cotizador-container form {
padding: 10px;
}
.cotizador-container form label,
.cotizador-container form input,
.cotizador-container form select,
.cotizador-container form textarea {
font-size: 14px; /* Tamaño de fuente más grande para mejorar la legibilidad */
}
}
@media (max-width: 480px) {
.cotizador-container form {
padding: 5px;
}
.cotizador-container form label,
.cotizador-container form input,
.cotizador-container form select,
.cotizador-container form textarea {
font-size: 12px; /* Ajuste de tamaño de fuente para pantallas muy pequeñas */
}
}