/* Castellbisbal v2 - Ajustos personalitzats */

/* Colors i tipografies de marca (2026-10-10): granat de principal i de secundari,
   turquesa del logotip d'accent, Bebas Neue als titols i Source Sans 3 al text.
   Es configuren als settings d'Aparenca (v2_color_*, v2_font_*), no aqui. */

/* Bebas Neue es una condensada: l'espaiat negatiu del tema (pensat per a
   Poppins) enganxa les lletres */
h1, h2, h3, h4, h5, h6, .font-heading {
    letter-spacing: 0.02em;
}

/* Boto principal sobre les franges granat (hero i registre d'establiments):
   granat sobre granat no es veu, va en turquesa */
.bg-secondary .btn-primary {
    background-color: var(--color-accent);
}
.bg-secondary .btn-primary:hover {
    background-color: color-mix(in srgb, var(--color-accent) 85%, black);
}

/* Hero sense la capa fosca, amb imatge o sense: tornava el granat gairebe
   negre i enfosquia la il·lustracio. El text blanc sobre el granat ja es
   llegeix be (contrast 7,5:1). */
section.min-h-\[60vh\] > .bg-black\/40 {
    display: none;
}

/* Imatge del hero 2026 (AjCb_CastellbisVALS26_1920x620_1.jpg): fons granat
   pla, del mateix color que bg-secondary, i la il·lustracio a la dreta
   (x 1104-1888, y 61-563 de 1920x620). Si es canvia la imatge, revisar
   aquests talls. */

/* Pantalla ampla: la imatge sencera ajustada a la dreta (contain) en lloc de
   retallar-la (cover), que entre 1024 i 1440 px la tallava i la posava sota
   el text. El buit que deixa es del mateix granat. El text s'estreny perque no
   arribi a la il·lustracio, que comenca al 57,5 % de l'amplada. !important:
   la vista posa object-position en linia (setting v2_hero_image_position). */
@media (min-width: 1024px) {
    section.min-h-\[60vh\] > img {
        object-fit: contain;
        object-position: right center !important;
    }
    section.min-h-\[60vh\]:has(> img) .max-w-2xl {
        max-width: min(42rem, calc(57vw - 5.5rem));
    }
}

/* Mobil i tauleta: la imatge de fons quedava tapada pel text i nomes se'n
   veia un tros a la vora. Va a sota dels botons, retallada a la il·lustracio
   (tota l'alcada i els 850 px de la dreta). */
@media (max-width: 1023.98px) {
    section.min-h-\[60vh\]:has(> img) {
        flex-direction: column;
        align-items: stretch;
        padding-bottom: 1rem;
    }
    section.min-h-\[60vh\]:has(> img) > .z-20 {
        padding-bottom: 1.5rem;
    }
    section.min-h-\[60vh\] > img {
        position: static;
        order: 1;
        display: block;
        width: 100%;
        max-width: 32rem;
        height: auto;
        aspect-ratio: 850 / 620;
        margin: 0 auto;
        object-fit: cover;
        object-position: right center !important;
    }
}

/* Boto de l'avis del registre (block-registration-notice), sobre fons granat:
   blanc i amb requadre perque no quedi integrat amb el fons */
.notice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border: 2px solid #fff;
    border-radius: 0.5rem;
    background-color: #fff;
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.notice-btn:hover {
    background-color: transparent;
    color: #fff;
    transform: translateY(-2px);
}
@media (min-width: 640px) {
    .notice-btn { font-size: 1.125rem; }
}

/* Footer - fons gris clar */
footer {
    background-color: var(--color-bg-alt) !important;
    color: #333 !important;
}
footer a,
footer p {
    color: #444 !important;
}
footer a:hover {
    color: #111 !important;
}

/* Hero de la home - botons en majuscules
   (acotat a la seccio del banner via la classe min-h-[60vh],
   que nomes fa servir block-header) */
section.min-h-\[60vh\] .btn-primary,
section.min-h-\[60vh\] .btn-hero-secondary {
    text-transform: uppercase;
}

/* Logos footer - amb els seus colors, sense filtre (2026-10-13). El tema els
   torna blancs (pensat per a un footer fosc): aqui el fons es clar. */
.footer-logos-v2 img {
    filter: none !important;
    opacity: 1 !important;
}

/* Separadors footer - canviar de blanc a fosc (fons clar) */
footer .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.12) !important;
}

/* Copyright - text llegible sobre fons gris */
footer .text-gray-500 {
    color: #666 !important;
}

/* Icones xarxes socials - adaptar per fons clar */
footer a[aria-label] {
    background-color: rgba(0, 0, 0, 0.08) !important;
    color: #444 !important;
}
footer a[aria-label]:hover {
    background-color: rgba(0, 0, 0, 0.15) !important;
    color: #111 !important;
}

/* ============================================================
   Bases Reguladores - Campanya Venda Vals (2025-26)
   OBSOLET: les bases de 2026 fan servir .bases-campanya (a sota).
   Esborrar aquest bloc quan el contingut nou sigui a produccio.
   Estils limitats al contenidor .bases-reguladores perque no
   afectin la resta de la web. HTML net al camp Contingut.
   ============================================================ */
.bases-reguladores {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 15px;
    line-height: 1.75;
    color: #222;
}
.bases-reguladores *,
.bases-reguladores *::before,
.bases-reguladores *::after {
    box-sizing: border-box;
}

.bases-reguladores .header {
    text-align: center;
    border-bottom: 3px double var(--color-primary);
    padding-bottom: 28px;
    margin-bottom: 36px;
}
.bases-reguladores .header .ref {
    font-size: 12px;
    color: #888;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.bases-reguladores .header h1 {
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 10px 0 4px;
    color: #1a1a1a;
}
.bases-reguladores .header h2 {
    font-size: 15px;
    font-weight: normal;
    color: #444;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.bases-reguladores .clausula {
    margin-bottom: 28px;
    page-break-inside: avoid;
}
.bases-reguladores .clausula h3 {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-primary);
    margin: 0 0 8px;
}
/* El tema v2 limita TOTS els <p> a max-width:70ch (~650px) a
   resources/v2/css/app.css. Ho anul·lem dins de les bases perque
   els paragrafs omplin tota l'amplada de la columna. */
.bases-reguladores p {
    max-width: none;
}
.bases-reguladores .clausula p {
    margin: 0 0 10px;
    text-align: justify;
}
.bases-reguladores .clausula .subsection {
    margin-top: 12px;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 13.5px;
}

/* Llistes - neutralitzem el padding extra que afegeix Tailwind .prose
   (el contingut es renderitza dins de <div class="prose prose-lg">) */
.bases-reguladores ul {
    list-style: disc outside;
    margin: 6px 0 10px;
    padding-left: 24px;
}
.bases-reguladores ul li {
    margin: 0 0 5px;
    padding-left: 4px;
}
.bases-reguladores ul li::marker {
    color: var(--color-primary);
}

.bases-reguladores .factures {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 14px 18px;
    background: #fafaf8;
    margin: 10px 0;
}
.bases-reguladores .factures p { margin-bottom: 4px; }

.bases-reguladores .calendari {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    margin: 10px 0;
}
.bases-reguladores .calendari thead,
.bases-reguladores .calendari tbody,
.bases-reguladores .calendari tr {
    border: 0;
}
.bases-reguladores .calendari th {
    background: var(--color-primary);
    color: #fff;
    padding: 7px 12px;
    text-align: left;
    border: 0;
}
.bases-reguladores .calendari td {
    border: 0;
    border-bottom: 1px solid #eee;
    padding: 6px 12px;
}
.bases-reguladores .calendari tr:last-child td { border-bottom: none; }
.bases-reguladores .calendari tr:nth-child(even) td { background: #fafaf8; }

/* Columnes IAE - evitem el marge superior que .prose posa al primer
   element de la llista, que desquadraria les dues columnes */
.bases-reguladores .iae-cols {
    column-count: 2;
    column-gap: 30px;
}
.bases-reguladores .iae-cols ul {
    margin: 0;
}

@media (max-width: 600px) {
    .bases-reguladores .iae-cols { column-count: 1; }
}

/* ============================================================
   Bases reguladores CastellbisVals'26 (2026-10-15)
   Pagina CMS bases-reguladores (CA) / bases-reguladoras (ES).
   HTML net al camp Contingut, embolcallat amb
   <div class="bases-campanya not-prose">: not-prose treu els
   estils de .prose del tema i aqui ho pintem tot. Prefix bc-.
   Les clausules es numeren soles (comptador CSS).
   ============================================================ */
.bases-campanya {
    --bc-lima: #d3da6e;
    --bc-accent-fosc: color-mix(in srgb, var(--color-accent) 72%, black);
    --bc-vora: #e7e5e4;
    --bc-radi: 0.875rem;
    counter-reset: bc-clausula;
    color: #374151;
    font-size: 1.0625rem;
    line-height: 1.7;
}
.bases-campanya *,
.bases-campanya *::before,
.bases-campanya *::after {
    box-sizing: border-box;
}
/* El tema limita tots els <p> a 70ch */
.bases-campanya p {
    max-width: none;
    margin: 0 0 1rem;
}
.bases-campanya strong {
    color: #1f2937;
    font-weight: 700;
}
.bases-campanya a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bases-campanya a:hover {
    color: var(--color-primary-hover);
}

/* --- Capcalera --- */
.bases-campanya .bc-cap {
    position: relative;
    text-align: center;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}
/* Doble linia de sota (pseudoelement perque es pugui animar) */
.bases-campanya .bc-cap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 40%, white);
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 40%, white);
}
.bases-campanya .bc-ref {
    display: inline-block;
    margin: 0 0 0.75rem;
    padding: 0.125rem 0.75rem;
    border: 1px solid var(--bc-vora);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b7280;
}
.bases-campanya .bc-titol {
    margin: 0 0 0.5rem;
    font-size: clamp(2.5rem, 7vw, 3.5rem);
    line-height: 1;
    color: var(--color-primary);
}
.bases-campanya .bc-titol span {
    color: var(--color-accent);
}
.bases-campanya .bc-subtitol {
    max-width: 38rem;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: #4b5563;
    text-wrap: balance;
}

/* --- Resum de dades clau --- */
.bases-campanya .bc-resum {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 2.5rem;
}
.bases-campanya .bc-dada {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 0.875rem;
    text-align: center;
    background: color-mix(in srgb, var(--color-primary) 6%, white);
    border: 1px solid color-mix(in srgb, var(--color-primary) 16%, white);
    border-radius: var(--bc-radi);
}
.bases-campanya .bc-dada-etiqueta {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bc-accent-fosc);
}
.bases-campanya .bc-dada-valor {
    font-family: var(--font-heading);
    font-size: clamp(1.625rem, 4.5vw, 2.125rem);
    line-height: 1.05;
    letter-spacing: 0.02em;
    color: var(--color-primary);
    text-wrap: balance;
}
.bases-campanya .bc-dada-nota {
    font-size: 0.875rem;
    line-height: 1.4;
    color: #4b5563;
    text-wrap: balance;
}

/* --- Index --- */
.bases-campanya .bc-index {
    margin: 0 0 1rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid var(--bc-vora);
    border-radius: var(--bc-radi);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.bases-campanya .bc-index-titol {
    margin: 0 0 0.5rem;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--color-primary);
}
.bases-campanya .bc-index ol {
    margin: 0;
    padding-left: 1.75rem;
    list-style: decimal;
    font-size: 0.9375rem;
    line-height: 1.4;
}
.bases-campanya .bc-index li {
    margin: 0 0 0.45rem;
    padding-left: 0.25rem;
    break-inside: avoid;
}
.bases-campanya .bc-index li::marker {
    color: var(--color-primary);
    font-weight: 700;
}
.bases-campanya .bc-index a {
    color: #374151;
    font-weight: 400;
    text-decoration: none;
}
.bases-campanya .bc-index a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* --- Clausules --- */
.bases-campanya .bc-clausula {
    counter-increment: bc-clausula;
    margin-top: 2.25rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--bc-vora);
    /* Que la capcalera fixa no tapi el titol en saltar des de l'index */
    scroll-margin-top: 6rem;
}
.bases-campanya .bc-clausula > h3 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 3rem;
    margin: 0 0 1.25rem;
    padding-left: 4rem;
    font-size: clamp(1.625rem, 4vw, 2rem);
    line-height: 1.05;
    color: var(--color-primary);
}
.bases-campanya .bc-clausula > h3::before {
    content: counter(bc-clausula);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding-top: 0.1em;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.625rem;
    line-height: 1;
}
.bases-campanya .bc-ordinal {
    margin-bottom: 0.25rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bc-accent-fosc);
}
.bases-campanya .bc-subapartat {
    margin: 1.5rem 0 0.625rem;
    font-family: var(--font-heading);
    font-size: 1.375rem;
    line-height: 1.2;
    letter-spacing: 0.03em;
    color: var(--bc-accent-fosc);
}

/* --- Epigrafs de l'IAE (codi + descripcio; 2 columnes a partir de 640px) --- */
.bases-campanya .bc-iae {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
    line-height: 1.45;
}
.bases-campanya .bc-iae > li {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0 0 0.375rem;
    padding: 0.5rem 0.75rem;
    background: #faf9f8;
    border: 1px solid #f0eeec;
    border-radius: 0.5rem;
    break-inside: avoid;
}
.bases-campanya .bc-iae-codi {
    flex: none;
    min-width: 2.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
}

/* --- Llistes: a) b) c) / i. ii. iii. / guions --- */
.bases-campanya .bc-lletres,
.bases-campanya .bc-romans,
.bases-campanya .bc-guions {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}
.bases-campanya .bc-lletres {
    counter-reset: bc-lletra;
}
.bases-campanya .bc-lletres > li {
    counter-increment: bc-lletra;
    position: relative;
    margin: 0 0 0.75rem;
    padding-left: 2.5rem;
}
.bases-campanya .bc-lletres > li::before {
    content: counter(bc-lletra, lower-alpha) ")";
    position: absolute;
    left: 0;
    top: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-primary) 10%, white);
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
}
.bases-campanya .bc-romans {
    counter-reset: bc-roma;
    margin-top: 0.5rem;
}
.bases-campanya .bc-romans > li {
    counter-increment: bc-roma;
    position: relative;
    margin: 0 0 0.5rem;
    padding-left: 2.25rem;
}
.bases-campanya .bc-romans > li::before {
    content: counter(bc-roma, lower-roman) ".";
    position: absolute;
    left: 0;
    width: 1.75rem;
    text-align: right;
    color: var(--color-primary);
    font-weight: 700;
}
.bases-campanya .bc-guions > li {
    position: relative;
    margin: 0 0 0.375rem;
    padding-left: 1.25rem;
}
.bases-campanya .bc-guions > li::before {
    content: "\2013";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}
.bases-campanya li > p:last-child,
.bases-campanya li > ul:last-child,
.bases-campanya li > ol:last-child {
    margin-bottom: 0;
}

/* --- Vals (targetes amb l'import en forma de tiquet) --- */
.bases-campanya .bc-vals {
    display: grid;
    gap: 0.75rem;
    margin: 0.75rem 0 1.25rem;
    padding: 0;
    list-style: none;
}
.bases-campanya .bc-vals > li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: #fff;
    border: 1px solid var(--bc-vora);
    border-radius: var(--bc-radi);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    line-height: 1.5;
}
.bases-campanya .bc-val-import {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    height: 3.25rem;
    padding: 0.1em 0.875rem 0;
    border-radius: 0.375rem;
    background: var(--bc-lima);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 1.875rem;
    line-height: 1;
    white-space: nowrap;
    /* Osques laterals de tiquet, com el logotip */
    -webkit-mask:
        radial-gradient(circle at left center, transparent 0.4rem, #000 0.42rem) left / 51% 100% no-repeat,
        radial-gradient(circle at right center, transparent 0.4rem, #000 0.42rem) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle at left center, transparent 0.4rem, #000 0.42rem) left / 51% 100% no-repeat,
        radial-gradient(circle at right center, transparent 0.4rem, #000 0.42rem) right / 51% 100% no-repeat;
}

/* --- Avisos --- */
.bases-campanya .bc-avis {
    margin: 1rem 0 1.25rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid;
    border-radius: 0.75rem;
}
.bases-campanya .bc-avis p:last-child {
    margin-bottom: 0;
}
.bases-campanya .bc-avis--exclosos {
    background: color-mix(in srgb, var(--color-primary) 6%, white);
    border-color: var(--color-primary);
}
.bases-campanya .bc-avis--important {
    background: color-mix(in srgb, var(--bc-lima) 32%, white);
    border-color: color-mix(in srgb, var(--bc-lima) 60%, black);
}

/* --- Calendari d'abonaments --- */
.bases-campanya .bc-taula {
    overflow-x: auto;
    margin: 1rem 0 0.5rem;
    border: 1px solid var(--bc-vora);
    border-radius: 0.75rem;
}
.bases-campanya .bc-taula table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.45;
}
.bases-campanya .bc-taula th {
    padding: 0.625rem 1rem;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
}
.bases-campanya .bc-taula td {
    padding: 0.625rem 1rem;
    border-top: 1px solid #efedeb;
}
.bases-campanya .bc-taula tbody tr:nth-child(even) td {
    background: #faf8f6;
}
.bases-campanya .bc-taula td:first-child {
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
}
.bases-campanya .bc-nota {
    font-size: 0.875rem;
    color: #6b7280;
}

/* --- Atencio durant la campanya --- */
.bases-campanya .bc-contacte {
    display: grid;
    gap: 0.625rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}
.bases-campanya .bc-contacte > li {
    padding: 0.875rem 1rem;
    background: color-mix(in srgb, var(--color-accent) 8%, white);
    border: 1px solid color-mix(in srgb, var(--color-accent) 22%, white);
    border-radius: 0.75rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.bases-campanya .bc-contacte-tipus {
    display: block;
    margin-bottom: 0.125rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bc-accent-fosc);
}
.bases-campanya .bc-contacte a[href^="tel:"] {
    white-space: nowrap;
}

/* --- Peu --- */
.bases-campanya .bc-peu {
    margin: 3rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bc-vora);
    font-size: 0.875rem;
    text-align: center;
    color: #6b7280;
}

/* --- Responsive --- */
@media (min-width: 640px) {
    .bases-campanya .bc-index ol { columns: 2; column-gap: 2.5rem; }
    .bases-campanya .bc-iae { columns: 2; column-gap: 1rem; }
    .bases-campanya .bc-vals,
    .bases-campanya .bc-contacte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .bases-campanya .bc-resum { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}
@media (max-width: 639px) {
    .bases-campanya { font-size: 1rem; }
    .bases-campanya .bc-index { padding: 1rem 1.125rem; }
    .bases-campanya .bc-clausula { margin-top: 1.75rem; padding-top: 1.75rem; }
    .bases-campanya .bc-clausula > h3 { min-height: 2.5rem; padding-left: 3.25rem; }
    .bases-campanya .bc-clausula > h3::before { width: 2.5rem; height: 2.5rem; font-size: 1.375rem; }
    .bases-campanya .bc-lletres > li { padding-left: 2.25rem; }
    .bases-campanya .bc-iae > li { gap: 0.625rem; padding: 0.4375rem 0.625rem; }
    .bases-campanya .bc-avis { padding: 0.875rem 1rem; }
}
@media (max-width: 359px) {
    .bases-campanya .bc-resum { grid-template-columns: 1fr; }
}

/* --- Animacions ---
   Nomes en pantalla i si l'usuari no demana menys moviment.
   - En carregar: capcalera, resum i index entren en cascada.
   - En fer scroll (animation-timeline: view(); Chrome, Edge, Safari 26):
     els blocs de les clausules apareixen en entrar a la pantalla i els
     tiquets dels vals fan un cop de segell. Sense suport, tot es veu de
     seguida: res no queda amagat.
   - Les animacions mouen amb transform i els hovers amb les propietats
     translate/rotate/scale, perque l'estat final de l'animacio (fill both)
     no anul.li el hover. */
@media screen and (prefers-reduced-motion: no-preference) {
    @keyframes bc-entra {
        from { opacity: 0; transform: translateY(14px); }
        to { opacity: 1; transform: none; }
    }
    @keyframes bc-linia {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
    }
    @keyframes bc-segell {
        from { opacity: 0; transform: rotate(-14deg) scale(0.6); }
        60% { opacity: 1; transform: rotate(4deg) scale(1.08); }
        to { opacity: 1; transform: none; }
    }
    @keyframes bc-pols {
        from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 55%, transparent); }
        to { box-shadow: 0 0 0 16px transparent; }
    }

    /* Entrada en carregar la pagina */
    .bases-campanya .bc-cap > *,
    .bases-campanya .bc-dada,
    .bases-campanya .bc-index {
        animation: bc-entra 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
    .bases-campanya .bc-cap > :nth-child(2) { animation-delay: 0.08s; }
    .bases-campanya .bc-cap > :nth-child(3) { animation-delay: 0.16s; }
    .bases-campanya .bc-dada:nth-child(1) { animation-delay: 0.24s; }
    .bases-campanya .bc-dada:nth-child(2) { animation-delay: 0.32s; }
    .bases-campanya .bc-dada:nth-child(3) { animation-delay: 0.4s; }
    .bases-campanya .bc-dada:nth-child(4) { animation-delay: 0.48s; }
    .bases-campanya .bc-index { animation-delay: 0.56s; }
    .bases-campanya .bc-cap::after {
        animation: bc-linia 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
    }

    /* Salt des de l'index: el numero de la clausula de desti fa un pols */
    .bases-campanya .bc-clausula:target > h3::before {
        animation: bc-pols 1.1s ease-out 0.4s 2;
    }

    /* Hovers (nomes amb ratoli: al mobil el hover es queda enganxat) */
    @media (hover: hover) {
        .bases-campanya .bc-dada,
        .bases-campanya .bc-vals > li,
        .bases-campanya .bc-contacte > li {
            transition: translate 0.25s ease, box-shadow 0.25s ease;
        }
        .bases-campanya .bc-dada:hover,
        .bases-campanya .bc-vals > li:hover,
        .bases-campanya .bc-contacte > li:hover {
            translate: 0 -3px;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
        }
        .bases-campanya .bc-val-import {
            transition: rotate 0.35s cubic-bezier(0.3, 1.6, 0.5, 1), scale 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
        }
        .bases-campanya .bc-vals > li:hover .bc-val-import {
            rotate: -6deg;
            scale: 1.08;
        }
        .bases-campanya .bc-index a {
            display: inline-block;
            transition: translate 0.2s ease, color 0.2s ease;
        }
        .bases-campanya .bc-index a:hover {
            translate: 3px 0;
        }
        .bases-campanya .bc-iae > li {
            transition: background-color 0.2s ease, border-color 0.2s ease;
        }
        .bases-campanya .bc-iae > li:hover {
            background: color-mix(in srgb, var(--color-primary) 5%, white);
            border-color: color-mix(in srgb, var(--color-primary) 18%, white);
        }
        .bases-campanya .bc-taula td {
            transition: background-color 0.2s ease;
        }
        .bases-campanya .bc-taula tbody tr:hover td {
            background: color-mix(in srgb, var(--color-primary) 6%, white);
        }
    }

    /* Aparicio en fer scroll. Els <li> amb paragrafs no s'animen (ja ho fan
       els seus paragrafs) ni els <p> dels avisos (ja ho fa l'avis): aixi no
       es dobla el desplacament. */
    @supports (animation-timeline: view()) {
        .bases-campanya .bc-clausula :is(h3, p:not(.bc-avis > p), li:not(:has(> p)), .bc-avis, .bc-taula) {
            animation: bc-entra linear both;
            animation-timeline: view();
            /* Acaba quan el bloc ha entrat del tot (com a molt 160px: la taula) */
            animation-range: entry 0% entry min(100%, 160px);
        }
        .bases-campanya .bc-val-import {
            animation: bc-segell linear both;
            animation-timeline: view();
            animation-range: entry 100% cover 30%;
        }
    }
}

/* ============================================================
   Registre d'establiment - espaiat dels checks d'acceptacio
   El check "Accepto les bases reguladores" ve dels camps extra
   (grup .space-y-4.mb-4, marge inferior 16px) i quedava mes
   separat dels checks de condicions/privacitat (.mb-2, 8px).
   Igualem l'espaiat a 8px perque els tres formin un bloc coherent.
   Acotat al formulari de registre via :has(#commercial_name) per
   no afectar altres pagines.
   ============================================================ */
form:has(#commercial_name) .space-y-4.mb-4 {
    margin-bottom: 0.5rem;
}
form:has(#commercial_name) .mb-2.mt-4 {
    margin-top: 0.5rem;
}

/* ============================================================
   Pagina "Com funciona / Que son els CastellbisVals" (CMS)
   HTML net al camp Contingut, embolcallat amb .cf
   Tots els estils acotats a .cf per no afectar la resta del web.
   Colors via var(--color-primary)/secondary del tenant.
   ============================================================ */
.cf {
    --cf-radius: 16px;
    color: #374151;
}
.cf * { box-sizing: border-box; }
/* Anul.lem el max-width:70ch global del tema v2 dins del bloc */
.cf p { max-width: none; margin: 0; }
.cf h2, .cf h3 { color: var(--color-secondary); margin: 0; line-height: 1.2; }

/* --- Hero / proposta de valor --- */
.cf-hero {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 12%, white),
        color-mix(in srgb, var(--color-secondary) 8%, white));
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, white);
    border-radius: var(--cf-radius);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 48px;
}
.cf-badge {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.cf-hero h2 {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    margin-bottom: 14px;
}
.cf-hero p {
    font-size: 18px;
    line-height: 1.65;
    max-width: 620px;
    margin: 0 auto;
    color: #4b5563;
}

/* --- Botons --- */
.cf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 28px;
}
.cf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    cursor: pointer;
}
.cf-btn svg { width: 19px; height: 19px; }
.cf-btn-primary {
    background: var(--color-primary);
    color: #fff !important;
}
.cf-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.cf-btn-ghost {
    background: #fff;
    color: var(--color-secondary) !important;
    border: 2px solid color-mix(in srgb, var(--color-secondary) 25%, white);
}
.cf-btn-ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary) !important;
}

/* --- Franja d'estadistiques --- */
.cf-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 56px;
}
.cf-stat {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: var(--cf-radius);
    padding: 26px 18px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
}
.cf-stat-num {
    display: block;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
}
.cf-stat-label {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

/* --- Titols de seccio --- */
.cf-h2 {
    font-size: clamp(24px, 3.5vw, 32px);
    font-weight: 800;
    text-align: center;
    margin-bottom: 8px !important;
}
.cf-sub {
    text-align: center;
    color: #6b7280;
    max-width: 560px;
    margin: 0 auto 36px !important;
}

/* --- Passos --- */
.cf-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 56px;
}
.cf-step {
    position: relative;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: var(--cf-radius);
    padding: 32px 24px 26px;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
    transition: transform .18s ease, box-shadow .18s ease;
}
.cf-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,0,0,.08);
}
.cf-step-num {
    position: absolute;
    top: -18px;
    left: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.cf-step-icon {
    color: var(--color-primary);
    margin: 8px 0 14px;
}
.cf-step-icon svg { width: 30px; height: 30px; }
.cf-step h3 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 10px;
}
.cf-step p {
    font-size: 15.5px;
    line-height: 1.6;
    color: #5b6472;
}

/* --- Caixes destacades (dates / nota) --- */
.cf-callout {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    border-radius: var(--cf-radius);
    padding: 26px 28px;
    margin-bottom: 28px;
}
.cf-callout svg { width: 28px; height: 28px; flex-shrink: 0; margin-top: 2px; }
.cf-callout h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.cf-callout p { font-size: 15.5px; line-height: 1.6; }
.cf-callout--dates {
    background: color-mix(in srgb, var(--color-primary) 8%, white);
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, white);
}
.cf-callout--dates svg { color: var(--color-primary); }
.cf-callout--note {
    background: #fff8ec;
    border: 1px solid #f5e2bd;
}
.cf-callout--note svg { color: #d68a0c; }
.cf-callout--note h3 { color: #8a5a06; }
.cf-callout--note p { color: #6b5421; }

/* --- CTA final (comercos) --- */
.cf-cta {
    margin-top: 48px;
    background: var(--color-secondary);
    border-radius: var(--cf-radius);
    padding: 48px 32px;
    text-align: center;
}
.cf-cta h2 { color: #fff; font-size: clamp(24px, 3.5vw, 32px); font-weight: 800; margin-bottom: 12px; }
.cf-cta p { color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto; font-size: 17px; line-height: 1.6; }
.cf-btn-ghost-light {
    background: transparent;
    color: #fff !important;
    border: 2px solid rgba(255,255,255,.5);
}
.cf-btn-ghost-light:hover {
    background: rgba(255,255,255,.12);
    border-color: #fff;
}

/* --- Responsive --- */
@media (max-width: 860px) {
    .cf-steps { grid-template-columns: 1fr; gap: 30px; }
    .cf-stats { grid-template-columns: 1fr; }
    .cf-hero { padding: 32px 20px; }
}