:root {
  --c-0:#eefffc;
  --c-1:#3d5652;
  --c-2:#6dbfb0;
  --c-3: #eefffc;
  --c-4:#ff6666;
}

@font-face{font-family:'DomNarrow';font-weight:bold;font-style:normal;src:url("../webfonts/DomaineDisplayNarrowWeb-Semibold.woff2") format("woff2"),url("../webfonts/DomaineDisplayNarrowWeb-Semibold.woff") format("woff")}
@-webkit-keyframes fadeIn {0%{opacity: 0;}100% {opacity: 1;}}
@keyframes fadeIn {0%{opacity: 0;}100% {opacity: 1;}}

.wf-active body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

.fn{fill:none;}
a.logo .cl,
.home .ci,
.cl{fill:var(--c-1);}
.home nav div:last-of-type a .ci,
.ci{fill:var(--c-2);}

body {
  max-width: 100%;
  overflow-x: hidden;
  text-align: center;
  padding:0;
  background-color:#fff;
  background-clip: border-box;
  background-color: var(--c-0);
  font-weight: 300;
}


header {
  padding:5vw 3vw 30px;
  text-align: left;
  z-index: 5;
  background-color: #fff;
}

@media only screen and (min-width: 800px) {
  header {padding:60px 3vw 30px;}
}

header a{
  display: inline-block;
  max-width: 160px;
}

a.logo svg{
  max-width: 100px;
  height:auto;
}


/* section */
section[role=banner] {
  background-color: #fff;
}
section:not([role="banner"]) {
  background-color: var(--c-0);
  min-height: 50vh;
  font-weight: 300;
  color: var(--c-1);
}

section > div {
  width: 80%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 5vw 0;
  text-align: center;
  display: flex;
  justify-content:center;
}


section[role=banner] img {
  border: 2vw #fff solid;
    box-shadow:  0 8px 6px -6px rgba(0,0,0,.5);
    margin: 0 auto -10vw;
    width: 90%;
    max-width: 960px;
}
section[role=banner] + section {
  padding-top: 12vw;
}

section[role=banner] h1 {
  color: var(--c-1);
  font-family: 'DomNarrow', serif;
  padding:5vw 3vw 0;
  margin: 0 auto;
  font-size: 16px;

}

section[role=banner] h2 {
  font-family: 'DomNarrow', serif;
  color: var(--c-4);
  font-size: 42px;
  line-height: 1;
  padding:0 15px 15px;
  max-width: 600px;
  margin: 0 auto 30px;
  width: 90%;
}


section h3 {
  font-family: 'DomNarrow', serif;
  font-size: 32px;
  line-height: 1;
  color: var(--c-1);
  margin:8px auto;
}

section h5 {
  font-family: "Sacramento", sans-serif;
  font-size: 36px;
  color: var(--c-2);
  font-weight: 400;
  margin: 5vw auto;
  line-height: 1;
  width: 80%;
}


.copete {
  max-width: 800px;
  margin: 15px auto 30px;
  font-size: 18px;
  line-height: 1.8;
  width: 80%;
  text-align: left;
}

.copete a {
  color: var(--c-4);
}


section div.damero {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 960px;
  align-items: top;
}

section div.damero h3 {
  margin: 0 auto 15px;
  text-align: center;
}

section div.damero img {
  display: block;
  margin: 0 auto min(5vw, 30px);
  width: min(100%, 200px);
  aspect-ratio: 1 / 1;
  height: min(100%, 200px);
}

section div.damero p {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 60px
}

div.damero a {
  font-family: 'Sacramento', sans-serif;
  font-size: 24px;
  line-height: 18px;
  color:var(--c-4);
  padding:0;
  display: inline-block;
}


div.damero a:hover {
  color:var(--c-1)
}


section > div.arrow {padding:0;}
section > div.arrow.left svg,
section > div.arrow.right svg {
  transform:rotate(45deg);
  display: block;
  width: 20px;
  height: auto;
}

section > div.arrow.right svg {
  transform:rotate(-45deg);
}

.marco img, .marco video {
  border: 20px solid #fff;
  box-shadow:  0 8px 6px -6px rgba(0,0,0,.3);
  transition: transform 600ms 1s;
}

div:hover .marco img,
div:hover .marco video{
    transform: rotate(-2deg);
    position: relative;
}


section div video {
    max-width: 100%;
    position: relative;
}

p .listado {
  font-size: 90%;
}
.listado span {
  display: block;
  width: 100%;
  border-bottom: rgba(0,0,0,.1) solid 1px;
  margin: 20px 0;
  height: 10px;
}

@media only screen and (max-width: 799px) {
  section > div:not(.arrow) {
    flex-wrap: wrap;
  }

  section > div:not(.arrow) > * {
    width: 90%!important;
  }

  section > div div.foto {
    order:-1;
  }
}

@media only screen and (min-width: 800px) {

  header a{
    max-width: 200px;
  }

  section > div {
    display: flex;
    justify-content:space-around;
    align-items: center;
    gap:5vw;
    text-align: left;
  }

  section div.foto {
    min-width: 50%;
  }

  section[role=banner] h2 {
    font-size: 64px;
  }
  section h5 {
      width: 30%;
      font-size: 54px;
  }
  .copete {font-size: 22px;}

}


footer {
  padding:10vw 5vw 0;
  margin: 10vw 0 0 0;
  position: relative;
  background-color: #fff;
  display: flex;
  justify-content:space-between;
  align-items: flex-start;
  text-align: right;
}

footer div.fotoMiksa {
  width: 50%;
  max-width: 600px;
  margin-top: -15vw;
  align-self: flex-end;
}

footer h4 {
  font-family: 'DomNarrow', Georgia, serif;
  color: var(--c-1);
  font-size: 24px;
  line-height: 1;
  padding: 0;
  margin: 0;
}
footer p {
  font-size: 12px;
  font-weight: 300;
}



footer nav a {
  display: block;
  font-size: 14px;
  margin:20px 0;
  color: var(--c-1);
}

footer nav {
  padding-bottom: 30px
}

@media only screen and (max-width: 799px) {
  footer p span {
    display: block;
    font-size: 10px;
    padding-top: 4px;
    font-weight: 700;
  }

  footer nav a {
    border-top: solid 1px rgba(0,0,0,.1);
    padding-top: 20px
  }

}

@media only screen and (min-width: 800px) {

  section div.damero {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
  footer {padding:3vw 3vw 0;}
  footer div.fotoMiksa {width: 30%;}
  footer h4 {font-size: 36px;}
  footer nav  {
    display: flex;
    justify-content: space-between;
    gap:30px
  }
  footer nav a {
    padding: 4px 0;
    margin:30px 0 0 15px;
      color: var(--c-1);
  }
  footer nav a:hover {
    color: var(--c-2);
    
  }
  footer a[target="_blank"] {
    background: url(../img/ico-marker.svg) no-repeat left center;
    background-size: auto 80%;
    padding-left: 25px;
  }
    footer a[href*="wa.me"] {
      background: url(../img/ico-wa.svg) no-repeat left center;
      background-size: auto 80%;
      padding-left: 25px;
    }

  footer p span {
    display: inline-block;
    font-size: 12px;
  }
  footer p span::before {
      content: " | "
  }
}

@media only screen and (max-width: 799px) {}
@media only screen and (min-width: 410px) {}