:root {
  --c-primary: #00497b;
  --c-primary-2: #4e85f1;
  --c-accent: #fab500;
  --c-text: #282828;
  --c-muted: #cecece;
  --radius-md: 1rem;
  --gap-sm: .5rem;
  --gap-md: 1rem;
  --fs-base: 1.6rem;
}


/* ========== GERAL E RESET DE BORDAS ========== */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
}


/* ========== PAGINAÇÃO ========== */
.pagination ul.page-numbers {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  padding: 0;
  margin: 0;
  list-style: none;
}

.pagination span,
.pagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  padding: 1rem;
  font-size: 1.65rem;
  color: var(--c-text);
  border: 3px solid var(--c-muted);
  border-radius: var(--radius-md);
  text-decoration: none;
  line-height: 1;
}

.pagination .next,
.pagination .prev {
  border: none;
  background: transparent;
}

.pagination li .current {
  border-color: var(--c-primary-2);
  color: var(--c-primary);
  font-weight: 700;
}

.pagination a:hover,
.pagination a:focus-visible {
  border-color: var(--c-primary-2);
  color: var(--c-primary);
  outline: none;
}

.pagination span { margin: 0; }

/* ========== LAYOUTS GERAIS ========== */
.footer { margin-top: 5rem; }
hr { display: none; }

/* Busca no header */
.search-elements form {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}
.search-elements input { width: 14rem; }

/* ========== CARDS / GRID ========== */
.card-item .card-content h3 { font-size: 3rem; }

.block-text-slide .card-item .card-content h2 { font-size: 1.2rem; }

/* Organiza conteúdo dos cards de grid (evita “empurrar” CTA) */
.block-grid-cards .container > div a .content {
  justify-content: flex-start;
  gap: .75rem;
}

/* Preço menor nos cards */
.card-item .card-footer p,
.card-item .card-footer .price,
.block-grid-cards .card .price,
.block-grid-cards .card-footer .price {
  font-size: 2rem;   /* reduzido de 2.1rem */
  line-height: 1.2;
  font-weight: 600;
}

/* Rodapé do card (caso haja textos adicionais) */
.card-item .card-footer p { /* já coberto acima; mantido para compatibilidade */ }

/* ========== FORMULÁRIOS ========== */
.form-news .wpcf7-list-item-label {
  font-size: 1.4rem;
  margin-left: .5rem;
}
.form-news span.wpcf7-list-item { margin: 0; }
.footer .footer--main .form-news label {
  display: flex;
  align-items: center;
}

/* Busca avançada */
.form-search .col:last-of-type { align-self: end; }
.form-search select,
.form-search select option { color: #000; }

/* ========== NAVEGAÇÃO ========== */
.nav-main .wrapper .wrapper-sub-menu {
  padding: 0 1rem 2rem;
}

/* ========== HOME / SLIDER / DEPOIMENTOS ========== */
.block-slider-home .btn { margin-top: 2rem; }

.block-depoimentos .slider .swiper-slide .img {
  top: -3rem;
  width: 5rem;
  height: 5rem;
}

/* ========== TÍTULO DE PÁGINA ========== */
/* ajustes principais ficam nos media queries */

/* ======= LISTAS DE DOCUMENTOS ======= */
.block-list-docs h3 {
  font-size: 3rem;
  font-weight: 700;
  color: var(--c-text);
  margin: 0 0 1rem 0;
}
.block-list-docs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.block-list-docs ul li a {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--fs-base);
  color: var(--c-primary);
  padding: 1rem 0;
  text-decoration: none;
}
.block-list-docs ul li a svg {
  fill: var(--c-primary);
  width: 1.5rem;
  height: 1.5rem;
}
.block-list-docs ul li a:hover,
.block-list-docs ul li a:focus-visible {
  text-decoration: underline;
  color: var(--c-accent);
  outline: none;
}
.block-list-docs ul li a:hover svg,
.block-list-docs ul li a:focus-visible svg { fill: var(--c-accent) !important; }

/* ========== 3D FlipBook (setas) ========== */
.cmd.cmdBigForward i.fa-angle-right:not(.disabled),
.cmd.cmdBigBackward i.fa-angle-left:not(.disabled) { color: #ff6600; }
.cmd.disabled i.fa-angle-right,
.cmd.disabled i.fa-angle-left { color: #ccc; }

/* ========== MEDIA QUERIES ========== */
@media (min-width: 992px) {
  .block-slider-home .swiper .swiper-slide .content h2 { font-size: 3rem; }
}

@media (max-width: 1200px) {
  .nav-main .wrapper .wrapper-sub-menu { border-bottom: none; }

  .block-title-page .content-center { margin: 10rem 0 5rem; }

  .block-title-page span,
  .block-title-page h2 { font-size: 3rem; }
}

@media (max-width: 992px) {
  .header .header-main .col-btn .btn { font-size: 1.2rem; }

  .block-title-page { height: initial; }

  .block-text-slide .col-text { padding-left: 4rem; }

  .block-title-page span { margin-top: 4rem; }

  /* Preço ainda menor em telas pequenas */
  .card-item .card-footer p,
  .card-item .card-footer .price,
  .block-grid-cards .card .price,
  .block-grid-cards .card-footer .price {
    font-size: 1.4rem;
  }
}

/* ========== ACESSIBILIDADE / REDUZIR MOVIMENTO ========== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Estilos para o Iframe Zoho --- */
.col-form-news {
  /* Garante que a coluna do formulário se alinhe ao topo */
  align-self: flex-start;
}

.zoho-iframe-wrapper {
  width: 100%;
  max-width: 400px;  /* Limita a largura do formulário */
  margin: 0 auto;      /* Centraliza o formulário na coluna */
  overflow: hidden;
  position: relative;
}

.zoho-iframe-wrapper iframe {
  display: block;
  width: 100%;
  border: none;
  min-height: 510px; /* Altura inicial */
} 

/* ======================================================= */
/* === CORREÇÃO DE ESPAÇOS NAS ABAS (Pacotes) === */
/* ======================================================= */

/* 1. Força as linhas dentro das abas a usarem 100% do espaço */
.block-tabs .tabs .row {
    display: block !important; /* Remove restrições de flexbox */
    width: 100% !important;
    margin: 0 !important;
}

/* 2. Expande a coluna de texto para ocupar toda a largura */
.block-tabs .tabs .row .col {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important; /* Impede que o item encolha */
    padding-right: 0 !important; /* Remove espaço vazio na direita */
}

/* 3. Correção específica para a Tabela de Preços */
/* Remove a barra de rolagem desnecessária em telas grandes */
.wrapper-table {
    width: 100% !important;
    display: block;
    overflow-x: auto; /* Mantém rolagem só se necessário (mobile) */
}

/* Em telas grandes, força a tabela a abrir e sumir a rolagem */
@media (min-width: 992px) {
    .wrapper-table {
        overflow-x: visible !important;
    }
    .wrapper-table table {
        width: 100% !important;
        table-layout: auto !important; /* Permite à tabela respirar */
    }
}

/* ======================================================= */
/* === CORREÇÃO: Texto "Quebrado/Espremido" nas Abas === */
/* ======================================================= */

/* O tema original limita a largura do texto (p) para leitura (ex: 64rem).
   Isso remove o limite e deixa o texto usar 100% da aba. */
.block-tabs p,
.block-tabs li,
.block-tabs a {
    max-width: 100% !important;
}

/* Garante que as tabelas também não tenham limite de largura */
.block-tabs table {
    max-width: 100% !important;
    width: 100% !important;
}

/* ======================================================= */
/* === CORREÇÃO: Estilo da Data (Flag) nos Cards === */
/* ======================================================= */

.card-item .flag,
.flag {
    display: inline-block !important;
    text-align: center !important;
    
    /* Remove o arredondamento padrão do tema */
    border-radius: 0 !important; 
    
    /* Aplica o formato especial (Folha) que você pediu */
    border-top-left-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
    
    /* Margens */
    margin-left: 5px !important;
    margin-right: 5px !important;
    margin-top: 5px !important;
    
    /* Garante que o fundo amarelo e o texto fiquem bonitos */
    background-color: #fab500 !important;
    color: #00497b !important;
    padding: 5px 15px !important;
    font-weight: bold !important;
}

/* ======================================================= */
/* === NOVO: EFEITO 3D / SOMBRA NOS CARDS === */
/* ======================================================= */

.card-item {
    /* Garante fundo branco para a sombra não ficar estranha */
    background-color: #fff;
    
    /* Sombra inicial suave */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
    
    /* Transição suave para o movimento e a sombra */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* Garante o arredondamento */
    border-radius: var(--radius-md);
}

.card-item:hover {
    /* Move o card para cima (eixo Y) */
    transform: translateY(-10px);
    
    /* Aumenta a sombra para dar profundidade */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    
    /* Opcional: altera a cor da borda ao passar o mouse */
    border-color: var(--c-primary-2);
}

/* ========== GRID DOS CARDS ========== */
/* Desktop: 4 colunas – Tablet: 3 – Celular: 3 (bem compacto) */

.block-cards {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
}

/* Cada card dentro do grid */
.block-cards > * {
    margin: 0 !important;
    width: 100% !important;
}

/* Tablet / notebook menor */
@media (max-width: 1024px) {
    .block-cards {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Celular em pé – deixar 3 cards aparecendo na tela */
@media (max-width: 768px) {
    .block-cards {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Celular muito pequeno – se quiser, pode voltar pra 2 colunas aqui */
@media (max-width: 400px) {
    .block-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ========== BUSCA MAIS COMPACTA ========== */

/* Inputs de texto / busca (Elementor + Contact Form 7 + genéricos) */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="search"],
.search-form input[type="text"],
body input[type="text"],
body input[type="search"],
body .elementor-widget input[type="text"],
.elementor-form input[type="text"],
.elementor-form input[type="search"],
.elementor-widget-container input[type="text"] {
    font-size: 14px !important;
    padding: 8px 12px !important;
    height: 40px !important;
    line-height: 40px !important;
    border-radius: 10px !important;
    border: 1px solid #ccc !important;
    background: #f8f8f8 !important;
    box-shadow: none !important;
}

/* Botões de enviar/buscar */
.wpcf7-form input[type="submit"],
button.search-button,
button[type="submit"],
.elementor-widget-button button,
.elementor-widget-button .elementor-button,
.elementor-form .elementor-button {
    height: 40px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    padding: 0 18px !important;
}

/* Reduz espaçamento entre campos Elementor */
.elementor-widget:not(:last-child),
.elementor-field-group,
.elementor-form .elementor-field-group {
    margin-bottom: 10px !important;
}

/* SELECT2 mais compacto (Elementor + geral) */
.select2-container .select2-selection--single,
.elementor-form .select2-container .select2-selection--single {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
    border: 1px solid #ccc !important;
    padding: 5px 10px !important;
    background-color: #f8f8f8 !important;
}

.select2-container .select2-selection__rendered,
.elementor-form .select2-container .select2-selection__rendered {
    font-size: 14px !important;
    line-height: 30px !important;
    padding-left: 2px !important;
}

.select2-container .select2-selection__arrow,
.elementor-form .select2-container .select2-selection__arrow {
    height: 38px !important;
    width: 26px !important;
}

/* Dropdown do select2 */
.select2-dropdown {
    border-radius: 10px !important;
    border: 1px solid #ccc !important;
}

.select2-results__option {
    padding: 8px 12px !important;
    font-size: 14px !important;
}

/* Lista de sugestões de autocomplete */
ul.autocomplete-items,
.autocomplete-items,
.autocomplete-items div,
.autocomplete-items ul li {
    font-size: 14px !important;
    padding: 8px 14px !important;
}

/* Mobile: ainda mais compacto */
@media (max-width: 480px) {
    .elementor-form input[type="text"],
    .elementor-form input[type="search"] {
        font-size: 13px !important;
        height: 36px !important;
        line-height: 36px !important;
        padding: 6px 10px !important;
    }

    .elementor-form .elementor-button {
        height: 38px !important;
        font-size: 13px !important;
        padding: 0 14px !important;
    }
}
/* ======================================================= */
/* === BUSCA MOBILE "ACCORDION" (CORRIGIDO) === */
/* ======================================================= */

@media (max-width: 992px) {
    
    /* 1. O Container Principal (A caixa branca) */
    .block-slider-home .div-search {
        /* Posição e Tamanho */
        margin-top: -55px !important; 
        width: 92% !important;
        margin-left: 4% !important;
        
        /* Visual */
        background: #fff !important;
        border-radius: 25px !important; /* Bem arredondado quando fechado */
        box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
        
        /* Comportamento de Lista (Um embaixo do outro) */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; /* Força itens para o TOPO */
        align-items: stretch !important; /* Estica na largura */
        
        /* Animação e Estado Fechado */
        overflow: hidden !important;
        transition: all 0.3s ease !important;
        height: 50px !important; /* Altura fechada */
        padding: 0 !important;
        
        position: relative !important;
        z-index: 100 !important;
    }

    /* 2. Estado ABERTO (Quando clica) */
    .block-slider-home .div-search.active {
        height: auto !important; /* Cresce para caber o conteúdo */
        border-radius: 15px !important; /* Fica mais quadrado */
        padding-bottom: 20px !important; /* Espaço no final */
        margin-top: -120px !important; /* Sobe mais para caber na tela */
    }

    /* 3. O BOTÃO (Cabeçalho) */
    #mobile-search-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important; /* Texto na esq, seta na dir */
        width: 100% !important;
        height: 50px !important; /* Ocupa toda a altura fechada */
        min-height: 50px !important; /* Garante que não encolha */
        
        /* Estilo do Texto */
        color: #00497b !important; 
        font-weight: 800 !important;
        text-transform: uppercase;
        font-size: 0.85rem !important;
        padding: 0 25px !important;
        cursor: pointer !important;
        background: #fff !important; /* Fundo branco */
        border-bottom: 1px solid transparent !important; /* Linha invisível */
    }
    
    /* Linha separadora quando aberto */
    .block-slider-home .div-search.active #mobile-search-toggle {
        border-bottom: 1px solid #f0f0f0 !important;
        margin-bottom: 15px !important;
    }
    
    /* Ícone da lupa e seta */
    #mobile-search-toggle .icon-search { color: #fab500; margin-right: 10px; font-size: 1.1rem; }
    #mobile-search-toggle .arrow { color: #ccc; font-size: 0.8rem; }

    /* 4. O FORMULÁRIO (Inputs) */
    /* ESCONDIDO por padrão (Isso resolve o bug do Continente) */
    .form-search {
        display: none !important; 
    }

    /* VISÍVEL apenas quando ativo */
    .block-slider-home .div-search.active .form-search {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 0 20px !important; /* Espaço nas laterais */
    }

    /* 5. Ajuste Fino dos Campos */
    .block-slider-home .div-search .col { width: 100% !important; margin: 0 !important; padding: 0 !important; }
    
    .form-search label { 
        font-size: 10px !important; 
        color: #999; 
        font-weight: 700; 
        margin-bottom: 4px !important; 
        display: block !important;
    }
    
    .form-search select, 
    .form-search input { 
        height: 42px !important; 
        border: 1px solid #eee !important; 
        border-radius: 8px !important; 
        background: #f9f9f9 !important; 
        width: 100% !important;
    }
    
    /* Botão Buscar */
    .form-search button { 
        width: 100% !important; 
        height: 45px !important; 
        margin-top: 10px !important; 
        border-radius: 8px !important; 
        background: linear-gradient(90deg, #00497b, #4e85f1) !important;
    }
}

/* ======================================================= */
/* === CORREÇÃO: PACOTE NO CELULAR (EMPILHAR) === */
/* ======================================================= */

@media (max-width: 992px) {
    
    /* 1. Força o container principal a virar uma coluna vertical */
    /* Isso faz o Texto ficar em cima e o Form embaixo */
    .single-packages .container .row,
    .main-content .row, 
    .container-flex { 
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }

    /* 2. Coluna de CONTEÚDO (Texto, Abas) - Ocupa 100% */
    .col-content,
    .col-left,
    .col-8, .col-9 {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
        margin-bottom: 30px !important; /* Espaço antes do formulário */
    }

    /* 3. Coluna do FORMULÁRIO (Lateral) - Ocupa 100% */
    .col-form-news,
    .col-sidebar,
    .col-4, .col-3 {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        margin-top: 0 !important;
        align-self: center !important; /* Centraliza */
    }

    /* 4. Ajuste do Iframe do Formulário (Zoho) */
    /* Garante que não "vaze" a tela */
    .zoho-iframe-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* 5. Garante que as Abas de roteiro não quebrem */
    .block-tabs .tabs {
        width: 100% !important;
        overflow-x: hidden !important;
    }
}
/* ======================================================= */
/* === CORREÇÃO: PACOTE NO CELULAR (EMPILHAR COLUNAS) === */
/* ======================================================= */

@media (max-width: 992px) {
    
    /* 1. Ataca a classe específica que vi no seu inspetor */
    .main-content-with-sidebar {
        display: flex !important;
        flex-direction: column !important; /* Força um embaixo do outro */
        flex-wrap: nowrap !important;
        gap: 20px !important; /* Espaço entre texto e formulário */
    }

    /* 2. Força TODAS as colunas dentro dele a ocuparem 100% da tela */
    .main-content-with-sidebar > div,
    .main-content-with-sidebar > aside,
    .col-content, 
    .col-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important; /* Impede de encolher */
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 3. Garante que o Formulário (Zoho) não quebre */
    .zoho-iframe-wrapper,
    .zoho-iframe-wrapper iframe {
        width: 100% !important;
        max-width: 100% !important;
    }
}
/* ======================================================= */
/* === REDUÇÃO DO TAMANHO DO CARROSSEL (HOME) === */
/* ======================================================= */

/* 1. Ajuste Geral (Mobile e Tablet) */
.block-slider-home {
    min-height: 35rem !important; /* Reduz a altura mínima padrão */
    height: auto !important;
}

/* 2. Ajuste para Desktop (Telas acima de 992px) */
@media (min-width: 992px) {
    .block-slider-home {
        /* Muda de 82vh para 50vh (Metade da altura da tela) */
        height: 50vh !important; 
        min-height: 450px !important; /* Garante que não fique fino demais em telas wide */
        max-height: 600px !important; /* Trava a altura máxima */
    }

    /* Garante que o slider interno acompanhe a altura */
    .block-slider-home .swiper {
        height: 100% !important;
    }

    /* Ajusta a imagem para cobrir o espaço sem distorcer */
    .block-slider-home .image img {
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* 3. Ajuste do Texto (Título e Botão) para caber melhor */
    .block-slider-home .swiper .swiper-slide .content h2 {
        font-size: 4.5rem !important; /* Reduz um pouco a fonte gigante (era 6rem) */
        margin: 1rem 0 2rem 0 !important;
    }
    
    /* Remove margens extras que empurravam o texto para baixo */
    .block-slider-home .swiper .swiper-slide .content {
        margin-top: 0 !important;
    }
}

/* ======================================================= */
/* === CORREÇÃO DA COR DA LOGO === */
/* ======================================================= */

.header .logo img {
    filter: none !important; /* Remove qualquer filtro de cor/brilho */
    opacity: 1 !important;   /* Garante visibilidade total */
    mix-blend-mode: normal !important; /* Remove mistura de cores com o fundo */
}

/* ======================================================= */
/* === FORÇAR DEGRADÊ ESCURO (EM TODAS AS TELAS) === */
/* ======================================================= */

/* 1. Garante que o container do header seja transparente para mostrar o degradê */
html body header.header {
    background-color: transparent !important;
    /* Degradê Escuro (0.9 = 90% Preto no topo) */
    background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%) !important;
    position: absolute !important; /* Garante que flutue */
    width: 100% !important;
    z-index: 9999 !important;
}

/* 2. Garante que o mobile não sobrescreva com azul sólido (Teste) */
@media (max-width: 1199px) {
    html body header.header {
        background-color: transparent !important;
        background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%) !important;
    }
}

