@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=Roboto:ital,wght@0,100..900;1,100..900&family=Tilt+Warp&display=swap');

:root {
    --cor-principal: #b60000;
    --cor-secundaria: #8B0000;
    --cor-terciaria: #580000;
    --cor-texto: #430000;
    --cor-texto-claro: #555;
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background-color: rgb(235, 235, 235);
    font-family: "Roboto", sans-serif;
    color: rgb(0, 0, 0);
    font-size: 16px;
}

html::-webkit-scrollbar {
    width: 10px;
}

html::-webkit-scrollbar-track {
    background: rgb(255, 255, 255);
    border-radius: 15px;
}

html::-webkit-scrollbar-thumb {
    background-color: var(--cor-principal);
    border-radius: 4px;
    border: 3px solid rgb(255, 255, 255);
}

html::-webkit-scrollbar-thumb:hover {
    background-color: var(--cor-secundaria);
}


/* CÓDIGOS GERAIS */
/* Modal Black Friday br */
/* Trilha navegação */
.trilha-navegacao {
    max-width: 1300px;
    margin: 25px auto 10px auto;
    font-size: 13px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-color: #ffffff;
    padding: 10px 15px;
    border-radius: 20px;
}

.trilha-navegacao a {
    color: var(--cor-principal);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.5s ease;
}

.trilha-navegacao a:hover {
    color: var(--cor-secundaria);
    text-decoration: underline;
}

.trilha-navegacao-nossaloja a {
    color: var(--cor-principal);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.5s ease;
}

.trilha-navegacao-nossaloja a:hover {
    color: var(--cor-secundaria);
    text-decoration: underline;
}

.trilha-separador {
    margin: 0 8px;
    font-size: 12px;
    color: #000000af;
}

.trilha-atual {
    color: #000000af;
}

@media (max-width: 1400px) {
    .trilha-navegacao {
        width: 90%;
    }
}

@media (max-width: 900px) {
    .trilha-navegacao-nossaloja {
        max-width: 90%;
    }
}

/* Botaõ Voltar ao Topo*/
#voltarTopo {
    opacity: 0.9;
    position: fixed;
    z-index: 1000;
    bottom: 28px;
    right: 3%;
    width: 40px;
    height: 40px;
    background-color: var(--cor-principal);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px;
}

#voltarTopo img {
    margin: 12px 10px 10px 13px;
    width: 14px;
}

#voltarTopo:hover {
    background-color: var(--cor-secundaria);
    transform: scale(1.03);
    opacity: 1;
}

#voltarTopo[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 45px;
    right: 50%;
    transform: translateX(50%);
    background-color: var(--cor-secundaria);
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    text-transform: capitalize;
    white-space: nowrap;
    transition: all 0.5s ease;
    font-size: 12px;
}

/* Responsividade Botão Voltar ao Topo */
@media (max-width:1200px) {
    #voltarTopo {
        right: 7%;
    }
}

@media (max-width:1000px) {
    #voltarTopo {
        left: 5%;
    }
}

@media (max-width:500px) {
    #voltarTopo {
        left: 9%;
    }
}

/* FIM CÓDIGOS GERAIS */


/* MENU*/
/* Menu Principal */
.menu-principal {
    z-index: 103;
    position: relative;
    display: flex;
    justify-content: flex-end;
    padding: 1% 5% 5px 5%;
    background-color: #ffffff;
}

.menu-principal ul {
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: center;
}

.menu-principal li {
    height: 48px;
}

.menu-principal li a {
    height: 100%;
    padding: 10px 15px;
    text-decoration: none;
    display: flex;
    align-items: center;
    border-radius: 25px;
    color: #000;
    transition: all 0.2s ease-in;
}

.menu-principal .hoverDesktop a:hover {
    background-color: #aa03031b;
}

.menu-principal .item-icone {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
}

.menu-principal .icon-img {
    height: 30px;
}

/* Logotipo */
.menu-principal .logotipo-menu {
    margin-right: auto;
    padding-left: 20px;
}

.menu-principal .logo-img {
    height: 50px;
    width: auto;
    display: block;
}


.farmalover-item-barra-pesquisa {
    position: relative;
}

/* Barra de Pesquisa */
.farmalover-barra-pesquisa-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.farmalover-campo-pesquisa {
    width: 600px;
    padding: 10px 16px;
    border: 1.8px solid var(--cor-principal);
    border-radius: 20px;
    font-size: 16px;
    transition: 0.2s ease;
}

.farmalover-campo-pesquisa:focus {
    outline: none;
    border-color: var(--cor-secundaria);
    box-shadow: 0 0 4px rgba(255, 0, 0, 0.177);
}

.farmalover-botao-pesquisar {
    background: var(--cor-principal);
    border: none;
    padding: 5px;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.farmalover-botao-pesquisar:hover {
    background: var(--cor-secundaria);
}

.farmalover-botao-pesquisar img {
    width: 28px;
}

.farmalover-lista-resultados {
    position: absolute;
    top: 60px;
    left: -3%;
    right: 0;
    background: #ffffff;
    border-radius: 10px;
    margin-top: 6px;
    max-height: 280px;
    overflow-y: auto;
    display: none;
    border: 1px transparent;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.farmalover-lista-resultados li {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f1f1;
    transition: 0.2s ease;
    cursor: pointer;
}

.farmalover-lista-resultados li:last-child {
    border-bottom: none;
}

.farmalover-link-resultado {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    display: block;
    width: 100%;
}

.farmalover-lista-resultados li:hover .farmalover-link-resultado {
    color: var(--cor-principal);
    padding-left: 6px;
}

.farmalover-titulo-resultados {
    font-weight: 600;
    padding: 12px 16px;
    background: #f0f0f0;
    border-bottom: 1px solid #eee;
    position: relative;
}

.farmalover-titulo-resultados::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--cor-principal);
    border-radius: 2px;
    margin-top: 3px;
}



/* Responsividade Barra Pesquisa */
@media (max-width: 1480px) {
    .farmalover-campo-pesquisa {
        width: 250px;
    }
}

@media (max-width: 1100px) {
    .farmalover-item-barra-pesquisa {
        display: none;
    }
}

/* Responsividade Menu Principal */
@media (max-width: 1000px) {
    .menu-principal .ocultarMobile {
        display: none;
    }

    .menu-secundario {
        display: none !important;
    }

    .menu-principal {
        padding: 1% 5% 8px 0;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10000;
        transition: box-shadow 0.3s ease;
    }

    .menu-principal.sombra {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.071);
    }

    body {
        padding-top: 70px;
    }
}

@media (min-width: 1000px) {
    .menu-principal .ocultarDesktop {
        display: none;
    }
}

@media (max-width: 1300px) {
    .menu-grande {
        width: 900px !important;
    }
}

/* Overlay Menu Lateral*/
.menuOverlayLateral {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 900;
}

.menuOverlayLateral.ativa {
    opacity: 1;
    visibility: visible;
}

/* Menu Lateral */
.MenuLateral {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    height: 100vh;
    gap: 10px;
    border-left: 2px solid var(--cor-principal);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    transform: translateX(100%);
    transition: all 0.5s ease;
    overflow-y: auto;
    padding-bottom: 20px;
    z-index: 1000;
    padding: 0 10px;
}

/* Scrollbar Menu Lateral */
.MenuLateral::-webkit-scrollbar {
    width: 10px;
}

/* fundo da barra */
.MenuLateral::-webkit-scrollbar-track {
    background: rgba(224, 224, 224, 0.768);
    border-radius: 4px;
}

/* barrinha que desliza */
.MenuLateral::-webkit-scrollbar-thumb {
    background-color: var(--cor-principal);
    border-radius: 4px;
    border: 3px solid #ffffff;
}

.MenuLateral::-webkit-scrollbar-thumb:hover {
    background-color: var(--cor-secundaria);
}


.MenuLateral.aberta {
    transform: translateX(0);
}

/* Menu lateral links */
.MenuLateral>a {
    width: 100%;
    padding: 15px 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgb(198, 198, 198);
    text-decoration: none;
    color: #000;
    transition: all 0.2s;
}

.MenuLateral>a:hover {
    color: var(--cor-principal);
}

.MenuLateral a.menu-lateral-login {
    display: flex;
    align-items: center;
    gap: 10px;
}

.MenuLateral a.menu-lateral-login,
.MenuLateral a.menu-lateral-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    text-decoration: none;
    color: #000;
    border-bottom: 1px solid #c6c6c6;
    transition: all 0.2s ease;
}

.MenuLateral a.menu-lateral-login img,
.MenuLateral a.menu-lateral-item img {
    width: 24px;
    height: auto;
}

.MenuLateral a.menu-lateral-login:hover,
.MenuLateral a.menu-lateral-item:hover {
    color: var(--cor-principal);
}

/* Accordion Menu Lateral */
.menu-lateral-accordion {
    width: 100%;
    margin-top: 10px;
}

.item-accordion {
    border: none;
}

.botao-accordion {
    width: 100%;
    padding: 10px 20px !important;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid rgb(198, 198, 198) !important;
    background-color: rgb(255, 255, 255);
    border: none;
    outline: none;
    transition: all 0.2s;
}

.botao-accordion:hover {
    color: var(--cor-principal);
}

/* Conteúdo Accordion */
.conteudo-accordion {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    display: flex;
    border-radius: 15px;
    flex-direction: column;
    margin: 5px 0;
    background-color: rgb(235, 235, 235);
}

.conteudo-accordion a {
    padding: 10px 25px;
    text-decoration: none;
    color: #000;
    font-size: 15px;
    transition: color 0.2s;
}

.conteudo-accordion a:hover {
    color: var(--cor-principal);
}

/* Accordion ativo */
.botao-accordion.ativo+.conteudo-accordion {
    max-height: auto;
}

.botao-accordion::after {
    content: "+";
    color: var(--cor-principal);
    margin-left: auto;
    transition: transform 0.3s, color 0.3s;
}

.botao-accordion.ativo::after {
    content: "–";
    color: var(--cor-secundaria);
}

/* Ícone hambúrguer */
.icone-hamburger-menu {
    margin-top: 40%;
    width: 30px;
    height: 30px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    background: none;
    border: none;
    transition: transform 0.4s ease;
}

/* Barras do hambúrguer */
.barra-hamburger {
    width: 100%;
    height: 0.25rem;
    border-radius: 0.125rem;
    background-color: var(--cor-principal);
    box-shadow: 0 .5px 2px 0 hsla(0, 0%, 0%, .2);
    transition: all 0.4s;
    cursor: pointer;
}

/* Segunda barra menor */
.icone-hamburger-menu .barra-hamburger:nth-child(2) {
    width: 75%;
}

/* Terceira barra ainda menor */
.icone-hamburger-menu .barra-hamburger:nth-child(3) {
    width: 50%;
}

/* Efeito hover no botão */
.icone-hamburger-menu:hover {
    transform: rotate(-90deg);
}

/* Efeito hover nas barras */
.icone-hamburger-menu:hover .barra-hamburger {
    width: 0.25rem;
    transform: translateX(-10px);
}

.icone-hamburger-menu:active {
    transform: scale(1);
}

/* Botão fechar menu lateral */
.Btn {
    position: relative;
    margin-top: 10%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 150px;
    height: 40px;
    border: none;
    padding: 0px 20px;
    background-color: var(--cor-principal);
    color: white;
    font-weight: 700;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 5px 5px 0px var(--cor-secundaria);
    transition-duration: .3s;
}

.svg-img {
    width: 28px;
    position: absolute;
    right: 0;
    margin-right: 20px;
    transition-duration: .3s;
}

.Btn:hover {
    color: transparent;
}

.Btn:hover .svg-img {
    right: 43%;
    margin: 0;
    padding: 0;
    border: none;
    transition-duration: .3s;
}

.Btn:active {
    transform: translate(3px, 3px);
    transition-duration: .3s;
    box-shadow: 2px 2px 0px var(--cor-terciaria);
}


/* Menu Secundário */
.menu-secundario {
    position: relative;
    z-index: 101;
    background: #ffffff;
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 20px;
}

.menu-secundario>ul:not(.dropdown) {
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 50px;
    margin: 0 auto;
}

.menu-secundario ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

.menu-secundario li a {
    text-decoration: none;
    color: black;
    padding: 10px;
    border-radius: 15px;
    transition: all 0.2s;
}

.menu-secundario li a:hover {
    background-color: var(--cor-principal);
    color: #fff;
}

/* Dropwns Menu Secundário */
.dropdown {
    position: relative;
}

.dropdown-menu-secundario {
    position: absolute;
    top: 38px;
    left: -50px;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 200;
}

.dropdown:hover .dropdown-menu-secundario {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu-secundario img {
    width: 200px;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    margin: 0 auto;
}

.dropdown-menu-secundario strong {
    color: var(--cor-principal);
}

.dropdown-menu-secundario p {
    text-align: left;
}

/* Dropdowwn Lojas */
.dropdown-menu-secundario li a:hover,
.dropdown-menu-secundario.lojas a:hover {
    color: var(--cor-principal) !important;
    background-color: transparent !important;
}

/* Botão Itens Dropdown Menu Secundario*/
.menu-secundario-button {
    width: 100%;
    text-decoration: none;
    line-height: 1;
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background-color: #fff;
    color: #121212;
    border: none;
    transition: all 0.3s;
    cursor: pointer;
}

.menu-secundario-decor {
    position: absolute;
    inset: 0;
    background-color: var(--cor-principal);
    transform: translateX(-100%);
    transition: all 1s;
    z-index: 0;
}

.menu-secundario-content {
    display: flex;
    align-items: center;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.menu-secundario-icon {
    width: 48px;
    height: 40px;
    background-color: var(--cor-principal);
    display: grid;
    place-items: center;
}

.menu-secundario-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.menu-secundario-text {
    display: inline-block;
    transition: color .2s;
    padding: 2px 1.5rem 2px;
    padding-left: .75rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: all 1s;
    max-width: 150px;
}

.menu-secundario-button:hover .menu-secundario-text {
    color: #ffffff;
}

.menu-secundario-button:hover .menu-secundario-decor {
    transform: translate(0);
}

.menu-secundario-button:active {
    transform: scale(1.02);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

/* Dropdown Categorias */
.titulo-categoria {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -7%;
}

.menu-grande {
    position: absolute;
    top: 85%;
    left: 20px;
    width: 1250px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    padding: 15px;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.categoria-dropdown:hover .menu-grande {
    opacity: 1;
    visibility: visible;
    transform: translateY(-5px);
}

/* Area Texto Selecione uma categoria */
.h2-espaco {
    flex: 0 0 180px;
    max-width: 180px;
    min-width: 180px;
}

/* Categorias Principais */
.lista-categorias {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lista-categorias li {
    cursor: pointer;
}

.lista-categorias li a {
    text-decoration: none;
    padding: 10px 5px 10px 10px;
    display: block;
    color: #000;
    border-radius: 5px;
    transition: all 0.2s;
}

.lista-categorias li.active a,
.lista-categorias li:hover a {
    background: var(--cor-principal);
    color: #fff;
}

.lista-categorias li:hover a {
    background-color: #aa03031b;
    color: #000 !important;
}

/* Subcategorias */
.lista-subcategorias {
    flex: 1;
    border-left: none;
    padding-left: 20px;
    transition: border 0.2s ease;
}

/* Linha Vermelha Subcategorias */
.lista-subcategorias:has(.subcategoria.active) {
    border-left: 2px solid var(--cor-principal);
}

.subcategoria {
    width: 300px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: none !important;
}

.subcategoria.active {
    display: block !important;
}

.subcategoria li {
    margin-bottom: 8px;
}

.subcategoria li a {
    text-decoration: none;
    display: block;
    padding: 8px;
    border-radius: 5px;
    transition: all 0.2s;
}

.subcategoria li a:hover {
    background: var(--cor-principal);
    color: #fff;
}

/* Overlay Menu Secundario*/
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 50;
}

body.menu-hover .overlay {
    opacity: 1;
}

body.menu-hover .menu-secundario {
    background-color: transparent;
}

/* FIM MENU*/


/*ÁREA CARRINHO DE COMPRAS */
#overlay-carrinho {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 99999;
}

/* Container do carrinho */
.carrinho-container {
    position: fixed;
    top: 5%;
    right: -450px;
    max-width: 450px;
    height: 90%;
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    overflow-y: auto;
    flex-direction: column;
    transition: right 0.3s ease;
    z-index: 100000;
}

.carrinho-container.aberto {
    right: 10px;
}

/* Modal de notificação */
#notificacao-carrinho {
    position: fixed;
    left: 20px;
    bottom: -200px;
    width: 280px;
    padding: 20px;
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    border-radius: 15px;
    transition: 0.4s ease;
    z-index: 999999;
    opacity: 0;
}

#notificacao-carrinho.show {
    bottom: 20px;
    opacity: 1;
}

.notificacao-botoes {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
}

.notificacao-botoes button {
    padding: 8px 12px;
    border: none;
    cursor: pointer;
    background: var(--cor-principal);
    color: #fff;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.notificacao-botoes button:first-child {
    background: #ffffff;
    border: solid var(--cor-principal) 1px;
    color: #000;
}

.notificacao-botoes button:hover {
    transform: scale(1.02);
}

.carrinho-container h3 {
    margin-bottom: 20px;
    font-size: 16px;
}

#carrinho-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

#carrinho-lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 10px;
    border-radius: 15px;
    padding: 10px;
    background-color: rgb(243, 243, 243);
    font-size: 12px;
}

/* Nome do produto */
#carrinho-lista li span {
    flex: 1;
    margin-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    font-size: 12px;
}

/* Container do preço, input e botão */
#carrinho-lista li div {
    align-items: center;
    display: flex;
    gap: 10px;
}

/* Input */
.quantidade-input {
    border: 2px solid #ccc;
    width: 50px;
    height: 30px;
    text-align: center;
    border-radius: 5px;
    font-size: 14px;
}

/* Preço individual */
#carrinho-lista li div span {
    min-width: 60px;
    text-align: right;
    font-size: 14px;
}

/* Preço Total do Carrinho */
.carrinho-total {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: rgb(236, 236, 236);
    border-radius: 10px;
}

/* Botões do carrinho */
#carrinho-fechar,
#carrinho-finalizar {
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
}

#carrinho-fechar {
    background-color: #ffffff;
    border: solid 2px var(--cor-principal);
}

#carrinho-finalizar {
    background-color: var(--cor-principal);
    color: #fff;
    transition: all 0.3s;
}

#carrinho-finalizar:hover {
    background-color: var(--cor-secundaria);
}

/* Lixeira */
.btn-remover-item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--cor-principal);
    border: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: .3s;
    overflow: hidden;
    position: relative;
}

.icon-remover {
    width: 12px;
    transition-duration: .3s;
}

.icon-remover path {
    fill: white;
}

.btn-remover-item:hover {
    border-radius: 50px;
    transition-duration: .3s;
    background-color: var(--cor-secundaria);
    align-items: center;
}

.btn-remover-item:active {
    transform: scale(1.08);
}

/* FIM ÁREA CARRINHO DE COMPRAS */


/* RÓDAPE */
footer {
    position: relative;
    width: 100%;
    height: auto;
    padding: 20px 20px 20px 20px;

    margin-top: 2%;
}

.container-rodape {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 18px;
}

.wrapper {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}

.wrapper .footer-widget {
    width: calc(25% - 70px);
    margin: 0 15px 50px;
    padding-left: 10px;
}

.wrapper .footer-widget .subtitulo-rodape {
    display: inline-flex;
    flex-direction: column;
    justify-content: left;
}

.wrapper .footer-widget:nth-child(1) {
    width: calc(30% - 30px);

}

.wrapper .footer-widget .subtitulo-rodape a {
    color: rgb(0, 0, 0);
}

.wrapper .footer-widget .logo-rodape {
    margin: 0 0 30px 15px;
    max-width: 120px;
}

.wrapper .footer-widget .logo-rodape-lrb {
    margin-bottom: 30px;
    vertical-align: middle;
    max-width: 150px;
    display: none;
}

.wrapper .descricao-rodape {
    padding-right: 15px;
}

.wrapper .footer-widget p {
    margin-bottom: 30px;
    line-height: 24px;
}

.wrapper .footer-widget .icone-redes-sociais {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.wrapper .footer-widget .icone-redes-sociais li {
    list-style: none !important;
}

.wrapper .footer-widget .icone-redes-sociais li a {
    width: 33px;
    height: 33px;
    margin-right: 10px;
    color: white;
    padding: 5px;
    border-radius: 50%;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-out;
}

.wrapper .footer-widget .icone-redes-sociais li a:hover {
    transform: scale(1.1);
    background-color: var(--cor-principal);
}

.footer-widget .icone-redes-sociais li a svg[aria-label="Facebook"] {
    transform: translateX(-3px) scaleX(1.5);
}

.wrapper .footer-widget h6 {
    margin: 10px 0 25px 0;
    font-size: 25px;
    font-weight: 700;
}

.wrapper .footer-widget .links li {
    list-style: none;
}

.wrapper .footer-widget .links li a {
    text-decoration: none;
    text-transform: capitalize;
    line-height: 32px;
    transition: all 0.3s ease-out;
}

.wrapper .footer-widget .links li a:hover {
    color: var(--cor-principal);
}

.copyright-wrapper {
    padding: 20px 0 10px 0;
    border-top: 1px solid rgb(88, 89, 120, 0.4);
    border-bottom: 1px solid rgb(88, 89, 120, 0.4);
}

.copyright-wrapper p {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    line-height: 1.9;
}

/* responsividade*/
@media(max-width: 1470px) {
    header.menu-principal {
        padding: 0 100px;
    }
}

@media(max-width: 1300px) {
    header.menu-principal {
        padding: 0;
    }
}

@media(max-width: 992px) {
    .container-rodape {
        max-width: 960px;
    }

    header.menu-principal {
        padding: 0;
    }

    footer {
        padding: 20px 0;
    }

    .wrapper .footer-widget,
    .wrapper .footer-widget:nth-child(1) {
        width: calc(40% - 40px);
    }
}

@media(max-width: 768px) {
    .container-rodape {
        max-width: 720px;
    }

    .wrapper .footer-widget,
    .wrapper .footer-widget:nth-child(1) {
        width: 100%;
        margin: 0 10px 50px;
    }
}

/* redes sociais  */
.redes-menu-lateral {
    margin-top: 100%;
    height: auto;
}

.icones-redes-menu-lateral {
    display: inline-flex;
    list-style: none;
    height: auto;
    width: 100%;
    margin: 0;
    justify-content: center;
    gap: 20px;
}

.icones-redes-menu-lateral .icon {
    position: relative;
    background: var(--cor-principal);
    color: #ffffff;
    border-radius: 50%;
    margin: 0px 5px 0 5px;
    width: 40px;
    height: 40px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.icones-redes-menu-lateral .tooltip {
    position: absolute;
    top: 0;
    font-size: 14px;
    background: #fff;
    color: #fff;
    padding: 5px 8px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.icones-redes-menu-lateral .tooltip::before {
    position: absolute;
    content: "";
    height: 8px;
    width: 8px;
    background: #fff;
    bottom: -3px;
    left: 50%;
    transform: translate(-50%) rotate(45deg);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.icones-redes-menu-lateral .icon:hover .tooltip {
    top: -40px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.icones-redes-menu-lateral .icon:hover span,
.icones-redes-menu-lateral .icon:hover .tooltip {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px;
}

.icones-redes-menu-lateral .facebook:hover,
.icones-redes-menu-lateral .facebook:hover .tooltip,
.icones-redes-menu-lateral .facebook:hover .tooltip::before {
    background: var(--cor-principal);
    color: #fff;
}

.icones-redes-menu-lateral .twitter:hover,
.icones-redes-menu-lateral .twitter:hover .tooltip,
.icones-redes-menu-lateral .twitter:hover .tooltip::before {
    background: var(--cor-principal);
    color: #fff;
}

.icones-redes-menu-lateral .instagram:hover,
.icones-redes-menu-lateral .instagram:hover .tooltip,
.icones-redes-menu-lateral .instagram:hover .tooltip::before {
    background: var(--cor-principal);
    color: #fff;
}

.icones-redes-menu-lateral .icon:active {
    transform: scale(1.02);
}

/* Formas de pagamento */
.formas-pagamento {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 12px;
    flex-wrap: wrap;
}

.pagamentos-texto h6 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #000;
}

.pagamentos-texto p {
    margin: 4px 0 10px 0;
    font-size: 13px;
    color: #555;
}

.pagamentos-esquerda img {
    margin-right: 15px;
    width: 55px;
    height: 35px;
    object-fit: cover;
    border-radius: 5px;
}

.pagamentos-direita img {
    height: 30px;
}

/* responsividade ródape */
@media(max-width: 768px) {
    .formas-pagamento {
        flex-direction: column;
        align-items: flex-start;
    }

    .pagamentos-texto {
        margin-bottom: 10px;
    }

    .pagamentos-direita {
        margin-top: 10px;
    }
}

/* copyrith */
.logo-pequena {
    height: 12px;
}

.copyright-wrapper p {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    margin-left: 39%;
}

/* aviso anvisa */
.aviso-anvisa {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 10px;
}

.aviso-anvisa p {
    margin: 0;
    margin-right: 8px;
    font-size: 13px;
}

.aviso-anvisa img {
    height: 45px;
}

/* responsividade ródape */
@media(max-width: 768px) {
    .formas-pagamento {
        flex-direction: column;
        align-items: flex-start;
    }

    .pagamentos-direita {
        margin-top: 10px;
    }

    .aviso-anvisa {
        flex-direction: column;
        align-items: flex-start;
    }

    .aviso-anvisa img {
        margin-top: 5px;
    }

    .copyright-wrapper p {
        margin-left: auto;
    }
}

/* FIM RÓDAPE*/


/* PÁGINA PRINCIPAL (INDEX)*/
/* ÁREA BANNER PRINCIPAL*/
.slider {
    margin: 0 auto;
    margin-top: 1%;
    width: 100%;
    max-width: 1300px;
    overflow: hidden;
    position: relative;
    border-radius: 15px;
}

.slider>input[type="radio"] {
    display: none;
}

.slides {
    display: flex;
    width: 400%;
    height: 100%;
    transition: transform 0.8s ease-in-out;
}

.slide {
    width: 25%;
    flex-shrink: 0;
    position: relative;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Radios */
.manual-traco-navegacao {
    position: absolute;
    width: 100%;
    bottom: 15px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.manual-btn {
    width: 15px;
    height: 6px;
    border-radius: 5px;
    background: rgba(176, 176, 176, 0.774);
    cursor: pointer;
    transition: all 0.4s ease;
}

.manual-btn:hover {
    background: rgba(255, 255, 255, 0.7);
}

/* Botões de navegação */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(61, 61, 61, 0.437);
    color: #fff;
    border: none;
    font-size: 20px;
    width: 30px;
    height: 50px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.nav-btn:hover {
    background: rgba(0, 0, 0, 0.55);
}

.prev {
    border-top-right-radius: 40%;
    border-bottom-right-radius: 40%;
    left: 0;
}

.next {
    border-top-left-radius: 40%;
    border-bottom-left-radius: 40%;
    right: 0;
}

#radio1:checked~.slides {
    transform: translateX(0%);
}

#radio2:checked~.slides {
    transform: translateX(-25%);
}

#radio3:checked~.slides {
    transform: translateX(-50%);
}

#radio4:checked~.slides {
    transform: translateX(-75%);
}

#radio1:checked~.manual-traco-navegacao label[for="radio1"],
#radio2:checked~.manual-traco-navegacao label[for="radio2"],
#radio3:checked~.manual-traco-navegacao label[for="radio3"],
#radio4:checked~.manual-traco-navegacao label[for="radio4"] {
    background: var(--cor-principal);
    transform: scale(1.2);
    width: 22px;
}

/* Responsividade Banner*/
@media (max-width: 1324px) {
    .slider {
        width: 1000px;
    }

    .nav-btn {
        font-size: 18px;
        width: 35px;
        height: 50px;
    }

    .manual-btn {
        width: 18px;
        height: 5px;
    }
}

@media (max-width: 1000px) {
    .slider {
        max-width: 800px;
    }

    .nav-btn {
        display: none;
    }

    .manual-btn {
        width: 16px;
        height: 4px;
    }
}

@media (max-width: 880px) {
    .slider {
        max-width: 700px;
    }
}

@media (max-width: 700px) {
    .slider {
        max-width: 480px;
    }

}

/*FIM ÁREA BANNER PRINCIPAL*/

/*ÁREA SELOS DE APROVAÇÃO*/
.area-beneficios {
    max-width: 1280px;
    margin: 2% auto;
    overflow: hidden;
}

.beneficios-cards {
    display: flex;
    gap: 20px;
    padding: 10px;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow: hidden;
}

.beneficio-card {
    flex: 0 0 220px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 15px;
    padding: 10px 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.06) 0px 1px 2px;
    transition: all ease 0.3s;
}

.beneficio-card:hover {
    transform: translateY(-5px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px;
}

.beneficio-card img {
    width: 45px;
    height: 45px;
    margin-right: 15px;
    background-color: #b60000;
    padding: 5px;
    border-radius: 50%;
}

.beneficio-texto p {
    font-size: 14px;
    line-height: 1.4;
    color: #333;
}

/* Responsividade */
@media (max-width: 1400px) {

    .beneficios-cards {
        justify-content: center;
    }
}

@media (max-width: 1424px) {
    .beneficio-card:nth-child(n+4) {
        display: none;
    }
}

@media (max-width: 768px) {
    .beneficio-card:nth-child(n+3) {
        display: none;
    }

    .area-beneficios {
        margin: 20px 3% -40px 3%;
    }

    .beneficio-card {
        flex: 0 0 190px;
    }
}

@media (max-width: 480px) {
    .area-beneficios {
        display: none;
    }
}

/* FIM ÁREA SELOS DE APROVAÇÃO*/

/* ÁREA CARROSSEL DE PRODUTOS*/
.carrossel-container {
    position: relative;
    width: 90%;
    max-width: 1300px;
    margin: 50px auto;
    overflow: hidden;
    padding: 20px;
    border-radius: 10px;
}

.carrossel-lista {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease;
}

.cartao-produto {
    flex: 0 0 calc(25% - 12px);
    background: #fff;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    transition: all 0.3s ease;
}

.cartao-produto:hover {
    transform: translateY(-6px);
}

/* Responsividade Cards Produtos */
@media (max-width: 1024px) {
    .cartao-produto {
        flex: 0 0 calc(33.33% - 13px);
        /* 3 cards*/
    }
}

@media (max-width: 768px) {
    .cartao-produto {
        flex: 0 0 calc(50% - 10px);
        /* 2 cards*/
        margin: -10px auto;
    }
}

@media (max-width: 480px) {
    .cartao-produto {
        flex: 0 0 100%;
        /* 1 cards*/
    }

    .carrossel-container {
        margin: 0 auto;
    }
}

.imagem-produto {
    width: 100%;
    height: 250px;
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imagem-produto img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 15px;
    transition: opacity 0.3s ease-in-out;
}

.segunda-imagem {
    opacity: 0;
}

.imagem-produto:hover .primeira-imagem {
    opacity: 0;
}

.imagem-produto:hover .segunda-imagem {
    opacity: 1;
}

/* Balão Mais Comprados */
.balao-mais-comprados {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--cor-principal);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 8px;
    border-radius: 12px;
    z-index: 10;
    pointer-events: none;
}

/* Conteúdo do Card */
.conteudo-produto {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.titulo-produto {
    font-weight: bold;
    font-size: 15px;
    height: 54px;
    overflow: hidden;
    text-decoration: none;
    color: #000000;
    text-transform: capitalize !important;
    text-overflow: ellipsis;
}

.titulo-produto:hover {
    color: var(--cor-principal);
}

.preco-produto {
    font-size: 16px;
    color: var(--cor-principal);
    font-weight: bold;
}

.preco-antigo {
    margin-left: 13px;
    font-size: 13px;
    color: #000000ab;
    font-weight: 500 !important;
    text-decoration: line-through;
}

.descricao-produto {
    height: 77px;
    font-size: 15px;
    color: #000000d0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.avaliacoes-produto {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #f39c12;
    margin-top: -7px;
}

.avaliacoes-produto span {
    color: #555;
    font-size: 12px;
}

/* Botões */
.botoes-card {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

.botao-comprar {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cor-principal);
    flex: 1;
    height: 48px;
    border-radius: 15px;
    text-decoration: none;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.botao-comprar:hover {
    background-color: var(--cor-secundaria);
}

/* Botão Adicionar ao Carrinho */
.botao-carrinho {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--cor-principal);
    border: none;
    font-weight: 600;
    transition-duration: .3s;
}

.icone-carrinho {
    width: 25px;
    transition-duration: .3s;
}

.botao-carrinho:hover {
    align-items: center;
    justify-content: center;
    width: 160px;
    border-radius: 25px;
    transition-duration: .3s;
    background-color: var(--cor-secundaria);
}

.botao-carrinho:hover .icone-carrinho {
    width: 33px;
    transition-duration: .3s;
    transform: translateY(60%);
}

/* Texto Adiconar ao Carrinho */
.botao-carrinho::before {
    position: absolute;
    top: -20px;
    content: "Adicionar ao Carrinho";
    color: white;
    transition-duration: .3s;
    font-size: 2px;
}

.botao-carrinho:hover::before {
    font-size: 14px;
    opacity: 1;
    transform: translateY(30px);
    transition-duration: .3s;
}

/* Botões de navegação */
.area-botoes-carrossel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

.botoes-carrossel-direita {
    display: flex;
    gap: 10px;
}

.carrossel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255, 255, 255);
    color: #000000;
    border: 1px solid rgba(0, 0, 0, 0.11);
    width: 45px;
    height: 45px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.carrossel-btn img.icone-seta {
    width: 20px;
    height: 20px;
}

.carrossel-btn:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.btn-prev {
    left: 1px;
}

.btn-next {
    right: 1px;
}

.titulo-destaque {
    color: #000000;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: left;
    position: relative;
}

.titulo-destaque::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--cor-principal);
    border-radius: 2px;
    margin: 15px 0 0 0;
}

@media (max-width: 1024px) {
    .area-botoes-carrossel {
        margin-left: 85%;
    }

    .titulo-destaque {
        display: none;
    }
}

@media (max-width: 768px) {
    .area-botoes-carrossel {
        margin-left: 78%;
    }
}

@media (max-width: 480px) {
    .area-botoes-carrossel {
        margin-left: 65%;
    }
}

@media (max-width: 289px) {
    .area-botoes-carrossel {
        margin-left: 57%;
    }
}

/* Carrossel com Mosaico*/
.bloco-destaque {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    justify-content: center;
    width: 95%;
    max-width: 1300px;
    margin: -7% auto;
}

/* Área da imagem fixa */
.bloco-destaque-imagem {
    flex: 0 0 600px;
    display: flex;
    flex-direction: column;
    margin: 8% 0 0 0;
    padding: 10px;
    align-items: left;
    justify-content: center;
    border-radius: 15px;
    overflow: hidden;
}

.bloco-destaque-imagem img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin: 3% 0 0 0;
}

.bc2 {
    margin-left: 85% !important;
}

/* Responsividade Cards Produtos */
@media (max-width: 1394px) {
    .bloco-destaque {
        display: none;
    }
}

/* Fim Carrossel com Mosaico*/
/*FIM ÁREA CARROSEL DE PRODUTOS */


/* ÁREA APP */
.area-app {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    max-width: 1280px;
    padding-right: 10px;
    margin: auto;
    margin-bottom: -40px;
}

.area-texto-app {
    max-width: 540px;
}

.area-texto-app h1 {
    font-family: "Cal Sans", sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 1.4;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.area-texto-app h1 .destaque {
    font-size: 42px;
    color: var(--cor-principal);
}

.area-texto-app p {
    margin-bottom: 30px;
    text-align: justify;
    line-height: 1.5;
    width: 420px;
}

.area-imagem-app img {
    width: 650px;
    height: auto;
}

/* Botao Área App Confetis */
#App {
    font-weight: bolder;
    background: -webkit-linear-gradient(#ff0000, #c30a0a, #340505);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(0.20turn, #ff0000, #9d1919, #340505);
    border-image-slice: 1;
    display: inline;
}

.botao-embreve {
    position: relative;
    padding: 15px 30px;
    border-radius: 25px;
    border: none;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    background-color: #000000fc;
    transition: all 1.5s ease;
}

.botao-embreve:before,
.botao-embreve:after {
    position: absolute;
    content: "";
    width: 150%;
    left: 50%;
    height: 100%;
    transform: translateX(-50%);
    z-index: -1000;
    background-repeat: no-repeat;
}

.botao-embreve:hover:before {
    top: -70%;
    background-image: radial-gradient(circle, #8d0606 20%, transparent 20%),
        radial-gradient(circle, transparent 20%, #8d0606 20%, transparent 30%),
        radial-gradient(circle, #4d1212 20%, transparent 20%),
        radial-gradient(circle, #8d0606 20%, transparent 20%),
        radial-gradient(circle, transparent 10%, #8d0606 15%, transparent 20%),
        radial-gradient(circle, #ff0000 20%, transparent 20%),
        radial-gradient(circle, #8d0606 20%, transparent 20%),
        radial-gradient(circle, #ff0000 20%, transparent 20%),
        radial-gradient(circle, #ff0000 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
        10% 10%, 18% 18%;
    background-position: 50% 120%;
    animation: bolinhasPulandoCima 1.2s ease;
}

@keyframes bolinhasPulandoCima {
    0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
            40% 90%, 55% 90%, 70% 90%;
    }

    50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
            50% 50%, 65% 20%, 90% 30%;
    }

    100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
            50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

.botao-embreve:hover::after {
    bottom: -70%;
    background-image: radial-gradient(circle, #8d0606 20%, transparent 20%),
        radial-gradient(circle, #4d1212 20%, transparent 20%),
        radial-gradient(circle, transparent 10%, #8d0606 15%, transparent 20%),
        radial-gradient(circle, #4d1212 20%, transparent 20%),
        radial-gradient(circle, #8d0606 20%, transparent 20%),
        radial-gradient(circle, #4d1212 20%, transparent 20%),
        radial-gradient(circle, #8d0606 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
    background-position: 50% 0%;
    animation: bolinhasPulandoBaixo 0.6s ease;
}

@keyframes bolinhasPulandoBaixo {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
            70% -10%, 70% 0%;
    }

    50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
            105% 0%;
    }

    100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
            110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

/* Responsividade */
@media (max-width: 1424px) {
    .area-app {
        padding: 0 8%;
    }
}

@media (max-width: 1224px) {
    .area-app {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .area-texto-app h1 {
        font-size: 30px;
    }

    /* Título vermelho embaixo no mobile */
    .area-texto-app h1 .destaque {
        display: block;
        margin-top: 10px;
        font-size: 28px;
    }

    .area-texto-app p {
        font-size: 14px;
        text-align: center;
        margin: 7%;
    }


    .botao-embreve {
        margin: 20px auto 0 auto;
        display: block;
    }

    .area-imagem-app img {
        max-width: 70%;
    }
}

@media (max-width: 768px) {
    .area-app {
        padding: 0 30px;
    }

    .area-texto-app h1 {
        font-size: 26px;
    }

    .area-texto-app h1 .destaque {
        font-size: 24px;
    }

    .area-texto-app p {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .area-app {
        padding: 0 20px;
        gap: 30px;
    }

    .area-texto-app h1 {
        font-size: 22px;
    }

    .area-texto-app h1 .destaque {
        font-size: 20px;
    }

    .area-texto-app p {
        font-size: 13px;
        padding: 0 10px;
    }

    .botao-embreve {
        width: 100%;
        max-width: 220px;
        font-size: 14px;
        padding: 12px 20px;
    }

    .area-imagem-app img {
        max-width: 100%;
    }
}

/* FIM ÁREA APP */

/* ÁREA SERVIÇOS */
.area-servicos-geral {
    max-width: 1280px;
    margin: 0 auto;
}

.titulo-servicos {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: left;
    position: relative;
}

.titulo-servicos::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--cor-principal);
    border-radius: 2px;
    margin: 15px 0 0 0;
}

.area-servicos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.card-servico {
    flex: 1 1 22%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 14px;
    border-radius: 18px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    transition: all 0.2s ease;
    min-height: 400px;
}

.card-servico:hover {
    transform: translateY(-6px);
}

.area-card-imagem {
    height: 180px;
    border-radius: 15px;
    overflow: hidden;
}

.area-card-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.card-servico:hover .area-card-imagem img {
    transform: scale(1.05);
}

.area-card-texto {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}

.area-card-texto h2 {
    font-size: 17px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 10px;
    margin-top: 15px;
}

.area-card-texto p {
    flex-grow: 1;
    min-height: 50px;
    display: flex;
    margin-top: 15px;
    justify-content: flex-start;
    text-align: left;
    padding: 0 10px;

}

.btn-servico {
    background-color: #b60000;
    color: #fff;
    border: none;
    padding: 15px 18px;
    border-radius: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    font-size: 14px;
    align-self: center;
    font-weight: 600;
}

.btn-servico:hover {
    background-color: #8B0000;
}

@media (max-width: 1400px) {
    .area-servicos-geral {
        margin: 6%;
    }
}

@media (max-width: 1050px) {
    .card-servico {
        flex: 1 1 45%;
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .card-servico {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* FIM ÁREA SERVIÇOS */

/* ÁREA BLOG */
.area-blog1 {
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 0;
}

.titulo-blog {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 25px;
    text-align: left;
    position: relative;
}

.titulo-blog::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--cor-principal);
    border-radius: 2px;
    margin: 15px 0 0 0;
}

.descricao-blog1 {
    font-size: 16px;
    margin-bottom: 25px;
    text-align: left;
}

.blog-cards1 {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.blog-card1 {
    display: flex;
    width: 50%;
    background-color: #fff;
    border-radius: 18px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px;
    transition: transform 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.blog-card1:hover {
    transform: translateY(-5px);
}

.blog-conteudo1 {
    flex: 1;
    padding: 20px;
    text-align: left;
}

.blog-conteudo1 h3 {
    font-size: 20px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.blog-conteudo1 p {
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 15px;
}

.btn-blog {
    background-color: var(--cor-principal);
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-blog:hover {
    background-color: var(--cor-secundaria);
}

.blog-imagem1 {
    flex: 1;
    min-width: 150px;
    overflow: hidden;
    border-radius: 20px;
}

.blog-imagem1 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
    transition: transform 0.4s ease;
}

.blog-card1:hover .blog-imagem1 video {
    transform: scale(1.05);
}

@media (max-width: 1400px) {
    .area-blog1 {
        margin: 6%;
    }

    .descricao-blog1 {
        display: none;
    }
}

@media (max-width: 1024px) {
    .blog-card1 {
        width: 100%;
        flex-direction: row;
    }

    .blog-cards1 {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .blog-card1 {
        flex-direction: column;
    }

    .blog-imagem1 {
        min-height: 180px;
    }
}

@media (max-width: 597px) {
    .btn-blog {
        margin: 0 35%;
    }
}

@media (max-width: 430px) {
    .btn-blog {
        margin: 0 auto;
    }
}

/* FIM ÁREA BLOG */
/* FIM PÁGINA PRINCIPAL (INDEX) */


/* PÁGINA SUSTENTABILIDADE */
.banner-sustentabilidade {
    width: 100%;
    max-width: 1300px;
    height: auto;
    margin: auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.banner-sustentabilidade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.banner-sustentabilidade:hover {
    transform: scale(1.01);
}

.introducao-sustentabilidade {
    max-width: 1100px;
    margin: 50px auto;
    text-align: center;
    padding: 0 20px;
}

.introducao-sustentabilidade h1 {
    color: #000;
    font-size: 24px;
    margin-bottom: 15px;
}

.introducao-sustentabilidade h1::after {
    content: "";
    display: block;
    margin: 8px auto 0 auto;
    width: 60px;
    height: 3px;
    background-color: #05600c;
    border-radius: 2px;
}

.introducao-sustentabilidade p {
    line-height: 28px;
}

.container-cards-sustentabilidade {
    max-width: 1300px;
    margin: 0 auto 80px auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding: 0 20px;
}

.card-sustentabilidade {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px;
    padding: 40px;
}

.texto-card-sustentabilidade {
    flex: 1;
}

.texto-card-sustentabilidade h2 {
    color: #000;
    font-size: 24px;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.texto-card-sustentabilidade h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 60px;
    height: 3px;
    background-color: #05600c;
    border-radius: 2px;
}

.texto-card-sustentabilidade p {
    line-height: 28px;
}

.imagem-card-sustentabilidade {
    flex: 1;
    text-align: center;
}

.imagem-card-sustentabilidade img {
    width: 100%;
    max-width: 400px;
    border-radius: 0 45px 0 45px;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.card-sustentabilidade.inverso {
    flex-direction: row-reverse;
}

.card-especial-sustentabilidade {
    background: linear-gradient(135deg, #07330c 0%, rgb(11, 191, 32) 100%);
    max-height: 400px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    border-radius: 20px;
    padding: 50px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px;
}

.texto-card-especial h2 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.texto-card-especial h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 60px;
    height: 3px;
    background-color: #fff;
    border-radius: 2px;
}

.texto-card-especial p {
    line-height: 26px;
    color: #f7f7f7;
}

.imagem-card-especial img {
    width: 100%;
    min-width: 320px;
    border-radius: 15px;
    height: auto;
    margin: -30px;
}

/* Responsividade Página Sustentabilidade */
@media (max-width: 1400px) {
    .banner-sustentabilidade {
        width: 90%;
    }
}

@media (max-width: 900px) {

    .card-sustentabilidade,
    .card-sustentabilidade.inverso,
    .card-especial-sustentabilidade {
        flex-direction: column;
        text-align: center;
        padding: 30px;
    }

    .imagem-card-sustentabilidade img,
    .imagem-card-especial img {
        max-width: 100%;
        margin-top: 20px;
    }

    .texto-card-sustentabilidade h2::after,
    .texto-card-especial h2::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .imagem-card-especial img {
        display: none;
    }
}

/* FIM PÁGINA SUSTENTABILIDADE */


/* PÁGINA NOSSA LOJA */
.trilha-navegacao-nossaloja {
    width: 1000px;
    margin: 25px auto 10px auto;
    font-size: 13px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-color: #ffffff;
    padding: 10px 15px;
    border-radius: 20px;
}

.card-map {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    text-align: center;
}

.titulo-principal {
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.titulo-principal::after {
    content: "";
    display: block;
    width: 70px;
    height: 3px;
    background-color: var(--cor-principal);
    margin: 5px auto 10px;
    border-radius: 2px;
}

.descricao-loja {
    margin: 0 auto 40px auto;
    line-height: 30px;
    max-width: 1000px;
}

.subtitulo {
    font-size: 18px;
    font-weight: 600;
    position: relative;
    display: inline-block;
}

.subtitulo::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background-color: var(--cor-principal);
    margin: 8px auto 10px;
    border-radius: 2px;
}

.caixanossaloja {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    padding: 25px 30px;
    text-align: left;
    line-height: 28px;
    max-width: 1000px;
    margin: 40px auto;
}

.p-nossaloja {
    color: var(--cor-principal);
    font-weight: 600;
}

.map-wrapper {
    border-radius: 15px;
    overflow: hidden;
    border: 3px solid var(--cor-principal);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    margin: 25px auto 40px auto;
    max-width: 1000px;
    transition: all 0.4s ease;
}

.map-responsive {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}

.map-wrapper:hover {
    transform: scale(1.01);
}

.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.texto-final {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    padding: 25px 30px 25px 30px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    line-height: 30px;
}

/* Responsividade Nossa Loja */
@media (max-width: 768px) {
    .titulo-principal {
        font-size: 22px;
    }

    .descricao-loja {
        font-size: 14px;
    }

    .subtitulo {
        font-size: 16px;
    }

    .caixanossaloja {
        font-size: 13px;
        padding: 20px;
    }

    .texto-final {
        font-size: 14px;
        padding: 20px;
    }
}

/* FIM PÁGINA NOSSA LOJA */

/* PÁGINA BLOG */
.blog-container {
    max-width: 1300px;
    margin: 0 auto 50px auto;
}

.blog-titulo-pagina {
    font-size: 24px;
    text-align: center;
    margin: 20px 0 40px 0;
    position: relative;
}

.blog-titulo-pagina::after {
    content: "";
    display: block;
    width: 70px;
    height: 3px;
    background-color: var(--cor-principal);
    margin: 10px auto 0;
    border-radius: 2px;
}

.blog-descricao {
    max-width: 900px;
    margin: 0 auto 50px auto;
    text-align: center;
    line-height: 1.8;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.blog-card {
    text-decoration: none;
    color: inherit;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background: #fff;
    transition: all 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
}

.blog-img-wrapper {
    position: relative;
    overflow: hidden;
}

.blog-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    transition: all 0.4s ease;
}

.blog-card:hover img {
    transform: scale(1.03);
}

.blog-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--cor-terciaria);
    color: #fff;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 30px;
}

.blog-conteudo {
    padding: 20px;
}

.blog-titulo {
    font-weight: 00;
    margin: 10px 0;
    position: relative;
    transition: all 0.8s;
}

.blog-titulo::after {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background-color: var(--cor-principal);
    margin-top: 8px;
    border-radius: 2px;
}

.blog-card:hover .blog-titulo {
    color: var(--cor-principal);
    text-decoration: underline;
}

.blog-data {
    font-size: 13px;
    color: var(--cor-texto-claro);
    margin-bottom: 10px;
}

.blog-resumo {
    color: var(--cor-texto-claro);
    line-height: 1.5;
}

.blog-destaque {
    position: relative;
    width: 100%;
    max-width: 1300px;
    height: 400px;
    margin: 60px auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.blog-destaque-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-destaque-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.212);
}

.blog-destaque-conteudo {
    position: absolute;
    bottom: 40px;
    left: 40px;
    color: #fff;
    z-index: 2;
    max-width: 700px;
}

.blog-tag-destaque {
    background: var(--cor-principal);
    padding: 5px 14px;
    border-radius: 12px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 10px;
}

.blog-destaque-titulo {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 25px;
    font-weight: 600;
}

.blog-destaque-link {
    background: var(--cor-principal);
    color: #fff;
    padding: 10px 20px;
    border-radius: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
}

.blog-destaque-link:hover {
    background: var(--cor-secundaria);
}

/* Responsividade */
@media (max-width: 1300px) {
    .blog-container {
        margin: auto 3%;
    }
}

.blog-destaque-conteudo {
    bottom: 25px;
    left: 20px;
    right: 20px;
}

.blog-destaque-titulo {
    font-size: 20px;
}

.blog-destaque-link {
    padding: 8px 16px;
}


/* FIM PÁGINA BLOG */

/* PÁGINAS METÉRIAS BLOG */
.materia-blog-container {
    max-width: 1300px;
    margin: 50px auto;
    padding: 0 20px;
}

.materia-blog-capa {
    width: 100%;
    max-height: 480px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    margin-bottom: 30px;
}

.especial {
    background: linear-gradient(135deg, #b60000 0%, #580000 100%) !important;
    color: #ffffff;
}

.materia-blog-capa img {
    width: 100%;
    height: auto;
    display: block;
}

.materia-blog-titulo {
    font-size: 24px;
    color: #000;
    font-weight: 800;
    text-align: left;
    margin-bottom: 10px;
    position: relative;
}

.materia-blog-titulo::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 70px;
    height: 3px;
    background-color: var(--cor-principal);
    border-radius: 2px;
}

.materia-blog-meta {
    color: var(--cor-texto-claro);
    font-size: 13px;
    margin: 25px 0;
}

.materia-blog-corpo {
    text-align: justify;
    line-height: 1.6;
    margin-bottom: 18px;
}

.materia-blog-card {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    padding: 25px;
    margin: 35px 0;
    transition: all 0.8s ease;
}

.materia-blog-card:hover {
    transform: translateY(-5px);
}

.materia-blog-subtitulo {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
}

.materia-blog-subtitulo::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: var(--cor-principal);
    border-radius: 2px;
}

.materia-blog-lista {
    margin-left: 20px;
}

.materia-blog-lista li {
    margin-bottom: 15px;
}

.materia-blog-subtitulo-final {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}

.materia-blog-subtitulo-final::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 3px;
    background-color: var(--cor-principal);
    border-radius: 3px;
}

.materia-blog-produtos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

/* CARD DE PRODUTO TEMPORARIO BLOG MATERIAS */
.cartao-produto {
    flex: 0 0 calc(25% - 12px);
    background: #fff;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    transition: all 0.3s ease;
}

.cartao-produto:hover {
    transform: translateY(-6px);
}

/* Responsividade Cards Produtos */
@media (max-width: 1024px) {
    .cartao-produto {
        flex: 0 0 calc(33.33% - 13px);
        /* 3 cards*/
    }
}

@media (max-width: 768px) {
    .cartao-produto {
        flex: 0 0 calc(50% - 10px);
        /* 2 cards*/
    }
}

@media (max-width: 480px) {
    .cartao-produto {
        flex: 0 0 100%;
        /* 1 cards*/
    }
}

.imagem-produto {
    width: 100%;
    height: 250px;
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imagem-produto img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 15px;
    transition: opacity 0.3s ease-in-out;
}

.segunda-imagem {
    opacity: 0;
}

.imagem-produto:hover .primeira-imagem {
    opacity: 0;
}

.imagem-produto:hover .segunda-imagem {
    opacity: 1;
}

/* Balão Mais Comprados */
.balao-mais-comprados {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--cor-principal);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 8px;
    border-radius: 12px;
    z-index: 10;
    pointer-events: none;
}

/* Conteúdo do Card */
.conteudo-produto {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.titulo-produto {
    font-weight: bold;
    height: 53px;
    overflow: hidden;
    text-decoration: none;
    color: #000000;
    text-transform: capitalize !important;
    text-overflow: ellipsis;
}

.titulo-produto:hover {
    color: var(--cor-principal);
}

.preco-produto {
    font-size: 16px;
    color: var(--cor-principal);
    font-weight: bold;
}

.preco-antigo {
    margin-left: 13px;
    font-size: 13px;
    color: #000000ab;
    font-weight: 500 !important;
    text-decoration: line-through;
}

.descricao-produto {
    height: 70px;
    color: #000000d0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.avaliacoes-produto {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #f39c12;
    margin-top: -8px;
}

.avaliacoes-produto span {
    color: var(--cor-texto-claro);
    font-size: 12px;
}

/* Botões */
.botoes-card {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

.botao-comprar {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cor-principal);
    flex: 1;
    height: 48px;
    border-radius: 15px;
    text-decoration: none;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.botao-comprar:hover {
    background-color: var(--cor-secundaria);
}

/* Botão Adicionar ao Carrinho */
.botao-carrinho {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--cor-principal);
    border: none;
    font-weight: 600;
    transition-duration: .3s;
}

.icone-carrinho {
    width: 25px;
    transition-duration: .3s;
}

.botao-carrinho:hover {
    align-items: center;
    justify-content: center;
    width: 160px;
    border-radius: 25px;
    transition-duration: .3s;
    background-color: var(--cor-secundaria);
}

.botao-carrinho:hover .icone-carrinho {
    width: 33px;
    transition-duration: .3s;
    transform: translateY(60%);
}

/* Texto Adiconar ao Carrinho */
.botao-carrinho::before {
    position: absolute;
    top: -20px;
    content: "Adicionar ao Carrinho";
    color: white;
    transition-duration: .3s;
    font-size: 2px;
}

.botao-carrinho:hover::before {
    font-size: 14px;
    opacity: 1;
    transform: translateY(30px);
    transition-duration: .3s;
}

.materia-blog-texto {
    line-height: 1.7;
    margin-bottom: 15px;
    text-align: justify;
}

/* FIM PÁGINA MATÉRIAS BLOG */

/* PÁGINAS DE SUPORTE */
.titulo-area-suporte {
    text-align: center;
    margin: 40px auto;
}

.titulo-pagina-suporte {
    font-size: 23px;
    position: relative;
    display: inline-block;
}

.titulo-pagina-suporte::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--cor-principal);
    border-radius: 2px;
}

.linha-pagina-suporte {
    border-top: 1px solid #ccc;
    margin: 40px auto;
    width: 1000px;
}

/* Acordeão */
.acordeao-pagina-suporte {
    max-width: 1000px;
    margin: 0 auto 40px auto;
    background-color: var(--cor-principal);
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.item-acordeao-pagina-suporte {
    border-bottom: 1px solid rgb(235, 235, 235);
    overflow: hidden;
}

.cabecalho-acordeao-pagina-suporte {
    background-color: var(--cor-principal);
    color: white;
    border-radius: 15px;
    padding: 15px 20px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.8s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.seta-acordeao-pagina-suporte {
    width: 15px;
    height: 15px;
    transition: transform 0.3s ease;
}

.item-acordeao-pagina-suporte.ativo .seta-acordeao-pagina-suporte {
    transform: rotate(180deg);
}

.conteudo-acordeao-pagina-suporte {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    background-color: #ffffff;
    transition: all 0.5s ease;
}

.conteudo-acordeao-pagina-suporte {
    line-height: 1.5;
}

.conteudo-acordeao-pagina-suporte p {
    margin-bottom: 10px;
}

.conteudo-acordeao-pagina-suporte ul {
    list-style: none;
    margin-top: 10px;
    padding-left: 0;
}

.conteudo-acordeao-pagina-suporte li {
    background-color: rgb(235, 235, 235);
    margin: 5px 0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px;
}

.item-acordeao-pagina-suporte.ativo .conteudo-acordeao-pagina-suporte {
    max-height: 600px;
    padding: 20px;
}

.item-acordeao-pagina-suporte.ativo .conteudo-acordeao-pagina-suporte {
    padding: 15px 20px;
}

/* Cartões de políticas */
.secao-cartoes-pagina-suporte {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 35px;
    margin-bottom: 60px;
}

.cartao-pagina-suporte {
    background-color: #ffffff;
    width: 300px;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.06) 0px 1px 2px;
    text-align: center;
    overflow: hidden;
    transition: all 0.3s;
}

.cartao-pagina-suporte:hover {
    transform: translateY(-5px);
}

.cartao-pagina-suporte img {
    width: 100%;
    height: auto;
    /* ajusta proporcionalmente */
    object-fit: contain;
    /* evita corte da imagem */
    display: block;
}

.cartao-pagina-suporte p {
    margin: 15px 0;
    font-weight: bold;
}

.botao-cartao-pagina-suporte {
    display: inline-block;
    margin-bottom: 15px;
    padding: 10px 20px;
    background-color: var(--cor-principal);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s;
}

.botao-cartao-pagina-suporte:hover {
    background-color: var(--cor-secundaria);
}

/* Responsividade */
@media (max-width: 1100px) {
    .acordeao-pagina-suporte {
        width: 90%;
    }

    .cartao-pagina-suporte {
        width: 45%;
        /* dois cartões lado a lado em tablet */
    }
}

@media (max-width: 768px) {
    .cartao-pagina-suporte {
        width: 90%;
        /* um cartão por linha em mobile */
    }
}

/* FIM PÁGINAS SUPORTE */

/* PÁGINA CANAL DE SUPORTE */
.secao-canais-contato-suporte {
    max-width: 1300px;
    margin: 50px auto;
    padding: 20px;
}

.titulo-canais-contato {
    text-align: center;
    font-size: 23px;
    margin-bottom: 35px;
    font-weight: 700;
    position: relative;
}

.titulo-canais-contato::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--cor-principal);
    border-radius: 2px;
    margin: 15px auto 0 auto;
}

.grade-canais-contato {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

.cartao-contato-suporte {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    border: 1px solid #e6e6e6;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: 0.3s;
}

.cartao-contato-suporte:hover {
    transform: translateY(-5px);
}

.titulo-cartao-contato {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

.texto-cartao-contato {
    margin-bottom: 20px;
}

.botao-canal-contato {
    margin-top: auto;
    padding: 10px 18px;
    background: var(--cor-principal);
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    transition: all 0.5s ease;
    font-size: 15px;
}

.botao-canal-contato:hover {
    background: var(--cor-secundaria);
}

.numero-canal-contato {
    font-weight: bold;
    margin-top: 10px;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-conteudo {
    background-color: #fff;
    margin: 2% auto;
    padding: 30px;
    border-radius: 20px;
    max-width: 500px;
    text-align: center;
    position: relative;
    transition: all 1s ease;
}

.modal-conteudo:hover {
    transform: scale(1.03);
}

.modal-conteudo h2 {
    margin-bottom: 15px;
    position: relative;
}

.modal-conteudo h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--cor-principal);
    border-radius: 2px;
    margin: 8px auto 0 auto;
}

.fechar {
    position: absolute;
    top: 5px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fechar:hover {
    color: var(--cor-principal);
}

@media (max-width: 600px) {
    .modal-conteudo {
        max-width: 350px;
    }
}

/* FIM PÁGINA CANAL DE SUPORTE */

/* PÁGINA CANAL CONTATO/FALE CONOSCO */
.canal-contato-card {
    background: #fff;
    border-radius: 25px;
    max-width: 1300px;
    margin: 40px auto;
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
}

.canal-contato-imagem-area {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.canal-contato-imagem-area img {
    max-width: 650px;
}

.canal-contato-form-area {
    width: 60%;
    padding: 35px 30px;
    overflow-y: auto;
}

.canal-contato-form-area::-webkit-scrollbar {
    width: 4px;
}

.canal-contato-form-area::-webkit-scrollbar-thumb {
    background: var(--cor-principal);
    border-radius: 10px;
}

.canal-contato-form-area h4 {
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: 700;
    position: relative;
}

.canal-contato-form-area h4::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--cor-principal);
    border-radius: 2px;
    margin: 8px 0 0 0;
}

#formSuporte label {
    font-weight: 600;
    display: block;
    margin-top: 16px;
}

input,
textarea {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--cor-texto-claro);
    margin-top: 6px;
}

textarea {
    min-height: 100px;
    max-height: 220px;
    overflow-y: auto;
    resize: none;
}

.canal-contato-radio-group {
    display: flex;
    gap: 20px;
}

.canal-contato-radio-opcao {
    display: flex;
    align-items: center;
    gap: 5px;
}

.canal-contato-select-assunto {
    border: 1px solid var(--cor-texto-claro);
    padding: 12px;
    border-radius: 10px;
    margin-top: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.canal-contato-lista-assunto {
    border-radius: 8px;
    margin-top: 6px;
    padding: 10px 12px;
    display: none;
    flex-direction: column;
    background: rgb(235, 235, 235);
}

.canal-contato-lista-assunto label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}

.canal-contato-lista-assunto input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-right: 5px;
}

/* anexar arquivos*/
.canal-contato-upload-area {
    width: 100%;
    border: 2px dashed var(--cor-texto-claro);
    padding: 10px;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    margin-top: 8px;
    background: rgb(235, 235, 235);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.canal-contato-upload-area img {
    width: 25px;
    opacity: 0.7;
    margin: 0;
}

.canal-contato-upload-area p {
    margin: 0;
}

.canal-contato-upload-area:hover {
    background: #ffffff;
}

#previewImagem,
#previewVideo,
#previewPDF {
    width: 100%;
    margin-top: 15px;
    display: none;
    border-radius: 10px;
}

#previewVideo {
    max-height: 240px;
}

#previewPDF {
    background: rgb(235, 235, 235);
    display: flex;
    padding: 15px;
    text-align: center;
    font-weight: 600;
    display: none;
}

.canal-contato-botao-enviar {
    margin-top: 22px;
    padding: 12px;
    width: 100%;
    border-radius: 10px;
    border: none;
    background: var(--cor-principal);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.canal-contato-botao-enviar:hover {
    background: var(--cor-secundaria);
}

@media(max-width: 1300px) {
    .canal-contato-card {
        margin: 0 3%;
    }

}

@media(max-width: 1250px) {
    .canal-contato-card {
        flex-direction: column;
        height: auto;
    }

    .canal-contato-imagem-area,
    .canal-contato-form-area {
        width: 100%;
        height: auto;
    }

    .canal-contato-imagem-area img {
        max-width: 550px;
    }

    .canal-contato-form-area {
        overflow-y: visible;
    }
}

/* FIM PÁGINA CANAL CONTATO/FALE CONOSCO */

/* PÁGINAs INDIVIDUAIS SERVIÇOS */
main {
    padding: 60px 15px;
    max-width: 1100px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    justify-content: center;
    margin-bottom: -50px;
}


main .text-content {
    flex: 1 1 200px;
    min-width: 300px;
}

.text-content h2 {
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 1rem;
    position: relative;
}

.text-content h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--cor-principal);
    border-radius: 2px;
    margin: 15px 0 0 0;
}

.btn-agendar {
    background-color: var(--cor-principal);
    border: none;
    color: #fff;
    padding: 12px 25px;
    font-size: 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.btn-agendar:hover {
    background-color: var(--cor-secundaria);
}

.care-section {
    padding: 70px 15px;
    text-align: center;
    background-color: #fff;
}

.care-section h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 40px;
    position: relative;
}

.care-section h3::after {
    content: "";
    display: block;
    width: 70px;
    height: 3px;
    background-color: var(--cor-principal);
    margin: 10px auto 0;
    border-radius: 2px;
}

.care-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 80px;
    max-width: 1100px;
    margin: auto;
}

.care-card {
    background-color: #fff;
    border: 2px solid var(--cor-principal);
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    padding: 30px 20px;
    flex: 1 1 280px;
    max-width: 320px;
    transition: transform 0.3s;
    text-align: center;
}

.care-card:hover {
    transform: translateY(-3px);
}

.care-card img {
    width: 60px;
    margin-bottom: 15px;
    background-color: var(--cor-principal);
    border-radius: 50%;
    padding: 5px;
}

.care-card p {
    font-size: 15px;
    margin-top: 5px;
    line-height: 1.5;
}

.orientations {
    padding: 60px 20px;
}

.orientations h3 {
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
}

.icone-orientacoes {
    width: 35px;
    position: relative;
}

.shadow-box {
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    max-width: 1100px;
    margin: auto;
    border-radius: 15px;
    padding: 20px 30px;
}

.shadow-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shadow-box li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}


.modal-pagina-servicos {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

.modal-content-pagina-servicos {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    position: relative;
}

.modal-header-pagina-servicos {
    background-color: var(--cor-principal);
    color: white;
    padding: 15px;
    border-radius: 10px 10px 0 0;
    margin: -30px -30px 20px -30px;
}

.modal-close-pagina-servicos {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-close-pagina-servicos:hover {
    color: rgb(236, 236, 236);
}

#formAgendamento input {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
}

#formAgendamento label {
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
}

#formAgendamento .btn-agendar {
    width: 100%;
    background-color: var(--cor-principal);
    color: white;
    border: none;
    padding: 12px 15px;
    font-size: 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

#formAgendamento .btn-agendar:hover {
    background-color: var(--cor-secundaria);
}

@media (max-width: 992px) {
    main {
        flex-direction: column;
        text-align: center;
    }

    main img {
        max-width: 100%;
    }

    .text-content {
        max-width: 90%;
    }

    .text-content h2::after {
        margin: 15px auto 0 auto;
    }
}

@media (max-width: 600px) {
    .care-grid {
        flex-direction: column;
        align-items: center;
    }

    .care-card {
        width: 90%;
    }

    .shadow-box {
        padding: 15px 20px;
    }
}

/* FIM PÁGINAS INDIVIDUAIS SERVIÇOS */

/* PÁGINA PRODUTO INDIVIDUAL */
/* ÁREA COMPRA */
.caminho-navegacao2 {
    max-width: 1300px;
    margin: 20px auto 0 auto;
    font-size: 14px;
    background-color: #ffffff;
    padding: 10px 15px;
    border-radius: 12px;
}

.caminho-navegacao2 ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0;
    margin: 0;
    align-items: center;
}

.caminho-navegacao2 ul li {
    display: flex;
    align-items: center;
}

.caminho-navegacao2 ul li a {
    text-decoration: none;
    color: var(--cor-principal);
    transition: 0.3s;
}

.caminho-navegacao2 ul li a:hover {
    text-decoration: underline;
}

.caminho-navegacao2 ul li.ativo {
    font-weight: bold;
    color: #000;
}

.caminho-navegacao2 ul li+li::before {
    content: ">";
    margin: 0 8px;
}

@media (max-width: 768px) {
    .caminho-navegacao2 {
        font-size: 12px;
        padding: 8px 10px;
    }

    .caminho-navegacao2 ul li+li::before {
        margin: 0 5px;
    }
}

/* area de produto */
.pagina-medicamento-individual {
    display: flex;
    gap: 40px;
    max-width: 1300px;
    margin: 1% auto;
    background: #fff;
    padding: 20px;
    border-radius: 18px;
    flex-wrap: wrap;
}

/* Galeria */
.pagina-medicamento-individual-galeria {
    flex: 1;
    position: relative;
    text-align: center;
}

.pagina-medicamento-individual-imagem-principal {
    width: 100%;
    max-width: 400px;
    height: 400px;
    border-radius: 18px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    position: relative;
}

/* Balão desconto */
.pagina-medicamento-individual-desconto {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cor-principal);
    color: #fff;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 50px;
    font-size: 14px;
    z-index: 10;
}

/* Botões navegação */
.botoes-galeria {
    position: absolute;
    top: 46%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    padding: 0 20px;
}

.botoes-galeria img {
    width: 15px;
}

.botoes-galeria button {
    background: rgb(205, 205, 205);
    ;
    color: #fff;
    border: none;
    font-size: 20px;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.3s;
}

.botoes-galeria button:hover {
    background: rgba(94, 94, 94, 0.619);
}

.pagina-medicamento-individual-miniaturas {
    justify-content: center;
    flex-wrap: wrap;
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.pagina-medicamento-individual-miniaturas img {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    cursor: pointer;
    border: 2px solid transparent;
    object-fit: contain;
    transition: 0.3s;
}

.pagina-medicamento-individual-miniaturas img.ativo {
    border: 2px solid var(--cor-principal);
}

/* Detalhes */
.pagina-medicamento-individual-detalhes {
    flex: 1;
    min-width: 300px;
    padding-right: 40px;
}

.pagina-medicamento-individual-categoria {
    font-size: 13px;
    margin-bottom: 5px;
}

.pagina-medicamento-individual-titulo {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.pagina-medicamento-individual-avaliacoes {
    font-size: 14px;
    color: #00000059;
    margin-bottom: 20px;
}

/* Estrelas amarelas */
.pagina-medicamento-individual-avaliacoes span {
    color: #f5c518;
    font-size: 18px;
}

/* Preço */
.pagina-medicamento-individual-preco {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.pagina-medicamento-individual-preco-atual {
    font-size: 30px;
    font-weight: bold;
    color: var(--cor-principal);
}

.pagina-medicamento-individual-preco-antigo {
    font-size: 16px;
    color: #00000059;
    text-decoration: line-through;
}

.pagina-medicamento-individual-descricao {
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Área Botoes */
.pagina-medicamento-individual-acoes {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

/* Quantidade */
.pagina-medicamento-individual-quantidade {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagina-medicamento-individual-quantidade button {
    width: 28px;
    height: 28px;
    border: none;
    background: rgb(205, 205, 205);
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s;
}

.pagina-medicamento-individual-quantidade button:hover {
    background-color: rgb(160, 160, 160);
}

.pagina-medicamento-individual-quantidade input {
    width: 60px;
    text-align: center;
    padding: 5px;
    border: 1px solid rgb(160, 160, 160);
    border-radius: 5px;
}

/* tooltip cards produto individual */
.pagina-medicamento-individual-quantidade {
    position: relative;
    display: inline-block;
}

.tooltip {
    visibility: hidden;
    font-size: 13px;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;
}

.tooltip.show {
    visibility: visible;
    opacity: 1;
}

/* Botão Comprar */
.pagina-medicamento-individual-botao-comprar {
    background: var(--cor-principal);
    color: #fff;
    padding: 15px 30px;
    border: none;
    letter-spacing: 1px;
    border-radius: 13px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
}

.pagina-medicamento-individual-botao-comprar:hover {
    background: var(--cor-secundaria);
}

/* Área do frete e consulta CEP */
.frete-area {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
}

.frete-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgb(235, 235, 235);
    padding: 10px 15px;
    border-radius: 18px;
    flex: 1;
    min-width: 250px;
}

.frete-card img {
    width: 50px;
    height: 50px;
    padding: 5px;
    border-radius: 50%;
    background-color: var(--cor-principal);
}

.consulta-entrega {
    flex: 1;
    min-width: 250px;
    background: rgb(235, 235, 235);
    padding: 10px 15px;
    border-radius: 18px;
    position: relative;
}

.consulta-entrega p {
    margin-bottom: 3px;
}

.input-botao-wrapper {
    display: flex;
    gap: 8px;
}

.consulta-entrega input {
    flex: 1;
    padding: 10px;
    height: 40px;
    border: 1px solid #f1f1f1;
    background-color: #ffffff;
    border-radius: 8px;
    font-size: 14px;
}

.consulta-entrega input::placeholder {
    color: var(--cor-texto-claro);
    font-size: 12px;
}

.consulta-entrega button {
    padding: 5px 12px;
    background-color: var(--cor-principal);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 5px;
}

.consulta-entrega button:hover {
    background-color: var(--cor-secundaria);
}

/* tooltip específico */
.tooltip-cep {
    position: absolute;
    top: 100px;
    left: 40%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 10;
}

.tooltip-cep.show {
    visibility: visible;
    opacity: 1;
}

/* Código e Tags */
.pagina-medicamento-individual-extra {
    font-size: 13px;
    line-height: 1.6;
    color: #000000a8;
}


@media (max-width: 1300px) {
    .pagina-medicamento-individual {
        width: 90%;
    }

    .produto-informacoes {
    width: 90%;
}
}



/* Responsividade */
@media (max-width: 768px) {
    .pagina-medicamento-individual {
        flex-direction: column;
        gap: 20px;
        width: 90%;
    }

    .pagina-medicamento-individual-imagem-principal {
        height: 300px;
    }

    .botoes-galeria button {
        font-size: 20px;
        padding: 8px 12px;
    }
}

/* FIM ÁREA COMPRA */

/* ÁREA DESCRIÇÃO*/
.produto-informacoes {
    max-width: 1300px;
    margin: 3% auto;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
}

/* Abas */
.abas {
    display: flex;
}

.aba {
    flex: 1;
    padding: 15px 20px;
    background: rgb(235, 235, 235);
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    transition: 0.3s;
}

.aba:hover {
    background: #b8b8b8;
}

.aba.ativa {
    background: #ffffff;
    border-bottom: 3px solid var(--cor-principal);
    color: var(--cor-principal);
}

/* Conteúdo */
.conteudo-abas {
    padding: 30px;
    line-height: 1.8;
}

.conteudo-aba {
    display: none;
    animation: fadeIn 0.4s ease-in-out;
}

.conteudo-aba.ativo {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.abas h2 {
    color: var(--cor-principal);
    font-size: 24px;
    margin-top: 0;
}

.abas h3 {
    margin-top: 20px;
    color: var(--cor-principal);
}

.abas p.texto-corrido {
    margin-bottom: 20px;
    text-align: justify;
}

.abas ul {
    padding-left: 20px;
    list-style-type: disc;
}

.abas ul li {
    margin-bottom: 10px;
    padding-left: 0;
    position: relative;
}

.caixa-informacao {
    background: rgb(235, 235, 235);
    padding: 15px;
    border-left: 4px solid var(--cor-principal);
    border-radius: 5px;
    margin: 20px 0;
}

/* FIM ÁREA DESCRIÇÃO*/

/* ÁREA DE COMENTARIOS */
/* Container principal */
.avaliacao-produto {
    background: #fff;
    padding: 30px;
    border-radius: 18px;
    max-width: 1300px;
    margin: 10px auto;
}

/* Título */
.avaliacao-produto h2 {
    font-size: 24px;
    margin-bottom: 20px;
    position: relative;
}

.avaliacao-produto h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--cor-principal);
    border-radius: 2px;
    margin: 15px 0 0 0;
}

/* Média de estrelas */
.avaliacao-media {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ddd;
    margin-bottom: 25px;
}

.avaliacao-media .estrela {
    font-size: 24px;
    color: #ddd;
}

.avaliacao-media .estrela.cheia {
    color: #f5c518;
}

.total-avaliacoes {
    font-size: 14px;
    color: #666666cb;
}

/* comentario por estrela */
.distribuicao-estrelas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
}

.linha-estrela {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.linha-estrela span:first-child {
    width: 70px;
}

.barra {
    flex: 1;
    background: rgb(235, 235, 235);
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
}

.barra-preenchida {
    height: 100%;
    background: var(--cor-secundaria)
}

/* Abas de comentários */
.abas-avaliacao {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.aba-avaliacao {
    flex: 1;
    padding: 10px 0;
    border: none;
    background: rgb(235, 235, 235);
    cursor: pointer;
    font-weight: bold;
    border-radius: 6px;
    transition: 0.3s;
}

.aba-avaliacao:hover {
    background: #aa03031b;
    ;
}

.aba-avaliacao.ativa {
    background: var(--cor-principal);
    color: #fff;
}

/* Conteúdo dos comentários */
.conteudo-avaliacao {
    display: none;
    flex-direction: column;
    gap: 15px;
    animation: fadeIn 0.3s ease-in-out;
}

.conteudo-avaliacao.ativo {
    display: flex;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Comentários*/
.comentario {
    background: rgb(235, 235, 235);
    padding: 15px;
    border-left: 4px solid var(--cor-principal);
    border-radius: 5px;
}

.comentario .nome {
    font-weight: bold;
    margin-bottom: 5px;
}

.comentario .texto {
    line-height: 1.6;
}

/* FIM ÁREA DE COMENTARIOS */
/* FIM PÁGINA DE PRODUTO INDIVIDUAL */

/* TELAS MAIORES: Centraliza no meio */
@media (min-width: 901px) {
    body {
        align-items: center;
        padding-top: 0;
    }
}


/*  PÁGINA SOBRE */
.sobre-container {
    margin-top: 50px;
    padding-bottom: 50px;
}

.wrapper-sobre {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 15px;
}

.area-sobre {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.conteudo-principal-sobre {
    flex: 1 1 500px;
    min-width: 300px;
}

/* Cartões */
.cartao-sobre {
    background: #ffffff;
    border-radius: 15px;
    padding: 35px 30px;
    margin-bottom: 40px;
    margin-top: -6%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.6s ease;
    opacity: 0;
    transform: translateY(20px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.cartao-sobre.reveal-active {
    opacity: 1;
    transform: translateY(0);
}

.cartao-sobre:hover {
    transform: translateY(-6px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.cartao-sobre h2 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 20px;
    display: inline-block;
    padding-bottom: 8px;
    letter-spacing: 1px;
    position: relative;
}

.cartao-sobre h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background-color: var(--cor-principal);
    border-radius: 4px;
}

.cartao-sobre p {
    line-height: 1.8;
    margin-bottom: 15px;
}

.cartao-sobre ul {
    padding-left: 20px;
    margin-top: 15px;
}

.cartao-sobre ul li {
    margin-bottom: 12px;
    font-weight: 500;
}

/* Guia Rápido Lateral */
.barra-lateral-sobre {
    flex: 0 0 290px;
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    height: fit-content;
    position: sticky;
    top: 30px;
    align-self: flex-start;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.barra-lateral-sobre h4 {
    font-size: 26px;
    margin-bottom: 20px;
    border-bottom: 3px solid var(--cor-principal);
    padding-bottom: 8px;
    font-weight: 700;
}

.barra-lateral-sobre ul {
    list-style: none;
    padding-left: 0;
}

.barra-lateral-sobre ul li {
    padding: 10px 0;
    font-weight: 600;
}

/* Links pretos e sem sublinhado */
.barra-lateral-sobre ul li a {
    color: #000;
    text-decoration: none;
    padding: 10px;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.barra-lateral-sobre ul li a:hover {
    color: var(--cor-principal);
}

/* Botão Voltar */
.botao-retorno-lateral {
    margin-top: 30px;
    text-align: center;
}

/* Botão Voltar (responsivo) */
.botao-retorno-mobile {
    display: none;
    width: 250px;
    padding: 10px;
    text-align: center;
    margin: auto;
}

/* Responsivo Página Sobre */
@media (max-width: 1100px) {
    .area-sobre {
        flex-direction: column;
    }

    .barra-lateral-sobre {
        display: none;
    }

    .botao-retorno-mobile {
        display: block;
    }
}

/* FIM PÁGINA SOBRE */


/* PÁGINA CHECKOUT*/

/* container geral */
.checkout-wrapper {
    max-width: 1300px;
    margin: 40px auto;
    display: flex;
    gap: 25px;
}

.checkout-container {
    flex: 2;
    background: #ffffff;
    padding: 30px;
    border-radius: 18px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    animation: aparecer .4s ease;
}

.checkout-container h2 {
    position: relative;
}

.checkout-container h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--cor-principal);
    border-radius: 2px;
    margin-top: 12px;
}

/* resumo */
.resumo-card {
    flex: 1;
    background: #ffffff;
    padding: 25px;
    border-radius: 18px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    height: fit-content;
}

@keyframes aparecer {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.resumo-card h3 {
    position: relative;
}

.resumo-card h3::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--cor-principal);
    border-radius: 2px;
    margin-top: 12px;
    margin-bottom: 10px;
}

.resumo-card p {
    margin-bottom: 10px;
}

#checkout-lista {
    padding: 0;
    list-style: none;
}

#checkout-lista li {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 18px 18px 18px 0;
    margin-bottom: 18px;
}

#checkout-lista li img {
    width: 80px;
    height: 80px;
    background-color: rgb(235, 235, 235);
    border-radius: 12px;
    object-fit: cover;
}

.info-produto {
    flex: 1;
    font-weight: 600;
}

.quantidade {
    display: flex;
    align-items: center;
    gap: 7px;
}

.quantidade button {
    background: var(--cor-principal);
    color: white;
    border: none;
    padding: 6px 12px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quantidade button:hover {
    background: var(--cor-secundaria);
}

.preco-item {
    font-size: 17px;
    font-weight: 700;
    width: 110px;
    text-align: right;
}

.remover-produto {
    background: transparent;
    position: relative;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-remover-produto {
    width: 20px;
    height: 20px;
    fill: var(--cor-principal);
    transition: 0.5s ease;
}

.remover-produto:hover .icon-remover-produto {
    transform: scale(1.15);
    fill: var(--cor-secundaria);
}

.tooltip-remover {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: 0.2s ease;
}

/* Mostrar mensagem lixeira */
.remover-produto:hover .tooltip-remover {
    opacity: 1;
    bottom: -34px;
}

.vazio-msg {
    padding: 40px 0;
    text-align: center;
}

#checkout-total {
    margin-top: 25px;
    font-size: 22px;
    font-weight: 700;
}

#finalizar-compra {
    width: 100%;
    padding: 16px;
    margin-top: 25px;
    font-size: 16px;
    background: var(--cor-principal);
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#finalizar-compra:hover {
    background: var(--cor-secundaria);
}


/* formas de pagamento */
.pagamento {
    margin-top: 25px;
}

.pagamento h3 {
    position: relative;
}

.pagamento h3::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--cor-principal);
    border-radius: 2px;
    margin-top: 12px;
}

.pagamento div {
    padding: 12px;
    background-color: rgb(235, 235, 235);
    border-radius: 12px;
    margin-bottom: 10px;
    margin-top: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagamento div img {
    width: 32px;
}

.seguranca {
    margin-top: 20px;
    text-align: center;
}

.seguranca img {
    width: 120px;
}

.frete-box {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.frete-box input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: all .3s;
}

.frete-box input:focus {
    border-color: var(--cor-principal);
    box-shadow: 0 0 6px rgba(39, 174, 96, 0.3);
}

.frete-box button {
    width: 100%;
    padding: 12px;
    border: none;
    background: var(--cor-principal);
    color: #fff;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: .3s;
}

.frete-box button:hover {
    background: var(--cor-secundaria);
}

/* Texto frete embaixo */
#valor-frete {
    font-size: 15px;
    font-weight: bold;
    color: var(--cor-principal);
    margin-top: 5px;
}

.frete-gratis {
    color: #27ae60;
    font-weight: bold;
    font-size: 16px;
}

.aviso-quantidade {
    position: absolute;
    background: #333;
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

li .quantidade {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

/* responsividade */
@media (max-width: 992px) {
    .checkout-wrapper {
        flex-direction: column;
        gap: 20px;
        margin: 20px;
    }

    .checkout-container,
    .resumo-card {
        padding: 20px;
    }

    #checkout-lista li {
        flex-direction: column;
        align-items: flex-start;
    }

    .quantidade {
        margin-top: 10px;
    }

    .preco-item {
        width: 100%;
        text-align: left;
        margin-top: 5px;
    }
}

@media (max-width: 600px) {
    .checkout-wrapper {
        margin: 15px;
        gap: 15px;
    }

    .checkout-container,
    .resumo-card {
        padding: 15px;
    }

    .resumo-card {
        margin-bottom: 50px;
    }

    #checkout-lista li img {
        width: 60px;
        height: 60px;
    }

    .quantidade button {
        padding: 5px 10px;
        font-size: 14px;
    }

    .pagamento div {
        flex-direction: column;
        align-items: flex-start;
    }

    .pagamento div img {
        width: 28px;
        margin-bottom: 5px;
    }

    #finalizar-compra {
        padding: 14px;
        font-size: 15px;
    }

    .frete-box input {
        padding: 10px;
        font-size: 13px;
    }

    .frete-box button {
        padding: 10px;
        font-size: 14px;
    }

    .seguranca img {
        width: 100px;
    }

    .aviso-quantidade {
        font-size: 11px;
        padding: 3px 6px;
    }
}

/* FIM PÁGINA CHECKOUT */

/* PÁGINA PAGAMENTO */
.pagamento-container {
    max-width: 900px;
    margin: 50px auto;
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.06) 0px 1px 2px;
    transition: all ease 0.3s;
}

.pagamento-container:hover {
    transform: translateY(-5px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px;
}

.pagamento-container h2 {
    text-align: center;
    margin-bottom: 20px;
}

.opcoes-pagamento {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.opcao {
    flex: 1 1 150px;
    padding: 15px;
    border: 2px solid #ccc;
    border-radius: 25px;
    text-align: center;
    cursor: pointer;
    min-width: 50px;
}

.opcao.selecionada {
    border-color: var(--cor-principal);
}

.form-pagamento {
    display: none;
    max-width: 400px;
    margin: 0 auto;
}

.form-pagamento.ativo {
    display: block;
    margin-top: 20px;
}

.form-pagamento label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
}

.form-pagamento input,
select {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border-radius: 8px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.form-pagamento input.invalido {
    border-color: red;
}

.msg-erro {
    color: red;
    font-size: 12px;
    margin-top: 2px;
    display: none;
}

.btn-finalizar {
    margin-top: 15px;
    padding: 15px;
    width: 100%;
    background-color: var(--cor-principal);
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-finalizar:hover {
    background-color: var(--cor-secundaria);
}

.resumo-compra {
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.resumo-compra h3 {
    margin-bottom: 15px;
}

.resumo-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.total {
    font-weight: bold;
    font-size: 18px;
    margin-top: 10px;
    text-align: right;
}

.cartao-visual {
    background: linear-gradient(135deg, #b60000, #580000);
    color: #fff;
    border-radius: 18px;
    padding: 20px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 180px;
    max-width: 100%;
    text-align: center;
}

.titulo-cartao {
    font-size: 15px;
    font-weight: 600;
}

.cartao-numero {
    font-size: 18px;
    letter-spacing: 3px;
    margin: 20px 0;
}

.cartao-info {
    display: flex;
    justify-content: space-between;
    margin: 0 20px;
}

.pix-qrcode,
.boleto-fake {
    display: none;
    justify-content: center;
    margin-top: 20px;
    flex-direction: column;
    align-items: center;
}

.pix-qrcode img,
.boleto-fake img {
    width: 200px;
    height: 200px;
    background-color: #b60000;
    border-radius: 15px;
}

/* inputs */
#cartao input,
#cartao select {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    border-radius: 10px;
    border: 1px solid var(--cor-secundaria);
    transition: all 0.3s ease;
    font-size: 15px;
}

#cartao input:focus,
#cartao select:focus {
    outline: none;
    border-color: var(--cor-terciaria);
    background-color: #ad13130f;
}

#cartao .dropdown-parcelas {
    position: relative;
    width: 100%;
    font-size: 15px;
    margin-top: 5px;
}

#cartao .dropdown-parcelas .dropdown-selected {
    background-color: #f7f7f7;
    padding: 12px;
    border: 1px solid var(--cor-secundaria);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

#cartao .dropdown-parcelas .dropdown-selected:hover,
#cartao .dropdown-parcelas .dropdown-selected:focus {
    border-color: var(--cor-terciaria);
    background-color: #d510100f;
    outline: none;
}

/* Área aberta dropdown parcelas */
#cartao .dropdown-parcelas .dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 5px;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid var(--cor-secundaria);
    border-radius: 10px;
    display: none;
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
}

#cartao .dropdown-parcelas .dropdown-options div {
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 10px;
    margin: 5px 2px;
}

#cartao .dropdown-parcelas .dropdown-options div:hover {
    background-color: rgba(255, 0, 0, 0.116);
}

/* Setinha do dropdown parcelas */
#cartao .dropdown-parcelas .dropdown-selected .seta {
    position: relative;
    transform: rotate(-1deg);
    left: 67%;
    width: 17px;
    height: 17px;
    transition: transform 0.3s;
    background-color: var(--cor-principal);
    border-radius: 50%;
    padding: 3px;
}

#cartao .dropdown-parcelas.ativo .dropdown-selected .seta {
    transform: rotate(180deg);
}

@media(max-width:800px) {


    .cartao-visual {
        width: 80%;
    }

    .cartao-info {
        flex-direction: column;
        gap: 5px;
    }

    .pagamento-container {
        width: 90%;
    }

    .boleto-fake img {
        max-width: 300px;
    }
}

.boleto-fake img {
    width: 600px;
}

.boleto-fake p {
    text-align: center;
}

/* FIM PÁGINA PAGAMENTO */

/* Recupere a senha */

.recuperar-container {
    width: 400px;
    max-width: 100%;
    padding: 40px 30px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0px 6px 20px rgba(0,0,0,0.15);
    margin: 120px auto 40px auto;
    font-family: Arial, sans-serif;
}

/* Título */
.recuperar-titulo {
    color: #8B0000;
    font-size: 28px;
    margin-bottom: 15px;
    text-align: center;
    font-weight: bold;
}

/* Texto */
.recuperar-descricao {
    font-size: 16px;
    margin-bottom: 20px;
    text-align: center;
    color: #444;
}

/* Campo de entrada */
.recuperar-input {
    width: 100%;
    padding: 14px;
    margin: 10px 0;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    font-size: 16px;
}

/* Botões */
.recuperar-botao,
.recuperar-botao-voltar {
    width: 100%;
    padding: 14px;
    margin-top: 10px;
    border: 2px solid #8B0000;
    border-radius: 20px;
    background: #fff;
    color: #8B0000;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s ease;
}

.recuperar-botao:hover,
.recuperar-botao-voltar:hover {
    background: linear-gradient(135deg, #8B0000, #b22222);
    color: #fff;
}

/* Caixa de mensagem */
.recuperar-msg {
    position: fixed;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    background: #8B0000;
    color: #fff;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    display: none;
    z-index: 2000;
    max-width: 90%;
    text-align: center;
}

/* Responsividade */
@media (max-width: 600px) {
    .recuperar-container {
        width: 95%;
        padding: 30px 20px;
    }
}

.mensagem-recuperar {
    display: none;
    position: fixed; /* fixa no topo */
    top: 180px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #4caf50; /* verde */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    font-size: 14px;
    z-index: 1000;
}

/* PÁGINA LOGIN E CADASTRO */
/* container principal */
.farmacia-login-cadastro-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 75vh;
}

/* ===== CONTAINER ===== */
.farmacia-login-cadastro-caixa {
    position: relative;
    width: 1300px;
    max-width: 100%;
    min-height: 500px;
    background: #fff;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px,
                rgba(0, 0, 0, 0.06) 0px 1px 2px;
    overflow: hidden;
}

/* ===== FORMULÁRIOS ===== */
.farmacia-login-cadastro-formulario {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 50px;
    transition: all 0.6s ease-in-out;
}

.farmacia-login-cadastro-formulario form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.farmacia-login-cadastro-formulario h2 {
    margin-bottom: 15px;
    text-align: center;
    position: relative;
}

.farmacia-login-cadastro-formulario h2::after {
    content: "";
    width: 80px;
    height: 4px;
    background-color: var(--cor-principal);
    border-radius: 2px;
    display: block;
    margin: 8px auto 0;
}

.farmacia-login-cadastro-formulario input {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    font-size: 14px;
}

.farmacia-login-cadastro-formulario a {
    font-size: 13px;
    color: var(--cor-principal);
    text-decoration: none;
    margin: 8px 0;
}

/* ===== BOTÕES ===== */
.farmacia-login-cadastro-botao {
    margin-top: 10px;
    padding: 12px 45px;
    border: none;
    border-radius: 20px;
    background: linear-gradient(135deg, #8B0000, #b22222);
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s;
}

.farmacia-login-cadastro-botao:hover {
    transform: scale(1.05);
}

/* ===== STATUS ===== */
.farmacia-login-cadastro-login {
    left: 0;
    z-index: 2;
}

.farmacia-login-cadastro-cadastro {
    left: 0;
    opacity: 0;
    z-index: 1;
}

/* ===== SOBREPOSIÇÃO ===== */
.farmacia-login-cadastro-sobreposicao-caixa {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    border-radius: 12px;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.farmacia-login-cadastro-sobreposicao {
    background: linear-gradient(135deg, #b60000 0%, #840000 100%);
    color: #fff;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    display: flex;
    transition: transform 0.6s ease-in-out;
}

.farmacia-login-cadastro-painel-esquerda,
.farmacia-login-cadastro-painel-direita {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.farmacia-login-cadastro-painel-esquerda {
    left: 0;
}

.farmacia-login-cadastro-painel-direita {
    right: 0;
}

.farmacia-login-cadastro-painel-esquerda h2,
.farmacia-login-cadastro-painel-direita h2 {
    font-size: 26px;
    margin-bottom: 12px;
}

.farmacia-login-cadastro-painel-esquerda p,
.farmacia-login-cadastro-painel-direita p {
    font-size: 15px;
    margin-bottom: 20px;
}

.farmacia-login-cadastro-botao-contorno {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 10px 25px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.farmacia-login-cadastro-botao-contorno:hover {
    background: #fff;
    color: #8B0000;
}

/* ===== ANIMAÇÃO ===== */
.farmacia-login-cadastro-caixa.ativo .farmacia-login-cadastro-login {
    transform: translateX(100%);
    opacity: 0;
    z-index: 1;
}

.farmacia-login-cadastro-caixa.ativo .farmacia-login-cadastro-cadastro {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: aparecer 0.6s forwards;
}

@keyframes aparecer {
    0%, 49% { opacity: 0; }
    50%, 100% { opacity: 1; }
}

.farmacia-login-cadastro-caixa.ativo .farmacia-login-cadastro-sobreposicao-caixa {
    transform: translateX(-100%);
}

.farmacia-login-cadastro-caixa.ativo .farmacia-login-cadastro-sobreposicao {
    transform: translateX(50%);
}

/* ===== RESPONSIVO ===== */
@media(max-width:1400px) {
    .farmacia-login-cadastro-wrapper {
        width: 90%;
        margin: auto;
    }
}

@media(max-width:500px) {
    .farmacia-login-cadastro-wrapper {
        width: 100%;
        margin: auto;
    }
}

/* PAGINA TODAS CATEGORIAS */
.container-principal {
    max-width: 1300px;
    margin: 1% auto;
    padding: 10px 0;
}

.sessao-categorias {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    align-items: start;
}

/* Menu acordeao */
.menu-acordeao {
    background: #ffffff;
    padding: 20px;
    border-radius: 5px;
    max-height: 525px;
    overflow: auto;
}

.menu-acordeao::-webkit-scrollbar {
    width: 10px;
}

.menu-acordeao::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}

.menu-acordeao::-webkit-scrollbar-thumb {
    background-color: var(--cor-principal);
    border-radius: 10px;
    border: 2px solid #f0f0f0;
}

.menu-acordeao::-webkit-scrollbar-thumb:hover {
    background-color: var(--cor-secundaria);
}

.item-acordeao {
    border-bottom: 1px solid #ddd;
}

.item-acordeao a {
    text-decoration: none;
    color: #000;
}

.item-acordeao a:hover {
    color: var(--cor-principal);
}

.item-acordeao button {
    width: 100%;
    text-align: left;
    padding: 10px;
    font-size: 14px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item-acordeao button span {
    font-size: 18px;
    transition: transform 0.3s;
}

.conteudo-acordeao {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    padding: 0 10px;
    background-color: #d8d8d8;
    border-radius: 10px;
    margin-bottom: 5px;
}

.conteudo-acordeao a {
    display: block;
    color: #000000;
    padding: 10px 0;
    text-decoration: none;
    transition: all 0.3s ease;
}

.conteudo-acordeao a:hover {
    color: var(--cor-principal);
}

/* Banner e slider-categorias */
.area-banner-com-titulo {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.titulo-secao {
    font-size: 24px;
     position: relative;
}

.titulo-secao::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--cor-principal);
    border-radius: 2px;
    margin-top: 3px;
}

.trilha-navegacao {
    font-size: 13px;
}

.trilha-navegacao a {
    color: var(--cor-principal);
    text-decoration: none;
    transition: all 0.3s;
}

.trilha-navegacao a:hover {
    text-decoration: underline;
}

/* slider-categorias Pagina Todas Categorias*/
.slider-categorias {
    margin-top: 2%;
    width: 100%;
    max-width: 1300px;
    height: 330px;
    overflow: hidden;
    position: relative;
    border-radius: 15px;
}

.slider-categorias>input[type="radio"] {
    display: none;
}

/* Selos */
.selo-pagina-categorias-container {
    display: flex;
    gap: 20px;
}

.selo-pagina-categorias-card {
    flex: 0 0 calc(25% - 15px);
    max-width: 250px;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 15px;
    padding: 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.06) 0px 1px 2px;
    transition: all ease 0.3s;
}

.selo-pagina-categorias-card:hover {
    transform: translateY(-5px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px;
}

.selo-pagina-categorias-card img {
    background-color: var(--cor-principal);
    padding: 5px;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    object-fit: contain;
    margin-right: 15px;
}

.selo-pagina-categorias-texto p {
    font-size: 14px;
    color: #333;
}

/* responsividade */
@media (max-width: 1380px) {
    .sessao-categorias {
        grid-template-columns: 1fr;
        margin: 0 5%;
    }

    .menu-acordeao {
        display: none;
    }

    .selo-pagina-categorias-container {
        justify-content: center;
    }

    .mosaico {
        margin: 3% 5% !important;
    }
}

@media (max-width: 1200px) {
    .selo-pagina-categorias-card:nth-child(4) {
        display: none;
    }
}

@media (max-width: 992px) {
    .selo-pagina-categorias-container {
        display: none;
    }
}

@media (max-width: 600px) {
    .titulo-secao {
        font-size: 20px;
    }
}

@media (max-width: 1024px) {
    .slider-categorias {
        height: 350px;
    }
}

@media (max-width: 768px) {
    .slider-categorias {
        height: 250px;
    }

    .mosaico {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .slider-categorias {
        height: 180px;
    }

    .nav-btn {
        display: none;
    }
}

/* Mosaico */
.mosaico {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 150px);
    gap: 15px;
    max-width: 1280px;
    margin: 2% auto;
}

.mosaico-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 18px;
}

.mosaico-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* Fundo escuro */
.mosaico-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.texto-hover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fcfcfc;
    font-size: 20px;
    font-weight: bold;
    opacity: 0;
    transition: all 0.5s ease;
    text-align: center;
    z-index: 2;
}

.texto-hover::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    margin: 5px auto 0;
}

.mosaico-item:hover img {
    transform: scale(1.1);
}

.mosaico-item:hover::after {
    opacity: 1;
}

.mosaico-item:hover .texto-hover {
    opacity: 1;
}

/* Posicionamento das imagens no mosaico */
.img1 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

/* 2 linhas, 1 coluna */
.img2 {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
}

/* 1 linha, 2 colunas */
.img3 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

/* 1 linha, 1 coluna */
.img4 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

/* Banner Todas Categorias */
.banner-todas-categorias {
    width: 100%;
    max-width: 1300px;
    height: 200px;
    background-color: var(--cor-principal);
    margin: 20px auto;
    border-radius: 15px;
    overflow: hidden;
}

.banner-todas-categorias img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* Responsividade */
@media (max-width: 1024px) {
    .banner-todas-categorias{
       display: none;
    }
}



/* FIM ÁREA COM CATEGORIAS, BANNER E SELO */
/* FIM PÁGINA TODAS CATEGORIAS */


/* PÁGINA TRABALHE CONOSCO */
.secao-hero-trabalhe {
    display: grid;
    grid-template-columns: 1fr 550px;
    gap: 40px;
    align-items: center;
    width: 1300px;
    margin: auto;
    padding: 40px 0;
}

.hero-texto-superior {
    font-weight: 600;
    margin-bottom: 12px;
}

.hero-titulo {
    font-family: "Cal Sans", sans-serif;
    font-weight: 800;
    font-size: 52px;
    line-height: 1.4;
    text-transform: uppercase;
    margin-bottom: 25px;
    max-width: 580px;
}

.hero-titulo span {
    color: var(--cor-principal);
}

.hero-descricao {
    max-width: 620px;
    margin-bottom: 24px;
    line-height: 1.6;
}

.hero-cartao-imagem {
    background: #fff;
    border-radius: 30px;
    padding: 18px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-cartao-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 22px;
}

/* Estatítiscas */
.secao-estatisticas {
    width: 1300px;
    margin: 40px auto;
    display: flex;
    gap: 20px;
}

.estatistica-item {
    flex: 1;
    margin-top: 30px;
}

.estatistica-item h3 {
    font-size: 24px;
}

.estatistica-cartao {
    background: #ffffff;
    padding: 18px;
    border-radius: 14px;
    flex: 1;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px;
    transition: .25s;
}

.estatistica-cartao:hover {
    transform: translateY(-4px);
}

.estatistica-topo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 6px;
}

.estatistica-topo img {
    width: 50px;
    background: var(--cor-principal);
    padding: 6px;
    border-radius: 50%;
}

.estatistica-topo h3 {
    font-size: 32px;
}

/* Benefícos */

.secao-titulo {
    margin: 60px 0 18px;
    text-align: center;
}

.secao-titulo small {
    font-weight: 600;
}

.secao-titulo h2 {
    font-size: 26px;
    margin: 0;
    position: relative;
}

.secao-titulo h2::after {
    content: "";
    width: 80px;
    height: 4px;
    background: var(--cor-principal);
    display: block;
    margin: 10px auto 0;
    border-radius: 2px;
}

/* Grade */
.grade-beneficios {
    width: 1300px;
    margin: 20px auto 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.cartao-beneficio {
    background: #fff;
    border-radius: 20px;
    padding: 18px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px;
}

.beneficio-imagem {
    height: 180px;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 12px;
}

.beneficio-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.beneficio-titulo {
    font-weight: 700;
    margin-bottom: 4px;
}

@media(max-width:1300px) {

    .secao-hero-trabalhe,
    .secao-estatisticas,
    .grade-beneficios {
        width: 90%;
    }
}

@media(max-width:1148px) {
    .secao-hero-trabalhe {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-cartao-imagem {
        height: 300px;
    }

    .secao-estatisticas {
        flex-direction: column;
    }

    .hero-titulo,
    .hero-descricao {
        margin: auto;
    }
}

@media(max-width:800px) {
    .hero-titulo {
        font-size: 34px;
        letter-spacing: 1px;
    }

    .grade-beneficios {
        grid-template-columns: 1fr;
    }
}

/* formulário */
.trabalhe-container {
    max-width: 850px;
    margin: 30px auto;
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px;
}

.titulo-principal-t {
    font-size: 24px;
    margin-bottom: 20px;
    position: relative;
}

.titulo-principal-t::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    margin-top: 8px;
    background-color: var(--cor-principal);
    border-radius: 2px;
}

.campo {
    width: 100%;
}

.campo label {
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
}

.campo input,
textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-size: 15px;
    outline: none;
    transition: .2s;
    background: #fff;
}

.campo input:focus,
textarea:focus {
    border-color: var(--cor-principal);
    box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.2);
}

textarea {
    resize: none;
    height: 130px;
}

.linha-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

@media (max-width: 700px) {
    .linha-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .trabalhe-container {
        width: 90%;
    }
}

.caixa-select {
    position: relative;
    width: 100%;
}

.select-visivel {
    background: #fff;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: .2s;
}

.select-visivel:hover {
    border-color: var(--cor-principal);
}

.seta {
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--cor-principal);
    border-bottom: 2px solid var(--cor-principal);
    transform: rotate(45deg);
    transition: .3s;
}

.caixa-select.ativo .seta {
    transform: rotate(-135deg);
}

.opcoes-select {
    position: absolute;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #ccc;
    margin-top: 6px;
    display: none;
    z-index: 20;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px;
    max-height: 230px;
    overflow-y: auto;
}

.caixa-select.ativo .opcoes-select {
    display: block;
}

.opcoes-select div {
    padding: 12px;
    cursor: pointer;
    transition: .2s;
}

.opcoes-select div:hover {
    background: #b8565636;
}

/* PDF */
.input-file-caixa {
    position: relative;
    border: 1px solid #ccc;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: .2s;
}

.input-file-caixa:hover {
    border-color: var(--cor-principal);
}

.file-label {
    color: #6c757d;
}

#trabalhe-pdf {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: pointer;
}

.btn-enviar {
    width: 100%;
    padding: 14px;
    background: var(--cor-principal);
    border: none;
    border-radius: 12px;
    font-size: 15px;
    color: #fff;

    cursor: pointer;
    margin-top: 10px;
    transition: .2s;
}

.btn-enviar:hover {
    background: var(--cor-secundaria);
}

/* FIM PÁGINA TRABALHE CONOSCO */


/* PÁGINAS INDIVIDUAIS CATEGORIAS */
.titulos-categorias-individuais {
    width: 1300px;
    margin: 30px auto 0 auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding-left: 2%;
}

.categoria-individual {
    width: 100%;
    padding: 12px 0;
}

.categoria-individual h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    text-align: left;
    position: relative;
}

.categoria-individual h3::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    margin-top: 8px;
    background-color: var(--cor-principal);
    border-radius: 2px;
}

@media (max-width: 1380px) {
    .titulos-categorias-individuais {
        width: 90%;
    }
}

@media (max-width: 1000px) {
    .titulos-categorias-individuais {
        display: none;
    }
}

/* FIM PÁGINAS INDIVIDUAIS CATEGORIAS */

/* PÁGINA AGRADECIMENTO */
.farma-agradecimento-container {
    max-width: 850px;
    margin: 60px auto;
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px;
    text-align: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
   transition: transform 0.8s ease; /* suaviza o movimento */
}

.farma-agradecimento-container:hover{
    transform: translateY(-10px);
}

.farma-agradecimento-banner-imagem {
    max-width: 720px;
}

.farma-agradecimento-titulo {
    font-size: 26px;
    margin: 10px 0;
}

.farma-agradecimento-texto {
    font-size: 15px;
    color: var(--cor-texto-claro);
    margin-bottom: 30px;
}

.farma-agradecimento-botoes {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.farma-agradecimento-botao {
    padding: 12px 22px;
    border-radius: 40px;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: .3s;
}

.farma-agradecimento-botao-acompanhar {
    background: var(--cor-principal);
    transition: all 0.3s ease;
    color: #ffffff;
}

.farma-agradecimento-botao-acompanhar:hover {
    background: var(--cor-secundaria);
}

.farma-agradecimento-modal-fundo {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px);
    z-index: 9999;
}

.farma-agradecimento-modal-caixa {
    background: white;
    padding: 30px;
    border-radius: 18px;
    max-width: 450px;
    text-align: center;
    animation: modalAgradecimentoAbrir .3s ease;
}

@keyframes modalAgradecimentoAbrir {
    from {
        transform: scale(.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.farma-agradecimento-modal-imagem {
    width: 350px;
    margin-bottom: 15px;
}

.farma-agradecimento-modal-botao-fechar {
    margin-top: 20px;
    background: var(--cor-principal);
    border: none;
    border-radius: 13px;
    color: #ffffff;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.farma-agradecimento-modal-botao-fechar:hover {
    background: var(--cor-secundaria);
}

@media (max-width: 1380px) {
    .farma-agradecimento-container {
        width: 90%;
    }

    .farma-agradecimento-banner-imagem {
    max-width: 420px;
}
}

/* Confetis */
.farma-confete-canvas {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
}

/* FIM PÁGINA AGRADECIMENTO */