/* ==========================================================================
   RELÓGIOS — grafite e laranja-sinal, Space Grotesk + Inter + mono nos dados.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap');

body { background: var(--fundo); color: var(--texto); font-family: var(--fonte-texto); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .marca { font-family: var(--fonte-titulos); font-weight: 600; letter-spacing: -.03em; line-height: 1.02; }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
em { font-style: normal; color: var(--destaque); }
section { padding: 90px 6vw; }
.selo { font-family: 'JetBrains Mono', monospace; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--destaque); margin-bottom: 14px; }
.rot { font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); margin: 22px 0 10px; }
.vazio { color: var(--suave); padding: 30px 0; }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--destaque); color: #120700; font-weight: 600; padding: 15px 26px; border-radius: 12px; border: 1.5px solid var(--destaque); transition: transform .15s, box-shadow .2s; }
.botao:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(255,106,43,.25); }
.botao.vazado { background: transparent; color: var(--texto); border-color: var(--linha); }
.botao.vazado:hover { border-color: var(--texto); box-shadow: none; }
.botao.pequeno { padding: 9px 14px; font-size: .84rem; border-radius: 10px; }
.botao.largo { width: 100%; }
.link { color: var(--destaque); font-weight: 600; font-size: .88rem; }
input:not([type=range]):not([type=checkbox]), select { width: 100%; font: inherit; color: var(--texto); background: var(--papel2); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; }
input:focus, select:focus { outline: none; border-color: var(--destaque); }
label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: var(--suave); }
.tag { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.tag.ok { background: rgba(80,220,140,.14); color: #6fe3a1; }
.tag.neutro { background: rgba(255,255,255,.08); color: #c9ccd1; }
.tag.alerta { background: rgba(255,106,43,.15); color: #ff9a6b; }

/* ---------- Topo + hero ---------- */
.topo { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 28px; padding: 16px 6vw; background: rgba(12,13,15,.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linha); }
.marca { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; margin-right: auto; }
.marca i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--texto); position: relative; }
.marca i::before, .marca i::after { content: ''; position: absolute; left: 50%; bottom: 50%; width: 2px; background: var(--destaque); transform-origin: bottom; }
.marca i::before { height: 7px; transform: translateX(-50%) rotate(0); }
.marca i::after { height: 5px; transform: translateX(-50%) rotate(110deg); }
.topo-nav { display: flex; gap: 26px; color: var(--suave); font-size: .92rem; }
.topo-nav a:hover { color: var(--texto); }
.sacola-btn { display: flex; align-items: center; gap: 8px; color: var(--texto); font-weight: 600; font-size: .9rem; border: 1px solid var(--linha); border-radius: 10px; padding: 8px 12px; }
.sacola-btn b { min-width: 20px; height: 20px; border-radius: 6px; background: var(--papel2); color: var(--suave); display: grid; place-items: center; font-size: .75rem; }
.sacola-btn b.tem { background: var(--destaque); color: #120700; }
.topo-menu-btn { display: none; font-size: 1.5rem; color: var(--texto); }
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; min-height: 82vh; padding-top: 40px; overflow: hidden; }
.hero > * { min-width: 0; }
.hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.6rem); margin-bottom: 20px; }
.hero-txt > p:not(.selo) { color: var(--suave); font-size: 1.12rem; max-width: 500px; margin-bottom: 30px; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-dados { display: flex; gap: 32px; margin-top: 36px; flex-wrap: wrap; }
.hero-dados li { display: flex; flex-direction: column; font-size: .85rem; color: var(--suave); }
.hero-dados b { font-family: var(--fonte-titulos); font-size: 1.7rem; color: var(--texto); }
.hero-relogio { position: relative; display: grid; place-items: center; height: 560px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.aro { position: absolute; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(255,106,43,.18), transparent 62%); }
.aro::after { content: ''; position: absolute; inset: 40px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.12); animation: girar 60s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.relogio.gigante { height: 560px; width: auto; position: relative; filter: drop-shadow(0 40px 50px rgba(0,0,0,.6)); }
.etiqueta { position: absolute; right: 6%; bottom: 18%; background: rgba(21,23,26,.85); backdrop-filter: blur(8px); border: 1px solid var(--linha); border-radius: 14px; padding: 12px 16px; font-size: .85rem; color: var(--suave); display: flex; flex-direction: column; }
.etiqueta b { font-family: var(--fonte-titulos); font-size: 1.3rem; color: var(--texto); }

/* textos dentro do relógio */
.relogio .logo { font-family: var(--fonte-titulos); font-weight: 700; font-size: 9px; letter-spacing: .18em; }
.relogio .mini { font-family: 'JetBrains Mono', monospace; font-size: 4.6px; letter-spacing: .12em; opacity: .75; }
.relogio .num { font-family: var(--fonte-titulos); font-weight: 600; font-size: 14px; }
.relogio .rom { font-family: Georgia, serif; font-size: 10px; }
.relogio .dia-txt { font-family: var(--fonte-texto); font-size: 8px; font-weight: 700; fill: #111; }
.relogio .dig { font-family: var(--fonte-titulos); font-weight: 600; font-size: 34px; fill: #fff; letter-spacing: -1px; }
.relogio .sm-data { font-family: 'JetBrains Mono', monospace; font-size: 8px; fill: #ff6a2b; letter-spacing: .1em; }
.relogio .sm-txt { font-family: var(--fonte-texto); font-size: 8px; fill: #ff375f; }

/* ---------- Prova no pulso ---------- */
.pulso { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; background: var(--papel); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.pulso > * { min-width: 0; }
.pulso-txt > p:not(.selo):not(.rot) { color: var(--suave); margin: 14px 0 24px; }
.medida { font-size: .9rem; color: var(--texto); font-weight: 600; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
.medida output { font-family: 'JetBrains Mono', monospace; color: var(--destaque); font-size: 1.1rem; }
.medida input { width: 100%; accent-color: var(--destaque); }
.ideal { margin-top: 16px; background: var(--papel2); border: 1px solid var(--linha); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.ideal b { font-family: var(--fonte-titulos); font-size: 2rem; }
.ideal span { color: var(--suave); font-size: .88rem; }
.ideal small { color: #6fe3a1; font-size: .82rem; margin-top: 6px; }
.provar { display: flex; flex-wrap: wrap; gap: 6px; }
.provar button { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--linha); color: var(--texto); font-size: .82rem; font-weight: 600; }
.provar small { font-family: 'JetBrains Mono', monospace; color: var(--suave); font-weight: 400; font-size: .7rem; }
.provar button.ativo { border-color: var(--destaque); background: rgba(255,106,43,.1); }
.braco-caixa { background: radial-gradient(circle at 50% 50%, #23262b, #121316); border-radius: 28px; padding: 20px; border: 1px solid var(--linha); }
.braco { width: 100%; display: block; }
.braco .cota { font-family: 'JetBrains Mono', monospace; font-size: 10px; fill: #ff9a6b; }
.veredito { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; font-size: .92rem; color: var(--suave); }
.veredito b { color: var(--texto); }

/* ---------- Vitrine ---------- */
.vit-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.ordem { flex-direction: row; align-items: center; gap: 10px; }
.ordem select { width: auto; padding: 9px 12px; }
.filtros { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 26px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtros button { flex-shrink: 0; padding: 9px 15px; border-radius: 10px; border: 1px solid var(--linha); color: var(--texto); font-size: .86rem; }
.filtros button.ativo { background: var(--texto); border-color: var(--texto); color: var(--fundo); }
.filtros .cabe.ativo { background: var(--destaque); border-color: var(--destaque); color: #120700; }
.filtros .sep { width: 1px; background: var(--linha); flex-shrink: 0; }
.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card { background: var(--papel); border: 1px solid var(--linha); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: border-color .2s, transform .2s; }
.card:hover { border-color: #3d4249; transform: translateY(-3px); }
.card-foto { position: relative; height: 260px; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, #2a2e34, #15171a 70%); cursor: pointer; overflow: hidden; }
.card-foto .relogio, .card-foto .relogio-img { height: 300px; transition: transform .5s; }
.card:hover .card-foto .relogio { transform: scale(1.06) rotate(-4deg); }
.selo-card { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--destaque); color: #120700; font-size: .7rem; font-weight: 700; padding: 4px 9px; border-radius: 6px; }
.card-corpo { padding: 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-corpo small { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--suave); letter-spacing: .06em; text-transform: uppercase; }
.card-corpo h3 { font-size: 1.3rem; }
.specs { font-family: 'JetBrains Mono', monospace; font-size: .74rem; color: var(--suave); }
.preco { font-family: var(--fonte-titulos); font-size: 1.4rem; font-weight: 600; margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; }
.preco small { font-family: var(--fonte-texto); font-size: .78rem; font-weight: 400; color: var(--suave); }
.card-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }

/* ---------- Assistência ---------- */
.assistencia { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: start; background: var(--papel); border-top: 1px solid var(--linha); }
.assistencia > * { min-width: 0; }
.assistencia > div > p:not(.selo) { color: var(--suave); margin: 14px 0 22px; }
.servicos li { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.servicos span { font-size: 1.4rem; }
.servicos div { display: flex; flex-direction: column; }
.servicos small { color: var(--suave); font-size: .8rem; }
.servicos em { font-family: 'JetBrains Mono', monospace; font-size: .82rem; color: var(--texto); text-align: right; }
.orc { background: var(--papel2); border: 1px solid var(--linha); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.orc input, .orc select { background: var(--fundo); }

/* ---------- Garantias, depoimentos, FAQ ---------- */
.garantias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.garantias div { border: 1px solid var(--linha); border-radius: 18px; padding: 22px; min-width: 0; }
.garantias span { font-size: 1.4rem; }
.garantias b { display: block; font-family: var(--fonte-titulos); font-size: 1.15rem; margin: 6px 0 2px; }
.garantias p { color: var(--suave); font-size: .88rem; }
.depos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-top: 0; }
.depos blockquote { background: var(--papel); border-radius: 18px; padding: 24px; border-left: 3px solid var(--destaque); }
.depos cite { display: block; margin-top: 10px; font-style: normal; color: var(--suave); font-size: .88rem; }
.duvidas { max-width: 860px; margin: 0 auto; }
.duvidas h2 { margin-bottom: 14px; }
.faq-item { border-bottom: 1px solid var(--linha); }
.faq-item button { width: 100%; display: flex; justify-content: space-between; gap: 14px; text-align: left; padding: 18px 0; font-weight: 500; color: var(--texto); }
.faq-item button span { color: var(--destaque); font-size: 1.4rem; line-height: 1; transition: transform .2s; }
.faq-item.aberto button span { transform: rotate(45deg); }
.faq-resp { max-height: 0; overflow: hidden; transition: max-height .3s; }
.faq-resp p { color: var(--suave); padding-bottom: 18px; }
.rodape { text-align: center; padding: 40px 6vw 100px; display: flex; flex-direction: column; align-items: center; gap: 6px; border-top: 1px solid var(--linha); color: var(--suave); font-size: .9rem; }
.rodape > b { font-family: var(--fonte-titulos); font-size: 1.4rem; color: var(--texto); }
.rodape .core-contatos a { color: var(--texto); }

/* ---------- Sacola flutuante, ficha, gaveta ---------- */
.sacola-flutuante { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 90; background: var(--destaque); color: #120700; padding: 13px 20px; border-radius: 12px; font-size: .9rem; box-shadow: 0 14px 34px rgba(0,0,0,.5); white-space: nowrap; }
.sacola-flutuante[hidden] { display: none; }
.sacola-flutuante em { color: #120700; font-weight: 700; margin-left: 6px; }
body.com-faixa .sacola-flutuante { bottom: 76px; }
dialog { border: 0; padding: 0; color: var(--texto); background: var(--papel); }
dialog::backdrop { background: rgba(0,0,0,.65); backdrop-filter: blur(6px); }
.ficha { width: min(1000px, 94vw); max-height: 92vh; margin: auto; overflow-y: auto; border-radius: 26px; border: 1px solid var(--linha); }
.fechar, .gav-topo button { position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: var(--papel2); color: var(--texto); }
.ficha-grade { display: grid; grid-template-columns: 1fr 1fr; }
.ficha-grade > * { min-width: 0; }
.ficha-foto { position: relative; display: grid; place-items: center; background: radial-gradient(circle, #2a2e34, #101113 70%); min-height: 520px; overflow: hidden; }
.relogio.grande { height: 500px; }
.verso { position: absolute; right: 20px; bottom: 20px; width: 130px; text-align: center; }
.verso svg { width: 120px; filter: drop-shadow(0 10px 20px rgba(0,0,0,.5)); }
.verso small { color: var(--suave); font-size: .72rem; }
.grav { font-family: Georgia, serif; font-style: italic; font-size: 9px; fill: #3a3e44; }
.ficha-info { padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; }
.sup { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--suave); letter-spacing: .08em; text-transform: uppercase; }
.ficha-info h3 { font-size: 2.4rem; }
.preco.grande { font-size: 2rem; padding: 0; }
.no-pulso { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--suave); font-size: .88rem; }
.no-pulso a { color: var(--destaque); }
.specs-tab { display: grid; grid-template-columns: 96px 1fr; border-top: 1px solid var(--linha); }
.specs-tab dt, .specs-tab dd { padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: .88rem; }
.specs-tab dt { font-family: 'JetBrains Mono', monospace; color: var(--suave); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
.opcao { flex-direction: row; align-items: center; gap: 10px; color: var(--texto); font-size: .92rem; }
.opcao input { accent-color: var(--destaque); width: 18px; height: 18px; }
.opcao b { margin-left: auto; font-weight: 600; }
.ficha-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.gaveta { inset: 0 0 0 auto; margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(440px, 100vw); padding: 24px; overflow-y: auto; flex-direction: column; gap: 14px; position: fixed; border-left: 1px solid var(--linha); }
.gaveta[open] { display: flex; }
.gav-topo { position: relative; }
.gav-topo h3 { font-size: 1.7rem; }
.gav-topo button { top: -4px; right: 0; }
.itens { display: flex; flex-direction: column; gap: 10px; }
.itens li { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--linha); padding-bottom: 10px; }
.it-foto { width: 64px; height: 80px; border-radius: 12px; background: var(--papel2); display: grid; place-items: center; overflow: hidden; }
.relogio.mini { height: 96px; }
.itens li > div { display: flex; flex-direction: column; min-width: 0; font-size: .88rem; }
.itens small { color: var(--suave); }
.itens li > button { color: var(--suave); padding: 6px; }
.g-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--linha); padding-top: 12px; }
.g-total b { font-family: var(--fonte-titulos); font-size: 2rem; }
.g-obs { color: var(--suave); font-size: .85rem; margin-top: -8px; }
.g-vazia { color: var(--suave); text-align: center; padding: 40px 0; }

@media (max-width: 1100px) { .grade { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  section { padding: 60px 5vw; }
  .topo { padding: 12px 5vw; gap: 12px; }
  .topo-menu-btn { display: block; }
  .topo-nav { position: fixed; inset: 0; z-index: -1; background: var(--fundo); flex-direction: column; justify-content: center; align-items: center; font-size: 1.3rem; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .topo-nav.aberto { opacity: 1; pointer-events: auto; }
  .hero { grid-template-columns: 1fr; min-height: auto; gap: 10px; }
  .hero-relogio { height: 270px; order: -1; margin: 0 -5vw; }
  .aro { width: 320px; height: 320px; }
  .relogio.gigante { height: 380px; }
  .etiqueta { right: 0; bottom: 8%; }
  .pulso, .assistencia { grid-template-columns: 1fr; gap: 28px; }
  .grade { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card-foto { height: 190px; }
  .card-foto .relogio { height: 220px; }
  .card-corpo { padding: 12px; }
  .card-corpo h3 { font-size: 1.05rem; }
  .card-acoes { grid-template-columns: 1fr; }
  .garantias { grid-template-columns: 1fr 1fr; }
  .depos { grid-template-columns: 1fr; }
  .ficha { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .ficha-grade { grid-template-columns: 1fr; }
  .ficha-foto { min-height: 340px; }
  .relogio.grande { height: 360px; }
  .ficha-info { padding: 22px 18px 40px; }
  .ficha-acoes { grid-template-columns: 1fr; }
}