/*==================================================*
  PROYECTOS - SMAR
*==================================================*/


/*==================================================*
  FILTROS
*==================================================*/

.projects-filter{
    text-align:center;
    margin-bottom:30px;
}

.projects-filter button{
    border:2px solid #0071BC;
    background:#FFFFFF;
    color:#0071BC;

    padding:8px 16px;
    margin:5px;

    font-weight:600;

    border-radius:6px;

    cursor:pointer;

    transition:all .3s ease;
}

.projects-filter button.active,
.projects-filter button:hover{
    background:#0071BC;
    color:#FFFFFF;
}


/*==================================================*
  GRID
*==================================================*/

.projects-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(260px,1fr));

    grid-auto-rows:260px;

    gap:24px;

    grid-auto-flow:dense;
}


/*==================================================*
  TARJETA
*==================================================*/

.project-card{
    background:#FFFFFF;

    border-radius:20px;

    padding:12px 12px 18px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.08);

    text-align:center;

    position:relative;

    overflow:hidden;

    cursor:pointer;

    transition:
        transform .55s cubic-bezier(.16,1,.3,1),
        box-shadow .55s ease,
        filter .55s ease;

    opacity:1;

    transform:none;
}


/*==================================================*
  IMAGEN
*==================================================*/

.project-card img{
    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:16px;

    transition:
        transform 1s cubic-bezier(.16,1,.3,1),
        filter .6s ease;
}


/*==================================================*
  HOVER TARJETA
*==================================================*/

.project-card:hover{
    transform:
        translateY(-12px)
        scale(1.02);

    box-shadow:
        0 30px 80px rgba(0,0,0,.20);

    filter:brightness(1.02);
}

.project-card:hover img{
    transform:scale(1.08);
}


/*==================================================*
  OVERLAY
*==================================================*/

.project-overlay{
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.65);

    display:flex;

    align-items:center;
    justify-content:center;

    text-align:center;

    padding:25px;

    color:#FFFFFF;

    opacity:0;

    pointer-events:none;

    transition:
        opacity .45s ease,
        transform .45s ease;

    z-index:5;
}

.project-card:hover .project-overlay{
    opacity:1;
}

.project-overlay p{
    max-width:240px;

    font-size:14px;

    line-height:1.4;

    transform:translateY(15px);

    transition:
        transform .45s ease;
}

.project-card:hover .project-overlay p{
    transform:translateY(0);
}


/*==================================================*
  TÍTULO DEL PROYECTO
*==================================================*/

.project-card h3.project-title{
    position:relative;

    z-index:6;

    margin-top:14px;

    color:#2E2E2E;

    text-align:center;

    font-size:16px;

    font-weight:600;

    letter-spacing:.3px;
}


/*==================================================*
  ETIQUETA "NUEVO"
*==================================================*/

.project-new{
    background:#e63946;

    color:#FFFFFF;

    font-size:11px;

    padding:3px 7px;

    border-radius:4px;

    margin-left:8px;

    font-weight:600;
}


/*==================================================*
  BOTÓN VER MÁS
*==================================================*/

.show-more-btn{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:10px;

    margin:40px auto 0;

    padding:14px 36px;

    font-size:15px;

    font-weight:600;

    color:#FFFFFF;

    background:
        linear-gradient(
            135deg,
            #0071BC,
            #4FC3FF
        );

    border:none;

    border-radius:14px;

    cursor:pointer;

    position:relative;

    overflow:hidden;

    box-shadow:
        0 6px 15px rgba(0,113,188,.30),
        0 12px 30px rgba(79,195,255,.20);

    transition:all .4s ease;
}


/* Glow */

.show-more-btn::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            120deg,
            rgba(79,195,255,.2),
            rgba(0,113,188,.2),
            rgba(79,195,255,.2)
        );

    border-radius:14px;

    opacity:.6;

    animation:
        glowPulseContinuous 4s infinite;
}


/* Hover */

.show-more-btn:hover{
    transform:
        translateY(-3px)
        scale(1.04);

    box-shadow:
        0 10px 25px rgba(0,113,188,.35),
        0 18px 40px rgba(79,195,255,.25);
}

.show-more-btn:hover::before{
    opacity:1;
}


/* Flecha */

.show-more-btn::after{
    content:"→";

    display:inline-block;

    font-size:16px;

    margin-left:8px;

    animation:
        arrowPulse 1.2s infinite;

    transition:
        transform .3s ease;
}

.show-more-btn:hover::after{
    transform:translateX(6px);
}


/*==================================================*
  ANIMACIÓN GLOW
*==================================================*/

@keyframes glowPulseContinuous{

    0%,100%{
        box-shadow:
            0 0 10px rgba(79,195,255,.2),
            0 0 20px rgba(0,113,188,.15);
    }

    50%{
        box-shadow:
            0 0 20px rgba(79,195,255,.35),
            0 0 40px rgba(0,113,188,.25);
    }
}


/*==================================================*
  ANIMACIÓN FLECHA
*==================================================*/

@keyframes arrowPulse{

    0%,100%{
        transform:translateX(0);
    }

    50%{
        transform:translateX(4px);
    }
}


/*==================================================*
  MODAL GALERÍA
*==================================================*/

.project-modal{
    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(6px);

    display:flex;

    align-items:center;
    justify-content:center;

    opacity:0;

    pointer-events:none;

    transition:
        opacity .5s cubic-bezier(.16,1,.3,1);

    z-index:9999;
}

.project-modal.active{
    opacity:1;

    pointer-events:auto;
}


/* Imagen modal */

.project-modal img{
    max-width:80%;
    max-height:80%;

    border-radius:16px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.35);

    transform:scale(1.05);

    opacity:0;

    transition:
        transform .5s cubic-bezier(.16,1,.3,1),
        opacity .3s ease;
}

.project-modal.active img{
    transform:scale(1);

    opacity:1;
}


/* Cierre suave */

.project-modal.closing{
    opacity:0;
}

.project-modal.closing img{
    transform:scale(.9);

    opacity:0;
}


/*==================================================*
  BOTONES MODAL
*==================================================*/

.project-modal .prev-btn,
.project-modal .next-btn{
    position:absolute;

    top:50%;

    transform:translateY(-50%);

    background:rgba(0,0,0,.5);

    color:#FFFFFF;

    border:none;

    border-radius:50%;

    width:60px;
    height:60px;

    font-size:36px;

    display:flex;

    align-items:center;
    justify-content:center;

    cursor:pointer;

    z-index:10;

    transition:
        background .3s ease,
        transform .2s ease;
}

.project-modal .prev-btn:hover,
.project-modal .next-btn:hover{
    background:rgba(0,0,0,.8);

    transform:
        translateY(-50%)
        scale(1.1);
}

.project-modal .prev-btn{
    left:20px;
}

.project-modal .next-btn{
    right:20px;
}


/*==================================================*
  CERRAR MODAL
*==================================================*/

.project-modal .modal-close{
    position:absolute;

    top:20px;
    right:20px;

    font-size:36px;

    color:#FFFFFF;

    cursor:pointer;

    z-index:10;

    transition:
        color .3s ease;
}

.project-modal .modal-close:hover{
    color:#FF5555;
}


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

@media (max-width:900px){

    .projects-grid{
        grid-template-columns:1fr;
    }

    .project-overlay{
        opacity:1;

        background:rgba(0,0,0,.55);
    }

    .project-overlay p{
        transform:none;
    }

    .show-more-btn{
        width:80%;

        padding:14px 24px;

        font-size:14px;
    }

}


/*==================================================*
  MÓVIL
*==================================================*/

@media (max-width:600px){

    .projects-grid{
        gap:18px;
    }

    .project-card{
        border-radius:16px;
    }

    .project-card img{
        border-radius:12px;
    }

    .project-modal img{
        max-width:92%;
        max-height:75%;
    }

    .project-modal .prev-btn,
    .project-modal .next-btn{
        width:48px;
        height:48px;

        font-size:28px;
    }

    .project-modal .prev-btn{
        left:10px;
    }

    .project-modal .next-btn{
        right:10px;
    }

    .project-modal .modal-close{
        top:12px;
        right:15px;

        font-size:32px;
    }

}

/* =========================================
   AJUSTE DE ESPACIO - PROYECTOS
========================================= */

.projects {
    padding-top: 10px;
}

/* =========================================
   DESCRIPCIÓN PROYECTOS
========================================= */

.projects-description{
    text-align:center;
    font-size:1.05rem;
    line-height:1.6;
    margin:0 auto 18px;
    max-width:1200px;
}