/* SkyLink — estilos responsivos completos */

/* Paleta y variables */
:root{
  --brand:#0a2e6c; --brand-2:#0b5fff; --accent:#19c37d; --ink:#0b1320; --muted:#6b7a90;
  --bg:#061a40; --glass: rgba(255,255,255,.08); --card: rgba(7,24,62,.7);
  --radius:16px; --shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Reset básico */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img,svg,iframe{max-width:100%; height:auto}

/* Base */
body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#eef2ff;
  background:
    radial-gradient(1200px 600px at 10% -10%, #0b5fff22, transparent 60%),
    radial-gradient(900px 600px at 100% 10%, #19c37d1f, transparent 60%),
    linear-gradient(180deg, #071a3a 0%, #061a40 100%);
  background-attachment: fixed; 
  line-height:1.6;
}

/* Accesibilidad */
.skip{position:absolute;left:-9999px;top:-9999px}
.skip:focus{left:12px;top:12px;background:#19c37d;color:#031b2e;padding:8px 12px;border-radius:8px}

/* Layout contenedor */
.container{width:min(1100px, 92%); margin-inline:auto}

/* Header / Barra superior */
.site-header{
  position:sticky; top:0; 
  z-index:1000; /* La barra por encima del panel del menú */
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(6,26,64,.75), rgba(6,26,64,.55));
  border-bottom:1px solid #ffffff14;
}
.nav{
  display:flex; align-items:center; justify-content:space-between; 
  padding:12px 0;
  position:relative;
  z-index:1001; /* Aún por encima del panel del menú */
}

/* Marca / Logotipo */
.brand{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff
}
.brand svg{width:34px;height:34px;filter:drop-shadow(0 4px 10px #19c37d66)}
.brand span{font-weight:800; letter-spacing:.4px; font-size:1.05rem}

/* Navegación */
.menu ul{display:flex;gap:18px; list-style:none; padding:0; margin:0}
.menu a{color:#dbe4ff; text-decoration:none; font-weight:600; font-size:.95rem}
.menu a:hover{color:#fff}

/* Botones */
.cta{
  display:inline-flex; align-items:center; gap:10px; 
  background:linear-gradient(135deg, var(--accent), #18a46c);
  color:#031b2e; border:none; font-weight:800; padding:12px 18px; 
  border-radius:12px; box-shadow:0 10px 20px #19c37d44; text-decoration:none
}
.cta.sm{display:none} /* CTA corto para móvil */
.cta.lg{display:inline-flex} /* CTA largo para escritorio */

.ghost{
  display:inline-flex; align-items:center; gap:10px; 
  background:transparent; border:1px solid #5bbcff55; color:#dbe9ff; 
  padding:12px 18px; border-radius:12px; text-decoration:none
}

/* Burger (icono hamburguesa) */
.burger{
  display:none; background:transparent; border:0; width:40px; height:32px; 
  position:relative; z-index:1002; /* SIEMPRE por encima del panel del menú */
}
.burger span{
  position:absolute; left:6px; right:6px; height:3px; 
  background:#dbe4ff; border-radius:3px
}
.burger span:nth-child(1){top:7px}
.burger span:nth-child(2){top:14px}
.burger span:nth-child(3){top:21px}

/* Hero */
.hero{padding:64px 0 36px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center}
.kicker{color:#9bd5ff; font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.85rem}
h1{font-size:clamp(1.9rem, 1.4rem + 2vw, 3.2rem); line-height:1.15; margin:8px 0 12px}
.hl-blue{color:#9bd5ff}
.hl-green{color:#19c37d}
.lead{font-size:clamp(1rem, .95rem + .5vw, 1.1rem); color:#c9d4f5; max-width:65ch}
.hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)); 
  border:1px solid #ffffff1a; padding:20px; border-radius:var(--radius); box-shadow:var(--shadow)
}
.trust{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; color:#b8c6e6; font-weight:600; padding:0}
.trust li{list-style:none}
.hero-ill{
  aspect-ratio: 4/3; border-radius:20px; 
  background: radial-gradient(60% 60% at 70% 20%, #0b5fff55, transparent 60%), 
              linear-gradient(145deg, #071a3a, #0b2b6f); 
  border:1px solid #ffffff12; box-shadow: var(--shadow)
}

/* Secciones */
section{padding:64px 0}
.section-title{font-size:clamp(1.4rem, 1.1rem + .9vw, 2.1rem); margin:0 0 10px}
.muted{color:#b9c6dd}

/* Grid común */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px}

/* Tarjetas / Badges */
.card{
  background:var(--card); border:1px solid #ffffff1a; border-radius:var(--radius); 
  padding:20px; box-shadow:var(--shadow)
}
.badge{
  display:inline-block; padding:6px 12px; border-radius:999px; 
  background:#0b5fff22; color:#9bd5ff; border:1px solid #5bbcff33; font-weight:700
}

/* Planes */
.plans{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.plan{
  position:relative; overflow:hidden; 
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04)); 
  border:1px solid #ffffff1a; border-radius:20px; padding:20px; box-shadow:var(--shadow)
}
.plan h3{margin:2px 0 6px; font-size:1.45rem}
.speed{font-weight:900; font-size:clamp(1.8rem,1.4rem + 1.2vw,2.2rem); letter-spacing:.5px}
.features{display:grid; gap:8px; margin:10px 0 14px; color:#d7e3ff}
.price{font-weight:800; font-size:1.05rem; color:#a9f5d4}
.ribbon{position:absolute; top:14px; right:-40px; rotate:15deg; background:#19c37d; color:#042625; font-weight:900; padding:6px 52px}

/* Banda de streaming */
.streaming{
  background: linear-gradient(90deg, #0b5fff33, transparent), 
              radial-gradient(60% 100% at 0% 0%, #19c37d22, transparent); 
  border:1px solid #ffffff1a; border-radius:16px; padding:16px 18px; 
  display:flex; align-items:center; justify-content:space-between; gap:14px
}

/* Mapa */
.map{
  border:0; width:100%; height:320px; border-radius:16px; 
  filter:saturate(105%) contrast(102%) drop-shadow(0 12px 20px rgba(0,0,0,.2))
}

/* Formulario */
form{display:grid; gap:14px}
input, select, textarea{
  background:#0a2250; border:1px solid #ffffff22; color:#eaf2ff; 
  padding:12px 14px; border-radius:12px; outline:none; width:100%
}
textarea{min-height:110px; resize:vertical}
.actions{display:flex; gap:12px; flex-wrap:wrap}
.consent{display:flex; align-items:center; gap:8px; font-size:.95rem}

/* Footer */
.site-footer{padding:24px 0 36px; color:#9db0ce}
.site-footer a{color:#bfe3ff; text-decoration:none}
.footer-grid{display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.footer-links{display:flex; gap:12px; flex-wrap:wrap}

/* Animaciones reveal */
.reveal{opacity:0; transform:translateY(16px); transition: all .7s ease}
.reveal.visible{opacity:1; transform:none}

/* Chips (colonias) */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  background:var(--glass);border:1px solid #ffffff22;color:#eaf2ff;font-weight:700
}
.chip::before{content:'\2713';color:var(--accent)}

/* ========================= */
/* Breakpoints / Responsivo  */
/* ========================= */

@media (max-width: 960px){
  /* Layout fluido */
  .hero-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}

  /* Mostrar burger y CTA móvil, ocultar CTA largo */
  .burger{display:inline-block}
  .cta.lg{display:none}
  .cta.sm{display:inline-flex}

  /* Panel del menú móvil anclado al viewport, por debajo de la barra */
  .menu{
    position: fixed;
    left: 0; right: 0; 
    /* Ajusta esta altura si tu barra es más alta o más baja */
    top: 56px;           
    bottom: 0;           
    background: rgba(6,26,64,.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid #ffffff22;
    z-index: 1000;                          /* Bajo burger(1002) y nav(1001) */
    transform: translateY(110%);            /* oculto de inicio */
    transition: transform .3s ease;
    pointer-events: none;                   /* no intercepta clics cuando está oculto */
  }
  .menu.open{
    transform: none;
    pointer-events: auto;                   /* sí recibe clics cuando está abierto */
  }

  .menu ul{flex-direction:column; gap:0}
  .menu li{border-top:1px solid #ffffff12}
  .menu a{display:block; padding:14px 18px}
}

@media (max-width: 560px){
  .actions .cta, .actions .ghost{width:100%; justify-content:center}
  .map{height:260px}
}

/* Respeta preferencias de movimiento */
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none}
}