/* =========================================================================
   CACIOLA CONSULTORIA - RESPONSIVE.CSS
   =========================================================================
   Arquivo: responsive.css
   Conteúdo: Media queries para diferentes tamanhos de tela
   Projeto: caciola.com.br
   
   BREAKPOINTS:
   - 1024px: Tablet
   - 768px: Mobile
   - 480px: Mobile pequeno
   
   ÍNDICE DESTE ARQUIVO:
   1. TABLET (max-width: 1024px)
   2. MOBILE (max-width: 768px)
   3. MOBILE PEQUENO (max-width: 480px)
   ========================================================================= */


/* =========================================================================
   1. TABLET (max-width: 1024px)
   =========================================================================
   Telas de tablets e notebooks pequenos
   ========================================================================= */
@media (max-width: 1024px) {
  
  /* --- HOME - SERVICES GRID --- */
  /* Muda de 2 colunas para 1 coluna */
  .services-grid {
    grid-template-columns: 1fr;     /* Uma coluna apenas */
  }
  
  /* --- HOME - HERO CARDS --- */
  /* Cards em coluna centralizada em tablet */
  .hero-cards {
    display: flex;                  /* Mantém visível */
    width: 100%;                    /* Largura total */
    max-width: 400px;               /* Máximo 400px */
    margin: 0 auto;                 /* Centraliza */
    margin-top: var(--space-xl);    /* Espaço acima */
  }
  
  .hero-card img {
    width: 100%;                    /* Largura total */
    height: 259px;                  /* Altura fixa */
    object-fit: cover;              /* Cobre área mantendo proporção */
  }
  
  /* Hero container volta para layout vertical */
  .hero .container {
    flex-direction: column;         /* Empilha verticalmente */
  }
  
  /* Hero content ocupa largura total */
  .hero-content {
    max-width: 100%;                /* Largura total */
  }
  
  /* --- CONTATO - LAYOUT --- */
  /* Muda de 2 colunas para 1 coluna */
  .contact-layout {
    grid-template-columns: 1fr;     /* Uma coluna apenas */
    gap: 16px;                      /* Mantém gap */
  }
  
  /* --- CONTATO - PÁGINA --- */
  /* Remove altura mínima pois vai rolar */
  .contact-page {
    min-height: auto;               /* Altura automática */
  }
  
  /* --- CONTATO - SEÇÃO DO FORMULÁRIO --- */
  /* Mais padding já que vai rolar */
  .contact-form-section {
    padding: 16px 0;                /* Mais espaço vertical */
  }
  
  /* --- CONTATO - INFO --- */
  /* Esconde coluna de informações para economizar espaço */
  .contact-info {
    display: none;                  /* Escondido em tablet */
  }
  
}


/* =========================================================================
   2. MOBILE (max-width: 768px)
   =========================================================================
   Smartphones em modo retrato e paisagem
   ========================================================================= */
@media (max-width: 768px) {
  
  /* --- VARIÁVEIS - ESPAÇAMENTOS REDUZIDOS --- */
  /* Reduz espaçamentos globais para mobile */
  :root {
    --space-lg: 20px;               /* Era 24px */
    --space-xl: 28px;               /* Era 32px */
    --space-2xl: 40px;              /* Era 48px */
    --space-3xl: 56px;              /* Era 64px */
    --space-4xl: 72px;              /* Era 96px */
  }
  
  /* --- HEADER - NAVEGAÇÃO --- */
  /* Header mais compacto */
  .nav {
    height: 72px;                   /* Era 88px */
    flex-wrap: wrap;                /* Permite quebrar linha se necessário */
    padding: var(--space-md) 0;     /* Padding vertical */
  }
  
  /* Logo menor */
  .logo img {
    height: 40px;                   /* Era 48px */
  }
  
  /* Menu mais compacto */
  .menu {
    gap: 4px;                       /* Era 8px */
  }
  
  /* Links do menu menores */
  .menu li a {
    padding: var(--space-xs) var(--space-sm); /* Padding reduzido */
    font-size: 0.875rem;            /* Era 0.9375rem (15px → 14px) */
  }
  
  /* --- TIPOGRAFIA --- */
  /* H1 menor */
  h1 {
    font-size: 1.75rem;             /* 28px fixo em mobile */
  }
  
  /* --- HOME - HERO --- */
  /* Hero com menos padding */
  .hero {
    padding: var(--space-3xl) 0;    /* Era space-4xl (96px → 56px) */
  }
  
  /* Subtítulo menor */
  .hero-subtitle {
    font-size: 1rem;                /* Era 1.125rem (18px → 16px) */
  }
  
  /* Trust items em coluna */
  .hero-trust {
    flex-direction: column;         /* Empilha verticalmente */
    gap: var(--space-md);           /* 16px entre itens */
    align-items: flex-start;        /* Alinha à esquerda */
  }
  
  /* --- BOTÕES --- */
  /* Botão grande um pouco menor */
  .btn-large {
    padding: 16px 28px;             /* Era 18px 36px */
    font-size: 0.9375rem;           /* Era 1rem (16px → 15px) */
  }
  
  /* --- CONTATO - PÁGINA --- */
  /* Altura baseada no header mobile */
  .contact-page {
    min-height: calc(100vh - 72px); /* Viewport menos header mobile (72px) */
  }
  
  /* --- CONTATO - HERO --- */
  /* Título menor */
  .contact-hero-content h1 {
    font-size: 1.125rem;            /* 18px */
  }
  
  /* Mais padding no hero mobile */
  .contact-hero {
    padding: 12px 0;                /* Era 6px, volta para 12px em mobile */
  }
  
  /* --- CONTATO - INFO --- */
  /* Mantém escondido */
  .contact-info {
    display: none;
  }
  
  /* --- HOME - HERO CARDS --- */
  /* Garante tamanho consistente das imagens em mobile */
  .hero-cards {
    width: 100%;                    /* Largura total em mobile */
    max-width: 400px;               /* Máximo 400px */
    margin: 0 auto;                 /* Centraliza */
  }
  
  .hero-card img {
    width: 100%;                    /* Largura total */
    height: 259px;                  /* Altura fixa igual ao desktop */
    object-fit: cover;              /* Cobre área mantendo proporção */
  }
  
  /* --- CONTATO - FORMULÁRIO --- */
  /* Mais padding no formulário */
  .contact-form-wrapper {
    padding: 16px;                  /* Era 10px */
  }
  
  /* --- CAPTCHA --- */
  /* Captcha em coluna */
  .captcha-wrapper {
    flex-direction: column;         /* Pergunta acima, input abaixo */
    align-items: flex-start;        /* Alinha à esquerda */
    gap: 8px;                       /* Espaço entre eles */
  }
  
  /* Input do captcha ocupa largura total */
  .captcha-wrapper input {
    max-width: 100%;                /* Era 80px */
  }
  
  /* --- OVERLAY DE SUCESSO --- */
  /* Card menor com margem */
  .success-card {
    padding: var(--space-xl);       /* Era space-3xl (64px → 28px) */
    margin: var(--space-md);        /* Margem nas bordas */
  }
  
}


/* =========================================================================
   3. MOBILE PEQUENO (max-width: 480px)
   =========================================================================
   Smartphones menores (iPhone SE, etc)
   ========================================================================= */
@media (max-width: 480px) {
  
  /* --- CONTAINER --- */
  /* Menos padding lateral */
  .container {
    padding: 0 var(--space-md);     /* Era space-lg (24px → 16px) */
  }
  
  /* --- HEADER - NAVEGAÇÃO --- */
  /* Nav em coluna (logo acima, menu abaixo) */
  .nav {
    flex-direction: column;         /* Empilha verticalmente */
    height: auto;                   /* Altura automática */
    gap: var(--space-md);           /* 16px entre logo e menu */
    padding: var(--space-md) 0;     /* Padding vertical */
  }
  
  /* Menu centralizado */
  .menu {
    width: 100%;                    /* Largura total */
    justify-content: center;        /* Centraliza os links */
  }
  
  /* --- CARDS --- */
  /* Cards com menos padding */
  .service-card {
    padding: var(--space-lg);       /* Era space-xl (32px → 20px) */
  }
  
}


/* =========================================================================
   FIM DO ARQUIVO RESPONSIVE.CSS
   ========================================================================= */