/* Styles for A W Tech - generated */
:root{
  --bg:#071018; --card:#0f1720; --muted: rgba(255,255,255,0.75); --accent:#0b84ff; --glass: rgba(255,255,255,0.03); --radius:12px; --gap:16px; --container:92%; --max-width:1200px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box} html,body{height:100%} body{margin:0; background: linear-gradient(180deg,var(--bg), #041017 120%); color: #e8eef6; -webkit-font-smoothing:antialiased; line-height:1.45;}
.header{position:fixed; top:0; left:0; right:0; z-index:80; backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(4,8,12,0.55), rgba(4,8,12,0.3)); border-bottom: 1px solid rgba(255,255,255,0.02);}
.wrap{width:var(--container); max-width:var(--max-width); margin:0 auto; display:flex; align-items:center; gap:12px; padding:12px 0;}
.logo{height:48px; display:block}
.nav{margin-left:auto; display:flex; gap:12px; align-items:center}
.nav a{color:var(--muted); text-decoration:none; font-weight:600; font-size:0.95rem; padding:8px 10px; border-radius:8px;}
.nav a:hover{background:var(--glass); color:white}
.mobile-btn{margin-left:auto; background:none; border:0; font-size:24px; color:var(--muted); display:block}
.mobile-menu{width:100%; display:flex; flex-direction:column; gap:8px; padding:12px var(--container); background: linear-gradient(180deg, rgba(4,8,12,0.6), rgba(4,8,12,0.4)); border-top: 1px solid rgba(255,255,255,0.02);}
.mobile-menu a{padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--muted)}
.mobile-menu a.wh{background:transparent; border:1px solid rgba(255,255,255,0.06); color:white; padding:10px 14px; text-align:center}

.hero {
  position: relative;
  min-height: 75vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 72px;
  background: none; /* remove background direto */
  overflow: hidden;
}

/* fundo da hero — imagem ou logo de fundo */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/fundo-awtech.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1; /* ajuste conforme preferir */
  filter: brightness(0.9);
  z-index: 1;
}

/* overlay escuro sobre fundo — mas abaixo do conteúdo */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 2;
}

/* conteúdo da hero — sempre visível por cima */
.hero-inner {
  position: relative;
  z-index: 3;
  text-align: center;
}

/* Conteúdo */
.hero-inner {
    position: relative;
    z-index: 3;
    text-align: center;
    animation: fadeUp .9s ease forwards;
    opacity: 0.5;
    transform: translateY(20px);
}

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

.hero h1 {
    font-size: 3.6rem;
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.hero .lead {
    font-size: 1.3rem;
    opacity: 0.8;
    margin-bottom: 24px;
}

/* Mobile */
@media (max-width: 720px) {
    .hero {
        min-height: 65vh;
    }
    .hero::before {
        background-size: 600%;
        opacity: 0.9;
    }
    .hero h1 {
        font-size: 2.4rem;
    }
    .hero .lead {
        font-size: 1rem;
    }
}
.lead{color:var(--muted); margin:6px 0 18px}
.btn{display:inline-block; background:linear-gradient(180deg,var(--accent), #0565d6); color:white; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:700; box-shadow: 0 6px 18px rgba(11,132,255,0.12);}
.container{width:var(--container); max-width:var(--max-width); margin:0 auto; padding:34px 0}
h2{font-size:1.6rem; margin:0 0 8px}
.sub {
    color: var(--muted);
    margin-bottom: 18px;
    text-align: center;   /* ← CENTRALIZA */
}
.grid{display:grid; grid-template-columns: 1fr; gap:14px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12)); border-radius:calc(var(--radius) - 2px); padding:18px; box-shadow: 0 6px 20px rgba(2,6,10,0.6); border: 1px solid rgba(255,255,255,0.03); text-align:center;}
.card img{width:100%; height:220px; object-fit:cover; border-radius:8px; margin-bottom:12px}
.card h3{margin:6px 0 8px; font-size:1.1rem}
.card p{color:var(--muted); font-size:0.95rem}
.bullets{list-style:none; padding:0; display:flex; gap:12px; flex-wrap:wrap}
.bullets li{background:rgba(255,255,255,0.03); padding:8px 12px; border-radius:8px; color:var(--muted)}
.contact-row{display:flex; flex-direction:column; gap:12px}
.form{display:flex; flex-direction:column; gap:10px}
.form input, .form textarea{padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color: #fff;}
.footer{padding:18px 0; border-top:1px solid rgba(255,255,255,0.02); text-align:center; color:var(--muted)}

.hidden{opacity:0; transform: translateY(10px); transition: all 600ms cubic-bezier(.2,.9,.2,1)}
.show{opacity:1; transform: translateY(0); transition: all 600ms cubic-bezier(.2,.9,.2,1)}
.whats-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 120;
    background: #25D366;
    border-radius: 50%;
    padding: 15px;
    font-size: 22px;
    color: white;
    text-decoration: none;
    box-shadow: 0 0 18px rgba(37, 211, 102, 0.8);
    animation: pulse 3.5s infinite ease-in-out;
}

@keyframes pulse {
    0% { box-shadow: 0 0 12px rgba(37,211,102,0.7); }
    50% { box-shadow: 0 0 25px rgba(37,211,102,1); }
    100% { box-shadow: 0 0 12px rgba(37,211,102,0.7); }
}
@media(min-width:720px){
  .grid{grid-template-columns: repeat(3,1fr)}
  .card img{height:200px}
  .mobile-btn{display:none}
  .nav{display:flex}
  .mobile-menu{display:none !important}
  .hero-inner{padding:80px 0}
}
@media(min-width:1100px){
  .hero{min-height:78vh}
  .hero-inner{padding:120px 0}
  .hero h1{font-size:3.8rem}
  .card img{height:240px}
}
/* --- CARDS PEQUENOS DE MARCAS --- */
.grid-brands {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
    justify-items: center; /* centraliza cada card */
}

.container h2 {
    text-align: center; /* centraliza o título */
}

.card-brand {
    width: 160px;     /* TAMANHO FIXO — todos ficam iguais */
    height: 120px;    /* proporção uniforme */
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.20));
    border-radius: 12px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.05);
    text-align: center;
    display: flex;              /* centraliza melhor */
    justify-content: center;
    align-items: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    overflow: hidden;           /* evita logos ultrapassarem o limite */
}


.card-brand img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* garante proporção */
    max-width: 120px;      /* controla padronização */
    max-height: 70px;
    filter: brightness(0.95);
}
.card {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.05);
    text-align: center;
    transition: all .35s ease;
    transform: translateY(0);
}

.card:hover {
    transform: translateY(-6px);
    border-color: rgba(0,120,255,0.4);
    box-shadow: 0 8px 25px rgba(0,60,120,0.35);
}
@media(min-width:720px){
    .grid-brands {
        grid-template-columns: repeat(2, 200px);
        justify-content: center;
    }

    .card-brand img {
        width: 60%;
    }
}

.nav a {
    transition: .3s ease;
}
.nav a:hover {
    color: white;
    letter-spacing: 0.5px;
}

.btn {
    transition: .3s ease;
}
.btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(11,132,255,0.3);
}
section {
    position: relative;
}

section::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,120,255,0.6), transparent);
    opacity: 0.4;
}
.footer {
    padding: 30px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    text-align: center;
    color: var(--muted);
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(6px);
}
.footer p {
    margin: 6px 0;
    opacity: 0.8;
}

/* garantir que o conteúdo fique por cima da logo */
.hero-inner {
    position: relative;
    z-index: 3;
}


@media (max-width: 720px) {
    .hero::before {
        background-size: 600px;  /* TAMANHO PERFEITO */
        opacity: 1;
        background-position: center;
        filter: brightness(1.05);
    }

    .hero-inner {
        text-align: center;
        padding-top: 80px;
    }

    .hero h1 {
        font-size: 2.4rem;
    }

    .hero .lead {
        font-size: 1rem;
    }
}





/* Conteúdo acima da logo */
.hero-inner {
  z-index: 2 !important;
}

/* DEBUG VISUAL: borda temporária para ver onde o ::before está */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(255,255,255,0.03);
  pointer-events: none;
  z-index: 5;
}

.social-round {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
    flex-wrap: wrap;
}

/* Botões menores */
.social-round a {
    width: 40px;     /* antes era 55px */
    height: 40px;    /* antes era 55px */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
    padding: 0;
    transition: 0.25s;
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
}

/* Ícones SVG menores */
.social-round svg {
    width: 20px;   /* antes era 28px */
    height: 20px;
}

/* Instagram gradiente oficial */
.social-round .instagram {
    background: radial-gradient(circle at 30% 30%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 100%);
}

/* Facebook */
.social-round .facebook {
    background: #1877F2;
}

/* WhatsApp */
.social-round .whatsapp {
    background: #25D366;
}

/* E-mail */
.social-round .email {
    background: #444;
}

/* Hover */
.social-round a:hover {
    transform: scale(1.12);
    box-shadow: 0 0 10px rgba(0,120,255,0.5);
}
.page-hero {
    margin-top: 80px;
    padding: 60px 20px;
    text-align: center;
    background: linear-gradient(180deg, #0b1530, #06101c);
    color: white;
}

.page-hero h1 {
    font-size: 2.6rem;
    margin-bottom: 10px;
}

.page-hero p {
    opacity: 0.8;
}
.video-section h2 {
    text-align: center;
}

.video-section .sub {
    text-align: center;
    opacity: 0.8;
    margin-bottom: 18px;
}

.video-box {
    width: 100%;
    max-width: 700px;  /* diminui o tamanho do quadro */
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.video-box iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
}
.hero {
    position: relative;
    overflow: hidden;