/* ==========================================================================
   Brazilian's Wood — design espelhado de https://brazilianswood.framer.website/
   Todos os valores abaixo foram extraídos do CSS computado do site publicado
   (Chromium 1440 / 1000 / 390px). Ver README para a tabela de referência.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTES
   LEMON MILK Pro FTR é fonte proprietária, servida pela CDN do Framer —
   o mesmo arquivo que o site publicado usa.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "LEMON MILK Pro FTR";
  src: url("https://framerusercontent.com/assets/cKhsyzw6CD3TWVsMsTM097Jls.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* cores — hex exatos do site publicado */
  --c-black:       #000000;  /* topo do gradiente do hero        */
  --c-hero-end:    #262626;  /* base do gradiente do hero        */
  --c-white:       #FFFFFF;  /* fundo do site + texto do hero    */
  --c-ink:         #0D0D0C;  /* títulos h2/h3 + texto do botão   */
  --c-muted:       #757575;  /* subtítulos de seção              */
  --c-num:         #313439;  /* numerais 01/02/03                */
  --c-card-title:  #1E2024;  /* título do card de produto        */
  --c-card-desc:   #7F838A;  /* descrição do card de produto     */
  --c-green:       #2B4C1B;  /* link de e-mail no contato        */
  --c-rust:        #7B370F;  /* título "Social" no rodapé        */
  --c-cream:       #F3EFE6;  /* fundo do botão                   */
  --c-link:        #0099FF;  /* link de crédito no rodapé        */
  --c-hairline:    rgba(0, 0, 0, 0.10);

  /* tipografia */
  --f-display: "LEMON MILK Pro FTR", "Trebuchet MS", sans-serif;
  --f-serif:   "Times New Roman", Times, serif;
  --f-ui:      "Inter", system-ui, sans-serif;
  --f-contact: "Mulish", system-ui, sans-serif;
  --f-btn:     "General Sans", "Inter", system-ui, sans-serif;

  /* medidas */
  --container: 1200px;
  --pad-x: 40px;
  --pad-y: 100px;

  /* mola do Framer: type spring, bounce 0, duration 1s.
     Curva reamostrada do site real (17 pontos medidos em runtime). */
  --spring: linear(
    0, 0.116 6.3%, 0.280 12.4%, 0.494 18.5%, 0.663 24.6%, 0.758 30.8%,
    0.847 36.9%, 0.906 43%, 0.935 49.1%, 0.961 55.2%, 0.977 61.3%,
    0.984 67.4%, 0.991 73.5%, 0.995 79.6%, 0.996 85.7%, 0.998 91.8%,
    0.999 97.8%, 1
  );
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
h1, h2, h3, h6, p, ul, figure { margin: 0; }
ul  { list-style: none; padding: 0; }

/* --------------------------------------------------------------------------
   4. BOTÃO — "Encomendar agora"
   177x40 · bg #F3EFE6 · radius 30px · padding 10/15 · gap 10px
   General Sans 600 · 14px/19.6px · ls -0.28px · sem hover no original
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 15px;
  border-radius: 30px;
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--f-btn);
  font-weight: 600;
  font-size: 14px;
  line-height: 19.6px;
  letter-spacing: -0.28px;
}

.btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
}
.btn-icon svg { width: 100%; height: 100%; fill: currentColor; }

/* --------------------------------------------------------------------------
   5. HERO
   1200px de altura · gradiente #000 → #262626 · padding 10px 40px 100px
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 1200px;
  padding: 10px var(--pad-x) 100px;
  background-image: linear-gradient(var(--c-black) 0%, var(--c-hero-end) 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-top { padding-top: 20px; }
.hero-logo { width: 109px; height: 68px; object-fit: contain; }

.hero-inner {
  width: 600px;
  max-width: 100%;
  margin-top: 111px;          /* logo termina em y=98 · título começa em y=209 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* o par de títulos (linha 1 + linha 2) fica colado — gap 0 — e forma um só
   bloco dentro do gap:20px do .hero-inner. No original o título de 56px não
   quebra linha em desktop/tablet (precisa de 610px, por isso white-space:nowrap);
   só quebra em phone, onde o container fica mais estreito que o texto. */
.hero-heading {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* linha 1 — LEMON MILK 56/56 · ls -2.8px */
.hero-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 56px;
  letter-spacing: -2.8px;
  color: var(--c-white);
  white-space: nowrap;
}

/* linha 2 — serifada 48/57.6 · ls -2.4px (o original usa Times New Roman) */
.hero-title-serif {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 57.6px;
  letter-spacing: -2.4px;
  color: var(--c-white);
}

.hero-copy {
  font-family: var(--f-display);
  font-size: 16px;
  line-height: 25.6px;
  color: var(--c-white);
  opacity: 0.6;              /* o original anima até 0.6, não até 1 */
  max-width: 472px;
}

/* galeria — 3 fotos 380x600 em perspectiva de 1200px */
.hero-gallery {
  margin-top: 46px;
  width: 1200px;
  height: 600px;
  display: flex;
  gap: 30px;
  perspective: 1200px;
  flex-shrink: 0;
}

.hero-shot {
  width: 380px;
  height: 600px;
  border-radius: 30px;
  overflow: hidden;
  flex-shrink: 0;
}
.hero-shot img { width: 100%; height: 100%; object-fit: cover; }

/* pose final de cada card (aplicada pela animação de entrada abaixo;
   fica "presa" nela via animation-fill-mode: forwards) */

/* --------------------------------------------------------------------------
   6. CABEÇALHO DE SEÇÃO (story + catálogo)
   -------------------------------------------------------------------------- */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-head h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 57.6px;
  color: var(--c-ink);
}

.section-sub {
  font-family: var(--f-display);
  font-size: 16px;
  line-height: 25.6px;
  color: var(--c-muted);
  max-width: 381px;
  margin-top: 20px;
}

/* --------------------------------------------------------------------------
   7. STORY — "Feito pela madeira teca"
   -------------------------------------------------------------------------- */
.story {
  max-width: var(--container);
  margin: 0 auto;
  /* respiro extra acima, separando bem a hero da seção seguinte */
  padding: calc(var(--pad-y) + 100px) var(--pad-x) var(--pad-y);
}

.story-grid {
  margin-top: 40px;
  display: flex;
  gap: 20px;
}

.story-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  align-items: center;
}

/* numerais Inter 700 60/72 com degradê descendente */
.story-num {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  color: var(--c-num);
  background-image: linear-gradient(180deg, #A9835F 0%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.story-item h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: var(--c-ink);
}

.story-item p {
  font-family: var(--f-display);
  font-size: 14px;
  line-height: 22.4px;
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   8. CATÁLOGO — grid 2 colunas, gap 40px, cards sem fundo
   -------------------------------------------------------------------------- */
.catalog {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
  /* no original o respiro antes do Contato é maior que o padding-top */
  padding-bottom: 150px;
}

.catalog .section-head h2 { width: 100%; }

/* no original o subtítulo do catálogo encosta no h2 (gap 0) e é maior */
.catalog-sub {
  margin-top: 0;
  font-size: 20px;
  line-height: 32px;
  max-width: none;
}

.catalog-grid {
  margin-top: 81px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-image {
  height: 300px;             /* altura fixa em todos os breakpoints */
  border-radius: 10px;
  overflow: hidden;
}
.product-image img { width: 100%; height: 100%; object-fit: cover; }

.product-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-body h3 {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  color: var(--c-card-title);
}

.product-body p {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 22.4px;
  color: var(--c-card-desc);
}

/* --------------------------------------------------------------------------
   9. CONTATO
   -------------------------------------------------------------------------- */
.contact {
  max-width: var(--container);
  margin: 0 auto;
  padding: 112px;
}

/* dados de contato à esquerda, mapa à direita, ocupando a mesma altura */
.contact-layout {
  display: flex;
  align-items: stretch;
  gap: 60px;
}

.contact-inner {
  width: 468px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* mapa — enquadrado igual às fotos do site (cantos arredondados + hairline) */
.contact-map {
  flex: 1;
  min-width: 0;
  min-height: 320px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--c-hairline);
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
}

.contact-inner h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 57.6px;
  color: var(--c-black);
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.contact-icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  background: var(--c-rust);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-icon svg { width: 22px; height: 22px; fill: var(--c-white); }

.contact-text h3 {
  font-family: var(--f-contact);
  font-weight: 700;
  font-size: 16px;
  line-height: 19.2px;
  color: var(--c-black);
}

.contact-value {
  font-family: var(--f-contact);
  font-weight: 400;
  font-size: 14px;
  line-height: 22.4px;
  color: var(--c-black);
}
.contact-value--email { color: var(--c-green); }

/* --------------------------------------------------------------------------
   10. FAIXA DE LOGOS (ticker)
   logos com 180px de altura · gap 40px · desvanece nas bordas
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  /* respiro acima da faixa + espaço bem maior antes do rodapé */
  padding: 40px 0 200px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
}

.marquee-track li { flex-shrink: 0; }

.marquee-track img {
  height: 30px;
  width: auto;
  object-fit: contain;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 20px)); }
}

/* --------------------------------------------------------------------------
   11. RODAPÉ
   -------------------------------------------------------------------------- */
.site-footer {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 152px 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.footer-brand { display: flex; flex-direction: column; gap: 28px; }
.footer-logo  { width: 335px; height: auto; }

.footer-legal {
  font-family: var(--f-ui);
  font-size: 8px;
  line-height: 12.8px;
  color: var(--c-black);
}
.footer-legal a { color: var(--c-link); }

.footer-social {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 10px;
}

.footer-social h6 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  color: var(--c-rust);
}

.footer-social a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-display);
  font-size: 14px;
  line-height: 22.4px;
  color: var(--c-black);
}

.footer-icon { width: 20px; height: 20px; display: inline-flex; }
.footer-icon svg { width: 100%; height: 100%; fill: currentColor; }

/* --------------------------------------------------------------------------
   12. ANIMAÇÃO DE ENTRADA DO HERO
   Texto + botão entram com y 50px → 0 e opacity 0 → 1, mola (bounce 0,
   duração 1s), em cascata: 1.6s / 1.9s / 2.2s / 2.5s. Depois, os 3 cards da
   galeria entram um a um da esquerda pra direita, subindo e girando até a
   pose final (mesma mola, 0.25s entre cada um: 2.8s / 3.05s / 3.3s).
   Não há scroll reveal nem hover em cards/botão no original.
   -------------------------------------------------------------------------- */
[data-appear] {
  opacity: 0.001;
  transform: translateY(50px);
  will-change: transform, opacity;
}

.is-appearing [data-appear] {
  animation-name: appear-up;
  animation-duration: 1s;
  animation-timing-function: var(--spring);
  animation-fill-mode: forwards;
}

.is-appearing [data-appear="1"] { animation-delay: 1.6s; }
.is-appearing [data-appear="2"] { animation-delay: 1.9s; }
.is-appearing [data-appear="3"] { animation-delay: 2.2s; animation-name: appear-up-dim; }
.is-appearing [data-appear="4"] { animation-delay: 2.5s; }

.is-appearing [data-appear="5"] { animation-delay: 2.8s;  animation-name: appear-shot-left; }
.is-appearing [data-appear="6"] { animation-delay: 3.05s; animation-name: appear-shot-mid;  }
.is-appearing [data-appear="7"] { animation-delay: 3.3s;  animation-name: appear-shot-right; }

@keyframes appear-up {
  from { opacity: 0.001; transform: translateY(50px); }
  to   { opacity: 1;     transform: translateY(0);    }
}

/* a legenda do hero para em 0.6 de opacidade, como no original */
@keyframes appear-up-dim {
  from { opacity: 0.001; transform: translateY(50px); }
  to   { opacity: 0.6;   transform: translateY(0);    }
}

/* cards da galeria: sobem e giram até a inclinação final de cada um */
@keyframes appear-shot-left {
  from { opacity: 0.001; transform: translateY(60px) rotate(0deg); }
  to   { opacity: 1;     transform: translateY(0)     rotate(-5deg); }
}
@keyframes appear-shot-mid {
  from { opacity: 0.001; transform: translateY(60px) rotateX(0deg); }
  to   { opacity: 1;     transform: translateY(0)     rotateX(-10deg); }
}
@keyframes appear-shot-right {
  from { opacity: 0.001; transform: translateY(60px) rotate(0deg); }
  to   { opacity: 1;     transform: translateY(0)     rotate(5deg); }
}

/* --------------------------------------------------------------------------
   13. BREAKPOINTS — os mesmos três do Framer
   Desktop ≥1200px · Tablet 810–1199.98px · Phone ≤809.98px
   -------------------------------------------------------------------------- */

/* ---------- TABLET ---------- */
@media (min-width: 810px) and (max-width: 1199.98px) {
  :root { --container: 810px; --pad-x: 30px; }

  .section-head h2 { font-size: 40px; line-height: 48px; }

  .contact { padding: 60px; }
  .contact-inner { gap: 40px; }

  /* mapa não cabe ao lado dos dados no tablet — empilha embaixo */
  .contact-layout { flex-direction: column; gap: 40px; }
  .contact-inner  { width: 100%; }
  .contact-map    { width: 100%; min-height: 280px; }

  .site-footer { padding: 0 60px 40px; }
  .footer-logo { width: 280px; }
}

/* ---------- PHONE ---------- */
@media (max-width: 809.98px) {
  :root { --container: 100%; --pad-x: 24px; --pad-y: 80px; }

  /* hero */
  /* hero preenche a tela toda no mobile — altura mínima = 1 viewport
     (100dvh cobre a altura real visível, descontando a barra do navegador;
     min-height em vez de height fixo evita cortar conteúdo em telas baixas
     ou com fonte aumentada). Os 3 blocos (logo / título+cta / galeria) se
     distribuem do topo à base via justify-content: space-between. */
  .hero {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px 0 40px;
    justify-content: space-between;
  }
  /* margin-top removido: o espaçamento agora vem do space-between acima */
  .hero-inner { width: 310px; margin-top: 0; gap: 24px; }
  /* títulos e texto maiores, aproveitando o respiro extra da tela cheia
     (em phone o título quebra em 2 linhas, por isso volta a envolver texto) */
  .hero-title      { font-size: 44px; line-height: 44px;   letter-spacing: -2.2px;  white-space: normal; }
  .hero-title-serif{ font-size: 27px; line-height: 32.4px; letter-spacing: -1.35px; }
  .hero-copy       { font-size: 13px; line-height: 20.8px; max-width: 320px;        }

  .btn { padding: 10px 14px; gap: 6px; }

  /* mesmo leque do desktop — 3 fotos lado a lado, cantos arredondados e
     rotação em perspectiva — reduzido proporcionalmente (escala 118/380
     ≈ 0.31, aplicada a largura, altura, gap, raio e perspective) pra caber
     lado a lado em 390px, sem empilhar nem mudar o enquadramento */
  .hero-gallery {
    width: 100%;
    height: auto;
    gap: 8px;
    justify-content: center;
    perspective: 373px;
    margin-top: 0;
    padding: 0 10px;
  }
  .hero-shot {
    width: 118px;
    height: 186px;
    border-radius: 9px;
  }
  .hero-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* story */
  /* no desktop a seção soma +100px de respiro pra compensar o hero de
     altura fixa; em phone o hero já tem altura automática (ver acima),
     então o padding extra só cria um vão vazio antes do título */
  .story { padding-top: var(--pad-y); }
  .section-head h2 { font-size: 40px; line-height: 48px; }
  .section-sub     { font-size: 8px;  line-height: 12.8px; max-width: 201px; }

  .story-grid { flex-direction: column; gap: 20px; }
  .story-item h3 { font-size: 24px; line-height: 28.8px; }

  /* catálogo */
  .catalog-sub  { font-size: 16px; line-height: 25.6px; }
  .catalog-grid { grid-template-columns: 1fr; margin-top: 60px; }
  .catalog      { padding-bottom: 80px; }

  /* contato */
  /* padding-bottom maior que os outros lados — mais respiro antes da
     faixa de logos, que já soma seu próprio padding-top logo em seguida */
  .contact { padding: 24px 24px 64px; }
  /* gap maior entre a lista de contatos e o mapa (era 32px — tudo colado) */
  .contact-layout { flex-direction: column; gap: 48px; }
  .contact-inner { gap: 32px; width: 100%; }
  .contact-list  { gap: 32px; }
  /* mapa mais baixo em phone — 220px ainda ocupava espaço demais */
  .contact-map   { width: 100%; min-height: 180px; }
  .contact-map iframe { min-height: 180px; }

  /* rodapé */
  .site-footer {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 48px;
    padding: 0 50px 40px;
  }
  .footer-logo  { width: 240px; }
  .footer-legal { text-align: center; width: 100%; }

  /* mais respiro acima da faixa — antes ficava colada no mapa/contato */
  .marquee { padding: 40px 0 110px; }
  .marquee-track img { height: 20px; }
}

/* --------------------------------------------------------------------------
   14. ACESSIBILIDADE
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* o Framer também desliga a entrada nesse modo — o conteúdo já nasce visível */
  [data-appear] { opacity: 1; transform: none; }
  [data-appear="3"] { opacity: 0.6; }
  .is-appearing [data-appear] { animation: none; }

  /* mesmo sem animação, os cards nascem na pose final (girados) — o leque
     é o mesmo em todos os breakpoints, incluindo phone */
  [data-appear="5"] { transform: rotate(-5deg);   }
  [data-appear="6"] { transform: rotateX(-10deg); }
  [data-appear="7"] { transform: rotate(5deg);    }

  .marquee-track { animation: none; }
}

a:focus-visible {
  outline: 2px solid var(--c-rust);
  outline-offset: 3px;
}