/* =====================================================
   PARA ORGANIZADORES
===================================================== */

.organizers-page{

    background:var(--color-bg);

}


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

.organizers-hero{

    padding:5rem 0 6rem;

}

.organizers-hero__inner{

    display:grid;

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

    gap:5rem;

    align-items:center;

}

.organizers-hero__content{

    max-width:650px;

}

.organizers-eyebrow{

    display:inline-block;

    margin-bottom:1rem;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.18em;

    color:var(--color-primary);

}

.organizers-hero h1{

    margin-bottom:1.5rem;

    font-size:3.5rem;

    line-height:1.1;

}

.organizers-hero p{

    max-width:600px;

    margin-bottom:2rem;

    font-size:1.1rem;

    color:var(--color-text-light);

}

.organizers-hero__image img{

    width:100%;

    height:560px;

    object-fit:cover;

    border-radius:24px;

    box-shadow:var(--shadow);

}


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

.organizers-benefits{

    padding:6rem 0;

    background:#fff;

}

.organizers-benefits .section-heading{

    max-width:900px;

    margin:0 auto 3.5rem;

    text-align:center;

}

.organizers-benefits .section-heading h2{

    margin:0;

}

.organizers-benefits__grid{

    display:grid;

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

    gap:2rem;

}

.organizers-benefits__grid article{

    padding:2rem;

    border:1px solid var(--color-border);

    border-radius:20px;

    background:var(--color-bg);

}

.organizers-benefits__grid article > span{

    display:block;

    margin-bottom:1.5rem;

    font-family:var(--font-heading);

    font-size:2rem;

    color:var(--color-secondary);

}

.organizers-benefits__grid h3{

    margin-bottom:.75rem;

    color:var(--color-primary);

}

.organizers-benefits__grid p{

    margin:0;

    color:var(--color-text-light);

}


/* =====================================================
   CÓMO FUNCIONA
===================================================== */

.organizers-how{

    padding:6rem 0;

}

.organizers-how .section-heading{

    max-width:900px;

    margin-bottom:3.5rem;

}

.organizers-how .section-heading h2{

    margin:0;

}

.organizers-steps{

    display:grid;

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

    gap:4rem;

}

.organizers-steps article{

    position:relative;

}

.organizers-steps strong{

    display:block;

    margin-bottom:1rem;

    font-family:var(--font-heading);

    font-size:2.5rem;

    color:var(--color-secondary);

}

.organizers-steps h3{

    margin-bottom:.75rem;

    color:var(--color-primary);

}

.organizers-steps p{

    margin:0;

    color:var(--color-text-light);

}


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

.organizers-cta{

    padding:2rem 0 6rem;

}

.organizers-cta__box{

    max-width:1000px;

    margin:0 auto;

    padding:4rem;

    text-align:center;

    background:#EEF5F1;

    border-radius:24px;

}

.organizers-cta__box h2{

    margin-bottom:1rem;

    color:var(--color-primary);

}

.organizers-cta__box p{

    max-width:650px;

    margin:0 auto 2rem;

    color:var(--color-text-light);

}


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

@media(max-width:900px){

    .organizers-hero__inner{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .organizers-hero__image{

        order:-1;

    }

    .organizers-hero__image img{

        height:400px;

    }

    .organizers-benefits__grid,
    .organizers-steps{

        grid-template-columns:1fr;

        gap:1.5rem;

    }

}

@media(max-width:600px){

    .organizers-hero{

        padding:3rem 0 4rem;

    }

    .organizers-hero h1{

        font-size:2.6rem;

    }

    .organizers-hero p{

        font-size:1rem;

    }

    .organizers-hero__image img{

        height:320px;

    }

    .organizers-cta__box{

        padding:3rem 1.5rem;

    }

}