/* ===========================
   ZUMAC — Style (global)
   =========================== */
:root{
  /* PALLETA (del nuevo logo) */
  --ink:#083346;          /* texto primario */
  --muted:#5b7786;        /* texto suave */
  --bg:#f5fcff;           /* fondo */
  --card:#ffffff;         /* tarjetas */
  --brand:#0ebdb4;        /* turquesa */
  --brand-2:#0a8fb1;      /* teal profundo */
  --accent:#ff7c5f;       /* naranja atardecer */
  --sun:#ffd166;          /* sol */
  --leaf:#25c07a;         /* verde palma */
  /* extra */
  --shadow:0 18px 44px rgba(8,60,85,.18);
  --radius:18px; --max:1200px;
  --cta-bg:url('../media/10.jpg');
  --logo-url:url('../media/logo.png');
}

*{box-sizing:border-box}
html{overflow-x:hidden;overflow-y:auto}
body{
  margin:0;font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto;
  color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased
}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;}

/* ===== Fondo animado: palmeras + hojas ===== */
#leaves{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0; /* Cambiado a 0 para que esté detrás de todo */
  overflow:hidden
}
.leaf,.palm{position:absolute;top:-40px;opacity:.28;filter:drop-shadow(0 6px 8px rgba(0,0,0,.12))}
.leaf{font-size:18px;animation:fall linear var(--dur) var(--delay) infinite, sway ease-in-out calc(var(--dur)*.5) var(--delay) infinite alternate}
.palm{font-size:34px;opacity:.22;animation:palmDrift linear var(--dur) var(--delay) infinite}
@keyframes fall{to{transform:translateY(110vh)}}
@keyframes sway{from{margin-left:-20px}to{margin-left:20px}}
@keyframes palmDrift{0%{transform:translate(-10vw,-10vh) rotate(0)}100%{transform:translate(110vw,110vh) rotate(8deg)}}

/* ===== Loader mejorado con GIF ===== */
#loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:radial-gradient(1200px 700px at 80% -10%,rgba(255,209,102,.20),transparent 55%),
             radial-gradient(900px 600px at 0% 20%,rgba(10,143,177,.18),transparent 60%),
             linear-gradient(180deg,#e9fbff 0%,#ffffff 100%);
  opacity:1;
  visibility:visible;
  transition:opacity .35s,visibility .35s
}
#loader.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none
}
.logo-loader {
  display: grid;
  place-items: center;
  animation: logoZoom 3s ease-out forwards;
}
.logo-loader img {
  width: 200px; /* Más grande para el GIF */
  height: 200px; /* Más grande para el GIF */
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.15));
}
@keyframes logoZoom {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  20% {
    opacity: 1;
    transform: scale(1.2);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== Topbar ===== */
.topbar{
  position:relative;
  z-index:3;
  background:linear-gradient(90deg,#0a3e57,#0a8fb1);
  color:#e9fbff;
  font-size:.92rem;
  padding:.45rem 1rem
}
.topbar .wrap{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.top-icons{display:flex;align-items:center;gap:.55rem}
.top-icons a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);transition:transform .25s}
.top-icons a:hover{transform:translateY(-2px) scale(1.05)}
.top-icons a svg{fill:#fff}
.lang{display:flex;align-items:center;gap:.45rem}
.lang select{appearance:none;background:#fff;color:#07465a;border-radius:10px;padding:.35rem .6rem;border:1px solid rgba(255,255,255,.4);font-weight:700;cursor:pointer}
.lang .flag{font-size:1.05rem}

/* ===== Header ===== */
header{
  position:sticky;
  top:0;
  z-index:40;
  background:#fff;
  box-shadow:var(--shadow)
}
.nav{max-width:var(--max);margin:0 auto;padding:.7rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.7rem}
.brand-logo{width:48px;height:48px}
.brand-sub{color:var(--brand);font-weight:600}
nav ul{display:flex;list-style:none;margin:0;padding:0;gap:.6rem}
nav a{padding:.55rem .85rem;border-radius:12px;font-weight:600;color:#0b465c;position:relative}
nav a::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.4rem;height:2px;background:linear-gradient(90deg,var(--brand),var(--accent));opacity:0;transform:scaleX(.4);transform-origin:left;transition:transform .25s,opacity .25s}
nav a:hover::after{opacity:1;transform:scaleX(1)}
.btn{appearance:none;border:0;cursor:pointer;border-radius:12px;padding:.85rem 1.1rem;font-weight:700;letter-spacing:.2px;transition:transform .15s, box-shadow .2s}
.btn.primary{background:linear-gradient(135deg,var(--brand),#19d6cc);color:#05363e;box-shadow:0 12px 26px rgba(14,189,180,.35)}
.btn:hover{transform:translateY(-1px)}
.burger{display:none}

/* ===== Slider + Booking ===== */
.hero{
  position:relative;
  overflow:visible;
  z-index:2
}
.slider{
  position:relative;
  width:100%;
  height:88vh;
  max-height:800px;
  min-height:680px
}
.slides{position:absolute;inset:0;display:flex;transition:transform .5s ease}
.slide{min-width:100%;position:relative}
.slide img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.02)}
.slide:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,40,58,.45),rgba(6,40,58,.25))}
.caption{position:absolute;inset:auto auto 18% 6%;color:#fff;max-width:740px;z-index:2}
.kicker{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .7rem;border-radius:999px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);font-weight:600}
.kicker .dot{width:9px;height:9px;border-radius:50%;background:var(--sun)}
.caption h1{margin:.6rem 0 .6rem;font-size:clamp(1.9rem,3.5vw + .5rem,3.4rem);line-height:1.05;font-weight:700;letter-spacing:.2px;text-shadow:0 4px 18px rgba(0,0,0,.25)}
.caption p{font-size:clamp(1rem,1.1vw + .5rem,1.18rem);opacity:.96;font-weight:300}
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:rgba(255,255,255,.9);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--shadow);cursor:pointer;transition:all .2s}
.arrow:hover{background:rgba(255,255,255,1);transform:translateY(-50%) scale(1.05)}
.arrow.left{left:14px}.arrow.right{right:14px}

/* Booking compacto - SOLO DESKTOP */
.desktop-booking{
  position:absolute;
  right:3.2%;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
  width:min(300px,92vw);
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:.8rem;
  /* Quitamos la animación de movimiento */
}

/* Booking móvil - OCULTO EN DESKTOP */
.mobile-booking-section {
  display: none;
  padding-top: 0;
  padding-bottom: 2rem;
}

.mobile-booking {
  width: 100%;
  background:var(--card);
  border:1px solid rgba(8,60,85,.08);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:1.5rem;
  margin-top: 0;
}

.booking h3{margin:.1rem 0 .35rem;font-size:1rem;color:#0a5d63;font-weight:700}
form.grid{display:grid;grid-template-columns:1fr;gap:.5rem;margin-top:.25rem}
.field{display:flex;flex-direction:column;gap:.25rem}
.field label{font-weight:700;font-size:.8rem;color:#0a5160}
.field input,.field select{padding:.7rem .8rem;border-radius:12px;border:1.4px solid rgba(6,68,86,.18);background:#fff;color:#073b47;font-weight:500;outline:none;transition:border-color .2s, box-shadow .2s}
.field input:focus,.field select:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(14,189,180,.2)}
.booking .actions{display:flex;justify-content:flex-end;margin-top:.15rem}

/* Wave */
.wave{position:absolute;left:0;right:0;bottom:-1px;height:90px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="90" viewBox="0 0 1440 90"><path fill="%23f5fcff" d="M0 59l60 8c60 8 180 24 300 18s240-38 360-38 240 32 360 39 240-9 360-20v24H0V59z"/></svg>') center/cover no-repeat;z-index:2}

/* Booking Module Overlay - DESKTOP */
.booking-overlay{
  position:absolute;
  right:3%;
  top:50%;
  transform:translateY(-50%);
  z-index:1000;
  max-width:600px;
  overflow:visible !important;
  width:calc(100% - 6%);
  transition: all 0.4s ease;
  scroll-margin-top: 5vh;
}

/* Animación de atención para el módulo */
@keyframes bookingAttention {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(0, 200, 255, 0));
  }
  20% {
    transform: scale(1.03);
    filter: drop-shadow(0 0 25px rgba(0, 200, 255, 1)) drop-shadow(0 0 50px rgba(0, 200, 255, 0.5));
  }
  40% {
    transform: scale(1.01);
    filter: drop-shadow(0 0 15px rgba(0, 200, 255, 0.6));
  }
  60% {
    transform: scale(1.03);
    filter: drop-shadow(0 0 25px rgba(0, 200, 255, 1)) drop-shadow(0 0 50px rgba(0, 200, 255, 0.5));
  }
  80% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(0, 200, 255, 0.3));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(0, 200, 255, 0));
  }
}

.booking-overlay.attention .hero-search-card{
  animation: bookingAttention 2.9s ease-out !important;
}

/* Permitir overflow durante la animación */
.booking-overlay.attention,
.booking-overlay.attention .modzumac,
.booking-overlay.attention .main-content,
.booking-overlay.attention .hero-section,
.booking-overlay.attention .hero-container{
  overflow: visible !important;
}

/* Estado centrado para pasos 2, 3 y 4 */
.booking-overlay.centered{
  left:50%;
  right:auto;
  transform:translate(-50%, -50%);
  max-width:900px;
  width:90%;
}

/* Ocultar textos del slider cuando módulo está centrado */
/* Fallback con clase JS para compatibilidad */
.caption{
  transition:opacity 0.3s ease;
}

.caption.hidden{
  opacity:0;
  pointer-events:none;
}

/* Soporte moderno con :has() */
@supports selector(:has(*)) {
  .hero:has(.booking-overlay.centered) .caption{
    opacity:0;
    pointer-events:none;
  }
}

/* En desktop, limitar ancho y posicionar a la derecha */
@media (min-width: 992px) {
  .booking-overlay{
    width:min(540px, 45%);
    right:4%;
  }
  /* Ajustar caption para no chocar con módulo */
  .caption{
    max-width:45% !important;
    left:4% !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
  .booking-overlay{
    width:min(480px, 50%);
    right:3%;
  }
  .booking-overlay.centered{
    width:85%;
    max-width:800px;
  }
  .caption{
    max-width:42% !important;
  }
}

/* Mobile - módulo debajo del slider */
@media (max-width: 767px) {
  .hero{
    display:flex;
    flex-direction:column;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }
  .slider{
    height:45vh !important;
    min-height:320px !important;
  }
  .booking-overlay,
  .booking-overlay.centered{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:100% !important;
    padding:1rem;
    margin-top:-40px;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }
  /* Animación visible en móvil */
  .booking-overlay.attention .hero-search-card{
    outline-color: rgba(0, 220, 255, 1) !important;
  }
  .modzumac,
  .modzumac .main-content,
  .modzumac .hero-section,
  .modzumac .hero-container{
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  .caption{
    max-width:90% !important;
    bottom:25% !important;
  }
  /* En móvil siempre mostrar caption */
  .caption.hidden{
    opacity:1 !important;
    pointer-events:auto !important;
  }
  .caption h1{
    font-size:1.4rem !important;
  }
  .caption p{
    font-size:0.9rem !important;
  }
}

/* ===== Secciones ===== */
.section{padding:clamp(3rem,6vw,6rem) 1rem;position:relative;z-index:2}
.wrap{max-width:var(--max);margin:0 auto}
.section h2{font-size:clamp(1.6rem,2.4vw + .6rem,2.4rem);margin:0 0 1rem;color:#0a5066;font-weight:800;letter-spacing:.2px}
.lead{font-size:1.06rem;color:#2b5666;max-width:74ch;font-weight:300}

/* Imagen izq + Iconos texto der */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:1.2rem}
.mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:200px 200px;gap:.6rem}
.mosaic img{width:100%;height:100%;object-fit:cover;border-radius:16px;box-shadow:var(--shadow);transition:transform .35s}
.mosaic img:hover{transform:scale(1.02)}
.iconlist{display:grid;gap:.8rem}
.iconrow{display:flex;gap:.8rem;align-items:flex-start;background:var(--card);border:1px solid rgba(9,80,100,.08);border-radius:16px;padding:1rem;box-shadow:var(--shadow)}
.i{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),#1cd7cd)}
.i svg{width:26px;height:26px;fill:#053e4c}
.h3{font-weight:700}

/* Cómo funciona */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.step{position:relative;background:var(--card);border:1px solid rgba(13,189,180,.14);border-radius:18px;padding:1.1rem;box-shadow:var(--shadow);overflow:hidden;transition:transform .2s}
.step:hover{transform:translateY(-4px)}
.step:before{content:attr(data-step);position:absolute;top:-16px;right:-16px;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#ff9f8d);color:#3c1a14;display:grid;place-items:center;font-weight:800;transform:rotate(15deg)}
.step .tiny{color:var(--muted);font-weight:700;font-size:.84rem}
.step small{color:var(--muted);font-size:.75rem;display:block;margin-top:.3rem}
.floaty{animation:floaty 4.5s ease-in-out infinite}@keyframes floaty{50%{transform:translateY(-10px)}}

/* Nueva sección: video e iconos */
.media-iconos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.iconos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.video-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #000;
}
.video-wrap video {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  display: block;
}

/* Banner */
.banner{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:#052b3a}
.banner img{width:100%;height:260px;object-fit:cover;display:block;filter:brightness(.85)}
.banner .inside{position:absolute;inset:0;display:grid;place-items:center;color:#fff;text-align:center;padding:1rem}
.banner .inside h3{margin:0 0 .4rem;font-size:clamp(1.2rem,1.4vw + .6rem,1.8rem);font-weight:800}

/* Side - imagen con logo en esquina superior derecha */
.side{display:grid;grid-template-columns:1fr 1.1fr;gap:1.2rem;align-items:center}
.image-container {
  position: relative;
  width: 100%;
  height: 360px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.image-logo-corner {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 2;
}
.logo-circle {
  position: relative;
  width: 80px;
  height: 80px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.logo-circle img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}
.bullet{display:flex;gap:.6rem;align-items:flex-start}
.bullet .dot{width:10px;height:10px;border-radius:50%;background:var(--leaf);margin-top:.55rem}

/* Video + KPIs */
.media{display:grid;grid-template-columns:1.1fr 1fr;gap:1.2rem;align-items:center}
.vwrap{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:#000}
.vwrap video{width:100%;height:360px;object-fit:cover;display:block}
.stats{display:grid;gap:.8rem}
.kpi{display:flex;gap:.8rem;align-items:center;background:var(--card);border:1px solid rgba(9,80,100,.08);border-radius:16px;padding:1rem;box-shadow:var(--shadow)}
.kpi strong{font-size:1.35rem;font-weight:800}

/* Bubbles */
.bubbles{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem}
.bub{background:var(--card);border:1px solid rgba(8,60,85,.08);border-radius:16px;padding:.8rem;box-shadow:var(--shadow);display:flex;align-items:center;gap:.7rem;animation:floaty 6s ease-in-out infinite}
.bub:nth-child(odd){animation-delay:.6s}
.bub img{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.bub strong{font-size:.95rem;font-weight:700}
.hover-float{transition:transform .25s, box-shadow .25s}
.hover-float:hover{transform:translateY(-6px);box-shadow:0 22px 40px rgba(8,60,85,.22)}

/* Opiniones mejoradas */
.section.compact{padding-top:2.6rem;padding-bottom:2.6rem}
.section.tight-top{padding-top:2rem}
.testi .wrap{position:relative}
.testi .bgStripe{position:absolute;inset:-20px 0 auto 0;height:140px;z-index:0;background:linear-gradient(90deg,rgba(14,189,180,.14),rgba(10,143,177,.06),rgba(14,189,180,.14));filter:blur(20px);border-radius:40px}
.testi .carousel{position:relative;z-index:1}
.tgroups{position:relative;min-height:290px}
.tgroup{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .5s,transform .5s;position:absolute;left:0;right:0}
.tgroup.active{opacity:1;transform:translateY(0) scale(1);position:relative}
.tcard{background:linear-gradient(180deg,#ffffff 0%,#f7feff 100%);border:1px solid rgba(9,80,100,.12);border-radius:18px;padding:1.1rem;box-shadow:0 18px 36px rgba(8,60,85,.15);min-height:240px;display:flex;flex-direction:column;justify-content:flex-start;position:relative}
.tcard:before{content:"“";position:absolute;top:-8px;right:12px;font-size:64px;color:rgba(14,189,180,.18);font-weight:700;line-height:1}
.thead{display:flex;gap:.8rem;align-items:center;margin-bottom:.4rem}
.avatar{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#05363e;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.thead .stars{color:#ffb400;letter-spacing:1px;font-size:.95rem;font-weight:800}
.tname{font-weight:700}
.tbody{margin-top:.25rem;font-weight:300;color:#244c5d}

/* Galería */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.gallery img{width:100%;height:180px;object-fit:cover;border-radius:14px;box-shadow:var(--shadow);transition:transform .35s, filter .3s}
.gallery img:hover{transform:translateY(-6px);filter:saturate(1.1)}

/* CTA final */
.cta-final{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--cta-bg) center/cover no-repeat;color:#fff}
.cta-final:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,39,55,.55),rgba(0,39,55,.35))}
.cta-final .box{position:relative;padding:3rem 1rem;text-align:center}
.cta-final h3{margin:0 0 .4rem;font-size:clamp(1.5rem,1.6vw + .6rem,2rem);font-weight:800}
.cta-sub{margin:.2rem 0 1rem;font-weight:300}

/* Footer */
footer{
  position: relative;
  z-index: 2;
  background:linear-gradient(180deg,#0b3d53,#082c40);
  color:#d7f2ff
}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1.1fr 1.1fr;gap:1.2rem}
footer a{color:#d7f2ff}
.brand-logo-wrapper {
  position: relative;
  width: 56px;
  height: 56px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.brand-logo-wrapper .brand-logo {
  width: 48px;
  height: 48px;
}
.brand-foot{font-weight:800;color:#fff}
.fmuted{color:#c8e9ff;font-weight:300}
/* Footer contact items - prevent emoji from separating */
footer .fmuted{display:flex;align-items:center;gap:0.35rem}
footer .fmuted span{flex-shrink:0}
.foot-list{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.foot-note{border-top:1px solid rgba(255,255,255,.12);margin-top:1.2rem;padding-top:1rem;color:#bfe8ff}
.developer-credit {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
  color: rgba(200,233,255,.6);
  font-size: 0.85rem;
}

/* ===== Menú móvil overlay ===== */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 100;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
  display: block;
  opacity: 1;
}

.mobile-menu-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  max-width: 320px;
  height: 100%;
  background: white;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.mobile-menu-overlay.active .mobile-menu-container {
  transform: translateX(0);
}

.close-mobile-menu {
  align-self: flex-end;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  margin-bottom: 2rem;
  color: var(--ink);
}

.mobile-logo {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.mobile-logo img {
  width: 48px;
  height: 48px;
}

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

.mobile-nav li {
  margin-bottom: 1rem;
}

.mobile-nav a {
  display: block;
  padding: 0.8rem 0;
  font-weight: 600;
  color: var(--ink);
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  transition: color 0.2s;
}

.mobile-nav a:hover {
  color: var(--brand);
}

.mobile-reserve-btn {
  width: 100%;
  text-align: center;
  margin-top: 1rem;
}

/* ===== Footer móvil y tablet ===== */
.footer-mobile {
  display: none;
}

.footer-mobile-logo {
  text-align: center;
  margin-bottom: 2rem;
}

.footer-logo-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.footer-logo-wrapper .brand-logo {
  width: 90px;
  height: 90px;
  object-fit: contain;
}

.footer-mobile-contact {
  text-align: center;
  margin-bottom: 2rem;
}

.footer-mobile-contact .h4 {
  margin-bottom: 1rem;
  color: #fff;
}

/* ===== Estilos para la página de contacto ===== */
.contact-hero {
  position:relative;
  padding:3.2rem 1rem;
  text-align:center;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(0,39,55,.55), rgba(10,143,177,.35)),
    url('media/11.jpg') center/cover no-repeat;
  box-shadow:var(--shadow);
}

.contact-hero .wrap {
  max-width: var(--max);
  margin: 0 auto;
}

.contact-hero h1 {
  font-size:2rem;
  margin:0 0 .4rem;
  font-weight: 800;
}

.contact-hero .lead {
  color:#eaf8ff;
  font-size: 1.2rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.contact-card {
  background: var(--card);
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(8,60,85,.08);
}

.contact-item {
  margin-bottom: 0.8rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.contact-item strong {
  min-width: 24px;
}

.form-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.form-grid input,
.form-grid textarea {
  padding: 0.8rem;
  border-radius: 12px;
  border: 1.4px solid rgba(6,68,86,.18);
  background: #fff;
  color: #073b47;
  font-weight: 500;
  outline: none;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}

.form-grid input:focus,
.form-grid textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(14,189,180,.2);
}

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

.map-wrap {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  height: 100%;
  min-height: 400px;
}

.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ===== Helpers ===== */
.hover-lift{transition:transform .25s, box-shadow .25s}
.hover-lift:hover{transform:translateY(-6px);box-shadow:0 22px 40px rgba(8,60,85,.22)}

/* ===== Responsive ===== */
@media (max-width:1200px){.flow{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1080px){
  .split,.media,.side,.media-iconos{grid-template-columns:1fr}
  .mosaic{grid-template-rows:180px 180px}
  .bubbles{grid-template-columns:repeat(3,1fr)}
  
  /* Ajustes para tablet */
  .video-wrap video {
    max-height: 300px;
  }
  
  /* Contacto responsive */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (max-width:980px){
  .slider{height:72vh;min-height:520px}
  .desktop-booking{display:none !important} /* Ocultamos booking en móvil y tablet */
  .mobile-booking-section{display:block} /* Mostramos booking móvil */
  .arrow{display:none}
  
  /* Footer para tablet y móvil */
  .footer-desktop {
    display: none;
  }
  
  .footer-mobile {
    display: block;
  }
  
  footer .cols {
    grid-template-columns: 1fr;
  }
  
  /* Ajustes para tablet */
  .video-wrap video {
    max-height: 280px;
  }
  
  /* Mostrar burger en tablet y móvil */
  .burger {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #eefbff;
    border: 1px solid rgba(13,189,180,.25);
    padding: .6rem .8rem;
    border-radius: 12px;
    font-weight: 800;
    color: #0a5b60;
    cursor: pointer;
  }
  
  nav ul {
    display: none;
  }
}
@media (max-width:640px){
  .gallery{grid-template-columns:1fr 1fr}
  .tgroup{grid-template-columns:1fr}
  .bubbles{grid-template-columns:repeat(2,1fr)}
  .caption{inset:auto 6% 14% 6%}
  .flow{grid-template-columns:1fr}
  .logo-loader img {
    width: 150px; /* Un poco más pequeño en móvil */
    height: 150px;
  }
  
  /* Ajustes para móvil */
  .video-wrap video {
    max-height: 250px;
  }
  
  /* Asegurar que el formulario de escritorio nunca se vea en móvil */
  .desktop-booking {
    display: none !important;
  }
  
  /* Footer móvil */
  .footer-logo-wrapper {
    width: 100px;
    height: 100px;
  }
  
  .footer-logo-wrapper .brand-logo {
    width: 75px;
    height: 75px;
  }
  
  /* Contacto móvil */
  .contact-hero {
    padding: 2rem 1rem;
  }
  
  .contact-hero h1 {
    font-size: 1.6rem;
  }
  
  .contact-hero .lead {
    font-size: 1rem;
  }
  
  .contact-card {
    padding: 1rem;
  }
  
  .form-grid {
    gap: 0.8rem;
  }
  
  .map-wrap {
    min-height: 300px;
  }
  
  /* Ajuste del CTA final en contacto para móvil */
  .cta-final .btn {
    width: 100%;
    justify-content: center;
  }
}
@media (prefers-reduced-motion:reduce){
  .slides{transition:none}.leaf,.palm,.floaty,.bub{animation:none}
}

/* ========== UTILITY CLASSES (Migration-ready) ========== */

/* Form utilities */
.form-actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.btn-flex {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.btn-email {
  background: #eefbff;
  border: 1px solid rgba(13, 189, 180, .25);
  font-weight: 800;
  color: #0a5b60;
}

/* Dividers */
.divider-light {
  border: 0;
  border-top: 1px solid rgba(8, 60, 85, .12);
  margin: .8rem 0;
}

/* Spacing utilities */
.pb-2 { padding-bottom: 2rem; }
.pt-0 { padding-top: 0; }
.mb-sm { margin-bottom: .6rem; }
.deal-sub { margin: .2rem 0 1rem; }