/*
  Projeto LP - Landing Page
  HTML, CSS e JS puro
  Empresa: Tecmax Geradores
  Agência: Criartweb - Consultoria e Desenvolvimento Web
  Data: 28/09/2025 - 10:15hs
*/

:root {
      --tecmax-yellow: #e6b203;
      --tecmax-black: #000000;
    }

    body {
      font-family: Montserrat, sans-serif;
    }

    html {
      scroll-behavior: smooth;
    }

    section {
      scroll-margin-top: 10px;
      padding-top: 50px;
      padding-bottom: 50px;
    }

    /* NAVBAR */
    .navbar {
      background-color: var(--tecmax-black);
    }

    .navbar-brand img {
      height: 80px;
    }

    .nav-link {
      color: #fff !important;
      font-weight: 600;
    }

    .nav-link:hover {
      color: var(--tecmax-yellow) !important;
    }

    /* Botões */
    .btn-cta {
      background: var(--tecmax-yellow);
      color: var(--tecmax-black);
      font-weight: 700;
      border-radius: 999px;
      padding: 8px 18px;
      border: 2px solid var(--tecmax-yellow);
    }

    .btn-cta:hover {
      background: #d4a003;
      color: #fff;
    }

    .btn-outline-cta {
      background: transparent;
      color: #fff;
      font-weight: 700;
      border-radius: 999px;
      padding: 8px 18px;
      border: 2px solid var(--tecmax-yellow);
    }

    .btn-outline-cta:hover {
      background: var(--tecmax-yellow);
      color: var(--tecmax-black);
    }

    .btn-black {
      background: var(--tecmax-black);
      color: var(--tecmax-yellow);
      font-weight: 700;
      border-radius: 999px;
      padding: 10px 24px;
      border: 2px solid var(--tecmax-black);
    }

    .btn-black:hover {
      background: #222;
      color: #fff;
    }

    .btn-whatsapp {
      background: #25d366;
      color: #fff;
      font-weight: 700;
      border-radius: 999px;
      padding: 10px 24px;
      border: 2px solid #25d366;
    }

    .btn-whatsapp:hover {
      background: #1eb854;
      color: #fff;
    }

    /* Status Online/Fechado */
    .status-badge {
      display: inline-flex;
      align-items: center;
      font-size: 0.9rem;
      font-weight: 600;
      color: #fff;
    }

    .status-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 6px;
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
        opacity: 1;
      }

      50% {
        transform: scale(1.3);
        opacity: 0.7;
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    /* HERO */
    .hero {
      background: var(--tecmax-yellow);
      color: var(--tecmax-black);
      padding: 140px 0 80px;
      text-align: center;
    }

    .hero h1 {
      font-size: 2.8rem;
      font-weight: 800;
    }

    .hero p {
      font-size: 1.2rem;
      margin-top: 16px;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }

    .hero .hero-video {
      margin-top: 24px;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }

    .hero .hero-video iframe {
      border: 0;
    }

    /* GERADORES */
    .geradores {
      background: #f7f7f7;
    }

    .card-gerador {
      background: #fff;
      transition: all 0.25s ease;
      cursor: pointer;
      border-left: 5px solid var(--tecmax-yellow);
    }

    .card-gerador:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

    .card-gerador h5 {
      color: var(--tecmax-black);
    }

    .card-gerador p {
      font-size: 0.95rem;
    }

    /* QUEM SOMOS */
    .quem-somos {
      background: #fff;
    }

    .quem-somos h2 {
      color: var(--tecmax-black);
    }

    .quem-somos h5 {
      color: var(--tecmax-yellow);
      font-weight: 700;
    }

    .quem-somos iframe {
      border-radius: 12px;
      overflow: hidden;
    }

    /* IMPACT CHAMADA */
    .impact-gerador {
      position: relative;
      min-height: 70vh;
      background: url('../img/background_tecmax.jpg') center/cover no-repeat;
      display: flex;
      justify-content: center;
      align-items: center; /* centraliza verticalmente */
    }
  
    .impact-gerador .overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
    }

    .impact-gerador .container {
      position: relative;
      z-index: 1;
    }

    .impact-gerador h2,
    .impact-gerador h3 {
      font-size: 2.2rem;
    }

    .impact-gerador p {
      font-size: 1.1rem;
    }

    .impact-gerador .btn-cta {
      background: var(--tecmax-yellow);
      color: var(--tecmax-black);
      font-weight: 700;
      border-radius: 999px;
      padding: 12px 28px;
      border: 2px solid var(--tecmax-yellow);
    }

    .impact-gerador .btn-cta:hover {
      background: #d4a003;
      color: #fff;
    }

    /* FRASE IMPACTO AMARELO */
    .impacto-quality {
      background: var(--tecmax-yellow);
    }

    .impacto-quality h2 {
      max-width: 900px;
      margin: 0 auto;
      line-height: 1.4;
    }

    /* DIFERENCIAIS */
    .diferenciais {
      background: #f7f7f7;
    }

    .diferenciais h2 {
      color: var(--tecmax-black);
    }

    .diferenciais p {
      font-size: 1rem;
    }

    .card-diferencial {
      background: #fff;
      border-radius: 14px;
      transition: all 0.25s ease;
    }

    .card-diferencial:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

    .card-diferencial img {
      max-width: 160px;
      margin: 0 auto;
    }

    /* FOOTER */
    .footer {
      background: #000;
      color: #ccc;
    }

    .footer h6 {
      font-size: 1rem;
      margin-bottom: 8px;
    }

    .footer img {
      max-width: 180px;
    }

    .footer p {
      line-height: 1.5;
    }

    .impact-gerador {
      position: relative;
      min-height: 70vh;
      background: url('../img/background_tecmax.jpg') center/cover no-repeat;
      display: flex;
      justify-content: center;
    }

    .impact-gerador .overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
    }

    /* Animação Reveal */
    .reveal {
      opacity: 0;
      transform: translateY(60px);
      transition: all 1.2s ease;
    }


    .reveal.active {
      opacity: 1;
      transform: translateY(0);
    }
    
    /* Scroll To Top Button */
    .btn-scroll-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 45px;
      height: 45px;
      background-color: var(--tecmax-black);
      color: var(--tecmax-yellow);
      border: 2px solid var(--tecmax-yellow);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      z-index: 1000;
      transition: all 0.3s ease;
      opacity: 0;
      visibility: hidden;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
      padding: 0;
    }
    
    .btn-scroll-top.show {
      opacity: 1;
      visibility: visible;
    }
    
    .btn-scroll-top:hover {
      background-color: var(--tecmax-yellow);
      color: var(--tecmax-black);
      transform: translateY(-5px);
    }
    
    .btn-scroll-top svg {
      width: 24px;
      height: 24px;
    }