/* Logo slide-in da esquerda */
    .navbar-brand {
      opacity: 0;
      transform: translateX(-50px);
      animation: slideInLeft 0.8s ease-out forwards;
      animation-delay: 0.3s; /* atraso para parecer mais natural */
    }

    @keyframes slideInLeft {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Logo slide-in da esquerda */
    .navbar-brand {
      opacity: 0;
      transform: translateX(-50px);
      animation: slideInLeft 0.8s ease-out forwards;
      animation-delay: 0.2s; /* atraso inicial */
    }

    /* Links da navbar - fade + slide para cima */
    .navbar-nav .nav-link {
      opacity: 0;
      transform: translateY(-20px);
      animation: slideInUp 0.6s ease-out forwards;
    }

    /* Keyframes */
    @keyframes slideInLeft {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes slideInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Navbar custom */
    .navbar {
      background-color: #020341;
      transition: background 0.3s;
    }

    .navbar .nav-link {
      color: #fff;
      font-weight: 500;
      padding: 8px 15px;
      border-radius: 6px;
      transition: all 0.3s ease;
    }

    /* Hover e efeito ativo */
    .navbar .nav-link:hover,
    .navbar .nav-link.active {
      background: linear-gradient(135deg, #020341, #0d6efd);
      color: #fff;
      transform: translateY(-2px);
    }

    /* Botão hamburguer */
    .navbar-toggler span {
      display: block;
      width: 25px;
      height: 3px;
      margin: 4px;
      background: #fff;
      transition: 0.3s;
    }

    /* Animação do menu hamburguer ao abrir */
    .navbar-toggler[aria-expanded="true"] span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    .navbar-toggler[aria-expanded="true"] span:nth-child(2) {
      opacity: 0;
    }

    .navbar-toggler[aria-expanded="true"] span:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Hero */
    .hero {
      background: linear-gradient(135deg, #020341, #0d6efd);
      color: #fff;
      padding: 120px 20px;
      text-align: center;
      border-bottom-left-radius: 32px;
      border-bottom-right-radius: 32px;
    }

    .hero h1 {
      font-weight: 700;
      font-size: 3rem;
    }

    .hero p.lead {
      font-size: 1.2rem;
      color: #fff;
    }

    /* Cards animados ao scroll */
    .scroll-animate {
      opacity: 0;
      transform: translateY(30px);
      transition: all 1.5s ease-out;
    }

    .scroll-animate.show {
      opacity: 1;
      transform: translateY(0);
    }

    /* Seções */
    section {
      padding: 100px 20px;
    }

    section h2 {
      font-weight: 700;
      margin-bottom: 40px;
      text-align: center;
    }

    /* Quem Somos */
    .sobre img {
      max-width: 100%;
      border-radius: 20px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      margin-top: 20px;
    }

    .sobre h4 {
      font-weight: 600;
      margin-top: 20px;
    }

    .sobre p,
    .sobre ul li {
      color: #555;
    }

    /* Cards Serviços */
    .service-card {
      text-align: center;
      padding: 40px 20px;
      border-radius: 20px;
      background: #f8f9fa;
      height: 100%;
    }

    .service-card i {
      font-size: 3rem;
      color: #0d6efd;
      margin-bottom: 15px;
    }

    .service-card h5 {
      font-weight: 700;
      margin-bottom: 15px;
    }

    .service-card p {
      color: #555;
    }

    /* CTA */
    .cta-section {
      background: #0d6efd;
      color: #fff;
      text-align: center;
      padding: 60px 20px;
      border-radius: 20px;
      margin-top: 60px;
    }

    .cta-section h2 {
      font-weight: 700;
      margin-bottom: 20px;
    }

    .cta-section .btn {
      padding: 12px 30px;
      font-size: 1.1rem;
      border-radius: 50px;
      font-weight: 600;
    }

    /* Botões com gradiente e maior altura */
    .btn-gradient {
      background: linear-gradient(135deg, #020341, #0d6efd);
      color: #fff;
      padding: 12px 25px; /* Aumenta altura e largura */
      border-radius: 10px;
      font-weight: 600;
      transition: all 0.4s ease;
      box-shadow: 0 8px 16px rgba(13, 110, 253, 0.4); /* sombra azulada */
    }

    /* Hover - inverte o gradiente e leve movimento */
    .btn-gradient:hover {
      background: linear-gradient(135deg, #0d6efd, #020341);
      transform: translateY(-2px); /* efeito sutil para cima */
      box-shadow: 0 8px 16px rgba(2, 3, 65, 0.5); /* sombra mais forte */
      color: #fff;
    }

    /* Footer */
    footer {
      background: #020341;
      color: #fff;
      text-align: center;
      padding: 30px 20px;
    }

    footer img {
      filter: brightness(0) invert(1);
      /* deixa branco em fundo escuro */
    }

    /* Banner flutuante moderno */
    .cookie-banner-float {
      position: fixed;
      bottom: 20px;
      right: 20px;
      max-width: 700px;
      width: 93%;
      font-size: 0.9rem;
      z-index: 1050;
      animation: fadeInUp 0.5s ease-out;
      border-radius: 12px;
    }

    @keyframes fadeInUp {
      from {
        transform: translateY(50px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    /* Botão flutuante */
    #cookie-link-float a {
      cursor: pointer;
      font-size: 0.85rem;
    }
    
    /* Efeito de digitação */
    .typing {
      min-height: 1.5em; /* reserva espaço para não empurrar o botão */
      white-space: nowrap;
      overflow: hidden;
      border-right: 2px solid #fff; /* cursor */
      display: inline-block;
      animation: blinkCursor 0.8s steps(2, start) infinite; /* pisca para sempre */
    }

    @keyframes blinkCursor {
      0% { border-color: transparent; }
      50% { border-color: #fff; }
      100% { border-color: transparent; }
    }

    /* Smooth scroll */
    html {
      scroll-behavior: smooth;
    }