:root {
    /* DUAS COISAS QUE ANDAVAM COLADAS NUMA SO.
       ------------------------------------------------------------------
       --ink era ao mesmo tempo a cor do texto e a cor das superficies
       escuras (a barra de cima, os botoes). Enquanto o site so teve um
       tema isso nunca deu problema; com modo escuro da: o texto tem de
       passar a claro e as superficies escuras tem de continuar escuras.

       Ficam separadas:
         --ink       o texto. Muda com o tema.
         --forte     o escuro que e superficie e o texto que assenta sobre
                     o verde. Nao muda: preto sobre verde le-se nos dois.
         --contorno  as bordas fortes, que acompanham o texto.
         --card      o fundo das caixas (era #fff em 29 sitios).
         --card-2    o fundo dos campos de formulario.
         --surface   os fundos neutros de dentro das caixas.
         --line-2    as linhas finas (era #ddd7c7 / #e9e4d7). */
    --green: #08f26e;
    --green-strong: #00d85f;
    /* O VERDE QUE SE LE, QUE NAO E O VERDE QUE BRILHA.
       #08f26e sobre o fundo escuro salta a vista; sobre o papel creme da 1,4
       de contraste e o "Cash" da marca praticamente desaparecia. Este e o
       mesmo verde escurecido ate se ler sobre claro — e no tema escuro volta
       a ser o outro, porque la o problema nao existe.

       Escurecido de #0a8f45 para aqui depois de medido: o primeiro valor dava
       3,94 sobre o creme e 4,18 sobre o branco dos cartoes — abaixo do minimo
       legivel nos dois, e o "Cash" da marca era exatamente isso. Este da 5,45
       e 5,14. A olho a diferenca nao se ve; no ecra de quem le mal, ve-se. */
    --green-texto: #077a3a;
    --ink: #261b14;
    --ink-2: #3a2a20;
    --paper: #fff7ef;
    --cream: #f5efe7;
    --line: rgba(38, 27, 20, 0.14);
    --muted: #6e625a;
    --blue: #1867c9;
    --yellow: #ffd447;
    --danger: #ff684d;
    /* O vermelho de aviso e vivo demais para TEXTO: sobre branco da 2,86:1,
       abaixo do minimo legivel. Este e o mesmo tom, escurecido so o
       suficiente para se ler (4,6:1). */
    --danger-texto: #b32d13;
    --shadow: 0 18px 48px rgba(38, 27, 20, 0.13);
    --forte: #261b14;
    --contorno: #261b14;
    --card: #fff;
    --card-2: #fdfcf8;
    --surface: #f4f1e8;
    --line-2: #ddd7c7;
    /* A CAIXA DO PRECO TEM TOKEN PROPRIO.
       Emprestava o --surface, que serve dezenas de fundos neutros; no tema
       escuro esse tom fica a 1,09 do cartao — ou seja, invisivel, e os precos
       dos dois paises apareciam soltos em vez de lado a lado em duas caixas.
       Mexer no --surface para resolver isto mudava tudo o resto. Assim a
       caixa tem a sua propria cor e clareia so ela. */
    --preco-caixa: #f4f1e8;
    --preco-borda: #ddd7c7;
    --warn-bg: #fff6e2;
    --good-bg: #e9f9ec;
    --grid: #e6e0d2;
    /* O papel e o cartao, um pouco transparentes: e o vidro fosco das barras
       fixas e dos paineis. Eram rgba(255,...) fixos e por isso ficavam
       brancos no tema escuro, mesmo com todo o resto ja trocado. */
    /* O creme por cima do hero escuro. NAO muda com o tema: o hero e escuro
       nos dois, e foi isto que partiu na migracao — virou texto escuro sobre
       fundo escuro, com a frase que diz onde o produto e mais barato a
       desaparecer por completo. */
    --sobre-escuro: rgba(255, 247, 239, 0.86);
    --barra: rgba(255, 247, 239, 0.92);
    --card-vidro: rgba(255, 255, 255, 0.74);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 14px clamp(18px, 5vw, 64px);
    background: var(--barra);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(16px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    font-size: 1.2rem;
}

/* A marca passou a ser o icone, e o icone ja traz o fundo verde e o contorno
   preto desenhados. Manter aqui o quadrado verde com borda punha uma moldura
   por cima de outra. */
.brand-mark {
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    object-fit: contain;
}

.nav {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.nav a,
.icon-button {
    min-height: 38px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}

.nav a.active,
.nav a:hover,
.icon-button:hover {
    color: var(--ink);
    border-color: var(--line);
    background: var(--card);
}

main {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    /* 72px de folga no fim eram um buraco: nas paginas que acabam num botao
       — a ficha do produto acaba no "Reportar um erro" — ficava uma faixa
       vazia do tamanho de meia secao antes do rodape, que se le como se
       faltasse ali qualquer coisa. 28px separa sem abrir um vao. */
    padding: 18px 0 28px;
}

.flash {
    width: min(1180px, calc(100% - 32px));
    margin: 18px auto 0;
    padding: 14px 16px;
    border: 1px solid rgba(0, 216, 95, 0.4);
    border-radius: 8px;
    background: rgba(8, 242, 110, 0.16);
    font-weight: 700;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    /* O HERO NAO PRECISA DE UM ECRA INTEIRO.
       460px mais o cabecalho enchiam quase toda a altura util num portatil, e
       quem chega tinha de fazer scroll para chegar ao primeiro preco — que e
       aquilo a que veio. A caixa da direita, que e a que trabalha, continua a
       definir a altura quando precisa de mais. */
    min-height: min(360px, calc(100vh - 190px));
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(115deg, rgba(38, 27, 20, 0.95) 0 52%, rgba(8, 242, 110, 0.95) 52% 100%),
        var(--ink);
    box-shadow: var(--shadow);
}

.hero-copy {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(26px, 5vw, 58px);
    color: var(--green);
}

.eyebrow {
    margin: 0 0 12px;
    color: currentColor;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    max-width: 760px;
    margin-bottom: 18px;
    font-size: clamp(2.7rem, 6.2vw, 5rem);
    line-height: 0.95;
    font-weight: 950;
}

.hero-copy h1 {
    max-width: 700px;
    font-size: clamp(2.8rem, 5.6vw, 4.8rem);
}

h2 {
    margin-bottom: 14px;
    font-size: 1.35rem;
    line-height: 1.1;
}

/* A cor por omissao e a que se le sobre o fundo claro, que e onde estao
   quase todos os `.lead`. Era ao contrario — creme, pensado para o hero
   escuro — e cada texto fora do hero precisava de uma excepcao. Faltava
   uma: a frase "Portugal esta mais barato. Poupanca de 0,14 EUR" na ficha
   do produto ficava creme sobre creme, com 1,00:1 de contraste. Invisivel,
   e era a frase mais importante da pagina.

   Assim, esquecer uma excepcao passa a dar texto legivel no sitio errado,
   em vez de texto que desaparece. */
.lead {
    max-width: 620px;
    margin-bottom: 20px;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.55;
}

.hero .lead,
.hero-copy .lead,
.station-highlight .lead {
    color: var(--sobre-escuro);
}

.hero-actions,
.session {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* No hero, dois botoes grandes que nao caibam lado a lado descem um para
   baixo do outro e continua a ler-se bem. Na barra de topo nao: nao ha para
   onde descer sem a barra crescer e ficar com um botao solto numa segunda
   linha. A sessao partilhava esta regra com o hero e herdava o `wrap` que so
   faz sentido la. */
.hero-actions {
    flex-wrap: wrap;
}

.session {
    flex-wrap: nowrap;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 16px;
    border-radius: 8px;
    border: 2px solid var(--contorno);
    font-weight: 900;
    cursor: pointer;
}

.button.primary {
    background: var(--green);
    color: var(--forte);
}

.button.dark {
    background: var(--forte);
    color: var(--green);
}

.button.ghost {
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
}

.button.small {
    min-height: 38px;
    padding: 8px 12px;
}

.button.mini {
    min-height: 32px;
    padding: 6px 10px;
    border-width: 1px;
    font-size: 0.78rem;
    line-height: 1.1;
}

.button.full,
.surface-link {
    width: 100%;
}

.decision-card {
    align-self: center;
    margin: clamp(20px, 4vw, 42px);
    padding: 22px;
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14);
}

.mini-label,
.category,
.muted {
    color: var(--muted);
}

.mini-label,
.category {
    display: block;
    margin-bottom: 8px;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.route-metric {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 18px 0;
}

.route-metric span {
    padding: 16px;
    border-radius: 8px;
    background: var(--green);
    font-size: 1.25rem;
    font-weight: 950;
    text-align: center;
}

.compare-layout,
.settings-grid,
.admin-grid,
/* A PAGINA DE CONTA: O TITULO PRECISA DE LARGURA, O FORMULARIO NAO.
   ---------------------------------------------------------------------------
   As colunas eram 340px para o texto e o resto para o formulario — ao
   contrario do que faz sentido. "Entre para contar com o seu carro e a sua
   cidade" em 340px com corpo de titulo quebrava uma palavra por linha, oito
   linhas a descer pelo ecra, enquanto o formulario ocupava 900px para tres
   campos.

   Invertido: o texto fica com a maior parte e o formulario com uma coluna do
   tamanho de um formulario. */
.auth-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 36px;
    margin-top: 26px;
    align-items: center;
}

.auth-layout h1 {
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    line-height: 1.04;
    text-wrap: balance;
}

.auth-layout form {
    max-width: 460px;
}

@media (max-width: 860px) {
    .auth-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

.home-compare {
    grid-template-columns: 300px minmax(0, 1fr);
}

.auth-layout {
    min-height: 70vh;
    align-items: center;
}

.page-heading {
    margin: 34px 0 16px;
}

.page-heading h1,
.auth-layout h1 {
    color: var(--ink);
    font-size: clamp(2.4rem, 6vw, 4.8rem);
}

.panel,
.price-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card-vidro);
    box-shadow: 0 12px 34px rgba(38, 27, 20, 0.08);
}

.panel {
    padding: 20px;
}

/* O SELO DE SUBIU/DESCEU
   ----------------------
   Canto superior direito do cartao, pequeno e fora do caminho. Nao e o
   assunto do cartao — o assunto e o preco — mas e o que diz se aquele preco
   ainda e o de sempre ou se acabou de mudar.

   Verde para desceu e vermelho para subiu, mas nunca SO cor: a seta diz o
   mesmo sem depender de se distinguir verde de vermelho, e cerca de um homem
   em doze nao distingue. O numero da a grandeza, que a seta sozinha nao da.

   Por baixo esta uma explicacao em `title` com os dois precos, porque "-4,2%"
   sem saber de quanto para quanto e quase informacao nenhuma. */
.product-tile,
.price-card {
    position: relative;
    /* A MESMA ANIMACAO DOS CARTOES DE POSTO.
       Os cartoes de posto sobem dois pixeis e acendem o contorno ao passar o
       rato; os de produto nao faziam nada. Duas listas do mesmo site que
       respondem de maneira diferente ao mesmo gesto parecem dois sites. */
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.product-tile:hover,
.product-tile:focus-within,
.price-card:hover,
.price-card:focus-within {
    transform: translateY(-2px);
    border-color: var(--green-strong);
}

/* Quem prefere o ecra quieto nao leva movimento nenhum — e uma preferencia
   do sistema, e ha quem a tenha por enjoo e nao por gosto. */
@media (prefers-reduced-motion: reduce) {
    .product-tile,
    .price-card,
    .station-card,
    .station-mini,
    .blog-cartao,
    .blog-destaque {
        transition: none;
    }

    .product-tile:hover,
    .price-card:hover,
    .station-card:hover,
    .station-mini:hover,
    .blog-cartao:hover,
    .blog-destaque:hover {
        transform: none;
    }
}

.selo-tendencia {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    cursor: help;
}

/* O texto do selo e mais escuro do que o --green-texto/--danger-texto gerais:
   aqui assenta sobre a propria pastilha colorida, nao sobre o papel, e medido
   dava 4,44 — logo abaixo do minimo legivel. Estes dao 5,4 e 5,1. */
.selo-desceu {
    background: rgba(8, 242, 110, 0.17);
    border-color: rgba(8, 242, 110, 0.45);
    color: #056230;
}

.selo-subiu {
    background: rgba(255, 104, 77, 0.17);
    border-color: rgba(255, 104, 77, 0.5);
    color: #96240f;
}

/* No escuro os dois tons de texto sao escuros de mais para o fundo da
   pastilha; passam aos vivos, que ai e que se leem. */
:root:not([data-tema="claro"]) .selo-desceu {
    color: #6bf7a8;
}

:root:not([data-tema="claro"]) .selo-subiu {
    color: #ff9c86;
}

[data-tema="escuro"] .selo-desceu {
    color: #6bf7a8;
}

[data-tema="escuro"] .selo-subiu {
    color: #ff9c86;
}

/* A linha que diz de onde sai a faixa de postos da home. Sem ela, quatro
   postos soltos nao dizem se estao perto de quem le ou do outro lado do
   pais — e essa e a unica coisa que os torna uteis. */
.faixa-origem {
    margin: 0 0 10px;
    font-size: 0.84rem;
}

.faixa-origem a {
    font-weight: 800;
}


.calculator {
    position: sticky;
    top: 86px;
}

.form {
    display: grid;
    gap: 14px;
}

label {
    display: grid;
    gap: 7px;
    font-weight: 800;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    color: var(--ink);
    padding: 12px;
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--green-strong);
    box-shadow: 0 0 0 4px rgba(8, 242, 110, 0.18);
}

input[type="range"] {
    accent-color: var(--green-strong);
    padding: 0;
}

.checkline {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 10px;
}

.checkline input {
    width: 18px;
    height: 18px;
}

.range-output,
.trip-box {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-radius: 8px;
    background: var(--forte);
    color: var(--green);
}

.range-output strong,
.trip-box strong {
    font-size: 1.2rem;
}

.results {
    display: grid;
    gap: 14px;
}

.section-stack {
    display: grid;
    gap: 22px;
}

.compare-section {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card-vidro);
    box-shadow: 0 12px 30px rgba(38, 27, 20, 0.07);
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
}

.section-head h2 {
    margin-bottom: 6px;
    font-size: 1.65rem;
}

.section-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.compact-price-card {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
}

.compact-price-card .result-photo {
    grid-row: span 3;
    aspect-ratio: 1;
    margin: 0;
}

.compact-price-card h2 {
    font-size: 1.1rem;
}

.compact-price-card .price-grid,
.compact-price-card .decision-line,
.compact-price-card .card-actions {
    grid-column: 2;
}

.compact-price-card .price-grid div {
    min-height: 68px;
    padding: 10px;
}

.compact-price-card .price-grid strong {
    font-size: 1.05rem;
}

.compact-price-card .decision-line {
    display: grid;
    gap: 4px;
}

.station-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.station-mini {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    /* A MESMA ANIMACAO DOS OUTROS CARTOES.
       Estes quatro postos da capa sao a mesma coisa que os cartoes da lista
       de gasolineiras e que os de produto: cartoes que levam a uma ficha.
       Sem o mesmo gesto ao passar o rato, parecem decoracao e nao um link. */
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.station-mini:hover,
.station-mini:focus-within {
    transform: translateY(-2px);
    border-color: var(--green-strong);
}

.station-mini img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--card);
}

.station-mini span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 750;
}

.station-mini b {
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--green);
    white-space: nowrap;
}

.price-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
    gap: 18px;
    padding: 18px;
}

.price-card h2 {
    margin-bottom: 8px;
    font-size: 1.45rem;
}

.quick-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 18px 0 28px;
}

.quick-stats a {
    display: grid;
    gap: 4px;
    min-height: 112px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    box-shadow: 0 12px 28px rgba(38, 27, 20, 0.07);
}

.quick-stats strong {
    font-size: 2rem;
    line-height: 1;
    font-weight: 950;
}

.quick-stats span {
    color: var(--muted);
    font-weight: 800;
}

.form-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.filter-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
}

.filter-strip a {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--muted);
    font-weight: 900;
}

.filter-strip a.active,
.filter-strip a:hover {
    border-color: var(--contorno);
    background: var(--green);
    color: var(--forte);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.product-tile {
    display: grid;
    gap: 16px;
    align-content: start;
    min-height: 430px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card-vidro);
    box-shadow: 0 12px 30px rgba(38, 27, 20, 0.08);
}

.product-photo,
.result-photo {
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--cream);
}

.product-photo {
    aspect-ratio: 4 / 3;
}

.result-photo {
    aspect-ratio: 16 / 9;
    margin-bottom: 14px;
}

.emoji-badge {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 2px solid var(--contorno);
    border-radius: 8px;
    background: var(--green);
    font-size: 1.45rem;
}

.emoji-badge.small {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
}

.country-row {
    display: grid;
    gap: 8px;
}

/* A CAIXA DO PRECO NA LISTAGEM — O MESMO COMPONENTE QUE A DA FICHA.
   ---------------------------------------------------------------------------
   Sao dois blocos de HTML diferentes que mostram a mesma coisa: .price-grid na
   ficha e nos cartoes da home, .country-row na listagem do catalogo. Quando se
   arranjou a caixa no tema escuro, arranjou-se so o primeiro — e a listagem,
   que e onde se passa mais tempo, continuou com os precos soltos no escuro
   sem nada a dizer que sao duas colunas comparaveis.

   Usam agora os MESMOS tokens. Se um dia a caixa mudar de cor, muda nos dois
   sitios ao mesmo tempo, que e a unica forma de isto nao voltar a acontecer. */
.country-row span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--preco-borda);
    background: var(--preco-caixa);
    color: var(--muted);
    font-weight: 800;
}

.country-row strong {
    color: var(--ink);
}

.recommendation {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(8, 242, 110, 0.16);
}

.recommendation span {
    color: var(--muted);
    font-weight: 750;
}

.tile-actions,
.card-actions {
    display: grid;
    gap: 10px;
    margin-top: auto;
}

.card-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
}

.station-highlight {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
    gap: 20px;
    align-items: center;
    margin-bottom: 22px;
    padding: clamp(20px, 4vw, 34px);
    border-radius: 8px;
    background: var(--forte);
    /* --paper acompanha o tema e aqui nao pode: o painel e escuro nos dois
       temas, por isso o texto tem de ser claro nos dois. Com --paper, no modo
       escuro ficava escuro sobre escuro e o cartao do posto em destaque
       desaparecia inteiro. */
    color: var(--sobre-escuro);
    box-shadow: var(--shadow);
}

.station-highlight h2 {
    color: var(--green);
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.station-group {
    margin-top: 22px;
}

.station-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* O CARTAO DE POSTO
   -----------------
   Tres coisas decidem: quem, quanto, e a que distancia. A morada e a hora
   declarada pela fonte saíram para a ficha — ajudam a confirmar, nao a
   escolher, e valiam metade da altura de cada cartao.

   O cartao inteiro e o link. Antes so o nome da marca levava a algum lado,
   que e um alvo pequeno dentro de uma superficie grande e clicavel-a-vista. */
.station-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas:
        "marca  id"
        "preco  preco"
        "meta   meta"
        "ver    ver";
    align-items: center;
    gap: 10px 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    box-shadow: 0 12px 30px rgba(38, 27, 20, 0.08);
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.station-card:hover,
.station-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--green-strong);
}

.station-card > .marca-logo { grid-area: marca; }
.station-id { grid-area: id; min-width: 0; }
.station-card .station-price { grid-area: preco; }
.station-card .station-meta { grid-area: meta; }
.station-ver { grid-area: ver; }

.station-id h3 {
    margin: 0 0 2px;
    font-size: 1rem;
    line-height: 1.25;
}

.station-id p {
    margin: 0;
    font-size: 0.8rem;
}

.station-card .station-price {
    font-size: 1.6rem;
    line-height: 1;
}

/* As pastilhas verdes escuras saem DENTRO do cartao: eram quatro caixas
   pesadas a competir com o preco, que e a unica coisa que a pessoa veio ver.
   Aqui sao texto, separados por pontos, e o preco fica sozinho em destaque.
   A regra geral .station-meta span continua a valer noutros sitios. */
.station-card .station-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    font-size: 0.8rem;
    color: var(--muted);
}

.station-card .station-meta span {
    display: inline;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    font-weight: 700;
    text-align: left;
}

/* nowrap para o ponto separador nao cair sozinho no inicio da linha
   seguinte quando o texto quebra. */
.station-card .station-meta span {
    white-space: nowrap;
}

.station-card .station-meta span + span::before {
    content: "·";
    margin-right: 10px;
    color: var(--line-2);
}

.station-tag-melhor {
    font-weight: 850;
    color: var(--green-texto);
}

.station-ver {
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--green-texto);
}

:root:not([data-tema="claro"]) .station-tag-melhor,
:root:not([data-tema="claro"]) .station-ver,
[data-tema="escuro"] .station-tag-melhor,
[data-tema="escuro"] .station-ver {
    color: #6bf7a8;
}

.brand-photo {
    width: 100%;
    height: 112px;
    object-fit: contain;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
}

.station-card.best-station {
    border-color: var(--contorno);
    background: rgba(8, 242, 110, 0.16);
}

.station-title {
    display: flex;
    gap: 12px;
    align-items: center;
}

.station-title h3 {
    margin-bottom: 4px;
    font-size: 1.25rem;
}

.station-price {
    font-size: 2rem;
    line-height: 1;
    font-weight: 950;
}

.station-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto;
}

.station-meta span {
    display: grid;
    place-items: center;
    min-height: 44px;
    padding: 8px;
    border-radius: 8px;
    background: var(--forte);
    color: var(--green);
    font-size: 0.86rem;
    font-weight: 900;
    text-align: center;
}

.empty-state {
    display: grid;
    gap: 14px;
    place-items: start;
    padding: clamp(24px, 5vw, 46px);
    border-radius: 8px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.cart-list {
    display: grid;
    gap: 12px;
}

.cart-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 96px;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
}

.cart-row img {
    width: 120px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
}

.cart-total {
    position: sticky;
    top: 86px;
    display: grid;
    gap: 12px;
}

.total-line,
.final-total {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.final-total {
    margin: 4px 0 8px;
    padding: 16px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    font-size: 1.15rem;
    font-weight: 950;
}

.product-detail {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    margin-top: 28px;
}

.product-detail > img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.detail-grid {
    margin: 22px 0;
}

.identity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 0 18px;
}

.identity-grid span {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 850;
}

.identity-grid strong {
    color: var(--ink);
    font-size: 1rem;
}

.freshness {
    margin: -4px 0 18px;
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 780;
}

.inline-cart {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    align-items: end;
}

.offers-panel,
.history-panel {
    margin-top: 24px;
}

.offer-list {
    display: grid;
    gap: 10px;
}

.offer-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
}

.offer-row.best-offer {
    border-color: var(--contorno);
    background: rgba(8, 242, 110, 0.15);
}

.offer-row.missing-offer {
    background: var(--card-vidro);
}

.offer-row img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
}

.offer-row span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 760;
}

.offer-row b {
    font-size: 1.25rem;
    white-space: nowrap;
}

.offer-row.missing-offer b {
    color: var(--muted);
    font-size: 1rem;
}

.offer-actions {
    display: grid;
    justify-items: end;
    gap: 8px;
}

.history-chart {
    display: grid;
    gap: 12px;
}

.history-row {
    display: grid;
    grid-template-columns: 46px minmax(80px, 1fr) 100px minmax(80px, 1fr) 100px;
    gap: 10px;
    align-items: center;
}

.bar-track {
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--cream);
}

.bar {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.bar.spain {
    background: var(--green);
}

.bar.portugal {
    background: var(--blue);
}

.price-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* A CAIXA DO PRECO TEM DE SE VER NOS DOIS TEMAS.
   No claro, --card e branco sobre creme e a caixa desenha-se sozinha. No
   escuro, --card e quase a cor do fundo e a caixa desaparecia: ficavam dois
   precos soltos no meio do nada, sem nada a dizer que sao duas colunas
   comparaveis. Passa a ter a superficie de dentro dos cartoes e um contorno
   que se ve. */
.price-grid div {
    min-height: 88px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--preco-borda);
    border-radius: 8px;
    background: var(--preco-caixa);
}

.price-grid .winner {
    background: var(--green);
    border-color: var(--contorno);
}

.price-grid span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 850;
}

.price-grid strong {
    font-size: 1.35rem;
}

.decision-line {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    font-weight: 750;
}

.decision-line.positive {
    background: rgba(8, 242, 110, 0.18);
}

.decision-line.caution {
    background: rgba(255, 212, 71, 0.25);
}

.admin-grid {
    grid-template-columns: repeat(3, minmax(260px, 1fr));
}

.table-panel {
    grid-column: 1 / -1;
}

.api-status {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(8, 242, 110, 0.14);
}

.api-status span {
    color: var(--muted);
    font-weight: 800;
}

.progress-meter {
    overflow: hidden;
    height: 12px;
    border: 1px solid rgba(38, 27, 20, 0.18);
    border-radius: 999px;
    background: var(--card-vidro);
}

.progress-meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--green);
}

.api-refresh-card {
    align-content: start;
}

.run-log {
    min-height: 42px;
    margin: 0;
    color: var(--muted);
    font-weight: 850;
}

.table-scroll {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 13px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

th {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.table-thumb,
.table-logo {
    display: block;
    width: 58px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--card);
    object-fit: cover;
}

.table-logo {
    object-fit: contain;
    padding: 7px;
}

.tag {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--green);
    font-weight: 900;
}

@media (max-width: 860px) {
    /* A MESMA BARRA PARTIDA, UM ECRA ACIMA.
       -------------------------------------------------------------------
       Isto era `grid-template-columns: 1fr`, ou seja, a barra empilhava em
       tres linhas entre os 721 e os 860px: a marca, o menu e — sozinhos na
       terceira linha, encostados a direita — o tema e os dois botoes. Com
       173px de altura, colada ao topo. Abaixo dos 720 as regras do
       telemovel repunham duas colunas, por isso o defeito so existia nesta
       faixa: tablet ao alto, telemovel ao deitado, janela meia-ecra.

       Nao ha aqui falta de espaco que justifique empilhar: o menu ja rola
       na horizontal e cede a largura que for precisa. Uma linha so, como
       em todas as outras larguras. */
    .topbar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 12px;
    }

    .nav {
        justify-content: flex-start;
        overflow-x: auto;
    }

    .hero,
    .compare-layout,
    .home-compare,
    .settings-grid,
    .admin-grid,
    .auth-layout,
    .price-card,
    .quick-stats,
    .product-grid,
    .station-highlight,
    .station-grid,
    .form-split,
    .cart-layout,
    .product-detail,
    .card-actions,
    .inline-cart,
    .section-cards,
    .station-strip,
    .compact-price-card,
    .identity-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: auto;
        background: linear-gradient(180deg, var(--forte) 0 66%, var(--green) 66% 100%);
    }

    .hero-copy {
        padding: 34px 22px;
    }

    h1,
    .hero-copy h1 {
        font-size: clamp(2.25rem, 12vw, 3.7rem);
    }

    /* Este creme claro e para o texto DENTRO do hero escuro. Aplicado a
       todos os `.lead`, deixava invisivel — creme sobre creme — a frase que
       diz onde o produto e mais barato, que e a frase mais importante da
       ficha. */
    .hero-copy .lead,
    .hero .lead {
        color: var(--sobre-escuro);
    }

    .calculator {
        position: static;
    }

    .decision-line {
        display: grid;
    }

    .cart-total {
        position: static;
    }

    .section-head {
        display: grid;
    }

    .compact-price-card .result-photo,
    .compact-price-card .price-grid,
    .compact-price-card .decision-line,
    .compact-price-card .card-actions {
        grid-column: auto;
    }

    .station-mini {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .station-mini b {
        grid-column: 1 / -1;
        text-align: center;
    }

    .offer-row {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .offer-actions {
        grid-column: 1 / -1;
        justify-items: stretch;
    }

    .offer-row b {
        padding: 10px;
        border-radius: 8px;
        background: var(--green);
        text-align: center;
    }

    /* A pastilha verde e para um PRECO. Quando a oferta nao existe, o texto
       "Nao encontrado" ficava cinzento sobre o verde vivo — 1,80 de
       contraste, ilegivel — e alem disso anunciava em verde uma coisa que nao
       ha. Fica com o aspeto do resto do cartao e le-se. */
    .offer-row.missing-offer b {
        background: transparent;
        border: 1px dashed var(--line-2);
        color: var(--muted);
    }

    .cart-row {
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .cart-row label {
        grid-column: 1 / -1;
    }

    .cart-row img {
        width: 90px;
    }

    .history-row {
        grid-template-columns: 42px minmax(90px, 1fr) 88px;
    }

    .history-row .bar-track:nth-of-type(2),
    .history-row strong:nth-of-type(2) {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* Preco ausente, foto em falta e avisos                               */
/* ------------------------------------------------------------------ */

/* "Nao encontrado" nao pode competir visualmente com um preco real. */
/* A OPACIDADE SAIU.
   opacity: .62 baixava o texto para 1,80 de contraste no tema escuro — ou
   seja, "Nao encontrado" ficava por ler, e quem nao o consegue ler fica sem
   saber se o preco falta ou se e zero. A intencao continua certa: isto nao
   pode competir com um preco a serio. Consegue-se com peso e cor, que nao
   apagam o texto. */
.price-grid > div.unavailable,
.country-row > span.unavailable {
    background: transparent;
    border-style: dashed;
}

.price-grid > div.unavailable strong,
.country-row > span.unavailable strong,
.price-grid > div.unavailable b,
.country-row > span.unavailable b {
    font-size: .95rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: -.01em;
    opacity: 1;
}

.price-note {
    display: block;
    margin-top: .35rem;
    font-size: .74rem;
    font-style: normal;
    line-height: 1.35;
    color: var(--muted);
}

/* Placeholder de foto: fica com a mesma caixa da foto real. */
img.photo-missing {
    object-fit: contain;
    background: var(--surface);
    padding: .35rem;
}

.cart-warning {
    margin: 0 0 .9rem;
    padding: .7rem .8rem;
    border-radius: 12px;
    background: var(--warn-bg);
    border: 1px solid #f0dcae;
    font-size: .8rem;
    line-height: 1.45;
    color: #6b5a2c;
}

/* ------------------------------------------------------------------ */
/* Admin: navegacao por seccoes e painel de saude                      */
/* ------------------------------------------------------------------ */

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0 0 1.2rem;
}

.admin-tabs a {
    padding: .5rem .85rem;
    border-radius: 999px;
    border: 1px solid #e3ded1;
    background: var(--card);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--muted);
}

.admin-tabs a.active {
    background: #111;
    border-color: #111;
    color: #fff;
}

.health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .7rem;
}

.health-card {
    padding: .8rem .9rem;
    border-radius: 14px;
    background: var(--card);
    border: 1px solid var(--line-2);
}

.health-card strong {
    display: block;
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.health-card span {
    display: block;
    margin-top: .2rem;
    font-size: .76rem;
    color: var(--muted);
}

.health-card.warn {
    background: var(--warn-bg);
    border-color: #f0dcae;
}

.health-card.good {
    background: var(--good-bg);
    border-color: #bfe6c6;
}

.cron-recipe {
    margin: 0;
    padding: .85rem;
    border-radius: 12px;
    background: #14140f;
    color: #e9f9ec;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .74rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
}

.review-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: .6rem 0;
    border-bottom: 1px solid #eee8da;
}

.review-row:last-child {
    border-bottom: 0;
}

.review-row img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--surface);
}

.review-row .review-main {
    flex: 1 1 220px;
    min-width: 0;
}

.review-row .review-main strong {
    display: block;
    font-size: .87rem;
}

.review-row .review-main span {
    font-size: .75rem;
    color: var(--muted);
}

.review-form {
    display: flex;
    gap: .4rem;
    align-items: center;
    flex: 0 1 320px;
}

.review-form input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .45rem .6rem;
    border-radius: 9px;
    border: 1px solid var(--line-2);
    font-size: .78rem;
    background: var(--card);
}

/* ------------------------------------------------------------------ */
/* Barra de busca e filtros do catalogo                                */
/* ------------------------------------------------------------------ */

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

.catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem;
    margin: 0 0 1rem;
    padding: .9rem;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--line-2);
}

.catalog-toolbar .search-field {
    flex: 1 1 260px;
}

.catalog-toolbar input[type="search"],
.catalog-toolbar select {
    width: 100%;
    padding: .6rem .75rem;
    border-radius: 11px;
    border: 1px solid var(--line-2);
    background: var(--card-2);
    font-size: .87rem;
    font-family: inherit;
    color: var(--ink);
}

.catalog-toolbar input[type="search"]:focus,
.catalog-toolbar select:focus {
    outline: 2px solid var(--contorno);
    outline-offset: 1px;
}

.toolbar-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    flex: 0 1 190px;
}

.toolbar-field > span {
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted);
}

.toolbar-check {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem .75rem;
    border-radius: 11px;
    border: 1px solid var(--line-2);
    background: var(--card-2);
    font-size: .8rem;
    cursor: pointer;
}

.result-count {
    margin: 0 0 1rem;
    font-size: .82rem;
    color: var(--muted);
}

.result-count a {
    color: var(--ink);
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Grafico de oscilacao de preco                                       */
/* ------------------------------------------------------------------ */

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin: .3rem 0 .8rem;
    font-size: .82rem;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--muted);
}

.legend-item em {
    font-style: normal;
    color: var(--muted);
    font-size: .78rem;
}

.legend-swatch {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    display: inline-block;
}

/* O GRAFICO NAO ROLA PARA O LADO. NUNCA.
   ---------------------------------------------------------------------------
   Tinha min-width: 480px dentro de uma caixa com overflow-x: auto. Num
   telemovel de 390px isso e uma barra de scroll horizontal num cartao que cabe
   no ecra — e o utilizador tem de arrastar para ver o fim da linha, quando a
   informacao toda podia estar a vista.

   O min-width existia por uma razao verdadeira: o SVG tem viewBox, por isso
   encolhe inteiro, TEXTO INCLUIDO. A 390px o eixo passava de 11 px para 5,5 e
   deixava de se ler. Mas a solucao para texto pequeno e aumentar o texto, nao
   obrigar a pagina a ser maior do que o ecra: o tamanho da letra do SVG esta
   em unidades do viewBox, e por isso pode crescer nas telas estreitas ate dar
   o mesmo tamanho real que dava no computador. E o que a media query abaixo
   faz. */
.chart-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.price-chart {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* Grelha e eixos recessivos: os dados e que tem de saltar a vista. */
.price-chart .chart-grid {
    stroke: var(--grid);
    stroke-width: 1;
}

.price-chart .chart-axis {
    font-size: 11px;
    fill: #8b8578;
    font-family: inherit;
}

.price-chart .chart-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Anel da cor do fundo: onde as duas linhas se cruzam, os pontos
   continuam a ler-se em vez de se fundirem num borrao. */
.price-chart .chart-dot {
    stroke: var(--card);
    stroke-width: 2;
    cursor: pointer;
    transition: r .12s ease;
}

.price-chart .chart-dot:hover,
.price-chart .chart-dot:focus {
    r: 6;
    outline: none;
}

.price-chart .chart-endlabel {
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
}

.chart-tooltip {
    position: absolute;
    transform: translate(-50%, -100%);
    padding: .45rem .6rem;
    border-radius: 10px;
    background: #14140f;
    color: #fdf5ec;
    font-size: .75rem;
    line-height: 1.35;
    pointer-events: none;
    white-space: nowrap;
    z-index: 5;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.chart-tooltip strong,
.chart-tooltip span,
.chart-tooltip b {
    display: block;
}

.chart-tooltip span {
    opacity: .75;
}

.chart-table {
    margin-top: .9rem;
    font-size: .82rem;
}

.chart-table summary {
    cursor: pointer;
    color: var(--muted);
    font-weight: 600;
}

.chart-empty {
    padding: 1.4rem 0;
}

/* ------------------------------------------------------------------ */
/* Localizacao, viagem e abastecimento                                 */
/* ------------------------------------------------------------------ */

.location-form {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-bottom: 1rem;
}

.location-form label,
.inline-form label {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--muted);
}

.location-form input,
.location-form select,
.inline-form input,
.inline-form select {
    padding: .55rem .65rem;
    border-radius: 10px;
    border: 1px solid var(--line-2);
    background: var(--card);
    font-family: inherit;
    font-size: .87rem;
    font-weight: 500;
    color: var(--ink);
}

.trip-estimate {
    padding-top: .9rem;
    border-top: 1px dashed var(--line-2);
}

.trip-estimate strong {
    display: block;
    margin: .3rem 0 .5rem;
    font-size: 1rem;
}

.trip-estimate p {
    margin: .6rem 0 0;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--muted);
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem;
}

.inline-form label {
    flex: 1 1 150px;
}

.refuel-form.highlight {
    border: 2px solid #3ddc73;
}

.tank-line {
    margin: .2rem 0 .4rem;
    font-size: .85rem;
}

.freshness {
    font-size: .73rem;
    color: var(--muted);
    margin: .3rem 0 0;
}

/* ------------------------------------------------------------------ */
/* Comparador de dois produtos                                         */
/* ------------------------------------------------------------------ */

.compare-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .8rem;
    margin: 0 0 1.2rem;
    padding: 1rem;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--line-2);
}

.compare-slot {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
    flex: 1 1 320px;
}

.compare-slot label {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--muted);
}

.compare-slot label:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.compare-slot select,
.compare-slot input {
    padding: .55rem .65rem;
    border-radius: 10px;
    border: 1px solid var(--line-2);
    background: var(--card-2);
    font-family: inherit;
    font-size: .85rem;
    color: var(--ink);
    max-width: 100%;
}

.compare-slot input[type="number"] {
    width: 74px;
}

.compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.compare-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.1rem;
    border-radius: 18px;
    background: var(--card);
    border: 1px solid var(--line-2);
}

.compare-card img.compare-photo {
    width: 100%;
    max-height: 190px;
    object-fit: contain;
    border-radius: 12px;
    background: #f7f4ec;
}

.compare-card h2 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
}

.compare-verdict {
    margin: 0;
    font-size: .82rem;
    color: var(--muted);
}

.compare-total .total-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid #f0ebdd;
    font-size: .88rem;
}

.compare-total .final-total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-top: .8rem;
    padding: .8rem .9rem;
    border-radius: 14px;
    background: var(--surface);
    font-size: 1rem;
    font-weight: 700;
}

.compare-total .final-total.positive {
    background: var(--good-bg);
}

.compare-total .final-total.caution {
    background: var(--warn-bg);
}

@media (max-width: 640px) {
    .catalog-toolbar,
    .compare-picker {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-field,
    .compare-slot {
        flex: 1 1 auto;
    }
}

/* Ajustes finos: nada de rotulos partidos a meio. */
.nav a {
    white-space: nowrap;
}

.toolbar-check {
    white-space: nowrap;
    align-self: flex-end;
}

.toolbar-check span {
    font-weight: 500;
}

.catalog-toolbar .button {
    align-self: flex-end;
}

/* A data de coleta tambem tem de se ler sobre o cartao escuro. */
.station-highlight .freshness {
    color: rgba(253, 245, 236, .72);
}

/* Campo com sugestoes do comparador de preco. */
.compare-slot label:first-child {
    position: relative;
}

.compare-slot input[type="text"] {
    width: 100%;
    padding: .55rem .65rem;
    border-radius: 10px;
    border: 1px solid var(--line-2);
    background: var(--card-2);
    font-family: inherit;
    font-size: .85rem;
    color: var(--ink);
}

.picker-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin: .25rem 0 0;
    padding: .25rem;
    list-style: none;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--line-2);
    box-shadow: 0 12px 28px rgba(20, 20, 15, .12);
    max-height: 280px;
    overflow-y: auto;
}

.picker-option {
    padding: .45rem .55rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 400;
}

.picker-option strong {
    display: block;
    font-size: .84rem;
    line-height: 1.25;
    color: var(--ink);
}

.picker-option span {
    font-size: .72rem;
    color: var(--muted);
}

.picker-option:hover,
.picker-option.active {
    background: var(--surface);
}

.picker-empty {
    padding: .5rem .55rem;
    font-size: .78rem;
    color: var(--muted);
}

/* ------------------------------------------------------------------ */
/* Botao flutuante de idioma                                           */
/* ------------------------------------------------------------------ */

/* O BOTAO FLUTUANTE DO IDIOMA SAIU.
   ---------------------------------------------------------------------------
   Era uma pastilha fixa no canto inferior direito, por cima do conteudo, em
   todas as paginas. Um controlo que se usa uma vez na vida — e que desde que a
   lingua passou a vir do aparelho quase nunca se usa — nao justifica tapar um
   canto do ecra para sempre. Fica no rodape, com o resto das preferencias.

   A regra continua aqui, desligada, porque o elemento ainda existe no HTML de
   algumas paginas; escondido e mais seguro do que arrancado a pressa. */
.lang-switch {
    display: none !important;
}

.lang-switch-antigo {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    display: flex;
    gap: .2rem;
    padding: .25rem;
    border-radius: 999px;
    background: #14140f;
    box-shadow: 0 10px 26px rgba(20, 20, 15, .28);
}

.lang-switch a {
    padding: .42rem .72rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    color: rgba(253, 245, 236, .72);
    white-space: nowrap;
}

.lang-switch a:hover {
    color: #fdf5ec;
}

.lang-switch a.active {
    background: #3ddc73;
    color: var(--ink);
}

@media (max-width: 640px) {
    .lang-switch {
        right: .6rem;
        bottom: .6rem;
    }

    .lang-switch a {
        padding: .38rem .6rem;
        font-size: .74rem;
    }
}

/* ==================================================================== */
/* PASSAGEM DE UX — 09/09/2026                                          */
/* ==================================================================== */

/* --- 1. O titulo do hero invadia a faixa verde ----------------------- */
/*                                                                       */
/* A coluna de texto ocupava 62,5% da largura, mas a faixa escura acaba  */
/* na diagonal aos 52%. As ultimas palavras do titulo ficavam por cima   */
/* do verde — verde sobre verde, ilegiveis ("cruzar" desaparecia). A     */
/* correcao prende a coluna de texto a uma percentagem MENOR do que a    */
/* diagonal, com folga suficiente para a inclinacao da linha: a          */
/* diagonal desloca-se com a altura, e o ponto mais apertado e o canto   */
/* inferior esquerdo.                                                    */

/* IMPORTANTE: so a partir dos 861px. Abaixo disso o hero ja empilha numa
   coluna so (regra mais acima) e o fundo passa a ser vertical. Aplicar aqui
   uma coluna de 46% partia o titulo letra a letra num telemovel. */
@media (min-width: 861px) {
    .hero {
        --hero-split: 60%;
        grid-template-columns: minmax(0, 46%) minmax(280px, 1fr);
        align-items: stretch;
        background:
            linear-gradient(115deg,
                rgba(38, 27, 20, 0.97) 0 var(--hero-split),
                rgba(8, 242, 110, 0.97) var(--hero-split) 100%),
            var(--ink);
    }

    .hero-copy {
        padding: clamp(24px, 3.4vw, 48px);
        padding-right: clamp(18px, 2vw, 32px);
        min-width: 0;
    }

    .hero-copy h1 {
        max-width: 100%;
        font-size: clamp(1.9rem, 3.6vw, 3.7rem);
    }

    .hero .decision-card {
        justify-self: end;
        width: min(100%, 400px);
        margin: clamp(18px, 3vw, 34px);
    }
}

/* Entre 861px e 1080px a diagonal fica mais apertada: menos texto por linha
   e a fronteira empurrada para a direita. */
@media (max-width: 1080px) and (min-width: 861px) {
    .hero {
        --hero-split: 66%;
        grid-template-columns: minmax(0, 50%) minmax(260px, 1fr);
    }

    .hero-copy h1 {
        font-size: clamp(1.8rem, 4.2vw, 2.9rem);
    }
}

.hero-copy .lead {
    max-width: 100%;
}

/* Uma palavra sem espacos (um EAN, um URL) nunca pode esticar a caixa. Nao
   se usa `hyphens: auto` aqui: numa coluna estreita partia palavras normais. */
.hero-copy h1 {
    overflow-wrap: break-word;
}

/* --- 2. Nada pode transbordar na horizontal -------------------------- */
/*                                                                       */
/* Scroll horizontal numa pagina de compras e sempre um defeito: esconde */
/* precos fora do ecra sem o utilizador perceber que ha mais para ver.   */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

main {
    min-width: 0;
}

/* Grelhas com colunas de largura minima fixa transbordam em ecras
   estreitos. `auto-fit` com minmax(0, ...) deixa-as encolher. */
.product-grid,
.section-cards,
.station-grid,
.compare-grid,
.health-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.quick-stats {
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

.station-mini {
    grid-template-columns: 44px minmax(0, 1fr) auto;
}

/* Palavras longas de nomes de produto (EANs, referencias) partem em vez
   de esticar o cartao. */
.product-tile h2,
.compare-card h2,
.offer-row strong,
.station-card h3,
.review-row .review-main strong,
.picker-option strong {
    overflow-wrap: anywhere;
}

.muted,
.lead,
.price-note {
    overflow-wrap: break-word;
}

/* Tabelas largas rolam dentro da propria caixa, nunca na pagina. */
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- 3. Caixas que se encostavam umas as outras ---------------------- */

.product-tile,
.compare-card,
.station-card,
.price-card {
    min-width: 0;
    /* Sem isto, o conteudo mais largo do que a coluna empurrava o cartao
       para cima do vizinho. */
    overflow: hidden;
}

.offer-row {
    gap: 12px;
    align-items: center;
}

.offer-actions {
    flex: 0 0 auto;
    text-align: right;
}

/* O painel de precos por pais precisa de respirar quando um dos lados
   tem a nota "nao encontrado". */
.price-grid.detail-grid > div {
    min-height: 96px;
    align-content: start;
}

/* --- 4. Barra de topo em ecras estreitos ----------------------------- */

@media (max-width: 860px) {
    .nav {
        gap: 4px;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    .nav a {
        padding: 8px 10px;
        font-size: 0.86rem;
    }

}

/* O botao de idioma e fixo: sem espaco reservado, tapava sempre a ultima
   linha da pagina — tipicamente o preco do ultimo produto da grelha. */
body {
    padding-bottom: 64px;
}

/* --- 5. Contraste e leitura ------------------------------------------ */

.hero-copy .lead {
    color: var(--sobre-escuro);
}

/* Nota de preco ausente sobre o cartao claro: era cinzento sobre bege,
   no limite do legivel. */
.price-note {
    color: #6f6a5e;
}

.result-count {
    line-height: 1.6;
}

/* --- 6. Barra de topo: encolher, nunca cortar ------------------------ */
/*                                                                       */
/* Com `overflow-x: hidden` no body, o que nao coubesse deixava de rolar */
/* e passava a ser CORTADO — os botoes "Entrar"/"Cadastrar" ficavam meio */
/* fora do ecra. A barra passa a ceder espaco ao menu em vez de empurrar */
/* os botoes para fora.                                                  */

.topbar {
    gap: clamp(10px, 2vw, 24px);
}

.topbar > .nav {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.topbar > .nav::-webkit-scrollbar {
    display: none;
}

.session {
    flex: 0 0 auto;
    justify-content: flex-end;
}

@media (max-width: 1240px) {
    .nav a {
        padding: 8px 10px;
        font-size: 0.9rem;
    }
}

/* --- 7. Titulos proporcionais ao que dizem --------------------------- */
/*                                                                       */
/* O tamanho do h1 foi desenhado para a frase curta do hero. Um nome de  */
/* produto tem 40 caracteres e ficava gigantesco, empurrando o preco     */
/* para fora do primeiro ecra — que e a informacao que a pessoa veio     */
/* buscar.                                                               */

.page-heading h1,
.product-detail h1 {
    font-size: clamp(1.8rem, 3.2vw, 2.9rem);
    line-height: 1.06;
    max-width: 24ch;
}

.product-detail h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.product-detail {
    align-items: start;
}

.product-detail > img {
    position: sticky;
    top: 92px;
}

@media (max-width: 860px) {
    .product-detail > img {
        position: static;
    }
}

/* Menu centrado que transborda: `center` faz o inicio ficar inacessivel
   (o "Comparar" aparecia cortado como "arar"). `safe center` centra
   quando cabe e alinha a esquerda quando nao cabe. */
.nav {
    justify-content: safe center;
}

/* Respiro entre o hero e a seccao seguinte: sem isto as duas faixas
   escuras encostavam e liam-se como um bloco so. */
.hero + section,
.hero + .station-highlight {
    margin-top: 18px;
}

/* Os botoes do hero cabem lado a lado numa coluna estreita se nao
   forcarem a largura toda. */
.hero-actions .button {
    flex: 0 1 auto;
}

/* ==================================================================== */
/* CAIXAS QUE SE PEGAVAM UMAS NAS OUTRAS — 09/09/2026                   */
/* ==================================================================== */

/* --- Botoes dos cartoes: o texto partia e ficava cortado ------------- */
/*                                                                       */
/* "Adicionar 🛒" nao cabia em metade da largura do cartao, partia em    */
/* duas linhas e a segunda saia fora do botao. Um botao de accao tem de  */
/* caber no que diz.                                                     */

.card-actions,
.tile-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
}

.card-actions .button,
.tile-actions .button {
    min-width: 0;
    padding-inline: 10px;
    font-size: 0.86rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Em cartoes estreitos vale mais empilhar do que encolher o texto. */
@media (max-width: 420px) {
    .card-actions,
    .tile-actions {
        grid-template-columns: 1fr;
    }
}

/* --- Rotulo e valor deixam de se encostar --------------------------- */
/*                                                                       */
/* "Custo estimado da viagem" e "EUR 0,71" partilhavam a linha sem       */
/* poderem encolher: o valor caia em cima do rotulo.                     */

.trip-box,
.range-output,
.total-line {
    flex-wrap: wrap;
    row-gap: 4px;
}

.trip-box > span,
.range-output > span,
.total-line > span {
    flex: 1 1 auto;
    min-width: 0;
}

.trip-box > strong,
.range-output > strong,
.total-line > strong {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right;
}

/* --- Linha de decisao do cartao ------------------------------------- */

.decision-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.decision-line strong,
.decision-line span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.decision-line span {
    font-weight: 600;
    font-size: 0.84rem;
}

/* --- Precos por pais dentro dos cartoes ------------------------------ */
/*                                                                       */
/* Duas colunas fixas transbordavam quando o preco era longo; a caixa    */
/* verde do pais vencedor ficava cortada na margem do cartao.            */

.price-grid,
.country-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.price-grid > div,
.country-row > span {
    min-width: 0;
    overflow-wrap: break-word;
}

/* --- Cartoes: encolher em vez de cortar ----------------------------- */
/*                                                                       */
/* `overflow: hidden` resolvia o transbordo escondendo conteudo. Num     */
/* comparador de precos, esconder um preco e o pior desfecho possivel:   */
/* melhor deixar o conteudo encolher.                                    */

.product-tile,
.compare-card,
.station-card,
.price-card {
    overflow: visible;
}

.product-tile > *,
.compare-card > *,
.price-card > * {
    min-width: 0;
}

/* --- Grelha da home -------------------------------------------------- */

.home-compare {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: start;
}

.section-stack,
.compare-section {
    min-width: 0;
}

@media (max-width: 980px) {
    .home-compare {
        grid-template-columns: 1fr;
    }
}

/* O emoji do botao e decorativo: quando nao ha espaco, desaparece antes de
   a palavra ser cortada. */
.card-actions .button,
.tile-actions .button {
    text-overflow: clip;
}

/* --- Preco por pais dentro do cartao do catalogo --------------------- */
/*                                                                       */
/* "🇪🇸 España" e "EUR 0,99" partilhavam a linha numa caixa de 110px:    */
/* o preco era cortado a meio ("EUR 0,9"). Num comparador de precos, o   */
/* preco e a unica coisa que nao pode faltar. Passa a ficar por baixo do */
/* nome do pais, com a largura toda da celula.                           */

.country-row span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    padding: 8px 10px;
    font-size: 0.78rem;
    line-height: 1.25;
}

.country-row strong {
    font-size: 1rem;
    white-space: nowrap;
}

/* O cartao precisa de largura para um nome de produto de supermercado. */
.product-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr));
}

/* ==================================================================== */
/* Rodada 9 — caixas que se pegavam umas nas outras                      */
/* ==================================================================== */

/* --- 1. A caixa "Meta" colada a "Custo estimado da viagem" ----------- */
/*                                                                       */
/* O painel "Minha compra" nao tinha espacamento proprio: os filhos eram */
/* blocos normais, sem margem, e as duas caixas escuras seguidas         */
/* encostavam com 0px entre elas. Lidas em conjunto pareciam uma caixa   */
/* so, com dois valores dentro — que foi exatamente o que se reportou.   */

.calculator {
    display: grid;
    gap: 14px;
    align-content: start;
}

.calculator > * {
    margin: 0;
}

/* --- 2. O cartao compacto da home transbordava por cima do vizinho --- */
/*                                                                       */
/* `.compact-price-card` define duas colunas (foto + texto), mas a regra */
/* generica `.price-card` aparece MAIS ABAIXO no ficheiro com a mesma    */
/* especificidade e ganhava por ordem de cascata. O cartao ficava com    */
/* `grid-template-columns: 0px 260px`: a coluna do texto colapsava a     */
/* zero e a de precos exigia 260px fixos dentro de um cartao de 268px.   */
/* Resultado: o conteudo saia 28px para fora e passava por cima do       */
/* cartao seguinte — o titulo cortado que se via na captura.             */
/*                                                                       */
/* A correcao tem duas partes, porque so uma nao chegava:                */
/*   a) o seletor passa a ser mais especifico do que `.price-card`,      */
/*      deixando de depender da ordem das linhas no ficheiro;            */
/*   b) nenhuma coluna leva largura minima fixa: com `minmax(0, ...)` o  */
/*      cartao encolhe em vez de transbordar.                            */

.section-cards .compact-price-card {
    grid-template-columns: 96px minmax(0, 1fr);
}

/* Tres colunas de 260px nao chegam para um nome de supermercado com     */
/* marca e quantidade. Com 340px a home mostra duas colunas largas em    */
/* vez de tres apertadas, e tres so quando ha mesmo espaco.              */
.section-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

/* Cartao mesmo estreito: a foto sobe para cima do texto em vez de       */
/* roubar metade da largura util.                                        */
@media (max-width: 520px) {
    .section-cards .compact-price-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .section-cards .compact-price-card .result-photo {
        grid-row: auto;
        max-width: 120px;
    }

    .section-cards .compact-price-card .price-grid,
    .section-cards .compact-price-card .decision-line,
    .section-cards .compact-price-card .card-actions {
        grid-column: 1;
    }
}

/* --- 3. A mesma armadilha na ficha grande do produto ----------------- */
/*                                                                       */
/* `minmax(260px, 0.8fr)` nao encolhe abaixo de 260px: num cartao        */
/* estreito a coluna dos precos empurrava a do nome para fora.           */

.price-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
}

@media (max-width: 640px) {
    .price-card {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- 4. Referencias sem espacos esticavam o cartao ------------------- */
/*                                                                       */
/* A regra de quebrar palavras longas cobria `.product-tile h2` mas nao  */
/* `.price-card h2` — que e o titulo do cartao da home. Um nome do tipo  */
/* "REF8700216266734XLPACKPROMO" saia 185px para fora da caixa.          */

.price-card h2,
.price-card .muted,
.compact-price-card h2 {
    overflow-wrap: anywhere;
}

/* ==================================================================== */
/* Rodada 10 — o telemovel deixa de parecer um site ampliado             */
/* ==================================================================== */

/* --- Paginacao da lista de produtos ---------------------------------- */

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 22px 0 6px;
}

.pager a,
.pager .pager-current,
.pager .pager-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    font-weight: 900;
}

.pager .pager-current {
    border-color: var(--contorno);
    background: var(--green);
}

.pager a:hover {
    border-color: var(--contorno);
}

.pager .disabled {
    opacity: 0.4;
}

.pager .pager-gap {
    padding: 0 2px;
    color: var(--muted);
}

.pager-note {
    text-align: center;
    margin: 0 0 24px;
}

/* --- Comparar com outro produto, na ficha ---------------------------- */

.compare-with {
    margin-top: 18px;
}

.compare-with h2 {
    margin: 2px 0 6px;
}

.compare-with-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    margin: 12px 0 8px;
}

.compare-with-form .compare-slot {
    display: block;
}

@media (max-width: 560px) {
    .compare-with-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Barra de navegacao de baixo ------------------------------------- */
/*                                                                       */
/* Escondida no computador: la a navegacao de cima cabe toda e esta a    */
/* vista. No telemovel troca-se uma pela outra.                          */

.tabbar {
    display: none;
}

@media (max-width: 720px) {
    .tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        background: var(--barra);
        border-top: 1px solid var(--line);
        backdrop-filter: blur(14px);
    }

    .tabbar a {
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 2px;
        min-height: 46px;
        padding: 4px 2px;
        border-radius: 10px;
        color: var(--muted);
        font-size: 0.62rem;
        font-weight: 900;
        line-height: 1.1;
        text-align: center;
    }

    .tabbar a span:first-child {
        font-size: 1.05rem;
        line-height: 1;
    }

    .tabbar a span:last-child {
        /* Um rotulo que parte em duas linhas desalinha a fila inteira. */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .tabbar a.active {
        background: var(--green);
        color: var(--forte);
    }

    /* A barra de cima fica so com a marca e a sessao. */
    .topbar > .nav {
        display: none;
    }

    .topbar {
        grid-template-columns: 1fr auto;
        gap: 10px;
    }

    /* Espaco para a barra de baixo nao tapar o fim da pagina. */
    body {
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    }

    /* E o botao do idioma sobe, para nao ficar por cima dela. */
    .lang-switch {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}

/* --- A escala ------------------------------------------------------- */
/*                                                                       */
/* Quase toda a tipografia esta em rem, por isso baixar a raiz encolhe   */
/* o conjunto de uma vez e sem desalinhar proporcoes. O resto sao os     */
/* espacamentos em px, que nao acompanham a raiz e sao dados aqui.       */

@media (max-width: 720px) {
    html {
        font-size: 15px;
    }

    .topbar {
        padding: 8px 14px;
    }

    /* Mais 12px de largura util: num ecra de 390px, cada pixel de margem
       sai do preco. */
    main,
    .flash {
        width: min(1180px, calc(100% - 20px));
    }

    main {
        /* O espaco no fim ja vem do padding do body, por causa da barra. */
        padding: 12px 0 18px;
    }

    .panel {
        padding: 14px;
    }

    .page-heading {
        margin: 18px 0 12px;
    }

    /* 12vw a 390px sao 47px de titulo: parece um cartaz, nao um ecra. */
    h1,
    .hero-copy h1,
    .page-heading h1,
    .auth-layout h1 {
        font-size: clamp(1.6rem, 7.4vw, 2.5rem);
        line-height: 1.12;
    }

    h2 {
        font-size: 1.15rem;
    }

    .hero-copy {
        padding: 22px 16px 26px;
    }

    .hero-copy .lead,
    .lead {
        font-size: 0.95rem;
    }

    .button {
        min-height: 42px;
        padding: 10px 14px;
        font-size: 0.92rem;
    }

    .quick-stats {
        gap: 8px;
        margin: 14px 0 18px;
    }

    .quick-stats a {
        min-height: 0;
        padding: 12px 10px;
    }

    .quick-stats strong {
        font-size: 1.4rem;
    }

    .quick-stats span {
        font-size: 0.74rem;
    }

    /* As categorias passam a rolar numa linha so: seis filas de pilulas
       empurravam os produtos para fora do primeiro ecra. */
    .filter-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-bottom: 14px;
        padding-bottom: 2px;
    }

    .filter-strip::-webkit-scrollbar {
        display: none;
    }

    .filter-strip a {
        flex: 0 0 auto;
        padding: 8px 12px;
        font-size: 0.82rem;
    }

    .catalog-toolbar {
        gap: 8px;
    }

    .section-stack {
        gap: 14px;
    }

    .compare-section {
        padding: 12px;
        gap: 10px;
    }

    .section-cards {
        gap: 8px;
    }

    .product-detail {
        gap: 16px;
        margin-top: 16px;
    }
}

/* --- A lista de produtos como lista, nao como cartazes --------------- */
/*                                                                       */
/* Um cartao de 430px de altura por produto dava um produto por ecra: a  */
/* pessoa rola cinco vezes para ver cinco precos. Em linha — foto a      */
/* esquerda, nome e precos a direita — cabem tres ou quatro, que e como  */
/* uma aplicacao mostra uma lista.                                       */

@media (max-width: 720px) {
    .product-grid {
        gap: 10px;
    }

    .product-grid .product-tile {
        grid-template-columns: 84px minmax(0, 1fr);
        align-content: start;
        gap: 10px 12px;
        min-height: 0;
        padding: 12px;
    }

    .product-grid .product-tile > img {
        grid-row: span 2;
        aspect-ratio: 1;
        align-self: start;
    }

    .product-grid .product-tile > div,
    .product-grid .product-tile > .country-row,
    .product-grid .product-tile > .recommendation,
    .product-grid .product-tile > .tile-actions {
        grid-column: 2;
    }

    .product-grid .product-tile h2 {
        font-size: 1.02rem;
        line-height: 1.2;
        margin: 2px 0;
    }

    .product-grid .product-tile .muted {
        font-size: 0.74rem;
    }

    .country-row span {
        padding: 6px 8px;
    }

    .recommendation {
        padding: 8px 10px;
        font-size: 0.8rem;
    }
}

@media (max-width: 400px) {
    html {
        font-size: 14px;
    }

    .product-grid .product-tile {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .tabbar a {
        font-size: 0.58rem;
    }
}

/* --- Alvos de toque -------------------------------------------------- */
/*                                                                       */
/* Medido, nao suposto: as pilulas de categoria ficavam com 32px de       */
/* altura, as caixas de escolha com 33 e os botoes de idioma com 24. Um   */
/* dedo precisa de cerca de 40px. Abaixo disso falha-se o alvo e          */
/* carrega-se no vizinho — que aqui significa filtrar pela categoria      */
/* errada ou trocar de idioma sem querer.                                 */

@media (max-width: 720px) {
    .filter-strip a {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
    }

    .catalog-toolbar select,
    .catalog-toolbar input,
    select,
    input[type="search"],
    input[type="text"],
    input[type="number"] {
        min-height: 42px;
    }

    .lang-switch a {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        padding: 0 .8rem;
    }
}

/* A ligacao "Comparar dois produtos" estava perdida no meio de uma frase,
   com 14px de altura. E uma accao, nao uma nota de rodape: no telemovel
   passa a linha propria e a alvo que se acerta. */
@media (max-width: 720px) {
    .result-count {
        display: grid;
        gap: 8px;
        justify-items: start;
    }

    .result-count a {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        padding: 0 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--card);
        font-weight: 900;
    }
}

/* --- A barra de filtros no telemovel --------------------------------- */
/*                                                                       */
/* Aqui estava a maior parte do "ve-se tudo muito grande", e nao era      */
/* tipografia: era um defeito. Em ecra estreito a barra passa a coluna,   */
/* e numa coluna o `flex: 1 1 260px` do campo de busca deixa de valer     */
/* 260px de LARGURA e passa a valer 260px de ALTURA. O campo de procurar  */
/* ficava com o tamanho de meio ecra, e os produtos comecavam depois de   */
/* tres deslizes.                                                        */
/*                                                                       */
/* Medido: a barra tinha 541px de altura num ecra de 844. Nao havia       */
/* tamanho de letra que salvasse isso.                                   */

@media (max-width: 720px) {
    .catalog-toolbar,
    .compare-picker {
        flex-direction: column;
        align-items: stretch;
    }

    .catalog-toolbar .search-field,
    .catalog-toolbar .toolbar-field,
    .compare-picker .compare-slot {
        flex: 0 0 auto;
    }

    /* Encostada a direita numa coluna ficava desalinhada das outras. */
    .toolbar-check {
        align-self: stretch;
        white-space: normal;
    }

    .catalog-toolbar {
        padding: .7rem;
    }

    .catalog-toolbar .button {
        width: 100%;
    }
}

/* Duas escolhas por linha em vez de uma: a barra passa de 317px para
   perto de 250 e os produtos sobem um deslize inteiro. */
@media (max-width: 720px) {
    .catalog-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
    }

    .catalog-toolbar input[type="hidden"] {
        display: none;
    }

    .catalog-toolbar .search-field,
    .catalog-toolbar .toolbar-check,
    .catalog-toolbar .button {
        grid-column: 1 / -1;
    }
}

/* --- Idioma: flutuante no computador, na barra no telemovel ---------- */

.topbar-lang {
    display: none;
}

@media (max-width: 720px) {
    /* O flutuante sai: tapava o botao "Filtrar" do catalogo. */
    .lang-switch {
        display: none;
    }

    .topbar-lang {
        display: inline-flex;
        gap: 2px;
        padding: 2px;
        border-radius: 999px;
        background: #14140f;
    }

    .topbar-lang a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 38px;
        min-height: 34px;
        border-radius: 999px;
        font-size: 1rem;
        line-height: 1;
        opacity: .55;
    }

    .topbar-lang a.active {
        background: var(--green);
        opacity: 1;
    }

    /* A BARRA DE TOPO NUNCA PARTE EM DUAS LINHAS.
       -------------------------------------------------------------------
       O QUE SE VIA NO TELEMOVEL: a marca e o botao do tema e o "Entrar" na
       primeira linha, e o "Criar conta" sozinho por baixo, encostado a
       direita. Nao era uma barra de duas linhas — era uma barra de uma
       linha que nao coube, e le-se como avaria. A barra ficava com 99px de
       altura, colada ao topo em todo o scroll.

       A causa era `flex-wrap: wrap`, herdado da regra que a sessao partilha
       com as accoes do hero. No hero faz sentido: sao botoes grandes que
       podem descer. Aqui nao ha para onde descer.

       Medido: a 430px — o telemovel mais largo que ha — a marca, o tema e
       os dois botoes pediam 435px. Nao era por pouco, e nao havia largura
       de telemovel nenhuma em que coubesse. Por isso alem do `nowrap` os
       botoes encolhem a serio: menos espessura de contorno, menos folga
       lateral, e o rotulo espanhol de "Entrar" passou a ser a palavra e
       nao a frase. */
    .session {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-wrap: nowrap;
    }

    .session .button {
        padding: 8px 10px;
        font-size: 0.8rem;
        min-height: 38px;
        /* 2px de contorno em cada botao sao 8px de largura gastos a
           desenhar linhas, num sitio onde faltavam 20. */
        border-width: 1px;
        white-space: nowrap;
    }

    /* Os ultimos pixeis vao buscar-se onde nao se veem: a folga da barra, o
       espaco entre o icone e o nome, o espaco entre os botoes. Sao 16px que
       ninguem da por eles e que fazem o nome do site caber inteiro num ecra
       de 360px — que e o ecra mais pequeno que ainda e comum. */
    .topbar {
        padding: 8px 10px;
    }

    .brand {
        gap: 8px;
    }

    /* O botao do tema e um icone: nao precisa da largura de um botao de
       texto, e cada pixel que devolve e um pixel que os outros dois ganham. */
    .session .tema-botao {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        min-height: 0;
    }

    /* Se algum dia um idioma novo trouxer rotulos mais compridos, e o nome
       do site que cede — aparado com reticencias — e nao a barra que parte.
       Um nome aparado ainda se le; uma barra partida nao se percebe. */
    .topbar {
        grid-template-columns: minmax(0, auto) auto;
    }

    .brand {
        min-width: 0;
    }

}

/* A BARRA DE TOPO DIZ O NOME DO SITE.
   ---------------------------------------------------------------------------
   Estava ao contrario: escondia-se "IberCash" para caber o seletor de idioma e
   o botao do tema. Mas quem chega precisa de saber onde esta — e o idioma e o
   tema escolhem-se uma vez e ficam assim. Os dois passaram para o rodape, e a
   barra fica com o icone e o nome, que e o minimo que uma barra de marca tem
   de mostrar. */
@media (max-width: 720px) {
    .brand > span:not(.brand-mark) {
        /* EM BLOCO, E NAO `inline-flex`, POR CAUSA DAS RETICENCIAS.
           `text-overflow` nao se aplica a uma caixa flex: num ecra estreito
           o nome era cortado a meio de uma letra — "IberCas" — sem sinal
           nenhum de que faltava texto. E com `min-width: 0` quem transborda
           passa a ser o proprio nome, e nao a caixa que o contem, que era o
           que fazia o corte acontecer um nivel acima e sem reticencias.
           Isto so se ve abaixo dos 330px; acima disso o nome cabe inteiro. */
        display: inline-block;
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.02rem;
        font-weight: 900;
        letter-spacing: -0.02em;
        white-space: nowrap;
    }

    /* O tema fica na barra: e uma preferencia que se muda a qualquer hora e
       tem de estar onde a pessoa esta a olhar. O idioma e que sai — esse ja
       vem decidido pelo aparelho e muda-se uma vez na vida, se tanto. */
    .topbar-lang {
        display: none;
    }

    .topbar-lang a {
        min-height: 38px;
    }
}

/* A caixa de "so os que existem nos dois paises" herdava `width: 100%` das
   regras gerais de input e esticava-se a toda a largura, empurrando o texto
   para o canto oposto. Uma caixa de marcar tem o tamanho de uma caixa de
   marcar. */
.toolbar-check input[type="checkbox"],
.checkline input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 0;
}

.toolbar-check {
    justify-content: flex-start;
}

/* Titulo e explicacao ocupavam meio ecra antes de se ver um produto. */
@media (max-width: 720px) {
    .page-heading .lead {
        font-size: 0.88rem;
        line-height: 1.45;
        margin: 6px 0 0;
    }

    .page-heading .eyebrow {
        margin-bottom: 2px;
    }
}

/* Numeros sobre a faixa verde. Estas caixas ficam dentro de um bloco escuro,
   que impoe texto creme; sobre o verde davam 1,42:1 de contraste — o custo
   do deposito e a distancia ate a fronteira quase nao se liam. Sobre verde,
   o texto e escuro. */
.route-metric span,
.station-highlight .route-metric span {
    /* Estas pastilhas sao verdes: o texto e escuro nos dois temas. Com --ink
       ficava claro sobre verde no modo escuro, e esta regra, por ser mais
       especifica, ganhava a regra geral que trata dos fundos verdes. */
    color: var(--forte);
}

/* ==================================================================== */
/* Rodape                                                                */
/* ==================================================================== */

.rodape {
    /* 48 de margem mais 28 de folga do main davam 76px de nada entre o fim do
       conteudo e o rodape. O rodape ja se separa sozinho: muda de cor e tem
       um traco por cima. 20px chegam. */
    margin-top: 20px;
    padding: 30px 0 0;
    border-top: 1px solid var(--line);
    background: var(--cream);
}


/* As redes no rodape. Icone mais nome: um icone sozinho obriga a adivinhar, e
   um nome sozinho perde-se entre os outros links. */
.rodape-redes {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
}

.rede-icone {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.rede-icone svg {
    flex: none;
}

.rodape-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: 26px;
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding-bottom: 28px;
}

.rodape h2 {
    margin: 0 0 8px;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.rodape .brand {
    margin-bottom: 10px;
}

.rodape p {
    margin: 0 0 8px;
    font-size: 0.86rem;
    line-height: 1.5;
}

.rodape nav {
    display: grid;
    align-content: start;
    gap: 6px;
}

.rodape nav a {
    font-weight: 800;
    font-size: 0.9rem;
}

.rodape nav a:hover {
    color: var(--green-strong);
}

.rodape-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 14px 0 22px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.8rem;
}

@media (max-width: 720px) {
    .rodape {
        margin-top: 28px;
        padding-top: 24px;
    }

    .rodape-grid,
    .rodape-base {
        width: min(1180px, calc(100% - 20px));
    }

    .rodape nav a {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
    }
}

/* A loja que tem o carrinho todo destaca-se: e a unica linha cujo total se
   pode comparar com outro total sem ressalvas. */
.loja-completa {
    background: rgba(8, 242, 110, 0.13);
}

.loja-completa td:first-child strong {
    color: var(--ink);
}

/* ==================================================================== */
/* Alternativas mais baratas                                             */
/* ==================================================================== */

.alt-lista {
    display: grid;
    gap: 8px;
    margin: 14px 0;
}

.alt-linha {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
}

.alt-linha:hover {
    border-color: var(--contorno);
}

/* A mais barata destaca-se sozinha: e a unica linha que muda a decisao. */
.alt-barata {
    border-color: var(--green-strong);
    background: rgba(8, 242, 110, 0.09);
}

.alt-foto {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--card);
}

.alt-nome {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.alt-nome strong {
    font-size: 0.95rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.alt-nome .muted {
    font-size: 0.78rem;
}

.alt-selo {
    justify-self: start;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--yellow);
    color: var(--forte);
    font-size: 0.7rem;
    font-weight: 900;
}

.alt-preco {
    display: grid;
    justify-items: end;
    gap: 2px;
    text-align: right;
    white-space: nowrap;
}

.alt-preco b {
    font-size: 1.05rem;
}

.alt-poupa {
    color: var(--forte);
    background: var(--green);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.72rem;
    font-weight: 900;
    font-style: normal;
}

/* --- A recomendacao ------------------------------------------------- */

.recomendacao {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 50;
    width: min(340px, calc(100% - 36px));
    padding: 16px 18px 18px;
    border: 2px solid var(--contorno);
    border-radius: 14px;
    background: var(--paper);
    box-shadow: 0 20px 44px rgba(38, 27, 20, 0.24);
    animation: recomendacao-entra .22s ease-out;
}

@keyframes recomendacao-entra {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .recomendacao {
        animation: none;
    }
}

.recomendacao p {
    margin: 0 0 12px;
    font-size: 0.92rem;
    line-height: 1.45;
}

.recomendacao .eyebrow {
    margin-bottom: 6px;
}

.recomendacao .button {
    width: 100%;
}

.recomendacao-fechar {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.recomendacao-fechar:hover {
    background: var(--cream);
    color: var(--forte);
}

/* No telemovel sobe acima da barra de baixo, senao tapa a navegacao. */
@media (max-width: 720px) {
    .recomendacao {
        right: 10px;
        left: 10px;
        width: auto;
        bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    }

    .alt-linha {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        padding: 8px 10px;
    }

    .alt-foto {
        width: 44px;
        height: 44px;
    }
}

/* Nota sobre o fabricante. Amarela, nao verde: e informacao a ter em conta,
   nao uma recomendacao de compra. */
.nota-fabricante {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-left: 3px solid var(--yellow);
    border-radius: 6px;
    background: rgba(255, 212, 71, 0.16);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ==================================================================== */
/* Avisos de preco                                                       */
/* ==================================================================== */

.aviso-preco {
    margin: 10px 0;
    padding: 11px 13px;
    border-left: 3px solid var(--danger);
    border-radius: 6px;
    background: rgba(255, 104, 77, 0.12);
    font-size: 0.86rem;
    line-height: 1.5;
}

/* Um preco posto de parte continua a ver-se — riscado, nao escondido.
   Quem visita tem de poder perceber porque e que aquele valor nao conta. */
.preco-suspeito {
    text-decoration: line-through;
    color: var(--muted);
}

.preco-nota {
    display: block;
    max-width: 220px;
    color: var(--danger-texto);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.3;
    text-align: right;
}

/* ==================================================================== */
/* Respiro entre paineis                                                 */
/* ==================================================================== */
/*                                                                       */
/* Medido na ficha do produto: o painel do historico acabava no pixel    */
/* 3017 e o das alternativas comecava no pixel 3017. Zero entre os dois. */
/* Duas caixas encostadas leem-se como uma caixa so — foi o que se       */
/* reportou como "o box esta a pegar no de cima", e e o mesmo defeito    */
/* que ja tinha aparecido nas caixas "Meta" e "Custo da viagem".         */
/*                                                                       */
/* Regra geral em vez de remendo: qualquer painel que venha logo a       */
/* seguir a outro leva espaco.                                           */

/* A LISTA DE PARES NAO SE MANTEM: PASSA A SER O FLUXO INTEIRO.
   Esta regra enumerava os pares que na altura existiam. Bastou juntar um
   <form> entre dois paineis — o "Avisamos quando este preco mudar" na ficha
   do posto — para haver um par que nao estava na lista e as duas caixas
   ficarem coladas outra vez. Enquanto for uma lista, cada elemento novo traz
   o mesmo defeito de volta.

   Agora e o espacamento entre IRMAOS dentro do main, seja o que for. O
   :first-child nao leva margem, por isso nao ha espaco a mais no topo. */
main > * + * {
    margin-top: 18px;
}

@media (max-width: 720px) {
    main > * + * {
        margin-top: 12px;
    }
}

/* Listas de texto corrido nas paginas de apoio. */
.lista-simples {
    margin: 8px 0 14px;
    padding-left: 20px;
    line-height: 1.6;
}

.lista-simples li {
    margin-bottom: 6px;
}

.texto-legal h2 {
    margin: 22px 0 6px;
    font-size: 1.1rem;
}

.texto-legal h2:first-child {
    margin-top: 0;
}

.texto-legal p {
    margin: 0 0 10px;
    line-height: 1.6;
}



/* O CARTAO DE PRODUTO NO TELEMOVEL
   -------------------------------
   Media: 419px de altura num ecra de 844 — metade do ecra para um produto.
   Numa listagem que se percorre a procura de comparar, ver so um produto de
   cada vez obriga a decorar o anterior para o comparar com o seguinte, que e
   exatamente o trabalho que este site devia poupar.

   Corta-se o que nao ajuda a decidir ali: a proveniencia e a hora da recolha
   (ficam na ficha), e os dois botoes passam a partilhar uma linha. */
@media (max-width: 720px) {
    .so-desktop {
        display: none;
    }

    .product-tile {
        min-height: 0;
        gap: 10px;
        padding: 14px;
    }

    .product-tile .etiquetas-produto {
        margin: 2px 0 0;
    }

    .product-tile .tile-actions {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 8px;
        align-items: center;
    }

    .product-tile .tile-actions form {
        margin: 0;
    }

    .product-tile .tile-actions .button {
        padding: 9px 12px;
        font-size: 0.84rem;
    }
}

/* Na ficha o selo nao flutua no canto: fica numa linha, ao lado da frase que
   o explica. Ha espaco para dizer de quanto para quanto, e sem isso "-4,2%"
   e quase informacao nenhuma. */
.tendencia-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.tendencia-linha .selo-tendencia {
    position: static;
}

/* A PASTILHA DA MARCA DO POSTO
   ---------------------------
   Substitui o logotipo pedido a um servico de favicons, que devolvia um globo
   generico para a maioria das 3 500 marcas destas listas. Iniciais e uma cor
   tirada do nome: a mesma marca da sempre a mesma cor, distingue-se de relance
   numa lista, nao carrega nada de fora e nao finge ser o logotipo de ninguem. */
/* A classe repetida nao e engano: `.station-mini span` e `.station-card span`
   pintam o texto de cinzento e tem mais especificidade do que uma classe
   sozinha, por isso as iniciais saiam cinzentas sobre a cor forte da pastilha
   — 1,06 de contraste, ou seja, ilegiveis. Repetir a classe (0,2,0) ganha sem
   depender da ordem do ficheiro, que e o que se parte da proxima vez que
   alguem mexer aqui. */
/* A caixa da marca: a pastilha e o logotipo ocupam o mesmo lugar, e so um
   esta visivel de cada vez. Medida fixa para a lista nao saltar quando um
   logotipo entra depois de verificado. */
.marca-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
}

.marca-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    /* Fundo claro por baixo do logotipo: quase todos sao desenhados para
       papel branco e desaparecem sobre o fundo escuro do tema. */
    background: #fff;
    padding: 4px;
}

.station-mini .marca-logo {
    width: 34px;
    height: 34px;
}

.marca-logo--grande {
    width: 62px;
    height: 62px;
    margin-bottom: 10px;
}

.marca-logo--grande .marca-chip {
    font-size: 1.1rem;
    border-radius: 12px;
}

.marca-logo--grande img {
    border-radius: 12px;
}

.marca-chip.marca-chip {
    color: #fff;
}

.marca-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: hsl(var(--chip-matiz, 150) 42% 32%);
    border: 1px solid hsl(var(--chip-matiz, 150) 42% 46%);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1;
    user-select: none;
}

.station-mini .marca-chip {
    width: 34px;
    height: 34px;
    font-size: 0.72rem;
}

.marca-logo .marca-chip {
    width: 100%;
    height: 100%;
}

/* A sugestao de atravessar a fronteira. Verde quando compensa; discreta
   quando nao — a resposta "hoje nao vale a pena" e tao util como a outra, mas
   nao e para celebrar. */
.atravessar {
    border-left: 4px solid var(--green-strong);
}

.atravessar h2 {
    margin: 6px 0 10px;
    font-size: 1.25rem;
}

.atravessar p {
    line-height: 1.6;
}

.atravessar--nao {
    border-left-color: var(--line-2);
}

/* Os precos da ficha do posto, um por combustivel. */
.posto-precos {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.posto-preco {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid var(--preco-borda);
    background: var(--preco-caixa);
}

.posto-preco > span:first-child {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 850;
}

.posto-preco strong {
    font-size: 1.3rem;
}

.posto-preco .selo-tendencia {
    position: static;
    justify-self: start;
}

.posto-preco small {
    font-size: 0.78rem;
}






/* O SELETOR DE COMBUSTIVEL DO HISTORICO
   ------------------------------------
   Discreto de proposito: e um controlo de segundo plano, nao o assunto da
   seccao. O assunto e o grafico. */
.grafico-seletor {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 4px;
}

.grafico-seletor button {
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: transparent;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
}

.grafico-seletor button:hover {
    border-color: var(--contorno);
    color: var(--ink);
}

.grafico-seletor button.active {
    background: var(--green);
    border-color: var(--contorno);
    color: var(--forte);
}

/* Com o seletor a dizer qual e o combustivel, o titulo por cima do grafico
   repetia a mesma palavra duas vezes em duas linhas seguidas. */
.grafico-seletor ~ .grafico-painel h3 {
    display: none;
}

/* O COMPARADOR DE GASOLINEIRAS, POR CIDADE
   ---------------------------------------
   Tres passos, e cada um so aparece quando o anterior esta feito: as duas
   cidades, as listas de cada uma, e a comparacao de dois postos escolhidos.
   Pedir logo o nome de dois postos era pedir informacao que ninguem tem de
   cor — quem compara sabe as cidades, nao os nomes. */
.compare-cidades {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr) auto;
    align-items: end;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--card);
}

.compare-cidades label {
    display: grid;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--muted);
}

.compare-colunas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 16px;
}

.compare-coluna {
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--card);
}

.compare-coluna h2 {
    margin: 0 0 4px;
    font-size: 1.15rem;
}

/* A LISTA ORDENADA E MESMO UM <ol>.
   O numero da ordem nao e decoracao: e a resposta. "Este e o terceiro mais
   barato" e informacao, e um leitor de ecra le-a de graca se a lista for
   semantica. */
.posto-ranking {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: posto;
    display: grid;
    gap: 6px;
}

.posto-ranking li {
    counter-increment: posto;
}

.posto-ranking a {
    display: grid;
    grid-template-columns: auto 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    color: inherit;
    text-decoration: none;
}

.posto-ranking a::before {
    content: counter(posto);
    min-width: 18px;
    font-size: 0.78rem;
    font-weight: 900;
    color: var(--muted);
    text-align: right;
}

.posto-ranking a:hover,
.posto-ranking a:focus-visible {
    background: var(--surface);
    border-color: var(--line-2);
}

.posto-ranking .marca-logo {
    width: 34px;
    height: 34px;
}

.posto-ranking .marca-chip {
    width: 100%;
    height: 100%;
    font-size: 0.68rem;
}

.posto-ranking-nome {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.posto-ranking-nome strong {
    font-size: 0.92rem;
    line-height: 1.2;
}

.posto-ranking-nome .muted {
    font-size: 0.76rem;
}

.posto-ranking-preco {
    font-weight: 900;
    font-size: 1rem;
    white-space: nowrap;
}

/* A accao so se le quando interessa — ao passar o rato, ou no que ja esta
   escolhido. Repetida em dez linhas, "escolher" vira ruido. */
.posto-ranking-acao {
    grid-column: 3 / -1;
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--green-texto);
    opacity: 0;
}

.posto-ranking a:hover .posto-ranking-acao,
.posto-ranking a:focus-visible .posto-ranking-acao,
.posto-ranking .escolhido .posto-ranking-acao {
    opacity: 1;
}

.posto-ranking .escolhido a {
    background: rgba(8, 242, 110, 0.12);
    border-color: var(--green-strong);
}

:root:not([data-tema="claro"]) .posto-ranking-acao,
[data-tema="escuro"] .posto-ranking-acao {
    color: #6bf7a8;
}

@media (max-width: 720px) {
    .compare-cidades {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* O SELETOR DO QUE COMPARAR
   ------------------------
   Produtos e gasolineiras sao a mesma pergunta sobre coisas diferentes, e
   quem chega ao comparador pode ter qualquer uma das duas. Duas paginas
   separadas obrigavam a adivinhar o nome da segunda. */
.compare-modos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.compare-modos a {
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: var(--card);
    color: var(--ink);
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: none;
}

.compare-modos a.active {
    background: var(--green);
    border-color: var(--contorno);
    color: var(--forte);
}

/* A coluna que ganha em cada combustivel. Verde na celula e nao so no
   numero: numa tabela de quatro colunas, a cor do texto perde-se. */
.comparar-postos td.ganha {
    background: rgba(8, 242, 110, 0.14);
    font-weight: 850;
}

.comparar-postos th {
    text-align: left;
    vertical-align: bottom;
}

.comparar-postos th .muted {
    font-weight: 600;
    font-size: 0.8rem;
}

.decisao-final {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 3px solid var(--green-strong);
    background: var(--surface);
    font-weight: 700;
    line-height: 1.55;
}

.compare-fichas {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* O RODAPE NO TELEMOVEL
   --------------------
   Media: 601px de altura — dois terços de um ecra de telemovel so para o
   rodape. A culpa era do alvo de toque de 38px por link, herdado do menu de
   topo: la faz sentido, porque e a navegacao principal e erra-se caro. Aqui
   nao: no telemovel a navegacao vive na barra de baixo, e estes sao links
   secundarios que quase ninguem toca.

   30px continua a ser um alvo confortavel com o polegar, e o rodape encolhe
   para perto de metade. A descricao da marca tambem sai: quem chegou ao fim
   da pagina ja sabe o que o site faz. */
@media (max-width: 720px) {
    .rodape {
        margin-top: 14px;
        padding-top: 20px;
    }

    .rodape-grid {
        gap: 14px 18px;
        padding-bottom: 16px;
    }

    .rodape nav {
        gap: 0;
    }

    .rodape nav a {
        min-height: 30px;
        padding: 2px 0;
        font-size: 0.84rem;
    }

    .rodape nav h2,
    .rodape .rodape-dobra h2 {
        margin-bottom: 4px;
    }

    .rodape-marca-texto {
        display: none;
    }

    /* As duas linguas lado a lado e nao empilhadas: sao duas palavras e
       ocupavam duas linhas de 30px cada numa coluna vazia.

       `.rodape .rodape-idioma` e nao `.rodape-idioma`: a regra geral dos
       menus do rodape e `.rodape nav { display: grid }`, que tem mais
       especificidade do que uma classe sozinha e empilhava-as na mesma. */
    .rodape .rodape-idioma {
        display: flex;
        flex-direction: row;
        gap: 18px;
        margin-top: 6px;
    }

    .rodape .rodape-idioma a {
        min-height: 30px;
        display: inline-flex;
        align-items: center;
    }
}

/* ===========================================================================
   O BLOG
   ===========================================================================
   O blog e a principal via de divulgacao do site: e a primeira pagina que
   muita gente vai ver, vinda de uma busca ou de um link partilhado. Por isso
   tem de ter a forma de uma publicacao a serio e nao de uma lista de ficheiros.

   Tres decisoes que fazem a diferenca entre as duas coisas:

   1. HIERARQUIA. O artigo mais recente ocupa a largura toda com a fotografia
      grande; os outros ficam em cartoes iguais entre si. Uma grelha toda do
      mesmo tamanho obriga a ler os sete titulos para descobrir qual interessa.

   2. SECCAO E TEMPO. Cada artigo diz de que trata e quanto tempo custa a ler,
      antes do titulo. Sao as duas informacoes que fazem abrir ou fechar.

   3. FOTOGRAFIA CONSISTENTE. Altura fixa e `contain` sobre fundo claro: sao
      fotos de produto em fundo branco, e `cover` partia embalagens ao meio.
      Fixar a altura e o que impede a grelha de ficar aos saltos.
*/

.blog-cabecalho h1 {
    max-width: 20ch;
}

/* --- O destaque ------------------------------------------------------- */

.blog-destaque {
    display: block;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: var(--shadow);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.blog-destaque:hover,
.blog-destaque:focus-visible {
    transform: translateY(-2px);
    border-color: var(--green-strong);
}

.blog-destaque--foto {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    align-items: stretch;
}

.blog-destaque-foto {
    display: block;
    background: #fff;
    min-height: 0;
}

.blog-destaque-foto img {
    display: block;
    width: 100%;
    height: 100%;
    /* Sem maximo, a foto esticava a coluna e deixava a do texto com um vao
       vazio por baixo do "Ler". 260px equilibra as duas. */
    max-height: 260px;
    object-fit: contain;
    padding: 18px;
}

.blog-destaque-texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 26px 28px;
}

.blog-destaque-texto h2 {
    margin: 0;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.15;
}

.blog-destaque-texto p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
    max-width: 56ch;
}

/* --- A grelha --------------------------------------------------------- */

.blog-lista {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

.blog-cartao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px 20px;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
    overflow: hidden;
}

.blog-cartao:hover,
.blog-cartao:focus-visible {
    transform: translateY(-2px);
    border-color: var(--green-strong);
}

.blog-cartao h2 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
}

.blog-cartao p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
    font-size: 0.92rem;
}

.blog-foto {
    display: block;
    width: calc(100% + 40px);
    height: 140px;
    margin: -18px -20px 4px;
    /* Os cantos de cima acompanham os do cartao: o `overflow:hidden` do
       cartao nao chega, porque a faixa e mais larga do que ele de proposito
       (as margens negativas) e transborda por baixo do contorno. */
    border-radius: 11px 11px 0 0;
    background: #fff;
    overflow: hidden;
}

.blog-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}

/* --- Seccao, data e tempo de leitura ---------------------------------- */

.blog-etiquetas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.blog-seccao {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: hsl(var(--seccao-matiz, 145) 45% 90%);
    border: 1px solid hsl(var(--seccao-matiz, 145) 45% 72%);
    color: hsl(var(--seccao-matiz, 145) 65% 22%);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

:root:not([data-tema="claro"]) .blog-seccao,
[data-tema="escuro"] .blog-seccao {
    background: hsl(var(--seccao-matiz, 145) 40% 18%);
    border-color: hsl(var(--seccao-matiz, 145) 40% 34%);
    color: hsl(var(--seccao-matiz, 145) 65% 78%);
}

.blog-meta {
    font-size: 0.76rem;
    color: var(--muted);
    font-weight: 700;
}

.blog-ler {
    margin-top: auto;
    padding-top: 4px;
    font-weight: 850;
    font-size: 0.86rem;
    color: var(--green-texto);
}

:root:not([data-tema="claro"]) .blog-ler,
[data-tema="escuro"] .blog-ler {
    color: #6bf7a8;
}

@media (max-width: 860px) {
    /* Abaixo desta largura a fotografia ao lado do texto deixa as duas
       colunas estreitas de mais para qualquer uma das duas servir. */
    .blog-destaque--foto {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-destaque-foto {
        min-height: 0;
    }

    .blog-destaque-foto img {
        max-height: 200px;
        padding: 14px;
    }

    .blog-destaque-texto {
        padding: 18px 20px;
    }
}

/* --- O artigo --------------------------------------------------------- */

.artigo-capa {
    margin: 16px 0 0;
    max-width: 460px;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.artigo-capa img {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: contain;
    padding: 16px;
}

/* A entrada puxa o olho para a primeira frase, que e onde a promessa do
   titulo se cumpre. Se nao se cumprir ali, o titulo era publicidade. */
.artigo-entrada {
    font-size: 1.12rem;
    line-height: 1.6;
    font-weight: 600;
    color: var(--ink);
}

.artigo-corte {
    margin: 30px 0 16px;
    border: 0;
    border-top: 1px solid var(--line-2);
}

/* Os dados em bruto ficam visualmente separados da redacao: sao a prova, e
   quem quiser conferir tem de perceber onde acaba o texto e comecam os
   numeros de onde ele saiu. */
.artigo-dados-aviso {
    font-size: 0.84rem;
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 3px solid var(--green-strong);
    background: var(--surface);
}

.artigo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

/* O CORPO DO ARTIGO
   -----------------
   A largura maxima do texto nao e capricho: uma linha de 120 caracteres
   obriga o olho a procurar o inicio da seguinte, e estes artigos sao feitos
   de listas de precos — a coisa mais facil de ler na diagonal e perder. 68ch
   e a medida a que uma linha se le sem a vista saltar.

   (As regras de .blog-lista, .blog-cartao e .blog-ler viviam aqui e foram
   substituidas pelo bloco do blog mais acima. Ficavam DEPOIS dele no
   ficheiro, por isso ganhavam — e a grelha nova nao se via.) */
.artigo {
    max-width: 68ch;
}

.artigo h2 {
    margin: 28px 0 10px;
    font-size: 1.2rem;
    line-height: 1.25;
}

.artigo h2:first-child {
    margin-top: 0;
}

.artigo p {
    margin: 0 0 14px;
    line-height: 1.7;
}

.artigo .lista-simples li {
    line-height: 1.6;
    margin-bottom: 8px;
}

/* A nota do fim e um aviso legal, nao o remate do artigo. */
.artigo-nota {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--line-2);
    font-size: 0.88rem;
}

.artigo-voltar {
    margin-top: 18px;
}

/* ETIQUETAS DE SEGMENTO
   ---------------------
   A categoria e larga de mais para orientar alguem: quem ve um champo de
   400 ml nao quer papel higienico so porque as duas coisas sao "Higiene".
   Estas dizem o que o produto e, o formato e de quem e — e sao a base de que
   o sistema de sugestoes precisa para propor o parecido certo.

   Discretas de proposito: sao contexto, nao chamada de atencao. Nunca devem
   competir com o preco, que e o que a pessoa veio ver. */
.etiquetas-produto {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.5rem 0 0;
    padding: 0;
}

/* UMA ETIQUETA A SERIO.
   ---------------------------------------------------------------------------
   Era uma pastilha redonda em cinzento fixo (#4a4a4a sobre 3% de preto): no
   tema escuro dava 2,1 de contraste — praticamente ilegivel — e mesmo no claro
   parecia mais um separador do que um rotulo.

   Passa a ter a forma do que diz ser: cantos arredondados de etiqueta e nao de
   pastilha, fundo e contorno proprios, e a cor do texto do tema. O furo a
   esquerda e o mesmo detalhe do icone da marca, e custa um pseudo-elemento. */
.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem 0.2rem 0.5rem;
    border: 1px solid var(--line-2);
    border-radius: 6px 10px 10px 6px;
    background: var(--surface);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--ink);
    white-space: nowrap;
}

.etiqueta::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--muted);
    flex: 0 0 5px;
}

/* FILA DE PARES POR CONFIRMAR.
   ---------------------------------------------------------------------------
   Quem confirma um par faz sempre a mesma coisa: le dois nomes, olha para duas
   fotos, decide. Tudo o resto e ruido. Por isso os dois lados ficam lado a
   lado, do mesmo tamanho e a mesma altura — a diferenca entre "Champo Hydra
   Revitaliza" e "Mascarilla hydra revitaliza" tem de saltar a vista sem ter de
   se procurar.

   Em ecra estreito passam a um por linha, com o portugues em cima: empilhados
   continuam a ler-se de cima para baixo como uma frase. */
/* O painel de admin arruma-se em tres colunas de ~340px. Uma fila de pares
   metida numa dessas colunas fica com 338px e os dois lados empilham-se — que
   e exatamente o contrario do que esta seccao precisa, porque comparar dois
   nomes exige ve-los lado a lado. Ocupa a largura toda, como ja fazem as
   tabelas. */
#confirmar-pares {
    grid-column: 1 / -1;
}

.pares-fila {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.par-proposta {
    display: grid;
    grid-template-columns: 1fr 1fr minmax(180px, 0.7fr);
    gap: 1rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line, #dfe6ec);
    border-radius: 12px;
    background: var(--card);
}

/* Um aviso de preco muda a moldura, nao o conteudo: continua a ser um par
   normal, so que este merece um segundo olhar antes do clique. */
.par-proposta.aviso {
    border-color: #f0c9a4;
    background: #fffaf3;
}

.par-lado {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    min-width: 0;
}

.par-lado img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    flex: 0 0 54px;
    background: var(--surface);
    border-radius: 8px;
}

.par-lado > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.par-lado strong {
    font-size: 0.92rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.par-lado .muted {
    font-size: 0.8rem;
}

.par-decisao {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}

.par-decisao form {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.par-decisao .button {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

.par-score {
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: #5b6b7a;
}

.par-alerta {
    font-size: 0.78rem;
    color: #b4530f;
}

.par-motivo {
    font-size: 0.74rem;
    line-height: 1.4;
    margin: 0;
}

@media (max-width: 760px) {
    .par-proposta {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .par-decisao {
        border-top: 1px solid var(--line, #dfe6ec);
        padding-top: 0.6rem;
    }
}

/* Um cartao decidido nao desaparece de repente: quem esta a rever precisa de
   ver que a decisao foi registada, e no caso de um par confirmado precisa de
   ver o codigo que acabou de nascer. Verde curto, depois sai. */
.par-proposta.par-confirmado {
    border-color: #0f9d58;
    background: #f2fbf6;
}

.par-proposta.par-a-sair {
    opacity: 0;
    transform: translateX(14px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .par-proposta.par-a-sair {
        transition: none;
    }
}

/* O NOME DO POSTO ENCOSTADO AO LOGOTIPO.
   ---------------------------------------------------------------------------
   Com 10px de intervalo e o nome em corpo grande, "AREA SAN MARTIN" comecava
   praticamente na borda da imagem e lia-se como se fizesse parte dela. Nomes
   de postos sao compridos e quase sempre em maiusculas — a marca vem do
   registo oficial, nao de um catalogo — por isso precisam de mais ar do que
   um titulo normal, e nao de menos.

   O nome tambem passa a ter corpo proprio: herdado, ficava do tamanho de um
   titulo de seccao dentro de um cartao de 54px de altura. */
.station-mini {
    gap: 14px;
    align-items: center;
}

.station-mini > div {
    min-width: 0;
    padding-left: 2px;
}

.station-mini strong {
    display: block;
    font-size: 0.95rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.station-mini img {
    flex: 0 0 54px;
}

/* O texto do grafico em ecra estreito.
   ---------------------------------------------------------------------------
   O SVG e desenhado num viewBox de 720 unidades. Num ecra de 390px o desenho
   fica a 54% do tamanho, e com ele o texto: 11 px de eixo viravam 6. Aqui a
   letra sobe em unidades do viewBox para voltar a dar os mesmos ~11 px reais.
   O mesmo raciocinio para a legenda, que deixa de caber numa linha e passa a
   partir em duas em vez de empurrar o cartao. */
@media (max-width: 760px) {
    /* Medido, nao suposto: num ecra de 390px o SVG desenha-se a 340px, ou
       seja a 47% das 720 unidades do viewBox. Para o eixo dar os mesmos 11px
       reais que da no computador tem de ir a 23 unidades; a 17 dava 8px, que
       e o tamanho a que se comeca a apertar os olhos. */
    .price-chart .chart-axis {
        font-size: 23px;
    }

    .price-chart .chart-endlabel {
        font-size: 26px;
    }

    .chart-legend {
        flex-wrap: wrap;
        gap: 6px 14px;
    }

    .chart-legend .legend-item {
        font-size: 0.85rem;
    }
}

/* ===========================================================================
   MODO ESCURO
   ===========================================================================
   Tres estados, e e de proposito que sejam tres:

     sem escolha      segue o sistema. E o que quase toda a gente quer e nao
                      exige um clique a ninguem.
     escuro / claro   o visitante mandou. Fica gravado no proprio browser e
                      ganha ao sistema — inclusive para o forcar ao contrario
                      do que o telemovel diz.

   O verde nao muda. E a cor da marca e funciona nos dois fundos; o que muda e
   o papel por baixo. O preto sobre o verde tambem nao muda, porque preto sobre
   verde le-se nos dois temas e inverte-lo daria texto claro sobre claro.

   As sombras passam a quase invisiveis: uma sombra preta sobre um fundo preto
   nao separa nada, so suja. No escuro quem separa as caixas e a borda. */
/* O ESCURO E O ESTADO BASE DO SITE.
   ---------------------------------------------------------------------------
   Estava atras de `@media (prefers-color-scheme: dark)`, ou seja, dependia do
   telemovel da pessoa. Com o escuro como padrao da casa isso deixa de servir
   por duas razoes: quem tem o sistema em claro via o site em claro, e quem tem
   o JavaScript desligado tambem — porque sem JavaScript nao ha atributo nenhum
   na raiz para o ativar.

   Assim o escuro vale sempre, e o claro e uma excecao declarada. */
:root:not([data-tema="claro"]) {
    --green-texto: #08f26e;
    --barra: rgba(20, 18, 15, 0.93);
    --card-vidro: rgba(30, 26, 22, 0.82);
        --ink: #f3efe7;
        --ink-2: #d9d2c6;
        --paper: #14120f;
        --cream: #1c1915;
        --card: #1e1a16;
        --card-2: #24201b;
        --surface: #272219;
        --preco-caixa: #3a3228;
        --preco-borda: rgba(243, 239, 231, 0.34);
        --line: rgba(243, 239, 231, 0.16);
        --line-2: rgba(243, 239, 231, 0.2);
        --contorno: rgba(243, 239, 231, 0.42);
        --muted: #a49c90;
        --grid: rgba(243, 239, 231, 0.14);
        --warn-bg: #3a2c13;
        --good-bg: #12301f;
        --danger-texto: #ff9d86;
        --blue: #6aa9f5;
        --shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

:root[data-tema="escuro"] {
    --green-texto: #08f26e;
    --barra: rgba(20, 18, 15, 0.93);
    --card-vidro: rgba(30, 26, 22, 0.82);
    --ink: #f3efe7;
    --ink-2: #d9d2c6;
    --paper: #14120f;
    --cream: #1c1915;
    --card: #1e1a16;
    --card-2: #24201b;
    --surface: #272219;
    --preco-caixa: #3a3228;
    --preco-borda: rgba(243, 239, 231, 0.34);
    --line: rgba(243, 239, 231, 0.16);
    --line-2: rgba(243, 239, 231, 0.2);
    --contorno: rgba(243, 239, 231, 0.42);
    --muted: #a49c90;
    --grid: rgba(243, 239, 231, 0.14);
    --warn-bg: #3a2c13;
    --good-bg: #12301f;
    --danger-texto: #ff9d86;
    --blue: #6aa9f5;
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

/* As fotos dos produtos vem das lojas com fundo branco recortado. Num cartao
   escuro ficavam como um retangulo branco a flutuar; o fundo claro por tras da
   foto mantem-se de proposito, porque a foto E branca e fingir o contrario
   dava um halo cinzento a volta de cada produto. */
:root[data-tema="escuro"] .product-photo,
:root[data-tema="escuro"] .brand-photo,
:root[data-tema="escuro"] .compare-photo {
    background: #f4f1e8;
}

/* O placeholder nao e uma foto: e um desenho nosso, e nao precisa do fundo
   claro que as fotos das lojas exigem. Com ele ficava um retangulo branco
   enorme no meio de uma pagina escura, exatamente onde NAO ha nada para ver. */
:root[data-tema="escuro"] .product-photo.photo-missing,
:root[data-tema="escuro"] .brand-photo.photo-missing,
:root[data-tema="escuro"] .compare-photo.photo-missing,
:root[data-tema="escuro"] img.photo-missing {
    background: var(--surface);
    opacity: 0.75;
}

:root:not([data-tema="claro"]) .product-photo,
:root:not([data-tema="claro"]) .brand-photo,
:root:not([data-tema="claro"]) .compare-photo {
    background: #f4f1e8;
}

:root:not([data-tema="claro"]) img.photo-missing {
    background: var(--surface);
    opacity: 0.75;
}

/* O botao do tema: um so, que roda entre seguir o sistema, escuro e claro. */
.tema-botao {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    font-size: 1.05rem;
    cursor: pointer;
    line-height: 1;
}

.tema-botao:hover {
    border-color: var(--contorno);
}


/* PRETO SOBRE VERDE, NOS DOIS TEMAS.
   ---------------------------------------------------------------------------
   Estas caixas tem o verde da marca como fundo. A cor do texto vinha herdada
   do corpo da pagina — no tema claro isso dava escuro sobre verde, que e o que
   se quer, mas no escuro passou a claro sobre verde: as pastilhas de preco
   ficaram ilegiveis.

   A PRIMEIRA VERSAO DESTA REGRA ESCONDEU O PRECO NO COMPUTADOR.
   A lista foi tirada do ficheiro sem reparar que tres destes seletores so sao
   verdes DENTRO de uma media query. O `.offer-row b` e uma pastilha verde no
   telemovel e texto simples no computador — pintado de escuro em todo o lado,
   o preco desaparecia no ecra grande, que e onde ninguem estava a olhar quando
   a regra foi escrita.

   Por isso agora sao dois blocos, e cada um vale onde o verde existe mesmo. */
.alt-poupa,
.alt-selo,
.bar.spain,
.button.primary,
.emoji-badge,
.filter-strip a.active, .filter-strip a:hover,
.final-total,
.pager .pager-current,
.price-grid .winner,
.progress-meter i,
.rodape-idioma a.active,
.route-metric span,
.station-mini b,
.tag {
    color: var(--forte);
}

@media (max-width: 720px) {
    .offer-row b,
    .tabbar a.active,
    .topbar-lang a.active {
        color: var(--forte);
    }
}

.rodape-idioma {
    display: flex;
    gap: 14px;
    margin-top: 12px;
}

.rodape-idioma a {
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--muted);
}

.rodape-idioma a:hover {
    color: var(--ink);
}

.rodape-idioma a.active {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--green);
    text-decoration-thickness: 2px;
}

/* O TEXTO DE SUGESTAO DOS CAMPOS.
   ---------------------------------------------------------------------------
   Sem regra nenhuma, o browser usa o cinzento dele — rgb(117,117,117) — que da
   3,5 de contraste sobre o campo escuro. Um placeholder e uma instrucao ("o que
   escrever aqui"), nao decoracao: tem de se ler. Fica no tom de --muted, que o
   tema ja ajusta. */
input::placeholder,
textarea::placeholder {
    color: var(--muted);
    opacity: 1;
}

/* Texto pequeno sobre fundo escuro perde mais do que o grande: a mesma cor que
   chega num paragrafo nao chega numa legenda de 0,78rem. */
:root[data-tema="escuro"] .chart-legend em,
:root[data-tema="escuro"] small,
:root[data-tema="escuro"] .freshness {
    color: #b6ada0;
}

:root:not([data-tema="claro"]) .chart-legend em,
:root:not([data-tema="claro"]) small,
:root:not([data-tema="claro"]) .freshness {
    color: #b6ada0;
}

/* DENTRO DE UMA CAIXA VERDE, O TEXTO SECUNDARIO TAMBEM E ESCURO.
   ---------------------------------------------------------------------------
   A regra geral dos fundos verdes trata do texto da propria caixa, mas os
   filhos com cor propria — o `.muted` do pais, por exemplo — continuavam com o
   cinzento claro do tema escuro: 1,8 de contraste sobre o verde, ou seja
   ilegivel. Aqui o verde e sempre claro, por isso o secundario tem de ser um
   escuro suave e nao um claro suave. */
.winner .muted,
.winner span,
.best-offer .muted,
.alt-poupa .muted,
.compare-total .final-total.positive .muted,
.price-grid .winner span {
    color: rgba(38, 27, 20, 0.72);
}

/* O nome escrito como no logotipo: "Iber" na cor do texto, "Cash" no verde.
   O <i> nao esta aqui por italico — esta porque e o elemento mais curto que
   permite pintar meia palavra sem acrescentar uma div ao HTML. */
.brand-nome {
    font-weight: 950;
    letter-spacing: -0.02em;
    font-style: normal;
}

.brand-nome i {
    font-style: normal;
    color: var(--green-texto);
}

/* O RODAPE NO TELEMOVEL ESTAVA A RESPIRAR DE MAIS.
   Quatro colunas empilhadas, cada uma com a folga que faz sentido lado a lado
   no computador, davam um rodape mais alto do que a propria pagina. */
@media (max-width: 720px) {
    .rodape {
        padding-top: 18px;
        padding-bottom: 10px;
    }

    .rodape-base {
        margin-top: 14px;
        padding-top: 12px;
        gap: 4px;
    }

    .rodape-grid h3,
    .rodape-grid .eyebrow,
    .rodape-grid .mini-label {
        margin: 0 0 4px;
        font-size: 0.72rem;
    }

    .rodape-grid a,
    .rodape-grid li {
        line-height: 1.5;
    }

    .rodape-grid > div:first-child .muted {
        font-size: 0.8rem;
    }

    /* As listas de links sao curtas — quatro ou cinco linhas cada — e
       empilhadas uma sobre a outra davam um rodape de 1017px, mais alto do que
       o proprio ecra. Lado a lado ocupam metade. A primeira coluna (marca,
       descricao e aviso legal) fica a largura toda, porque tem texto corrido e
       partido ao meio nao se le. */
    .rodape-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        /* Sem isto, um bloco dobrado e fechado continuava a ocupar a altura do
           vizinho da mesma linha: dobrava-se o texto e nao se poupava um pixel,
           porque a grelha estica os filhos todos ate a altura da linha. */
        align-items: start;
        padding-bottom: 16px;
    }

    /* As listas de links: sao links, nao paragrafos. Com 6px de intervalo e
       linha de 1,5 cada uma ocupava 241 pixeis para cinco palavras. */
    .rodape nav {
        gap: 2px;
    }

    .rodape nav a {
        padding: 3px 0;
        font-size: 0.88rem;
        line-height: 1.35;
    }

    .rodape h2 {
        margin-bottom: 5px;
    }

    .rodape p {
        margin-bottom: 6px;
    }

    .rodape-grid > div:first-child {
        grid-column: 1 / -1;
        order: 1;
    }

    /* A ORDEM MUDA NO TELEMOVEL, E POR ISSO E CSS E NAO HTML.
       No HTML a sequencia e lista, texto, lista, texto — que lado a lado no
       computador da quatro colunas certinhas. Empilhado, isso poe cada lista
       ao lado de um bloco dobrado de 30 pixeis, e a linha fica com a altura da
       lista na mesma: a dobra nao poupava nada.

       Aqui as duas listas juntam-se numa linha e os dois textos passam a
       largura toda, ja fechados. A ordem de leitura do HTML mantem-se para
       quem usa leitor de ecra, que nao ve colunas nenhumas. */
    .rodape-grid > nav {
        order: 2;
    }

    .rodape-grid > .rodape-dobra {
        grid-column: 1 / -1;
        order: 3;
    }

    .rodape-grid > div:first-child p {
        font-size: 0.84rem;
        line-height: 1.45;
    }

    .rodape-grid > div > p,
    .rodape-grid ul {
        margin-top: 6px;
    }

    .rodape-grid li {
        margin-bottom: 2px;
    }

    .rodape-preferencias {
        margin-top: 10px;
    }

    .rodape h3,
    .rodape .mini-label {
        margin-bottom: 4px;
    }
}

/* O BOTAO DO TEMA, DESENHADO E NAO ESCRITO.
   ---------------------------------------------------------------------------
   Era um emoji — 🌗 — e um emoji nao e um icone: cada sistema desenha o seu,
   muda de cor e de peso sem se poder controlar, e no Android aquele em
   particular sai como um circulo cinzento que nao se percebe. Estes tres sao
   desenhados com o proprio elemento, herdam a cor do texto e sao iguais em
   todo o lado.

   sol      circulo cheio com um anel a volta
   lua      circulo com uma mordida (dois circulos sobrepostos)
   sistema  circulo com metade preenchida */
.tema-icone {
    display: block;
    position: relative;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 2px solid currentColor;
    overflow: hidden;
}

/* Sistema: meio a meio, que e o que "segue o que o aparelho disser" parece. */
.tema-icone::after {
    content: "";
    position: absolute;
    inset: 0 0 0 50%;
    background: currentColor;
}

/* Escuro: a mordida da lua, feita com a sombra do proprio circulo. */
[data-tema-estado="escuro"] .tema-icone {
    border-color: transparent;
    background: currentColor;
    box-shadow: inset -5px -3px 0 0 var(--card);
}

[data-tema-estado="escuro"] .tema-icone::after {
    content: none;
}

/* Claro: o sol, com os raios em volta feitos por um anel tracejado. */
[data-tema-estado="claro"] .tema-icone {
    width: 11px;
    height: 11px;
    margin: 3px;
    border-width: 0;
    background: currentColor;
    overflow: visible;
    box-shadow:
        0 -6px 0 -3.6px currentColor, 0 6px 0 -3.6px currentColor,
        -6px 0 0 -3.6px currentColor, 6px 0 0 -3.6px currentColor,
        -4.3px -4.3px 0 -3.6px currentColor, 4.3px 4.3px 0 -3.6px currentColor,
        -4.3px 4.3px 0 -3.6px currentColor, 4.3px -4.3px 0 -3.6px currentColor;
}

[data-tema-estado="claro"] .tema-icone::after {
    content: none;
}

/* Reportar um erro: centrado e sozinho na linha.
   Encostado a esquerda com a explicacao ao lado parecia mais um link de rodape
   do que uma accao — e e uma accao que se quer encontrar depressa quando algo
   esta errado. */
.reportar-linha {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.reportar-linha .muted {
    font-size: 0.82rem;
    max-width: 44ch;
}

/* O aviso da primeira visita. Encostado ao fundo, sem tapar nada do conteudo
   no computador; no telemovel sobe acima da barra de navegacao, que e fixa. */
.aviso-privacidade {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    max-width: 880px;
    margin: 0 auto;
    padding: 14px 18px;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.aviso-privacidade strong {
    display: block;
    margin-bottom: 3px;
}

.aviso-privacidade p {
    margin: 0;
    max-width: 62ch;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--muted);
}

.aviso-privacidade .button {
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .aviso-privacidade {
        bottom: 74px;
        padding: 12px 14px;
    }

    .aviso-privacidade .button {
        width: 100%;
    }
}

.seguir-preco {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: var(--surface);
}

.seguir-preco strong {
    display: block;
    margin-bottom: 4px;
}

.seguir-preco p {
    margin: 0;
    max-width: 52ch;
    font-size: 0.82rem;
    line-height: 1.5;
}

.seguir-campos {
    display: flex;
    gap: 8px;
    flex: 1 1 280px;
}

.seguir-campos input {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 720px) {
    .seguir-campos {
        flex: 1 1 100%;
    }
}


/* O ATRIBUTO hidden TEM DE GANHAR SEMPRE.
   ---------------------------------------------------------------------------
   O `hidden` do HTML vale `display: none` — mas vem da folha do browser, que
   perde para qualquer regra nossa. Uma caixa declarada `display: flex` na
   classe ficava visivel mesmo com hidden posto, e foi isso que aconteceu ao
   aviso de privacidade: carregar em "Percebi" marcava-o como escondido e nao
   acontecia nada no ecra.

   Uma linha aqui evita o erro em todo o lado, agora e no futuro. */
[hidden] {
    display: none !important;
}

/* Os blocos dobraveis do rodape. O triangulo do browser e substituido por um
   sinal proprio, alinhado com o titulo, e no computador nem aparece — la os
   blocos estao sempre abertos e um sinal de abrir seria uma mentira. */
.rodape-dobra > summary {
    list-style: none;
    cursor: default;
}

.rodape-dobra > summary::-webkit-details-marker {
    display: none;
}

.rodape-dobra > summary h2 {
    display: inline;
}

@media (max-width: 720px) {
    .rodape-dobra > summary {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .rodape-dobra > summary::after {
        content: "+";
        font-weight: 900;
        color: var(--muted);
    }

    .rodape-dobra[open] > summary::after {
        content: "−";
    }
}

/* De onde a lista esta a olhar. */
.posto-origem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: -6px 0 14px;
    font-size: 0.86rem;
    color: var(--muted);
}

.posto-origem a {
    font-weight: 800;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--green);
    text-decoration-thickness: 2px;
}

/* OS CARTOES DE POSTO NO TELEMOVEL: UMA LINHA, NAO UM CARTAZ.
   ---------------------------------------------------------------------------
   Cada cartao tinha 330px de altura minima — logotipo grande, nome, cidade,
   preco em corpo enorme, litros, morada, hora da leitura e duas etiquetas. Num
   ecra de telemovel cabiam dois. Para escolher onde abastecer o que se compara
   e marca, distancia e preco; o resto le-se depois, se interessar.

   Passa a uma linha por posto — logotipo pequeno, nome e cidade, preco a
   direita — e cabem seis. A morada e a hora da leitura saem: continuam no
   HTML, para quem usa leitor de ecra e para o computador, e escondem-se so
   onde o espaco custa. */
@media (max-width: 720px) {
    /* O CARTAO DE POSTO NO TELEMOVEL: UMA LINHA POR POSTO.
       -----------------------------------------------------------------------
       Estas regras foram escritas para a versao antiga do cartao, que tinha
       .brand-photo e .station-title. O cartao foi refeito (.marca-logo e
       .station-id) e estas ficaram a apontar para classes que ja nao existem:
       as areas do grid nunca eram atribuidas e o cartao desmanchava-se, com o
       preco por cima do nome.

       Para escolher onde abastecer comparam-se tres coisas: marca, preco e
       distancia. Numa linha cabem as tres e cabem seis postos no ecra, em vez
       de dois. O resto — morada, hora da leitura — esta na ficha, a um toque. */
    .station-grid {
        display: grid;
        gap: 8px;
    }

    .station-card {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        grid-template-areas:
            "marca id   preco"
            "marca meta preco"
            "ver   ver  ver";
        grid-template-rows: auto auto auto;
        align-items: center;
        gap: 4px 12px;
        padding: 10px 12px;
    }

    .station-card > .marca-logo {
        width: 40px;
        height: 40px;
    }

    .station-id h3 {
        font-size: 0.95rem;
        overflow-wrap: anywhere;
    }

    .station-id p {
        font-size: 0.76rem;
    }

    .station-card .station-price {
        font-size: 1.1rem;
        padding: 7px 10px;
        border-radius: 9px;
        background: var(--green);
        color: var(--forte);
        white-space: nowrap;
    }

    .station-card .station-meta {
        font-size: 0.74rem;
        gap: 2px 8px;
    }

    /* O "50 L = ..." sai: e o preco vezes cinquenta, uma conta que a ficha
       faz e que aqui so rouba a linha a distancia, que e o que se compara.
       Marcado por classe e nao por posicao: na lista dos postos vizinhos o
       primeiro span e a distancia, e escondia-se justamente o que interessa. */
    .station-card .station-meta .meta-deposito {
        display: none;
    }

    /* E os pontos separadores saem todos: no estreito a linha quebra e o
       ponto cai sozinho no inicio da seguinte, a parecer um erro. O espaco
       entre os itens chega para os separar. */
    .station-card .station-meta span + span::before {
        content: none;
    }

    .station-card .station-ver {
        padding-top: 8px;
        margin-top: 4px;
        font-size: 0.76rem;
    }
}

/* A BARRA DE CIMA TEM DE CABER, E OS NOMES NAO PODEM SER CORTADOS.
   ---------------------------------------------------------------------------
   A 1280px o menu passava do espaco disponivel: "Carrinho" aparecia como "Ca"
   e "Conta" nem aparecia. Um menu que corta o nome dos seus proprios itens
   deixa de ser um menu.

   Entre 900 e 1200px os emojis saem — sao decoracao, e o nome e que importa —
   e o corpo e o espacamento apertam. Abaixo disso ja existe a barra de baixo,
   que e onde a navegacao vive no telemovel. */
@media (max-width: 1500px) {
    .nav {
        gap: 2px;
    }

    .nav a {
        padding: 9px 9px;
        font-size: 0.86rem;
        white-space: nowrap;
    }
}

/* A ESCADA DE ENCOLHIMENTO DO MENU.
   ---------------------------------------------------------------------------
   Cada item novo no menu desce todos os degraus desta escada. Com a entrada do
   Blog passaram a ser sete, e a 1280px o "Conta" ficava por baixo dos botoes
   de sessao — visivel como uma lasca de cor e mais nada. Um item de menu meio
   tapado e pior do que nenhum: parece avaria.

   Sao tres degraus, e cada um deita fora o que custa mais espaco e vale menos:
     1365px  o emoji sai. E decoracao; o nome e que leva a algum lado.
     1100px  os nomes longos passam ao curto ("Comparador de preco" ->
             "Comparar"). O nome inteiro fica no atributo e volta no ecra
             grande.
   Abaixo de 720px o menu de topo desaparece e a barra de baixo toma conta. */
@media (max-width: 1365px) {
    .nav a {
        font-size: 0.82rem;
        padding: 9px 7px;
    }

    /* O emoji e o primeiro no-de-texto de cada link: some sem tocar no nome. */
    .nav a {
        font-size: 0;
    }

    .nav a::after {
        content: attr(data-nome);
        font-size: 0.84rem;
    }
}

@media (max-width: 1100px) and (min-width: 721px) {
    /* attr() sem valor devolve string vazia, e um link sem nome nao se clica.
       Por isso o nome curto so substitui onde existe mesmo. */
    .nav a[data-curto]::after {
        content: attr(data-curto);
    }
}

/* Abaixo de 720px o menu de topo sai: e exatamente ai que a barra de baixo
   aparece e faz o mesmo trabalho com o polegar em vez do cursor. O limite tem
   de ser o mesmo dos dois lados — a 1000px, como estava primeiro, havia uma
   faixa entre 720 e 1000 sem menu nenhum. */
@media (max-width: 720px) {
    .topbar .nav {
        display: none;
    }

    .topbar {
        grid-template-columns: auto 1fr;
    }
}

/* A faixa dos 1100 aos 720: cabe, mas por pouco. Os botoes de sessao e o
   espacamento do menu apertam mais um pouco para o nome de nenhum item ficar
   escondido atras do vizinho. */
@media (max-width: 1100px) and (min-width: 721px) {
    .topbar {
        gap: 10px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .nav a::after {
        font-size: 0.78rem;
    }

    .nav a {
        padding: 9px 5px;
    }

    .session .button {
        padding: 8px 11px;
        font-size: 0.8rem;
    }
}