@charset "UTF-8";
/*GENERALES*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/*Lista*/
/*Variable*/
/*MAP*/
/*EXTEND*/
.flex-center, section .container-btn-modales, section .container-btn-modales .container-btn-modal, footer .container-data-uno {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

/*MIXIN*/
/* RESET CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

/* FONT FAMILY */
body,
ul {
  font-family: "poppins"; }

/* GENERAL */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
  position: relative; }

/* HEADER, SECTION, FOOTER */
header, section, footer {
  flex: 0 0 auto; }

section {
  flex: 1 0 auto; }

footer {
  flex-shrink: 0;
  margin-top: auto; }

/*PORTADAS*/
.encabezados {
  text-align: center;
  background-size: cover;
  /* Ajusta la imagen para que cubra toda la sección */
  background-position: center;
  /* Centra la imagen */
  padding: 50px;
  margin-bottom: 24px; }
  .encabezados .pag-titulo {
    color: #034069;
    font-size: 2em;
    margin: 12px 0;
    font-weight: bold;
    font-size: 1.5em;
    color: white; }
  .encabezados .pag-parrafo {
    color: gray;
    font-size: 16px;
    margin: 10px 0;
    line-height: 1.5;
    padding-left: 24px;
    padding-right: 24px;
    color: white; }
  .encabezados .sombra {
    background-color: black;
    z-index: 1; }

/*MODIFICACIONES A LOS COMPONENTES DE BOOTSTRAP*/
/*NAV DE BOOTSTRAP*/
nav .container-fluid .collapse ul li a {
  color: #034069; }

nav .container-fluid .collapse ul .underline {
  position: relative;
  font-size: 1rem;
  color: #034069;
  text-transform: uppercase; }
  nav .container-fluid .collapse ul .underline::after {
    content: '';
    /* Crea un contenido vacío */
    display: block;
    /* Convierte el pseudo-elemento en un bloque */
    width: 0;
    /* Ancho inicial del subrayado */
    height: 3px;
    /* Altura del subrayado */
    background: #034069;
    /* Color del subrayado */
    transition: width 0.3s;
    /* Transición suave para el efecto de subrayado */
    position: absolute;
    /* Posiciona el pseudo-elemento de forma absoluta */
    left: 0;
    /* Alinea el pseudo-elemento a la izquierda */
    bottom: 0px;
    /* Coloca el pseudo-elemento debajo del texto */ }
  nav .container-fluid .collapse ul .underline:hover::after {
    width: 100%;
    /* Expande el subrayado al 100% del ancho del enlace */ }
  nav .container-fluid .collapse ul .underline .nav-link:hover {
    color: #ff0066; }

nav .container-fluid .collapse ul .actual {
  font-weight: 600;
  color: #ff0066; }

nav img {
  width: 280px;
  padding-left: 24px; }

nav .nav-icono-contenedor {
  flex-direction: row; }
  nav .nav-icono-contenedor .nav-icono-titulo {
    color: #034069;
    margin: 0px; }
  nav .nav-icono-contenedor .nav-icono {
    list-style: none;
    padding-left: 1rem;
    font-size: 1.5rem;
    color: #034069; }
    nav .nav-icono-contenedor .nav-icono:hover {
      color: #ff0066; }

/*MODAL HOSPEDAJES, PUEBLOS, GASTRONOMIA*/
.modal .modal-dialog .modal-content .modal-header h5 {
  color: #034069;
  font-size: 2em;
  margin: 12px 0;
  font-weight: bold;
  font-size: 1.4em; }

.modal .modal-dialog .modal-content .modal-body .hotel .galeria,
.modal .modal-dialog .modal-content .modal-body .pueblos .galeria {
  display: flex;
  flex-direction: row;
  flex: 1 33%; }
  .modal .modal-dialog .modal-content .modal-body .hotel .galeria img,
  .modal .modal-dialog .modal-content .modal-body .pueblos .galeria img {
    width: 33%;
    padding: 5px;
    border-radius: 16px; }

.modal .modal-dialog .modal-content .modal-body .hotel h3,
.modal .modal-dialog .modal-content .modal-body .pueblos h3 {
  color: #034069;
  font-size: 2em;
  margin: 12px 0;
  font-weight: bold;
  font-size: 1.2em; }

.modal .modal-dialog .modal-content .modal-body .hotel p,
.modal .modal-dialog .modal-content .modal-body .pueblos p {
  color: gray;
  font-size: 16px;
  margin: 10px 0;
  line-height: 1.5; }

.modal .modal-dialog .modal-content .modal-body .hotel ul li::marker,
.modal .modal-dialog .modal-content .modal-body .pueblos ul li::marker {
  color: #034069; }

.modal .modal-dialog .modal-content .modal-footer button {
  background-color: #034069;
  border: none; }
  .modal .modal-dialog .modal-content .modal-footer button:hover {
    background-color: #ff0066; }

/*MAPA*/
.mapa {
  padding-bottom: 24px; }

/*HOME*/
/* CAROUSEL */
section .carousel .carousel-inner .carousel-item img {
  min-height: 250px;
  /* Altura mínima para pantallas grandes */
  object-fit: cover; }

/*TEXTO PRINCIPAL*/
main {
  display: flex;
  flex-direction: column;
  padding-left: 24px;
  padding-right: 24px;
  justify-content: center;
  align-items: center;
  text-align: center; }
  main h1 {
    color: #034069;
    font-size: 2em;
    margin: 12px 0;
    font-weight: bold;
    padding-bottom: 16px;
    padding-top: 16px;
    margin: 8px 0 0 0; }
  main p {
    color: gray;
    font-size: 16px;
    margin: 10px 0;
    line-height: 1.5;
    width: 80%;
    margin: 0px;
    padding-top: 8px;
    margin-bottom: 8px; }
  main hr {
    border-color: #034069;
    width: 50%;
    margin: 10px; }

/*CARDS*/
.card-display {
  display: grid;
  grid-template-areas: "a-uno b-uno c-uno" "a-dos b-dos c-dos";
  padding: 0 16px 24px 16px; }
  .card-display .card-container {
    display: flex;
    flex: 0 0 25%;
    margin: 1rem;
    align-items: baseline;
    height: 200px;
    position: relative;
    border: #034069, solid;
    border-radius: 16px;
    background-color: white; }
    .card-display .card-container:hover {
      border: #ff0066, solid; }
  .card-display div i {
    font-size: 1.5rem;
    padding: 1rem;
    color: #ff0066; }
  .card-display .card-data h3 {
    color: #034069;
    font-size: 2em;
    margin: 12px 0;
    font-weight: bold;
    font-size: 1.2em;
    padding-bottom: 16px; }
  .card-display .card-data p {
    color: gray;
    font-size: 16px;
    margin: 10px 0;
    line-height: 1.5;
    padding-right: 24px; }
  .card-display .card-data a {
    position: absolute;
    right: 0;
    bottom: 0;
    padding-right: 24px;
    padding-bottom: 24px;
    text-decoration: none;
    color: #034069; }
    .card-display .card-data a:hover {
      color: #ff0066;
      font-weight: bold; }

/*HOSPEDAJES*/
section .container-btn-modales {
  flex-direction: row;
  flex-wrap: wrap;
  padding-bottom: 24px; }
  section .container-btn-modales .container-btn-modal {
    /*flex: 1 1 33%;*/
    width: 300px;
    height: 200px;
    flex-direction: row;
    /*padding: 16px;*/
    background-color: #034069;
    margin: 5px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    transition: background-color 0.5s ease; }
    section .container-btn-modales .container-btn-modal:hover .overlay {
      animation: slide-in 0.5s forwards, slide-out 0.5s 2s forwards; }
    section .container-btn-modales .container-btn-modal:hover {
      animation: change-bg 0.5s 2.5s forwards;
      /* Retrasa el cambio de fondo hasta que la imagen se haya retirado */ }
    section .container-btn-modales .container-btn-modal:hover {
      background-color: #ff0066; }
      section .container-btn-modales .container-btn-modal:hover:hover h3 {
        color: white;
        font-size: 1.8em;
        position: relative;
        z-index: 2; }
      section .container-btn-modales .container-btn-modal:hover:hover .overlay {
        animation: slide-in 0.5s forwards, slide-out 0.5s 2s forwards; }
    section .container-btn-modales .container-btn-modal .container-info {
      position: relative;
      z-index: 2; }
      section .container-btn-modales .container-btn-modal .container-info h3 {
        color: #034069;
        font-size: 2em;
        margin: 12px 0;
        font-weight: bold;
        display: block;
        color: white;
        font-size: 1.3em;
        transition: color 0.5s ease, font-size 0.5s ease;
        text-align: center;
        cursor: pointer; }
  section .container-btn-modales .overlay {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-size: cover;
    opacity: 0.5;
    /* Ajusta la opacidad de la imagen */
    z-index: 1; }

@keyframes slide-in {
  from {
    left: -100%; }
  to {
    left: 0; } }

@keyframes slide-out {
  from {
    left: 0; }
  to {
    left: 100%; } }

@keyframes change-bg {
  to {
    background-color: #ff0066;
    /* Nuevo color de fondo */ } }

/*__FORMULARIO CONTACTO*/
.form-container {
  width: 500px;
  border: #034069, solid;
  border-radius: 16px;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
  font-family: "poppins";
  color: #034069;
  margin-bottom: 24px; }
  .form-container h2 {
    color: #034069;
    font-size: 2em;
    margin: 12px 0;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 20px;
    text-align: center; }
    .form-container h2 i {
      color: #ff0066; }
  .form-container form .form-item {
    margin-bottom: 20px; }
    .form-container form .form-item label {
      display: flex;
      margin-bottom: 5px; }
    .form-container form .form-item input,
    .form-container form .form-item textarea {
      width: 100%;
      padding: 10px;
      border: #034069, solid;
      border-radius: 12px;
      box-sizing: border-box; }
  .form-container form button {
    background-color: #034069;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'poppins'; }
    .form-container form button:hover {
      background-color: #ff0066; }

/*__FOOTER*/
footer {
  display: grid;
  border-radius: 24px 24px 0px 0px;
  font-size: 12px;
  padding: 24px;
  background: #034069;
  grid-template-areas: "logo data";
  justify-content: space-around; }
  footer .logo-footer img {
    width: 250px;
    height: auto; }
  footer .container-data-uno {
    align-items: start;
    padding-left: 12px;
    padding-right: 12px; }
    footer .container-data-uno div h3 {
      color: #034069;
      font-size: 2em;
      margin: 12px 0;
      font-weight: bold;
      color: white;
      font-size: 1.3em;
      padding: 16px;
      margin: 0; }
    footer .container-data-uno div .footer-hr {
      margin: 0;
      border: 0;
      border-top: solid;
      border-color: white; }
  footer .container-data-dos {
    display: flex;
    margin-right: 8rem; }
    footer .container-data-dos div h3 {
      color: #034069;
      font-size: 2em;
      margin: 12px 0;
      font-weight: bold;
      color: white;
      font-size: 1em;
      padding: 12px;
      margin: 0; }
    footer .container-data-dos div p {
      color: gray;
      font-size: 16px;
      margin: 10px 0;
      line-height: 1.5;
      color: white;
      font-size: 1em;
      margin-block-start: 0em;
      margin-block-end: 0em;
      padding: 0 12px 12px 12px; }
    footer .container-data-dos .container-derecho {
      padding-left: 24px; }
      footer .container-data-dos .container-derecho div ul {
        display: flex;
        list-style: none; }
        footer .container-data-dos .container-derecho div ul li a {
          color: white;
          font-size: 2em;
          padding: 0 0.8em 0 0; }
          footer .container-data-dos .container-derecho div ul li a:hover {
            color: #ff0066; }

/*MEDIAQUERIES*/
@media screen and (max-width: 1210px) {
  .card-display {
    grid-template-areas: "a-uno b-uno" "c-uno a-dos" "b-dos c-dos"; }
  footer {
    grid-template-areas: "logo" "data";
    justify-content: center;
    margin: 0px; }
  footer .container-data-uno div h3 {
    padding: 8px 0px 8px 0px; }
  footer .logo-footer {
    display: flex;
    justify-content: center; }
  footer .logo-footer img {
    padding: 8px;
    margin-left: 0;
    margin-top: 0; } }

@media screen and (max-width: 1196px) {
  .pueblos {
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 24px; }
  .c-btn {
    margin-right: 5px;
    margin-left: 5px; } }

@media screen and (max-width: 992px) {
  nav .nav-icono-contenedor {
    justify-content: flex-start; } }

@media screen and (max-width: 960px) {
  .pueblos {
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 24px; } }

@media screen and (max-width: 910px) {
  main p {
    width: 100%; } }

@media screen and (max-width: 768px) {
  section .carousel .carousel-inner .carousel-item img {
    min-height: 300px;
    /* Ajusta la altura para pantallas medianas */ } }

@media screen and (max-width: 740px) {
  .card-display {
    grid-template-areas: "a-uno" "b-uno" "c-uno" "a-dos" "b-dos" "c-dos"; } }

@media screen and (max-width: 712px) {
  .card-display {
    grid-template-areas: "a-uno"  "b-uno" "c-uno" "a-dos" "b-dos" "c-dos"; } }

@media screen and (max-width: 630px) {
  .pueblos {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 24px; }
  .c-btn {
    margin-right: 2px;
    margin-left: 2px; } }

@media screen and (max-width: 610px) {
  .container-data-dos {
    flex-direction: column;
    margin-right: 0px; }
  .logo-footer {
    padding: 8px;
    display: flex;
    justify-content: center; }
  .container-derecho {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding: 0px; } }

@media screen and (max-width: 576px) {
  section .carousel .carousel-inner .carousel-item img {
    min-height: 250px;
    /* Ajusta la altura para pantallas pequeñas */ } }

@media screen and (max-width: 555px) {
  .form-container {
    width: 395px; } }

@media screen and (max-width: 440px) {
  nav img {
    width: 250px; } }

@media screen and (max-width: 432px) {
  .container-data-uno {
    padding-left: 24px; } }

@media screen and (max-width: 405px) {
  footer .logo-footer img {
    padding: 0;
    width: 300px; }
  footer .container-data-uno div h3 {
    padding-left: 50px; }
  footer .container-data-uno div hr {
    padding: 8px; }
  footer .container-data-dos div p {
    padding-left: 50px; } }

@media screen and (max-width: 400px) {
  .form-container {
    width: 345px; } }