:root {
    --primary-color: #0ff;
    --background-color: #000;
    --text-color: #fff;
}

body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    overflow-x: hidden;
}

.hero {
  position: relative;
  background-image: url('icons/fundo_hero_grade.png');
  background-repeat: no-repeat;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 85%;
  max-width: 1200px;
  gap: 4rem;
}

.hero-text {
  flex: 1;
  max-width: 550px;
  color: #e6ecf3;
  text-align: left;
}

.hero-text h1 {
  font-family: "Playfair Display", serif;
      font-size: 4rem;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 30px;
      background: linear-gradient(135deg, #fff 0%, #00aaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
}

.hero-text p {
  font-size: 1.2rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  color: #c5d4ec;
}


.btn-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 1rem 2.2rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-primary {
  background: #007aff;
  color: #fff;
  box-shadow: 0 0 15px rgba(0, 122, 255, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(0, 122, 255, 0.5);
}

.btn-secondary {
  background: transparent;
  border: 2px solid #6aa6ff;
  color: #6aa6ff;
}

.btn-secondary:hover {
  background: rgba(0, 122, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(0, 122, 255, 0.2);
}

.hero-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}


.globe {
  width: 100%;
  max-width: 500px;
  height: 500px;
}

/* Responsividade */
@media (max-width: 992px) {
  .hero-container {
    flex-direction: column-reverse;
    text-align: center;
    gap: 3rem;
  }
  .hero-text {
    text-align: center;
  }
  .hero-text h1 {
    font-size: 3rem;
  }
  .hero-text p {
    font-size: 1rem;
  }
  .globe {
    height: 350px;
    max-width: 350px;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 3rem 0;
  }
  .hero-container {
    width: 90%;
  }
  .hero-visual {
    width: 100%;
  }
  .globe {
    height: 300px;
    max-width: 300px;
  }
  .btn-group {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin-bottom: 2rem;
  }
  .btn-primary,
  .btn-secondary {
    width: 70%;
    text-align: center;
  }
}

@media (max-width: 480px) {

  .hero{
    background-image: url('icons/mobile.png');
  }
  .hero-text h1 {
    font-size: 2.5rem;
  }
  .globe {
    height: 280px;
    max-width: 280px;
  }
  .btn-group {
    margin-bottom: 1.5rem;
  }
  .btn-primary,
  .btn-secondary {
    width: 80%;
    padding: 0.9rem;
  }
}







:root {
  --primary-color: #0ff; /* Azul cibernético */
  --background-color: #000; /* Preto */
  --text-color: #fff;
}



  .about {
      min-height: 100vh;
      background: #000;
      color: #fff;
      padding: 120px 6% 100px;
      position: relative;
      overflow: hidden;
    }

    /* Grid animado de fundo */
    .about::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        linear-gradient(90deg, rgba(0, 170, 255, 0.15) 1px, transparent 1px),
        linear-gradient(rgba(0, 170, 255, 0.15) 1px, transparent 1px);
      background-size: 80px 80px;
      animation: gridMove 20s linear infinite, gridPulse 3s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes gridPulse {
      0%, 100% { opacity: 0.4; }
      50% { opacity: 1; }
    }

    @keyframes gridMove {
      0% { transform: translate(0, 0); }
      100% { transform: translate(80px, 80px); }
    }

    /* Glow effect */
    .about::after {
      content: "";
      position: absolute;
      width: 800px;
      height: 800px;
      background: radial-gradient(circle, rgba(0, 170, 255, 0.25), transparent 70%);
      top: -300px;
      right: -300px;
      border-radius: 50%;
      pointer-events: none;
      animation: pulse 3s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { 
        opacity: 0.5; 
        transform: scale(1); 
      }
      50% { 
        opacity: 1; 
        transform: scale(1.2); 
      }
    }

    .about-container {
      max-width: 1400px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    .section-label {
      display: inline-block;
      color: #00aaff;
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 20px;
      position: relative;
      padding-left: 30px;
    }

    .section-label::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 2px;
      background: linear-gradient(90deg, #00aaff, transparent);
    }

    .about-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      margin-top: 40px;
    }

    .about-left h2 {
      font-family: "Playfair Display", serif;
      font-size: 4rem;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 30px;
      background: linear-gradient(135deg, #fff 0%, #00aaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .about-left .tagline {
      font-size: 1.5rem;
      color: #00aaff;
      font-weight: 600;
      margin-bottom: 40px;
      letter-spacing: -0.5px;
    }

    .about-left p {
      font-size: 1.15rem;
      line-height: 1.8;
      color: #b0b0b0;
      margin-bottom: 25px;
    }

    .about-left p strong {
      color: #fff;
      font-weight: 600;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      margin-top: 50px;
    }

    .stat-item {
      text-align: center;
      padding: 25px 15px;
      border: 1px solid rgba(0, 170, 255, 0.2);
      border-radius: 12px;
      background: rgba(0, 170, 255, 0.03);
      transition: all 0.3s ease;
    }

    .stat-item:hover {
      border-color: rgba(0, 170, 255, 0.5);
      background: rgba(0, 170, 255, 0.08);
      transform: translateY(-5px);
    }

    .stat-number {
      font-size: 2.5rem;
      font-weight: 800;
      color: #00aaff;
      display: block;
      margin-bottom: 8px;
    }

    .stat-label {
      font-size: 0.95rem;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .about-right {
      position: relative;
    }

    .image-wrapper {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 30px 60px rgba(0, 170, 255, 0.2);
    }

    .image-wrapper::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(0, 170, 255, 0.3), transparent 60%);
      z-index: 1;
      pointer-events: none;
    }

    .image-wrapper img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.6s ease;
    }

    .image-wrapper:hover img {
      transform: scale(1.05);
    }

    /* Badge flutuante */
    .floating-badge {
      position: absolute;
      bottom: 30px;
      right: 30px;
      background: rgba(0, 0, 0, 0.9);
      backdrop-filter: blur(10px);
      padding: 20px 30px;
      border-radius: 15px;
      border: 1px solid rgba(0, 170, 255, 0.3);
      z-index: 2;
      animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    .floating-badge .badge-title {
      font-size: 0.85rem;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 5px;
    }

    .floating-badge .badge-value {
      font-size: 1.8rem;
      font-weight: 700;
      color: #00aaff;
    }

    .cta-buttons {
      display: flex;
      gap: 20px;
      margin-top: 50px;
    }

    .btn {
      padding: 16px 35px;
      border-radius: 10px;
      font-size: 1.05rem;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s ease;
      display: inline-block;
      position: relative;
      overflow: hidden;
    }

    .btn-primary {
      background: linear-gradient(135deg, #00aaff, #0066ff);
      color: #fff;
      box-shadow: 0 10px 30px rgba(0, 170, 255, 0.3);
    }

    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 40px rgba(0, 170, 255, 0.5);
    }

    .btn-secondary {
      background: transparent;
      color: #00aaff;
      border: 2px solid #00aaff;
    }

    .btn-secondary:hover {
      background: rgba(0, 170, 255, 0.1);
      transform: translateY(-3px);
    }

    /* Responsivo */
    @media (max-width: 1024px) {
      .about-content {
        grid-template-columns: 1fr;
        gap: 60px;
      }

      .about-left h1 {
        font-size: 3.5rem;
      }

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

    @media (max-width: 768px) {
      .about {
        padding: 80px 5% 60px;
      }

      .about-left h2 {
        font-size: 2.7rem;
      }

      .about-left .tagline {
        font-size: 1.2rem;
      }

      .about-left p {
        font-size: 1rem;
      }

      .stats-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .cta-buttons {
        flex-direction: column;
      }

      .btn {
        text-align: center;
      }

      .floating-badge {
        position: static;
        margin-top: 20px;
      }
    }


 .capacidades {
  min-height: 100vh;
  background: #000;
  color: #fff;
  padding: 120px 6% 150px;
  position: relative;
  overflow: hidden;
}

/* Scan lines animadas */
.capacidades::before {
  content: "";
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 170, 255, 0.03) 0px,
    rgba(0, 170, 255, 0.03) 1px,
    transparent 1px,
    transparent 2px
  );
  animation: scanlines 8s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes scanlines {
  0% { transform: translateY(0); }
  100% { transform: translateY(100px); }
}

/* Múltiplos glows orbitando */
.glow-orb {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  pointer-events: none;
}

.glow-orb-1 {
  background: radial-gradient(circle, #00aaff, transparent);
  top: 10%;
  right: 10%;
  animation: orbit1 20s ease-in-out infinite;
}

.glow-orb-2 {
  background: radial-gradient(circle, #0066ff, transparent);
  bottom: 20%;
  left: 15%;
  animation: orbit2 25s ease-in-out infinite;
}

@keyframes orbit1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-100px, 100px); }
}

@keyframes orbit2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(100px, -80px); }
}

.container2 {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.section-header {
  text-align: center;
  margin-bottom: 100px;
}

.section-label {
  display: inline-block;
  color: #00aaff;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 15px;
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

.skillti {
  font-family: "Playfair Display", serif;
  font-size: 4rem;
  font-weight: 900;
  background: linear-gradient(135deg, #fff 0%, #00aaff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeInUp 0.8s ease 0.2s forwards;
}

.section-subtitle {
  font-size: 1.2rem;
  color: #888;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.8;
  opacity: 0;
  animation: fadeInUp 0.8s ease 0.4s forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Layout hexagonal inovador */
.capabilities-content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 750px;
  margin-top: 60px;
}

/* Círculo central com pulse */
.tech-orbit {
  position: relative;
  width: 180px;
  height: 180px;
}

.orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.2), rgba(0, 102, 255, 0.1));
  border: 2px solid rgba(0, 170, 255, 0.5);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  animation: centerPulse 3s ease-in-out infinite;
}

@keyframes centerPulse {
  0%, 100% {
    box-shadow: 0 0 30px rgba(0, 170, 255, 0.3);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    box-shadow: 0 0 60px rgba(0, 170, 255, 0.6);
    transform: translate(-50%, -50%) scale(1.05);
  }
}

.orbit-center-text {
  font-size: 1.4rem;
  font-weight: 800;
  color: #00aaff;
  text-align: center;
  line-height: 1.3;
}

.orbit-center-subtext {
  font-size: 0.8rem;
  color: #888;
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Skills orbitando */
.capability {
  position: absolute;
  width: 140px;
  height: 140px;
  opacity: 0;
  transform: scale(0) rotate(0deg);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animação de entrada em cascata */
.capability:nth-of-type(1) { animation: skillEnter 1s ease 0.6s forwards; }
.capability:nth-of-type(2) { animation: skillEnter 1s ease 0.8s forwards; }
.capability:nth-of-type(3) { animation: skillEnter 1s ease 1s forwards; }
.capability:nth-of-type(4) { animation: skillEnter 1s ease 1.2s forwards; }
.capability:nth-of-type(5) { animation: skillEnter 1s ease 1.4s forwards; }
.capability:nth-of-type(6) { animation: skillEnter 1s ease 1.6s forwards; }

@keyframes skillEnter {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  60% {
    transform: scale(1.1) rotate(10deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Posicionamento em círculo - DESKTOP */
.capability:nth-child(1) { top: -220px; left: 50%; transform: translateX(-50%); }
.capability:nth-child(2) { top: -110px; right: -250px; }
.capability:nth-child(3) { bottom: -110px; right: -250px; }
.capability:nth-child(4) { bottom: -220px; left: 50%; transform: translateX(-50%); }
.capability:nth-child(5) { bottom: -110px; left: -250px; }
.capability:nth-child(6) { top: -110px; left: -250px; }

/* Quando ativa - EXPANDE e SAI DO CENTRO */
.capability.active {
  width: 320px !important;
  height: 220px !important;
  z-index: 100;
}

.capability.active:nth-child(1) { 
  top: -320px !important;
  transform: translateX(-50%) scale(1.1) !important;
}
.capability.active:nth-child(2) { 
  right: -360px !important;
  top: -140px !important;
  transform: scale(1.1) !important;
}
.capability.active:nth-child(3) { 
  right: -360px !important;
  bottom: -140px !important;
  transform: scale(1.1) !important;
}
.capability.active:nth-child(4) { 
  bottom: -320px !important;
  transform: translateX(-50%) scale(1.1) !important;
}
.capability.active:nth-child(5) { 
  left: -360px !important;
  bottom: -140px !important;
  transform: scale(1.1) !important;
}
.capability.active:nth-child(6) { 
  left: -360px !important;
  top: -140px !important;
  transform: scale(1.1) !important;
}

/* Card da skill */
.skill-card {
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 170, 255, 0.183);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.capability.active .skill-card {
  border-color: rgba(0, 170, 255, 0.9);
  background: rgba(0, 170, 255, 0.072);
  box-shadow: 
    0 30px 80px rgba(0, 170, 255, 0.053),
    0 0 100px rgba(0, 170, 255, 0.29) inset;
}

/* LINHAS CONECTORAS */
.capability::before {
  content: "";
  position: absolute;
  width: 2px;
  background: linear-gradient(
    rgba(0, 170, 255, 0) 0%,
    rgba(0, 170, 255, 0.186) 50%,
    rgba(0, 170, 255, 0.1) 100%
  );
  transform-origin: top center;
  z-index: 0;
  opacity: 0.9;
  animation: energyFlow 3s linear infinite;
}

@keyframes energyFlow {
  0% { opacity: 0.5; filter: blur(0); }
  50% { opacity: 1; filter: blur(2px); }
  100% { opacity: 0.5; filter: blur(0); }
}

.capability:nth-child(1)::before {
  height: 120px;
  top: calc(50% - 180px);
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
}

.capability:nth-child(2)::before {
  height: 190px;
  top: 35%;
  left: 60%;
  transform: rotate(30deg);
}

.capability:nth-child(3)::before {
  height: 200px;
  bottom: 35%;
  left: 63%;
  transform: rotate(120deg);
}

.capability:nth-child(4)::before {
  height: 120px;
  bottom: calc(50% - 180px);
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}

.capability:nth-child(5)::before {
  height: 200px;
  bottom: 35%;
  right: 63%;
  transform: rotate(240deg);
}

.capability:nth-child(6)::before {
  height: 190px;
  top: 35%;
  right: 60%;
  transform: rotate(330deg);
}

.capability.active::before {
  background: linear-gradient(
    rgba(0, 170, 255, 0) 0%,
    #00aaff2f 60%,
    rgba(0, 170, 255, 0.2) 100%
  );
  box-shadow: 0 0 12px rgba(0, 170, 255, 0.6);
  height: 220px;
  opacity: 1;
  filter: blur(1px);
}

.capability:hover .skill-card {
  transform: translateY(-5px) scale(1.03);
  border-color: rgba(0, 170, 255, 0.8);
  background: rgba(0, 170, 255, 0.08);
  box-shadow: 
    0 20px 60px rgba(0, 170, 255, 0.093),
    0 0 80px rgba(0, 170, 255, 0.2) inset;
}

.skill-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 12px rgba(0, 170, 255, 0.4));
  transition: all 0.5s ease;
}

.capability:hover .skill-icon,
.capability.active .skill-icon {
  transform: translateY(-10px) scale(1.1);
  filter: drop-shadow(0 8px 20px rgba(0, 170, 255, 0.6));
}

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

.skill-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  transition: color 0.4s ease;
}

.capability.active .skill-name {
  color: #00aaff;
}

.skill-level {
  font-size: 0.7rem;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 4px;
}

.skill-description {
  font-size: 0.9rem;
  color: #aaa;
  line-height: 1.7;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0;
}

.capability.active .skill-description {
  max-height: 100px;
  opacity: 1;
  margin-top: 15px;
}

.skills-cta {
  text-align: center;
  margin-top: 120px;
  position: relative;
  z-index: 5;
}

.skills-cta-text {
  font-size: 1.3rem;
  color: #ccc;
  margin-bottom: 30px;
}

.btn-portfolio {
  display: inline-block;
  padding: 18px 40px;
  background: linear-gradient(135deg, #00aaff, #0055ff);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 50px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 136, 255, 0.4);
}

.btn-portfolio span {
  position: relative;
  z-index: 2;
}

.btn-portfolio::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0055ff, #00aaff);
  transition: all 0.4s ease;
  z-index: 1;
}

.btn-portfolio:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(0, 136, 255, 0.6);
}

.btn-portfolio:hover::before {
  left: 0;
}
 /* Responsivo */
    @media (max-width: 1200px) {
      .capability:nth-child(2) { right: -180px; }
      .capability:nth-child(3) { right: -180px; }
      .capability:nth-child(5) { left: -180px; }
      .capability:nth-child(6) { left: -180px; }

      .capability.active {
        width: 280px !important;
        height: 200px !important;
      }

      .capability.active:nth-child(2) { right: -240px !important; }
      .capability.active:nth-child(3) { right: -240px !important; }
      .capability.active:nth-child(5) { left: -240px !important; }
      .capability.active:nth-child(6) { left: -240px !important; }
    }

    @media (max-width: 1024px) {
      .skillti {
        font-size: 3rem;
      }

      .capabilities-content {
        min-height: 500px;
      }

      .orbit-center {
        width: 150px;
        height: 150px;
      }

      .orbit-center-text {
        font-size: 1.2rem;
      }

      .capability {
        width: 120px;
        height: 120px;
      }

      .capability.active {
        width: 280px !important;
        height: 180px !important;
      }

      .capability:nth-child(1) { top: -150px; }
      .capability:nth-child(2) { right: -120px; top: -70px; }
      .capability:nth-child(3) { right: -120px; bottom: -70px; }
      .capability:nth-child(4) { bottom: -150px; }
      .capability:nth-child(5) { left: -120px; bottom: -70px; }
      .capability:nth-child(6) { left: -120px; top: -70px; }

      .skill-icon {
        width: 40px;
        height: 40px;
      }

      .skill-name {
        font-size: 1rem;
      }
    }

    @media (max-width: 768px) {
      .capacidades {
        padding: 80px 5% 60px;
      }

      .skillti {
        font-size: 3rem;
      }

      .section-subtitle {
        font-size: 1rem;
      }

      /* Layout vertical para mobile */
      .capabilities-content {
        display: block !important;
        min-height: auto !important;
        margin-top: 40px;
      }

      .tech-orbit {
        position: static !important;
        width: 100%;
        height: auto !important;
        margin-bottom: 0;
        display: block !important;
      }

      .orbit-center {
        position: static !important;
        margin: 0 auto 30px !important;
        transform: none !important;
        width: 140px;
        height: 140px;
        display: flex !important;
      }

      .orbit-center-text {
        font-size: 1.1rem;
      }

      .orbit-center-subtext {
        font-size: 0.7rem;
      }

      /* Skills em lista vertical */
      .capability {
        position: static !important;
        width: 100% !important;
        max-width: 400px;
        height: auto !important;
        min-height: 140px;
        margin: 0 auto 20px !important;
        transform: none !important;
        opacity: 1 !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
      }

      /* Animação de entrada mobile */
      .capability:nth-child(1),
      .capability:nth-child(2),
      .capability:nth-child(3),
      .capability:nth-child(4),
      .capability:nth-child(5),
      .capability:nth-child(6) {
        animation: mobileEnter 0.6s ease forwards !important;
      }

      @keyframes mobileEnter {
        from {
          opacity: 0;
          transform: translateY(20px) !important;
        }
        to {
          opacity: 1;
          transform: translateY(0) !important;
        }
      }

      .capability:nth-child(1) { animation-delay: 0.8s !important; }
      .capability:nth-child(2) { animation-delay: 0.9s !important; }
      .capability:nth-child(3) { animation-delay: 1s !important; }
      .capability:nth-child(4) { animation-delay: 1.1s !important; }
      .capability:nth-child(5) { animation-delay: 1.2s !important; }
      .capability:nth-child(6) { animation-delay: 1.3s !important; }

      .capability.active {
        width: 100% !important;
        max-width: 400px !important;
        min-height: 220px !important;
        transform: none !important;
        margin: 0 auto 20px !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
      }

      /* Força todas as posições ativas também */
      .capability.active:nth-child(1),
      .capability.active:nth-child(2),
      .capability.active:nth-child(3),
      .capability.active:nth-child(4),
      .capability.active:nth-child(5),
      .capability.active:nth-child(6) {
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
      }

      .capability::before {
        display: none !important;
      }

      .skill-card {
        padding: 25px;
        min-height: 140px;
      }

      .skill-icon {
        width: 45px;
        height: 45px;
      }

      .skill-name {
        font-size: 1.2rem;
      }

      .skill-description {
        font-size: 0.9rem;
      }

      .capability.active .skill-description {
        max-height: 150px;
      }

      .auto-rotation-indicator {
        display: none;
      }

      .skills-cta {
        margin-top: 50px;
        position: relative !important;
        z-index: 10;
        clear: both;
      }

      .skills-cta-text {
        font-size: 1.1rem;
        position: relative !important;
      }

      .btn-portfolio {
        width: 90%;
        max-width: 350px;
        display: block;
        margin: 0 auto;
        position: relative !important;
      }
    }

    @media (max-width: 480px) {
      .skillti {
        font-size: 3rem;
      }

      .orbit-center {
        width: 120px;
        height: 120px;
      }

      .orbit-center-text {
        font-size: 1rem;
      }

      .orbit-center-subtext {
        font-size: 0.65rem;
      }

      .capability {
        max-width: 100%;
      }

      .skill-card {
        padding: 20px;
      }

      .skill-icon {
        width: 40px;
        height: 40px;
      }

      .skill-name {
        font-size: 1.1rem;
      }

      .skill-description {
        font-size: 0.85rem;
      }

      .btn-portfolio {
        padding: 16px 35px;
        font-size: 1rem;
      }
    }


















 #processo-criacao {
      min-height: 100vh;
      background: #000;
      color: #fff;
      padding: 120px 6% 100px;
      position: relative;
      overflow: hidden;
    }

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

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #000;
      overflow-x: hidden;
    }

    /* Efeito de ondas no fundo */
    #processo-criacao::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(circle at 20% 50%, rgba(0, 170, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 102, 255, 0.06) 0%, transparent 50%);
      pointer-events: none;
    }

    /* Linhas diagonais animadas */
    #processo-criacao::after {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 100px,
        rgba(0, 170, 255, 0.03) 100px,
        rgba(0, 170, 255, 0.03) 101px
      );
      animation: diagonalMove 20s linear infinite;
      pointer-events: none;
    }

    @keyframes diagonalMove {
      0% { transform: translate(0, 0); }
      100% { transform: translate(50px, 50px); }
    }

    .container-passos {
      max-width: 1400px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    /* Header da seção */
    .section-header {
      text-align: center;
      margin-bottom: 80px;
    }

    .section-label {
      display: inline-block;
      color: #00aaff;
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 20px;
      opacity: 0;
      animation: fadeInUp 0.8s ease forwards;
    }

    .passos-titulo {
      text-align: center;
     font-family: "Playfair Display", serif;
      font-size: 4rem;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 30px;
      background: linear-gradient(135deg, #fff 0%, #00aaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .section-subtitle {
      font-size: 1.2rem;
      color: #888;
      max-width: 700px;
      margin: 0 auto 80px;
      line-height: 1.8;
      text-align: center;
      opacity: 0;
      animation: fadeInUp 0.8s ease 0.4s forwards;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Timeline vertical conectada */
    .passos {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 60px;
      max-width: 900px;
      margin: 0 auto 80px;
    }

    /* Linha vertical central - ANIMADA */
    .passos::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 80px;
      bottom: 80px;
      width: 2px;
      background: linear-gradient(180deg, 
        transparent,
        rgba(0, 170, 255, 0.5) 20%,
        rgba(0, 170, 255, 0.5) 80%,
        transparent
      );
      transform: translateX(-50%) scaleY(0);
      transform-origin: top;
      z-index: 1;
      animation: lineGrow 1.5s ease 0.8s forwards;
    }

    @keyframes lineGrow {
      to {
        transform: translateX(-50%) scaleY(1);
      }
    }

    /* Pulso de energia descendo pela linha */
    .passos::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 80px;
      width: 8px;
      height: 60px;
      background: linear-gradient(180deg, 
        rgba(0, 170, 255, 0),
        rgba(0, 170, 255, 1),
        rgba(0, 170, 255, 0)
      );
      transform: translateX(-50%);
      border-radius: 10px;
      z-index: 2;
      animation: energyPulse 3s ease 2.3s infinite;
      box-shadow: 0 0 20px rgba(0, 170, 255, 0.8);
    }

    @keyframes energyPulse {
      0% {
        top: 80px;
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      100% {
        top: calc(100% - 140px);
        opacity: 0;
      }
    }

    /* Cards dos passos */
    .passo-card {
      position: relative;
      background: rgba(10, 10, 10, 0.6);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(0, 170, 255, 0.2);
      border-radius: 20px;
      padding: 40px;
      opacity: 0;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Animação de entrada em cascata */
    .passo-card:nth-child(1) {
      animation: slideInLeft 0.8s ease 0.6s forwards;
      margin-right: auto;
      margin-left: 0;
      width: calc(50% - 40px);
    }

    .passo-card:nth-child(2) {
      animation: slideInRight 0.8s ease 0.9s forwards;
      margin-left: auto;
      margin-right: 0;
      width: calc(50% - 40px);
    }

    .passo-card:nth-child(3) {
      animation: slideInLeft 0.8s ease 1.2s forwards;
      margin-right: auto;
      margin-left: 0;
      width: calc(50% - 40px);
    }

    @keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translateX(-80px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes slideInRight {
      from {
        opacity: 0;
        transform: translateX(80px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Número do passo - circulo na linha */
    .passo-card::before {
      content: attr(data-step);
      position: absolute;
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #00aaff, #0066ff);
      border: 4px solid #000;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      font-weight: 900;
      color: #fff;
      box-shadow: 0 0 30px rgba(0, 170, 255, 0.5);
      z-index: 10;
      top: 50%;
      transform: translateY(-50%) scale(0);
      opacity: 0;
    }

    .passo-card:nth-child(1)::before {
      animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.4s forwards;
    }

    .passo-card:nth-child(2)::before {
      animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.7s forwards;
    }

    .passo-card:nth-child(3)::before {
      animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 2s forwards;
    }

    @keyframes popIn {
      0% {
        transform: translateY(-50%) scale(0) rotate(-180deg);
        opacity: 0;
      }
      70% {
        transform: translateY(-50%) scale(1.2) rotate(10deg);
      }
      100% {
        transform: translateY(-50%) scale(1) rotate(0deg);
        opacity: 1;
      }
    }

    .passo-card:nth-child(odd)::before {
      right: -70px;
    }

    .passo-card:nth-child(even)::before {
      left: -70px;
    }

    /* Hover effect nos cards */
    .passo-card:hover {
      transform: translateY(-8px);
      border-color: rgba(0, 170, 255, 0.5);
      background: rgba(0, 170, 255, 0.08);
      box-shadow: 0 20px 60px rgba(0, 170, 255, 0.3);
    }

    .passo-card:hover::before {
      box-shadow: 0 0 50px rgba(0, 170, 255, 0.8);
      transform: translateY(-50%) scale(1.1);
    }

    /* Título do passo */
    .passo-card h3 {
      font-size: 1.6rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .passo-card h3::before {
      content: "→";
      color: #00aaff;
      font-size: 1.8rem;
      font-weight: 900;
    }

    /* Lista de itens */
    .passo-card ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .passo-card li {
      font-size: 1.05rem;
      color: #bbb;
      padding-left: 30px;
      position: relative;
      line-height: 1.6;
      transition: all 0.3s ease;
      opacity: 0;
      transform: translateX(-20px);
    }

    /* Animação dos itens em cascata */
    .passo-card:nth-child(1) li:nth-child(1) { animation: itemFadeIn 0.4s ease 2.2s forwards; }
    .passo-card:nth-child(1) li:nth-child(2) { animation: itemFadeIn 0.4s ease 2.3s forwards; }
    .passo-card:nth-child(1) li:nth-child(3) { animation: itemFadeIn 0.4s ease 2.4s forwards; }
    .passo-card:nth-child(1) li:nth-child(4) { animation: itemFadeIn 0.4s ease 2.5s forwards; }
    .passo-card:nth-child(1) li:nth-child(5) { animation: itemFadeIn 0.4s ease 2.6s forwards; }

    .passo-card:nth-child(2) li:nth-child(1) { animation: itemFadeIn 0.4s ease 2.4s forwards; }
    .passo-card:nth-child(2) li:nth-child(2) { animation: itemFadeIn 0.4s ease 2.5s forwards; }
    .passo-card:nth-child(2) li:nth-child(3) { animation: itemFadeIn 0.4s ease 2.6s forwards; }
    .passo-card:nth-child(2) li:nth-child(4) { animation: itemFadeIn 0.4s ease 2.7s forwards; }
    .passo-card:nth-child(2) li:nth-child(5) { animation: itemFadeIn 0.4s ease 2.8s forwards; }

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

    .passo-card li::before {
      content: "✓";
      position: absolute;
      left: 0;
      color: #00aaff;
      font-weight: 900;
      font-size: 1.2rem;
    }

    .passo-card:hover li {
      color: #e0e0e0;
      padding-left: 35px;
    }

    .passo-card li:hover {
      color: #fff;
      transform: translateX(5px);
    }

    /* Parágrafo (para o último card) */
    .passo-card p {
      font-size: 1.1rem;
      color: #bbb;
      line-height: 1.8;
      padding-left: 30px;
      border-left: 3px solid #00aaff;
      opacity: 0;
      transform: translateX(-20px);
      animation: itemFadeIn 0.6s ease 2.6s forwards;
    }

    /* CTA final */
    .btn-wrapper {
      text-align: center;
      margin-top: 80px;
      opacity: 0;
      animation: fadeInUp 0.8s ease 1.5s forwards;
    }

    .cta-text {
      font-size: 1.4rem;
      color: #888;
      margin-bottom: 30px;
      font-weight: 500;
    }

    .cta-text span {
      color: #00aaff;
      font-weight: 700;
    }

    .btn-primary {
      display: inline-block;
      padding: 20px 50px;
      background: linear-gradient(135deg, #00aaff, #0066ff);
      color: #fff;
      font-size: 1.2rem;
      font-weight: 700;
      text-decoration: none;
      border-radius: 12px;
      transition: all 0.4s ease;
      box-shadow: 0 15px 40px rgba(0, 170, 255, 0.3);
      position: relative;
      overflow: hidden;
    }

    .btn-primary::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.6s ease, height 0.6s ease;
    }

    .btn-primary:hover::before {
      width: 400px;
      height: 400px;
    }

    .btn-primary:hover {
      transform: translateY(-5px);
      box-shadow: 0 25px 60px rgba(0, 170, 255, 0.5);
    }

    .btn-primary span {
      position: relative;
      z-index: 1;
    }

    /* Badge de destaque */
    .badge-destaque {
      display: inline-block;
      background: rgba(0, 170, 255, 0.2);
      color: #00aaff;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 20px;
      border: 1px solid rgba(0, 170, 255, 0.4);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-left: 10px;
    }

    

   @media (max-width: 768px) {
      #processo-criacao {
        padding: 80px 5% 60px;
      }

      .passos-titulo {
        font-size: 2.7rem !important;
      }

      .section-subtitle {
        font-size: 1rem;
        margin-bottom: 60px;
      }

      /* Timeline vertical no mobile */
      .passos::before {
        left: 25px;
        top: 60px;
        bottom: 60px;
      }

      /* Ajustar o pulso de energia no mobile */
      .passos::after {
        left: 25px;
        top: 60px;
        width: 6px;
        height: 40px;
      }

      @keyframes energyPulse {
        0% {
          top: 60px;
          opacity: 0;
        }
        10% {
          opacity: 1;
        }
        90% {
          opacity: 1;
        }
        100% {
          top: calc(100% - 100px);
          opacity: 0;
        }
      }

      .passo-card:nth-child(1),
      .passo-card:nth-child(2),
      .passo-card:nth-child(3) {
        width: 100%;
        margin: 0;
        padding-left: 70px;
        animation: fadeInUp 0.8s ease forwards !important;
      }

      .passo-card:nth-child(1) { animation-delay: 0.6s !important; }
      .passo-card:nth-child(2) { animation-delay: 0.9s !important; }
      .passo-card:nth-child(3) { animation-delay: 1.2s !important; }

      .passo-card::before {
        left: -5px !important;
        right: auto !important;
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
      }

      .passo-card h3 {
        font-size: 1.4rem;
        flex-wrap: wrap;
      }

      .badge-destaque {
        font-size: 0.65rem;
        padding: 3px 10px;
        margin-left: 6px;
      }

      .passo-card li,
      .passo-card p {
        font-size: 0.95rem;
      }

      .btn-primary {
        padding: 18px 40px;
        font-size: 1.1rem;
      }
    }



  .portfolio {
    padding: 5rem 2rem;
    background: linear-gradient(to right, #003, #001);
    color: var(--text-color);
  }
  
  .portfolio .container {
    max-width: 1200px;
    text-align: center;
  }
  
  .portfolio h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 2rem;
  }
  
  .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
  }
  
  .portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    transition : transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .portfolio-item:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }
  
  .portfolio-image img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
  }
  
  .portfolio-item:hover .portfolio-image img {
    transform: scale(1.1);
  }
  
  .portfolio-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .portfolio-item:hover .portfolio-info {
    opacity: 1;
  }
  
  .portfolio-info h3 {
    font-size: 1.5rem;
    margin: 0;
  }
  
  .portfolio-info p {
    font-size: 1rem;
  }
  
  /* Estilo do Modal */
  .modal {
    display: none; /* Oculta o modal por padrão */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Fundo escuro com opacidade */
  }
  
  .modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Largura do modal */
    max-width: 600px; /* Largura máxima do modal */
    border-radius: 10px;
    animation: modalIn 0.5s ease; /* Animação de entrada do modal */
  }
  
  @keyframes modalIn {
    from {
      opacity: 0;
      transform: translateY(-50px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }











  



  


 #portfolio {
      min-height: 100vh;
      background: 
        radial-gradient(circle at 15% 20%, rgba(0, 170, 255, 0.08) 0%, transparent 25%),
        radial-gradient(circle at 85% 80%, rgba(0, 102, 255, 0.06) 0%, transparent 25%),
        radial-gradient(circle at 50% 50%, rgba(0, 170, 255, 0.03) 0%, transparent 50%),
        #000;
      color: #fff;
      padding: 120px 6% 100px;
      position: relative;
      overflow: hidden;
    }

    /* Efeito de hexágonos sutis no fundo */
    #portfolio::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: 
        linear-gradient(30deg, rgba(0, 170, 255, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(0, 170, 255, 0.03) 87.5%, rgba(0, 170, 255, 0.03)),
        linear-gradient(150deg, rgba(0, 170, 255, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(0, 170, 255, 0.03) 87.5%, rgba(0, 170, 255, 0.03)),
        linear-gradient(30deg, rgba(0, 170, 255, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(0, 170, 255, 0.03) 87.5%, rgba(0, 170, 255, 0.03)),
        linear-gradient(150deg, rgba(0, 170, 255, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(0, 170, 255, 0.03) 87.5%, rgba(0, 170, 255, 0.03)),
        linear-gradient(60deg, rgba(0, 170, 255, 0.05) 25%, transparent 25.5%, transparent 75%, rgba(0, 170, 255, 0.05) 75%, rgba(0, 170, 255, 0.05)),
        linear-gradient(60deg, rgba(0, 170, 255, 0.05) 25%, transparent 25.5%, transparent 75%, rgba(0, 170, 255, 0.05) 75%, rgba(0, 170, 255, 0.05));
      background-size: 80px 140px;
      background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
      animation: hexagonMove 20s linear infinite;
      pointer-events: none;
      opacity: 0.4;
    }

    @keyframes hexagonMove {
      0% { background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; }
      100% { background-position: 80px 140px, 80px 140px, 120px 210px, 120px 210px, 80px 140px, 120px 210px; }
    }

    /* Radar girando por cima dos hexágonos */
    .portfolio-container::before {
      content: "";
      position: absolute;
      top: -200px;
      right: -200px;
      width: 800px;
      height: 800px;
      background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(0, 170, 255, 0.12) 60deg,
        transparent 120deg
      );
      border-radius: 50%;
      animation: radarSpin 10s linear infinite;
      pointer-events: none;
      opacity: 0.5;
      z-index: 1;
    }

    @keyframes radarSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }


    @keyframes particleGlow {
      0% { opacity: 0.3; }
      100% { opacity: 0.7; }
    }

    .portfolio-container {
      max-width: 1600px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    /* Header */
    .portfolio-header {
      text-align: center;
      margin-bottom: 80px;
    }

    .section-label {
      display: inline-block;
      color: #00aaff;
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 20px;
      opacity: 0;
      animation: fadeInUp 0.8s ease forwards;
    }

    .portfolio-title {
       font-family: "Playfair Display", serif;
      font-size: 4rem;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 30px;
      background: linear-gradient(135deg, #fff 0%, #00aaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .portfolio-subtitle {
      font-size: 1.3rem;
      color: #888;
      max-width: 800px;
      margin: 0 auto;
      line-height: 1.8;
      opacity: 0;
      animation: fadeInUp 0.8s ease 0.4s forwards;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Filtros */
    .portfolio-filters {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-bottom: 60px;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadeInUp 0.8s ease 0.6s forwards;
    }

    .filter-btn {
      padding: 12px 30px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(0, 170, 255, 0.3);
      border-radius: 30px;
      color: #888;
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.4s ease;
      position: relative;
      overflow: hidden;
    }

    .filter-btn::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(0, 170, 255, 0.2);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.4s ease, height 0.4s ease;
    }

    .filter-btn:hover::before,
    .filter-btn.active::before {
      width: 300px;
      height: 300px;
    }

    .filter-btn:hover,
    .filter-btn.active {
      color: #00aaff;
      border-color: #00aaff;
      background: rgba(0, 170, 255, 0.1);
      transform: translateY(-2px);
    }

    .filter-btn.active {
      box-shadow: 0 0 30px rgba(0, 170, 255, 0.3);
    }

    /* Grid de projetos */
    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
      gap: 40px;
      margin-bottom: 60px;
    }

    /* Card do projeto */
    .project-card {
      position: relative;
      height: 500px;
      border-radius: 20px;
      overflow: hidden;
      cursor: pointer;
      opacity: 0;
      transform: scale(0.9);
      animation: projectFadeIn 0.6s ease forwards;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .project-card:nth-child(1) { animation-delay: 0.8s; }
    .project-card:nth-child(2) { animation-delay: 0.9s; }
    .project-card:nth-child(3) { animation-delay: 1s; }
    .project-card:nth-child(4) { animation-delay: 1.1s; }
    .project-card:nth-child(5) { animation-delay: 1.2s; }
    .project-card:nth-child(6) { animation-delay: 1.3s; }

    @keyframes projectFadeIn {
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .project-card.hidden {
      display: none;
    }

    /* Imagem de fundo do projeto */
    .project-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .project-card:hover .project-image {
      transform: scale(1.1);
    }

    /* Overlay com gradiente */
    .project-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.7) 60%,
        rgba(0, 0, 0, 0.95) 100%
      );
      transition: background 0.5s ease;
    }

    .project-card:hover .project-overlay {
      background: linear-gradient(
        180deg,
        rgba(0, 170, 255, 0.3) 0%,
        rgba(0, 0, 0, 0.8) 60%,
        rgba(0, 0, 0, 0.98) 100%
      );
    }

    /* Conteúdo do card */
    .project-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 30px;
      transform: translateY(0);
      transition: transform 0.5s ease;
    }

    .project-card:hover .project-content {
      transform: translateY(-10px);
    }

    /* Badge de categoria */
    .project-category {
      display: inline-block;
      background: rgba(0, 170, 255, 0.2);
      color: #00aaff;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 20px;
      border: 1px solid rgba(0, 170, 255, 0.5);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 15px;
      backdrop-filter: blur(10px);
    }

    .project-title {
      font-size: 1.8rem;
      font-weight: 800;
      color: #fff;
      margin-bottom: 12px;
      transition: color 0.3s ease;
    }

    .project-card:hover .project-title {
      color: #00aaff;
    }

    .project-description {
      font-size: 1rem;
      color: #bbb;
      line-height: 1.6;
      margin-bottom: 20px;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: all 0.5s ease;
    }

    .project-card:hover .project-description {
      max-height: 100px;
      opacity: 1;
    }

    /* Tech stack */
    .project-tech {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 20px;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: all 0.5s ease;
    }

    .project-card:hover .project-tech {
      max-height: 100px;
      opacity: 1;
    }

    .tech-tag {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      font-size: 0.8rem;
      padding: 5px 12px;
      border-radius: 15px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(5px);
    }

    /* Métricas de resultado */
    .project-metrics {
      display: flex;
      gap: 20px;
      margin-top: 15px;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: all 0.5s ease 0.1s;
    }

    .project-card:hover .project-metrics {
      max-height: 60px;
      opacity: 1;
    }

    .metric-item {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .metric-value {
      font-size: 1.3rem;
      font-weight: 800;
      color: #00aaff;
    }

    .metric-label {
      font-size: 0.75rem;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    /* Botão de ver projeto */
    .project-link {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 50px;
      height: 50px;
      background: rgba(0, 170, 255, 0.2);
      border: 2px solid rgba(0, 170, 255, 0.5);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #00aaff;
      font-size: 1.2rem;
      backdrop-filter: blur(10px);
      transform: scale(0);
      transition: all 0.4s ease;
    }

    .project-card:hover .project-link {
      transform: scale(1) rotate(45deg);
      background: rgba(0, 170, 255, 0.4);
      box-shadow: 0 0 30px rgba(0, 170, 255, 0.5);
    }

    .project-link:hover {
      transform: scale(1.15) rotate(45deg);
      border-color: #00aaff;
    }

    /* Borda animada no hover */
    .project-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 20px;
      padding: 2px;
      background: linear-gradient(135deg, #00aaff, #0066ff, #00aaff);
      -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .project-card:hover::before {
      opacity: 1;
      animation: borderGlow 2s linear infinite;
    }

    @keyframes borderGlow {
      0%, 100% { filter: hue-rotate(0deg); }
      50% { filter: hue-rotate(20deg); }
    }

    /* CTA Final */
    .portfolio-cta {
      text-align: center;
      margin-top: 80px;
      opacity: 0;
      animation: fadeInUp 0.8s ease 1.5s forwards;
    }

    .cta-text {
      font-size: 1.5rem;
      color: #888;
      margin-bottom: 30px;
      font-weight: 500;
    }

    .cta-text span {
      color: #00aaff;
      font-weight: 800;
    }

    .btn-contact {
      display: inline-block;
      padding: 20px 50px;
      background: linear-gradient(135deg, #00aaff, #0066ff);
      color: #fff;
      font-size: 1.2rem;
      font-weight: 700;
      text-decoration: none;
      border-radius: 12px;
      transition: all 0.4s ease;
      box-shadow: 0 15px 40px rgba(0, 170, 255, 0.4);
      position: relative;
      overflow: hidden;
    }

    .btn-contact::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.6s ease, height 0.6s ease;
    }

    .btn-contact:hover::before {
      width: 400px;
      height: 400px;
    }

    .btn-contact:hover {
      transform: translateY(-5px);
      box-shadow: 0 25px 60px rgba(0, 170, 255, 0.6);
    }

    .btn-contact span {
      position: relative;
      z-index: 1;
    }

    /* Responsivo */
    @media (max-width: 1200px) {
      .portfolio-grid {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      }
    }

    @media (max-width: 1024px) {
      .portfolio-title {
        font-size: 3rem;
      }

      .portfolio-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 30px;
      }

      .project-card {
        height: 450px;
      }
    }

    @media (max-width: 768px) {
      #portfolio {
        padding: 80px 5% 60px;
      }

      .portfolio-title {
        font-size: 2.7rem;
      }

      .portfolio-subtitle {
        font-size: 1rem;
      }

      .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 25px;
      }

      .project-card {
        height: 400px;
      }

      /* No mobile, mostra tudo sem hover */
      .project-description,
      .project-tech,
      .project-metrics,
      .project-link {
        max-height: none;
        opacity: 1;
        transform: scale(1);
      }

      .project-link {
        transform: scale(1);
      }
    }

    @media (max-width: 480px) {
      .portfolio-title {
        font-size: 3rem;
      }

      .project-card {
        height: 450px;
      }

      .project-content {
        padding: 20px;
      }

      .project-title {
        font-size: 1.5rem;
      }

      .btn-contact {
        padding: 18px 40px;
        font-size: 1.1rem;
      }
    }



    
    #cta-final {
      min-height: 100vh;
      background: #000;
      color: #fff;
      padding: 100px 6%;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Grid massivo animado */
    #cta-final::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        linear-gradient(90deg, rgba(0, 170, 255, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(0, 170, 255, 0.08) 1px, transparent 1px);
      background-size: 100px 100px;
      animation: gridPulse 4s ease-in-out infinite, gridMove 30s linear infinite;
      pointer-events: none;
    }

    @keyframes gridPulse {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 0.8; }
    }

    @keyframes gridMove {
      0% { transform: translate(0, 0); }
      100% { transform: translate(100px, 100px); }
    }

    /* Explosão de luz central */
    #cta-final::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 800px;
      height: 800px;
      background: radial-gradient(circle, rgba(0, 170, 255, 0.3), transparent 70%);
      transform: translate(-50%, -50%);
      animation: centralPulse 3s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes centralPulse {
      0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
      }
      50% { 
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.6;
      }
    }

    .cta-container {
      max-width: 1200px;
      margin: 0 auto;
      text-align: center;
      position: relative;
      z-index: 2;
    }

    /* Badge superior */
    .cta-badge {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: rgba(0, 170, 255, 0.2);
      border: 2px solid rgba(0, 170, 255, 0.5);
      color: #00aaff;
      font-size: 0.85rem;
      font-weight: 700;
      padding: 10px 25px;
      border-radius: 30px;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-bottom: 40px;
      backdrop-filter: blur(10px);
      opacity: 0;
      animation: fadeInUp 0.8s ease 0.2s forwards;
      box-shadow: 0 0 30px rgba(0, 170, 255, 0.3);
    }

    .badge-icon {
      width: 20px;
      height: 20px;
      animation: flameFlicker 1.5s ease-in-out infinite;
    }

    @keyframes flameFlicker {
      0%, 100% { transform: scale(1) translateY(0); opacity: 1; }
      50% { transform: scale(1.1) translateY(-2px); opacity: 0.8; }
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Título gigante */
    .cta-title {
       font-family: "Playfair Display", serif;
      font-size: 4rem;
      font-weight: 900;
      line-height: 1.1;
      margin-bottom: 30px;
      opacity: 0;
      animation: fadeInUp 0.8s ease 0.4s forwards;
    }

    .cta-title .gradient-text {
      background: linear-gradient(135deg, #fff 0%, #00aaff 50%, #0066ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: inline-block;
      animation: gradientShift 3s ease infinite;
      background-size: 200% auto;
    }

    @keyframes gradientShift {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    .cta-title .highlight {
      color: #00aaff;
      position: relative;
      display: inline-block;
    }

    .cta-title .highlight::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 8px;
      background: rgba(0, 170, 255, 0.3);
      z-index: -1;
    }

    /* Subtítulo */
    .cta-subtitle {
      font-size: 1.5rem;
      color: #bbb;
      max-width: 800px;
      margin: 0 auto 50px;
      line-height: 1.8;
      opacity: 0;
      animation: fadeInUp 0.8s ease 0.6s forwards;
    }

    .cta-subtitle strong {
      color: #00aaff;
      font-weight: 700;
    }

    /* Stats impressionantes */
    .cta-stats {
      display: flex;
      justify-content: center;
      gap: 60px;
      margin-bottom: 60px;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadeInUp 0.8s ease 0.8s forwards;
    }

    .stat-item {
      text-align: center;
      position: relative;
    }

    .stat-item::before {
      content: "";
      position: absolute;
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 4px;
      background: linear-gradient(90deg, transparent, #00aaff, transparent);
      border-radius: 10px;
    }

    .stat-number {
      font-size: 3.5rem;
      font-weight: 900;
      background: linear-gradient(135deg, #00aaff, #0066ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: block;
      margin-bottom: 10px;
      text-shadow: 0 0 30px rgba(0, 170, 255, 0.5);
    }

    .stat-label {
      font-size: 1rem;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 600;
    }

    /* Botões de ação */
    .cta-buttons {
      display: flex;
      justify-content: center;
      gap: 25px;
      margin-bottom: 60px;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadeInUp 0.8s ease 1s forwards;
    }

    .cta-btn {
      padding: 22px 50px;
      font-size: 1.3rem;
      font-weight: 700;
      text-decoration: none;
      border-radius: 15px;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }

    .btn-icon {
      width: 24px;
      height: 24px;
      transition: transform 0.4s ease;
    }

    /* Botão primário - Explosivo */
    .cta-btn-primary {
      background: linear-gradient(135deg, #00aaff, #0066ff);
      color: #fff;
      box-shadow: 
        0 20px 60px rgba(0, 170, 255, 0.4),
        0 0 80px rgba(0, 170, 255, 0.2) inset;
      border: 2px solid rgba(255, 255, 255, 0.2);
    }

    .cta-btn-primary::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.6s ease, height 0.6s ease;
    }

    .cta-btn-primary:hover::before {
      width: 500px;
      height: 500px;
    }

    .cta-btn-primary:hover {
      transform: translateY(-8px) scale(1.05);
      box-shadow: 
        0 30px 80px rgba(0, 170, 255, 0.6),
        0 0 120px rgba(0, 170, 255, 0.4) inset;
    }

    /* Botão secundário - Ghost */
    .cta-btn-secondary {
      background: transparent;
      color: #00aaff;
      border: 2px solid #00aaff;
      box-shadow: 0 0 30px rgba(0, 170, 255, 0.2);
    }

    .cta-btn-secondary:hover {
      background: rgba(0, 170, 255, 0.1);
      transform: translateY(-8px);
      box-shadow: 0 20px 60px rgba(0, 170, 255, 0.3);
    }

    .cta-btn span {
      position: relative;
      z-index: 1;
    }

    .cta-btn:hover .btn-icon {
      transform: scale(1.2) rotate(15deg);
      animation: iconPulse 0.6s ease infinite;
    }

    @keyframes iconPulse {
      0%, 100% { transform: scale(1.2) rotate(15deg); }
      50% { transform: scale(1.35) rotate(15deg); }
    }

    /* Garantias/Trust badges */
    .cta-trust {
      display: flex;
      justify-content: center;
      gap: 40px;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadeInUp 0.8s ease 1.2s forwards;
    }

    .trust-item {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #888;
      font-size: 0.95rem;
      font-weight: 500;
    }

    .trust-icon {
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, #00aaff, #0066ff);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 20px rgba(0, 170, 255, 0.5);
      padding: 6px;
    }

    .trust-icon svg {
      width: 100%;
      height: 100%;
    }

    /* Urgência/escassez */
    .cta-urgency {
      margin-top: 50px;
      padding: 25px 40px;
      background: rgba(255, 50, 50, 0.1);
      border: 1px solid rgba(255, 50, 50, 0.3);
      border-radius: 15px;
      display: inline-block;
      backdrop-filter: blur(10px);
      opacity: 0;
      animation: fadeInUp 0.8s ease 1.4s forwards, urgencyPulse 2s ease-in-out 2s infinite;
    }

    @keyframes urgencyPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.02); }
    }

    .urgency-text {
      color: #ff6b6b;
      font-size: 1.1rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .urgency-icon {
      width: 24px;
      height: 24px;
      animation: urgencyBlink 1s ease-in-out infinite;
    }

    @keyframes urgencyBlink {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.1); }
    }

    /* Setas flutuantes */
    .floating-arrows {
      position: absolute;
      bottom: 50px;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      animation: fadeInUp 0.8s ease 1.6s forwards, arrowBounce 2s ease-in-out 2.4s infinite;
    }

    @keyframes arrowBounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(15px); }
    }

    .arrow-svg {
      width: 40px;
      height: 60px;
    }

    /* Responsivo */
    @media (max-width: 1024px) {
      .cta-title {
        font-size: 4rem;
      }

      .stat-number {
        font-size: 3rem;
      }
    }

    @media (max-width: 768px) {
      #cta-final {
        padding: 80px 5%;
      }

      .cta-title {
        font-size: 3rem;
      }

      .cta-subtitle {
        font-size: 1.2rem;
      }

      .cta-stats {
        gap: 40px;
      }

      .stat-number {
        font-size: 2.5rem;
      }

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

      .cta-btn {
        width: 100%;
        max-width: 400px;
        justify-content: center;
      }

      .cta-trust {
        flex-direction: column;
        align-items: center;
        gap: 20px;
      }
    }

    @media (max-width: 480px) {
      .cta-title {
        font-size: 2.6rem;
      }

      .cta-subtitle {
        font-size: 1rem;
      }

      .stat-number {
        font-size: 2rem;
      }

      .stat-label {
        font-size: 0.85rem;
      }

      .cta-btn {
        padding: 18px 35px;
        font-size: 1.1rem;
      }

      .cta-urgency {
        padding: 20px 25px;
      }

      .urgency-text {
        font-size: 0.95rem;
        flex-direction: column;
        text-align: center;
      }
    }



.barra1{
  background-color: #17639c;
  width: 100%;
  height: 2px;
}
.barra2{
  background-color: #0f4874;
  width: 100%;
  height: 2px;
}
.barra3{
  background-color: #0c436d;
  width: 100%;
  height: 2px;
}
.barra4{
  background-color: #043052;
  width: 100%;
  height: 2px;
}
.barra5{
  background-color: #04223a;
  width: 100%;
  height: 2px;
}


.footer {
  background-color:  #021e34; 
  padding: 20px 0;
  text-align: center;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
}

.footer nav ul {
  list-style-type: none;
  padding: 0;
}

.footer nav ul li {
  display: inline;
  margin-right: 20px;
}

.footer nav ul li a {
  color: #fff;
  text-decoration: none;
}