/* ============================================================
   Sampaio & Bianchi — paleta oficial extraída da logo
   Azul-petróleo #365469 · Dourado #D3AF70
   ============================================================ */
:root{
  --brand:#365469;
  --accent:#8A6A3A;
  --gold:#D3AF70;
  --ink:#1B2732;
  --paper:#FAFAF8;
  --surface:#F0F1F0;
  --muted:#5E6E7B;
  --line:rgba(27,39,50,.14);
  --amp:rgba(211,175,112,.16);
}
[data-theme="dark"]{
  --brand:#8FB0C6;
  --accent:#D3AF70;
  --gold:#D3AF70;
  --ink:#E9EDF0;
  --paper:#10161B;
  --surface:#172029;
  --muted:#93A3AF;
  --line:rgba(233,237,240,.14);
  --amp:rgba(211,175,112,.07);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden}
body{
  font:400 1rem/1.65 "Archivo",system-ui,sans-serif;
  color:var(--ink);background:var(--paper);
  transition:background .3s,color .3s;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Fraunces",serif;font-weight:600;line-height:1.12;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
.eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:1rem;
  white-space:nowrap;overflow-x:auto;
}
@media(max-width:480px){
  .eyebrow{font-size:.62rem;letter-spacing:.14em;white-space:normal;word-break:keep-all;overflow-wrap:normal;hyphens:none}
}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px;padding:6px 0}
.logo{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
.logo .name{
  font-family:"Fraunces",serif;font-weight:400;font-size:1.05rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--brand);
}
[data-theme="dark"] .logo .name{color:var(--ink)}
.logo .name em{font-style:normal;font-weight:600;color:var(--gold)}
.logo .sub{
  font-size:.52rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.42em;color:var(--accent);
}
.menu{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem);list-style:none}
.menu a{font-size:.9rem;font-weight:500;color:var(--muted);transition:color .2s}
.menu a:hover,.menu a[aria-current]{color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:.75rem}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.3rem;border-radius:999px;border:1px solid transparent;
  font-size:.9rem;font-weight:600;transition:transform .2s,background .2s,color .2s,border-color .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn-solid{background:var(--brand);color:var(--paper)}
[data-theme="dark"] .btn-solid{color:#0E120F}
.btn-ghost{border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
#themeToggle{
  width:40px;height:40px;border-radius:999px;border:1px solid var(--line);
  background:none;color:var(--ink);cursor:pointer;font-size:1rem;
  display:grid;place-items:center;transition:border-color .2s;
}
#themeToggle:hover{border-color:var(--accent)}
.hamburger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:none;color:var(--ink);cursor:pointer;font-size:1.1rem}

/* ---------- hero (home) ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(2.5rem,6vh,4rem) 0 clamp(4rem,10vh,7rem)}
@media(max-width:820px){.hero{padding:2rem 0 3.5rem}}
.hero .amp{
  position:absolute;right:-4rem;top:50%;transform:translateY(-52%);
  font-family:"Fraunces",serif;font-weight:600;font-size:clamp(24rem,45vw,42rem);
  line-height:1;color:var(--amp);user-select:none;pointer-events:none;
}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.4rem);max-width:15ch;position:relative}
.hero p{max-width:46ch;margin:1.5rem 0 2.25rem;color:var(--muted);font-size:1.05rem;position:relative}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;position:relative}

/* ---------- áreas (home) ---------- */
.areas{border-top:1px solid var(--line);padding:clamp(3.5rem,8vh,6rem) 0}
.areas-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.area{background:var(--paper);padding:2.25rem 2rem;transition:background .25s;display:block}
.area:hover{background:var(--surface)}
.area h3{font-size:1.35rem;margin:.8rem 0 .6rem}
.area p{color:var(--muted);font-size:.95rem}
.area .tag{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.area .more{display:inline-block;margin-top:1rem;font-size:.85rem;font-weight:600;color:var(--accent)}

/* ---------- escritório teaser / contato (home) ---------- */
.office{padding:clamp(3.5rem,8vh,6rem) 0;border-top:1px solid var(--line)}
.office .inner{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.office h2{font-size:clamp(1.8rem,3.6vw,2.6rem);max-width:20ch}
.office p{color:var(--muted);margin:1.1rem 0 1.8rem;max-width:48ch}
.office aside{
  border-left:2px solid var(--gold);padding-left:1.5rem;
  font-family:"Fraunces",serif;font-size:1.15rem;line-height:1.5;
}
.contact{border-top:1px solid var(--line);background:var(--surface);padding:clamp(3.5rem,8vh,6rem) 0;transition:background .3s}
.contact .inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
.contact h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.contact p{color:var(--muted);margin:1rem 0 1.8rem}
.contact ul{list-style:none;display:grid;gap:1.1rem;align-content:center}
.contact li{display:flex;gap:.9rem;align-items:baseline}
.contact li b{font-weight:600;min-width:5.5rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.contact li a:hover{color:var(--accent)}

/* ---------- subpáginas de serviço ---------- */
.svc-hero{border-bottom:1px solid var(--line);padding:clamp(3.5rem,9vh,6.5rem) 0}
.svc-hero .inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.svc-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:16ch}
.svc-hero p{color:var(--muted);margin-top:1.25rem;max-width:48ch;font-size:1.05rem}
.svc-hero figure{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:clamp(1.5rem,3vw,2.5rem);transition:background .3s;
}
.svc-hero figure svg{width:100%;height:auto}
.svc-body{padding:clamp(3rem,7vh,5rem) 0}
.svc-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem 3rem;margin-top:2.25rem}
.svc-item h3{font-size:1.15rem;margin-bottom:.4rem}
.svc-item h3::before{content:"— ";color:var(--gold)}
.svc-item p{color:var(--muted);font-size:.95rem}
.svc-cta{
  border-top:1px solid var(--line);background:var(--surface);
  padding:clamp(3rem,7vh,5rem) 0;text-align:center;transition:background .3s;
}
.svc-cta h2{font-size:clamp(1.6rem,3.2vw,2.3rem);max-width:24ch;margin:0 auto}
.svc-cta p{color:var(--muted);margin:1rem auto 1.75rem;max-width:44ch}
.breadcrumb{font-size:.82rem;color:var(--muted);margin-bottom:1.25rem}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span{color:var(--gold);margin:0 .4rem}

/* ---------- hub de serviços ---------- */
.page-head{padding:clamp(3.5rem,9vh,6rem) 0 clamp(2rem,5vh,3rem)}
.page-head h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.page-head p{color:var(--muted);margin-top:1.25rem;max-width:52ch;font-size:1.05rem}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:1.75rem 0;font-size:.85rem;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover{transform:none}
}

/* ---------- mobile ---------- */
@media (max-width:820px){
  .menu{
    position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:flex-start;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:1.25rem clamp(1.25rem,4vw,2.5rem) 1.75rem;gap:1.1rem;
    transform:translateY(-130%);transition:transform .3s ease;
  }
  .menu.open{transform:none}
  .hamburger{display:grid;place-items:center}
  .nav-actions .btn-solid{display:none}
  .hero .amp{right:-8rem;opacity:.7}
  .areas-grid,.office .inner,.contact .inner,.svc-hero .inner,.svc-list{grid-template-columns:1fr}
  .office aside{margin-top:.5rem}
  .svc-hero figure{order:-1}
}

/* grid de sócios */
.socios{grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.socios{grid-template-columns:1fr}}

/* ---- roteador single-file ---- */
.page{display:none}
.page.active{display:block}

.escritorio-galeria{border-top:1px solid var(--line);overflow:hidden}

.escritorio-galeria{overflow:hidden;max-width:100%}
.gal-track{overflow:hidden}
.gal-img{overflow:hidden;max-width:100%}
.gal-img img{width:100%;max-width:100%}
.gal-track{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);width:100%}
.gal-img{overflow:hidden;min-width:0}
.gal-img{overflow:hidden}
.gal-img img{width:100%;max-width:100%;height:280px;object-fit:cover;transition:transform .6s ease;display:block}
.gal-img:hover img{transform:scale(1.04)}
@media(max-width:860px){
.escritorio-galeria{overflow:hidden;max-width:100%}
.gal-track{overflow:hidden}
.gal-img{overflow:hidden;max-width:100%}
.gal-img img{width:100%;max-width:100%}
.gal-track{grid-template-columns:1fr}.gal-img img{height:220px}}


.news-loading{text-align:center;padding:3rem;color:var(--muted);grid-column:1/-1}
@media(max-width:860px){.news-grid{grid-template-columns:1fr}}

.news-loading{text-align:center;padding:3rem;color:var(--muted);grid-column:1/-1}
@media(max-width:860px){.news-grid{grid-template-columns:1fr}}




/* ---------- notícias do agro ---------- */
.noticias-agro{padding:clamp(3.5rem,8vh,6rem) 0;border-top:1px solid var(--line)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.5rem}
.news-item{background:var(--surface);padding:2rem;transition:background .3s;display:block}
.news-item:hover{background:var(--paper)}
.news-item .news-date{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.news-item h3{font-family:"Fraunces",serif;font-weight:600;font-size:1.1rem;margin:.8rem 0;line-height:1.4;color:var(--ink)}
.news-item p{color:var(--muted);font-size:.88rem;line-height:1.5}
.news-item .news-link{color:var(--accent);font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;margin-top:1rem;display:inline-block}
.news-thumb{width:100%;height:180px;object-fit:cover;margin-bottom:1rem}
.news-loading{text-align:center;padding:3rem;color:var(--muted);grid-column:1/-1}
@media(max-width:860px){
  .news-grid{grid-template-columns:1fr}
  .news-thumb{height:200px}
}


@media(max-width:860px){
  .contact .wrap > div[style]{grid-template-columns:1fr!important}
}

.logo-light{display:block}
.logo-dark{display:none}
[data-theme="dark"] .logo-light{display:none}
[data-theme="dark"] .logo-dark{display:block}

@media(max-width:480px){
  .logo-light,.logo-dark{height:58px!important}
}