/*
 Theme Name:   Astra Child — PIT Digital
 Theme URI:    https://pitdigital.com.br
 Description:  Child theme do Astra para o site pitdigital.com.br
 Author:       PIT Digital
 Author URI:   https://pitdigital.com.br
 Template:     astra
 Version:      1.1.0
 Text Domain:  astra-child
*/

/* ============================================
   CSS VARIABLES — PALETA PIT DIGITAL
   Fonte única de verdade — nunca valores hardcoded
   ============================================ */
:root {
  --color-primary:    #0069FE;
  --color-accent:     #00F0F0;
  --color-support:    #0F53B9;
  --color-dark:       #00327E;
  --color-cta:        #EC5700;
  --color-black:      #0D0D1A;
  --color-white:      #F8F9FF;
  --color-gray:       #4D4D4D;

  --font-display:     'New Black', 'Segoe UI', sans-serif;
  --font-body:        'Roboto', 'Inter', sans-serif;

  --text-hero:        clamp(36px, 5vw, 64px);
  --text-h2:          clamp(28px, 3.5vw, 48px);
  --text-h3:          clamp(20px, 2.5vw, 32px);
  --text-body:        clamp(15px, 1.5vw, 17px);
  --text-small:       13px;
  --text-label:       11px;

  --leading-tight:    1.15;
  --leading-normal:   1.5;
  --leading-loose:    1.7;

  --tracking-tight:   -0.02em;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.15em;

  --radius-btn:       100px;
  --radius-card:      16px;

  --transition-fast:  0.2s ease;
  --transition-base:  0.3s ease;
}

/* ============================================
   BOTÕES — PADRÃO PIT
   ============================================ */
.pit-btn-primary,
.elementor-button.pit-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-cta);
  color: #fff !important;
  padding: 14px 32px;
  border-radius: var(--radius-btn);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.pit-btn-primary:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  color: #fff !important;
}

.pit-btn-secondary,
.elementor-button.pit-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--color-white) !important;
  border: 2px solid rgba(255,255,255,0.45);
  padding: 12px 30px;
  border-radius: var(--radius-btn);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.pit-btn-secondary:hover {
  border-color: var(--color-white);
  background: rgba(255,255,255,0.10);
  color: var(--color-white) !important;
}

/* ============================================
   TAG / LABEL SOBRE TÍTULOS (anti-AI #2)
   ============================================ */
.pit-section-tag {
  display: inline-block;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}

/* ============================================
   LINHA VERTICAL DECORATIVA (anti-AI #3)
   ============================================ */
.pit-text-accent {
  border-left: 3px solid var(--color-accent);
  padding-left: 20px;
}

/* ============================================
   NÚMEROS ORNAMENTAIS (anti-AI #1)
   ============================================ */
.pit-step-number {
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 800;
  opacity: 0.12;
  color: var(--color-primary);
  line-height: 1;
  position: absolute;
  top: -16px;
  left: -8px;
  z-index: 0;
  pointer-events: none;
}

/* ============================================
   HERO — FUNDO ESCURO COM GRADIENTE DIAGONAL
   ============================================ */
.pit-hero-section,
.elementor-element.pit-hero-section {
  background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-support) 60%, var(--color-primary) 100%) !important;
  position: relative;
}

/* ============================================
   TICKER / MARQUEE
   ============================================ */
.pit-ticker-wrap {
  width: 100%;
  background-color: var(--color-primary);
  padding: 14px 0;
  overflow: hidden;
  white-space: nowrap;
}
.pit-ticker-track {
  display: inline-block;
  white-space: nowrap;
  animation: pit-marquee 30s linear infinite;
}
.pit-ticker-track span {
  display: inline-block;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 0 32px;
}
.pit-ticker-track span::after {
  content: '·';
  margin-left: 32px;
  color: var(--color-cta);
}
@keyframes pit-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================
   CARDS DE SERVIÇOS
   ============================================ */
.pit-card-servico {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: 32px;
  border: 1px solid rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.pit-card-servico::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  opacity: 0;
  transition: opacity var(--transition-base);
}
.pit-card-servico:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.10);
}
.pit-card-servico:hover::before {
  opacity: 1;
}

/* ============================================
   SEÇÃO COMO FUNCIONA
   ============================================ */
.pit-como-funciona {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 120px 0;
}

/* ============================================
   SEÇÃO INIMIGO COMUM
   ============================================ */
.pit-inimigo {
  background: var(--color-white);
  padding: 100px 0;
}

/* ============================================
   CTA FINAL
   ============================================ */
.pit-cta-final {
  background: var(--color-cta) !important;
  padding: 100px 0;
}

/* ============================================
   ANIMAÇÕES DE ENTRADA (IntersectionObserver)
   ============================================ */
[data-pit-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[data-pit-animate].visible {
  opacity: 1;
  transform: translateY(0);
}
[data-pit-animate='fade-left']  { transform: translateX(-24px); }
[data-pit-animate='fade-right'] { transform: translateX(24px); }
[data-pit-animate='scale']      { transform: scale(0.95); }
[data-pit-animate='fade-left'].visible,
[data-pit-animate='fade-right'].visible,
[data-pit-animate='scale'].visible {
  transform: none;
  opacity: 1;
}

/* ============================================
   RITMO DE ESPAÇAMENTO (nunca uniforme)
   ============================================ */
.pit-section-destaque { padding: 120px 0; }
.pit-section-densa    { padding: 72px 0; }
.pit-section-respiro  { padding: 100px 0; }
.pit-container        { max-width: 1160px; padding: 0 24px; margin: 0 auto; }