/* LitroVolt — piel compartida del dominio.
 * GENERADO por scripts/piel.mjs a partir de src/styles/. No editar a mano:
 * el cambio hay que hacerlo en la hoja de origen o se pierde en el build.
 */

/* ===== tokens.css ===== */
/* ============================================================================
   LitroVolt web — tokens de diseño
   ----------------------------------------------------------------------------
   El ancla visual de este sitio es el TÓTEM DE PRECIOS de gasolinera: el panel
   vertical iluminado que hay junto a la carretera. Todo lo demás (tablas,
   tarjetas, migas) es señalética alrededor de ese panel. Por eso la paleta
   estructural es azul y neutra, y el color sólo aparece cuando hay un precio
   que calificar.

   Los tres colores de precio (barato / medio / caro) son los MISMOS que la app
   Android usa para colorear los pines del mapa. Repetirlos aquí es lo que hace
   que quien lea la web y luego abra la app no tenga que aprender nada dos
   veces. Ver la regla dura en docs/DISENO.md.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- Marca (inmutables: valen igual en claro y en oscuro) --------------- */
  --azul-litrovolt: #1B6FD4;   /* identidad: logotipo, sellos */
  --azul-profundo:  #0A2A52;   /* chapa del tótem y cabecera oscura */

  /* ---- Colores de precio: hex canónicos de la app ------------------------- */
  /* Sólo para RELLENOS grandes (chapa de insignia, barra maciza, pin). Nunca
     como texto ni como línea fina: el ámbar da 2,04:1 sobre papel, muy por
     debajo de cualquier mínimo legible. Para eso están los `-fuerte`. */
  --barato-puro: #1B9E52;
  --medio-puro:  #E8A317;
  --caro-puro:   #D64541;

  /* ---- Tótem: no se invierte con el tema ---------------------------------- */
  /* La chapa del tótem es azul profundo SIEMPRE, también en modo claro; es una
     pieza de mobiliario urbano, no una superficie de la página. Sus colores se
     calculan contra #0A2A52 y viven fuera del sistema claro/oscuro. */
  --totem-chapa:      var(--azul-profundo);
  --totem-chapa-alta: #123C6E;
  --totem-tinta:      #FFFFFF;
  --totem-rotulo:     #A8BEDC;
  --totem-hairline:   rgba(255 255 255 / 0.14);
  --totem-barato:     #22B762;
  --totem-medio:      #F0AE28;
  --totem-caro:       #EC7B77;

  /* ---- Tipografía --------------------------------------------------------- */
  /* Barlow es una grotesca de origen señalético de carretera: no es una fuente
     "de producto", viene del mismo sitio que los paneles que imitamos.
     Barlow Condensed queda reservada a las cifras: condensada permite meter
     1,459 grande sin partir la caja en un móvil de 360 px. */
  --fuente-base: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-cifra: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;

  --peso-normal: 400;
  --peso-fuerte: 600;
  --peso-titular: 800;

  /* Escala fluida. Los tamaños de lectura no se encogen por debajo de 1rem:
     esta web se consume mayormente en móvil y con prisa. */
  --texto-nota:    0.75rem;    /* 12px — pies de tabla, sellos de fuente */
  --texto-pequeno: 0.875rem;   /* 14px — metadatos, migas */
  --texto-base:    1rem;       /* 16px — cuerpo */
  --texto-guia:    1.0625rem;  /* 17px — entradilla */
  --texto-t4:      clamp(1.0625rem, 0.99rem + 0.35vw, 1.25rem);
  --texto-t3:      clamp(1.25rem,  1.14rem + 0.55vw, 1.5rem);
  --texto-t2:      clamp(1.5rem,   1.30rem + 1.00vw, 2rem);
  --texto-t1:      clamp(1.875rem, 1.55rem + 1.60vw, 2.75rem);
  /* La cifra del tótem: se deja crecer mucho porque es el motivo de la página */
  --texto-cifra:   clamp(2.75rem, 2.00rem + 3.75vw, 4.5rem);
  --texto-cifra-menor: clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);

  --interlinea-apretada: 1.05;
  --interlinea-titular:  1.15;
  --interlinea-cuerpo:   1.6;

  /* ---- Espaciado (base 4px) ----------------------------------------------- */
  --espacio-0:  0;
  --espacio-1:  0.25rem;
  --espacio-2:  0.5rem;
  --espacio-3:  0.75rem;
  --espacio-4:  1rem;
  --espacio-5:  1.5rem;
  --espacio-6:  2rem;
  --espacio-7:  3rem;
  --espacio-8:  4rem;
  --espacio-9:  6rem;

  --ancho-lectura: 68ch;
  --ancho-contenedor: 74rem;
  --canal: clamp(1rem, 0.6rem + 2vw, 2rem); /* margen lateral del contenedor */

  /* ---- Radios ------------------------------------------------------------- */
  /* La señalética es rectangular. Radios cortos a propósito: en cuanto se
     redondea mucho, la página deja de parecer un panel y parece una app. */
  --radio-chico:  4px;
  --radio-medio:  8px;
  --radio-grande: 14px;
  --radio-pildora: 999px;

  /* ---- Bordes ------------------------------------------------------------- */
  --linea: 1px;
  --linea-gruesa: 2px;

  /* ---- Transiciones ------------------------------------------------------- */
  --transicion-rapida: 120ms ease;
  --transicion-media:  200ms ease;

  /* ---- Foco --------------------------------------------------------------- */
  --grosor-foco: 3px;
  --separacion-foco: 2px;
}

/* ===========================================================================
   TEMA CLARO (valores por defecto)
   ========================================================================= */
:root {
  --papel:            #F7F8FA;
  --superficie:       #FFFFFF;
  --superficie-alta:  #EDF0F5;
  --superficie-inversa: var(--azul-profundo);

  --tinta:            #14181F;
  --tinta-apagada:    #5C6673;
  --tinta-inversa:    #FFFFFF;

  --borde:            #DCE2EB;   /* separador decorativo, no necesita 3:1 */
  --borde-control:    #7F8998;   /* contorno de campos y botones: 3,33:1 */

  --azul-enlace:      #1B6FD4;   /* 4,63:1 sobre papel */
  --azul-accion:      #1B6FD4;   /* fondo de botón primario */
  --azul-accion-tinta: #FFFFFF;  /* 4,92:1 sobre el botón */
  --azul-accion-viva: #155BAF;   /* hover: se oscurece, nunca se aclara */
  --azul-tenue:       #E8F0FC;   /* fondo de aviso o destacado neutro */

  /* Precio — variante legible sobre las superficies del tema */
  --barato-fuerte: #0A7B3B;  /* 5,06:1 sobre papel */
  --medio-fuerte:  #8A5F0A;  /* 5,31:1 sobre papel */
  --caro-fuerte:   #C2302C;  /* 5,27:1 sobre papel */
  /* Precio — chapa de la insignia */
  --barato-suave: #E4F5EA;
  --medio-suave:  #FBF0D9;
  --caro-suave:   #FBE8E7;

  --sombra-baja:  0 1px 2px rgb(10 42 82 / 0.06), 0 1px 1px rgb(10 42 82 / 0.04);
  --sombra-media: 0 2px 4px rgb(10 42 82 / 0.06), 0 6px 16px rgb(10 42 82 / 0.08);
  --sombra-alta:  0 4px 8px rgb(10 42 82 / 0.08), 0 16px 40px rgb(10 42 82 / 0.14);
  --color-foco:   #1B6FD4;   /* 4,63:1 sobre papel */
  --halo-foco:    #FFFFFF;   /* anillo interior: separa el foco del fondo */
}

/* ===========================================================================
   TEMA OSCURO — diseñado, no invertido.
   Los tres colores de precio tienen valores propios: bajados de luminancia
   sobre papel claro (para que no deslumbren) y subidos sobre fondo oscuro
   (para que lleguen a AA). Un `filter: invert` los habría descolocado de tono
   y habría roto el reconocimiento contra los pines de la app.
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel:            #0D1219;
    --superficie:       #161D27;
    --superficie-alta:  #202834;
    --superficie-inversa: #F7F8FA;

    --tinta:            #E8EDF4;
    --tinta-apagada:    #A2AEBE;
    --tinta-inversa:    #14181F;

    --borde:            #2A3341;
    --borde-control:    #78849A;

    --azul-enlace:      #82B1EC;
  --azul-litrovolt:   #82B1EC;
    /* El acento del logotipo (Litro«Volt»): el #1B6FD4 de marca no llega a
       4,5:1 sobre el fondo oscuro de la cabecera (Lighthouse lo marcaba). */
    --azul-litrovolt:   #82B1EC;
    --azul-accion:      #4E93E8;
    --azul-accion-tinta: #14181F;
    --azul-accion-viva: #6FA6EE;  /* hover: aquí sí se aclara */
    --azul-tenue:       #142235;

    --barato-fuerte: #22B762;
    --medio-fuerte:  #F0AE28;
    --caro-fuerte:   #EC7B77;
    --barato-suave: #10291B;
    --medio-suave:  #2C2210;
    --caro-suave:   #2E1614;

    /* En oscuro la sombra casi no se lee: el relieve lo dan los bordes. */
    --sombra-baja:  0 1px 2px rgb(0 0 0 / 0.5);
    --sombra-media: 0 2px 4px rgb(0 0 0 / 0.5), 0 8px 20px rgb(0 0 0 / 0.45);
    --sombra-alta:  0 4px 8px rgb(0 0 0 / 0.55), 0 20px 48px rgb(0 0 0 / 0.55);
    --color-foco:   #8CBAF2;
    --halo-foco:    #0D1219;
  }
}

/* Forzado manual. Se duplica el bloque en vez de usar una variable intermedia
   para que el usuario pueda elegir oscuro con el sistema en claro y viceversa,
   sin que una regla gane a la otra por especificidad. */
:root[data-tema="oscuro"] {
  --papel:            #0D1219;
  --superficie:       #161D27;
  --superficie-alta:  #202834;
  --superficie-inversa: #F7F8FA;

  --tinta:            #E8EDF4;
  --tinta-apagada:    #A2AEBE;
  --tinta-inversa:    #14181F;

  --borde:            #2A3341;
  --borde-control:    #78849A;

  --azul-enlace:      #82B1EC;
  --azul-litrovolt:   #82B1EC;
  --azul-accion:      #4E93E8;
  --azul-accion-tinta: #14181F;
  --azul-accion-viva: #6FA6EE;
  --azul-tenue:       #142235;

  --barato-fuerte: #22B762;
  --medio-fuerte:  #F0AE28;
  --caro-fuerte:   #EC7B77;
  --barato-suave: #10291B;
  --medio-suave:  #2C2210;
  --caro-suave:   #2E1614;

  --sombra-baja:  0 1px 2px rgb(0 0 0 / 0.5);
  --sombra-media: 0 2px 4px rgb(0 0 0 / 0.5), 0 8px 20px rgb(0 0 0 / 0.45);
  --sombra-alta:  0 4px 8px rgb(0 0 0 / 0.55), 0 20px 48px rgb(0 0 0 / 0.55);
  --color-foco:   #8CBAF2;
  --halo-foco:    #0D1219;
}

:root[data-tema="oscuro"] { color-scheme: dark; }
:root[data-tema="claro"]  { color-scheme: light; }

/* ---------------------------------------------------------------------------
   Alias por estado de precio.
   Un elemento marcado `data-precio="caro"` obtiene sus tres colores sin que
   quien escribe la plantilla tenga que elegirlos: así el estado se pone UNA
   vez, en el sitio donde se conoce el dato, y ningún componente aguas abajo
   puede equivocarse de color.
   ------------------------------------------------------------------------- */
[data-precio="barato"] { --precio-fuerte: var(--barato-fuerte); --precio-suave: var(--barato-suave); --precio-puro: var(--barato-puro); --precio-totem: var(--totem-barato); }
[data-precio="medio"]  { --precio-fuerte: var(--medio-fuerte);  --precio-suave: var(--medio-suave);  --precio-puro: var(--medio-puro);  --precio-totem: var(--totem-medio); }
[data-precio="caro"]   { --precio-fuerte: var(--caro-fuerte);   --precio-suave: var(--caro-suave);   --precio-puro: var(--caro-puro);   --precio-totem: var(--totem-caro); }
/* Sin dato de precio no hay color: gris. Nunca se inventa un estado.
   OJO: aquí sólo puede figurar el valor explícito "desconocido". Un reset del
   tipo `:not([data-precio])` casaría con TODOS los descendientes de una fila
   que sí lleva estado y les redefiniría --precio-* en local, cortando la
   herencia y dejando en gris la cifra de una fila coloreada. El caso "no hay
   estado en ningún ancestro" se resuelve con el segundo argumento de var()
   allí donde se consume el token. */
[data-precio="desconocido"] { --precio-fuerte: var(--tinta-apagada); --precio-suave: var(--superficie-alta); --precio-puro: var(--tinta-apagada); --precio-totem: var(--totem-rotulo); }

/* ===== base.css ===== */
/* ============================================================================
   LitroVolt web — @font-face, reset y elementos base
   Depende de tokens.css: impórtalo antes.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   FUENTES
   Autoalojadas en /public/fuentes: Google Fonts como CDN implicaría una
   conexión de terceros en cada visita, un dominio más que resolver antes de
   pintar y una dependencia externa que el proyecto no quiere.
   Se sirven sólo los subconjuntos latin y latin-ext: el latin cubre tildes y
   la ñ (U+00F1 cae dentro de U+0000-00FF), el latin-ext entra únicamente si
   la página trae caracteres raros. Vietnamita descartado.
   `font-display: swap` porque el precio se lee antes con Arial que con nada.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fuentes/barlow-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fuentes/barlow-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fuentes/barlow-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fuentes/barlow-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fuentes/barlow-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fuentes/barlow-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fuentes/barlow-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fuentes/barlow-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fuentes/barlow-condensed-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fuentes/barlow-condensed-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===========================================================================
   RESET
   ========================================================================= */

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

/* Se anula el margen heredado sólo donde luego se repone con intención: así
   ningún componente arrastra separaciones que no ha pedido. */
:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul) {
  margin: 0;
}

:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }

html {
  /* Sin `scroll-behavior: smooth` global: se activa más abajo y sólo si el
     usuario no ha pedido reducir movimiento. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  background-color: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-base);
  font-size: var(--texto-base);
  font-weight: var(--peso-normal);
  line-height: var(--interlinea-cuerpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Nada de la página debe provocar barra horizontal. Cuando un contenido es
   ancho de verdad (una tabla de precios) el scroll va DENTRO de su contenedor,
   no en el documento.
   A propósito NO se pone `overflow-x: hidden` en el body: al hacerlo el
   navegador convierte el body en contenedor de desplazamiento y la cabecera
   pegajosa de la tabla deja de anclarse al viewport. Se contiene el ancho en
   cada componente. */

:where(img, picture, svg, video, canvas) {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(input, button, textarea, select) { font: inherit; color: inherit; }

/* Se evita que una palabra larga (topónimos como "Sant Boi de Llobregat" o un
   rótulo de estación sin espacios) reviente la caja en 360 px. */
:where(p, li, h1, h2, h3, h4, dd, dt, td, th, figcaption) {
  overflow-wrap: break-word;
}

/* ===========================================================================
   TIPOGRAFÍA
   ========================================================================= */

:where(h1, h2, h3, h4, h5, h6) {
  font-weight: var(--peso-titular);
  line-height: var(--interlinea-titular);
  /* `balance` reparte las líneas de un titular corto para que no quede una
     palabra huérfana en la segunda línea. */
  text-wrap: balance;
  letter-spacing: -0.015em;
}

h1 { font-size: var(--texto-t1); }
h2 { font-size: var(--texto-t2); }
h3 { font-size: var(--texto-t3); font-weight: var(--peso-fuerte); }
h4 { font-size: var(--texto-t4); font-weight: var(--peso-fuerte); }
h5, h6 { font-size: var(--texto-base); font-weight: var(--peso-fuerte); }

p { text-wrap: pretty; }

:where(p, ul, ol, dl, figure, blockquote, table, pre) + :where(h2) { margin-top: var(--espacio-7); }
:where(p, ul, ol, dl, figure, blockquote, table, pre) + :where(h3, h4) { margin-top: var(--espacio-6); }
:where(h1, h2, h3, h4, h5, h6) + * { margin-top: var(--espacio-3); }
:where(p, ul, ol, dl) + :where(p, ul, ol, dl) { margin-top: var(--espacio-4); }

small { font-size: var(--texto-pequeno); }

strong, b { font-weight: var(--peso-fuerte); }

/* --- Cifras -----------------------------------------------------------------
   REGLA GENERAL: toda cifra lleva tabular-nums. Sin ello los dígitos tienen
   anchos distintos, las columnas de una tabla de precios se descuadran de fila
   a fila y la página deja de leerse como una fuente de datos.
   `slashed-zero` además evita confundir 0 y O en un rótulo de estación. */
:where(td, th, time, data, output, .cifra, [data-cifra]) {
  font-variant-numeric: tabular-nums slashed-zero;
}
.cifra {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* ===========================================================================
   ENLACES
   ========================================================================= */

a {
  color: var(--azul-enlace);
  text-decoration: underline;
  /* Subrayado separado del texto: con Barlow, pegado, corta las descendentes
     de la g y la j y se lee peor. */
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
  transition: color var(--transicion-rapida);
}
a:hover { color: var(--azul-accion-viva); text-decoration-thickness: 2px; }
a:active { color: var(--azul-accion-viva); }

/* ===========================================================================
   FOCO DE TECLADO
   ---------------------------------------------------------------------------
   Anillo doble: el `outline` de color y, por debajo, un `box-shadow` blanco
   (o del color del fondo en oscuro) que lo despega de lo que haya detrás. Así
   el foco se ve tanto sobre papel como sobre la chapa del tótem, que es lo que
   fallaría con un outline de un solo color.
   `:focus-visible` y no `:focus`: el ratón no debe dejar anillos por detrás.
   ========================================================================= */

:focus-visible {
  outline: var(--grosor-foco) solid var(--color-foco);
  outline-offset: var(--separacion-foco);
  /* El anillo interior toma el color del fondo del tema: despega el trazo de
     foco de lo que haya justo debajo, para que se vea igual sobre papel que
     sobre una fila de tabla o una tarjeta ya coloreada. */
  box-shadow: 0 0 0 var(--separacion-foco) var(--halo-foco);
  border-radius: var(--radio-chico);
}

/* Sobre la chapa oscura del tótem el azul del tema claro no contrastaría:
   ahí el foco pasa a blanco. */
.totem :focus-visible,
.pie :focus-visible,
.sobre-oscuro :focus-visible {
  outline-color: #FFFFFF;
  box-shadow: 0 0 0 calc(var(--grosor-foco) + var(--separacion-foco) + 2px) rgb(10 42 82 / 0.9);
}

/* Se elimina el outline por defecto sólo cuando el navegador ya decidió que no
   es navegación por teclado. */
:focus:not(:focus-visible) { outline: none; }

/* Salto al contenido: visible en cuanto recibe foco. */
.salto-contenido {
  position: absolute;
  left: var(--espacio-4);
  top: var(--espacio-4);
  z-index: 100;
  padding: var(--espacio-2) var(--espacio-4);
  background: var(--azul-accion);
  color: var(--azul-accion-tinta);
  font-weight: var(--peso-fuerte);
  border-radius: var(--radio-chico);
  text-decoration: none;
  transform: translateY(-200%);
}
.salto-contenido:focus-visible { transform: translateY(0); }

/* ===========================================================================
   TABLAS (estilos de elemento; el componente completo va en componentes.css)
   ========================================================================= */

table {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums slashed-zero;
}
caption {
  caption-side: top;
  text-align: left;
  font-size: var(--texto-pequeno);
  color: var(--tinta-apagada);
  padding-block-end: var(--espacio-3);
}
th { text-align: left; font-weight: var(--peso-fuerte); }
:where(th, td) { padding: var(--espacio-3); }

/* ===========================================================================
   OTROS ELEMENTOS
   ========================================================================= */

hr {
  border: 0;
  border-top: var(--linea) solid var(--borde);
  margin-block: var(--espacio-6);
}

:where(ul, ol):not([role="list"]) { padding-inline-start: var(--espacio-5); }
li + li { margin-top: var(--espacio-2); }

blockquote {
  border-inline-start: var(--linea-gruesa) solid var(--borde-control);
  padding-inline-start: var(--espacio-4);
  color: var(--tinta-apagada);
}

abbr[title] { text-decoration: underline dotted; cursor: help; }

::selection { background: var(--azul-litrovolt); color: #FFFFFF; }

/* ===========================================================================
   MOVIMIENTO
   ---------------------------------------------------------------------------
   El desplazamiento suave se ACTIVA sólo si no hay preferencia por movimiento
   reducido, en vez de declararlo y luego retirarlo. Es más difícil de romper
   al añadir CSS después.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  /* No se pone `animation: none`: hay animaciones que comunican estado y
     desaparecerlas del todo deja al usuario sin señal. Se colapsan a un
     instante, que es lo que pide la especificación. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utilidad: oculto para la vista, disponible para lectores de pantalla. */
.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===== totem.css ===== */
/* ============================================================================
   LitroVolt web — EL TÓTEM DE PRECIOS
   ----------------------------------------------------------------------------
   Es la pieza que da identidad al sitio. Reproduce el panel vertical iluminado
   que hay a pie de carretera en cualquier gasolinera española: chapa oscura,
   rótulo arriba, filas de carburante con la cifra enorme a la derecha.

   Tres decisiones que lo separan de una tarjeta cualquiera:
   1. La chapa es SIEMPRE azul profundo, también con la web en tema claro. Un
      tótem no cambia de color porque salga el sol; es mobiliario, no una
      superficie de la página. Por eso usa los tokens `--totem-*`, que quedan
      fuera del sistema claro/oscuro.
   2. La cifra manda: ocupa la mayor parte del ancho, en Barlow Condensed 800.
      El resto de la fila es servicio.
   3. El color semántico entra como ACENTO (la cifra y el filo lateral), no
      como fondo. Un fondo verde entero convertiría el panel en un semáforo y
      dejaría de parecer un tótem.

   Marcado esperado:
   <article class="totem" data-precio="barato">   <- estado del precio destacado
     <header class="totem__cabecera"> ... </header>
     <ul class="totem__filas" role="list">
       <li class="totem__fila" data-precio="barato"> ... </li>
     </ul>
     <footer class="totem__pie"> ... </footer>
   </article>
   ========================================================================== */

.totem {
  --totem-canal: clamp(0.875rem, 0.6rem + 1.4vw, 1.5rem);

  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--totem-chapa);
  color: var(--totem-tinta);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-alta);
  /* Filo superior claro: es el reflejo del canto metálico. Sin él la chapa
     parece un rectángulo plano de CSS. */
  border-top: var(--linea) solid rgb(255 255 255 / 0.18);
  overflow: hidden;
  /* Contexto de apilado propio para que el poste no se cuele por encima. */
  isolation: isolate;
}

/* --- Poste --------------------------------------------------------------- */
/* Modificador opcional. Dibuja el mástil bajo la chapa; es lo que remata la
   metáfora en la cabecera de una página de municipio. Decorativo puro. */
.totem--con-poste { margin-bottom: var(--espacio-6); overflow: visible; }
.totem--con-poste::after {
  content: '';
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: clamp(18px, 6%, 28px);
  height: var(--espacio-6);
  background: linear-gradient(180deg, var(--totem-chapa-alta), var(--totem-chapa));
  border-radius: 0 0 var(--radio-chico) var(--radio-chico);
  z-index: -1;
}

/* --- Cabecera: el rótulo de la marca -------------------------------------- */
.totem__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-4);
  padding: var(--totem-canal);
  background: var(--totem-chapa-alta);
  border-bottom: var(--linea) solid var(--totem-hairline);
}

.totem__marca {
  font-weight: var(--peso-titular);
  font-size: var(--texto-t4);
  /* Versalitas y tracking abierto: los rótulos de tótem son mayúsculas
     espaciadas, no texto de párrafo. */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: var(--interlinea-apretada);
}

.totem__lugar {
  font-size: var(--texto-pequeno);
  color: var(--totem-rotulo);
  letter-spacing: 0.02em;
}

/* --- Filas de carburante -------------------------------------------------- */
.totem__filas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* La cifra se dimensiona con el ancho del PANEL, no con el de la ventana.
   Con `vw` un tótem estrecho dentro de una pantalla ancha recibía una cifra de
   4,5 rem que se comía la etiqueta del carburante. */
.totem { container-type: inline-size; }

.totem__fila {
  position: relative;
  display: grid;
  /* La columna de la cifra se dimensiona con el contenido y nunca se comprime:
     antes se parte la etiqueta del carburante que el precio. */
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--totem-canal);
  margin: 0;
}

.totem__fila + .totem__fila { border-top: var(--linea) solid var(--totem-hairline); }

/* Filo de color a la izquierda: el mismo código cromático que el pin del mapa
   de la app. Es lo único que colorea la fila; el fondo se queda oscuro. */
.totem__fila::before {
  content: '';
  position: absolute;
  inset-block: var(--espacio-2);
  inset-inline-start: 0;
  width: 4px;
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  background: var(--precio-totem, var(--totem-rotulo));
}

.totem__carburante {
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-base);
  line-height: var(--interlinea-titular);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--totem-tinta);
}

.totem__nota {
  display: block;
  font-size: var(--texto-nota);
  font-weight: var(--peso-normal);
  text-transform: none;
  letter-spacing: 0;
  color: var(--totem-rotulo);
}

/* --- La cifra: el motivo de todo ------------------------------------------ */
.totem__cifra {
  display: flex;
  align-items: baseline;
  gap: 0.25em;
  justify-self: end;
  /* `--precio-totem` lo fija el atributo data-precio del <li>. */
  color: var(--precio-totem, var(--totem-tinta));
}

.totem__numero {
  font-size: clamp(2rem, 21cqi, 3.5rem);
  /* NO bajar de 1: con 0,95 la caja de linea medía 58 px para una letra de
     68 px y el rodillo, que recorta a esa altura, cortaba los dígitos por
     abajo. La tipografía no tenía nada que ver. */
  line-height: 1;
  font-family: var(--fuente-cifra);
  font-weight: var(--peso-titular);
  font-size: var(--texto-cifra);
  /* Interlínea por debajo de 1: la caja de la cifra se ciñe al trazo y la fila
     no engorda con espacio muerto arriba y abajo. */
  line-height: 0.82;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  /* Halo tenue del propio color: sugiere el led del panel sin llegar a
     desenfocar el dígito. Es una sombra, no una animación: no interfiere con
     prefers-reduced-motion.

     `filter` Y NO `text-shadow`, que es lo que había. `text-shadow` se hereda,
     así que lo pintaba cada dígito por su cuenta DENTRO del rodillo, y el
     rodillo recorta con `overflow:hidden` para que la cinta no se salga: el
     halo se cortaba en seco en la caja de cada cifra y dejaba un recuadro gris
     de esquinas rectas detrás de cada número, en todas las páginas de precios.

     `filter` se aplica sobre el elemento YA pintado —con su recorte hecho— así
     que el resplandor sale de la silueta de los dígitos y no de su caja. */
  filter: drop-shadow(0 0 14px color-mix(in srgb, currentColor 42%, transparent));
}

.totem__unidad {
  font-family: var(--fuente-base);
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-pequeno);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* La unidad no compite con la cifra: se queda en el gris del rótulo. */
  color: var(--totem-rotulo);
  white-space: nowrap;
}

/* Variante compacta: para listar carburantes secundarios sin que cada uno
   reclame el tamaño de titular. Bajan también de peso a Condensed 600: la
   jerarquía dentro del panel la marca el trazo, no sólo el cuerpo. */
.totem__fila--menor .totem__numero {
  font-size: var(--texto-cifra-menor);
  font-weight: var(--peso-fuerte);
}

/* Sin dato. Nunca se rellena con un cero ni con una estimación: un precio
   inventado envenena las comparativas. */
.totem__cifra--sin-dato {
  color: var(--totem-rotulo);
  font-family: var(--fuente-base);
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Pie: procedencia del dato -------------------------------------------- */
/* La atribución al Ministerio va DENTRO del panel, no en letra pequeña al
   final de la página: es lo que sostiene la autoridad de la cifra. */
.totem__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-1) var(--espacio-3);
  padding: var(--espacio-3) var(--totem-canal);
  border-top: var(--linea) solid var(--totem-hairline);
  background: rgb(0 0 0 / 0.18);
  font-size: var(--texto-nota);
  color: var(--totem-rotulo);
}
.totem__pie a { color: #FFFFFF; text-decoration-color: var(--totem-rotulo); }
.totem__pie a:hover { color: #FFFFFF; }

/* --- Variante en línea ---------------------------------------------------- */
/* Tótem de una sola fila, para incrustar junto a un titular o en la cabecera
   de una tarjeta de estación. */
.totem--linea {
  flex-direction: row;
  align-items: center;
  gap: var(--espacio-4);
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-medio);
  box-shadow: var(--sombra-media);
}
.totem--linea .totem__numero { font-size: var(--texto-cifra-menor); }

/* --- 360 px --------------------------------------------------------------- */
/* Por debajo de este ancho la cifra y la etiqueta ya no caben en la misma
   línea sin apretarse: la fila pasa a dos filas y la cifra se alinea a la
   izquierda, que es como se lee más rápido en columna. */
@media (max-width: 26.25rem) {
  .totem__fila {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espacio-1);
    padding-inline-start: calc(var(--totem-canal) - 0.25rem);
  }
  .totem__cifra { justify-self: start; }
  .totem--linea { flex-direction: column; align-items: flex-start; }
}

/* --- Impresión ------------------------------------------------------------ */
/* En papel la chapa oscura se come el tóner y la cifra se pierde. Se invierte
   a tinta sobre blanco conservando el color semántico. */
@media print {
  .totem {
    background: #FFFFFF;
    color: #000000;
    box-shadow: none;
    border: var(--linea) solid #000000;
  }
  .totem__cabecera, .totem__pie { background: transparent; }
  .totem__lugar, .totem__unidad, .totem__pie { color: #333333; }
  .totem__numero { filter: none; }
  .totem--con-poste::after { display: none; }
}

/* ===== componentes.css ===== */
/* ============================================================================
   LitroVolt web — componentes
   Tabla de precios, tarjeta de estación, insignia de marca, insignia de precio,
   migas de pan, FAQ, pie de página y disposición general.
   Depende de tokens.css y base.css.
   ========================================================================== */

/* ===========================================================================
   DISPOSICIÓN
   ========================================================================= */

.contenedor {
  width: 100%;
  max-width: var(--ancho-contenedor);
  margin-inline: auto;
  padding-inline: var(--canal);
}
.contenedor--estrecho { max-width: 52rem; }
.prosa { max-width: var(--ancho-lectura); }

.seccion { padding-block: var(--espacio-7); }
.seccion + .seccion { padding-block-start: 0; }

/* Rejilla que se reordena sin consultas de medios: cada columna pide 18rem y
   se parte sola cuando no caben. Menos puntos de ruptura que mantener. */
.rejilla {
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}

/* ===========================================================================
   MIGAS DE PAN
   ---------------------------------------------------------------------------
   Aquí no son adorno: son la jerarquía España > provincia > municipio, que es
   exactamente el árbol que Google necesita ver para entender el sitio.
   ========================================================================= */

.migas { font-size: var(--texto-pequeno); }
.migas ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-1) var(--espacio-2);
}
.migas li { margin: 0; display: flex; align-items: center; gap: var(--espacio-2); }
/* El separador es un pseudoelemento y no un carácter del marcado: así el
   lector de pantalla lee la ruta sin ir cantando barras. */
.migas li:not(:last-child)::after {
  content: '';
  width: 5px; height: 5px;
  border-inline-end: var(--linea-gruesa) solid var(--borde-control);
  border-block-start: var(--linea-gruesa) solid var(--borde-control);
  rotate: 45deg;
  flex: none;
}
.migas a { color: var(--tinta-apagada); text-decoration: none; }
.migas a:hover { color: var(--azul-enlace); text-decoration: underline; }
.migas [aria-current="page"] { color: var(--tinta); font-weight: var(--peso-fuerte); }

/* ===========================================================================
   INSIGNIA DE MARCA (Repsol, Cepsa, Plenergy…)
   ---------------------------------------------------------------------------
   Deliberadamente NEUTRA: gris o azul, jamás verde/ámbar/rojo. Si una insignia
   de marca se pintara de verde, el lector creería que la marca es barata.
   ========================================================================= */

.insignia-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-1) var(--espacio-3);
  border: var(--linea) solid var(--borde);
  border-radius: var(--radio-pildora);
  background: var(--superficie);
  color: var(--tinta);
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-fuerte);
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
}
.insignia-marca__logo {
  width: 1.25rem; height: 1.25rem;
  border-radius: var(--radio-chico);
  object-fit: contain;
  flex: none;
}
.insignia-marca__texto { overflow: hidden; text-overflow: ellipsis; }
a.insignia-marca:hover { border-color: var(--azul-enlace); color: var(--azul-enlace); }

/* Sellos informativos neutros: 24 h, autoservicio, low cost… Mismo aire que la
   insignia de marca para que se lean como una familia. */
.sello {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  padding: 2px var(--espacio-2);
  border-radius: var(--radio-chico);
  background: var(--superficie-alta);
  color: var(--tinta-apagada);
  font-size: var(--texto-nota);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sello--marca { background: var(--azul-tenue); color: var(--azul-enlace); }

/* ===========================================================================
   INSIGNIA DE PRECIO
   ---------------------------------------------------------------------------
   El único componente, junto al tótem y la tabla, con derecho a color. Toma su
   estado de `data-precio` en sí mismo o en un ancestro.
   El texto siempre acompaña al color: quien no distingue verde de rojo lee
   "más barato" igual. El color no es nunca el único portador del dato.
   ========================================================================= */

.insignia-precio {
  display: inline-flex;
  align-items: baseline;
  gap: var(--espacio-2);
  padding: var(--espacio-1) var(--espacio-3);
  border-radius: var(--radio-chico);
  background: var(--precio-suave, var(--superficie-alta));
  color: var(--precio-fuerte, var(--tinta-apagada));
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-pequeno);
  line-height: 1.4;
  font-variant-numeric: tabular-nums slashed-zero;
}
.insignia-precio__valor { font-size: var(--texto-base); font-weight: var(--peso-titular); }

/* Punto de estado: réplica exacta del pin del mapa de la app. Usa el hex puro
   porque es una forma maciza de tamaño suficiente, no texto ni línea fina. */
.punto-precio {
  display: inline-block;
  width: 0.75rem; height: 0.75rem;
  border-radius: 50%;
  background: var(--precio-puro, var(--tinta-apagada));
  /* Aro oscuro: sostiene el ámbar, que por sí solo no se despega del papel. */
  box-shadow: 0 0 0 1px rgb(10 42 82 / 0.35);
  flex: none;
}

/* ===========================================================================
   TABLA DE PRECIOS
   ---------------------------------------------------------------------------
   El contenedor hace el scroll, no el documento. `tabindex="0"` y un rótulo en
   el envoltorio para que quien navega con teclado pueda desplazar la tabla:
   una región con scroll y sin foco es inalcanzable sin ratón.

   <div class="tabla-precios" tabindex="0" role="region" aria-label="Precios">
     <table> … </table>
   </div>
   ========================================================================= */

.tabla-precios {
  overflow-x: auto;
  overflow-y: visible;
  /* Ancla el scroll horizontal sin arrastrar el de la página. */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: var(--linea) solid var(--borde);
  border-radius: var(--radio-medio);
  background: var(--superficie);
  box-shadow: var(--sombra-baja);
}

.tabla-precios table { min-width: 34rem; margin: 0; }

/* Cabecera pegajosa. `top: 0` la fija respecto al scroll vertical de la
   página; el fondo debe ser opaco o las filas se transparentan por debajo. */
.tabla-precios thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--superficie-alta);
  color: var(--tinta);
  font-size: var(--texto-nota);
  font-weight: var(--peso-titular);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding-block: var(--espacio-3);
  /* `box-shadow` y no `border-bottom`: los bordes de una celda sticky se
     despegan al desplazar en varios navegadores. */
  box-shadow: inset 0 -1px 0 var(--borde-control);
}

/* Primera columna congelada: al desplazar en horizontal en un móvil se pierde
   de vista de qué estación es cada precio si el rótulo no se queda fijo. */
.tabla-precios :where(th, td):first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--superficie);
  box-shadow: inset -1px 0 0 var(--borde);
}
.tabla-precios thead th:first-child { z-index: 3; background: var(--superficie-alta); }

.tabla-precios tbody tr + tr :where(td, th) { border-top: var(--linea) solid var(--borde); }
.tabla-precios tbody tr:hover :where(td, th) { background: var(--superficie-alta); }

/* Celdas numéricas alineadas a la derecha: es como se comparan cifras. */
.tabla-precios .celda-precio,
.tabla-precios th.celda-precio { text-align: right; white-space: nowrap; }

.tabla-precios .celda-precio .valor {
  font-family: var(--fuente-cifra);
  font-weight: var(--peso-titular);
  font-size: var(--texto-t4);
  line-height: 1;
  color: var(--precio-fuerte, var(--tinta));
  font-variant-numeric: tabular-nums slashed-zero;
}
.tabla-precios .celda-precio .unidad {
  font-size: var(--texto-nota);
  color: var(--tinta-apagada);
  margin-inline-start: 0.2em;
}

/* Fila destacada: la estación más barata del listado. El realce es el filo
   izquierdo, no un fondo verde: teñir la fila entera obligaría a recalcular el
   contraste de todo lo que lleva dentro. */
.tabla-precios tr[data-destacada] :where(td, th):first-child {
  box-shadow: inset 4px 0 0 var(--precio-puro, var(--azul-litrovolt)), inset -1px 0 0 var(--borde);
}

.tabla-precios .sin-dato { color: var(--tinta-apagada); font-size: var(--texto-pequeno); }

.tabla-precios__nota {
  font-size: var(--texto-nota);
  color: var(--tinta-apagada);
  margin-top: var(--espacio-2);
}


/* ===========================================================================
   TARJETA DE ESTACIÓN
   ========================================================================= */

.tarjeta-estacion {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  background: var(--superficie);
  border: var(--linea) solid var(--borde);
  border-radius: var(--radio-medio);
  box-shadow: var(--sombra-baja);
  /* Filo de estado en el canto superior: identifica el precio de un vistazo en
     una rejilla larga, sin necesidad de leer la cifra. */
  border-top: 3px solid var(--precio-puro, var(--borde));
  /* Necesario para el enlace estirado del titular. */
  position: relative;
  transition: box-shadow var(--transicion-media), border-color var(--transicion-media);
}
.tarjeta-estacion:hover,
.tarjeta-estacion:focus-within {
  box-shadow: var(--sombra-media);
  border-color: var(--borde-control);
  border-top-color: var(--precio-puro, var(--borde-control));
}

.tarjeta-estacion__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-3);
}

.tarjeta-estacion__titulo {
  font-size: var(--texto-t4);
  font-weight: var(--peso-titular);
  line-height: var(--interlinea-titular);
  margin: 0;
  min-width: 0;
}
/* El enlace se estira sobre toda la tarjeta: el área de toque es la tarjeta
   entera, pero el nombre accesible sigue siendo el del titular. */
.tarjeta-estacion__titulo a { color: inherit; text-decoration: none; }
.tarjeta-estacion__titulo a::after { content: ''; position: absolute; inset: 0; }
.tarjeta-estacion__titulo a:hover { color: var(--azul-enlace); text-decoration: underline; }

.tarjeta-estacion__direccion {
  font-size: var(--texto-pequeno);
  color: var(--tinta-apagada);
  margin: 0;
}

.tarjeta-estacion__precios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tarjeta-estacion__precios li { margin: 0; }

.tarjeta-estacion__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-3);
  font-size: var(--texto-nota);
  color: var(--tinta-apagada);
  margin-top: auto;
  padding-top: var(--espacio-2);
  border-top: var(--linea) solid var(--borde);
}
/* Los enlaces del pie de la tarjeta van por encima del enlace estirado. */
.tarjeta-estacion__meta a { position: relative; z-index: 1; }

/* ===========================================================================
   BOTONES
   ---------------------------------------------------------------------------
   Sólo azul o neutro. Ningún botón es verde ni rojo, ni siquiera el de
   "guardar" o el de "borrar": esos tres colores están reservados al precio.
   ========================================================================= */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  /* 44 px de alto mínimo: objetivo táctil cómodo en móvil. */
  min-height: 2.75rem;
  padding: var(--espacio-2) var(--espacio-5);
  border: var(--linea) solid transparent;
  border-radius: var(--radio-chico);
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-base);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion-rapida), border-color var(--transicion-rapida);
}
.boton--primario {
  background: var(--azul-accion);
  color: var(--azul-accion-tinta);
}
.boton--primario:hover { background: var(--azul-accion-viva); color: var(--azul-accion-tinta); }
.boton--secundario {
  background: transparent;
  color: var(--azul-enlace);
  border-color: var(--borde-control);
}
.boton--secundario:hover { background: var(--azul-tenue); color: var(--azul-enlace); }
.boton[aria-disabled="true"], .boton:disabled { opacity: 0.55; cursor: not-allowed; }

/* ===========================================================================
   FAQ
   ---------------------------------------------------------------------------
   <details>/<summary> nativo: funciona sin JavaScript y Google lo lee para el
   fragmento enriquecido de preguntas frecuentes.
   ========================================================================= */

.faq { display: flex; flex-direction: column; gap: var(--espacio-2); }

.faq__item {
  background: var(--superficie);
  border: var(--linea) solid var(--borde);
  border-radius: var(--radio-medio);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--borde-control); }

.faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  min-height: 2.75rem;
  padding: var(--espacio-3) var(--espacio-4);
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-guia);
  cursor: pointer;
  list-style: none;
}
/* Se retira el triángulo del navegador para poner uno propio alineado. */
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::marker { content: ''; }

.faq__pregunta::after {
  content: '';
  flex: none;
  width: 0.6rem; height: 0.6rem;
  border-inline-end: var(--linea-gruesa) solid var(--tinta-apagada);
  border-block-end: var(--linea-gruesa) solid var(--tinta-apagada);
  rotate: 45deg;
  translate: 0 -25%;
  transition: rotate var(--transicion-media);
}
.faq__item[open] .faq__pregunta::after { rotate: 225deg; translate: 0 25%; }

.faq__respuesta {
  padding: 0 var(--espacio-4) var(--espacio-4);
  color: var(--tinta);
  max-width: var(--ancho-lectura);
}
.faq__respuesta > :first-child { margin-top: 0; }

/* ===========================================================================
   PIE DE PÁGINA
   ---------------------------------------------------------------------------
   Comparte la chapa azul profundo del tótem. Cierra la página con el mismo
   material con el que se abre, y es donde vive la atribución al Ministerio,
   que es la que sostiene la credibilidad de todo el sitio.
   ========================================================================= */

.pie {
  background: var(--azul-profundo);
  color: #FFFFFF;
  margin-top: var(--espacio-8);
  padding-block: var(--espacio-7) var(--espacio-5);
  border-top: 3px solid var(--azul-litrovolt);
}

.pie__rejilla {
  display: grid;
  gap: var(--espacio-5);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

.pie__titulo {
  font-size: var(--texto-nota);
  font-weight: var(--peso-titular);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--totem-rotulo);
  margin: 0 0 var(--espacio-3);
}

.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin: 0 0 var(--espacio-2); }
.pie a { color: #FFFFFF; text-decoration: none; }
.pie a:hover { color: #FFFFFF; text-decoration: underline; }

.pie__legal {
  margin-top: var(--espacio-6);
  padding-top: var(--espacio-4);
  border-top: var(--linea) solid var(--totem-hairline);
  font-size: var(--texto-nota);
  color: var(--totem-rotulo);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-4);
  align-items: center;
  justify-content: space-between;
}
.pie__legal a { color: var(--totem-rotulo); text-decoration: underline; }
.pie__legal a:hover { color: #FFFFFF; }

/* ===========================================================================
   LEYENDA DE COLOR
   ---------------------------------------------------------------------------
   Debe aparecer en toda página que use el código cromático. Es lo que convierte
   tres colores en un lenguaje y lo que hace que el lector reconozca los pines
   al abrir la app.
   ========================================================================= */

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-4);
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--superficie-alta);
  border-radius: var(--radio-medio);
  font-size: var(--texto-pequeno);
  color: var(--tinta-apagada);
}
.leyenda__item { display: inline-flex; align-items: center; gap: var(--espacio-2); }

/* ===========================================================================
   AVISO / PROCEDENCIA DEL DATO
   ---------------------------------------------------------------------------
   Azul, nunca ámbar ni rojo, aunque sea una advertencia. Un aviso en ámbar
   diría "precio medio" a quien ya ha aprendido el código.
   ========================================================================= */

.aviso {
  display: flex;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  background: var(--azul-tenue);
  border-inline-start: 3px solid var(--azul-litrovolt);
  border-radius: 0 var(--radio-medio) var(--radio-medio) 0;
  font-size: var(--texto-pequeno);
}
.aviso p { margin: 0; }
.aviso > :first-child { margin-top: 0; }

/* ===== pagina.css ===== */
/* ===========================================================================
   pagina.css — la estructura de página y la capa de riqueza visual.
   Se apoya en tokens.css / base.css / totem.css / componentes.css.

   LA IDEA QUE GOBIERNA TODO ESTO
   El tótem no es un adorno de la cabecera: es la GRAMÁTICA de la página.
   Un tótem de gasolinera es una pila de filas «etiqueta a la izquierda, cifra
   enorme a la derecha», leídas desde un coche en marcha. Esa misma pila es la
   forma natural de enseñar los precios de un municipio, las medias comparadas
   y el ranking por marca. Al repetirla, la página entera se lee como el objeto
   del que habla, y no como una web de producto con tarjetas redondeadas.
   =========================================================================== */

/* --- Poste y carril ------------------------------------------------------ */
/* El tótem real está clavado en un poste al borde de la carretera. Ese poste
   se convierte aquí en el carril vertical que ancla la columna de contenido:
   una línea fina que recorre la izquierda y de la que cuelgan las secciones.
   Es estructura, no decoración: marca dónde empieza y acaba cada bloque. */
.carril {
  position: relative;
  padding-left: var(--espacio-6);
}
.carril::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 2px;
  background: linear-gradient(to bottom,
    var(--azul-litrovolt) 0,
    var(--borde) 40%,
    var(--borde) 100%);
}
@media (max-width: 48rem) {
  .carril { padding-left: var(--espacio-4); }
}

/* --- Portada de sección: el titular ES el dato --------------------------- */
/* Nada de eyebrow en versalitas encima del H1. La primera línea que se lee es
   la respuesta a lo que se ha buscado, y la fecha va pegada porque el valor de
   este contenido ES su frescura. */
.encabezado-dato {
  display: grid;
  gap: var(--espacio-3);
  padding-block: var(--espacio-7) var(--espacio-5);
}
.encabezado-dato h1 {
  font-size: var(--texto-t1);
  line-height: var(--interlinea-titular);
  font-weight: var(--peso-titular);
  letter-spacing: -0.02em;
  max-width: 20ch;
  text-wrap: balance;
}
.encabezado-dato__fecha {
  font-size: var(--texto-nota);
  color: var(--tinta-apagada);
  font-variant-numeric: tabular-nums;
}

/* --- El bloque de respuesta: tótem + veredicto --------------------------- */
/* Asimétrico a propósito. El tótem va anclado a un lado, como el poste al
   borde de la carretera, y el veredicto en tipografía al otro. Un héroe
   centrado con degradado es lo que haría cualquiera. */
.respuesta {
  display: grid;
  grid-template-columns: minmax(15rem, 20rem) 1fr;
  gap: var(--espacio-6);
  align-items: start;
  padding-block: var(--espacio-5) var(--espacio-8);
}
@media (max-width: 56rem) {
  .respuesta { grid-template-columns: 1fr; gap: var(--espacio-5); }
}

.veredicto { display: grid; gap: var(--espacio-4); align-content: start; }
.veredicto__titular {
  font-size: var(--texto-t3);
  line-height: var(--interlinea-titular);
  font-weight: var(--peso-titular);
  max-width: 22ch;
  text-wrap: balance;
}
.veredicto__cuerpo {
  font-size: var(--texto-base);
  line-height: var(--interlinea-cuerpo);
  color: var(--tinta-apagada);
  max-width: 46ch;
}

/* El ahorro: la cifra que convierte. Va en la tipografía de las cifras y con
   el peso de un titular, porque es lo que decide si merece la pena moverse. */
.ahorro {
  display: flex;
  align-items: baseline;
  gap: var(--espacio-2);
  padding: var(--espacio-3) var(--espacio-4);
  border-left: var(--linea-gruesa) solid var(--barato-fuerte);
  background: var(--barato-suave);
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
}
.ahorro__cifra {
  font-family: var(--fuente-cifra);
  font-size: var(--texto-cifra-menor);
  font-weight: var(--peso-titular);
  font-variant-numeric: tabular-nums;
  color: var(--barato-fuerte);
  line-height: 1;
}
.ahorro__texto { font-size: var(--texto-pequeno); color: var(--tinta); }

/* --- Secciones ----------------------------------------------------------- */
.bloque { padding-block: var(--espacio-7); }
.bloque + .bloque { border-top: var(--linea) solid var(--borde); }
.bloque__titulo {
  font-size: var(--texto-t3);
  font-weight: var(--peso-titular);
  line-height: var(--interlinea-titular);
  margin-bottom: var(--espacio-2);
  letter-spacing: -0.01em;
}
.bloque__entradilla {
  font-size: var(--texto-pequeno);
  color: var(--tinta-apagada);
  max-width: 60ch;
  margin-bottom: var(--espacio-5);
}

/* --- Medias comparadas: la gramática del tótem, otra vez ----------------- */
.escalera {
  display: grid;
  gap: 0;
  border: var(--linea) solid var(--borde);
  border-radius: var(--radio-medio);
  overflow: hidden;
}
.escalera__fila {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--espacio-4);
  align-items: baseline;
  padding: var(--espacio-4);
  background: var(--superficie);
}
.escalera__fila + .escalera__fila { border-top: var(--linea) solid var(--borde); }
.escalera__fila--destacada { background: var(--azul-tenue); }
.escalera__ambito { font-weight: var(--peso-fuerte); }
.escalera__detalle { font-size: var(--texto-nota); color: var(--tinta-apagada); }
.escalera__precio {
  font-family: var(--fuente-cifra);
  font-size: var(--texto-cifra-menor);
  font-weight: var(--peso-titular);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.escalera__delta {
  font-size: var(--texto-pequeno);
  font-variant-numeric: tabular-nums;
  min-width: 7ch;
  text-align: right;
}

/* --- Rejilla de enlaces a municipios / provincias ------------------------ */
/* Sin tarjetas. Filas con la cifra alineada a la derecha: se comparan de un
   vistazo, que es justo lo que no permite una rejilla de tarjetas. */
.indice-zonas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0 var(--espacio-5);
}
.indice-zonas a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--espacio-3);
  align-items: baseline;
  padding: var(--espacio-3) 0;
  border-bottom: var(--linea) solid var(--borde);
  text-decoration: none;
  color: inherit;
}
.indice-zonas a:hover .indice-zonas__nombre,
.indice-zonas a:focus-visible .indice-zonas__nombre { text-decoration: underline; }
.indice-zonas__nombre { font-weight: var(--peso-fuerte); color: var(--azul-enlace); }
.indice-zonas__cuenta { font-size: var(--texto-nota); color: var(--tinta-apagada); }
.indice-zonas__precio {
  font-family: var(--fuente-cifra);
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-fuerte);
}
/* La página en la que estás, en la paginación del listado de provincia: no es
   un enlace a otro sitio, así que no se pinta como tal. */
.indice-zonas a[aria-current='page'] { background: var(--azul-tenue); }
.indice-zonas a[aria-current='page'] .indice-zonas__nombre {
  color: inherit;
  text-decoration: none;
}

/* --- Llamada a la app ---------------------------------------------------- */
/* Va DESPUÉS del dato, nunca antes, y nunca como ventana emergente: Google
   penaliza los intersticiales en móvil y además arruinan la lectura. */
/* La llamada a instalar iba con la superficie INVERTIDA: una tarjeta blanca en
   mitad de una página oscura (o negra en una clara). Destacaba, sí, pero como
   destaca un anuncio pegado encima: parecía de otra web y rompía la lectura
   justo en el punto donde hay que pedir algo.

   Ahora es del sitio. Fondo de superficie, filo azul a la izquierda —el mismo
   recurso que usa `.carril` para marcar una sección— y el botón azul haciendo
   el trabajo de llamar la atención, que para eso es el único elemento de acción
   de la página. Se pide igual, sin gritar. */
.llamada-app {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--espacio-5);
  align-items: center;
  padding: var(--espacio-5) var(--espacio-6);
  border: var(--linea) solid var(--borde);
  border-left: 3px solid var(--azul-accion);
  border-radius: var(--radio-grande);
  background:
    linear-gradient(100deg, var(--azul-tenue) 0%, transparent 62%),
    var(--superficie);
  color: var(--tinta);
}
.llamada-app__icono { color: var(--azul-accion); }
.llamada-app__texto { display: grid; gap: var(--espacio-2); }
.llamada-app__titular {
  font-size: var(--texto-t4);
  font-weight: var(--peso-titular);
  line-height: var(--interlinea-titular);
  color: var(--tinta);
}
.llamada-app__cuerpo {
  font-size: var(--texto-pequeno);
  color: var(--tinta-apagada);
  max-width: 46ch;
}
@media (max-width: 48rem) {
  .llamada-app { grid-template-columns: 1fr; text-align: left; }
}

/* --- El único momento de movimiento -------------------------------------- */
/* Los dígitos del precio principal ruedan hasta su valor al cargar, como el
   panel mecánico de una gasolinera cambiando de precio. Menos de un segundo,
   una sola vez, y NO se repite al hacer scroll.
   Tres condiciones que lo hacen inofensivo:
     · el número está en el HTML como texto, así que si el JS no corre —o es
       Google quien lee— el dato está ahí;
     · el dígito ocupa su sitio definitivo desde el primer fotograma, así que
       no hay ni un píxel de desplazamiento (CLS);
     · con `prefers-reduced-motion` no se mueve nada. */
/*
   El rodillo se dimensiona en `em`, nunca en píxeles medidos.
   La primera versión leía la altura de la caja con getBoundingClientRect() y
   recortaba a ella; como la caja de línea puede ser MÁS BAJA que los glifos,
   los dígitos salían cortados por abajo. En `em` la altura depende del cuerpo
   de la letra y eso no puede pasar.
*/
.rodillo {
  --alto-rodillo: 1.08em;
  display: inline-flex;
  overflow: hidden;
  height: var(--alto-rodillo);
  line-height: 1;
  /* La caja sobresale 0,08em por debajo de la línea; se compensa aquí para que
     la base de los dígitos caiga donde caería sin rodillo. */
  vertical-align: -0.08em;
}
.rodillo__cinta {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.rodillo__cinta > span {
  display: block;
  height: var(--alto-rodillo);
  /* La caja del dígito mide 1,08em pero la línea mide 1em: el glifo queda
     arriba, alineado con el resto del texto —la coma, sobre todo— y el 0,08em
     sobrante cuelga por abajo, que es justo donde hace falta holgura para el
     rebose de los dígitos redondos. Centrarlo con `line-height: 1.08` lo
     bajaba tres píxeles y se notaba al lado de la coma. */
  line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .rodillo[data-animar='si'] .rodillo__cinta {
    /* Duración y retardo llegan como variables desde el script: cada cifra
       tiene su propio ritmo y ninguna rueda igual que la de al lado. */
    animation: rodar var(--duracion, 620ms) cubic-bezier(0.16, 1, 0.3, 1)
               var(--retardo, 0ms) both;
  }
}
@keyframes rodar {
  from { transform: translateY(calc(-1 * var(--recorrido, 3) * var(--alto-rodillo, 1.08em))); }
  to { transform: translateY(0); }
}

/* --- Utilidad ------------------------------------------------------------ */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Cabecera y salto de contenido --------------------------------------- */
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--azul-litrovolt);
  color: #fff;
  border-radius: 0 0 var(--radio-chico) 0;
}
.salto-contenido:focus { left: 0; }

.cabecera {
  border-bottom: var(--linea) solid var(--borde);
  background: var(--superficie);
}
.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  min-height: 3.5rem;
  flex-wrap: wrap;
}
.cabecera__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  text-decoration: none;
  color: var(--azul-profundo);
}
.isotipo { width: 1.5rem; height: 1.5rem; flex: none; }
.cabecera__nombre {
  font-weight: var(--peso-titular);
  font-size: var(--texto-t4);
  letter-spacing: -0.015em;
  color: var(--tinta);
}
.cabecera__nav { display: flex; gap: var(--espacio-4); font-size: var(--texto-pequeno); }

/* --- Ajustes del tótem en su contexto de página -------------------------- */

/* La nota del pie necesita aire propio: pegada al filo del panel parecía un
   error de maquetación, no un pie. */
.totem__nota { padding: var(--espacio-3) var(--totem-canal) var(--espacio-4); }


/* --- Marca --------------------------------------------------------------- */
.cabecera__logo {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radio-chico);
  flex: none;
  /* El icono de la app ya trae su propio fondo azul con esquinas redondeadas;
     una sombra suave lo despega del blanco de la cabecera sin recortarlo. */
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.22);
}
.cabecera__nombre--acento { color: var(--azul-litrovolt); }
.pie__logo {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 6px;
  vertical-align: -0.35em;
  margin-right: 0.4rem;
}

/* --- El encendido del tótem ---------------------------------------------- */
/*
   EL ÚNICO MOMENTO ORQUESTADO DE LA PÁGINA.
   Un tótem de gasolinera de verdad se enciende: primero prende la luz del
   panel y después los dígitos giran hasta su posición. Aquí pasa lo mismo, en
   ese orden, una sola vez y en menos de un segundo. No se repite al hacer
   scroll ni hay nada más en la página que se mueva solo.

   Es seguro para la maquetación: solo cambian `opacity` y `transform`, que el
   navegador resuelve en la capa de composición. Ni un píxel de desplazamiento.
*/
/* OJO: `.totem--con-poste::after` ya está ocupado por el poste (totem.css).
   El resplandor va en `::before` para no borrarlo, que es exactamente lo que
   pasó la primera vez. */
.totem { position: relative; }
.totem::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  /* El reflejo del tubo fluorescente, en diagonal. */
  background: linear-gradient(115deg,
    rgb(255 255 255 / 0.16) 0%,
    rgb(255 255 255 / 0.05) 26%,
    transparent 52%);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .totem::before { animation: prender 900ms ease-out 120ms both; }
  .totem__fila { animation: encender-fila 420ms ease-out both; }
  .totem__fila:nth-child(1) { animation-delay: 60ms; }
  .totem__fila:nth-child(2) { animation-delay: 150ms; }
  .totem__fila:nth-child(3) { animation-delay: 210ms; }
  .totem__fila:nth-child(4) { animation-delay: 260ms; }
}
@keyframes prender {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0.55; }
}
/* Solo el brillo: la fila NO se desplaza, así que el texto ocupa su sitio
   definitivo desde el primer fotograma. */
@keyframes encender-fila {
  from { opacity: 0.15; filter: brightness(0.4); }
  to   { opacity: 1; filter: none; }
}

/* --- Respuesta a la acción del usuario ----------------------------------- */
/* Esto sí se mueve, porque contesta a algo que ha hecho la persona: enseña qué
   fila está mirando. */
.tabla-precios tbody tr {
  transition: background-color var(--transicion-rapida);
}
.tabla-precios tbody tr:hover,
.tabla-precios tbody tr:focus-within {
  background: var(--azul-tenue);
}


/* Una cifra no se parte NUNCA.
   Al montar el rodillo, cada dígito pasa a ser un elemento propio y el
   navegador puede romper la línea entre ellos: «1,78 / 7». Con esto la cifra
   se comporta como una sola palabra, antes y después de la animación. */
[data-rodillo],
.totem__numero,
.escalera__precio,
.ahorro__cifra { white-space: nowrap; }
.rodillo { flex: none; }

/* --- Las filas del tótem, todas iguales ---------------------------------
   Un tótem de gasolinera de verdad enseña todos los carburantes al mismo
   tamaño, uno por fila. Aquí se probó a agrandar el primero y estaba mal por
   dos motivos.

   El de fidelidad: no es como es el objeto.

   Y el de fondo, que es peor: en una página de municipio NO hay filtro de
   carburante. Las cuatro cifras son el precio más bajo de cada uno en el
   municipio, y pueden salir de cuatro gasolineras distintas. Poner una al
   doble de tamaño le dice al lector que ha elegido algo que no ha elegido.

   Cuando sí hay un carburante elegido —en `/precios/{carburante}/{provincia}/`,
   donde la URL, el H1 y la tabla hablan de uno solo— el panel enseña ese y
   punto, así que tampoco hace falta jerarquía ahí. */
.totem__fila {
  grid-template-columns: minmax(6.5rem, 1fr) minmax(0, auto);
}
.totem__numero { font-size: clamp(1.75rem, 15cqi, 2.5rem); }
.totem__fila--menor .totem__numero { font-size: clamp(1.75rem, 15cqi, 2.5rem); }

/* La etiqueta del carburante no se parte: con nombre corto siempre cabe, y
   partida en dos líneas chocaba con la cifra. */
.totem__carburante { white-space: nowrap; line-height: 1.15; }

/* La nota del pie necesita aire propio: pegada al filo del panel parecía un
   error de maquetación, no un pie. */
.totem__nota { padding: var(--espacio-3) var(--totem-canal) var(--espacio-4); }

/* --- Columnas propias de la tabla de precios ----------------------------- */
/* El sistema de diseño ya trae `.tabla-precios` (contenedor con desplazamiento
   horizontal, cabecera pegajosa y primera columna congelada). Aquí solo van las
   columnas que añade esta tabla. */
.tabla-precios .col-orden {
  width: 2.5rem;
  text-align: right;
  color: var(--tinta-apagada);
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-nota);
}
.tabla-precios .col-estacion { min-width: 15rem; font-weight: var(--peso-normal); }
.tabla-precios .col-estacion__direccion {
  display: block;
  font-size: var(--texto-nota);
  color: var(--tinta-apagada);
  font-weight: var(--peso-normal);
}
.tabla-precios .col-horario {
  font-size: var(--texto-nota);
  color: var(--tinta-apagada);
  min-width: 11rem;
}
/* La diferencia con la media, pegada al precio y más discreta que él. */
.tabla-precios .delta {
  display: inline-block;
  min-width: 3.5ch;
  margin-inline-start: 0.5ch;
  font-size: var(--texto-nota);
  color: var(--tinta-apagada);
  font-variant-numeric: tabular-nums;
}
/* La cabecera ordenable es un botón de verdad: navegable con teclado. */
.tabla-precios thead button {
  all: unset;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
}
.tabla-precios thead button:focus-visible {
  outline: var(--grosor-foco) solid var(--color-foco);
  outline-offset: 2px;
}

/* --- El color solo juzga la columna que juzga -----------------------------
   El estado del precio (`data-precio`) se pone en la FILA, así que
   `--precio-fuerte` llegaba también a las columnas de los otros carburantes: en
   una estación con la gasolina cara, el diésel salía en rojo aunque fuera de
   los más baratos del municipio. Es decirle al lector algo que no es verdad,
   justo en la página cuyo único valor es que los precios sean de fiar.

   El juicio va solo en la columna del carburante principal, que es la que está
   ordenada y la que se compara con la media. Las demás se pintan neutras. */
.tabla-precios .celda-precio--secundaria .valor { color: var(--tinta); }

/* --- Medias comparadas ---------------------------------------------------- */
/* Las filas eran dos datos en los extremos de una caja ancha, y en pantalla
   grande se leían como un rectángulo casi vacío. Con la lectura en palabras
   debajo del nombre, la fila tiene cuerpo y además se entiende sin descifrar
   un signo. */
.escalera__fila { grid-template-columns: 1fr auto; align-items: center; }
.escalera__zona { display: grid; gap: 0.15rem; }
.escalera__detalle { font-size: var(--texto-nota); color: var(--tinta-apagada); }
.escalera__lectura { font-size: var(--texto-pequeno); color: var(--tinta-apagada); }
.escalera__precio { font-size: var(--texto-t3); display: inline-flex; align-items: baseline; }
.escalera__unidad { font-size: var(--texto-nota); color: var(--tinta-apagada); }
.escalera__fila--destacada .escalera__precio { font-size: var(--texto-cifra-menor); }

/* --- Quién cobra cada precio del tótem ------------------------------------
   El panel enseña el mínimo de cada carburante, y cada mínimo puede ser de una
   gasolinera distinta. Decir cuál no es un adorno: sin ese nombre, el lector ve
   cuatro cifras sueltas y un texto al lado que nombra una sola estación, y no
   tiene forma de reconciliarlo.

   De paso, cada fila es un enlace a la ficha de esa gasolinera, que son las
   páginas que ya existían y que hasta ahora nadie enlazaba. */
.totem__etiqueta { display: grid; gap: 0.1rem; min-width: 0; }
.totem__estacion {
  font-size: var(--texto-nota);
  font-weight: var(--peso-normal);
  letter-spacing: 0;
  text-transform: none;
  color: var(--totem-rotulo);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.totem__estacion:hover,
.totem__estacion:focus-visible { color: var(--totem-tinta); text-decoration: underline; }
.totem__fila { align-items: center; }

/* --- Ficha de la más barata ----------------------------------------------
   Tres datos que el panel no puede dar —dónde está, cuándo abre y cuánto se
   estira el precio en el municipio— en forma de lista de definición, que es lo
   que son. En prosa quedaban tres frases que repetían el nombre del carburante
   y no añadían nada a lo que ya se ve al lado. */
.ficha-barata { display: grid; gap: var(--espacio-3); margin: 0; }
.ficha-barata > div {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: var(--espacio-3);
  align-items: baseline;
}
.ficha-barata dt {
  font-size: var(--texto-nota);
  color: var(--tinta-apagada);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ficha-barata dd { margin: 0; font-size: var(--texto-pequeno); }
@media (max-width: 40rem) {
  .ficha-barata > div { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* --- La gasolinera, en la tabla ------------------------------------------
   La píldora con borde estaba pensada para un chip de marca suelto, y dentro de
   una tabla de dieciocho filas convertía el nombre —que es el dato por el que
   la gente recorre la lista— en una etiqueta pequeña y encerrada. Aquí el
   nombre es un nombre: cuerpo normal, peso fuerte, el logotipo delante como
   ancla visual y la dirección debajo, apagada.

   Se sube la especificidad a propósito para ganarle a `.insignia-marca` sin
   tocarla: fuera de la tabla, la píldora sigue siendo lo correcto. */
.tabla-precios .col-estacion .insignia-marca {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  font-size: var(--texto-base);
  font-weight: var(--peso-titular);
  white-space: normal;
  gap: var(--espacio-3);
}
.tabla-precios .col-estacion .insignia-marca__logo {
  width: 1.75rem;
  height: 1.75rem;
}
.tabla-precios .col-estacion .insignia-marca__texto { overflow: visible; }
.tabla-precios .col-estacion > a { text-decoration: none; color: inherit; }
.tabla-precios .col-estacion > a:hover .insignia-marca__texto,
.tabla-precios .col-estacion > a:focus-visible .insignia-marca__texto {
  color: var(--azul-enlace);
  text-decoration: underline;
}
/* La dirección se separa del nombre y se alinea con él, no con el logotipo. */
.tabla-precios .col-estacion__direccion { margin-top: 0.15rem; padding-left: 2.5rem; }

/* La chapa con la inicial, para las marcas sin logotipo. */
.insignia-marca__logo--letra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--superficie-alta);
  border: var(--linea) solid var(--borde);
  color: var(--tinta-apagada);
  font-size: var(--texto-nota);
  font-weight: var(--peso-titular);
}

/* --- Selector de carburante ---------------------------------------------- */
.selector-carburante {
  display: grid;
  gap: var(--espacio-2);
  padding: var(--espacio-4);
  border: var(--linea) solid var(--borde);
  border-radius: var(--radio-medio);
  background: var(--superficie);
  margin-bottom: var(--espacio-6);
}
.selector-carburante__titulo { font-weight: var(--peso-fuerte); }
.selector-carburante__opciones { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
.selector-carburante__opciones button {
  padding: var(--espacio-2) var(--espacio-4);
  border: var(--linea) solid var(--borde-control);
  border-radius: var(--radio-pildora);
  background: var(--superficie-alta);
  color: var(--tinta);
  font: inherit;
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
  /* Objetivo táctil: por debajo de 44 px se falla al pulsar en un móvil. */
  min-height: 2.75rem;
}
.selector-carburante__opciones button[aria-pressed='true'] {
  background: var(--azul-accion);
  border-color: var(--azul-accion);
  color: var(--tinta-inversa);
}
.selector-carburante__opciones button:focus-visible {
  outline: var(--grosor-foco) solid var(--color-foco);
  outline-offset: 2px;
}
.selector-carburante__nota { font-size: var(--texto-nota); color: var(--tinta-apagada); }
/* Sin JavaScript no hay selector que valga: se esconde el mando, no el dato. */
html:not(.con-js) .selector-carburante__opciones { display: none; }

/* La columna elegida, destacada en la tabla. */
.tabla-precios [data-columna-elegida] { background: var(--azul-tenue); }
.tabla-precios thead th[data-columna-elegida] { background: var(--azul-tenue); }

/* La fila del carburante que se está mirando, señalada en el panel. Un filo
   claro a la izquierda y algo más de luz de fondo: lo justo para encontrarla
   de un vistazo sin romper la lectura del panel, que sigue enseñándolos todos. */
.totem__fila[data-elegida] { background: rgb(255 255 255 / 0.07); }
.totem__fila[data-elegida]::before { inset-block: 0; width: 4px; }

/* La cifra grande va en verde tanto si es el ahorro como si es el precio.
   Se probó a distinguirlas —azul para el precio— con el argumento de que el
   verde afirma «esto te sale barato» y un precio a secas no lo afirma. Pero sí
   lo afirma: ese precio es EL MÁS BARATO de su carburante en el municipio, que
   es exactamente lo que ya dice en verde la fila del panel. Pintarlo distinto
   solo hacía que el GLP pareciera un caso de segunda. */

/* --- La fila del carburante elegido, más grande --------------------------
   Con el selector delante, agrandar la fila que se está mirando es responder,
   no suponer. Sin selector era lo contrario, y por eso estuvo fuera.

   El realce llega ya puesto desde el servidor para el carburante inicial, así
   que la página no da ningún salto al arrancar el JavaScript; solo cambia
   cuando la persona pulsa, que es movimiento que contesta a una acción. */
.totem__fila[data-elegida] .totem__numero { font-size: clamp(2.25rem, 26cqi, 3.5rem); }
.totem__fila[data-elegida] .totem__carburante { font-weight: var(--peso-titular); }