:root{
  --f1:"EB Garamond",serif;
  --f2:"Noto Sans Kawi",sans-serif;
  --c1:#829FAC;
  --c1t:#829FAC77;
  --c1b:#29404F;
  --c2:#d8d49b;
  --c3:#8A223B;
}

.cf{color:#fff}
.c1{color:var(--c1)}
.c1b{color:var(--c1b)}
.c2{color:var(--c2)}
.c3{color:var(--c3)}

.fcf{fill:#fff}
.fc1{fill:var(--c1)}
.fc1b{fill:var(--c1b)}
.fc2{fill:var(--c2)}
.fc03{fill:var(--c3)}

.grdnt1{background:linear-gradient(120deg,var(--c1) 20%,var(--c1b) 80%)}
.grdnt2{background:linear-gradient(10deg, transparent 20%,#f1feff55 50%, transparent 80%)}
.grdnt3{background:linear-gradient(90deg,var(--c1b) 80%,var(--c3) 100%)}

.bg-cf{background-color:#fff}
.bg-c1{background-color:var(--c1)}
.bg-c1b{background-color:var(--c1b)}
.bg-c2{background-color:var(--c2)}
.bg-c3{background-color:var(--c3)}

.f1{font-family:var(--f1)}
.f2{font-family:var(--f2)}
.bold{font-weight:700}
.align-l{text-align:left}
.align-c{text-align:center}
.align-r{text-align:right}
.col-1{-webkit-columns:auto 2;-moz-columns:auto 2;columns:auto 2;-webkit-column-gap:50px;
  -moz-column-gap:50px;column-gap:100px;max-width:1080px;vertical-align:top}

.left{float:left}
.right{float:right}
.block{display:block}
.inline{display:inline}
.inline-block{display:inline-block}
.full-width{width:100%}
.rel{position:relative}
.abs{position:absolute}
.fixed{position: fixed !important}
.hidden{overflow-x:hidden;overflow-y:hidden}
.margin-auto{margin-left:auto;margin-right:auto}

.padd-s{padding:10px}
.padd-m{padding:50px }
.padd-l{padding:120px 0}

.flex,.flex-center{display:flex !important;align-items:center;flex-wrap:wrap;justify-content:space-evenly}
.flex-center{justify-content:center}


*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

@media screen and (prefers-reduced-motion: no-preference) {
  html,body{scroll-behavior:smooth}
}

body{font-family:var(--f2);margin:0;color:var(--c01);letter-spacing:.02em;font-size:1em;
  line-height: 1.6;font-weight:400}
  a{text-decoration: none;}

.more{height:60px}

.titulo,.subtitulo{letter-spacing:.05em;line-height: 1.1em;margin:0 0 20px;text-indent:0;
  text-shadow: 0px 0px 4px #829FAC77;}
.titulo{font-size:3.5em}
.subtitulo{font-size:1.8em}

.btn{padding:10px 30px;font-size:1.3em;letter-spacing:.15em;
  transition:opacity .6s ease;border:none;cursor:pointer}
.btn:hover{opacity:.6}

ul{padding:0}
.list li{padding-left:20px;list-style:none;position:relative}
.list li::before{content:"";height:12px;width:12px;left:3px;top:.2em;position:absolute;background-image:url(../img/bull.svg);background-repeat:repeat-x;background-size:contain}

.glow{box-shadow: 0px 5px 30px #829FAC77}
.shadow{box-shadow: 0px 2px 10px #03161d77;}
.container{min-height: calc(100vh - 610px);}
.contenido{max-width: 1080px;}
/*nav*/
#nav-icon{display:none;position:fixed;top:10px;  right: 10px;
  z-index: 999;  padding: 12px;  height: 60px;  width: 60px;
 }
#nav-icon span{display:block;height:4px;width:40px;opacity:1;background:var(--c1d);margin:0 0 8px}
#nav-icon span:last-child{margin-bottom:0}
#main-nav .redes { margin: 0 0 0 15px;}
#main-nav .redes a{  width: 40px;  padding: 10px;  margin: 0 0 0 5px;}
#nav-logo{ min-width: 300px;font-size: 2.6em;width: calc(100% - 900px);line-height: 1.3em;color:var(--c1);transition:color .8s ease; }
#nav-logo:hover{color:var(--c2);}
#main-nav{left:0;right:0;position:sticky;top:-1px;z-index:999;width:100%;min-height:60px;padding:5px 0 0;}
#main-nav ul{margin:7px 0px 0;padding:0 13px}
#main-nav li{display:inline-block;font-size:16pt;vertical-align:middle}
#main-nav li a{padding:0 7px;font-size: 1em;margin: 0 7px;font-weight: 400;padding: 5px 10px 10px;}
#main-nav .cel::after{ display: none;}
#main-nav a:hover svg{fill:var(--c2)}

/*end--nav*/

/*animaciones*/
.wave::before,.wave::after  {  content: '';top: 0;}
.wave,.wave::before,.wave::after {  position: absolute;padding-top: 2%; width: 100%;left: 0;
  background-image: url(../img/wave-nav.svg);  background-repeat: repeat-x;  background-size: 100%;
}
.wave {  z-index: 1; animation: wave 10s linear infinite;   background-position: center bottom;top:100%}
.wave::before {  opacity: .3;  animation: wave 10s linear infinite reverse;}
.wave::after {  opacity: .6;  animation: wave 20s linear infinite -4s;}
@keyframes wave { 0%{background-position:0}  100%{background-position:100vw}}

.w0::before,.w0b::after,.w1::before,.w2::before,.w1b::after,.w2b::after{  content: '';  position: absolute;  width: 100%;  left: 0;
    background-repeat: repeat-x; background-size: 100%;  background-position: 60vw bottom;  height: 3.33vw;
}
.w0::before,.w0b::after{background-image:url(../img/wave.svg)}
.w1::before,.w1b::after{background-image:url(../img/wave1.svg)}
.w2::before,.w2b::after{background-image:url(../img/wave2.svg)}
.w0::before,.w1::before,.w2::before{  top: -3.3vw;}
.w0b::after,.w1b::after,.w2b::after{  bottom: -3.3vw;  scale:1 -1;    z-index: +1;}


.curve {position: absolute; top:-7vw; left: 0;
  will-change: transform,stroke-opacity; overflow-x: hidden;height: 14vw;
  overflow-y: visible;width: 100%; stroke-linecap: round;stroke-opacity: 0;
}
.curve path {transform-origin: center; animation: curve 28s linear infinite;}
.curve .line1{stroke-width: 60;stroke:var(--c2);animation-delay:0s}
.curve .line2{stroke-width: 30;stroke:var(--c1);animation-delay:3s}
.curve .line3{stroke-width: 4;stroke:var(--c3);animation-delay: 6s}
@keyframes curve {
 0%  {transform:rotateX(-90deg) skewY(8deg);stroke-opacity:0}
 25% {transform:rotateX(  0deg) skewY(4deg);stroke-opacity:.7}
 50% {transform:rotateX( 90deg) skewY(0deg);stroke-opacity:.0}
 75% {transform:rotateX(180deg) skewY(4deg);stroke-opacity:.7}
 100%{transform:rotateX(270deg) skewY(8deg);stroke-opacity:0}
}


.blob{padding: 2%;}
.blob img, .blob::before{border-radius:80% 25% 55% 50% / 55% 30% 70% 50%;
  animation: flob 10s cubic-bezier(0.5, 0, .5, 1) infinite
}
.blob::before {
  position: absolute;overflow: visible;	content: '';height: 97%;width: 97%;	top: 0%;left:0%;
	border: 2px solid;	transform: rotate(-0deg);  animation-delay: 1s;
}
@keyframes flob{
  0%,100%{border-radius:80% 25% 55% 50% / 55% 30% 70% 50%;}
  50%{border-radius: 55% 50% 80% 25% / 70% 50% 55% 30%}
}

.cel {
	pointer-events: auto;	cursor: pointer;position: relative;font-weight: 600;line-height: 1.1em;
	display: inline-block;	margin:10px 20px;  font-size: 1.5em;text-align: center;
  border-radius: 80% 25% 55% 50% / 55% 30% 70% 50%;  padding: 7px 15px 10px 13px;
}
.cel,.cel::after {transition: border-radius 0.6s cubic-bezier(0.585, 2.5, 0.645, 0.55);}
.cel::after  {  content: '';  position: absolute;
  border-radius:77% 30% 58% 45% / 48% 42% 64% 59%;
   top: -5%; left:-4%;	width: 108%;height: 106%;	
   border: 2px solid;  transition-delay: .1s;
}
.cel:hover::after,.cel:hover {	border-radius: 55% 50% 80% 25% / 70% 50% 55% 30%}
/*end-animaciones*/

.posts article{width: 100%;overflow: hidden;background-color: var(--c2);
flex-direction: column; display: flex;  min-width: 340px;max-width:400px;margin: 10px;}
.posts .image{position: relative; border-radius: 20% 0 / 100%;overflow: hidden;width: 360px;margin: auto;height: 360px;}
.posts .image img{width:100%;height: auto;  position: absolute;  left: 0;}
.posts .conthumb{  max-width: 50%;}
.posts article .flex .rel{padding:30px 20px}
.posts article .flex{min-height:340px}
.posts article .flex.con-thumb{width:100%;min-height: 0;}

#contacto{
  background-image:url(../img/contacto.jpg);
  min-height: 550px;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #03161d;
  background-position-x: right;
}

#search .submit{
  border: none;
  height: 40px;
  width: 40px;
}
.contenido iframe, .contenido img {  max-width: 100%;}

#contacto article{width: 390px;margin-left: calc(50% - 390px);  padding: 20px 0;}
#contacto #redes{ margin-top: 10px;}
#contacto .redes a{ width: 50px; padding: 10px 13px;}
  #contacto  #redes a svg{height: 30px;}
  #se-logo{    width: 100px;    height: auto;    border-radius: 20px;}
#disclaimer{  line-height: 1.1em;  text-align: justify; width: 270px;margin: 10px;}
#cta{  max-width: 200px; padding: 15px 0px 15px 15px; max-width: 210px;  margin: 0 auto 20px;  display: block;}




@media screen and (max-width:900px) {
  .col-1{column-count:1}
  }

 @media screen and (max-width:800px) {
  #contacto{min-height: 330px; background-image: none;}
  #contacto article{margin: auto;}
  #main-nav #nav-logo{min-width: 200px; line-height: .7em;}
  #main-nav ul{float:none}
  #nav-icon{display:block}
  #main-nav{opacity:0;left:-200px;position:fixed;width:200px;height:100%;top:0;z-index:99;
    padding:10px;  border-left:4px solid var(--c01);transition:all .6s ease;
    box-shadow:0 0 80px -20px var(--c1t)}
  #main-nav ul{position:relative;display:block;opacity:1;text-align: center;}
  #main-nav ul li{width:100%;margin:5px;}
  #main-nav.menu-open{left:0;opacity:1}

.curve .line1{stroke-width: 120;}
.curve .line2{stroke-width: 60;}
.curve .line3{stroke-width: 8;}
#portada .curve {  top: 41vh;}
.curve {  height: 24vw;  }
.container {padding-top: 80px;}
 }

  @media screen and (max-width:660px) {
  .padd-m{padding:10px}
  .padd-l{padding:70px 0}
  .w1b::after, .w2b::after {bottom: -3vw;}
  .w1b::before, .w2b::before {top: 3vw;}
  body{font-size: 11pt;}
  #contacto article {    width: 100%;  }
  #disclaimer{ width: 250px;}
  .curve .line1{stroke-width: 180;}
.curve .line2{stroke-width: 90;}
.curve .line3{stroke-width: 10;}
#portada .curve {  top: 40vh;}
.curve {  height: 28vw;  }

  }