/* ============================================================
   AGUADULCE — páginas legales · dirección EDITORIAL
   (aviso-legal.html · privacidad.html · cookies.html)

   No es una "página de documentación" centrada: es un dossier
   editorial. Masthead de tipografía grande, numerales de sección
   dorados colgados al margen (el idioma de los "actos" de la home),
   índice lateral fijo con scrollspy, barra de progreso de lectura
   (eco del riel solar) y grano cálido. Reutiliza paleta + tipos
   del sitio (Playfair Display SC / Playfair Display + Karla).
   ============================================================ */
:root{
  --arena:#F4EDDD; --sand:#F1EADC; --cal:#FBF7EF;
  --alboran:#11272B; --alboran-2:#0A1A1D;
  --piscina-deep:#15666C; --azafran:#A87B1E; --azafran-2:#D9B978; --brasa:#9C7016; --brasa-deep:#6E4E0F;
  --tinta:#211C16; --tinta-soft:rgba(33,28,22,.74); --line:rgba(33,28,22,.14); --line-soft:rgba(33,28,22,.07);
  --serif:"Playfair Display", Georgia, serif;
  --display:"Playfair Display SC","Playfair Display", Georgia, serif;
  --sans:"Karla", system-ui, sans-serif;
  --ease:cubic-bezier(.16,.84,.3,1);
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--sand);color:var(--tinta);
  font-family:var(--sans);font-size:18px;line-height:1.72;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--brasa-deep);text-decoration:none}
:focus-visible{outline:2.5px solid var(--azafran);outline-offset:3px;border-radius:2px}
::selection{background:var(--azafran-2);color:var(--tinta)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--tinta);color:var(--arena);padding:12px 18px;border-radius:0 0 6px 0}
.skip-link:focus{left:0;top:0}

/* grano cálido + barra de progreso de lectura (eco del riel solar) */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.lbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;background:rgba(33,28,22,.06)}
.lbar i{display:block;height:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--azafran-2),var(--azafran) 50%,var(--brasa));transition:transform .1s linear}

/* ---------- cabecera ---------- */
.lh{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px clamp(20px,5vw,64px);background:rgba(241,234,220,.84);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.lh-brand{display:flex;align-items:center;gap:11px;color:var(--tinta)}
.lh-brand:hover{text-decoration:none}
.lh-brand img{width:44px;height:auto}
.lh-brand b{font-family:var(--display);font-weight:700;font-size:1.22rem;letter-spacing:.01em;line-height:1}
.lh-back{font-size:.86rem;font-weight:600;letter-spacing:.02em;color:var(--tinta-soft);
  display:inline-flex;align-items:center;gap:8px;min-height:44px;transition:color .25s}
.lh-back:hover{color:var(--brasa-deep);text-decoration:none}
.lh-back svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.lh-back:hover svg{transform:translateX(-3px)}

/* ---------- masthead ---------- */
.lmast{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;
  padding:clamp(52px,9vw,104px) clamp(20px,5vw,64px) clamp(28px,4vw,42px)}
.eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--brasa-deep);display:inline-flex;align-items:center;gap:.8em;margin:0}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.55}
.lmast h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.7rem,7vw,5rem);line-height:1.0;
  letter-spacing:-.018em;margin:.3em 0 0;max-width:15ch}
.lmast h1 em{font-style:italic;color:var(--brasa-deep)}
.lmast-rule{height:1px;width:100%;margin:clamp(24px,4vw,38px) 0 0;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--azafran),rgba(168,123,30,0));animation:lrule 1s .15s var(--ease) forwards}
@keyframes lrule{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.lmast-rule{animation:none;transform:scaleX(1)}}
.lmast-meta{display:flex;flex-wrap:wrap;gap:6px 28px;margin:18px 0 0;font-size:.82rem;letter-spacing:.02em;color:var(--tinta-soft)}
.lmast-meta b{font-weight:700;color:var(--tinta)}
.lmast-meta .k{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brasa-deep);font-weight:700;margin-right:.55em}

/* ---------- rejilla a dos columnas ---------- */
.lwrap{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;
  padding:0 clamp(20px,5vw,64px) clamp(58px,9vw,116px);
  display:grid;grid-template-columns:1fr;gap:clamp(8px,4vw,72px)}
@media (min-width:1000px){.lwrap{grid-template-columns:244px minmax(0,1fr)}}

/* ---------- índice lateral (scrollspy) ---------- */
.ltoc{display:none}
@media (min-width:1000px){
  .ltoc{display:block;position:sticky;top:92px;align-self:start;max-height:calc(100vh - 124px);overflow:auto;
    -ms-overflow-style:none;scrollbar-width:none}
  .ltoc::-webkit-scrollbar{display:none}
  .ltoc-label{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
    color:var(--brasa-deep);margin:0 0 14px}
  .ltoc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
  .ltoc a{display:flex;gap:11px;align-items:baseline;padding:8px 0 8px 16px;margin-left:-1px;
    border-left:1.5px solid transparent;font-size:.9rem;line-height:1.3;color:var(--tinta-soft);
    transition:color .22s var(--ease),border-color .22s var(--ease)}
  .ltoc a .n{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.02em;color:var(--azafran);flex:none;
    font-variant-numeric:tabular-nums}
  .ltoc a:hover{color:var(--tinta)}
  .ltoc a:hover{text-decoration:none}
  .ltoc a.is-active{color:var(--alboran);border-left-color:var(--azafran);font-weight:600}
  .ltoc a.is-active .n{color:var(--brasa-deep)}
  .ltoc-card{margin-top:24px;padding:18px 18px 20px;border:1px solid var(--line);border-radius:13px;
    background:var(--cal);box-shadow:0 18px 40px -30px rgba(26,22,16,.5)}
  .ltoc-card .t{font-family:var(--serif);font-weight:600;font-size:1.06rem;line-height:1.2;color:var(--alboran);margin:0}
  .ltoc-card p{font-size:.84rem;line-height:1.5;color:var(--tinta-soft);margin:7px 0 0}
  .ltoc-card a{font-weight:600;font-size:.86rem;display:inline-block;margin-top:9px;word-break:break-word}
}

/* ---------- prosa / secciones ---------- */
.lprose{min-width:0}
.lintro{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(1.22rem,2.3vw,1.58rem);
  line-height:1.4;color:var(--tinta);max-width:34ch;margin:0 0 6px}

.todo{margin:6px 0 34px;padding-top:15px;border-top:1px solid var(--line);
  font-size:.9rem;line-height:1.56;color:var(--tinta-soft)}
.todo .tag{font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brasa-deep);margin-right:.8em;white-space:nowrap}
.todo b{color:var(--brasa-deep)}
.todo code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.84em;background:rgba(33,28,22,.07);
  padding:1px 5px;border-radius:4px;color:var(--tinta)}

.lsec{scroll-margin-top:88px;margin-top:clamp(32px,4.6vw,52px);padding-top:clamp(30px,4.4vw,48px);
  border-top:1px solid var(--line)}
.lsec:first-of-type{margin-top:clamp(18px,3vw,28px);padding-top:clamp(18px,3vw,28px);border-top:none}
.lsec h2{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.9vw,2.05rem);
  line-height:1.16;letter-spacing:-.01em;color:var(--alboran)}
.lbody{min-width:0}
.lbody>:first-child{margin-top:16px}
.lbody p{margin:14px 0 0;max-width:68ch}
.lbody h3{font-size:1.05rem;font-weight:700;margin:24px 0 0;color:var(--tinta)}
.lbody ul{margin:14px 0 0;padding-left:1.2em;max-width:68ch}
.lbody li{margin:8px 0;padding-left:4px}
.lbody li::marker{color:var(--azafran)}
.lbody strong{font-weight:700;color:var(--tinta)}
.lbody a{font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(110,78,15,.45)}
.lbody a:hover{text-decoration-color:var(--brasa-deep)}
/* placeholders por completar */
.fill{background:rgba(156,112,22,.15);border-bottom:1px dashed var(--brasa-deep);color:var(--brasa-deep);
  font-weight:600;padding:0 3px;border-radius:3px}

/* aviso de maqueta (demo de portfolio): sin titular real, datos ficticios */
.demo-note{margin:0 0 26px;padding:14px 18px;border:1px solid rgba(110,78,15,.5);border-radius:10px;
  background:rgba(156,112,22,.08);color:var(--tinta);font-size:.94rem;line-height:1.55;max-width:68ch}
.demo-note b{color:var(--brasa-deep)}

/* tabla de cookies */
.ltable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:13px;margin:18px 0 0;background:var(--cal);
  box-shadow:0 18px 44px -34px rgba(26,22,16,.55)}
.ltable{width:100%;border-collapse:collapse;font-size:.92rem;min-width:560px}
.ltable th,.ltable td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--line);vertical-align:top}
.ltable th{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brasa-deep);font-weight:700;
  background:rgba(33,28,22,.025)}
.ltable td{color:var(--tinta-soft);line-height:1.5}
.ltable td:first-child{color:var(--tinta);font-weight:600}
.ltable tr:last-child td{border-bottom:none}

/* ---------- pie ---------- */
.lf{position:relative;z-index:2;background:var(--tinta);color:var(--arena);padding:46px clamp(20px,5vw,64px) 32px;margin-top:8px}
.lf-in{max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.lf-brand{display:flex;align-items:center;gap:11px;color:var(--arena)}
.lf-brand:hover{text-decoration:none}
.lf-brand b{font-family:var(--display);font-weight:700;font-size:1.08rem}
.lf-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.lf-links a{color:rgba(244,237,221,.78);font-size:.92rem;font-weight:500}
.lf-links a:hover{color:var(--azafran-2);text-decoration:none}
.lf-links a[aria-current=page]{color:var(--azafran-2);font-weight:700}
.lf-copy{max-width:var(--wrap);margin:24px auto 0;font-size:.74rem;letter-spacing:.04em;color:rgba(244,237,221,.55)}

@media (max-width:520px){
  body{font-size:17px}
  .lf-in{flex-direction:column;align-items:flex-start}
}