/* ══════════════════════════════════════
   CORPO DA PÁGINA
══════════════════════════════════════ */
body, html {
	background-color: #c9ae91;
}
.postid-877 .iap-topbar {
    background-color: rgba(63,102,131,.8);
}
.postid-877 .iap-hamburger span {
    width: 10px;
    height: 10px;
	border-radius: 50%;
    background-color: #142840;
    display: flex;
	transition: all .4s;
}
.postid-877 .iap-hamburger span:hover {
	background-color: #a35a42;
}
.postid-877 .iap-dot {
    color: #a35a42;
    font-size: 2.4em;
    line-height: 1;
    vertical-align: baseline;
  }
.postid-877 .iap-cta-top {
    background: #142840;
    color: #a35a42;
}
.postid-877 .iap-cta-top:hover {
    background: #a35a42;
    color: #142840;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.postid-877 .iap-logo {
    content: url('https://media.iappropaganda.com.br/Imagens/iapstudio/Cases/butia/logo-IAP-Studio-butia.png');
    height: 30px;
    width: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}


.postid-877 .single-share p {
    color: #15293f;
}
.postid-877  .case-related h2 {
    color: #15293f;
}
/*
.postid-877  .case-related .qs-title {
    color: #f7f4f4;
}*/

/* ══════════════════════════════════════
   INTRODUCTION
══════════════════════════════════════ */

.case-intro{
    margin:80px auto 10px;
}


/* HEADER */

.case-intro__header{
    max-width:980px;
    margin:0 auto 20px;
    text-align:center;
}

.case-intro__client{
    margin:0;
    font-family:"Abril Display", serif;
    font-size:.80rem;
    font-weight:700;
    text-transform:lowercase;
    font-style: italic;
    color:#15293f;
}

.case-intro__title{
    margin:2px 0;
    font-size:clamp(2.8rem,6vw,5.8rem);
    font-weight:100;
    line-height:.98;
    -webkit-text-stroke: .8px #c9ae91;
    color:#15293f;
     text-transform: uppercase;
}

.case-intro__subtitle{
    max-width:760px;
    margin:0 auto;
    font-family: "Abril display", serif;
    font-size:1.05rem;
    font-weight:300;
    line-height:1.8;
    color:#15293f;
}


/* VIDEO */

.qs-hero-cases {
    margin: 20px 20px 0 20px;
    overflow: hidden;
    position: relative;
    height: 70vh;
    min-height: 420px;
}

.qs-hero__video-cases {
  width: 100%;
  height: 100%;
  object-fit: cover;
	object-position: center 50% !important;
  display: block;
}
/* The two curtain halves */
  .qs-hero-cases::before,
  .qs-hero-cases::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background: #c9ae91;
    z-index: 2;
    transition: transform 1.1s cubic-bezier(0.77, 0, 0.18, 1);
  }
  .qs-hero-cases::before { left: 0; transform: translateX(0); }
  .qs-hero-cases::after  { right: 0; transform: translateX(0); }
 
  .qs-hero-cases.revealed::before { transform: translateX(-100%); }
  .qs-hero-cases.revealed::after  { transform: translateX(100%); }
 
  .qs-hero-cases.revealed img {
    width: 100%; 
	height: 100%;
    object-fit: cover;
	object-position: center 30% !important;
    display: block;
  }


/* CONTENT */

.case-intro__content{
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:90px;
    padding: 20px;
    align-items:start;
}


/* SERVICES */

.case-intro__services ul{
    margin:0;
    padding:0;
    list-style:none;
}
.services-title {
    margin: 0px 0px 10px 0px;
    font-size:14px;
    font-weight:200;
    line-height:.98;
    color:#15293f;
}
.case-intro__services li{
    margin-bottom:10px;
    font-family:"Abril Display", serif;
    font-size:.85rem;
    font-weight:700;
    text-transform:lowercase;
    font-style: italic;
    color:#15293f;
}


/* DESCRIPTION */

.case-intro__description{
    max-width:760px;
}

.case-intro__description p{
    margin: 5px 0 28px;
    line-height: 1.4em;
    font-size: .9rem;
    color:#15293f;
}

.case-intro__description p:last-child{
    margin-bottom:0;
}


/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width:768px){
    .case-intro{
        width:calc(100% - 32px);
        margin:80px auto 10px;
    }
    .case-intro__header{
        margin-bottom:16px;
    }
    .case-intro__title{
        margin:18px 0;
        font-size:2.4rem;
        line-height:1.05;
        -webkit-text-stroke: .3px #f8f9fa;
    }

    .case-intro__subtitle{
        font-size:.95rem;
        line-height:1.7;
    }

    .qs-hero-cases { 
        height: 55vw; 
        min-height: 260px; 
        width: 100%;
        margin:0 auto;
    }
   .case-intro__content{
       display: flex;
    flex-direction: column-reverse;
   }
    .case-intro__description p{
        font-size:.95rem;
        margin-bottom: 0px;
        line-height: 1.4em;
    }
    .case-intro__services li{
        margin-bottom:8px;
}
}
/* ══════════════════════════════════════
   ELEMENTOS REPETIDOS
══════════════════════════════════════ */
.cases-header{
    max-width:900px;
    margin:0 auto 20px;
    text-align:center;
}

.cases-eyebrow{
    margin:0;
    font-family:"Abril Display", serif;
    font-size:.80rem;
    font-weight:700;
    text-transform:lowercase;
    font-style: italic;
    color:#15293f;
}

.cases-title{
    margin:20px 0;
    font-size:clamp(1.8rem,4vw,3.8rem);
    font-weight:100;
    line-height:.98;
    -webkit-text-stroke: .1px #524d47;
    color:#15293f;
    text-transform: uppercase;
}

.cases-subtitle{
    margin:0;
    font-size:1.05rem;
    font-weight:300;
    line-height:1.8;
    color:#15293f;
}

/* TEXT */

.cases-content{
    max-width:700px;
    margin:0 auto 20px;

}

.cases-content p{
    margin:0 0 5px;
    font-size: .9rem;
    color:#15293f;
    line-height: 1.4em;
    text-align: left;
}

.cases-content strong{
    font-style: italic;
    font-weight:700;
    font-family:"Abril Display", serif;
    margin-top: 24px;
    font-size: 16px;
}
.cases-content p:last-child{
    margin-bottom:0;
}
@media (max-width: 768px){
    .cases-content{
        margin-bottom: 0;
}}
/* ══════════════════════════════════════
   THE CHALLENGE
══════════════════════════════════════ */

.case-challenge{
margin:120px auto 10px;
}

/* IMAGES */

.case-challenge__images{
    display:flex;
    flex-direction:column;
    gap:8px;

}

.case-challenge__images img{
width: calc(100vw - 40px);
  max-width: calc(100vw - 40px);

  margin-left: calc(50% - 50vw + 20px);
  margin-right: calc(50% - 50vw + 20px);

  display: block;
  height: auto !important;
}


/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width:768px){
    .case-challenge{
        width:calc(100% - 32px);
        margin:100px auto;
    }
    .case-challenge__header{
        margin-bottom:56px;
    }
    .case-challenge__title{
        font-size:2.4rem;
    }
    .case-challenge__subtitle{
        font-size:.95rem;
    }
    .case-challenge__content{
        margin-bottom:64px;
    }
    .case-challenge__content p{
        font-size:.9rem;
        line-height:1.8;
    }
    .case-challenge__images{
        gap:8px;
    }

}



/* ══════════════════════════════════════
   BRAND IDENTITY — INTRO
══════════════════════════════════════ */

.case-brand-intro{
    margin:100px auto 20px;
}

/* HERO IMAGE */
.case-brand-intro__hero{
    margin:20px 0 20px;
}

.case-brand-intro__hero img{
width: calc(100vw - 40px);
  max-width: calc(100vw - 40px);
  height: 100px;
  margin-left: calc(50% - 50vw + 20px);
  margin-right: calc(50% - 50vw + 20px);

  display: block;
  height: auto !important;
}


/* VIDEO */

.case-brand-intro__video{
    margin-top:20px;
}

.case-brand-intro__video video{
width: calc(100vw - 40px);
  max-width: calc(100vw - 40px);

  margin-left: calc(50% - 50vw + 20px);
  margin-right: calc(50% - 50vw + 20px);

  display: block;
  height: auto !important;
}


/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width:768px){
    .case-brand-intro{
        width:calc(100% - 32px);
        margin:10px auto 10px;
    }
    .case-brand-intro__video{
        margin-top:8px;
    }

}
/* ══════════════════════════════════════
   LOGO
══════════════════════════════════════ */

.case-logo{
    margin:20px auto 10px;
    padding: 5px 10px 5px 10px;
}
.case-logo__image{
width: calc(100vw - 40px);
  max-width: calc(100vw - 40px);

  margin-left: calc(50% - 50vw + 20px);
  margin-right: calc(50% - 50vw + 20px);

  display: block;
  height: auto !important;

}

.case-logo__variations{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:20px;
}
.case-logo__variations img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.case-logo__color{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    margin-top:20px;
}
.case-logo__color img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width:768px){
    .case-logo{
        margin:1px auto 10px;
    }

    .case-logo__image{
        margin:8px auto 8px;
 
    }
    .case-logo__variations {
        grid-template-columns:1fr;
    }
    .case-logo__color {
        grid-template-columns:1fr;
    }
}
/* ══════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════ */

.case-typography{
    margin:60px auto 10px;
    padding: 5px 10px 5px 10px;
}

.case-typography__playfair{
    font-family:"Playfair Display", serif !important;
    font-size: 12px;
}

.case-typography__poppins{
    font-family:"Poppins", sans-serif !important;
    font-size: 12px;
}

.case-typography__gallery{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
}

.case-typography__gallery img{
    display:block;
    width:100%;
    height:auto;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width:768px){
    .case-typography{
        width:calc(100% - 32px);
        margin:100px auto;
    }
    .case-typography__header{
        margin-bottom:48px;
    }
   .case-typography__playfair{
    font-family:"Playfair Display", serif;
}

.case-typography__poppins{
    font-family:"Poppins", sans-serif;
}

    .case-typography__content{

        margin-bottom:56px;

    }

    .case-typography__content h2{

        margin:48px 0 20px;

    }

    .case-typography__content p{

        font-size:.95rem;
        line-height:1.8;

    }

    .case-typography__gallery{

        grid-template-columns:1fr;
        gap:24px;

    }

}
/* ══════════════════════════════════════
   PATTERNS
══════════════════════════════════════ */

.case-patterns {
    margin: 20px auto 5px;
    padding: 5px 10px;
}


/* ──────────────────────────────────────
   HEADER
────────────────────────────────────── */

.case-patterns .cases-header {
    margin-bottom: 48px;
}


/* ──────────────────────────────────────
   CONTENT
────────────────────────────────────── */

.case-patterns .cases-content {
    margin-bottom: 56px;
}


/* ──────────────────────────────────────
   VÍDEO PRINCIPAL
────────────────────────────────────── */

.case-patterns__video {
    width: 100%;
    margin-bottom: 2px;
}

.case-patterns__video video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
}


/* ──────────────────────────────────────
   IMAGENS
────────────────────────────────────── */

.case-patterns__images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.case-patterns__images img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
}


/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width: 768px) {

    .case-patterns {
        width: calc(100% - 32px);
        margin: 100px auto;
        padding: 0;
    }

    .case-patterns .cases-header {
        margin-bottom: 48px;
    }

    .case-patterns .cases-title {
        font-size: 2.4rem;
        line-height: 1.05;
    }

    .case-patterns .cases-content {
        margin-bottom: 56px;
    }

    .case-patterns .cases-content p {
        font-size: .95rem;
        line-height: 1.8;
    }

    .case-patterns__video {
        margin-bottom: 24px;
    }

    .case-patterns__images {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .case-patterns__images img {
        aspect-ratio: 16 / 9;
    }

}

/* ══════════════════════════════════════
   BRAND APPLICATIONS GALLERY
══════════════════════════════════════ */

.case-gallery{
    max-width:1600px;
    margin:auto;
    padding:20px;
}

.case-gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:280px;
    gap:2px;
}

.gallery-item{
    overflow:hidden;
}

.gallery-item img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:.5s;

}

.gallery-item:hover img{

    transform:scale(1.03);

}
.gallery-item.tall{

    grid-row:span 2;

}
.gallery-item.wide{

    grid-column:span 2;

}
.gallery-item.large{

    grid-column:span 2;
    grid-row:span 2;

}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:900px){

.case-gallery-grid{

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

    grid-auto-rows:150px;

}

}


@media(max-width:600px){

.case-gallery-grid{

    grid-template-columns:1fr;

    grid-auto-rows:auto;

}

.gallery-item,
.gallery-item.large,
.gallery-item.tall,
.gallery-item.wide{

    grid-column:auto;
    grid-row:auto;

}

.gallery-item img{

    height:auto;

}

}

/* ══════════════════════════════════════
   JOURNEY
══════════════════════════════════════ */

.case-journey{
    margin:50px auto 10px;
    padding: 5px 10px 5px 10px;
}
.case-journey__header{
    margin-bottom:6px;
    text-align:center;
}
.case-journey__content{
    max-width:460px;
    margin:0 auto;
    text-align:center;
}
.case-journey__content p{
    margin:0 0 28px;
    font-size:.9rem;
    color:#15293f;
}
.case-journey__content p:last-child{
    margin-bottom:0;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width:768px){
    .case-journey{
        width:calc(100% - 32px);
        margin:120px auto;
    }
    .case-journey__header{
        margin-bottom:40px;
    }
   .case-journey__content p{
        font-size:.9rem;
    }
}