@charset "UTF-8";
/* ============================================================
   SABNU — legal.css
   Las tres páginas legales: privacidad, términos y eliminación
   de datos. Comparten esta hoja.

   Nada externo: la CSP del sitio es `default-src 'self'`, así que
   las fuentes son las mismas woff2 autoalojadas de la landing y los
   iconos van como SVG dentro del HTML. Ni Google Fonts ni CDNs.
   ============================================================ */

/* ---------- FUENTES (las mismas de la landing) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('/Assets/FONTS/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('/Assets/FONTS/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/Assets/FONTS/spacegrotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/Assets/FONTS/spacegrotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- TOKENS (los mismos de main.css) ---------- */
:root{
  --bg:#323946;
  --bg-deep:#2a303b;
  --bg-elev:#3a4353;

  --cy:#00eeff;
  --cy-soft:rgba(0,238,255,.12);
  --cy-ghost:rgba(0,238,255,.06);

  --w:#ffffff;
  --muted:rgba(255,255,255,.66);
  --muted-2:rgba(255,255,255,.45);

  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);
  --pane:rgba(39,44,54,.42);

  --warn:#f7b955;

  --ff:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fd:'Space Grotesk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --gut:clamp(20px,5vw,64px);
  --maxw:820px;
  --r:16px;
  --r-lg:22px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0;min-width:0}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-behavior:smooth}
html,body{overflow-x:clip;max-width:100%}

body{
  font-family:var(--ff);
  font-size:clamp(15px,.35vw + 14px,16.5px);
  line-height:1.75;
  color:var(--w);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ---------- CABECERA ---------- */
.lgnav{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px var(--gut);
  background:rgba(50,57,70,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

.lgnav__logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}
/* El logotipo trae ya la palabra: se fija el alto y el ancho lo pone la
   proporción. Los atributos width/height del <img> reservan el hueco. */
.lgnav__img{height:28px;width:auto;display:block}

.lgnav__back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border:1px solid var(--line-2);
  border-radius:999px;
  color:var(--w);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  transition:border-color .25s,background .25s,color .25s;
}
.lgnav__back svg{width:15px;height:15px;flex:none}
.lgnav__back:hover,
.lgnav__back:focus-visible{
  border-color:var(--cy);
  background:var(--cy-ghost);
  color:var(--cy);
}

/* ---------- PORTADA ---------- */
.lghero{
  text-align:center;
  padding:clamp(48px,8vw,90px) var(--gut) clamp(38px,5vw,56px);
  background:
    radial-gradient(60% 100% at 50% 0%,rgba(0,238,255,.07) 0%,transparent 70%);
  border-bottom:1px solid var(--line);
}

.lghero__tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cy);
  background:var(--cy-soft);
  border:1px solid rgba(0,238,255,.24);
  border-radius:999px;
  padding:6px 16px;
  margin-bottom:22px;
}
.lghero__tag svg{width:14px;height:14px;flex:none}

.lghero h1{
  font-family:var(--fd);
  font-size:clamp(30px,5.2vw,48px);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.02em;
  margin-bottom:14px;
}
.lghero h1 em{font-style:normal;color:var(--cy)}

.lghero__sub{
  color:var(--muted);
  max-width:52ch;
  margin:0 auto 18px;
}

.lghero__date{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:var(--muted-2);
}
.lghero__date svg{width:14px;height:14px;color:var(--cy);flex:none}

/* ---------- CUERPO ---------- */
.lgmain{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(40px,6vw,64px) var(--gut) clamp(70px,9vw,110px);
}

.lgintro{
  background:var(--pane);
  border:1px solid var(--line);
  border-left:3px solid var(--cy);
  border-radius:var(--r);
  padding:22px 26px;
  margin-bottom:clamp(34px,5vw,52px);
  color:rgba(255,255,255,.86);
}

.lgsec{margin-bottom:clamp(34px,5vw,52px);scroll-margin-top:90px}
.lgsec:last-child{margin-bottom:0}

.lgsec h2{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--fd);
  font-size:clamp(18px,2.2vw,22px);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.3;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}

.lgsec__n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  flex:none;
  border-radius:50%;
  background:var(--cy-soft);
  border:1px solid rgba(0,238,255,.3);
  color:var(--cy);
  font-family:var(--ff);
  font-size:13px;
  font-weight:700;
}
.lgsec__n svg{width:15px;height:15px}

.lgsec h3{
  font-family:var(--fd);
  font-size:16px;
  font-weight:600;
  margin-bottom:4px;
}

.lgsec p{margin-bottom:13px;color:rgba(255,255,255,.86)}
.lgsec p:last-child{margin-bottom:0}

.lgsec ul,.lgsec ol{padding-left:22px;margin-bottom:14px}
.lgsec li{margin-bottom:9px;color:rgba(255,255,255,.84)}
.lgsec li:last-child{margin-bottom:0}
.lgsec li::marker{color:var(--cy)}

strong,b{color:var(--w);font-weight:600}

a{color:var(--cy);text-decoration:none;border-bottom:1px solid rgba(0,238,255,.3)}
a:hover,a:focus-visible{border-bottom-color:var(--cy)}
.lgnav__logo,.lgnav__back,.lgtop{border-bottom:0}

:focus-visible{outline:2px solid var(--cy);outline-offset:3px;border-radius:4px}

/* ---------- TABLAS ---------- */
.lgtable{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--r);
  margin:18px 0;
  -webkit-overflow-scrolling:touch;
}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:460px}
th{
  background:var(--cy-ghost);
  color:var(--cy);
  font-weight:600;
  text-align:left;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
td{
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.8);
  vertical-align:top;
}
tr:last-child td{border-bottom:0}

/* ---------- AVISOS ---------- */
.lgnote{
  background:var(--pane);
  border:1px solid var(--line);
  border-left:3px solid var(--line-2);
  border-radius:var(--r);
  padding:16px 20px;
  margin:18px 0;
  font-size:14.5px;
  color:rgba(255,255,255,.84);
}
.lgnote--yes{border-left-color:var(--cy);background:var(--cy-ghost)}
.lgnote--warn{border-left-color:var(--warn);background:rgba(247,185,85,.05)}

.lgnote__i{
  display:inline-flex;
  vertical-align:-3px;
  margin-right:8px;
}
.lgnote__i svg{width:16px;height:16px}
.lgnote--yes .lgnote__i{color:var(--cy)}
.lgnote--warn .lgnote__i{color:var(--warn)}

/* ---------- FICHA DE CONTACTO ---------- */
.lgcard{
  background:var(--pane);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:24px 26px;
}
.lgcard__r{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:11px;
  color:rgba(255,255,255,.86);
}
.lgcard__r:last-child{margin-bottom:0}
.lgcard__r svg{width:17px;height:17px;color:var(--cy);flex:none;margin-top:5px}
.lgcard__foot{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:13.5px;
  color:var(--muted-2);
}

/* ---------- PASOS ---------- */
.lgsteps{
  display:grid;
  gap:14px;
  margin:20px 0;
}
.lgstep{
  display:flex;
  gap:16px;
  background:var(--pane);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:18px 20px;
}
.lgstep__n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  flex:none;
  border-radius:50%;
  background:var(--cy);
  color:var(--bg-deep);
  font-size:14px;
  font-weight:700;
}
.lgstep__b p{margin-bottom:0;font-size:14.5px;color:rgba(255,255,255,.8)}
.lgstep__b ul{margin:8px 0 0;padding-left:20px}
.lgstep__b li{font-size:14.5px}

/* ---------- SEPARADOR ---------- */
.lgrule{
  height:1px;
  border:0;
  background:linear-gradient(90deg,transparent,rgba(0,238,255,.35),transparent);
  margin:clamp(34px,5vw,52px) 0;
}

/* ---------- PIE ---------- */
.lgfoot{
  border-top:1px solid var(--line);
  padding:26px var(--gut);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.lgfoot__c{font-size:13.5px;color:var(--muted-2)}
.lgfoot__l{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px}
.lgfoot__l a{color:var(--muted);border-bottom:0}
.lgfoot__l a:hover,.lgfoot__l a:focus-visible{color:var(--cy)}

.lgtop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  flex:none;
  border:1px solid var(--line-2);
  border-radius:12px;
  color:var(--w);
  transition:border-color .25s,background .25s,color .25s;
}
.lgtop svg{width:16px;height:16px}
.lgtop:hover,.lgtop:focus-visible{border-color:var(--cy);background:var(--cy-ghost);color:var(--cy)}

@media (max-width:640px){
  .lgnav__img{height:24px}
  .lgnav__back span{display:none}
  .lgnav__back{padding:9px 12px}
  .lgfoot{flex-direction:column;text-align:center}
  .lgstep{padding:16px}
}