/* Configuramos el fondo de toda la página */
body {
    background-color: #f0f4f8; /* Un gris muy clarito para que el celeste resalte más */
    font-family: 'Segoe UI', Arial, sans-serif; /* Letra limpia y moderna */
    display: flex;
    justify-content: center; /* Centra el rectángulo horizontalmente */
    padding: 40px 20px; /* Da un margen arriba y a los lados */
    margin: 0;
}

/* Esta es la clase que le da estilo a tu rectángulo */
.rectangulo-celeste {
    background-color: #e1f5fe; /* Un celeste suave (puedes cambiarlo si lo quieres más oscuro) */
    color: #2c3e50; /* Un tono oscuro para el texto (mejor contraste que el negro puro) */
    padding: 40px; /* Espacio interno para que el texto no toque los bordes */
    border-radius: 12px; /* Redondea las esquinas del rectángulo */
    max-width: 800px; /* Limita el ancho para que leer el resumen sea cómodo */
    width: 100%;
    
    /* Esta es la magia que lo hace parecer "por encima" de la página */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); 
    
    /* Opcional: un borde muy sutil para darle mejor terminación */
    border: 1px solid #b3e5fc; 
}

/* Pequeños ajustes para los títulos y textos dentro del rectángulo */
.rectangulo-celeste h1 {
    margin-top: 0;
    color: #0277bd; /* Un azul más fuerte para el título principal */
    text-align: center;
}

.rectangulo-celeste p {
    line-height: 1.6; /* Separa los renglones para facilitar la lectura */
    font-size: 16px;
    margin-bottom: 15px;
}