/* =====================================================
   ATENEU POPULAR DE LA RIBERA — tokens v2
   Tres tintes + paper. Gasoek One + Space Grotesk.
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Gasoek+One&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* --- tintes (els colors dels cartells) --- */
  --groc: #D59C55;
  --groc-fosc: #8A5A1E;
  --marro: #9E614C;
  --marro-fosc: #5C3325;
  --verd: #008768;
  --verd-fosc: #00543F;

  /* --- neutres --- */
  --crema: #F7E9DF;   /* el paper */
  --tinta: #211511;   /* el negre */

  /* --- semàntics --- */
  --fons: var(--crema);
  --text: var(--tinta);
  --text-suau: var(--marro-fosc);
  --accent: var(--verd);

  /* --- tipografia --- */
  --font-titol: 'Gasoek One', 'Arial Black', sans-serif;
  --font-text: 'Space Grotesk', 'Helvetica Neue', sans-serif;

  --mida-crit: clamp(2.6rem, 9vw, 7rem);
  --mida-titol: clamp(2rem, 5.5vw, 4rem);
  --mida-sub: clamp(1.15rem, 2.2vw, 1.5rem);
  --mida-text: 1.0625rem;
  --mida-peu: 0.875rem;

  --espai: clamp(1.25rem, 4vw, 3rem);
  --ombra-paper: 0.5rem 0.5rem 0 var(--tinta);
  --gir-1: -1.2deg;
  --gir-2: 0.8deg;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fons);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--mida-text);
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: var(--font-titol);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
  overflow-wrap: break-word;
}

h1 { font-size: var(--mida-crit); }
h2 { font-size: var(--mida-titol); }
h3 { font-size: var(--mida-sub); font-family: var(--font-text); font-weight: 700; }

p { margin: 0 0 1em; max-width: 65ch; }
a { color: inherit; text-underline-offset: 3px; }

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

/* --- seccions tinta --- */
.tinta { padding: calc(var(--espai) * 2) var(--espai); }
.tinta--groc  { background: var(--groc);  color: var(--tinta); }
.tinta--marro { background: var(--marro); color: var(--crema); }
.tinta--verd  { background: var(--verd);  color: var(--crema); }
.tinta--negre { background: var(--tinta); color: var(--crema); }
.tinta--crema { background: var(--crema); color: var(--tinta); }

/* --- paper retallat --- */
.paper {
  background: var(--crema);
  color: var(--tinta);
  padding: var(--espai);
  box-shadow: var(--ombra-paper);
  transform: rotate(var(--gir-1));
}
.paper:nth-child(even) { transform: rotate(var(--gir-2)); }

/* --- botons --- */
.boto {
  display: inline-block;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  text-transform: none;
  padding: 0.85rem 1.6rem;
  border: 3px solid var(--tinta);
  background: var(--crema);
  color: var(--tinta);
  box-shadow: 0.35rem 0.35rem 0 var(--tinta);
  transition: transform 120ms ease, box-shadow 120ms ease;
  cursor: pointer;
}
.boto:hover { transform: translate(0.15rem, 0.15rem); box-shadow: 0.2rem 0.2rem 0 var(--tinta); }
.boto:active { transform: translate(0.35rem, 0.35rem); box-shadow: none; }
.boto--ple { background: var(--tinta); color: var(--crema); }
.boto--verd { background: var(--verd-fosc); color: var(--crema); border-color: var(--verd-fosc); box-shadow: 0.35rem 0.35rem 0 var(--tinta); }

/* --- etiquetes --- */
.etiqueta {
  display: inline-block;
  font-weight: 700;
  font-size: var(--mida-peu);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border: 2px solid currentColor;
}
.tinta--marro .etiqueta,
.tinta--verd .etiqueta,
.tinta--negre .etiqueta {
  background: var(--crema);
  color: var(--tinta);
  border-color: var(--tinta);
}

/* --- marquesina --- */
.marquesina {
  overflow: hidden;
  white-space: nowrap;
  padding: 0.6rem 0;
  border-top: 3px solid var(--tinta);
  border-bottom: 3px solid var(--tinta);
  font-family: var(--font-titol);
  text-transform: uppercase;
  font-size: 1.4rem;
}
.marquesina__pista {
  display: inline-block;
  animation: marquesina 22s linear infinite;
}
@keyframes marquesina {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquesina__pista { animation: none; }
  .boto { transition: none; }
}