/* =========================
   Variables y base
   ========================= */


@font-face {
  font-family: "FS Siena";
  src: url("../fonts/FS_Siena_Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



:root {
  --ayb-green: #074F4D;
  --ayb-orange: #FE4500;
  --ayb-orange-active: #FF6D36;
  --ayb-bg: #FAF3EA;
  --ayb-white: #FFFFFF;
  --ayb-text: #222222;
  --ayb-soft: #F4E6D7;
  --radius-card: 18px;
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.16);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ayb-text);
  background-color: var(--ayb-orange);
  /*background-image: url("../img/vector.svg");*/
  background-repeat: repeat;
  background-size: 420px auto;
  /*
    background: linear-gradient(180deg, #DDE1CE 0%, #FAF6EE 100%);
    background-color: var(--ayb-bg);
    background-attachment: fixed;
  */
}

/*lo para texto accesible que NO se ve en pantalla */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Accesibilidad */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  padding: 0.5rem 1rem;
  background: var(--ayb-green);
  color: var(--ayb-white);
  z-index: 1000;
}

.skip-link:focus {
  left: 0.75rem;
  top: 0.75rem;
  border-radius: 999px;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: none;
}

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.2rem;
}

/* =========================
   HERO + HEADER
   ========================= */
.site-header {
  position: relative;
}


/* Hero: contenedor general */
.hero {
  position: relative;
  min-height: 820px;
  overflow: hidden;
  color: var(--ayb-white);

  /* Curva convexa con clip-path */
  clip-path: ellipse(100% 100% at 50% 0%);

  /* Variantes de curvatura (prueba cambiando los porcentajes): */
  /* clip-path: ellipse(120% 100% at 50% 0%); */
  /* Curva más suave */
  /* clip-path: ellipse(80% 100% at 50% 0%); */
  /* Curva más pronunciada */
  /* clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%); */
  /* Curva personalizada */
  height: 88vh !important;
  /* Ocupa 88% del alto de la pantalla */
  min-height: 900px !important;
  /* Mínimo 900px */
  max-height: 1200px !important;
  /* Máximo para pantallas muy grandes */
}

/* Capa de imagen de fondo del héroe */
.hero-media {
  position: absolute;
  inset: 0;
  /* top:0; right:0; bottom:0; left:0; */
  background-image:
    /*linear-gradient(to bottom, rgba(99, 107, 107, 0.55), rgba(35, 37, 37, 0.92)),*/
    url("../img/A&B_Solarium-9388.jpeg");
  /* o .jpg si preferís */
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
  z-index: -1;
  /* queda detrás del contenido */
}

/* Aseguramos que el contenido vaya por encima de la imagen */
.hero-inner {
  position: relative;
  z-index: 1;
  min-height: 750px !important;
  padding-top: 220px !important;
  /* Más espacio desde arriba */
}


/* más padding arriba porque el header ahora es fijo */
.hero-inner {
  padding: 9rem 1.2rem 4.5rem;
  background-position: center 35% !important;
  /* Ajusta qué parte de la imagen se ve */
}



/* Header flotante + fijo en scroll */
.header-card {
  position: fixed;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;

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

  /* INICIO: transparente / glass */
  background: transparent;
  /* casi transparente */
  border-radius: 999px;
  padding: 0.55rem 0.9rem 0.55rem 0.7rem;
  /*box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);*/
  /*backdrop-filter: blur(10px);*/

  width: calc(100% - 2rem);
  max-width: 1200px;
}

/* AL SCROLL: se tiñe de verde */
.site-header.header-solid .header-card {
  background: var(--ayb-green);
  backdrop-filter: none;
  /* opcional: sacás el efecto glass */
}


.logo-img {
  height: 28px;
}

/* Nav / hamburguesa */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}


/* imágenes del botón */
.icon-menu {
  width: 22px;
  height: 22px;
  display: block;
}

.icon-menu-close {
  display: none;
}

/* cuando el botón está expandido, mostramos el ícono de cerrar */
.nav-toggle[aria-expanded="true"] .icon-menu-open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-menu-close {
  display: block;
}


.nav {
  position: absolute;
  inset-inline: 1.2rem;
  top: 4.7rem;
  background: rgba(7, 79, 77, 0.98);
  border-radius: 18px;
  padding: 0.8rem 1rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  transform-origin: top center;
  transform: scaleY(0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}

/* Menú móvil ABIERTO (cuando el botón agrega la clase .nav-open) */
.nav.nav-open {
  opacity: 1;
  transform: scaleY(1);
  pointer-events: auto;
}

.nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav li+li {
  margin-top: 0.5rem;
}

/* atributos de toda la nav*/
.nav a {
  display: block;
  padding: 0.4rem 0.1rem;
  font-size: 0.95rem;
  color: var(--ayb-bg);
}

/* NAVEGACION MOBILE ENFASIS */
/* Nav / hamburguesa */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}


/* imágenes del botón */
.icon-menu {
  width: 22px;
  height: 22px;
  display: block;
}

.icon-menu-close {
  display: none;
}

/* cuando el botón está expandido, mostramos el ícono de cerrar */
.nav-toggle[aria-expanded="true"] .icon-menu-open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-menu-close {
  display: block;
}


.nav {
  position: absolute;
  inset-inline: 1.2rem;
  top: 4.7rem;
  background: rgba(7, 79, 77, 0.98);
  border-radius: 18px;
  padding: 0.8rem 1rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  transform-origin: top center;
  transform: scaleY(0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}

/* Menú móvil ABIERTO (cuando el botón agrega la clase .nav-open) */
.nav.nav-open {
  opacity: 1;
  transform: scaleY(1);
  pointer-events: auto;
}

.nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav li+li {
  margin-top: 0.5rem;
}

/* atributos de toda la nav*/
.nav a {
  display: block;
  padding: 0.4rem 0.1rem;
  font-size: 0.95rem;
  color: var(--ayb-bg);
}

/* ============================================
   MOBILE — transición suave + active + tap
   ============================================ */

/* Suavidad en hover/tap/active */
.nav a {
  transition: color 0.25s ease, background-color 0.25s ease, font-weight 0.25s ease;
}

/* Cuando el usuario toca el enlace (tap) */
.nav a:active {
  background: rgba(255, 109, 54, 0.20);
  /* suave naranja */
  color: var(--ayb-orange-active);
  font-weight: 700;
  border-radius: 8px;
}

/* Cuando el enlace está marcado como activo en el HTML */
.nav a.active {
  color: var(--ayb-orange-active);
  font-weight: 700;
  text-decoration: none;
}


/* Hero text */
.hero-text {
  max-width: 24rem;
}

.hero-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 0.45rem;
}

.hero h1 {
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 0 0 0.6rem;
}

.hero-subtitle {
  font-size: 0.95rem;
  margin: 0 0 1.1rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Curva inferior */
.hero-curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 70px;
  background: var(--ayb-green);
  border-top-left-radius: 50% 70px;
  border-top-right-radius: 50% 70px;
  box-shadow: 0 -12px 25px rgba(0, 0, 0, 0.26);
  z-index: -1;
}

/* =========================
   BOTONES
   ========================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  text-decoration: none;
}

.btn-primary {
  background: var(--ayb-orange);
  color: var(--ayb-white);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

.btn-primary:hover,
.btn-primary:active {
  background: var(--ayb-orange-active);
  text-decoration: none;
  transform: translateY(1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.btn-ghost {
  background: rgba(250, 243, 234, 0.08);
  color: var(--ayb-white);
  border: 1px solid rgba(250, 243, 234, 0.55);
}

.btn-ghost:hover {
  background: rgba(250, 243, 234, 0.18);
  text-decoration: none;
}

/*
.btn-full {
  width: 100%;
}
*/

/* =========================
   BOOKING
   ========================= */
.booking {
  margin-top: 50px;
  margin-bottom: 2.5rem;
}

.booking-card {
  background: rgba(250, 243, 234, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  padding: 1.6rem 1rem 1.25rem;

  /* Efecto base */
  box-shadow:
    0 0 5px rgba(255, 255, 255, 0.4),
    0 0 10px rgba(255, 255, 255, 0.3);

  /* Animación de pulsación */
  animation: neon-pulse 3s infinite ease-in-out;
}

/* Animación para variar intensidad */
@keyframes neon-pulse {

  0%,
  100% {
    box-shadow:
      0 0 5px rgba(255, 255, 255, 0.4),
      0 0 10px rgba(255, 255, 255, 0.3),
      0 0 15px rgba(255, 255, 255, 0.2);
  }

  50% {
    box-shadow:
      0 0 8px rgba(255, 255, 255, 0.6),
      0 0 15px rgba(255, 255, 255, 0.4),
      0 0 20px rgba(255, 255, 255, 0.3);
  }
}

.booking-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.booking-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8rem;
}

.booking-field label {
  font-weight: 600;
  color: var(--ayb-green);
}

.booking-field input {
  border-radius: 999px;
  border: 1px solid #DCCBBB;
  padding: 0.45rem 0.7rem;
  font-size: 0.85rem;
  font-family: inherit;
}

.booking-field-inline {
  max-width: 5.4rem;
}

.booking-actions {
  grid-column: 1 / -1;
  margin-top: 0.6rem;
  display: flex;
  justify-content: center;
}

/* Solo el botón del motor: que no sea full width */
.booking-actions .btn-primary {
  width: auto;
  padding-inline: 2.6rem;
  /* ajustá a gusto el largo */
}

/* por si tiene la clase btn-full, la anulamos en este contexto */
.booking-actions .btn-full {
  width: auto;
}

.booking-note {
  margin-top: 0.45rem;
  font-size: 0.68rem;
  color: #8b7b70;
}

/* =========================
   SECCIONES GENERALES
   ========================= */
.section {
  padding: 2.2rem 0;
}

.section-intro {
  padding-top: 0;
}

.section-header {
  text-align: center;
  margin-bottom: 1.2rem;
}

.section-header h2 {
  text-align: center;
  font-size: 1.3rem;
  margin-top: 20px;
  margin-bottom: 0.2rem;
  color: var(--ayb-green);
}

.section-header p {
  margin: 0;
  font-size: 0.9rem;
  color: #645748;
}

/* =========================
   CAROUSEL TIPO OSX - CORREGIDO
   ========================= */

/* Título de la sección en verde, bold y alineado a la izquierda */
.section-header h2 {
  color: #04847b;
  font-family: "DM Sans", sans-serif;
  font-size: 3rem;
  /* 48px */
  font-weight: 800;
  text-align: center;
  margin-bottom: 2rem;
  margin-top: 11.375rem;
  /* 182px ÷ 16 = 11.375rem */
  padding-left: 2rem;
}

/* TABLET */
@media (max-width: 1024px) {
  .section-header h2 {
    margin-top: 8rem;
    /* 128px - proporcional */
    font-size: 2.5rem;
    padding-left: 1.5rem;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .section-header h2 {
    margin-top: 1rem;
    /* 96px - proporcional */
    font-size: 2rem;
    padding-left: 1rem;
  }
}

@media (max-width: 480px) {
  .section-header h2 {
    margin-top: 2rem;
    /* Reducido de 4rem a 3rem (48px) */
    /* Mantén el resto igual */
    font-size: 1.75rem;
    padding-left: 1rem;
  }
}

/* Ajuste específico para pantallas altas y estrechas */
@media (max-width: 480px) and (min-height: 800px) {
  .section-header h2 {
    margin-top: 0.5rem;
    /* 40px - más compacto */
  }
}

/* FIN Título de la sección en verde, bold y alineado a la izquierda */

/* Fondo de la sección */
.section-rooms {
  background: #f5f1eb;
  padding: 4rem 0;
}

/* Contenedor principal */
.osx-carousel-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
  overflow: hidden;
}

/* Wrapper para el carousel */
.osx-carousel-wrapper {
  overflow: hidden;
  padding: 4rem 0;
}

/* Contenedor del carousel */
.osx-carousel {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  gap: 1.5rem;
  align-items: center;
  min-height: 400px;
}

/* Tarjetas cuadradas con curva de 26px */
.room-card {
  flex: 0 0 220px;
  /* Ancho base para tarjetas laterales */
  width: 220px;
  height: 220px;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: scale(0.85);
  opacity: 0.7;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Tarjeta activa (centro) - más grande */
.room-card.active {
  flex: 0 0 280px;
  width: 280px;
  height: 280px;
  transform: scale(1);
  opacity: 1;
  z-index: 10;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* Tarjetas adyacentes (las dos que están al lado del centro) */
.room-card.adjacent {
  flex: 0 0 240px;
  width: 240px;
  height: 240px;
  transform: scale(0.95);
  opacity: 0.9;
}

/* Tarjetas que no son visibles */
.room-card:not(.active):not(.adjacent) {
  opacity: 0.3;
  transform: scale(0.7);
}

/* Imágenes dentro de las tarjetas - CORREGIDO */
.room-media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 26px;
  /* La curva debe estar aquí */
}

.room-media img {
  object-position: center top;
  /* Enfoca la parte superior */
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Esto asegura que la imagen cubra bien */
  border-radius: 26px;
  /* Y también aquí para heredar */
}

.room-card.active .room-media img {
  transform: scale(2.05);
}

/* Título de la habitación - SIN FONDO VERDE, en la parte inferior izquierda */
.room-title {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  color: white;
  font-family: "DM Sans", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  z-index: 2;
  margin: 0;
  padding: 0;
  background: none;
  /* Asegurar que no hay fondo */
}

/* Botones de navegación */
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(4, 132, 123, 0.95);
  color: white;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 5px 20px rgba(4, 132, 123, 0.4);
}

.carousel-nav:hover {
  background: #04847b;
  transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
  left: 20px;
}

.carousel-next {
  right: 20px;
}

/* Botón ver todas */
.rooms-footer {
  text-align: center;
  margin-top: 4rem;
}

.btn-view-rooms {
  display: inline-block;
  padding: 1rem 3rem;
  background: #04847b;
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  border: 2px solid #04847b;
  text-transform: uppercase;
}

.btn-view-rooms:hover {
  background: white;
  color: #04847b;
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(4, 132, 123, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .room-card {
    flex: 0 0 180px;
    width: 180px;
    height: 180px;
  }

  .room-card.active {
    flex: 0 0 220px;
    width: 220px;
    height: 220px;
  }

  .room-card.adjacent {
    flex: 0 0 200px;
    width: 200px;
    height: 200px;
  }

  .carousel-nav {
    width: 50px;
    height: 50px;
    font-size: 1.8rem;
  }

  .carousel-prev {
    left: 10px;
  }

  .carousel-next {
    right: 10px;
  }

  .room-title {
    font-size: 1.1rem;
    bottom: 1rem;
    left: 1rem;
  }
}

@media (max-width: 480px) {
  .room-card {
    flex: 0 0 140px;
    width: 140px;
    height: 140px;
  }

  .room-card.active {
    flex: 0 0 170px;
    width: 170px;
    height: 170px;
  }

  .room-card.adjacent {
    flex: 0 0 150px;
    width: 150px;
    height: 150px;
  }

  .room-title {
    font-size: 0.9rem;
    bottom: 0.8rem;
    left: 0.8rem;
  }
}

/* =========================
   SERVICIOS
   ========================= */
.section-services {
  background: var(--ayb-bg);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}



/* Tarjeta casi transparente, mismo tamaño/comportamiento */
.service-item {
  background: rgba(255, 255, 255, 0.18);
  /* transparencia casi total */
  border-radius: 18px;
  padding: 1.2rem 0.9rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
  text-align: center;
}

/* Icono 50% más grande y centrado */
.service-icon {
  width: 51px;
  /* antes 34px aprox → 50% más */
  height: 51px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.45rem;
  background: transparent;
  /* sin fondo, solo el svg verde */
}

.service-icon img {
  .service-icon img {
    color: #074F4D;
    width: 80%;
    height: 80%;
    display: block;
    object-fit: contain;
  }

}

/* Títulos en negro */
.service-item h3 {
  margin: 0;
  font-size: 0.6rem;
  color: var(--ayb-text);
  /* negro / gris oscuro del sitio */
  font-weight: 400;
}

/* Por si quedó algún <p> viejo en el HTML, lo neutralizamos */
.service-item p {
  display: none;
}


/* =========================
   ¿POR QUÉ ELEGIRNOS?
   ========================= */

/* Sección completa */
.section-why-choose {
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
  background: #f5f1eb;
  /* Fondo marrón claro por si la imagen no carga */
}

/* Contenedor principal */
.why-choose-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  padding: 0 2rem;
}

/* Fondo con imagen */
.why-choose-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
}

.why-choose-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  filter: brightness(0.9);
  /* Oscurecer un poco para mejor contraste */
}

/* Tarjeta con curva de 26px */
.why-choose-card {
  position: relative;
  z-index: 10;
  background: #f8f4ee;
  /* Fondo crema */
  border-radius: 26px;
  /* Curva de 26px */
  padding: 2.5rem 3rem;
  max-width: 800px;
  border: 2px solid #04847b;
  /* Borde verde */
  box-shadow:
    0 0 15px rgba(4, 132, 123, 0.3),
    /* Efecto neon suave */
    0 20px 40px rgba(0, 0, 0, 0.15);
  /* Sombra para profundidad */
  backdrop-filter: blur(10px);
  /* Efecto vidrio opcional */
}

/* Título de la sección */
.why-choose-header {
  margin-bottom: 2.5rem;
  text-align: left;
}

.why-choose-title {
  color: #04847b;
  font-family: "DM Sans", sans-serif;
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

/* Grid de beneficios (2 columnas en desktop) */
.benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

/* Columna de beneficios */
.benefits-column {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

/* Ítem individual de beneficio */
.benefit-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform 0.3s ease;
}

.benefit-item:hover {
  transform: translateX(5px);
}

/* Iconos de FontAwesome */
.benefit-icon {
  color: #04847b;
  /* Verde */
  font-size: 1.4rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

/* Texto del beneficio */
.benefit-text {
  color: #333;
  font-family: "DM Sans", sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Responsive */
@media (max-width: 992px) {
  .why-choose-container {
    min-height: 500px;
    padding: 0 1.5rem;
  }

  .why-choose-card {
    max-width: 500px;
    padding: 2rem 2.5rem;
  }

  .why-choose-title {
    font-size: 2.4rem;
  }
}

@media (max-width: 768px) {
  .section-why-choose {
    padding: 3rem 0;
  }

  .why-choose-container {
    min-height: auto;
    padding: 0 1rem;
  }

  .why-choose-card {
    max-width: 100%;
    padding: 1.8rem 2rem;
    margin: 0 1rem;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
    /* 1 columna en móvil */
    gap: 1.5rem;
  }

  .benefits-column {
    gap: 1rem;
  }

  .benefit-text {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .why-choose-card {
    padding: 1.5rem 1.5rem;
    border-radius: 20px;
  }

  .why-choose-title {
    font-size: 2rem;
  }

  .benefit-icon {
    font-size: 1.2rem;
  }
}

/* =========================
   SITIOS
   ========================= */
.section-sitios {
  padding-bottom: 2.8rem;
}

.sitios-layout {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.sitios-text h2 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  color: var(--ayb-green);
}

.sitios-text p {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
}


.sitios-media {
  aspect-ratio: 3 / 5;
  margin: 0 auto;
  max-width: 100%;
  /* ancho de la “pastilla” */
  border-radius: 50% 50% 12% 12% / 28% 28% 6% 6%;
  /* forma de cápsula */
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 3px solid #fff;
  box-shadow:
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px rgba(255, 255, 255, 0.5);
}

/* Imagen adentro de la cápsula */
.sitios-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  /* importante: sin radios extra */
}

/* BOTÓN RECOMENDACIONES */
.btn-cultural {
  background: var(--ayb-green);
  color: var(--ayb-white);
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  margin-left: 30px;
  justify-content: center;
  text-decoration: none;
}

.btn-cultural:hover {
  background: var(--ayb-orange-active);
  text-decoration: none;
}


/* =========================
   TESTIMONIOS
   ========================= */
.section-testimonials {
  background: transparent;
  padding: 4.5rem 1.2rem;
}

.testimonials-wrapper {
  position: relative;
  min-height: 140px;
}

.testimonial {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

.testimonial p {
  margin: 0;
}

.testimonial p:first-child {
  font-style: italic;
  font-size: 1.3rem;
  margin-bottom: 0.35rem;
}

.testimonial-author {
  font-size: 1rem;
  font-weight: 600;
  color: #000000;

  display: flex;
  justify-content: flex-end;
  /* → alinea todo a la derecha */
  align-items: center;
  /* alinea verticalmente */
  gap: 0.35rem;
  /* espacio entre texto y icono */

  margin-right: 50px;
  /* ← Ajuste fino */
}

/* Icono pequeño del autor */
.testimonial-author-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.85;

  margin-right: 50px;
  /* ← Ajuste fino */

}

/* ====== TESTIMONIOS — NUEVO LAYOUT ====== */

/* Estructura general */
.testimonials-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Tarjetas de puntuación */
.testimonials-ratings {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.rating-card {
  max-width: 160px;
  /* Ajustalo si querés más grande */
  height: auto;
  display: block;
}

/* Testimonios (ya existentes) */
.testimonials-main {
  flex: 1;
}

.testimonials-wrapper {
  position: relative;
  min-height: 140px;
}

/* Desktop */
@media (min-width: 992px) {

  .testimonials-layout {
    display: flex;
    flex-direction: row;
    /* ← FILA: izquierda ratings, derecha testimonios */
    align-items: flex-start;
    gap: 3rem;
  }

  .testimonials-ratings {
    flex-direction: row;
    /* Una tarjeta arriba de la otra */
    align-items: flex-start;
  }

  .rating-card {
    max-width: 160px;
    height: auto;
  }
}

/* Título y textos blancos */
.section-testimonials h2,
.section-testimonials p,
.section-testimonials .testimonial-text,
.section-testimonials .testimonial-author,
.section-testimonials .testimonial-role {
  color: #000000 !important;
  /* blanco-cremita de tu paleta */
}

/* Si hay cards con fondo, mantenelas claras */
.section-testimonials .testimonial-card {
  background: rgba(255, 255, 255, 0.10);
  /* leve transparencia si te gusta */
  border-radius: 18px;
  padding: 1.6rem;
  backdrop-filter: blur(6px);
}

/* Ajuste opcional: sombras suaves */
.section-testimonials .testimonial-card {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}



/*----------------------------------INCIOO CONECTA CON NOSOTROS---------*/
/* =========================
   CONECTÁ CON NOSOTROS - IMÁGENES HORIZONTALES 30% MÁS GRANDES
   ========================= */

/* Sección completa */
.section-connect {
  background-color: rgba(7, 79, 77, 0.95);
  color: white;
  padding: 3rem 0 5rem 0;
  position: relative;
  overflow: hidden;
}

/* ENCABEZADO - Título y redes sociales */
.connect-header-container {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 1.5rem;
  margin-bottom: 3rem;
}

.connect-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.connect-title {
  font-family: "DM Sans", sans-serif;
  font-size: 2.8rem;
  font-weight: 800;
  margin: 0;
  color: white;
  line-height: 1.1;
}

/* Redes sociales en el encabezado */
.connect-social-header {
  display: flex;
  gap: 1.2rem;
}

.social-icon-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 1.6rem;
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.2);
  text-decoration: none;
}

.social-icon-header:hover {
  background: white;
  color: #074F4D;
  transform: translateY(-3px);
  border-color: white;
}

/* CONTENIDO PRINCIPAL - Layout con imágenes horizontales a los lados */
.connect-main-content {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  gap: 2rem;
  min-height: 600px;
}

/* GRUPOS DE IMÁGENES HORIZONTALES */
.side-images {
  display: flex;
  flex-direction: row;
  /* IMÁGENES EN HORIZONTAL */
  gap: 1.5rem;
  flex: 0 0 auto;
}

/* IMÁGENES HORIZONTALES (30% más grandes) */
.horizontal-image {
  width: 400px;
  /* Base */
  height: 550px;
  /* 30% más que 250px = 325px */
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  transition: all 0.4s ease;
  cursor: pointer;
  flex-shrink: 0;
}

.horizontal-image:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.horizontal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay para las imágenes */
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(4, 132, 123, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.horizontal-image:hover .image-overlay {
  opacity: 1;
}

.image-overlay i {
  color: white;
  font-size: 3rem;
}

/* TELÉFONO MOCKUP EN EL CENTRO */
.phone-mockup-center {
  flex: 0 0 auto;
  text-align: center;
  margin: 0 1rem;
}

.phone-mockup {
  width: 320px;
  height: 620px;
  background: #1a1a1a;
  border-radius: 40px;
  position: relative;
  border: 12px solid #2a2a2a;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0 20px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  margin: 0 auto 1.5rem auto;
}

/* Notch superior del teléfono */
.phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 22px;
  background: #2a2a2a;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  z-index: 10;
}

/* Pantalla del teléfono */
.phone-screen {
  width: 100%;
  height: 100%;
  padding: 60px 15px 50px 15px;
  overflow: hidden;
  background: #f8f8f8;
}

/* PERFIL DE INSTAGRAM DENTRO DEL TELÉFONO */
.instagram-profile {
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.insta-profile-header {
  padding: 1.5rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.insta-profile-pic {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #04847b;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, #04847b, #074F4D);
}

.profile-avatar {
  width: 70px;
  height: 70px;
  background: url('assets/img/instagram-profile.jpg') center/cover no-repeat;
  border-radius: 50%;
}

.insta-profile-info {
  flex: 1;
}

.insta-username {
  font-family: "DM Sans", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 0.5rem 0;
}

.insta-stats {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
  color: #666;
}

.insta-stats span {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.insta-stats strong {
  font-size: 1.1rem;
  color: #333;
}

/* Mini grid de publicaciones */
.insta-mini-grid {
  padding: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mini-post {
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, #04847b, #074F4D);
  border-radius: 5px;
  opacity: 0.7;
}

/* Barra inferior del teléfono */
.phone-bar {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: #444;
  border-radius: 10px;
  margin-bottom: 12px;
}

/* Texto debajo del teléfono */
.mockup-caption {
  text-align: center;
}

.mockup-caption p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.4rem;
  margin: 0;
}

.mockup-caption i {
  color: #E4405F;
  font-size: 1.6rem;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
  .connect-main-content {
    max-width: 1100px;
    gap: 1.5rem;
  }

  .horizontal-image {
    width: 220px;
    height: 286px;
    /* 30% más que 220px */
  }

  .phone-mockup {
    width: 300px;
    height: 580px;
  }
}

@media (max-width: 992px) {
  .connect-header-content {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  .connect-title {
    font-size: 2.5rem;
  }

  .connect-main-content {
    flex-direction: column;
    gap: 3rem;
    min-height: auto;
  }

  .side-images {
    order: 2;
    justify-content: center;
    width: 100%;
    max-width: 600px;
  }

  .phone-mockup-center {
    order: 1;
    margin-bottom: 2rem;
  }

  .horizontal-image {
    width: 200px;
    height: 260px;
    /* 30% más que 200px */
  }

  .phone-mockup {
    width: 280px;
    height: 540px;
  }
}

@media (max-width: 768px) {
  .section-connect {
    padding: 2rem 0 4rem 0;
  }

  .connect-title {
    font-size: 2.2rem;
  }

  .horizontal-image {
    width: 180px;
    height: 234px;
    /* 30% más que 180px */
  }

  .phone-mockup {
    width: 260px;
    height: 500px;
    border-radius: 35px;
    border-width: 10px;
  }

  .phone-screen {
    padding: 50px 12px 40px 12px;
  }

  .insta-profile-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    padding: 1.2rem;
  }

  .insta-stats {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .connect-main-content {
    padding: 0 1rem;
  }

  .side-images {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .horizontal-image {
    width: 160px;
    height: 208px;
    /* 30% más que 160px */
  }

  .phone-mockup {
    width: 240px;
    height: 460px;
    border-radius: 30px;
    border-width: 8px;
  }

  .insta-profile-pic {
    width: 60px;
    height: 60px;
  }

  .profile-avatar {
    width: 50px;
    height: 50px;
  }

  .insta-username {
    font-size: 1.1rem;
  }

  .insta-stats {
    gap: 1rem;
    font-size: 0.8rem;
  }

  .insta-stats strong {
    font-size: 1rem;
  }

  .insta-mini-grid {
    padding: 1rem;
    gap: 5px;
  }

  .social-icon-header {
    width: 45px;
    height: 45px;
    font-size: 1.4rem;
  }
}

@media (max-width: 400px) {
  .side-images {
    flex-direction: column;
    align-items: center;
  }

  .horizontal-image {
    width: 200px;
    height: 260px;
  }

  .phone-mockup {
    width: 220px;
    height: 420px;
  }
}

/*----------------------------------fin seccione conectá con nosotros BORRAR?---------------------------*/

/* ====================================
   CONECTÁ CON NOSOTROS - RESPONSIVE FIX
   ==================================== */

/* FIX: Asegurar que el fondo verde cubra toda la sección */
.section-connect {
  background-color: rgba(7, 79, 77, 0.95) !important;
  overflow: visible !important;
  /* Para evitar cortes */
}

/* TABLET (max-width: 992px) - IMÁGENES EN COLUMNA */
@media (max-width: 992px) {
  .connect-main-content {
    flex-direction: column !important;
    gap: 2rem !important;
  }

  .side-images {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 1.5rem !important;
  }

  /* Las dos imágenes por grupo se apilan verticalmente */
  .horizontal-left,
  .horizontal-right {
    flex-direction: column !important;
  }

  .horizontal-image {
    width: 80% !important;
    max-width: 400px !important;
    height: 300px !important;
    margin: 0 auto !important;
  }
}

/* MOBILE (max-width: 768px) */
@media (max-width: 768px) {
  .connect-main-content {
    padding: 0 1rem !important;
  }

  .horizontal-image {
    width: 90% !important;
    height: 280px !important;
  }

  /* FIX: Desactivar hover en móvil (overlay siempre visible si quieres) */
  .image-overlay {
    opacity: 0 !important;
    /* O cambiar a 1 si quieres que siempre se vea */
  }

  .horizontal-image:hover {
    transform: none !important;
  }
}

/* MOBILE PEQUEÑO (max-width: 576px) */
@media (max-width: 576px) {
  .horizontal-image {
    width: 95% !important;
    height: 250px !important;
    border-radius: 15px !important;
  }
}

/* FIN FIX CONECTÁ CON NOSOTROS */
/* =========================
   MAPA
   ========================= */
.section-map {
  padding-bottom: 2.8rem;
}

.map-wrapper {
  margin-top: 0.4rem;
}

.map-embed {
  height: 400px;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: #ddd;
  aspect-ratio: 4 / 3;
}

.map-embed iframe {
  width: 100%;
  height: 100%;
}

/* =========================
   CONTACTO
   ========================= */
.section-contact {
  background: transparent;
}

.contact-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-form {
  background: var(--ayb-white);
  border-radius: 22px;
  padding: 1rem 1rem 1.2rem;
  box-shadow: var(--shadow-soft);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.7rem;
}

.form-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ayb-green);
}

.form-field input,
.form-field textarea {
  border-radius: 14px;
  border: 1px solid #D6C4B4;
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
}

.contact-info {
  font-size: 0.9rem;
}

.contact-info h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  color: transparent;
}

.contact-info p {
  margin: 0 0 0.35rem;
}

.contact-tagline {
  margin-top: 0.7rem;
  font-weight: 600;
  color: #8b5b3b;
}

.contact-cat {
  width: 74px;
  margin-bottom: 0.4rem;
}

/* Línea de contacto: icono + texto en la misma fila */
.contact-line {
  display: flex;
  align-items: center;
  /* centra verticalmente icono y texto */
  gap: 0.5rem;
  /* espacio entre icono y texto */
  margin: 0 0 0.35rem;
}

/* Iconos de teléfono y mail */
.contact-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  /* evita que se achique si el texto es largo */
}



/* ========================= NO SE USA
   CTA flotante / WhatsApp

.floating-cta {
  position: fixed;
  right: 0.85rem;
  bottom: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 40;
}

.floating-cta .btn-primary {
  padding-inline: 1.1rem;
  font-size: 0.86rem;
}

.whatsapp-btn {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #25D366;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}

.whatsapp-btn img {
  width: 26px;
}
   ========================= */
/* =========================
   FOOTER
   ========================= */
.site-footer {
  background: var(--ayb-green);
  color: var(--ayb-white);
  margin-top: 3rem;
  padding-top: 2.3rem;
}

.footer-top {
  text-align: center;
}

.footer-logo {
  width: 82px;
  margin: 0 auto 1.5rem;
}

.footer-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  text-align: left;
  font-size: 0.86rem;
}

.footer-column h3 {
  font-size: 0.92rem;
  margin: 0 0 0.35rem;
}

.footer-column p {
  margin: 0 0 0.35rem;
}

.footer-column ul {
  list-style: none;
  margin: 0 0 0.35rem;
  padding: 0;
}

.footer-column li+li {
  margin-top: 0.15rem;
}

.footer-links li {
  margin-bottom: 0.18rem;
}

.footer-links a {
  text-decoration: none;
}

/* Línea de contacto con icono (tel / mail) */
.footer-contact {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.35rem;
}

.footer-contact a {
  text-decoration: none;
}

/* Iconos pequeños de contacto */
.footer-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.9;
}

/* =========================
   FOOTER - ESTRUCTURA CORREGIDA: LOGO IZQ, HOTELES CENTRO, NEWSLETTER DERECHA
   ========================= */

/* Contenedor principal del footer */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  text-align: left;
  gap: 2rem;
}

/* Logo vertical a la IZQUIERDA */
.footer-logo-vertical {
  width: auto;
  height: 180px;
  flex-shrink: 0;
  order: 1;
  /* Primera posición - izquierda */
}

/* Contenedor de columnas (para hoteles y newsletter) */
.footer-columns {
  display: flex;
  justify-content: space-between;
  flex: 1;
  gap: 3rem;
  order: 2;
  /* Segunda posición - centro */
}

/* Columna de hoteles (centro) */
.footer-column.hoteles-column {
  flex: 1;
  max-width: 300px;
  margin: 0 auto;
  /* Centra la columna de hoteles */
}

/* Columna de newsletter (derecha) */
.newsletter-column {
  flex: 1;
  max-width: 300px;
  order: 3;
  /* Tercera posición - derecha */
}

/* Contenedor del newsletter con imagen de gato */
.newsletter-content {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.footer-cat {
  width: 80px;
  flex-shrink: 0;
}

.newsletter-text p {
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
  line-height: 1.3;
}

/* Formulario newsletter */
.newsletter-form {
  display: flex;
  gap: 0.5rem;
}

.newsletter-form input {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ayb-white);
  font-size: 0.85rem;
  font-family: inherit;
}

/* ESTILO ESPECÍFICO PARA EL PLACEHOLDER */
.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
}

.newsletter-form input:focus::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.newsletter-form input:focus {
  outline: none;
  border-color: var(--ayb-orange-active);
  background: rgba(255, 255, 255, 0.15);
}

.btn-newsletter {
  background: var(--ayb-orange-active);
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  white-space: nowrap;
}

.btn-newsletter:hover {
  background: #e55a2b;
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 992px) {
  .footer-top {
    flex-direction: column;
    gap: 2rem;
    align-items: center;
  }

  .footer-logo-vertical {
    order: 1;
    margin: 0 auto;
    height: 140px;
  }

  .footer-columns {
    order: 2;
    flex-direction: column;
    gap: 2.5rem;
    width: 100%;
  }

  .newsletter-column,
  .footer-column.hoteles-column {
    max-width: 100%;
    order: initial;
    /* Resetear orden en móviles */
  }

  .newsletter-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .newsletter-form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 576px) {
  .newsletter-form {
    flex-direction: column;
  }

  .btn-newsletter {
    width: 100%;
  }

  .footer-logo-vertical {
    height: 120px;
  }
}


/* Fuerza distribución exacta 33% cada columna */
.footer-top {
  display: flex;
  justify-content: space-around;
  /* Distribuye espacio alrededor */
  align-items: flex-start;
}

.footer-logo-vertical {
  flex: 0 0 20%;
  /* Ocupa 20% del ancho */
}

.footer-columns {
  flex: 0 0 60%;
  /* Ocupa 60% del ancho (30% cada columna interna) */
  display: flex;
  justify-content: space-between;
}

.footer-column.hoteles-column,
.newsletter-column {
  flex: 0 0 48%;
  /* Cada una ocupa casi la mitad del 60% */
}

/* Baja el bloque del newsletter */
.newsletter-column {
  flex: 1;
  max-width: 300px;
  order: 3;
  margin-top: 1.5rem !important;
  /* Agrega espacio arriba */
}

/* Si solo quieres bajar el contenido interno (gato + formulario) */
.newsletter-content {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1rem !important;
  /* Baja solo el contenido */
}

/* Para ajustar más finamente en desktop */
@media (min-width: 993px) {
  .newsletter-column {
    margin-top: 2rem !important;
    /* Más espacio solo en desktop */
  }
}

/* Quitar el margen en móvil para no afectar el diseño apilado */
@media (max-width: 992px) {
  .newsletter-column {
    margin-top: 0 !important;
  }

  .newsletter-content {
    margin-top: 0 !important;
  }
}


/* SVG dentro de los botoncitos circulares de redes (usas el estilo .footer-social a que ya tenés) */
.footer-social-icon {
  width: 18px;
  height: 18px;
  opacity: 0.9;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.footer-social-icon:hover {
  opacity: 1;
  transform: scale(1.08);
}


/* FOOTER — hover naranja */
.footer-links a,
.footer-social a,
.footer-legal-links a {
  transition: color 0.25s ease, font-weight 0.25s ease;
}

.footer-links a:hover,
.footer-social a:hover,
.footer-legal-links a:hover {
  color: var(--ayb-orange-active);
  /* #FF6D36 */
  text-decoration: none;
  font-weight: 700;
}


.footer-social {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.6rem;
}

.footer-social a {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(250, 243, 234, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  text-decoration: none;
}

.footer-cat {
  width: 62px;
  margin: 1.4rem auto 0;
}



.footer-legal-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.footer-legal-links a {
  text-decoration: none;
}

.footer-legal-links a:hover {
  text-decoration: none;
}


/* TOPE CORROUSEL MOBIle */
/* MOBILE – limitar el tamaño del cuadrado de habitaciones */
@media (max-width: 639px) {
  .room-media {
    max-width: 320px;
    /* ancho máximo del cuadrado */
    margin: 0 auto;
    /* lo centra */
  }
}


/* =========================
   MEDIA QUERIES
   ========================= */
@media (min-width: 640px) {
  .hero-inner {
    padding-top: 300px;
    /* Ajusta este valor según necesites */
    min-height: 700px;
  }

  .booking {
    margin-top: -3.3rem;
  }

  .booking-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .booking-field-inline {
    max-width: unset;
  }

  .booking-actions {
    grid-column: auto / span 4;
    align-self: end;
  }

  .rooms-carousel {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .room-card {
    flex: 0 0 auto;
    max-width: none;
  }

  .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sitios-layout {
    flex-direction: row;
    align-items: center;
  }

  .sitios-text,
  .sitios-media {
    flex: 1;
  }

  .contact-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .contact-form,
  .contact-info {
    flex: 1;
  }

  .footer-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-top {
    text-align: left;
  }
}

/* MOBILE — menú hamburguesa */
.nav-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.6rem 1.3rem;
  background: var(--ayb-orange);
  color: var(--ayb-white);
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  margin-top: 0.7rem;
  /* deja aire entre los ítems */
}

/* Idiomas dentro del menú */
.nav-lang {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Links de idioma */
.nav-lang .lang {
  font-size: 0.78rem;
  color: var(--ayb-bg);
  /* crema sobre verde */
  text-decoration: none;
  font-weight: 600;
  opacity: 0.85;
  transition: color 0.25s ease, font-weight 0.25s ease, opacity 0.25s ease;
}

/* Separador · entre idiomas */
.nav-lang .lang-sep {
  opacity: 0.6;
  user-select: none;
}

/* Hover idiomas (mobile y desktop) */
.nav-lang .lang:hover {
  color: var(--ayb-orange-active);
  /* #FF6D36 */
  font-weight: 700;
  opacity: 1;
}

/* Idioma activo */
.nav-lang .lang.active {
  color: var(--ayb-orange);
  /* #FE4500 */
  font-weight: 700;
  opacity: 1;
}

/********************************************
 *  DESKTOP (≥900px) — BLOQUE ÚNICO
 *  Header + Nav + Hero + Habitaciones + CTA
 ********************************************/
@media (min-width: 1024px) {

  /************************************
   * HEADER (Píldora flotante desktop)
   ************************************/

  /* Header ancho, más alto y centrado */
  .header-card {
    width: min(1200px, 100% - 2.5rem);
    max-width: none;
    padding-inline: 2rem;
    /* más aire lateral */
    padding-block: 1.4rem;
    /* ← MÁS ALTURA */
    border-radius: 999px;
  }

  /* Logo más grande en desktop */
  .logo-img {
    height: 38px;
  }

  .header-card .nav a.nav-cta {
    line-height: 1;
    /* ← clave para que no "baje" */
  }

  /* Alinear verticalmente el botón con los otros enlaces */
  .header-card .nav li,
  .header-card .nav a {
    display: flex;
    align-items: center;
    line-height: 1;
    /* ← el valor CLAVE */
  }

  /* No mostrar hamburguesa en desktop */
  .nav-toggle {
    display: none;
  }

  /****************************************
   * NAV completa dentro del header (desktop)
   ****************************************/

  .nav {
    position: static;
    background: transparent;
    box-shadow: none;
    padding: 0.2rem;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .nav ul {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  /* en vez de li:last-child, aplicamos a TODOS los li */
  .nav li {
    display: flex;
    align-items: center;
  }

  .nav li+li {
    margin-top: 0;
  }

  .nav a {
    font-size: 0.95rem;
    padding: 0;
    color: #FAF3EA;
    /* crema */
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    /*empuja el texto para arriba o abajo*/
    transition: color 0.25s ease, font-weight 0.25s ease;
  }

  .nav a:hover {
    text-decoration: none;
    color: var(--ayb-orange-active);
    /* #FF6D36 */
    font-weight: 600;
  }

  /* DESKTOP — dentro del header */
  .nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.8rem 2rem;
    /* ← MÁS ALTO + MÁS ANCHO */
    font-size: 0.96rem;
    /* ← TEXTO APENAS MÁS GRANDE */

    background: var(--ayb-orange);
    color: var(--ayb-white);

    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
    width: auto;
    line-height: 1;
  }

  .nav-lang {
    gap: 0.35rem;
  }

  .nav-lang .lang {
    font-size: 0.7rem;
  }


  /*****************************
   * HERO (alineación desktop)
   *****************************/

  .hero-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Esto empuja TODO hacia abajo */
    min-height: 1000px !important;
    /* Asegura altura suficiente */
    padding-bottom: 150px;
    /* Espacio inferior */
  }

  .booking-in-hero {
    margin-top: auto !important;
    /* Empuja el motor al final */
  }

  /**********************************************
   * HABITACIONES — 3 columnas en escritorio
   **********************************************/

  .room-card {
    flex: 0 0 auto;
    max-width: 48%;
  }


  /**********************************************
   * CTA flotante (WhatsApp + Reservar)
   **********************************************/

  .floating-cta {
    right: 1.4rem;
    bottom: 1.4rem;
  }

}

/* FIN BLOQUE DESKTOP */


/* OVERRIDE FINAL – Botón "Reservar" en ESCRITORIO */
@media (min-width: 1024px) {
  .header-card .nav a.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.9rem 2.4rem;
    /* MÁS ALTO + MÁS ANCHO */
    font-size: 0.9rem;
    line-height: 1;

    background: var(--ayb-orange);
    color: var(--ayb-white);
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
    width: auto;
  }
}

@media (min-width: 1024px) {
  .header-card .nav a.nav-cta {
    /* …todo lo anterior… */
    position: relative;
    top: -6px;
    /* si lo ves todavía bajo, probá -2px */
  }
}

/* =========================
   SITIOS CERCA – layout
   ========================= */

.rh-experiencias {
  padding: 3rem 0 3.5rem;
}

.rh-experiencias .rh-title {
  font-size: 1.8rem;
  margin: 0 0 0.4rem;
  color: var(--ayb-green);
}

.rh-experiencias .rh-subtitle {
  max-width: 48rem;
  margin-top: 0.4rem;
  font-size: 0.95rem;
  color: #645748;
}

/* Grid: 1 col en mobile, 2 en tablet, 3 en desktop */
.rh-experiencias .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .rh-experiencias .row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .rh-experiencias .row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Card contenedor */
.rh-exp-card {
  background: transparent !important;
  border-radius: 26px;




  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Imagen recortada tipo ventana vertical con curva */
.rh-exp-card .card-img-top {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;


  /* mismo estilo que la sección Sitios del index */
  border-top-left-radius: 0;
  border-radius: 26px;

}

/* Cuerpo de la card */
.rh-exp-card .card-body {
  padding: 1rem 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.rh-exp-card .card-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  color: var(--ayb-green);
}

.rh-exp-card .card-title small {
  font-size: 0.8rem;
  font-weight: 500;
  color: #8b7b70;
}

.rh-exp-card .card-text {
  font-size: 0.9rem;
  color: #4c4035;
}

/* Botón Ir */
.btn-ir {
  display: flex;
  /* el propio botón se comporta como flex */
  align-items: center;
  justify-content: center;

  width: 100%;
  /* ocupa todo el ancho disponible */
  max-width: 260px;
  /* podés subirlo a 280 / 300 si lo querés más largo */
  margin: 0.75rem auto 0;
  /* lo centra dentro de la card */

  padding: 0.65rem 1.4rem;
  /* alto y “cuerpo” del botón */
  border-radius: 999px;
  border: none;
  background: var(--ayb-green);
  color: var(--ayb-white);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  transition: background-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.btn-ir:hover {
  background: var(--ayb-orange-active);
  transform: translateY(1px);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
  text-decoration: none;
}

/* Animación de entrada */
.rh-anim {
  opacity: 0;
  transform: translateY(18px);
  animation: rhFadeUp 1.5s ease-out forwards;
}

/* Pequeño “stagger” por orden */
.rh-experiencias .rh-anim:nth-of-type(2) {
  animation-delay: 0.06s;
}

.rh-experiencias .rh-anim:nth-of-type(3) {
  animation-delay: 0.12s;
}

.rh-experiencias .rh-anim:nth-of-type(4) {
  animation-delay: 0.18s;
}

.rh-experiencias .rh-anim:nth-of-type(5) {
  animation-delay: 0.24s;
}

.rh-experiencias .rh-anim:nth-of-type(6) {
  animation-delay: 0.30s;
}

.rh-experiencias .rh-anim:nth-of-type(7) {
  animation-delay: 0.36s;
}

.rh-experiencias .rh-anim:nth-of-type(8) {
  animation-delay: 0.42s;
}

@keyframes rhFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

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


/* =========================
   FIN -- SITIOS CERCA – layout
   ========================= */

/* =========================
   SUITE CON JACUZZI
   ========================= */

/* Layout general intro */
.suite-main {
  padding-top: 1.5rem;
}

.suite-intro-grid {
  display: grid;
  gap: 2.4rem;
  align-items: flex-start;
}

.suite-title {
  font-size: 1.7rem;
  color: var(--ayb-green);
  margin: 0 0 0.75rem;
}

.suite-lead {
  font-weight: 600;
  margin-bottom: 0.65rem;
}

.suite-body {
  margin: 0 0 0.7rem;
}

.suite-note {
  font-size: 0.9rem;
  color: #6b5c4e;
  margin: 0 0 1.4rem;
}

.suite-cta {
  margin-top: 0.4rem;
}

/* Galería */
.suite-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.suite-photo {
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  animation: suiteFadeUp 0.7s ease forwards;
}

/* pequeño delay escalonado */
.suite-photo:nth-child(1) {
  animation-delay: 0.05s;
}

.suite-photo:nth-child(2) {
  animation-delay: 0.12s;
}

.suite-photo:nth-child(3) {
  animation-delay: 0.19s;
}

.suite-photo:nth-child(4) {
  animation-delay: 0.26s;
}

.suite-photo:nth-child(5) {
  animation-delay: 0.33s;
}

.suite-photo:nth-child(6) {
  animation-delay: 0.40s;
}

.suite-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px rgba(255, 255, 255, 0.5);
}



/* Animación elegante */
@keyframes suiteFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

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

/* =========================
   Servicios de la suite
   ========================= */

.suite-services {
  background: rgba(244, 230, 215, 0.35);
}

.suite-services-intro {
  margin-top: 0.15rem;
  font-size: 0.9rem;
  color: #6b5c4e;
}

.suite-services-list {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem 1.4rem;
}

.suite-services-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
}

.suite-service-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(7, 79, 77, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.suite-service-icon img {
  width: 16px;
  height: 16px;
  display: block;
}

/* =========================
   Otras habitaciones
   ========================= */

.suite-other-rooms {
  background: rgba(244, 230, 215, 0.16);
}

.suite-rooms-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
}

.suite-room-card {
  background: var(--ayb-white);
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.suite-room-media img {
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.suite-room-body {
  padding: 0.9rem 1rem 1.1rem;
}

.suite-room-body h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  color: var(--ayb-green);
}

.suite-room-body p {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
}

.suite-room-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ayb-orange);
  text-decoration: none;
}

.suite-room-link::after {
  content: " →";
}

/* =========================
   MEDIA QUERIES
   ========================= */

@media (min-width: 768px) {
  .suite-intro-grid {
    /* ANTES:
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
    */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
    gap: 2.8rem;
  }

  .suite-title {
    font-size: 2rem;
  }

  .suite-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .suite-services-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .suite-rooms-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================
   FIN SUITE CON JACUZZI
   ========================= */

/* carro inicio*/
/* =========================
   Carrusel Suite con Jacuzzi
   ========================= */

/* Contenedor general del carrusel */
.suite-carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Ventana (recorta el track) */
.suite-carousel-viewport {
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

/* Track que se desplaza */
.suite-carousel-track {
  display: flex;
  transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
}

/* Cada slide ocupa el 100% del viewport */
.suite-photo {
  margin: 0;
  flex: 0 0 100%;
  opacity: 0.45;
  transform: scale(0.96);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

/* Slide activo, más visible y levemente más grande */
.suite-photo.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Imagen dentro del slide */
.suite-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px rgba(255, 255, 255, 0.5);

}

/* Flechas */
.suite-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(3px);
  font-size: 1.4rem;
  line-height: 1;
  transition:
    background 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.suite-carousel-arrow--prev {
  left: 0.6rem;
}

.suite-carousel-arrow--next {
  right: 0.6rem;
}

.suite-carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.55);
  transform: translateY(-50%) scale(1.04);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

/* Deshabilitadas visualmente si querés (opcional, según lógica JS) */
.suite-carousel-arrow[disabled] {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

/* Puntos inferiores */
.suite-carousel-dots {
  display: inline-flex;
  gap: 0.45rem;
  justify-content: center;
  align-items: center;
}

.suite-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(7, 79, 77, 0.25);
  cursor: pointer;
  transition:
    background 0.3s ease,
    transform 0.3s ease,
    width 0.3s ease;
}

.suite-dot.is-active {
  width: 18px;
  background: var(--ayb-green);
  transform: translateY(-1px);
}

/* Ajustes responsivos */

@media (min-width: 768px) {
  .suite-carousel {
    gap: 0.5rem;
  }

  .suite-carousel-arrow {
    width: 38px;
    height: 38px;
    font-size: 1.5rem;
  }
}

/*agregado carrousel*/
/* Tira de miniaturas */
.suite-carousel-thumbs {
  display: none;
  /* por defecto (mobile) */
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.35rem;
  flex-wrap: nowrap;

}

.suite-thumb {
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 60px;
  height: 46px;
  opacity: 0.65;
  transform: translateY(0);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease,
    outline 0.25s ease;

}

.suite-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.suite-thumb.is-active {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  outline: 2px solid var(--ayb-green);
  outline-offset: 1px;
}

/* Desktop: mostramos thumbs y ocultamos dots */
@media (min-width: 768px) {
  .suite-carousel-thumbs {
    display: inline-flex;
  }

  .suite-carousel-dots {
    display: none;
  }

  .suite-carousel-viewport {
    /* un poco más alta en desktop para que se vea bien grande */
    min-height: 320px;
  }
}

/*carro fin*/

/* Sombra más elegante cuando está dentro de la hero */
.booking-card {
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.20);
}

/* BOTON VER HABITACIONES */


.rooms-footer {
  text-align: center;
  margin-top: 2rem;
}

.btn-view-rooms {
  display: inline-block;
  padding: 0.75rem 1.6rem;
  background: var(--ayb-green);
  color: #FFFFFF;
  font-weight: 600;
  border-radius: 28px;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.2s ease;
  margin-top: 5rem;
  /* Margen superior adicional */
}

.btn-view-rooms:hover {
  background: var(--ayb-orange-active);
  transform: translateY(-2px);
}

/*FONDO DE COLOR*/

body {
  background: #FAF3EA;
  background-attachment: fixed;
}

/* NUEVO TEXTO HEADER*/
/* Centrar contenido del héroe */
.hero-text {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

/* Animación caída desde arriba */
.hero-text {
  opacity: 0;
  transform: translateY(-40px);
  /* empieza arriba */
  animation: heroDropIn 1s ease-out forwards;
  animation-delay: 0.25s;
}

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

/* Control de distancia respecto del header */
.hero-text {
  margin-top: 3.5rem;
  /* AJUSTÁ ESTE VALOR a tu gusto */
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Agregar al inicio del CSS de la sección Nosotros */
#nosotros {
  margin-top: 0;
}

/* O si prefieres margen en el contenedor grid */
.nosotros-grid {
  margin-top: 4rem;
  /* Alternativa */
}

/* Layout principal - Dos columnas en desktop */
.nosotros-grid {
  display: grid;
  gap: 2.8rem;
  align-items: center;
}

@media (min-width: 768px) {
  .nosotros-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Contenedor de imágenes */
.nosotros-imagenes {
  position: relative;
  height: 100%;
  min-height: 400px;
}

/* Imagen principal - VERSIÓN MÁS GRANDE */
.nosotros-media img {
  width: 400%;
  /* Aumentado de 300% a 400% (o más) */
  height: 600px;
  /* Aumenté la altura para mantener proporción */
  display: block;
  border-radius: 26px;
  object-fit: cover;
  border: 3px solid #04847b;
  box-shadow:
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #04847b;
  position: absolute;
  top: 0;
  left: -100px;
  /* Empuja la imagen hacia la izquierda fuera del margen */
  z-index: 1;
}

/* Imagen superpuesta */
.nosotros-media-2 img {
  width: 50%;
  height: 200px;
  display: block;
  border-radius: 26px;
  object-fit: cover;
  border: 3px solid #04847b;
  box-shadow:
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #04847b;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
}

/* Contenedor de texto */
.nosotros-contenido {
  text-align: right;
  padding-left: 20px;
}

/* Título */
#nosotros .nosotros-contenido h1 {
  font-family: "DM Sans", sans-serif;
  font-weight: 800;
  color: #04847b;
  letter-spacing: 0.2px;
  font-size: 3.4rem;
  line-height: 1.05;
  margin-bottom: 1rem;
}

/* Párrafos */
#nosotros .nosotros-text {
  color: #04847b;
  font-size: 1.3rem;
  font-weight: 100;
  line-height: 1.35;
  margin-bottom: 0.5rem;
}

/* Línea divisoria */
.nosotros-divisor {
  height: 1px;
  background-color: #04847b;
  width: 100%;
  max-width: 400px;
  margin: 1.5rem 0 1.5rem auto;
}

/* Texto destacado */
.nosotros-destacado {
  color: #04847b;
}

.nosotros-destacado-texto {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}

.nosotros-destacado-subtexto {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Ajustes para móvil */
@media (max-width: 767px) {
  .nosotros-grid {
    grid-template-columns: 1fr;
  }

  .nosotros-imagenes {
    min-height: 300px;
    margin-bottom: 2rem;
  }

  .nosotros-media img {
    height: 250px;
  }

  .nosotros-media-2 img {
    height: 180px;
    width: 50%;
  }

  .nosotros-contenido {
    text-align: center;
    padding-left: 0;
  }

  .nosotros-divisor {
    margin: 1.5rem auto;
  }
}

/* Animación de entrada tipo hero (texto + imagen) */
.nosotros-hotel-name,
.nosotros-media {
  opacity: 0;
  transform: translateY(24px);
  animation: nosotrosFadeUp 0.95s ease-out forwards;
}

.nosotros-media {
  animation-delay: 0.18s;
  /* entra un poquito después del texto */
}

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

/* BACK Korona*/
.corona-bg {
  position: fixed;
  /* queda como capa flotante, independiente */
  bottom: -100px;
  /* mueve para que solo se vea la mitad */
  right: -2000px;
  width: 4000px;
  /* tamaño gigante */
  height: 1100px;

  background-image: url("../img/iso_AyB_corona_blanco_1.svg");
  background-repeat: no-repeat;
  background-size: contain;

  opacity: 0.15;
  /* suave para no competir con textos */
  filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.75));
  /* glow neón */

  pointer-events: none;
  /* NO tapa botones ni texto */
  z-index: -1;
  /* debajo de todo */
}

/* HALO radial glow detrás */
.corona-bg::after {
  content: "";
  position: absolute;
  inset: -150px;
  /* halo más grande que el SVG */
  background: radial-gradient(circle,
      rgba(255, 255, 255, 0.40) 0%,
      rgba(255, 255, 255, 0.20) 35%,
      rgba(255, 255, 255, 0.05) 70%,
      rgba(255, 255, 255, 0) 100%);
  filter: blur(70px);
  z-index: -1;
  opacity: 0.9;
}

/* ===== Nuestras habitaciones — título y subtítulo ===== */
.section-rooms .section-header {
  text-align: center;
  /* CENTRA TODO */
  color: #FFFFFF;
  /* TEXTO BLANCO */
}

.section-rooms .section-header h2 {
  color: #FFFFFF;
  /* por si tenía override */
  margin-bottom: 0.5rem;
  font-weight: 300;
  font-size: 2rem;
}

.section-rooms .section-header p {
  color: #FFFFFF;
  opacity: 1.5;
  /* opcional para suavizar */
  margin-top: 0.2rem;
  margin-bottom: 2rem;

}


/* ===== Sitios de interés — alineado con sección Nosotros ===== */

.section-sitios {
  padding: 4rem 1.2rem 4.5rem;
}

.section-sitios .container {
  max-width: 1080px;
  margin: 0 auto;
}

/* Título */
.section-sitios h2 {
  color: #FAF3EA;
  /* cremita */
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 2.6rem;
  line-height: 1.15;
  margin-left: 30px;
  /* misma tabulación que Nosotros */
  margin-bottom: 0.8rem;

  opacity: 0;
  transform: translateY(20px);
  animation: sitiosFadeUp 0.9s ease-out forwards;
  animation-delay: 0.1s;
}

/* Párrafo */
.section-sitios p {
  color: #FAF3EA;
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.5;
  max-width: 620px;
  margin-left: 30px;
  /* misma tabulación */
  margin-top: 0.2rem;

  opacity: 0;
  transform: translateY(24px);
  animation: sitiosFadeUp 0.9s ease-out forwards;
  animation-delay: 0.25s;
  /* entra un poquito después del título */
}

/* Animación compartida */
@keyframes sitiosFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================
   SECCIÓN: CÓMO LLEGAR
   ============================= */

.section-map {
  padding: 5.5rem 1.4rem 6rem;
  text-align: center;
}

/* Bloque de título + texto */
.section-map .map-header {
  max-width: 720px;
  margin: 0 auto 2.5rem;
}

/* Título */
.section-map .map-header h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #FAF3EA;
  margin-bottom: 0.8rem;
}

/* Texto */
.section-map .map-header p {
  font-size: 1rem;
  line-height: 1.55;
  color: #FAF3EA;
  margin: 0;
}

/* Contenedor que centra el mapa */
.section-map .map-wrapper {
  display: flex;
  justify-content: center;
}

/* Caja del mapa */
.section-map .map-embed {
  width: 100%;
  max-width: 980px;
  /* ANCHO MÁXIMO DEL MAPA */
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

/* Iframe del mapa */
.section-map .map-embed iframe {
  width: 100%;
  height: 600px;
  /* ALTURA DEL MAPA */
  border: 0;
  display: block;
}

/* =========================
   RESTAURAR COLORES DE TEXTO
   ========================= */

/* Primero, asegurémonos que los títulos tengan el color correcto */
.section-contact-map .section-header h2 {
  color: var(--ayb-bg);
  font-size: 2rem;
  text-align: center;
  margin-bottom: 1rem;
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.15;
  margin-left: 30px;
  /* misma tabulación que Nosotros */
  margin-bottom: 0.8rem;
}

.section-contact-map .map-header h2,
.section-contact-map .map-header h3 {
  color: var(--ayb-green);
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.section-contact-map .contact-info h3 {
  color: var(--ayb-bg);
  font-size: 1rem;
  margin: 0 0 0.3rem;
}

/* Párrafos */
.section-contact-map p {
  color: var(--ayb-bg);
  font-size: 0.9rem;
  margin: 0 0 0.35rem;
}

/* ===========================================
   DOS COLUMNAS SIMPLES Y FUNCIONALES
   =========================================== */

/* EN DESKTOP: dos columnas */
@media (min-width: 768px) {
  .contact-map-wrapper {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
  }

  .contact-column {
    padding-right: -30px;
  }

  .map-column {

    width: 55%;
  }
}

/* EN MÓVIL: una columna */
@media (max-width: 767px) {
  .contact-map-wrapper {
    flex-direction: column;
    gap: 60px;
  }
}

/* Mantén el fondo transparente */
.section-contact-map {
  background: transparent;
  padding: 40px 0;
}

/* Restaura el diseño del formulario */
.section-contact-map .contact-form {
  background: var(--ayb-white);
  border-radius: 22px;
  padding: 1rem 1rem 1.2rem;
  box-shadow: var(--shadow-soft);
  margin-bottom: 1.5rem;
}

/* Restaura el diseño de la info de contacto */
.section-contact-map .contact-info {
  font-size: 0.9rem;
  background: var(--ayb-white);
  border-radius: 22px;
  padding: 1rem;
  box-shadow: var(--shadow-soft);
}

/* =============================
   ANIMACIÓN DE ENTRADA
   ============================= */

/* Estado inicial */
.section-map .map-header h2,
.section-map .map-header p,
.section-map .map-embed {
  opacity: 0;
  transform: translateY(22px);
  animation: mapFadeUp 0.95s ease-out forwards;
}

/* Delays escalonados */
.section-map .map-header h2 {
  animation-delay: 0.05s;
}

.section-map .map-header p {
  animation-delay: 0.18s;
}

.section-map .map-embed {
  animation-delay: 0.32s;
}

/* Keyframes compartidos */
@keyframes mapFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-contact {
  background: #083B3A;
  /* ejemplo: verde oscuro, cambiá por el color que quieras */
  padding-top: 4rem;
  padding-bottom: 4rem;
  opacity: 1;
}

/* Título “Contacto” en cremita clara */
.section-contact .section-header h2 {
  color: #FAF3EA;
  /* cremita clara que venís usando */
  text-align: left;
}

/* Subtítulo en blanco */
.section-contact .section-header p {
  color: #FFFFFF;
  /* blanco pleno */
  text-align: left;
}

.section-contact .contact-info h3 {
  color: var(--ayb-orange);
  /* tu naranja institucional */
  font-weight: 700;
  /* bold */
}

.section-contact .contact-info p,
.section-contact .contact-info a {
  color: #FFFFFF !important;
  /* blanco pleno */
}

.section-contact {
  position: relative;
  background: #074F4D !important;
  /* verde pleno */
  z-index: 5;
}

.section-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #074F4D;
  /* sin transparencia */
  z-index: -1;
  /* queda detrás del contenido */
}

.section-contact {
  position: relative;
  background-color: #074F4D;
  /* verde pleno */
  overflow: hidden;
}

/* Trama con el rombo svg repetido */
.section-contact::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("/assets/img/vector.svg");
  background-repeat: repeat;

  /* 50% del tamaño original del icono */
  background-size: 40px 40px;
  /* ajusta según tu rombo */

  /* Espaciado entre las figuras */
  background-position: 200px 50px;

  /* Muy sutil */
  opacity: 0.03;

  pointer-events: none;
  z-index: 0;
}

/* Para asegurar que el contenido quede arriba */
.section-contact>* {
  position: relative;
  z-index: 1;
}

/* Agrega esto al final de tu CSS */
.booking-card {
  animation: fadeInUp 1s ease-out 1s both;
  /* 0.5s delay para que cargue después */
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

/* ===================================
   SECCIÓN CONTACTO - VERSIÓN CORREGIDA Y APAISADA
   =================================== */

/* Sección completa - MÁS APAISADA pero conservando fondo */
.contact-section {
  position: relative;
  width: 100%;
  min-height: 60vh;
  /* Mantengo 100vh para que sea grande */
  padding: 60px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Fondo con imagen y overlay verde - RESTAURADO */
.contact-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.contact-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.9);
}

.contact-green-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  mix-blend-mode: multiply;
}

/* Contenedor principal */
.contact-container {
  position: relative;
  z-index: 10;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* Título principal en blanco - MÁS GRANDE */
.contact-title-wrapper {
  text-align: center;
  margin-bottom: 40px;
}

.contact-main-title {
  color: white;
  font-family: "DM Sans", sans-serif;
  font-size: 4rem;
  /* Más grande */
  font-weight: 900;
  /* Más grueso */
  text-shadow: 3px 3px 12px rgba(0, 0, 0, 0.7);
  letter-spacing: 1.5px;
}

/* ===== ESTILOS BASE DE LA SECCIÓN ===== */
.section.contact-section {
  position: relative;
  padding: 100px 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Fondo con overlay */
.contact-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.contact-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.contact-green-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255);
}

.container.contact-container {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

/* Título principal */
.contact-title-wrapper {
  text-align: center;
  margin-bottom: 60px;
}

.contact-main-title {
  font-family: "DM Sans", sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  color: white;
  text-transform: capitalize;
  letter-spacing: 2px;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* ===== CONTENEDOR DE DOS TARJETAS ===== */
.contact-two-cards-wrapper {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

/* ===== ESTILOS COMUNES PARA AMBAS TARJETAS ===== */
.contact-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  flex: 1;
  min-width: 500px;
  max-width: 650px;
}

/* ===== TARJETA 1: FORMULARIO ===== */
.contact-form-card {
  display: flex;
  flex-direction: column;
  height: 700px;
  /* ← MISMA ALTURA QUE EL MAPA */
  overflow-y: auto;
  /* ← Scroll interno si el contenido excede */
}

.card-content {
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Teléfono */
.contact-phone-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px;
  padding: 15px 20px;
  background: rgba(4, 132, 123, 0.1);
  border-radius: 12px;
  border-left: 5px solid #04847b;
}

.phone-icon {
  color: #04847b;
  font-size: 1.2rem;
}

.contact-phone-number {
  font-family: "DM Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: #333;
}

/* Formulario */
.contact-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}

.form-field-half {
  flex: 1;
}

.form-field {
  margin-bottom: 10px;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 18px 20px;
  border: 2px solid rgba(4, 132, 123, 0.3);
  border-radius: 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  color: #333;
  background: white;
  transition: all 0.3s ease;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: #04847b;
  box-shadow: 0 0 0 3px rgba(4, 132, 123, 0.2);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #666;
  opacity: 0.8;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* Botón Enviar */
.submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 40px;
  background: #04847b;
  color: white;
  border: none;
  border-radius: 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: auto;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 8px 20px rgba(4, 132, 123, 0.4);
  align-self: stretch;
}

.submit-button:hover {
  background: #074F4D;
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(4, 132, 123, 0.5);
}

.submit-button i {
  font-size: 1.3rem;
}

/* Información de contacto horizontal */
.contact-info-horizontal {
  display: flex;
  gap: 20px;
  margin: 25px 0;
  flex-wrap: wrap;
}

.contact-address-wrapper,
.contact-email-wrapper {
  flex: 1;
  min-width: 250px;
}

.contact-address-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  background: rgba(4, 132, 123, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(4, 132, 123, 0.1);
}

.address-icon {
  color: #04847b;
  font-size: 1.2rem;
  margin-top: 3px;
}

.address-content {
  flex: 1;
}

.address-line {
  font-family: "DM Sans", sans-serif;
  font-size: 1.1rem;
  color: #333;
  line-height: 1.5;
  margin: 0;
}

/* Email */
.contact-email-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: rgba(4, 132, 123, 0.08);
  border-radius: 12px;
  border-left: 5px solid #04847b;
  flex-wrap: wrap;
}

.email-icon {
  color: #04847b;
  font-size: 0.7rem;
}

.contact-email-link {
  font-family: "DM Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #04847b;
  text-decoration: none;
  transition: all 0.3s ease;
  word-break: break-word;
}

.contact-email-link:hover {
  color: #074F4D;
  text-decoration: underline;
}

/* Redes sociales */
.contact-social-wrapper {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 25px 0 0;
  padding: 10px;
  border-top: 2px solid rgba(4, 132, 123, 0.1);
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #04847b;
  color: white;
  font-size: 1.8rem;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 3px solid #04847b;
  box-shadow: 0 8px 20px rgba(4, 132, 123, 0.3);
}

.social-link:hover {
  background: white;
  color: #04847b;
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 15px 30px rgba(4, 132, 123, 0.4);
}

/* ===== TARJETA 2: MAPA ===== */
.contact-map-card {
  height: 700px;
  /* Altura similar a la tarjeta del formulario */
  display: flex;
}

.map-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
}

.map-wrapper iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 25px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
  .contact-two-cards-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .contact-card {
    min-width: 90%;
    max-width: 800px;
  }

  .contact-map-card {
    height: 500px;
  }

  .contact-main-title {
    font-size: 3.2rem;
  }
}

@media (max-width: 768px) {
  .section.contact-section {
    padding: 60px 0;
  }

  .contact-main-title {
    font-size: 2.8rem;
  }

  .card-content {
    padding: 30px 20px;
  }

  .form-row {
    flex-direction: column;
    gap: 15px;
  }

  .contact-info-horizontal {
    flex-direction: column;
    gap: 15px;
  }

  .contact-map-card {
    height: 400px;
  }
}

@media (max-width: 576px) {
  .contact-main-title {
    font-size: 2.2rem;
  }

  .contact-card {
    min-width: 95%;
  }

  .card-content {
    padding: 20px 15px;
  }

  .contact-phone-number {
    font-size: 1.2rem;
  }

  .contact-social-wrapper {
    gap: 15px;
    padding: 10px;
  }

  .social-link {
    width: 55px;
    height: 55px;
    font-size: 1.6rem;
  }

  .contact-map-card {
    height: 350px;
  }
}

/* Scrollbar personalizada para tarjeta de formulario */
.contact-form-card::-webkit-scrollbar {
  width: 8px;
}

.contact-form-card::-webkit-scrollbar-track {
  background: rgba(4, 132, 123, 0.1);
  border-radius: 10px;
}

.contact-form-card::-webkit-scrollbar-thumb {
  background: rgba(4, 132, 123, 0.3);
  border-radius: 10px;
}

.contact-form-card::-webkit-scrollbar-thumb:hover {
  background: rgba(4, 132, 123, 0.5);
}

/* =========================
   CARRUSEL SIMPLE Y ELEGANTE
   ========================= */

.rooms-carousel-simple {
  position: relative;
  max-width: 1000px;
  margin: 3rem auto;
  overflow: hidden;
  border-radius: 26px;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
  height: 500px;
}

.carousel-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
}

.room-card {
  height: 100%;
  width: 100%;
  position: relative;
}

.room-card-link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.room-image {
  height: 100%;
  width: 100%;
  border-radius: 26px;
  overflow: hidden;
  border: 3px solid #04847b;
  box-shadow:
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 15px #04847b;
}

.room-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.room-card:hover .room-image img {
  transform: scale(1.05);
}

.room-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  padding: 2rem 1.5rem 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  border-radius: 0 0 26px 26px;
}

/* Controles del carrusel */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  color: var(--ayb-green);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.carousel-btn:hover {
  background: var(--ayb-green);
  color: white;
  transform: translateY(-50%) scale(1.1);
}

.prev-btn {
  left: 20px;
}

.next-btn {
  right: 20px;
}

.carousel-btn svg {
  width: 24px;
  height: 24px;
}

/* Indicadores (puntos) */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 1.5rem 0 2.5rem;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}

.dot.active {
  background: var(--ayb-green);
  transform: scale(1.2);
}

.dot:hover {
  background: var(--ayb-orange-active);
}

/* Botón ver todas */
.rooms-footer {
  text-align: center;
}

.btn-view-rooms {
  display: inline-block;
  background: var(--ayb-green);
  color: white;
  padding: 0.9rem 2.2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  border: 2px solid var(--ayb-green);
}

.btn-view-rooms:hover {
  background: transparent;
  color: var(--ayb-green);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1100px) {
  .rooms-carousel-simple {
    max-width: 800px;
  }

  .carousel-track {
    height: 450px;
  }
}

@media (max-width: 850px) {
  .rooms-carousel-simple {
    max-width: 600px;
  }

  .carousel-track {
    height: 400px;
  }
}

@media (max-width: 650px) {
  .rooms-carousel-simple {
    max-width: 100%;
    margin: 2rem 0;
    border-radius: 20px;
  }

  .carousel-track {
    height: 350px;
  }

  .room-image,
  .room-caption {
    border-radius: 20px;
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
  }

  .prev-btn {
    left: 10px;
  }

  .next-btn {
    right: 10px;
  }

  .room-caption {
    font-size: 1.2rem;
    padding: 1.5rem 1rem 0.75rem;
  }
}

/* =========================
   CARRUSEL DEFINITIVO - CLASES ÚNICAS
   ========================= */

/* Contenedor principal */
.ayb-carousel-container {
  position: relative;
  max-width: 1200px;
  margin: 6rem auto;
  padding: 0 4rem;
}

/* Wrapper para ocultar slides laterales */
.ayb-carousel-wrapper {
  overflow: hidden;
  border-radius: 26px;
}

/* Track con las slides */
.ayb-carousel-track {
  display: flex;
  transition: transform 0.5s ease;
  height: 500px;
}

/* Cada slide */
.ayb-carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
  transition: all 0.3s ease;
  opacity: 0.4;
  transform: scale(0.85);
}

/* Slide activa (centro) */
.ayb-carousel-slide.ayb-slide-active {
  opacity: 1;
  transform: scale(1);
}

/* Tarjeta de habitación */
.ayb-room-card {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.ayb-room-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Imagen */
.ayb-room-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ayb-room-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.ayb-room-card:hover .ayb-room-image img {
  transform: scale(1.05);
}

/* Nombre de habitación */
.ayb-room-name {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-130%);
  background: linear-gradient(to top, #074f4d(0, 0, 0, 0.8), transparent);
  color: white;
  padding: 10px 25px;
  font-size: 1.5rem;
  font-weight: 600;
  border-radius: 26px;
  border: 2px solid white;
  text-align: right;
  white-space: nowrap;
  z-index: 10;
}


/* Flechas de navegación */
.ayb-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  z-index: 10;
  color: var(--ayb-green);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.ayb-carousel-arrow:hover {
  background: var(--ayb-green);
  color: white;
  transform: translateY(-50%) scale(1.1);
}

.ayb-arrow-prev {
  left: 0;
}

.ayb-arrow-next {
  right: 0;
}

/* Puntos indicadores */
.ayb-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 2rem 0 3rem;
}

.ayb-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}

.ayb-dot.ayb-dot-active {
  background: var(--ayb-green);
  transform: scale(1.2);
}

.ayb-dot:hover {
  background: var(--ayb-orange-active);
}

.ayb-rooms-footer {
  text-align: center;
}

.ayb-btn-rooms {
  display: inline-block;
  background: var(--ayb-green);
  color: white;
  padding: 0.9rem 2.2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  border: 2px solid var(--ayb-green);
}

.ayb-btn-rooms:hover {
  background: transparent;
  color: var(--ayb-green);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(5, 56, 55, 0.15);
}

/* Responsive */
@media (max-width: 1200px) {
  .ayb-carousel-container {
    max-width: 900px;
    padding: 0 3rem;
  }

  .ayb-carousel-track {
    height: 450px;
  }
}

@media (max-width: 992px) {
  .ayb-carousel-container {
    max-width: 700px;
    padding: 0 2.5rem;
  }

  .ayb-carousel-track {
    height: 400px;
  }
}

@media (max-width: 768px) {
  .ayb-carousel-container {
    max-width: 100%;
    padding: 0 3rem;
    margin: 2rem auto;
  }

  .ayb-carousel-track {
    height: 350px;
  }

  .ayb-carousel-slide {
    padding: 0 0.5rem;
  }

  .ayb-carousel-arrow {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .ayb-room-name {
    font-size: 1.2rem;
    padding: 1.5rem 1rem 0.75rem;
  }
}

@media (max-width: 576px) {
  .ayb-carousel-container {
    padding: 0 2.5rem;
  }

  .ayb-carousel-track {
    height: 300px;
  }

  .ayb-room-card {
    border-radius: 20px;
  }

  .ayb-room-name {
    border-radius: 0 0 20px 20px;
    font-size: 1.1rem;
  }

  .ayb-carousel-arrow {
    width: 36px;
    height: 36px;
  }
}


/* texto dentro de carrousel*/

/* Nombre de habitación - Desktop (mantener) */
.ayb-room-name {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-130%);
  background: linear-gradient(to top, rgba(7, 79, 77, 0.8), transparent);
  color: white;
  padding: 10px 25px;
  font-size: 1.5rem;
  font-weight: 600;
  border-radius: 26px;
  border: 2px solid white;
  text-align: right;
  white-space: nowrap;
  z-index: 10;
}

/* Tablet (768px) */
@media (max-width: 768px) {
  .ayb-room-name {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 15px;
    max-width: 80%;
    width: auto;
    white-space: normal;
    text-align: center;
    font-size: 1.2rem;
    padding: 8px 15px;
    border-radius: 20px;
    display: block;
    margin: 0 auto;
  }
}

/* Móvil pequeño (576px) */
@media (min-width: 576px) and (max-width: 1200px) {
  .ayb-room-name {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    /* Mantiene en la parte inferior */
    max-width: 85%;
    font-size: 1.1rem;
    padding: 6px 12px;
    border-radius: 15px;
    text-align: center;
    margin: 0 auto;
    /* Asegura centrado */
    display: block;
    /* Importante para márgenes automáticos */
  }
}

/* FIN TEXTO CARROUSEL ADAPTADO*/

/* WhatsApp button styles - add to the end of your CSS */
.social-link {
  color: white;
  /* Makes the icon white */
  font-size: 1.2rem;
  /* Adjusts the icon size */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  /* Sets a fixed size */
  height: 40px;
  border-radius: 50%;
  /* Makes it a circle */
  text-decoration: none;
  transition: background-color 0.3s ease;
}

/* Hover effect for the button */
.social-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Ensures the button is white even when header is green on scroll */
.site-header.header-solid .social-link {
  color: white;
}

/* BOTÓN VER EXPERIENCIAS - CSS NUEVO */
.experiencias-btn-container {
  width: 100%;
  text-align: center;
  padding: 40px 0;
  margin: 0;
}

.btn-experiencias {
  display: inline-block;
  background-color: #04847b;
  color: white;
  padding: 15px 40px;
  border-radius: 26px;
  text-decoration: none;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  border: 2px solid #04847b;
  transition: all 0.3s ease;
  text-align: center;
}

.btn-experiencias:hover {
  background-color: #074F4D;
  border-color: #074F4D;
  transform: translateY(-3px);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .experiencias-btn-container {
    padding: 30px 0;
  }

  .btn-experiencias {
    padding: 12px 30px;
    font-size: 1rem;
  }
}

/* =========================
   BOTÓN SUITE CON JACUZZI
   ========================= */
.suite-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: var(--ayb-green);
  color: white;
  text-decoration: none;
  padding: 1rem 1.8rem;
  border-radius: 12px;
  font-family: inherit;
  box-shadow: 0 6px 20px rgba(5, 56, 55, 0.25);
  transition: all 0.3s ease;
  max-width: 320px;
  margin-left: auto;
  /* Esto lo empuja a la derecha */
  margin-right: 0;
}

/* Contenedor del icono */
.suite-icon {
  background: rgba(255, 255, 255, 0.15);
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: all 0.3s ease;
}

/* Texto organizado en columna */
.suite-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* Título principal */
.suite-title {
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
}

/* Subtítulo */
.suite-subtitle {
  font-size: 0.9rem;
  opacity: 0.9;
  font-weight: 400;
  margin-top: 0.2rem;
}

/* =========================
   EFECTOS HOVER
   ========================= */
.suite-cta-btn:hover {
  background: #044a47;
  /* Verde un poco más oscuro */
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(5, 56, 55, 0.35);
}

.suite-cta-btn:hover .suite-icon {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 768px) {
  .suite-cta-btn {
    padding: 0.9rem 1.5rem;
    max-width: 100%;
    margin-left: 0;
    /* En móvil ocupa todo el ancho */
    justify-content: center;
  }

  .suite-icon {
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
  }

  .suite-title {
    font-size: 1rem;
  }
}

/* Botón con texto BLANCO - Úsalo si el fondo de la sección es verde */
.suite-cta-btn {
  color: white !important;
  /* Texto blanco */
}

.suite-cta-btn .suite-title,
.suite-cta-btn .suite-subtitle {
  color: white !important;
}

/* ==============================================
   POR QUÉ ELEGIRNOS - IMAGEN Y TARJETA EN PILA
   ============================================== */

/* 1. CONTENEDOR PRINCIPAL - Cambia a columna */
.why-choose-container {
  flex-direction: column !important;
  align-items: stretch !important;
  min-height: auto !important;
  gap: 2rem !important;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

/* 2. IMAGEN - Saca del posicionamiento absoluto */
.why-choose-bg {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 400px !important;
  /* Altura fija para la imagen */
  margin: 0 !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.why-choose-bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 3. TARJETA - La ponemos debajo */
.why-choose-card {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  z-index: 2 !important;
  margin: 0 auto !important;
  /* Centrada horizontalmente */
}

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

@media (max-width: 992px) {
  .why-choose-bg {
    height: 350px !important;
  }
}

@media (max-width: 768px) {
  .why-choose-container {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    gap: 1.5rem !important;
  }

  .why-choose-bg {
    height: 300px !important;
  }

  .why-choose-card {
    padding: 2rem 1.5rem !important;
  }
}

@media (max-width: 576px) {
  .why-choose-bg {
    height: 600px !important;
  }
}

/* Parche mínimo */
.why-choose-bg {
  margin: 0 calc(-50vw + 50%) !important;
  width: 100vw !important;
}

/* Versión completa con responsive */
.why-choose-bg {
  height: 600px !important;
  /* Desktop */
}

.why-choose-bg img {
  height: 600px !important;
}

@media (max-width: 992px) {

  .why-choose-bg,
  .why-choose-bg img {
    height: 450px !important;
  }
}

@media (max-width: 768px) {

  .why-choose-bg,
  .why-choose-bg img {
    height: 600px !important;
  }
}

@media (max-width: 576px) {

  .why-choose-bg,
  .why-choose-bg img {
    height: 600px !important;
  }
}

/* =========================
   SECCIÓN EXPERIENCIAS CERCANAS - IMÁGENES GRANDES
   ========================= */

.expc-section {
  padding: 0 0;
  background: #f8f4ee;
}

.expc-header {
  text-align: center;
  margin-bottom: 4rem;
}

.expc-header h2 {
  color: var(--ayb-green);
  font-size: 2.5rem;
}

/* Grid de tarjetas - 2 columnas en desktop con imágenes grandes */
.expc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Tarjeta individual - Contenedor más grande */
.expc-card {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s ease;
  height: 500px;
  /* Altura fija grande */
}

.expc-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

/* Enlace que cubre toda la tarjeta */
.expc-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Contenedor de imagen - Más grande */
.expc-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.expc-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s ease;
}

.expc-card:hover .expc-image img {
  transform: scale(1.1);
}

/* Overlay con información - Más visible */
.expc-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top,
      rgba(5, 56, 55, 0.95) 0%,
      rgba(5, 56, 55, 0.8) 50%,
      transparent 100%);
  padding: 2.5rem;
  transform: translateY(20%);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.expc-card:hover .expc-overlay {
  transform: translateY(0);
  opacity: 1;
}

.expc-content {
  color: white;
  text-align: left;
}

.expc-title {
  font-size: 1.8rem;
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.expc-distance {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-left: 0.5rem;
  font-weight: 400;
}

.expc-description {
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 1rem;
  opacity: 0.9;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

@media (max-width: 1200px) {
  .expc-card {
    height: 450px;
  }

  .expc-grid {
    gap: 2.5rem;
  }
}

/* Ensure visibility on devices without hover (tablets/mobile) regardless of width */
@media (max-width: 1200px),
(hover: none) {
  .expc-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    background: linear-gradient(to top,
        rgba(5, 56, 55, 0.95) 0%,
        rgba(5, 56, 55, 0.8) 60%,
        transparent 100%) !important;
  }
}

@media (max-width: 992px) {
  .expc-grid {
    grid-template-columns: 1fr;
    /* 1 columna en tablet/móvil */
    gap: 2rem;
    padding: 0 1.5rem;
  }



  .expc-card {
    height: 400px;
  }

  .expc-overlay {
    padding: 2rem;
  }
}

@media (max-width: 768px) {


  .expc-header h2 {
    font-size: 2rem;
  }

  .expc-card {
    height: 350px;
  }

  .expc-title {
    font-size: 1.5rem;
  }


  .expc-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    padding: 1.5rem !important;
  }
}


@media (max-width: 576px) {
  .expc-grid {
    gap: 1.5rem;
    padding: 0 1rem;
  }

  .expc-card {
    height: 300px;
    border-radius: 20px;
  }

  .expc-overlay {
    padding: 1.5rem;
  }

  .expc-title {
    font-size: 1.3rem;
  }

  .expc-description {
    font-size: 0.9rem;
    -webkit-line-clamp: 2;
  }
}

/* Footer inferior - Una sola línea en desktop */
.footer-bottom-inner {
  display: flex;
  flex-direction: row !important;
  /* Cambia a horizontal */
  justify-content: space-between !important;
  /* Separa enlaces y copyright */
  align-items: center !important;
  /* Centra verticalmente */
  gap: 2rem !important;
  /* Espacio entre elementos */
}

.footer-legal-links {
  display: flex;
  flex-wrap: nowrap !important;
  /* Evita saltos de línea */
  gap: 1rem !important;
  /* Espacio entre enlaces */
  margin: 0 !important;
  white-space: nowrap !important;
  /* Mantiene todo en una línea */
}

.footer-bottom p {
  white-space: nowrap !important;
  /* Evita que el copyright se divida */
  margin: 0 !important;
}

/* Mantener diseño responsive para móviles */
@media (max-width: 768px) {
  .footer-bottom-inner {
    flex-direction: column !important;
    /* Apila en móvil */
    gap: 1rem !important;
    align-items: flex-start !important;
  }

  .footer-legal-links {
    flex-wrap: wrap !important;
    /* Permite saltos en móvil */
    gap: 0.75rem !important;
  }
}

/* Footer inferior - Reducir altura */
.footer-bottom {
  width: 100%;
  background: #053837;
  margin-top: 0.5rem !important;
  /* Reducido de 1.8rem */
  padding: 0.3rem 0 !important;
  /* Reducido de 0.8rem */
  font-size: 0.76rem;
  min-height: auto !important;
  /* Elimina cualquier min-height */
  height: auto !important;
  /* Asegura altura automática */
}

.footer-bottom-inner {
  display: flex;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1rem !important;
  /* Reducido de 2rem */
  padding: 0.2rem 0 !important;
  /* Reducción adicional si es necesario */
}

/* Elimina cualquier margen/padding extra en los hijos */
.footer-legal-links {
  margin: 0 !important;
  padding: 0 !important;
}

.footer-bottom p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Asegurar que la tarjeta principal tenga altura definida */
.contact-main-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  height: 700px;
  /* ALTURA FIJA en lugar de min/max */
  width: 100%;
  gap: 0;
}

/* Asegurar que ambas columnas hereden la altura */
.contact-left-column,
.contact-right-column {
  height: 100%;
  /* Heredan los 700px del padre */
}

/* Map-wrapper ocupa toda la columna */
.map-wrapper {
  height: 100%;
  width: 100%;
  position: relative;
}

/*habitaciones*/

/* ===================================
   PÁGINA HABITACIONES - ESTILOS SIMPLIFICADOS
   =================================== */

/* ===================================
   PÁGINA HABITACIONES - ESTILOS FINALES
   =================================== */

/* 1. FONDO GENERAL */
body {
  background-color: #FAF3EA;
  font-family: "DM Sans", sans-serif;
}

/* 2. SECCIÓN PRINCIPAL */
.rooms-section {
  padding: 60px 0 80px 0;
  background-color: transparent;
}

.room-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 3. TÍTULO DE LA PÁGINA */
.rooms-main-title {
  text-align: center;
  margin-bottom: 60px;
}

.rooms-main-title h1 {
  font-family: "DM Sans", sans-serif;
  font-size: 2.5rem;
  font-weight: 200;
  color: #074F4D;
  margin-bottom: 10px;
}

/* 4. CONTENEDOR DE HABITACIÓN - TRANSPARENTE */
.room-item {
  margin-bottom: 100px;
  background: transparent;
  opacity: 0;
  animation: fadeIn 0.9s ease forwards;
}

/* ANIMACIÓN DE ENTRADA */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

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

/* Retrasos para cada habitación */
.room-item:nth-child(1) {
  animation-delay: 0.1s;
}

.room-item:nth-child(2) {
  animation-delay: 0.2s;
}

.room-item:nth-child(3) {
  animation-delay: 0.3s;
}

.room-item:nth-child(4) {
  animation-delay: 0.4s;
}

.room-item:nth-child(5) {
  animation-delay: 0.5s;
}

/* 5. ESTRUCTURA GRID - TODAS IGUALES: IMAGEN IZQUIERDA GRANDE */
.room-content {
  display: grid;
  grid-template-columns: 2.5fr 1fr;
  /* Imagen 71%, Contenido 29% */
  min-height: 500px;
}

/* 6. IMAGEN GRANDE A LA IZQUIERDA */
.room-image {
  position: relative;
  overflow: hidden;
}

.room-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 7. CONTENIDO A LA DERECHA */
.room-info {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 8. TÍTULO DE HABITACIÓN - VISIBLE Y CLARO */
.room-title {
  text-shadow: none !important;
  font-family: "DM Sans", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: #074F4D;
  margin-bottom: 10px;
  line-height: 1.3;
  position: relative;
  padding-bottom: 8px;
}

.room-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: #04847b;
}

/* 9. DESCRIPCIÓN */
.room-description {
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 25px;
}

/* 10. SERVICIOS - SIN TÍTULO */
.services-icons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 30px;
}

/* 11. ICONOS REDUCIDOS 20% */
.service-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.service-icon {
  width: 28px;
  height: 28px;
  background-color: rgba(4, 132, 123, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #04847b;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.service-text {
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  color: #555;
}

/* 12. BOTONES */
.room-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.btn-more,
.btn-reserve {
  padding: 12px 20px;
  border-radius: 6px;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.btn-more {
  background-color: #04847b;
  color: white;
  border: none;
}

.btn-more:hover {
  background-color: #074F4D;
}

.btn-reserve {
  background-color: white;
  color: #04847b;
  border: 2px solid #04847b;
}

.btn-reserve:hover {
  background-color: #04847b;
  color: white;
}

/* 13. BOTÓN REGRESAR */
.rooms-footer {
  text-align: center;
  padding: 60px 0;
}

.btn-return {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  background-color: #04847b;
  color: white;
  border: none;
  border-radius: 8px;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-return:hover {
  background-color: #074F4D;
  transform: translateY(-3px);
}

/* 14. RESPONSIVE */
@media (max-width: 1024px) {
  .room-content {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .room-image {
    height: 400px;
  }

  .room-info {
    padding: 30px;
  }

  .services-icons {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .rooms-section {
    padding: 40px 0 60px 0;
  }

  .rooms-main-title h1 {
    font-size: 2rem;
    margin-bottom: 40px;
  }

  .room-item {
    margin-bottom: 70px;
  }

  .room-title {
    font-size: 1.6rem;
  }

  .room-image {
    height: 300px;
  }

  .room-info {
    padding: 25px;
  }
}

@media (max-width: 480px) {
  .room-container {
    padding: 0 15px;
  }

  .room-info {
    padding: 20px;
  }

  .room-title {
    font-size: 1.4rem;
  }

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

  .service-icon {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
  }

  .service-text {
    font-size: 0.85rem;
  }
}

/* FON HABITACIONES */


/* LA PAGINA GALERÍA */
/* ===================================
   GALERÍA - IMÁGENES GRANDES (4 ESPACIOS)
   =================================== */

/* SECCIÓN GALERÍA */
.gallery-section {
  padding-top: 120px;
  padding-bottom: 60px 0;
  background-color: #FAF3EA;
}

.gallery-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
}

/* TÍTULO DE LA GALERÍA */
.gallery-title {
  text-align: center;
  margin-bottom: 50px;
}

.gallery-title h1 {
  font-family: "DM Sans", sans-serif;
  font-size: 2.8rem;
  font-weight: 600;
  color: #074F4D;
  margin-bottom: 15px;
}

.gallery-title p {
  font-family: "DM Sans", sans-serif;
  font-size: 1.1rem;
  color: #666;
}

/* GRID DINÁMICO SIN ESPACIOS VACÍOS */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 50px;
}

/* IMÁGENES NORMALES - OCUPAN 1 ESPACIO */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 1/1;
  cursor: pointer;
  transition: all 0.4s ease;
}

/* IMÁGENES GRANDES - OCUPAN 2 COLUMNAS Y 2 FILAS */
.gallery-item.large {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 1/1;
}

/* ANIMACIÓN DE FLOTACIÓN */
@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

/* Todas las imágenes flotan */
.gallery-item {
  animation: float 6s ease-in-out infinite;
}

/* Retrasos escalonados para flotación */
.gallery-item:nth-child(8n+1) {
  animation-delay: 0s;
}

.gallery-item:nth-child(8n+2) {
  animation-delay: 0.75s;
}

.gallery-item:nth-child(8n+3) {
  animation-delay: 1.5s;
}

.gallery-item:nth-child(8n+4) {
  animation-delay: 2.25s;
}

.gallery-item:nth-child(8n+5) {
  animation-delay: 3s;
}

.gallery-item:nth-child(8n+6) {
  animation-delay: 3.75s;
}

.gallery-item:nth-child(8n+7) {
  animation-delay: 4.5s;
}

.gallery-item:nth-child(8n+8) {
  animation-delay: 5.25s;
}

/* ANIMACIÓN DE ENTRADA */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

.gallery-item {
  animation: fadeInUp 0.8s ease forwards, float 6s ease-in-out infinite;
  opacity: 0;
}

/* Retrasos escalonados para entrada */
.gallery-item:nth-child(1) {
  animation-delay: 0.1s, 0s;
}

.gallery-item:nth-child(2) {
  animation-delay: 0.2s, 0.75s;
}

.gallery-item:nth-child(3) {
  animation-delay: 0.3s, 1.5s;
}

.gallery-item:nth-child(4) {
  animation-delay: 0.4s, 2.25s;
}

.gallery-item:nth-child(5) {
  animation-delay: 0.5s, 3s;
}

.gallery-item:nth-child(6) {
  animation-delay: 0.6s, 3.75s;
}

.gallery-item:nth-child(7) {
  animation-delay: 0.7s, 4.5s;
}

.gallery-item:nth-child(8) {
  animation-delay: 0.8s, 5.25s;
}

.gallery-item:nth-child(9) {
  animation-delay: 0.9s, 0s;
}

.gallery-item:nth-child(10) {
  animation-delay: 1.0s, 0.75s;
}

/* EFECTO HOVER */
.gallery-item:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

/* IMAGEN DENTRO DEL ITEM */
.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gallery-item:hover .gallery-img {
  transform: scale(1.1);
}

/* OVERLAY VERDE AL HOVER */
.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(4, 132, 123, 0);
  transition: background-color 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.gallery-item:hover .gallery-overlay {
  background-color: rgba(4, 132, 123, 0.7);
  opacity: 1;
}

/* ICONO DE LUPA EN OVERLAY */
.zoom-icon {
  color: white;
  font-size: 2.5rem;
  transform: scale(0);
  transition: transform 0.4s ease;
}

.gallery-item:hover .zoom-icon {
  transform: scale(1);
}

/* LIGHTBOX (MODAL) */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox.active {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.lightbox-content {
  position: relative;
  max-width: 95%;
  max-height: 95%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-img {
  max-width: 100%;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 8px;
}

/* CONTROLES DEL LIGHTBOX */
.lightbox-close {
  position: absolute;
  top: -50px;
  right: -50px;
  background: none;
  border: none;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
  transition: color 0.3s ease;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-close:hover {
  color: #04847b;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.lightbox-nav:hover {
  background-color: rgba(4, 132, 123, 0.7);
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

/* INDICADOR DE IMAGEN ACTUAL */
.lightbox-counter {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-family: "DM Sans", sans-serif;
  font-size: 1.2rem;
  background: rgba(0, 0, 0, 0.5);
  padding: 8px 20px;
  border-radius: 20px;
}

/* BOTÓN REGRESAR */
.gallery-footer {
  text-align: center;
  padding: 40px 0;
}

.btn-return-gallery {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  background-color: #04847b;
  color: white;
  border: none;
  border-radius: 8px;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-return-gallery:hover {
  background-color: #074F4D;
  transform: translateY(-3px);
}

/* RESPONSIVE */
@media (max-width: 1200px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (max-width: 992px) {
  .gallery-title h1 {
    font-size: 2.2rem;
    padding-top: 30px;
  }

  .gallery-grid {
    gap: 15px;
  }

  .lightbox-close {
    top: -40px;
    right: -40px;
    font-size: 2rem;
  }

  .lightbox-nav {
    width: 50px;
    height: 50px;
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .gallery-section {
    padding: 40px 0;
  }

  .gallery-title h1 {
    font-size: 2rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
  }

  /* En móvil/tablet, todas las imágenes del mismo tamaño */
  .gallery-item.large {
    grid-column: span 1;
    grid-row: span 1;
  }

  .lightbox-content {
    max-width: 98%;
  }

  .lightbox-close {
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
  }

  .lightbox-nav {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }

  .lightbox-prev {
    left: 10px;
  }

  .lightbox-next {
    right: 10px;
  }
}

@media (max-width: 576px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .gallery-title h1 {
    font-size: 1.8rem;
    margin-top: 80px;
  }

  .zoom-icon {
    font-size: 2rem;
  }

  .lightbox-nav {
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-item {
    aspect-ratio: 16/9;
    /* Más panorámicas en móvil */
  }
}

/* FIN PAGINA GALERÍA */

.rooms-button-section {
  width: 100%;
  padding: 50px 0;
  background: #FAF3EA;
}

.button-container {
  text-align: center;
}

.custom-rooms-button {
  display: inline-block;
  background: #04847b;
  color: white;
  padding: 16px 40px;
  border-radius: 8px;
  font-family: sans-serif;
  font-size: 16px;
  text-decoration: none;
}

/* ===== DROPDOWN - ESCRITORIO (VERSIÓN CORREGIDA) ===== */
@media (min-width: 1024px) {

  /* Contenedor principal */
  .has-dropdown {
    position: relative;
  }

  /* Menú desplegable - OCULTO por defecto */
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(50px);
    background: var(--ayb-green);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    list-style: none;
    padding: 0;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
    margin-top: 15px !important;

    /* RESET TOTAL para asegurar disposición vertical */
    display: block !important;
  }

  /* Flechita decorativa arriba del dropdown */
  .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--ayb-green);
  }

  /* Mostrar dropdown al hacer hover */
  .has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  /* ===== RESET COMPLETO PARA ITEMS VERTICALES ===== */

  /* Contenedor de lista - RESET */
  .dropdown-menu,
  .has-dropdown ul,
  .has-dropdown .dropdown-menu {
    display: block !important;
    width: 100% !important;
    max-width: 250px !important;
  }

  /* Items de la lista - FORZAR BLOQUE */
  .dropdown-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
  }

  /* Enlaces dentro de los items - FORZAR BLOQUE */
  .dropdown-menu a {
    display: block !important;
    width: 100% !important;
    padding: 12px 20px !important;
    margin: 0 !important;
    color: var(--ayb-white) !important;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
    position: relative !important;
    white-space: normal !important;
    text-align: left !important;

    /* Separador entre items */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  }

  /* Último item sin borde */
  .dropdown-menu li:last-child a {
    border-bottom: none !important;
  }

  /* Hover en desktop */
  .dropdown-menu a:hover {
    background-color: var(--ayb-orange) !important;
    color: var(--ayb-white) !important;
  }
}

/* ===== DROPDOWN - MÓVIL (MANTENER IGUAL) ===== */
@media (max-width: 1023px) {

  /* Contenedor en móvil */
  .has-dropdown {
    width: 100%;
  }

  /* Trigger del dropdown en móvil */
  .dropdown-trigger {
    position: relative;
    padding-right: 40px !important;
  }

  /* Flecha indicadora para móvil */
  .dropdown-trigger::after {
    content: '▼';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    transition: transform 0.3s;
  }

  /* Rotar flecha cuando está abierto */
  .has-dropdown.open .dropdown-trigger::after {
    transform: translateY(-50%) rotate(180deg);
  }

  /* Menú desplegable en móvil - OCULTO por defecto */
  .dropdown-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    list-style: none;
    padding-left: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin: 0.5rem 0;
  }

  /* Mostrar dropdown en móvil cuando tenga clase "open" */
  .has-dropdown.open .dropdown-menu {
    max-height: 400px;
  }

  /* Items del dropdown en móvil */
  .dropdown-menu li {
    margin: 0;
  }

  .dropdown-menu a {
    display: block;
    padding: 0.8rem 1rem;
    color: var(--ayb-white);
    text-decoration: none;
    font-size: 0.95rem;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
  }

  .dropdown-menu a:hover {
    color: var(--ayb-orange);
  }
}

/* ===== HERO RESPONSIVE - MOBILE & TABLET ===== */

/* TABLET (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
  .hero {
    min-height: 650px !important;
    /* Reduce altura */
    height: 75vh !important;
    /* Curva más suave para tablet */
    clip-path: ellipse(110% 100% at 50% 0%);
  }

  .hero-media {
    background-position: center 28%;
    /* Ajuste fino para tablet */
  }
}

/* MOBILE GENERAL (hasta 768px) */
@media (max-width: 768px) {
  .hero {
    min-height: 550px !important;
    height: 85vh !important;
    /* Usa más porcentaje del viewport */
    /* Curva más plana para móvil */
    clip-path: ellipse(130% 100% at 50% 0%);
    /* Asegurar que la curva inferior sea visible */
    padding-bottom: 20px;
  }

  .hero-media {
    /* IMPORTANTE: Cambia el enfoque para móvil */
    background-position: center 32%;
    /* Evita que se recorte demasiado en vertical */
    background-size: cover;
  }

  /* Elimina la curva duplicada si no es necesaria */
  .hero-curve {
    display: none;
    /* O ajusta sus valores */
  }
}

/* MOBILE PEQUEÑO (hasta 480px) */
@media (max-width: 480px) {
  .hero {
    min-height: 500px !important;
    height: 90vh !important;
    /* Curva casi plana para móviles pequeños */
    clip-path: ellipse(150% 100% at 50% 0%);
  }

  .hero-media {
    background-position: center 35%;
  }
}

/* PANTALLAS MUY ALTAS (iPhone 16, Galaxy S22+, etc.) */
@media (max-width: 768px) and (min-aspect-ratio: 9/19) {
  .hero {
    height: 82vh !important;
    /* Reduce altura para pantallas altas */
    /* Curva más conservadora */
    clip-path: ellipse(125% 100% at 50% 0%);
  }

  .hero-media {
    /* Truco profesional: muestra más área lateral */
    background-size: 115% auto;
    background-position: center 33%;

    /* Si la imagen se pixela, usa esto */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ORIENTACIÓN HORIZONTAL EN MÓVIL */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    height: 95vh !important;
    min-height: 400px !important;
    /* Curva casi inexistente en horizontal */
    clip-path: ellipse(180% 100% at 50% 0%);
  }

  .hero-media {
    background-position: center 20%;
    /* Vuelve a posición desktop */
    background-size: cover;
  }
}


/* ============================================
   FOOTER - SOLO CORRECCIONES MOBILE & TABLET
   ============================================ */

/* TABLET (max-width: 992px) - Redistribución vertical */
@media (max-width: 992px) {
  .site-footer {
    overflow: hidden;
    /* FIX: Evita que se vea el fondo crema */
  }

  .footer-top {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .footer-logo-vertical {
    height: 120px !important;
    order: 1 !important;
    margin-bottom: 0.5rem !important;
  }

  .footer-columns {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 500px !important;
    gap: 2rem !important;
    order: 2 !important;
  }

  /* Hoteles - tamaño proporcional */
  .footer-column.hoteles-column {
    max-width: 100% !important;
    text-align: center !important;
  }

  .footer-column.hoteles-column h3 {
    font-size: 1.1rem !important;
    margin-bottom: 1rem !important;
  }

  /* Newsletter - centrado y mejor distribución */
  .newsletter-column {
    max-width: 100% !important;
    order: 3 !important;
    margin-top: 0 !important;
  }

  .newsletter-content {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1rem !important;
  }

  .footer-cat {
    width: 70px !important;
    margin: 0 auto 0.5rem !important;
  }

  .newsletter-form {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }

  /* Footer inferior - arreglar línea finita */
  .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(0, 0, 0, 0.1) !important;
  }
}

/* MOBILE (max-width: 768px) - Ajustes específicos iPhone */
@media (max-width: 768px) {
  .site-footer {
    padding-top: 1.5rem !important;
  }

  .footer-logo-vertical {
    height: 100px !important;
  }

  .footer-columns {
    gap: 1.5rem !important;
  }

  /* Textos más legibles en móvil */
  .footer-column h3 {
    font-size: 1rem !important;
  }

  .footer-column p,
  .footer-column a,
  .newsletter-text p {
    font-size: 0.9rem !important;
  }

  /* Formulario en columna para móvil */
  .newsletter-form {
    flex-direction: column !important;
    max-width: 300px !important;
  }

  .btn-newsletter {
    width: 100% !important;
    margin-top: 0.5rem !important;
  }

  /* Footer legal - mejor distribución */
  .footer-bottom-inner {
    padding: 0 1rem !important;
  }

  .footer-legal-links {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.8rem !important;
  }

  .footer-bottom-inner>p {
    font-size: 0.8rem !important;
    text-align: center !important;
    line-height: 1.4 !important;
    margin-top: 0.5rem !important;
  }
}

/* MOBILE PEQUEÑO (iPhone específico, max-width: 480px) */
@media (max-width: 480px) {
  .footer-logo-vertical {
    height: 90px !important;
  }

  .footer-cat {
    width: 60px !important;
  }

  .newsletter-text p {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
  }

  .newsletter-form input {
    padding: 0.7rem !important;
    font-size: 0.9rem !important;
  }

  .btn-newsletter {
    padding: 0.7rem !important;
    font-size: 0.9rem !important;
  }

  .footer-legal-links a {
    font-size: 0.8rem !important;
    text-align: center !important;
    display: block !important;
  }
}

/* ============================================
   FOOTER BOTTOM - SOLO MOBILE & TABLET
   ============================================ */

/* TABLET (max-width: 992px) */
@media (max-width: 992px) {

  /* Corrige la estructura duplicada del footer-bottom */
  .footer-bottom {
    background: rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1rem 0 !important;
  }

  .footer-bottom .footer-bottom {
    background: transparent !important;
    /* Evita fondo doble */
    border: none !important;
    padding: 0 !important;
  }

  .footer-bottom-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 0 1rem !important;
  }

  .footer-legal-links {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1rem !important;
    margin-bottom: 0.5rem !important;
  }

  .footer-legal-links li {
    display: inline-block !important;
  }

  .footer-legal-links a {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
  }

  .footer-bottom-inner>p {
    font-size: 0.8rem !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
  }
}

/* MOBILE (max-width: 768px) */
@media (max-width: 768px) {
  .footer-bottom {
    padding: 0.8rem 0 !important;
  }

  .footer-legal-links {
    flex-direction: column !important;
    /* Apilados verticalmente en móvil */
    align-items: center !important;
    gap: 0.5rem !important;
  }

  .footer-legal-links li {
    display: block !important;
  }

  .footer-legal-links a {
    font-size: 0.75rem !important;
  }

  .footer-bottom-inner>p {
    font-size: 0.75rem !important;
    padding: 0 0.5rem !important;
  }
}

/* MOBILE PEQUEÑO (iPhone, max-width: 480px) */
@media (max-width: 480px) {
  .footer-bottom-inner>p {
    font-size: 0.7rem !important;
  }

  .footer-legal-links a {
    font-size: 0.7rem !important;
  }
}

.footer-logo-vertical {
  flex: 0 1 auto;
  /* No crece, pero SÍ se encoge si es necesario */
  max-width: 200px;
  min-width: 100px;
}

/* FIN PARCHE EXTRA FOOTER */


/* ============================================
   HERO FIX: MANTENER CURVA ENTRE 317px Y 671px
   ============================================ */

/* Para el rango problemático específico */
@media (min-width: 317px) and (max-width: 671px) {
  .hero {
    clip-path: ellipse(140% 100% at 50% 0%) !important;
    overflow: hidden !important;
  }

  .hero-media {
    background-size: cover !important;
    background-position: center 28% !important;
  }

  /* Elimina cualquier efecto que cause el "aire" superior */
  .hero-curve {
    display: block !important;
    height: 50px !important;
    border-top-left-radius: 50% 30px !important;
    border-top-right-radius: 50% 30px !important;
  }
}

/* Para pantallas menores a 317px (móviles muy pequeños) */
@media (max-width: 316px) {
  .hero {
    clip-path: ellipse(160% 100% at 50% 0%) !important;
    height: 90vh !important;
    min-height: 500px !important;
  }

  .hero-media {
    background-position: center 32% !important;
  }
}



/* ============================================
   BOOKING CARD - POSICIÓN EN MOBILE/TABLET
   ============================================ */

@media (max-width: 1024px) {
  .hero {
    position: relative;
    min-height: 650px;
  }

  .hero-inner.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-bottom: 4rem;
  }

  .booking {
    align-self: center;
    width: 90%;
    max-width: 550px;
    margin-top: auto;
    margin-bottom: 2rem;
  }

  .booking-card {
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  }
}

/* Tablet específico */
@media (max-width: 1024px) and (min-width: 769px) {
  .booking {
    margin-bottom: 3rem;
  }
}

/* Mobile específico */
@media (max-width: 768px) {
  .hero {
    min-height: 550px;
  }

  .hero-inner.container {
    padding-bottom: 3rem;
  }

  .booking {
    width: 95%;
    margin-bottom: 1.5rem;
  }

  .booking-card {
    padding: 1.2rem;
  }
}

/* En tu archivo CSS, agrega esto al final */
@media (max-width: 768px) {
  .nav-whatsapp {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
  }

  .nav-whatsapp .social-link {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }
}

/* ===== POPUP WHATSAPP ===== */
.whatsapp-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  backdrop-filter: blur(5px);
}

.whatsapp-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.whatsapp-popup-container {
  background: rgba(4, 132, 124, 0.5);
  border-radius: 25px;
  padding: 40px;
  max-width: 500px;
  width: 90%;
  position: relative;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.1);
  transform: translateY(20px);
  transition: transform 0.4s ease;
}

.whatsapp-popup-overlay.active .whatsapp-popup-container {
  transform: translateY(0);
}

/* Botón cerrar (X) */
.popup-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.popup-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: white;
  transform: rotate(90deg);
}

/* Contenido del popup */
.popup-content {
  text-align: center;
  color: white;
}

.popup-icon {
  font-size: 4rem;
  color: white;
  margin-bottom: 20px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.popup-title {
  font-family: "DM Sans", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: white;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.popup-text {
  font-family: "DM Sans", sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 30px;
  opacity: 0.9;
  color: white;
}

/* Botón WhatsApp */
.popup-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 35px;
  background: #25D366;
  color: white;
  border: none;
  border-radius: 15px;
  font-family: "DM Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
  margin-bottom: 20px;
  width: 100%;
  max-width: 350px;
}

.popup-whatsapp-btn:hover {
  background: #1da851;
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(37, 211, 102, 0.5);
}

.popup-whatsapp-btn i {
  font-size: 1.5rem;
}

.popup-note {
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  opacity: 0.8;
  color: white;
  margin-top: 10px;
  font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
  .whatsapp-popup-container {
    padding: 30px 20px;
    width: 95%;
  }

  .popup-title {
    font-size: 1.7rem;
  }

  .popup-text {
    font-size: 1rem;
  }

  .popup-whatsapp-btn {
    padding: 15px 25px;
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .whatsapp-popup-container {
    padding: 25px 15px;
  }

  .popup-title {
    font-size: 1.5rem;
  }

  .popup-icon {
    font-size: 3rem;
  }

  .popup-whatsapp-btn {
    padding: 14px 20px;
    font-size: 1rem;
  }
}

/* =====FIN POPUP WHATSAPP ===== */

/* =========================
   COOKIE BANNER
   ========================= */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
  padding: 1rem 2rem;
  z-index: 9999;
  display: none;
  /* JS will toggle this */
  border-top: 1px solid #f0f0f0;
  font-family: 'DM Sans', sans-serif;
}

.cookie-banner.show {
  display: block;
  animation: slideUp 0.5s ease;
}

.cookie-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.cookie-content p {
  margin: 0;
  font-size: 0.95rem;
  color: #555;
  flex: 1;
}

.cookie-actions {
  display: flex;
  gap: 1rem;
}

.cookie-btn {
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.cookie-accept {
  background-color: var(--ayb-green, #04847b);
  color: white;
}

.cookie-accept:hover {
  background-color: #03665f;
}

.cookie-reject {
  background-color: transparent;
  color: #777;
  border: 1px solid #ddd;
}

.cookie-reject:hover {
  background-color: #f5f5f5;
  color: #333;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

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

@media (max-width: 768px) {
  .cookie-content {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    text-align: center;
  }

  .cookie-actions {
    justify-content: center;
  }
}