/* ============================================================================
   Empresa — portal Tatuí Fácil  ·  layout novo
   Servir como UTF-8.  Substitui o antigo style.css + common.css desta pasta.
   ========================================================================== */

/* Paleta derivada do logotipo Gropo:
   fundo menta claro (#E6FBF7) + verde esmeralda do "GROPO" (#066C4F). */
:root{
  --ground:#F4FAF7;
  --surface:#FFFFFF;
  --surface-sunk:#E8F4EE;
  --ink:#15251E;
  --ink-soft:#48584F;
  --ink-faint:#5C7168;
  --line:#DBEAE1;
  --line-strong:#BDD5C8;
  --accent:#0B6B4E;
  --accent-strong:#08553E;
  --accent-wash:#E3F3EB;
  --focus:#0B6B4E;
  --btn-ink:#FFFFFF;
  --sel:#CCEBDB;
  --hero-bg:linear-gradient(180deg,#E6FBF7 0%,#EFF8F4 55%,var(--ground) 100%);
  --shadow-sm:0 1px 2px rgba(21,37,30,.05);
  --shadow:0 2px 6px rgba(21,37,30,.05), 0 16px 36px -16px rgba(11,107,78,.18);

  --step--1:.8rem;
  --step-0:1.0625rem;
  --step-1:1.28rem;
  --step-2:1.62rem;
  --step-3:2.15rem;
  --hero:clamp(2.7rem,1.7rem + 4.4vw,4.5rem);

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem; --sp-24:6rem;

  --measure:40rem;
  --radius:8px;
  --radius-lg:16px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#111C17; --surface:#1A2721; --surface-sunk:#152019;
    --ink:#E7F0EA; --ink-soft:#A6B8AD; --ink-faint:#8A9C91;
    --line:#28352E; --line-strong:#3B4B42;
    --accent:#5FC79A; --accent-strong:#C8EAD8; --accent-wash:#182720;
    --focus:#5FC79A; --btn-ink:#0A1611; --sel:#26392F;
    --hero-bg:linear-gradient(180deg,#16271F 0%,#132018 60%,var(--ground) 100%);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 2px 6px rgba(0,0,0,.35), 0 18px 44px -18px rgba(0,0,0,.62);
  }
}
:root[data-theme="dark"]{
  --ground:#111C17; --surface:#1A2721; --surface-sunk:#152019;
  --ink:#E7F0EA; --ink-soft:#A6B8AD; --ink-faint:#8A9C91;
  --line:#28352E; --line-strong:#3B4B42;
  --accent:#5FC79A; --accent-strong:#C8EAD8; --accent-wash:#182720;
  --focus:#5FC79A; --btn-ink:#0A1611; --sel:#26392F;
  --hero-bg:linear-gradient(180deg,#16271F 0%,#132018 60%,var(--ground) 100%);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 6px rgba(0,0,0,.35), 0 18px 44px -18px rgba(0,0,0,.62);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:var(--step-0);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* browser surfaces — themed, not left to the UA */
::selection{background:var(--sel);color:var(--ink)}
:where(a,button,input,summary):focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
input{caret-color:var(--accent)}
*{scrollbar-color:var(--line-strong) transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border:3px solid var(--ground);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

h1,h2,h3{
  font-family:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  font-weight:500;line-height:1.12;text-wrap:balance;margin:0;letter-spacing:-.012em;
}
p{margin:0 0 var(--sp-4)}
a{color:var(--accent-strong);text-underline-offset:3px;text-decoration-thickness:from-font}
img{max-width:100%;display:block}
b,strong{font-weight:600}
section[id]{scroll-margin-top:5.5rem}

.wrap{max-width:72rem;margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.75rem)}
.prose{max-width:var(--measure)}
.prose p{color:var(--ink-soft)}
.label{
  font-size:var(--step--1);font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 var(--sp-3);
}
.data{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- barra ---------- */
header.bar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--ground) 86%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.bar-inner{
  max-width:72rem;margin-inline:auto;
  padding:var(--sp-3) clamp(1.15rem,4vw,2.75rem);
  display:flex;align-items:center;gap:var(--sp-4);
}
.brand{
  display:flex;align-items:baseline;gap:.5rem;text-decoration:none;color:var(--ink);
  font-family:"Newsreader",serif;font-weight:600;font-size:1.15rem;letter-spacing:-.015em;
}
.brand img{max-height:40px;width:auto;align-self:center}
.brand span{color:var(--ink-faint);font-family:"IBM Plex Sans",sans-serif;font-weight:500;font-size:.8rem;letter-spacing:.01em}
.bar nav{margin-left:auto;display:flex;gap:var(--sp-6);align-items:center}
.bar nav a{font-size:.92rem;color:var(--ink-soft);text-decoration:none;transition:color .15s}
.bar nav a:hover{color:var(--ink)}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:600;font-size:.94rem;padding:.62rem 1.1rem;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--btn-ink)}
.btn-primary:hover{background:var(--accent-strong);color:var(--btn-ink)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:var(--surface)}
.btn-ghost:hover{border-color:var(--accent)}
.bar .btn{padding:.5rem .95rem}
@media(max-width:840px){.bar nav a:not(.btn){display:none}}

/* ---------- hero ---------- */
.hero{background:var(--hero-bg);border-bottom:1px solid var(--line);padding:var(--sp-12) 0}
.hero-grid{display:grid;gap:var(--sp-10);grid-template-columns:1fr;align-items:start}
@media(min-width:920px){
  .hero-grid{grid-template-columns:1.1fr .9fr;gap:var(--sp-16)}
}
.hero-logo{color:var(--accent);max-width:22rem;margin-bottom:var(--sp-6)}
.hero-logo svg{width:100%;height:auto;display:block}
.hero-banner{width:100%;max-width:32rem;height:auto;display:block;margin-bottom:var(--sp-6)}
.hero h1{font-size:var(--hero);font-weight:500;max-width:12ch}
.hero .place{
  margin:var(--sp-5) 0;color:var(--ink-soft);font-size:1rem;
  display:flex;flex-wrap:wrap;gap:.35rem .8rem;align-items:baseline;
}
.hero .place b{color:var(--ink);font-weight:600}
.hero .place .sep{color:var(--line-strong)}
.hero .lead{font-size:var(--step-1);color:var(--ink-soft);max-width:38ch;margin-bottom:var(--sp-6)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.hero .capability{margin-top:var(--sp-6)}

.hero-photo{
  position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);background:var(--surface-sunk);
}
.hero-photo .gal-item{
  display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  aspect-ratio:4/3;
}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.6rem .8rem;
  font-size:.8rem;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);
}
.hero-photo > svg{aspect-ratio:4/5;width:100%;height:auto}

/* ---------- blocos ---------- */
section.block{padding:var(--sp-16) 0;border-top:1px solid var(--line)}
.hero + .block{border-top:0}
.block > .wrap > h2{font-size:var(--step-3);max-width:20ch;margin-bottom:var(--sp-8)}

.about-grid{display:grid;gap:var(--sp-10);grid-template-columns:1fr}
@media(min-width:900px){.about-grid{grid-template-columns:1fr 19rem;gap:var(--sp-16)}}
.about-grid > div > h2{font-size:var(--step-3);margin-bottom:var(--sp-6)}
.about-body{max-width:var(--measure)}
.about-body :where(p){color:var(--ink-soft);margin:0 0 var(--sp-4)}
.about-body :where(strong,b){color:var(--ink)}
.about-body :where(span[style],font[color]){color:var(--ink)!important;background:none!important}

.panel{
  align-self:start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--sp-6);box-shadow:var(--shadow-sm);
}
.panel .name{font-family:"Newsreader",serif;font-size:1.2rem;font-weight:600;margin:0 0 .1rem;line-height:1.2}
.panel .role{color:var(--ink-soft);font-size:.95rem;margin:0}
.panel .lines{
  margin:var(--sp-4) 0 0;padding-top:var(--sp-4);border-top:1px solid var(--line);
  display:grid;gap:.3rem;font-size:1rem;
}
.panel .lines a{color:var(--ink);text-decoration:none}
.panel .lines a:hover{color:var(--accent-strong)}

.capability{
  margin-top:var(--sp-8);display:flex;gap:.75rem;align-items:flex-start;
  color:var(--accent-strong);font-weight:600;
}
.capability svg{flex:none;margin-top:.15rem;color:var(--accent)}

/* serviços — lista tipo ficha, não grade de cards */
.specs{margin:0;border-top:1px solid var(--line)}
.specs > div{
  display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:var(--sp-4);
  align-items:start;padding:var(--sp-6) 0;border-bottom:1px solid var(--line);
}
@media(min-width:720px){
  .specs > div{grid-template-columns:2.25rem 14rem minmax(0,1fr);align-items:baseline}
}
.specs .ico-img{
  width:2.25rem;height:2.25rem;display:block;color:var(--accent);
  background:var(--accent-wash) center/58% no-repeat;border-radius:var(--radius);
}
.specs img.ico-img{padding:.5rem;object-fit:contain}
.specs dt{font-family:"Newsreader",serif;font-size:1.12rem;font-weight:600;color:var(--ink);line-height:1.25}
.specs dd{margin:0;color:var(--ink-soft);font-size:.98rem}
.specs > div:has(dd:empty){grid-template-columns:2.25rem minmax(0,1fr)}

/* galeria */
.gal-album + .gal-album{margin-top:var(--sp-12)}
.gal-album h3{
  font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:0;
  color:var(--ink-soft);margin:0 0 var(--sp-4);
}
.gal-grid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr))}
.gal-grid button{
  padding:0;border:1px solid var(--line);background:var(--surface-sunk);
  border-radius:var(--radius);overflow:hidden;cursor:pointer;aspect-ratio:1;
  position:relative;transition:border-color .15s;
}
.gal-grid button:hover{border-color:var(--accent)}
.gal-grid img{width:100%;height:100%;object-fit:cover}
.gal-grid figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.45rem .6rem;text-align:left;
  font-size:.72rem;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.62),transparent);
}

/* páginas extras */
.pages article + article{margin-top:var(--sp-12);padding-top:var(--sp-12);border-top:1px solid var(--line)}
.pages h3{font-size:var(--step-2);margin-bottom:var(--sp-3)}
.pages .prose :where(p,li){color:var(--ink-soft)}

/* promoções */
.promo-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}
.promo{background:var(--accent-wash);border-radius:var(--radius-lg);padding:var(--sp-6);overflow:hidden}
.promo-img{width:100%;height:auto;border-radius:var(--radius);margin-bottom:var(--sp-4);background:var(--surface-sunk)}
.promo h3{
  font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:0;
  margin:0 0 .35rem;color:var(--ink);
}
.promo p{color:var(--ink-soft);font-size:.94rem;margin:0}
.promo .valid{
  display:block;margin-top:var(--sp-4);font-size:.82rem;font-weight:600;
  color:var(--accent-strong);font-variant-numeric:tabular-nums;
}

/* localização + contato */
.contact{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--sp-8);box-shadow:var(--shadow-sm);
}
.contact--wide{max-width:34rem}
.contact dl{margin:0}
.contact > dl > div + div{margin-top:var(--sp-5)}
.contact dt{font-size:var(--step--1);font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.3rem}
.contact dd{margin:0;font-size:1.05rem;line-height:1.55}
.contact dd a{color:var(--ink);text-decoration:none}
.contact dd a:hover{color:var(--accent-strong)}
.contact .btn{justify-content:center;margin-top:var(--sp-6)}
@media(max-width:520px){.contact .btn{width:100%}}

/* rodapé */
footer.site{border-top:1px solid var(--line);padding:var(--sp-12) 0;color:var(--ink-soft);font-size:.92rem}
.foot-inner{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-8);align-items:baseline;justify-content:space-between}
.foot-inner a{color:var(--ink);text-decoration:none}
.foot-inner a:hover{color:var(--accent-strong)}

/* lightbox */
dialog.lb{border:none;padding:0;background:transparent;max-width:min(92vw,58rem)}
dialog.lb::backdrop{background:rgba(8,12,9,.84)}
dialog.lb .frame{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
dialog.lb #lbImg{background:var(--surface-sunk)}
dialog.lb #lbImg img{width:100%;max-height:78vh;object-fit:contain;display:block}
dialog.lb #lbImg:empty{aspect-ratio:3/2}
dialog.lb .cap{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1.1rem;font-size:.9rem;color:var(--ink-soft)}
dialog.lb .cap button{background:none;border:none;color:var(--ink);cursor:pointer;font:inherit;font-weight:600}

/* motion — uma entrada suave, com respeito a reduced-motion */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn:active{transform:none}
}