@charset "utf-8";
/* CSS Document */
/*=============================
        CARRUSEL
==============================*/

#carouselExampleIndicators1{
    width: 95%;
    max-width: 1500px;
    margin: 40px auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.20);
}

#carouselExampleIndicators1 .carousel-item{
    height: 540px;
}

#carouselExampleIndicators1 .carousel-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*==========================
     TEXTO DEL CARRUSEL
==========================*/

.carousel-caption{
    bottom: 35px;
}

.carousel-caption h5{
    font-size: 42px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 10px rgba(0,0,0,.8);
    margin-bottom: 10px;
}

.carousel-caption p{
    font-size: 22px;
    color: white;
    text-shadow: 2px 2px 10px rgba(0,0,0,.8);
}

/*==========================
    EFECTO DEL CARRUSEL
==========================*/

#carouselExampleIndicators1 .carousel-item{
    position: relative;
}

#carouselExampleIndicators1 .carousel-item::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 45%;
    background: linear-gradient(to top,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0));
}
/*==========================
      BOTÓN RESERVA
==========================*/

.boton-reserva{
    display: inline-block;
    background: linear-gradient(180deg,#198CFF,#0066D9);
    color: #fff;
    padding: 15px 40px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50px;
    font-size: 20px;
    font-weight: 700;
	letter-spacing: .3px;
    text-decoration: none;
    cursor: pointer;
    transition: .30s;
    box-shadow: 0 8px 18px rgba(0,0,0,.20),insert 0 1px 1px rgba(255,255,255,.25);
}

.boton-reserva:hover{
    background: linear-gradient(180deg,#1D95FF,#0A73E8);
    color:#fff;
    text-decoration:none;
    transform: translateY(-2px);
    box-shadow:0 10px 22px rgba(0,0,0,.22),insert 0 1px 1px rgba(255,255,255,.30);
}

.boton-reserva:focus,
.boton-reserva:active{
    color:#fff;
    text-decoration:none;
    outline:none;
}

/*==========================
      FLECHAS CARRUSEL
==========================*/

.carousel-control-prev,
.carousel-control-next{
    width: 8%;
    opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
	width: 50px;
	height: 50px;
    border-radius: 50%;
	background-color: rgba(10,61,98,.85);
	background-size: 45%;
	box-shadow: none;
	border: none;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon{
    background-color: rgba(10,61,98,.95);
    transform: scale(1.1);
}
.carousel-indicators li{
    width:12px;
    height:12px;
    border-radius:50%;
    margin:0 6px;
    opacity:.6;
}

.carousel-indicators .active{
    width:35px;
    border-radius:20px;
    opacity:1;
    background:#ffffff;
}
/*==========================
      Banner Principal
==========================*/

body{
			padding-top: 95px;
		}
		.banner-principal{
			background-image: linear-gradient(rgba(0,0,0,0.20), rgba(0,0,0,0.20)),url("Imagenes/Baner Principal01.jpg");
			background-repeat: no-repeat;
			background-position: center center;
			background-size: cover;
			height: 500px;
			margin-bottom: 0;
		}
        .banner-titulo {
			color: white;
			font-size: 58px;
			font-weight: 700;
			text-shadow: 3px 3px 8px rgba(0,0,0,.6);
			margin-top: 85px;
			margin-bottom: 20px;
		}
		.banner-subtitulo{
			color: white;
			font-size: 24px;
			text-shadow: 2px 2px 6px rgba(0,0,0,.6);
			margin-top: 40px;
		}
/*==========================
      Banner Reserva
==========================*/
		.banner-reserva{
			background-image: linear-gradient(rgba(0,0,0,.20),rgba(0,0,0,.20)),url("Imagenes/banner reserva.jpg");
			background-size: cover;
			background-position: center 25%;
			background-repeat: no-repeat;
			padding: 170px 20px;
			margin-bottom: 0;
		}
		.titulo-reserva{
			color: white;
			font-size: 56px;
			font-weight: bold;
			text-shadow: 2px 2px 8px rgba(0,0,0,.6);
		}
		.texto-reserva{
			color: white;
			font-size: 22px;
			text-shadow: 2px 2px 6px rgba(0,0,0,.6);
			max-width: 700px;
			margin:25px auto 35px auto;
			line-height: 1.6;
		}
/*==========================
      Media
==========================*/
        @media (max-width: 768px){
			.banner-principal{
				height: 430px;
				background-position: center;
			}
			.banner-titulo{
				font-size: 34px;
				margin-top: 70px;
				margin-bottom: 15px;
				padding: 0 15px;
			}
			.banner-subtitulo{
				font-size: 18px;
				margin-bottom: 35px;
				padding: 0 20px;
			}
			.boton-reserva{
				font-size: 16px;
				padding: 12px 24px;
			}
}
/*==================================
        BARRA SUPERIOR
==================================*/

.top-bar{

    background:#0B3C5D;
    color:#fff;
    height:38px;
    display:flex;
    align-items:center;
    font-size:14px;

}

.top-bar .container{

    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;

}

.top-bar a{

    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:.3s;

}

.top-bar a:hover{

    color:#FFD166;

}

.top-left,
.top-right{

    display:flex;
    align-items:center;
    gap:6px;

}

/*=============================
        .btn-cotizar encabezado
==============================*/	
	.btn-cotizar{

    background:linear-gradient(90deg,#0B5ED7,#168BFF);

    color:white;

    padding:12px 28px;

    border-radius:40px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.btn-cotizar:hover{

    color:white;

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.18);

}

/* =========================
   HEADER PRINCIPAL
========================= */
body {
	padding-top: 120px;
}
.header-principal{
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
	padding: 15px 5%;
	transition: .3s ease;
}


.menu-card{
    width:95%;
    margin:auto;
    background:white;
    height:130px;

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

    padding:0 45px;

    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.10);
	backdrop-filter:blur(10px);
}


/* LOGO */

.logo img{
    width:200px;
	height: auto;
}


/* MENU */

.menu{
    display:flex;
    gap:35px;
}


.menu a{
    color:#00164d;
    font-size:17px;
    font-weight:700;
    text-decoration:none;
    position:relative;
}


.menu a.activo::after,
.menu a:hover::after{

    content:"";
    width:100%;
    height:3px;

    background:#ffb000;

    position:absolute;
    bottom:-10px;
    left:0;

    border-radius:10px;
}


/* LADO DERECHO */

.acciones{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
}


.confianza{

    color:#00164d;
    font-size:16px;
    font-weight:600;

}


.telefono-header{

    color:#008cff;
    font-size:25px;
    font-weight:900;

    text-decoration:none;
}


/* Hamburguesa oculta PC */

.hamburguesa{
    display:none;
}

/* =========================
   VERSION CELULAR
========================= */


@media(max-width:768px){
	
.header-principal{
    top:10px;
}
.menu-card{

    width:90%;
    height:90px;
    padding:0 25px;
    border-radius:0 0 18px 18px;
    display:flex;
	align-items: center;
    justify-content:space-between;
}
/* Logo */

.logo img{
    width:120px;
}
/* ocultamos menu PC */

.menu{
    display:none;
}
/* ocultamos telefono PC */

.acciones{
    display:none;
}
/* aparece hamburguesa */

.hamburguesa{
    display:block;
    font-size:34px;
    color:#00164d;
    cursor:pointer;
}
	.top-bar{
		margin-top: 25px;
	}
}
/* =========================
   MENU MOVIL DESPLEGABLE
========================= */


.menu-movil{

    position:fixed;

    top:0;
    right:-100%;

    width:80%;
    height:100vh;

    background:white;

    z-index:9999;

    padding:40px 35px;

    display:flex;
    flex-direction:column;

    gap:25px;

    transition:.4s ease;

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

}


/* cuando abre */

.menu-movil.activo{

    right:0;

}


/* X cerrar */

.cerrar{

    position:absolute;

    top:25px;
    right:30px;

    font-size:40px;

    color:#00164d;

    cursor:pointer;

}


/* logo */

.logo-movil{

    width:120px;

    margin-bottom:30px;

}


/* links */

.menu-movil a{

    color:#00164d;

    font-size:20px;

    font-weight:700;

    text-decoration:none;

}


/* informacion abajo */

.info-menu{

    margin-top:30px;

    border-top:1px solid #ddd;

    padding-top:25px;

}


.info-menu p{

    color:#00164d;

    font-size:16px;

}


.info-menu a{

    color:#008cff;

    font-size:24px;

    font-weight:900;

}
/* Fondo oscuro menú móvil */

.fondo-menu{

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    background:rgba(0,0,0,.45);

    display:none;

    z-index:9998;

}


.fondo-menu.activo{

    display:block;

}

.paquetes-section{
padding:45px 8% 70px;
text-align:center;
background:#f8fbff;
}


.paquetes-section h2{
font-size:38px;
font-weight:800;
color:#0B3C5D;
}


.paquetes-subtitulo{
font-size:18px;
margin-bottom:40px;
color:#555;
}

/* =========================
   MENU MOVIL DESPLEGABLE
========================= */

.paquetes-container{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap:45px;
	max-height: 1400px;
	margin: auto;
}
.paquete-card{
height:480px;
border-radius:35px;
overflow:hidden;
position:relative;
background:#0B3C5D;
}
.paquete-card:hover{
transform:translateY(-10px);
}
.paquete-card img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition: .5s ease;
}
.paquete-info{
position:absolute;
left:0;
bottom:0;

width:100%;
height:100%;

display:flex;
flex-direction:column;
justify-content:flex-end;
align-items:center;

padding: 25px 30px;

color:white;

background:linear-gradient(
to bottom,
rgba(0,0,0,0),
rgba(11,60,93,0.90)
);

z-index:2;
}
.paquete-info h3{

font-size:34px;
font-weight:900;
letter-spacing:1px;

margin-bottom:18px;

text-transform:uppercase;

text-shadow:
0 5px 15px rgba(0,0,0,0.9);

position:relative;

}
.paquete-info h3::after{

content:"";
display:block;

width:70px;
height:4px;

background:#FFB703;

border-radius:20px;

margin:12px auto 0;

}
.btn-paquete{
display:inline-block;
margin-top:15px;
padding:12px 25px;
border-radius:30px;
background:#007BFF;
color:white;
font-weight:bold;
text-decoration:none;
}
.btn-paquete:hover{
background:#FFB703;
color:#0B3C5D;
}

@media(max-width:768px){

.paquetes-container{
grid-template-columns:1fr;
}
.paquete-card{
height:380px;
}

}

/* ======================
   OFERTAS
====================== */


.ofertas-section{

padding:70px 8%;
text-align:center;
background:white;

}


.ofertas-section h2{

font-size:38px;
font-weight:800;
color:#0B3C5D;

}


.ofertas-subtitulo{

font-size:18px;
color:#555;
margin-bottom:45px;

}


.ofertas-container{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;

max-width:1200px;
margin:auto;

}


.oferta-card{

background:#ffffff;

padding:45px 35px;

border-radius:30px;

box-shadow:
0 15px 35px rgba(0,0,0,0.12);

transition:.3s ease;

}


.oferta-card:hover{

transform:translateY(-10px);

}


.oferta-icono{

font-size:50px;
margin-bottom:20px;

}


.oferta-card h3{

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

color:#0B3C5D;

margin-bottom:15px;

}


.oferta-card p{

font-size:15px;
color:#555;

}


.btn-oferta{

display:inline-block;

margin-top:25px;

padding:12px 28px;

border-radius:30px;

background:linear-gradient(
135deg,
#009FFD,
#005BEA
);

color:white;

font-weight:bold;

text-decoration:none;

box-shadow:
0 8px 20px rgba(0,91,234,0.35);

}


.btn-oferta:hover{

background:#FFB703;

color:#0B3C5D;

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

.ofertas-container{

grid-template-columns:1fr;

}

}

/* ======================
   SERVICIO AL CLIENTE
====================== */


.servicio-section{

padding:80px 8%;

background:#0B3C5D;

text-align:center;

}


.servicio-section h2{

font-size:38px;

font-weight:800;

color:white;

}


.servicio-subtitulo{

font-size:18px;

color:#d9e8f5;

margin-bottom:50px;

}


.servicio-container{

display:grid;

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

gap:30px;


max-width:1400px;

margin:auto;

}


.servicio-card{

background:white;

border-radius:30px;

padding:40px 30px;

text-decoration:none;

color:#333;

transition:.3s ease;


box-shadow:
0 15px 35px rgba(0,0,0,0.25);

}


.servicio-card:hover{

transform:translateY(-10px);

}


.servicio-icono{

font-size:45px;

margin-bottom:20px;

}


.servicio-card h3{

font-size:24px;

font-weight:800;

color:#0B3C5D;

margin-bottom:15px;

}


.servicio-card p{

font-size:15px;

line-height:1.6;

}


.principal{

border:3px solid #FFB703;

}


.btn-servicio{

display:inline-block;

margin-top:25px;

padding:12px 25px;

border-radius:30px;

background:linear-gradient(
135deg,
#009FFD,
#005BEA
);


color:white;

font-weight:bold;

}

@media(max-width:768px){

.servicio-container{

grid-template-columns:1fr;

}

}

/* ======================
   VUELOS
====================== */


.vuelos-section{

padding:70px 8%;
text-align:center;
background:#ffffff;

}


.vuelos-section h2{

font-size:38px;
font-weight:800;
color:#0B3C5D;

}


.vuelos-subtitulo{

font-size:18px;
color:#555;
margin-bottom:45px;

}


.vuelos-container{

display:grid;

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

gap:35px;

max-width:1200px;

margin:auto;

}


.vuelo-card{

background:#fff;

padding:40px 30px;

border-radius:30px;

box-shadow:
0 15px 35px rgba(0,0,0,0.12);


transition:.3s ease;

}



.vuelo-card:hover{

transform:translateY(-10px);

}



.vuelo-card img{

width:130px;

height:130px;

object-fit:contain;

margin-bottom:25px;

}



.vuelo-card h3{

font-size:26px;

font-weight:800;

color:#0B3C5D;

}



.vuelo-card p{

font-size:15px;

color:#555;

line-height:1.6;

}

@media(max-width:768px){

.vuelos-container{

grid-template-columns:1fr;

}

}

/* ======================
   HOTELES
====================== */


.hoteles-section{

padding:70px 8%;
text-align:center;
background:#f8fbff;

}


.hoteles-section h2{

font-size:38px;
font-weight:800;
color:#0B3C5D;

}


.hoteles-subtitulo{

font-size:18px;
color:#555;
margin-bottom:45px;

}


.hoteles-container{

display:grid;

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

gap:35px;

max-width:1300px;

margin:auto;

}



.hotel-card{

background:white;

padding:40px 30px;

border-radius:30px;

box-shadow:
0 15px 35px rgba(0,0,0,0.12);

transition:.3s ease;

}



.hotel-card:hover{

transform:translateY(-10px);

}



.hotel-card img{

width:150px;

height:120px;

object-fit:contain;

margin-bottom:25px;

}



.hotel-card h3{

font-size:25px;

font-weight:800;

color:#0B3C5D;

}



.hotel-card p{

font-size:15px;

line-height:1.6;

color:#555;

}

@media(max-width:768px){

.hoteles-container{

grid-template-columns:1fr;

}

}

#inicio,
#hoteles,
#vuelos,
#paquetes,
#ofertas,
#servicio{

scroll-margin-top:150px;

}