/* ============================================
   DESIGN SYSTEM — Som na Rua
   Colors: Black, White, Red
   Optimized for PageSpeed 100
   ============================================ */

/* --- CSS Variables --- */
:root {
   --bg: #0a0a0a;
   --bg-elevated: #141414;
   --bg-card: #1a1a1a;
   --red: #e63946;
   --red-dark: #c62828;
   --red-light: #ff6b6b;
   --white: #ffffff;
   --gray-100: #f5f5f5;
   --gray-200: #e0e0e0;
   --gray-300: #bdbdbd;
   --gray-400: #9e9e9e;
   --gray-600: #666;
   --whatsapp: #25d366;
   --whatsapp-dark: #1da851;
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 50px;
   --shadow: 0 4px 24px rgba(0, 0, 0, .4);
   --transition: .3s cubic-bezier(.4, 0, .2, 1);
   --max-w: 1140px;
}

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

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%
}

body {
   font-family: 'Inter', system-ui, -apple-system, sans-serif;
   background: var(--bg);
   color: var(--gray-100);
   line-height: 1.6;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased
}

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

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

ul,
ol {
   list-style: none
}

h1,
h2,
h3,
h4 {
   font-family: 'Outfit', system-ui, sans-serif;
   line-height: 1.2;
   font-weight: 700
}

/* --- Container --- */
.container {
   width: 100%;
   max-width: var(--max-w);
   margin: 0 auto;
   padding: 0 20px
}

/* --- Utilities --- */
.text-red {
   color: var(--red)
}

.text-gradient {
   background: linear-gradient(135deg, var(--red), var(--red-light));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
}

/* --- Buttons --- */
.btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-family: 'Inter', sans-serif;
   font-weight: 600;
   font-size: .95rem;
   border: none;
   border-radius: var(--radius-lg);
   cursor: pointer;
   transition: var(--transition);
   text-align: center;
   justify-content: center;
   white-space: nowrap
}

.btn--sm {
   padding: 10px 20px;
   font-size: .85rem
}

.btn--lg {
   padding: 16px 32px;
   font-size: 1rem
}

.btn--primary {
   background: var(--red);
   color: var(--white)
}

.btn--primary:hover {
   background: var(--red-dark);
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(230, 57, 70, .4)
}

.btn--white {
   background: var(--white);
   color: var(--bg)
}

.btn--white:hover {
   background: var(--gray-200);
   transform: translateY(-2px)
}

.btn--whatsapp {
   background: var(--whatsapp);
   color: var(--white)
}

.btn--whatsapp:hover {
   background: var(--whatsapp-dark);
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(37, 211, 102, .35)
}

/* ============================================
   HEADER
   ============================================ */
.header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 100;
   background: rgba(10, 10, 10, .85);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid rgba(255, 255, 255, .06);
   transition: var(--transition)
}

.header__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 64px
}

.header__logo {
   font-family: 'Outfit', sans-serif;
   font-size: 1.25rem;
   font-weight: 800;
   color: var(--white);
   letter-spacing: -.5px;
   display: inline-flex;
   align-items: center;
   gap: 6px
}

.header__logo svg {
   flex-shrink: 0
}

.header__nav {
   display: flex;
   gap: 28px
}

.header__link {
   font-size: .9rem;
   color: var(--gray-300);
   transition: var(--transition);
   position: relative
}

.header__link::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 0;
   width: 0;
   height: 2px;
   background: var(--red);
   transition: var(--transition)
}

.header__link:hover {
   color: var(--white)
}

.header__link:hover::after {
   width: 100%
}

.header__cta-mobile {
   display: none
}

.header__hamburger {
   display: none;
   flex-direction: column;
   gap: 5px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 4px
}

.header__hamburger span {
   width: 24px;
   height: 2px;
   background: var(--white);
   border-radius: 2px;
   transition: var(--transition)
}

/* ============================================
   HERO
   ============================================ */
.hero {
   padding: 140px 0 100px;
   text-align: center;
   position: relative;
   min-height: 80vh;
   display: flex;
   align-items: center
}

.hero::before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 600px;
   height: 600px;
   background: radial-gradient(circle, rgba(230, 57, 70, .08) 0%, transparent 70%);
   pointer-events: none
}

.hero__content {
   position: relative;
   z-index: 1
}

.hero__badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(230, 57, 70, .1);
   color: var(--red-light);
   padding: 8px 20px;
   border-radius: var(--radius-lg);
   font-size: .85rem;
   font-weight: 500;
   margin-bottom: 24px;
   border: 1px solid rgba(230, 57, 70, .2)
}

.hero__title {
   font-size: clamp(2.2rem, 5.5vw, 4rem);
   font-weight: 800;
   margin-bottom: 20px;
   letter-spacing: -.02em;
   color: var(--white)
}

.hero__subtitle {
   font-size: clamp(1rem, 2vw, 1.2rem);
   color: var(--gray-200);
   max-width: 600px;
   margin: 0 auto 36px
}

.hero__actions {
   display: flex;
   gap: 16px;
   justify-content: center;
   flex-wrap: wrap
}

.hero__subtitle strong {
   color: var(--white);
   font-weight: 600
}

.hero__trust {
   display: flex;
   gap: 24px;
   justify-content: center;
   flex-wrap: wrap;
   margin-top: 36px
}

.hero__trust-item {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--gray-300);
   font-size: .88rem;
   font-weight: 500
}

.hero__trust-item svg {
   flex-shrink: 0
}

/* ============================================
   SECTIONS (shared)
   ============================================ */
.section {
   padding: 100px 0
}

.section__label {
   color: var(--red);
   font-size: .85rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 2px;
   margin-bottom: 12px;
   text-align: center
}

.section__title {
   font-size: clamp(1.8rem, 4vw, 2.8rem);
   text-align: center;
   margin-bottom: 16px;
   color: var(--white)
}

.section__desc {
   text-align: center;
   color: var(--gray-400);
   max-width: 600px;
   margin: 0 auto 48px;
   font-size: 1.05rem
}

/* ============================================
   AREAS
   ============================================ */
.areas {
   background: var(--bg-elevated)
}

.areas__grid {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   justify-content: center;
   max-width: 800px;
   margin: 0 auto
}

.area-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--bg-card);
   border: 1px solid rgba(255, 255, 255, .08);
   padding: 12px 20px;
   border-radius: var(--radius-lg);
   font-size: .9rem;
   color: var(--gray-200);
   transition: var(--transition)
}

.area-badge:hover {
   border-color: var(--red);
   color: var(--white);
   transform: translateY(-2px);
   box-shadow: 0 4px 16px rgba(230, 57, 70, .15)
}

.area-badge svg {
   stroke: var(--red);
   flex-shrink: 0
}

/* ============================================
   CARDS (Qualidade + Serviços)
   ============================================ */
.cards-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 24px
}

.card {
   background: var(--bg-card);
   border: 1px solid rgba(255, 255, 255, .06);
   border-radius: var(--radius-md);
   padding: 32px 28px;
   transition: var(--transition);
   position: relative;
   overflow: hidden
}

.card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background: linear-gradient(90deg, var(--red), var(--red-light));
   transform: scaleX(0);
   transform-origin: left;
   transition: var(--transition)
}

.card:hover {
   border-color: rgba(230, 57, 70, .3);
   transform: translateY(-4px);
   box-shadow: var(--shadow)
}

.card:hover::before {
   transform: scaleX(1)
}

.card__icon {
   font-size: 2rem;
   margin-bottom: 16px;
   line-height: 1;
   display: flex;
   align-items: center
}

.card__icon--lg {
   font-size: 2.5rem
}

.card__title {
   font-size: 1.15rem;
   margin-bottom: 10px;
   color: var(--white)
}

.card__text {
   color: var(--gray-400);
   font-size: .92rem;
   line-height: 1.7
}

/* ============================================
   GALERIA
   ============================================ */
.galeria {
   background: var(--bg-elevated)
}

.galeria__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px
}

.galeria__item {
   border-radius: var(--radius-md);
   overflow: hidden;
   position: relative;
   aspect-ratio: 4/3;
   background: var(--bg-card)
}

.galeria__item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s cubic-bezier(.4, 0, .2, 1), filter .5s ease;
   filter: brightness(.85)
}

.galeria__item:hover img {
   transform: scale(1.08);
   filter: brightness(1)
}

.galeria__item::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, .4) 0%, transparent 50%);
   pointer-events: none;
   transition: opacity .3s ease
}

.galeria__item:hover::after {
   opacity: .3
}

/* ============================================
   CTA
   ============================================ */
.cta {
   padding: 100px 0;
   background: linear-gradient(135deg, var(--red-dark) 0%, var(--red) 100%);
   text-align: center;
   position: relative;
   overflow: hidden
}

.cta::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -20%;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, rgba(255, 255, 255, .06), transparent 70%);
   pointer-events: none
}

.cta__content {
   position: relative;
   z-index: 1
}

.cta__title {
   font-size: clamp(1.8rem, 4vw, 2.8rem);
   color: var(--white);
   margin-bottom: 16px
}

.cta__text {
   color: rgba(255, 255, 255, .85);
   font-size: 1.1rem;
   max-width: 500px;
   margin: 0 auto 36px
}

.cta__actions {
   display: flex;
   gap: 16px;
   justify-content: center;
   flex-wrap: wrap
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
   background: var(--bg-elevated);
   padding: 60px 0 0;
   border-top: 1px solid rgba(255, 255, 255, .06)
}

.footer__inner {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   gap: 40px
}

.footer__logo {
   font-family: 'Outfit', sans-serif;
   font-size: 1.2rem;
   font-weight: 800;
   color: var(--white);
   margin-bottom: 8px;
   display: inline-flex;
   align-items: center;
   gap: 6px
}

.footer__tagline {
   color: var(--gray-400);
   font-size: .9rem;
   max-width: 300px
}

.footer__heading {
   color: var(--white);
   font-size: .9rem;
   font-weight: 600;
   margin-bottom: 16px;
   text-transform: uppercase;
   letter-spacing: 1px
}

.footer__links,
.footer__contact {
   display: flex;
   flex-direction: column
}

.footer__links a,
.footer__contact a {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: var(--gray-400);
   font-size: .9rem;
   margin-bottom: 10px;
   transition: var(--transition)
}

.footer__links a:hover,
.footer__contact a:hover {
   color: var(--red-light)
}

.footer__bottom {
   margin-top: 40px;
   padding: 20px 0;
   border-top: 1px solid rgba(255, 255, 255, .06);
   text-align: center
}

.footer__bottom p {
   color: var(--gray-600);
   font-size: .8rem
}

/* ============================================
   FAB WHATSAPP
   ============================================ */
.fab-whatsapp {
   position: fixed;
   bottom: 24px;
   right: 24px;
   width: 56px;
   height: 56px;
   background: var(--whatsapp);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 16px rgba(37, 211, 102, .4);
   transition: var(--transition);
   z-index: 90;
   animation: fab-pulse 2s infinite
}

.fab-whatsapp:hover {
   transform: scale(1.1);
   box-shadow: 0 6px 24px rgba(37, 211, 102, .5)
}

@keyframes fab-pulse {

   0%,
   100% {
      box-shadow: 0 4px 16px rgba(37, 211, 102, .4)
   }

   50% {
      box-shadow: 0 4px 24px rgba(37, 211, 102, .6)
   }
}

/* ============================================
   REVEAL ANIMATION
   ============================================ */
.reveal {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity .6s ease, transform .6s ease
}

.reveal.active {
   opacity: 1;
   transform: translateY(0)
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:768px) {
   .header__nav {
      position: fixed;
      top: 64px;
      left: 0;
      width: 100%;
      background: rgba(10, 10, 10, .98);
      backdrop-filter: blur(16px);
      flex-direction: column;
      align-items: center;
      gap: 0;
      padding: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s ease
   }

   .header__nav.open {
      max-height: 300px;
      padding: 16px 0
   }

   .header__link {
      padding: 14px 0;
      font-size: 1rem;
      width: 100%;
      text-align: center
   }

   .header__hamburger {
      display: flex
   }

   .header__hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(4px, 5px)
   }

   .header__hamburger.active span:nth-child(2) {
      opacity: 0
   }

   .header__hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(4px, -5px)
   }

   .header__cta-mobile {
      display: inline-flex
   }

   .hero {
      padding: 120px 0 80px;
      min-height: auto
   }

   .hero__title {
      font-size: 2rem
   }

   .section {
      padding: 70px 0
   }

   .cards-grid {
      grid-template-columns: 1fr
   }

   .galeria__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px
   }

   .footer__inner {
      grid-template-columns: 1fr;
      gap: 32px;
      text-align: center
   }

   .footer__tagline {
      margin: 0 auto
   }

   .hero__actions {
      flex-direction: column;
      align-items: center
   }

   .cta__actions {
      flex-direction: column;
      align-items: center
   }

   .btn--lg {
      width: 100%;
      max-width: 300px
   }
}

@media(max-width:480px) {
   .container {
      padding: 0 16px
   }

   .hero__title {
      font-size: 1.75rem
   }

   .area-badge {
      font-size: .82rem;
      padding: 10px 16px
   }

   .card {
      padding: 24px 20px
   }

   .galeria__grid {
      grid-template-columns: 1fr
   }
}