/* ═══════════════════════════════════════════════════════════════
   BERNARDETTE M. — legal pages
   Same voice as the site, tuned for reading: one column, generous
   measure, nothing to distract from the text. Shared by
   privacidad.html and cookies.html.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --midnight:#1E0C32;
  --navy:#2E144C;
  --violet:#8248C9;
  --indigo:#7A52C4;
  --turquoise:#66BFCB;
  --paper:#F8F5FB;
  --ink:#1E0C32;
  --ink-soft:rgba(30,12,50,.68);
  --ink-faint:rgba(30,12,50,.64);
  --line:rgba(30,12,50,.11);
  --indigo-ink:#66349E;
  --gutter:clamp(1.5rem,5vw,6.5rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --display-face:"Familjen Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --text-face:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--text-face);font-weight:400;
  font-size:clamp(.95rem,.92rem + .16vw,1.02rem);line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--indigo-ink);text-decoration:none;border-bottom:1px solid rgba(102,52,158,.28);transition:border-color .4s ease}
a:hover{border-color:var(--indigo-ink)}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:2px}

/* ── Chrome ─────────────────────────────────────────────────── */
.bar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:clamp(.85rem,1.8vh,1.15rem) var(--gutter);
  background:rgba(248,245,251,.86);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 1px 0 var(--line);
}
.brand{display:flex;align-items:center;gap:.65rem;border:0}
.mark{position:relative;display:block;width:30px;aspect-ratio:326/306;flex:none}
.mark__ink{display:block;width:100%;height:100%;background:currentColor;
  -webkit-mask:url("logo.png") center/contain no-repeat;mask:url("logo.png") center/contain no-repeat}
.brand__name{font-family:var(--display-face);font-weight:500;font-size:.98rem;letter-spacing:.13em;padding-left:.13em;color:var(--ink)}
.back{font-size:.8rem;font-weight:500;border:0;color:var(--ink-soft)}
.back:hover{color:var(--indigo-ink)}

/* ── Document ───────────────────────────────────────────────── */
main{max-width:44rem;margin:0 auto;padding:clamp(3rem,9vh,6rem) var(--gutter) clamp(4rem,10vh,7rem)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.2rem}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--indigo-ink);display:block}
h1{font-family:var(--display-face);font-weight:500;font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.06;letter-spacing:-.038em;margin-bottom:1rem}
.updated{font-size:.84rem;color:var(--ink-faint);margin-bottom:clamp(2.4rem,5vh,3.4rem)}
h2{font-family:var(--display-face);font-weight:500;font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.028em;line-height:1.2;margin:clamp(2.4rem,5vh,3.2rem) 0 .9rem}
h3{font-size:1rem;font-weight:600;margin:1.6rem 0 .5rem}
p{color:var(--ink-soft);margin-bottom:1rem}
ul,ol{color:var(--ink-soft);margin:0 0 1.2rem 1.1rem}
li{margin-bottom:.5rem}
strong{color:var(--ink);font-weight:600}
hr{border:0;height:1px;background:var(--line);margin:clamp(2.4rem,5vh,3.2rem) 0}

/* Anything the operator must replace before publishing. */
.fill{
  background:rgba(130,72,201,.10);
  border-bottom:1px dashed rgba(130,72,201,.55);
  padding:.05em .3em;border-radius:3px;
  font-weight:600;color:#4B2E6D;white-space:nowrap;
}
.notice{
  border:1px solid rgba(130,72,201,.28);background:rgba(130,72,201,.05);
  border-radius:12px;padding:1.2rem 1.35rem;margin:2rem 0;
}
.notice p{margin:0;font-size:.9rem}
.notice p+p{margin-top:.7rem}
.notice b{color:var(--ink)}

table{width:100%;border-collapse:collapse;margin:1.2rem 0 1.6rem;font-size:.9rem}
th,td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
td{color:var(--ink-soft)}
.scroll-x{overflow-x:auto}

footer{border-top:1px solid var(--line);padding:clamp(1.8rem,4vh,2.6rem) var(--gutter);
  display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;align-items:center;
  font-size:.78rem;color:var(--ink-faint)}
footer a{color:var(--ink-faint);border:0}
footer a:hover{color:var(--indigo-ink)}
.foot-links{display:flex;gap:1.4rem;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}

/* Crédito de diseño, en el pie de las páginas legales. Aquí el fondo
   es claro; --ink-faint se quedaba en 2,72:1, por debajo del mínimo
   legible, así que va un tono más firme. */
.foot__by{font-size:.82rem;color:rgba(30,12,50,.72)}
.foot__by a{color:rgba(30,12,50,.86);text-decoration:underline;text-underline-offset:3px}
.foot__by a:hover{color:var(--indigo-ink)}