/* Fuentes */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&display=swap");

:root {
  --cream: #f5f0e6;
  --cream-dark: #e8e0d0;
  --wood-brown: #5c4033;
  --wood-primary: rgb(140 88 54 / 95%);
  --wood-primary-hover: rgb(165 105 65 / 100%);
  --wood-dark: #3d2b1f;
  --wood-light: #8b6914;
  --text-dark: #2c1810;
  --premium-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.4);
}

body {
  font-family: "Crimson Text", serif;
  background-color: var(--cream);
  color: var(--text-dark);
}

.font-display {
  font-family: "Playfair Display", serif;
}

.font-serif {
  font-family: "EB Garamond", serif;
}

.bg-paper {
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23d4c9b5' fill-opacity='0.15'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.diamond-clip {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Menú fijo al hacer scroll - mismo estilo que el del hero (negro, letras claras) */
.nav-fixed {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
}

.nav-fixed.nav-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Estilos Monumentales con Resuello */
button,
.btn-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 6.5rem; /* El resuello monumental */
  background-color: var(--wood-primary);
  color: var(--cream);
  border-radius: 8px;
  font-family: "Crimson Text", serif;
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 15px 45px -15px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  box-sizing: border-box;
}

button:hover,
.btn-premium:hover {
  background-color: var(--wood-primary-hover);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

button:active,
.btn-premium:active {
  transform: translateY(-2px);
}

/* Variantes de botones para la noche y la sombra */
section.bg-wood-dark button {
  background-color: transparent;
  border: 1px solid var(--cream);
  color: var(--cream);
  padding: 1.5rem 6.5rem; /* Reinforcing the monumental breathing space */
}

section.bg-wood-dark button:hover {
  background-color: var(--cream);
  color: var(--wood-dark);
}

/* Animación sutil de aparición */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  animation: fadeInUp 0.8s ease-out forwards;
}

/* Sombra premium para legibilidad de textos sobre imágenes */
.text-shadow-premium {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 0, 0, 0.2);
}

#mobile-menu {
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  background-color: rgba(61, 43, 31, 0.85); /* 85% opacidad usando wood-dark */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

#mobile-menu.hidden-menu {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

#mobile-menu:not(.hidden-menu) {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Tipografía de élite para el menú móvil */
.mobile-nav-link {
  font-size: 14px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  font-family: 'Crimson Text', serif;
  opacity: 0.8;
  transition: all 0.3s ease;
  padding: 0.5rem 0;
  display: block;
}

.mobile-nav-link:hover {
  opacity: 1;
  letter-spacing: 0.55em;
  color: #f5f0e6;
}

.mobile-nav-link.active {
  opacity: 1;
  color: #fcd34d; /* amber-300 */
}

/* Reducción de fuente para menú premium desktop */
nav ul li a {
  font-size: 8px;
  letter-spacing: 0.4em;
  opacity: 0.7;
  font-weight: 500;
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  nav ul li a {
    font-size: 8.5px;
  }
}

nav ul li a:hover {
  opacity: 1;
}

/* Visor de Reliquias (Lightbox) */
.zoom-overlay {
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500; /* Por encima de todo */
  opacity: 0;
  transition: opacity 0.4s ease;
}
.zoom-overlay.active {
  display: flex;
  opacity: 1;
}
.zoom-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: grab;
}
.zoom-container:active {
  cursor: grabbing;
}
#zoomed-image {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  transform-origin: center;
}
.zoom-controls {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 510;
}
.zoom-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(245, 240, 230, 0.1);
  border: 1px solid rgba(245, 240, 230, 0.2);
  color: #f5f0e6;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}
.zoom-btn:hover {
  background: rgba(245, 240, 230, 0.2);
  transform: scale(1.1);
}
.close-zoom {
  position: absolute;
  top: 30px;
  right: 30px;
  color: #f5f0e6;
  cursor: pointer;
  z-index: 510;
  padding: 10px;
}
.close-zoom:hover {
  opacity: 0.7;
}

/* Overlay de Lupa para imágenes marcadas */
.zoomable-container {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.zoom-icon-wrapper {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(61, 43, 31, 0.8);
  padding: 0.5rem;
  border-radius: 9999px;
  opacity: 0;
  transition: all 0.4s ease;
  transform: scale(0.8);
  pointer-events: none;
}
.zoomable-container:hover .zoom-icon-wrapper {
  opacity: 1;
  transform: scale(1);
}

/* Efecto Muted - Color tenue y elegante */
.img-muted {
  filter: saturate(0.3) brightness(1.1);
  transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.img-muted:hover {
  filter: saturate(1) brightness(1);
}

/* Mapa Premium Dark Mode */
.premium-dark-map {
  filter: invert(90%) hue-rotate(180deg) brightness(0.9) contrast(1.1) saturate(0.5);
  transition: all 1s ease;
}

.premium-dark-map:hover {
  filter: invert(0%) hue-rotate(0deg) brightness(1) contrast(1) saturate(1);
}

.map-card-glow {
  box-shadow: 0 0 50px -10px rgba(92, 64, 51, 0.2);
}