/* Tema "idee" — tokens extraídos do site idee.haus REAL:
   Visby CF Demi Bold (texto/títulos) + Avenir Black (números/selos),
   vermelho #FE1817 (asas, link ativo), âmbar rgb(254,183,77) (seção vitrine),
   cinza #A6A6A6 (títulos de hero e nav), grafite rgb(46,53,56), rodapé preto. */
@font-face {
  font-family: "Visby CF Demi Bold";
  src: url("/assets/fonts/VisbyCF-DemiBold.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Avenir Black";
  src: url("/assets/fonts/Avenir-Black.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
:root {
  --red: #FE1817;
  --amber: rgb(254, 183, 77);
  --graphite: rgb(46, 53, 56);
  --gold: rgb(222, 187, 31);
  --gray: rgb(166, 166, 166);
  --ink: rgb(0, 0, 0);
  --paper: #ffffff;
  --font-main: "Visby CF Demi Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-black: "Avenir Black", "Visby CF Demi Bold", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  position: relative;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.st-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.st-link:hover { color: var(--red); }

/* ── Header: nav transparente SOBRE o hero ── */
.st-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 26px 6%;
}
.st-nav { display: flex; gap: clamp(16px, 2.6vw, 34px); flex-wrap: wrap; justify-content: center; }
.st-nav a {
  text-decoration: none; font-size: 15px; color: var(--gray);
  padding-bottom: 4px; border-bottom: 2px solid transparent; transition: color .2s;
}
.st-nav a:hover { color: var(--red); }
.st-nav a.on { color: var(--red); border-bottom-color: var(--red); }
.st-header-ig { position: absolute; right: 6%; top: 24px; color: #eaeaea; opacity: .9; }
.st-header-ig:hover { color: var(--red); }

/* ── Hero ── */
.st-hero {
  position: relative; background-size: cover; background-position: center;
  display: flex;
}
.st-hero--tall { min-height: 100vh; min-height: 100svh; }
.st-hero--med { min-height: 84vh; }
.st-hero-overlay { position: absolute; inset: 0; }
.st-hero-content {
  position: relative; z-index: 2; width: 100%; max-width: 1300px; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 110px 6% 8vh;
}
.st-hero--center .st-hero-content { align-items: center; justify-content: center; text-align: center; padding-bottom: 6vh; }
.st-hero--right .st-hero-content { align-items: flex-end; text-align: left; justify-content: center; }
.st-hero--right .st-hero-content > * { max-width: 380px; }
.st-hero--left .st-hero-content { align-items: flex-start; }
.st-wings { width: clamp(84px, 8vw, 120px); margin-bottom: 2px; }
.st-hero-logo { width: clamp(260px, 34vw, 470px); margin-bottom: 34px; }
.st-hero-title {
  font-size: clamp(52px, 7.5vw, 96px); font-weight: 400; line-height: .95;
  color: var(--gray); margin: 0;
}
.st-hero-sub { color: rgba(255,255,255,.88); font-size: clamp(14px, 1.2vw, 17px); line-height: 1.7; margin: 16px 0 22px; }
.st-hero .st-btn { margin-top: 10px; }

/* ── Seções ── */
.st-section { padding: clamp(44px, 6vw, 100px) 6%; }
.st-inner { max-width: 1224px; margin: 0 auto; }
.st-style-inner { margin: 0 auto; }

/* Tipografia */
.st-h2 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 400; line-height: 1.15; margin: 0 0 18px; }
.st-h3 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 400; line-height: 1.2; margin: 6px 0 16px; }
.st-body { font-size: clamp(14px, 1.15vw, 16px); line-height: 1.85; margin: 0 0 16px; max-width: 860px; color: rgb(58,58,58); }
.st-num { font-family: var(--font-black); font-size: clamp(40px, 4.5vw, 64px); line-height: 1; color: var(--ink); }

/* Botões (padrão do site: preto/branco; variante grafite/dourado) */
.st-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 16px 46px; background: #000; color: #fff;
  border: 1px solid #000; text-decoration: none; font-size: 15px;
  letter-spacing: .02em; cursor: pointer; font-family: var(--font-main);
  transition: background .2s, color .2s, border-color .2s;
}
.st-btn:hover { background: var(--graphite); border-color: var(--graphite); }
.st-btn--gold { background: var(--graphite); color: var(--gold); border-color: var(--gold); }
.st-btn--gold:hover { background: rgb(26,26,26); color: #fff; border-color: rgb(26,26,26); }

/* Vitrine de serviços (seção âmbar da home) */
.st-teaser-intro { text-align: center; max-width: 640px; margin: 0 auto clamp(40px, 5vw, 80px); font-size: clamp(14px, 1.2vw, 17px); line-height: 1.75; }
.st-teaser-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 70px); align-items: start; }
.st-teaser-big { font-size: clamp(52px, 6.5vw, 92px); font-weight: 400; margin: 0 0 18px; line-height: .95; }
.st-teaser-items { display: grid; gap: clamp(22px, 3vw, 44px); padding-top: 10px; }
.st-teaser-item { display: flex; align-items: baseline; gap: 22px; }
.st-teaser-num { font-family: var(--font-black); font-size: clamp(30px, 3vw, 44px); line-height: 1; }
.st-teaser-title { font-size: clamp(16px, 1.4vw, 20px); }
.st-teaser .st-btn { margin-top: 16px; }
@media (max-width: 800px) { .st-teaser-grid { grid-template-columns: 1fr; } }

/* Bloco numerado (imagem à esquerda) */
.st-numfeat-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.st-numfeat-grid.has-img { grid-template-columns: 1fr 1.15fr; }
.st-numfeat-img img { width: 100%; object-fit: cover; }
.st-numfeat .st-h3 { margin-top: 14px; }
.st-numfeat .st-btn { margin-top: 8px; }
@media (max-width: 800px) { .st-numfeat-grid.has-img { grid-template-columns: 1fr; } }

/* Título + 2 colunas (sobre) */
.st-cols-grid { display: grid; grid-template-columns: .8fr 1fr 1fr; gap: clamp(24px, 3.5vw, 60px); align-items: start; }
.st-cols-grid .st-h3 { margin-top: 0; }
@media (max-width: 860px) { .st-cols-grid { grid-template-columns: 1fr; } }

/* Duas imagens */
.st-imgrow-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: stretch; }
.st-imgrow-grid img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .st-imgrow-grid { grid-template-columns: 1fr; } }

/* Selo / frase forte */
.st-statement { text-align: center; }
.st-statement-img { width: clamp(140px, 16vw, 210px); margin: 0 auto 10px; }
.st-statement-title { font-family: var(--font-black); font-size: clamp(22px, 2.6vw, 34px); letter-spacing: .04em; margin: 0; }

/* CTA */
.st-cta { text-align: inherit; }

/* Contato: mapa + linhas */
.st-contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 3.5vw, 56px); align-items: center; margin-top: 14px; }
.st-contact-map iframe { width: 100%; height: 320px; border: 0; }
@media (max-width: 800px) { .st-contact-grid { grid-template-columns: 1fr; } }

/* Formulário */
.st-form { display: grid; gap: 16px; max-width: 620px; margin-top: 10px; }
.st-form label { display: grid; gap: 6px; font-size: 14px; }
.st-form input, .st-form textarea {
  font-family: var(--font-main); font-size: 16px; padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.35); background: #fff; color: var(--ink);
}
.st-form input:focus, .st-form textarea:focus { outline: 2px solid var(--amber); border-color: var(--amber); }
.st-form button { justify-self: start; }
.st-form-status { min-height: 1.2em; font-size: 15px; margin: 0; }
.st-form-status.ok { color: rgb(20, 120, 60); }
.st-form-status.err { color: rgb(170, 40, 40); }

/* Rich text */
.st-richtext .st-h3 { font-size: clamp(28px, 3.4vw, 46px); margin-bottom: 22px; }

/* ── Footer preto ── */
.st-footer { background: #000; color: #fff; }
.st-footer-inner {
  max-width: 1224px; margin: 0 auto; padding: clamp(40px, 5vw, 70px) 6%;
  display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.st-footer-logo { font-size: 24px; }
.st-footer-taglines { margin-top: 56px; font-size: 14px; color: rgba(255,255,255,.8); line-height: 1.6; }
.st-footer-right { text-align: right; font-size: 14px; }
.st-footer-right .st-link { color: #fff; }
.st-footer-lines { margin-top: 22px; color: rgba(255,255,255,.85); line-height: 1.65; }
@media (max-width: 640px) { .st-footer-right { text-align: left; } }