/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --c1 :#1A345C;
    --c2 :#F4B224;
    --c1L:#DBF0FA;
    --c2L:#FFE6A8;
    --cL:#F6F5F1;
    --cD:#000;
    --ff: "Poppins", sans-serif;
    --ff2: var(--ff);
   
   /* --ff2:'Cocomat', sans-serif;*/
    --mxw: 1400px;
    --debug:0;
}



html{
	background: var(--c1);
    scroll-padding-top: 50px;
}


/* 17jun 1040*/



*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;


}

/*
html:hover *{
        outline: dashed calc(1px * var(--debug)) red ;
}
*/

::selection {
    background: var(--c1);
    color: var(--c2);
}

p, h1, h2, h3, h4, h5, ul, li{
cursor:default;
}



html{
    scroll-behavior: smooth;
}


@font-face {
    font-display: swap;
    font-family: 'Cocomat';
    src: url(fonts/Cocomat1.woff2) format('woff2'),url(fonts/Cocomat1.woff) format('woff'),url(fonts/Cocomat1.ttf) format('truetype'),url(fonts/CocomatPro-Regular1.otf) format('truetype')
}




body{font-family: var(--ff);color: var(--c1);min-width: 320px;background-color:var(--cL);}


.boxed{
        margin:0 auto;
        max-width: var(--mxw);
}


a{
    text-decoration: none;
    color:var(--c1);
}
a:hover{
        cursor:pointer !important;

}

ul{
    padding-left: 0;
    list-style: none;
    display: flex;
    gap:10px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px 0;
    /* font-size: 29px; */
}

h1,h2,h3,h4,h5,h6{
    font-family: var(--ff2);
	font-weight:500;
}


p{
    text-align: left;
    line-height: 20px;
}

img{
    max-width: 100%;
}


/* HEADER */

/* HEADER */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 100%;
    z-index: 100;
    padding: 10px calc(50% - 610px);
    position: fixed;
    /* border-bottom: solid 1px white; */
    /* backdrop-filter: blur(24px); */
    -webkit-backdrop-filter: blur(24px); /* Para Safari y iOS */
    backdrop-filter: 12px);         /* Estándar */
    background-color: #0f2b4600; /* fondo semi-transparente opcional */
  }



header .logo{display: block;padding: 0 10px;}

header .logo img {
  display: block;
  aspect-ratio: 1/1;
  object-fit: contain;
  filter:drop-shadow(1px 0px 8px #000000d9);
}

header nav{
}

header nav a {
  color: white;
  text-decoration: none;
	
}


header nav a.lang {
  font-size: 14px;
  color:#FFFFFF88;
}

header nav a.lang.current {
	background:#FFFFFF33;
	padding:5px 12px;
	border-radius:30px;
}
	


  /* Menu por defecto */
  header nav .menu {
    display: flex;
    list-style: none;
    gap: 20px;
    font-size: 18px;
    text-shadow: 0px 0px 9px #081624;
  }
  
  
  /* Icono hamburguesa oculto por defecto */
  .hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 18px;
    cursor: pointer;
    margin: 12px;
	    filter:drop-shadow(1px 0px 8px #000000d9);

  }
  
  .hamburger span {
    display: block;
    height: 3px;
    background: white;
    border-radius: 2px;
  }
  
  /* MEDIA QUERY para pantallas p±as */
  @media (max-width: 600px) {
    /* Ocultar menú */

    header nav{
        display: none;
    }
  
    /* Mostrar icono hamburguesa */
    .hamburger {
      display: flex;
    }
  
    /* Cuando el menu esta activo */
    header nav .menu.active {
      display: flex;
    }



	/* Desplegado 
	header:hover nav{
		display:block;
		width:100%;
		
	}

	header:hover nav ul{
		flex-direction:column;
		gap:2px;
	}

	header:hover nav a{
		display:block;
		background:#1A345C33;
		backdrop-filter:blur(20px);
		padding:6px 20px;
        text-align: right;
	}

	  header:hover nav a:hover{
		  background:var(--c2);
		  		color:var(--c1) !important;

	  }

	header:hover .hamburger{
		display:none;
	}
	


	/* Equipo */
	.boxed{
		flex-direction:column;
	}
	.boxed img{
		max-width:100% !important;
	}

	.btn{
		width:100%;
		text-align:center;
	}
	  
}






/* MAIN */
main{
    display: flex;
    flex-direction: column;
    /* gap: 20px; */
    /* padding: 20px; */
}


section{/* overflow: visible; */}

.centerE{
    display:flex;
    justify-content:center;
    align-items:center;
}



.pattern{
    width:100%;
    height: 81px;
    background-color: var(--c1);
    overflow: hidden;
}

.pattern:after{
    content: "";
    display: block;
    width: 190dvw;
    height: 70dvw;
    background: url(img/ZLN_ptron.png) top left;
    background-size: 45px;
    rotate:0deg;
    position:relative;
    top: 0dvw;
    left: -222px;
    /* animation: znl-rotate 200s infinite alternate; */
}


@keyframes znl-rotate{
	from{rotate:-10deg;}
	to{rotate:30deg;}
}



.pattern.pc2:after{
        background: url(img/ZLN_ptron2.png) top left;
            background-size: 45px;
}


/* FOOTER */



footer{
	background: var(--c1);
	color: var(--cL);
	 padding: 20px 8px ;
}

footer .container .row{
    display: flex;
    flex-wrap: wrap;
    gap:20px;
    justify-content: space-evenly;
    text-align: center;
    line-height: 22px;
    align-items: flex-start;
}

footer img{
    max-width: 300px;
    margin-bottom:60px;
}

footer .legal{
	text-align:center;
	font-size:12px;

}
footer .legal *{
		color:#FFFFFF88
}


footer a{
    color:var(--cL)
}
footer a:hover{
	color:var(--c2)
}

footer a:hover i{
	color:#FFFFFF;
}



footer i{
    font-size:26px;
}

footer p,
footer h2{
	text-align:left;
	padding: 1px 0 !important;
}

footer h2{
	color: var(--c2);
	margin-bottom: 4px;
}


footer .legal p{
    text-align: center;
    padding: 0 !important;
}


footer .datos-contacto p{
	display:flex;
}

footer .datos-contacto i{
    font-size: 12px;
    padding-right: 8px;
	color:#FFFFFF88;
}

footer .datos-contacto span{
	display:inline-block;
}

footer .fa-location-dot{
	position:relative;
	top:-20px;
}


ul.social li{
	scale:1;
	transition:.3s;
	opacity:0.4;
}

ul.social li:hover{
	scale:1.3;
	opacity:1;
}

ul.social li:hover i{

	color:var(--c2);
}


/*------------------*/
/*-------Colores-----------*/
.c1{
    color: var(--c1);
}
.c2{
    color: var(--c2);
}
.c1L{
    color: var(--c1L);
}
.c2L{
    color: var(--c2L);
}

.cL{
    color: var(--cL);
}

.cD{
    color: var(--cD);
}

.bg-c1{
    background: var(--c1);
    color:var(--cL)
}
.bg-c2{
    background: var(--c2);
}
.bg-c1L{
    background: var(--c1L);
}
.bg-c2L{
    background: var(--c2L);
}


/* Full Width */

.fw, .hero:after{
    position:relative;
    width: 100dvw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
    /* margin-bottom: 20vh; */
}


/* HERO */
.hero{
    /* background: url(img/hero.jpg) center center no-repeat;*/
    background-size: cover;
    height: 55vh;
    position:relative;
}

.hero::before{
    content: '';
    position: absolute;
    inset: 0;
	background-color: rgba(10, 35, 66, 0.75);
    z-index: 1;

}

.hero .content{
    z-index: 10;
    color:var(--cL);
    text-align:center;
    position: relative;
    top: -40px;
    /* margin: 20px; */
    /* padding: 20px; */
    /* max-width: 420px; */
}




.mapa{
    background: url(img/mapa-13.png) center bottom no-repeat;
    background-size: auto 34%;
    width:100%;
    height:380px;
    position: absolute;
    bottom:-2px;
    z-index: 4;
}

.mapa::after{
	content:"";
	display:block;
	width:80px;
	aspect-ratio:1/1;
	background:radial-gradient( var(--c2) 40%,  transparent 70%);
	border-radius:50%;
	position:relative;
	top: 270px;
	left: 50%;
	margin-left:-50px;
	opacity:.75;
	animation: faro 3s infinite alternate;
}


/* creo que esto se ha de booooorrrar!! --
@media (max-height:800px){
	.hero h1 img{
		width:75%;
	}
	.mapa{
		background-size: auto 30% !important;
	}
	.mapa::after{
			top: 55%;
	}
}

*/

@keyframes faro{
	from{ scale:0.5;}
	to{ scale:1; }
}


.h-scroll {
    overflow-x: auto;  /* 👈 Aquí el scroll */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}


.h-scroll ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    width: calc(520px * 8);
    overflow-x: auto;  /* 👈 Habilita el scroll horizontal */
    overflow-y: hidden; /* Solo horizontal */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    justify-content: flex-start;
}


.h-scroll ul li{
	display:flex;
}


.roll-fotos img{
	aspect-ratio:16/9;
	object-fit:cover;
	width:520px;
	border-radius:0;
}





.hero h1 img{
    /* max-width: 340px; */
    /* margin: 20px; */
    padding: 50px;
    filter: drop-shadow(0 0 60px #000000db);
    animation: fiuuu 6s;
    object-fit: contain;
}


@keyframes fiuuu{
	from{scale:0.8; opacity:0}
	to{scale:1; opacity:1}
}



.hgroup{
	max-width:750px;
	margin:0 auto;
	text-align:center;
}
.hgroup h2{
    font-size: 2.6rem;
    /* padding: 0 0 30px; */
    text-align: center;

	.small{
        font-size:1.2rem;
		display:inline-block;
    }
}

.onZeluan h2 span{
	color:var(--c2);
}

.bg-c2 h2 span{
	color:white;
}

.hgroup span{
  /* display: block; */
  /* text-transform: uppercase;*/
  /* opacity: 0.5;*/
  /* letter-spacing: 2px;*/
  /* font-size: 14px;*/
  /* font-weight: 700;*/
  /* margin-bottom: 20px;*/
    
}
/* ZELUAN */

.zeluan{
    padding: 0 2vw 0;
    background-size: 100% auto;
}



ul.zeluan-list li{
    width: 20%;
    min-width: 220px;
}

ul.zeluan-list li img{
    width:100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    padding: 40px;

    border-radius:30px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    margin-bottom:20px;

    transition:1s;
}


ul.zeluan-list li img, .sticker{

    aspect-ratio: 1/1 !important;

    border-radius:30px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    margin-bottom:20px;

    transition:1s;
}


.zeluan-list p,
.zeluan-list li{
	margin:0 !important;
}




 .sticker{
    aspect-ratio: 1/1 !important;
    width: 100%;
    height: auto;

    border-radius:30px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    margin-bottom:20px;

    transition:1s;
    
    display: flex;
    justify-content: center;
    align-items: center;
}


/* ANIM onZeluan*/

svg{
    scale:.8;
}





@keyframes rotate{
    from{rotate:0deg;}
    to{rotate:360deg;}
}

li a:hover #bobina{
    animation: rotate 2s linear infinite;
    transform-origin:47.1% 49.5%;
}


/* ANIM inZeluan */


@keyframes go{
    from{translate:0;}
    to{translate:36px;}
}

@keyframes opac{
    0%{opacity:0; }
    100%{opacity:1;}
}

a:hover svg .arrow{
    animation: go 1s both infinite;
    opacity:1;

}

a:hover svg .arrow.inicio{
    animation: opac 1s both infinite reverse, go 1s both infinite;
    opacity:0;
}
a:hover svg .arrow.fin{
    animation: opac 1s both infinite, go 1s both infinite;
    opacity:0;
}

 svg .arrow.fin{
    opacity: 0;;
}


.azul{
    transition:0.3s;
}

li a:hover .azul{
    fill:white !important;
}



/* enZeluan */



.btn_enZeluan svg{
    scale:.68;
}

.btn_enZeluan a #trazo{
	fill:var(--c2);
}

.btn_enZeluan a:hover #trazo{
	animation: 3s brocha;
	transform-origin: center;

	/*
	stroke-dasharray: 600;
    stroke-dashoffset: 0;
	stroke: var(--c2);
    stroke-width: 3;
	*/

}

@keyframes brocha{
	0%{ stroke-dashoffset: 600;
	   opacity:0.5;
	   scale:0.5;
	   rotate:30deg;
	   fill:transparent;
       }
    100% {
        stroke-dashoffset: 0;
    }
}
}

















a:hover .sticker{

 background-color: var(--c1);
}

/* Animacion pegatinas */

ul.zeluan-list li:hover .sticker{
    background:var(--c1);
    translate:0px -10px;
     outline: var(--c2) solid 4px;
     outline-offset:-10px;
 }



ul.zeluan-list li:hover img{
   background:var(--c1);
   translate:0px -10px;
    outline: var(--c2) solid 4px;
    outline-offset:-10px;
}

ul.zeluan-list li h3{
    text-align:center;
    font-size:34px;
    transition:0.3s;
}

ul.zeluan-list li h3 span{
    color:var(--c2);
    transition:0.3s;
}

ul.zeluan-list li p{
    padding: 18px 0 0 0;
    text-align:center;
    transition:0.3s;
    max-width: 100%;
    line-height: 16px;
}


ul.zeluan-list:hover li:not(:hover) h3 span{
    color:var(--c1);
}



ul.zeluan-list:hover li:not(:hover) h3{
    opacity:.3;
scale:0.9;}



ul.zeluan-list:hover li:not(:hover) img{
scale:0.9;}

ul.zeluan-list:hover li:not(:hover) p{
        opacity:.3;
    margin-top:10px;
}




/* Pajarito */

#pajarito,
#pajarito *{
	transition:1s;
}


#pajarito{
 scale:0.65;
}






#pajarito:hover{
	animation: pajaritoRotacion 3s infinite alternate;
}

#pajarito:hover .ojo{
	animation:pajaritoParpadeo 2s infinite;
}

#pajarito:hover .azul{
	fill:white;
	
}

#pajarito:hover .brillo{
	fill:var(--c1);
	
}


@keyframes pajaritoRotacion{
	0%{	rotate:0;	}
	40%{ rotate:30deg;		}
	100%{ rotate:-40deg;		}
}

@keyframes pajaritoParpadeo{
	50%{ opacity:1}

	55%{ opacity:0}
	
	60%{ opacity:1}


}








/* Version Movil Arranca animacion ella sola */

@media (max-width:820px){


	/*Scroll de imágenes */
	.h-scroll ul {
	    width: calc(320px * 8);
	}

	

	/* Bobina movil*/
	#bobina{
	    animation: rotate 2s linear infinite;
	    transform-origin:47.1% 49.5%;
	}

	/* Pajaro Movil*/
	#pajarito{		animation: pajaritoRotacion 3s infinite alternate;	}
	#pajarito .ojo{		animation:pajaritoParpadeo 2s infinite;	}
	/* #pajarito .azul{		fill:white;			}
	#pajarito .brillo{		fill:var(--c1);	} */

	/* Cronometro Movil*/
	svg .arrow{
    animation: go 1s both infinite;
    opacity:1;
	}

	svg .arrow.inicio{
    animation: opac 1s both infinite reverse, go 1s both infinite;
    opacity:0;
	}
	svg .arrow.fin{
    animation: opac 1s both infinite, go 1s both infinite;
    opacity:0;
	
	}

	svg .arrow.fin{
    opacity: 0;
	}


    .azul{
        transition:0.3s;
    }

    li a:hover .azul{
        fill:white !important;
    }


	/* Brocha Movil*/

	.btn_enZeluan a #trazo{
		animation: 3s brocha infinite alternate;
		transform-origin: center;
		/*
		stroke-dasharray: 600;
	    stroke-dashoffset: 0;
		stroke: var(--c2);
	    stroke-width: 3;	
		*/
	}

	/* galeria de fotos */
	
	.roll-fotos img{
	
		width:320px !important;
	}

}


.texto ul{list-style:disc;padding-left: 18px;display:block;}

.bg-c1 li::marker {
  color: var(--c2); /* aquí pintas el bullet */
}
.bg-c2 li::marker{
  color: white; /* aquí pintas el bullet */
}
}



.onZeluan{
	padding: 40px calc(50% - 680px) 20px !important;
}


/* landers*/


#landers{
	display:grid;
	gap:20px;
	grid-template-areas:
		"f f f v v v "
		"l t t t t t ";
	justify-items: stretch;
	align-items: start;
	padding-bottom: 22px !important;
	padding-top: 50px;
}

#landers .logo{           grid-area: l;}
#landers .fotoLanders{    grid-area: f;}
#landers .videoFoto{      grid-area: v;}
#landers .texto{          grid-area: t; padding-top:10px}




#landers .logo{
	width: 100% !important;
	height:auto;
	aspect-ratio:auto;
	margin-bottom: 20px;
	border-radius:0;
}


@media (max-width: 1100px) {
#landers .logo{
	width: 250px !important; 
	margin:0 auto;
}
	
	#landers{
		display:grid;
		grid-template-areas:
			"f"
			"l"
			"t"
			"v";
	}

#landers .texto p{/* text-align: justify; *//* hyphens: auto; */}

	  .separador5::before {
    content: "\A"; /* \A = salto de línea */
    white-space: pre; /* necesario para interpretar \A */
    /* display:block; */
  }

	
}








.onZeluan{
	padding: 10px calc(50% - 680px);
}


/* onzeluan*/

.onZeluan{
	border:transparent solid 20px;
}

#onZeluan{
	display:grid;
	gap: 20px;
	grid-template-areas:
		"l1 l1 .  v1 v1"
		"t1 t1 t1 v1 v1"
		"m1 m1 m1 m2 m2"
		"t2 t2 t2 t2 t2";
	justify-items: stretch;
	align-items: center;
	margin-top: 4px;
	padding-top: 40px;
	padding-bottom:18px;
}

#onZeluan .logo{           grid-area: l1;}
#onZeluan .videoFoto{      grid-area: v1;}
#onZeluan .texto{          grid-area: t1;}
#onZeluan .texto2{         grid-area: t2;}
#onZeluan .mapaAsturias{   grid-area: m1;}
#onZeluan .mapaEuropa{     grid-area: m2;}

#onZeluan .mapaAsturias img,
#onZeluan .mapaEuropa img{
	aspect-ratio: auto !important;
}


#onZeluan .texto2 p{
	margin-top:10px;
}


#onZeluan h3{ color:var(--c2)}



@media (max-width: 1100px) {

/* Todos los Videos para movil pasan a 16 novenos*/        
video{
        aspect-ratio:16/9 !important;
}

	
#onZeluan{
	display:grid;
	gap:20px;
	grid-template-areas:
		"l1"
		"v1"
		"t1"
		"m1"
		"m2"
		"t2";
	justify-items: stretch;
	align-items: start;
	}
}



/* porZeluan*/

#porZeluan{
	padding-top:40px;
	padding-bottom: 40px;
	display:grid;
	gap: 20px;
	grid-template-areas:
		"l  l   l   i   i   i"
		"t  t   t   i   i   i"
		"v1 v1 v1   v2  v2 v2";
	justify-items: stretch;
	align-items: start;
	/* margin-top:4px; */
}


#porZeluan .logo{           grid-area: l; align-self:end}
#porZeluan .texto{          grid-area: t; align-self:start}
#porZeluan .iconos{          grid-area: i; align-self:start}
#porZeluan .v1{       grid-area: v1; align-self:center}
#porZeluan .v2{       grid-area: v2; align-self:center}

#porZeluan .videoFoto{
	max-width:100%;
	aspect-ratio: auto;
	max-height: auto;
	/* height: auto; */
	object-fit:cover;
	}

#porZeluan .iconos img{object-fit:contain;border-radius: 0;}



@media (max-width: 1100px) {
#porZeluan{
	display:grid;
	gap:20px;
	grid-template-areas:
		"l"
		"v2"
		"t"
		"i"
		"v1";
	justify-items: stretch;
	align-items: start;
	}
}


/* inZeluan*/

#inZeluan{
	display:grid;
	gap: 20px;
	grid-template-areas:
		"l l l . . "
		"t t t t t "
		"e e e e e";
	justify-items: stretch;
	/* margin-top:4px; */
	padding-top: 40px;
}

#inZeluan .logo{           grid-area: l;  align-self: end }
#inZeluan .videoFoto{      grid-area: v;  align-self: center}
#inZeluan .texto{          grid-area: t;  align-self: start}
#inZeluan .esquema{        grid-area: e;  align-self: center}



#inZeluan .esquema img{
	max-width:100%;
	aspect-ratio:auto;
	max-height: auto;
	height: auto;
	object-fit:cover;
	/* margin-bottom:60px; */
	border-radius: 0;
	}


#inZeluan .videoFoto{
	max-width:100%;
	aspect-ratio:1/1;
    max-height: auto;
    height: auto;
    object-fit:cover;
    }

@media (max-width: 1100px) {
#inZeluan{
	display:grid;
	gap:20px;
	grid-template-areas:
		"l"
		"v"
		"t"
		"e";
	justify-items: stretch;
	align-items: start;
	}
	
}







/* enZeluan*/

#enZeluan{
	display:grid;
	gap: 20px;
	grid-template-areas:
		"l  t t ";
	justify-items: stretch;
	/* margin-top:4px; */
	padding-top: 60px;
	padding-bottom: 50px;
}

#enZeluan .logo{           grid-area: l;  align-self: start }
#enZeluan .videoFoto{      grid-area: v;  align-self: center}
#enZeluan .texto{          grid-area: t;  align-self: start}



#enZeluan .videoFoto{
	max-width:100%;
	aspect-ratio:1/1;
    max-height: auto;
    height: auto;
    object-fit:cover;
    }

@media (max-width: 1100px) {
#enZeluan{
	display:grid;
	gap:20px;
	grid-template-areas:
		"l"
		"v"
		"t"
		"f";
	justify-items: stretch;
	align-items: start;
	}
	
}









/* ZELUANES */
.onZeluan{
	margin-top:3px;
}
.onZeluan img{
    border-radius: 20px;

}
    
    
    
    
    

 
    
    

.content{
    padding: 0px 20px 0px 88px;    
        
        h2{
            font-size: 3rem;
            text-align: left;
        }
        h3{
        text-align: left;
        }




        .hgroup{
            padding: 7px 0px 20px 120px;
            margin-left: -100px;
            background: url(img/icon_inZeluan.png) 10px 0px no-repeat;
            background-size: 100px;
}

        ul{
            list-style: disc;
            display:block;
            padding-left: 10px;
            margin:10px;
            direction:ltr
        }
    }

    img{
        max-height: 800px;
        height: 100%;
        width:100%;
        object-fit:cover;
        /* aspect-ratio:1/1; */
    }

/* Iconos Apps*/
#onZeluan  .hgroup{ background-image: url(img/icon_onZeluan.png); }
#porZeluan .hgroup{ background-image: url(img/icon_porZeluan.png); }
#inZeluan  .hgroup{ background-image: url(img/icon_inZeluan.png); }
#enZeluan  .hgroup{ background-image: url(img/icon_enZeluan.png); }










/* Metodo */

    #metodo{
        background-image: url(img/textura.jpg);
        padding: 20px;
    }

    #metodo div{
        max-width: 550px;
        margin: 60px auto;
        padding: 80px 50px;
        background: #ffffff44;
        border-radius: 20px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
        backdrop-filter: blur(10px);
        color:white;
    }

    #metodo h2{
        font-size: 2rem;
        padding: 0 0 30px;
    }

    #metodo p{
        margin-bottom: 30px;
    }

/* sobrenosotros */

#sobrenosotros, 
#contacto{
    max-width: var(--mxw);
    padding: 40px 0;
    text-align: center;
    background: F5F5F5;
    margin: 0 auto;
}

#sobrenosotros p{
    padding: 10px 30px;
}

/* equipo */



/* equipo */


#equipo{
}   

#equipo > div{
    padding: 30px;
    display: flex;
    gap:20px;
    justify-content: center;
}

#equipo img{
    max-width: 160px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border:solid 6px var(--c2);
    border-radius:30px;
}

#equipo > div:last-child img{
    border:solid 6px var(--c1);
}


#equipo > div:last-child a.btn{
	background-color:var(--c1)
}


#equipo > div:last-child a.btn:hover{
	background-color:transparent;
	color:var(--c1);
	outline: var(--c1) 3px solid;
}


#equipo .boxed{
	display:flex;
	gap:20px;
	max-width:800px;
	
}

#equipo h2{
	font-size: 29px;
	/* margin-bottom: 16px; */
}


/* */

/* */

/* */

/* */



.btn{
    display:inline-block;
    padding: 10px 20px;
    border-radius: 20px;
    background: var(--c2);
    color: var(--cL);
    text-decoration: none;
    transition: 0.3s;
    margin: 20px 10px 0 0;
}

.btn:hover{
    background: var(--c1);
    color: var(--c2);
    transform: scale(1.1);
	outline:solid 3px var(--c2)
	
}


#porZeluan .btn{
	background-color:transparent;
	border:var(--c1) 2px solid;
	color:var(--c1);
}



#porZeluan .btn:hover{
	background-color:var(--c1);
	border:var(--c1) 2px solid;
	color:var(--c2);
}


/* Temporal */
.muestra img{
    width:80px;
}




/* Video backgrouund */

    /* Background Video Section */
    #video-section {
        position: relative;
        /* width:100dvw; */
        /* height: calc(80dvh - 20px); */
        overflow: hidden;
        background-color: #0A2342;
    }

    #background-video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100dvw;
        min-height: 100dvh;
        width: auto;
        height: 100dvh;
        z-index: 0;
        transform: translateX(-50%) translateY(-50%);
        object-fit: cover;
    }

 

    /* Darker overlay */
    .video-content {
        z-index: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 1em calc(50% - 210px);
    }
/*
    .video-content:after {
        content:"";
        width: 100dvw;
        position: absolute;
        top:0;
        left:0;
        inset: 0;
        background-color: rgba(10, 35, 66, 0.7);
        z-index: -1;
    }
*/





/* Flecha Down */
.flechadown{
	display:flex;
	justify-content:center;
	align-item:center;
	aspect-ratio:1/1;
	border-radius:100% !important;
	padding:20px !important;
	position:relative;
	scale:0.5;

	animation: rebote 2s infinite alternate;
}
.flechadown img{
	width:20px;
	object-fit:contain;
	
}


@keyframes rebote{
	0%{
		top:-30px;
	}
	100%{
		top:20px;
	}
}




.none img{
	display:none;
}


/* Button Sound */
button#toggle-sound{
	background:transparent;
	border:none;
	color:white;
	text-transform:uppercase;
	cursor:pointer
	}

button#toggle-sound i{
	padding-right:5px;
}


.onZeluan .logo{
	display:flex;
	flex-direction:row;
}


.onZeluan .logo .hgroup{
	display:flex;
	flex-direction:column;
	gap:0;
}

.onZeluan .logo .hgroup h2{
	margin-top:-10px;
}
.onZeluan .logo .hgroup h3{
	margin-top:-10px;
	/* color:red !important; */
}

.videoFoto{
    border-radius: 20px;
    max-height: 800px;
    height: 100%;
    width:100%;
    object-fit:cover;
    /* aspect-ratio: 1 / 1; */
    box-shadow: #000 0 0 0;
    transition: 1s;
    }



#video-section-bottom{
	overflow:hidden;
	height:30dvh;

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

	.video-content{
		height:auto;
		top:0;
		
	}

	

	h1{
		letter-spacing:5px;
		font-family: "Caveat", cursive;
		font-size:46px;

	}
		
}






/* Transition */

a, img{
	transition:0.3s;
}






.text-center{ text-align:center}




.text-c2{
    color:white !important;
}


.fotorio{
    background: url(img/JanelleySaulRioBar.jpg) center center no-repeat fixed;
    background-size: cover;
    width:100%;
    min-height: 30dvh;
}






/* Tablet Device*/
@media (max-width:850px){

	.onZeluan{
	border:transparent solid 5px;
	padding: 60px 5px 2vw 5px !important;
	}

	header{ justify-content:flex-end;}

	
	ul.zeluan-list li p{
		padding: 20px 0 !important;
		white-space: nowrap; /* evita salto de linea*/
	}

	
	.mapa{
	background-size: auto 120px;
	}

	#zeluan .hgroup h2{
    font-size: 1.22rem !important;
    }
	
    .hgroup h2 .small{
        font-size:14px;
        color:var(--c1)
    }

		/* spotlight */
	.mapa::after{
		margin-left:-50px;
		top: 280px; /* posicion punto */
	}
	.fotorio{
		background-attachment:scroll !important
	}
}

/* Movil Device */
@media (max-width:420px){
	ul.zeluan-list li p{width: 80dvw; margin-left: 0px}
}






/* ---- */

#logoprincipal {
  opacity: 0;
  transition: opacity 1s ease;
}
.header-main.active #logoprincipal,
.header-main.scrolled #logoprincipal{
	opacity:1;
}

.conjuncion{
	font-size:11px;
}



    @supports (padding-top: env(safe-area-inset-top)) {
      body {
        padding-top: env(safe-area-inset-top);
      }
    }



h1,h2, h3, h4, h5, p, a, li{
  text-wrap: pretty;
}


p, li{
	/* text-align: justify; */
	font-size:14px;
	line-height:16px;
	margin-bottom:14px;
	/* hyphens: auto; */
	/* overflow-wrap: break-word; */
	/* hyphenate-limit-chars:7; */
	}

li{
	text-align:left;
}


footer p{
	font-size:1rem;
	line-height:1.3rem;
}


.blanco{ color:#FFFFFF; font-size:12px; display:block; margin-top:8px;}






/* Reparaicón --- */



@media (max-width:480px){

	
	.onZeluan .hgroup{
		background-size:70px !important;
		background-position: 10px 4px !important;
		padding: 7px 0px 20px 85px !important;
		font-size:9px;

	}

	.onZeluan .hgroup h2{
		font-size:38px;
		margin-left:-2px;
	}

    section{
        gap:6px !important;
    }
	video{
		max-width:100% !important;
	}
	.onZeluan{
	    padding-top:24px !important;
	}
	
	footer .row{
	    font-size: 18px !important;
	}
}





/* scroll animation */

@keyframes show{
    from{
        opacity: 0;
        scale:55%;
        filter:blur(8px);
    }
    to{
        opacity:1;
        scale: 100%;
        filter:blur(0);
    }
}

img, video, div{
    view-timeline-name: --image;
    view-timeline-axis: block;
    animation-timeline: --image;
    animation-name:show;
    
    animation-range:entry 0% cover 10%;
    animation-fill-mode: both;
}



.legal a{
	font-size:12px;
	opacity:0.6;
}







main .onZeluan .texto ul {
    list-style: none;
    padding-left: 0;
}

main .onZeluan ul li {
    position: relative;
    padding-left: 32px;
}

main .onZeluan ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 20px;
    height: 20px;
    background-image: url('https://landersandcofino.com/img/li-ico/ico_onzeluan_.png');
    background-size: contain;
    background-repeat: no-repeat;
}




#onZeluan ul li::before {
    background-image: url('https://landersandcofino.com/img/li-ico/ico_onzeluan_.png');
}


#porZeluan  ul li::before {
    background-image: url('https://landersandcofino.com/img/li-ico/ico_porzeluan-.png');
}