/*
Theme Name: Cube3 Creative
Theme URI: https://cube3.com.br
Author: Cube3 Creative
Author URI: https://cube3.com.br
Description: Tema institucional customizado da Cube3 Creative — estratégia, criatividade e execução.
Version: 0.3.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cube3
*/

@font-face {
  font-family: 'Clash Display';
  src: url('assets/fonts/ClashDisplay-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('assets/fonts/ClashDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('assets/fonts/GeneralSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('assets/fonts/GeneralSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('assets/fonts/GeneralSans-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  --c3-violet: #6E20D9;
  --c3-blue: #3358F1;
  --c3-gradient-mid: #5744E6;
  --c3-ink: #0B0B14;
  --c3-paper: #F7F6F2;
  --c3-accent-orange: #FF6B35;
  --c3-accent-orange-deep: #A83D19;
  --c3-text-on-dark: #F5F5F7;
  --c3-text-on-light: #12121A;
  --c3-gradient: linear-gradient(135deg, var(--c3-violet), var(--c3-gradient-mid) 55%, var(--c3-blue));

  --font-display: 'Clash Display', system-ui, sans-serif;
  --font-body: 'General Sans', system-ui, sans-serif;
  --font-accent: 'Fraunces', Georgia, serif;

  --container-max: 1280px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 8rem;
  --space-8: 11rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--c3-paper);
  color: var(--c3-text-on-light);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; margin: 0; }
p { margin: 0; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.section { padding-block: clamp(3.5rem, 8vw, var(--space-7)); }
.section--dark { background: var(--c3-ink); color: var(--c3-text-on-dark); }
.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c3-accent-orange);
  margin-bottom: var(--space-2);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.btn-primary { background: var(--c3-gradient); color: var(--c3-text-on-dark); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-secondary { border-color: currentColor; background: transparent; }
.btn-secondary:hover { background: currentColor; color: var(--c3-ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c3-ink); color: var(--c3-text-on-dark);
  padding: 0.75rem 1.25rem; border-radius: 0 0 8px 0;
  font-family: var(--font-body); font-weight: 600;
}
.skip-link:focus { left: 0; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--c3-accent-orange);
  outline-offset: 2px;
}