@import 'ProjetoTag.Client.h8xgdvnwvj.bundle.scp.css';

/* _content/ProjetoTag/Components/Account/Pages/Login.razor.rz.scp.css */
body[b-ls52a6sbbv], html[b-ls52a6sbbv] {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Removido o '::deep' daqui, pois .login-page-body é um elemento local deste componente */
.login-page-body[b-ls52a6sbbv] {
    /* A altura é calculada para ocupar a tela inteira MENOS a altura da navbar.
       Se sua navbar for diferente de 8rem, ajuste o valor aqui. */
    min-height: calc(100vh - 8rem);
    /* As regras de centralização que agora vão funcionar */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Estilos de fundo */
/*    background: transparent;*/
    position: relative;
    overflow: hidden; /* Mantém o overflow aqui para os pseudo-elementos */
}

    /* Os pseudo-elementos não precisam de ::deep porque são filhos diretos do seletor anterior */
    .login-page-body[b-ls52a6sbbv]::before,
    .login-page-body[b-ls52a6sbbv]::after {
        content: '';
        position: absolute;
        opacity: 0.03;
        border-radius: 50%;
/*        animation: float 8s ease-in-out infinite;*/
    }

    .login-page-body[b-ls52a6sbbv]::before {
        width: 300px;
        height: 300px;
        top: 20%;
        left: 20%;
    }

    .login-page-body[b-ls52a6sbbv]::after {
        width: 200px;
        height: 200px;
        bottom: 20%;
        right: 20%;
/*        animation-direction: reverse;*/
    }


/* Os estilos para o card e seus filhos também não precisam de ::deep,
   pois o Blazor vai aplicar o escopo automaticamente. */
.login-card[b-ls52a6sbbv] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 40px;
    border-radius: 20px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.brand[b-ls52a6sbbv] {
    text-align: center;
    color: #333;
    font-size: 28px;
    /* ... etc ... */
}

/* Continue com o resto dos seus estilos para .input-group, .input-field, .login-btn, etc.,
   TODOS SEM O '::deep' no início. */

.input-group[b-ls52a6sbbv] {
    position: relative;
    margin-bottom: 25px;
}

[b-ls52a6sbbv] .input-field {
    width: 100%;
    padding: 15px 50px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    color: #333;
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
}

    [b-ls52a6sbbv] .input-field::placeholder {
        color: rgba(0, 0, 0, 0.5);
    }

    [b-ls52a6sbbv] .input-field:focus {
        border-color: rgba(0, 0, 0, 0.3);
        background: rgba(0, 0, 0, 0.08);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    }

[b-ls52a6sbbv] .input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 0, 0, 0.5);
    font-size: 18px;
    z-index: 2;
}

[b-ls52a6sbbv] .login-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #1a1a1a 0%, #374151 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

    [b-ls52a6sbbv] .login-btn:hover {
        background: linear-gradient(135deg, #1a1a1a 0%, #374151 100%);
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }

    [b-ls52a6sbbv] .login-btn:active {
        transform: translateY(0);
    }

[b-ls52a6sbbv] .checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    color: rgba(0, 0, 0, 0.7);
    font-size: 14px;
}

    [b-ls52a6sbbv] .checkbox-container input {
        margin-right: 8px;
        accent-color: #333;
    }

    [b-ls52a6sbbv] .checkbox-container label {
        cursor: pointer;
        user-select: none;
    }

/* Mensagens de erro */
[b-ls52a6sbbv] .text-danger {
    color: #ff6b6b !important;
    font-size: 14px;
    margin-bottom: 15px;
    text-align: center;
}

    [b-ls52a6sbbv] .text-danger ul {
        list-style: none;
        padding: 0;
    }

    [b-ls52a6sbbv] .text-danger li {
        margin-bottom: 5px;
    }

/* Status Message */
[b-ls52a6sbbv] .status-message {
    background: rgba(255, 107, 107, 0.2);
    border: 1px solid rgba(255, 107, 107, 0.4);
    color: #ff6b6b;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 14px;
}

/* Links */
[b-ls52a6sbbv] .login-links {
    text-align: center;
    margin-top: 25px;
}

    [b-ls52a6sbbv] .login-links a {
        color: rgba(0, 0, 0, 0.6);
        text-decoration: none;
        font-size: 14px;
        transition: color 0.3s ease;
        display: block;
        margin-bottom: 10px;
    }

        [b-ls52a6sbbv] .login-links a:hover {
            color: #333;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

/* Responsivo */
@media (max-width: 480px) {
    [b-ls52a6sbbv] .login-card {
        padding: 30px 20px;
        margin: 20px;
    }

    [b-ls52a6sbbv] .brand {
        font-size: 24px;
        margin-bottom: 30px;
    }

    [b-ls52a6sbbv] .input-field {
        padding: 12px 45px;
    }

    [b-ls52a6sbbv] .input-icon {
        font-size: 16px;
    }
}

[b-ls52a6sbbv] .icon-brand {
    display: flex; /* Adicionado para ativar o flexbox */
    align-items: center; /* Adicionado para centralizar verticalmente */
    justify-content: center; /* Mantido para centralizar horizontalmente */
    font-size: 55px !important;
    text-align: center; /* Opcional com flexbox, mas pode ser mantido */
}
/* _content/ProjetoTag/Components/Account/Pages/Register.razor.rz.scp.css */
.register-container[b-ovzphmkklp] {
    display: grid;
    grid-template-columns: 1fr 480px;
    align-items: center; /* Alinha o conteúdo no TOPO */
    gap: 80px;
    width: 100%;
    max-width: 1400px;
    margin: auto;
    padding: 50px 20px;
    margin-top: 80px;
}

/* --- Coluna da Esquerda (Celular + Texto) --- */
.left-pane[b-ovzphmkklp] {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Alinha o conteúdo à direita desta coluna */
    gap: 40px; /* Espaço entre o celular e o bloco de texto */
}

.phone-wrapper[b-ovzphmkklp] {
    flex-shrink: 0;
}

.text-wrapper[b-ovzphmkklp] {
    max-width: 400px;
    color: #333;
}

.brand-title[b-ovzphmkklp] {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.hero-text[b-ovzphmkklp] {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
}

.features[b-ovzphmkklp] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.feature-item[b-ovzphmkklp] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
}

    .feature-item i[b-ovzphmkklp] {
        color: #E63946;
        font-size: 1.25rem;
    }


/* --- Coluna da Direita (Formulário) --- */
.right-pane[b-ovzphmkklp] {
    display: flex;
    justify-content: flex-start; /* Alinha o formulário à esquerda desta coluna */
    margin-top: 80px;
}

.form-card[b-ovzphmkklp] {
    background-color: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    width: 100%;
    max-width: 450px;
}

.form-header[b-ovzphmkklp], .form-group[b-ovzphmkklp], .text-danger[b-ovzphmkklp] {
    /* Estilos do formulário permanecem os mesmos */
    text-align: left;
}

.form-header[b-ovzphmkklp] {
    text-align: center;
    margin-bottom: 30px;
}

.form-title[b-ovzphmkklp] {
    font-size: 1.8rem;
    font-weight: bold;
    color: #495057;
}

.form-subtitle[b-ovzphmkklp] {
    color: #6c757d;
}

.form-group[b-ovzphmkklp] {
    margin-bottom: 20px;
}

.form-label[b-ovzphmkklp] {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 0.9rem;
}

.form-control[b-ovzphmkklp] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 1rem;
}

.submit-btn[b-ovzphmkklp] {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 8px;
    background-color: #555;
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    text-align: center;
}

    .submit-btn:hover[b-ovzphmkklp] {
        background-color: #495057;
    }

.text-danger[b-ovzphmkklp] {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 4px;
}

/* --- INÍCIO: CSS APENAS PARA O NOVO CELULAR EM DIAGONAL --- */
.phone-container[b-ovzphmkklp] {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.phone[b-ovzphmkklp] {
    width: 180px;
    height: 380px;
    background: linear-gradient(145deg, #2c3e50, #34495e);
    border-radius: 25px;
    position: relative;
    margin-right: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.2);
    /* A propriedade principal para o efeito diagonal */
    transform: rotateX(15deg) rotateY(-25deg) rotateZ(-10deg);
/*    animation: float 6s ease-in-out infinite;*/
    transition: transform 0.3s ease;
}

    .phone:hover[b-ovzphmkklp] {
        transform: rotateX(10deg) rotateY(-10deg) scale(1.02);
    }

@keyframes float-b-ovzphmkklp {
    0%, 100% {
        transform: rotateX(15deg) rotateY(-25deg) rotateZ(-10deg) translateY(0px);
    }

    50% {
        transform: rotateX(15deg) rotateY(-25deg) rotateZ(-10deg) translateY(-8px);
    }
}

.phone-screen[b-ovzphmkklp] {
    width: 160px;
    height: 340px;
    background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
    border-radius: 18px;
    margin: 20px auto;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}

.camera-module[b-ovzphmkklp] {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 60px;
    height: 25px;
    background: linear-gradient(145deg, #1a1a1a, #333);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 3px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

.camera-lens[b-ovzphmkklp] {
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #0f0f0f, #333);
    border-radius: 50%;
    border: 1px solid #444;
    position: relative;
}

    .camera-lens[b-ovzphmkklp]::after {
        content: '';
        position: absolute;
        width: 4px;
        height: 4px;
        background: radial-gradient(circle, #222, #000);
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.flash[b-ovzphmkklp] {
    width: 6px;
    height: 6px;
    background: linear-gradient(45deg, #fff, #ddd);
    border-radius: 50%;
}

.stag-logo-container[b-ovzphmkklp] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55px;
    height: 55px;
    background: radial-gradient(circle, #ff4444, #cc0000);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
/*    box-shadow: 0 6px 12px rgba(255, 68, 68, 0.3), inset 0 1px 3px rgba(255, 255, 255, 0.2), inset 0 -1px 3px rgba(0, 0, 0, 0.2);*/
    animation: none !important;
    box-shadow: none !important;
    transition: transform 0.3s ease;
}

    .stag-logo-container:hover[b-ovzphmkklp] {
        transform: translate(-50%, -50%) scale(1.1);
    }

@keyframes glow-b-ovzphmkklp {
    /* Animação desativada */
}

.stag-logo[b-ovzphmkklp] {
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    letter-spacing: 1px;
}

.stag-tag[b-ovzphmkklp] {
    color: #fff;
    font-weight: normal;
    font-size: 9px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    margin-top: -2px;
}

.samsung-logo[b-ovzphmkklp] {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    color: #666;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.side-buttons[b-ovzphmkklp] {
    position: absolute;
    right: -2px;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.button[b-ovzphmkklp] {
    width: 4px;
    height: 30px;
    background: linear-gradient(90deg, #2c3e50, #34495e);
    border-radius: 2px;
    box-shadow: 1px 0 2px rgba(0,0,0,0.2), inset -1px 0 1px rgba(255,255,255,0.1);
}

.volume-up[b-ovzphmkklp] {
    height: 18px;
}

.volume-down[b-ovzphmkklp] {
    height: 18px;
}

.power[b-ovzphmkklp] {
    height: 25px;
    margin-top: 15px;
}

.screen-reflection[b-ovzphmkklp] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient( 135deg, rgba(255,255,255,0.1) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.05) 100% );
    border-radius: 18px;
    pointer-events: none;
}

@keyframes lightMove-b-ovzphmkklp {
    0%, 100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }
}

.highlight-red[b-ovzphmkklp] {
    color: #E63946; /* Tom de vermelho que usamos no Index */
}

/* _content/ProjetoTag/Components/Layout/LoginLayout.razor.rz.scp.css */
/* Main Layout Styles for Horizontal Menu */
.page-horizontal[b-1bxp4wa3qk] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content[b-1bxp4wa3qk] {
    flex: 1;
    margin-top: 8rem; /* Space for fixed navbar */
    min-height: calc(100vh - 8rem);
    background-color: rgba(246, 248, 251, 1);
}

.content[b-1bxp4wa3qk] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem !important;
}

/* Error UI */
#blazor-error-ui[b-1bxp4wa3qk] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-1bxp4wa3qk] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

    #blazor-error-ui .reload[b-1bxp4wa3qk] {
        color: red;
        text-decoration: underline;
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .main-content[b-1bxp4wa3qk] {
        margin-top: 8rem; /* Maintain same height on mobile */
        min-height: calc(100vh - 8rem);
    }

    .content[b-1bxp4wa3qk] {
        padding: 1rem !important;
    }
}
/* _content/ProjetoTag/Components/Layout/MainLayout.razor.rz.scp.css */
/* Main Layout Styles for Horizontal Menu */
.page-horizontal[b-brd9gkexyi] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content[b-brd9gkexyi] {
    flex: 1;
    margin-top: 8rem; /* Space for fixed navbar */
    min-height: calc(100vh - 8rem);
    background-color: rgba(246, 248, 251, 1);
}

.content[b-brd9gkexyi] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem !important;
}

/* Error UI */
#blazor-error-ui[b-brd9gkexyi] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-brd9gkexyi] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

    #blazor-error-ui .reload[b-brd9gkexyi] {
        color: red;
        text-decoration: underline;
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .main-content[b-brd9gkexyi] {
        margin-top: 8rem; /* Maintain same height on mobile */
        min-height: calc(100vh - 8rem);
    }

    .content[b-brd9gkexyi] {
        padding: 1rem !important;
    }
}
/* _content/ProjetoTag/Components/NavMenu.razor.rz.scp.css */
/* Horizontal Navbar Styles */
.horizontal-navbar[b-9w9azdvk6w] {
    background-color: #000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
/*    overflow: hidden;*/
}

    .horizontal-navbar[b-9w9azdvk6w]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
/*        background: radial-gradient(circle at 20% 80%, #ffffff 0%, transparent 40%), radial-gradient(circle at 80% 20%, #ffffff 0%, transparent 40%);*/
/*        opacity: 0.05;*/
/*        animation: float 20s ease-in-out infinite;*/
    }


@keyframes float-b-9w9azdvk6w {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-10%, -5%);
    }

    100% {
        transform: translate(0, 0);
    }
}

.navbar-container[b-9w9azdvk6w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 8rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Brand/Logo */
.navbar-brand a[b-9w9azdvk6w] {
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.navbar-brand .logo-s[b-9w9azdvk6w] {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: -0.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.navbar-brand .logo-tag[b-9w9azdvk6w] {
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    opacity: 0.9;
}

.navbar-brand a:hover[b-9w9azdvk6w] {
    transform: scale(1.05);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* Mobile Toggle */
.navbar-toggle[b-9w9azdvk6w] {
    display: none;
}

.navbar-toggle-label[b-9w9azdvk6w] {
    display: none;
    flex-direction: column;
    cursor: pointer;
    width: 2rem;
    height: 1.5rem;
    justify-content: space-between;
}

    .navbar-toggle-label span[b-9w9azdvk6w] {
        display: block;
        height: 3px;
        width: 100%;
        background-color: white;
        transition: all 0.3s ease;
    }

.navbar-toggle:checked + .navbar-toggle-label span:nth-child(1)[b-9w9azdvk6w] {
    transform: rotate(45deg) translate(5px, 5px);
}

.navbar-toggle:checked + .navbar-toggle-label span:nth-child(2)[b-9w9azdvk6w] {
    opacity: 0;
}

.navbar-toggle:checked + .navbar-toggle-label span:nth-child(3)[b-9w9azdvk6w] {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Main Menu */
.navbar-menu[b-9w9azdvk6w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    margin-left: 2rem;
}

.navbar-nav-left[b-9w9azdvk6w],
.navbar-nav-right[b-9w9azdvk6w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Navigation Links */
.nav-link[b-9w9azdvk6w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    color: #d7d7d7;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    white-space: nowrap;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .nav-link[b-9w9azdvk6w]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.5s ease;
    }

    .nav-link:hover[b-9w9azdvk6w]::before {
        left: 100%;
    }

    .nav-link:hover[b-9w9azdvk6w] {
        background-color: rgba(255, 255, 255, 0.15);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .nav-link.active[b-9w9azdvk6w] {
        background-color: rgba(255, 255, 255, 0.25);
        color: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

/* Cart Link */
.nav-cart[b-9w9azdvk6w] {
    position: relative;
}

.cart-text[b-9w9azdvk6w] {
    display: inline;
}

/* Bootstrap Icons */
.bi[b-9w9azdvk6w] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-size: cover;
    flex-shrink: 0;
}

.bi-house-door-fill-nav-menu[b-9w9azdvk6w] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-9w9azdvk6w] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-lock' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-9w9azdvk6w] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-9w9azdvk6w] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-9w9azdvk6w] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-9w9azdvk6w] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-cart-nav-menu[b-9w9azdvk6w] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-cart' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
}

/* Dropdown Styles */
.nav-dropdown[b-9w9azdvk6w] {
    position: relative;
}

.dropdown-toggle[b-9w9azdvk6w] {
    cursor: pointer;
}

.dropdown-arrow[b-9w9azdvk6w] {
    font-size: 0.7rem;
    margin-left: 0.3rem;
    transition: transform 0.3s ease;
}

.nav-dropdown:hover .dropdown-arrow[b-9w9azdvk6w] {
    transform: rotate(180deg);
}

[b-9w9azdvk6w] .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: rgba(0, 0, 0, 0.95);
    min-width: 200px;
    border-radius: 6px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

[b-9w9azdvk6w] .nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

[b-9w9azdvk6w] .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
}

    [b-9w9azdvk6w] .dropdown-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
    }

.dropdown-form[b-9w9azdvk6w] {
    margin: 0;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .navbar-container[b-9w9azdvk6w] {
        padding: 0 1rem;
    }

    .navbar-toggle-label[b-9w9azdvk6w] {
        display: flex;
    }

    .navbar-menu[b-9w9azdvk6w] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.98);
        flex-direction: column;
        padding: 1rem;
        margin: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .navbar-toggle:checked ~ .navbar-menu[b-9w9azdvk6w] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .navbar-nav-left[b-9w9azdvk6w],
    .navbar-nav-right[b-9w9azdvk6w] {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .nav-link[b-9w9azdvk6w] {
        width: 100%;
        justify-content: flex-start;
        padding: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

        .nav-link:last-child[b-9w9azdvk6w] {
            border-bottom: none;
        }

    .cart-text[b-9w9azdvk6w] {
        display: inline;
    }

    .dropdown-menu[b-9w9azdvk6w] {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background-color: rgba(255, 255, 255, 0.05);
        margin-top: 0.5rem;
    }

    .nav-dropdown:hover .dropdown-menu[b-9w9azdvk6w] {
        display: block;
    }
}

@media (max-width: 480px) {
    .navbar-brand .logo-s[b-9w9azdvk6w] {
        font-size: 2.5rem;
    }

    .navbar-brand .logo-tag[b-9w9azdvk6w] {
        font-size: 1rem;
    }

    .navbar-container[b-9w9azdvk6w] {
        height: 3.5rem;
    }

    .cart-text[b-9w9azdvk6w] {
        display: none;
    }
}

.icons-menu-size[b-9w9azdvk6w]{
    font-size: 15px;
}

/* Container principal do dropdown */
.nav-dropdown[b-9w9azdvk6w] {
    position: relative;
    display: inline-block;
}

    /* O menu que fica escondido */
    .nav-dropdown .dropdown-menu[b-9w9azdvk6w] {
        display: none; /* Escondido por padr�o */
        position: absolute;
        right: 0;
        background-color: #333;
        min-width: 180px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
        z-index: 1001;
        border-radius: 8px;
        padding: 5px 0;
    }

        /* A M�GICA: Quando a classe .show est� presente, o menu aparece! */
        .nav-dropdown .dropdown-menu.show[b-9w9azdvk6w] {
            display: block;
        }

    /* Estilo para os itens dentro do menu */
    .nav-dropdown .dropdown-item[b-9w9azdvk6w] {
        color: white;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        background: none;
        border: none;
        width: 100%;
        text-align: left;
        cursor: pointer;
    }

        .nav-dropdown .dropdown-item:hover[b-9w9azdvk6w] {
            background-color: #555;
        }

/* Remove o estilo padr�o do bot�o dentro do form */
.dropdown-form button.dropdown-item[b-9w9azdvk6w] {
    font-size: 14px;
    font-family: inherit;
}

.logo-imagem[b-9w9azdvk6w] {
    height: 30px; /* Defina a altura desejada para o seu logo */
    width: auto; /* O 'auto' mant�m a propor��o correta da imagem */
    margin-bottom: 10px;
}
/* _content/ProjetoTag/Components/Pages/Home.razor.rz.scp.css */
/* Components/HeroSection.razor.css */

.hero-section[b-mvantq8veb] {
    background-color: #1a1a1a; /* Cor de fundo escura */
    color: #ffffff;
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.hero-container[b-mvantq8veb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    width: 100%;
    gap: 40px;
}

/* Conteúdo da Esquerda (Texto e Botões) */
.text-content[b-mvantq8veb] {
    flex: 1;
    max-width: 550px;
}

h1[b-mvantq8veb] {
    font-size: 3.5rem; /* 56px */
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 20px;
}

    h1 .highlight[b-mvantq8veb] {
        color: #E63946; /* Tom de vermelho, ajuste conforme a cor exata */
    }

p[b-mvantq8veb] {
    font-size: 1.125rem; /* 18px */
    color: #d1d1d1;
    margin-bottom: 30px;
}

.button-group[b-mvantq8veb] {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.btn[b-mvantq8veb] {
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary[b-mvantq8veb] {
    background-color: #E63946;
    color: white;
}

    .btn-primary:hover[b-mvantq8veb] {
        background-color: #d62839;
    }

.btn-secondary[b-mvantq8veb] {
    background-color: transparent;
    border-color: #ffffff;
    color: white;
}

    .btn-secondary:hover[b-mvantq8veb] {
        background-color: white;
        color: #1a1a1a;
    }

.features[b-mvantq8veb] {
    display: flex;
    gap: 25px;
    font-size: 0.875rem; /* 14px */
    color: #a8a8a8;
}

    .features span[b-mvantq8veb] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

/* Conteúdo da Direita (Imagem) */
.image-content[b-mvantq8veb] {
    flex: 1;
    display: flex;
    justify-content: center;
}

    .image-content img[b-mvantq8veb] {
        max-width: 100%;
        height: auto;
        border-radius: 15px;
    }

/* Ajustes para Telas Menores (Responsividade) */
@media (max-width: 992px) {
    .hero-container[b-mvantq8veb] {
        flex-direction: column;
        text-align: center;
    }

    .text-content[b-mvantq8veb] {
        order: 2; /* Texto fica abaixo da imagem em telas pequenas */
    }

    .image-content[b-mvantq8veb] {
        order: 1;
        margin-bottom: 40px;
    }

    .button-group[b-mvantq8veb] {
        justify-content: center;
    }

    .features[b-mvantq8veb] {
        justify-content: center;
    }
}

.scroll-down-arrow[b-mvantq8veb] {
    position: absolute;
    bottom: 20px; /* Distância da parte inferior */
    left: 50%;
    transform: translateX(-50%); /* Centraliza horizontalmente */
    color: white;
    font-size: 2rem;
    cursor: pointer; /* Indica que é interativo (opcional) */
    animation: bounce-b-mvantq8veb 1.5s infinite ease-in-out; /* Aplica a animação */
}

/* Animação de "bounce" (subir e descer) */
@keyframes bounce-b-mvantq8veb {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(-50%);
    }

    40% {
        transform: translateY(-10px) translateX(-50%);
    }

    60% {
        transform: translateY(-5px) translateX(-50%);
    }
}

/* ComparisonSection */

/* Components/ComparisonSection.razor.css */

.comparison-section[b-mvantq8veb] {
    background-color: #ffffff; /* Fundo branco para a seção */
    padding: 80px 20px;
}

.container[b-mvantq8veb] {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

.section-header[b-mvantq8veb] {
    text-align: center;
    margin-bottom: 50px;
}

    .section-header h2[b-mvantq8veb] {
        font-size: 2.5rem; /* 40px */
        font-weight: bold;
        color: #333;
        margin-bottom: 15px;
    }

    .section-header .highlight-red[b-mvantq8veb] {
        color: #E63946; /* Mesmo vermelho da seção anterior */
    }

    .section-header p[b-mvantq8veb] {
        font-size: 1.125rem; /* 18px */
        color: #6c757d;
        max-width: 600px;
        margin: 0 auto;
    }

.comparison-grid[b-mvantq8veb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.comparison-card[b-mvantq8veb] {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
}

.main-icon[b-mvantq8veb] {
    font-size: 4rem; /* 64px */
    margin-bottom: 20px;
}

.comparison-card h3[b-mvantq8veb] {
    font-size: 1.5rem; /* 24px */
    font-weight: bold;
    margin-bottom: 8px;
}

.comparison-card .subtitle[b-mvantq8veb] {
    color: #6c757d;
    margin-bottom: 30px;
}

.comparison-card ul[b-mvantq8veb] {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: left;
    display: inline-block;
}

.comparison-card li[b-mvantq8veb] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: #333;
}

.item-icon[b-mvantq8veb] {
    font-size: 1.25rem; /* 20px */
}

/* Estilos para o Card "Tradicional" (Vermelho) */
.comparison-card.traditional[b-mvantq8veb] {
    border-color: #f5c6cb;
    background-color: #fef8f8;
}

.traditional .main-icon[b-mvantq8veb],
.traditional .item-icon[b-mvantq8veb] {
    color: #dc3545; /* Vermelho para erros */
}

/* Estilos para o Card "Stag" (Verde) */
.comparison-card.stag[b-mvantq8veb] {
    border-color: #c3e6cb;
    background-color: #f6fcf7;
}

.stag .main-icon[b-mvantq8veb],
.stag .item-icon[b-mvantq8veb] {
    color: #28a745; /* Verde para sucesso */
}


/* Responsividade para telas menores */
@media (max-width: 992px) {
    .comparison-grid[b-mvantq8veb] {
        grid-template-columns: 1fr;
    }
}

/* HowItWorksSection */

.how-it-works-section[b-mvantq8veb] {
    background-color: #f8f9fa;
    padding: 80px 20px;
}

.container[b-mvantq8veb] {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

.section-header[b-mvantq8veb] {
    text-align: center;
    margin-bottom: 60px;
}

    .section-header h2[b-mvantq8veb] {
        font-size: 2.5rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 15px;
    }

    .section-header .highlight-red[b-mvantq8veb] {
        color: #E63946;
    }

    .section-header p[b-mvantq8veb] {
        font-size: 1.125rem;
        color: #6c757d;
        max-width: 600px;
        margin: 0 auto;
    }

/* Grade dos Passos */
.steps-grid[b-mvantq8veb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px; /* Espaço entre os cards */
    margin-bottom: 80px;
}

/* Card Individual (Wrapper) */
.step-card[b-mvantq8veb] {
    position: relative; /* Necessário para posicionar o número */
    padding-top: 20px; /* Espaço para o número não sobrepor o card */
}

.number-badge[b-mvantq8veb] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #E63946;
    color: white;
    font-weight: bold;
    font-size: 0.875rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.card-content[b-mvantq8veb] {
    background-color: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 40px 25px 30px 25px;
    text-align: center;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave */
}

.icon-wrapper[b-mvantq8veb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 20px;
    margin-bottom: 25px;
    background-color: #f1f3f5; /* Cor inicial cinza */
    transition: background-color 0.3s ease;
}

    .icon-wrapper i[b-mvantq8veb] {
        font-size: 2.5rem; /* 40px */
        color: #495057; /* Cor inicial do ícone */
        transition: color 0.3s ease;
    }

.card-content h3[b-mvantq8veb] {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.card-content p[b-mvantq8veb] {
    color: #6c757d;
    line-height: 1.6;
}

/* EFEITO HOVER - A MÁGICA ACONTECE AQUI */
.step-card:hover .card-content[b-mvantq8veb] {
    transform: translateY(-10px); /* Levanta o card */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Adiciona sombra */
}

.step-card:hover .icon-wrapper[b-mvantq8veb] {
    background-color: #fa5252; /* Altera o fundo do ícone para vermelho */
}

    .step-card:hover .icon-wrapper i[b-mvantq8veb] {
        color: white; /* Altera o ícone para branco */
    }

/* Seção do Vídeo */
.video-section-container[b-mvantq8veb] {
    background-color: #212529;
    color: white;
    border-radius: 20px;
    padding: 50px;
    text-align: center;
}

    .video-section-container h3[b-mvantq8veb] {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .video-section-container p[b-mvantq8veb] {
        color: #adb5bd;
        margin-bottom: 30px;
    }

.video-wrapper[b-mvantq8veb] {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 para vídeos */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    max-width: 800px;
    margin: 0 auto;
}

    .video-wrapper iframe[b-mvantq8veb] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* Responsividade */
@media (max-width: 992px) {
    .steps-grid[b-mvantq8veb] {
        grid-template-columns: 1fr;
        gap: 60px; /* Aumenta o espaço na vertical */
    }
}

/* DurabilitySection.razor.css */

.durability-section[b-mvantq8veb] {
    background-color: #ffffff;
    padding: 80px 20px;
}

    .durability-section .container[b-mvantq8veb] {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 15px;
    }

    .durability-section .details-grid[b-mvantq8veb] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }

    .durability-section .text-content h2[b-mvantq8veb] {
        font-size: 2.5rem;
        font-weight: bold;
        line-height: 1.3;
        color: #333;
        margin-bottom: 20px;
    }

    .durability-section .text-content .highlight-red[b-mvantq8veb] {
        color: #E63946;
    }

    .durability-section .text-content .subtitle[b-mvantq8veb] {
        font-size: 1.1rem;
        color: #6c757d;
        line-height: 1.6;
        margin-bottom: 30px;
    }

    .durability-section .features-list[b-mvantq8veb] {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

        .durability-section .features-list li[b-mvantq8veb] {
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }

    .durability-section .icon-wrapper[b-mvantq8veb] {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        background-color: #E63946;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .durability-section .icon-wrapper i[b-mvantq8veb] {
            color: white;
            font-size: 1.2rem;
        }

    .durability-section .feature-text h4[b-mvantq8veb] {
        font-size: 1.1rem;
        font-weight: bold;
        color: #333;
        margin: 0 0 5px 0;
    }

    .durability-section .feature-text p[b-mvantq8veb] {
        font-size: 1rem;
        color: #6c757d;
        margin: 0;
        line-height: 1.4;
    }

    .durability-section .image-content[b-mvantq8veb] {
        position: relative;
    }

        .durability-section .image-content img[b-mvantq8veb] {
            width: 100%;
            border-radius: 15px;
            display: block;
        }

    .durability-section .premium-badge[b-mvantq8veb] {
        position: absolute;
        top: 20px;
        left: 20px;
        background-color: rgba(230, 57, 70, 0.9);
        color: white;
        padding: 8px 15px;
        border-radius: 20px;
        font-size: 0.875rem;
        font-weight: bold;
        backdrop-filter: blur(5px);
    }

/* Responsividade também precisa do escopo */
@media (max-width: 992px) {
    .durability-section .details-grid[b-mvantq8veb] {
        grid-template-columns: 1fr;
    }

    .durability-section .image-content[b-mvantq8veb] {
        order: -1;
    }
}

/* ColorSelectorSection */

.color-selector-section[b-mvantq8veb] {
    padding: 80px 20px;
    background-color: #f8f9fa;
}

    .color-selector-section .container[b-mvantq8veb] {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 15px;
    }

    .color-selector-section .section-header[b-mvantq8veb] {
        text-align: center;
        margin-bottom: 60px;
    }

        .color-selector-section .section-header h2[b-mvantq8veb] {
            font-size: 2.5rem;
            font-weight: bold;
            color: #333;
        }

        .color-selector-section .section-header .highlight-red[b-mvantq8veb] {
            color: #E63946;
        }

        .color-selector-section .section-header p[b-mvantq8veb] {
            font-size: 1.125rem;
            color: #6c757d;
        }

    .color-selector-section .selector-grid[b-mvantq8veb] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 80px;
    }

/* ANIMAÇÃO FLUTUANTE */
@keyframes float-animation-b-mvantq8veb {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.color-selector-section .product-image-wrapper[b-mvantq8veb] {
    display: flex;
    justify-content: center;
}

.color-selector-section .floating-product-image[b-mvantq8veb] {
    max-width: 350px;
    width: 100%;
    animation: float-animation-b-mvantq8veb 5s ease-in-out infinite;
}

/* Opções de Cores */
.color-selector-section .color-options-list[b-mvantq8veb] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.color-selector-section .color-option[b-mvantq8veb] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    background-color: white;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

    .color-selector-section .color-option.selected[b-mvantq8veb] {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

.color-selector-section .color-swatch[b-mvantq8veb] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .color-selector-section .color-swatch i.fa-check[b-mvantq8veb] {
        color: #888; /* Cor do check dentro da bolinha branca */
    }

/* Para a bolinha vermelha e rosa, o check pode ser branco */
.color-selector-section .color-option[style*="#E63946"] .color-swatch i.fa-check[b-mvantq8veb],
.color-selector-section .color-option[style*="#FF69B4"] .color-swatch i.fa-check[b-mvantq8veb] {
    color: white;
}


.color-selector-section .option-text h4[b-mvantq8veb] {
    font-weight: bold;
    color: #343a40;
    margin: 0 0 5px 0;
}

.color-selector-section .option-text p[b-mvantq8veb] {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0;
}

.color-selector-section .selected-checkmark[b-mvantq8veb] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #E63946;
    font-size: 1.5rem;
}


/* Caixa de Compra (CTA) */
.color-selector-section .cta-box[b-mvantq8veb] {
    background-color: #212529;
    color: white;
    padding: 30px;
    border-radius: 12px;
}

    .color-selector-section .cta-box .price-label[b-mvantq8veb] {
        font-size: 1rem;
        color: #ced4da;
        margin: 0;
    }

    .color-selector-section .cta-box .price[b-mvantq8veb] {
        font-size: 2.5rem;
        font-weight: bold;
        margin: 0 0 5px 0;
    }

    .color-selector-section .cta-box .price-subtitle[b-mvantq8veb] {
        font-size: 0.9rem;
        color: #adb5bd;
        margin-bottom: 25px;
    }

.color-selector-section .add-to-cart-btn[b-mvantq8veb] {
    width: 100%;
    background-color: white;
    color: #212529;
    border: none;
    padding: 15px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.3s;
}

    .color-selector-section .add-to-cart-btn:hover[b-mvantq8veb] {
        opacity: 0.9;
    }

.color-selector-section .trust-badges[b-mvantq8veb] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #adb5bd;
    margin-top: 20px;
    gap: 10px;
}

    .color-selector-section .trust-badges i[b-mvantq8veb] {
        margin-right: 5px;
    }

/* Responsividade */
@media (max-width: 992px) {
    .color-selector-section .selector-grid[b-mvantq8veb] {
        grid-template-columns: 1fr;
    }
}

/* Components/PersonasSection.razor.css */

.personas-section[b-mvantq8veb] {
    padding: 80px 20px;
    background-color: #ffffff;
}

    .personas-section .container[b-mvantq8veb] {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 15px;
    }

    .personas-section .section-header[b-mvantq8veb] {
        text-align: center;
        margin-bottom: 60px;
    }

        .personas-section .section-header h2[b-mvantq8veb] {
            font-size: 2.5rem;
            font-weight: bold;
            color: #333;
        }

        .personas-section .section-header p[b-mvantq8veb] {
            font-size: 1.125rem;
            color: #6c757d;
        }

    .personas-section .personas-grid[b-mvantq8veb] {
        display: grid;
        grid-template-columns: 1fr 1.2fr; /* Coluna da imagem um pouco menor */
        gap: 60px;
        align-items: flex-start;
    }

    /* Imagem e Overlay */
    .personas-section .image-wrapper[b-mvantq8veb] {
        position: relative;
        border-radius: 15px;
        overflow: hidden; /* Garante que o overlay não vaze */
    }

        .personas-section .image-wrapper img[b-mvantq8veb] {
            width: 100%;
            display: block;
        }

    .personas-section .stats-overlay[b-mvantq8veb] {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(8px);
        color: white;
        display: flex;
        justify-content: space-around;
        padding: 20px;
    }

    .personas-section .stat-item[b-mvantq8veb] {
        text-align: center;
    }

        .personas-section .stat-item .value[b-mvantq8veb] {
            font-size: 1.5rem;
            font-weight: bold;
            display: block;
        }

        .personas-section .stat-item .label[b-mvantq8veb] {
            font-size: 0.8rem;
            opacity: 0.8;
        }

    /* Lista de Personas (Acordeão) */
    .personas-section .personas-list[b-mvantq8veb] {
        display: flex;
        flex-direction: column;
    }

    .personas-section .persona-item[b-mvantq8veb] {
        border-bottom: 1px solid #e9ecef;
    }

    .personas-section .persona-header[b-mvantq8veb] {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 25px 10px;
        cursor: pointer;
    }

    .personas-section .icon-wrapper[b-mvantq8veb] {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease;
    }

        .personas-section .icon-wrapper i[b-mvantq8veb] {
            font-size: 1.5rem;
            transition: color 0.3s ease;
        }

    .personas-section .title-wrapper[b-mvantq8veb] {
        flex-grow: 1;
    }

        .personas-section .title-wrapper h4[b-mvantq8veb] {
            font-size: 1.25rem;
            font-weight: bold;
            margin: 0 0 4px 0;
        }

        .personas-section .title-wrapper p[b-mvantq8veb] {
            font-size: 0.9rem;
            font-weight: 500;
            margin: 0;
        }

    .personas-section .chevron-icon[b-mvantq8veb] {
        font-size: 1rem;
        color: #adb5bd;
        transition: transform 0.4s ease;
    }

    /* LÓGICA VISUAL DO ACORDEÃO */
    .personas-section .persona-content[b-mvantq8veb] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
        padding-left: 78px; /* Alinha com o texto do header */
    }

        .personas-section .persona-content ul[b-mvantq8veb] {
            list-style-type: none;
            padding: 0 0 25px 0;
            margin: 0;
        }

        .personas-section .persona-content li[b-mvantq8veb] {
            padding: 5px 0;
            color: #495057;
        }

    /* Quando o item está ATIVO */
    .personas-section .persona-item.active .chevron-icon[b-mvantq8veb] {
        transform: rotate(180deg);
    }

    .personas-section .persona-item.active .persona-content[b-mvantq8veb] {
        max-height: 250px; /* Altura suficiente para o conteúdo caber */
    }

/* Responsividade */
@media (max-width: 992px) {
    .personas-section .personas-grid[b-mvantq8veb] {
        grid-template-columns: 1fr;
    }
}

/* Components/TestimonialsSection.razor.css */

.testimonials-section[b-mvantq8veb] {
    padding: 80px 20px;
    background-color: #ffffff;
}

    .testimonials-section .container[b-mvantq8veb] {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 15px;
    }

    .testimonials-section .section-header[b-mvantq8veb] {
        text-align: center;
        margin-bottom: 50px;
    }

        .testimonials-section .section-header h2[b-mvantq8veb] {
            font-size: 2.5rem;
            font-weight: bold;
            color: #333;
        }

        .testimonials-section .section-header .highlight-red[b-mvantq8veb] {
            color: #E63946;
        }

        .testimonials-section .section-header p[b-mvantq8veb] {
            font-size: 1.125rem;
            color: #6c757d;
        }

    /* Métricas */
    .testimonials-section .metrics-grid[b-mvantq8veb] {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        text-align: center;
        margin-bottom: 60px;
    }

    .testimonials-section .metric-item .value[b-mvantq8veb] {
        font-size: 2.25rem;
        font-weight: bold;
        color: #E63946;
        display: block;
    }

    .testimonials-section .metric-item .label[b-mvantq8veb] {
        font-size: 1rem;
        color: #6c757d;
    }

    /* Grade de Depoimentos */
    .testimonials-section .testimonials-grid[b-mvantq8veb] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-bottom: 80px;
    }

    .testimonials-section .testimonial-card[b-mvantq8veb] {
        background-color: white;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .testimonials-section .rating[b-mvantq8veb] {
        margin-bottom: 15px;
        color: #FFC107;
    }

    .testimonials-section .quote-icon[b-mvantq8veb] {
        position: absolute;
        top: 20px;
        right: 25px;
        font-size: 3.5rem;
        color: #f1f3f5;
        z-index: 0;
    }

    .testimonials-section .quote-text[b-mvantq8veb] {
        color: #495057;
        line-height: 1.6;
        margin-bottom: 20px;
        flex-grow: 1; /* Faz o texto ocupar o espaço para alinhar os rodapés */
        z-index: 1;
    }

    .testimonials-section .author-info[b-mvantq8veb] {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-top: auto; /* Alinha o autor na base do card */
        z-index: 1;
    }

    .testimonials-section .author-avatar[b-mvantq8veb] {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: #E63946;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .testimonials-section .author-text h4[b-mvantq8veb] {
        font-weight: bold;
        font-size: 1rem;
        margin: 0 0 4px 0;
    }

    .testimonials-section .author-text p[b-mvantq8veb] {
        color: #6c757d;
        font-size: 0.9rem;
        margin: 0;
    }

    /* CTA Final */
    .testimonials-section .final-cta-container[b-mvantq8veb] {
        background-color: #212529;
        color: white;
        border-radius: 20px;
        padding: 50px;
        text-align: center;
    }

        .testimonials-section .final-cta-container h3[b-mvantq8veb] {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .testimonials-section .final-cta-container p[b-mvantq8veb] {
            color: #adb5bd;
            margin-bottom: 30px;
            font-size: 1.1rem;
        }

    .testimonials-section .final-proof-list[b-mvantq8veb] {
        display: flex;
        justify-content: center;
        gap: 30px;
        font-size: 0.9rem;
        color: #ced4da;
    }

        .testimonials-section .final-proof-list i[b-mvantq8veb] {
            color: #28a745; /* Verde */
            margin-right: 8px;
        }

/* Responsividade */
@media (max-width: 992px) {
    .testimonials-section .testimonials-grid[b-mvantq8veb] {
        grid-template-columns: 1fr 1fr;
    }

    .testimonials-section .metrics-grid[b-mvantq8veb] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .testimonials-section .testimonials-grid[b-mvantq8veb] {
        grid-template-columns: 1fr;
    }

    .testimonials-section .final-proof-list[b-mvantq8veb] {
        flex-direction: column;
        gap: 10px;
    }
}

/* Components/SpecialOfferSection.razor.css */

.special-offer-section[b-mvantq8veb] {
    padding: 80px 20px;
    background-color: #212529; /* Fundo escuro */
}

    .special-offer-section .container[b-mvantq8veb] {
        max-width: 960px; /* Um container um pouco mais estreito para focar nas ofertas */
        margin: 0 auto;
        padding: 0 15px;
    }

    .special-offer-section .section-header[b-mvantq8veb] {
        text-align: center;
        margin-bottom: 40px;
        color: white;
    }

        .special-offer-section .section-header h2[b-mvantq8veb] {
            font-size: 2.5rem;
            font-weight: bold;
        }

        .special-offer-section .section-header .highlight-red[b-mvantq8veb] {
            color: #E63946;
        }

        .special-offer-section .section-header p[b-mvantq8veb] {
            font-size: 1.125rem;
            color: #ced4da;
        }

    /* Card da Oferta Principal */
    .special-offer-section .primary-offer-card[b-mvantq8veb] {
        background-color: white;
        border-radius: 12px;
        padding: 40px;
        text-align: center;
        margin-bottom: 40px;
    }

    .special-offer-section .old-price[b-mvantq8veb] {
        color: #6c757d;
    }

    .special-offer-section .main-price[b-mvantq8veb] {
        font-size: 3.5rem;
        font-weight: bold;
        color: #E63946;
        margin: 0;
    }

    .special-offer-section .savings[b-mvantq8veb] {
        color: #28a745;
        font-weight: bold;
        margin-bottom: 30px;
    }

    .special-offer-section .features-row[b-mvantq8veb] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-bottom: 30px;
        color: #495057;
    }

    .special-offer-section .feature-item i[b-mvantq8veb] {
        font-size: 2rem;
        color: #E63946;
        margin-bottom: 10px;
    }

    .special-offer-section .feature-item h4[b-mvantq8veb] {
        font-size: 1rem;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .special-offer-section .feature-item p[b-mvantq8veb] {
        font-size: 0.9rem;
        color: #6c757d;
    }

    .special-offer-section .main-cta-btn[b-mvantq8veb] {
        background-color: #E63946;
        color: white;
        border: none;
        padding: 15px;
        width: 100%;
        max-width: 400px;
        font-size: 1.1rem;
        font-weight: bold;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

        .special-offer-section .main-cta-btn:hover[b-mvantq8veb] {
            background-color: #d62839;
        }

    .special-offer-section .installments-info[b-mvantq8veb] {
        font-size: 0.9rem;
        color: #6c757d;
        margin-top: 15px;
    }

    /* Grade de Kits */
    .special-offer-section .kits-grid[b-mvantq8veb] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    .special-offer-section .kit-card[b-mvantq8veb] {
        background-color: white;
        border-radius: 12px;
        padding: 30px;
        text-align: center;
        position: relative;
        border: 2px solid transparent;
    }

    /* Badge (Mais Vendido / Melhor Valor) */
    .special-offer-section .kit-badge[b-mvantq8veb] {
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: bold;
    }

    .special-offer-section .bestseller[b-mvantq8veb] {
        background-color: #ff922b;
    }
    /* Laranja */
    .special-offer-section .bestvalue[b-mvantq8veb] {
        background-color: #37B24D;
    }
    /* Verde */

    .special-offer-section .kit-card h4[b-mvantq8veb] {
        font-size: 1.25rem;
        font-weight: bold;
    }

    .special-offer-section .kit-old-price[b-mvantq8veb] {
        color: #6c757d;
    }

    .special-offer-section .kit-new-price[b-mvantq8veb] {
        font-size: 2rem;
        font-weight: bold;
        color: #E63946;
    }

    .special-offer-section .kit-benefits[b-mvantq8veb] {
        list-style: none;
        padding: 0;
        margin: 20px 0;
        text-align: left;
        display: inline-block;
    }

        .special-offer-section .kit-benefits li[b-mvantq8veb] {
            margin-bottom: 8px;
            color: #495057;
        }

        .special-offer-section .kit-benefits i[b-mvantq8veb] {
            color: #28a745;
            margin-right: 8px;
        }

    .special-offer-section .kit-cta-btn[b-mvantq8veb] {
        width: 100%;
        padding: 12px;
        font-size: 1rem;
        font-weight: bold;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s;
    }

        .special-offer-section .kit-cta-btn.filled[b-mvantq8veb] {
            background-color: #E63946;
            color: white;
            border: 2px solid #E63946;
        }

        .special-offer-section .kit-cta-btn.ghost[b-mvantq8veb] {
            background-color: transparent;
            color: #E63946;
            border: 2px solid #E63946;
        }

            .special-offer-section .kit-cta-btn.ghost:hover[b-mvantq8veb] {
                background-color: #E63946;
                color: white;
            }

    /* Banner Final */
    .special-offer-section .footer-banner[b-mvantq8veb] {
        background-color: #343a40;
        color: #ced4da;
        border-radius: 12px;
        padding: 20px;
        text-align: center;
    }

        .special-offer-section .footer-banner h4[b-mvantq8veb] {
            font-size: 1.1rem;
            margin: 0 0 5px 0;
            color: white;
        }

        .special-offer-section .footer-banner p[b-mvantq8veb] {
            font-size: 0.9rem;
            margin: 0;
        }

/* Responsividade */
@media (max-width: 768px) {
    .special-offer-section .features-row[b-mvantq8veb] {
        grid-template-columns: 1fr;
    }

    .special-offer-section .kits-grid[b-mvantq8veb] {
        grid-template-columns: 1fr;
    }
}

.image-content1[b-mvantq8veb] {
    width: 470px;
    height: 470px;
    border-radius: 12px; /* Opcional: para bordas arredondadas */
    overflow: hidden; /* Opcional: garante que a imagem não vaze */
}

/* FaqSection.razor.css */

.faq-section[b-mvantq8veb] {
    padding: 80px 20px;
    background-color: #f8f9fa; /* Um fundo levemente cinza para a seção */
}

    .faq-section .container[b-mvantq8veb] {
        max-width: 800px;
        margin: 0 auto;
    }

    .faq-section .section-header[b-mvantq8veb] {
        text-align: center;
        margin-bottom: 50px;
    }

        .faq-section .section-header h2[b-mvantq8veb] {
            font-size: 2.5rem;
            font-weight: bold;
            color: #333;
        }

        .faq-section .section-header .highlight-red[b-mvantq8veb] {
            color: #E63946;
        }

        .faq-section .section-header p[b-mvantq8veb] {
            font-size: 1.125rem;
            color: #6c757d;
        }

/* Acordeão */
.accordion-container[b-mvantq8veb] {
    margin-bottom: 60px;
}

.accordion-item[b-mvantq8veb] {
    background-color: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden; /* Importante para a animação */
}

.accordion-header[b-mvantq8veb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    cursor: pointer;
    font-weight: 600;
    color: #343a40;
}

    .accordion-header i[b-mvantq8veb] {
        transition: transform 0.3s ease-in-out;
    }

/* Animação do conteúdo (slide down) */
.accordion-content[b-mvantq8veb] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

    .accordion-content .accordion-body[b-mvantq8veb] {
        padding: 0 20px 20px 20px;
        color: #333;
        line-height: 1.6;
    }

.corparagrafo[b-mvantq8veb] {
    color: #333;
}

/* Quando o item está ativo */
.accordion-item.active .accordion-header i[b-mvantq8veb] {
    transform: rotate(180deg);
}

.accordion-item.active .accordion-content[b-mvantq8veb] {
    max-height: 500px; /* Um valor alto o suficiente para caber qualquer resposta */
}

/* CTA do WhatsApp com Gradiente Verde */
.faq-cta-whatsapp[b-mvantq8veb] {
    text-align: center;
    color: white;
    padding: 40px 30px;
    border-radius: 12px;
    /* O GRADIENTE VERMELHO/ROSA ORIGINAL DA MARCA */
    background: linear-gradient(135deg, #f05a66, #e63946);
    box-shadow: 0 8px 25px rgba(230, 57, 70, 0.3);
}

    .faq-cta-whatsapp h3[b-mvantq8veb] {
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .faq-cta-whatsapp p[b-mvantq8veb] {
        margin-bottom: 25px;
        opacity: 0.9;
    }

    .faq-cta-whatsapp .btn-whatsapp[b-mvantq8veb] {
        background-color: white;
        color: #e63946; /* Cor vermelha da marca para o texto */
        padding: 12px 25px;
        border-radius: 50px;
        font-weight: bold;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

        .faq-cta-whatsapp .btn-whatsapp:hover[b-mvantq8veb] {
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .faq-cta-whatsapp .btn-whatsapp i[b-mvantq8veb] {
            font-size: 1.5rem;
        }

.whatsapp-float[b-mvantq8veb] {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease-in-out;
}

    .whatsapp-float:hover[b-mvantq8veb] {
        transform: scale(1.1); /* Adiciona um efeito de 'zoom' ao passar o mouse */
    }

/* ========================================= */
/* Seção de Seleção de Cores - Classes Originais com Visual da Imagem */
/* ========================================= */

.color-selector-section[b-mvantq8veb] {
    padding: 80px 0;
    text-align: center;
    background-color: #f9f9f9;
}

    .color-selector-section .section-header[b-mvantq8veb] {
        margin-bottom: 50px;
    }

        .color-selector-section .section-header h2[b-mvantq8veb] {
            font-size: 2.8rem;
            font-weight: 700;
            color: #333;
        }

        .color-selector-section .section-header p[b-mvantq8veb] {
            font-size: 1.1rem;
            color: #666;
            max-width: 600px;
            margin: 10px auto 0;
        }

/* Layout do Grid de Seleção */
.selector-grid[b-mvantq8veb] {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: flex-start;
    max-width: 1100px;
    margin: 0 auto;
}

/* Imagem do Produto */
.product-image-wrapper[b-mvantq8veb] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 350px;
}

.floating-product-image[b-mvantq8veb] {
    width: 100%;
    height: auto;
    max-width: 250px;
    object-fit: contain;
    transition: transform 0.5s ease-in-out, box-shadow 0.3s ease;
}

/* Lista de Opções de Cores */
.color-options-list[b-mvantq8veb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.color-option-card[b-mvantq8veb] {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 18px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    text-align: left;
}

    .color-option-card:hover[b-mvantq8veb] {
        border-color: #c9c9c9;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .color-option-card.selected[b-mvantq8veb] {
        border-color: #E63946;
        background-color: #fff;
        box-shadow: 0 4px 12px rgba(230, 57, 70, 0.1);
    }

/* Círculo de Cor com Checkmark Interno */
.color-circle[b-mvantq8veb] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 15px;
    transition: box-shadow 0.3s ease;
}

/*.color-option-card.selected .color-circle {
    box-shadow: none;
}*/

.color-option-card.selected.is-white-stag .color-circle .fa-check[b-mvantq8veb] {
    color: #ced4da; /* Uma cor escura que contraste com o fundo branco */
}

.color-circle .fa-check[b-mvantq8veb] {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
    color: #FFFFFF;
}

.color-option-card.selected .color-circle .fa-check[b-mvantq8veb] {
    opacity: 1;
    transform: scale(1);
    border-color: #f0f3f7;
}

.option-text h4[b-mvantq8veb] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

.option-text p[b-mvantq8veb] {
    margin: 0;
    font-size: 0.9rem;
    color: #888;
    line-height: 1.4;
}

/* Ícone de check do lado direito */
.color-option-card .selected-checkmark[b-mvantq8veb] {
    position: static;
    margin-left: auto;
    color: #E63946;
    font-size: 1.3rem;
    display: none;
}

.color-option-card.selected .selected-checkmark[b-mvantq8veb] {
    display: block;
}

/* Estilo para o Box de CTA (Call to Action) */
.cta-box[b-mvantq8veb] {
    background-color: #4a4a4a;
    color: #fff;
    border-radius: 12px;
    padding: 24px 20px;
    margin-top: 30px;
    text-align: left;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

    .cta-box .subtitle[b-mvantq8veb] {
        margin: 0;
        font-size: 0.9rem;
        color: #bbb;
    }

    .cta-box .price[b-mvantq8veb] {
        font-size: 2.8rem;
        font-weight: 800;
        margin: 8px 0 15px;
        line-height: 1;
        color: #fff;
    }

    .cta-box .details[b-mvantq8veb] {
        font-size: 0.95rem;
        color: #bbb;
        margin-bottom: 20px;
        line-height: 1.4;
    }

/* Botão de Adicionar ao Carrinho */
.add-to-cart-btn[b-mvantq8veb] {
    width: 100%;
    background-color: #fff;
    color: #333;
    border: none;
    border-radius: 6px;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-bottom: 18px;
}

    .add-to-cart-btn:hover[b-mvantq8veb] {
        background-color: #f5f5f5;
    }

/* Features Promocionais */
.promo-features[b-mvantq8veb] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

    .promo-features span[b-mvantq8veb] {
        font-size: 0.8rem;
        color: #bbb;
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .promo-features span i[b-mvantq8veb] {
            color: #4CAF50;
            font-size: 0.75rem;
        }

/* Responsividade */
@media (max-width: 768px) {
    .selector-grid[b-mvantq8veb] {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .color-selector-section .section-header h2[b-mvantq8veb] {
        font-size: 2.2rem;
    }

    .floating-product-image[b-mvantq8veb] {
        max-width: 250px;
    }

    .cta-box .price[b-mvantq8veb] {
        font-size: 2.4rem;
    }

    .promo-features[b-mvantq8veb] {
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .color-selector-section[b-mvantq8veb] {
        padding: 60px 0;
    }

        .color-selector-section .section-header h2[b-mvantq8veb] {
            font-size: 1.8rem;
        }

    .color-option-card[b-mvantq8veb] {
        padding: 15px 20px;
    }

    .cta-box[b-mvantq8veb] {
        padding: 20px 16px;
    }

        .cta-box .price[b-mvantq8veb] {
            font-size: 2.2rem;
        }
}

.tituloproduto[b-mvantq8veb] {
    font-weight: bold;
    color: #343a40;
    margin: 0 0 5px 0;
}