:root {
  --color-primario: #5F0F40;
  /* violeta profundo elegante (rompe con lo típico) */
  --color-claro: #FFF6E9;
  /* crema cálido suave */
  --color-oscuro: #3A3A3A;
  /* gris neutro (sin negro duro) */
  --color-verde: #FF7F51;
  /* coral vibrante (muy turístico) */
  --color-oliva: #F4D35E;
  /* dorado suave */

  --gradiente-principal: linear-gradient(135deg, #5F0F40, #9A031E, #FF7F51);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

body {
  background: var(--color-claro);
  overflow-x: hidden;
}



.logo a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

/* NAV */
header {
  position: fixed;
  top: 20px;
  left: 50%;

  transform: translateX(-50%);
  transition: transform 0.5s ease, opacity 0.5s ease;

  width: 90%;
  max-width: 1200px;

  padding: 15px 30px;
  border-radius: 20px;

  background: rgba(10, 37, 64, 0.6);
  backdrop-filter: blur(12px);

  z-index: 900;
}

.btn-top {
  z-index: 1100;
}

header.scrolled {
  background: rgba(10, 37, 64, 0.9);
  padding: 10px 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

header:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

/* NAV CONTENEDOR */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* LOGO */
nav h1 {
  color: #fff;
  font-size: 32px;
  font-weight: 600;
}

nav h1 span {
  color: var(--color-verde);
}

/* LISTA */
nav ul {
  display: flex;
  list-style: none;
  gap: 25px;
}

/* LINKS */
nav ul li a {
  position: relative;
  color: white;
  text-decoration: none;
  padding: 5px 0;
  font-size: 15px;
  transition: 0.3s;
}

/* ✨ SUBRAYADO ANIMADO */
nav ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;

  background: var(--color-verde);
  transition: 0.4s ease;
}

/* HOVER */
nav ul li a:hover {
  color: var(--color-verde);
}

nav ul li a:hover::after {
  width: 100%;
}


/* NAV HIDDEN (se va a la derecha) */
header {
  transition: transform 0.7s ease, opacity 0.7s ease;
}

/* se esconde suave */
header.hide {
  transform: translateX(120%) scale(0.9);
  opacity: 0;
}

/* =========================
   🍔 BOTÓN HAMBURGUESA PRO
========================= */

.menu-toggle {
  display: none;
  /* 🔥 SIEMPRE oculto en PC */

  font-size: 24px;
  color: white;
  cursor: pointer;

  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);

  width: 40px;
  height: 40px;

  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);

  border: 1px solid rgba(255, 255, 255, 0.2);

  transition: all 0.3s ease;
}

.menu-toggle:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* =========================
   📱 NAV MOBILE
========================= */

@media (max-width: 768px) {

  .menu-toggle {
    display: flex;
  }

  nav {
    position: relative;
    justify-content: center;
  }

  /* 🔥 MENÚ DESPLEGABLE (SEPARADO DEL NAV) */
  nav ul {
    position: fixed;
    /* 🔥 clave */
    top: 55px;
    /* separado del header */
    left: 50%;
    transform: translateX(-50%) translateY(-200%);

    width: 90%;
    max-width: 400px;

    background: rgba(10, 37, 64, 0.95);
    backdrop-filter: blur(12px);

    flex-direction: column;
    align-items: center;

    padding: 25px 0;
    gap: 15px;

    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);

    opacity: 0;

    transition: all 0.4s ease;
    z-index: 1000;
  }

  /* 🔥 CUANDO SE ABRE */
  nav ul.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }

}

/* BOTÓN FLOTANTE */
.btn-top {
  position: fixed;
  top: 30px;
  right: 20px;

  width: 55px;
  height: 55px;
  border-radius: 50%;

  background: var(--gradiente-principal);
  /* 🔥 usa tu paleta */
  backdrop-filter: blur(10px);

  color: white;
  font-size: 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  opacity: 0;
  transform: translateX(30px) scale(0.8);

  transition: all 0.5s ease;
  z-index: 999;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* aparece suave */
.btn-top.active {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* hover */
.btn-top:hover {
  transform: scale(1.12);
  filter: brightness(1.1);
}

/* visible */
.btn-top.active {
  opacity: 1;
  transform: scale(1);
}



/* CARRUSEL */

.carousel {
  height: calc(100vh - 0px);
  position: relative;
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 🔥 clave para celular */
  animation: zoom 5s ease-in-out infinite alternate;
}

@keyframes zoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.05);
  }
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.4),
      rgba(50, 64, 1, 0.6));

  pointer-events: none;
  /* 🔥 ESTO ARREGLA EL CLICK */
}

.content {
  position: absolute;
  bottom: 10%;
  right: 5%;
  left: auto;
  text-align: right;
  max-width: 400px;
  color: #fff;

  z-index: 10;
  /* 🔥 IMPORTANTE */
}

.content h2 {
  color: #ffffff;
  margin-bottom: 4px;

  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.9),
    1px -1px 0 rgba(0, 0, 0, 0.9),
    -1px 1px 0 rgba(0, 0, 0, 0.9),
    1px 1px 0 rgba(0, 0, 0, 0.9),

    0px 0px 10px rgba(0, 0, 0, 0.9),
    0px 0px 20px rgba(0, 0, 0, 0.7);
}

.content p {
  color: #ffffff;
  opacity: 0.95;

  background: rgba(0, 0, 0, 0.616);

  text-shadow:
    0 2px 8px rgb(0, 0, 0);

  padding: 6px 12px;
  border-radius: 12px;

  display: inline-block;

  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* TEXTO ANIMADO */
.texto-slide {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;

}

.slide.active .texto-slide {
  opacity: 1;
  transform: translateY(0);
}

/* MEJORA TEXTO */
.content h2 {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 1px;
}

.content p {
  font-size: 16px;
  opacity: 0.9;
}

/* DELAY ANIMACIÓN */
.slide.active .texto-slide h2 {
  transition-delay: 0.2s;
}

.slide.active .texto-slide p {
  transition-delay: 0.4s;
}

.btn-slide {
  margin-top: 15px;
  padding: 10px 20px;
  border: none;
  border-radius: 30px;
  background: var(--color-verde);
  color: white;
  cursor: pointer;
  transition: 0.3s;
}

.btn-slide:hover {
  background: #00c2ad;
  transform: scale(1.05);
}

/* VIÑETA */
.carousel::after {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(circle,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.6) 100%);

  pointer-events: none;
}


/* BOTONES */
.prev,
.next {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  font-size: 20px;
  background: rgba(65, 132, 191, 0.6);
  color: white;
  border-radius: 20px;
  border: none;
  padding: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.prev:hover,
.next:hover {
  background: var(--color-verde);
  /* 🎨 */
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

/* DOTS */
.dots {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}

.dot {
  height: 12px;
  width: 12px;
  background: #bbb;
  display: inline-block;
  margin: 5px;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}

.dot.active {
  background: var(--color-verde);
  /* 🎨 */
}


/* ========================= */
/* 🔥 SECCIÓN FIAMBALÁ */
/* ========================= */

.info-fiambala {
  background: var(--color-claro);
  padding: 80px 20px;
}

.info-container {
  max-width: 1100px;
  margin: auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

/* TEXTO */
.info-texto h2 {
  font-size: 3rem;
  margin-bottom: 20px;
  color: var(--color-primario);
}

.info-texto p {
  color: var(--color-oscuro);
  line-height: 1.6;
  margin-bottom: 15px;
}

.descripcion {
  font-size: 1.1rem;
}

/* DATOS */
.info-datos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* CAJAS */
.dato {
  background: #fff;
  border-radius: 15px;
  padding: 20px;

  display: flex;
  align-items: center;
  gap: 10px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

  transition: all 0.3s ease;
}

/* ICONO */
.dato span {
  font-size: 22px;
}

/* TEXTO */
.dato p {
  margin: 0;
  font-weight: 600;
  color: var(--color-oscuro);
}

/* HOVER */
.dato:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .info-container {
    grid-template-columns: 1fr;
  }

  .info-texto h2 {
    text-align: center;
  }
}


/* 🔥 SECCIÓN CON FONDO ANIMADO */
.accesos {
  position: relative;
  padding: 120px;
  overflow: hidden;
  margin-top: -15px;

  /* 🔥 NUEVO FONDO PRO */
  background: linear-gradient(135deg,
      #5F0F40,
      #9A031E,
      #FF7F51);
}


.overlay-bg {
  position: absolute;
  inset: 0;

  background: radial-gradient(circle at 20% 30%,
      rgba(255, 255, 255, 0.12),
      transparent 40%),
    radial-gradient(circle at 80% 70%,
      rgba(255, 255, 255, 0.08),
      transparent 40%);

  z-index: 0;

  /* 🔥 movimiento ultra suave */
  animation: fondoFlotante 18s ease-in-out infinite alternate;
}

/* ANIMACIÓN SUAVE (ajustada) */
@keyframes fondoFlotante {
  0% {
    transform: translate(0px, 0px);
  }

  50% {
    transform: translate(-10px, -5px);
  }

  100% {
    transform: translate(10px, 5px);
  }
}

/* GRID 3x2 */
.accesos-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: auto;
}

/* 🔲 TARJETAS RECTANGULARES */
.acceso {
  display: flex;
  align-items: center;
  gap: 20px;

  padding: 30px;
  border-radius: 15px;

  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.2);

  color: white;

  transform: translateY(60px);
  opacity: 0;

  transition: all 0.5s ease;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.acceso.active {
  transform: translateY(0);
  opacity: 1;
}

/* 🔥 EFECTO HOVER MÁS PRO */
.accesos:hover .overlay-bg {
  filter: blur(2px) brightness(0.8);
}


/* BORDE ANIMADO */
.acceso {
  position: relative;
  overflow: hidden;
}

/* línea animada */
.acceso::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  padding: 4px;

  background: linear-gradient(120deg,
      transparent,
      var(--color-verde),
      transparent);

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity: 0;
  transform: scale(0.8);
}

/* animación */
.acceso:hover::before {
  opacity: 1;
  transform: scale(1);
  animation: snakeBorder 3s linear infinite;
}

/* keyframes serpiente */
@keyframes snakeBorder {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 300% 50%;
  }
}

.acceso::before {
  background-size: 300% 300%;
}


/* ICONO */
.icono {
  min-width: 70px;
  height: 70px;
  border-radius: 50%;

  background: var(--gradiente-principal);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 28px;
}

/* TEXTO */
.texto h3 {
  font-size: 20px;
  margin-bottom: 5px;
}

.texto p {
  font-size: 14px;
  opacity: 0.85;
}

/* HOVER PRO */
.acceso:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.15);
}

/* 📱 RESPONSIVE */
@media (max-width: 900px) {
  .accesos-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .accesos-container {
    grid-template-columns: 1fr;
  }

  .acceso {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 768px) {

  header {
    top: 10px;
    width: 95%;
    padding: 12px 20px;
  }

  nav {
    flex-direction: column;
    align-items: center;
  }

  nav h1 {
    font-size: 22px;
    margin-bottom: 10px;
  }

  nav ul {
    flex-direction: column;
    width: 100%;
    gap: 8px;
    text-align: center;
  }

}

@media (max-width: 768px) {

  .carousel {
    height: 70vh;
  }

  .content {
    left: 5%;
    right: 5%;
    text-align: left;
  }

  .content h2 {
    font-size: 24px;
  }

  .content p {
    font-size: 14px;
  }

}

@media (max-width: 900px) {

  .accesos {
    padding: 60px 20px;
  }

  .accesos-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

}

@media (max-width: 600px) {

  .accesos {
    padding: 40px 15px;
  }

  .accesos-container {
    grid-template-columns: 1fr;
  }

  .acceso {
    flex-direction: column;
    text-align: center;
    padding: 18px;
  }

}

@media (max-width: 600px) {
  .btn-top {
    width: 45px;
    height: 45px;
    font-size: 18px;
    top: 15px;
    right: 15px;
  }
}

/* =========================================
   ALOJAMIENTOS PREMIUM
========================================= */

#alojamientos {

  background:
    var(--gradiente-principal);

  padding:
    25px 57px;

  position: relative;

  overflow: hidden;
}

/* =========================================
   TITULO
========================================= */

#alojamientos h2 {

  text-align: center;

  color: white;

  margin-bottom: 15px;

  font-size:
    clamp(2.2rem, 4vw, 4rem);

  font-weight: 800;

  line-height: 1.1;
}

#alojamientos h2::after {

  content: "";

  display: block;

  width: 110px;
  height: 5px;

  margin: 18px auto 0;

  border-radius: 50px;

  background:
    rgba(255, 255, 255, .8);
}

/* =========================================
   WRAPPER
========================================= */

#alojamientos .slider-wrapper {

  position: relative;

  width: 100%;
}

/* =========================================
   SLIDER
========================================= */

#alojamientos .slider {

  overflow-x: auto;

  overflow-y: visible;

  scroll-behavior: smooth;

  scroll-snap-type: x mandatory;

  -webkit-overflow-scrolling: touch;

  padding:
    10px 10px 0px;

  scrollbar-width: none;

  -ms-overflow-style: none;
}

#alojamientos .slider::-webkit-scrollbar {

  display: none;
}

/* =========================================
   TRACK
========================================= */

#alojamientos .slider-track {

  display: flex;

  gap: 15px;
}

/* =========================================
   CARD PREMIUM NUEVA
========================================= */

#alojamientos .aloja-card {

  position: relative;

  min-width: 275px;
  max-width: 280px;

  height: 450px;

  flex-shrink: 0;

  border-radius: 26px;

  overflow: hidden;

  background: #000;

  scroll-snap-align: center;

  box-shadow:
    0 15px 40px rgba(0, 0, 0, .18);

  transition:
    transform .45s ease,
    box-shadow .45s ease;
}

#alojamientos .aloja-card:hover {

  transform:
    translateY(-12px);

  box-shadow:
    0 30px 60px rgba(0, 0, 0, .28);
}

/* =========================================
   IMAGEN
========================================= */

#alojamientos .aloja-img-wrap {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;
}

#alojamientos .aloja-img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  transition:
    transform 1.2s ease;
}

#alojamientos .aloja-card:hover .aloja-img {

  transform:
    scale(1.08);
}

/* =========================================
   OVERLAY
========================================= */

#alojamientos .aloja-card::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  background:
    linear-gradient(to top,
      rgba(0, 0, 0, .95),
      rgba(0, 0, 0, .45),
      rgba(0, 0, 0, .08));
}

/* =========================================
   BADGE
========================================= */

#alojamientos .aloja-badge {

  position: absolute;

  top: 18px;
  left: 18px;

  z-index: 5;

  padding: 7px 14px;

  border-radius: 50px;

  background:
    rgba(255, 255, 255, .15);

  backdrop-filter: blur(10px);

  color: white;

  font-size: 12px;
}

/* =========================================
   FAVORITO
========================================= */

#alojamientos .aloja-fav {

  position: absolute;

  top: 18px;
  right: 18px;

  z-index: 5;

  width: 42px;
  height: 42px;

  border: none;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, .15);

  backdrop-filter: blur(10px);

  color: white;

  cursor: pointer;

  transition: .35s ease;
}

#alojamientos .aloja-fav:hover {

  transform:
    scale(1.1);
}

/* =========================================
   BODY
========================================= */

#alojamientos .aloja-body {

  position: absolute;

  bottom: 0;
  left: 0;

  width: 100%;

  z-index: 5;

  padding: 24px;

  color: white;
}

/* =========================================
   TITULO
========================================= */

#alojamientos .aloja-title {

  font-size: 1.4rem;

  margin-bottom: 10px;

  line-height: 1.1;
}

/* =========================================
   UBICACION
========================================= */

#alojamientos .aloja-location {

  font-size: 13px;

  color:
    rgba(255, 255, 255, .82);

  margin-bottom: 14px;
}

#alojamientos .aloja-location i {

  color:
    var(--color-oliva);
}

/* =========================================
   RATING
========================================= */

#alojamientos .aloja-rating {

  display: inline-flex;

  align-items: center;
  gap: 6px;

  padding: 7px 14px;

  border-radius: 50px;

  background:
    rgba(255, 255, 255, .12);

  backdrop-filter: blur(10px);

  margin-bottom: 16px;
}

#alojamientos .aloja-rating i {

  color: #ffc107;
}

#alojamientos .aloja-rating span {

  color:
    rgba(255, 255, 255, .75);

  font-size: 12px;
}

/* =========================================
   FEATURES
========================================= */

#alojamientos .aloja-features {

  display: flex;

  gap: 10px;

  margin-bottom: 18px;
}

#alojamientos .aloja-features span {

  width: 38px;
  height: 38px;

  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    rgba(255, 255, 255, .12);

  backdrop-filter: blur(10px);
}

/* =========================================
   PRECIO
========================================= */

#alojamientos .aloja-price {

  font-size: 1.8rem;

  font-weight: 700;

  margin-bottom: 18px;
}

#alojamientos .aloja-price span {

  font-size: 14px;

  font-weight: 400;

  color:
    rgba(255, 255, 255, .7);
}

/* =========================================
   BOTON
========================================= */

#alojamientos .aloja-btn {

  display: inline-flex;

  align-items: center;
  gap: 10px;

  padding: 14px 22px;

  border-radius: 50px;

  background:
    var(--color-verde);

  color: white;

  text-decoration: none;

  font-weight: 600;

  transition: .35s ease;
}

#alojamientos .aloja-btn:hover {

  background:
    var(--color-primario);

  transform:
    translateY(-3px);
}

#alojamientos .aloja-btn i {

  transition: .35s ease;
}

#alojamientos .aloja-btn:hover i {

  transform:
    translateX(5px);
}

/* =========================================
   BOTONES SLIDER
========================================= */

#alojamientos .slider-btn {

  position: absolute;

  top: 40%;

  transform:
    translateY(-50%);

  width: 40px;
  height: 40px;

  border: none;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, .12);

  backdrop-filter: blur(12px);

  border:
    1px solid rgba(255, 255, 255, .12);

  color: white;

  font-size: 24px;

  cursor: pointer;

  z-index: 20;

  display: flex;

  align-items: center;
  justify-content: center;

  transition:
    all .35s ease;
}

#alojamientos .slider-btn.prev {

  left: -50px;
}

#alojamientos .slider-btn.next {

  right: -50px;
}

#alojamientos .slider-btn:hover {

  background:
    var(--color-verde);

  transform:
    translateY(-50%) scale(1.12);
}

/* =========================================
   VER MAS
========================================= */

#alojamientos .ver-mas-container {

  margin-top: 30px;

  text-align: center;
}

#alojamientos .btn-ver-mas {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding:
    16px 30px;

  border-radius: 50px;

  background:
    rgba(255, 255, 255, .15);

  backdrop-filter: blur(10px);

  border:
    1px solid rgba(255, 255, 255, .12);

  color: white;

  text-decoration: none;

  font-weight: 700;

  transition:
    all .4s ease;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, .15);
}

#alojamientos .btn-ver-mas:hover {

  transform:
    translateY(-4px) scale(1.03);

  background: white;

  color:
    var(--color-primario);

  box-shadow:
    0 20px 40px rgba(0, 0, 0, .22);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 768px) {

  #alojamientos {

    padding:
      80px 20px;
  }

  #alojamientos h2 {

    font-size: 2rem;
  }

  #alojamientos .aloja-card {

    min-width: 85%;

    height: 420px;
  }

  #alojamientos .slider-btn {

    width: 45px;
    height: 45px;

    font-size: 20px;

  }

  #alojamientos .slider-btn.prev {

    left: -25px;
  }

  #alojamientos .slider-btn.next {

    right: -25px;
  }
}

/* =========================================
   EXCURSIONES PREMIUM
========================================= */

#excursiones {
  position: relative;

  background:
    linear-gradient(to bottom,
      #fff,
      var(--color-claro));

  padding: 30px 2%;

  overflow: hidden;
}

/* =========================================
   TITULO
========================================= */

#excursiones h2 {

  font-size: clamp(2.2rem, 4vw, 4rem);

  color: var(--color-primario);

  margin-bottom: 40px;

  text-align: center;

  line-height: 1.1;
}

#excursiones h2::after {

  content: "";

  display: block;

  width: 110px;
  height: 5px;

  margin: 18px auto 0;

  border-radius: 50px;

  background: var(--gradiente-principal);
}

/* =========================================
   GRID
========================================= */

#excursiones .grid {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 22px;

  max-width: 1450px;

  margin: auto;
}

/* =========================================
   CARD
========================================= */

#excursiones .card {

  position: relative;

  height: 430px;

  border-radius: 24px;

  overflow: hidden;

  background: #000;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12);

  cursor: pointer;

  opacity: 0;

  transform:
    translateY(35px) scale(.97);

  transition:
    opacity .9s ease,
    transform .9s ease,
    box-shadow .4s ease;
}

/* CARD VISIBLE */

#excursiones .card.show-card {

  opacity: 1;

  transform:
    translateY(0) scale(1);
}

/* HOVER */

#excursiones .card:hover {

  transform:
    translateY(-10px) scale(1.01);

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.22);
}

/* =========================================
   SLIDER
========================================= */

.slider-exc.clean {

  position: absolute;

  inset: 0;

  overflow: hidden;
}

.slider-exc.clean img {

  position: absolute;

  width: 100%;
  height: 100%;

  object-fit: cover;

  opacity: 0;

  transform: scale(1.08);

  transition:
    opacity 1.2s ease,
    transform 5s ease;
}

.slider-exc.clean img.active {

  opacity: 1;

  transform: scale(1);
}

/* HOVER IMG */

#excursiones .card:hover .slider-exc.clean img.active {

  transform: scale(1.08);
}

/* =========================================
   OVERLAY
========================================= */

#excursiones .card::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(to top,
      rgba(0, 0, 0, 0.92),
      rgba(0, 0, 0, 0.35),
      rgba(0, 0, 0, 0.08));

  z-index: 2;
}

/* =========================================
   BODY
========================================= */

#excursiones .card-body {

  position: absolute;

  bottom: 0;
  left: 0;

  width: 100%;

  padding: 22px;

  z-index: 5;

  color: white;
}

/* =========================================
   TAG
========================================= */

#excursiones .card-body::before {

  content: "Fiambalá";

  display: inline-block;

  padding: 6px 14px;

  margin-bottom: 12px;

  border-radius: 50px;

  background:
    rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(10px);

  font-size: 11px;

  letter-spacing: 1px;
}

/* =========================================
   TITULO CARD
========================================= */

#excursiones .card h3 {

  font-size: 1.5rem;

  color: white;

  margin-bottom: 8px;

  transition: 0.4s ease;

  line-height: 1.1;
}

#excursiones .card:hover h3 {

  color: var(--color-oliva);
}

/* =========================================
   DESCRIPCION
========================================= */

#excursiones .card p {

  font-size: 13px;

  color:
    rgba(255, 255, 255, 0.82);

  line-height: 1.6;

  margin-bottom: 50px;
}

/* =========================================
   BOTON
========================================= */

#excursiones .btn-card {

  display: inline-flex;

  align-items: center;
  gap: 8px;

  padding: 12px 20px;

  border: none;

  border-radius: 50px;

  background:
    var(--color-verde);

  color: white;

  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  transition: 0.4s ease;
}

#excursiones .btn-card::after {

  content: "→";

  transition: 0.4s ease;
}

#excursiones .btn-card:hover {

  background:
    var(--color-primario);

  transform:
    translateY(-3px);
}

#excursiones .btn-card:hover::after {

  transform:
    translateX(5px);
}

/* =========================================
   VER MAS
========================================= */

.ver-mas-container {

  margin-top: 30px;

  text-align: center;
}

.btn-ver-mas {

  display: inline-flex;

  align-items: center;
  gap: 12px;

  padding: 16px 30px;

  border-radius: 50px;

  background:
    var(--gradiente-principal);

  color: white;

  text-decoration: none;

  font-weight: 700;

  transition: 0.4s ease;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.15);
}

.btn-ver-mas:hover {

  transform:
    translateY(-4px) scale(1.03);

  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.22);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 768px) {

  #excursiones {

    padding: 70px 18px;
  }

  #excursiones .grid {

    grid-template-columns: 1fr;

    gap: 22px;
  }

  #excursiones .card {

    height: 340px;

    border-radius: 22px;
  }

  #excursiones .card-body {

    padding: 18px;

  }

  #excursiones .card h3 {

    font-size: 1.8rem;

    line-height: 1.1;

    margin-bottom: 10px;
  }

  #excursiones .card p {

    font-size: .92rem;

    line-height: 1.4;

    margin-bottom: 55px;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;
  }

  #excursiones .btn-card {

    width: fit-content;

    padding: 12px 22px;

    font-size: .92rem;
  }

}

/* =========================
   SANDBOARD PRO
========================= */

#sandboard {
  background: var(--color-oliva);
  padding: 60px 20px;
}

/* TITULO */
#sandboard h2 {
  text-align: left;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: var(--color-primario);
}

/* GRID */
#sandboard .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}

/* CARD */
#sandboard .card {
  border-radius: 18px;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  transition: 0.4s ease;
}

/* IMG CONTENEDOR */
#sandboard .card-img {
  position: relative;
  overflow: hidden;
}

/* IMG */
#sandboard .card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;

  transition: transform 0.6s ease;
}

/* TAG */
#sandboard .tag {
  position: absolute;
  top: 10px;
  left: 10px;

  background: var(--gradiente-principal);
  color: white;

  padding: 5px 10px;
  border-radius: 10px;
  font-size: 12px;
}

/* BODY */
#sandboard .card-body {
  padding: 15px;
}

/* TITULO CARD */
#sandboard .card h3 {
  font-size: 18px;
  color: var(--color-oscuro);
  margin-bottom: 5px;
}

/* TEXTO */
#sandboard .card p {
  font-size: 14px;
  color: #555;
}

/* INFO */
#sandboard .card-info {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

#sandboard .precio {
  font-weight: bold;
  color: var(--color-verde);
}

#sandboard .duracion {
  font-size: 13px;
  color: #777;
}

/* BOTON */
#sandboard .btn-card {
  width: 100%;
  padding: 10px;

  border: none;
  border-radius: 10px;

  background: var(--gradiente-principal);
  color: white;

  cursor: pointer;
  transition: 0.3s;
}

#sandboard .btn-card:hover {
  transform: scale(1.05);
}

/* HOVER */
#sandboard .card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}

#sandboard .card:hover img {
  transform: scale(1.12);
}

/* SECCION */
.mapa-pro {
  padding: 60px 20px;
  text-align: center;
}

/* CONTENEDOR */
.mapa-container {
  margin-top: 30px;

  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  align-items: center;
}

/* INFO */
.mapa-info {
  text-align: left;
}

.mapa-info h3 {
  margin-bottom: 10px;
}

.mapa-info p {
  color: #555;
  margin-bottom: 15px;
}

/* BOTON */
.btn-mapa {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 20px;

  background: var(--gradiente-principal);
  color: white;
  text-decoration: none;

  transition: 0.3s;
}

.btn-mapa:hover {
  transform: scale(1.05);
}

/* MAPA */
.mapa-frame iframe {
  width: 100%;
  height: 400px;

  border: none;
  border-radius: 15px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .mapa-container {
    grid-template-columns: 1fr;
  }

  .mapa-info {
    text-align: center;
  }

  .mapa-frame iframe {
    height: 300px;
  }
}



/* FOOTER */
/* GALERIA */
.galeria {
  padding: 60px 20px;
  text-align: center;
}

/* WRAPPER (CLAVE 🔥) */
.galeria-wrapper {
  position: relative;
  margin-top: 10px;
  padding: 0 50px;
}

/* SLIDER */
.galeria-slider {
  display: flex;
  flex-direction: column;
  gap: 15px;

  overflow-x: auto;
  scroll-behavior: smooth;

  padding: 20px;
}

/* ocultar scroll */
.galeria-slider::-webkit-scrollbar {
  display: none;
}

.fila {
  display: flex;
  gap: 15px;
}

/* 🔥 TODAS IGUALES */
.galeria-item {
  min-width: 260px;
  aspect-ratio: 3 / 2;

  object-fit: cover;
  border-radius: 15px;
  cursor: pointer;

  transition: 0.4s;
}

.galeria-item:hover {
  transform: scale(1.08);
}

/* =========================
   BOTONES GALERÍA (AISLADOS)
========================= */

.galeria-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 35px;
  height: 40px;

  border: none;
  border-radius: 100%;

  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 26px;

  cursor: pointer;
  z-index: 50;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: 0.3s;
}

.galeria-prev {
  left: 15px;
}

.galeria-next {
  right: 15px;
}

.galeria-btn:hover {
  background: var(--color-primario);
  transform: translateY(-50%) scale(1.1);
}


.galeria-header {
  padding: 20px;
}

.galeria-header h2 {
  text-align: left;
  font-size: 2.5rem;
  color: var(--color-primario);
}






/* =========================
   LIGHTBOX
========================= */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);

  display: none;
  justify-content: center;
  align-items: center;

  z-index: 999;
}

.lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.lightbox-img {
  max-width: 90%;
  max-height: 70vh;
  /* 🔥 evita que tape el botón */
  border-radius: 12px;
}

/* BOTÓN CERRAR */
.btn-cerrar {
  padding: 10px 25px;
  border: none;
  border-radius: 25px;

  background: #fff;
  color: #000;

  font-weight: 600;
  cursor: pointer;

  transition: 0.3s;
}

.btn-cerrar:hover {
  transform: scale(1.1);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {

  .galeria-wrapper {
    padding: 0 10px;
  }

  .galeria-item {
    min-width: 200px;
  }

  .galeria-btn {
    display: flex;
    /* 👈 ahora SI se ven */
    width: 30px;
    height: 35px;
    font-size: 20px;
  }
}

/* FOOTER */
.footer-pro {
  background: #1e2a38;
  color: white;
  padding-top: 40px;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.footer-col h3,
.footer-col h4 {
  margin-bottom: 10px;
}

.footer-col p,
.footer-col li {
  font-size: 14px;
  color: #ccc;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col a {
  color: #ccc;
  text-decoration: none;
}

.footer-col a:hover {
  color: white;
}

.footer-bottom {
  text-align: center;
  padding: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 20px;
}

/* 📱 RESPONSIVE */

@media (max-width: 900px) {

  nav {
    flex-direction: column;
    align-items: flex-start;
  }

  nav ul {
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .content h2 {
    font-size: 30px;
  }

  .content p {
    font-size: 16px;
  }

  section {
    padding: 60px 20px;
  }
}

@media (max-width: 600px) {

  header {
    padding: 10px 20px;
  }

  nav h1 {
    font-size: 18px;
  }

  nav ul li {
    margin-left: 10px;
  }

  .carousel {
    height: 70vh;
  }

  .content {
    bottom: 15%;
    left: 5%;
  }

  .content h2 {
    font-size: 24px;
  }

  .grid {
    grid-template-columns: 1fr;
  }
}


/*PAGINA ALOJAMIENTO*/

/* CONTENEDOR */
.aloja-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 25px;
  padding: 40px;
}

/* HERO */
.aloja-hero {
  background: var(--gradiente-principal);
  padding: 120px 0px 20px 20px;
  text-align: center;
  color: white;
}

/* FILTROS */
.aloja-filtros {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.aloja-filtros input,
.aloja-filtros select {
  padding: 10px;
  border-radius: 10px;
  border: none;
}

/* CARD */
.aloja-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.aloja-card:hover {
  transform: translateY(-10px) scale(1.02);
}

/* IMG */
.aloja-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* BODY */
.aloja-body {
  padding: 15px;
}

/* TITULO */
.aloja-title {
  font-size: 18px;
  margin-bottom: 5px;
}

/* UBICACION */
.aloja-location {
  font-size: 13px;
  color: gray;
}

/* RATING */
.aloja-rating {
  margin: 10px 0;
  color: #00be00;
  font-weight: bold;
}

/* PRECIO */
.aloja-price {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-oliva);
}

/* BOTON */
.aloja-btn {
  margin-top: 10px;
  display: block;
  text-align: center;
  padding: 10px;
  background: var(--color-verde);
  color: white;
  border-radius: 10px;
  text-decoration: none;
  transition: 0.3s;
}

.aloja-btn:hover {
  background: #00c2ad;
}


/* ESTILOS ICONOS */

i {
  font-size: 18px;
}

.icono i {
  font-size: 28px;
}

.btn-top i {
  font-size: 20px;
}