/* Paginas institucionais em formato editorial (Olaria Paulistana)
   container largo igual ao resto do site + ritmo alternado de texto e foto */

.ed{--ed-max:1300px;--ed-gap:clamp(26px,3.6vw,60px);--ed-rit:clamp(48px,6.5vw,110px)}
.ed-wrap{max-width:var(--ed-max);margin:0 auto;padding:0 clamp(16px,3vw,28px) clamp(40px,6vw,90px)}

.ed-crumbs{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:20px 0 0}
.ed-crumbs a{color:var(--muted)}
.ed-crumbs a:hover{color:var(--terra-d)}
.ed-crumbs span{margin:0 8px;color:var(--line)}

/* ---------- capa ---------- */
.ed-hero{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--ed-gap);align-items:center;
  padding:clamp(24px,3.4vw,46px) 0 clamp(10px,2vw,26px)}
.ed-kicker{display:block;font-size:11.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--terra-d);margin-bottom:18px;position:relative;padding-top:20px}
.ed-kicker::before{content:'';position:absolute;top:0;left:0;width:52px;height:1px;background:var(--terra)}
.ed-title{font-size:clamp(2rem,3.6vw,3.2rem);line-height:1.12;font-weight:600;letter-spacing:-.02em;
  color:var(--brown);margin:0 0 22px;max-width:16ch}
.ed-lede{font-size:19px;font-weight:500;line-height:1.6;color:var(--brown);max-width:52ch}
.ed-lede p{margin:0 0 12px}
.ed-lede p:last-child{margin-bottom:0}
.ed-hero__media .ed-figure{aspect-ratio:4/5}
/* atelie: a foto da fachada sobra calcada embaixo, entao a capa perde 20% da base
   (moldura 20% mais baixa e o recorte reancorado para o topo ficar no mesmo lugar).
   No mobile a moldura ja e 16/11 e nem chega perto da calcada, entao fica como esta */
@media (min-width:861px){
  /* PADRONIZACAO DA CAPA (2026-08-12): a foto de abertura e QUADRADA em todas as
     internas (antes so a do atelie era; as outras eram 4/5 e cada pagina abria com
     uma proporcao diferente) */
  .ed-hero__media .ed-figure{aspect-ratio:1/1}
  .ed--atelie .ed-hero__media .ed-figure img{object-position:50% 20%}
}

/* ---------- figura ---------- */
.ed-figure{display:block;position:relative;overflow:hidden;border-radius:16px;background:var(--paper);
  box-shadow:0 18px 44px rgba(70,61,52,.10)}
.ed-figure img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;
  transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.ed-figure:hover img{transform:scale(1.035)}

/* ---------- texto ---------- */
.ed-txt{color:#5c5147}
.ed-txt p{font-size:17px;line-height:1.75;margin:0 0 18px}
.ed-txt p:last-child{margin-bottom:0}
.ed-txt a{color:var(--terra-d);text-decoration:underline;text-underline-offset:3px}
.ed-txt strong{color:var(--brown);font-weight:600}
.ed-txt ul,.ed-txt ol{margin:0 0 18px;padding-left:22px}
.ed-txt li{font-size:17px;line-height:1.75;margin:0 0 8px}
.ed-h2{font-size:clamp(1.45rem,2.2vw,1.95rem);line-height:1.15;font-weight:600;color:var(--brown);
  letter-spacing:-.015em;margin:0 0 16px}

/* ---------- ritmo ---------- */
.ed-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--ed-gap);margin:var(--ed-rit) 0}
.ed-split--flip .ed-split__media{order:2}
.ed-lead{max-width:800px;margin:var(--ed-rit) auto}
.ed-lead .ed-h2{text-align:center}
.ed-lead.ed-txt p{font-size:17.5px}

.ed-band{display:grid;gap:16px;margin:var(--ed-rit) 0}
.ed-band--1{grid-template-columns:1fr}
.ed-band--1 .ed-figure{aspect-ratio:16/7}
.ed-band--2{grid-template-columns:repeat(2,1fr)}
.ed-band--3{grid-template-columns:repeat(3,1fr)}
.ed-band .ed-figure{aspect-ratio:3/4}
.ed-band--wide .ed-figure{aspect-ratio:21/8}
.ed-band--wide .ed-figure img{object-position:center 45%}

/* as duas colunas do bloco tem a MESMA altura: a foto acompanha a coluna de texto
   em vez de impor 4/5 fixo (senao a imagem fica desproporcional ao lado de texto curto).
   A figura sai do fluxo, senao a propria imagem e quem dita a altura da linha. */
.ed-split{align-items:stretch}
.ed-split__copy{align-self:center}
.ed-split__media{position:relative;min-height:clamp(300px,24vw,360px)}
.ed-split__media .ed-figure{position:absolute;inset:0;aspect-ratio:auto;height:auto}
/* o recorte agora e mais baixo que a foto original: ancora mais no alto para nao cortar rostos */
.ed-split__media .ed-figure img{object-position:center 28%}

/* ---------- citacao ---------- */
.ed-quote{max-width:920px;margin:clamp(40px,4.6vw,72px) auto;padding:0 clamp(12px,3vw,40px);text-align:center;position:relative}
/* o bloco seguinte encosta mais na citacao (o ritmo cheio deixava um vao grande demais) */
.ed-quote + *{margin-top:clamp(26px,3vw,46px)}
.ed-quote::before{content:'';display:block;width:44px;height:1px;background:var(--terra);margin:0 auto 26px}
.ed-quote p{font-size:clamp(1.25rem,2.1vw,1.7rem);line-height:1.45;font-weight:500;font-style:italic;
  color:var(--brown);margin:0}
.ed-quote::after{content:'';display:block;width:44px;height:1px;background:var(--terra);margin:26px auto 0}

/* ---------- grade de imagens (cores / logos) ---------- */
.ed-grade{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;margin:var(--ed-rit) 0}
.ed-grade__item{margin:0;text-align:center}
.ed-grade__item a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  text-decoration:none;border:0}
.ed-grade__item img{width:100%;height:auto;border-radius:12px;display:block;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s}
.ed-grade__item:hover img{transform:scale(1.05);box-shadow:0 20px 40px rgba(70,61,52,.16)}
.ed-grade__item figcaption{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin-top:10px;transition:color .35s}
.ed-grade__item:hover figcaption{color:var(--terra-d)}
.ed-grade--logos{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;max-width:1000px;margin-left:auto;margin-right:auto}
.ed-grade--logos .ed-grade__item{background:#fff;border:1px solid var(--line);border-radius:14px;
  aspect-ratio:5/3;display:flex;align-items:center;justify-content:center;padding:24px}
.ed-grade--logos img{width:auto;max-width:100%;max-height:76px;object-fit:contain;
  filter:grayscale(1) contrast(1.15);transition:filter .35s,transform .5s}
.ed-grade--logos .ed-grade__item:hover img{filter:grayscale(0) contrast(1);transform:scale(1.03)}

/* ---------- videos ---------- */
.ed-videos-sec{margin:var(--ed-rit) 0}
.ed-videos-sec .ed-h2{text-align:center}
.ed-videos{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
/* VIDEO SOZINHO FICA CENTRALIZADO (2026-08-17): com um video so a grade de 2 colunas
   deixava ele na esquerda e um vazio enorme na direita; agora ele ocupa o centro, com a
   mesma largura do bloco de fecho (860px) */
.ed-videos:has(> :only-child){grid-template-columns:min(860px,100%);justify-content:center}
.ed-videos iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:14px;display:block;
  box-shadow:0 18px 44px rgba(70,61,52,.10)}
/* capa do video: o player do YouTube so entra quando a pessoa clica */
.ed-video{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;cursor:pointer;
  border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:0 18px 44px rgba(70,61,52,.10)}
.ed-video img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.22,.61,.36,1),filter .4s}
.ed-video:hover img{transform:scale(1.04);filter:brightness(.94)}
.ed-video__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:rgba(70,61,52,.78);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;transition:background .35s,transform .35s}
.ed-video__play::after{content:'';margin-left:5px;border-left:22px solid #fff;
  border-top:13px solid transparent;border-bottom:13px solid transparent}
.ed-video:hover .ed-video__play{background:var(--terra-d);transform:translate(-50%,-50%) scale(1.06)}
.ed-video:focus-visible{outline:2px solid var(--terra);outline-offset:3px}

/* ---------- galeria ---------- */
.ed-gallery-sec{margin:var(--ed-rit) 0 0}
.ed-gallery-title{font-size:clamp(1.45rem,2.2vw,1.95rem);line-height:1.15;font-weight:600;color:var(--brown);
  text-align:center;margin:0 0 clamp(22px,3vw,38px)}
.ed-gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;grid-auto-flow:dense}
.ed-gallery .og-item{display:block;position:relative;overflow:hidden;border-radius:12px;aspect-ratio:3/4;
  background:var(--paper)}
.ed-gallery .og-item img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block;
  transition:transform .9s cubic-bezier(.22,.61,.36,1),filter .5s}
.ed-gallery .og-item:hover img{transform:scale(1.05)}
.ed-gallery .og-item--big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
/* foto deitada ocupa 2 colunas numa linha so: entra inteira, sem corte vertical */
.ed-gallery .og-item--wide{grid-column:span 2;aspect-ratio:auto}
.ed-gallery .og-item--wide img{object-position:center 45%}
/* poucas fotos (cabem em uma linha): centraliza mantendo o mesmo tamanho de quadro da grade */
.ed-gallery--centro{display:flex;flex-wrap:wrap;justify-content:center}
.ed-gallery--centro .og-item{width:calc((100% - 4*14px)/5);aspect-ratio:3/4}
.ed-gallery--centro .og-item--wide{width:calc((100% - 4*14px)/5*2 + 14px)}
.ed-gallery--centro .og-item--big{width:calc((100% - 4*14px)/5*2 + 14px);aspect-ratio:3/4}

/* ---------- fecho: foto centralizada com a frase embaixo ---------- */
/* a frase do fecho tem que caber em UMA linha: o bloco de texto e um pouco mais largo
   que a foto e a fonte cai de 18 para 17px (a 18px ela precisaria de 973px) */
.ed-fecho{max-width:1000px;margin:var(--ed-rit) auto 0;text-align:center}
.ed-fecho .ed-figure{aspect-ratio:3/2;max-width:860px;margin:0 auto}
.ed-fecho .ed-figure img{object-position:center 45%}
.ed-fecho__txt{margin-top:26px;font-size:17px;line-height:1.7;font-weight:500;color:var(--brown)}
.ed-fecho__txt p{margin:0 0 10px}
.ed-fecho__txt p:last-child{margin-bottom:0}

/* ---------- chamada final ---------- */
.ed-cta{text-align:center;margin:clamp(26px,3vw,40px) 0 0}

/* bloco de redes (reaproveitado da pagina da Lucia) */
.ed .olaria-social{margin:var(--ed-rit) auto 0;text-align:center}

/* ---------- pagina simples (contato) ---------- */
.ed-raw{max-width:1100px;margin:clamp(26px,4vw,54px) auto 0}
.ed-raw .op-contact{max-width:none}

/* ---------- responsivo ---------- */
@media (max-width:1120px){
  /* container mais estreito: mais um degrau na frase do fecho para nao quebrar linha */
  .ed-fecho__txt{font-size:16px}
}
@media (max-width:1024px){
  .ed-grade{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ed-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* a ordem dos quadros e calculada no PHP para 5 colunas; em 3 ou 2 os spans
     deixariam vaos, entao abaixo daqui a grade fica uniforme */
  .ed-gallery .og-item--big,.ed-gallery .og-item--wide{grid-column:span 1;grid-row:span 1;aspect-ratio:3/4}
  .ed-gallery--centro .og-item,
  .ed-gallery--centro .og-item--wide,
  .ed-gallery--centro .og-item--big{width:calc((100% - 2*14px)/3);aspect-ratio:3/4}
}
@media (max-width:860px){
  .ed-hero{grid-template-columns:1fr;gap:26px}
  .ed-title{max-width:none}
  .ed-hero__media .ed-figure{aspect-ratio:16/11}
  .ed-split{grid-template-columns:1fr;gap:24px}
  /* RITMO NO CELULAR (2026-08-12): empilhado, a ordem do HTML vira a ordem da tela.
     O bloco emite a FOTO antes do texto (que e o certo no desktop, onde ficam lado a
     lado), mas no celular isso colava a capa do hero com a foto do 1o bloco: saia
     titulo, FOTO, FOTO, texto. Com o texto na frente a pagina alterna sempre
     texto > foto > texto > foto, e o titulo continua sendo a primeira coisa lida. */
  .ed-split__copy{order:0}
  .ed-split__media{order:1}
  .ed-split__media{position:static;min-height:0}
  .ed-split__media .ed-figure{position:static;aspect-ratio:16/11;height:auto}
  .ed-band--3{grid-template-columns:repeat(2,1fr)}
  .ed-band--wide .ed-figure{aspect-ratio:16/9}
  .ed-videos{grid-template-columns:1fr}
}
@media (max-width:620px){
  .ed-grade{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .ed-grade--logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0}
  .ed-grade--logos .ed-grade__item{padding:14px}
  .ed-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ed-band--2,.ed-band--3{grid-template-columns:1fr}
  .ed-lede{font-size:17.5px}
  .ed-fecho .ed-figure{aspect-ratio:4/3}
  .ed-fecho__txt{font-size:17px}
  .ed-gallery--centro{gap:10px}
  .ed-gallery--centro .og-item,
  .ed-gallery--centro .og-item--wide,
  .ed-gallery--centro .og-item--big{width:calc((100% - 10px)/2)}
}

/* --- OBS 9 · "Como funciona um projeto" na pagina de restaurantes --- */
.b2b-pontos{margin:clamp(40px,4.6vw,72px) 0 0}
.b2b-pontos h2{font-size:clamp(1.3rem,2.4vw,1.9rem);margin-bottom:26px}
.b2b-pontos__grade{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#e6dccd;border:1px solid #e6dccd}
.b2b-ponto{background:#fbf8f2;padding:26px 26px 28px}
.b2b-ponto__n{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;color:#b47a57;margin-bottom:10px}
.b2b-ponto strong{display:block;font-size:16px;font-weight:600;color:#463d34;margin-bottom:7px}
.b2b-ponto p{margin:0;font-size:14.5px;line-height:1.65;color:#8a7d6f}
@media(max-width:760px){.b2b-pontos__grade{grid-template-columns:1fr}.b2b-ponto{padding:22px 20px 24px}}


/* ============================================================
   ABERTURA: O TITULO INTEIRO NA PRIMEIRA TELA (2026-08-12)
   Mesmo padrao da home (ver assets/home/main.css): o corpo do titulo
   olha tambem a ALTURA da janela e as folgas da capa encolhem, para a
   mensagem principal ser lida sem rolar. So desktop; o celular fica igual.
   ============================================================ */
@media (min-width: 861px) {
  .ed-hero{padding:clamp(18px,2.4vw,36px) 0 clamp(10px,2vw,26px)}
  .ed-kicker{padding-top:16px;margin-bottom:14px}
  .ed-title{font-size:clamp(2rem,min(3.6vw,6.6vh),3.2rem);margin:0 0 18px}
  .ed-lede{font-size:clamp(16.5px,min(1.4vw,2.7vh),19px)}
  /* AS DUAS COLUNAS DA CAPA COM A MESMA ALTURA (2026-08-13, pedido do cliente):
     a foto passa a ter EXATAMENTE a altura da coluna de texto, em vez de sobrar
     (ou faltar) foto em cima e embaixo.
     Como funciona: a linha da grade e esticada (`stretch`) e a figura sai do fluxo
     (`position:absolute; inset:0`), entao ela NAO opina mais sobre a altura, so
     preenche o que a coluna 1 mandar. Quem da o PISO e o `::before` da coluna da
     foto: um quadrado (a proporcao padrao das capas) com o mesmo teto de altura de
     antes, `min(68vh,680px)`, que existe para o titulo caber na primeira tela.
     Resultado: paginas de texto longo (restaurantes, lucia, cores) ficam com as duas
     colunas casadas; as de texto curto (atelie, claudia, clientes, contato) mantem a
     capa quadrada de sempre, em vez de virar uma tira baixa.
     O texto continua centralizado na vertical (`justify-content:center`) para essas
     paginas curtas nao abrirem com o titulo colado no topo.
     Medido no ar em 7 paginas x 7 janelas: diferenca de altura 0px nas 49, e a
     altura do hero (e a posicao do titulo) ficou IGUAL a de antes em todas. */
  .ed-hero{align-items:stretch}
  .ed-hero__copy{display:flex;flex-direction:column;justify-content:center}
  /* CAPA SEM CORTE (2026-08-17, pedido do cliente): a foto de abertura tem que aparecer
     INTEIRA. Antes a figura era absoluta e preenchia a altura que a coluna de texto
     mandasse (align-items:stretch), e o `object-fit:cover` cortava a foto quando o texto
     era longo - era o caso da pagina B2B, onde a base das pecas ficava fora.
     Agora a figura volta ao fluxo, e QUADRADA (a proporcao em que as capas sao
     entregues) e fica centralizada na coluna; o `contain` garante que uma capa que nao
     seja quadrada tambem apareca inteira, dentro da moldura. As duas colunas continuam
     com a MESMA ALTURA (o stretch e a coluna da foto seguem valendo); o que muda e que
     a foto nao estica mais junto. */
  .ed-hero__media{position:relative;display:flex;align-items:center;justify-content:center}
  /* a MOLDURA acompanha a proporcao da foto (nada de faixa vazia dentro dela): a figura
     encolhe para o tamanho da imagem, com um teto de altura para telas baixas. Capa
     quadrada (o padrao das que o cliente entrega) preenche a coluna inteira; capa em
     retrato aparece inteira, mais estreita e centralizada. */
  .ed-hero__media .ed-figure{position:static;display:block;line-height:0;
    width:fit-content;max-width:100%;height:auto;aspect-ratio:auto;max-height:none;
    margin-left:auto;margin-right:auto}
  .ed-hero__media .ed-figure img{width:auto;max-width:100%;height:auto;
    max-height:min(92vh,900px);object-fit:contain;object-position:center}
}


/* ---------- galeria de logos de clientes (2026-08-12) ---------- */
.ed-clientes-sec{margin:var(--ed-rit) 0 0;scroll-margin-top:120px}
.ed-clientes-titulo{text-align:center;margin-bottom:26px}
/* FLEX, NAO GRID, PELA ULTIMA LINHA (19/08): com 25 logos a grade de 5 fechava
   redondo; com 32 sobravam 2 encostados na esquerda e 3 celulas vazias na direita.
   E a mesma decisao ja tomada na pagina /clientes/ em 12/08. As larguras sao as
   mesmas de antes: (100% - (n-1)*gap)/n. */
.ed-grade--clientes{display:flex;flex-wrap:wrap;justify-content:center;
  gap:16px;max-width:1180px;margin:0 auto}
.ed-grade--clientes .ed-grade__item{width:calc((100% - 4*16px)/5);
  padding:16px 14px 12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;min-height:132px}
.ed-grade--clientes img{max-height:66px}
.ed-grade--clientes figcaption{margin-top:0;font-size:10.5px;letter-spacing:.1em;line-height:1.35}
@media (max-width:1120px){.ed-grade--clientes .ed-grade__item{width:calc((100% - 3*16px)/4)}}
@media (max-width:860px){
  .ed-grade--clientes{gap:12px}
  .ed-grade--clientes .ed-grade__item{width:calc((100% - 2*12px)/3)}
}
@media (max-width:620px){
  .ed-grade--clientes{gap:10px}
  .ed-grade--clientes .ed-grade__item{width:calc((100% - 10px)/2);min-height:110px;padding:12px 10px 10px}
  .ed-grade--clientes img{max-height:54px}
}


/* ---------- pagina /clientes/: os logos SAO o conteudo, entao vem maiores ----------
   (na pagina B2B a mesma faixa continua menor, ali ela e prova social no meio do texto) */
.ed--clientes .ed-clientes-sec{margin-top:clamp(30px,4vw,58px)}
.ed--clientes .ed-clientes-titulo{font-size:clamp(1.5rem,2.4vw,2.1rem);margin-bottom:34px}
/* flex em vez de grid para a ULTIMA LINHA ficar centralizada (23 logos nao fecham a grade) */
.ed--clientes .ed-grade--clientes{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;max-width:1300px}
.ed--clientes .ed-grade--clientes .ed-grade__item{width:calc((100% - 3*22px)/4);min-height:210px;
  padding:26px 22px 20px;gap:16px;border-radius:18px}
/* aqui os logos sao o assunto da pagina, entao aparecem na cor da marca */
.ed--clientes .ed-grade--clientes img{max-height:118px;filter:none;opacity:1}
.ed--clientes .ed-grade--clientes figcaption{font-size:12px;letter-spacing:.12em}
@media (max-width:1120px){
  .ed--clientes .ed-grade--clientes .ed-grade__item{width:calc((100% - 2*22px)/3);min-height:186px}
  .ed--clientes .ed-grade--clientes img{max-height:100px}
}
@media (max-width:860px){
  .ed--clientes .ed-grade--clientes{gap:16px}
  .ed--clientes .ed-grade--clientes .ed-grade__item{width:calc((100% - 16px)/2)}
}
@media (max-width:620px){
  .ed--clientes .ed-grade--clientes{gap:12px}
  .ed--clientes .ed-grade--clientes .ed-grade__item{width:calc((100% - 12px)/2);min-height:150px;padding:18px 14px 14px}
  .ed--clientes .ed-grade--clientes img{max-height:76px}
}


/* ---------- "Ver mais clientes" (2026-08-12) ----------
   A pagina abre com 8 logos e revela de 8 em 8. Quem esconde e o JS (classe
   `tem-oculto` + `data-oculto`), entao sem JS a faixa aparece inteira. */
.ed-grade--clientes.tem-oculto .ed-grade__item[data-oculto]{display:none}
.ed-cli-mais-wrap{display:flex;justify-content:center;margin-top:34px}
/* BUG DE 18/08: o botao nasce com [hidden] e o JS o esconde de novo quando acaba a
   fila, mas `.btn{display:inline-flex}` GANHA do display:none que o navegador da
   para [hidden] - ele continuava na tela dizendo "+8" sem ter mais nada para
   mostrar (e aparecia tambem para quem esta sem JS). Passou despercebido enquanto
   eram 25 logos; com 32, multiplo de 8, ficou obvio. */
.ed-cli-mais[hidden],.ed-cli-mais-wrap:has(> .ed-cli-mais[hidden]){display:none}
.ed-cli-mais{border:1px solid var(--terra);background:transparent;color:var(--terra-d);
  display:inline-flex;align-items:center;gap:9px;cursor:pointer}
.ed-cli-mais:hover{background:var(--terra);color:#fff;border-color:var(--terra)}
.ed-cli-mais__n{font-size:12px;font-weight:700;letter-spacing:.04em;opacity:.75;
  font-variant-numeric:tabular-nums}
.ed-cli-mais:hover .ed-cli-mais__n{opacity:.9}

/* entrada dos que acabaram de aparecer: sobem, ganham nitidez e assentam,
   um depois do outro (o atraso vem do JS) */
@keyframes ed-cli-entra{
  from{opacity:0;transform:translateY(16px) scale(.97);filter:blur(3px)}
  60% {opacity:1;filter:blur(0)}
  to  {opacity:1;transform:none;filter:blur(0)}
}
.ed-grade--clientes .ed-grade__item.is-entrando{
  animation:ed-cli-entra .6s cubic-bezier(.22,.61,.36,1) both;
  will-change:transform,opacity,filter;
}
@media (prefers-reduced-motion: reduce){
  .ed-grade--clientes .ed-grade__item.is-entrando{animation:none}
}

/* TITULOS A ESQUERDA NO CELULAR (18/08): no /atelie/ e em /cores/ os titulos de
   bloco (o do lede, o dos videos e o da galeria) sao os unicos centralizados numa
   pagina que e toda alinhada a esquerda - no celular isso fica fora do prumo.
   Vale so ate 860px; no desktop, onde ha largura, o centro continua.
   GOTCHA: a classe vem do SLUG, e o slug de "Nossas Cores" e
   `cores-de-ceramicas-artesanais` (a URL /cores/ e so o atalho) - dai o seletor
   por prefixo, que pega as duas formas. */
@media (max-width:860px){
  .ed--atelie .ed-h2, .ed--atelie .ed-gallery-title,
  [class*="ed--cores"] .ed-h2, [class*="ed--cores"] .ed-gallery-title{text-align:left}
}