/* CAMON FEST — colors tretes del cartell */
:root {
  --crema: #f4eadb;
  --menta: #afdfb5;
  --menta-fosc: #5fae79;
  --pressec: #fbc09b;
  --taronja: #f07a45;
  --marro: #5b2410;
  --tinta: #1b120c;
  --paper: #fffaf2;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.fest {
  margin: 0;
  color: var(--tinta);
  background: var(--crema);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.45;
  overflow-x: hidden;
}
a { color: var(--marro); }

/* Taques de color del fons, com al cartell */
.blobs { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.blobs i { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .85; }
.blobs .b1 { width: 60vw; height: 60vw; left: -22vw; top: -22vw; background: var(--menta); }
.blobs .b2 { width: 45vw; height: 45vw; right: -15vw; top: 8vh; background: #cfe9c3; }
.blobs .b3 { width: 70vw; height: 60vw; right: -25vw; bottom: -30vw; background: var(--pressec); }
.blobs .b4 { width: 40vw; height: 40vw; left: -12vw; bottom: -12vw; background: #f7cdb6; }

/* Barra superior: data a l'esquerra, lloc a la dreta */
.bar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 24px clamp(16px, 4vw, 48px) 0;
  font-weight: 800; font-size: clamp(18px, 2.4vw, 28px); line-height: 1.1;
}
.bar small { font-weight: 600; font-size: .6em; opacity: .7; }
.bar-place { text-align: right; max-width: 9em; }
.bar nav { display: flex; gap: 6px; font-size: 15px; font-weight: 600; margin-top: 4px; }
.bar nav a { text-decoration: none; color: var(--tinta); padding: 6px 12px; border-radius: 99px; background: rgba(255, 250, 242, .55); }
.bar nav a:hover { background: var(--paper); }

/* Portada */
.hero { position: relative; text-align: center; padding: 24px 16px 72px; }
.hero h1 { margin: 0; }
.logo {
  width: min(620px, 88vw); height: auto;
  filter: drop-shadow(0 10px 0 rgba(91, 36, 16, .18));
  animation: bot 4s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes bot { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .logo { animation: none; } html { scroll-behavior: auto; } }
.lema { font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; margin: 12px auto 28px; max-width: 22em; }
.dd { position: absolute; z-index: -1; opacity: .55; mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.dd-l { left: -40px; top: 40px; width: 300px; }
.dd-r { right: -30px; top: 0; width: 260px; }

/* Botó amb contorn gruixut, com el logo */
.btn {
  display: inline-block; text-decoration: none; font-weight: 800; color: var(--paper);
  background: var(--taronja); border: 3px solid var(--marro); border-radius: 999px;
  padding: 12px 26px; box-shadow: 0 5px 0 var(--marro);
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--marro); }
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--marro); }
.btn.big { font-size: 22px; padding: 14px 34px; }

section { max-width: 1040px; margin: 0 auto; padding: 56px 16px; }
.sec {
  font-size: clamp(34px, 6vw, 56px); font-weight: 800; letter-spacing: -.03em; margin: 0 0 28px;
  color: var(--marro);
}
.small-sec { font-size: 22px; letter-spacing: 0; }

/* Cartell */
.cartell { text-align: center; }
.dies { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.dia-tag {
  display: inline-block; font-weight: 800; font-size: 18px; padding: 6px 16px; border-radius: 99px;
  border: 2.5px solid var(--marro); transform: rotate(-3deg);
}
.dia-tag.t0 { background: var(--menta); }
.dia-tag.t1 { background: var(--pressec); transform: rotate(2deg); }
.dia ul { list-style: none; padding: 0; margin: 18px 0 0; }
.dia li { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.15; font-weight: 400; }
.dia li:first-child { font-weight: 800; }

/* Entrades: targeta tipus tiquet */
.tiquet {
  display: grid; grid-template-columns: 1fr 1.4fr; background: var(--paper);
  border: 3px solid var(--marro); border-radius: 28px; box-shadow: 0 8px 0 var(--marro); overflow: hidden;
}
.tiquet-info { padding: 32px; background: linear-gradient(160deg, #cfeccf, var(--pressec)); border-right: 3px dashed var(--marro); }
.tiquet-info .sec { margin-bottom: 16px; }
.tiquet-botiga { padding: 28px; min-width: 0; }
.tipus { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.tipus li { background: rgba(255, 250, 242, .75); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; }
.tipus strong { font-size: 20px; }
.tipus span { font-size: 15px; opacity: .75; }
.code { display: flex; gap: 8px; margin-bottom: 16px; }
.code input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 10px 14px; border: 2.5px solid var(--marro); border-radius: 99px; background: #fff; }
.code button { font: inherit; font-size: 16px; font-weight: 800; background: var(--menta); color: var(--tinta); border: 2.5px solid var(--marro); border-radius: 99px; padding: 8px 18px; cursor: pointer; }
.note { color: #166534; font-size: 15px; margin: -6px 0 12px; }
.small { font-size: 14px; opacity: .75; }
.aviat { font-size: 22px; font-weight: 600; }
.widget { min-height: 120px; }
.msg { padding: 12px 14px; border-radius: 12px; background: #fee2e2; color: #991b1b; font-size: 15px; }
.msg small { word-break: break-word; }

/* Info */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cards article { background: rgba(255, 250, 242, .8); border: 2.5px solid var(--marro); border-radius: 22px; padding: 22px; }
.cards h3 { margin: 0 0 6px; font-size: 22px; color: var(--marro); }
.cards p { margin: 0; font-size: 16px; }

/* Sponsors */
.sponsors { padding-top: 16px; }
.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.logos span { display: grid; place-items: center; height: 84px; border: 2px dashed rgba(91, 36, 16, .45); border-radius: 16px; font-weight: 600; opacity: .7; background: rgba(255, 250, 242, .5); }

/* Peu */
.peu { position: relative; text-align: center; padding: 40px 16px 32px; overflow: hidden; }
.peu img { width: min(700px, 100%); opacity: .5; mix-blend-mode: multiply; display: block; margin: 0 auto -40px;
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 100%, #000 45%, transparent); mask-image: radial-gradient(ellipse 50% 70% at 50% 100%, #000 45%, transparent); }
.peu p { position: relative; font-size: 15px; margin: 0; }

@media (max-width: 760px) {
  body.fest { font-size: 16px; }
  .bar { flex-wrap: wrap; }
  .bar nav { order: 3; width: 100%; justify-content: center; }
  .dd { display: none; }
  .tiquet { grid-template-columns: 1fr; }
  .tiquet-info { border-right: 0; border-bottom: 3px dashed var(--marro); }
  section { padding: 40px 16px; }
}

/* Peu: enllaços legals */
.peu .legal-links { margin-top: 6px; font-size: 13px; opacity: .8; }

/* Pàgines legals */
body.legal .bar { align-items: center; }
.logo-petit img { display: block; width: 140px; height: auto; }
.doc { max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; background: rgba(255, 250, 242, .85); border: 2.5px solid var(--marro); border-radius: 24px; }
.doc { padding: 32px clamp(18px, 4vw, 44px); margin-top: 24px; }
.doc h2 { color: var(--marro); font-size: 22px; margin: 28px 0 8px; }
.doc p, .doc li { font-size: 16px; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 6px; }

/* Mode "aviat" i previsualització */
.aviat-main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 16px; }
.aviat-text { font-size: clamp(26px, 5vw, 44px); font-weight: 800; color: var(--marro); margin: 24px 0 8px; letter-spacing: -.02em; }
.aviat-ig a { font-weight: 600; font-size: 18px; color: var(--tinta); }
.preview-bar { position: sticky; top: 0; z-index: 10; background: var(--marro); color: var(--paper); text-align: center; font-size: 14px; font-weight: 600; padding: 8px 16px; }
.preview-bar a { color: var(--pressec); }