/* componentes.css: cubo SVG, botões, cabeçalho, títulos de seção, modal, rodapé e botões flutuantes.
   Cubotimize, layout novo (direção "Cubo"). Mobile first; pontos de quebra: 640, 960, 1200 px.
   Regras em kb/02-metodo-novo-layout.md: cores, fontes, espaços e tempos só via var(--…) de tokens.css. */

/* ---------- cubo (SVG) ---------- */
.cubo__camada--azul .cubo__topo { fill: var(--azul-claro); }
.cubo__camada--azul .cubo__esq { fill: var(--marinho); }
.cubo__camada--azul .cubo__dir { fill: var(--azul); }
.cubo__camada--verde .cubo__topo { fill: var(--verde-claro); }
.cubo__camada--verde .cubo__esq { fill: var(--verde-escuro); }
.cubo__camada--verde .cubo__dir { fill: var(--verde); }
.cubo__camada--vermelho .cubo__topo { fill: var(--vermelho-claro); }
.cubo__camada--vermelho .cubo__esq { fill: var(--vermelho-escuro); }
.cubo__camada--vermelho .cubo__dir { fill: var(--vermelho); }
.cubo--banner polygon,
.cubo--passo .cubo__camada polygon {
  stroke: var(--tinta); stroke-linejoin: round;
}
.cubo--banner polygon { stroke-width: 2.5; }
.cubo--passo .cubo__camada polygon { stroke-width: 6; }
.cubo__sombra { fill: var(--tinta-sombra); stroke: none; }
.cubo--banner .cubo__sombra { stroke: none; }
.cubo__fantasma {
  fill: none; stroke: var(--tinta); stroke-opacity: 0.3;
  stroke-width: 4; stroke-dasharray: 12 10;
}

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-5);
  border: var(--traco) solid var(--tinta); border-radius: var(--r-pilula);
  font-weight: 800; font-size: var(--fs-pequena); line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: transform var(--d-rapida) var(--curva), box-shadow var(--d-rapida) var(--curva), background-color var(--d-rapida);
}
.botao .icone { transition: transform var(--d-rapida) var(--curva); }
.botao:hover .icone { transform: translateX(3px); }
.botao--grande { padding: var(--e-4) var(--e-6); font-size: var(--fs-base); }
.botao--tinta { background: var(--tinta); color: var(--branco); }
.botao--tinta:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-azul); }
.botao--azul { background: var(--azul); color: var(--branco); }
.botao--azul:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-p); }
.botao--claro { background: var(--branco); color: var(--tinta); }
.botao--claro:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-azul); }
.qlik__parceiro { margin-top: var(--e-6); }
.linha__link {
  display: inline-block; margin-top: var(--e-2);
  font-size: var(--fs-pequena); font-weight: 800; color: var(--azul);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
/* a seta acompanha a última palavra, mesmo quando o texto quebra */
.linha__link .icone { display: inline-block; width: 16px; height: 16px; margin-left: var(--e-1); vertical-align: -3px; }
.botao--borda { background: transparent; color: var(--tinta); }
.botao--borda:hover { background: var(--branco); transform: translate(-2px, -2px); box-shadow: var(--sombra-p); }

/* ---------- cabeçalho ---------- */
.cabecalho {
  position: sticky; top: 0; z-index: 50;
  background: var(--cabecalho-fundo);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: var(--traco-fino) solid var(--tinta-linha);
}
.cabecalho--rolado { border-bottom-color: var(--tinta); }
.cabecalho__barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-4); min-height: var(--altura-cabecalho);
}
.cabecalho__logo { display: block; border-radius: var(--r-p); }
.cabecalho__logo img { width: 164px; }   /* maior = menos degraus nas diagonais do cubo em telas 1x */
.cabecalho__botao { display: none; }

/* sem JS: menu como faixa rolável dentro do cabeçalho */
.cabecalho__nav { width: 100%; overflow-x: auto; padding-bottom: var(--e-3); }
.cabecalho__lista { display: flex; gap: var(--e-2); }
.cabecalho__link {
  display: block; padding: var(--e-2) var(--e-3); border-radius: var(--r-pilula);
  font-weight: 700; font-size: var(--fs-pequena); text-decoration: none; white-space: nowrap;
  transition: background-color var(--d-rapida);
}
.cabecalho__link:hover { background: var(--creme-2); }
.cabecalho__cta { display: none; }

/* com JS: botão abre um painel */
.js .cabecalho__botao {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-4) var(--e-2) var(--e-3);
  background: var(--branco); border: var(--traco) solid var(--tinta); border-radius: var(--r-pilula);
  font-weight: 800; font-size: var(--fs-pequena); cursor: pointer;
}
.js .cabecalho__botao-fechar,
.js .cabecalho__botao[aria-expanded="true"] .cabecalho__botao-abrir { display: none; }
.js .cabecalho__botao[aria-expanded="true"] .cabecalho__botao-fechar { display: inline-flex; }
.cabecalho__botao-abrir, .cabecalho__botao-fechar { display: inline-flex; }
.js .cabecalho__nav {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  width: auto; overflow: visible; padding: var(--e-4) var(--gutter) var(--e-6);
  background: var(--creme); border-bottom: var(--traco) solid var(--tinta);
}
.js .cabecalho__botao[aria-expanded="true"] + .cabecalho__nav { display: block; }
.js .cabecalho__lista { flex-direction: column; gap: 0; }
.js .cabecalho__link {
  padding: var(--e-3) var(--e-2); border-radius: 0; font-size: var(--fs-grande); font-weight: 800;
  border-bottom: var(--traco-fino) solid var(--tinta-linha);
}
.js .cabecalho__cta { display: inline-flex; margin-top: var(--e-5); }

@media (min-width: 960px) {
  .cabecalho__logo img { width: 204px; }
}
@media (min-width: 1200px) {
  .cabecalho__barra { flex-wrap: nowrap; }
  .js .cabecalho__botao { display: none; }
  .cabecalho__nav,
  .js .cabecalho__nav {
    display: flex; align-items: center; gap: var(--e-5);
    position: static; width: auto; padding: 0; overflow: visible;
    background: none; border: 0;
  }
  .cabecalho__lista,
  .js .cabecalho__lista { flex-direction: row; gap: var(--e-1); }
  .cabecalho__link,
  .js .cabecalho__link {
    padding: var(--e-2) var(--e-3); border: 0; border-radius: var(--r-pilula);
    font-size: var(--fs-pequena); font-weight: 700;
  }
  .cabecalho__cta,
  .js .cabecalho__cta { display: inline-flex; margin: 0; }
}

/* ---------- títulos de seção ---------- */
.secao { padding-block: var(--e-8); background: var(--branco); }
.secao--creme { background: var(--creme); }
.secao--marinho { background: var(--marinho); color: var(--branco); }
@media (min-width: 960px) {
  .secao { padding-block: var(--e-9); }
}

.rotulo-secao {
  display: inline-flex; align-items: center; gap: var(--e-2);
  margin-bottom: var(--e-3);
  font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--azul);
}
.rotulo-secao--claro { color: var(--ciano); }
.rotulo-secao__cubo { width: 20px; height: auto; }

.titulo-secao { margin-bottom: var(--e-7); }
.titulo-secao__h2 {
  font-size: var(--fs-h2); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em;
  max-width: 22ch; text-wrap: balance;
}
.titulo-secao__texto { margin-top: var(--e-4); font-size: var(--fs-grande); color: var(--tinta-2); max-width: 36rem; }
@media (min-width: 960px) {
  .titulo-secao--dividido {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--e-8); align-items: end;
  }
  .titulo-secao--dividido .titulo-secao__texto { margin-top: 0; }
}


/* ---------- modal (detalhes dos cursos) ---------- */
.modal {
  width: min(100% - 2 * var(--gutter), 760px); max-height: calc(100dvh - 2 * var(--gutter));
  margin: auto; padding: 0; overflow: visible;
  background: transparent; border: 0; color: var(--tinta);
}
.modal::backdrop { background: var(--modal-fundo); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
/* sem JS o link abre o modal por âncora */
.modal:target:not([open]) {
  display: block; position: fixed; inset: 0; z-index: 70;
  width: auto; max-height: none; padding: var(--gutter); overflow-y: auto;
  background: var(--modal-fundo);
}
.modal:target:not([open]) .modal__caixa { max-width: 760px; margin: var(--e-6) auto; max-height: none; }
.modal__caixa {
  display: flex; flex-direction: column;
  max-height: calc(100dvh - 2 * var(--gutter));
  background: var(--branco); border: var(--traco) solid var(--tinta); border-radius: var(--r-g);
  box-shadow: var(--sombra-g); overflow: hidden;
}
.modal__topo {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e-4); align-items: center;
  padding: var(--e-5); border-bottom: var(--traco) solid var(--tinta);
  background: var(--creme);
}
.modal__nivel {
  display: grid; place-items: center; width: 64px; height: 64px;
  border: var(--traco) solid var(--tinta); border-radius: var(--r-m);
  color: var(--branco); font-size: var(--fs-destaque); font-weight: 1000; letter-spacing: -0.03em;
  background: var(--azul);
}
.modal--verde .modal__nivel { background: var(--verde-escuro); }
.modal--vermelho .modal__nivel { background: var(--vermelho); }
.modal--marinho .modal__nivel { background: var(--marinho); }
.modal__rotulo { font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); }
.modal__rotulo-marca { display: none; }
.modal__titulo { font-size: var(--fs-h3); font-weight: 900; line-height: 1.15; }
.modal__fechar {
  display: grid; place-items: center; width: 44px; height: 44px; align-self: start;
  border: var(--traco) solid var(--tinta); border-radius: 50%; background: var(--branco);
  transition: transform var(--d-rapida) var(--curva), box-shadow var(--d-rapida) var(--curva);
}
.modal__fechar:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-p); }
.modal__corpo {
  display: grid; gap: var(--e-4); padding: var(--e-5);
  overflow-y: auto; overscroll-behavior: contain; color: var(--tinta-2);
}
.modal__colunas { display: grid; gap: var(--e-5); margin-top: var(--e-2); padding-top: var(--e-5); border-top: var(--traco) dashed var(--tinta-linha); }
.modal__h4 {
  margin-bottom: var(--e-2);
  font-size: var(--fs-mini); font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta);
}
.modal__h4 ~ .modal__h4 { margin-top: var(--e-4); }
.modal__rodape {
  display: flex; flex-wrap: wrap; gap: var(--e-3);
  padding: var(--e-4) var(--e-5); border-top: var(--traco) solid var(--tinta); background: var(--creme);
}
@media (min-width: 640px) {
  .modal__topo, .modal__corpo { padding: var(--e-6); }
  .modal__rotulo-marca { display: inline; }
  .modal__rodape { padding: var(--e-4) var(--e-6); }
  .modal__colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6); }
  .modal__nivel { width: 76px; height: 76px; font-size: var(--fs-bloco); }
}
@media (prefers-reduced-motion: no-preference) {
  .modal[open] .modal__caixa { animation: modal-entra var(--d-media) var(--curva); }
  .modal[open]::backdrop { animation: fundo-entra var(--d-media) ease-out; }
}
@keyframes modal-entra { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
@keyframes fundo-entra { from { opacity: 0; } }

/* ---------- rodapé ---------- */
.rodape { padding-top: var(--e-8); background: var(--tinta); color: var(--claro-2); font-size: var(--fs-pequena); }
.rodape__grade { display: grid; gap: var(--e-6); padding-bottom: var(--e-7); }
/* os dois logos com a mesma largura, separados por uma linha discreta */
.rodape__marca { width: min(100%, var(--rodape-logo)); }
.rodape__marca img { width: 100%; }
.rodape__cuboplus {
  display: block; margin-top: var(--e-4); padding-top: var(--e-4);
  border-top: var(--traco-fino) solid var(--claro-linha);
}
.rodape__cuboplus img { transition: transform var(--d-rapida) var(--curva); }
.rodape__cuboplus:hover img { transform: translateY(-2px); }
.rodape__h2 {
  margin-bottom: var(--e-3); color: var(--branco);
  font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
}
.rodape__col p + p { margin-top: var(--e-2); }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--branco); text-decoration: underline; text-underline-offset: 3px; }
.rodape__redes { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); margin-top: var(--e-4); }
.rodape__redes a { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 700; }
.rodape__selos { display: flex; gap: var(--e-4); }
.rodape__selos a { display: block; border-radius: var(--r-m); overflow: hidden; transition: transform var(--d-rapida) var(--curva); }
.rodape__selos a:hover { transform: translateY(-3px); }
.rodape__selos img { width: 96px; }
.rodape__base {
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6); justify-content: space-between;
  padding-block: var(--e-5); border-top: var(--traco-fino) solid var(--claro-linha);
  font-size: var(--fs-mini);
}
.rodape__base a { color: var(--branco); font-weight: 700; }
@media (min-width: 640px) {
  .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .rodape__grade { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--e-7); }
  .rodape__base { padding-right: var(--e-9); }
}

/* ---------- WhatsApp flutuante ---------- */
.whats {
  position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: 40;
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--verde); color: var(--tinta);
  border: var(--traco) solid var(--tinta); box-shadow: var(--sombra-p);
  transition: transform var(--d-rapida) var(--curva), box-shadow var(--d-rapida) var(--curva);
}
.whats:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-m); }
.whats .icone { width: 30px; height: 30px; }
@media (min-width: 960px) {
  .whats { right: var(--e-6); bottom: var(--e-6); }
}

/* ---------- voltar ao topo (acima do WhatsApp) ---------- */
.topo {
  position: fixed; right: calc(var(--e-4) + 6px); bottom: calc(var(--e-4) + 60px + var(--e-3)); z-index: 40;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--branco); color: var(--tinta);
  border: var(--traco) solid var(--tinta); box-shadow: var(--sombra-p);
  transition: transform var(--d-rapida) var(--curva), box-shadow var(--d-rapida) var(--curva),
    opacity var(--d-media) var(--curva), visibility var(--d-media);
}
.topo:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-m); }
.topo .icone { width: 24px; height: 24px; stroke-width: 2.5; }
/* com JS só aparece depois de rolar; sem JS fica sempre visível */
.js .topo:not(.topo--visivel) { opacity: 0; visibility: hidden; transform: translateY(12px); }
@media (min-width: 960px) {
  .topo { right: calc(var(--e-6) + 6px); bottom: calc(var(--e-6) + 60px + var(--e-3)); }
}


/* ---------- formulários (contato, depoimento) ---------- */
.campo { display: grid; gap: var(--e-1); }
.campo__rotulo { font-weight: 800; font-size: var(--fs-pequena); }
.campo__opcional { font-weight: 600; color: var(--tinta-2); }
.campo__entrada {
  width: 100%; padding: var(--e-3) var(--e-4);
  background: var(--creme); color: var(--tinta);
  border: var(--traco) solid var(--tinta); border-radius: var(--r-p);
  font: inherit; font-size: var(--fs-base);
  transition: background-color var(--d-rapida), box-shadow var(--d-rapida);
}
.campo__entrada:focus { background: var(--branco); box-shadow: var(--sombra-azul); outline: none; }
.campo__entrada:focus-visible { outline: var(--foco) solid var(--azul); outline-offset: 2px; }
.campo__entrada--texto { resize: vertical; min-height: 128px; }
.campo__captcha { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.campo__captcha img { border: var(--traco-fino) solid var(--tinta-linha); border-radius: var(--r-p); background: var(--creme); }
.campo__captcha .campo__entrada { flex: 1 1 160px; width: auto; }