@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lexend-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-black-latin-400-normal.woff2') format('woff2');
}

/* Estil de juliol. --coral-fosc i --vora són variants per a complir el contrast AA. */
:root {
  --ink: #14324E;
  --mar: #0F5FA8;
  --teal: #0D8F8C;
  --sand: #F7F0E1;
  --coral: #D9481F;
  --coral-fosc: #B23B16;
  --coral-clar: #FBE4DB;
  --vora: #8A7A5C;
  --blanc: #fff;
  --cap-fons: #14324E;
  --cap-text: #F7F0E1;
  --linia: #e6dcc6;
  --destacat: #FFE9A8;
  --mapa-fons: #dfe8ee;
  --xifres: 'Archivo Black', 'Arial Black', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font: 1rem/1.5 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overflow-wrap: break-word;
}

a { color: var(--mar); text-underline-offset: 2px; }
h1 { font: 1.5rem/1.2 var(--xifres); margin: .875rem 0 .375rem; }
h2 { font-size: 1.125rem; margin: 1.25rem 0 .5rem; }
p { margin: .5rem 0; }

:focus { outline: 3px solid var(--coral); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
h1:focus, main:focus, .targeta:focus { outline-offset: 4px; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.pagina { max-width: 46rem; margin: 0 auto; padding: 0 1rem; }

.salta {
  position: absolute; left: .5rem; top: -5rem; z-index: 1000;
  padding: .75rem 1rem; border-radius: 8px;
  background: var(--blanc); color: var(--mar);
}
.salta:focus { top: .5rem; }

/* Capçalera i idiomes */
.capcalera { background: var(--cap-fons); color: var(--cap-text); }
.capcalera-dins {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem; padding-top: .5rem; padding-bottom: .5rem;
}
.marca {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-right: auto;
  font: 1rem/1.2 var(--xifres); color: var(--cap-text); text-decoration: none;
}
.icona-bus { flex: 0 0 auto; display: block; }
.eines-cap { display: flex; align-items: center; gap: .375rem; margin-left: auto; }
.boto-icona {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 2px solid var(--cap-text); border-radius: 12px; background: transparent; color: var(--cap-text);
  font: 1rem/1 var(--xifres); cursor: pointer;
}
.boto-icona[aria-pressed="true"] { background: var(--cap-text); color: var(--cap-fons); }
.icona-text { font-size: .75rem; }
.icona-text span { font-size: 1.125rem; }
.icona-sol, html.fosc .icona-lluna { display: none; }
html.fosc .icona-sol { display: block; }
.marca-lloc { font-family: 'Lexend', sans-serif; }
.ajustos { display: flex; gap: .375rem; }
.ajustos-boto { display: none; }
.etq-mode { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Pantalles estretes: títol en dues línies i contrast, text gran i fosc dins del menú «Aa». */
@media (max-width: 36rem) {
  .capcalera-dins { flex-wrap: nowrap; }
  .marca { min-width: 0; font-size: .875rem; }
  .idioma-boto { gap: .3rem; padding: 0 .4rem; }
  .capcalera-dins { gap: .375rem; }
  .eines-cap { gap: .3rem; }
  .marca-textos { display: flex; flex-direction: column; }
  .eines-cap { flex: 0 0 auto; }
  .codi-idioma { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .marca-lloc { font-size: .8125rem; }
  .eines-cap { position: relative; }
  .ajustos-boto { display: inline-flex; gap: 2px; width: auto; padding: 0 .3rem; font: .75rem/1 var(--xifres); }
  .ajustos-boto svg { width: 16px; height: 16px; }
  .ajustos-boto[aria-expanded="true"] { background: var(--cap-text); color: var(--cap-fons); }
  .ajustos {
    position: absolute; right: 0; top: calc(100% + .375rem); z-index: 1100;
    flex-direction: column; min-width: 13rem; padding: .375rem;
    background: var(--cap-fons); border: 1px solid var(--vora); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  }
  .ajustos:not(.obert) { display: none; }
  .ajustos .boto-icona { width: 100%; justify-content: flex-start; gap: .75rem; padding: 0 .75rem; border: 0; border-radius: 8px; font: inherit; font-weight: 700; }
  .ajustos .boto-icona:hover { background: rgba(127, 127, 127, .3); }
  .ajustos .etq-mode { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
}
.idiomes { position: relative; }
.idioma-boto {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .75rem;
  border: 2px solid var(--cap-text); border-radius: 12px;
  background: transparent; color: var(--cap-text); font: inherit; font-weight: 700; cursor: pointer;
}
#idioma-actual { display: inline-flex; align-items: center; gap: .5rem; }
.idioma-menu {
  position: absolute; right: 0; top: calc(100% + .375rem); z-index: 1100;
  min-width: 12rem; margin: 0; padding: .375rem; list-style: none;
  background: var(--cap-fons); border: 1px solid var(--vora); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.idioma-menu button {
  display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 44px; padding: .375rem .75rem;
  border: 0; border-radius: 8px; background: transparent; color: var(--cap-text);
  font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
.idioma-menu button[aria-current="true"], .idioma-menu button:hover { background: rgba(127, 127, 127, .3); }
.bandera { flex: 0 0 auto; display: block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(127, 127, 127, .6); }

/* Bàner fix del servei temporal */
.banner { background: var(--coral-clar); border-bottom: 4px solid var(--coral); padding: .125rem 0; font-size: .9375rem; line-height: 1.4; }
.banner p { margin: .375rem 0; }

/* Avisos */
.avis {
  background: var(--coral-clar); border-left: 6px solid var(--coral-fosc);
  border-radius: 8px; padding: .5rem .75rem; margin: .75rem 0;
}
.avis-oficial { background: var(--blanc); border-left: 6px solid var(--mar); border-radius: 8px; padding: .375rem .75rem; margin: .625rem 0; font-size: .9375rem; line-height: 1.4; }
.nova-versio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.nota { font-size: .9375rem; }
.destacat { font-weight: 700; }

/* Navegació */
.navegacio ul {
  list-style: none; margin: .75rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .375rem;
}
/* Cinc pestanyes: 3 + 2 en el mòbil i totes en una fila, a tot l'ample, en pantalles grans. */
.navegacio ul { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.navegacio li { grid-column: span 2; }
.navegacio li:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 20rem) { .navegacio ul { grid-template-columns: minmax(0, 1fr); } .navegacio li, .navegacio li:nth-child(n+4) { grid-column: auto; } }
@media (min-width: 40rem) { .navegacio ul { grid-template-columns: repeat(5, minmax(0, 1fr)); } .navegacio li, .navegacio li:nth-child(n+4) { grid-column: auto; } }
.navegacio a {
  display: flex; align-items: center; justify-content: center; min-height: 44px; height: 100%;
  padding: .25rem .5rem; border: 2px solid var(--mar); border-radius: 12px;
  background: var(--blanc); color: var(--mar); text-decoration: none; text-align: center; font-size: .9375rem; line-height: 1.25;
}
.navegacio a[aria-current="page"] { background: var(--mar); color: var(--blanc); }

main { padding-bottom: 2rem; }
main:focus { outline: none; }

/* Botons i camps */
.boto {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .5rem 1rem;
  border: 2px solid var(--mar); border-radius: 12px;
  background: var(--blanc); color: var(--mar);
  font: inherit; cursor: pointer;
}
.boto-principal { width: 100%; background: var(--mar); color: var(--blanc); font-size: 1.0625rem; }
label { display: block; margin: 1rem 0 .25rem; font-weight: 700; }
input[type="search"], select {
  display: block; width: 100%; min-height: 48px; padding: .5rem .75rem;
  border: 2px solid var(--vora); border-radius: 10px;
  background: var(--blanc); color: var(--ink); font: inherit;
}

/* Targeta del pròxim bus */
.targeta {
  background: var(--blanc); border: 1px solid var(--vora); border-radius: 16px;
  padding: 1rem 1.25rem; margin: .75rem 0 1rem;
}
.proper-parada { margin: 0; font-weight: 700; }
.proper-falten { margin: .75rem 0 0; font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase; }
.proper-compte { margin: 0; font: clamp(3rem, 16vw, 5.5rem)/1.05 var(--xifres); }
.proper-hora { margin: .25rem 0 .5rem; font: clamp(1.5rem, 7vw, 2.25rem)/1.15 var(--xifres); color: var(--mar); }
.proper-seguents ul { list-style: none; display: inline-flex; flex-wrap: wrap; gap: .25rem .75rem; margin: 0; padding: 0; }
.proper-seguents li { font-weight: 700; }

/* Sentit, altra vorera i peu */
.sentit-etiqueta {
  display: inline-block; margin: .375rem 0 0; padding: .125rem .625rem;
  border: 2px solid var(--mar); border-radius: 999px; color: var(--mar); font-weight: 700; font-size: .9375rem;
}
.vorera {
  display: flex; align-items: flex-start; gap: .75rem; margin: 0 0 1rem; padding: .75rem 1rem;
  background: var(--blanc); border: 2px dashed var(--vora); border-radius: 16px;
}
.vorera p { margin: .25rem 0; }
.vorera .sentit-etiqueta { margin: 0; }
.vorera-num {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 2.25rem; border-radius: 1.125rem; background: var(--mar); color: var(--blanc); font: .875rem/1 var(--xifres);
}
.peu {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .75rem;
  margin-top: 1rem; padding: .5rem 0 2rem; border-top: 1px solid var(--vora); font-size: .875rem;
}
.peu a, .enllac { display: inline-flex; align-items: center; min-height: 44px; }
.enllac { padding: 0; border: 0; background: none; color: var(--mar); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* Favorites, compartir i visualització */
.accions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.accions .boto { flex: 1 1 auto; }
#boto-favorita svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
#boto-favorita[aria-pressed="true"], .modes .boto[aria-pressed="true"] { background: var(--mar); color: var(--blanc); }
#boto-favorita[aria-pressed="true"] svg { fill: currentColor; }
.modes { display: flex; flex-wrap: wrap; gap: .5rem; }

html.text-gran { font-size: 125%; }

/* Mode fosc: per defecte segueix el sistema; el botó de «Visualització» el força (fosc/clar). */
@media screen and (prefers-color-scheme: dark) {
  html:not(.clar) {
  --ink: #EDE6D6; --sand: #0E1A26; --blanc: #172A3D; --mar: #8CC4FF; --teal: #3CC2BE;
  --coral: #FF8A65; --coral-fosc: #FF9E80; --coral-clar: #3B231C; --vora: #7D8FA3;
  --cap-fons: #08121C; --cap-text: #EDE6D6; --linia: #2B4157; --destacat: #4A3D10; --mapa-fons: #1D2F40;
  color-scheme: dark;
  }
}
@media screen {
  html.fosc {
  --ink: #EDE6D6; --sand: #0E1A26; --blanc: #172A3D; --mar: #8CC4FF; --teal: #3CC2BE;
  --coral: #FF8A65; --coral-fosc: #FF9E80; --coral-clar: #3B231C; --vora: #7D8FA3;
  --cap-fons: #08121C; --cap-text: #EDE6D6; --linia: #2B4157; --destacat: #4A3D10; --mapa-fons: #1D2F40;
  color-scheme: dark;
  }
  html.fosc .leaflet-popup-content-wrapper, html.fosc .leaflet-popup-tip,
  html.fosc .mapa .leaflet-control-attribution { background: var(--blanc); color: var(--ink); }
}

html.alt-contrast {
  --ink: #000; --sand: #fff; --blanc: #fff; --mar: #002B66; --teal: #00534F;
  --coral: #8A1C00; --coral-fosc: #8A1C00; --coral-clar: #fff; --vora: #000;
  --cap-fons: #000; --cap-text: #fff; --linia: #000; --destacat: #fff; --mapa-fons: #dfe8ee;
  color-scheme: light;
}
html.alt-contrast .targeta, html.alt-contrast .avis, html.alt-contrast .avis-oficial { border: 3px solid #000; }
html.alt-contrast a { text-decoration-thickness: 2px; }
html.alt-contrast .horari tr.proxima td { background: #000; color: #fff; }
html.alt-contrast .horari tr.proxima .etiqueta { background: #fff; color: #000; }
html.alt-contrast :focus { outline: 4px solid #FFD400; box-shadow: 0 0 0 7px #000; }

/* Llistes de parades */
.llista-parades { list-style: none; margin: .5rem 0; padding: 0; }
.llista-parades li + li { margin-top: .375rem; }
.parada {
  display: flex; align-items: flex-start; gap: .75rem;
  width: 100%; min-height: 48px; padding: .5rem .75rem;
  border: 2px solid var(--vora); border-radius: 12px;
  background: var(--blanc); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.parada[aria-current="true"] { border-color: var(--coral-fosc); box-shadow: inset 0 0 0 2px var(--coral-fosc); }
.parada .num {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; border-radius: 1rem;
  background: var(--mar); color: var(--blanc); font: .875rem/1 var(--xifres);
}
.parada > span:last-child { min-width: 0; word-break: break-word; overflow-wrap: anywhere; }
.parada .detall { display: block; font-size: .875rem; }
.triador { margin: 1rem 0; }
.triador summary {
  display: flex; align-items: center; min-height: 48px; padding: .5rem .75rem;
  border: 2px solid var(--mar); border-radius: 12px; background: var(--blanc); color: var(--mar);
  cursor: pointer;
}

/* On vols anar? */
.anar-pas { font-weight: 700; }

/* Horari */
.taules { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 40rem) { .taules { grid-template-columns: 1fr 1fr; align-items: start; } }
table.horari { width: 100%; border-collapse: collapse; background: var(--blanc); border: 1px solid var(--vora); }
.horari caption { text-align: left; font-weight: 700; padding: .25rem 0 .5rem; }
.horari th, .horari td { padding: .5rem .75rem; text-align: left; border-bottom: 1px solid var(--linia); }
.horari tr.proxima td { background: var(--destacat); font-weight: 700; }
.etiqueta {
  display: inline-block; padding: 0 .5rem; border-radius: 999px;
  background: var(--coral-fosc); color: var(--blanc); font-size: .8125rem; font-weight: 400;
}

/* Mapa */
.mapa { height: 65vh; min-height: 20rem; border: 1px solid var(--vora); border-radius: 12px; background: var(--mapa-fons); }
.mapa .leaflet-control-attribution a { color: var(--mar); }
.marcador span {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border: 3px solid var(--blanc); border-radius: 22px;
  background: var(--mar); color: var(--blanc); font: .8125rem/1 var(--xifres);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.marcador.sel span { background: var(--coral-fosc); }
.leaflet-popup-content { font: .9375rem/1.4 'Lexend', sans-serif; }

/* Diagrama de la línia */
.diagrama { list-style: none; margin: 1rem 0; padding: 0; }
.linia-fila { display: flex; align-items: stretch; min-height: 3.5rem; }
.linia-tras { position: relative; flex: 0 0 3rem; }
.linia-tras svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
.linia-tras line { stroke: var(--teal); stroke-width: 6; }
.linia-tras circle { fill: var(--blanc); stroke: var(--teal); stroke-width: 4; }
.linia-tras text { fill: var(--ink); font: 14px var(--xifres); }
.linia-fila.sel circle { fill: var(--coral-fosc); stroke: var(--coral-fosc); }
.linia-fila.sel text { fill: var(--blanc); }
.linia-text { align-self: center; min-width: 0; padding: .25rem 0 .25rem .5rem; word-break: break-word; overflow-wrap: anywhere; }
.linia-text .parada { display: inline; width: auto; min-height: 44px; padding: .5rem .25rem; border: 0; background: none; text-decoration: underline; color: var(--mar); }
.linia-text .parada[aria-current="true"] { box-shadow: none; font-weight: 700; }
.linia-min, .linia-nota { display: block; font-size: .875rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}