/* Estilos para el contenedor del Certificado */
.certificado-section-wrapper {
    background-color: white; /* Fondo claro para que resalte la curva y el certificado */
    padding: 100px 5%;
    display: flex;
    justify-content: center; /* Centra el contenedor principal */
    align-items: center;
}

.certificado-container {
    position: relative;
    /* Define el tamaño máximo del área que contendrá ambas imágenes */
    width: 900px; 
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* -------------------------------------- */
/* Capa 1: Curva de Fondo                 */
/* -------------------------------------- */
.certificado-bg-curve {
    position: absolute;
    /* Ajusta la posición de la curva para que quede a la izquierda */
    left: -35%; /* Mueve la curva ligeramente fuera del borde izquierdo */
    top: 80%;
    transform: translateY(-50%);
    
    /* Ajusta el tamaño de la curva según necesites */
    max-height: 800px; 
    width: auto;
    
    z-index: 1; /* Fondo: Nivel inferior */
    opacity: 0.9; /* Puedes ajustar la opacidad si la curva es muy intensa */
}

/* -------------------------------------- */
/* Capa 2: Imagen del Certificado         */
/* -------------------------------------- */
.certificado-main-img {
    position: relative; /* Lo mantiene en el flujo normal, pero aseguramos la capa */
    max-width: 150%; /* Máximo ancho dentro del contenedor */
    max-height: 110%; /* Máximo alto dentro del contenedor */
    border-radius: 5px;
    z-index: 2; /* Primer plano: Nivel superior */
    
    /* Agrega una pequeña animación de "flotación" o escala (opcional) */
    transition: transform 0.3s ease;
}


/* RESPONSIVO EL CODIGO */


/* ==================================================== */
/* MEDIA QUERIES PARA SECCIÓN DE CERTIFICADO            */
/* ==================================================== */

/* Dispositivos Grandes (Tablets, hasta 1024px) */
@media (max-width: 1024px) {
    .certificado-section-wrapper {
        padding: 80px 3%;
    }
    
    /* Reducimos el área del contenedor principal para que quepa en la pantalla */
    .certificado-container {
        width: 700px;
        height: 500px;
    }

    /* Reducimos la visibilidad de la curva de fondo, moviéndola más afuera */
    .certificado-bg-curve {
        left: -40%;
        max-height: 700px;
    }
}

/* Dispositivos Móviles (Móviles y Tablets Pequeñas, hasta 768px) */
@media (max-width: 768px) {
    .certificado-section-wrapper {
        padding: 50px 5%; /* Reducimos el padding */
    }

    /* CAMBIO CLAVE: Hacemos que el contenedor se ajuste al 100% de la pantalla */
    .certificado-container {
        width: 100%;
        /* Usamos aspect-ratio si es posible, si no, usamos un padding-top para mantener la proporción 1.5:1 */
        height: auto; 
        padding-bottom: 70%; /* Aproximadamente 600/900 = 0.66, usamos 70% para espacio */
        max-width: 500px; /* Limitamos el tamaño máximo para pantallas muy grandes */
        margin: 0 auto;
    }

    /* Ajuste de la imagen del Certificado */
    .certificado-main-img {
        /* Ocupa el 100% del ancho del contenedor y se centra */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%; /* Ocupa el 100% del contenedor */
        max-width: 95%; /* Aseguramos que haya un pequeño margen */
        max-height: 95%;
        height: auto;
    }
    
    /* Curva de Fondo: Ocultarla o hacerla muy sutil en móviles */
    .certificado-bg-curve {
        display: none; /* Opción 1: Ocultarla completamente para simplicidad */
        
        /* Opción 2: Mantenerla, pero hacerla minúscula y moverla mucho */
        /* left: -80%;
        top: 100%;
        max-height: 300px; */
    }
}