:root{--azul:#035aa6;--turq:#00b4d8;--osc:#032540;--arena:#f6fbfd;--wa:#25d366;--mega-sky:#0049fc;--mega-night:#051D2E}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
html{scroll-behavior:smooth}
body{background:var(--arena);color:#223}

/* NAV */
header{position:fixed;top:0;width:100%;z-index:900;background:rgba(3,37,64,.92);backdrop-filter:blur(8px)}
nav{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem}
.logo{color:#fff;font-weight:800;font-size:1.25rem}.logo span{color:var(--turq)}
nav ul{display:flex;gap:1.1rem;list-style:none}
nav a{color:#e6f4ff;text-decoration:none;font-size:.86rem;font-weight:600}
nav a:hover{color:var(--turq)}
nav a.nav-login-btn{background:var(--turq);color:#fff;padding:.4rem .9rem;border-radius:50px;transition:.2s}
nav a.nav-login-btn:hover{background:#fff;color:var(--osc)}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer}
@media(max-width:900px){nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--osc);flex-direction:column;padding:1rem}.nav-open ul{display:flex}.menu-btn{display:block}}

/* ═══════════════════════════════════════
   HERO VIDEO SLIDER (estilo Megatravel)
═══════════════════════════════════════ */
.hero-slider{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  min-height:480px;
  overflow:hidden;
  background:var(--mega-night);
  margin-top:56px; /* altura del nav */
}
@media(max-width:900px){
  .hero-slider{margin-top:48px;min-height:56vw}
}

/* Cada slide ocupa todo el contenedor */
.hs-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1s ease;
  pointer-events:none;
  z-index:0;
}
.hs-slide.active{
  opacity:1;
  pointer-events:auto;
  z-index:1;
}

/* Video de fondo */
.hs-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Overlay oscuro sutil */
.hs-slide::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(5,29,46,.75) 30%, transparent 70%);
  z-index:1;
}

/* Info de cada slide (título + precio + botones) */
.hs-info{
  position:absolute;
  bottom:clamp(12px,5vw,70px);
  left:clamp(12px,5vw,100px);
  z-index:2;
  max-width:min(600px, 90vw);
}

.hs-titulo{
  font-size:clamp(1.2rem,3.5vw,3.2rem);
  font-weight:800;
  color:#fff;
  line-height:1.1;
  margin-bottom:.5em;
  text-shadow:0 5px 6px rgba(13,13,13,.7);
}

/* Caja blanca de precio */
.hs-precio-box{
  display:inline-flex;
  align-items:center;
  background:#fff;
  border-radius:10px;
  padding:.4rem .8rem;
  gap:.8rem;
  margin-bottom:.6em;
}
.hs-precio-left{
  border-right:2px solid var(--mega-night);
  padding-right:.8rem;
}
.hs-desde{
  font-size:clamp(.8rem,1.8vw,1.4rem);
  font-weight:700;
  color:var(--mega-night);
  line-height:1.1;
}
.hs-desde strong{font-size:clamp(1rem,2.2vw,1.7rem)}
.hs-hab{
  font-size:clamp(.55rem,.9vw,.72rem);
  color:var(--mega-night);
  font-weight:700;
  margin-top:.2em;
}
.hs-dias{
  text-align:center;
  line-height:1.2;
}
.hs-dias p{
  font-size:clamp(.75rem,1.3vw,1.1rem);
  font-weight:700;
  color:var(--mega-night);
}

/* Botones */
.hs-btns{display:flex;gap:.5rem;flex-wrap:wrap}
.hs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:clamp(110px,15vw,220px);
  height:clamp(38px,5vw,65px);
  border-radius:10px;
  font-size:clamp(.7rem,1.2vw,1.2rem);
  font-weight:700;
  text-decoration:none;
  transition:.2s;
}
.hs-btn:hover{transform:scale(1.04)}
.hs-btn-cotiza{background:#fff;color:var(--mega-night)}
.hs-btn-ver{background:var(--mega-sky);color:#fff}

/* Dots de navegación */
.hs-dots{
  position:absolute;
  bottom:clamp(8px,1.5vw,22px);
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  gap:.4rem;
}
.hs-dot{
  height:8px;
  border-radius:99px;
  background:rgba(255,255,255,.5);
  width:8px;
  border:none;
  cursor:pointer;
  transition:.3s;
  padding:0;
}
.hs-dot.active{
  background:#fff;
  width:32px;
}
.hs-dot:hover{background:rgba(255,255,255,.8)}


/* SECCIONES */
section{padding:4.5rem 1rem}
.blanco{background:#fff}
.wrap{max-width:1200px;margin:auto}
h2.titulo{font-size:1.9rem;color:var(--osc);margin-bottom:.4rem}
h2.titulo small{display:block;font-size:.95rem;color:var(--turq);font-weight:600;letter-spacing:2px;text-transform:uppercase}
.sub{color:#567;margin-bottom:2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.6rem}
.card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 8px 26px rgba(3,37,64,.10);display:flex;flex-direction:column;transition:.3s}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(3,37,64,.18)}
.card .foto{height:180px;background:linear-gradient(135deg,var(--turq),var(--azul)) center/cover no-repeat;position:relative}
.badge{position:absolute;top:12px;left:12px;background:#ff5d5d;color:#fff;font-size:.68rem;font-weight:800;padding:.3rem .7rem;border-radius:50px;letter-spacing:1px}
.badge.promo{left:auto;right:12px;background:var(--wa)}
.card .cuerpo{padding:1.2rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.card h3{color:var(--osc);font-size:1.05rem}
.card .det{font-size:.85rem;color:#567}
.card .incl{font-size:.78rem;color:var(--turq);font-weight:600}
.precio{font-size:1.25rem;font-weight:800;color:var(--azul)}
.precio small{display:block;font-size:.72rem;color:#789;font-weight:400}
.card .acciones{display:flex;gap:.5rem;margin-top:auto;padding-top:.8rem}
.card .acciones .btn{padding:.55rem 1rem;font-size:.8rem;flex:1;text-align:center}
.btn{display:inline-block;padding:.85rem 1.7rem;border-radius:50px;text-decoration:none;font-weight:600;cursor:pointer;border:0;font-size:.95rem;transition:.25s}
.btn-primary{background:var(--turq);color:#fff;box-shadow:0 6px 20px rgba(0,180,216,.45)}
.btn-primary:hover{transform:translateY(-3px)}
.btn-ghost{background:transparent;color:#fff;border:2px solid #fff;margin-left:.6rem}
.btn-ghost:hover{background:#fff;color:var(--osc)}
.btn-wa{background:var(--wa);color:#fff}

/* CONTACTO */
#contacto{background:var(--osc);color:#dff}
#contacto h2{color:#fff}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem;margin-top:2rem}
.c-item{background:rgba(255,255,255,.06);border-radius:14px;padding:1.4rem;text-align:center}
.c-item .ico{font-size:2rem}.c-item a{color:var(--turq);text-decoration:none;font-weight:600}
footer{background:#021a2e;color:#9cf;text-align:center;padding:1.2rem;font-size:.8rem}

/* WHATSAPP FLOTANTE */
.wa-float{position:fixed;bottom:1.2rem;left:1.2rem;z-index:950;background:var(--wa);color:#fff;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.7rem;text-decoration:none;box-shadow:0 8px 22px rgba(0,0,0,.3)}

/* CHATBOT */
.chat-float{position:fixed;bottom:1.2rem;right:1.2rem;z-index:950;background:var(--azul);color:#fff;width:60px;height:60px;border-radius:50%;border:0;font-size:1.6rem;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.chat-panel{position:fixed;bottom:6rem;right:1.2rem;z-index:960;width:min(380px,calc(100vw - 2rem));height:min(560px,80vh);background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.35);display:none;flex-direction:column;overflow:hidden}
.chat-panel.abierto{display:flex}
.chat-head{background:linear-gradient(90deg,var(--azul),var(--turq));color:#fff;padding:.9rem 1rem;display:flex;gap:.7rem;align-items:center}
.chat-head .av{width:42px;height:42px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.chat-head b{display:block;font-size:.95rem}.chat-head small{font-size:.72rem;opacity:.9}
.chat-head .cerrar{margin-left:auto;background:none;border:0;color:#fff;font-size:1.3rem;cursor:pointer}
.chat-msgs{flex:1;overflow-y:auto;padding:1rem;background:#eef6fa;display:flex;flex-direction:column;gap:.55rem}
.msg{max-width:82%;padding:.6rem .85rem;border-radius:14px;font-size:.85rem;line-height:1.45;white-space:pre-line}
.msg.bot{background:#fff;color:#234;border-bottom-left-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.07)}
.msg.user{background:var(--azul);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg a{color:var(--azul)}
.qr{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1rem .6rem;background:#eef6fa}
.qr button{background:#fff;border:1.5px solid var(--turq);color:var(--azul);border-radius:50px;padding:.4rem .8rem;font-size:.75rem;font-weight:600;cursor:pointer}
.qr button:hover{background:var(--turq);color:#fff}
.chat-input{display:flex;border-top:1px solid #dde}
.chat-input input{flex:1;border:0;padding:.9rem;font-size:.9rem;outline:none}
.chat-input button{background:var(--turq);border:0;color:#fff;padding:0 1.2rem;font-size:1.1rem;cursor:pointer}

/* ══════════════════════════════════════════════════════
   🎪 MEGA OFERTAS CARRUSEL (Estilo Megatravel)
══════════════════════════════════════════════════════ */
.mega-ofertas-section{
  background: var(--mega-night);
  padding: 4rem 0 3.5rem;
}
.mega-ofertas-section .titulo-white{ color: #fff; }
.mega-ofertas-section .sub-white{ color: rgba(255,255,255,.7); }
.mega-ofertas-section .wrap{ padding: 0 1rem; max-width: 1200px; margin: 0 auto; }
.mo-carrusel-wrapper{
  position: relative;
  margin-top: 2rem;
  padding: 0 55px;
}
.mo-track-outer{
  overflow: hidden;
  border-radius: 12px;
}
.mo-track{
  display: flex;
  gap: 14px;
  transition: transform .45s ease-out;
  will-change: transform;
}
.mo-card{
  flex-shrink: 0;
  width: 220px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
}
.mo-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}
.mo-card-img-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 9/15;
  background: #032540;
  overflow: hidden;
}
.mo-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mo-card-tag{
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(5,29,46,.85);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}
.mo-card-price{
  padding: .7rem .8rem;
  background: var(--mega-sky);
  color: #fff;
  margin-top: auto;
}
.mo-card-price p{ margin: 0; line-height: 1.25; }
.mo-card-price .mo-desde{ font-size: .72rem; font-weight: 400; opacity: 0.9; }
.mo-card-price .mo-precio{ font-size: .95rem; font-weight: 800; margin: 2px 0; }
.mo-card-price .mo-hab{ font-size: .65rem; opacity: .85; }
.mo-prev, .mo-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,.2);
  border: 2px solid rgba(255,255,255,.5);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
}
.mo-prev{ left: 6px; }
.mo-next{ right: 6px; }
.mo-prev:hover, .mo-next:hover{ background: rgba(255,255,255,.45); }

/* ══════════════════════════════════════════════════════
   📘 FACEBOOK FEED SECTION
══════════════════════════════════════════════════════ */
#facebook { background: #fff; }

.fb-feed-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: 1.5rem;
}

/* Widget oficial */
.fb-widget-wrap {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(3,37,64,0.10);
  min-height: 300px;
  background: #f0f2f5;
  display: flex;
  align-items: stretch;
}
.fb-widget-wrap .fb-page {
  width: 100% !important;
}

/* Panel de tarjetas personalizadas */
.fb-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fb-api-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.fb-api-badge {
  background: #1877f2;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: 50px;
}
.fb-ver-mas {
  color: #1877f2;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}
.fb-ver-mas:hover { text-decoration: underline; }

/* Placeholder (sin API) */
.fb-placeholder {
  background: #f0f4fb;
  border: 2px dashed #b8d0ee;
  border-radius: 14px;
  padding: 2rem;
  text-align: center;
  color: #556;
  font-size: 0.88rem;
  line-height: 1.6;
}
.fb-placeholder-ico { font-size: 2.5rem; margin-bottom: 0.8rem; }
.fb-placeholder-hint {
  margin-top: 1.2rem;
  font-size: 0.78rem;
  color: #889;
  line-height: 1.5;
}

/* Grid de tarjetas (Graph API activa) */
.fb-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.fb-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(3,37,64,0.08);
  text-decoration: none;
  color: #223;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.fb-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(3,37,64,0.14); }
.fb-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  background-color: #e8f0fe;
}
.fb-card-body { padding: 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; }
.fb-card-date { font-size: 0.72rem; color: #1877f2; font-weight: 600; }
.fb-card-text { font-size: 0.82rem; color: #334; line-height: 1.45; flex: 1; }
.fb-card-link { font-size: 0.78rem; color: #1877f2; font-weight: 700; margin-top: 0.3rem; }

/* Guía de configuración API */
.fb-api-guide {
  margin-top: 2rem;
  border: 1px solid #cce0f5;
  border-radius: 12px;
  overflow: hidden;
}
.fb-api-guide summary {
  padding: 0.9rem 1.2rem;
  background: #e8f0fe;
  font-size: 0.88rem;
  font-weight: 600;
  color: #035aa6;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.fb-api-guide summary::-webkit-details-marker { display: none; }
.fb-api-guide[open] summary { border-bottom: 1px solid #cce0f5; }
.fb-guide-body {
  padding: 1.2rem 1.5rem;
  font-size: 0.85rem;
  color: #334;
  line-height: 1.7;
}
.fb-guide-body ol { padding-left: 1.2rem; }
.fb-guide-body li { margin-bottom: 0.6rem; }
.fb-guide-body a { color: #1877f2; font-weight: 600; }
.fb-guide-body code { background: #e8f0fe; padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.82rem; color: #035aa6; }
.fb-guide-note { margin-top: 1rem; background: #f0f8ec; border-left: 3px solid #25d366; padding: 0.7rem 1rem; border-radius: 0 8px 8px 0; font-size: 0.82rem; color: #2b6e1f; }

/* Responsive Facebook */
@media (max-width: 900px) {
  .fb-feed-layout { grid-template-columns: 1fr; }
  .fb-cards-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .fb-cards-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   📱 MEJORAS RESPONSIVE INTEGRALES
══════════════════════════════════════════════════════ */
@media(max-width: 900px){
  nav ul{
    border-bottom: 2px solid var(--turq);
  }
}
@media(max-width: 768px){
  .logo{ font-size: 1.1rem; }
  .hero-slider{
    margin-top: 50px;
    aspect-ratio: auto;
    min-height: 520px;
    height: 80vh;
  }
  .hs-titulo{ font-size: clamp(1.2rem, 5vw, 1.8rem); }
  .hs-precio-box{ padding: .35rem .6rem; gap: .6rem; }
  .hs-desde{ font-size: .8rem; }
  .hs-desde strong{ font-size: 1.05rem; }
  .hs-dias p{ font-size: .75rem; }
  .hs-hab{ font-size: .58rem; }
  .hs-btn{ min-width: 105px; height: 42px; font-size: .78rem; border-radius: 8px; }
  .hs-info{ left: 16px; bottom: 45px; }

  section{ padding: 3.2rem 1rem; }
  h2.titulo{ font-size: 1.6rem; }
  .sub{ margin-bottom: 1.4rem; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }

  .mo-carrusel-wrapper{ padding: 0 40px; }
  .mo-card{ width: 175px; }
  .mo-prev, .mo-next{ width: 36px; height: 36px; font-size: 1.4rem; }

  .contact-grid{ grid-template-columns: 1fr 1fr; }
}
@media(max-width: 500px){
  .hero-slider{
    min-height: 480px;
    height: 85vh;
  }
  .hs-btns{ gap: .4rem; }
  .hs-btn{ min-width: 95px; height: 38px; font-size: .72rem; }
  .hs-info{ left: 12px; bottom: 35px; right: 12px; }
  .hs-dots{ bottom: 12px; }

  .mo-carrusel-wrapper{ padding: 0 32px; }
  .mo-card{ width: 145px; }
  .mo-prev{ left: 2px; }
  .mo-next{ right: 2px; }
  .mo-card-price .mo-precio{ font-size: .82rem; }

  .contact-grid{ grid-template-columns: 1fr; }
  .chat-panel{ width: calc(100vw - 1.5rem); right: 0.75rem; bottom: 5.5rem; height: 75vh; }
  .wa-float{ width: 50px; height: 50px; font-size: 1.5rem; bottom: 1rem; left: 1rem; }
  .chat-float{ width: 52px; height: 52px; font-size: 1.4rem; bottom: 1rem; right: 1rem; }
}