@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;700&display=swap');

@font-face {
  font-family: 'SandraSans';
  src: url('fonts/Sandrasans-Regular.woff2') format('woff2'),
       url('fonts/Sandrasans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.font-quasi {
  font-family: 'SandraSans', 'Bricolage Grotesque', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 400;
  background: #fff;
  color: #3c3c3c;
}

body.dark {
  background: #3c3c3c;
  color: #f2f2f2;
}

/* ── NAV ── */

.quasi-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(to bottom, #f2f2f2, rgba(242, 242, 242, 0));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 100;
}

body.dark .quasi-nav {
  background: linear-gradient(to bottom, #3c3c3c, rgba(60, 60, 60, 0));
}

.nav-left { display: flex; align-items: center; gap: 12px; flex: 1; }
.nav-center { display: flex; align-items: center; gap: 20px; flex: 1; justify-content: center; }
.nav-right { display: flex; align-items: center; gap: 16px; flex: 1; justify-content: flex-end; }

.logo-img { height: 20px; width: auto; }

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: gap 0.2s ease;
  text-decoration: none;
}

.icon-btn::before {
  content: '(';
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  color: #c1c0bf;
  transition: transform 0.2s ease, color 0.15s;
}

.icon-btn::after {
  content: ')';
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  color: #c1c0bf;
  transition: transform 0.2s ease, color 0.15s;
}

.icon-btn:hover { gap: 7px; }
.icon-btn:hover::before { color: #939393; transform: translateX(-3px); }
.icon-btn:hover::after { color: #939393; transform: translateX(3px); }

body.dark .icon-btn::before,
body.dark .icon-btn::after { color: #636261; }

body.dark .icon-btn:hover::before,
body.dark .icon-btn:hover::after { color: #c1c0bf; }

.icon-btn img { width: 20px; height: 20px; }

.search-bar {
  display: none;
  align-items: center;
  background: #f2f2f2;
  border: 0.5px solid #c1c0bf;
  border-radius: 8px;
  padding: 4px 12px;
  width: 200px;
}

.search-bar.visible { display: flex; }

body.dark .search-bar { background: #505050; border-color: #636261; }

.search-bar input {
  border: none;
  background: none;
  outline: none;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px;
  color: #3c3c3c;
  width: 100%;
}

body.dark .search-bar input { color: #f2f2f2; }
.search-bar input::placeholder { color: #939393; }

.mode-switcher { display: flex; align-items: center; gap: 4px; }

.mode-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  color: #c1c0bf;
  padding: 4px 8px;
  border-radius: 8px;
  transition: color 0.15s;
}

.mode-btn.active { color: #3c3c3c; }
body.dark .mode-btn.active { color: #f2f2f2; }
.mode-btn:hover:not(.active) { color: #939393; }

.mode-divider { font-size: 17px; color: #e5e5e5; }
body.dark .mode-divider { color: #636261; }

.login-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  color: #939393;
  padding: 4px 0;
  transition: color 0.15s;
  text-decoration: none;
}

.login-btn:hover { color: #3c3c3c; }
body.dark .login-btn:hover { color: #f2f2f2; }

/* ── NAV AVATAR ── */

.nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.2s;
}

.nav-avatar:hover { opacity: 0.8; }

.nav-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #c1c0bf;
  cursor: pointer;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #3c3c3c;
  text-decoration: none;
  font-weight: 700;
}

.nav-avatar-placeholder:hover { opacity: 0.8; }
body.dark .nav-avatar-placeholder { background: #636261; color: #f2f2f2; }

/* ── TAULER ── */

.tauler {
  display: flex;
  gap: 32px;
  padding: 84px 32px 32px;
  align-items: flex-start;
}

.columna {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.columna img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.columna a { display: block; }
.columna a img { transition: opacity 0.2s; }
.columna a:hover img { opacity: 0.85; }

/* ── GALERIA ── */

.galeria-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  cursor: grab;
}

.galeria-canvas.dragging { cursor: grabbing; }

.galeria-board {
  position: absolute;
  display: flex;
  gap: 32px;
  padding: 100px 60px 60px;
  user-select: none;
  align-items: flex-start;
}

.galeria-board .columna {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 280px;
  flex-shrink: 0;
}

.galeria-board .columna img {
  width: 280px;
  height: auto;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

/* ── AUTH ── */

.auth-page {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 360px;
  padding: 0 24px;
}

.auth-logo { height: 24px; width: auto; }

.auth-titol {
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: #939393;
  text-align: center;
}

.auth-camps { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.auth-camp { display: flex; flex-direction: column; gap: 6px; }

.auth-camp label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #939393;
}

.auth-camp input[type="text"],
.auth-camp input[type="password"],
.auth-camp input[type="email"] {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid #c1c0bf;
  padding: 10px 0;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  color: #3c3c3c;
  outline: none;
  transition: border-color 0.2s;
}

.auth-camp input[type="text"]:focus,
.auth-camp input[type="password"]:focus,
.auth-camp input[type="email"]:focus { border-bottom-color: #3c3c3c; }

body.dark .auth-camp input[type="text"],
body.dark .auth-camp input[type="password"],
body.dark .auth-camp input[type="email"] { color: #f2f2f2; border-bottom-color: #636261; }

body.dark .auth-camp input[type="text"]:focus,
body.dark .auth-camp input[type="password"]:focus,
body.dark .auth-camp input[type="email"]:focus { border-bottom-color: #f2f2f2; }

.auth-camp input[type="file"] {
  width: 100%;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  color: #939393;
  cursor: pointer;
  padding: 10px 0;
  border: none;
  border-bottom: 1.5px solid #c1c0bf;
  background: transparent;
  outline: none;
}

.auth-camp input[type="file"]::file-selector-button { display: none; }

.auth-submit {
  width: 100%;
  padding: 14px;
  background: #3c3c3c;
  color: #f2f2f2;
  border: none;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  cursor: pointer;
  transition: background 0.2s;
}

.auth-submit:hover { background: #636261; }
body.dark .auth-submit { background: #f2f2f2; color: #3c3c3c; }
body.dark .auth-submit:hover { background: #c1c0bf; }

.auth-link {
  font-size: 12px;
  color: #939393;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  transition: color 0.2s;
}

.auth-link:hover { color: #3c3c3c; }
body.dark .auth-link:hover { color: #f2f2f2; }

/* ── CREAR POST ── */

.crear-page {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 32px 40px;
  gap: 24px;
  background: #c1c0bf;
}

body.dark .crear-page { background: #3c3c3c; }

.crear-bloc {
  background: #f2f2f2;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

body.dark .crear-bloc { background: #505050; }

.crear-bloc-esquerra { width: 480px; flex-shrink: 0; }
.crear-bloc-dreta { width: 360px; flex-shrink: 0; }

.crear-seccio-titol {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #939393;
}

.crear-upload-principal {
  width: 100%;
  aspect-ratio: 4/3;
  border: 1.5px dashed #c1c0bf;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
}

.crear-upload-principal:hover { border-color: #939393; }
body.dark .crear-upload-principal { border-color: #636261; }

.crear-upload-principal input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.crear-upload-text {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: #939393;
  text-align: center;
  pointer-events: none;
}

.crear-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.crear-camp { display: flex; flex-direction: column; gap: 6px; }

.crear-camp label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #939393;
}

.crear-camp input[type="text"],
.crear-camp textarea,
.crear-camp select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid #c1c0bf;
  padding: 10px 0;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  color: #3c3c3c;
  outline: none;
  transition: border-color 0.2s;
  resize: none;
}

.crear-camp textarea { min-height: 80px; }

.crear-camp input[type="text"]:focus,
.crear-camp textarea:focus,
.crear-camp select:focus { border-bottom-color: #3c3c3c; }

body.dark .crear-camp input[type="text"],
body.dark .crear-camp textarea,
body.dark .crear-camp select { color: #f2f2f2; border-bottom-color: #636261; }

body.dark .crear-camp input[type="text"]:focus,
body.dark .crear-camp textarea:focus,
body.dark .crear-camp select:focus { border-bottom-color: #f2f2f2; }

.crear-camp select option { background: #f2f2f2; color: #3c3c3c; }

.etiquetes-input-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1.5px solid #c1c0bf;
}

body.dark .etiquetes-input-fila { border-bottom-color: #636261; }

.etiquetes-input-fila input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 10px 0;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  color: #3c3c3c;
  outline: none;
}

body.dark .etiquetes-input-fila input { color: #f2f2f2; }

.etiquetes-add-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: #939393;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.etiquetes-add-btn:hover { color: #3c3c3c; }
body.dark .etiquetes-add-btn:hover { color: #f2f2f2; }

.etiquetes-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.etiqueta-tag {
  font-size: 12px;
  color: #636261;
  background: #e5e5e5;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.02em;
}

body.dark .etiqueta-tag { background: #636261; color: #f2f2f2; }

.etiqueta-remove {
  cursor: pointer;
  font-size: 14px;
  color: #939393;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.etiqueta-remove:hover { color: #3c3c3c; }

.crear-checks { display: flex; flex-direction: column; gap: 12px; }
.crear-check { display: flex; align-items: center; gap: 12px; cursor: pointer; }

.crear-check input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #c1c0bf;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.2s;
}

.crear-check input[type="checkbox"]:checked { border-color: #3c3c3c; background: #3c3c3c; }

.crear-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 6px; height: 10px;
  border: 2px solid #f2f2f2;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}

body.dark .crear-check input[type="checkbox"]:checked { border-color: #f2f2f2; background: #f2f2f2; }
body.dark .crear-check input[type="checkbox"]:checked::after { border-color: #3c3c3c; }

.crear-check span { font-size: 13px; color: #3c3c3c; letter-spacing: -0.02em; }
body.dark .crear-check span { color: #f2f2f2; }

.crear-submit {
  width: 100%;
  padding: 14px;
  background: #3c3c3c;
  color: #f2f2f2;
  border: none;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  cursor: pointer;
  transition: background 0.2s;
}

.crear-submit:hover { background: #636261; }
body.dark .crear-submit { background: #f2f2f2; color: #3c3c3c; }
body.dark .crear-submit:hover { background: #c1c0bf; }

/* ── IMATGE.PHP ── */

.pag-imatge .quasi-nav {
  background: none !important;
}

.imatge-layout {
  display: flex;
  height: 100vh;
  padding-top: 60px;
}

.imatge-esquerra {
  width: 40%;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  overflow-y: auto;
  scrollbar-width: none;
  background: #e5e5e5;
}

body.dark .imatge-esquerra { background: #505050; }
.imatge-esquerra::-webkit-scrollbar { display: none; }

.imatge-capçalera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px 16px;
}

.imatge-back a {
  display: flex;
  align-items: center;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.imatge-back a:hover { opacity: 1; }

.imatge-back img { width: 24px; height: 24px; }

.imatge-usuari { display: flex; align-items: center; gap: 8px; }

.usuari-foto {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #c1c0bf;
  object-fit: cover;
  flex-shrink: 0;
}

.usuari-nom {
  font-size: 14px;
  color: #3c3c3c;
  letter-spacing: -0.02em;
}

body.dark .usuari-nom { color: #f2f2f2; }

.imatge-preview { 
  width: 90%; 
  margin: 0 auto; 
  display: block;
}

.imatge-principal { width: 100%; height: auto; display: block; }

.imatge-info {
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-fila1 {
  display: flex;
  align-items: center;
  gap: 16px;
}

.info-icona-categoria {
  width: 48px;
  height: 48px;
  background: #c1c0bf;
  flex-shrink: 0;
}

body.dark .info-icona-categoria { background: #636261; }

.info-esquerra {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.info-titol {
  font-size: 20px;
  font-weight: 700;
  color: #3c3c3c;
  letter-spacing: -0.04em;
  line-height: 1.2;
}

body.dark .info-titol { color: #f2f2f2; }

.info-meta-fila {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.info-categoria {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #939393;
  border-bottom: 1px solid #939393;
  padding-bottom: 1px;
  text-decoration: none;
  transition: color 0.2s;
}

.info-categoria:hover { color: #3c3c3c; }
body.dark .info-categoria:hover { color: #f2f2f2; }

.info-etiqueta {
  font-size: 12px;
  color: #939393;
  letter-spacing: -0.02em;
  text-decoration: none;
  border-bottom: 1px solid #c1c0bf;
  padding-bottom: 1px;
  transition: color 0.2s;
}

.info-etiqueta:hover { color: #3c3c3c; }
body.dark .info-etiqueta:hover { color: #f2f2f2; }

.info-accions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

.accio-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.accio-btn:hover { opacity: 1; }
.accio-btn img { width: 20px; height: 20px; }

.info-descripcio {
  font-size: 14px;
  color: #636261;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

body.dark .info-descripcio { color: #c1c0bf; }

.imatge-dreta {
  width: 60%;
  height: calc(100vh - 60px);
  overflow-y: auto;
  scrollbar-width: none;
}

.imatge-dreta::-webkit-scrollbar { display: none; }

.relacionades-titol {
  padding: 24px 32px 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #939393;
}

.imatge-relacionades {
  display: flex;
  gap: 16px;
  padding: 16px 32px 32px;
  align-items: flex-start;
}

.imatge-relacionades .columna {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.imatge-relacionades .columna a {
  display: block;
  transition: opacity 0.2s;
}

.imatge-relacionades .columna a:hover { opacity: 0.85; }

.imatge-relacionades .columna img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}


/* ── PERFIL ── */

.perfil-page {
  min-height: 100vh;
  padding: 80px 32px 40px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: #e5e5e5;
}

body.dark .perfil-page { background: #3c3c3c; }

/* Bloc esquerra */
.perfil-esquerra {
  width: 280px;
  flex-shrink: 0;
  background: #f2f2f2;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.dark .perfil-esquerra { background: #505050; }

.perfil-avatar {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}

.perfil-avatar-placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  background: #c1c0bf;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 700;
  color: #f2f2f2;
  letter-spacing: -0.04em;
}

body.dark .perfil-avatar-placeholder { background: #636261; }

.perfil-nom {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #3c3c3c;
  text-transform: uppercase;
}

body.dark .perfil-nom { color: #f2f2f2; }

.perfil-username {
  font-size: 14px;
  color: #939393;
  letter-spacing: -0.02em;
}

.perfil-stats {
  display: flex;
  gap: 16px;
}

.perfil-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.perfil-stat-num {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #3c3c3c;
}

body.dark .perfil-stat-num { color: #f2f2f2; }

.perfil-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #939393;
}

.perfil-desc {
  font-size: 13px;
  color: #636261;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

body.dark .perfil-desc { color: #c1c0bf; }

.perfil-botons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.perfil-btn {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1.5px solid #c1c0bf;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: #3c3c3c;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: background 0.2s, color 0.2s;
}

.perfil-btn:hover { background: #3c3c3c; color: #f2f2f2; border-color: #3c3c3c; }

body.dark .perfil-btn { color: #f2f2f2; border-color: #636261; }
body.dark .perfil-btn:hover { background: #f2f2f2; color: #3c3c3c; }

/* Bloc dreta */
.perfil-dreta {
  flex: 1;
  background: #f2f2f2;
  display: flex;
  flex-direction: column;
  min-height: 600px;
}

body.dark .perfil-dreta { background: #505050; }

/* Menú intern */
.perfil-menu {
  top: 60px;
  background: linear-gradient(to bottom, #f2f2f2, rgba(242,242,242,0));
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 20px 32px 40px;
  z-index: 10;
}

body.dark .perfil-menu {
  background: linear-gradient(to bottom, #505050, rgba(80,80,80,0));
}

.perfil-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #c1c0bf;
  padding: 4px 8px;
  transition: color 0.15s;
}

.perfil-menu-btn.active { color: #3c3c3c; }
body.dark .perfil-menu-btn.active { color: #f2f2f2; }
.perfil-menu-btn:hover:not(.active) { color: #939393; }

.perfil-menu-divider {
  font-size: 15px;
  color: #e5e5e5;
  font-weight: 400;
}

body.dark .perfil-menu-divider { color: #636261; }

/* Contingut de cada secció */
.perfil-seccio {
  display: none;
  padding: 0 32px 32px;
}

.perfil-seccio.activa { display: block; }

.perfil-grid {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.perfil-grid .columna {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.perfil-grid .columna a { display: block; transition: opacity 0.2s; }
.perfil-grid .columna a:hover { opacity: 0.85; }
.perfil-grid .columna img { width: 100%; height: auto; display: block; }

.perfil-buit {
  font-size: 13px;
  color: #c1c0bf;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  padding: 40px 0;
  text-align: center;
}

/* Perfil esquerra nous estils */
.perfil-capçalera {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.perfil-avatar {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
}

.perfil-avatar-placeholder {
  width: 100%;
  aspect-ratio: 1/1;
  background: #c1c0bf;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 700;
  color: #f2f2f2;
  letter-spacing: -0.04em;
}

body.dark .perfil-avatar-placeholder { background: #636261; }

.perfil-buit-petit {
  font-size: 12px;
  color: #c1c0bf;
  font-style: italic;
}

.perfil-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.perfil-link {
  font-size: 12px;
  color: #939393;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.2s;
  word-break: break-all;
}

.perfil-link:hover { color: #3c3c3c; }
body.dark .perfil-link:hover { color: #f2f2f2; }

.perfil-especialitat {
  display: flex;
  align-items: center;
  gap: 8px;
}

.perfil-especialitat-icon {
  width: 32px;
  height: 32px;
}

.perfil-especialitat span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #939393;
}

/* ── CERCADOR DROPDOWN ── */

.cerca-dropdown {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  background: linear-gradient(to bottom, #f2f2f2 75%, rgba(242,242,242,0));
  padding: 20px 24px 48px;
  display: none;
  flex-direction: column;
  gap: 20px;
  z-index: 99;
}

body.dark .cerca-dropdown {
  background: linear-gradient(to bottom, #3c3c3c 75%, rgba(60,60,60,0));
}

.cerca-dropdown.visible { display: flex; }

.cerca-input-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1.5px solid #c1c0bf;
  padding-bottom: 10px;
}

body.dark .cerca-input-fila { border-bottom-color: #636261; }

.cerca-input-fila input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  color: #3c3c3c;
  letter-spacing: -0.02em;
}

body.dark .cerca-input-fila input { color: #f2f2f2; }
.cerca-input-fila input::placeholder { color: #c1c0bf; }

.cerca-seccio-titol {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #939393;
  margin-bottom: 8px;
}

.cerca-recents { display: flex; flex-direction: column; gap: 6px; }

.cerca-recent-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #636261;
  font-size: 13px;
  letter-spacing: -0.02em;
  transition: color 0.15s;
  background: none;
  border: none;
  padding: 0;
  font-family: 'Bricolage Grotesque', sans-serif;
  text-align: left;
}

.cerca-recent-item:hover { color: #3c3c3c; }
body.dark .cerca-recent-item { color: #939393; }
body.dark .cerca-recent-item:hover { color: #f2f2f2; }

.cerca-categories { display: flex; flex-wrap: wrap; gap: 6px; }

.cerca-categoria-btn {
  font-size: 11px;
  padding: 4px 12px;
  border: 1px solid #c1c0bf;
  background: transparent;
  color: #939393;
  font-family: 'Bricolage Grotesque', sans-serif;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-transform: uppercase;
}

.cerca-categoria-btn:hover { background: #3c3c3c; color: #f2f2f2; border-color: #3c3c3c; }
body.dark .cerca-categoria-btn { border-color: #636261; }
body.dark .cerca-categoria-btn:hover { background: #f2f2f2; color: #3c3c3c; }

/* ── GALERIA INTERACTIVA ── */

.galeria-board {
  display: flex;
  gap: 32px;
  padding: 100px 60px 60px;
  align-items: flex-start;
}

.galeria-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 220px;
  flex-shrink: 0;
}

.g-post-wrap {
  width: 100%;
  cursor: pointer;
  transition: width 0.35s ease;
}

/* Imatge activa: ocupa dues columnes (220px + 16px gap + 220px) */
.g-post-wrap.actiu {
  width: 456px;
}

.g-post-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  pointer-events: none;
  transition: opacity 0.2s;
}

.g-post-wrap:hover .g-post-img { opacity: 0.88; }
.g-post-wrap.actiu .g-post-img { opacity: 1; }

/* Info oculta per defecte */
.g-post-info {
  display: none;
  padding: 10px 0 4px;
}

.g-post-wrap.actiu .g-post-info { display: block; }

.g-post-fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.g-post-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.g-post-titol {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #3c3c3c;
}

body.dark .g-post-titol { color: #f2f2f2; }

.g-post-autor {
  font-size: 12px;
  color: #939393;
  letter-spacing: -0.02em;
}

.g-post-dreta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.g-post-obrir {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #3c3c3c;
  text-decoration: none;
  border-bottom: 1px solid #c1c0bf;
  padding-bottom: 1px;
  transition: color 0.2s;
}

.g-post-obrir:hover { color: #636261; }
body.dark .g-post-obrir { color: #f2f2f2; }

.g-post-accions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.g-post-accions .accio-btn img {
  width: 16px;
  height: 16px;
}