@font-face { font-family: "Archivo"; src: url("fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Hanken"; src: url("fonts/hanken-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken"; src: url("fonts/hanken-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Hanken"; src: url("fonts/hanken-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --nit: #0f1216;
  --tauler: #080a0d;
  --placa: #1a1e25;
  --placa-2: #22272f;
  --linia: #262b33;
  --blanc: #f1efe9;
  --suau: #c4c1b9;
  --gris: #8e9198;
  --verd: #35d07f;
  --verd-fosc: #27b56b;
  --marge: clamp(20px, 5vw, 72px);
  --cel: clamp(22px, 2.85vw, 44px);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { background: var(--nit); color: var(--blanc); font: 400 1.125rem/1.55 "Hanken", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: var(--verd); color: var(--nit); }
::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: var(--tauler); } ::-webkit-scrollbar-thumb { background: var(--placa-2); border-radius: 6px; border: 3px solid var(--tauler); }
html { scrollbar-color: var(--placa-2) var(--tauler); }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--verd); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: "Archivo", sans-serif; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }

.saltar { position: absolute; left: -999px; top: 12px; background: var(--verd); color: var(--nit); padding: 10px 16px; border-radius: 6px; z-index: 20; font-weight: 700; }
.saltar:focus { left: 12px; }

/* Navegació */
.nav { display: flex; align-items: center; gap: 36px; padding: 22px var(--marge); }
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.marca .placa { width: 40px; height: 40px; flex: none; }
.marca span { font-family: "Archivo"; font-weight: 800; font-stretch: 118%; font-size: 1.85rem; letter-spacing: -0.045em; line-height: 1; }
.nav nav { display: flex; gap: 28px; }
.nav nav a { color: var(--suau); text-decoration: none; font-weight: 500; }
.nav nav a:hover { color: var(--blanc); text-decoration: underline; }

.boto { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--verd); color: var(--nit); font: 700 1.125rem/1 "Hanken", sans-serif; padding: 18px 26px; border-radius: 8px; text-decoration: none; transition: background-color .2s cubic-bezier(.2,.8,.2,1), transform .2s cubic-bezier(.2,.8,.2,1); }
.boto:hover { background: #4ade91; }
.boto:active { transform: translateY(1px); }
.boto-petit { font-size: 1rem; padding: 13px 18px; }
.sota-boto { color: var(--gris); font-size: 0.95rem; margin-top: 12px; }
.sota-boto a { color: var(--suau); }

/* Portada */
.portada { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: clamp(32px, 4.5vw, 72px); align-items: start; padding: clamp(24px, 4vw, 48px) var(--marge) clamp(56px, 7vw, 96px); }
h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.02; font-stretch: 104%; }
.entradeta { font-size: clamp(1.1rem, 1.35vw, 1.3rem); color: var(--suau); margin: 22px 0 26px; max-width: 34ch; }
.correu { background: var(--placa); border: 1px solid var(--linia); border-radius: 10px; padding: 16px 18px 18px; margin-bottom: 26px; max-width: 460px; }
.correu figcaption { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); font-weight: 700; margin-bottom: 8px; }
.correu-assumpte { font-weight: 700; }
.correu-cos { color: var(--suau); font-size: 1rem; margin-top: 4px; }

/* Tauler de sortides */
.tauler { background: var(--tauler); border-radius: 14px; padding: clamp(18px, 2vw, 30px); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.tauler-cap { display: flex; justify-content: space-between; align-items: center; color: var(--gris); font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.etiqueta { border: 1px solid var(--verd); color: var(--verd); padding: 4px 10px; border-radius: 4px; }
.tauler { container-type: inline-size; }
.files { display: flex; flex-direction: column; gap: 10px; --cel: min(46px, calc((100cqi - 7.5rem - 12px - 44px) / 12)); }
.fila { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: 12px; }
.fila dt { color: var(--gris); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
.caselles { display: flex; gap: 4px; }
.cel { width: var(--cel); height: calc(var(--cel) * 1.36); border-radius: 4px; background: linear-gradient(180deg, var(--placa-2) 0 50%, var(--placa) 50% 100%); display: grid; place-items: center; font-family: "Archivo"; font-weight: 700; font-stretch: 92%; font-size: calc(var(--cel) * 0.78); line-height: 1; color: var(--blanc); position: relative; font-variant-numeric: tabular-nums; flex: none; }
.cel::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--tauler); }
.cel.gira { animation: gira 70ms cubic-bezier(.4, 0, .6, 1); }
@keyframes gira { 0% { transform: scaleY(1); } 50% { transform: scaleY(0.12); filter: brightness(1.6); } 100% { transform: scaleY(1); } }
.fila-ok .cel, .caselles-ok .cel { color: var(--verd); }
.tauler-peu { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linia); }
.tauler-peu p { color: var(--gris); font-size: 0.95rem; }
.exemples { display: flex; gap: 6px; flex-wrap: wrap; }
.exemples button { font: 600 0.9rem/1 "Hanken", sans-serif; color: var(--suau); background: transparent; border: 1px solid var(--linia); border-radius: 999px; padding: 9px 14px; cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.exemples button:hover { border-color: var(--gris); color: var(--blanc); }
.exemples button[aria-checked="true"] { background: var(--blanc); color: var(--nit); border-color: var(--blanc); }

/* Seccions */
.seccio { padding: clamp(64px, 9vw, 128px) var(--marge); border-top: 1px solid var(--linia); }
h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.05; font-stretch: 104%; margin-bottom: clamp(28px, 4vw, 52px); max-width: 22ch; }
h3 { font-size: 1.3rem; line-height: 1.2; font-stretch: 100%; letter-spacing: -0.015em; margin-bottom: 8px; }
.seccio p { color: var(--suau); }

.viatge { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--blanc); }
.viatge li { padding: 22px 24px 0 0; position: relative; }
.viatge li + li { padding-left: 24px; border-left: 1px solid var(--linia); }
.parada { display: inline-block; font-family: "Archivo"; font-weight: 700; font-stretch: 92%; font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; background: var(--placa); color: var(--verd); padding: 7px 10px; border-radius: 4px; margin-bottom: 18px; }
.viatge p { max-width: 32ch; }

.tarifa { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); }
.tarifa-text h2 { margin-bottom: 24px; }
.tarifa-text p { font-size: 1.2rem; max-width: 38ch; }
.garanties { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 36px 40px; }
.garanties li { padding-top: 18px; border-top: 1px solid var(--linia); }

.prova { background: var(--tauler); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.prova-titol { display: flex; flex-direction: column; gap: 8px; margin: 0; max-width: none; --cel: clamp(20px, 2.6vw, 42px); }
.prova-text p { font-size: 1.15rem; max-width: 42ch; }
.passos { margin: 24px 0 30px; padding-left: 1.3em; color: var(--blanc); display: flex; flex-direction: column; gap: 10px; }
.passos li::marker { color: var(--verd); font-family: "Archivo"; font-weight: 700; }

.quien-cols { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); }
.quien-cols > p { font-size: 1.2rem; max-width: 40ch; }
.quien-cols strong { color: var(--blanc); }
.preguntes { display: flex; flex-direction: column; gap: 22px; }
.preguntes div { padding-top: 16px; border-top: 1px solid var(--linia); }
.preguntes dt { font-family: "Archivo"; font-weight: 700; font-size: 1.15rem; margin-bottom: 4px; }
.preguntes dd { color: var(--suau); }

.peu { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 32px var(--marge) 40px; border-top: 1px solid var(--linia); color: var(--gris); font-size: 0.95rem; }
.peu-marca { font-family: "Archivo"; font-weight: 800; font-stretch: 118%; font-size: 1.3rem; letter-spacing: -0.045em; color: var(--blanc); margin-right: auto; }
.peu a { color: var(--suau); }

/* Pantalles mitjanes */
@media (max-width: 1100px) {
  .portada { grid-template-columns: 1fr; }
  .entradeta { max-width: 46ch; }
  .viatge { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .viatge li:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* Mòbil */
@media (max-width: 760px) {
  body { font-size: 1.0625rem; }
  .nav { gap: 16px; padding-top: 16px; padding-bottom: 16px; }
  .nav nav { display: none; }
  .marca .placa { width: 34px; height: 34px; }
  .marca span { font-size: 1.55rem; }
  .tauler { padding: 18px; }
  .files { --cel: calc((100cqi - 33px) / 12); }
  .caselles { gap: 3px; }
  .fila { grid-template-columns: 1fr; gap: 6px; }
  .tauler-peu { flex-direction: column; align-items: flex-start; }
  .viatge, .garanties, .tarifa, .prova, .quien-cols { grid-template-columns: 1fr; }
  .viatge li, .viatge li + li { padding: 20px 0 0; border-left: 0; }
  .viatge { row-gap: 28px; }
  .prova-titol { --cel: calc((100vw - 2 * var(--marge) - 12 * 3px) / 13); }
  .boto { width: 100%; }
  .nav .boto { width: auto; }
  .portada-text { display: contents; }
  .portada h1 { order: 1; } .entradeta { order: 2; margin-bottom: 4px; } .tauler { order: 3; } .portada .boto { order: 4; } .portada .sota-boto { order: 5; margin-top: -16px; } .correu { order: 6; margin: 8px 0 0; }
  .portada { gap: 24px; }
  .peu-marca { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cel.gira { animation: none; }
  .boto { transition: none; }
}