/* 1. ESTO CORRIGE EL BLOQUE COMPLETO Y LO CENTRA EN LA PANTALLA */
.content-wrapper {
    /* Cambiado a 100% para que el fondo gris cubra toda la pantalla de lado a lado */
    width: 100%; 
    min-height: 100vh;       /* Agregado: para que el fondo gris cubra todo el alto de la pantalla */
    
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center;     /* Agregado: centra el documento verticalmente */
    padding: 40px 20px;      /* Da espacio arriba, abajo y a los lados */
    
    /* CAMBIO CLAVE: Aquí ponemos el gris de fondo para que se vea por detrás */
    background-color: #f4f4f4; 
    box-sizing: border-box;  /* Agregado: evita problemas de desborde por el padding */
}

/* 2. ESTO CONTROLA EL TEXTO DEL AVISO PARA QUE NO SE EXTENDA AL INFINITO */
.document-container {
    max-width: 780px;        /* El ancho perfecto para que un texto legal sea legible */
    width: 100%;             /* Se adapta a pantallas más chicas o celulares */
    
    /* CAMBIO CLAVE: La hoja es la que debe ser blanca para que resalte sobre el gris */
    background-color: #ffffff; 
    padding: 40px;           /* Agregado: espacio interno para que la foto no toque el marco */
    
    /* AGREGADO: El marco y la sombra para dar el efecto de hoja física */
    border: 1px solid #d1d1d1; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    
    border-radius: 4px;      /* Agregado: suaviza las esquinas */
    box-sizing: border-box;
}

/* 3. FORMATO INDIVIDUAL DEL TEXTO (Opcional, para refinar márgenes) */
.main-title {
    text-align: center;      /* Fuerza a que el título principal esté centrado */
    margin-top: 0;           /* Agregado: quita espacios raros arriba */
    margin-bottom: 30px;
}

p {
    text-align: justify;     /* Hace que los párrafos queden alineados como en un libro */
    line-height: 1.6;        /* Separa las líneas para que no se canse la vista */
    margin-bottom: 18px;     /* Separa un párrafo del siguiente */
}