/* ==========================================================================
   Wittmaack Central Gráfica — stylesheet
   Tokens extracted from the company's own institutional presentation:
   navy #101037, gold #9F822B, warm paper #F6F3EC
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;1,8..60,500&display=swap');

:root{
  --navy: #101037;
  --navy-deep: #0a0a26;
  --navy-soft: #191958;
  --gold: #9f822b;
  --gold-light: #c7a94d;
  --paper: #f6f3ec;
  --paper-dim: #ece7db;
  --ink: #1c1c2e;
  --ink-soft: #52526b;
  --white: #ffffff;

  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Sora", "Segoe UI", Arial, sans-serif;

  --max: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width: var(--max); margin:0 auto; padding: 0 28px; }

h1,h2,h3{ font-family: var(--sans); font-weight:700; line-height:1.12; margin:0; }
p{ line-height:1.65; color: var(--ink-soft); margin:0; }

.eyebrow-rule{ width:52px; height:4px; background: var(--gold); border-radius:2px; }

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 26px;
  font-family: var(--sans); font-weight:600; font-size:0.98rem;
  border-radius:3px;
  border: 1.5px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-gold{ background: var(--gold); color: var(--navy-deep); }
.btn-gold:hover{ background: var(--gold-light); }
.btn-outline{ border-color: rgba(255,255,255,0.4); color: var(--white); }
.btn-outline:hover{ border-color: var(--gold-light); color: var(--gold-light); }
.btn-outline-dark{ border-color: rgba(16,16,55,0.35); color: var(--navy); }
.btn-outline-dark:hover{ border-color: var(--navy); background: rgba(16,16,55,0.04); }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: var(--navy);
  border-bottom: 1px solid rgba(159,130,43,0.35);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 108px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height: 68px; width:auto; }
.brand-name{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name strong{ color:var(--white); font-size:1.02rem; letter-spacing:0.01em; font-weight:600; }

nav.main-nav{ display:flex; align-items:center; gap:30px; }
nav.main-nav a{
  color: rgba(255,255,255,0.82); font-size:0.94rem; font-weight:500;
  position:relative; padding: 6px 0;
}
nav.main-nav a:hover{ color: var(--white); }
nav.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: var(--gold); transform: scaleX(0); transform-origin:left;
  transition: transform .2s ease;
}
nav.main-nav a:hover::after{ transform: scaleX(1); }

.header-cta{ display:flex; align-items:center; gap:18px; }
.menu-toggle{ display:none; }

/* ---------- hero ---------- */
.hero{
  background: var(--navy);
  position:relative;
  padding: 96px 0 84px;
  border-bottom: 4px double rgba(159,130,43,0.4);
  overflow:hidden;
}
.hero.hero-photo{
  background:
    linear-gradient(120deg, rgba(6,6,26,0.88), rgba(10,10,36,0.82) 45%, rgba(6,6,26,0.92)),
    url('../images/hero-press.jpg') center 60%/cover no-repeat;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 82% 8%, rgba(159,130,43,0.16), transparent 60%),
    radial-gradient(ellipse 50% 40% at 8% 100%, rgba(159,130,43,0.1), transparent 60%);
  pointer-events:none;
}
.hero .wrap{ position:relative; display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items:center; }
.hero-kicker{
  display:inline-flex; align-items:center; gap:10px;
  color: var(--gold-light); font-size:0.82rem; font-weight:600; letter-spacing:0.04em;
  margin-bottom:22px;
}
.hero-kicker .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
.hero h1{
  color: var(--white); font-size: clamp(2.1rem, 4vw, 3.05rem);
  letter-spacing:-0.01em;
}
.hero h1 em{
  font-style:normal; color: var(--gold-light);
}
.hero p.lede{
  color: rgba(255,255,255,0.72); font-size:1.08rem; margin-top:20px; max-width: 46ch;
}
.hero-actions{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:36px; margin-top:52px; }
.hero-stats div{ border-left: 2px solid rgba(159,130,43,0.5); padding-left:14px; }
.hero-stats strong{ display:block; color:var(--white); font-size:1.6rem; font-family: var(--serif); font-weight:600; }
.hero-stats span{ color: rgba(255,255,255,0.58); font-size:0.82rem; }

.hero-mark{
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.hero-mark .ring{
  position:relative; width: 320px; height:320px;
  border-radius:50%;
  border: 1px solid rgba(159,130,43,0.35);
  background: rgba(8,8,30,0.32);
  backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center;
}
.hero-mark .ring::before{
  content:""; position:absolute; inset:22px;
  border-radius:50%; border: 1px solid rgba(159,130,43,0.22);
}
.hero-mark img{ width: 62%; }

/* ---------- section shell ---------- */
section{ padding: 92px 0; }
/* ao clicar no menu, a seção para logo abaixo do cabeçalho fixo, com o título inteiro visível */
section[id]{ scroll-margin-top: 150px; }
.section-head{ max-width: 640px; margin-bottom:48px; }
.section-tag{
  color: var(--gold); font-weight:700; font-size:0.8rem; letter-spacing:0.08em;
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.section-tag::before{ content:""; width:26px; height:2px; background: var(--gold); }
.section-head h2{ font-size: clamp(1.7rem, 2.6vw, 2.3rem); color: var(--navy); margin-top:2px; }
.on-dark .section-tag{ color: var(--gold-light); }
.on-dark .section-head h2{ color: var(--white); }

/* ---------- quem somos ---------- */
.quem-somos{ background: var(--paper); }
.quem-somos .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:64px; align-items:start; }
.quem-somos .copy p + p{ margin-top:16px; }
.quem-somos .copy p.lead{ font-family: var(--serif); font-size:1.28rem; color: var(--navy); line-height:1.5; }
.quem-somos .copy p.brasil-note{
  margin-top:18px; display:inline-flex; align-items:center; gap:8px;
  color: var(--navy); font-weight:600; font-size:0.88rem;
  padding: 8px 14px; border: 1px solid rgba(159,130,43,0.4); border-radius:3px;
  background: rgba(159,130,43,0.07);
}

.values{ display:flex; flex-direction:column; gap:2px; }
.value-row{
  display:flex; gap:18px; align-items:flex-start;
  padding: 22px 0; border-top: 1px solid rgba(16,16,55,0.1);
}
.value-row:last-child{ border-bottom: 1px solid rgba(16,16,55,0.1); }
.value-row .num{ font-family: var(--serif); color: var(--gold); font-size:1.1rem; font-style:italic; width:28px; flex:none; }
.value-row h3{ font-size:1.02rem; color: var(--navy); margin-bottom:4px; }
.value-row p{ font-size:0.93rem; }

/* ---------- servicos (dark, textured) ---------- */
.servicos{
  background:
    linear-gradient(120deg, rgba(10,10,38,0.94), rgba(16,16,55,0.9) 45%, rgba(10,10,38,0.96)),
    url('../images/product-comercial.jpg') center/cover no-repeat;
  color: var(--white);
}
.servicos .grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:60px; }
.servicos .intro p{ color: rgba(255,255,255,0.68); }
.servicos .intro ul{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.servicos .intro li{
  color: rgba(255,255,255,0.85); font-size:0.96rem;
  padding-left:22px; position:relative;
}
.servicos .intro li::before{
  content:""; position:absolute; left:0; top:9px; width:9px; height:9px;
  border: 1.5px solid var(--gold-light); border-radius:50%;
}
.service-cards{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.service-card{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(159,130,43,0.28);
  border-radius:4px; padding:26px 24px;
  backdrop-filter: blur(2px);
}
.service-card h3{ color: var(--white); font-size:1.06rem; margin-bottom:8px; }
.service-card p{ color: rgba(255,255,255,0.62); font-size:0.9rem; }
.service-note{
  grid-column: 1 / -1; margin-top:4px;
  border-top: 1px solid rgba(159,130,43,0.3); padding-top:22px;
  display:flex; flex-wrap:wrap; gap: 10px 28px;
}
.service-note span{ color: rgba(255,255,255,0.7); font-size:0.88rem; }
.service-note span strong{ color: var(--gold-light); font-weight:600; }

/* ---------- porque + setores ---------- */
.porque{ background: var(--navy-deep); color:var(--white); }
.porque .grid{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; }
.reasons{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.reasons li{
  padding: 16px 0; border-top:1px solid rgba(255,255,255,0.09);
  display:flex; align-items:baseline; gap:16px; font-size:1rem; color: rgba(255,255,255,0.86);
}
.reasons li:last-child{ border-bottom:1px solid rgba(255,255,255,0.09); }
.reasons li .mark{ color: var(--gold-light); font-family: var(--serif); font-style:italic; }

.porque-heading{ font-size: clamp(1.4rem, 1.9vw, 1.6rem) !important; }
.setores h3{ color: var(--white); margin-top:29px; margin-bottom:26px; }
.setor-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.setor{
  border:1px solid rgba(159,130,43,0.3); border-radius:4px;
  padding:16px 18px; font-size:0.93rem; color: rgba(255,255,255,0.85);
  display:flex; align-items:center; gap:10px;
}
.setor .dot{ width:7px; height:7px; border-radius:50%; background: var(--gold); flex:none; }
.setor-icon{ display:flex; align-items:center; justify-content:center; width:19px; height:19px; flex:none; color: var(--gold-light); }
.setor-icon svg{ width:100%; height:100%; }

/* ---------- produtos ---------- */
.produtos{ background: var(--paper); }
.produto-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:26px; }
.produto-card{
  background: var(--white);
  border: 1px solid rgba(16,16,55,0.08);
  border-radius:4px; overflow:hidden;
  transition: transform .4s ease, box-shadow .4s ease, opacity .4s ease;
}
.produto-card figure{ margin:0; aspect-ratio: 4/3; overflow:hidden; }
.produto-card img{
  width:100%; height:100%; object-fit:cover;
  filter: grayscale(90%) brightness(0.94) contrast(0.96);
  transform: scale(1.0);
  transition: filter .45s ease, transform .5s ease;
}
.produto-card:hover img{
  filter: grayscale(0%) brightness(1) contrast(1);
  transform: scale(1.04);
}
.produto-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(16,16,55,0.14);
}
.produto-grid:hover .produto-card:not(:hover){ opacity: 0.55; }
.produto-body{ padding: 20px 22px 24px; }
.produto-body h3{ color: var(--navy); font-size:1.05rem; margin-bottom:8px; }
.produto-body p{ font-size:0.9rem; }

/* ---------- clientes ---------- */
.clientes{ background: var(--paper-dim); padding-bottom: 76px; }
.clientes .section-head p{ max-width: 54ch; }

.logo-marquee{
  width:100%; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-track{
  display:flex; align-items:center; gap: 72px;
  width:max-content;
  animation: marquee 32s linear infinite;
}
.logo-marquee:hover .logo-track{ animation-play-state: paused; }
.logo-item{
  flex:none; height:44px; display:flex; align-items:center; justify-content:center;
}
.logo-item img{ height:100%; width:auto; max-width:150px; object-fit:contain; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .logo-track{ animation: none; flex-wrap:wrap; justify-content:center; }
}
@media (max-width: 720px){
  .logo-item{ height:34px; }
  .logo-item img{ max-width:110px; }
  .logo-track{ gap:44px; }
}

/* ---------- cta / contato ---------- */
.contato{
  background: var(--navy);
  color: var(--white);
  border-top: 4px double rgba(159,130,43,0.4);
  text-align:center;
}
.contato .mark{ width: 74px; margin: 0 auto 26px; opacity:0.92; }
.contato h2{ font-size: clamp(1.8rem, 3vw, 2.5rem); color:var(--white); }
.contato p.lede{ color: rgba(255,255,255,0.66); max-width:52ch; margin: 18px auto 0; }
.contato-actions{ display:flex; justify-content:center; gap:16px; margin-top:34px; flex-wrap:wrap; }
.contato-panel{
  margin-top:56px; padding-top:36px; border-top:1px solid rgba(255,255,255,0.1);
  display:grid; grid-template-columns: 0.9fr 1.3fr; gap:40px; align-items:center;
  text-align:left;
}
.contato-info{ display:flex; flex-direction:column; gap:26px; }
.contato-info span.label{ display:block; color: var(--gold-light); font-size:0.76rem; font-weight:600; letter-spacing:0.05em; margin-bottom:6px; }
.contato-info a, .contato-info p{ color: rgba(255,255,255,0.85); font-size:0.96rem; }
.map-frame{
  width:100%; height:260px;
  border-radius:4px; overflow:hidden;
  border: 1px solid rgba(159,130,43,0.4);
}
.map-frame iframe{ display:block; filter: grayscale(12%) contrast(1.04); }

/* ---------- footer ---------- */
footer.site-footer{
  background: var(--navy-deep); color: rgba(255,255,255,0.5);
  padding: 26px 0; font-size:0.82rem;
}
footer.site-footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-mark{ order:-1; }
  .hero-mark .ring{ width:220px; height:220px; }
  .quem-somos .grid, .servicos .grid, .porque .grid, .clientes .wrap{ grid-template-columns:1fr; gap:40px; }
  .produto-grid{ grid-template-columns: 1fr 1fr; }
  .setor-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  nav.main-nav{ display:none; }
  .header-cta .btn-outline{ display:none; }
  .produto-grid{ grid-template-columns: 1fr; }
  .service-cards{ grid-template-columns: 1fr; }
  section{ padding: 64px 0; }
  section[id]{ scroll-margin-top: 150px; }
  .hero{ padding: 64px 0 56px; }
  .hero-stats{ gap:22px; flex-wrap:wrap; }
  .contato-panel{ grid-template-columns: 1fr; gap:28px; }
  .map-frame{ height:220px; }
}