/*!
Theme Name: Naki 2025
Theme URI: https://underscores.me/
Author: Automattic
Author URI: https://automattic.com/
Description: Hi. I'm a starter theme called <code>Naki</code>, or <em>underscores</em>, if you like. I'm a theme meant for hacking so don't use me as a <em>Parent Theme</em>. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE


/*global*/

/*css background*/



/*fonts*/

@font-face {
  font-family: 'Inter';
  src: url('./fonts/inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: regular;
  font-display: swap;
}

@font-face {
  font-family: 'Teko';
  src: url('./fonts/Teko-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Teko';
  src: url('./fonts/Teko-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Teko';
  src: url('./fonts/Teko-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Teko';
  src: url('./fonts/Teko-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Teko';
  src: url('./fonts/teko-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*cores*/

:root {
  line-height: 1.2;

  --scale: 1.250;
  --primary-color: #f92f2f;
  --red-gradient: linear-gradient(7deg, rgba(125, 23, 23, 1) 25%, rgba(249, 47, 47, 1) 100%) #fff;
  --linear-red-gradient: linear-gradient(0deg, rgba(249, 47, 47, 0.5) 0%, rgba(249, 47, 47, 0) 28%);
  --linear-petroleo-gradient: linear-gradient(-7deg, rgba(28, 47, 54, 0.81) 0%, rgba(28, 47, 54, 0) 38%);
  --colorful-gradient: linear-gradient(120deg, rgba(249, 47, 47, 1) 0%, rgb(255, 99, 99) 33%, rgba(130, 155, 255, 1) 60%, rgba(206, 99, 255, 1) 76%, rgba(255, 255, 255, 1) 100%);

  --petroleo: #1C2F36;
  --branco: #fff;
  --cinza-escuro: #333;
  --cinza-claro: #777;
  --preto: #000;


  /* Base: parágrafo */
  --step-0: clamp(1rem, 1vw + 0.8rem, 1.125rem);

  /* Headings */
  --step-1: calc(var(--step-0) * var(--scale));
  /* h6 */
  --step-2: calc(var(--step-1) * var(--scale));
  /* h5 */
  --step-3: calc(var(--step-2) * var(--scale));
  /* h4 */
  --step-4: calc(var(--step-3) * var(--scale));
  /* h3 */
  --step-5: calc(var(--step-4) * var(--scale));
  /* h2 */
  --step-6: calc(var(--step-5) * var(--scale));
  /* h1 */
}

.red {
  background: var(--red-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.box {
  box-shadow: -10px 21px 13px rgba(0, 0, 0, 0.25);
  background: linear-gradient(152deg, rgba(255, 255, 255, 0.1) 72%, rgba(255, 255, 255, 0.3) 100%);

  border-radius: 8px;
  padding: 16px;
  border: solid 2px var(--cinza-claro);
  backdrop-filter: blur(13px);
}

/*liquid glass*/
.liquid-glass {
  position: absolute;
  isolation: isolate;
  background-color: rgba(255, 255, 255, 0.2);
  text-shadow: 0 2px 4px rgb(0 0 0 / 10%);
  box-shadow: 0 6px 6px rgb(0 0 0 / 20%), 0 0 20px rgb(0 0 0 / 10%);
  user-select: none;

  &::before,
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  /*Glass distortion effect*/
  &::before {
    backdrop-filter: blur(3px);
    filter: url(#glass-distortion);
    z-index: -1;
  }

  /* Outline shine*/
  &::after {
    box-shadow: inset 2px 2px 1px 0 rgb(255 255 255 / 50%), inset -1px -1px 1px 1px rgb(255 255 255 / 50%);
  }

  &.dragging {
    cursor: grabbing;
  }
}

/*---anim---*/
.anim-left,
.anim-right,
.anim-up,
.anim-down {
  opacity: 0;
  transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
}

.anim-left {
  transform: translateX(-40px);
  /* Deslocamento da esquerda para a direita */
}

.anim-left.active {
  opacity: 1;
  transform: translateX(0);
}

.anim-right {
  transform: translateX(40px);
  /* Deslocamento da direita para a esquerda */
}

.anim-right.active {
  opacity: 1;
  transform: translateX(0);
}

.anim-up {
  transform: translateY(40px);
  /* Deslocamento de baixo para cima */
}

.anim-up.active {
  opacity: 1;
  transform: translateY(0);
}

.anim-down {
  transform: translateY(-40px);
  /* Deslocamento de cima para baixo */
}

.anim-down.active {
  opacity: 1;
  transform: translateY(0);
}


body {
  /*background: rgb(28, 47, 54);*/
  background: black;
  color: var(--branco);
  font-family: 'Inter', sans-serif;
}

.gradient-background {
  background: linear-gradient(125deg, #131313, #091c2c);
  background-size: 100% 100%;
  animation: gradient-animation 3s ease infinite;
}

.white-background {
  background: var(--branco);
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 50% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.color-text {
  background: var(--colorful-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ball {
  position: absolute;
  width: 80%;
  height: 50vw;
  top: -100%;
  opacity: 85%;
  border-radius: 1500px;
  background: #da6ec2;
  z-index: -99;
  filter: blur(200px);
  mix-blend-mode: hard-light;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Teko', sans-serif;
  margin: 0;
  padding: 0;
}

p,
small {
  font-family: 'Inter', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.5;
  letter-spacing: 0.2rem;
}

small {
  font-size: 0.833rem
}

p {
  font-size: var(--step-0);
}

h6 {
  font-size: var(--step-1);
}

h5 {
  font-size: var(--step-2);
}

h4 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-4);
}

h2 {
  font-size: var(--step-5);
}

h1 {
  font-size: var(--step-6);
}



.cta {
  color: var(--branco);
  border-radius: 8px;
  border: 2px solid var(--cinza-claro);
  display: flex;
  text-decoration: none;
}

.cta:hover {}

.glow {}

.glow:hover {
  -webkit-box-shadow: 0px 0px 21px 7px rgba(201, 10, 52, 0.9);
  -moz-box-shadow: 0px 0px 21px 7px rgba(201, 10, 52, 0.9);
  box-shadow: 0px 0px 21px 7px rgba(201, 10, 52, 0.9);
  border: 2px solid var(--primary-color);
  transition: all 0.4s ease-in-out;
  animation: glow 4s ease-in-out infinite;
}

@keyframes glow {

  0%,
  100% {
    -webkit-box-shadow: 0px 0px 21px 7px rgba(201, 10, 52, 0.9);
    -moz-box-shadow: 0px 0px 21px 7px rgba(201, 10, 52, 0.9);
    box-shadow: 0px 0px 21px 7px rgba(201, 10, 52, 0.9);
  }

  50% {
    -webkit-box-shadow: 0px 0px 10px 3px rgba(201, 10, 52, 0.9);
    -moz-box-shadow: 0px 0px 10px 3px rgba(201, 10, 52, 0.9);
    box-shadow: 0px 0px 10px 3px rgba(201, 10, 52, 0.9);

  }

}

.cta a {}

.separator {
  height: 0px;
}

.flip {
  transform: rotate(180deg);
}


/*header*/
#masthead {
  width: 100%;
}

/*menu*/
#site-navigation {
  font-family: 'Inter', sans-serif;
  top: 5%;
  position: fixed;
  padding: 8px 16px !important;
  font-size: 0.9rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* estado inicial */
  width: auto;
}

#site-navigation-mobile {
  display: none !important;
  width: 100%;
}

#site-navigation.scrolled {
  justify-content: space-between;
}

#hamburger {
  display: flex;
  cursor: pointer;
}

.sticky-container {
  position: relative;
}

.sticky {
  position: sticky;
  --dinamic-top: 0px;
  /* definida por padrão */
  top: 50%;
  margin-bottom: 50%;
}


#logo {}

#logo a img {
  width: auto;
  height: 56px;
}

#menu {}

#menu li a,
#menu-footer li a {
  color: #fff;
  padding: 8px 16px;
  transition: all 0.3s ease;
  text-decoration: none;
}

#menu li a:hover {
  text-decoration: underline;
  transition: all 0.3s ease;
}

/*hero*/

#hero {
  margin-top: 10%;
  min-height: 500px;
  color: var(--branco);
  text-align: center;
  ;
}

#hero h4 {
  font-weight: 200;
}

.hero-texto {
  padding: 32px;
}

.fundo {
  position: fixed;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background: url(img/fundo-hero.webp) no-repeat;
  background-size: cover;
  background-position: center bottom;
  z-index: -1;
  opacity: 0.5;
}

.site-title {
  line-height: 1;
  font-family: 'Teko', sans-serif;
  font-weight: 400;
  font-size: 75px;
  margin: 0;
  padding: 0 24px 32px 24px;
}

.cta-hero {
  position: relative;
  flex-wrap: nowrap;
  padding: 0;
  justify-content: flex-end;
  width: calc(var(--cta-h5-width, 0px) + 260px);
}

.whats-hero {
  position: absolute;
  font-weight: 500;
  height: 100%;
  left: 0;
  width: 200px;
  text-align: center;
  align-items: center;
  padding: 8px 16px;
  transition: all 0.4s ease-in-out;
  justify-content: center;
  border: none;
  overflow: hidden;
  font-family: 'Teko';
  font-size: 1.5rem;
  font-kerning: auto;
  letter-spacing: 0.1rem;
}

.whats-hero:hover {
  width: 100%;
  transition: all 0.4s ease-in-out;
}

.whats-hero:hover .background-whats {
  width: 100%;
  transition: all 0.4s ease-in-out;
}

.background-whats {
  backdrop-filter: blur(13px);
  z-index: -1;
  position: absolute;
  width: 0%;
  height: 100%;
  left: 0;
  background: var(--primary-color);
  transition: all 0.4s ease-in-out;
}

.cta-hero:hover {}

.cta-hero a {
  display: flex;
  text-decoration: none;
  font-weight: 400;
  padding: 8px 0;
  flex-wrap: nowrap;
  color: var(--branco);
}

.cta-hero h5 {
transition: all 0.4s ease-in-out;
}

.cta-hero h5:hover{
  color: var(--primary-color);
  transition: all 0.4s ease-in-out;
}

.cta-hero h5:hover+img {
  animation: point 1s infinite;
}

.cta-whats {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 8px 8px 40px;
  overflow: hidden;
}

.cta-icons {
  width: 32px;
  height: 32px;
  position: absolute;
  left: 8px;
}

.cta-whats-background {
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, rgba(125, 23, 23, 0.9) 50%, rgba(249, 47, 47, 1) 100%);
  top: 0;
  left: 0%;
  z-index: -2;
  transition: all 0.2s ease;
  position: absolute;
}

.cta-whats:hover {}

.cta-whats:hover .cta-whats-background {
  left: -100%;
  transition: all 0.2s ease;

}

#icon-1,
#icon-2 {
  position: absolute;
  transition: all 0.2s ease;
  transition-delay: 0.2s;
}

#icon-1 {
  top: 0;
  transition: all 0.2s ease;
  transition-delay: 0.2s;
}

#icon-2 {
  top: 100%;
  transition: all 0.2s ease;
}

.cta-whats:hover {
  transition: all 0.4s ease;
}

.cta-whats:hover .cta-icons #icon-1 {
  top: 100%;
  transition: all 0.2s ease;
}

.cta-whats:hover .cta-icons #icon-2 {
  top: 0%;
  transition: all 0.2s ease;
  transition-delay: 0.2s;
}

.cta-icons img {
  max-height: 23px;
  margin: 4px;
}

.cta-hero img:hover {
  animation: point 1s infinite;

}

@keyframes point {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10%);
  }
}


/*sobre*/
#sobre h2,
.faq h2,
.post h1 {
  font-size: 3.2rem;
  align-items: center;
  line-height: 1.2;
}

#sobre {
  background: rgba(0, 0, 0, 0.5);
  padding: 64px 0;
  backdrop-filter: blur(15px);
}

.step {
  position: relative;
}

.reflexo {
  position: absolute;
  width: 100%;
  height: 20%;
  top: 102%;
  left: 0;
  background: linear-gradient(180deg, rgba(128, 128, 128, 0.4) 0%, rgba(128, 128, 128, 0) 85%);
  border-radius: 16px;
  opacity: 0.9;
  transform: rotateY(180deg);
  transition: 0.4s ease;
}

.titulo-sobre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.path {
  text-align: center;
  transition: 0.4s ease;
}

.path:hover {
  transform: translateY(-6px);
  transition: 0.4s ease;
}

.path:hover+.reflexo {
  transform: rotateY(180deg) translateY(6px);
  transition: 0.4s ease;
}

.path .number {
  font-size: 2rem;
  font-weight: 500;
  color: var(--branco);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--primary-color);
  margin-top: -23px;
  margin-bottom: 20px;
  border-radius: 8px;
  font-family: 'teko', sans-serif;
  margin-left: -100%;
  box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.3);
}

#sobre-2 {
  padding: 64px 0;
  overflow: hidden;
  position: relative;
  background: url(./img/fundo-glow.png) no-repeat;
  background-position: bottom;
  background-attachment: fixed;
  background-blend-mode: darken;

}

.ground {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.96) 60%, rgba(0, 0, 0, 0.79) 93%);
  z-index: -1;
}

#sobre-3 {
  padding: 64px 0;
  background: rgba(0, 0, 0, 0.7);
}

.sobre-2 {
  justify-content: space-between;
  margin-bottom: 64px;
}

.box-red {
  font-family: 'Teko', sans-serif;
  background: var(--linear-petroleo-gradient);
  transition: all 0.4s ease;
  max-height: 290px;
}

.box-red:hover {
  background: var(--red-gradient);
  transition: all 0.4s ease;
}

.box-red .number {
  font-size: 5rem;
  font-weight: 300;
  color: var(--branco);
  line-height: 1;
}

.box-red .label {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--branco);
  margin-bottom: 32px;
  line-height: 1;
}

.box-red p {
  font-size: 1rem;
  color: var(--branco);
  font-weight: 300;
  line-height: 1.5;
}

.fundo-metodo {
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.2;
  mix-blend-mode: plus-lighter;
  position: absolute;
  top: 0;
}

.metodo .row {
  align-items: stretch;
  /* faz as colunas ficarem da mesma altura */
}

.metodo .step {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* garante que o step ocupe a altura total da coluna */
}

.metodo .box {
  flex: 1;
  /* estica o box para preencher a altura */
  display: flex;
  flex-direction: column;
}


#portfolio {
  BACKGROUND: RGBA(0, 0, 0, 0.3);
}

/*cards interativas*/

.row.cards {
  display: flex;
  flex-wrap: wrap;

  /* garante quebra em telas menores */
}

.cards {
  transform-style: preserve-3d;
  will-change: transform;
}

.cards .col-lg-3 {
  display: flex;
  flex: 1;
  /* todos iguais por padrão */
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
}

.cards .box {}

.cards .box p {
  display: none;
  opacity: 0;
  height: 0px;
  transition: all 0.25s ease;
  transition-delay: 0.32s;
}

/* Ativo no desktop (expande horizontalmente) */
.cards .box.active {
  flex: 3;
}

.cards .col-lg-3.active {
  flex: 3;
}

.cards .col-lg-3.active .box p {
  display: block;
  opacity: 1;
  margin-top: 10px;
  transition: all 0.3s linear;
  height: 100%;
}

.lista ul {
  padding-left: 0;
}

.lista li {
  margin: 0 0 8px 0 !important;
  padding: 8px;
  transition: all 0.4s ease;
}

.lista li:hover {
  /*background: linear-gradient(90deg, rgba(249, 47, 47, 0) 0%, rgba(249, 47, 47, 1) 22%, rgba(249, 47, 47, 1) 71%, rgba(249, 47, 47, 0) 100%);*/
  transform: translateX(4px);
  transition: all 0.4s ease;
}


.lista i {
  padding: 0 4px 0 0;
  margin-right: 8px;

}

.lista i img {
  width: 24px;
  height: 24px;
}

.foto {
  display: inline-block;
  transform-style: preserve-3d;
  will-change: transform;
}

.sobre-3 {}

#sobre-3 p {
  font-weight: 300;
  line-height: 1.3;
}

/*portfolio*/
#titulo-portfolio {
  position: sticky;
  top: 5%;
}

.posts-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.post-item {
  transition: opacity 0.3s, transform 0.3s;
}

.post-item.hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  /* evita ocupar espaço */
}

.cards-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  scroll-snap-type: y mandatory;
}

#portfolio #loop {
  margin-bottom: -7rem;
}

.stack-container {}

.card-portfolio {
  position: sticky;
  top: calc(50vh - var(--half-height));
  /* ponto onde o card “gruda” */
  width: 100%;
  box-shadow: 0px -20px 15px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 8;
  transform: translateY(0);
  margin-bottom: 25%;
  scroll-snap-align: start;
  overflow: hidden;
  background: var(--cinza-escuro);
  /* posição inicial neutra */
}

.portfolio-hover {
  position: absolute;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  padding: 32px;
  top: 0;
  width: 100%;
  height: 200%;
  transition: all 0.3s ease;
  z-index: 1;
  justify-content: flex-end;
  background: var(--linear-petroleo-gradient);
  /*background: linear-gradient(0deg,rgba(53, 31, 79, 0.81) 0%, rgba(53, 31, 79, 0) 38%);*/
}

.portfolio-hover a {
  width: 100%;
  color: var(--branco);
  text-decoration: none;
}

.portfolio-hover img {
  height: 64px;
}

.portfolio-hover h3 {
  font-size: 4rem;
  font-weight: 300;
  line-height: 1;
}

.portfolio-hover:hover {
  top: -100%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.portfolio-hover:hover+.img-portfolio {
  mix-blend-mode: multiply;
  transform: scale(1.05);
  transition: all 0.7s ease;
}

.img-portfolio {
  width: 100%;
  height: auto;
  top: 0;
  object-fit: cover;
  transition: transform 0.3s ease;
  position: absolute;
}

.portfolio-meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.post-category {
  display: flex;
  align-items: center;
  font-size: small;
  border-radius: 8px;
  padding: 4px 8px;
}

.post-category img {
  max-height: 24px;
}

/*--- FAQ ---*/

.faq {
  padding: 64px 0;
}

.faq-box {
  color: var(--branco);
  padding: 32px;
}

.faq .row {
  flex-direction: row;
}

.faq-item {
  padding: 16px 0;
  border-bottom: solid 1px var(--cinza-claro);
  font-family: 'Inter', sans-serif;
}

.faq-item:first-child {
  padding-top: 0;
}

.faq-question,
.faq-answer {
  padding: 0 16px;
  font-weight: 300;
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: #e7defb;
  font-size: 1.25rem;
  position: relative;
  padding-left: 32px;
  --chevron-rotation: 0deg;
  /* valor inicial */
}

.faq-question::before {
  width: 24px;
  height: 24px;
  content: url(./img/chevron.svg);
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%) rotate(var(--chevron-rotation));
  transform-origin: center center;
  font-size: 1.25rem;
  color: var(--cinza-claro);
}



.faq-question:hover {
  color: var(--branco);
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
}

/*--post--*/


.post {
  margin-top: 128px;
}

.post-sidebar {
  position: relative;
}

.post-header {
  position: sticky;
  top: 128px;
}

.descricao p {
  font-size: small;
}

/*--footer--*/

#colophon {
  padding: 16px 0 0 0;
  background: var(--preto);
  color: var(--branco);
  font-size: small;
}

#colophon .row {
  flex-direction: column;
  align-items: center;
}

#footer-navigation,
.site-info-icons,
.site-info {
  padding: 16px 0;
}

.footer-container {
  flex-direction: row;
}

.footer-logo img {
  width: 58px;
}


.site-info-icons {
  display: flex;
  gap: 32px;
  justify-content: flex-end;
  align-items: center;
}

.site-info-icons img {
  max-height: 24px;
}

.site-info-icons a {
  color: var(--branco);
  filter: invert(1);
  height: 24px;
  display: flex;
}

.post .post-category {
  padding: 4px 8px 4px 0;
}


/*--CONTATO--*/

#contato {
  padding: 64px 0;
  position: relative;
}

#contato .fundo-contato {
  background: url(/estudionaki/wp-content/themes/naki2025/img/fundo-hero.webp) no-repeat #000;
  background-size: cover;
  background-position: center top;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.8;
}

#contato h2 {
  font-size: 5rem;
}

#contato p {
  max-width: 600px;
}

#contato .row {
  text-align: center;
}

#contato .col {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

#contato a {
  padding: 8px 16px;
  font-size: 2rem;
  font-family: 'Teko', sans-serif;
  font-weight: 500;
  margin-top: 32px;
  position: relative;
  overflow: hidden;
}

.cta-inside {
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  max-height: 48px;
  overflow: hidden;

}

#number-1,
#number-2 {
  width: 100%;
  transition: all 0.3s ease;
  line-height: 1.5;
}

#contato a:hover #number-1 {
  transform: translateY(-100%);
  transition: all 0.3s ease;
}

#contato a:hover .cta-inside-background {
  width: 150%;
  height: 150%;
  top: -25%;
  left: -25%;
  transition: all 0.4s ease-in-out;
}

.cta-inside-background {
  width: 0%;
  height: 0%;
  border-radius: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  background: #14064a;

}


/* --- MOBILE --- */
@media (max-width: 768px) {

  .separator {
    height: 8px;
  }

  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .site-title {
    line-height: 1;
    text-align: center;
  }

  #hero {
    padding-bottom: 64px;
  }

  #hero h4 {
    text-align: center;
  }

  #site-navigation {
    display: none !important;
  }

  #site-navigation-mobile {
    display: flex !important;
    position: fixed;
    top: 0%;
    padding: 0;
    border-top: none;
    border-radius: 0px;
    border-left: none;
    border-right: none;
    z-index: 999;
  }

  .cta-hero {
    width: 300px;
    flex-direction: column;
  }

  .cta-hero a {
    justify-content: center;
    font-size: 1.5rem;
    padding: 16px;
  }

  .whats-hero {
    position: relative;
    width: 100%;
  }

  #logo-mobile img {
    max-height: 72px;
    width: auto;
  }

  #menu-mobile {
    padding: 16px;
    width: 100%;
    margin-top: -200%;
    transition: all 0.3s ease;
    height: 0;
  }

  #menu-mobile.ativo {
    margin-top: 0;
    height: auto;
    transition: all 0.3s ease;
  }

  .cta-whats {
    justify-content: center;
    padding: 12px;
  }

  .cta-icons {
    position: relative;
    left: 0;
  }

  .cta-icons #icon-2 {
    display: none;
  }

  .portfolio-hover {
    top: 0;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 75%);
  }

  .portfolio-hover:hover {
    top: 0;
  }

  .portfolio-hover:hover+.img-portfolio {
    mix-blend-mode: normal;
    transform: scale(1);
    transition: all 0.7s ease;
  }

  .portfolio-meta {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }



  .portfolio-hover h3 {
    font-size: 2rem;
  }

  #menu-mobile ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  #menu-mobile ul li {
    text-align: center;
    padding: 16px 0;
  }

  #menu-mobile ul li a {
    font-size: 1.2rem;
    color: var(--branco);
    text-decoration: none;
  }

  #contato h2 {
    line-height: 1;
  }

  .metodo {
    gap: 64px;
  }

  .sticky {
    margin-bottom: 16px;
  }

  .cards {
    gap: 8px;
  }

  .box-red p small {
    font-size: 1rem;
  }

  .card-portfolio {
    aspect-ratio: 9 / 16;
    top: 120px;
  }

  .cards .col-lg-3 .box p {
    transition: all 0.4s linear;
  }

  .cards .col-lg-3.active .box p {
    transition: all 0.4s linear;
  }

  .cta-hero {
    flex-wrap: wrap;
  }

  .img-portfolio {
    height: 100%;
    width: auto;
    object-fit: cover;
  }


  .row.cards {
    flex-direction: column;
  }

  .cards .col-lg-3 {
    overflow: visible;
  }

  .cards .col-lg-3.active {}

  .box-red {
    width: 100%;
    max-height: none !important;
  }

  .footer-container {
    flex-direction: column;
    gap: 16px;
  }

}

.descricao p {
  font-size: 1.25rem;
}

.post-header {
  padding: 16px 0 32px 0;
}

.faq-box {
  padding: 16px;
}