/* ==========================================================================
   Benidorm Bus — sistema de diseño
   --------------------------------------------------------------------------
   Identidad SACADA DEL LOGO, no inventada: azul de Benidorm y oro de sol y
   arena, con el marino del atardecer como tinta y como fondo oscuro. Los
   valores están muestreados del propio fichero de marca, no elegidos a ojo
   (ver /var/www/benidormbus.com/marca/LEEME.md).

   HISTORIA, PARA NO REPETIR EL LÍO. Este fichero venía de
   autobusescastellon.com con su paleta —mar mediterráneo y terracota de la
   cerámica de l'Alcora, con trama de azulejo valenciano en el hero—, y encima
   se le había pegado AL FINAL un segundo bloque :root entero bajo el rótulo
   "IDENTIDAD DE BENIDORM BUS" que la redefinía. Había, por tanto, dos paletas
   completas compitiendo, y la que mandaba era la de abajo por ser la última:
   leer la de arriba daba números que no se parecían a lo que se veía en
   pantalla. El 5-sep-2026 se fundieron en ésta, que es la única. **Si vuelve a
   hacer falta cambiar un color, se cambia AQUÍ**; no se añade otro bloque al
   final.

   Móvil primero: la mayoría de las consultas se hacen de pie en la parada, con
   prisa y a pleno sol, así que manda el contraste y el tamaño de las cifras.

   Tipografías autoalojadas (SIL OFL): Bricolage Grotesque para titulares,
   Inter para interfaz y horarios (tiene cifras tabulares) y Poppins solo para
   el wordmark de la cabecera, que es como está dibujado en el logo. No se
   cargan desde un CDN externo a propósito: enviaría la IP de cada visitante a
   un tercero y obligaría a pedir consentimiento.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  /* Solo para el wordmark de la cabecera. El logo lo tiene dibujado en una
     geométrica de este corte, y Bricolage no se le parece. Subset a latín
     básico: 6 KB, frente a los 150 del TTF completo. Peso 700 y tracking
     -.02em son los valores con los que coincide con el dibujo del logo
     (comparado contra el recorte, no elegido a ojo). */
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-marca-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2010-2015, U+2018-201D, U+2022, U+2026, U+20AC;
}
@font-face {
  font-family: 'Bricolage';
  src: url('/assets/fonts/bricolage-latin.woff2') format('woff2');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* --- Fichas de diseño ----------------------------------------------------- */
:root {
  /* Mar y cielo. Los tres tonos centrales son literalmente los del logo: el
     400 es el azul del «Bus» del wordmark, el 500 el del cielo sobre el mar y
     el 600 el azul profundo del agua. El 950 es el marino sobre el que está
     presentada toda la marca.

     El 500 es la ficha delicada, y conviene saber por qué antes de tocarla: es
     el extremo CLARO del degradado que llevan TODOS los rellenos con letra
     blanca del sitio (.btn, .tab.on, .qb-links a.on, .alpha-nav a:hover), o
     sea el punto donde la letra blanca se lee peor de toda la interfaz. Tiene
     que aguantar 4,5:1 con blanco él solo. El azul de marca (#008df1) NO puede
     ocupar ese puesto: da 3,45:1. Las dos paletas anteriores fallaban aquí
     (3,96:1 y 3,88:1). */
  --sea-950: #011733;
  --sea-900: #011f45;
  --sea-800: #012f6d;
  --sea-700: #013f8f;
  --sea-600: #004db1;
  --sea-500: #0070e8;   /* 4,68:1 sobre blanco */
  --sea-400: #008df1;   /* azul de marca; 5,19:1 sobre el fondo oscuro */
  --sea-300: #4fb0f6;
  --sea-200: #a5d5fb;
  --sea-100: #d6ebfd;
  --sea-50:  #eff7fe;

  /* Sol y arena. Conserva el nombre --clay-* de cuando era la cerámica de
     l'Alcora: renombrarlo obligaba a tocar medio fichero sin ganar nada.

     Va partida en dos usos, y ésa es LA lección de sacar una paleta de un
     logo: los tonos del logo (500 y 400) están elegidos para brillar sobre un
     fondo marino, y sobre blanco dan 1,9:1 y 1,6:1. Son inservibles como
     texto. Para eso están el 600 y el 700, oscurecidos hasta pasar AA sin
     dejar de ser el mismo oro. */
  --clay-700: #7a4a00;  /* texto sobre --clay-100 */
  --clay-600: #96590a;  /* 5,63:1 sobre blanco; es --accent en claro */
  --clay-500: #fdaa26;  /* ámbar del logo — relleno, nunca texto */
  --clay-400: #fdc536;  /* sol del logo — relleno, y --accent en oscuro */
  --clay-100: #fff1d3;

  /* Neutros: el gris puro deja la pantalla fría al sol, así que llevan matiz.
     Antes tiraba a pardo, por la terracota; ahora tira al marino del logo, que
     es de donde sale el resto de la paleta. */
  --ink:      #0b1c30;
  --ink-2:    #3a5068;
  /* Mismo matiz que el gris original, dos puntos más oscuro: con #6b8091 este
     tono se quedaba en 4,10:1 sobre blanco, por debajo del mínimo AA, y es
     justo el color del texto pequeño (etiquetas, "n servicios directos"). */
  --ink-3:    #5f7288;  /* 4,94:1: es el texto pequeño, y ya se quedó corto dos veces */
  --line:     #dde5ee;
  --line-2:   #edf2f8;
  --bg:       #ffffff;
  --bg-2:     #f5f9fd;
  --bg-3:     #eaf2fa;

  --ok:       #12704a;
  --ok-bg:    #e4f5ec;
  --warn-bd:  var(--clay-500);

  --brand:      var(--sea-600);
  --brand-ink:  var(--sea-800);
  --accent:     var(--clay-600);

  /* Extremos del degradado de las cifras grandes. Van en variables porque en
     oscuro hay que subirlos de tono: el punto medio entre el azul y el naranja
     es un pardo apagado que sobre el fondo oscuro casi no se lee. */
  --grad-a:     var(--sea-500);
  --grad-b:     var(--clay-500);

  --r-sm: 8px;
  /* Redondeado generoso: es una web de vacaciones, no de trámite. Venía del
     bloque de identidad que había al final del fichero; es geometría, así que
     se conserva con el mismo valor al fundir las paletas. */
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 26px;

  --sh-1: 0 1px 2px rgba(1, 31, 69, .06), 0 1px 3px rgba(1, 31, 69, .05);
  --sh-2: 0 4px 12px rgba(1, 31, 69, .07), 0 2px 4px rgba(1, 31, 69, .04);
  --sh-3: 0 18px 40px -12px rgba(1, 31, 69, .22), 0 6px 14px rgba(1, 31, 69, .07);

  --wrap: 1140px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Sin esto el navegador dibuja en claro lo que no controla la hoja de estilos:
     la lista desplegable de los <select> —el control principal de la portada—
     se abría en blanco sobre la página oscura, y el icono del calendario de los
     <input type=date> quedaba en gris oscuro sobre fondo oscuro. */
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* El fondo oscuro es #011733: el mismo marino sobre el que está presentado
       el logo. En oscuro, por tanto, la página ES la hoja de marca. */
    --ink:    #e7eef6;
    --ink-2:  #a7bdd2;
    --ink-3:  #7c94ac;
    --line:   #14304f;
    --line-2: #0c2440;
    --bg:     #011733;
    --bg-2:   #04213f;
    --bg-3:   #072b4e;

    --brand:     var(--sea-400);
    --brand-ink: var(--sea-200);
    --accent:    var(--clay-400);

    --grad-a:    var(--sea-400);
    --grad-b:    var(--clay-400);

    --ok:     #4ad6a0;
    --ok-bg:  #0c2f24;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-2: 0 4px 14px rgba(0, 0, 0, .45);
    --sh-3: 0 18px 42px -12px rgba(0, 0, 0, .7);
  }
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
@media (max-width: 560px) { .wrap { padding-inline: 16px; } }

h1, h2, h3, .display {
  font-family: 'Bricolage', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
/* Los titulares parten palabra si hace falta. No es un capricho: el nombre de
   una línea viene del feed y puede traer trozos larguísimos sin un solo espacio
   ni guion donde el navegador acepte cortar —«[Aqualandia/Mundomar]» mide 342 px
   a este tamaño de letra—. Sin esto, una sola línea de autobús mal rotulada le
   pone barra horizontal a toda la página en un móvil pequeño. */
h1, h2, h3 { overflow-wrap: anywhere; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); margin: 2.6rem 0 1rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--accent); }

:focus-visible {
  outline: 3px solid var(--sea-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.lead  { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); color: var(--ink-2); max-width: 64ch; }
.num   { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; left: -9999px; z-index: 999;
  background: var(--sea-800); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r) 0;
  font-weight: 600;
}
.skip:focus { left: 0; top: 0; }

/* --- Cabecera ------------------------------------------------------------ */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.head-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 59px; }

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); min-width: 0; }
.brand:hover { color: var(--ink); }
/* La marca es ahora el logo de verdad, no un autobús dibujado con <svg>. El
   contenedor ya no pinta fondo ni sombra: el propio icono trae su marco
   redondeado, y ponerle otro detrás dejaba un halo azul asomando por las
   esquinas. Las medidas van explícitas en el <img> para que la cabecera no dé
   un salto mientras carga. */
.brand-mark {
  display: block; width: 40px; height: 40px; flex: none;
}
.brand-mark img { display: block; width: 40px; height: 40px; }
.brand-text {
  font-family: 'Poppins', 'Bricolage', sans-serif; font-weight: 700;
  font-size: 1.16rem; letter-spacing: -.02em; line-height: 1.1;
}
/* El corte blanco/azul del wordmark. En claro «Benidorm» va en tinta oscura y
   no en blanco: sobre la cabecera clara desaparecería. */
.brand-text b { font-weight: 700; color: var(--sea-400); }
@media (prefers-color-scheme: dark) { .brand-text b { color: var(--sea-300); } }
.brand-text span { display: block; font-family: 'Inter', sans-serif; font-size: .68rem;
  font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.head-nav { display: flex; align-items: center; gap: 4px; flex: none; }
.head-nav a {
  padding: 8px 13px; border-radius: 9px; font-size: .92rem; font-weight: 500;
  white-space: nowrap;
  color: var(--ink-2); transition: background .15s var(--ease), color .15s var(--ease);
}
.head-nav a:hover { background: var(--bg-3); color: var(--ink); }

/* Conmutador de idioma. Va recuadrado y no como un enlace más porque no lleva
   a otra sección sino a la MISMA página en la otra lengua, y confundirlo con
   navegación hace que se pulse sin querer. Se queda visible en móvil: en zona
   valencianoparlante es de lo primero que se busca. */
/* Texto que no se ve pero que sigue existiendo para el lector de pantalla y
   para el rastreador. No se usa `display:none`: eso lo borraría también ahí. */
.vh {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; white-space: nowrap; clip-path: inset(50%);
}

.head-nav a.lang-switch {
  display: inline-flex; align-items: center;
  margin-left: 4px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink-3);
}
.head-nav a.lang-switch:hover { border-color: var(--brand); color: var(--brand); background: none; }

/* La bandera lleva su propio filete: sobre el papel claro los amarillos —la
   franja de la española, el fondo de la senyera— se derraman por el borde sin
   nada que los recorte. En el tema oscuro el filete no se ve, pero allí ese
   mismo amarillo ya contrasta de sobra. `flex: none` evita que la caja
   flexible estruje la bandera cuando la cabecera va justa de ancho. */
.flag {
  flex: none; display: block; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .22);
}
.site-foot a.lang-item { display: inline-flex; align-items: center; gap: 8px; }

/* En móvil la cabecera no cabe entera: la marca cede espacio antes que la
   navegación, que es lo único con lo que se puede llegar a otra sección.
   Primero se va el subtítulo, y en pantallas muy estrechas el nombre entero
   —el logotipo sigue siendo el enlace a la portada—. */
@media (max-width: 620px) {
  .head-inner { gap: 8px; min-height: 52px; }
  .head-nav a.hide-sm { display: none; }
  .head-nav { gap: 2px; }
  .head-nav a { padding: 7px 10px; font-size: .88rem; }
  .brand { gap: 9px; }
  .brand-mark, .brand-mark img { width: 34px; height: 34px; }
  .brand-text { font-size: 1rem; white-space: nowrap; }
  .brand-text span { display: none; }
  /* Sin rótulo la pastilla se queda en nada, y es un objetivo táctil: se le
     deja el mismo alto que a los enlaces vecinos en vez de encogerla. */
  .head-nav a.lang-switch { margin-left: 2px; padding: 9px 11px; }
}
/* El conmutador de idioma ocupa un sitio que antes no estaba, y con él la
   cabecera ya no cabe en un móvil estrecho: el nombre se montaba encima de la
   navegación. Se retira antes el texto de la marca —el logotipo sigue siendo
   el enlace a la portada— porque en zona bilingüe poder cambiar de lengua
   importa más que leer el nombre del sitio, que ya está en el título.
   Quitarle el rótulo VAL/CAS a la pastilla dio ~28 px, pero no bastan para
   bajar el umbral: a 426 px «AutobusesCastellón» ya toca «Municipios», que es
   la palabra más larga de la navegación. Se queda en 440. */
@media (max-width: 440px) {
  .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* --- Barra de acceso rápido a los municipios grandes --------------------- */
.quickbar {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.quickbar .wrap { display: flex; align-items: center; gap: 12px; padding-block: 9px; }
.qb-label {
  flex: none; font-size: .7rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
/* En móvil se desliza en horizontal en lugar de partirse en varias líneas:
   así la barra ocupa siempre el mismo alto y no empuja el contenido. El
   desvanecido del borde derecho es lo que delata que hay más municipios: sin
   él la barra parece terminar justo donde se corta la pantalla. */
.qb-links {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding-bottom: 1px;
  mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
}
/* A partir de aquí los diez municipios caben enteros y no hay nada que insinuar. */
@media (min-width: 1280px) { .qb-links { mask-image: none; -webkit-mask-image: none; } }
.qb-links::-webkit-scrollbar { display: none; }
.qb-links a {
  flex: none; padding: 6px 13px; border-radius: 999px;
  font-size: .84rem; font-weight: 500; white-space: nowrap;
  color: var(--ink-2); background: var(--bg); border: 1px solid var(--line);
  transition: all .15s var(--ease);
}
.qb-links a:hover {
  text-decoration: none; color: #fff; border-color: transparent;
  background: linear-gradient(160deg, var(--sea-500), var(--sea-700));
}
.qb-links a.on {
  color: #fff; border-color: transparent; font-weight: 600;
  background: linear-gradient(160deg, var(--sea-500), var(--sea-700));
}
.qb-links .qb-all { background: transparent; border-style: dashed; color: var(--brand); font-weight: 600; }
.qb-links .qb-all:hover { border-style: solid; }

/* --- Migas --------------------------------------------------------------- */
.crumbs { background: var(--bg-2); border-bottom: 1px solid var(--line); font-size: .82rem; }
.crumbs .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-block: 10px; }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--brand); }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }
.crumbs .sep { color: var(--ink-3); }

main { display: block; padding-bottom: 64px; }
.wrap > h1:first-child,
.wrap > .page-head:first-child,
.wrap > .prose:first-child { padding-top: clamp(24px, 4vw, 40px); }

/* --- Portada: hero ------------------------------------------------------- */
/* El hero es el atardecer del logo: del marino al azul, el sol arriba a la
   derecha —donde lo pone el propio icono— y abajo la silueta de las torres y
   las palmeras. Antes era el degradado de Castellón con una trama de azulejo
   valenciano encima; aquí eso no dice nada. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(168deg, var(--sea-950) 0%, var(--sea-800) 46%, var(--sea-600) 100%);
  color: #fff;
  padding: clamp(40px, 7vw, 84px) 0 0;
}
/* La silueta de Benidorm: rascacielos y palmeras, la misma lectura que el
   logo. Va anclada abajo y sin repetir en vertical, para que se lea como
   horizonte y no como papel pintado. A pantalla ancha se repite en
   horizontal, que es lo que hace la propia línea de costa. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .14;
  background-repeat: repeat-x; background-position: left bottom; background-size: 900px 190px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='190' viewBox='0 0 900 190'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M110 190V96h26v94zM142 190V78h30v112zM178 190v-60h22v60zM226 190V88h34v102zM266 190v-44h20v44zM320 190v-74h26v74zM352 190V60h32v130zM390 190v-52h18v52zM460 190V92h28v98zM494 190v-38h20v38zM556 190V70h30v120zM592 190v-62h22v62zM648 190V98h26v92zM680 190v-40h20v40zM760 190V74h30v116zM796 190v-56h20v56zM846 190V94h28v96z'/%3E%3Cpath d='M66.1,79.6Q62.0,137.1 59.6,190.0L67.1,190.0Q68.8,134.8 73.0,79.6ZM70.0,79.6Q38.4,61.0 12.5,72.3Q41.3,80.9 70.0,83.1ZM70.0,79.6Q45.6,49.2 25.6,50.2Q47.8,67.9 70.0,83.1ZM70.0,79.6Q58.8,41.2 49.5,35.4Q59.8,59.0 70.0,83.1ZM70.0,79.6Q78.5,40.4 85.5,35.2Q77.7,58.2 70.0,83.1ZM70.0,79.6Q95.2,50.0 115.8,55.9Q92.9,68.8 70.0,83.1ZM70.0,79.6Q102.2,63.0 128.5,83.3Q99.2,83.1 70.0,83.1ZM70.0,79.6Q69.2,49.7 68.6,58.0Q69.3,68.5 70.0,83.1Z'/%3E%3Cpath d='M426.9,101.7Q423.6,147.7 421.7,190.0L427.7,190.0Q429.1,145.8 432.4,101.7ZM430.0,101.7Q404.7,86.8 384.0,95.9Q407.0,102.7 430.0,104.4ZM430.0,101.7Q410.4,77.4 394.4,78.1Q412.2,92.4 430.0,104.4ZM430.0,101.7Q421.0,70.9 413.6,66.3Q421.8,85.2 430.0,104.4ZM430.0,101.7Q436.8,70.3 442.4,66.1Q436.2,84.5 430.0,104.4ZM430.0,101.7Q450.2,78.0 466.6,82.7Q448.3,93.0 430.0,104.4ZM430.0,101.7Q455.7,88.4 476.8,104.6Q453.4,104.5 430.0,104.4ZM430.0,101.7Q429.4,77.8 428.9,84.4Q429.5,92.8 430.0,104.4Z'/%3E%3Cpath d='M722.4,89.2Q718.6,141.7 716.5,190.0L723.4,190.0Q725.0,139.6 728.7,89.2ZM726.0,89.2Q697.1,72.2 673.5,82.6Q699.8,90.4 726.0,92.3ZM726.0,89.2Q703.7,61.5 685.4,62.3Q705.7,78.6 726.0,92.3ZM726.0,89.2Q715.7,54.1 707.3,48.8Q716.7,70.4 726.0,92.3ZM726.0,89.2Q733.8,53.4 740.1,48.6Q733.1,69.6 726.0,92.3ZM726.0,89.2Q749.0,62.2 767.8,67.5Q746.9,79.3 726.0,92.3ZM726.0,89.2Q755.4,74.1 779.4,92.5Q752.7,92.4 726.0,92.3ZM726.0,89.2Q725.3,61.9 724.8,69.5Q725.4,79.0 726.0,92.3Z'/%3E%3C/g%3E%3C/svg%3E");
}
/* El sol, arriba a la derecha, como en el icono. */
.hero::after {
  content: ''; position: absolute; z-index: -1; top: -26%; right: -10%;
  width: 62vw; height: 62vw; max-width: 700px; max-height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 197, 54, .42), rgba(253, 170, 38, .12) 45%, transparent 70%);
  filter: blur(6px);
}
.hero .wrap { position: relative; }
.hero h1 { color: #fff; max-width: 15ch; }
.hero .lead { color: rgba(255, 255, 255, .82); margin-top: 16px; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); }

/* Ola que separa el hero del contenido. */
.hero-wave { display: block; width: 100%; height: 48px; margin-top: clamp(36px, 5vw, 60px); }
.hero-wave path { fill: var(--bg); }

/* --- Marca grande, solo portada ------------------------------------------
   A 40 px en la cabecera el logo no se ve. Aquí se repite mucho más grande,
   montado sobre la propia cabecera y SOLO en la portada.

   FUERA DEL FLUJO (position: absolute), y esto es lo importante: así no
   ocupa altura y no puede empujar nada. El primer intento lo dejó en el
   flujo con un margen negativo y la franja de arriba pasó de 66 px a ~145:
   la cabecera parecía el doble de gorda, que era exactamente lo que había
   que evitar. Sin ancestro posicionado (ni body ni main lo están), `top` se
   mide desde el principio del documento, así que estas coordenadas caen
   sobre la cabecera sin necesidad de envolver nada.

   Tampoco es sticky: al bajar se va con la página y deja la cabecera normal.

   Medidas comprobadas con medir.py sobre la página real, no a ojo: la
   navegación empieza en x=791 (1440 px), 525 (1024), 321 (820) y 107 (390),
   y el primer elemento del hero está en y=163 / 149 / 133 / 105. El icono y
   el texto están dimensionados para no llegar a ninguno de los dos. */
.marca-hero {
  position: absolute; top: 27px; left: 0; right: 0; z-index: 60;
  /* Es un adorno: no debe robarle el clic a los enlaces de la cabecera. */
  pointer-events: none;
}
.marca-hero .wrap { display: flex; align-items: flex-end; gap: clamp(14px, 1.6vw, 20px); }
.marca-hero-icono {
  display: block; flex: none; border-radius: 22%;
  width: clamp(76px, 9vw, 120px); height: clamp(76px, 9vw, 120px);
  box-shadow: 0 10px 30px rgba(1, 23, 51, .35);
}
/* `flex-end` no es estético: el texto es BLANCO y la cabecera en tema claro
   también, así que si el rótulo se centrara con el icono su mitad de arriba
   caería sobre la cabecera y se volvería invisible. Alineado abajo, el icono
   es lo único que cruza la cabecera —es opaco y se ve siempre— y el texto
   queda entero sobre el azul del hero. */
.marca-hero-texto {
  font-family: 'Poppins', 'Bricolage', sans-serif; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.05;
  font-size: clamp(1.5rem, 3.6vw, 3.2rem);
  color: #fff; text-shadow: 0 2px 18px rgba(1, 23, 51, .35);
}
.marca-hero-texto b { font-weight: 700; color: var(--sea-300); }

/* Mientras el logo grande está encima, el pequeño de la cabecera sobra: son
   el mismo, y solapados se leería como un error. Se esconde con `:has`, que
   solo acierta en la portada porque es la única página con .marca-hero.
   `visibility` y no `display`: la cabecera reparte el espacio con
   space-between y con `display:none` la navegación saltaría a la izquierda. */
body:has(.marca-hero) .site-head .brand { visibility: hidden; }
/* Y vuelve en cuanto el grande deja de cruzar la cabecera al bajar; la clase
   la pone el script de la portada. */
html.marca-suelta .site-head .brand { visibility: visible; }

@media (max-width: 620px) {
  /* Aquí la cabecera mide 58 px y la navegación empieza en x=107: al lado del
     icono no cabe nada, así que el rótulo baja debajo —ya fuera de la
     cabecera, donde no estorba a los enlaces—. El icono se queda en 60 px
     para que el conjunto termine antes del primer elemento del hero. */
  .marca-hero { top: 8px; }
  .marca-hero .wrap { flex-direction: column; align-items: flex-start; gap: 4px; }
  .marca-hero-icono { width: 60px; height: 60px; }
  .marca-hero-texto { font-size: 1.25rem; }
}

/* --- Buscador ------------------------------------------------------------ */
.search-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--sh-3); padding: clamp(18px, 3vw, 26px);
  margin-top: clamp(28px, 4vw, 40px);
}
.hero .search-card { margin-bottom: -40px; position: relative; z-index: 2; }
.search-grid { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 12px; align-items: end; }
/* En tablet sigue habiendo sitio de sobra para origen → destino en una línea;
   lo único que no cabe al lado es el botón, que baja a ocupar toda la fila. */
@media (max-width: 860px) {
  .search-grid { grid-template-columns: 1fr auto 1fr; }
  .search-grid .go { grid-column: 1 / -1; }
  .search-grid .go .btn { width: 100%; }
}
/* En móvil los desplegables van a una columna: con el botón de intercambio al
   lado se quedaban tan estrechos que "Castelló de la Plana" no cabía entero. */
@media (max-width: 620px) {
  .search-grid { grid-template-columns: 1fr; gap: 10px; }
  .search-grid .go { grid-column: auto; }
  .swap { justify-self: center; margin-block: -2px; }
}

label {
  display: block; font-size: .74rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px;
}

select, input[type=text], input[type=date], input[type=email],
input[type=tel], input[type=number], textarea {
  width: 100%; padding: 13px 14px;
  font: inherit; font-size: .97rem; color: var(--ink);
  background: var(--bg-2); border: 1.5px solid var(--line); border-radius: var(--r);
  transition: border-color .15s var(--ease), background .15s var(--ease);
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23617484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px;
}
select:hover, input:hover { border-color: var(--sea-300, var(--sea-400)); }
select:focus, input:focus, textarea:focus {
  border-color: var(--sea-500); background: var(--bg); outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sea-500) 18%, transparent);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.55; }

/* Botón de intercambio origen/destino: gesto muy pedido en buscadores de viaje. */
.swap {
  display: grid; place-items: center; width: 44px; height: 46px; flex: none;
  border: 1.5px solid var(--line); border-radius: var(--r); background: var(--bg-2);
  color: var(--ink-2); cursor: pointer;
  transform: rotate(90deg);
  transition: transform .25s var(--ease), border-color .15s, color .15s;
}
.swap:hover { border-color: var(--sea-500); color: var(--brand); transform: rotate(270deg); }
/* Sólo en móvil, donde los desplegables se apilan, la flecha apunta arriba y
   abajo; el icono se dibuja así, de ahí que sea aquí donde se quita el giro. */
@media (max-width: 620px) { .swap { transform: none; } .swap:hover { transform: rotate(180deg); } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border: 0; border-radius: var(--r);
  font: inherit; font-weight: 600; font-size: .97rem; cursor: pointer;
  /* `white-space: nowrap` era lo que había, y está bien para «Ver» o «Buscar».
     Deja de estarlo en cuanto un botón lleva dos topónimos dentro —«Ver la
     vuelta: de Rincón de Loix a Aqualandia y Mundomar» mide 495 px— porque
     entonces no encoge, se sale, y saca barra horizontal a toda la página en un
     móvil. Con esto parte por los espacios y se queda dentro; el `max-width`
     es la red por si el texto no tiene ni un espacio donde partir. */
  text-wrap: balance; max-width: 100%;
  background: linear-gradient(160deg, var(--sea-500), var(--sea-700));
  color: #fff; box-shadow: 0 4px 14px -4px rgba(0, 77, 177, .5);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s;
}
.btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(0, 77, 177, .6); }
.btn:active { transform: translateY(0); }
/* El botón de acento lleva letra OSCURA, no blanca. Cuando el acento era
   terracota, el blanco encima daba 3,2:1 —ya por debajo de AA—; con el oro del
   logo daría 1,9:1, ilegible. Marino sobre oro da 9,4:1 y además es exactamente
   cómo funciona el logo: autobús y palmeras oscuros sobre la arena. */
.btn-accent { background: linear-gradient(160deg, var(--clay-400), var(--clay-500));
  color: var(--sea-950); box-shadow: 0 4px 14px -4px rgba(253, 170, 38, .5); }
.btn-accent:hover { color: var(--sea-950); }
.btn-ghost {
  background: transparent; color: var(--ink); border: 1.5px solid var(--line); box-shadow: none;
}
.btn-ghost:hover { color: var(--ink); border-color: var(--sea-500); background: var(--bg-2); }
.btn-lg { padding: 15px 30px; font-size: 1.05rem; }

/* --- Cifras -------------------------------------------------------------- */
.stats { display: flex; flex-wrap: wrap; gap: clamp(20px, 5vw, 52px); margin: 34px 0 8px; }
.stat .n {
  font-family: 'Bricolage', sans-serif; font-weight: 800;
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(150deg, var(--grad-a), var(--grad-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .l { display: block; margin-top: 5px; font-size: .8rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }

/* --- Encabezado de sección ----------------------------------------------- */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sec-head h2 { margin-bottom: 0; }
.sec-head .more { font-size: .9rem; font-weight: 500; }

/* --- Tarjetas ------------------------------------------------------------ */
.grid { display: grid; gap: 12px; margin-top: 18px; }
/* El mínimo va envuelto en min(…, 100%) y no suelto. Con `minmax(310px, 1fr)`
   la columna NO puede encogerse por debajo de 310 px, y en una pantalla de
   320 px el contenido sólo dispone de 288: la rejilla se salía seis píxeles y
   toda la página cogía barra horizontal. `min(310px, 100%)` dice lo que de
   verdad se quiere: 310 px de ancho, salvo que no quepan. */
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr)); }

.card {
  position: relative; display: block; padding: 15px 17px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: var(--ink); box-shadow: var(--sh-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
}
a.card:hover {
  color: var(--ink); transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--sea-500) 45%, var(--line));
  box-shadow: var(--sh-2);
}
.card .t { display: block; font-weight: 600; letter-spacing: -.01em; }
.card .s { display: block; margin-top: 3px; font-size: .82rem; color: var(--ink-3); }

/* Tarjeta de municipio: la inicial hace de ancla visual al escanear la rejilla. */
.card-mun { display: flex; align-items: center; gap: 13px; }
.card-mun .ini {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 12px; font-family: 'Bricolage', sans-serif; font-weight: 700; font-size: 1.05rem;
  background: linear-gradient(150deg, var(--sea-100), var(--sea-50));
  color: var(--sea-700); border: 1px solid var(--sea-200);
}
@media (prefers-color-scheme: dark) {
  .card-mun .ini { background: linear-gradient(150deg, var(--sea-800), var(--sea-900)); color: var(--sea-200); border-color: var(--sea-700); }
}

/* Tarjeta de línea: filete del color del operador. */
.card-line { padding-left: 20px; }
.card-line::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--op, var(--sea-500));
}

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  background: var(--bg-3); color: var(--ink-2); border: 1px solid var(--line);
}
.chip-op { background: color-mix(in srgb, var(--op, var(--sea-500)) 12%, transparent);
  color: var(--op, var(--sea-600)); border-color: color-mix(in srgb, var(--op, var(--sea-500)) 32%, transparent); }

/* --- Índices alfabéticos (municipios y líneas) --------------------------- */
.alpha-nav {
  position: sticky; top: 66px; z-index: 10;
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 0; margin-top: 22px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.alpha-nav a {
  display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px;
  border-radius: 9px; font-weight: 600; font-size: .9rem;
  color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line);
  transition: all .15s var(--ease);
}
.alpha-nav a:hover {
  color: #fff; text-decoration: none; border-color: transparent;
  background: linear-gradient(160deg, var(--sea-500), var(--sea-700));
}
.alpha-group { scroll-margin-top: 120px; }
.alpha-group h2 { scroll-margin-top: 120px; }

/* Distintivo de color del operador en el índice de líneas. */
.op-dot {
  width: 13px; height: 13px; flex: none; border-radius: 4px;
  background: var(--op, var(--sea-500));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--op, var(--sea-500)) 20%, transparent);
}

/* --- Logotipos de los operadores ----------------------------------------- */
/* La plaquita no es adorno. Estos logotipos vienen cada uno dibujado para el
   fondo de su propia web —unos tinta oscura, otros blancos— y sin ella la
   mitad desaparece en un tema o en el otro. El color lo pone operator_logo()
   en línea, uno por operador. El filete oscuro recorta la plaquita blanca
   sobre el papel claro, donde si no se derramaría por el borde; en el tema
   oscuro no se ve, pero allí el blanco ya se recorta solo. */
.op-logo {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  padding: 3px 5px; border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .14);
}
.op-logo img { display: block; height: 24px; width: auto; }

/* Dentro del distintivo el rótulo es de .72rem: a 24 px el logotipo se comería
   el nombre, así que ahí va más pequeño y la pastilla se ensancha un poco por
   la izquierda para que la plaquita no toque el borde redondeado. */
.chip-op.has-logo { padding: 3px 9px 3px 3px; gap: 7px; }
.chip-op.has-logo .op-logo { padding: 2px 4px; border-radius: 4px; }
.chip-op.has-logo .op-logo img { height: 15px; }

/* El enlace a los horarios oficiales del operador, dentro del aviso del pie. */
a.op-link {
  display: inline-flex; align-items: center; gap: 7px;
  vertical-align: middle;
}
a.op-link .op-logo img { height: 19px; }

/* --- Controles (fecha / sentido) ----------------------------------------- */
.controls {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: end;
  padding: 16px; margin: 20px 0 18px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.controls .grow { flex: 1 1 170px; }
.tabs { display: flex; gap: 7px; flex-wrap: wrap; }
.tab {
  padding: 9px 16px; border-radius: 999px; font-size: .88rem; font-weight: 500;
  background: var(--bg); color: var(--ink-2); border: 1.5px solid var(--line);
  transition: all .15s var(--ease);
}
.tab:hover { border-color: var(--sea-400); color: var(--brand); }
.tab.on {
  background: linear-gradient(160deg, var(--sea-500), var(--sea-700));
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 3px 10px -3px rgba(0, 77, 177, .5);
}
.tab.on:hover { color: #fff; }

/* --- Próximas salidas (página de parada) --------------------------------- */
.next-up { display: grid; gap: 10px; margin-top: 18px; }
.next-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  padding: 14px 17px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg); box-shadow: var(--sh-1);
}
.next-row.soon { border-color: color-mix(in srgb, var(--clay-500) 45%, var(--line));
  background: linear-gradient(100deg, color-mix(in srgb, var(--clay-100) 60%, var(--bg)), var(--bg) 60%); }
@media (prefers-color-scheme: dark) {
  .next-row.soon { background: linear-gradient(100deg, color-mix(in srgb, var(--clay-700) 28%, var(--bg)), var(--bg) 60%); }
}
.next-time {
  font-family: 'Bricolage', sans-serif; font-weight: 700; font-size: 1.5rem;
  font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink);
}
.next-when { font-size: .78rem; font-weight: 600; color: var(--accent); margin-top: 3px; white-space: nowrap; }
.next-dest { font-weight: 600; letter-spacing: -.01em; }
.next-line { font-size: .82rem; color: var(--ink-3); }

/* En móvil las tres columnas dejaban al destino un canal de dos palabras de
   ancho: "Plaça Fadrell-Av. Casalduch (Castelló de la Plana)" salía en seis
   líneas. Se reordena en dos filas —hora y operador arriba, destino debajo a
   todo lo ancho—, que es lo que de verdad se lee en un panel de salidas. */
@media (max-width: 620px) {
  .next-row { grid-template-columns: auto 1fr; gap: 8px 12px; padding: 13px 15px; }
  .next-row > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .next-row .chip-op { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
  .next-time { font-size: 1.35rem; }
}

/* --- Trayecto origen-destino --------------------------------------------- */
.trip-list { display: grid; gap: 11px; margin-top: 18px; }
.trip {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
  padding: 16px 18px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: box-shadow .18s var(--ease), border-color .18s;
}
.trip:hover { box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--sea-500) 35%, var(--line)); }

/* Línea de viaje: dos puntos unidos, como un plano de metro. */
.trip-clock { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 11px; }
.trip-t { font-family: 'Bricolage', sans-serif; font-weight: 700; font-size: 1.3rem;
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.trip-t small { display: block; font-family: 'Inter', sans-serif; font-size: .68rem;
  font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.trip-link { position: relative; width: clamp(46px, 9vw, 86px); height: 2px;
  background: linear-gradient(90deg, var(--sea-500), var(--clay-500)); border-radius: 2px; }
.trip-link::before, .trip-link::after {
  content: ''; position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  transform: translateY(-50%); background: var(--bg); border: 2.5px solid var(--sea-500);
}
.trip-link::before { left: -4px; }
.trip-link::after { right: -4px; border-color: var(--clay-500); }
.trip-dur {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-size: .72rem; font-weight: 600; color: var(--ink-3); white-space: nowrap;
}
@media (max-width: 560px) {
  .trip { grid-template-columns: 1fr; gap: 12px; }
  .trip-clock { justify-content: start; }
}

/* --- Tablas -------------------------------------------------------------- */
.table-wrap {
  position: relative; margin-top: 18px;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-1);
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: 11px 15px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line-2); }
thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--bg-3); color: var(--ink-2);
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s var(--ease); }
tbody tr:hover { background: var(--bg-2); }
td.time { font-variant-numeric: tabular-nums; font-weight: 600; }
td.dash { color: var(--ink-3); font-weight: 400; }

/* Matriz parada × servicio: primera columna fija al desplazar en horizontal. */
.timetable td, .timetable th { text-align: center; font-variant-numeric: tabular-nums; }
.timetable .stopcol {
  position: sticky; left: 0; z-index: 2;
  text-align: left; white-space: normal; min-width: 200px; max-width: 270px;
  background: var(--bg); border-right: 1px solid var(--line); font-weight: 500;
}
.timetable thead .stopcol { z-index: 4; background: var(--bg-3); }
.timetable tbody tr:hover .stopcol { background: var(--bg-2); }
.timetable tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-2) 55%, transparent); }
.timetable tbody tr:nth-child(even) .stopcol { background: color-mix(in srgb, var(--bg-2) 55%, var(--bg)); }

.nextday {
  display: inline-block; margin-left: 2px; padding: 0 4px;
  font-size: .62rem; font-weight: 700; vertical-align: super;
  /* --accent sobre --clay-100 se queda en 4,4:1, y esto son 10 px: el tono
     oscuro de la misma familia llega a 6:1 sin cambiar de color. */
  color: var(--clay-700); background: var(--clay-100); border-radius: 4px;
}
@media (prefers-color-scheme: dark) { .nextday { background: rgba(253, 197, 54, .16); color: var(--accent); } }

.scroll-hint {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 15px; font-size: .78rem; color: var(--ink-3);
  background: var(--bg-2); border-top: 1px solid var(--line-2);
}
@media (min-width: 900px) { .scroll-hint { display: none; } }

/* --- Avisos -------------------------------------------------------------- */
.notice {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 17px; margin: 22px 0; font-size: .92rem;
  background: var(--bg-2); border: 1px solid var(--line);
  border-left: 4px solid var(--brand); border-radius: var(--r);
}
.notice svg { flex: none; margin-top: 2px; color: var(--brand); }
.notice-warn { border-left-color: var(--warn-bd); }
.notice-warn svg { color: var(--warn-bd); }
.notice-ok { border-left-color: var(--ok); background: var(--ok-bg); }
.notice-ok svg { color: var(--ok); }

/* --- Bloque de llamada final --------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; margin-top: 46px;
  padding: clamp(26px, 5vw, 44px); border-radius: var(--r-xl); color: #fff;
  background: linear-gradient(150deg, var(--sea-700), var(--sea-900));
}
.cta-band::after {
  content: ''; position: absolute; right: -60px; bottom: -90px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 197, 54, .36), transparent 70%);
}
.cta-band h2 { color: #fff; margin-top: 0; }
.cta-band p { color: rgba(255, 255, 255, .84); max-width: 56ch; }
.cta-band .btn { background: #fff; color: var(--sea-800); box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .5); }
.cta-band .btn:hover { color: var(--sea-900); }

/* --- Formularios --------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--ink-2); }
.check input { flex: none; width: auto; margin-top: 3px; }
.err { color: #c0332a; font-size: .84rem; margin-top: 6px; font-weight: 500; }
@media (prefers-color-scheme: dark) { .err { color: #ff9c92; } }

.usp { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 24px 0 30px; }
.usp div { padding: 17px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); font-size: .9rem; color: var(--ink-2); }
.usp strong { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 600; }

/* --- Pie ----------------------------------------------------------------- */
.site-foot {
  margin-top: 60px; padding: 46px 0 34px;
  background: var(--bg-2); border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--ink-2);
}
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr .8fr; gap: 32px; margin-bottom: 30px; }
@media (max-width: 940px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }
.site-foot h3 {
  font-family: 'Inter', sans-serif; font-size: .74rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 7px; }
.site-foot a { color: var(--ink-2); }
.site-foot a:hover { color: var(--brand); }
/* La letra pequeña, pequeña de verdad: es una nota al pie, no un párrafo.
   Ahora es una sola y no dos, así que sobra la regla que separaba la segunda. */
.foot-legal {
  padding-top: 16px; border-top: 1px solid var(--line);
  font-size: .68rem; line-height: 1.45; color: var(--ink-3); max-width: 100ch;
}
.foot-legal strong { color: var(--ink-2); }

/* --- Prosa (páginas legales) --------------------------------------------- */
.prose { max-width: 70ch; }
.prose h2 { margin-top: 2.2rem; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: .45rem; }
.prose table { margin: 1rem 0; border: 1px solid var(--line); border-radius: var(--r); }
.prose th { white-space: normal; width: 30%; vertical-align: top; }
.prose td { white-space: normal; }

/* --- Página de error ----------------------------------------------------- */
.err-page { text-align: center; padding: clamp(40px, 9vw, 90px) 0; }
.err-code {
  font-family: 'Bricolage', sans-serif; font-weight: 800; font-size: clamp(4rem, 14vw, 8rem); line-height: 1;
  background: linear-gradient(150deg, var(--grad-a), var(--grad-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.err-page .btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* --- Impresión ----------------------------------------------------------- */
/* Mucha gente imprime o captura el horario para llevárselo. */
@media print {
  .site-head, .site-foot, .crumbs, .controls, .cta-band, .notice, .scroll-hint, .skip { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .table-wrap { border: 1px solid #999; box-shadow: none; }
  .table-scroll { overflow: visible; }
  thead th { background: #eee !important; color: #000; }
  a { color: #000; text-decoration: none; }
  h1 { font-size: 18pt; }
}

/* Distintivo de modo de transporte.
   Sólo lo llevan tranvía, metro y tren: el autobús es el caso normal de este
   sitio y marcarlo todo sería no marcar nada. Va pegado al nombre de la línea
   porque es ahí donde el viajero decide a qué anda buscando, y el tranvía NO
   sale de la estación de autobuses. */
.mode {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .72em;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  vertical-align: middle;
  color: #fff;
  background: #b3261e;
  white-space: nowrap;
}
.card-line .mode { background: rgba(0,0,0,.45); }
@media (prefers-color-scheme: dark) {
  .mode { background: #e2574c; color: #1a0d0c; }
  .card-line .mode { background: rgba(255,255,255,.22); color: #fff; }
}

/* ---------------------------------------------------------------------------
   Trazado de la línea.

   Es la respuesta a "¿por dónde va esta línea?", que es lo primero que se
   pregunta quien no conoce el sitio y lo que ni un buscador de rutas ni una
   tabla de horas contestan. Va en vertical y no en horizontal a propósito: los
   nombres de parada son largos, las líneas tienen hasta cuarenta paradas y en
   un móvil de 360 px lo horizontal obligaría a desplazar, que es justo lo que
   impide ver el conjunto.

   El espinazo se pinta con un ::before del <li> y no con un borde del <ol>,
   para poder cortarlo en la primera y la última parada: una línea que sobresale
   por arriba del origen sugiere que el recorrido sigue, y no sigue.
   --------------------------------------------------------------------------- */
.trazado { list-style: none; margin: 0 0 10px; padding: 0; }

.trazado .tz {
  position: relative;
  display: grid;
  grid-template-columns: 3.1rem 22px 1fr;
  align-items: start;
  gap: 0 10px;
  min-height: 40px;
  padding: 3px 0;
}
/* El espinazo. Va detrás del punto y se recorta en las cabeceras. */
.trazado .tz::before {
  content: "";
  position: absolute;
  left: calc(3.1rem + 10px + 10px);
  top: 0; bottom: 0;
  width: 4px;
  margin-left: -2px;
  background: var(--op, #0d6d95);
  opacity: .30;
}
.trazado .tz:first-of-type::before { top: 18px; }
.trazado .tz:last-of-type::before  { bottom: calc(100% - 18px); }

.trazado .tz-min {
  grid-column: 1;
  padding-top: 12px;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  text-align: right;
  white-space: nowrap;
}
.trazado .tz-punto {
  grid-column: 2;
  position: relative;
  z-index: 1;
  width: 11px; height: 11px;
  margin: 15px auto 0;
  border-radius: 50%;
  background: var(--bg, #fff);
  box-shadow: 0 0 0 3px var(--op, #0d6d95);
}
/* Cabecera: círculo mayor y relleno, que es donde empieza y acaba todo. */
.trazado .cabecera .tz-punto {
  width: 15px; height: 15px; margin-top: 13px;
  background: var(--op, #0d6d95);
  box-shadow: 0 0 0 3px var(--bg, #fff), 0 0 0 6px var(--op, #0d6d95);
}
/* Parada con transbordo: anillo doble. */
.trazado .enlace .tz-punto {
  box-shadow: 0 0 0 3px var(--op, #0d6d95), 0 0 0 5px var(--bg, #fff), 0 0 0 7px var(--op, #0d6d95);
}
.trazado .tz-cuerpo { grid-column: 3; padding: 8px 0 8px 2px; min-width: 0; }
.trazado .tz-nombre {
  display: inline-block;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  text-decoration: none;
}
.trazado .cabecera .tz-nombre { font-size: 1.06rem; }
.trazado .tz-nombre:hover { text-decoration: underline; }

.trazado .tz-enlaces {
  display: block;
  margin-top: 3px;
  font-size: .8rem;
  color: var(--ink-3);
  line-height: 1.9;
}
.trazado .tz-enlaces a {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-weight: 600;
  font-size: .93em;
  text-decoration: none;
}
.trazado .tz-enlaces a.es-tren { border-style: dashed; }

/* Separador de municipio: dice en qué pueblo se está sin repetirlo en cada
   parada, que es ruido cuando quince seguidas son del mismo. */
.trazado .tz-mun {
  position: relative;
  display: grid;
  grid-template-columns: 3.1rem 22px 1fr;
  gap: 0 10px;
  margin: 10px 0 2px;
}
/* El separador de municipio también lleva espinazo. Sin esto la línea se
   partía en cada cambio de pueblo y el dibujo parecía roto, como si el
   recorrido se interrumpiera ahí. */
.trazado .tz-mun::before {
  content: "";
  position: absolute;
  left: calc(3.1rem + 10px + 10px);
  top: 0; bottom: 0;
  width: 4px;
  margin-left: -2px;
  background: var(--op, #0d6d95);
  opacity: .30;
}
.trazado .tz-mun span {
  grid-column: 3;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 420px) {
  .trazado .tz, .trazado .tz-mun { grid-template-columns: 2.5rem 20px 1fr; }
  .trazado .tz::before,
  .trazado .tz-mun::before { left: calc(2.5rem + 10px + 9px); }
}

/* --- La próxima salida, en la página de trayecto -------------------------- */
/* Es lo primero que se quiere saber y lo que una tabla obliga a buscar
   recorriéndola con el dedo, así que va destacado y antes que ella. */
.proxima{border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:14px;padding:18px 20px;margin:0 0 22px;background:var(--bg)}
.px-rotulo{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.px-hora{margin:2px 0 6px;font-size:2.6rem;line-height:1;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.px-detalle{margin:0;font-size:.98rem}
/* El «+1» avisa de que esa hora es ya del día siguiente. Va en ámbar y no en
   gris porque confundirse aquí cuesta una noche en la calle. */
.px-mas1{font-size:.34em;vertical-align:.9em;margin-left:.18em;font-weight:700;color:#8a5a00}
@media (prefers-color-scheme:dark){ .px-mas1{color:#f0c46a} }

.tabla-trayecto td{padding:9px 12px}
/* Las salidas ya pasadas no se esconden —sirven para ver la frecuencia— pero se
   apagan para que no compitan con las que quedan. */
.tabla-trayecto tr.pasada td{opacity:.42}

@media (max-width:520px){ .px-hora{font-size:2.1rem} }

/* ---------------------------------------------------------------------------
   Itinerario con transbordo
   ---------------------------------------------------------------------------
   Un viaje con cambio de línea es una SECUENCIA —subes, viajas, te bajas,
   esperas, vuelves a subir, llegas— y leerla como secuencia cuesta mucho menos
   que leerla como frase. Se dibuja igual que el trazado de una línea, con hora
   a la izquierda y una columna que hace de raíl, pero cambiando de color en el
   transbordo: el cambio de color ES el transbordo, y se ve antes de leer nada. */
.itinerario{list-style:none;margin:0 0 20px;padding:16px 18px;border:1px solid var(--line);
  border-radius:14px;background:var(--bg)}
.itinerario li{display:grid;grid-template-columns:3.4rem 22px 1fr;align-items:start;
  position:relative;gap:0 12px}
.itinerario li::before{content:"";position:absolute;left:calc(3.4rem + 12px + 10px);
  top:0;bottom:0;width:2px;background:var(--line);border-radius:2px}
.itinerario li:first-child::before{top:14px}
.itinerario li:last-child::before{bottom:calc(100% - 14px)}
/* Cada tramo pinta su raíl de su color; así se ve dónde acaba un autobús y
   empieza el otro sin tener que leer los nombres de las líneas. */
.itinerario .it-l1::before{background:var(--sea-500,#0d6d95);width:4px;left:calc(3.4rem + 12px + 9px)}
.itinerario .it-l2::before{background:var(--clay-500,#c2410c);width:4px;left:calc(3.4rem + 12px + 9px)}
.itinerario .it-cambia::before{background:linear-gradient(var(--sea-500,#0d6d95),var(--clay-500,#c2410c));width:4px;left:calc(3.4rem + 12px + 9px)}

.it-hora{grid-column:1;text-align:right;font-variant-numeric:tabular-nums;
  font-size:.9rem;font-weight:600;padding-top:9px;color:var(--ink-3)}
.it-punto{grid-column:2;width:12px;height:12px;border-radius:50%;margin:12px auto 0;
  background:var(--bg);border:2px solid var(--line);z-index:1}
.it-hito .it-punto{border-color:var(--brand);background:var(--brand)}
/* El transbordo es el punto que hay que mirar: anillo doble y más grande. */
.it-cambia .it-punto{width:16px;height:16px;margin-top:10px;background:var(--bg);
  border:3px solid var(--clay-500,#c2410c);box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--clay-500,#c2410c)}
.it-txt{grid-column:3;padding:7px 0 7px 2px;min-width:0}
.it-txt strong{display:block;font-size:1.02rem;line-height:1.35}
.it-sub{display:block;font-size:.87rem;color:var(--ink-3);margin-top:1px}
.it-linea{font-weight:600;font-size:.92rem}
.itinerario .it-tramo .it-txt{padding:4px 0 4px 2px}

@media (max-width:420px){
  .itinerario li{grid-template-columns:2.9rem 20px 1fr}
  .itinerario li::before,
  .itinerario .it-l1::before,.itinerario .it-l2::before,
  .itinerario .it-cambia::before{left:calc(2.9rem + 12px + 9px)}
}

/* --- Tarifas ------------------------------------------------------------- */
/* Los dos números que trae a buscar el 90 % de las visitas, antes que nada. */
.tarifa-cabecera{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:14px;margin:0 0 22px}
.tf-precio{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--bg)}
.tf-mejor{border-left:4px solid var(--brand)}
.tf-n{display:block;font-size:2.3rem;font-weight:700;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.tf-l{display:block;margin-top:6px;font-size:.9rem;color:var(--ink-3)}
.tf-guia{margin:0 0 8px}
.tf-guia li{margin-bottom:6px}
.tf-titulo{border:1px solid var(--line);border-radius:14px;padding:4px 20px 16px;
  margin:0 0 14px;background:var(--bg)}
.tf-destacado{border-left:4px solid var(--brand)}
.tf-titulo h3{margin:16px 0 4px}
.tf-para{margin:0 0 8px;font-weight:600}
.tabla-tarifas td{padding:9px 12px}
.tabla-tarifas td.time{font-weight:700}
.tf-si{text-align:center;font-weight:700}
.tf-notas{margin:18px 0 10px}
.tf-notas li{margin-bottom:5px}


/* --- Filtro de paradas ---------------------------------------------------- */
.filtro{margin:0 0 18px}
.filtro input{width:100%;padding:14px 16px;font:inherit;font-size:1.02rem;
  border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)}
.filtro input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
.filtro-n{margin:8px 0 0;font-size:.88rem;color:var(--ink-3)}
.filtro-vacio{margin:20px 0;color:var(--ink-3)}
.parada-item[hidden],.zona-bloque[hidden]{display:none !important}

/* Resultados del buscador de parada de la portada. Flotan sobre el hero, así
   que llevan su propio fondo y sombra: van encima de una imagen oscura. */
.pf-caja{position:relative;flex:1 1 280px;min-width:0}
.pf-caja input{width:100%;padding:12px 14px;font:inherit;border:1px solid var(--line);
  border-radius:12px;background:var(--bg);color:var(--ink)}
.pf-caja input:focus{outline:2px solid #fff;outline-offset:1px;border-color:transparent}
.pf-res{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;
  list-style:none;background:var(--bg);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.45);max-height:340px;overflow-y:auto;text-align:left}
.pf-res li{margin:0}
.pf-res a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 11px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:.95rem}
.pf-res a:hover,.pf-res a:focus{background:var(--line-2);outline:none}
.pf-res a span{flex:0 0 auto;font-size:.8rem;color:var(--ink-3)}
/* La zona va destacada: cuando coincide es casi siempre lo que se buscaba. */
.pf-res .pf-zona{border-left:3px solid var(--brand);border-radius:8px}
.pf-nada{padding:10px 11px;color:var(--ink-3);font-size:.92rem}

/* --- Índice de paradas ----------------------------------------------------
   Son 460 nombres: no son tarjetas, son un índice. Con el tamaño de tarjeta
   ocupaban ocho pantallas y obligaban a leer una por una. En columnas
   estrechas y letra pequeña se barre con la vista, que es como se usa un
   índice. */
.lista-paradas{
  columns: 4 220px; column-gap: 26px; margin: 0 0 6px;
}
.lista-paradas .parada-item{
  display:block; break-inside:avoid; padding:5px 0;
  font-size:.9rem; line-height:1.35; color:var(--ink);
  text-decoration:none; border-bottom:1px solid transparent;
}
.lista-paradas .parada-item:hover,
.lista-paradas .parada-item:focus{color:var(--brand);border-bottom-color:var(--line)}
.zona-bloque .sec-head{margin-bottom:6px}
.zona-bloque .sec-head h2{font-size:1.12rem;margin:1.5rem 0 .3rem}
@media (max-width:520px){ .lista-paradas{columns:1} }

/* La segunda paleta que había aquí —un :root completo bajo el rótulo
   "IDENTIDAD DE BENIDORM BUS", más su propio bloque de modo oscuro— se fundió
   con la ficha de diseño del principio del fichero el 5-sep-2026, al adoptar
   los colores del logo. Eran dos paletas compitiendo y mandaba ésta por ser la
   última, así que tocar la de arriba no hacía nada visible. Ahora solo hay una.
   Su redondeado (--r: 14px, --r-lg: 22px) se conservó tal cual. */

/* Botón sobre el hero. `.btn-ghost` es transparente con borde e ink oscuro:
   pensado para fondo claro, y sobre el hero se volvía invisible. */
.btn-hero{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.55);
  box-shadow:none;backdrop-filter:blur(2px)}
.btn-hero:hover{background:rgba(255,255,255,.24);color:#fff;border-color:#fff}
/* Y el campo, que sobre el hero necesita fondo propio para leerse. */
.pf-caja input::placeholder{color:var(--ink-3)}
/* La tarjeta del buscador lleva `margin-bottom:-40px` para montarse sobre la
   onda del hero. Con el buscador de parada debajo, ese tirón metía el rótulo
   —blanco— por debajo del fondo blanco de la tarjeta, y desaparecía. Cuando hay
   algo detrás, el solape no procede. */
.hero .search-card:has(+ .parada-form){margin-bottom:0}

/* ===========================================================================
   Buscador de la portada: dos filas, una sola tarjeta
   ===========================================================================
   No se pueden anidar dos <form>, así que se unen a la vista: la de arriba
   pierde las esquinas de abajo, la de abajo pierde las de arriba, y entre las
   dos va una línea. Alineadas al píxel y leídas como lo que son: dos maneras
   de preguntar lo mismo. */
.hero .search-card{border-bottom-left-radius:0;border-bottom-right-radius:0;
  border-bottom:0;margin-bottom:0;padding-bottom:clamp(14px,2.4vw,20px)}
.hero .search-card:has(+ .parada-form){margin-bottom:0}

.parada-form{
  display:flex;align-items:flex-end;gap:12px;margin:0;max-width:none;
  background:var(--bg);border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--r-xl) var(--r-xl);box-shadow:var(--sh-3);
  padding:clamp(14px,2.4vw,20px) clamp(18px,3vw,26px) clamp(18px,3vw,26px);
  position:relative;z-index:2;
}
/* La línea no llega a los bordes: así se lee como separación entre dos partes
   de la misma tarjeta, no como el borde de dos tarjetas pegadas. */
.parada-form::before{content:"";position:absolute;top:0;left:clamp(18px,3vw,26px);
  right:clamp(18px,3vw,26px);height:1px;background:var(--line)}
.pf-o{flex:0 0 auto;padding-bottom:13px;font-size:.82rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.parada-form .pf-caja{flex:1 1 auto}
.parada-form label{display:block;margin-bottom:6px;font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pf-caja input{width:100%;padding:13px 15px;font:inherit;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);color:var(--ink)}
.pf-caja input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
.parada-form .btn{flex:0 0 auto}

@media (max-width:640px){
  .parada-form{flex-wrap:wrap}
  .pf-o{display:none}
  .parada-form .btn{width:100%;justify-content:center}
}

/* ===========================================================================
   Rejilla de destinos de una zona
   ===========================================================================
   Antes eran veinticuatro cajas iguales con un nombre dentro: ocupaban media
   pantalla y no decían nada que no dijera ya el nombre. Ahora cada una lleva el
   dato que decide el clic —si hay autobús directo o hay que cambiar— y las
   directas van delante y marcadas. */
.grupo-tit{margin:1.6rem 0 .7rem;font-size:.75rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.destinos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:10px}
.destino{
  display:flex;flex-direction:column;gap:2px;padding:11px 13px;
  border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:var(--r);background:var(--bg);color:var(--ink);text-decoration:none;
  transition:border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.destino:hover{color:var(--ink);background:var(--bg-2);transform:translateY(-1px)}
.destino .d-n{font-weight:600;font-size:.95rem;line-height:1.3}
.destino .d-e{font-size:.76rem;color:var(--ink-3)}
/* La barra de la izquierda es el dato leído de un vistazo: con color, hay
   autobús directo; en gris, hay que hacer transbordo. */
.destino.es-directo{border-left-color:var(--brand)}
.destino.es-directo .d-e{color:var(--brand);font-weight:600}
.destino:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}

/* ===========================================================================
   Índice de paradas: un panel por zona
   ===========================================================================
   Con los títulos sueltos sobre blanco, 460 enlaces eran una sábana sin
   estructura y no se sabía dónde acababa una zona y empezaba la siguiente. */
.zona-bloque{margin:0 0 14px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg);overflow:hidden}
.zona-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;background:var(--bg-3);border-bottom:1px solid var(--line)}
.zona-cab h2{margin:0;font-size:1.02rem;letter-spacing:-.01em}
.zona-n{flex:0 0 auto;min-width:2rem;padding:2px 9px;border-radius:999px;
  background:var(--bg);border:1px solid var(--line);
  font-size:.78rem;font-weight:700;color:var(--ink-3);text-align:center}
.zona-bloque .lista-paradas{padding:14px 18px 16px;columns:4 200px;column-gap:24px}
.lista-paradas .parada-item{
  display:block;break-inside:avoid;padding:4px 0 4px 12px;position:relative;
  font-size:.88rem;line-height:1.35;color:var(--ink-2);text-decoration:none;
}
/* Un punto por parada: convierte una lista de enlaces en un índice. */
.lista-paradas .parada-item::before{content:"";position:absolute;left:0;top:.72em;
  width:4px;height:4px;border-radius:50%;background:var(--line)}
.lista-paradas .parada-item:hover,
.lista-paradas .parada-item:focus{color:var(--brand)}
.lista-paradas .parada-item:hover::before{background:var(--brand)}
@media (max-width:520px){ .zona-bloque .lista-paradas{columns:1} }

/* Etiqueta "L26 · IDA" junto a una parada que comparte nombre con otra (ver
   sentido_palabra() y paradas_sentido_dominante()). Solo la llevan esas
   paradas —la inmensa mayoría no imprime nada aquí—, así que puede ir pegada
   al nombre sin ensuciar el índice entero. */
.parada-sentido{
  display:inline-block; margin-left:6px; padding:1px 7px;
  border-radius:999px; background:var(--bg-3); border:1px solid var(--line);
  font-size:.72rem; font-weight:700; color:var(--ink-3); white-space:nowrap;
  vertical-align:middle;
}

/* ===========================================================================
   Encabezados de sección
   ===========================================================================
   Una barra corta del color de la marca delante del título: ordena la página
   sin añadir ni una palabra. */
.sec-head h2{position:relative;padding-left:14px}
.sec-head h2::before{content:"";position:absolute;left:0;top:.28em;bottom:.28em;
  width:4px;border-radius:2px;background:var(--brand)}
/* El recorrido de la línea, bajo el número. Es información y no titular: en
   Benidorm el nombre largo son ocho tramos encadenados. */
.linea-rec{margin:8px 0 0;font-size:1.02rem;line-height:1.45;color:var(--ink-2);max-width:60ch}

/* ===========================================================================
   Menos blanco y menos titular
   ===========================================================================
   Dos cosas que se veían mal y son la misma: páginas que son un folio en
   blanco con un rótulo enorme encima.

   1. El fondo de la página deja de ser blanco puro y pasa a un tono muy suave.
      No es decoración: las tarjetas SON blancas, y sobre blanco no se
      distinguían más que por su borde. Con el fondo teñido, cada bloque se
      despega solo y la página se lee por partes.

   2. Los titulares bajan de tamaño. `clamp(1.9rem … 3.1rem)` es medida de
      portada, y aplicada a la ficha de una parada hacía que el nombre ocupara
      más que su horario. */
body { background: var(--bg-2); }

h1 { font-size: clamp(1.62rem, 1.2rem + 1.5vw, 2.3rem); letter-spacing: -.022em; }
h2 { font-size: clamp(1.16rem, 1.02rem + .5vw, 1.42rem); margin: 2.1rem 0 .8rem; }
h3 { font-size: .98rem; }

/* La cabecera de página, sobre una banda con un punto de color: da comienzo a
   la página sin necesidad de un titular gigante. */
.page-head {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(18px, 3vw, 26px) clamp(18px, 3vw, 28px);
  margin-bottom: 22px;
}
.wrap > .page-head:first-child { margin-top: clamp(18px, 3vw, 26px); padding-top: clamp(18px, 3vw, 26px); }
.page-head h1 { margin: 0; }

/* Lo que va sobre el fondo teñido y debe destacar, en blanco. */
.prose, .table-wrap { background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(16px, 2.6vw, 26px); }
.prose > h1:first-child, .prose > h2:first-child { margin-top: 0; }
.table-wrap { padding: 0; overflow: hidden; }
.table-wrap .scroll-hint { padding: 0 14px 12px; margin: 0; }

/* La rejilla de tarjetas ya no necesita sombra para separarse del fondo. */
.card { box-shadow: none; }
a.card:hover { box-shadow: var(--sh-2); }

/* ===========================================================================
   Repaso de estética
   =========================================================================== */

/* El titular del hero se cortaba a la fuerza a 15 caracteres, que es medida
   pensada para «Horarios de autobús en Castellón». Con un título corto partía
   por donde no debe. Con más margen y `balance`, el navegador reparte las
   líneas él: los cortos caben en una y los largos se parten por el sitio
   bueno. */
.hero h1 { max-width: min(24ch, 100%); text-wrap: balance; }

/* El hero necesita suelo: con la tarjeta pegada al borde inferior parecía
   cortada. */
.hero { padding-bottom: clamp(20px, 3.5vw, 40px); }
.hero-wave { margin-top: clamp(26px, 4vw, 46px); }

/* --- Cabecera ------------------------------------------------------------ */
/* Vidrio esmerilado al desplazar: la cabecera deja de ser una barra opaca
   pegada encima del contenido. */
.site-head {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.head-nav a { border-radius: 999px; padding: 7px 12px; transition: background .15s var(--ease), color .15s var(--ease); }
.head-nav a:hover { background: var(--bg-3); color: var(--brand-ink); }

/* --- Cifras -------------------------------------------------------------- */
/* Iban sueltas sobre el fondo; ahora son una tira con su propio panel. */
.stats {
  gap: 0; margin: 26px 0 6px; padding: 6px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.stat { flex: 1 1 0; min-width: 120px; padding: 14px 18px; border-radius: var(--r); }
.stat + .stat { box-shadow: inset 1px 0 0 var(--line); }

/* --- Tarjetas ------------------------------------------------------------ */
/* Un filo de color arriba que sólo aparece al pasar por encima: da respuesta
   al puntero sin ensuciar la rejilla en reposo. */
.card { overflow: hidden; }
.card::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
a.card:hover::after { transform: scaleX(1); }
a.card:hover { transform: translateY(-2px); }

/* --- Encabezados de sección --------------------------------------------- */
.sec-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 2.2rem; }
.sec-head h2 { margin: 0 0 .7rem; }
.sec-head .more { font-size: .9rem; font-weight: 600; white-space: nowrap; }

/* --- Avisos -------------------------------------------------------------- */
/* Menos alarma: el borde de color a la izquierda basta, y el fondo deja de
   competir con el contenido. */
.notice { background: var(--bg); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: var(--r); }
.notice-warn { border-left-color: var(--warn-bd); }

/* --- Pie ----------------------------------------------------------------- */
.site-foot { background: var(--bg); border-top: 1px solid var(--line); margin-top: 48px; }
/* Aire dentro del hero: el titular y la tarjeta iban demasiado juntos y el
   conjunto parecía apretado contra el borde. */
.hero { padding-top: clamp(46px, 8vw, 96px); padding-bottom: clamp(26px, 4vw, 48px); }
.hero .search-card { margin-top: clamp(34px, 5vw, 52px); }

/* --- Mapa del recorrido --------------------------------------------------- */
/* Dibujado en la propia respuesta, sin scripts ni teselas de nadie: este sitio
   promete que no manda datos fuera del EEE y un mapa de terceros lo rompería. */
:root{ --mapa-agua:#dceef6; --mapa-tierra:#f4f7f4; --mapa-borde:#d7e2dc; }
@media (prefers-color-scheme:dark){
  :root{ --mapa-agua:#0d2434; --mapa-tierra:#132a26; --mapa-borde:#1e3a34; }
}
.mapa-linea{margin:0 0 24px;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--bg)}
/* OJO: nada de reglas de `svg` a secas dentro del mapa. Leaflet dibuja sus
   trazados en un <svg> propio y pone la banderita de su atribución en otro; una
   regla como `.mapa-linea svg{width:100%}` aplastaba el primero a 0x0 —el
   recorrido dejaba de verse— y estiraba la segunda hasta ocupar una esquina
   entera. Sólo se estila el SVG de respaldo, por su clase. */
.mapa-linea figcaption{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 16px;border-top:1px solid var(--line);background:var(--bg-2);
  font-size:.9rem}
.mapa-linea .mp-a,.mapa-linea .mp-b{font-weight:600}
.mapa-linea .mp-f{color:var(--ink-3)}
/* El contenedor sirve para las dos cosas: enseña el SVG del servidor hasta que
   Leaflet lo sustituye por el mapa de calles. */
.mapa-vivo{position:relative;width:100%}
.mapa-vivo .mapa-svg{display:block;width:100%;height:auto}
.mapa-vivo.listo{height:clamp(320px,52vw,520px)}
/* OJO CON LA ESPECIFICIDAD AQUÍ: leaflet.css se enlaza DESPUÉS de esta hoja
   (se añade al pie sólo en las páginas con mapa), así que a igual especificidad
   gana él. Escrita como `.leaflet-container{...}` esta regla no hacía nada: el
   mapa salía con el gris #ddd de Leaflet en vez del tono de agua —lo que
   mientras cargan las teselas se ve como un mapa a medio dibujar— y los
   bocadillos en Helvetica en vez de la tipografía del sitio. `.mapa-vivo` es el
   mismo elemento, por eso va pegada y no separada por un espacio. */
.mapa-vivo.leaflet-container{font:inherit;background:var(--mapa-agua)}
.mapa-linea .mp-ayuda{margin-left:auto;font-size:.82rem;color:var(--ink-3)}
/* Mapa de la ficha de parada: más bajo que el de línea, que aquí sólo hay que
   ver la esquina. */
.mapa-parada .mapa-vivo.listo{height:clamp(260px,38vw,360px)}
.mapa-sinjs{margin:0;padding:22px 18px;text-align:center}
/* La onda que cierra el hero se rellenaba con `--bg` —blanco— y el fondo de la
   página pasó a ser `--bg-2`. Quedaba una silueta blanca recortada sobre el
   tono suave, y parecía el hero roto por abajo. */
.hero-wave path { fill: var(--bg-2); }
/* La onda es lo ÚLTIMO del hero, así que el relleno inferior le añadía una
   franja de color por debajo y parecía cortado a medias. El aire de abajo lo
   pone el margen superior de la propia onda. */
.hero { padding-bottom: 0; }

/* El botón de cerrar del popup lo pinta Leaflet en #757575: 3,4:1 sobre el
   popup blanco. Se corrige aquí y no en leaflet.css, que es de terceros y se
   reemplaza entero al actualizar la librería. */
.mapa-vivo.leaflet-container a.leaflet-popup-close-button{color:#4a5560}
.mapa-vivo.leaflet-container a.leaflet-popup-close-button:hover{color:#101a22}

/* --muted nunca se definió: es una clase (.muted), no una ficha de color. Donde
   se escribió `var(--muted, #62707c)` mandaba siempre ese gris fijo, que en
   modo oscuro se queda en 3,2:1 sobre el fondo; y donde se escribió
   `var(--muted)` a secas el valor es inválido y el color ni se aplicaba: el
   texto heredaba el del padre y no salía atenuado. Ambos casos usan ahora
   --ink-3, que es la ficha de los rótulos pequeños y sí cambia con el tema. */
@media (prefers-color-scheme: dark) {
  .chip-op { color: color-mix(in srgb, var(--op, var(--sea-400)) 62%, #fff); }
}

/* La medida de 70ch de .prose es para el texto corrido. La página de tarifas
   es texto Y tablas, y dentro de esa medida los importes se parten por la
   mitad —«20,00 €» en dos líneas— mientras sobra medio ancho de pantalla al
   lado. Aquí manda el ancho completo y la medida se aplica sólo al texto. */
.prose-ancha { max-width: none; }
.prose-ancha > p, .prose-ancha > ul, .prose-ancha > ol { max-width: 70ch; }
/* Y un precio no se parte nunca. */
.prose td.time { white-space: nowrap; }

/* Las tres cifras, en una sola fila también en el móvil. Con min-width:120px y
   18 px de relleno a cada lado no caben tres en una pantalla de 360, así que la
   tercera saltaba sola a una segunda fila ocupando el ancho entero y quedaba
   descolgada. Tres columnas iguales y un cuerpo algo menor sí caben: el caso
   peor es «1.318 / paradas» y «124 / municipios». */
@media (max-width: 460px) {
  .stats { flex-wrap: nowrap; }
  .stat { min-width: 0; padding: 12px 6px; text-align: center; }
  .stat .n { font-size: 1.5rem; }
  .stat .l { font-size: .72rem; margin-top: 3px; }
}