/* ═══════════════════════════════════════════════════
   Clínica Llevant — Static CSS (replaces Tailwind CDN)
   ═══════════════════════════════════════════════════ */

/* ─── Fonts ─────────────────────────────────────── */
@font-face {
  font-family: 'Moneta';
  src: url('../fonts/MonetaSans-Black.otf') format('opentype');
  font-weight: 400 900;
  font-display: swap;
}

/* ─── Reset & Base ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* El scroll suau el gestiona main.js (animació pròpia, més controlable);
   deixar-ho també aquí fa que alguns navegadors disparin el seu propi
   scroll natiu en canviar el hash (fins i tot via pushState) i competeixi
   amb l'animació de JS, produint un efecte de frenada/accelerada. */
html { scroll-behavior: auto; }
body { background: #F0EEEA; color: #181F34; font-family: 'Satoshi', sans-serif; font-weight: 500; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; }
a { text-decoration: none; }
img, svg { display: block; }

/* ─── Tailwind utilities ─────────────────────────── */
.flex         { display: flex; }
.grid         { display: grid; }
.hidden       { display: none; }
.block        { display: block; }
.inline-flex  { display: inline-flex; }
.relative     { position: relative; }
.absolute     { position: absolute; }
.fixed        { position: fixed; }

.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1 1 0%; }
.flex-shrink-0{ flex-shrink: 0; }
.min-w-0      { min-width: 0; }

.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-start   { align-items: flex-start; }
.items-stretch { align-items: stretch; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.self-start    { align-self: flex-start; }

.grid-cols-1   { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.order-1       { order: 1; }
.order-2       { order: 2; }

.gap-0    { gap: 0; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2    { gap: 0.5rem; }
.gap-3    { gap: 0.75rem; }
.gap-4    { gap: 1rem; }
.gap-5    { gap: 1.25rem; }
.gap-6    { gap: 1.5rem; }
.gap-7    { gap: 1.75rem; }
.gap-8    { gap: 2rem; }
.gap-10   { gap: 2.5rem; }
.gap-12   { gap: 3rem; }
.gap-16   { gap: 4rem; }
.gap-20   { gap: 5rem; }

.mx-auto  { margin-left: auto; margin-right: auto; }
.ml-auto  { margin-left: auto; }
.mt-1     { margin-top: 0.25rem; }
.mt-1\.5  { margin-top: 0.375rem; }
.mt-2     { margin-top: 0.5rem; }
.mt-3     { margin-top: 0.75rem; }
.mt-4     { margin-top: 1rem; }
.mt-5     { margin-top: 1.25rem; }
.mt-6     { margin-top: 1.5rem; }
.mt-8     { margin-top: 2rem; }
.mt-10    { margin-top: 2.5rem; }
.mt-12    { margin-top: 3rem; }
.mt-16    { margin-top: 4rem; }
.mb-4     { margin-bottom: 1rem; }
.mb-5     { margin-bottom: 1.25rem; }
.mb-6     { margin-bottom: 1.5rem; }
.mb-10    { margin-bottom: 2.5rem; }
.mb-12    { margin-bottom: 3rem; }
.mb-16    { margin-bottom: 4rem; }
.my-12    { margin-top: 3rem; margin-bottom: 3rem; }

.px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8  { padding-left: 2rem; padding-right: 2rem; }
.py-8  { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pt-1  { padding-top: 0.25rem; }
.pt-6  { padding-top: 1.5rem; }
.pt-8  { padding-top: 2rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-20 { padding-top: 5rem; }
.pt-24 { padding-top: 6rem; }
.pb-8  { padding-bottom: 2rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-12 { padding-bottom: 3rem; }
.p-1   { padding: 0.25rem; }

.w-full  { width: 100%; }
.w-4     { width: 1rem; }
.w-6     { width: 1.5rem; }
.h-px    { height: 1px; }
/* Caixa de contingut de tot el lloc: 1440 px. Cap informació no surt de les guies
   imaginàries que hi ha a cada costat (amb el marge lateral de cada secció per fora). */
:root { --wrap: 90rem; }
.max-w-7xl { max-width: var(--wrap); }
.max-h-0   { max-height: 0; }
.min-h-svh { min-height: 100svh; }

.top-full { top: 100%; }
.left-0   { left: 0; }
.right-0  { right: 0; }
.bottom-0 { bottom: 0; }
.bottom-3 { bottom: 0.75rem; }
.z-10     { z-index: 10; }
.z-50     { z-index: 50; }

.overflow-hidden    { overflow: hidden; }
.pointer-events-none{ pointer-events: none; }
.cursor-default     { cursor: default; }
.rounded-full       { border-radius: 9999px; }
.text-center        { text-align: center; }
.text-terra         { color: #935D39; }
.text-sm            { font-size: 0.875rem; line-height: 1.25rem; }
.italic             { font-style: italic; }
.opacity-0          { opacity: 0; }
.opacity-10         { opacity: 0.1; }
.transition-all     { transition: all 0.15s cubic-bezier(0.4,0,0.2,1); }
.duration-300       { transition-duration: 300ms; }

.blur-\[120px\] { filter: blur(120px); }
.blur-\[140px\] { filter: blur(140px); }

.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-7 > * + * { margin-top: 1.75rem; }

/* ─── Responsive — sm (≥640px) ─────────────────── */
@media (min-width: 640px) {
  .sm\:flex              { display: flex; }
  .sm\:grid-cols-2       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:gap-12            { gap: 3rem; }
}

/* ─── Responsive — md (≥768px) ─────────────────── */
@media (min-width: 768px) {
  .md\:flex              { display: flex; }
  .md\:block             { display: block; }
  .md\:hidden            { display: none; }
  .md\:inline-flex       { display: inline-flex; }
  .md\:flex-row          { flex-direction: row; }
  .md\:grid-cols-2       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:items-center      { align-items: center; }
  .md\:justify-between   { justify-content: space-between; }
  .md\:px-16             { padding-left: 4rem; padding-right: 4rem; }
  .md\:mb-16             { margin-bottom: 4rem; }
  .md\:mb-20             { margin-bottom: 5rem; }
  .md\:mt-20             { margin-top: 5rem; }
  .md\:mt-36             { margin-top: 9rem; }
  .md\:pt-14             { padding-top: 3.5rem; }
  .md\:pt-16             { padding-top: 4rem; }
  .md\:pt-28             { padding-top: 7rem; }
  .md\:pt-36             { padding-top: 9rem; }
  .md\:pb-10             { padding-bottom: 2.5rem; }
  .md\:pb-16             { padding-bottom: 4rem; }
  .md\:sticky            { position: sticky; }
  .md\:top-32            { top: 8rem; }
}

/* hidden by default, visible on md+ */
.hidden.md\:flex   { display: none; }
.hidden.md\:block  { display: none; }
.hidden.md\:inline-flex { display: none; }
@media (min-width: 768px) {
  .hidden.md\:flex        { display: flex; }
  .hidden.md\:block       { display: block; }
  .hidden.md\:inline-flex { display: inline-flex; }
  /* md:hidden = visible below, hidden above */
  .md\:hidden             { display: none !important; }
}

/* hidden by default, visible on lg+ */
.hidden.lg\:flex   { display: none; }
.hidden.lg\:block  { display: none; }
.hidden.lg\:inline-flex { display: none; }
@media (min-width: 1024px) {
  .hidden.lg\:flex        { display: flex; }
  .hidden.lg\:block       { display: block; }
  .hidden.lg\:inline-flex { display: inline-flex; }
  /* lg:hidden = visible below, hidden above */
  .lg\:hidden             { display: none !important; }
}

/* ─── Responsive — lg (≥1024px) ────────────────── */
@media (min-width: 1024px) {
  .lg\:block             { display: block; }
  .lg\:gap-6             { gap: 1.5rem; }
  .lg\:gap-12            { gap: 3rem; }
  .lg\:gap-16            { gap: 4rem; }
  .lg\:gap-20            { gap: 5rem; }
  .lg\:gap-24            { gap: 6rem; }
  .lg\:gap-32            { gap: 8rem; }
  .lg\:grid-cols-2       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-4       { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-\[3fr_2fr\] { grid-template-columns: 3fr 2fr; }
  .lg\:px-24             { padding-left: 6rem; padding-right: 6rem; }
  .lg\:order-1           { order: 1; }
  .lg\:order-2           { order: 2; }
}

/* ─── Reveal ─────────────────────────────────────── */
/* visible by default; JS opts elements into the hidden→reveal animation only once it has actually run */
html.reveal-armed .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
html.reveal-armed .reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1   { transition-delay: 0.1s; --rd: 0.1s; }
.reveal-d2   { transition-delay: 0.2s; --rd: 0.2s; }
.reveal-d3   { transition-delay: 0.3s; --rd: 0.3s; }
.reveal-d4   { transition-delay: 0.45s; --rd: 0.45s; }
.reveal-d5   { transition-delay: 0.6s; --rd: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  html.reveal-armed .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── Procés: scroll-linked timeline fill ─────────── */
.proces-dot { background: rgba(240,238,234,0.12); transition: background 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s cubic-bezier(0.16,1,0.3,1); }
.proces-dot span { color: rgba(240,238,234,0.75); transition: color 0.4s cubic-bezier(0.16,1,0.3,1); }
.proces-dot.is-active { background: #935D39; }
.proces-dot.is-active span { color: #F0EEEA; }
#proces-fill { transition: width 0.15s linear; }

/* ─── Contacte: mapa gran ─────────────────────────── */
#contacte-map iframe { display: block; width: 100%; height: 100%; min-height: 280px; border: 0; }
/* Sense consentiment: una franja compacta amb el text i l'accés extern a Google Maps (indicacions). */
.map-fallback-text { margin: 0; max-width: 56ch; font-size: 0.9375rem; line-height: 1.6; color: rgba(24,31,52,0.82); }
@media (max-width: 767px) {
  #contacte-map iframe { height: 280px; }
}

/* ─── Pàgines legals: contingut tipus article ─────── */
.legal-content { font-size: 1rem; line-height: 1.8; color: rgba(24,31,52,0.8); }
.legal-content h2 { font-family: 'Satoshi', sans-serif; font-size: 1.2rem; font-weight: 700; color: #181F34; letter-spacing: -0.01em; margin: 2.5rem 0 1rem; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p { margin: 0 0 1.25rem; }
.legal-content ul { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.legal-content li { margin-bottom: 0.5rem; }
.legal-content a { color: #181F34; text-decoration: underline; text-underline-offset: 2px; transition: color 0.3s; }
.legal-content a:hover { color: #935D39; }
.legal-content strong { color: #181F34; font-weight: 700; }
.legal-content .legal-pending { background: rgba(172,109,67,0.16); color: #181F34; padding: 0.1rem 0.4rem; border-radius: 2px; }
.legal-content .legal-pending strong { color: #7A4C2E; }
.legal-content h3 { font-family: 'Satoshi', sans-serif; font-size: 1rem; font-weight: 700; color: #181F34; margin: 1.75rem 0 0.75rem; }
.legal-content table { width: 100%; border-collapse: collapse; margin: 0; font-size: 0.9rem; }
/* Taula de l'editor de blocs: sense les vores de block-library i amb desplaçament horitzontal en pantalles estretes */
.legal-content .wp-block-table { margin: 0 0 1.5rem; overflow-x: auto; }
.legal-content .wp-block-table table { table-layout: auto; min-width: 560px; }
.legal-content .wp-block-table thead { border-bottom: 1px solid rgba(24,31,52,0.25); }
.legal-content th, .legal-content td { text-align: left; padding: 0.75rem 0.75rem 0.75rem 0; border: none; border-bottom: 1px solid rgba(24,31,52,0.12); vertical-align: top; }
.legal-content td code { white-space: nowrap; }
.legal-content th { font-weight: 700; color: #181F34; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.legal-content code { font-size: 0.85em; background: rgba(24,31,52,0.06); padding: 0.05rem 0.3rem; border-radius: 2px; overflow-wrap: anywhere; }
.legal-page { padding-top: 10rem; padding-bottom: 6rem; }
.legal-article { max-width: 800px; margin: 0 auto; min-width: 0; }
.legal-title { font-family: 'Moneta', serif; font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 400; line-height: 1.12; color: #181F34; margin: 1rem 0 0.75rem; overflow-wrap: anywhere; }
.legal-updated { font-size: 0.85rem; color: rgba(24,31,52,0.72); margin-bottom: 3rem; }
.legal-back { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(24,31,52,0.1); }
.legal-back a { color: #181F34; }
@media (max-width: 767px) { .legal-page { padding-top: 7.5rem; padding-bottom: 4rem; } }

/* ─── Header ─────────────────────────────────────── */
/* Capçalera compacta: transparent sobre el hero; en fer scroll, vidre blanc càlid.
   L'alçada no canvia entre estats (només el fons), i sense backdrop-filter el fons és gairebé opac. */
#hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  min-height: 68px; padding: 0.7rem 2.5rem;
  /* En pantalles amples, el logo i les accions s'alineen amb les guies de 1440 px */
  padding-left: max(2.5rem, calc((100% - var(--wrap)) / 2));
  padding-right: max(2.5rem, calc((100% - var(--wrap)) / 2));
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(250,248,244,0);
  transition: background-color 0.35s ease, border-color 0.35s ease, -webkit-backdrop-filter 0.35s ease, backdrop-filter 0.35s ease;
  border-bottom: 1px solid transparent;
}
#hdr.scrolled {
  background: rgba(250,248,244,0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom-color: rgba(24,31,52,0.09);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #hdr.scrolled { background: rgba(250,248,244,0.97); }
}
#hdr .hdr-logo-d { height: 30px; width: auto; }
#hdr .hdr-logo-m { height: 34px; width: auto; }
/* Botó del menú mòbil: àrea de pulsació de 44 × 44 px */
#burger { min-width: 44px; min-height: 44px; justify-content: center; align-items: flex-end; padding: 0 10px; margin-right: -10px; }
@media (max-width: 767px) { #hdr { min-height: 62px; padding: 0.5rem 1.25rem; } }
/* Les seccions no queden sota la capçalera en enllaçar-hi (també sense JS) */
section[id] { scroll-margin-top: 68px; }

/* Evita que la barra d'administració de WordPress (fixed, top:0) es superposi
   amb la nostra capçalera (també fixed, top:0). WP afegeix la classe
   "admin-bar" al <body> quan la barra és visible.
   A escriptori la barra és "fixed" (queda sempre visible), així que un
   desplaçament fix de 32px n'hi ha prou. A mòbil (≤782px) WordPress la
   torna "absolute" (es desplaça amb la pàgina i desapareix en fer scroll),
   així que aquell cas es gestiona dinàmicament per JS (vegeu main.js)
   en lloc d'un valor fix, per evitar un buit permanent un cop desapareix. */
body.admin-bar #hdr { top: 32px; }

/* ─── Logo ───────────────────────────────────────── */
.logo-word-top { font-family: 'Moneta', serif; font-size: 0.9rem; font-weight: 300; letter-spacing: 0.1em; color: rgba(24,31,52,0.45); display: block; line-height: 1; transition: color 0.5s; }
.logo-word-bot { font-family: 'Moneta', serif; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.18em; color: #AC6D43; display: block; line-height: 1.2; }

/* ─── Nav ─────────────────────────────────────────── */
.nav-a { font-size: 0.84rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(24,31,52,0.7); font-weight: 500; position: relative; padding-bottom: 2px; transition: color 0.3s; }
.nav-a:hover { color: #181F34; }
.nav-a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.nav-a:hover::after { transform: scaleX(1); }
.nav-a.active { color: #181F34; }
.nav-a.active::after { transform: scaleX(1); height: 2px; background: #181F34; }

/* ─── Buttons ────────────────────────────────────── */
.btn-f { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0.8rem 1.75rem; background: #935D39; color: #F0EEEA; border: 1px solid #935D39; border-radius: 9999px; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; transition: color 0.4s cubic-bezier(0.16,1,0.3,1); }
.btn-f::before { content: ''; position: absolute; inset: 0; background: #181F34; transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.btn-f:hover::before { transform: scaleX(1); }
.btn-f span, .btn-f svg { position: relative; z-index: 1; }

.btn-o { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0.8rem 1.75rem; background: transparent; color: rgba(24,31,52,0.85); border: 1px solid rgba(24,31,52,0.35); border-radius: 9999px; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; transition: color 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.4s; }
.btn-o::before { content: ''; position: absolute; inset: 0; background: #181F34; transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.btn-o:hover { border-color: #181F34; color: #F0EEEA; }
.btn-o:hover::before { transform: scaleX(1); }
.btn-o span, .btn-o svg { position: relative; z-index: 1; }

.btn-n { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0.8rem 1.75rem; background: transparent; color: #181F34; border: 1px solid rgba(24,31,52,0.25); border-radius: 9999px; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; transition: color 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.4s; }
.btn-n::before { content: ''; position: absolute; inset: 0; background: #181F34; transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.btn-n:hover { color: #F0EEEA; border-color: #181F34; }
.btn-n:hover::before { transform: scaleX(1); }
.btn-n span, .btn-n svg { position: relative; z-index: 1; }

.btn-hdr { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0.5rem 1.35rem; border: 1px solid #935D39; border-radius: 9999px; background: #935D39; color: #F0EEEA; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; transition: background 0.3s, border-color 0.3s; }
.btn-hdr:hover { background: #181F34; border-color: #181F34; color: #F0EEEA; }

.btn-cream { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0.8rem 2rem; background: transparent; color: #F0EEEA; border: 1px solid rgba(240,238,234,0.55); border-radius: 9999px; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; transition: color 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.4s; }
.btn-cream::before { content: ''; position: absolute; inset: 0; background: #935D39; transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.btn-cream:hover { border-color: #935D39; }
.btn-cream:hover::before { transform: scaleX(1); }
.btn-cream span, .btn-cream svg { position: relative; z-index: 1; }

.link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; position: relative; padding-bottom: 2px; transition: gap 0.3s cubic-bezier(0.16,1,0.3,1); }
.link-arrow::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.link-arrow:hover { gap: 0.85rem; }
.link-arrow:hover::after { transform: scaleX(1); }

/* ─── Eyebrow & HR ───────────────────────────────── */
/* Eyebrow: dos tons oficials segons el fons.
   - #62694E (Sage enfosquit, per contrast AA) sobre fons clar — per defecte.
   - #B0B79E (Sage pur) sobre fons fosc (navy) — cal afegir-lo inline on calgui. */
.eyebrow { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: #62694E; display: block; }
/* Espai únic sota els rètols verds (eyebrow) fins al que tenen a sota: el mateix a totes les seccions.
   Es defineix aquí i el fan servir el hero, els títols de secció i «Nuestros valores». */
:root { --eyebrow-gap: 1rem; }
@media (min-width: 768px) { :root { --eyebrow-gap: 1.25rem; } }
.eyebrow + .h-sec, .eyebrow + .h-compact { margin-top: var(--eyebrow-gap); }
.hero-kicker { margin-bottom: var(--eyebrow-gap); }
#hero .hero-title { margin: 0; } /* sense el marge per defecte del navegador per als h1 */
/* Segona línia dels titulars de secció en terracota (la mateixa del hero i de la banda de preobertura).
   Contrast per a text gran: 3,9:1 sobre blanc i blau marí. */
.t-terra { color: #AC6D43; }
/* Numeració decorativa de les targetes de Serveis — NO és un eyebrow de categoria,
   comparteix mida però no el color/rol semàntic, per això té classe pròpia. */
.serv-num { font-weight: 600; display: block; }
.hr { height: 1px; background: rgba(24,31,52,0.1); border: none; }

/* ─── Hero ───────────────────────────────────────── */
#hero { min-height: 100svh; background: #ffffff; position: relative; overflow: hidden; }

/* ─── Services grid ──────────────────────────────── */
/* Base uniforme per a les targetes; un sol destacat (terracota) i el hover salvia. */
.serv-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid rgba(24,31,52,0.1); border-left: 1px solid rgba(24,31,52,0.1); }
.serv-cell { border-right: 1px solid rgba(24,31,52,0.1); border-bottom: 1px solid rgba(24,31,52,0.1); padding: 2.25rem 2rem; }
.serv-cell:hover { background: rgba(176,183,158,0.14); }
.serv-num { display: block; margin-bottom: 1.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; color: #62694E; font-variant-numeric: tabular-nums; }
.serv-cell h3 { font-family: 'Satoshi', sans-serif; font-size: 1.1rem; font-weight: 700; color: #181F34; letter-spacing: -0.02em; margin: 0 0 0.6rem; }
.serv-cell p { font-size: 1rem; line-height: 1.7; color: rgba(24,31,52,0.82); margin: 0 0 0.75rem; }
/* Terracota una mica més fosc: manté 4,5:1 també sobre el hover salvia */
.serv-link { color: #8A5634; padding: 0.6rem 0; }
.serv-link::after { bottom: 0.45rem; }
.serv-cell.featured { grid-column: span 2; background: #935D39; }
.serv-cell.featured:hover { background: #935D39; }
.serv-cell.featured .serv-num { color: #F0EEEA; }
.serv-cell.featured h3 { font-size: 1.4rem; color: #F0EEEA; letter-spacing: -0.03em; }
.serv-cell.featured p { color: #F0EEEA; max-width: 420px; }
.serv-cell.featured .serv-link { color: #F0EEEA; }
/* Capçalera de cada servei: número i fletxa circular (accés ràpid al formulari) */
#serveis .sec-head { text-align: center; }
.serv-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.serv-top .serv-num { margin-bottom: 0; font-size: 0.8125rem; letter-spacing: 0.08em; color: #7A4C2E; }
.serv-arrow { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(24,31,52,0.3); color: #181F34; transition: background-color var(--serv-t) var(--serv-ease), border-color var(--serv-t) var(--serv-ease), color var(--serv-t) var(--serv-ease); }
.serv-arrow svg { transition: transform var(--serv-t) var(--serv-ease); }
.serv-cell.featured .serv-arrow { border-color: rgba(240,238,234,0.6); color: #F0EEEA; }
/* Hover (ratolí) i focus de teclat: la peça passa a blau marí amb text clar; la fletxa s'omple de terracota */
/* Hover de Serveis: fons, textos i fletxa canvien junts, amb una corba suau (sense cop inicial) */
#serveis { --serv-t: 0.6s; --serv-ease: cubic-bezier(0.45, 0, 0.25, 1); }
.serv-cell { transition: background-color var(--serv-t) var(--serv-ease), color var(--serv-t) var(--serv-ease); }
/* Les cel·les també són .reveal, i aquella regla (més específica) substituïa la transició del fons:
   s'hi sumen totes dues. El retard escalonat (--rd) només afecta l'aparició, mai el hover. */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-armed .serv-cell.reveal {
    transition-property: opacity, transform, background-color, color;
    transition-duration: 0.9s, 0.9s, var(--serv-t), var(--serv-t);
    transition-timing-function: cubic-bezier(0.16,1,0.3,1), cubic-bezier(0.16,1,0.3,1), var(--serv-ease), var(--serv-ease);
    transition-delay: var(--rd, 0s), var(--rd, 0s), 0s, 0s;
  }
}
.serv-cell h3, .serv-cell p, .serv-cell .serv-num, .serv-cell .serv-link { transition: color var(--serv-t) var(--serv-ease); }
@media (hover: hover) and (min-width: 640px) {
  .serv-cell:hover, .serv-cell.featured:hover { background: #181F34; }
  .serv-cell:hover h3, .serv-cell:hover .serv-link { color: #F0EEEA; }
  .serv-cell:hover p { color: rgba(240,238,234,0.85); }
  .serv-cell:hover .serv-num { color: rgba(240,238,234,0.78); }
  .serv-cell:hover .serv-arrow { background: #935D39; border-color: #935D39; color: #F0EEEA; }
  .serv-cell:hover .serv-arrow svg { transform: translate(2px, -2px); }
}
@media (min-width: 640px) {
  .serv-cell:focus-within, .serv-cell.featured:focus-within { background: #181F34; }
  .serv-cell:focus-within h3, .serv-cell:focus-within .serv-link { color: #F0EEEA; }
  .serv-cell:focus-within p { color: rgba(240,238,234,0.85); }
  .serv-cell:focus-within .serv-num { color: rgba(240,238,234,0.78); }
  .serv-cell:focus-within .serv-arrow { background: #935D39; border-color: #935D39; color: #F0EEEA; }
  .serv-cell:focus-within :focus-visible { outline-color: #F0EEEA; }
}
@media (prefers-reduced-motion: reduce) {
  .serv-cell, .serv-arrow, .serv-arrow svg { transition: none; }
  .serv-cell:hover .serv-arrow svg { transform: none; }
}

/* Transició Serveis → Equip: separada de la graella, sense allargar-la */
.cta-band { margin-top: 3rem; display: flex; align-items: center; justify-content: space-between; gap: 3rem 4rem; padding: 3.25rem 4rem; background: #181F34; border-radius: 6px; }
.cta-left  { flex: 1; min-width: 0; }
.cta-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.cta-label { display: block; margin-bottom: 1rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240,238,234,0.78); }
.cta-title { font-family: 'Moneta', serif; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 400; color: #F0EEEA; line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 1rem; }
.cta-body { font-size: 1rem; line-height: 1.7; color: rgba(240,238,234,0.85); max-width: 480px; margin: 0; }
.cta-subtext { font-size: 0.875rem; line-height: 1.55; color: rgba(240,238,234,0.8); text-align: center; margin: 0; }

@media (max-width: 1023px) {
  .serv-grid { grid-template-columns: 1fr 1fr; }
  .serv-cell.featured { grid-column: span 2; }
  .cta-band { padding: 3rem 2.5rem; gap: 2rem; }
}
/* Mòbil: llista compacta — nom, descripció i acció visibles, sense caixes repetides */
@media (max-width: 639px) {
  .serv-grid { grid-template-columns: 1fr; border-left: 0; }
  .serv-cell { border-right: 0; padding: 1.25rem 0 0.75rem; }
  .serv-cell:hover { background: transparent; }
  .serv-num { margin-bottom: 0.4rem; }
  .serv-top { margin-bottom: 0.5rem; }
  .serv-arrow { width: 2.25rem; height: 2.25rem; }
  .serv-cell.featured { grid-column: span 1; padding: 1.5rem 1.25rem 1rem; margin-bottom: 0.25rem; border-radius: 4px; }
  .cta-band { flex-direction: column; align-items: flex-start; padding: 2.25rem 1.5rem; margin-top: 2.25rem; }
  .cta-right { align-items: flex-start; }
  .cta-subtext { text-align: left; }
}

/* ─── Team ───────────────────────────────────────── */
/* Graella de retrats (4 · 2 · 1 columnes). En repòs: foto amb nom i rol a la base.
   Revelat circular (ref. Framer «Andrew Michel, CEO»): el panell salvia s'obre des de la cantonada
   superior esquerra amb el ratolí, el focus de teclat o el botó (tàctil). */
.team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 4 columnes des de 1280 px: per sota, la fitxa del director no hi cap dins el retrat */
@media (min-width: 1280px) { .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
.team-card { min-width: 0; }
.team-photo { position: relative; aspect-ratio: 3 / 4; border-radius: 4px; overflow: hidden; background: #B0B79E; }
@media (max-width: 639px) { .team-photo { aspect-ratio: 4 / 5; } }
.team-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
/* Nom i rol sobre la foto, amb un degradat blau marí perquè es llegeixin sobre qualsevol imatge */
.team-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 4rem 1.25rem 1.25rem 1.25rem; background: linear-gradient(to top, rgba(24,31,52,0.88) 0%, rgba(24,31,52,0.6) 50%, rgba(24,31,52,0) 100%); }
.team-name { font-family: 'Moneta', serif; font-size: 1.375rem; font-weight: 400; line-height: 1.15; color: #F0EEEA; margin: 0; }
.team-cap .team-role { margin: 0.45rem 0 0; color: rgba(240,238,234,0.88); }
/* Panell revelat */
.team-panel { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: 1.5rem 1.25rem 4.5rem; background: #B0B79E; color: #181F34;
  clip-path: circle(0% at 0% 0%); transition: clip-path 0.6s cubic-bezier(0.4,0,0.2,1); }
.team-pname { font-family: 'Moneta', serif; font-size: 1.375rem; line-height: 1.15; color: #181F34; margin: 0; }
.team-prole { margin: 0.45rem 0 0; color: #181F34; }
.team-bio { font-size: 0.9375rem; line-height: 1.55; color: #181F34; margin: 0.9rem 0 0; }
.team-credential { align-self: flex-start; margin: 0.9rem 0 0; padding: 0.25rem 0.6rem; background: rgba(24,31,52,0.1); border-radius: 3px; font-size: 0.8125rem; font-weight: 500; color: #181F34; }
.team-link { display: flex; width: max-content; margin-top: auto; padding: 0.6rem 0 0; color: #181F34; }
.team-link::after { bottom: -0.1rem; }
.team-link:focus-visible { outline: 2px solid #181F34; outline-offset: 3px; }
/* .is-dismissed: s'ha tancat amb la × mentre el ratolí o el focus encara hi són (es reinicia en sortir) */
@media (hover: hover) and (pointer: fine) { .team-photo:hover:not(.is-dismissed) .team-panel { clip-path: circle(150% at 0% 0%); } }
.team-photo:focus-within:not(.is-dismissed) .team-panel, .team-photo.is-open .team-panel { clip-path: circle(150% at 0% 0%); }
.team-photo { cursor: pointer; }
/* Botó tancar (×): invisible en repòs; apareix quan el panell és obert. Amb teclat es veu en rebre el focus. */
.team-toggle { position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(24,31,52,0.25); background: #F0EEEA; color: #181F34; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
@media (hover: hover) and (pointer: fine) { .team-photo:hover:not(.is-dismissed) .team-toggle { opacity: 1; pointer-events: auto; } }
.team-photo.is-open .team-toggle, .team-photo:focus-within:not(.is-dismissed) .team-toggle, .team-toggle:focus-visible { opacity: 1; pointer-events: auto; }
.team-toggle:focus-visible { outline: 2px solid #F0EEEA; outline-offset: 2px; box-shadow: 0 0 0 4px #181F34; }
.team-toggle svg { transition: transform 0.3s ease; }
/* «+» girat = «×» quan el panell és visible */
@media (hover: hover) and (pointer: fine) { .team-photo:hover:not(.is-dismissed) .team-toggle svg { transform: rotate(45deg); } }
.team-photo.is-open .team-toggle svg, .team-photo:focus-within:not(.is-dismissed) .team-toggle svg { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .team-panel, .team-toggle, .team-toggle svg { transition: none; } }

/* ─── Form ───────────────────────────────────────── */
.f-input { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(24,31,52,0.2); padding: 0.85rem 0; color: #181F34; font-family: 'Satoshi', sans-serif; font-size: 1rem; font-weight: 400; outline: none; transition: border-color 0.3s; }
.f-input::placeholder { color: rgba(24,31,52,0.58); }
.f-input:focus { border-bottom-color: #935D39; }
.f-input.err { border-bottom-color: #b33d3d; border-bottom-width: 2px; }
.f-consent-check.err { outline: 2px solid rgba(180,60,60,0.55); outline-offset: 3px; border-radius: 2px; }
.f-select { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(24,31,52,0.2); padding: 0.85rem 0; color: rgba(24,31,52,0.85); font-family: 'Satoshi', sans-serif; font-size: 1rem; font-weight: 400; outline: none; appearance: none; cursor: pointer; transition: border-color 0.3s; }
.f-select:focus { border-bottom-color: #935D39; color: #181F34; }
.f-select.err { border-bottom-color: #b33d3d; border-bottom-width: 2px; }
/* Amb el focus visible global, els camps (outline:none) mantenen un indicador clar */
.f-input:focus-visible, .f-select:focus-visible { outline: 2px solid #935D39; outline-offset: 2px; }
.f-optional { text-transform: none; letter-spacing: 0; color: rgba(24,31,52,0.66); }
.f-note { font-size: 0.875rem; line-height: 1.55; color: rgba(24,31,52,0.75); margin-bottom: 2rem; }
.f-hint { font-size: 0.8125rem; line-height: 1.55; color: rgba(24,31,52,0.7); margin-top: 0.5rem; }
.f-error { text-align: center; margin-top: 1rem; font-size: 0.9375rem; line-height: 1.5; color: #A33535; }
.f-error:empty { display: none; }
/* Camp trampa per a bots: fora de pantalla però no display:none (alguns bots el salten) */
.f-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.f-label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(24,31,52,0.62); display: block; margin-bottom: 0.25rem; }

/* ─── Misc ───────────────────────────────────────── */
/* El botó del menú no ha de mostrar la vora per defecte del navegador */
#burger { background: none; border: 0; cursor: pointer; }
#mmenu { transition: max-height 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease, visibility 0s linear 0.5s; }
/* Tancat (amb JS): ni visible, ni tabulable, ni llegible per lectors de pantalla. */
.js #mmenu:not(.is-open) { visibility: hidden; }
#mmenu.is-open { visibility: visible; transition-delay: 0s; }
.star { color: rgba(24,31,52,0.4); font-size: 0.8rem; }

/* ─── Mobile CTA ─────────────────────────────────── */
#mobile-cta { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); background: rgba(240,238,234,0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(24,31,52,0.08); transform: translateY(110%); transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
#mobile-cta.visible { transform: translateY(0); }
.mobile-cta-main { flex: 1; min-width: 0; }
.mobile-cta-wa { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #181F34; color: #25D366; }

/* ─── Animations ─────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Language switcher ──────────────────────────── */
.lang-switch { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.7rem; border: 1px solid rgba(24,31,52,0.3); border-radius: 9999px; background: transparent; color: rgba(24,31,52,0.8); font-family: 'Satoshi', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; cursor: pointer; transition: border-color 0.3s, color 0.3s, background 0.3s; }
.lang-btn:hover { border-color: rgba(24,31,52,0.35); color: #181F34; }
.lang-btn svg { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.lang-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang-menu { position: absolute; top: calc(100% + 0.6rem); right: 0; min-width: 148px; background: rgba(255,255,255,0.98); backdrop-filter: blur(16px); border: 1px solid rgba(24,31,52,0.1); border-radius: 8px; box-shadow: 0 16px 40px rgba(24,31,52,0.14); list-style: none; margin: 0; padding: 0.4rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.25s cubic-bezier(0.16,1,0.3,1), transform 0.25s cubic-bezier(0.16,1,0.3,1), visibility 0.25s; z-index: 200; }
.lang-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-opt { border-radius: 5px; transition: background 0.2s; }
.lang-opt a { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.55rem 0.65rem; border-radius: 5px; color: inherit; text-decoration: none; }
.lang-opt:hover { background: rgba(176,183,158,0.16); }
.lang-opt.active { background: rgba(172,109,67,0.1); }
.lang-code { font-family: 'Satoshi', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color: #935D39; width: 1.6rem; flex-shrink: 0; }
.lang-name { font-family: 'Satoshi', sans-serif; font-size: 0.8rem; font-weight: 500; color: #181F34; }
.lang-opt.active .lang-name { font-weight: 700; }

.lang-switch-mobile { margin-top: 0.25rem; }
.lang-mobile-opts { display: flex; gap: 0.6rem; }
.lang-mobile-opt { padding: 0.5rem 1.1rem; border: 1px solid rgba(24,31,52,0.3); border-radius: 9999px; background: transparent; color: rgba(24,31,52,0.8); font-family: 'Satoshi', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; transition: border-color 0.3s, color 0.3s, background 0.3s; }
.lang-mobile-opt.active { background: #181F34; border-color: #181F34; color: #F0EEEA; }

/* ─── WhatsApp FAB ───────────────────────────────── */
/* Blau marí i crema; la icona conserva el verd de WhatsApp perquè sigui reconeixible. A mòbil l'accés és a la barra inferior. */
#wa-fab { position: fixed; bottom: 6.5rem; right: 0; z-index: 90; display: flex; align-items: center; background: #181F34; color: #F0EEEA; border-radius: 9999px 0 0 9999px; padding: 0.8rem 0.85rem; box-shadow: -4px 6px 20px rgba(24,31,52,0.16); text-decoration: none; overflow: hidden; transition: padding 0.35s cubic-bezier(0.16,1,0.3,1), background 0.3s; }
#wa-fab:hover { background: #2A3350; }
#wa-fab svg { flex-shrink: 0; display: block; color: #25D366; }
#wa-fab .wa-label { max-width: 0; opacity: 0; white-space: nowrap; overflow: hidden; transition: max-width 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.25s, margin 0.35s; font-family: 'Satoshi', sans-serif; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; }
@media (hover: hover) and (pointer: fine) {
  #wa-fab:hover { padding-left: 1.15rem; }
  #wa-fab:hover .wa-label { max-width: 180px; opacity: 1; margin-left: 0.65rem; }
}
@media (max-width: 767px) { #wa-fab { display: none; } }


/* ─── Focus accessibility ─────────────────────────── */
:focus-visible { outline: 2px solid #AC6D43; outline-offset: 3px; border-radius: 2px; }
/* Sobre fons fosc el contorn terra no destaca prou: crema. */
footer :focus-visible, #proces :focus-visible, .cta-band :focus-visible, .mobile-cta-wa:focus-visible, #contacte .order-2 :focus-visible, .serv-cell.featured :focus-visible { outline-color: #F0EEEA; }
main:focus, main:focus-visible, h3[tabindex="-1"]:focus { outline: none; }

/* Text només per a lectors de pantalla */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* "Salta al contingut": amagat fins que rep el focus */
.skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 1000; padding: 0.75rem 1.25rem; background: #181F34; color: #F0EEEA; border-radius: 4px; font-size: 0.85rem; font-weight: 600; transform: translateY(-200%); transition: transform 0.2s; }
.skip-link:focus, .skip-link:focus-visible { transform: translateY(0); outline: 2px solid #AC6D43; outline-offset: 2px; }

/* ─── Peu: enllaços ──────────────────────────────── */
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-link { font-size: 0.875rem; color: rgba(240,238,234,0.72); transition: color 0.3s; }
.footer-link:hover, .footer-link[aria-current="page"] { color: #F0EEEA; }
.footer-link[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }

/* ─── Bàner de consentiment ──────────────────────── */
/* Acceptar i Rebutjar: mateix estil, mida i pes visual */

/* Botons petits (mapa) */
.btn-small { font-size: 0.8125rem; min-height: 44px; padding: 0.65rem 1.4rem; }
[hidden] { display: none !important; }
.btn-f:focus-visible, .btn-o:focus-visible, .btn-n:focus-visible, .btn-cream:focus-visible, .btn-hdr:focus-visible { outline-offset: 4px; }
.btn-hdr:focus-visible { outline-color: #181F34; }

/* ─── Mobile overrides ───────────────────────────── */
@media (max-width: 767px) {
  #mmenu .nav-a { padding-top: 0.5rem; }
  /* La barra inferior no ha de tapar el final del peu. */
  #site-footer { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
}

/* ─── servei-template extras ─────────────────────── */
.breadcrumb { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(24,31,52,0.45); font-weight: 500; display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb a { color: rgba(24,31,52,0.45); transition: color 0.2s; }
.breadcrumb a:hover { color: #AC6D43; }
.breadcrumb span { color: rgba(24,31,52,0.25); }
.img-placeholder { background: linear-gradient(135deg, #D4CBC0 0%, #C8BDB0 100%); border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.img-placeholder-dark { background: linear-gradient(135deg, #2A3350 0%, #181F34 100%); border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.img-label { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; opacity: 0.4; }
.benefit-card { padding: 2rem; border: 1px solid rgba(24,31,52,0.1); border-radius: 4px; background: #FFFFFF; transition: box-shadow 0.3s; }
.benefit-card:hover { box-shadow: 0 8px 32px rgba(24,31,52,0.08); }
.faq-item { border-bottom: 1px solid rgba(24,31,52,0.1); }
.faq-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; text-align: left; cursor: pointer; font-family: 'Satoshi', sans-serif; font-size: 1rem; font-weight: 600; color: #181F34; background: none; border: none; transition: color 0.2s; }
.faq-trigger:hover { color: #935D39; }
.faq-trigger .icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; border: 1px solid rgba(24,31,52,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.3s, background 0.3s, border-color 0.3s; }
.faq-trigger.open .icon { transform: rotate(45deg); background: #935D39; border-color: #935D39; }
.faq-trigger.open .icon svg { stroke: #F0EEEA; }
.faq-heading { margin: 0; font: inherit; }
/* Sense JS les respostes queden obertes; amb JS (.js a <html>) es pleguen i main.js en gestiona l'alçada i l'atribut hidden. */
.faq-body { overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1); }
.js .faq-body { max-height: 0; }
.faq-body p { padding-bottom: 1.5rem; font-size: 1rem; line-height: 1.8; color: rgba(24,31,52,0.82); }
@media (max-width: 767px) { .page-section { padding-top: 5rem !important; padding-bottom: 5rem !important; } }

/* Hero typography follows its actual text column, including capped layouts. */
.hero-copy { min-width: 0; container-type: inline-size; }
#hero .hero-title { font-size: clamp(2.25rem, 6vw, 5rem); }
@supports (font-size: 1cqw) {
  #hero .hero-title { font-size: min(clamp(2.5rem, 6vw, 5.375rem), 13cqw); }
}
@media (max-width: 639px) {
  #contacte .grid > * { min-width: 0; }
  #contacte a { overflow-wrap: anywhere; }
}

/* ─── Moviment reduït ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  }

/* ═══════════════════════════════════════════════════
   Ritme, escala i lectura (millores d'octubre de 2026)
   ═══════════════════════════════════════════════════ */

/* Seccions: un sol sistema d'espaiat (abans 8rem fixos) i el marge lateral com a variable */
/* Espai vertical de les seccions: un sol valor per mida de pantalla (i un de més compacte per a blocs curts com les FAQ).
   Mòbil 72 px · tauleta 104 px · escriptori 120 px. Per donar o treure aire a tota la Home, canviar només aquestes variables. */
:root { --sec-space: 4.5rem; --sec-space-tight: 4rem; }
@media (min-width: 768px) { :root { --sec-space: 6.5rem; --sec-space-tight: 5.5rem; } }
@media (min-width: 1024px) { :root { --sec-space: 7.5rem; --sec-space-tight: 6.5rem; } }
.sec { --gut: 1.5rem; padding: var(--sec-space) var(--gut); }
.sec--tight { padding-block: var(--sec-space-tight); }
.sec--band-end { padding-bottom: 0 !important; }
@media (min-width: 768px) { .sec { --gut: 4rem; } }
@media (min-width: 1024px) { .sec { --gut: 6rem; } }

/* Escala de capçaleres: hero (pròpia) > secció > compacta */
.sec-head { margin-bottom: 2.5rem; }
.sec-head--compact { margin-bottom: 2rem; }
@media (min-width: 768px) { .sec-head { margin-bottom: 3.5rem; } .sec-head--compact { margin-bottom: 2.75rem; } }
.h-sec, .h-compact { font-family: 'Moneta', serif; font-weight: 400; color: #181F34; letter-spacing: -0.01em; margin: 0; }
.h-sec { font-size: clamp(2.25rem, 4.4vw, 3.75rem); line-height: 1.1; }
.h-compact { font-size: clamp(1.9rem, 3.2vw, 2.75rem); line-height: 1.15; }

/* Hero: arc compacte a mòbil i tauleta (la mateixa fotografia de l'arc d'escriptori) */
.hero-arch-m { margin-top: 2.25rem; width: 100%; max-width: 420px; aspect-ratio: 5 / 4; border-radius: 999px 999px 8px 8px; overflow: hidden; background: #B0B79E; }
.hero-arch-m img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }

/* Filosofia: text plenament llegible des del principi */
.filo-text { max-width: 460px; }
.filo-text p { font-size: 1.05rem; line-height: 1.8; color: rgba(24,31,52,0.82); margin: 0 0 1.25rem; }
.filo-text p:last-child { margin-bottom: 0; }

/* Filosofia amb els valors integrats.
   Una columna (per defecte): text, fotografia + cita, valors, enllaç. Sense elements fixos.
   Escriptori (≥1024 px): text, valors i enllaç a l'esquerra; fotografia + cita a la dreta. Amb prou alçada de
   pantalla el conjunt queda sticky dins la columna dreta, que fa la mateixa alçada que l'esquerra: acaba
   exactament amb la secció, sense scroll intern ni alçada afegida. */
.filo-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "aside" "values" "more"; }
.filo-intro { grid-area: intro; }
.filo-aside { grid-area: aside; margin-top: 3rem; }
.filo-values { grid-area: values; margin-top: 3.5rem; }
.filo-more { grid-area: more; margin-top: 1.75rem; }
.filo-sticky { position: relative; }
.values-label { margin: 0 0 calc(var(--eyebrow-gap) + 0.25rem); /* +4px: a sota hi ha un filet, sense l'aire intern de les lletres d'un titular */ font-family: 'Satoshi', sans-serif; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #4F5540; }
.values-list { list-style: none; margin: 0; padding: 0; }
.values-row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 1rem; padding: 1.35rem 0; border-top: 1px solid #9DA58A; }
.values-icon { grid-row: span 2; margin-top: 0.15rem; color: #AC6D43; } /* icona en terracota, a l'altura del títol */
.values-row h4, .values-row p { grid-column: 2; }
.values-row:last-child { border-bottom: 1px solid #9DA58A; }
.values-row h4 { margin: 0 0 0.45rem; font-family: 'Moneta', serif; font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: #181F34; }
.values-row p { margin: 0; max-width: 32rem; font-size: 1rem; line-height: 1.65; color: rgba(24,31,52,0.8); }
.values-link { color: rgba(24,31,52,0.85); }
.values-link:hover { color: #7A4C2E; }
@media (min-width: 1024px) {
  .filo-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "intro aside" "values aside" "more aside"; column-gap: clamp(3.5rem, 6vw, 6rem); }
  .filo-aside { margin-top: 0; }
  .filo-values { margin-top: 4rem; }
  .filo-more { align-self: start; margin-top: 2rem; }
}
/* Sticky només amb alçada suficient: la foto (quadrada) es redueix perquè foto + cita càpiguen sota la capçalera fixa */
@media (min-width: 1024px) and (min-height: 640px) {
  .filo-sticky { position: sticky; top: calc(68px + 2rem); width: min(100%, calc(100svh - 68px - 8rem)); margin-left: auto; }
}
@media (max-width: 639px) {
  .filo-aside { margin-top: 2.5rem; }
  .filo-values { margin-top: 2.75rem; }
  .values-row { padding: 1.1rem 0; }
  .values-row h4 { font-size: 1.375rem; margin-bottom: 0.3rem; }
  .filo-more { margin-top: 1.25rem; }
}

/* Transició Filosofia → Equip: menys blanc entre els valors i el títol d'Equip, sense enganxar-los */
#filosofia.sec { padding-bottom: 1.5rem; }
#equip.sec { padding-top: 2.5rem; }
@media (min-width: 768px) { #filosofia.sec { padding-bottom: 2rem; } #equip.sec { padding-top: 3.5rem; } }
@media (min-width: 1024px) { #filosofia.sec { padding-bottom: 2.5rem; } #equip.sec { padding-top: 3.5rem; } }

/* Procés: targetes sense ombres, numerals discrets */
.proces-card { background: #F0EEEA; border: 1px solid rgba(24,31,52,0.08); border-radius: 8px; padding: 2.25rem 2rem; }
.proces-card h3 { font-family: 'Satoshi', sans-serif; font-size: 1.1rem; font-weight: 700; color: #181F34; letter-spacing: -0.02em; margin: 0 0 0.75rem; }
.proces-card p { font-size: 1rem; line-height: 1.75; color: rgba(24,31,52,0.82); margin: 0; }
.proces-num { display: block; margin-bottom: 0.9rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; color: #935D39; font-variant-numeric: tabular-nums; }

/* FAQ: sortida discreta cap al formulari */
.faq-more { max-width: 760px; margin: 2rem auto 0; text-align: center; font-size: 1rem; line-height: 1.6; color: rgba(24,31,52,0.82); }
.faq-more-link { display: inline-block; padding: 0.5rem 0.15rem; color: #935D39; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.faq-more-link:hover { color: #181F34; }

/* Contacte: el panell blau marí fa l'alçada del seu contingut */
.contact-panel { background: #181F34; border-radius: 8px; padding: 2.5rem; }
@media (max-width: 639px) { .contact-panel { padding: 2rem 1.5rem; } }

/* Àrea tàctil còmoda per als enllaços de text amb fletxa (sense canviar-ne l'aspecte) */
.contact-panel .link-arrow, #filosofia .link-arrow { padding: 0.6rem 0; }
.contact-panel .link-arrow::after, #filosofia .link-arrow::after { bottom: 0.45rem; }


/* ═══════════════════════════════════════════════════
   Recorregut de la portada (octubre de 2026, segona fase)
   ═══════════════════════════════════════════════════ */

/* Hero: mòbil sense alçada de pantalla forçada (la foto apareix abans);
   tauleta en dues columnes; escriptori a pantalla completa com fins ara. */
#hero { min-height: 0; }
.hero-inner { padding-top: 6rem; padding-bottom: 3rem; }
/* El marge lateral del Hero (6rem a escriptori) queda fora dels 1440 px, com a la resta de seccions */
.hero-inner.max-w-7xl { max-width: calc(var(--wrap) + 12rem); }
.hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-content: center; align-items: center; }
.hero-lead { margin-top: 1.25rem; max-width: 440px; font-size: 1.05rem; line-height: 1.7; font-weight: 500; color: rgba(24,31,52,0.82); }
.hero-actions { margin-top: 1.75rem; gap: 0.75rem 1rem; }
.hero-arch-m { margin-top: 2rem; }
.hero-arch { position: relative; overflow: hidden; height: 100%; min-height: 520px; border-radius: 220px 220px 8px 8px; background: #B0B79E; }
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-inner { padding-top: 8rem; padding-bottom: 4.5rem; }
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2.5rem; }
  .hero-arch { min-height: 440px; border-radius: 999px 999px 8px 8px; }
}
@media (min-width: 1024px) {
  /* Pantalla completa en escriptori, però sense buits en tauletes verticals grans (1024×1366) */
  #hero { min-height: min(100svh, 920px); }
  .hero-inner { min-height: min(100svh, 920px); padding-top: 7rem; padding-bottom: 2.5rem; }
  .hero-grid { grid-template-columns: 3fr 2fr; gap: 4rem; }
}
/* A 360 px els dos botons han de cabre sencers, cadascun en una línia */
@media (max-width: 400px) {
  .hero-actions .btn-f, .hero-actions .btn-o { padding-left: 1.35rem; padding-right: 1.35rem; letter-spacing: 0.08em; }
}

/* Filosofia: sense buits sobrants al costat del text curt */
.filo-photo { position: relative; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: #B0B79E; } /* una columna: alçada continguda */
@media (min-width: 1024px) { .filo-photo { aspect-ratio: 1 / 1; } }

/* Procés compacte: el numeral dins de cada pas, sense línia independent */
.proces-steps { list-style: none; margin: 0; padding: 0; gap: 1.25rem; }
.proces-card { padding: 2rem 1.75rem; }
@media (max-width: 767px) {
  .proces-steps { gap: 0.75rem; }
  .proces-card { padding: 1.5rem 1.25rem; }
  .proces-num { margin-bottom: 0.6rem; }
}

/* Formulari: dues intencions visibles i commutables */
.form-card { background: #ffffff; border-radius: 8px; padding: 2.5rem; box-shadow: 0 8px 48px rgba(24,31,52,0.09), 0 1px 0 rgba(24,31,52,0.04); }
.form-title { font-family: 'Moneta', serif; font-size: clamp(1.5rem, 2.2vw, 1.85rem); font-weight: 400; line-height: 1.2; color: #181F34; margin: 0 0 1.25rem; }
@media (max-width: 639px) {
  .form-card { padding: 1.75rem 1.25rem; }
}

/* 1024–1279 px: capçalera d'escriptori sense amuntegar el logo, el menú i les accions */
@media (min-width: 1024px) and (max-width: 1279px) {
  #hdr { padding-left: 2rem; padding-right: 2rem; }
  #hdr nav { gap: 1.5rem; }
  #hdr .nav-a { letter-spacing: 0.1em; }
  #hdr > .flex { gap: 0.75rem; }
}
/* Les accions de servei no es parteixen en dues línies */
.serv-link { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .serv-cell { padding: 2rem 1.5rem; }
}
/* A 360 px el botó d'avís ha de cabre en una línia (CA/ES/EN) */
.btn-cream { white-space: nowrap; }
@media (max-width: 400px) {
  .cta-band { padding-left: 1.25rem; padding-right: 1.25rem; }
  .btn-cream { padding-left: 1.25rem; padding-right: 1.25rem; letter-spacing: 0.05em; }
  .btn-cream svg { display: none; }
  /* Botó fix inferior: «Sol·licita informació» en una sola línia al costat de WhatsApp (CA/ES/EN) */
  .mobile-cta-main { padding-left: 1rem; padding-right: 1rem; letter-spacing: 0.05em; white-space: nowrap; }
}


/* ═══════════════════════════════════════════════════
   Nav, Contacte i Procés (octubre de 2026, tercera fase)
   ═══════════════════════════════════════════════════ */

/* Contacte: dades i mapa a l'esquerra; el mapa omple l'espai restant fins a l'alçada del formulari */
.contact-side { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
/* Mapa Leaflet + OpenStreetMap: teseles en tons càlids i apagats de la marca */
.contact-map { position: relative; z-index: 0; overflow: hidden; height: 300px; border-radius: 8px; border: 1px solid rgba(24,31,52,0.08); background: #EDE8DF; font-family: 'Satoshi', sans-serif; }
@media (min-width: 1024px) {
  .contact-map { flex: 1 1 auto; height: auto; min-height: 280px; max-height: 680px; }
}
.contact-map .leaflet-tile-pane { filter: grayscale(1) sepia(0.28) contrast(0.92) brightness(1.04); }
.contact-map .leaflet-control-zoom { border: none; box-shadow: 0 2px 10px rgba(24,31,52,0.12); border-radius: 6px; overflow: hidden; }
.contact-map .leaflet-control-zoom a { width: 32px; height: 32px; line-height: 30px; color: #181F34; background: #F5F2EC; border-bottom-color: rgba(24,31,52,0.1); }
.contact-map .leaflet-control-zoom a:hover { background: #935D39; color: #F0EEEA; }
.contact-map .leaflet-control-attribution { font-size: 0.6875rem; background: rgba(245,242,236,0.85); color: rgba(24,31,52,0.75); }
.contact-map .leaflet-control-attribution a { color: #181F34; }
.contact-map .map-pin { background: none; border: none; }
.contact-map .map-pin svg { display: block; filter: drop-shadow(0 3px 4px rgba(24,31,52,0.3)); }
.contact-map .leaflet-popup-content-wrapper { border-radius: 8px; background: #F5F2EC; color: #181F34; box-shadow: 0 10px 30px rgba(24,31,52,0.18); }
.contact-map .leaflet-popup-tip { background: #F5F2EC; }
.contact-map .leaflet-popup-content { margin: 0.9rem 1.1rem; font-size: 0.875rem; line-height: 1.5; display: flex; flex-direction: column; gap: 0.3rem; }
.map-popup-title { font-weight: 700; font-size: 0.9375rem; }
.map-popup-address { color: rgba(24,31,52,0.8); max-width: 26ch; }
.contact-map a.map-popup-link { color: #935D39; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.contact-map :focus-visible { outline: 2px solid #935D39; outline-offset: 2px; }

/* Procés: línia temporal. Tots els passos són llegibles sense JS; el progrés és només un accent. */
.proces-layout { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .proces-layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); gap: 4rem; align-items: start; } }
.timeline { position: relative; }
.tl-track { position: absolute; left: calc(1.375rem - 0.5px); top: 1.375rem; bottom: 0; width: 1px; background: rgba(240,238,234,0.22); }
.tl-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: #AC6D43; transition: height 0.2s linear; }
.tl-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem; }
.tl-step { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
/* La línia s'acaba al darrer numeral */
.tl-step:last-child::before { content: ''; position: absolute; left: 0; top: 2.75rem; bottom: 0; width: 2.75rem; background: #181F34; }
.tl-num { position: relative; z-index: 1; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(240,238,234,0.45); background: #181F34; color: #F0EEEA; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; transition: background-color 0.4s ease, border-color 0.4s ease; }
.tl-step.is-active .tl-num { background: #935D39; border-color: #935D39; }
.tl-body h3 { font-family: 'Satoshi', sans-serif; font-size: 1.15rem; font-weight: 700; color: #F0EEEA; letter-spacing: -0.01em; margin: 0.6rem 0 0.5rem; }
.tl-body p { font-size: 1rem; line-height: 1.7; color: rgba(240,238,234,0.82); max-width: 52ch; margin: 0; }
@media (max-width: 767px) { .tl-steps { gap: 1.75rem; } .tl-step { gap: 1rem; } }