.elementor-771 .elementor-element.elementor-element-a387a36{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-771 .elementor-element.elementor-element-2daa172{--display:flex;}.elementor-771 .elementor-element.elementor-element-2f05af9{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:128px;--padding-bottom:96px;--padding-left:32px;--padding-right:32px;}.elementor-771 .elementor-element.elementor-element-a57e397{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}.elementor-771 .elementor-element.elementor-element-79de8ea{width:var( --container-widget-width, 66% );max-width:66%;--container-widget-width:66%;--container-widget-flex-grow:0;}.elementor-771 .elementor-element.elementor-element-79de8ea .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-text );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-771 .elementor-element.elementor-element-77150a7{width:var( --container-widget-width, 66% );max-width:66%;--container-widget-width:66%;--container-widget-flex-grow:0;color:var( --e-global-color-6ee06c0 );}.elementor-771 .elementor-element.elementor-element-857eab7{--display:flex;}.elementor-771 .elementor-element.elementor-element-dde32c1{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:96px;--padding-bottom:128px;--padding-left:32px;--padding-right:32px;}.elementor-771 .elementor-element.elementor-element-c5cef08{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:64px 64px;--row-gap:64px;--column-gap:64px;}.elementor-771 .elementor-element.elementor-element-ac2fbfd{--display:flex;--justify-content:center;}.elementor-771 .elementor-element.elementor-element-a33c267 .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-text );}.elementor-771 .elementor-element.elementor-element-7493b0f{color:var( --e-global-color-6ee06c0 );}.elementor-771 .elementor-element.elementor-element-cc8eecb{--display:flex;--justify-content:center;}.elementor-771 .elementor-element.elementor-element-d9d9413{--display:flex;}.elementor-771 .elementor-element.elementor-element-4437bac{--display:flex;}@media(min-width:2400px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-771 .elementor-element.elementor-element-79de8ea .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-771 .elementor-element.elementor-element-a33c267 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}}@media(max-width:1366px){.elementor-771 .elementor-element.elementor-element-2f05af9{--padding-top:128px;--padding-bottom:128px;--padding-left:32px;--padding-right:32px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-771 .elementor-element.elementor-element-79de8ea .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-771 .elementor-element.elementor-element-dde32c1{--padding-top:128px;--padding-bottom:128px;--padding-left:32px;--padding-right:32px;}.elementor-771 .elementor-element.elementor-element-a33c267 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}}@media(max-width:1024px){.elementor-771 .elementor-element.elementor-element-2f05af9{--padding-top:96px;--padding-bottom:96px;--padding-left:32px;--padding-right:32px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-771 .elementor-element.elementor-element-79de8ea .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-771 .elementor-element.elementor-element-dde32c1{--padding-top:96px;--padding-bottom:96px;--padding-left:32px;--padding-right:32px;}.elementor-771 .elementor-element.elementor-element-a33c267 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}}@media(max-width:767px){.elementor-771 .elementor-element.elementor-element-2f05af9{--padding-top:64px;--padding-bottom:48px;--padding-left:20px;--padding-right:20px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-771 .elementor-element.elementor-element-79de8ea{width:100%;max-width:100%;}.elementor-771 .elementor-element.elementor-element-79de8ea .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-771 .elementor-element.elementor-element-77150a7{width:100%;max-width:100%;}.elementor-771 .elementor-element.elementor-element-dde32c1{--padding-top:48px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-771 .elementor-element.elementor-element-c5cef08{--gap:32px 32px;--row-gap:32px;--column-gap:32px;}.elementor-771 .elementor-element.elementor-element-a33c267 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-771 .elementor-element.elementor-element-1d8fb8d{width:100%;max-width:100%;}}/* Start custom CSS for html, class: .elementor-element-838da09 *//* CST INTERNET — HERO DO APP CST CLIENTE
   Container que segura o widget do arquivo 158 > Avancado > CSS Personalizado.

   Duas partes num arquivo so:
   1) o hero — mesma composicao do institucional (79), com os botoes de loja
      no lugar dos botoes de texto;
   2) o mockup animado, copia do arquivo 55, para o hero ser autossuficiente.
      Nao recole o 55 nesta pagina: ele ja esta aqui embaixo.

   O mockup roda em ciclo unico de 16s, sem JS. Para mudar a velocidade,
   altere o --t la no .cst-fone. */

.cst-ahero{
  --cst-grid:1280px;
  --cst-header:80px;

  box-sizing:border-box;
  position:relative;
  display:block;
  width:100%;
  background-color:#FAF9F8;
  border-bottom:1px solid #E6E3E4;
  overflow:hidden;

  padding:
    calc(var(--cst-header) + clamp(38px,4.5vw,66px))
    max(32px,calc((100% - var(--cst-grid)) / 2))
    clamp(48px,5vw,72px);
}
.cst-ahero *,.cst-ahero *::before,.cst-ahero *::after{box-sizing:border-box}

/* FUNDO — brilho laranja e clareada no topo */
.cst-ahero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(70% 90% at 78% 42%,
      rgba(254,80,0,.14) 0%,
      rgba(254,80,0,.05) 38%,
      rgba(254,80,0,0) 72%),
    linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 34%);
}

/* FUNDO — linhas verticais de grade */
.cst-ahero::after{
  content:"";
  position:absolute;
  top:0;bottom:0;left:0;right:0;
  width:100%;
  max-width:var(--cst-grid);
  margin:0 auto;
  pointer-events:none;
  z-index:0;
  background-image:linear-gradient(90deg,rgba(20,19,20,.025) 1px,transparent 1px);
  background-size:25% 100%;
}

.cst-ahero__in{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:clamp(32px,5vw,76px);
  width:100%;
}

.cst-ahero__copy{flex:1 1 auto;min-width:0}
.cst-ahero__media{
  flex:0 0 auto;
  min-width:0;
  width:min(40%,360px);
  margin-left:auto;
}

/* ---------- TEXTO ---------- */
.cst-ahero__t{
  margin:clamp(18px,2.4vw,28px) 0 0;
  font-family:'Rubik',sans-serif;
  font-weight:600;
  font-size:clamp(2.15rem,4.2vw,3.35rem);
  letter-spacing:-.038em;
  line-height:1.04;
  color:#141314;
}

.cst-ahero__d{
  margin:clamp(18px,2.2vw,24px) 0 0;
  font-family:'Rubik',sans-serif;
  font-weight:400;
  font-size:clamp(.98rem,1.3vw,1.08rem);
  line-height:1.65;
  color:#6E6C6E;
  max-width:48ch;
}

/* ---------- BOTOES DE LOJA ---------- */
.cst-ahero__lojas{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  width:100%;
  max-width:410px;
  margin-top:clamp(26px,3vw,34px);
}

/* trava completa: o tema injeta fundo e sombra rosa no hover e no focus */
.cst-loja,
.cst-loja:link,
.cst-loja:visited,
.cst-loja:hover,
.cst-loja:focus,
.cst-loja:focus-visible,
.cst-loja:active,
.cst-loja:focus:not(:focus-visible){
  color:#FFFFFF !important;
  background-image:none !important;
  box-shadow:none !important;
  outline:0 !important;
  text-decoration:none !important;
  filter:none !important;
}

.cst-loja{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  padding:13px 20px;
  border-radius:12px;
  background-color:#141314 !important;
  transition:background-color .35s cubic-bezier(.2,.8,.3,1),
             transform .4s cubic-bezier(.19,1,.22,1);
}
.cst-loja:hover{background-color:#000000 !important;transform:translateY(-3px)}
.cst-loja:active{transform:translateY(0)}
.cst-loja:focus-visible{outline:3px solid #005BBB !important;outline-offset:3px}

.cst-loja__ic{display:flex;flex:none}
.cst-loja__ic svg{width:23px;height:23px;display:block}

.cst-loja__t{min-width:0}
.cst-loja__t span{
  display:block;
  font-family:'Roboto',sans-serif;
  font-weight:300;
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.4;
  color:rgba(255,255,255,.7);
}
.cst-loja__t b{
  display:block;
  font-family:'Rubik',sans-serif;
  font-weight:600;
  font-size:.97rem;
  letter-spacing:-.018em;
  line-height:1.2;
  color:#FFFFFF;
}

/* ---------- RESPONSIVO DO HERO ---------- */
@media (max-width:900px){
  .cst-ahero__in{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .cst-ahero__copy,
  .cst-ahero__media{flex:0 0 auto;width:100%}

  .cst-ahero__media{
    margin:clamp(32px,6vw,44px) auto 0;
    width:min(66%,290px);
  }
}

@media (max-width:768px){
  .cst-ahero{
    --cst-header:60px;
    padding:calc(var(--cst-header) + 32px) 20px clamp(40px,7vw,56px);
  }
  .cst-ahero::after{display:none}
}

@media (max-width:600px){
  .cst-ahero__lojas{grid-template-columns:minmax(0,1fr);max-width:none}
}

/* ====================================================================
   MOCKUP ANIMADO — copia do arquivo 55
   ==================================================================== */

.cst-fone{
  --t:16s;
  --lar:340px;

  position:relative;
  isolation:isolate;

  /* o interior e desenhado uma vez, na referencia de 340px.
     O zoom encolhe o conjunto e leva fonte, botao e espacamento junto. */
  --ref:340px;
  box-sizing:border-box;
  display:flex;
  justify-content:center;
  width:100%;
}
.cst-fone *,.cst-fone *::before,.cst-fone *::after{box-sizing:border-box}

/* ---------- AMBIENTE ATRAS DO APARELHO ----------
   Preenche a coluna sem deslocar o celular e sem passar da largura dela.
   O peso vai pra direita pelo centro do gradiente, nao pela posicao. */
.cst-fone::before,
.cst-fone::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  max-width:100%;
}
.cst-fone::before{
  width:min(100%,700px);
  aspect-ratio:1;
  background:radial-gradient(circle at 62% 48%,
    rgba(254,80,0,.22) 0%,
    rgba(254,80,0,.08) 40%,
    rgba(254,80,0,0) 66%);
}
.cst-fone::after{
  width:min(88%,560px);
  aspect-ratio:1;
  border:1px solid rgba(255,255,255,.09);
}

.cst-fone__corpo{z-index:1}

@media (max-width:900px){
  .cst-fone::after{width:min(76%,400px)}
}
@media (max-width:767px){
  .cst-fone::after{display:none}
  .cst-fone::before{width:min(100%,360px)}
}

.cst-fone__corpo{
  position:relative;
  width:var(--ref);
  zoom:calc(var(--lar) / var(--ref));
  aspect-ratio:9/17.4;
  padding:12px;
  border-radius:54px;
  background:linear-gradient(160deg,#2C2B2C 0%,#141314 42%,#1F1E1F 100%);
  box-shadow:0 44px 90px -40px rgba(20,19,20,.75),
             0 0 0 1px rgba(255,255,255,.06) inset;
  animation:cstFlutua 7s ease-in-out infinite;
}
@keyframes cstFlutua{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

.cst-fone__bt{position:absolute;background:#232223;border-radius:3px}
.cst-fone__bt--vol1{left:-2px;top:132px;width:3px;height:34px}
.cst-fone__bt--vol2{left:-2px;top:178px;width:3px;height:34px}
.cst-fone__bt--pwr{right:-2px;top:158px;width:3px;height:58px}

.cst-fone__tela{
  position:relative;
  width:100%;
  height:100%;
  border-radius:43px;
  background:#FFFFFF;
  overflow:hidden;
}

.cst-fone__ilha{
  position:absolute;
  top:9px;
  left:50%;
  transform:translateX(-50%);
  width:88px;
  height:24px;
  border-radius:999px;
  background:#141314;
  z-index:5;
}

.cst-fone__status{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 22px;
  font-family:'Rubik',sans-serif;
  font-size:11px;
  font-weight:600;
  color:#141314;
  z-index:4;
}
.cst-fone__icones{display:flex;align-items:center;gap:4px}
.cst-fone__icones svg{width:12px;height:12px}

/* ---------- PALCO ---------- */
.cst-app{position:absolute;inset:44px 0 0;overflow:hidden}
.cst-app > *{position:absolute;inset:0}

/* ---------- SPLASH ---------- */
.cst-app__splash{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#FFFFFF;
  z-index:3;
  animation:cstSplash var(--t) linear infinite;
}
.cst-app__marca{
  width:112px;
  animation:cstMarca var(--t) cubic-bezier(.19,1,.22,1) infinite;
}
@keyframes cstSplash{
  0%{opacity:1;visibility:visible}
  7%{opacity:1}
  10%{opacity:0}
  10.01%,96%{opacity:0;visibility:hidden}
  98%{opacity:1;visibility:visible}
  100%{opacity:1;visibility:visible}
}
@keyframes cstMarca{
  0%{transform:scale(.82);opacity:0}
  4%{transform:scale(1);opacity:1}
  8%{transform:scale(1);opacity:1}
  10%{transform:scale(1.06);opacity:0}
  100%{transform:scale(.82);opacity:0}
}

/* ---------- LOGIN ---------- */
.cst-app__login{
  display:flex;
  flex-direction:column;
  padding:16px 24px 0;
  background:#FFFFFF;
  z-index:2;
  opacity:0;
  animation:cstLogin var(--t) cubic-bezier(.19,1,.22,1) infinite;
}
@keyframes cstLogin{
  0%,8%{opacity:0;transform:translateY(10px)}
  12%{opacity:1;transform:translateY(0)}
  60%{opacity:1;transform:translateY(0)}
  64%{opacity:0;transform:translateY(-14px)}
  100%{opacity:0;transform:translateY(-14px)}
}

.cst-app__logo{width:102px;align-self:center;margin:6px 0 16px}
.cst-app__t{
  margin:0 0 16px;
  text-align:center;
  font-family:'Rubik',sans-serif;
  font-weight:600;
  font-size:15px;
  color:#141314;
}

.cst-app__campo{
  position:relative;
  display:flex;
  align-items:center;
  height:44px;
  margin-bottom:12px;
  padding:0 14px;
  border:1px solid #D9D5D6;
  border-radius:8px;
  font-family:'Rubik',sans-serif;
  font-size:13px;
  overflow:hidden;
}
.cst-app__ph{color:#A9A6A7;animation:cstPh1 var(--t) linear infinite}
.cst-app__ph--senha{animation-name:cstPh2}
@keyframes cstPh1{0%,15%{opacity:1}16%,60%{opacity:0}61%,100%{opacity:1}}
@keyframes cstPh2{0%,30%{opacity:1}31%,60%{opacity:0}61%,100%{opacity:1}}

.cst-app__dig{
  position:absolute;
  left:14px;
  white-space:nowrap;
  overflow:hidden;
  width:0;
  color:#141314;
  border-right:1.5px solid transparent;
}
.cst-app__dig--user{
  animation:cstUser var(--t) linear infinite,
            cstCaret1 var(--t) steps(1) infinite;
}
.cst-app__dig--senha{
  letter-spacing:2px;
  animation:cstSenha var(--t) linear infinite,
            cstCaret2 var(--t) steps(1) infinite;
}
@keyframes cstUser{
  0%,15%{width:0}
  16%{width:0;animation-timing-function:steps(9,end)}
  25%{width:9ch}
  60%{width:9ch}
  61%,100%{width:0}
}
@keyframes cstSenha{
  0%,30%{width:0}
  31%{width:0;animation-timing-function:steps(8,end)}
  40%{width:8ch}
  60%{width:8ch}
  61%,100%{width:0}
}
@keyframes cstCaret1{
  0%,15%{border-right-color:transparent}
  16%,27%{border-right-color:#FE5000}
  28%,100%{border-right-color:transparent}
}
@keyframes cstCaret2{
  0%,30%{border-right-color:transparent}
  31%,42%{border-right-color:#FE5000}
  43%,100%{border-right-color:transparent}
}

.cst-app__olho{
  margin-left:auto;
  display:flex;
  color:#A9A6A7;
  z-index:1;
}
.cst-app__olho svg{width:15px;height:15px}

.cst-app__link{
  margin:2px 0 14px;
  font-family:'Rubik',sans-serif;
  font-size:10.5px;
  color:#6E6C6E;
}
.cst-app__link b{color:#FE5000;font-weight:600}

.cst-app__btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:44px;
  border:0;
  border-radius:999px;
  background:#FE5000;
  font-family:'Rubik',sans-serif;
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.08em;
  color:#FFFFFF;
  overflow:hidden;
  animation:cstBtn var(--t) cubic-bezier(.19,1,.22,1) infinite;
}
@keyframes cstBtn{
  0%,45%{transform:scale(1);box-shadow:0 0 0 0 rgba(254,80,0,.5)}
  47%{transform:scale(.955);box-shadow:0 0 0 0 rgba(254,80,0,.45)}
  52%{transform:scale(1);box-shadow:0 0 0 14px rgba(254,80,0,0)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(254,80,0,0)}
}
.cst-app__btn-txt{animation:cstBtnTxt var(--t) linear infinite}
@keyframes cstBtnTxt{0%,48%{opacity:1}50%,58%{opacity:0}60%,100%{opacity:1}}

.cst-app__spin{
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#FFFFFF;
  opacity:0;
  animation:cstSpinOn var(--t) linear infinite,
            cstGira .7s linear infinite;
}
@keyframes cstSpinOn{0%,49%{opacity:0}51%,58%{opacity:1}60%,100%{opacity:0}}
@keyframes cstGira{to{transform:rotate(360deg)}}

.cst-app__ou{
  position:relative;
  margin:14px 0;
  text-align:center;
  font-family:'Rubik',sans-serif;
  font-size:10px;
  color:#A9A6A7;
}
.cst-app__ou::before{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:1px;
  background:#E6E3E4;
}
.cst-app__ou span{position:relative;background:#FFFFFF;padding:0 10px}

.cst-app__btn2{
  height:44px;
  border:1.5px solid #FE5000;
  border-radius:999px;
  background:transparent;
  font-family:'Rubik',sans-serif;
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.08em;
  color:#FE5000;
}

/* ---------- AREA DO CLIENTE ---------- */
.cst-app__home{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:22px 24px 0;
  background:#FAF9F8;
  z-index:1;
  opacity:0;
  animation:cstHome var(--t) cubic-bezier(.19,1,.22,1) infinite;
}
@keyframes cstHome{
  0%,60%{opacity:0;transform:translateY(18px)}
  65%{opacity:1;transform:translateY(0)}
  93%{opacity:1;transform:translateY(0)}
  96%{opacity:0;transform:translateY(-10px)}
  100%{opacity:0;transform:translateY(-10px)}
}

.cst-app__topo{display:flex;align-items:center;justify-content:space-between}
.cst-app__ola{
  display:block;
  font-family:'Roboto',sans-serif;
  font-weight:300;
  font-size:9.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#918F91;
}
.cst-app__nome{
  display:block;
  font-family:'Rubik',sans-serif;
  font-weight:600;
  font-size:15px;
  letter-spacing:-.02em;
  color:#141314;
}
.cst-app__av{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#FFF1EA;
  font-family:'Rubik',sans-serif;
  font-weight:600;
  font-size:11px;
  color:#FE5000;
}

.cst-app__fat{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:16px;
  border-radius:14px;
  background:#141314;
  animation:cstEntra var(--t) cubic-bezier(.19,1,.22,1) infinite;
  animation-delay:calc(var(--t) * .015);
}
.cst-app__fat-l{
  font-family:'Roboto',sans-serif;
  font-weight:300;
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.cst-app__fat-v{
  font-family:'Rubik',sans-serif;
  font-weight:800;
  font-size:25px;
  letter-spacing:-.035em;
  color:#FFFFFF;
}
.cst-app__fat-s{
  font-family:'Rubik',sans-serif;
  font-size:10px;
  color:rgba(255,255,255,.6);
}
.cst-app__fat-b{
  margin-top:10px;
  padding:9px 0;
  border-radius:999px;
  background:#FE5000;
  text-align:center;
  font-family:'Rubik',sans-serif;
  font-weight:600;
  font-size:11px;
  color:#FFFFFF;
}

.cst-app__at{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  animation:cstEntra var(--t) cubic-bezier(.19,1,.22,1) infinite;
  animation-delay:calc(var(--t) * .03);
}
.cst-app__at-i{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:12px 4px;
  border:1px solid #E6E3E4;
  border-radius:12px;
  background:#FFFFFF;
  font-family:'Rubik',sans-serif;
  font-size:9.5px;
  color:#3A393A;
  text-align:center;
}
.cst-app__at-i svg{width:16px;height:16px;color:#FE5000}

@keyframes cstEntra{
  0%,61%{opacity:0;transform:translateY(14px)}
  68%{opacity:1;transform:translateY(0)}
  93%{opacity:1;transform:translateY(0)}
  96%,100%{opacity:0;transform:translateY(0)}
}

/* ---------- ANULA O ACCENT DO ELEMENTOR ---------- */
.cst-app__btn,
.cst-app__btn:hover,
.cst-app__btn:focus,
.cst-app__btn:focus-visible,
.cst-app__btn:active{
  background-color:#FE5000 !important;
  background-image:none !important;
  color:#FFFFFF !important;
  border-color:transparent !important;
  box-shadow:none;
}
.cst-app__btn2,
.cst-app__btn2:hover,
.cst-app__btn2:focus,
.cst-app__btn2:focus-visible,
.cst-app__btn2:active{
  background-color:transparent !important;
  background-image:none !important;
  color:#FE5000 !important;
  border-color:#FE5000 !important;
}
.cst-app__fat-b{background-color:#FE5000 !important;color:#FFFFFF !important}
.cst-app__link b{color:#FE5000 !important}
.cst-app__at-i{background-color:#FFFFFF !important;color:#3A393A !important}
.cst-app__at-i svg{color:#FE5000 !important}
.cst-app__av{background-color:#FFF1EA !important;color:#FE5000 !important}
.cst-app__dig{color:#141314 !important}
.cst-app__ph,.cst-app__olho{color:#A9A6A7 !important}

/* ---------- RESPONSIVO ---------- */
@media (max-width:900px){
  .cst-fone{--lar:284px}
}
@media (max-width:767px){
  .cst-fone{--lar:min(238px,64vw)}
  .cst-fone__corpo{animation:none;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .cst-fone__corpo,.cst-app__splash,.cst-app__marca,.cst-app__login,
  .cst-app__home,.cst-app__fat,.cst-app__at,.cst-app__btn,.cst-app__btn-txt,
  .cst-app__spin,.cst-app__dig,.cst-app__ph{animation:none !important}
  .cst-fone__corpo{transform:none}
  .cst-app__splash{opacity:0;visibility:hidden}
  .cst-app__login{opacity:1;transform:none}
  .cst-app__home{opacity:0}
  .cst-app__dig{width:auto}
  .cst-app__ph{opacity:0}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7412a64 *//* CST INTERNET — MARQUEE DE CIDADES
   Container que segura o widget do arquivo 82 > Avancado > CSS Personalizado.
   Velocidade: --cst-mq-t. Maior = mais lento. */

.cst-mq{
  --cst-mq-t:52s;

  box-sizing:border-box;
  position:relative;
  display:block;
  width:100%;
  padding:clamp(20px,2.4vw,30px) 0;
  background:#FE5000;
  overflow:hidden;
}
.cst-mq *,.cst-mq *::before,.cst-mq *::after{box-sizing:border-box}

/* pontas: o texto se dissolve na propria cor da faixa.
   A faixa continua indo de borda a borda. */
.cst-mq::before,
.cst-mq::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  z-index:2;
  width:clamp(40px,7vw,110px);
  pointer-events:none;
}
.cst-mq::before{left:0;background:linear-gradient(90deg,#FE5000 0,rgba(254,80,0,0) 100%)}
.cst-mq::after{right:0;background:linear-gradient(270deg,#FE5000 0,rgba(254,80,0,0) 100%)}

.cst-mq__pista{
  display:flex;
  width:max-content;
  animation:cstMq var(--cst-mq-t) linear infinite;
  will-change:transform;
}
@keyframes cstMq{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

.cst-mq__lista{
  display:flex;
  align-items:center;
  flex:none;
  list-style:none;
  margin:0;
  padding:0;
}

.cst-mq__lista li{
  display:flex;
  align-items:center;
  gap:clamp(26px,3.4vw,46px);
  padding-right:clamp(26px,3.4vw,46px);

  font-family:'Rubik',sans-serif;
  font-weight:600;
  font-size:clamp(1.05rem,2vw,1.65rem);
  letter-spacing:-.025em;
  line-height:1.1;
  white-space:nowrap;
  color:#FFFFFF;
}

/* anel depois de cada nome — e ele que costura a emenda do laco */
.cst-mq__lista li::after{
  content:"";
  flex:none;
  width:7px;
  height:7px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);
}

@media (hover:hover){
  .cst-mq:hover .cst-mq__pista{animation-play-state:paused}
}

@media (max-width:767px){
  .cst-mq{--cst-mq-t:38s;padding:16px 0}
  .cst-mq__lista li::after{width:6px;height:6px;border-width:1.2px}
}

@media (prefers-reduced-motion:reduce){
  .cst-mq{padding:clamp(20px,2.4vw,30px) max(20px,calc((100% - 1280px) / 2))}
  .cst-mq::before,
  .cst-mq::after{display:none}
  .cst-mq__pista{width:100%;animation:none}
  .cst-mq__lista{
    flex:1 1 auto;
    min-width:0;
    flex-wrap:wrap;
    justify-content:center;
    row-gap:10px;
  }
  .cst-mq__lista li:last-child{padding-right:0}
  .cst-mq__lista li:last-child::after{display:none}
  .cst-mq__lista[aria-hidden="true"]{display:none}
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-79de8ea */.elementor-771 .elementor-element.elementor-element-79de8ea{
    
    text-wrap: balance;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-77150a7 */.elementor-771 .elementor-element.elementor-element-77150a7{
    
    text-wrap: balance;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cd69255 *//* CST INTERNET — RECURSOS DO APP (pagina App CST Cliente)
   Container que segura o widget do arquivo 160 > Avancado > CSS Personalizado.
   Identico ao arquivo 151: e o mesmo card da pagina Para Empresas.
   Os cards NAO sao clicaveis — sem seta, sem cursor de clique e sem subida
   no hover. So o icone preenche. */


.cst-scard{
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  width:100%;
}
.cst-scard *,.cst-scard *::before,.cst-scard *::after{box-sizing:border-box}

.cst-scard__i{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:clamp(28px,2.6vw,34px);
  border:1px solid #E6E3E4;
  border-radius:20px;
  background:#FFFFFF;
  transition:border-color .4s cubic-bezier(.19,1,.22,1);
}
.cst-scard__i:hover{border-color:#C9C6C8}

/* ---------- ICONE ---------- */
.cst-scard__ic{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:54px;
  height:54px;
  border-radius:50%;
  background:#FFF1EA;
  color:#FE5000;
  overflow:hidden;
  transition:color .45s cubic-bezier(.2,.8,.3,1);
}
.cst-scard__ic svg{position:relative;z-index:1;width:23px;height:23px;display:block}

/* o laranja sobe por dentro do circulo, mesmo gesto do arquivo 62 */
.cst-scard__ic::after{
  content:"";
  position:absolute;
  inset:0;
  background:#FE5000;
  transform:translateY(101%);
  transition:transform .5s cubic-bezier(.19,1,.22,1);
}
.cst-scard__i:hover .cst-scard__ic{color:#FFFFFF}
.cst-scard__i:hover .cst-scard__ic::after{transform:translateY(0)}

/* ---------- TEXTO ---------- */
.cst-scard__t{
  margin:24px 0 0;
  font-family:'Rubik',sans-serif;
  font-weight:600;
  font-size:1.16rem;
  letter-spacing:-.026em;
  line-height:1.25;
  color:#141314;
}

.cst-scard__d{
  margin:11px 0 0;
  font-family:'Rubik',sans-serif;
  font-weight:400;
  font-size:.94rem;
  line-height:1.62;
  color:#6E6C6E;
}

/* ---------- VARIANTE ESCURA ----------
   Acrescente cst-scard--dark na div do arquivo 150. */
.cst-scard--dark .cst-scard__i{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.035);
}
.cst-scard--dark .cst-scard__i:hover{border-color:rgba(255,255,255,.3)}
.cst-scard--dark .cst-scard__ic{background:rgba(254,80,0,.16)}
.cst-scard--dark .cst-scard__t{color:#FFFFFF}
.cst-scard--dark .cst-scard__d{color:rgba(255,255,255,.66)}

/* ---------- RESPONSIVO ---------- */
@media (max-width:1024px){
  .cst-scard{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:600px){
  .cst-scard{grid-template-columns:minmax(0,1fr);gap:14px}
  .cst-scard__i{padding:26px 22px;border-radius:18px}
  .cst-scard__ic{width:48px;height:48px}
  .cst-scard__ic svg{width:21px;height:21px}
  .cst-scard__t{margin-top:20px;font-size:1.1rem}
}

@media (prefers-reduced-motion:reduce){
  .cst-scard__i,.cst-scard__ic,.cst-scard__ic::after{transition:none}
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-a33c267 */.elementor-771 .elementor-element.elementor-element-a33c267{
    
    text-wrap: balance;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-7493b0f */.elementor-771 .elementor-element.elementor-element-7493b0f{
    
    text-wrap: balance;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1d8fb8d *//* CST INTERNET — COMO ACESSAR (pagina App CST Cliente)
   Container que segura o widget do arquivo 162 > Avancado > CSS Personalizado.

   E o arquivo 117, do CST+, mais a variante --col no fim: ela trava o passo
   a passo em VERTICAL em qualquer largura, que e o que a coluna estreita
   pede. Sem ela o componente se espalha em tres colunas e o quarto passo
   cai sozinho na linha de baixo.

   O bloco da variante fica no fim de proposito: ele precisa vir depois das
   media queries de 900px e 640px pra ganhar delas. */


.cst-passos{
  box-sizing:border-box;
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  width:100%;
  counter-reset:passo;
}
.cst-passos *,.cst-passos *::before,.cst-passos *::after{box-sizing:border-box}

.cst-passos__i{
  position:relative;
  padding:0 clamp(22px,3vw,42px) 0 0;
}
.cst-passos__i + .cst-passos__i{padding-left:clamp(22px,3vw,42px)}

/* ---------- NUMERAL ---------- */
.cst-passos__n{
  display:block;
  font-family:'Rubik',sans-serif;
  font-weight:800;
  font-size:clamp(3rem,5.6vw,4.6rem);
  letter-spacing:-.05em;
  line-height:.86;
  color:transparent;
  -webkit-text-stroke:1.5px #D9D5D6;
  transition:color .42s cubic-bezier(.19,1,.22,1),
             -webkit-text-stroke-color .42s cubic-bezier(.19,1,.22,1),
             transform .46s cubic-bezier(.19,1,.22,1);
}

/* ---------- TRILHO ---------- */
.cst-passos__mk{
  position:relative;
  display:block;
  height:1px;
  margin:clamp(24px,2.8vw,34px) 0 0;
  background:#E6E3E4;
}
/* o segmento laranja que corre da esquerda para a direita */
.cst-passos__mk::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:1px;
  background:#FE5000;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .62s cubic-bezier(.33,0,.2,1);
}
/* o ponto do passo */
.cst-passos__mk::after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:11px;
  height:11px;
  margin-top:-5.5px;
  border-radius:50%;
  background:#FFFFFF;
  border:2px solid #C9C6C8;
  transition:border-color .38s cubic-bezier(.19,1,.22,1),
             background .38s cubic-bezier(.19,1,.22,1),
             transform .42s cubic-bezier(.19,1,.22,1);
}
/* o ultimo trilho some no fim, para nao virar um fio solto */
.cst-passos__i:last-child .cst-passos__mk{
  background:linear-gradient(90deg,#E6E3E4 0%,#E6E3E4 55%,rgba(230,227,228,0) 100%);
}

/* ---------- TEXTO ---------- */
.cst-passos__c{padding-top:clamp(22px,2.6vw,30px);min-width:0}
.cst-passos__t{
  margin:0;
  font-family:'Rubik',sans-serif;
  font-weight:600;
  font-size:clamp(1.05rem,1.5vw,1.2rem);
  letter-spacing:-.024em;
  line-height:1.3;
  color:#141314;
}
.cst-passos__d{
  margin:10px 0 0;
  font-family:'Rubik',sans-serif;
  font-weight:400;
  font-size:.94rem;
  line-height:1.65;
  color:#6E6C6E;
  max-width:34ch;
}

/* ---------- ATIVO ----------
   O JS acende em duas etapas: .is-no acende o passo, .is-fio faz a linha
   crescer ate o proximo. Sem JS, o hover e o foco acendem os dois juntos. */
.cst-passos__i.is-no .cst-passos__n,
.cst-passos__i:hover .cst-passos__n,
.cst-passos__i:focus-within .cst-passos__n{
  color:#FE5000;
  -webkit-text-stroke-color:#FE5000;
  transform:translateY(-4px);
}
.cst-passos__i.is-no .cst-passos__mk::after,
.cst-passos__i:hover .cst-passos__mk::after,
.cst-passos__i:focus-within .cst-passos__mk::after{
  border-color:#FE5000;
  background:#FE5000;
  transform:scale(1.25);
}
.cst-passos__i.is-fio .cst-passos__mk::before,
.cst-passos__i:hover .cst-passos__mk::before,
.cst-passos__i:focus-within .cst-passos__mk::before{transform:scaleX(1)}

/* ---------- VARIANTE ESCURA ---------- */
.cst-passos--dark .cst-passos__n{-webkit-text-stroke-color:rgba(255,255,255,.3)}
.cst-passos--dark .cst-passos__mk{background:rgba(255,255,255,.16)}
.cst-passos--dark .cst-passos__i:last-child .cst-passos__mk{
  background:linear-gradient(90deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.16) 55%,rgba(255,255,255,0) 100%);
}
.cst-passos--dark .cst-passos__mk::after{background:#141314;border-color:rgba(255,255,255,.35)}
.cst-passos--dark .cst-passos__t{color:#FFFFFF}
.cst-passos--dark .cst-passos__d{color:rgba(255,255,255,.66)}

/* ---------- RESPONSIVO ---------- */
@media (max-width:900px){
  .cst-passos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cst-passos__i:nth-child(2n+1){padding-left:0}
  .cst-passos__i:nth-child(n+3){margin-top:clamp(30px,4vw,42px)}
  .cst-passos__d{max-width:none}
}

@media (max-width:640px){
  .cst-passos{grid-template-columns:minmax(0,1fr)}

  /* a especificidade tem que bater a do bloco de 900px, senao o nth-child
     de la continua zerando o recuo do 1o e do 3o passo */
  .cst-passos .cst-passos__i,
  .cst-passos .cst-passos__i:nth-child(2n+1),
  .cst-passos .cst-passos__i:nth-child(n+3){
    margin-top:0;
    padding:0 0 clamp(26px,5vw,34px) clamp(30px,8vw,38px);
  }
  .cst-passos .cst-passos__i:last-child{padding-bottom:0}

  /* no celular o trilho vira vertical, na lateral esquerda */
  .cst-passos__mk{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:1px;
    height:auto;
    margin:0;
  }
  .cst-passos__mk::before{
    width:1px;
    height:100%;
    transform:scaleY(0);
    transform-origin:top center;
  }
  .cst-passos__mk::after{
    left:-5px;
    top:14px;
    margin-top:0;
  }
  .cst-passos__i:last-child .cst-passos__mk{
    background:linear-gradient(180deg,#E6E3E4 0%,#E6E3E4 45%,rgba(230,227,228,0) 100%);
  }
  .cst-passos--dark .cst-passos__i:last-child .cst-passos__mk{
    background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.16) 45%,rgba(255,255,255,0) 100%);
  }
  .cst-passos__i.is-fio .cst-passos__mk::before,
  .cst-passos__i:hover .cst-passos__mk::before,
  .cst-passos__i:focus-within .cst-passos__mk::before{transform:scaleY(1)}

  .cst-passos__n{font-size:2.4rem}
  .cst-passos__c{padding-top:14px}
  .cst-passos__d{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .cst-passos__n,.cst-passos__mk::before,.cst-passos__mk::after{transition:none}
  .cst-passos__i:hover .cst-passos__n,
  .cst-passos__i.is-no .cst-passos__n{transform:none}
}

/* ====================================================================
   VARIANTE EM COLUNA — .cst-passos--col
   ==================================================================== */

.cst-passos.cst-passos--col{
  grid-template-columns:minmax(0,1fr);
}

.cst-passos.cst-passos--col .cst-passos__i,
.cst-passos.cst-passos--col .cst-passos__i:nth-child(2n+1),
.cst-passos.cst-passos--col .cst-passos__i:nth-child(n+3){
  margin-top:0;
  padding:0 0 clamp(26px,3vw,32px) clamp(30px,4vw,40px);
}
.cst-passos.cst-passos--col .cst-passos__i:last-child{padding-bottom:0}

/* o trilho vira vertical, na lateral esquerda */
.cst-passos.cst-passos--col .cst-passos__mk{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:1px;
  height:auto;
  margin:0;
}
.cst-passos.cst-passos--col .cst-passos__mk::before{
  width:1px;
  height:100%;
  transform:scaleY(0);
  transform-origin:top center;
}
.cst-passos.cst-passos--col .cst-passos__mk::after{
  left:-5px;
  top:14px;
  margin-top:0;
}
.cst-passos.cst-passos--col .cst-passos__i:last-child .cst-passos__mk{
  background:linear-gradient(180deg,#E6E3E4 0%,#E6E3E4 45%,rgba(230,227,228,0) 100%);
}
.cst-passos--col.cst-passos--dark .cst-passos__i:last-child .cst-passos__mk{
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.16) 45%,rgba(255,255,255,0) 100%);
}
.cst-passos.cst-passos--col .cst-passos__i.is-fio .cst-passos__mk::before,
.cst-passos.cst-passos--col .cst-passos__i:hover .cst-passos__mk::before,
.cst-passos.cst-passos--col .cst-passos__i:focus-within .cst-passos__mk::before{
  transform:scaleY(1);
}

.cst-passos.cst-passos--col .cst-passos__n{
  font-size:clamp(2.1rem,2.8vw,2.6rem);
}
.cst-passos.cst-passos--col .cst-passos__c{padding-top:12px}
.cst-passos.cst-passos--col .cst-passos__d{max-width:none}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f86bf61 *//* CST INTERNET — FAIXA DE FECHAMENTO DO APP CST CLIENTE
   Container em Largura Completa, sem padding > CSS Personalizado.

   E o arquivo 92 mais o bloco dos botoes de loja no fim. Aqui o botao unico
   do .cst-base nao serve: o destino depende do aparelho de quem esta lendo,
   entao entram os dois. Sao os mesmos .cst-loja do hero (arquivo 159), na
   versao branca, que e a que aparece sobre o laranja. */


.cst-base{
  --cst-grid:1280px;
  box-sizing:border-box;
  position:relative;
  display:block;
  width:100%;
  background:#FE5000;
  padding:clamp(34px,4vw,52px) max(32px,calc((100% - var(--cst-grid)) / 2));
  overflow:hidden;
}
.cst-base *,.cst-base *::before,.cst-base *::after{box-sizing:border-box}

.cst-base::before{
  content:"";
  position:absolute;
  top:-40%;
  right:-6%;
  width:520px;
  height:520px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  pointer-events:none;
}
.cst-base::after{
  content:"";
  position:absolute;
  top:-18%;
  right:2%;
  width:340px;
  height:340px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  pointer-events:none;
}

.cst-base__in{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(24px,4vw,60px);
  flex-wrap:wrap;
  width:100%;
}

.cst-base__txt{flex:1 1 420px;min-width:0}

.cst-base__kicker{
  display:inline-block;
  font-family:'Roboto',sans-serif;
  font-weight:300;
  font-size:11px;
  letter-spacing:.34em;
  text-transform:uppercase;
  line-height:1.4;
  color:rgba(255,255,255,.8);
  margin-bottom:12px;
}

.cst-base__t{
  margin:0;
  font-family:'Rubik',sans-serif;
  font-weight:600;
  font-size:clamp(1.7rem,3.4vw,2.75rem);
  letter-spacing:-.035em;
  line-height:1.08;
  color:#FFFFFF;
}

.cst-base__d{
  margin:12px 0 0;
  font-family:'Rubik',sans-serif;
  font-weight:400;
  font-size:1rem;
  line-height:1.55;
  color:rgba(255,255,255,.82);
  max-width:52ch;
}

/* ---------- BOTAO ---------- */
.cst-base__cta{
  position:relative;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:17px 32px;
  border-radius:999px;
  overflow:hidden;
  isolation:isolate;
  font-family:'Rubik',sans-serif;
  font-weight:600;
  font-size:15.5px;
  letter-spacing:-.01em;
  line-height:1.2;
  white-space:nowrap;
  transition:color .42s cubic-bezier(.65,0,.35,1),
             transform .35s cubic-bezier(.19,1,.22,1),
             box-shadow .42s cubic-bezier(.65,0,.35,1);
}
.cst-base__cta,
.cst-base__cta:link,
.cst-base__cta:visited{
  color:#141314 !important;
  background-color:transparent !important;
  background-image:none !important;
  text-decoration:none !important;
}
.cst-base__cta:hover,
.cst-base__cta:focus,
.cst-base__cta:active{
  color:#FFFFFF !important;
  background-color:transparent !important;
  text-decoration:none !important;
}
.cst-base__cta::before,
.cst-base__cta::after{
  content:"";
  position:absolute;
  inset:0;
  transition:clip-path .42s cubic-bezier(.65,0,.35,1);
}
.cst-base__cta::before{z-index:-2;clip-path:inset(0 0 0 0);background:#FFFFFF}
.cst-base__cta::after{z-index:-1;clip-path:inset(100% 0 0 0);background:#141314}
.cst-base__cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(20,19,20,.5)}
.cst-base__cta:hover::before{clip-path:inset(0 0 100% 0)}
.cst-base__cta:hover::after{clip-path:inset(0 0 0 0)}
.cst-base__cta:active{transform:translateY(0)}
.cst-base__cta:focus-visible{outline:3px solid #141314;outline-offset:3px}

.cst-base__ico{display:flex;align-items:center;flex:none}
.cst-base__ico svg{width:19px;height:19px;display:block}

/* ---------- RESPONSIVO ---------- */
@media (max-width:900px){
  .cst-base__in{align-items:flex-start}
  .cst-base::before{width:380px;height:380px;right:-16%}
  .cst-base::after{width:240px;height:240px}
}

@media (max-width:767px){
  .cst-base{padding:32px 20px 34px}
  .cst-base__in{flex-direction:column;align-items:stretch;gap:24px}
  /* em flex-direction:column o flex-basis vira ALTURA.
     Sem este reset o bloco de texto reservava 420px. */
  .cst-base__txt{flex:0 0 auto}
  .cst-base__cta{width:100%;justify-content:center}
  .cst-base__d{font-size:.94rem}
  .cst-base::before{width:280px;height:280px;top:-24%;right:-24%}
  .cst-base::after{width:170px;height:170px;top:-10%;right:-6%}
}

@media (prefers-reduced-motion:reduce){
  .cst-base__cta,.cst-base__cta::before,.cst-base__cta::after{transition:none}
  .cst-base__cta:hover{transform:none}
}

/* ====================================================================
   BOTOES DE LOJA NO LUGAR DO CTA
   ==================================================================== */

.cst-base__lojas{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  min-width:0;
}

/* trava completa: o tema injeta fundo e sombra rosa no hover e no focus */
.cst-base__lojas .cst-loja,
.cst-base__lojas .cst-loja:link,
.cst-base__lojas .cst-loja:visited,
.cst-base__lojas .cst-loja:hover,
.cst-base__lojas .cst-loja:focus,
.cst-base__lojas .cst-loja:focus-visible,
.cst-base__lojas .cst-loja:active,
.cst-base__lojas .cst-loja:focus:not(:focus-visible){
  color:#141314 !important;
  background-image:none !important;
  box-shadow:none !important;
  outline:0 !important;
  text-decoration:none !important;
  filter:none !important;
}

.cst-base__lojas .cst-loja{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  padding:13px 20px;
  border-radius:12px;
  background-color:#FFFFFF !important;
  transition:transform .4s cubic-bezier(.19,1,.22,1),
             box-shadow .4s cubic-bezier(.19,1,.22,1);
}
.cst-base__lojas .cst-loja:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px -12px rgba(20,19,20,.45) !important;
}
.cst-base__lojas .cst-loja:active{transform:translateY(0)}
.cst-base__lojas .cst-loja:focus-visible{outline:3px solid #FFFFFF !important;outline-offset:3px}

.cst-base__lojas .cst-loja__ic{display:flex;flex:none}
.cst-base__lojas .cst-loja__ic svg{width:23px;height:23px;display:block}

.cst-base__lojas .cst-loja__t{min-width:0}
.cst-base__lojas .cst-loja__t span{
  display:block;
  font-family:'Roboto',sans-serif;
  font-weight:300;
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.4;
  color:#6E6C6E;
}
.cst-base__lojas .cst-loja__t b{
  display:block;
  font-family:'Rubik',sans-serif;
  font-weight:600;
  font-size:.97rem;
  letter-spacing:-.018em;
  line-height:1.2;
  color:#141314;
}

@media (max-width:900px){
  .cst-base__lojas{width:100%;max-width:410px}
}

@media (max-width:600px){
  .cst-base__lojas{grid-template-columns:minmax(0,1fr);max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .cst-base__lojas .cst-loja{transition:none}
  .cst-base__lojas .cst-loja:hover{transform:none}
}/* End custom CSS */