/* ============================================================
   MRC · Móveis Planejados — estilos
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --nogueira: #3D3833;
  --ambar:    #A6825E;
  --areia:    #D9CBB8;
  --offwhite: #FAF8F4;
  --branco:   #FFFFFF;

  --nogueira-soft: #57504860;
  --line: #e7ded0;

  /* materiais dos móveis 3D */
  --wood:       #c89f74;
  --wood-rib:   #b98d5f;
  --white-unit: #e6ded1;
  --sand:       #d3c3ac;
  --amber:      #A6825E;

  --ff-title: 'Marcellus', Georgia, serif;
  --ff-body:  'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --maxw: 1160px;
  --radius: 14px;
  --shadow: 0 18px 50px -22px rgba(61,56,51,.35);
  --shadow-sm: 0 8px 24px -14px rgba(61,56,51,.4);
  --ease: cubic-bezier(.22,.8,.28,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff-body);
  font-weight: 300;
  color: var(--nogueira);
  background: var(--offwhite);
  line-height: 1.65;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--ff-title); font-weight: 400; line-height: 1.12; }
em { font-style: normal; color: var(--ambar); }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }

.eyebrow {
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ambar); font-weight: 500; margin-bottom: .9rem;
}
.section-head { padding-block: clamp(56px, 9vw, 96px) 8px; }
.section-head.center { text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
.section-lead { max-width: 46ch; margin: 1.1rem auto 0; color: #6b625a; font-size: 1.05rem; }
.center .section-lead { margin-inline: auto; }

/* ---------- Botões ---------- */
.btn {
  --bg: var(--nogueira); --fg: var(--offwhite);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  background: var(--bg); color: var(--fg);
  font-family: var(--ff-body); font-weight: 500; font-size: .95rem;
  letter-spacing: .01em; padding: .85em 1.6em; border-radius: 100px;
  border: 1.5px solid var(--bg); cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-solid { --bg: var(--ambar); --fg: #fff; border-color: var(--ambar); }
.btn-solid:hover { --bg: #96734f; }
.btn-ghost { --bg: transparent; --fg: var(--nogueira); border-color: var(--areia); }
.btn-ghost:hover { --bg: #fff; }
.btn-lg { padding: 1.05em 2em; font-size: 1.02rem; }
.btn-sm { padding: .6em 1.2em; font-size: .85rem; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background .3s, box-shadow .3s, padding .3s;
  padding-block: 14px;
}
.site-header.scrolled {
  background: rgba(250,248,244,.9);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.header-inner { display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-mark { width: 38px; height: 38px; }
/* logo troca conforme o fundo (claro sobre o vídeo, escuro ao rolar) */
.brand-mark--dark { display: none; }
.site-header.scrolled .brand-mark--light { display: none; }
.site-header.scrolled .brand-mark--dark { display: block; }
.brand-word { font-family: var(--ff-body); font-weight: 600; letter-spacing: .18em; font-size: 1.15rem; color: #fff; transition: color .3s; }
.site-header.scrolled .brand-word { color: var(--nogueira); }
.nav { display: flex; gap: 28px; }
.nav a { font-size: .92rem; font-weight: 400; color: rgba(255,255,255,.82); position: relative; padding-block: 4px; transition: color .3s; }
.site-header.scrolled .nav a { color: #5b534b; }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: var(--ambar); transition: width .25s var(--ease);
}
.nav a:hover { color: #fff; }
.site-header.scrolled .nav a:hover { color: var(--nogueira); }
.nav a:hover::after { width: 100%; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 6px; cursor: pointer; }
.nav-toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .3s; }
.site-header.scrolled .nav-toggle span { background: var(--nogueira); }
.nav-toggle[aria-expanded="true"] span { background: var(--nogueira); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none; flex-direction: column; gap: 4px;
  background: rgba(250,248,244,.98); backdrop-filter: blur(12px);
  padding: 12px clamp(20px,5vw,48px) 22px; border-top: 1px solid var(--line);
}
.nav-mobile a { padding: 12px 4px; font-size: 1rem; border-bottom: 1px solid var(--line); }
.nav-mobile a.btn { border: 1.5px solid var(--ambar); margin-top: 14px; justify-content: center; }
.nav-mobile.open { display: flex; }

/* ============================================================
   HERÓI
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; background: var(--nogueira); }
/* vídeo de fundo */
.hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; /* nunca mostra/intercepta controles */
}
/* leve escurecimento extra para legibilidade do texto */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(45,41,37,.55) 0%, rgba(45,41,37,.15) 32%, rgba(45,41,37,.25) 62%, rgba(45,41,37,.6) 100%),
    radial-gradient(120% 80% at 50% 42%, transparent 40%, rgba(45,41,37,.35) 100%);
}
.hero-inner { position: relative; z-index: 2; padding-top: 90px; color: var(--offwhite); }
.hero .eyebrow { color: #d9b58c; }
.hero-title { font-size: clamp(1.95rem, 7.5vw, 5.2rem); letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.hero-title em { color: #e0b483; }
.hero-sub { max-width: 44ch; margin: 1.4rem auto 0; font-size: clamp(1.02rem, 2vw, 1.22rem); color: rgba(250,248,244,.9); text-shadow: 0 1px 16px rgba(0,0,0,.3); }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }
.hero-note { margin-top: 1.8rem; font-size: .9rem; color: rgba(217,203,184,.85); font-style: italic; }
/* botão secundário adaptado ao fundo escuro */
.hero .btn-ghost { --bg: transparent; --fg: #fff; border-color: rgba(250,248,244,.5); }
.hero .btn-ghost:hover { --bg: rgba(250,248,244,.12); border-color: #fff; }

/* ============================================================
   AMBIENTES + PALCO DA ANIMAÇÃO
   ============================================================ */
.ambientes { padding-bottom: clamp(40px, 8vw, 90px); }
.ambiente { padding-block: clamp(30px, 6vw, 70px); }
.ambiente.alt { background: linear-gradient(#fff, #f6f1e9); }
.ambiente-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.ambiente-grid.reverse .ambiente-copy { order: 2; }
.ambiente-copy h3 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin-bottom: .8rem; }
.ambiente-copy p { color: #6b625a; max-width: 42ch; }
.feature-list { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: flex; flex-wrap: wrap; gap: 10px 10px; }
.feature-list li {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .82rem; font-weight: 400; line-height: 1;
  padding: .62em 1.05em .62em .9em; border-radius: 100px;
  border: 1px solid var(--areia); color: var(--nogueira); background: #fff;
  transition: color .3s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  cursor: default;
}
/* ponto indicador (areia -> âmbar quando ativo/hover) */
.feature-list li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--areia); flex: 0 0 auto;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
/* toque interativo ao passar o mouse */
.feature-list li:hover {
  border-color: var(--ambar); transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.feature-list li:hover::before { background: var(--ambar); transform: scale(1.25); }
/* estado ativo durante a animação: nogueira (distinto do botão âmbar) */
.feature-list li.on {
  color: var(--offwhite); background: var(--nogueira); border-color: var(--nogueira);
  transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.feature-list li.on::before { background: var(--ambar); transform: scale(1.25); }

/* -- palco: desenho em perspectiva que vira a foto real --
   Todas as camadas (papel, foto-fantasma, traçado SVG, foto final)
   usam o MESMO enquadramento da foto (proporção 300x424 ~ papel A),
   então o desenho encaixa exatamente sobre o ambiente construído. */
.stage-wrap { width: 100%; max-width: 460px; margin-inline: auto; }
.stage {
  position: relative; width: 100%; aspect-ratio: 300 / 424;
  border-radius: var(--radius); overflow: hidden;
  background: #fffdf8;
  box-shadow: var(--shadow); border: 1px solid var(--line);
}
.stage > * { position: absolute; inset: 0; }

/* 1 · papel milimetrado (a prancheta) */
.paper {
  background:
    linear-gradient(rgba(166,130,94,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166,130,94,.14) 1px, transparent 1px),
    #fffdf8;
  background-size: 22px 22px, 22px 22px, 100% 100%;
  transition: opacity .6s;
}
.stage[data-step="4"] .paper { opacity: 0; }

/* 2 · foto-fantasma: a própria foto em tom de projeto (garante alinhamento) */
.ghost {
  background-size: cover; background-position: center;
  filter: grayscale(1) sepia(.35) brightness(1.06) contrast(.92);
  opacity: 0; transition: opacity 1s var(--ease), filter 1s var(--ease);
}
.stage[data-step="2"] .ghost { opacity: .32; }
.stage[data-step="3"] .ghost { opacity: .5; filter: grayscale(.4) sepia(.15) brightness(1.03); }
.stage[data-step="4"] .ghost { opacity: 0; }

/* 3 · traçado do projeto (linhas + preenchimento de materiais) */
.sketch { width: 100%; height: 100%; }
/* linhas: desenham sozinhas (stroke-dashoffset) */
.sketch .ln {
  fill: none; stroke: var(--nogueira); stroke-width: 1.4;
  stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s var(--ease);
  vector-effect: non-scaling-stroke;
}
.sketch .ln.amber { stroke: var(--ambar); }
.sketch .ln.thin  { stroke-width: .8; opacity: .8; }
.sketch .ln.guide { stroke: var(--areia); stroke-width: .7; stroke-dasharray: 3 3; opacity: .7; }
.stage:not([data-step="0"]) .sketch .ln:not(.guide) { stroke-dashoffset: 0; }
.stage[data-step="2"] .sketch .ln,
.stage[data-step="3"] .sketch .ln { stroke: var(--ambar); }
/* guias (cotas) aparecem só no passo do projeto */
.sketch .ln.guide { transition: opacity .5s; opacity: 0; }
.stage[data-step="1"] .sketch .ln.guide { opacity: .7; }

/* preenchimento de materiais: encaixam com escada de atraso */
.sketch .fill {
  opacity: 0; transform-box: fill-box; transform-origin: center bottom;
  transform: translateY(7px) scaleY(.6);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.stage[data-step="3"] .sketch .fill,
.stage[data-step="4"] .sketch .fill { opacity: .74; transform: none; }
.sketch .fill.glow { filter: drop-shadow(0 0 5px rgba(166,130,94,.9)); }
.sketch .washes > :nth-child(1) { transition-delay: .04s; }
.sketch .washes > :nth-child(2) { transition-delay: .16s; }
.sketch .washes > :nth-child(3) { transition-delay: .28s; }
.sketch .washes > :nth-child(4) { transition-delay: .40s; }
.sketch .washes > :nth-child(5) { transition-delay: .52s; }
.sketch .washes > :nth-child(6) { transition-delay: .64s; }
.sketch .washes > :nth-child(7) { transition-delay: .76s; }
.sketch .washes > :nth-child(8) { transition-delay: .88s; }
.sketch .washes > :nth-child(n+9) { transition-delay: 1s; }
/* no passo final o traçado some para a foto brilhar */
.stage[data-step="4"] .sketch { opacity: 0; transition: opacity .8s .2s; }

/* 4 · foto real */
.reveal {
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.05);
  transition: opacity 1s var(--ease), transform 1.3s var(--ease);
  pointer-events: none;
}
.stage[data-step="4"] .reveal { opacity: 1; transform: scale(1); }

/* materiais (cores de preenchimento) */
.m-wood  { fill: #c69c70; }
.m-wood2 { fill: #b78a5c; }
.m-white { fill: #eae3d7; }
.m-sand  { fill: #d6c7af; }
.m-amber { fill: #b98e60; }
.m-dark  { fill: #4a443d; }
.m-glass { fill: #bcd2d8; opacity: .5; }
.m-floor { fill: #c19a6b; }

/* UI do palco */
.stage-ui { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.stage-status {
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ambar);
  font-weight: 500; display: inline-flex; align-items: center; gap: 8px;
}
.stage-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 0 0 rgba(166,130,94,.5); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(166,130,94,.5); } 70% { box-shadow: 0 0 0 8px rgba(166,130,94,0); } 100% { box-shadow: 0 0 0 0 rgba(166,130,94,0); } }
.stage-replay {
  font-family: var(--ff-body); font-size: .8rem; color: #8a8178;
  background: none; border: 1px solid var(--line); border-radius: 100px;
  padding: .4em 1em; cursor: pointer; transition: .25s;
}
.stage-replay:hover { color: var(--nogueira); border-color: var(--areia); background: #fff; }

/* ============================================================
   NÚMEROS DE PROVA
   ============================================================ */
.proof { background: var(--nogueira); color: var(--offwhite); }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding-block: clamp(46px, 7vw, 74px); gap: 24px; }
.proof-item { display: flex; flex-direction: column; gap: 6px; position: relative; }
.proof-item + .proof-item::before { content: ""; position: absolute; left: 0; top: 12%; height: 76%; width: 1px; background: rgba(217,203,184,.22); }
.proof-num { font-family: var(--ff-title); font-size: clamp(2.4rem, 6vw, 3.6rem); color: #fff; }
.proof-label { font-size: .92rem; letter-spacing: .06em; color: var(--areia); }

/* ============================================================
   DIFERENCIAIS / DEPOIMENTOS (cards)
   ============================================================ */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-bottom: clamp(50px, 8vw, 90px); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-ico { font-size: 1.7rem; width: 56px; height: 56px; display: grid; place-items: center; background: #f6efe6; border-radius: 14px; margin-bottom: 16px; }
.card h3 { font-size: 1.4rem; margin-bottom: .5rem; }
.card p { color: #6b625a; font-size: .98rem; }

.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 18px; }
.quote > p { color: #4f4841; font-size: 1.02rem; }
.quote footer { display: flex; flex-direction: column; }
.quote footer strong { font-weight: 500; }
.quote footer span { font-size: .85rem; color: #9a9088; }
.quote::before { content: "”"; font-family: var(--ff-title); font-size: 3rem; line-height: .4; color: var(--areia); }

/* ============================================================
   COMO FUNCIONA
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-bottom: clamp(50px, 8vw, 90px); }
.step { position: relative; padding-top: 12px; }
.step-n { font-family: var(--ff-title); font-size: 2.6rem; color: var(--areia); display: block; line-height: 1; margin-bottom: 8px; }
.step h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.step p { color: #6b625a; font-size: .95rem; }
.step:not(:last-child)::after { content: ""; position: absolute; top: 26px; right: -11px; width: 22px; height: 1.5px; background: var(--areia); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { max-width: 780px; margin-inline: auto; padding-bottom: clamp(50px, 8vw, 90px); }
.faq-list details { border-bottom: 1px solid var(--line); padding: 6px 4px; }
.faq-list summary {
  cursor: pointer; list-style: none; font-family: var(--ff-title); font-size: 1.15rem;
  padding: 16px 36px 16px 4px; position: relative; color: var(--nogueira);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 8px; top: 14px; font-size: 1.5rem; color: var(--ambar); transition: transform .3s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 4px 18px; color: #6b625a; }

/* ============================================================
   CTA FINAL + RODAPÉ
   ============================================================ */
.cta-final { background: var(--nogueira); color: var(--offwhite); text-align: center; }
.cta-inner { padding-block: clamp(60px, 10vw, 110px); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cta-mark { width: 62px; height: 62px; }
.cta-final h2 { font-size: clamp(2rem, 5vw, 3.2rem); color: #fff; }
.cta-final p { color: var(--areia); max-width: 44ch; }
.cta-final .btn { margin-top: 8px; }

.site-footer { background: #f2ece2; color: #5b534b; padding-top: clamp(48px, 7vw, 72px); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer-logo { width: 150px; height: auto; }
.footer-tag { font-family: var(--ff-title); margin-top: 12px; font-size: 1.05rem; }
.footer-col h4 { font-family: var(--ff-body); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ambar); margin-bottom: 14px; }
.footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: .95rem; }
.footer-col a:hover { color: var(--nogueira); }
.footer-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 22px; border-top: 1px solid var(--line); font-size: .82rem; color: #9a9088; }

/* ============================================================
   BOTÃO WHATSAPP FIXO
   ============================================================ */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: inline-flex; align-items: center; gap: 0;
  background: #25D366; color: #fff; border-radius: 100px;
  padding: 14px; box-shadow: 0 10px 30px -8px rgba(37,211,102,.6);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.wa-float:hover { transform: translateY(-3px) scale(1.03); }
.wa-float-txt { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 500; font-size: .95rem; transition: max-width .4s var(--ease), margin .4s var(--ease); }
.wa-float:hover .wa-float-txt { max-width: 120px; margin-left: 8px; margin-right: 4px; }

/* ============================================================
   ANIMAÇÃO DE ENTRADA (reveal on scroll)
   ============================================================ */
.reveal-up { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-up.in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
/* Tablet e abaixo: navegação vira hambúrguer, grades reduzem colunas */
@media (max-width: 900px) {
  .nav, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .ambiente-grid, .ambiente-grid.reverse { grid-template-columns: 1fr; }
  .ambiente-grid.reverse .ambiente-copy { order: 0; }
  .ambiente-copy { text-align: center; }
  .ambiente-copy p, .feature-list { margin-inline: auto; }
  .feature-list { justify-content: center; }
  .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; }
  .step:not(:last-child)::after { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
/* Celular */
@media (max-width: 600px) {
  .cards-3 { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr; gap: 30px; }
  .proof-item + .proof-item::before { display: none; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: center; text-align: center; }
  .wa-float-txt { max-width: 120px; margin-left: 8px; margin-right: 4px; }
  .hero-actions .btn { width: 100%; }
  .site-header { padding-block: 10px; }
  .brand-mark { width: 34px; height: 34px; }
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto; }
}