/* ==========================
   VARIABLES
========================== */

body {
    margin: 0px;
}

:root{

    --color-white:#FFFFFF;
    --color-primary:#0078AE;

    --hero-height:530px;

    --container:1920px;

    --transition:.3s ease;
}

.head-titulares{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.titular-main{
    margin-top: 200px;
    font-family: kufam;
    font-size: 150px;
    font-weight: 700;
    color: #002C42;
}
@media (max-width:768px){
    .titular-main{
    margin-top: 150px;
    font-size: 50px;
    }   
}

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

.trip-hero{

    position:relative;

    width:100%;

    height:var(--hero-height);

    overflow:hidden;

    background-image:
    url("../assets/img/esqui/fondo-esqui.webp");

    background-position:center center;

    background-size:cover;

    background-repeat:no-repeat;
}

/* ligera capa superior */

.trip-hero__overlay{

    position:absolute;

    inset:0;

   
    pointer-events:none;
}

/* ==========================
   CONTENIDO
========================== */

.trip-hero__container{

    position:relative;

    height:100%;

    max-width:var(--container);

    margin:0 auto;
}

/* ==========================
   BOTÓN ATRÁS
========================== */

.trip-hero__back{

    position:absolute;

    left:92px;

    top:228px;

    width:30px;
    height:30px;

    border-radius:50%;

    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--color-primary);

    text-decoration:none;

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

    transition:var(--transition);
}

.trip-hero__back div {
    width:30px;
    height:30px;
}

.trip-hero__back:hover{

    
    background:#B4EAFF;
    color: #003854;
}

.trip-hero__back img{

    width:32px;
    height:32px;
}
/*==================================================
SECCIÓN INFORMACIÓN
==================================================*/

.fin-info{
    
    MARGIN-TOP: -24PX;
    background:#F4F4F4;

    padding:50px 0 110px;

}

.fin-info .container{

    width:min(1280px,92%);
    margin:auto;

}


/*==============================
TÍTULO
==============================*/

.fin-info__header{

    text-align:center;
    margin-bottom:50px;

}

.fin-info__header h1{
color: #00C3FF;
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
/* T1-50 */
font-family: Kufam;
font-size: 50px;
font-style: normal;
font-weight: 900;
line-height: normal;
text-transform: uppercase;

}


/*==============================
LAYOUT
==============================*/

.fin-info__content{

    display:grid;

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

    gap:48px;

    align-items:start;

}


/*==============================
DESTINOS
==============================*/

.destinos-galeria{

    display:flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.destinos{

    display:flex;
    justify-content: center;
    flex-direction: row;
    gap:18px;
    height: 460px;
    

}

.destino-card{
    font-family: kufam;
    position:relative;
    overflow:hidden;
    border-radius:10px;
    height:100%;

}

a.destino-card.destino-card--link{
    display:block;
    text-decoration:none;
    color:inherit;
}

a.destino-card.destino-card--link:hover{
    opacity:.95;
}

.destino-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}

.destino-card h2{

    position:absolute;

    left:20px;
    bottom:10px;

    color: var(--Color, #003854);
    font-family: Kufam;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 25px; /* 104.167% */
}

.destinos .container{
    display: flex;
    flex-direction: column;
    font-family: kufam;
    width:min(1280px,92%);
    margin:auto;
}
.container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.destinos__header{

    margin-bottom:70px;
    text-align:center;

}

.destinos__header h2{

color: var(--Color-2, #003854);
/* titular-secciones */
font-family: var(--primaria, Kufam);
font-size: 60px;
font-style: normal;
font-weight: 900;
line-height: 100%; /* 60px */
text-transform: uppercase;
}

.destinos-grid{
    width: 90%;
    margin-bottom: 40px;
    display:grid;

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

    gap:32px;

}

.destino-slider{

    position:relative;

    aspect-ratio:0.93;

}

.slider-image{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}
.slider-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:46px;
    height:46px;

    border:none;

    background:#fff;

    border-radius:50%;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.25s;

    z-index:5;

}

.slider-btn:hover{

    transform:translateY(-50%) scale(1.08);

}

.prev{

    left:12px;

}

.next{

    right:12px;

}

.slider-btn img{

    width:45px;
    display:block;
    height:auto;
}
.destino-info{

    gap: 10px;
    position:absolute;

    bottom:65px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

}

.dias{
    text-align: center;
    width: 100px;
    background:#FF5F6A;
    color:#fff;
    font-weight:700;
    padding:10px;
    border-radius:10px;
    margin-bottom: -5px;

}

.precio{
    padding:10px;
    border-radius:10px;
    text-align: center;
    width: 100px;
    background:#7756F7;
    color:#fff;
    font-weight:700;
    margin-bottom: -5px;
   
}
@media(max-width:1024px){

.destinos-grid{

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

}

}

@media(max-width:768px){

.destinos{

    padding:60px 0;

}

.destinos__header h2{

    font-size:3.6rem;

}

.destinos-grid{

    gap:20px;

}

.slider-btn{

    width:38px;
    height:38px;

}

}




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

.beneficios{
    padding: 0 20px;
    list-style:none;
    color: var(--4, #003854);
    /* T4-FULL */
    font-family: Kufam;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 100% */
    display: flex;
    flex-direction: column;
    align-items: stretch;

}

.beneficios li{

    display:flex;

    align-items:center;

    gap:16px;

    padding:10px 0;

    border-bottom:1px solid #0D6D96;

}

.beneficios img{

    width:22px;

}

.beneficios span{

    font-size:1rem;

    font-weight:700;

    color:var(--color-dark);

}
@media(max-width:768px){

.fin-info{

    padding:50px 0;

}

.fin-info__header{

    margin-bottom:45px;

}

.fin-info__header h1{

    font-size:2.5rem;

    line-height:1.18;

}

.destinos{

    gap:14px;

}

.destino-card{

    height:260px;

}

.destino-card h2{

    font-size:1.8rem;

}

.beneficios span{

    font-size:1.6rem;

}

.fin-info__card{

    padding:28px;

}

.card-logo{

    width:100px;

}

.fin-info__card h3{

    font-family: kufam;
    color: var(--4, #003854);
    /* T2 - 30 */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

}

.card-list p{

    font-size:1.6rem;

}

}


/*==============================
TARJETA
==============================*/

.fin-info__card{

    background:#AFE7FF;

    border-radius:10px;

    padding:30px;

    height: 70%;
}

.card-logo{

    width:120px;

    display:block;

    margin:0 auto 34px;

}

.fin-info__card h3{

     font-family: kufam;
    color: var(--4, #003854);
    /* T2 - 30 */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

}


.card-list{
    display: flex;
    flex-direction: column;
    width: 100%;
    list-style:none;
    padding: 0 0 10px;
}

.card-list li{
    height: fit-content;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap:18px;


}

.card-list img{
    margin-top:17px;
    width:24px;
    height: 24px;
    flex-shrink:0;

}

.card-list p{
   display: flex;
   flex-direction: column;
    color: var(--4, #003854);
    font-family: var(--primaria, Kufam);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;

}


/* ==========================
   TEXTO
========================== */

.trip-hero__content{

    position:absolute;

    left:82px;

    bottom:28px;

    display:flex;
    flex-direction:column;
}

.trip-hero__label{

    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    /* T3-REGULAR */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

.trip-hero__title{

    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    /* T3-REGULAR */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
 
}



@media (max-width:1024px){

    .trip-hero{

        height:420px;
    }

    .trip-hero__back{

        left:40px;
        top:180px;
    }
    .trip-hero__content{

        left:40px;
        bottom:25px;
    }

    .trip-hero__label{

        font-size:24px;
    }

    .trip-hero__title{

        font-size:48px;
    }

}

@media (max-width:768px){

    .trip-hero{

        height:260px;

        background-position:center;
    }

    .trip-hero__back{

        width:46px;
        height:46px;

        left:16px;
        top:110px;
    }

    .trip-hero__back svg{

        width:22px;
        height:22px;
    }

    .trip-hero__content{

        left:16px;
        bottom:16px;
    }

    .trip-hero__label{

        font-size:12px;

        margin-bottom:4px;
    }

    .trip-hero__title{

        font-size:22px;
    }

}


/*contenido..............................*/


:root{

    --color-primary:#22B8EA;
    --color-primary-dark:#005B87;

    --color-date:#FF6368;

    --color-text:#FFFFFF;
    --color-dark:#003A57;

    --radius:10px;

    --container:(1490px);

    --shadow:
    0 6px 30px rgba(0,0,0,.08);
}
.content-main{
    position: relative;
    padding: 24px 0 0px;
    background:  linear-gradient(0deg, #B4EAFF 0%, #007DAE 100%);

}
.trip-overview{

    position:relative;

    padding:24px 15px;


}

.trip-overview__container{

    width:min(100% - 50px, var(--container));

    margin-inline:auto;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.trip-overview__title{

       color: #FFF;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
        /* T1-50 */
        font-family: Kufam;
        font-size: 50px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-transform: uppercase;
}

.trip-overview__title span{

    display:block;
}
.trip-overview__top{

    margin-top:20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;
}

.trip-overview__destination{

    color: var(--12, #EEEEF0);
    /* titular-secciones */
    font-family: var(--primaria, Kufam);
    font-size: 50px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 60px */
    text-transform: uppercase;
}

.trip-overview__cta{

    min-width:410px;

    height:60px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:var(--radius);

    background:var(--color-primary);

    color:var(--color-dark);

    text-decoration:none;

    font-size:2rem;

    font-weight:900;

    transition:.25s;
    color: var(--4, #003854);
    /* T3-BOLD */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px; /* 92% */
    text-transform: uppercase;
}

.trip-overview__cta:hover{
    background:#B4EAFF;
    color: #003854;
}
.trip-overview__cards{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-family: Kufam;
    margin-top:20px;
    width: 94%;
    gap:20px;
}