/*
Theme Name: Atelier Birman
Description: Consultoria em poltronas de alto padrão — catálogo gerenciável via admin.
Version: 2.1
*/

:root {
  --background: 40 20% 98%;
  --foreground: 240 10% 3.9%;
  --primary: 356 66% 36%;
  --muted-foreground: 240 3.8% 46.1%;
  --border: 0 0% 88%;
  --white: 0 0% 100%;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Jost", sans-serif;
  font-weight: 300;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  overflow-x: clip;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.font-display { font-family: "Cormorant Garamond", Georgia, serif; }
.tracking { letter-spacing: 0.24em; }
.eyebrow { font-size: 0.66rem; letter-spacing: 0.24em; color: hsl(var(--primary)); text-transform: uppercase; margin-bottom: 1rem; display: block; }

.wrap { max-width: 90rem; margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 72rem; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .wrap, .wrap-narrow { padding: 0 40px; } }

/* Botão hairline */
.hairline-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.75rem;
  border: 1px solid currentColor;
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  transition: background-color .25s ease-out, color .25s ease-out;
  cursor: pointer; background: none;
}
.hairline-btn:hover { background: hsl(var(--foreground)); color: hsl(var(--background)); }
.hairline-btn.light { border-color: white; color: white; }
.hairline-btn.light:hover { background: white; color: hsl(var(--foreground)); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: hsla(var(--background) / 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid hsl(var(--border));
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; }
@media (min-width: 768px) { .site-header .wrap { padding: 16px 40px; } }
.marca { display: flex; align-items: center; gap: 12px; }
.marca .mark { display: grid; place-items: center; height: 44px; width: 44px; border: 1px solid currentColor; font-family: "Cormorant Garamond", serif; font-size: 1.125rem; }
.marca .name { display: block; font-family: "Cormorant Garamond", serif; font-size: 1.25rem; letter-spacing: 0.16em; }
.marca .sub { display: block; font-size: 0.58rem; letter-spacing: 0.1em; color: hsl(var(--muted-foreground)); margin-top: 2px; }

.main-nav { display: none; align-items: center; gap: 36px; }
.main-nav a { font-size: 0.7rem; letter-spacing: 0.24em; color: hsl(0 0% 25%); transition: color .2s; }
.main-nav a:hover { color: hsl(var(--primary)); }
.menu-toggle { display: block; background: none; border: none; cursor: pointer; padding: 10px; }
.mobile-nav { display: none; border-top: 1px solid hsl(var(--border)); padding: 0 20px 24px; }
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; border-bottom: 1px solid hsl(var(--border)); padding: 16px 0; font-size: 0.72rem; letter-spacing: 0.24em; }

@media (min-width: 768px) {
  .main-nav { display: flex; }
  .menu-toggle { display: none; }
}

/* Hero */
.hero { position: relative; min-height: 88vh; width: 100%; overflow: hidden; }
.hero img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,.25), transparent); }
.hero-content { position: relative; z-index: 2; max-width: 90rem; margin: 0 auto; min-height: 88vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 110px 20px 70px; }
@media (min-width: 768px) { .hero-content { padding: 110px 40px 70px; } }
.hero-content .eyebrow { color: rgba(255,255,255,.8); }
.hero h1 { max-width: 56rem; font-family: "Cormorant Garamond", serif; font-weight: 300; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.05; color: white; }
.hero h1 em { display: block; font-style: italic; color: rgba(255,255,255,.85); }
.hero-actions { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; }
.hero-actions .more { display: inline-flex; align-items: center; gap: 10px; font-size: 0.7rem; letter-spacing: 0.24em; color: rgba(255,255,255,.85); }
@media (min-width: 640px) { .hero-actions { flex-direction: row; align-items: center; } }

/* Marquee */
.marquee-wrap { border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); background: white; padding: 16px 0; overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee-group { display: flex; flex-shrink: 0; align-items: center; }
.marquee-track span { display: flex; align-items: center; white-space: nowrap; padding: 0 32px; font-size: 0.66rem; letter-spacing: 0.24em; color: hsl(var(--muted-foreground)); }
.marquee-track span::after { content: ''; margin-left: 32px; height: 4px; width: 4px; background: hsl(var(--primary)); display: inline-block; }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* Seções gerais */
section { padding: 90px 0; }
h2.section-title { font-family: "Cormorant Garamond", serif; font-weight: 300; font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.15; }

/* Consultoria — split */
.consultoria-grid { display: grid; gap: 50px; }
.consultoria-body { font-size: 1.02rem; font-weight: 300; line-height: 1.7; color: hsl(0 0% 25%); }
.consultoria-list { margin-top: 40px; border-top: 1px solid hsl(var(--border)); }
.consultoria-list > div { padding: 20px 0; border-bottom: 1px solid hsl(var(--border)); }
.consultoria-list h3 { font-size: 0.72rem; letter-spacing: 0.24em; }
.consultoria-list p { margin-top: 8px; font-size: 0.9rem; color: hsl(var(--muted-foreground)); }
@media (min-width: 768px) { .consultoria-grid { grid-template-columns: 5fr 6fr; } }

/* Portfolio */
.portfolio-header { display: flex; flex-direction: column; gap: 16px; border-bottom: 1px solid hsl(var(--border)); padding-bottom: 32px; margin-bottom: 56px; }
.portfolio-header h2 { font-size: 0.8rem; letter-spacing: 0.24em; }
.portfolio-header p { max-width: 28rem; font-size: 0.9rem; color: hsl(var(--muted-foreground)); }
.catalogo-grid { display: grid; gap: 24px 24px; grid-template-columns: 1fr; }
.catalogo-item {
  display: block; border: 1px solid hsl(var(--border)); padding: 24px 24px 28px;
  transition: box-shadow .35s ease-out, border-color .35s ease-out, transform .35s ease-out;
}
.catalogo-item:hover { box-shadow: 0 18px 48px rgba(0,0,0,.09); border-color: hsl(var(--primary) / 0.35); transform: translateY(-3px); }
.catalogo-item .thumb {
  background: white; overflow: hidden; margin: -24px -24px 0;
  aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; padding: 32px;
}
.catalogo-item .thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .7s ease-out; }
.catalogo-item:hover .thumb img { transform: scale(1.04); }
.catalogo-item .cat { margin-top: 20px; font-size: 0.6rem; letter-spacing: 0.24em; color: hsl(var(--primary)); text-transform: uppercase; }
.catalogo-item h3 { margin-top: 8px; font-family: "Cormorant Garamond", serif; font-weight: 300; font-size: 1.5rem; }
.catalogo-item .desc { margin-top: 8px; font-size: 0.88rem; color: hsl(var(--muted-foreground)); }
.catalogo-item .cta { margin-top: 16px; display: inline-flex; gap: 8px; font-size: 0.65rem; letter-spacing: 0.24em; }
@media (min-width: 640px) { .catalogo-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .catalogo-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* Ambiente / citação full-bleed */
.quote-section { position: relative; }
.quote-section img { height: 70vh; width: 100%; object-fit: cover; }
.quote-section::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.quote-content { position: absolute; inset: 0; display: flex; align-items: center; }
.quote-content .inner { max-width: 56rem; margin: 0 auto; padding: 0 24px; text-align: center; }
.quote-content p.quote { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 3.5vw, 2.4rem); color: white; line-height: 1.3; }
.quote-content p.attr { margin-top: 28px; font-size: 0.64rem; letter-spacing: 0.24em; color: rgba(255,255,255,.7); }

/* Processo */
.processo-grid { display: grid; gap: 48px; }
.processo-list { border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); }
.processo-list li { display: flex; gap: 24px; padding: 28px 0; border-bottom: 1px solid hsl(var(--border)); list-style: none; }
.processo-list li:last-child { border-bottom: none; }
.processo-list .n { font-family: "Cormorant Garamond", serif; font-size: 1.3rem; color: hsl(var(--primary)); }
.processo-list h3 { font-size: 0.72rem; letter-spacing: 0.24em; }
.processo-list p { margin-top: 8px; font-size: 0.9rem; color: hsl(var(--muted-foreground)); }
.processo-images { display: grid; gap: 16px; }
.processo-images img { aspect-ratio: 4/3; width: 100%; object-fit: cover; }
@media (min-width: 768px) { .processo-grid { grid-template-columns: 7fr 5fr; } }

/* Contato */
.contato-grid { display: grid; gap: 56px; }
.contato-info p.desc { margin-top: 24px; max-width: 26rem; font-size: 0.9rem; color: hsl(var(--muted-foreground)); }
.contato-info .item { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; margin-top: 16px; color: hsl(0 0% 25%); }
.contato-form { display: flex; flex-direction: column; gap: 24px; }
.contato-form label { display: block; font-size: 0.62rem; letter-spacing: 0.24em; color: hsl(var(--muted-foreground)); margin-bottom: 8px; }
.contato-form input, .contato-form textarea {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid hsl(var(--border));
  padding-bottom: 8px; font-family: "Jost", sans-serif; font-size: 0.95rem; color: hsl(var(--foreground));
}
.contato-form input:focus, .contato-form textarea:focus { outline: none; border-bottom-color: hsl(var(--primary)); }
@media (min-width: 768px) { .contato-grid { grid-template-columns: 1fr 1fr; } }

/* Footer */
.site-footer { border-top: 1px solid hsl(var(--border)); padding: 56px 0; }
.footer-top { display: flex; flex-direction: column; gap: 40px; }
.footer-cols { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
.footer-cols h3 { font-size: 0.62rem; letter-spacing: 0.24em; color: hsl(var(--muted-foreground)); margin-bottom: 16px; }
.footer-cols li { list-style: none; font-size: 0.9rem; margin-bottom: 8px; }
.footer-cols a:hover { color: hsl(var(--primary)); }
.footer-legal { margin-top: 48px; font-size: 0.62rem; letter-spacing: 0.24em; color: hsl(0 0% 64%); }
@media (min-width: 768px) { .footer-top { flex-direction: row; align-items: flex-start; justify-content: space-between; } }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
