/* Peça mosaico: serviços com foto em grade assimétrica (3 a 6 itens). Carregue depois do mestre.css e do tom.
   A foto cobre o cartão, o título fica por cima, o texto sobe no hover e no foco do teclado (no celular e no toque já aparece).
   Entrada: cada cartão abre com uma máscara, em cascata (kit/peca-mosaico.js). */
.p-mosaico{background:var(--fundo);color:var(--tinta);position:relative;overflow:hidden}
/* topo editorial: título grande à esquerda; à direita, o índice dos cuidados (acende junto com o cartão) e o botão */
.p-mosaico .p-mosaico-topo{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,390px);align-items:end;gap:28px clamp(40px,6vw,104px);margin-bottom:clamp(34px,4.4vw,60px)}
.p-mosaico .p-mosaico-topo .m-cabeca{margin-bottom:0;max-width:720px}
.p-mosaico .p-mosaico-topo .m-cabeca h2{margin-bottom:0;font-size:clamp(38px,4.7vw,70px);line-height:1;letter-spacing:-.045em;text-wrap:balance}
.p-mosaico .p-mosaico-topo .m-cabeca p{margin-top:22px;max-width:520px;line-height:1.6}
.p-mosaico .p-mosaico-lado{display:grid;gap:26px;justify-items:start}
.p-mosaico .p-mosaico-lado.so-botao{justify-items:end}
.p-mosaico .p-mosaico-indice{list-style:none;margin:0;padding:0;width:100%}
.p-mosaico .p-mosaico-pe{display:flex;justify-content:flex-end;margin-top:clamp(28px,3vw,40px)}
.p-mosaico .p-mosaico-indice li{--linha:color-mix(in srgb,var(--tinta) 14%,transparent);position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;padding:15px 0 14px;cursor:default;background:linear-gradient(var(--linha),var(--linha)) 0 0/100% 1px no-repeat}
.p-mosaico .p-mosaico-indice li:last-child{background:linear-gradient(var(--linha),var(--linha)) 0 0/100% 1px no-repeat,linear-gradient(var(--linha),var(--linha)) 0 100%/100% 1px no-repeat}
/* entrada do índice: os traços se desenham e os nomes sobem 16 px, junto com a abertura dos cartões */
.p-mosaico.vivo .p-mosaico-indice li{background-size:0% 0px,0% 0px;transition:background-size 1.1s cubic-bezier(.72,0,.18,1) var(--d,0ms)}
.p-mosaico.vivo .p-mosaico-indice li>*{opacity:0;translate:0 16px;transition:opacity .8s ease calc(var(--d,0ms) + 250ms),translate 1s cubic-bezier(.2,.7,.2,1) calc(var(--d,0ms) + 250ms),transform .5s cubic-bezier(.2,.7,.2,1),color .4s,background-color .4s}
.p-mosaico.vivo .p-mosaico-indice.aberto li{background-size:100% 1px,100% 1px}
.p-mosaico.vivo .p-mosaico-indice.aberto li>*{opacity:1;translate:0 0}
.p-mosaico .p-mosaico-indice li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--cor);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.p-mosaico .p-mosaico-indice span{font:500 12px/1 var(--texto);letter-spacing:.12em;color:var(--cor-texto);font-variant-numeric:tabular-nums}
.p-mosaico .p-mosaico-indice b{font:600 clamp(17px,1.35vw,20px)/1.2 var(--titulo,inherit);letter-spacing:-.02em;color:var(--tinta);transition:transform .5s cubic-bezier(.2,.7,.2,1),color .4s}
.p-mosaico .p-mosaico-indice i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--tinta) 18%,transparent);transition:background-color .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.p-mosaico .p-mosaico-indice li.acesa::before{transform:scaleX(1)}
.p-mosaico .p-mosaico-indice li.acesa b{transform:translateX(8px);color:var(--cor-texto)}
.p-mosaico .p-mosaico-indice li.acesa i{background:var(--cor);transform:scale(1.5)}

/* grade: 12 colunas; a composição muda com a quantidade de itens */
.p-mosaico .p-mosaico-grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(clamp(236px,21.5vw,318px),auto);gap:clamp(12px,1.2vw,18px)}
.p-mosaico .p-mosaico-grade>*{grid-column:span 12}
.p-mosaico .p-mosaico-grade[data-n="2"]>:nth-child(1){grid-column:1/8;grid-row:1/3}
.p-mosaico .p-mosaico-grade[data-n="2"]>:nth-child(2){grid-column:8/13;grid-row:1/3}
.p-mosaico .p-mosaico-grade[data-n="3"]>:nth-child(1){grid-column:1/8;grid-row:1/3}
.p-mosaico .p-mosaico-grade[data-n="3"]>:nth-child(2){grid-column:8/13;grid-row:1}
.p-mosaico .p-mosaico-grade[data-n="3"]>:nth-child(3){grid-column:8/13;grid-row:2}
.p-mosaico .p-mosaico-grade[data-n="4"]>:nth-child(1){grid-column:1/6;grid-row:1/3}
.p-mosaico .p-mosaico-grade[data-n="4"]>:nth-child(2){grid-column:6/13;grid-row:1}
.p-mosaico .p-mosaico-grade[data-n="4"]>:nth-child(3){grid-column:6/9;grid-row:2}
.p-mosaico .p-mosaico-grade[data-n="4"]>:nth-child(4){grid-column:9/13;grid-row:2}
.p-mosaico .p-mosaico-grade[data-n="5"]>:nth-child(1){grid-column:1/6;grid-row:1/3}
.p-mosaico .p-mosaico-grade[data-n="5"]>:nth-child(2){grid-column:6/10;grid-row:1}
.p-mosaico .p-mosaico-grade[data-n="5"]>:nth-child(3){grid-column:10/13;grid-row:1}
.p-mosaico .p-mosaico-grade[data-n="5"]>:nth-child(4){grid-column:6/9;grid-row:2}
.p-mosaico .p-mosaico-grade[data-n="5"]>:nth-child(5){grid-column:9/13;grid-row:2}
.p-mosaico .p-mosaico-grade[data-n="6"]>:nth-child(1){grid-column:1/8;grid-row:1/3}
.p-mosaico .p-mosaico-grade[data-n="6"]>:nth-child(2){grid-column:8/13;grid-row:1}
.p-mosaico .p-mosaico-grade[data-n="6"]>:nth-child(3){grid-column:8/13;grid-row:2}
.p-mosaico .p-mosaico-grade[data-n="6"]>:nth-child(4){grid-column:1/6;grid-row:3}
.p-mosaico .p-mosaico-grade[data-n="6"]>:nth-child(5){grid-column:1/6;grid-row:4}
.p-mosaico .p-mosaico-grade[data-n="6"]>:nth-child(6){grid-column:6/13;grid-row:3/5}

/* cartão */
.p-mosaico .p-mosaico-cartao{--borda:clamp(20px,2.1vw,32px);position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;padding:var(--borda);border-radius:var(--raio);overflow:hidden;background:var(--cor-forte);color:#fff;text-decoration:none;box-shadow:0 34px 60px -40px color-mix(in srgb,var(--cor-forte) 80%,transparent),0 2px 6px -2px rgba(0,0,0,.12);outline:none}
.p-mosaico .p-mosaico-foto{position:absolute;inset:0;z-index:-2;overflow:hidden;border-radius:inherit}
.p-mosaico .p-mosaico-foto img{width:100%;height:100%;object-fit:cover;transform-origin:50% 40%;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
/* grão de filme por cima da foto */
.p-mosaico .p-mosaico-foto::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.2;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
/* degradê escuro e quente embaixo, sombra leve em cima para o número */
.p-mosaico .p-mosaico-foto::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(18,9,6,.34) 0%,rgba(18,9,6,.12) 14%,rgba(18,9,6,0) 26%),
  linear-gradient(0deg,color-mix(in srgb,var(--cor-forte) 92%,transparent) 0%,color-mix(in srgb,var(--cor-forte) 70%,transparent) 17%,color-mix(in srgb,var(--cor-forte) 38%,transparent) 31%,color-mix(in srgb,var(--cor-forte) 12%,transparent) 44%,transparent 56%)}
.p-mosaico .p-mosaico-cartao.sem-foto .p-mosaico-foto{background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--cor) 55%,transparent),transparent 60%),var(--cor-forte)}
/* véu que escurece no hover, para o texto ler bem */
.p-mosaico .p-mosaico-cartao::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .7s cubic-bezier(.2,.7,.2,1);background:linear-gradient(0deg,color-mix(in srgb,var(--cor-forte) 88%,transparent) 0%,color-mix(in srgb,var(--cor-forte) 58%,transparent) 30%,color-mix(in srgb,var(--cor-forte) 16%,transparent) 52%,transparent 68%)}
/* borda de luz de 1 px, mais forte no alto e onde o ponteiro passa */
.p-mosaico .p-mosaico-cartao::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;padding:1px;
  background:radial-gradient(240px circle at var(--mx,22%) var(--my,0%),rgba(255,255,255,.62),rgba(255,255,255,0) 72%),linear-gradient(160deg,rgba(255,255,255,.38),rgba(255,255,255,.1) 34%,rgba(255,255,255,.05) 64%,rgba(255,255,255,.2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* número fino e seta */
.p-mosaico .p-mosaico-cima{position:absolute;inset:var(--borda) var(--borda) auto var(--borda);display:flex;align-items:center;justify-content:space-between;gap:16px}
.p-mosaico .p-mosaico-num{display:inline-flex;align-items:center;gap:12px;font:500 12.5px/1 var(--texto);letter-spacing:.12em;color:rgba(255,255,255,.92);font-variant-numeric:tabular-nums}
.p-mosaico .p-mosaico-num::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6;transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.p-mosaico .p-mosaico-seta{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .45s,border-color .45s,transform .6s cubic-bezier(.2,.7,.2,1)}
.p-mosaico .p-mosaico-seta svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s cubic-bezier(.2,.7,.2,1)}

/* título e texto */
.p-mosaico .p-mosaico-corpo{position:relative;max-width:34em}
.p-mosaico .p-mosaico-cartao h3{color:#fff;font-size:clamp(25px,2.3vw,35px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.p-mosaico .p-mosaico-cartao.grande h3{font-size:clamp(32px,3.5vw,54px);line-height:1}
.p-mosaico .p-mosaico-cartao h3::after{content:"";display:block;width:52px;height:1.5px;margin-top:16px;background:var(--cor-2,#fff);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1) .05s}
.p-mosaico .p-mosaico-mais{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s cubic-bezier(.2,.7,.2,1)}
.p-mosaico .p-mosaico-mais>div{overflow:hidden;min-height:0}
.p-mosaico .p-mosaico-mais p{padding-top:14px;font-size:15.5px;line-height:1.58;color:rgba(255,255,255,.86);opacity:0;translate:0 16px;transition:opacity .45s ease,translate .7s cubic-bezier(.2,.7,.2,1)}
.p-mosaico .p-mosaico-cartao.grande .p-mosaico-mais p{font-size:16.5px}

/* hover e foco do teclado: a foto aproxima 4%, o texto completo sobe */
.p-mosaico .p-mosaico-cartao:is(:hover,:focus-visible,.acesa) .p-mosaico-foto img{transform:scale(1.04)}
.p-mosaico .p-mosaico-cartao:is(:hover,:focus-visible,.acesa)::before{opacity:1}
.p-mosaico .p-mosaico-cartao:is(:hover,:focus-visible,.acesa) .p-mosaico-mais{grid-template-rows:1fr}
.p-mosaico .p-mosaico-cartao:is(:hover,:focus-visible,.acesa) .p-mosaico-mais p{opacity:1;translate:0 0;transition-delay:.12s,.05s}
.p-mosaico .p-mosaico-cartao:is(:hover,:focus-visible,.acesa) h3::after{transform:scaleX(1)}
.p-mosaico .p-mosaico-cartao:is(:hover,:focus-visible,.acesa) .p-mosaico-seta{background-color:var(--cor);border-color:var(--cor);transform:scale(1.06)}
.p-mosaico .p-mosaico-cartao:is(:hover,:focus-visible,.acesa) .p-mosaico-seta svg{transform:rotate(45deg)}
.p-mosaico .p-mosaico-cartao:is(:hover,:focus-visible,.acesa) .p-mosaico-num::after{transform:scaleX(1.6)}
.p-mosaico .p-mosaico-cartao:focus-visible{box-shadow:0 0 0 3px var(--fundo),0 0 0 5px var(--cor)}
/* o cartão grande já mostra o texto inteiro (tem espaço); os outros mostram no hover, no foco e quando o índice acende */
.p-mosaico .p-mosaico-cartao.grande .p-mosaico-mais{grid-template-rows:1fr}
.p-mosaico .p-mosaico-cartao.grande .p-mosaico-mais p{opacity:1;translate:0 0}
.p-mosaico .p-mosaico-cartao.grande h3::after{transform:scaleX(1)}
.p-mosaico .p-mosaico-cartao.grande .p-mosaico-mais p{max-width:31em}

/* entrada: a máscara abre de baixo para cima, em cascata; a foto assenta e o título sobe depois */
.p-mosaico.vivo .p-mosaico-cartao{clip-path:inset(100% 0 0 0 round var(--raio));transition:clip-path 1.25s cubic-bezier(.72,0,.18,1) var(--d,0ms)}
.p-mosaico.vivo .p-mosaico-cartao.aberto{clip-path:inset(0 0 0 0 round var(--raio))}
.p-mosaico.vivo .p-mosaico-cartao.solto{clip-path:none;transition:none}
.p-mosaico.vivo .p-mosaico-foto{scale:1.2;transition:scale 1.9s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.p-mosaico.vivo .p-mosaico-cartao.aberto .p-mosaico-foto{scale:1}
.p-mosaico.vivo .p-mosaico-cima,.p-mosaico.vivo .p-mosaico-corpo{opacity:0;translate:0 16px;transition:opacity .8s ease calc(var(--d,0ms) + 620ms),translate 1s cubic-bezier(.2,.7,.2,1) calc(var(--d,0ms) + 620ms)}
.p-mosaico.vivo .p-mosaico-cima{translate:0 -10px}
.p-mosaico.vivo .p-mosaico-cartao.aberto :is(.p-mosaico-cima,.p-mosaico-corpo){opacity:1;translate:0 0}

/* tablet: duas colunas, o primeiro largo; o último fecha a linha quando sobra um */
@media (max-width:960px){
  .p-mosaico .p-mosaico-topo{grid-template-columns:minmax(0,1fr);align-items:start}
  .p-mosaico .p-mosaico-lado,.p-mosaico .p-mosaico-lado.so-botao{max-width:560px;justify-items:start}
  .p-mosaico .p-mosaico-indice{display:none}
  .p-mosaico .p-mosaico-pe{justify-content:flex-start}
  .p-mosaico .p-mosaico-grade{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(300px,auto)}
  .p-mosaico .p-mosaico-grade[data-n]>:nth-child(n){grid-column:auto;grid-row:auto}
  .p-mosaico .p-mosaico-grade[data-n]>:first-child,.p-mosaico .p-mosaico-grade:is([data-n="2"],[data-n="4"],[data-n="6"])>:last-child{grid-column:1/-1}
  .p-mosaico .p-mosaico-grade[data-n]>:first-child{min-height:380px}
}

/* toque, celular e foto final: o texto já aparece */
@media (hover:none),(max-width:640px){
  .p-mosaico .p-mosaico-mais{grid-template-rows:1fr}
  .p-mosaico .p-mosaico-mais p{opacity:1;translate:0 0}
  .p-mosaico .p-mosaico-cartao h3::after{transform:scaleX(1)}
  .p-mosaico .p-mosaico-cartao::before{opacity:.75}
}

/* celular: um embaixo do outro; a foto fica no alto do cartão e se funde no fundo quente onde está o texto (rosto nunca vai para baixo do texto) */
@media (max-width:640px){
  .p-mosaico .p-mosaico-grade{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:14px}
  .p-mosaico .p-mosaico-grade[data-n]>:nth-child(n){grid-column:1/-1;grid-row:auto;min-height:0}
  .p-mosaico .p-mosaico-cartao{--borda:22px;--alto:min(60vw,380px);padding-top:var(--alto);padding-bottom:26px}
  .p-mosaico .p-mosaico-cartao.grande{--alto:min(80vw,460px)}
  .p-mosaico .p-mosaico-foto{inset:0 0 auto 0;height:calc(var(--alto) + 92px);border-radius:var(--raio) var(--raio) 0 0}
  .p-mosaico .p-mosaico-foto::after{background:
    linear-gradient(180deg,rgba(18,9,6,.32) 0%,rgba(18,9,6,0) 26%),
    linear-gradient(0deg,var(--cor-forte) 0%,var(--cor-forte) 20%,color-mix(in srgb,var(--cor-forte) 70%,transparent) 38%,color-mix(in srgb,var(--cor-forte) 16%,transparent) 62%,transparent 76%)}
  .p-mosaico .p-mosaico-cartao::before{display:none}
  .p-mosaico .p-mosaico-cartao h3,.p-mosaico .p-mosaico-cartao.grande h3{font-size:clamp(28px,8.2vw,36px)}
  .p-mosaico .p-mosaico-mais p,.p-mosaico .p-mosaico-cartao.grande .p-mosaico-mais p{font-size:15.5px}
  .p-mosaico .p-mosaico-seta{width:44px;height:44px}
}

/* sem animação (foto da página pronta) e movimento reduzido: tudo aberto, no estado final */
.p-mosaico:is(html.sem-animacao *) .p-mosaico-cartao{clip-path:none!important;transition:none!important}
.p-mosaico:is(html.sem-animacao *) :is(.p-mosaico-foto,.p-mosaico-cima,.p-mosaico-corpo){scale:1!important;opacity:1!important;translate:0 0!important;transition:none!important}
/* no computador a foto final mostra o estado de quem só olha: o texto no cartão grande, os outros com título (no toque e no celular o texto já aparece em todos) */
.p-mosaico:is(html.sem-animacao *) :is(.p-mosaico-mais,.p-mosaico-mais p,.p-mosaico-cartao::before,.p-mosaico-cartao h3::after){transition:none!important}
.p-mosaico:is(html.sem-animacao *) .p-mosaico-indice li{background-size:100% 1px,100% 1px!important;transition:none!important}
.p-mosaico:is(html.sem-animacao *) .p-mosaico-indice li>*{opacity:1!important;translate:0 0!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  .p-mosaico .p-mosaico-cartao,.p-mosaico.vivo .p-mosaico-cartao{clip-path:none;transition:none}
  .p-mosaico.vivo :is(.p-mosaico-foto,.p-mosaico-cima,.p-mosaico-corpo){scale:1;opacity:1;translate:0 0;transition:none}
  .p-mosaico .p-mosaico-foto img,.p-mosaico .p-mosaico-mais,.p-mosaico .p-mosaico-mais p,.p-mosaico .p-mosaico-seta,.p-mosaico .p-mosaico-seta svg{transition:none}
  .p-mosaico .p-mosaico-cartao:is(:hover,:focus-visible,.acesa) .p-mosaico-foto img{transform:none}
}