.elementor-320 .elementor-element.elementor-element-9d00b16{--display:flex;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:30px;--padding-bottom:30px;--padding-left:20px;--padding-right:20px;}.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 );color:var( --e-global-color-primary );}.elementor-320 .elementor-element.elementor-element-69fe028{padding:0px 0px 0px 20px;border-style:solid;border-width:0px 0px 0px 10px;border-color:#FECD00;}.elementor-320 .elementor-element.elementor-element-69fe028 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:3em;font-weight:700;line-height:1.5em;color:#000512;}.elementor-320 .elementor-element.elementor-element-9cda764{--display:flex;--padding-top:70px;--padding-bottom:70px;--padding-left:20px;--padding-right:20px;}.elementor-320 .elementor-element.elementor-element-9cda764:not(.elementor-motion-effects-element-type-background), .elementor-320 .elementor-element.elementor-element-9cda764 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EAEEF3;}.elementor-320 .elementor-element.elementor-element-53c3a69{--spacer-size:50px;}.elementor-320 .elementor-element.elementor-element-843c7de.elementor-element{--align-self:center;}.elementor-320 .elementor-element.elementor-element-843c7de .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:2em;font-weight:700;line-height:1.2em;color:#000310;}.elementor-320 .elementor-element.elementor-element-eedc53f.elementor-element{--align-self:center;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-320 .elementor-element.elementor-element-9d00b16{--content-width:1366px;}.elementor-320 .elementor-element.elementor-element-9cda764{--content-width:1366px;}}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}}@media(max-width:767px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-320 .elementor-element.elementor-element-69fe028.elementor-element{--align-self:flex-start;}.elementor-320 .elementor-element.elementor-element-69fe028 .elementor-heading-title{font-size:2em;}.elementor-320 .elementor-element.elementor-element-843c7de{text-align:center;}.elementor-320 .elementor-element.elementor-element-843c7de .elementor-heading-title{font-size:1.8em;}.elementor-320 .elementor-element.elementor-element-eedc53f.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}}/* Start custom CSS for shortcode, class: .elementor-element-41ceb36 *//* =========================================
   CONFIGURAÇÕES
========================================= */

.portfolio-section,
.portfolio-section *,
.portfolio-section *::before,
.portfolio-section *::after {
  box-sizing: border-box;
}

.portfolio-section {
  width: 100%;
}

.portfolio-container {
  width: 100%;
  max-width: 1366px;
  margin-inline: auto;
}

.portfolio-grid {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}


/* =========================================
   CARD
========================================= */

.portfolio-card {

  position: relative;
  overflow: hidden;

  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;

  border: 1px solid rgba(254, 205, 0, 0.18);

  border-radius: 22px;

  background: linear-gradient(
    145deg,
    #071021,
    #000512
  );

  text-decoration: none;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 20px 45px rgba(0,0,0,0.35);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}


/* Linha superior dourada */

.portfolio-card::before {

  content:"";

  position:absolute;

  z-index:3;

  top:0;
  left:24px;
  right:24px;

  height:1px;


  background:linear-gradient(
    90deg,
    transparent,
    rgba(254,205,0,.85),
    rgba(254,205,0,.35),
    transparent
  );

  pointer-events:none;
}



/* =========================================
   IMAGEM
========================================= */

.portfolio-preview {

  position:relative;

  overflow:hidden;

  width:100%;

  height:430px;


  background-image:

    linear-gradient(
      to bottom,
      transparent 75%,
      rgba(0,5,18,.45)
    ),

    var(--portfolio-image);


  background-repeat:no-repeat;


  background-position:

    center,

    top center;


  background-size:

    cover,

    100% auto;


  transition:

    background-position 7s cubic-bezier(.22,.61,.36,1),

    filter .35s ease;
}



/* =========================================
   INFORMAÇÕES
========================================= */

.portfolio-info {

  min-height:105px;

  padding:22px 24px;


  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:18px;


  border-top:

    1px solid rgba(254,205,0,.10);


  background:#000512;
}



.portfolio-info > div {

  min-width:0;
}



.portfolio-info span {

  display:block;

  margin-bottom:7px;


  color:#FECD00;


  font-family:Arial, Helvetica, sans-serif;

  font-size:12px;

  font-weight:700;

  line-height:1;


  text-transform:uppercase;

  letter-spacing:.08em;
}



.portfolio-info h3 {

  margin:0;


  color:#ffffff;


  font-family:Arial, Helvetica, sans-serif;

  font-size:18px;

  font-weight:700;

  line-height:1.3;

}



/* =========================================
   SETA
========================================= */

.portfolio-info .portfolio-arrow {

  width:42px;

  height:42px;


  flex:0 0 42px;


  display:flex;

  align-items:center;

  justify-content:center;


  border:1px solid rgba(254,205,0,.35);


  border-radius:50%;


  color:#FECD00;


  font-size:20px;


  background:rgba(254,205,0,.05);


  transition:

    transform .3s ease,

    border-color .3s ease,

    background-color .3s ease;
}



/* =========================================
   HOVER
========================================= */

.portfolio-card:hover,
.portfolio-card:focus-visible {

  transform:translateY(-8px);


  border-color:rgba(254,205,0,.65);


  box-shadow:

    inset 0 1px 0 rgba(255,255,255,.06),

    0 28px 60px rgba(0,0,0,.45),

    0 0 35px rgba(254,205,0,.10);
}



.portfolio-card:hover .portfolio-preview,
.portfolio-card:focus-visible .portfolio-preview {

  background-position:

    center,

    bottom center;


  filter:brightness(1.04);
}



.portfolio-card:hover .portfolio-arrow,
.portfolio-card:focus-visible .portfolio-arrow {

  transform:translate(3px,-3px);


  border-color:#FECD00;


  background:rgba(254,205,0,.15);
}



.portfolio-card:focus-visible {

  outline:2px solid #FECD00;

  outline-offset:5px;
}



/* =========================================
   TABLET / NOTEBOOK
========================================= */

@media(max-width:1100px){

  .portfolio-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));

  }


  .portfolio-preview{

    height:480px;

  }

}



/* =========================================
   MOBILE
========================================= */

@media(max-width:650px){

  .portfolio-section{

    padding:10px 18px;

  }


  .portfolio-grid{

    grid-template-columns:1fr;

    gap:18px;

  }


  .portfolio-card{

    border-radius:18px;

  }


  .portfolio-preview{

    height:480px;

  }


  .portfolio-info{

    min-height:96px;

    padding:20px;

  }


  .portfolio-info h3{

    font-size:17px;

  }


  .portfolio-info .portfolio-arrow{

    width:38px;

    height:38px;

    flex-basis:38px;

    font-size:18px;

  }

}



/* =========================================
   CELULAR PEQUENO
========================================= */

@media(max-width:390px){

  .portfolio-section{

    padding-inline:14px;

  }


  .portfolio-preview{

    height:420px;

  }


  .portfolio-info{

    padding:18px;

  }


  .portfolio-info h3{

    font-size:16px;

  }

}



/* =========================================
   DISPOSITIVOS SEM HOVER
========================================= */

@media(hover:none){

  .portfolio-card:active .portfolio-preview,
  .portfolio-card:focus .portfolio-preview{

    background-position:

      center,

      bottom center;

  }

}



/* =========================================
   ACESSIBILIDADE
========================================= */

@media(prefers-reduced-motion:reduce){

  .portfolio-card,
  .portfolio-preview,
  .portfolio-arrow{

    transition:none;

  }


  .portfolio-card:hover{

    transform:none;

  }

}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-843c7de */.color1{
    background: linear-gradient(
    90deg,
    #e52bb8 0%,
    #8b3de8 25%,
    #3d51e8 48%,
    #18aee8 70%,
    #24e5d1 85%,
    #8aefb7 100%
  );

  background-size: 100% 100%;
  background-clip: text;
  -webkit-background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;

  font-weight: 800;
    
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-eedc53f *//* ========================================= CONFIGURAÇÃO GLOBAL ========================================= */ *, *::before, *::after { box-sizing: border-box; } /* ========================================= CONTAINER DO BOTÃO ========================================= */ .hero-buttons { width:100%; max-width:420px; margin-top:0; display:flex; flex-direction:column; align-items:center; } /* ========================================= BOTÃO GERAL ========================================= */ .hero-btn { position:relative; width:100%; min-height:72px; padding:0 30px; display:flex; align-items:center; justify-content:flex-start; gap:16px; border-radius:18px; font-family:Arial, Helvetica, sans-serif; font-size:clamp(16px,1.5vw,20px); font-weight:700; line-height:1.25; text-align:left; text-decoration:none; cursor:pointer; transition: transform .3s ease, box-shadow .3s ease; } /* ========================================= CORES TEXTO E ÍCONE ========================================= */ .hero-btn, .hero-btn:hover, .hero-btn:focus, .hero-btn:active, .hero-btn span, .hero-btn i { color:#000 !important; text-decoration:none !important; } /* ========================================= BOTÃO WHATSAPP ========================================= */ .hero-btn-primary { background:#25D366; border:2px solid rgba(255,255,255,.25); box-shadow: 0 12px 30px rgba(37,211,102,.25); } .hero-btn-primary:hover { transform:translateY(-3px); background:#25D366; box-shadow: 0 18px 38px rgba(37,211,102,.38); } /* ========================================= ÍCONE WHATSAPP ========================================= */ .hero-btn-primary .fa-whatsapp { flex:0 0 auto; width:30px; font-size:30px; line-height:1; text-align:center; } /* ========================================= TEXTO ========================================= */ .hero-btn > span { flex:1; min-width:0; text-align:left; } /* ========================================= BENEFÍCIOS ABAIXO DO BOTÃO ========================================= */ .hero-benefits { width:100%; margin-top:16px; display:flex; align-items:center; justify-content:center; gap:22px; } .hero-benefits div { display:flex; align-items:center; justify-content:center; gap:7px; } .hero-benefits i { color:#FECD00; font-size:15px; } .hero-benefits span { color:#111; font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:600; line-height:1; opacity:.85; } /* ========================================= FOCO ACESSIBILIDADE ========================================= */ .hero-btn:focus-visible { outline:3px solid rgba(37,211,102,.5); outline-offset:4px; } /* ========================================= TABLET ========================================= */ @media(max-width:900px){ .hero-btn { min-height:68px; padding:0 24px; font-size:17px; } .hero-btn-primary .fa-whatsapp { width:27px; font-size:27px; } } /* ========================================= MOBILE ========================================= */ @media(max-width:700px){ .hero-buttons { max-width:100%; margin-top:26px; } .hero-btn { min-height:62px; padding:0 22px; font-size:16px; } .hero-benefits { gap:14px; } .hero-benefits span { font-size:12px; } } /* ========================================= CELULAR PEQUENO ========================================= */ @media(max-width:390px){ .hero-btn { min-height:58px; padding:0 17px; gap:11px; font-size:14px; } .hero-btn-primary .fa-whatsapp { width:24px; font-size:24px; } .hero-benefits { flex-direction:column; gap:9px; } } /* ========================================= REDUÇÃO DE MOVIMENTO ========================================= */ @media(prefers-reduced-motion:reduce){ .hero-btn { transition:none; } }/* End custom CSS */