/* ============================================================
   DESIGN E PRODUTOS (collabs.html) — a vitrine das três linhas, refeita em 25/09/2026 no padrão das landings do UNA
   e da Woodstone: marfim com grão, a Woodstone no escuro dela, o fecho no verde do rodapé. Cabinet Grotesk 500,
   Satoshi, Spline Sans Mono; canto curvo único em cima à direita; um acento (cobre) na seta e no foco.
   Abre com os três painéis das linhas (um toque leva a cada uma nesta página). Vale só em body[data-page="collabs-ed"].
   ============================================================ */
body[data-page="collabs-ed"] {
  --c-marfim: #f9f6ed; --c-tinta: #191711; --c-verde: #23261b; --c-cobre: #93755e; --c-caramelo: #b6926f;
  --c-regra: rgba(80, 62, 45, .22); --c-regra-clara: rgba(249, 246, 237, .2);
  --c-display: "Cabinet Grotesk", "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --c-texto: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --c-dados: "Spline Sans Mono", ui-monospace, Consolas, monospace;
  --c-saida: cubic-bezier(.16, 1, .3, 1); --c-canto: 2px 32px 2px 2px;
  --c-g: var(--ws-gutter, clamp(20px, 3.5vw, 64px)); --c-espaco: clamp(84px, 10vw, 168px);
}
body[data-page="collabs-ed"] .grain-bg { display: none !important; }
body[data-page="collabs-ed"] ::selection { background: var(--c-caramelo); color: var(--c-tinta); }

/* fundos com grão: marfim na página, tinta na Woodstone, verde no fecho e no rodapé (um bloco só no fim) */
.collabs-pagina { background: var(--c-marfim) image-set(url("../img/una-site/grao-marfim-256.jpg") 1x, url("../img/una-site/grao-marfim-512.jpg") 2x, url("../img/una-site/grao-marfim-768.jpg") 3x);
  color: var(--c-tinta); font-family: var(--c-texto); -webkit-font-smoothing: antialiased; }
.collabs-pagina .cl-woodstone { background: var(--c-tinta) image-set(url("../img/woodstone-site/grao-tinta-256.jpg") 1x, url("../img/woodstone-site/grao-tinta-512.jpg") 2x, url("../img/woodstone-site/grao-tinta-768.jpg") 3x);
  color: var(--c-marfim); }
.collabs-pagina .cl-fecho, body[data-page="collabs-ed"] .ws-footer { background: var(--c-verde) image-set(url("../img/woodstone-site/grao-verde-256.jpg") 1x, url("../img/woodstone-site/grao-verde-512.jpg") 2x, url("../img/woodstone-site/grao-verde-768.jpg") 3x);
  color: var(--c-marfim); }
.collabs-pagina, .collabs-pagina .cl-woodstone, .collabs-pagina .cl-fecho, body[data-page="collabs-ed"] .ws-footer { background-size: 256px 256px; background-repeat: repeat; }
body[data-page="collabs-ed"] .ws-footer::before { content: ""; position: absolute; top: 0; left: var(--ws-gutter, 24px); right: var(--ws-gutter, 24px); height: 1px; background: var(--c-regra-clara); }

/* base */
.collabs-pagina :where(section) :is(h1, h2, p, figure) { margin: 0; padding: 0; }
.collabs-pagina :where(section) img { display: block; max-width: none; }
.collabs-pagina section { position: relative; }
.collabs-pagina a:focus-visible { outline: 2px solid var(--c-cobre); outline-offset: 4px; border-radius: 2px; }
.collabs-pagina .cl-woodstone a:focus-visible { outline-color: var(--c-caramelo); }
.collabs-pagina figure { position: relative; overflow: hidden; }
.collabs-pagina figure picture { display: block; width: 100%; height: 100%; }
.collabs-pagina figure img { width: 100%; height: 100%; object-fit: cover; }
.collabs-pagina .cl-frase { font: 500 clamp(44px, 7vw, 124px)/.96 var(--c-display); letter-spacing: -.042em; text-wrap: balance; }
.collabs-pagina .cl-titulo { font: 500 clamp(32px, 3.8vw, 64px)/1.04 var(--c-display); letter-spacing: -.034em; text-wrap: balance; }
.collabs-pagina .cl-nome { font: 500 clamp(52px, 6.4vw, 108px)/.92 var(--c-display); letter-spacing: -.048em; }
.collabs-pagina .cl-texto { font: 400 clamp(17px, 1.3vw, 21px)/1.6 var(--c-texto); max-width: 40ch; text-wrap: pretty; }
.collabs-pagina .cl-rotulo { font: 500 12px/1.5 var(--c-dados); letter-spacing: .14em; text-transform: uppercase; opacity: .74; }
.collabs-pagina .cl-ilustrativa { position: absolute; z-index: 3; right: 12px; bottom: 18%; writing-mode: vertical-rl; transform: rotate(180deg);
  font: 500 10px/1 var(--c-dados); letter-spacing: .18em; text-transform: uppercase; color: var(--c-marfim); text-shadow: 0 0 10px #191711cc; opacity: .85; pointer-events: none; }
.collabs-pagina .cl-seta { width: 22px; height: 22px; flex: none; }
.collabs-pagina .cl-seta path { fill: none; stroke: var(--c-cobre); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--c-saida); }
.collabs-pagina .cl-woodstone .cl-seta path, .collabs-pagina .cl-fecho .cl-seta path { stroke: var(--c-caramelo); }
.collabs-pagina .cl-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 0; color: inherit; text-decoration: none;
  border-bottom: 1px solid currentColor; font: 500 clamp(16px, 1.15vw, 18px)/1.2 var(--c-display); }
@media (hover: hover) { .collabs-pagina :is(.cl-link, .cl-botao, .cl-painel):hover .cl-seta path { transform: translate(3px, -3px); } }

/* 1. abertura: a frase e os três painéis das linhas */
.collabs-pagina .cl-abre { padding: calc(76px + clamp(48px, 7vw, 120px)) 0 0; }
.collabs-pagina .cl-abre-texto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: end; padding: 0 var(--c-g); }
.collabs-pagina .cl-abre .cl-frase { grid-column: 1 / span 8; }
.collabs-pagina .cl-abre .cl-texto { grid-column: 9 / -1; padding-bottom: .5em; }
.collabs-pagina .cl-paineis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: clamp(48px, 5vw, 88px); height: min(78svh, 860px); }
.collabs-pagina .cl-painel { position: relative; display: block; overflow: hidden; color: var(--c-marfim); text-decoration: none; }
.collabs-pagina .cl-painel-foto { position: absolute; inset: 0; }
.collabs-pagina .cl-painel-foto img { transition: transform 1.4s var(--c-saida); }
.collabs-pagina .cl-painel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; pointer-events: none;
  background: linear-gradient(to top, rgba(25,23,17,.78), rgba(25,23,17,.3) 50%, rgba(25,23,17,0)); }
.collabs-pagina .cl-painel-texto { position: absolute; z-index: 2; left: clamp(18px, 2vw, 32px); right: clamp(18px, 2vw, 32px); bottom: clamp(20px, 3vh, 36px); display: grid; gap: 10px; }
.collabs-pagina .cl-painel-nome { font: 500 clamp(30px, 3vw, 52px)/1 var(--c-display); letter-spacing: -.035em; }
.collabs-pagina .cl-painel-tipo { font: 500 11.5px/1.4 var(--c-dados); letter-spacing: .14em; text-transform: uppercase; opacity: .86; }
@media (hover: hover) { .collabs-pagina .cl-painel:hover .cl-painel-foto img { transform: scale(1.035); } }

/* 2 e 4. as linhas: a foto de borda a borda e o texto numa linha de três colunas embaixo */
.collabs-pagina .cl-linha { padding: var(--c-espaco) 0; }
.collabs-pagina .cl-linha-foto { aspect-ratio: 16 / 9; }
.collabs-pagina .cl-woodstone .cl-linha-foto { aspect-ratio: 3168 / 1344; }
.collabs-pagina .cl-linha-texto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 14px; align-items: start;
  padding: clamp(36px, 4vw, 64px) var(--c-g) 0; }
.collabs-pagina .cl-linha-texto .cl-nome { grid-column: 1 / span 5; grid-row: 1; }
.collabs-pagina .cl-linha-texto .cl-rotulo { grid-column: 1 / span 5; grid-row: 2; }
.collabs-pagina .cl-linha-texto .cl-texto { grid-column: 6 / span 4; grid-row: 1 / span 3; }
.collabs-pagina .cl-linha-texto .cl-pecas { grid-column: 6 / span 4; grid-row: 4; }
.collabs-pagina .cl-linha-texto .cl-link { grid-column: 10 / -1; grid-row: 1; justify-self: start; }
.collabs-pagina .cl-pecas { display: flex; flex-wrap: wrap; margin-top: 8px; font: 500 12px/1.4 var(--c-dados); letter-spacing: .12em; text-transform: uppercase; }
.collabs-pagina .cl-pecas a { color: inherit; text-decoration: none; padding: 10px 0; }
.collabs-pagina .cl-pecas a + a::before { content: "·"; margin: 0 10px; opacity: .5; }
@media (hover: hover) { .collabs-pagina .cl-pecas a:hover { color: var(--c-caramelo); } }

/* 3. as collabs: a frase de princípio */
.collabs-pagina .cl-collabs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: end; padding: 0 var(--c-g) var(--c-espaco); }
.collabs-pagina .cl-collabs .cl-titulo { grid-column: 1 / span 7; }
.collabs-pagina .cl-collabs .cl-texto { grid-column: 9 / -1; }

/* 5. Aura Lumina: a foto grande de um lado; do outro, o nome em cima e as duas outras fotos embaixo */
.collabs-pagina .cl-aura { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: 24px; row-gap: 24px; padding: var(--c-espaco) var(--c-g); }
.collabs-pagina .cl-aura-grande { grid-column: 1 / span 6; grid-row: 1 / span 2; aspect-ratio: 3 / 4; border-radius: var(--c-canto); }
.collabs-pagina .cl-aura-texto { grid-column: 7 / -1; grid-row: 1; display: grid; gap: 12px; align-content: start; padding-left: clamp(0px, 2vw, 32px); }
.collabs-pagina .cl-aura-meio { grid-column: 7 / span 3; grid-row: 2; align-self: end; aspect-ratio: 3 / 4; }
.collabs-pagina .cl-aura-alto { grid-column: 10 / -1; grid-row: 2; align-self: end; aspect-ratio: 3 / 4; border-radius: 2px 22px 2px 2px; }
.collabs-pagina .cl-credito { grid-column: 1 / -1; grid-row: 3; font: 500 11.5px/1.5 var(--c-dados); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }

/* 6. fecho, no verde do rodapé */
.collabs-pagina .cl-fecho { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 36px; align-items: end; padding: var(--c-espaco) var(--c-g); }
.collabs-pagina .cl-fecho .cl-frase { grid-column: 1 / span 8; }
.collabs-pagina .cl-botao { grid-column: 9 / -1; justify-self: start; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 58px;
  padding: 0 22px 0 26px; background: var(--c-marfim); color: var(--c-tinta); border-radius: 2px 16px 2px 2px; text-decoration: none; font: 500 clamp(17px, 1.25vw, 20px)/1 var(--c-display); }

/* movimento (só com JS e sem "reduzir movimento"): a câmera lenta nas fotos das linhas */
.cl-vivo .collabs-pagina .cl-camera img { transform: scale(calc(1.02 + .07 * var(--p, 0))); transform-origin: 50% 58%; }

/* tablet (640 a 991) */
@media (max-width: 991.98px) {
  body[data-page="collabs-ed"] .collabs-pagina :is(.cl-abre-texto, .cl-collabs, .cl-fecho) { grid-template-columns: 1fr; }
  body[data-page="collabs-ed"] .collabs-pagina :is(.cl-abre-texto, .cl-collabs, .cl-fecho) > * { grid-column: 1 / -1; }
  .collabs-pagina .cl-paineis { height: min(60svh, 620px); }
  body[data-page="collabs-ed"] .collabs-pagina .cl-linha-texto { grid-template-columns: 1fr; }
  body[data-page="collabs-ed"] .collabs-pagina .cl-linha-texto > * { grid-column: 1 / -1; grid-row: auto; }
  .collabs-pagina .cl-aura-grande { grid-column: 1 / span 7; }
  .collabs-pagina .cl-aura-texto { grid-column: 8 / -1; }
  .collabs-pagina .cl-aura-meio { grid-column: 8 / -1; }
  .collabs-pagina .cl-aura-alto { display: none; }
}
/* celular (< 640) */
@media (max-width: 639.98px) {
  body[data-page="collabs-ed"] { --c-espaco: 76px; }
  .collabs-pagina .cl-paineis { grid-template-columns: 1fr; height: auto; gap: 4px; }
  .collabs-pagina .cl-painel { aspect-ratio: 16 / 10; }
  .collabs-pagina .cl-linha-foto { aspect-ratio: 4 / 5; }
  .collabs-pagina .cl-woodstone .cl-linha-foto { aspect-ratio: 4 / 3; }
  .collabs-pagina .cl-aura { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .collabs-pagina .cl-aura-texto { grid-column: 1 / -1; grid-row: 1; }
  .collabs-pagina .cl-aura-grande { grid-column: 1 / -1; grid-row: 2; }
  .collabs-pagina .cl-aura-meio { grid-column: 1; grid-row: 3; display: block; }
  .collabs-pagina .cl-aura-alto { grid-column: 2; grid-row: 3; display: block; }
  .collabs-pagina .cl-credito { grid-row: 4; }
  .collabs-pagina .cl-botao { width: 100%; }
}