/* ============================================================
   CUADRACERO · página legal
   Mismo sistema visual que el resto del sitio (ver assets/site.css
   y herramientas/firmas.css). Hoja propia, sin dependencias, para
   que esta página no arrastre nada que no usa.
   ============================================================ */
:root{
  --ink:#121418; --ink2:#1B1E24; --ink3:#23272E;
  --paper:#EFE9DC; --mute:#9A958A; --rule:#33363D;
  --line-soft:rgba(239,233,220,.16);
  --gold:#B0872E; --lift:#D4AF56;
  --sans:'Work Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --script:'Pinyon Script',cursive;
  --track:.12em;
  --ease:cubic-bezier(.19,1,.22,1);
  --fast:160ms; --slow:600ms;
  --pad:clamp(20px,4vw,48px);
  --tap:48px;
  --head-h:64px; --steps-h:52px;
  --measure:740px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);
  font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;line-height:1.15;font-weight:700}
p{margin:0}
a{color:inherit}
svg{display:block}
:focus{outline:none}
:focus-visible{outline:2px solid var(--lift);outline-offset:3px}
.sprite{position:absolute}

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

.skip-link{position:absolute;left:16px;top:-56px;z-index:200;background:var(--lift);color:var(--ink);
  padding:8px 16px;font-family:var(--mono);font-size:.8rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;text-decoration:none;transition:top var(--fast) var(--ease)}
.skip-link:focus{top:12px}

.kick{font-family:var(--mono);font-size:.75rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--lift)}

/* ─────── sello ─────── */
.s-ring,.s-in,.s-zero{fill:none;stroke:var(--paper)}
.s-ring{stroke-width:16}
.s-in{stroke-width:5}
.s-tick{fill:none;stroke:var(--paper);stroke-width:17;stroke-dasharray:4.6 9.2}
.s-zero{stroke:var(--lift);stroke-width:4.6}
.s-band{fill:var(--paper);font-family:var(--mono);letter-spacing:7px}
.s-c{font-family:var(--script);font-size:232px;fill:var(--paper)}
.s-cg{font-family:var(--script);font-size:232px;fill:var(--gold)}
.s-d{fill:var(--paper)}

/* ============================================================
   ENCABEZADO fijo (mismo patrón que herramientas/firmas.html)
   ============================================================ */
.app-header{position:sticky;top:0;z-index:80;height:var(--head-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--pad);
  background:rgba(18,20,24,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;min-width:0}
.brand svg{width:38px;height:38px;flex:none}
.brand b{font-family:var(--script);font-size:31px;font-weight:400;line-height:1;
  text-shadow:.05em .05em 0 var(--gold)}
.brand .sep{width:1px;height:22px;background:var(--rule)}
.brand .tool{font-family:var(--mono);font-size:.75rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--mute);white-space:nowrap}
.back{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-family:var(--mono);font-size:.75rem;letter-spacing:var(--track);text-transform:uppercase;
  text-decoration:none;color:var(--paper);border-bottom:2px solid var(--gold);
  transition:border-color var(--fast) var(--ease)}
.back .bi{color:var(--lift);transition:transform var(--fast) var(--ease)}
.back:hover{border-color:var(--paper)}
.back:hover .bi{transform:translateX(-4px)}
@media(max-width:640px){.brand .sep,.brand .tool{display:none}.back .txt-long{display:none}}

/* ============================================================
   INTRODUCCIÓN
   ============================================================ */
.intro{max-width:1100px;margin:0 auto;padding:clamp(36px,6vw,72px) var(--pad) clamp(24px,4vw,40px);
  position:relative}
.intro .weave{position:absolute;inset:0;pointer-events:none;opacity:.09;
  background-image:repeating-linear-gradient(45deg,var(--rule) 0 1px,transparent 1px 28px),
                   repeating-linear-gradient(-45deg,var(--rule) 0 1px,transparent 1px 28px);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent);
          mask-image:linear-gradient(to bottom,#000,transparent)}
.intro>*{position:relative}
.intro h1{margin:14px 0 18px;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(2rem,5vw,3.4rem);text-shadow:.045em .045em 0 var(--gold)}
.intro .lead{max-width:66ch;color:var(--mute);font-size:clamp(1rem,1.4vw,1.15rem)}
.intro .facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin:28px 0 0;padding:0;list-style:none;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:var(--paper)}
.intro .facts li{display:flex;align-items:center;gap:10px}
.intro .facts .bi{color:var(--lift);font-size:1rem}

/* navegación entre los 3 documentos, fija bajo el encabezado */
.steps{position:sticky;top:var(--head-h);z-index:60;display:flex;gap:4px;overflow-x:auto;
  scrollbar-width:none;background:var(--ink);border-bottom:1px solid var(--rule);
  max-width:1100px;margin:0 auto}
.steps::-webkit-scrollbar{display:none}
.steps a{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:var(--steps-h);
  padding:0 var(--pad);position:relative;font-family:var(--mono);font-size:.75rem;
  letter-spacing:var(--track);text-transform:uppercase;text-decoration:none;color:var(--mute);
  transition:color var(--fast) var(--ease)}
.steps a:first-child{padding-left:var(--pad)}
.steps a::after{content:"";position:absolute;inset:auto var(--pad) 0;height:2px;background:var(--lift);
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--fast) var(--ease)}
.steps a:hover{color:var(--paper)}
.steps a[aria-current="true"]{color:var(--paper)}
.steps a[aria-current="true"]::after{transform:scaleX(1)}

/* ============================================================
   CADA DOCUMENTO
   ============================================================ */
main{max-width:1100px;margin:0 auto;padding:0 var(--pad) clamp(64px,10vw,120px)}
.lg-doc{max-width:var(--measure);margin:0 auto;padding-top:clamp(56px,8vw,96px);
  scroll-margin-top:calc(var(--head-h) + var(--steps-h) + 12px)}
.lg-doc + .lg-doc{border-top:1px solid var(--rule)}
.lg-docmeta{margin-bottom:28px}
.lg-docmeta h2{margin:12px 0 10px;font-size:clamp(1.5rem,3.6vw,2.1rem);letter-spacing:-.01em}
.lg-date{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.8125rem;
  letter-spacing:.02em;color:var(--mute)}
.lg-date .bi{color:var(--lift)}

/* índice plegable de cada documento */
.lg-toc{margin:24px 0 0;border:1px solid var(--rule);background:var(--ink2)}
.lg-toc summary{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:0 18px;
  cursor:pointer;font-family:var(--mono);font-size:.75rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--lift);-webkit-user-select:none;user-select:none}
.lg-toc summary::marker{color:var(--lift)}
.lg-toc .lg-toc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:1px;background:var(--rule);border-top:1px solid var(--rule)}
.lg-toc a{display:flex;align-items:baseline;gap:10px;padding:10px 16px;background:var(--ink2);
  text-decoration:none;font-size:.875rem;color:var(--mute);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.lg-toc a:hover{background:var(--ink3);color:var(--paper)}
.lg-toc .n{flex:none;font-family:var(--mono);font-size:.75rem;color:var(--lift);min-width:1.6em}

/* secciones y tipografía del cuerpo legal */
.lg-sec{padding-top:clamp(40px,6vw,64px);scroll-margin-top:calc(var(--head-h) + var(--steps-h) + 12px)}
.lg-sec:first-of-type{padding-top:clamp(32px,5vw,48px)}
.lg-sec-title{display:flex;align-items:baseline;gap:16px;
  padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--rule);
  font-size:clamp(1.15rem,2.4vw,1.5rem);letter-spacing:-.01em}
.lg-num{flex:none;font-family:var(--mono);font-weight:700;font-size:.8125rem;
  letter-spacing:.04em;color:var(--lift)}
.lg-sub-title{margin:28px 0 10px;font-size:1.0625rem;letter-spacing:-.005em;color:var(--paper)}

.lg-sec>p,.lg-sec>ul{margin-top:16px;color:var(--mute);max-width:70ch}
.lg-sec>p:first-of-type,.lg-sec>h4:first-child+p{margin-top:0}
.lg-sec p.strong{color:var(--paper);font-weight:600}
.lg-sec a{color:var(--lift);text-underline-offset:3px}
.lg-sec a:hover{color:var(--paper)}

.lg-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;max-width:70ch}
.lg-list li{position:relative;padding-left:22px;color:var(--mute)}
.lg-list li::before{content:"◆";position:absolute;left:0;top:.1em;font-size:.6em;color:var(--lift)}

.tbl-wrap{margin-top:18px;overflow-x:auto;border:1px solid var(--rule)}
.tbl{width:100%;border-collapse:collapse;font-size:.9375rem}
.tbl th,.tbl td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl th{font-family:var(--mono);font-size:.6875rem;letter-spacing:var(--track);text-transform:uppercase;
  color:var(--lift);background:var(--ink2);white-space:nowrap}
.tbl td{color:var(--mute)}
.tbl td.cat{color:var(--paper);font-weight:600;white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}

.lg-firma{margin-top:40px;padding-top:20px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);line-height:1.9}

footer{max-width:1100px;margin:0 auto;padding:32px var(--pad) 44px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.75rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--mute)}
footer a{text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px}
footer a:hover{color:var(--paper);border-color:var(--paper)}
footer .cc-abrir-prefs{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px}
footer .cc-abrir-prefs:hover{color:var(--paper);border-color:var(--paper)}

@media(max-width:760px){
  .lg-sec-title{flex-direction:column;gap:4px}
  .tbl th,.tbl td{padding:10px 12px}
}

@media(prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  .intro>*{animation:rise 700ms var(--ease) both}
  .intro h1{animation-delay:70ms}
  .intro .lead{animation-delay:140ms}
  .intro .facts{animation-delay:200ms}
}

/* impresión: sin cabeceras fijas, un solo color de texto legible */
@media print{
  .app-header,.steps,.skip-link,footer{display:none}
  body{background:#fff;color:#111}
  .lg-doc{max-width:none}
  a{color:#111;text-decoration:underline}
  .lg-num,.kick{color:#555}
}