/* ==========================================================================
   Avís legal i política de privacitat — full d'estil
   Mateixa línia que el web: la fusta, la goma negra, el paper sorra i el punt
   al final dels títols. Un sol full, com la pàgina de la setmana màgica: això
   és un document, no un taco de fitxes.

   Les mides surten de les mateixes variables, o sigui que si un dia canvia el
   dit al web, aquí canvia sol.
   ========================================================================== */

:root{
  --sorra:#D9C0A1;
  --bosc:#2B4034;
  --tinta:#1E1E1E;
  --tinta-clara:#F2EFE6;
  --negre:#000000;
  --fusta-fosca:#4A2F18;
  --os:#F1EEE6;

  --dit:clamp(26px, 7vw, 40px);
  --full-w:min(500px, calc(var(--vw, 100vw) - 2 * var(--dit)));
  --tauler-w:min(calc(var(--full-w) + 2 * var(--dit)), var(--vw, 100vw));
  --cos-pad:calc(var(--dit) * 0.78);

  --goma-dalt:calc(var(--dit) * 0.5);
  --goma-gruix:clamp(26px, calc(var(--dit) * 0.85), 34px);
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Poppins',-apple-system,Segoe UI,Arial,sans-serif;
  color:var(--tinta);
  background:var(--os);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

:focus-visible{outline:3px solid var(--negre);outline-offset:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--sorra);color:var(--tinta);
  padding:12px 20px;font-weight:700;z-index:200}
.skip:focus{left:0}

.escena{
  position:relative;
  width:var(--tauler-w);
  margin:0 auto var(--dit);
  padding:calc(var(--dit) * 0.5) 0 var(--dit);
  background:
    radial-gradient(ellipse 110% 70% at 50% 18%,
      rgba(255,226,186,.10) 0%, rgba(0,0,0,0) 58%, rgba(0,0,0,.36) 100%),
    url("../../img/taula.jpg") center top/cover;
  background-color:var(--fusta-fosca);
  box-shadow:0 0 40px rgba(0,0,0,.55);
}

.full{
  position:relative;
  width:var(--full-w);
  margin:0 auto;
  background:var(--sorra);
  box-shadow:0 6px 14px rgba(34,16,0,.34),
             inset 0 1px 0 rgba(255,245,230,.22);
}

.goma{
  position:absolute;z-index:10;
  top:var(--goma-dalt);
  left:calc(var(--dit) * -1 - 2px);
  right:calc(var(--dit) * -1 - 2px);
  height:var(--goma-gruix);
  background:var(--negre);
  box-shadow:0 2px 6px rgba(0,0,0,.40);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--dit);gap:10px;
  color:var(--tinta-clara);
}
.lloc{
  font-size:clamp(9px, calc(var(--full-w) * 0.021), 12px);
  font-weight:700;letter-spacing:.02em;white-space:nowrap;
  padding-left:var(--cos-pad);
}
.accio{
  position:relative;flex:none;
  border:1px solid currentColor;background:transparent;color:inherit;
  font-family:inherit;font-weight:700;text-decoration:none;
  font-size:clamp(8px, calc(var(--full-w) * 0.018), 10px);
  letter-spacing:.09em;text-transform:uppercase;
  padding:3px 9px;line-height:1.5;
  transition:background .2s,color .2s;
}
.accio::after{content:"";position:absolute;left:-4px;right:-4px;
  top:50%;transform:translateY(-50%);height:44px}
.accio:hover{background:var(--tinta-clara);color:var(--negre)}

.cos{
  padding:calc(var(--goma-dalt) + var(--goma-gruix) + var(--full-w) * 0.045)
          var(--cos-pad) var(--dit) var(--cos-pad);
}

/* ---------- la tipografia ----------
   Letra menuda, i a propòsit. Això és un text legal: ha de ser-hi, ha de
   poder-se llegir i no ha de competir amb res. Abans el titular «Avís legal»
   era més gros que el logotip de la casa —el que mana aquí és qui signa, no
   el nom del document— i el cos anava a mida de pàgina de lectura, que per a
   un text que ningú no llegeix de cap a peus ocupava massa.

   Tot ha baixat d'un cop: titular, epígrafs, cos i marges. El full també
   s'ha estret, perquè amb la lletra petita una línia de 640 píxels es fa
   inacabable. */
.membret{line-height:0}
.membret img{display:block;height:auto;
  width:clamp(118px, calc(var(--full-w) * 0.3), 165px)}

h1{
  margin-top:18px;
  font-size:clamp(17px, calc(var(--full-w) * 0.042), 22px);
  font-weight:800;line-height:1.1;letter-spacing:-.015em;
}
.peu-titol{
  font-size:clamp(8.5px, calc(var(--full-w) * 0.019), 10px);
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  opacity:.62;margin-top:5px;
}
h2{
  margin-top:21px;
  font-size:clamp(11.5px, calc(var(--full-w) * 0.0245), 13.5px);
  font-weight:700;line-height:1.25;
}
p,li{
  font-size:clamp(10.5px, calc(var(--full-w) * 0.0215), 12px);
  font-weight:400;line-height:1.5;
}
p{margin-top:8px}
h2 + p{margin-top:9px}
ul{list-style:none;margin-top:8px}
li{position:relative;padding-left:13px;margin-bottom:5px}
li::before{content:".";position:absolute;left:2px;top:0;font-weight:700}

a{color:var(--bosc);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2.5px}
a:hover{text-decoration-thickness:2.5px}

dl{margin-top:9px}
dt{
  font-size:clamp(9.5px, calc(var(--full-w) * 0.0185), 10.5px);
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  opacity:.68;margin-top:10px;
}
dd{
  font-size:clamp(10.5px, calc(var(--full-w) * 0.0215), 12px);
  line-height:1.45;margin-top:1px;
}

.fil{border:0;height:1px;background:rgba(30,30,30,.22);
  margin:calc(var(--dit) * 0.6) 0 0}

/* ---------- l'avís que això encara és un esborrany ---------- */
/* Va a dalt de tot i crida: és el que impedeix que això es publiqui per
   descuit creient que ja és un text legal. */
.esborrany{
  margin-top:20px;
  background:#FFF3C4;color:#6B5600;
  border-left:4px solid #B79400;
  padding:11px 13px;
}
.esborrany strong{font-weight:700}
.esborrany p{margin-top:7px}
.esborrany p:first-child{margin-top:0}

.pendent{background:#FFF3C4;color:#6B5600;padding:1px 5px;
  border-bottom:1px dotted #B79400;font-style:normal}

/* El que cal que ompli la gestoria: es veu d'una llegua. */
dd .pendent{display:inline-block}

.tornar{
  display:block;text-align:center;
  margin:0 auto calc(var(--dit) * 1.2);
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta);opacity:.72;text-decoration:none;
}
.tornar:hover{opacity:1;text-decoration:underline}

@media(prefers-reduced-motion:reduce){*{transition:none !important}}
