/* MACRI.I CREATIVE — SEÇÃO DE CLIENTES (arquivo novo)
   Todas as classes usam o prefixo "cl-" e não alteram nenhum estilo existente.
   Paleta: --wine #3E0909 · --brown #522A1D · --rust #943811 · --olive #726841 · --sand #D1C5B2 · --cream #F0EAE1 */

/* ============ PARTE 1 — LOGOS (sobre o fundo areia) ============ */
.cl-rows{
  --cl-edge:clamp(28px,7vw,140px);
  margin:clamp(40px,5vw,72px) calc(-1 * var(--cl-edge)) 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  position:relative;z-index:2;
}
.cl-row{overflow:hidden;padding:14px 0 30px}
.cl-track{display:flex;align-items:center;width:max-content;will-change:transform}
.cl-logo{
  position:relative;flex:none;display:block;padding:0;border:0;background:none;
  width:var(--w);height:var(--h);margin-right:var(--cl-gap,72px);
  color:var(--wine);opacity:.78;cursor:pointer;
  transition:opacity .4s ease,transform .55s cubic-bezier(.16,1,.3,1);
}
.cl-logo:after{content:'';position:absolute;inset:-14px -16px} /* área de toque mínima 44px */
.cl-logo__img{
  display:block;width:100%;height:100%;background:var(--wine);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
.cl-logo__tag{
  position:absolute;left:50%;top:100%;margin-top:10px;white-space:nowrap;
  font:10px 'Atkinson Hyperlegible Mono',monospace;letter-spacing:.16em;color:var(--rust);
  opacity:0;transform:translate(-50%,4px);transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.cl-logo:hover,.cl-logo:focus-visible{opacity:1;transform:translateY(-6px)}
.cl-logo:hover .cl-logo__tag,.cl-logo:focus-visible .cl-logo__tag{opacity:1;transform:translate(-50%,0)}
.cl-logo:focus-visible{outline:2px solid var(--rust);outline-offset:10px}

@media(max-width:850px){
  .cl-rows{--cl-edge:25px}
}
@media(prefers-reduced-motion:reduce){
  .cl-rows{margin-inline:0;-webkit-mask-image:none;mask-image:none}
  .cl-row:nth-child(2){display:none}
  .cl-track{width:auto;flex-wrap:wrap;justify-content:center;row-gap:38px}
}

/* ============ PARTE 2 — PAINEL DE CASE ============ */
html.cl-open,html.cl-open body{overflow:hidden!important}
html.cl-open #progress{opacity:0}

.cl-wipe{
  position:fixed;top:0;bottom:0;right:0;left:108px;z-index:29;
  background:var(--rust);pointer-events:none;visibility:hidden;
  clip-path:circle(0px at 50% 50%);
}
.cl-panel{
  position:fixed;top:0;bottom:0;right:0;left:108px;z-index:28;
  background:var(--wine);color:var(--cream);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
}
.cl-panel::-webkit-scrollbar{display:none}
.cl-panel[hidden]{display:none}
.cl-panel:after{ /* grão sutil, mesmo padrão do site */
  content:'';position:fixed;top:0;bottom:0;right:0;left:108px;pointer-events:none;opacity:.12;z-index:3;
  background-image:url('data:image/svg+xml,%3Csvg viewBox=%220 0 180 180%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.8%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22 opacity=%22.3%22/%3E%3C/svg%3E');
}
.cl-panel__symbol{
  position:fixed;right:-8%;bottom:-14%;width:min(46vw,620px);opacity:.06;
  transform:rotate(-20deg);pointer-events:none;z-index:0;
}
.cl-panel__ring{
  position:fixed;right:-12vw;top:-18vw;width:56vw;aspect-ratio:1;border-radius:50%;
  border:1px solid #f0eae126;pointer-events:none;z-index:0;
}
.cl-close{
  position:fixed;top:24px;right:28px;z-index:6;width:54px;height:54px;border-radius:50%;
  background:transparent;color:var(--cream);border:1px solid #f0eae180;font-size:28px;line-height:1;
  display:grid;place-items:center;transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s,color .3s;
}
.cl-close:hover{transform:rotate(90deg);background:var(--cream);color:var(--wine)}

.cl-panel__inner{
  position:relative;z-index:2;min-height:100%;
  display:grid;grid-template-columns:minmax(340px,.42fr) minmax(0,1fr);
  gap:clamp(16px,3vw,48px);padding:clamp(28px,4vw,64px);
}
.cl-info{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3.2vh,34px);min-width:0}
.cl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font:11px 'Atkinson Hyperlegible Mono',monospace;letter-spacing:.16em;text-transform:uppercase}
.cl-meta .eyebrow{font-size:11px}
.cl-meta b{font-weight:500}
.cl-meta__cat{opacity:.65}
.cl-name{
  margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  letter-spacing:-.07em;line-height:.93;font-size:clamp(46px,5.4vw,92px);
}
.cl-name.is-long{font-size:clamp(38px,4.3vw,72px)}
.cl-name .cl-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.cl-name .cl-w>span{display:inline-block;will-change:transform}
.cl-desc{margin:0;max-width:460px;font-size:clamp(16px,1.4vw,21px);line-height:1.5;opacity:.92}
.cl-result{max-width:460px;border-top:1px solid #f0eae133;padding-top:16px;display:flex;flex-direction:column;gap:8px}
.cl-result[hidden]{display:none}
.cl-result__label{font:11px 'Atkinson Hyperlegible Mono',monospace;letter-spacing:.16em;color:var(--sand);opacity:.75}
.cl-result strong{font-weight:600;font-size:clamp(22px,2.3vw,36px);letter-spacing:-.04em;line-height:1.1;color:var(--sand)}
.cl-actions{display:flex;flex-wrap:wrap;gap:12px}
.cl-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:clamp(0px,1vh,12px)}
.cl-arrow{
  width:38px;height:38px;border-radius:50%;background:transparent;color:var(--cream);
  border:1px solid #f0eae14d;font-size:15px;line-height:1;display:grid;place-items:center;opacity:.7;
  transition:background .3s,color .3s,opacity .3s,border-color .3s;
}
.cl-arrow:hover,.cl-arrow:focus-visible{opacity:1;border-color:var(--cream);background:var(--cream);color:var(--wine)}
.cl-arrow[aria-disabled="true"]{opacity:.25;pointer-events:none}
.cl-arrow[hidden]{display:none}
.cl-count{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* só para leitores de tela */
.cl-nextclient{
  margin-left:12px;padding:8px 2px;background:transparent;border:0;color:var(--cream);opacity:.6;
  font:11px 'Atkinson Hyperlegible Mono',monospace;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid transparent;transition:opacity .3s,border-color .3s;
}
.cl-nextclient:hover,.cl-nextclient:focus-visible{opacity:1;border-color:#f0eae180}

/* ---- Galeria 3D ---- */
.cl-gallery{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center}
.cl-halo{
  position:absolute;left:50%;top:50%;width:70%;aspect-ratio:1;transform:translate(-50%,-56%);
  background:radial-gradient(closest-side,#9438111f,transparent);pointer-events:none;
}
.cl-stage{
  position:relative;height:min(62vh,640px);min-height:340px;
  perspective:1400px;transform-style:preserve-3d;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.cl-stage.is-drag{cursor:grabbing}
.cl-card{
  --cw:clamp(190px,min(21vw,37vh),330px);
  position:absolute;left:50%;top:50%;width:var(--cw);aspect-ratio:3/4;
  border-radius:2px;overflow:hidden;will-change:transform;backface-visibility:hidden;
  box-shadow:0 30px 60px rgba(25,3,3,.35);background:var(--brown);
}
.cl-card:before{content:'';position:absolute;inset:0;background:url('texture-18.jpg') center/cover;opacity:.11;pointer-events:none}
.cl-c0{background:linear-gradient(135deg,#943811,#522A1D)}
.cl-c1{background:linear-gradient(135deg,#726841,#522A1D)}
.cl-c2{background:linear-gradient(140deg,#522A1D,#943811)}
.cl-c3{background:linear-gradient(135deg,#D1C5B2,#726841)}
.cl-c4{background:linear-gradient(135deg,#F0EAE1,#D1C5B2)}
.cl-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.cl-card__logo{
  position:absolute;left:14%;right:14%;top:34%;bottom:34%;background:var(--cream);opacity:.9;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;pointer-events:none;
}
.cl-c3 .cl-card__logo,.cl-c4 .cl-card__logo{background:var(--wine)}
.cl-card__num{position:absolute;left:14px;top:14px;font:11px 'Atkinson Hyperlegible Mono',monospace;letter-spacing:.14em;color:var(--cream);opacity:.8}
.cl-c3 .cl-card__num,.cl-c4 .cl-card__num{color:var(--wine)}
.cl-card__label{
  position:absolute;left:0;right:0;bottom:0;padding:11px 14px;background:#3e090999;color:var(--cream);
  font:11px 'Atkinson Hyperlegible Mono',monospace;letter-spacing:.1em;text-transform:uppercase;pointer-events:none;
}
.cl-card__shade{position:absolute;inset:0;background:var(--wine);opacity:0;pointer-events:none}
.cl-stage.is-fade .cl-card{transition:opacity .45s ease}
.cl-caption{
  margin:clamp(10px,2vh,24px) 0 0;text-align:center;min-height:1.4em;
  font:12px 'Atkinson Hyperlegible Mono',monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.85;
}

/* ---- Mobile ---- */
@media(max-width:850px){
  html.cl-open .whatsapp{opacity:0;pointer-events:none}
  .cl-wipe,.cl-panel{left:0;z-index:40}
  .cl-wipe{z-index:41}
  .cl-panel:after{left:0}
  .cl-close{top:16px;right:16px;width:48px;height:48px}
  .cl-panel__inner{grid-template-columns:1fr;padding:84px 22px 44px;gap:34px}
  .cl-name{font-size:clamp(40px,12vw,68px)}
  .cl-name.is-long{font-size:clamp(34px,10vw,56px)}
  .cl-gallery{order:-1}
  .cl-stage{height:min(46vh,400px);min-height:300px}
  .cl-card{--cw:clamp(170px,52vw,260px)}
  .cl-nextclient{margin-left:6px}
  .cl-panel__ring{width:90vw;right:-30vw;top:-30vw}
}
@media(prefers-reduced-motion:reduce){
  .cl-wipe{display:none}
}

/* ============ AJUSTES SOLICITADOS (somente estes dois elementos existentes) ============ */
/* Rodapé: "conversar" aparece sozinho (antes só preenchia no hover; o contorno fino quase não aparecia) */
.footer .display a.outline-word{color:var(--cream);-webkit-text-stroke:0}
/* Botão do WhatsApp: mesmo botão e mesma cor, ícone novo centralizado e proporcional */
.whatsapp svg{width:30px;height:30px;display:block;fill:#fff;flex:none}
@media(max-width:480px){.whatsapp svg{width:27px;height:27px}}