/* Alvaro Passos — Marketing & Sites — componentes institucionais (nav, hero, cards) */

/* ---------- header / nav ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.9); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav__row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1.05rem }
.nav__brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; font-family:var(--serif); font-weight:700; font-size:1.15rem; color:var(--ink) }
.nav__brand span{ color:var(--green-deep) }
.nav__links{ display:flex; align-items:center; gap:2rem; list-style:none }
.nav__links a{ text-decoration:none; font-size:.95rem; font-weight:600; color:var(--ink-dim); transition:color .15s ease }
.nav__links a:hover, .nav__links a[aria-current="page"]{ color:var(--green-deep) }
.nav__cta{ display:none }
.nav__toggle{
  position:relative; z-index:42;
  display:inline-flex; background:none; border:1px solid var(--line); border-radius:2px;
  color:var(--ink); width:2.6rem; height:2.6rem; align-items:center; justify-content:center; cursor:pointer;
}
.nav__toggle[aria-expanded="true"]{ background:var(--bg); border-color:var(--ink-mut) }
.nav__scrim{
  display:none; position:fixed; inset:0; z-index:39;
  background:rgba(16,14,10,.4); opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
.nav__scrim[data-open="true"]{ display:block; opacity:1; pointer-events:auto }
@media (min-width:900px){
  .nav__toggle{ display:none }
  .nav__cta{ display:inline-flex }
}
@media (max-width:899px){
  .nav__links{
    position:fixed; inset:auto 0 auto 0; top:100%; z-index:41;
    max-height:calc(100dvh - 100%);
    background:var(--bg); border-bottom:1px solid var(--line);
    box-shadow:0 24px 48px -24px rgba(15,20,15,.25);
    flex-direction:column; align-items:stretch; gap:0;
    padding:.5rem 1.6rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease; overflow-y:auto;
  }
  .nav__links[data-open="true"]{ opacity:1; transform:translateY(0); pointer-events:auto }
  .nav__links li{ width:100%; border-bottom:1px solid var(--line) }
  .nav__links a{ display:block; padding:1rem 0 }
  .nav__links .nav__cta{ display:inline-flex; margin-top:1.2rem; width:100% }
}

/* ---------- hero ---------- */
.hero{ padding-block:clamp(4rem,10vw,8rem) clamp(3rem,7vw,5rem) }
.hero__grid{ display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1.15fr .85fr; align-items:center }
@media (max-width:860px){ .hero__grid{ grid-template-columns:1fr } }
.hero h1{ margin-top:1.1rem }
.hero .lead{ margin-top:1.3rem; max-width:52ch }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem }
.hero__photo{
  position:relative; width:100%; aspect-ratio:4/5; border-radius:10px; overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(15,20,15,.35);
  display:flex; align-items:center; justify-content:center;
}
.hero__photo img{ width:100%; height:100%; object-fit:cover }
.hero__initials{ font-family:var(--serif); font-size:5rem; color:var(--on-green); opacity:.7; background:linear-gradient(155deg,var(--green-deep),var(--green)); width:100%; height:100%; display:flex; align-items:center; justify-content:center }

/* ---------- prova social / faixa de números ---------- */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  margin-top:3rem; border-top:1px solid var(--line); padding-top:1.8rem;
}
.stat{ padding-inline:1.8rem 0; border-left:1px solid var(--line) }
.stat:first-child{ border-left:0; padding-left:0 }
@media (max-width:480px){
  .stats{ grid-template-columns:1fr; gap:1rem }
  .stat{ padding-inline:0; border-left:0 }
}
.stat b{ display:block; font-family:var(--serif); font-size:clamp(1.8rem,1.3rem+2vw,2.6rem); color:var(--green-deep) }
.stat span{ display:block; margin-top:.35rem; color:var(--ink-dim); font-size:.92rem }

/* ---------- cards ---------- */
.grid{ display:grid; gap:1.5rem; margin-top:2.8rem }
.grid--2{ grid-template-columns:repeat(2,1fr) }
.grid--3{ grid-template-columns:repeat(3,1fr) }
.grid--4{ grid-template-columns:repeat(4,1fr) }
@media (max-width:900px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:620px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr } }

.card{
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:1.8rem 1.6rem; box-shadow:0 1px 3px rgba(20,17,13,.04);
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.card:hover{ border-color:var(--green); transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(15,51,42,.35) }
.card__num{ font-family:var(--serif); color:var(--green-deep); font-size:1.6rem }
.card h3{ margin-top:.6rem }
.card p{ margin-top:.6rem; color:var(--ink-dim); font-size:.96rem }
.card ul{ margin-top:1rem; padding-left:1.1rem; color:var(--ink-dim); font-size:.93rem; display:flex; flex-direction:column; gap:.45rem }

/* ---------- portfolio ---------- */
.case{
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:2rem; display:flex; flex-direction:column; gap:.9rem;
  box-shadow:0 1px 3px rgba(20,17,13,.04); transition:box-shadow .15s ease, transform .15s ease;
}
.case:hover{ box-shadow:0 20px 40px -24px rgba(15,51,42,.35); transform:translateY(-3px) }
.case__tag{ display:inline-flex; align-self:flex-start; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-deep); border:1px solid var(--green-deep); padding:.25rem .6rem; border-radius:2px }
.case__tag--pendente{ color:var(--ink-mut); border-color:var(--line) }
.case h3{ margin:0 }
.case p{ color:var(--ink-dim); font-size:.95rem }
.case__link{ margin-top:.4rem; font-weight:700; color:var(--green-deep); text-decoration:none; font-size:.92rem }
.case__link:hover{ text-decoration:underline }
.troca{ color:var(--red); font-style:italic; font-size:.88rem }

.case__shot{
  width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:3px;
  border:1px solid var(--line); background:var(--bg-3);
}
.shot-tile{
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
  box-shadow:0 1px 3px rgba(20,17,13,.05); transition:box-shadow .15s ease, transform .15s ease;
  line-height:0;
}
.shot-tile:hover{ box-shadow:0 14px 28px -18px rgba(20,17,13,.25); transform:translateY(-3px) }
.shot-tile img{ width:100%; display:block }
.case__shot--pending{
  width:100%; aspect-ratio:16/10; border-radius:3px;
  border:1px dashed var(--line); background:linear-gradient(155deg,var(--bg-3),var(--bg-2));
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-mut); font-size:.82rem; text-align:center; padding:1rem;
}
.section-lead{ color:var(--ink-dim); max-width:60ch; margin-top:.8rem }

/* ---------- cta banda ---------- */
.cta-band{
  background:linear-gradient(155deg,var(--green-deep),var(--green));
  border-radius:16px; padding:clamp(2.6rem,6vw,4.2rem); text-align:center; margin-top:1rem;
  color:var(--on-green);
}
.cta-band h2{ margin-bottom:.8rem; color:var(--on-green) }
.cta-band .eyebrow{ color:rgba(244,247,245,.75) }
.cta-band .eyebrow::before{ background:rgba(244,247,245,.55) }
.cta-band .lead{ color:rgba(244,247,245,.85) }
.cta-band .btn{ --btn-bg:var(--on-green); --btn-fg:var(--green-deep); box-shadow:0 16px 34px -14px rgba(0,0,0,.4) }
.cta-band .btn:hover{ background:#fff; border-color:#fff }

/* ---------- contato ---------- */
.contact-grid{ display:grid; gap:2rem; grid-template-columns:1fr 1fr; margin-top:2.5rem }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr } }
.contact-card{ background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:2rem; box-shadow:0 1px 3px rgba(20,17,13,.04) }
.contact-card h3{ margin-bottom:.6rem }
.contact-card p{ color:var(--ink-dim) }
.contact-card .btn{ margin-top:1.2rem }

/* ---------- whatsapp flutuante ---------- */
.wa-float{
  position:fixed; right:1.2rem; bottom:calc(1.2rem + env(safe-area-inset-bottom, 0px)); z-index:50;
  display:flex; align-items:center; gap:.6rem;
  background:var(--green); color:var(--on-green); text-decoration:none;
  padding:.85rem 1.2rem; border-radius:99px; font-weight:700; font-size:.92rem;
  box-shadow:0 12px 30px -10px rgba(15,51,42,.5);
  transition:transform .15s ease, bottom .2s ease;
}
.wa-float:hover{ transform:translateY(-2px) }
body:has(#cookie-banner:not([hidden])) .wa-float{ bottom:calc(6.5rem + env(safe-area-inset-bottom, 0px)) }
@media (max-width:480px){
  body:has(#cookie-banner:not([hidden])) .wa-float{ bottom:calc(9rem + env(safe-area-inset-bottom, 0px)) }
}

/* ---------- cookie banner ---------- */
.cookie{
  position:fixed; left:1rem; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom, 0px)); z-index:60;
  max-width:640px; margin-inline:auto;
  background:var(--bg); border:1px solid var(--line); border-radius:12px;
  padding:1.2rem 1.4rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  box-shadow:0 20px 45px -20px rgba(20,17,13,.35);
}
.cookie p{ flex:1 1 260px; font-size:.86rem; color:var(--ink-dim); max-width:none }
.cookie button{ flex:0 0 auto }
@media (max-width:480px){
  .cookie{ left:.75rem; right:.75rem; padding:1rem 1.1rem; flex-direction:column; align-items:stretch; text-align:left }
  .cookie button{ width:100% }
}

@media (prefers-reduced-motion:reduce){
  .nav__links{ transition:none }
}