/*
 * Ficha técnica (templates/ficha-carro.tpl). Complementa o css/modelo.css (cartões, topo, barra de seções) com as
 * peças próprias da ficha: galeria, régua de anos, destaques com percentil, blocos da ficha, consumo, NCAP,
 * equipamentos, o que mudou, versões e o visor de fotos.
 */

/* ------------------------------------------------------------- topo */
.fc-topo { align-items: start; }
.fc-galeria { min-width: 0; }
.fc-foto { width: 100%; padding: 0; border: 0; cursor: zoom-in; font: inherit; }
.fc-foto img { transition: transform .5s ease; }
.fc-foto:hover img { transform: scale(1.02); }
.fc-foto-qtd { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
               background: rgba(20, 20, 20, .72); color: #fff; font-size: 13px; font-weight: 600; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fc-foto-qtd svg { width: 16px; height: 16px; }
.fc-miniaturas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.fc-miniaturas button { position: relative; padding: 0; border: 1px solid var(--gc-borda, #ececec); border-radius: 12px; overflow: hidden; background: #f6f6f7;
                        aspect-ratio: 4 / 3; cursor: pointer; transition: border-color .2s, transform .2s; }
.fc-miniaturas button:hover { border-color: #ffc6a3; transform: translateY(-1px); }
.fc-miniaturas img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-miniaturas span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(20, 20, 20, .55); color: #fff; font-weight: 700; font-size: 15px; }
.fc-credito { font-size: 12px; color: var(--gc-texto-3, #9a9a9a); margin: 8px 0 0; }

.fc h1 { font-size: 40px; }
.fc-h1-pre { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gc-texto-3, #9a9a9a); margin-bottom: 6px; }
.fc-ano { color: var(--gc-laranja, #ff5a00); }
.fc .md-numeros { grid-template-columns: minmax(0, 1.3fr) repeat(auto-fit, minmax(0, 1fr)); }

.fc-anos { display: flex; align-items: center; gap: 12px; margin-top: 18px; min-width: 0; }
.fc-anos-rot { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gc-texto-3, #9a9a9a); flex: none; }
.fc-anos-trilho { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; min-width: 0; }
.fc-anos-trilho::-webkit-scrollbar { display: none; }
.fc-anos-trilho a { flex: none; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--gc-texto-2, #6b6b6b);
                    background: #fff; border: 1px solid var(--gc-borda, #ececec); font-variant-numeric: tabular-nums; }
.fc-anos-trilho a:hover { color: #262626; border-color: #d8d8d8; }
.fc-anos-trilho a.ativo { background: #262626; border-color: #262626; color: #fff; }
.fc .md-acoes { margin-top: 20px; }
.fc-compartilhar { font: inherit; cursor: pointer; }

/* ------------------------------------------------------------- destaques */
.fc-resumo { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--gc-texto-2, #6b6b6b); max-width: 760px; }
.fc-destaques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fc-destaque { padding: 18px 20px; }
.fc-destaque strong { display: block; margin: 8px 0 12px; font-size: 32px; font-weight: 800; letter-spacing: -.03em; color: #1f1f1f; line-height: 1; }
.fc-destaque strong small { font-size: 15px; font-weight: 600; color: var(--gc-texto-2, #6b6b6b); margin-left: 5px; letter-spacing: 0; }
.fc-destaque p { margin: 10px 0 0; font-size: 13.5px; color: var(--gc-texto-2, #6b6b6b); line-height: 1.45; }
.fc-destaque p b { color: #262626; }
.fc-pct { height: 8px; border-radius: 999px; background: #f1f1f3; overflow: hidden; }
.fc-pct i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffb68a, #ff5a00); }

/* ------------------------------------------------------------- ficha técnica */
.fc-dica { margin: 0; font-size: 13px; color: var(--gc-texto-3, #9a9a9a); }
.fc-termo-ex, .fc-termo { text-decoration: underline dotted #c4c4c4; text-underline-offset: 3px; }
.fc-grade { columns: 2; column-gap: 16px; }
.fc-bloco { break-inside: avoid; margin-bottom: 16px; padding: 18px 20px 10px; scroll-margin-top: calc(var(--gc-cab-altura, 64px) + 70px); }
.fc-bloco h3 { font-size: 17px; margin-bottom: 8px; }
.fc-bloco dl { margin: 0; }
.fc-bloco dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--md-linha, #efefef); }
.fc-bloco dt { color: var(--gc-texto-2, #6b6b6b); font-size: 14px; }
.fc-bloco dd { margin: 0; font-weight: 600; font-size: 14.5px; color: #262626; overflow-wrap: anywhere; }
.fc-termo { position: relative; cursor: help; outline: none; }
.fc-termo:hover::after, .fc-termo:focus::after {
  content: attr(data-ajuda); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 20; width: 260px; padding: 10px 12px; border-radius: 10px;
  background: #262626; color: #fff; font-size: 13px; font-weight: 400; line-height: 1.45; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); white-space: normal;
}
.fc-consumo { width: 100%; border-collapse: collapse; font-size: 14px; }
.fc-consumo th, .fc-consumo td { text-align: left; padding: 10px 8px 10px 0; border-top: 1px solid var(--md-linha, #efefef); vertical-align: top; }
.fc-consumo thead th { border-top: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gc-texto-3, #9a9a9a); padding-top: 0; }
.fc-consumo tbody th { color: var(--gc-texto-2, #6b6b6b); font-weight: 500; }
.fc-consumo strong { display: block; font-size: 17px; color: #1f1f1f; }
.fc-consumo small { display: block; font-size: 12.5px; color: var(--gc-texto-3, #9a9a9a); margin-top: 2px; }

/* ------------------------------------------------------------- segurança */
.fc-ncap { padding: 22px 24px; }
.fc-estrelas { display: flex; align-items: center; gap: 4px; }
.fc-estrelas svg { width: 30px; height: 30px; fill: #e6e6e8; }
.fc-estrelas svg.cheia { fill: #ffb400; }
.fc-estrelas span { margin-left: 10px; font-size: 15px; color: var(--gc-texto-2, #6b6b6b); }
.fc-estrelas b { color: #1f1f1f; font-size: 20px; }
.fc-ncap-barras { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; max-width: 620px; }
.fc-ncap-barras li { display: grid; grid-template-columns: 180px minmax(0, 1fr) 48px; align-items: center; gap: 12px; font-size: 14px; }
.fc-ncap-barras b { text-align: right; font-variant-numeric: tabular-nums; }
.fc-ncap-barras .fc-pct i { background: #f0a24b; }
.fc-ncap-barras .fc-pct i.bom { background: var(--md-verde, #13824a); }
.fc-ncap-barras .fc-pct i.fraco { background: var(--md-vermelho, #c9362f); }
.fc-ncap-barras li.pontos { grid-template-columns: 180px minmax(0, 1fr) 140px; }
.fc-ncap .fc-estrelas + .fc-estrelas { margin-top: 6px; }
.fc-ncap-teste { margin: 16px 0 0; max-width: 680px; font-size: 14px; line-height: 1.55; }

/* ------------------------------------------------------------- equipamentos */
.fc-busca { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 42px; min-width: 280px; border-radius: 999px; background: #fff;
            border: 1px solid var(--gc-borda, #ececec); color: var(--gc-texto-3, #9a9a9a); }
.fc-busca:focus-within { border-color: #ffb68a; box-shadow: 0 0 0 4px rgba(255, 90, 0, .10); }
.fc-busca svg { width: 18px; height: 18px; flex: none; }
.fc-busca input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 14.5px; width: 100%; color: #262626; }
.fc-equip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.fc-equip-grupo { padding: 18px 20px; }
.fc-equip-grupo h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.fc-equip-grupo h3 small { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #f3f3f4; color: var(--gc-texto-2, #6b6b6b); }
.fc-equip-grupo ul { list-style: none; margin: 0; padding: 0; }
.fc-equip-grupo li { position: relative; padding: 7px 0 7px 24px; font-size: 14px; border-top: 1px solid var(--md-linha, #efefef); }
.fc-equip-grupo li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 11px; height: 6px; border-left: 2px solid var(--md-verde, #13824a);
                             border-bottom: 2px solid var(--md-verde, #13824a); transform: rotate(-45deg); }
.fc-equip-grupo li mark { background: #ffe0cc; color: inherit; border-radius: 3px; padding: 0 1px; }
.fc-equip-vazio { margin: 14px 0 0; color: var(--gc-texto-2, #6b6b6b); }

/* ------------------------------------------------------------- o que mudou */
.fc h2 a { color: inherit; text-decoration: underline; text-decoration-color: #ffc6a3; text-underline-offset: 4px; }
.fc-mudancas { padding: 20px 22px; }
.fc-mud-nada, .fc-mud-preco { margin: 0 0 4px; font-size: 15px; }
.fc-mud-tabela { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.fc-mud-tabela th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gc-texto-3, #9a9a9a); padding: 0 12px 8px 0; }
.fc-mud-tabela td { padding: 9px 12px 9px 0; border-top: 1px solid var(--md-linha, #efefef); }
.fc-mud-tabela .antes { color: var(--gc-texto-3, #9a9a9a); text-decoration: line-through; }
.fc-mud-tabela .agora { font-weight: 700; }
.fc-mud-eq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 16px; }
.fc-mud-eq h3 { font-size: 14px; margin-bottom: 6px; }
.fc-mud-eq h3.mais { color: var(--md-verde, #13824a); }
.fc-mud-eq h3.menos { color: var(--md-vermelho, #c9362f); }
.fc-mud-eq ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; }

/* ------------------------------------------------------------- versões */
.fc-versoes { overflow: hidden; }
.fc-versoes table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.fc-versoes th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gc-texto-3, #9a9a9a); padding: 14px 18px 10px; }
.fc-versoes td { padding: 12px 18px; border-top: 1px solid var(--md-linha, #efefef); }
.fc-versoes .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fc-versoes a { color: #262626; font-weight: 600; }
.fc-versoes a:hover { color: var(--gc-laranja-2, #f15921); }
.fc-versoes tr.atual td { background: #fff6f0; }
.fc-voce { margin-left: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gc-laranja-2, #f15921); }

/* ------------------------------------------------------------- fotos */
.fc-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.fc-fotos button { position: relative; padding: 0; border: 1px solid var(--gc-borda, #ececec); border-radius: 14px; overflow: hidden; background: #f6f6f7;
                   aspect-ratio: 4 / 3; cursor: zoom-in; }
.fc-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.fc-fotos button:hover img { transform: scale(1.04); }
.fc-fotos span { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 12px; font-weight: 600; color: #262626; }

/* ------------------------------------------------------------- perguntas e links */
.fc-faq { padding: 6px 22px; }
.fc-faq details { border-top: 1px solid var(--md-linha, #efefef); }
.fc-faq details:first-child { border-top: 0; }
.fc-faq summary { cursor: pointer; list-style: none; padding: 16px 30px 16px 0; font-weight: 700; font-size: 15.5px; position: relative; }
.fc-faq summary::-webkit-details-marker { display: none; }
.fc-faq summary::after { content: "+"; position: absolute; right: 0; top: 12px; font-size: 22px; font-weight: 400; color: var(--gc-laranja, #ff5a00); }
.fc-faq details[open] summary::after { content: "–"; }
.fc-faq p { margin: 0 0 16px; color: var(--gc-texto-2, #6b6b6b); line-height: 1.6; }
.fc-mais { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 56px; }
.fc-mais a { display: block; padding: 16px 18px; color: #262626; transition: all .2s; }
.fc-mais a:hover { border-color: #ffc6a3; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255, 90, 0, .10); }
.fc-mais small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gc-texto-3, #9a9a9a); }
.fc-mais strong { display: block; margin: 4px 0 2px; font-size: 15.5px; }
.fc-mais span { font-size: 13px; color: var(--gc-texto-2, #6b6b6b); }

/* ------------------------------------------------------------- visor de fotos */
.fc-visor { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(12, 12, 12, .94); }
.fc-visor[hidden] { display: none; }
.fc-visor figure { margin: 0; max-width: min(1200px, 92vw); text-align: center; }
.fc-visor img { max-width: 100%; max-height: 80vh; border-radius: 12px; display: block; margin: 0 auto; user-select: none; }
.fc-visor figcaption { margin-top: 14px; color: #ddd; font-size: 14px; }
.fc-visor button { position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; border-radius: 50%;
                   width: 48px; height: 48px; font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.fc-visor button:hover { background: rgba(255, 255, 255, .24); }
.fc-visor-fechar { top: 18px; right: 18px; }
.fc-visor-seta--ant { left: 18px; top: 50%; transform: translateY(-50%); }
.fc-visor-seta--prox { right: 18px; top: 50%; transform: translateY(-50%); }

/* ------------------------------------------------------------- telas menores */
@media (max-width: 960px) {
  .fc-destaques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-equip { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .fc-grade { columns: 1; }
  .fc-busca { min-width: 0; width: 100%; }
}
@media (max-width: 600px) {
  .fc .md-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc h1 { font-size: 28px; }
  .fc-destaques { gap: 10px; }
  .fc-destaque { padding: 14px 16px; }
  .fc-destaque strong { font-size: 26px; }
  .fc-miniaturas { gap: 6px; }
  .fc-bloco { padding: 16px 16px 8px; }
  .fc-bloco dl > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fc-ncap-barras li { grid-template-columns: 110px minmax(0, 1fr) 42px; }
  .fc-ncap-barras li.pontos { grid-template-columns: 70px minmax(0, 1fr) 120px; }
  .fc-mud-eq { grid-template-columns: minmax(0, 1fr); }
  .fc-versoes .col-cambio { display: none; }
  .fc-versoes th, .fc-versoes td { padding-left: 14px; padding-right: 14px; }
  .fc-termo:hover::after, .fc-termo:focus::after { width: 220px; }
  .fc-visor-seta { display: none !important; }
}

/* ------------------------------------------------------------- ícones */
.fc-icone { width: 20px; height: 20px; display: block; }
.fc-icone-caixa { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 10px;
                  background: #fff1e8; color: var(--gc-laranja-2, #f15921); font-style: normal; }
.fc-bloco h3, .fc-medidas h3, .fc-equip-grupo h3, .fc-ncap h3 { display: flex; align-items: center; gap: 10px; }
.fc-bloco h3 { margin-bottom: 10px; }
.fc-ncap h3 { margin-bottom: 14px; }
.fc-destaque-topo { display: flex; align-items: center; gap: 10px; }
.fc-destaque-topo .fc-icone-caixa { width: 30px; height: 30px; border-radius: 9px; }
.fc-destaque-topo .fc-icone { width: 18px; height: 18px; }

/* ------------------------------------------------------------- desenho com as medidas */
.fc-medidas { padding: 18px 20px; margin-bottom: 16px; scroll-margin-top: calc(var(--gc-cab-altura, 64px) + 70px); }
.fc-medidas h3 { margin-bottom: 6px; }
.fc-medidas-grade { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(240px, 1fr); gap: 28px; align-items: center; }
.fc-desenho-vistas { display: grid; grid-template-columns: minmax(0, 1000fr) minmax(0, 420fr); gap: 18px; align-items: end; }
.fc-desenho-vistas.so-lado { grid-template-columns: minmax(0, 1fr); }
.fc-desenho svg { width: 100%; height: auto; display: block; overflow: visible; }
.fc-desenho .corpo { fill: #fff8f3; stroke: #3b3b3b; stroke-width: 2.4; stroke-linejoin: round; }
.fc-desenho .vidro { fill: #e8eef6; stroke: #3b3b3b; stroke-width: 1.8; stroke-linejoin: round; }
.fc-desenho .linha { fill: none; stroke: #3b3b3b; stroke-width: 1.8; stroke-linecap: round; }
.fc-desenho .linha.fina { stroke: #9a9a9a; stroke-width: 1.2; }
.fc-desenho circle { fill: #fff; stroke: #3b3b3b; stroke-width: 2; }
.fc-desenho .pneu { fill: #3b3b3b; stroke: #3b3b3b; }
.fc-desenho .chao { stroke: #d8d8d8; stroke-width: 2; }
.fc-desenho .cota path { fill: none; stroke: var(--gc-laranja, #ff5a00); stroke-width: 1.6; }
.fc-desenho .cota text { fill: #262626; font: 600 24px/1 Roboto, system-ui, sans-serif; text-anchor: middle; }
.fc-desenho .cota text.lateral { text-anchor: start; dominant-baseline: middle; }
.fc-desenho .cota text.sub { fill: #9a9a9a; font-weight: 400; font-size: 21px; }
.fc-desenho-nota { margin: 12px 0 0; font-size: 12px; color: var(--gc-texto-3, #9a9a9a); }
.fc-medidas-lista { margin: 0; }
.fc-medidas-lista > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 8px 0; border-top: 1px solid var(--md-linha, #efefef); }
.fc-medidas-lista > div:first-child { border-top: 0; }
.fc-medidas-lista dt { color: var(--gc-texto-2, #6b6b6b); font-size: 14px; }
.fc-medidas-lista dd { margin: 0; font-weight: 600; font-size: 14.5px; color: #262626; text-align: right; }
@media (max-width: 960px) {
  .fc-medidas-grade { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 600px) {
  .fc-desenho-vistas { grid-template-columns: minmax(0, 1fr); }
  .fc-desenho-frente { max-width: 60%; margin: 0 auto; }
  .fc-desenho .cota text { font-size: 30px; }
  .fc-desenho .cota text.sub { font-size: 26px; }
}
.fc-desenho .farol { fill: #fff; stroke: #3b3b3b; stroke-width: 1.8; }
.fc-desenho .grade { fill: #3b3b3b; stroke: none; opacity: .85; }
.fc-desenho .placa { fill: #fff; stroke: #9a9a9a; stroke-width: 1.2; }

/* Lugar no ranking do tipo (destaques; includes/rankings.php) */
.fc-ranking { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--gc-laranja-2, #f15921); text-decoration: none; }
.fc-ranking:hover { text-decoration: underline; }
.fc-ranking-medalha { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.fc-ranking-1 { background: #f0a500; } .fc-ranking-2 { background: #b8bec8; } .fc-ranking-3 { background: #c9834f; }