
/* ESTILOS */
html {
    scroll-behavior: smooth;
}
    * {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    }
    .redondeado {
    border-radius:5px;
    }
    .contenedor {
    width:100%; 
    max-width:1500px;
    margin: 0 auto; 
    padding:50px 20px;
    text-align:center; 
    display:flex; 
    justify-content:center; 
    align-items:flex-start; 
    flex-wrap: wrap;
    background-color:redd;
    }
    img {
    display:block;
    }
    body {
    width:100%; 
    overflow-x: hidden;
    }
    a {
    text-decoration: none;
    }

/* ANIMACIONES */
    .zoom {
        transition: transform .5s;
    }
    .zoom:hover {
        transform: scale(1.03);
    }
    .arriva {
    transition: transform 0.5s ease;
    }
    .arriva:hover {
        transform: translateY(-15px);
    }

/* TEXTOS */
    .titulo {
    font-size:40px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 0;
    margin-top: 0;
    }
    p {
    font-size:14px;
    margin-bottom: 0;
    margin-top: 0;
    word-spacing: 3px;
    letter-spacing: 1px;
    line-height: 1.5;
    }
    h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    }
    .justificado {
    text-align: justify;
    }
    .centrado {
    text-align: center;
    }
    .izquierda {
    text-align:left;
    }
    .sombra-texto {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    .sombra {
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
    }
    strong {
    font-weight: 700;
    color: rgb(6, 25, 53);
    }
    .caracter {
    border-left:solid 2px goldenrod;
    padding:0px 20px;
    }


/* DESTINOS */
    .destino-top {
    width:100%; height:600px; background-size:cover; background-position:center; align-items:center;
    }
    /* LINKS */
    .link {
    color:white;
    opacity:.8;
    text-decoration:none;
    font-size: 14px;
    cursor:pointer;
    }
    .link:hover {
    color:goldenrod;
    opacity:.9;
    }
    .link-2 {
    color:rgb(0, 0, 0);
    text-decoration:none;
    font-size: 14px;
    cursor:pointer;
    }
    .link-2:hover {
    color:#daa520;
    }
    .link-3 {
        color:rgb(164, 119, 3);
        text-decoration:none;
        font-size: 14px;
        cursor:pointer;
        }
    .link-3:hover {
        color:goldenrod; 
        }
    .link-3-n {
            color:#d8b523;
            text-decoration:none;
            font-size: 14px;
            cursor:pointer;
            }
    .link-3-n:hover {
            color:rgb(241, 193, 72)
            }
        
/* COLORES*/
.color-1{
    color:goldenrod;
    }
    .color-1-n{
    color:#d8b523;
    }  
    .color-2 {  
    color:rgba(15, 32, 57);
    }   
    .color-2-n {  
    color:rgb(52, 83, 129);
    }   
/* LINKS */
    .link-img {
    }
    .link-img:hover {
    }

    .btn-1 {
        color: grey;
        background-color: white;
        border: solid 1px grey;
        border-radius: 20px;
        opacity: 1;
        font-size: 14px;
        cursor: pointer;
        text-decoration: none;
        padding:10px;
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    
    .btn-1:hover {
        color: white;
        background-color: goldenrod;
        border: solid 1px goldenrod;
    }
    .btn-1-n {
        color: silver;
        background-color: transparent;
        border: solid 1px grey;
        border-radius: 20px;
        opacity: 1;
        font-size: 14px;
        cursor: pointer;
        text-decoration: none;
        padding:10px;
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    .btn-1-n:hover {
        color: white;
        background-color: goldenrod;
        border: solid 1px goldenrod;
    }
    
    .boton-info{
        cursor: pointer;
        text-decoration: none;
        color: rgba(15, 32, 57);
        background-color: white;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    .boton-info:hover{
        color: white;
        background-color: rgba(15, 32, 57);
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
    }
    .boton-info-n{
        cursor: pointer;
        text-decoration: none;
        color: white;
        background-color:#031022;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    .boton-info-n:hover{
        color: white;
        background-color: rgb(52, 83, 129);
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
    }


/* FONDOS */ 
    .fondo-negro {
        background-color:black;
        color:white;
        }
    .fondo-negro-9 {
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        }
    .fondo-blanco {
        background-color:white;
        color:hsl(215, 59%, 14%);
        }
    .fondo-gris {
        background-color:rgb(188, 194, 206);
        color:hsl(215, 59%, 14%);
        }
    .fondo-info {
        background-color:rgb(245, 245, 245);
        color:hsl(215, 59%, 14%);
        }
    .fondo-1{
        background-color:#0e1f37;
        color:rgb(251, 251, 255);
        }
    .fondo-1-n{
        background-color:#031022;
        color:rgb(251, 251, 255);
        }
    .fondo-1-8 {
        background-color: rgba(15, 32, 57, 0.8);
        color: white;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        }  
    .fondo-3{
        background-color:goldenrod;
        color:rgb(255, 255, 255);
        }
    .textura-blanco{
        background-position:center; 
        background-repeat:repeat; 
        background-image:url('/imagenes/fondo-textura.webp');
        }
    .textura-negro{
        background-position:center; 
        background-repeat:repeat; 
        background-image:url('/svg/fondo-textura-negro.svg');
        background-size:40px 40px;
        }    

/* TEXTOS */
@font-face {
	font-family: 'fuente';
	src: url("../fuente.TTF") format("opentype");
  }
  @font-face {
	font-family: 'fuente2';
	src: url("../fuente2.TTF") format("opentype");
  }
  @font-face {
	font-family: 'fuente3';
	src: url("../fuente3.TTF") format("opentype");
  }
  .tipo {
	font-family: 'Noto Sans Display', sans-serif;
	font-family: 'fuente', sans-serif; 
  }  
  .tipo2 {
	font-family: 'Noto Sans Display', sans-serif;
	font-family: 'fuente2', sans-serif; 
    word-spacing: 7px;
    letter-spacing: 1.5px;
  }
  .frase {
	font-family: 'Noto Sans Display', sans-serif;
	font-family: 'fuente3', sans-serif; 
    font-size: 25px;
    word-spacing: 5px;
    letter-spacing: 1.3px;
  }

/* MOVIL */
@media (max-width: 768px) {				
	.ocultar-movil{
		position: relative;
		display:none;
		}	
    .bloque-contenido{
        width: 100%;
        }	
    .bloque-lateral{
        width: 100%;
        }	
    .dos{
        width: 100%;
    }
    .tres{
        width: 100%;
    }
    .cuatro{
        width: 100%;
    }	
}		

@media (min-width: 768px) {			
	.mostrar-movil{
	    position: relative;
	    display:none;
	    }
    .bloque-contenido{
        width: 73%;
        }	
    .bloque-lateral{
        width:25%;
        }	
    .dos{
        width:50%;
        }	 
    .tres{
        width:33%;
        }	
    .cuatro{
        width:25%;
        }	   
}