* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

html, body {
    color: #333333;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}
.contenido {
    display: none;
}
#contenido1 {
    display: block; /* Mostrar el primer contenido por defecto */
}
h1, h2, p, a {
    margin: 0;
    padding: 10px;
    text-align: justify;
}
h2 {
    font-size: 2.5rem; /* Utiliza rem para tamaños responsivos */
}
.encabezado {
    font-size: 3.5rem;
    font-weight: bold;
}
.parrafo1 {
    font-size: 1.375rem;
    font-weight: lighter;
    font-style: italic;
}
.parrafo2 {
    font-size: 1rem;
    font-weight: lighter;
    font-style: italic;
}

/* navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 10px 20px;
    color: #f5f5f5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Efecto sombra */
}
.nav-button {
    background: none; /* Sin fondo */
    color: #f5f5f5; /* Color del texto */
    border: none; /* Sin borde */
    padding: 10px 15px; /* Espaciado interno */
    cursor: pointer; /* Cambia el cursor al pasar el ratón */
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s; /* Efecto de transición */
}
.nav-button:hover {
    background-color: rgba(87, 87, 87, 0.7); /* Color gris con opacidad */
    border-radius: 4px; /* Bordes redondeados */
    transform: translateY(-2px); /* Levanta el botón */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Sombra para efecto 3D */
}
.verde:hover {
    background-color: rgba(0, 255, 34, 0.37);
}

/* section loby */
.loby {
    width: 100%;
    height: 100vh; /* Altura de la ventana del navegador */
    background-image: url('animacion/loby.gif'); /* Imagen de fondo */
    background-size: cover; /* Ajusta la imagen para cubrir todo el área */
    background-position: center; /* Centra la imagen de fondo */
    background-repeat: no-repeat; /* No repite la imagen */
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: flex-start; /* Alinea el contenido a la izquierda */
}
.bienvenida {
    max-width: 50%; /* Ancho máximo del contenido */
    width: 100%;
    padding: 20px;
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    box-sizing: border-box; /* Incluye el padding en el ancho total */
}

/* section servicios */
.serv {
    padding: 40px;
    text-align: center; /* Centra el texto en la sección */
}
.serv h2 {
    color: #333333; /* Color del encabezado */
    font-size: 64px;
    margin-bottom: 20px; /* Espacio debajo del encabezado */
}
.services-container {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se ajusten en varias filas si es necesario */
    justify-content: center; /* Centra los elementos horizontalmente */
    gap: 20px; /* Espacio entre los elementos */
}
.service {
    background-color: #f9f9f9; /* Color de fondo para cada servicio */
    border: 1px solid #ddd; /* Borde alrededor de cada servicio */
    border-radius: 8px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interno */
    width: calc(33.333% - 40px); /* Ancho de cada tarjeta con espacio entre ellas */
    height: 200px; /* Ajusta la altura según sea necesario */
    box-sizing: border-box; /* Incluye el padding y borde en el ancho total */
    text-align: left; /* Alinea el texto a la izquierda */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    transition: background-image 0.3s ease, transform 0.3s ease, color 0.3s ease; /* Transiciones */
    overflow: hidden; /* Evita el desbordamiento */
}
.service:hover {
    background-size: cover; /* Asegura que la imagen se ajuste al contenedor */
    background-position: center;
    background-repeat: no-repeat;
    color: white; /* Cambia el color del texto si es necesario */
    transform: scale(1.05); /* Efecto de escalado al pasar el mouse */
}
.service:nth-of-type(1):hover {
    background-image: url('animacion/est.gif');
}
.service:nth-of-type(2):hover {
    background-image: url('animacion/electromecanica.gif');
}
.service:nth-of-type(3):hover {
    background-image: url('animacion/aire.gif');
}
.service:nth-of-type(4):hover {
    background-image: url('animacion/venta.gif');
}
.service:nth-of-type(5):hover {
    background-image: url('animacion/en_ve.gif');
}
.service::before {
    content: '';
    position: absolute;
    top: -9999px; /* Ubica fuera de la pantalla */
    left: -9999px;
    width: 0;
    height: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.service:nth-of-type(1)::before {
    background-image: url('animacion/est.gif');
}

.service:nth-of-type(2)::before {
    background-image: url('animacion/electromecanica.gif');
}

.service:nth-of-type(3)::before {
    background-image: url('animacion/aire.gif');
}

.service:nth-of-type(4)::before {
    background-image: url('animacion/venta.gif');
}

.service:nth-of-type(5)::before {
    background-image: url('animacion/en_ve.gif');
}
.service h3 {
    margin-top: 0; /* Elimina el margen superior del título del servicio */
    color: #333; /* Color del título del servicio */
}
.service p {
    margin: 10px 0; /* Espacio superior e inferior en la descripción */
    color: #666; /* Color del texto de la descripción */
}
@media (max-width: 768px) {
    .service {
        width: calc(50% - 20px); /* Ajusta el ancho en pantallas más pequeñas */
    }
}
@media (max-width: 480px) {
    .service {
        width: 100%; /* Ancho completo en pantallas muy pequeñas */
    }
}

/* areas */
/* Contenedor principal */
.container {
    max-width: 1200px;
    margin: 80px auto; /* Espacio superior para evitar la navbar fija */
    padding: 20px;
}
/* Estilo del contenido de texto */
.text-content {
    text-align: justify;
    margin: 20px 0;
}
.text-content h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}
.text-content p {
    font-size: 1.2em;
    line-height: 1.6;
    margin: 20px 0;
}
/* Imágenes en línea */
.inline-image {
    width: 80%; /* Ajusta el tamaño según necesites */
    max-width: 400px; /* Limita el ancho máximo */
    margin: 20px auto; /* Centra la imagen en el contenedor */
    display: block;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Para incrustar imágenes sin deformar el texto */
.float-image-left {
    float: left;
    margin: 10px 20px 10px 0; /* Espacio a la derecha para que el texto no se pegue a la imagen */
    max-width: 40%; /* Ajusta según lo que necesites */
}
.float-image-right {
    float: right;
    margin: 10px 0 10px 20px; /* Espacio a la izquierda para que el texto no se pegue a la imagen */
    max-width: 40%;
}
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* section de proyectos */
.intro {
    text-align: center;
    margin-bottom: 30px;
    position: relative; /* Para centrar el contenido a mitad de ancho */
}
.intro h2,
.intro p {
    display: inline-block; /* Asegura que el contenido se centre en base a su ancho */
    max-width: 80%; /* Ajusta el ancho máximo si es necesario */
    margin: 0 auto; /* Centra el contenido */
    text-align: center; /* Centra el texto dentro del contenedor */
}
.parrafo2 {
    font-size: 1.2em;
    margin-top: 10px;
    line-height: 1.4; /* Mejora la legibilidad */
}
.proyectos {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}
.zoom-image {
    display: block; /* Elimina el espacio debajo de la imagen */
    transition: transform 0.5s ease; /* Transición suave para el efecto de zoom */
    width: 100%; /* Ajusta el tamaño de la imagen según el contenedor */
}
.proyecto:hover .zoom-image {
    transform: scale(1.2); /* Escala la imagen al 120% de su tamaño original */
}
.columna {
    flex: 1;
    margin: 0 10px;
}
.proyecto {
    border-bottom: 1px solid black;
    overflow: hidden;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}
.proyecto img {
    width: 100%;
    height: auto;
}
.proyecto h3 {
    margin: 10px;
    font-size: 1.5em;
}
.proyectos .columna {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* section de contactos */
.contact-section {
    display: flex;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    padding: 20px;
    align-items: center;
}
.logo {
    flex: 1;
}
.logo img {
    max-width: 200px; /* Ajusta según el tamaño de tu logo */
}
.zones {
    flex: 2;
    display: flex;
    justify-content: space-around;
}
.zone {
    text-align: center;
}
.zone img {
    max-width: 80px; /* Ajusta según el tamaño de las imágenes de zona */
}
.contact-info {
    flex: 1;
    text-align: right;
}
.contact-info h2 {
    margin: 0;
}
.contact-info p {
    margin: 5px 0 0 0;
}
.contact-info p a {
    color: #333;
}

/* Media Queries para dispositivos más pequeños */
@media (max-width: 768px) {
    h2 {
        font-size: 2rem; /* Ajustar tamaño de h2 en pantallas pequeñas */
    }
    .encabezado {
        font-size: 3rem; /* Ajustar encabezado en pantallas pequeñas */
    }
    .parrafo1 {
        font-size: 1.125rem; /* Ajustar parrafo1 en pantallas pequeñas */
    }
    .parrafo2 {
        font-size: 0.875rem; /* Ajustar parrafo2 en pantallas pequeñas */
    }
    /* navbar */
    .navbar {
        flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
        align-items: flex-start; /* Alinear a la izquierda */
    }
    .navbar a {
        padding: 8px 15px; /* Espaciado reducido en enlaces */
        font-size: 0.9rem; /* Tamaño de fuente reducido */
    }
    /* loby */
    .bienvenida {
        max-width: 80%; /* Ajustar el ancho en pantallas medianas */
        padding: 15px; /* Reducir el padding */
    }
    /* servicios */
    .intro h2,
    .intro p {
        max-width: 90%; /* Aumenta el ancho máximo en pantallas medianas */
    }
    .proyectos {
        flex-direction: column; /* Apila las columnas en pantallas pequeñas */
    }
    .columna {
        margin: 0 0 20px 0; /* Reduce el margen entre columnas */
    }
    /* proyectos */
    .contact-section {
        flex-direction: column; /* Apila los elementos en pantallas pequeñas */
        align-items: center; /* Centra todo el contenido */
    }
    .contact-info {
        text-align: center; /* Centra la información de contacto */
        margin-top: 20px; /* Espaciado superior */
    }
    .zones {
        justify-content: center; /* Centra las zonas en pantallas pequeñas */
    }
    /* contactos */
    .float-image-left,
    .float-image-right {
        float: none;
        display: block;
        margin: 10px auto;
        max-width: 80%; /* Ajusta para pantallas más pequeñas */
    }
}

@media (max-width: 480px) {
    h2 {
        font-size: 1.5rem; /* Ajustar aún más para pantallas muy pequeñas */
    }
    .encabezado {
        font-size: 2.5rem;
    }
    .parrafo1 {
        font-size: 1rem;
    }
    .parrafo2 {
        font-size: 0.75rem;
    }
    /* navbar */
    .navbar a {
        padding: 6px 10px; /* Espaciado aún más reducido */
        font-size: 0.8rem; /* Tamaño de fuente aún más pequeño */
    }
    /* loby */
    .bienvenida {
        max-width: 95%; /* Ajustar aún más el ancho en pantallas pequeñas */
        padding: 10px; /* Reducir el padding aún más */
    }
    /* servicios */
    .parrafo2 {
        font-size: 1em; /* Ajusta el tamaño de la fuente en pantallas pequeñas */
    }
    .proyecto h3 {
        font-size: 1.2em; /* Ajusta el tamaño del título en pantallas pequeñas */
    }
    /* proyectos */
    .zone img {
        max-width: 60%; /* Ajusta el tamaño de las imágenes de zona en pantallas pequeñas */
    }
    /* contactos */
}