/*
 * site.css
 * CSS do site institucional AZ² Technology & Business.
 * Localização: /public_html/site/assets/css/site.css
 *
 * Arquivo independente — NÃO misturar com main.css (sistema interno).
 * Sem dependências de CDN. Fontes: IBM Plex Sans (arquivos locais).
 *
 * Paleta:
 *   #213644  Azul Marinho  — navbar, footer, títulos, destaques, botões primários
 *   #FFFFFF  Branco        — fundo principal de todas as seções
 *   #EDEDED  Cinza Claro   — seções alternadas e cards
 *   #7F7F7F  Cinza Médio   — textos secundários e bordas
 *   #000000  Preto         — usado raramente, só em contraste máximo
 */

/* ============================================================
   FONTES LOCAIS
   Arquivos em: /public_html/site/assets/fonts/
   Download: https://fonts.google.com/specimen/IBM+Plex+Sans
   ============================================================ */
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-Light.woff2') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-Medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================
   VARIÁVEIS
   ============================================================ */
:root {
    --azul:          #213644;
    --azul-hover:    #1a2c38;
    --azul-soft:     #2e4d60;
    --azul-bg:       #eef2f5;       /* azul muito claro para badges e destaques */
    --branco:        #FFFFFF;
    --cinza-fundo:   #EDEDED;
    --cinza-sec:     #F5F5F5;
    --cinza-texto:   #7F7F7F;
    --cinza-borda:   #D8D8D8;
    --preto:         #000000;
    --preto-suave:   #111827;

    --fonte:         'IBM Plex Sans', system-ui, sans-serif;
    --radius:        8px;
    --radius-lg:     14px;
    --transicao:     0.2s ease;
    --sombra:        0 2px 12px rgba(0,0,0,0.07);
    --sombra-md:     0 4px 20px rgba(0,0,0,0.10);
    --sombra-lg:     0 8px 32px rgba(0,0,0,0.13);

    --largura-max:   1160px;
    --padding-sec:   96px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size:    16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--fonte);
    color:       var(--preto-suave);
    background:  var(--branco);
    line-height: 1.6;
    overflow-x:  hidden;
}

img    { max-width: 100%; display: block; }
a      { text-decoration: none; color: inherit; }
ul     { list-style: none; }
button { cursor: pointer; border: none; font-family: inherit; }

/* Ancora de seção compensa navbar fixo */
.ancora-secao {
    display:    block;
    height:     72px;
    margin-top: -72px;
    visibility: hidden;
}

/* Container central */
.container {
    width:     100%;
    max-width: var(--largura-max);
    margin:    0 auto;
    padding:   0 24px;
}

/* ============================================================
   TIPOGRAFIA DO SITE
   ============================================================ */
.secao-tag {
    display:        inline-block;
    font-size:      0.7rem;
    font-weight:    700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--azul);
    background:     var(--azul-bg);
    padding:        4px 12px;
    border-radius:  20px;
    margin-bottom:  16px;
}

.secao-titulo {
    font-size:      2.2rem;
    font-weight:    700;
    line-height:    1.15;
    letter-spacing: -0.025em;
    color:          var(--azul);
}

.secao-subtitulo {
    font-size:   1rem;
    color:       var(--cinza-texto);
    max-width:   560px;
    margin-top:  12px;
    line-height: 1.7;
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn-site {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    padding:       13px 28px;
    border-radius: var(--radius);
    font-size:     0.9rem;
    font-weight:   600;
    transition:    all var(--transicao);
    cursor:        pointer;
    border:        2px solid transparent;
    font-family:   var(--fonte);
    white-space:   nowrap;
    line-height:   1;
}

.btn-site--primario {
    background:   var(--azul);
    color:        var(--branco);
    border-color: var(--azul);
}
.btn-site--primario:hover {
    background:   var(--azul-hover);
    border-color: var(--azul-hover);
    transform:    translateY(-1px);
    box-shadow:   var(--sombra-md);
}

.btn-site--secundario {
    background:   transparent;
    color:        var(--azul);
    border-color: var(--azul);
}
.btn-site--secundario:hover {
    background: var(--azul);
    color:      var(--branco);
}

.btn-site--outline-cinza {
    background:   transparent;
    color:        var(--cinza-texto);
    border-color: var(--cinza-borda);
}
.btn-site--outline-cinza:hover {
    border-color: var(--azul);
    color:        var(--azul);
}

.btn-site--whatsapp {
    background:   #25D366;
    color:        var(--branco);
    border-color: #25D366;
}
.btn-site--whatsapp:hover {
    background:   #1ebe5d;
    border-color: #1ebe5d;
    transform:    translateY(-1px);
    box-shadow:   0 4px 16px rgba(37,211,102,0.3);
}

/* ============================================================
   NAVBAR — fundo #213644, fixo no topo
   ============================================================ */
.navbar {
    position:    fixed;
    top: 0; left: 0; right: 0;
    z-index:     1000;
    height:      72px;
    background:  var(--azul);
    display:     flex;
    align-items: center;
    transition:  box-shadow var(--transicao);
}

.navbar.scrolled {
    box-shadow: 0 2px 24px rgba(0,0,0,0.22);
}

.navbar__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    max-width:       var(--largura-max);
    margin:          0 auto;
    padding:         0 24px;
}

.navbar__logo img {
    height:  48px;
    filter:  brightness(0) invert(1);
    display: block;
}

.navbar__menu {
    display:     flex;
    align-items: center;
    gap:         2px;
}

.navbar__link {
    padding:        8px 14px;
    font-size:      0.875rem;
    font-weight:    500;
    color:          rgba(255,255,255,0.78);
    border-radius:  var(--radius);
    transition:     all var(--transicao);
    white-space:    nowrap;
}
.navbar__link:hover {
    color:      var(--branco);
    background: rgba(255,255,255,0.09);
}

.navbar__acoes {
    display:     flex;
    align-items: center;
    gap:         10px;
}

/* Botão "Área do Cliente" na navbar */
.navbar__btn-cliente {
    padding:       8px 18px;
    border-radius: var(--radius);
    font-size:     0.85rem;
    font-weight:   600;
    color:         var(--azul);
    background:    var(--branco);
    transition:    all var(--transicao);
    white-space:   nowrap;
}
.navbar__btn-cliente:hover {
    background:  rgba(255,255,255,0.88);
    transform:   translateY(-1px);
    box-shadow:  var(--sombra);
}

/* Hamburguer (mobile) */
.navbar__toggle {
    display:         none;
    width:           40px;
    height:          40px;
    align-items:     center;
    justify-content: center;
    border-radius:   var(--radius);
    color:           var(--branco);
    background:      rgba(255,255,255,0.1);
    font-size:       1.3rem;
    cursor:          pointer;
    border:          none;
}

/* Menu mobile */
.navbar__mobile {
    display:        none;
    position:       fixed;
    top:            72px; left: 0; right: 0;
    background:     var(--azul-hover);
    padding:        16px 24px 24px;
    z-index:        999;
    box-shadow:     var(--sombra-lg);
    flex-direction: column;
    gap:            4px;
}
.navbar__mobile.aberto { display: flex; }

.navbar__mobile .navbar__link {
    display:   block;
    padding:   12px 16px;
    width:     100%;
    font-size: 0.95rem;
    color:     rgba(255,255,255,0.85);
}
.navbar__mobile .navbar__link:hover {
    background: rgba(255,255,255,0.08);
    color:      var(--branco);
}

.navbar__mobile .navbar__acoes {
    margin-top:     14px;
    padding-top:    14px;
    border-top:     1px solid rgba(255,255,255,0.1);
    flex-direction: column;
    align-items:    stretch;
}
.navbar__mobile .btn-site,
.navbar__mobile .navbar__btn-cliente {
    justify-content: center;
    text-align:      center;
}

/* ============================================================
   HERO — fundo branco
   ============================================================ */
.hero {
    background:  var(--branco);
    padding:     152px 0 88px;   /* 72px navbar + espaço generoso */
    border-bottom: 1px solid var(--cinza-borda);
}

.hero__inner {
    display:      grid;
    grid-template-columns: 1fr 400px;
    gap:          64px;
    align-items:  center;
}

.hero__tag {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--azul);
    background:     var(--azul-bg);
    padding:        5px 14px;
    border-radius:  20px;
    margin-bottom:  20px;
}

.hero__titulo {
    font-size:      3rem;
    font-weight:    700;
    line-height:    1.1;
    letter-spacing: -0.03em;
    color:          var(--azul);
    margin-bottom:  20px;
}

.hero__titulo span {
    color:       var(--cinza-texto);
    font-weight: 300;
}

.hero__descricao {
    font-size:     1rem;
    color:         var(--cinza-texto);
    max-width:     480px;
    line-height:   1.75;
    margin-bottom: 36px;
}

.hero__acoes {
    display:     flex;
    align-items: center;
    gap:         14px;
    flex-wrap:   wrap;
}

/* Card lateral do hero */
.hero__card {
    background:    var(--branco);
    border:        1px solid var(--cinza-borda);
    border-radius: var(--radius-lg);
    padding:       32px;
    box-shadow:    var(--sombra-md);
}

.hero__card-titulo {
    font-size:      0.68rem;
    font-weight:    700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--cinza-texto);
    margin-bottom:  20px;
    padding-bottom: 14px;
    border-bottom:  1px solid var(--cinza-fundo);
}

.hero__stat {
    display:       flex;
    align-items:   center;
    gap:           14px;
    padding:       14px 0;
    border-bottom: 1px solid var(--cinza-fundo);
}
.hero__stat:last-child  { border-bottom: none; padding-bottom: 0; }
.hero__stat:first-child { padding-top: 0; }

.hero__stat-icone {
    width:           44px;
    height:          44px;
    border-radius:   var(--radius);
    background:      var(--azul-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.2rem;
    flex-shrink:     0;
}

.hero__stat-valor {
    font-size:   1.5rem;
    font-weight: 700;
    color:       var(--azul);
    line-height: 1;
}

.hero__stat-label {
    font-size:  0.75rem;
    color:      var(--cinza-texto);
    margin-top: 3px;
}

/* ============================================================
   SEÇÃO: SOBRE
   ============================================================ */
.sobre {
    padding:    var(--padding-sec) 0;
    background: var(--cinza-sec);
}

.sobre__inner {
    display:     grid;
    grid-template-columns: 1fr 1fr;
    gap:         80px;
    align-items: center;
}

.sobre__lista {
    display:        flex;
    flex-direction: column;
    gap:            22px;
    margin-top:     32px;
}

.sobre__item {
    display:     flex;
    align-items: flex-start;
    gap:         14px;
}

.sobre__item-icone {
    width:           42px;
    height:          42px;
    border-radius:   var(--radius);
    background:      var(--azul-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.1rem;
    flex-shrink:     0;
    margin-top:      2px;
}

.sobre__item-titulo {
    font-size:     0.9rem;
    font-weight:   600;
    color:         var(--azul);
    margin-bottom: 4px;
}

.sobre__item-texto {
    font-size:  0.85rem;
    color:      var(--cinza-texto);
    line-height: 1.65;
}

/* Grid de números */
.sobre__numeros {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   2px;
    background:            var(--cinza-borda);
    border-radius:         var(--radius-lg);
    overflow:              hidden;
    box-shadow:            var(--sombra);
}

.sobre__numero {
    background: var(--branco);
    padding:    36px 28px;
    text-align: center;
}

.sobre__numero-valor {
    font-size:      2.8rem;
    font-weight:    700;
    color:          var(--azul);
    letter-spacing: -0.03em;
    line-height:    1;
}

.sobre__numero-label {
    font-size:   0.78rem;
    color:       var(--cinza-texto);
    margin-top:  6px;
    font-weight: 500;
}

/* ============================================================
   SEÇÃO: SERVIÇOS
   ============================================================ */
.servicos {
    padding:    var(--padding-sec) 0;
    background: var(--branco);
}

.servicos__cabecalho {
    text-align:    center;
    margin-bottom: 56px;
}
.servicos__cabecalho .secao-subtitulo { margin: 12px auto 0; }

.servicos__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   24px;
}

.servico-card {
    background:    var(--branco);
    border:        1px solid var(--cinza-borda);
    border-radius: var(--radius-lg);
    padding:       36px 28px;
    transition:    all var(--transicao);
    position:      relative;
    overflow:      hidden;
}

.servico-card::after {
    content:    '';
    position:   absolute;
    top: 0; left: 0; right: 0;
    height:     3px;
    background: var(--azul);
    transform:  scaleX(0);
    transform-origin: left;
    transition: transform var(--transicao);
}

.servico-card:hover {
    transform:    translateY(-4px);
    box-shadow:   var(--sombra-lg);
    border-color: transparent;
}
.servico-card:hover::after { transform: scaleX(1); }

.servico-card__icone {
    width:           52px;
    height:          52px;
    border-radius:   var(--radius);
    background:      var(--azul-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.5rem;
    margin-bottom:   20px;
}

.servico-card__titulo {
    font-size:     1rem;
    font-weight:   700;
    color:         var(--azul);
    margin-bottom: 10px;
}

.servico-card__texto {
    font-size:  0.875rem;
    color:      var(--cinza-texto);
    line-height: 1.65;
}

.servico-card__lista {
    margin-top: 16px;
    display:    flex;
    flex-direction: column;
    gap:        8px;
}

.servico-card__lista li {
    font-size:   0.82rem;
    color:       var(--cinza-texto);
    padding-left: 14px;
    position:    relative;
}
.servico-card__lista li::before {
    content:    '—';
    position:   absolute;
    left:       0;
    color:      var(--azul);
    font-size:  0.7rem;
}

/* ============================================================
   SEÇÃO: DIFERENCIAIS
   ============================================================ */
.diferenciais {
    padding:    var(--padding-sec) 0;
    background: var(--cinza-sec);
}

.diferenciais__cabecalho {
    text-align:    center;
    margin-bottom: 56px;
}
.diferenciais__cabecalho .secao-subtitulo { margin: 12px auto 0; }

.diferenciais__grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   20px;
}

.diferencial-card {
    background:    var(--branco);
    border:        1px solid var(--cinza-borda);
    border-radius: var(--radius-lg);
    padding:       36px 24px;
    text-align:    center;
    transition:    all var(--transicao);
}

.diferencial-card:hover {
    border-color: var(--azul);
    box-shadow:   var(--sombra-md);
    transform:    translateY(-3px);
}

.diferencial-card__icone {
    width:           60px;
    height:          60px;
    border-radius:   50%;
    background:      var(--azul-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.6rem;
    margin:          0 auto 18px;
    transition:      background var(--transicao);
}

.diferencial-card:hover .diferencial-card__icone {
    background: var(--azul);
}

.diferencial-card__titulo {
    font-size:     0.95rem;
    font-weight:   700;
    color:         var(--azul);
    margin-bottom: 10px;
}

.diferencial-card__texto {
    font-size:  0.82rem;
    color:      var(--cinza-texto);
    line-height: 1.65;
}

/* ============================================================
   SEÇÃO: GRATUITOS (teaser)
   ============================================================ */
.gratuitos {
    padding:    var(--padding-sec) 0;
    background: var(--branco);
}

.gratuitos__inner {
    display:     grid;
    grid-template-columns: 1fr 1fr;
    gap:         80px;
    align-items: center;
}

.gratuitos__lista {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    margin:         28px 0 36px;
}

.gratuitos__item {
    display:     flex;
    align-items: center;
    gap:         12px;
    font-size:   0.9rem;
    color:       var(--preto-suave);
}

.gratuitos__item-check {
    width:           24px;
    height:          24px;
    border-radius:   50%;
    background:      var(--azul-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.65rem;
    font-weight:     700;
    color:           var(--azul);
    flex-shrink:     0;
}

.gratuitos__cards {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.gratuito-card {
    background:    var(--branco);
    border:        1px solid var(--cinza-borda);
    border-radius: var(--radius);
    padding:       18px 20px;
    display:       flex;
    align-items:   center;
    gap:           16px;
    transition:    all var(--transicao);
    cursor:        pointer;
    text-decoration: none;
    color:         inherit;
}

.gratuito-card:hover {
    border-color: var(--azul);
    box-shadow:   var(--sombra);
    transform:    translateX(4px);
}

.gratuito-card__icone {
    width:           44px;
    height:          44px;
    border-radius:   var(--radius);
    background:      var(--azul-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.3rem;
    flex-shrink:     0;
}

.gratuito-card__nome {
    font-size:   0.875rem;
    font-weight: 600;
    color:       var(--azul);
}

.gratuito-card__desc {
    font-size:  0.75rem;
    color:      var(--cinza-texto);
    margin-top: 2px;
}

.gratuito-card__seta {
    margin-left: auto;
    color:       var(--cinza-texto);
    font-size:   1rem;
    flex-shrink: 0;
    transition:  transform var(--transicao);
}
.gratuito-card:hover .gratuito-card__seta { transform: translateX(3px); }

/* ============================================================
   SEÇÃO: DEPOIMENTOS
   ============================================================ */
.depoimentos {
    padding:    var(--padding-sec) 0;
    background: var(--cinza-sec);
}

.depoimentos__cabecalho {
    text-align:    center;
    margin-bottom: 56px;
}

.depoimentos__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   24px;
}

.depoimento-card {
    background:    var(--branco);
    border:        1px solid var(--cinza-borda);
    border-radius: var(--radius-lg);
    padding:       32px 28px;
    position:      relative;
}

.depoimento-card__aspas {
    font-size:   3.5rem;
    line-height: 1;
    color:       var(--azul);
    opacity:     0.12;
    font-family: Georgia, serif;
    position:    absolute;
    top:         14px;
    left:        22px;
    user-select: none;
}

.depoimento-card__texto {
    font-size:     0.9rem;
    color:         var(--preto-suave);
    line-height:   1.75;
    margin-top:    28px;
    margin-bottom: 24px;
    position:      relative;
}

.depoimento-card__autor {
    display:     flex;
    align-items: center;
    gap:         12px;
    border-top:  1px solid var(--cinza-fundo);
    padding-top: 20px;
}

.depoimento-card__avatar {
    width:           42px;
    height:          42px;
    border-radius:   50%;
    background:      var(--azul);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.85rem;
    font-weight:     700;
    color:           var(--branco);
    flex-shrink:     0;
}

.depoimento-card__nome {
    font-size:   0.875rem;
    font-weight: 600;
    color:       var(--azul);
}

.depoimento-card__empresa {
    font-size:  0.75rem;
    color:      var(--cinza-texto);
    margin-top: 2px;
}

/* ============================================================
   SEÇÃO: FAQ
   ============================================================ */
.faq {
    padding:    var(--padding-sec) 0;
    background: var(--branco);
}

.faq__inner {
    display:     grid;
    grid-template-columns: 360px 1fr;
    gap:         80px;
    align-items: start;
}

.faq__lista {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.faq__item {
    border:        1px solid var(--cinza-borda);
    border-radius: var(--radius);
    overflow:      hidden;
}

.faq__pergunta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         16px 20px;
    font-size:       0.9rem;
    font-weight:     600;
    color:           var(--preto-suave);
    cursor:          pointer;
    background:      var(--branco);
    transition:      all var(--transicao);
    gap:             12px;
    user-select:     none;
    border:          none;
    width:           100%;
    text-align:      left;
}

.faq__pergunta:hover { background: var(--cinza-sec); }

.faq__item.aberto .faq__pergunta {
    background:    var(--azul-bg);
    color:         var(--azul);
    border-bottom: 1px solid var(--cinza-borda);
}

.faq__seta {
    font-size:   0.7rem;
    flex-shrink: 0;
    color:       var(--cinza-texto);
    transition:  transform var(--transicao);
}
.faq__item.aberto .faq__seta {
    transform: rotate(180deg);
    color:     var(--azul);
}

.faq__resposta {
    max-height: 0;
    overflow:   hidden;
    transition: max-height 0.3s ease;
}
.faq__item.aberto .faq__resposta { max-height: 320px; }

.faq__resposta-inner {
    padding:    16px 20px 20px;
    font-size:  0.875rem;
    color:      var(--cinza-texto);
    line-height: 1.75;
}

/* ============================================================
   SEÇÃO: CONTATO
   ============================================================ */
.contato {
    padding:    var(--padding-sec) 0;
    background: var(--cinza-sec);
}

.contato__inner {
    display:     grid;
    grid-template-columns: 1fr 1fr;
    gap:         80px;
    align-items: start;
}

.contato__info {
    display:        flex;
    flex-direction: column;
    gap:            18px;
    margin-top:     28px;
}

.contato__info-item {
    display:     flex;
    align-items: flex-start;
    gap:         14px;
}

.contato__info-icone {
    width:           44px;
    height:          44px;
    border-radius:   var(--radius);
    background:      var(--azul-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.1rem;
    flex-shrink:     0;
}

.contato__info-titulo {
    font-size:      0.7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--cinza-texto);
    margin-bottom:  3px;
}

.contato__info-valor {
    font-size:   0.9rem;
    font-weight: 600;
    color:       var(--azul);
}

.contato__whatsapp-btn {
    margin-top:    24px;
    display:       inline-flex;
    align-items:   center;
    gap:           10px;
    padding:       13px 24px;
    background:    #25D366;
    color:         var(--branco);
    border-radius: var(--radius);
    font-size:     0.9rem;
    font-weight:   600;
    transition:    all var(--transicao);
    border:        none;
    cursor:        pointer;
}
.contato__whatsapp-btn:hover {
    background:  #1ebe5d;
    transform:   translateY(-1px);
    box-shadow:  0 4px 16px rgba(37,211,102,0.3);
}

/* Formulário de contato */
.form-contato {
    background:    var(--branco);
    border:        1px solid var(--cinza-borda);
    border-radius: var(--radius-lg);
    padding:       36px;
    box-shadow:    var(--sombra);
    display:       flex;
    flex-direction: column;
    gap:           16px;
}

.form-contato__titulo {
    font-size:     1rem;
    font-weight:   700;
    color:         var(--azul);
    margin-bottom: 4px;
}

.form-contato__grupo { display: flex; flex-direction: column; gap: 6px; }

.form-contato__label {
    font-size:   0.78rem;
    font-weight: 600;
    color:       var(--preto-suave);
}

.form-contato__input,
.form-contato__textarea,
.form-contato__select {
    padding:       10px 14px;
    border:        1px solid var(--cinza-borda);
    border-radius: var(--radius);
    font-size:     0.875rem;
    font-family:   var(--fonte);
    color:         var(--preto-suave);
    background:    var(--branco);
    transition:    border-color var(--transicao), box-shadow var(--transicao);
    outline:       none;
    width:         100%;
}
.form-contato__input:focus,
.form-contato__textarea:focus,
.form-contato__select:focus {
    border-color: var(--azul);
    box-shadow:   0 0 0 3px rgba(33,54,68,0.09);
}

.form-contato__textarea {
    resize:     vertical;
    min-height: 120px;
}

.form-contato__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.form-contato__feedback {
    font-size:     0.82rem;
    padding:       10px 14px;
    border-radius: var(--radius);
    display:       none;
}
.form-contato__feedback.sucesso {
    display:    block;
    background: #e8f5ee;
    color:      #2e7d52;
}
.form-contato__feedback.erro {
    display:    block;
    background: #fdecea;
    color:      #c0392b;
}

/* ============================================================
   BANNER CTA FINAL
   ============================================================ */
.cta {
    padding:    80px 0;
    background: var(--azul);
    text-align: center;
}

.cta__titulo {
    font-size:      2.2rem;
    font-weight:    700;
    color:          var(--branco);
    letter-spacing: -0.02em;
    margin-bottom:  12px;
}

.cta__subtitulo {
    font-size:     1rem;
    color:         rgba(255,255,255,0.65);
    margin-bottom: 36px;
}

.cta__acoes {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             16px;
    flex-wrap:       wrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    background: var(--preto-suave);
    color:      rgba(255,255,255,0.5);
    padding:    64px 0 32px;
}

.footer__inner {
    display:               grid;
    grid-template-columns: 220px 1fr 1fr 1fr;
    gap:                   48px;
    padding-bottom:        48px;
    border-bottom:         1px solid rgba(255,255,255,0.08);
    margin-bottom:         28px;
}

.footer__logo img {
    height:        30px;
    filter:        brightness(0) invert(1);
    margin-bottom: 14px;
}

.footer__descricao {
    font-size:   0.82rem;
    line-height: 1.7;
}

.footer__col-titulo {
    font-size:      0.7rem;
    font-weight:    700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.85);
    margin-bottom:  16px;
}

.footer__col-lista { display: flex; flex-direction: column; gap: 9px; }

.footer__col-link {
    font-size:  0.82rem;
    transition: color var(--transicao);
}
.footer__col-link:hover { color: var(--branco); }

.footer__rodape {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       0.75rem;
}

/* ============================================================
   BOTÃO WHATSAPP FLUTUANTE
   ============================================================ */
.whatsapp-float {
    position:        fixed;
    bottom:          28px;
    right:           28px;
    width:           56px;
    height:          56px;
    border-radius:   50%;
    background:      #25D366;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 4px 20px rgba(37,211,102,0.45);
    z-index:         900;
    transition:      all var(--transicao);
    color:           var(--branco);
}
.whatsapp-float:hover {
    transform:  scale(1.1);
    box-shadow: 0 6px 28px rgba(37,211,102,0.6);
}
.whatsapp-float::before {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: 50%;
    background:    #25D366;
    animation:     pulso 2.5s ease-out infinite;
    z-index:       -1;
}
@keyframes pulso {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* ============================================================
   ANIMAÇÕES DE ENTRADA
   ============================================================ */
.animar-entrada {
    opacity:    0;
    transform:  translateY(22px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.animar-entrada.visivel { opacity: 1; transform: translateY(0); }

/* ============================================================
   RESPONSIVIDADE
   ============================================================ */
@media (max-width: 1024px) {
    .hero__inner          { grid-template-columns: 1fr; }
    .hero__card           { display: none; }
    .sobre__inner         { grid-template-columns: 1fr; gap: 48px; }
    .servicos__grid       { grid-template-columns: 1fr 1fr; }
    .diferenciais__grid   { grid-template-columns: 1fr 1fr; }
    .gratuitos__inner     { grid-template-columns: 1fr; gap: 48px; }
    .faq__inner           { grid-template-columns: 1fr; gap: 40px; }
    .contato__inner       { grid-template-columns: 1fr; gap: 48px; }
    .depoimentos__grid    { grid-template-columns: 1fr 1fr; }
    .footer__inner        { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 768px) {
    :root { --padding-sec: 64px; }
    .navbar__menu, .navbar__acoes { display: none; }
    .navbar__toggle { display: flex; }
    .hero { padding: 120px 0 64px; }
    .hero__titulo { font-size: 2.2rem; }
    .servicos__grid    { grid-template-columns: 1fr; }
    .depoimentos__grid { grid-template-columns: 1fr; }
    .diferenciais__grid { grid-template-columns: 1fr 1fr; }
    .form-contato__linha { grid-template-columns: 1fr; }
    .footer__inner  { grid-template-columns: 1fr; }
    .footer__rodape { flex-direction: column; gap: 8px; text-align: center; }
    .cta__titulo    { font-size: 1.8rem; }
}

@media (max-width: 480px) {
    .hero__titulo       { font-size: 1.8rem; }
    .hero__acoes        { flex-direction: column; align-items: stretch; }
    .btn-site           { justify-content: center; }
    .diferenciais__grid { grid-template-columns: 1fr; }
    .sobre__numeros     { grid-template-columns: 1fr; }
    .cta__titulo        { font-size: 1.5rem; }
}