/* Home do Posou - estrutura do Tecnico (regua de 2px, cantos retos, sombra dura,
   numeros em mono) com as cores do Festivo (papel creme, tinta, sol, goiaba). */

@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap; src: url('/fontes/inter-var.woff2') format('woff2-variations'); }
@font-face { font-family: 'Sora'; font-weight: 100 800; font-display: swap; src: url('/fontes/sora-var.woff2') format('woff2-variations'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url('/fontes/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  --papel: #faf5eb;
  --papel-2: #f3ecdc;
  --placa: #fffdf7;
  --tinta: #1d1a2c;
  --tinta-2: #3b3651;
  --suave: #6b6680;
  --fio: #e1d8c4;
  --sol: #fbcb2f;
  --sol-hover: #f2bb12;
  --goiaba: #e23d62;
  --anil: #3959da;
  --texto: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --titulo: 'Sora', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --regua: 2px;
  --sombra: 6px 6px 0 var(--tinta);
  --largura: 1180px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 17px/1.55 var(--texto);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tinta); text-decoration-color: var(--goiaba); text-underline-offset: 0.2em; }
a:hover { color: var(--anil); }
:focus-visible { outline: 3px solid var(--anil); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titulo); margin: 0; line-height: 1.12; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(34px, 5.2vw, 60px); font-weight: 700; }
h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; }
h3 { font-size: 19px; font-weight: 700; }
p { margin: 0; }

.faixa {
  max-width: var(--largura);
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* --- Topo ------------------------------------------------------------------------ */
.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--tinta);
  color: var(--papel);
  border-bottom: var(--regua) solid var(--tinta);
}
.topo .faixa { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca img { height: 34px; width: auto; display: block; }
.topo nav { display: flex; gap: 22px; margin-left: auto; }
.topo nav a { color: #d9d2c3; text-decoration: none; font-size: 15px; }
.topo nav a:hover { color: var(--papel); box-shadow: inset 0 -2px 0 var(--goiaba); }

/* --- Botoes ---------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: var(--regua) solid var(--tinta);
  background: var(--placa);
  color: var(--tinta);
  font: 600 15px var(--texto);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.botao:hover { background: var(--papel-2); color: var(--tinta); }
.botao.primario { background: var(--sol); font-weight: 700; }
.botao.primario:hover { background: var(--sol-hover); }
.botao.grande { min-height: 52px; padding: 0 26px; font-size: 17px; box-shadow: var(--sombra); }
.botao.grande:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--tinta); }
.topo .botao.primario { border-color: var(--sol); }

/* --- Abertura -------------------------------------------------------------------- */
.abertura {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding-block: 72px 64px;
}
.abertura-texto { display: grid; gap: 22px; }
.selo {
  justify-self: start;
  font: 500 13px var(--mono);
  padding: 4px 10px;
  border: 1px solid var(--tinta);
  background: var(--placa);
}
.lead { font-size: 19px; color: var(--tinta-2); max-width: 54ch; }
.acoes { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 6px; }
.abertura-telas {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}
.abertura-telas img {
  border: var(--regua) solid var(--tinta);
  box-shadow: var(--sombra);
  background: var(--placa);
}
.abertura-telas img:nth-child(2) { transform: translateY(-28px); }

/* --- Passos ---------------------------------------------------------------------- */
.passos { padding-block: 48px; display: grid; gap: 28px; }
.passos ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--regua) solid var(--tinta);
}
.passos li { display: grid; gap: 6px; align-content: start; padding: 20px 20px 4px 0; }
.passos li + li { padding-left: 20px; border-left: 1px solid var(--fio); }
.passos .num { font: 500 13px var(--mono); color: var(--goiaba); }
.passos li span:last-child { color: var(--tinta-2); font-size: 15.5px; }

/* --- Locadoras ------------------------------------------------------------------- */
.locadoras { padding-block: 64px; display: grid; gap: 32px; }
.cabeca { display: grid; gap: 10px; max-width: 62ch; }
.cabeca p { color: var(--tinta-2); font-size: 18px; }
.recursos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--regua) solid var(--tinta);
  border-left: 1px solid var(--fio);
}
.recursos article {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px;
  background: var(--placa);
  border-right: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
}
.recursos p { color: var(--tinta-2); font-size: 15.5px; }
.painel { margin: 0; display: grid; gap: 10px; }
.painel img { border: var(--regua) solid var(--tinta); box-shadow: var(--sombra); }
.painel figcaption { font-size: 14px; color: var(--suave); }

/* --- Eventos --------------------------------------------------------------------- */
.eventos {
  padding-block: 64px;
  display: grid;
  gap: 28px;
  border-top: var(--regua) solid var(--tinta);
}
.beneficios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.beneficios li {
  display: grid;
  gap: 6px;
  padding: 18px;
  background: var(--placa);
  border: 1px solid var(--fio);
  border-top: 4px solid var(--goiaba);
  color: var(--tinta-2);
  font-size: 15.5px;
}
.beneficios strong { color: var(--tinta); font-size: 17px; }
.nota { color: var(--tinta-2); }

/* --- Contato --------------------------------------------------------------------- */
.contato {
  margin-block: 24px 72px;
  padding-block: 44px;
  display: grid;
  gap: 16px;
  background: var(--tinta);
  color: var(--papel);
  max-width: calc(var(--largura) - 40px);
  box-shadow: 8px 8px 0 var(--sol);
}
.contato p { color: #d9d2c3; max-width: 60ch; }
.contato .email { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.contato .email span { font: 500 clamp(18px, 2.4vw, 24px) var(--mono); color: var(--papel); user-select: all; overflow-wrap: anywhere; }
.contato .botao { border-color: var(--papel); }
.contato a { color: var(--papel); }

/* --- Rodape ---------------------------------------------------------------------- */
.rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-block: 24px 40px;
  border-top: 1px solid var(--fio);
  color: var(--suave);
  font-size: 14px;
}
.rodape nav { display: flex; gap: 18px; }
.rodape a { color: var(--suave); }

/* --- Celular --------------------------------------------------------------------- */
@media (max-width: 960px) {
  .abertura { grid-template-columns: minmax(0, 1fr); padding-block: 44px; }
  .recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passos ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passos li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .topo nav { display: none; }
  .topo .botao { margin-left: auto; min-height: 38px; padding: 0 12px; font-size: 14px; }
  .recursos, .beneficios, .passos ol { grid-template-columns: minmax(0, 1fr); }
  .passos li, .passos li + li { padding-left: 0; border-left: 0; border-bottom: 1px solid var(--fio); padding-bottom: 16px; }
  .abertura-telas img:nth-child(2) { transform: translateY(-14px); }
  .contato { margin-inline: 20px; padding-inline: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}