:root {
  --color-principal: #d8bfae;
  --color-secundario: #8c6f5a;
  --color-texto: #333;
  --color-gris-suave: #e1dddd;
  --color-acento: #c48f72;
  --color-blanco: white;

  --fuente-base: "Inter", sans-serif;
  --fuente-titulos: "Playfair Display", serif;
}
body {
  font-family: var(--fuente-base);
  color: var(--color-texto);
  background-color: var(--color-gris-suave);
}

body {
  font-family: var(--fuente-base);
  color: var(--color-texto);
}
h1, h2, h3, h4, h5 {
  font-family: var(--fuente-titulos);
  color: var(--color-secundario);
}
/* HERO */
.hero {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.hero-logo {
  width: 70px;
  height: auto;
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: 3rem;
  color: var(--color-secundario);
}
/* CARDS */
.card {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.card img {
  height: 360px;
  object-fit: cover;
}

.card h3 {
  font-family: var(--fuente-titulos);
  color: var(--color-secundario);
  font-size: 1.6rem;
}
/* FOOTER */
footer h5,
footer h6 {
  font-family: var(--fuente-titulos) !important;
  color: var(--color-secundario) !important;
}

footer p,
footer a {
  font-family: var(--fuente-base) !important;
  color: var(--color-texto) !important;
}

footer a:hover {
  color: var(--color-acento) !important;
}
/* SECCIONES INTERNAS */
.seccion-interna {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.seccion-interna h2,
.seccion-interna h3 {
  font-family: var(--fuente-titulos);
  color: var(--color-secundario);
  margin-bottom: 1rem;
}

.seccion-interna p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-texto);
}
/* Aumentar tamaño de las imágenes laterales */
.seccion-interna .col-6 img {
  width: 100%;
  max-width: 100%;
}
/* Imágenes laterales más grandes */
.seccion-interna .col-md-5 img {
  width: 105%;
  max-width: 105%;
}
.seccion-interna .col-md-5 {
  padding: 0 1rem;
}
.seccion-interna .col-md-5 p {
  position: relative;
  z-index: 2;
}


/* Aumentar tamaño de la imagen central */
.seccion-interna .col-md-6 img {
  width: 95%;
  max-width: 95%;
}
/* Aumentar el ancho de los bloques laterales de la sección 2 */
.seccion-interna .col-md-5 {
  flex: 0 0 48%;
  max-width: 48%;
}


/* Sombra suave para imágenes */
.sombra {
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  border-radius: 12px;
}

/* Separador vertical */
.vertical-divider {
  width: 1px;
  height: 200px;
  background-color: #171616;
  border-radius: 2px;
}
/* Reducir el ancho visual del separador vertical */
.seccion-interna .col-md-2 {
  flex: 0 0 4%;
  max-width: 4%;
}
/* Títulos principales */
.seccion-interna h2 {
  font-size: 2.2rem;
  margin-bottom: 1.2rem;
}

/* Títulos secundarios */
.seccion-interna h3 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
/* Espaciado entre secciones internas */
.seccion-interna {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
/* Espaciado entre imagen y texto dentro de cada bloque */
.seccion-interna .col-md-5 .col-6 {
  padding: 0 1.2rem;
}
.vertical-divider {
  width: 1px;
  height: 180px;
  background-color: rgba(0,0,0,0.15);
  border-radius: 2px;
}
/* Bloque del vídeo */
.seccion-interna .ratio {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

.seccion-interna .text-muted {
  font-size: 1rem;
}

/* Ajustes del footer */
footer {
  background-color: var(--color-blanco);
  padding-top: 2rem;
  padding-bottom: 2rem;
}

footer h5,
footer h6 {
  font-family: var(--fuente-titulos) !important;
  color: var(--color-secundario) !important;
}

footer p,
footer a {
  font-family: var(--fuente-base) !important;
  color: var(--color-texto) !important;
}

footer a:hover {
  color: var(--color-acento) !important;
}
/*menú*/

/* NAVBAR */
nav.navbar {
  background-color: var(--color-blanco);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
.logo-huella {
  height: 22px;
  width: auto;
  object-fit: contain;
}
/* NUESTROS HUESPEDES Título principal */
h2.fw-bold {
  font-family: var(--fuente-titulos);
  color: var(--color-secundario);
  font-size: 2.4rem;
  margin-bottom: 1rem;
}

/* Cards de huéspedes */
.card {
  border: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.16);
}

.card-img-top {
  height: 260px;
  object-fit: cover;
}

.card-title {
  font-family: var(--fuente-titulos);
  color: var(--color-secundario);
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}

.card-body h5 {
  font-family: var(--fuente-base);
  color: var(--color-acento);
  margin-bottom: 0.8rem;
}

.card-text {
  font-family: var(--fuente-base);
  color: var(--color-texto);
  font-size: 1rem;
  line-height: 1.6;
}
/*botón adoptar*/
.btn-adoptar {
  background-color: var(--color-acento);
  color: white;
  font-family: var(--fuente-base);
  font-weight: 600;
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  transition: background-color 0.25s ease, transform 0.25s ease;
  text-decoration: none;
  display: inline-block;
}

.btn-adoptar:hover {
  background-color: var(--color-secundario);
  transform: translateY(-3px);
  color: white;
}
/*calendario*/
/* Contenedor general */
.calendario-container {
  background-color: #fff;
  border-radius: 14px;
  
}

/* Cabecera */
.calendario-header {
  text-align: center;
  margin-bottom: 1rem;
}

.calendario-header .mes {
  font-family: var(--fuente-titulos);
  font-size: 1.4rem;
  color: var(--color-secundario);
}

/* Grid del calendario */
.calendario-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.6rem;
  text-align: center;
  font-family: var(--fuente-base);
}

.calendario-grid span {
  padding: 0.6rem 0;
  border-radius: 8px;
  font-weight: 500;
  color: var(--color-texto);
}

/* Días vacíos */
.calendario-grid .vacio {
  background: transparent;
}

/* Días normales */
.calendario-grid .dia {
  background-color: #f5f5f5;
}

/* Días disponibles */
.calendario-grid .disponible {
  background-color: var(--color-acento);
  color: white;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.calendario-grid .disponible:hover {
  background-color: var(--color-secundario);
  transform: translateY(-3px);
}

/* Botón */
.btn-adoptar {
  background-color: var(--color-acento);
  color: white;
  font-family: var(--fuente-base);
  font-weight: 600;
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  transition: background-color 0.25s ease, transform 0.25s ease;
  text-decoration: none;
  display: inline-block;
}

.btn-adoptar:hover {
  background-color: var(--color-secundario);
  transform: translateY(-3px);
  color: white;
}
.calendario-container {
  background-color: #fff;
  border-radius: 14px;
}

/* Selector de mes */
.calendario-selector {
  display: flex;
  justify-content: center;
  gap: 1rem;
}


.mes-btn {
  background-color: var(--color-gris-suave);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-family: var(--fuente-base);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mes-btn:hover {
  background-color: var(--color-acento);
  color: white;
}

/* Calendarios */
.calendario {
  display: none;
}

.calendario.mes-activo {
  display: block;
}

/* Grid */
.calendario-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.6rem;
  text-align: center;
  font-family: var(--fuente-base);
}

.calendario-grid span {
  padding: 0.6rem 0;
  border-radius: 8px;
  font-weight: 500;
  color: var(--color-texto);
}

.calendario-grid .vacio {
  background: transparent;
}

.calendario-grid .dia {
  background-color: #f5f5f5;
}

.calendario-grid .disponible {
  background-color: var(--color-acento);
  color: white;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.calendario-grid .disponible:hover {
  background-color: var(--color-secundario);
  transform: translateY(-3px);
}
/* Centrar y hacer cuadradas las imágenes de Contacta */
/* Imágenes cuadradas y centradas en la página Contacta */
.contacta-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 450px; /* tamaño cuadrado elegante */
  height: 450px;
  object-fit: cover; /* recorta sin deformar */
  border-radius: 12px; /* opcional, queda editorial */
}

.contacta-img {
  width: 100%;
  max-width: 350px;
  height: 350px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
/* Sección del formulario e información */
.contacta-seccion {
  background-color: #f8f8f8; /* gris suave editorial */
  border-radius: 16px;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Más separación entre columnas */
.contacta-seccion .col-md-6 {
  margin-bottom: 2rem;
}
.huella-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  opacity: 0.8; /* opcional, queda suave */
}
.btn{
    background-color: var(--color-secundario);
    border: none;
}
@media (max-width: 768px) {

  /* Fuerza que los bloques internos se apilen */
  .seccion-interna .col-md-5 .row {
    flex-direction: column !important;
  }

  /* Asegura que cada subcolumna ocupa todo el ancho */
  .seccion-interna .col-md-5 .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Oculta el separador vertical */
  .vertical-divider {
    display: none !important;
  }

  /* Espaciado entre bloques */
  .seccion-interna .col-12 {
    margin-bottom: 20px;
  }
}

/* Solo escritorio: dos bloques laterales + separador estrecho */
@media (min-width: 768px) {
  .seccion-interna .col-md-5 {
    flex: 0 0 48%;
    max-width: 48%;
  }

  .seccion-interna .col-md-2 {
    flex: 0 0 4%;
    max-width: 4%;
  }
}
@media (max-width: 767.98px) {
  .seccion-interna .col-md-5,
  .seccion-interna .col-md-2 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .vertical-divider {
    display: none !important;
  }
}