html {
  scroll-behavior: smooth; 
}

#introduccion{overflow-x: hidden;}
section, [id] {
  scroll-margin-top: 100px; 
}

* {
  font-family: "PT Serif", serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section{position: relative;}
a{color: #df9535; text-decoration: none;}
a:hover{text-decoration: underline;}
.copy a:hover{color: white;}
body {
  overflow-x: hidden;
}

/* NAVBAR */
.navbar {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100px;
  background: linear-gradient(45deg, #ffffff00 56%, #ffffff);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px;
  z-index: 10000000;
  box-shadow:0 0 100px #00000000; 
}


#fotosSecundarias div figure{margin-top: 50px }
#fotosSecundarias .margenSecundario{width: 40%; float: right; padding-left: 30px; margin-top: 100px;}

.logo {
  color: white;
  font-size: 20px;
  font-weight: bold;
}

.nav-links {
  display: flex;
  gap: 30px;
}

.nav-links a {

  font-weight: 400;
  font-style: normal;
  transform: scale(1.0); transform-origin: 50% 50%;
  padding: 5px;
position: relative;
  color: #333;
  text-decoration: none;
  transition: .3s linear all;
  font-size: 18px; top: 0;
  text-align: center;
  opacity: 0;
  
}

@media (min-width: 768px){

.nav-links a:after{
  text-align: center;
  margin: auto;
content: '';
display: block;
transition: .3s linear all;
position: absolute;
bottom: -8px;
width: 0%;
height: 3px;
background: #df9535; opacity: 0;
}

.nav-links a:hover:after{
width: 100%;
opacity: 1;
}

.nav-links a:hover{color:#df9535; transform: scale(.90);}

}

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: white;
}

/* MOBILE MENU */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #df9535;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  transform: translateY(-100%);
  z-index: 99999999;
  opacity: 0;
}
.mobile-menu img{filter: invert(1) saturate(0) contrast(1.22) brightness(4);     mix-blend-mode: lighten; width: 50vw}

.mobile-menu a {
  color: white;
  font-size: 24px;
  text-decoration: none;
}

/* SECTIONS */
section {
  padding: 0px 40px;
  min-height:50vh;
}

.hero {
  background: url('img/fondo1.jpg') center/cover no-repeat;
  min-height: 100vh;
  padding: 130px 40px;
      
z-index: 0;
  color: white;
  
  align-items: center;
  justify-content: center;
  text-align: center;
}


.hero:after{
  content: '';
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20vh;
    background: linear-gradient(0deg, black, transparent);
    z-index: 0;
}

.hero h1{display: block; z-index: 1001; position: relative; text-shadow: 1px 2px 4px black; margin-top: 22px}
.section img {
  width: 100%;
  margin-top: 30px;
}

.cards {
  display: flex;
  gap: 20px;
  margin-top: 40px;
}

.card {
  flex: 1;
  padding: 40px;
  background: #f4f4f4;
  text-align: center;
  border-radius: 10px;
}

.dark {
  background: #222;
  color: white;
}

/* PARALLAX */
.parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

/* RESPONSIVE */
@media(max-width: 767px){

  .nav-links {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .cards {
    flex-direction: column;
  }

}




/* Logo grande */
.hero img {
  width: calc(20vw + 50px);
  animation: rotacolor 40s infinite;
}
@keyframes rotacolor{

  0%{filter: hue-rotate(0deg);}
  30%{filter: hue-rotate(40deg);}
  70%{filter: hue-rotate(-40deg);}
  0%{filter: hue-rotate(0deg);}
}


/* Logo navbar oculto al inicio */
.navbar-logo {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.navbar-logo img {
height: 125px;
    top: 17px;
    position: relative;z-index: 4;
}
.navbar-logo:after{
  content: '';
  display: block;
  opacity: .4;
  background: #df9535; filter: blur(7px);
  border-radius: 100%; z-index: 0;
  width: 125px;
  height: 125px;
  top: 5px;margin-left: 15px; position: absolute  ;
}



.container {
  max-width: 80vw;margin-bottom: 40vh;
}

.split {
  opacity: 0;
  text-align:center;
  color: rgb(14, 16, 15);
  font-size: clamp(2rem, 5rem, 3vw);
  letter-spacing: 0.05rem;
  will-change: transform;
  color: #3b4937;
}

.split * {
  will-change: transform;
}


.spacer {
  height: 40vh
}

.container h2,
h2{
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-style: normal;
margin-bottom: .51em;
    font-size: calc(12px + 1vw);
    
  
}


@media (max-width:767px){

  .hero img{    width: calc(50vw + 50px);
  }
.navbar{ z-index: 9995000; background: transparent;}

.navbar-logo img{
  width: 90px;
  height: 90px;
}

header{
        box-shadow: none !important;
       background: linear-gradient(180deg, #654A28, #ffffff00) !important;
        padding: 45px 15px !important;
        height: 70px !important;
}

/*
.navbar-logo:after{
content: '';
        width: 65vw;
        position: absolute;
        right: 5vw;
        height: 2px;
        background: #eb9d38;
        bottom: 0;
}*/
.navbar-logo:after{display: none !important}
}

 .contenedor{padding: 80px 0; max-width: 1600px; margin: 0 auto; text-align: center;}
#introduccion{background: linear-gradient(0deg, #8bd374 0%, white 30%)}
#proyecto{background: linear-gradient(0deg, white 0%, #8CB49C 40%, #8bd374 70%);}

#introduccion figure{border-radius: 60px}

#introduccion .container h2{ }
.container{margin: 100px auto; max-width: 1400px; }

.volanta{font-size: calc(30px + 1vw); color: #eba140 /*#df9535*/; font-weight: 700; margin-bottom: 30px;   font-family: "Oleo Script Swash Caps", system-ui;
  font-weight: 400; margin-left: -30px; display: inline-block; position: relative; z-index: 2;
  font-style: normal;}

#fotosSecundarias{display: block; position: relative; padding: 30px}

#introduccion p{font-size: 28px; text-align: justify; max-width: 40vw; display: block; line-height: 1.5em;}


#proyecto .volanta{color : white; text-align: center; display: block;}

#proyecto p{    font-size: 28px;
    text-align: center;
    max-width: 960px;
    width: 70vw;
    margin-bottom: 2em;
    display: inline-block;
    line-height: 1.5em;
    margin: auto;
}

p{line-height: 1.5em; text-align: justify;}


#introduccion figure{clip-path: polygon(15% 75%, 75% 75%, 75% 15%, 15% 15%);
 opacity: 0; background-size: cover !important;
}


#ubicacion{padding: 0 0; overflow: hidden; height: 1000px;
    margin-bottom: -150px;
    position: relative;
}
#ubicacion iframe{ height:100%  ; min-height: 800px; margin-top: -150px }

.cuadro{
      width: 25vw;
    position: absolute;
    background: #d0f1de;
    top: 15vh;
    left: 15vw;
    padding: 3vw;
    box-shadow: 4px 8px 50px black;
    border-radius: 30px;
}

#ubicacion p{margin-bottom: 30px}

#contacto{background-image: url('img/fondo_contacto.jpg'); background-size: cover; background-position: bottom center; background-repeat: no-repeat;}

#contacto h2,
#ubicacion h2{
font-family: "Oleo Script Swash Caps", system-ui;
    font-weight: 700;
    font-style: normal;
    color: #333;
    display: block;
   
}
#ubicacion h2{color: #69a582}
#ubicacion a{color: #476955; transition: .3s linear all; margin-bottom: 15px; display: inline-block;}
#ubicacion a:hover{color: #000; text-decoration: none}
#ubicacion a i{font-size: 1.5em;    position: relative; margin-right: 5px;
    top: 5px;
}

#contacto h2{
 background: #edd0a9;
     max-width: 70vw;
    width: 350px;
    margin: -66px auto 0;

}



#contacto {
  min-height: 700px;
  padding: 0px 0;
 position: relative;
  
  background-size: cover;
  background-position: 70% 60%;
  background-repeat: no-repeat;
  margin-bottom: -1px;
}
#contacto:after{
  content: '';
  width: 100vw;
  height: 10vh;
  background: linear-gradient(0deg, #000000c9, transparent);
  bottom: 00;
  position: absolute;
  left: 0;
  display: block;
}
#contacto:before{
  content: '';
  width: 100vw;
  height: 10vh;
  background: linear-gradient(180deg, #000000c9, transparent);
  top: 00;
  position: absolute;
  left: 0;
  display: block;
}
.marcoContacto{margin: auto;
    background: linear-gradient(0deg, #ebcea8c4, #ebcea8 50%);
    padding: 30px;
    border-radius: 81px;}
.formularioContacto  {border: 4px solid #444; border-radius: 60px; padding: 40px; }

#contacto .contenedor {
    padding: 120px 0;}

#contacto h3 {
  color: #444;
}
#contacto button {
  color: #fff
}
#contacto .border-form-control {
  outline: none;
}
#contacto .border-form-control:focus, #contacto .border-form-control:hover {
  color: #9f3a23;
  border-bottom-color: #444;
}
#contacto .error {
  color: #d97c1c;
}

.encabezadoContacto{color: #333; margin: 30px; font-size: 1.2em}

/* Border Form Design
---------------------------------------------------------------------------- */

.border-form-control {
  height: 42px;
  width: 100%;
  padding: 7px 4px;
  font-size: 17px;
  letter-spacing: 1px;
  background-color: transparent !important;
  border-top: transparent;
  border-right: transparent;
  border-left: transparent;
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-color: #444;
  color: #444;
  margin-bottom: 15px;
  
  color: #444;
}
.border-form-control:focus, .border-form-control:hover {
  color: #333;
}
#contacto textarea {
  min-height: 8em;
  border-top: #444 !important;
  border-right: #444 !important;
  border-left: #444 !important;
  border-width: 1px;
  border-color: #444;
}
.button.button-large.button-color {
font-weight: 700;
    height: 48px;
    line-height: 48px;
    padding: 0 32px;
    font-size: 16px;
    background-color: #9f3a23;
    transition: .3s linear all;
    border-radius: 50px;
    margin-top: 30px;

}
.button.button-large.button-color:hover {
  background-color: #111;border: 1px solid #444;
}
.button {
  display: inline-block;
  position: relative;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  margin: 5px;
  padding: 0 22px;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  background-color: #9f3a23;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
}
.hidden {
  display: none !important;
}
 .border-form-control::-moz-placeholder {
font-weight: 300;
color: #333;
}
.border-form-control:-ms-input-placeholder {
font-weight: 300;
color: #333;
}
.border-form-control::-webkit-input-placeholder {
font-weight: 300;
color: #333;
}
textarea.border-form-control {
  resize: none;
  overflow: hidden;
  word-wrap: break-word;
}
#footer, .footer,.copy {
  border-top: none !important;
}

.copy .contenedor {
    padding: 20px 0;
    max-width: 1600px;
    margin: 0 auto;
    text-align: left;}

.copy .contenedor .col-6 a{white-space: nowrap; margin-bottom: 20px ; display: block; transition: .3s linear all}

.margenFooter {
  display: inline-flex;
  width: 100%;
  max-width: 1600px;
}

#contacto a {
  color: #9f3a23
}

#ancla1{position: relative; clear: both;}
.mapaDist{width: 100%; height: auto; margin-top:50px ; max-width: 900px; border: 4px solid white; border-radius: 40px; position: relative; clear: both;
  box-shadow: 0 0 30px rgba(0, 0, 0, .50); margin-left: -10vw}


#entorno .recuadros h3{text-align:left;margin-bottom:50px;
    margin-bottom: 30px;
    margin-top: -50px;
    padding: 10px 0;
    display: block;
    width: 200px;
    text-align: center;

}
#entorno .recuadros {
  display: flex;
  flex-wrap: wrap; 
  gap: 30px;
  list-style: none;
  padding: 0; 
}

#entorno .recuadros .card {
border-radius: 30px;
    width: calc(33.33% - 20px);
    min-height: 240px;
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    text-align: left;
    color: white; flex: auto;
}
#entorno .recuadros .card .marco{border: 2px solid white; width: 100%; height: 100%; border-radius: 20px; padding: 30px;}

.row{    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));}

.col-1{max-width: 8.8888888888%; display: inline-block; flex: 0 0 auto;  width: 8.8888888888%;}
.col-2{max-width: 16.666666666%; display: inline-block; flex: 0 0 auto;  width: 16.6666666666%;}
.col-3{max-width: 25%; display: inline-block; flex: 0 0 auto;  width: 25%;}
.col-6{max-width: 50%; display: inline-block; flex: 0 0 auto;  width: 50%;}
.col-9{max-width: 75%; display: inline-block; flex: 0 0 auto;  width: 75%;}
.col-12{max-width: 100%; display: inline-block; flex: 0 0 auto;  width: 100%;}



@media (max-width:767px){

.col-3,.col-6,.col-9{max-width: 100%; display: inline-block; flex: 0 0 auto;  width: 100%;}

#entorno .recuadros .card {
        width: 100%; 
        min-height: auto; 
    padding-bottom: 30px; 
  }

  #entorno .recuadros {

    gap: 20px; 
  }


}
footer{
    background: linear-gradient(0deg, #9f3a23 50%, #9f3a23bf);
    color: #edd0a9;
   
    z-index: 342;
    position: relative;
    backdrop-filter: blur(2px);
  }

.copy{background: #231e06; color: #edd0a9}
footer h3{margin-bottom: 15px; color:#edd0a9 !important }
footer p{text-align: justify;     padding: 0 30px;}
#contacto footer .contenedor{padding: 70px 0 !important}

.color1{color: #6eb5a4; border-color: #6eb5a4; }
.color2{color: #8CB49C; border-color: #8CB49C; }
.color3{color: #E2C579;border-color: #E2C579;}
.color4{color: #DD702D;border-color: #DD702D;}
.color5{color: #A93319;border-color: #A93319;}

.nav-links a:nth-child(1):hover{color: #6eb5a4;}
.nav-links a:nth-child(2):hover{color: #8CB49C;}
.nav-links a:nth-child(3):hover{color: #E2C579;}
.nav-links a:nth-child(4):hover{color: #DD702D;}
.nav-links a:nth-child(5):hover{color: #A93319;}
.nav-links a:nth-child(6):hover{color: #8e7491;}

.nav-links a:nth-child(1):hover:after{background: #6eb5a4;}
.nav-links a:nth-child(2):hover:after{background: #8CB49C;}
.nav-links a:nth-child(3):hover:after{background: #E2C579;}
.nav-links a:nth-child(4):hover:after{background: #DD702D;}
.nav-links a:nth-child(5):hover:after{background: #A93319;}
.nav-links a:nth-child(6):hover:after{background: #8e7491;}


#entorno .recuadros .card:nth-child(1) {background: #6eb5a4;}
#entorno .recuadros .card:nth-child(2)  {background: #8CB49C;}
#entorno .recuadros .card:nth-child(3) {background: #E2C579;}
#entorno .recuadros .card:nth-child(4) {background: #DD702D;}
#entorno .recuadros .card:nth-child(5) {background: #A93319;}
#entorno .recuadros .card:nth-child(6) {background: #8e7491;}

#entorno .recuadros .card:nth-child(1) h3{background: #6eb5a4;}
#entorno .recuadros .card:nth-child(2) h3  {background: #8CB49C;}
#entorno .recuadros .card:nth-child(3)  h3{background: #E2C579;}
#entorno .recuadros .card:nth-child(4)  h3{background: #DD702D;}
#entorno .recuadros .card:nth-child(5) h3 {background: #A93319;}
#entorno .recuadros .card:nth-child(6) h3 {background: #8e7491;}




/**************************************/
/************* DSNET ******************/ 

.dsnet1 a {
  margin-top: 21px;
  float: right;
}
.dsnetbot {
  float: right;
  display: inline-block;
  margin: 5px 5px 5px 0;
  width: 180px;
  text-align: center;
  line-height: 26px !important;
  color: #ccc;
  border: 2px solid #eb9d3824 !important;
  border-radius: 20px;
  overflow: hidden;
  height: 30px;
  position: relative;
  text-decoration: none!important;
  transition: .3s linear all;
}
.dsnetbot:hover {
  box-shadow: 0px 0px 18px 3px rgba(0,0,0,0.31);
}
.dsnetbot i {
  display: block;
}
.dsnetbot i p {
  margin: 0; font-family: Arial, serif;
  padding: 0;
  height: 38px;
  text-decoration: none!important;
  font-size: 13px; line-height: 26px;
  font-weight: 700 !important;
  letter-spacing: 0px;
  text-shadow: none;
  font-style: normal;
}
.dsnetbot * {
  transition: all 0.3s linear;
}
.dsnetbot i:last-child {
  background: #eb9d38; 
}
.dsnetbot i:first-child {
  background: transparent;
}
.dsnetbot i:last-child p {
  color: black !important; text-align: center;
}
.dsnetbot i:first-child p {
  color: #eb9d38 !important; text-align: center;
}
.dsnetbot:hover i:first-child {
  margin-top: -38px;
}

    .botonMensaje .btn3{
      width: 40px;
      box-shadow: 2px 4px 8px rgba(0, 0, 0, .15);
      background-color: #2596d3;
      height: 40px;
      display: block;
      border-radius: 50px;
      border: 0;
      padding: 0 0;
      transition: .2s linear all;
      transform-origin: 50% 50%;
      transform: scale(1.0);
      overflow: hidden;
      }


.botonMensajeWhatsapp{
  position: fixed;
  bottom: 15px;
  right: 80px;
  z-index: 9999999999;
}

.botonMensajeWhatsapp a {width: 58px;
      box-shadow: 2px 4px 8px rgba(0, 0, 0, .15);
      background-color: #2fbd26;
      height: 58px;
      display: block;
      text-align: center;
      border-radius: 50px;
      border: 0;
      padding: 11px;
      transition: .2s linear all;
      transform-origin: 50% 50%;
      transform: scale(1.0);
      overflow: hidden;}
.botonMensajeWhatsapp a:hover{background-color: black;  transform: scale(.85);}

.botonMensajeWhatsapp a i{font-size: 24px; height: 36px; width: 100%; display: block; background-size: cover;
   
   }
.botonMensaje .btn3:hover{background-color: black;  transform: scale(.85);}
        .botonMensaje .btn3 i{font-size: 22px}

       .bh-widget-page-wrapper{z-index: 432423 !important; }

       .bh-w-popup-chat{
        
        box-shadow: 2px 4px 10px rgb(101 111 125)!important;     
     border: 2px solid #128c7e; 
     position:relative}

.scrollTop img{width: 90%}
.scrollTop {
  position: fixed; padding: 5px;
  bottom: 20px;
  right: 20px;
  background: #9f3a23;
  display: inline-block;
  width: 46px;
  height: 46px;
  z-index: 9999999999;
  text-align: center;
  padding-top: 8px;
  color: #000000c4;
  font-weight: bold;
  transition: .3s linear all;
  border: 2px solid transparent;
  pointer-events: none;
  opacity: 0;
}

.scrollTop.visible {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}
.scrollTop:hover {
  background: #177e5ca1;
  color: #fff;
  border: 2px solid #fff;
}

.copy small{font-family: Arial, Serif; opacity: .7}

.copy .col-6{padding: 0 30px}

.vermasbot {
  position: relative;
  width: 24px;
  height: 24px;
  display: block;
  padding: 20px;
  transform: scale(1.5);
}
.linkchevron {
display: block;
    height: 100px;
    width: 100px;
    margin: auto;
    position: absolute;
    bottom: 10vh;
    left: calc(50% - 50px);
    z-index: 1;
}
.chevron {
  position: absolute;
  width: 28px;
  height: 3px;
  
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}
.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}
.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}
.chevron:before, .chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #fff;
}
.chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
}
.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}
 @keyframes move {
 25% {
 opacity: 1;
}
 33% {
 opacity: 1;
 transform: translateY(30px);
}
 67% {
 opacity: 1;
 transform: translateY(40px);
}
 100% {
 opacity: 0;
 transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
}
}
 @keyframes pulse {
 to {
 opacity: 1;
}
}



.foto5{
    transform: scale(.5);
    min-height: 50vh;
    opacity: 0;
    position: absolute;
    right: 10vw;
    margin-top: 300px;
    width: 32vw;
    height: 25vw;
    border: 3px solid white;
    display: block;
    background-size: cover !important;
    
    z-index: 21312;
    border-radius: 50px;
    object-fit: cover;
    clip-path: inset(50% 50% 50% 50% round 20px);
    clear: both;

}




    svg.linea2 {
  position: absolute;
  user-select: none;
  pointer-events: none;
  width: 25vw;
  top: -10vh;
  right: 0;
  height: 1000px;
  z-index: 5;
}
svg.linea2 path {
  fill: none;
  stroke-miterlimit: 10;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke: #52a940;
  stroke-width: .251rem;
}

.figuraAnimada2, .figuraAnimada3,.figuraAnimada4{position: relative; z-index: 99999; clip-path: inset(50% 50% 50% 50% round 20px); max-height: calc(90vh - 100px);}
.figuraAnimada{width: 60vw; max-width: 640px; min-height: 600px; margin-top:-100px; position: relative;clip-path: inset(50% 50% 50% 50% round 20px);}

    svg.linea1 {
position: absolute;
    user-select: none;
    pointer-events: none;
    width: 25vw;
    top: 45vh;
    left: -10vw;
    height: 901px;
    z-index: 5;
    transform: rotate(-23deg);
}
svg.linea1 path {
  fill: none;
  stroke-miterlimit: 10;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke: #52a940;
  stroke-width: .172rem;
}


@media (min-width:768px) and (max-width:1600px){

  .navbar-logo img {
    height: 115px;
    top: 25px;}
.navbar{height: 80px; padding: 40px}
  .figuraAnimada{width: 40vw;}
    .botonMensajeWhatsapp{transform: scale(.9);}

.volanta{margin-left: 50px}
#proyecto p,
#introduccion p {
    font-size: 20px;
}
.foto5{right: 3vw}
.cuadro {    width: 33vw;}

#ubicacion iframe {min-height: 1000px;}

footer p{    max-width: 90%;
    margin: auto; padding: 10px;
}

.copy .row{        padding: 0 45px;    height: 100px;}
.scrollTop{right: 40px}
.botonMensajeWhatsapp {right: 100px;}

}



@media (max-width: 479px){


#proyecto{position: relative; margin-top:0 }
section, [id] {
  scroll-margin-top: 0px; 
}

#entorno .recuadros h3{width: unset !important;}
#contacto .contenedor {
    padding: 120px 20px;
}
section{overflow: hidden;}





.marcoContacto {
    padding: 10px;
    width: 86% !important;        border-radius: 30px;
    
}

#contacto h2 {
    background: unset;
    max-width: unset;
    width: 90%;
    margin:0 auto;font-size: 32px;
        line-height: 1em;
}
.encabezadoContacto{font-size: 16px; text-align: center;}
.copy {height: 250px; overflow: hidden;}

.copy .contenedor{width: 100vw; text-align: center;}
body{width: 100%}


  .figuraAnimada,
  .figuraAnimada2,
  .figuraAnimada3,
  .figuraAnimada4,
  .foto5,
  .split,
  .volanta {
    opacity: 1 !important;
    clip-path: none !important;
  }


  .figuraAnimada,
  .figuraAnimada2,
  .figuraAnimada3,
  .figuraAnimada4{        width: 80vw !important;
        margin: 0 0;
        margin-left: unset !important;
        margin-top: 20px !important;
        aspect-ratio:unset;
        min-height: 200px !important;
        max-height: 60vw;
        border-radius: 8px !important;
        background-position: 50% 50% !important;
    }



.figuraAnimada2{    width: 104vw !important;
    margin-left: -10vw !important;
    border-radius: 0px !important;}

#fotosSecundarias{padding:  0 0 !important}
svg{display: none ; visibility: hidden;}
.container {
    margin: 10px auto;
    max-width: 100%;
}

.contenedor {
    padding: 30px 0;}


  .foto5{display: none; visibility: hidden;}

.mapaDist {
    width: 100%;
    height: auto;
    
    border-radius: 20px;
    
    box-shadow: 0 0 10px rgba(0, 0, 0, .50);
    margin-left: 0vw;
}
  .navbar-logo img {
    height: 100px;
    top: 25px;}

  
    .botonMensajeWhatsapp{transform: scale(.8);}

.volanta{margin-left: 0px; font-size: 28px; margin-top: 20px; margin-bottom: 0}
#proyecto p,
#introduccion p {
    font-size: 16px; max-width: 100vw;
}
.foto5{right: 3vw}
.cuadro {    width: 33vw;}

#ubicacion iframe {min-height: 1000px;}

footer p{    max-width: 90%;
    margin: auto; padding: 10px;
}

.copy .row{        padding: 0 45px;    height: 100px;}
.scrollTop{right: 40px; }
.botonMensajeWhatsapp {right: unset;
        left: 20px;
    }



#fotosSecundarias .margenSecundario{width: 100%; float: unset; padding-left: 0px; margin-top: 20px;}


#ubicacion {
    padding: 0 0;
    overflow: hidden; margin:;
    height: unset !important;
    margin-bottom: 0px; width: 100%;
    position: relative;}
    #ubicacion iframe {
      width: 100vw;
        min-height: 400px;
        height: 400px;
    }
     #ubicacion .cuadro{position: relative; width: 100vw;top: 0;
        left: 0; border-radius: 0; box-sizing: unset; border: unset; padding: 30px;
        box-shadow: unset !important;
        margin: 0 0;
        clear: both;
}
#ubicacion p {
    
    max-width: 80vw;}

#ubicacion h2 {
    
    font-size: 30px;}


.formularioContacto {
    border: unset;
    border-radius: 8px;
    padding: 10px;
}
footer .col-3,
footer .col-6{
      margin-bottom: 25px;
    }
.copy .contenedor small{font-size: 11px; margin-bottom: 20px; display: block;}
.dsnetbot{    float: none;
    margin: auto;}

  }


.form-msg {
  padding: 15px 20px;
  border-radius: 8px;
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.5;
}

.form-msg.success {
  background: #92cb96;

    color: white !important;
    padding: 20px;
    display: block;
    text-align: center;
    max-width: 447px;
    border-radius: 20px;
    margin: auto;
    border: 3px solid white;
    box-shadow: 0 0 30px #0000007a;
}

.form-msg.error {
  background: #fdecea;
  color: #c62828;
  border-left: 4px solid #ef5350;
}


#general{background: radial-gradient(white 50%, #89af8a 80%);}

#general h2{text-align: center; padding: 20px; font-size: 24px; color: #222; width: 100%}
#general h2 a{color: #57ab59}

#iframePrecios{border:0 ; margin: auto; display: block; width: 410px;  mix-blend-mode: multiply;  height: 1200px;}
.cuadroPrecios{

color: #222;
    border: 4px solid #222222;
    max-width: 900px;
    margin: auto;
    padding: 30px;
    font-size: 16px;
    text-align: center;
    background: #ffffff66;
    border-radius: 30px;
}
.cuadroPrecios a{font-weight: bold; color: #3c9f3f}
.cuadroPrecios p,
.cuadroPrecios h3{text-align: left;}

.subseccion h1{  font-family: "Oleo Script Swash Caps", system-ui; font-size: calc(30px + 1vw); color: #57ab59;
  font-weight: 400}
.subseccion .navbar-logo {
    opacity: 1 !important;}

.subseccion .navbar{
  box-shadow: rgba(0, 0, 0, 0.267) 0px 0px 100px !important;
    background: linear-gradient(45deg, rgb(255, 255, 255) 56%, rgb(255, 255, 255)) !important

}


@media (max-width: 479px){


  .subseccion #general{background: radial-gradient(white 50%, #89af8a 100%);}
  .subseccion .navbar{    box-shadow: unset !important;
    background: linear-gradient(180deg, rgb(0 0 0), rgb(0 0 0 / 0%)) !important;
}
}







 .colorlib-footer ul {
      padding: 0;
      margin: 0; }
.colorlib-footer ul li {
        padding: 0;
        margin: 0;
        display: inline;
        list-style: none; }
 .colorlib-footer ul li a {
  font-size: 30px;
  transition: .3s linear all;
          color: rgba(255, 255, 255, 0.85);
          text-shadow: 1px 3px 6px rgba(0, 0, 0, 1.0);
          position: relative; display: inline-block;
          transform: scale(1.0);transform-origin: 50% 50%;
          padding: 9px; }
    .colorlib-footer ul li a:hover, 
   .colorlib-footer ul li a:active,
     .colorlib-footer ul li a:focus {
            text-decoration: none;
            outline: none;
            color: #eba140; 
            transform:scale(1.5); }

            .mobile-menu .colorlib-footer ul li a{opacity: 1 !important;   text-shadow: none; font-size: 22px}

.terminos .row{max-width: 960px; width: 100%; margin: auto;}
.terminos p{display: block; margin-bottom: 20px; width: 100%}

.linkUbi{
      border: 1px solid #7ab592;
    border-radius: 20px;
    padding: 0px 9px;
    margin-left: 4px;
    transition: .3s linear all;
    background: #7ab59200;;
}

.linkUbi:hover{
  background: #7ab592; color: #333;
}