/* --- Wrapper Principal --- */
#floating-search-wrapper {
    position: fixed;
    /* Posição do botão na tela */
    bottom: 67px;
    left: 5px;
    z-index: 9999;
}
#floating-search-wrapper.closed {
    left: 0px;
    bottom: 8%;
}
@media (max-width: 767px) {
    #floating-search-wrapper.closed {
        bottom: 25px;
    }
}
/* NOVO: Container do botão que recebe a animação parallax */
#search-button-container {
    position: relative;
    transition: transform 0.3s ease-out;
    will-change: transform;
}

/* --- Botão Principal de Busca (Adaptado da sua classe .toggle-button) --- */
.floating-search-btn {
    width: 160px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #cd2020;
    border-radius: 13px 0px 13px 13px;
    border: 1px solid #00000042;
    border-top: none;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
    transition: width 0.3s ease-out, height 0.3s ease-out, border-radius 0.3s ease, right 0.3s ease;
}
.floating-search-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit; /* Pega o mesmo border-radius do botão */
    box-shadow: 0 0 20px 8px rgba(37, 211, 102, 0.7);
    opacity: 0; /* Começa invisível */
    z-index: -1;
    /* A mágica: a nova animação é aplicada aqui */
    animation: flash-effect-leve 10s infinite;
}
.floating-search-btn:hover {
    background-color: #1DA851;
}

/* Ícones e texto dentro do botão principal */
.floating-search-btn .button-text-desktop {
    font-weight: bold;
    position: absolute;
    left: 8px;
    color: white;
    pointer-events: none;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
    transition: opacity 0.2s ease;
}
.floating-search-btn .icon-wrapper {
    transition: opacity 0.2s ease;
    /* Seus outros estilos de ícone são mantidos pela cascata de CSS */
}

/* --- NOVO: Botão de Colapsar/Expandir --- */
.search-collapse-btn {
   background-color: #cd2020;
    color: #fff;
    border: 1px solid #00000042;
    border-bottom: none;
    border-radius: 6px 6px 0px 0px;
    width: 31px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    top: -15px;
    right: 0;
    transition: transform 0.3s ease, background-color 0.3s ease;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
}
.search-collapse-btn:hover {
    background-color: #1DA851;
}
.search-collapse-btn .toggle-icon::before {
    content: 'X';
    font-size: 12px; 
    font-weight: bold;
    color: #fbf4f4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
    border: none;
}

/* --- Container dos ícones --- */
.floating-search-btn .icon-wrapper {
    position: absolute;
    top: 7px;
    right: 30px;
    transform: translate(-50%, -50%);
    z-index: 2;
}
/* --- Estilo Específico da TV (camada de baixo) --- */
.floating-search-btn .icon-base {
    position: absolute;
    left: -15px;
    top: -8px;
    stroke: #bcd1bfad;
    stroke-width: 2px;
    width: 50px;
    height: 30px;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
}

/* --- Estilo Específico da Lupa (camada de cima) --- */
.floating-search-btn .icon-overlay {
    position: inherit;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #cd9393;
    stroke-width: 2px;
    animation: pulse-zoom 2.5s infinite ease-in-out;
    transform-origin: center;
    z-index: 42;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
}

/* Animação de "pulsar" (zoom in e out) */
@keyframes pulse-zoom {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15); /* Aumenta 15% no meio da animação */
    }
    100% {
        transform: scale(1);
    }
}
/* --- ESTADO VISUAL FECHADO (classe .closed) --- */
#search-button-container.closed .floating-search-btn {
    width: 22px;
    height: 140px;
    border-radius: 0 0px 13px 0;
}
#search-button-container.closed .search-collapse-btn {
    border-radius: 0 13px 0 0;
    top: -14px;
    left: 0px;
    right: auto;
    width: 22px;
    height: 15px;
    border-right: none;
    border-bottom: 1px solid #00000042;
}
#search-button-container.closed .search-collapse-btn .toggle-icon::before {
    content: '';
    border-left: 5px solid #fff;
    border-top: 5px solid transparent; border-bottom: 5px solid transparent;
    border-right: none;
}
#search-button-container.closed .icon-wrapper { 
    position: absolute;
    top: 6px;
    right: 17px;
    scale: .7;
}
#search-button-container.closed .button-text-desktop {
    white-space: nowrap;
    position: absolute;
    top: 57%;
    left: 48%;
    transform: translate(-50%, -50%) rotate(90deg);
}

/* --- ESTADO DA JANELA DE BUSCA (classe .collapsed) --- */
/* Sua lógica original é mantida: esconde a janela de busca */
#floating-search-wrapper.collapsed #channel-search-section {
    display: none;
}

/* ========================================================================= */
/* CSS FINAL E DEFINITIVO PARA O SPINNER DO BOTÃO DE ENVIO                 */
/* ========================================================================= */

/* 1. Estilo do botão "sósia" quando ele está no estado de carregamento */
.skyform-submit-button.is-loading {
    /* Usamos flexbox para alinhar facilmente o spinner e o texto */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Espaçamento entre o spinner e o texto "Enviando..." */

    /* Previne cliques e dá o feedback visual de desativado */
    cursor: not-allowed;
    
    /* Um efeito visual extra (opcional) */
    opacity: 0.8; 
}

/* 2. Estilo para o SVG do spinner que o JavaScript cria */
.button-spinner {
    /* A animação que faz o SVG girar sobre si mesmo */
    animation: rotate-spinner 2s linear infinite;
    
    /* Tamanho do spinner (ajuste se necessário) */
    width: 24px;
    height: 24px;
}

/* 3. Estilo para o <circle> DENTRO do nosso SVG */
.button-spinner .path {
    stroke: #ffffff; /* Cor da linha do spinner */
    stroke-linecap: round;
    /* A animação que faz a linha "esticar e encolher" */
    animation: dash-spinner 1.5s ease-in-out infinite;
}

/* 4. As animações (Keyframes) */
@keyframes rotate-spinner {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash-spinner {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}
.mascote-teo-desktop {
    position: absolute;
    right: 0;
    z-index: -1;
    bottom: -5px;
    transition: bottom 0.7s ease-out, opacity 0.7s ease-out;
}
.mascote-teo-desktop.active {
    bottom: -5px;
    opacity: 1;
}
.mascote-sky {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    height: auto;
}
/* ========================================================== */
/* | CSS DO WIDGET DE FEEDBACK v3 - AUTÔNOMO                | */
/* ========================================================== */
/* ========================================================== */
/* | CSS DO WIDGET DE FEEDBACK v3 - AUTÔNOMO                | */
/* ========================================================== */
.esconde {
    position: relative;
    top: -115px;
    transition: top 0.7s ease-in-out;
}
.botao-feedback #abrir-feedback-modal {
    color: white;
    font-weight: bolder;
}
.botao-feedback #abrir-feedback-modal:hover
 {
    font-size: 18px;
}
.botao-feedback {
    display: flex;
    background-color: #007bff;
    justify-content: center;
    align-items: center;
}
.botao-feedback svg {
    filter: drop-shadow(2px 2px 2px black);
    width: 31px;
    margin: 2px;
}
#feedback-widget.visible .esconde { 
    top: 5px;
}
#feedback-widget.visible .mascote-container {
    top:0;
}
#feedback-widget {
    width: 310px;
    position: absolute;
    top: 60px;
    z-index: 9999;
    display: flex;
    pointer-events: none;
    align-items: stretch;
    overflow: hidden;
    right: -40px;
}

#feedback-widget .mascote-container {
    cursor: pointer;
    position: relative;
    z-index: 1001;
    top: -115px;
    transition: top 0.7s ease-in-out;
    pointer-events: auto;
}
#feedback-widget .baloes-container {
    width: 153px;
    pointer-events: auto;
}
#feedback-widget .balao-grita {
    display: none;
    position: relative;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 6px 1px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}
#feedback-widget .balao-grita::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent #ffffff;
}
/* AQUI ESTÁ O CONTROLE DAS FRASES QUE O JS VAI USAR */
#feedback-widget .balao-grita .frase {
    display: none; /* Esconde todas as frases por padrão */
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
    color: #333;
}
#feedback-widget .balao-grita .frase.active {
    display: block; /* O JS vai adicionar/remover esta classe para mostrar a frase */
}

/* --- Modal CSS (sem alterações) --- */
#feedback-modal.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); justify-content: center; align-items: center; z-index: 10000; }
#feedback-modal.modal-overlay.active { display: flex; }
#feedback-modal .modal-content { background-color: white; padding: 40px; border-radius: 8px; min-width: 300px; min-height: 200px; text-align: center; position: relative; }
#feedback-modal .modal-close { position: absolute; top: 10px; right: 15px; font-size: 24px; font-weight: bold; color: #888; cursor: pointer; border: none; background: none; }
#feedback-modal .modal-close:hover { color: #333; }


@media (max-width: 767px) {
    .result-item {
        padding: 10px;
        font-size: 15px;
        flex-direction: column;
        align-items: flex-start;
    }
}
.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    max-width: 500px;
    margin: 5px auto;
    font-size: 16px;
    font-weight: 700;
    color: #333;
}
.feedback-subtitle {
    font-size: 1em;
    font-weight: bold;
    color: #333;
    margin-bottom: -5px;
    text-align: center;
}
.star-rating-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.star-rating-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 0;
    border-bottom: 1px solid #ddcfcf;
}
.star-rating-label {
    font-size: 0.9em;
    color: #555;
}
.star-rating-container {
    display: inline-block;
}
.star-rating-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}
.star-rating-container input[type="radio"] {
    display: none;
}
.star-rating-container label {
    font-size: 1.5em;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s;
}
.star-rating-container:not(:hover) input[type="radio"]:checked ~ label,
.star-rating-container:hover input[type="radio"] ~ label:hover,
.star-rating-container:hover input[type="radio"] ~ label:hover ~ label {
    color: #ffc107;
}
.skyform-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 99998;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.skyform-modal-overlay.active {
    display: flex;
    opacity: 1;
}
.skyform-modal-content {
    background: #fff;
    border-radius: 15px;
    padding: 20px 30px;
    width: 90%;
    transform: scale(0.95);
    margin-bottom: -66px;
    max-width: 420px;
    position: relative;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
.skyform-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    line-height: 1;
    color: #888;
    background: 0 0;
    border: none;
    cursor: pointer;
    font-weight: bold;
}
.skyform-modal-close:hover {
    color: #333;
}
.feedback-header-container {
    text-align: center;
}
.feedback-header-image {
    text-align: center;
}
.feedback-header-image img {
    max-width: 100%;
    height: auto;
}
.balao-grita-feedback {
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: -84px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 300px;
}
.balao-grita-feedback::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: #fff transparent transparent;
}
.balao-grita-feedback p {
    margin: 0;
    font-size: 1.1em;
    line-height: 1.4;
}
.balao-grita-feedback .frase-titulo {
    font-weight: bold;
    margin-bottom: 5px;
}
#feedback-rating-section {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}
.rating-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    width: 120px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1em;
    font-weight: bold;
}
.rating-btn:hover {
    border-color: #0073e6;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.rating-btn svg {
    width: 40px;
    height: 40px;
}
#btn-rating-bom:hover svg {
    fill: #28a745;
}
#btn-rating-ruim:hover svg {
    fill: #dc3545;
}
#feedback-details-section textarea {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    font-size: 1em;
    resize: vertical;
}
#feedback-details-section input[type="submit"] {
    width: 100%;
    padding: 12px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 8px;
    border: none;
    background-color: #0073e6;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
#feedback-details-section input[type="submit"]:hover {
    background-color: #005bb5;
}
#feedback-details-section input[type="submit"]:disabled {
    background-color: #888;
    cursor: not-allowed;
}
.feedback-footer-text {
    margin-top: 5px;
    margin-bottom: -15px;
    font-size: 0.9em;
    color: #777;
}
#feedback-details-section input[type="submit"] {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#feedback-details-section input[type="submit"].is-tombado {
    transform: rotate(-12deg) scale(0.95) translateY(5px);
    background-color: #ffc107;
    cursor: not-allowed;
    opacity: 0.8;
}


/* --- fim --- */
/* --- Container Principal da Seção --- */
.footer-info-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 40px 20px;
    background-color: #363636;
    color: #f2f2f2;
    width: 100%;
    border-bottom: 1px solid #555;
    position: relative;
}

/* --- NOVO: Container para a linha superior (Passos e Pagamento) --- */
.footer-top-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
}

/* --- Colunas Principais --- */
.info-coluna-passos {
    flex: 2;
    max-width: 750px;
}
.info-coluna-pagamento {
    flex: 1;
    min-width: 290px;
    max-width: 300px;
    text-align: center;
}

/* --- O elemento que fica sempre embaixo --- */
.legal-footer-container {
    flex: 1;
    max-width: 900px;
    background-color: #433e3e;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    margin-top: 40px; /* Adiciona espaçamento superior para separá-lo */
}

/* --- Títulos das Seções (H2) --- */
.footer-info-section h2 {
    font-size: 16px;
    color: #FFFFFF;
    text-transform: uppercase;
    margin: 0 0 25px 0;
    text-align: center;
    font-weight: 600;
}

/* --- Container dos Passos (a linha horizontal) --- */
.passos-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}

/* --- Cada Passo Individual --- */
.passo-item {
    position: relative;
    flex: 1;
    max-width: 150px;
    text-align: center;
    cursor: pointer;
}

/* O Círculo que segura o ícone (MENOR) */
.passo-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px auto;
    transition: all 0.3s ease;
}
/* --- Ícones SVG (os mesmos, super leves) --- */
.icon-escolha {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E") no-repeat center / contain;
}
.icon-pedido {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z'%3E%3C/path%3E%3Cpath d='M13 13l6 6'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z'%3E%3C/path%3E%3Cpath d='M13 13l6 6'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
}
.icon-aguarde {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
}
.icon-divirtase {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='15' rx='2' ry='2'%3E%3C/rect%3E%3Cpolyline points='17 2 12 7 7 2'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='15' rx='2' ry='2'%3E%3C/rect%3E%3Cpolyline points='17 2 12 7 7 2'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
}
/* O ÍCONE (MENOR) */
.passo-icon {
    width: 28px;
    height: 28px;
    background-color: #cccccc;
    transition: background-color 0.3s ease;
}

/* --- O CONECTOR --- */
.passo-conector {
    flex-grow: 1;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
    align-self: center;
    margin-top: -35px;
}

/* --- Títulos de cada passo --- */
.passo-item h3 {
    margin: 0;
    font-size: 14px;
    color: #FFFFFF;
    font-weight: bold;
    transition: color 0.3s ease;
}

/* --- O EFEITO DE HOVER "NEON" --- */
.passo-item:hover .passo-icon-wrapper {
    border-color: #00aaff;
    background-color: rgba(0, 170, 255, 0.1);
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.4);
}
.passo-item:hover .passo-icon {
    background-color: #00aaff;
}
.passo-item:hover h3 {
    color: #00aaff;
}

/* --- O TEXTO QUE APARECE (A MÁGICA) --- */
.passo-item::after {
    content: attr(data-descricao);
    position: absolute;
    top: calc(100% - -10px);
    left: calc(100% - -130px);
    color: #00aaff;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 10;
}
.passo-item:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* --- CORREÇÃO para a imagem dos cartões --- */
.cartoes-img {
    max-width: 100%;
    height: auto !important;
    width: auto;
    display: inline-block;
    opacity: 0.7;
}

/* --- Responsividade --- */
@media (max-width: 991px) {
    .footer-info-section {
        flex-direction: column;
        gap: 20px;
    }
    .info-coluna-passos {
        flex-direction: column;
        gap: 20px;
    }
    .info-coluna-passos,
    .info-coluna-pagamento,
    .legal-footer-container {
        text-align: -webkit-center;
        width: 100%;
        max-width: 100%;
    }
    .passos-container {
        flex-wrap: wrap;
        gap: 20px 10px;
    }
    .passo-item {
       flex-basis: calc(50% - 20px);
    }
    .passo-conector {
        display: none;
    }
    .passo-item::after {
        display: none;
    }
    .legal-footer-container {
        margin-top: 0; /* Remove a margem no mobile para um espaçamento mais limpo */
    }
}
@media (max-width: 480px) {
    .passo-item {
       flex-basis: 100%;
    }
}
/* Estilo para o Texto Legal Expansível no Rodapé */


.legal-toggle {
    width: 100%;
    background-color: #433e3e;
    opacity: 90;
    border: none;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #ffff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}

.legal-toggle:hover {
    background-color: #635656;
}

.legal-toggle .arrow-icon {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.legal-toggle.active .arrow-icon {
    transform: rotate(180deg); /* Vira a seta para cima */
}

.legal-text-content {
    /* Esconde o texto por padrão */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
    padding: 0 25px; /* Remove o padding quando fechado */
    color: #f2f2f2;
    font-size: 12px;
    line-height: 1.7;
}

/* Mostra o texto quando a classe .active é adicionada */
.legal-text-content.active {
    padding: 25px;
    border-top: 1px solid #e9ecef;
}
.faq-link-completo {
    width: 200px;
    height: 31px;
    font-weight: bold;
    border: 2px solid;
    align-content: center;
    background-color: #f5d7d7;
    border-radius: 20px;
    place-self: center;
    margin-bottom: 12px;
}
/* ========================================================================
   ESTILOS ATUALIZADOS PARA A PÁGINA "NOSSA HISTÓRIA"
   ======================================================================== */
.historia-intro h1 {
    text-align: center;
}
.mascote-historia
 {
    position: absolute;
    left: 44%;
    margin-top: 59px;
}
.historia .frase
 {
    font-size: 13px;
}
.pagina-historia .lead {
    font-size: 1.25em;
    font-weight: 300;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 30px auto;
}

.pagina-historia h2 {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: bold;
    color: #c4161c;
}

.pagina-historia hr {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* A "Parede da Fama" SOMENTE para os prêmios */
.galeria-de-premios {
    column-count: 4;
    column-gap: 20px;
    padding: 20px;
}

/* NOVO: Layout especial lado a lado SOMENTE para os showcars */
.galeria-de-showcars {
    display: flex; /* Alinha os itens lado a lado */
    justify-content: center; /* Centraliza o conjunto de carros */
    align-items: flex-start; /* Alinha pelo topo, bom para alturas diferentes */
    flex-wrap: wrap; /* Permite que quebrem a linha no mobile */
    gap: 30px; /* Espaço entre os carros */
    padding: 20px 0;
}

/* Cada "Quadro" na parede (estilo geral) */
.quadro {
    display: inline-block;
    width: 100%;
    position: relative;
    z-index: 0;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    break-inside: avoid; /* Impede que um quadro se quebre entre colunas */
}

.quadro:hover {
    transform: scale(1.55) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    z-index: 10;
}

/* NOVO: Ajuste de tamanho específico para os quadros dos showcars */
.galeria-de-showcars .quadro {
    flex: 0 1 400px; /* Define a base de 400px, mas permite encolher se necessário */
    margin-bottom: 0;
}

.quadro img {
    max-width: 100%;
    height: auto;
    display: block;
}

.quadro figcaption {
    text-align: center;
    font-size: 14px;
    color: #555;
    padding-top: 10px;
    font-style: italic;
}

/* Seção de textos */
.historia-texto h2 {
    text-align: left;
    border-bottom: 2px solid #c4161c;
    padding-bottom: 10px;
}

.historia-texto p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 25px;
}

.historia-conclusao {
    text-align: center;
    padding: 40px 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    margin-top: 40px;
}

.historia-conclusao h3 {
    font-weight: bold;
}

/* Responsividade SOMENTE para a galeria de prêmios */
@media (max-width: 1200px) {
    .galeria-de-premios {
        column-count: 3;
    }
    .quadro:hover {
    transform: scale(1.35) !important;
}
}
@media (max-width: 991px) {
    .galeria-de-premios {
        column-count: 2;
    }
}
@media (max-width: 767px) {
    .galeria-de-premios {
        column-count: 1;
    }
}
.video-responsivo {
    max-width: 100%;
    height: auto;
    display: block; /* Previne margens extras indesejadas */
    place-self: center;
}
section.historia-texto {
    margin-top: -82px;
}
/* ========================================================================
   ESTILOS DO NOVO RODAPÉ COM 4 COLUNAS
   ======================================================================== */
main.coluna-conteudo-faq {
    width: 100%;
}
.coluna-conteudo-faq .main-sky-logo {
    filter: none;
}

/* O container que segura todas as colunas */
.mapasite-container {
    display: flex; /* Ativa o modo flexbox para alinhar os itens lado a lado */
    flex-wrap: wrap; /* Permite que as colunas quebrem para a linha de baixo em telas menores */
    justify-content: space-between; /* Distribui o espaço entre as colunas */
    width: 100%;
    background-color: #ec1d1d;
    text-align-last: center;
    margin-top: -36px;
    padding: 20px 0; /* Espaçamento interno para não colar nas bordas */
}

/* Estilo para cada uma das 4 colunas */
.mapasite-coluna {
    flex: 1; /* Permite que as colunas cresçam e ocupem o espaço disponível */
    min-width: 200px; /* Largura mínima para cada coluna */
    padding: 0 15px; /* Espaçamento lateral para o conteúdo não colar */
    margin-bottom: 20px; /* Espaçamento inferior para quando as colunas quebrarem a linha */
}

/* Estilo dos Títulos (Pacotes, Sobre, Ajuda, etc.) */
.mapasite-coluna h4 {
    color: #FFFFFF; /* Cor do título - branco */
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #555555; /* Linha sutil abaixo do título */
}

/* Estilo da lista de links (<ul>) */
.footer-menu-list {
    list-style: none; /* Remove as bolinhas da lista */
    padding: 0;
    margin: 0;
}

/* Estilo de cada item da lista (<li>) */
.footer-menu-list li {
    margin-bottom: 10px; /* Espaçamento entre os links */
}

/* Estilo dos links (<a>) */
.footer-menu-list li a {
    color: #CCCCCC; /* Cor dos links - cinza claro */
    text-decoration: none; /* Remove o sublinhado */
    font-size: 14px;
    transition: color 0.3s ease; /* Efeito suave na troca de cor */
}

/* Efeito ao passar o mouse sobre o link */
.footer-menu-list li a:hover {
    color: #FFFFFF; /* Muda a cor do link para branco */
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}


/* ========================================================================
   RESPONSIVO (Ajustes para Tablets e Celulares)
   ======================================================================== */

/* Para tablets - transforma em 2 colunas */
@media (max-width: 991px) {
    .mapasite-coluna {
        flex-basis: 45%; /* Cada coluna ocupa aproximadamente metade do espaço */
    }
}

/* Para celulares - transforma em 1 coluna */
@media (max-width: 767px) {
    .mapasite-coluna {
        flex-basis: 100%; /* Cada coluna ocupa 100% da largura, empilhando uma sobre a outra */
    }

    .mapasite-coluna h4 {
        text-align: left; /* Alinha o texto à esquerda no mobile */
    }
}

/* ============================================================= */
/* WILL CHANGED                                 */
/* ============================================================= */

.floating-container {
    position: fixed;
    right: 5px;
    bottom: 67px;
    z-index: 9999;
   transition: transform 0.3s ease-out; 
    will-change: transform;
}
.mobile-panel-header .watermark {  
    position: absolute;
    top: 52px;
    bottom: 9px;
    left: -58px;
    animation: slide-e-para-responsivo-loop 9s 2s linear infinite;
    will-change: transform, opacity;
    backface-visibility: hidden;
}
.floating-whatsapp-btn {
    width: 150px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #cd2020;
    border-radius: 0px 13px 13px 13px;
    border: 1px solid #00000042;
    border-top: none;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
    transition: width 0.3s ease-out, height 0.3s ease-out, border-radius 0.3s ease, right 0.3s ease;
    will-change: transform, box-shadow;
}
.floating-whatsapp-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit; /* Pega o mesmo border-radius do botão */
    box-shadow: 0 0 20px 8px rgba(37, 211, 102, 0.7);
    opacity: 0; /* Começa invisível */
    z-index: -1;
    /* A mágica: a nova animação é aplicada aqui */
    animation: flash-effect-leve 10s infinite;
}
.mascote-container {
    transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
    will-change: transform, opacity;
}

/* A MÁGICA DO TAMANHO */
/* Quando o body tiver a classe 'mascotes-pequenos', todos os mascotes diminuem */
body.mascotes-pequenos .mascote-container {
    transform: scale(0.75);
    /* Ajuste a origem da transformação para o canto do mascote */
    /* Se o mascote fica no canto inferior direito: */
    transform-origin: bottom center; 
    will-change: transform, opacity;
    /* Se o mascote fica no canto inferior esquerdo: */
    /* transform-origin: bottom left; */
}

/* A MÁGICA DE OCULTAR */
/* Quando o body tiver a classe 'mascotes-ocultos', todos os mascotes somem */
/* --- ESTADO INTERMEDIÁRIO (ANIMANDO) --- */
/* Esta classe é adicionada pelo JS para iniciar a animação de sumiço */
body.mascotes-desaparecendo .mascote-container {
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none; /* Impede cliques durante a animação */
}

/* --- ESTADO FINAL (OCULTO) --- */
/* Esta classe é adicionada pelo JS DEPOIS que a animação termina */
body.mascotes-ocultos .mascote-container {
    display: none !important;
}
/* --- O Card do Post (.post-item) --- */
.post-item {
    display: flex;
    flex-direction: column; /* Organiza o conteúdo interno na vertical */
    background-color: #fff;
    flex-basis: calc(25% - 34px);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    overflow: hidden; /* Garante que a imagem não vaze das bordas arredondadas */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    margin: 0; /* Reseta margens do article */
    padding: 0; /* Reseta paddings do article */
    will-change: transform, box-shadow;
}

/* Estilo dos LINKS do MENU - Usando Montserrat como nos títulos da página de sucesso */
.header-base .navbar-nav > li > a {
    color: #ffffff !important;
    letter-spacing: 0px !important; /* Levemente mais espaçado */
    text-transform: uppercase !important;
    padding: 20px 15px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    background: none !important;
    margin: 0px 2px !important;
    font-size: 15px !important; /* Tamanho da fonte, ajuste se precisar */
    box-shadow: inset 4px -10px 8px rgb(0 0 29 / 24%);
     will-change: transform;
}

/* ============================================================= */
/* ANIMAÇÕES                                 */
/* ============================================================= */

@keyframes slide-e-para-responsivo-loop {
    /* Começa invisível fora da tela */
    0% {
        transform: translateX(-150px);
        opacity: 0;
    }
    
    /* Aparece suavemente no início */
    5% {
        opacity: 0.5;
    }

    /* Move-se pela tela */
    85% {
        transform: translateX(100%);
        opacity: 0.5;
    }
    
    /* Desaparece suavemente no final, já fora da tela */
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}
/* Animação da marca d'água deslizando */
@keyframes slide-watermark {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Animação das imagens laterais chacoalhando */
@keyframes shake-it {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(-2deg); }
    20%, 40%, 60%, 80% { transform: rotate(2deg) translateX(-2px); }
}


/* A "receita" da animação de zoom e desaparecimento */
@keyframes zoom-and-fade-reset {
    /* A animação acontece até o final... */
    100% {
        transform: scale(3.0);
        opacity: 0;
        filter: blur(5px);
    }
    /* ...e depois volta ao estado original sozinha */
}
@keyframes fade-out-scale {
    to { transform: scale(2.5); opacity: 0; filter: blur(5px); }
}
/* ============================================================= */
/* ANIMAÇÃO DO FANTASMA CONFUSO                                  */
/* ============================================================= */
@keyframes ghostly-wobble {
    /* Começa invisível e um pouco menor */
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    
    /* No meio do caminho, ele aparece, dá um "pop" pra cima e gira pra um lado (o susto) */
    60% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1) rotate(-3deg);
    }

    /* Ele corrige a rotação, passando um pouco pro outro lado */
    80% {
        transform: translate(-50%, -50%) scale(1) rotate(2deg);
    }

    /* Finalmente, ele se estabiliza na posição final, retinho */
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}

@keyframes flash-effect-leve {
    0% { opacity: 0; }
    2% { opacity: 1; }
    4% { opacity: 0; }
    100% { opacity: 0; }
}
.watermark {
    background-image: var(--sky-logo-svg);
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: -320px;
    width: 300px;
    background-size: contain;
    opacity: 0.7;
    filter: grayscale(29%) brightness(67%) opacity(0.5);
    animation: slide-hold-fade-loop 12s 1s ease-in-out infinite;
    z-index: -1;
}
/* O RASTRO (usando pseudo-elementos :before e :after) */
.watermark::before, .watermark::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* Herda a imagem, o tamanho e o novo filtro do .watermark original */
    background: inherit;
    filter: inherit; /* Herda o filtro de cor e opacidade */
    /* Aplica a mesma animação */
    animation: slide-hold-fade-loop 12s 1s ease-in-out infinite;
}

/* Primeira cópia do rastro: um pouco atrás e mais transparente */
.watermark::before {
    animation-delay: 2.0s; /* Começa 0.15s depois da principal */
    opacity: 0.8; /* Opacidade média */
    z-index: 2; /* Fica atrás da principal */
}

/* Segunda cópia do rastro: mais atrás e ainda mais transparente */
.watermark::after {
    animation-delay: 2.8s;  /* Começa 0.3s depois da principal */
    opacity: 0.6;           /* Opacidade baixa */
    z-index: 1;             /* Fica na camada de trás de tudo */
}
  @keyframes slide-hold-fade-loop {
  /* Etapa 1: Deslizar (7 segundos) */
  0% {
    transform: translateX(-100%);
    opacity: 0.5; /* Opacidade original do watermark */
  }
  58% {
    /* REGRA CORRIGIDA para cruzar toda a tela */
    transform: translateX(calc(100vw + 30px));
    opacity: 0.5;
  }
  /* Etapa 2: Pausa (3 segundos) */
  83% {
    transform: translateX(calc(100vw + 30px));
    opacity: 0.5;
  }
  /* Etapa 3: Esmaecer (2 segundos) */
  100% {
    transform: translateX(calc(100vw + 30px));
    opacity: 0;
  }
}

/* ======================================================= */
/* ESTILOS DO PAINEL DE CONTROLE DOS MASCOTES (V2)         */
/* ======================================================= */
.mascote-container.mascote-whatsapp-sky {
    place-self: center;
}
.whatsapp-btn {
   display: inline-flex;
    background-color: #25D366;
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
    padding: 2px 20px 11px 20px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    justify-content: space-around;
    align-items: flex-end;
}
.whatsapp-btn:hover {
    background-color: #1DA851 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
    transform:scale(1.05);
}
.whatsapp-page-area {
    place-self: center;
}
.whatsapp-container h1.main-title {
    font-size: 18px;
    font-weight: bold;
}
h2.sub-message {
    font-size: 14px;
    font-weight: 600;
}
p.call-to-action {
    font-size: 13px;
}
.benefits-section, .benefits-section h4 {
    font-size: 14px;
    font-weight: bolder;
}
.coluna-conteudo-principal span {
    font-weight: bold;
    font-size: 19px;
}
/* --- O Container Principal --- */
.mascote-controls {
    position: absolute;
    bottom: 2px;
    right: 33px;
    z-index: 999;
    color: #e7dada;
    background-color: rgb(195 195 195 / 16%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 0px 10px 6px 10px;
    box-shadow: inset 1px -3px 0px rgb(12 12 12 / 10%), inset -1px 3px 2px rgb(12 12 12 / 7%);
}

/* --- O Título da Caixa --- */
.mascote-controls .controls-title {
    text-align: center;
    font-size: 10px;
    margin-bottom: -3px;
}

/* --- O Wrapper dos Botões --- */
.mascote-controls .controls-wrapper {
    display: flex;
    justify-content: space-around;
    gap: 11px;
}

/* --- Cada Item de Controle (Label + Botão) --- */
.control-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Os Labels (Tamanho, Som, etc.) --- */
.control-item span {
    font-size: 8px;
    font-style: italic;
}

/* --- Estilo dos Botões --- */
.mascote-controls button {
    width: 26px;
    height: 26px;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    /* cursor: pointer; */
    display: flex
;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    box-shadow: inset 1px 0px 0px rgb(12 12 12 / 62%), inset -1px 1px 1px rgb(12 12 12 / 62%);
}

.mascote-controls button:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.mascote-controls button svg {
    width: 22px;
    height: 22px;
    fill: white;
}

/* --- Estilos para os estados ATIVOS dos botões --- */

/* Som ATIVO (não mudo) */
#toggle-speech-btn:not(.muted) {
    background-color: #28a745; /* Verde */
}

/* Mascotes DESATIVADOS */
body.mascotes-ocultos .mascote-controls #toggle-mascote-visibility {
    background-color: #ec1d1d; /* Vermelho */
}

/* Ícones de som (mostra/esconde) */
#toggle-speech-btn .icon-sound-on,
#toggle-speech-btn .icon-sound-off {
    display: none;
}
#toggle-speech-btn:not(.muted) .icon-sound-on {
    display: block;
}
#toggle-speech-btn.muted .icon-sound-off {
    display: block;
}


/* ======================================================= */
/* AS REGRAS MÁGICAS PARA CONTROLAR OS MASCOTES            */
/* ======================================================= */

/* Uma transição suave para a mudança de tamanho */


/* ======================= ESTILOS DO BANNER DE COOKIES ======================= */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 78%;
    z-index: 9999;
    background-color: #232323e6;
    color: #ffffff;
    padding: 6px 8px;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3px;
    transform: translatex(15.3%);
    opacity: 1;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

/* Estado oculto do banner */
#cookie-banner.cookie-banner-hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none; /* Impede cliques quando oculto */
}

#cookie-banner p {
    margin: 0;
    font-size: 12px;
    flex-grow: 1; /* Faz o texto ocupar o espaço disponível */
}

#cookie-banner a {
    color: #4e9af1;
    text-decoration: underline;
}

.cookie-banner-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0; /* Impede que os botões encolham */
}

#cookie-banner button {
    padding: 7px 17px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: background-color 0.2s;
}

#accept-cookies {
    background-color: #28a745;
    color: white;
}
#accept-cookies:hover {
    background-color: #218838;
}

#reject-cookies {
    background-color: #6c757d;
    color: white;
}
#reject-cookies:hover {
    background-color: #5a6268;
}

/* Ajuste para telas pequenas */
@media (max-width: 768px) {
    #cookie-banner {
        flex-direction: column;
        text-align: center;
    }
}


/* =================================================================== */
/* ✨ MENU MOBILE - VERSÃO 2.0 COM LOGO E EFEITO VIDRO ✨             */
/* =================================================================== */
/*
 * =======================================================
 * MARCA D'ÁGUA COM RASTRO E MAIS VELOCIDADE
 * =======================================================
*/

.balao-fala {
    position: absolute;
    bottom: calc(100% + 4px);
    justify-self: anchor-center;
    background-color: #d9d9d9b5;
    color: #333;
    border-radius: 10px;
    padding: 5px 25px 0 25px;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
    z-index: 10;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.balao-fala::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border-top: 15px solid #d9d9d9b5;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

/* Estilos para o Balão de Fala */
.balao-fala.mobile {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    bottom: auto;
    height: 50px;
    justify-content: center;
    background-color: #d9d9d9b5;
    color: #333;
    border-radius: 10px;
    padding: 10px 20px;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
    z-index: 10;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Estilos para a Ponta (Triângulo) do Balão */
.balao-fala.mobile::before {
        position: absolute;
    top: 85%;
    left: 56%;
    content: '';
    border-top: 15px solid #d9d9d9b5;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    transform: translateX(-50%);
    margin-top: 5px;
}
.balao-aviso {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    bottom: auto;
    height: 50px;
    justify-content: center;
    background-color: #d9d9d9b5;
    color: #333;
    border-radius: 10px;
    padding: 10px 20px;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
    z-index: 10;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
}
 .balao-aviso::before {
        position: absolute;
    top: 85%;
    left: 56%;
    content: '';
    border-top: 15px solid #d9d9d9b5;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    transform: translateX(-50%);
    margin-top: 5px;
}   
.balao-canais {
    display: none; /* Começa escondido por padrão */
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    bottom: auto;
    height: 50px;
    justify-content: center;
    background-color: #d9d9d9b5;
    color: #333;
    border-radius: 10px;
    padding: 10px 20px;
    text-align: center;
    white-space: nowrap;
    transition: opacity 0.5s, visibility 0.5s;
    z-index: 10;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.balao-canais .frase-canais {
    margin-top: -14px;
    font-size: 12px;
    font-style: italic;
    height: 54px;
    max-width: 70vw;
    white-space: normal;
    overflow-wrap: break-word;
}    

.frase {
    display: none;
    font-family: Arial;
    font-size: 1rem;
    font-weight: bold;
}

.frase.ativa {
    display: block;
}
.balao-aviso .frase-aviso {
    display: none;
    font-family: Arial;
    font-size: 1rem;
    font-weight: bold;
}
.balao-aviso .frase-aviso.ativa {
    display: block;
}
.mascote-container.mascote-constroi-sky {
    position: relative;
    text-align: center;
    margin-top: 55px;
    margin-left: 24px;
    margin-bottom: -26px;
}
.balao-fala.constroi {
    bottom: calc(100% + 5px);
    background-color: #d9d9d9b5;
    justify-self: anchor-center;
    color: #333;
    border-radius: 10px;
    padding: 5px 25px 0 25px;
    text-align: center;
    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.constroi .frase {
    font-size: 1.5rem;
    color: #000000;
}
.mascote-container.mascote-constroibig-sky {
    position: relative;
    bottom: 2vh;
    text-align: center;
    margin-top: 89px;
    margin-bottom: -26px;
}
.balao-fala.constroibig {
    bottom: calc(100% + 5px);
    background-color: #d9d9d9b5;
    color: #333;
    justify-self: anchor-center;
    border-radius: 10px;
    padding: 5px 25px 0 25px;
    text-align: center;
    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);
    
animation-name: tremor;
}
h2.h2.texto-tremor span {
    font-size: 22px;
}
.mascote-constroibig-sky img {
    transform: scale(1.2);
    height: auto;
    margin-left: -1px;
    margin-bottom: 29px;
}
.mascote-constroi-sky img {
    height: auto;
}
.balao-fala.constroibig .frase {
    font-size: 1.5rem;
    color: #000000;
}

.texto-tremor span {
    display: inline-block; /* Necessário para aplicar o transform */
    animation-name: tremor;
    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 */
}






/* --- CONTROLE DE EXIBIÇÃO (Como estava antes, sem !important) --- */
@media (max-width: 767px) {
    .header-base .navbar-collapse { display: none; }
    .header-base .navbar-toggle#mobile-menu-trigger {
        display: block;
        position: absolute;
        top: 0px; right: 5px;
        width: 45px; height: 50px;
        background: transparent;
        border: none;
        z-index: 1050;
    }
    .watermark { 
    
    opacity: 0.7;
    filter: grayscale(29%) brightness(67%) opacity(0.5);
    animation: slide-hold-fade-loop 5s 3s ease-in-out infinite;
}
.mascote-controls {
    bottom: 2px;
    right: -21px;
    justify-self: anchor-center;
}
}
@media (min-width: 768px) {
    .header-base .navbar-collapse { display: block; }
    .header-base .navbar-toggle#mobile-menu-trigger { display: none; }
    .watermark.watermark-navbar {
    display: none;
}
}
 
/* --- ESTILO DO BOTÃO E ÍCONE (Como estava antes) --- */
.navbar-toggle .hamburger-icon {
    position: relative;
    top: -4px;
    width: 32px;
    height: 5px;
    background-color: #fff;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}
.navbar-toggle .hamburger-icon::before,
.navbar-toggle .hamburger-icon::after {
       content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #fff;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}
.navbar-toggle .hamburger-icon::before { transform: translateY(-8px); }
.navbar-toggle .hamburger-icon::after { transform: translateY(8px); }
/* logo caixa mobile*/
.mobile-panel-header .main-sky-logo {
    position: relative;
    top: 18px;
    height: 52px;
    filter: none;
    }
.mobile-panel-header .registered-symbol {
    top: 34px;
    color: black;
    left: 136px;
    }
.mobile-panel-header .logo-subtitle {
    position: relative;
    top: 22px;
    color: black;
    left: -74px;
    font-size: 12px;
    }


/* logo barra mobile*/
.navbar-header .main-sky-logo {
    position: relative;
    top: 1px;
    height: 37px;
    }
.navbar-header .registered-symbol {
    left: 98px;
    }
.navbar-header .logo-subtitle {
    position: relative;
    top: 5px;
    font-size: 10px;
    }




/* --- PAINEL E OVERLAY --- */
.mobile-menu-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fundo um pouco mais claro */
    z-index: 1040;
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
}

/* --- NOVO: EFEITO VIDRO (GLASSMORPHISM) NO PAINEL --- */
.mobile-menu-overlay .mobile-nav-container {
    position: fixed; top: 0; left: 0;
    width: 80%; max-width: 320px;
    height: 100%;
    /* Cor de fundo semi-transparente é essencial para o efeito */
    background: white;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Para Safari */
    box-shadow: 4px 0px 30px rgba(0,0,0,0.3);
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1);
    
    display: flex;
    flex-direction: column;
}

/* --- NOVO: CABEÇALHO DO PAINEL MOBILE --- */
.mobile-panel-header {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -15px;
    background-color: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-panel-header #logo_sky_mobile_panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 5px 0;
    position: relative;
}



/* --- AJUSTES NA LISTA DE LINKS --- */
.mobile-nav-container .mobile-nav {
    list-style: none; padding: 15px 0; margin: 0;
    overflow-y: auto; /* Apenas a lista de links terá scroll se for grande */
}
.mobile-nav li { border-bottom: 1px solid rgb(0 0 0 / 14%); }
.mobile-nav li:first-child { border-top: 1px solid rgb(0 0 0 / 14%); }
.mobile-nav li a {
    display: block; padding: 18px 25px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    color: black;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.2s ease, padding-left 0.2s ease;
}
.mobile-nav li a:hover {
    background-color: rgba(0, 0, 0, 0.2);
    padding-left: 30px;
}


/* --- ESTADO ATIVO (QUANDO O MENU ABRE) --- */
body.menu-ativo { overflow: hidden; }
body.menu-ativo .mobile-menu-overlay { opacity: 1; visibility: visible; }
body.menu-ativo .mobile-menu-overlay .mobile-nav-container { transform: translateX(0);scrollbar-color: #000000 #000000;}
body.menu-ativo .navbar-toggle .hamburger-icon { background-color: transparent; }
body.menu-ativo .navbar-toggle .hamburger-icon::before { transform: translateY(0) rotate(45deg); }
body.menu-ativo .navbar-toggle .hamburger-icon::after { transform: translateY(0) rotate(-45deg); }
/* =================================================================== */
/* ESTILOS PARA O NOVO INDEX.PHP (GRID DE CARDS)                     */
/* =================================================================== */
h2.category-title-simple {
    margin-top: 20px;
    border-bottom: 2px solid black;
}
/* --- O Container do Grid --- */
.posts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Espaçamento entre os cards */
    margin-top: 40px;
}


.post-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* --- Imagem do Card --- */
.post-item-thumbnail-link {
    display: block;
}
.post-item-image {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
}

/* --- Conteúdo do Card --- */
.post-item-content {
   background: #cd201f;
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.post-item .entry-title {
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 15px;
}
.post-item .entry-title a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
}
.post-item .entry-title a:hover {
    color: black; /* Vermelho SKY no hover */
}

.post-item .entry-summary {
    font-size: 1rem;
    color: #495057;
    line-height: 1.6;
    flex-grow: 1; /* Faz o resumo crescer, empurrando o botão para baixo */
}

.post-item .entry-footer {
    margin-top: 20px; 
    text-decoration: none;
    color: #FFF;
    transition: all .2s ease-in;
    font-weight: bolder;
    font-size: 16px;
}

/* --- Responsividade do Grid --- */
@media (max-width: 992px) {
    .post-item {
        flex-basis: calc(50% - 25%); /* 2 colunas para tablets */
    }
    .post-item .entry-title a {
    font-size: 18px;
    }
}
@media (max-width: 540px) {
    .post-item {
        flex-basis: calc(50% - 15px); /* 2 colunas para tablets */
    }
    .post-item .entry-title a {
    font-size: 16px;
    }
}

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

body {
    font-family: 'Arial', sans-serif;
}

h1, h2, h3 {
    font-weight: 700;
}

p {
    font-weight: 400;
}

.subtitulo-suave {
    font-weight: 350;
}

body { margin: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
a { background-color: transparent; }
a:active, a:hover { outline: 0; }
b, strong { font-weight: bold; }
h1 { margin: .67em 0; font-size: 2em; }
small { font-size: 80%; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 1em 40px; }
hr { height: 0; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
pre { overflow: auto; }
code, kbd, pre, samp { font-size: 1em; }
button, input, optgroup, select, textarea { margin: 0; font: inherit; color: inherit; }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
input { line-height: normal; }
input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-box-sizing: content-box; -moz-box-sizing: border-box; box-sizing: content-box; -webkit-appearance: textfield; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
fieldset { padding: .35em .625em .75em; margin: 0 2px; border: 1px solid #c0c0c0; }
legend { padding: 0; border: 0; }
textarea { overflow: auto; }
optgroup { font-weight: bold; }
table { border-spacing: 0; border-collapse: collapse; }
td, th { padding: 0; }
img{max-width: 100%;}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { font-size: 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
body { font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; }
input, button, select, textarea { font-size: inherit; line-height: inherit; }
a { color: #337ab7; text-decoration: none; }
a:hover, a:focus { color: #23527c; text-decoration: underline; }
a:focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
figure { margin: 0; }
img { vertical-align: middle; }
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; }
.img-rounded { border-radius: 6px; }
.img-circle { border-radius: 50%; }
hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 500; line-height: 1.1; color: inherit; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small { font-weight: normal; line-height: 1; color: #777; }
h1, .h1, h2, .h2, h3, .h3 { margin-top: 20px; margin-bottom: 10px; }
h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small, h1 .small, .h1 .small, h2 .small, .h2 .small, h3 .small, .h3 .small { font-size: 65%; }
h4, .h4, h5, .h5, h6, .h6 { margin-top: 10px; margin-bottom: 10px; }
h4 small, .h4 small, h5 small, .h5 small, h6 small, .h6 small, h4 .small, .h4 .small, h5 .small, .h5 .small, h6 .small, .h6 .small { font-size: 75%; }
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }
p { margin: 0 0 10px; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.text-muted { color: #777; }
.page-header { height: 70px; border-bottom: 0px solid #eee; background-color: #ec1d1d; padding-top: 22px; position: relative; z-index: 2; }
.banner { background: url(../images/fabio-porchat.jpg) center center no-repeat; width: 100%; height: 450px; background-size: cover !important; }
.banner .promo-text { color: #FFF; text-align: center; padding-top: 65px; }
.promo-text h1, .promo-text h2, .promo-text h5 { padding: 0; margin: 0; line-height: 1.5; }
.promo-text h5 { font-weight: bold; line-height: 30px; font-size: 11px; }
.promo-text h2 { padding-top: 35px; letter-spacing: 1px; }
.promo-text h2 span { font-size: 20px; }
.sub-menu { margin: 0 auto; color: #ec1d1d; max-width: 160px; width: 0px; overflow: hidden; position: absolute; z-index: 4; padding: 0; background-color: #bd1717; transition: all .2s ease-in; }
li:hover .sub-menu { width: 160px; }
.sub-menu a { color: #fff; padding: 15px 10px; }
.sub-menu a:hover, .sub-menu a:focus { text-decoration: none; }
.sub-menu li a:hover, .sub-menu li a:focus { background: none !important; }
.sub-menu li { line-height: 50px; list-style: none; font-size: 20px; width: 100%; margin: 0; }
.sub-menu li:hover { background-color: rgba(0, 0, 0, .2); }
#onDown { width: 0; overflow: hidden; transition: all .2s ease-in; }
@media(max-width:768px) {
    #onDown { display: none; }
}
.container.footer { background-color: #363636; color: #aaa; font-size: 10px; padding-top: 20px; }
.container.footer h2 { color: #FFF; font-size: 16px; font-weight: bold; }
.container.footer .pull-left ul li { margin: 10px 0; display: inline-block; float: left; background: url(../images/icon-footer1.png) center top no-repeat; width: 100%; height: 100px; padding-top: 50px; text-align: center; max-width: 125px; }
.container.footer .pull-left ul div { width: 10px; display: inline-block; float: left; line-height: 100px; }
.container.footer .pull-left ul li:nth-child(3) { background: url(../images/icon-footer2.png) center top no-repeat; }
.container.footer .pull-left ul li:nth-child(5) { background: url(../images/icon-footer3.png) center top no-repeat; }
.container.footer .pull-left ul li:last-child { background: url(../images/icon-footer4.png) center top no-repeat; }
@media(max-width:600px) {
    .container.footer .pull-left ul li { max-width: 22%; }
}
@media(max-width:400px) {
    .container.footer .pull-left ul li { max-width: 45%; }
}
a { text-decoration: none;
    color: #000000;
    transition: all .2s ease-in; }
a:hover { color: #b81717; text-decoration: none; }
.container.rodape { background-color: #ec1d1d; padding: 40px 0; text-align: left; color: #FFF; }
.container.rodape .registro { background-color: #a51414; color: #FFF; line-height: 30px; padding: 0; margin: 20px 0 -20px; font-size: 10px; text-align: center; }
.container.rodape .pull-left ul { padding: 0; margin: 0 0 50px; }
.container.rodape .pull-left ul li { display: block; width: 100%; line-height: 25px; list-style: none; }
.container.rodape .pull-right ul { padding: 0; display: inline-block; float: left; width: calc(100% / 4); }
.container.rodape .pull-right h2 { font-size: 20px; font-weight: bold; }
.container.rodape .pull-right ul li { display: block; width: 100%; line-height: 25px; list-style: none; }
@media (max-width:1100px) {
    .container.rodape { padding: 20px; }
    .container.rodape .pull-left { width: 30%; }
    .container.rodape .pull-right { width: 70%; }
}
@media (max-width:768px) {
    .container.rodape { padding: 20px; }
    .container.rodape .pull-left { width: 50%; }
    .container.rodape .pull-right { width: 50%; }
    .container.rodape .pull-right ul { width: 50%; }
    .sub-menu ul li { width: 100%; }
}
@media (max-width:600px) {
    .container.rodape { padding: 20px; }
    .container.rodape .pull-left { width: 100%; }
    .container.rodape .pull-right { width: 100%; }
    .container.rodape .pull-right ul { width: 50%; }
}
ul, ol { margin-top: 0; margin-bottom: 10px; }
.list-unstyled { padding-left: 0; list-style: none; }
.list-inline { padding-left: 0; margin-left: -5px; list-style: none; }
.list-inline > li { display: inline-block; padding-right: 5px; padding-left: 5px; }
dl { margin-top: 0; margin-bottom: 20px; }
dt, dd { line-height: 1.42857143; }
dt { font-weight: bold; }
dd { margin-left: 0; }
@media (min-width:768px) {
    .dl-horizontal dt { float: left; width: 160px; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
    .dl-horizontal dd { margin-left: 180px; }
}
code { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; }
kbd { padding: 2px 4px; font-size: 90%; color: #fff; background-color: #333; border-radius: 3px; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); }
pre { display: block; padding: 9.5px; margin: 0 0 10px; font-size: 13px; line-height: 1.42857143; color: #333; word-break: break-all; word-wrap: break-word; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; }
pre code { padding: 0; font-size: inherit; color: inherit; white-space: pre-wrap; background-color: transparent; border-radius: 0; }
.pre-scrollable { max-height: 340px; overflow-y: scroll; }
.container { margin-right: auto; margin-left: auto; overflow-x: hidden; }
@media (min-width:768px) {
    .container { width: 100%; }
    .single img { height: auto; }
}
@media (max-width:768px) {
    .single{
        padding-top: 40px !important;
    }
    .single img { height: auto; }
}
@media (min-width:992px) {
    .container { width: 100%; }
}
@media (min-width:1200px) {
    .container { margin-top: -1px; width: 100%; overflow: hidden; }
    .container.size { max-width: 1100px; }
}
.container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; width: auto; }
.row { margin-right: -15px; margin-left: -15px; }
.box-orange { background-color: #FB6F17 !important; overflow: hidden; color: #FFF; }
.box-left .box-orange { padding: 45px 15px 40px; }
.box-right .box-orange { padding: 5%; min-height: 230px; }
.box-gray { background-color: #E7E7E7; width: 100%; overflow: hidden; }
.box-gray ul { margin: 0; padding: 0; }
.box-gray ul li { color: #FB6F17; text-align: center; display: inline-block; float: left; width: 33.333333%; font-size: 9px; padding: 10px 0; }
.box-right .box-gray { padding: 5%; font-size: 13px; line-heigh: 2; }
.box-right .box-gray .col-md-6 { margin-bottom: 30px; }
.box-gray div h5 { font-weight: bold; text-transform: uppercase; font-size: 14px; }
.box-gray ul li:nth-child(2) { border-left: 1px solid #C4D4B6; border-right: 1px solid #C4D4B6; }
.box-gray ul li span { font-size: 22px; font-weight: bold; }
.box-left .double { overflow: hidden; list-style: none; padding: 0; margin: 0; margin-top: 20px; }
.accordion-heading { background: #EEEEEE; position: relative; cursor: pointer; }
.accordion-heading .imgdestaque { float: left;background: #ff7000; height: 59px; width: 60px; }
.accordionGeral ul { margin: 20px 0; padding: 0; list-style: none; transition: all .3s ease-in; height: auto; overflow: hidden; }
.accordionGeral ul { padding: 0 18px; background-color: white; overflow: hidden; transition: 0.6s ease-in-out; opacity: 1; max-height: 500px; }
.accordionGeral ul.show { max-height: 0; opacity: 0; }
.accordionGeral ul li { display: inline-block; text-align: center; margin: 0 10px 50px 10px; font-size: 11px; font-weight: bold; }
.accordionGeral ul li img { margin: 10px 0; }
.accordion-heading .canais-title { position: relative; top: 0; line-height: 60px; left: 80px; font-size: 18px; font-weight: bold; color: #337ab7; }
.content-gray { color: #555555; font-size: 17px; padding-bottom: 20px; }
.box-left .double { overflow: hidden; list-style: none; padding: 0; margin: 0; margin-top: 20px; }
.box-left .double li { display: inline-block; float: left; width: 50%; background-color: #E2DFE0; color: #333; font-size: 17px; text-transform: uppercase; }
.box-left .double li:nth-child(2) { border-left: 1px solid #FFF; border-right: none; width: 50%; }
.box-right h4 { font-weight: bold; }
.box-right { font-size: 18px; }
.box-left { text-align: center; }
.box-left span:nth-child(1) { font-size: 20px; }
.box-left span:nth-child(3) { font-size: 30px; font-weight: bold; }
.box-left p { font-size: 18px; }
.box-left p span.hidden-xsss { color: #000000; font-size: 20px; }
.box-left p strong { font-size: 26px; }
.box-left .titleBox { margin-bottom: 36px; }
.box-right .topoBox { background-color: #FB6F17 !important; width: 33.33333%; text-align: center; line-height: 37.15px; font-size: 12px; font-weight: bold; }
.double span, .double a { color: #E0180C; font-size: 17px !important; font-weight: normal; }
.size h3 { color: #FB6F17; }
@media (max-width:768px) {
    .box-right { float: left; margin: 50px 0; }
    .accordionGeral ul { padding: 0 18px; background-color: white; overflow: hidden; transition: 0.6s ease-in-out; max-height: 0; opacity: 0; }
    .accordionGeral ul.show { opacity: 1;  max-height: none; }
    .accordionGeral ul.show li{width: 40%;}
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; }
.col-xs-12 { width: 100%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-9 { width: 75%; }
.col-xs-8 { width: 66.66666667%; }
.col-xs-7 { width: 58.33333333%; }
.col-xs-6 { width: 50%; }
@media(max-width:480px) {
    .col-xs-6 { width: 100%; }
}
.col-xs-5 { width: 41.66666667%; }
.col-xs-4 { width: 33.33333333%; }
.col-xs-3 { width: 25%; }
.col-xs-2 { width: 16.66666667%; }
.col-xs-1 { width: 8.33333333%; }
.col-xs-pull-0 { right: auto; }
.col-xs-push-0 { left: auto; }
.col-xs-offset-0 { margin-left: 0; }
@media (min-width:768px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; }
    .col-sm-12 { width: 100%; }
    .col-sm-11 { width: 91.66666667%; }
    .col-sm-10 { width: 83.33333333%; }
    .col-sm-9 { width: 75%; }
    .col-sm-8 { width: 66.66666667%; }
    .col-sm-7 { width: 58.33333333%; }
    .col-sm-6 { width: 50%; }
    .col-sm-5 { width: 41.66666667%; }
    .col-sm-4 { width: 33.33333333%; }
    .col-sm-3 { width: 33.33333333%; }
    .col-sm-2 { width: 16.66666667%; }
    .col-sm-1 { width: 8.33333333%; }
    .col-sm-pull-0 { right: auto; }
    .col-sm-push-0 { left: auto; }
    .col-sm-offset-0 { margin-left: 0; }
}
@media (max-width:600px) {
    .col-md-4 { width: 100%; }
}
@media (min-width:992px) {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; }
    .col-md-12 { width: 100%; }
    .col-md-11 { width: 91.66666667%; }
    .col-md-10 { width: 83.33333333%; }
    .col-md-9 { width: 75%; }
    .col-md-8 { width: 66.66666667%; }
    .col-md-7 { width: 58.33333333%; }
    .col-md-6 { width: 50%; }
    .col-md-5 { width: 41.66666667%; }
    .col-md-4 { width: 33.33333333%; }
    .col-md-3 { width: 25%; }
    .col-md-2 { width: 16.66666667%; }
    .col-md-1 { width: 8.33333333%; }
    .col-md-pull-0 { right: auto; }
    .col-md-push-0 { left: auto; }
    .col-md-offset-0 { margin-left: 0; }
}
@media (min-width:1200px) {
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; }
    .col-lg-12 { width: 100%; }
    .col-lg-11 { width: 91.66666667%; }
    .col-lg-10 { width: 83.33333333%; }
    .col-lg-9 { width: 75%; }
    .col-lg-8 { width: 66.66666667%; }
    .col-lg-7 { width: 58.33333333%; }
    .col-lg-6 { width: 100%; }
    .col-lg-5 { width: 41.66666667%; }
    .col-lg-4 { width: 33.33333333%; }
    .col-lg-3 { width: 25%; }
    .col-lg-2 { width: 16.66666667%; }
    .col-lg-1 { width: 8.33333333%; }
    .col-lg-pull-0 { right: auto; }
    .col-lg-push-0 { left: auto; }
    .col-lg-offset-0 { margin-left: 0; }
}

fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
legend { display: block; width: 100%; padding: 0; margin-bottom: 20px; font-size: 21px; line-height: inherit; color: #333; border: 0; border-bottom: 1px solid #e5e5e5; }
label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: bold; }
input[type="search"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
input[type="radio"], input[type="checkbox"] { margin: 4px 0 0; margin-top: 1px \9; line-height: normal; }
input[type="file"] { display: block; }
input[type="range"] { display: block; width: 100%; }
select[multiple], select[size] { height: auto; }
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
output { display: block; padding-top: 7px; font-size: 14px; line-height: 1.42857143; color: #555; }
.fade { opacity: 0; -webkit-transition: opacity .15s linear; -o-transition: opacity .15s linear; transition: opacity .15s linear; }
.fade.in { opacity: 1; }
.collapse { display: none; }
.page-header { min-height: 100px; height: auto; }
.page-header .pull-left { }
.collapse.in { display: block; }
tr.collapse.in { display: table-row; }
tbody.collapse.in { display: table-row-group; }
.collapsing { position: relative; height: 0; overflow: hidden; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: .35s; -o-transition-duration: .35s; transition-duration: .35s; -webkit-transition-property: height, visibility; -o-transition-property: height, visibility; transition-property: height, visibility; }
.caret { display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; border-top: 7px dashed; border-top: 4px solid \9; border-right: 7px solid transparent; border-left: 7px solid transparent; }
.nav { padding-left: 0; margin-bottom: 0; list-style: none; }
.nav > li { position: relative; display: block; }
.nav > li > a { position: relative; display: block; padding: 10px 15px; }
.nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: #eee; }
.nav > li.disabled > a { color: #777; }
.nav > li.disabled > a:hover, .nav > li.disabled > a:focus { color: #777; text-decoration: none; cursor: not-allowed; background-color: transparent; }
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: #eee; border-color: #337ab7; }
.nav .nav-divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; }
.nav > li > a > img { max-width: none; }
.nav-tabs { border-bottom: 1px solid #ddd; }
.nav-tabs > li { float: left; margin-bottom: -1px; }
.nav-tabs > li > a { margin-right: 2px; line-height: 1.42857143; border: 1px solid transparent; border-radius: 4px 4px 0 0; }
.nav-tabs > li > a:hover { border-color: #eee #eee #ddd; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #555; cursor: default; background-color: #fff; border: 1px solid #ddd; border-bottom-color: transparent; }
.nav-tabs.nav-justified { width: 100%; border-bottom: 0; }
.nav-tabs.nav-justified > li { float: none; }
.nav-tabs.nav-justified > li > a { margin-bottom: 5px; text-align: center; }
.nav-tabs.nav-justified > .dropdown .dropdown-menu { top: auto; left: auto; }
@media (min-width:768px) {
    .nav-tabs.nav-justified > li { display: table-cell; width: 1%; }
    .nav-tabs.nav-justified > li > a { margin-bottom: 0; }
}
.nav-tabs.nav-justified > li > a { margin-right: 0; border-radius: 4px; }
.nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus { border: 1px solid #ddd; }
@media (min-width:768px) {
    .nav-tabs.nav-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; }
    .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus { border-bottom-color: #fff; }
}
.nav-pills > li { float: left; }
.nav-pills > li > a { border-radius: 4px; }
.nav-pills > li + li { margin-left: 2px; }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: #fff; background-color: #337ab7; }
.nav-stacked > li { float: none; }
.nav-stacked > li + li { margin-top: 2px; margin-left: 0; }
.nav-justified { width: 100%; }
.nav-justified > li { float: none; }
.nav-justified > li > a { margin-bottom: 5px; text-align: center; }
.nav-justified > .dropdown .dropdown-menu { top: auto; left: auto; }
@media (min-width:768px) {
    .nav-justified > li { display: table-cell; width: 1%; }
    .nav-justified > li > a { margin-bottom: 0; }
}
.nav-tabs-justified { border-bottom: 0; }
.nav-tabs-justified > li > a { margin-right: 0; border-radius: 4px; }
.nav-tabs-justified > .active > a, .nav-tabs-justified > .active > a:hover, .nav-tabs-justified > .active > a:focus { border: 1px solid #ddd; }
@media (min-width:768px) {
    .nav-tabs-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; }
    .nav-tabs-justified > .active > a, .nav-tabs-justified > .active > a:hover, .nav-tabs-justified > .active > a:focus { border-bottom-color: #fff; }
}
.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }
.nav-tabs .dropdown-menu { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; }
.navbar { position: relative; min-height: 50px; margin-bottom: 0px; border: 1px solid transparent; }
.half { width: 50%; }
.date-select { display: inline-block; }
#dtBirthday .date-select:nth-child(2) .btn-group .dt { width: 70px; }
#dtBirthday .date-select:nth-child(3) .btn-group .dt { width: 100px; }
@media (max-width:768px) {
    .half { width: 100%; }
}
@media (min-width:768px) {
    .navbar { border-radius: 4px; }
}
@media (min-width:768px) {
    .navbar-header { float: left; display: none; }
}
.navbar-collapse { padding-right: 15px; padding-left: 15px; overflow-x: visible; -webkit-overflow-scrolling: touch; border-top: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.navbar-collapse.in { overflow-y: auto; }
@media (min-width:769px) {
    .navbar-collapse { width: auto; border-top: 0; -webkit-box-shadow: none; box-shadow: none; }
    .navbar-collapse.collapse { display: block !important; height: 50px !important; padding-bottom: 0; overflow: visible !important; }
    .navbar-collapse.in { overflow-y: visible; }
    .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { padding-right: 0; padding-left: 0; }
}
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: 340px; }
.header-base { display: inline-block; bottom: 0; width: 100%; background-color: #b81717; padding: 0; height: 50px; margin-bottom: -5px;}
.header-base.fixed { position: fixed; top: 0; z-index: 5; width: 100%; height: 50px; }
.header-base .navbar-nav { float: none; margin: 0 auto; max-width: 1110px; width: 100%; text-transform: uppercase; }
.header-base .navbar-nav a { color: #FFF; font-size: 16px; font-weight: 500;}
.header-base .navbar-nav li { max-height: 50px; line-height: 50px; font-weight: 500;font-size: 16px;}
.header-base .navbar-nav li.open {max-height: 350px;}
.header-base .navbar-nav li.drop:after { color: #fff; content: ' ▾'; position: absolute; bottom: -13px; font-size: 24px; left: 50%; margin-left: -10px; }
.header-base .navbar-nav span { color: yellow; }
.header-base .pull-right.assine-ja2 { display: block !important; color: #FFF; font-size: 15px; position: absolute; right: 30px; text-align: right; padding-right: 40px; line-height: 50px; }
.header-base .pull-right.assine-ja2 span { border-left: 1px solid rgba(255, 255, 255, .2); padding-left: 10px; margin-left: 10px; color: yellow; }
@media(max-width:400px) {
    .header-base .pull-right.assine-ja2 { font-size: 13px; line-height: 1; margin-top: 12px; }
    .header-base .pull-right.assine-ja2 span { color: #FFF; border: none; display: inline-block; float: none; margin: 0; padding: 0; width: 100%; }
}
@media(max-width:900px) {
    .footer .pull-right { width: 100%; float: left; }
}
@media(max-width:769px) {
    .header-base .navbar-nav .assine-ja { margin-top: -5px; color: #FFF; font-size: 15px; }
    .page-header { display: none !important; }
    .container.rodape { padding: 20px 0; }
}
.header-base .navbar-nav span::first-line { }
.header-base .navbar-nav .active, .header-base .navbar-nav a:hover, .header-base .navbar-nav a:active, .header-base .navbar-nav a:visited { background-color: rgba(0, 0, 0, .2); }
@media (max-device-width:480px) and (orientation:landscape) {
    .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: 200px; }
}
.navbar-brand {
    display: inline-flex;
    width: auto;
    flex-direction: column;
}
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { margin-right: -15px; margin-left: -15px; }
@media (min-width:768px) {
    .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { margin-right: 0; margin-left: 0; }
}
.navbar-static-top { z-index: 1000; border-width: 0 0 1px; }
@media (min-width:768px) {
    .navbar-static-top { border-radius: 0; }
}
.navbar-fixed-top, .navbar-fixed-bottom { position: fixed; right: 0; left: 0; z-index: 1030; }
.navbar-fixed-top2 { position: fixed; right: 0; left: 0; z-index: 1020; }
@media (min-width:768px) {
    .navbar-fixed-top, .navbar-fixed-bottom { border-radius: 0; }
}
.navbar-fixed-top { top: 0; border-width: 0 0 1px; }
.navbar-fixed-top2 { top: 50px; border-width: 0 0 1px; }
.navbar-fixed-bottom { bottom: 0; margin-bottom: 0; border-width: 1px 0 0; }
.navbar-brand:hover, .navbar-brand:focus { text-decoration: none; }
.navbar-brand > img { display: block; }
@media (min-width:768px) {
    .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { margin-left: -15px; }
}
.navbar-toggle { position: relative; float: right; padding: 9px 10px; margin-top: 8px; margin-right: 20px; margin-bottom: 8px; background-color: #ffff; background-image: none; border: 1px solid transparent; border-radius: 4px; position: relative; z-index: 10; }
.navbar-toggle:focus { outline: 0; }
.navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; background-color: #b81717; }
.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }
@media (min-width:768px) {
    .navbar-toggle { display: none; }
}
@media (max-width:767px) {
    .header-base { position: fixed; top: 0; z-index: 5; width: 100%; height: 50px; }
    .sub-menu { display: none; }
    .header-base .navbar-nav li.drop:after { color: #fff; content: ' ▾'; position: absolute; bottom: auto; top: -5px; font-size: 24px; left: 8px; }
    li:hover .sub-menu { display: block; max-width: 100%; width: 100%; position: relative; }
    .sub-menu li { display: inline-block; float: left; width: calc(100% / 3) !important; font-size: 12px; padding: 0 5px; }
    .navbar-collapse { background-color: #b81717; }
    .page-header { display: none; }
    .header-base li { width: 100%; }
}
@media (max-width:820px) {
    .header-base .pull-right { display: none; }
}
.size { padding: 0 10px; }
.navbar-nav { margin: 7.5px -15px; }
.navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; line-height: 20px; }
@media (max-width:767px) {
    .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; }
    .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; }
    .navbar-nav .open .dropdown-menu > li > a { line-height: 20px; }
    .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus { background-image: none; }
}
@media (min-width:768px) {
    .navbar-nav { float: left; margin: 0; }
    .navbar-nav > li { float: left; }
    .navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; }
}
.navbar-form { padding: 10px 15px; margin-top: 8px; margin-right: -15px; margin-bottom: 8px; margin-left: -15px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1); }
@media (min-width:768px) {
    .navbar-form .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; }
    .navbar-form .form-control { display: inline-block; width: auto; vertical-align: middle; }
    .navbar-form .form-control-static { display: inline-block; }
    .navbar-form .input-group { display: inline-table; vertical-align: middle; }
    .navbar-form .input-group .input-group-addon, .navbar-form .input-group .input-group-btn, .navbar-form .input-group .form-control { width: auto; }
    .navbar-form .input-group > .form-control { width: 100%; }
    .navbar-form .control-label { margin-bottom: 0; vertical-align: middle; }
    .navbar-form .radio, .navbar-form .checkbox { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle; }
    .navbar-form .radio label, .navbar-form .checkbox label { padding-left: 0; }
    .navbar-form .radio input[type="radio"], .navbar-form .checkbox input[type="checkbox"] { position: relative; margin-left: 0; }
    .navbar-form .has-feedback .form-control-feedback { top: 0; }
}
@media (max-width:767px) {
    .navbar-form .form-group { margin-bottom: 5px; }
    .navbar-form .form-group:last-child { margin-bottom: 0; }
}
@media (min-width:768px) {
    .navbar-form { width: auto; padding-top: 0; padding-bottom: 0; margin-right: 0; margin-left: 0; border: 0; -webkit-box-shadow: none; box-shadow: none; }
}
.navbar-nav > li > .dropdown-menu { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { margin-bottom: 0; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.navbar-btn { margin-top: 8px; margin-bottom: 8px; }
.navbar-btn.btn-sm { margin-top: 10px; margin-bottom: 10px; }
.navbar-btn.btn-xs { margin-top: 14px; margin-bottom: 14px; }
.navbar-text { margin-top: 15px; margin-bottom: 15px; }
@media (min-width:768px) {
    .navbar-text { float: left; margin-right: 15px; margin-left: 15px; }
}
@media (min-width:768px) {
    .navbar-left { float: left !important; }
    .navbar-right { float: right !important; margin-right: -15px; }
    .navbar-right ~ .navbar-right { margin-right: 0; }
}
.navbar-default { background-color: #f8f8f8; border-color: #e7e7e7; }
.navbar-default .navbar-brand { color: #777; }
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #5e5e5e; background-color: transparent; }
.navbar-default .navbar-text { color: #777; }
.navbar-default .navbar-nav > li > a { color: #777; }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #333; background-color: transparent; }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #555; background-color: #e7e7e7; }
.navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus { color: #ccc; background-color: transparent; }
.navbar-default .navbar-toggle { border-color: #ddd; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #ddd; }
.navbar-default .navbar-toggle .icon-bar { background-color: #888; }
.navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #e7e7e7; }
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #555; background-color: #e7e7e7; }
@media (max-width:767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #777; }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #333; background-color: transparent; }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #555; background-color: #e7e7e7; }
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus { color: #ccc; background-color: transparent; }
}
.navbar-default .navbar-link { color: #777; }
.navbar-default .navbar-link:hover { color: #333; }
.navbar-default .btn-link { color: #777; }
.navbar-default .btn-link:hover, .navbar-default .btn-link:focus { color: #333; }
.navbar-default .btn-link[disabled]:hover, fieldset[disabled] .navbar-default .btn-link:hover, .navbar-default .btn-link[disabled]:focus, fieldset[disabled] .navbar-default .btn-link:focus { color: #ccc; }
.navbar-inverse { background-color: #222; border-color: #080808; min-height: 30px; }
.navbar-inverse .navbar-nav { min-height: 30px; }
.navbar-inverse .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 30px; }
.navbar-inverse .navbar-brand { color: #9d9d9d; }
.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus { color: #fff; background-color: transparent; }
.navbar-inverse .navbar-text { color: #9d9d9d; }
.navbar-inverse .navbar-nav > li > a { color: #9d9d9d; }
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { color: #fff; background-color: transparent; }
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { color: #fff; background-color: #080808; }
.navbar-inverse .navbar-nav > .disabled > a, .navbar-inverse .navbar-nav > .disabled > a:hover, .navbar-inverse .navbar-nav > .disabled > a:focus { color: #444; background-color: transparent; }
.navbar-inverse .navbar-toggle { border-color: #333; }
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background-color: #333; }
.navbar-inverse .navbar-toggle .icon-bar { background-color: #fff; }
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: #101010; }
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus { color: #fff; background-color: #080808; }
@media (max-width:767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header { border-color: #080808; }
    .navbar-inverse .navbar-nav .open .dropdown-menu .divider { background-color: #080808; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #9d9d9d; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { color: #fff; background-color: transparent; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus { color: #fff; background-color: #080808; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus { color: #444; background-color: transparent; }
}
.navbar-inverse .navbar-link { color: #9d9d9d; }
.navbar-inverse .navbar-link:hover { color: #fff; }
.navbar-inverse .btn-link { color: #9d9d9d; }
.navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:focus { color: #fff; }
.navbar-inverse .btn-link[disabled]:hover, fieldset[disabled] .navbar-inverse .btn-link:hover, .navbar-inverse .btn-link[disabled]:focus, fieldset[disabled] .navbar-inverse .btn-link:focus { color: #444; }
.breadcrumb { padding: 15px 0; margin-bottom: 20px; font-size: 11px; list-style: none; border-radius: 4px; }
.breadcrumb a { color: #777 !important; }
.breadcrumb > li { display: inline-block; }
.breadcrumb > li + li:before { position: relative; display: inline-block; content: "."; color: transparent; background: url(../images/arrow_red.png) center 65% no-repeat; padding: 0 9px; color: #E0180C; font-size: 15px; }
.breadcrumb > .active { color: #E0180C; }
.badge { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; font-weight: bold; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: middle; background-color: #C11F21; border-radius: 10px; margin-top: -5px; }
.badge:empty { display: none; }
.btn .badge { position: relative; top: -1px; }
.btn-xs .badge, .btn-group-xs > .btn .badge { top: 0; padding: 1px 5px; }
a.badge:hover, a.badge:focus { color: #fff; text-decoration: none; cursor: pointer; }
.list-group-item.active > .badge, .nav-pills > .active > a > .badge { color: #337ab7; background-color: #fff; }
.list-group-item > .badge { float: right; }
.list-group-item > .badge + .badge { margin-right: 5px; }
.nav-pills > li > a > .badge { margin-left: 3px; }
.close { float: right; font-size: 21px; font-weight: bold; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; filter: alpha(opacity=20); opacity: .2; }
.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; filter: alpha(opacity=50); opacity: .5; }
button.close { -webkit-appearance: none; padding: 0; cursor: pointer; background: transparent; border: 0; }
.clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-header:before, .modal-header:after, .modal-footer:before, .modal-footer:after { display: table; content: " "; }
.clearfix:after, .dl-horizontal dd:after, .container:after, .container-fluid:after, .row:after, .form-horizontal .form-group:after, .btn-toolbar:after, .btn-group-vertical > .btn-group:after, .nav:after, .navbar:after, .navbar-header:after, .navbar-collapse:after, .pager:after, .panel-body:after, .modal-header:after, .modal-footer:after { clear: both; }
.center-block { display: block; margin-right: auto; margin-left: auto; }
.pull-right { float: right !important; }
.pull-left { float: left !important; }
.hide { display: none !important; }
.show { display: block !important; }
.invisible { visibility: hidden; }
.text-hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; }
.hidden { display: none !important; }
.affix { position: fixed; }
@-ms-viewport { width: device-width; }
.visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important; }
@media (max-width:767px) {
    .visible-xs { display: block !important; }
    table.visible-xs { display: table !important; }
    tr.visible-xs { display: table-row !important; }
    th.visible-xs, td.visible-xs { display: table-cell !important; }
}
@media (max-width:767px) {
    .visible-xs-block { display: block !important; }
}
@media (max-width:767px) {
    .visible-xs-inline { display: inline !important; }
}
@media (max-width:767px) {
    .visible-xs-inline-block { display: inline-block !important; }
}
@media (min-width:768px) and (max-width:991px) {
    .visible-sm { display: block !important; }
    table.visible-sm { display: table !important; }
    tr.visible-sm { display: table-row !important; }
    th.visible-sm, td.visible-sm { display: table-cell !important; }
}
@media (min-width:768px) and (max-width:991px) {
    .visible-sm-block { display: block !important; }
}
@media (min-width:768px) and (max-width:991px) {
    .visible-sm-inline { display: inline !important; }
}
@media (min-width:768px) and (max-width:991px) {
    .visible-sm-inline-block { display: inline-block !important; }
}
@media (min-width:992px) and (max-width:1199px) {
    .visible-md { display: block !important; }
    table.visible-md { display: table !important; }
    tr.visible-md { display: table-row !important; }
    th.visible-md, td.visible-md { display: table-cell !important; }
}
@media (min-width:992px) and (max-width:1199px) {
    .visible-md-block { display: block !important; }
}
@media (min-width:992px) and (max-width:1199px) {
    .visible-md-inline { display: inline !important; }
}
@media (min-width:992px) and (max-width:1199px) {
    .visible-md-inline-block { display: inline-block !important; }
}
@media (min-width:1200px) {
    .visible-lg { display: block !important; }
    table.visible-lg { display: table !important; }
    tr.visible-lg { display: table-row !important; }
    th.visible-lg, td.visible-lg { display: table-cell !important; }
}
@media (min-width:1200px) {
    .visible-lg-block { display: block !important; }
}
@media (min-width:1200px) {
    .visible-lg-inline { display: inline !important; }
}
@media (min-width:1200px) {
    .visible-lg-inline-block { display: inline-block !important; }
}
@media (max-width:767px) {
    .hidden-xs { display: none !important; }
}
@media (min-width:768px) and (max-width:991px) {
    .hidden-sm { display: none !important; }
}
@media (min-width:992px) and (max-width:1199px) {
    .hidden-md { display: none !important; }
}
@media (min-width:1200px) {
    .hidden-lg { display: none !important; }
}
.visible-print { display: none !important; }
@media print {
    .visible-print { display: block !important; }
    table.visible-print { display: table !important; }
    tr.visible-print { display: table-row !important; }
    th.visible-print, td.visible-print { display: table-cell !important; }
}
.visible-print-block { display: none !important; }
@media print {
    .visible-print-block { display: block !important; }
}
.visible-print-inline { display: none !important; }
@media print {
    .visible-print-inline { display: inline !important; }
}
.visible-print-inline-block { display: none !important; }
@media print {
    .visible-print-inline-block { display: inline-block !important; }
}
@media print {
    .hidden-print { display: none !important; }
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus, .nav > li > a:hover, .nav > li > a:focus { background-color: transparent; }
.dropdown-menu { background-color: #B81717; top: -2px; position: relative; border-top: none; }
#pag-banco, #pag-cart { display: none; }
.pphome{
    display: none;
}
/*form*/
.cartao span:nth-child(1) input[type="radio"]::after { content: url(../images/visa.png); left: 20px; position: relative; bottom: 7px; }
.cartao span:nth-child(2) input[type="radio"]::after { content: url(../images/visa.png); left: 20px; position: relative; bottom: 7px; }
.cartao span:nth-child(3) input[type="radio"]::after { content: url(../images/master.png); left: 20px; position: relative; bottom: 7px; }
.cartao span:nth-child(4) input[type="radio"]::after { content: url(../images/hiper.png); left: 20px; position: relative; bottom: 7px; }
.cartao span:nth-child(5) input[type="radio"]::after { content: url(../images/elo.png); left: 20px; position: relative; bottom: 7px; }
.cartao span:nth-child(6) input[type="radio"]::after { content: url(../images/diners.png); left: 20px; position: relative; bottom: 7px; }
.cartao span:nth-child(7) input[type="radio"]::after { content: url(../images/amex.png); left: 20px; position: relative; bottom: 7px; }
.cartao .wpcf7-list-item-label { display: none; }
.cartao span.wpcf7-list-item { margin-right: 60px; }
.cartao input[type="radio"] { margin-bottom: 25px; }
input[type="radio"]:focus { border: none; outline: 0; outline-style: none; outline-width: 0; }
.banco .wpcf7-list-item-label { display: none; }
.banco span.wpcf7-list-item { margin-right: 68px; }
.banco span:nth-child(1) input[type="radio"]::after { content: url(../images/caixa.png); left: 20px; position: relative; bottom: 7px; }
.banco span:nth-child(2) input[type="radio"]::after { content: url(../images/caixa.png); left: 20px; position: relative; bottom: 7px; }
.banco span:nth-child(3) input[type="radio"]::after { content: url(../images/bradesco.png); left: 20px; position: relative; bottom: 7px; }
.banco span:nth-child(4) input[type="radio"]::after { content: url(../images/hsbc.png); left: 20px; position: relative; bottom: 7px; }
.banco span:nth-child(5) input[type="radio"]::after { content: url(../images/itau.png); left: 20px; position: relative; bottom: 7px; }
.banco span:nth-child(6) input[type="radio"]::after { content: url(../images/bb.png); left: 20px; position: relative; bottom: 7px; }
.banco span:nth-child(7) input[type="radio"]::after { content: url(../images/santander.png); left: 20px; position: relative; bottom: 7px; }
.banco span:nth-child(8) input[type="radio"]::after { content: url(../images/banrisul.png); left: 20px; position: relative; bottom: 7px; }
.banco span:nth-child(9) input[type="radio"]::after { content: url(../images/sicredi.png); left: 20px; position: relative; bottom: 7px; }
.banco span:nth-child(10) input[type="radio"]::after { content: url(../images/citibank.png); left: 20px; position: relative; bottom: 7px; }
.banco input[type="radio"] { margin-bottom: 25px; }
/*
 * =========================================================
 * DESIGN SOFISTICADO PARA O MENU - VERSÃO 4 (ANIMAÇÕES EM CAMADAS)
 * =========================================================
 * Novidades:
 * - Header superior com múltiplas imagens de fundo e pseudo-elementos.
 * - Marca d'água deslizando em loop infinito.
 * - Animações de chacoalhar e desaparecer ativadas com hover.
*/




/* 1. A FAIXA SUPERIOR DA LOGO (#page-header)
----------------------------------------------------------*/
.page-header {
    position: relative;
    overflow: hidden;
    background-color: white;
    border-bottom: 2px solid #c00;
}



/* --- FIM DA ESCOLHA --- */





/* ============================================================= */
/* ATIVAÇÃO DO FANTASMA (MESMA LÓGICA DE ANTES)                  */
/* ============================================================= */

/* O logo real ainda anima normalmente */
#page-header.header-is-triggered .main-sky-logo {
    animation: zoom-and-fade-reset 0.8s cubic-bezier(0.32, 1, 0.46, 1);
}

/* O fantasma de luz aparece no lugar */
#page-header.header-is-triggered #logo_sky::before {
    opacity: 1; 
}

/* O resto do seu código continua igual */
#page-header.header-is-triggered .registered-symbol { 
    animation: zoom-and-fade-reset 0.4s cubic-bezier(0.32, 1, 0.46, 1);
}
#page-header.header-is-triggered::before,
#page-header.header-is-triggered::after {
    animation: shake-it 0.2s ease-in-out;
}



/* A logo principal em seu estado normal */
/* AJUSTES AQUI PARA O NOVO LOGO SVG E SUA COR */

/* Estilo para o container do logo e subtítulo */
#page-header #logo_sky {
    position: relative; /* ESSENCIAL: Torna este <a> o contexto para posicionar o símbolo ® de forma absoluta */
    display: flex;
    flex-direction: column; /* Empilha o logo e o subtítulo verticalmente */
    align-items: center;  /* Centraliza horizontalmente o logo e o subtítulo */
    justify-content: center; /* Centraliza verticalmente no espaço disponível */
    text-decoration: none;
    /* Adicione um padding aqui se o logo estiver muito colado no topo/base do header */
    padding: 5px 0; /* Exemplo: 5px de padding top/bottom */
    width: fit-content; /* Faz o link encolher para o tamanho do conteúdo */
    margin: 0 auto;    
}

/* Estilo para a IMAGEM SVG do logo (o .main-sky-logo dentro do #logo_sky) */
.main-sky-logo {
    height: 48px; /* Altura desejada para o logo. Ajuste se necessário. */
    width: auto;  /* Mantém a proporção do SVG */
    display: block;

/* Corrigindo a cor do SVG: como o SVG original é vermelho, e queremos ele branco. */
/* Isso aplica a transformação à imagem SVG. */
   /* filter: invert(1) grayscale(1) brightness(2.5); /* Inverte (vermelho->ciano), cinza e MUITO brilhante (branco) */
    /* Use valores de brightness conforme o branco que você deseja. Valores > 1 aumentam o brilho. */
}

/* QUANDO O GATILHO É ATIVADO (via JS no hover do menu) */
#page-header.header-is-triggered .main-sky-logo { /* *** ALTERAÇÃO AQUI: Aplica a animação na CLASSE da IMAGEM SVG *** */
    animation: zoom-and-fade-reset 0.6s cubic-bezier(0.32, 1, 0.46, 1);
}
#page-header.header-is-triggered .registered-symbol { /* *** ALTERAÇÃO AQUI: Aplica a animação na CLASSE da IMAGEM SVG *** */
    animation: zoom-and-fade-reset 0.6s cubic-bezier(0.32, 1, 0.46, 1);
}
#page-header.header-is-triggered::before,
#page-header.header-is-triggered::after {
    animation: shake-it 0.2s ease-in-out;
}
#logo_sky::before {
    content: 'SKY';
    position: absolute;
    font-family: system-ui;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 57px;
    font-weight: 800;
    margin: -11px 0 0px -5px;
    font-style: italic;
    line-height: 0;
    color: #fbf9f900;
    text-shadow: 0 0 2px rgb(209 34 33 / 98%), 0 0 5px rgba(255, 255, 255, 0.7), 0 0 10px rgb(255 255 255 / 21%), 0 0 15px rgb(255 255 255 / 0%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease-out;
}


/* ============================================================= */
/* ATIVAÇÃO DO FANTASMA (MESMA LÓGICA DE ANTES)                  */
/* ============================================================= */


/* O fantasma de luz aparece no lugar */
/* QUANDO O GATILHO É ATIVADO, A GENTE RODA A ANIMAÇÃO */
#page-header.header-is-triggered #logo_sky::before {
    /* Tira a opacidade da transição para não conflitar com a animação de entrada */
    opacity: 1;
    transition: none; /* Desliga a transição na entrada */
    
    /* Roda nossa animação! */
    animation: ghostly-wobble 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

 
/* =================================================================== */
/* 2. MENU DE NAVEGAÇÃO - ALTERNATIVA 1 (DESTAQUE E PROFUNDIDADE) */
/* =================================================================== */


/* Variáveis Globais de Cores, Sombras e Bordas */
:root {
    --sky-blue: #007bff;
    --sky-red: #dc3545; /* Vermelho oficial SKY */
    --success-green: #28a745;
    --text-dark: #333;
    --text-medium: #555;
    --white: #ffffff;
    --shadow-subtle: 0 8px 25px rgba(0, 0, 0, 0.08);
    --border-radius-card: 12px;
    --sky-logo-svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 425 170'%3E%3Cpath fill='%23E30609' fill-rule='evenodd' d='M139.683 53.9c-20.756-12.09-34.59-14.851-49.42-14.851-8.233 0-17.456 2.068-18.778 10.361-.988 7.25 5.602 8.98 19.44 12.097 25.367 5.522 51.063 12.782 54.354 40.075l13.845-71.52-19.441 23.839Zm191.097 2.074 37.88-51.137H425l-79.727 98.474-11.861 61.5h-48.097l13.503-68.755-24.706-44.575-32.285 36.973 43.488 76.357h-57.984l-33.945-63.573-11.535 63.573h-48.758l6.918-36.622C126.83 159.63 102.128 170 68.526 170 40.192 170 14.161 161.012 0 144.77l26.682-32.824c11.53 11.75 29.322 17.968 48.1 17.968 13.176 0 21.084-5.178 21.412-12.095.33-11.744-19.107-13.473-36.898-18.65-20.096-5.877-41.51-20.04-35.91-49.759C27.673 26.603 47.107 0 96.524 0c27.677 0 48.101 6.562 64.904 19.003l2.628-14.166h48.772L198.652 74.29l57.339-69.452h48.434l26.355 51.137Z' clip-rule='evenodd'/%3E%3C/svg%3E ");
    
}


/* ESTILOS DA HEAD/MENU (HEADER-BASE) - Combinados com suas preferências */
.header-base {
    background: linear-gradient(to bottom, #E52D27, #B31217) !important; /* Seu gradiente */
    min-height: 60px !important;
    border: none !important;
    overflow-x: clip;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important; /* Sua sombra */
    position: sticky;
    top: 0;
    z-index: 1000 !important;
    transition: all 0.3s ease-in-out !important;
}

/* Mantém a sombra quando o menu for fixo (scroll) */
.header-base.fixed {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25) !important;
}
.header-base .navbar-nav .assine-ja { 
    color: #FFF;
    font-size: 15px;
}

.header-base {
    box-shadow: inset 4px -10px 8px rgb(0 0 29 / 24%);
}
.header-base .navbar-nav > li#menu-item-168503 > a {
    box-shadow: inset 4px -10px 8px rgb(0 0 29 / 24%), inset -6px -3px 3px rgb(0 0 0 / 13%);
}

/* Estilo para o HOVER do item "0800-003-3043" */
.header-base .navbar-nav > li#menu-item-168503 > a:hover {
    bbackground-color: rgba(255, 255, 255, 0.1) !important; /* Destaque sutil */
    color: #fff;
}


/* Efeito de destaque no fundo ao passar o mouse */
.header-base .navbar-nav > li > a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Destaque sutil */
    color: #fff;
}

/* O sublinhado animado */
.header-base .navbar-nav > li > a::after {
    content: '';
    position: absolute;
    bottom: 12px; /* Posição do sublinhado */
    left: 18px;
    right: 18px;
    height: 3px; /* Sublinhado mais espesso */
    background-color: #fff;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
/* O EFEITO DE PRESSIONAR O BOTÃO (HOVER E ACTIVE) */
.header-base .navbar-nav > li > a:hover,
.header-base .navbar-nav > li.active > a {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.1) !important;
    transform: scaleX(1.04) !important;
    transition: transform 0.3s ease-out !important;
}

/* Ativa o sublinhado no hover ou quando o item está ativo */
.header-base .navbar-nav > li > a:hover::after,
.header-base .navbar-nav > li.active > a::after {
    transform: scaleX(1);
}

/* Garante que o item ativo também tenha o destaque de fundo */
.header-base .navbar-nav > li.active > a {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.logo-subtitle {
    font-family: arial;
    display: block;
    font-size: 10px;
    color: black;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    width: 125px;
    text-align: center;
    margin-top: 2px;
    margin-left: -2rem;
}
.registered-symbol {
    position: absolute;
    /* Estes valores são estimativas e podem precisar de AJUSTE FINO. */
    /* top: 0; */ /* Removido, vamos usar calc() */
    top: calc(50% - 3.2em);
    /* left: 0; */
    left: calc(50% + 7.6em);
    /* left: calc(50% + 60px + 2px); se quiser um pequeno espaçamento extra do 'Y' */

    font-size: 0.6em; /* Tamanho para o símbolo ®. AJUSTE PARA O TAMANHO PERFEITO */
    color: black;
    white-space: nowrap; /* Evita que o símbolo quebre linha */
    line-height: 0; /* Não afeta a altura da linha do pai */
    /* Opcional: Adicionar um text-shadow sutil para melhor visibilidade em fundos variados */
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
}
@media (max-width:767px) {
  .main-sky-logo {
    height: 30px; /* Altura desejada para o logo. Ajuste se necessário. */
    width: auto;  /* Mantém a proporção do SVG */
    display: block;
    margin-top: 5px;
    margin-left: 3px;

/* Corrigindo a cor do SVG: como o SVG original é vermelho, e queremos ele branco. */
/* Isso aplica a transformação à imagem SVG. */
    filter: invert(1) grayscale(1) brightness(2.5); /* Inverte (vermelho->ciano), cinza e MUITO brilhante (branco) */
    /* Use valores de brightness conforme o branco que você deseja. Valores > 1 aumentam o brilho. */
}
.logo-subtitle {
        font-family: arial;
        display: block;
        font-size: 6px;
        color: #fff;
        text-transform: uppercase;
        line-height: 0;
        white-space: nowrap;
        width: 0;
        text-align: center;
        margin-top: 4px;
        margin-left: 4px;
}
.registered-symbol {
    position: absolute;
    top: 10px;
    left: 79px;
    font-size: .8em;
    color: #fff; /* Cor branca */
    white-space: nowrap; /* Evita que o símbolo quebre linha */
    line-height: 0; /* Não afeta a altura da linha do pai */
    /* Opcional: Adicionar um text-shadow sutil para melhor visibilidade em fundos variados */
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
}
}



/* Estilo para o Texto Legal Expansível no Rodapé */

.legal-footer-container {
    max-width: 900px;
    margin: 30px auto;
    background-color: #433e3e;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    overflow: hidden;
}

.legal-toggle {
    width: 100%;
    background-color: #433e3e;
    opacity: 90;
    border: none;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #ffff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}

.legal-toggle:hover {
    background-color: #635656;
}

.legal-toggle .arrow-icon {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.legal-toggle.active .arrow-icon {
    transform: rotate(180deg); /* Vira a seta para cima */
}

.legal-text-content {
    /* Esconde o texto por padrão */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
    padding: 0 25px; /* Remove o padding quando fechado */
    color: #f2f2f2;
    font-size: 12px;
    line-height: 1.7;
}

/* Mostra o texto quando a classe .active é adicionada */
.legal-text-content.active {
    padding: 25px;
    border-top: 1px solid #e9ecef;
}

/* Estilos para o BOTÃO FLUTUANTE DE WHATSAPP */



.floating-whatsapp-btn:hover {
    background-color: #1DA851; /* Verde mais escuro no hover */
    transform: translateY(-2px); /* Leve levantada no hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

/* Estilo para o ÍCONE SVG dentro do botão flutuante */
.floating-whatsapp-btn .floating-whatsapp-icon {
    width: auto;
    height: 4vh;
    margin-right: 1px;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
}

/* Estilo para o TEXTO dentro do botão flutuante */
.floating-whatsapp-btn .floating-whatsapp-text {
    line-height: 1.2;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    white-space: nowrap; /* Garante que o texto não quebre linha */
    transition: opacity 0.3s ease; /* Para sumir/aparecer suavemente */
}

/* Estilos para o BOTÃO DE TOGGLE (abrir/fechar) */
.floating-toggle-btn {
    background-color: #cd2020;
    color: #fff;
    border: 1px solid #00000042;
    border-bottom: none;
    border-radius: 6px 6px 0px 0px;
    width: 31px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    top: -15px;
    left: 0;
    transition: transform 0.3s ease, background-color 0.3s ease;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
}

.floating-toggle-btn:hover {
    background-color: #1DA851;
}

.floating-toggle-btn .toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 12px;
    font-weight: bold;
    color: #fbf4f4;
    transition: all 0.3s ease;
    border: none;
}
/* Quando o botão flutuante está ABERTO, exibe o 'X' */
.floating-container:not(.closed) .floating-toggle-btn .toggle-icon::before {
    content: 'X'; /* O 'X' aparece aqui */
    /* Remove quaisquer estilos de borda que poderiam estar aqui antes */
    border: none;
}

/* ESTILOS PARA O ESTADO FECHADO */
.floating-container.closed {
    right: 0px;
    bottom: 8%;
}
.floating-container.closed .floating-toggle-btn {
    width: 22px;
    height: 15px;
    border-radius: 13px 0px 0px 0px;
    top:-14px;
}
.floating-container.closed .floating-whatsapp-btn {
    width: 22px;
    height: 140px;
    border-radius: 0px 0px 0px 13px;
    flex-direction: column;
    justify-content: space-around;
}
.floating-container.closed .floating-toggle-btn .toggle-icon::before {
    content: ''; /* Limpa o conteúdo para a seta aparecer */
    display: block; /* Garante que o pseudo-elemento seja um bloco */
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #fff; /* Seta apontando para a esquerda (para abrir) */
    transition: border 0.3s ease; /* Transição para a seta */
}

.floating-container.closed .floating-whatsapp-icon {
    height: 30px; /* Ajusta o tamanho do ícone quando fechado */
    margin-right: 0; /* Remove a margem direita */
    margin-bottom: 118px; /* Adiciona um pequeno espaçamento abaixo do ícone */
    width: 20px;
}

/* Ajusta o texto do whatsapp quando fechado */
.floating-container.closed .floating-whatsapp-text {
    transform: none;
    padding: 6px 0px;
    margin: 17px 0px 0px -7px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    width: auto;
    position: absolute;
    left: 75%;
    line-height: 1;
    transform: translate(-50%, -50%) rotate(270deg);
    top: 60px;
}
/* Remove estilos de obstrução se não for mais necessário */
.floating-container.is-obstructed {
    opacity: 0.25; /* Opacidade reduzida (25%) */
    transform: scale(0.45)!important; /* Efeito sutil de encolhimento */
    right: -40px;
}


/* Remove estilos de obstrução se não for mais necessário */
.floating-whatsapp-btn.is-obstructed {
    opacity: 1; /* Volta à opacidade normal */
    
    right: 0;
}
@media (min-width: 768px) and (max-width: 910px) {
.mascote-controls {
            bottom: 60px;
        right: 151px;
        color: #ffffff;
        background-color: rgb(213 36 34 / 84%);
}
}
/* Responsividade para telas menores (ajusta o tamanho e posição do botão) */
@media (max-width: 768px) {
    .floating-container {
        bottom: 25px;
    right: 4px;
    transform: scale(.8);
}
.floating-container.closed {
    bottom: 25px;
}
.floating-toggle-btn {
    left: auto;
    right: 0;
}
.floating-whatsapp-btn {
    border-radius: 13px 0px 13px 13px;
}
}

/* Estilos para o contêiner principal do rodapé (se ainda não tiver) */
.rodapetxt {
    background: #ec1d1d;
    color: white;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 10px 0px 10px 0px;
    justify-content: space-around;
    border-bottom: 37px solid #555555;
}
.faleconosco {
    text-align: left;
}
.mapasite {
    text-align: left;
}
@media (max-width: 768px) {
    .rodapetxt {
        font-size: 12px;
    }
    .logoalternativa {
    width: 27vw;
}
.registre {
    align-items: flex-start;
}
}
.registre {
    display: flex;
    background: #FFF;
    flex-wrap: nowrap;
    text-align: -webkit-center;
    flex-direction: column-reverse;
    justify-content: flex-start;
    font-weight: 700;
    box-shadow: 0px 0px 6px 5px #00000052, 1px -1px 0 #00000094, -1px 1px 0 #00000070, 1px 1px 0 #0000007d;
}
img.star-gemini {
    position: relative;
    z-index: 3;
    left: 292px;
    bottom: 77px;
    filter: drop-shadow(3px 2px 5px black);
    transition: transform 0.3s ease-in-out;
}
img.star-gemini:hover{
    transform: rotate(-360deg);
}

.registre p {
   font-size: 11px;
    color: #0a0a0ad6;
    border-top: 2px solid #00000040;
}

/* Estilos para a área da logo Gemini */
.rodape-gemini {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0px 0 0px;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

.rodape-gemini img {
    max-width: 100%;
    height: auto;
    display: block;
}