/* ===== Janus — Design System ===== */
:root{
  --bg:#0b0b0f;
  --bg-2:#111116;
  --bg-3:#16161d;
  --fg:#f4f1ea;
  --muted:#8c8a92;
  --gold:#c9a24b;
  --gold-soft:#e3c988;
  --line:rgba(201,162,75,0.16);
  --line-strong:rgba(201,162,75,0.32);
  color-scheme: dark;
  transition:background-color 260ms ease, color 260ms ease;
}

/* Light theme — applied when the visitor toggles it (persisted via localStorage) */
:root[data-theme="light"]{
  --bg:#f8f6f1;
  --bg-2:#ffffff;
  --bg-3:#f0ebe0;
  --fg:#201d18;
  --muted:#6b6459;
  --gold:#a97a28;
  --gold-soft:#8a621d;
  --line:rgba(150,105,30,0.18);
  --line-strong:rgba(150,105,30,0.35);
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  overflow-x:hidden;
  transition:background-color 260ms ease, color 260ms ease;
}

/* While the circular view-transition reveal is running, suspend the ordinary
   color transitions so they don't crossfade underneath the clip-path wipe */
:root.theme-switching,
:root.theme-switching body,
:root.theme-switching *{
  transition:none !important;
}

/* ---------- Theme switch animation (circular reveal from the toggle button) ---------- */
::view-transition-old(root),
::view-transition-new(root){
  animation:none;
  mix-blend-mode:normal;
}
::view-transition-old(root){ z-index:1 }
::view-transition-new(root){ z-index:2 }
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font-family:inherit}

.wrap{max-width:1180px; margin-inline:auto; padding-inline:24px}

/* ---------- Nav ---------- */
header.nav{
  position:sticky; top:0;
  display:flex; align-items:center; justify-content:space-between;
  padding-block:20px;
  z-index:40;
  background:rgba(11,11,15,0.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color 200ms ease;
  /* Nav bar always keeps the dark-theme palette, regardless of --bg/--fg below */
  --fg:#f4f1ea;
  --muted:#8c8a92;
  --line:rgba(201,162,75,0.16);
  --line-strong:rgba(201,162,75,0.32);
  --bg-3:#16161d;
  color:var(--fg);
}
header.nav.scrolled{ border-bottom-color:var(--line) }
/* Keep the nav bar itself solid dark even in light theme (avoid the 72%-opacity
   overlay blending lighter against the light page background behind it) */
:root[data-theme="light"] header.nav{ background:rgba(11,11,15,0.86) }
.nav-inner{
  max-width:1180px; margin-inline:auto; padding-inline:24px;
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
}
.logotype{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  font-size:22px;
  letter-spacing:0.02em;
  color:var(--fg);
  display:flex; align-items:center; gap:10px;
}
.logotype .glyph{ width:18px; height:18px; display:inline-block }

.nav-links{
  display:flex; align-items:center; gap:36px;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-size:14px; color:var(--muted);
  transition:color 160ms ease;
  position:relative;
}
.nav-links a:hover, .nav-links a.active{ color:var(--fg) }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:var(--gold);
}
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px;
  border:1px solid var(--gold);
  border-radius:999px;
  font-size:13px; letter-spacing:0.02em;
  background:transparent;
  transition:background 200ms ease, color 200ms ease;
}
.nav-cta:hover{ background:var(--gold); color:#151217 }

/* ---------- Theme toggle ---------- */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:none;
  border:1px solid var(--line-strong);
  border-radius:50%;
  background:transparent;
  color:var(--fg);
  cursor:pointer;
  transition:border-color 160ms ease, background 160ms ease;
}
.theme-toggle:hover{ border-color:var(--gold); background:var(--bg-3) }
.theme-toggle svg{ width:17px; height:17px }
.theme-toggle .icon-moon{ display:none }
:root[data-theme="light"] .theme-toggle .icon-sun{ display:none }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:block }
.nav-actions{ display:flex; align-items:center; gap:12px }

/* Keep the Janus glyph's vertical line legible in both themes */
.logotype svg line{ stroke:var(--fg) }

.burger{
  display:none; flex-direction:column; gap:5px; cursor:pointer;
  background:none; border:0; padding:8px; margin:-8px;
}
.burger span{width:22px; height:1px; background:var(--fg); display:block}

.mobile-menu{
  display:none;
  position:fixed; inset:0; z-index:60;
  background:var(--bg);
  flex-direction:column;
  padding:24px;
  transform:translateY(-100%);
  transition:transform 320ms cubic-bezier(.2,.7,.2,1);
}
.mobile-menu.open{ transform:translateY(0) }
.mobile-menu .top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:48px }
.mobile-menu .close{ background:none; border:0; color:var(--fg); font-size:22px; cursor:pointer; padding:8px; margin:-8px }
.mobile-menu nav{ display:flex; flex-direction:column; gap:6px }
.mobile-menu nav a{
  font-family:'Fraunces',Georgia,serif; font-size:32px; font-weight:500;
  color:var(--fg); padding-block:14px; border-bottom:1px solid var(--line);
}
.mobile-menu .cta{ margin-top:auto }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px;
  border-radius:999px;
  font-size:14px; letter-spacing:0.02em;
  cursor:pointer;
  border:1px solid var(--gold);
  background:transparent; color:var(--fg);
  transition:background 200ms ease, color 200ms ease, transform 160ms ease;
}
.btn:hover{ background:var(--gold); color:#151217 }
.btn.solid{ background:var(--gold); color:#151217 }
.btn.solid:hover{ background:var(--gold-soft); border-color:var(--gold-soft) }
.btn.ghost{ border-color:var(--line-strong); color:var(--muted) }
.btn.ghost:hover{ background:var(--bg-3); color:var(--fg) }

/* ---------- Eyebrow / section headers ---------- */
.eyebrow{
  font-family:ui-monospace,'SF Mono',Consolas,monospace;
  font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold-soft);
  margin:0 0 16px;
}
.section-head{ max-width:640px; margin-bottom:56px }
.section-head h2{
  font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:clamp(28px,4.2vw,44px);
  line-height:1.12; letter-spacing:-0.01em;
  margin:0 0 16px;
  text-wrap:balance;
}
.section-head p{ font-size:16px; line-height:1.6; color:var(--muted); margin:0; max-width:52ch }

section{ padding-block:96px }
section.tight{ padding-block:56px }
@media (max-width:720px){
  section{ padding-block:64px }
}

/* ---------- Hero (page headers) ---------- */
.page-hero{
  position:relative;
  padding-block:120px 80px;
  isolation:isolate;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:-60%;
  background:repeating-linear-gradient(115deg, var(--line) 0px, var(--line) 1px, transparent 1px, transparent 34px);
  animation:drift 26s linear infinite;
  z-index:-1;
}
.page-hero::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 20% 30%, rgba(201,162,75,0.10), transparent 60%);
  z-index:-1;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) }
  to{ transform:translate3d(-120px,80px,0) }
}
.page-hero h1{
  font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:clamp(34px,6vw,64px);
  line-height:1.06; letter-spacing:-0.01em;
  margin:0 0 20px; max-width:820px;
  text-wrap:balance;
}
.page-hero p.lede{
  font-size:18px; line-height:1.6; color:var(--muted);
  max-width:56ch; margin:0 0 32px;
}
.page-hero .cta-row{ display:flex; gap:14px; flex-wrap:wrap }

/* ---------- Cards / grids ---------- */
.grid{ display:grid; gap:20px }
.grid.cols-3{ grid-template-columns:repeat(3,1fr) }
.grid.cols-2{ grid-template-columns:repeat(2,1fr) }
@media (max-width:900px){
  .grid.cols-3{ grid-template-columns:1fr 1fr }
}
@media (max-width:640px){
  .grid.cols-3, .grid.cols-2{ grid-template-columns:1fr }
}

.card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:16px;
  padding:32px 28px;
  transition:border-color 200ms ease, transform 200ms ease;
}
.card:hover{ border-color:var(--line-strong); transform:translateY(-2px) }
.card .num{
  font-family:ui-monospace,'SF Mono',Consolas,monospace;
  font-size:12px; color:var(--gold-soft); letter-spacing:0.1em;
  margin-bottom:18px; display:block;
}
.card h3{
  font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:21px; margin:0 0 12px;
}
.card p{ font-size:14.5px; line-height:1.65; color:var(--muted); margin:0 }
.card ul{ margin:14px 0 0; padding-left:18px; color:var(--muted); font-size:14px; line-height:1.8 }
/* Card em retângulo: ocupa toda a largura da grade (alinhado às 3 colunas) */
.card.wide{ grid-column:1 / -1 }
.card.wide ul{ columns:3; column-gap:40px }
.card.wide ul li{ break-inside:avoid }
@media (max-width:900px){ .card.wide ul{ columns:1 } }

/* Linha do tempo animada: Diagnóstico → Plano → Acompanhamento */
.card ul.steps{
  list-style:none; columns:auto; padding:0; margin:26px 0 0;
  display:grid; grid-template-columns:repeat(3,1fr); position:relative;
}
.steps li{ position:relative; padding-top:28px; padding-right:16px }
.steps::before, .steps::after{
  content:""; position:absolute; top:5px; left:6px; height:2px;
  width:calc(66.666% - 0px); border-radius:2px;
}
.steps::before{ background:var(--line-strong) }
.steps::after{
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transform-origin:left center; transform:scaleX(0);
}
.steps li::before{
  content:""; position:absolute; top:0; left:0; width:12px; height:12px; border-radius:50%;
  background:var(--bg-2); border:1.5px solid var(--line-strong); box-sizing:border-box;
}
.card.in .steps::after{ animation:stepLine 8s ease-in-out infinite }
.card.in .steps li:nth-child(1)::before{ animation:stepDot1 8s ease-in-out infinite }
.card.in .steps li:nth-child(2)::before{ animation:stepDot2 8s ease-in-out infinite }
.card.in .steps li:nth-child(3)::before{ animation:stepDot3 8s ease-in-out infinite }
@keyframes stepLine{
  0%{ transform:scaleX(0); opacity:1 }
  60%{ transform:scaleX(1) }
  90%{ transform:scaleX(1); opacity:1 }
  100%{ transform:scaleX(1); opacity:0 }
}
@keyframes stepDot1{
  0%{ background:var(--bg-2); border-color:var(--line-strong); box-shadow:none }
  3%,90%{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 4px rgba(201,162,75,.18) }
  100%{ background:var(--bg-2); border-color:var(--line-strong); box-shadow:none }
}
@keyframes stepDot2{
  0%,27%{ background:var(--bg-2); border-color:var(--line-strong); box-shadow:none }
  31%,90%{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 4px rgba(201,162,75,.18) }
  100%{ background:var(--bg-2); border-color:var(--line-strong); box-shadow:none }
}
@keyframes stepDot3{
  0%,57%{ background:var(--bg-2); border-color:var(--line-strong); box-shadow:none }
  61%,90%{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 4px rgba(201,162,75,.18) }
  100%{ background:var(--bg-2); border-color:var(--line-strong); box-shadow:none }
}
@media (max-width:900px){
  .card ul.steps{ grid-template-columns:1fr; row-gap:18px }
  .steps li{ padding:0 0 0 30px }
  .steps::before, .steps::after{ top:6px; left:5px; width:2px; height:calc(100% - 28px) }
  .steps::after{ transform-origin:center top; transform:scaleY(0) }
  .card.in .steps::after{ animation-name:stepLineV }
  .steps li::before{ top:3px }
}
@keyframes stepLineV{
  0%{ transform:scaleY(0); opacity:1 }
  60%{ transform:scaleY(1) }
  90%{ transform:scaleY(1); opacity:1 }
  100%{ transform:scaleY(1); opacity:0 }
}
@media (prefers-reduced-motion:reduce){
  .card.in .steps::after, .card.in .steps li::before{ animation:none !important }
  .steps::after{ transform:none }
  .steps li::before{ background:var(--gold); border-color:var(--gold) }
}

/* ---------- Stats ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-block:40px;
}
.stat b{
  display:block; font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:clamp(26px,3.4vw,40px); color:var(--gold-soft);
}
.stat span{ font-size:13px; color:var(--muted) }
@media (max-width:720px){
  .stats{ grid-template-columns:1fr 1fr; row-gap:28px }
}

/* ---------- Quote / testimonial ---------- */
.quote-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
  padding:36px 32px; display:flex; flex-direction:column; gap:20px;
}
.quote-card p.q{
  font-family:'Fraunces',Georgia,serif; font-size:19px; line-height:1.5;
  font-weight:500; margin:0; color:var(--fg);
}
.quote-card .who{ display:flex; align-items:center; gap:12px; margin-top:auto }
.quote-card .avatar{
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-soft));
  display:flex; align-items:center; justify-content:center;
  color:#151217; font-weight:600; font-size:14px; flex:none;
}
.quote-card .name{ font-size:14px; color:var(--fg) }
.quote-card .role{ font-size:12.5px; color:var(--muted) }

/* ---------- Logos strip ---------- */
.logos-strip{
  display:flex; flex-wrap:wrap; gap:40px; align-items:center; justify-content:space-between;
  padding-block:32px; opacity:0.9;
}
.logos-strip img{ filter:grayscale(1) brightness(1.6); opacity:0.85; transition:opacity 200ms ease, filter 200ms ease }
.logos-strip img:hover{ filter:none; opacity:1 }
/* The brighten-up filter is tuned for the dark background — on light theme it
   washes the logo out to near-invisible, so darken it for contrast instead */
:root[data-theme="light"] .logos-strip img{ filter:grayscale(1) brightness(0.45) contrast(1.15) }
:root[data-theme="light"] .logos-strip img:hover{ filter:none }
.logos-strip span{
  font-family:'Fraunces',Georgia,serif; font-size:17px; color:var(--muted);
  letter-spacing:0.02em;
}

/* ---------- Timeline (sobre) ---------- */
.timeline{ display:flex; flex-direction:column; gap:0; border-left:1px solid var(--line); margin-left:6px }
.timeline .item{ position:relative; padding:0 0 40px 32px }
.timeline .item::before{
  content:""; position:absolute; left:-6.5px; top:4px; width:11px; height:11px;
  border-radius:50%; background:var(--bg); border:1.5px solid var(--gold);
}
.timeline .item h4{ font-family:'Fraunces',Georgia,serif; font-size:18px; margin:0 0 8px; color:var(--fg) }
.timeline .item p{ font-size:14.5px; color:var(--muted); line-height:1.6; margin:0; max-width:56ch }

/* ---------- Values grid (sobre) ---------- */
.value-row{
  display:flex; gap:20px; padding-block:24px; border-top:1px solid var(--line);
}
.value-row:last-child{ border-bottom:1px solid var(--line) }
.value-row .tag{
  flex:none; width:120px;
  font-family:ui-monospace,'SF Mono',Consolas,monospace;
  font-size:12px; color:var(--gold-soft); letter-spacing:0.08em; padding-top:2px;
}
.value-row .body h4{ font-family:'Fraunces',Georgia,serif; font-size:18px; margin:0 0 6px }
.value-row .body p{ font-size:14.5px; color:var(--muted); line-height:1.6; margin:0; max-width:60ch }

/* ---------- CTA band ---------- */
.cta-band{
  border:1px solid var(--line-strong); border-radius:20px;
  padding:56px 48px; text-align:center;
  background:radial-gradient(ellipse at 50% 0%, rgba(201,162,75,0.08), transparent 70%);
}
.cta-band h2{
  font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:clamp(26px,4vw,38px); margin:0 0 16px;
}
.cta-band p{ color:var(--muted); font-size:16px; margin:0 0 28px }
.cta-band .cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap }
@media (max-width:600px){
  .cta-band{ padding:40px 24px }
}

/* ---------- Forms (contato) ---------- */
.form-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start }
@media (max-width:880px){ .form-grid{ grid-template-columns:1fr } }

.field{ margin-bottom:20px }
.field label{
  display:block; font-size:12.5px; letter-spacing:0.04em; color:var(--muted);
  margin-bottom:8px; text-transform:uppercase;
}
.field input, .field textarea, .field select{
  width:100%; background:var(--bg-2); border:1px solid var(--line);
  border-radius:10px; padding:13px 16px; color:var(--fg);
  font-family:inherit; font-size:14.5px; outline:none;
  transition:border-color 160ms ease;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--gold) }
.field textarea{ resize:vertical; min-height:120px }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width:480px){ .field-row{ grid-template-columns:1fr } }

.contact-info .item{ display:flex; gap:16px; padding-block:18px; border-top:1px solid var(--line) }
.contact-info .item:last-child{ border-bottom:1px solid var(--line) }
.contact-info .item .ico{
  width:38px; height:38px; border-radius:10px; flex:none;
  border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
  color:var(--gold-soft);
}
.contact-info .item h4{ font-size:14px; margin:0 0 4px; color:var(--fg) }
.contact-info .item p{ font-size:13.5px; color:var(--muted); margin:0; line-height:1.5 }

/* ---------- Footer ---------- */
footer.site-footer{
  border-top:1px solid var(--line);
  padding-block:56px 32px;
  margin-top:60px;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:40px;
}
@media (max-width:800px){
  .footer-grid{ grid-template-columns:1fr 1fr; row-gap:32px }
}
.footer-grid h5{
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
  margin:0 0 16px;
}
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.footer-grid ul a{ font-size:14px; color:var(--fg); opacity:0.85 }
.footer-grid ul a:hover{ opacity:1; color:var(--gold-soft) }
.footer-brand .logotype{ margin-bottom:14px }
.footer-brand p{ font-size:13.5px; color:var(--muted); line-height:1.6; max-width:34ch; margin:0 }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-top:24px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted);
}

/* ---------- Reveal-on-load ---------- */
.reveal{ opacity:0; transform:translateY(14px) }
.reveal.in{ animation:up 720ms cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes up{ to{ opacity:1; transform:translateY(0) } }

@media (prefers-reduced-motion: reduce){
  .page-hero::before{ animation:none }
  .reveal, .reveal.in{ animation:none; opacity:1; transform:none }
}

@media (max-width:860px){
  .nav-links{ display:none }
  .burger{ display:flex }
  .nav-actions .nav-cta{ display:none }
}