:root {
  --ivory: #F8F5EE;
  --ivory-soft: #F2EDE2;
  --taupe: #D7CABD;
  --graphite: #2E2E2E;
  --champagne: #C9B087;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 48px;
  --space-section: 68px;

  --max-width: 1120px;
  --measure: 640px;

  /* Container global: header e hero usam EXATAMENTE esta única variável
     como padding lateral — uma só coordenada de coluna para todo o site. */
  --page-padding: 7.8vw;
}
@media (max-width: 1024px) {
  :root { --page-padding: 6vw; }
}
@media (max-width: 480px) {
  :root { --page-padding: 24px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ivory);
  color: var(--graphite);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: var(--serif); font-weight: 500; line-height: 1.25; margin: 0; color: var(--graphite); }
p { margin: 0 0 var(--space-2); }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-3); }
@media (min-width: 900px) { .wrap { padding: 0 var(--space-4); } }

a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

/* Botões */
.btn {
  display: inline-block; font-family: var(--sans); font-size: 16px; font-weight: 500;
  text-decoration: none; padding: 14px 28px; border-radius: 4px; border: 1px solid var(--graphite);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn--primary { background: var(--graphite); color: var(--ivory); }
.btn--primary:hover { background: #1c1c1c; }
.btn--ghost { background: transparent; color: var(--graphite); border-color: var(--graphite); }
.btn--ghost:hover { background: var(--graphite); color: var(--ivory); }
.btn--small { padding: 8px 18px; font-size: 14px; }
.link-cta { color: var(--graphite); text-decoration: underline; text-decoration-color: var(--champagne); text-underline-offset: 4px; }
.link-cta:hover { text-decoration-color: var(--graphite); }

/* Logo real — sem caixa, sem moldura, integrada ao fundo ivory */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { display: block; height: auto; }

/* Fotografia editorial — sem borda, sem moldura, sem sombra */
.photo-slot {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ivory-soft);
  object-fit: cover;
}
.photo-slot--band { aspect-ratio: 21 / 5; object-position: center; }
.photo-slot--tall { aspect-ratio: 4 / 5; }
.photo-slot--square { aspect-ratio: 1 / 1; max-width: 220px; margin: 0 auto; }
/* Bloco único header + hero — mesmo ambiente visual ivory.
   Sem fotografia: o único elemento de fundo é a marca-d'água da logo (.hero__watermark). */
.hero-block {
  position: relative;
  background: var(--ivory);
}

/* Header — grid único de três colunas (logo / menu / botão), mesmo
   container horizontal do hero (--page-padding). align-items:center é o
   único mecanismo de alinhamento vertical dos três itens da grid — nenhum
   margin-top/position/transform "corrige" nada aqui.

   A logo em si contém o símbolo da caneta acima da palavra "REVISARTE",
   então centralizar a IMAGEM inteira não centraliza a PALAVRA. Em vez de
   compensar isso com um deslocamento manual, a estrutura muda: `.logo`
   (o item da grid) tem sua própria altura fixada para corresponder à
   faixa vertical real que a palavra "REVISARTE" ocupa dentro da imagem
   (medido nos pixels do arquivo), e a imagem completa fica ancorada pela
   base desse item, ultrapassando-o visualmente por cima (overflow
   visível) — o símbolo "flutua" acima, exatamente como o pedido descreve.
   Assim o item da grid que representa a logo tem seu centro genuinamente
   no centro da palavra, e o mesmo align-items:center que centraliza o
   menu e o botão passa a centralizar a palavra "REVISARTE" também. */
.site-header { padding: 0; position: relative; z-index: 1; background: var(--ivory); }
.site-header__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  height: 96px;
  padding-top: 22px;
  padding-bottom: 0;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 180px 1fr auto;
  align-items: center;
}

/* Ritmo vertical: logo/menu/botão ~7px mais abaixo do que estavam na
   versão anterior (header 104px, centralização pura) — conseguido só com
   o padding assimétrico do próprio container (padding-top:22px /
   padding-bottom:0 dentro de uma altura fixa de 96px), nunca com offset
   por item. O grid tem uma única linha implícita que ocupa toda a caixa
   de conteúdo (96px − 22px = 74px); o mesmo align-items:center desloca o
   eixo de centralização dos três itens igualmente, preservando o
   alinhamento entre eles (medido: centro da palavra REVISARTE, do menu e
   do botão caem no mesmo pixel, ~59px a partir do topo do header).
   Isso também resolve o corte do símbolo da caneta sem hack: a imagem
   (56.8px de altura) fica ancorada pela base do item .logo, cujo centro
   agora está em ~59px, dando folga de ~9.8px acima do símbolo e ~29px
   abaixo da imagem até o fim do header — nenhum corte em nenhuma borda. */
.site-header__inner .logo {
  grid-column: 1;
  justify-self: start;
  margin: 0;
  position: relative;
  width: 120px;
  height: 15.3px; /* faixa vertical da palavra "REVISARTE" dentro da logo, a 120px de largura */
  overflow: visible;
}
.logo img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 120px;
  height: auto;
  display: block;
}

.site-nav {
  grid-column: 2;
  justify-self: start;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 30px;
  min-width: 0;
}
.site-nav a {
  position: relative;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--graphite);
  transition: color 0.2s ease;
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 22px;
  height: 1px;
  background: var(--champagne);
  opacity: 0.45;
  transition: opacity 0.2s ease;
}
.site-nav a:hover { color: var(--champagne); }
.site-nav a:hover::after,
.site-nav a.is-active::after { opacity: 1; }

.site-header__inner .hero-block__cta { grid-column: 3; justify-self: end; margin: 0; }

/* Único breakpoint de responsividade real: abaixo da largura em que o menu
   completo (14px/0.12em/gap 30px) deixa de caber entre a coluna da logo
   (180px) e o botão dentro do --page-padding fluido, ele passa para a
   versão simplificada (logo + botão) — medido diretamente, não estimado. */
@media (max-width: 1180px) {
  .site-nav { display: none; }
  .site-header__inner { grid-template-columns: auto 1fr auto; }
}

/* CTAs do header + hero — classes dedicadas, não reaproveitam .btn (não afeta o CTA final) */
.hero-block__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hero-block__cta--ghost {
  letter-spacing: 0.12em;
  width: 250px;
  height: 50px;
  justify-content: center;
  background: transparent;
  color: var(--graphite);
  border: 1px solid var(--graphite);
}
.hero-block__cta--ghost:hover { color: var(--champagne); border-color: var(--champagne); }
.hero-block__cta--solid {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 16px 28px;
  background: var(--graphite);
  color: var(--ivory);
  border: 1px solid var(--graphite);
}
.hero-block__cta--solid:hover { background: #4a4030; border-color: #4a4030; }
.icon-whatsapp { flex-shrink: 0; }

@media (max-width: 900px) {
  .hero-block__cta--ghost { width: auto; height: 42px; padding: 0 14px; font-size: 10.5px; letter-spacing: 0.03em; gap: 5px; }
  .hero-block__cta--ghost .icon-whatsapp { width: 12px; height: 12px; }
}
@media (max-width: 760px) {
  .hero-block__cta--ghost { height: 40px; padding: 0 12px; font-size: 10px; letter-spacing: 0.02em; gap: 4px; }
  .hero-block__cta--ghost .icon-whatsapp { width: 11px; height: 11px; }
}
@media (max-width: 400px) {
  .hero-block__cta--ghost { height: 36px; padding: 0 9px; font-size: 8.5px; letter-spacing: 0; gap: 3px; }
  .hero-block__cta--ghost .icon-whatsapp { width: 10px; height: 10px; }
}

/* Hero — mesmo container horizontal do header: var(--page-padding) nos dois lados. */
.hero { position: relative; z-index: 1; padding-top: 42px; padding-bottom: 56px; padding-left: var(--page-padding); padding-right: var(--page-padding); overflow: visible; }
.hero__inner { position: relative; z-index: 1; margin: 0; max-width: 600px; text-align: left; }

/* Marca-d'água da RevisArte — SEMPRE top:50% (nunca desce, nunca vira
   rodapé). A régua fixa (left:72%) só é segura acima de ~1330px: abaixo
   disso o título ocupa cada vez mais a largura do hero e passaria por
   trás do texto se a marca-d'água mantivesse os mesmos 520px partindo de
   72%. Por isso, abaixo de 1330px ela passa a ser ancorada por `right`
   (distância fixa da borda direita do hero) com largura reduzida por
   faixa — cada valor foi medido (posição real do título em cada faixa),
   não estimado, para garantir zero sobreposição com o texto mantendo
   top:50% em todas as faixas. */
.hero__watermark {
  position: absolute;
  z-index: 0;
  left: 72%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  max-width: 38vw;
  height: auto;
  opacity: 0.10;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 1329px) {
  .hero__watermark {
    left: auto;
    right: 51px;
    top: 50%;
    transform: translateY(-50%);
    width: 260px;
    max-width: none;
    opacity: 0.10;
  }
}
@media (max-width: 1024px) {
  .hero__watermark {
    right: 16px;
    width: 90px;
    opacity: 0.095;
  }
}
@media (max-width: 768px) {
  .hero__watermark {
    right: 9px;
    width: 20px;
    opacity: 0.08;
  }
}
@media (max-width: 640px) {
  .hero__watermark {
    right: 7px;
    width: 10px;
    opacity: 0.05;
  }
}
.hero__title {
  font-size: clamp(40px, 6.4vw, 70px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 30px;
}
.hero__title-line1 { color: var(--graphite); font-weight: 500; }
.hero__title-line2 { color: var(--champagne); font-style: italic; font-weight: 400; }
.hero__subtitle {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  max-width: 620px;
  color: var(--graphite);
  margin-bottom: 30px;
}
@media (max-width: 640px) {
  .hero { padding-top: 48px; padding-bottom: 40px; padding-left: var(--page-padding); padding-right: var(--page-padding); }
  .hero__subtitle { font-size: 17px; line-height: 1.6; }
}

/* Intro / posicionamento */
.intro { background: var(--taupe); padding: var(--space-4) 0; }
.intro__inner { max-width: var(--measure); }
.intro__lead { font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.35; color: var(--graphite); margin-bottom: var(--space-2); }
.intro__support { font-size: 18px; line-height: 1.65; color: var(--graphite); }

/* Respiro fotográfico (banda larga) */
.breather { padding: 32px 0; }

/* Serviço — sem bloco escuro; grafite só em título/texto */
.service { padding: 16px 0 var(--space-section); }
.service__inner { max-width: var(--measure); }
.service__title { font-size: 30px; margin-bottom: var(--space-3); }
.service__investment { font-size: 16px; color: #5a5a5a; }

/* Depoimentos */
.testimonials { background: var(--ivory-soft); padding: var(--space-section) 0 44px; }
.testimonials__inner { max-width: 760px; }
.testimonials__title { font-size: 30px; margin-bottom: var(--space-1); }
.testimonials__lead { font-family: var(--sans); font-size: 16px; color: #5a5a5a; margin-bottom: 28px; }

.testimonials__carousel { position: relative; }
.testimonials__viewport { overflow: hidden; transition: height 0.25s ease; }
.testimonials__track {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
}
.testimonials__track::-webkit-scrollbar { display: none; }

.testimonial {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  padding: 0 2px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 130px;
}
.testimonial::before {
  content: '\201C';
  display: block;
  font-family: var(--serif);
  font-size: 60px;
  line-height: 1;
  color: var(--champagne);
  opacity: 0.55;
  margin-bottom: var(--space-1);
}
.testimonial__quote {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.45;
  color: var(--graphite);
  margin: 0 0 var(--space-3);
}
.testimonial__meta { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.testimonial__name { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--graphite); font-style: normal; }
.testimonial__role { font-family: var(--sans); font-weight: 400; font-size: 13px; color: #6b6b6b; font-style: normal; }

.testimonials__nav { display: flex; align-items: center; gap: 18px; margin-top: var(--space-4); }
.testimonials__arrow {
  background: none; border: none; cursor: pointer; padding: 4px 6px; line-height: 1;
  font-family: var(--sans); font-size: 18px; color: var(--graphite);
  transition: opacity 0.2s ease;
}
.testimonials__arrow:hover:not(:disabled) { opacity: 0.65; }
.testimonials__arrow:disabled { opacity: 0.3; cursor: default; }
.testimonials__count { font-family: var(--sans); font-size: 13px; color: #8a8378; letter-spacing: 0.03em; }

@media (max-width: 640px) {
  .testimonial__quote { font-size: 20px; }
  .testimonial::before { font-size: 46px; }
  .testimonial { min-height: 150px; }
  .photo-slot--band { aspect-ratio: 3 / 1; }
}

/* Método */
.method { background: var(--ivory-soft); padding: var(--space-section) 0; }
.method__inner { display: grid; gap: var(--space-4); }
.method__lead { font-size: 19px; max-width: var(--measure); margin-bottom: var(--space-3); }
.method__steps { list-style: none; margin: 0; padding: 0; }
.method__steps li {
  display: flex; gap: var(--space-2); align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid rgba(215,202,189,0.6);
}
.method__steps li:first-child { border-top: 1px solid rgba(215,202,189,0.6); }
.method__number { font-family: var(--sans); font-size: 13px; color: #8a8378; min-width: 22px; }
.method__step strong { font-family: var(--serif); font-weight: 500; }
@media (min-width: 860px) { .method__inner { grid-template-columns: 1fr 0.65fr; align-items: center; } }

/* Autoridade */
.authority { padding: var(--space-section) 0; }
.authority__inner { display: grid; gap: var(--space-3); max-width: 720px; margin: 0 auto; text-align: center; }
.authority__brand { font-family: var(--serif); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: #6b6b6b; margin-bottom: var(--space-1); }
.authority__signature { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--graphite); margin-bottom: var(--space-2); }
.authority__text p:last-child { font-size: 17px; color: #4a4a4a; max-width: var(--measure); margin-left: auto; margin-right: auto; }

/* FAQ */
.faq { background: var(--ivory-soft); padding: var(--space-section) 0; }
.faq__inner { max-width: var(--measure); }
.faq__title { font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.25; margin: 0 0 32px; }
.faq__item { border-bottom: 1px solid rgba(215,202,189,0.6); padding: var(--space-2) 0; }
.faq__item summary { font-family: var(--serif); font-size: 19px; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; float: right; font-family: var(--sans); color: var(--champagne); }
.faq__item[open] summary::after { content: '–'; }
.faq__item p { margin-top: var(--space-2); font-size: 17px; color: #4a4a4a; }

/* Chamada final */
.closing { background: var(--taupe); padding: var(--space-section) 0; text-align: center; }
.closing__text { font-family: var(--serif); font-size: 26px; max-width: 560px; margin: 0 auto var(--space-3); }

/* Footer */
.site-footer { padding: var(--space-3) 0; }
.site-footer__inner { text-align: center; }
.site-footer__logo { display: block; width: 155px; height: auto; margin: 0 auto 28px; }
.site-footer__contact { font-size: 14px; color: #6b6b6b; }
.site-footer__contact a { text-decoration: none; }
.site-footer__contact a:hover { text-decoration: underline; }
.site-footer__contact span { margin: 0 var(--space-1); }
.site-footer__copy { font-size: 12px; color: #9a9a9a; margin-top: var(--space-1); }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .service, .testimonials, .method, .authority, .faq, .closing { padding: 36px 0; }
  .intro, .breather { padding: var(--space-3) 0; }
  .intro__lead { font-size: 22px; }
  .closing__text { font-size: 22px; }
}