/*
 * Web pública de La Calderera (lacalderera.cat)
 * Granat oficial #571c20 i tipografia Geist (300, 400, 600, 800).
 */

:root {
    --granat: #571c20;
    --granat-500: #903b40;
    --granat-700: #471317;
    --granat-800: #390b10;
    --granat-950: #1b0304;
    --crema: #fff4f3;
    --text: #1c1917;
    --text-suau: #57534e;

    --marge: max(1.25rem, calc((100vw - 72rem) / 2));
    --radi: 1rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    /* També el fons de tot el document: alguns navegadors en treuen el color de les barres */
    background-color: #571c20;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--granat);
    color: #fff;
    font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Amb un popup obert, la pàgina de sota no es mou */
body:has(dialog[open]) {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ---------- Capçalera ---------- */

.capcalera {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--granat);
    transition: box-shadow .2s ease;
}

/* En baixar, una ombra suau separa la capçalera del contingut */
.capcalera.amb-ombra {
    box-shadow: 0 1px 0 rgb(255 255 255 / .08), 0 10px 24px -14px rgb(27 3 4 / .8);
}

.capcalera-dins {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem var(--marge);
    padding-top: max(.65rem, env(safe-area-inset-top));
}

/*
 * El logo és més alt que la capçalera i en sobresurt per sota, damunt del
 * contingut. La capsa de l'enllaç només ocupa l'alçada de la barra; la imatge
 * hi penja a sobre. En fer scroll s'encongeix fins a cabre a la barra.
 */
.capcalera-logo {
    --logo: 5.25rem;
    --logo-petit: 2.6rem;
    position: relative;
    display: block;
    flex: none;
    align-self: stretch;
    width: calc(var(--logo) * 1.03);
    border-radius: .5rem;
}

.capcalera-logo img {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: var(--logo);
    filter: brightness(0) invert(1);
    transition: height .25s ease;
}

.capcalera.amb-ombra .capcalera-logo img {
    height: var(--logo-petit);
}

.capcalera-dreta {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.menu ul {
    display: flex;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu a {
    display: block;
    padding: .5rem .8rem;
    border-radius: 999px;
    color: rgb(255 255 255 / .85);
    font-weight: 400;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.menu a:hover {
    color: #fff;
    background: rgb(255 255 255 / .1);
}

.menu a[aria-current="page"] {
    color: #fff;
    font-weight: 600;
    background: rgb(255 255 255 / .14);
}

/* Botó del menú (només al mòbil) */
.menu-boto {
    display: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid rgb(255 255 255 / .35);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.menu-boto svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.menu-boto-tanca,
.menu.obert .menu-boto-obre {
    display: none;
}

.menu.obert .menu-boto-tanca {
    display: inline;
}

.menu.obert .menu-boto {
    background: rgb(255 255 255 / .12);
}

/*
 * Mòbil i tauleta petita: el menú es plega. El botó va a la dreta de tot i,
 * en obrir-lo, la llista surt a sota de la capçalera, a tota l'amplada.
 */
@media (max-width: 47.99rem) {
    .menu {
        order: 3;
    }

    .menu-boto {
        display: grid;
    }

    .menu ul {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        gap: .25rem;
        padding: .75rem var(--marge) 1.25rem;
        background: var(--granat);
        border-bottom: 1px solid rgb(255 255 255 / .12);
        box-shadow: 0 18px 30px -18px rgb(27 3 4 / .9);
    }

    .menu.obert ul {
        display: flex;
        animation: llista-entra .15s ease-out;
    }

    .menu ul a {
        padding: .8rem 1rem;
        border-radius: .75rem;
        font-size: 1.25rem;
    }

    .idiomes {
        order: 2;
    }
}

/* Botó de sòcies */
.boto-socies {
    display: flex;
    align-items: center;
    gap: .45rem;
    height: 2.5rem;
    margin-left: .35rem;
    padding: 0 1rem 0 .8rem;
    border-radius: 999px;
    background: #fff;
    color: var(--granat);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, transform .15s;
}

.boto-socies:hover {
    background: var(--crema);
}

.boto-socies:active {
    transform: scale(.97);
}

.boto-socies:focus-visible {
    outline-color: #fff;
}

.boto-socies svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Selector d'idioma */
.idiomes {
    position: relative;
    margin-left: .25rem;
    padding-left: .75rem;
    border-left: 1px solid rgb(255 255 255 / .2);
}

.idiomes-boto {
    display: flex;
    align-items: center;
    gap: .35rem;
    height: 2.5rem;
    padding: 0 .7rem;
    border: 1px solid rgb(255 255 255 / .35);
    border-radius: 999px;
    background: transparent;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background-color .15s;
}

.idiomes-boto:hover,
.idiomes-boto[aria-expanded="true"] {
    background: rgb(255 255 255 / .12);
}

.idiomes-boto svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.idiomes-globus {
    width: 1rem;
    height: 1rem;
}

.idiomes-fletxa {
    width: .85rem;
    height: .85rem;
    transition: transform .15s;
}

.idiomes-boto[aria-expanded="true"] .idiomes-fletxa {
    transform: rotate(180deg);
}

.idiomes-llista {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    min-width: 12rem;
    margin: 0;
    padding: .35rem;
    list-style: none;
    border-radius: .85rem;
    background: #fff;
    box-shadow: 0 1px 2px rgb(27 3 4 / .2), 0 18px 40px -12px rgb(27 3 4 / .6);
    animation: llista-entra .15s ease-out;
}

.idiomes-llista[hidden] {
    display: none;
}

@keyframes llista-entra {
    from { opacity: 0; transform: translateY(-4px); }
}

.idiomes-llista a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem .75rem;
    border-radius: .55rem;
    color: var(--text);
    text-decoration: none;
}

.idiomes-llista a:hover,
.idiomes-llista a:focus-visible {
    background: var(--crema);
    outline: none;
}

.idiomes-llista a[aria-current="true"] {
    color: var(--granat);
    font-weight: 600;
}

.idiomes-llista a[aria-current="true"]::after {
    content: '';
    order: 3;
    width: .45rem;
    height: .45rem;
    border-radius: 999px;
    background: var(--granat);
}

.idiomes-codi {
    margin-left: auto;
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .06em;
    color: var(--text-suau);
}

@media (max-width: 30rem) {
    .capcalera-dins {
        gap: .5rem;
    }

    .capcalera-logo {
        --logo: 4.25rem;
        --logo-petit: 2.5rem;
    }

    .capcalera-dreta {
        gap: .25rem;
    }

    .idiomes {
        margin-left: .1rem;
        padding-left: .4rem;
    }

    .idiomes-boto {
        padding: 0 .55rem;
    }

    .idiomes-globus {
        display: none;
    }

    .boto-socies {
        margin-left: 0;
        padding: 0 .85rem 0 .7rem;
    }
}

/* ---------- Portada ---------- */

.inici {
    padding-bottom: 4rem;
}

.portada {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(1.5rem, 5vh, 3rem) 1.25rem clamp(2rem, 5vh, 3rem);
}

.portada-logo {
    width: clamp(9rem, 30vw, 12rem);
    height: auto;
    /* El logo és granat: aquí el pintem blanc */
    filter: brightness(0) invert(1);
}

.portada-avis {
    margin: 1.75rem 0 0;
    font-size: clamp(1.25rem, 3.6vw, 1.625rem);
    font-weight: 600;
    line-height: 1.25;
}

.portada-sub {
    margin: .5rem 0 0;
    font-weight: 300;
    color: rgb(255 255 255 / .78);
}

/* Portada amb foto de fons en píxels */
.portada-foto {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: clamp(17rem, 46vh, 28rem);
    margin-bottom: .25rem;
    padding: 4.5rem 1.25rem 2.5rem;
    overflow: hidden;
    /* La foto normal: es veu mentre es carrega el canvas o si no hi ha JS */
    background: var(--granat-950) var(--foto) center / cover no-repeat;
    /* Al mòbil, el dit pot pintar sense bloquejar el scroll vertical */
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.portada-foto::before,
.portada-foto::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Enfosqueix la foto normal (abans que surtin els píxels) */
.portada-foto::before {
    z-index: 0;
    background: rgb(27 3 4 / .55);
}

.portada-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .8s ease;
}

.portada-foto.a-punt .portada-canvas {
    opacity: 1;
}

/* A dalt i a baix es fon amb el granat; al mig, una mica més fosc pel text */
.portada-foto::after {
    z-index: 2;
    background:
        radial-gradient(ellipse 50% 32% at 50% 50%, rgb(27 3 4 / .45), transparent 75%),
        linear-gradient(to bottom, var(--granat) 0, rgb(87 28 32 / 0) 16%, rgb(87 28 32 / 0) 78%, var(--granat) 100%);
}

.portada-text {
    position: relative;
    z-index: 3;
    max-width: 40rem;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 2px 18px rgb(27 3 4 / .7);
}

/* Lema amb lletra de retolador (Permanent Marker) */
.portada-avis {
    font-family: 'Permanent Marker', 'Geist', ui-sans-serif, system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: 0;
}

/*
 * El lema "bull": cada 5 s les lletres pugen una mica, una darrere l'altra,
 * com bombolles (les lletres les separa public/js/web.js).
 */
.lema-paraula {
    display: inline-block;
    white-space: nowrap;
}

.lema-lletra {
    display: inline-block;
    animation: lema-bull 5s ease-in-out infinite;
    animation-delay: calc(1.2s + var(--i) * 40ms);
}

@keyframes lema-bull {
    0%, 16%, 100% { transform: none; }
    5%  { transform: translateY(-0.12em) rotate(-3deg); }
    10% { transform: translateY(0.02em) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
    .lema-lletra {
        animation: none;
    }
}

.portada-foto .portada-avis {
    margin: 0;
    font-size: clamp(1.9rem, 5.6vw, 3.4rem);
    line-height: 1.12;
}

.portada-foto .portada-sub {
    margin-top: .85rem;
    font-size: clamp(1rem, 2.4vw, 1.1875rem);
    color: rgb(255 255 255 / .88);
}

/* Botó de la portada (cap a l'agenda) */
.portada-boto {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.4rem;
    padding: .85rem 1.5rem;
    border-radius: 999px;
    background: #fff;
    color: var(--granat);
    font-weight: 600;
    text-decoration: none;
    text-shadow: none;
    pointer-events: auto;
    box-shadow: 0 10px 30px -10px rgb(27 3 4 / .6);
    transition: background-color .15s, transform .15s;
}

.portada-boto::after {
    content: '→';
    font-weight: 400;
    transition: transform .15s;
}

.portada-boto:hover {
    background: var(--crema);
}

.portada-boto:hover::after {
    transform: translateX(3px);
}

.portada-boto:active {
    transform: scale(.97);
}

/* ---------- Agenda ---------- */

.agenda-cap-dreta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.enllac-fletxa {
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.enllac-fletxa::after {
    content: ' →';
    font-weight: 400;
}

.enllac-fletxa:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.agenda-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: var(--marge);
    margin-bottom: 1rem;
}

.agenda-cap h2 {
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgb(255 255 255 / .8);
}

.agenda-fletxes {
    display: flex;
    gap: .5rem;
}

.agenda-fletxes[hidden] {
    display: none;
}

/* A les pantalles tàctils es llisca amb el dit: les fletxes sobren */
@media (hover: none) {
    .agenda-fletxes {
        display: none;
    }
}

.fletxa {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgb(255 255 255 / .35);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: background-color .15s, opacity .15s;
}

.fletxa:hover:not(:disabled) {
    background: rgb(255 255 255 / .12);
}

.fletxa:disabled {
    opacity: .3;
    cursor: default;
}

.fletxa svg,
.popup-tanca svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.agenda-buida {
    margin: 0;
    padding: 1.5rem var(--marge);
    color: rgb(255 255 255 / .78);
}

/* Carrusel: llista horitzontal amb desplaçament natiu (dit, ratolí o fletxes) */
.carrusel {
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: .25rem var(--marge) 1.5rem;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--marge);
    scrollbar-width: none;
}

.carrusel::-webkit-scrollbar {
    display: none;
}

/*
 * Ordinador: el carrusel acaba on acaba el contenidor (no fins a la vora de la
 * pantalla). Si hi ha més targetes, la vora es fon cap a transparent.
 */
@media (min-width: 48rem) {
    .carrusel {
        --fosa: 5rem;
        margin-inline: var(--marge);
        padding-inline: 0;
        scroll-padding-inline: 0;
    }

    .carrusel.fosa-dreta {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fosa)), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - var(--fosa)), transparent);
    }

    .carrusel.fosa-esquerra {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--fosa)), transparent);
        mask-image: linear-gradient(to left, #000 calc(100% - var(--fosa)), transparent);
    }

    .carrusel.fosa-esquerra.fosa-dreta {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fosa), #000 calc(100% - var(--fosa)), transparent);
        mask-image: linear-gradient(to right, transparent, #000 var(--fosa), #000 calc(100% - var(--fosa)), transparent);
    }
}

.carrusel > li {
    flex: 0 0 auto;
    width: min(78vw, 15.5rem);
    scroll-snap-align: start;
}

.targeta {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--radi);
    overflow: hidden;
    background: #fff;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgb(27 3 4 / .25), 0 12px 32px -12px rgb(27 3 4 / .55);
    transition: transform .2s ease, box-shadow .2s ease;
}

.targeta:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 2px rgb(27 3 4 / .25), 0 18px 40px -12px rgb(27 3 4 / .7);
}

.targeta-imatge {
    position: relative;
    display: block;
    /* La imatge no s'encongeix mai: totes les targetes, la mateixa alçada d'imatge */
    flex: none;
    aspect-ratio: 4 / 5;
    background: var(--granat-700);
}

.targeta-imatge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Capa del compte enrere (només al carrusel de la portada i només amb ratolí):
 * en passar per damunt de la targeta, la imatge s'enfosqueix i surten el
 * compte enrere i el botó "Més informació".
 */
.targeta-capa {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    padding: 1rem;
    background: rgb(27 3 4 / .8);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: #fff;
    text-align: center;
    opacity: 0;
    transition: opacity .25s ease;
}

@media (hover: hover) {
    .targeta-capa {
        display: flex;
    }

    .targeta:hover .targeta-capa,
    .targeta:focus-visible .targeta-capa {
        opacity: 1;
    }

    .targeta:hover .compte,
    .targeta:hover .targeta-mes,
    .targeta:focus-visible .compte,
    .targeta:focus-visible .targeta-mes {
        transform: none;
    }
}

.compte,
.targeta-mes {
    transform: translateY(6px);
    transition: transform .3s ease;
}

.compte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
}

.compte-titol {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgb(255 255 255 / .75);
}

.compte-xifres {
    display: flex;
    gap: .35rem;
}

.compte-unitat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 2.75rem;
    padding: .5rem .3rem .4rem;
    border-radius: .55rem;
    background: rgb(255 255 255 / .12);
    line-height: 1;
}

.compte-unitat[hidden] {
    display: none;
}

.compte-unitat strong {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.compte-unitat small {
    margin-top: .3rem;
    font-size: .625rem;
    font-weight: 400;
    letter-spacing: .04em;
    color: rgb(255 255 255 / .7);
}

.compte-ja {
    display: none;
    font-size: 1.125rem;
    font-weight: 800;
}

/* Quan l'acte ja ha començat, en lloc de les xifres */
.compte.comencat .compte-titol,
.compte.comencat .compte-xifres {
    display: none;
}

.compte.comencat .compte-ja {
    display: block;
}

.targeta-mes {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem 1.1rem;
    border-radius: 999px;
    background: #fff;
    color: var(--granat);
    font-size: .875rem;
    font-weight: 600;
}

.targeta-mes::after {
    content: '→';
    font-weight: 400;
}

/*
 * Categories dels actes: etiqueta de color. A la targeta va a dalt a la dreta,
 * a l'alçada de la data; al popup, damunt del títol.
 */
.categoria {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem .3rem .5rem;
    border-radius: 999px;
    background: var(--cat-fons);
    color: var(--cat-text);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
    white-space: nowrap;
}

.categoria::before {
    content: '';
    width: .45rem;
    height: .45rem;
    border-radius: 999px;
    background: var(--cat-punt);
}

.cat-lleure    { --cat-fons: #fef3c7; --cat-text: #78350f; --cat-punt: #f59e0b; }
.cat-activisme { --cat-fons: #d1fae5; --cat-text: #064e3b; --cat-punt: #10b981; }
.cat-musica    { --cat-fons: #ede9fe; --cat-text: #4c1d95; --cat-punt: #8b5cf6; }
.cat-politica  { --cat-fons: #ffe4e6; --cat-text: #881337; --cat-punt: #f43f5e; }

.targeta-categoria {
    position: absolute;
    top: .75rem;
    right: .75rem;
    max-width: calc(100% - 5.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 4px 12px rgb(27 3 4 / .25);
}

.popup-categoria {
    margin-bottom: .6rem;
}

/* Sense cartell: el logo, petit i suau, sobre granat fosc */
.targeta-imatge img.sense-imatge {
    width: 45%;
    height: auto;
    margin: auto;
    position: absolute;
    inset: 0;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .18;
}

.targeta-dia {
    position: absolute;
    top: .75rem;
    left: .75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.25rem;
    padding: .4rem .5rem .35rem;
    border-radius: .65rem;
    background: #fff;
    color: var(--granat);
    line-height: 1;
    box-shadow: 0 4px 12px rgb(27 3 4 / .25);
}

.targeta-dia strong {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.targeta-dia span {
    margin-top: .2rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.targeta-cos {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem 1.1rem 1.15rem;
}

.targeta-quan {
    display: flex;
    flex-direction: column;
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--granat-500);
}

.targeta-data {
    font-weight: 600;
}

.targeta-hora {
    font-weight: 400;
}

.targeta-titol {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25;
    /* Màxim tres línies */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.targeta-lloc {
    font-size: .875rem;
    color: var(--text-suau);
}

/* ---------- Pàgines interiors (Agenda...) ---------- */

/*
 * Franja del títol: foto en blanc i negre tenyida de granat (com un cartell)
 * i el títol en Permanent Marker. El logo de la capçalera hi penja per damunt.
 */
.cap-pagina {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: end;
    min-height: clamp(11rem, 28vh, 16rem);
    padding: 5rem var(--marge) 1.75rem;
    overflow: hidden;
    background: var(--granat);
}

.cap-pagina::before,
.cap-pagina::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cap-pagina::before {
    z-index: -2;
    background: var(--foto) center 40% / cover no-repeat;
    filter: grayscale(1) contrast(1.15) brightness(1.05);
}

/* El color: el granat "multiplica" la foto en blanc i negre */
.cap-pagina::after {
    z-index: -1;
    background:
        linear-gradient(180deg, var(--granat) 0%, rgb(87 28 32 / .55) 35%, rgb(87 28 32 / .75) 100%),
        var(--granat-500);
    mix-blend-mode: multiply;
}

/* Sense foto: només el degradat granat */
.cap-pagina-sense-foto::before {
    background: radial-gradient(120% 140% at 85% 30%, var(--granat-500) 0%, var(--granat) 50%, var(--granat-800) 100%);
    filter: none;
}

.cap-pagina-sense-foto::after {
    display: none;
}

.cap-pagina-titol {
    margin: 0;
    font-family: 'Permanent Marker', 'Geist', ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(2.4rem, 7vw, 4.25rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0;
    text-shadow: 0 3px 20px rgb(27 3 4 / .6);
}

.pagina {
    padding: clamp(2rem, 5vh, 3rem) var(--marge) 4rem;
}

.pagina-cap h1 {
    margin: 0 0 2rem;
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.bloc + .bloc {
    margin-top: 3.5rem;
}

/* Que la capçalera fixa no tapi el títol en saltar-hi (#passats) */
.bloc {
    scroll-margin-top: 6rem;
}

.bloc-titol {
    margin: 0 0 1rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgb(255 255 255 / .8);
}

.bloc-buit {
    margin: 0;
    color: rgb(255 255 255 / .78);
}

.graella {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Al mòbil, dues columnes perquè no sigui una tira infinita */
@media (max-width: 34rem) {
    .graella {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }

    /* Carrusel de la portada: targetes més petites, se'n veu més d'una */
    .carrusel {
        gap: .75rem;
    }

    .carrusel > li {
        width: min(54vw, 13rem);
    }

    :is(.graella, .carrusel) .targeta-cos {
        gap: .2rem;
        padding: .75rem .8rem .85rem;
    }

    :is(.graella, .carrusel) .targeta-titol {
        font-size: .9375rem;
    }

    :is(.graella, .carrusel) .targeta-quan,
    :is(.graella, .carrusel) .targeta-lloc {
        font-size: .75rem;
    }

    :is(.graella, .carrusel) .targeta-dia {
        top: .5rem;
        left: .5rem;
        min-width: 2.75rem;
    }

    :is(.graella, .carrusel) .targeta-dia strong {
        font-size: 1.25rem;
    }

    :is(.graella, .carrusel) .targeta-categoria {
        top: .5rem;
        right: .5rem;
        max-width: calc(100% - 4rem);
        padding: .25rem .5rem .25rem .4rem;
        font-size: .6875rem;
    }
}

/* Els actes passats, una mica apagats */
.graella-passats .targeta-imatge img:not(.sense-imatge) {
    filter: saturate(.55);
}

.paginacio {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}

.paginacio a {
    padding: .65rem 1.1rem;
    border: 1px solid rgb(255 255 255 / .35);
    border-radius: 999px;
    color: #fff;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s;
}

.paginacio a:hover {
    background: rgb(255 255 255 / .12);
}

.paginacio-seguent {
    margin-left: auto;
}

/* ---------- Qui som ---------- */

.quisom {
    display: grid;
    gap: 2rem;
    max-width: 44rem;
}

/* A l'ordinador, la foto a la dreta i el text a l'esquerra */
@media (min-width: 60rem) {
    .quisom.quisom-amb-foto {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: start;
        gap: 3.5rem;
        max-width: none;
    }

    .quisom-amb-foto .quisom-foto {
        order: 2;
        position: sticky;
        top: 6rem;
    }
}

.quisom-foto {
    margin: 0;
}

.quisom-foto img {
    width: 100%;
    height: auto;
    max-height: 32rem;
    object-fit: cover;
    border-radius: var(--radi);
    box-shadow: 0 20px 50px -20px rgb(27 3 4 / .8);
}

.nomes-catala {
    display: inline-block;
    margin: 0 0 1.25rem;
    padding: .4rem .8rem;
    border-radius: .5rem;
    background: rgb(255 255 255 / .1);
    font-size: .875rem;
    color: rgb(255 255 255 / .85);
}

/* Text llarg que ve del dashboard (editor de text) */
.prosa {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: rgb(255 255 255 / .92);
    overflow-wrap: anywhere;
}

.prosa > :first-child { margin-top: 0; }
.prosa > :last-child { margin-bottom: 0; }
.prosa p { margin: 0 0 1.1em; }
.prosa h2,
.prosa h3 { margin: 1.8em 0 .6em; color: #fff; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; }
.prosa h2 { font-size: 1.5rem; }
.prosa h3 { font-size: 1.2rem; }
.prosa ul,
.prosa ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.prosa li { margin-bottom: .35em; }
.prosa strong,
.prosa b { color: #fff; font-weight: 600; }
.prosa a { color: #fff; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .45); text-underline-offset: 3px; }
.prosa a:hover { text-decoration-color: #fff; }
.prosa blockquote { margin: 0 0 1.1em; padding-left: 1em; border-left: 3px solid rgb(255 255 255 / .35); color: rgb(255 255 255 / .8); }
.prosa img { height: auto; border-radius: .75rem; }

/* ---------- Contacte ---------- */

.contacte-graella {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 60rem) {
    .contacte-graella {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        align-items: start;
        gap: 4rem;
    }
}

.contacte-intro {
    margin: 0 0 2rem;
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgb(255 255 255 / .9);
}

.contacte-dades {
    display: grid;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contacte-dades li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contacte-dades div {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding-top: .2rem;
    min-width: 0;
}

.contacte-dades strong {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgb(255 255 255 / .7);
}

.contacte-dades span,
.contacte-dades a {
    font-size: 1.0625rem;
    color: #fff;
    overflow-wrap: anywhere;
}

.contacte-dades a {
    text-decoration: underline;
    text-decoration-color: rgb(255 255 255 / .4);
    text-underline-offset: 3px;
}

.contacte-dades a:hover {
    text-decoration-color: #fff;
}

.contacte-dades .contacte-enllac {
    margin-top: .3rem;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.contacte-icona {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .85rem;
    background: rgb(255 255 255 / .1);
}

.contacte-icona svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contacte-xarxes {
    margin-top: .35rem;
}

.contacte-dades .contacte-xarxes a {
    text-decoration: none;
}

/* Caixa blanca del formulari */
.contacte-caixa {
    scroll-margin-top: 6rem;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border-radius: 1.25rem;
    background: #fff;
    color: var(--text);
    box-shadow: 0 30px 60px -30px rgb(27 3 4 / .9);
}

.contacte-caixa-titol {
    margin: 0 0 1.5rem;
    font-family: 'Permanent Marker', 'Geist', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.1;
    color: var(--granat);
}

.form {
    display: grid;
    gap: 1.1rem;
}

.form-fila {
    display: grid;
    gap: 1.1rem;
}

@media (min-width: 36rem) {
    .form-fila {
        grid-template-columns: 1fr 1fr;
    }
}

.form-camp {
    display: grid;
    gap: .4rem;
}

.form-camp > label {
    font-size: .875rem;
    font-weight: 600;
}

.form-opcional {
    font-weight: 400;
    color: var(--text-suau);
}

.form-camp input[type="text"],
.form-camp input[type="email"],
.form-camp textarea {
    width: 100%;
    padding: .75rem .9rem;
    border: 1.5px solid #ead8d6;
    border-radius: .75rem;
    background: var(--crema);
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.form-camp textarea {
    min-height: 9rem;
    resize: vertical;
}

.form-camp input:focus,
.form-camp textarea:focus {
    outline: none;
    border-color: var(--granat);
    background: #fff;
    box-shadow: 0 0 0 4px rgb(87 28 32 / .12);
}

.form-camp.amb-error input,
.form-camp.amb-error textarea {
    border-color: #c0262d;
    background: #fff5f5;
}

.form-error {
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: #b91c1c;
}

.form-avis {
    margin: -.5rem 0 1rem;
    padding: .7rem .9rem;
    border-radius: .75rem;
    background: #fef2f2;
    color: #991b1b;
    font-size: .9375rem;
    font-weight: 600;
}

.form-check label {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--text-suau);
    cursor: pointer;
}

.form-check input {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: .1rem 0 0;
    accent-color: var(--granat);
}

/* Parany per a robots: fora de la vista */
.form-parany {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.boto-principal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    padding: .95rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--granat);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, transform .15s;
}

.boto-principal:hover {
    background: var(--granat-700);
}

.boto-principal:active {
    transform: scale(.98);
}

.boto-principal:focus-visible {
    outline-color: var(--granat);
}

.boto-principal svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.boto-secundari {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem 1.15rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

/* Missatge enviat */
.contacte-fet {
    padding: 1.5rem 0 .5rem;
    text-align: center;
}

.contacte-fet-icona {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    border-radius: 999px;
    background: #d1fae5;
    animation: fet-entra .5s cubic-bezier(.2, 1.4, .4, 1);
}

@keyframes fet-entra {
    from { transform: scale(.4); opacity: 0; }
}

.contacte-fet-icona svg {
    width: 2rem;
    height: 2rem;
    fill: none;
    stroke: #047857;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contacte-fet h2 {
    margin: 0 0 .5rem;
    font-family: 'Permanent Marker', 'Geist', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    color: var(--granat);
}

.contacte-fet p {
    margin: 0 0 1.5rem;
    color: var(--text-suau);
}

.contacte-fet .boto-secundari {
    color: var(--granat);
}

.contacte-fet .boto-secundari:hover {
    background: var(--crema);
}

/* Mapa */
.contacte-mapa {
    margin-top: clamp(3rem, 7vw, 4.5rem);
}

.contacte-mapa-marc {
    position: relative;
    overflow: hidden;
    height: clamp(18rem, 42vw, 26rem);
    border-radius: 1.25rem;
    background: var(--granat-700);
    box-shadow: 0 30px 60px -30px rgb(27 3 4 / .9);
}

.contacte-mapa-marc iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* El mapa d'OpenStreetMap en grisos càlids, perquè el pin granat destaqui */
.mapa-osm {
    filter: grayscale(1) sepia(.18) contrast(1.05) brightness(1.02);
}

.mapa-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.25rem;
    height: 4.2rem;
    translate: -50% -100%;
    pointer-events: none;
    filter: drop-shadow(0 8px 10px rgb(27 3 4 / .45));
    animation: pin-cau .7s cubic-bezier(.3, 1.5, .5, 1) both;
}

@keyframes pin-cau {
    from { translate: -50% -160%; opacity: 0; }
}

.mapa-pin svg {
    width: 100%;
    height: 100%;
    fill: var(--granat);
    stroke: #fff;
    stroke-width: 2.5;
}

.mapa-pin img {
    position: absolute;
    top: 18%;
    left: 50%;
    width: 62%;
    height: auto;
    translate: -50% 0;
    filter: brightness(0) invert(1);
}

.contacte-mapa-peu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-top: 1rem;
    color: rgb(255 255 255 / .85);
}

.contacte-mapa-peu .boto-secundari {
    color: #fff;
    border-color: rgb(255 255 255 / .4);
}

.contacte-mapa-peu .boto-secundari:hover {
    background: rgb(255 255 255 / .12);
}

/* ---------- Peu de pàgina ---------- */

.peu {
    border-top: 1px solid rgb(255 255 255 / .12);
    background: var(--granat-800);
}

.peu-dins {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.75rem var(--marge) calc(1.75rem + env(safe-area-inset-bottom));
}

.peu-marca {
    display: flex;
    align-items: center;
    gap: .85rem;
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.peu-marca img {
    width: auto;
    height: 3rem;
    filter: brightness(0) invert(1);
}

.xarxes {
    display: flex;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xarxes a {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgb(255 255 255 / .3);
    border-radius: 999px;
    color: #fff;
    transition: background-color .15s, color .15s, border-color .15s;
}

.xarxes a:hover {
    background: #fff;
    border-color: #fff;
    color: var(--granat);
}

.xarxes svg {
    width: 1.15rem;
    height: 1.15rem;
}

/* ---------- Popup ---------- */

.popup {
    width: min(100% - 2rem, 40rem);
    max-height: min(100dvh - 2rem, 52rem);
    padding: 0;
    border: 0;
    border-radius: 1.25rem;
    background: #fff;
    color: var(--text);
    overflow: auto;
    overscroll-behavior: contain;
    box-shadow: 0 30px 80px -20px rgb(27 3 4 / .7);
}

.popup::backdrop {
    background: rgb(27 3 4 / .72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.popup[open] {
    animation: popup-entra .22s ease-out;
}

.popup[open]::backdrop {
    animation: fosc-entra .22s ease-out;
}

@keyframes popup-entra {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
}

@keyframes fosc-entra {
    from { opacity: 0; }
}

.popup-tanca {
    position: sticky;
    top: .75rem;
    float: right;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: .75rem .75rem -3.25rem 0;
    border: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / .92);
    color: var(--text);
    cursor: pointer;
    box-shadow: 0 2px 10px rgb(27 3 4 / .2);
}

.popup-tanca:hover {
    background: #fff;
}

.popup-tanca:focus-visible {
    outline-color: var(--granat);
}

/* El cartell es veu sencer, sense retallar */
.popup-imatge {
    display: flex;
    justify-content: center;
    background: var(--granat-800);
}

.popup-imatge img {
    width: auto;
    max-height: 60vh;
    object-fit: contain;
}

.popup-cos {
    padding: 1.5rem 1.5rem 1.75rem;
}

.popup-cos h2 {
    margin: 0 3rem 1rem 0;
    font-size: clamp(1.375rem, 4vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--granat);
}

.popup-imatge + .popup-cos h2 {
    margin-right: 0;
}

.popup-dades {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 1rem 1.1rem;
    border-radius: .75rem;
    background: var(--crema);
}

.popup-dades div {
    display: grid;
    grid-template-columns: 4.75rem 1fr;
    gap: .75rem;
}

.popup-dades dt {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--granat-500);
    padding-top: .15rem;
}

.popup-dades dd {
    margin: 0;
    font-weight: 400;
}

.popup-mapa {
    margin-top: .75rem;
}

.popup-mapa iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 0;
    border-radius: .75rem;
    background: var(--crema);
}

.popup-mapa-enllacos {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    margin-top: .5rem;
    font-size: .875rem;
}

.popup-mapa-enllacos a {
    color: var(--granat);
    font-weight: 600;
    text-decoration: none;
}

.popup-mapa-enllacos a::after {
    content: ' ↗';
    font-weight: 400;
}

.popup-mapa-enllacos a:hover,
.popup-mapa-enllacos a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.popup-text {
    margin-top: 1.25rem;
    color: #292524;
    overflow-wrap: anywhere;
}

.popup-text > :first-child { margin-top: 0; }
.popup-text > :last-child { margin-bottom: 0; }
.popup-text p { margin: 0 0 .85em; }
.popup-text h2,
.popup-text h3 { margin: 1.25em 0 .5em; font-size: 1.0625rem; font-weight: 600; color: var(--text); }
.popup-text ul,
.popup-text ol { margin: 0 0 .85em; padding-left: 1.25em; }
.popup-text strong,
.popup-text b { font-weight: 600; }
.popup-text a { color: var(--granat); text-underline-offset: 2px; }
.popup-text blockquote { margin: 0 0 .85em; padding-left: 1em; border-left: 3px solid var(--granat-500); color: var(--text-suau); }
.popup-text img { height: auto; border-radius: .5rem; }

/* Al mòbil, el popup surt de baix i ocupa tota l'amplada */
@media (max-width: 40rem) {
    .popup {
        width: 100%;
        max-width: none;
        max-height: 92dvh;
        margin: auto 0 0;
        border-radius: 1.25rem 1.25rem 0 0;
    }

    .popup[open] {
        animation-name: popup-puja;
    }

    @keyframes popup-puja {
        from { transform: translateY(40px); opacity: 0; }
    }

    .popup-cos {
        padding: 1.25rem 1.25rem calc(1.75rem + env(safe-area-inset-bottom));
    }
}

/* Avís petit (p. ex. "Aviat podràs connectar-te a la zona de sòcies") */
.popup.popup-avis {
    width: min(100% - 2rem, 22rem);
    max-width: none;
    margin: auto;
    padding: 2rem 1.5rem 1.5rem;
    border-radius: 1.25rem;
    text-align: center;
}

.popup-avis-icona {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: 999px;
    background: var(--crema);
    color: var(--granat);
}

.popup-avis-icona svg {
    width: 1.6rem;
    height: 1.6rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.popup-avis p {
    margin: 0 0 1.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
}

.popup-avis-boto {
    width: 100%;
    height: 2.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--granat);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s;
}

.popup-avis-boto:hover {
    background: var(--granat-700);
}

.popup-avis-boto:focus-visible {
    outline-color: var(--granat);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}