/* ---- Estilos Generales ---- */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Poppins', sans-serif; /* Usamos la fuente moderna que importamos */
    background-color: #f4f4f9; /* Un color de fondo suave y minimalista */
    color: #333; /* Color de texto oscuro para buena legibilidad */
    display: flex; /* Activamos Flexbox para centrar contenido */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    text-align: center;
    overflow: hidden; /* Evita que aparezcan barras de scroll */
}

/* ---- Contenedor Principal ---- */
.container {
    padding: 20px;
    max-width: 90%;
}

/* ---- Encabezado de Bienvenida ---- */
.welcome-header h1 {
    font-size: 2.5em; /* Tamaño de fuente grande para computadoras */
    font-weight: 400; /* Un peso de fuente ni muy delgado ni muy grueso */
    margin-bottom: 30px; /* Espacio entre el título y el anuncio */
}

/* ---- Espacio para el Anuncio ---- */
.ad-space {
    width: 100%;
    min-height: 90px; /* Altura mínima para un anuncio tipo banner */
    background-color: #e0e0e0; /* Color de fondo para el espacio del anuncio */
    border: 2px dashed #ccc; /* Un borde punteado para que sepas dónde está el espacio */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
}

.ad-space p {
    color: #777;
    font-style: italic;
}

/* ---- Diseño Responsivo para Móviles ---- */
@media (max-width: 600px) {
    .welcome-header h1 {
        font-size: 1.8em; /* Hacemos la fuente más pequeña en pantallas chicas */
    }

    .ad-space {
        min-height: 50px; /* Ajustamos la altura mínima para anuncios móviles */
    }
}