:root {

            --azul-vibrante: #0066cc;

            --azul-escuro: #004c99;

            --branco: #ffffff;

            --cinza-claro: #f5f5f5;

        }

        

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

        }

        

        body {

            background-color: var(--branco);

            color: #333;

            line-height: 1.6;

        }

        

        .container {

            width: 90%;

            max-width: 1200px;

            margin: 0 auto;

        }

        

        /* Header e Navegação */

        header {

            background-color: var(--azul-vibrante);

            padding: 15px 0;

            position: sticky;

            top: 0;

            z-index: 100;

            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

        }

        

        nav {

            display: flex;

            justify-content: space-between;

            align-items: center;

        }

        

        .logo {

            color: var(--branco);

            font-size: 1.8rem;

            font-weight: bold;

            text-decoration: none;

            display: flex;

            align-items: center;

        }

        

        .logo i {

            margin-right: 10px;

        }

        

        .nav-links {

            display: flex;

            list-style: none;

        }

        

        .nav-links li {

            margin-left: 25px;

        }

        

        .nav-links a {

            color: var(--branco);

            text-decoration: none;

            font-weight: 500;

            transition: all 0.3s ease;

        }

        

        .nav-links a:hover {

            color: #ffd700;

        }

        

        /* Hero Section */

        .hero {

            background: linear-gradient(rgba(0, 102, 204, 0.8), rgba(0, 76, 153, 0.9)), url('img/produtos-atomy-brasil-produtos-coreanos_11zon.webp');

            background-size: cover;

            background-position: center;

            color: var(--branco);

            padding: 100px 0;

            text-align: center;

        }

        

        .hero h1 {

            font-size: 2.8rem;

            margin-bottom: 20px;

        }

        

        .hero p {

            font-size: 1.2rem;

            max-width: 800px;

            margin: 0 auto 30px;

        }

        

        .btn {

            display: inline-block;

            background-color: var(--branco);

            color: var(--azul-vibrante);

            padding: 12px 30px;

            border-radius: 30px;

            text-decoration: none;

            font-weight: bold;

            transition: all 0.3s ease;

        }

        

        .btn:hover {

            background-color: #ffd700;

            transform: translateY(-3px);

        }

        /* Container centralizado com efeito de entrada */

.btn-container {

  text-align: center;

  margin-top: 40px;

  animation: fadeDown 1.5s ease-out;

}



/* Botão principal */

.btn-cadastro {

  display: inline-block;

  background: linear-gradient(90deg, #007BFF, #00A6FF);

  color: #fff;

  text-decoration: none;

  font-family: "Poppins", sans-serif;

  font-weight: 700;

  padding: 18px 50px;

  border-radius: 14px;

  box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  animation: piscar 2s infinite;

}



/* Título principal */

.btn-cadastro .titulo {

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.4rem;

  letter-spacing: 1px;

}



/* Ícone animado */

.btn-cadastro .icone {

  margin-left: 10px;

  font-size: 1.5rem;

  animation: moverSeta 1.2s infinite ease-in-out;

}



/* Subtítulo */

.btn-cadastro .subtitulo {

  display: block;

  font-size: 0.9rem;

  font-weight: 400;

  margin-top: 4px;

  opacity: 0.9;

}



/* Efeito hover */

.btn-cadastro:hover {

  transform: translateY(-3px);

  box-shadow: 0 8px 18px rgba(0, 166, 255, 0.6);

}



/* Animação de fade down */

@keyframes fadeDown {

  from {

    opacity: 0;

    transform: translateY(-25px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* Animação piscante */

@keyframes piscar {

  0%, 100% { opacity: 1; }

  50% { opacity: 0.6; }

}



/* Animação da seta */

@keyframes moverSeta {

  0%, 100% { transform: translateX(0); }

  50% { transform: translateX(5px); }

}



        

        /* Introdução */

        .intro {

            padding: 80px 0;

            text-align: center;

        }

        

        .intro h2 {

            color: var(--azul-vibrante);

            font-size: 2.2rem;

            margin-bottom: 30px;

        }

        

        .intro p {

            max-width: 900px;

            margin: 0 auto 20px;

            font-size: 1.1rem;

        }

        

        /* Categorias */

        .categorias {

            padding: 60px 0;

            background-color: var(--cinza-claro);

        }

        

        .section-title {

            text-align: center;

            color: var(--azul-vibrante);

            font-size: 2rem;

            margin-bottom: 40px;

        }

        

        .categoria-botoes {

            display: flex;

            justify-content: center;

            flex-wrap: wrap;

            gap: 15px;

            margin-bottom: 40px;

        }

        

        .categoria-btn {

            background-color: var(--branco);

            color: var(--azul-vibrante);

            border: 2px solid var(--azul-vibrante);

            padding: 10px 20px;

            border-radius: 30px;

            cursor: pointer;

            font-weight: bold;

            transition: all 0.3s ease;

        }

        

        .categoria-btn:hover, .categoria-btn.active {

            background-color: var(--azul-vibrante);

            color: var(--branco);

        }

        

        /* Produtos */

        .produtos {

            display: grid;

            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

            gap: 30px;

            margin-top: 40px;

        }

        

        .produto {

            background-color: var(--branco);

            border-radius: 10px;

            overflow: hidden;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

            transition: transform 0.3s ease;

        }

        

        .produto:hover {

            transform: translateY(-10px);

        }

        

        .produto-img {

            height: 200px;

            background-color: #f0f0f0;

            display: flex;

            align-items: center;

            justify-content: center;

            color: var(--azul-vibrante);

            font-size: 3rem;

        }

        

        .produto-info {

            padding: 20px;

        }

        

        .produto-info h3 {

            color: var(--azul-vibrante);

            margin-bottom: 10px;

        }

        

        .produto-info p {

            margin-bottom: 15px;

            color: #666;

        }

        

        .produto-link {

            display: inline-block;

            color: var(--azul-vibrante);

            font-weight: bold;

            text-decoration: none;

        }

        

        .produto-link:hover {

            text-decoration: underline;

        }

        

        /* Oportunidade */

        .oportunidade {

            padding: 80px 0;

            background: linear-gradient(to right, var(--azul-vibrante), var(--azul-escuro));

            color: var(--branco);

        }

        

        .oportunidade h2 {

            text-align: center;

            margin-bottom: 40px;

            font-size: 2.2rem;

        }

        

        .oportunidade-content {

            max-width: 900px;

            margin: 0 auto;

        }

        

        .oportunidade p {

            margin-bottom: 20px;

            font-size: 1.1rem;

        }

        

        /* WhatsApp Float */

        .whatsapp-float {

            position: fixed;

            bottom: 30px;

            right: 30px;

            background-color: #25D366;

            color: var(--branco);

            width: 60px;

            height: 60px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 1.8rem;

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

            z-index: 99;

            transition: all 0.3s ease;

            text-decoration: none;

        }

        

        .whatsapp-float:hover {

            transform: scale(1.1);

            background-color: #128C7E;

        }

        

        /* Footer */

        footer {

            background-color: var(--azul-escuro);

            color: var(--branco);

            padding: 60px 0 30px;

        }

        

        .footer-content {

            display: flex;

            flex-wrap: wrap;

            justify-content: space-between;

            margin-bottom: 40px;

        }

        

        .footer-section {

            flex: 1;

            min-width: 250px;

            margin-bottom: 30px;

        }

        

        .footer-section h3 {

            margin-bottom: 20px;

            font-size: 1.4rem;

        }

        

        .footer-links {

            list-style: none;

        }

        

        .footer-links li {

            margin-bottom: 10px;

        }

        

        .footer-links a {

            color: var(--branco);

            text-decoration: none;

            transition: all 0.3s ease;

        }

        

        .footer-links a:hover {

            color: #ffd700;

            padding-left: 5px;

        }

        

        .social-icons {

            display: flex;

            gap: 15px;

            margin-top: 20px;

        }

        

        .social-icons a {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            width: 40px;

            height: 40px;

            background-color: rgba(255, 255, 255, 0.1);

            border-radius: 50%;

            color: var(--branco);

            font-size: 1.2rem;

            transition: all 0.3s ease;

            text-decoration: none;

        }

        

        .social-icons a:hover {

            background-color: var(--branco);

            color: var(--azul-vibrante);

            transform: translateY(-5px);

        }

        

        .footer-bottom {

            text-align: center;

            padding-top: 20px;

            border-top: 1px solid rgba(255, 255, 255, 0.1);

        }