@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&display=swap');

:root {
    --cor-principal: #712cf9;    
    --cor-secundaria: #9467ec;  
    --cor-principal-claro: #f1eafd;
    --cor-secundaria-claro: #eaf2fd;
    --cor-links-topo: #fff;  
    --cor-botao-topo: #56bdc0;
    --cor-destaque: #fa3d8b;
    --cor-destaque-claro: #f8f2ec;
    --cor-destaque2: #56bdc0;
    --cor-footer: #4c0bce;
    --cor-links-footer: #fff;
    --cor-preto: #000;
    --cor-principal-medio: #ac83ff;
    --cor-destaque-medio: #ff89ba;
    --animate-delay: 0.2s;
}

a, td, tr, table, div, span, body {font-size:14px; text-decoration: none; font-family: "Poppins", serif; font-style: normal; font-weight: 400;}
p {font-size:16px;}
a {-webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear;}
body { background-color: #fff; padding: 0px; margin: 0px;}
.containner { max-width: 1250px; margin-right: auto; margin-left: auto;}


/*  #################################################################################################### */

.topo {background-color: var(--cor-principal);  color: var(--cor-links-topo); font-size:20px; line-height: 32px; min-height:80px;
    padding-top:10px; padding-bottom:10px; border-bottom:1px solid var(--cor-secundaria); 
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(255, 255, 255, 0.15); }

.botaco_contratar_topo { font-size: 16px; background-color: var(--cor-destaque); border:4px solid var(--cor-destaque); color: var(--cor-links-topo); 
    border-radius: 20px; padding: 6px 18px 6px 18px;}
.botaco_contratar_topo:hover {  background-color: var(--cor-destaque2); border:4px solid var(--cor-destaque-claro); color: var(--cor-links-topo); }
.menu_topo { list-style: none; }
.menu_topo { display: inline; color: var(--cor-links-topo); margin-right:36px; font-size:18px; font-weight: 500; }
.menu_topo:hover .dropdown_menu {display: block;}
.drop_menu {  animation-duration: 2s; }

@media screen and (max-width: 800px) {
    .menu_topo { margin-right:22px; font-size:14px; font-weight: 500; }
}


/*  #################################################################################################### */

.banner_topo {background-color: var(--cor-principal); background-image: url(/public/img/background-topo.webp); 
    background-size:cover; padding-top:42px; padding-bottom:42px;  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(255, 255, 255, 0.15);} 
.banner_topo h1 {font-size: 36px; color: var(--cor-links-topo)}
.banner_topo_destaque {font-size:12px; color:var(--cor-links-topo); border:2px solid var(--cor-destaque2); border-radius:20px; padding:10px; }
.botao_criar_minha_loja {font-size:16px; color:var(--cor-links-topo); background-color: var(--cor-destaque); padding:16px 20px 16px 20px; border-radius: 24px; }
.botao_criar_minha_loja:hover {color:var(--cor-links-topo); background-color: var(--cor-destaque2);  }
.banner_topo p {font-size:16px; line-height: 24px; color: var(--cor-links-topo); }

.moldura_fora {background-image: url(/public/img/moldura-pc.webp); width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover;}
.moldura_interna { width:100% }

/* ======================================================================= */


h1 { font-size:36px; font-weight: 500; line-height: 50px;}
h2 { font-size:32px; font-weight: 500; line-height: 46px;}
.lead {font-size: 16px; line-height: 28px; margin-top:20px; margin-bottom:20px; color: var(--cor-principal)}
.lead-small {font-size: 12px; line-height: 20px; margin-top:20px; margin-bottom:20px; }
.lead_black {font-size: 16px; line-height: 28px; margin-top:20px; margin-bottom:20px; color: #000}
.mt-6 {margin-top: 2rem !important;}
.mb-6 {margin-bottom: 2rem !important;}
.bg-light2 { background-color: var(--cor-principal-medio);}


.nav-pills { margin-right:auto; margin-left:auto;}
.nav-pills .nav-link.active {background-color: var(--cor-principal); color: var(--cor-links-topo);}
.nav-pills .nav-link.active:hover {background-color: var(--cor-destaque); color: var(--cor-links-topo);}
.nav-pills .nav-link {background-color: var(--cor-destaque-claro); color: var(--cor-destaque);}
.nav-link {font-size:18px;}



/* ======================================================================= */
.section { padding-top:40px; padding-bottom:40px; }
.section h1 { font-size:36px; font-weight: 500; line-height: 40px; padding-top:20px; padding-bottom:30px;} 
.section h2 { font-size:30px; font-weight: 500; line-height: 38px; padding-top:20px; padding-bottom:30px;} 
.section h3 { font-size:26px; font-weight: 500; line-height: 33px; padding-top:20px; padding-bottom:30px;} 
.section h4 { font-size:22px; font-weight: 500; line-height: 32px; } 
.section_i {font-size:38px; line-height: 56px; color:var(--cor-destaque2);}
.section .accordion h2 {padding-top:0px; padding-bottom:0px; }
.section .accordion i {color: var(--cor-destaque2) }



.h1_line { width:100px; height:6px; background-color: var(--cor-destaque); bottom:10px; left:0px; position:absolute; }
.titulo_destaque {font-size:12px; color:var(--cor-preto); border:2px solid var(--cor-destaque); background-color:var(--cor-destaque-claro); border-radius:20px; padding:6px 12px 6px 12px; }
.section .botao_criar_minha_loja {font-size:16px; color:var(--cor-links-topo); background-color: var(--cor-destaque); padding:16px 20px 16px 20px; border-radius: 24px; }
.section .botao_criar_minha_loja:hover {color:var(--cor-links-topo); background-color: var(--cor-destaque2);  }
.section .botao_testar_loja {font-size:20px; color:var(--cor-links-topo); background-color: var(--cor-destaque2); padding:16px 20px 16px 20px; border-radius: 24px; }
.section .botao_testar_loja:hover {color:var(--cor-links-topo); background-color: var(--cor-destaque);  }
.icone-section-1 {font-size:50px; color: var(--cor-black); line-height: 80px;}
.box_section_1 { padding:20px; background-color: var(--cor-principal-claro); border-radius:24px; }
.box_section_2 { padding:20px; background-color: var(--cor-secundaria-claro); border-radius:24px; height: 100%;}
.box_section_2 i {font-size:40px; color: var(--cor-destaque2); line-height: 80px;}
.box_section_2 h4 {font-size:20px; font-weight: 600;}
.box_section_2 a {color:var(--cor-pdestaque2); }

.box_section_color_1 {background-color: var(--cor-principal-medio); border-radius: 24px; padding:24px; height: 100%;}
.box_section_color_2 {background-color: var(--cor-destaque-medio); border-radius: 24px; padding:24px; height: 100%; }
.foto_box_1 {background-image: url('/public/img/lojista-1.webp'); background-size: cover; border-radius: 24px; height: 100%; }
.foto_box_2 {background-image: url('/public/img/lojista-3.webp'); background-size: cover; border-radius: 24px; height: 100%; }
.foto_box_3 {background-image: url('/public/img/lojista-2.webp'); background-size: cover; border-radius: 24px; height: 100%; }
.texto_foto_box {background-color: var(--cor-principal-claro); opacity: 0.8; border-radius:15px; position:realtive; font-size: 15px; line-height: 22px; margin-top:40%;  color:#000;  padding:15px; }

.swiper-slide img {max-height:420px;}
.swiper-slide2 img {opacity: 0.5; transition: 0.3s; filter: grayscale(100%);}
.swiper-slide {height: 100%;}
.clients-slider-4 img { width:100%; overflow: hidden;}
.clients-slider-4 {max-height: 400px;}


/* ======================================================================= */
/*  Planos  */
.box_plano {background-color: var(--cor-principal-claro); font-size: 12px; line-height: 20px; border-radius: 20px; padding:20px; height:100%}
.box_plano_bg2 {background-color: var(--cor-secundaria-claro); }
.box_plano h3 {font-size: 28px; color:var(--cor-principal); line-height: 34px; padding:0px; margin:0px; font-weight: 600;}
.box_plano h4 {font-size: 20px; color:var(--cor-principal); line-height: 26px; padding:0px; margin:0px;}
.box_plano h5 {font-size: 12px; color:var(--cor-destaque); line-height: 30px;}
.box_plano .divider {border-bottom:1px dotted var(--cor-destaque); width: 90%; margin-top:10px; margin-bottom:10px; margin-left: auto; margin-right: auto;}

.tab-pane.active {   animation: slide-down 0.1s ease-out;}
.box_plano .botao_contratar {font-size:14px; color:var(--cor-links-topo); background-color: var(--cor-destaque); padding:10px 16px 10px 16px; border-radius: 24px; margin-top:14px; margin-bottom:14px; }
.box_plano .botao_contratar:hover { color:var(--cor-links-topo); background-color: var(--cor-destaque2);  }
.box_plano_bg2 .botao_contratar {font-size:14px; color:var(--cor-links-topo); background-color: var(--cor-destaque2); padding:10px 16px 10px 16px; border-radius: 24px; margin-top:14px; margin-bottom:14px; }
.box_plano_bg2 .botao_contratar:hover { color:var(--cor-links-topo); background-color: var(--cor-destaque);  }
.box_plano ul, .box_plano ul li {list-style: none; text-align: left; padding-left:0px; margin-left:0px; font-size:13px; line-height: 22px;;}
.box_plano i {color: var(--cor-destaque); padding-right:7px;}
.box_plano_bg2 i {color: var(--cor-destaque2); padding-right:7px;}
.box_plano .link_recursos {background-color: var(--cor-principal);  color: var(--cor-links-topo); border-radius:10px; padding: 7px 12px 7px 12px; margin-top:15px; margin-bottom:15px; font-size:12px;}

.botao_menor {background-color: var(--cor-principal);  color: var(--cor-links-topo) !important; border-radius:10px; padding: 7px 12px 7px 12px; margin-top:15px; margin-bottom:15px; font-size:12px;}

/* ======================================================================= */
.section_faixa_contratar {background-color: var(--cor-principal); padding-top:20px; padding-bottom: 20px; font-size:28px;  overflow: auto;  overflow-x: hidden;}

.marquee_faixa { display: inline-block;   animation: marquee 10s linear infinite; width: 100%;  }
.section_faixa_contratar a {font-size:24px; font-weight: 600; color:var(--cor-links-topo); margin-right:50px; }
.section_faixa_contratar i {padding-left:12px; color:var(--cor-destaque); }
.marquee_faixa div {width: 30% !important; float: left;}
@media screen and (max-width: 768px) {
    .marquee_faixa div {width: 100% !important; float: left;}
}
 @keyframes marquee {from {transform: translateX(-100%);} to {transform: translateX(100%); }} 


/* ======================================================================= */
.footer { background-color: var(--cor-footer); padding-top:30px; padding-bottom: 30px; color:var(--cor-links-footer)}
.footer_linha {border-top: 1px dotted var(--cor-principal); margin-top:20px; padding-top:20px;}
.links_footer {list-style: none; margin-left:0px; padding-left:0px;}
.links_footer li {margin-left:0px; padding-left:10px; }
.links_footer li a {font-size:13px; color:var(--cor-links-footer); line-height: 20px;}
.social-links a  {font-size:36px; padding-right:22px; color: var(--cor-links-footer)}



@media screen and (max-width: 768px) {
    .containner {max-width: 94%;}
}

/* ############################################################################################################ */
.browser-mockup { border-top: 2em solid rgba(230, 230, 230, 0.7); box-shadow: 0 0.1em 1em 0 rgba(0, 0, 0, 0.4); position: relative; border-radius: 3px 3px 0 0; background-color: #fff;; }
.browser-mockup:before { display: block; position: absolute; content: ''; top: -1.25em; left: 1em;  width: 0.5em; height: 0.5em; border-radius: 50%; background-color: #f44;     box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5; }
.browser-mockup.with-tab:after {display: block; position: absolute; content: ''; top: -2em; left: 5.5em; width: 20%; height: 0em; border-bottom: 2em solid white;    border-left: 0.8em solid transparent;     border-right: 0.8em solid transparent;  }
.browser-mockup.with-url:after { display: block; position: absolute; content: '';top: -1.6em;left: 5.5em; width: calc(100% - 6em); height: 1.2em;border-radius: 2px;   background-color: white;  }  
.browser-mockup > * { display: block; }