/* Marketing digital: página resumo (/marketing-digital) e landing page (/lp/marketing-digital).
   O cabeçalho, o rodapé e o contato das landing pages também servem à Dizit Vitrine (vitrine.css). */

/* Cabeçalho e rodapé da landing page */
.lp-header{
  height:84px;
  background:white;
  border-bottom:1px solid var(--line)
}
.lp-header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.lp-header-contact{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:650;
  color:var(--ink)
}
.lp-header-contact .icon{
  color:var(--green-ink)
}
.lp-header-contact:hover span{
  text-decoration:underline
}
.lp-footer{
  border-top:1px solid var(--line);
  padding-block:26px;
  font-size:13px;
  color:var(--muted)
}
.lp-footer-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 28px
}
.lp-footer a:hover{
  text-decoration:underline
}

/* Abertura da landing page */
.mk-hero{
  padding-bottom:var(--space-section)
}
.mk-hero-copy{
  text-align:center;
  padding-block:76px 48px
}
.mk-hero-copy h1{
  max-width:980px;
  margin-inline:auto
}
.mk-hero-copy>p{
  font-size:18px;
  line-height:1.6;
  max-width:660px;
  margin:0 auto 32px
}

/* Vitrine de peças demonstrativas */
.mk-showcase .mk-tabs{
  justify-content:center
}
.mk-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  grid-template-rows:auto 1fr;
  gap:26px 34px;
  align-items:start
}
.mk-stage.is-entering{
  animation:mk-reveal .5s var(--ease)
}
@keyframes mk-reveal{
  from{
    opacity:.6;
    clip-path:inset(0 0 6% 0)
  }
  to{
    opacity:1;
    clip-path:inset(0)
  }
}
.mk-brand-moda{
  --b-main:#0f5b4a;
  --b-soft:#f4d9d0;
  --b-ink:#0b2e27
}
.mk-brand-clinica{
  --b-main:#5a3fa0;
  --b-soft:#ece6f7;
  --b-ink:#2a1d52
}
.mk-brand-reformas{
  --b-main:#1f2428;
  --b-soft:#f2c230;
  --b-ink:#1f2428
}
.mk-piece{
  margin:0;
  min-width:0
}
.mk-browser{
  grid-column:1;
  grid-row:1/3;
  border-radius:var(--radius);
  overflow:hidden;
  background:white;
  box-shadow:var(--elevation)
}
/* Site completo da marca: a página rola dentro da janela quando o painel aparece e no hover. */
.mk-site{
  aspect-ratio:16/10;
  overflow:hidden;
  background:white
}
.mk-site img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 0
}
.mk-stage:not([hidden]) .mk-site img{
  animation:mk-site-scroll 10s 1s cubic-bezier(.45,0,.4,1) 2 alternate both
}
.mk-browser:hover .mk-site img{
  animation-play-state:paused
}
@keyframes mk-site-scroll{
  to{
    object-position:50% 100%
  }
}
.mk-post-art img,.mk-art img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.mk-art img{
  object-position:50% 0;
  opacity:0;
  transition:opacity .45s var(--ease)
}
.mk-art[data-format="post"] img[data-for="post"],.mk-art[data-format="story"] img[data-for="story"],.mk-art[data-format="anuncio"] img[data-for="anuncio"]{
  opacity:1
}
.mk-post-art:after,.mk-art:after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#0b1a17cc 0%,#0b1a1766 34%,#0b1a1700 60%)
}
.mk-post-art span,.mk-art span{
  z-index:1
}
.mk-phone{
  grid-column:2;
  grid-row:1;
  background:#0f1a24;
  border-radius:34px;
  padding:9px;
  box-shadow:var(--elevation)
}
.mk-phone-screen{
  background:white;
  border-radius:26px;
  overflow:hidden;
  padding-bottom:16px
}
.mk-post-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:16px 14px 10px;
  font-size:12px;
  color:var(--ink)
}
.mk-avatar{
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--b-main);
  color:white;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:700
}
.mk-brand-reformas .mk-avatar{
  color:var(--b-soft)
}
.mk-post-art{
  position:relative;
  aspect-ratio:4/5;
  background:var(--b-main);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:18px
}
.mk-post-title{
  position:relative;
  font-size:34px;
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1;
  color:var(--b-soft)
}
.mk-post-subtitle{
  position:relative;
  margin-top:6px;
  font-size:13px;
  font-weight:600;
  color:white
}
.mk-post-caption{
  margin:0;
  padding:12px 14px 0;
  font-size:11px;
  line-height:1.55;
  color:var(--muted)
}
.mk-post-caption strong{
  color:var(--ink)
}
.mk-ad{
  grid-column:2;
  grid-row:2;
  background:white;
  border-radius:var(--radius);
  padding:18px 20px;
  box-shadow:var(--elevation)
}
.mk-ad-label{
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-bottom:6px
}
.mk-ad-title{
  font-size:15px;
  font-weight:650;
  line-height:1.35;
  color:var(--action);
  margin:0 0 6px
}
.mk-ad-text{
  font-size:12px;
  line-height:1.55;
  margin:0
}
.mk-showcase .demo-disclaimer{
  margin-top:34px
}

/* Duas formas */
.mk-ways>h2{
  margin-bottom:48px
}
.mk-ways-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px)
}
.mk-way{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  border-top:1px solid #ced9e5;
  padding-top:32px
}
.mk-way h3{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  font-size:30px;
  margin-bottom:8px
}
.mk-way-meta{
  font-size:14px;
  font-weight:650;
  color:var(--green-ink);
  margin-bottom:16px
}
.mk-soon{
  font-size:12px;
  font-weight:700;
  letter-spacing:0;
  line-height:1;
  padding:6px 10px;
  border-radius:99px;
  background:var(--blue-soft);
  color:var(--action)
}
.mk-checklist{
  width:100%;
  margin:6px 0 0
}
.mk-checklist li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-size:15px;
  line-height:1.5
}
.mk-checklist .icon{
  width:20px;
  height:20px;
  color:var(--green-ink);
  margin-top:1px
}
.mk-way-note{
  font-size:15px;
  margin:22px 0 28px
}
.mk-way>.button{
  margin-top:auto
}
.mk-way>.demo-disclaimer{
  margin:0 0 28px;
  text-align:left
}
.mk-ways-summary .mk-way>p:last-child{
  margin-bottom:0
}
.mk-ways-summary>.text-link{
  margin-top:40px
}

/* Demonstração do pedido de arte */
.mk-request{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  background:var(--surface);
  border-radius:var(--radius);
  padding:22px;
  margin:4px 0 14px
}
.mk-request-heading{
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  margin:0 0 14px
}
.mk-formats{
  border:0;
  padding:0;
  margin:0 0 14px;
  display:flex;
  flex-wrap:wrap;
  gap:6px
}
.mk-formats legend{
  font-size:11px;
  font-weight:650;
  color:var(--muted);
  padding:0;
  margin-bottom:6px
}
.mk-formats label{
  position:relative;
  cursor:pointer
}
.mk-formats input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px
}
.mk-formats span{
  display:block;
  padding:7px 13px;
  border:1px solid #c5d2e0;
  border-radius:6px;
  background:white;
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  transition:border-color .2s,background .2s,color .2s
}
.mk-formats label:hover span{
  border-color:#879fb8
}
.mk-formats input:checked+span{
  border-color:var(--action);
  background:#edf4ff;
  color:var(--action)
}
.mk-formats input:focus-visible+span{
  outline:3px solid var(--action);
  outline-offset:3px
}
.mk-request-fields{
  display:grid;
  gap:8px;
  margin:0
}
.mk-request-fields>div{
  background:white;
  border:1px solid var(--line);
  border-radius:7px;
  padding:8px 11px
}
.mk-request-fields dt{
  font-size:10px;
  font-weight:650;
  color:var(--muted)
}
.mk-request-fields dd{
  margin:0;
  font-size:13px;
  color:var(--ink)
}
.mk-swatches{
  display:flex;
  gap:5px;
  padding-top:3px
}
.mk-swatches i{
  width:16px;
  height:16px;
  border-radius:50%;
  background:#0f5b4a
}
.mk-swatches i:nth-child(2){
  background:#f4d9d0
}
.mk-swatches i:nth-child(3){
  background:white;
  border:1px solid #c5d2e0
}
.mk-request-preview{
  contain:layout paint;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:340px
}
.mk-art{
  --w:220px;
  --h:275px;
  position:relative;
  width:min(var(--w),100%);
  height:var(--h);
  border-radius:10px;
  background:#0f5b4a;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  padding:16px;
  box-shadow:var(--elevation);
  transition:width .55s var(--ease),height .55s var(--ease)
}
.mk-art[data-format="story"]{
  --w:172px;
  --h:306px
}
.mk-art[data-format="anuncio"]{
  --w:300px;
  --h:157px
}
.mk-art-brand{
  position:absolute;
  top:14px;
  left:16px;
  font-size:11px;
  font-weight:700;
  color:white;
  text-shadow:0 1px 3px #0b1a1799
}
.mk-art-title{
  position:relative;
  font-size:28px;
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1;
  color:#f4d9d0;
  transition:font-size .55s var(--ease)
}
.mk-art[data-format="story"] .mk-art-title{
  font-size:25px
}
.mk-art[data-format="anuncio"] .mk-art-title{
  font-size:21px;
  max-width:62%
}
.mk-art-cta{
  position:relative;
  margin-top:10px;
  padding:6px 10px;
  border-radius:5px;
  background:#f4d9d0;
  color:#0b2e27;
  font-size:11px;
  font-weight:700
}
.mk-request-status{
  font-size:12px;
  margin:0
}

/* Etapas */
.mk-steps{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:clamp(40px,7vw,100px)
}
.mk-steps-intro h2{
  margin-bottom:20px
}
.mk-step-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:38px 44px
}
.mk-step-list li{
  display:flex;
  gap:18px;
  align-items:flex-start
}
.mk-step-number{
  min-width:28px;
  font-size:30px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--brand-blue)
}
.mk-step-list h3{
  font-size:20px;
  margin-bottom:8px
}
.mk-step-list p{
  font-size:15px;
  line-height:1.6
}

/* Contato da landing page */
.mk-contact{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(40px,6vw,80px);
  align-items:start
}
.mk-contact-intro h2{
  margin-bottom:20px
}
.mk-contact-intro>p{
  font-size:17px;
  max-width:440px
}
.profile-field.is-three{
  flex-wrap:wrap
}
.profile-field.is-three>label{
  flex:1 1 150px
}

/* Página resumo */
.mk-summary-showcase{
  padding-bottom:20px
}

@media(max-width:1100px){
  .mk-stage{
    grid-template-columns:minmax(0,1fr) 220px
  }
  .mk-steps{
    grid-template-columns:1fr
  }
  .mk-request{
    grid-template-columns:1fr
  }
  .mk-request-preview{
    min-height:330px
  }
}
@media(max-width:800px){
  .lp-header{
    height:72px
  }
  .mk-hero-copy{
    padding-block:48px 36px
  }
  .mk-stage{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto
  }
  .mk-browser{
    grid-column:1/-1;
    grid-row:1
  }
  .mk-phone{
    grid-column:1;
    grid-row:2
  }
  .mk-ad{
    grid-column:2;
    grid-row:2;
    align-self:center
  }
  .mk-ways-grid,.mk-contact{
    grid-template-columns:1fr
  }
  .mk-showcase .mk-tabs{
    overflow-x:auto;
    justify-content:flex-start;
    scrollbar-width:none
  }
  .mk-showcase .mk-tabs button{
    flex-shrink:0
  }
}
@media(max-width:520px){
  .lp-header-contact span{
    display:none
  }
  .lp-header-contact .icon{
    width:28px;
    height:28px
  }
  .mk-hero-copy>p{
    font-size:16px
  }
  .mk-hero .hero-actions{
    flex-direction:column;
    gap:18px
  }
  .mk-stage{
    grid-template-columns:1fr
  }
  .mk-phone{
    grid-column:1;
    grid-row:2;
    width:min(270px,100%);
    justify-self:center
  }
  .mk-ad{
    grid-column:1;
    grid-row:3
  }
  .mk-way h3{
    font-size:25px
  }
  .mk-step-list{
    grid-template-columns:1fr
  }
  .mk-request{
    padding:16px
  }
}
@media(prefers-reduced-motion:reduce){
  .mk-stage.is-entering{
    animation:none
  }
  .mk-stage:not([hidden]) .mk-site img{
    animation:none;
    height:auto
  }
  .mk-site{
    overflow-y:auto
  }
  .mk-art,.mk-art-title,.mk-art img{
    transition:none
  }
}