/* ==========================================================================
   UJIMA Studio — estilos do tema (complemento ao theme.json)
   Segue o Guia de Logotipo v.01 (Out. 2026): Geologica; amarelo #FFDD00,
   preto #000000, ardósia #303B45, roxo #B158FF; amarelo predominante.
   ========================================================================== */

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

:root {
	--u-amarelo: var(--wp--preset--color--amarelo, #FFDD00);
	--u-ardosia: var(--wp--preset--color--ardosia, #303B45);
	--u-roxo: var(--wp--preset--color--roxo, #B158FF);
	--u-preto: var(--wp--preset--color--preto, #000000);
	--u-branco: var(--wp--preset--color--branco, #FFFFFF);
	--u-tom-amarelo: var(--wp--custom--tons--amarelo, #EBCB00);
	--u-tom-ardosia: var(--wp--custom--tons--ardosia, #29323B);
	--u-tom-roxo: var(--wp--custom--tons--roxo, #9E44F5);
	--u-ease: cubic-bezier(.2, .7, .2, 1);
	--u-bounce: cubic-bezier(.34, 1.56, .64, 1);
	--u-raio: var(--wp--custom--raio, 24px);
	--u-canto: var(--wp--custom--canto, clamp(72px, 12vw, 220px));
	--ujima-header-h: var(--wp--custom--cabecalho, 84px);
	/* Cores de cada secção (redefinidas abaixo consoante o fundo) */
	--u-etiqueta: var(--u-roxo);
	--u-caixa-fundo: var(--u-amarelo);
	--u-caixa-texto: var(--u-ardosia);
	--u-grafismo: var(--u-tom-amarelo);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--u-amarelo); color: var(--u-ardosia); }
:focus-visible { outline: 2px solid var(--u-roxo); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
strong, b { font-weight: 700; }

/* Cores por fundo ------------------------------------------------------------ */

.has-amarelo-background-color { --u-etiqueta: var(--u-ardosia); --u-caixa-fundo: var(--u-ardosia); --u-caixa-texto: var(--u-amarelo); --u-grafismo: var(--u-tom-amarelo); }
.has-ardosia-background-color { --u-etiqueta: var(--u-amarelo); --u-caixa-fundo: var(--u-amarelo); --u-caixa-texto: var(--u-ardosia); --u-grafismo: var(--u-tom-ardosia); }
.has-preto-background-color   { --u-etiqueta: var(--u-amarelo); --u-caixa-fundo: var(--u-amarelo); --u-caixa-texto: var(--u-ardosia); --u-grafismo: #141414; }
.ujima-topo--animacao { --u-etiqueta: var(--u-ardosia); --u-caixa-fundo: var(--u-ardosia); --u-caixa-texto: var(--u-amarelo); }
.ujima-topo--video { --u-etiqueta: var(--u-amarelo); --u-caixa-fundo: var(--u-amarelo); --u-caixa-texto: var(--u-ardosia); }
.has-roxo-background-color    { --u-etiqueta: var(--u-branco); --u-caixa-fundo: var(--u-amarelo); --u-caixa-texto: var(--u-ardosia); --u-grafismo: var(--u-tom-roxo); }

/* As secções encostam umas às outras */
.wp-site-blocks > main, .wp-site-blocks > .ujima-footer-part, .wp-site-blocks > footer { margin-block-start: 0; }
.ujima-inicio, .ujima-pagina-livre { padding-block: 0; }
.ujima-inicio > *, .ujima-pagina-livre > .wp-block-post-content > .alignfull { margin-block: 0 !important; }
.wp-site-blocks { overflow-x: clip; }

/* Cabeçalho: barra amarela, logótipo web (sem assinatura) em ardósia ---------- */

.ujima-header-part {
	position: sticky; top: 0; z-index: 50;
	background: var(--u-amarelo); color: var(--u-ardosia);
	transition: transform .45s var(--u-ease), box-shadow .4s;
}
.has-topo .ujima-header-part:not(.is-scrolled) { background: transparent; }
.ujima-header-part { transition: transform .45s var(--u-ease), box-shadow .4s, background-color .3s; }
.ujima-header-part.is-scrolled { box-shadow: 0 1px 0 rgba(48, 59, 69, .12); }
.ujima-header-part.is-hidden { transform: translateY(-100%); }
.admin-bar .ujima-header-part { top: var(--wp-admin--admin-bar--height, 32px); }
.ujima-header { min-height: var(--ujima-header-h); gap: 32px; padding-inline: var(--wp--style--root--padding-left) !important; }
/* Logótipo: mínimo de 60 px em digital (guia, p. 9); a área de reserva fica garantida pelo espaço à volta */
.ujima-header .wp-block-site-logo img { width: auto; height: 34px; min-width: 60px; }
.ujima-nav { flex: 1; margin-left: 32px; }
.ujima-nav .wp-block-navigation-item__content { position: relative; padding-block: 8px; color: var(--u-ardosia); font-weight: 500; text-decoration: none; }
.ujima-nav .wp-block-navigation-item__content::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; border-radius: 3px; background: var(--u-ardosia); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--u-ease); }
.ujima-nav .wp-block-navigation-item__content:hover::after, .ujima-nav .is-current > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.ujima-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--u-amarelo); color: var(--u-ardosia); padding: 24px; }
.ujima-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 34px; font-weight: 700; padding-block: 10px; }
.ujima-header__cta .wp-block-button__link { padding: 11px 22px; font-size: 15px; background: var(--u-ardosia); border-color: var(--u-ardosia); color: var(--u-amarelo); }
.ujima-header__cta .wp-block-button__link:hover { background: var(--u-preto); border-color: var(--u-preto); color: var(--u-amarelo); }
@media (max-width: 781px) {
	.ujima-header__cta { display: none !important; }
	.ujima-nav { margin-left: auto; flex: 0; }
}

/* Botões ------------------------------------------------------------------- */

.wp-block-button__link { transition: background .25s, color .25s, border-color .25s, transform .3s var(--u-bounce); }
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: inherit; border-color: currentColor; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: currentColor; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { color: var(--u-amarelo); background: var(--u-ardosia); border-color: var(--u-ardosia); }
.has-amarelo-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link, .ujima-topo--animacao .wp-block-button:not(.is-style-outline) > .wp-block-button__link { background: var(--u-ardosia); border-color: var(--u-ardosia); color: var(--u-amarelo); }
.has-amarelo-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover, .ujima-topo--animacao .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: var(--u-preto); border-color: var(--u-preto); }
.has-ardosia-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-preto-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-roxo-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--u-amarelo); border-color: var(--u-amarelo); color: var(--u-ardosia); }

/* Estilos da marca ----------------------------------------------------------- */

/* Título com destaque em caixa: o texto em itálico ganha a caixa (como na p. 3 do guia) */
.is-style-duas-linhas em {
	font-style: normal; display: inline;
	background: var(--u-caixa-fundo); color: var(--u-caixa-texto);
	padding: 0 .18em; margin-inline: -.06em;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
	line-height: 1.16;
}

/* Etiqueta de secção: "01 / O QUE FAZEMOS", como "LOGOTIPO" no guia */
.is-style-etiqueta, .wp-block-post-terms.is-style-etiqueta {
	display: flex; align-items: center; gap: 14px; margin-bottom: clamp(24px, 3vw, 40px);
	font-size: 14px !important; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: var(--u-etiqueta);
}
.is-style-etiqueta::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.wp-block-post-terms.is-style-etiqueta a { color: inherit; text-decoration: none; }

.is-style-destaque { font-size: var(--wp--preset--font-size--destaque) !important; line-height: 1.5; max-width: 34em; font-weight: 400; }

.is-style-numero { font-size: clamp(72px, 9vw, 140px) !important; line-height: .9 !important; letter-spacing: -.05em !important; font-variant-numeric: tabular-nums; margin: 0; font-weight: 800 !important; }
.ujima-legenda { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .75; margin-top: 12px !important; }

/* Cabeça de secção */
.ujima-cabeca { margin-bottom: clamp(40px, 5vw, 80px) !important; gap: 24px 64px; }
.ujima-cabeca h2 { margin: 0; }
.ujima-cabeca p { margin: 0; opacity: .85; }

/* Linhas de serviço */
.wp-block-columns.is-style-servico {
	gap: 16px 40px; margin: 0 !important; padding-block: clamp(28px, 3vw, 44px);
	border-top: 2px solid color-mix(in srgb, currentColor 20%, transparent);
}
.wp-block-columns.is-style-servico:last-child { border-bottom: 2px solid color-mix(in srgb, currentColor 20%, transparent); }
.is-style-servico h3 { margin: 6px 0 0; font-size: clamp(28px, 2.8vw, 42px); font-weight: 700; transition: transform .45s var(--u-bounce); }
.is-style-servico:hover h3 { transform: translateX(10px); }
.is-style-servico p { margin: 0; }
.is-style-servico p + p { margin-top: 14px; }
.ujima-n { font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--u-etiqueta); }
.ujima-n::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: currentColor; vertical-align: 1px; transition: transform .4s var(--u-bounce); }
.is-style-servico:hover .ujima-n::before { transform: scale(1.6); }
.ujima-tags { font-size: 15px; font-weight: 500; opacity: .8; }
.ujima-exemplos { font-size: 15px; opacity: .85; }
.ujima-exemplos strong { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; color: var(--u-etiqueta); }

/* Cartão arredondado */
.wp-block-group.is-style-cartao { border-radius: var(--u-raio); padding: clamp(28px, 3.5vw, 48px); }

/* Painel com o canto grande do guia */
.is-style-canto-baixo { border-bottom-left-radius: var(--u-canto); }
.is-style-canto-cima-esq { border-top-left-radius: var(--u-canto); }
.is-style-canto-cima-dir { border-top-right-radius: var(--u-canto); }

/* Grafismo: a letra "a" ampliada e cortada, tom sobre tom (guia, p. 6 e capa) */
.is-style-grafismo { position: relative; isolation: isolate; overflow: hidden; }
.is-style-grafismo::after {
	content: ''; position: absolute; z-index: -1; pointer-events: none;
	right: -14%; top: -30%; width: min(78vw, 1100px); aspect-ratio: 86 / 97;
	background: var(--u-grafismo);
	-webkit-mask: url(../brand/grafismo-a.svg) center / contain no-repeat; mask: url(../brand/grafismo-a.svg) center / contain no-repeat;
	transform: rotate(-28deg) translate3d(var(--gx, 0), var(--gy, 0), 0);
	transition: transform 1.6s var(--u-ease);
}

/* Secções -------------------------------------------------------------------- */

.ujima-secao { padding-block: var(--wp--preset--spacing--60) !important; }
.ujima-historia { gap: 32px 64px; padding-top: clamp(40px, 5vw, 64px); margin-bottom: clamp(56px, 7vw, 104px) !important; border-top: 2px solid color-mix(in srgb, currentColor 18%, transparent); }
.ujima-historia p { opacity: .9; }
.ujima-historia .is-style-destaque { opacity: 1; font-weight: 600; font-size: clamp(24px, 2.4vw, 34px) !important; line-height: 1.25; }

/* Projecto (caso de estudo) ---------------------------------------------------- */

.ujima-projecto { padding-top: clamp(32px, 5vw, 72px); }
.ujima-projecto > * + * { margin-block-start: clamp(28px, 4vw, 56px); }
.ujima-voltar { margin: 0 0 clamp(28px, 4vw, 48px) !important; font-size: 15px; }
.ujima-voltar a { color: inherit; opacity: .75; text-decoration: none; }
.ujima-voltar a:hover { opacity: 1; }
.ujima-projecto .wp-block-post-terms.is-style-etiqueta { margin-block: 0 !important; }
.ujima-projecto .ujima-cabeca { margin-block: 12px 0 !important; }
.ujima-projecto .wp-block-post-title { margin: 0; }
.ujima-projecto .wp-block-post-excerpt__excerpt { margin: 0; }
.ujima-prosa { margin-block: clamp(48px, 6vw, 88px) !important; }
.ujima-prosa h2 { font-size: clamp(28px, 2.6vw, 38px); margin-top: 1.6em; }
.ujima-pager { padding-block: 32px; border-block: 2px solid color-mix(in srgb, currentColor 14%, transparent); margin-top: clamp(56px, 7vw, 104px) !important; }
.ujima-pager:not(:has(a)) { display: none; }
.ujima-pager .post-navigation-link-previous, .ujima-pager .post-navigation-link-next { font-size: clamp(20px, 2vw, 26px); font-weight: 600; }
.ujima-pager a { color: inherit; text-decoration: none; }
.ujima-pager a:hover { color: var(--u-roxo); }
.ujima-cta { padding: clamp(40px, 6vw, 88px) !important; gap: 32px; border-radius: var(--u-raio) var(--u-raio) var(--u-raio) var(--u-canto); margin-block: clamp(56px, 7vw, 104px) !important; }
.ujima-cta h2 { margin: 0; }

.ujima-arquivo { padding-top: clamp(48px, 6vw, 96px); padding-bottom: var(--wp--preset--spacing--60); }
.ujima-arquivo .wp-block-query-title { margin: 0 0 clamp(32px, 4vw, 56px); font-size: var(--wp--preset--font-size--gigante); }

.ujima-pagina { padding-block: clamp(48px, 6vw, 96px) var(--wp--preset--spacing--60); }
.ujima-pagina__titulo { margin-bottom: clamp(32px, 4vw, 56px); }
.ujima-item { padding-block: 32px; border-bottom: 2px solid color-mix(in srgb, currentColor 12%, transparent); }
.ujima-item .wp-block-post-title a { color: inherit; text-decoration: none; }
.ujima-404 { min-height: 70vh; padding-block: var(--wp--preset--spacing--60); }

/* Rodapé: preto, logótipo amarelo cheio ------------------------------------- */

.ujima-footer { padding-block: clamp(56px, 7vw, 96px) 32px !important; }
.ujima-footer .ujima-marca { color: var(--u-amarelo); margin-bottom: clamp(40px, 5vw, 72px); }
.ujima-footer__row { gap: 24px; }
.ujima-footer__small { margin: 0; font-size: 15px; opacity: .75; }
.ujima-social { gap: 12px; }
.ujima-social .wp-social-link { color: var(--u-branco) !important; background: transparent !important; }
.ujima-social .wp-social-link a { padding: 10px; border: 2px solid rgba(255, 255, 255, .25); border-radius: 50%; transition: border-color .25s, color .25s, background .25s; }
.ujima-social .wp-social-link a:hover { border-color: var(--u-amarelo); background: var(--u-amarelo); color: var(--u-ardosia); }

/* Movimento -------------------------------------------------------------------- */

.js [data-reveal] { opacity: 0; transform: translate3d(0, 36px, 0); transition: opacity 1s var(--u-ease), transform 1.1s var(--u-ease), clip-path 1.3s var(--u-ease); }
.js [data-reveal="left"]  { transform: translate3d(40px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(-40px, 0, 0); }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal="pop"]   { transform: scale(.92); transition-timing-function: var(--u-ease), var(--u-bounce); }
.js [data-reveal="mask"]  { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round var(--u-raio)); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0 round var(--u-raio)); }
.js [data-reveal="mask"] img, .js [data-reveal="mask"] .ujima-card__img { transform: scale(1.2); transition: transform 1.7s var(--u-ease); }
.js [data-reveal="mask"].is-in img, .js [data-reveal="mask"].is-in .ujima-card__img { transform: none; }
.js .ujima-card:hover [data-reveal="mask"].is-in .ujima-card__img, .js .ujima-feature:hover [data-reveal="mask"].is-in .ujima-card__img { transform: scale(1.04); transition-duration: .9s; }

.ujima-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.ujima-w > span { display: inline-block; }
.js [data-split] .ujima-w > span { transform: translate3d(0, 110%, 0); transition: transform 1s var(--u-ease); transition-delay: calc(var(--i, 0) * 45ms + var(--d, 0ms)); }
.js [data-split].is-in .ujima-w > span { transform: none; }
/* Caixas de destaque: a caixa estica-se da esquerda para a direita */
.js [data-split] em { background-size: 0 100%; background-image: linear-gradient(var(--u-caixa-fundo), var(--u-caixa-fundo)); background-color: transparent !important; background-repeat: no-repeat; transition: background-size .9s var(--u-ease) .45s; }
.js [data-split].is-in em { background-size: 100% 100%; }
.is-style-duas-linhas em .ujima-w { overflow: visible; }

.ujima-cursor {
	position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
	width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; text-align: center;
	background: var(--u-roxo); color: var(--u-branco); font: 600 14px/1.1 var(--wp--preset--font-family--geologica);
	transform: translate3d(var(--x, -200px), var(--y, -200px), 0) scale(0); transition: transform .4s var(--u-bounce);
}
.ujima-cursor.is-on { transform: translate3d(var(--x), var(--y), 0) scale(1); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js [data-reveal], .js [data-reveal="mask"], .js [data-split] .ujima-w > span { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
	.js [data-split] em { background-size: 100% 100%; transition: none; }
	.is-style-grafismo::after { transition: none; }
	.ujima-cursor { display: none; }
}

/* Responsivo ------------------------------------------------------------------- */

@media (max-width: 781px) {
	.ujima-cabeca { gap: 18px; }
	.wp-block-columns.is-style-servico { gap: 10px; }
	.ujima-footer__row .wp-social-links { justify-content: flex-start !important; }
	.is-style-grafismo::after { width: 120vw; right: -50%; top: -10%; }
}