/* =================================================================
   ESTILOS GERAIS E LAYOUT
   ================================================================= */
/* =================================================================
   ESTILOS GERAIS E LAYOUT
   ================================================================= */
/* =================================================================
   ESTILOS GERAIS DO SEU SITE PÚBLICO (MANTIDOS)
   ================================================================= */
body {
    font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
body, html {
    overflow-x: hidden;
}
aside.col-lg-3 {
    padding-left: 20px;
	margin-top: 20px;
}
#coluna_da_direita {
	margin-top: 20px;
}
header #menu_topo {
    margin-left: -130px;
    margin-right: -130px;
}
@media (max-width: 991.98px) {
    #menu_topo {
        display: none !important;
    }
}
@media (min-width: 992px) {
    header #menu_topo {
        margin-left: -130px;
        margin-right: -130px;
    }
}

/* 
=================================================================
   >>> CÓDIGO DEFINITIVO PARA O PAINEL ADMINISTRATIVO <<<
================================================================= 
   Esta regra é ativada apenas em telas grandes (>= 992px)
   e sobrescreve o comportamento padrão do .offcanvas.
*/
@media (min-width: 992px) {
    /* Seleciona o sidebar DENTRO da sua coluna de layout */
    .row > .col-lg-2 > .sidebar-wrapper.offcanvas {
        
        /* Força a visibilidade, ignorando o 'hidden' do Bootstrap */
        visibility: visible !important;

        /* Remove qualquer transformação que o jogue para fora da tela */
        transform: translateX(0) !important;

        /* Comporta-se como uma coluna fixa normal */
        position: sticky;
        top: 0;
        height: 100vh;
    }
}

	
header .nav .nav-link {
    font-family: 'Roboto Slab', serif; /* <-- APLICA A NOVA FONTE */
    color: #000 !important;             /* Cor preta para os links */
    font-size: 1.2rem;                    /* Tamanho da fonte (ajuste se necessário) */
    font-weight: 500;                   /* Peso da fonte (400=normal, 500=médio, 700=negrito) */
    text-transform: uppercase;          /* Texto em maiúsculas */
    letter-spacing: 1.5px;                /* Leve espaçamento entre as letras */
    padding: 0.5rem 1rem;               /* Espaçamento interno */
    transition: color 0.2s ease-in-out;
}

/* Efeito ao passar o mouse */
header .nav .nav-link:hover {
    color: #777 !important; /* Cor cinza ao passar o mouse */
}

/* Estilo para o item de dropdown ativo (se houver) */
header .nav .dropdown-toggle {
    font-family: 'Roboto Slab', serif;
}

/* Estilo para os itens dentro do dropdown */
header .dropdown-menu .dropdown-item {
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
}

/* Estilo para as miniaturas (thumbnails) da galeria */
.thumb-item {
    width: 80px;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid #e9ecef;
    border-radius: 4px;
    transition: border-color 0.2s ease-in-out;
	
}

.thumb-item.active {
    border-color: #1aa34a;
}

/* Container da Imagem Principal */
.main-image-container {
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    padding: 1rem;
}

/* Seção de Inspiração */
.inspiracao-text-section h5 {
    font-family: 'Roboto Slab', serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
    font-weight: 500;
}
.inspiracao-text-section p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333;
}

/* Ajustes de tipografia na coluna direita */
.product-ref {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: -8px;
	
}

/* =================================================================
   COMPONENTE "COMPRE JUNTO"
   ================================================================= */
/* Estilo para a área de opções (Aro e/ou Gravação) dentro do card */
.compre-junto-options {
    margin-top: 0.75rem; /* Adiciona um espaço acima das opções */
}

/* Adiciona um pequeno espaço entre as opções se houver mais de uma (ex: Aro e Gravação) */
.compre-junto-options + .compre-junto-options {
    margin-top: 0.5rem;
}
.compre-junto-section {
    border-top: 1px solid #dee2e6;
    padding-top: 2.5rem;
    margin-top: 3rem;
}
.compre-junto-title {
    font-weight: 300;
    margin-bottom: 2rem;
}
.compre-junto-items-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
    flex-wrap: wrap;
}
.compre-junto-card:has(input:disabled) {
    cursor: default;
}
.compre-junto-card.selecionado {
    border-color: #0d6efd;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
}


.compre-junto-card {
    border: 2px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 0rem;
    text-align: center;
    width: 160px; /* Reduzido para caber melhor */
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease-in-out;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}
.compre-junto-img {
    width: 100%;
    height: 100px
    object-fit: cover; /* Faz a imagem preencher o espaço, cortando o excesso */
    margin-bottom: 0.5rem;
}

.compre-junto-img-wrapper {
    position: relative; /* Torna-se a referência para o posicionamento do indicador */
    width: 100%;
    aspect-ratio: 1 / 1; /* Força um container quadrado */
    margin-bottom: 0.5rem;
    overflow: hidden;
}



.compre-junto-img-wrapper .compre-junto-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Garante que a imagem inteira apareça */
    object-position: center;
}




.compre-junto-nome {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: #495057;
    flex-grow: 1;
}
.compre-junto-preco {
    font-weight: bold;
    font-size: 1rem;
    color: #212529;
}
.compre-junto-options {
    margin-top: 1rem;
}
.compre-junto-plus {
    font-size: 1.5rem;
    color: #adb5bd;
    align-self: center;
}
.compre-junto-checkbox {
    display: none;
}
.selection-indicator2 {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    background-color: #fff;
    border: 2px solid #ced4da;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    pointer-events: none;
    opacity: 0;
}
/* 1. Estilo base do indicador (quadrado vazio com borda cinza) */
.selection-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background-color: transparent; /* Fundo transparente */
    border: 2px solid #adb5bd;    /* Borda cinza sutil */
    border-radius: 4px;
    transition: all 0.2s ease;
    pointer-events: none;
    opacity: 1;
}

/* 2. Estilo do indicador quando o card está selecionado (caixa azul) */
.compre-junto-card.selecionado .selection-indicator {
    background-color: #0d6efd; /* Fundo azul, mesma cor da borda do card */
    border-color: #0d6efd;     /* Borda azul */
}

/* 3. A mágica: Desenhando o "V" branco com CSS quando selecionado */
.compre-junto-card.selecionado .selection-indicator::after {
    content: '';
    position: absolute;
    /* Posição e tamanho do "V" dentro da caixa de 24px */
    left: 7px;
    top: 2px;
    width: 7px;
    height: 14px;
    /* O "V" é feito de bordas brancas */
    border: solid white;
    /* Desenha apenas as bordas da direita e de baixo, com 3px de espessura */
    border-width: 0 3px 3px 0;
    /* Gira o formato em 45 graus para criar o "V" */
    transform: rotate(45deg);
}
/* 3. O '☑️' (check) que só aparece quando selecionado */
.2selection-indicator::after {
    content: ''; /* Começa vazio */
    font-size: 18px;
    color: #0d6efd; /* Cor do check */
    opacity: 0; /* Escondido por padrão */
    transition: opacity 0.2s ease;
}

/* 4. Estilo do indicador quando o card está selecionado */
.2compre-junto-card.selecionado .selection-indicator {
    border-color: #0d6efd; /* Borda azul para destaque */
}

/* 5. Mostra o '☑️' quando o card está selecionado */
.2compre-junto-card.selecionado .selection-indicator::after {
    content: '☑️'; /* Adiciona o caractere de check */
    opacity: 1;    /* Torna o check visível */
}


.2compre-junto-card.selecionado .selection-indicator {
    opacity: 1;
    background-color: #0d6efd;
    border-color: #0d6efd;
}
.2compre-junto-card.selecionado .selection-indicator::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.compre-junto-total-bloco {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
}

/* ================================================== */
/* ESTILOS PARA A BARRA DE OFERTA COM TIMER (REVISADO)*/
/* ================================================== */
#timer-bar {
    display: flex;
    justify-content: center;  /* <<< A MÁGICA ACONTECE AQUI: Centraliza horizontalmente */
    align-items: center;      /* Alinha verticalmente, para o caso de quebra de linha */
    flex-wrap: wrap;          /* Permite que quebre a linha em telas muito pequenas */
    gap: 0.5em;               /* Adiciona um pequeno espaço entre a frase e o preço */

    /* Estilos visuais que você já tinha */
    background: linear-gradient(180deg, #1b8a61, #5dcea3);
    color: black;
    padding: 10px 15px;
    font-size: 1.3rem;
    font-weight: 500;
    text-align: center;
    animation: pulse-bg 2s infinite;
}

.timer-bar-total {
    font-weight: bold;
    color: #f8ff63; /* Amarelo para dar mais destaque ao preço */
}

#countdown-timer {
    font-weight: bold;
    color: #f8ff63; /* Mantém o destaque no timer */
}

@keyframes pulse-bg {
    0% { background-color: #1D976C; }
    50% { background-color: #137a54; }
    100% { background-color: #1D976C; }
}
/* Nova linha de desconto no resumo */
#desconto-timer-linha {
    color: #0d6efd; /* Azul para diferenciar */
}

.checkout-card, .oferta-card, .resumo-card { background-color: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 25px; height: 100%; }
.oferta-card { background-color: #fffbeb; border-color: #ffc107; }
.resumo-card { background-color: #f8f9fa; }

.oferta-bump { background-color: #fffbeb; border: 1px dashed #ffc107; }

.nav-tabs .nav-link { color: #6c757d; }
/*.nav-tabs .nav-link.active { color: #000; font-weight: bold; }*/
.nav-tabs .nav-link.active { color: #0d6efd !important; /* Cor azul padrão do Bootstrap */}

/* =================================================================
   OUTROS ESTILOS
   ================================================================= */
.pix-offer-box {
    background-color: #f0fff4;
    border: 1px solid #c3e6cb;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    text-align: center;
    margin-top: 1rem;
}
.pix-price-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: #155724;
    text-transform: uppercase;
}
.pix-price-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #155724;
}

/* No seu style.css */

.pix-offer-box-small {
    background-color: #f0fff4;
    border: 1px solid #c3e6cb;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    text-align: center;
    margin-top: 0.5rem;
    width: 90%; /* Ocupa 90% da largura do card */
    margin-left: auto;
    margin-right: auto;
}

.pix-price-title-small {
    font-size: 0.65rem; /* Fonte menor */
    font-weight: 500;
    color: #155724;
    text-transform: uppercase;
    line-height: 1.2;
}

.pix-price-amount-small {
    font-size: 1rem; /* Tamanho do preço */
    font-weight: 700;
    color: #155724;
    line-height: 1.2;
}
/* =================================================================
   MELHORIAS DE CONVERSÃO PARA O CARD DE PRODUTO
   ================================================================= */
/* 1. DANDO MAIS DESTAQUE AO PREÇO PRINCIPAL */
.product-card-final .price-main-grid {
    font-size: 1.5rem; /* Aumentado para ser o elemento principal */
    font-weight: 700;
    line-height: 1;
    color: #333; /* Cor mais escura para melhor leitura */
    margin-bottom: 0.25rem; /* Reduz a margem para aproximar do parcelamento */
}
/*(com o botão "Eu Quero!") alinhando todos eles.*/
.product-card-final {
    display: flex;
    flex-direction: column;
}
/* =================================================================
   PADRONIZAÇÃO DAS IMAGENS DOS PRODUTOS NA VITRINE
   ================================================================= */
/* Define uma altura fixa e um comportamento para a imagem */
.product-card-image {
    width: 100%;             /* A imagem ocupa toda a largura do container */
    height: 270px;           /* ALTURA FIXA - este é o valor chave. Ajuste se necessário. */
    object-fit: contain;     /* Garante que a imagem inteira apareça, sem cortar, dentro do espaço definido. */
    object-position: center; /* Centraliza a imagem no espaço */
    background-color: #ffffff; /* Fundo branco para imagens com transparência */
}


/* 2. BOTÃO DE COMPRA ATRAENTE E PERSUASIVO */
.btn-comprar {
    background: linear-gradient(180deg, #1db954 0%, #1aa34a 100%); /* Degradê verde sutil */
    color: #fff;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(25, 135, 84, 0.3); /* Sombra que combina com a cor */
    transition: all 0.3s ease-in-out;
}
/* EFEITO AO PASSAR O MOUSE - GATILHO MENTAL DE "AÇÃO" */
.btn-comprar:hover {
    color: #fff;
    transform: translateY(-3px); /* Efeito de "levantar" o botão */
    box-shadow: 0 7px 20px rgba(25, 135, 84, 0.4); /* Sombra mais forte */
}

/* =================================================================
   BOTÃO FLUTUANTE DO WHATSAPP
   ================================================================= */
.whatsapp-float {
    position: fixed;
    width: 90px;
    height: 90px;
    bottom: 90px; /* Posição do botão na parte inferior */
    right: 70px; /* Posição do botão na direita */
    background-color: #25d366;
    color: #FFF;
    border-radius: 50%; /* Deixa o botão redondo */
    text-align: center;
    font-size: 50px; /* Tamanho do ícone */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 1030; /* Garante que ele fique acima da maioria dos elementos */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease-in-out;
    /* Duração total da animação mantida em 3s */
    animation: whatsapp-pulse 3s infinite; /* Apenas uma animação combinando pulso e tremor */
}

.whatsapp-float:hover {
    transform: scale(1.1); /* Efeito de zoom ao passar o mouse */
    color: #FFF;
}

/* Animação de pulso e tremor sincronizados (duas ondas) */
@keyframes whatsapp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
        transform: rotate(0deg); /* Garante posição inicial */
    }
    /* Tremor mais pronunciado e LENTO para a primeira onda */
    /* Espaçando mais os keyframes do tremor para que ele dure mais tempo */
    1% { /* Início do tremor da primeira onda */
        transform: rotate(15deg);
    }
    4% { /* Movido para 4% */
        transform: rotate(-15deg);
    }
    7% { /* Movido para 7% */
        transform: rotate(15deg);
    }
    10% { /* Fim do tremor para a primeira onda - Movido para 10% */
        transform: rotate(0deg);
    }
    /* Primeira onda se expande mais longe (30px para mais longe) e mais lenta */
    20% { /* Onde a primeira onda atinge sua expansão máxima */
        box-shadow: 0 0 0 30px rgba(37, 211, 102, 0); /* Aumentado para 30px */
    }


    /* Início da segunda onda e seu tremor mais pronunciado e LENTO */
    /* O "Reinicia o pulso" ainda em 20% para manter o intervalo entre as ondas como antes */
    20% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
        transform: rotate(0deg); /* Garante que não há tremor antes do novo pulso */
    }
    /* Espaçando mais os keyframes do tremor para que ele dure mais tempo */
    22% { /* Início do tremor da segunda onda */
        transform: rotate(15deg);
    }
    25% { /* Movido para 25% */
        transform: rotate(-15deg);
    }
    28% { /* Movido para 28% */
        transform: rotate(15deg);
    }
    31% { /* Fim do tremor para a segunda onda - Movido para 31% */
        transform: rotate(0deg);
    }
    /* Segunda onda se expande mais longe (30px) e mais lenta */
    75% { /* Onde a segunda onda atinge sua expansão máxima */
        box-shadow: 0 0 0 30px rgba(37, 211, 102, 0); /* Aumentado para 30px */
    }

    /* O restante do tempo (75% a 100%) é o intervalo de "descanso" */
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); /* Garante que a sombra desapareça */
        transform: rotate(0deg); /* Permanece parado no final */
    }
}

/* Cores aproximadas das marcas */
.bi-instagram {
    /* Degradê para o Instagram é mais complexo em CSS puro para ícones.
       Uma cor sólida aproximada: */
    color: #E1306C; /* Cor vibrante de rosa/vermelho */
}

#whatsapp_topo {
    color: #25D366; /* Verde do WhatsApp */
}

.bi-facebook {
    color: #1877F2; /* Azul do Facebook */
}

.bi-tiktok {
    /* 1. Define a cor base do ícone como preto */
    color: #010101; /* Um preto quase puro, como no logo original */

    /* 2. Cria as "sombras" coloridas para o efeito glitch/3D */
    /* A mágica acontece aqui: usamos duas sombras sem desfoque (blur = 0) */
    /* Sintaxe: text-shadow: [offset-x] [offset-y] [blur] [color], [outra sombra...]; */
    text-shadow:
        2px 2px 0 #ff0050,  /* Sombra Magenta (vermelho/rosa) - deslocada para a direita e para baixo */
        -2px -2px 0 #00f2ea; /* Sombra Ciano (azul/verde) - deslocada para a esquerda e para cima */
        
    /* 3. Adiciona uma transição suave para o efeito hover (opcional, mas recomendado) */
    transition: transform 0.2s ease-in-out;
}

/* Efeito de destaque sutil ao passar o mouse sobre o ícone */
.bi-tiktok:hover {
    transform: scale(1.1); /* Aumenta levemente o tamanho do ícone */
}


/* ================================================== */
/* ESTILOS PARA A BARRA DE OFERTA COM TIMER (REVISADO)*/
/* ================================================== */
.timer-bar {
    display: flex;
    justify-content: center;  /* <<< A MÁGICA ACONTECE AQUI: Centraliza horizontalmente */
    align-items: center;      /* Alinha verticalmente, para o caso de quebra de linha */
    flex-wrap: wrap;          /* Permite que quebre a linha em telas muito pequenas */
    gap: 0.5em;               /* Adiciona um pequeno espaço entre a frase e o preço */

    /* Estilos visuais que você já tinha */
    background: linear-gradient(90deg, #1D976C 0%, #137a54 100%);
    color: white;
    padding: 10px 15px;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    animation: pulse-bg 2s infinite;
}



/* =================================================================
   NOVOS ESTILOS PERSUASIVOS PARA BOTÕES DE COMPRA
   ================================================================= */

/* ESTILO PRINCIPAL - ALTA VISIBILIDADE */
.btn-comprar-principal {
    background: linear-gradient(45deg, #28a745, #218838); /* Verde vibrante */
    color: #fff !important;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 14px 20px;
    border: none;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    animation: pulse-animation 2s infinite;
}

.btn-comprar-principal:hover {
    transform: translateY(-4px) scale(1.02); /* Efeito de elevação e leve aumento */
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.5);
}

/* Animação de pulso sutil para chamar a atenção */
@keyframes pulse-animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}


/* ESTILO SECUNDÁRIO - AINDA ATRAENTE, MAS MENOS DOMINANTE */
.btn-comprar-secundario {
    background: linear-gradient(45deg, #007bff, #0069d9); /* Azul confiável */
    color: #fff !important;
    font-weight: bold;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.btn-comprar-secundario:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

/* Container que envolve a imagem e o selo */
.product-image-wrapper {
    position: relative; /* ESSENCIAL para o posicionamento do selo */
}

/* Estilo do selo de desconto */
.discount-badge-v2 {
    position: absolute;
    top: 0px;      /* Distância do topo */
    left: 15px;     /* Distância da esquerda */
    z-index: 10;
    background-color: #dc3545; /* Vermelho */
    color: white;              /* Branco */
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 2px;
}


/* Estilo para destacar a label do input radio selecionado */
.form-check input[type="radio"]:checked + .form-check-label {
    background-color: #e9f0f9; /* Cor de fundo suave */
    border-left: 4px solid #007bff; /* Uma borda colorida na lateral */
    font-weight: bold; /* Deixa o texto em negrito */
    color: #004085; /* Cor do texto mais escura */
    transition: background-color 0.3s ease; /* Transição suave */
}








/* 1. Esconde o checkbox padrão do navegador */
.checkbox-oculto {
  display: none;
}

/* 2. Estiliza a label para parecer o checkbox */
/* Este é o nosso "container" para os pseudo-elementos */
.checkbox-estilizado {
  position: relative; /* FUNDAMENTAL para que o 'V' seja posicionado corretamente */
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  padding-left: 40px; /* Espaço para o checkbox */
}

/* 3. Cria o quadrado do checkbox (a parte que muda de cor) */
.checkbox-estilizado::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%); /* Centraliza verticalmente */
  width: 28px;
  height: 28px;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
}

/* 4. Cria o "V" (o tick) */
.checkbox-estilizado::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 9px; /* Posição horizontal do 'V' */
  transform: translateY(-50%) rotate(45deg) scale(0); /* Esconde o V e o prepara para a animação */
  width: 8px;
  height: 14px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transition: all 0.2s ease-in-out;
}

/* 5. Estilo quando o checkbox é marcado */
.checkbox-oculto:checked + .checkbox-estilizado::before {
  background-color: #007bff; /* Fundo azul quando marcado */
  border-color: #007bff; /* Borda azul quando marcado */
}

/* 6. Mostra e anima o "V" quando o checkbox é marcado */
.checkbox-oculto:checked + .checkbox-estilizado::after {
  transform: translateY(-50%) rotate(45deg) scale(1); /* Faz o V aparecer com uma animação */
}