/* ============================================================
   PAGES.CSS — Estilos das páginas internas
   (Projetos, Sobre, Processo, Serviços, Contato)
   ============================================================ */

/* ════════ PROJETOS ════════ */
.portfolio-section { padding: clamp(3rem,6vh,5rem) 0 clamp(4rem,8vh,7rem); }

/* Filtros */
.portfolio-filters {
  display: flex; align-items: center; gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2.5rem,5vh,4rem);
  overflow-x: auto; scrollbar-width: none;
}
.portfolio-filters::-webkit-scrollbar { display: none; }
.pf-btn {
  padding: .7rem 1.4rem; font-size: .67rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; flex-shrink: 0; position: relative;
  display: flex; align-items: center; gap: 0;
  transition: color .3s;
}
.pf-btn::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 2px; background: var(--green);
  transform: scaleX(0); transition: transform .3s var(--ease-out);
}
.pf-btn.is-active { color: var(--ink); }
.pf-btn.is-active::after { transform: scaleX(1); }
.pf-btn:hover { color: var(--ink-soft); }
.pf-count {
  font-size: .58rem; background: var(--cream-mid);
  padding: 1px 5px; border-radius: 20px; color: var(--muted);
}
.pf-btn.is-active .pf-count { background: var(--green-pale); color: var(--green); }

/* Grid portfólio */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  object-fit: cover;
}

/* CARD BASE */
.pg-card {
  position: relative;
  overflow: hidden;
  background: var(--cream-dark);
  cursor: none;
  object-fit: cover;
}

/* LAYOUT CORRIGIDO E BALANCEADO */

/* imagem destaque */
.pg-card--tall {
  grid-column: span 6;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* cards médios */
.pg-card--auto {
  grid-column: span 6;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* cards quadrados */
.pg-card--square {
  grid-column: span 6;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* cards largos */
.pg-card--wide {
  grid-column: span 6;
  aspect-ratio: 9 / 13;
  object-fit: cover;
}

/* Reutiliza estilos do card da home */
.pg-card .project-card__placeholder {
  width: 100%; height: 100%; min-height: 240px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; object-fit: cover;
}
.pg-card .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;
}
.pg-card:hover .project-card__overlay { opacity: 1; }
.pg-card .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;
}
.pg-card .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;
}
.pg-card .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;
}
.pg-card .project-card__meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--sage); flex-shrink: 0; }
.pg-card:hover .project-card__tag,
.pg-card:hover .project-card__name,
.pg-card:hover .project-card__meta { opacity: 1; transform: none; }
.pg-card .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);
}
@media (max-width: 1100px) {
  .pg-card--tall   { grid-column: span 12; aspect-ratio: 16/9; grid-row: span 1; }
  .pg-card--auto   { grid-column: span 6; }
  .pg-card--square { grid-column: span 4; }
  .pg-card--wide   { grid-column: span 8; }
  .pg-card:nth-child(8) { grid-column: span 4; }
}
@media (max-width: 768px) {
  .portfolio-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pg-card { grid-column: span 1 !important; grid-row: span 1 !important; aspect-ratio: 4/3 !important; }
  .pg-card:nth-child(1) { grid-column: span 2 !important; aspect-ratio: 16/9 !important; }
  .pg-card .project-card__overlay { opacity: 1; }
  .pg-card .project-card__tag, .pg-card .project-card__name, .pg-card .project-card__meta { opacity: 1; transform: none; }
}
@media (max-width: 480px) {
  .portfolio-grid { grid-template-columns: 1fr; }
  .pg-card:nth-child(1) { grid-column: span 1 !important; aspect-ratio: 4/3 !important; }
}

/* ════════ SOBRE ════════ */
.sobre-content { padding: clamp(4rem,8vh,7rem) 0; background: var(--linen); }
.sobre-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(3rem,6vw,6rem); align-items: start;
}
/* Foto */
.sobre-photo { position: relative; }
.sobre-photo__img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center top;
  filter: saturate(.9);
}
.sobre-photo__placeholder {
  width: 100%; aspect-ratio: 3/4;
  /* SUBSTITUIÇÃO: <img src="images/sheila.jpg" class="sobre-photo__img"> */
  background: linear-gradient(155deg, var(--green-mid) 0%, var(--cream-mid) 100%);
  display: flex; align-items: center; justify-content: center;
}
.sobre-photo__caption {
  position: absolute; bottom: -1px; right: -1.5rem;
  background: var(--cream); padding: 1.1rem 1.4rem; max-width: 190px;
  box-shadow: 0 2px 16px rgba(26,26,22,.06);
}
.sobre-photo__caption p {
  font-family: var(--serif); font-style: italic; font-size: .88rem; line-height: 1.45; color: var(--ink);
}
/* Texto */
.sobre-headline {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.8rem,3.5vw,3.2rem);
  line-height: 1.05; letter-spacing: -.012em; color: var(--ink); margin-bottom: 1.5rem;
}
.sobre-headline em { font-style: italic; color: var(--green); }
.sobre-body {
  font-size: clamp(.88rem,1.2vw,.98rem); font-weight: 300;
  line-height: 1.85; color: var(--ink-soft); margin-bottom: 1.3rem;
}
.sobre-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.8rem 0; }
.sobre-tag {
  padding: .35rem .9rem; border: 1px solid var(--line);
  font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.sobre-sig { margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.sobre-sig__name { font-family: var(--serif); font-style: italic; font-size: 1.7rem; font-weight: 300; color: var(--ink); }
.sobre-sig__role { font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--sage); margin-top: 4px; }

/* Valores */
.sobre-valores { padding: clamp(3rem,6vh,5rem) 0; background: var(--green-pale); }
.sobre-valores__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 3rem; }
.valor-item {
  padding: 2rem 1.6rem; background: var(--cream);
  border-top: 2px solid var(--green-mid); transition: border-color .3s;
}
.valor-item:hover { border-color: var(--green); }
.valor-item__icon { width: 32px; height: 32px; margin-bottom: 1rem; color: var(--green); }
.valor-item__title { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; color: var(--ink); margin-bottom: .6rem; }
.valor-item__desc { font-size: .82rem; font-weight: 300; color: var(--muted); line-height: 1.7; }

/* Depoimentos */
.sobre-testimonials { padding: clamp(3rem,6vh,5rem) 0; background: var(--cream); }
.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 3rem; }
.testimonial-item {
  padding: 2rem 1.8rem; background: var(--linen); border: 1px solid var(--line);
}
.testimonial-item__mark { font-family: var(--serif); font-size: 4.5rem; line-height: .7; color: var(--sage); opacity: .3; margin-bottom: .3rem; font-style: italic; }
.testimonial-item__text { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(.92rem,1.3vw,1.1rem); line-height: 1.65; color: var(--ink); margin-bottom: 1.5rem; }
.testimonial-item__author { display: flex; align-items: center; gap: .8rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.testimonial-item__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--green-mid);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1rem; color: var(--green); flex-shrink: 0;
}
.testimonial-item__name { font-weight: 500; font-size: .85rem; color: var(--ink); }
.testimonial-item__project { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 1px; }

@media (max-width: 900px) {
  .sobre-grid { grid-template-columns: 1fr; }
  .sobre-photo { max-width: 420px; margin: 0 auto; }
  .sobre-photo__caption { right: 0; }
  .sobre-valores__grid { grid-template-columns: 1fr 1fr; }
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .sobre-valores__grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .sobre-photo__caption { display: none; }
}

/* ════════ PROCESSO ════════ */
.processo-intro { padding: clamp(3rem,6vh,5rem) 0; background: var(--cream); }
.processo-steps { background: var(--cream); }
.processo-step {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 480px; border-top: 1px solid var(--line);
}
.processo-step:last-child { border-bottom: 1px solid var(--line); }
.processo-step__visual {
  position: relative; overflow: hidden;
  background: var(--cream-dark);
  display: flex; align-items: center; justify-content: center;
}
.processo-step:nth-child(even) .processo-step__visual { order: 2; }
.processo-step:nth-child(even) .processo-step__text  { order: 1; }
.processo-step__num {
  position: absolute; top: 2rem; left: 2rem;
  font-family: var(--serif); font-size: 6rem; font-weight: 300;
  color: rgba(26,26,22,.08); line-height: 1; user-select: none;
  transition: color .3s;
}
.processo-step:hover .processo-step__num { color: rgba(61,107,44,.14); }
.processo-step__icon-wrap {
  width: 80px; height: 80px; border-radius: 50%; background: var(--green-pale);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, transform .4s var(--ease-out);
}
.processo-step:hover .processo-step__icon-wrap { background: var(--green-mid); transform: scale(1.08); }
.processo-step__icon { width: 36px; height: 36px; color: var(--green); }
.processo-step__text {
  padding: 3rem; display: flex; flex-direction: column; justify-content: center;
}
.processo-step__label { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sage); margin-bottom: .8rem; }
.processo-step__title { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem,3vw,2.8rem); color: var(--ink); line-height: 1.1; margin-bottom: 1.2rem; }
.processo-step__desc { font-size: clamp(.85rem,1.2vw,.95rem); font-weight: 300; color: var(--ink-soft); line-height: 1.8; max-width: 420px; }
.processo-step__details { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.processo-step__detail {
  font-size: .78rem; color: var(--muted); padding-left: 1rem; position: relative; line-height: 1.4;
}
.processo-step__detail::before { content: '—'; position: absolute; left: 0; color: var(--sage); }

@media (max-width: 900px) {
  .processo-step { grid-template-columns: 1fr; min-height: auto; }
  .processo-step__visual { min-height: 280px; }
  .processo-step:nth-child(even) .processo-step__visual { order: 0; }
  .processo-step:nth-child(even) .processo-step__text { order: 1; }
  .processo-step__text { padding: 2.5rem 2rem; }
}

/* ════════ SERVIÇOS ════════ */
.servicos-grid { padding: clamp(3rem,6vh,5rem) 0 clamp(4rem,8vh,7rem); background: var(--cream); }
.servicos-list { display: flex; flex-direction: column; gap: 0; margin-top: 3rem; }
.servico-item {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: start; gap: 2rem;
  padding: 2.5rem 0; border-top: 1px solid var(--line);
  transition: background .3s; cursor: none;
  position: relative;
}
.servico-item:last-child { border-bottom: 1px solid var(--line); }
.servico-item::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background: var(--green-pale);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out); z-index: 0;
}
.servico-item:hover::before { transform: scaleX(1); }
.servico-item > * { position: relative; z-index: 1; }
.servico-item__num { font-family: var(--serif); font-size: 1.1rem; font-weight: 300; color: var(--muted); min-width: 2.5rem; padding-top: .25rem; }
.servico-item__title { font-family: var(--serif); font-size: clamp(1.5rem,2.5vw,2.2rem); font-weight: 300; color: var(--ink); margin-bottom: .6rem; transition: color .3s; }
.servico-item:hover .servico-item__title { color: var(--green); }
.servico-item__desc { font-size: .85rem; font-weight: 300; color: var(--muted); line-height: 1.8; max-width: 560px; margin-bottom: 1.2rem; }
.servico-item__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.servico-item__tag { padding: .28rem .75rem; border: 1px solid var(--line); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.servico-item:hover .servico-item__tag { border-color: var(--green-mid); }
.servico-item__arrow {
  width: 44px; height: 44px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; margin-top: .25rem;
  transition: background .3s, border-color .3s, transform .3s;
  flex-shrink: 0;
}
.servico-item:hover .servico-item__arrow {
  background: var(--green); border-color: var(--green); transform: translate(3px,-3px);
}
.servico-item:hover .servico-item__arrow svg { stroke: var(--cream); }
.servico-item__arrow svg { stroke: var(--muted); width: 16px; height: 16px; }

/* Detalhes dos serviços */
.servicos-detalhe { padding: clamp(3rem,6vh,5rem) 0; background: var(--sand-pale); }
.servicos-detalhe__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 3rem; }
.servico-card {
  padding: 2.2rem 1.8rem; background: var(--cream); border: 1px solid var(--line);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.servico-card:hover { border-color: var(--green-mid); box-shadow: 0 4px 24px rgba(61,107,44,.08); transform: translateY(-3px); }
.servico-card__num { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); margin-bottom: 1.2rem; }
.servico-card__title { font-family: var(--serif); font-size: clamp(1.1rem,1.8vw,1.4rem); font-weight: 400; color: var(--ink); margin-bottom: .85rem; }
.servico-card__desc { font-size: .82rem; font-weight: 300; color: var(--muted); line-height: 1.8; margin-bottom: 1.3rem; }
.servico-card__includes { display: flex; flex-direction: column; gap: .4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.servico-card__include { font-size: .7rem; color: var(--muted); padding-left: 1rem; position: relative; line-height: 1.5; }
.servico-card__include::before { content: '—'; position: absolute; left: 0; color: var(--sage); }

@media (max-width: 900px) {
  .servico-item { grid-template-columns: auto 1fr; }
  .servico-item__arrow { display: none; }
  .servicos-detalhe__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .servico-item { grid-template-columns: 1fr; gap: .5rem; }
  .servico-item__num { font-size: .9rem; }
  .servicos-detalhe__grid { grid-template-columns: 1fr; }
}

/* ════════ CONTATO ════════ */
.contato-section {
  padding: clamp(4rem,8vh,7rem) 0;
  background: var(--cream);
}
.contato-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(3rem,6vw,6rem); align-items: start;
}
.contato-headline {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem,4.5vw,4rem);
  line-height: 1.0; letter-spacing: -.02em; color: var(--ink); margin-bottom: 1.3rem;
}
.contato-headline em { font-style: italic; color: var(--green); }
.contato-body { color: var(--ink-soft); font-weight: 300; font-size: .9rem; line-height: 1.8; margin-bottom: 2.2rem; }

.contato-channels { display: flex; flex-direction: column; gap: .8rem; }
.contato-channel {
  display: flex; align-items: center; gap: .9rem;
  padding: .9rem 1.1rem; background: var(--cream-dark); border: 1px solid var(--line);
  transition: border-color .3s, box-shadow .3s;
}
.contato-channel:hover { border-color: var(--green-mid); box-shadow: 0 2px 12px rgba(61,107,44,.08); }
.contato-channel__icon { width: 34px; height: 34px; background: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contato-channel__icon svg { stroke: var(--cream); width: 15px; height: 15px; }
.contato-channel__label { font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 1px; }
.contato-channel__value { font-size: .88rem; color: var(--ink); }
.contato-channel__arrow { color: var(--muted); margin-left: auto; transition: transform .3s, color .3s; }
.contato-channel:hover .contato-channel__arrow { transform: translate(3px,-3px); color: var(--green); }

/* Mapa / localização */
.contato-map {
  margin-top: 2rem; padding: 1.5rem; background: var(--green-pale);
  border: 1px solid var(--green-mid);
}
.contato-map__title { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; color: var(--ink); margin-bottom: .6rem; }
.contato-map__desc { font-size: .8rem; color: var(--muted); line-height: 1.7; }

/* Form */
.contato-form { display: flex; flex-direction: column; gap: 1rem; }
.form-field { display: flex; flex-direction: column; gap: .35rem; }
.form-label { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.form-input, .form-textarea, .form-select {
  font-family: var(--sans); font-size: .9rem; font-weight: 300; color: var(--ink);
  background: transparent; border: none; border-bottom: 1px solid rgba(26,26,22,.18);
  padding: .65rem 0; outline: none; transition: border-color .3s; width: 100%; appearance: none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--green); }
.form-input::placeholder, .form-textarea::placeholder { color: rgba(26,26,22,.2); }
.form-textarea { resize: none; height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-success {
  display: none; padding: 1.1rem; background: var(--green-pale);
  border-left: 3px solid var(--green); font-size: .85rem; color: var(--green);
}
.form-success.is-visible { display: block; }

/* FAQ */
.contato-faq { padding: clamp(3rem,6vh,5rem) 0; background: var(--linen); }
.faq-list { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-btn {
  width: 100%; text-align: left; padding: 1.3rem 0;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--serif); font-size: clamp(1rem,1.5vw,1.2rem); font-weight: 300; color: var(--ink);
  transition: color .3s;
}
.faq-btn:hover { color: var(--green); }
.faq-btn svg { flex-shrink: 0; stroke: var(--muted); transition: transform .35s var(--ease-out); }
.faq-item.is-open .faq-btn svg { transform: rotate(45deg); }
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height .45s var(--ease-out), padding .45s;
  font-size: .88rem; font-weight: 300; color: var(--ink-soft); line-height: 1.8;
}
.faq-item.is-open .faq-answer { max-height: 400px; padding-bottom: 1.2rem; }

@media (max-width: 900px) {
  .contato-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ── Processo: imagem de fundo + ícone sobreposto ── */
.processo-step__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.75) saturate(.85);
  transition: transform .8s var(--ease-out), filter .5s;
}
.processo-step:hover .processo-step__img {
  transform: scale(1.04);
  filter: brightness(.65) saturate(.9);
}
.processo-step__img-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
/* Ícone sobre a foto: fundo branco translúcido */
.processo-step__img-overlay .processo-step__icon-wrap {
  background: rgba(247,244,239,.18);
  border: 1px solid rgba(247,244,239,.35);
  backdrop-filter: blur(4px);
}
.processo-step__img-overlay .processo-step__icon {
  stroke: rgba(247,244,239,.9);
}