/* Proposta A: estil compartit per la versió catalana i la castellana */
:root { --escenari: var(--verd); --pagina: #f6f7f6; }
body { background: var(--pagina); }

/* --- Barra --- */
.barra {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--marge);
  background: color-mix(in srgb, var(--pagina) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.barra nav { align-items: center; }
.barra nav a.idioma { display: inline-flex; padding: 4px; margin: -4px; border-radius: 6px; transition: transform 160ms var(--sortida); }
.barra nav a.idioma svg { display: block; width: 27px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12); } /* taste-skill-ignore: vora fina perquè la bandera groga no es perdi sobre el fons clar */
.barra nav a.idioma:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .barra nav a.idioma:hover { transform: scale(1.08); } }
.barra img { height: 30px; width: auto; }
.barra nav { display: flex; gap: clamp(16px, 2.4vw, 36px); font-size: 15px; }
.barra nav a { text-decoration: none; }
.barra nav a:hover { text-decoration: underline; }

/* --- Primera pantalla: el titular a dalt a l'esquerra, l'escenari verd amb l'expedient --- */
.heroi { position: relative; min-height: max(100svh, 860px); padding: 150px var(--marge) 0; overflow: hidden; }
.heroi-text { position: relative; z-index: 2; max-width: 46rem; }
.heroi h1 { font-size: clamp(52px, 5.4vw, 88px); font-weight: 600; line-height: 0.98; letter-spacing: -0.035em; }
.heroi-text p { margin: 28px 0 32px; max-width: 44ch; font-size: clamp(17px, 1.1vw, 19px); }
.escenari {
  position: absolute; left: 34%; right: 0; bottom: 0; top: 40%;
  background: var(--escenari);
  /* La pestanya d'una carpeta d'expedient, retallada a la cantonada */
  clip-path: polygon(0 56px, 30% 56px, calc(30% + 56px) 0, 100% 0, 100% 100%, 0 100%);
}
.escenari .expedient { position: absolute; left: 56px; top: 112px; }

/* --- L'expedient (un tros del programa) --- */
[data-ui] { font-size: 14px; line-height: 1.45; letter-spacing: 0; }
[data-ui] h3, [data-ui] strong { letter-spacing: -0.005em; }
.expedient {
  width: min(660px, calc(100vw - 2 * var(--marge) - 32px));
  background: var(--paper); border-radius: 10px; color: var(--tinta);
  box-shadow: 0 30px 60px -20px rgb(2 44 34 / 45%); /* taste-skill-ignore: tros del programa (data-ui) */
  overflow: hidden;
}
.exp-cap { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 18px 20px 14px; }
.exp-cap strong { display: block; font-size: 17px; font-weight: 650; }
.exp-cap span { color: var(--tinta-suau); }
.estat { padding: 3px 10px; border-radius: 999px; font-weight: 600; white-space: nowrap; transition: background-color 300ms ease; }
.estat[data-e='incomplet'] { background: var(--e-incomplet); }
.estat[data-e='llest'] { background: var(--e-llest); }
.parts { display: grid; grid-template-columns: 1.5fr 1fr 0.6fr; gap: 6px; padding: 0 20px; }
.part i { display: block; height: 8px; border-radius: 4px; overflow: hidden; }
.part b { display: block; height: 100%; width: 0; border-radius: 4px; transition: width 500ms var(--sortida); }
.part:nth-child(1) i { background: var(--e-llest); } .part:nth-child(1) b { background: var(--p-llest); }
.part:nth-child(2) i { background: var(--e-matriculat); } .part:nth-child(2) b { background: var(--p-matriculat); }
.part:nth-child(3) i { background: var(--e-facturat); } .part:nth-child(3) b { background: var(--p-facturat); }
.part small { display: block; margin-top: 4px; font-size: 13px; color: var(--tinta-suau); }
.part.actual small { color: var(--tinta); font-weight: 600; }
.exp-cos { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 16px; border-top: 1px solid var(--pas); } /* taste-skill-ignore: tros del programa (data-ui) */
.safata, .falten { padding: 14px 20px 20px; }
.safata { background: var(--fons); }
.exp-cos h3 { font-size: 13px; font-weight: 600; color: var(--tinta-suau); margin-bottom: 10px; }
.safata ul, .falten ul { display: grid; gap: 6px; }
.doc {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 1px solid var(--pas); border-radius: 8px; background: var(--paper); /* taste-skill-ignore: tros del programa (data-ui) */
  text-align: left; transition: transform 160ms var(--sortida), border-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .doc:hover { border-color: var(--verd-viu); } }
.doc:active { transform: scale(0.97); }
.doc svg { flex: none; color: var(--verd); }
.doc[disabled] { opacity: 0.45; cursor: default; transition: opacity 300ms ease, transform 160ms var(--sortida); }
/* El "clic" de l'expedient que s'omple sol */
.doc.premut { transform: scale(0.97); border-color: var(--verd-viu); background: #ecfdf5; }
.doc.rebutjat { border-color: #f87171; background: #fef2f2; }
.falten li.acaba { animation: marca 900ms var(--sortida); }
@keyframes marca { from { color: var(--verd); transform: translateX(6px); } }
.avis.nou { animation: avisa 260ms var(--sortida); }
@keyframes avisa { from { opacity: 0; transform: translateY(4px); } }
.reinicia { display: block; margin: 8px 20px 0 auto; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--pas); font-size: 14px; font-weight: 600; transition: transform 160ms var(--sortida); }
.reinicia:active { transform: scale(0.97); }
.reinicia[hidden] { display: none; }
.falten li { display: flex; gap: 8px; align-items: baseline; }
.falten li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--e-incomplet); transform: translateY(-1px); }
.falten li.fet { color: var(--tinta-suau); text-decoration: line-through; text-decoration-color: var(--verd-viu); }
.falten li.fet::before { background: var(--verd-viu); }
.avis {
  margin: 14px 20px 0; padding: 10px 12px; border-radius: 8px; background: #ecfdf5; color: #065f46;
  min-height: 3.1em; transition: background-color 300ms ease;
}
.avis.error { background: #fef2f2; color: #991b1b; }

/* --- Funcions: la llista a l'esquerra, una pantalla que es mou a la dreta --- */
.funcions { padding: clamp(88px, 9vw, 150px) var(--marge) 0; }
.funcions-cos { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(20px, 3vw, 48px); margin-top: 32px; align-items: start; }
.cerca {
  display: block; width: 100%; padding: 14px 18px; border: 0; border-radius: 12px;
  background: var(--pas); font-size: 18px;
}
.cerca::placeholder { color: var(--tinta-suau); }
.ordres { display: grid; gap: 4px; margin-top: 12px; }
.ordre { border-radius: 12px; transition: background-color 200ms ease; }
.ordre button {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%;
  padding: 14px 18px; border: 0; background: none; text-align: left;
  font-size: clamp(20px, 1.7vw, 26px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2;
}
.ordre button::after { content: ''; flex: none; width: 10px; height: 10px; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; transform: rotate(45deg); opacity: 0; transition: opacity 200ms ease, transform 200ms var(--sortida); }
.ordre .aviat { margin-left: 10px; padding: 2px 9px; border-radius: 999px; background: var(--e-enviat); font-size: 13px; font-weight: 600; letter-spacing: 0; vertical-align: 3px; }
.ordre p { display: none; padding: 0 18px 16px; max-width: 54ch; font-size: 16px; }
.ordre.triada { background: var(--verd-clar); }
.ordre.triada button::after { opacity: 1; transform: translateX(-4px) rotate(45deg); }
.ordre.triada p { display: block; }
.ordre[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .ordre:not(.triada):hover { background: var(--pas); } }

@keyframes aparicio { from { opacity: 0; transform: translateY(8px); } }
/* La pantalla animada: un tros del programa per a cada funció */
.vista { position: sticky; top: 96px; min-height: 460px; display: grid; place-items: center; padding: clamp(16px, 2.4vw, 32px); border-radius: 18px; background: var(--tinta); }
.escena { display: none; width: 100%; max-width: 440px; padding: 18px; border-radius: 12px; background: var(--paper); font-size: 14px; }
.escena.activa { display: block; }
.escena h3 { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; letter-spacing: -0.005em; margin-bottom: 12px; }
.escena h3 small { font-size: 13px; font-weight: 500; color: var(--tinta-suau); }
.e-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; margin-top: 6px; border-radius: 8px; background: var(--fons); }
.xip { padding: 2px 9px; border-radius: 999px; font-weight: 600; font-size: 13px; white-space: nowrap; }
/* Cada peça amb data-pas apareix al seu torn */
.escena [data-pas] { opacity: 0; transform: translateY(6px) scale(0.97); transition: opacity 260ms ease, transform 320ms var(--sortida); }
.escena [data-pas].on { opacity: 1; transform: none; }
.e-barres { display: grid; gap: 10px; }
.e-barres div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; }
.e-barres i { display: block; height: 18px; border-radius: 4px; transform-origin: left; }
.e-barres i[data-pas] { opacity: 1; transform: scaleX(0); transition: transform 700ms var(--sortida); }
.e-barres i[data-pas].on { transform: scaleX(1); }
.sobre { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: var(--fons); }
.sobre[data-pas].on { transform: translateX(0); }
.sobre svg { flex: none; color: var(--verd); }
.adjunts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.adjunts span { padding: 3px 9px; border-radius: 6px; background: var(--e-matriculat); font-size: 13px; }
.bombolla { justify-self: end; max-width: 85%; margin-left: auto; padding: 9px 12px; border-radius: 12px 12px 4px 12px; background: var(--tinta); color: #fff; }
.punts { display: inline-flex; gap: 4px; padding: 10px 12px; margin-top: 8px; border-radius: 12px; background: var(--fons); }
.punts i { width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-suau); animation: bota 900ms ease-in-out infinite; }
.punts i:nth-child(2) { animation-delay: 120ms; } .punts i:nth-child(3) { animation-delay: 240ms; }
@keyframes bota { 50% { transform: translateY(-4px); } }
.regle { position: relative; height: 10px; margin: 26px 0 8px; border-radius: 999px; background: linear-gradient(90deg, var(--e-perduda), var(--e-facturat)); } /* taste-skill-ignore: escala de preus del taxador (data-ui) */
.agulla { position: absolute; top: -8px; left: 8%; width: 4px; height: 26px; border-radius: 2px; background: var(--tinta); transition: left 1200ms var(--moviment); }
.agulla.on { left: 62%; }
.clients { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 4px; }
.clients span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; background: var(--fons); font-weight: 600; font-size: 13px; }
.clients span.si { background: var(--e-facturat); }
.clients span.si.on { background: var(--verd); color: #fff; }
.clients span.si[data-pas] { opacity: 1; transform: none; transition: background-color 300ms ease, color 300ms ease; }
.firma { width: 100%; height: 70px; margin-top: 8px; color: var(--tinta); }
.firma path { stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1600ms var(--moviment); }
.firma.on path { stroke-dashoffset: 0; }
.firma[data-pas] { opacity: 1; transform: none; }
.linia-firma { height: 2px; border-radius: 1px; background: var(--pas); }

/* --- Com funciona: cartes que s'apilen una damunt de l'altra en baixar --- */
.passos { padding: clamp(88px, 9vw, 150px) var(--marge) 0; }
.passos h2 { font-size: clamp(36px, 4vw, 64px); margin-bottom: 32px; }
.carta {
  position: sticky; top: calc(96px + var(--i) * 18px);
  display: grid; grid-template-columns: 5fr 6fr; gap: clamp(20px, 3vw, 56px); align-items: center;
  min-height: min(440px, 62svh); margin-bottom: 40px; padding: clamp(24px, 3.4vw, 56px); border-radius: 22px;
  transform-origin: top center;
}
.carta:last-child { margin-bottom: 0; }
.carta .num { display: block; font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.carta h3 { font-size: clamp(30px, 3vw, 48px); line-height: 1.05; }
.carta p { margin-top: 16px; max-width: 40ch; font-size: 18px; }
.c1 { background: var(--e-llest); } .c2 { background: var(--e-incomplet); } .c3 { background: var(--e-enviat); } .c4 { background: var(--e-facturat); }
.mini { width: 100%; max-width: 480px; justify-self: end; background: var(--paper); border-radius: 12px; padding: 18px; }
.mini .linia { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; margin-top: 6px; border-radius: 8px; background: var(--fons); }
.mini .etiqueta { padding: 2px 8px; border-radius: 999px; background: var(--e-incomplet); font-weight: 600; white-space: nowrap; }
.mini .etiqueta.ok { background: var(--e-facturat); }
.mini .etiqueta.llegint { background: var(--e-llest); }
.mini .etiqueta.enviat { background: var(--e-enviat); }
.mini .etiqueta.matriculat { background: var(--e-matriculat); }
.mini-cap { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.mini-cap strong { font-size: 16px; }
.mini p { margin: 10px 0 0; font-size: 14px; color: var(--tinta-suau); max-width: none; }

/* --- Tres frases sota el botó de la primera pantalla --- */
.claus { display: grid; gap: 10px; margin-top: 48px; max-width: 26rem; font-size: 17px; }
.claus li { position: relative; padding-left: 22px; }
.claus li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; border-radius: 3px; background: var(--verd-viu); }

/* --- Abans i amb Expekar --- */
.canvi { padding: clamp(88px, 9vw, 150px) var(--marge) 0; }
.canvi h2, .persones h2, .rapport h2, .funcions h2 { font-size: clamp(36px, 4vw, 64px); max-width: 18ch; }
.costat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.costat > div { padding: clamp(24px, 3vw, 44px); border-radius: 18px; }
.costat h3 { font-size: clamp(22px, 1.8vw, 28px); margin-bottom: 20px; }
.abans { background: var(--e-incomplet); }
.amb { background: var(--e-facturat); }
.costat ul { display: grid; gap: 14px; font-size: 18px; }
.costat li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.costat li::before { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 14px; font-weight: 700; transform: translateY(2px); }
.abans li::before { content: ''; background: rgb(15 23 42 / 12%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='%230f172a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.amb li::before { content: ''; background: var(--verd) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }

/* --- Una pantalla per a cada persona --- */
.persones { padding: clamp(88px, 9vw, 150px) var(--marge) 0; }
.persones-cos { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(20px, 3vw, 48px); margin-top: 40px; align-items: start; }
.rols { display: grid; gap: 8px; }
.rols button {
  display: block; width: 100%; padding: 18px 22px; border: 0; border-radius: 14px; background: var(--pas); text-align: left;
  transition: background-color 200ms ease, transform 160ms var(--sortida);
}
.rols button:active { transform: scale(0.98); }
.rols button b { display: block; font-size: 22px; letter-spacing: -0.015em; }
.rols button span { display: block; margin-top: 2px; font-size: 16px; color: var(--tinta-suau); }
.rols button[aria-selected='true'] { background: var(--tinta); color: #fff; }
.rols button[aria-selected='true'] span { color: #cbd5e1; }
.pantalla { min-height: 440px; padding: clamp(16px, 2.4vw, 32px); border-radius: 18px; background: var(--verd); }
.finestra { background: var(--paper); border-radius: 10px; overflow: hidden; }
.finestra[hidden] { display: none; }
.finestra:not([hidden]) { animation: aparicio 260ms var(--sortida); }
.f-cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: var(--fons); }
.f-cap strong { font-size: 16px; }
.f-cap small { color: var(--tinta-suau); font-size: 13px; }
.f-cos { padding: 8px 18px 18px; display: grid; gap: 8px; }
.fila-ui { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 12px 14px; border-radius: 8px; background: var(--fons); }
.fila-ui small { grid-column: 1; color: var(--tinta-suau); font-size: 13px; }
.fila-ui .estat { grid-row: 1 / span 2; grid-column: 2; font-size: 13px; }
.e-incomplet { background: var(--e-incomplet); } .e-llest { background: var(--e-llest); } .e-enviat { background: var(--e-enviat); }
.e-matriculat { background: var(--e-matriculat); } .e-facturat { background: var(--e-facturat); } .e-oportunitat { background: var(--pas); }
.nota-ui { padding: 10px 14px; border-radius: 8px; background: #ecfdf5; color: #065f46; }
.boto-ui { justify-self: start; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--tinta); color: #fff; font-weight: 600; font-size: 14px; }
.barres { display: grid; gap: 10px; padding-top: 6px; }
.barres div { display: grid; grid-template-columns: 70px 1fr 28px; gap: 10px; align-items: center; }
.barres i { display: block; height: 14px; border-radius: 4px; background: var(--p-matriculat); transform-origin: left; }
.finestra:not([hidden]) .barres i { animation: creix 700ms var(--sortida) backwards; }
.barres div:nth-child(2) i { animation-delay: 60ms; } .barres div:nth-child(3) i { animation-delay: 120ms; } .barres div:nth-child(4) i { animation-delay: 180ms; }
@keyframes creix { from { transform: scaleX(0); } }

/* --- El rapport del mes --- */
.rapport { padding: clamp(88px, 9vw, 150px) var(--marge) 0; }
.rapport-cap { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.rapport-cap p { max-width: 44ch; font-size: 18px; }
.resum { display: flex; height: 56px; gap: 4px; margin-top: 40px; }
.resum div { display: flex; align-items: center; padding: 0 14px; border-radius: 8px; font-weight: 600; white-space: nowrap; overflow: hidden; min-width: 0; }
.taula-ui { margin-top: 12px; border-radius: 14px; background: var(--paper); padding: 8px; overflow-x: auto; }
.taula-ui table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 15px; min-width: 640px; }
.taula-ui th { text-align: left; font-weight: 600; color: var(--tinta-suau); padding: 8px 12px; font-size: 13px; }
.taula-ui td { padding: 11px 12px; background: var(--fons); }
.taula-ui td:first-child { border-radius: 8px 0 0 8px; font-weight: 600; }
.taula-ui td:last-child { border-radius: 0 8px 8px 0; text-align: right; }
.taula-ui th:last-child { text-align: right; }
.taula-ui .estat { font-size: 13px; }

/* --- Seguretat --- */
@media (max-width: 1100px) and (min-width: 861px) { .seguretat ul { grid-template-columns: 1fr 1fr; } }
.seguretat { padding: clamp(64px, 7vw, 110px) var(--marge); background: var(--tinta); color: #e2e8f0; }
.seguretat h2 { color: #fff; font-size: clamp(36px, 4vw, 64px); max-width: 16ch; }
.seguretat ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px; }
.seguretat li { padding: 24px; border-radius: 14px; background: rgb(255 255 255 / 7%); font-size: 16px; }
.seguretat li b { display: block; color: #fff; font-size: 20px; letter-spacing: -0.01em; margin-bottom: 8px; }

/* --- Entrada i sortida: el text del document a l'esquerra, la fitxa a la dreta --- */
.lectura { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(88px, 9vw, 150px); min-height: 90svh; }
.lectura > div { position: relative; padding: 18vh var(--marge) 120px; }
.cru { background: var(--tinta); color: #e2e8f0; }
.cru textarea {
  width: min(34ch, 100%); min-height: 15em; border: 0; resize: vertical; background: transparent;
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: #f8fafc; outline-offset: 8px;
}
.net { background: var(--paper); display: flex; justify-content: center; align-items: start; }
.fitxa { width: min(480px, 100%); border-radius: 10px; background: var(--fons); padding: 20px; }
.fitxa dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; }
.fitxa dt { color: var(--tinta-suau); }
.fitxa dd { font-weight: 600; }
.fitxa dd.buit { color: #b91c1c; font-weight: 500; }
.fitxa .ia { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--pas); color: var(--tinta-suau); } /* taste-skill-ignore: tros del programa (data-ui) */
.lectura .meitat { position: absolute; bottom: 32px; font-size: clamp(40px, 5vw, 80px); font-weight: 650; letter-spacing: -0.035em; line-height: 1; }
.cru .meitat { right: var(--marge); color: #f8fafc; }
.net .meitat { left: var(--marge); }

/* --- Preguntes: rajoles plenes, una oberta cada vegada --- */
.preguntes { display: grid; grid-template-columns: 4fr 8fr; gap: 24px; padding: clamp(88px, 9vw, 150px) var(--marge) 0; }
.preguntes h2 { align-self: start; font-size: clamp(40px, 4vw, 64px); }
.preguntes details { margin-bottom: 8px; border-radius: 14px; background: var(--pas); transition: background-color 250ms ease; }
.preguntes summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 72px;
  padding: 18px 24px; font-size: 20px; font-weight: 550; cursor: pointer; list-style: none;
}
.preguntes summary::-webkit-details-marker { display: none; }
.mes { position: relative; flex: none; width: 16px; height: 16px; }
.mes::before, .mes::after { content: ''; position: absolute; left: 0; top: 6.5px; width: 16px; height: 3px; border-radius: 2px; background: currentColor; transition: transform 250ms var(--sortida); }
.mes::after { transform: rotate(90deg); }
.preguntes details[open] { background: var(--verd-clar); }
.preguntes details[open] .mes::after { transform: rotate(0deg); }
.preguntes details p { padding: 0 24px 24px; max-width: 52ch; font-size: 17px; }

/* --- Tancament: la fila de rajoles --- */
.accio { display: grid; grid-template-columns: 2fr 8fr 2fr; gap: 12px; margin-top: clamp(88px, 9vw, 150px); height: 380px; }
.accio > * { border-radius: 18px; overflow: hidden; }
.accio .pla { background: var(--tinta); }
.accio .pla:first-child { background: var(--verd); }
.accio .centre { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px 40px; align-items: center; padding: 40px; background: var(--verd-clar); }
.accio .centre p { margin: 12px 0 0; }
.accio h2 { font-size: clamp(32px, 3vw, 44px); }
.accio p { max-width: 46ch; }
.camp { display: flex; width: min(520px, 100%); padding: 6px; border-radius: 999px; background: var(--paper); }
.camp input { flex: 1; min-width: 10ch; padding: 0 16px; border: 0; background: transparent; }
.camp input:focus-visible { outline: none; }
.camp:focus-within { outline: 3px solid var(--tinta); outline-offset: 2px; }

/* --- Peu: una sola línia --- */
.peu { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: end; padding: 120px var(--marge) 30px; font-size: 15px; color: var(--tinta-suau); }
.peu nav { display: flex; gap: 24px; }
.peu nav a { color: var(--tinta); text-decoration: none; }
.peu .dreta { text-align: right; }
.peu .credits { grid-column: 1 / -1; margin-top: 24px; }

@media (max-width: 860px) {
  .funcions-cos { grid-template-columns: 1fr; }
  .vista { position: relative; top: auto; min-height: 0; order: -1; }
  .carta { grid-template-columns: 1fr; top: calc(72px + var(--i) * 12px); min-height: 0; gap: 20px; }
  .carta p { font-size: 16px; }
  .mini { justify-self: stretch; }
  .claus { margin-top: 32px; }
  .costat, .persones-cos { grid-template-columns: 1fr; }
  .rols { grid-template-columns: 1fr 1fr; }
  .rols button { padding: 14px 16px; }
  .rols button b { font-size: 18px; }
  .rols button span { display: none; }
  .pantalla { min-height: 0; padding: 12px; }
  .resum { height: 44px; font-size: 13px; }
  .resum div { padding: 0 8px; }
  .seguretat ul { grid-template-columns: 1fr; }
  .barra nav a:not([href="#contacte"]):not(.idioma) { display: none; }
  .heroi { padding-top: 120px; min-height: auto; }
  .heroi h1 { font-size: 11vw; }
  .escenari { position: relative; inset: auto; margin: 40px calc(-1 * var(--marge)) 0; padding: 88px 16px 0; height: 640px; clip-path: polygon(0 40px, 40% 40px, calc(40% + 40px) 0, 100% 0, 100% 100%, 0 100%); }
  .escenari .expedient { position: static; }
  .exp-cos { grid-template-columns: 1fr; }
  .accio .centre { grid-template-columns: 1fr; }
  .lectura { grid-template-columns: 1fr; }
  .lectura > div { min-height: 62svh; padding: 64px 20px 110px; }
  .cru .meitat { left: 20px; right: auto; }
  .preguntes { grid-template-columns: 1fr; }
  .preguntes h2 { position: static; font-size: 9vw; }
  .preguntes summary { font-size: 18px; min-height: 64px; }
  .accio { grid-template-columns: 1fr 1fr; height: auto; }
  .accio .centre { grid-column: 1 / -1; order: -1; padding: 28px 20px; }
  .accio .pla { height: 120px; }
  .camp { flex-direction: column; border-radius: 14px; gap: 6px; }
  .camp input { padding: 12px; }
  .peu { grid-template-columns: 1fr; padding-top: 20svh; }
  .peu .dreta { text-align: left; }
}