/*==================================================
PROYECTO | DETALLE PUBLICO
==================================================*/

:root{
    --project-accent:#1D4E89;
    --project-accent-soft:#EAF2FA;
    --project-accent-hover:#1CA79A;
}

.project-about,
.project-info,
.project-detail,
.project-cta{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    padding:104px 0;
}

.project-about .container,
.project-info .container,
.project-detail .container,
.project-cta .container{
    position:relative;
    z-index:1;
}

/*==================================================
HERO
==================================================*/

.project-hero{
    position:relative;
    min-height:75vh;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    text-align:center;
    overflow:hidden;
    isolation:isolate;
}

.project-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(circle at 16% 18%, rgba(127,164,200,.22), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(255,255,255,.12), transparent 30%);
}

.project-hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(5,12,24,.30));
}

.project-hero-content{
    position:relative;
    z-index:2;
    max-width:920px;
    margin:auto;
}

.project-badge{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:0 14px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.20);
    color:#ffffff;
    font-size:var(--text-xs);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:24px;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.project-hero h1{
    color:#ffffff;
    font-size:var(--text-hero);
    line-height:var(--leading-tight);
    margin-bottom:24px;
}

.project-hero p{
    max-width:760px;
    margin:0 auto 34px;
    color:rgba(255,255,255,.82);
    font-size:var(--text-lg);
    line-height:1.65;
}

.cta-buttons{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
}

.btn-main,
.btn-ct{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 24px;
    border-radius:8px;
    text-decoration:none;
    font-weight:800;
    transition:background .24s ease, border-color .24s ease, color .24s ease, transform .24s ease, box-shadow .24s ease;
}

.btn-main{
    background:var(--primary);
    border:1px solid var(--primary);
    color:#ffffff;
    box-shadow:0 16px 32px rgba(18,60,105,.20);
}

.btn-main:hover{
    background:var(--primary-dark);
    border-color:var(--primary-dark);
    color:#ffffff;
    transform:translateY(-2px);
}

.project-hero .cta-buttons .btn-main + .btn-main{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.52);
    box-shadow:none;
}

.project-hero .cta-buttons .btn-main + .btn-main:hover{
    background:#ffffff;
    border-color:#ffffff;
    color:var(--primary-dark);
}

/*==================================================
ACERCA / INFO
==================================================*/

.project-about{
    background:
        linear-gradient(
            180deg,
            #f7fbff 0%,
            #ffffff 48%,
            #f2f7fb 100%
        );
}

.project-about::before,
.project-info::before,
.project-detail::before,
.project-cta::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        radial-gradient(circle at 12% 18%, rgba(29,78,137,.11), transparent 32%),
        radial-gradient(circle at 88% 14%, rgba(18,60,105,.08), transparent 30%);
}

.section-title{
    text-align:center;
    max-width:780px;
    margin:0 auto 56px;
}

.section-title h1,
.section-title h2{
    color:var(--primary-dark);
    font-size:var(--text-2xl);
    line-height:var(--leading-tight);
    margin-bottom:16px;
}

.section-title p{
    max-width:720px;
    margin:0 auto;
    color:var(--dark-soft);
    font-size:var(--text-md);
    line-height:1.7;
}

.project-info{
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f2f7fb 52%,
            var(--project-accent-soft) 100%
        );
}

.project-info-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.info-card{
    position:relative;
    overflow:hidden;
    background:rgba(255,255,255,.95);
    border:1px solid rgba(18,60,105,.10);
    padding:34px 30px;
    border-radius:16px;
    text-align:center;
    box-shadow:0 22px 48px rgba(18,60,105,.10);
    transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.info-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg,var(--project-accent),rgba(18,60,105,.72));
}

.info-card:hover{
    transform:translateY(-7px);
    border-color:rgba(28,167,154,.30);
    box-shadow:0 30px 62px rgba(18,60,105,.16);
}

.info-card h3{
    color:var(--primary);
    margin-bottom:12px;
    font-size:var(--text-sm);
    text-transform:uppercase;
    letter-spacing:.08em;
}

.info-card p{
    color:var(--primary-dark);
    font-size:var(--text-md);
    font-weight:800;
    margin:0;
}

/*==================================================
DETALLE
==================================================*/

.project-detail{
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbfd 48%,
            #ffffff 100%
        );
}

.project-grid{
    display:grid;
    grid-template-columns:1.2fr .95fr;
    gap:68px;
    align-items:center;
}

.project-text{
    color:var(--dark-soft);
    font-size:var(--text-md);
    line-height:1.85;
}

.project-text p{
    margin-bottom:22px;
}

.project-text h2,
.project-text h3,
.project-text h4{
    color:var(--primary-dark);
    margin-bottom:18px;
}

.project-text ul{
    margin-left:20px;
}

.project-text li{
    margin-bottom:12px;
}

.project-image-wrapper{
    width:100%;
    aspect-ratio:4/3;
    overflow:hidden;
    border:1px solid rgba(18,60,105,.10);
    border-radius:16px;
    box-shadow:0 28px 72px rgba(18,60,105,.16);
    background:#e5e7eb;
}

.project-image{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    transition:transform .45s ease;
}

.project-image-wrapper:hover .project-image{
    transform:scale(1.04);
}

/*==================================================
CTA
==================================================*/

.project-cta{
    background:
        linear-gradient(
            135deg,
            #f7fbff 0%,
            #eef7fb 52%,
            var(--project-accent-soft) 100%
        );
    color:var(--dark-soft);
}

.cta-box{
    max-width:850px;
    margin:auto;
    text-align:center;
}

.cta-box h2{
    color:var(--primary-dark);
    font-size:var(--text-2xl);
    line-height:var(--leading-tight);
    margin-bottom:18px;
}

.cta-box p{
    max-width:680px;
    margin:0 auto 30px;
    color:var(--dark-soft);
    font-size:var(--text-md);
    line-height:1.75;
}

.btn-ct{
    background:var(--primary);
    border:1px solid var(--primary);
    color:#ffffff;
    box-shadow:0 16px 32px rgba(18,60,105,.16);
}

.btn-ct:hover{
    background:var(--primary-dark);
    border-color:var(--primary-dark);
    color:#ffffff;
    transform:translateY(-2px);
}

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

@media(max-width:992px){
    .project-info-grid,
    .project-grid{
        grid-template-columns:1fr;
    }

    .project-grid{
        gap:44px;
    }
}

@media(max-width:768px){
    .project-hero{
        min-height:auto;
        padding:86px 0;
    }

    .project-hero h1{
        font-size:var(--text-hero);
        line-height:1.14;
    }

    .project-hero p,
    .project-text,
    .cta-box p{
        font-size:var(--text-base);
    }

    .project-about,
    .project-info,
    .project-detail,
    .project-cta{
        padding:72px 0;
    }

    .cta-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .btn-main,
    .btn-ct{
        width:100%;
    }
}