@font-face { font-family: 'Jost'; src: url('../fonts/Jost-VariableFont_wght.ttf') format('truetype'); font-weight: 1 999;}

.light {  font-weight: 300; font-variation-settings: 'wght' 300;}
.regular {  font-weight: 400; font-variation-settings: 'wght' 400;}
.medium {  font-weight: 500; font-variation-settings: 'wght' 500;}
.bold {  font-weight: 600; font-variation-settings: 'wght' 600;}
.extra-bold {  font-weight: 800; font-variation-settings: 'wght' 800;}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* GLOBAL////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ORIENTACION HORIZONTAL////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen {
/* RESET PAGE */
html, body,
div, span,
h1, h2, h3, h4, h5, h6, p,
a, em, font, img, strong,
dl, dt, dd, ol, ul, li,
form, label, fieldset, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
header, main, footer,
article, aside, canvas, embed,
picture, figure, figcaption, hgroup,
menu, nav, output, ruby, section, details, summary,
address, blockquote, cite,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:none;
                          box-sizing: border-box;}

/*HTML 5*/
header, main, footer,
article, aside, canvas, embed,
picture, figure, figcaption, hgroup,
menu, nav, output, ruby, section, details, summary,
address, blockquote, cite,
time, mark, audio, video {display: block;}

:root {
  /*colores*/
  --verde: #80AE12;
  --yellow: #F9C332;
  --blanco: #ffffff;
  --grisblanco: #F2F2F2; 
  --grismedio:#b9b9b9;
  --griscemento: #464545;
  --negro: #000;
  
  --grisproyecto:#59605B;
  
  /*animaciones*/
  --easing-classic: ease-in-out;
  --easing: cubic-bezier(.25,.8,.25,1); 
}

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

/*TEXTOS*/
p.general { font-size: 1rem; line-height: 1.7em !important; color: var(--griscemento);}
strong { font-weight: 600;}
h1, h2, h3, h4, h5, h6 { font-weight:normal;}
h2.general {  font-size: 2.5rem; font-weight: 600; color: var(--verde);}
 
ul { list-style: none;}

a { text-decoration:none !important; }
a, figure, img { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

/*FORMULARIO:::::::::::::::::::::::::::::::::::::::::::::::::::*/
label {}

::placeholder { color: #6B6B6B; opacity: 1;}

input, textarea, select, button  { margin:0; padding:0; outline:0; border:0;
                                    box-sizing: border-box;}
input.general,
textarea.general { font-size:1.1rem; border:1px solid #CFC9C9;  padding:5px 10px; background-color:#FFF;  margin-bottom:10px}

/*focus*/
input.general:focus,
textarea.general:focus { outline:1px solid var(--verde);}   


/*BOTONES:::::::::::::::::::::::::::::::::::::::::::::::::::*/
.btn-verde{ display: inline-block; padding: 10px; border-radius: 5px; font-size: 1rem; font-weight:600; color:var(--blanco); background-color: var(--verde); cursor: pointer;
            -webkit-transition:  background-color 0.3s var(--easing-classic);
            transition:  background-color 0.3s var(--easing-classic);}


.btn-verde-out { display: inline-block; padding: 7px; border-radius: 5px; font-size: 0.9rem; font-weight:600; border:1px solid var(--verde); color: var(--grisproyecto); cursor: pointer;
            -webkit-transition:  border-color 0.3s var(--easing-classic);
            transition:  border-color 0.3s var(--easing-classic);}


.btn-verde-txt {display: inline-block; font-size: 1rem; font-weight:600; color:var(--verde);
                -webkit-transition: color 0.3s var(--easing-classic);
                transition: color 0.3s var(--easing-classic);}                


.btn-verde-wapp {display: inline-block; padding: 10px 10px 10px 35px; border-radius: 5px; font-size: 1.3rem; font-weight:600; color:var(--blanco); background: var(--verde) url("imagenes/wapp-blanco.svg") no-repeat 10px 50%; cursor: pointer;
            -webkit-transition:  background-color 0.3s var(--easing-classic);
            transition:  background-color 0.3s var(--easing-classic);}

/*TABLAS:::::::::::::::::::::::::::::::::::::::::::::::::::*/
table, tr, th, td {  border-collapse: collapse; vertical-align: middle;}
table.general {}

/*MODAL::::::::::::::::::::::::::::::::::::::::::::::::::::*/
.Modal { position:fixed; z-index:9995; top:0; left:0;  overflow-x:hidden; overflow-y: auto;  width:100%; height:100%; padding:40px 20px; background: rgba(0, 0, 0, 0.8); opacity:0; visibility:hidden;
         display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
		 -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
		 transition: opacity 0.3s ease, visibility 0.3s ease;}        
        
/*Mobile*/
.Mobile .Modal { overflow-x: scroll; -webkit-overflow-scrolling: touch;}
/*......*/

    a.cerrarx { position:absolute; z-index: 100; top:30px; right:30px; display: block; cursor:pointer; width:35px; height:35px; background:#000 url("imagenes/icono-menu-close-blanco.svg") no-repeat 50% 50%; background-size: 15px auto; border-radius: 50%; }
        
    .ContentModal { display: none; /*position: relative; overflow: hidden; opacity: 0; visibility: hidden;*/
                    -webkit-transform: scale(0.5);
                    transform: scale(0.5);
                    -webkit-transition: -webkit-transform 0.3s ease-in-out 0.15s;
                    transition: transform 0.3s ease-in-out 0.15s;}        


/*GLOVAL.................................................................................................................... */
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
html, body { height:100%;}

html { font-size:16px;
       scroll-timeline: --page-scroll block; }

	body { font-size: 1rem; /*1rem = 16px*/ 
        margin:0 auto;
        text-align:center;
        font-family: 'Jost', sans-serif;  
        overflow-x: hidden;
        overflow-y: scroll;
    } 


.SafeZone { width:100%; min-height:100%; margin:0 auto;}
     .Viewport { position:relative; width:100%; max-width:1600px; height:100%;  margin:0 auto;}

    header.general { position: absolute; z-index: 100; top: 0;  left: 0; width: 100%; text-align: left;}
        .ColorBar { display: flex; width: 100%; height: 10px;}
            .ColorBar > div { flex: 1;}
            .ColorBar > div:first-child { background-color: var(--verde);}
            .ColorBar > div:nth-child(2) { background-color: var(--grismedio);}
            .ColorBar > div:last-child { background-color: var(--griscemento);}

        #ContentHeaderGeneral { padding-inline: 2em;}
            #Logo { width: 15em; padding-block: 2em;}
            #Logo img { max-width: 100%; display: block;}


    main {}
        #FlotanteWapp {  position: fixed; z-index: 500; right: 16px; bottom: 40px; }
        #FlotanteWapp a { display: block; width: 80px; height: 80px; background: var(--verde) url("img/wapp-blanco.svg") no-repeat 50% 50%;
            border-radius: 50%; background-size: 40px auto; box-shadow: 0 0 30px rgba(51,51,51,.3);
            -webkit-transition: background-color 0.3s ease;
            transition: background-color 0.3s ease;
          }

        #Hero { position: relative;  width: 100%; background-color: var(--negro);}
            #HeroFront { position: relative; z-index: 100;}
                #HeroFront p { text-shadow: 0 3px 10px #000; color: var(--blanco); padding-inline: 2rem;}
                
                #HeroHeader { padding-block:10em 2em; text-align: center;}
                    p#HeroTitle { font-size: 87px; line-height: 1;}
                    p#HeroSubtitle { font-size: 43px; line-height: 1;  text-wrap: balance;}

                    #HeroForm { display: flex; justify-content: center; width: 100%; padding-inline: 2em; margin-bottom: 4em; }
                        #HeroFormQuick { width: 100%; max-width: fit-content; height: auto; text-align: left; padding:2em 4em 4em 4em; background-color: rgb(242, 242, 242); border: 1px solid rgb(204, 204, 204);}
                            p.form-title { font-size: 32px; line-height: 1.2em; color: var(--negro) !important; text-align: center; text-shadow: none !important;}

                            .form-body { display: flex; flex-direction: column; gap: 1.5em; padding: 1.5em 0;} 
                                .form-label { display: block; margin-bottom: 0.25em; font-size:19px;  color: var(--griscemento); }
                                .form-label a { color:var(--negro); text-decoration: underline !important;}

                                .form-item input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="reset"]):not([type="submit"]),       
                                textarea { font-family: 'Jost', sans-serif; font-size: 16px; min-height: 48px; text-align: left; color: var(--negro); border: 1px solid #ccc; padding:0.5em 1em; width: 100%; background-color:var(--blanco);}

                                textarea { height: 11.25em;} 

                                input[type="radio"] { width: 1.5em; height: 1.5em; background-color: var(--blanco); border: 1px solid #ccc; 
                                                         accent-color: var(--verde);}

                                input[type="checkbox"] { width: 1.5em; height: 1.5em; background-color: var(--blanco); border: 1px solid #ccc; 
                                                         accent-color: var(--verde);}


                                .form-item[data-type="segmented-control"] { width: 100%; display: flex; flex-direction: column; gap: 1em; margin-top: 1em;}
                                    .form-item[data-type="segmented-control"] span { display: flex; gap: 0.5em; align-items: center;}
                                    .form-item[data-type="segmented-control"] label { margin-bottom: 0;}

                                .form-item[data-type="check"] { display: flex; align-items: center; flex-wrap: wrap; gap:0.5em;} 
                                    .form-item[data-type="check"] input { flex: 0 0 auto;}
                                    .form-item[data-type="check"] .form-label { flex: 1; margin-bottom: 0; font-size: 16px;}
                                    .form-item[data-type="check"] p { flex: 1 1 100%; margin-top: 0; margin-left: 2em;}
                                
                                #form-send { font-family: 'Jost', sans-serif; font-size: 24px; padding-inline: 2em;}

                                p.form-nota {font-family: 'Jost', sans-serif !important; font-size: 12px !important; padding: 2em 0 !important; color: var(--griscemento) !important; text-shadow: none !important;}

                /*focus*/
                input:not([class="button"]):focus,
                textarea:not([disabled]):focus {background-color:var(--blanco) !important; color:var(--negro) !important;  border-color: var(--verde) !important;}
                /*...*/
                
                
                #HeroBody { padding-bottom: 2em;}
                    p#HeroBodyTitle,
                    p#HeroBodyCopy,
                    p#HeroBodyValues { font-size: 35px; line-height: 1;}

                    p#HeroBodyTitle { position: sticky; z-index: 210; top: -1px; left: 0;  margin-bottom: 1em;  text-wrap: balance;
                                     transition: all 0.3s ease; }
                   
                    p#HeroBodyCopy,
                    p#HeroBodyValues { margin-block: 1em;}

                    p#HeroBodyCopy { text-wrap: balance;}
                    p#HeroBodyValues { display: flex; flex-wrap: wrap; gap: 0.5em 0; justify-content: center; width: 100%;}
                    p#HeroBodyValues span:not(:first-child)::before { content: "-"; margin-inline: 0.5em;}

                    *[data-scroll-animation="fade"] { animation: fadeText 1ms alternate;
                                                        animation-timeline: --page-scroll;}
            
            #HeroBackground { position: absolute; overflow: hidden; z-index: 50; top: 0; width: 100%; height: 100%;
                                transform-origin: 0 50%;
                                animation: scrollHero 1ms alternate;
                                 animation-timeline: --page-scroll;}
                
                #HeroBackground picture { width: 100%; height: 100%;}
                #HeroBackground img { object-fit: cover;  width: 100%; height: 100%;}
            
        #BandaDestacada { position: sticky; z-index: 200; top: 0; left: 0;  width: 100%; background-color: var(--verde); padding: 1em 2em; }
            #BandaDestacada p { font-size: 45px; line-height: 1; color: var(--blanco); text-wrap: balance;}

        #Amenities { position: relative; overflow: hidden; padding-top: 4em; text-align: center; background-color: var(--negro);}
            
            #ContentAmenities { padding-inline: 2em;}
                #AmenitiesList { position: relative; z-index: 100; list-style: none; 
                                 display: flex; flex-direction: column; gap: 1.5em;  width: 100%; max-width: max-content; margin-inline: auto;}
                    #AmenitiesList li { display: flex; gap: 1em;  text-align: left;}
                        #AmenitiesList li::before { content: ""; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; background: url(img/check.svg) no-repeat 0 0; background-size: 100% auto;}
                        #AmenitiesList li p { flex: 1; font-size: 35px; line-height: 1.3;  color: var(--blanco);}
                        #AmenitiesList sup { font-size: 16px;}

                #AmenitiesGap { width: 100%; height: 45vw;}

                #AmenitiesBackground { position: absolute; z-index: 50; top: 0; width: 100%; height: 100%;
                                    transform-origin: 50% 0;}

                    #AmenitiesBackground picture { width: 100%; height: 100%;}
                    #AmenitiesBackground img { object-fit: cover; object-position: 50% 0;  width: 100%; height: 100%;}

    footer.general { background-color: var(--blanco);}
        #FooterData { width: 100%; padding-block: 4em; padding-inline: 2em;}
            #ContentFooterData { display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; align-items: center;}
                #FooterData figure { flex: 0 0 auto; width: 10em;}
                #FooterData figure img { max-width: 100%; display: block;}
                a#BtnWeb { flex: 0 0 auto; border-left: 1px solid #464545; color: #464545; font-size: 22px; padding-left: 1em;}

                .NavSocial { display: inline-flex; gap: 16px; align-items: center;}
                .NavSocial a { display: block; width: 40px; height: 40px; margin: 10px 0;
                        -webkit-transition: opacity 0.5s ease;
                        transition: opacity 0.5s ease;}
                        
                    a[title*="Instagram"] { background: url("img/instagram.svg") no-repeat 50% 50%; background-size:100% auto;}
                    a[title*="Facebook"] { background: url("img/facebook.svg") no-repeat 50% 50%; background-size:100% auto;}
                    a[title*="Linkedin"] { background: url("img/linkdin.svg") no-repeat 50% 50%; background-size:100% auto;}

}

/*HOVER EFFECTS*/
@media (hover: hover) and (pointer: fine) {	
    input.general:hover,
    textarea.general:focus:hover { border-color: var(--verde); }

    .btn-verde:hover { background-color: var(--negro);}
    .btn-verde-txt:hover { color: var(--negro);}
    .btn-verde-out:hover { border-color: var(--negro);}
    .btn-verde-wapp:hover { background-color: var(--negro);}

    .NavSocial a:hover { opacity: 0.5;}
    #FlotanteWapp a:hover {background-color: #464545;}

    #FooterData a:hover { color:var(--verde);}
    
    
}

@media (max-width: 1600px) {
    #ContentHeaderGeneral { text-align: center;}
    #ContentHeaderGeneral #Logo { margin: 0 auto;}
}

@media (max-width: 1200px) {
    p#HeroTitle { font-size: 90px;}
    p#HeroSubtitle { font-size: 50px;}

    #HeroBody { padding-bottom: 6em;}
        p#HeroBodyTitle { font-size: 40px;}
        p#HeroBodyValues { max-width: 20em; margin: 0 auto;}
        p#HeroBodyValues span { flex: 0 0 auto; width: 50%;}
        p#HeroBodyValues span::before {  display: none;}
}
@media (max-width: 900px) {
    #ContentFooterData { flex-direction: column;}
        #FooterData { padding-bottom: 124px;}
        #FooterData a { padding-left: 0; border: none;}
}

@media (max-width: 850px) {
    #AmenitiesList { gap: 2em;}
}

@media (max-width: 700px) {
    p#HeroBodyValues span { width: 100%;}
}

@media (min-width: 600px) {
    /*pin*/
    p#HeroBodyTitle.pin {  background-color: var(--verde); padding: 1rem 2rem; text-shadow: none;}
    /*.....*/
}

@media (max-width: 600px) {
    #ContentHeaderGeneral #Logo { width: 11em;}
    #HeroFront p { padding-inline: 1rem;}

    p#HeroBodyTitle { position: relative; top: auto; left: auto;}    

    #HeroForm { padding-inline: 1rem;}
         #HeroFormQuick { padding-inline: 1.5em; padding-bottom: 1.5rem;}
         #HeroBody { padding-bottom: 1em;}
            p.form-title { font-size: 24px;}
            p.form-title br { display: none;}

         #form-send { display: block; width: 100%;}

    p#HeroBodyTitle, 
    p#HeroBodyCopy, 
    p#HeroBodyValues { font-size: 35px;}

    #BandaDestacada { position: relative; z-index: 0; top: auto; left: 0; }
    #BandaDestacada p { font-size: 35px;}

    #AmenitiesBackground { opacity: 0.4;}
    #AmenitiesList li p { font-size: 30px;} 
    #AmenitiesList li::before {width: 1.5rem; height: 1.5rem; margin-top: 0.5em;}
    
}

/*animación*/
@keyframes scrollHero {
  0% { scale: 1; opacity: 0.5; }
  100% { scale: 1.4; opacity: 1; }
}

@keyframes scrollFooter {
  0% { transform: translateY(0); }
  100% { transform: translateY(-200px); }
}

@keyframes fadeText {
  0% {scale: 1; opacity: 1; }
  100% { scale: 0.7;  opacity: 0.75; }
}