/* =======================
   RESET DE MÁRGENES Y PADDINGS
   ======================= */
   * {
    margin: 0; /* Elimina márgenes predeterminados */
    padding: 0; /* Elimina relleno predeterminado */
}

/* =======================
   FUENTES Y ESTILOS GENERALES
   ======================= */
body {
    font-family: 'Arial', sans-serif; /* Fuente principal para todo el cuerpo */
    line-height: 1.6; /* Interlineado más amplio para facilitar la lectura */
    color: #333; /* Color de texto oscuro */
}

/* =======================
   ESTILOS GENERALES DEL BODY
   ======================= */
body {
    background-color: #f5f5f5; /* Fondo gris claro */
    color: #333; /* Color de texto oscuro */
    font-size: 16px; /* Tamaño de fuente estándar */
    margin: 0; /* Eliminar márgenes */
    padding: 0; /* Eliminar relleno */
}

/* =======================
   SECCIÓN PRINCIPAL
   ======================= */
main {
    padding: 40px 15px; /* Relleno para la sección principal */
}

/* =======================
   INTRODUCCIÓN
   ======================= */
.intro {
    text-align: center; /* Centrar el texto */
    padding: 20px; /* Espaciado interior */
}

.intro h1 {
    font-size: 2rem; /* Tamaño de fuente grande */
    color: #2d3e50; /* Color oscuro para el título */
    margin-bottom: 10px; /* Espacio debajo del título */
}

video#background-video {
    max-width: 100%; /* Asegura que el video no se desborde */
    text-align: center; /* Centrar el video */
    margin-top: 20px; /* Espacio encima del video */
}

/* =======================
   VISIÓN GENERAL DEL SG-SST
   ======================= */
.sgsst, .objetivo {
    padding: 40px 15px; /* Relleno interior */
    background-color: #fff; /* Fondo blanco */
    margin-bottom: 30px; /* Espacio debajo de cada sección */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.sgsst h2, .objetivo h2 {
    font-size: 2rem; /* Tamaño de título grande */
    color: #2d3e50; /* Color oscuro */
    margin-bottom: 15px; /* Espacio debajo del título */
}

.sgsst p, .objetivo p {
    font-size: 1.1rem; /* Tamaño de texto ligeramente mayor al normal */
    line-height: 1.6; /* Interlineado para mejor legibilidad */
    color: #666; /* Texto gris más claro */
}

/* =======================
   SERVICIOS ADICIONALES
   ======================= */
.servicios-adicionales {
    background-color: #f7f7f7; /* Fondo gris muy suave */
    padding: 50px 30px; /* Relleno para espaciar más */
    border-radius: 12px; /* Bordes redondeados más pronunciados */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Sombra más profunda */
}

.servicios-adicionales h2 {
    font-size: 2.2rem; /* Título grande */
    font-family: 'Helvetica Neue', sans-serif; /* Fuente moderna */
    font-weight: 600; /* Peso de fuente semi-negrita */
    color: #070129; /* Color oscuro */
    margin-bottom: 30px; /* Espacio debajo del título */
    text-align: center; /* Centrar título */
}

/* =======================
   SERVICIO INDIVIDUAL
   ======================= */
.servicio {
    display: flex; /* Usar diseño flexible */
    flex-wrap: wrap; /* Permitir que los elementos se ajusten */
    justify-content: space-between; /* Separar los elementos */
    margin-bottom: 30px; /* Espacio debajo de cada servicio */
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); /* Sombra sutil */
    transition: transform 0.3s ease; /* Efecto de transición suave */
}

.servicio:hover {
    transform: translateY(-5px); /* Desplazar el servicio al pasar el cursor */
}

.servicio-img {
    width: 100%; /* Imagen ocupa todo el ancho */
    height: auto; /* Mantener la relación de aspecto */
    max-width: 240px; /* Limitar el ancho máximo */
    border-radius: 12px; /* Bordes redondeados */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    margin-right: 20px; /* Espacio a la derecha de la imagen */
    max-height: 200px; /* Limitar la altura máxima */
    overflow: hidden; /* Evitar que la imagen se desborde */
}

.servicio-info {
    flex: 1; /* Ocupa el resto del espacio disponible */
    padding: 25px; /* Espacio interior */
}

.servicio h3 {
    font-size: 1.8rem; /* Título del servicio más grande */
    font-family: 'Helvetica Neue', sans-serif;
    color: #2c3e50; /* Color oscuro */
    margin-bottom: 15px; /* Espacio debajo del título */
    font-weight: 500; /* Peso de fuente normal */
}

.servicio p {
    font-size: 1.1rem; /* Tamaño de texto ligeramente mayor */
    color: #7f8c8d; /* Gris claro */
    line-height: 1.6; /* Mejor interlineado */
    margin-bottom: 20px; /* Espacio debajo de cada párrafo */
}

/* =======================
   COTIZACIÓN
   ======================= */
.cotizacion {
    text-align: center; /* Centrar el contenido */
    background-color: #53eef3; /* Fondo azul claro */
    color: rgb(29, 6, 243); /* Texto azul oscuro */
    padding: 30px; /* Relleno */
}

.cotizacion h2 {
    font-size: 2.2rem; /* Título grande */
    margin-bottom: 20px; /* Espacio debajo del título */
}

.cotizacion p {
    font-size: 1.2rem; /* Tamaño de texto de cotización */
    margin-bottom: 30px; /* Espacio debajo del párrafo */
}

.btn-cotizar {
    background-color: #f39c12; /* Fondo amarillo */
    color: white; /* Texto blanco */
    padding: 10px 20px; /* Espaciado interior */
    border: none; /* Sin borde */
    font-size: 1.1rem; /* Tamaño de fuente */
    cursor: pointer; /* Indicar que es clickeable */
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s ease; /* Transición suave en el color */
}

.btn-cotizar:hover {
    background-color: #e67e22; /* Cambio de color al pasar el cursor */
}

/* =======================
   FORMULARIO DE COTIZACIÓN
   ======================= */
.form-container {
    background-color: #fff; /* Fondo blanco */
    padding: 30px; /* Espaciado interior */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    max-width: 600px; /* Máximo ancho */
    margin: 0 auto; /* Centrado en la página */
}

.form-container h3 {
    font-size: 1.8rem; /* Título del formulario */
    margin-bottom: 20px; /* Espacio debajo del título */
}

.form-container input, .form-container select {
    width: 100%; /* Los campos de entrada ocupan todo el ancho */
    padding: 10px; /* Espaciado interior */
    margin: 10px 0; /* Espaciado entre campos */
    border: 1px solid #ccc; /* Borde gris claro */
    border-radius: 5px; /* Bordes redondeados */
}

.form-container button {
    background-color: #044488; /* Fondo azul oscuro */
    color: white; /* Texto blanco */
    padding: 10px 20px; /* Espaciado interior */
    border: none; /* Sin borde */
    font-size: 1.1rem; /* Tamaño de fuente */
    cursor: pointer; /* Indicar que es clickeable */
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s ease; /* Transición suave */
    margin-left: 200px; /* Mover el botón a la derecha */
}

.form-container button:hover {
    background-color: #1c2d39; /* Cambio de color al pasar el cursor */
}

/* =======================
   BOTÓN CERRAR
   ======================= */
.btn-cerrar {
    background-color: #e74c3c; /* Fondo rojo */
    color: white; /* Texto blanco */
    padding: 10px 20px; /* Espaciado interior */
    border: none; /* Sin borde */
    font-size: 1.1rem; /* Tamaño de fuente */
    cursor: pointer; /* Indicar que es clickeable */
    border-radius: 5px; /* Bordes redondeados */
    margin-top: 20px; /* Espacio encima */
}

.btn-cerrar:hover {
    background-color: #c0392b; /* Cambio de color al pasar el cursor */
}

/* =======================
   DISEÑO RESPONSIVO
   ======================= */
@media (max-width: 768px) {
    .servicio {
        flex-direction: column; /* Apilar los elementos en pantallas pequeñas */
        align-items: center; /* Centrar los elementos */
    }

    .servicio-img {
        margin-right: 0; /* Eliminar margen derecho */
        margin-bottom: 20px; /* Añadir espacio debajo */
    }

    /* Ajustes de tamaños de fuente en pantallas pequeñas */
    header h1 {
        font-size: 1.8rem;
    }

    .intro h1 {
        font-size: 1.5rem;
    }

    .sgsst h2, .objetivo h2 {
        font-size: 1.5rem;
    }

    .cotizacion h2 {
        font-size: 1.8rem;
    }

    .form-container {
        padding: 20px; /* Reducir el relleno en pantallas pequeñas */
    }

    .form-container h3 {
        font-size: 1.6rem; /* Reducir el tamaño del título */
    }

    .form-container input, .form-container select {
        font-size: 1rem; /* Reducir el tamaño de los campos */
    }

    .form-container button {
        font-size: 1rem; /* Reducir el tamaño del botón */
    }
}

/* =======================
   OPTIMIZACIÓN PARA MÓVILES
   ======================= */
@media (max-width: 480px) {
    /* Ajuste de tamaño de fuentes para pantallas más pequeñas */
    .intro h1 {
        font-size: 1.3rem;
    }

    .servicio h3 {
        font-size: 1.3rem;
    }

    .servicio p {
        font-size: 1rem;
    }

    .form-container input, .form-container select {
        font-size: 1rem;
    }

    .form-container button {
        font-size: 1rem;
    }
}