/* --- CORRECCIÓN CLAVE --- */
/* Aplicamos el fondo al BODY para sobreescribir el fondo blanco de Bootstrap */
body {
    /* La ruta es correcta, asumiendo que el CSS está en /assets/css/ */
    background-image: url('../imagenes/patron2.webp');
    background-repeat: repeat; /* Para una textura, 'repeat' es mejor que 'cover' */
    background-position: center center;
    background-attachment: fixed; /* Opcional: si quieres el efecto parallax */
    
    /* Fuentes y color por defecto para todo el body */
    font-family: "Raleway", sans-serif;
    color: #333;
}

@media (max-width: 600px) {
    body {
        /* La ruta es correcta, asumiendo que el CSS está en /assets/css/ */
        background-image: url('../imagenes/bg-movil.webp');
        background-repeat: repeat; /* Para una textura, 'repeat' es mejor que 'cover' */
        background-position: center center;
        background-attachment: fixed; /* Opcional: si quieres el efecto parallax */
        
        /* Fuentes y color por defecto para todo el body */
        font-family: "Raleway", sans-serif;
        color: #333;
    }
}


/* --- MEJORAS DE DISEÑO PARA CENTRADO --- */
/* Usamos Flexbox para centrar verticalmente el contenido en la pantalla */
.principal {
    display: flex;
    align-items: center;    /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    min-height: 100vh;      /* Ocupa al menos toda la altura de la pantalla */
    padding: 0px 0 0 0;        /* Añade espacio por si el contenido es muy alto */
}

/* --- ESTILOS DE LOS ELEMENTOS (Tus estilos, pero refinados) --- */
.titulo {
    text-align: center;
    font-family: "Raleway", sans-serif; /* Usamos Raleway para el título como en la imagen */
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #555;
}

.slogan {
    text-align: center;
    font-family: "Marvel", sans-serif; /* Marvel para el slogan se ve genial */
    font-weight: 400;
    font-style: normal;
    font-size: 34px;
    margin-top: 10px;
    color: #444;
}

.logo {
    text-align: center;
    padding: 50px 0 30px 0; /* Ajustado el padding */
}

.logo img {
    max-width: 220px; /* Usar max-width en vez de width para mejor control */
    width: 100%;      /* Asegura que no se desborde en pantallas pequeñas */
    height: auto;
}

.texto {
    padding: 20px 0; /* Ajustado el padding */
    font-size: 16px;
    line-height: 1.7;
    font-weight: 500;
    text-align: center;
}

.texto a {
    color: #0066cc; /* Un azul más legible */
    font-weight: 600;
    text-decoration: none;
}

.texto a:hover {
    text-decoration: underline;
}

/* Limpiamos la regla del html que ya no es necesaria */
html {
    /* No es necesario poner nada aquí, el fondo ya está en el body */
}