/* ======================================================================
   GUIAS DE TPMS POR MARCA
   ======================================================================
   Estilos do layout dos guias de TPMS por marca de automovel: hero com a
   cor da marca, indice "Neste guia", seccoes de artigo, tabelas de avisos
   e pastilhas de modelo.

   Estava embutido num <style> dentro da valvulas-tpms.html. Com uma pagina
   por marca, cada uma carregaria uma copia destes 10 KB — por isso passou
   a ficheiro proprio, como ja acontece com artigo-dicas.css, ebc.css e
   escovas-aplicacoes.css. (Auditoria 2026-08-28.)
   ====================================================================== */

/* ===== HERO GUIA ===== */
    /* Fundo do hero com fotografia e filtro escuro por cima.
   A foto entra pela variavel --hero-fundo, definida no proprio <header> de
   cada pagina de marca; sem ela, fica so o gradiente escuro de sempre.
   O gradiente e mais opaco a esquerda, que e onde assenta o texto, e vai
   abrindo para a direita para a imagem se ver. */
.hero-guia {
  background-color: #0a0a0a;
  background-image:
    linear-gradient(100deg,
      rgba(8,8,12,1) 0%,
      rgba(8,8,12,1) 30%,
      rgba(10,10,18,.86) 52%,
      rgba(14,14,26,.45) 72%,
      rgba(14,14,26,.30) 100%),
    var(--hero-fundo, none);
  /* A foto NAO leva "cover": as fotos que temos rondam os 1000 px de largura
     e, esticadas para encher um hero de 1900 px, ficam com o dobro do tamanho
     e cortadas a uma faixa central. Com "auto 100%" a foto e escalada apenas
     ate a altura do hero e assenta a direita, no tamanho natural ou abaixo
     dele — nitida, sem corte agressivo. O gradiente esse cobre tudo, e vai
     abrindo da esquerda para a direita para a foto surgir por baixo. */
  background-size: cover, auto 100%;
  background-position: center, right center;
  background-repeat: no-repeat, no-repeat;
}

/* Em ecras estreitos a foto fica atras do texto todo: escurece-se mais,
   senao o texto deixa de se ler. */
@media (max-width: 991.98px) {
  /* Em ecra estreito nao ha espaco livre a direita, por isso a foto passa a
     ocupar o fundo todo — e aqui "cover" e seguro: numa largura de 400 px a
     foto de 1023 px e REDUZIDA, nao ampliada, logo fica nitida.
     O filtro e mais carregado em cima, onde assenta o titulo, e alivia em
     baixo para a imagem respirar sem prejudicar a leitura. */
  .hero-guia {
    background-image:
      linear-gradient(180deg,
        rgba(8,8,12,.93) 0%,
        rgba(8,8,12,.88) 45%,
        rgba(14,14,26,.72) 100%),
      var(--hero-fundo, none);
    background-size: cover, cover;
    background-position: center, center right;
  }
}

.hero-guia {
      /* O "background" abreviado que aqui estava reiniciava a imagem de
         fundo definida no bloco acima — era por isso que a foto do hero
         nao aparecia. Fica so a cor de base, como background-color. */
      background-color: #0a0a0a;
      color: white;
      padding: 60px 0 50px;
    }
    .hero-guia .article-label { display: inline-flex; align-items: center; gap: .4rem; background: #e31937; color: #fff; border-radius: 4px; padding: .2rem .65rem; font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 1.2rem; }
    .hero-guia .meta-info { color: #aaa; font-size: .88rem; }
    .hero-guia .meta-info span { margin-right: 1.25rem; }
    .model-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
    .model-pill { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 50px; padding: .2rem .7rem; font-size: .82rem; color: #ddd; }

    /* ===== MENU DE MARCAS (glossário, preparado para crescer) ===== */
    .brand-menu-section { background: #f8f9fa; border-bottom: 1px solid #e9ecef; }
    .brand-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
    .brand-pill {
      background: #fff;
      border: 2px solid #e9ecef;
      border-radius: 50px;
      padding: .5rem 1.4rem;
      font-weight: 600;
      font-size: .95rem;
      color: #333;
      cursor: pointer;
      transition: all .2s ease;
    }
    .brand-pill:hover, .brand-pill.active { border-color: #e57200; color: #e57200; background: #fff8f0; }

    /* ===== BOTÃO "VER GUIA COMPLETO" (expande/recolhe cada marca) ===== */
    .brand-expand-btn {
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.3);
      color: #fff;
      border-radius: 50px;
      padding: .55rem 1.4rem;
      font-weight: 600;
      font-size: .92rem;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      transition: all .2s ease;
    }
    .brand-expand-btn:hover { background: rgba(255,255,255,.22); color: #fff; }
    .brand-expand-btn[aria-expanded="true"] i { transform: rotate(180deg); }
    .brand-expand-btn i { transition: transform .2s ease; }

    /* ===== VARIANTE MERCEDES (mesma estrutura, cor de marca diferente) ===== */
    .hero-guia-mercedes .article-label { background: #00708f; }
    .hero-guia-mercedes .toc-box { border-left-color: #00708f; }

    /* ===== VARIANTE OPEL ===== */
    .hero-guia-opel .article-label { background: #f5a623; color: #222; }
    .hero-guia-opel .toc-box { border-left-color: #f5a623; }

    /* ===== VARIANTE AUDI ===== */
    .hero-guia-audi .article-label { background: #bb0a30; }
    .hero-guia-audi .toc-box { border-left-color: #bb0a30; }

    /* ===== VARIANTE BMW/MINI ===== */
    .hero-guia-bmw .article-label { background: #1c69d4; }
    .hero-guia-bmw .toc-box { border-left-color: #1c69d4; }

    /* ===== VARIANTE PEUGEOT ===== */
    .hero-guia-peugeot .article-label { background: #001e50; }
    .hero-guia-peugeot .toc-box { border-left-color: #001e50; }

    /* ===== VARIANTE CITROËN ===== */
    .hero-guia-citroen .article-label { background: #c4122e; }
    .hero-guia-citroen .toc-box { border-left-color: #c4122e; }

    /* ===== VARIANTE TOYOTA ===== */
    .hero-guia-toyota .article-label { background: #eb0a1e; }
    .hero-guia-toyota .toc-box { border-left-color: #eb0a1e; }

    /* ===== VARIANTE RENAULT/DACIA ===== */
    .hero-guia-renault .article-label { background: #ffcc00; color: #222; }
    .hero-guia-renault .toc-box { border-left-color: #ffcc00; }

    /* ===== VARIANTE NISSAN ===== */
    .hero-guia-nissan .article-label { background: #c3002f; }
    .hero-guia-nissan .toc-box { border-left-color: #c3002f; }

    /* ===== VARIANTE KIA ===== */
    .hero-guia-kia .article-label { background: #05141f; }
    .hero-guia-kia .toc-box { border-left-color: #bb162b; }

    /* ===== VARIANTE HYUNDAI ===== */
    .hero-guia-hyundai .article-label { background: #002c5f; }
    .hero-guia-hyundai .toc-box { border-left-color: #002c5f; }

    /* ===== VARIANTE MG ===== */
    .hero-guia-mg .article-label { background: #ff6d00; }
    .hero-guia-mg .toc-box { border-left-color: #ff6d00; }

    /* ===== VARIANTE PORSCHE ===== */
    .hero-guia-porsche .article-label { background: #B08D3F; color: #14120A; }
    .hero-guia-porsche .toc-box { border-left-color: #B08D3F; }

    /* ===== VARIANTE LEXUS ===== */
    .hero-guia-lexus .article-label { background: #1a1a1a; }
    .hero-guia-lexus .toc-box { border-left-color: #1a1a1a; }

    /* ===== VARIANTE LAND ROVER ===== */
    .hero-guia-landrover .article-label { background: #003831; }
    .hero-guia-landrover .toc-box { border-left-color: #003831; }

    /* ===== VARIANTE JAGUAR ===== */
    .hero-guia-jaguar .article-label { background: #1a1a2e; }
    .hero-guia-jaguar .toc-box { border-left-color: #1a1a2e; }

    /* ===== VARIANTE VOLVO ===== */
    .hero-guia-volvo .article-label { background: #003057; }
    .hero-guia-volvo .toc-box { border-left-color: #003057; }

    /* ===== VARIANTE POLESTAR ===== */
    .hero-guia-polestar .article-label { background: #000000; }
    .hero-guia-polestar .toc-box { border-left-color: #000000; }

    /* ===== VARIANTE ALFA ROMEO ===== */
    .hero-guia-alfa .article-label { background: #981e32; }
    .hero-guia-alfa .toc-box { border-left-color: #981e32; }

    /* ===== VARIANTE ASTON MARTIN ===== */
    .hero-guia-aston .article-label { background: #00665a; }
    .hero-guia-aston .toc-box { border-left-color: #00665a; }

    /* ===== TABLE OF CONTENTS ===== */
    .toc-box { background: #f8f9fa; border: 1px solid #e9ecef; border-left: 4px solid #e57200; border-radius: 8px; padding: 1.5rem 1.75rem; }
    .toc-box ol { padding-left: 1.25rem; margin: 0; }
    .toc-box li { margin-bottom: .4rem; }
    .toc-box a { color: #1a1a2e; text-decoration: none; font-size: .95rem; }
    .toc-box a:hover { color: #e57200; }

    /* ===== ARTICLE BODY ===== */
    .article-section { padding: 3rem 0; }
    .article-section + .article-section { border-top: 1px solid #f0f0f0; }
    .section-anchor { padding-top: 5rem; margin-top: -5rem; display: block; } /* offset for fixed navbar */

    /* ===== ALERT BOXES ===== */
    .alert-tesla { background: #fff0f0; border: 1px solid #f5c6c6; border-left: 4px solid #e31937; border-radius: 6px; padding: 1rem 1.25rem; }
    .alert-tip { background: #f0f7ff; border: 1px solid #c9e0ff; border-left: 4px solid #0d6efd; border-radius: 6px; padding: 1rem 1.25rem; }
    .alert-success-custom { background: #f0faf2; border: 1px solid #b7e2c0; border-left: 4px solid #28a745; border-radius: 6px; padding: 1rem 1.25rem; }
    .alert-warning-custom { background: #fff8e1; border: 1px solid #ffe082; border-left: 4px solid #ffc107; border-radius: 6px; padding: 1rem 1.25rem; }

    /* ===== ERROR CODE CARDS ===== */
    .error-card { border: 2px solid #e9ecef; border-radius: 12px; padding: 1.5rem; height: 100%; transition: box-shadow .2s; }
    .error-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
    .error-card .error-code { font-family: monospace; font-size: 1rem; font-weight: 700; color: #e31937; background: #fff0f0; padding: .2rem .6rem; border-radius: 4px; display: inline-block; margin-bottom: .75rem; }
    .error-card .severity { font-size: .78rem; font-weight: 700; border-radius: 50px; padding: .15rem .6rem; }
    .severity-low { background: #d4edda; color: #155724; }
    .severity-medium { background: #fff3cd; color: #856404; }
    .severity-high { background: #f8d7da; color: #721c24; }

    /* ===== TOUCHSCREEN MOCKUP ===== */
    .screen-mockup { background: #111; border-radius: 16px; padding: 1.5rem; color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 380px; margin: 0 auto; box-shadow: 0 8px 40px rgba(0,0,0,.35); border: 1px solid #333; }
    .screen-mockup .screen-bar { display: flex; justify-content: space-between; font-size: .7rem; color: #888; margin-bottom: 1.25rem; }
    .screen-mockup .car-display { text-align: center; padding: .5rem 0 1rem; }
    .screen-mockup .car-svg { font-size: 3rem; color: #fff; }
    .screen-mockup .tire-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: .5rem 0 1rem; }
    .screen-mockup .tire-cell { background: #1e1e1e; border-radius: 8px; padding: .6rem .75rem; text-align: center; }
    .screen-mockup .tire-cell .psi { font-size: 1.3rem; font-weight: 700; }
    .screen-mockup .tire-cell .psi.ok { color: #4caf50; }
    .screen-mockup .tire-cell .psi.warn { color: #ff9800; }
    .screen-mockup .tire-cell .psi.err { color: #f44336; }
    .screen-mockup .tire-cell .psi.na { color: #555; }
    .screen-mockup .tire-cell .label { font-size: .65rem; color: #888; margin-top: .1rem; }
    .screen-mockup .alert-bar { background: #f44336; border-radius: 8px; padding: .7rem 1rem; font-size: .8rem; margin-top: .5rem; display: flex; align-items: center; gap: .5rem; }
    .screen-mockup .alert-bar.orange { background: #e65100; }
    .screen-mockup .alert-bar.yellow { background: #f57f17; }

    /* ===== RESET STEPS ===== */
    .reset-step { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; border: 1px solid #e9ecef; border-radius: 10px; margin-bottom: .75rem; background: #fff; }
    .reset-step .step-num { width: 32px; height: 32px; border-radius: 50%; background: #e57200; color: #fff; font-weight: 700; font-size: .9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .reset-step .step-path { font-size: .8rem; font-family: monospace; background: #f0f0f0; border-radius: 4px; padding: .1rem .4rem; color: #333; }

    /* ===== FAQ ===== */
    .accordion-button:not(.collapsed) { color: #e57200; background-color: #fff8f2; }

    /* ===== CTA SIDEBAR-STYLE ===== */
    .cta-sticky { background: linear-gradient(135deg, #1a1a2e, #0a0a0a); border-radius: 14px; padding: 1.75rem 1.5rem; color: #fff; position: sticky; top: 80px; }
    .cta-sticky .stock-dot { width: 8px; height: 8px; border-radius: 50%; background: #28a745; display: inline-block; animation: blink 1.4s infinite; margin-right: .4rem; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
    .cta-sticky .price-from { font-size: 1.8rem; font-weight: 800; color: #fff; }
    .cta-sticky .price-from .price-currency { font-size: .9rem; vertical-align: top; position: static; display: inline; top: auto; left: auto; }

/* ======================================================================
   ACRESCENTOS DE 2026-08-28
   ====================================================================== */

/* Botao de WhatsApp com a cor da propria aplicacao. Estava "outline-light",
   que nao se lia como WhatsApp nem chamava o clique.
   IMPORTANTE — o seletor e "a.btn.btn-whatsapp", nao ".btn-whatsapp":
   esta folha de estilos e carregada ANTES do bootstrap.min.css (fica na
   regiao editavel "head" do template, que vem acima do bloco de CSS), por
   isso uma regra de especificidade igual a do .btn perdia e o botao saia
   preto. Com dois nomes de classe mais a etiqueta, ganha em qualquer ordem.
   As variaveis --bs-btn-* sao as que o Bootstrap 5 le internamente. */
a.btn.btn-whatsapp {
  --bs-btn-bg: #25D366;
  --bs-btn-border-color: #25D366;
  --bs-btn-color: #0b2e13;
  --bs-btn-hover-bg: #1ebe5a;
  --bs-btn-hover-border-color: #1ebe5a;
  --bs-btn-hover-color: #0b2e13;
  --bs-btn-active-bg: #17a34c;
  --bs-btn-active-border-color: #17a34c;
  --bs-btn-active-color: #0b2e13;
  background-color: #25D366;
  border: 1px solid #25D366;
  color: #0b2e13;
  font-weight: 600;
}
a.btn.btn-whatsapp:hover,
a.btn.btn-whatsapp:focus {
  background-color: #1ebe5a;
  border-color: #1ebe5a;
  color: #0b2e13;
}
a.btn.btn-whatsapp:active {
  background-color: #17a34c;
  border-color: #17a34c;
  color: #0b2e13;
}

/* Resposta curta no topo do guia: e o excerto que os assistentes de IA
   copiam e o que o leitor apressado precisa de ver primeiro. */
.resposta-rapida {
  border-left: 4px solid #f0b323;
  background: #fffaf0;
  padding: 1.1rem 1.3rem;
  border-radius: 0 6px 6px 0;
  margin-bottom: 2rem;
}
.resposta-rapida strong { display: block; margin-bottom: .35rem; }

/* Cartoes de equipamento (maquina de diagnostico e sensores) */
.equipamento-card {
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
  background: #fff;
}
.equipamento-card img {
  width: 100%;
  /* cover preenche todo o rectangulo, cortando o que sobra — com contain
     ficavam duas faixas cinzentas a ladear as fotos quadradas.
     A altura vem de um racio 4:3 e nao de um valor fixo: as fotos de
     produto sao quadradas, e numa faixa de 210px so se via metade do
     aparelho. Com 4:3 fica visivel cerca de 80%. */
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #f7f7f7;
}

/* Ecras estreitos: a caixa fica mais larga que alta, e um racio mais baixo
   evita uma imagem desproporcionadamente alta no telemovel. */
@media (max-width: 767.98px) {
  .equipamento-card img { aspect-ratio: 16 / 9; }
}
.equipamento-card .corpo { padding: 1.1rem 1.25rem 1.35rem; }
.equipamento-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }
.equipamento-card p { font-size: .92rem; color: #555; margin-bottom: 0; }

/* Bloco tecnico: fundo distinto, para separar do texto geral */
.bloco-tecnico {
  background: #f6f8fa;
  border-top: 1px solid #e3e6ea;
  border-bottom: 1px solid #e3e6ea;
}
.bloco-tecnico .tecnico-label {
  display: inline-block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: #556;
  background: #e6eaef;
  padding: .3rem .7rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

/* Imagem de topo do guia */
.hero-guia .hero-imagem {
  border-radius: 10px;
  width: 100%;
  height: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}


/* As etiquetas de marcas compativeis passaram de <span> a <a> na pagina
   geral de TPMS: cada uma leva ao guia da marca. O estilo base vem do
   custom.css; falta so tirar o sublinhado e dar resposta ao rato. */
a.compatibility-badge {
  text-decoration: none;
  transition: background-color .15s ease, transform .15s ease;
}
a.compatibility-badge:hover,
a.compatibility-badge:focus {
  background-color: #1e7e34;
  color: #fff;
  transform: translateY(-1px);
}