/* ==========================================================================
   Feeling: estilos do site

   Grid:
   - seis colunas, gaps de 2rem e margens laterais fluidas (5vw até 1024px de
     tela, 2,5vw a partir de 1680px), exceto em seções e elementos que ocupam
     100% da janela;
   - o rodapé usa as seis colunas; o cabeçalho divide a largura em três, cada
     uma valendo duas colunas mais um gap, e assim cai sobre o mesmo grid;
   - o conteúdo fica nas quatro colunas centrais, com uma em branco de cada lado;
   - até 1024px tudo colapsa para uma ou duas colunas, e as colunas em branco
     somem: o conteúdo tem a mesma largura de todo o resto.

   Tipografia em rem: fluido no computador (13px em 1024px de tela, 16px a
   partir de 1680px) e 16px no celular.
   ========================================================================== */

/* -------------------------------------------------------------- fonte --- */

@font-face {
	font-family: "Raleway";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/raleway-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Raleway";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/raleway-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------- tokens --- */

:root {
	--preto: #000;
	--branco: #fff;
	--cinza: #888;
	--cinza-claro: #e2e2e2;
	--veu: rgba(0, 0, 0, .8);

	--fonte: "Raleway", "Helvetica Neue", Arial, sans-serif;

	/* px a partir de 1680px de tela */
	--foto-escura: brightness(.6); /* camada preta de 40% sobre a foto */
	--fs-xs: .75rem;      /* 12 */
	--fs-sm: .875rem;     /* 14, absorve 13, 14,4 e 15 */
	--fs-md: 1rem;        /* 16, absorve 18 */
	--fs-lg: 1.3125rem;   /* 21 */
	--fs-xl: 2rem;        /* 32, absorve 28,8 */
	--fs-2xl: 3rem;       /* 48 */
	--fs-3xl: 3.75rem;    /* 60, absorve 57,6 */

	--lh-titulo: 1.2;
	--lh-corpo: 1.5;

	--peso-leve: 300;
	--peso-normal: 400;
	--peso-medio: 500;
	--peso-forte: 600;

	/* Margem do grid: 5vw até 1024px, 2,5vw a partir de 1680px, linear entre os dois. */
	--m: clamp(2.5vw, calc(51.2px - 9.2 * ((100vw - 1024px) / 656)), 5vw);
	--gap: 2rem;          /* gap do grid */

	/*
	 * Ritmo vertical: margens e paddings de seção usam só estes valores. Espaços
	 * internos pequenos (itens de lista, botões) ficam fora da escala.
	 */
	--v2: 2rem;
	--v4: 4rem;
	--v8: 8rem;
	--v12: 12rem;
	--v16: 16rem;
	--v20: 20rem;
	--sec: var(--v4);
	--topo-pagina: 0rem; /* o cabeçalho já entrega os 4rem acima do conteúdo */

	/*
	 * Largura das quatro colunas centrais, em um bloco que ocupa a janela toda.
	 * Fica em % de propósito: resolve no elemento que a usa e, no celular, vira
	 * a largura inteira entre as margens.
	 */
	--central: calc((2 * (100% - 2 * var(--m)) - var(--gap)) / 3);

	--barra-h: 3.375rem;  /* 54 */
	--barra-mobile-h: 4.375rem; /* 70 */

	--t: .25s;
}

html {
	font-size: clamp(13px, calc(13px + (16 - 13) * ((100vw - 1024px) / (1680 - 1024))), 16px);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

html.sem-rolagem { overflow: hidden; }

/* ------------------------------------------------------ reset e base --- */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--branco);
	color: var(--preto);
	font-family: var(--fonte);
	font-size: var(--fs-md);
	font-weight: var(--peso-normal);
	line-height: var(--lh-corpo);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--peso-medio); line-height: var(--lh-titulo); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--cinza); text-decoration: underline; }

button {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.conteudo:focus { outline: 0; }

.pular {
	position: fixed;
	top: -100px;
	left: var(--m);
	z-index: 1000;
	padding: .5rem 1rem;
	background: var(--preto);
	color: var(--branco);
}
.pular:focus { top: .5rem; color: var(--branco); }

/* ---------------------------------------------------------- cabeçalho --- */

.cabecalho { padding: var(--v2) var(--m) var(--v4); }

/* Três colunas: cada uma vale duas do grid mais um gap. */
.cabecalho__grade {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--v2) var(--gap);
	align-items: start;
}

/* O logo ocupa uma coluna do grid: metade da coluna do cabeçalho, menos o gap. */
.cabecalho__logo { display: block; width: calc((100% - var(--gap)) / 2); }
.cabecalho__logo svg, .rodape__logo svg, .barra-fixa__logo svg, .barra-mobile__logo svg { width: 100%; height: auto; }

.cabecalho__colunas { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gap); white-space: nowrap; }

.menu-coluna { font-size: var(--fs-sm); font-weight: var(--peso-medio); line-height: 1.25rem; }
.menu-coluna a { display: block; padding: .25rem 0; }
.menu-coluna .atual > a { text-decoration: underline; }

.cabecalho__acoes {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 2vw;
}

.busca-botao {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .25rem 0;
	font-size: var(--fs-sm);
	font-weight: var(--peso-medio);
	line-height: 1.25rem;
}
.busca-botao:hover { color: var(--cinza); }
.busca-botao svg { width: 1rem; height: 1rem; }

.redes { display: flex; }
.redes a { display: flex; justify-content: center; align-items: center; width: 1.875rem; height: 1.875rem; }
.redes svg { width: 1.125rem; height: 1.125rem; }
.redes li:first-child svg { width: 1.25rem; height: 1.25rem; }

.idiomas { position: relative; font-size: var(--fs-sm); font-weight: var(--peso-medio); line-height: 1.25rem; }
.idiomas a { display: block; padding: .25rem 0; }
.idiomas li:first-child a { display: flex; align-items: center; gap: .5rem; }
.idiomas li:first-child a::after {
	content: "";
	border-top: .3125rem solid currentColor;
	border-inline: .3125rem solid transparent;
}
.idiomas li:not(:first-child) { display: none; }
.idiomas:hover li:not(:first-child),
.idiomas:focus-within li:not(:first-child),
.idiomas.is-aberto li:not(:first-child) { display: block; }
.idiomas ul { position: relative; z-index: 20; background: var(--branco); }

.cabecalho__selo { flex: none; width: 3.125rem; height: auto; }

.cabecalho__produtos { grid-column: 2 / -1; }
.cabecalho__rotulo { font-size: .8125rem; font-weight: var(--peso-forte); line-height: 1; color: var(--cinza); }

.menu-produtos {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2.5rem;
	margin-top: 1.25rem;
	font-size: var(--fs-sm);
	font-weight: var(--peso-medio);
	line-height: 1.25rem;
}
.menu-produtos > li { position: relative; }
.menu-produtos > li > a { display: flex; align-items: center; gap: 1.1875rem; padding: .625rem 0; }
.menu-produtos .tem-filhos > a::after {
	content: "";
	width: .3125rem;
	height: .3125rem;
	margin-top: -.125rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
}
.menu-produtos .atual > a { text-decoration: underline; }
.menu-produtos .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	display: none;
	min-width: 12rem;
	padding: .5rem 1.75rem;
	background: var(--branco);
	white-space: nowrap;
}
.menu-produtos .tem-filhos:hover > .sub-menu,
.menu-produtos .tem-filhos:focus-within > .sub-menu { display: block; }
.menu-produtos .sub-menu a { display: block; padding: .8125rem 0; }

/* ------------------------------------------------- barra preta ao rolar --- */

.barra-fixa {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 90;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	align-items: center;
	column-gap: var(--gap);
	height: var(--barra-h);
	padding: 0 var(--m);
	background: var(--preto);
	color: var(--branco);
	font-size: var(--fs-sm);
	font-weight: var(--peso-medio);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--t) ease-in-out, visibility var(--t);
}
.barra-fixa.is-ativa { opacity: 1; visibility: visible; }
.admin-bar .barra-fixa { top: 32px; }
.barra-fixa a:hover, .barra-fixa .busca-botao:hover { color: var(--cinza); text-decoration: none; }

.barra-fixa__logo { grid-column: 1; display: block; width: 6.25rem; color: var(--branco); }
.barra-fixa__centro { grid-column: 2 / span 4; display: flex; justify-content: center; align-items: center; gap: 1.5rem; }
.barra-fixa__menu { display: flex; gap: 1.5rem; }
.barra-fixa__topo { grid-column: 6; display: flex; justify-self: end; align-items: center; gap: .25rem; }
.barra-fixa__topo svg { width: 1.125rem; height: 1.125rem; }

/* ------------------------------------------------- barra e menu do celular --- */

.barra-mobile, .lateral { display: none; }

.menu-mobile { font-size: var(--fs-sm); font-weight: var(--peso-medio); }
.menu-mobile li { display: flex; flex-wrap: wrap; align-items: center; }
.menu-mobile a { display: block; padding: .25rem 0; line-height: 1.25rem; }
.menu-mobile .atual > a { text-decoration: underline; }
.menu-mobile__seta { width: 1.75rem; height: 1.75rem; }
.menu-mobile__seta::before {
	content: "";
	display: block;
	margin: auto;
	width: 0;
	border-top: .3125rem solid currentColor;
	border-inline: .3125rem solid transparent;
	transition: transform var(--t);
}
.menu-mobile .is-aberto > .menu-mobile__seta::before { transform: rotate(180deg); }
.menu-mobile .sub-menu { display: none; flex-basis: 100%; padding-left: 1rem; font-weight: var(--peso-normal); }
.menu-mobile .is-aberto > .sub-menu { display: block; }

/* -------------------------------------------------------------- busca --- */

.busca__sugestoes { margin: .375rem 0 var(--v2); padding: 0 .625rem .75rem; border-radius: .25rem; background: var(--branco); }
.busca__sugestoes[hidden] { display: none; }
.busca__item { display: flex; align-items: center; gap: .625rem; padding: .625rem 0; border-bottom: 1px solid #e6e6e6; transition: opacity var(--t); }
.busca__item:hover, .busca__item:focus-visible { color: inherit; text-decoration: none; opacity: .7; }
.busca__item-foto { flex: none; width: 5.625rem; height: 3.75rem; }
.busca__item-foto img { width: 100%; height: 100%; object-fit: contain; }
.busca__item-foto--designer img { object-fit: cover; object-position: center top; }
.busca__rodape { display: flex; justify-content: space-between; align-items: center; padding-top: .75rem; font-size: var(--fs-sm); font-weight: var(--peso-medio); }
.busca__paginas { display: flex; align-items: center; gap: .625rem; }
.busca__paginas button { min-width: 1rem; color: var(--cinza); line-height: 1; cursor: pointer; }
.busca__paginas button:hover:not([disabled]), .busca__paginas button[aria-current] { color: var(--preto); }
.busca__paginas button[disabled] { opacity: .4; cursor: default; }
.busca__vazio { padding-top: .75rem; }

.resultados .titulo-secao { padding-bottom: var(--v2); border-bottom: 1px solid var(--preto); }
.resultados__lista { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v2) var(--gap); margin-top: var(--v2); }
.resultados__lista a { display: flex; align-items: center; gap: 1rem; height: 100%; transition: opacity var(--t); }
.resultados__lista a:hover { color: inherit; text-decoration: none; opacity: .7; }
.resultados__foto { flex: none; width: 23%; }
.resultados__foto img { width: 100%; height: auto; }
.resultados__lista h2 { min-width: 0; font-size: var(--fs-xl); font-weight: var(--peso-medio); line-height: var(--lh-titulo); }
.resultados__vazio { margin-top: var(--v2); }
.resultados__paginas { margin-top: var(--v4); }
.resultados__paginas ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.resultados__paginas .current { font-weight: var(--peso-forte); }

.busca {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0 var(--m);
	border: 0;
	background: transparent;
}
.busca::backdrop { background: var(--veu); }

/* Quatro colunas centrais do grid. */
.busca__caixa { position: relative; width: calc((200% - var(--gap)) / 3); margin: var(--v8) auto 0; }

.busca__form { display: flex; overflow: hidden; border-radius: 1.6875rem; background: var(--branco); }
.busca__form input {
	flex: 1;
	min-width: 0;
	height: 3.375rem;
	padding: 0 1.25rem;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--preto);
	font: inherit;
	font-size: var(--fs-lg);
}
.busca__form input::placeholder { color: var(--cinza); opacity: 1; }
.busca__form input::-webkit-search-cancel-button { display: none; }
.busca__form button {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: 0 1.25rem;
	background: var(--branco);
	color: var(--preto);
	transition: background var(--t), color var(--t);
}
.busca__form button:hover { background: var(--preto); color: var(--branco); }
.busca__form svg { width: 1.125rem; height: 1.125rem; }

.busca__fechar { position: absolute; top: -1.25rem; right: calc(-1 * var(--gap) - 1.25rem); color: var(--branco); }
.busca__fechar svg { width: 1.25rem; height: 1.25rem; }

/* ------------------------------------------------------------- rodapé --- */

.rodape { margin-top: var(--v4); padding: var(--v2) var(--m); }

.rodape__grade {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: auto auto;
	gap: var(--v2) var(--gap);
}

.rodape__logo { grid-area: 1 / 1; display: block; }
.rodape__redes { grid-area: 1 / 6; justify-self: end; align-self: start; gap: .375rem; }
.rodape__endereco { grid-area: 2 / 1 / auto / span 2; font-size: var(--fs-xs); line-height: 1.5; }
.rodape__cookies { display: block; margin-top: 1.25rem; }
.rodape__selo, .rodape__mobile { display: none; }

/* Cada menu ocupa as duas linhas: o fio fica na primeira e os links, na segunda. */
.rodape__coluna { display: grid; grid-row: 1 / span 2; grid-template-rows: subgrid; }
.rodape__coluna::before { content: ""; align-self: start; margin-top: .9375rem; border-top: 1px solid var(--preto); }
.rodape__coluna > ul { grid-row: 2; }
.rodape__coluna--1 { grid-column: 3; }
.rodape__coluna--2 { grid-column: 4; }
.rodape__coluna--3 { grid-column: 5; }

/* ------------------------------------------------------ peças comuns --- */

.titulo-secao { font-size: var(--fs-xl); font-weight: var(--peso-medio); line-height: var(--lh-titulo); }
.rotulo { font-size: var(--fs-md); font-weight: var(--peso-forte); line-height: 1; }

.so-celular { display: none !important; }

/* Grid de seis colunas: o conteúdo ocupa 2-3 e 4-5. */
.grade {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	column-gap: var(--gap);
	padding: 0 var(--m);
}
.grade > :nth-child(1) { grid-column: 2 / span 2; }
.grade > :nth-child(2) { grid-column: 4 / span 2; }
.grade > * { min-width: 0; }

.moldura { padding: 1rem; border: 1px solid var(--preto); }
.moldura img { width: 100%; }

/* Cards de produto: três por linha, dentro das quatro colunas centrais. */
.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
	width: var(--central);
	margin: 0 auto;
}

.card { min-width: 0; text-align: center; }
.card a { display: block; }
.card a:hover { color: inherit; text-decoration: none; }
.card__img { display: flex; justify-content: center; align-items: center; aspect-ratio: 1.04; }
.card__img img { width: auto; height: 96%; object-fit: contain; }
.card__titulo { font-size: var(--fs-lg); }
.card__titulo::before {
	content: "";
	display: block;
	width: 2.5rem;
	margin: 0 auto 1.25rem;
	border-top: 1px solid var(--preto);
}
.card a:hover .card__titulo { color: var(--cinza); }

/* Galeria: rolagem nativa com encaixe. */
.galeria__trilho {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.galeria__trilho::-webkit-scrollbar { display: none; }
.galeria__item { flex: 0 0 100%; scroll-snap-align: start; }
.galeria__link { display: block; height: 100%; cursor: pointer; }
.galeria__item img { width: 100%; height: 100%; object-fit: contain; }
.galeria__nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10.25rem;
	margin-top: -1.25rem;
	position: relative;
}
.galeria__nav button { display: flex; color: var(--cinza); }
.galeria__nav button:hover { color: var(--preto); }
.galeria__nav svg { width: 1.5rem; height: 1.5rem; }
.seta-esquerda { transform: scaleX(-1); }

/* Lightbox das galerias. */
.lightbox {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: transparent;
	color: var(--branco);
}
.lightbox:fullscreen { background: var(--preto); }
.lightbox::backdrop { background: var(--veu); }
.lightbox__palco { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; touch-action: pinch-zoom; }
.lightbox__palco img { max-width: none; box-shadow: 0 0 30px rgba(0, 0, 0, .3); opacity: 0; transition: opacity var(--t); }
.lightbox__palco img.is-pronta { opacity: 1; }
.lightbox.is-zoom .lightbox__palco { cursor: zoom-out; }
.lightbox.is-zoom .lightbox__palco img { transform: scale(2); transition: none; }
.lightbox__contador { position: absolute; top: 1.1875rem; left: 1.25rem; z-index: 2; font-size: var(--fs-sm); line-height: 1.4; opacity: .8; }
.lightbox__acoes { position: absolute; top: .875rem; right: .875rem; z-index: 2; display: flex; gap: .875rem; }
.lightbox__acoes button { display: flex; justify-content: center; align-items: center; width: 1.875rem; height: 1.875rem; opacity: .8; transition: opacity var(--t); }
.lightbox__acoes button:hover, .lightbox__acoes button[aria-pressed="true"], .lightbox__acoes button[aria-expanded="true"] { opacity: 1; }
.lightbox__acoes svg { width: 1.25rem; height: 1.25rem; }
.lightbox__compartilhar { position: relative; }
.lightbox__compartilhar ul { position: absolute; top: 100%; right: 0; margin-top: .5rem; padding: .5rem 0; background: var(--branco); color: var(--preto); font-size: var(--fs-sm); white-space: nowrap; }
.lightbox__compartilhar a { display: block; padding: .375rem 1rem; }
.lightbox__seta { position: absolute; top: 50%; z-index: 2; display: flex; width: 3rem; height: 3rem; justify-content: center; align-items: center; transform: translateY(-50%); opacity: .8; transition: opacity var(--t); }
.lightbox__seta:hover { opacity: 1; }
.lightbox__seta svg { width: 1.5rem; height: 1.5rem; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6)); }
.lightbox__seta--ant { left: 6.25%; }
.lightbox__seta--prox { right: 6.25%; }

/* Vídeo: a capa fica até o clique. */
.video, .video__player { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video { position: relative; background: var(--preto); }
.video img { width: 100%; height: 100%; object-fit: cover; }
.video__play { position: absolute; top: 50%; left: 50%; width: 4.25rem; height: 3rem; transform: translate(-50%, -50%); }
.video--capa .video__play { height: 4.25rem; }

/* ------------------------------------------------------------ produto --- */

.produto__titulo { padding: var(--topo-pagina) var(--m) 0; font-size: var(--fs-2xl); }
.titulo-com-traco.produto__titulo::before { margin-bottom: 1.25rem; }

.galeria--conceito { margin-top: var(--v2); }
.galeria--conceito + .produto__principal { margin-top: var(--v4); }

.produto__principal {
	display: grid;
	grid-template-columns: 1fr 2fr;
	column-gap: var(--gap);
	width: var(--central);
	margin: var(--v8) auto var(--v4);
}
.produto__texto .texto { margin-top: 1.1875rem; }

.produto__designer { display: flex; gap: 1.25rem; margin-top: var(--v2); }
.produto__designer:hover { color: inherit; text-decoration: none; }
.produto__designer img { flex: none; width: 6rem; height: 6rem; object-fit: cover; }
.produto__designer strong { display: block; font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.produto__designer em { display: block; max-width: 8rem; margin-top: .375rem; font-size: var(--fs-xl); font-style: normal; font-weight: var(--peso-leve); line-height: 1.15; }

.produto__video { margin-bottom: var(--v8); background: var(--preto); }
.produto__video > * { width: var(--central); margin-inline: auto; }

/*
 * Ficha, vistas e configurações dividem o mesmo grid. A coluna 6 fica para a
 * caixa de downloads, que acompanha a rolagem até o rodapé.
 */
.produto__corpo {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	column-gap: var(--gap);
	padding: 0 var(--m);
}
.produto__ficha { grid-area: 1 / 2 / auto / span 2; }
.produto__vistas { grid-area: 1 / 4 / auto / span 2; }
.produto__lateral { position: relative; z-index: 10; grid-area: 1 / 6 / span 2; pointer-events: none; }
.downloads { position: sticky; top: calc(var(--barra-h) + 1rem); background: var(--branco); pointer-events: auto; }
.admin-bar .downloads { top: calc(var(--barra-h) + 1rem + 32px); }
.produto__vistas-indice { margin-top: 1.25rem; }
.produto__vistas-indice ul { margin-top: 1.25rem; }
.produto__vistas-indice button { display: flex; align-items: center; gap: .625rem; padding: .1875rem 0; }
.produto__vistas-indice svg { width: 1.125rem; height: 1.125rem; }
.produto__vistas-indice [aria-selected="true"] { font-weight: var(--peso-forte); }

.produto__tabela { margin: var(--v2) 0 0; padding-top: var(--v2); border-top: 1px solid var(--preto); font-size: var(--fs-sm); line-height: 1.2; }
.produto__tabela > div { display: grid; grid-template-columns: 1fr 3.5fr; column-gap: 1.25rem; padding-bottom: 1rem; }
.produto__tabela dt { font-weight: var(--peso-forte); }
.produto__tabela dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.produto__selos { display: flex; flex-wrap: wrap; gap: 1.25rem; width: 66%; margin-top: 1.25rem; }
.produto__selos img { width: 9.25rem; }

.produto__vistas img { width: 100%; }

.downloads { border: 1px solid var(--preto); font-size: var(--fs-sm); }
.downloads__titulo { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem; font-size: var(--fs-md); font-weight: var(--peso-forte); line-height: 1.2; }
.downloads__titulo svg { width: 1.6875rem; height: 1.6875rem; }
.produto__ficha, .produto__vistas { min-width: 0; }
.downloads a { display: block; padding: .8125rem 1.25rem; border-top: 1px solid var(--preto); line-height: 1; text-transform: uppercase; }
.downloads a:hover { background: var(--preto); color: var(--branco); text-decoration: none; }

.produto__config { grid-area: 2 / 1 / auto / -1; min-width: 0; margin-top: var(--v4); }
.produto__config .titulo-secao { text-align: center; }
/* Seis colunas: imagem e texto à esquerda; à direita, o texto para antes da coluna 6. */
.produto__config-grade { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--v2) var(--gap); margin-top: var(--v2); }
.config { display: grid; grid-column: span 3; grid-template-columns: subgrid; align-items: start; min-width: 0; }
.config > div:last-child { grid-column: span 2; min-width: 0; }
.config:nth-child(even) > div:last-child { grid-column: span 1; }
.config__img img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.config h3 { font-size: var(--fs-md); font-weight: var(--peso-forte); }
.config__texto { margin-top: var(--v2); }
.config__texto ul { padding-left: 1.5rem; list-style: disc; }

/* ---------------------------------------------------------- categoria --- */

.categoria { padding-top: var(--topo-pagina); }
.categoria__intro { display: flex; flex-direction: column; justify-content: space-between; gap: var(--v2); }
.categoria__intro > div:first-child::before { content: ""; display: block; width: 2.5rem; margin-bottom: var(--v2); border-top: 1px solid var(--preto); }
.categoria__nome { margin-bottom: var(--v2); font-size: var(--fs-md); }
.categoria__lado img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.categoria__lado .texto { margin-top: 1.25rem; }
.categoria .cards { margin-top: var(--v4); }

/* ----------------------------------------------------------- designer --- */

/* Topo com foto entre as margens e caixa de introdução por cima: modelo das páginas com esse formato. */
.topo-foto { padding: 0 var(--m); }
.topo-foto img { width: 100%; height: 60vh; object-fit: cover; }
.topo-foto--escura img { filter: var(--foto-escura); }
.designer .topo-foto img { object-position: center top; } /* rostos ficam no alto da foto */
.caixa-intro { position: relative; width: calc(var(--central) + 5rem); min-height: var(--v8); margin: calc(-1 * var(--v8)) auto 0; padding: var(--v2) 2.5rem; background: var(--branco); }
.caixa-intro .titulo-secao { text-align: center; }
.caixa-intro .texto { margin-top: 0; }
.caixa-intro p, .caixa-intro .texto p + p { margin-top: 1.25rem; }
.caixa-intro .form { margin-top: var(--v2); }
.caixa-intro .campo__erro { margin-top: .25rem; }
.caixa-intro .form__msg { margin-top: 1rem; }
.designer .cards { margin-top: var(--v2); }

/* ------------------------------------------------------------ coleção --- */

.botao {
	display: inline-block;
	padding: .75rem 1.5rem;
	border: 1px solid var(--preto);
	background: var(--branco);
	font-size: .9375rem;
	font-weight: var(--peso-medio);
	line-height: 1;
	transition: background var(--t), color var(--t);
}
.botao:hover { background: var(--preto); color: var(--branco); text-decoration: none; }

.colecao__topo { position: relative; z-index: 1; padding-top: var(--topo-pagina); }
.colecao__topo > div:first-child::before,
.colecao__materiais-texto > div:first-child::before { content: ""; display: block; width: 2.5rem; margin-bottom: var(--v2); border-top: 1px solid var(--preto); }
.colecao__ano { font-size: var(--fs-md); font-weight: var(--peso-medio); line-height: 1.2; }
.colecao__titulo { margin-top: var(--v2); font-size: var(--fs-3xl); font-weight: var(--peso-leve); }
.colecao__topo .texto { margin-top: 0; }

.colecao__fundo { position: relative; width: 100%; margin-top: calc(-1 * var(--v4)); }
.colecao__video { position: relative; width: var(--central); margin: calc(-1 * var(--v4)) auto var(--v2); }

/*
 * Galeria centralizada, em loop: a imagem do meio e as vizinhas aparecendo dos
 * dois lados. A Coleção e o conceito do produto usam o mesmo modelo; muda só a
 * largura do slide, como no site anterior.
 */
.galeria--centro { --slide-w: 49.5vw; --slide-h: 45vw; position: relative; }
.galeria--conceito { --slide-w: 80vw; }
.galeria--centro .galeria__trilho { gap: var(--gap); }
.galeria--centro .galeria__item { flex: 0 0 var(--slide-w); height: var(--slide-h); scroll-snap-align: center; }
.galeria--centro .galeria__item img { object-fit: cover; }
.galeria--centro .galeria__nav {
	position: absolute;
	top: 50%;
	right: 2.5rem;
	left: 2.5rem;
	justify-content: space-between;
	gap: 0;
	margin: 0;
	transform: translateY(-50%);
	pointer-events: none;
}
.galeria--centro .galeria__nav button { color: var(--branco); pointer-events: auto; }
.galeria--centro .galeria__nav button:hover { opacity: .7; }
.galeria--centro .galeria__nav svg { width: 3rem; height: 3rem; stroke-width: .5; }

.colecao__frase { width: var(--central); margin: var(--v4) auto; text-align: center; }

.colecao__designer { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); align-items: center; width: var(--central); margin: 0 auto var(--v4); }
.colecao__designer:hover { color: inherit; text-decoration: none; }
.colecao__designer img { justify-self: end; width: calc((100% - var(--gap)) / 2); aspect-ratio: 1 / 1.06; object-fit: cover; }
.colecao__designer .rotulo { display: block; margin-bottom: .6875rem; }

.colecao__produtos > .titulo-secao { width: var(--central); margin-inline: auto; text-align: center; }
.colecao__produtos .cards { margin-top: var(--v2); }

.colecao__materiais { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); width: var(--central); margin: var(--v4) auto 0; }
.colecao__materiais > * { min-width: 0; }
.colecao__materiais-foto { width: 100%; height: 0; min-height: 100%; object-fit: cover; object-position: right top; }
.colecao__materiais-texto { display: flex; flex-direction: column; gap: var(--v2); }
.colecao__materiais-texto .titulo-secao { margin-top: var(--v2); }
.colecao__materiais-texto .texto { margin-top: var(--v2); }
.colecao__materiais-rodape { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); align-items: start; justify-items: start; }
.colecao__materiais-rodape .moldura { width: 100%; }
.colecao__materiais-rodape img { aspect-ratio: 3 / 2; object-fit: cover; }

/* ------------------------------------------------- peças das páginas --- */

.central { width: var(--central); margin-inline: auto; }
.secao { margin-top: var(--sec); }
.pilha { display: flex; flex-direction: column; justify-content: space-between; gap: var(--v2); min-width: 0; }
.pilha > .botao { align-self: flex-start; }
.traco::before { content: ""; display: block; width: 2.5rem; margin-bottom: var(--v2); border-top: 1px solid var(--preto); }
.eyebrow { font-size: var(--fs-md); font-weight: var(--peso-medio); line-height: 1.2; }
.traco .titulo-secao { margin-top: var(--v2); }
.traco .botao { margin-top: var(--v2); }
.traco > p { margin-top: var(--v2); }
.foto-coluna { width: 100%; height: 0; min-height: 100%; object-fit: cover; }
.titulo-grande { font-size: var(--fs-2xl); }
.botao--escuro { border-color: var(--preto); background: var(--preto); color: var(--branco); }
.botao--escuro:hover { background: var(--branco); color: var(--preto); }

/* --------------------------------------------------------------- home --- */

.hero { padding: 0 var(--m); }
.hero__palco { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--preto); }
.hero__slide { position: absolute; inset: 0; visibility: hidden; transition: transform .6s ease; }
.hero__slide.is-ativo, .hero__slide.is-saindo { visibility: visible; }
.hero__slide video, .hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__slide::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: var(--v8); background: linear-gradient(transparent, rgba(0, 0, 0, .8)); pointer-events: none; }
.hero__titulo { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; display: flex; justify-content: center; align-items: center; height: var(--v8); padding: 0 var(--v8); color: var(--branco); font-size: 3vw; font-weight: var(--peso-leve); text-align: center; }
.hero__titulo a { transition: opacity var(--t); }
.hero__titulo a:hover { color: inherit; text-decoration: none; opacity: .7; }
.hero__seta { position: absolute; bottom: 0; z-index: 2; display: flex; justify-content: center; align-items: center; width: var(--v8); height: var(--v8); color: var(--branco); }
.hero__seta svg { width: 2.25rem; height: 2.25rem; }
.hero__seta--ant { left: 0; }
.hero__seta--prox { right: 0; }

.home__subtitulo { margin-top: 1.25rem; }
.categorias { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: var(--v2); }
.categoria-card { display: block; min-width: 0; }
.categoria-card:hover { color: inherit; text-decoration: none; }
.categoria-card img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.categoria-card span { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; font-size: var(--fs-sm); font-weight: var(--peso-medio); }
.categoria-card span::before { content: ""; width: 2.5rem; border-top: 1px solid var(--preto); }

.home__frase { margin: var(--v8) var(--m); text-align: center; }

.hotspot { position: relative; min-width: 0; }
.hotspot img { width: 100%; }
.hotspot__ponto { position: absolute; display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--branco); font-size: 1.25rem; line-height: 1; transform: translate(-50%, -50%); }
.hotspot__ponto::after { content: attr(data-titulo); position: absolute; bottom: calc(100% + .5rem); left: 50%; padding: .25rem .625rem; background: var(--preto); color: var(--branco); font-size: var(--fs-sm); white-space: nowrap; opacity: 0; transform: translateX(-50%); transition: opacity var(--t); pointer-events: none; }
.hotspot__ponto:hover::after, .hotspot__ponto:focus-visible::after { opacity: 1; }

.popup { width: min(30rem, calc(100% - 2 * var(--m))); padding: 1.25rem; border: 0; color: var(--preto); text-align: center; }
.popup::backdrop { background: rgba(0, 0, 0, .6); }
.popup__topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; text-align: left; font-weight: var(--peso-forte); }
.popup__topo strong { font-weight: inherit; }
.popup__topo button { display: flex; }
.popup__topo svg { width: 1rem; height: 1rem; }
.popup img { width: 100%; }
.popup p { margin: 1.25rem 0; text-align: left; }

.home__catalogos { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: var(--gap); padding: 0 var(--m); }
.home__catalogos > div { grid-column: 2 / span 3; }
.home__catalogos p { margin-top: 1.25rem; }
.home__catalogos .botao { margin-top: 1.25rem; }
.home__catalogos img { grid-column: 5; width: 100%; }

/* -------------------------------------------------------------- sobre --- */


.galeria--justificada { --slide-h: 31.25vw; margin-top: var(--v2); }
.galeria--centro.galeria--justificada .galeria__item { flex: 0 0 auto; }
.galeria--justificada .galeria__item img { width: auto; max-width: none; }

.principios { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--v2) var(--gap); padding: 0 var(--m); }
.principios h3 { display: grid; grid-column: 2 / span 2; grid-template-columns: 1fr 1fr; column-gap: var(--gap); align-items: start; }
.principios h3::after { content: ""; margin-top: .8em; border-top: 1px solid var(--preto); }
.principios p { grid-column: 4 / span 2; }

.sobre__mosaico { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); min-width: 0; }
.sobre__mosaico > div { display: flex; flex-direction: column; gap: var(--gap); }
.sobre__mosaico img { width: 100%; }
.sobre__mosaico a img { aspect-ratio: 1; object-fit: cover; }
.sobre__croquis { height: 0; min-height: 100%; object-fit: contain; }
.sobre__designers .pilha { justify-content: flex-start; }
.video--capa .svg--play-triangulo { width: 6rem; height: 6rem; }

/* ---------------------------------------------------------- designers --- */

.designers { padding-top: var(--topo-pagina); }
.designers__topo { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: var(--gap); padding-bottom: var(--v2); border-bottom: 1px solid var(--preto); }
.designers__topo h1 { grid-column: 1 / span 3; }
.designers__topo li { font-weight: var(--peso-medio); }
.designers__item { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); margin-top: var(--v2); scroll-margin-top: calc(var(--barra-h) + var(--v2)); }
.designers__item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.designers__item h2 { margin-top: 1.25rem; font-size: 1.5rem; }
.designers__item .texto { margin-top: .75rem; }

/* ------------------------------------------------------ onde encontrar --- */

.onde { padding-top: var(--topo-pagina); }
.onde__nome { margin-top: 1.25rem; font-size: 1.5rem; }
.onde__nome + p { margin-top: 1.25rem; }
.onde__rotulo { margin-top: var(--v2); }
.acordeao { margin-top: var(--v2); }
.acordeao summary { display: flex; justify-content: space-between; align-items: center; padding: .625rem; border-bottom: 1px solid var(--preto); font-weight: var(--peso-forte); cursor: pointer; list-style: none; }
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::after { content: "+"; font-weight: var(--peso-forte); }
.acordeao details[open] > summary::after { content: "−"; }
.acordeao details[data-fechando] > summary::after { content: "+"; }
.acordeao__interno summary { padding-left: 1.875rem; }
.onde__lista { padding: 1.25rem 0 0 3.75rem; border-bottom: 1px solid var(--preto); list-style: disc; }
.onde__lista li { padding-bottom: 1.25rem; }

/* ------------------------------------------------------------ formulários --- */

.form { display: grid; grid-template-columns: repeat(10, 1fr); gap: 1rem; }
.campo { min-width: 0; }
.campo--10 { grid-column: span 10; }
.campo--7 { grid-column: span 7; }
.campo--5 { grid-column: span 5; }
.campo--3 { grid-column: span 3; }
.campo label { display: block; margin-bottom: .25rem; font-size: var(--fs-md); }
.campo--obrigatorio:not(.campo--aceite) label::after { content: " *"; color: #c00; }
.campo input:not([type="checkbox"]), .campo textarea, .campo select,
.rep input[type="text"], .rep input[type="password"] {
	width: 100%;
	min-height: 3rem;
	padding: .75rem 1rem;
	border: 1px solid var(--preto);
	border-radius: 0;
	background: var(--branco);
	color: var(--preto);
	font: inherit;
}
.campo input:not([type="checkbox"]), .campo select, .rep input[type="text"], .rep input[type="password"] { height: 3rem; padding-block: 0; }
.campo select {
	padding-right: 2.5rem;
	appearance: none;
	background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3E%3Cpath d='M0 0h10L5 5z'/%3E%3C/svg%3E") no-repeat right 1rem center / .625rem auto;
	cursor: pointer;
}
.campo textarea { display: block; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--cinza); opacity: 1; }
.campo--aceite label { display: flex; align-items: flex-start; gap: .625rem; margin: 0; font-size: var(--fs-md); cursor: pointer; }
.campo--aceite input { flex: none; margin-top: .3rem; accent-color: var(--preto); }
.campo.tem-erro input, .campo.tem-erro textarea, .campo.tem-erro select { border-color: #c00; }
.campo__erro { margin-top: .25rem; color: #c00; font-size: var(--fs-sm); }
.form__isca { position: absolute; left: -9999px; }
.form__fim .botao { width: 100%; cursor: pointer; }
.form__fim .botao[disabled] { opacity: .5; cursor: wait; }
.form__msg { margin-top: 1rem; font-size: var(--fs-sm); }
.form__msg:empty { display: none; }
.form__msg--erro { color: #c00; }

/* ------------------------------------------------------------- catálogos --- */


.downloads-pagina { text-align: center; }
.catalogos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); margin-top: var(--v2); }
.catalogo { width: calc((100% - 3 * var(--gap)) / 4); min-width: 0; text-align: center; }
.catalogo img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }
.catalogo h2 { margin: 1.25rem 0; font-size: var(--fs-lg); }

.sucesso { text-align: center; }
.sucesso__sub { margin-top: var(--v2); font-size: var(--fs-lg); }
.sucesso__redes { display: flex; justify-content: center; gap: var(--v2); margin-top: 1.25rem; }
.sucesso__redes a { display: block; }
.sucesso__redes svg { width: 3.5rem; height: 3.5rem; margin: 0 auto .5rem; }

/* ----------------------------------------------------------- fale conosco --- */

.fale .caixa-intro { padding-bottom: var(--v4); }
.fale .grade-fale { margin-top: 0; }
.fale__lado .titulo-secao { font-size: var(--fs-lg); }
.grade-fale { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: var(--gap); padding: 0 var(--m); }
.fale__lado { display: flex; flex-direction: column; justify-content: space-between; grid-column: 2; gap: var(--v2); min-width: 0; }
.fale__forms { grid-column: 3 / span 3; min-width: 0; }
.fale__abas { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; margin-top: var(--v2); }
.fale__abas button { display: flex; align-items: center; gap: .625rem; text-align: left; }
.fale__abas button::before { content: ""; flex: none; width: .75rem; height: .75rem; border: 1px solid var(--preto); border-radius: 50%; }
.fale__abas [aria-selected="true"]::before { background: var(--preto); box-shadow: inset 0 0 0 2px var(--branco); }
.fale__endereco { font-size: var(--fs-xs); line-height: 1.5; }

/* ------------------------------------------------------------ representante --- */

.rep__colunas { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
.rep__colunas--so-login { grid-template-columns: 1fr 1fr; }
.rep__colunas > div { min-width: 0; }
.rep__colunas .form, .rep form#rep-login { margin-top: var(--v2); }
.rep form#rep-login p { margin-top: 1rem; }
.rep form#rep-login label { display: block; margin-bottom: .25rem; font-size: var(--fs-md); }
.rep form#rep-login input[type="submit"] {
	width: 100%;
	padding: .75rem 1.5rem;
	border: 1px solid var(--preto);
	background: var(--branco);
	color: var(--preto);
	font: inherit;
	font-size: .9375rem;
	font-weight: var(--peso-medio);
	line-height: 1;
	cursor: pointer;
	transition: background var(--t), color var(--t);
}
.rep form#rep-login input[type="submit"]:hover { background: var(--preto); color: var(--branco); }
.rep__esqueci { margin-top: 1rem; font-size: var(--fs-sm); }
.rep__colunas .form__msg--erro { margin-top: 1rem; }
.rep__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap); }
.rep__topo p { margin-top: 1.25rem; }
.rep__topo .botao { flex: none; }
.rep__drive { margin-top: var(--v2); }

/* ---------------------------------------------------------------- eventos --- */

.evento__topo { position: relative; color: var(--branco); }
.evento__topo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 33%, rgb(0 0 0 / .8) 90%); }
.evento__topo img { width: 100%; height: 60vh; object-fit: cover; }
.evento__logo { position: absolute; top: var(--v2); left: var(--m); display: block; width: 10rem; color: var(--branco); }
.evento__logo svg { width: 100%; height: auto; }
.evento__idiomas { display: flex; margin-bottom: 1.25rem; font-size: var(--fs-xs); font-weight: var(--peso-medio); line-height: 1; text-transform: uppercase; }
.evento__idiomas li + li { margin-left: .625rem; padding-left: .625rem; border-left: 1px solid; }
.evento__topo h1 { position: absolute; bottom: var(--v2); left: var(--m); width: calc((100% - 2 * var(--m) - 5 * var(--gap)) / 3 + var(--gap)); font-size: var(--fs-3xl); line-height: var(--lh-titulo); font-weight: var(--peso-leve); }
.evento__corpo { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: var(--gap); padding: 0 var(--m); }
.evento__corpo > div { grid-column: 1 / span 2; min-width: 0; }
.evento__corpo > form { grid-column: 3 / -1; }
.traco-fim p { margin-top: 1.25rem; }
.traco-fim::after { content: ""; display: block; width: 3.5rem; margin-top: var(--v2); border-top: 1px solid var(--preto); }

/* ---------------------------------------------------------------- collabs --- */

.collabs__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: var(--v4); }
.collabs__lista a { display: block; }
.collabs__lista a:hover { color: inherit; text-decoration: none; }
.collabs__lista img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.collabs__lista h2 { margin-top: .625rem; font-size: var(--fs-md); font-weight: var(--peso-medio); }

/*
 * Hotsite. Logos, navegação e idiomas usam mix-blend-mode: difference para
 * aparecer tanto sobre o vídeo quanto sobre o fundo branco. A marca nasce no
 * meio do vídeo e fica presa no topo ao rolar: as margens negativas a tiram do
 * fluxo, e o sticky vale até o fim do artigo.
 */
.collab { --hero-h: 100vh; --marca-h: 3.125rem; display: flow-root; }
.pular-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.collab__marca {
	position: sticky;
	top: 1.25rem;
	z-index: 4;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	height: var(--marca-h);
	margin-top: calc(var(--hero-h) / 2 - var(--marca-h) / 2);
	margin-bottom: calc(-1 * (var(--hero-h) / 2 + var(--marca-h) / 2));
	padding: 0 var(--m);
	color: var(--branco);
	mix-blend-mode: difference;
	pointer-events: none;
}
.collab__marca-logo { flex: none; height: 100%; color: inherit; pointer-events: auto; }
.collab__marca-logo:hover { color: inherit; }
.collab__marca-logo svg { display: block; width: auto; height: 100%; }
.collab__marca-mais { flex: none; font-size: var(--fs-3xl); font-weight: var(--peso-leve); line-height: 1; }
.collab__marca img { width: auto; min-width: 0; height: 100%; object-fit: contain; }

.collab__hero { position: relative; height: var(--hero-h); overflow: hidden; background: var(--preto); }
.collab__hero img, .collab__hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.collab__seta { position: absolute; bottom: var(--v2); left: 50%; width: 1.5rem; color: var(--branco); mix-blend-mode: difference; transform: translateX(-50%) rotate(180deg); }
.collab__seta:hover { color: var(--branco); }
.collab__seta svg { display: block; width: 100%; height: auto; }

.collab__nav, .collab__idiomas { position: fixed; top: 50%; z-index: 3; color: var(--branco); mix-blend-mode: difference; }
.collab__nav { left: var(--m); transform: translateY(-50%); }
.collab__nav ul { display: flex; flex-direction: column; gap: 2.5rem; }
.collab__nav a { display: flex; align-items: center; gap: .875rem; color: inherit; font-size: var(--fs-xs); font-weight: var(--peso-medio); text-transform: uppercase; }
.collab__nav a:hover { color: inherit; text-decoration: underline; }
.collab__nav a::before { content: ""; flex: none; width: .625rem; height: .625rem; border: 1px solid; border-radius: 50%; }
.collab__nav a[aria-current]::before { background: currentColor; }
.collab__idiomas { right: var(--m); display: flex; align-items: center; gap: 1.25rem; font-size: var(--fs-sm); writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); }
.collab__idiomas a, .collab__idiomas a:hover { color: inherit; }
.collab__globo svg { display: block; width: 1rem; height: 1rem; }

.collab__secao { margin-top: var(--v12); scroll-margin-top: var(--v8); }
.collab__secao--fim { margin-bottom: var(--v8); }
.collab__titulo { font-size: var(--fs-2xl); font-weight: var(--peso-medio); line-height: var(--lh-titulo); text-align: center; text-wrap: balance; }
.collab__texto { margin-top: var(--v4); column-count: 2; column-gap: var(--v4); }
.collab__texto p + p { margin-top: 1.25rem; }

.galeria--tres { position: relative; }
.galeria--tres .galeria__trilho { gap: var(--gap); }
.galeria--tres .galeria__item { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); }
.galeria--tres .galeria__item img { aspect-ratio: 4 / 5; object-fit: cover; }
.galeria--tres .galeria__nav {
	position: absolute;
	top: 50%;
	right: .75rem;
	left: .75rem;
	justify-content: space-between;
	gap: 0;
	margin: 0;
	mix-blend-mode: difference;
	transform: translateY(-50%);
	pointer-events: none;
}
.galeria--tres .galeria__nav button { color: var(--branco); pointer-events: auto; }
.galeria--tres .galeria__nav button:hover { color: var(--branco); opacity: .7; }
.galeria--tres .galeria__nav svg { width: 2rem; height: 2rem; stroke-width: .5; }

.collab__videos { display: flex; }
.collab__videos video { flex: 1 1 0; min-width: 0; aspect-ratio: 9 / 16; object-fit: cover; background: var(--preto); }

.collab__bios { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--v4); }
.collab__bio { flex: 0 1 calc(50% - var(--v4) / 2); min-width: 0; }
.collab__bio img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: brightness(.95) contrast(1.05) saturate(0); }
.collab__bio h3 { margin-top: 1.25rem; font-size: var(--fs-lg); font-weight: var(--peso-medio); }
.collab__bio .texto { margin-top: .625rem; }
.collab__ilustrativa img { width: 100%; }

.collab__produtos { display: flex; gap: var(--gap); margin-bottom: var(--v4); }
.collab__produtos > div { flex: 1 1 0; min-width: 0; }
.collab__produtos img { width: 100%; }
.collab__produtos h3 { margin-top: 1rem; font-size: var(--fs-md); font-weight: var(--peso-medio); }
.collab__fade { position: relative; height: 60vh; }
.collab__fade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .6s; }
.collab__fade img.ativa { opacity: 1; }
.collab__conceito { width: calc(50% - var(--gap) / 2); margin: var(--v2) auto 0; }

.collab__chamada { margin-top: var(--v2); text-align: center; }
.collab__contatos { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.25rem; }
.collab__contatos .botao { display: inline-flex; align-items: center; gap: .625rem; }
.collab__contatos svg { flex: none; width: 1rem; height: 1rem; }

/* ----------------------------------------------------------- consentimento --- */

.consent__banner { position: fixed; right: var(--m); bottom: var(--v2); z-index: 20; width: min(30rem, calc(100vw - 2 * var(--m))); padding: 1.5rem; background: var(--branco); box-shadow: 0 .25rem 1.5rem rgba(0, 0, 0, .15); }
.consent__banner[hidden] { display: none; }
.consent__titulo { font-size: var(--fs-lg); font-weight: var(--peso-medio); line-height: 1.2; }
.consent__texto { margin-top: .75rem; font-size: var(--fs-sm); line-height: 1.5; }
.consent__texto a { text-decoration: underline; }
.consent__acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.consent__acoes .botao { flex: 1 1 7rem; padding-inline: .75rem; cursor: pointer; }
.consent__janela { width: min(32rem, calc(100vw - 2 * var(--m))); max-height: calc(100dvh - 2rem); margin: auto; padding: 2rem; border: 0; background: var(--branco); color: var(--preto); }
.consent__janela::backdrop { background: var(--veu); }
.consent__categoria { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--preto); }
.consent__categoria p { margin-top: .375rem; font-size: var(--fs-sm); line-height: 1.5; }
.consent__linha { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
label.consent__linha { cursor: pointer; }
.consent__nome { font-weight: var(--peso-medio); }
.consent__sempre { font-size: var(--fs-sm); color: var(--cinza); }
.consent__chave { position: relative; flex: none; width: 2.75rem; height: 1.5rem; margin: 0; border: 1px solid var(--preto); border-radius: .75rem; background: var(--branco); appearance: none; cursor: pointer; transition: background var(--t); }
.consent__chave::after { content: ""; position: absolute; top: .1875rem; left: .1875rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--preto); transition: transform var(--t), background var(--t); }
.consent__chave:checked { background: var(--preto); }
.consent__chave:checked::after { background: var(--branco); transform: translateX(1.25rem); }
.consent__chave:focus-visible { outline: 2px solid var(--preto); outline-offset: 2px; }

/* ---------------------------------------------------------- privacidade --- */

.privacidade { padding-top: var(--topo-pagina); }
.privacidade h2 { margin-top: var(--v2); font-size: var(--fs-xl); }
.privacidade .texto { margin-top: var(--v2); }
.privacidade .texto p { margin-top: 1rem; }
.privacidade .texto ul { margin-top: 1rem; padding-left: 1.5rem; list-style: disc; }

/* ------------------------------------------------------- páginas simples --- */

.pagina-texto { width: var(--central); margin: var(--topo-pagina) auto var(--sec); }

.titulo-com-traco { font-size: var(--fs-2xl); text-align: center; }
.titulo-com-traco::before {
	content: "";
	display: block;
	width: 2.5rem;
	margin: 0 auto 1.5rem;
	border-top: 1px solid var(--preto);
}

.texto { margin-top: var(--v2); }
.texto p + p { margin-top: 1rem; }
.texto a { text-decoration: underline; }

.pagina-404 { padding: 25vh var(--m); text-align: center; }
.pagina-404 h1 { font-size: var(--fs-xl); }
.pagina-404 p { margin-top: 1rem; }

/* ===================================================== até 1024px: celular --- */

@media (max-width: 64em) {
	html { font-size: 16px; }

	:root {
		--central: calc(100% - 2 * var(--m));
		--topo-pagina: var(--v2); /* a barra do celular é fixa e não dá espaço */
		--fs-2xl: 2.5rem;
		--fs-3xl: 3rem;      /* 48 */
		--logo-w: 5.25rem;   /* 84 */
	}

	.com-cabecalho { padding-top: var(--barra-mobile-h); }

	.cabecalho, .barra-fixa { display: none; }

	.barra-mobile {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 90;
		display: flex;
		align-items: center;
		gap: 1rem;
		height: var(--barra-mobile-h);
		padding: 0 var(--m);
		background: var(--branco);
	}
	.admin-bar .barra-mobile { top: 46px; }
	.barra-mobile__logo { display: block; width: var(--logo-w); margin-right: auto; }
	.barra-mobile__botao { display: flex; justify-content: center; align-items: center; width: 1.5rem; height: 1.5rem; }
	.barra-mobile__botao svg { width: 1.25rem; height: 1.25rem; }

	.lateral {
		position: fixed;
		inset: 0;
		z-index: 100;
		display: block;
		visibility: hidden;
		transition: visibility .4s;
	}
	.lateral.is-aberto { visibility: visible; }
	.lateral__fundo {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, .5);
		opacity: 0;
		transition: opacity .4s;
	}
	.lateral.is-aberto .lateral__fundo { opacity: 1; }
	.lateral__painel {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 18.75rem;
		max-width: 85vw;
		padding: var(--v2) var(--m);
		overflow-y: auto;
		background: var(--branco);
		transform: translateX(100%);
		transition: transform .4s ease;
	}
	.lateral.is-aberto .lateral__painel { transform: none; }
	.lateral__fechar { display: block; margin: 0 0 1.25rem auto; }
	.lateral__fechar svg { width: 1.25rem; height: 1.25rem; }
	.lateral__idiomas { display: flex; gap: 1rem; margin-bottom: 1.25rem; font-size: var(--fs-xs); font-weight: 700; }
	.lateral__idiomas [aria-current] { text-decoration: underline; }

	.busca__caixa { width: 100%; margin-top: var(--v4); }
	.resultados__lista { grid-template-columns: 1fr; }
	.resultados__lista h2 { font-size: var(--fs-lg); }
	.busca__form input { font-size: var(--fs-md); }
	.busca__form button span { display: none; }
	.busca__fechar { top: -2.25rem; right: 0; }

	.lightbox__seta--ant { left: .25rem; }
	.lightbox__seta--prox { right: .25rem; }

	.hero { padding: 0; }
	.hero__titulo { height: var(--v4); padding: 0 var(--v4); font-size: 4.5vw; white-space: nowrap; }
	.hero__slide::after { height: var(--v4); }
	.hero__seta { width: var(--v4); height: var(--v4); }
	.hero__seta svg { width: 1.5rem; height: 1.5rem; }
	.secao { margin-top: var(--v2); }
	.grade { row-gap: var(--v2); }
	.foto-coluna { height: auto; min-height: 0; }
	.categorias { grid-template-columns: 1fr; }
	.home__frase { margin: var(--v4) var(--m); }
	.home__catalogos { grid-template-columns: 1fr; row-gap: var(--v2); }
	.home__catalogos > div, .home__catalogos img { grid-column: 1; }
	.home__catalogos img { order: -1; }
	.topo-foto { padding: 0; }
	.topo-foto img { height: 60vw; }
	.caixa-intro { width: auto; min-height: 0; margin: 0; padding: var(--v2) var(--m); }
	.galeria--justificada { --slide-h: 60vw; }
	.principios { grid-template-columns: 1fr; }
	.principios h3, .principios p { grid-column: 1; }
	.principios h3 { grid-template-columns: 1fr 1fr; }
	.designers__topo { grid-template-columns: 1fr; row-gap: var(--v2); }
	.designers__topo h1 { grid-column: 1; }
	.designers__item { grid-template-columns: 1fr; }
	.titulo-grande { font-size: var(--fs-2xl); }
	.onde__lista { padding-left: 2.5rem; }

	.form > .campo { grid-column: span 10; }
	.catalogo { width: calc((100% - var(--gap)) / 2); }
	.fale .caixa-intro { padding-bottom: var(--v2); }
	.grade-fale, .evento__corpo { grid-template-columns: 1fr; row-gap: var(--v2); }
	.fale__lado, .fale__forms, .evento__corpo > div, .evento__corpo > form { grid-column: 1; }
	.fale__endereco { display: none; }
	.rep__colunas, .rep__colunas--so-login { grid-template-columns: 1fr; row-gap: var(--v4); }
	.rep__topo { flex-direction: column; }
	.evento__logo { width: 6rem; }
	.consent__banner { bottom: var(--m); padding: 1.25rem; }
	.consent__banner .botao { flex-basis: 0; padding-inline: .25rem; font-size: var(--fs-sm); } /* os três do mesmo tamanho: recusar não pode ser menor que aceitar */
	.consent__janela { padding: 1.5rem; }
	.collabs__lista { grid-template-columns: 1fr; }
	.collab { --hero-h: 56.25vw; --marca-h: 1.5rem; }
	.collab__marca { top: .625rem; gap: .625rem; }
	.collab__marca-mais { font-size: var(--fs-xl); }
	.collab__nav { display: none; }
	.collab__idiomas { position: absolute; top: .625rem; right: var(--m); gap: .75rem; writing-mode: horizontal-tb; transform: none; }
	.collab__secao { margin-top: var(--v4); }
	.collab__secao--fim { margin-bottom: 0; }
	.collab__titulo { font-size: var(--fs-xl); }
	.collab__texto { margin-top: var(--v2); column-count: 1; }
	.galeria--tres .galeria__item { flex-basis: 100%; }
	.collab__videos { flex-direction: column; }
	.collab__videos video { flex: none; width: 100%; }
	.collab__bio { flex-basis: 100%; }
	.collab__produtos { flex-direction: column; }
	.collab__conceito { width: 100%; }
	.evento__topo img { height: auto; max-height: 75vh; } /* no celular, o banner aparece inteiro; no tablet, não passa da tela */
	.evento__topo h1 { right: var(--m); width: auto; font-size: var(--fs-xl); }

	.so-celular { display: flex !important; }
	.so-computador { display: none !important; }

	.grade, .produto__corpo, .produto__principal, .produto__config-grade { grid-template-columns: 1fr; }
	.grade > :nth-child(n) { grid-column: 1; }
	.produto__ficha, .produto__vistas, .produto__config, .produto__lateral { grid-area: auto; }
	.config { grid-column: 1; grid-template-columns: 1fr; }
	.config > div:last-child, .config:nth-child(even) > div:last-child { grid-column: 1; }

	.titulo-secao { font-size: var(--fs-xl); }

	.cards { grid-template-columns: 1fr 1fr; }
	.card__img { aspect-ratio: 1.12; }
	.card__titulo { font-size: var(--fs-md); }
	.card__titulo::before { margin-bottom: 1rem; }

	.produto__principal, .galeria--conceito + .produto__principal { row-gap: var(--v2); margin: var(--v2) auto; }
	.galeria__nav { gap: 2.5rem; margin-top: .75rem; }
	.produto__video { margin-bottom: var(--v2); }
	.produto__corpo { row-gap: var(--v2); }
	.produto__lateral { order: -1; pointer-events: auto; }
	.downloads { position: static; }
	.produto__ficha { display: flex; flex-direction: column; gap: var(--v2); }
	.produto__tabela, .produto__selos, .produto__vistas-indice { margin-top: 0; }
	.produto__vistas-indice { order: 5; }
	.produto__config { margin-top: 0; }
	.config { row-gap: var(--v2); }

	.categoria .cards { margin-top: var(--v2); }


	.colecao { display: flex; flex-direction: column; }
	.colecao__fundo { margin-top: 0; }
	.colecao__video { margin: calc(-1 * var(--v2)) auto var(--v2); }
	.galeria--centro { --slide-w: 100vw; --slide-h: 108vw; }
	.galeria--conceito { --slide-h: 173vw; }
	.galeria--conceito .galeria__item img { object-position: left center; }
	.galeria--centro .galeria__nav { top: 81%; right: .625rem; left: .625rem; }
	.colecao__frase { margin: var(--v2) auto; font-size: var(--fs-lg); }
	.colecao__produtos { order: 1; }
	.colecao__designer { order: 2; grid-template-columns: 1fr; row-gap: var(--v2); margin: var(--v2) auto; }
	.colecao__designer img { justify-self: stretch; width: 100%; }
	.colecao__materiais { order: 3; grid-template-columns: 1fr; row-gap: var(--v2); margin: 0 auto; }
	.colecao__materiais-foto { height: auto; min-height: 0; aspect-ratio: 350 / 467; }
	.colecao__materiais-rodape { grid-template-columns: 1fr; row-gap: var(--v2); }

	.rodape { margin-top: var(--v4); }
	.rodape__grade { grid-template-columns: 1fr 1fr; grid-template-rows: none; row-gap: 0; align-items: start; }
	.rodape__logo, .rodape__endereco, .rodape__selo { grid-area: auto / 1; }
	.rodape__logo { padding-top: var(--v2); border-top: 1px solid var(--preto); }
	.rodape__logo svg { width: var(--logo-w); }
	.rodape__endereco { margin-top: var(--v2); }
	.rodape__selo { display: block; width: 3.125rem; height: auto; margin-top: var(--v2); }
	.rodape__redes, .rodape__coluna { display: none; }
	.rodape__mobile {
		display: block;
		grid-column: 2;
		grid-row: 1 / span 4;
		padding-top: var(--v2);
		border-top: 1px solid var(--preto);
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; }
}