/* =========================================
   GKSCol Landing Styles (consolidado)
   ========================================= */
:root{
  --bg:#0b1226;           /* navy oscuro */
  --card:#0f1833;         /* navy un poco más claro */
  --text:#e6f0ff;         /* texto claro */
  --muted:#b6c2df;
  --brand:#13c1e1;        /* celeste del slogan */
  --accent1:#ff507e;      /* acentos para badges */
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,80,126,.15), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(19,193,225,.12), transparent 60%),
    var(--bg);
  color:var(--text);
  line-height:1.6;
}
a{color:var(--brand);text-decoration:none}

/* Wrapper */
.wrap{width:90vw;max-width:90vw;margin:0 auto;padding:28px 20px 80px}
@media (max-width:640px){.wrap{width:100vw;max-width:100vw}}

/* Header + Social */
header{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;background:rgba(11,18,38,.7);backdrop-filter:saturate(160%) blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 8px 20px rgba(0,0,0,.25)}
header img{height:56px;width:auto}
.social-links{display:flex;gap:8px;flex-wrap:wrap}
.btn.social{display:inline-flex;align-items:center;gap:8px;padding:8px 12px}
.btn.social svg{width:16px;height:16px;display:inline-block}
/* WhatsApp button */
.btn.wa{background:#25D366;color:#06222a;border-color:transparent}
.btn.wa:hover{filter:brightness(1.05)}

/* Hero */
.hero{margin-top:24px;padding:28px;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));backdrop-filter: blur(4px);box-shadow:var(--shadow)}
.hero h1{margin:0 0 6px;font-size:28px}
.hero h2{margin:0 0 6px;font-size:22px}
.hero p{margin:0;color:var(--muted)}
.hero .cta{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px}
@media(min-width:720px){.hero{display:flex;align-items:center;justify-content:space-between;gap:20px}.hero h1{font-size:32px}.hero h2{font-size:26px}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:14px;font-weight:700;border:1px solid transparent;transition:.2s;cursor:pointer}
.btn.primary{background:var(--brand);color:#06222a}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;border-color:rgba(230,240,255,.18);color:var(--text)}
.btn.ghost:hover{background:rgba(230,240,255,.05)}

/* Generic grid & cards */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:26px}
.card{grid-column:span 12;background:var(--card);border-radius:var(--radius);padding:22px;border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow)}
.card h3{margin:0 0 2px;font-size:20px}
.features{margin:12px 0 0;padding:0;list-style:none;color:#d9e5ff}
.features li{margin:6px 0;display:flex;gap:8px}
.badge{display:inline-block;background:linear-gradient(90deg, var(--accent1), #ff9a4d);color:white;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.5px}
.popular{outline:2px solid rgba(255,255,255,.18)}

/* Pricing heading */
.price{font-size:28px;font-weight:800;margin:10px 0}
.period{font-size:12px;color:var(--muted)}

/* Forms */
form{display:grid;gap:12px}
label{font-size:13px;color:var(--muted)}
input,textarea,select{background:#0b1530;color:var(--text);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px;width:100%}
input::placeholder,textarea::placeholder{color:#94a3c7}

/* Footer + separators */
footer{margin-top:36px;color:var(--muted);font-size:13px;text-align:center}
.sep{height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);margin:36px 0}

/* =====================
   PLANES (grid responsive)
   ===================== */
/* El contenedor externo mantiene flechas si alguna vez se usan */
.planes-wrap{position:relative}
/* Grid de planes: sin scroll horizontal, columnas auto-fit */
#planes-grid.single-row{display:grid !important;gap:18px !important;overflow:visible !important;padding:0 !important;scroll-snap-type:none !important;justify-content:center}
#planes-grid.single-row .card{flex:unset !important;width:auto !important;grid-column:auto !important}
@media (max-width:599px){#planes-grid.single-row{grid-template-columns:1fr !important}}
@media (min-width:600px){#planes-grid.single-row{grid-template-columns:repeat(auto-fit, minmax(280px,1fr)) !important}}

/* Flechas (ocultas por defecto; se muestran con .show vía JS) */
.planes-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(10,15,30,.6);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;font-size:22px;color:#e6f0ff;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.35);z-index:5}
.planes-arrow.show{display:flex}
.planes-arrow[disabled]{opacity:.35;cursor:default}
.planes-arrow.prev{left:4px}
.planes-arrow.next{right:4px}
@media(max-width:720px){.planes-arrow.prev{left:4px}.planes-arrow.next{right:4px}}

/* =====================
   SERVICIOS (grid igual al de planes)
   ===================== */
#servicios-grid{display:grid !important;gap:18px !important;grid-column:1 / -1 !important;width:100%}
#servicios-grid .card{grid-column:auto !important;width:auto}
@media (max-width:599px){#servicios-grid{grid-template-columns:1fr !important}}
@media (min-width:600px){#servicios-grid{grid-template-columns:repeat(auto-fit, minmax(280px,1fr)) !important}}

/* Alinear CTAs abajo para cards de planes y servicios */
#planes-grid .card, #servicios-grid .card{display:flex;flex-direction:column;height:100%}
#planes-grid .features, #servicios-grid .features{flex:1 1 auto}
.cta-row{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ==============================
   Menú hamburguesa (solo estilos; no invasivo)
   ============================== */
.menu-toggle{
  appearance:none; -webkit-appearance:none;
  display:none; /* oculto en desktop, visible en móvil */
  align-items:center; justify-content:center;
  flex-direction:column; gap:0;
  width:44px; height:38px; padding:0;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  backdrop-filter:saturate(140%) blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius:14px;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition: background .2s, border-color .2s, transform .1s;
}
.menu-toggle:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.28); }
.menu-toggle:active{ transform: scale(.98); }
.menu-toggle:focus-visible{ outline:2px solid rgba(19,193,225,.7); outline-offset:2px; }
.menu-toggle span{ display:block; width:22px; height:2px; margin:0; background: var(--text); border-radius:2px; position:relative; transition: transform .25s ease, opacity .2s ease; }
.menu-toggle span:nth-child(1){ transform: translateY(-6px); }
.menu-toggle span:nth-child(2){ transform: translateY(0); }
.menu-toggle span:nth-child(3){ transform: translateY(6px); }
header.menu-open .menu-toggle span:nth-child(1){ transform: rotate(45deg); }
header.menu-open .menu-toggle span:nth-child(2){ opacity:0; }
header.menu-open .menu-toggle span:nth-child(3){ transform: rotate(-45deg); }
@media (max-width:640px){
  .menu-toggle{ display:flex; }
  header.menu-collapsed .social-links{ display:none; }
  header.menu-open{ overflow:visible; }
  header.menu-open .social-links{
    display:flex; flex-direction:column; gap:10px;
    position:absolute; left:0; right:0; top:100%;
    padding:12px 16px; z-index:59;
    background:rgba(11,18,38,.92);
    border-top:1px solid rgba(255,255,255,.06);
    box-shadow:0 12px 30px rgba(0,0,0,.35);
  }
  header.menu-open .social-links .btn.social{ justify-content:center; }
}

/* ===== Header full-bleed (ocupa todo el ancho sin tocar HTML) ===== */
header::before{
  content:""; position:absolute; top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw);
  width:auto; background:rgba(11,18,38,.7);
  border-bottom:1px solid rgba(255,255,255,.06); box-shadow:0 8px 20px rgba(0,0,0,.25);
  backdrop-filter:saturate(160%) blur(6px); -webkit-backdrop-filter:blur(6px); z-index:-1; pointer-events:none;
}
html, body{ overflow-x:clip; }

/* Header pegado arriba */
.wrap{ padding-top:0 !important; }

/* ==============================
   Form responsive (móvil) y ajustes #contacto
   ============================== */
#contacto{ scroll-margin-top:80px; }
@media (max-width:768px){
  #contacto #lead > .grid{ display:grid !important; grid-template-columns:1fr !important; }
  #contacto #lead > .grid > *{ grid-column:1 / -1 !important; }
  #contacto input, #contacto select, #contacto textarea{ font-size:16px; }
  .cf-turnstile{ margin-top:10px; }
}

/* ==============================
   404 Page — light card inside dark theme
   ============================== */
.error404{ margin-top:28px; }
.error-card{
  background:#ffffff; color:#0f1833;
  border-radius:22px; padding:32px; border:1px solid rgba(15,24,51,.06);
  box-shadow:0 20px 50px rgba(0,0,0,.12);
}
.error-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:32px; align-items:center; }
.error-badge{ display:inline-block; background:#e9f2ff; color:#1d4ed8; font-weight:800; padding:6px 10px; border-radius:999px; font-size:12px; letter-spacing:.5px; }
.error-huge{ font-size:96px; font-weight:800; line-height:.9; color:#1d4ed8; margin:8px 0; }
.error-title{ font-size:28px; font-weight:800; margin:6px 0 8px; color:#0f1833; }
.error-text{ color:#475569; }
.error-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.error-note{ font-size:14px; color:#64748b; margin-top:12px; }
.error-card .btn.primary{ background:#2563eb; color:#fff; }
.error-card .btn.primary:hover{ filter:brightness(1.05); }
.error-card .btn.ghost{ color:#0f1833; border-color:rgba(15,24,51,.15); }
.error-card .btn.ghost:hover{ background:rgba(15,24,51,.04); }
.error-illustration{ display:flex; align-items:center; justify-content:center; }
.error-illustration svg{ max-width:420px; width:100%; height:auto; }
@media (max-width:900px){ .error-huge{ font-size:84px; } }
@media (max-width:720px){ .error-grid{ grid-template-columns:1fr; } .error-illustration{ order:-1; margin-bottom:12px; } .error-huge{ font-size:72px; } }