/* =================================================================
   GIKSCALE — ClickUp Complete Theme (v4 inspired)
   Light sections + dark contrast sections, clean cards, open layout
   Loads last — overrides variables.css, styles.css, redesign.css
   ================================================================= */

/* ═══════════════════════════════════════════════════════════════
   1. BASE — Light body, dark text
   ═══════════════════════════════════════════════════════════════ */

body {
  background-color: #FFFFFF;
  color: #0F172A;
}

/* ═══════════════════════════════════════════════════════════════
   2. SECTION BACKGROUNDS
   ═══════════════════════════════════════════════════════════════ */

section {
  background-color: #FFFFFF;
}

/* Alternating light gray sections */
#problemas {
  background-color: #F8FAFC;
}

#processo {
  background-color: #F8FAFC;
}

#depoimentos {
  background-color: #F8FAFC;
}

/* Contrast dark section for metrics (ClickUp-style) */
#resultados {
  background-color: #0B1120;
}

/* Override redesign.css dark glows for light sections */
#metodo::before {
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(28,143,163,0.05) 0%, transparent 70%);
}

#processo::before {
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(228,106,26,0.04) 0%, transparent 70%);
}

#depoimentos::before {
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(28,143,163,0.04) 0%, transparent 70%);
}

/* Subtle separator lines — adjusted for light sections */
#problemas::after,
#metodo::after,
#processo::after,
#depoimentos::after,
#servicos::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.07) 25%,
    rgba(0, 0, 0, 0.07) 75%,
    transparent 100%
  );
}

#resultados::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 25%,
    rgba(255, 255, 255, 0.08) 75%,
    transparent 100%
  );
}

/* ═══════════════════════════════════════════════════════════════
   3. HERO — Light gradient, dark text (ClickUp v4 style)
   ═══════════════════════════════════════════════════════════════ */

#home {
  background: #FFFFFF;
}

.hero-bg {
  background: transparent;
}

.hero-headline {
  color: #0F172A;
}

.hero-headline .highlight {
  background: linear-gradient(135deg, #E46A1A 0%, #B83228 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-sub {
  color: #475569;
}

.hero-proof {
  color: #64748B;
}

.hero-proof strong {
  color: #0F172A;
}

.hero-proof-dot {
  background: #1C8FA3;
  box-shadow: 0 0 10px rgba(28, 143, 163, 0.4);
}

/* Eyebrow no hero — light theme (ClickUp badge style) */
#home .eyebrow {
  color: #1C8FA3;
  background: rgba(28, 143, 163, 0.07);
  border-color: rgba(28, 143, 163, 0.18);
}

.noise-overlay {
  opacity: 0;
}

/* btn-secondary no hero */
#home .btn-secondary {
  color: #0F172A;
  border-color: rgba(15, 23, 42, 0.2);
  background: rgba(255, 255, 255, 0.8);
}

#home .btn-secondary:hover {
  background: #F8FAFC;
  border-color: rgba(15, 23, 42, 0.35);
  color: #0F172A;
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════
   4. EYEBROW LABELS
   ═══════════════════════════════════════════════════════════════ */

.eyebrow {
  color: #1C8FA3;
  background: rgba(28, 143, 163, 0.07);
  border-color: rgba(28, 143, 163, 0.18);
}

/* Eyebrow em seções escuras */
#resultados .eyebrow,
#contato .eyebrow {
  color: #5ED3E8;
  background: rgba(28, 143, 163, 0.12);
  border-color: rgba(28, 143, 163, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   5. SECTION HEADLINES & TEXT
   ═══════════════════════════════════════════════════════════════ */

.section-headline {
  color: #0F172A;
  font-size: clamp(2.25rem, 5vw, 4rem);
}

.section-headline span {
  color: #E46A1A;
}

.section-subtext {
  color: #64748B;
}

/* Dark sections */
#resultados .section-headline,
#metodo .section-headline,
#servicos .section-headline {
  color: #FFFFFF !important;
}

#resultados .section-headline span,
#metodo .section-headline span,
#servicos .section-headline span {
  color: #E46A1A !important;
}

#metodo .section-subtext,
#servicos .section-subtext {
  color: rgba(255, 255, 255, 0.6) !important;
}

#metodo .eyebrow,
#servicos .eyebrow {
  color: #5ED3E8 !important;
  background: rgba(28, 143, 163, 0.12);
  border-color: rgba(28, 143, 163, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   6. PROBLEM CARDS — White, shadow (ClickUp card style)
   ═══════════════════════════════════════════════════════════════ */

.problem-card {
  background: #F4F5F7;
  border: 1px solid #EAECF0;
  border-left: none;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.06);
  transition:
    transform 250ms ease,
    box-shadow 250ms ease,
    border-color 250ms ease;
}

.problem-card:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  border-left: none;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 16px 40px rgba(0, 0, 0, 0.06);
  transform: translateY(-4px);
}

.problem-icon {
  background: rgba(228, 106, 26, 0.08);
  border: 1px solid rgba(228, 106, 26, 0.12);
  color: #E46A1A;
  width: 52px;
  height: 52px;
}

.problem-title {
  color: #0F172A;
}

.problem-desc {
  color: #64748B;
}

.problems-grid {
  gap: var(--space-5);
  column-gap: var(--space-5);
  row-gap: var(--space-5);
  margin-top: var(--space-12);
}

/* ═══════════════════════════════════════════════════════════════
   7. PILLAR CARDS — White, teal hover (ClickUp feature card)
   ═══════════════════════════════════════════════════════════════ */

.pillar-card {
  background: #F4F5F7;
  border: 1px solid #EAECF0;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.05);
  transition:
    transform 250ms ease,
    box-shadow 250ms ease,
    border-color 250ms ease;
}

.pillar-card:hover {
  background: #FFFFFF;
  border-color: rgba(28, 143, 163, 0.35);
  box-shadow:
    0 4px 20px rgba(28, 143, 163, 0.1),
    0 16px 40px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
}

.pillar-number {
  color: rgba(28, 143, 163, 0.12);
  font-size: var(--text-5xl);
}

.pillar-icon {
  background: rgba(28, 143, 163, 0.07);
  border: 1px solid rgba(28, 143, 163, 0.12);
  color: #1C8FA3;
}

.pillar-title {
  color: #0F172A;
}

.pillar-desc {
  color: #64748B;
}

.pillars-grid {
  gap: var(--space-5);
  column-gap: var(--space-5);
  margin-top: var(--space-12);
}

.pillars-row-2 {
  gap: var(--space-5);
  column-gap: var(--space-5);
  margin-top: var(--space-5);
}

.pillars-row-2 .pillar-card {
  flex: 0 1 calc(33.333% - var(--space-5));
  max-width: calc(33.333% - var(--space-5));
}

@media (max-width: 1024px) {
  .pillars-row-2 .pillar-card {
    flex: 0 1 calc(50% - var(--space-5));
    max-width: calc(50% - var(--space-5));
  }
}

@media (max-width: 640px) {
  .pillars-row-2 .pillar-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   8. PROCESS SECTION — Clean vertical timeline
   ═══════════════════════════════════════════════════════════════ */

.process-tagline {
  color: #1C8FA3;
}

.step {
  border-top: 1px solid #E2E8F0;
  padding: var(--space-8) 0;
}

.step:first-child {
  border-top: none;
  padding-top: 0;
}

.step-number {
  background: #FFFFFF;
  border: 2px solid #1C8FA3;
  color: #1C8FA3;
  box-shadow:
    0 0 0 4px rgba(28, 143, 163, 0.08),
    0 2px 8px rgba(28, 143, 163, 0.15);
}

.step-title {
  color: #0F172A;
}

.step-desc {
  color: #64748B;
}

.process-photo img {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

/* ═══════════════════════════════════════════════════════════════
   9. METRICS — Dark section (contrast, like ClickUp's dark slabs)
   ═══════════════════════════════════════════════════════════════ */

.metric-block {
  background: transparent;
  border: none;
  border-top: 2px solid rgba(228, 106, 26, 0.25);
  border-radius: 0;
  padding: var(--space-10) var(--space-6);
}

.metric-block::after {
  display: none;
}

.metric-number {
  color: #E46A1A;
}

.metric-label {
  color: rgba(255, 255, 255, 0.55);
}

.metrics-grid {
  gap: 0;
  margin-top: var(--space-16);
}

@media (min-width: 641px) {
  .metric-block {
    border-left: 1px solid rgba(255, 255, 255, 0.07);
  }
  .metric-block:first-child {
    border-left: none;
  }
}

@media (max-width: 640px) {
  .metric-block {
    border-left: none;
    gap: var(--space-6);
  }
}

/* ═══════════════════════════════════════════════════════════════
   10. TESTIMONIALS — White cards, ClickUp style
   ═══════════════════════════════════════════════════════════════ */

#depoimentos .section-headline {
  color: #0F172A;
}

#depoimentos .section-headline span {
  color: #E46A1A;
}

.testimonials-proof-banner {
  background: #F4F5F7;
  border: 1px solid #EAECF0;
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  margin-top: var(--space-16);
  margin-bottom: 0;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.05);
}

.proof-banner-eyebrow {
  color: #1C8FA3;
}

.proof-banner-eyebrow::before {
  background: #1C8FA3;
}

.proof-banner-headline {
  color: #0F172A;
}

.proof-banner-desc {
  color: #64748B;
}

.proof-banner-bullets li {
  color: #64748B;
}

.proof-bullet-icon {
  background: rgba(28, 143, 163, 0.07);
  border-color: rgba(28, 143, 163, 0.2);
}

.testimonial-card {
  background: #F4F5F7;
  border: 1px solid #EAECF0;
  border-top: 2px solid #1C8FA3;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.04);
}

.testimonial-card:hover {
  border-color: #CBD5E1;
  border-top-color: #1C8FA3;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 16px 40px rgba(0, 0, 0, 0.04);
  background: #FFFFFF;
  transform: translateY(-4px);
}

.quote-mark {
  color: #1C8FA3;
  opacity: 0.2;
}

.testimonial-text {
  color: #475569;
}

.author-name {
  color: #0F172A;
}

.author-role {
  color: #94A3B8;
}

/* ═══════════════════════════════════════════════════════════════
   11. SERVICES — White cards, featured highlighted
   ═══════════════════════════════════════════════════════════════ */

#servicos .section-headline {
  color: #0F172A;
}

#servicos .section-subtext {
  color: #64748B;
}

.service-card {
  background: #F4F5F7;
  border: 1px solid #EAECF0;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.05);
}

.service-card:not(.featured) {
  background: #F4F5F7;
  border: 1px solid #EAECF0;
}

.service-card:hover {
  border-color: #CBD5E1;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 16px 48px rgba(0, 0, 0, 0.05);
  background: #FFFFFF;
  transform: translateY(-5px);
}

.service-card.featured {
  background: linear-gradient(160deg, #FFFDF7 0%, #FFF8EE 100%);
  border-color: rgba(228, 106, 26, 0.4);
  box-shadow:
    0 4px 20px rgba(228, 106, 26, 0.1),
    0 16px 48px rgba(0, 0, 0, 0.06);
}

.service-card.featured:hover {
  box-shadow:
    0 8px 32px rgba(228, 106, 26, 0.15),
    0 20px 56px rgba(0, 0, 0, 0.06);
  border-color: rgba(228, 106, 26, 0.6);
}

.service-title {
  color: #0F172A;
}

.service-desc {
  color: #64748B;
}

.service-deliverables li {
  color: #64748B;
}

.deliverable-check {
  background: rgba(28, 143, 163, 0.07);
  border-color: rgba(28, 143, 163, 0.15);
  color: #1C8FA3;
}

/* ═══════════════════════════════════════════════════════════════
   12. FINAL CTA — Dark (ClickUp dark slab pattern)
   ═══════════════════════════════════════════════════════════════ */

#contato {
  background: #0B1F3A;
}

.cta-headline {
  color: #FFFFFF;
}

.cta-sub {
  color: rgba(255, 255, 255, 0.6);
}

.cta-urgency {
  color: rgba(255, 255, 255, 0.45);
}

.cta-urgency strong {
  color: #E46A1A;
}

/* ═══════════════════════════════════════════════════════════════
   13. FOOTER — Dark (ClickUp footer style)
   ═══════════════════════════════════════════════════════════════ */

#footer {
  background: #070D1A;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.45);
}

.footer-col-title {
  color: #FFFFFF;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.45);
}

.footer-links a:hover {
  color: #FFFFFF;
}

.footer-copyright {
  color: rgba(255, 255, 255, 0.28);
}

.social-link {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
}

.social-link:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   14. BUTTONS — Adjust for light contexts
   ═══════════════════════════════════════════════════════════════ */

/* btn-secondary em fundos claros */
.btn-secondary {
  color: #0F172A;
  border: 1px solid #CBD5E1;
  background: transparent;
}

.btn-secondary:hover {
  background: #F8FAFC;
  border-color: #94A3B8;
  color: #0F172A;
  transform: translateY(-2px);
}

/* btn-secondary em seções escuras */
#resultados .btn-secondary,
#contato .btn-secondary {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.07);
}

#resultados .btn-secondary:hover,
#contato .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
  color: #FFFFFF;
}

/* ═══════════════════════════════════════════════════════════════
   15. SCROLLBAR — Light theme
   ═══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar-track {
  background: #F1F5F9;
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
}

::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* ═══════════════════════════════════════════════════════════════
   16. GROWTH ARROW — Ajuste para tema claro
   ═══════════════════════════════════════════════════════════════ */

#trail-bg {
  stroke: rgba(0, 0, 0, 0.07);
}

/* ═══════════════════════════════════════════════════════════════
   17. MOBILE MENU — Already white, keep
   ═══════════════════════════════════════════════════════════════ */

.mobile-link {
  color: #0F172A;
}

.mobile-link:hover {
  color: #1C8FA3;
}

/* ═══════════════════════════════════════════════════════════════
   18. SELECTION — Light theme
   ═══════════════════════════════════════════════════════════════ */

::selection {
  background: rgba(28, 143, 163, 0.15);
  color: #0F172A;
}

/* ═══════════════════════════════════════════════════════════════
   19. RESPONSIVE FIXES
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .metric-block {
    border-left: none;
  }

  .metrics-grid {
    gap: var(--space-8);
  }

  .problems-grid {
    gap: var(--space-4);
  }
}