/* CSS Document */

<style>
/* 000 */
html, body { margin: 0; padding: 0; width: 100%;}
/*body {cursor: url('images/bradar-cursor.webp') 0 0, auto;}*/
.container {margin: 0 auto; width: 100%;  }
.inner-container { width: 90%; max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap:wrap; }



/* 001 - topo ------------------------------------------------------------------------- */		
/* Animação evaporação*/
@keyframes evapora-diagonal { 0% { transform: translate(0, 0); opacity: 0; } 10% { transform: translate(0, 0); opacity: 1; } 50% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(20px, -150px); opacity: 0; } }
.px-mov {position:absolute; width:44%; height: auto; top:40px; right:20px; z-index:100; animation:evapora-diagonal 7s infinite ease-in-out; opacity:0;}
.scroll-wrapper { opacity: 1; transition: opacity 0.5s ease-out; }
.px-mov:nth-of-type(1) {    animation-delay: 0s;    z-index: 6;} .px-mov:nth-of-type(5) {    animation-delay: 0.4s;    z-index: 5;}.px-mov:nth-of-type(3) {    animation-delay: 0.8s;    z-index: 4;} .px-mov:nth-of-type(2) {    animation-delay: 1.2s;    z-index: 3;} .px-mov:nth-of-type(4) {    animation-delay: 1.6s;    z-index: 2;} .px-mov:nth-of-type(6) {    animation-delay: 2.0s;    z-index: 1;}
/* Animação evaporação */


/*Desktop */
.background { width: 100%; height: auto; background-size: contain; background-repeat: no-repeat; background-position: center;}
.background { background-image: url('images/bradar-agencia-de-trafego-anuncios-online-bg-topo.webp'); } 
.img-logo {text-align: left;} .img-logo img {width: 370px; height: auto; max-width: 52%; height:auto; margin-top:20px;}
.headline { width: 50%; max-width: 590px; padding-top: 50px; }
.sub-headline { width: 75%; max-width: 900px; padding-top: 40px; } 
h1, h2 { margin: 0 !important; }
h1 {font-size: 39px; line-height: 44px; font-weight: 400; color: #ffffff; text-align: left; }	
h2 {font-size: 22.7px; line-height: 28px; font-weight: 400; color: #a5cde9; text-align: left; }
.inner-botao { width: 340px; max-width: 340px; margin-top:40px; margin-left: 0; }
.botao { position: relative; margin: 0 auto; display: inline-block; width: 340px; text-align: center; transition: transform 0.3s;}
.botao img {  margin: 0 auto; width: 100%; height: auto; border-radius: 4px;}
.botao span {width:96%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -70%); color: white; font-size: 27px; font-weight: bold; }
.botao:hover { transform: scale(1.05);}


/* Tablet  */
@media (min-width: 769px) and (max-width: 1079px) { 
body, html { overflow-x: hidden !important; } 
.background { background-image: url('images/bradar-agencia-de-trafego-anuncios-online-bg-tablet.webp'); } 
.inner-container {width: 84%; max-width: 1080px;} 
.img-logo img { width: 45%; max-width: 400px; margin-top: 100px; } 
.headline { width: 90%; max-width: 450px; padding-top: 120px; } 
.sub-headline { width: 75%; max-width: 900px; padding-top: 60px; } 
h1 { font-size: clamp(16px, 5.9vw, 29px); line-height: clamp(1.0, 1.1, 1.5); } 
.inner-botao { width: 100%; margin-top: 50px; }
.botao { width: 70%;}
.botao img {max-width:320px;}
.botao span {width:100%; max-width:310px; font-size: clamp(15px, 3vw, 26px); }
 }

/* Mobile */
@media (max-width: 768px) { 
body, html { overflow-x: hidden !important; } 
.background { background-image: url('images/bradar-agencia-de-trafego-anuncios-online-bg-mobile.webp');} 
.topo { width: 98%; max-width: 768px; }
.inner-container { width: 88%; max-width: 768px; } 
.img-logo img { width: 42%; max-width: 380px; margin-top: 65px; } 
.px-mov { width: 65%; top: 10px; right: 5px; } 
.headline { width: 90%; max-width: 400px; padding-top: 100px; } 
.sub-headline { width: 100%; max-width: 768px; padding-top:35px;  } 
h1 { font-size: clamp(16px, 6.7vw, 26.5px);  line-height: clamp(1, 1.15, 1.2);}
h2 { font-size: clamp(12px, 4.25vw, 17.5px); line-height: clamp(1.2, 1.35, 1.5); font-weight:400; color: #a5cde9; text-align:left; letter-spacing:-0.5px; }
.inner-botao { width: 100%; margin-top: 40px; }
.botao { width: 88%;}
.botao img {max-width:300px;}
.botao span {width:98%; max-width:98%; font-size: clamp(13px, 5.7vw, 24px); }
 }
 
/* 001  - topo ------------------------------------------------------------------------- */


/* 002 - onde  ------------------------------------------------------------------------- */
/* desktop*/
.inner-container-onde { width:90%; max-width:1280px; display:flex; flex-wrap:wrap; justify-content:space-between; margin:120px auto 0 auto;}
.onde {width:100%; margin:10px auto 0 auto;}
.column {width: 25%;  margin-bottom: 60px; transition: transform 0.3s ease;}
.column:hover { transform: scale(1.05);}
.img-onde {text-align: center;} .img-onde img { width: 220px; height: auto; box-shadow: 9px 5px 10px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 0, 0, 0.2);border-radius:4px;}
h4 {width: 60%; margin:50px auto;  font-size: 27px; line-height: 42px; letter-spacing:0.1px; text-align:center; color:#00FFFF; font-weight: 400; }
h4 strong {font-weight: 700; font-size: 25px; display:inline; background-color:#1f114f; padding: 5px 9px;}
h3 {margin: 0 auto; width:85%; font-size:15px; line-height:23px; font-weight:400; text-align:left; color:#ffffff; padding: 5px 0 20px 0;}
h3 strong {font-weight: 700;}

/* tablet */
@media (min-width: 769px) and (max-width: 1079px) {
.inner-container-onde {width:100%; max-width: 800px; margin-top: clamp(60px, 18vw, 160px);  }
.onde {margin:0 auto;  width:100%;}
.column { margin: 0 auto !important; width: 48%;  padding-bottom: 20px; }
.img-onde img {width: 72%; height: auto; max-width:280px; }
h4 {width: 88%; font-size: clamp(16px, 5.1vw, 22px);  line-height: clamp(1.3, 1.6, 1.7); letter-spacing:0.4px;}
h4 strong {font-size: clamp(16px, 5.1vw, 22px); padding: 1.5px 4px;}
h3 { width: 70%; max-width:280px;  font-size: 16px; line-height: 23px; padding: 5px 0 5px 0;}
.spacing40 {padding-bottom: 40px;} 
}

/* iphone */
@media (max-width: 768px) {
.inner-container-onde { width: 94%; max-width: 490px; margin-top: clamp(50px, 30vw, 160px); }
.onde {width:100%; margin:40px auto;  }
.column { width: 100%; margin: 0 auto;  padding-bottom: 20px; }
.img-onde img { width: 90%; height: auto; max-width:280px;}
h4 {width: 88%; margin:0 auto; font-size: clamp(16px, 5vw, 22px);  line-height: clamp(1.3, 1.7, 1.8); letter-spacing:0.1px;  font-weight: 400; }
h4 strong {font-size: clamp(16px, 4.8vw, 22px); padding: 3px 3px; }
h3 {width: 78%; max-width:240px; font-size: clamp(12px, 3.7vw, 16px);  line-height: clamp(1.2, 1.4, 1.6); font-weight: 400; padding: 5px 0 5px 0; }
h3 strong {font-size: clamp(12px, 3.9vw, 16px); }
}

/* 002 - onde  ------------------------------------------------------------------------- */




/* 003 - desde  ------------------------------------------------------------------------- */
/* desktop*/
.inner-container-desde {width:60%; margin: 40px auto;  }
.img-google-meta {text-align: center;} .img-google-meta img {width: 340px; height: auto; max-width:340px; height:auto;}

/* tablet */
@media (min-width: 769px) and (max-width: 1079px) {
.inner-container-desde {width:100%; }
.img-google-meta img {width: 70%;  max-width:300px; }
}

/* iphone */
@media (max-width: 768px) {
.inner-container-desde {width:100%;}
.img-google-meta img {width: 75%;  max-width:300px;}
}
/* 003 - desde ------------------------------------------------------------------------- */



/* 004 - somos  ------------------------------------------------------------------------- */
/* desktop*/
h5 {margin: 60px auto; width: 90%; font-size: 50px; line-height:53px; font-weight:700; color: #8fc1e3; text-align:center; }
h5 strong {font-weight: 700; color: #00c897; }


/* tablet */
@media (min-width: 769px) and (max-width: 1079px) {
h5 {margin:40px auto;width: 90%; font-size: 38px; line-height:42px; }
}

/* iphone */
@media (max-width: 768px) {
h5 {margin:40px auto; width: 90%; font-size: 38px; line-height:42px; }
}
/* 004 - somos  ------------------------------------------------------------------------- */




/* 004 - sobre  ------------------------------------------------------------------------- */
/* desktop*/
.inner-container-bradar {width: 980px; margin: 0 auto;  display: flex; flex-wrap: wrap; justify-content: space-between;}
.column-bradar {width:calc(50% - 30px);  margin:30px 0; display: flex; align-items: center;}
.img-andre {text-align: center;} .img-andre img {width:340px;; height: 340px; max-width:90%; height:auto;}
h6 {margin: 0 auto; width:94%; text-align:left; font-size:18px; line-height:27px; font-weight:400; color: #1f114f; }
h6 strong {font-weight: 700; font-size: 18px;}

/* tablet */
@media (min-width: 769px) and (max-width: 1079px) {

.inner-container-bradar {width: 100%;}
.column-bradar { width:70%; margin:30px auto;}
.img-andre img {width:70%; max-width:300px; margin:0 auto; }
h6 {width:90%; font-size:16px; line-height:24px; }
h6 strong {font-size: 16px;}
}

/* iphone */
@media (max-width: 768px) {
.inner-container-bradar {width: 100%;}
.column-bradar { width:86%; margin:25px auto;}
.img-andre img { width:70%; max-width:300px; margin:0 auto;}
h6 {width:90%; font-size:16.5px; line-height:24px; }
h6 strong {font-size: 16.5px;}
}

/* 004 - sobre  ----------------------------------------------------------------------- */



/* 005 - clientes ------------------------------------------------------------------------- */

/* desktop*/
/* animação clientes */
.inner-clientes{ width: 90%; max-width: 1280px; margin: 24vh auto; display: flex; justify-content: space-between; flex-wrap:wrap; }
.client-logos {  width: 1080px;  margin: 0 auto;  position: relative; font-size: 24px; color:#1f114f; text-align:center; }
.logo-slider {position: relative; } .logo-slide { display: flex;   margin: 0 auto; }
.client-mov { width: 160px; height: auto; position: absolute;  animation: surge-vertical 10s infinite ease-in-out; opacity: 0;}
.client-mov:nth-child(1) {animation-delay: 0s;    z-index: 8;   top: 0px;    left: 0%; }
.client-mov:nth-child(2) {animation-delay: 0.4s;   z-index: 7;   top: 0px;    left: 12%;}
.client-mov:nth-child(3) {animation-delay: 0.8s; z-index: 6;  top: 0px;     left: 24%;}
.client-mov:nth-child(4) {animation-delay: 1.2s;   z-index: 5; top: 0px;     left: 36%;}
.client-mov:nth-child(5) {animation-delay: 1.6s;   z-index: 4; top: 0px;    left: 48%;}
.client-mov:nth-child(6) {animation-delay: 2s;  z-index: 3; top: 0px;    left: 60%;}
.client-mov:nth-child(7) {animation-delay: 2.4s;  z-index: 2; top: 0px;    left: 72%;}
.client-mov:nth-child(8) {animation-delay: 2.8s; z-index: 1; top: 0px;    left: 84%;}
@keyframes surge-vertical {  0% {    transform: translateY(-150px);  opacity: 0;}
15% {transform: translateY(0); opacity:1;} 60% {transform:translateY(0);  opacity:1;} 80% {opacity: 0;} 100% {transform:translateY(-150px); opacity: 0;}}
/* animação clientes */


/* tablet */
@media (min-width: 769px) and (max-width: 1079px) {
/*animação clientes*/
.inner-clientes {width:100%; }
.client-logos { width: 70%; font-size: 20px;}
.client-mov {width:25%; height:auto; max-width:100px; margin:0 auto; }
}

/* iphone */
@media (max-width: 768px) {
.inner-clientes {width:94%; margin: 18vh auto;}
.client-logos {width: 100%; font-size: 20px;}
.client-mov { margin:0 auto; width: 25%; height: auto; max-width:100px; overflow-x: hidden !important;}

.client-mov:nth-child(1) {  top: 0px;  left: 0%; }
.client-mov:nth-child(2) {  top: 55px;  left: 0%;}
.client-mov:nth-child(3) {  top: 0px;  left: 26%; }
.client-mov:nth-child(4) {  top: 55px;  left: 26%; }
.client-mov:nth-child(5) {  top: 0px;  left: 52%;}
.client-mov:nth-child(6) {  top: 55px; left: 52%; }
.client-mov:nth-child(7) {  top: 55px;  left: 77%;}
.client-mov:nth-child(8) {  top: 0px;  left: 77%;}
}
/* 005 - clientes  ------------------------------------------------------------------------- */




/* 006 - cta ------------------------------------------------------------------------- */
/* desktop*/
.inner-container-solucao {width: 980px; margin: 220px auto 0px auto;  display: flex; flex-wrap: wrap; justify-content: space-between;}
.column-solucao {width:50%;  margin: 0 auto; display: flex; align-items: center;}

/* tablet */
@media (min-width: 769px) and (max-width: 1079px) {
.inner-container-solucao {width: 100%; margin: 220px auto 60px auto; }
.column-solucao {width:70%; margin:10px auto;}
}

/* iphone */
@media (max-width: 768px) {
.inner-container-solucao {width: 100%; margin: 220px auto 60px auto; }
.column-solucao {width:86%; margin:10px auto; }
}
/* 006 - cta  ------------------------------------------------------------------------- */




/* 007 - para quem e------------------------------------------------------------------------- */
/* desktop*/
.para-quem {margin: 0px auto 30px auto;  text-align: center;}
.para-quem .blocos {  display: flex;  flex-wrap: wrap;  justify-content: center;  gap: 30px;  max-width: 1200px;  margin: 0 auto;}
.para-quem .bloco { border-radius: 16px;  padding: 25px;  width: 220px;  box-shadow: 0 4px 12px rgba(0,0,0,0.3);  transition: transform 0.3s ease;}
.para-quem .bloco:hover {  transform: translateY(-8px);}
.para-quem .bloco h3 {font-size: 1.4em; line-height:26px; margin:auto 0;  margin-bottom: 15px;   color: #00c897;}
.para-quem .bloco p { margin:auto 0;  font-size: 1em;  line-height: 1.5;  color: #8fc1e3;}
.para-quem .bloco.destaque {  border: 2px solid #8fc1e3;}
/* tablet */
@media (min-width: 769px) and (max-width: 1079px) {
.para-quem .blocos {max-width: 1200px;}
}

/* iphone */
@media (max-width: 768px) {
.para-quem .bloco { width: 100%; max-width:280px;}
.para-quem .bloco h3 {line-height: 1;}
}

/* 007 - para quem e------------------------------------------------------------------------- */



/* 008 - atencao ------------------------------------------------------------------------- */
/* desktop*/
.atencao {margin: 90px auto 0px auto; width:900px; font-size:19px; line-height: 24px; text-align:center; color: #00c897; font-weight: 400;}
.atencao strong {font-weight: 700; font-size:22px;}

/* tablet */
@media (min-width: 769px) and (max-width: 1079px) {
.atencao {margin: 60px auto 90px auto; width:100%;}
}

/* iphone */
@media (max-width: 768px) {
.atencao {margin: 60px auto 90px auto; width:100%; font-size:16px; line-height: 24px; }
.atencao strong {font-size:18px;}
}
/* 008 - atencao ------------------------------------------------------------------------- */



/* 009 - faq ------------------------------------------------------------------------- */
/* desktop*/
.faq-tit {width:94%; margin: 150px auto 30px auto; font-size:18px; color: #ffffff; text-align:center; line-height: 30px; letter-spacing:2px; }
.inner-container-faq {width: 75%; margin: 0px auto 60px auto; background:#00FFFF; }
.faq {width:94%; margin: 0 auto; padding:35px 0; }
.resposta { display: none; margin:0 auto 55px auto; }
p {width:94%; margin: 0 auto; font-size: 16px; line-height:25px; text-align:left; color:#2b2d42; }
p strong {font-weight: 700; }

/* tablet */
@media (min-width: 769px) and (max-width: 1079px) {
.faq-tit {width:94%; margin: 0 auto 30px auto; font-size:14px; line-height: 24px; }
.inner-container-faq {width: 88%;}
.faq {width:94%; padding:40px 0; }
.resposta { display: none; margin:0 auto 50px auto; }
p { width:90%; font-size: 14.5px; line-height:23px;}
}

/* iphone */
@media (max-width: 768px) {
.faq-tit {width:94%; margin: 0 auto 30px auto; font-size:14px; line-height: 24px; }
.inner-container-faq {width: 88%;}
.faq {width:94%; padding:40px 0; }
.resposta { display: none; margin:0 auto 50px auto; }
p {width:90%; font-size: clamp(13px, 3.7vw, 15px); line-height: clamp(1.35, 1.55, 1.75); }
}
/* 009 - faq  ------------------------------------------------------------------------- */



/* 011 - passo a passo  */
/* desktop */
.slider-container {position: relative;  width:85vw; max-width: 1280px; height: auto;  }
.slider { width: 100%; max-width:1280px; margin: 50px auto 0px auto; display: flex; justify-content: space-between; }
.slide-column { width: 25%;  justify-content: space-between; margin:15px; transition: transform 0.3s ease;}
.slide-column:hover { transform: scale(1.05);}
.img-passo { text-align: center; } 
.img-passo img {width:85%; height:auto; max-width:250px; margin-top:20px;  box-shadow: 9px 5px 10px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 0, 0, 0.2); }
.content-wrapper { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); border-radius: 20px; overflow: hidden; margin: 0 auto; }
.text-content { width: 70%; max-width: 240px; margin:25px auto; font-size: clamp(12px, 3.9vw, 16px); line-height: clamp(1.2, 1.4, 1.6); font-weight: 400; text-align: left; color: #ffffff;  }
.arrow { display: none; }


/* tablet */
@media (min-width: 769px) and (max-width: 1079px) {
.slider {overflow-x:scroll; scroll-snap-type: x mandatory; scroll-behavior:smooth; padding: 0 10px; margin: 100px auto 30px auto;}
.slide-column { flex: 0 0 65%; margin-right: 5%; scroll-snap-align: start; }
.img-passo img {width: 72%; max-width:240px; margin-top:25px;}
.arrow { display: block; position: absolute; top: 50%; transform: translateY(-50%); font-size: 3.7rem; color: rgba(31, 17, 79, 0.75); cursor: pointer; z-index: 10; padding: 10px; } .left-arrow { left: 5px; } .right-arrow { right: 10px; }
}

/* iphone */
@media (max-width: 768px) {
.slider {overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0 10px; margin: 60px auto 30px auto;}
.slide-column { flex: 0 0 77%; margin-right: 4%; scroll-snap-align: start; }
.img-passo img {width:78%; margin-top:20px;}
.arrow {display: block;  position: absolute; top: 50%; transform: translateY(-50%); font-size: 3.5rem; color: rgba(31, 17, 79, 0.75); cursor: pointer; z-index: 10; padding: 0px; }  .left-arrow { left: -20px; }   .right-arrow { right: -10px; }
}
/* 011 - passo a passo  */



/* 013 - rodape ------------------------------------------------------------------------- */

/* desktop*/
.inner-rodape {margin: 70px auto 10px auto;  width:500px; max-width: 600px ; text-align:center;  }
.rodape {font-size: clamp(1.2vw, 2vw, 15px); line-height: clamp(1.2, 1.5, 2); color: #CCC; padding:40px 0 30px 0; letter-spacing:1px;}
.rodape-redes {width: 280px; margin:0 auto;  display:flex;}
.column-rodape {width:30px; max-width:180px; margin:0 auto;  }
.img-rodape {text-align: center;} .img-rodape img {margin:o auto; width: 38px; height: auto; max-width:40px; height:auto; }

/* tablet */
@media (min-width: 769px) and (max-width: 1079px) {
.inner-rodape {width:100%;  }
.rodape {font-size: clamp(1vw, 3.4vw, 15px); line-height: clamp(1.2, 1.5, 2); padding:35px 0 20px 0;}
.rodape-redes {width: 35%; max-width:280px;}
.column-rodape {width:100%; max-width:50px; }
.img-rodape img {width: 60%; max-width: 40px; }
}

/* iphone */
@media (max-width: 768px) {
.inner-rodape {width:100%; }
.rodape {font-size: clamp(1vw, 3.6vw, 15px); line-height: clamp(1.2, 1.5, 2); padding:35px 0 20px 0;}
.rodape-redes {width: 40%; max-width:280px;}
.column-rodape {width:100%; max-width:50px; }
.img-rodape img {width: 65%; max-width: 40px;}
}
/* 013 - rodape ------------------------------------------------------------------------- */




/* 014 - whatsapp ------------------------------------------------------------------------- */
/* desktop*/
.whatsapp-button {position: fixed;  width: 65px;  height: 65px;  bottom: 10px;  right: 53px; z-index: 100; animation: sobe-desce 2s infinite cubic-bezier(0.3, 0, 0.7, 1);}
.whatsapp-button img { width: 100%; height: 100%; border-radius: 0%; opacity: 0.7; /* Define a opacidade em 80% */ }
/* Animação para o movimento de sobe e desce com pausa */
@keyframes sobe-desce { 0%, 20%, 100% {transform: translateY(0); /* Posição inicial */ }
13% { transform: translateY(-3px); /* Sobe 10px */ } }

/* tablet */
@media (min-width: 769px) and (max-width: 1079px) {
.whatsapp-button {width: 84%;  height: auto; max-width:65px;  bottom: 10px;  right: 45px;}
}

/* iphone */
@media (max-width: 768px) {
.whatsapp-button {width: 88%;  height: auto; max-width:60px;  bottom: 2px;  right: 7px;}
}
/* 014 - whatsapp ----------------------------------------------------------------------- */




/* 015 - email ------------------------------------------------------------------------- */
/* desktop*/
.email-button {position: fixed;  width: 65px;  height: 65px;  bottom: 10px;  right: 20px; z-index: 100; animation: sobe-desce 2s infinite cubic-bezier(0.3, 0, 0.7, 1); animation-delay: 0.4s;}
.email-button img { width: 100%; height: 100%; border-radius: 0%; opacity: 0.7; /* Define a opacidade em 80% */ }
/* Animação para o movimento de sobe e desce com pausa */
@keyframes sobe-desce { 0%, 20%, 100% {transform: translateY(0); /* Posição inicial */ }
13% { transform: translateY(-3px); /* Sobe 10px */ } }

/* tablet */
@media (min-width: 769px) and (max-width: 1079px) {
.email-button {width: 84%;  height: auto; max-width:65px;  bottom: 10px;  right: 15px;}
}

/* iphone */
@media (max-width: 768px) {
.email-button {width: 88%;  height: auto; max-width:60px;  bottom: 30px;  right: 7px;}
}
/* 015 - email ----------------------------------------------------------------------- */





/* 016 - outros ------------------------------------------------------------------------- */
/* desktop*/
a {color: #ccc; text-decoration: none!important; margin: 0; line-height:35px; } a img {border: none;} a strong {font-weight: 700; }

.scroll-fade-in {
    opacity: 0; /* Começa invisível */
    transform: translateX(-50px); /* Deslocado para a esquerda */
    transition: opacity 0.7s ease-out, transform 1s ease-out; /* Suavidade da transição */
}

/* Classe para aplicar quando o elemento estiver visível */
.scroll-fade-in.show {
    opacity: 1; /* Torna visível */
    transform: translateX(0); /* Centraliza */
}

/* tablet */
@media (min-width: 769px) and (max-width: 1079px) {
a {color: #ccc; text-decoration: none!important; margin: 0; } a img {border: none;} a strong {font-weight: 700; }
}

/* iphone */
@media (max-width: 768px) {
a {color: #ccc; text-decoration: none!important; margin: 0; } a img {border: none;} a strong {font-weight: 700; }
.spacing40 {padding-bottom: 40px;} .spacing30 {padding-bottom: 30px;} .spacing20 {padding-bottom: 20px;}
}
/* 016 - outros ------------------------------------------------------------------------- */




/* Overlay */
.overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Popup */
.popup {
  background: linear-gradient(to right, rgba(19, 106, 138, 0.9), rgba(61, 58, 116, 0.2)); padding: 30px; border-radius: 12px; width: 90%; max-width: 450px; color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); position: relative;
  font-family: 'Montserrat', sans-serif; }

/* Botão fechar */
.popup .close { position: absolute; top: 10px; right: 15px; color: #FFFFFF; background-color:#136a8a;  cursor: pointer; font-weight: bold; font-size:20px; line-height: 1.2; }

/* Labels */
.popup label { display: block; font-weight: 600;  margin-bottom: 5px; line-height:1.5;}

/* Inputs, Selects, Textareas */
.popup input, 
.popup select,
.popup textarea { width: 100%; padding: 10px; margin-top: 4px; margin-bottom: 16px; border: none; border-radius: 6px; background: #fff;
  color: #333; font-size: 1rem; box-sizing: border-box; }

.popup textarea { resize: none; }

/* Títulos */
.popup h2 {  margin-bottom: 20px;  font-weight: 700; line-height:1.3;}

/* Botões gerais */
.popup button { background-color: #271563 ; color: #fff; border: none; padding: 12px 20px; border-radius: 6px; cursor: pointer; transition: background-color 0.3s;  font-weight: 600; font-size:16px;}

.popup button:hover {background-color: #1f114f;}

/* Layout dos botões de navegação */
.popup .navigation-buttons {display: flex; gap: 10px; }






</style>