/*
Theme Name:   RG Port
Theme URI:    https://rgport.com.br
Description:  Tema-filho do GeneratePress para a RG Port — Esquadrias em Alumínio, Vidraçaria e Serralheria (Guarulhos-SP). CSS próprio, fontes self-hosted, sem page builder.
Author:       Agência GNR
Author URI:   https://agenciagnr.com
Template:     generatepress
Version:      1.0.0
Text Domain:  rgport
*/

/* ══════════════════════════════════════════════════════════════
   FONTE — Inter variável, self-hospedada.
   Duas faces com unicode-range: em português só a `latin` (48K) baixa.
   ══════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ══════════════════════════════════════════════════════════════
   TOKENS — paleta oficial da marca.
   ⚠️ O azul #0089f7 do site antigo era padrão do BeTheme e NUNCA foi
   cor da RG Port. Não reintroduzir.
   ══════════════════════════════════════════════════════════════ */
:root {
  --marca:        #ed1b24;
  --marca-escuro: #c4141c;
  --carvao:       #211f20;
  --zap:          #25d366;
  --zap-escuro:   #128c7e;
  --n50:  #fafafa;
  --n100: #f5f5f5;
  --n200: #e5e5e5;
  --n300: #d4d4d4;
  --n400: #a3a3a3;
  --n500: #737373;
  --n600: #525252;
  --n700: #404040;
  --max: 72rem;
}

/* ══ BASE ══ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.rg {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--carvao);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
/* ⚠️ Os resets abaixo usam :where() DE PROPÓSITO — ele não soma especificidade.
   Sem isso, `.rg button` (0-1-1) vence `.rg-btn--zap` (0-1-0) e zera o fundo e a
   cor de TODO botão de componente. Foi exatamente o que aconteceu em 10/08: os
   dois CTAs do hero renderizaram invisíveis (fundo transparente, texto herdando
   o escuro do cartão). A medida automática passou; só o screenshot pegou.
   Regra que fica: reset de base sempre em :where(), nunca em seletor de elemento. */
:where(.rg) :where(img) { max-width: 100%; height: auto; display: block; }
:where(.rg) :where(a) { color: inherit; text-decoration: none; }
:where(.rg) :where(h1, h2, h3) { margin: 0; line-height: 1.1; }
:where(.rg) :where(p) { margin: 0; }
:where(.rg) :where(ul, dl) { margin: 0; padding: 0; list-style: none; }
:where(.rg) :where(button) { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.rg :focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }

.rg-wrap { max-width: var(--max); margin: 0 auto; padding-inline: 1rem; }

/* O cabeçalho é sticky (~73px). Sem isto, clicar em "Serviços" no menu leva a
   âncora até o topo exato da seção — e o título fica ESCONDIDO atrás do header.
   Reservar a altura do header + folga. */
[id] { scroll-margin-top: 5.5rem; }

/* pular para o conteúdo — invisível até receber foco pelo teclado */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed; top: .5rem; left: .5rem; z-index: 100;
  width: auto; height: auto; margin: 0; padding: .75rem 1.25rem; clip: auto;
  background: var(--carvao); color: #fff; border-radius: .5rem; font-weight: 700;
}

/* páginas internas — conteúdo editado no editor de blocos */
.rg-conteudo { padding-block: 3rem 4rem; }
.rg-conteudo h1 { font-size: 2rem; font-weight: 900; }
.rg-conteudo h2 { font-size: 1.5rem; font-weight: 800; margin-top: 2.5rem; }
.rg-conteudo h3 { font-size: 1.125rem; font-weight: 700; margin-top: 1.75rem; }
.rg-conteudo p  { margin-top: 1rem; color: var(--n700); font-size: 1.0625rem; line-height: 1.7; }
.rg-conteudo ul { margin-top: 1rem; display: grid; gap: .5rem; }
.rg-conteudo ul li { padding-left: 1.25rem; position: relative; color: var(--n700); }
.rg-conteudo ul li::before { content: '·'; position: absolute; left: .25rem; color: var(--marca); font-weight: 900; }
.rg-conteudo a { color: var(--marca); text-decoration: underline; }
.rg-conteudo img { margin-top: 1.5rem; border-radius: .75rem; }
.rg-conteudo strong { color: var(--carvao); }

/* grade de fotos dentro de página interna */
.rg-grid-fotos { margin-top: 1.75rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.rg-grid-fotos img { margin-top: 0; height: 12rem; width: 100%; object-fit: cover; border-radius: .75rem; }

/* bloco de chamada no fim das páginas internas */
.rg-cta-bloco {
  margin-top: 3rem; border-radius: 1rem; background: var(--carvao); color: #fff;
  padding: 2rem; display: grid; gap: 1rem;
}
.rg-cta-bloco h2 { margin-top: 0; color: #fff; font-size: 1.5rem; }
.rg-cta-bloco p { margin-top: 0; color: var(--n300); }
.rg-cta-bloco .rg-acoes { display: flex; flex-wrap: wrap; gap: .75rem; }

/* faixa de números reaproveitada nas internas */
.rg-provas { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.rg-provas div { border-radius: .75rem; background: var(--n50); padding: 1rem; box-shadow: inset 0 0 0 1px var(--n200); }
.rg-provas b { display: block; color: var(--marca-escuro); font-size: 1.125rem; }
.rg-provas span { font-size: .875rem; color: var(--n600); }

@media (min-width: 768px) {
  .rg-grid-fotos { grid-template-columns: repeat(3, 1fr); }
  .rg-provas { grid-template-columns: repeat(4, 1fr); }
  .rg-cta-bloco { padding: 2.5rem; }
}
@media (min-width: 768px) {
  .rg-conteudo { padding-block: 4rem 6rem; }
  .rg-conteudo h1 { font-size: 2.5rem; }
}

/* ══ CABEÇALHO ══ */
.rg-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--n200);
}
.rg-header__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .75rem; }
.rg-logo img { height: 2.5rem; width: auto; }
.rg-nav { display: none; align-items: center; gap: 1.75rem; font-size: .875rem; font-weight: 600; }
.rg-nav a { transition: color .2s; }
.rg-nav a:hover { color: var(--marca); }
.rg-header__acoes { display: flex; align-items: center; gap: .5rem; }

/* ══ BOTÕES ══ */
.rg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 9999px; font-weight: 700; transition: background-color .2s, color .2s;
  text-align: center;
}
.rg-btn--zap { background: var(--zap); color: #fff; }
.rg-btn--zap:hover { background: var(--zap-escuro); }
.rg-btn--marca { background: var(--marca); color: #fff; }
.rg-btn--marca:hover { background: var(--marca-escuro); }
.rg-btn--sm { padding: .5rem 1rem; font-size: .875rem; }
.rg-btn--lg { padding: 1rem 1.75rem; font-size: 1rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.3); }
.rg-btn--linha-escura { border: 2px solid var(--carvao); padding: .5rem 1rem; font-size: .875rem; }
.rg-btn--linha-escura:hover { background: var(--carvao); color: #fff; }
.rg-btn--linha-clara { border: 2px solid rgba(255,255,255,.5); color: #fff; padding: 1rem 1.75rem; font-size: 1rem; }
.rg-btn--linha-clara:hover { background: #fff; color: var(--carvao); }
.rg-tel-topo { display: none; }

/* ══ HERO ══ */
.rg-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--carvao); }
.rg-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rg-hero__veu   { position: absolute; inset: 0; background: rgba(33,31,32,.25); }
.rg-hero__grad  { position: absolute; inset: 0; background: linear-gradient(to right, rgba(33,31,32,.8), rgba(33,31,32,.3) 50%, transparent); }
.rg-hero__in { position: relative; padding-block: 4rem; }
.rg-hero__cartao {
  max-width: 36rem; border-radius: 1rem; background: rgba(33,31,32,.85);
  padding: 1.75rem; backdrop-filter: blur(4px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.rg-selo {
  display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px;
  background: var(--marca-escuro); padding: .25rem .75rem; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: #fff;
}
.rg-hero h1 { margin-top: 1.25rem; font-size: 2.25rem; font-weight: 900; line-height: 1.08; color: #fff; }
.rg-hero h1 .destaque { color: var(--marca); }
.rg-hero__sub { margin-top: 1rem; font-size: 1.125rem; line-height: 1.625; color: var(--n200); }
.rg-hero__sub strong { color: #fff; }
.rg-hero__rodape { margin-top: 1rem; font-size: .75rem; color: var(--n300); }
.rg-hero__ctas { margin-top: 1.75rem; display: flex; flex-direction: column; gap: .75rem; }

/* nota do Google dentro do hero */
.rg-nota {
  margin-top: 1.5rem; display: flex; align-items: center; gap: .75rem;
  border-radius: .75rem; background: rgba(255,255,255,.1); padding: .75rem 1rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.rg-nota__n { font-size: 1.875rem; font-weight: 900; color: #fff; }
.rg-nota__estrelas { display: flex; gap: .125rem; color: var(--marca); }
.rg-nota__txt { font-size: .75rem; font-weight: 600; color: var(--n200); }
.rg-nota__txt strong { color: #fff; }

/* ══ FAIXA DE CONFIANÇA ══ */
.rg-confianca { border-bottom: 1px solid var(--n200); background: var(--n50); }
.rg-confianca__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding-block: 2rem; text-align: center; }
.rg-confianca__n { font-size: 1.5rem; font-weight: 900; color: var(--marca); }
.rg-confianca__d { margin-top: .25rem; font-size: .875rem; color: var(--n600); }

/* ══ SEÇÕES ══ */
.rg-secao { padding-block: 4rem; }
.rg-secao h2 { font-size: 1.875rem; font-weight: 900; }
.rg-secao__intro { margin-top: .75rem; max-width: 42rem; font-size: 1.125rem; color: var(--n600); }

/* ══ SERVIÇOS ══ */
.rg-servicos { margin-top: 2.5rem; display: grid; gap: 1.5rem; }
.rg-card {
  overflow: hidden; border-radius: 1rem; box-shadow: inset 0 0 0 1px var(--n200);
  transition: box-shadow .2s; background: #fff; text-align: left; width: 100%; padding: 0;
}
/* ⚠️ `cursor: pointer` SÓ onde existe ação. Nos cards da home o clique no card
   inteiro foi removido (ele sequestrava o link da LP) e o cursor de mão ficou
   para trás — a imagem parecia clicável e não fazia nada. Agora a foto é um
   link de verdade (.rg-card__foto) e o cursor de mão vive só no .card-tipo,
   que é quem realmente abre o modal (usado nas LPs). */
.rg-card.card-tipo { cursor: pointer; }
.rg-card__foto { display: block; }
.rg-card:hover { box-shadow: inset 0 0 0 1px var(--n200), 0 20px 25px -5px rgba(0,0,0,.1); }
.rg-card img { height: 14rem; width: 100%; object-fit: cover; transition: transform .3s; }
.rg-card:hover img { transform: scale(1.05); }
.rg-card__txt { padding: 1.5rem; }
.rg-card h3 { font-size: 1.25rem; font-weight: 700; }
.rg-card p { margin-top: .5rem; color: var(--n600); }
/* padding vertical existe pro alvo de toque chegar a 44px (QA mobile) — não é estética */
.rg-card__link {
  margin-top: .5rem; display: inline-flex; align-items: center; gap: .25rem;
  font-weight: 700; color: var(--marca-escuro); min-height: 44px; padding-block: .5rem;
}
/* Nos cards da home o título e o "Ver detalhes" levam à LP do serviço; o botão verde
   abre o WhatsApp. Antes o card inteiro sequestrava o clique pro modal e não havia
   nenhum caminho de leitura — nem link interno pro Google seguir. */
.rg-card h3 a { color: inherit; }
.rg-card h3 a:hover { color: var(--marca-escuro); }
.rg-card__acoes { margin-top: .75rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.rg-card__acoes .rg-card__link { margin-top: 0; }
.rg-card__zap {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; background: var(--zap); color: #fff; font-weight: 700;
  font-size: .875rem; padding: .625rem 1rem; min-height: 44px;
}
.rg-card__zap:hover { background: var(--zap-escuro); }

/* ══ OBRAS ══ */
.rg-obras { background: var(--carvao); padding-block: 4rem; }
.rg-obras h2 { color: #fff; }
.rg-obras__intro { margin-top: .75rem; font-size: 1.125rem; color: var(--n300); }
.rg-obras__grid { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.rg-obras__grid img { height: 13rem; width: 100%; border-radius: .75rem; object-fit: cover; }

/* ══ AVALIAÇÕES ══ */
.rg-aval__grid { display: grid; gap: 2.5rem; align-items: center; }
.rg-aval__caixa { border-radius: 1rem; background: var(--n50); padding: 2rem; text-align: center; box-shadow: inset 0 0 0 1px var(--n200); }
.rg-aval__n { font-size: 3.75rem; font-weight: 900; color: var(--carvao); }
.rg-aval__estrelas { margin-top: .5rem; font-size: 1.5rem; color: var(--marca); }
.rg-aval__legenda { margin-top: .75rem; font-size: .875rem; font-weight: 600; color: var(--n600); }
.rg-aval__legenda strong { color: var(--carvao); }
.rg-depos { margin-top: 1.5rem; display: grid; gap: 1rem; }
.rg-depo { border-radius: .75rem; background: var(--n50); padding: 1.25rem; box-shadow: inset 0 0 0 1px var(--n200); }
.rg-depo__estrelas { color: var(--marca); font-size: .875rem; }
.rg-depo p { margin-top: .5rem; color: var(--n700); font-size: .9375rem; }
.rg-depo__autor { margin-top: .75rem; font-size: .8125rem; font-weight: 600; color: var(--n500); }
.rg-aval__cta {
  margin-top: 1rem; display: inline-flex; align-items: center;
  font-weight: 700; color: var(--marca-escuro); min-height: 44px; padding-block: .5rem;
}

/* ══ ORÇAMENTO ══ */
.rg-orcamento { background: var(--n50); padding-block: 4rem; }
.rg-orcamento__grid { display: grid; gap: 3rem; }
.rg-dados { margin-top: 2rem; display: grid; gap: 1rem; font-size: .875rem; }
.rg-dados > div { display: flex; gap: .75rem; }
.rg-dados dt { font-weight: 700; color: var(--marca-escuro); flex-shrink: 0; }
.rg-dados dd { margin: 0; color: var(--n700); }

.rg-form { border-radius: 1rem; background: #fff; padding: 1.5rem; box-shadow: inset 0 0 0 1px var(--n200), 0 10px 15px -3px rgba(0,0,0,.1); }
.rg-form .ff-el-group { margin-bottom: 1rem; }
.rg-form label, .rg-form .ff-el-input--label label { font-size: .875rem; font-weight: 700; margin-bottom: .25rem; display: block; }
.rg-form input[type=text], .rg-form input[type=email], .rg-form input[type=tel],
.rg-form select, .rg-form textarea {
  width: 100%; border-radius: .5rem; border: 1px solid var(--n300);
  padding: .75rem 1rem; font: inherit; background: #fff; color: var(--carvao);
}
.rg-form input:focus, .rg-form select:focus, .rg-form textarea:focus {
  border-color: var(--marca); outline: none; box-shadow: 0 0 0 3px rgba(237,27,36,.25);
}
.rg-form .ff-btn-submit, .rg-form button[type=submit] {
  border-radius: 9999px; background: var(--marca); color: #fff;
  padding: 1rem 1.5rem; font-weight: 700; width: 100%; border: 0; cursor: pointer;
  transition: background-color .2s;
}
.rg-form .ff-btn-submit:hover, .rg-form button[type=submit]:hover { background: var(--marca-escuro); }

/* ══ RODAPÉ ══ */
.rg-footer { background: var(--carvao); padding-block: 3rem; color: var(--n300); }
.rg-footer__grid { display: grid; gap: 2rem; }
.rg-footer img { height: 3rem; width: auto; }
.rg-footer__tit { font-weight: 700; color: #fff; }
.rg-footer ul { margin-top: .5rem; display: grid; font-size: .875rem; }
.rg-footer li { padding-block: .5rem; }
/* links do rodapé como alvo de 44px — no mobile eles caíam em 17px de altura */
.rg-footer a { display: inline-flex; align-items: center; min-height: 28px; }
.rg-footer a:hover { color: var(--marca); }
.rg-footer__nota { margin-top: 2.5rem; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; font-size: .75rem; color: var(--n500); }

/* ══════════════════════════════════════════════════════════════
   BOLHA · BARRA MOBILE · MINI-FORM
   NÃO ficam aqui. Vêm do componente canônico GNR v1.4, carregado em
   `gnr-wpp.css` + `gnr-wpp.js` (cópia verbatim de
   memoria-agencia/banco-de-design/nichos/servicos-locais/componente-botao-whatsapp-modal.md).
   Só o override de cor da barra mobile mora lá, porque a marca é dark-dominante.
   ⚠️ Não reimplementar aqui — duas implementações competindo foi o erro que
   este comentário existe pra impedir.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   RESPONSIVO
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* espaço pra barra de CTA fixa não cobrir o fim do conteúdo */
  body.rg { padding-bottom: 4.5rem; }

  /* No celular o H1 de 3 frentes ocupa 5 linhas e empurra o CTA pra fora da
     primeira dobra. Apertar aqui sobe o botão de WhatsApp pra área visível —
     é conversão, não estética. No desktop nada muda. */
  .rg-hero h1     { font-size: 1.9rem; }
  .rg-hero__sub   { font-size: 1rem; margin-top: .75rem; }
  .rg-hero__in    { padding-block: 2.5rem; }
  .rg-hero__cartao { padding: 1.25rem; }
  .rg-nota        { margin-top: 1.25rem; }
  .rg-hero__ctas  { margin-top: 1.25rem; }
}

@media (min-width: 640px) {
  .rg-tel-topo { display: inline-flex; }
  .rg-hero__ctas { flex-direction: row; }
}

@media (min-width: 768px) {
  .rg-nav { display: flex; }
  .rg-logo img { height: 3rem; }
  .rg-hero__in { padding-block: 6rem; }
  .rg-hero__cartao { padding: 2.25rem; }
  .rg-hero h1 { font-size: 3rem; }
  .rg-confianca__grid { grid-template-columns: repeat(4, 1fr); }
  .rg-secao, .rg-obras, .rg-orcamento { padding-block: 6rem; }
  .rg-secao h2 { font-size: 2.25rem; }
  .rg-servicos { grid-template-columns: repeat(3, 1fr); }
  .rg-obras__grid { grid-template-columns: repeat(4, 1fr); }
  .rg-aval__grid { grid-template-columns: auto 1fr; }
  .rg-depos { grid-template-columns: repeat(3, 1fr); }
  .rg-orcamento__grid { grid-template-columns: repeat(2, 1fr); }
  .rg-footer__grid { grid-template-columns: repeat(3, 1fr); }
  .rg-form { padding: 2rem; }
}

/* respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rg-card img, .rg-card, .rg-btn, .rg-nav a { transition: none; }
  .rg-card:hover img { transform: none; }
}