/* ═══════════════════════════════════════════════════════════════════════
   ENERGY MASTER · páginas legales · 2 de septiembre de 2026
   Lo usan habeas-data, en/privacy, pt/privacidade y mx/aviso-de-privacidad.

   ── POR QUÉ EN ARCHIVO Y NO EN LÍNEA ─────────────────────────────────
   Estaba en un <style> dentro del HTML. El extractor de i18n toma el
   contenido de <style> como texto traducible: metía 13 reglas CSS en el
   inventario y ensuciaba el informe de «castellano pendiente», que es la
   herramienta con la que se verifica que no falta nada por traducir.

   ── Y POR QUÉ NO EN estilos.css ──────────────────────────────────────
   Solo lo usan estas cuatro páginas. Meterlo en la hoja compartida
   obligaría a subir el ?v= en las 18 restantes por un cambio que no les
   afecta, y cada subida de versión es una invalidación de caché para
   todo el mundo.
   ═══════════════════════════════════════════════════════════════════════ */

.legal-hero{padding:clamp(96px,11vh,132px) 0 clamp(22px,3vw,34px)}
.legal-hero h1{font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.14;letter-spacing:-.038em;max-width:20ch;margin:16px 0 0}
.legal-hero .lede{margin-top:14px;max-width:62ch;color:var(--txt-2);font-size:1rem;line-height:1.7}

.legal{padding:clamp(20px,3vw,34px) 0 clamp(56px,6vw,88px)}
.legal-grid{display:grid;grid-template-columns:288px minmax(0,1fr);gap:clamp(28px,4vw,58px);align-items:start}

.legal-idx{position:sticky;top:92px;max-height:calc(100vh - 120px);overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 18px}
.legal-idx h2{font-size:.7rem;font-family:var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-3);margin:0 0 13px;font-weight:500}
.legal-idx ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.legal-idx a{display:block;padding:7px 10px;border-radius:9px;font-size:.79rem;line-height:1.4;
  color:var(--txt-2);transition:color .2s,background .2s}
.legal-idx a:hover{color:var(--txt);background:var(--elev)}

/* La medida de lectura la fija ESTA caja, no el ancho del sitio: son 6.000
   palabras y a 1.240 px se pierde el renglón al volver. En px y no en ch
   porque `ch` engaña — ya nos costó una vez en el FAQ. */
.legal-body{max-width:760px}
.legal-body h2{font-size:clamp(1.12rem,2vw,1.34rem);line-height:1.28;letter-spacing:-.022em;
  color:var(--txt);margin:2.4em 0 .7em;scroll-margin-top:96px}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-size:1rem;font-weight:600;line-height:1.35;letter-spacing:-.012em;
  color:var(--txt);margin:1.9em 0 .5em;scroll-margin-top:96px}
.legal-body p{font-size:.945rem;line-height:1.78;color:var(--txt-2);margin:0 0 1.05em}
.legal-body b{color:var(--txt);font-weight:600}
.legal-body table{width:100%;border-collapse:collapse;margin:1.1em 0 1.6em;font-size:.85rem}
.legal-body th,.legal-body td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.legal-body th{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--txt-2);font-weight:600}
.legal-body td{color:var(--txt-2)}
.legal-body .nota{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--teal);
  border-radius:0 var(--r-lg) var(--r-lg) 0;padding:16px 20px;margin:1.4em 0}
.legal-body .nota p{margin:0;font-size:.9rem}
.legal-fin{margin-top:2.6em;padding-top:1.4em;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3)}

@media(max-width:980px){
  .legal-grid{grid-template-columns:1fr}
  .legal-idx{position:static;max-height:none}
}