/* BOPA consolidat (beta) — MCA Assessors. Imatge de mcaandorra.com: Fraunces + Poppins, navy i blau MCA. */
:root {
  --navy: #111827; --navy-2: #0a0f18; --fons: #f9fafb; --blanc: #ffffff; --text: #1f2937; --suau: #6b7280;
  --vora: #e5e7eb; --blau: #2563eb; --blau-2: #1d4ed8; --blau-clar: #5b8ff9; --blau-fons: #eef4ff;
  --sobre-fosc: rgba(249, 250, 251, .65); --avis: #fff8e6; --avis-vora: #f0d58c; --propi: #8a5a00;
  --derog: #b42318; --vigent: #067647; --mark: #fde68a;
  --serif: "Fraunces", Georgia, serif; --sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fons); color: var(--text); font: 300 16px/1.65 var(--sans); }
a { color: var(--blau); text-underline-offset: 3px; }
a:hover { color: var(--blau-2); }
b, strong { font-weight: 600; }
h1, h2, h3 { font-family: var(--serif); font-weight: 300; letter-spacing: -.01em; color: var(--text); }
h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.15; margin: .4rem 0 1rem; }
h2 { font-size: 1.45rem; margin: 2.2rem 0 .8rem; }
h1 em, h2 em { font-style: italic; color: var(--blau); }
code { background: var(--blau-fons); padding: 0 .3em; border-radius: 3px; font-size: .9em; }
mark { background: var(--mark); color: inherit; padding: 0 .1em; }
.eyebrow { font: 600 11px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--blau); }
.boto { display: inline-block; background: var(--blau); color: #fff; border: 0; border-radius: 2px; cursor: pointer;
  font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 1rem 1.4rem; text-decoration: none; }
.boto:hover { background: var(--blau-2); color: #fff; }

/* capçalera */
.franja { background: var(--navy-2); color: var(--sobre-fosc); font: 300 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.franja div { max-width: 1240px; margin: 0 auto; padding: .55rem 16px; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.franja a { color: var(--sobre-fosc); text-decoration: none; }
.cap { background: var(--navy); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.cap-dins { max-width: 1240px; margin: 0 auto; padding: .9rem 16px; display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; }
.marca { display: flex; align-items: center; gap: .9rem; text-decoration: none; }
.marca img { height: 38px; width: auto; display: block; }
.marca .producte { border-left: 1px solid rgba(255, 255, 255, .2); padding-left: .9rem; color: #f9fafb;
  font: 300 1.05rem/1.1 var(--serif); }
.marca .producte em { color: var(--blau-clar); }
.beta { background: transparent; color: var(--blau-clar); border: 1px solid var(--blau-clar); font: 600 10px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase; padding: .3rem .45rem; border-radius: 2px; }
.cerca-cap { display: flex; flex: 1 1 280px; min-width: 0; }
.cerca-cap input { flex: 1; min-width: 0; padding: .65rem .8rem; border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .06); color: #f9fafb; border-radius: 2px 0 0 2px; font: 300 14px var(--sans); }
.cerca-cap input::placeholder { color: rgba(249, 250, 251, .5); }
.cerca-cap button { padding: .65rem 1rem; border: 0; background: var(--blau); color: #fff; border-radius: 0 2px 2px 0;
  font: 600 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.menu { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.menu a { color: var(--sobre-fosc); text-decoration: none; font-size: 13px; letter-spacing: .04em; }
.menu a:hover { color: #fff; }

.prova { background: #4c1d95; color: #fff; text-align: center; font: 500 12px var(--sans); letter-spacing: .08em; padding: .35rem 16px; }
.avis-fix { background: var(--avis); border-bottom: 1px solid var(--avis-vora); font-size: 13px; padding: .55rem 16px; text-align: center; }
.avis-fix strong { font-weight: 600; }

/* portada (com el hero de mcaandorra.com) */
.hero { background: var(--navy); color: #f9fafb; }
.hero-dins { max-width: 1240px; margin: 0 auto; padding: 4rem 16px 4.2rem; }
.hero .eyebrow { color: var(--blau-clar); display: flex; align-items: center; gap: .8rem; }
.hero .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--blau-clar); }
.hero h1 { color: #f9fafb; font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 18ch; margin: 1.1rem 0 1.2rem; }
.hero h1 em { color: var(--blau-clar); }
.hero p { color: var(--sobre-fosc); font-size: 17px; max-width: 60ch; }
.cerca-gran { display: flex; gap: 0; margin: 1.6rem 0 0; flex-wrap: wrap; max-width: 760px; }
.cerca-gran input { flex: 1 1 260px; min-width: 0; padding: 1rem 1rem; font: 300 15px var(--sans); border: 1px solid var(--vora);
  border-radius: 2px 0 0 2px; background: #fff; color: var(--text); }
.cerca-gran select { padding: 0 .8rem; font: 400 13px var(--sans); border: 1px solid var(--vora); border-left: 0; background: #fff; color: var(--text); }
.cerca-gran .boto { border-radius: 0 2px 2px 0; }
.xifres { list-style: none; padding: 0; margin: 2.8rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; max-width: 900px; }
.xifres b { display: block; font: 300 2.6rem/1 var(--serif); color: #f9fafb; }
.xifres li:nth-child(3) b, .xifres li:nth-child(4) b { color: var(--blau-clar); }
.xifres span { color: var(--sobre-fosc); font-size: 13px; }

.cos { max-width: 1240px; margin: 0 auto; padding: 2rem 16px 4rem; }
.seccio-blanca { background: var(--blanc); }
.peu { background: var(--navy); color: var(--sobre-fosc); font-size: 13px; }
.peu-dins { max-width: 1240px; margin: 0 auto; padding: 2.5rem 16px; display: grid; grid-template-columns: auto 1fr; gap: 1rem 2.5rem; align-items: start; }
.peu img { height: 34px; }
.peu a { color: #f9fafb; }
.peu p { margin: 0 0 .35rem; }
@media (max-width: 640px) { .peu-dins { grid-template-columns: 1fr; } }

/* llistes i resultats */
.llista { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--vora); }
.llista li { padding: .8rem 0; border-bottom: 1px solid var(--vora); }
.llista a { color: var(--text); text-decoration: none; }
.llista a:hover { color: var(--blau); }
.resultats { list-style: none; padding: 0; }
.resultats li { padding: .9rem 0; border-bottom: 1px solid var(--vora); }
.resultats a { color: var(--text); text-decoration: none; font-weight: 400; }
.resultats a:hover { color: var(--blau); }
.frag { color: var(--suau); font-size: 14px; margin-top: .25rem; }
.suau { color: var(--suau); }
.etiq { display: inline-block; font: 500 10px/1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: .05rem .45rem;
  border-radius: 2px; background: var(--blau-fons); color: var(--blau); vertical-align: middle; }
.etiq.gris { background: #f3f4f6; color: var(--suau); }
.etiq.propia { background: #fff4e0; color: var(--propi); }
.estat-vigent { background: #e7f6ee; color: var(--vigent); }
.estat-derogada { background: #fdecea; color: var(--derog); }
.anys { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.anys a { padding: .2rem .55rem; border: 1px solid var(--vora); border-radius: 2px; text-decoration: none; font-size: 13px; color: var(--text); background: #fff; }
.anys a.actiu { background: var(--navy); color: #fff; border-color: var(--navy); }

/* norma */
.norma-cap { background: var(--blanc); border: 1px solid var(--vora); padding: 1.6rem 1.8rem; margin-bottom: 2rem; }
.norma-cap h1 { margin-top: .7rem; }
.data { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .8rem 0 0; font-size: 14px; }
.data input { font: 300 14px var(--sans); padding: .45rem .5rem; border: 1px solid var(--vora); border-radius: 2px; }
.data .boto { padding: .7rem 1rem; }
.nota-bloc { background: var(--blau-fons); border-left: 3px solid var(--blau); padding: .7rem 1rem; font-size: 14px; margin: 1rem 0 0; }
.norma-graella { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.index { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; font-size: 13px; background: var(--blanc);
  border: 1px solid var(--vora); padding: 1rem 1.1rem; }
.index ul { list-style: none; padding: 0; margin: .4rem 0; }
.index li { margin: .12rem 0; }
.index a { color: var(--text); text-decoration: none; }
.index a:hover { color: var(--blau); }
.index .ix-cap { color: var(--suau); margin-top: .7rem; font-size: 11px; letter-spacing: .04em; }
.index a.derog { color: var(--derog); text-decoration: line-through; }
.index summary { cursor: pointer; font: 600 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--blau); }
.mods li { margin: .5rem 0; }
.text { background: var(--blanc); border: 1px solid var(--vora); padding: .5rem 2rem 1.5rem; font-size: 16px; font-weight: 300; }
.capitol { font: 300 1.25rem/1.3 var(--serif); color: var(--text); margin: 2.2rem 0 .3rem; padding-top: 1rem; border-top: 1px solid var(--vora); }
.unitat { padding: 1rem 0 1.1rem; border-bottom: 1px solid #f0f1f3; scroll-margin-top: 1rem; }
.unitat:last-child { border-bottom: 0; }
.unitat.derogada { opacity: .75; }
.text-unitat { overflow-wrap: anywhere; }
.text-unitat b { font: 400 1.05rem var(--serif); color: var(--navy); }
.peu-unitat { font-size: 12px; color: var(--suau); margin-top: .55rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.nota { font-size: 13px; margin-top: .55rem; padding: .55rem .75rem; background: #fffaf0; border-left: 3px solid #f0c060; }
.versions { list-style: none; padding: 0; }
.versions li { background: var(--blanc); border: 1px solid var(--vora); padding: 1.1rem 1.3rem; margin: 1rem 0; }
.versions li.actual { border-left: 3px solid var(--blau); }
.v-cap { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .6rem; font-size: 14px; }
.doc { max-width: 860px; background: var(--blanc); border: 1px solid var(--vora); padding: 1.8rem 2rem; }
.text-doc { overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .norma-graella { grid-template-columns: minmax(0, 1fr); }
  .index { position: static; max-height: 22rem; }
  .text { padding: .5rem 1rem 1rem; }
  .norma-cap, .doc { padding: 1.1rem 1rem; }
  .marca .producte { display: none; }
}

/* doctrina enllaçada a l'article (enllaç automàtic) */
.doctrina-art { margin-top: .6rem; font-size: 13px; border: 1px solid var(--vora); background: var(--fons); padding: .45rem .75rem; }
.doctrina-art summary { cursor: pointer; font-weight: 500; color: var(--blau); }
.doctrina-art ul { list-style: none; padding: 0; margin: .5rem 0 0; }
.doctrina-art li { padding: .45rem 0; border-top: 1px solid var(--vora); }
.doctrina-art a { color: var(--text); font-weight: 400; }
.etiq.auto { background: #f3f0ff; color: #5b21b6; }
.peu-auto { font-size: 12px; margin: .4rem 0 0; }
.peu-unitat .origen { opacity: .7; }

/* pàgina d'avís */
.avis-cap { max-width: 860px; margin: .5rem 0 2rem; }
.avis-cap .entradeta { color: var(--suau); font-size: 17px; }
.resum { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--vora);
  border: 1px solid var(--vora); margin-bottom: 2.8rem; }
.resum-item { background: var(--navy); color: #f9fafb; padding: 1.4rem 1.3rem 1.5rem; }
.resum-n { font: 300 1.9rem/1 var(--serif); color: var(--blau-clar); }
.resum-item h3 { color: #f9fafb; font-size: 1.15rem; margin: .7rem 0 .4rem; }
.resum-item p { color: var(--sobre-fosc); font-size: 14px; margin: 0; }
.avis-graella { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.avis-index { position: sticky; top: 1rem; background: var(--blanc); border: 1px solid var(--vora); padding: 1rem 1.1rem; font-size: 13px; }
.avis-index ol { margin: .6rem 0 0; padding-left: 1.2rem; }
.avis-index li { margin: .25rem 0; }
.avis-index a { color: var(--text); text-decoration: none; }
.avis-index a:hover { color: var(--blau); }
.avis-text { background: var(--blanc); border: 1px solid var(--vora); padding: .5rem 2.2rem 2rem; max-width: 900px; }
.avis-text section { padding: 1.4rem 0; border-bottom: 1px solid #f0f1f3; scroll-margin-top: 1rem; }
.avis-text section:last-child { border-bottom: 0; }
.avis-text h2 { margin: 0 0 .8rem; display: flex; align-items: baseline; gap: .7rem; }
.avis-text h2 span { font: 600 11px var(--sans); letter-spacing: .12em; color: var(--blau); border: 1px solid var(--blau);
  border-radius: 2px; padding: .15rem .4rem; }
.avis-text ul, .avis-text ol { padding-left: 1.2rem; }
.avis-text li { margin: .45rem 0; }
.destacat { background: var(--blau-fons); border-left: 3px solid var(--blau); padding: .9rem 1.1rem; margin-bottom: 1rem; }
.destacat p { margin: 0; }
.passos li::marker { color: var(--blau); font-weight: 600; }
.xifres-avis { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.xifres-avis li { border-top: 2px solid var(--blau); padding-top: .6rem; margin: 0; }
.xifres-avis b { display: block; font: 300 2rem/1.1 var(--serif); color: var(--navy); }
.xifres-avis span { font-size: 13px; color: var(--suau); }
.cita { margin: .8rem 0; padding: .8rem 1.1rem; background: var(--fons); border-left: 3px solid var(--navy); font: 300 15px/1.6 var(--serif); }
.titular { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0 0 1rem; }
.titular dt { font: 600 11px/1.9 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--suau); }
.titular dd { margin: 0; }
@media (max-width: 860px) {
  .avis-graella { grid-template-columns: minmax(0, 1fr); }
  .avis-index { position: static; }
  .avis-text { padding: .3rem 1.1rem 1.2rem; }
}

/* millores d'octubre 2026: article, índex, comparador, verificador, matèries */
.unitat { position: relative; }
.permalink { position: absolute; right: 0; top: 1rem; font-size: 11px; letter-spacing: .06em; text-decoration: none; color: var(--suau); }
.permalink:hover { color: var(--blau); }
.cerca-llei input { width: 100%; font: 300 13px var(--sans); padding: .45rem .55rem; border: 1px solid var(--vora); border-radius: 2px; }
.cerca-llei { margin-bottom: .3rem; }
.ix-eines { font-size: 11px; margin: .2rem 0 .5rem; }
.ix-eines a { color: var(--suau); }
.ix-grup summary { cursor: pointer; font-size: 11px; color: var(--suau); letter-spacing: .03em; margin-top: .45rem; }
.ix-titol { font-size: 11px; color: var(--navy); font-weight: 500; margin-top: .8rem; letter-spacing: .04em; }
.index li { display: flex; gap: .3rem; align-items: baseline; }
.index li a { flex: 1; }
.comptador { font: 500 10px/1.4 var(--sans); background: var(--blau-fons); color: var(--blau); padding: 0 .3rem; border-radius: 2px; white-space: nowrap; }
.comptador.doc { background: #fff4e0; color: var(--propi); }
.llegenda { font-size: 11px; margin-top: .6rem; }
.molla { font-size: 14px; }
.article-graella { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 2.5rem; align-items: start; }
.article-cos { background: var(--blanc); border: 1px solid var(--vora); padding: 1.6rem 2rem; }
.article-cos h1 em { font-size: .8em; }
.historial { position: sticky; top: 1rem; background: var(--blanc); border: 1px solid var(--vora); padding: 1.1rem 1.2rem; font-size: 13px; }
.hist { list-style: none; padding: 0; margin: .6rem 0 1rem; border-left: 2px solid var(--vora); }
.hist li { padding: .35rem 0 .45rem .8rem; position: relative; }
.hist li::before { content: ""; position: absolute; left: -6px; top: .75rem; width: 10px; height: 10px; border-radius: 50%; background: var(--vora); }
.hist li.mostrada::before { background: var(--blau); }
.hist li.mostrada > a { font-weight: 600; }
.hist li.derog > a { color: var(--derog); }
.compara-form { display: flex; flex-direction: column; gap: .45rem; border-top: 1px solid var(--vora); padding-top: .9rem; }
.compara-form.fila { flex-direction: row; flex-wrap: wrap; align-items: center; border: 0; padding: 0; margin: .5rem 0 1.2rem; }
.compara-form select { font: 300 13px var(--sans); padding: .35rem; border: 1px solid var(--vora); border-radius: 2px; }
.compara-form .boto, .cita-botons .boto, .verificador .boto { padding: .7rem 1rem; }
.boto-sec { background: var(--blanc); color: var(--blau); border: 1px solid var(--blau); }
.boto-sec:hover { background: var(--blau-fons); color: var(--blau-2); }
.cita-caixa { background: var(--blau-fons); border-left: 3px solid var(--blau); padding: 1rem 1.2rem; margin: 1.4rem 0; }
.cita-caixa #cita { font: 300 1.02rem/1.5 var(--serif); margin: .4rem 0 .7rem; }
.cita-botons { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cita-caixa code { overflow-wrap: anywhere; }
.veins { display: flex; justify-content: space-between; margin: 1rem 0; font-size: 14px; }
.compara-cap { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; font-size: 14px; }
.compara-cap > div { background: var(--blanc); border: 1px solid var(--vora); padding: .8rem 1rem; }
.diff { background: var(--blanc); border: 1px solid var(--vora); padding: 1.3rem 1.5rem; }
ins.dif { background: #dcfce7; color: #14532d; text-decoration: none; border-bottom: 1px solid #16a34a; }
del.dif { background: #fee2e2; color: #7f1d1d; }
.privacitat { background: var(--avis); border: 1px solid var(--avis-vora); padding: .8rem 1rem; font-size: 14px; margin: 1rem 0; }
.verificador textarea { width: 100%; font: 300 14px/1.5 var(--sans); padding: .7rem; border: 1px solid var(--vora); border-radius: 2px; margin: .3rem 0 .6rem; }
.verificador .fila { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; font-size: 14px; }
.verificador input[type=date] { font: 300 14px var(--sans); padding: .45rem .5rem; border: 1px solid var(--vora); border-radius: 2px; }
table.verif { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--blanc); margin: .8rem 0; }
.verif th { text-align: left; font: 600 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--suau); padding: .6rem; border-bottom: 2px solid var(--vora); }
.verif td { padding: .6rem; border-bottom: 1px solid var(--vora); vertical-align: top; }
.verif ul.canvis { margin: .3rem 0; padding-left: 1.1rem; }
.estat-verif { font: 500 11px var(--sans); padding: .1rem .45rem; border-radius: 2px; white-space: nowrap; background: #f3f4f6; }
.e-modificat .estat-verif { background: #fff4e0; color: var(--propi); }
.e-derogat .estat-verif { background: #fee2e2; color: var(--derog); }
.e-igual .estat-verif, .e-vigent .estat-verif { background: #dcfce7; color: var(--vigent); }
.materies { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.materia { display: flex; flex-direction: column; gap: .35rem; background: var(--blanc); border: 1px solid var(--vora); border-top: 3px solid var(--blau);
  padding: 1rem 1.1rem; text-decoration: none; color: var(--text); font-size: 14px; }
.materia b { font: 400 1.15rem var(--serif); color: var(--navy); }
.materia:hover { border-color: var(--blau); color: var(--text); }
.materies-menu { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.materies-menu a { font-size: 12px; padding: .3rem .6rem; border: 1px solid var(--vora); text-decoration: none; color: var(--text); background: var(--blanc); }
.materies-menu a.actiu { background: var(--navy); color: #fff; border-color: var(--navy); }
.llista.capcalera a { font-weight: 500; }
.eina-destacada { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--blanc); border: 1px solid var(--vora);
  border-left: 3px solid var(--blau); padding: 1rem 1.2rem; margin: 0 0 2rem; }
.beta-mini { font: 600 9px var(--sans); letter-spacing: .15em; text-transform: uppercase; background: var(--blau); color: #fff; padding: .05rem .35rem; }
@media (max-width: 860px) {
  .article-graella { grid-template-columns: minmax(0, 1fr); }
  .historial { position: static; }
  .article-cos { padding: 1.1rem 1rem; }
  .compara-cap { grid-template-columns: 1fr; }
  .verif thead { display: none; }
  .verif td { display: block; border: 0; padding: .3rem .6rem; }
  .verif tr { display: block; border-bottom: 1px solid var(--vora); padding: .4rem 0; }
  .eina-destacada { flex-direction: column; align-items: flex-start; }
}
.e-revisar .estat-verif { background: var(--blau-fons); color: var(--blau); }
.avis-base { font-size: 12px; margin-top: .3rem; }