/* =========================================================
   K13 Group – Estilos comunes páginas legales
   Archivo: legal.css
   (Puedes integrarlo también al final de tu style.css)
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --bg: #0d0f14;
  --bg-elev: #11161b;
  --bg-card: #141821;

  --text-light: #e8ecf2;
  --text-dim: #b2bec3;
  --text-mute: #9ea6b4;

  --primary-color: #00e6ff;     /* cian */
  --secondary-color: #7be0ff;   /* cian claro */
  --accent-color: #ff6ec7;      /* rosa neón */

  --border: #242a33;
  --radius-sm: 10px;
  --radius-md: 12px;

  --shadow-neon: 0 10px 26px rgba(0, 224, 255, .25);
}

/* ---------- Reset mínimo ---------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text-light);
  line-height: 1.6;
}

/* ---------- Tipografía ---------- */
h1,h2,h3{
  line-height: 1.2;
  margin: 0 0 12px 0;
}
h1{ font-size: clamp(28px, 4vw, 40px); }
h2{ font-size: clamp(20px, 3vw, 26px); margin-top: 26px; }
h3{ font-size: clamp(18px, 2.4vw, 22px); margin-top: 20px; }

p{ margin: 0 0 12px 0; color: var(--text-light); }
small, .muted{ color: var(--text-mute); }

/* ---------- Enlaces ---------- */
a{
  color: var(--secondary-color);
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}

/* ---------- Contenedor ---------- */
.container{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 20px;
}

/* ---------- Header / Nav ---------- */
.header-container{
  position: sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding: 14px 20px;
  background: rgba(17,22,27,.8);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.logo{ display:flex; align-items:center; gap:10px; }
.logo-img{
  width:32px; height:32px; border-radius:8px;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  box-shadow: 0 0 18px rgba(0,230,255,.25);
}
.logo-text{ font-weight: 700; letter-spacing: .4px; }

.nav-menu{
  list-style:none; margin:0; padding:0;
  display:flex; gap:18px; align-items:center;
}
.nav-menu a{
  padding:8px 10px; border-radius: 8px; color: var(--text-light);
}
.nav-menu a:hover{
  background: #0f141b; box-shadow: inset 0 0 0 1px var(--border);
}

.mobile-menu{
  display:none; cursor:pointer; user-select:none;
  font-size: 22px; line-height: 1;
}

/* ---------- Footer ---------- */
footer{
  border-top: 1px solid var(--border);
  background: #0f141b;
  margin-top: 40px;
}
.footer-grid{
  display:grid; gap: 20px;
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.footer-col h3{ margin: 12px 0; }
.footer-links{ list-style: none; margin:0; padding:0; }
.footer-links li{ margin: 6px 0; }
.footer-links a{ color: var(--text-dim); }
.footer-links a:hover{ color: var(--secondary-color); }

.social-links a{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:10px;
  margin-right: 8px;
  color:#fff; background: #121720; border:1px solid var(--border);
}
.social-links a:hover{
  background: #162030; box-shadow: 0 0 16px rgba(0,230,255,.15);
}

.copyright{
  border-top: 1px solid var(--border);
  margin-top: 20px; padding-top: 16px; text-align: center;
  color: var(--text-mute);
}

/* ---------- Bloques de contenido ---------- */
.legal-card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
}
.legal-card + .legal-card{ margin-top: 14px; }

.legal-list{
  padding-left: 18px;
}
.legal-list li{
  margin: 6px 0;
  color: var(--text-dim);
}

/* ---------- Tablas (si las usas para desgloses) ---------- */
.table{
  width: 100%; border-collapse: collapse; margin: 12px 0;
  border: 1px solid var(--border);
  background: #0f141b;
}
.table th, .table td{
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border);
}
.table th{ background: #111823; font-weight: 700; }
.table tr:hover td{ background: #0f1722; }

/* ---------- Botones (si no los tienes ya) ---------- */
.btn{
  display:inline-block; border:none; cursor:pointer; text-decoration:none;
  font-weight:700; letter-spacing:.2px; transition: all .3s ease;
  color: var(--text-light); padding: 12px 22px;
  border-radius: var(--radius-sm);
  background: var(--secondary-color);
}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-neon); }

.btn-accent{ background: var(--accent-color); }
.btn-accent:hover{ box-shadow: 0 10px 26px rgba(255,110,199,.28); }

.btn-outline{
  background: transparent; color: var(--secondary-color); border: 2px solid var(--secondary-color);
}
.btn-outline:hover{ background: var(--secondary-color); color:#0d0f14; }

.btn-primary{
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: #fff; box-shadow: 0 0 20px rgba(0,230,255,.25);
}
.btn-primary:hover{ box-shadow: 0 0 30px rgba(0,230,255,.4); }

.btn-glass{
  background: rgba(255,255,255,.08);
  color:#fff; border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}
.btn-glass:hover{ background: rgba(255,255,255,.14); }

/* ---------- Utils ---------- */
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  word-break: break-all;
}
hr{
  border: none; border-top: 1px solid var(--border); margin: 18px 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px){
  .footer-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 820px){
  .nav-menu{
    position: fixed; inset: 56px 0 auto 0; /* top offset ≈ header height */
    background: rgba(13,15,20,.98);
    border-bottom:1px solid var(--border);
    display: none; flex-direction: column; gap: 0;
    padding: 6px 12px 12px 12px;
  }
  .nav-menu.active{ display:flex; }
  .nav-menu li{ width:100%; }
  .nav-menu a{ display:block; padding:12px; border-radius: 8px; }
  .mobile-menu{ display:block; }
}

@media (max-width: 640px){
  .container{ padding: 20px 16px; }
  .legal-card{ padding: 16px; }
  .btn{ padding: 11px 18px; font-size: 14px; }
}

/* =========================================================
   ESTILOS OPCIONALES: Banner cookies simple (por si lo usas)
   ========================================================= */
.cc-banner{
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9999;
  background: #121720; color: var(--text-light);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 14px;
  display: none; /* cámbialo por block con JS al cargar */
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.cc-banner .cc-actions{
  display:flex; gap: 10px; flex-wrap: wrap; margin-top: 10px;
}
.cc-banner .cc-title{ font-weight: 700; margin-bottom: 6px; }
.cc-banner a{ color: var(--secondary-color); }