/* ==========================================
   CUADRÍCULA Y TARJETAS DE CERTIFICACIONES
   (Exclusivo para la pestaña Certifications)
   ========================================== */
.certs-grid {
    display: grid;
    
    /* 220px -> 13.75rem. Permite que entren las tarjetas en una fila */
    grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
    
    gap: 1.25rem; /* 20px */
    margin-top: 1.875rem; /* 30px */
    width: 100%;
    max-width: 75rem; /* 1200px */
}

/* Ajuste para romper el límite de ancho heredado de la sección principal */
.layout-full .main-content,
.layout-full .hero-section {
    max-width: 100% !important;
}

.cert-card {
    background: rgba(13, 17, 28, 0.4);
    border: 0.0625rem solid var(--border-color); /* CORREGIDO: Se eliminó el (1px) roto */
    border-radius: 0.75rem; /* 12px */
    padding: 1.5rem; /* 24px */
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 12px */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.cert-card:hover {
    transform: translateY(-0.25rem); /* -4px */
    background: rgba(13, 17, 28, 0.7);
    box-shadow: 0 0.625rem 1.875rem rgba(10, 13, 20, 0.5); /* 0 10px 30px */
}

.cert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    letter-spacing: 0.0313rem; /* 0.5px */
}

.cert-id {
    color: var(--text-muted);
}

.cert-badge {
    padding: 0.25rem 0.625rem; /* 4px 10px */
    border-radius: 1.25rem; /* 20px */
    font-weight: 500;
    font-size: 0.65rem;
    text-transform: uppercase;
}

.cert-title {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    margin-top: 0.3125rem; /* 5px */
}

.cert-issuer {
    color: var(--accent-blue);
    font-size: 0.8rem;
    margin-top: -0.5rem; /* -8px */
    font-weight: 500;
}

.cert-desc {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* VARIACIONES DE ESTADO */
.cert-card.status-done { 
    border-left: 0.1875rem solid var(--accent-green); /* 3px */
}
.cert-card.status-done .cert-badge { 
    background: rgba(16, 185, 129, 0.1); 
    color: var(--accent-green); 
}
.cert-card.status-done:hover { 
    border-color: rgba(16, 185, 129, 0.3); 
}

.cert-card.status-progress { 
    border-left: 0.1875rem solid var(--accent-blue); /* 3px */
}
.cert-card.status-progress .cert-badge { 
    background: rgba(59, 130, 246, 0.1); 
    color: var(--accent-blue); 
}
.cert-card.status-progress:hover { 
    border-color: rgba(59, 130, 246, 0.4); 
}

.cert-card.status-future { 
    border-left: 0.1875rem solid #3a4454; /* 3px */
}
.cert-card.status-future .cert-badge { 
    background: rgba(98, 111, 134, 0.1); 
    color: var(--text-muted); 
}
.cert-card.status-future:hover { 
    border-color: rgba(98, 111, 134, 0.3); 
}

/* ==========================================================================
   OPTIMIZACIÓN RESPONSIVE EXCLUSIVA PARA MÓVILES (Celulares y Pantallas Chicas)
   ========================================================================== */
@media (max-width: 48rem) { /* 768px */
    
    /* CONTROL ANTI-OVERFLOW: Obliga a la sección de certificaciones a empaquetarse */
    .main-container,
    .layout-full,
    main {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .certs-grid {
        grid-template-columns: 1fr !important; /* Una sola columna vertical limpia */
        gap: 0.9375rem; /* 15px */
        width: 100%;
    }

    .cert-card {
        padding: 1.125rem; /* 18px */
    }
    
    /* Reducción drástica del título "MY CERTIFICATIONS" para celulares */
    .layout-full .main-title, 
    .layout-full .sub-title {
        font-size: 2.5rem !important; /* Bajado de 3.5rem a 2.5rem para emparejar con el home */
        line-height: 1.1;
        letter-spacing: -0.0625rem; /* -1px */
    }
}