:root {
  --cor1: #141414;
  --cor2: #c8352b;
  --papel: #f1ebe0;
  --papel2: #e8e0d1;
  --linha: rgba(20, 20, 20, .16);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body { background: var(--papel); color: var(--cor1); font: 400 16px/1.6 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* cabeçalho */
.topo { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 10px 18px; background: rgba(241, 235, 224, .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marca img { border-radius: 50%; }
.marca span { font: 400 24px/1 "Archivo Black", sans-serif; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 6px; }
.marca small { font: 600 11px/1 Inter, sans-serif; letter-spacing: .24em; text-transform: uppercase; opacity: .6; }
.menu { display: none; gap: 28px; }
.menu a { text-decoration: none; font-weight: 600; font-size: 14px; }
.menu a:hover { color: var(--cor2); }
.topo-zap { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--papel); background: var(--cor1); padding: 9px 12px; border-radius: 999px; font-weight: 600; font-size: 14px; }
.topo-zap svg { width: 18px; height: 18px; fill: currentColor; }
.topo-zap span { display: none; }

.mao { font: 400 20px/1.2 "Permanent Marker", cursive; color: var(--cor2); margin-bottom: 12px; transform: rotate(-2deg); display: inline-block; }
h1 { font: 400 clamp(48px, 13.5vw, 112px)/.92 "Archivo Black", sans-serif; letter-spacing: -.03em; }
h2 { font: 400 clamp(34px, 8.5vw, 64px)/1 "Archivo Black", sans-serif; letter-spacing: -.02em; margin-bottom: 40px; }
h3 { font: 400 22px/1 "Archivo Black", sans-serif; text-transform: uppercase; margin-bottom: 18px; }

/* capa */
.capa { padding: 104px 20px 40px; display: grid; gap: 34px; max-width: 1240px; margin: 0 auto; min-height: 100svh; align-content: center; }
.capa-sub { margin: 22px 0 28px; font-size: 18px; max-width: 520px; }
.capa-acoes { display: grid; gap: 16px; justify-items: start; }
.botao { display: inline-block; background: var(--cor2); color: #fff; text-decoration: none; font-weight: 600; font-size: 16px; padding: 18px 28px; border-radius: 999px; transition: transform .2s; }
.botao:hover { transform: translateY(-2px); }
.nota { font-size: 14px; opacity: .75; }
.nota strong { opacity: 1; }
.capa-foto { position: relative; }
.capa-foto img { width: 100%; height: 440px; object-fit: cover; object-position: center 35%; border-radius: 14px; filter: contrast(1.05); }
.selo-terca { position: absolute; left: -6px; bottom: -18px; background: var(--cor1); color: var(--papel); padding: 14px 18px; border-radius: 10px; transform: rotate(-4deg); display: grid; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.selo-terca span { font: 400 15px/1 "Permanent Marker", cursive; color: #f2b8a8; }
.selo-terca b { font: 400 26px/1.1 "Archivo Black", sans-serif; }

/* faixa */
.faixa { background: var(--cor1); color: var(--papel); overflow: hidden; padding: 16px 0; margin-top: 30px; }
.faixa p { white-space: nowrap; font: 400 20px/1 "Archivo Black", sans-serif; text-transform: uppercase; letter-spacing: .02em; animation: correr 28s linear infinite; }
@keyframes correr { to { transform: translateX(-50%); } }

/* seções */
.secao { padding: 96px 20px; max-width: 1240px; margin: 0 auto; }

/* preços */
.precos { display: grid; gap: 22px; }
.grupo { background: #fff; border: 2px solid var(--cor1); border-radius: 14px; padding: 26px 22px; box-shadow: 6px 6px 0 var(--cor1); }
.grupo ul { list-style: none; display: grid; gap: 14px; }
.grupo li { display: flex; align-items: baseline; gap: 8px; }
.grupo li i { flex: 1; border-bottom: 2px dotted var(--linha); transform: translateY(-4px); }
.grupo li b { font-weight: 600; white-space: nowrap; }
.grupo li.terca span, .grupo li.terca b { color: var(--cor2); }
.consulta { font-size: 13px; opacity: .7; }
.combos { background: var(--cor1); color: var(--papel); box-shadow: 6px 6px 0 var(--cor2); }
.combos li i { border-color: rgba(241,235,224,.25); }
.botao-claro { margin-top: 24px; background: var(--papel); color: var(--cor1); padding: 14px 22px; font-size: 15px; }

/* a casa */
.casa { position: relative; background: var(--cor1); color: var(--papel); }
.casa img { width: 100%; height: 300px; object-fit: cover; opacity: .9; }
.casa-texto { padding: 56px 20px 80px; max-width: 760px; }
.casa-texto p:last-child { font-size: 18px; opacity: .85; }

/* por que */
.porque { display: grid; gap: 40px; }
.porque-foto img { width: 100%; height: 380px; object-fit: cover; border-radius: 14px; }
.motivos { list-style: none; counter-reset: m; display: grid; gap: 20px; margin-bottom: 36px; }
.motivos li { counter-increment: m; padding-left: 46px; position: relative; }
.motivos li::before { content: counter(m); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--cor1); color: var(--papel); display: grid; place-items: center; font: 400 15px/1 "Archivo Black", sans-serif; }
blockquote { border-left: 4px solid var(--cor2); padding-left: 20px; font-size: 19px; line-height: 1.45; }
cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }

/* como chegar */
.chegar { display: grid; gap: 34px; border-top: 2px solid var(--cor1); }
.chegar h2 { margin-bottom: 6px; }
.end { font-size: 18px; margin-bottom: 26px; }
.horario { display: grid; gap: 8px; margin-bottom: 30px; max-width: 360px; }
.horario div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--linha); padding-bottom: 8px; }
.horario dt { font-weight: 600; }
.mapa { min-height: 320px; border: 2px solid var(--cor1); border-radius: 14px; overflow: hidden; }
.mapa iframe { width: 100%; height: 100%; min-height: 320px; border: 0; filter: grayscale(1) contrast(1.05); }

/* rodapé */
.rodape { background: var(--cor1); color: var(--papel); text-align: center; padding: 56px 20px 110px; display: grid; gap: 6px; justify-items: center; font-size: 14px; }
.rodape img { border-radius: 50%; margin-bottom: 10px; border: 2px solid var(--papel); }
.previa { margin-top: 18px; font-size: 12px; opacity: .55; }

.zap-flutuante { position: fixed; right: 18px; bottom: 18px; z-index: 30; width: 58px; height: 58px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.zap-flutuante svg { width: 30px; height: 30px; fill: #fff; }

@media (min-width: 820px) {
  .menu { display: flex; }
  .topo { padding: 12px 40px; }
  .topo-zap span { display: inline; }
  .capa { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 60px; padding: 110px 40px 60px; }
  .capa-foto img { height: 620px; }
  .secao { padding: 130px 40px; }
  .precos { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .casa { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; }
  .casa img { height: 100%; min-height: 520px; }
  .casa-texto { padding: 80px 56px; }
  .porque { grid-template-columns: .9fr 1.1fr; align-items: center; gap: 72px; }
  .porque-foto img { height: 600px; }
  .chegar { grid-template-columns: 1fr 1.2fr; align-items: stretch; }
  .zap-flutuante { display: none; }
  .rodape { padding-bottom: 56px; }
}