/* PALETA DE COLOR Y ESTILOS: GRANJA LA FAVORITA
 * Inspirado en la estética campestre real: tonos café madera/moca, beige lino/arena y verde olivo/follaje.
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600;1,700&display=swap');

:root {
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-serif: 'Playfair Display', serif;

  /* Tonos café / moca / madera */
  --cafe-900: #2C1A11;
  --cafe-800: #3E271B;
  --cafe-700: #543625;
  --cafe-600: #6D4732;
  --cafe-500: #895C42;
  --cafe-100: #F3ECE7;
  --cafe-50:  #FAF6F3;

  /* Tonos beige / arena / lino */
  --beige-bg:  #FAF7F2;
  --beige-card:#FFFDF9;
  --beige-100: #F4ECE1;
  --beige-200: #EADBCA;
  --beige-300: #D8C3A8;
  --beige-400: #C2A789;

  /* Tonos verde olivo / botánico */
  --olivo-900: #24331E;
  --olivo-800: #33462B;
  --olivo-700: #425A38;
  --olivo-600: #547147;
  --olivo-500: #698C59;
  --olivo-200: #DCE8D7;
  --olivo-100: #EEF4EB;
  --olivo-50:  #F7FAF5;

  /* Luces cálidas / doradas */
  --dorado-600: #B87328;
  --dorado-500: #D98934;
  --dorado-100: #FEF4E8;
}

body {
  font-family: var(--font-sans);
  color: var(--cafe-900);
  background-color: var(--beige-bg);
  scroll-behavior: smooth;
}

h1, h2, h3, h4, .font-serif-heading {
  font-family: var(--font-serif);
  letter-spacing: -0.01em;
}

/* Efecto de navegación y tarjetas de vidrio cálido */
.glass-nav {
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.glass-card {
  background: rgba(255, 253, 249, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Animaciones suaves */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fade-in {
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-scale-up {
  animation: scaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Calendario interactivo con tonos de la granja */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

@media (min-width: 640px) {
  .calendar-grid {
    gap: 0.5rem;
  }
}

.calendar-day {
  min-height: 3.6rem;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 0.75rem;
  padding: 0.35rem;
}

@media (min-width: 640px) {
  .calendar-day {
    min-height: 4.8rem;
    border-radius: 0.85rem;
    padding: 0.5rem;
  }
}

.calendar-day.is-available {
  background-color: #F0FDF4;
  border: 1.5px solid #86EFAC;
  cursor: pointer;
}

.calendar-day.is-available:hover {
  border-color: #16A34A;
  background-color: #DCFCE7;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -3px rgba(22, 163, 74, 0.25);
}

.calendar-day.is-booked {
  background-color: #FEF2F2;
  border: 1.5px solid #FCA5A5;
  cursor: not-allowed;
  opacity: 0.9;
}

.calendar-day.is-past {
  background-color: #F5EFEB;
  border: 1px solid #EADBCA;
  opacity: 0.45;
  cursor: not-allowed;
}

.calendar-day.is-selected {
  background-color: var(--olivo-700) !important;
  color: #FFFFFF !important;
  border-color: var(--olivo-800) !important;
  box-shadow: 0 10px 20px -3px rgba(51, 70, 43, 0.4);
  transform: scale(1.02);
}

.calendar-day.is-selected .day-badge {
  background-color: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

/* Badges de estado en el calendario */
.day-badge {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border-radius: 0.375rem;
  width: fit-content;
}

.badge-available {
  background-color: #DCFCE7;
  color: #15803D;
}

.badge-booked {
  background-color: #FEE2E2;
  color: #991B1B;
}

/* Scrollbar estilizada en tonos tierra */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #F4ECE1;
}

::-webkit-scrollbar-thumb {
  background: #D8C3A8;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #B39A7D;
}

/* Botón flotante para WhatsApp con tono verde olivo */
.floating-contact-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 40;
  background-color: #2F6932;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.2s ease;
}

.floating-contact-btn:hover {
  background-color: #245327;
  transform: translateY(-3px) scale(1.03);
}

/* Modal de apartado */
.modal-overlay {
  background: rgba(44, 26, 17, 0.72);
  backdrop-filter: blur(8px);
}