/* ══════════════════════════════════════════════════════════════════
   JR MOTOS — v4
   Azul do logo em gradiente, cards com profundidade, cantos macios,
   revelação no scroll. Fachada como primeira imagem.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --azul:      #0282F7;
  --azul-esc:  #2328AB;
  --marinho:   #141C5C;
  --marinho-2: #0E1442;
  --grad:      linear-gradient(135deg, #0282F7 0%, #2328AB 100%);
  --grad-suave:linear-gradient(160deg, #1B2472 0%, #141C5C 55%, #0E1442 100%);

  --claro:   #F5F7FC;
  --branco:  #FFFFFF;
  --texto:   #131A33;
  --suave:   #5B6480;
  --borda:   #E4E9F4;
  --zap:     #25A75B;
  --zap-esc: #1C8B4A;

  --tit:  'Plus Jakarta Sans', system-ui, sans-serif;
  --txt:  'Inter', system-ui, -apple-system, sans-serif;

  --r:   18px;
  --r-s: 12px;
  --pad: 20px;
  --max: 1180px;
  --sombra:    0 4px 20px rgba(19,26,51,.07);
  --sombra-md: 0 12px 34px rgba(19,26,51,.11);
  --barra-h: 68px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--txt); font-size:16.5px; line-height:1.65;
  color:var(--texto); background:var(--branco);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--azul); outline-offset:3px; border-radius:6px; }

.env{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
.i{ width:20px; height:20px; fill:currentColor; flex:none; }
svg.i[viewBox] use{ stroke-width:inherit; }

/* ── revelação no scroll ─────────────────────────────────────── */
.rev{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1); }
.rev.vis{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rev{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.01ms !important; }
}

/* ── tipografia ──────────────────────────────────────────────── */
.h1,.h2,.h3{ font-family:var(--tit); font-weight:800; letter-spacing:-.025em; margin:0; }
.h1{ font-size:clamp(38px,10vw,66px); line-height:1.04; }
.h2{ font-size:clamp(28px,6.6vw,44px); line-height:1.1; }
.h3{ font-size:clamp(21px,4.6vw,28px); line-height:1.2; }
.h2--claro{ color:#fff; }

.grad{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

.olho{
  font-family:var(--tit); font-size:12.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--azul); margin:0 0 10px;
}
.olho--claro{ color:#7FB4FF; }
.sub{ color:var(--suave); font-size:17px; margin:12px 0 0; }
.sub--claro{ color:rgba(255,255,255,.76); }

.cab{ margin-bottom:34px; }
.cab--centro{ text-align:center; max-width:620px; margin-left:auto; margin-right:auto; }
.cab--centro .sub{ margin-left:auto; margin-right:auto; }

/* ── botões ──────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 26px;
  font-family:var(--tit); font-size:16px; font-weight:700; letter-spacing:-.01em;
  text-decoration:none; border:0; border-radius:var(--r-s);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--zap{ background:var(--zap); color:#fff; box-shadow:0 8px 22px rgba(37,167,91,.3); }
.btn--zap:hover{ background:var(--zap-esc); box-shadow:0 12px 28px rgba(37,167,91,.36); }
.btn--vidro{
  background:rgba(255,255,255,.14); color:#fff;
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(10px);
}
.btn--vidro:hover{ background:rgba(255,255,255,.24); }
.btn--sm{ min-height:42px; padding:0 16px; font-size:14.5px; border-radius:10px; box-shadow:none; }
.btn--sm .i{ width:17px; height:17px; }
.btn--largo{ display:flex; width:100%; }

/* ── cabeçalho ───────────────────────────────────────────────── */
.topo{
  position:sticky; top:0; z-index:70;
  background:rgba(20,28,92,.92);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.topo__in{
  max-width:var(--max); margin:0 auto; padding:10px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.topo__logo img{ height:26px; width:auto; }
.topo__dir{ display:flex; align-items:center; gap:9px; }
.topo__ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2); border-radius:10px;
}

/* ── herói ───────────────────────────────────────────────────── */
.heroi{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--grad-suave);
}
/* no celular a fachada é um cartão, não fundo — foto 4:3 em tela alta vira zoom */
.heroi__bg{ display:none; }
.heroi__cartao{
  margin:26px 0 0;
  border-radius:var(--r); overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 40px rgba(6,10,40,.45);
}
.heroi__cartao img{ width:100%; display:block; }
.heroi__veu{ display:none; }
.heroi__brilho{
  position:absolute; z-index:-1;
  width:420px; height:420px; right:-140px; top:-120px;
  background:radial-gradient(circle, rgba(2,130,247,.42), transparent 68%);
  filter:blur(10px);
}
.heroi__in{ padding-top:44px; padding-bottom:52px; color:#fff; width:100%; }

.selo{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 20px; padding:7px 16px 7px 13px;
  font-size:13.5px; font-weight:600;
  color:#fff; background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.24); border-radius:999px;
  backdrop-filter:blur(8px);
}
.selo__ponto{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:#3DDC84; box-shadow:0 0 0 4px rgba(61,220,132,.22);
  animation:pisca 2.4s ease-in-out infinite;
}
.selo__ponto.off{ background:#FF9A4D; box-shadow:0 0 0 4px rgba(255,154,77,.22); animation:none; }
@keyframes pisca{ 0%,100%{opacity:1} 50%{opacity:.45} }
.selo--claro{
  color:var(--texto); background:var(--claro);
  border-color:var(--borda); backdrop-filter:none; margin-top:16px;
}

.heroi .h1{ color:#fff; }
.heroi .h1 .grad{
  background:linear-gradient(120deg,#7FC3FF 0%,#4E8BFF 55%,#8AA6FF 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.heroi__sub{ font-size:17.5px; color:rgba(255,255,255,.8); margin:16px 0 28px; max-width:34ch; }
.heroi__sub strong{ color:#fff; font-weight:600; }
.heroi__btns{ display:grid; gap:11px; }

.pilulas{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px;
  margin:26px 0 0; padding:0;
}
.pilulas li{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; font-size:13.5px; font-weight:500;
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16); border-radius:999px;
}
.pilulas .i{ width:15px; height:15px; fill:none; stroke:#3DDC84; stroke-width:2.6; }

/* ── seções ──────────────────────────────────────────────────── */
.sec{ padding:60px 0; }
.sec--claro{ background:var(--claro); }
.sec--grad{ background:var(--grad-suave); color:#fff; position:relative; overflow:hidden; }

/* ── cartões de especialidade ────────────────────────────────── */
.duo{ display:grid; gap:16px; }
.cartao{
  background:var(--branco); border:1px solid var(--borda);
  border-radius:var(--r); padding:24px 22px 12px;
  box-shadow:var(--sombra);
  transition:transform .22s ease, box-shadow .22s ease;
}
.cartao:hover{ transform:translateY(-4px); box-shadow:var(--sombra-md); }
.cartao__cab{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.cartao__cab h3{ font-family:var(--tit); font-size:21px; font-weight:800; letter-spacing:-.02em; margin:0; }

.bolha{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; flex:none; border-radius:14px;
  background:var(--grad); color:#fff;
  box-shadow:0 6px 16px rgba(35,40,171,.28);
}
.bolha .i{ width:23px; height:23px; fill:none; stroke:#fff; }
.bolha--alt{ background:linear-gradient(135deg,#2328AB 0%,#0282F7 100%); }
.bolha--mini{ width:40px; height:40px; border-radius:12px; }
.bolha--mini .i{ width:19px; height:19px; fill:#fff; stroke:none; }

.marcas{ list-style:none; margin:0; padding:0; }
.marcas li{
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--borda);
  font-size:15.5px; font-weight:500;
}
.marcas li:last-child{ border-bottom:0; }
.marcas .i{ width:19px; height:19px; fill:none; stroke:var(--azul); }

/* ── ordem / seletor ─────────────────────────────────────────── */
.ordem{ display:grid; gap:26px; }
.campo__rot{
  font-size:13px; font-weight:600; letter-spacing:.02em;
  color:rgba(255,255,255,.62); margin:0 0 11px; text-transform:uppercase;
}
.campo__rot--sep{ margin-top:24px; }
.opcoes{ display:flex; flex-wrap:wrap; gap:8px; }
.opcao{
  font-family:var(--txt); font-size:14.5px; font-weight:500;
  padding:11px 16px; min-height:44px;
  color:rgba(255,255,255,.9); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18); border-radius:999px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.opcao:hover{ background:rgba(255,255,255,.16); transform:translateY(-1px); }
.opcao[aria-pressed="true"]{
  background:#fff; color:var(--marinho); border-color:#fff; font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}

.ficha{
  background:var(--branco); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--sombra-md); margin-bottom:14px;
}
.ficha__cab{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; background:var(--claro); border-bottom:1px solid var(--borda);
}
.ficha__tit{
  font-family:var(--tit); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--suave); margin:0;
}
.ficha__marca{ height:15px; width:auto; opacity:.8; }
.ficha__campos{ padding:6px 18px 12px; }
.ficha__campos div{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 0; border-bottom:1px dashed var(--borda);
}
.ficha__campos span{ color:var(--suave); font-size:14.5px; }
.ficha__campos b{ font-family:var(--tit); font-weight:700; font-size:15.5px; text-align:right; }
.ficha__campos b[data-vazio="1"]{ color:#C3C9D8; font-weight:600; }
.ficha__msg{
  margin:0; padding:15px 18px; background:var(--marinho);
  color:rgba(255,255,255,.9); font-size:14.5px; line-height:1.55;
}

/* ── cartões com foto ────────────────────────────────────────── */
.trio{ display:grid; gap:16px; }
.foto-cartao{
  background:var(--branco); border:1px solid var(--borda);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra);
  transition:transform .22s ease, box-shadow .22s ease;
}
.foto-cartao:hover{ transform:translateY(-4px); box-shadow:var(--sombra-md); }
.foto-cartao__img{ overflow:hidden; }
.foto-cartao__img img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.8,.3,1);
}
.foto-cartao:hover .foto-cartao__img img{ transform:scale(1.05); }
.foto-cartao__txt{ padding:20px 20px 22px; }
.foto-cartao__txt h3{
  font-family:var(--tit); font-size:19px; font-weight:800;
  letter-spacing:-.02em; margin:0 0 7px;
}
.foto-cartao__txt p{ margin:0; color:var(--suave); font-size:15.5px; }

/* ── faixa de chamada ────────────────────────────────────────── */
.faixa-cta{ background:var(--grad); color:#fff; padding:44px 0; }
.faixa-cta__in{ display:grid; gap:20px; }
.faixa-cta p{ margin:8px 0 0; color:rgba(255,255,255,.86); }
.faixa-cta .btn--zap{ background:#fff; color:var(--marinho); box-shadow:0 10px 26px rgba(0,0,0,.18); }
.faixa-cta .btn--zap:hover{ background:#F2F5FF; }
.faixa-cta .btn--zap .i{ fill:var(--zap); }

/* ── visita ──────────────────────────────────────────────────── */
.visita{ display:grid; gap:20px; }
.mapa{
  border-radius:var(--r); overflow:hidden; aspect-ratio:4/3;
  background:#DFE5F2; box-shadow:var(--sombra);
}
.mapa iframe{ width:100%; height:100%; border:0; display:block; }
.contato{ display:grid; gap:18px; }
.contato__bloco{ display:flex; gap:14px; align-items:flex-start; }
.contato__bloco h4{ font-family:var(--tit); font-size:15px; font-weight:700; margin:0 0 3px; }
.contato__bloco p{ margin:0; color:var(--suave); font-size:15.5px; }
.contato__bloco a{ color:var(--azul); text-decoration:none; font-weight:500; }
.horarios{
  background:var(--branco); border:1px solid var(--borda);
  border-radius:var(--r); padding:18px 20px; box-shadow:var(--sombra);
}
.horarios h4{ font-family:var(--tit); font-size:15px; font-weight:700; margin:0 0 10px; }
.horarios__l{
  display:flex; justify-content:space-between; gap:16px;
  padding:9px 0; border-bottom:1px solid var(--borda); font-size:15px;
}
.horarios__l:last-of-type{ border-bottom:0; }
.horarios__l span{ color:var(--suave); }
.horarios__l b{ font-weight:600; }

/* ── rodapé ──────────────────────────────────────────────────── */
.rodape{
  background:var(--marinho-2); color:rgba(255,255,255,.68);
  padding:34px 0 calc(34px + var(--barra-h)); font-size:14.5px; text-align:center;
}
.rodape__in{ display:grid; gap:12px; justify-items:center; }
.rodape img{ height:26px; width:auto; }
.rodape p{ margin:0; }
.rodape a{ color:#7FB4FF; text-decoration:none; font-weight:500; }
.rodape__legal{ font-size:13px; color:rgba(255,255,255,.42); }

/* ── botão flutuante ─────────────────────────────────────────── */
.flutuante{
  position:fixed; right:16px; z-index:65;
  bottom:calc(var(--barra-h) + 16px + env(safe-area-inset-bottom));
  width:54px; height:54px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  background:var(--zap); color:#fff;
  box-shadow:0 8px 24px rgba(37,167,91,.42);
}
.flutuante .i{ width:27px; height:27px; }

/* ── barra inferior ──────────────────────────────────────────── */
.barra{
  position:fixed; inset:auto 0 0 0; z-index:70;
  display:flex; gap:9px; align-items:center;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--borda);
  box-shadow:0 -6px 24px rgba(19,26,51,.09);
  transform:translateY(120%);
  transition:transform .3s cubic-bezier(.22,.8,.3,1);
}
.barra.on{ transform:translateY(0); }
.barra__tel{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:50px; flex:none;
  color:var(--marinho); background:var(--claro);
  border:1px solid var(--borda); border-radius:var(--r-s);
}
.barra__zap{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:50px; font-family:var(--tit); font-size:16px; font-weight:700;
  color:#fff; text-decoration:none;
  background:var(--zap); border-radius:var(--r-s);
  box-shadow:0 6px 18px rgba(37,167,91,.32);
}

/* ══ TELAS GRANDES ══════════════════════════════════════════════ */
@media (min-width:900px){
  :root{ --pad:40px; }
  body{ font-size:17.5px; }
  .barra{ display:none; }
  .flutuante{ display:inline-flex; bottom:26px; right:26px; width:60px; height:60px; }
  .rodape{ padding-bottom:36px; }

  .topo__in{ padding:12px var(--pad); }
  .topo__logo img{ height:31px; }

  .heroi{ min-height:88vh; display:flex; align-items:center; }
  .heroi__cartao{ display:none; }
  .heroi__veu{
    display:block; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(100deg, rgba(14,20,66,.94) 0%, rgba(20,28,92,.80) 42%, rgba(14,20,66,.42) 100%);
  }
  .heroi__bg{
    display:block; position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center 45%; z-index:-2;
  }
  .heroi__in{ padding-top:120px; padding-bottom:120px; }
  .heroi__bg{ object-position:center 45%; }
  .heroi__sub{ font-size:19.5px; }
  .heroi__btns{ display:flex; gap:13px; }
  .heroi__brilho{ width:640px; height:640px; right:-180px; top:-180px; }

  .sec{ padding:96px 0; }
  .cab{ margin-bottom:48px; }

  .duo{ grid-template-columns:1fr 1fr; gap:24px; }
  .cartao{ padding:30px 28px 16px; }

  .ordem{ grid-template-columns:1fr 400px; gap:48px; align-items:start; }

  .trio{ grid-template-columns:repeat(3,1fr); gap:24px; }

  .faixa-cta{ padding:56px 0; }
  .faixa-cta__in{ grid-template-columns:1fr auto; align-items:center; gap:40px; }

  .visita{ grid-template-columns:1.1fr 1fr; gap:44px; align-items:center; }
  .mapa{ aspect-ratio:16/12; }

  .rodape__in{
    grid-template-columns:auto 1fr auto; justify-items:start;
    align-items:center; text-align:left; gap:24px;
  }
  .rodape__legal{ grid-column:1 / -1; justify-self:center; }
}