@import url("./all.min.css");

@font-face {
  font-family: "Roboto-Light";
  src: url(../fonts/Roboto-Light.ttf);
}

@font-face {
  font-family: "Roboto-Regular";
  src: url(../fonts/Roboto-Regular.ttf);
}

@font-face {
  font-family: "Roboto-Medium";
  src: url(../fonts/Roboto-Medium.ttf);
}

@font-face {
  font-family: "Roboto-Bold";
  src: url(../fonts/Roboto-Bold.ttf);
}

@font-face {
  font-family: "Cookie-Regular";
  src: url(../fonts/Cookie-Regular.ttf);
}

@font-face {
  font-family: "Rufina-Regular";
  src: url(../fonts/Rufina-Regular.ttf);
}

body {
  font-family: "Roboto-Regular" !important;
  color: #484848;
  overflow-x: hidden;
}

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

  .content-navbar {
    background: #ffffff;
    padding: 2% 10% 2% 10%;
    position: relative;
    z-index: 2;
    width: 100%;
    transition: all 0.5s;
  }

  .content-navbar.is-sticky {
    position: fixed !important;
    top: 0 !important;
    padding: 0% 5% 0% 5%;
    background: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.5s;
  }

  .ulitemsco {
    align-items: center;
  }

  .navbar-system {
    background-image: linear-gradient(180deg, #00000000, #00000000);
    padding-top: 0px;
    padding-bottom: 1%;
    padding-left: 0%;
    padding-right: 0%;
    border-radius: 0px;
  }

  .alinknav {
    margin-right: 0%;
    margin-left: -5%;
  }

  .logo-nav {
    display: inline-block;
    width: 140px;
  }

  .item-logo-solodesk {
    display: contents;
  }

  .logolistaoff {
    display: none;
  }
  .logo-nav-desk {
    display: none;
    width: 190px;
  }

  .iconomenuoffcanvas {
    color: white;
    margin-top: 5%;
    font-size: 2rem;
    border: none !important;
  }

  .iconomenuoffcanvasw {
    color: #bfa53a;
  }

  .bodyoffcanva {
    background: #ffffff;
    border-radius: 60px;
    padding: 10px 20px !important;
  }

  .item-navbar {
    font-family: "Roboto-Medium";
    font-size: 1rem;
    color: #000000;
    transition: 0.5s;
  }

  .item-navbar:hover {
    font-family: "Roboto-Medium";
    font-size: 1rem;
    color: #e9cb4d;
    transition: 0.5s;
  }

  .item-navbar-contact {
    font-family: "Roboto-Bold";
    font-size: 1rem;
    color: #ffffff;
    background: linear-gradient(45deg, #fe6806, #fe6806);
    padding: 12px 20px;
    border-radius: 20px;
    margin-top: -5px;
  }

  .captionm-oss {
    right: 20% !important;
    top: 35% !important;
    left: 20% !important;
    width: 60%;
  }

  .title-captionslide {
    font-family: "Roboto-Medium";
    font-size: 2.5rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: -5px;
    margin-bottom: 2%;
    text-align: center;
    text-shadow: 0px 0px 20px black;
  }
  .align-ctaslide {
    text-align: center;
    margin-top: 5%;
  }
  .btn-ctaslid {
    font-family: "Roboto-Medium";
    font-size: 14px;
    color: #ffffff;
    background: linear-gradient(45deg, #e9cb4d, #988844);
    padding: 5px 35px;
    border-radius: 10px;
    margin-top: 0px;
  }
  .btn-ctaslid:hover {
    font-family: "Roboto-Medium";
    font-size: 14px;
    color: #ffffff;
    background: linear-gradient(45deg, #e9cb4d, #988844);
    padding: 5px 35px;
    border-radius: 10px;
    margin-top: 0px;
  }

  /* RODOLPHINO */

  .floating-icon-rodol {
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 99;
  }

  .tooltip-rodol {
    background-color: #00b046;
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    margin-bottom: 5px;
    font-size: 14px;
  }

  .icon-rodol {
    width: 140px;
    height: auto;
  }

  /* FOOTER */

  .footer {
    background-image: linear-gradient(0deg, #000000e0, #000000d4),
      url(../img/footer.png);
    min-height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 15% 5% 10% 5%;
  }

  .title-item-footer {
    font-family: "Roboto-Bold";
    font-size: 1.2rem;
    color: #cfc495;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: start;
  }

  .title-item-footer {
    /* 1. Es crucial para que 'position: absolute' funcione correctamente en :before */
    position: relative;
  }

  .title-item-footer:after {
    content: "";
    background-color: #887f3e;
    width: 60px;
    height: 3px;
    position: absolute;
    left: 35px;
    bottom: -10px;
  }
  .title-item-footer:before {
    content: "";
    background-color: #887f3e;
    position: absolute;
    left: 0px;
    bottom: -10px;
    width: 25px;
    height: 3px;
  }
  .text-item-footer {
    font-family: "Roboto-Regular";
    font-size: 14px;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 2%;
    text-align: start;
  }

  .text-item-footer2 {
    font-family: "Roboto-Regular";
    font-size: 1rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 2%;
    text-align: justify;
  }

  .align-iconfootersocial {
    text-align: start;
    margin-top: 5%;
  }

  .align-iconfootersocial2 {
    text-align: start;
    margin-top: 15%;
  }
  .icon-footersocial {
    background-color: #65404000;
    font-size: 1.3rem;
    border: 1px solid #adadad;
    padding: 11px 12px;
    border-radius: 25px;
    color: #d0cab0;
    margin-right: 10px;
    transition: all 0.5s;
  }
  .icon-footersocial:hover {
    background-color: #d0cab0;
    font-size: 1.3rem;
    border: 1px solid #d0cab0;
    padding: 11px 12px;
    border-radius: 25px;
    color: #000000;
    margin-right: 10px;
    transition: all 0.5s;
  }

  .icon-footersocial2 {
    background-color: #65404000;
    font-size: 1.2rem;
    border: 1px solid #adadad;
    padding: 10px 14px;
    border-radius: 25px;
    color: #d0cab0;
    margin-right: 10px;
    transition: all 0.5s;
  }
  .icon-footersocial2:hover {
    background-color: #d0cab0;
    font-size: 1.2rem;
    border: 1px solid #d0cab0;
    padding: 10px 14px;
    border-radius: 25px;
    color: #000000;
    margin-right: 10px;
    transition: all 0.5s;
  }

  .icon-footersocial3 {
    background-color: #65404000;
    font-size: 1.2rem;
    border: 1px solid #adadad;
    padding: 10px 16px;
    border-radius: 25px;
    color: #d0cab0;
    margin-right: 10px;
    transition: all 0.5s;
  }
  .icon-footersocial3:hover {
    background-color: #d0cab0;
    font-size: 1.2rem;
    border: 1px solid #d0cab0;
    padding: 10px 14px;
    border-radius: 25px;
    color: #000000;
    margin-right: 10px;
    transition: all 0.5s;
  }

  .copy {
    background-color: black;
    padding: 5px 5px 55% 5px;
  }
  .text-copy {
    font-family: "Roboto-Bold";
    font-size: 1rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  /************************************************************************** SECTION 01 ************************************************************************************/

  .section-01 {
    padding: 5% 0px;
  }
  .subtitle-experiencia {
    font-family: "Cookie-Regular";
    font-size: 1.5rem;
    color: #fa8507;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .title-experiencia {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 2.5rem;
    color: #000000;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .text-experiencia {
    font-family: "Roboto-Regular";
    font-size: 1rem;
    color: #8b8b8b;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  /* cards */

  .row-cards-section01 {
    margin-top: 5%;
  }

  .card-item-sect01 {
    background-color: #ffffff00;
    padding: 10px 30px;
  }
  .titlecard-sect01 {
    font-family: "Rufina-Regular";
    font-weight: 500;
    font-size: 1.2rem;
    color: #000000;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: start;
  }
  .textcard-sect01 {
    font-family: "Roboto-Regular";
    font-size: 14px;
    color: #888888;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 0px;
    margin-bottom: 20px;
    text-align: start;
  }

  .card-items01 {
    background-color: white;
    border-radius: 20px;
    min-height: 480px;
    display: flex;
    flex-direction: column;
  }

  .card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    border: 2px solid #d8d8d8;
    border-radius: none;
  }

  .card-link:hover {
    text-decoration: none;
    color: inherit;
    display: block;
    border: 2px solid #ffce00;
    border-radius: 10px;
  }

  .img-container-zoom {
    min-height: 250px;
    overflow: hidden;
    position: relative;
    border-radius: 0px 0px 0px 0px;
    transition: 0.5s;
  }

  .card-link:hover .img-container-zoom {
    border-radius: 10px 10px 0px 0px;
    transition: 0.5s;
  }

  .img-container-zoom img {
    transition: transform 0.5s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .card-link:hover .img-container-zoom img {
    transform: scale(1.15);
  }

  .cta-button {
    transition: width 0.4s ease-in-out, background-color 0.2s;
    overflow: hidden;
    white-space: nowrap;
    width: 40px;
    padding: 7px 15px;
    border: 1px solid black;
    border-radius: 20px;
    background-color: #ffffff;
    color: #000000;
    font-family: "Roboto-Regular";
    font-size: 1rem;
    cursor: pointer;
  }

  .cta-default-text,
  .cta-hover-text {
    display: inline-block;
    transition: opacity 0.4s ease-in-out;
  }

  .cta-hover-text {
    opacity: 0;
    width: 0;
    padding-left: 0;
  }

  .card-link:hover .cta-button {
    width: 70%;
    background: #e9cb4d;
    border: 1px solid #e9cb4d;
    color: white;
  }

  .card-link:hover .cta-default-text {
    opacity: 1;
    width: auto;
    transition: opacity 0.2s ease-out;
  }

  .card-link:hover .cta-hover-text {
    opacity: 1;
    width: auto;
    padding-left: 5px;
  }

  .alignbutton-card-sect01 {
    text-align: start;
    margin-top: auto; /* ESTA ES LA CLAVE: Empuja el botón al final */
    /* Aquí puedes añadir el espacio de N píxeles (por ejemplo, 15px) que querías originalmente
       como un margen inferior, o padding para la tarjeta, pero no es necesario para la alineación. */
    padding-bottom: 15px; /* Un poco de espacio debajo del botón, si lo deseas */
  }

  .card-item-sect01 {
    flex-grow: 1; /* Permite que la sección de contenido crezca para llenar el espacio */
    display: flex; /* La hacemos un flex container para alinear su contenido, si es necesario */
    flex-direction: column;
    /* Otros estilos... */
  }

  /************************************************************************ RESERVATIONSSSS **********************************************************************************/

  .reservations {
    background-image: linear-gradient(0deg, #00000096, #000000d4),
      url(../img/background-reservas.jpg);
    min-height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    padding: 5% 5% 5% 5%;
    margin-bottom: 0%;
    margin-top: 5%;
  }

  .subtitle-reservations {
    font-family: "Cookie-Regular";
    font-size: 1.5rem;
    color: #fa8507;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .title-reservations {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 2.5rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: -15px;
    margin-bottom: -10px;
    text-align: center;
  }
  .text-reservations {
    font-family: "Roboto-Regular";
    font-size: 1rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  .row-reservations {
    margin-top: 5%;
  }

  .control-osse {
    font-family: "Roboto-Regular";
    font-size: 16px;
    padding: 3px 20px;
    color: white;
    font-weight: 400;
    line-height: 40px;
    background-color: #00010a;
    border-color: #ffffff33;
    border-width: 2px 2px 2px 2px;
    border-radius: 20px 20px 20px 20px;
  }

  .control-osse::placeholder {
    color: white;
    font-size: 14px;
  }

  .control-osse:focus {
    font-family: "Roboto-Regular";
    font-size: 16px;
    padding: 3px 20px;
    color: white;
    font-weight: 400;
    line-height: 40px;
    background-color: #00010a;
    border-color: #ffffff33;
    border-width: 2px 2px 2px 2px;
    border-radius: 20px 20px 20px 20px;
    box-shadow: 0px 0px 5px #565656 !important;
  }

  .custom-select-wrapper {
    position: relative;
  }

  .custom-select-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 30px;
    font-size: 14px;
  }

  .custom-select-wrapper::after {
    content: "\25BC";
    font-family: "Roboto-Medium";
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #ffffff;
    font-size: 1rem;
    z-index: 10;
  }

  .btn-submiting {
    font-family: "Roboto-Bold";
    background-color: #887f3e;
    border-radius: 15px;
    padding: 8px 20px;
    color: white;
    width: 100%;
    transition: 0.5s;
  }
  .btn-submiting:hover {
    font-family: "Roboto-Bold";
    background-color: #887f3e;
    border-radius: 15px;
    padding: 8px 20px;
    color: white;
    width: 100%;
    transition: 0.5s;
  }

  /************************************************************************************************ ABOPUT US  *******************************************/

  .aboutus {
    padding: 5% 0px;
  }

  .subtitle-aboutus {
    font-family: "Cookie-Regular";
    font-size: 1.5rem;
    color: #fa8507;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: start;
  }

  .title-aboutus {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 2rem;
    color: #000000;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: -10px;
    margin-bottom: -5px;
    text-align: center;
  }

  .text-aboutus {
    font-family: "Roboto-Regular";
    font-size: 14px;
    color: #797979;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  .text-aboutus2 {
    font-family: "Roboto-Regular";
    font-size: 14px;
    color: #686868;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: start;
  }

  .icon-youtube-aboutus {
    background-color: red;
    color: white;
    font-size: 2.5rem;
    padding: 10px 18px 8px 18px;
    border-radius: 40px;
    position: absolute;
    margin-top: -250px;
    margin-left: 140px;
  }

  /************************************************************************************************ COUNTER SECT  *******************************************/

  .counter-sect {
    background-image: linear-gradient(0deg, #0000004d, #00000014),
      url(../img/counter.jpg);
    min-height: 350px;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    padding: 10% 5% 10% 5%;
    margin-bottom: 5%;
    margin-top: 5%;
  }
  .numero-contador {
    font-family: "Roboto-Bold" !important;
    font-size: 2rem;
    color: #cfc482;
    margin-top: 0%;
    margin-bottom: 0%;
    text-align: center;
  }

  .title-contador {
    font-family: "Rufina-Regular" !important;
    font-size: 1rem;
    line-height: 1.3rem;
    color: #ffffff;
    margin-top: 5%;
    margin-bottom: 10%;
    text-align: center;
  }

  /************************************************************************************************ GALERIA SECT  *******************************************/
  .galeria {
    padding: 5% 0px;
  }

  .title-galeria {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 2.5rem;
    color: #000000;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 0px;
    margin-bottom: 5%;
    text-align: center;
  }

  .col-galeria-home {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 170px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  /************************************************************************************************ PROMOS SECT  *******************************************/
  .promos {
    margin-bottom: 10%;
  }

  /************************************************************************************************ PROMOS SECT  *******************************************/

  .rownewsletter {
    margin-top: 30px;
    padding: 40px 0px 0px 0px;
    border-top: 2px solid #887f3e;
  }

  .title-newsletter {
    font-family: "Roboto-Bold" !important;
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: #cfc495;
    text-align: start;
  }

  .control-ossenews {
    font-family: "Roboto-Regular";
    font-size: 16px;
    padding: 5px 20px;
    color: white;
    font-weight: 400;
    line-height: 5px;
    background-color: #00010a;
    border-color: #ffffff33;
    border-width: 2px 2px 2px 2px;
    border-radius: 30px 30px 30px 30px;
  }

  .control-ossenews::placeholder {
    color: white;
  }

  .control-ossenews:focus {
    font-family: "Roboto-Regular";
    font-size: 16px;
    padding: 5px 20px;
    color: white;
    font-weight: 400;
    line-height: 5px;
    background-color: #00010a;
    border-color: #ffffff33;
    border-width: 2px 2px 2px 2px;
    border-radius: 30px 30px 30px 30px;
  }
  .btn-submitingnews {
    font-family: "Roboto-Medium";
    background-color: #887f3e;
    border-radius: 20px;
    padding: 15px 20px;
    color: white;
    transition: 0.5s;
  }
  .btn-submitingnews:hover {
    font-family: "Roboto-Bold";
    background-color: #a3994b;
    border-radius: 20px;
    padding: 15px 20px;
    color: white;
    transition: 0.5s;
  }

  .testimoniales {
    background-color: #e4e4e4;
    padding: 5% 0px;
  }

  /************************************************************************************************ TESTIMONIALES SECT  *******************************************/

  .testimoniales {
    background-image: linear-gradient(0deg, #0000004d, #00000014),
      url(../img/testimoniales.png);
    min-height: 350px;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    padding: 5% 5% 5% 5%;
    margin-bottom: 5%;
    margin-top: 5%;
  }

  .subtitle-testimoniales {
    font-family: "Cookie-Regular";
    font-size: 1.5rem;
    color: #fa8507;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .title-testimoniales {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 2rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: -10px;
    margin-bottom: 5%;
    text-align: center;
  }

  .testimonial-author-name {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 1rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .testimonial-text {
    font-family: "Roboto-Light";
    font-weight: 100;
    font-size: 1rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  .img-chat {
    width: 35px;
  }

  .start-test {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 1rem;
    color: #e9cb4d;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .bg-mdl-dark {
    background-color: #000000;
  }

  .videomodales {
    width: 400px;
    margin: 0 auto;
    display: block;
  }

  .btn-close-modal {
    color: white;
  }

  .btn-close-modal:hover {
    color: white;
  }

  /*========================================== buzon ===================================*/

  .section-buzon {
    background-image: linear-gradient(0deg, #ffffff, #fffffff5),
      url(../img/background-reservas.jpg);
    min-height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    padding: 5% 0px 5% 0px;
  }

  .subtitle-buzon {
    font-family: "Cookie-Regular";
    font-size: 1.5rem;
    color: #fa8507;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 0px;
    margin-bottom: -5px;
    text-align: center;
  }
  .title-buzon {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 2rem;
    color: #000000;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
  }
  .text-buzon {
    font-family: "Roboto-Regular";
    font-size: 1rem;
    color: #b89b1f;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 5px;
    margin-bottom: 50px;
    text-align: center;
  }
}

@media (min-width: 768px) and (max-width: 1919px) {
  /* navbar */

  .content-navbar {
    background: #ffffff00;
    padding: 2% 10% 2% 10%;
    position: absolute;
    z-index: 2;
    width: 100%;
    transition: all 0.5s;
  }

  .content-navbar.is-sticky {
    position: fixed !important;
    top: 0 !important;
    padding: 0% 0% 0% 0%;
    background: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.5s;
  }

  .ulitemsco {
    align-items: center;
  }

  .navbar-system {
    background-image: linear-gradient(180deg, #00000000, #00000000);
    padding-top: 0px;
    padding-bottom: 1%;
    padding-left: 0%;
    padding-right: 0%;
    border-radius: 0px;
  }

  .alinknav {
    margin-right: 0%;
    margin-left: -5%;
  }

  .logo-nav {
    display: none;
    width: 190px;
  }

  .item-logo-solodesk {
    display: contents;
  }

  .logolistaoff {
    display: none;
  }
  .logo-nav-desk {
    width: 190px;
  }

  .iconomenuoffcanvas {
    color: white;
    margin-top: 0%;
    font-size: 2rem;
    border: none !important;
  }

  .iconomenuoffcanvasw {
    color: #004393;
  }

  .bodyoffcanva {
    background: #ffffff;
    border-radius: 60px;
    padding: 5px 20px !important;
  }

  .item-navbar {
    font-family: "Roboto-Medium";
    font-size: 1rem;
    color: #000000;
    transition: 0.5s;
  }

  .item-navbar:hover {
    font-family: "Roboto-Medium";
    font-size: 1rem;
    color: #e9cb4d;
    transition: 0.5s;
  }

  .item-navbar-contact {
    font-family: "Roboto-Bold";
    font-size: 1rem;
    color: #ffffff;
    background: linear-gradient(45deg, #fe6806, #fe6806);
    padding: 12px 20px;
    border-radius: 20px;
    margin-top: -5px;
  }

  .captionm-oss {
    right: 17% !important;
    top: 45% !important;
    left: 55% !important;
    width: 40%;
  }

  .title-captionslide {
    font-family: "Roboto-Medium";
    font-size: 4rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: -5px;
    margin-bottom: 2%;
    text-align: start;
  }
  .align-ctaslide {
    text-align: start;
  }
  .btn-ctaslid {
    font-family: "Roboto-Medium";
    font-size: 1.1rem;
    color: #ffffff;
    background: linear-gradient(45deg, #e9cb4d, #988844);
    padding: 8px 60px;
    border-radius: 10px;
    margin-top: 0px;
  }
  .btn-ctaslid:hover {
    font-family: "Roboto-Medium";
    font-size: 1.1rem;
    color: #ffffff;
    background: linear-gradient(45deg, #e9cb4d, #988844);
    padding: 8px 60px;
    border-radius: 10px;
    margin-top: 0px;
  }

  /* RODOLPHINO */

  .floating-icon-rodol {
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 99;
  }

  .tooltip-rodol {
    background-color: #00b046;
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    margin-bottom: 5px;
    font-size: 14px;
  }

  .icon-rodol {
    width: 140px;
    height: auto;
  }

  /* FOOTER */

  .footer {
    background-image: linear-gradient(0deg, #00000096, #000000d4),
      url(../img/footer.png);
    min-height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 5% 5% 5% 5%;
  }

  .title-item-footer {
    font-family: "Roboto-Bold";
    font-size: 1.5rem;
    color: #cfc495;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 0px;
    margin-bottom: 30px;
    text-align: start;
  }

  .title-item-footer {
    /* 1. Es crucial para que 'position: absolute' funcione correctamente en :before */
    position: relative;
  }

  .title-item-footer:after {
    content: "";
    background-color: #887f3e;
    width: 60px;
    height: 3px;
    position: absolute;
    left: 35px;
    bottom: -10px;
  }
  .title-item-footer:before {
    content: "";
    background-color: #887f3e;
    position: absolute;
    left: 0px;
    bottom: -10px;
    width: 25px;
    height: 3px;
  }
  .text-item-footer {
    font-family: "Roboto-Regular";
    font-size: 1rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 2%;
    text-align: justify;
  }

  .text-item-footer2 {
    font-family: "Roboto-Regular";
    font-size: 1rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 2%;
    text-align: justify;
  }

  .align-iconfootersocial {
    text-align: start;
    margin-top: 5%;
  }

  .align-iconfootersocial2 {
    text-align: start;
    margin-top: 15%;
  }
  .icon-footersocial {
    background-color: #65404000;
    font-size: 1.3rem;
    border: 1px solid #adadad;
    padding: 11px 12px;
    border-radius: 25px;
    color: #d0cab0;
    margin-right: 10px;
    transition: all 0.5s;
  }
  .icon-footersocial:hover {
    background-color: #d0cab0;
    font-size: 1.3rem;
    border: 1px solid #d0cab0;
    padding: 11px 12px;
    border-radius: 25px;
    color: #000000;
    margin-right: 10px;
    transition: all 0.5s;
  }

  .icon-footersocial2 {
    background-color: #65404000;
    font-size: 1.2rem;
    border: 1px solid #adadad;
    padding: 10px 14px;
    border-radius: 25px;
    color: #d0cab0;
    margin-right: 10px;
    transition: all 0.5s;
  }
  .icon-footersocial2:hover {
    background-color: #d0cab0;
    font-size: 1.2rem;
    border: 1px solid #d0cab0;
    padding: 10px 14px;
    border-radius: 25px;
    color: #000000;
    margin-right: 10px;
    transition: all 0.5s;
  }

  .icon-footersocial3 {
    background-color: #65404000;
    font-size: 1.2rem;
    border: 1px solid #adadad;
    padding: 10px 16px;
    border-radius: 25px;
    color: #d0cab0;
    margin-right: 10px;
    transition: all 0.5s;
  }
  .icon-footersocial3:hover {
    background-color: #d0cab0;
    font-size: 1.2rem;
    border: 1px solid #d0cab0;
    padding: 10px 14px;
    border-radius: 25px;
    color: #000000;
    margin-right: 10px;
    transition: all 0.5s;
  }

  .copy {
    background-color: black;
    padding: 5px 5px 0px 5px;
  }
  .text-copy {
    font-family: "Roboto-Bold";
    font-size: 1rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  /************************************************************************** SECTION 01 ************************************************************************************/

  .section-01 {
    padding: 5% 0px;
  }
  .subtitle-experiencia {
    font-family: "Cookie-Regular";
    font-size: 2.5rem;
    color: #fa8507;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .title-experiencia {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 4rem;
    color: #000000;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .text-experiencia {
    font-family: "Roboto-Regular";
    font-size: 1.3rem;
    color: #8b8b8b;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  /* cards */

  .row-cards-section01 {
    margin-top: 5%;
  }

  .card-item-sect01 {
    background-color: #ffffff00;
    padding: 10px 30px;
  }
  .titlecard-sect01 {
    font-family: "Rufina-Regular";
    font-weight: 500;
    font-size: 1.5rem;
    color: #000000;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: start;
  }
  .textcard-sect01 {
    font-family: "Roboto-Regular";
    font-size: 16px;
    color: #888888;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 5px;
    margin-bottom: 20px;
    text-align: start;
  }

  .card-items01 {
    background-color: white;
    border-radius: 20px;
    min-height: 590px;
    display: flex;
    flex-direction: column;
  }

  .card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    border: 2px solid #d8d8d8;
    border-radius: none;
  }

  .card-link:hover {
    text-decoration: none;
    color: inherit;
    display: block;
    border: 2px solid #ffce00;
    border-radius: 10px;
  }

  .img-container-zoom {
    min-height: 250px;
    overflow: hidden;
    position: relative;
    border-radius: 0px 0px 0px 0px;
    transition: 0.5s;
  }

  .card-link:hover .img-container-zoom {
    border-radius: 10px 10px 0px 0px;
    transition: 0.5s;
  }

  .img-container-zoom img {
    transition: transform 0.5s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .card-link:hover .img-container-zoom img {
    transform: scale(1.15);
  }

  .cta-button {
    transition: width 0.4s ease-in-out, background-color 0.2s;
    overflow: hidden;
    white-space: nowrap;
    width: 40px;
    padding: 7px 15px;
    border: 1px solid black;
    border-radius: 20px;
    background-color: #ffffff;
    color: #000000;
    font-family: "Roboto-Regular";
    font-size: 1rem;
    cursor: pointer;
  }

  .cta-default-text,
  .cta-hover-text {
    display: inline-block;
    transition: opacity 0.4s ease-in-out;
  }

  .cta-hover-text {
    opacity: 0;
    width: 0;
    padding-left: 0;
  }

  .card-link:hover .cta-button {
    width: 70%;
    background: #e9cb4d;
    border: 1px solid #e9cb4d;
    color: white;
  }

  .card-link:hover .cta-default-text {
    opacity: 1;
    width: auto;
    transition: opacity 0.2s ease-out;
  }

  .card-link:hover .cta-hover-text {
    opacity: 1;
    width: auto;
    padding-left: 5px;
  }

  .alignbutton-card-sect01 {
    text-align: start;
    margin-top: auto; /* ESTA ES LA CLAVE: Empuja el botón al final */
    /* Aquí puedes añadir el espacio de N píxeles (por ejemplo, 15px) que querías originalmente
       como un margen inferior, o padding para la tarjeta, pero no es necesario para la alineación. */
    padding-bottom: 15px; /* Un poco de espacio debajo del botón, si lo deseas */
  }

  .card-item-sect01 {
    flex-grow: 1; /* Permite que la sección de contenido crezca para llenar el espacio */
    display: flex; /* La hacemos un flex container para alinear su contenido, si es necesario */
    flex-direction: column;
    /* Otros estilos... */
  }

  /************************************************************************ RESERVATIONSSSS **********************************************************************************/

  .reservations {
    background-image: linear-gradient(0deg, #00000096, #000000d4),
      url(../img/background-reservas.jpg);
    min-height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    padding: 5% 5% 5% 5%;
    margin-bottom: 0%;
    margin-top: 5%;
  }

  .subtitle-reservations {
    font-family: "Cookie-Regular";
    font-size: 2.5rem;
    color: #fa8507;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .title-reservations {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 4rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: -15px;
    margin-bottom: -10px;
    text-align: center;
  }
  .text-reservations {
    font-family: "Roboto-Regular";
    font-size: 1.3rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  .row-reservations {
    margin-top: 5%;
  }

  .control-osse {
    font-family: "Roboto-Regular";
    font-size: 16px;
    padding: 5px 20px;
    color: white;
    font-weight: 400;
    line-height: 55px;
    background-color: #00010a;
    border-color: #ffffff33;
    border-width: 2px 2px 2px 2px;
    border-radius: 30px 30px 30px 30px;
  }

  .control-osse::placeholder {
    color: white;
  }

  .control-osse:focus {
    font-family: "Roboto-Regular";
    font-size: 16px;
    padding: 5px 20px;
    color: white;
    font-weight: 400;
    line-height: 55px;
    background-color: #00010a;
    border-color: #686868;
    border-width: 2px 2px 2px 2px;
    border-radius: 30px 30px 30px 30px;
    box-shadow: 0px 0px 5px #565656 !important;
  }

  .custom-select-wrapper {
    position: relative;
  }

  .custom-select-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 30px;
  }

  .custom-select-wrapper::after {
    content: "\25BC";
    font-family: "Roboto-Medium";
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #ffffff;
    font-size: 1rem;
    z-index: 10;
  }

  .btn-submiting {
    font-family: "Roboto-Bold";
    background-color: #887f3e;
    border-radius: 20px;
    padding: 15px 20px;
    color: white;
    width: 100%;
    transition: 0.5s;
  }
  .btn-submiting:hover {
    font-family: "Roboto-Bold";
    background-color: #a3994b;
    border-radius: 20px;
    padding: 15px 20px;
    color: white;
    width: 100%;
    transition: 0.5s;
  }

  /************************************************************************************************ ABOPUT US  *******************************************/

  .aboutus {
    padding: 5% 0px;
  }

  .subtitle-aboutus {
    font-family: "Cookie-Regular";
    font-size: 2.5rem;
    color: #fa8507;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: start;
  }

  .title-aboutus {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 3rem;
    color: #000000;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: -10px;
    margin-bottom: -5px;
    text-align: start;
  }

  .text-aboutus {
    font-family: "Roboto-Regular";
    font-size: 1.1rem;
    color: #797979;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: start;
  }

  .text-aboutus2 {
    font-family: "Roboto-Regular";
    font-size: 1rem;
    color: #686868;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: start;
  }

  .icon-youtube-aboutus {
    background-color: red;
    color: white;
    font-size: 2.5rem;
    padding: 10px 18px 8px 18px;
    border-radius: 40px;
    position: absolute;
    margin-top: -400px;
    margin-left: 450px;
  }

  /************************************************************************************************ COUNTER SECT  *******************************************/

  .counter-sect {
    background-image: linear-gradient(0deg, #0000004d, #00000014),
      url(../img/counter.jpg);
    min-height: 350px;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    padding: 5% 5% 5% 5%;
    margin-bottom: 5%;
    margin-top: 5%;
  }
  .numero-contador {
    font-family: "Roboto-Bold" !important;
    font-size: 5rem;
    color: #cfc482;
    margin-top: 0%;
    margin-bottom: 0%;
    text-align: center;
  }

  .title-contador {
    font-family: "Rufina-Regular" !important;
    font-size: 1.2rem;
    line-height: 2rem;
    color: #ffffff;
    margin-top: -5%;
    margin-bottom: 10%;
    text-align: center;
  }

  /************************************************************************************************ GALERIA SECT  *******************************************/
  .galeria {
    padding: 5% 0px;
  }

  .title-galeria {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 4rem;
    color: #000000;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 0px;
    margin-bottom: 5%;
    text-align: center;
  }

  .col-galeria-home {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 400px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  /************************************************************************************************ PROMOS SECT  *******************************************/
  .promos {
    margin-bottom: 10%;
  }

  /************************************************************************************************ PROMOS SECT  *******************************************/

  .rownewsletter {
    margin-top: 30px;
    padding: 40px 0px 0px 0px;
    border-top: 2px solid #887f3e;
  }

  .title-newsletter {
    font-family: "Roboto-Bold" !important;
    font-size: 1.5rem;
    line-height: 2rem;
    color: #cfc495;
    text-align: start;
  }

  .control-ossenews {
    font-family: "Roboto-Regular";
    font-size: 16px;
    padding: 5px 20px;
    color: white;
    font-weight: 400;
    line-height: 5px;
    background-color: #00010a;
    border-color: #ffffff33;
    border-width: 2px 2px 2px 2px;
    border-radius: 30px 30px 30px 30px;
  }

  .control-ossenews::placeholder {
    color: white;
  }

  .control-ossenews:focus {
    font-family: "Roboto-Regular";
    font-size: 16px;
    padding: 5px 20px;
    color: white;
    font-weight: 400;
    line-height: 5px;
    background-color: #00010a;
    border-color: #ffffff33;
    border-width: 2px 2px 2px 2px;
    border-radius: 30px 30px 30px 30px;
  }
  .btn-submitingnews {
    font-family: "Roboto-Medium";
    background-color: #887f3e;
    border-radius: 20px;
    padding: 15px 20px;
    color: white;
    transition: 0.5s;
  }
  .btn-submitingnews:hover {
    font-family: "Roboto-Bold";
    background-color: #a3994b;
    border-radius: 20px;
    padding: 15px 20px;
    color: white;
    transition: 0.5s;
  }

  .testimoniales {
    background-color: #e4e4e4;
    padding: 5% 0px;
  }

  /************************************************************************************************ TESTIMONIALES SECT  *******************************************/

  .testimoniales {
    background-image: linear-gradient(0deg, #0000004d, #00000014),
      url(../img/testimoniales.png);
    min-height: 350px;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    padding: 5% 5% 5% 5%;
    margin-bottom: 5%;
    margin-top: 5%;
  }

  .subtitle-testimoniales {
    font-family: "Cookie-Regular";
    font-size: 2.5rem;
    color: #fa8507;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .title-testimoniales {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 4rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 5%;
    text-align: center;
  }

  .testimonial-author-name {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 1.2rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .testimonial-text {
    font-family: "Roboto-Light";
    font-weight: 100;
    font-size: 1.3rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  .img-chat {
    width: 35px;
  }

  .start-test {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 1.2rem;
    color: #e9cb4d;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .bg-mdl-dark {
    background-color: #000000;
  }

  .videomodales {
    width: 400px;
    margin: 0 auto;
    display: block;
  }
  .btn-close-modal {
    color: white;
  }

  .btn-close-modal:hover {
    color: white;
  }

  /*========================================== buzon ===================================*/

  .section-buzon {
    background-image: linear-gradient(0deg, #ffffff, #fffffff5),
      url(../img/background-reservas.jpg);
    min-height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    padding: 5% 0px 5% 0px;
  }

  .subtitle-buzon {
    font-family: "Cookie-Regular";
    font-size: 2.5rem;
    color: #fa8507;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 0px;
    margin-bottom: 15px;
    text-align: center;
  }
  .title-buzon {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 4rem;
    color: #000000;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .text-buzon {
    font-family: "Roboto-Regular";
    font-size: 1.2rem;
    color: #b89b1f;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: -10px;
    margin-bottom: 50px;
    text-align: center;
  }
}

@media (min-width: 1920px) {
  /* navbar */

  .content-navbar {
    background: #ffffff00;
    padding: 2% 10% 2% 10%;
    position: absolute;
    z-index: 2;
    width: 100%;
    transition: all 0.5s;
  }

  .content-navbar.is-sticky {
    position: fixed !important;
    top: 0 !important;
    padding: 0% 0% 0% 0%;
    background: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.5s;
  }

  .ulitemsco {
    align-items: center;
  }

  .navbar-system {
    background-image: linear-gradient(180deg, #00000000, #00000000);
    padding-top: 0px;
    padding-bottom: 1%;
    padding-left: 0%;
    padding-right: 0%;
    border-radius: 0px;
  }

  .alinknav {
    margin-right: 0%;
    margin-left: -5%;
  }

  .logo-nav {
    display: none;
    width: 190px;
  }

  .item-logo-solodesk {
    display: contents;
  }

  .logolistaoff {
    display: none;
  }
  .logo-nav-desk {
    width: 190px;
  }

  .iconomenuoffcanvas {
    color: white;
    margin-top: 0%;
    font-size: 2rem;
    border: none !important;
  }

  .iconomenuoffcanvasw {
    color: #004393;
  }

  .bodyoffcanva {
    background: #ffffff;
    border-radius: 60px;
    padding: 10px 20px !important;
  }

  .item-navbar {
    font-family: "Roboto-Medium";
    font-size: 1rem;
    color: #000000;
    transition: 0.5s;
  }

  .item-navbar:hover {
    font-family: "Roboto-Medium";
    font-size: 1rem;
    color: #e9cb4d;
    transition: 0.5s;
  }

  .item-navbar-contact {
    font-family: "Roboto-Bold";
    font-size: 1rem;
    color: #ffffff;
    background: linear-gradient(45deg, #fe6806, #fe6806);
    padding: 12px 20px;
    border-radius: 20px;
    margin-top: -5px;
  }

  .captionm-oss {
    right: 17% !important;
    top: 45% !important;
    left: 55% !important;
    width: 40%;
  }

  .title-captionslide {
    font-family: "Roboto-Medium";
    font-size: 4rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: -5px;
    margin-bottom: 2%;
    text-align: start;
  }
  .align-ctaslide {
    text-align: start;
  }
  .btn-ctaslid {
    font-family: "Roboto-Medium";
    font-size: 1.1rem;
    color: #ffffff;
    background: linear-gradient(45deg, #e9cb4d, #988844);
    padding: 8px 60px;
    border-radius: 10px;
    margin-top: 0px;
  }
  .btn-ctaslid:hover {
    font-family: "Roboto-Medium";
    font-size: 1.1rem;
    color: #ffffff;
    background: linear-gradient(45deg, #e9cb4d, #988844);
    padding: 8px 60px;
    border-radius: 10px;
    margin-top: 0px;
  }

  /* RODOLPHINO */

  .floating-icon-rodol {
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 99;
  }

  .tooltip-rodol {
    background-color: #00b046;
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    margin-bottom: 5px;
    font-size: 14px;
  }

  .icon-rodol {
    width: 140px;
    height: auto;
  }

  /* FOOTER */

  .footer {
    background-image: linear-gradient(0deg, #00000096, #000000d4),
      url(../img/footer.png);
    min-height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 5% 5% 5% 5%;
  }

  .title-item-footer {
    font-family: "Roboto-Bold";
    font-size: 1.5rem;
    color: #cfc495;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 0px;
    margin-bottom: 30px;
    text-align: start;
  }

  .title-item-footer {
    /* 1. Es crucial para que 'position: absolute' funcione correctamente en :before */
    position: relative;
  }

  .title-item-footer:after {
    content: "";
    background-color: #887f3e;
    width: 60px;
    height: 3px;
    position: absolute;
    left: 35px;
    bottom: -10px;
  }
  .title-item-footer:before {
    content: "";
    background-color: #887f3e;
    position: absolute;
    left: 0px;
    bottom: -10px;
    width: 25px;
    height: 3px;
  }
  .text-item-footer {
    font-family: "Roboto-Regular";
    font-size: 1rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 2%;
    text-align: justify;
  }

  .text-item-footer2 {
    font-family: "Roboto-Regular";
    font-size: 1rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 2%;
    text-align: justify;
  }

  .align-iconfootersocial {
    text-align: start;
    margin-top: 5%;
  }

  .align-iconfootersocial2 {
    text-align: start;
    margin-top: 15%;
  }
  .icon-footersocial {
    background-color: #65404000;
    font-size: 1.3rem;
    border: 1px solid #adadad;
    padding: 11px 12px;
    border-radius: 25px;
    color: #d0cab0;
    margin-right: 10px;
    transition: all 0.5s;
  }
  .icon-footersocial:hover {
    background-color: #d0cab0;
    font-size: 1.3rem;
    border: 1px solid #d0cab0;
    padding: 11px 12px;
    border-radius: 25px;
    color: #000000;
    margin-right: 10px;
    transition: all 0.5s;
  }

  .icon-footersocial2 {
    background-color: #65404000;
    font-size: 1.2rem;
    border: 1px solid #adadad;
    padding: 10px 14px;
    border-radius: 25px;
    color: #d0cab0;
    margin-right: 10px;
    transition: all 0.5s;
  }
  .icon-footersocial2:hover {
    background-color: #d0cab0;
    font-size: 1.2rem;
    border: 1px solid #d0cab0;
    padding: 10px 14px;
    border-radius: 25px;
    color: #000000;
    margin-right: 10px;
    transition: all 0.5s;
  }

  .icon-footersocial3 {
    background-color: #65404000;
    font-size: 1.2rem;
    border: 1px solid #adadad;
    padding: 10px 16px;
    border-radius: 25px;
    color: #d0cab0;
    margin-right: 10px;
    transition: all 0.5s;
  }
  .icon-footersocial3:hover {
    background-color: #d0cab0;
    font-size: 1.2rem;
    border: 1px solid #d0cab0;
    padding: 10px 14px;
    border-radius: 25px;
    color: #000000;
    margin-right: 10px;
    transition: all 0.5s;
  }

  .copy {
    background-color: black;
    padding: 5px 5px 0px 5px;
  }
  .text-copy {
    font-family: "Roboto-Bold";
    font-size: 1rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  /************************************************************************** SECTION 01 ************************************************************************************/

  .section-01 {
    padding: 5% 0px;
  }
  .subtitle-experiencia {
    font-family: "Cookie-Regular";
    font-size: 2.5rem;
    color: #fa8507;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .title-experiencia {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 4rem;
    color: #000000;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .text-experiencia {
    font-family: "Roboto-Regular";
    font-size: 1.3rem;
    color: #8b8b8b;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  /* cards */

  .row-cards-section01 {
    margin-top: 5%;
  }

  .card-item-sect01 {
    background-color: #ffffff00;
    padding: 10px 30px;
  }
  .titlecard-sect01 {
    font-family: "Rufina-Regular";
    font-weight: 500;
    font-size: 1.5rem;
    color: #000000;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: start;
  }
  .textcard-sect01 {
    font-family: "Roboto-Regular";
    font-size: 16px;
    color: #888888;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 5px;
    margin-bottom: 20px;
    text-align: start;
  }

  .card-items01 {
    background-color: white;
    border-radius: 20px;
    min-height: 620px;
    display: flex;
    flex-direction: column;
  }

  .card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    border: 2px solid #d8d8d8;
    border-radius: none;
  }

  .card-link:hover {
    text-decoration: none;
    color: inherit;
    display: block;
    border: 2px solid #ffce00;
    border-radius: 10px;
  }

  .img-container-zoom {
    min-height: 250px;
    overflow: hidden;
    position: relative;
    border-radius: 0px 0px 0px 0px;
    transition: 0.5s;
  }

  .card-link:hover .img-container-zoom {
    border-radius: 10px 10px 0px 0px;
    transition: 0.5s;
  }

  .img-container-zoom img {
    transition: transform 0.5s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .card-link:hover .img-container-zoom img {
    transform: scale(1.15);
  }

  .cta-button {
    transition: width 0.4s ease-in-out, background-color 0.2s;
    overflow: hidden;
    white-space: nowrap;
    width: 40px;
    padding: 7px 15px;
    border: 1px solid black;
    border-radius: 20px;
    background-color: #ffffff;
    color: #000000;
    font-family: "Roboto-Regular";
    font-size: 1rem;
    cursor: pointer;
  }

  .cta-default-text,
  .cta-hover-text {
    display: inline-block;
    transition: opacity 0.4s ease-in-out;
  }

  .cta-hover-text {
    opacity: 0;
    width: 0;
    padding-left: 0;
  }

  .card-link:hover .cta-button {
    width: 70%;
    background: #e9cb4d;
    border: 1px solid #e9cb4d;
    color: white;
  }

  .card-link:hover .cta-default-text {
    opacity: 1;
    width: auto;
    transition: opacity 0.2s ease-out;
  }

  .card-link:hover .cta-hover-text {
    opacity: 1;
    width: auto;
    padding-left: 5px;
  }

  .alignbutton-card-sect01 {
    text-align: start;
    margin-top: auto; /* ESTA ES LA CLAVE: Empuja el botón al final */
    /* Aquí puedes añadir el espacio de N píxeles (por ejemplo, 15px) que querías originalmente
       como un margen inferior, o padding para la tarjeta, pero no es necesario para la alineación. */
    padding-bottom: 15px; /* Un poco de espacio debajo del botón, si lo deseas */
  }

  .card-item-sect01 {
    flex-grow: 1; /* Permite que la sección de contenido crezca para llenar el espacio */
    display: flex; /* La hacemos un flex container para alinear su contenido, si es necesario */
    flex-direction: column;
    /* Otros estilos... */
  }

  /************************************************************************ RESERVATIONSSSS **********************************************************************************/

  .reservations {
    background-image: linear-gradient(0deg, #00000096, #000000d4),
      url(../img/background-reservas.jpg);
    min-height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    padding: 5% 5% 5% 5%;
    margin-bottom: 0%;
    margin-top: 5%;
  }

  .subtitle-reservations {
    font-family: "Cookie-Regular";
    font-size: 2.5rem;
    color: #fa8507;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .title-reservations {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 4rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: -15px;
    margin-bottom: -10px;
    text-align: center;
  }
  .text-reservations {
    font-family: "Roboto-Regular";
    font-size: 1.3rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  .row-reservations {
    margin-top: 5%;
  }

  .control-osse {
    font-family: "Roboto-Regular";
    font-size: 16px;
    padding: 5px 20px;
    color: white;
    font-weight: 400;
    line-height: 55px;
    background-color: #00010a;
    border-color: #ffffff33;
    border-width: 2px 2px 2px 2px;
    border-radius: 30px 30px 30px 30px;
  }

  .control-osse::placeholder {
    color: white;
  }

  .control-osse:focus {
    font-family: "Roboto-Regular";
    font-size: 16px;
    padding: 5px 20px;
    color: white;
    font-weight: 400;
    line-height: 55px;
    background-color: #00010a;
    border-color: #686868;
    border-width: 2px 2px 2px 2px;
    border-radius: 30px 30px 30px 30px;
    box-shadow: 0px 0px 5px #565656 !important;
  }

  .custom-select-wrapper {
    position: relative;
  }

  .custom-select-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 30px;
  }

  .custom-select-wrapper::after {
    content: "\25BC";
    font-family: "Roboto-Medium";
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #ffffff;
    font-size: 1rem;
    z-index: 10;
  }

  .btn-submiting {
    font-family: "Roboto-Bold";
    background-color: #887f3e;
    border-radius: 20px;
    padding: 15px 20px;
    color: white;
    width: 100%;
    transition: 0.5s;
  }
  .btn-submiting:hover {
    font-family: "Roboto-Bold";
    background-color: #a3994b;
    border-radius: 20px;
    padding: 15px 20px;
    color: white;
    width: 100%;
    transition: 0.5s;
  }

  /************************************************************************************************ ABOPUT US  *******************************************/

  .aboutus {
    padding: 5% 0px;
  }

  .subtitle-aboutus {
    font-family: "Cookie-Regular";
    font-size: 2.5rem;
    color: #fa8507;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: start;
  }

  .title-aboutus {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 3rem;
    color: #000000;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: -10px;
    margin-bottom: -5px;
    text-align: start;
  }

  .text-aboutus {
    font-family: "Roboto-Regular";
    font-size: 1.1rem;
    color: #797979;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: start;
  }

  .text-aboutus2 {
    font-family: "Roboto-Regular";
    font-size: 1rem;
    color: #686868;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: start;
  }

  .icon-youtube-aboutus {
    background-color: red;
    color: white;
    font-size: 2.5rem;
    padding: 10px 18px 8px 18px;
    border-radius: 40px;
    position: absolute;
    margin-top: -400px;
    margin-left: 450px;
  }

  /************************************************************************************************ COUNTER SECT  *******************************************/

  .counter-sect {
    background-image: linear-gradient(0deg, #0000004d, #00000014),
      url(../img/counter.jpg);
    min-height: 350px;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    padding: 5% 5% 5% 5%;
    margin-bottom: 5%;
    margin-top: 5%;
  }
  .numero-contador {
    font-family: "Roboto-Bold" !important;
    font-size: 5rem;
    color: #cfc482;
    margin-top: 0%;
    margin-bottom: 0%;
    text-align: center;
  }

  .title-contador {
    font-family: "Rufina-Regular" !important;
    font-size: 1.2rem;
    line-height: 2rem;
    color: #ffffff;
    margin-top: -5%;
    margin-bottom: 10%;
    text-align: center;
  }

  /************************************************************************************************ GALERIA SECT  *******************************************/
  .galeria {
    padding: 5% 0px;
  }

  .title-galeria {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 4rem;
    color: #000000;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 0px;
    margin-bottom: 5%;
    text-align: center;
  }

  .col-galeria-home {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 400px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  /************************************************************************************************ PROMOS SECT  *******************************************/
  .promos {
    margin-bottom: 10%;
  }

  /************************************************************************************************ PROMOS SECT  *******************************************/

  .rownewsletter {
    margin-top: 30px;
    padding: 40px 0px 0px 0px;
    border-top: 2px solid #887f3e;
  }

  .title-newsletter {
    font-family: "Roboto-Bold" !important;
    font-size: 1.5rem;
    line-height: 2rem;
    color: #cfc495;
    text-align: start;
  }

  .control-ossenews {
    font-family: "Roboto-Regular";
    font-size: 16px;
    padding: 5px 20px;
    color: white;
    font-weight: 400;
    line-height: 5px;
    background-color: #00010a;
    border-color: #ffffff33;
    border-width: 2px 2px 2px 2px;
    border-radius: 30px 30px 30px 30px;
  }

  .control-ossenews::placeholder {
    color: white;
  }

  .control-ossenews:focus {
    font-family: "Roboto-Regular";
    font-size: 16px;
    padding: 5px 20px;
    color: white;
    font-weight: 400;
    line-height: 5px;
    background-color: #00010a;
    border-color: #ffffff33;
    border-width: 2px 2px 2px 2px;
    border-radius: 30px 30px 30px 30px;
  }
  .btn-submitingnews {
    font-family: "Roboto-Medium";
    background-color: #887f3e;
    border-radius: 20px;
    padding: 15px 20px;
    color: white;
    transition: 0.5s;
  }
  .btn-submitingnews:hover {
    font-family: "Roboto-Bold";
    background-color: #a3994b;
    border-radius: 20px;
    padding: 15px 20px;
    color: white;
    transition: 0.5s;
  }

  .testimoniales {
    background-color: #e4e4e4;
    padding: 5% 0px;
  }

  /************************************************************************************************ TESTIMONIALES SECT  *******************************************/

  .testimoniales {
    background-image: linear-gradient(0deg, #0000004d, #00000014),
      url(../img/testimoniales.png);
    min-height: 350px;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    padding: 5% 5% 5% 5%;
    margin-bottom: 5%;
    margin-top: 5%;
  }

  .subtitle-testimoniales {
    font-family: "Cookie-Regular";
    font-size: 2.5rem;
    color: #fa8507;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .title-testimoniales {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 4rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 5%;
    text-align: center;
  }

  .testimonial-author-name {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 1.2rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .testimonial-text {
    font-family: "Roboto-Light";
    font-weight: 100;
    font-size: 1.3rem;
    color: #ffffff;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  .img-chat {
    width: 35px;
  }

  .start-test {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 1.2rem;
    color: #e9cb4d;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  .bg-mdl-dark {
    background-color: #000000;
  }

  .videomodales {
    width: 400px;
    margin: 0 auto;
    display: block;
  }

  .btn-close-modal {
    color: white;
  }

  .btn-close-modal:hover {
    color: white;
  }

  /*========================================== buzon ===================================*/

  .section-buzon {
    background-image: linear-gradient(0deg, #ffffff, #fffffff5),
      url(../img/background-reservas.jpg);
    min-height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    padding: 5% 0px 5% 0px;
  }

  .subtitle-buzon {
    font-family: "Cookie-Regular";
    font-size: 2.5rem;
    color: #fa8507;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 0px;
    margin-bottom: 15px;
    text-align: center;
  }
  .title-buzon {
    font-family: "Rufina-Regular";
    font-weight: 100;
    font-size: 4rem;
    color: #000000;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .text-buzon {
    font-family: "Roboto-Regular";
    font-size: 1.2rem;
    color: #b89b1f;
    padding: 0px 0px;
    border-radius: 20px;
    margin-top: -10px;
    margin-bottom: 50px;
    text-align: center;
  }
}