.banner-imagem h3 {
    font-weight: bolder;
    font-size: 15px;
    color: #e1fdab;
    margin-left: 1px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, .7);
}
#modal-link-whatsapp {
    text-align: center;
    margin-top: 24px;
}
#modal-titulo-pacote {
    text-align: center;
}
/* ========================================================================
   ESTILOS PARA A EQUIPE
   ======================================================================== */
.equipe-container {
    padding: 40px 15px;
    max-width: 1200px;
    margin: 0 auto;
}

.membro-equipe {
    display: flex;
    flex-direction: column; /* Começa empilhado no mobile */
    align-items: center;
    text-align: center;
    margin-bottom: 40px;
    
    /* A rotação é definida no HTML para cada um */
    transform: rotate(var(--rotation)); 
    transition: transform 0.3s ease;
}

/* Efeito de hover mais sutil, apenas endireita o quadro */
.membro-equipe:hover {
    transform: rotate(0deg) scale(1.03);
    z-index: 10;
}

.avatar-container {
    flex-shrink: 0;
    padding: 15px; /* Espessura da moldura interna */
    background: #fdfdfd;
    border: 1px solid #d1d1d1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.2);
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}
.avatar-container img {
    display: block;
    border: 1px solid #ccc;
   
}

.info-container h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 24px;
    color: #c4161c; /* Vermelho SKY */
    font-weight: bold;
}
.info-container {
    margin-left: 10px;
        margin-right: 10px;
}
.info-container p {
    color: #333;
    line-height: 1.7;
    font-size: 16px;
}
/* Estilo para a seção de conclusão da página de equipe */
.equipe-conclusao {
    text-align: center;
    padding: 50px 20px;
    background-color: #f5f5f5; /* Um fundo suave para diferenciar */
    border-radius: 8px;
    margin-top: 40px;
}

.equipe-conclusao h2 {
    font-weight: bold;
    color: #333;
    margin-top: 0;
}

.equipe-conclusao p {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1em;
}

.equipe-conclusao .btn {
    margin-top: 20px;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
}

/* Responsividade para alinhar lado a lado em telas maiores */
@media (min-width: 1080px) {
    .membro-equipe.esquerda .avatar-container:hover {
    transform: translate(10%) scale(1.4);
}
.membro-equipe.direita .avatar-container:hover {
    transform: translate(-10%) scale(1.4);
}
    .membro-equipe {
        flex-direction: row;
        text-align: left;
        margin-bottom: 60px;
    }

    .membro-equipe.direita {
        flex-direction: row-reverse;
        text-align: right;
    }
}

/* ========================================================================
   ESTILOS PARA A PÁGINA GUIA DE CANAIS
   ======================================================================== */

.categoria-de-canal {
    margin-bottom: 40px;
}

.categoria-titulo {
    font-size: 28px;
    font-weight: bold;
    color: #c4161c;
    text-transform: capitalize;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.lista-de-canais-guia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 15px;
}

.canal-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #e9e9e9;
}

.canal-info-principal {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaço entre ícone e nome */
}

.canal-icone i {
    transform: scale(1.5); /* Aumenta um pouco o tamanho do ícone */
    display: block;
}

.canal-nome {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.canal-numeracao {
    display: flex;
    gap: 10px;
    font-size: 14px;
    text-align: right;
}

.canal-numero {
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    min-width: 60px; /* Largura mínima para os blocos de número */
}

.canal-numero.sd {
    background-color: #e0e0e0;
    color: #555;
}

.canal-numero.hd {
    background-color: #0073e6;
    color: #fff;
}

.canal-numero.streaming {
    background-color: #c4161c;
    color: #fff;
}

.content-seo-tax {
    /* Garante um respiro acima e abaixo do texto */
    padding-top: 30px;
    padding-bottom: 30px;
}

.content-seo-tax h1,
.content-seo-tax h2,
.content-seo-tax h3 {
    /* Estilos para os títulos */
    color: #333; /* Ou a cor principal do seu tema */
    font-weight: 700; /* Negrito */
    margin-bottom: 15px; /* Espaço abaixo de cada título */
}

.content-seo-tax p {
    /* Estilos para os parágrafos */
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.content-seo-tax ul {
    /* Estilos para as listas */
    margin-bottom: 20px;
}

.content-seo-tax ul li {
    /* Estilos para os itens da lista */
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
}
/* ============================================= */
/* CSS PARA O BANNER DO TÉO (VERSÃO RESPONSIVA) */
/* ============================================= */

/* Container principal - nosso 'palco' para posicionamento */
.banner-teo-direita {
    width: 100%;
    height: 300px; /* Altura para desktop */
    position: relative; /* ESSENCIAL para posicionar os filhos */
    overflow: hidden;
}

/* --- ÁREAS INTOCÁVEIS (COMO VOCÊ PEDIU) --- */

.banner-teo-direita .banner-economize__logo {
        position: absolute;
    top: 1rem;
    right: 1.5rem;
    left: unset;
    z-index: 0;
}

.banner-teo-direita .banner-imagem {
    position: absolute;
    left: 0;
    bottom: -2px;
    z-index: 6; /* Garante que a imagem fique atrás do conteúdo se necessário */
}
/* --- BLOCO DE CONTEÚDO (POSICIONA O GRUPO TODO) --- */
.banner-teo-direita .banner-conteudo {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 43%; /* Você pode ajustar a posição do bloco todo aqui */
    width: clamp(280px, 35vw, 450px);
    transform: translateY(-50%);
    text-align: left;
}

/* --- O CONTAINER DO TEXTO E DA TROMBA (A ÂNCORA) --- */
.banner-conteudo .highlight-wrapper {
  position: relative;     /* <<< A MÁGICA. CRIA A ÂNCORA PARA A TROMBA */
  display: inline-block;  /* Faz o container ter o tamanho exato do texto */
}

/* --- O TEXTO EM SI (SEM MUDANÇAS DRÁSTICAS) --- */
.banner-conteudo .highlight {
    color: white;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.1;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

/* --- A TROMBA (AGORA POSICIONADA CORRETAMENTE) --- */
.tromba {
   position: absolute;
    z-index: -1;
    right: -93px;
    top: -44px;
    transform: rotate(-30deg);
    filter: drop-shadow(0 10px 4px rgb(0 0 0 / 27%)) brightness(1.2) contrast(1.1);
}


/* --- O PARÁGRAFO (SEM MUDANÇAS) --- */
.banner-conteudo p {
    color: #fff900;
    font-variant: small-caps;
    font-size: clamp(1.5rem, 1.5vw, 2.2rem);
    font-weight: 900;
    line-height: 1.1;
}
.antena {
    position: absolute;
    right: 40px;
    bottom: 0;
    z-index: 2;
}
/* --- O BOTÃO (AGORA PERFEITAMENTE CENTRALIZADO) --- */
.banner-teo-direita .abrir-btn {
    position: absolute;
    z-index: 7;
    bottom: -5px;
    text-align: right;
    padding-right: 9px;
    left: 55%;
    width: 198px;
}

/* --- ESTILOS DOS TEXTOS (SEM ALTERAÇÃO NA LÓGICA) --- */
.banner-imagem h4 {
    font-weight: 900;
    font-style: italic;
    text-align: center;
    color: #fff900;
    font-size: 2.2rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.banner-imagem h3 {
    color: #e1fdab;
    margin-left: 1px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}
@keyframes tremor {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(1px, -1px);
    }
    50% {
        transform: translate(-1px, 1px);
    }
    75% {
        transform: translate(1px, 1px);
    }
    100% {
        transform: translate(0, 0);
    }
}
.texto-tremor span {
    display: inline-block; /* Necessário para aplicar o transform */
    animation-name: tremor;
    font-weight: 900;
    font-size: 1.5rem;
    animation-duration: 0.5s; /* Duração do tremor */
    animation-iteration-count: infinite; /* Repete infinitamente */
    animation-direction: alternate; /* Vai e volta para um efeito mais suave */
    /* O animation-delay é gerado pelo JavaScript para ser aleatório */
}

@media (max-width: 769px){
    .antena {
    right: 12px;
}
.banner-dots {
    display:none !important;
}
.banner-conteudo p {
    display: none;
}
.banner-teo-direita .abrir-btn {
    bottom: -9px;
    left: 23%;
}
.banner-teo-direita .banner-conteudo {
    top: 35%;
    left: 88px;
}
.banner-imagem h4 {
    position: absolute;
    top: -105px;
    left: 31px;
}
.banner-imagem h3 {
    position: absolute;
    top: -80px;
    left: 2px;
}
.tromba {
   display: none;
}
}
@media (max-width: 456px){
.antena {
    top:0;
    z-index:0;
    opacity: 70%;
}
.banner-teo-direita .banner-economize__logo {
    display: none;
}    
}

/* ===================================================== */
/* | CSS OTIMIZADO PARA PÁGINA COM 3 COLUNAS           | */
/* ===================================================== */
input.btn.btn-primary.btn-lg.pull-right.btn-red {
    color: #fff;
    background-color: #337ab7;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
    border: none;
}
.pagina-com-tres-colunas {
    display: grid;
    /* Define 3 colunas: laterais com largura máxima de 280px, centro flexível */
    grid-template-columns: minmax(auto, 280px) 1fr minmax(auto, 280px);
    gap: 25px; /* Espaço entre as colunas */
    align-items: flex-start;
    padding: 30px 0;
}

/* --- Colunas Laterais (Esquerda e Direita) --- */
.pagina-com-tres-colunas .coluna-lateral-planos {
    display: grid;
    grid-template-columns: 1fr; /* Uma coluna para os cards dentro da lateral */
    gap: 20px;
}
.pagina-com-tres-colunas .pacote.is-compact {
    margin: 0px -22px 0px -7px;
    max-width: clamp(157px, 40vw, 238px);
}

.pagina-com-tres-colunas .titulo-coluna-lateral {
    font-size: clamp(12px, 3vw, 18px);
    font-weight: 700;
    color: #444;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
    margin: 0 0 10px 0;
}

/* --- Coluna Central (Conteúdo) --- */
.pagina-com-tres-colunas .coluna-conteudo-principal {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 30px 35px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.pagina-com-tres-colunas .coluna-conteudo-principal .main-sky-logo {
    display: block;
    max-width: 120px;
    filter: none;
    margin-bottom: 25px;
}

/* --- Estilos dos Cards (herdará do seu CSS global, mas garantimos o básico) --- */
.pagina-com-tres-colunas .pacote-container {
    width: 100%;
}

/* --- Responsivo --- */
@media (max-width: 900px) {
   .pagina-com-tres-colunas {
        /* Em telas menores, vira UMA coluna só */
        grid-template-columns: 1fr;
    }

    /* Empilhamos na ordem: Conteúdo, depois as duas colunas de planos */
   .pagina-com-tres-colunas .coluna-conteudo-principal { order: 1; }
   .pagina-com-tres-colunas .coluna-lateral-planos { order: 2; margin-top: 40px; }

    .pagina-com-tres-colunas {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
}


/* * ======================================== 
 * CSS FINAL CORRIGIDO 
 * ======================================== 
 */
 .faq-controls {
     text-align: center;
     margin: 10px;
}
 .mascote-container.mascote-faq-sky {
    position: relative;
    bottom: 45px;
    margin-top: 67px;
    margin-left: 7px;
    margin-bottom: -45px;
    justify-items: center;
}
.balao-fala.faq {
    bottom: calc(100% + -2px);
    background-color: #d9d9d9b5;
    justify-self: anchor-center;
    color: #333;
    border-radius: 10px;
    padding: 5px 25px 0 25px;
    text-align: center;
    /* REMOVIDO: white-space: nowrap; */ 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
    z-index: 19;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.balao-fala.faq .frase {
    font-size: 1.7vh;
    color: #000000;
    font-weight: normal;
}

@media (max-width: 768px){
   .faq-main-title-wrapper {
    
    flex-direction: column;
}
    
}

 /* =================================================================
    Efeito de fade-in para imagens com lazy load
   ================================================================= */
.lazy-image {
    display: block; /* Garante que a <picture> ocupe espaço como um bloco */
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.lazy-image.is-loaded {
    opacity: 1;
}
 
/* =================================================================
   ARQUITETURA FINAL COM A CENTRALIZAÇÃO CORRETA
   ================================================================= */

    #global-package-carousel {
        perspective: 2000px;
        overflow: hidden; 
    }

    #pacote-carousel-container {
        position: relative;
    }

    /* O CONTAINER DE FORA COMANDA O TAMANHO E A FORMA */
    #pacote-carousel-container .pacote-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transition: transform 0.6s ease, opacity 0.6s ease, height 0.5s ease;
        opacity: 0;
        width: 222px; 
    }

    /* O CARD DE DENTRO SÓ OBEDECE */
    #pacote-carousel-container .pacote {
        width: 100%;
        height: 100%;
        box-shadow: inset 0px 46px 31px 39px rgb(0 0 0 / 93%), 0px 0px 0px 2px rgb(255 255 255);
        display: flex;
        flex-direction: column;
    }

    /* POSIÇÃO DO CARD ATIVO */
    #pacote-carousel-container .pacote-container.is-active {
        opacity: 1;
        z-index: 10;
        transform: translate(-50%, -50%) scale(1.14); 
    }
    
    /* POSIÇÃO DO CARD ANTERIOR (COM AFASTAMENTO AUMENTADO) */
    #pacote-carousel-container .pacote-container.is-prev {
        opacity: 0.7;
        z-index: 5;
        /* ✨ MEXEMOS AQUI: aumentamos de -90% para -115% ✨ */
        transform: translate(-50%, -50%) translateX(-115%) scale(0.9) rotateY(50deg);
    }

    /* POSIÇÃO DO CARD PRÓXIMO (COM AFASTAMENTO AUMENTADO) */
    #pacote-carousel-container .pacote-container.is-next {
        opacity: 0.7;
        z-index: 5;
        /* ✨ MEXEMOS AQUI: aumentamos de 90% para 115% ✨ */
        transform: translate(-50%, -50%) translateX(115%) scale(0.9) rotateY(-50deg);
    }

/* ======================================== 
   CARROSSEL GLOBAL E ANIMAÇÃO DE FLASH
 * ======================================== */
#global-package-carousel {
    
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display:none;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow: hidden; /* Garante que o flash não "vaze" */

    /* SEU BACKGROUND RESTAURADO */
    background-color: #080808;
    background-image: url(/wp-content/themes/generatepress_child/assets/imgs/skysvg.svg);
    background-blend-mode: color-burn;
    background-repeat: round;
    background-size: 38% 30%;
}

/* ✨ NOVO: ANIMAÇÃO DE FLASH APLICADA DIRETAMENTE NO CARROSSEL ✨ */
#global-package-carousel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    /* O gradiente do flash */
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
    /* A animação */
    animation: flash-overlay-performant 10s linear infinite;
    z-index: 0; /* Acima do background, mas abaixo do conteúdo */
    pointer-events: none; /* Impede que o flash bloqueie cliques no carrossel */
}

#global-package-carousel.is-active {
    opacity: 1;
    visibility: visible;
}

/* ======================================== 
   ANIMAÇÕES E ESTILOS 3D
 * ======================================== */
#pacote-carousel-container {
    width: 100%;
    /* max-width: 500px;  <-- REMOVIDO PARA CORRIGIR A LARGURA */
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1500px;
    transition: opacity 0.2s ease-in-out;
}

#pacote-carousel-container .pacote-container {
    transform-style: preserve-3d;
    transition: transform 0.6s ease-in-out, opacity 0.5s ease-in-out;
}

.slide-out-left {
    transform: translateX(-150%) rotateY(-70deg) !important;
    opacity: 0 !important;
}
.slide-in-from-right {
    transform: translateX(150%) rotateY(70deg) !important;
    opacity: 0 !important;
}
.slide-out-right {
    transform: translateX(150%) rotateY(70deg) !important;
    opacity: 0 !important;
}
.slide-in-from-left {
    transform: translateX(-150%) rotateY(-70deg) !important;
    opacity: 0 !important;
}

/* ======================================== 
   CONTROLES DO CARROSSEL
 * ======================================== */
.global-package-nav-controls button {
    font-size: 2em;
    color: white;
    background: none;
    z-index: 2;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.global-package-nav-controls .prev-package-btn {
    left: 20px;
}

.global-package-nav-controls .next-package-btn {
    right: 20px;
}

#global-package-carousel .fechar-btn {
        position: absolute;
    top: 10px;
    right: 3px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 35px;
    height: 35px;
    border-radius: 33%;
    display: flex
;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1002;
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
}

#global-package-carousel .fechar-btn:hover {
    opacity: 1;
}

/* ======================================== 
 * RESTANTE DOS ESTILOS (SEM ALTERAÇÃO)
 * ======================================== */
.category-content {
    font-family: arial;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin: 10px 10px;
}

.pacote-container {
    flex-basis: calc(50% - 15px) !important;
    position: relative;
    z-index: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.pacote {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 6px 8px 7px -2px rgb(0 0 0 / 88%);
    overflow: hidden;
    margin: 0;
    padding: 0;
    cursor: default;
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
}
.pacote.is-compact {
    margin: -6px -14px 0 -15px;
    max-width: clamp(219px, 13vw, 446px);
}

@keyframes flash-overlay-performant {
    0% { transform: translateX(-200%); }
    50% { transform: translateX(300%); }
    100% { transform: translateX(-200%); }
}

body.pacote-aberto {
    overflow: hidden;
}

.botoes-expandidos .botao-card { 
	color: #fff; 
	background-color: #f0ad4e; 
	border-color: #eea236; 
	font-size: 10px; 
	border-radius: 7px; 
	cursor: pointer; 
	background-image: none; 
	margin: 1px; 
	margin-bottom: 9px; 
	border: 4px solid transparent; 
	transition: 0.3s ease all;
} 
.botoes-expandidos .botao-card:hover { 
	transform: scale(1.1); 
	transition: 0.3s ease all;
	color: black;
	font-weight: 100;
} 
.botoes-expandidos .botao-card:before {
  background-color: transparent;
}
.botoes-expandidos .botao-card:active {
  transform: scale(1);
}
/* Estilos base para ambos os botões */

.ecom-btn {
  align-items: center;
    justify-content: center;
    width: 98%;
    height: 30px;
    border: none;
    background-color: #7b877a; 
    border-radius: 5px;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    margin: 4px 0px 9px 3px;
    padding: 0;
    box-sizing: border-box;
  display: inline-block;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease all;
    z-index: 1;
}

.ecom-btn .icon {
  background: white;
    margin-left: 3px;
    margin-top: -3px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    width: 38px;
    border-radius: 0.7em;
    box-shadow: 0.1em 0.1em 0.6em 0.2em #7b52b9;
    transition: all 0.3s;
}

.ecom-btn:hover .icon {
  width: calc(100% - 0.6em);
}

.ecom-btn .icon img {
  width: 30px;
  height: 30px;
  transition: transform 0.3s;
  filter: none;
}

.ecom-btn:hover .icon img {
  transform: translateX(0.1em);
}

.ecom-btn:active .icon {
  transform: scale(0.95);
}

.abrir-btn {
  align-items: center;
    justify-content: center;
    width: 98%;
    height: 30px;
    border: none;
    background-color: #7b877a; 
    border-radius: 5px;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    margin: 4px 0px 9px 3px;
    padding: 0;
    box-sizing: border-box;
  display: inline-block;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease all;
    z-index: 1;
}
.abrir-btn .icon {
    background: #9ca59b;
    margin-left: 3px;
    margin-top: -3px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    width: 38px;
    border-radius: 0.7em;
    box-shadow: inset 2px 2px 3px 0px #000000;
    transition: all 0.7s;
}

.abrir-btn:hover .icon {
  width: calc(100% - 0.6em);
}

.abrir-btn .icon svg {
  width: 30px;
  height: 30px;
  transition: transform 0.3s;
  filter: brightness(0);
}

.abrir-btn:hover .icon svg {
  transform: translateX(0.1em);
}

.abrir-btn:active .icon {
  transform: scale(0.95);
}

.assine-on-icon {
    width: 24px;
    height: 19px;
    filter: invert(1) grayscale(3) brightness(2.5);
    vertical-align: middle;
}
.floating-whatsapp-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
.botoes-compactos span {
    margin: 0px 0px 0 30px;
    font-size: 3.2vw;
    color: #060606;
    font-style: italic;
}
.botao-card {
    align-items: center;
    justify-content: center;
    background-color: #f0ad4e;
    width: 98%;
    height: 30px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    margin: 2px 0 0 3px;
    padding: 0;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease all;
    z-index: 1;
}
.botao-card .icon {
    background: #edc181;
    margin-left: 3px;
    margin-top: -3px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    width: 38px;
    border-radius: 0.7em;
    box-shadow: inset 2px 2px 3px 0px #000000;
    transition: all 0.7s;
}

.botao-card:hover .icon {
  width: calc(100% - 0.6em);
}

.botao-card .icon svg {
  width: 21px;
    height: 22px;
    margin-bottom: -3px;
    transition: transform 0.3s;
    filter: brightness(0);
}

.botao-card:hover .icon svg {
  transform: translateX(0.1em);
}

.botao-card:active .icon {
  transform: scale(0.95);
}
.saiba-mais-icon
{
    width: 27px;
    height: 27px;
    filter: invert(1) grayscale(0) brightness(16.5);
    vertical-align: middle;
}
.saibamais-card{ 
	background-color: #337ab7; 
	border-color: #2e6da4; 
	font-size: 10px; 
	color: white;
	border-radius: 7px; 
	cursor: pointer; 
	background-image: none; 
	margin: 1px; 
	border: 4px solid transparent; 
	transition: 0.3s ease all;
} 

.saibamais-card:hover {
  transform: scale(1.1);
}
.whats-card{ 
	color: #fff; 
	background-color: #5cb85c; 
	border-color: #4cae4c; 
	border-radius: 7px; 
	font-size: 10px; 
	cursor: pointer; 
	background-image: none; 
	margin: 1px; 
	border: 4px solid transparent;
	transition: 0.3s ease all;
} 

.whats-card:hover{
  transform: scale(1.1);
}

.pacote .compact-info { 
	background-color: #cd201f; 
	color: #cd201f; 
	display: flex; 
	flex-direction: column; 
	transition: all 0.3s ease-in-out; 
} 
.pacote h4 { 
	margin-top: 10px; 
	margin-left: 5px; 
	color: #ffffff; 
	text-decoration: none; 
	font-weight: bold; 
	font-size: 16px; 
	text-align: left; 
} 
.pacote .compact-price-text { 
	color: #ffffff; 
	margin: 0px 0px 5px 16px; 
	font-size: 18px; 
	font-weight: bold; 
	text-align: left; 
} 
.pacote .expandable-content { 
	display: none; 
} 
.pacote .botoes-expandidos { 
	display: none; 
} 

.card-toggle:checked ~ .pacote .thumbnail { 
	background-color: #fff; 
} 
.card-toggle:checked ~ .pacote .compact-info { 
	display: none;
} 
.card-toggle:checked ~ .pacote .expandable-content { 
	display: block; 
} 
.card-toggle:checked ~ .pacote .caption { 
	display: block; 
	margin: 3px 0; 
	padding: 5px; 
	background-color: #0b61a3; 
	transition: background-color 0.5s ease-in-out; 
} 
.card-toggle:checked ~ .pacote h3 { 
	display: block; 
	font-size: 1.5rem; 
	margin-top: 0px; 
	margin-bottom: -8px; 
	text-align: center; 
	color: white; 
} 
.card-toggle:checked ~ .pacote h4 { 
	color: #ffffff; 
	text-decoration: none; 
	font-weight: bold; 
	font-size: 16px; 
	text-align: center; 
} 
.card-toggle:checked ~ .pacote .pacote-detalhes { 
	list-style: none; 
	margin: auto 0 0 0; 
	padding: 0px 0px 0px 0px; 
	display: flex; 
	justify-content: space-around; 
} 
.card-toggle:checked ~ .pacote .pacote-detalhes li { 
	width: 33.33%; 
	font-size: 9px; 
	border: 1px solid rgba(255, 255, 255, .2); 
	padding: 5px; 
	font-style: italic; 
	color: white; 
} 
.card-toggle:checked ~ .pacote .preco.is-expanded-price { 
	background-color: #d90f23; 
	margin-bottom: 8px; 
	color: #fff; 
	border-radius: 0 0 8px 8px; 
} 
.card-toggle:checked ~ .pacote .botoes-expandidos { 
	display: flex; 
	flex-direction: column; 
	margin: -12px; 
	padding: 5px; 
} 
.card-toggle:checked ~ .pacote .botoes-expandidos .btn { 
	margin-bottom: 5px; 
} 
.card-toggle:checked ~ .pacote .abrir-btn { 
	display: none; 
} 
.card-toggle:checked ~ .pacote .fechar-btn { 
	display: block; 
	color: #fff; 
	background-color: #7a5827c4; 
	border-color: #5c4525; 
	font-size: 10px; 
	border-radius: 7px; 
	cursor: pointer; 
	background-image: none; 
	margin-top: 1px; 
	margin-bottom: 10px; 
	border: 4px solid transparent; 
} 
.preco-slider {  
	position: relative; 
	overflow: hidden; 
	width: 100%; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	transition: height 0.4s ease-in-out; 
	padding-bottom: 20px; 
	box-sizing: border-box; 
	} 
.preco-slider .swiper-slide {  
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center; 
	text-align: center; 
	opacity: 0; 
	visibility: hidden; 
	transition: opacity 0.5s ease-in-out, visibility 0s 0.5s; 
	padding: 10px; box-sizing: border-box;  
	 
} 
.preco-slider .swiper-slide.is-active {  
	opacity: 1; 
	visibility: visible; 
	z-index: 2; 
	transition: opacity 0.5s ease-in-out; 
	} 
.preco-slider .swiper-pagination { 
	position: absolute; 
	bottom: 13px; 
	left: 50%; 
	transform: translateX(-50%); 
	z-index: 3; 
	display: flex; 
	gap: 24px; 
} 
.preco-slider .swiper-pagination-bullet { 
	width: 16px; 
	height: 16px; 
	border-radius: 50%; 
	background: rgba(255, 255, 255, 0.5); 
	cursor: pointer; 
	border: none; 
	padding: 0; 
} 
.preco-slider .swiper-pagination-bullet-active { 
	background: #ffffff; 
	} 
.preco-conteudo { 
	margin-top: -8px; 
	color: white
} 
span.valor-de { 
	font-size: 12px; 
} 
.preco-slider .swiper-slide .promo-text { 
	font-size: 1.7em; 
	font-weight: bold; 
	line-height: 35px; 
} 
.preco-slider .swiper-slide .valor-tempo { 
	font-size: 14px; 
	color: yellow; 
	font-weight: bold; 
} 
.preco-slider .swiper-slide .valor-por { 
	font-size: 21px; 
	font-weight: bold; 
} 
.preco-slider .swiper-slide h2 { 
	font-size: 17px; 
	line-height: 1.2; 
	margin-top: -8px; 
	font-weight: bold; 
} 
.preco-slider .swiper-slide h2 span { 
	font-size: 0.9em; 
	font-weight: bold; 
} 
.preco-slider .swiper-slide .subtitle-text { 
	font-size: 10px; 
	font-weight: bold; 
} 
@media (min-width: 600px){ 
	.pacote-container { 
	flex-basis: calc(32% - 12px) !important; 
	} 
	.botoes-compactos span {
    font-size: 2vw;
}
.pacote.is-compact {
    margin: -6px -14px 0 10px;
}

} 
@media (min-width: 910px){ 
	.pacote-container { 
	flex-basis: calc(23% - 5px) !important; 
	} 
	.botoes-compactos span {
    font-size: clamp(8px, 1.7vw, 15px);
}
}
/* =================================================================== */
/* CSS CORRIGIDO E FOCADO APENAS NO FAQ                              */
/* =================================================================== */

.faq-container {
    margin-bottom: 30px;
    max-width: 1170px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    overflow: hidden;
    border: 1px solid #dee2e6;
}

/* --- Cabeçalho Principal (Com o ícone que você pediu) --- */
.faq-main-header {
    padding: 20px 25px;
    background-color: white;
    color: black;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.faq-main-title-icon {
    width: 32px;
    height: 32px;
    margin-right: 15px;
    flex-shrink: 0;
}
.faq-main-header .title {
    margin: 0;
    font-size: 3vh;
    text-align: center;
    flex-grow: 1;
}
.faq-search-wrapper {
    margin-top: 20px;
}
#faq-search-input {
    width: 100%; padding: 12px 15px; border: 1px solid #a71919;
    border-radius: 8px; background-color: rgb(0 0 0 / 46%);;
    color: #fff; font-size: 1rem;
}
#faq-search-input::placeholder { color: rgba(255,255,255,0.7); }


/* --- ✨ LÓGICA DE ANIMAÇÃO CORRIGIDA (AGORA 100% CSS) ✨ --- */
.faq-content,
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
}
/* Ao abrir, o container recebe uma altura máxima gigante.
   O navegador anima a abertura somente até o tamanho real do conteúdo. */
.faq-container.is-open .faq-content {
    max-height: 10000px; /* Altura grande o suficiente para todo o conteúdo */
}
.faq-item.is-open .faq-answer {
    max-height: 2000px; /* Altura grande o suficiente para qualquer resposta */
    padding-top: 20px;
    padding-bottom: 20px;
}


/* --- Itens Individuais (Fontes Aprovadas) --- */
.faq-question {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 20px 25px; background-color: #fff; border: none; cursor: pointer;
    text-align: left; font-size: 1.25rem; font-weight: 600; color: #212529;
}
.faq-answer {
    background-color: #f8f9fa; padding: 0 25px; font-size: 1.1rem;
    line-height: 1.7; color: #495057;
}

/* Ícone de +/- animado */
.faq-main-icon, .faq-icon {
    width: 1.2em; height: 1.2em; position: relative; flex-shrink: 0; margin-left: 20px;
}
.faq-main-icon::before, .faq-main-icon::after,
.faq-icon::before, .faq-icon::after {
    content: ''; position: absolute; top: 50%; left: 50%; transition: transform 0.3s ease;
}
.faq-main-icon::before, .faq-main-icon::after { background-color: black; }
.faq-icon::before, .faq-icon::after { background-color: #343a40; }
.faq-main-icon::before, .faq-icon::before { width: 14px; height: 2px; margin-left: -7px; margin-top: -1px; }
.faq-main-icon::after, .faq-icon::after { width: 2px; height: 14px; margin-left: -1px; margin-top: -7px; }

/* Animação do ícone */
.faq-container.is-open .faq-main-icon::after,
.faq-item.is-open .faq-icon::after {
    transform: rotate(90deg);
}
.faq-item.is-open .faq-question {
    color: #0056b3;
}
/* =================================================================== */
/* HOME.CSS OTIMIZADO - PROJETO SUPER GEMINI                         */
/* VERSÃO FINAL E COMPLETA - 24/07/2025                            */
/* =================================================================== */

/* --- 1. FUNDAMENTOS E TÍTULOS DE SEÇÃO --- */
:root {
    --sky-red: #ec1d1d;
    --sky-blue: #0b61a3;
    --text-dark: #333;
    --text-light: #fff;
    --success-green: #28a745;
}

body {
    background-color: #f2f2f2;
}

.container.size > h2.title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1d2d3f;
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
}
.container.size > h2.title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--sky-red);
    border-radius: 2px;
}

/* --- O Container Principal do Banner --- */
#custom-banner {
    position: relative; /* ESSENCIAL: Serve de âncora para os slides e controles */
    width: 100%;
    height: 300px; /* Defina a altura padrão do seu banner aqui */
    overflow: hidden;
    background-color: #000; /* Fundo visível enquanto as imagens carregam */
}

/* --- Estilo de cada Slide --- */
.banner-slide {
    position: absolute; /* MÁGICA: Coloca todos os slides um sobre o outro no mesmo lugar */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Todos os slides começam invisíveis */
    transition: opacity 0.8s ease-in-out; /* Animação suave de fade */
    visibility: hidden;
}

/* --- Estilo do Slide Ativo --- */
.banner-slide.is-active {
    opacity: 1; /* O slide ativo fica visível */
    visibility: visible;
    z-index: 2; /* Garante que o slide ativo fique na frente dos outros */
}

/* --- Imagem de Fundo Dentro do Slide --- */
.banner-slide__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Fica atrás do conteúdo do slide */
}
/* --- Container dos Controles (Setas e Bolinhas) --- */
.banner-controls {
    display: none; /* Começa escondido, o JS ativa */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* Z-index ALTO para ficar na frente de TUDO */
    pointer-events: none; /* O container em si não é clicável */
}

.banner-controls.is-active {
    display: block;
}

/* Torna APENAS as setas e bolinhas clicáveis */
.banner-arrow,
.banner-dots {
    pointer-events: auto;
}

/* Estilos das Setas */
.banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    font-size: 24px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.banner-arrow:hover { 
    background-color: rgba(0, 0, 0, 0.7); 
}
.banner-arrow.prev { 
    left: 15px; 
}
.banner-arrow.next { 
    right: 15px; 
}

/* Estilos das Bolinhas de Navegação */
.banner-dots {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}
.banner-dot {
    width: 16px;
    height: 6px;
    background-color: rgb(157 151 151 / 50%);
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background-color 0.2s;
}
.banner-dot:hover { 
    background-color: rgba(255, 255, 255, 0.8); 
}
.banner-dot.is-active { 
    background-color: #2ccf4eba;
}



/* ==========================================================================
    BANNER ECONOMIZE
    ========================================================================== */

.banner-economize {
    display: flex;
    width: 100%;
    height: 100%; /* Garante que o banner ocupe o espaço do seu container pai */
    position: relative; /* ESSENCIAL para que 'position: absolute' dos filhos funcione corretamente */
    color: white;
    overflow: hidden;
    font-family: sans-serif;
}
 /* Logo */
    .banner-economize__logo {
       position: absolute;
    top: 0.8rem;
    left: -0.7rem;
    z-index: 10;
    margin: 1rem;
    }
    .banner-economize__logo svg {
    width: 100px;
    height: 42px;
    display: block; 
    filter: invert(1) grayscale(1) brightness(2.5);
    position: sticky;
    margin: 7px 0px 0px 0px;
}
.banner-economize button {
    position: absolute;
    z-index: 7;
    bottom: -8px;
    text-align: right;
    padding-right: 3px;
    left: 31px;
    width: 194px;
}

    /* Título */
    .banner-economize__titulo {
     position: absolute;
    width: 294px;
    top: 1px;
    left: 111px;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;
    z-index: 2;
    }

    /* Jogadores */
    .banner-economize__area-direita {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%; /* Ocupa toda a largura */
        height: 300px; /* Ocupa toda a altura */
    }
    /* A imagem dos jogadores (agora dentro de .banner-economize__area-direita) */
.banner-economize__jogadores-img {
    height: auto;
    max-width: 270px;
    width: 57vw;
    position: absolute;
    right: 0;
    bottom: 0;
}

    /* Aparelho */
.banner-economize__aparelho {
    position: absolute;
    bottom: 17px;
    left: 0;
    z-index: 21;
    height: auto;
    max-height: 300px;
    width: 47vw;
    max-width: 200px;
}
    
    .banner-economize__logo-sky {
   position: relative;
    top: 8px;
    left: 11px;
    height: 42px;
    width: 75px;
    filter: invert(1) grayscale(1) brightness(2.5);
}
.banner-economize__caixa-preco {
    position: absolute;
    bottom: 5.9rem;
    left: 4rem;
    width: 227px;
    height: 103px;
    padding: 3px 1px 1px 1px;
    background-color: white;
    color: #d90429;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border-radius: 4%;
    border-top-left-radius: 25%;
    border-bottom-right-radius: 5%;
    transform: translateY(-50%) skewX(-38deg);
}



    /* Conteúdo do Preço */
    .banner-economize__preco-conteudo {
    transform: skewX(38deg);
    }
    /* Textos "APENAS" e "NA ADESÃO" */
.banner-economize__preco-conteudo .texto-topo {
    font-weight: 700;
    font-size: 115%;
    position: relative;
    top: 11px;
    left: 6px;
}
.banner-economize__preco-conteudo .texto-base {
    font-weight: 700;
    font-size: 94%;
    position: absolute;
    bottom: -81px;
    right: 73px;
}

/* --- ESTILOS PARA A LINHA DO PREÇO AGRUPADA --- */

/* O container da linha do preço (vira uma linha flexível) */
.linha-preco {
    margin-left: 20%;
    margin-top: -14%;
    color: #d90429;
    line-height: 1;
    font-size: 1px;
    margin-left: 20%;
    margin-top: -12%;
}

/* Estilo para o "R$" */
.linha-preco .moeda strong {
        font-size: 4348%;
    font-weight: 900;
    margin-right: -0.75rem;
    position: absolute;
    left: 0;
    top: 47px;
}

/* Estilo para o "1," */
.linha-preco .price strong {
    font-size: 11001%;
    font-weight: 900;
    position: absolute;
    left: 67px;
    top: -11px;
}

/* Estilo para o "90" */
.linha-preco .cents strong {
    position: absolute;
    top: 5px;
    right: 57px;
    font-size: 3rem;
}

    /* Texto do Cartão */
    .banner-economize__texto-cartao {
    position: absolute;
    bottom: 82px;
    left: 6px;
    font-size: 1.1rem;
}

/* PARA TELAS ACIMA 769 DESKTOP */

@media (min-width: 769px) {

.banner-economize__logo::after {
    content: '';
        position: absolute;
        top: 70px;
        left: 89px;
        width: 531px;
        height: 3px;
        background-image: linear-gradient(to right, white 0%, white 45%, transparent 45%, transparent 55%, white 55%, white 100%);
        transform: translate(-50%, -50%) rotate(-54deg);
}
.banner-economize button {
        top: 261px;
        right: 279px;
        left: unset;
}
 .banner-economize__logo svg {
    margin: 49px 0px 0px 41px;
}

.banner-economize__titulo {
        top: 32px;
        left: 156px;
}


.banner-economize {
        display: flex;
        justify-content: flex-end; /* Alinha os elementos à direita */
        align-items: flex-end; /* Alinha os elementos na parte inferior */
        position: relative; /* Mantém a posição relativa */
        height: 300px; /* Altura fixa do banner */
    }
.banner-economize__jogadores-img {
        width: auto;
        position: absolute;
        right: 0;
        bottom: 0;
        display: block; /* Garante que a imagem se comporta como um bloco */
    }
    .banner-economize__caixa-preco {
        position: absolute;
        top: unset;
        left: unset;
        right: 486px;
        bottom: -28px;
        z-index: 21;
        min-height: 110px;
        min-width: 267px;
    }
    .banner-economize__aparelho {
        position: absolute;
        position: absolute;
        left: unset;
        right: 714px;
        bottom: 17px;
        z-index: 27;
        max-width: 267px;
    }

/* Textos "APENAS" e "NA ADESÃO" */
.banner-economize__preco-conteudo .texto-topo {
   left: 19px;
}
.banner-economize__preco-conteudo .texto-base {
                font-size: 99%;
        position: relative;
        top: 50px;
        left: 119px;
}

/* --- ESTILOS PARA A LINHA DO PREÇO AGRUPADA --- */


/* Estilo para o "R$" */
.linha-preco .moeda strong {
        font-size: 4.3rem;
        font-weight: 900;
        position: relative;
        left: -16px;
        bottom: 3px;
}

/* Estilo para o "1," */
.linha-preco .price strong {
    font-size: 11rem;
        font-weight: 900;
        left: 86px;
        top: -18px;
}

/* Estilo para o "90" */
.linha-preco .cents strong {
    font-size: 4.4rem;
        font-weight: 900;
        position: relative;
        top: 1px;
        left: 37px;
}

/* --- ESTILOS PARA APARELHO E TEXTO CARTÃO (AGORA TAMBÉM ABSOLUTOS) --- */
/* Eles serão posicionados em relação ao .banner-economize (o elemento principal) */


.banner-economize__texto-cartao {
    bottom: 1px;
        left: unset;
        right: 555px;
        position: absolute;
        z-index: 27;
        max-width: 267px;
}
.banner-economize__titulo {
    position: absolute;
    width: auto;
    top: 11px;
    left: 184px;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.1;
    z-index: 2;
}
}

/*BANNER TINA*/
.aparelho-tina{
    position: absolute;
    top: 230px;
    left: 1160px;
    z-index: 0;
}
.banner-tina {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
}
.banner-imagens {
    position: absolute;
    right: 0;
    bottom: 28px;
    border-radius: 84px 0px 0px 72px;
    overflow: hidden;
}
.antena-tina {
    position: absolute;
    right: 296px;
    bottom: -7px;
    z-index: 2;
}
.banner-economize__logo.tina {
    left: -47px;
}
.banner-economize__logo.tina::after {
        transform: translate(-50%, -50%) rotate(-120deg);
}
.abrir-btn.tina {
    position: absolute;
    z-index: 7;
    bottom: -5px;
    text-align: right;
    padding-right: 9px;
    left: 22%;
    width: 198px;
}
.banner-tina .banner-conteudo h4 {
    color: #04ff25;
    position: absolute;
    top: 8px;
    left: 9rem;
    font-size: 3.0rem;
    font-weight: 900;
}
.banner-tina .banner-conteudo h3 {
    font-size: clamp(2.5rem, 5vw, 3rem);
    font-weight: 900;
    position: absolute;
    width: clamp(200px, 300px, 400px);
    top: 107px;
    right: 47rem;
    padding-right: 43px;
    color: white;
    line-height: 01;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}
.banner-tina .banner-conteudo p {
    position: absolute;
    right: 496px;
    bottom: 41px;
    width: clamp(200px, 300px, 400px);
    text-align: center;
    color: #fff900;
    font-variant: small-caps;
    font-size: clamp(1rem, 15px, 2.2rem);
    font-weight: 900;
}
.banner-tina .tromba {
    z-index: 0;
    right: -53px;
}
@media (max-width: 935px) {
    .banner-economize__logo.tina {
    left: -47px;
}
.abrir-btn.tina {
    right: 0;
    left:unset;
}
    .banner-economize__logo.tina::after {
        display:none;
}
.banner-tina .banner-conteudo p {
    left: 37px;
    width: 302px;
}
.banner-tina .banner-conteudo h3 {
    left: 7rem;
    top: 107px;
}
}
@media (max-width: 768px) {
    .banner-economize__logo.tina {
    display:none;
}
.banner-tina .banner-conteudo h4 {
    font-size: 25px;
    left: 4rem;
}
.banner-tina .banner-conteudo p {
    left: 37px;
    width: 302px;
}
.banner-tina .banner-conteudo h3 {
    left: 7rem;
    font-size: 25px;
}
.banner-tina .tromba {
    right: -10px;
    display: unset;
}
.tinaimg {
    height: auto;
    width: 48vw;
}
.antena-tina {
    bottom: 25px;
    right: 45vw;
}
}
/* --- 3. CARDS DE PACOTES E SLIDER DE PREÇO --- */

.btn-danger { background-color: #d9534f; color: white; border-color: #d43f3a;}
.btn-danger:hover { background-color: #c9302c; border-color: #ac2925; color: white;}
.btn-success { background-color: #5cb85c; color: white; border-color: #4cae4c;}
.btn-success:hover { background-color: #449d44; border-color: #398439; color: white;}
.btn-warning { background-color: #f0ad4e; color: white; border-color: #eea236;}
.btn-warning:hover { background-color: #ec971f; border-color: #d58512; color: white;}



/* --- 5. MODAL (ESSENCIAL DO BOOTSTRAP 3) --- */
.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; }
.modal.fade .modal-dialog { transition: transform .3s ease-out; transform: translate(0, -25%); }
.modal.in .modal-dialog { transform: translate(0, 0); }
.modal-dialog { position: relative; width: auto; margin: 10px; }
.modal-content { position: relative; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; box-shadow: 0 3px 9px rgba(0, 0, 0, .5); }
.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; }
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.in { opacity: .5; }
.modal-header { 
    padding: 15px;
}
.col-md-12 {
        float: none;}
.modal-header .close { margin-top: -2px; }
.modal-title { margin: 0; line-height: 1.42857143; }
.modal-body {
    position: relative;
    }
.modal-footer { padding: 15px; text-align: right; border-top: 1px solid #e5e5e5; }
.close { float: right; font-size: 21px; font-weight: bold; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .2; }
.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; opacity: .5; }
button.close { -webkit-appearance: none; padding: 0; cursor: pointer; background: transparent; border: 0; }
@media (min-width: 768px) { .modal-dialog { width: 600px; margin: 30px auto; } }
/* --- 6. FORMULÁRIOS (MODAL) --- */
.wpcf7 {     
    background-color: #eef2f5;
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid #ffffff;
    box-shadow: 10px 10px 20px #c8cacf, -10px -10px 20px #b99696;
    }
    .wpcf7 .btn-primary, .wpcf7 .btn-red {
    background-color: #d90000;
    color: white;
    margin-top: 12px;
    }
    .wpcf7 .btn {
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
}
.wpcf7 .screen-reader-response {
    position: absolute;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    word-wrap: normal !important;
}
.btn-block {
    display: block;
    width: 100%;
}
.btn-sm, .btn-group-sm > .btn {
    padding: 5px 10px;
    font-size: 12px;
    margin-bottom: 16px;
    line-height: 1.5;
    border-radius: 3px;
}
.wpcf7-form .form-control, .wpcf7-form select { border: 1px solid #dcdcdc; background-color: #f8f9fa; padding: 10px 15px; height: auto; border-radius: 8px; box-shadow: none; transition: all 0.2s ease-in-out; width: 100%; }
.wpcf7-form .form-control:focus, .wpcf7-form select:focus { border-color: #0073e6; box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.2); background-color: #fff; }
.form-group label { font-size: 0.9em; color: #555; font-weight: 600; margin-bottom: 8px; }
@media (max-width: 768px) {
    .modal-header .title {
        font-size: 20px !important;
        margin-bottom: 1px !important;
        height: 20px !important;
    }
    .modal-content {
    top: 80px;
    }
}
.container.section-spacing {
    margin-bottom: -10px;
}

/* --- 7. ESTILOS BARRA DE COMBOS --- */
.category-accordion-item {
   margin-bottom: 20px;
}
.container.size {
    padding: 0;
}

/* Cabeçalho e Rodapé: Sempre com visual de EXPANDIDO */
.category-header{
    background-color: #575151; /* Cor do cabeçalho/rodapé, visual de "aberto" */
    color: white;
    padding: 4px 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-around;
    align-items: baseline;
    transition: background-color 0.2s ease;
}
h3.category-subtitle {
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    padding: 5px 9px 4px 6px;
    margin: -1px 0px 0px 0;
}
.category-header {
    font-family: arial;
    border-radius: 8px 8px 0 0; /* Bordas arredondadas no topo */
}

.category-header h2.title {
    margin: 0;
    padding: 0;
    font-size: 1.8rem;
    color: white;
    text-align: left;
}
.category-header h2.title::after { /* Remover pseudo-elemento do h2.title, se houver */
    display: none;
}


/* =================================================================== */
/* CSS PARA A SEÇÃO DE VANTAGENS E PROVA SOCIAL                      */
/* =================================================================== */

/* --- Classe para padronizar o espaçamento vertical --- */
/* --- Barra de Vantagens (Visual Melhorado) --- */
.vantagens-bar {
    font-family: arial;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background-color: #f2f2f2;
    flex-wrap: wrap;
}
.vantagem-icon {
    width: 32px;
    height: 32px;
    margin-right: 15px;
    flex-shrink: 0;
    
    /* 1. Definimos a cor que queremos para o ícone */
    background-color: #007bff; 

    /* 2. Usamos o SVG do seu servidor como uma máscara */
    mask-image: var(--icon-url);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;

    /* Vendor prefixes para máxima compatibilidade (especialmente Safari) */
    -webkit-mask-image: var(--icon-url);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
.vantagem-item {
    display: flex;
    align-items: center;
    color: #343a40;
    font-size: 14px;
    font-weight: 600;
    margin: 10px 15px;
    padding: 10px;
    flex-basis: 20%; /* Tenta dar uma base de 20% para cada item */
    min-width: 250px; /* Largura mínima para não espremer muito */
    justify-content: center; /* Centraliza o conteúdo (ícone + texto) */
}

.vantagem-item svg {
    width: 32px;
    height: 32px;
    margin-right: 15px;
    color: #007bff; /* Azul primário */
    flex-shrink: 0; /* Impede que o ícone encolha */
}

.vantagem-item strong {
    color: #0056b3;
}

/* --- Responsividade para a barra de vantagens --- */
@media (max-width: 768px) {
    .vantagens-bar {
        justify-content: flex-start; /* Alinha os blocos à esquerda */
    }
    .vantagem-item {
        /* Cada item ocupa quase 50%, forçando 2 colunas.
           O calc() subtrai o espaçamento (15px de cada lado) para um ajuste perfeito. */
        flex-basis: calc(50% - 30px); 
        font-size: 13px;
        min-width: 0; /* Reseta a largura mínima para permitir que encolham */
        justify-content: flex-start; /* Alinha o conteúdo (ícone e texto) à esquerda */
    }
}