/* ==========================================================================
   SANTHA PEDRAS — PÁGINAS INTERNAS (landing pages de conversão)
   --------------------------------------------------------------------------
   Folha complementar à css/styles.css. Reaproveita integralmente os tokens,
   tipografia, botões, cabeçalho, rodapé, acordeão e formulário já existentes.
   Aqui vivem apenas os componentes das dobras internas, com composições e
   fundos distintos por seção/página.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FUNDOS DE SEÇÃO (variação real entre seções e páginas)
   -------------------------------------------------------------------------- */
.sec-white { background: var(--surface); }
.sec-soft { background: var(--surface-soft); }
.sec-cream { background: var(--surface-cream); }

.sec-dark {
  background: var(--brand-charcoal);
  color: rgba(255, 255, 255, .76);
}
.sec-dark h1, .sec-dark h2, .sec-dark h3, .sec-dark h4 { color: #fff; }
.sec-dark .section-head__sub { color: rgba(255, 255, 255, .66); }
.sec-dark .cta-call { color: rgba(255, 255, 255, .68); }

.sec-graphite {
  background: linear-gradient(180deg, #1c1d1f 0%, #0f1011 100%);
  color: rgba(255, 255, 255, .76);
}
.sec-graphite h1, .sec-graphite h2, .sec-graphite h3, .sec-graphite h4 { color: #fff; }
.sec-graphite .section-head__sub { color: rgba(255, 255, 255, .66); }

.sec-granite {
  background-color: #131313;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(214, 160, 42, .12), transparent 42%),
    radial-gradient(circle at 84% 88%, rgba(214, 160, 42, .09), transparent 46%);
  color: rgba(255, 255, 255, .76);
}
.sec-granite h1, .sec-granite h2, .sec-granite h3, .sec-granite h4 { color: #fff; }

/* textura arquitetônica discreta (linhas de grade) para páginas técnicas */
.sec-grid-lines {
  background-color: var(--surface-soft);
  background-image:
    linear-gradient(rgba(32, 33, 36, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 33, 36, .045) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
}

/* Avaliações nas páginas internas: fundo branco chapado (sem textura) para
   preservar a alternância de fundos e separar a prova social do formulário
   de orçamento, que permanece em section--marble. Esta folha não é carregada
   pela home, portanto a home mantém a textura de mármore. */
.avaliacoes {
  background-color: var(--surface);
  background-image: none;
}

/* --------------------------------------------------------------------------
   2. MIGALHAS DE PÃO
   -------------------------------------------------------------------------- */
.lp-crumbs { padding-top: 1rem; }
.lp-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  color: var(--text-secondary);
}
.lp-crumbs a { color: var(--brand-gold-dark); font-weight: 600; }
.lp-crumbs a:hover { text-decoration: underline; }
.lp-crumbs li + li::before { content: "/"; margin-right: .45rem; color: #c8c3b8; }
.sec-dark .lp-crumbs, .sec-graphite .lp-crumbs, .sec-granite .lp-crumbs {
  color: rgba(255, 255, 255, .6);
}

/* --------------------------------------------------------------------------
   3. HERO BASE
   -------------------------------------------------------------------------- */
.lp-hero { position: relative; overflow: hidden; }
.lp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid rgba(214, 160, 42, .6);
  border-radius: var(--pill);
  padding: .45rem 1.1rem;
  color: var(--brand-gold-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.sec-dark .lp-hero__eyebrow,
.sec-graphite .lp-hero__eyebrow,
.sec-granite .lp-hero__eyebrow,
.lp-hero--dark .lp-hero__eyebrow {
  color: var(--brand-gold);
  border-color: rgba(214, 160, 42, .5);
  background: rgba(214, 160, 42, .08);
}
.lp-hero__title {
  font-size: clamp(2rem, 1.1rem + 2.9vw, 3.3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.lp-hero__sub {
  margin-top: 1.15rem;
  max-width: 36rem;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}
.lp-hero--dark .lp-hero__sub,
.sec-dark .lp-hero__sub,
.sec-graphite .lp-hero__sub,
.sec-granite .lp-hero__sub { color: rgba(255, 255, 255, .74); }

.lp-hero__features {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 1.5rem;
  margin-top: 1.7rem;
}
.lp-hero__features li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.2;
}
.lp-hero__features li + li { border-left: 1px solid var(--border-soft); padding-left: 1.5rem; }
.lp-hero--dark .lp-hero__features li + li,
.sec-dark .lp-hero__features li + li { border-color: rgba(255, 255, 255, .18); }

.lp-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.lp-hero__note { margin-top: 1.1rem; font-size: .9rem; color: var(--text-secondary); }
.lp-hero--dark .lp-hero__note,
.sec-dark .lp-hero__note { color: rgba(255, 255, 255, .6); }

/* --- 3.1 HERO DIAGONAL (painel escuro + foto com corte diagonal) --- */
.lp-hero--diagonal .lp-hero__inner {
  display: grid;
  grid-template-columns: 50% 50%;
  min-height: 560px;
  background: var(--surface-soft);
}
.lp-hero--diagonal .lp-hero__panel { display: flex; align-items: center; position: relative; z-index: 2; }
.lp-hero--diagonal .lp-hero__panel-inner { padding-block: clamp(2.5rem, 5vw, 4.5rem); padding-inline: clamp(1.25rem, 5vw, 5rem); }
.lp-hero--diagonal .lp-hero__media { position: relative; overflow: hidden; }
.lp-hero--diagonal .lp-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}
.lp-hero--diagonal .lp-hero__inner::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold-grad);
  transform: skewX(-12deg) translateX(-8px);
  z-index: 3;
  display: none; /* detalhe opcional; mantido desativado para não competir com o corte */
}

/* --- 3.2 HERO MOSAICO (texto + mosaico de imagens) --- */
.lp-hero--mosaic .lp-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: var(--section-y);
}
.lp-hero--mosaic .lp-hero__mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  min-height: 480px;
}
.lp-hero--mosaic .lp-hero__mosaic img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.lp-hero--mosaic .lp-hero__mosaic > :first-child {
  grid-row: span 2;
  border-radius: var(--radius-lg);
}

/* --- 3.3 HERO SPLIT (duas colunas, imagem emoldurada) --- */
.lp-hero--split .lp-hero__inner {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: var(--section-y);
}
.lp-hero--split .lp-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  object-fit: cover;
  box-shadow: var(--shadow);
}
.lp-hero--split .lp-hero__frame {
  position: relative;
  padding: 14px;
  border: 1px solid rgba(214, 160, 42, .45);
  border-radius: calc(var(--radius-lg) + 14px);
}
.lp-hero--split .lp-hero__frame::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
}

/* --- 3.4 HERO BANNER (imagem de fundo larga + overlay) --- */
.lp-hero--banner { color: var(--text-primary); }
.lp-hero--banner .lp-hero__bg { position: absolute; inset: 0; z-index: 1; }
.lp-hero--banner .lp-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.lp-hero--banner::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, rgba(251, 246, 235, .97) 0%, rgba(251, 246, 235, .9) 42%, rgba(251, 246, 235, .62) 100%);
}
.lp-hero--banner .lp-hero__inner {
  position: relative; z-index: 3;
  padding-block: clamp(4rem, 8vw, 6.5rem);
}

/* --- 3.5 HERO VERTICAL (imagem alta + texto) --- */
.lp-hero--vertical .lp-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: var(--section-y);
}
.lp-hero--vertical .lp-hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 5;
}
.lp-hero--vertical .lp-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- 3.6 HERO EDITORIAL (fundo claro + moldura deslocada + grade) --- */
.lp-hero--editorial .lp-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: var(--section-y);
}
.lp-hero--editorial .lp-hero__media { position: relative; }
.lp-hero--editorial .lp-hero__media img {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  box-shadow: var(--shadow);
  z-index: 2;
}
.lp-hero--editorial .lp-hero__media::before {
  content: "";
  position: absolute;
  inset: 22px 22px -22px -22px;
  border: 2px solid var(--brand-gold);
  border-radius: var(--radius-lg);
  z-index: 1;
}

/* --------------------------------------------------------------------------
   4. GRID DE BENEFÍCIOS
   -------------------------------------------------------------------------- */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.benefit-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.6rem 1.4rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.benefit-card__icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: var(--brand-gold-soft);
  margin-bottom: 1rem;
}
.benefit-card h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: .4rem; }
.benefit-card p { font-size: .9rem; color: var(--text-secondary); line-height: 1.55; }

/* variante escura dos benefícios */
.sec-dark .benefit-card, .sec-graphite .benefit-card, .sec-granite .benefit-card {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: none;
}
.sec-dark .benefit-card p, .sec-graphite .benefit-card p, .sec-granite .benefit-card p {
  color: rgba(255, 255, 255, .66);
}
.sec-dark .benefit-card__icon, .sec-graphite .benefit-card__icon, .sec-granite .benefit-card__icon {
  background: rgba(214, 160, 42, .14);
}

/* --------------------------------------------------------------------------
   5. BLOCO DIVIDIDO GENÉRICO (texto + imagem)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  box-shadow: var(--shadow);
}
.split__lead { margin: 1rem 0 1.5rem; color: var(--text-secondary); font-size: clamp(1rem, 1.4vw, 1.1rem); }
.sec-dark .split__lead, .sec-graphite .split__lead, .sec-granite .split__lead { color: rgba(255, 255, 255, .7); }

/* listas com marcador dourado */
.checks { display: grid; gap: .7rem; margin-top: .4rem; }
.checks li {
  position: relative;
  padding-left: 1.9rem;
  font-size: .96rem;
  color: var(--text-primary);
  line-height: 1.5;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: .28rem;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--brand-gold-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A96F12' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}
.sec-dark .checks li, .sec-graphite .checks li, .sec-granite .checks li { color: rgba(255, 255, 255, .82); }
.checks--two { grid-template-columns: 1fr 1fr; gap: .7rem 2rem; }

/* --------------------------------------------------------------------------
   6. GALERIAS
   -------------------------------------------------------------------------- */
.gal {
  display: grid;
  gap: 1.3rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.gal--2 { grid-template-columns: repeat(2, 1fr); }
.gal--3 { grid-template-columns: repeat(3, 1fr); }
.gal--4 { grid-template-columns: repeat(4, 1fr); }
.gal--feature { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; }
.gal--feature > :first-child { grid-column: span 2; grid-row: span 2; }
.gal--masonry { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px; }
.gal--masonry .gcard:nth-child(1) { grid-row: span 2; }
.gal--masonry .gcard:nth-child(6) { grid-row: span 2; }

.gcard {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.gcard img { width: 100%; height: 220px; object-fit: cover; }
.gal--feature .gcard img, .gal--masonry .gcard img { height: 100%; min-height: 200px; }
.gcard__caption {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .94rem;
}
.gcard__caption .ico { stroke: var(--brand-gold-dark); flex: none; }

/* --------------------------------------------------------------------------
   7. MATERIAIS
   -------------------------------------------------------------------------- */
.mat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.mat-tile {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.mat-tile img { width: 100%; height: 190px; object-fit: cover; }
.mat-tile h3 { text-align: center; font-size: .98rem; font-weight: 700; padding: 1rem .8rem 1.15rem; }
.sec-dark .mat-tile, .sec-graphite .mat-tile, .sec-granite .mat-tile {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   8. COMO FUNCIONA (processo)
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.3rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  counter-reset: step;
}
.pstep {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.3rem 1.4rem;
}
.pstep__num {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--pill);
  background: var(--gold-grad);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: .9rem;
}
.pstep h3 { font-size: 1rem; font-weight: 700; margin-bottom: .35rem; }
.pstep p { font-size: .88rem; color: var(--text-secondary); line-height: 1.5; }
.sec-dark .pstep, .sec-graphite .pstep, .sec-granite .pstep {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: none;
}
.sec-dark .pstep p, .sec-graphite .pstep p, .sec-granite .pstep p { color: rgba(255, 255, 255, .66); }

/* --------------------------------------------------------------------------
   9. PROVA SOCIAL / CONFIANÇA (sem depoimentos inventados)
   -------------------------------------------------------------------------- */
.trust-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.trust__media img { width: 100%; border-radius: var(--radius-lg); object-fit: cover; box-shadow: var(--shadow); }
.trust__points { display: grid; gap: 1.1rem; margin-top: 1.4rem; }
.trust__point { display: flex; gap: .9rem; align-items: flex-start; }
.trust__point .ico { margin-top: .15rem; }
.trust__point h3 { font-size: 1.02rem; font-weight: 700; }
.trust__point p { font-size: .9rem; color: var(--text-secondary); margin-top: .1rem; }
.trust__note {
  margin-top: 1.6rem;
  font-size: .82rem;
  color: var(--text-secondary);
  border-left: 3px solid var(--brand-gold);
  padding-left: .9rem;
}

/* --------------------------------------------------------------------------
   10. CHAMADA FINAL + FORMULÁRIO
   -------------------------------------------------------------------------- */
.lp-cta {
  background: var(--brand-charcoal);
  color: rgba(255, 255, 255, .8);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.lp-cta__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3.2rem);
}
.lp-cta__inner h2 { color: #fff; font-size: clamp(1.6rem, 1rem + 2vw, 2.3rem); font-weight: 800; line-height: 1.12; }
.lp-cta__inner .cta-call { color: rgba(255, 255, 255, .68); }
.lp-cta__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }
.lp-cta .form-card { box-shadow: none; }

/* variante "plain": CTA embutido em uma seção escura de fundo */
.lp-cta--plain { background: transparent; box-shadow: none; }
.lp-cta--plain .lp-cta__inner { padding: 0; }

/* títulos alinhados à esquerda dentro de blocos divididos */
.lp-split-title { text-align: left; max-width: none; }

/* --------------------------------------------------------------------------
   11. CONHEÇA OUTRAS SOLUÇÕES
   -------------------------------------------------------------------------- */
.others-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.other-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.other-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.other-card__media img { width: 100%; height: 160px; object-fit: cover; }
.other-card__body { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; }
.other-card__body h3 { font-size: 1rem; font-weight: 700; }
.other-card__arrow {
  margin-left: auto;
  width: 36px; height: 36px;
  border-radius: var(--pill);
  background: var(--gold-grad);
  display: grid; place-items: center;
  flex: none;
}
.other-card__arrow .ico { stroke: #fff; }
.other-card__link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }

/* --------------------------------------------------------------------------
   12. BANNER FINAL DE WHATSAPP (faixa escura reutilizável)
   -------------------------------------------------------------------------- */
.banner .banner__content { flex: 1; }
.banner--page { margin-top: 0; }
.banner--page .banner__content h3 { font-size: 1.25rem; }

/* --------------------------------------------------------------------------
   13. RESPONSIVO
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .mat-row { grid-template-columns: repeat(2, 1fr); }
  .gal--4 { grid-template-columns: repeat(2, 1fr); }
  .gal--feature { grid-template-columns: repeat(2, 1fr); }
  .gal--feature > :first-child { grid-column: span 2; grid-row: auto; }
  .gal--masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .gal--masonry .gcard:nth-child(6) { grid-row: auto; }
  .others-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: 1fr; }
  .trust__media { order: -1; max-width: 640px; }
  .lp-hero--diagonal .lp-hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .lp-hero--diagonal .lp-hero__media { order: -1; height: 340px; }
  .lp-hero--diagonal .lp-hero__media img { clip-path: none; }
  .lp-hero--mosaic .lp-hero__inner,
  .lp-hero--split .lp-hero__inner,
  .lp-hero--vertical .lp-hero__inner,
  .lp-hero--editorial .lp-hero__inner { grid-template-columns: 1fr; }
  .lp-hero--mosaic .lp-hero__mosaic { order: -1; min-height: 380px; }
  .lp-hero--split .lp-hero__media,
  .lp-hero--vertical .lp-hero__media,
  .lp-hero--editorial .lp-hero__media { order: -1; }
  .lp-hero--editorial .lp-hero__media::before { display: none; }
  .lp-cta__inner { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .mat-row { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .mat-tile img { height: 150px; }
  .gal { gap: 1rem; }
  .gal--2, .gal--3, .gal--4, .gal--feature, .gal--masonry { grid-template-columns: 1fr; }
  .gal--feature > :first-child,
  .gal--masonry .gcard:nth-child(1),
  .gal--masonry .gcard:nth-child(6) { grid-column: auto; grid-row: auto; }
  .gal--masonry { grid-auto-rows: auto; }
  .gal--masonry .gcard img { height: 230px; }
  .gcard img { height: 210px; }
  .checks--two { grid-template-columns: 1fr; }
  .others-grid { grid-template-columns: 1fr; }
  .lp-hero__features li + li { border-left: none; padding-left: 0; }
  .lp-hero--mosaic .lp-hero__mosaic { grid-template-columns: 1fr 1fr; min-height: 300px; }
  .lp-hero--vertical .lp-hero__media { aspect-ratio: 4 / 3; }
  .lp-hero--banner::after { background: linear-gradient(180deg, rgba(251, 246, 235, .6) 0%, rgba(251, 246, 235, .92) 70%); }
  .lp-cta__inner { padding: 1.5rem; }
}

/* --------------------------------------------------------------------------
   14. GALERIA DE PROJETOS (componente reutilizável)
   --------------------------------------------------------------------------
   Grade de imagens de projetos realizados + visualizador (lightbox) e
   chamada de conversão. Estrutura idêntica em todas as páginas internas;
   muda apenas o conjunto de imagens de cada página.
   -------------------------------------------------------------------------- */
.gp-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.3rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.gp-item {
  position: relative;
  display: block;
  flex: 0 1 calc((100% - 2 * 1.3rem) / 3);
  max-width: calc((100% - 2 * 1.3rem) / 3);
  padding: 0;
  border: 0;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gp-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.gp-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.gp-item:hover img { transform: scale(1.04); }
.gp-item:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 3px; }

/* Chamada de conversão da galeria */
.gp-cta { text-align: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.gp-cta__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem);
  line-height: 1.15;
  color: var(--text-primary);
}
.gp-cta__text {
  margin: .6rem auto 1.5rem;
  max-width: 46ch;
  color: var(--text-secondary);
  font-size: clamp(.98rem, 1.2vw, 1.08rem);
}

/* Visualizador de imagem (lightbox): estilos em css/styles.css (compartilhado
   com a home). Aqui permanece apenas a grade das páginas internas. */

@media (max-width: 1100px) {
  .gp-item { flex-basis: calc((100% - 1.3rem) / 2); max-width: calc((100% - 1.3rem) / 2); }
}
@media (max-width: 680px) {
  .gp-grid { gap: 1rem; }
  .gp-item { flex-basis: 100%; max-width: 100%; }
}