/* devanagari * /
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiDyp8kv8JHgFVrJJLm21lVFteOcEg.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
/* devanagari * /
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiDyp8kv8JHgFVrJJLmy15VFteOcEg.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
/* devanagari * /
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
/* devanagari * /
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
/* latin-ext */
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiDyp8kv8JHgFVrJJLm21lVGdeOcEg.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiDyp8kv8JHgFVrJJLm21lVF9eO.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiDyp8kv8JHgFVrJJLmy15VGdeOcEg.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiDyp8kv8JHgFVrJJLmy15VF9eO.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

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

:root {
  --green: #006157;
  --yellow: #F3A000;
    --yellow-l: #F2EBCE;
  --gray: #5F5F5F;

  --extra: 20px;
}

@media ( width > 1240px ) {
  :root { --extra: calc( ( 100vw - 1200px ) / 2 ); }
}

html { scroll-behavior: smooth; }

body { min-height: 100vh; width: 100%; font: 300 16px/1.5 'Poppins', tahoma, sans-serif; color: var(--gray); background-color: #fff; display: flex; flex-direction: column; position: relative; }

strong { font-weight: 700; }

a { transition: .3s all ease-in-out; text-decoration: none; color: inherit; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }



#hero {
  height: clamp( 600px, 50vw, 90vh ); position: relative; isolation: isolate; overflow: clip;

  .wrap {
    height: 100%; position: relative; isolation: isolate; display: flex; align-items: center; --cw: 420px;

    &::before { content: ''; position: absolute; top: 0; left: calc( var(--extra) * -1 ); width: calc( var(--extra) + var(--cw) ); height: calc( 100% - 40px ); background: var(--green); border-radius: 0 0 80px 0; z-index: -2; }

    &::after { content: ''; position: absolute; bottom: 40px; left: calc( var(--extra) * -1 ); width: calc( var(--extra) + var(--cw) + 40px ); height: 120%; border: 1px solid var(--yellow); border-radius: 0 0 80px 0; rotate: 3deg; z-index: -1; }

  }
    .intro {
      width: var(--cw); padding: 40px 80px 40px 0; position: relative;

      h1 { position: absolute; top: 0; right: -120px; width: 200px; aspect-ratio: 1/1; font-size: 1px; color: transparent; background: url(../img/park-veredas.svg) no-repeat center/contain; }

      h2 { font-size: 1.125rem; font-weight: 300; color: var(--yellow-l); margin-top: 40px; }

      .qts { width: 360px; aspect-ratio: 18/7; font-size: 1px; color: transparent; background: url(../img/quartos.webp) no-repeat center/contain; margin-top: 20px; }

      .lazer { background: var(--yellow); padding: 12px 20px; color: var(--green); margin-top: 20px; border-radius: 36px; text-align: center; max-width: 320px; }

      .pin { font-size: .875rem; margin-top: 40px; color: var(--yellow-l); padding-left: 24px; background: url(../img/pin.svg) no-repeat 0 50% / auto 20px; }

    }

  picture {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;

    img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  }

}

@media ( width < 900px ){
  #hero {
    min-height: 640px;

    .wrap {
      --cw: 40%;

      .intro {
        /* padding-right: 100px; */

        h1 { width: 160px; right: -80px; }
        h2 { font-size: 1rem; margin-top: 20px; }
        .qts { width: 240px; }
      }
    }
  }
}

@media ( width < 767px ){
  #hero { .wrap { .intro { .qts { width: 200px; } } } }
}

@media ( width < 600px ){
	#hero {
		display: flex; flex-direction: column-reverse; height: auto; min-height: 1px; background-color: var(--green);

		.wrap {
			--cw: 100%;

			&::before,
			&::after { display: none; }

			.intro {
				padding: 40px 0; position: relative; isolation: isolate;

				&::before { content: ''; position: absolute; top: 10px; left: -10px; width: calc( 100% + 20px ); height: calc( 100% - 20px ); border: 1px solid var(--yellow); z-index: -1; border-radius: 20px 0 20px 0; }

      	h1 { position: relative; inset: auto; margin-inline: auto; margin-top: -120px; }
				h2 { text-align: center; }
				.qts { width: 100%; max-width: 200px; margin-inline: auto; }
				.lazer { margin-inline: auto; }
	      .pin { max-width: 320px; margin-inline: auto; }
			}
		}

		picture { position: relative; width: 100%; height: 320px; }
	}
}


#status {
  order: -1; background: var(--yellow); padding: 20px;

  h2 {
    font-size: 1.5rem; font-weight: bold; line-height: 1; color: #fff; text-transform: uppercase; display: flex; justify-content: center; align-items: center; letter-spacing: 6px;

    span { display: none; }
    strong { display: inline-block; border-left: 2px solid #fff; padding-left: 12px; margin-left: 12px; }

  }

}

@media ( width < 900px ){
	#status { h2 { font-size: 1.25rem; letter-spacing: 4px; } }
}

@media ( width < 600px ){
	#status { h2 { font-size: 1rem; letter-spacing: 2px; } }
}

@media ( width < 420px ){
	#status {
		padding: 12px 20px;

		h2 {
			flex-direction: column; text-align: center; gap: 4px;

			strong { display: block; border: 0; padding: 0; margin: 0; }
		}
	}
}



#wa { display: block; width: 48px; height: 48px; background: #5AB64E url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.0226 4.01087C25.564 6.55547 27.136 9.88656 27.1337 13.5194C27.129 20.9061 20.9493 26.9568 13.502 26.952C11.2618 26.9506 9.0825 26.3437 7.08512 25.3131L-3.34326e-05 27.125L1.88139 20.1633C0.732285 18.1645 0.0677474 15.8633 0.0693031 13.4414C0.074048 6.05472 6.13262 0.00392655 13.5193 0.00867141C17.1522 0.011005 20.5418 1.46631 23.0226 4.01087ZM13.5035 24.6512C19.6793 24.6552 24.829 19.6331 24.8329 13.5179C24.8349 10.4906 23.5652 7.70458 21.4474 5.58408C19.3296 3.46358 16.5452 2.3114 13.5784 2.30949C7.40263 2.30552 2.37401 7.32769 2.37008 13.4429C2.36872 15.5621 2.97287 17.621 4.06155 19.4381L4.36401 19.8622L3.21097 23.9786L7.44999 22.8309L7.81312 23.0734C9.56832 24.1038 11.5055 24.65 13.5035 24.6512ZM19.6847 16.2997C19.9873 16.4816 20.2294 16.5423 20.2899 16.724C20.4109 16.8451 20.4104 17.5111 20.1072 18.2981C19.804 19.085 18.4715 19.8107 17.866 19.8708C16.776 20.0518 15.9284 19.9907 13.8099 19.0206C10.4202 17.5653 8.24266 14.1733 8.06114 13.9915C7.87965 13.7492 6.73027 12.1742 6.73136 10.4789C6.73241 8.84416 7.58058 8.05759 7.88354 7.69451C8.18651 7.33142 8.54983 7.27111 8.79202 7.27126C8.97366 7.27138 9.21585 7.27153 9.39749 7.27165C9.63967 7.27181 9.8819 7.21141 10.1842 7.87762C10.426 8.5438 11.1515 10.179 11.2119 10.3607C11.2723 10.5424 11.3328 10.7241 11.2115 10.9662C10.6052 12.2373 9.87871 12.1763 10.2416 12.782C11.5722 15.023 12.8432 15.811 14.8406 16.781C15.1432 16.9628 15.3249 16.9024 15.5672 16.7209C15.749 16.4789 16.4155 15.6922 16.5974 15.3896C16.8398 15.0264 17.0819 15.0871 17.3846 15.2084C17.6872 15.3297 19.3215 16.1179 19.6847 16.2997Z' fill='white'/%3E%3C/svg%3E") no-repeat center / 50%; position: fixed; bottom: 20px; right: 20px; border-radius: 50%; z-index: 9999; font-size: 1px; color: transparent; box-shadow: 0 0 0 rgba(0, 0, 0, 0.3); transition: .3s ease-in-out;

	&:hover { transform: translate( -4px, -4px ); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3); }
}



#cadastro {
	background: var(--yellow-l); padding-block: 60px;

	.wrap { display: flex; gap: 40px; }

	.text {
		flex: 0 0 380px;

		h2 { display: inline-block; font-size: 1.25rem; line-height: 1; color: var(--green); background: var(--yellow); padding: 8px 4px; }

		p { font-size: 2.5rem; font-weight: 300; line-height: 1.2; color: var(--green); margin-top: 20px; max-width: 380px; }
	}

	.form {
		flex: 1 1 100%;

		h3 { font-size: 1.5rem; color: var(--green); max-width: 420px; }

		form {
			margin-top: 20px; display: flex; flex-wrap: wrap; gap: 20px;

			&.sending-form .field-submit .submit { pointer-events: none; color: transparent; background: var(--green) url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg' stroke='%23F3A000'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(1 1)' stroke-width='2'%3E%3Ccircle stroke-opacity='.5' cx='18' cy='18' r='18'/%3E%3Cpath d='M36 18c0-9.94-8.06-18-18-18'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center / auto 50%; transition: none; }
		}

		.form-output {
			flex: 0 0 100%;

			&.is-error { padding: 8px 20px; background: #c00; color: #fff; }
			&.is-success { padding: 8px 20px; background: var(--green); color: #fff; }
		}

		.field-wrap {
			flex: 0 0 calc( 50% - 10px ); border-bottom: 1px solid var(--green); display: flex; align-items: center; gap: 8px;

			label {
				flex: 0 0 auto; color: var(--green); font-size: .875rem;

				abbr { text-decoration: none; cursor: help; }
			}

			.text { flex: 1 1 100%; background: transparent; padding: 8px 4px; }

			&.field-nome { flex: 0 0 100%; }

			&.field-pp { border-bottom: 0;

				input {
					display: none;

					&:checked + label::after { opacity: 1; }
				}

				label {
					position: relative; padding-left: 24px; cursor: pointer; font-size: .75rem; flex: 0 0 100%;

					&::before { content: ''; position: absolute; top: 2px; left: 0; width: 16px; height: 16px; border: 1px solid var(--green); }
					&::after { content: ''; position: absolute; top: 5px; left: 3px; width: 10px; height: 10px; background: var(--green); opacity: 0; transition: .3s all ease-out; }

					a {
						color: var(--green); text-decoration: underline;
						&:hover { color: var(--yellow); }
					}
				}
			}

			&.field-submit {
				border-bottom: 0;

				.submit { display: inline-block; background: var(--yellow); color: var(--green); font-weight: 700; padding: 16px 80px; text-transform: uppercase; cursor: pointer; margin-left: auto; transition: .3s all ease-in-out;

					&:hover { background: var(--green); color: var(--yellow); }
				}
			}

		}

		&:has( [name=pp]:not(:checked) ) .field-submit .submit { opacity: .5; pointer-events: none; }

	}

}

@media ( width < 992px ){
	#cadastro {
		.wrap { gap: 20px; }
		.form { .field-wrap { flex: 0 0 100%; } }
	}
}

@media ( width < 768px ){
	#cadastro {
		.wrap { flex-direction: column; }
		.text { flex: 1 1 auto; }
		.form {
			flex: 1 1 auto;
			.field-wrap { flex: 0 0 calc( 50% - 10px ); }
		}
	}
}

@media ( width < 600px ){
	#cadastro {
		.text {
			p { font-size: 2rem; max-width: 360px; }
		}
		.form { form { .field-wrap { flex: 0 0 100%; } } }
	}
}




#foot {
	padding-block: 40px 80px;

	.wrap { display: flex; gap: 40px; }

	.logos {
		flex: 0 0 200px; order: 2;

		h2 { font-size: .5rem; text-transform: uppercase; color: var(--gray); margin-bottom: 8px; font-weight: 300; text-align: center; }

		img { margin-inline: auto; display: block; }
	}

	.legal { flex: 1 1 100%; order: 1; font-size: .75rem; color: var(--gray); }
}

@media ( width < 600px ){
	#foot {
		.wrap { flex-direction: column; gap: 20px; }
		.logos { order: 1; flex: 1 1 auto; }
		.legal { order: 2; text-align: center; }
	}
}