/*
Theme Name: RC Tech
Theme URI: https://www.rctechst.com.br
Author: RC Tech Soluções Tecnológicas
Author URI: https://www.rctechst.com.br
Description: Tema customizado da RC Tech Soluções Tecnológicas — recriação em WordPress do design premium documentado em CLAUDE.md / DESIGN_SYSTEM.md. Todo conteúdo variável é editável via Secure Custom Fields (SCF), sem depender de código.
Version: 1.0.1
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: rctech
*/

/* ==========================================================================
   DESIGN TOKENS — espelham DESIGN_SYSTEM.md. Não redefinir valores soltos
   em outros arquivos: sempre referenciar estas variáveis.
   ========================================================================== */
:root{
  /* Cor — par cromático (DESIGN_SYSTEM.md #0) */
  --rc-azul:#1B3BD1;
  --rc-azul-hover:#1733B8;
  --rc-navy:#0E1637;
  --rc-navy-2:#0B1130;
  --rc-navy-gradient:linear-gradient(135deg,#152B9E,#0E1637);
  --rc-vermelho:#E31E2E; /* uso único por página */

  /* Neutros */
  --rc-texto:#141A33;
  --rc-texto-2:#525878;
  --rc-texto-3:#686F8C; /* era #8A90A8 (3.16:1) — ajustado na auditoria de 03/08/2026 com margem de segurança (4.7:1 contra #FFF e #F7F9FC; a 1ª tentativa mirou exatamente 4.5 e passou a reprovar por arredondamento do navegador) */
  --rc-linha:#E4E8F2;      /* token único de borda — DESIGN_SYSTEM.md §5 */
  --rc-linha-hover:#C7D0EC;
  --rc-fundo:#FFFFFF;
  --rc-fundo-2:#F5F7FC;
  --rc-fundo-3:#F7F9FC;

  /* Semânticas */
  --rc-whatsapp:#198644; /* era #1FA855 (3.09:1 com texto branco 700/14.5px) — escurecido na auditoria de 03/08/2026 pra 4.6:1, mesmo tom */
  --rc-whatsapp-hover:#17924A;
  --rc-sucesso:#1BA65A;
  --rc-estrelas:#FFC53D;

  /* Tipografia (DESIGN_SYSTEM.md §2–3) */
  --rc-font-display:'Plus Jakarta Sans',sans-serif;
  --rc-font-corpo:'IBM Plex Sans',sans-serif;

  /* Radius (DESIGN_SYSTEM.md §6) */
  --rc-radius-sm:9px;
  --rc-radius-md:12px;
  --rc-radius-lg:16px;
  --rc-radius-xl:20px;
  --rc-radius-pill:999px;

  /* Sombras (DESIGN_SYSTEM.md §7) */
  --rc-shadow-resting:0 2px 16px rgba(14,22,55,.04);
  --rc-shadow-hover:0 14px 30px rgba(14,22,55,.08);
  --rc-shadow-cta:0 6px 18px rgba(27,59,209,.28);
  --rc-shadow-cta-lg:0 12px 30px rgba(27,59,209,.28);
  --rc-shadow-whatsapp:0 16px 36px rgba(31,168,85,.4);
  --rc-shadow-form:0 24px 60px rgba(14,22,55,.12);

  /* Espaçamento base 8px (DESIGN_SYSTEM.md §4) */
  --rc-space-1:8px;
  --rc-space-2:16px;
  --rc-space-3:24px;
  --rc-space-4:32px;
  --rc-space-6:48px;
  --rc-space-12:96px;

  /* Grid (DESIGN_SYSTEM.md §1) */
  --rc-container-site:1240px;
  --rc-container-lp:1120px;
  --rc-container-leitura:800px;
}

/* ==========================================================================
   RESET + BASE
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
/* Sem isso, o painel do menu mobile (rc-mobilenav.js) — que fica fora da
   tela via transform:translateX(102%) num elemento position:absolute —
   conta como parte da largura rolável da página, criando scroll horizontal
   em toda página no mobile (achado de auditoria de 31/07/2026). */
body{margin:0;background:var(--rc-fundo);font-family:var(--rc-font-corpo);color:var(--rc-texto);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:inherit}
::selection{background:var(--rc-azul);color:#fff}
input::placeholder{color:#9AA0B8}

/* ==========================================================================
   ANIMAÇÕES (idênticas aos protótipos .dc.html)
   ========================================================================== */
@keyframes statuspulse{0%{box-shadow:0 0 0 0 rgba(27,166,90,.5)}70%{box-shadow:0 0 0 7px rgba(27,166,90,0)}100%{box-shadow:0 0 0 0 rgba(27,166,90,0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wadot{0%{opacity:.4}50%{opacity:1}100%{opacity:.4}}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes waIconPulse{0%{box-shadow:0 0 0 0 rgba(31,168,85,.45)}70%{box-shadow:0 0 0 14px rgba(31,168,85,0)}100%{box-shadow:0 0 0 0 rgba(31,168,85,0)}}
@keyframes waBubbleIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ==========================================================================
   COMPONENTES RECORRENTES
   ========================================================================== */
.rc-link{position:relative;transition:color .2s;text-decoration:none}
.rc-link:hover{color:var(--rc-azul)}
.rc-link::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0;background:var(--rc-azul);transition:width .25s ease}
.rc-link:hover::after{width:100%}

.rc-dropdown{position:relative}
.rc-dropdown:hover .rc-dropdown-menu,
.rc-dropdown:focus-within .rc-dropdown-menu{opacity:1 !important;visibility:visible !important;transform:translateY(0) !important}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--rc-azul);outline-offset:2px;border-radius:4px
}

/* Skip link — primeiro elemento focável da página, some até receber foco (Tab) */
.rc-skip-link{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--rc-azul);color:#fff;font-family:var(--rc-font-corpo);font-weight:600;
  font-size:14px;padding:12px 18px;border-radius:var(--rc-radius-md);text-decoration:none;
  transition:top .2s ease
}
.rc-skip-link:focus{top:12px}

/* Accordion nativo (<details>/<summary>) usado em FAQs — acessível sem JS */
.rc-faq-item{background:var(--rc-fundo-3);border:1px solid #E9EDF5;border-radius:var(--rc-radius-lg);overflow:hidden}
.rc-faq-item + .rc-faq-item{margin-top:12px}
.rc-faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:21px 25px;font-family:var(--rc-font-display);font-weight:600;font-size:17px;color:var(--rc-navy)}
.rc-faq-item summary::-webkit-details-marker{display:none}
.rc-faq-item summary::after{content:"+";flex:none;font-family:var(--rc-font-display);font-weight:400;font-size:24px;color:var(--rc-azul);transition:transform .2s}
.rc-faq-item[open] summary::after{transform:rotate(45deg)}
.rc-faq-item p{margin:0;padding:0 25px 23px;font-size:15.5px;line-height:1.65;color:var(--rc-texto-2)}

/* Card premium — anatomia canônica (DESIGN_SYSTEM.md §"Cards") */
.rc-card{background:var(--rc-fundo);border:1px solid var(--rc-linha);border-radius:var(--rc-radius-xl);box-shadow:var(--rc-shadow-resting);transition:transform .2s,border-color .2s,box-shadow .2s}
.rc-card:hover{border-color:var(--rc-linha-hover);transform:translateY(-4px);box-shadow:var(--rc-shadow-hover)}

/* Botão primário */
.rc-btn-primario{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--rc-font-corpo);font-size:16px;font-weight:700;color:#fff;background:var(--rc-azul);padding:16px 30px;border-radius:var(--rc-radius-md);box-shadow:var(--rc-shadow-cta-lg);border:0;cursor:pointer}
.rc-btn-primario:hover{background:var(--rc-azul-hover)}

/* Botão secundário (outline) */
.rc-btn-secundario{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:16px;font-weight:600;color:var(--rc-texto);padding:16px 26px;border-radius:var(--rc-radius-md);border:1px solid #D5DAEA;background:transparent}
.rc-btn-secundario:hover{border-color:var(--rc-azul);color:var(--rc-azul)}

/* Eyebrow */
.rc-eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--rc-azul)}

/* Logo marquee — faixa contínua de logos de clientes (Home). Loop via
   @keyframes marquee (translateX -50%) sobre uma trilha com o conjunto de
   logos duplicado uma vez — por isso a lista em PHP precisa vir 2x.
   Espaçamento via margin-right no item (não gap no container flex): com
   gap, N itens têm N-1 espaços — número ímpar não divide perfeitamente ao
   meio, e -50% cai ~28px antes do início da cópia 2, criando um salto
   visível no loop. Com margin em cada item (inclusive o último — a
   margem sobrando no fim não aparece, fica fora da área visível), cada
   cópia ocupa exatamatemente metade da trilha, sempre, para qualquer
   quantidade de logos. */
.rc-marquee-wrap{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rc-marquee-track{display:flex;align-items:center;width:max-content;animation:marquee 34s linear infinite}
.rc-marquee-wrap:hover .rc-marquee-track{animation-play-state:paused}
.rc-marquee-logo{flex:none;width:140px;height:56px;margin-right:56px;display:flex;align-items:center;justify-content:center}
.rc-marquee-logo img{display:block;max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.5;transition:filter .25s ease,opacity .25s ease}
.rc-marquee-logo:hover img{filter:grayscale(0);opacity:1}
.rc-marquee-placeholder{width:100%;height:100%;border:1.5px dashed #D5DAEA;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--rc-font-display);font-weight:700;font-size:11px;letter-spacing:.08em;color:#B9BFD6}

/* prefers-reduced-motion — DESIGN_SYSTEM.md governança §17 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ==========================================================================
   HEADER — fixed + spacer (não usar sticky, ver DESIGN_SYSTEM.md/CLAUDE.md)
   ========================================================================== */
[data-rc-header]{position:fixed;top:0;left:0;right:0;z-index:50}
/* A barra de admin do WP também é fixed;top:0 com z-index maior que o header
   do tema — sem isso, ela fica por cima do header (achado de auditoria de
   06/08/2026: some da barra utilitária ao rolar, sobra só a barra principal,
   que passa a ficar embaixo da barra de admin). Breakpoint 782px é o mesmo
   que o próprio núcleo do WP usa pra trocar a altura da barra (32px → 46px). */
body.admin-bar [data-rc-header]{top:32px}
@media screen and (max-width:782px){
	body.admin-bar [data-rc-header]{top:46px}
}
[data-rc-utilbar]{background:var(--rc-navy);overflow:hidden;max-height:48px;transition:max-height .35s ease,opacity .3s ease}
/* Sem backdrop-filter: causava vazamento visual determinístico do conteúdo
   por trás dos mega-menus em Chromium/Edge com GPU Intel integrada — achado
   de auditoria de 31/07/2026. Fundo quase opaco preserva a leveza visual
   sem o filtro que gerava o bug. */
[data-rc-mainbar]{background:rgba(255,255,255,.97);border-bottom:1px solid var(--rc-linha);transition:box-shadow .3s ease}
[data-rc-spacer]{height:114px;transition:height .35s ease}

/* ==========================================================================
   RESPONSIVO MOBILE (idêntico aos protótipos .dc.html)
   ========================================================================== */
@media (max-width:1024px){
  [data-rc-utilbar]{display:none !important}
  [data-rc-mainbar] nav{display:none !important}
  [data-rc-hamburger]{display:inline-flex !important}
  [data-rc-mainbar] > div{height:64px !important}
  [data-rc-mainbar] > div > a:last-child{display:none !important}
  [data-rc-spacer]{height:64px !important}
}
@media (min-width:1025px){ [data-rc-hamburger]{display:none !important} }
@media (max-width:760px){
  .rc-grid{grid-template-columns:1fr !important}
  /* [data-mobile-1col] (grade do Herói da Home) nunca teve regra de CSS
     correspondente — a coluna da foto ficava espremida a poucos pixels de
     largura no mobile (achado de auditoria de 31/07/2026). */
  [data-mobile-1col]{grid-template-columns:1fr !important}
  .rc-section-pad{padding-top:52px !important;padding-bottom:52px !important;padding-left:20px !important;padding-right:20px !important}
  h1{font-size:32px !important;line-height:1.14 !important}
  h2{font-size:25px !important;line-height:1.18 !important}
  .rc-container{padding-left:20px !important;padding-right:20px !important}
  [data-mega]{display:none !important}
}