/* ============================================================
   FC GESTÃO — style.css
   Identidade: marrom escuro, dourado, bege. Tipografia editorial.
   Trocar variáveis de cor abaixo se a identidade for ajustada.
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Manrope:wght@300;400;500;600;700&display=swap');

:root{
  --brown-950:#20140d;
  --brown-800:#3b2a1e;
  --brown-600:#5c4430;
  --gold-500:#9c6b3e;
  --gold-400:#b98f5c;
  --cream-100:#f7f1e7;
  --cream-200:#efe6d8;
  --white:#fffdf9;

  --text-main:#20140d;
  --text-soft:#5c4430;
  --bg-main:var(--cream-100);

  --font-display:'Playfair Display', Georgia, serif;
  --font-body:'Manrope', -apple-system, sans-serif;

  --container:1180px;
  --gutter:32px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  color:var(--text-main);
  background:
    linear-gradient(rgba(247,241,231,.6), rgba(247,241,231,.6)),
    url('../assets/img/textura-bege.jpg') repeat;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}

a{color:inherit; text-decoration:none;}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

.eyebrow{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-500);
  font-weight:600;
}

/* ---------- placeholders visuais (remover quando trocar por conteúdo real) ---------- */
.placeholder-img{
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5'/%3E%3Ccircle cx='8.5' cy='10.5' r='1.4'/%3E%3Cpath d='M21 15.5l-5.2-5.2a1 1 0 0 0-1.4 0L5 19'/%3E%3C/svg%3E");
  background:linear-gradient(155deg, var(--cream-200) 0%, #e9dcc2 55%, #e2d3b4 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--brown-600);
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  padding:12px;
}

.placeholder-img::before{
  content:'';
  width:30px;
  height:30px;
  flex-shrink:0;
  background-color:currentColor;
  opacity:.4;
  -webkit-mask:var(--icon) no-repeat center / contain;
  mask:var(--icon) no-repeat center / contain;
}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:
    linear-gradient(rgba(26,16,8,.86), rgba(26,16,8,.86)),
    url('../assets/img/hero-texture.jpg') center / cover no-repeat;
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(247,241,231,.12);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px var(--gutter);
  max-width:var(--container);
  margin:0 auto;
}

.logo{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--cream-100);
}

.logo span{color:var(--gold-500);}

.logo-img{height:46px; width:auto; display:block;}

.nav-links{
  display:flex;
  gap:36px;
  list-style:none;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cream-100);
}

.nav-links a{
  position:relative;
  padding-bottom:4px;
}

.nav-links a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0;
  height:1px;
  background:var(--gold-500);
  transition:width .25s ease;
}

.nav-links a:hover::after{width:100%;}

.nav-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

.nav-social{
  width:36px;
  height:36px;
  flex-shrink:0;
  border:1px solid rgba(247,241,231,.35);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--cream-100);
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}

.nav-social svg{width:18px; height:18px;}

.nav-social:hover{border-color:var(--gold-400); color:var(--gold-400); transform:translateY(-1px);}

.nav-cta{
  background:var(--gold-500);
  border:1px solid var(--gold-500);
  color:var(--brown-950);
  font-weight:700;
  padding:10px 22px;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 6px 18px -6px rgba(156,107,62,.65);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.nav-cta:hover{background:var(--gold-400); border-color:var(--gold-400); transform:translateY(-1px); box-shadow:0 10px 22px -6px rgba(156,107,62,.8);}

.nav-toggle{display:none;}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:flex-end;
  padding:0 0 72px;
  overflow:hidden;
  background:var(--brown-950);
}

.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  background:url('../assets/img/hero-texture.jpg') center / cover no-repeat;
}

.hero-media::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(32,20,13,.15) 0%, rgba(32,20,13,.75) 100%);
}

.hero-content{
  position:relative;
  z-index:1;
  color:var(--cream-100);
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
  width:100%;
}

.hero-eyebrow{
  color:var(--gold-400);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:18px;
  display:block;
}

.hero h1{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(42px, 8vw, 96px);
  line-height:0.98;
  letter-spacing:-.01em;
  max-width:14ch;
}

.hero-sub{
  margin-top:28px;
  max-width:440px;
  font-size:17px;
  color:var(--cream-200);
}

.hero-actions{
  margin-top:36px;
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
}

.btn{
  display:inline-block;
  padding:15px 30px;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid transparent;
  transition:opacity .2s ease, background .2s ease, color .2s ease, transform .25s ease, box-shadow .25s ease;
}

.btn-primary{
  background:var(--gold-500);
  color:var(--brown-950);
  font-weight:700;
  letter-spacing:.1em;
  padding:17px 34px;
  box-shadow:0 10px 28px -8px rgba(156,107,62,.65);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 34px -8px rgba(156,107,62,.8);}

.btn-outline{border-color:rgba(247,241,231,.5); color:var(--cream-100);}
.btn-outline:hover{border-color:var(--cream-100); transform:translateY(-2px);}

/* ---------- section shell ---------- */
section{padding:120px 0;}

.section-tight{padding:80px 0;}

/* ---------- sobre ---------- */
.about{
  background:
    linear-gradient(rgba(247,241,231,.6), rgba(247,241,231,.6)),
    url('../assets/img/textura-bege.jpg') repeat;
}

.about-grid{
  display:grid;
  grid-template-columns:minmax(240px, 0.85fr) 1.15fr;
  grid-template-areas:
    "photo head"
    "photo body";
  gap:24px 64px;
  align-items:start;
}

.about-photo{
  grid-area:photo;
  border:1px solid rgba(32,20,13,.14);
}

.about-photo img{
  aspect-ratio:4/5;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 22%;
}

.about-head{grid-area:head;}
.about-body{grid-area:body;}

.about-head .eyebrow{margin-bottom:16px; display:block;}

.about-head h2{
  font-family:var(--font-display);
  font-size:clamp(30px, 4vw, 46px);
  font-weight:500;
  line-height:1.12;
}

.about-body p{
  font-size:16px;
  color:var(--text-soft);
  max-width:46ch;
  margin-top:20px;
}

.stat-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 40px;
  margin-top:36px;
}

.stat{
  padding-top:22px;
  border-top:1px solid rgba(32,20,13,.16);
}

.stat-num{
  font-family:var(--font-display);
  font-size:40px;
  font-weight:500;
  color:var(--gold-500);
  line-height:1;
}

.stat-label{
  margin-top:10px;
  font-size:13px;
  color:var(--text-soft);
  max-width:22ch;
}

.stat-note{
  grid-column:1 / -1;
  background:var(--brown-950);
  color:var(--white);
  padding:28px 26px;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:17px;
  line-height:1.4;
  margin-top:28px;
}

/* ---------- serviços ---------- */
.services{
  background:
    linear-gradient(rgba(239,230,216,.6), rgba(239,230,216,.6)),
    url('../assets/img/textura-bege.jpg') repeat;
}

.section-head{
  max-width:640px;
  margin-bottom:56px;
}

.section-head .eyebrow{margin-bottom:14px; display:block;}

.section-head h2{
  font-family:var(--font-display);
  font-size:clamp(28px, 3.6vw, 42px);
  font-weight:500;
  line-height:1.15;
}

.section-note{
  margin-top:16px;
  font-size:14px;
  color:var(--text-soft);
}

.section-note a{
  border-bottom:1px solid var(--gold-500);
  padding-bottom:1px;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:rgba(32,20,13,.12);
  border:1px solid rgba(32,20,13,.12);
}

.service-card{
  background:var(--cream-200);
  padding:36px 28px;
  min-height:260px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  transition:background .25s ease, transform .3s ease, box-shadow .3s ease;
}

.service-card:hover{
  background:var(--white);
  transform:translateY(-6px);
  box-shadow:0 24px 44px -28px rgba(32,20,13,.4);
  z-index:1;
}

.service-num{
  font-family:var(--font-display);
  color:var(--gold-500);
  font-size:22px;
}

.service-card h3{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:500;
  margin-top:32px;
}

.service-card p{
  margin-top:12px;
  font-size:14px;
  color:var(--text-soft);
}

/* ---------- cases ---------- */
.cases{
  background:
    linear-gradient(rgba(247,241,231,.6), rgba(247,241,231,.6)),
    url('../assets/img/textura-bege.jpg') repeat;
}

.cases-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}

.case-card{
  border:1px solid rgba(32,20,13,.14);
  background:var(--bg-main);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.case-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 44px -28px rgba(32,20,13,.4);
  border-color:rgba(32,20,13,.3);
}

.case-media{aspect-ratio:4/3; overflow:hidden;}
.case-media img{width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block;}

.case-body{padding:22px 22px 26px;}

.case-tag{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold-500);
}

.case-body h3{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:500;
  margin-top:10px;
}

.case-body p{
  margin-top:8px;
  font-size:14px;
  color:var(--text-soft);
}

/* ---------- cta band ---------- */
.cta-band{
  background:
    linear-gradient(rgba(26,16,8,.72), rgba(26,16,8,.72)),
    url('../assets/img/hero-texture.jpg') center / cover no-repeat;
  color:var(--cream-100);
  text-align:center;
  padding:110px 0;
}

.cta-band h2{
  font-family:var(--font-display);
  font-size:clamp(30px, 5vw, 54px);
  font-weight:500;
  line-height:1.1;
  max-width:16ch;
  margin:0 auto;
}

.cta-band p{
  margin-top:20px;
  color:var(--cream-200);
  font-size:16px;
}

.cta-band .btn{margin-top:32px;}

/* ---------- blog teaser ---------- */
.blog-teaser{
  background:
    linear-gradient(rgba(239,230,216,.6), rgba(239,230,216,.6)),
    url('../assets/img/textura-bege.jpg') repeat;
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 360px));
  gap:28px;
}

.post-card{
  background:var(--white);
  border:1px solid rgba(32,20,13,.1);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.post-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 44px -28px rgba(32,20,13,.4);
  border-color:rgba(32,20,13,.28);
}
.post-media{aspect-ratio:16/10; overflow:hidden;}
.post-media img{width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block;}
.post-body{padding:20px 22px 26px;}
.post-date{font-size:12px; color:var(--text-soft); letter-spacing:.05em;}
.post-body h3{font-family:var(--font-display); font-size:18px; font-weight:500; margin-top:8px;}
.post-body p{font-size:14px; color:var(--text-soft); margin-top:8px;}
.post-link{display:inline-block; margin-top:14px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--gold-500); padding-bottom:2px;}

/* ---------- footer / contato ---------- */
.site-footer{
  background:
    linear-gradient(rgba(26,16,8,.78), rgba(26,16,8,.78)),
    url('../assets/img/hero-texture.jpg') center / cover no-repeat;
  color:var(--cream-200);
  padding:90px 0 32px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:48px;
  padding-bottom:64px;
  border-bottom:1px solid rgba(247,241,231,.14);
}

.footer-brand .logo{color:var(--cream-100); font-size:24px;}
.footer-brand p{margin-top:18px; max-width:34ch; font-size:14px; color:rgba(247,241,231,.7);}

.footer-col h4{
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-400);
  margin-bottom:18px;
}

.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:10px; font-size:14px;}
.footer-col a:hover{color:var(--gold-400);}

.footer-bottom{
  padding-top:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:rgba(247,241,231,.55);
  flex-wrap:wrap;
  gap:12px;
}

.social-row{display:flex; gap:16px;}
.social-row a{
  width:34px; height:34px;
  border:1px solid rgba(247,241,231,.3);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px;
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.social-row a:hover{border-color:var(--gold-400); color:var(--gold-400); transform:translateY(-2px);}

/* ---------- reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}

.reveal.is-visible{opacity:1; transform:translateY(0);}

.services-grid .reveal:nth-child(2){transition-delay:.06s;}
.services-grid .reveal:nth-child(3){transition-delay:.12s;}
.services-grid .reveal:nth-child(4){transition-delay:.18s;}
.services-grid .reveal:nth-child(5){transition-delay:.24s;}
.services-grid .reveal:nth-child(6){transition-delay:.3s;}

.blog-grid .reveal:nth-child(2){transition-delay:.08s;}
.blog-grid .reveal:nth-child(3){transition-delay:.16s;}

.cases-grid .reveal:nth-child(3n+2){transition-delay:.06s;}
.cases-grid .reveal:nth-child(3n){transition-delay:.12s;}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .nav-links{display:none;}
  .about-grid{
    grid-template-columns:1fr;
    grid-template-areas:"photo" "head" "body";
  }
  .about-photo img{aspect-ratio:4/5; max-height:420px;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .cases-grid{grid-template-columns:1fr 1fr;}
  .blog-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width:640px){
  section{padding:64px 0;}
  .services-grid{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; gap:36px;}
  .stat-list{grid-template-columns:1fr;}
  .stat:nth-child(odd){border-right:none; padding-right:0;}
  .stat:nth-child(even){padding-left:0;}

  .cases-grid{
    display:flex;
    grid-template-columns:unset;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:16px;
    margin:0 calc(var(--gutter) * -1);
    padding:0 var(--gutter) 8px;
  }
  .case-card{
    flex:0 0 82%;
    scroll-snap-align:start;
  }
}