/*==============================================================
ÁREAS DE TRABAJO
==============================================================*/

.services-home{

    position:relative;

    padding:150px 0;

    background:#f7f6f3;

    overflow:hidden;

}

.services-home::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at center,
    rgba(198,155,88,.10),
    transparent 70%);

    pointer-events:none;

}

.services-home .container{

    position:relative;

    z-index:2;

}

/*==============================================================
HEADER
==============================================================*/

.services-header{

    max-width:820px;

    margin:0 auto 90px;

    text-align:center;

}

.services-header .section-label{

    display:inline-flex;

    align-items:center;

    gap:18px;

    margin-bottom:24px;

}

.services-header .section-label::before,
.services-header .section-label::after{

    content:"";

    width:60px;

    height:1px;

    background:rgba(198,155,88,.35);

}

.services-header h2{

    margin:0;

    font-size:clamp(4rem,5vw,5.8rem);

    line-height:.92;

    color:#111;

    font-weight:700;

}

.services-header h2 span{

    color:var(--color-gold);

    font-family:"Cormorant Garamond",serif;

    font-style:italic;

    font-weight:500;

}

.services-header p{

    max-width:700px;

    margin:28px auto 0;

    font-size:1.18rem;

    line-height:1.8;

    color:#5b5b5b;

}

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

.services-grid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:22px;

}

.service-card{

    grid-column:span 2;

}

.service-wide{

    grid-column:span 3;

}

/*==============================================================
CARD
==============================================================*/

.service-card{

    position:relative;

    height:430px;

    border-radius:22px;

    overflow:hidden;

    background:#111;

    box-shadow:

    0 18px 45px rgba(0,0,0,.12);

}

.service-card>img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.service-overlay{

    position:absolute;

    inset:0;

        background:
        linear-gradient(
            to top,
            rgba(0,0,0,.88) 0%,
            rgba(0,0,0,.72) 28%,
            rgba(0,0,0,.42) 55%,
            rgba(0,0,0,.18) 78%,
            rgba(0,0,0,.05) 100%
        ),

        linear-gradient(
            to right,
            rgba(0,0,0,.58) 0%,
            rgba(0,0,0,.32) 35%,
            rgba(0,0,0,0) 72%
        );

    z-index:1;

    transition:.45s;

}

.service-content{

    position:absolute;

    left:28px;

    right:28px;

    bottom:28px;

    z-index:3;

    color:#fff;

}


.service-icon img{

    width:35px;
    max-width:20px;
    max-height:20px;

    object-fit:contain;

}

.color-blue{

    background:#1565c0;

}

.color-gold{

    background:#d4a017;

}

.color-purple{

    background:#6d49b6;

}

.color-orange{

    background:#d97706;

}

.color-green{

    background:#0d9488;

}

/*==============================================================
TÍTULO TARJETAS
==============================================================*/

.service-content h3{

    margin:0 0 14px;

    font-size:2.25rem;

    font-weight:600;

    line-height:1.05;

    letter-spacing:-.03em;
    
    transition:

        color .35s,

        letter-spacing .35s;

}

.service-line{

    width:38px;

    height:2px;

    margin:18px 0;

    background:var(--color-gold);

    border-radius:10px;
    
    transition:.35s;

    position:relative;

}

.service-line::after{

    content:"";

    position:absolute;

    inset:0;

    background:#f0d28b;

    opacity:0;

    filter:blur(6px);

    transition:.35s;

}

.service-content p{

    margin:0 0 26px;

    font-size:1rem;

    line-height:1.75;

    color:rgba(255,255,255,.88);

    max-width:300px;

}

.service-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:var(--color-gold);

    font-weight:600;

    transition:.35s;

}

.service-content a span{

    transition:.35s;

    font-size:1.2rem;

}

.service-card{

    transition:

        transform .45s cubic-bezier(.22,1,.36,1),

        box-shadow .45s cubic-bezier(.22,1,.36,1);

}

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 28px 60px rgba(0,0,0,.18);

}

.service-card img{

    width:100%;
    height:100%;
    object-fit:cover;

    filter:
        brightness(.82)
        contrast(1.08)
        saturate(.92);

    transition:
        transform 1.2s cubic-bezier(.22,1,.36,1),
        filter .7s ease;

}

.service-card:hover img{

    transform:scale(1.06);

    filter:

        brightness(.93)

        contrast(1.12)

        saturate(1.05);

}

.service-overlay{

    transition:.45s;

}

.service-card:hover .service-overlay{

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.92) 0%,
            rgba(0,0,0,.76) 28%,
            rgba(0,0,0,.48) 55%,
            rgba(0,0,0,.20) 78%,
            rgba(0,0,0,.06) 100%
        ),

        linear-gradient(
            to right,
            rgba(0,0,0,.62) 0%,
            rgba(0,0,0,.36) 35%,
            rgba(0,0,0,0) 72%
        );

}

.service-icon{

    width:58px;
    height:58px;

    border-radius:50%;

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

    margin-bottom:22px;

    transition:
        transform .35s,
        box-shadow .35s,
        filter .35s;

}

.service-card:hover .service-icon{

        transform:
        translateY(-4px)
        scale(1.06);

    filter:brightness(1.08);
    

}

.service-content h3{

    transition:.35s;

}

.service-card:hover h3{

    color:#fff;

    letter-spacing:-.02em;

}

.service-line{

    transition:.35s;

}

.service-card:hover .service-line{

    width:72px;

}

.service-card:hover .service-line::after{

    opacity:.8;

}

.service-content a:hover{

    color:#fff;

}

.service-content a:hover span{

    transform:translateX(8px);

}

/*==============================================================
FOOTER
==============================================================*/

.services-footer{

    margin-top:80px;

    text-align:center;

}

.services-divider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin-bottom:24px;

}

.services-divider::before,

.services-divider::after{

    content:"";

    width:60px;

    height:1px;

    background:rgba(198,155,88,.35);

}

.services-divider span{

    color:var(--color-gold);

    font-size:1.1rem;

}

.services-footer p{

    font-size:2rem;

    color:#333;

    line-height:1.45;

}

.services-footer span{

    color:var(--color-gold);

}

/*==============================================================
REVEAL
==============================================================*/

.service-card{

    opacity:0;

    transform-origin:center;

    transition:

    opacity .9s ease,

    transform .9s cubic-bezier(.16,1,.3,1);

}

.service-card.show{

    opacity:1;

    transform:translateY(0);

}

/* Delay escalonado */

.service-card:nth-child(1){

    transition-delay:.05s;

}

.service-card:nth-child(2){

    transition-delay:.15s;

}

.service-card:nth-child(3){

    transition-delay:.25s;

}

.service-card:nth-child(4){

    transition-delay:.35s;

}

.service-card:nth-child(5){

    transition-delay:.45s;

}

.service-content{

    transition:.45s ease;

}

.service-card:hover .service-content{

    transform:

        translateY(-8px)

        rotateX(.6deg);

}

.service-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        120deg,

        transparent 30%,

        rgba(255,255,255,.08),

        transparent 70%

    );

    transform:translateX(-130%);

    transition:1s;

    z-index:2;

}

.service-card:hover::after{

    transform:translateX(130%);

}

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

.service-overlay{

    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:

    /* Degradado inferior */
    linear-gradient(
        to top,
        rgba(0,0,0,.92) 0%,
        rgba(0,0,0,.72) 28%,
        rgba(0,0,0,.42) 58%,
        rgba(0,0,0,.12) 100%
    ),

    /* Degradado lateral */
    linear-gradient(
        to right,
        rgba(0,0,0,.72) 0%,
        rgba(0,0,0,.42) 34%,
        rgba(0,0,0,.08) 72%,
        transparent 100%
    ),

    /* Luz dorada sutil */
    radial-gradient(
        circle at bottom left,
        rgba(198,155,88,.16),
        transparent 55%
    );

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

}

.service-card:hover .service-overlay{

    background:

    linear-gradient(
        to top,
        rgba(0,0,0,.94) 0%,
        rgba(0,0,0,.74) 30%,
        rgba(0,0,0,.45) 60%,
        rgba(0,0,0,.12) 100%
    ),

    linear-gradient(
        to right,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.46) 36%,
        rgba(0,0,0,.08) 72%,
        transparent 100%
    ),

    radial-gradient(
        circle at bottom left,
        rgba(198,155,88,.22),
        transparent 60%
    );

}

/*==============================================================
ICON GLOW
==============================================================*/

.service-card:hover .color-blue{

    box-shadow:
        0 0 0 8px rgba(21,101,192,.12),
        0 12px 30px rgba(21,101,192,.35);

}

.service-card:hover .color-gold{

    box-shadow:
        0 0 0 8px rgba(212,160,23,.12),
        0 12px 30px rgba(212,160,23,.35);

}

.service-card:hover .color-purple{

    box-shadow:
        0 0 0 8px rgba(109,73,182,.12),
        0 12px 30px rgba(109,73,182,.35);

}

.service-card:hover .color-orange{

    box-shadow:
        0 0 0 8px rgba(217,119,6,.12),
        0 12px 30px rgba(217,119,6,.35);

}

.service-card:hover .color-green{

    box-shadow:
        0 0 0 8px rgba(13,148,136,.12),
        0 12px 30px rgba(13,148,136,.35);

}

/*==============================================================
PROYECTOS DESTACADOS
==============================================================*/

.projects-home{

    padding:140px 0;

    background:#070707;

    position:relative;

    overflow:hidden;

}

.projects-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:80px;

    margin-bottom:70px;

}

.projects-title{

    max-width:700px;

}

.projects-title .section-label{

    display:inline-flex;

    align-items:center;

    gap:18px;

    margin-bottom:28px;

    color:var(--color-gold);

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.22em;

    text-transform:uppercase;

}

.projects-title .section-label::after{

    content:"";

    width:70px;

    height:1px;

    background:rgba(198,155,88,.45);

}

.projects-title h2{

    margin:0;

    font-size:4.6rem;

    line-height:1.02;

    letter-spacing:-.05em;

    color:#fff;

}

.projects-title h2 span{

    color:var(--color-gold);

    position:relative;
}

.projects-title h2 span::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:2px;

    background:var(--color-gold);

    transition:.8s ease;

}

.projects-home.show .projects-title h2 span::after{

    width:100%;

    transition-delay:.55s;

}

.projects-title p{

    margin-top:28px;

    max-width:620px;

    font-size:1.15rem;

    line-height:1.9;

    color:rgba(255,255,255,.72);

}

.projects-all{

    display:flex;

    align-items:center;

    gap:24px;

    margin-top:18px;

    text-decoration:none;

    color:#fff;

}

.projects-circle{

    width:72px;

    height:72px;

    border-radius:50%;

    border:1px solid rgba(198,155,88,.55);

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--color-gold);

    font-size:1.3rem;

    transition:.35s;

}

.projects-all strong{

    display:block;

    margin-bottom:8px;

    font-size:.95rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#fff;

}

.projects-all span{

    color:rgba(255,255,255,.65);

    font-size:1rem;

}

.projects-all:hover .projects-circle{

    background:rgba(198,155,88,.08);

    transform:translateX(6px);

    box-shadow:

        0 12px 28px rgba(198,155,88,.16);

}

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

.projects-grid{

    position:relative;
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

.project-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    height:760px;

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    opacity:0;

    transform:translateY(60px);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.22,1,.36,1),
        filter .45s ease,
        box-shadow .45s ease;

}

/*==============================================================
FEATURED PROJECT
==============================================================*/

.project-card:nth-child(2){

    margin-top:-20px;

    height:800px;

}

.project-card:nth-child(2){

    box-shadow:

        0 35px 80px rgba(0,0,0,.28);

}

.project-card:nth-child(2){

    border:1px solid rgba(198,155,88,.18);

}

.project-card > img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    filter:
        brightness(.82)
        contrast(1.08)
        saturate(.95);

    transition:
        transform 1.2s cubic-bezier(.22,1,.36,1),
        filter .7s ease;

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.94) 0%,

            rgba(0,0,0,.70) 28%,

            rgba(0,0,0,.38) 60%,

            rgba(0,0,0,.08) 100%

        ),

        linear-gradient(

            to right,

            rgba(0,0,0,.55),

            rgba(0,0,0,.18),

            transparent

        );
        
        transition:.45s ease;

}

.project-card:hover .project-overlay{

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.96),

            rgba(0,0,0,.66),

            rgba(0,0,0,.12)

        ),

        linear-gradient(

            to right,

            rgba(0,0,0,.60),

            rgba(0,0,0,.22),

            transparent

        );

}

.project-category{

    position:absolute;

    top:22px;

    right:22px;

    z-index:5;

    padding:9px 16px;

    border-radius:30px;

    border:1px solid rgba(198,155,88,.45);

    color:var(--color-gold);

    font-size:.72rem;

    font-weight:600;

    letter-spacing:.08em;

    background:rgba(15,15,15,.72);

    backdrop-filter:blur(16px);

    box-shadow:

    0 10px 25px rgba(0,0,0,.20);

    backdrop-filter:blur(12px);

}

.project-content{

    position:absolute;

    left:34px;

    right:34px;

    bottom:34px;

    z-index:10;
    
    transition:.4s;

}

.project-card:hover .project-content{

    transform:translateY(-6px);

}

.project-icon{

    width:76px;
    height:76px;

    display:grid;
    place-items:center;

    margin-bottom:28px;

    border-radius:18px;

    overflow:hidden;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.10);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.02)
        );

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;

}

.project-icon img{

    width:24px;
    height:24px;

    display:block;

    object-fit:contain;

}

.project-card > img{

    display:block;

    width:24px;
    height:24px;

    object-fit:contain;

    flex-shrink:0;

}

.project-content h3{

    margin:0;

    font-size:2.2rem;

    color:#fff;

    line-height:1.05;

}

.project-type{

    display:block;

    margin-top:10px;

    color:rgba(255,255,255,.72);

    font-size:1.15rem;

}

.project-line{

    width:44px;

    height:2px;

    margin:22px 0;

    background:var(--color-gold);
    
    transition:.35s;

}

.project-content p{

    margin:0 0 28px;

    font-size:1.02rem;

    line-height:1.85;

    color:rgba(255,255,255,.82);

}

.project-content a{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:var(--color-gold);

    text-decoration:none;

    font-size:1.1rem;

    font-weight:600;
    
    transition:.35s;

}

.project-content a span{

    transition:.35s;

}

.project-card:hover .project-icon{

    transform:

        translateY(-4px)

        scale(1.06);

}


.projects-grid::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    background:

        radial-gradient(

            circle,

            rgba(198,155,88,.10),

            transparent 70%

        );

    filter:blur(80px);

    pointer-events:none;

}

.projects-grid:hover .project-card{

    filter:brightness(.72);

    transform:scale(.985);

}

.project-card:hover{

    filter:brightness(1);

    transform:

        translateY(-12px)

        scale(1.02);

    z-index:20;

}

.project-card:hover .color-gold{

    box-shadow:

        0 0 0 8px rgba(212,160,23,.12),

        0 14px 30px rgba(212,160,23,.28);

}

.project-card:hover .color-blue{

    box-shadow:

        0 0 0 8px rgba(21,101,192,.12),

        0 14px 30px rgba(21,101,192,.28);

}

.project-card:hover .color-green{

    box-shadow:

        0 0 0 8px rgba(13,148,136,.12),

        0 14px 30px rgba(13,148,136,.28);



}

.project-card:hover .project-line{

    width:70px;

}

.project-card:hover a{

    color:#fff;

}

.project-card:hover a span{

    transform:translateX(8px);

}

.project-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            120deg,

            transparent 25%,

            rgba(255,255,255,.08),

            transparent 70%

        );

    transform:translateX(-130%);

    transition:1.1s;

    pointer-events:none;

}

.project-card:hover::after{

    transform:translateX(130%);

}

/*==============================================================
PROJECTS REVEAL
==============================================================*/

.projects-title,
.projects-all,
.projects-stats{

    opacity:0;

    transform:translateY(45px);

    transition:

        opacity .9s ease,

        transform .9s cubic-bezier(.22,1,.36,1);

}


.projects-home.show .projects-title{

    opacity:1;

    transform:none;

}

.projects-home.show .projects-all{

    opacity:1;

    transform:none;

    transition-delay:.18s;

}

.projects-home.show .project-card{

    opacity:1;

    transform:translateY(0);

}

.projects-home.show .project-card:nth-child(1){

    opacity:1;

    transform:none;

    transition-delay:.30s;

}

.projects-home.show .project-card:nth-child(2){

    opacity:1;

    transform:none;

    transition-delay:.30s;

}

.projects-home.show .project-card:nth-child(3){

    opacity:1;

    transform:none;

    transition-delay:.42s;

}


.projects-all{

    transition:

        transform .35s,

        opacity .35s;

}

.projects-all:hover{

    transform:translateX(8px);

}

/*==============================================================
PROJECTS FOOTER
==============================================================*/

.projects-footer{

    margin-top:90px;

    text-align:center;

}

.projects-divider{

    width:100%;

    max-width:220px;

    height:1px;

    margin:0 auto 30px;

    background:rgba(198,155,88,.28);

}

.projects-footer p{

    margin:0;

    font-size:1.05rem;

    color:rgba(255,255,255,.60);

}

.projects-footer-link{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:18px;

    text-decoration:none;

    font-size:1.15rem;

    font-weight:600;

    color:var(--color-gold);

    transition:.35s ease;

}

.projects-footer-link span{

    transition:.35s ease;

}

.projects-footer-link:hover{

    color:#fff;

}

.projects-footer-link:hover span{

    transform:translateX(8px);

}