:root{
      --bg:#0b1b2b;        /* azul marinho fundo */
      --surface:#0f2742;   /* cartões/nav */
      --surface-2:#0d2137;
      --text:#e6f1ff;      /* texto principal */
      --muted:#a7c2e9;     /* texto secundário */
      --primary:#2d7fff;   /* ação */
      --primary-2:#4aa3ff; /* gradiente */
      --stroke:#153553;    /* bordas */
      --rad:18px; --max:1180px;
    }
    /* Remove o contorno azul ao clicar ou focar na área principal */
#app:focus {
  outline: none;
}
    *{box-sizing:border-box}

    html,body{height:100%}
    body{
      margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
      color:var(--text); background:
        radial-gradient(1100px 700px at 10% -10%, #123a64 0%, transparent 60%),
        radial-gradient(900px 600px at 90% 10%, #0e2d54 0%, transparent 55%),
        var(--bg);
      line-height:1.6; scroll-behavior:smooth;
    }

    a{color:inherit; text-decoration:none}
    img{max-width:150%; height:auto;}
    .wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

    /* Header */

    header{
      position:sticky; top:0; z-index:50;
      background:#0b1b2bd9; backdrop-filter:blur(10px); border-bottom:1px solid var(--stroke);
    }

    .nav{display:flex; align-items:center; justify-content:space-between; 
        gap:16px; padding:12px 0}

    .brand{display:flex; align-items:center; gap:12px}
    .logo{width:70px; height:70px;}
    .brand b{letter-spacing:1.2px;}
    .menu{display:flex; gap:14px; align-items:center}
    .menu a{padding:10px 12px; border-radius:10px}
    .menu a:hover{background:#0e2a45}
    .kor{font: arial black; color:#2d7fff; width: 10em; font-size: 1.5em; height: 1.8em; left: 20%;
      background-color: linear-gradient(120deg, #2d7fff, #4aa3ff, #2d7fff);    
}


    .cta{padding:10px 14px; border-radius:12px; font-weight:700; color:#061423;
         background:linear-gradient(135deg,var(--primary),var(--primary-2)); 
         box-shadow:0 0 22px #2d7fff44}

    .burger{display:none; width:42px; height:42px; border:1px solid var(--stroke); 
        border-radius:10px; background:#0d2137}

    @media (max-width:920px){
      .menu{display:none; position:fixed; inset:64px 12px auto; 
        flex-direction:column; background:#0e2339f2; border:1px solid var(--stroke); 
        border-radius:16px; padding:12px}

      .menu.open{display:flex}
      .burger{display:inline-grid; place-items:center}
    }


    /* Sections */

    section{padding:80px 0}
    h1,h2,h3{margin:0 0 10px}
    
    h1{font-size:clamp(28px,4.6vw,48px)}
    h2{font-size:clamp(22px,3vw,32px)}
    h3{font-size:clamp(18px,2.2vw,22px)}
    p{margin:0 0 10px}

    .subtitle{color:var(--muted)}
    .grid {
  display: grid;
  gap: 24px;
  /* MÁGICA: Cria colunas automáticas com largura mínima de 320px.
     Se a tela for pequena, fica 1 coluna. Se for grande, cabem 3. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

    @media (min-width:900px){ .cols-2{grid-template-columns:1.1fr .9fr} 
    .cols-3{grid-template-columns:repeat(3,1fr)} }
    
   .card {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--stroke);
  border-radius: var(--rad);
  padding: 28px; /* Mais respiro interno */
  box-shadow: 0 12px 28px #0006;
  
  /* Isto garante que todos os cards da mesma linha tenham a MESMA altura */
  height: 100%; 
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Alinha tudo ao topo */
}
.card h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.25rem; /* Título um pouco maior */
}

.card ul {
  margin-top: auto; /* Empurra a lista para baixo se sobrar espaço */
  padding-left: 20px;
}

    /* Hero */

    .hero{
      position:relative; overflow:hidden;
    }
    .hero .wrap{padding:96px 0 70px; text-align:center}

    .hero .pulse{position:absolute; inset:-20%; background:
      radial-gradient(520px 520px at 70% 40%, #2d7fff22 0%, #4aa3ff11 40%, transparent 70%);
      animation:floaty 8s ease-in-out infinite alternate; pointer-events:none}

    @keyframes floaty{from{transform:translateY(-8px)} to{transform:translateY(8px)}}
    .hero .bigcta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:24px}
    .btn{padding:12px 18px; border-radius:14px; border:1px solid var(--stroke); background:#0d2137}
    .btn--primary{background:linear-gradient(135deg,var(--primary),
        var(--primary-2)); color:#07121f; border:none}

    .badges{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px}
    .badge{padding:6px 10px; border:1px solid var(--stroke); border-radius:999px;
         color:#cfe3ff; background:#0e2339}

    /* Services tiles */

    .srv{display:flex; gap:12px; align-items:flex-start}
    .icon{min-width:22px; width:22px; height:22px; color:#8bc0ff}
    .srv ul{margin:6px 0 0 18px; padding:0; color:#c7dcff}
    
    /* Portfolio */

    .case{display:flex; flex-direction:column; gap:10px}
    .thumb{aspect-ratio:16/9; border-radius:12px; background:#0c1f33; border:1px solid var(--stroke);
         display:grid; place-items:center; color:#8bc0ff}
    
    /* Contact */

    form{display:grid; gap:12px}
    input,textarea{width:100%; padding:12px 14px; border-radius:12px; 
        border:1px solid var(--stroke); background:#0e2339; color:var(--text)}

    textarea{min-height:120px; resize:vertical}

    .hint{font-size:12px; color:#9bbbe0}
    .ok{color:#00e0a4} .err{color:#ff6b6b}
    
    /* Reveal on scroll */

    .reveal{opacity:0; transform:translateY(16px); transition:.6s ease}
    .reveal.in{opacity:1; transform:none}
    
    /* Reduced motion */

    @media (prefers-reduced-motion:reduce){ .hero .pulse{display:none} *{animation:none !important; 
        transition:none !important} }
    
    /* Footer */

    /* --- FOOTER MODERNO --- */

footer {
  background-color: #081420; /* Um tom mais escuro que o fundo */
  border-top: 1px solid var(--stroke);
  padding-top: 60px;
  padding-bottom: 30px;
  margin-top: 60px;
}

.footer-grid {
  display: grid;
  gap: 40px;
  /* Cria colunas automáticas (min 250px) */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  padding-bottom: 40px;
  border-bottom: 1px solid var(--stroke);
}

.footer-col h4 {
  color: var(--text);
  margin-bottom: 16px;
  font-size: 1.1rem;
}

.footer-col p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav a {
  color: var(--muted);
  transition: color 0.2s;
  font-size: 0.95rem;
}

.footer-nav a:hover {
  color: var(--primary);
  padding-left: 4px; /* Efeito de movimento leve */
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 30px;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

.footer-bottom a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* Ajuste Mobile para o Copyright */
@media (max-width: 600px) {
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}
    /* Botão Flutuante do WhatsApp */
/* Botão Flutuante do WhatsApp */
.whatsapp-float {
  position: fixed;
  width: 70px;  /* Aumentado de 60px para 70px */
  height: 70px; /* Aumentado de 60px para 70px */
  bottom: 40px;
  right: 40px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 8px #00000050; /* Sombra um pouco mais forte */
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

.whatsapp-float svg {
  width: 40px;  /* Aumentado de 32px para 40px */
  height: 40px; /* Aumentado de 32px para 40px */
}

/* Ajuste para telas menores */
@media (max-width: 768px) {
  .whatsapp-float {
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
  }
  .whatsapp-float svg {
    width: 35px;
    height: 35px;
  }
}
/* Estilo para o Mapa-Múndi */
.map-container {
  margin-top: 30px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0px; 
  min-height: 250px; 
}

.world-map {
  width: flex 200em; 
  background-color: linear-gradient(135deg, #2d7fff, #4aa3ff, #2d7fff);    
  height: auto;
  opacity: 0.8; 
}

/* Animação para o Título do Hero */
.hero-title {
  animation: text-glow 2.5s ease-in-out infinite alternate;
}

@keyframes text-glow {
  from {
    text-shadow: 0 0 10px #2d7fff44, 0 0 20px #2d7fff33, 0 0 30px #2d7fff22;
  }
  to {
    text-shadow: 0 0 20px #4aa3ff55, 0 0 30px #4aa3ff44, 0 0 40px #4aa3ff33;
  }
}

/* Melhorias nos Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px; 
  padding: 8px 14px; 
  font-size: 14px;
}

.badge .icon {
  width: 16px; 
  height: 16px;
  color: var(--primary); 
}
/* Animação para o botão de Enviar */
.btn {
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background-color: linear-gradient(135deg, #2d7fff, #4aa3ff, #2d7fff);    
  cursor: pointer; 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn--primary {
  box-shadow: 0 4px 15px #2d7fff33;
}

.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px #4aa3ff55;
}