/* ***********************************************************************
* FUENTES
* ************************************************************************/
@font-face {
          font-family: 'Roboto-Bold';
          src: url('./../cookies/fonts/Roboto-Bold.ttf') format('truetype');
  }
@font-face {
          font-family: 'Roboto-Regular';
          src: url('./../cookies/fonts/Roboto-Regular.ttf') format('truetype');
  }
@font-face {
          font-family: 'Roboto-Medium';
          src: url('./../cookies/fonts/Roboto-Medium.ttf') format('truetype');
  }
@font-face {
          font-family: 'Gordita-Regular';
          src: url('./../fonts/Gordita-Regular.otf') format('opentype');
  }
@font-face {
          font-family: 'Gordita-Medium';
          src: url('./../fonts/Gordita-Medium.otf') format('opentype');
  }
@font-face {
          font-family: 'Gordita-Bold';
          src: url('./../fonts/Gordita-Bold.otf') format('opentype');
  }
/* ***********************************************************************
* BASE
* ************************************************************************/
:root {
          --black: #000000;
          --container: 1440px;
          --primary-color: #537052;
  }
body {
          overflow-x: hidden;
  }
a {
          color: inherit;
          text-decoration: none;
  }
h1 {
          font-family: 'Gordita-Medium';
          font-size: clamp(28px, 4vw - 1rem, 34px);
  }
h2 {
          font-family: 'Gordita-Regular';
          font-size: clamp(22px, 4vw - 1rem, 28px);
  }
h3 {
          color: #d9d9d9;
          font-family: 'Montserrat', sans-serif;
          font-size: 16px;
          font-weight: 600;
          letter-spacing: 0.8px;
          text-transform: uppercase;
  }
h4 {
          color: #d9d9d9;
          font-family: 'Gordita-Medium';
          font-size: clamp(44px, 4vw - 1rem, 55px);
          letter-spacing: 2.2px;
          margin: 0;
  }

h5 {
          color: #d9d9d9;
          font-family: 'Gordita-Regular';
          font-size: clamp(34px, 4vw - 1rem, 45px);
          letter-spacing: 2.2px;
  }
    h4.black, h5.black {
        color: #1E1E1E;
  }
p {
          color: #d9d9d9;
          font-family: 'Gordita-Regular';
          font-size: 18px;
  }
p > strong {
          font-weight: 700;
  }
::selection {
          background-color: white;
          color: var(--primary-color);
  }
img {
          -moz-user-select: none;
          -ms-user-select: none;
          -webkit-user-select: none;
          user-select: none;
  }
.container {
          max-width: var(--container);
  }
.paragraph {
          width: 430px;
  }
@media (width <= 992px) {
  .paragraph {
            width: 100%;
    }
}
.picture img {
          min-height: 500px;
          object-fit: cover;
          width: 100%;
  }
/* ***********************************************************************
* HEADER
* ************************************************************************/
#header {
          background: url(./../images/header.jpg) 50% 50% / cover;
          height: 100vh;
          min-height: 900px;
          position: relative;
  }
@media (width <= 992px) {
  #header {
            height: 44vh;
            min-height: 500px;
    }
}
@media (width <= 1200px) {
  .title {
            background-color: rgb(255 255 255 / 45%);
            bottom: 5%;
            height: 120px;
            left: 3%;
            padding: 8px;
            position: absolute;
            width: 94%;
    }
}
/* ***********************************************************************
* FORM
* ************************************************************************/
.form {
          background-color: rgb(255 255 255 / 60%);
          bottom: 0;
          height: 100%;
          padding-inline: 24px;
          position: absolute;
          right: 5%;
          width: 413px;
  }
@media (width <= 1200px) {
  .form {
            border-radius: 0;
            bottom: 0;
            padding: 18px;
            position: initial;
            right: 0;
            width: 100%;
    }
}
.form p {
          color: black;
          font-family: 'Gordita-Medium';
          font-size: 22.557px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          margin: 0;
  }
.form span {
          color: black;
          display: block;
          font-family: 'Gordita-Regular';
          font-size: 12px;
          font-style: normal;
          font-weight: 400;
          line-height: 18px;

 /
  }
.form form .input-style {
          margin-bottom: 18px;
  }
  .input-flex {
        display: flex;
        justify-content: space-between;
  }
  .form form .input-style.xs{
         width: 20%;
  }
  .form form .input-style.sm{
         width: 75%;
  }
.form form .input-style input {
          background-color: transparent;
          border: 0;
          border-bottom: 1px solid var(--black);
          caret-color: var(--black);
          color: var(--black);
          font-family: 'Gordita-Regular';
          font-size: 14px;
          padding-block: 12px;
          position: relative;
          transition: 350ms ease-in;
          width: 100%;
  }
.form form .input-style input::placeholder {
          color: var(--black);
          font-family: 'Gordita-Regular';
          font-size: 14px;
  }
.form form .input-style input:focus {
          border: 0;
          outline: 2px solid var(--black);
  }
.form form .checkbox {
          align-items: end;
          display: flex;
          margin-bottom: 8px;
  }
.form form .checkbox:first-of-type {
          margin-top: 24px;
  }
.form form .checkbox input[type='checkbox'] {
          appearance: none;
          background-color: none;
          border: 1px solid var(--black);
          border-radius: 0.05em;
          cursor: pointer;
          display: grid;
          height: 1em;
          margin: 0;
          place-content: center;
          transform: translateY(-0.075em);
          width: 1em;
  }
.form form .checkbox input[type='checkbox']::before {
          box-shadow: inset 1em 1em var(--black);
          content: '';
          height: 8px;
          transform: scale(0);
          transition: 120ms transform ease-in-out;
          width: 8px;
  }
.form form .checkbox input[type='checkbox']:checked::before {
          transform: scale(1);
  }
.form form .checkbox span {
          font-family: 'Gordita-Regular';
          font-size: 10px;
          margin-left: 6px;
  }
.form .submit {
          margin-top: 24px;
  }
.form .submit input {
          background-color: transparent;
          border: 1px solid var(--black);
          border-radius: 60px;
          color: var(--black);
          font-family: 'Gordita-Medium';
          font-size: 12px;
          padding-block: 4px;
          padding-inline: 20px;
          transition: background-color 300ms ease-in;
          width: 100%;
  }
.form .submit input:hover {
          background-color: var(--black);
          color: white;
  }
/* ***********************************************************************
* CAROUSEL + SECTIONS
* ************************************************************************/
#section1 {
          -moz-box-shadow: 1px -3px 5px 0px rgb(255 255 255 / 60%);
          -webkit-box-shadow: 1px -3px 5px 0px rgb(255 255 255 / 60%);
          background: url(./../images/bg.png) 50% 84% / cover;
          background-color: var(--primary-color);
          border-top-left-radius: 30px;
          border-top-right-radius: 30px;
          box-shadow: 1px -3px 5px 0px rgb(255 255 255 / 60%);
          margin-top: -26px;
          position: relative;
          z-index: 2;
  }
  @media (width <= 1200px) {
#section1 {
          border-top-left-radius: 0;
          border-top-right-radius: 0;
          margin-top: 0;
  }
}
#section2 {
        /* background: url(./../images/bg.png) 50% 50% / cover; */
        position: relative;
        z-index: 3;
}
#section1 p {
          font-size: 30px;
  }
   @media (width <= 992px) {
#section1 p {
          font-size: 24px;
  }
   }
#section2, #section4 {
          background-color: var(--primary-color);
  }
  #footer-form {
          height: 60vh;
          margin-top: -18px;
          min-height: 550px;
          position: relative;
  }
  .video {
        position: absolute;
        height: 60vh;
          min-height: 550px;
          width: 100%;
  }
  .video video {
        object-fit: cover;
        position: absolute;
        height: 60vh;
        min-height: 550px;
        width: 100%;

  }
  #logo-white {
      background: url(./../images/bg-3.png) 10% 10% / cover;
        background-color: var(--primary-color);
  }
  #cana-bay {
        background-color: #EEF1EE;
  }
 
  .cana-bay {
        width: 110%;
  }

  .cana-bay p {
        font-family: 'Gordita-Medium';
        color:#1E1E1E;
        font-size: 16px;
        margin-top: 12px;
  }
/* ***********************************************************************
* CAROUSEL + RENDERS
* ************************************************************************/
#section4 {
        -moz-box-shadow: 1px -3px 5px 0px rgb(255 255 255 / 60%);
        -webkit-box-shadow: 1px -3px 5px 0px rgb(255 255 255 / 60%);
        background: url(./../images/bg-2.png) 10% 10% / cover;
        background-color: var(--primary-color);
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        box-shadow: 1px -3px 5px 0px rgb(255 255 255 / 60%);
        margin-top: -26px;
        position: relative;
        z-index: 2;
}

.renders .owl-carousel {
        width: 160%;
}
 @media (width <= 1200px) {
#section4 {
          border-top-left-radius: 0;
          border-top-right-radius: 0;
          margin-top: 0;
  }
  .renders .owl-carousel {
        width: 100%;
}
}
  #menu {
        position: relative;
        display: flex;
        justify-content: space-around;
        list-style: none;
        border-bottom: 2px solid rgba(217, 217, 217, 0.5); /* Línea de fondo con opacidad */
        padding-bottom: 1rem;
    }

    /* Línea activa */
    .active-line {
        position: absolute;
        bottom: -2px;
        height: 3px;
        background-color: rgb(217, 217, 217); /* Color de la línea activa */
        transition: width 0.3s ease, left 0.3s ease;
    }

    #menu li {
        position: relative;
        cursor: pointer;
        padding: 0.5rem 1rem;
    }
.renders ul {
        display: flex;
        justify-content: space-around;
}
 @media (width <= 1200px) {
.renders ul {
       padding-left: 0;
}
 }
.renders ul li {
        color: rgb(217 217 217 / 50%);
        cursor: pointer;
        font-family: 'Gordita-Bold';
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        letter-spacing: 0.8px;
        line-height: normal;
        list-style: none;
        text-align: center;
        text-transform: uppercase;
}
.renders ul li.active {
        color: rgb(217 217 217);
}
.renders .owl-carousel .owl-nav {
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          -webkit-transform: translate(-50%, -50%);
          bottom: -20%;
          display: flex;
          justify-content: space-between;
          left: 6%;
          padding: 0 40px;
          pointer-events: none;
          position: absolute;
          transform: translate(-50%, -50%);
          width: 15%;
  }
  .cana-bay .owl-carousel .owl-nav {
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          -webkit-transform: translate(-50%, -50%);
          top: -30%;
          display: flex;
          justify-content: space-between;
          right: 15%;
          padding: 0 40px;
          pointer-events: none;
          position: absolute;
          transform: translate(-50%, -50%);
          width: 9%;
  }
     @media (width <= 480px) {
.cana-bay .owl-carousel .owl-nav {
          top: -10%;
          right: 19%;
  }
     }
.renders .owl-carousel .owl-nav button,
.cana-bay .owl-carousel .owl-nav img {
          border: none;
          outline: none;
          pointer-events: all;
          width: 48px;
  }
       @media (width <= 1200px) {
.renders .owl-carousel .owl-nav {
          bottom: -10%;
          left: 14%;
          width: 25%;
  }
  .renders .owl-carousel .owl-nav button,
  .cana-bay .owl-carousel .owl-nav button {
                  margin-inline: 4px;
                  width: 48px;
          }
}
.renders .owl-carousel .owl-nav button img{
          width: 100%;
  }
.renders .owl-carousel .owl-nav button:nth-child(2),
.cana-bay .owl-carousel .owl-nav button:nth-child(2) {
          transform: rotate(180deg);
  }
 
.renders .owl-carousel .item {
          margin-right: 24px;
          position: relative;
          transition: 0.8s;
  }
   @media (width <= 1200px) {
.renders .owl-carousel .item {
          margin-inline: 0;
          position: relative;
          transition: 0.8s;
  }
}
.renders .owl-carousel .item img {
          height: 100%;
          object-fit: cover;
          width: 100%;
  }
.renders .owl-carousel .owl-stage-outer .owl-stage .owl-item.active {
          opacity: 1;
  }
.renders .owl-carousel .owl-stage-outer .owl-stage .owl-item.active .item {
          opacity: 1;
          transition: 0.4s;
  }
.renders .owl-dots {
          bottom: 8%;
          display: none;
          flex-wrap: wrap;
          justify-content: space-between;
          left: 50%;
          position: absolute;
          transform: translateX(-50%);
          width: max-content;
  }
.renders .owl-dots .owl-dot {
          border: 2px solid rgb(255, 255, 255);
          border-radius: 15px;
          height: 15px;
          margin: 5px 10px;
          width: 15px;
  }
.renders .owl-dots .owl-dot.active {
          background: rgb(255, 255, 255);
  }
.renders .owl-dots .owl-dot :focus {
          outline: none;
  }
/* .custom-nav button {
                  background-color: #ffffff;
                  border: none;
                  margin: 0 8px;
                  outline: none;
                  pointer-events: all;
                  width: 60px;
          }
.custom-nav button img {
                  width: 100%;
          }
.custom-nav button:nth-child(2) {
                  transform: rotate(180deg);
          } */
@media (width <= 1200px) {
  .renders .owl-carousel .owl-nav {
            padding: 0;
    }
}
/* ***********************************************************************
* MAP
* ************************************************************************/
#map {
          position: relative;
  }
#map iframe {
          height: 900px;
  }
.map-info {
          -moz-box-shadow: 1px -3px 5px 0px rgba(163, 163, 163, 1);
          -webkit-box-shadow: 1px -3px 5px 0px rgba(163, 163, 163, 1);
          background: url(./../images/bg.png) 30% 60% / cover;
          background-color: var(--primary-color);
          border-bottom-right-radius: 30px;
          border-top-right-radius: 30px;
          box-shadow: 1px -3px 5px 0px rgba(163, 163, 163, 1);
          left: 0;
          padding: 60px 60px 60px 160px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 600px;
  }
@media (width <= 1200px) {
  .map-info {
          -moz-box-shadow: none;
          -webkit-box-shadow: none;
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            box-shadow:none;
            padding: 60px 60px 60px 160px;
            position: initial;
            transform: translateY(-18px);
            width: 100%;
    }
  #map iframe {
            height: 600px;
    }
}
@media (width <= 992px) {
  .map-info {
            padding: 18px;
    }
  #map iframe {
            height: 400px;
    }
}
/* ***********************************************************************
* FOOTER
* ************************************************************************/
footer {
            background: url(./../images/bg-3.png) 10% 10% / cover;
        background-color: var(--primary-color);
          padding-top: 18px;
  }
footer p {
          color: white;
          font-size: 0.8rem;
  }
footer a {
          color: inherit;
          cursor: pointer;
          display: inline-block;
          font-family: 'Gordita-Medium', sans-serif;
          overflow: hidden;
          position: relative;
          text-decoration: none;
  }
footer a:after {
          background: white;
          bottom: 0;
          content: '';
          height: 2px;
          left: -100%;
          position: absolute;
          transition: left 600ms ease;
          width: 100%;
  }
footer a:hover:after {
          left: 0;
  }
/* ***********************************************************************
* PÁGINA DE COMPROBANTE
* ************************************************************************/
#comprobante {
          align-items: center;
          background-color: rgb(255, 255, 255);
          display: flex;
          flex-direction: column;
          height: 100vh;
          justify-content: center;
  }
#comprobante img {
          height: 148px;
  }
#comprobante h1 {
          color: var(--black);
          padding: 24px 0;
          text-align: center;
          width: 470px;
  }
#comprobante p {
          color: #1c1b1a;
          font-size: 20px;
          text-align: center;
          width: 520px;
  }
#comprobante h4 {
          border-bottom: 2px solid rgb(28, 27, 26);
          color: rgb(28, 27, 26);
          font-family: 'Roboto-Regular', sans-serif;
          font-size: 16px;
          padding-bottom: 8px;
          padding-top: 24px;
          text-decoration-color: transparent;
  }
#comprobante a {
          color: rgb(34, 34, 34);
          text-decoration: none;
  }
#footer p {
          font-size: 0.8rem;
  }
#footer a {
          font-family: 'Roboto-Medium';
  }
@media (width <= 992px) {
  #comprobante h1,
  #comprobante p {
            width: 100%;
    }
}
/* ***********************************************************************
* MODAL DE POLÍTICA DE PRIVACIDAD
* ************************************************************************/
#informacion .modal-header h5 {
          color: #333333;
          font-family: 'Roboto-Bold';
          font-size: 1rem;
          letter-spacing: 0.02rem;
          text-transform: capitalize;
  }
#informacion .modal-content {
          -moz-box-shadow: 0px 17px 19px -8px rgba(0, 0, 0, 0.6);
          -webkit-box-shadow: 0px 17px 19px -8px rgba(0, 0, 0, 0.6);
          box-shadow: 0px 17px 19px -8px rgba(0, 0, 0, 0.6);
  }
#informacion .modal-body p,
#informacion ul li {
          color: #222222;
          font-family: 'Roboto-Regular';
          font-size: 0.9rem;
          line-height: normal;
          text-align: left;
          width: 100%;
  }
/* ***********************************************************************
* ANIMATIONS
* ************************************************************************/
/*? Animación para que las imágenes aparezcan progresivamente en móvil */
@keyframes animated__picture {
  from {
            opacity: 0;
            scale: 25%;
    }
  to {
            opacity: 1;
            scale: 100%;
    }
}
@media (width <= 768px) {
  .animated__picture img {
            animation-fill-mode: both;
            animation-name: animated__picture;
            animation-range: entry 10% cover 30%;
            animation-timeline: --image;
            height: auto;
            view-timeline-axis: block;
            view-timeline-name: --image;
            width: 100%;
    }
}

 .cana-bay .owl-carousel .item img {
        padding-inline: 18px;
         max-height: 395px !important;
  }

  @media (width <= 768px) {
.cana-bay .owl-carousel .item img {
                padding-inline: 8px;

         max-height: 295px !important;
  }
  }
