/* ============================================================
   HOME.CSS — Estilos exclusivos da página inicial
   ============================================================ */

/* ════════ HERO ════════ */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--cream);
  overflow: hidden;
  display: flex; flex-direction: column;
  padding-top: var(--nav-h);
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  filter: brightness(.78) saturate(.88);
  transform: scale(1.06);
  opacity: 0;
  transition: transform 9s var(--ease-out),
              opacity 1.4s ease,
              filter 1.4s ease;
}
.hero.is-loaded .hero__bg-img {
  transform: scale(1);
  opacity: 1;
  filter: brightness(.78) saturate(.92);
}

.hero__bg-placeholder {
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse at 72% 58%, rgba(122,158,120,.18) 0%, transparent 52%),
    radial-gradient(ellipse at 18% 78%, rgba(200,184,154,.14) 0%, transparent 42%),
    var(--cream);
}

.hero__vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, transparent 30%, rgba(247,244,239,.55) 85%, rgba(247,244,239,.8) 100%);
}

/* Decoração */
.hero__deco {
  position: absolute; right: -40px; bottom: -30px;
  width: clamp(240px, 32vw, 440px);
  opacity: .10; z-index: 1; pointer-events: none; color: var(--green);
}

/* Linha vertical esquerda */
.hero::before {
  content: '';
  position: absolute; left: var(--gutter); top: calc(var(--nav-h) + 2rem); bottom: 4rem;
  width: 1px; z-index: 3;
  background: linear-gradient(to bottom, transparent, var(--line) 20%, var(--line) 80%, transparent);
}

.hero__content {
  position: relative; z-index: 3; flex: 1;
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 3rem;
  padding: 5rem var(--gutter) clamp(4rem, 8vh, 6rem);
  max-width: var(--max); width: 100%; margin: 0 auto;
}

/* Eyebrow */
.hero__eyebrow { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.5rem; }
.hero__eyebrow-line { display: block; width: 28px; height: 1px; background: var(--sage); flex-shrink: 0; }

/* Título */
.hero__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(3rem, 7.5vw, 8rem);
  line-height: .92; letter-spacing: -.025em; color: var(--ink);
}
.hero__title-line { display: block; overflow: hidden; }
.hero__title-inner {
  display: block; transform: translateY(110%);
  transition: transform 1s var(--ease-out);
}
.is-loaded .hero__title-inner { transform: translateY(0); }
.hero__title-line:nth-child(1) .hero__title-inner { transition-delay: .15s; }
.hero__title-line:nth-child(2) .hero__title-inner { transition-delay: .28s; }
.hero__title-line:nth-child(3) .hero__title-inner { transition-delay: .41s; }
.hero__title em { font-style: italic; color: var(--sage); }

/* Sub / actions */
.hero__sub {
  margin-top: 1.8rem; max-width: 460px;
  font-size: clamp(.85rem,1.3vw,.98rem); font-weight: 300;
  color: var(--ink-soft); line-height: 1.8;
  opacity: 0; transform: translateY(10px);
  transition: opacity .8s var(--ease-out) .6s, transform .8s var(--ease-out) .6s;
}
.is-loaded .hero__sub { opacity: 1; transform: none; }

.hero__actions {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  margin-top: 2.5rem;
  opacity: 0; transition: opacity .8s var(--ease-out) .75s;
}
.is-loaded .hero__actions { opacity: 1; }

.hero__link-text {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
  transition: color .3s, border-color .3s;
}
.hero__link-text:hover { color: var(--ink); border-color: var(--ink); }

.hero__scroll {
  display: flex; align-items: center; gap: .6rem;
  margin-top: 3.5rem; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
  opacity: 0; transition: opacity .8s var(--ease-out) 1s;
}
.is-loaded .hero__scroll { opacity: 1; }
.hero__scroll-bar {
  display: block; width: 1px; height: 32px;
  background: linear-gradient(to bottom, transparent, var(--sage));
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity: .4; transform: scaleY(.8); transform-origin: bottom; }
  50% { opacity: 1; transform: scaleY(1); }
}

/* Stats */
.hero__right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1.8rem;
  text-align: right;
  opacity: 0; transition: opacity .8s var(--ease-out) .85s;
}
.is-loaded .hero__right { opacity: 1; }
.hero__stat-number {
  display: block; font-family: var(--serif);
  font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 300;
  color: var(--ink); line-height: 1;
}
.hero__stat-label { display: block; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.hero__stat-sep { width: 1px; height: 44px; background: var(--line-subtle); margin-left: auto; }

/* Localização */
.hero__location {
  position: absolute; bottom: 2rem; right: var(--gutter); z-index: 3;
  display: flex; align-items: center; gap: .5rem;
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* ════════ HOME PORTFOLIO ════════ */
.home-portfolio { padding: clamp(4rem,8vh,7rem) 0; background: var(--cream); }
.home-portfolio__header { margin-bottom: 2.5rem; }
.home-portfolio__head-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 1rem;
}

.home-portfolio__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto;
  gap: 18px;
}

/* Layout assimétrico */
.project-card--feature { grid-column: span 7; grid-row: span 2; aspect-ratio: 3/3,5; }
.project-card--sm      { grid-column: span 5; aspect-ratio: 2/2; }
.project-card--wide    { grid-column: span 12; aspect-ratio: 13/9; }

/* Card base */
.project-card {
  position: relative; overflow: hidden;
  background: var(--cream-dark); display: block;
  text-decoration: none;
}
.project-card__placeholder {
  width: 100%; height: 100%; min-height: 240px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
}
.project-card__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .85s var(--ease-out), filter .5s;
  filter: saturate(.9);
}
.project-card:hover .project-card__img { transform: scale(1.05); filter: saturate(1.05); }
.project-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,26,22,.82) 0%, rgba(26,26,22,.2) 50%, transparent 72%);
  opacity: 0; transition: opacity .4s var(--ease-out);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem;
}
.project-card:hover .project-card__overlay { opacity: 1; }
.project-card__tag {
  font-size: .58rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sage-light); margin-bottom: .3rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s .05s, transform .4s var(--ease-out) .05s;
}
.project-card__name {
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.1rem,1.8vw,1.5rem);
  line-height: 1.1; color: var(--cream);
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s .10s, transform .4s var(--ease-out) .10s;
}
.project-card__meta {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .4rem; font-size: .62rem; color: rgba(247,244,239,.55);
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s .16s, transform .4s var(--ease-out) .16s;
}
.project-card__meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--sage); flex-shrink: 0; }
.project-card:hover .project-card__tag,
.project-card:hover .project-card__name,
.project-card:hover .project-card__meta { opacity: 1; transform: none; }
.project-card__index {
  position: absolute; top: .9rem; right: .9rem;
  font-size: .56rem; letter-spacing: .1em; color: rgba(247,244,239,.4); z-index: 2;
  background: rgba(26,26,22,.35); padding: 2px 6px; backdrop-filter: blur(4px);
}

/* Mobile override para overlay sempre visível */
@media (max-width: 480px) {
  .project-card__overlay { opacity: 1; }
  .project-card__tag, .project-card__name, .project-card__meta { opacity: 1; transform: none; }
}

/* ════════ MANIFESTO ════════ */
.manifesto {
  padding: clamp(4rem,8vh,6rem) 0;
  background: var(--green-pale); position: relative; overflow: hidden;
}
.manifesto::before {
  content: '"'; position: absolute; top: -3rem; left: 50%; transform: translateX(-50%);
  font-family: var(--serif); font-size: clamp(12rem,28vw,26rem);
  color: rgba(61,107,44,.06); line-height: 1; pointer-events: none;
}
.manifesto__quote {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.5rem,3.2vw,2.8rem); line-height: 1.35;
  color: var(--ink); max-width: 820px; margin: 0 auto 2rem;
  position: relative; z-index: 1; text-align: center;
}
.manifesto__quote em { color: var(--green); font-style: normal; }
.manifesto__footer {
  display: flex; justify-content: center; align-items: center;
  gap: 2rem; flex-wrap: wrap; position: relative; z-index: 1;
}
.manifesto__author { font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* ════════ HOME SERVICES ════════ */
.home-services { padding: clamp(4rem,8vh,7rem) 0; background: var(--cream); }
.home-services__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 3rem; }
.home-service {
  padding: 2.5rem 2rem 2.2rem; background: var(--cream-dark);
  position: relative; overflow: hidden;
  transition: background .3s;
}
.home-service::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.home-service:hover { background: var(--green-pale); }
.home-service:hover::after { transform: scaleX(1); }
.home-service__num {
  font-family: var(--serif); font-size: 4rem; font-weight: 300;
  color: rgba(26,26,22,.07); line-height: 1; margin-bottom: 1rem;
  transition: color .3s;
}
.home-service:hover .home-service__num { color: rgba(61,107,44,.14); }
.home-service__title {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 400;
  color: var(--ink); margin-bottom: .7rem;
}
.home-service__desc {
  font-size: .83rem; font-weight: 300; color: var(--muted); line-height: 1.75; margin-bottom: 1.5rem;
}
.home-service__link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .68rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green); transition: gap .3s;
}
.home-service:hover .home-service__link { gap: .7rem; }

/* ════════ RESPONSIVE ════════ */
@media (max-width: 900px) {
  .hero__content { grid-template-columns: 1fr; }
  .hero__right { flex-direction: row; justify-content: flex-start; text-align: left; }
  .hero__stat-sep { width: 1px; height: 36px; }
  .home-portfolio__grid {
    grid-template-columns: 1fr 1fr; gap: 8px;
  }
  .project-card--feature { grid-column: span 2; aspect-ratio: 16/9; grid-row: span 1; }
  .project-card--sm  { grid-column: span 1; }
  .project-card--wide { grid-column: span 2; aspect-ratio: 16/9; }
  .home-services__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .hero__title { font-size: clamp(2.5rem,11vw,4rem); }
  .hero__right { display: none; }
  .hero__location { display: none; }
  .hero::before { display: none; }
  .home-portfolio__grid { grid-template-columns: 1fr; gap: 8px; }
  .project-card--feature, .project-card--sm, .project-card--wide {
    grid-column: span 1; aspect-ratio: 4/3; grid-row: span 1;
  }
  .home-services__grid { grid-template-columns: 1fr; }
  .manifesto__footer { flex-direction: column; }
}

/* ── Hero com foto real: leve escurecimento + vinheta direcional ── */
/* A foto fica com brightness .78 (definido acima)
   A vinheta garante legibilidade apenas onde há texto (esquerda/baixo) */
.hero .hero__vignette {
  background:
    /* sombra horizontal: escurece lado esquerdo onde está o texto */
    linear-gradient(
      to right,
      rgba(15,15,13,.45) 0%,
      rgba(15,15,13,.2)  40%,
      transparent        70%
    ),
    /* sombra vertical: escurece a base */
    linear-gradient(
      to bottom,
      rgba(15,15,13,.05) 0%,
      rgba(15,15,13,.0)  35%,
      rgba(15,15,13,.45) 72%,
      rgba(15,15,13,.70) 100%
    );
}
/* Texto do hero sobre foto escura */
.hero--dark .hero__title              { color: var(--cream); }
.hero--dark .hero__title em           { color: var(--sage-light); }
.hero--dark .hero__sub                { color: rgba(247,244,239,.75); }
.hero--dark .hero__eyebrow .t-label   { color: var(--sage-light); }
.hero--dark .hero__eyebrow-line       { background: var(--sage-light); }
.hero--dark .hero__scroll             { color: rgba(247,244,239,.55); }
.hero--dark .hero__scroll-bar         { background: linear-gradient(to bottom, transparent, var(--sage-light)); }
.hero--dark .hero__stat-number        { color: var(--cream); }
.hero--dark .hero__stat-label         { color: rgba(247,244,239,.55); }
.hero--dark .hero__stat-sep           { background: rgba(247,244,239,.2); }
.hero--dark .hero__location           { color: rgba(247,244,239,.45); }
.hero--dark .hero__link-text          {
  color: rgba(247,244,239,.6);
  border-bottom-color: rgba(247,244,239,.25);
}
.hero--dark .hero__link-text:hover    { color: var(--cream); border-bottom-color: var(--cream); }
/* Decoração botânica: invisível sobre foto */
.hero--dark .hero__deco               { opacity: .06; }