*{font-family: 'Roboto', sans-serif;}
a{text-decoration:none;}

.video-pg-bg{width: 100%;height:0;left: 0;overflow:hidden;max-width:100%;position:relative;padding-bottom:56.25%;}
.video-pg-bg iframe{position:absolute;width:100%;height:100%;left:0;}

.remove_desktop{display:none;}

.signup_out_none{display:none;}

@media(max-width: 50em){
    .remove_desktop{display:block;}
    .remove_mobile{display:none;}
}

/** FORM BASE **/

.form {background:#FFF; padding:40px 100px;width:100%;}
.form input, .form textarea, .form checkbox, .form select{width: 100%; border-radius:5px;border:solid 3px #C2C3C8;background:#FFF;padding:15px 22px;font-size:1em;color:#5B5B5E;}
.form input::placeholder, .form textarea::placeholder, .form select::placeholder{color:#5B5B5E;font-size:1em; font-weight:300;}
.form .btn{border-radius:5px;font-size:1.2em;font-weight:400;padding:22px 0;margin-top: 10px;}
.form p{padding-top:10px;font-weight:400;margin-bottom:0;}
.form a{color:#C18C44;text-decoration:underline;}

.form .form_sucess {padding-top:30px;}
.form_sucess p{padding-top:10px;font-size:1.05em;font-weight:300;text-align: left;}

.form img{width: 200px; margin-bottom: 20px;}
.form .for_sucess img:last-of-type{ width: 10%; margin-bottom: 20px;}

.warning_box_form {background:#EAC25C;padding:35px 35px 15px 35px;width:100%;}
.warning_box_form p{text-align:left;font-size:1.2em;padding-bottom:20px;}
.warning_box_form p b{text-transform:uppercase;font-size:1.2em;}

.warning_box_form_blue {background:#27387D;padding:25px;width:100%;color:#FFF;}
.warning_box_form_blue p{text-align:left;font-size:1.2em;}
.warning_box_form_blue p b{text-transform:uppercase;font-size:1em;}

.warning_box_form_blue .pixcc {background: #FFF; color:#636363; font-size: .9em;  padding: 20px;word-break: break-all;}

.warning_box_form_blue .pixqr {width:60%;text-align: center;}

.warning_box_form_blue .btn_yellow {padding: 20px; font-size:1em;}


.form .voucher{display:flex;flex-wrap:wrap;width: 100%; color:#202020;padding:30px 0; text-align:left}
.form .voucher .voucher_info{width:80%;background:#004B66;color:#FFF;padding:20px 30px;}
.form .voucher .voucher_logo{width:20%;background:#27387D;padding:30px 30px;}
.form .voucher .voucher_logo img{width:60%;}

.form .voucher h2{font-size:1.6em;font-weight:600;padding:0;text-transform:none;}
.form .voucher p{padding-top:10px;font-size:1em;font-weight:400;}
.form .voucher p:nth-of-type(2) {padding-top:70px;}


@media(max-width: 50em){
    .form {background:#FFF;padding:40px 20px;}
    .form img{width: 150px;}
    .form .btn{font-size:1em;padding:15px 0;}
}


/* PAINEL - ADM */
.pg_events_investment .invbox.bloco_inativo{display: none;}
.pg_events_investment .invbox.bloco_ativo{display: flex;}


.bloco_inativo{display: none;}
.bloco_ativo{display: block;}


/*******************************************************************************
******************************* PAGE HOME *************************************
*******************************************************************************/


/****************************** HEADER ****************************************/

.main_header {padding:30px 0;position:absolute;width:100%;z-index:10;color:#fff;}
.header_top {display:flex;justify-content:space-between;align-items:flex-start;}
.header_logo img {width:180px;}
.header_info {display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.header_contact {display:flex;align-items:center;gap:20px;}
.header_contact p {font-size:0.9em;}
.header_contact .btn_orange {background:#d6602a;color:#fff;padding:8px 16px;border-radius:6px;text-transform:uppercase;font-size:0.8em;}
.menu_mobile {display:none;} /* <-- Agora sim, some no desktop! */
.menu_button {cursor:pointer;width:25px;height:18px;display:flex;flex-direction:column;justify-content:space-between;}
.menu_button span {display:block;height:3px;width:100%;background:#fff;border-radius:3px;}
.header_menu {display:flex;justify-content:flex-end;align-items:center;gap:40px;position:relative;}
.header_menu .header_bar {position:absolute;top:0;left:0;width:100%;height:1px;background:#4a4f5c;}
.header_menu a {color:white;text-decoration:none;text-transform:uppercase;font-size:0.9em;padding-top:10px;border-top:3px solid transparent;transition:0.3s;}
.header_menu a:hover {color:#d6602a;border-top:3px solid #d6602a;}


/* Menu ativo (desktop) */
@media (min-width: 850px) {
  .header_menu a.active {
    color: #d6602a;
    border-top: 3px solid transparent; /* sem underline, só cor */
    font-weight: bold;
    pointer-events: none; /* opcional: impede clicar de novo */
  }
}

@media(max-width:1024px){
    .header_info {display:none;}
    .header_contact {display:none;}
    .header_menu {display:none;}
    .menu_mobile {display:flex;align-items:center;}
    .mobile_menu_box {position:fixed;background:rgba(0,0,0,0.8);top:0;left:0;width:100%;height:100vh;z-index:99;display:flex;justify-content:flex-end;}
    .mobile_menu {width:260px;background:#fff;color:#202020;padding:50px 20px;display:flex;flex-direction:column;gap:20px;position:relative;}
    .mobile_menu a {color:#202020;text-decoration:none;font-size:1em;}
    .mobile_menu .btn_orange {background:#d6602a;color:white;padding:10px;text-align:center;border-radius:6px;}
    .mobile_menu .menu_button {position:absolute;top:10px;left:-45px;background:#fff;padding:10px;border-radius:50%;border:2px solid #d6602a;}
    .header_logo img {width:30%;}
}

@media(max-width:765px){
    .header_logo img {width:40%;}
}

@media(max-width:600px){
    .main_header .content{
        width: 80%;
    }
    .header_logo img {width:35%;}
}



/****************************** BANNER HERO ***********************************/


.main_banner {
    position: relative;
    padding: 230px 0 190px 0;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cliente.loquazmedia.com.br/jss/themes/jss/images/banner-bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    text-align: left;
}

.main_banner .content {
    position: relative;
    z-index: 2;
}

.main_banner h1 {
    font-size: 2.8em;
    font-weight: 700;
    line-height: 1.2em;
}

.main_banner p {
    font-size: 1em;
    padding: 20px 0;
}

.main_banner a {
    color:#FFFFFF;
}

.banner_buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}



/************** SLIDES DA HOME ****************/


.main_banner_slider {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
}

.banner_slide {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
  opacity: 0;
  transition: opacity 0.7s;
  z-index: 1;
  display: flex;
  align-items: center;
}

.banner_slide.active {
  opacity: 1;
  z-index: 2;
}

.banner_slide h1 {
  font-size: 2.8em;
  font-weight: 700;
  line-height: 1.2em;
}

.banner_slide p {
  font-size: 1.2em;
  margin: 30px 0 30px 0;
  max-width: 600px;
  color: #e2e2e2;
}

.btn.btn_orange {
  background: #d6602a;
  color: #fff;
  padding: 16px 38px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1em;
  border: none;
  transition: background .2s;
}
.btn.btn_orange:hover { background: #b84d17; }

.banner_dots {
  position: absolute;
  left: 7%;
  bottom: 48px;
  display: flex;
  gap: 14px;
  z-index: 3;
}

.banner_dots .dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
  cursor: pointer;
  transition: background .2s, border .2s;
}
.banner_dots .dot.active,
.banner_dots .dot:hover {
  background: #d6602a;
  border-color: #d6602a;
}
@media (max-width: 900px) {
  .main_banner,
  .main_banner_slider {
    padding: 150px 0 60px 0;
    height: 580px;
    min-height: 370px;
  }
  .banner_slide h1,
  .main_banner h1 {
    font-size: 2em;
    text-align: center;
  }
  .banner_slide p,
  .main_banner p {
    font-size: 1em;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 0 16px 0;
  }
  .banner_slide .content,
  .main_banner .content {
    margin: 0 auto;
    max-width: 95vw;
    padding: 0 10px;
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .btn.btn_orange {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    padding: 14px 24px;
    font-size: 1em;
    width: 100%;
    max-width: 360px;
  }
  .banner_dots {
    left: 50%;
    transform: translateX(-50%);
    bottom: 15%;
  }
}

@media (max-width: 600px) {
  .main_banner,
  .main_banner_slider {
    padding: 68px 0 38px 0;
    height: 580px;
    min-height: 230px;
    width: 100%;
  }
  .banner_slide h1,
  .main_banner h1 {
    font-size: 1.5em;
    text-align: center;
  }
  .banner_slide p,
  .main_banner p {
    font-size: 0.97em;
    max-width: 95vw;
    padding: 7px 0 13px 0;
  }
  .banner_slide .content,
  .main_banner .content {
    padding: 0 5px;
    max-width: 100vw;
  }
  .btn.btn_orange {
    padding: 12px 5px;
    font-size: 0.93em;
  }
}





/* FAIXA DE LOGOS DENTRO DO BANNER */


.logo_carrossel {
  overflow: hidden;
  width: 60%;
  margin: 0 auto;
  padding: 30px 0;
  background: #fff;
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.08);
  position: absolute;
  bottom: -2px;
  left: 22%;
  z-index: 2;
}

.logo_slide {
  display: flex;
  gap: 40px;
  animation: logosMove 30s linear infinite;
}

.logo_carrossel:hover .logo_slide {
  animation-play-state: paused;
}

.logo_slide img {
  height: 40px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.logo_slide img:hover {
  transform: scale(1.05);
}

@keyframes logosMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


@media (max-width: 900px) {
  .logo_carrossel {
    width: 100%;
    left: 0;
    padding: 20px 0 16px 0;
    clip-path: none;
    border-radius: 0;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.04);
  }
  .logo_slide {
    gap: 22px;
  }
  .logo_slide img {
    height: 44px;
  }
}

@media (max-width: 600px) {
  .logo_carrossel {
    width: 100vw;
    min-width: 100vw;
    left: 0;
    padding: 12px 0 8px 0;
    clip-path: none;
    border-radius: 0;
  }
  .logo_slide img {
    height: 36px;
  }
}



.saiba_mais {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  margin-top: 20px;
  position: relative;
  font-size: 0.9em;
}

.seta {
  display: inline-block;
  animation: sobeDesce 1.4s ease-in-out infinite;
  font-size: 1.2em;
  line-height: 1;
}

@keyframes sobeDesce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}


.header_content{text-align:center;padding:240px 0 60px 0;background:#1c1c23;/*background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url('images/h-header.jpg');background-size:cover;background-repeat:no-repeat;position:relative;top:0;*/}
.header_content h1{text-transform: uppercase;font-size: 2.6em;color:#FFF;font-weight:bold;}
.header_content h2{text-transform: uppercase;font-size: 2em;color:#FFF;font-weight:bold;}
.header_content b{color:#FCC04B;}
.header_content span{color:#FFF;font-size: .9em; padding:10px 0 0 0;width:50%; margin:0 auto;}
.header_content p{color:#FFF;font-size: 1em; padding:20px 0;width:50%; margin:0 auto;}

.seta_scroll {
    width:16px;
    height:16px;
    border-left:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:rotate(-45deg);
    margin:30px auto 0 auto;
    animation: sobeDesce 1.5s infinite ease-in-out;
}

@keyframes sobeDesce {
    0% {transform:translateY(0) rotate(-45deg);}
    50% {transform:translateY(8px) rotate(-45deg);}
    100% {transform:translateY(0) rotate(-45deg);}
}


@media(max-width:900px){

    .main_banner {padding:100px 0;}
    .main_banner p {font-size:0.95em;}
    .banner_buttons {flex-direction:column;align-items:flex-start;gap:15px;}

.seta_scroll {
    margin:0 auto 0 auto;}
    
  .header_content {
    padding: 160px 0 40px 0;
  }
  .header_content h1 {
    font-size: 2em;
  }
  .header_content h2 {
    font-size: 1.4em;
  }
  .header_content p,
  .header_content span {
    width: 80%;
    font-size: 1.6em;
    padding: 12px 0;
  }
}


@media(max-width: 768px){
    .faixa_logos {
        clip-path: polygon(0 0, 100% 5%, 100% 100%, 0% 95%);
        padding: 20px 0;
    }

    .logo_lista {
        gap: 16px;
    }

    .logo_lista li img {
        height: 32px;
    }
}

@media (max-width: 500px) {
  .header_content {
    padding: 140px 0 65px 0;
  }
  .header_content .content{
    width: 80%;
  }
  .header_content h1 {
    font-size: 1.35em;
    line-height: 1.12;
    word-break: break-word;
    padding: 0 10px;
  }
  .header_content h2 {
    font-size: 1.4em;
    padding: 0 8px;
  }
  .header_content p,
  .header_content span {
    width: 97%;
    font-size: 0.98em;
    padding: 20px 0;
  }
}





/****************************** SOBRE JSS *************************************/

.sobre_jss {padding:60px 0;background:#fff;color:#202020;}
.sobre_jss h2 {font-size:2em;font-weight:700;padding: 20px 0; text-align:center;}

/* Topo */
.sobre_topo {display:flex;align-items:flex-start;gap:60px;max-width:880px;margin:0 auto;}



.box_experiencia {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 30px; /* aumentei o padding vertical */
  position: relative;
  width: fit-content;
}

/* Linhas superior e inferior */
.linha {
  position: absolute;
  height: 6px;
  background: #bbb;
  left: 0;
  right: 0;
}

.linha.topo {
  top: 0;
}

.linha.baixo {
  bottom: 0;
}

/* Barras laterais curtas */
.barra {
  position: absolute;
  width: 6px;
  height: 75px; /* AUMENTA AQUI */
  background: #bbb;
}

.barra.esquerdaCima {
  top: 3px;
  left: 0;
  bottom: 3px;
  height: calc(100% - 0px);
  clip-path: inset(0 0 70% 0); /* mostra só o topo e base recortada */
}

.barra.esquerdaBaixo {
  top: 3px;
  right: 0;
  bottom: 3px;
  height: calc(100% - 0px);
  clip-path: inset(0 0 70% 0); /* mostra só o topo e base recortada */
}

.barra.direitaCima {
  top: 3px;
  right: 0;
  bottom: 3px;
  height: calc(100% - 6px);
  clip-path: inset(70% 0 0 0); /* mostra só a base e topo recortada */
}

.barra.direitaBaixo {
  top: 3px;
  left: 0;
  bottom: 3px;
  height: calc(100% - 6px);
  clip-path: inset(70% 0 0 0); /* mostra só a base e topo recortada */
}

/* Tipografia */
.exp_left {
  display: flex;
  align-items: flex-start;
  gap: 3px;
}

.exp_left .mais {
  color: #d6602a;
  font-weight: 700;
  font-size: 1.2em;
}

.exp_left .numero {
  color: #d6602a;
  font-weight: 900;
  font-size: 2.8em;
}

.exp_right p {
  font-size: 0.9em;
  line-height: 1.2em;
  text-align: left;
}

.exp_right p strong {
  font-weight: 700;
  color: #000;
}







.sobre_texto h2 {font-size:2em;font-weight:700;margin-bottom:15px;}
.sobre_texto p {font-size:1em;line-height:1.6em;}

/* Itens */
.sobre_itens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 60px 0;
}

.item {  width: calc(33.33% - 20px);
  min-width: 260px;
  text-align: center;}
.item_wrapper {position:relative;overflow:visible;}

/* Imagem */
.item_wrapper img {width:100%;display:block;border-radius:6px;}

/* Bolinha */
.circle {
    width:22px;
    height:22px;
    background:#fff;
    border-radius:50%;
    position:absolute;
    left:50%;
    top:-10px;
    transform:translateX(-50%);
    bottom:calc(-30px + 21px); /* <- calcula o centro alinhado no topo da caixa */
    z-index:3;
}

/* Caixa laranja */
.box_texto {
    background:#d6602a;color:#fff;padding:35px 20px;
    border-radius:6px;
    width:100%;
    max-width:90%;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-60px; /* <- agora ela desce além da imagem */
    z-index:2;
}

.box_texto h3 {font-size:1em;font-weight:700;margin-bottom:10px;}
.box_texto p {font-size:0.9em;line-height:1.4em;}

/* Botão */
.btn_center {text-align:center;}
.btn_center .btn_orange {
    background:#d6602a;color:#fff;
    padding:18px 32px;border-radius:8px;
    font-weight:600;text-decoration:none;text-transform:uppercase;
    font-size:0.9em;
}/* 1. Padrão desktop (já está ok no seu CSS principal!) */

/* 2. Laptops e telas médias */
@media (max-width: 1100px) {
  .sobre_topo {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 100%;
  }
  .sobre_texto {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
  }
  .sobre_itens {
    gap: 30px;
  }
  .item {
    width: 48%;
    min-width: 290px;
    max-width: 400px;
    margin: 0 auto 50px auto;
  }
}

/* 3. Tablets */
@media (max-width: 900px) {
  .sobre_itens {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  .item {
    width: 95%;
    max-width: 430px;
    margin: 0 auto;
  }
}

/* 4. Celular */
@media (max-width: 600px) {
    .sobre_jss {padding:20px 0;}
    .sobre_jss .content{width:80%;}
    
    .sobre_itens {
        margin-top:20px;
        gap: 90px;
    }
    
    .sobre_jss h2 { font-size: 1.6em; }
    .sobre_jss p { padding-top: 20px; }
    .sobre_topo { gap: 8px; }
    .box_experiencia { padding: 12px 6px; }
    .exp_left .numero { font-size: 2.6em; }
    .item { width: 100%; max-width: 98vw; }
}





/****************************** REPRESENTADAS *********************************/


.representadas {padding:100px 0;background:#f8f8f8;color:#202020;text-align:center;}

.representadas h2 {font-size:2.4em;margin-bottom:40px;}

.rep_box {display:flex;justify-content:space-between;align-items:center;gap:60px;flex-wrap:wrap;text-align:left;}

.rep_info {flex:1;}
.rep_info .rep_logo {max-height:180px;margin-bottom:20px;}
.rep_info h3 {font-size:1.6em;margin-bottom:10px;}
.rep_info p {margin-bottom:10px;line-height:1.6em;}

.rep_buttons {margin-top:20px;display:flex;gap:20px;}
.rep_buttons .btn {padding:10px 24px;border-radius:8px;font-weight:600;font-size:0.9em;}

.btn_outline {border:2px solid #d6602a;background:transparent;color:#d6602a!Important;cursor:pointer;}

.rep_imagem {flex:1;max-width:400px;}
.rep_imagem img {width:100%;border-radius:8px;}

.rep_logos {display:flex;justify-content:center;gap:30px;margin-top:50px;flex-wrap:wrap;}
.rep_logos .logo_item {opacity:0.4;transition:0.3s;max-height:50px;cursor:pointer;}
.rep_logos .logo_item.active {opacity:1;transform:scale(1.1);}

@media(max-width:600px){
    .representadas {padding:40px 0!Important;}
    .representadas .content{width:80%;}
    .representadas h2 {font-size:1.6em; margin:0;}
    .representadas p {font-size:.9em}
    
    .rep_box {display:block;}
    .rep_info {width:100%; padding-bottom: 20px;}
    .rep_info h3 {font-size:1.3em;}
    
    .rep_imagem {
        width: 100%;
        max-width: 440px;         /* ou o valor que quiser para o máximo */
        max-height: 160px;        /* define a altura máxima do "crop" */
        margin: 0 auto;
        overflow: hidden;         /* esconde o que passar do container */
        border-radius: 24px;      /* arredondado nas bordas */
        display: flex;            /* centraliza a imagem no eixo Y se for menor */
        align-items: center;
        justify-content: center;
    }
    
    .rep_imagem img {
        padding-top: 20px;
        width: 100%;
        height: 100%;
        object-fit: cover;        /* faz o "crop" centralizado sem esticar */
        object-position: center;  /* centraliza o corte */
        display: block;
        border-radius: 24px;      /* arredonda a própria imagem também */
    }
}


/****************************** SOLUCOES **************************************/

.solucoes {padding:100px 0;background:#fff;color:#202020;text-align:center;}
.solucoes h2 { font-size:2.4em; line-height:1.2em; font-weight:700; margin-bottom:15px; }
.solucoes .sub { font-size:1em; color:#444; margin-bottom:40px; }
.solucoes_grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:20px; justify-items:center; margin-bottom:40px; }
.solucoes_grid .item { background:#f5f5f5; padding:20px; border-radius:8px; text-align:center; transition:0.3s; }
.solucoes_grid .item:hover { transform:translateY(-5px); box-shadow:0 5px 20px rgba(0,0,0,0.08); }
.solucoes_grid .item img { max-height:50px; margin-bottom:15px; }
.solucoes_grid .item p { font-weight:500; font-size:0.95em; line-height:1.4em; }

.info_footer { font-size:0.9em; color:#555; margin-bottom:30px; }

.btn_center .btn_orange { background:#d6602a; color:#fff; padding:14px 32px; border-radius:8px; font-weight:600; text-decoration:none; text-transform:uppercase; font-size:0.9em; }

@media(max-width:600px){
    .solucoes {padding:40px 0;}
    .solucoes .content{width:80%;}
    .solucoes h2 {font-size:1.6em;}
    .solucoes p {font-size:.9em}
    .solucoes .sub {font-size:0.95em;}
    .solucoes_grid {gap:15px;}
    .solucoes_grid .item {padding:15px;}
}



/****************************** PROJETOS **************************************/

.projetos {padding:100px 0 0 0;background:#fff;color:#202020;}

.content_texto {text-align:center;max-width:880px;margin:0 auto 60px auto;}
.content_texto h2 { font-size:2.4em; line-height:1.2em; font-weight:700; margin-bottom:15px; } 
.content_texto p { font-size:1em; color:#444; line-height:1.6em; }

/* Grid de imagens full width */
.grid_imagens { display:grid; grid-template-columns:repeat(4, 1fr); gap:0; }
.grid_imagens img { width:100%; height:100%; object-fit:cover; display:block; }

@media(max-width:1000px){
    .grid_imagens {
        grid-template-columns:repeat(4, 1fr);
    }
}

@media(max-width:700px){
    .grid_imagens {
        grid-template-columns:repeat(2, 1fr);
    }
}

@media(max-width:600px){
    .projetos {padding:40px 0!Important;}
    .projetos .content{width:80%;}
    .content_texto h2 {font-size:1.6em; margin:0;}
    .content_texto p {font-size:.9em; padding-top:20px;}
}

@media(max-width:480px){
    .grid_imagens {
        grid-template-columns:2, 1fr;
    }
}




/****************************** CTA *******************************************/

.cta_final {padding:100px 0;background:#fff;color:#202020;text-align:center;}
.cta_final h2 { font-size:2.2em; line-height:1.2em; font-weight:700; margin-bottom:15px; } 
.cta_final p { font-size:1em; color:#444; line-height:1.6em; max-width:700px; margin:0 auto 40px auto; }

.btn_center .btn_green { background:#4bb183; color:#fff; padding:14px 32px; border-radius:8px; font-weight:600; text-decoration:none; text-transform:uppercase; font-size:0.9em; transition:0.3s; }
.btn_center .btn_green:hover { background:#3a956c; }

@media(max-width:600px){
    .cta_final {padding:40px 0!Important;}
    .cta_final .content{width:80%;}
    .cta_final h2 {font-size:1.6em; margin:0;}
    .cta_final p {font-size:.9em; padding-top:20px;}
}






/*******************************************************************************
******************************* QUEM SOMOS *************************************
*******************************************************************************/



/****************************** SOBRE *****************************************/

.sobre_bloco {
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    padding:100px 0 40px 0;
    background: #F5F5F5;
}

.sobre_bloco .imagem {
    width:100%;
    max-width:900px;
}

.sobre_bloco .imagem img {
    max-height:200px;
    width:100%;
    display:block;
    border-radius:8px;
}

/* Texto */
.sobre_bloco .content {
    width:100%;
    max-width:960px;
    position:relative;
    margin-top:-60px; /* Sobe o texto pra ficar no centro visual da imagem */
    z-index:2;
}

.sobre_bloco .texto {
    padding-top: 20px;
    max-width:700px;
    margin:0 auto;
    text-align:left;
}

.sobre_bloco .texto h3 {
    font-size:2.2em;
    line-height:1.2em;
    margin-bottom:20px;
    color:#202020;
}

.sobre_bloco .texto p {
    font-size:1em;
    color:#444;
    line-height:1.6em;
    margin-bottom:15px;
}

@media(max-width:900px){
    
    .sobre_bloco {padding:40px 0!Important;}
    .sobre_bloco .content{width:80%;
    margin-top:0; /* Sobe o texto pra ficar no centro visual da imagem */}
    .sobre_bloco .texto h3 {font-size:1.4em; margin:0;}
    .sobre_bloco .texto p {font-size:.9em; padding-top:20px;}

    .sobre_bloco .texto {
        max-width:100%;
    }
}




/****************************** PROPOSITO *************************************/


.proposito {
    padding:100px 0;
    background:#fff;
    text-align:center;
}

.proposito h2 {
    font-size:2em;
    font-weight:700;
    margin-bottom:50px;
    color:#202020;
}

.grid_proposito {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
    max-width:900px;
    margin:0 auto;
}

/* Primeira linha */
.grid_proposito .item:nth-child(-n+3) {
    flex:1 1 250px;
}

/* Segunda linha */
.grid_proposito .item:nth-child(n+4) {
    flex:1 1 300px;
}

/* Itens */
.grid_proposito .item {
    background:#f4f4f4;
    padding:30px 20px;
    border-radius:8px;
    text-align:center;
    transition:0.3s ease;
    max-width:280px;
}

.grid_proposito .item:hover {
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,0.05);
}

.grid_proposito img {
    height:40px;
    margin-bottom:15px;
}

.grid_proposito p {
    font-size:0.95em;
    font-weight:500;
    color:#202020;
    line-height:1.4em;
}


@media (max-width: 900px) {
  .proposito {
    padding: 60px 0 40px 0;
  }
  .proposito h2 {
    font-size: 1.4em;
    margin-bottom: 32px;
    padding: 0 20px;
  }
  .grid_proposito {
    max-width: 98vw;
    gap: 18px;
    padding: 0 12px;
  }
}




/*******************************************************************************
******************************* REPRESENTADAS **********************************
*******************************************************************************/

.representadas {
    padding:80px 0;
    background:#f5f5f5;
    color:#202020;
}

.texto_topo {
    text-align:center;
    max-width:800px;
    margin:0 auto 40px auto;
    font-size:0.95em;
    color:#444;
}

.filtro {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    justify-content:center;
    margin-bottom:30px;
}

.filtro button {
    background:#fff;
    border:none;
    padding:8px 20px;
    border-radius:4px;
    cursor:pointer;
    font-weight:500;
    transition:0.3s;
}

.filtro button:hover,
.filtro button.ativo {
    background:#d6602a;
    color:#fff;
}

.filtro .contador {
    margin-left:auto;
    font-size:0.85em;
    color:#333;
}

.grid_cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Sempre 4 colunas */
    gap: 20px;
    justify-content: center; /* Centraliza os cards quando tiver menos que 4 */
    align-items: stretch;
    min-height: 360px; /* Opcional, para manter altura */
}

.card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s;
    min-width: 250px;   /* Garante um tamanho mínimo */
    max-width: 350px;   /* Opcional, para não ficar gigante em telas grandes */
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}


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

.header_card {
    background:#fff;
    padding:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:1px solid #ddd;
}

.header_card .logo {
    max-height:40px;
    max-width:140px;
}

.img_card {
    position:relative;
    background:#1c1c23;
}

.img_card img {
    width:100%;
    display:block;
}

.img_card .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 110px; /* Era 60px — aumente para destacar mais */
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.05) 95%);
    pointer-events: none; /* não atrapalha clique no link */
    z-index: 1;
}

.img_card span {
    position: absolute;
    bottom: 26px; /* Ajuste para ficar centralizado na faixa escura */
    left: 50%;
    transform: translateX(-50%);
    color: #fff !important;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 3px 18px rgba(0,0,0,0.85), 0 1px 1px #000;
    background: none;
    padding: 0;
    border-radius: 0;
    z-index: 2;
}

.img_card span a {
    color: #fff !important;
    text-decoration: none;
}


.filtro-desktop { display: flex; gap: 10px; align-items: center; }
.filtro-mobile { display: none; margin-bottom: 20px; width: 100%; justify-content: center; }


@media (max-width: 1100px) {
    .grid_cards {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas no tablet */
    }
}
@media (max-width: 700px) {
    .grid_cards {
        grid-template-columns: 1fr; /* 1 coluna no mobile */
    }
    
    .filtro-desktop { display: none !important; }
    .filtro-mobile { display: flex !important; flex-direction: column; gap: 10px; }
    #filtroMobile {
      padding: 12px 10px;
      font-size: 1em;
      border-radius: 6px;
      border: 1px solid #ccc;
      width: 100%;
      margin-bottom: 6px;
      background: #fff;
    }
}


/*******************************************************************************
******************************* SERVIÇOS ***************************************
*******************************************************************************/

.servicos_bloco {
    padding: 100px 0;
    background: #fff;
    text-align: center;
}

.servicos_bloco h2 {
    font-size: 2em;
    font-weight: 700;
    color: #202020;
    margin-bottom: 10px;
}

.servicos_bloco .subtitulo {
    font-size: 0.95em;
    color: #444;
    margin-bottom: 50px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* TIMELINE CENTRAL */
.timeline-wrapper {
    position: relative;
    max-width: 900px;
    margin: 60px auto 0 auto;
    padding: 40px 0;
}
.timeline-wrapper::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 4px;
    background: #f7ede8;
    transform: translateX(-50%);
    z-index: 0;
    border-radius: 2px;
}

/* Etapas da timeline */
.timeline-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 170px;
    margin-bottom: 50px;
    justify-content: flex-start;
}

/* ICONES (bolinhas com números) */
.timeline-icon {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #d6602a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.24em;
    color: #d6602a;
    box-shadow: 0 3px 14px rgba(214,96,42,0.07);
    margin: 0 30px 0 0;
}

/* Cards ímpares (1, 3, ...) à esquerda */
.timeline-step .timeline-card {
    margin-left: 0;
    margin-right: 0;
}

/* Cards pares (2, 4, ...) à direita */
.timeline-step:nth-child(even) {
    flex-direction: row-reverse;
}
.timeline-step:nth-child(even) .timeline-icon {
    margin: 0 0 0 30px;
}
.timeline-step:nth-child(even) .timeline-card {
    margin-left: 0;
    margin-right: 0;
    margin-left: auto;
}

/* CARD */
.timeline-card {
    background: #f4f4f4;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(34,31,46,0.06);
    padding: 26px 20px 18px 20px;
    width: 100%;
    max-width: 340px;
    min-width: 230px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 150px;
    margin: 0;
}

.timeline-card img {
    height: 40px;
    margin-bottom: 13px;
}

.timeline-card h3 {
    font-size: 1.09em;
    font-weight: 700;
    color: #202020;
    margin: 0 0 6px 0;
}

.timeline-card p {
    font-size: 0.97em;
    font-weight: 500;
    color: #202020;
    margin: 0;
    padding: 0;
    line-height: 1.38em;
}

/* Linha ligando as bolinhas */
.timeline-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 48px;
    left: 50%;
    width: 4px;
    height: calc(100% - 48px);
    background: linear-gradient(to bottom, #d6602a 30%, #fff0 100%);
    z-index: 1;
    transform: translateX(-50%);
}

/* MOBILE: tudo centralizado */
@media (max-width: 849px) {
    
    .servicos_bloco {padding:40px 0!Important;}
    .servicos_bloco .content{width:80%;}
    .servicos_bloco h2 {font-size:1.4em; margin:0;}
    .servicos_bloco p {font-size:.9em; padding-top:20px;}
    
    
    .timeline-wrapper {
        padding: 10px 0;
        max-width: 100vw;
    }
    .timeline-wrapper::before {
        left: 23px;
        width: 3px;
        transform: none;
    }
    .timeline-step,
    .timeline-step:nth-child(even) {
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0;
    }
    .timeline-icon {
        margin: 0 14px 0 0;
        width: 38px; height: 38px; font-size: 1em;
    }
    .timeline-card {
        max-width: 97vw; min-width: 0; padding: 15px 12px;
        margin: 0;
    }
    .timeline-step:not(:last-child)::after {
        left: 22px;
        width: 3px;
        top: 36px;
        height: calc(100% - 36px);
        transform: none;
    }
}



/****************************** TECNICO ***************************************/

.servicos_tec {
    background: #1c1c23;
    padding: 100px 0;
    color: #fff;
    text-align: center;
}

.servicos_tec h2 {
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 60px;
    color: #ffffff;
}

.bloco_duplo {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.imagem_custom img {
    max-width: 380px;
}

.lista_icone {
    text-align: left;
    list-style: none;
    padding: 70px 0 0 0;
    max-width: 400px;
}

.lista_icone li {
    margin-bottom: 18px;
    font-size: 0.95em;
    display: flex;
    align-items: flex-start;
}

.lista_icone span {
    display: inline-block;
    margin-right: 10px;
    font-size: 1.2em;
    line-height: 1.2em;
}

.frase_final {
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.6em;
    max-width: 760px;
    margin: 0 auto;
}

@media(max-width: 768px){
    .bloco_duplo {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .lista_icone {
        text-align: left;
    }
}

@media(max-width: 600px){
    .servicos_tec {padding:40px 0!Important;}
    .servicos_tec .content{width:80%;
    margin-top:0; /* Sobe o texto pra ficar no centro visual da imagem */}
    .servicos_tec h2 {font-size:1.4em; margin:0;}
    .servicos_tec p {font-size:.9em; padding-top:20px;}

    .imagem_custom img {max-width: 100%;padding-top: 20px;}
    .lista_icone {padding: 20px 0 0 0;}
}

/*******************************************************************************
******************************* PROJETOS JSS **********************************
*******************************************************************************/

.bloco_projeto {
    background: #f6f6f6;
    padding: 100px 0;
    text-align: center;
}

.bloco_projeto h2 {
    font-size: 1.8em;
    font-weight: 700;
    color: #202020;
    margin-bottom: 60px;
}

.projeto_box {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 60px;
    text-align: left;
}

.projeto_texto {
    max-width: 40%;
    font-size: 0.95em;
    color: #202020;
}

.projeto_titulo {
    font-weight: 700;
    font-size: 1.05em;
    margin-bottom: 20px;
    color: #202020;
}

.botoes_projeto {
    margin-top: 20px;
    display: flex;
    gap: 15px;
}

.btn_transp {
    background: transparent;
    border: 1px solid #e25f2a;
    color: #e25f2a;
}

.btn_transp:hover {
    background: #e25f2a;
    color: #fff;
}

.projeto_imagem {
    width: 50%;
    height: 250px;
    background: #1c1c23;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
    overflow: hidden;
}

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

@media(max-width: 768px){
    .projeto_box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .projeto_texto {
        text-align: center;
        width: 100%;
        max-width: 100%;
    }

    .projeto_titulo {
        margin-bottom: 10px;
        font-size: 1.2em;
    }

    .projeto_imagem {
        width: 100%;
    }

    .botoes_projeto {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .bloco_projeto {padding:40px 0!Important;}
    .bloco_projeto .content{width:80%;}
    .bloco_projeto h2 {font-size:1.4em; margin:0;}
    .bloco_projeto p {font-size:.9em; padding-top:20px;}
}


/****************************** OUTRAS HISTÓRIAS ******************************/

.outras_historias h2 {
    font-size: 1.4em;
    font-weight: 700;
    color: #202020;
    margin-bottom: 30px;
    padding: 20px 0;
}

.grid_historia {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px; /* Aumenta o espaçamento entre os cards */
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 0;
}

.historia_item {
    aspect-ratio: 1.8 / 1;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(50,50,50,0.06);
    background: #fff;
    position: relative;
    cursor: pointer;
    transition: box-shadow 0.3s, transform 0.25s;
}

.historia_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.historia_item:hover,
.historia_item.ativo { /* .ativo para destacar a selecionada */
    box-shadow: 0 8px 28px 0 rgba(214,96,42,0.15), 0 2px 8px 0 rgba(60,60,60,0.10);
    transform: translateY(-4px) scale(1.035);
    z-index: 2;
}

.historia_item:hover img,
.historia_item.ativo img {
    transform: scale(1.06);
    filter: brightness(1.07) saturate(1.12);
}

/* Indicador de selecionado */
.historia_item.ativo::after {
    content: '';
    position: absolute;
    left: 10px; top: 10px;
    width: 14px; height: 14px;
    background: #d6602a;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 6px 0 rgba(50,20,0,0.12);
}

/* Responsivo */
@media(max-width: 900px){
    .grid_historia {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media(max-width: 500px){
    .grid_historia {
        grid-template-columns: 1fr;
    }
}

/*******************************************************************************
******************************* CONTATO JSS PADRÃO *****************************
*******************************************************************************/

.bloco_contato {
    background: #f6f6f6;
    padding: 100px 0;
}

.bloco_contato .content {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contato_esquerda {
    flex: 1 1 280px;
    font-size: 0.9em;
    color: #202020;
}

.contato_imagem {
    width: 100%;
    max-width: 200px;
    height: auto;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
    background: #1c1c23;
    overflow: hidden;
    margin-bottom: 20px;
}

.contato_imagem img {
    width: 100%;
    height: auto;
    display: block;
}

.contato_esquerda h2 {
    padding-bottom:10px;
}

.contato_esquerda p {
    margin-bottom: 12px;
    line-height: 1.5em;
}

.contato_esquerda a {
    color: #e25f2a;
    text-decoration: none;
}

.contato_esquerda a:hover {
    text-decoration: underline;
}

.contato_form {
    flex: 1 1 600px;
    width: 100%;
}

.contato_form form label {
    display: block;
    margin-bottom: 20px;
}

.contato_form form p {
    font-size: 0.9em;
    margin-bottom: 6px;
}

.contato_form input,
.contato_form textarea {
    width: 100%;
    padding: 12px 15px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: inherit;
}

.contato_form textarea {
    resize: vertical;
}

.linha_form {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.linha_form label {
    flex: 1;
}

.g-recaptcha {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Responsivo */

@media(max-width: 768px){
    .bloco_contato .content {
        flex-direction: column;
        align-items: center;
    }

    .contato_esquerda, .contato_form {
        width: 100%;
    }

    .linha_form {
        flex-direction: column;
    }
    
    .bloco_contato {padding:40px 0!Important;}
    .bloco_contato .content{width:80%;}
    .bloco_contato h2 {font-size:1.4em; margin:0;}
    .bloco_contato p {font-size:.9em; padding-top:10px;}
}

/*******************************************************************************
******************************** MAPA EMBED ELEGANTE ***************************
*******************************************************************************/

.bloco_mapa {
    width: 100%;
    height: 600px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.bloco_mapa iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    filter: grayscale(100%) brightness(90%) contrast(90%);
    transition: filter 0.4s ease;
}

.bloco_mapa iframe:hover {
    filter: grayscale(60%) brightness(100%) contrast(100%);
}

/*******************************************************************************
******************************* RODAPÉ *****************************************
*******************************************************************************/

.contato {padding:100px 0;background:#f2f1f1;color:#202020;}

.contato .content {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:60px;
    flex-wrap:wrap;
}

.form_box {flex:1;min-width:300px;}
.info_box {flex:1;min-width:280px;}

.info_box h2 {
    font-size:1.8em;
    margin-bottom:20px;
}

.info_box p {
    font-size:0.95em;
    line-height:1.6em;
    margin-bottom:20px;
}

.info_box a {color:#202020;text-decoration:none;}
.info_box a:hover {text-decoration:underline;}

.redes {
    display:flex;
    gap:10px;
    margin-top:10px;
}
.redes img {height:34px;}

.form_box form input,
.form_box form textarea {
    width: 100%;
    border: none;
    padding: 18px 12px;
    border-radius: 0;
    margin-bottom: 15px;
    font-size: 0.95em;
    background: #fff;
    font-family: inherit;
}

.form_box form input::placeholder,
.form_box form textarea::placeholder {
    color: #777;
}

.form_box form label {
    font-size: 0.75em;
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
}

.form_box form .grupo {
    display: flex;
    gap: 20px;
}

.form_box form .grupo div {
    flex: 1;
}

.form_box form textarea {
    height: 120px;
    resize: vertical;
}

.form_box form .btn_orange {
    background: #d6602a;
    color: #fff;
    padding: 18px 24px;
    border: none;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
    transition: 0.3s;
    width: 100%;
    font-family: inherit;
}

.form_box form .btn_orange:hover {
    background: #c44f1e;
}


@media (max-width: 800px) {
  .contato .content {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 0 8vw;
  }
  .form_box, .info_box {
    min-width: unset;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
  .form_box form .btn_orange {
    margin-bottom: 24px;
  }
  .info_box {
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 0 6vw;
  }
  .info_box h2 {
    text-align: center;
    width: 100%;
  }
  .redes {
    display: block;
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 725px) {
.contato .content {
    width:100%;
}

}


/******************************************************************************
********************* BOTÃO WHATSAPP FLUTUANT *********************************
*******************************************************************************/
.whatsapp-float {
  position: fixed;
  right: 36px;
  bottom: 36px;
  z-index: 9999;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 18px 0 rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
  font-family: 'Neulis', Arial, sans-serif;
  font-weight: 600;
  font-size: 1.06em;
  overflow: hidden;
}

.whatsapp-float .wa-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: url('https://cliente.loquazmedia.com.br/jss/themes/jss/images/whatsapp.png') no-repeat center center;
  background-size: contain;
}

.whatsapp-float .wa-text {
  display: none;
  margin-left: 10px;
  font-size: 1em;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
  box-shadow: 0 8px 24px 0 rgba(34, 209, 89, 0.26);
  transform: scale(1.07);
}

.whatsapp-float .wa-icon svg {
  width: 36px;
  height: 36px;
  display: block;
}

/* Mobile ajuste */
@media (max-width: 700px) {
  .whatsapp-float .wa-icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
}

@media (max-width: 900px) {
  .whatsapp-float {
    right: 18px;
    bottom: 18px;
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 700px) {
  .whatsapp-float {
    /* MOBILE: vira barra fixa */
    left: 0; right: 0;
    bottom: 0;
    border-radius: 0;
    width: 100vw;
    height: 54px;
    justify-content: center;
    box-shadow: 0 -2px 18px 0 rgba(0,0,0,0.08);
    background: linear-gradient(90deg, #25D366 70%, #1c1c23 100%);
    transition: none;
  }
  .whatsapp-float .wa-icon {
    margin-left: 0;
    margin-right: 12px;
    width: 32px; height: 32px;
  }
  .whatsapp-float .wa-text {
    display: inline;
    font-size: 1.12em;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
}

/* Opcional: animação para chamar atenção */
@media (max-width: 700px) {
  .whatsapp-float {
    animation: wa-shake 2.8s infinite 2.5s;
  }
  @keyframes wa-shake {
    0%,100% { transform: translateY(0);}
    5% { transform: translateY(-5px);}
    10% { transform: translateY(2px);}
    12% { transform: translateY(-1px);}
    18% { transform: translateY(0);}
  }
}


/****************************** FOOTER ****************************************/


.footer {
    background:#1c1c23;
    color:#fff;
    padding:40px 0;
}

.footer .content {
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    gap:60px;
    flex-wrap:wrap;
}

.footer_logo img {
    width:180px;
    max-width:180px;
}

.footer_info {
    max-width:600px;
    font-size:0.85em;
    line-height:1.6em;
}

.footer_info p {
    margin-bottom:10px;
}

@media(max-width:700px){
    .footer .content {
        flex-direction:column;
        gap:20px;
        align-items:flex-start;
    }
}