/* =========================================================
   HOME — Márcio Zulian
   Tema "hub": tinta quente + osso + bronze
   ========================================================= */
:root{
  --rule:rgba(20,18,14,.13);
  --muted-form:#6B6152;
  --focus:#8A5F26;
  --nav-stuck-bg:rgba(20,18,14,.95);
}
body{background:var(--bone)}

/* fundo com textura sutil de papel */
body::before{
  content:"";position:fixed;inset:0;z-index:-10;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(20,18,14,.045) 1px, transparent 1px);
  background-size:3px 3px;
}

.nav{color:var(--bone)}
.nav.is-stuck{color:var(--bone)}

/* ---------------- HERO ---------------- */
.hero__scrim{
  background:
    linear-gradient(180deg,rgba(12,11,9,.72) 0%,rgba(12,11,9,.18) 30%,rgba(12,11,9,.62) 62%,rgba(12,11,9,.94) 100%),
    linear-gradient(95deg,rgba(12,11,9,.74) 0%,rgba(12,11,9,.1) 62%);
}
.hero .eyebrow{color:#E4B472;text-shadow:0 1px 14px rgba(0,0,0,.75)}
/* ---- capa ----
   Desktop: foto horizontal ocupa tudo, texto à esquerda sobre o céu.
   Celular: a vertical ganha faixa própria e o texto desce pro fundo sólido,
   assim o Márcio aparece inteiro em vez de sumir atrás do scrim. */
.hero__media img{object-position:center center}

@media(max-width:859px){
  .hero{display:flex;flex-direction:column;min-height:auto;align-items:stretch}
  /* a faixa da foto e o texto juntos precisam caber na dobra: 44svh, teto de 380px */
  .hero__media{position:relative;inset:auto;z-index:0;width:100%;height:min(44svh,380px);min-height:230px}
  .hero__media img{object-position:60% 52%}
  .hero__scrim{
    position:absolute;top:0;left:0;right:0;height:min(44svh,380px);min-height:230px;z-index:1;
    background:linear-gradient(180deg,rgba(12,11,9,.62) 0%,rgba(12,11,9,.04) 26%,rgba(12,11,9,.55) 82%,var(--ink) 100%);
  }
  .hero__in{position:relative;z-index:2;background:var(--ink);padding-block:.35rem clamp(1.8rem,5vh,2.6rem)}
  .hero .eyebrow{margin-bottom:.75rem}
  .hero__sub{margin-top:1rem}
  .hero__acts{margin-top:1.4rem}
  .hero__scroll{display:none}
}
.hero__in{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.hero h1{max-width:16ch}
.hero h1 .i{font-style:italic;color:var(--accent)}
.hero__sub{max-width:52ch;margin-top:clamp(1.4rem,3vw,2rem);opacity:.88;font-size:var(--fs-lead)}
.hero__acts{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(2rem,4vw,2.8rem)}
.hero__acts .btn--ghost{border-color:rgba(246,242,233,.5)}

/* notebook de tela baixa: aperta o ritmo pra os botoes nao cairem abaixo da dobra */
@media(min-width:860px) and (max-height:800px){
  .hero__in{padding-block:clamp(1.5rem,5vh,3rem)}
  .hero h1{font-size:clamp(2.2rem,1.1rem + 3.1vw,3.7rem)}
  .hero__sub{margin-top:1.1rem;font-size:1.02rem}
  .hero__acts{margin-top:1.6rem}
  .hero .eyebrow{margin-bottom:.85rem}
  .hero__in .btn--lg{padding:.95rem 1.9rem}
}

/* ---------------- FAIXA DE CREDENCIAIS ---------------- */
.creds,.about,.ig,.foot,.menu,.nav{--focus:var(--accent)}
.creds{background:var(--ink);color:var(--bone);padding-block:clamp(2rem,4vw,3rem)}
.creds .facts{border-top:0}
.creds .fact{border-bottom:0;border-left:1px solid rgba(246,242,233,.14);padding-left:clamp(1rem,2.5vw,2rem)}
.creds .fact:first-child{border-left:0;padding-left:0}
@media(max-width:639px){
  .creds .fact{border-left:0;border-bottom:1px solid rgba(246,242,233,.14);padding-left:0}
  .creds .fact:last-child{border-bottom:0}
}
.creds .fact__k{color:var(--accent)}
.creds .fact__l{color:rgba(246,242,233,.55)}

/* ---------------- MÉTODO ---------------- */
.method{background:var(--bone)}
.method__head{margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.method__head h2{max-width:19ch}
.pillar{
  padding-top:1.8rem;border-top:1px solid var(--rule);
  display:grid;gap:.85rem;align-content:start;
}
.pillar__n{
  font-family:var(--font-label);font-size:.68rem;letter-spacing:.24em;
  color:var(--accent);font-weight:600;
}
.pillar h3{font-size:var(--fs-h3)}
.pillar p{color:var(--muted);font-size:var(--fs-small);line-height:1.7}

/* retrato + citação */
.about{background:var(--ink);color:var(--bone)}
.about .eyebrow{color:var(--accent)}
.about blockquote{
  font-family:var(--font-display);font-size:clamp(1.4rem,1rem + 2vw,2.5rem);
  line-height:1.24;letter-spacing:-.015em;margin:0;
}
.about blockquote .i{font-style:italic;color:var(--accent)}
.about__who{display:flex;align-items:center;gap:1rem;margin-top:clamp(2rem,4vw,2.8rem)}
.about__who img{width:60px;height:60px;border-radius:50%;object-fit:cover;border:1px solid rgba(246,242,233,.25);flex:none}
.about__who b{display:block;font-weight:500;font-size:var(--fs-small)}
.about__who span{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,242,233,.5);margin-top:.25rem}
.about__list{display:grid;gap:1.1rem;margin-top:clamp(2rem,4vw,3rem)}
.about__list li{display:flex;gap:.9rem;font-size:var(--fs-small);line-height:1.65;color:rgba(246,242,233,.82)}
.about__list svg{width:18px;height:18px;flex:none;margin-top:.28em;color:var(--accent)}

/* ---------------- EMPREENDIMENTOS ---------------- */
.props__head{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(2.2rem,5vw,3.5rem)}
.props__head h2{max-width:14ch}

.prop{
  position:relative;display:block;overflow:hidden;border-radius:var(--radius-lg);
  background:var(--ink);color:#fff;isolation:isolate;
  min-height:clamp(430px,58vw,620px);
  display:flex;align-items:flex-end;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.prop:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.prop__img{position:absolute;inset:0;z-index:-2}
.prop__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.prop:hover .prop__img img{transform:scale(1.06)}
.prop::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.06) 18%,var(--prop-tint,rgba(12,11,9,.9)) 56%,var(--prop-tint,rgba(12,11,9,.9)) 100%);
}
.prop__in{padding:clamp(1.6rem,3.5vw,2.6rem);width:100%}
.prop__tag{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-label);font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  padding:.5em 1em;border-radius:100px;background:var(--prop-accent,var(--accent));color:#14120E;
  position:absolute;top:clamp(1.4rem,3vw,2.2rem);left:clamp(1.6rem,3.5vw,2.6rem);
}
.prop__name{font-family:var(--font-display);font-size:clamp(1.8rem,1.2rem + 2.2vw,3rem);line-height:1;letter-spacing:-.02em}
.prop__by{
  font-family:var(--font-label);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--prop-accent,var(--accent));margin-bottom:.9rem;display:block;font-weight:600;
  text-shadow:0 1px 10px rgba(0,0,0,.9),0 0 26px rgba(0,0,0,.7);
}
.prop__desc{margin-top:.9rem;font-size:var(--fs-small);line-height:1.62;opacity:.82;max-width:42ch}
.prop__specs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.prop__specs li{
  font-family:var(--font-label);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.45em .95em;border:1px solid rgba(255,255,255,.28);border-radius:100px;
}
.prop__go{
  display:inline-flex;align-items:center;gap:.6em;margin-top:1.8rem;
  font-family:var(--font-label);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--prop-accent,var(--accent));
  transition:gap .35s var(--ease);
}
.prop:hover .prop__go{gap:1.1em}
.prop__go svg{width:16px;height:16px}

/* ---------------- SERVIÇOS ---------------- */
.serv{display:grid;gap:0;border-top:1px solid var(--rule)}
.serv li{
  display:flex;align-items:baseline;gap:1.2rem;
  padding:clamp(1.1rem,2.4vw,1.6rem) 0;border-bottom:1px solid var(--rule);
  transition:padding-left .4s var(--ease),color .4s var(--ease);
}
.serv li:hover{padding-left:.9rem;color:var(--accent-dark)}
.serv b{
  font-family:var(--font-display);font-size:var(--fs-h3);font-weight:400;flex:1;
}
.serv span{font-size:var(--fs-small);color:var(--muted);max-width:46ch;flex:1.3}
@media(max-width:719px){
  .serv li{flex-direction:column;gap:.5rem}
}

/* ---------------- INSTAGRAM ---------------- */
.ig{background:var(--ink);color:var(--bone)}
.ig .eyebrow{color:var(--accent)}
.ig__grid{display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:480px){.ig__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:760px){.ig__grid{grid-template-columns:repeat(4,1fr)}}
.ig__card{
  display:flex;flex-direction:column;gap:.9rem;
  min-height:150px;padding:1.2rem;border:1px solid rgba(246,242,233,.16);border-radius:var(--radius);
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.ig__card:hover{background:rgba(246,242,233,.06);border-color:var(--accent);transform:translateY(-4px)}
.ig__card small{font-family:var(--font-label);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:500}
.ig__card p{font-size:var(--fs-small);line-height:1.5}
.ig__card svg{width:18px;height:18px;opacity:.55;margin-top:auto}

/* ---------------- CONTATO ---------------- */
.contact{background:var(--bone)}
.contact__box{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:clamp(1.6rem,4vw,3rem);
}
.contact__info{display:grid;gap:1.6rem;align-content:start}
.contact__row{display:flex;gap:1rem;align-items:flex-start}
.contact__row svg{width:20px;height:20px;color:var(--accent);flex:none;margin-top:.25em}
.contact__row b{display:block;font-family:var(--font-label);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:.3rem}
.contact__row a,.contact__row span{font-size:var(--fs-body);line-height:1.5}
.contact__row a:hover{color:var(--accent-dark)}