/* 1. EL FONDO DE LA PÁGINA */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #f4f4f4; /* Gris claro de fondo de la imagen original */
    font-family: 'Domine', 'Times New Roman', serif;
}

/* 2. CONTENEDOR CENTRADOR */
.content-wrapper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrado vertical */
    align-items: center;     /* Centrado horizontal */
    padding: 60px 20px;      /* Más espacio arriba/abajo para apreciar el fondo */
    box-sizing: border-box;
    background-color: #f4f4f4; /* Mismo gris para asegurar consistencia */
}

/* 3. TÍTULO */
.main-title {
    text-align: center;
    font-size: 32px;
    color: #111111;
    margin-top: 0;
    margin-bottom: 40px;
    font-weight: normal;
}

/* 4. LA HOJA CON SU MARCO */
.document-container.con-marco {
    max-width: 800px;
    width: 100%;
    background-color: #ffffff;
    
    /* EL MARCO: Un borde elegante y definido de 1px (puedes subirlo a 2px si lo quieres más grueso) */
    border: 1px solid #d1d1d1; 
    
    /* LA SOMBRA: Hace que la hoja se "despegue" visualmente del fondo gris */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); 
    
    border-radius: 4px; /* Esquinas ligeramente suaves */
    overflow: hidden;
    display: flex;
    justify-content: center;
}

/* 5. AJUSTE DE LA IMAGEN */
.certificado-foto {
    width: 100%;
    height: auto;
    display: block;
}