#app{
  display: grid;
  gap: var(--wrap-gap);
  grid-template-columns: 
    [start]
    minmax(2vw, 1fr) 
    [wrap-start]
    repeat(calc(var(--wrap-columns) / 2), var(--column-width))
    [middle]
    repeat(calc(var(--wrap-columns) / 2), var(--column-width))
    [wrap-end]
    minmax(2vw, 1fr)
    [end] 
  ;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  background-color: var(--color-surface);
  view-timeline-name: --my-view-timeline;
}

@media(width <= 899px){
  :root{
    --wrap-columns: 4;
    --data-list-columns: 1fr;
    --section-image-position: var(--width-wrap);
    --section-content-position: var(--width-wrap);
    --section-header-position: var(--width-wrap);
    --section-header-footer: var(--width-wrap);
    --page-layout-row-gap: var(--space-md);
    --page-layout-padding-block-end: var(--space-lg);
    --section-layout-row-gap: var(--space-md);
    --section-layout-padding-block: var(--space-md);
    .full{
      --section-image-position: var(--width-full);
    }
    #archive-case{
      --data-list-columns: 1fr;
    }
  }
}

#archive-case{
  --data-list-columns: repeat(3, 1fr);
  --section-layout-padding-block: 0;
}




.grid-view-active .grid-view{
  opacity: 0.3;
}

.grid-view{
  display: grid;
  gap: var(--wrap-gap);
  grid-template-columns: 
    [start]
    minmax(2vw, 1fr) 
    [wrap-start]
    repeat(calc(var(--wrap-columns) / 2), var(--column-width))
    [middle]
    repeat(calc(var(--wrap-columns) / 2), var(--column-width))
    [wrap-end]
    minmax(2vw, 1fr)
    [end]
  ;
  gap: var(--wrap-gap);
  opacity: 0;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  > div{
    background: #33faff;
    height: 100%;
  }
  &:before, &:after{
    content: "";
    display: block;
    background: #dd2200;
    grid-row: 1 / -1;
  }
  &:before{
    grid-column: start / wrap-start
  }
  &:after{
    grid-column: wrap-end / end
  }
}



img, video, iframe{
  display: block;
  max-width: 100%;
  height: auto; 
}

.iframe-video{
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
}

.wrap{
  grid-column: wrap-start / wrap-end;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  gap: var(--wrap-gap);
}

.stack{
  display: grid;
  gap: var(--stack-gap, var(--space-2x));
  text-align: var(--stack-align, initial);
  justify-items: var(--stack-justify-items, initial);
}

.button-group{
  display: grid;
  &.wrap{
    justify-content: center;
    display: flex;
  }
}

.button{
  font: var(--button-font-weight, bold) var(--button-font-size, var(--font-size-md))  var(--button-font-family, var(--font-family-accent)) ;
  color: var(--button-color, var(--color-on-container));
  background-color: var(--button-background-color);
  padding: var(--button-padding, 12px 32px);
  width: fit-content;
  min-width: var(--button-min-width, 256px);
  border: var(--button-border, 2px solid var(--color-on-container));
  font-weight: var(--button-font-weight, 700);
  border-radius: var(--button-border-radius, var(--border-radius-md));

  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  transition: ease var(--velocity-fast);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  gap: 12px;

  --icon-color: var(--color-interactive);

  &:hover{
    color: var(--button-hover-color, var(--color-interactive));
    background-color: var(--button-hover-background-color, #fff);
    border-color: var(--button-hover-border-color, var(--color-interactive));
    --icon-color: var(--button-icon-hover-color, var(--color-interactive));
  }

  &.icon-start{
    --button-padding: 24px 48px 24px 44px;
    flex-direction: row-reverse;
  }

  &.icon-end{
    --button-padding: 24px 44px 24px 48px
  }

  &.disabled{
    color:  var(--button-disabled-color);
    background-color: var(--button-disabled-background-color);
    border-color: var(--button-disabled-border-color);
    --icon-color: var(--icon-disabled-color);
    cursor: not-allowed;
  }

  &.primary{
    --button-background-color: var(--color-interactive);
    --button-color: var(--color-on-interactive)!important;
    --button-border: 1px solid var(--color-interactive);
    --icon-color: var(--color-on-interactive);
    --button-disabled-color: var(--color-on-container-low);
    --button-disabled-background-color: var(--color-container-low);
    --button-disabled-border-color: var(--color-container-low);
    --icon-disabled-color: var(--color-on-container-low);
    --button-hover-border-color: var(--color-interactive);
    --button-icon-hover-color: var(--color-interactive);
  }

  &.tertiary{
    --button-padding: 0;
    --button-min-width: auto;
    --button-border: none;
    --icon-color: var(--color-on-interactive);
    --button-disabled-color: gray;
    --icon-disabled-color: gray;
  }

  &.sm{
    --button-padding: 12px 24px;
    --button-min-width: 100px;

  }

}

html.open{
  overflow: hidden;
  padding-right: var(--scrollbar-width);
}


.site-header{
  --button-min-width: fit-content;
  grid-column: var(--width-full);
  display: grid;
  grid-template-columns: subgrid;
  padding-block: var(--space-6x);
  z-index: 9999;
  position: sticky;
  top: 0;
  transition: 0.2s;

  animation-timeline: --my-view-timeline;
  animation-name: appear;
  animation-fill-mode: both;
  animation-range: entry 100vh entry 180vh;
  
  .wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo img{
    width: var(--logo-width, auto);
  }

}

@media (width <= 768px) {
  .nav-global{
    display: none;
    &.open{
      display: grid;
      position: absolute;
      width: 100%;
      height: var(--nav-height, 80vh);
      padding-block: var(--nav-padding-block, var(--space-surface-sm));
      background-color: var(--nav-background, var(--color-surface));
      top: 0;
      left: 0;
      translate: 0 var(--nav-top, 120px);
    }
    ul{
      flex-direction: column;
      padding-block: var(--space-8x);
    }
  }
  .btn-mobile{
    width: 36px;
    cursor: pointer;
    div{
      height: 4px;
      background-color: var(--btn-mobile-bar-color, var(--color-on-container));
      margin-block: 8px;
      transition: 0.2s;
    }
    &.open{
      div:nth-child(1) {
        transform: translateY(12px) rotate(45deg);
      }
      div:nth-child(2) {
        opacity: 0;
      }
      div:nth-child(3) {
        transform: translateY(-12px) rotate(-45deg);
      }
    }
  }
}


@media (width >= 900px){
  .site-header{
    padding-block: var(--space-6x);
    --logo-width: 120px;
  }
}

@keyframes appear {
  from {
    background-color: transparent;
    padding-block: var(--space-6x);
    --nav-top: 120px;
    --logo-width: auto;
  }
  
  to {
    background-color: var(--color-container);
    padding-block: var(--space-2x);
    --nav-top: 70px;
    --logo-width: 120px;
  }
}

.site-main{
  grid-column: var(--width-full);
  display: grid;
  grid-template-columns: subgrid;
}

.nav-global{
  ul{
    display: flex;
    align-items: center;
    justify-content: space-between; 
    list-style-type: none;
    gap: var(--space-4x);
  }
  li a{
    color: var(--color-on-container);
    font-weight: bold;
    text-decoration: none;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    transition: 0.2s;
    &:hover{
      color: var(--color-accent);
    }
  }
}



/* @media(width >= 901px){
  .section-cover, .section-content{
    grid-row: var(--width-full);
  }
} */

.section-layout{
  grid-column: var(--section-column, var(--width-full));
  display: grid;
  grid-template-columns: var(--section-layout-template-columns, subgrid);
  padding-block: var(--section-layout-padding-block, 132px);
  background-color: var(--section-layout-background, var(--color-surface));
  row-gap: var(--section-layout-row-gap, var(--space-8x));
  align-items: var(--section-layout-align, initial);  
}

@media(width >= 900px){
  .section-layout.hero{
    --section-layout-padding-block: 0;
    --section-layout-align: center;
    --section-header-position: wrap-start / middle;
    --section-content-position: middle / wrap-end;

    &.full{
      --section-image-position: start / middle;
      --section-content-padding-inline: 0;
    }
    
    &.invert{
      --section-content-position: wrap-start / middle;
      --section-image-position: middle / wrap-end;
      &.full{
        --section-image-position: middle / end;
        --section-content-padding-inline: 0;
      }
    }
  }
}

.section-content{
  grid-column: var(--section-content-position, var(--width-wrap));
  grid-row: var(--section-content-row);
  padding-inline: var(--section-content-padding-inline, 0 );
  text-align: var(--section-content-align, initial);
  justify-items: var(--section-content-justify-items, initial);
}

.section-header{
  grid-column: var(--section-header-position, var(--width-wrap));
  grid-row: var(--section-header-row);
  text-align: var(--section-header-align, initial);
  display: grid;
  gap: var(--section-footer-gap, var(--space-sm));
}

.section-footer{
  grid-column: var(--section-footer-position, var(--width-wrap));
  grid-row: var(--section-footer-row);
  text-align: var(--section-footer-align, initial);
  display: grid;
  gap: var(--section-footer-gap, var(--space-sm));
  justify-items: var(--section-footer-justify-items, initial);
}

.section-cover{
  grid-column: var(--section-image-position, wrap-start / middle);
  
  img{
    width: 100%;
    border-radius: var(--section-cover-border-radius, 0);
  }
}

@media(width >= 901px){
  .section-layout.hero{
    --section-content-row: 1 / -1;
    --section-header-row: 1 / -1;
  }
}

.site-footer{
  grid-column: var(--width-full);
  display: grid;
  grid-template-columns: subgrid;
  background-color: var(--color-surface);
  padding-block: var(--space-xl);
  .nav-global {
    ul {
      flex-direction: column;
      align-items: start;
    }
  }
}


.site-footer-top{
  grid-column: var(--width-full);
  display: grid;
  grid-template-columns: subgrid;
  .wrap {
    padding-block-end: var(--space-lg);
    border-block-end: 1px solid var(--color-on-container);
  }
}

.site-footer-bottom{
  grid-column: var(--width-full);
  display: grid;
  grid-template-columns: subgrid;
  .wrap{
    padding-block: var(--space-2x);
    display: flex;
    align-items: end;
    justify-content: space-between;
  }
}

.footer-info{
  display: grid;
  grid-template-columns: subgrid;
  gap: var(--space-8x);
  justify-content: space-between;
  align-items: baseline;
  height: 100%;
}

.company-info{
  display: grid;
  gap: var(--space-2x);
}
.company-info li {
  display: grid;
  grid-template-columns: max-content auto;
  gap: var(--space-1x);
  .icon{
    width: 36px;
    height: 25px;
    display: grid;
    place-content: center;
  }
}

.footer-info-item{
  display: grid;
}

.social-links {
  display: flex;
  align-items: center;
  gap: var(--space-4x);
}

@media(width >= 901px){
  .site-footer{
    .logo {
      grid-column: span 2;
    }
    .nav-global {
      grid-column: 4 / span 5;
    }
  }
  .footer-info, .footer-info-item{
    grid-column: span 4;
  }
  .social-links {
    grid-column: span 3;
  }
  .footer-info-item{
    grid-template-columns: subgrid;
  }
}

@media(width <= 900px){
  .site-footer{
    .logo {
      grid-column: var(--width-wrap);
    }
    .nav-global {
      grid-column: var(--width-wrap);
    }
  }
  .footer-info, .footer-info-item{
    grid-column: var(--width-wrap);
  }
  /* .social-links {
    grid-column: var(--width-wrap);
  } */
  .footer-info-item{
    gap: var(--space-2x);
  }
  .site-footer-top, .site-footer-bottom {
    .wrap{
      gap: var(--space-lg);
    }
  }
}

.shape{
  background-color: var(--color-container);
  border-radius: var(--border-radius-sm);
  padding: var(--space-2x);
  background: rgba(178, 150, 96, 1);
}

.with-shape {
  margin-inline: var(--wrap-gap);
  border-radius: var(--border-radius-md);
  .wrap{
    padding-block: var(--space-5x);
  }
}

@media (width <= 900px ){
  .with-shape{
    margin-inline: calc(var(--wrap-gap) / 4);
  }
}

.data-list{
  gap: var(--data-list-gap, var(--wrap-gap));
  grid-column: wrap-start / wrap-end;
  display: grid;
  grid-template-columns: var(--data-list-columns, subgrid);
}

.card-image{
  --section-layout-padding-block: 0;
  --data-list-columns: 1fr;
  --title-color: var(--color-on-container);
  height: 75vh;
  background: var(--color-accent) var(--card-image-background) center / cover no-repeat;
  border-radius: var(--border-radius-md);
  padding: var(--space-xl);
  display: grid;
  gap: var(--space-5x);
  align-items: end;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  container-name: card;
  text-decoration: none;
  &:after{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #1C262Acc, transparent);
    top: 0;
    left: 0;
  }
  .stack {
    position: relative;
    z-index: 1;
  }
}


@media (width <= 900px){
  .card-image{
    height: 65vh;
    padding: calc(var(--column-width) + var(--wrap-gap));
  }
}


/* .case-card-body{
  display: flex;
  flex-direction: column;
  gap: var(--space-5x);
  .case-title{
    font-size: var(--font-size-3xl);
    color: var(--color-on-container);
    font-family: 'Bricolage';
    font-weight: 700;
  }
  .case-paragraph{
    font-size: var(--font-size-md);
    color: var(--color-on-container);
    font-family: 'Bricolage';
  }
} */

.title{
  font-size: var(--title-font-size, var(--font-size-xl));
  font-family: var(--title-font-family, var(--font-family-accent));
  font-weight: var(--title-font-weight, bold);
  line-height: var(--title-line-height, 1.2);
  color: var(--title-color, var(--color-accent));
  text-transform: var(--title-transform);
  &.other{
    --title-color: var(--color-complementary);
  }
  span{
    color: var(--color-on-container);
    line-height: inherit;
  }
}

.subtitle{
  font-size: var(--subtitle-font-size, var(--font-size-md));
  font-family: var(--subtitle-font-family, var(--font-family-accent));
  font-weight: var(--subtitle-font-weight, bold);
  line-height: var(--subtitle-line-height, 1.2);
  color: var(--subtitle-color, var(--color-on-container));
  text-transform: var(--subtitle-transform);
    &.other{
    --title-color: var(--color-complementary);
  }
  span{
    color: var(--color-on-container);
    line-height: inherit;
  }
}

.paragraph, .description{
  font-size: var(--paragraph-font-size, var(--font-size-md));
  font-family: var(--paragraph-font-family, var(--font-family-accent));
  font-weight: var(--paragraph-font-weight, regular);
  line-height: var(--paragraph-line-height, 1.5);
  color: var(--paragraph-color, var(--color-on-container));
  text-transform: var(--paragraph-transform);
    &.other{
    --title-color: var(--color-complementary);
  }
  span{
    color: var(--color-accent);
    line-height: inherit;
  }
}

.list{
  list-style: initial;
  margin-inline-start: 20px;
  li{
    font-size: var(--list-font-size, var(--font-size-md));
    font-family: var(--list-font-family, var(--font-family-accent));
    font-weight: var(--list-font-weight, regular);
    line-height: var(--list-line-height, 1.5);
    color: var(--list-color, var(--color-on-container));
    text-transform: var(--list-transform);
      &.other{
      --title-color: var(--color-complementary);
    }
  }
}

.title-section{
  font-size: var(--title-section-font-size, var(--font-size-ultra));
  font-family: var(--title-section-font-family, var(--font-family-accent));
  font-weight: var(--title-section-font-weight, medium);
  line-height: var(--title-section-line-height, 0.8);
  color: var(--title-section-color, var(--color-accent));
  text-transform: var(--title-section-transform);
  text-indent: -0.08em;
    &.other{
    --title-color: var(--color-complementary);
  }
}

.pre-title{
  font-size: var(--pretitle-font-size, var(--font-size-sm));
  font-weight: var(--pretitle-font-weight, bold);
  color: var(--pretitle-color, var(--color-accent));
  text-transform: var(--pretitle-transform);
}

.banner-topo{
  height: 90vh;
  grid-column: start / end;
  background-attachment: fixed;
  display: grid;
  grid-template-columns: subgrid;
  padding-block: var(--space-lg);
  align-items: center;
  background: var(--color-container-low) var(--section-image) no-repeat center center / cover;
  translate: 0 -170px;
  margin-block-end: -170px;

  .thumbnail{
    grid-column: 3 / span 3;
    img{
      border-radius: var(--border-radius-md);
      object-fit: cover;
      aspect-ratio: 1 / 1;  
    }
  }

  > img{
    grid-column: wrap-start / wrap-end; 
  }
}

@media(width <= 900px){
  .banner-topo .thumbnail{
    display: none;
  }
}

#home-about {
  --data-list-columns: repeat(2, 1fr);
  --section-layout-padding-block: var(--space-3xl);
  --section-layout-align: start;
  --title-color: var(--color-on-container);
  --title-font-size: var(--font-size-2xl);
  --paragraph-color: var(--color-on-container);
  --title-transform: uppercase;
  .section-header{
    padding-block-end: var(--space-2x);
    border-bottom: 2px solid var(--color-on-container);
  }
}

@media(width >= 900px){
  #home-about {
    .section-header{
      margin-inline-end: calc(var(--column-width) + var(--wrap-gap));
    }
  }
}

#home-vision{
  --title-color: var(--color-on-container);
  --section-layout-padding-block: var(--space-3xl);
  --paragraph-font-size: var(--font-size-sm);
  --title-font-size: var(--font-size-md);
  --section-layout-row-gap: var(--space-3x);
}

/* ---------- Home Sevices -------- */
#home-services {
  --pretitle-color: var(--color-on-container);
  --title-section-color: var(--color-on-container);

  .card-image {
    --title-font-size-initial: var(--font-size-ultra); /* Tamanho inicial do título grande */
    --title-font-size-hover: var(--font-size-md); /* Tamanho do título no hover */
    --title-font-weight-normal: 300; /* Peso da fonte para o título normal */
    --title-font-weight-hover: 500; /* Peso da fonte para o título hover */
    --title-transform: uppercase;
    --title-line-height: 1;
    --title-color-initial: var(--color-accent); /* Laranja */
    --text-color-hover: white; /* Cor da descrição e do título no hover */
    --button-color: white;
    --button-icon-color: var(--color-primary);

    grid-column: span 4;
    position: relative;
    overflow: hidden;
    padding: var(--space-md);
    transition: all 0.4s ease-in-out;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
  }

  .card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    transition: background-color 0.4s ease-in-out;
    z-index: 1;
  }

  .card-image:hover::before {
    background-color: rgba(0, 0, 0, 0.7);
  }

  .card-inner-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    transition: justify-content 0.4s ease-in-out;
  }

  .top-button-wrapper {
    opacity: 0;
    height: 0;
    overflow: hidden;
    margin-bottom: 0;
    transition: opacity 0.4s ease-in-out, height 0.4s ease-in-out, margin-bottom 0.4s ease-in-out;
  }

  .icon-button {
    background-color: var(--button-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  .icon-button svg {
    color: var(--button-icon-color);
    transition: transform 0.3s ease;
  }

  .icon-button:hover {
    background-color: var(--color-light-gray);
    transform: translateY(-2px);
  }

  .text-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Alinha o título normal ao fundo */
    align-items: flex-start;
    width: 100%;
    height: auto; /* Permite que o wrapper se ajuste ao conteúdo */
    transition: justify-content 0.4s ease-in-out;
  }

  /* Título Grande (normal) */
  .card-image .title-normal {
    font-size: var(--title-font-size-initial);
    font-weight: var(--title-font-weight-normal);
    text-transform: var(--title-transform);
    line-height: var(--title-line-height);
    color: var(--title-color-initial); /* Laranja */
    margin: 0;
    opacity: 1; /* Visível no normal */
    transition: all 0.4s ease-in-out;
  }

  /* Título Menor (hover) - INICIALMENTE OCULTO */
  .card-image .title-hover {
    font-size: var(--title-font-size-hover);
    font-weight: var(--title-font-weight-hover); /* Mais encorpado como no print */
    text-transform: var(--title-transform);
    color: var(--title-color-initial); /* Continua laranja no hover */
    margin: 0;
    opacity: 0; /* Invisível no normal */
    height: 0; /* Ocupa 0 altura no normal */
    overflow: hidden; /* Esconde o texto */
    transition: all 0.4s ease-in-out;
  }

  /* Descrição (invisível no normal) */
  .card-image .description {
    color: var(--text-color-hover); /* Branco */
    font-size: var(--font-size-p);
    line-height: 1.5;
    opacity: 0; /* Invisível */
    max-height: 0; /* Ocupa 0 altura */
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 0;
    text-align: justify; /* ALINHAMENTO JUSTIFICADO CONFORME O PRINT */
    transition: opacity 0.4s ease-in-out, max-height 0.4s ease-in-out, margin-top 0.4s ease-in-out;
  }

  /* EFEITO HOVER */
  .card-image:hover .card-inner-content {
    justify-content: space-between; /* Distribui o espaço entre o botão e o texto */
  }

  .card-image:hover .top-button-wrapper {
    opacity: 1;
    height: 40px;
    margin-bottom: 20px;
  }

  .card-image:hover .text-content-wrapper {
    justify-content: flex-start; /* Alinha o título e descrição ao topo do wrapper */
  }

  /* Comportamento do Título no Hover */
  .card-image:hover .title-normal {
    opacity: 0; /* Desaparece o título grande normal */
    height: 0; /* Ocupa 0 altura */
    margin: 0; /* Garante que não tenha margem */
    overflow: hidden;
  }

  .card-image:hover .title-hover {
    opacity: 1; /* Torna o título do hover visível */
    height: auto; /* Ocupa sua altura real */
    margin-bottom: 10px; /* Espaço abaixo do título para a descrição */
  }

  /* Comportamento da Descrição no Hover */
  .card-image:hover .description {
    opacity: 1;
    max-height: 150px; /* Altura para o texto aparecer, ajuste se necessário */
    margin-top: 10px;
    margin-bottom: 0;
  }
}
/* ------------- */

#home-services2{
  --section-layout-row-gap: var(--space-3x);
  --title-color: var(--color-on-container);
  --title-transform: uppercase;
  --title-font-size: var(--font-size-md);
}

#home-clients{
  --section-layout-padding-block: var(--space-3xl);
  --section-layout-align: end;
  --title-color: var(--color-on-container);
  --title-transform: uppercase;
  --pretitle-color: var(--color-on-container);
  --pretitle-transform: uppercase;
  --data-list-columns: repeat(6, minmax(150px, 1fr));
  --section-layout-row-gap: var(--space-lg);
}

.client-logo{
  display: grid;
  place-content: center;
  border-radius: var(--border-radius-md);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-on-container);
  height: 140px;
}

.service-list{
  grid-column: var(--width-wrap);
}

.accordeon {
  /* grid-column: var(--width-wrap); */
  display: grid;
  /* grid-template-columns: subgrid; */
  border-block-end: 2px solid;
  margin-block-end: var(--space-sm);
  &[open] .arrow img{
    rotate: 90deg;
  }
  .arrow{
    display: grid;
    place-content: center;
    grid-column-end: -1;
    img{
      transition: var(--velocity-fast);
    }
  }
}


.accordeon-summary{
  display: grid;
  grid-template-columns: [wrap-start] repeat(3, 1fr) [middle] repeat(3, 1fr) [wrap-end];
  align-items: center;
  gap: var(--wrap-gap);
  cursor: pointer;
  padding-block-end: var(--space-sm);
  div{
    grid-column: span 4;
    font-size: var(--font-size-lg);
    text-transform: uppercase;
  }
}

@media (width >= 900px){
  .accordeon-summary div{
    grid-column: span 10;
  }
  .accordeon-content{
    ul{
      grid-column: 2 / span 4;
    }
    img{
      grid-column: 7 / span 6;
    }
  }
}



.accordeon-content {
  display: grid;
  grid-template-columns: [wrap-start] repeat(3, 1fr) [middle] repeat(3, 1fr)  [wrap-end];
  align-items: center;
  padding-block: var(--space-sm) var(--space-xl);
  gap: var(--wrap-gap);

  &.full{
    grid-template-columns: 1fr;
  }

  ul {
    grid-column: 1 / -1;
    list-style-image: url(../assets/images/icon-mini-arrow.png);
    display: grid;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    margin-inline-start: calc(var(--wrap-gap) * 2);
  }
  
  li {
    padding-inline-start: var(--wrap-gap);
    font-size: var(--font-size-md);
  }

  img{
    grid-column: 1 / -1;
  }
}

.archive {
  .accordeon-content {
    img{
      display: none;
    }
    
    ul{
      grid-column-end: -1;
    }
  }
}


@media (width >= 900px){
  .accordeon-summary,
  .accordeon-content {
    grid-template-columns: [wrap-start] repeat(6, 1fr) [middle] repeat(6, 1fr) [wrap-end];
  }
}


.item-number{
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  border-bottom: 2px solid var(--color-on-container);
  padding-block: var(--space-2x);

  .number {
    font-size: var(--font-size-xl);
    font-weight: 600;
  }

  .paragraph {
    text-transform: uppercase;
  }
}

@media( width >= 900px){
  .item-number{
    grid-column: span 6;
    margin-inline-end: calc(var(--column-width) + var(--wrap-gap));
    .number {
      grid-column: span 2;
    }
    .paragraph {
      grid-column: span 2;
    }
  }
}

#home-cases {
  --data-list-columns: 1fr;
  --data-list-gap: var(--space-xl);
  --title-font-weight: 200;
  --title-font-size: var(--font-size-ultra);
  --title-transform: uppercase;
  --title-line-height: 1;
  --subtitle-font-size: var(--font-size-xl);
  --subtitle-color: var(--color-accent);
  --subtitle-font-weight: regular;
  --section-footer-justify-items: center;
  --section-footer-align: center;

  /* .card-image{
    padding: calc(var(--column-width) + var(--wrap-wrap));
  } */

  .card-image{
    --paragraph-color: #FFE8BC;
    .stack{
      width: 50%;
    }
  }
}

  #newsletter{
    --section-layout-padding-block: var(--space-2xl);
  }

@media( width >= 900px){
  #home-cases {
    --section-footer-position: 5 / -5;
  }
  #newsletter{
    --section-layout-align: start;
    --section-header-position: wrap-start / span 2;
    --section-content-position: span 8;

    .section-content{
      display: grid;
      grid-template-columns: subgrid;
    }

    .form-newsletter {
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
      .paragraph{
        grid-column: span 5;
      }

      .input-newsletter{
        grid-column: 1 / -1;
      }
      input{
        font-size: var(--font-size-2xl);
      }
    }
  }
}

.form-newsletter {
  display: grid;
  gap: var(--space-xl);
  .wpcf7-spinner{
    display: none;
  }
  .input-newsletter form p{
    display: flex;
    gap: var(--wrap-gap);
    align-items: center;
    input{
      width: 100%;
      background: transparent;
      border: none;
      border-bottom: 2px solid;
      font-size: var(--font-size-md);
      color: var(--color-on-container);
      padding-block-end: var(--space-2x);
      &:focus{
        outline: none;
      }
    }
    input[type="submit"]{
      border-radius: 100%;
      background: var(--color-on-container) url(../assets/images/newsletter-arrow.png) center center no-repeat;;
      display: grid;
      place-content: center;
      width: 80px;
      height: 80px;
      aspect-ratio: 1 / 1;
      transition: 0.2s;
      color: transparent;
      &:hover{
        background-color: var(--color-on-container);
      }
    }
  }
  
}

.card {
  container-type: inline-size;
  container-name: card;
}

.card-inner{
  padding: 20px;
  background: var(--color-container);
  height: 200px;
  border-radius: 0.3em;
}

@container card (min-width: 401px) {
 .card-inner{
    border-radius: 1em;
 }
}
@container card (min-width: 999px) {
 .card-inner{
    border-radius: 2em;
 }
}



#home-blog {
  --section-layout-align: start;
  --section-content-position: wrap-start / -1;
  .section-header {
    justify-content: space-between;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}


.slide{
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.slide-track {
  display: flex;
  gap: var(--wrap-gap);

  /* hack para o último item não ficar grudado na direita*/
  &::after {
    content: "";
    flex: 0 0 0.1px;
  }

  .card-image {
    flex: 0 0 calc(var(--column-width) * 11 + var(--wrap-gap) * 10);
    scroll-snap-align: start;
    box-sizing: border-box;
  }

  .client-logo{
    flex: 0 0 calc(var(--column-width) * 6 + var(--wrap-gap) * 5);
  }
  
}

@media (width >= 901px){
  #home-blog{
    --section-header-position: wrap-start / span 2;
    --section-content-position: 4 / -1;
  }
  .slide{
    overflow-x: hidden;
  }
  .slide-track{
    .card-image {
      flex: 0 0 var(--six-column);
    }
    .client-logo{
      flex: 0 0 calc(var(--column-width) * 2 + var(--wrap-gap) * 1);
    }    

  }
}


.slide-nav {
  button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    transition: filter 0.3s ease;
    svg:hover, svg:focus{
      fill: #1C262A;
    }
  }
}

@media (width <= 900px){
  .slide-nav {
    display: none;
  }
}




.page-layout,
.single-layout{
  grid-column: start / end;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--page-layout-row-gap, var(--space-xl));
  padding-block-end: var(--page-layout-padding-block-end, var(--space-3xl));

  .banner-topo {
    height: 80vh;
    translate: 0 calc(var(--wrap-gap) * (-1));
    margin-block-end: 0;
  }

}



/* .page-layout{
  padding-block-start: var(--page-layout-padding-block-start, var(--space-3xl));
} */



/* Page cases */

#single-case{
  --title-section-color: var(--color-on-container);
  --title-section-transform: uppercase;
  --subtitle-font-size: var(--font-size-lg);
  --subtitle-color: var(--color-accent);
  --subtitle-transform: uppercase;
  --paragraph-font-size: var(--font-size-md);

  /* grid-column: start / end;
  display: grid;
  grid-template-columns: subgrid; */
  /* row-gap: var(--space-4xl);
  padding-block-end: var(--space-3xl); */

  .section-cover {
    border-radius: var(--case-cover-radius);
    overflow: hidden;
  }

  .full{
    img{
      height: 40vh;
      object-fit: cover;
    }
  }
  .quadro{
    --case-cover-radius: 10px;
  }

}

@media( width >= 900px){
  #single-case{
    .hero{
      --section-content-position: 9 / wrap-end;
    }

    .quadro {
      --section-content-position: 8 / span 6;
      --section-image-position: 3 / span 4;
      --case-cover-radius: 30px;
      &.invert{
        --section-content-position: 2 / span 6;
        --section-image-position: 9 / span 4;
      }
    }
    .full{
      --case-cover-radius: 0 30px 30px 0;
      img{
        height: 70vh;
      }
      &.invert{
        --case-cover-radius: 30px 0 0 30px;
        --section-content-position: wrap-start / 7;
      }
    }
  }
}

#case-cta{
  
  &.hero{
    --section-layout-align: start;
  }
  .section-header{
    border-bottom: 2px solid;
    padding-block-end: var(--space-2x);
  }
  .section-footer{
    display: flex;
    justify-content: center;
  }
}

@media( width >= 900px){
  #case-cta{
    &.hero{
      --section-content-position: middle / -4;
      --section-header-position: 4 / 7;
    }
  }
}

#case-carossel {
  --data-list-columns: 1fr;
  --data-list-gap: var(--space-xl);
  --section-layout-padding-block: 0;
}

/* Page contact */
.form-group {
  margin-bottom: 1rem;
}

.bw8-custom-contact-form {
  --button-background-color: var(--color-on-container);
  --button-color: #f9ece0;
  --button-font-weight: 400;
  --button-hover-background-color: var(--color-container);
  --button-hover-color: var(--color-on-container);
  --button-border: 2px solid var(--color-on-container);
  --button-hover-border-color: var(--color-on-container);

  input:not([type="submit"]),
  textarea {
    padding: 0.75rem 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    background: #fff;
    box-sizing: border-box;
  }

  input:not([type='checkbox']):not([type='radio']):not([type="submit"]) {
    width: 100%;
  }
  
  textarea {
    width: 100%;
    resize: vertical;
  }

  .button-wrapper{
    display: flex;
    justify-content: center;
  }

  .wpcf7-list-item{
    margin: 0;
  }

}


.checkbox-group {
  display: flex;
  align-items: flex-start;
  font-size: 0.85rem;
  color: #333;
}

.checkbox-group input {
  margin-right: 0.5rem;
  margin-top: 0.25rem;
}

/* .button {
  padding: 0.75rem 1.5rem;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
} */

#contact-form{
  --section-layout-align: start;
}

@media(width >= 900px) {
  #contact-form{
    --section-header-position: wrap-start / 7;
  }
}

#contact-info{
  --section-layout-align:start
}

.contact-header {
  display: flex;
  gap: 40px;
}
@media (max-width: 900px) {
  .contact-header {
    flex-direction: column;
    gap: 20px;
  }
}


.contact-info {
  background-color: #f5e9df;
  padding: 1rem;
  border-radius: 8px;
  font-family: 'IBM Plex Sans', sans-serif;
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.icon-small {
  width: 18px;
  height: 18px;
  margin-right: 0.6rem;
  stroke: #1a1a1a;
  flex-shrink: 0;
}

.contact-item span {
  font-size: 1rem;
}

.gold-divider {
  height: 2px;
  /* width: 80%;  */
  background-color: #B29660;
  margin: 8px 0; 
}

.description-contact{
  font-size: 35px; 
  margin-top: 0.5rem;
}

#contact-tabalhar {
  border-radius: 20px;
  padding: 63px;
  color: #000;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.Title-Contact {
  font-size: 76px;
  margin: 0;
}
@media (max-width: 900px) {
  .Title-Contact {
    font-size: 48px;
  }
}

.header-internal{
  grid-column: var(--width-full);
  display: grid;
  grid-template-columns: subgrid;
  .title{
    grid-column: var(--width-wrap);
  }
}

.section-cta{
  --section-layout-padding-block: 32px;
  --section-content-justify-items: center;
  --title-font-size: var(--font-size-xl);
  --title-color: var(--color-on-container);
  --paragraph-font-size: var(--font-size-md);
  --stack-align: center;
  --stack-justify-items: center;
  --section-content-position: 2 / -2;
}

@media(width >= 900px){
  .section-cta{
    --section-layout-padding-block: 132px;
    --section-content-position: 3 / -3;
  }
}



.single-vaga .data-list-cultura div:nth-child(n+5) {
  display: none;
}

.tag-list {
  display: flex;
  gap: 8px;
}

.tag-item {
  background: #B29660;
  color: #FFE8BC;
  display: inline-block;
  align-items: center;
  padding: 12px 16px 8px 16px;
  line-height: 0.8;
  border-radius: 50rem;
  text-transform: uppercase;
  font-weight: 100;
  &:not(:first-child) {
    margin-inline-start: -20px;
  }
  &:nth-child(odd) {
      background: #1C262A;
  }
}

.img-rounded{
  border-radius: 30px;
}

#manifesto-hero{
  --title-font-size: var(--font-size-lg);
  --section-layout-align: start;
  --title-font-weight: 100;
  --title-transform: uppercase;
  --section-layout-padding-block: 132px 0;
}

#manifesto-intro{
  --section-cover-border-radius: 30px;
}

#manifesto-banner-akmos{
  --section-cover-border-radius: 30px;
}

#manifesto-acreditamos{
  --section-cover-border-radius: 30px;
}

#manifesto-essencia {
  --title-font-size: var(--font-size-2xl);
  --title-font-weight: 400;
  --subtitle-line-height: 1.5;
  --subtitle-transform: uppercase;
  .section-header {
    border-block-end: 1px solid var(--color-accent);
    padding-block-end: var(--space-2x);
  }
}

#manifesto-acreditamos-2{
  --title-font-size: var(--font-size-lg);
}



#manifesto-educacao{
  --section-layout-align: end;

  --title-font-weight: 100;
  --title-line-height: 1;
  background: url(../assets/images/maniesto-banner-educacao.png) no-repeat center center / cover;
  height: 80vh;
  text-decoration: none;
  transition: 0.2s;
  .title span{
    color: var(--color-container);
    line-height: inherit;
  }
  &:hover{
    opacity: 0.5;
  }
}

#manifesto-antes {
  --section-layout-padding-block: 50px !important;
}

#manifesto-cta{
  --pretitle-transform: uppercase;
  --title-font-size: var(--font-size-2xl);
  --title-line-height: 1;
  --title-font-weight: 300;
}

@media(width > 900px){
  #manifesto-educacao {
    --title-font-size: var(--font-size-3xl);
  }
  #manifesto-hero{
    --title-font-size: var(--font-size-3xl);
  }
  #manifesto-essencia {
    --data-list-columns: repeat(2, 1fr);
  }
  #manifesto-cta{
    --section-header-position: wrap-start / 6;
  }
  #manifesto-acreditamos-2{
    --section-header-position: wrap-start / 7;
  }
  body.blog{
    --data-list-columns: repeat(3, 1fr);
  }
}

@media(width <= 900px){
  body.blog{
    --data-list-columns: repeat(2, 1fr);
  }
}

.card-instrutor{
  grid-column: var(--width-wrap);
  display: grid;
  grid-template-columns: subgrid;
}
.card-instrutor-content{
  grid-column: var(--width-wrap);
}
.card-instrutor-image{
  grid-column: var(--width-wrap);
  img{
    border-radius: 30px;
    width: 100%;
  }
}

.card-instrutor-prova {
  display: grid;
  gap: 32px;
  margin-block: 32px;
}

@media(width > 900px){
  .card-instrutor-image{
    grid-column: wrap-start / 5;
  }
  .card-instrutor-content{
    grid-column: 6 / wrap-end;
  }
  .card-instrutor-prova {
    grid-template-columns: repeat(3, 1fr);
  }
}


.team-card {
  --title-font-size: var(--font-size-md);
  flex: 0 0 var(--card-width);
  scroll-snap-align: start;
  transition: transform 0.3s ease;
  display: grid;
  gap: var(--space-4x);
  img {
    width: 100%;
    object-fit: contain; /* mostra a imagem inteira sem cortar */
    border-radius: 20px 20px 0 0;
    display: block;
  }
}

.wpcf7-response-output {
  background: var(--color-accent) !important;
  padding: 30px !important;
  margin: var(--space-5x) 0 0 !important;
  border-color: var(--color-on-container) !important;
  color: var(--color-on-container) !important;
}


.bw8-credit{
  display: flex; 
  gap: var(--space-1x); 
  align-items: center;
  font-size: var(--font-size-xs);
  svg{
    width: 36px;
    fill: var(--color-on-container);
  }
}