/*==================================================
WOOD FRAMING
==================================================*/

/*==========================================
CONFIGURACIÓN GENERAL
==========================================*/

.wf-intro,
.wf-benefits,
.wf-process,
.wf-myths,
.wf-gallery,
.wf-faq{

    overflow:hidden;

}

.wf-intro .section-title,
.wf-benefits .section-title,
.wf-process .section-title,
.wf-myths .section-title,
.wf-gallery .section-title,
.wf-faq .section-title{

    margin-bottom:80px;

}

/*==========================================
INTRODUCCIÓN
==========================================*/

.wf-intro{

    padding:140px 0;

}

.intro-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:90px;

    align-items:center;

}

.intro-content span{

    display:inline-block;

    margin-bottom:18px;

    color:var(--secondary);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.intro-content h2{

    margin-bottom:30px;

}

.intro-content p{

    margin-bottom:24px;

    font-size:1.06rem;

    line-height:1.9;

    color:#555;

}

.intro-image{

    position:relative;

}

.intro-image img{

    width:100%;

    display:block;

    border-radius:26px;

    box-shadow:0 35px 90px rgba(0,0,0,.16);

}

/*==========================================
BENEFICIOS
==========================================*/

.wf-benefits{

    padding:140px 0;

    background:#F8F9FB;

}

.benefits-grid{

    display:grid;

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

    gap:34px;

}

.benefit-card{

    position:relative;

    overflow:hidden;

    background:#fff;

    border-radius:24px;

    padding:46px;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:0 18px 45px rgba(0,0,0,.07);

    transition:.35s;

}

.benefit-card:hover{

    transform:translateY(-10px);

    box-shadow:0 28px 70px rgba(0,0,0,.12);

}

.benefit-card::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--secondary),
        #F4A261
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.benefit-card:hover::after{

    transform:scaleX(1);

}

.benefit-card i{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(226,106,44,.10);

    color:var(--secondary);

    font-size:1.8rem;

    margin-bottom:28px;

}

.benefit-card h3{

    margin-bottom:18px;

    color:var(--primary);

    font-size:1.55rem;

}

.benefit-card p{

    color:#666;

    line-height:1.85;

}

/*==================================================
PROCESO CONSTRUCTIVO
==================================================*/

.wf-process{

    padding:140px 0;

}

.process-list{

    display:flex;

    flex-direction:column;

    gap:120px;

}

.process-item{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:80px;

    align-items:center;

}

.process-item.reverse{

    grid-template-columns:.85fr 1.15fr;

}

.process-item.reverse .process-image{

    order:2;

}

.process-item.reverse .process-content{

    order:1;

}

.process-image{

    position:relative;

}

.process-image img{

    width:100%;

    display:block;

    border-radius:26px;

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

    transition:.45s;

}

.process-item:hover .process-image img{

    transform:scale(1.02);

}

.process-content{

    position:relative;

}

.process-content span{

    display:flex;

    align-items:center;

    justify-content:center;

    width:72px;

    height:72px;

    margin-bottom:30px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--secondary),
        #F49A63
    );

    color:#fff;

    font-size:1.45rem;

    font-weight:800;

    box-shadow:0 18px 35px rgba(226,106,44,.30);

}

.process-content h3{

    margin-bottom:22px;

    color:var(--primary);

    font-size:2rem;

    line-height:1.2;

}

.process-content p{

    color:#666;

    line-height:1.9;

    font-size:1.06rem;

}

.process-content::before{

    content:"";

    position:absolute;

    left:34px;

    top:-60px;

    bottom:-60px;

    width:2px;

    background:linear-gradient(
        transparent,
        rgba(226,106,44,.20),
        transparent
    );

}

.process-item:first-child .process-content::before{

    top:20px;

}

.process-item:last-child .process-content::before{

    bottom:20px;

}

.process-item.reverse .process-content::before{

    left:34px;

}

/*==================================================
MITOS Y REALIDADES
==================================================*/

.wf-myths{

    padding:140px 0;
    background:#F8F9FB;

}

.wf-myths .myths-grid{

    display:grid !important;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:36px;

    margin-top:70px;

}

.wf-myths .myth-card{

    background:#fff;

    border-radius:24px;

    padding:42px;

    position:relative;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

    border:1px solid #ECECEC;

    transition:.35s;

}

.wf-myths .myth-card:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.wf-myths .myth-card span{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    margin-bottom:22px;

    font-size:.75rem;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}

.wf-myths .myth-card h3{

    font-size:1.7rem;

    line-height:1.25;

    margin-bottom:18px;

    color:var(--primary);

}

.wf-myths .myth-card p{

    font-size:1.05rem;

    line-height:1.9;

    color:#666;

}

.wf-myths .myth{

    border-left:6px solid #D94A38;

}

.wf-myths .myth span{

    background:#FDE8E5;

    color:#D94A38;

}

.wf-myths .reality{

    border-left:6px solid var(--secondary);

}

.wf-myths .reality span{

    background:rgba(226,106,44,.12);

    color:var(--secondary);

}

@media(max-width:992px){

    .wf-myths .myths-grid{

        grid-template-columns:1fr;

    }

}

/*==================================================
OBRAS REALIZADAS
==================================================*/

.wf-gallery{

    padding:140px 0;

}

.gallery-projects{

    display:flex;

    flex-direction:column;

    gap:90px;

}

.project{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:60px;

    align-items:center;

}

.project.reverse{

    grid-template-columns:.85fr 1.15fr;

}

.project.reverse .project-image{

    order:2;

}

.project.reverse .project-info{

    order:1;

}

.project-image img{

    width:100%;

    display:block;

    border-radius:26px;

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

}

.project-info span{

    display:inline-block;

    margin-bottom:18px;

    color:var(--secondary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.project-info h3{

    margin-bottom:22px;

    color:var(--primary);

    font-size:2rem;

}

.project-info p{

    margin-bottom:26px;

    color:#666;

    line-height:1.85;

}

.project-data{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.project-data div{

    background:#F5F7FA;

    padding:14px 20px;

    border-radius:999px;

    font-size:.92rem;

    font-weight:600;

}

/*==================================================
FAQ
==================================================*/

.wf-faq{

    padding:140px 0;

    background:#F8F9FB;

}

.wf-faq .faq-list{

    max-width:950px;

    margin:0 auto;

}

.wf-faq .faq-item{

    background:#fff;

    border-radius:18px;

    margin-bottom:18px;

    box-shadow:0 12px 35px rgba(0,0,0,.06);

    overflow:hidden;

}

.wf-faq summary{

    list-style:none;

    cursor:pointer;

    padding:28px 34px;

    font-size:1.15rem;

    font-weight:700;

    color:var(--primary);

    position:relative;

}

.wf-faq summary::-webkit-details-marker{

    display:none;

}

.wf-faq summary::after{

    content:"+";

    position:absolute;

    right:34px;

    top:50%;

    transform:translateY(-50%);

    font-size:1.8rem;

    color:var(--secondary);

    transition:.3s;

}

.wf-faq details[open] summary::after{

    transform:translateY(-50%) rotate(45deg);

}

.wf-faq .faq-item p{

    padding:0 34px 30px;

    color:#666;

    line-height:1.9;

}

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

.wf-cta{

    padding:140px 0;

    background:linear-gradient(
        135deg,
        #12355A 0%,
        #0D2843 100%
    );

    text-align:center;

    color:#fff;

}

.wf-cta .section-kicker{

    display:inline-block;

    margin-bottom:20px;

    color:var(--secondary);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.wf-cta h2{

    max-width:900px;

    margin:0 auto 28px;

    color:#fff;

}

.wf-cta p{

    max-width:760px;

    margin:0 auto 45px;

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

    font-size:1.08rem;

    line-height:1.9;

}

.wf-cta .hero-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

}

.wf-cta .btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:250px;

    height:58px;

    padding:0 34px;

    border:2px solid rgba(255,255,255,.30);

    border-radius:999px;

    background:transparent;

    color:#fff;

    font-weight:700;

    transition:.35s;

}

.wf-cta .btn-secondary:hover{

    background:#fff;

    color:var(--primary);

    border-color:#fff;

    transform:translateY(-3px);

}

.wf-cta .btn-secondary i{

    margin-right:10px;

    font-size:1.15rem;

}

@media(max-width:768px){

    .wf-cta{

        padding:100px 0;

    }

    .wf-cta .hero-buttons{

        flex-direction:column;

    }

    .wf-cta .hero-buttons a{

        width:100%;

        text-align:center;

    }

}

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

@media(max-width:1100px){

    .benefits-grid{

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

    }

}

@media(max-width:992px){

    .wf-intro,
    .wf-benefits,
    .wf-process,
    .wf-myths,
    .wf-gallery,
    .wf-faq{

        padding:100px 0;

    }

    .intro-grid,
    .process-item,
    .process-item.reverse,
    .project,
    .project.reverse{

        grid-template-columns:1fr;

        gap:45px;

    }

    .intro-image{

        order:-1;

    }

    .process-item.reverse .process-image,
    .process-item.reverse .process-content,
    .project.reverse .project-image,
    .project.reverse .project-info{

        order:initial;

    }

    .myths-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .benefits-grid{

        grid-template-columns:1fr;

    }

    .benefit-card,
    .myth-card{

        padding:34px;

    }

    .process-list{

        gap:80px;

    }

    .project{

        gap:35px;

    }

    .project-info h3{

        font-size:1.7rem;

    }

    .process-content h3{

        font-size:1.7rem;

    }

    .wf-faq summary{

        padding:24px;

        padding-right:60px;

        font-size:1.05rem;

    }

    .wf-faq .faq-item p{

        padding:0 24px 24px;

    }

}