/* =========================================================
   PAGINAS LEGALES  (/terminos/ y /privacidad/)
   Se cargan despues de styles.css: de ahi salen los tokens, el header,
   el pie y la tipografia. Aca va solo lo propio de un texto largo.
   ========================================================= */

/* styles.css pone scroll-behavior:smooth. Entrando con un link a "#c-8-3" la
   animacion arrancaba antes de que cargara Poppins; al llegar la fuente el
   texto se reacomodaba y la pagina terminaba 130px pasada. Salto seco. */
.legal-html{scroll-behavior:auto}
/* con el header sticky, un salto a "#c-8-3" dejaba el titulo tapado */
.legal-body [id]{scroll-margin-top:84px}

.legal-volver{display:inline-flex;align-items:center;gap:7px;color:var(--navy);
  text-decoration:none;font-size:14px;font-weight:500}
.legal-volver:hover{color:var(--azul)}

/* ---------- encabezado: el mismo gradiente y la misma panza que el hero ---------- */
.legal-hero{
  width:calc(100% - 32px);max-width:var(--maxw);margin:4px auto 16px;
  background:var(--grad-navy);color:#fff;
  border-radius:var(--r-grad) var(--r-grad) var(--r-belly) var(--r-grad);
  box-shadow:var(--shadow);
  padding:30px 24px 28px;
}
.legal-hero__eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin-bottom:10px}
.legal-hero h1{color:#fff;font-size:clamp(30px,6vw,46px)}
.legal-hero__meta{font-size:13px;color:rgba(255,255,255,.7);margin-top:12px}
.legal-docs{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.legal-docs__tab{font-size:13px;font-weight:500;color:#fff;text-decoration:none;
  padding:8px 14px;border-radius:100px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22)}
.legal-docs__tab:hover{background:rgba(255,255,255,.18)}
.legal-docs__tab.is-on{background:#fff;color:var(--navy);border-color:#fff}

/* ---------- el cuerpo ---------- */
.legal{
  width:calc(100% - 32px);max-width:var(--maxw);margin:0 auto;
  background:var(--blanco);border-radius:var(--r-block);
  padding:22px 20px 36px;
}

.legal-texto{max-width:70ch;font-size:15px;line-height:1.72;color:#3a3f51;
  overflow-wrap:break-word}
.legal-texto p{margin:0 0 14px}
.legal-texto strong{color:var(--tinta)}
.legal-texto a{color:var(--azul);text-decoration:underline;text-underline-offset:2px}
.legal-texto h2{font-size:19px;letter-spacing:-.01em;line-height:1.3;color:var(--navy);
  margin:34px 0 14px;padding-top:24px;border-top:1px solid var(--linea)}
.legal-texto h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-texto h2.anexo{font-size:22px;margin-top:52px;border-top:2px solid var(--navy)}
.legal-texto h3{font-size:15.5px;letter-spacing:0;line-height:1.35;color:var(--navy);margin:24px 0 10px}
.legal-texto ul,.legal-texto ol{padding-left:22px;margin:0 0 16px}
.legal-texto li{margin-bottom:7px;padding-left:4px}
.legal-texto ol li::marker{color:var(--sec);font-weight:500}

.legal-tabla{overflow-x:auto;margin:4px 0 18px;border:1px solid var(--linea);border-radius:14px}
.legal-tabla table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.5}
.legal-tabla th{background:var(--celeste);color:var(--navy);font-weight:600;text-align:left}
.legal-tabla th,.legal-tabla td{padding:10px 14px;vertical-align:top}
.legal-tabla tbody tr+tr td,.legal-tabla tbody tr:first-child td{border-top:1px solid var(--linea)}
.legal-tabla td:first-child{width:44%}

@media (min-width:960px){
  .legal-hero{padding:52px 56px 48px}
  /* el texto arranca alineado con el titulo del encabezado (mismo padding) */
  .legal{padding:48px 56px 64px}
  .legal-texto{font-size:15.5px}
}