* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

html {
  font-size: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

input,
textarea {
  display: block;
  background: none;
  color: #202945;
  font-size: clamp(12px, 4vw, 16px);
  padding: 8px 16px;
  border-radius: 16px;
  border: 1px solid #d0d5dd;
}

input::placeholder,
textarea::placeholder {
  color: #d0d5dd;
}

input:focus,
textarea:focus {
  color: #202945;
  border-color: #61a60e;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  cursor: pointer;
}

.justify_paragraph {
  text-align: justify;
}

.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.underline {
  text-decoration: underline;
}

.cursor_pointer,
.header__link {
  cursor: pointer;
}

.separator,
.header__link:hover,
.header__title,
.footer__links__container a:hover,
.footer__phone:hover {
  color: #61a60e;
}

.header__container {
  display: flex;
  max-width: 1440px;
  margin: auto;
  color: #202945;
  justify-content: space-between;
  padding: 20px 12px;
}

.header__menu {
  display: flex;
  width: 50%;
  font-size: clamp(12px, 4vw, 20px);
  justify-content: end;
  padding-right: 12px;
  align-items: center;
}

.header__menu__desktop {
  display: flex;
  gap: 12px;
}

.header__menu__mobile {
  display: none;
}

body.lightbox-open {
  overflow: hidden;
}

.menu__overlay,
.privacity-lightbox,
.cookies-lightbox,
.legal-lightbox,
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.overlay {
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu__content {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #202945;
  color: #ffffff;
  height: 100vh;
  width: 85%;
  padding: 20px;
  flex-direction: column;
  gap: 48px;
  font-size: 36px;
  z-index: 1001;
}

.privacity-lightbox__container,
.cookies-lightbox__container,
.legal-lightbox__container,
.lightbox {
  display: flex;
  background-color: white;
  padding: 24px;
  max-width: 1440px;
  max-height: 75%;
  overflow-y: auto;
  border-radius: 12px;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.privacity-lightbox__container,
.cookies-lightbox__container,
.legal-lightbox__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
}

.lightbox {
  position: relative;
  z-index: 1001;
  width: 90%;
}

.privacity-lightbox__content,
.cookies-lightbox__content,
.legal-lightbox__content {
  color: #202945;
  font-size: clamp(12px, 4vw, 16px);
}

.close-button {
  position: absolute;
  top: 24px;
  right: 24px;
  cursor: pointer;
  background-color: transparent;
  border: none;
  color: #202945;
  font-size: clamp(12px, 4vw, 20px);
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.lightbox-content {
  position: relative;
  z-index: 1001;
}

.slider {
  display: flex;
  margin-bottom: 24px;
}

.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slide {
  width: 100%;
  flex: 0 0 auto;
  max-height: 650px;
  padding: 0 5%;
  transition: transform 0.5s ease;
}

.amani__slide {
  width: 100%;
  max-width: 456px;
  flex: 0 0 auto;
  padding: 0 1%;
  max-height: 456px;
  justify-content: center;
  transition: transform 0.5s ease;
  object-fit: cover;
}

.slider__prev-button,
.slider__next-button {
  display: flex;
  position: absolute;
  top: 50%;
  opacity: 0;
  transition: opacity 0.5s ease;
  cursor: pointer;
  border-radius: 100%;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  width: clamp(25px, 4vw, 50px);
  height: clamp(25px, 4vw, 50px);
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.slider__next-button {
  transform: translateY(-50%) rotate(180deg);
}

.slider__prev-button.material-symbols-outlined,
.slider__next-button.material-symbols-outlined {
  font-size: clamp(12px, 2vw, 24px);
}

.slider__prev-button {
  transform: translateY(-50%);
  left: 10px;
  padding-left: clamp(5px, 1vw, 10px);
}

.slider__next-button {
  transform: translateY(-50%) rotate(180deg);
  right: 10px;
  padding-left: clamp(5px, 1vw, 10px);
}

.slider-container:hover>.slider__prev-button,
.slider-container:hover>.slider__next-button {
  opacity: 100;
}

.single-slide .slide,
.single-slide .amani__slide {
  width: 100%;
  padding: 0;
}

.single-slide .amani__slide {
  max-width: none;
  padding: 0;
}

.pergola__title,
.butterfly__title {
  color: #202945;
  font-size: clamp(36px, 4vw, 64px);
  padding-bottom: 24px;
}

.pergola__content {
  display: flex;
  gap: 24px;
  color: #202945;
}

.pergola__article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 20px;
}

.amani,
.footer {
  background-color: #202945;
  padding-block: 48px;
}

.amani__section_container {
  display: flex;
  gap: 20px;
}

.amani__section__img {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;

}

.amani__section__grid__img {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr 1.5fr;
  gap: 10px;
}

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

.pergola__container,
.amani__container,
.butterfly__container,
.form__container,
.footer__container {
  display: flex;
  flex-direction: column;
  max-width: 1440px;
  margin: auto;
  color: #ffffff;
  row-gap: 20px;
  padding: 48px;
  align-items: center;
}

.butterfly__content p {
  color: #202945;
}

.pergola__container {
  padding-bottom: 64px;
}

.logo-responsive{
  max-width: 100%;
  height: auto;
  margin-bottom: 30px;
}

.amani__feature,
.butterfly__feature {
  display: flex;
  gap: 8px;
}

.amani__content ol {
  list-style: none;
  counter-reset: my-counter;
}

.amani__content ol li::before {
  font-family: "Bebas Neue", sans-serif;
  content: counter(my-counter);
  counter-increment: my-counter;
  color: #61a60e;
  /* Color del número */
}

.amani__feature::before,
.butterfly__feature::before {
  color: #61a60e;
  content: "• ";
}

.amani__subtitle {
  font-size: clamp(24px, 4vw, 36px);
  color: #61a60e;
  line-height: clamp(24px, 4vw, 36px);
}

.amani__feature__title {
  font-size: clamp(14px, 4vw, 18px);
  color: #61a60e;
}

.amani__title,
.form__title,
.privacity-lightbox__title,
.cookies-lightbox__title,
.legal-lightbox__titles {
  font-size: clamp(36px, 4vw, 64px);
  color: #61a60e;
  text-align: center;
}

.img-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 5%;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.form__subtitle,
.cookies-lightbox__subtitle,
.pergola__subtitle,
.footer__subtitle {
  color: #61a60e;
  font-size: clamp(20px, 4vw, 28px);
}

.amani__content__column,
.butterfly__content__column {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.amani__content,
.butterfly__content {
  display: flex;
  gap: 24px;
  padding-bottom: 64px;
  flex-wrap: wrap;
}

.amani__content>*,
.butterfly__content>* {
  flex: 1;
}

.amani__content__column {
  line-height: 24px;
}

.form__title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form__content {
  width: 100%;
  color: #202945;
}

.form__content__container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form__input__container {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.form__input__container>* {
  flex: 1;
}

.checkbox {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}

.form__button,
.close-privacity,
.close-cookies,
.close-legal {
  background-color: #61a60e;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  max-width: 200px;
  text-transform: uppercase;
}

.button__container {
  display: flex;
  justify-content: center;
}

.footer__container__title {
  display: flex;
  width: 100%;
  justify-content: center;
}

.footer__title {
  font-size: clamp(28px, 4vw, 48px);
  color: #61a60e;
}

.footer__content {
  display: flex;
  gap: 24px;
}

.footer__container {
  padding-bottom: 0px;
  gap: 48px;
  align-items: normal;
}

.footer {
  padding-bottom: 10px;
}

.footer__content>* {
  flex: 1;
}

.footer__links__container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: clamp(12px, 4vw, 20px);
}

.footer__RRSS {
  display: flex;
  gap: 24px;
}

.footer__RRSS__icon {
  width: 24px;
}

.footer__column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  line-height: 32px;
  font-size: clamp(12px, 4vw, 16px);
}

.footer__menu {
  display: flex;
  gap: 24px;
  font-size: clamp(10px, 4vw, 14px);
  justify-content: center;
}

.footer__menu a:hover {
  text-decoration: underline;
}

.cookies {
  display: none;
}

.captcha__container {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 12px;
}

.form__captcha__container {
  width: 100%;
}

.input__captcha {
  width: 100%;
  text-transform: uppercase;
}

.d-none{
  display: none;
}

@media (max-width: 1024px) {
  .header__menu__desktop {
    display: none;
  }

  .header__menu__mobile {
    display: block;
  }
}

@media (max-width: 768px) {

  .pergola__content,
  .butterfly__content,
  .amani__content,
  .form__input__container,
  .footer__content {
    flex-direction: column;
  }

  .privacity-lightbox__container,
  .cookies-lightbox__container,
  .legal-lightbox__container {
    width: 90%;
    max-height: 90%;
  }

    .logo-responsive {
      max-width: 80%;
      margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .logo-responsive {
      max-width: 50%;
      margin-bottom: 10px;
  }
}