/* Reset básico */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4; 
    
    /* 1. Fuente IBM Plex Mono */
    font-family: 'IBM Plex Mono', monospace;
    
    /* 2. Peso Regular */
    font-weight: 400; 
    
    /* 3. Espaciado del 25% (0.25em) */
    letter-spacing: 0.25em; 
}

.contenedor-mantenimiento {
    width: 100%;
    
    /* Separación lateral */
    padding-left: 100px; 
    padding-right: 100px;
    
    /* Centra el texto y la imagen dentro del bloque */
    text-align: center; 
}

.logo {
    width: 100%;      /* Ocupa todo el ancho disponible (menos el padding) */
    max-width: 1200px;
    height: auto;     /* Lo pongo para mantener la proporción */
    padding: 10px;
    margin-bottom: 20px; 
}

h1 {
    color: #333;
    margin-bottom: 15px;
    font-size: 2rem; /* Tamaño de letra ajustado */
}

p {
    color: #666;
    font-size: 1.2rem;
}

@media (max-width: 768px) {

    /* Reduzco padding lateral que para móvil era una pasada*/
    .contenedor-mantenimiento {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Reducción tamaño Título */
    h1 {
        font-size: 1rem; /* Un poco más pequeño */
        margin-bottom: 15px; /* Ajustamos espacio si hace falta */
    }

    /* Reducción tamaño Párrafo */
    p {
        font-size: 0,25rem; /* Tamaño base estándar */
        letter-spacing: 0.1em; /* Reducimos un poco el espaciado si es necesario */
    }
    
    /* (Opcional) Ajuste del logo si lo ves muy grande en móvil */
    .logo {
        margin-bottom: 15px;
    }
}