:root{
  --primary:#246BFD; --secondary:#1E293B; --bg:#F8FAFC; --footer:#0F172A;
  --grad-a:#27C5A5; --grad-b:#C0D236; --radius:1.25rem; --shadow:0 10px 30px rgba(2,10,28,.08);
  --nav-offset: 140px; /* JS ajusta a la altura real del header */
}

/* ===== Base ===== */
html,body{
  margin:0; padding:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:#0f172a; background:#fff;
}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ===== Botones ===== */
.btn{
  display:inline-flex;gap:.5rem;align-items:center;font-weight:600;
  padding:.9rem 1.2rem;border-radius:999px;transition:.25s;cursor:pointer;text-decoration:none
}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}

/* ===== Utilidades ===== */
.tag{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border-radius:999px;background:#eef2ff;color:#1e3a8a;font-weight:600}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}
.section{padding:88px 0}
.section-light{background:var(--bg)}
.muted{color:#475569}
.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:991px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.grid-3,.grid-2{grid-template-columns:1fr}}
.h1{font-size:clamp(2.2rem,4vw,4rem);line-height:1.05;font-weight:800}
.h2{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800}
.h3{font-size:1.2rem;font-weight:800}
.grad-text{background:linear-gradient(90deg,var(--grad-a),var(--grad-b));-webkit-background-clip:text;background-clip:text;color:transparent}
[data-animate]{opacity:0;transform:translateY(24px)}
html{scroll-behavior:smooth}

/* ===== Hero ===== */
.hero{
  position:relative;min-height:100vh;display:grid;place-items:center;color:#fff;
  overflow:hidden;          /* FIX seam */
  isolation:isolate;        /* FIX seam */
  will-change:transform;    /* pista compositor */
}
.hero::after{
  content:"";position:absolute;inset:-1px 0 -1px 0; /* FIX seam: estira 1px */
  background:rgba(0,0,0,.45);
}
.hero-content{position:relative;z-index:2;text-align:center}
.hero-sub{color:#e2e8f0;margin:18px auto 30px;max-width:760px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-bg{
  position:absolute;inset:0;object-fit:cover;width:100%;height:100%;
  will-change:transform; transform:translateZ(0); backface-visibility:hidden; /* FIX seam */
}

/* ===== NAVBAR fijo con blur ===== */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:60;
  background:rgba(15,23,42,.35);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:12px 16px; gap:.6rem;
}
.nav a{color:#e2e8f0;text-decoration:none;font-weight:600}
.nav a:hover{color:#fff}

/* Logo a la izquierda */
.nav-logo{
  position:absolute; left:24px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
}
.nav-logo img{
  width:96px; height:96px; border-radius:14px; object-fit:cover;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}

/* Menú (desktop) */
.nav-menu{
  display:flex; gap:20px; align-items:center; justify-content:center; flex-wrap:wrap;
  font-weight:700;
}

/* Botón hamburguesa (oculto en desktop) */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:44px;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.22);
  background:transparent;color:#e2e8f0;cursor:pointer
}
.nav-toggle:hover{background:rgba(255,255,255,.06)}
.nav-toggle ion-icon{font-size:22px}

/* Compensación del header fijo */
body{padding-top:var(--nav-offset)}
section{scroll-margin-top:calc(var(--nav-offset) + 16px)}

/* ===== Buscador (iframe) ===== */
.iframe-wrap{width:100%;max-width:420px;margin:0 auto}
.iframe-wrap iframe{width:100%;height:380px;border:0;border-radius:12px;overflow:hidden}

/* ===== Servicios ===== */
.service{position:relative;padding:22px;text-align:center}
.service::before{
  content:"";position:absolute;left:0;right:0;top:0;height:8px;
  background:var(--accent,#6366f1);border-top-left-radius:12px;border-top-right-radius:12px;
}
.service .tag{margin:0 auto .5rem}
.service .tag ion-icon{font-size:18px;vertical-align:middle}
.accent-blue   {--accent:#3b82f6}
.accent-amber  {--accent:#f59e0b}
.accent-emerald{--accent:#10b981}
.accent-violet {--accent:#8b5cf6}
.accent-rose   {--accent:#f43f5e}
.accent-cyan   {--accent:#06b6d4}

/* ===== Destinos ===== */
.dest-card{position:relative;height:320px;border-radius:18px;overflow:hidden}
.dest-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.05)}
.dest-card .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.65))}
.dest-card .title{position:absolute;left:20px;bottom:22px;color:#fff;font-size:1.25rem;font-weight:800}
.subtitle-card{font-weight:600;opacity:.85;font-size:.95rem}

/* ===== Nosotros ===== */
.about-media{position:relative}
.about-bubble{position:absolute;right:-18px;top:-18px;background:var(--primary);color:#fff;border-radius:22px;padding:.6rem 1rem;font-weight:700;box-shadow:var(--shadow)}

/* ===== Footer ===== */
.footer{background:var(--footer);color:#cbd5e1}
.footer a{color:#e2e8f0;text-decoration:none}
.footer a:hover{color:#fff}
.list{list-style:none;padding:0;margin-top:10px;display:grid;gap:8px}
.copy{margin-top:30px;border-top:1px solid rgba(255,255,255,.1);padding-top:16px;text-align:center}
.footer .social{display:flex; gap:12px; margin-top:12px; align-items:center}
.footer .social a{
  display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.18); border-radius:999px; text-decoration:none
}
.footer .social a:hover{ background:rgba(255,255,255,.06) }

/* ===== Mega Conexión ===== */
.mega{padding:18px}
.mega-grid{display:flex; gap:20px; align-items:flex-start}
#framemenu{
  margin:0; padding:5px; width:220px; flex:0 0 220px;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
}
#framemenu li{list-style:none}
#framemenu li a{
  color:#333; text-decoration:none; background:#EAEAEA; display:block;
  margin:6px 0; padding:10px 12px; border:1px solid #CCC; border-radius:8px; font-size:14px;
}
#framemenu li a:hover{background:#28B1DF;color:#FFF}
#iframe{
  flex:1 1 auto; min-height:820px; width:100%;
  border:0; border-radius:12px; background:#fff;
}

/* ===================== BREAKPOINTS ===================== */

/* Tablet/Mobile: menú hamburguesa + panel */
@media (max-width:1024px){
  .nav-inner{justify-content:space-between; position:relative}

  /* botón visible y anclado a la derecha */
  .nav-toggle{
    display:inline-flex !important;
    position:absolute; right:16px; top:50%; transform:translateY(-50%);
    z-index:80;
    width:44px; height:44px; border-radius:10px;
    border:1px solid rgba(255,255,255,.22);
    background:transparent; color:#e2e8f0;
  }
  .nav-toggle ion-icon{font-size:22px; pointer-events:none}

  /* panel del menú móvil */
  .nav-menu{
    position:fixed; inset-inline:0; top:calc(var(--nav-offset));
    background:rgba(15,23,42,.95);
    -webkit-backdrop-filter:saturate(160%) blur(10px);
    backdrop-filter:saturate(160%) blur(10px);
    display:none; flex-direction:column; gap:8px; padding:14px 18px; z-index:65;
    border-bottom:1px solid rgba(255,255,255,.08)
  }
  body.nav-open .nav-menu{display:flex}
  .nav-menu a{padding:10px 6px; font-size:16px}
  .nav-menu .btn{justify-content:center}

  /* logo compacto base en móvil (lo refinamos abajo) */
  .nav-logo{ left:12px; }
  .nav-logo img{ width:72px;height:72px }

  /* backdrop para cerrar tocando fuera */
  .nav-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; z-index:55
  }
  body.nav-open .nav-backdrop{display:block}
}

/* Responsive Mega Conexión */
@media (max-width: 960px){
  .mega-grid{flex-direction:column}
  #framemenu{width:100%;flex:0 0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (max-width: 560px){
  #framemenu{grid-template-columns:1fr}
}

/* Ajustes extra-chicos */
@media (max-width:420px){
  .nav-menu a{font-size:15px}
  .nav-logo img{width:64px;height:64px}
}

/* === Pulido header en móvil (safe-area, contraste) === */
@supports (padding: max(0px)) {
  .nav { padding-top: max(0px, env(safe-area-inset-top)); }
}
@media (max-width:1024px){
  .nav{
    background: rgba(15,23,42,.80);
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .nav-logo img{
    border-radius:12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.18);
  }
  .nav-toggle{
    right:12px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.18);
    color:#fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
  }
  .nav-toggle:hover{ background: rgba(0,0,0,.40); }
  .nav-toggle ion-icon{ color:#fff; }
}

/* === Header MÁS ALTO solo en responsive (88px) === */
@media (max-width:1024px){
  :root{ --nav-mobile-h: 88px; }

  .nav-inner{
    min-height: var(--nav-mobile-h);
    padding: 12px 16px;
  }
  .nav-menu{ top: calc(var(--nav-offset)); }

  .nav-logo img{ width: 76px; height: 76px; }
  .nav-toggle{ width: 46px; height: 46px; }
  .nav-toggle ion-icon{ font-size: 24px; }
}