/* =========================================================
   IKOOGO — Styles (Privacy)
   Nota: parte del diseño base se replica de styles.css,
   más ajustes específicos de layout para el índice lateral.
========================================================= */

/* =========================
   1) Base / Variables / Reset
========================= */
:root{
  --bg: #0b0d14;
  --bg-soft: #0f1320;
  --card: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --text: #e9ecf1;
  --muted: #a8b0c3;

  --brand-dark: #0E3A4A;
  --brand-accent: #FF8A00;

  --primary-1: var(--brand-dark);
  --primary-2: #2AA4C7;
  --primary-3: var(--brand-accent);
  --grad: linear-gradient(135deg, var(--primary-1) 0%, var(--primary-2) 55%, var(--primary-3) 100%);

  --radius-xl: 24px;
  --radius-lg: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --blur: 14px;

  --container: 1120px;
  --speed: 650ms;
  --easing: cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top: 80px;}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: var(--text);
  background:
    radial-gradient(1200px 400px at 20% -10%, rgba(14,58,74,.25), transparent 60%),
    radial-gradient(900px 400px at 90% 10%, rgba(42,164,199,.18), transparent 60%),
    var(--bg);
  line-height:1.6;
}

img, svg { display:block; }
img { max-width:100%; height:auto; }
:focus-visible { outline: 2px solid rgba(255,138,0,.85); outline-offset: 2px; }

/* =========================
   2) Helpers / tipografía / containers
========================= */
.container{max-width:var(--container); margin-inline:auto; padding:0 24px}
.section{padding:72px 0} /* un poco más sobrio que la home */
.max-700{max-width:700px; margin:0 auto}
h1,h2,h3{line-height:1.15}
h1{ font-family:Poppins, Inter, sans-serif; font-size: clamp(28px, 5vw, 40px); margin: 0 0 8px; }
h2{ font-family:Poppins, Inter, sans-serif; font-size: 20px; margin: 0 0 10px; }
h3{ font-size: 16px; margin: 0 0 8px; }
p{margin:0}
.muted{color:var(--muted)}

/* =========================
   3) Header / Nav (simple)
========================= */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(10px);
  background: linear-gradient(180deg, rgba(10,12,20,.8), rgba(10,12,20,.35) 80%, transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:66px}

.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:800; letter-spacing:.5px}
.logo__text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.logo__img{ width:22px; height:22px; object-fit:contain; }
.logo--sm .logo__img{ width:20px; height:20px; }

.nav__menu{display:flex; align-items:center; gap:14px}
.nav__link{color:var(--muted); text-decoration:none}
.nav__link:hover{color:var(--text)}
.btn--sm{padding:8px 12px; border-radius:12px; font-size:13px}

/* =========================
   4) Hero (sobrio)
========================= */
.hero{position:relative; padding:72px 0 38px; overflow:hidden}
.eyebrow{text-transform:uppercase; letter-spacing:.18em; color:#b9c1d6; font-size:12px; margin:0 0 8px}
.grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* opcional: blurs suaves */
.decor{
  position:absolute; filter: blur(80px); opacity:.25; pointer-events:none; mix-blend-mode: screen
}
/* (si agregás decor--1/2/3, copialos de styles.css) */

/* =========================
   5) Layout con TOC lateral
========================= */
.layout{
  display:grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 24px;
  align-items:start;
  padding-bottom: 40px;
}
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .toc{ position: static; top:auto; }
}

.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
  padding: 18px;
}

/* TOC */
.toc{ position: sticky; top: 86px; }
.toc h2{ font-size: 16px; margin-bottom: 10px; }
.toc ol{ margin: 0; padding-left: 18px; display:grid; gap:6px; }
.toc a{ color:#cdd5ea; text-decoration:none; }
.toc a:hover{ color: var(--brand-accent); }
.toc__cta{ margin-top: 12px; }

/* Artículo */
.content{ display:grid; gap: 18px; }
.section.card{ padding: 18px; }
.section + .section{ margin-top: 0; }

/* =========================
   6) Links de contacto
========================= */
a[href^="mailto:"], .content a{
  color:#d0d3db; text-decoration:none; transition: color .2s ease;
}
a[href^="mailto:"]:hover, .content a:hover{ color: var(--brand-accent); }

/* =========================
   7) Footer
========================= */
.site-footer{padding:30px 0 16px; border-top:1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, rgba(10,12,20,.2), rgba(10,12,20,.6))}
.footer__grid{display:grid; grid-template-columns: 1.4fr 1fr auto; gap:18px; align-items:center}
@media (max-width: 880px){ .footer__grid{grid-template-columns:1fr} }
.footer__links{display:flex; gap:16px; flex-wrap:wrap}
.footer__links a{color:#cdd5ea; text-decoration:none}
.footer__links a:hover{color:var(--brand-accent)}
.footer__bottom{margin-top:18px; display:flex; align-items:center; justify-content:space-between; color:#aeb6cb}
.to-top{color:#d7def1; text-decoration:none; border:1px solid rgba(255,255,255,.15); padding:8px 10px; border-radius:12px}

/* =========================
   8) Utilidades / A11y / Reveal
========================= */
[data-reveal]{
  opacity:0; transform: translateY(16px) scale(.98);
  transition: opacity var(--speed) var(--easing), transform var(--speed) var(--easing);
}
.is-inview{opacity:1; transform: none}

/* Skip-link */
.visually-hidden-focusable{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.visually-hidden-focusable:focus{position:static;width:auto;height:auto;margin:0;clip:auto;overflow:visible;background:#12172a;color:#fff;padding:6px 10px;border-radius:8px}

/* Back to top */
.backtop{ display:flex; justify-content:flex-end; }
.backtop .to-top{ margin-top: 6px; }

/* =========================
   9) Motion preferences
========================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal]{transition:none}
}

/* =========================
   10) Compact tweaks (mínimos)
========================= */
body{ font-size: 15px; line-height: 1.55; }
.section{ padding: 68px 0; }
.nav{ height: 66px; }

h1{ font-size: clamp(26px, 4.6vw, 36px); }
h2{ font-size: 18px; }
h3{ font-size: 15px; }

.card{ padding: 16px; }
.content{ gap: 16px; }
.toc{ top: 82px; }

/* --- Fix: botones como links morados en privacy --- */
a.btn,
a.btn:visited {
  color: var(--btn-fg);
  text-decoration: none;
}

a.btn.btn--primary,
a.btn.btn--primary:visited {
  color: var(--btn-fg);
}

a.btn.btn--ghost,
a.btn.btn--ghost:visited {
  color: var(--btn-fg);
}

/* ======= Privacy page: TOC por encima de las tarjetas ======= */
.privacy, .privacy .container{
  position: relative;
  overflow: visible;        /* evita que el TOC se recorte */
  isolation: isolate;       /* nuevo contexto de apilado controlado */
}

/* Caja del índice de contenido (TOC) */
.privacy .toc{
  position: sticky;         /* se queda pegado mientras scrolleas */
  top: 72px;                /* ajusta según la altura de tu header */
  z-index: 50;              /* por encima de las “glass” */
  /* si usas glass aquí, no hace falta, pero por si acaso: */
  will-change: transform;   /* suaviza el sticky */
}

/* Tarjetas de contenido: por debajo del TOC */
.privacy .policy-card,
.privacy .glass{
  position: relative;
  z-index: 1;
}

/* En móviles muy chicos, puedes fijarlo arriba para que nunca quede tapado */
@media (max-width: 480px){
  .privacy .toc{
    position: sticky;  /* puedes usar fixed si lo querés fijo-fijo */
    top: 64px;         /* un poco menos en pantallas bajas */
  }
}

/* ===== PRIVACY / TOC siempre por encima ===== */

/* El contenedor no debe recortar ni crear stacking raro */
.privacy, .privacy .container, .privacy .privacy__grid{
  position: relative;
  overflow: visible;
}

/* Si el TOC tenía data-reveal, anulamos su transform para que sticky funcione */
.privacy .toc[data-reveal]{
  opacity: 1;
  transform: none !important;
}

/* TOC pegajoso y arriba de todo */
.privacy .toc{
  position: sticky;
  top: 72px;                /* altura aprox. del header */
  z-index: 1002;            /* más alto que tarjetas y que el header si hiciera falta */
  will-change: position, transform;
}

/* Asegura que ningún padre inmediato del TOC tenga transform */
.privacy .toc, .privacy .toc *{
  transform: none !important;
}

/* Tarjetas / bloques de contenido por debajo del TOC */
.privacy .glass,
.privacy .policy-card{
  position: relative;
  z-index: 1;
}

/* En móviles ultra-chicos puedes fijarlo aún más arriba si quieres */
@media (max-width: 480px){
  .privacy .toc{ top: 64px; }
}

/* TOC sticky solo en desktop */
@media (min-width: 981px){
  body.privacy .toc{
    position: sticky;
    top: 72px;
    z-index: 1000;
  }
  body.privacy .toc .card{ position: relative; z-index: 1001; }
}

/* En móvil el TOC NO es sticky: no tapa nada */
@media (max-width: 980px){
  body.privacy .layout{ grid-template-columns: 1fr; }
  body.privacy .toc{
    position: static;     /* deja de ser sticky */
    top: auto;
    z-index: auto;
    margin-bottom: 12px;  /* separación del contenido */
  }
  body.privacy .toc .card{ position: static; }
}

/* Cuando hacés clic en el índice, que el título no quede escondido bajo el header */
body.privacy .content .section{ scroll-margin-top: 86px; }