/* Timm Reboques (prévia, N3). Arquétipo "balcão de locação": branco de loja, tinta quase preta, vermelho do logo
   só em ação e marca, amarelo e preto da fita refletiva das carretinhas. Sem animação. */
:root {
  --fundo: #ffffff;
  --tinta: #161616;
  --suave: #4f4f4f;
  --marca: #d91920;      /* vermelho do logo (amostra 234,28,33), um tom abaixo para texto branco passar em contraste */
  --marca-escura: #a8121a;
  --marca-2: #f4c20d;    /* amarelo da fita refletiva */
  --linha: #e3e0da;
  --cartao: #f3f1ed;
  --papel: #fffdf8;
  --raio: 10px;
  --fonte-titulo: "Archivo", "Arial Black", system-ui, sans-serif;
  --fonte-texto: "Atkinson Hyperlegible", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
}
body { font-size: clamp(17px, 1.1vw, 19px); line-height: 1.55; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.015em; }
h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05; }
h3 { font-size: clamp(21px, 1.8vw, 25px); line-height: 1.15; }
section { padding-block: clamp(56px, 8vw, 104px); }
.cabeca { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
.cabeca p { margin-top: 12px; color: var(--suave); font-size: 1.06em; }

/* Botões: grandes, retos, de balcão */
.botao { border-radius: 8px; font-weight: 700; padding: 1em 1.35em; font-size: 1rem; }
.botao:hover { background: var(--marca-escura); box-shadow: none; }
.botao--grande { font-size: 1.08rem; padding: 1.05em 1.5em; min-height: 56px; }
.botao--linha { --b-fundo: transparent; --b-tinta: var(--tinta); border: 2px solid var(--tinta); }
.botao--linha:hover { background: var(--tinta); color: #fff; }
.link-seta { display: inline-flex; gap: .4em; align-items: center; font-weight: 700; color: var(--marca); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.link-seta svg { width: 1.05em; height: 1.05em; }

/* Cabeçalho */
.topo { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / .96); border-bottom: 1px solid var(--linha); }
.topo__linha { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.topo__logo img { width: 150px; height: auto; }
.topo__menu { display: flex; gap: 26px; margin-left: auto; font-weight: 700; font-size: 16px; }
.topo__menu a { padding-block: 8px; border-bottom: 2px solid transparent; }
.topo__menu a:hover { border-color: var(--marca); }
.topo__cta { padding: .8em 1.15em; }

/* Hero: o balcão */
.balcao { padding-block: clamp(36px, 5vw, 72px) clamp(48px, 6vw, 80px); }
.balcao__grade { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.balcao h1 { font-size: clamp(40px, 5.4vw, 76px); line-height: 1; margin: 22px 0 18px; }
.balcao__sub { font-size: clamp(19px, 1.5vw, 22px); color: var(--suave); max-width: 34ch; }
.balcao__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.balcao__fatos { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 16px; }
.balcao__fatos a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.balcao__fatos svg { width: 20px; height: 20px; color: var(--marca); flex: none; }
.balcao__fatos b { font-size: 1.1em; }

/* Placa de "aberto" pendurada */
.placa { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 16px; border: 3px solid var(--tinta); border-radius: 6px; background: var(--fundo); box-shadow: 4px 4px 0 var(--tinta); font-size: 15px; line-height: 1.25; }
.placa b { font-family: var(--fonte-titulo); font-size: 18px; text-transform: uppercase; letter-spacing: .04em; }
.placa__luz { width: 12px; height: 12px; border-radius: 50%; background: #1fa64a; box-shadow: 0 0 0 3px rgb(31 166 74 / .2); }

.balcao__foto, .item__foto { position: relative; margin: 0; }
.balcao__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--raio); }

/* Etiqueta de chaveiro com o número da frota */
.etiqueta { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: baseline; gap: 3px; padding: 18px 12px 8px; min-width: 52px; justify-content: center; background: #f3e6c8; color: var(--tinta); border-radius: 6px 6px 4px 4px; clip-path: polygon(22% 0, 78% 0, 100% 18%, 100% 100%, 0 100%, 0 18%); font: 800 24px/1 var(--fonte-titulo); box-shadow: 0 2px 0 rgb(0 0 0 / .15); }
.etiqueta small { font: 700 13px/1 var(--fonte-texto); }
.etiqueta__furo { position: absolute; top: 6px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--tinta); box-shadow: inset 0 0 0 2px #c9b48a; }

/* Fita refletiva */
.fita { height: 16px; background: repeating-linear-gradient(-45deg, var(--marca-2) 0 16px, var(--tinta) 16px 32px); }
.fita--fina { height: 8px; background-size: auto; }

/* O que tem para alugar */
.alugar { background: var(--cartao); }
.itens { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 28px); }
.item { display: grid; grid-template-rows: auto 1fr; background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.item__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.item__corpo { display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 2.4vw, 30px); }
.item__corpo .botao { align-self: flex-start; margin-top: auto; }
.item__aviso { display: flex; flex-direction: column; justify-content: center; gap: 10px; aspect-ratio: 16 / 10; padding: clamp(20px, 3vw, 36px); background: var(--tinta); color: #fff; }
.item__aviso p { font-size: 18px; max-width: 26ch; }
.item__aviso .link-seta { color: #fff; }
.item__selo { align-self: flex-start; padding: 4px 10px; border-radius: 4px; background: var(--marca-2); color: var(--tinta); font: 800 14px/1.3 var(--fonte-titulo) !important; text-transform: uppercase; letter-spacing: .05em; }
.ficha { display: grid; gap: 12px; margin: 0; }
.ficha div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
.ficha dt { font-weight: 700; }
.ficha dd { margin: 0; color: var(--suave); }
.manutencao { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 24px; padding: 16px 20px; border-left: 6px solid var(--marca-2); background: var(--fundo); border-radius: 0 var(--raio) var(--raio) 0; }
.frota__titulo { margin: clamp(48px, 6vw, 72px) 0 20px; }
.frota { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.frota a { position: relative; display: block; border-radius: var(--raio); overflow: hidden; }
.frota img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.frota .etiqueta { top: 10px; left: 10px; font-size: 20px; min-width: 46px; padding: 16px 10px 7px; }

/* Como alugar: comprovante de balcão */
.como__grade { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: clamp(28px, 5vw, 80px); align-items: start; }
.cabeca--lado .botao { margin-top: 26px; }
.comprovante { position: relative; margin: 14px 0; padding: 26px clamp(18px, 3vw, 30px) 22px; list-style: none; background: var(--papel); border-inline: 1px solid var(--linha); box-shadow: 0 18px 40px -26px rgb(0 0 0 / .35); font-family: var(--mono); }
.comprovante::before, .comprovante::after { content: ""; position: absolute; left: -1px; right: -1px; height: 14px; background: linear-gradient(-45deg, transparent 7px, var(--papel) 0) 0 0 / 14px 14px repeat-x, linear-gradient(45deg, transparent 7px, var(--papel) 0) 0 0 / 14px 14px repeat-x; }
.comprovante::before { top: -14px; transform: scaleY(-1); }
.comprovante::after { bottom: -14px; }
.comprovante__topo { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 2px dashed #bdb7ab; font-size: 14px; letter-spacing: .06em; }
.passo { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 18px 0; border-bottom: 2px dashed #d8d2c6; }
.passo__n { font: 700 26px/1 var(--mono); color: var(--marca); }
.passo h3 { font-family: var(--fonte-titulo); font-size: 21px; margin-bottom: 6px; }
.passo p { font-family: var(--fonte-texto); color: var(--suave); }
.checklist { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; font-family: var(--fonte-texto); font-weight: 700; }
.checklist li { display: flex; align-items: center; gap: 8px; }
.checklist svg { width: 20px; height: 20px; padding: 2px; border-radius: 4px; background: var(--tinta); color: var(--marca-2); flex: none; }
.comprovante__rodape { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; font-size: 15px; }
.comprovante__rodape span { color: var(--suave); }

/* Quem atende */
.timm { background: var(--tinta); color: #fff; }
.timm__grade { display: grid; grid-template-columns: minmax(0, 400px) 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.timm__lead { margin: 18px 0 14px; font-size: clamp(19px, 1.5vw, 22px); }
.timm__texto > p:not(.timm__lead) { color: #d6d6d6; }
/* Crachá do dono: cartão com presilha, faixa vermelha, foto real e nome inteiro */
.cracha { position: relative; justify-self: center; width: min(100%, 360px); margin-top: 22px; padding: 0 0 24px; border-radius: 16px; background: #fff; color: var(--tinta); text-align: center; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .7); }
.cracha__presilha { position: absolute; top: -22px; left: 50%; width: 64px; height: 30px; margin-left: -32px; border: 6px solid #a5a5a5; border-bottom: 0; border-radius: 10px 10px 0 0; }
.cracha__topo { display: grid; place-items: center; padding: 14px 0 12px; border-radius: 16px 16px 0 0; background: var(--marca); }
.cracha__topo img { width: 126px; border-radius: 3px; background: #fff; outline: 3px solid #fff; }
.cracha__foto { width: 62%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; margin: 22px auto 16px; border-radius: 8px; border: 3px solid var(--tinta); }
.cracha__nome { font: 800 clamp(22px, 2vw, 26px)/1.15 var(--fonte-titulo); padding-inline: 16px; }
.cracha__cargo { margin-top: 4px; font-weight: 700; color: var(--marca); text-transform: uppercase; letter-spacing: .08em; font-size: 15px; }
.cracha__casa { margin: 14px 22px 0; padding-top: 12px; border-top: 2px dashed var(--linha); font-size: 15px; color: var(--suave); }
.provas { display: grid; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.provas a { display: flex; align-items: center; gap: 14px; min-height: 48px; }
.provas u { text-underline-offset: 3px; }
.provas__n { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 8px; background: var(--marca-2); color: var(--tinta); font: 800 22px/1 var(--fonte-titulo); }
.provas__n svg { width: 26px; height: 26px; }

/* Perguntas */
.qa { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 4vw, 56px); margin: 0; }
.qa div { padding: 22px 0; border-top: 2px solid var(--tinta); }
.qa dt { font: 800 20px/1.25 var(--fonte-titulo); }
.qa dd { margin: 8px 0 0; color: var(--suave); }

/* Contato e recado */
.contato { background: var(--cartao); }
.contato__grade { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: clamp(28px, 5vw, 80px); align-items: start; }
.contato__lado > p { margin: 14px 0 24px; color: var(--suave); font-size: 1.06em; }
.enderecos { display: grid; gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.enderecos li { display: flex; gap: 14px; align-items: flex-start; }
.enderecos svg { width: 24px; height: 24px; margin-top: 4px; color: var(--marca); flex: none; }
.enderecos small { display: block; font-size: 14px; color: var(--suave); }
.enderecos a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; display: inline-flex; min-height: 44px; align-items: center; }
.redes { display: flex; gap: 10px; margin-top: 24px; }
.redes a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px; background: var(--tinta); color: #fff; }
.redes svg { width: 22px; height: 22px; }
.recado { display: grid; gap: 16px; padding: clamp(22px, 3vw, 34px); background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--raio); }
.recado > p { color: var(--suave); margin-top: -8px; }
.recado .campos { display: grid; gap: 14px; }
.recado label { display: grid; gap: 6px; font-weight: 700; font-size: 16px; }
.recado input, .recado textarea { width: 100%; padding: 13px 14px; border: 2px solid #cfcac0; border-radius: 8px; background: #fff; font-size: 17px; font-weight: 400; }
.recado input:focus, .recado textarea:focus { outline: none; border-color: var(--tinta); }
.recado textarea { resize: vertical; min-height: 110px; }
.recado [data-form-ok] { display: grid; gap: 12px; }
.recado [data-form-ok] .botao { justify-self: start; }

/* Rodapé */
.rodape { background: var(--tinta); color: #e9e9e9; }
.rodape__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-block: 30px; }
.rodape__linha img { width: 122px; border-radius: 3px; background: #fff; outline: 4px solid #fff; }
.rodape__miudo { margin-left: auto; font-size: 14px; color: #b9b9b9; }

/* WhatsApp: vermelho da marca no desktop, barra verde no celular (camada do motor) */
.wa-flutuante { z-index: 70; }

@media (max-width: 1060px) {
  .topo__menu { gap: 18px; font-size: 15px; }
}
@media (max-width: 899px) {
  .topo__menu { display: none; }
  .topo__cta { margin-left: auto; }
  .balcao__grade, .itens, .como__grade, .timm__grade, .contato__grade { grid-template-columns: 1fr; }
  .balcao__foto { order: -1; }
  .frota { grid-template-columns: repeat(2, 1fr); }
  .qa { grid-template-columns: 1fr; }
  .comprovante { margin-inline: 0; }
}
@media (max-width: 640px) {
  section { padding-block: 52px; }
  .topo__linha { min-height: 64px; gap: 12px; }
  .topo__logo img { width: 116px; }
  .topo__cta { padding: .7em 1em; min-height: 44px; }
  .balcao { padding-top: 20px; }
  .balcao h1 { font-size: clamp(36px, 10.5vw, 46px); margin: 18px 0 12px; }
  .balcao__acoes .botao { width: 100%; }
  .placa { font-size: 14px; }
  .item__corpo .botao, .cabeca--lado .botao, .contato__lado .botao, .recado .botao--grande { width: 100%; align-self: stretch; }
  .ficha div { grid-template-columns: 1fr; gap: 2px; }
  .frota { gap: 10px; }
  .frota .etiqueta { font-size: 17px; min-width: 40px; padding: 15px 8px 6px; top: 8px; left: 8px; }
  .passo { grid-template-columns: 40px 1fr; }
  .passo__n { font-size: 22px; }
  .rodape__miudo { margin-left: 0; }
  .manutencao .link-seta { min-height: 44px; }
}