:root {
    --color_principal: #888b8c;
    --color_fondo_1: #006791;
    --color_contraste: #81A9AD;
    --color_footer: #D6DFE2;
    --color_overlay: rgba(50, 50, 50, 0.75);
	--borde-redondeado: 8px;
    
}
.nav-left:hover .nav-right:hover {
    color: #B4EAFF;

}

a.btn-primary {
	 display: flex;
	 padding: 12px 25px;
	 justify-content: center;
	 align-items: center;
	 flex-shrink: 0;
	 border-radius: var(--borde-redondeado);
	 background: var( --color_fondo_1);
	color: #FFF;
	font-family: Kufam;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	text-transform: uppercase;		
	text-decoration: none; 
}

a.btn-primary:hover{
	 background: #00A8E0;
	 color: #fff;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Kufam',sans-serif;
overflow-x:hidden;
}


.home-slider{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
}

.slider-track{
    position:relative;
    width:100%;
    height:100%;
}

.slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:.6s ease;
    

	
}

.slide.active{
    opacity:1;
    visibility:visible;
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.slide-content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:#003854;
    max-width:600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:15px;
    
	p.texto-banner {
		 font-size: 22px;
		 font-weight: 400;
		color: #000;
		text-align: center;
		font-family: var(--primaria, Kufam);
		font-size: 20px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;		 
	}    
	a.btn-primary {
		 display: flex;
		 padding: 12px 25px;
		 justify-content: center;
		 align-items: center;
		 flex-shrink: 0;
		 border-radius: var(--borde-redondeado);
		 background: var(--color_fondo_1);
		color: #FFF;
		font-family: Kufam;
		font-size: 20px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
		text-transform: uppercase;		
	   text-decoration: none; 
	}
	a.btn-primary:hover{
		 background: #00A8E0;
		 color: #fff;
	}
 
}

.slide-left{
    left:28%;
    transform:translateY(-50%);
    text-align:left;
}

.slider-prev,
.slider-next{

    position:absolute;
    top:50%;

    transform:translateY(-50%);

    width:42px;
    height:42px;

    border:none;
    border-radius:50%;

    background:#003854;
    color:white;

    cursor:pointer;
    z-index:10;
}

.slider-prev{
    left:40px;
}

.slider-next{
    right:40px;
}

.slider-dots{

    position:absolute;

    bottom:40px;
    left:50%;

    transform:translateX(-50%);

    display:flex;
    gap:12px;
}

.dot{

    width:12px;
    height:12px;

    border-radius:50%;
    border:none;

    background:white;
    opacity:.4;

    cursor:pointer;
}

.dot.active{
    opacity:1;
}



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

.hero{
position:relative;
height:1080px;
overflow:hidden;
}

.hero-bg{
position:absolute;
inset:0;

width:100%;
height:100%;

object-fit:cover;
}

.hero-overlay{
position:absolute;
inset:0;

background:
linear-gradient(
180deg,
rgba(255,255,255,.08) 0%,
rgba(0,0,0,.05) 100%
);
}

.hero-content{
position:absolute;
top:50%;
left:50%;

transform:translate(-50%,-50%);

display:flex;
flex-direction:column;
align-items:center;

gap:20px;

width:462px;
}

.hero-content h1{
	font-size:35px;
	font-weight:900;
	color:#003854;
	text-transform:uppercase;
	text-align:center;
}

.hero-content span{
font-weight:900;
}

.hero-content p{
font-size:20px;
font-weight:500;
color:#000;
text-align:center;
width:422px;
line-height:1.4;
}

.hero-btn{
width:292px;
height:52px;

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

background:var(--color_fondo_1);
border-radius:8px;

color:#fff;
text-decoration:none;

font-size:20px;
font-weight:600;

transition:.3s;
}

.hero-btn:hover{
background:#005777;
}

.hero-arrow{
position:absolute;
top:50%;

transform:translateY(-50%);

width:25px;
height:25px;

border:none;
background:none;

cursor:pointer;

font-size:28px;
font-weight:700;

color:#003854;

z-index:20;
}

.hero-prev{
left:64px;
}

.hero-next{
right:64px;
}

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

@media(max-width:992px){
.hero{
height:100vh;
min-height:750px;
}

.hero-content{
width:90%;
}

.hero-content h1{
font-size:28px;
}

.hero-content p{
width:100%;
font-size:18px;
}

.hero-btn{
width:260px;
}

.hero-prev{
left:20px;
}

.hero-next{
right:20px;
}
}

/* ===================================
   PROXIMAS AVENTURAS
=================================== */

.adventures{

    background:
    linear-gradient(
    180deg,
    #b4eaff 0%,
    #eeeef0 64.888%
    );

    display:flex;
    justify-content:center;

    padding:80px 20px;
}

.adventures-container{

    width:1814px;
    max-width:100%;
}

.adventures-title{

    width:1054px;
    max-width:100%;

    font-size:30px;
    font-weight:600;
    color:#003854;

    margin:0 auto 50px;

    line-height:1.35;
}

.adventures-grid{

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

    gap:20px;

    margin-bottom:50px;
}

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

.trip-card{

    width:241px;
    height:475px;

    border-radius:10px;

    overflow:hidden;

    position:relative;

    flex:none;
}

a.trip-card--link{
    display:block;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease;
}

a.trip-card--link:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(0,0,0,.18);
}

.trip-card img{

    width:100%;
    height:100%;

    object-fit:cover;
}

.trip-info{

    position:absolute;

    left:10px;
    bottom:20px;

    display:flex;
    flex-direction:column;

    font-size:24px;
    font-weight:800;

    line-height:25px;

    color:#081b23;
}

.trip-info.light{

    color:#eeeef0;
}

/* =======================
   COLUMNA DERECHA
======================= */

.trip-sidebar{

    width:236px;

    text-align:center;

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:23px;
}

.trip-sidebar h3{

    font-size:25px;
    font-weight:700;

    color:#003854;

    line-height:23px;
}

.trip-sidebar p{

    font-size:25px;
    font-weight:400;

    line-height:1.2;

    color:#19191b;
}

.trip-sidebar a{

    width:100%;
    height:52px;

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

    background:var(--color_fondo_1);

    border-radius:8px;

    text-decoration:none;

    color:#fff;

    font-size:20px;
    font-weight:600;
}

/* =======================
   BLOQUE INFERIOR
======================= */

.adventures-bottom{

    width:942px;

    max-width:100%;

    margin:auto;

    display:flex;

    align-items:center;

    gap:20px;
}

.advantages-icons{

    display:flex;
    gap:10px;
}

.advantages-icons img{

    height:82px;
    width:auto;
}

.advantages-list{

    color:#003854;

    font-size:20px;
    font-weight:700;

    line-height:20px;
}

.advantages-list li{

    margin-bottom:4px;
}

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

@media(max-width:1200px){

    .adventures-grid{

        flex-wrap:wrap;
    }

    .trip-sidebar{

        width:100%;
        margin-top:30px;
    }
}

@media(max-width:768px){

    .adventures{

        padding:60px 20px;
    }

    .adventures-title{

        font-size:24px;
    }

    .trip-card{

        width:100%;
        max-width:320px;
        height:450px;
    }

    .adventures-bottom{

        flex-direction:column;
        align-items:flex-start;
    }

    .advantages-list{

        font-size:16px;
    }
}
/* ======================================
   ESQUI (FIGMA 25:3926)
====================================== */

.ski-section{
    position:relative;
    width:100%;
    height:1080px;
    overflow:hidden;
}

.ski-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.ski-inner{
    position:relative;
    width:100%;
    height:100%;
}

/* TEXTO */

.ski-title{

    position:absolute;

    top:250px;
    left:50%;

    transform:translateX(-50%);

    width:969px;

    text-align:center;

    font-family:'Kufam',sans-serif;
    font-size:300px;
    font-weight:900;
    line-height:1;

    color:#003854;

    z-index:2;
}

/* PERSONAJE */

.ski-character-wrap{

    position:absolute;

    width:1089px;
    height:538px;

    left:calc(50% - 316.5px);
    bottom:196px;

    z-index:3;
}

.ski-character{

    position:absolute;

    top:5.76%;
    left:-17.01%;

    width:65.97%;
    height:88.48%;

    object-fit:contain;
}

/* BOTON */

.ski-btn{

    position:absolute;

    left:50%;
    top:881px;

    transform:translateX(-50%);

    padding:10px 20px;

    background:var(--color_fondo_1);

    border-radius:8px;

    color:#fff;
    text-decoration:none;

    font-family:'Kufam',sans-serif;
    font-size:20px;
    font-weight:600;

    text-transform:uppercase;

    z-index:10;
}

/* DESTINOS */

.ski-destinations{

    position:absolute;

    top:950px;

    left:124px;
    right:124px;


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

    gap:20px;

    padding:19px 5px;

    font-family:'Kufam',sans-serif;
    font-size:18px;
    font-weight:400;

    color:#081b23;

    text-align:center;

    z-index:10;
}

.ski-destinations span{
    white-space:nowrap;
}

/* ========================================
   AVENTURA
======================================== */

.adventure-section{

    position:relative;

    width:100%;
    height:1080px;

    overflow:hidden;

    background:#000;
}

.adventure-bg{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
}

/* Frame real Figma */

.adventure-content{

    position:relative;

    width:100%;
    height:100%;

    z-index:2;
}

.adventure-title{

    position:absolute;

    top:200px;
    left:50%;

    transform:translateX(-50%);

    font-family:'Kufam',sans-serif;
    font-weight:900;

    font-size:150px;
    line-height:1;

    color:#007DAE;

    text-align:center;

    white-space:nowrap;

    z-index:4;
}

.adventure-character{

    position:absolute;

    width:1433px;
    height:auto;

    left:0;

    top:calc(50% - 47px);

    transform:translateY(-50%);

    z-index:3;
}
@media (max-width:1600px){

    .adventure-title{
        font-size:120px;
    }

    .adventure-character{
        width:1100px;
    }
}

@media (max-width:1200px){

    .adventure-section{
        height:850px;
    }

    .adventure-title{
        font-size:90px;
        top:120px;
    }

    .adventure-character{
        width:900px;
    }
}

@media (max-width:768px){

    .adventure-section{
        height:650px;
    }

    .adventure-title{

        top:80px;

        font-size:56px;
    }

    .adventure-character{

        width:140%;
        left:-20%;
    }

    .adventure-btn{

        width:240px;
        height:46px;

        font-size:16px;
    }
}

/* ======================================
   FIN DE CURSO
====================================== */

.graduation-section{

    position:relative;

    width:100%;
    height:1080px;

    overflow:hidden;
}

.graduation-bg{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
}

.graduation-content{

    position:relative;

    width:100%;
    height:100%;
}
.graduation-title{

    position:absolute;

    top:173px;
    left:50%;

    transform:translateX(-50%);

    font-family:'Kufam',sans-serif;
    font-weight:900;

    font-size:200px;
    line-height:1;

    color:#003854;

    white-space:nowrap;

    z-index:4;
}
.graduation-group{
    position:absolute;

    width:1816px;
    height:auto;

    left:50%;

    top:calc(50% + 30.5px);

    transform:
        translateX(-50%)
        translateY(-10%);

    z-index:3;
}
.graduation-btn{

    position:absolute;

    left:50%;
    bottom:80px;

    transform:translateX(-50%);

    width:291px;
    height:52px;

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

    background:var(--color_fondo_1);

    border-radius:8px;

    font-family:'Kufam',sans-serif;
    font-size:20px;
    font-weight:600;

    color:#fff;

    text-decoration:none;
    text-transform:uppercase;

    z-index:5;

    transition:.25s;
}

.graduation-btn:hover{

    background:#00587a;
}
@media (max-width:1600px){

    .graduation-title{
        font-size:150px;
    }

    .graduation-group{
        width:1400px;
    }
}

@media (max-width:1200px){

    .graduation-section{
        height:850px;
    }

    .graduation-title{
        top:120px;
        font-size:110px;
    }

    .graduation-group{
        width:1100px;
    }
}

@media (max-width:768px){

    .graduation-section{
        height:650px;
    }

    .graduation-title{

        top:80px;

        font-size:60px;

        text-align:center;
    }

    .graduation-group{

        width:140%;
    }

    .graduation-btn{

        width:240px;
        height:46px;

        font-size:16px;
    }
}

/* ======================================
   PERSONALIZA TU EXPERIENCIA
====================================== */

.custom-section{

    position:relative;

    width:100%;
    min-height:820px;

    background:
    linear-gradient(
        180deg,
        #005479 0%,
        #007DAE 100%
    );

    display:flex;
    justify-content:center;
    align-items:center;
    padding:80px 40px;
    overflow:hidden;
    gap:50px;
}

/* ================================= */

.custom-center{
   
    position:relative;
    z-index:5;
    width:700px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* ================================= */

.letsgo{
    display: flex;
    margin-bottom: 25px;
    justify-content: center;
    img{
    width: 50%;    
    }
}

/* ================================= */

.custom-icons{

    display:flex;
    gap:20px;

    margin-bottom:50px;
}

.custom-icons img{

    width:80px;
    height:80px;

    object-fit:contain;
}

/* ================================= */

.custom-center h2{
	font-family: var(--primaria, Kufam);
    font-family:'Kufam',sans-serif;
    text-transform:uppercase;
    margin-bottom:70px;
	color: var(--12, #EEEEF0);
	text-align: center;
	font-size: 70px;
	font-style: normal;
	font-weight: 900;
}

/* ================================= */

.custom-center a{

    width:291px;
    height:52px;

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

    background:var(--color_fondo_1);

    border-radius:8px;

    color:#fff;
    text-decoration:none;

    font-family:'Kufam',sans-serif;
    font-size:20px;
    font-weight:600;
}

/* ================================= */

.custom-collage{
    position:relative;
    height: 570px;

}

/* ================================= */

.polaroid{
}

/* LADO IZQUIERDO */

.p1{
}


@media(max-width:1200px){

    .custom-section{

    }

    .custom-center h2{

        font-size:60px;
    }
}

@media(max-width:768px){

    .custom-center h2{

        font-size:42px;
    }

    .custom-collage{
        transform:scale(.8);
    }


    .custom-icons img{

        width:50px;
        height:50px;
    }
}

/* =====================================
   #OXIGENATUVIDA
===================================== */

.oxigena-life{

    position:relative;

    width:100%;
    height:1080px;

    overflow:hidden;
}

/* collage */

.oxigena-life-bg{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
}

/* texto */

.oxigena-life-title{

    position:absolute;

    left:50%;
    top:50%;

    width:1305px;

    transform:
        translateX(-50%)
        translateY(-70px);

    font-family:'Kufam',sans-serif;
    font-size:140px;
    font-weight:900;
    line-height:1;

    color:#EEEEF0;

    text-align:center;
    text-transform:uppercase;

    text-shadow:
        1px 4px 64px rgba(0,0,0,.25);

    z-index:3;
}
@media(max-width:1600px){

    .oxigena-life-title{

        width:1000px;
        font-size:110px;
    }
}

@media(max-width:1200px){

    .oxigena-life{

        height:850px;
    }

    .oxigena-life-title{

        width:900px;
        font-size:80px;
    }
}

@media(max-width:768px){

    .oxigena-life{

        height:650px;
    }

    .oxigena-life-title{

        width:95%;

        font-size:48px;

        line-height:1.1;
    }
}

@media(max-width:480px){

    .oxigena-life-title{

        font-size:36px;
    }
}