/* ============================================================
   M7 KIT — a base de estilo da casa (cores, letras, botoes,
   placas e o celular de conversa). Um arquivo so: quem inclui
   herda a identidade inteira. Cor nova se confere aqui, nunca
   em copia solta dentro de pagina.
   ============================================================ */

@view-transition { navigation: auto; }

:root {
  --red: #C83538;
  --red2: #E04348;
  --red-txt: #F0575E;
  --noite: #131011;
  --noite2: #1A1617;
  --grafite: #373435;
  --grafite2: #403C3D;
  --grafite3: #4E4A4B;
  --txt: #F5F4F2;
  --txt2: #BDB8B6;
  --txt3: #8F8988;
  --linha: rgba(255, 255, 255, .10);
  --linha2: rgba(255, 255, 255, .20);
  --placa: rgba(28, 24, 25, .80);
  --placa2: rgba(42, 37, 38, .90);
  --good: #7BC47F;
  --f-tit: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --f-txt: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --raio: 16px;
  --wrap: 1180px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--noite);
  color: var(--txt);
  font: 400 17px/1.6 var(--f-txt);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red-txt); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- letras ---------- */
h1, h2, h3 { font-family: var(--f-tit); margin: 0; text-wrap: balance; }
.t-hero { font-size: clamp(2.45rem, 4.9vw, 4.7rem); font-weight: 800; line-height: .98; letter-spacing: -.035em; }
.t-h2 { font-size: clamp(1.85rem, 3.9vw, 3.3rem); font-weight: 750; line-height: 1.04; letter-spacing: -.03em; }
.t-h3 { font-size: clamp(1.2rem, 1.7vw, 1.45rem); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; }
.lead { font-size: clamp(1.06rem, 1.45vw, 1.26rem); line-height: 1.55; color: var(--txt2); max-width: 62ch; margin: 0; text-wrap: pretty; }
.kicker, .chip {
  font: 500 .74rem/1.3 var(--f-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--txt3);
}
.kicker b { color: var(--red-txt); font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.chip::before { content: ""; width: 28px; height: 2px; background: var(--red); border-radius: 2px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- botoes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 54px; padding: 0 28px;
  border-radius: 999px; border: 1px solid transparent;
  background: var(--red); color: #fff;
  font: 600 1.02rem/1.1 var(--f-txt); text-decoration: none; text-align: center;
  cursor: pointer;
  transition: transform .22s var(--ease), background .22s, box-shadow .22s, border-color .22s;
}
.btn:hover { background: var(--red2); transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(224, 67, 72, .75); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.ghost { background: rgba(255, 255, 255, .03); border-color: var(--linha2); color: var(--txt); }
.btn.ghost:hover { border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .08); box-shadow: none; }
.btn .seta { display: inline-block; transition: transform .22s var(--ease); }
.btn:hover .seta { transform: translateX(4px); }

/* ---------- placa (cartao) e a luz que segue o mouse ---------- */
.placa {
  background: var(--placa);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.luz { position: relative; overflow: hidden; isolation: isolate; }
.luz::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, -30%), rgba(224, 67, 72, .20), transparent 62%);
  opacity: 0; transition: opacity .35s;
}
.luz:hover::before { opacity: 1; }
.luz { transition: border-color .3s, transform .3s var(--ease); }
.luz:hover { border-color: var(--linha2); }

/* ---------- o celular de conversa ---------- */
.fone {
  width: min(100%, 372px);
  padding: 10px;
  border-radius: 34px;
  background: linear-gradient(160deg, #2a2526, #0d0b0c 40%);
  border: 1px solid var(--linha2);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .03) inset;
}
.fone-tela { border-radius: 25px; background: #151213; overflow: hidden; }
.fone-topo {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px; background: #1f1b1c; border-bottom: 1px solid var(--linha);
}
.fone-av {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--red); color: #fff; font: 800 .74rem/1 var(--f-tit); letter-spacing: -.02em;
}
.fone-topo b { display: block; font: 600 .95rem/1.2 var(--f-txt); }
.fone-topo small { display: block; font: 500 .72rem/1.2 var(--f-txt); color: var(--good); }
.chat {
  display: flex; flex-direction: column; gap: 8px;
  height: 344px; padding: 16px 14px; overflow: hidden;
}
.bx {
  max-width: 86%; padding: 9px 13px; border-radius: 17px;
  font-size: .94rem; line-height: 1.38; transform-origin: 0 100%;
}
.bx.eles { align-self: flex-start; background: #2d2829; color: var(--txt); border-bottom-left-radius: 5px; }
.bx.nos { align-self: flex-end; background: linear-gradient(180deg, #D43E42, #B62E32); color: #fff; border-bottom-right-radius: 5px; transform-origin: 100% 100%; }
.bx .ok { font-weight: 700; }
.bx.dig { display: inline-flex; gap: 5px; padding: 14px 15px; }
.bx.dig i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; }

@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 20px; }
  .btn { min-height: 54px; padding: 0 24px; }
}