/* ===================================
   Work Section Visibility Fix
   Asegura que la sección "My Work" siempre sea visible
   =================================== */

/* ===== VISIBILIDAD FORZADA ===== */

/* Asegurar que la sección siempre sea visible */
#work-showcase,
.work-showcase-section {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
    min-height: 100vh !important;
    width: 100% !important;
    overflow: visible !important;
}

/* Prevenir que se oculte */
#work-showcase.hidden,
.work-showcase-section.hidden,
#work-showcase[style*="display: none"],
.work-showcase-section[style*="display: none"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ===== CONTENEDOR PRINCIPAL ===== */

.showcase-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 60px 40px !important;
    gap: 60px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===== CONTENIDO DE LA SECCIÓN ===== */

.showcase-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 60px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.showcase-text {
    flex: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.showcase-title {
    font-size: clamp(3rem, 8vw, 6rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: var(--text-primary) !important;
    margin-bottom: 30px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.showcase-description {
    font-size: 1.25rem !important;
    color: var(--text-secondary) !important;
    line-height: 1.8 !important;
    max-width: 500px !important;
    margin-bottom: 40px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* ===== PHONE CONTAINER ===== */

.phone-container {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.rotating-phone {
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* ===== ANIMACIONES SUAVES ===== */

/* Animación de entrada */
@keyframes workSectionFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.work-showcase-section {
    animation: workSectionFadeIn 1s ease-out !important;
}

/* Animación para el título */
@keyframes titleSlideIn {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.showcase-title {
    animation: titleSlideIn 0.8s ease-out !important;
    animation-delay: 0.2s !important;
    animation-fill-mode: both !important;
}

/* Animación para la descripción */
.showcase-description {
    animation: titleSlideIn 0.8s ease-out !important;
    animation-delay: 0.4s !important;
    animation-fill-mode: both !important;
}

/* Animación para el teléfono */
@keyframes phoneFloat {
    0%, 100% {
        transform: translateY(0) rotateZ(0deg);
    }
    25% {
        transform: translateY(-10px) rotateZ(2deg);
    }
    75% {
        transform: translateY(10px) rotateZ(-2deg);
    }
}

.rotating-phone {
    animation: phoneFloat 6s ease-in-out infinite !important;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 968px) {
    .showcase-content {
        flex-direction: column !important;
        text-align: center !important;
    }

    .showcase-title {
        font-size: clamp(2.5rem, 6vw, 4rem) !important;
        text-align: center !important;
    }

    .showcase-description {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .phone-container {
        max-width: 350px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 768px) {
    #work-showcase,
    .work-showcase-section {
        min-height: auto !important;
        padding: 60px 20px !important;
    }

    .showcase-container {
        padding: 40px 20px !important;
    }

    .showcase-content {
        gap: 40px !important;
    }

    .showcase-title {
        font-size: 3rem !important;
        margin-bottom: 20px !important;
    }

    .showcase-description {
        font-size: 1rem !important;
        margin-bottom: 30px !important;
    }

    .rotating-phone {
        max-width: 280px !important;
    }

    /* Animación más suave en móvil */
    @keyframes phoneFloat {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-5px);
        }
    }
}

/* ===== ARREGLOS ESPECÍFICOS ===== */

/* Asegurar que no se sobreponga con otras secciones */
.work-showcase-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    clear: both !important;
}

/* Fix para z-index conflicts */
.work-showcase-section * {
    position: relative !important;
    z-index: inherit !important;
}

/* Prevenir overflow hidden que podría ocultar contenido */
body,
html,
.main-container {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* ===== SCROLL ACTIVATION ===== */

/* Clase para activación por scroll */
.work-showcase-section.in-view {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ===== DEBUG MODE ===== */

/* Descomenta para debugging */
/*
.work-showcase-section {
    border: 3px solid red !important;
    background: rgba(255, 0, 0, 0.1) !important;
}
*/

/* ===== FORZAR VISIBILIDAD EN TODOS LOS CASOS ===== */

/* Override cualquier regla que intente ocultar */
.section#work-showcase,
section#work-showcase,
.work-showcase-section,
#work-showcase.section {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    mask: none !important;
    filter: none !important;
    transform: none !important;
}

/* Asegurar que los hijos también sean visibles */
.work-showcase-section > *,
#work-showcase > * {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

/* ===== LIGHT THEME ADJUSTMENTS ===== */

[data-theme="light"] .showcase-title {
    color: #1a1a2e !important;
}

[data-theme="light"] .showcase-description {
    color: #4a4a5e !important;
}

/* ===== IMPORTANTE: MÁXIMA PRIORIDAD ===== */

/* Esta regla tiene la máxima especificidad para garantizar visibilidad */
body .main-container section#work-showcase.work-showcase-section,
body .main-container .work-showcase-section {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}