/* ═══════════════════════════════════════════════════════════════
   V2 · «Lleida, un quadern obert» — estètica paper / carbó
   Tokens + blocs de la portada narrativa + barra inferior.
   Carrega després del build de Vite (fitxer estàtic, sense rebuild).
   ═══════════════════════════════════════════════════════════════ */

:root {
    --usk-paper: #f6f1e7;
    --usk-paper-2: #efe7d8;
    --usk-ink: #2b2520;
    --usk-ink-60: rgba(43, 37, 32, .64);
    --usk-ink-30: rgba(43, 37, 32, .3);
    --usk-terracota: #c1663f;
    --usk-salvia: #8a9b7a;
    --usk-ocre: #d9a441;
}

/* ── Hero narratiu ─────────────────────────────────────────────── */
.v2-hero-quote {
    font-family: Georgia, 'Playfair Display', serif;
    font-size: clamp(1.7rem, 5.5vw, 3.4rem);
    line-height: 1.25;
    color: #fffaf2;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
    margin: .6rem 0 0;
}
.v2-hero-fallback {
    background: linear-gradient(160deg, #4a4038, #2b2520);
}
.v2-credit {
    position: absolute;
    bottom: 12px;
    left: 14px;
    z-index: 4;
    font-size: .72rem;
    font-family: Verdana, sans-serif;
    color: #fffaf2;
    background: rgba(43, 37, 32, .55);
    backdrop-filter: blur(3px);
    padding: 3px 10px;
    border-radius: 999px;
}

/* ── Seccions i tipografia del relat ───────────────────────────── */
.v2-section { padding: 3.2rem 0 2.6rem; }
.v2-container { max-width: 52rem; margin: 0 auto; padding: 0 1.1rem; }
.v2-kicker {
    font-family: Verdana, sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--usk-terracota);
    margin-bottom: .8rem;
}
.v2-h {
    font-family: Georgia, serif;
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--usk-ink);
    line-height: 1.25;
    margin-bottom: .3rem;
}
.v2-txt { font-size: .95rem; color: var(--usk-ink-60); line-height: 1.55; }
.v2-about { max-width: 42rem; }
.v2-link {
    display: inline-block;
    margin-top: .9rem;
    font-family: Verdana, sans-serif;
    font-size: .8rem;
    font-weight: 600;
    color: var(--usk-terracota);
    text-decoration: none;
    border-bottom: 2px solid rgba(193, 102, 63, .35);
}
.v2-link:hover { border-bottom-color: var(--usk-terracota); }

/* ── Targetes ──────────────────────────────────────────────────── */
.v2-card {
    background: #fdfaf3;
    border: 1.5px solid var(--usk-ink-30);
    border-radius: 1rem;
    box-shadow: 4px 4px 0 rgba(43, 37, 32, .07);
    padding: 1rem 1.1rem;
}
.v2-row-card { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.v2-row-card:hover { box-shadow: 4px 4px 0 rgba(193, 102, 63, .25); }

.v2-datebox {
    flex: 0 0 auto;
    text-align: center;
    border: 2px solid var(--usk-ink);
    border-radius: .7rem;
    padding: .35rem .7rem;
    font-family: Verdana, sans-serif;
    color: var(--usk-ink);
    background: var(--usk-paper);
}
.v2-datebox span { display: block; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; }
.v2-datebox b { font-size: 1.35rem; line-height: 1.1; }

.v2-trobada { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.v2-trobada-empty { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; border-style: dashed; }
.v2-tag {
    display: inline-block;
    font-family: Verdana, sans-serif;
    font-size: .66rem;
    border: 1px solid var(--usk-ink-30);
    border-radius: 999px;
    padding: 1px 8px;
    margin-right: 4px;
    color: var(--usk-salvia);
    font-weight: 700;
}

/* ── Botons ────────────────────────────────────────────────────── */
.v2-btn {
    display: inline-block;
    font-family: Verdana, sans-serif;
    font-size: .92rem;
    font-weight: 700;
    padding: .72rem 1.5rem;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .08s ease, box-shadow .08s ease;
}
.v2-btn:active { transform: scale(.97); }
.v2-btn-t { background: var(--usk-terracota); color: #fff7ee; box-shadow: 3px 3px 0 rgba(43, 37, 32, .18); }
.v2-btn-t:hover { background: #ad5733; color: #fff7ee; }
.v2-btn-o { border: 1.6px solid var(--usk-ink); color: var(--usk-ink); background: transparent; }
.v2-btn-o:hover { background: var(--usk-paper); color: var(--usk-ink); }
.v2-btn-s { font-size: .78rem; padding: .5rem 1.1rem; }

/* ── Com és una sortida ────────────────────────────────────────── */
.v2-paper-card { background: var(--usk-paper); border-top: 1.5px dashed var(--usk-ink-30); border-bottom: 1.5px dashed var(--usk-ink-30); }
.v2-steps { display: flex; gap: .8rem; margin-top: 1.2rem; }
.v2-step { flex: 1; text-align: center; border-top: 3px solid var(--usk-salvia); padding-top: .6rem; }
.v2-step b { font-family: Verdana, sans-serif; font-size: .85rem; color: var(--usk-ink); display: block; }
.v2-step small { font-size: .78rem; color: var(--usk-ink-60); display: block; margin-top: .2rem; }
.v2-noexp {
    margin-top: 1.1rem;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--usk-terracota);
    text-align: center;
}

/* ── Galeria horitzontal amb autor ─────────────────────────────── */
.v2-hscroll { display: flex; gap: .8rem; overflow-x: auto; padding: .3rem .15rem .8rem; scroll-snap-type: x mandatory; }
.v2-hscroll > * { scroll-snap-align: start; }
.v2-fig { flex: 0 0 auto; margin: 0; width: 9.5rem; }
.v2-fig-img { width: 100%; height: 9.5rem; object-fit: cover; border-radius: .8rem; border: 1.5px solid var(--usk-ink-30); background: var(--usk-paper-2); }
.v2-fig figcaption { font-size: .72rem; color: var(--usk-ink-60); margin-top: .35rem; line-height: 1.35; }
.v2-fig figcaption b { color: var(--usk-ink); }

/* ── Repte / banner de botiga ──────────────────────────────────── */
.v2-charcoal { width: 4.6rem; height: 4.6rem; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 3px 4px rgba(0,0,0,.15)); }

/* ── Així dibuixo (persones) ───────────────────────────────────── */
.v2-persona { flex: 0 0 auto; width: 5.2rem; text-align: center; text-decoration: none; }
.v2-persona img {
    width: 4.6rem; height: 4.6rem; border-radius: 50%;
    object-fit: cover; border: 2px solid var(--usk-paper);
    box-shadow: 0 0 0 1.5px var(--usk-ink-30);
}
.v2-persona span { display: block; font-size: .72rem; color: var(--usk-ink-60); margin-top: .3rem; }
.v2-aixi-sub { margin-top: .6rem; }

/* ── Mapa ──────────────────────────────────────────────────────── */
.v2-map-frame { border: 1.5px solid var(--usk-ink-30); border-radius: 1rem; overflow: hidden; background: #fbf8f1; }

/* ── Instagram ─────────────────────────────────────────────────── */
.v2-ig { margin-top: .9rem; }
.v2-ig-link { flex: 0 0 auto; }
.v2-ig-link img { width: 4.6rem; height: 4.6rem; object-fit: cover; border-radius: .6rem; border: 1.5px solid var(--usk-ink-30); }

/* ── CTA final ─────────────────────────────────────────────────── */
.v2-cta {
    display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
    background: var(--usk-paper);
    border: 1.5px solid var(--usk-ink-30);
    border-radius: 1.2rem;
    padding: 1.4rem 1.3rem;
    box-shadow: 5px 5px 0 rgba(217, 164, 65, .3);
}
.v2-cta-art { width: 4.8rem; height: 4.8rem; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.15)); }

/* ── Barra inferior de 5 ───────────────────────────────────────── */
.v2-tabbar { background: #fbf8f1; border-top: 2px solid var(--usk-ink); box-shadow: 0 -4px 14px rgba(43,37,32,.08); }
.v2-tabbar nav { height: 4rem; }
.v2-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-family: Verdana, sans-serif;
    font-size: .62rem;
    font-weight: 600;
    color: var(--usk-ink-60);
    text-decoration: none;
    border-top: 3px solid transparent;
}
.v2-tab .v2-tab-dot {
    width: 14px; height: 14px; border-radius: 50%;
    border: 1.7px solid currentColor;
    background: transparent;
}
.v2-tab.on { color: var(--usk-terracota); border-top-color: var(--usk-terracota); background: rgba(193,102,63,.06); }
.v2-tab.on .v2-tab-dot { background: var(--usk-terracota); border-color: var(--usk-terracota); }

/* ── Mode fosc: paper foscat, mai negre SaaS ───────────────────── */
[data-theme="dark"] .v2-card, [data-theme="dark"] .v2-map-frame { background: #2e2a26; }
[data-theme="dark"] .v2-h { color: #f3ece0; }
[data-theme="dark"] .v2-txt { color: rgba(243, 236, 224, .68); }
[data-theme="dark"] .v2-fig figcaption b { color: #f3ece0; }
[data-theme="dark"] .v2-persona span { color: rgba(243,236,224,.68); }
[data-theme="dark"] .v2-paper-card { background: #2a2622; }
[data-theme="dark"] .v2-datebox { background: #2a2622; color: #f3ece0; border-color: #f3ece0; }
[data-theme="dark"] .v2-btn-o { color: #f3ece0; border-color: #f3ece0; }
[data-theme="dark"] .v2-btn-o:hover { background: #2a2622; }
[data-theme="dark"] .v2-tabbar { background: #2a2622; border-top-color: #f3ece0; }
[data-theme="dark"] .v2-tab { color: rgba(243,236,224,.65); }
[data-theme="dark"] .v2-tab.on { color: #e0906a; border-top-color: #e0906a; background: rgba(224,144,106,.09); }
[data-theme="dark"] .v2-tab.on .v2-tab-dot { background: #e0906a; border-color: #e0906a; }
[data-theme="dark"] .v2-cta { background: #2e2a26; }

/* ── F2 · Sortides: targetes d'esdeveniment ────────────────────── */
.v2-event-card { display: flex; flex-direction: column; gap: .8rem; text-decoration: none; }
.v2-event-card:hover { box-shadow: 4px 4px 0 rgba(193, 102, 63, .25); }
.v2-event-img { width: 100%; height: 8.5rem; object-fit: cover; border-radius: .7rem; border: 1.5px solid var(--usk-ink-30); background: var(--usk-paper-2); }
.v2-event-title { display: block; font-family: Georgia, serif; font-size: 1.1rem; color: var(--usk-ink); line-height: 1.25; }
.v2-event-card small { display: block; font-size: .78rem; color: var(--usk-ink-60); margin-top: .15rem; }
.v2-event-card .v2-btn { align-self: flex-start; }
.v2-datebox-s b { font-size: 1rem; }
.v2-datebox-s span { font-size: .55rem; }
.v2-datebox-s { padding: .25rem .55rem; border-width: 1.5px; }
.v2-passada { display: flex; align-items: center; gap: .9rem; text-decoration: none; padding: .7rem .9rem; }
.v2-passada b { display: block; font-family: Georgia, serif; font-size: .98rem; color: var(--usk-ink); }
.v2-passada small { display: block; font-size: .75rem; color: var(--usk-ink-60); }
.v2-passada:hover { box-shadow: 4px 4px 0 rgba(138, 155, 122, .3); }
.v2-filtres summary { cursor: pointer; font-family: Verdana, sans-serif; font-size: .8rem; font-weight: 700; color: var(--usk-ink-60); }
[data-theme="dark"] .v2-event-title, [data-theme="dark"] .v2-passada b { color: #f3ece0; }

/* ── F2 · Com hi vaig: passos dins la sortida ──────────────────── */
.v2-comhivaig { border-top: 1.5px dashed var(--usk-ink-30); padding-top: .8rem; }
.v2-flow-steps { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.v2-fstep {
    font-family: Verdana, sans-serif; font-size: .78rem; font-weight: 700;
    color: var(--usk-ink); text-decoration: none;
    border: 1.4px solid var(--usk-ink); border-radius: .6rem;
    padding: .4rem .8rem; background: #fdfaf3;
}
a.v2-fstep:hover { background: var(--usk-paper); border-color: var(--usk-terracota); color: var(--usk-terracota); }
.v2-fstep.done { background: rgba(138, 155, 122, .18); border-color: var(--usk-salvia); color: #4d5c40; }
.v2-farr { color: var(--usk-terracota); font-weight: 700; }
[data-theme="dark"] .v2-fstep { background: #2e2a26; color: #f3ece0; border-color: #f3ece0; }
[data-theme="dark"] .v2-fstep.done { color: #a9b998; border-color: #6d7f5c; background: rgba(138,155,122,.12); }

/* ── F4 · Jo i Més ─────────────────────────────────────────────── */
.v2-jo-avatar { border-radius: 50%; object-fit: cover; border: 2.5px solid var(--usk-paper); box-shadow: 0 0 0 1.5px var(--usk-ink-30); }
.v2-mes-list { display: flex; flex-direction: column; gap: .15rem; }
.v2-mes-list > a, .v2-mes-logout button {
    display: block; padding: .55rem .2rem; text-decoration: none;
    font-size: .95rem; color: var(--usk-ink);
    border-bottom: 1px dashed var(--usk-ink-30);
    background: none; border-top: none; border-left: none; border-right: none;
    text-align: left; cursor: pointer; font-family: inherit; width: 100%;
}
.v2-mes-list > a:hover, .v2-mes-logout button:hover { color: var(--usk-terracota); }
.v2-mes-lang { padding: .55rem .2rem; border-bottom: 1px dashed var(--usk-ink-30); font-size: .95rem; color: var(--usk-ink); }
.v2-mes-lang a { text-decoration: none; font-family: Verdana, sans-serif; font-size: .72rem; font-weight: 700; color: var(--usk-ink-60); margin-left: .35rem; }
.v2-mes-lang a.on { color: var(--usk-terracota); text-decoration: underline; }
.v2-mes-logout button { color: var(--usk-terracota); border-bottom: none; }
[data-theme="dark"] .v2-mes-list > a, [data-theme="dark"] .v2-mes-lang { color: #f3ece0; }

/* ── F4 · Tema paper global (tokens DaisyUI sobre «usk» i «dark») ──
   Paper càlid + tinta + terracota com a primari; sense rebuild de Vite. */
[data-theme="usk"] {
    --p: 55.6% 0.128 42.2;          /* terracota */
    --pc: 97.3% 0.015 95;
    --s: 66% 0.058 130;             /* sàlvia */
    --sc: 97.3% 0.015 95;
    --a: 74% 0.11 85;               /* ocre */
    --ac: 25% 0.012 70;
    --n: 25% 0.012 70;              /* carbó */
    --nc: 95.5% 0.02 95;
    --b1: 95.5% 0.019 95;           /* paper */
    --b2: 92.5% 0.024 92;           /* paper-2 */
    --b3: 87% 0.03 90;
    --bc: 25% 0.012 70;             /* tinta */
    --in: 60% 0.08 250;
    --su: 66% 0.058 130;
    --wa: 74% 0.11 85;
    --er: 55% 0.16 28;
    --rounded-box: 0.9rem;
}
[data-theme="dark"] {
    --p: 68% 0.11 45;               /* terracota clara */
    --pc: 25% 0.012 70;
    --s: 66% 0.058 130;
    --sc: 95.5% 0.02 95;
    --a: 74% 0.11 85;
    --ac: 25% 0.012 70;
    --n: 20% 0.01 70;
    --nc: 92% 0.02 95;
    --b1: 22% 0.01 80;              /* paper foscat */
    --b2: 26% 0.012 80;
    --b3: 30% 0.014 80;
    --bc: 92% 0.018 95;
}