/* ============================
   RESET
============================ */
* {margin:0;padding:0;box-sizing:border-box;}
body {font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; line-height:1.5; color:#0f172a; background:#fff; overflow-x:hidden;}
a {text-decoration:none; color:inherit;}
ul {list-style:none;}
img {max-width:100%; display:block;}

/* ============================
   VARIABLES
============================ */
:root{
  --accent:#0b7285;
  --accent-hover:#095a6d;
  --muted:#6b7280;
  --radius:12px;
  --header-footer-bg:#0b7285;
  --header-footer-color:#fff;
}

/* ============================
   HEADER
============================ */
.site-header {
  background: var(--header-footer-bg);
  color: var(--header-footer-color);
  position: fixed;
  width: 100%;
  top:0;
  z-index:999;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
}
.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1200px;
  margin:0 auto;
  padding:12px 20px;
}
.site-header .logo img { max-height:140px; width:auto; }

/* MENÚ PRINCIPAL */
.main-nav { display:flex; align-items:center; gap:16px; }
.menu { display:flex; gap:8px; align-items:center; font-size:0.95rem; flex-wrap:nowrap; }
.menu li a { color:#fff; font-weight:600; padding:8px 10px; border-radius:8px; display:inline-block; transition:0.25s; }
.menu li a:hover { background: rgba(255,255,255,0.08); }
.menu-toggle { display:none; cursor:pointer; color:#fff; font-size:1.6rem; }

/* BOTÓN RESERVAR */
.menu-book { margin-left:16px; }
.btn-book { background:#f59e0b; color:#fff; padding:8px 14px; border-radius:10px; font-weight:700; border:none; cursor:pointer; transition:0.25s; }
.btn-book:hover { background:#d48806; }

/* ============================
   HERO
============================ */
.hero {
  min-height:70vh;
  background: url('assets/BG1.webp') center/cover no-repeat;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding-top:110px;
}
.hero-content h1 { font-size:2.8rem; color:#fff; text-shadow:0 4px 18px rgba(0,0,0,0.7); margin-bottom:0.6rem; }
.hero-content p { font-size:1.3rem; color:#fff; margin-bottom:1.2rem; }
.hero-content .btn-book { font-size:1rem; padding:10px 18px; }

/* ============================
   SECCIONES (GENERAL)
============================ */
.section {
  padding:56px 20px;
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
}
.section h2 {
  width:100%;
  font-size:2rem;
  text-align:center;
  margin-bottom:24px;
  color: var(--accent);
}
.section-text {
  color:var(--muted);
  margin-bottom:1rem;
  font-size:1.1rem;
  text-align:left;
  flex:1 1 45%;
}
.section-img {
  flex:1 1 45%;
  max-width:100%;
}
.section-img img {
  width:100%;
  height:350px;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:0 8px 28px rgba(0,0,0,0.18);
  transition:transform 0.3s ease;
}
.section-img img:hover { transform:scale(1.03); }

/* BLOQUES IZQUIERDA / DERECHA */
.block-left .section-img { order:1; }
.block-left .section-text { order:2; margin-left:24px; }
.block-right .section-img { order:2; }
.block-right .section-text { order:1; margin-right:24px; }

/* ============================
   NUESTRAS CABAÑAS
============================ */
.cabanas-gallery { 
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas */
  gap: 20px;
  justify-items: center;
  margin-top: 12px;
}
.cabaña { 
  text-align: center; 
}
.cabaña h3 { font-size:1.1rem; margin-bottom:10px; font-weight:700; color:#0b7285; }
.cabaña img {
  border-radius:12px;
  width:100%;
  height:280px;
  object-fit:cover;
  cursor:pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow:0 6px 20px rgba(0,0,0,0.15);
}
.cabaña img:hover { transform:scale(1.05); box-shadow:0 12px 28px rgba(0,0,0,0.25); }

/* ============================
   GALERÍA GENERAL
============================ */
.gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 24px;
}

.gallery a {
  width: 100%;
  max-width: 1200px; /* ancho máximo deseado */
  display: flex;
  justify-content: center;
}

.gallery img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.gallery img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}


/* ============================
   SERVICIOS
============================ */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Tres columnas y ajuste automático en pantallas pequeñas */
  gap: 20px;
  justify-items: center;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}

.service-desc-long, .service-lead { 
  margin-top: 12px; 
  color: var(--muted); 
  font-size: 1rem; 
  max-width: 800px; /* Limita el ancho máximo */
  text-align: center; /* Centra el texto */
  margin: 12px auto; /* Centra en el contenedor */
}

.servicio {
  flex: 0 1 calc(33.333% - 20px);  /* Esto asegura que los íconos estén en una sola fila y tengan 3 elementos por fila */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  transition: 0.3s;
  box-sizing: border-box;
}

.servicio img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.servicio h4 {
  font-size: 1rem;
  margin: 0;
  color: #0b7285;
}

.servicio-desc {
  font-size: 0.95rem;
  color: #334155;
}

.servicio:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-4px);
}

@media (max-width:768px) {
  .servicio {
    flex: 0 1 48%; /* En pantallas más pequeñas, los íconos se ajustan a dos por fila */
  }
  
  .service-desc-long, .service-lead {
    max-width: 100%; /* El texto ocupará el 100% en pantallas pequeñas */
  }
}


/* ============================
   FORMULARIO
============================ */
form { max-width:520px; margin-top:12px; display:flex; flex-direction:column; gap:10px; }
input, textarea { padding:10px; border-radius:10px; border:1px solid #e5e7eb; }
button[type="submit"] { background:var(--accent); color:#699; padding:10px 14px; border-radius:10px; border:none; cursor:pointer; font-weight:700; transition:0.25s; }
button[type="submit"]:hover { background:var(--accent-hover); }

/* ============================
   MAPA
============================ */
.map-container {
  width: 100%; /* El contenedor ocupará todo el ancho del contenedor padre */
  max-width: 1200px; /* Limita el ancho máximo */
  margin: 16px auto; /* Centra el contenedor */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.map-container iframe {
  width: 100%; /* El iframe ocupa el 100% del ancho */
  height: 400px; /* Ajusta la altura del mapa */
  border: none;
}


/* ============================
   FOOTER
============================ */
footer { background: var(--header-footer-bg); color: var(--header-footer-color); padding:28px 16px; }
.footer-inner { max-width:1200px; margin:0 auto; }
.footer-top { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.footer-contact { flex:1 1 50%; }
.footer-contact .footer-brand { font-weight:700; font-size:1.1rem; margin-bottom:6px; color:#fff; }
.footer-contact p, .footer-contact a { color:#f3f4f6; margin:4px 0; font-size:0.95rem; }
.footer-social { flex:0 1 200px; text-align:right; }
.footer-social p { color:#f3f4f6; margin-bottom:8px; font-weight:600; }
.footer-social a img { height:28px; width:auto; margin-left:8px; vertical-align:middle; }
.footer-bottom { text-align:center; margin-top:18px; color:#e6eef1; font-size:0.95rem; }

/* ============================
   WIDGET WHATSAPP
============================ */
.whatsapp-widget { position:fixed; bottom:20px; right:20px; z-index:9999; width:56px; height:56px; display:flex; align-items:center; justify-content:center; background:#25d366; border-radius:50%; box-shadow:0 8px 20px rgba(0,0,0,0.25); }
.whatsapp-widget img { width:60%; height:60%; object-fit:contain; }

/* ============================
   RESPONSIVE
============================ */
@media (max-width:1024px){
  .section { padding:40px 18px; }
  .cabaña img { height:220px; }
}

@media (max-width:768px){
  .header-inner { padding:10px 14px; }
  .menu { display:none; position:absolute; top:64px; right:14px; background:rgba(7,21,33,0.95); padding:12px; border-radius:8px; flex-direction:column; }
  .menu.show { display:flex; }
  .menu-toggle { display:block; }
  .section { padding:28px 14px; flex-direction:column; }
  .section-img, .section-text { flex:0 1 100%; margin:0; text-align:center; }
  .cabaña { flex: 0 1 100%; }
  .servicio { flex: 0 1 48%; }
  .footer-social { text-align:left; }
}

/* Contenedor del widget Aloha */
#aloha-widget-container {
  max-width: 1200px;   /* Limita el ancho en desktop */
  margin: 32px auto;   /* Centra el bloque */
  padding: 0 12px;     
  height: 600px;       /* Altura para desktop */
  overflow: auto;      /* Permite scroll si es necesario */
}

/* Forzar que el iframe ocupe el 100% del contenedor */
#aloha-widget iframe {
  width: 100% !important;
  height: 100% !important;
}

/* Ajuste para móviles */
@media (max-width: 480px){
  #aloha-widget-container {
    height: 400px;  /* Menor altura en celulares */
  }
}
/* ============================
   WIDGET ALOHA RESPONSIVE
============================ */
#aloha-widget {
  width: 100%;
  max-width: 500px;  /* ancho máximo en escritorio */
  height: 80vh;      /* altura máxima relativa a la pantalla */
  overflow-y: auto;  /* agrega scroll si el contenido es más grande */
  margin: 0 auto;    /* centra el widget */
}

@media (max-width: 768px) {
  #aloha-widget {
    width: 95%;
    height: 70vh;    /* altura visible suficiente en celular */
    max-height: 90vh;
  }
}