/*
 * Marta Manente — Home: abertura cinematográfica.
 * Só transform/opacity animam (compositor); o movimento é todo do GSAP (motion.js).
 *
 * Projeto Gerado pelo Prompt Mestre do Desenvolvedor e Vibe Coder Dante Testa — www.dantetesta.com.br
 */

html.mm-js { scroll-behavior: smooth; }

/* Palco: vídeo em tela cheia (uma tela de altura; a rolagem segue direto para o conteúdo). */
.mm-hero { position: relative; height: 100svh; background: var(--mm-black); }
.mm-hero__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
	background: var(--mm-black);
	contain: paint;
}
.admin-bar .mm-hero__stage { top: 0; }

.mm-hero__poster, .mm-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: 50% 50%;
	will-change: transform;
}

/* Seta "rolar": mesma imagem, tamanho e posição do site atual (reduzida: 5% da largura; 30% no celular). Sempre visível. */
.mm-hero__hint {
	position: absolute;
	left: 50%;
	bottom: 2vw;
	width: 5%;
	transform: translateX(-50%);
	line-height: 0;
}
.mm-hero__hint { aspect-ratio: 1000 / 532; }
/* Seta "role": a mesma do GIF antigo (V branco fino que sobe e desce), agora um SVG minúsculo (<1 KB) animado pelo GSAP (o GIF tinha 235 KB e era o elemento mais pesado da capa). */
.mm-hero__chev { position: absolute; left: 33.6%; top: 54.9%; width: 30.3%; height: 29.5%; max-width: none; }

/* Cabeçalho da Home: fica logo abaixo do vídeo, sobe com a rolagem e gruda no topo (como hoje). */
.home .mm-header-spacer { display: none; }

@media (max-width: 767px) {
	.mm-hero__hint { width: 30%; }
}

@media (prefers-reduced-motion: reduce) {
	html.mm-js { scroll-behavior: auto; }
}

/* =====================================================================
 * Seções da Home
 * ===================================================================== */
.mm-home {
	--mm-header-h: 109px;
	--mm-block-w: 420px; /* largura única dos blocos de texto → texto de apoio igual em todas as seções */
	--mm-full-h: calc(100svh - var(--mm-header-h));
	--mm-ease: cubic-bezier(.22, 1, .36, 1);
	--mm-ease-io: cubic-bezier(.76, 0, .24, 1);
	font-family: var(--mm-font);
}
.home .mm-footer__bar { margin-top: 0; }

/* Bloco de texto: traço · título · texto de apoio · botão (gap 24px, título 45px/500, texto 15px como no site atual). */
.mm-block { display: flex; flex-direction: column; align-items: center; gap: 24px; width: min(100%, var(--mm-block-w)); text-align: center; }
.mm-block > * { margin: 0; }
.mm-block p { font-size: 15px; font-weight: 400; line-height: 1.5; }
.mm-divider { display: block; width: 150px; height: 2px; background: currentColor; transform-origin: 50% 50%; }
.mm-title { font-size: 45px; font-weight: 500; line-height: 1.2; letter-spacing: 2px; text-transform: uppercase; }
.home .mm-title { font-size: clamp(40px, 5vw, 72px); } /* Home: títulos de seção em 72px (desktop), reduzindo com a tela */
.mm-title__mask { display: block; overflow: hidden; padding: .04em 0 .12em; }
.mm-title__in { display: block; }
.mm-fade { display: block; }

.mm-btn--ghost { color: var(--mm-white); background-color: transparent; border-color: var(--mm-white); }
.mm-btn--ghost:hover, .mm-btn--ghost:focus { color: var(--mm-white); background-color: var(--mm-black); }
.mm-btn--tag { padding: 2px; border: 0; background-color: transparent; }
.mm-btn--tag:hover, .mm-btn--tag:focus { background-color: transparent; color: var(--mm-link-hover); }

/* ---------- Indoor / Outdoor: cartas empilhadas (altura total da tela) ---------- */
.mm-stack { position: relative; background: var(--mm-black); }
.mm-card { position: sticky; top: var(--mm-header-h); height: var(--mm-full-h); min-height: 460px; overflow: hidden; color: var(--mm-white); background: var(--mm-black); }
.mm-card { margin-bottom: var(--mm-hold, 30svh); } /* pausa: a carta fica inteira na tela antes da próxima seção subir */
.mm-stack > .mm-duo { position: relative; z-index: 1; } /* o Studio sobe cobrindo a Galleria */
.mm-card__inner { position: absolute; inset: 0; transform-origin: 50% 0; will-change: transform; }
.mm-card__img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; max-width: none; object-fit: cover; will-change: transform; }
.mm-card__shade { position: absolute; inset: 0; background: #000; opacity: .5; }
.mm-card__cover { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.mm-card__body { position: relative; z-index: 1; display: grid; place-items: center; height: 100%; padding: 5%; }

/* ---------- Galleria (altura total) ---------- */
.mm-gal { position: relative; display: grid; place-items: center; height: var(--mm-full-h); min-height: 520px; overflow: hidden; color: var(--mm-white); background: var(--mm-black); }
.mm-gal__media { position: absolute; inset: 0; overflow: hidden; }
.mm-gal__img { width: 100%; height: 100%; max-width: none; object-fit: cover; transform-origin: 50% 50%; will-change: transform; }
.mm-gal__shade { position: absolute; inset: 0; background: #000; opacity: .5; }
.mm-gal__body { position: relative; z-index: 1; display: grid; place-items: center; padding: 5%; }

/* ---------- O Studio / A designer: 50% imagem · 50% texto, altura total ---------- */
.mm-duo { display: grid; grid-template-columns: 1fr 1fr; min-height: var(--mm-full-h); background: var(--mm-white); overflow: hidden; }
.mm-duo__text { display: flex; align-items: center; justify-content: center; padding: clamp(28px, 4vw, 96px); will-change: transform; }
.mm-duo .mm-block { align-items: flex-start; text-align: left; }
.mm-duo .mm-divider { transform-origin: 0 50%; }
.mm-duo__media { position: relative; min-height: 0; overflow: hidden; }
.mm-duo--designer .mm-duo__media { order: -1; }
.mm-wipe { position: absolute; inset: 0; overflow: hidden; }
.mm-duo__img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; max-width: none; object-fit: cover; object-position: center center; will-change: transform; }
.mm-duo__img--left { object-position: center left; }

/* ---------- Siga + feed ---------- */
.mm-siga { display: flex; justify-content: center; align-items: center; min-height: 200px; padding: 30px 20px; background: var(--mm-gray-bg); color: var(--mm-black); }
.mm-feed { padding: 0 10px; background: var(--mm-gray-bg); }

/* ---------- Tablet retrato / celular ---------- */
@media (max-width: 900px) {
	.mm-duo { grid-template-columns: 1fr; }
	.mm-duo--designer .mm-duo__media { order: 0; }
	.mm-duo__text { padding: clamp(40px, 9vw, 72px) 7vw; }
	.mm-duo .mm-block { align-items: center; text-align: center; }
	.mm-duo .mm-divider { transform-origin: 50% 50%; }
	.mm-duo__media { height: 78svh; min-height: 420px; }
}
@media (max-width: 480px) {
	.mm-title { font-size: 44px; }
	.mm-home { --mm-block-w: 100%; }
}

/* ---------- Movimento (só se o usuário não pediu para reduzir) ---------- */
/* Estado inicial dos blocos; a entrada em sequência (traço → título → texto → botão) é do GSAP (motion.js). */
@media (prefers-reduced-motion: no-preference) {
	html.mm-js [data-mm-reveal] .mm-divider,
	html.mm-js [data-mm-reveal] .mm-title__in,
	html.mm-js [data-mm-reveal] .mm-fade { opacity: 0; }
}

/* O Studio / Galleria / A designer: o bloco de texto começa no topo, na mesma altura (e na mesma borda esquerda do logo)
   das demais páginas — em vez de centralizado na vertical. */
@media (min-width: 901px) {
	.mm-about .mm-duo__text { align-items: flex-start; padding-top: 70px; }
	.mm-about .mm-duo--studio .mm-duo__text { justify-content: flex-start; padding-left: max(var(--mm-gutter), calc((100vw - var(--mm-wrap-max)) / 2)); }
}

/* =====================================================================
 * Página Sobre
 * ===================================================================== */
.mm-motion-page .mm-header-spacer { display: none; }
.mm-about section[id] { scroll-margin-top: var(--mm-header-h); }
.mm-about .mm-block { --mm-block-w: 460px; }
.mm-prose { color: #464646; }
.mm-prose p { margin: 0 0 1em; font-size: 15px; line-height: 1.6; }
.mm-prose p:last-child { margin-bottom: 0; }

/* Vídeo (YouTube): poster local; o player só é criado ao clicar. */
.mm-duo__media--video { background: var(--mm-black); }
.mm-yt { position: absolute; inset: 0; }
.mm-yt__poster { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; max-width: none; object-fit: cover; will-change: transform; }
.mm-yt__shade { position: absolute; inset: 0; background: #000; opacity: .25; transition: opacity .5s; }
.mm-yt:hover .mm-yt__shade { opacity: .1; }
.mm-yt__btn { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; padding: 0; transform: translate(-50%, -50%); background: var(--mm-white); border: 2px solid var(--mm-white); cursor: pointer; transition: background-color var(--mm-transition), transform .5s var(--mm-ease); }
.mm-yt__icon { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -11px 0 0 -7px; border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent var(--mm-black); transition: border-color var(--mm-transition); }
.mm-yt__btn:hover, .mm-yt__btn:focus-visible { background: transparent; transform: translate(-50%, -50%) scale(1.06); }
.mm-yt__btn:hover .mm-yt__icon, .mm-yt__btn:focus-visible .mm-yt__icon { border-left-color: var(--mm-white); }
.mm-yt.is-playing .mm-yt__btn, .mm-yt.is-playing .mm-yt__shade { display: none; }
.mm-yt__frame { position: absolute; left: 50%; top: 0; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; transform: translateX(-50%); background: #000; }
.mm-yt.is-playing .mm-yt__poster { filter: brightness(.35); }
.mm-yt__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) { .mm-duo__media--video { height: 82svh; } }

/* =====================================================================
 * Assessoria Corporativa
 * ===================================================================== */
.mm-adv { display: flex; align-items: flex-start; padding: clamp(56px, 10vh, 120px) 0 clamp(40px, 6vh, 80px); background: var(--mm-white); overflow: hidden; }
.mm-adv__inner { width: 100%; max-width: calc(var(--mm-wrap-max) + 2 * var(--mm-gutter)); margin: 0 auto; padding: 0 var(--mm-gutter); }

/* Cabeçalho editorial (Assessoria e categorias): título com traço à esquerda · texto à direita, na largura do site. */
.mm-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 120px); align-items: start; width: 100%; }
.mm-split__head { display: flex; flex-direction: column; align-items: flex-start; }
.mm-split__head .mm-divider { margin-bottom: 30px; transform-origin: 0 50%; }
.mm-split__head .mm-title { margin: 0 0 6px; }
.mm-split__text { padding-top: 44px; color: #464646; } /* ocupa toda a largura restante, até a borda do site; 1ª linha na altura da 1ª linha do título */
.mm-split__text p { margin: 0 0 1.3em; font-size: 15px; font-weight: 400; line-height: 1.9; text-align: left; }
.mm-split__text p:last-child { margin-bottom: 0; }
@media (max-width: 1024px) {
	.mm-split { grid-template-columns: 1fr; justify-items: center; row-gap: 28px; }
	.mm-split__head { align-items: center; text-align: center; }
	.mm-split__text { padding-top: 0; max-width: 660px; }
}
@media (max-width: 767px) { .mm-split__text p { text-align: center; } }

/* =====================================================================
 * Galleria (loja física)
 * ===================================================================== */
.mm-gal--photo { display: block; }

/* =====================================================================
 * Contato: metade cinza claro (título, frase, dados) + metade branca (formulário de linhas finas)
 * ===================================================================== */
.mm-c2 { display: grid; grid-template-columns: 1fr 1fr; min-height: var(--mm-full-h); }
.mm-c2__side { padding: clamp(40px, 6vw, 110px) clamp(28px, 5vw, 96px); color: var(--mm-white); background: linear-gradient(35deg, #000 0%, #0a0a0a 45%, #2a2a2a 100%); }
.mm-c2__sticky { position: sticky; top: calc(var(--mm-header-h) + clamp(24px, 5vh, 56px)); }
.mm-c2 .mm-block { --mm-block-w: 460px; align-items: flex-start; text-align: left; gap: clamp(22px, 3.4vh, 34px); }
.mm-c2 .mm-divider { transform-origin: 0 50%; }
.mm-c2__lead { font-size: clamp(20px, 2.2vw, 30px) !important; font-weight: 500; line-height: 1.3 !important; letter-spacing: .3px; color: var(--mm-white); }
.mm-c2__name { margin: 0 0 12px; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 2px; text-transform: uppercase; color: var(--mm-white); }
.mm-c2__address { margin: 0 0 18px; font-size: 13px !important; font-weight: 500; line-height: 1.6 !important; letter-spacing: 1.5px; color: var(--mm-gray-sub); }
.mm-c2 .mm-social { margin-bottom: 22px; }
.mm-c2__map { display: inline-block; position: relative; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--mm-white); padding-bottom: 4px; }
.mm-c2__map::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: 0 50%; transition: transform .5s var(--mm-ease); }
.mm-c2__map:hover { color: var(--mm-white); }
.mm-c2 .mm-title { color: var(--mm-white); }
.mm-c2__side :focus-visible { outline-color: var(--mm-white); }
.mm-c2 .mm-social__icon { color: var(--mm-white); background: transparent; border-color: rgba(255, 255, 255, .7); }
.mm-c2 .mm-social__icon:hover, .mm-c2 .mm-social__icon:focus { color: var(--mm-black); background: var(--mm-white); border-color: var(--mm-white); }
.mm-c2__map:hover::after { transform: scaleX(.35); }

.mm-c2__main { display: flex; align-items: flex-start; justify-content: center; padding: clamp(40px, 6vw, 110px) clamp(28px, 5vw, 96px); background: var(--mm-white); }
.mm-c2__form { width: 100%; max-width: 560px; }

.mm-form { display: grid; gap: clamp(22px, 3.2vh, 32px); }
.mm-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mm-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.mm-form__row--cidade { grid-template-columns: 3fr 1fr; }
.mm-field { position: relative; border-bottom: 1px solid #d8d8d8; }
.mm-field::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--mm-black); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--mm-ease); }
.mm-field:focus-within::after { transform: scaleX(1); }
.mm-field label { display: block; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--mm-gray-address); }
.mm-field input, .mm-field textarea { display: block; width: 100%; padding: 10px 0 12px; font: 400 15px/1.4 var(--mm-font); color: var(--mm-black); background: transparent; border: 0; border-radius: 0; outline: none; }
.mm-field textarea { resize: vertical; min-height: 84px; }

.mm-choice { margin: 6px 0 0; padding: 0; border: 0; }
.mm-choice legend { margin: 0 0 12px; padding: 0; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--mm-gray-address); }
.mm-opt { position: relative; }
.mm-opt input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.mm-opt + .mm-opt { margin-top: 10px; }
.mm-check { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 500; color: var(--mm-black); cursor: pointer; }
.mm-check__box { position: relative; flex: none; width: 20px; height: 20px; border: 1.5px solid var(--mm-black); transition: background-color var(--mm-transition); }
.mm-check__box::after { content: ""; position: absolute; inset: 3px; background: var(--mm-black); transform: scale(0); transition: transform .35s var(--mm-ease); }
.mm-opt input:checked + .mm-check .mm-check__box::after { transform: scale(1); }
.mm-opt input:focus-visible + .mm-check .mm-check__box { outline: 2px solid var(--mm-black); outline-offset: 3px; }
/* A descrição só aparece para a opção escolhida. */
.mm-opt__desc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--mm-ease); }
.mm-opt__desc > p { min-height: 0; margin: 0; overflow: hidden; padding-left: 34px; font-size: 13px; line-height: 1.7; color: #464646; opacity: 0; transition: opacity .4s ease; }
.mm-opt input:checked ~ .mm-opt__desc { grid-template-rows: 1fr; }
.mm-opt input:checked ~ .mm-opt__desc > p { opacity: 1; padding-top: 10px; padding-bottom: 4px; }
.mm-opt--news .mm-check { font-size: 15px; }
.mm-form__actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.mm-form__notice { margin: 0 0 24px; padding: 14px 18px; background: var(--mm-gray-bg); font-size: 15px; font-weight: 500; color: var(--mm-black); }


@media (max-width: 900px) {
	.mm-c2 { grid-template-columns: 1fr; }
	.mm-c2__sticky { position: static; }
	.mm-c2__side { padding-bottom: clamp(32px, 8vw, 56px); }
	.mm-form__row, .mm-form__row--cidade { gap: 18px; }
	.mm-form__row--cidade { grid-template-columns: 3fr 1fr; }
}
@media (max-width: 480px) { .mm-form__row:not(.mm-form__row--cidade) { grid-template-columns: 1fr; } }