/* Source: app/templates/pages/campaign.html */
/* Llenç de disseny: 1728px de Figma escalat per encaixar a qualsevol amplada (zoom via --figma-scale) */
  .figma-canvas {
    width: 1728px;
    margin: 0 auto;
    zoom: var(--figma-scale, 1);
  }
.card-tabs .nav-tabs+.tab-content .card .card { border-radius: var(--tblr-card-border-radius) !important; }
  input.qty-input::-webkit-outer-spin-button,
  input.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input.qty-input {
    -moz-appearance: textfield;
  }
  .ts-dropdown {
    z-index: 1060 !important;
    background: #fff !important;
  }
  .top-row {
    width: 1246px;
    display: grid;
    grid-template-columns: 791px 426px;
    gap: 29px;
    align-items: start;
    margin-top: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .top-row > .col-lg-8,
  .top-row > .col-lg-4 {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
  }
  .top-right {
    display: flex;
    flex-direction: column;
  }
  .top-right > .card:last-child {
    flex: 1;
    margin-bottom: 0 !important;
  }
  .modal .ts-wrapper {
    z-index: 1055;
  }
  .card-tabs > .tab-content > .card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  body > .page > .navbar {
    display: none !important;
  }
  .page-body {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .page-body > .container-xl {
    width: 100%;
    max-width: none !important;
    padding-right: 0;
    padding-left: 0;
  }
  .campaign-page-header-shell {
    width: 1440.549px;
    margin: 0 auto;
    position: relative;
  }
  .campaign-page-header-shell .figma-nav {
    width: 100% !important;
    max-width: 1440.549px !important;
    margin: 0 !important;
  }
  .campaign-page-footer-shell {
    width: 100%;
    margin: var(--figma-content-footer-gap) 0 0;
  }
  .campaign-page-footer-shell .figma-footer {
    width: var(--figma-full-bleed-width);
  }
  .page-header {
    width: 791px;
    max-width: 791px;
    margin: 67px auto 34px !important;
    transform: translateX(calc((1247px - 791px) / -2));
    position: relative;
  }
  .page-header .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .page-header .col {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .page-pretitle {
    display: none;
  }
  .page-title {
    color: #111;
    font-size: 32px;
    line-height: 40px;
    font-weight: 400;
    letter-spacing: 0;
    margin: 0;
  }
  .campaign-admin-actions {
    position: absolute;
    left: 1041.5px;
    top: 50px;
    display: flex !important;
    gap: 41px !important;
    align-items: center;
    z-index: 2;
  }
  .campaign-admin-actions .campaign-admin-link {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #111;
    font-family: "Geologica", sans-serif;
    font-size: 12px;
    line-height: 16.8px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: 0 !important;
  }
  .campaign-admin-actions .campaign-admin-link:hover,
  .campaign-admin-actions .campaign-admin-link:focus,
  .campaign-admin-actions .campaign-admin-link:visited,
  .campaign-admin-actions .campaign-admin-link:active {
    background: transparent;
    color: #111;
    border: 0;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: 0 !important;
  }
  .campaign-admin-actions .campaign-admin-link:focus-visible {
    outline: 0 !important;
  }
  .campaign-admin-actions .campaign-admin-link .icon {
    width: 16px;
    height: 16px;
    margin-right: 7px;
    flex: 0 0 auto;
    stroke-width: 2.1;
  }
  .campaign-admin-actions .campaign-admin-preview-action {
    display: none;
  }
  .campaign-page-subtitle {
    margin: 12px 0 0;
    max-width: 714px;
    color: #111;
    font-size: 18px;
    line-height: 18px;
    font-weight: 200;
  }
  #main-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f7f6f4;
    border: 0;
    overflow: hidden;
  }
  #main-media img,
  #main-media iframe {
    display: block;
  }
  #main-media iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
  #main-media img {
    width: 100%;
    height: 100%;
  }
  .top-row > .col-lg-8 > .card {
    border: 0;
    box-shadow: none;
  }
  .top-row > .col-lg-8 > .card > .card-body {
    padding: 38px 0 0;
  }
  #main-image {
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover;
  }
  .campaign-cover-media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .campaign-cover-img {
    max-height: 100%;
    object-fit: cover;
  }
  .campaign-cover-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: rgba(15, 23, 42, .18);
    color: #fff;
    cursor: pointer;
  }
  .campaign-cover-play span {
    width: 58px;
    height: 58px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .78);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .25);
  }
  .campaign-cover-play:hover span {
    background: rgba(15, 23, 42, .9);
  }
  .gallery-thumb {
    appearance: none;
    width: 10px !important;
    height: 10px !important;
    border: 1px solid #868686 !important;
    border-radius: 999px !important;
    background: transparent !important;
    padding: 0 !important;
    overflow: hidden;
    cursor: pointer;
    display: block;
  }
  .gallery-thumb.active {
    border-color: var(--ribele-blue) !important;
    background: var(--ribele-blue) !important;
  }
  .gallery-thumb:hover,
  .gallery-thumb:focus {
    border-color: var(--ribele-blue) !important;
    outline: 0;
  }
  .gallery-thumb:focus-visible {
    outline: 1px solid var(--ribele-blue);
    outline-offset: 3px;
  }
  .gallery-thumb img,
  .gallery-thumb svg {
    display: none !important;
  }
  .campaign-progress-thin {
    height: 6px;
  }
  .campaign-reward-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .campaign-units-col,
  .campaign-qty-control {
    width: 100px;
  }
  .campaign-qty-control {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }
  .campaign-qty-btn {
    width: 26px;
    height: 24px;
    padding: 0;
    border: 1px solid #a9a9a9;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .campaign-qty-input {
    width: 34px !important;
    min-width: 34px;
    height: 24px !important;
    min-height: 24px;
    border-color: #d8d6df;
    border-radius: 0;
    font-size: 13px;
    line-height: 20px;
  }
  .top-row > .col-lg-8 > .card { position: relative; }
  .campaign-gallery-dots {
    position: absolute;
    top: 468px;
    right: 0;
    display: flex !important;
    align-items: center;
    gap: 5px !important;
    margin-left: 0 !important;
    z-index: 3;
  }
  /* ===== Panell de fase (Figma: 426px, exacte) ===== */
  .campaign-phase-card {
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  .campaign-phase-card .card-body {
    padding: 0;
  }
  /* Bloc superior de mètriques amb fons lila (#F6F5FE, 426x224) */
  .campaign-phase-metrics {
    background: #f6f5fe;
    min-height: 224px;
    padding: 25px 25px 24px 31px;
    border-radius: 0;
  }
  .campaign-phase-headline {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: #111;
    font-size: 42px;
    line-height: 52px;
    font-weight: 200;
    letter-spacing: -2.1px;
  }
  .campaign-phase-unit {
    font-size: 42px;
    line-height: 52px;
    font-weight: 200;
    letter-spacing: -2.1px;
  }
  .campaign-phase-goal {
    margin-left: 6px;
    align-self: flex-end;
    padding-bottom: 8px;
    color: #111;
    font-size: 11px;
    line-height: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
  }
  .campaign-phase-progress {
    position: relative;
    height: 10px;
    margin: 23px 0 22px;
    overflow: visible;
    border-radius: 100px;
    background: #e4e2fc;
  }
  .campaign-phase-progress-bar {
    height: 100%;
    border-radius: 100px;
    background: var(--ribele-blue);
  }
  .campaign-phase-goal-reached {
    position: absolute;
    top: 50%;
    right: -1px;
    z-index: 1;
    display: block;
    width: 21.5px;
    height: 21.5px;
    transform: translateY(-50%);
  }
  .campaign-phase-stats {
    display: grid;
    grid-template-columns: repeat(3, 76px);
    gap: 30px;
    margin-bottom: 0;
  }
  .campaign-phase-stat-value {
    color: #111;
    font-size: 32px;
    line-height: 40px;
    font-weight: 200;
    letter-spacing: -1.6px;
  }
  .campaign-phase-stat-label {
    margin-top: 2px;
    color: #111;
    font-size: 12px;
    line-height: 18px;
    font-weight: 200;
    text-transform: none;
  }
  .campaign-stretch-goal {
    position: relative;
    box-sizing: border-box;
    width: 425px;
    height: 126.473px;
    margin-top: 15.434px;
    margin-left: 1px;
    border: 1px solid #d1d1d1;
    border-radius: 0;
    background: #fff;
    color: #111;
  }
  .campaign-stretch-label {
    position: absolute;
    top: 21.218px;
    left: 31.684px;
    display: flex;
    align-items: flex-start;
    gap: 7.199px;
    height: 16.5px;
    color: #111;
    font-family: "Geologica", sans-serif;
    font-size: 11px;
    line-height: 16.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .campaign-stretch-label img {
    width: 9.75px;
    height: 13px;
    margin-top: 0.652px;
    flex: 0 0 9.75px;
  }
  .campaign-stretch-status {
    position: absolute;
    top: 17.968px;
    right: 15.25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 111.5px;
    height: 22.5px;
    border-radius: 5px;
    background: rgba(81, 59, 254, 0.1);
    color: #513bfe;
    font-family: "Geologica", sans-serif;
    font-size: 10px;
    line-height: 12.5px;
    font-weight: 300;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .campaign-stretch-name {
    position: absolute;
    top: 41.718px;
    left: 30.058px;
    max-width: 258px;
    overflow: hidden;
    color: #111;
    font-family: "Geologica", sans-serif;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .campaign-stretch-progress {
    position: absolute;
    top: 88.375px;
    left: 29.523px;
    width: 370px;
    height: 10px;
    overflow: hidden;
    border-radius: 100px;
    background: #e4e2fc;
  }
  .campaign-stretch-progress > span {
    display: block;
    height: 100%;
    background: #513bfe;
  }
  .campaign-phase-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    border: 0;
    border-radius: 100px !important;
    background: var(--ribele-blue);
    color: #fff;
    font-family: "Geologica", sans-serif;
    font-size: 20px;
    line-height: 25px;
    font-weight: 400;
    letter-spacing: -0.2px;
    min-height: 50px;
    padding: 0 24px;
  }
  .campaign-phase-cta:hover,
  .campaign-phase-cta:focus {
    background: var(--ribele-blue-dark);
    color: #fff;
  }
  .campaign-phase-cta-voted,
  .campaign-phase-cta-voted:hover,
  .campaign-phase-cta-voted:focus,
  .campaign-phase-cta-voted:disabled {
    background: #111;
    color: #fff;
    opacity: 1;
  }
  .campaign-phase-cta .cta-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    opacity: 1;
  }
  .campaign-phase-cta .cta-icon:not([fill]) {
    fill: currentColor;
  }
  .campaign-phase-cta .cta-icon-like {
    width: 19.022px;
    height: 19.56px;
    flex-basis: 19.022px;
  }
  .campaign-phase-cta .cta-icon-cart {
    width: 23.4px;
    height: 20px;
    flex-basis: 23.4px;
  }
  /* ===== Panell CANCELADO (Figma: tot en grisos, sense CTA) ===== */
  .campaign-phase-card.is-cancelled .campaign-phase-metrics { background: #fbfbfb; }
  .campaign-phase-card.is-cancelled .campaign-phase-headline,
  .campaign-phase-card.is-cancelled .campaign-phase-headline span,
  .campaign-phase-card.is-cancelled .campaign-phase-unit,
  .campaign-phase-card.is-cancelled .campaign-phase-goal,
  .campaign-phase-card.is-cancelled .campaign-phase-stat-value,
  .campaign-phase-card.is-cancelled .campaign-phase-stat-label { color: #868686; }
  .campaign-phase-card.is-cancelled .campaign-phase-progress-bar::-webkit-progress-bar { background: #d1d1d1; }
  .campaign-phase-card.is-cancelled .campaign-phase-progress-bar::-webkit-progress-value { background: #868686; }
  .campaign-phase-card.is-cancelled .campaign-phase-progress-bar::-moz-progress-bar { background: #868686; }
  .campaign-phase-lastupdate {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #111;
    font-size: 14px;
    line-height: 19.6px;
    font-weight: 200;
  }
  .campaign-phase-lastupdate img { width: 18px; height: 20px; flex: 0 0 18px; }
  .campaign-phase-lastupdate-date { text-decoration: underline; }
  #main-media.is-cancelled img,
  #main-media.is-cancelled iframe { filter: grayscale(1); }

  .campaign-phase-context {
    margin-top: 27px;
    color: #111;
    font-family: "Geologica", sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 200;
  }
  .campaign-phase-context strong {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-transform: uppercase;
  }
  .campaign-phase-social-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 37px;
    margin-top: 36px;
  }
  /* Sense pill (fase de votació): les icones són la línia sencera i van 6px més avall */
  .campaign-phase-social-line:not(:has(.campaign-phase-like-pill)) {
    margin-top: 45px;
  }
  .campaign-phase-like-pill {
    width: 165px;
    height: 45px;
    border: 1px solid #d1d1d1;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #111;
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: 0;
    flex: 0 0 165px;
  }
  .campaign-phase-like-pill img {
    width: 14.588px;
    height: 15px;
    display: block;
  }
  .campaign-share-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-left: auto;
    margin-right: 34px;
    margin-top: 0;
    color: #111;
    width: 190.278px;
    height: 24.43px;
  }
  .campaign-share-row > span {
    display: none;
  }
  .campaign-share-row > a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  .campaign-share-icon {
    display: block;
  }
  .campaign-share-icon-facebook {
    width: 12px;
    height: 24px;
  }
  .campaign-share-icon-x {
    width: 19.611px;
    height: 17.551px;
  }
  .campaign-share-icon-instagram {
    width: 24px;
    height: 24px;
  }
  .campaign-share-icon-bluesky {
    width: 27px;
    height: 24px;
  }
  .campaign-share-icon-email {
    width: 30.207px;
    height: 23.826px;
  }
  .top-right h1,
  .top-right .fs-1,
  .top-right .fs-2,
  .top-right .fs-3 {
    color: var(--ribele-ink);
    font-weight: 300;
  }
  .top-right .card-body.text-center .icon-lg {
    color: var(--ribele-blue);
  }
  /* ===== Secció creador (Figma: flux, avatar 76 | nom/desc/Seguir) ===== */
  .campaign-creator-summary {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    width: 608px;
    margin: 0;
  }
  .campaign-creator-avatar-link { flex: 0 0 76px; display: block; }
  .campaign-creator-avatar {
    width: 76px;
    height: 76px;
    min-width: 76px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    margin: 0 !important;
  }
  .campaign-creator-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .campaign-creator-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }
  .campaign-creator-name-link { text-decoration: none; }
  .campaign-creator-name {
    margin: 0;
    color: #111;
    font-size: 20px;
    line-height: 28px;
    font-weight: 200;
  }
  .campaign-creator-bio {
    margin-top: 7px;
    max-width: 510px;
    color: #111;
    font-size: 13px;
    line-height: 20px;
    font-weight: 200;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .campaign-creator-copy .follow-btn {
    margin-top: 20px;
    align-self: flex-start;
    min-width: 87px;
    height: 30px;
    padding: 0 22px;
    border: 1px solid #d1d1d1;
    border-radius: 100px;
    background: #fff;
    color: #111;
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .campaign-creator-copy .follow-btn.btn-dark {
    background: #111;
    color: #fff;
    border-color: #111;
  }
  .top-row .text-muted.fs-3 {
    display: none;
  }
  .card-tabs > .nav-tabs {
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    height: 41px;
    margin-left: 0;
    padding-left: 0;
    border-bottom: 0 !important;
    gap: 0;
    flex-wrap: nowrap;
  }
  .card-tabs > .nav-tabs::before {
    content: "";
    position: absolute;
    left: calc(-241.5px + var(--figma-full-bleed-offset));
    bottom: 0;
    width: var(--figma-full-bleed-width);
    height: 1px;
    background: #d1d1d1;
    pointer-events: none;
    z-index: 2;
  }
  .card-tabs > .nav-tabs .nav-link {
    position: relative;
    display: flex;
    align-items: flex-start;
    border: 0 !important;
    border-radius: 0;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0;
    color: #868686;
    font-size: 17px;
    line-height: 17px;
    font-weight: 300;
    z-index: auto;
  }
  .card-tabs > .nav-tabs .nav-item {
    position: absolute;
    top: 0;
    flex: 0 0 auto;
  }
  .card-tabs > .nav-tabs .nav-item:nth-child(1) { left: 0; }
  .card-tabs > .nav-tabs .nav-item:nth-child(2) { left: 202.5px; }
  .card-tabs > .nav-tabs .nav-item:nth-child(3) { left: 323.526px; }
  .card-tabs > .nav-tabs .nav-item:nth-child(4) { left: 454.595px; }
  .card-tabs > .nav-tabs .nav-item:nth-child(5) { left: 661.086px; }
  .card-tabs > .nav-tabs .nav-item:nth-child(1) .nav-link { width: 144.068px; }
  .card-tabs > .nav-tabs .nav-item:nth-child(2) .nav-link { width: 69.5px; }
  .card-tabs > .nav-tabs .nav-item:nth-child(3) .nav-link { width: 83.141px; }
  .card-tabs > .nav-tabs .nav-item:nth-child(4) .nav-link { width: 157.044px; }
  .card-tabs > .nav-tabs .nav-item:nth-child(5) .nav-link { width: 129.414px; }
  .card-tabs > .nav-tabs .nav-link span {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    white-space: nowrap;
  }
  .card-tabs > .nav-tabs .nav-link.active {
    border-bottom: 0 !important;
    box-shadow: none !important;
    background: transparent;
    color: #111;
    font-weight: 400;
  }
  .campaign-feedback-tab-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    margin-right: 7.05px;
    background: currentColor;
    -webkit-mask: url("/static/img/figma/feedback-tab-icon.svg") center / 15px 15px no-repeat;
    mask: url("/static/img/figma/feedback-tab-icon.svg") center / 15px 15px no-repeat;
  }
  .card-tabs > .tab-content > .card {
    border: 0;
  }
  .card-tabs > .tab-content > .card > .card-body {
    padding: 54px 0 0;
  }
  .markdown {
    color: #111;
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 200;
  }
  .markdown h1,
  .markdown h2,
  .markdown h3 {
    color: #111;
    font-weight: 400;
    line-height: 1.2;
  }
  .markdown h1 {
    font-size: 28px;
    line-height: 42px;
    font-weight: 200;
    letter-spacing: -0.6px;
  }
  .markdown h2 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 300;
  }
  .markdown img,
  .tab-pane img.img-fluid {
    width: 100%;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 28px 0;
  }
  #tab-about .markdown {
    width: 734px;
  }
  #tab-about .markdown img {
    display: block;
    height: auto;
  }
  .markdown blockquote {
    width: 726px;
    margin: 56px 0;
    padding: 42px 40px 44px;
    background: #f3f3f3;
    border: 0;
  }
  .markdown blockquote > :last-child {
    margin-bottom: 0;
  }
  .row.mt-3:has(.card-tabs) {
    display: grid;
    width: 1246px;
    grid-template-columns: 791px 426px;
    gap: 29px;
    margin-top: 85px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-8,
  .row.mt-3:has(.card-tabs) > .col-lg-4 {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .card {
    border-color: #d1d1d1;
    border-radius: 0;
  }
  .campaign-side-note {
    margin-top: 109px;
    margin-bottom: 47px;
    padding: 25px 30px;
    border: 1px solid #d1d1d1;
    color: #111;
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 200;
  }
  .campaign-side-note h3 {
    margin: 0 0 18px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 200;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .card-img-top {
    width: 100%;
    height: auto !important;
    border-radius: 0;
    object-fit: contain;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .card-header {
    padding: 25px 30px 0;
    border: 0;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .card-title {
    font-size: 20px;
    line-height: 30px;
    font-weight: 200;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .card-body {
    padding: 11px 30px 32px;
    color: #111;
    font-family: "Geologica", sans-serif;
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 200;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .card-body .d-flex {
    font-size: 13px;
    line-height: 19.5px;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .card-body .fw-bold.fs-3,
  .row.mt-3:has(.card-tabs) > .col-lg-4 .card-body .d-flex > span:last-child {
    font-size: 20px !important;
    line-height: 30px;
    font-weight: 200 !important;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .card-body .text-muted {
    color: #111 !important;
    font-weight: 200;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .reward-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    padding: 8px 0;
    border-bottom: 1px solid #111;
    color: #111;
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 200;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .reward-meta-row > .reward-section-label {
    color: #111 !important;
    font-size: 11px;
    line-height: 16.5px;
    font-weight: 400;
    text-transform: uppercase;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .reward-meta-row > span:last-child {
    text-align: right;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .reward-meta-row:not(.reward-variation-row) > span:last-child {
    font-size: 20px;
    line-height: 30px;
    font-weight: 200;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .reward-variation-label {
    color: #111 !important;
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 200;
    text-transform: none;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .reward-variation-row {
    padding: 0;
    border-bottom: 0;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .reward-variation-value {
    text-align: right;
    text-transform: uppercase;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .reward-price-row .fw-bold.fs-3 {
    color: #111;
    font-size: 20px !important;
    line-height: 30px;
    font-weight: 200 !important;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 hr {
    display: none;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 h4 {
    margin: 18px 0 13px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid #111;
    font-size: 11px;
    line-height: 16.5px;
    font-weight: 400;
    text-transform: uppercase;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .reward-discount-list {
    display: grid;
    gap: 0;
    margin: 0;
    color: #111;
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 200;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .reward-discount-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: start;
    padding: 0;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .reward-discount-row > span:last-child {
    min-width: 92px;
    text-align: right;
    text-transform: uppercase;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .table {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 19.5px;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .table thead th {
    color: #111;
    background: transparent;
    font-size: 11px;
    line-height: 16.5px;
    font-weight: 400;
    text-transform: uppercase;
    border-bottom-color: #111;
  }
  .row.mt-3:has(.card-tabs) > .col-lg-4 .table > :not(caption) > * > * {
    padding: 8px 0;
    border-bottom-color: #111;
    text-transform: uppercase;
  }
  .markdown img,
  .tab-pane img.img-fluid {
    border: 1px solid var(--ribele-line);
    border-radius: 0 !important;
  }
  .reward-rich-text p:last-child,
  .reward-rich-text ul:last-child,
  .reward-rich-text ol:last-child {
    margin-bottom: 0;
  }
  .reward-rich-text ul,
  .reward-rich-text ol {
    padding-left: 1.25rem;
  }
  .reward-rich-text li + li {
    margin-top: .35rem;
  }
  .page-wrapper > .footer {
    display: none;
  }
  .feedback-card,
  .update-card {
    border-color: var(--ribele-line) !important;
  }
  @media (max-width: 991.98px) {
    .top-row {
      display: block;
    }
    .campaign-admin-actions {
      position: static;
      margin-top: 18px;
      flex-wrap: wrap;
    }
    .top-right {
      margin-top: 24px;
    }
    .campaign-creator-summary {
      flex-wrap: wrap;
    }
    .campaign-creator-summary .follow-btn {
      margin-left: 78px !important;
      margin-top: 0;
    }
  }
  @media (max-width: 575.98px) {
    .campaign-page-header-shell {
      width: 100%;
      margin-right: 0;
      margin-left: 0;
    }
    .campaign-page-footer-shell {
      width: 100%;
      margin: var(--figma-content-footer-gap) 0 0;
    }
    .campaign-phase-card .card-body {
      padding: 24px 22px;
    }
    .campaign-phase-headline {
      font-size: 30px;
    }
    .campaign-phase-stats {
      gap: 10px;
    }
    .campaign-creator-avatar {
      width: 52px;
      min-width: 52px;
      height: 52px;
    }
    .campaign-creator-bio {
      -webkit-line-clamp: 2;
      line-clamp: 2;
    }
    .campaign-creator-summary .follow-btn {
      margin-left: 66px !important;
    }
  }

  /* ===== Footer (Figma exacte, dins el llenç 1728) ===== */
  @media (min-width: 1024px) {
    .figma-canvas .figma-footer {
      width: var(--figma-full-bleed-width);
      margin-left: var(--figma-full-bleed-offset);
      background: #111;
    }
    .figma-canvas .figma-footer-inner {
      width: 1066px;
      margin: 0 0 0 calc(317px - var(--figma-full-bleed-offset));
      grid-template-columns: 243px 210px 215px 213px 184.52px;
      gap: 0;
      padding: 57px 0 0;
      min-height: 356.76px;
    }
    .figma-canvas .figma-footer-mark img { width: 154px; height: auto; filter: brightness(0) invert(1); }
    .figma-canvas .figma-footer-title {
      color: #868686;
      font-size: 16px;
      line-height: 24px;
      font-weight: 300;
      margin-bottom: 16px;
    }
    .figma-canvas .figma-footer a,
    .figma-canvas .figma-footer span {
      color: #fff;
      font-size: 15px;
      line-height: 22.5px;
      font-weight: 300;
    }
    .figma-canvas .figma-footer-social { gap: 21.65px; align-items: center; }
    .figma-canvas .figma-footer-social a { width: auto; height: 24px; opacity: 1; }
    .figma-canvas .figma-footer-social svg { width: 24px; height: 24px; }
    .figma-canvas .figma-footer-bottom { border-top: 1px solid #373737; }
    .figma-canvas .figma-footer-bottom-inner {
      width: auto;
      gap: 20px;
      min-height: 100px;
      padding: 0;
    }
    .figma-canvas .figma-footer-bottom-inner span {
      color: #868686;
      font-size: 16px;
      line-height: 24px;
      font-weight: 300;
    }
    .figma-canvas .figma-footer-bottom-inner a {
      color: #fff;
      font-size: 16px;
      line-height: 24px;
      font-weight: 300;
    }
  }

  /* ===== Feedback: enquestes (Figma exacte) ===== */
  .card .badge.bg-purple-lt {
    background: #edebfd !important;
    color: #513bfe !important;
    font-size: 10px;
    line-height: 14px;
    font-weight: 300;
    letter-spacing: .3px;
    text-transform: uppercase;
    border-radius: 5px;
    padding: 4px 10px;
  }
  /* ===== Feedback: element de la llista (Figma: sense caixes, separat per línies) ===== */
  #tab-feedback > .card-body { width: 745px; }
  .fb-item {
    position: relative;
    border-top: 1px solid #d1d1d1;
    padding: 40px 0 36px;
    margin: 0;
  }
  .fb-item:last-of-type { border-bottom: 1px solid #d1d1d1; }
  .fb-avatar {
    position: absolute;
    left: 10px;
    top: 45px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
  }
  .fb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .fb-poll-item .fb-avatar { top: 62px; }
  .fb-item-del { position: absolute; top: 40px; right: 0; }
  .fb-item-body { margin-left: 76.5px; }
  .fb-badge {
    display: inline-block;
    height: 22.5px;
    padding: 5px 7px;
    border-radius: 5px;
    background: #edebfd;
    color: #513bfe;
    font-size: 10px;
    line-height: 12.5px;
    font-weight: 300;
    text-transform: uppercase;
  }
  .fb-poll-item .fb-author-row { margin-top: 13px; }
  .fb-proposal .fb-author-row { margin-top: 19px; }
  .fb-author-row { display: flex; align-items: baseline; gap: 10px; }
  .fb-author { color: #111; font-size: 13px; line-height: 19.5px; font-weight: 400; }
  .fb-when { color: #868686; font-size: 13px; line-height: 19.5px; font-weight: 300; }
  .fb-question {
    margin-top: 11px;
    color: #111;
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 200;
  }
  /* Opcions de l'enquesta: radio fora + barra 532px amb farcit proporcional */
  .fb-poll-opts { margin-top: 26px; }
  .fb-poll-opt {
    display: flex;
    align-items: center;
    width: 561px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
  }
  .fb-poll-radio {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    margin-right: 9px;
    border: 1px solid #111;
    border-radius: 50%;
    background: #d9d9d9;
    display: inline-flex;
  }
  .fb-poll-radio svg { width: 14px; height: 14px; margin: -1px; display: block; }
  .fb-poll-opt.is-selected .fb-poll-radio { border: 0; background: transparent; }
  .fb-poll-bar {
    position: relative;
    flex: 1 1 auto;
    height: 40px;
    border: 1px solid #111;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #fff;
  }
  .fb-poll-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: #f1f1f1;
  }
  .fb-poll-label {
    position: relative;
    z-index: 1;
    padding-left: 13px;
    color: #111;
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 200;
  }
  .fb-poll-pct {
    position: relative;
    z-index: 1;
    margin-left: auto;
    padding-right: 12px;
    color: #111;
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 200;
  }
  .fb-poll-opt.is-selected .fb-poll-bar { border-color: #513bfe; }
  .fb-poll-opt.is-selected .fb-poll-fill { background: rgba(81, 59, 254, 0.1); }
  .fb-poll-opt.is-selected .fb-poll-label,
  .fb-poll-opt.is-selected .fb-poll-pct { color: #513bfe; }
  .fb-poll-vote { cursor: pointer; }
  .fb-poll-vote:hover .fb-poll-bar { border-color: #513bfe; }

  /* Botó "Nuevo feedback" (Figma: pill gris clar) */
  .fb-new-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    padding: 0 22px;
    border: 1px solid #111;
    border-radius: 100px;
    background: #f3f3f3;
    color: #111;
    font-family: "Geologica", sans-serif;
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
    white-space: nowrap;
  }
  #tab-updates .updates-request-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 221px;
    height: 45px;
    padding: 0;
    border: 0;
    border-radius: 100px;
    background: #f3f3f3;
    color: #111;
    font-family: "Geologica", sans-serif;
    font-size: 18px;
    line-height: 22.5px;
    font-weight: 400;
    letter-spacing: -0.18px;
    white-space: nowrap;
  }
  .fb-new-btn:hover,
  .fb-new-btn:focus { background: #e9e9e9; color: #111; border-color: #111; }
  #tab-updates .updates-request-btn:hover,
  #tab-updates .updates-request-btn:focus { background: #e9e9e9; color: #111; }
  #tab-feedback h3 {
    color: #111;
    font-size: 20px;
    line-height: 30px;
    font-weight: 300;
  }
  #tab-feedback h3 + .text-muted {
    color: #111 !important;
    font-size: 14px;
    line-height: 20px;
    font-weight: 200;
  }

  /* Gap CTA sota el bloc de mètriques (Figma 26px) */
  .campaign-phase-card form,
  .campaign-phase-card > .card-body > .campaign-phase-cta {
    margin-top: 26px;
  }
  .campaign-phase-card .campaign-stretch-goal + form,
  .campaign-phase-card .campaign-stretch-goal + .campaign-phase-cta {
    margin-top: 35.25px;
  }
  /* Subratllat negre de la pestanya activa (Figma) */
  .card-tabs > .nav-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #111;
    z-index: 3;
  }

  /* ===== Actualizaciones (Figma: entrades netes amb divisors #D1D1D1) ===== */
  #tab-updates .timeline {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #tab-updates > .card-body { width: 745px; }
  #tab-updates .updates-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -6px 0 50px;
  }
  #tab-updates .updates-stale {
    color: #111;
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 200;
  }
  #tab-updates .timeline-event {
    position: relative;
    display: block;
    margin: 0;
    padding: 45px 0 44px;
    border-top: 1px solid #d1d1d1;
  }
  #tab-updates .timeline-event:last-of-type { border-bottom: 1px solid #d1d1d1; }
  #tab-updates .timeline-event::before { display: none !important; }
  #tab-updates .timeline-event-icon { display: none !important; }
  #tab-updates .timeline-event-card {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0;
  }
  #tab-updates .timeline-event-card > .card-body { padding: 0; }
  .update-meta {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 300;
  }
  .update-author { color: #111; }
  .update-date { color: #868686; }
  #tab-updates .timeline-event-card h4 {
    margin: 20px 0 14px;
    color: #111;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    text-transform: none;
  }
  #tab-updates .timeline-event-card .card-body > .mt-2 {
    margin-top: 0 !important;
    color: #111;
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 200;
    max-width: 561px;
  }
  #tab-updates .border-purple {
    border: 1px solid #513bfe33 !important;
  }

  /* ===== Pestanya Creador (Figma 2486:36) ===== */
  #tab-creator .campaign-creator-tab {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 10px 0 0;
  }
  .campaign-creator-tab-avatar {
    flex: 0 0 182px;
    width: 182px;
    height: 182px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
  }
  .campaign-creator-tab-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .campaign-creator-tab-body { display: flex; flex-direction: column; min-width: 0; }
  .campaign-creator-tab-name {
    margin: 0;
    color: #111;
    font-size: 20px;
    line-height: 28px;
    font-weight: 200;
  }
  .campaign-creator-tab-meta {
    display: flex;
    gap: 30px;
    margin-top: 6px;
    color: #111;
    font-size: 12px;
    line-height: 18px;
    font-weight: 300;
  }
  .campaign-creator-tab-bio {
    margin: 27px 0 0;
    max-width: 502px;
    color: #111;
    font-size: 12px;
    line-height: 18px;
    font-weight: 200;
  }
  .campaign-creator-tab-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 40px;
  }
  .campaign-creator-tab-link {
    color: #111;
    font-size: 15px;
    line-height: 19px;
    font-weight: 400;
    letter-spacing: -0.1px;
    text-decoration: none;
  }
  .campaign-creator-tab-link:hover { text-decoration: underline; }
  .campaign-creator-tab-actions .follow-btn {
    min-width: 87px;
    height: 30px;
    padding: 0 20px;
    border: 1px solid #d1d1d1;
    border-radius: 100px;
    background: #fff;
    color: #111;
    font-size: 14px;
    font-weight: 300;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .campaign-creator-tab-actions .follow-btn.btn-dark { background: #111; color: #fff; border-color: #111; }

  /* ===== Pestanya Preguntas (Figma: acordió arrodonit + toggle +/-) ===== */
  #tab-questions .card-body { padding-top: 40px; }
  #tab-questions .accordion {
    display: flex;
    flex-direction: column;
    gap: 17.5px;
    max-width: 734px;
  }
  #tab-questions .accordion-item {
    border: 0 !important;
    border-radius: 10px !important;
    background: #f6f5fe;
    overflow: hidden;
  }
  #tab-questions .accordion-header { margin: 0; }
  #tab-questions .accordion-button {
    width: 100%;
    min-height: 56.5px;
    padding: 16px 20px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #111 !important;
    font-family: "Geologica", sans-serif;
    font-size: 17px;
    line-height: 21px;
    font-weight: 400;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
  }
  #tab-questions .accordion-button::after {
    content: "+";
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin: 0;
    background: none !important;
    color: #111;
    font-size: 24px;
    line-height: 1;
    font-weight: 400;
    transform: none !important;
  }
  #tab-questions .accordion-button:not(.collapsed)::after { content: "\2212"; }
  #tab-questions .accordion-body {
    padding: 2px 20px 21px;
    max-width: 676px;
    color: #111 !important;
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 200;
  }

  /* Enquesta dins Actualizaciones (sense caixa; opcions directes com feedback) */
  #tab-updates .update-poll { margin-top: 20px; }
  #tab-updates .update-poll-q {
    margin-bottom: 12px;
    color: #111;
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
  }

  /* ===== Actualizaciones: avatar autor + columna, formulari i comentaris (Figma) ===== */
  #tab-updates .timeline-event-card .card-body {
    position: relative;
    padding: 0 0 0 76.5px;
  }
  .update-avatar {
    position: absolute;
    left: 10px;
    top: 2px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
  }
  .update-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .update-meta > .update-author { font-weight: 300; }
  #tab-updates .update-comments {
    margin-top: 20px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  /* "N comentarios" */
  #tab-updates small.fw-bold.text-muted {
    display: block;
    margin-top: 0;
    color: #868686 !important;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400 !important;
  }

  /* Comentaris */
  .update-comment-item { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; }
  .update-comment-item-avatar { flex: 0 0 50px; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; display: block; }
  .update-comment-item-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .update-comment-item-meta { font-size: 13px; line-height: 20px; }
  .update-comment-item-name { color: #111; font-weight: 500; }
  .update-comment-item-date { color: #868686; }
  .update-comment-item-text { color: #111; font-size: 13px; line-height: 20px; font-weight: 200; margin-top: 3px; }

  /* Formulari de comentari (avatar + subratllat + Cancelar/Comentar) */
  .update-comment-form { display: flex; align-items: flex-start; gap: 12px; margin-top: 26px; }
  .update-comment-avatar { flex: 0 0 50px; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; display: block; }
  .update-comment-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .update-comment-field { flex: 1 1 auto; }
  .update-comment-input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #111;
    background: transparent;
    padding: 10px 0;
    font-size: 14px;
    color: #111;
  }
  .update-comment-input::placeholder { color: #868686; }
  .update-comment-input:focus { outline: 0; border-bottom-color: #513bfe; }
  .update-comment-actions { display: flex; justify-content: flex-end; align-items: center; gap: 22px; margin-top: 14px; }
  .update-comment-cancel { border: 0; background: transparent; color: #111; font-size: 15px; font-weight: 400; cursor: pointer; padding: 0; }
  .update-comment-send {
    border: 1px solid #d1d1d1;
    border-radius: 100px;
    background: #fff;
    color: #111;
    font-size: 15px;
    font-weight: 400;
    padding: 8px 28px;
    cursor: pointer;
  }
  .update-comment-send:hover { border-color: #111; }

  /* ===== Feedback: capçalera ===== */
  #tab-feedback .feedback-head { margin-top: -6px; margin-bottom: 50px; }
  #tab-feedback .fb-new-btn { min-width: 200px; }
  #tab-feedback .feedback-subtitle {
    color: #111;
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 200;
  }
  /* Botons Cancelar/Comentar a mida Figma (114×35) dins de feedback i actualitzacions */
  #tab-feedback .update-comment-cancel,
  #tab-feedback .update-comment-send,
  #tab-updates .update-comment-cancel,
  #tab-updates .update-comment-send {
    width: 114px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    letter-spacing: -0.15px;
    line-height: 18.75px;
  }
  .fb-comment-del {
    display: inline;
    margin-left: 8px;
  }
  .fb-comment-del button {
    border: 0;
    background: transparent;
    color: #868686;
    padding: 0;
    cursor: pointer;
    vertical-align: middle;
  }
  .fb-comment-del button:hover,
  .fb-comment-del button:focus {
    color: #513bfe;
  }

  /* Botó "Nuevo feedback": sense vora (Figma) */
  .fb-new-btn { border: 0 !important; background: #f3f3f3; }
  .fb-new-btn:hover, .fb-new-btn:focus { background: #e9e9e9; }

  /* Comptador de l'enquesta */
  .fb-poll-count {
    margin-top: 26px;
    color: #868686;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
  }

  /* ===== Feedback: propuesta (avatar+autor, títol, cos, fila VOTA amb polzes) ===== */
  .fb-proposal-title {
    margin: 20px 0 14px;
    color: #111;
    font-size: 20px;
    line-height: 30px;
    font-weight: 300;
  }
  .fb-proposal-body {
    color: #111;
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 200;
    margin: 0;
    max-width: 561px;
  }
  .fb-vota {
    display: flex;
    align-items: flex-start;
    margin-top: 15px;
  }
  .fb-vota-label { padding-top: 9px; color: #111; font-size: 12px; line-height: 18px; font-weight: 400; }
  .fb-vota-item { display: flex; flex-direction: column; align-items: center; gap: 5px; }
  .fb-vota-label + .fb-vota-item { margin-left: 11px; }
  .fb-vota-item + .fb-vota-item { margin-left: 7px; }
  .fb-vota-item + .fb-vota-total { margin-left: 14px; }
  .fb-vota-total + .fb-vota-total { margin-left: 15px; }
  .fb-vota-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid #111;
    background: #fff;
    color: #111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }
  .fb-vota-btn.fb-vota-down { border-color: #d1d1d1; }
  .fb-vota-btn svg { width: 15px; height: 15px; fill: currentColor; }
  .fb-vota-down svg { transform: rotate(180deg); }
  .fb-vota-btn.is-active { border-color: #513bfe; color: #513bfe; }
  .fb-vota-count { color: #111; font-size: 12px; line-height: 18px; font-weight: 400; }
  .fb-vota-total { padding-top: 6px; color: #111; font-size: 12px; line-height: 18px; font-weight: 400; }

  /* Comentaris dins de feedback i actualitzacions: mides Figma (avatar 40, nom 12, text 13/200) */
  #tab-feedback .update-comment-form,
  #tab-updates .update-comment-form { gap: 15px; margin-top: 39px; }
  #tab-feedback .update-comment-avatar,
  #tab-feedback .update-comment-item-avatar,
  #tab-updates .update-comment-avatar,
  #tab-updates .update-comment-item-avatar { flex: 0 0 40px; width: 40px; height: 40px; }
  #tab-feedback .update-comment-field,
  #tab-updates .update-comment-field { max-width: 508px; }
  #tab-feedback .update-comment-input,
  #tab-updates .update-comment-input { font-size: 12px; line-height: 18px; font-weight: 200; }
  #tab-feedback .update-comment-actions,
  #tab-updates .update-comment-actions { gap: 14px; margin-top: 19px; }
  #tab-feedback .update-comment-item,
  #tab-updates .update-comment-item { gap: 15px; margin-top: 23px; }
  #tab-feedback .update-comment-form + .update-comment-item,
  #tab-updates .update-comment-form + .update-comment-item { margin-top: 16px; }
  #tab-feedback .update-comment-item-meta,
  #tab-updates .update-comment-item-meta { font-size: 12px; line-height: 18px; }
  #tab-feedback .update-comment-item-name { font-weight: 400; }
  #tab-updates .update-comment-item-name { font-weight: 300; }
  #tab-feedback .update-comment-item-date,
  #tab-updates .update-comment-item-date { color: #111; }
  #tab-feedback .update-comment-item-text,
  #tab-updates .update-comment-item-text { font-size: 13px; line-height: 19.5px; margin-top: 2px; max-width: 508px; }
  #tab-updates .update-comment-form { margin-top: 45px; }
  .fb-comments-more[hidden] { display: none; }
  .fb-more-comments {
    display: block;
    margin-top: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #111;
    font-size: 15px;
    line-height: 18.75px;
    letter-spacing: -0.15px;
    font-weight: 400;
    cursor: pointer;
  }
  .fb-empty {
    margin-top: 30px;
    color: #111;
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 200;
  }

  /* Responsive campaign and voting flow. Keep desktop Figma geometry above 1024px. */
  @media (max-width: 1023px) {
    .figma-canvas {
      width: 100%;
      zoom: 1;
    }

    .campaign-page-header-shell {
      width: 100%;
    }

    .page-header {
      width: calc(100% - 32px);
      max-width: none;
      margin: 36px 16px 24px !important;
      transform: none;
    }

    .page-header .row {
      display: block;
    }

    .page-title {
      font-size: clamp(30px, 9vw, 42px);
      line-height: 1.08;
    }

    .campaign-page-subtitle {
      max-width: none;
      font-size: 16px;
      line-height: 23px;
    }

    .campaign-admin-actions {
      position: static;
      margin-top: 20px;
      gap: 22px !important;
    }

    .top-row,
    .row.mt-3:has(.card-tabs) {
      width: calc(100% - 32px);
      margin-right: 16px !important;
      margin-left: 16px !important;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 28px;
    }

    .top-row > .col-lg-8,
    .top-row > .col-lg-4,
    .row.mt-3:has(.card-tabs) > .col-lg-8,
    .row.mt-3:has(.card-tabs) > .col-lg-4 {
      width: 100%;
      min-width: 0;
    }

    .top-row > .col-lg-8 > .card > .card-body {
      padding-top: 24px;
    }

    .campaign-gallery-dots {
      position: static;
      justify-content: center;
      width: 100%;
      min-height: 34px;
      padding: 12px 0;
      background: #fff;
    }

    .campaign-creator-summary {
      width: 100%;
      flex-wrap: nowrap;
    }

    .campaign-creator-bio {
      max-width: none;
      font-size: 15px;
      line-height: 22px;
    }

    .campaign-creator-summary .follow-btn {
      margin-left: 0 !important;
    }

    .top-right {
      margin-top: 0;
    }

    .campaign-phase-metrics {
      width: 100%;
      min-height: auto;
      padding: 24px 20px;
    }

    .campaign-phase-headline,
    .campaign-phase-unit {
      font-size: 36px;
      line-height: 44px;
    }

    .campaign-phase-goal {
      padding-bottom: 5px;
      font-size: 10px;
    }

    .campaign-phase-stats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .campaign-stretch-goal {
      width: 100%;
    }

    .campaign-stretch-progress {
      right: 24px;
      left: 24px;
      width: auto;
    }

    .campaign-phase-context,
    .campaign-phase-context strong {
      font-size: 15px;
      line-height: 22px;
    }

    .campaign-phase-social-line {
      justify-content: space-between;
      gap: 16px;
    }

    .campaign-share-row {
      width: auto;
      margin-right: 0;
      gap: 12px;
    }

    .row.mt-3:has(.card-tabs) {
      margin-top: 56px !important;
    }

    .card-tabs > .nav-tabs {
      height: auto;
      min-height: 44px;
      display: flex;
      gap: 24px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .card-tabs > .nav-tabs::-webkit-scrollbar {
      display: none;
    }

    .card-tabs > .nav-tabs::before {
      left: 0;
      width: 100%;
    }

    .card-tabs > .nav-tabs .nav-item {
      position: static;
    }

    .card-tabs > .nav-tabs .nav-link,
    .card-tabs > .nav-tabs .nav-item:nth-child(n) .nav-link {
      width: auto;
      padding: 0 0 14px;
      font-size: 15px;
    }

    .card-tabs > .tab-content > .card > .card-body {
      padding: 34px 0 0;
    }

    #tab-about .markdown,
    #tab-feedback > .card-body,
    #tab-updates > .card-body,
    .markdown blockquote,
    .fb-poll-opt {
      width: 100%;
      max-width: 100%;
    }

    .markdown,
    .markdown p,
    .markdown li {
      font-size: 16px;
      line-height: 25px;
    }

    .markdown blockquote {
      margin: 32px 0;
      padding: 28px 24px;
    }

    #tab-creator .campaign-creator-tab {
      gap: 20px;
    }

    .campaign-creator-tab-avatar {
      flex-basis: 88px;
      width: 88px;
      height: 88px;
    }

    .campaign-creator-tab-bio,
    .campaign-creator-tab-meta {
      font-size: 14px;
      line-height: 21px;
    }

    .campaign-creator-tab-actions {
      margin-top: 24px;
      align-items: flex-start;
      flex-direction: column;
    }

    #tab-feedback .feedback-head,
    #tab-updates .updates-head {
      align-items: flex-start !important;
      flex-direction: column;
      gap: 18px;
    }

    #tab-feedback .fb-new-btn,
    #tab-updates .updates-request-btn {
      min-width: 0;
      width: 100%;
    }

    .fb-item-body {
      margin-left: 0;
      padding-top: 66px;
    }

    .fb-avatar {
      left: 0;
      top: 40px;
    }

    .fb-poll-item .fb-avatar {
      top: 40px;
    }

    .fb-item-del {
      top: 44px;
    }

    .fb-proposal-body,
    #tab-updates .timeline-event-card .card-body > .mt-2,
    #tab-feedback .update-comment-field,
    #tab-updates .update-comment-field,
    #tab-feedback .update-comment-item-text,
    #tab-updates .update-comment-item-text {
      max-width: 100%;
    }

    .fb-vota {
      flex-wrap: wrap;
      row-gap: 12px;
    }

    .fb-vota-total {
      font-size: 13px;
    }

    #tab-updates .timeline-event-card .card-body {
      padding-left: 0;
      padding-top: 66px;
    }

    .update-avatar {
      left: 0;
      top: 0;
    }

    .update-comment-form {
      min-width: 0;
    }

    .update-comment-actions {
      flex-wrap: wrap;
    }

    .row.mt-3:has(.card-tabs) > .col-lg-4 {
      margin-top: 12px;
    }

    .campaign-side-note {
      margin-top: 0;
    }
  }

  @media (max-width: 420px) {
    .campaign-phase-headline {
      flex-wrap: wrap;
      gap: 4px 8px;
    }

    .campaign-phase-goal {
      width: 100%;
      margin-left: 0;
    }

    .campaign-phase-stat-value {
      font-size: 28px;
    }

    .campaign-phase-like-pill {
      width: 124px;
      flex-basis: 124px;
    }

  }