/* ==========================================================================
   RAQUIM — sistema visual do site publico
   --------------------------------------------------------------------------
   Superficie CLARA, imagem no comando (referencia: Tarkett), com o azul e o
   dourado da RAQUIM Academy conduzindo acao e destaque. A Academy segue
   escura de proposito: entrar nela tem que parecer entrar em outro lugar, e
   isso so funciona se o site for claro.

   Nota de contraste: o dourado do brasao (#C9A961) da 2:1 sobre branco —
   ilegivel como texto. Por isso ha dois tokens: --r-gold para TEXTO (escuro,
   5,4:1) e --r-gold-lit para preenchimento decorativo.
   ========================================================================== */

/* O Extra/Divi envolve o conteudo em containers com largura maxima e padding.
   Para o layout sangrar de ponta a ponta, esses respiros somem — mas SO nas
   paginas que usam este template (body.raquim-layout). */
body.raquim-layout #page-container,
body.raquim-layout #et-main-area,
body.raquim-layout #main-content,
body.raquim-layout .container,
body.raquim-layout #content-area,
body.raquim-layout .et_pb_row,
body.raquim-layout .et_pb_section,
body.raquim-layout article,
body.raquim-layout .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  background: transparent !important;
}
body.raquim-layout .entry-title,
body.raquim-layout .main_title,
body.raquim-layout #breadcrumbs,
body.raquim-layout #sidebar { display: none !important; }

.raquim-site {
  /* --- superficies --- */
  --r-bg:        #FFFFFF;
  --r-bg-soft:   #F5F7FB;
  --r-bg-tint:   #EDF2FA;
  --r-dark:      #0B1220;   /* secoes escuras: Academy, sustentabilidade */
  --r-dark-2:    #131B2E;
  --r-line:      #E3E8F0;
  --r-line-dark: #23304E;

  /* --- texto --- */
  --r-ink:       #101828;   /* 16,4:1 sobre branco */
  --r-ink-mid:   #4A5768;   /* 7,6:1 */
  --r-ink-dim:   #667488;   /* 4,9:1 — limite AA */
  --r-ink-inv:   #EDF2FA;

  /* --- marca --- */
  --r-blue:      #2258CC;   /* acao: branco sobre ele da 6:1 */
  --r-blue-lit:  #2F6BEA;   /* o azul da Academy, para fundos e acentos */
  --r-blue-deep: #17408F;
  --r-blue-ghost:rgba(34,88,204,.08);

  --r-gold:      #8A6D25;   /* dourado LEGIVEL como texto */
  --r-gold-lit:  #C9A961;   /* dourado do brasao, so decorativo */

  /* --- forma --- */
  --r-r:    14px;
  --r-r-lg: 22px;
  --r-shadow:    0 1px 2px rgba(16,24,40,.05), 0 10px 26px rgba(16,24,40,.07);
  --r-shadow-lg: 0 24px 60px rgba(16,24,40,.14);

  /* --- tipografia (mesma da Academy: continuidade de marca) --- */
  --r-display: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-body:    'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-max: 1200px;

  background: var(--r-bg);
  color: var(--r-ink);
  font-family: var(--r-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* O tema Extra/Divi pinta cor em seletor de elemento e injeta CSS inline por
   pagina. Mesma tatica do portal: cor explicita, escopada em .raquim-site. */
.raquim-site *, .raquim-site *::before, .raquim-site *::after { box-sizing: border-box; }
.raquim-site h1, .raquim-site h2, .raquim-site h3, .raquim-site h4 {
  font-family: var(--r-display);
  color: var(--r-ink);
  margin: 0;
  padding: 0;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
  text-transform: none;
}
.raquim-site p { margin: 0; color: var(--r-ink-mid); }
.raquim-site a { color: var(--r-blue); text-decoration: none; }
.raquim-site img { max-width: 100%; height: auto; display: block; }
.raquim-site ul { list-style: none; margin: 0; padding: 0; }

/* -------------------------------------------------------------- estrutura */

.r-wrap { width: 100%; max-width: var(--r-max); margin: 0 auto; padding: 0 28px; }
@media (max-width: 700px) { .r-wrap { padding: 0 18px; } }

.r-sec { padding: 88px 0; }
.r-sec--tight { padding: 64px 0; }
@media (max-width: 900px) { .r-sec { padding: 60px 0; } .r-sec--tight { padding: 44px 0; } }

.r-sec--soft { background: var(--r-bg-soft); }
.r-sec--dark { background: var(--r-dark); color: var(--r-ink-inv); }
:is(.r-sec--dark, .r-academy) h2,
:is(.r-sec--dark, .r-academy) h3 { color: var(--r-ink-inv); }
:is(.r-sec--dark, .r-academy) p { color: #A9B6CE; }

/* eyebrow + titulo de secao */
.r-eyebrow {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; color: var(--r-gold); margin-bottom: 12px;
}
:is(.r-sec--dark, .r-academy) .r-eyebrow { color: var(--r-gold-lit); }
.r-h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; }
.r-lead { font-size: 1.05rem; line-height: 1.65; max-width: 62ch; margin-top: 14px; }
.r-head { margin-bottom: 44px; max-width: 720px; }

/* --------------------------------------------------------------- botoes */

.r-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 30px; border-radius: 999px;
  font-family: var(--r-body); font-weight: 700; font-size: .95rem;
  background: var(--r-blue); color: #FFFFFF !important;
  border: 1px solid var(--r-blue);
  transition: background .16s ease, transform .12s ease, box-shadow .16s ease;
  cursor: pointer;
}
.r-btn:hover { background: var(--r-blue-deep); border-color: var(--r-blue-deep); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(34,88,204,.28); }
.r-btn--ghost { background: transparent; color: var(--r-blue) !important; border-color: rgba(34,88,204,.35); }
.r-btn--ghost:hover { background: var(--r-blue-ghost); color: var(--r-blue-deep) !important; box-shadow: none; }
.r-btn--onDark { background: #FFFFFF; color: var(--r-dark) !important; border-color: #FFFFFF; }
.r-btn--onDark:hover { background: #E7ECF4; border-color: #E7ECF4; color: var(--r-dark) !important; }
.r-btn--ghostDark { background: transparent; color: #FFFFFF !important; border-color: rgba(255,255,255,.34); }
.r-btn--ghostDark:hover { background: rgba(255,255,255,.09); color: #FFFFFF !important; }
.r-btn svg { width: 17px; height: 17px; }

.r-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* link com seta */
.r-more { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .9rem; }
.r-more svg { width: 15px; height: 15px; transition: transform .16s ease; }
.r-more:hover svg { transform: translateX(3px); }

/* ----------------------------------------------------------------- hero */

.r-hero { position: relative; background: var(--r-dark); overflow: hidden; }
.r-hero__img { position: absolute; inset: 0; }
.r-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
/* o degrade garante contraste do texto sobre qualquer parte da foto */
.r-hero__veu {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,10,20,.93) 0%, rgba(6,10,20,.82) 42%, rgba(6,10,20,.25) 72%, rgba(6,10,20,.05) 100%);
}
.r-hero__in { position: relative; padding: 116px 0 124px; }
.r-hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 800; color: #FFFFFF;
  max-width: 17ch; line-height: 1.06;
}
.r-hero p { color: #C6D2E6; font-size: 1.1rem; max-width: 46ch; margin-top: 20px; line-height: 1.6; }
.r-hero .r-eyebrow { color: var(--r-gold-lit); }
@media (max-width: 900px) {
  .r-hero__in { padding: 76px 0 84px; }
  .r-hero__veu { background: linear-gradient(180deg, rgba(6,10,20,.9) 0%, rgba(6,10,20,.8) 55%, rgba(6,10,20,.72) 100%); }
  .r-hero h1 { max-width: none; }
}

/* faixa de credibilidade sob o hero */
.r-strip { background: var(--r-dark-2); border-top: 1px solid var(--r-line-dark); }
.r-strip ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.r-strip li {
  padding: 22px 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
/* item que e frase, nao numero: menor e com entrelinha, para caber em duas
   linhas ao lado dos itens de duas alturas sem desalinhar a faixa */
.r-strip .r-strip__frase { font-size: 1.06rem; line-height: 1.3; max-width: 22ch; }
.r-strip b { display: block; font-family: var(--r-display); font-size: 1.5rem; font-weight: 800; color: #FFFFFF; letter-spacing: -.03em; }
.r-strip span { font-size: .78rem; color: #8FA0BC; letter-spacing: .04em; }
@media (max-width: 760px) { .r-strip ul { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------- grades */

.r-grid { display: grid; gap: 22px; }
.r-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.r-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(232px, 100%), 1fr)); }
.r-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }

/* --------------------------------------------------------- card de linha */

.r-line {
  display: flex; flex-direction: column;
  background: var(--r-bg); border: 1px solid var(--r-line);
  border-radius: var(--r-r-lg); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.r-line:hover { transform: translateY(-4px); box-shadow: var(--r-shadow-lg); border-color: rgba(34,88,204,.3); }
.r-line__fig { aspect-ratio: 4 / 3; background: var(--r-bg-tint); overflow: hidden; }
.r-line__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.r-line:hover .r-line__fig img { transform: scale(1.05); }
.r-line__body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.r-line__nome { font-size: 1.25rem; font-weight: 800; }
.r-line__tag { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--r-gold); }
.r-line__desc { font-size: .94rem; }
.r-line__itens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.r-line__itens li {
  font-size: .76rem; font-weight: 600; color: var(--r-ink-mid);
  background: var(--r-bg-soft); border: 1px solid var(--r-line);
  padding: 5px 11px; border-radius: 999px;
}
.r-line__pe { margin-top: auto; padding-top: 16px; }

/* ------------------------------------------------------ card de produto */

.r-prod {
  background: var(--r-bg); border: 1px solid var(--r-line);
  border-radius: var(--r-r); overflow: hidden; text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.r-prod:hover { transform: translateY(-3px); box-shadow: var(--r-shadow); }
.r-prod__fig { aspect-ratio: 1; background: var(--r-bg-soft); display: grid; place-items: center; padding: 22px; }
.r-prod__fig img { max-width: 100%; max-height: 100%; object-fit: contain; }
.r-prod__body { padding: 0 18px 24px; }
.r-prod__nome { font-size: 1rem; font-weight: 700; margin-bottom: 5px; }
.r-prod__desc { font-size: .84rem; color: var(--r-ink-dim); line-height: 1.5; }

/* --------------------------------------------------------- bloco 2 col */

.r-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.r-split--inv .r-split__fig { order: -1; }
@media (max-width: 900px) { .r-split { grid-template-columns: 1fr; gap: 34px; } .r-split--inv .r-split__fig { order: 0; } }
.r-split__fig img { border-radius: var(--r-r-lg); width: 100%; }

/* lista com marcador dourado */
/* o max-width segura a linha legivel quando a lista ocupa a largura inteira
   (produto sem ficha tecnica, blocos institucionais) */
.r-checks { display: flex; flex-direction: column; gap: 13px; margin-top: 26px; max-width: 66ch; }
.r-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--r-ink-mid); }
:is(.r-sec--dark, .r-academy) .r-checks li { color: #A9B6CE; }
.r-checks svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 2px; color: var(--r-gold-lit); }

/* ------------------------------------------------------------- academy */

.r-academy { background: var(--r-dark); position: relative; overflow: hidden; }
.r-academy::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(900px 460px at 12% 0%, rgba(47,107,234,.22), transparent 62%),
    radial-gradient(700px 400px at 92% 100%, rgba(201,169,97,.10), transparent 60%);
}
.r-academy .r-wrap { position: relative; }
/* o brasao e arte escura sobre claro: a placa branca preserva as cores */
.r-academy__crest {
  width: 96px; background: #FFFFFF; padding: 11px; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); margin-bottom: 24px;
}

/* --------------------------------------------------------- calculadora */

.r-tool {
  background: linear-gradient(120deg, var(--r-blue-deep), var(--r-blue-lit));
  border-radius: var(--r-r-lg); padding: 52px 56px; color: #FFFFFF;
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
}
.r-tool h2, .r-tool h3 { color: #FFFFFF; }
.r-tool p { color: rgba(255,255,255,.86); margin-top: 10px; max-width: 52ch; }
@media (max-width: 820px) { .r-tool { grid-template-columns: 1fr; padding: 36px 26px; } }

/* -------------------------------------------------------------- rodape */

.r-cta { text-align: center; }
.r-cta .r-lead { margin-left: auto; margin-right: auto; }
.r-cta .r-acts { justify-content: center; }

/* respeita quem desligou animacao no sistema */
@media (prefers-reduced-motion: reduce) {
  .raquim-site * { animation: none !important; transition: none !important; }
  .r-line:hover, .r-prod:hover { transform: none; }
}

/* ==========================================================================
   PAGINA DE PRODUTO
   ========================================================================== */

.r-trilha {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  font-size: .82rem; color: var(--r-ink-dim); padding: 26px 0 0;
}
.r-trilha a { color: var(--r-ink-dim); }
.r-trilha a:hover { color: var(--r-blue); }
.r-trilha strong { color: var(--r-ink); font-weight: 700; }

.r-pt { padding-bottom: 72px; background: var(--r-bg); }
.r-pt__grid {
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: 56px; align-items: center; padding-top: 34px;
}
@media (max-width: 900px) { .r-pt__grid { grid-template-columns: 1fr; gap: 30px; } .r-pt { padding-bottom: 48px; } }

.r-pt__fig {
  background: var(--r-bg-soft); border: 1px solid var(--r-line);
  border-radius: var(--r-r-lg); aspect-ratio: 1;
  display: grid; place-items: center; padding: 34px; overflow: hidden;
}
.r-pt__fig img { max-width: 100%; max-height: 100%; object-fit: contain; }
.r-pt__logo { max-width: 55% !important; opacity: .5; }
.r-pt__vazio {
  font-family: var(--r-display); font-weight: 800; font-size: 1.4rem;
  color: var(--r-ink-dim); text-align: center; opacity: .55;
}

.r-pt__nome { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; margin-bottom: 12px; }
.r-pt__chamada { font-size: 1.12rem; line-height: 1.6; max-width: 46ch; }

/* selos do rotulo */
.r-selos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.r-selos li {
  font-size: .76rem; font-weight: 700; letter-spacing: .02em;
  color: var(--r-blue-deep); background: var(--r-blue-ghost);
  border: 1px solid rgba(34,88,204,.2);
  padding: 7px 13px; border-radius: 999px;
}

/* ficha tecnica */
.r-ficha {
  background: var(--r-bg); border: 1px solid var(--r-line);
  border-radius: var(--r-r-lg); overflow: hidden; box-shadow: var(--r-shadow);
}
.r-ficha__topo {
  background: var(--r-dark); color: #FFFFFF;
  font-family: var(--r-display); font-weight: 700; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 16px 24px;
}
.r-ficha dl { margin: 0; padding: 6px 24px 18px; }
.r-ficha__linha {
  display: grid; grid-template-columns: 1fr auto; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--r-line);
}
.r-ficha__linha:last-child { border-bottom: 0; }
.r-ficha dt { font-size: .88rem; color: var(--r-ink-mid); margin: 0; }
.r-ficha dd {
  margin: 0; font-weight: 700; font-size: .92rem; color: var(--r-ink);
  text-align: right; font-variant-numeric: tabular-nums;
}
.r-ficha__nota {
  margin: 0; padding: 14px 24px 20px; font-size: .8rem; line-height: 1.5;
  color: var(--r-ink-dim); border-top: 1px solid var(--r-line);
  background: var(--r-bg-soft);
}
@media (max-width: 560px) {
  .r-ficha__linha { grid-template-columns: 1fr; gap: 4px; }
  .r-ficha dd { text-align: left; }
}

/* variantes (PVA, tack molhado/seco) */
.r-var {
  background: var(--r-bg); border: 1px solid var(--r-line);
  border-left: 3px solid var(--r-blue);
  border-radius: var(--r-r); padding: 28px 30px;
}
.r-var__nome { font-size: 1.15rem; font-weight: 800; margin-bottom: 10px; }
.r-var__specs { margin: 20px 0 0; display: flex; flex-direction: column; gap: 10px; }
.r-var__specs > div { display: grid; grid-template-columns: 1fr auto; gap: 16px; font-size: .86rem; }
.r-var__specs dt { color: var(--r-ink-dim); margin: 0; }
.r-var__specs dd { margin: 0; font-weight: 700; color: var(--r-ink); text-align: right; }
@media (max-width: 560px) {
  .r-var__specs > div { grid-template-columns: 1fr; gap: 2px; }
  .r-var__specs dd { text-align: left; }
}

.r-prod__logo { max-width: 58% !important; opacity: .42; }

/* bloco "nao confunda": separa dois produtos que resolvem coisas diferentes */
.r-confuso {
  display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center;
  background: var(--r-bg); border: 1px solid var(--r-line);
  border-left: 4px solid var(--r-gold-lit);
  border-radius: var(--r-r-lg); padding: 32px 36px;
  box-shadow: var(--r-shadow);
}
.r-confuso__t { font-size: 1.35rem; font-weight: 800; margin-bottom: 8px; }
.r-confuso p { font-size: .96rem; line-height: 1.6; max-width: 62ch; }
@media (max-width: 820px) { .r-confuso { grid-template-columns: 1fr; padding: 26px 24px; } }

/* placeholder de foto que ainda vai subir para a Midia */
.r-pt__vazio small { display: block; margin-top: 8px; opacity: .8; }

/* ==========================================================================
   PAGINA DE LINHA
   ========================================================================== */

/* o logo da linha no hero escuro: placa clara porque as artes das marcas sao
   escuras sobre fundo claro — sem a placa, o Fyxor some no preto. */
.r-linha__marca {
  width: 92px; background: #FFFFFF; padding: 12px; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); margin-bottom: 26px;
}
@media (max-width: 700px) { .r-linha__marca { width: 74px; padding: 10px; margin-bottom: 20px; } }

/* a Academy dentro da pagina de linha usa duas colunas, e ai a foto precisa
   caber na secao escura sem estourar a altura */
.r-academy .r-split__fig img { max-height: 420px; object-fit: cover; }

/* ==========================================================================
   SUSTENTABILIDADE / SOBRE
   ========================================================================== */

/* pilar numerado: a numeracao aqui e informacao, nao enfeite — sao os quatro
   pontos que o visitante pode conferir na ficha, na ordem em que aparecem. */
.r-pilar {
  background: var(--r-bg); border: 1px solid var(--r-line);
  border-radius: var(--r-r-lg); padding: 28px 26px 30px;
  display: flex; flex-direction: column; gap: 10px;
}
.r-pilar__n {
  font-family: var(--r-display); font-weight: 800; font-size: 1.5rem;
  color: var(--r-gold-lit); letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.r-pilar__t { font-size: 1.08rem; font-weight: 800; }
.r-pilar p { font-size: .9rem; line-height: 1.6; }

/* a foto do Fixador de Pedras tem o balde no centro-esquerda, exatamente onde
   entra o texto do hero. Puxando o enquadramento para a direita, sobra o
   paisagismo — que e o que a pagina quer mostrar. */
.r-hero--sust .r-hero__img img { object-position: 82% 58%; }

/* bloco que NAO pode ir ao ar: fica visualmente inconfundivel de proposito */
.r-pendente {
  border: 2px dashed var(--r-gold-lit); border-radius: var(--r-r-lg);
  padding: 34px 36px 38px; background: rgba(201,169,97,.06);
}
.r-pendente__tag {
  display: inline-block; margin-bottom: 14px;
  font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #FFFFFF; background: var(--r-gold); padding: 6px 12px; border-radius: 999px;
}
@media (max-width: 700px) { .r-pendente { padding: 26px 22px 30px; } }

/* card de produto sem foto e sem logo da linha (Industrial) */
.r-prod__vazio {
  font-family: var(--r-display); font-weight: 800; font-size: .95rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--r-ink-dim); opacity: .45;
}