/* Páginas do Chatwow (wowcubo.com.br/chatwow/).
   CSS próprio, sem depender do css/style.css da home: estas páginas ficam cadastradas na Meta
   e não podem quebrar quando a home mudar. Fontes e imagens vêm das pastas do site. */

@font-face {
  font-family: "klavika_lightplain";
  src: url("../fontes/klavikalight-plain-webfont.woff2") format("woff2"),
       url("../fontes/klavikalight-plain-webfont.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "klavika_ch_regularregular";
  src: url("../fontes/klavikach-regular-webfont.woff2") format("woff2"),
       url("../fontes/klavikach-regular-webfont.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "klavika_boldbold";
  src: url("../fontes/klavikaboldbold-webfont.woff2") format("woff2"),
       url("../fontes/klavikaboldbold-webfont.woff") format("woff");
  font-display: swap;
}

:root {
  --escuro: #242424;
  --texto: #3a3a3a;
  --suave: #bdbdbd;
  --verde: #8dc63f;   /* verde do logo WOWCUBO, o mesmo do "wow" do Chatwow */
  --roxo: #522a7c;    /* roxo do logo WOWCUBO */
  --azul: #00aeef;    /* azul dos títulos do site */
  --largura: 970px;
  --leve: "klavika_lightplain", Arial, Helvetica, sans-serif;
  --regular: "klavika_ch_regularregular", Arial, Helvetica, sans-serif;
  --negrito: "klavika_boldbold", Arial, Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #f3f3f3 url("../img/bg-geral.jpg") repeat;
  color: var(--texto);
  font: 17.5px/1.65 var(--regular);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; border: 0; }
a {
  color: var(--roxo);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: #3a1c5a; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }

/* ---------- topo: logo e menu, como na home ---------- */
.topo { max-width: calc(var(--largura) + 48px); margin: 0 auto; padding: 30px 24px 34px; }
.logo-wowcubo { display: inline-block; }
.logo-wowcubo img { display: block; width: 212px; }

.menu { position: fixed; top: 20px; right: 25px; z-index: 10; text-align: right; }
.menu-rotulo {
  display: block;
  width: 50px;
  margin-left: auto;
  text-align: center;
  font: 10px/1 var(--regular);
  letter-spacing: .08em;
  color: var(--escuro);
}
.hamburguer {
  display: block;
  width: 50px;
  margin: 5px 0 5px auto;
  padding: 1px 5px;
  border: 0;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
.hamburguer span { display: block; height: 5px; margin: 5px 0; border-radius: 10px; background: var(--escuro); }
.menu ul { list-style: none; margin: 0 -320px 0 0; padding: 0; transition: margin-right .5s ease; }
.menu ul.ativo, .menu ul:focus-within { margin-right: 0; }
.menu li {
  float: right;
  clear: both;
  margin-bottom: 3px;
  padding: 5px 20px;
  background: var(--escuro);
  transform: skewX(-30deg);
  transition: margin-right .3s ease, background-color .3s ease;
}
.menu li:hover { margin-right: 20px; background: #f16521; }
.menu li a {
  display: block;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transform: skewX(30deg);
  font: 14px/1.6 var(--leve);
}
.menu li a img { width: 16px; margin-right: 10px; vertical-align: -1px; }

/* ---------- faixa escura com o título ---------- */
.faixa {
  position: relative;
  overflow: hidden;
  padding: 64px 24px 132px;
  background: var(--escuro);
  color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 72px), 0 100%);
}
.faixa::before, .faixa::after {  /* listras diagonais, como as da home */
  content: "";
  position: absolute;
  width: 14px;
  height: 560px;
  transform: rotate(45deg);
}
.faixa::before { right: 14%; top: -150px; background: var(--verde); }
.faixa::after { right: calc(14% - 40px); top: -60px; height: 380px; background: var(--roxo); }
.faixa-wrap { position: relative; z-index: 1; max-width: var(--largura); margin: 0 auto; }
.faixa h1 {
  max-width: 15em;
  margin: 0;
  font: 46px/1.1 var(--regular);
  text-transform: uppercase;
  color: #fff;
}
.faixa-marca { margin: 0 0 20px; font: 15px/1 var(--negrito); letter-spacing: .12em; text-transform: uppercase; }
.faixa-marca a { display: inline-flex; align-items: center; gap: 10px; color: var(--verde); text-decoration: none; }
.faixa-marca a:hover { color: #fff; }
.faixa-marca img { width: 30px; }
.faixa-data { margin: 18px 0 0; font: 17px/1.4 var(--leve); color: var(--suave); }

/* página principal: símbolo + nome + chamada */
.faixa-chatwow .faixa-wrap { display: flex; align-items: center; gap: 36px; }
.faixa-simbolo { flex: none; width: 150px; }
.faixa h1.titulo-marca { font: 84px/1 var(--negrito); text-transform: none; letter-spacing: -.01em; }
.titulo-marca .wow { color: var(--verde); }
.chamada { margin: 12px 0 0; font: 30px/1.25 var(--leve); color: #e6e6e6; }

/* ---------- texto ---------- */
.conteudo {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: -64px auto 0;
  padding: 56px 64px 48px;
  background: #fff;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, .08);
}
.conteudo > :first-child { margin-top: 0; }
.conteudo p { margin: 0 0 1em; }
.conteudo strong { font-family: var(--negrito); font-weight: normal; color: var(--escuro); }
.conteudo h2 {
  margin: 2.2em 0 .7em;
  font: 21px/1.3 var(--negrito);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--escuro);
}
.conteudo h2::before {  /* losango, como os quadros de "O que fazemos" */
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 14px;
  background: var(--verde);
  transform: rotate(45deg);
  vertical-align: 2px;
}
.conteudo ul { list-style: none; margin: 0 0 1.2em; padding: 0; }
.conteudo ul li { position: relative; margin-bottom: .55em; padding-left: 26px; }
.conteudo ul li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .62em;
  width: 8px;
  height: 8px;
  background: var(--roxo);
  transform: rotate(45deg);
}
.conteudo .abertura { font: 21px/1.55 var(--leve); color: #2b2b2b; }
.conteudo .antes-da-lista { margin-bottom: .6em; font-family: var(--negrito); color: var(--escuro); }

ol.passos { list-style: none; margin: 0 0 1.4em; padding: 0; }
ol.passos li { position: relative; min-height: 34px; margin-bottom: 1em; padding-left: 54px; }
ol.passos .numero {
  position: absolute;
  left: 5px;
  top: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--escuro);
  transform: rotate(45deg);
}
ol.passos .numero span { transform: rotate(-45deg); font: 14px/1 var(--negrito); color: #fff; }

.legais, .voltar { margin: 2.6em 0 0; padding-top: 1.3em; border-top: 1px solid #e3e3e3; }
.conteudo .legais { margin-bottom: 0; }
.voltar { margin-bottom: 0; }

/* ---------- rodapé ---------- */
.rodape {
  margin-top: 96px;
  padding: 124px 24px 56px;
  background: var(--escuro);
  color: #cfcfcf;
  font: 16px/1.7 var(--leve);
  clip-path: polygon(0 72px, 100% 0, 100% 100%, 0 100%);
}
.rodape-wrap { position: relative; max-width: var(--largura); margin: 0 auto; }
.rodape-titulo { margin: 0 0 24px; font: 34px/1 var(--negrito); text-transform: uppercase; color: #fff; }
.rodape-titulo span { display: block; margin-left: .7em; font: 50px/1 var(--regular); color: var(--azul); }
.rodape p { margin: 0 0 4px; }
.rodape a { color: #fff; }
.rodape a:hover { color: var(--verde); }
.rodape-bo { position: absolute; right: 0; bottom: 4px; width: 70px; }

@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .topo { padding: 18px 16px 22px; }
  .logo-wowcubo img { width: 150px; }
  .menu { top: 10px; right: 12px; }
  .faixa { padding: 44px 16px 100px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%); }
  .faixa h1 { font-size: 30px; }
  .faixa::before { right: -20px; }
  .faixa::after { right: -60px; }
  .faixa-chatwow .faixa-wrap { flex-direction: column; align-items: flex-start; gap: 18px; }
  .faixa-simbolo { width: 96px; }
  .faixa h1.titulo-marca { font-size: 56px; }
  .chamada { font-size: 23px; }
  .conteudo { margin: -56px 12px 0; padding: 32px 20px 28px; box-shadow: 6px 6px 0 rgba(0, 0, 0, .08); }
  .conteudo .abertura { font-size: 19px; }
  .conteudo h2 { font-size: 18.5px; }
  .rodape { padding: 84px 16px 40px; clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%); }
  .rodape-titulo { font-size: 26px; }
  .rodape-titulo span { font-size: 38px; }
  .rodape-bo { position: static; display: block; margin-top: 24px; }
}