/* ============================================================
   Páginas legales de CODEB7 · FillUp
   Hoja compartida por terminos.html y privacidad.html (generadas por
   scripts/generar-legales.py) y como-eliminar-tu-cuenta.html (a mano).
   Una sola fuente para que las tres no vuelvan a desalinearse.
   No enlaza styles.css a propósito: sus selectores globales de elemento
   (nav{display:flex;height:60px}, h1…) rompen la maquetación del índice.
   ============================================================ */
/* Paleta del sitio (assets/css/styles.css): dirección B "Claro sobrio" --
   ver logo-redesign/exports-indigo/GUIA.html. --accent-suave/--accent-borde
   se dejan como cian traslúcido de baja opacidad tal cual (funcionan igual
   de bien como wash sutil sobre fondo claro que sobre oscuro). */
:root{
  --papel:#FFFFFF; --papel-2:#F3F3F1;
  --tinta:#14151A; --tinta-2:#4a4a4d; --muted:#6b6b6f;
  --accent:#1BA6C9; --linea:rgba(20,21,26,.1);
  --accent-suave:rgba(27,166,201,.08); --accent-borde:rgba(27,166,201,.3);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--papel); color:var(--tinta-2);
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.legal-nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  height:60px; padding:0 1.5rem;
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.legal-nav .logo{display:flex; align-items:center; gap:.55rem; text-decoration:none}
.legal-nav .logo img{height:28px; width:28px; display:block}
.logo-nombre{font-family:'Space Grotesk',sans-serif; font-size:1.35rem; font-weight:700; letter-spacing:1px; color:var(--tinta)}
.logo-nombre b{color:var(--accent)}
.legal-nav .volver{color:var(--muted); font-size:.95rem; text-decoration:none}
.legal-nav .volver:hover{color:var(--accent)}
.wrap{max-width:42rem; margin:0 auto; padding:2.5rem 1.25rem 5rem}
.fillup-logo{height:48px; width:auto; display:block; margin:0 0 1.1rem}
.eyebrow{font-family:'Space Grotesk',sans-serif; font-size:.9rem; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--accent); margin:0 0 .5rem}
h1{font-family:'Space Grotesk',sans-serif; font-size:2.1rem; line-height:1.15; font-weight:700; color:var(--tinta); margin:0 0 .75rem}
.legal-meta{font-size:.9rem; color:var(--muted); margin:0 0 .35rem; line-height:1.55}
.legal-meta a{color:var(--tinta-2)}
h2{font-family:'Space Grotesk',sans-serif; font-size:1.35rem; font-weight:700; color:var(--tinta); margin:2.6rem 0 1.25rem; padding-bottom:.55rem; border-bottom:2px solid var(--accent-borde)}
h3{font-family:'Space Grotesk',sans-serif; font-size:1.12rem; font-weight:600; color:var(--tinta); margin:1.9rem 0 .55rem}
h2, h3{scroll-margin-top:80px}
p{margin:0 0 .8rem}
strong{color:var(--tinta); font-weight:600}
a{color:var(--accent)}
ul,ol{margin:0 0 .85rem; padding:0 0 0 1.15rem}
li{margin:0 0 .35rem}
hr{border:0; border-top:1px solid var(--linea); margin:2rem 0}
.callout{
  margin:0 0 1.4rem; padding:1.1rem 1.3rem;
  background:var(--accent-suave); border:1px solid var(--accent-borde);
  border-left:4px solid var(--accent); border-radius:10px;
}
.callout h3{margin-top:0; color:var(--accent)}
.callout p{line-height:1.7}
nav.indice{margin:1.6rem 0 2.2rem}
nav.indice .rotulo{font-family:'Space Grotesk',sans-serif; font-size:.85rem; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); margin:0 0 .7rem}
nav.indice ol{list-style:none; margin:0; padding:0}
nav.indice li{margin:0 0 .4rem}
nav.indice a{color:var(--tinta-2); text-decoration:none; font-size:.95rem}
nav.indice a:hover{color:var(--accent)}
nav.indice.lateral{display:none}
nav.indice.enlinea{padding:1rem 1.25rem; background:var(--papel-2); border:1px solid var(--linea); border-radius:10px}
main.doc{min-width:0}
.tw{overflow-x:auto; margin:.4rem 0 1rem; border:1px solid var(--linea); border-radius:8px}
table{border-collapse:collapse; width:100%; font-size:.9rem; min-width:480px}
th{text-align:left; font-weight:600; color:var(--tinta); padding:.55rem .75rem; background:var(--papel-2); border-bottom:2px solid var(--accent-borde); font-family:'Space Grotesk',sans-serif; letter-spacing:.5px}
td{padding:.55rem .75rem; border-bottom:1px solid var(--linea); vertical-align:top}
tr:last-child td{border-bottom:0}
footer.pie{margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--linea); font-size:.88rem; color:var(--muted); line-height:1.9}
footer.pie a{color:var(--tinta-2); text-decoration:none}
footer.pie a:hover{color:var(--accent)}
@media (max-width:420px){ body{font-size:16px} .wrap{padding:1.75rem 1rem 4rem} h1{font-size:1.7rem} }
@media (min-width:1080px){
  .wrap{
    max-width:72rem;
    display:grid;
    grid-template-columns:15rem minmax(0,46rem);
    column-gap:4rem;
    justify-content:center;
    align-items:start;
  }
  nav.indice.enlinea{display:none}
  .wrap>nav.indice.lateral{
    display:block;
    grid-column:1;
    grid-row:1;
    position:sticky;
    top:calc(60px + 2rem);
    margin:0;
    padding-right:1.5rem;
    border-right:1px solid var(--linea);
  }
  .wrap>main.doc{grid-column:2; grid-row:1}
  nav.indice a{font-size:.9rem}
}