/* =============================================
   INSPECTO — RHCTECH
   main.css — Ponto de entrada do CSS
   Importa camadas em ordem + responsive
   ============================================= */

/* Camada 1: Tokens de design */
@import url('variables.css');

/* Camada 2: Reset & base */
@import url('base.css');

/* Camada 3: Componentes de layout */
@import url('layout.css');


/* =============================================
   RESPONSIVE — Tablet (≥ 640px)
   ============================================= */
@media (min-width: 640px) {

  /* PVS — layout horizontal */
  .pvs-grid {
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 0;
  }
  .pvs-divider { padding: var(--space-12) var(--space-6) 0; }
  .pvs-arrow-circle { transform: rotate(0deg); }

  /* Flow — grid horizontal */
  .flow-steps {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
  }
  .flow-arrow { transform: rotate(0deg); }

  /* Features 2 colunas */
  .features-grid { grid-template-columns: repeat(2, 1fr); }

  /* Trust 2 colunas */
  .trust-grid { grid-template-columns: repeat(2, 1fr); }

  /* Formulário horizontal */
  .contact-form { flex-direction: row; }
  .contact-input { flex: 1; }
  .contact-btn   { width: auto; }
}


/* =============================================
   RESPONSIVE — Desktop (≥ 1024px)
   ============================================= */
@media (min-width: 1024px) {

  /* Nav desktop */
  .nav-right  { display: flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none !important; }
  .nav-badge { display: inline-flex; }

  /* Features 3 colunas */
  .features-grid { grid-template-columns: repeat(3, 1fr); }

  /* Trust 4 colunas */
  .trust-grid { grid-template-columns: repeat(4, 1fr); }

  /* Footer horizontal */
  .footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
  .footer-right { align-items: flex-end; }
}


/* =============================================
   RESPONSIVE — Large Desktop (≥ 1280px)
   ============================================= */
@media (min-width: 1280px) {
  :root { --section-px: clamp(5rem, 8vw, 7.5rem); }
  .pvs-grid,
  .flow-steps { max-width: 1000px; }
}


/* =============================================
   TOUCH — Remove hover transforms
   ============================================= */
@media (hover: none) {
  .btn-primary:hover,
  .btn-secondary:hover,
  .feat-card:hover,
  .flow-step:hover,
  .nav-cta:hover,
  .trust-card:hover { transform: none; box-shadow: inherit; }
}


/* =============================================
   HIGH CONTRAST MODE
   ============================================= */
@media (prefers-contrast: high) {
  :root {
    --color-border:      #94a3b8;
    --color-text-muted:  #334155;
  }
}