/* ===========================
   🎞️ Container do Slider (Desktop)
   =========================== */
.slider-container {
    position: relative;
    width: 100%;
    height: 70vh;
    overflow: hidden;
}

.slider {
    display: flex;
    width: 400%;             /* 4 imagens lado a lado */
    height: 100%;
    transition: transform 0.8s ease;
}

.slide {
    width: 25%;              /* Cada slide ocupa 25% do total (4 slides) */
    position: relative;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* Cobre a área mantendo proporção */
}

/* Botões de navegação do slider */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0);
    color: white;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 18px;
    z-index: 10;
    transition: all 0.3s ease;
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}

.prev:hover, .next:hover {
    background: rgba(0, 0, 0, 0); /* Hover verde nos botões */
}

/* ===========================
   🧠 Bloco de Texto e Logo no Slider
   =========================== */
.slider-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 5;
    background: rgba(0, 0, 0, 0.301);
    padding: 25px 30px;
    border-radius: 15px;
    backdrop-filter: blur(15px);      /* Suaviza o fundo com efeito de vidro */
    max-width: 75%;
    border: 2px solid rgba(117, 168, 73, 0.344);
}

.slider-logo img {
    max-width: 200px;
    margin-bottom: 6px;
}

/* Título principal */
.logo-text h1 {
    color: var(--green);
    font-size: 1.8em;
    margin-bottom: 12px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    line-height: 1.2;
}

.logo-text p {
    font-size: 1em;
    margin-bottom: 12px;
    line-height: 1.4;
    opacity: 0.95;
}

/* Lista de benefícios no slider */
.benefits-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 12px 0 15px 0;
    font-size: 0.85em;
}

.benefit-item-hero {
    background: rgba(117, 168, 73, 0.3);
    padding: 5px 10px;
    border-radius: 15px;
    border: 1px solid var(--green);
    font-size: 0.8em;
}

/* Botões abaixo do texto do slider */
.cta-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 15px;
}

.cta-btn {
    padding: 10px 18px;
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
    font-size: 0.85em;
}

/* Botão principal chamativo */
.cta-primary {
    background: linear-gradient(45deg, #ff6b35, #f7931e); /* Laranja vibrante */
    animation: glow 2s ease-in-out infinite alternate;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
}

/* Botão secundário */
.cta-secondary {
    background: var(--green);
    border: 2px solid white;
}

/* Efeito de hover nos botões */
.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0);
}

/* Animação de brilho no botão principal */
@keyframes glow {
    from { box-shadow: 0 0 10px rgba(255, 107, 53, 0.5); }
    to { box-shadow: 0 0 20px rgba(255, 107, 53, 0.8), 0 0 30px rgba(255, 107, 53, 0.6); }
}

/* ===========================
   ⚠️ Seção de Urgência (Conversão)
   =========================== */
.urgency-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%); /* Gradiente laranja de alta energia */
    color: white;
}

.urgency-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Texto maior à esquerda, oferta à direita */
    gap: 3rem;
    align-items: center;
}

/* Título e parágrafos da urgência */
.urgency-text h2 {
    font-size: 2.5em;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.14); /* Sombra leve para contraste */
}

.urgency-text p {
    font-size: 1.2em;
    margin-bottom: 1rem;
}

/* Lista de benefícios */
.benefits-urgency {
    list-style: none;
    padding: 0;
}

.benefits-urgency li {
    padding: 8px 0;
    font-size: 1.1em;
}
@media screen and (max-width: 768px) {
  .urgency-section {
    padding: 50px 20px;
  }

  .urgency-content {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  .urgency-text h2 {
    font-size: 1.8em;
    margin-bottom: 1rem;
  }

  .urgency-text p {
    font-size: 1.1em;
  }

  .benefits-urgency {
    text-align: left;
    padding-left: 0;
    margin-top: 1.5rem;
  }

  .benefits-urgency li {
    font-size: 1em;
    padding: 6px 0;
  }

  .price-box {
    margin-top: 2rem;
    padding: 1.5rem;
  }

  .price-box h3 {
    font-size: 1.3em;
  }

  .old-price {
    font-size: 1em;
  }

  .new-price {
    font-size: 2em;
  }

  .cta-btn-large {
    font-size: 0.95em;
    padding: 14px 20px;
  }

  .guarantee {
    font-size: 0.9em;
  }
}


/* ===========================
   🎁 Caixa de Oferta com Preço
   =========================== */
.price-box {
    background: white;
    color: var(--blue);          /* Texto azul para contraste */
    padding: 2rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.153); /* Sombra suave para destaque */
}

/* Título dentro da oferta */
.price-box h3 {
    color: var(--blue);
    margin-bottom: 1rem;
}

/* Preços: antigo e novo */
.price {
    margin: 1rem 0;
}

.old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 1.2em;
    margin-right: 10px;
}

.new-price {
    font-size: 2.5em;
    font-weight: bold;
    color: #ff6b35; /* Laranja chamativo */
}

/* Botão CTA grande */
.cta-btn-large {
    display: block;
    background: linear-gradient(45deg, #ff6b35, #f7931e); /* Igual ao botão principal do slider */
    color: white;
    padding: 18px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    margin: 20px 0;
    animation: glow 2s ease-in-out infinite alternate;
    text-transform: uppercase;
}

/* Texto de garantia abaixo do botão */
.guarantee {
    font-size: 0.9em;
    color: var(--green);
    font-weight: 600;
}

/* ===========================
   🧩 Seção de Serviços Comercial
   =========================== */
.servicos-comercial {
    padding: 80px 0;
    background: #f8f9fa; /* Fundo neutro para destacar os cards */
}

.servicos-comercial h2 {
    text-align: center;
    font-size: 2.5em;
    color: var(--blue); /* Título com azul institucional */
    margin-bottom: 3rem;
}

/* Grade de cards dos serviços */
.servicos-comercial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem; /* Espaçamento entre os cards */
}

/* Card individual de serviço */
.servico-comercial {
    background: white;
    padding: 2rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    border: 3px solid transparent; /* Prepara para borda colorida no destaque */
}

/* Efeito ao passar o mouse */
.servico-comercial:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* Destaque do serviço mais procurado */
.servico-comercial.featured {
    border-color: var(--green);
    transform: scale(1.05);
}

/* Faixa superior no card destaque */
.ribbon {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--green);
    color: white;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.8em;
    font-weight: bold;
}

/* Ícone de destaque no topo do card */
.servico-icon {
    font-size: 4em;
    margin-bottom: 1rem;
}

/* Título do serviço */
.servico-comercial h3 {
    color: var(--blue);
    margin-bottom: 1rem;
    font-size: 1.5em;
}

/* Selo de destaque dentro do card */
.servico-highlight {
    background: var(--green);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: bold;
    margin-bottom: 1rem;
    display: inline-block;
}

/* Descrição dos serviços */
.servico-comercial p {
    text-align: left;
    margin: 1rem 0;
    line-height: 1.8;
}

/* Preço exibido no card */
.servico-price {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--green);
    margin: 1rem 0;
}

/* Botão do serviço */
.btn-servico {
    background: var(--blue);
    color: white;
    padding: 15px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    transition: all 0.3s ease;
}

/* Hover no botão */
.btn-servico:hover {
    background: var(--green);
    transform: translateY(-2px);
}

/* ===========================
   🏢 Seção Sobre Nós
   =========================== */
#sobre {
    padding: 80px 0;           /* Espaçamento vertical amplo */
    background: #f8f9fa;       /* Fundo claro e neutro */
}

/* Container principal com layout em colunas */
.sobre-content {
    display: grid;
    grid-template-columns: 2fr 1fr;  /* 2/3 texto, 1/3 imagem */
    gap: 3rem;
    align-items: center;
}

/* ===========================
   📝 Texto do "Sobre Nós"
   =========================== */
.sobre-texto h2 {
    font-size: 2.5em;
    color: var(--blue);         /* Cor institucional */
    margin-bottom: 1rem;
}

/* Linha decorativa abaixo do título */
.underline {
    width: 80px;
    height: 4px;
    background: var(--green);  /* Reforça a identidade visual */
    border: none;
    margin: 20px 0;
}

/* Parágrafos do texto institucional */
.sobre-texto p {
    font-size: 1.1em;
    margin-bottom: 1rem;
    text-align: justify;       /* Texto alinhado — estilo editorial */
    line-height: 1.7;          /* Excelente legibilidade */
}

/* ===========================
   📸 Imagem ilustrativa ao lado do texto
   =========================== */
.sobre-img {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--blue);              /* Moldura azul institucional */
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Sombra sutil */
}

/* Logo ou imagem principal */
.sobre-img img {
    max-width: 100%;
    height: auto;
    filter: brightness(1.1); /* Leve brilho para compensar o fundo escuro */
}

@media screen and (max-width: 768px) {
  #sobre {
    padding: 50px 20px;
  }

  .sobre-content {
    grid-template-columns: 1fr; /* Empilha os elementos */
    text-align: center;
  }

  .sobre-texto h2 {
    font-size: 1.8em;
  }

  .sobre-texto p {
    font-size: 1em;
    text-align: justify;
    line-height: 1.6;
  }

  .underline {
    margin: 20px auto;
  }

  .sobre-img {
    margin-top: 30px;
    padding: 1.5rem;
  }

  .sobre-img img {
    max-width: 100%;
    height: auto;
  }
}

/* ===========================
   💼 Seção Institucional de Serviços
   =========================== */
.servicos-bg {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--blue) 0%, #1e3c72 100%);
    color: white; /* Contraste forte com fundo azul escuro */
}

/* Container com limite de largura */
.servicos-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Título centralizado */
.titulo-servicos {
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 1rem;
}

/* Subtítulo abaixo do título */
.subtitulo-servicos {
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 3rem;
    opacity: 0.9;
}

/* ===========================
   📋 Lista dos Serviços (em blocos)
   =========================== */
.servicos-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); /* Responsivo */
    gap: 2rem;
}

/* Cada serviço (bloco) */
.servico {
    background: rgba(255,255,255,0.1);       /* Fundo semi-transparente com efeito de profundidade */
    padding: 2rem;
    border-radius: 15px;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);             /* Efeito glassmorphism */
}

/* Efeito ao passar o mouse */
.servico:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.15);
}

/* ===========================
   🖼️ Ícone ilustrativo do serviço
   =========================== */
.icone img {
    width: 60px;
    height: 60px;
}

/* ===========================
   📄 Texto e link do serviço
   =========================== */
.servico-conteudo h3 {
    margin-bottom: 1rem;
}

.servico-conteudo h3 a {
    color: var(--green);
    text-decoration: none;
    font-size: 1.3em;
}

/* Hover no link do serviço */
.servico-conteudo h3 a:hover {
    text-decoration: underline;
}

/* ===========================
   📱 Seção Serviços - Mobile
   =========================== */
/* Responsive Design */
@media screen and (max-width: 768px) {
    /* ... (outras regras de responsividade que você já tinha) ... */

    .servicos-lista {
        grid-template-columns: 1fr; /* Faz com que os itens da lista de serviços ocupem uma coluna em telas menores */
    }

    .servico {
        min-width: auto; /* Permite que a largura mínima do serviço se ajuste automaticamente */
    }

    /* ... (outras regras de responsividade que você já tinha) ... */
}


/* ===========================
   🗞️ Container da Seção de Notícias
   =========================== */
.noticias-container {
    display: flex;
    max-width: 1200px;
    margin: 50px auto;
    padding: 40px 20px;
    gap: 30px;
    background: linear-gradient(135deg, #0f1a2a 0%, #1e3c72 100%);
    border-radius: 20px;
    flex-wrap: wrap;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

/* ===========================
   📜 Bloco da Linha do Tempo
   =========================== */
.noticias {
    flex: 1;
    position: relative;
    margin-right: 20px;
    width: 100%;
}

/* Linha vertical 
.noticias::before {
    content: "";
    position: absolute;
    left: 20px;
    margin-top: 100px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--green), #5a7c35);
}*/

/* Cada item de notícia */
.noticia {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    position: relative;
    padding-left: 50px; /* Espaço para a bolinha */
}

/* Bolinha da linha do tempo 
.noticia::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 10px;
    width: 16px;
    height: 16px;
    background: var(--green);
    border-radius: 50%;
    border: 3px solid var(--blue);
    box-shadow: 0 0 10px rgba(117, 168, 73, 0.5);
}*/

/* ===========================
   📄 Caixa de Conteúdo da Notícia
   =========================== */
.conteudo {
    background: rgba(44, 62, 80, 0.9);
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    transition: all 0.3s ease;
}

.conteudo:hover {
    transform: translateX(10px);
    background: rgba(44, 62, 80, 1);
}

/* Título com link */
.conteudo h3 {
    font-size: 17px;
    margin: 0;
    color: var(--green);
}

.conteudo h3 a {
    color: var(--green);
    text-decoration: none;
}

.conteudo h3 a:hover {
    text-decoration: underline;
}

/* Resumo da notícia */
.conteudo p {
    font-size: 16px;
    color: #CCCCCC;
    margin-top: 10px;
}

/* ===========================
   🖼️ Imagem lateral da seção
   =========================== */
.noticias-imagem {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    width: 100%;
}

.noticias-imagem img {
    max-width: 85%;
    border-radius: 15px;
    height: auto;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

/* Título da seção */
.noticias h2 {
    margin-top: 10px;
    font-size: 30px;
    color: white;
    margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
    .noticias-container {
        flex-direction: column; /* Empilha os itens verticalmente em telas menores */
        padding: 20px; /* Ajusta o espaçamento interno para telas menores */
        margin: 30px auto; /* Centraliza e ajusta margem no mobile */
    }

    .noticias {
        margin-right: 0; /* Remove a margem direita em telas menores */
        margin-bottom: 20px; /* Adiciona espaçamento entre as notícias e a imagem no mobile */
    }

    .noticias::before {
        left: 0; /* Alinha a linha do tempo à esquerda */
        margin-top: 50px; /* Ajusta a margem superior da linha do tempo */
    }

    .noticia {
        padding-left: 30px; /* Reduz o padding à esquerda para o conteúdo da notícia */
    }

    .noticia::before {
        left: 0; /* Ajusta a posição da bolinha da linha do tempo */
    }

    .noticias-imagem {
        margin-top: 20px; /* Ajusta a margem superior da imagem em telas menores */
        width: 100%; /* Faz com que a imagem ocupe 100% da largura disponível */
        justify-content: center; /* Centraliza a imagem no container */
    }

    .noticias-imagem img {
        max-width: 90%; /* Limita a largura máxima da imagem para não transbordar */
    }

    .noticias h2 {
        font-size: 26px; /* Reduz o tamanho da fonte do título principal */
        margin-top: 0; /* Remove margem superior extra */
    }
}

@media screen and (max-width: 480px) {
    .noticias-container {
        padding: 15px; /* Reduz ainda mais o padding em telas muito pequenas */
        margin: 20px auto;
    }

    .conteudo h3 {
        font-size: 15px; /* Reduz o tamanho da fonte do título da notícia */
    }

    .conteudo p {
        font-size: 13px; /* Reduz o tamanho da fonte do parágrafo da notícia */
    }

    .noticias-imagem img {
        max-width: 100%; /* Permite que a imagem ocupe toda a largura em telas muito pequenas */
    }
}

/* ===========================
   🙌 Seção de Depoimentos (Prova Social)
   =========================== */
#depoimentos {
    padding: 40px 0;
    background: #f8f9fa;
}

.titulo-depoimentos {
    text-align: center;
    font-size: 2.3em;
    color: var(--blue);
    margin-bottom: 3rem;
}

.depoimentos-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.depoimento-box {
    background: white;
    padding: 2rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.depoimento-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.foto-cliente {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 1rem;
    object-fit: cover;
    border: 4px solid var(--green);
}

.stars {
    color: #ffc107;
    font-size: 1.5em;
    margin-bottom: 1rem;
}

.depoimento-box strong:first-of-type {
    color: var(--blue);
    font-size: 1.2em;
    display: block;
    margin-bottom: 1rem;
}

.depoimento-box p {
    margin-bottom: 1rem;
    font-style: italic;
}

.depoimento-box strong:last-of-type {
    color: var(--green);
    font-size: 1.1em;
}

/* Adicione esta media query para telas menores */
@media screen and (max-width: 768px) {
    #depoimentos {
        padding: 20px 0;
    }
    
    .titulo-depoimentos {
        font-size: 1.8em;
        margin-bottom: 2rem;
    }

    .depoimentos-container {
        grid-template-columns: 1fr; /* Força os depoimentos a se empilharem */
        gap: 1.5rem;
        padding: 0 10px;
    }

    .depoimento-box {
        padding: 1.5rem;
    }
}

/* ===========================
   🐯 Seção "Tigre" – Força e Estratégia
   =========================== */
.tigre-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--blue) 0%, #1e3c72 100%);
    color: white;
}

.tigre-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: center;
}

.tigre-textos h2 {
    font-size: 2.5em;
    margin-bottom: 2rem;
}

.tigre-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    transition: all 0.3s ease;
}

.tigre-item:hover {
    background: rgba(255,255,255,0.15);
    transform: translateX(10px);
}

.tigre-numero {
    background: var(--green);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2em;
    flex-shrink: 0;
}

.tigre-item strong {
    color: var(--green);
    font-size: 1.2em;
    display: block;
    margin-bottom: 0.5rem;
}

.tigre-imagem img {
        width: 400px; /* Define a largura da imagem para 300 pixels */
    height: 800px; /* Define a altura da imagem para 200 pixels */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

@media screen and (max-width: 768px) {
    /* Ajustes gerais para telas de tablets e celulares */

    .tigre-section {
        padding: 60px 0; /* Ajusta o padding da seção em telas menores */
    }

    .tigre-content {
        grid-template-columns: 1fr; /* Muda o layout para uma única coluna */
        gap: 2rem; /* Reduz o espaçamento entre os itens empilhados */
        padding: 0 20px; /* Garante padding horizontal no container */
    }

    .tigre-textos h2 {
        font-size: 2em; /* Reduz o tamanho do título principal */
        margin-bottom: 1.5rem; /* Ajusta a margem inferior do título */
        text-align: center; /* Centraliza o título */
    }

    .tigre-item {
        flex-direction: column; /* Empilha o número e o texto verticalmente */
        align-items: center; /* Centraliza o conteúdo dentro do item */
        text-align: center; /* Centraliza o texto dentro do item */
        margin-bottom: 1.5rem; /* Reduz a margem inferior entre os itens */
        padding: 1rem; /* Ajusta o padding interno do item */
    }

    .tigre-numero {
        margin-bottom: 0.8rem; /* Adiciona espaçamento entre o número e o texto quando empilhados */
        width: 35px; /* Ajusta o tamanho da bolinha do número */
        height: 35px; /* Ajusta o tamanho da bolinha do número */
        font-size: 1.1em; /* Ajusta o tamanho da fonte do número */
    }

    .tigre-item strong {
        font-size: 1.1em; /* Reduz o tamanho da fonte do título do item */
    }

    .tigre-imagem {
        margin-top: 2rem; /* Adiciona uma margem superior para separar da parte de texto */
        display: flex; /* Garante que a imagem seja tratada como flex item */
        justify-content: center; /* Centraliza a imagem */
    }

    .tigre-imagem img {
        max-width: 80%; /* Reduz a largura máxima da imagem para caber melhor */
        height: auto; /* Mantém a proporção da imagem */
    }
}

@media screen and (max-width: 480px) {
    /* Ajustes específicos para telas de smartphones */

    .tigre-section {
        padding: 40px 0; /* Mais redução de padding para telas muito pequenas */
    }

    .tigre-content {
        gap: 1.5rem; /* Espaçamento menor em telas super compactas */
    }

    .tigre-textos h2 {
        font-size: 1.8em; /* Reduz ainda mais o título */
        margin-bottom: 1rem;
    }

    .tigre-item {
        padding: 0.8rem; /* Mais redução de padding interno */
        margin-bottom: 1rem;
    }

    .tigre-numero {
        width: 30px; /* Tamanho menor para a bolinha do número */
        height: 30px;
        font-size: 1em;
    }

    .tigre-item strong {
        font-size: 1em; /* Tamanho menor para o título do item */
    }

    .tigre-imagem img {
        max-width: 100%; /* Permite que a imagem ocupe 100% da largura em telas bem pequenas */
    }
}
/* ===========================
   ⭐ Motivos para Escolher a EP Contabilidade
   =========================== */
.motivos-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.motivos-section h2 {
    text-align: center;
    font-size: 2.5em;
    color: var(--blue);
    margin-bottom: 1rem;
}

.subtitulo {
    text-align: center;
    font-size: 1.2em;
    color: var(--gray);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.motivos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.motivo-item {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.motivo-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.motivo-item i {
    font-size: 3em;
    color: var(--green);
    margin-bottom: 1rem;
}

.motivo-item h3 {
    color: var(--blue);
    margin-bottom: 1rem;
}

/* ===========================
   📞 Seção de Contato
   =========================== */
#contato {
    padding: 80px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.contato-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: center;
}

/* Imagem do lado esquerdo */
.img-contato img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Bloco de informações */
.info-container {
    background: rgba(255,255,255,0.1);
    padding: 2rem;
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.info-titulo {
    font-size: 2em;
    margin-bottom: 2rem;
    text-align: center;
}

/* Itens individuais de contato */
.info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.info-item:hover {
    background: rgba(255,255,255,0.2);
}

/* Ícones dentro dos círculos */
.info-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-icon img {
    width: 25px;
    height: 25px;
}

/* Link do WhatsApp */
.cta-link {
    color: wheat;
    text-decoration: none;
    font-weight: 600;
}

.cta-link:hover {
    text-decoration: underline;
}

@media screen and (max-width: 768px) {
    /* Ajustes para telas de tablets e celulares */

    #contato {
        padding: 60px 0; /* Ajusta o padding da seção */
    }

    .contato-container {
        grid-template-columns: 1fr; /* Muda o layout para uma única coluna */
        gap: 2rem; /* Reduz o espaçamento entre os itens empilhados */
        padding: 0 20px; /* Adiciona padding horizontal */
        text-align: center; /* Centraliza o conteúdo */
    }

    .img-contato img {
        margin-bottom: 2rem; /* Adiciona espaço abaixo da imagem quando empilhada */
        max-width: 90%; /* Limita a largura da imagem */
    }

    .info-container {
        padding: 1.5rem; /* Ajusta o padding interno do container de informações */
    }

    .info-titulo {
        font-size: 1.8em; /* Reduz o tamanho da fonte do título das informações */
        margin-bottom: 1.5rem; /* Ajusta a margem inferior do título */
    }

    .info-item {
        flex-direction: column; /* Empilha ícone e texto do item */
        align-items: center; /* Centraliza o conteúdo */
        text-align: center; /* Centraliza o texto */
        margin-bottom: 1rem; /* Reduz o espaçamento entre os itens de informação */
        padding: 0.8rem; /* Reduz o padding interno do item de informação */
    }

    .info-icon {
        margin-bottom: 0.5rem; /* Espaçamento entre o ícone e o texto */
    }
}

@media screen and (max-width: 480px) {
    /* Ajustes específicos para telas de smartphones */

    #contato {
        padding: 40px 0; /* Mais redução de padding para telas muito pequenas */
    }

    .contato-container {
        gap: 1.5rem; /* Reduz ainda mais o espaçamento */
    }

    .info-titulo {
        font-size: 1.5em; /* Reduz ainda mais o título */
        margin-bottom: 1rem;
    }

    .info-item {
        padding: 0.6rem; /* Mais redução de padding interno */
    }

    .cta-link {
        font-size: 0.9em; /* Reduz o tamanho da fonte do link de CTA */
    }
}

/* ===========================
   🦶 Rodapé
   =========================== */
.rodape {
    background: var(--blue);
    color: white;
    padding: 2rem 0;
    text-align: center;
}

.rodape p {
    margin-bottom: 0.5rem;
}

.rodape img {
    vertical-align: middle;
    height: 20px;
    margin-left: 5px;
}

.rodape a {
    color: var(--green);
    text-decoration: none;
}

.rodape a:hover {
    text-decoration: underline;
}

/* ===========================
   💬 Botão Flutuante do WhatsApp
   =========================== */
.whatsapp-float {
    position: fixed;
    width: 70px;
    height: 70px;
    bottom: 20px;
    right: 20px;
    background: #25d366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8em;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 1000;
    animation: pulse 2s infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background: #128c7e;
}

/* Animação de pulsar */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ===========================
   📌 Barra Fixa Inferior de Contato
   =========================== */
.contact-bar-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(45deg, var(--green), #5a7c35);
    color: white;
    padding: 20px 10px;
    z-index: 900;
    display: none; /* Changed from 'none' to 'none' */
    min-height: 15%;
    
}
@media screen and (max-width: 768px) {
    /* ... existing mobile styles ... */


   .contact-bar-content {
    display: flex;
    flex-direction: column; /* Coloca os itens em coluna */
    align-items: center; /* Centraliza os itens horizontalmente */
    gap: 15px; /* Espaçamento entre o span e o div dos botões */
    flex-wrap: wrap; /* Pode remover se for apenas coluna */
}

    .contact-bar-content > div {
        display: flex;
        gap: 30px;
        justify-content: center;
        flex-wrap: nowrap;
        flex-direction: row-reverse;
}

.contact-bar-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
   flex-wrap: wrap;
}

.contact-bar-fixed.show {
    display: block;
    animation: slideUp 0.5s ease;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@media screen and (max-width: 768px) {
    /* ... outros estilos ... */
    /*.contact-bar-content span {
        font-size: 0.4em;  ou um valor em px, como 14px 
    }*/
}

@media (max-width: 768px) {
    .contact-bar-fixed {
        /* ... outras propriedades ... */
        padding: 15px 5px; /* Ajuste o padding da barra se necessário */
    }
    .contact-bar-fixed .contact-item {
        flex: 1 1 calc(50% - 10px); /* Tenta 50% menos a margem horizontal total */
        margin: 5px; /* Margem para separar os itens */
        /* Adicione um box-sizing, se não tiver globalmente */
        box-sizing: border-box;
    }
    .contact-bar-fixed .contact-item a {
        font-size: 0.85em; /* Reduza a fonte se o texto estiver apertado */
        padding: 5px 0; /* Ajuste o padding interno do link */
    }
}}