/* =====================================================
   RP ENGENHARIA — Main Stylesheet
===================================================== */


/* =====================================================
   1. FONTS
===================================================== */

@font-face {
  font-family: 'Regen';
  src: url('../fonts/Regen.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Regen';
  src: url('../fonts/Regen\ Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Regen';
  src: url('../fonts/Regen\ Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Regen';
  src: url('../fonts/Regen\ Bold\ Italic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}


/* =====================================================
   2. VARIABLES
===================================================== */

:root {
  --white:         #F7F8FA;
  --gray-50:       #F1F3F5;
  --gray-100:      #D7DDE3;
  --gray-200:      #C0C8D0;
  --gray-300:      #9CA8B3;
  --graphite:      #49545E;
  --graphite-dark: #313A42;
  --blue:          #2F6EA8;
  --blue-light:    #6E9FD0;
  --success:       #3B9E5F;
  --danger:        #D9534F;

  --font:          'Inter', sans-serif;
  --container:     1280px;

  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     18px;

  --shadow-sm:     0 4px 12px rgba(0,0,0,.05);
  --shadow-md:     0 8px 24px rgba(0,0,0,.08);
  --shadow-lg:     0 16px 40px rgba(0,0,0,.10);

  --transition:    all .3s ease;
}


/* =====================================================
   3. RESET
===================================================== */

*,
*::before,
*::after {
  margin:     0;
  padding:    0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background:  var(--white);
  color:       var(--gray-200);
  line-height: 1.6;
  overflow-x:  hidden;
}

img {
  display:   block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color:           inherit;
}

ul {
  list-style: none;
}

button,
input,
textarea {
  font-family: inherit;
}


/* =====================================================
   4. LAYOUT — CONTAINER
===================================================== */

.container {
  width:         100%;
  max-width:     var(--container);
  margin:        0 auto;
  padding-left:  24px;
  padding-right: 24px;
}


/* =====================================================
   5. LAYOUT — GRID
===================================================== */

.grid {
  display: grid;
  gap:     32px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }


/* =====================================================
   5. LAYOUT — SECTION SPACING
===================================================== */

.section    { padding: 100px 0; }
.section-sm { padding:  70px 0; }
.section-lg { padding: 140px 0; }


/* =====================================================
   6. TYPOGRAPHY
===================================================== */

h1, h2, h3, h4, h5, h6 {
  color:       var(--graphite-dark);
  line-height: 1.15;
  font-weight: 700;
}

h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
h2 { font-size: clamp(2rem,   4vw, 3rem);   }
h3 { font-size: 1.5rem; }

p {
  color:     var(--graphite);
  font-size: 1rem;
}

.section-subtitle {
  color:           var(--blue);
  text-transform:  uppercase;
  letter-spacing:  2px;
  font-size:       .85rem;
  font-weight:     700;
  margin-bottom:   10px;
}

.section-title       { margin-bottom: 20px;  }
.section-description { max-width:     700px; }


/* =====================================================
   7. BUTTONS
===================================================== */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding:         14px 28px;
  border-radius:   var(--radius-md);
  font-weight:     600;
  transition:      var(--transition);
  cursor:          pointer;
  border:          none;
}

/* ATENÇÃO: na navbar.php o botão usa apenas class="btn-primary".
   Adicionado display:inline-flex aqui para funcionar sem a classe .btn */
.btn-primary {
  display:       inline-flex;
  align-items:   center;
  gap:           10px;
  padding:       14px 28px;
  border-radius: var(--radius-md);
  font-weight:   600;
  cursor:        pointer;
  border:        none;
  background:    var(--blue);
  color:         #fff;
  transition:    var(--transition);
}

.btn-primary:hover {
  transform:  translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background:    transparent;
  border:        2px solid var(--blue);
  color:         var(--blue);
}

.btn-secondary:hover {
  background: var(--blue);
  color:      #fff;
}

/* Alias usado no hero.php */
.btn-outline {
  background:    transparent;
  border:        2px solid rgba(255,255,255,.7);
  color:         #fff;
}

.btn-outline:hover {
  background: rgba(255,255,255,.15);
}


/* =====================================================
   8. HEADER  → movido para layout.css
   10. CARDS  → movido para sections.css
===================================================== */


/* =====================================================
   11. LOADER
===================================================== */

#loader {
  position:        fixed;
  inset:           0;
  background:      #fff;
  display:         flex;
  justify-content: center;
  align-items:     center;
  z-index:         9999;
}

.loader-spinner {
  width:        60px;
  height:       60px;
  border:       4px solid var(--gray-100);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation:    spin 1s linear infinite;
}


/* =====================================================
   12. BACK TO TOP
===================================================== */

#backToTop {
  position:      fixed;
  right:         25px;
  bottom:        25px;
  width:         50px;
  height:        50px;
  border:        none;
  border-radius: 50%;
  background:    var(--blue);
  color:         #fff;
  cursor:        pointer;
  box-shadow:    var(--shadow-md);
  z-index:       999;
  font-size:     1.2rem;
  transition:    var(--transition);

  /* Escondido até rolar a página (classe .show via main.js) */
  opacity:        0;
  visibility:     hidden;
  transform:      translateY(15px);
  pointer-events: none;
}

#backToTop.show {
  opacity:        1;
  visibility:     visible;
  transform:      translateY(0);
  pointer-events: auto;
}

#backToTop:hover {
  transform:  translateY(-3px);
  box-shadow: var(--shadow-lg);
}


/* =====================================================
   13. UTILITIES
===================================================== */

.text-center { text-align: center; }

.mt-1 { margin-top:    10px; }
.mt-2 { margin-top:    20px; }
.mt-3 { margin-top:    30px; }
.mt-4 { margin-top:    40px; }
.mt-5 { margin-top:    50px; }

.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }
.mb-4 { margin-bottom: 40px; }
.mb-5 { margin-bottom: 50px; }


/* =====================================================
   14. ANIMATIONS
===================================================== */

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* =====================================================
   15. RESPONSIVE
===================================================== */

@media (max-width: 992px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 70px 0;
  }

  .header .container {
    height: 75px;
  }

  .hero-buttons {
    flex-direction: column;
  }
}
/* ── Feedback do formulário de contato ─────────────────────────────────── */
.form-feedback {
    padding: .75rem 1rem;
    border-radius: 6px;
    margin-bottom: .75rem;
    font-size: .9rem;
    font-weight: 500;
}
.form-feedback--ok {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}
.form-feedback--erro {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}