/* Start custom CSS for html, class: .elementor-element-80bf6eb *//* ==========================
   HERO
========================== */

.about-hero{
    min-height:70vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:120px 8%;

    background:

    url('http://festival-de-la-j.local/wp-content/uploads/2026/06/Fondo.png')
    center/cover no-repeat;
}

.about-container{
    max-width:900px;
    padding:50px;

    background:rgba(255,255,255,.08);
    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.15);
    border-radius:30px;
}

.about-badge{
    display:inline-block;
    padding:10px 20px;
    border-radius:50px;

    background:rgba(255,179,0,.15);
    border:1px solid rgba(255,179,0,.4);

    color:#FFB300;
    font-weight:700;
}

.about-hero h1{
    font-size:clamp(3rem,7vw,6rem);
    color:#fff;
    margin:25px 0;
}

.about-hero h1 span{
    color:#FFB300;
}

.about-hero p{
    color:#f1f1f1;
    font-size:1.2rem;
    line-height:1.8;
}

/* ==========================
   SECCIONES
========================== */

.about-section,
.narrative-section,
.objectives-section{
    padding:120px 8%;

    background:linear-gradient(
        135deg,
        #0077b6 35%,
        #00b4d8 70%
    );
}

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

.about-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:60px;
    align-items:center;
}

/* ==========================
   TARJETAS
========================== */

.about-card,
.narrative-content,
.objective-card{
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.15);
    border-radius:30px;
}

.about-card{
    padding:50px;
}

.about-card h2{
    color:#fff;
    font-size:2.5rem;
    margin-bottom:30px;
}

.about-card p{
    color:#fff;
    line-height:1.9;
    margin-bottom:20px;
}

.about-image img{
    width:100%;
    max-width:450px;
    display:block;
    margin:auto;
}

/* ==========================
   TITULOS
========================== */

.section-title{
    text-align:center;
    margin-bottom:70px;
}

.section-title span{
    color:#FFB300;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
}

.section-title h2{
    color:white;
    font-size:clamp(2.5rem,5vw,4rem);
    margin-top:15px;
}

/* ==========================
   NARRATIVA
========================== */

.narrative-content{
    max-width:900px;
    margin:auto;
    padding:60px;
}

.narrative-content p{
    color:#fff;
    line-height:1.9;
    margin-bottom:25px;
    font-size:1.1rem;
}

/* ==========================
   OBJETIVOS
========================== */

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

.objective-card{
    padding:40px;
    transition:.4s;
}

.objective-card:hover{
    transform:translateY(-10px);
    background:rgba(255,255,255,.18);
}

.number{
    font-size:3rem;
    color:#FFB300;
    font-weight:800;
}

.objective-card h3{
    color:#fff;
    margin:20px 0;
}

.objective-card p{
    color:#fff;
    line-height:1.8;
}

.objective-message{
    margin-top:60px;
    text-align:center;
}

.objective-message p{
    color:#fff;
    font-size:1.3rem;
    font-style:italic;
    max-width:900px;
    margin:auto;
}

/* ==========================
   DIVISIONES
========================== */

.about-hero,
.about-section,
.narrative-section{
    border-bottom:2px solid rgba(255,179,0,.4);
}

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

@media(max-width:900px){

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

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

    .about-card,
    .narrative-content,
    .about-container{
        padding:35px;
    }

    .about-hero{
        min-height:auto;
        padding:100px 8%;
    }
}/* End custom CSS */