/* ==========================================================================
   Assinatura do site em Elementor 4 (modelo UMADE).
   Layout, textos, cores e letras estão no Elementor (widgets atómicos, classes e variáveis).
   Aqui fica só o que o Elementor 4 ainda não faz: pseudo-elementos, faixas a deslizar,
   imagem que segue o rato, barra do processo e estados que o motor de animação liga/desliga.
   Cada regra prende-se a um atributo data-um (Elementor → Avançado → Atributos).
   ========================================================================== */
/* Cores e letras do cliente (preenchidas pelo criar-plugin-motor.sh a partir do protótipo) */
:root { --um-ease: cubic-bezier(0.16, 1, 0.3, 1); --um-violeta: #3a30cc; --um-tinta: #0f0e13; --um-papel: #f2efe8; --um-linha: #d9d5ce; --um-cinza: #6d6a74; --um-letra-titulos: "Bricolage Grotesque Variable", sans-serif; --um-letra-texto: "Inter Tight Variable", sans-serif; }

/* Títulos: eixos da letra variável (ex.: largura condensada) — o Elementor não tem este controlo.
   Só nas etiquetas h1–h4, como no protótipo: um «Título» do Elementor com etiqueta div/span (ex.: números grandes) fica com a largura normal. */
.e-heading-base:is(h1, h2, h3, h4) { font-variation-settings: "wdth" 88, "opsz" 96; }

/* Etiquetas com ponto violeta */
[data-um~="label"] { display: inline-flex; align-items: center; gap: 0.6em; letter-spacing: 0.02em; }
[data-um~="label"]::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--um-violeta); }

/* Botões: seta dentro de um círculo, que roda ao passar */
a[data-um~="btn"] { display: inline-flex !important; align-items: center; gap: 14px; padding: 10px 10px 10px 26px !important; white-space: nowrap; transition: background-color 0.5s var(--um-ease), color 0.5s; }
a[data-um~="btn"]::after {
  content: ""; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--um-papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M3 13L13 3M13 3H5M13 3v8' stroke='%230f0e13' stroke-width='1.6'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform 0.6s var(--um-ease);
}
a[data-um~="btn"][data-um~="light"]::after { background-color: var(--um-violeta); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M3 13L13 3M13 3H5M13 3v8' stroke='%23f2efe8' stroke-width='1.6'/%3E%3C/svg%3E"); }
a[data-um~="btn"]:hover::after { transform: rotate(-45deg); }
a[data-um~="circle"] { transition: background-color 0.4s, color 0.4s; }

/* Hero: linhas com máscara e a foto em pílula no meio do título */
[data-um~="hero-title"] .um-line { display: block; overflow: clip; padding-bottom: 0.06em; }
[data-um~="hero-title"] .um-line-in { display: inline-block; }
[data-um~="hero-title"] .um-line:nth-child(2) { padding-left: 0.9em; }
@media (max-width: 720px) { [data-um~="hero-title"] .um-line:nth-child(2) { padding-left: 0; } }
[data-um~="hero-title"] .hero__pill { display: inline-block; width: 1.55em; height: 0.74em; border-radius: 999px; overflow: hidden; vertical-align: 0.02em; background: var(--um-violeta); }
[data-um~="hero-title"] .hero__pill img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); }

/* Faixas a deslizar (marcas e avaliações) — a fila está repetida no Elementor */
[data-um~="marquee"] { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
[data-um~="marquee-track"] { width: max-content; flex-wrap: nowrap; animation: um-marquee 38s linear infinite; }
[data-um~="marquee-track"] > * { flex: none; margin-inline-end: 16px; }
[data-um~="marquee-track"][data-um~="logos"] > * { margin-inline-end: clamp(44px, 6vw, 88px); opacity: 0.9; transition: opacity 0.3s, transform 0.5s var(--um-ease); }
[data-um~="marquee-track"][data-um~="logos"] > *:hover { opacity: 1; transform: scale(1.06); }
[data-um~="slow"] [data-um~="marquee-track"] { animation-duration: 70s; }
[data-um~="rev"] [data-um~="marquee-track"] { animation-direction: reverse; }
/* pausa só com rato: num ecrã tátil o «hover» fica preso depois de um toque e a faixa parava de vez */
@media (hover: hover) and (pointer: fine) { [data-um~="marquee"]:hover [data-um~="marquee-track"] { animation-play-state: paused; } }
@keyframes um-marquee { to { transform: translateX(-50%); } }

/* Serviços: as outras linhas apagam-se, o nome desliza; a foto segue o rato */
@media (hover: hover) {
  [data-um~="svc"] [data-um~="svc-row"] { transition: opacity 0.4s; }
  [data-um~="svc"]:hover [data-um~="svc-row"] { opacity: 0.3; }
  [data-um~="svc"] [data-um~="svc-row"]:hover { opacity: 1; }
  [data-um~="svc-row"] .e-heading-base { transition: transform 0.6s var(--um-ease), color 0.4s; }
  [data-um~="svc-row"]:hover .e-heading-base { transform: translateX(18px); color: var(--um-violeta); }
}
[data-float] { position: fixed !important; top: 0; left: 0; width: 260px; aspect-ratio: 4 / 5; padding: 0; border-radius: 14px; overflow: hidden; pointer-events: none; z-index: 40; opacity: 0; scale: 0.6; transition: opacity 0.35s, scale 0.5s var(--um-ease); }
[data-float].is-on { opacity: 1; scale: 1; }
[data-float] img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s; }
[data-float] img.is-active { opacity: 1; }
@media (hover: none) { [data-float] { display: none !important; } }

/* Setores: escurece de baixo para cima, para o texto ler-se sobre a foto */
[data-um~="sector"] { isolation: isolate; transition: transform 0.8s var(--um-ease); }
[data-um~="sector"]::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(15, 14, 19, 0) 30%, rgba(15, 14, 19, 0.82) 100%); }
[data-um~="sector"]:hover { transform: translateY(-4px); }

/* Processo: a barra enche ao descer; o passo onde se está fica aceso */
[data-steps-fill] { transform-origin: top; transform: scaleY(0); }
[data-step] { opacity: 0.28; transition: opacity 0.6s var(--um-ease); }
[data-step]:last-child { padding-bottom: 0 !important; }
[data-step].is-active { opacity: 1; }

/* Cartões do blog e do portfólio */
[data-um~="card"] img { transition: transform 1.2s var(--um-ease); }
[data-um~="card"]:hover img { transform: scale(1.03); }
/* a foto cresce DENTRO da moldura (o protótipo tem a foto dentro de uma caixa com overflow: hidden; no Elementor a foto
   está dentro da ligação — sem isto ela sai 3% para fora e desalinha com o que está à volta, ex.: o fundo do destaque) */
[data-um~="card"] .e-image-link-base:has(> img) { display: block; overflow: hidden; border-radius: 14px; }
[data-um~="card"] .e-image-link-base > img { display: block; }
/* cartões escondidos pelo filtro do blog (ponte.js) */
.e-loop-item.um-oculto { display: none !important; }
[data-um~="card"] .e-heading-base { transition: color 0.3s; }
[data-um~="card"]:hover .e-heading-base { color: var(--um-violeta); }

@media (prefers-reduced-motion: reduce) {
  [data-um~="marquee-track"] { animation: none; }
  [data-step] { opacity: 1; }
}

/* Ligações curtas que não devem partir */
[data-um~="nowrap"] { white-space: nowrap; }

/* Portfólio da página inicial: casos grandes alternados (o Elementor não alterna itens de uma Loop Grid) */
[data-um~="case-num"] { align-items: baseline !important; flex-wrap: wrap; }
[data-um~="case-num"]:has(.e-heading-base:empty) { display: none; }
[data-um~="case-num"]:not(:has(.e-heading-base:empty)) + [data-um~="case-svc"] { display: none; }
[data-um~="case"] > .e-image-base, [data-um~="case"] > a:has(img) { display: block !important; width: min(100%, calc(78vh * 0.8)) !important; justify-self: start; }
[data-um~="case"] > a:has(img) img { width: 100%; }
@media (min-width: 1001px) {
  .um-cases .e-loop-item:nth-child(even of .e-loop-item) [data-um~="case"] { grid-template-columns: minmax(0, 1fr) minmax(0, 0.83fr); }
  .um-cases .e-loop-item:nth-child(even of .e-loop-item) [data-um~="case"] > :first-child { order: 2; justify-self: end; }
}
@media (max-width: 1000px) { [data-um~="case"] { grid-template-columns: 1fr !important; } }

/* Ligações com seta que avança ao passar */
[data-um~="arrow"] i { display: inline-block; margin-left: 6px; font-style: normal; transition: transform 0.5s var(--um-ease); }
[data-um~="arrow"]:hover i, [data-um~="card"]:hover [data-um~="arrow"] i { transform: translateX(8px); }
[data-um~="card"] { cursor: pointer; }

/* Perguntas frequentes (acordeão do Elementor com o desenho do protótipo) */
.faq__acc .elementor-tab-title a { font-family: var(--um-letra-titulos) !important; font-size: clamp(20px, 1.8vw, 27px) !important; letter-spacing: -0.02em; line-height: 1.15; font-variation-settings: normal; transition: color 0.3s; } /* as perguntas não são títulos: largura normal da letra, como no protótipo */
.faq__acc .elementor-tab-title { padding-block: 26px !important; }
.faq__acc .elementor-tab-title:hover a { color: var(--um-violeta) !important; }
.faq__acc .elementor-tab-content { font-family: var(--um-letra-texto); font-size: 18px !important; max-width: 56ch !important; padding: 0 0 28px !important; }
.faq__acc .elementor-accordion-icon { position: relative; width: 36px !important; height: 36px !important; transition: background 0.4s, border-color 0.4s, transform 0.6s var(--um-ease); }
.faq__acc .elementor-accordion-icon::before, .faq__acc .elementor-accordion-icon::after { content: "" !important; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; translate: -50% -50%; }
.faq__acc .elementor-accordion-icon::after { rotate: 90deg; }
.faq__acc .elementor-tab-title.elementor-active .elementor-accordion-icon { transform: rotate(135deg); }

/* Ficha por cima da página (ponte → fichas): o tema do WordPress reescreve os botões; aqui fica o desenho do protótipo */
.pj button.pj__close { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; padding: 0 8px 0 18px; border: 0; border-radius: 999px; background: var(--um-tinta); color: var(--um-papel); font: 400 14px/1 var(--um-letra-texto); cursor: pointer; }
.pj button.pj__close:hover, .pj button.pj__close:focus { background: var(--um-violeta); color: var(--um-papel); }
.pj button.pj__close span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--um-papel); color: var(--um-tinta); font-size: 11px; }

/* Serviços: o texto alinha pela linha de base do nome (o Elementor 4 não oferece «baseline») */
[data-um~="svc-row"] { align-items: baseline !important; }
/* Selo giratório: o widget HTML do Elementor não deve servir de referência à posição (fica à direita do hero, como no protótipo) */
.elementor-element[data-id^="selo"] { position: static !important; }

/* Rodapé: cada ligação com 44px de altura (alvo confortável para o dedo), como no protótipo */
footer [data-id^="rodape-colunas"] a, footer [data-id^="rodape-legal"] a { display: inline-flex; align-items: center; min-height: 44px; }
footer [data-id^="rodape-colunas"] a:hover { color: var(--um-papel); }
/* Avaliações: «Ver todas no Google» com 44px de altura, como no protótipo */
[data-id^="avaliacoes-cabeca"] a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
/* Cartão do blog: minutos de leitura discretos */
[data-um~="arrow"] small { margin-left: 6px; font-size: 14px; font-weight: 400; color: var(--um-cinza); }

/* Filtros em pílula da página /trabalho/ (o site.js liga-os: data-filter → mostra/esconde data-group) */
[data-um~="chip"] { flex: none; min-height: 44px; padding: 0 18px !important; border-radius: 999px !important; /* o botão do Elementor 4 traz 2px (.elementor .e-button-base) */ border: 1px solid var(--um-linha) !important; background: transparent !important; color: var(--um-cinza) !important; font: 400 14px/1 var(--um-letra-texto) !important; cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s; }
[data-um~="chip"]:hover { border-color: var(--um-tinta); color: var(--um-tinta) !important; }
[data-um~="chip"].is-on, [data-um~="chips"]:not(:has(.is-on)) [data-filter="*"] { background: var(--um-tinta) !important; color: var(--um-papel) !important; border-color: var(--um-tinta); }

/* Textos dinâmicos que podem vir vazios (ex.: «Casos de estudo» só nos casos) */
[data-um~="hide-empty"]:empty { display: none; }

/* Artigo: índice «Neste artigo» (widget Índice do Elementor Pro) com o desenho do protótipo */
.um-toc { position: sticky; top: 110px; align-self: start; font-size: 15px; }
.um-toc .elementor-toc__header { padding: 0 0 12px; border: 0; background: none; }
.um-toc .elementor-toc__header-title { font: 400 14px/1.5 var(--um-letra-texto); color: var(--um-cinza); }
.um-toc .elementor-toc__body { padding: 0; border-left: 1px solid var(--um-linha); }
.um-toc .elementor-toc__list-wrapper { margin: 0; padding: 0; list-style: none; }
.um-toc .elementor-toc__list-item { margin: 0; }
.um-toc .elementor-toc__list-item-text-wrapper::before, .um-toc .elementor-toc__list-item::marker { display: none; content: none; }
.um-toc .elementor-toc__list-item-text { display: block; padding: 8px 0 8px 16px; line-height: 1.3; color: var(--um-cinza); transition: color 0.3s; }
.um-toc .elementor-toc__list-item-text:hover, .um-toc .elementor-toc__list-item-text.elementor-item-active { color: var(--um-violeta); }
.um-toc .elementor-toc__toggle-button { display: none !important; }
.um-toc .elementor-widget-container { border: 0 !important; background: none !important; }
@media (max-width: 1000px) { .um-toc { position: static; } }

/* Ficha do projeto: conteúdo escrito no editor normal do WordPress fica com o desenho dos blocos do protótipo */
.um-blocos { margin-top: clamp(48px, 7vw, 100px); }
.um-blocos:has(.blocos) { margin-top: 0; }
.um-blocos .wp-block-heading { margin: clamp(48px, 7vw, 100px) 0 14px; font: 500 14px/1.5 var(--um-letra-texto); letter-spacing: 0; color: var(--um-cinza); font-variation-settings: normal; }
.um-blocos .wp-block-heading:first-child { margin-top: 0; }
.um-blocos p:not([class]), .um-blocos .wp-block-paragraph { max-width: 68ch; margin: 0 0 0.8em; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; text-wrap: pretty; }
.um-blocos .wp-block-gallery, .um-blocos > .wp-block-image, .um-blocos > .wp-block-quote { margin-top: clamp(48px, 7vw, 100px) !important; }
.um-blocos .wp-block-gallery { display: block !important; columns: 3; column-gap: 14px; }
.um-blocos .wp-block-gallery > .wp-block-image { width: auto !important; margin: 0 0 14px !important; break-inside: avoid; border-radius: 12px; overflow: hidden; }
.um-blocos .wp-block-gallery img { height: auto !important; aspect-ratio: auto !important; object-fit: initial !important; }
.um-blocos > .wp-block-image img { width: 100%; height: auto; border-radius: 14px; }
.um-blocos > .wp-block-quote { margin: 0; padding: clamp(28px, 4vw, 56px); border: 0; border-radius: 16px; background: var(--um-violeta); color: var(--um-papel); }
.um-blocos > .wp-block-quote p { font-family: var(--um-letra-titulos); font-size: clamp(26px, 3vw, 44px); line-height: 1.08; letter-spacing: -0.02em; }
@media (max-width: 1000px) { .um-blocos .wp-block-gallery { columns: 2; column-gap: 8px; } }
/* Índice do artigo: sem caixa à volta (como no protótipo) */
.um-toc { --box-border-width: 0; --box-border-radius: 0; --box-background-color: transparent; --box-padding: 0; --header-background-color: transparent; }

/* Colisões entre o CSS do protótipo e as classes que o WordPress põe sozinho:
   «blog» no <body> da página do blog e «post» em cada artigo das listas */
body.blog { padding: 0 !important; }
.e-loop-item.post { display: block; gap: 0; }

/* Telemóvel: filtros numa só linha que desliza com o dedo (no protótipo partiam em 2–3 linhas) */
@media (max-width: 720px) {
  [data-um~="chips"], .um-filter .e-filter {
    flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * clamp(16px, 3.2vw, 48px)); padding-inline: clamp(16px, 3.2vw, 48px);
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
  }
  [data-um~="chips"]::-webkit-scrollbar, .um-filter .e-filter::-webkit-scrollbar { display: none; }
  .um-filter .e-filter-item { flex: none; }
}

/* Ecrãs sem rato: foto de cada serviço ao lado do nome (criada pela ponte) */
@media (hover: none) {
  [data-um~="svc-row"]:has(.um-svc-foto) { grid-template-columns: minmax(0, 1fr) 76px !important; column-gap: 16px !important; }
  [data-um~="svc-row"]:has(.um-svc-foto) > :not(.um-svc-foto) { grid-column: 1; }
  .um-svc-foto { grid-column: 2; grid-row: 1 / span 2; align-self: start; width: 76px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }
}

/* ===== Blog robusto (provado na Joiner, out/2026) — o artigo novo do cliente sai sempre com o desenho certo ===== */
/* O widget «Conteúdo do artigo» pinta o texto com a cor do kit (preto): herda a do desenho */
.elementor .elementor-widget-theme-post-content { color: inherit !important; font-family: inherit; }
.elementor .elementor-widget-theme-post-content :is(p, li, ul, ol) { color: inherit; }
/* Textos dinâmicos vazios (autor, resumo, categoria) não deixam buracos */
.elementor .e-paragraph-base:empty, .elementor .e-heading-base:empty { display: none; }
/* Secção que só faz sentido com cartões (ex.: «Outros artigos»): some quando a lista vem vazia */
[data-um~="esconde-vazio"]:not(:has(.e-loop-item)) { display: none !important; }
/* Filtro de categorias (widget Filtro + Loop Grid): «Todos» primeiro, sem «Sem categoria» */
:is([data-um~="filtros"], .um-filter) .e-filter-item[data-filter="__all"] { order: -1; }
:is([data-um~="filtros"], .um-filter) .e-filter-item:is([data-filter="sem-categoria"], [data-filter="uncategorized"]) { display: none; }

/* Ficha do projeto: bloco «Vídeos» (por cima da página: .proj__vids, montado pela ponte; na página do projeto: caixa .blk-videos
   com widgets «Vídeo» do Elementor). Verticais (Reels/Shorts, 9:16) lado a lado; horizontais na largura toda. */
.proj__vids, .um-blocos .blk-videos { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 300px)); gap: 14px; }
.proj__vids .blk-video--largo, .um-blocos .blk-videos .um-video--largo { grid-column: 1 / -1; }
.proj__vids .blk-video { margin: 0; }
.blk-video.blk-video--vertical { aspect-ratio: 9 / 16; }
.um-video .elementor-wrapper { border-radius: 14px; overflow: hidden; background: #000; }
.um-video--vertical .elementor-wrapper { aspect-ratio: 9 / 16; }
.um-blocos .blk-videos > .elementor-element { width: auto; max-width: none; }
/* dois ou mais vídeos horizontais: lado a lado (um por baixo do outro ficavam enormes) */
.proj__vids:has(.blk-video--largo ~ .blk-video--largo), .um-blocos .blk-videos:has(.um-video--largo ~ .um-video--largo) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proj__vids:has(.blk-video--largo ~ .blk-video--largo) .blk-video--largo, .um-blocos .blk-videos:has(.um-video--largo ~ .um-video--largo) .um-video--largo { grid-column: auto; }
@media (max-width: 640px) {
  .proj__vids, .um-blocos .blk-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .proj__vids:has(.blk-video--largo ~ .blk-video--largo), .um-blocos .blk-videos:has(.um-video--largo ~ .um-video--largo) { grid-template-columns: minmax(0, 1fr); }
}

/* Ficha montada a partir dos campos (.blocos dentro do conteúdo da página do projeto): as regras do texto do editor
   (.um-blocos p:not([class]), pensadas para o editor normal) não podem mudar os blocos — fica o desenho do protótipo. */
.um-blocos .blocos p { max-width: none; margin: 0; }
.um-blocos .blocos :is(.blk-texto, .blk-colunas) p { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; }
.um-blocos .blocos :is(.blk-texto, .blk-colunas) p + p { margin-top: 0.8em; }
.um-blocos .blocos .blk-texto { max-width: 68ch; }
.um-blocos .blocos .blk-citacao p { font-family: var(--um-letra-titulos); font-size: clamp(26px, 3vw, 44px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }

/* Barra do WordPress (só com sessão iniciada) por cima do site novo: o «reset» do protótipo (img { display: block }) atirava
   ícones da barra para baixo dela (ex.: a coroa do «Upgrade to Pro» do Jeg Kit, que aparecia junto ao menu), e o cabeçalho fixo
   ([data-nav]) ficava debaixo da barra. */
#wpadminbar img, #wpadminbar svg { display: inline-block; max-width: none; vertical-align: middle; }
body.admin-bar [data-nav] { top: 32px; }
@media (max-width: 782px) { body.admin-bar [data-nav] { top: 46px; } }
@media (max-width: 600px) { body.admin-bar [data-nav] { top: 0; } }  /* aqui a barra do WordPress sobe com a página */