/* Glosilla Formación: legal documents and contact (prefix l-). Tokens come from site.css; the fallbacks keep the page readable on its own. */

.l-page{
  --l-paper:var(--paper,#f6f1e7); --l-surface:var(--surface,#fffdf8); --l-tint:var(--tint,#ece4d3);
  --l-ink:var(--ink,#14241d); --l-text:var(--text,#2b3a33); --l-muted:var(--muted,#56635b);
  --l-brass:var(--brass,#7d5a16); --l-brass-l:var(--brass-l,#d2ac62); --l-green:var(--green,#2f5d46);
  --l-line:var(--line,rgba(20,36,29,.18)); --l-line-strong:var(--line-strong,rgba(20,36,29,.4));
  --l-head:var(--font-head,'Cormorant Garamond',Georgia,serif); --l-ui:var(--font-ui,'Jost',sans-serif);
  --l-wrap:var(--wrap,1180px); --l-anchor:calc(var(--head-h,76px) + 24px);
  color:var(--l-text); font-family:var(--l-ui);
}
.l-page *,.l-page *::before,.l-page *::after{box-sizing:border-box}
.l-page :where(h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote){margin:0}
.l-page :where(ul,ol){padding:0;list-style:none}
.l-in{width:100%;max-width:var(--l-wrap);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}

/* ---------- heading band (not a card) ---------- */
.l-band{position:relative;background:var(--l-tint);padding:clamp(2.6rem,6vw,4.8rem) 0 clamp(1.6rem,3vw,2.4rem)}
.l-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--l-brass-l);transform-origin:left;animation:l-draw 1.1s cubic-bezier(.22,.61,.36,1) both}
.l-band .l-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:1.25rem 3rem;align-items:end}
.l-eyebrow{font:600 .8rem/1.3 var(--l-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--l-brass);margin-bottom:.9rem}
.l-band h1{font:500 clamp(2.3rem,5.4vw,4rem)/1.04 var(--l-head);letter-spacing:.02em;color:var(--l-ink);text-wrap:balance}
.l-updated{justify-self:end;text-align:right;font:500 .84rem/1.5 var(--l-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--l-muted)}
.l-updated b{display:block;font:500 1.25rem/1.3 var(--l-head);letter-spacing:.02em;text-transform:none;color:var(--l-ink)}

/* ---------- document: 0.5fr side note + 70ch column ---------- */
.l-sheet>*,.l-contact>*,.l-band .l-in>*{min-width:0}
.l-sheet{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);gap:clamp(2rem,6vw,5.5rem);padding-block:clamp(2.2rem,5vw,4.2rem) clamp(3.5rem,8vw,6.5rem)}
.l-side{align-self:start;position:sticky;top:var(--l-anchor);display:grid;gap:1.6rem;font-size:.95rem;line-height:1.6;color:var(--l-muted)}
.l-side h2{font:600 .8rem/1.3 var(--l-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--l-brass);margin-bottom:.55rem}
.l-side p+p{margin-top:.5rem}
.l-side ul{display:grid;gap:.1rem}
.l-side li a{display:inline-flex;align-items:center;min-height:44px}

.l-doc{max-width:70ch;counter-reset:l-sec;font-size:1.05rem;line-height:1.7}
.l-doc>*+*{margin-top:1.05rem}
.l-lead{font:500 clamp(1.3rem,2.2vw,1.6rem)/1.45 var(--l-head);color:var(--l-ink)}
.l-doc h2{counter-increment:l-sec;display:flex;align-items:baseline;gap:.9rem;margin-top:clamp(2.4rem,5vw,3.4rem);padding-top:1.3rem;border-top:1px solid var(--l-line);
  font:600 clamp(1.55rem,2.6vw,1.95rem)/1.2 var(--l-head);letter-spacing:.02em;color:var(--l-ink);scroll-margin-top:.75rem}
.l-doc>.l-lead+h2,.l-doc>h2:first-child{margin-top:clamp(2rem,4vw,2.8rem)}
.l-doc h2::before{content:counter(l-sec);flex:none;min-width:1.6rem;font:italic 500 1.2em/1 var(--l-head);color:var(--l-brass)}
.l-doc h2+*{margin-top:.8rem}
.l-doc h3{font:600 1.2rem/1.3 var(--l-head);letter-spacing:.02em;color:var(--l-ink);margin-top:1.8rem}
.l-doc h3+*{margin-top:.5rem}
.l-doc strong{font-weight:600;color:var(--l-ink)}
.l-doc [id]{scroll-margin-top:.75rem}
.l-doc code{font:500 .86em/1.4 ui-monospace,Menlo,Consolas,monospace;color:var(--l-ink);background:var(--l-tint);padding:.1em .38em;border-radius:2px;overflow-wrap:anywhere}

/* links: brass, underline sweeps on hover */
.l-page a:not(.l-mail){color:var(--l-brass);text-decoration:underline;text-decoration-color:rgba(125,90,22,.4);text-decoration-thickness:1px;text-underline-offset:.2em;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s ease}
.l-page a:not(.l-mail):hover{background-size:100% 1px}
.l-page a:focus-visible,.l-page .l-tablewrap:focus-visible{outline:2px solid var(--l-green);outline-offset:3px}

/* lists inside the text */
.l-doc ul.l-list,.l-doc ol.l-list{display:grid;gap:.7rem}
.l-doc ul.l-list>li{position:relative;padding-left:1.5rem}
.l-doc ul.l-list>li::before{content:"";position:absolute;left:0;top:.82em;width:.8rem;height:1px;background:var(--l-brass)}
.l-doc ol.l-list{counter-reset:l-li}
.l-doc ol.l-list>li{counter-increment:l-li;position:relative;padding-left:2.1rem}
.l-doc ol.l-list>li::before{content:counter(l-li) ".";position:absolute;left:0;top:0;font:italic 500 1.15em/1.5 var(--l-head);color:var(--l-brass)}

/* company data: ruled definition list */
.l-facts{display:grid;border-top:1px solid var(--l-line-strong);margin-top:1.1rem}
.l-facts>div{display:grid;grid-template-columns:minmax(8.5rem,.32fr) minmax(0,1fr);gap:.4rem 1.5rem;padding:.8rem 0;border-bottom:1px solid var(--l-line)}
.l-facts dt{font:600 .8rem/1.6 var(--l-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--l-muted);padding-top:.15rem}
.l-facts dd{overflow-wrap:anywhere}

/* the sentence the buyer ticks at checkout */
.l-quote{border-left:1px solid var(--l-brass-l);padding:.2rem 0 .2rem 1.4rem;margin-block:1.4rem;font:italic 500 clamp(1.2rem,2vw,1.4rem)/1.5 var(--l-head);color:var(--l-ink)}

/* tables with hairlines (cookies, legal bases) */
.l-tablewrap{overflow-x:auto;margin-top:1.1rem;-webkit-overflow-scrolling:touch}
.l-table{width:100%;min-width:40rem;border-collapse:collapse;font-size:.95rem;line-height:1.55}
.l-table caption{text-align:left;font:600 .8rem/1.4 var(--l-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--l-muted);padding-bottom:.7rem}
.l-table th,.l-table td{text-align:left;vertical-align:top;padding:.85rem 1rem .85rem 0;border-bottom:1px solid var(--l-line)}
.l-table thead th{font:600 .78rem/1.4 var(--l-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--l-muted);border-top:1px solid var(--l-line-strong);border-bottom:1px solid var(--l-line-strong)}
.l-table tbody th{font-weight:600;color:var(--l-ink)}
.l-table td:last-child,.l-table th:last-child{padding-right:0}

.l-closing{margin-top:clamp(2.4rem,5vw,3.4rem);padding-top:1.1rem;border-top:1px solid var(--l-line);font-size:.95rem;line-height:1.6;color:var(--l-muted)}

/* ---------- contact: asymmetric, text left, photo right ---------- */
.l-contact{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2.2rem,6vw,6rem);padding-block:clamp(2.6rem,7vw,5.5rem) clamp(3.5rem,8vw,6.5rem);align-items:start}
.l-contact__text{max-width:40rem;font-size:1.05rem;line-height:1.7}
.l-contact__text h1{font:500 clamp(2.5rem,5.6vw,4.2rem)/1.04 var(--l-head);letter-spacing:.02em;color:var(--l-ink);text-wrap:balance;margin-bottom:1.3rem}
.l-contact__text h2{font:600 clamp(1.4rem,2.2vw,1.7rem)/1.25 var(--l-head);letter-spacing:.02em;color:var(--l-ink);margin:clamp(2rem,4vw,2.8rem) 0 .8rem}
.l-mail{display:inline-block;margin:1.4rem 0 .4rem;padding-bottom:.25rem;font:500 clamp(1.45rem,3.2vw,2.15rem)/1.2 var(--l-head);letter-spacing:.02em;color:var(--l-ink);text-decoration:none;overflow-wrap:anywhere;
  background:linear-gradient(var(--l-brass-l),var(--l-brass-l)) 0 100%/100% 1px no-repeat,linear-gradient(var(--l-brass),var(--l-brass)) 0 100%/0 1px no-repeat;transition:background-size .5s ease,color .3s}
.l-mail:hover{color:var(--l-brass);background-size:100% 1px,100% 1px}
.l-mail:focus-visible{outline:2px solid var(--l-green);outline-offset:4px}
.l-steps{counter-reset:l-st;border-top:1px solid var(--l-line-strong)}
.l-steps li{counter-increment:l-st;display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.2rem .8rem;padding:.85rem 0;border-bottom:1px solid var(--l-line)}
.l-steps li::before{content:counter(l-st);font:italic 500 1.6rem/1.2 var(--l-head);color:var(--l-brass)}
.l-note{margin-top:1rem}
.l-before{border-top:1px solid var(--l-line-strong)}
.l-before li{padding:.85rem 0;border-bottom:1px solid var(--l-line)}
.l-before b{display:block;font:600 .8rem/1.6 var(--l-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--l-muted);margin-bottom:.15rem}
.l-photo{position:sticky;top:var(--l-anchor);padding:10px}
.l-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;outline:1px solid var(--l-line-strong);outline-offset:10px}
.l-photo figcaption{margin-top:1.7rem;font-size:.9rem;line-height:1.5;color:var(--l-muted)}

@keyframes l-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:900px){
  .l-band .l-in{grid-template-columns:minmax(0,1fr)}
  .l-updated{justify-self:start;text-align:left}
  .l-sheet{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .l-side{position:static;order:2;padding-top:1.4rem;border-top:1px solid var(--l-line)}
  .l-contact{grid-template-columns:minmax(0,1fr)}
  .l-photo{position:static;max-width:30rem}
}
@media (max-width:560px){
  .l-doc{font-size:1.02rem}
  .l-doc h2{gap:.6rem}
  .l-facts>div{grid-template-columns:1fr;gap:.1rem}
  .l-table{min-width:36rem}
  .l-doc ul.l-list>li,.l-doc ol.l-list>li{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .l-band::after{animation:none}
  .l-page a:not(.l-mail),.l-mail{transition:none}
}

/* code samples (cookie names) stay readable: browser default would shrink them below 12px */
.l-doc code,.l-doc td code{font-size:.9rem}