/* author: raulantonio(at)protonmail.com | raul antonio ortega vallejo | github.com/keyslot */

/**
 * Importando fuentes
 */

@import "fonts/Ubuntu/fonts.css";
/*
 * Definiendo vars 
 * */
:root{ 
	--color-menu: rgba(68,191,163,1);    /* Color del Menú           */
        --color-naranja:#f58634;            
        --color-blanco: #ffff;  
	--color-gris: #939596;
	--color-logo: rgba(250,150,150,1);   /* Color del Menú           */
	--color-fondo: #ffffff;              /* Color de fondo , retina  */
	--color-texto: #0f0f0f;              /* Color de texto general   */
	--color-titulo:rgba(255,255,255,.9); /* Color con alpha          */
	--color-sub-titulo: #393a74;         /* Color de los subtítulos  */
	--color-vinculos:#333;               /* Color de los vínculos    */
        --color-smoth:#333;                  /* Color de los vínculos    */
	--color-pipe: #fbbd89;               /* Color de pipes del Menú  */
        /* Tipografías */
        --font-bold: "ubuntubold",Verdana, Geneva, sans-serif;
        --font-normal:"ubunturegular",Verdana, Geneva, sans-serif;
        --font-italic: "ubuntuitalic",Verdana, Geneva, sans-serif;
        --font-italic-bold: "ubuntubold_italic",Verdana, Geneva, sans-serif;

 }

.color-cafe   { color: var(--color-menu);}
.color-blanco { color: var(--color-blanco);}
.color-naranja{ color: var(--color-naranja);}
.color-verde  { color: var(--color-menu);    }
.color-azul   { color: var(--color-sub-titulo);}
.color-gris   { color: var(--color-gris);}

html{ scroll-behavior: smooth;}

html, body {
    font-family:Verdana, Geneva, sans-serif;
    font-family: var(--font-normal);
    background-color: var(--color-fondo);
    font-size: 16px;
    color:var(--color-texto);
}

body{
    margin-top:50px;
   }


h1, h2 {
	color: var(--color-menu);
	font-family:var(--font-italic-bold);
	}

/*
 * Tipografías en clases
 */
.italica { font-family:var(--font-italic);}

.navbar, .titulo-seccion,.bold{
    font-family:var(--font-bold);
}

#inicio .frase,.italica-bold{ font-family:var(--font-italic-bold);}


/*
 *  Vínculos, links
 */

a img:hover{ 
    opacity:0.8;
}

a:link, a:visited{
    color:var(--color-vinculos);
  }
  
.link-correo:link,.link-correo:visited{
    color: var(--color-sub-titulo);
    font-family:var(--font-bold);
}

/*
 * Smoth text
 */
.text-smoth {
    color: var(--color-smoth);
}
/*
 * Menú Navbar 
 * */

.navbar { 
	z-index: 3;
	font-size: 1.1em;
    }

.sub-titulo { 
	color: var(--color-sub-titulo);
}

.scrolled{
	color: #000;
	}

/* DropMenu de Navbar */
.dropdown-item.active,
.dropdown-item:active{
    background-color: var(--color-logo);
  }

.fixed-top {
	background-color: var(--color-menu);
	text-transform:capitalize;
}

.pipe{
	color: var(--color-pipe);
        font-family:var(--font-bold);
}

/*
 *  Conf. imágenes y otros elementos
 */
img,iframe {
    border:none;
}

/*
 * Brand: logo,descripción
 */

#logo {	
     margin:0;
     padding:0;
     top:11px;
     right: 10px;
}

#logo img {
     float: left;
     padding:0;
     margin:0;
}

#logo a{
    text-decoration:none;
    color: #fff;
}


.minilogo {
      opacity: 0.9; 
}
.scrolled, .outscroll,footer{
	background-color:var(--color-menu);
}
/* 
 * Secciones 
 */

section {
    padding: 0px 0 0 0;
    margin: 0px 0px 0 0;
}

/* Banner de Inicio */

div#inicio{
	background-color: #c6d3db;
  	background-image: url(../imgs/banner/fondo.webp);
        background-repeat: repeat-x;
	background-attachment: fixed;
	padding: 50px 0 50px 0;
	height:570px;
}

section#angelica {
    font-size: 1.1em;
    padding:0;
}

section#angelica #hola {
	color: var(--color-naranja);
	font-family:var(--font-italic-bold);
	top: 33px;
	left:77%;
	float:left;
	position:absolute;
	font-size:2em;
}
section#quienes {
  	background-image: url(../imgs/vectores/avion.webp);
	background-position: right;
	background-repeat: no-repeat;
}
section#servicios, 
section#destinos,
section#contacto,
section#proximos-viajes{
	background-color: #cae8e0;
	padding: 30px 0 100px 0px;
}
section#privacidad{
	padding: 30px 0 100px 0px;
}
section#servicios .servicio {
	padding: 30px 5px 5px 5px; 
	margin: 0px 20px 30px 20px;
	background-color:#f6fdfb;
	background-image:url(../imgs/vectores/polaroid.webp);
	background-repeat: repeat;
	text-align:center;
}
section#servicios figure img{
        padding:10px;
}
section#servicios figure .descripcion{
        padding:0px 50px 0px 50px;
	color: var(--color-gris);
	font-size:.9em;
}

section#servicios .col-md:hover .descripcion,
section#servicios .col-5:hover .descripcion{
        animation: frame-fade 1s; 
	color: var(--color-texto);
	font-size:1em;
}

section#proximos-viajes .banner{
  	background-image: url(../imgs/banner/proximos-viajes.webp);
	background-size:100%;
	background-repeat: no-repeat;
	height: 600px;
}

section#proximos-viajes #boton{
	background-color: var(--color-naranja);
	background-image:url(../imgs/vectores/boton-avion.webp);
	background-position: center left 5px;
	background-repeat:no-repeat;
	border-radius: 30px;
	width:320px;
	text-align:center;
	margin:250px 0px 0px 50px;
	font-size:1.3em;
	cursor:pointer;
	opacity:.84;
	text-align:center;

}

section#proximos-viajes #boton:hover{
	opacity:1;
}

section#proximos-viajes #boton #link{
	color: var(--color-blanco);
	padding:0px 30px 0px 15px;
}

section#proximos-viajes #boton #link:hover{
	text-decoration:none;
}

section#contacto .datos{
        background-color:#fdddc2;
	text-align:center;
}

.resalta{
	background-color: var(--color-menu);
	color:#fff;
	padding-left: 3px;
}



/**
 * Footer . Pie de pag
 */
footer {
	/*
    position:fixed;
    bottom:0;
    width: 100%;
    height:50px;
    padding:5%; */
}

footer, footer a:link,footer a:visited{
	color: #fff;
}


.mapaMundi {
	position: relative;
	width: 800px;
	height: 525px;
	padding:0;
	border:0;
}

.mapa-continente{
	position: absolute;
	width: 100%;
	opacity: 0;
	animation: anima-continente 25s infinite;
}


/* 
 * Modificaciones para móviles 
 */
.mobile-yes{ display:none; font-size:.9em}

@media (max-width: 999px) {
    .mobile-no { display: none;}
    .mobile-yes{display:block;}
    #logo-texto{ 
	    width:200px;
     }
    #logo-mapa{
	    display:none;
     }
    section .img-estrella{
	padding:0;
	border:0;
	width:30px;
    }
    div#inicio{
	height:auto;
	padding-bottom:60px;
     }
    section#quienes {
	    background-image:none;
     }
    section#destinos{
	padding-bottom:150px;
    }
    section .titulo-pagina{
	font-size: 1.2em;
    }
    .mapaMundi{
	width:80%;
	height:200px;
    }
    section#proximos-viajes .titulo-pagina{
	font-size:1em;
    }
    section#proximos-viajes .banner{
	height:340px;
    }
    section#proximos-viajes #boton-mobile{
	background-color: var(--color-naranja);
	background-image:url(../imgs/vectores/boton-avion.webp);
	background-position: center left 5px;
	background-repeat:no-repeat;
	border-radius: 30px;
	width:220px;
	text-align:center;
	margin:180px 18px 50px 18px;
	font-size:.9em;
	cursor:pointer;
	opacity:.84;
	text-align:center;
	padding: 10px 10px 5px 50px;

    }
    section#servicios figure .descripcion{
        padding:0px 15px 0px 15px;
	color: var(--color-texto);
    }
    section#servicios .col:hover .descripcion,
    section#servicios .col-5:hover .descripcion{
        animation:none; 
   }
   .img-angelica{ width: 35%; }
    section#contacto .angelica{
	margin:0;
	padding:0;
    }
}
@media (min-width: 1200px) {
	section#proximos-viajes #boton{
	margin-top:320px;
	}
}

/*
 *  Escritorios grandes
 */
@media (min-width: 1300px) {

} 

/**
 * Animaciones y transiciones 
 * 
 */
.animacion-fade-3{ animation: frame-fade 3s; }
.animacion-fade-5{ animation: frame-fade 5s; }

/*
 * Experimental 
 */
.img-academia {
       opacity:0;
}
.obfusca-mail:after {
  content: attr(data-usuario) "@" attr(data-dominio) "." attr(data-ext); 
}
.obfusca-mail:link{
	color: var(--color-menu);
	font-family:var(--font-bold);
}

/* Key-Frames                */
/* SECCION inicio            */
@keyframes frame-fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
/* SECCION: proximos-viajes  */
@keyframes anima-continente { 
     0%{ opacity: 0;}  10%{ opacity: 1;}  90%{ opacity: 1;}  100%{ opacity: 0;}  
 }

/* SECCION: destinos          */
.mapa-continente:nth-of-type(1){animation-delay: -1s;}
.mapa-continente:nth-of-type(2){animation-delay: 1s;}
.mapa-continente:nth-of-type(3){animation-delay: 2s;}
.mapa-continente:nth-of-type(4){animation-delay: 4s;}
.mapa-continente:nth-of-type(5){animation-delay: 6s;}
.mapa-continente:nth-of-type(6){animation-delay: 8s;}
.mapa-continente:nth-of-type(7){animation-delay: 10s;}
.mapa-continente:nth-of-type(8){animation-delay: 11s;}
.mapa-continente:nth-of-type(9){animation-delay: 13s;}
.mapa-continente:nth-of-type(10){animation-delay: 14s;}