/* ==========================================================
   ROOMS.CSS
   Estils específics de la landing ROOMS 2026
========================================================== */
section{

    scroll-margin-top:110px;

}

/* ==========================================================
   NAVBAR
========================================================== */

.navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(12px);

    border-bottom:1px solid rgba(0,0,0,.08);

}

.navbar__wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:80px;

}

.navbar__logo img{

    height:44px;

    width:auto;

}

.navbar__menu{

    display:flex;

    gap:2rem;

    align-items:center;

}

.navbar__menu a{

    position:relative;

    font-weight:600;

    color:var(--color-text);

}

.navbar__menu a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;

    height:2px;

    background:var(--color-primary);

    transition:.3s;

}

.navbar__menu a:hover::after{

    width:100%;

}

.navbar__button{

    padding:.85rem 1.5rem;

}

@media (max-width:900px){

    .navbar__menu{

        display:none;

    }

    .navbar__wrapper{

        height:56px;

    }
    
      .navbar__logo{

        width:clamp(140px, 40vw, 220px);

    }

    .navbar__logo img{

        width:100%;
        height:auto;

    }
    
       .navbar__button{

        padding:.55rem 1rem;
        font-size:.9rem;

    }

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    background:linear-gradient(
        135deg,
        #ffffff 0%,
        #f6fbf7 100%
    );

}

.hero__wrapper{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:5rem;

    align-items:center;

}

.hero__eyebrow{

    display:inline-block;

    padding:.5rem 1rem;

    margin-bottom:1.5rem;

    border-radius:999px;

    background:rgba(2,131,48,.1);

    color:var(--color-primary);

    font-size:.85rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.hero h1{

    margin-bottom:1rem;

}

.hero__subtitle{

    font-size:1.5rem;

    font-weight:600;

    color:var(--color-primary);

    margin-bottom:2rem;

}
/* ==========================================================
   HERO HIGHLIGHTS
========================================================== */

.hero__highlights{

    display:flex;

    gap:1rem;

    margin:2rem 0 2.5rem;

    flex-wrap:wrap;

}

.hero__highlight{

    padding:1rem 1.5rem;

    background:#fff;

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

    border-left:5px solid var(--color-primary);

    border-radius:14px;

    box-shadow:var(--shadow);

}

.hero__highlight-label{

    display:block;

    margin-bottom:.35rem;

    font-size:.75rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--color-primary);

}

.hero__highlight-value{

    font-size:1.15rem;

    font-weight:700;

    color:var(--color-text);

}

@media (max-width:768px){

    .hero__highlights{

        flex-direction:column;

    }

}


.hero__image img{

    border-radius:24px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.12);

}



/* ==========================================================
   ABOUT
========================================================== */

.about p{
margin:40px 0;
max-width:960px;
}

.abstract-sumissions {
   max-width:960px;
   padding:10px 20px;
   background-color:#e8f3eb;
   border:1px solid #028330;
   border-left-width:4px;
}

.abstract-sumissions p{
    margin:5px 0;
}

.abstract-sumissions a{
    font-weight:600;
    color:#028330;
}

.about h3{
    margin: 5px 0 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #028330;
    color: #028330;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
}
/* ==========================================================
   PROGRAMME
========================================================== */

.programme-placeholder{

    margin-top:3rem;

    border:2px dashed #d7d7d7;

    border-radius:18px;

    overflow:hidden;

}

.programme-placeholder img{

    display:block;

}

.programme-note{

    margin-top:2rem;

    text-align:center;

    font-style:italic;

}

.programme{
   
    font-family:inherit;
}

.programme h3{
    margin:40px 0 15px;
    padding-bottom:8px;
    border-bottom:2px solid #028330;
    color:#028330;
    font-size:1.5rem;
    font-weight:700;
    text-transform:uppercase;
}

.programme-item{
    display:grid;
    grid-template-columns:160px 1fr;
    gap:20px;
    padding:12px 0;
    border-bottom:1px solid #ececec;
}

.programme-time{
    font-weight:700;
    white-space:nowrap;
}

.programme-title{
    line-height:1.5;
}

@media (max-width:640px){
    .programme-item{
        grid-template-columns:1fr;
        gap:4px;
    }

    .programme-time{
        color:var(--color-primary);
    }
}

/* ==========================================================
   FEES
========================================================== */

.fees__grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.fee{

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:18px;

    padding:2.5rem;

    text-align:center;

    transition:.3s;

    box-shadow:
        0 10px 30px rgba(0,0,0,.05);

}

.fee:hover{

    transform:translateY(-8px);

    box-shadow:
        0 25px 50px rgba(0,0,0,.12);

}

.fee h3{

    margin-bottom:1rem;

}

.price{

    margin:1.5rem 0;

    font-size:3rem;

    font-weight:700;

    color:var(--color-primary);

}

.fee p{

    margin-bottom:0;

}


/* ==========================================================
Destination
========================================================== */

.destination h3{
margin-bottom:20px;
}
.where-to-stay{
margin-top:80px;
}

.destination .grid{
margin-top:80px;
}

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

.cta{

    margin-top:4rem;

}

/* ==========================================================
  Venue
========================================================== */


.venue li{

    margin:20px 0;
    color: var(--color-text-light);

}

.venue .btn{
margin-top:20px;
}



/* ==========================================================
   ORGANISERS
========================================================== */

.organisers{

    text-align:center;

    background:#fff;
     padding:5rem 0;
    border-top:1px solid var(--color-border);

}

.organisers__logos{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:5rem;

    margin-top:3rem;

    flex-wrap:wrap;

}

.organisers__logos a{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:2rem;

    border-radius:16px;

    background:#fff;

    transition:var(--transition);

}

.organisers__logos a:hover{

    transform:translateY(-4px);   

}

.organisers__logos img{

    max-width:220px;

    max-height:80px;

    width:auto;

    height:auto;

}

@media (max-width:768px){

    .organisers__logos{

        gap:2rem;

    }

    .organisers__logos a{

        width:100%;

    }

}


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

footer{

    background:#111;

    color:#fff;

}

footer p{

    color:#fff;

}



/* ==========================================================
   ANIMACIONS
========================================================== */

.btn{

    box-shadow:
        0 12px 30px rgba(2,131,48,.25);

}

.btn:hover{

    box-shadow:
        0 18px 40px rgba(2,131,48,.35);

}



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

@media (max-width:992px){

    .hero{

        min-height:auto;

        padding:5rem 0;

    }

    .hero__wrapper{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .hero__content{

        order:2;

        text-align:center;

    }

    .hero__image{

        order:1;

    }

    .hero__info{

        display:inline-block;

        text-align:left;

    }

    .fees__grid{

        grid-template-columns:1fr;

    }

}



@media (max-width:768px){

    .hero h1{

        font-size:3rem;

    }

    .hero__subtitle{

        font-size:1.25rem;

    }

    .fee{

        padding:2rem;

    }

    .price{

        font-size:2.5rem;

    }

}