/* =========================================================
   Paginas legales: privacidad y terminos.

   Una hoja aparte y chica, en lugar de cargar styles.css entero. Estas
   paginas son texto para leer: no tienen escenas, ni animaciones, ni
   secciones, y no necesitan los 1400 renglones del sitio. Lo que si
   comparten con el es la identidad: los mismos colores, las mismas
   tipografias y el logotipo.

   Priorizan una sola cosa, que es que se lean. Columna de 70 caracteres,
   interlineado amplio y contraste alto: es el tipo de texto que alguien
   lee cuando quiere saber exactamente que se hace con sus datos.
   ========================================================= */

:root{
  --abyss:#02060D;
  --deep:#04101F;
  --navy:#08192E;
  --gold:#D8B25F;
  --gold-lt:#F2DCA6;
  --ink:#EAF2FB;
  --ink-2:#A9BDD4;
  --ink-3:#6D85A1;
  --line:rgba(169,189,212,.14);
  --f-display:'Montserrat',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{
  margin:0;min-height:100vh;
  background:radial-gradient(120% 60% at 50% -10%,#10294A,var(--navy) 42%,var(--abyss) 100%) fixed;
  color:var(--ink-2);
  font:400 16px/1.72 var(--f-body);
}
a{color:var(--gold);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--gold-lt)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---- cabecera ---- */
.lg-top{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  max-width:1120px;margin:0 auto;padding:18px clamp(18px,4vw,40px);
}
.lg-top img{display:block;height:54px;width:auto}
.lg-volver{
  font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;
  padding:9px 16px;border:1px solid var(--line);border-radius:999px;white-space:nowrap;
}
.lg-volver:hover{color:var(--ink);border-color:rgba(216,178,95,.45)}

/* ---- documento ---- */
.lg-doc{
  max-width:760px;margin:0 auto;
  padding:clamp(28px,6vw,64px) clamp(18px,4vw,40px) clamp(48px,8vw,90px);
}
.lg-eyebrow{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px;
}
.lg-doc h1{
  font-family:var(--f-display);font-weight:800;color:var(--ink);
  font-size:clamp(30px,5.4vw,46px);line-height:1.08;letter-spacing:-.025em;
  margin:0 0 16px;text-wrap:balance;
}
.lg-fecha{font-size:14px;color:var(--ink-3);margin:0 0 30px}
.lg-resumen{
  margin:0 0 42px;padding:20px 22px;border-radius:14px;
  background:rgba(216,178,95,.06);border:1px solid rgba(216,178,95,.22);
  color:var(--ink);font-size:15.5px;
}
.lg-resumen p{margin:0}
.lg-resumen p+p{margin-top:10px}
.lg-resumen strong{color:var(--gold-lt)}

.lg-indice{margin:0 0 46px;padding:0;list-style:none;counter-reset:ind;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 20px}
.lg-indice li{counter-increment:ind;font-size:14px}
.lg-indice li::before{content:counter(ind,decimal-leading-zero) "  ";
  font-family:var(--f-mono);font-size:11px;color:var(--ink-3)}
.lg-indice a{color:var(--ink-2);text-decoration:none}
.lg-indice a:hover{color:var(--gold)}

.lg-doc h2{
  font-family:var(--f-display);font-weight:700;color:var(--ink);
  font-size:clamp(19px,2.6vw,23px);letter-spacing:-.015em;line-height:1.25;
  margin:46px 0 12px;padding-top:26px;border-top:1px solid var(--line);
}
.lg-doc h2 span{
  display:block;font-family:var(--f-mono);font-weight:400;font-size:11px;
  letter-spacing:.2em;color:var(--gold);margin-bottom:8px;
}
.lg-doc h3{font-family:var(--f-display);font-weight:700;color:var(--ink);font-size:16.5px;margin:26px 0 8px}
.lg-doc p{margin:0 0 14px}
.lg-doc ul{margin:0 0 16px;padding-left:20px}
.lg-doc li{margin-bottom:8px}
.lg-doc li::marker{color:var(--gold)}
.lg-doc strong{color:var(--ink);font-weight:600}

.lg-tabla{width:100%;overflow-x:auto;margin:6px 0 18px}
.lg-tabla table{width:100%;min-width:520px;border-collapse:collapse;font-size:14.5px}
.lg-tabla th,.lg-tabla td{text-align:left;vertical-align:top;padding:11px 12px;border-bottom:1px solid var(--line)}
.lg-tabla th{font-family:var(--f-mono);font-weight:500;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.lg-tabla td:first-child{color:var(--ink);font-weight:500;width:32%}

.lg-aaip{
  margin:40px 0 0;padding:20px 22px;border-radius:14px;
  border:1px solid var(--line);background:rgba(4,16,31,.55);
  font-size:13.5px;line-height:1.65;
}
.lg-aaip p{margin:0}
.lg-aaip p+p{margin-top:10px}

/* ---- pie ---- */
.lg-pie{
  max-width:1120px;margin:0 auto;padding:26px clamp(18px,4vw,40px) 40px;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--ink-3);
}
.lg-pie nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.lg-pie a{color:var(--ink-2);text-decoration:none}
.lg-pie a:hover,.lg-pie a[aria-current="page"]{color:var(--gold)}

/* En telefono la tabla se vuelve fichas. Deslizar de costado para leer una
   tabla es incomodo, y esta pagina se va a abrir sobre todo desde un
   celular: es a donde lleva el enlace cuando circula por WhatsApp. Cada
   celda muestra su rotulo, que sale del atributo data-rotulo. */
@media (max-width:620px){
  .lg-tabla table{min-width:0}
  .lg-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .lg-tabla tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  .lg-tabla td{display:block;width:auto !important;border:0;padding:3px 0}
  .lg-tabla td::before{
    content:attr(data-rotulo);display:block;margin-bottom:1px;
    font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  }
  .lg-tabla td:first-child{font-size:15.5px}
}

@media (max-width:520px){
  body{font-size:15.5px}
  .lg-top img{height:44px}
  .lg-volver{font-size:13px;padding:8px 13px}
  .lg-resumen{padding:16px 17px}
  .lg-doc h2{margin-top:38px}
}

@media print{
  body{background:#fff;color:#111;font-size:11pt}
  .lg-top img{filter:brightness(0)}
  .lg-volver,.lg-indice,.lg-pie nav{display:none}
  .lg-doc h1,.lg-doc h2,.lg-doc h3,.lg-doc strong,.lg-resumen{color:#000}
  .lg-resumen,.lg-aaip{background:none;border-color:#999}
  a{color:#000}
}
