/* ============================================================
   Sofá Center — CSS complementar (Agência KOR)
   ------------------------------------------------------------
   Origem dos valores: docs/DESIGN-SYSTEM.md v1.0 · 05/08/2026
   (extraído do comp aprovado pelo cliente — nenhum valor inventado).

   FONTE ÚNICA DE VERDADE DE ESTILO fora do Elementor.
   Enfileirado pelo tema filho sofacenter-child (functions.php).
   ⚠️ NÃO colar nada disto no "CSS personalizado" do Elementor —
      duplicar regras quebra a rastreabilidade e o versionamento.

   O que fica AQUI: tokens, âncoras de modelo, ornamentos que
   widget não faz, botão flutuante, hero rotativo, acessibilidade.
   O que fica no ELEMENTOR: layout de página, tipografia global
   (Style Kit), espaçamentos de seção, grids responsivos.

   Fontes (Cormorant Garamond / Raleway) são carregadas pelo
   Style Kit do Elementor; o tema filho só faz o preconnect.
   Breakpoint único do projeto: 900px (Elementor Tablet = 900).
   ============================================================ */

/* ---------- 1. TOKENS DA PALETA (DESIGN-SYSTEM §1.1) ----------
   Nomes idênticos aos do documento — não renomear. */
:root{
  --bg:#FAF8F4;         /* fundo padrão do site (creme quente) */
  --surface:#FFFFFF;    /* cartões, cabeçalho, faixa de números, banners ímpares */
  --ink:#1C1917;        /* texto principal, títulos, nomes de loja */
  --muted:#7A6A5E;      /* texto de apoio, descrições, rótulos, endereços */
  --gold:#B8976A;       /* sublinhado de CTA, estrelas, filetes, molduras */
  --gold-light:#D4B896; /* eyebrow sobre escuro, moldura de foto, links no rodapé */
  --line:#E5D8CB;       /* bordas de cartão, divisórias, réguas */
  --red:#92202B;        /* cor da marca (da logo) — eyebrows, nav ativo, losangos, tags */
  --red-light:#C05560;  /* reservado para estados hover sobre fundo escuro */
  --gray-logo:#434343;  /* cinza das letras da logo — referência, NÃO usar como texto */
  --dark:#241A1B;       /* rodapé e faixas de CTA (marrom-vinho) */
  --dark-text:#F0EAE0;  /* texto sobre --dark */
  --wa:#25D366;         /* verde WhatsApp — EXCLUSIVO de conversão */
  --wa-dark:#1DA851;    /* hover dos botões de WhatsApp */

  /* ---- Tokens auxiliares (DESIGN-SYSTEM §1.2) ----
     O doc define os valores mas não os nomeia; recebem prefixo --sc-. */
  --sc-hero-texto:#FFFFFF;                      /* H1 e apoio do hero sobre foto */
  --sc-hero-apoio:rgba(255,255,255,.85);        /* subtítulo do hero */
  --sc-overlay-hero:linear-gradient(100deg, rgba(28,25,23,.94) 0%, rgba(28,25,23,.82) 38%, rgba(38,32,24,.45) 68%, rgba(38,32,24,.15) 100%); /* camada sobre a foto do hero */
  --sc-overlay-hero-categoria:linear-gradient(15deg, rgba(28,25,23,.92) 0%, rgba(28,25,23,.55) 50%, rgba(38,32,24,.2) 100%); /* hero de página de categoria */
  --sc-tingimento-banner:linear-gradient(0deg, rgba(38,32,24,.25), rgba(38,32,24,0) 45%); /* base das fotos de banner */
  --sc-ordinal-cor:rgba(255,255,255,.94);       /* números 01–06 sobre foto */
  --sc-ordinal-sombra:0 2px 26px rgba(28,25,23,.5); /* text-shadow do ordinal */
  --sc-moldura-foto:rgba(212,184,150,.5);       /* fio dourado inset nas fotos */
  --sc-rodape-tagline:rgba(240,234,224,.55);    /* descrição da marca no rodapé */
  --sc-rodape-links:rgba(240,234,224,.65);      /* colunas de navegação do rodapé */
  --sc-rodape-enderecos:rgba(240,234,224,.5);   /* endereços das lojas no rodapé */
  --sc-rodape-contato:rgba(240,234,224,.45);    /* telefone e e-mail no rodapé */
  --sc-rodape-copyright:rgba(240,234,224,.35);  /* última linha do rodapé */
  --sc-rodape-divisoria:rgba(255,255,255,.07);  /* divisórias internas do rodapé */
  --sc-borda-social:rgba(255,255,255,.2);       /* borda dos ícones de Instagram e Facebook */
  --sc-sombra-wa:0 4px 20px rgba(37,211,102,.45);      /* sombra do CTA principal de WhatsApp */
  --sc-sombra-cartao-ativo:0 4px 18px rgba(28,25,23,.07); /* cartão de loja selecionado */
}

/* ---------- 2. ÂNCORAS DE MODELO (DESIGN-SYSTEM §4.4) ----------
   Cada seção de modelo recebe CSS ID igual ao slug da âncora
   (ex.: #sofa-aruba, #poltrona-celta). O scroll-margin-top compensa
   o cabeçalho fixo — sem ele, o redirect 301 com âncora
   (ex.: /product/sofa-aruba-em-curitiba/ → /sofas-sob-medida-em-curitiba/#sofa-aruba)
   pararia com o título escondido atrás do cabeçalho.
   Os seletores por prefixo cobrem as 10 âncoras atuais E as futuras
   (ex.: Valência/Granada, quando a pendência C5 for resolvida),
   sem precisar editar este arquivo a cada modelo novo. */
[id^="sofa-"],
[id^="poltrona-"]{
  scroll-margin-top:120px;
}

/* ---------- 3. DIVISOR ORNAMENTAL (DESIGN-SYSTEM §4.2) ----------
   Separa cada banner de categoria: fio duplo com losango bordô
   ao centro. No Elementor entra como widget HTML com estas classes.
   O elemento inteiro é decorativo — marcar aria-hidden="true". */
.banner-divider{
  display:flex;
  align-items:center;
  gap:16px;
  padding:26px 64px;
  background:var(--bg);
}
.bd-line{
  flex:1;
  height:1px;
  background:var(--line);
}
.bd-diamond{
  width:8px;
  height:8px;
  background:var(--red);
  transform:rotate(45deg);
}
/* Padding mobile documentado em ESTRUTURA-DAS-PAGINAS.md (P01, seção 5:
   "Padding reduz para 18px 24px") — o §4.2 do DESIGN-SYSTEM traz só o
   valor desktop; os dois documentos se complementam. */
@media (max-width:900px){
  .banner-divider{padding:18px 24px;}
}

/* ---------- 4. CHIP DA LOGO SOBRE FUNDO ESCURO (DESIGN-SYSTEM §1.3) ----------
   Restrição familiar do cliente: a logo NUNCA é recolorida,
   redesenhada ou redimensionada fora de proporção. Sobre --dark
   (rodapé, faixas de CTA) ela entra dentro deste chip branco. */
.sc-logo-chip{
  display:inline-block;
  background:#FFFFFF;
  border-radius:4px;
  padding:10px 16px;
}

/* ---------- 4b. BOTÃO PRIMÁRIO — COMPLEMENTO DE HOVER (DESIGN-SYSTEM §3.1) ----------
   Cores, fonte, raio, padding e SOMBRA do botão primário vêm do Style
   Kit (Estilo do Tema > Botões). O que o Elementor NÃO expressa no
   estilo global fica aqui: a elevação de -2px no hover e a transição
   de .2s. Neste projeto todo botão global é CTA de WhatsApp (a regra
   dos três acentos reserva o verde para conversão), então a regra
   vale para o botão do Elementor como um todo. */
.elementor-button{
  transition:all .2s;
}
.elementor-button:hover{
  transform:translateY(-2px);
}

/* ---------- 5. BOTÃO FLUTUANTE DE WHATSAPP (DESIGN-SYSTEM §3.6) ----------
   Injetado pelo TEMA FILHO, não por widget. Se aparecer duplicado
   no site, há um widget HTML manual a remover no Elementor.
   Markup esperado: <a class="sc-fab" href="https://wa.me/554136535567?text=..."
   aria-label="Falar no WhatsApp"> com SVG branco interno.
   Verde --wa é exclusivo de conversão (regra dos três acentos). */
.sc-fab{
  position:fixed;
  bottom:26px;
  right:26px;
  z-index:500;
  width:62px;
  height:62px;
  border-radius:50%;
  background:var(--wa);
  box-shadow:0 4px 20px rgba(37,211,102,.5);
  display:grid;
  place-items:center;
  transition:transform .2s; /* mesma duração dos botões (§3.1) */
}
.sc-fab svg{
  width:32px;
  height:32px;
  fill:#FFFFFF;
}
.sc-fab:hover{
  transform:scale(1.08);
}
/* Anel pulsante — ciclo de 2s, rgba(37,211,102,.4) */
.sc-fab::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  animation:sc-fab-pulso 2s ease-out infinite;
}
@keyframes sc-fab-pulso{
  0%  {box-shadow:0 0 0 0 rgba(37,211,102,.4);}
  100%{box-shadow:0 0 0 18px rgba(37,211,102,0);}
}
/* Usuários que preferem menos movimento: sem pulso, sem escala,
   sem crossfade no hero (a troca de slide vira corte seco — o JS
   nem inicia a rotação, mas o estado inicial também não anima)
   e sem elevação no hover dos botões. */
@media (prefers-reduced-motion:reduce){
  .sc-fab::before{animation:none;}
  .sc-fab{transition:none;}
  .sc-fab:hover{transform:none;}
  .sc-hero-slide{transition:none;}
  .elementor-button{transition:none;}
  .elementor-button:hover{transform:none;}
}

/* ---------- 6. HERO ROTATIVO (DESIGN-SYSTEM §6 — Hero rotativo) ----------
   5 imagens em crossfade, intervalo de 5500ms controlado pelo JS
   do tema filho (o JS alterna a classe .is-ativa entre as slides).
   SEM controles: sem setas, sem dots, sem barra de progresso.
   A copy é FIXA — só as imagens mudam. A primeira imagem é a versão
   aprovada isoladamente pelo cliente e deve carregar primeiro.
   Imagens de fundo via CSS são permitidas AQUI por exceção
   (I6 do INSTRUCOES-DE-IMAGENS.md / R3 do DESIGN-SYSTEM §6),
   desde que os arquivos venham da Biblioteca de Mídia —
   nunca base64, nunca hardcode de caminho de tema. */
.sc-hero-rotativo{
  position:relative;
  overflow:hidden;
}
.sc-hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 1.8s ease-in-out;
}
.sc-hero-slide.is-ativa{
  opacity:1;
}

/* ---------- 7. FAIXA DE NÚMEROS — ORNAMENTOS (DESIGN-SYSTEM §4.3) ----------
   O layout (4 colunas no desktop, 2×2 no mobile com borda entre as
   linhas, padding 44px 20px 38px) é do Elementor. Aqui ficam apenas
   as quatro camadas de detalhe que widget não reproduz.
   Todos os ornamentos levam aria-hidden="true" no markup. */
.sc-numeros{
  position:relative; /* ancora o filete superior */
}
/* Filete superior em degradê dourado, 3px */
.sc-numeros__filete{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
}
/* Losango 7×7px bordô, rotacionado 45°, opacidade 80% — acima do número */
.sc-numeros__losango{
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--red);
  transform:rotate(45deg);
  opacity:.8;
}
/* Traço 26×1px dourado — entre o valor e o rótulo */
.sc-numeros__traco{
  display:block;
  width:26px;
  height:1px;
  background:var(--gold);
  margin-left:auto;
  margin-right:auto;
}
/* Divisória vertical entre blocos (não na primeira coluna):
   o doc descreve "degradê que desvanece nas pontas"; a cor é o
   token de divisórias --line (§1.1). */
.sc-numeros__divisoria{
  width:1px;
  align-self:stretch;
  background:linear-gradient(180deg, transparent, var(--line), transparent);
}

/* ---------- 8. ACESSIBILIDADE (DESIGN-SYSTEM §8) ----------
   Foco de teclado: o §8 manda MANTER o outline padrão do navegador
   nos elementos interativos — e é exatamente o que este arquivo faz.
   Nenhuma regra de outline aqui: o padrão do navegador é adaptativo
   e mantém contraste tanto sobre o creme --bg quanto sobre o escuro
   --dark do rodapé (um outline bordô fixo teria só ~2:1 sobre --dark,
   abaixo do mínimo de 3:1 do WCAG 1.4.11 — auditoria da Fase D). */
/* Texto visível só para leitores de tela */
.sr-only{
  position:absolute !important;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
/* Lembrete de markup (CSS não faz isto sozinho):
   elementos puramente decorativos — .banner-divider, .bd-diamond,
   .sc-numeros__filete, .sc-numeros__losango, .sc-numeros__traco,
   .sc-numeros__divisoria, molduras douradas — levam
   aria-hidden="true". O botão flutuante leva
   aria-label="Falar no WhatsApp" e o iframe do mapa leva
   title="Mapa das lojas Sofá Center". */

/* ---------- 9. O QUE NÃO ESTÁ AQUI — DE PROPÓSITO ----------
   · Layout de página (grids de banner, localizador, rodapé,
     seções de modelo): construído no Elementor Pro.
   · Tipografia global (Cormorant Garamond / Raleway, escala §2.2):
     definida no Style Kit do Elementor (Fontes/Cores globais).
   · Botões de WhatsApp de conteúdo (§3.1–3.5): widgets de botão
     do Elementor com os valores das tabelas do DESIGN-SYSTEM.
   · Comportamento mobile de colunas (foto antes do texto, 2×2,
     mapa no topo): ordem/responsivo configurados no Elementor
     com o breakpoint Tablet em 900px.
   Qualquer mudança de valor volta ao DESIGN-SYSTEM.md primeiro —
   o documento é a fonte da verdade, este arquivo só o transcreve.
   ============================================================ */

/* ---------- 10. COMPONENTES DA FASE E ----------
   Classes referenciadas pelos templates JSON gerados
   (elementor/templates-json/). Valores do DESIGN-SYSTEM. */

/* CTA secundário sublinhado (§3.4) */
.sc-cta-sublinhado{
  border-bottom:2px solid var(--gold);
  padding-bottom:5px;
  display:inline-block;
  transition:color .2s;
}
.sc-cta-sublinhado:hover, .sc-cta-sublinhado:hover *{color:var(--red);}
.sc-cta-sublinhado-escuro{
  border-bottom:2px solid var(--gold);
  padding-bottom:5px;
  display:inline-block;
  transition:color .2s;
}
.sc-cta-sublinhado-escuro:hover, .sc-cta-sublinhado-escuro:hover *{color:#FFFFFF;}

/* [PENDENTE] visível — Regra de Ouro nº 5: precisa SALTAR aos olhos
   na revisão e nunca ir ao ar. */
.sc-pendente{
  background:rgba(146,32,43,.06);
  border:1px dashed var(--red);
  padding:10px 14px;
  border-radius:3px;
}

/* Ficha técnica da seção de modelo (§4.4) */
.sc-ficha{list-style:none;margin:0;padding:0;}
.sc-ficha li{
  display:flex;justify-content:space-between;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--line);
  font-size:12.5px;line-height:1.5;
}
.sc-ficha .sc-ficha__rotulo{
  font-weight:600;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.sc-ficha .sc-ficha__item{font-weight:400;color:var(--ink);}

/* Moldura dourada interna sobre fotos de banner (§4.1) */
.sc-moldura-dourada{position:relative;}
.sc-moldura-dourada::after{
  content:"";position:absolute;inset:14px;
  border:1px solid rgba(212,184,150,.5);
  pointer-events:none;
}

/* Divisória vertical entre blocos da faixa de números (§4.3) */
.sc-numeros__bloco--divisa{
  border-left:1px solid transparent;
  border-image:linear-gradient(180deg, transparent, var(--line), transparent) 1;
}

/* Localizador de lojas (§4.5) */
.sc-loja-card{
  border-left:3px solid transparent !important;
  cursor:pointer;
  transition:border-color .2s, box-shadow .2s;
}
.sc-loja-card.is-ativa{
  border-left-color:var(--red) !important;
  box-shadow:0 4px 18px rgba(28,25,23,.07);
}
.sc-mapa{
  border:1px solid var(--line);
  padding:10px;
  position:relative;
  height:100%;
  min-height:420px;
}
.sc-mapa::after{
  content:"";position:absolute;inset:18px;
  border:1px solid rgba(212,184,150,.5);
  pointer-events:none;
}
.sc-mapa iframe{
  width:100%;height:100%;min-height:400px;border:0;display:block;
  filter:saturate(.82) contrast(1.03);
}
@media (max-width:900px){
  .sc-mapa, .sc-mapa iframe{min-height:340px;height:340px;}
}

/* Tabelas da Política de Privacidade — rolagem horizontal no mobile */
.sc-tabela-rolagem{overflow-x:auto;}
.sc-tabela-rolagem table{
  border-collapse:collapse;width:100%;min-width:520px;
  font-size:13px;line-height:1.6;
}
.sc-tabela-rolagem th, .sc-tabela-rolagem td{
  border:1px solid var(--line);padding:10px 14px;text-align:left;
  vertical-align:top;
}
.sc-tabela-rolagem th{
  background:var(--surface);font-weight:600;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}

/* Miniatura da grade de modelos */
.sc-thumb-modelo img{transition:transform .6s;}
.sc-thumb-modelo:hover img{transform:scale(1.04);}
@media (prefers-reduced-motion:reduce){
  .sc-thumb-modelo img, .sc-thumb-modelo:hover img{transition:none;transform:none;}
}