/* RESET & BASE */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --azul-marinho:#1a3a52;
  --dourado:#d4af37;
  --verde:#a4d65e;
  --branco:#ffffff;
  --cinza-claro:#f5f5f5;
  --cinza-medio:#666666;
  --preto:#1a1a1a;
}
body{
  font-family:'Montserrat',sans-serif;
  line-height:1.6;
  color:var(--preto);
  overflow-x:hidden;
}
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* TYPOGRAPHY */
h1,h2,h3,h4{
  font-weight:700;
  line-height:1.2;
}
h1{font-size:2.5rem}
h2{font-size:2rem}
h3{font-size:1.6rem}
.section-title{
  text-align:center;
  color:var(--azul-marinho);
  margin-bottom:1rem;
}
.section-subtitle{
  text-align:center;
  color:var(--cinza-medio);
  font-size:1rem;
  margin:0 auto 2.5rem;
  max-width:700px;
}

/* BUTTONS */
.btn{
  display:inline-block;
  padding:12px 28px;
  border-radius:5px;
  text-decoration:none;
  font-weight:600;
  transition:all .3s ease;
  border:none;
  cursor:pointer;
  font-size:.95rem;
}
.btn-primary{
  background:var(--dourado);
  color:var(--branco);
}
.btn-primary:hover{
  background:#c19a2e;
  transform:translateY(-2px);
  box-shadow:0 5px 15px rgba(212,175,55,.3);
}
.btn-secondary{
  background:transparent;
  color:var(--branco);
  border:2px solid var(--branco);
}
.btn-secondary:hover{
  background:var(--branco);
  color:var(--azul-marinho);
}

/* HEADER */
.header{
  position:fixed;
  inset:0 0 auto;
  z-index:1000;
  background:rgba(26,58,82,.95);
  backdrop-filter:blur(10px);
  padding:12px 0;
  transition:background .3s ease, box-shadow .3s ease;
}
.header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
/* CORREÇÃO LOGO - PROPORCIONAL */
.logo img{
  height:75px;
  width:auto; /* Mantém proporção */
  max-width:250px; /* Limita largura máxima */
  object-fit:contain; /* Mantém aspecto sem distorcer */
}
.nav{
  display:none;
  gap:24px;
  align-items:center;
}
.nav a{
  color:var(--branco);
  text-decoration:none;
  font-weight:500;
  transition:color .3s ease;
  font-size:.9rem;
}
.nav a:hover{
  color:var(--dourado);
}
.nav .btn-contato{
  background:var(--dourado);
  padding:8px 20px;
  border-radius:5px;
}

/* HERO */
.hero{
  position:relative;
  min-height:90vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--azul-marinho) 0,#0d1f2d 100%);
  background-image:url('../images/hero-bg.jpg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  text-align:center;
  color:var(--branco);
  margin-top:64px;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:rgba(26,58,82,.85);
}
.hero-content{
  position:relative;
  z-index:2;
  padding:0 10px;
}
.hero h1{
  margin-bottom:1.2rem;
  animation:fadeInUp 1s ease;
}
.hero-subtitle{
  font-size:1rem;
  margin-bottom:2rem;
  opacity:.9;
  animation:fadeInUp 1.2s ease;
}
.hero-cta{
  display:flex;
  flex-direction:column;
  gap:12px;
  justify-content:center;
  align-items:center;
  animation:fadeInUp 1.4s ease;
}

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

/* ABOUT (SOBRE) */
.sobre{
  padding:60px 0;
  background:var(--branco);
}
.sobre-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  align-items:center;
}
.sobre-imagem img{
  width:100%;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.1);
  transition:transform .3s ease;
}
.sobre-imagem img:hover{
  transform:scale(1.02);
}
.sobre-texto h2{
  color:var(--azul-marinho);
  margin-bottom:1.2rem;
}
.sobre-texto p{
  margin-bottom:1.2rem;
  color:var(--cinza-medio);
  font-size:.98rem;
}
.credenciais{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:2rem;
}
.credencial-item{
  display:flex;
  flex-direction:column;
}
.credencial-item .numero{
  font-size:2.4rem;
  font-weight:900;
  color:var(--dourado);
  line-height:1;
}
.credencial-item .label{
  font-size:.8rem;
  color:var(--cinza-medio);
  margin-top:4px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* SERVICES (SERVIÇOS) */
.servicos{
  padding:60px 0;
  background:var(--cinza-claro);
}
.servicos-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  margin-top:32px;
}
.servico-card{
  background:var(--branco);
  padding:28px 22px;
  border-radius:10px;
  text-align:center;
  transition:transform .3s ease,box-shadow .3s ease;
  border-top:3px solid var(--dourado);
}
.servico-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(0,0,0,.1);
}
.servico-icon{
  font-size:2.4rem;
  margin-bottom:12px;
}
.servico-card h3{
  color:var(--azul-marinho);
  margin-bottom:10px;
  font-size:1.2rem;
}
.servico-card p{
  color:var(--cinza-medio);
  line-height:1.6;
  font-size:.95rem;
}

/* CASES / CREDIBILITY */
.cases{
  padding:60px 0;
  background:var(--branco);
}
.cases-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  margin-top:32px;
}
.case-card{
  background:var(--cinza-claro);
  border-radius:10px;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.case-card:hover{
  transform:scale(1.03);
  box-shadow:0 8px 20px rgba(0,0,0,.1);
}
.case-card img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}
.case-content{
  padding:18px;
}
.case-content h3{
  color:var(--azul-marinho);
  margin-bottom:6px;
  font-size:1.1rem;
}
.case-content p{
  color:var(--cinza-medio);
  font-size:.9rem;
}
.case-content-text{
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100%;
  min-height:220px;
}
.case-note{
  display:inline-block;
  margin-top:10px;
  color:var(--dourado);
  font-size:.85rem;
  font-weight:600;
}
.depoimento{
  margin-top:40px;
  padding:32px 20px;
  background:var(--azul-marinho);
  border-radius:10px;
  text-align:center;
}
.depoimento blockquote{
  color:var(--branco);
  font-size:1.05rem;
  font-style:italic;
  line-height:1.7;
  margin-bottom:14px;
}
.depoimento cite{
  color:var(--dourado);
  font-style:normal;
  font-weight:600;
  font-size:.9rem;
}

/* DIFFERENTIALS (DIFERENCIAIS) */
.diferenciais{
  padding:60px 0;
  background:linear-gradient(135deg,var(--azul-marinho) 0,#0d1f2d 100%);
  color:var(--branco);
}
.diferenciais .section-title{
  color:var(--branco);
}
.diferenciais .section-subtitle{
  color:rgba(255,255,255,.8);
}
.diferenciais-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  margin-top:32px;
}
.diferencial-item{
  padding:22px 20px;
  background:rgba(255,255,255,.05);
  border-radius:10px;
  border-left:3px solid var(--dourado);
  transition:transform .3s ease, background .3s ease;
}
.diferencial-item:hover{
  transform:translateX(5px);
  background:rgba(255,255,255,.08);
}
.diferencial-item h3{
  color:var(--dourado);
  margin-bottom:10px;
  font-size:1.1rem;
}
.diferencial-item p{
  opacity:.9;
  line-height:1.6;
  font-size:.95rem;
}

/* CONTACT (CONTATO) */
.contato{
  padding:60px 0;
  background:var(--cinza-claro);
}
.contato-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  margin-top:32px;
}
.contato-info{
  background:var(--azul-marinho);
  padding:28px 22px;
  border-radius:10px;
  color:var(--branco);
}
.contato-info h3{
  color:var(--dourado);
  margin-bottom:20px;
  font-size:1.2rem;
}
.contato-item{
  display:flex;
  gap:14px;
  margin-bottom:18px;
  align-items:center;
}
.contato-item .icon{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  font-size:1.6rem;
}
/* CORREÇÃO CRÍTICA: Ícones SVG - REMOVER FILTER que estava deixando branco */
.contato-item .icon img{
  width:24px;
  height:24px;
  display:block;
  /* REMOVIDO: filter:brightness(0) invert(1); */
  /* Agora os SVGs aparecem com cor original (branco) */
}
.contato-item strong{
  display:block;
  color:var(--dourado);
  margin-bottom:4px;
  font-size:.9rem;
}
.contato-item a{
  color:var(--branco);
  text-decoration:none;
  transition:color .3s ease;
  font-size:.95rem;
}
.contato-item a:hover{
  color:var(--dourado);
}
.contato-form{
  background:var(--branco);
  padding:28px 22px;
  border-radius:10px;
  box-shadow:0 5px 20px rgba(0,0,0,.05);
}
.contato-form input,
.contato-form select,
.contato-form textarea{
  width:100%;
  padding:12px;
  margin-bottom:14px;
  border:2px solid var(--cinza-claro);
  border-radius:5px;
  font-family:'Montserrat',sans-serif;
  font-size:.95rem;
  transition:border-color .3s ease;
}
.contato-form input:focus,
.contato-form select:focus,
.contato-form textarea:focus{
  outline:none;
  border-color:var(--dourado);
}
.contato-form button{
  width:100%;
}

/* FOOTER */
.footer{
  background:var(--azul-marinho);
  color:var(--branco);
  padding:40px 0 24px;
}
.footer-content{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
  margin-bottom:28px;
}
/* CORREÇÃO LOGO FOOTER - PROPORCIONAL */
.footer-logo img{
  height:75px;
  width:auto;
  max-width:250px;
  object-fit:contain;
  margin-bottom:12px;
}
.footer-logo p{
  opacity:.7;
  line-height:1.5;
  font-size:.9rem;
}
.footer-links h4,
.footer-contact h4{
  color:var(--dourado);
  margin-bottom:10px;
  font-size:1rem;
}
.footer-links a{
  display:block;
  color:var(--branco);
  text-decoration:none;
  margin-bottom:6px;
  transition:color .3s ease;
  font-size:.9rem;
}
.footer-links a:hover{
  color:var(--dourado);
}
.footer-contact p{
  margin-bottom:6px;
  opacity:.8;
  font-size:.9rem;
}
.footer-contact a{
  color:var(--branco);
  text-decoration:none;
  transition:color .3s ease;
}
.footer-contact a:hover{
  color:var(--dourado);
}
.footer-bottom{
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.1);
  text-align:center;
  opacity:.7;
  font-size:.85rem;
}

/* COOKIE BANNER (GDPR) */
.cookie-banner{
  display:none;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#111;
  color:#fff;
  z-index:9999;
  font-size:.85rem;
  padding:15px 0;
  box-shadow:0 -2px 10px rgba(0,0,0,.3);
}
.cookie-banner .container{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.cookie-banner p{
  line-height:1.5;
}
.cookie-banner a{
  color:var(--dourado);
  text-decoration:underline;
}
.cookie-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.cookie-actions button{
  padding:8px 16px;
  border-radius:4px;
  border:none;
  cursor:pointer;
  font-size:.85rem;
  font-weight:600;
  transition:all .3s ease;
}
#cookieAccept{
  background:var(--dourado);
  color:#000;
}
#cookieAccept:hover{
  background:#c19a2e;
}
#cookieReject{
  background:#333;
  color:#fff;
}
#cookieReject:hover{
  background:#444;
}
#cookieManage{
  background:transparent;
  color:#fff;
  border:1px solid #fff;
}
#cookieManage:hover{
  background:#222;
}

/* DESKTOP (MIN-WIDTH 769px) */
/* ====================================
   VIDEO BACKGROUND HERO
   ==================================== */

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    pointer-events: none;
    display: block;
    min-width: 100%;
    min-height: 100%;
}

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

.hero-content {
    position: relative;
    z-index: 3;
}

.hero {
    position: relative;
    overflow: hidden;
}

/* Mobile: esconder vídeo */
@media (max-width: 768px) {
    .hero-video {
        display: none !important;
    }
    
    .hero {
        background-image: url('../images/hero-bg.jpg');
        background-size: cover;
        background-position: center;
    }
}
```

---

## 🔍 **O QUE ESTAVA FALTANDO:**

### **Propriedades críticas adicionadas:**

✅ `top: 0; left: 0;` - Forçar posição no canto  
✅ `object-position: center;` - Centralizar vídeo  
✅ `display: block;` - Forçar exibição  
✅ `min-width: 100%; min-height: 100%;` - Cobrir tela toda  
✅ `.hero { position: relative; overflow: hidden; }` - Container correto  
✅ `.hero-overlay { position: absolute; inset: 0; }` - Overlay completo

---

## 📋 **PASSO A PASSO:**

1. ✅ Abrir `style.css`
2. ✅ Procurar seção `/* VIDEO BACKGROUND HERO */`
3. ✅ **DELETAR** código antigo dessa seção
4. ✅ **COLAR** código novo acima
5. ✅ Salvar
6. ✅ Upload FTP
7. ✅ Limpar cache: `Ctrl+Shift+Delete`
8. ✅ Recarregar: `Ctrl+F5`

---

## 🎯 **RESULTADO ESPERADO:**

### **ANTES:**
```
┌──────────────────────────┐
│ [Vídeo] │   Texto →      │
│ metade  │                │
└──────────────────────────┘
```

### **DEPOIS:**
```
┌──────────────────────────┐
│  [Vídeo ocupando 100%]   │
│                          │
│   Texto centralizado     │
└──────────────────────────┘
@media (min-width:769px){
  h1{font-size:3.5rem}
  h2{font-size:2.5rem}
  h3{font-size:1.8rem}

  .header{padding:20px 0}
  .logo img{
    height:90px;
    max-width:300px; /* Maior no desktop */
  }
  .nav{display:flex}

  .hero{
    min-height:100vh;
    margin-top:80px;
  }
  .hero-subtitle{
    font-size:1.3rem;
    margin-bottom:2.5rem;
  }
  .hero-cta{
    flex-direction:row;
    gap:20px;
  }

  .sobre{padding:100px 0}
  .sobre-grid{
    grid-template-columns:1fr 1fr;
    gap:60px;
  }
  .sobre-texto p{
    font-size:1.05rem;
  }
  .credenciais{
    gap:40px;
    margin-top:3rem;
  }
  .credencial-item .numero{
    font-size:3rem;
  }

  .servicos{padding:100px 0}
  .servicos-grid{
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:50px;
  }
  .servico-card{
    padding:40px 30px;
  }

  .cases{padding:100px 0}
  .cases-grid{
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:50px;
  }
  .case-card img{
    height:250px;
  }
  .case-content{
    padding:25px;
  }
  .case-content-text{
    min-height:250px;
  }
  .depoimento{
    margin-top:60px;
    padding:50px;
  }

  .diferenciais{padding:100px 0}
  .diferenciais-grid{
    grid-template-columns:repeat(2,1fr);
    gap:40px;
    margin-top:50px;
  }
  .diferencial-item{
    padding:30px;
  }

  .contato{padding:100px 0}
  .contato-grid{
    grid-template-columns:1fr 1.5fr;
    gap:60px;
    margin-top:50px;
  }
  .contato-info{
    padding:40px;
  }
  .contato-form{
    padding:40px;
  }

  .footer{
    padding:60px 0 30px;
  }
  .footer-content{
    grid-template-columns:2fr 1fr 1fr;
    gap:40px;
    margin-bottom:40px;
  }
  .footer-logo img{
    height:75px;
    max-width:300px;
  }

  .cookie-banner{
    padding:20px 0;
  }
  .cookie-banner .container{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
}

/* PERFORMANCE: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ====================================
   CORREÇÃO CARDS DESKTOP - FORÇAR GRID
   ==================================== */

@media (min-width: 769px) {
    /* Serviços - 3 colunas */
    .servicos-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
        margin-top: 50px;
    }
    
    .servico-card {
        padding: 40px 30px;
    }
    
    /* Cases - 3 colunas */
    .cases-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
        margin-top: 50px;
    }
    
    .case-card img {
        height: 250px;
    }
    
    .case-content {
        padding: 25px;
    }
    
    .case-content-text {
        min-height: 250px;
    }
    
    /* Diferenciais - 2 colunas */
    .diferenciais-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px !important;
        margin-top: 50px;
    }
    
    .diferencial-item {
        padding: 30px;
    }
}

/* Tablets - Layout intermediário */
@media (min-width: 769px) and (max-width: 1024px) {
    .servicos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .cases-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
/* ====================================
   CORREÇÃO SEÇÃO ABOUT - FORÇAR 2 COLUNAS
   ==================================== */

@media (min-width: 769px) {
    /* Forçar layout 2 colunas: Imagem | Texto */
    .sobre-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 60px !important;
        align-items: center !important;
    }
    
    /* Limitar tamanho máximo da imagem */
    .sobre-imagem img {
        width: 100%;
        max-width: 550px !important;
        height: auto;
        object-fit: cover;
    }
    
    /* Garantir que texto ocupe espaço à direita */
    .sobre-texto {
        width: 100%;
    }
}

/* Tablets - Reduzir tamanho da imagem */
@media (min-width: 769px) and (max-width: 1024px) {
    .sobre-imagem img {
        max-width: 450px !important;
    }
    
    .sobre-grid {
        gap: 40px !important;
    }
}

/* Mobile - 1 coluna vertical */
@media (max-width: 768px) {
    .sobre-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    
    .sobre-imagem img {
        max-width: 100% !important;
    }
}
```

---

## 📥 **ARQUIVO PRONTO:**

**[correcao-about-final.css](computer:///mnt/user-data/outputs/correcao-about-final.css)**

---

## 📋 **PASSO A PASSO:**

1. ✅ Baixar: **correcao-about-final.css**
2. ✅ Abrir `style.css` no servidor
3. ✅ Ir para o **FINAL** (depois da linha 875)
4. ✅ **COLAR** o código do arquivo
5. ✅ Salvar
6. ✅ Upload via FTP
7. ✅ `Ctrl+Shift+Delete` (limpar cache)
8. ✅ `Ctrl+F5` (recarregar)

---

## 🎯 **RESULTADO ESPERADO:**

### **ANTES (Atual):**
```
┌─────────────────────────────────┐
│                                 │
│  [FOTO GIGANTE - 100% WIDTH]    │
│                                 │
├─────────────────────────────────┤
│ 27 Years Working Behind...      │
│ Texto do lado esquerdo          │
└─────────────────────────────────┘
```

### **DEPOIS (Correto):**
```
┌─────────────────────────────────┐
│                                 │
│  [FOTO]     │  27 Years Working │
│  Esquerda   │  Texto à direita  │
│  ~50%       │  ~50%             │
│             │  27+ | 90+ | FIFA │
│                                 │
└─────────────────────────────────┘