/* ============================================================
   UAI. — Comparativo de componentes (comparativo.html)
   Base visual da garantia (garantia.css: .gt-*); aqui só os blocos
   próprios do comparativo (.cp-*).
   ============================================================ */

.cp-page strong{ font-weight:600; }
.gt-hero p strong{ color:var(--on-black); }

/* ---------- Voltar para a Central técnica + links no texto ---------- */
.cp-voltar{
  display:inline-flex; margin-bottom:18px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--grey-on-black); text-decoration:none; transition:color .2s ease;
}
.cp-voltar:hover, .cp-voltar:focus-visible{ color:#E8B34D; }
.gt-secao-cab p a, .cp-bloco-texto a, .cp-atencao a{ color:#E8B34D; text-underline-offset:3px; }

/* ---------- Índice da página ---------- */
.cp-indice{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.cp-indice a{
  padding:9px 16px; border-radius:999px; border:1px solid var(--line-on-black-strong);
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--on-black); text-decoration:none; transition:border-color .2s ease, color .2s ease;
}
.cp-indice a:hover, .cp-indice a:focus-visible{ border-color:#E8B34D; color:#E8B34D; }

/* ---------- Anatomia ---------- */
.cp-anatomia{ display:grid; grid-template-columns:1fr; gap:24px; align-items:center; padding-top:40px; }
.cp-roda{ margin:0 auto; width:min(220px, 60vw); }
.cp-roda svg{ display:block; width:100%; height:auto; }
.cp-roda-aro{ fill:none; stroke:var(--on-black); stroke-width:9; }
.cp-roda-aro-in{ fill:none; stroke:var(--line-on-black-strong); stroke-width:1.5; }
.cp-roda-raios line{ stroke:#8E8B82; stroke-width:1.6; }
.cp-roda-cubo{ fill:#E8B34D; }
.cp-anatomia-itens{ display:grid; grid-template-columns:1fr; gap:12px; }
.cp-parte{ color:inherit; text-decoration:none; transition:border-color .2s ease; }
.cp-parte:hover, .cp-parte:focus-visible{ border-color:rgba(232,179,77,0.6); }
.cp-parte-tag{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; color:#E8B34D; }
.cp-parte h2{ margin-top:2px; }

/* ---------- Cards de linha (aros e materiais de raio) ---------- */
.cp-linhas{ display:grid; grid-template-columns:1fr; gap:16px; }
.cp-linha{
  position:relative; display:flex; flex-direction:column; gap:12px; padding:28px 24px;
  border-radius:14px; background:var(--black-2); border:1px solid var(--line-on-black);
}
.cp-linha--destaque{ border-color:rgba(232,179,77,0.5); background:linear-gradient(160deg, rgba(232,179,77,0.08), transparent 55%), var(--black-2); }
.cp-linha-selo{
  align-self:flex-start; font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; border:1px solid var(--line-on-black-strong); color:#E8B34D;
}
.cp-linha h3{ font-size:30px; line-height:1; margin:2px 0 0; }
.cp-linha-frase{ margin:0; font-size:15.5px; font-weight:600; line-height:1.5; color:var(--on-black); }
.cp-linha p{ margin:0; font-size:14.5px; line-height:1.65; color:#C9C7BE; }
.cp-linha p strong{ color:var(--on-black); }
.cp-linha-dados{ list-style:none; margin:4px 0 0; padding:14px 0 0; border-top:1px solid var(--line-on-black); display:flex; flex-direction:column; gap:7px; font-size:14px; line-height:1.5; color:#D7D5CC; }
.cp-linha-dados strong{ color:var(--on-black); }
.cp-linha .cp-linha-modelos{ margin-top:auto; padding-top:10px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.06em; line-height:1.6; color:var(--grey-on-black); }

/* Medidores (1 a 3) — só CSS, pelo data-nivel */
.cp-medidores{ margin:4px 0 0; display:flex; flex-direction:column; gap:8px; }
.cp-medidores div{ display:grid; grid-template-columns:110px 1fr; align-items:center; gap:10px; }
.cp-medidores dt{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--grey-on-black); }
.cp-medidores dd{ margin:0; }
.cp-medidor{
  display:block; height:8px; max-width:160px; border-radius:4px;
  background:linear-gradient(90deg, #E8B34D 0 var(--cp-nivel, 0%), rgba(244,242,236,0.10) var(--cp-nivel, 0%) 100%);
}
.cp-medidor[data-nivel="1"]{ --cp-nivel:33.3%; }
.cp-medidor[data-nivel="2"]{ --cp-nivel:66.6%; }
.cp-medidor[data-nivel="3"]{ --cp-nivel:100%; }

/* ---------- Padrão UAI. (hookless + assimétrico) ---------- */
.cp-padrao{
  margin-top:48px; padding:32px 24px; border-radius:16px; border:1px solid rgba(232,179,77,0.35);
  background:linear-gradient(135deg, rgba(232,179,77,0.10), rgba(232,179,77,0.02) 60%), var(--black-2);
}
.cp-padrao-cab{ max-width:720px; }
.cp-padrao-cab h3{ font-size:clamp(28px, 5vw, 40px); line-height:1.02; margin:16px 0 14px; }
.cp-padrao-cab p{ margin:0; font-size:15.5px; line-height:1.65; color:#D7D5CC; }
.cp-padrao-cab p strong{ color:var(--on-black); }
.cp-padrao-itens{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:28px; }
.cp-padrao-item{ display:flex; flex-direction:column; gap:12px; padding:24px 22px; border-radius:12px; background:rgba(10,10,10,0.55); border:1px solid var(--line-on-black); }
.cp-padrao-item h4{ margin:0; font-size:22px; line-height:1.15; }
.cp-padrao-item p{ margin:0; font-size:14.5px; line-height:1.65; color:#C9C7BE; }
.cp-padrao-item p strong{ color:var(--on-black); }
.cp-perfis{ margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cp-perfis div{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px; border-radius:10px; background:rgba(244,242,236,0.03); }
.cp-perfis svg{ width:100%; max-width:130px; height:auto; }
.cp-perfis span{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--grey-on-black); }
.cp-perfis div:last-child span{ color:#E8B34D; }
.cp-perfil-aro{ fill:rgba(244,242,236,0.12); stroke:#8E8B82; stroke-width:2; stroke-linejoin:round; }
.cp-perfil-aro--uai{ fill:rgba(232,179,77,0.18); stroke:#E8B34D; }
.cp-perfil-gancho{ fill:none; stroke:#FF7A6E; stroke-width:3; stroke-linecap:round; }
.cp-furo{ fill:var(--black); stroke:#8E8B82; stroke-width:1.5; }
.cp-furo--uai{ stroke:#E8B34D; }
.cp-raio-linha{ stroke:#8E8B82; stroke-width:2; stroke-linecap:round; }
.cp-raio-linha--tenso{ stroke:#FF7A6E; }
.cp-raio-linha--uai{ stroke:#E8B34D; }
.cp-eixo-centro{ stroke:rgba(244,242,236,0.28); stroke-width:1; stroke-dasharray:3 3; }
.cp-cubo{ stroke:#8E8B82; stroke-width:3; stroke-linecap:round; }
.cp-cubo-flange{ stroke:#D7D5CC; stroke-width:3; stroke-linecap:round; }
.cp-cassete{ fill:none; stroke:#8E8B82; stroke-width:2.5; stroke-linecap:round; }
.cp-vantagens{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.cp-vantagens li{ position:relative; padding-left:24px; font-size:14.5px; line-height:1.6; color:#D7D5CC; }
.cp-vantagens li::before{ content:"✓"; position:absolute; left:0; top:0; font-family:var(--font-mono); color:#8CD97E; }
.cp-vantagens strong{ color:var(--on-black); }
.cp-padrao-item .cp-atencao{
  padding:12px 14px; border-left:3px solid #E8B34D; border-radius:0 8px 8px 0; background:rgba(232,179,77,0.07);
  font-size:14px; color:#D7D5CC;
}

/* ---------- Tabelas comparativas ---------- */
.cp-tabela-wrap{ margin-top:40px; overflow-x:auto; border:1px solid var(--line-on-black); border-radius:12px; -webkit-overflow-scrolling:touch; }
.cp-tabela-wrap:focus-visible{ outline:2px solid #E8B34D; outline-offset:3px; }
.cp-tabela{ width:100%; min-width:620px; border-collapse:collapse; font-size:14.5px; }
.cp-tabela th, .cp-tabela td{ padding:14px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line-on-black); line-height:1.5; }
.cp-tabela tbody tr:last-child th, .cp-tabela tbody tr:last-child td{ border-bottom:0; }
.cp-tabela thead th{ font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--grey-on-black); background:var(--black-2); }
.cp-tabela tbody th{ font-weight:600; color:var(--on-black); width:24%; }
.cp-tabela td{ color:#D7D5CC; }
.cp-tabela .is-destaque{ background:rgba(232,179,77,0.06); }
.cp-tabela thead .is-destaque{ color:#E8B34D; }

/* ---------- Blocos internos de seção ---------- */
.cp-bloco{ margin-top:56px; }
.cp-bloco-titulo{ font-size:clamp(26px, 4.4vw, 36px); line-height:1.05; margin:0 0 12px; }
.cp-bloco-texto{ margin:0 0 22px; max-width:72ch; font-size:15.5px; line-height:1.65; color:#C9C7BE; }
.cp-bloco-texto strong{ color:var(--on-black); }
.cp-cubo-base .gt-cuidado a{ color:#E8B34D; text-underline-offset:3px; }

/* Furação */
.cp-furos{ display:grid; grid-template-columns:1fr; gap:12px; }
.cp-furo-card{ display:flex; flex-direction:column; gap:8px; padding:22px; border-radius:12px; background:var(--black-2); border:1px solid var(--line-on-black); }
.cp-furo-card .gt-pilar-num{ font-size:56px; }
.cp-furo-card > span{ font-size:14.5px; line-height:1.6; color:var(--grey-on-black); }

/* Rolamentos */
.cp-rolamentos{ display:grid; grid-template-columns:1fr; gap:24px; align-items:center; }
.cp-rol-figura{ margin:0; display:flex; flex-direction:column; gap:14px; padding:22px; border-radius:12px; background:var(--black-2); border:1px solid var(--line-on-black); }
.cp-rol-figura div{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cp-rol-figura strong{ margin-left:8px; font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--grey-on-black); }
.cp-rol{ width:34px; height:34px; border-radius:50%; border:6px solid #8E8B82; box-shadow:inset 0 0 0 3px var(--black), inset 0 0 0 5px rgba(232,179,77,0.8); }

/* Freehub */
.cp-freehubs{ display:grid; grid-template-columns:1fr; gap:12px; }
.cp-freehub{ display:flex; flex-direction:column; gap:6px; padding:20px; border-radius:12px; background:var(--black-2); border:1px solid var(--line-on-black); }
.cp-freehub-sigla{ font-family:var(--font-display); font-style:italic; font-weight:900; font-size:34px; line-height:1; color:#E8B34D; }
.cp-freehub strong{ font-size:16px; }
.cp-freehub > span:not(.cp-freehub-sigla){ font-size:14px; line-height:1.6; color:var(--grey-on-black); }
.cp-freehub em{ margin-top:auto; padding-top:6px; font-style:normal; font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:#D7D5CC; }

/* ---------- Ratchet ---------- */
.cp-ratchet{ margin-top:0; }
.cp-ratchet-tipos{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:16px; }
.cp-ratchet-tipo{ padding:24px; border-radius:12px; background:var(--black-2); border:1px solid var(--line-on-black); }
.cp-ratchet-tipo h4{ margin:0 0 10px; font-size:24px; }
.cp-ratchet-tipo p{ margin:0; font-size:14.5px; line-height:1.65; color:#C9C7BE; }
.cp-ratchet-tipo p strong{ color:var(--on-black); }
.cp-engates-titulo{ margin-top:48px; }
.cp-engates{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.cp-engate{ margin:0; display:flex; flex-direction:column; align-items:center; gap:12px; padding:22px 16px; border-radius:12px; background:var(--black-2); border:1px solid var(--line-on-black); text-align:center; }
.cp-engate--max{ border-color:rgba(232,179,77,0.5); }
.cp-dial{ width:112px; height:112px; }
.cp-dial svg{ width:100%; height:100%; display:block; }
.cp-dial-dente{ stroke:#8E8B82; stroke-width:1.4; }
.cp-dial-arco{ fill:rgba(232,179,77,0.28); stroke:#E8B34D; stroke-width:1.4; }
.cp-dial-centro{ fill:var(--black); stroke:var(--line-on-black-strong); }
.cp-engate figcaption{ display:flex; flex-direction:column; gap:6px; }
.cp-engate figcaption strong{ font-family:var(--font-display); font-style:italic; font-weight:900; font-size:36px; line-height:1; }
.cp-engate-grau{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; color:#E8B34D; }
.cp-engate figcaption span:last-child{ font-size:13.5px; line-height:1.55; color:var(--grey-on-black); }

/* ---------- Perfis de raio ---------- */
.cp-perfis-raio{ display:grid; grid-template-columns:1fr; gap:12px; }
.cp-perfil-raio{ display:flex; flex-direction:column; gap:8px; padding:22px; border-radius:12px; background:var(--black-2); border:1px solid var(--line-on-black); }
.cp-perfil-raio svg{ width:96px; height:48px; }
.cp-perfil-raio svg *{ fill:rgba(232,179,77,0.22); stroke:#E8B34D; stroke-width:1.6; }
.cp-perfil-raio strong{ font-size:18px; }
.cp-perfil-raio span{ font-size:14.5px; line-height:1.6; color:var(--grey-on-black); }

/* ---------- Central técnica (links para a FAQ) ---------- */
.cp-central{ display:grid; grid-template-columns:1fr; gap:12px; }
.cp-central .gt-pilar h2{ font-size:22px; }

/* ---------- Sem marca ---------- */
.cp-marca{
  display:flex; flex-direction:column; gap:28px; padding:32px 24px; border-radius:16px; border:1px solid rgba(232,179,77,0.35);
  background:linear-gradient(135deg, rgba(232,179,77,0.10), rgba(232,179,77,0.02) 60%), var(--black-2);
}
.cp-marca-cab{ max-width:720px; }
.cp-marca-cab h3{ font-size:clamp(28px, 5vw, 44px); line-height:1.02; margin:16px 0 14px; }
.cp-marca-cab h3 em{ font-style:normal; color:#E8B34D; }
.cp-marca-cab p, .cp-marca-texto{ margin:0; max-width:72ch; font-size:15.5px; line-height:1.65; color:#D7D5CC; }
.cp-marca-cab p strong, .cp-marca-texto strong{ color:var(--on-black); }
.cp-marca-rodas{ margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:420px; }
.cp-marca-rodas div{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px; border-radius:10px; background:rgba(244,242,236,0.03); }
.cp-marca-rodas svg{ width:100%; max-width:140px; height:auto; }
.cp-marca-rodas span{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--grey-on-black); }
.cp-marca-rodas div:last-child span{ color:#E8B34D; }
.cp-marca-aro{ fill:none; stroke:#3A3935; stroke-width:12; }
.cp-marca-aro--uai{ stroke:#1C1B19; filter:drop-shadow(0 0 0.6px #E8B34D); }
.cp-marca-adesivo{ font-family:var(--font-mono); font-size:7.5px; font-weight:700; letter-spacing:0.08em; fill:#FF7A6E; dominant-baseline:middle; }
.cp-marca-cubo{ fill:#8E8B82; }
.cp-marca-cubo--uai{ fill:#E8B34D; }

.cp-cadeias{ display:grid; grid-template-columns:1fr; gap:12px; }
.cp-cadeia{ padding:20px; border-radius:12px; background:rgba(10,10,10,0.55); border:1px solid var(--line-on-black); }
.cp-cadeia--uai{ border-color:rgba(232,179,77,0.5); }
.cp-cadeia-titulo{ display:block; margin-bottom:14px; font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--grey-on-black); }
.cp-cadeia--uai .cp-cadeia-titulo{ color:#E8B34D; }
.cp-cadeia ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px 26px; }
.cp-cadeia li{ position:relative; display:flex; flex-direction:column; gap:4px; font-size:15px; font-weight:600; color:var(--on-black); }
.cp-cadeia li:not(:last-child)::after{ content:"→"; position:absolute; top:0; right:-19px; font-weight:400; color:var(--grey-on-black); }
.cp-cadeia li em{ font-style:normal; font-family:var(--font-mono); font-size:10.5px; font-weight:400; letter-spacing:0.06em; color:#FF7A6E; }
.cp-cadeia--uai li em{ color:#8CD97E; }
.cp-marca-lista{ margin:0; }

/* ---------- Responsivo ---------- */
@media (min-width:720px){
  .cp-anatomia{ grid-template-columns:240px 1fr; gap:40px; }
  .cp-anatomia-itens{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .cp-padrao{ padding:44px 40px; }
  .cp-padrao-itens{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cp-furos{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .cp-rolamentos{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:40px; }
  .cp-freehubs{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cp-ratchet-tipos{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cp-engates{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .cp-perfis-raio{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .cp-central{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .cp-marca{ padding:44px 40px; }
  .cp-cadeias{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
}
@media (min-width:980px){
  .cp-linhas{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .cp-freehubs{ grid-template-columns:repeat(5, minmax(0,1fr)); }
}
@media (max-width:420px){
  .cp-medidores div{ grid-template-columns:96px 1fr; }
  .cp-dial{ width:92px; height:92px; }
}