/* Estilo general del cuerpo */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: radial-gradient(circle, #00796b, #003d37); /* Degradado radial de claro a oscuro */
    color: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Contenedor principal */
.container {
    flex: 1;
    max-width: 800px; /* Ancho máximo del contenedor */
    margin: 0 auto; /* Centrar horizontalmente */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Estilos del encabezado y logo */
header {
    padding-top: 10px; /* Añade espacio desde la parte superior */
    text-align: center;
}

.logo {
    width: 100%; /* El logo se ajustará al contenedor */
    max-width: 550px; /* Tamaño máximo del logo */
    height: auto;
    margin-top: 20px; /* Ajusta el margen superior para bajar el logo */
    margin-bottom: 20px;
}

/* Estilos del texto principal */
main h2 {
    font-size: 36px; /* Tamaño ajustado */
    margin: 20px 0;
}

main p {
    font-size: 24px; /* Tamaño ajustado */
    margin: 20px 0;
}

/* Estilos del icono de mantenimiento */
.maintenance-icon {
    width: 100%; /* Se ajustará al contenedor */
    max-width: 650px; /* Tamaño máximo del icono de mantenimiento */
    height: auto;
    margin: 20px 0;
    transition: transform 0.4s ease; /* Transición suave */
}

.maintenance-icon:hover {
    transform: scale(1.2); /* Se agranda al pasar el cursor */
}

/* Estilos del pie de página */
footer {
    background-color: #002824; /* Color más oscuro para el pie de página */
    padding: 20px;
    color: #fff;
    position: relative;
    bottom: 0;
    width: 100%;
    display: flex; /* Usamos flexbox para alinear elementos */
    justify-content: center; /* Centra todos los elementos */
    align-items: center; /* Centra verticalmente los elementos */
}

/* Estilos para los datos de contacto */
.contact-info {
    font-size: 16px;
    display: flex; /* Usamos flexbox para alinear teléfono y correo */
    align-items: center; /* Centra verticalmente */
}

.contact-info p {
    margin: 0;
    letter-spacing: 2px; /* Espaciado entre teléfono y email */
}

/* Efecto hover para el teléfono y el correo por separado */
.contact-link {
    color: gold; /* Cambiar color a dorado */
    text-decoration: none; /* Sin subrayado */
    transition: transform 0.3s ease; /* Transición suave para el hover */
    margin-left: 10px; /* Espacio entre los íconos y los textos */
}

#phone:hover {
    transform: scale(1.2); /* Aumenta el tamaño del teléfono al pasar el cursor */
}

#email:hover {
    transform: scale(1.2); /* Aumenta el tamaño del correo al pasar el cursor */
}

/* Estilos para el separador */
.separator {
    color: gold; /* Cambiar color a dorado */
    margin: 0 10px; /* Espaciado alrededor del separador */
}

/* Estilos para los botones sociales */
.social-buttons {
    display: flex; /* Usamos flexbox para alinear los íconos */
    align-items: center; /* Centra verticalmente los íconos */
}

.social-buttons a {
    margin: 0 10px;
}

.social-buttons img {
    width: 48px;
    height: auto;
}

/* Estilos adicionales para botones en el pie de página */
.contact-info p:hover,
.social-buttons a:hover img {
    transform: scale(1.1); /* Efecto hover para agrandar elementos */
    transition: transform 0.3s ease;
}