@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

:root {
     --neutra-500: #38393b;
     --neutra-400: #707070;
     --neutra-300: #b0b0b0;
     --neutra-200: #d9d9d9;
     --neutra-100: #f2f2f2;
     --neutra-50: #f9f9f9;

     --primary-600: #C83728;
     --primary-500: #f15f3c;
     --primary-400: #f9a58c;
     --primary-300: #f9d9d3;
     --primary-200: #ffe6e3;
     --primary-100: #fff2ed;

     --secondary-500: #460000;
     --secondary-100: #ffd9d9;

     --altura-painel: 640px;
}

body {
     background-color: var(--neutra-500);
}

.body {
     font-family: "Open Sans", serif;
     font-optical-sizing: auto;
     font-style: normal;
}

#indicator {
     position: absolute;
     max-width: calc(100% - 30px);
     width: 0%;
     height: 3px;
     background: var(--primary-500);
     /* top: .2rem; */
     /* top: -3px; */
     top: 0px;
     left: 15px;
     border-radius: 30px 30px 0px 0px;
     z-index: 33;
     /* Borda arredondada na direita */
}

#indicator:after {
     /* content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     left: 0;
     right: 0;
     background: var(--neutra-400);
     border-radius: 30px 30px 0px 0px;
     z-index: 30; */
}

/* Garante que o container de slides ocupe a tela inteira */
.container-fluid {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     /* Define a altura como o tamanho total da tela */
     margin: 0;
}

@media screen and (max-width: 768px) {
     .container-fluid {
          padding: 0;
          border-radius: 30px;
     }
}

/* Estilo padrão do painel para dispositivos não móveis */
painel {
     display: block;
     width: 360px;
     height: var(--altura-painel);
     position: relative;
     border-radius: 30px;
     overflow: hidden;
}

/* Ajustes para dispositivos móveis (largura máxima de 768px, por exemplo) */
@media (max-width: 576px) {
     painel {
          width: 100vw;
          /* Largura total da janela de visualização */
          height: 100vh;
          /* Altura total da janela de visualização */
     }
}


/* Área dos slides */
painel slides {
     width: 100%;
     height: 100%;

     /* border: 1px solid #ccc; */

     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     display: block;
     position: relative;
     overflow-y: scroll;
     /* Habilita rolagem vertical */
     scroll-snap-type: y mandatory;
     /* scroll-snap-type: y proximity; */
     /* Encaixe ao rolar */

     border-radius: 30px;
}

@media screen and (max-width: 576px) {
     painel slides {
          height: 100dvh;
     }

}

/* Navegação */
painel navegacao {
     position: absolute;
     top: 50%;
     right: 20px;
     transform: translateY(-50%);
     display: flex;
     flex-direction: column;
     gap: 10px;
     /* Espaçamento entre os bullets */
     z-index: 10;
     /* Garante que fique sobre os slides */
     display: none;
}

painel navegacao bullet {
     display: block;
     width: 10px;
     height: 10px;
     background-color: #ccc;
     /* Cor padrão do bullet */
     border-radius: 50%;
     cursor: pointer;
     transition: background-color 0.3s ease;
}

painel navegacao bullet:hover,
bullet.active {
     background-color: #ff5722;
     /* Cor ao hover ou ativo */
}

/* Estilo geral de todos os slides */
slide {
     width: 100%;
     height: 100%;
     /* height: 100dvh; */
     /* Cada slide ocupa 100% da altura da viewport */
     scroll-snap-align: start;
     /* Encaixe no topo ao rolar */
     /* padding: 30px 40px 30px 30px; */
     padding: 20px;
     box-sizing: border-box;
     font-family: "Open Sans", serif;
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
     position: relative;
     overflow: hidden;
}

/* Formatação de Backgrounds */
slide[background="1"] {
     background-color: #f9f9f9;
     background-image: url("../images/backgrounds/background-01.png");
     background-size: cover;
     background-position: center;
}

slide[background="2"] {
     background-color: var(--primary-100);
}

slide[background="3"] {
     background-color: #000;
}

slide[background="4"] {
     background-color: var(--secondary-500);
}

slide[detalhe="ondas-overlay"] {
     padding: 0;
}

slide[detalhe="ondas-overlay"]:after {
     content: '';
     display: block;
     /* width: 375px; */
     width: 100%;
     /* altura com gradiente */
     /* height: 358px; */
     height: 100%;
     /* altura com svg */
     /* height: 130px; */
     position: absolute;
     bottom: 0;
     left: 0;
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%), url("../images/detalhe-ondas-sem-bg.svg");
     background-repeat: no-repeat;
     background-position: bottom;
     background-size: 100% auto;
}
slide[detalhe="ondas"]{
     padding-bottom: 120px;
}
slide[detalhe="ondas"]:after {
     content: '';
     display: block;
     width: 100%;
     max-height: 200px;
     height: 100%;
     position: absolute;
     bottom: 0;
     left: 0;
     background: url("../images/detalhe-ondas-sem-bg.svg");
     background-repeat: no-repeat;
     background-position: bottom;
     background-size: 100% auto;
}

/* Geral - Alinhamento do conteúdo no slide */
slide[alinhamento-h="left"] {
     align-items: flex-start;
}

slide[alinhamento-h="center"] {
     align-items: center;
}

slide[alinhamento-h="right"] {
     align-items: flex-end;
}

/* Alinhamento horizontal de um conteúdo específico */
[alinhamento-h="left"] {
     align-self: flex-start;
}

[alinhamento-h="center"] {
     align-self: center;
}

[alinhamento-h="right"] {
     align-self: flex-end;
}

categoria[alinhamento="left"] {
     text-align: left;
}

categoria[alinhamento="center"] {
     text-align: center;
}

categoria[alinhamento="right"] {
     text-align: right;
}

/* Alinhamento horizontal de texto */
[alinhamento="left"] {
     text-align: left;
}

[alinhamento="center"] {
     text-align: center;
}

[alinhamento="right"] {
     text-align: right;
}

/* Geral - Alinhamento vertical */
slide[alinhamento-v="top"] {
     justify-content: flex-start;
}

slide[alinhamento-v="center"] {
     justify-content: center;
}

slide[alinhamento-v="bottom"] {
     justify-content: flex-end;
}

/* Geral - logo */
logo {
     display: block;
     /* Garante que o logo seja exibido como um bloco */
     /* background-image: url("../images/logo/logo-white.svg"); */
     background-image: url("../images/logo/e-visita.svg");
     background-size: contain;
     background-repeat: no-repeat;
     background-position: left;
     width: 150px;
     height: 50px;
     position: relative;
     margin: 0 auto 20px;
}

/* ###################### Elementos de Texto ###################### */
conteudo-banner {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     display: flex;
     height: calc(100% - 130px);
     flex-direction: column;
     align-items: flex-start;
     justify-content: space-between;
     padding: 24px;
     gap: 20px;
     z-index: 1;
}

boas-vindas {
     display: block;
     font-size: 1.2rem;
     /* color: var(--neutra-500); */
     color: #fff;
     line-height: 1.2;
     font-weight: 500;
     margin-bottom: 20px;
}

titulo-reels {
     display: block;
     font-size: 1.8rem;
     color: #ffffff;
     line-height: 1.2;
     font-weight: 600;
}

titulo-reels destaque {
     color: var(--primary-500);
}

orientacoes {
     display: block;
}

orientacoes img {
     display: block;
     width: 40px;
     height: 40px;
     aspect-ratio: 1 / 1;
     margin-top: 20px;
}

titulo[cor="dark"],
topico[cor="dark"],
descricao[cor="dark"],
texto[cor="dark"],
referencia[cor="dark"],
disclaimer[cor="dark"],
categoria[cor="dark"],
label[cor="dark"] {
     color: var(--secondary-500);
}

titulo[cor="default"],
topico[cor="default"],
descricao[cor="default"],
texto[cor="default"],
referencia[cor="default"],
disclaimer[cor="default"],
categoria[cor="default"],
label[cor="default"] {
     color: var(--primary-500);
}

titulo[cor="light"],
topico[cor="light"],
descricao[cor="light"],
texto[cor="light"],
referencia[cor="light"],
disclaimer[cor="light"],
categoria[cor="light"],
label[cor="light"] {
     color: #FFFFFF;
}

topicos {
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
     align-content: flex-start;
     align-items: flex-start;
     justify-content: center;
     margin-top: 20px;
}

topicos topico {
     display: block;
     position: relative;
     padding-left: 40px;
     margin-bottom: 30px;
     font-size: 1rem;
     line-height: 1.5;
}

topicos topico::before {
     content: "";
     display: block;
     width: 25px;
     height: 25px;
     background-image: url(../images/bullet-image.svg);
     background-size: cover;
     background-position: center;
     position: absolute;
     top: 20px;
     left: 0;
     transform: translateY(-50%);
}

youtube {
     display: flex;
     width: 100%;
     height: 100%;
     margin: 0 !important;
     border: none;
     align-content: center;
     justify-content: space-between;
     align-items: stretch;
     flex-direction: row;
     flex-wrap: nowrap;
     border-radius: 20px;
}

youtube::before {
     content: '';
     display: block;
     width: 100%;
     height: 40%;
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
}

youtube::after {
     content: '';
     display: block;
     width: 100%;
     height: 40%;
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
}

youtube iframe {
     /* width: 100%;
     height: 100%; */
     border-radius: 20px;
}

/* ###################### Produtos###################### */

/* Geral */
saiba-mais {
     background-color: var(--primary-500);
     color: #FFFFFF;
     padding: 10px 20px;
     margin-bottom: 20px;
     cursor: pointer;
     text-align: center;
}

saiba-mais:hover {
     background-color: var(--primary-600);
}

/* Geral */
saiba-mais-instagram {
     background-color: var(--primary-500);
     color: #FFFFFF;
     padding: 10px 20px;
     margin-bottom: 20px;
     cursor: pointer;
     text-align: center;
}

saiba-mais-instagram:hover {
     background-color: var(--primary-600);
}

[estilo="rounded"] {
     border-radius: 25px;
}

[estilo="square-rounded"] {
     border-radius: 10px;
}

saiba-mais a {
     color: #FFFFFF;
     text-decoration: none;
}

produtos[layout="one-product"] produto {
     display: block;
     font-size: 1.2rem;
     color: var(--neutra-500);
     line-height: 1.2;
     font-weight: 600;
     margin-bottom: 20px;
     border: 1px solid var(--primary-500);
     padding: 25px;
     border-radius: 25px;
     width: 100%;
}

produtos[layout="one-product"] produto detalhamento {
     background-color: #FFFFFF;
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
     align-content: center;
     align-items: center;
     justify-content: center;
     padding: 15px;
     text-align: center;
     border-radius: 15px;
     margin-bottom: 20px;
}

produtos[layout="one-product"] produto detalhamento img {
     max-width: 150px;
     width: 100%;
     max-height: 100%;
     height: auto;
}

produtos[layout="one-product"] produto detalhamento programa {
     background-color: var(--primary-500);
     color: #FFFFFF;
     padding: 10px 20px;
     border-radius: 0 0 10px 10px;
     margin-top: -15px;
     font-size: 0.6rem;
     font-weight: 400;
     width: 90%;
}

produtos[layout="one-product"] produto detalhamento nome {
     font-size: 1.2rem;
     color: var(--neutra-500);
}

produtos[layout="one-product"] produto detalhamento categoria {
     font-size: 0.8rem;
     color: var(--neutra-300);
     font-weight: 400;
}

produtos[layout="one-product"] produto descricao {
     font-size: 0.8rem;
     color: var(--neutra-500);
     font-weight: 400;
     line-height: 1 !important;
}

descricao {
     margin-top: 10px;
     margin-bottom: 10px;
}

produtos[layout="two-products"] produto {
     display: flex;
     font-size: 1.2rem;
     color: var(--neutra-500);
     line-height: 1.2;
     font-weight: 600;
     margin-bottom: 20px;
     border: 1px solid var(--primary-500);
     padding: 25px;
     border-radius: 25px;
     background-color: #FFFFFF;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     flex-wrap: nowrap;
}

produtos[layout="two-products"] produto img {
     max-width: 100px;
     width: 100%;
     max-height: 100%;
     height: auto;
}

produtos[layout="two-products"] produto nome {
     font-size: 1.2rem;
     color: var(--neutra-500);
}

produtos[layout="two-products"] produto categoria {
     font-size: 0.8rem;
     color: var(--neutra-300);
     font-weight: 400;
}

produtos[layout="two-products"] produto a {
     color: var(--primary-500);
     font-size: 0.9rem;
     font-weight: 500;
     margin-top: 10px;
}

produtos[layout="tree-products"] {
     width: 100%;
}

produtos[layout="tree-products"] produto {
     display: flex;
     font-size: 1.2rem;
     color: var(--neutra-500);
     line-height: 1.2;
     font-weight: 600;
     margin-bottom: 20px;
     border: 1px solid var(--primary-500);
     padding: 15px;
     border-radius: 25px;
     background-color: #FFFFFF;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     flex-wrap: nowrap;
     align-content: center;
}

produtos[layout="tree-products"] produto img {
     max-width: 80px;
     width: 100%;
     max-height: 100%;
     height: auto;
}

produtos[layout="tree-products"] produto detalhamento {
     max-width: 150px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     align-content: flex-start;
     justify-content: center;
     margin-left: 20px;
}

produtos[layout="tree-products"] produto detalhamento nome {
     font-size: 1.2rem;
     color: var(--neutra-500);
}

produtos[layout="tree-products"] produto detalhamento categoria {
     font-size: 0.8rem;
     color: var(--neutra-300);
     font-weight: 400;
}

produtos[layout="tree-products"] produto detalhamento a {
     color: var(--primary-500);
     font-size: 0.9rem;
     font-weight: 500;
}

pacote {
     background-color: #FFFFFF;
     padding: 20px;
     display: flex;
     flex-direction: row;
     align-content: center;
     justify-content: center;
     align-items: center;
     flex-wrap: nowrap;
     margin: 20px;
     border-radius: 25px;
}

pacote[background="true"] {
     background-color: #FFFFFF;
     padding: 20px;
}

pacote[background="false"] {
     background: none;
     padding: 20px;
}

pacote img {
     max-width: 80%;
     width: 100%;
     max-height: 100%;
     height: auto;
     margin: 20px;
     margin: auto;
}

grid-instagram {
     background-color: #FFFFFF;
     /* padding: 20px; */
     display: flex;
     flex-direction: row;
     align-content: center;
     justify-content: center;
     align-items: center;
     flex-wrap: nowrap;
     margin: 20px 0;
     border-radius: 25px;
}

grid-instagram[background="true"] {
     background-color: #FFFFFF;
     padding: 20px;
}

grid-instagram[background="false"] {
     background: none;
     /* padding: 20px; */
}

grid-instagram img {
     width: 100%;
     margin: auto;
}

.solicitar-amostra {
     background: var(--primary-500);
     padding: 10px 20px;
     border-radius: 10px;
     margin-bottom: 10px;
     margin-top: 10px;
     text-decoration: none;
     color: #FFFFFF;
     position: absolute;
     bottom: 10px;
}

.solicitar-amostra[aria-disabled="true"] {
     background: var(--neutra-400);
     cursor: not-allowed;
     pointer-events: none;
}

.solicitar-amostra:not([aria-disabled="true"]):hover {
     background: var(--primary-600);
}

disclaimer {
     font-size: 0.6rem;
     color: var(--neutra-500);
     font-weight: 400;
     margin-top: 10px;
     text-align: justify;
     width: 100%;
     padding-bottom: 20px;
}

avaliacao {
     width: 100%;
     min-height: 257px;
     background-color: #F15F3C;
     color: #FFFFFF;
     padding: 25px;
     border-radius: 25px;
     display: flex;
     flex-direction: column;
     align-content: center;
     align-items: center;
     justify-content: center;
     flex-wrap: nowrap;
     text-align: center;
     transition: all 0.3s ease;
}

.deixar-depois {
     /* display: none; */
     margin-top: 16px;
     color: #000;
}

avaliacao opcoes {
     display: flex;
     justify-content: space-between;
     flex-direction: row;
     flex-wrap: nowrap;
     align-items: center;
     width: 100%;
}

avaliacao button {
     background: none;
     border: none;
     cursor: pointer;
     font-size: 1rem;
     color: #FFFFFF;
     font-weight: 400;
     padding: 10px;
     background-color: var(--primary-600);
     margin: 20px 15px 0px 15px;
     width: 100%;
     border-radius: 15px;
}

avaliacao button:hover {
     background-color: var(--primary-400);
}

avaliacao opcoes opcao {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 40px;
     height: 55px;
     background-color: var(--neutra-100);
     color: var(--neutra-300);
     padding: 15px;
     border-radius: 100px;
     cursor: pointer;
     font-weight: 700;
     transition: all 0.3s ease;
}

avaliacao opcoes opcao:hover {}

avaliacao opcoes opcao:hover,
avaliacao opcoes opcao.active {
     background-color: var(--primary-300);
     color: var(--primary-500);
     transform: scale(1.1);
}

avaliacao opcoes opcao.active {
     /* transform: rotate3d(0, 0, 1, 360deg) scale(1.1); */
}

avaliacao opcoes opcao.active:nth-child(1) {
     transition-delay: 0.1s;
}

avaliacao opcoes opcao.active:nth-child(2) {
     transition-delay: 0.2s;
}

avaliacao opcoes opcao.active:nth-child(3) {
     transition-delay: 0.3s;
}

avaliacao opcoes opcao.active:nth-child(4) {
     transition-delay: 0.4s;
}

avaliacao opcoes opcao.active:nth-child(5) {
     transition-delay: 0.5s;
}

agradecimento-avaliacao {
     display: flex;
     flex-direction: column;
     align-content: center;
     align-items: center;
}

agradecimento-avaliacao titulo {
     margin-bottom: 0;
}

agradecimento-avaliacao descricao {
     text-align: center;
     font-size: 1rem;
     line-height: 1.2;
     color: var(--neutra-100);
     font-weight: 400;
     margin-bottom: 20px;
}

agradecimento-avaliacao textarea {
     width: 100%;
     height: 150px;
     padding: 12px 20px;
     box-sizing: border-box;
     border: 1px solid var(--primary-500);
     border-radius: 10px;
     background-color: #f8f8f8;
     font-size: 16px;
     resize: none;
}

enviar-avaliacao {
     background: none;
     border: none;
     cursor: pointer;
     font-size: 1rem;
     color: #FFFFFF;
     font-weight: 400;
     padding: 10px;
     background-color: var(--primary-500);
     margin: 20px 15px 0px 15px;
     width: 80%;
     border-radius: 15px;
     text-align: center;
}

enviar-avaliacao:hover {
     background-color: var(--primary-600);
}

avaliacao textarea {
     display: flex;
     width: 100%;
     min-height: 70px;
     padding: 20px;
     align-items: center;
     border: none;
     border-radius: 10px;
     resize: none;
     background: var(--primary-100);
}

avaliacao textarea::placeholder {
     color: rgba(0, 0, 0, 0.25);
}

avaliacao textarea:focus-visible {
     background: #ffff;
     outline: none;

}




conteudo-extra {
     display: flex;
     flex-direction: column;
     align-content: center;
     align-items: center;
     justify-content: center;
     flex-wrap: nowrap;
     margin-top: 20px;
     padding: 20px;
     border: 1px solid var(--primary-500);
     border-radius: 20px;
}

conteudo-extra titulo {
     font-size: 1rem;
     color: var(--neutra-500);
     font-weight: 600;
     margin-bottom: 20px;
}

conteudo-extra a {
     text-decoration: none;
     color: var(--primary-100);
     background-color: var(--primary-500);
     padding: 10px 20px;
     display: flex;
     flex-direction: row;
     align-content: center;
     justify-content: center;
     align-items: center;
     gap: 8px;
}

titulo {
     font-size: 24px;
     margin-bottom: 16px;
}

texto {
     display: block;
     font-size: 1.2rem;
     line-height: 1.6;
     font-weight: 400;
     margin-bottom: 20px;
     width: 90%;
}

destaque {
     font-weight: 700;
}

topico {
     display: block;
     font-size: 1rem;
     color: var(--neutra-500);
     line-height: 1.2;
     font-weight: 400;
     width: 100%;
     margin-bottom: 20px;
}

topicos+titulo {
     margin-top: 20px;
     /* Ou qualquer valor desejado */
}

tagline {
     display: block;
     font-size: 1.8rem;
     line-height: 1.8;
     font-weight: 600;
     width: 90%;
     margin-bottom: 20px;
}

referencias {
     display: block;
     font-size: 0.5rem;
     color: var(--neutra-400);
     line-height: 1.2;
     text-align: justify;
     font-weight: 400;
     width: 100%;
     margin-top: 10 px;
}

referencia {
     margin-bottom: 20px;
}


/* VS-2 */
imagem-popup {
     width: 100%;
     max-height: 100%;
}

img.imagem-popup {
    position: relative;
    width: 100%;
}

slide[detalhe="ondas-overlay"] imagem-popup img{
     object-fit: cover;
     object-position: top center; 

}
imagem-popup popup-destaque img {
     display: block;
     width: 100%;
     height: 100%;
     border-radius: 20px;
     object-fit: contain;
     object-position: center;
}

imagem-popup:has(popup-content) popup-destaque img:hover,
popup-content-close:hover {
     cursor: pointer;
}

imagem-popup popup-content {}

imagem-popup popup-content popup-overlay {
     display: none;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     position: absolute;
     top: 0;
     left: 0;
     z-index: 10;
}

imagem-popup popup-content popup-content-box {
     position: absolute;
     width: 100%;
     max-height: calc(100% - var(--altura-painel) / 2 + 150px);
     height: 100%;

     left: 0;
     right: 0;
     bottom: -100dvh;
     opacity: 0;

     display: flex;
     flex-direction: column;
     align-content: center;
     align-items: center;
     justify-content: center;
     flex-wrap: nowrap;

     padding: 20px;
     border-radius: 20px 20px 0 0;
     background-color: #FFFFFF;

     overflow-y: scroll;
     z-index: 11;
     transition: all 0.6s ease;
}

@media screen and (max-width: 576px) {
     imagem-popup popup-content popup-content-box {
          max-height: 75dvh;
     }

}

imagem-popup popup-content popup-content-box popup-content-header {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     width: 100%;
     height: 30px;
     position: sticky;
     top: 0;
}

imagem-popup popup-content popup-content-box popup-content-header popup-content-close::after {
     content: '✕';
     font-size: 1.5rem;
     color: var(--neutra-500);
     font-weight: 700;
}

imagem-popup popup-content popup-content-box popup-content-body {
     width: 100%;
     height: 100%;
}

imagem-popup popup-content popup-content-box img {
     width: 100%;
     height: auto;
     object-fit: contain;
     /* max-height: 50dvh; */
}

imagem-popup.active popup-content popup-overlay {
     display: block;
}

imagem-popup.active popup-content popup-content-box {
     bottom: 0;
     opacity: 1;
}




carrossel {
     display: flex;
     flex-direction: row;
     width: 100%;
     height: 100%;
}

carrossel .swiper-wrapper {
     display: flex;
     height: calc(100% - 24px);
}

carrossel .carrossel-slide[data-popup]:hover {
     /* width: 100%;    */
     cursor: pointer;
}

carrossel img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     object-position: center;
     border-radius: 20px;
}

carrossel [class^="swiper-button-"] {
     background: var(--primary-500);
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
}

carrossel [class^="swiper-button-"]::after {
     font-size: 12px;
     font-weight: 700;
     color: #fff;
}

carrossel .paginacao {
     position: absolute;
     bottom: 20px;
     left: 0;
     right: 0;
     margin: 0 auto;
     /* margin: calc(25px / 2) 0; */
}

carrossel .paginacao .swiper-pagination {
     display: flex;
     align-items: center;
     justify-content: center;
     position: initial;
}

carrossel .paginacao .swiper-pagination .swiper-pagination-bullet {
     display: block;
     width: 10px;
     height: 10px;
     border-radius: 50px;
     margin: 0 10px;
     background: var(--neutra-300);
}

carrossel .paginacao .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
     background: var(--secondary-500);
}

/* Direct/adjacent sibling selector - targets imagem-popup that immediately follows carrossel */
carrossel + imagem-popup {
     /* CSS rules for direct sibling relationship */
     position: absolute;
}

/* General sibling selector - targets any imagem-popup that follows carrossel */
carrossel ~ imagem-popup {
     /* CSS rules for any following sibling relationship */
}


termo-recebimento {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 5px;
}

termo-recebimento input[type="checkbox"] {
     width: 20px;
     height: 20px;
     cursor: pointer;
     border: none;
     border-radius: 20px;
     accent-color: var(--primary-500);
}

.slide-controls.d-none.d-md-flex.flex-column {
    padding-left: 15px;
}

painel {
  position: relative;
}

.carrossel-wrapper {
  overflow: hidden;
}

.carrossel {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.carrossel-item {
  min-width: 100%;
  cursor: pointer;
}

.carrossel-item img {
  width: 100%;
  display: block;
}

.btn-carrossel-global {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--primary-500);
  color: white;
  border: none;
  padding: 9px 15px;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.8;
  z-index: 1000;
  border-radius: 50%;
  transition: opacity 0.3s ease;
}

.btn-carrossel-global:hover {
  opacity: 1;
}

.btn-carrossel-global[left] {
  left: 10px;
}

.btn-carrossel-global[right] {
  right: 10px;
}

.popup-modal {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background: #fff;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  overflow-y: auto;
  animation: slideUp 0.3s ease-out;
}

.popup-modal img {
  display: block;
  height: auto;
  width: 90%;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
}

.popup-modal .close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  color: #333;
  background: none;
  border: none;
  cursor: pointer;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0%);
  }
}