/* Ocultar cursor nativo */
 html,
 body {
     cursor: none;
     font-family: 'Inter', sans-serif;
 }

 /* Cursor personalizado */
 .custom-cursor {
     width: 20px;
     height: 20px;
     border: 1px solid #8c2f1d;
     border-radius: 50%;
     position: fixed;
     top: 0;
     left: 0;
     pointer-events: none;
     transform: translate(-50%, -50%);
     transition:
         width .3s ease,
         height .3s ease,
         border-color .3s ease;
     z-index: 9999;
 }

 /* Hover effect */
 .custom-cursor.hover {
     width: 40px;
     height: 40px;
     border-color: rgba(140, 47, 29, .4);
 }

 /* Ocultar en mobile */
 @media (max-width: 768px) {
     .custom-cursor {
         display: none;
     }

     html,
     body {
         cursor: auto;
     }
 }


 .hover-underline {
     position: relative;
 }

 .hover-underline::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -4px;
     width: 0;
     height: 1px;
     background-color: #8c2f1d;
     transition: width .4s cubic-bezier(.16, .84, .44, 1);
 }

 .hover-underline:hover::after {
     width: 100%;
 }

 /* Base reveal */
 .reveal {
     opacity: 0;
     transform: translateY(40px);
     transition: opacity 1s cubic-bezier(.16, .84, .44, 1),
         transform 1s cubic-bezier(.16, .84, .44, 1);
 }

 .reveal.is-visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* Hero text stagger */
 .stagger>* {
     opacity: 0;
     transform: translateY(20px);
     transition: opacity .8s ease, transform .8s ease;
 }

 .stagger.is-visible>* {
     opacity: 1;
     transform: translateY(0);
 }

 .stagger.is-visible>*:nth-child(1) {
     transition-delay: .1s;
 }

 .stagger.is-visible>*:nth-child(2) {
     transition-delay: .25s;
 }

 .stagger.is-visible>*:nth-child(3) {
     transition-delay: .4s;
 }

 .stagger.is-visible>*:nth-child(4) {
     transition-delay: .55s;
 }

 /* Smooth image zoom */
 .image-soft-zoom img {
     transition: transform 6s ease;
 }

 .image-soft-zoom:hover img {
     transform: scale(1.05);
 }

 /* Subtle fade nav */
 header {
     position: relative;
     z-index: 1000;
     /* <--- AGREGAR ESTO para que siempre esté arriba de todo */
     opacity: 0;
     transform: translateY(-20px);
     animation: headerFade 1.2s ease forwards;
 }

 /* HAMBURGER */

 .hamburger-line {
     width: 22px;
     height: 1px;
     background: #8c2f1d;
     /* Cambiado a tu color primario para que sea visible */
     margin: 4px 0;
     transition: all .4s cubic-bezier(.16, .84, .44, 1);
 }

 #menuToggle.active .hamburger-line {
     background-color: #FAFAF7;
     /* Blanco para contrastar con el fondo negro */
 }

 /* Animación de la X */
 #menuToggle.active .hamburger-line:nth-child(1) {
     transform: rotate(45deg) translateY(6px);
 }

 #menuToggle.active .hamburger-line:nth-child(2) {
     transform: rotate(-45deg) translateY(-6px);
 }

 /* MOBILE MENU */
 /* 1. Asegurar visibilidad de las líneas de la hamburguesa */
 .hamburger-line {
     width: 22px;
     height: 1px;
     background: #8c2f1d;
     /* Cambiado a tu color primario para que sea visible */
     margin: 4px 0;
     transition: all .4s cubic-bezier(.16, .84, .44, 1);
 }

 /* 2. Corregir el menú móvil */
 .mobile-menu {
     position: fixed;
     inset: 0;
     width: 100%;
     height: 100vh;
     background-color: #111111;
     /* Fondo oscuro sólido */
     display: flex;
     justify-content: center;
     align-items: center;
     transform: translateY(-100%);
     transition: transform .6s cubic-bezier(.16, .84, .44, 1);
     z-index: 105;
     visibility: hidden;
     pointer-events: none;
 }

 .mobile-menu.active {
     transform: translateY(0);
     visibility: visible;
     pointer-events: auto;
 }

 /* 3. Estilo de los links en el menú móvil para que sean visibles sobre el fondo oscuro */
 .mobile-menu nav a {
     color: #FAFAF7;
     /* Tu color background-light */
     font-family: 'Playfair Display', serif;
     font-size: 2rem;
     text-decoration: none;
     opacity: 0;
     transform: translateY(20px);
     transition: all .6s ease;
 }

 .mobile-menu.active nav a {
     opacity: 1;
     transform: translateY(0);
 }

 .mobile-menu.active nav a:nth-child(1) {
     transition-delay: .2s;
 }

 .mobile-menu.active nav a:nth-child(2) {
     transition-delay: .35s;
 }

 .mobile-menu.active nav a:nth-child(3) {
     transition-delay: .5s;
 }

 .mobile-menu.active nav a:nth-child(4) {
     transition-delay: .65s;
 }

 .mobile-menu.active nav a:nth-child(5) {
     transition-delay: .8s;
 }

 /* Alineación de iconos de Material */
 .material-symbols-outlined {
     font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
     vertical-align: middle;
 }

 /* Forzar que las líneas de la hamburguesa usen el color primario si no tienen clase de fondo */
 .hamburger-line {
     background-color: #8c2f1d;
     /* Tu color primario */
 }

 /* Ajuste para que el texto del logo no se encime en tablets */
 @media (max-width: 1024px) {
     .hidden.lg\:block {
         display: none;
     }
 }

 @keyframes headerFade {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .lugares-section {
     display: grid;
     grid-template-columns: 60% 40%;
     height: 80vh;
 }

 #map {
     width: 100%;
     height: 100%;
 }

 .aside {
     background: #FAFAF7;
     transform: translateX(100%);
     transition: transform 0.4s ease;
 }

 .aside.active {
     transform: translateX(0);
 }