/*
Theme Name: Golden Stone & Tile
Theme URI: https://goldenstonetile.com
Author: Golden Stone & Tile Co.
Description: Tema WordPress próprio da Golden Stone & Tile Co. Construído a partir da clonagem de referência (Manual 14) e portado seção por seção (Manual 15). Cores/fontes de marca aplicadas no Manual 16.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: golden-stone-tile
*/

/* ============================================================
   VARIÁVEIS DE CSS
   Valores da marca (Manual 16), a partir de design-system.json.
   ============================================================ */
:root {
  /* Cores — dourado extraído por amostragem de pixel do logo real
     (design-system.json), não estimado visualmente. Ver design-system.json
     para a nota de contraste WCAG de cada token. */
  --color-primary: #C08D48;
  --color-primary-dark: #9D733B;
  --color-secondary: #2B2B29;     /* grafite/stone escuro (header/footer), não preto puro */
  --color-text: #1A1A1A;
  --color-text-muted: #57534E;
  --color-border: #E5E1DA;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F6F4F1;        /* off-white quente (stone/marfim), não cinza frio */
  --color-success: #1f9d55;
  --color-error: #e3342f;

  /* Texto sobre fundo escuro (header/footer/cta-banner em --color-secondary).
     --color-text/--color-text-muted são escuros de propósito (pensados pra
     fundo claro) — usá-los sobre fundo escuro é o bug de contraste relatado
     pelo cliente em 2026-07-23. Base branca em opacidade passa WCAG AA
     folgado contra #2B2B29 (~12:1 e ~6:1). */
  --color-text-on-dark: rgba(255, 255, 255, 0.92);
  --color-text-muted-on-dark: rgba(255, 255, 255, 0.62);

  /* Botão CTA — dourado metálico com brilho passando no hover (pedido do
     cliente em 2026-07-23: a cor sólida antiga lia como bege-alaranjado,
     não ouro). Texto grafite sobre o gradiente: contraste calculado em
     cima do tom médio (#C08D48), passa WCAG AA (4,83:1). */
  --color-button-text: #2B2B29;
  --gradient-gold: linear-gradient(135deg, #8A6A2F 0%, #D9A94F 22%, #F6DFA0 45%, #D9A94F 68%, #8A6A2F 100%);

  /* Tipografia — pedidas pelo cliente no briefing (seção 2), ambas Google Fonts */
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-size-base: 16px;

  /* Layout */
  --container-max-width: 1200px;
  --radius: 8px;
  --section-space: 80px;
  --letter-space: 0.1em;
}

/* ============================================================
   RESET MÍNIMO
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  margin: 0 0 1rem;
  line-height: 1.2;
}

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

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

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: 20px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Botão CTA — dourado metálico (gradiente, não cor sólida) com um brilho
   diagonal que varre o botão no hover, feito de propósito pra ler como
   ouro reagindo à luz (pedido do cliente em 2026-07-23; a cortina dupla
   escura de antes escondia o gradiente inteiro no hover, então saiu). */
.btn-cta {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--gradient-gold);
  background-size: 200% 200%;
  background-position: 0% 0%;
  color: var(--color-button-text);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--letter-space);
  padding: 20px 28px;
  border-radius: var(--radius);
  border: none;
  transition: background-position 600ms ease;
}
.btn-cta:hover { background-position: 100% 100%; }
.btn-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 35%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 700ms ease;
  z-index: 1;
  pointer-events: none;
}
.btn-cta:hover::before { left: 130%; }
.btn-cta svg { position: relative; z-index: 2; width: 16px; height: 16px; }
.btn-cta span { position: relative; z-index: 2; }

/* ============================================================
   HEADER
   Fonte: clone/specs/Header.spec.md + clone/specs/interacoes.json → home_two
   Adaptado ao sitemap real da Golden Stone (sem carrinho/busca/dropdown de
   loja/páginas de demo — o site não é e-commerce e não tem essas páginas).
   ============================================================ */
.topbar {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.topbar__inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  min-height: 58px;
  align-items: center;
}
.topbar__contact,
.topbar__meta {
  display: flex;
  align-items: center;
  gap: 32px;
}
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Desktop: e-mail/telefone por extenso + área de atendimento + horário.
   Mobile/tablet: só os botões curtos (Mail Us/SMS Us/Call Us), sem
   área/horário — o texto completo só cabe a partir de 992px, que é
   também onde o header troca o menu hambúrguer pelo menu completo
   (main-header__nav). Abaixo disso (inclusive tablet 768-991px) o
   texto por extenso não cabe numa linha só e vazava da viewport. */
.topbar__item-short { display: none; }
.topbar__item-mobile-only { display: none; }

@media (max-width: 991px) {
  .topbar__meta { display: none; }
  .topbar__item-full { display: none; }
  .topbar__item-short { display: inline; }
  .topbar__item-mobile-only { display: inline-flex; }

  .topbar__inner { justify-content: center; }
  .topbar__contact { justify-content: center; flex-wrap: wrap; row-gap: 6px; }
}

@media (max-width: 480px) {
  .topbar__inner { gap: 14px; padding-inline: 12px; }
  .topbar__contact { gap: 14px; }
  .topbar__item { font-size: 12px; gap: 5px; }
  .topbar__item svg { width: 13px; height: 13px; }
}
.topbar__item svg { width: 15px; height: 15px; color: var(--color-primary); flex-shrink: 0; }
.topbar__item:hover { color: var(--color-primary-dark); }

.main-header {
  background-color: var(--color-secondary); /* voltou ao grafite do footer em 2026-07-23 — preto puro pedido mais cedo no mesmo dia ficou pesado demais */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.main-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 104px;
}
.main-header__logo a {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-on-dark);
}
.main-header__logo-img { max-height: 100px; width: auto; display: block; }
@media (max-width: 480px) {
  .main-header__logo-img { max-height: 80px; }
  .main-header__inner { min-height: 84px; }
}
.main-header__nav {
  flex: 1;
}
.main-header__nav ul {
  list-style: none;
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.main-header__nav li { position: relative; }
.main-header__nav a {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-on-dark);
  transition: color 300ms ease;
}
.main-header__nav a:hover,
.main-header__nav .current-menu-item > a { color: var(--color-primary); }

/* Submenu "Services" (hover no desktop) — fundo branco, cantos
   arredondados, listando as páginas de serviço reais (pedido do
   cliente em 2026-07-23). Mesmas classes que o wp_nav_menu nativo
   gera pra item com filhos, então funciona tanto no fallback quanto
   se um menu de verdade for montado no wp-admin depois. */
.main-header__nav .menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.main-header__nav .menu-item-has-children > a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 250ms ease;
}
.main-header__nav .menu-item-has-children:hover > a::after { transform: rotate(225deg) translateY(2px); }
.main-header__nav .sub-menu {
  display: block; /* .main-header__nav ul acima é flex/row — sub-menu precisa voltar pra lista vertical */
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background-color: #fff;
  border-radius: var(--radius);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
  z-index: 20;
}
.main-header__nav .menu-item-has-children:hover > .sub-menu,
.main-header__nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main-header__nav .sub-menu a {
  display: block;
  padding: 10px 22px;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease;
}
.main-header__nav .sub-menu a:hover { background-color: var(--color-bg-alt); color: var(--color-primary-dark); }

/* O painel mobile (.is-open, mais abaixo) continua com fundo branco —
   precisa de volta o texto escuro só ali dentro. O submenu de Services
   fica sempre visível ali (lista estática, sem hover em touch). */
.main-header__nav.is-open a { color: var(--color-text); }
.main-header__nav.is-open a:hover,
.main-header__nav.is-open .current-menu-item > a { color: var(--color-primary); }
.main-header__nav.is-open .sub-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  background-color: var(--color-bg-alt);
}
.main-header__nav.is-open .sub-menu a { padding: 12px 20px 12px 36px; font-size: 14px; }
.main-header__nav.is-open .menu-item-has-children > a::after { display: none; }

.main-header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.main-header__actions .btn-cta {
  padding: 12px 20px;
  font-size: 14px;
  gap: 8px;
}
.main-header__actions .btn-cta svg { width: 14px; height: 14px; }

.main-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.main-header__toggle span {
  display: block;
  height: 2px;
  background-color: var(--color-text-on-dark);
}

/* Header fica fixo ao rolar via position:sticky puro (Manual 15.5) —
   mais simples e sem risco de "pulo" de layout do que clonar o header
   como o original faz. Sombra só aparece depois que já rolou um pouco
   (classe .is-stuck, alternada por um scroll listener leve). */
.main-header {
  position: sticky;
  top: -1px; /* fecha o hairline de 1px que aparece no topo em telas escaladas/DPR fracionário (bug conhecido de position:sticky) */
  z-index: 999;
  transition: box-shadow 300ms ease;
}
.main-header.is-stuck {
  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.07);
}

@media (max-width: 991px) {
  .main-header__nav { display: none; }
  .main-header__toggle { display: flex; }

  .main-header__actions { gap: 12px; }
  .main-header__actions .btn-cta {
    font-size: 11px;
    padding: 10px 14px;
    gap: 6px;
    white-space: nowrap;
  }
  .main-header__actions .btn-cta svg { width: 12px; height: 12px; }

  .main-header__nav.is-open {
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }
  .main-header__nav.is-open ul,
  .main-header__nav.is-open .fallback-menu {
    flex-direction: column;
    gap: 0;
    padding: 12px 0;
  }
  .main-header__nav.is-open a { display: block; padding: 14px 20px; }
  .main-header__inner { position: relative; }
  .main-header__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .main-header__toggle.is-active span:nth-child(2) { opacity: 0; }
  .main-header__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .main-header__toggle span { transition: transform 250ms ease, opacity 250ms ease; }
}

/* ============================================================
   FOOTER
   Fonte: clone/specs/Footer.spec.md — conteúdo adaptado ao sitemap real
   (sem newsletter/redes sociais, que não existem para este cliente).
   ============================================================ */
.site-footer {
  background-color: var(--color-secondary);
  color: var(--color-text-on-dark);
  padding-block: var(--section-space) 40px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.site-footer__logo a {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-bg);
}
.site-footer__logo-img { max-height: 76px; width: auto; display: block; }
.site-footer__desc {
  margin-top: 16px;
  color: var(--color-text-muted-on-dark);
  font-size: 16px;
  max-width: 32ch;
}
.site-footer__title {
  color: var(--color-bg);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}
.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__links a {
  color: var(--color-text-muted-on-dark);
  font-size: 16px;
  transition: color 300ms ease;
}
.site-footer__links a:hover { color: var(--color-primary); }
.site-footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted-on-dark);
  font-size: 16px;
}
.site-footer__contact svg { width: 16px; height: 16px; color: var(--color-primary); flex-shrink: 0; }

.site-footer__bottom {
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer__bottom p {
  margin: 0;
  color: var(--color-text-muted-on-dark);
  font-size: 14px;
}
.site-footer__credit {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-footer__credit-text {
  color: var(--color-text-muted-on-dark);
  font-size: 14px;
  transition: color 300ms ease;
}
.site-footer__credit-text:hover { color: var(--color-primary); }
.site-footer__credit-logo { height: 22px; width: auto; display: block; }

@media (max-width: 991px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOME — HERO
   Fonte: clone/specs/HeroSlider.spec.md + verificação ao vivo do
   site de referência (bracketweb.com/floenswp/onepage-home-two/,
   2026-07-23 — a spec original estava desatualizada em 2 pontos:
   dizia "sem autoplay" e não documentava o zoom do fundo).
   Comportamento JS (autoplay, troca de slide) em main.js.
   ============================================================ */
.hero {
  position: relative;
  min-height: 700px;
  overflow: hidden;
  color: #fff;
}
.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  /* speed:2000 do Slick original (data-slick-options, verificado ao vivo) */
  transition: opacity 2000ms ease;
}
.hero__slide.is-active { opacity: 1; pointer-events: auto; }
/* Zoom Ken Burns do fundo — verificado ao vivo no site de referência:
   .main-slider-two__bg { transform: scale(1); transition: transform 6s; }
   .slick-active .main-slider-two__bg { transform: scale(1.3); }
   Fundo em camada própria (não no .hero__slide) pra o zoom não afetar
   o texto/CTA por cima. */
.hero__slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 6000ms ease;
}
.hero__slide.is-active .hero__slide-bg { transform: scale(1.3); }
.hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(43, 43, 41, 0.45);
}
.hero .container { position: relative; min-height: 1px; }
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
}
.hero__tagline {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 8px 30px;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hero__heading {
  font-size: clamp(32px, 5vw, 70px);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 16px;
}
.hero__subtitle {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  max-width: 480px;
  margin-bottom: 32px;
}
.hero__bottom-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--container-gutter, 20px);
  background: rgba(43, 43, 41, 0.55);
}
.hero__nav {
  display: flex;
  gap: 24px;
}
.hero__nav button {
  background: none;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero__nav button[data-dir="prev"] svg { transform: rotate(180deg); }
.hero__counter {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}
.hero__counter-total { color: rgba(255, 255, 255, 0.5); font-size: 16px; }
.hero__counter-divider { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.3); }
.hero__counter-current { color: var(--color-primary); font-size: 22px; }

/* thumbnails flutuantes — decorativo, escondido em telas pequenas.
   Posicionado relativo ao CONTAINER de conteúdo (.hero .container),
   não à section inteira — senão em telas largas ele vai parar perto
   da borda real da janela, fora da área útil, e o overflow:hidden
   da .hero corta o excesso (era o bug reportado). */
.hero .container { position: relative; min-height: 1px; }

.hero__thumbs { display: none; }
@media (min-width: 768px) {
  /* top:90 (não 10) — o callout--1 "sobe" ~72px acima da própria
     miniatura (linha+ponto+tag, ver .hero__callout--1 abaixo); sem essa
     folga ele nasce colado ao topo da seção e o overflow:hidden da
     .hero corta a tag antes dela aparecer (bug confirmado medindo o
     boundingClientRect: tag em y=106.8 vs .hero começando em y=179). */
  .hero__thumbs { display: block; position: absolute; right: 0; top: 105px; z-index: 1; width: 320px; height: 400px; }
  /* .hero__thumb = caixa posicionada + animação de flutuar (só isso —
     SEM clip-path/overflow aqui, senão corta o callout que precisa
     "vazar" pra fora da imagem). Clip-path mora no -inner. Mesma
     separação de camadas do site de referência
     (.main-slider-two__image__one vs .__image__inner). */
  .hero__thumb { position: absolute; }
  .hero__thumb-inner {
    width: 100%; height: 100%;
    clip-path: polygon(30% 0px, 100% 0%, 68% 100%, 0% 100%);
    overflow: hidden;
  }
  .hero__thumb-inner img { width: 100%; height: 100%; object-fit: cover; transition: opacity 250ms ease; }

  /* 5s ease-in-out (era 2s linear) — pedido do cliente em 2026-07-23: o
     ritmo rápido + easing linear lia como "pulando", não flutuando.
     Delay no thumb--2 pra elas não subirem/descerem em sincronia
     perfeita (mais orgânico). */
  .hero__thumb--1 { top: 0; right: 70px; width: 220px; height: 180px; animation: hero-float-up 5s ease-in-out infinite; }
  .hero__thumb--2 { top: 140px; right: 0; width: 250px; height: 210px; animation: hero-float-down 5s ease-in-out infinite 0.4s; }

  @keyframes hero-float-up {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
  }
  @keyframes hero-float-down {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(20px); }
  }

  /* Callout "MODERN TILES" — reconstruído a partir da inspeção ao vivo
     do DOM/CSS de referência (.main-slider-two__tiles / __shape):
     é uma caixa INVISÍVEL com border-right+border-bottom (ou
     border-top+border-left) formando o "L" — não uma linha separada.
     Cada .hero__callout é filho direto do seu .hero__thumb (não do
     .hero__thumbs inteiro), então top/right são relativos à própria
     miniatura — é isso que estava quebrado antes (callout flutuando
     solto, sem relação com a imagem). */
  .hero__callout { position: absolute; z-index: 2; }
  .hero__callout-dot {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
  }
  .hero__callout-dot::after {
    content: "";
    border-radius: 50%;
    background-color: #fff;
  }
  .hero__callout-tag {
    position: absolute;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    background-color: #fff;
    padding: 2px 6px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Callout 1 (thumb de cima) — aponta pra cima/direita, como
     .main-slider-two__tiles na referência. */
  .hero__callout--1 {
    top: -10px; right: -40px;
    width: 95px; height: 40px;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }
  .hero__callout--1 .hero__callout-dot { top: -34px; right: -16px; width: 34px; height: 34px; }
  .hero__callout--1 .hero__callout-dot::after { width: 8px; height: 8px; }
  .hero__callout--1 .hero__callout-tag { top: -58px; right: -36px; }

  /* Callout 2 (thumb de baixo) — aponta pra baixo/esquerda, como
     .main-slider-two__shape na referência (círculo menor: 24px vs 34px,
     igual à proporção 28/42 do original). */
  .hero__callout--2 {
    left: -90px; bottom: -6px;
    width: 125px; height: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
  }
  .hero__callout--2 .hero__callout-dot { left: -11px; bottom: -25px; width: 24px; height: 24px; }
  .hero__callout--2 .hero__callout-dot::after { width: 6px; height: 6px; }
  .hero__callout--2 .hero__callout-tag { bottom: -58px; left: -36px; }
}

@media (max-width: 575px) {
  .hero__bottom-bar { flex-direction: column; gap: 16px; align-items: flex-start; }
}

/* ============================================================
   HOME — SERVICES (prévia dos 6 serviços, linkam pro Hub/Spoke)
   Fonte: clone/specs/Services.spec.md. Carrossel do original virou
   grid estático (mais simples e igualmente funcional — o Hub já cobre
   a listagem completa). Comportamento de hover é CSS puro, já ativo.
   ============================================================ */
.section { padding-block: var(--section-space); }
.section-title__tagline {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: var(--letter-space);
  margin-bottom: 12px;
}
.section-title__heading {
  font-size: 40px;
  font-weight: 700;
  color: var(--color-secondary);
  max-width: 20ch;
}
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.service-card {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 5px 60px rgba(0, 0, 0, 0.1);
  padding: 30px;
  /* padrão "running bond" (tijolo/ladrilho desencontrado) — bem sutil, linhas escuras no fundo claro */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0 0H40M0 10H40M0 20H40M0 0V10M20 0V10M40 0V10M-10 10V20M10 10V20M30 10V20' stroke='%232B1E16' stroke-opacity='0.06' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
/* Wipe escuro de baixo pra cima — clone/specs/interacoes.json → onepage_home_two.hover_estados.service_card */
.service-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  background-color: var(--color-secondary);
  /* mesmo padrão, agora em linhas claras sobre o fundo escuro — a textura "sobe" junto com o wipe */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0 0H40M0 10H40M0 20H40M0 0V10M20 0V10M40 0V10M-10 10V20M10 10V20M30 10V20' stroke='%23ffffff' stroke-opacity='0.08' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-position: left bottom;
  transition: height 500ms ease;
  z-index: 0;
}
.service-card:hover::before { height: 100%; }

.service-card__media {
  position: relative;
  z-index: 1;
  margin-bottom: 40px;
  overflow: hidden;
}
.service-card__media img {
  width: 100%; height: 241px; object-fit: cover;
  transition: transform 500ms ease;
}
.service-card:hover .service-card__media img { transform: scale(1.1); }

.service-card__icon {
  position: absolute;
  bottom: -30px; right: 20px;
  z-index: 2;
  width: 80px; height: 80px;
  border-radius: 50%;
  background-color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 500ms ease;
}
.service-card__icon svg { width: 36px; height: 36px; color: #fff; transition: color 500ms ease; }
.service-card:hover .service-card__icon { background-color: var(--color-bg-alt); }
.service-card:hover .service-card__icon svg { color: var(--color-primary-dark); }

.service-card__title {
  position: relative;
  z-index: 1;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 12px;
  transition: color 500ms ease;
}
.service-card:hover .service-card__title { color: #ffffff; }

.service-card__link {
  position: relative;
  z-index: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.service-card__link svg { width: 16px; height: 16px; }

.section-cta { text-align: center; margin-top: 48px; }

@media (max-width: 991px) {
  .service-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .service-cards { grid-template-columns: 1fr; }
  .section-header { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   HOME — ABOUT
   Fonte: clone/specs/About.spec.md. Colagem com o badge "anos de
   experiência" — número real do briefing (8), não os 25 fictícios
   da referência. Fade-in de entrada é JS (Manual 15.5); aqui já
   conteúdo visível por padrão (progressive enhancement).
   ============================================================ */
.about { background-color: var(--color-bg-alt); }
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.about__collage { position: relative; max-width: 420px; }
.about__photo--main {
  width: 100%;
  aspect-ratio: 370 / 488;
  object-fit: cover;
  border: 8px solid #fff;
}
.about__photo--secondary {
  position: absolute;
  right: -40px; bottom: -40px;
  width: 55%;
  aspect-ratio: 250 / 299;
  object-fit: cover;
  border: 8px solid #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}
.about__badge {
  position: absolute;
  left: -20px; bottom: -20px;
  width: 150px;
  background-color: var(--color-primary);
  color: #fff;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 8px solid #fff;
}
.about__badge-number { font-size: 44px; font-weight: 700; line-height: 1; }
.about__badge-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.about__lead {
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 16px;
}
.about__text { color: var(--color-text); margin-bottom: 32px; max-width: 46ch; }

.about__checklist {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
.about__checklist li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-secondary);
}
.about__checklist svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; }

@media (max-width: 991px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__collage { margin-inline: auto; }
}
@media (max-width: 575px) {
  .about__checklist { grid-template-columns: 1fr; }
  /* Em telas estreitas o offset original (-40px) empurra a foto
     sobreposta para fora da viewport e cria scroll horizontal.
     -20px é o máximo que ainda cabe (mesmo limite já usado pelo
     .about__badge à esquerda), então a foto fica flush na borda
     em vez de vazar. */
  .about__photo--secondary { right: -20px; bottom: -20px; }
}

/* ============================================================
   HOME — EXPERTISE (barras de progresso)
   Fonte: clone/specs/Expertise.spec.md. Preenchimento animado das
   barras (0 → alvo, disparado por scroll) é JS, entra no 15.5 —
   aqui a barra já nasce no valor final (progressive enhancement:
   funciona igual sem JS, só sem a animação de entrada).
   ============================================================ */
.expertise__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.expertise__text { color: var(--color-text); max-width: 46ch; margin-bottom: 40px; }

.expertise__bar { margin-bottom: 28px; }
.expertise__bar-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.expertise__bar-label { font-size: 16px; font-weight: 700; color: var(--color-secondary); }
.expertise__bar-value { font-size: 14px; font-weight: 700; color: var(--color-primary-dark); }
.expertise__bar-track { height: 6px; background-color: var(--color-bg-alt); }
.expertise__bar-fill { height: 6px; background-color: var(--color-primary-dark); transition: width 1200ms ease-out; }

/* Números reais (não % de "habilidade" por serviço) — Home Expertise,
   trocado em 2026-07-23. .expertise__bar* acima continua em uso no
   Spoke (about-three), não foi removido. */
.expertise__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 24px;
}
.expertise__stat-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.1;
  margin-bottom: 6px;
}
.expertise__stat-label { font-size: 14px; color: var(--color-text); line-height: 1.4; }

.expertise__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.expertise__gallery img { width: 100%; height: 220px; object-fit: cover; }
.expertise__gallery img:last-child { grid-column: 1 / -1; height: 200px; }

@media (max-width: 991px) {
  .expertise__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOME — CTA BANNER (substitui o VideoSection da referência —
   não há vídeo real do cliente ainda; virou banner de chamada)
   Fonte visual: clone/specs/VideoSection.spec.md (só o fundo).
   ============================================================ */
.cta-banner {
  position: relative;
  min-height: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(43, 43, 41, 0.6);
}
.cta-banner__inner { position: relative; z-index: 1; }
.cta-banner__heading { color: #fff; font-size: 32px; margin-bottom: 24px; }

/* Variante com formulário de lead embutido (Home + cada página de
   serviço) — reaproveita o .cta-banner escuro, mas em grid 2 colunas
   com texto à esquerda e o form num cartão branco à direita. */
.lead-cta { padding: 70px 0; text-align: left; }
.lead-cta__inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: center;
  width: 100%;
}
.lead-cta__text .cta-banner__heading { margin-bottom: 12px; }
.lead-cta__subtext { color: rgba(255, 255, 255, 0.85); max-width: 440px; line-height: 1.6; }
.lead-cta__form { background-color: #fff; padding: 32px; text-align: left; }
.lead-cta__field { margin-bottom: 16px; }
.lead-cta__field label { display: block; font-size: 13px; color: var(--color-text); margin-bottom: 6px; }
.lead-cta__field input,
.lead-cta__field select {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-size: 14px;
  height: 32px;
  padding: 0 3px 12px 0;
  font-family: inherit;
}
.lead-cta__field input:focus,
.lead-cta__field select:focus { outline: none; border-bottom-color: var(--color-primary); }
.lead-cta__form .btn-cta { width: 100%; justify-content: center; margin-top: 4px; }

@media (max-width: 900px) {
  .lead-cta__inner { grid-template-columns: 1fr; text-align: center; }
  .lead-cta__text { text-align: center; }
  .lead-cta__subtext { margin-inline: auto; }
  .lead-cta__form { max-width: 380px; margin-inline: auto; text-align: left; }
}

/* ============================================================
   HOME — FAQ
   Fonte: clone/specs/Faq.spec.md. Conteúdo real (Research/faq/).
   Accordion funciona 100% em CSS (radio+label), sem depender do
   Manual 15.5 — só um item aberto por vez, clique real.
   ============================================================ */
.faq { background-color: var(--color-bg); }
.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.faq__media { position: relative; max-width: 460px; aspect-ratio: 1 / 1; }
.faq__media img { position: absolute; }
.faq__media-bg { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.faq__media-fg { top: 0; left: 0; width: 68%; height: 68%; object-fit: cover; border: 8px solid #fff; }

.faq__text { color: var(--color-text); max-width: 46ch; margin-bottom: 32px; }

.faq-accordion { display: flex; flex-direction: column; gap: 16px; }
.faq-item { background-color: var(--color-bg-alt); }
.faq-item__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.faq-item__question {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}
.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 45px; height: 45px;
  background-color: var(--color-secondary);
}
.faq-item__icon::before, .faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background-color: #fff;
  transform: translate(-50%, -50%);
}
.faq-item__icon::before { width: 16px; height: 2px; }
.faq-item__icon::after { width: 2px; height: 16px; }
.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease;
  padding: 0 20px;
}
.faq-item__answer p { margin: 0 0 20px; color: var(--color-text); }

.faq-item__radio:checked ~ .faq-item__answer { max-height: 200px; }
.faq-item__radio:checked ~ .faq-item__question .faq-item__icon { background-color: var(--color-primary); }
.faq-item__radio:checked ~ .faq-item__question .faq-item__icon::after { display: none; }

@media (max-width: 991px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__media { margin-inline: auto; }
}

/* ============================================================
   HOME — TESTIMONIALS
   Fonte: clone/specs/Testimonials.spec.md. Depoimentos reais
   (briefing.md seção 5) — sem foto de banco fingindo ser o cliente,
   avatar por iniciais.
   ============================================================ */
.testimonial-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.testimonial-card {
  background-color: var(--color-bg-alt);
  padding: 30px;
  position: relative;
}
.testimonial-card__stars { display: flex; gap: 4px; margin-bottom: 20px; color: var(--color-primary-dark); }
.testimonial-card__stars svg { width: 16px; height: 16px; fill: currentColor; }
.testimonial-card__quote { font-size: 18px; color: var(--color-text); margin-bottom: 32px; }
.testimonial-card__quote-mark { color: var(--color-border); opacity: 0.6; }

.testimonial-card__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--color-secondary);
  padding: 16px 40px 16px 20px;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
}
.testimonial-card__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.testimonial-card__name { color: #fff; font-weight: 700; font-size: 16px; }
.testimonial-card__role { color: rgba(255, 255, 255, 0.6); font-size: 12px; text-transform: uppercase; }

@media (max-width: 767px) {
  .testimonial-cards { grid-template-columns: 1fr; }
}

/* Carrossel horizontal (10 depoimentos reais) — scroll nativo com
   auto-play (JS, Manual 15.5) em vez de grid fixo de 2. Barra de
   rolagem é a scrollbar real do navegador, só estilizada — dá pro
   visitante arrastar manualmente. Setas prev/next (mesmo padrão do
   Complete Projects) são a navegação principal — o scrollbar sozinho
   não era um affordance óbvio (some por padrão no macOS/mobile até o
   visitante tocar/arrastar), pedido do usuário pra corrigir isso. */
.testimonials__nav-row { display: flex; align-items: center; gap: 16px; }
.testimonials__nav {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.testimonials__nav:hover { background-color: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.testimonials__nav svg { width: 20px; height: 20px; }
.testimonials__nav[data-dir="prev"] svg { transform: rotate(180deg); }

.testimonials-track {
  display: flex;
  gap: 30px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory; /* trava o scroll (autoplay/seta/arrasto) sempre no início de um card — corrige o "sliver" cortado nas bordas */
  padding-bottom: 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--color-border);
}
.testimonials-track::-webkit-scrollbar { height: 8px; }
.testimonials-track::-webkit-scrollbar-track { background: var(--color-border); }
.testimonials-track::-webkit-scrollbar-thumb { background-color: var(--color-primary); }
.testimonials-track .testimonial-card {
  flex: 0 0 calc((100% - 2 * 30px) / 3);
  min-width: 320px;
  scroll-snap-align: start;
}
@media (max-width: 991px) {
  .testimonials-track .testimonial-card { flex-basis: calc((100% - 30px) / 2); }
}
@media (max-width: 575px) {
  .testimonials__nav-row { gap: 8px; }
  .testimonials__nav { width: 36px; height: 36px; }
  .testimonials__nav svg { width: 16px; height: 16px; }
  .testimonials-track .testimonial-card { flex-basis: 88%; min-width: 0; }
}

/* ============================================================
   HOME — BLOG PREVIEW (posts reais via WP_Query, some se não
   houver post publicado ainda)
   Fonte: clone/specs/Blog.spec.md.
   ============================================================ */
.blog-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.blog-card { background-color: var(--color-bg-alt); padding: 30px 30px 40px; }
.blog-card__meta { font-size: 14px; color: var(--color-text); margin-bottom: 12px; }
.blog-card__title { font-size: 22px; font-weight: 700; color: var(--color-secondary); margin-bottom: 20px; }
.blog-card__title a { color: inherit; }
.blog-card__media { position: relative; }
.blog-card__media img { width: 100%; height: 220px; object-fit: cover; }
.blog-card__date {
  position: absolute;
  left: 20px; bottom: -16px;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 8px 12px;
  text-transform: uppercase;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 16px 24px;
}
.btn-outline svg { width: 16px; height: 16px; }

@media (max-width: 991px) {
  .blog-cards { grid-template-columns: repeat(2, 1fr); }
  .testimonial-cards { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .blog-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGE HEADER (banner compartilhado — About/Contact/Hub/Spoke/Blog/Post)
   Fonte: clone/specs/page-about.spec.md → "Page Header"
   ============================================================ */
.page-header {
  background-color: var(--color-secondary); /* fallback antes da imagem carregar / se ela falhar */
  /* Radial em vez de uniforme: escuro só onde o título/breadcrumb ficam
     (centro-esquerda, onde o texto começa dentro do .container), abrindo
     pra transparente nas bordas pra deixar o mármore/veios dourados mais
     evidentes ali — pedido do cliente em 2026-07-23. */
  background-image: radial-gradient(ellipse 90% 140% at 30% 50%, rgba(18, 16, 14, 0.88) 0%, rgba(18, 16, 14, 0.6) 45%, rgba(18, 16, 14, 0.12) 100%), url("assets/images/black-marble-gold-veins-bg.webp");
  background-size: cover;
  background-position: center;
  padding: 80px 0 90px;
}
.page-header__title {
  color: #fff;
  font-size: clamp(32px, 4vw, 55px);
  margin-bottom: 16px;
}
.page-header__crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}
.page-header__crumb a { color: #fff; }
.page-header__crumb span:not(.page-header__crumb-current) { color: rgba(255, 255, 255, 0.4); }
.page-header__crumb-current { color: var(--color-primary); }

/* ============================================================
   HUB (page-hub.php) — grid dos 6 serviços
   Fonte: clone/specs/page-services-grid.spec.md — cards reaproveitam
   .service-card (mesmo componente/hover já portado na Home).
   ============================================================ */
.hub-intro { max-width: 60ch; margin: 0 auto 56px; text-align: center; color: var(--color-text); }

/* ============================================================
   SPOKE (page-servico.php) — molde das 6 páginas de serviço
   Fonte: clone/specs/page-oak-flooring.spec.md
   ============================================================ */
.spoke__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}

/* Sidebar fixa ao rolar (pedido do cliente em 2026-07-23) — 124px de
   folga pro header sticky (.main-header, 104px de altura) não cobrir
   o topo da lista. align-items:start no grid pai já impede a aside
   de esticar pra altura da coluna de conteúdo (senão sticky não funciona). */
.spoke__grid aside { position: sticky; top: 124px; }
@media (max-width: 900px) {
  .spoke__grid aside { position: static; }
}

.service-sidebar__nav {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.service-sidebar__nav li { position: relative; }
.service-sidebar__nav a {
  position: relative;
  z-index: 1;
  display: block;
  padding: 18px 20px;
  background-color: #ffffff;
  color: var(--color-secondary);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  transition: color 300ms ease;
}
.service-sidebar__nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background-color: var(--color-primary);
  z-index: -1;
  transition: width 400ms ease;
}
.service-sidebar__nav a:hover::before,
.service-sidebar__nav li.is-current a::before { width: 100%; }
.service-sidebar__nav a:hover,
.service-sidebar__nav li.is-current a { color: #ffffff; }

.service-sidebar__info {
  background-color: var(--color-bg-alt);
  padding: 24px 20px;
}
.service-sidebar__info p { margin: 0 0 12px; font-size: 15px; color: var(--color-text); }
.service-sidebar__info a { color: var(--color-primary-dark); font-weight: 600; }

.spoke__content h1 { margin-bottom: 20px; }
.spoke__media { margin-bottom: 32px; overflow: hidden; border-radius: var(--radius); }
.spoke__media img { width: 100%; height: 420px; object-fit: cover; transition: transform 600ms ease; }
.spoke__media:hover img { transform: scale(1.04); }
.spoke__body { color: var(--color-text); max-width: 70ch; margin-bottom: 16px; }
.spoke__body p { margin: 0 0 20px; }
.spoke__body h2 { color: var(--color-primary-dark); margin-top: 40px; }
.spoke__secondary-media { margin: 32px 0; max-width: 480px; border-radius: var(--radius); overflow: hidden; }
.spoke__secondary-media img { width: 100%; height: 260px; object-fit: cover; }

.spoke__faq-heading { margin-top: 48px; margin-bottom: 24px; color: var(--color-primary-dark); }

/* ============================================================
   SPOKE — Highlights card (imagem com corte diagonal + checklist
   num cartão claro), pedido do cliente em 2026-07-23 depois de ver
   um card parecido no site de referência. Mesma técnica de clip-path
   já usada nas miniaturas do Hero, aplicada aqui num formato maior. */
.spoke-highlights {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: stretch;
  margin: 40px 0;
  min-height: 380px;
}
.spoke-highlights__box {
  background-color: var(--color-bg-alt);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--radius) 0 0 var(--radius);
}
.spoke-highlights__list { list-style: none; margin: 0; padding: 0; }
.spoke-highlights__list li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-secondary);
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}
.spoke-highlights__list li:last-child { border-bottom: none; }
.spoke-highlights__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-dark);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.spoke-highlights__icon svg { width: 16px; height: 16px; }
.spoke-highlights__media {
  position: relative;
  overflow: hidden;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.spoke-highlights__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.spoke-highlights__media:hover img { transform: scale(1.06); }

@media (max-width: 767px) {
  .spoke-highlights { grid-template-columns: 1fr; min-height: 0; }
  .spoke-highlights__box { border-radius: var(--radius) var(--radius) 0 0; }
  .spoke-highlights__media { clip-path: none; border-radius: 0 0 var(--radius) var(--radius); min-height: 240px; }
}

/* ============================================================
   SPOKE — Grid de materiais/opções (antes era H3 + parágrafo corrido,
   lia como post de blog; pedido do cliente em 2026-07-23 pra ficar
   mais interativo/visual e deixar claro que a Golden trabalha com
   mais de 2 opções, projetos sob medida). */
.spoke-materials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 28px 0 40px;
}
.spoke-materials__card {
  background-color: var(--color-bg-alt);
  padding: 26px 22px;
  border-top: 3px solid var(--color-primary);
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.spoke-materials__card:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.1); }
.spoke-materials__card h3 { margin: 0 0 10px; font-size: 18px; color: var(--color-secondary); }
.spoke-materials__card p { margin: 0; font-size: 14px; color: var(--color-text); line-height: 1.6; }

/* ============================================================
   SPOKE — Related Services (cross-sell interno, sitemap.md §5) */
.spoke-related { margin: 40px 0; }
.spoke-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.spoke-related__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
  background-color: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-secondary);
  font-weight: 700;
  transition: border-color 300ms ease, color 300ms ease, background-color 300ms ease;
}
.spoke-related__card:hover { border-color: var(--color-primary); color: var(--color-primary-dark); background-color: var(--color-bg-alt); }
.spoke-related__card svg { width: 18px; height: 18px; flex-shrink: 0; }

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

/* Banda "por que escolher a Golden Stone" — seções pedidas pelo usuário,
   adaptadas de home-three (About + Reliable) com dados reais, sem
   depoimento/avaliação fabricada. */
.why-us {
  background-color: var(--color-bg-alt);
}
.why-us__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.why-us__media { position: relative; }
.why-us__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.why-us__badge {
  position: absolute;
  left: -20px; bottom: -20px;
  width: 150px;
  background-color: var(--color-primary);
  color: #fff;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 8px solid #fff;
}
.why-us__list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.why-us__list li { display: flex; align-items: center; gap: 11px; font-size: 16px; font-weight: 700; color: var(--color-secondary); }
.why-us__list svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; }

@media (max-width: 900px) {
  .why-us__grid { grid-template-columns: 1fr; }
  .why-us__media { margin-inline: auto; max-width: 420px; }
}

/* ============================================================
   ABOUT (page-about.php)
   Fonte: clone/specs/page-about.spec.md ("About One" + "Work Process Two")
   ============================================================ */
.work-process { background-color: var(--color-bg); }
.work-process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 24px;
}
.work-process__step { text-align: center; }
.work-process__icon {
  width: 190px; height: 190px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 4px solid #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.work-process__icon img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.work-process__icon:hover img { transform: scale(1.08); }
@media (max-width: 575px) {
  .work-process__icon { width: 150px; height: 150px; }
}
.work-process__badge {
  display: inline-block;
  background-color: #ffffff;
  color: var(--color-primary-dark);
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  margin-bottom: 12px;
}
.work-process__title { font-size: 18px; font-weight: 700; color: var(--color-secondary); }

@media (max-width: 900px) {
  .work-process__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
  .work-process__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CONTACT (page-contact.php)
   Fonte: clone/specs/page-contact.spec.md ("Contact One")
   ============================================================ */
.contact-one__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.contact-one__text { max-width: 46ch; }
.contact-one__text p { color: var(--color-text); margin-bottom: 32px; }

.contact-one__info {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-one__info li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--color-secondary); font-weight: 600; }
.contact-one__info svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; }
.contact-one__disclaimer {
  margin-top: 24px;
  padding: 16px 20px;
  background-color: var(--color-bg-alt);
  border-left: 3px solid var(--color-primary);
  font-size: 14px;
  color: var(--color-text);
}

.contact-one__form-wrap {
  position: relative;
  padding: 20px;
}
.contact-one__form-bg {
  position: absolute;
  inset: 0;
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
  overflow: hidden;
}
.contact-one__form-bg img { width: 100%; height: 100%; object-fit: cover; }
.contact-one__form-bg::after { content: ""; position: absolute; inset: 0; background: rgba(43, 43, 41, 0.55); }

.contact-one__form {
  position: relative;
  z-index: 1;
  background-color: #ffffff;
  padding: 40px;
  max-width: 460px;
  margin-left: auto;
}
.contact-one__form h3 { font-size: 22px; margin-bottom: 24px; }
.contact-one__field { margin-bottom: 20px; }
.contact-one__field label { display: block; font-size: 14px; color: var(--color-text); margin-bottom: 6px; }
.contact-one__field input,
.contact-one__field select,
.contact-one__field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-size: 14px;
  height: 34px;
  padding: 0 3px 15px 0;
  font-family: inherit;
}
.contact-one__field textarea { height: 80px; padding-top: 8px; }
.contact-one__field input:focus,
.contact-one__field select:focus,
.contact-one__field textarea:focus { outline: none; }

@media (max-width: 900px) {
  .contact-one__grid { grid-template-columns: 1fr; }
  .contact-one__form { margin-inline: auto; }
}

.service-area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.service-area__card {
  background-color: var(--color-bg);
  border-radius: var(--radius);
  border-top: 3px solid var(--color-primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  padding: 36px 28px;
  text-align: center;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.service-area__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}
.service-area__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background-color: rgba(192, 141, 72, 0.12);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-area__icon svg { width: 26px; height: 26px; }
.service-area__state {
  color: var(--color-secondary);
  font-size: 20px;
  margin-bottom: 8px;
}
.service-area__primary {
  color: var(--color-text-muted);
  font-size: 14px;
  margin-bottom: 20px;
}
.service-area__cities {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.service-area__cities li {
  background-color: var(--color-bg-alt);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 100px;
}
@media (max-width: 700px) {
  .service-area { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOG ARCHIVE (archive.php) + SINGLE POST (single.php)
   Fonte: clone/specs/page-blog-grid.spec.md, page-blog-post.spec.md
   Sidebar é 100% dinâmica (busca/posts recentes/categorias/tags reais
   do WordPress) — sem widget de comentários, como combinado.
   ============================================================ */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 50px;
  align-items: start;
}
.blog-grid-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.blog-card__media { position: relative; overflow: hidden; margin-bottom: 20px; }
.blog-card__media img { transition: transform 500ms ease; }
.blog-card__media:hover img { transform: scale(1.1); }
.blog-card__media::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  background: rgba(43, 43, 41, 0.4);
  opacity: 0;
  transition: opacity 300ms ease;
}
.blog-card__media:hover::after { opacity: 1; }

.sidebar-widget { background-color: var(--color-bg-alt); padding: 32px 28px; margin-bottom: 30px; }
.sidebar-widget__title { font-size: 18px; font-weight: 700; color: var(--color-secondary); margin-bottom: 20px; }

.sidebar-search { display: flex; }
.sidebar-search input { flex: 1; border: 1px solid var(--color-border); border-right: none; padding: 12px 16px; font-family: inherit; background: #fff; }
.sidebar-search button { background-color: var(--color-secondary); border: none; color: #fff; width: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; }

.sidebar-recent-post { display: flex; gap: 14px; margin-bottom: 16px; }
.sidebar-recent-post img { width: 64px; height: 64px; object-fit: cover; flex-shrink: 0; }
.sidebar-recent-post__title { font-size: 14px; font-weight: 600; color: var(--color-secondary); line-height: 1.4; }
.sidebar-recent-post__date { font-size: 12px; color: var(--color-text); }

.sidebar-list { list-style: none; margin: 0; padding: 0; }
.sidebar-list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 15px; }
.sidebar-list li:last-child { border-bottom: none; }
.sidebar-list a { color: var(--color-text); }
.sidebar-list a:hover { color: var(--color-primary); }

.sidebar-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sidebar-tags a {
  font-size: 13px;
  padding: 6px 14px;
  background-color: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.sidebar-tags a:hover { background-color: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.single-post__meta { display: flex; gap: 20px; color: var(--color-text); font-size: 15px; margin-bottom: 24px; }
.single-post__thumb { position: relative; margin-bottom: 32px; }
.single-post__thumb img { width: 100%; height: 420px; object-fit: cover; }
.single-post__content { color: var(--color-text); max-width: 75ch; }
.single-post__content p { margin-bottom: 20px; }
.single-post__taxo { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-border); font-size: 14px; color: var(--color-text); }
.single-post__taxo strong { color: var(--color-secondary); }

@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-grid-list { grid-template-columns: 1fr; }
}

/* ============================================================
   HOME — COMPLETE PROJECTS
   Fonte: clone/specs/Projects.spec.md. Fotos ainda são do banco
   de referência (assets/clone/, risco aceito registrado em
   2026-07-22) até o cliente subir fotos reais de obra em
   assets/originais/fotos/ — trocar lá quando chegarem. Legendas
   usam os serviços reais da Golden (a referência repete "Modern
   Tiles" nas 5 — não replicamos esse defeito).
   Carrossel: scroll nativo + botões prev/next (JS, Manual 15.5),
   sem biblioteca — mesmo padrão leve já usado no resto do tema.
   ============================================================ */
.projects { background-color: var(--color-secondary); position: relative; overflow: hidden; }
.projects .section-title__tagline { color: var(--color-primary); }
.projects .section-title__heading { color: #fff; }
.projects__nav-row { display: flex; align-items: center; gap: 20px; }
.projects__nav {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  opacity: 0.7;
  transition: opacity 300ms ease;
}
.projects__nav:hover { opacity: 1; }
.projects__nav svg { width: 22px; height: 22px; }
.projects__nav[data-dir="prev"] svg { transform: rotate(180deg); }

.projects__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  flex: 1;
}
.projects__track::-webkit-scrollbar { display: none; }

.project-card {
  position: relative;
  flex: 0 0 calc((100% - 2 * 20px) / 3);
  scroll-snap-align: start;
  overflow: hidden;
}
.project-card img { width: 100%; height: 320px; object-fit: cover; display: block; }
.project-card__tag {
  position: absolute;
  top: 20px; left: 20px;
  z-index: 1;
  background-color: #fff;
  color: var(--color-primary-dark);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 8px 12px 6px;
}
.project-card__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease;
}
.project-card:hover .project-card__caption { max-height: 70px; }
.project-card__caption span {
  padding: 20px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-secondary);
}
.project-card__btn {
  flex-shrink: 0;
  width: 60px; height: 70px;
  background-color: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-card__btn svg { width: 18px; height: 18px; }

@media (max-width: 991px) {
  .project-card { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 575px) {
  .project-card { flex-basis: 88%; }
}

/* ============================================================
   HOME/ABOUT — MEET OUR TEAM
   Fonte: clone/specs/Team.spec.md. SÓ entra em produção com fotos
   REAIS dos profissionais da Golden (assets/originais/fotos/equipe/)
   — nunca as fotos de banco da referência (regra do projeto: sem
   funcionário fictício). Estrutura pronta, cards ficam ocultos via
   PHP até $team_members ter conteúdo real (ver front-page.php).
   ============================================================ */
.team-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.team-card { position: relative; overflow: hidden; border: 8px solid #fff; box-shadow: 0 5px 60px rgba(0,0,0,0.08); }
.team-card img { width: 100%; height: 380px; object-fit: cover; display: block; }
.team-card__social {
  position: absolute;
  top: 20px; left: 20px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.team-card__social a {
  width: 38px; height: 38px;
  background-color: #fff;
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-card__social a:hover { background-color: var(--color-primary); color: #fff; }
.team-card__social svg { width: 16px; height: 16px; }
.team-card:hover .team-card__social { opacity: 1; transform: translateX(0); }

.team-card__caption {
  position: absolute;
  left: 20px; bottom: 20px;
  z-index: 1;
  background-color: var(--color-primary);
  padding: 16px 24px;
  max-width: 85%;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.team-card:hover .team-card__caption { opacity: 1; transform: translateY(0); }
.team-card__name { color: #fff; font-weight: 700; font-size: 18px; }
.team-card__role { color: rgba(255,255,255,0.8); font-size: 12px; text-transform: uppercase; }

@media (max-width: 991px) {
  .team-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .team-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   HOME — GALLERY TICKER ("Let us change your home look")
   Fonte: clone/specs/EvaluationCta.spec.md (tira "Instagram" no
   rodapé da seção). Pedido do usuário: ticker infinito, autoplay,
   pause on hover — CSS puro (keyframe translateX, sem biblioteca),
   JS só alterna a classe de pause. Faixa duplicada (mesmas 6 fotos
   2x) pra o loop não ter salto visível.
   ============================================================ */
.gallery-ticker { background-color: var(--color-bg-alt); padding-block: 40px; overflow: hidden; }
.gallery-ticker__header { text-align: center; margin-bottom: 32px; }
.gallery-ticker__tagline {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--letter-space);
  color: var(--color-primary);
  margin-bottom: 8px;
}
.gallery-ticker__heading { font-size: 28px; font-weight: 700; color: var(--color-secondary); }

.gallery-ticker__viewport { overflow: hidden; width: 100%; }
.gallery-ticker__track {
  display: flex;
  width: max-content;
  animation: gallery-ticker-scroll 40s linear infinite;
}
.gallery-ticker__viewport:hover .gallery-ticker__track { animation-play-state: paused; }
.gallery-ticker__track img {
  width: 260px; height: 200px;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 4px;
}
@keyframes gallery-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 575px) {
  .gallery-ticker__track img { width: 180px; height: 140px; }
}

/* ============================================================
   SPOKE — ABOUT THREE ("No 1. Tiles And Stone Company In Town")
   Fonte: clone/specs/page-home-three.spec.md, seção (a). Pedido
   original do usuário (Manual 14), implementado agora no molde de
   Spoke (page-servico.php). Estatística "Happy Clients" trocada
   por "100% Client Satisfaction" (autodeclarado, briefing.md §5) —
   "2.5M+" da referência é absurdo pro porte real da empresa.
   ============================================================ */
.about-three__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-three__collage { position: relative; max-width: 420px; }
.about-three__photo--main { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 8px solid #fff; box-shadow: 0 5px 60px rgba(0,0,0,0.08); }
.about-three__photo--secondary {
  position: absolute;
  right: -30px; bottom: -30px;
  width: 45%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 8px solid #fff;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}
.about-three__ratings { display: flex; align-items: center; gap: 20px; margin: 28px 0; }
.about-three__avatars { display: flex; }
.about-three__avatars img {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
  margin-left: -14px;
}
.about-three__avatars img:first-child { margin-left: 0; }
.about-three__stars { display: flex; gap: 3px; color: var(--color-primary-dark); margin-bottom: 4px; }
.about-three__stars svg { width: 14px; height: 14px; fill: currentColor; }
.about-three__ratings-label { font-size: 13px; color: var(--color-text); }

@media (max-width: 991px) {
  .about-three__grid { grid-template-columns: 1fr; }
  .about-three__collage { margin-inline: auto; }
}
@media (max-width: 575px) {
  .about-three__photo--secondary { right: -20px; bottom: -20px; }
}

/* ============================================================
   GALLERY PAGE (page-gallery.php) — grid simples de fotos +
   4 vídeos em autoplay mudo/loop, sem lightbox (Manual 20,
   pedido do usuário em 2026-07-23).
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.gallery-grid__item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
}
.gallery-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}
.gallery-grid__item:hover img { transform: scale(1.05); }

.gallery-videos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.gallery-videos-grid__item {
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--color-secondary);
}
.gallery-videos-grid__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* decorativo — sem play/pause/fullscreen no clique, pedido do usuário */
}
@media (max-width: 991px) {
  .gallery-videos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .gallery-videos-grid { grid-template-columns: 1fr; gap: 16px; }
}