/*
 * Tema upmaker — réplica 1:1 de upmakertelecom.com.br.
 * Tokens medidos em plans/upmaker/reference/tokens.md (Fase 0).
 * Fase 1: base + tokens. Componentes por fase (header/footer F2, home F3...).
 */

:root {
  /* Cores medidas do original */
  --um-white: #ffffff;
  --um-purple-deep: #250838;   /* H2 de seção, fundo do footer */
  --um-purple: #5d138c;        /* H1 da home, títulos de serviço */
  --um-text: #373737;
  --um-text-soft: #575757;
  --um-cyan-tint: #ecf8f9;     /* faixas alternadas / card do form */
  --um-orange: #fb6b19;        /* submit do form, ponta do gradiente */
  --um-yellow: #faea1c;        /* accent global */
  --um-placeholder: #e1e4ed;

  /* Botões CTA medidos */
  --um-cta-gradient: linear-gradient(215deg, #fb6b19 55%, #faea1c 100%);
  --um-cta-gradient-focus: linear-gradient(215deg, #f9c20e 5%, #f2295b 100%);
  --um-cta-shadow: 0 4px 10px -1px rgba(249, 194, 14, 0.63);

  /* Raios medidos */
  --um-radius-card: 24px;
  --um-radius-icon: 8px;
  --um-radius-field: 6px;
  --um-radius-pill: 30px;

  /* Tipografia (Montserrat self-hosted, pesos variáveis 100–900) */
  --um-font: 'Montserrat', sans-serif;

  /* Breakpoints reais do original: 1024 / 767 */
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--um-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5; /* ritmo medido: p 16/24, 14/21, 20/30 no original */
  color: var(--um-text-soft);
  background: var(--um-white);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  color: var(--um-purple-deep);
  line-height: 1.2;
}

/* ============================================================
 * Header — template Elementor 17 (regras medidas em css/home.css,
 * elementos 6384ef5 / 389bf2bc / 2283248).
 * ============================================================ */

.um-header {
  position: sticky;
  top: 0;
  z-index: 999;
  padding: 0 10px;
  background: #ffffffe0; /* branco 87,8% medido (sem blur — original não tem) */
}

.um-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 0;
  gap: 0;
}

.um-header__logo img {
  display: block;
  width: 165px;
  height: 47px;
}

/* Colunas medidas no vivo (1440): 41d03c39 380px | 41741f64 589px |
   7dc00fe 171px = 33,33% / 51,67% / 15% do content-box 1140, cada uma com
   padding 10px — é a coluna-logo (47+20=67) que governa a linha: header
   67+20 = 87px. Nav widget 40px (links 16/20 + padding 10/20); botão 44px. */
.um-header__logo {
  flex: 1 1 33.33%;
  padding: 10px;
}

.um-nav {
  flex: 1 1 51.67%;
  padding: 10px;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.um-nav__list {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Nav main medida no vivo (768px): itens Montserrat 600 uppercase, padding
   20px 20px (gap efetivo 40px entre rótulos), sublinhado duplo pointer
   #FAEA1C 3px; ativo #250838. */
.um-nav__item {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  line-height: 20px; /* item medido: 10+20+10 = caixa 40px */
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  color: #000000;
}

.um-nav__item::after {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 4px;
  height: 3px;
  background: var(--um-yellow);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.um-nav__item:hover::after,
.um-nav__item:focus-visible::after {
  transform: scaleX(1);
}

.um-nav__item.is-active {
  color: var(--um-purple-deep);
}

.um-nav__item.is-active::after {
  background: var(--um-purple-deep);
  transform: scaleX(1);
}

/* Botões CTA medidos no vivo: TODOS usam 15px/500 uppercase, lh 14 e
   `padding: 15px 20px` (Saiba Mais 130,6×44 · Descubra Mais 170,9×44 ·
   Solicitar Suporte 219,2×45 · Entre em Contato). Só o "Suporte" do header é
   15/30 (134,2×44). Com 16px/30 os botões de conteúdo ficavam 26–37px mais
   largos que o original. */
.um-btn-cta {
  /* inline-flex medido: o original põe ícone+texto num `.elementor-button-con`
     `display:flex; gap:5px` ⇒ caixa de conteúdo 15px (o svg), total 45. Como
     `<a>` inline-block com svg inline a linha dá 17 (⇒ 47) e o newline antes do
     texto vira um espaço de ~4px de largura. */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--um-font);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 14px;
  color: #ffffff;
  background-image: var(--um-cta-gradient);
  border-radius: var(--um-radius-pill);
  padding: 15px 20px;
  box-shadow: var(--um-cta-shadow);
  transition: background-image 0.15s ease;
}

.um-btn-cta:hover,
.um-btn-cta:focus {
  color: #ffffff;
  background-image: var(--um-cta-gradient-focus);
}

/* Coluna do botão medida: 171px (15%) com padding 10px → box 44+20 = 64px.
   O botão em si (2283248) mede 134×44 com `padding: 15px 30px` — a única
   exceção aos 15/20 dos CTAs de conteúdo. O partial envolve o <a> no wrapper
   `.um-header__support`; padding direto no <a> esticaria o gradiente para
   154×64. */
.um-header__support {
  flex: 1 1 15%;
  padding: 10px;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.um-header__support .um-btn-cta {
  padding: 15px 30px;
}

/* Burger — visível apenas ≤767 (Elementor menu-toggle do dropdown) */
.um-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
}

.um-nav-toggle__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: #000000;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.um-nav-toggle:hover .um-nav-toggle__bar,
.um-nav-toggle:focus-visible .um-nav-toggle__bar {
  background: #f9c20e; /* toggle hover/focus medido */
}

.um-nav-toggle[aria-expanded='true'] .um-nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.um-nav-toggle[aria-expanded='true'] .um-nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.um-nav-toggle[aria-expanded='true'] .um-nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
 * Footer — template Elementor 24 (regras medidas: 581b4de5,
 * 27965904, 1d9bac3b, d743bda, 14892163, 2b0fceed).
 * ============================================================ */

.um-footer {
  background: var(--um-purple-deep);
  color: #ffffff;
}

/* Linhas medidas @1440 (template 24): [logo 342 | meta 798] h68/70,
   [divisor] h62, [menu 380 | copyright 760] h66/78 — todas as colunas com
   padding 10px; inner 280px. (O copy original era alinhado à direita;
   centrado por pedido do operador.) */
.um-footer__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 50px 10px 20px;
}

.um-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
}

.um-footer__brand {
  flex: 0 0 30%;
  padding: 10px;
  display: flex;
  align-items: center;
}

.um-footer__brand img {
  display: block;
  width: 161px;
  height: 48px;
}

/* Coluna meta medida (798@1440): `row-reverse` com os sociais na ponta
   direita e o bloco legal à esquerda deles, gap 20px — forma do original,
   onde "Política de Privacidade" (159×35) divide a linha com os ícones
   (160×50). O alinhamento vertical, porém, é nosso (ver DESVIO abaixo). */
.um-footer__meta {
  flex: 0 0 70%;
  padding: 10px;
  display: flex;
  flex-direction: row-reverse;
  /* DESVIO DO ORIGINAL (pedido do operador, 15/10): o original usa
     `align-items: flex-end` e a caixa de texto legal dele mede 35px — os
     links ficam 7,5px abaixo do centro dos ícones. Com a nossa caixa de
     21px (14/21), o fundo colado derrubava o par 14,5px (medido: ícones
     y 3072-3122, links y 3101-3122). A coluna centraliza os dois filhos,
     então o par fica na MESMA linha dos ícones; nenhum dos dois encolhe a
     banda de 70px (10 de padding + 50 dos ícones). */
  align-items: center;
  gap: 20px;
}

/* Links legais medidos: 14/21, uma linha só (sem quebra em nenhum viewport;
   o par cabe nos 490px da coluna a 768 e nos 330px a 390). A altura é a
   linha de 21px, o centro cai no dos ícones por `align-items: center`. */
.um-footer__links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.um-footer__links a {
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: #ffffff;
  text-decoration: none;
}

.um-footer__links a:hover,
.um-footer__links a:focus {
  color: var(--um-yellow);
}

/* Sociais medidos: ícones brancos 50×50 (svg 25), hover #FAEA1C,
   gap 5px, sem fundo */
.um-footer__social {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.um-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: #ffffff;
  transition: color 0.2s ease, transform 0.2s ease;
}

.um-footer__social-link svg {
  width: 25px;
  height: 25px;
}

.um-footer__social-link:hover,
.um-footer__social-link:focus-visible {
  color: var(--um-yellow);
  transform: translateY(-3px); /* animação "push" medida */
}

/* Divisor medido: linha 2px sólida #FFFFFF60 de 1120px (coluna 1140 com pad
   10) dentro de uma faixa de 62px — 30px de respiro acima e abaixo da linha
   (10 da coluna + 20 do widget separador). */
.um-footer__divider {
  border: 0;
  border-top: 2px solid #ffffff60;
  margin: 30px 10px;
}

/* Alinhamento do par menu × copyright (pedido do operador em 17/10/2026: os
   menus ficavam "ligeiramente mais abaixo" no desktop). Com o `flex-start`
   herdado do original, as duas colunas partem do topo e os paddings simétricos
   NÃO bastam: o item do menu mede 46px (pad 13×2 + lh 20) contra 41px do
   parágrafo (pad 10×2 + 1 linha 21) ⇒ o texto do menu caía 12,5px ABAIXO do
   copyright (medido 1440/1280/1200/1100/1080/1060/1040/1025: centro 214,5 ×
   202,0; idêntico no ar). `center` alinha as CAIXAS e só fecha Δ=0 acima de
   1080: na faixa 1025–1060 o logo 41×20 da agência (float:right) não cabe na
   linha e cai para a própria linha, a caixa do par cresce 41→61 (o item flex
   é BFC e contém o float) e o centro volta a desviar +10px. `baseline` alinha
   as primeiras linhas de texto, não as caixas: Δ=−0,5px em TODAS as bandas
   desktop (1025–1440, medido no harness). Custo: nos mesmos 1025–1060 em que o
   logo cai, a linha fica 8px mais alta que no flex-start (74 × 66) porque o
   par deslocado 12,5px para baixo soma a linha extra do float. Acima de 1080
   o rodapé fecha os 268px medidos do original. O WordPress usava `flex-end`
   (CSS congelado: --align-items do bloco elementor-element-4a723b1a) — o
   alinhamento por primeira linha daqui é correção deliberada, não fidelidade. */
.um-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
}

.um-footer__nav {
  flex: 0 0 33.33%;
  padding: 10px;
}

.um-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Nav do footer medida: item 46px = padding 13/20 + lh 20; 16px/500 branco;
   hover/ativo #FAEA1C; linha própria sem gap entre itens */
.um-footer__nav-list a {
  display: block;
  padding: 13px 20px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
}

.um-footer__nav-list a:hover,
.um-footer__nav-list a:focus,
.um-footer__nav-list a.is-active {
  color: var(--um-yellow);
}

/* Copyright medido: 14/21 branco; centrado no desktop por pedido do operador */
.um-footer__copy {
  flex: 0 0 66.67%;
  padding: 10px;
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
}

/* "Desenvolvido por" — custom CSS medido do widget 2b0fceed (home.css):
   .dwp-logo margin-left 4px; hover aplica filtro sépia + pulse amarelo 2s. */
/* Logo da agência medido no vivo: `display: block; float: right` em 41×20 nas
   quatro bandas (x = borda direita do `<p>`). Como inline ele criava uma 3ª
   linha de 21px @390 ⇒ rodapé 504 contra 503,39. Com float o `<p>` (item flex,
   logo BFC) contém o float e fecha 62 = 42 de texto + 20, exatamente como no
   original. A caixa 41×20 casa com o viewBox do SVG (480,65×237,25 ≈ 2,03:1). */
.um-footer__agency img {
  display: block;
  float: right;
  width: 41px;
  height: 20px;
}

.um-footer__agency:hover img {
  filter: sepia(37%) saturate(2684%) hue-rotate(353deg) brightness(100%) contrast(96%);
  animation: um-pulse-yellow 2s infinite;
}

@keyframes um-pulse-yellow {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(249, 194, 14, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(249, 194, 14, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(249, 194, 14, 0);
  }
}

/* ============================================================
 * Breakpoints reais do original: max 1024 / max 767 / min 768
 * ============================================================ */

@media (max-width: 1024px) {
  /* Respiro lateral medido no vivo: abaixo de 1160 o container do original
     usa 20px de gutter (inner @768 = x20 w728; @390 = x20 w350), não os 10px
     da banda desktop. Hero e Sobre já seguiam 20;Benefits/Suporte/Contato e o
     rodapé seguiam 10 ⇒ 20px de largura de conteúdo a mais em 4 seções. */
  .um-footer__inner {
    padding: 50px 20px;
  }

  /* Medido no frozen CSS (min-768 ∩ max-1024): menu e copyright viram
     colunas 100% com align-items/ text-align center (regra ≤1024 do 4a723b1a) */
  .um-footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .um-footer__nav,
  .um-footer__copy {
    flex: 0 0 100%;
  }

  .um-footer__nav-list {
    justify-content: center;
  }

  .um-footer__copy {
    text-align: center;
  }
}

/* Tablet (768–1024) medido no vivo a 768px: colunas 33,33% | 43,33% | 23,33%
   (regras --width do bloco min-768/max-1024). O menu (304px de itens) não
   cabe nos 324px da coluna ⇒ quebra em duas linhas à direita, com SUPORTE
   na linha 1 — igual a inicio@768.png. */
@media (min-width: 768px) and (max-width: 1024px) {
  .um-nav {
    flex: 1 1 43.33%;
  }

  .um-nav__list {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .um-header__support {
    flex: 1 1 23.33%;
  }

  /* Copyright no tablet: aqui o par (nav 66 + copyright) EMPILHA, e a caixa do
     widget mede 55,39 = 10 + (1 linha 21 + `margin-bottom: 14,4` do <p>) + 10.
     Sem o respiro do widget o rodapé fechava 339×353 (@1024 e @768). ≤767 não
     leva o margin: lá o logo flutuante do original já ocupa a 3ª linha e a
     caixa medida é 82 — com 14,4 viraria 97. */
  .um-footer__copy {
    margin-bottom: 14.4px;
  }
}

@media (max-width: 767px) {
  /* Colunas medidas ≤767: logo 50% | burger/nav 50% (flex-end) | CTA 50% */
  .um-header__inner {
    gap: 6px 10px;
  }

  .um-header__logo {
    flex: 0 0 50%;
  }

  .um-nav-toggle {
    display: flex;
  }

  .um-header__support {
    display: none; /* botão Suporte oculto ≤767 (medido: offsetParent null) */
  }

  /* Dropdown mobile medido: fundo #FFFFFFE0; item 16px/2em;
     hover/focus #F9C20E sobre #000; ativo #000 sobre #ECF8F9E0 */
  .um-nav {
    flex: 0 0 100%;
    order: 3;
    display: none;
  }

  .um-nav.is-open {
    display: block;
    background: #ffffffe0;
  }

  .um-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .um-nav__item {
    display: block;
    padding: 10px 16px;
    line-height: 2em;
    text-align: center;
  }

  .um-nav__item::after {
    display: none;
  }

  .um-nav__item:hover,
  .um-nav__item:focus {
    color: #f9c20e;
    background: #000000;
  }

  .um-nav__item.is-active {
    color: #000000;
    background: #ecf8f9e0;
  }

  .um-footer__top {
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: 0;
  }

  .um-footer__brand {
    flex: 0 0 100%;
    justify-content: center;
  }

  /* Meta medida a 390: coluna de 125px com os sociais (50) acima e o bloco
     legal (35) abaixo, centralizados e com respiro `space-evenly`. Os links
     seguem numa linha só (nowrap) — 279px de par cabe nos 330px disponíveis.
     O bloco legal mede 35,39 = 1 linha de 21 + `margin-bottom: 14,4` do <p>
     do widget ⇒ a coluna empilhada fecha 125,39 (sem o respiro eram 111 e o
     rodapé 490×503). Nas bandas de linha (row-reverse) o margin não conta:
     max(50, 35,4) = 50, a banda continua 70. */
  .um-footer__meta {
    flex: 0 0 100%;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
  }

  .um-footer__links {
    margin-bottom: 14.4px;
  }
}

/* ============================================================
 * Home — página Elementor id 10 (regras medidas em css/home.css)
 * ============================================================ */

/* Hero (130a7858): bg cover; H1 48/800 #5D138C lh53;
   parágrafo 18/500 italic lh24 #000 */
.um-hero {
  background-image: url('../img/hero_bg_upmaker.webp');
  background-position: center center;
  background-size: cover;
}

/* Hero medido no vivo: banda 600px fixa em todo desktop (e-con 130a7858,
   inner 600 com padding 0); colunas 570+570 (50/50, gap 0) — a de arte com
   min-height 600 e a de copy com padding 50px 0 (box 410, centrado na banda).
   ≤1024 a banda vira 500 (min-height) e a arte some (elementor-hidden-tablet). */
/* Modelo de container medido no original: a seção full-blee tem respiro
   horizontal de 10px e o inner é CAPADO em 1140 de CONTEÚDO (não de caixa).
   Com box-sizing border-box, isso é max-width 1160 + padding 10 — assim as
   colunas 50/50 dão 570+570 (tema antigo: 550+550, 20px a menos de texto). */
.um-hero__inner {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 600px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 10px;
}

.um-hero__copy {
  flex: 1 1 50%;
  padding: 50px 0;
}

.um-hero__title {
  /* Gap do container medido nos dois lados: 10px entre widget de título e
     widget de texto (orig `gap:10px` no `.e-con-full`). Com 18 a caixa de copy
     fechava 408 em vez de 410 ⇒ hero @390 586 vs 588. */
  margin: 0 0 10px;
  font-size: 48px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 53px;
  color: var(--um-purple);
}

/* Lead medido: o widget de texto fecha 120 = 5 linhas × 24 puras ⇒ sem margem
   própria. O respiro até o botão é o gap 10 do container + o `padding-top: 20`
   do widget do botão = 30 (nos outros CTAs o gap do container é 0, daí a regra
   compartilhada ficar em 20). */
.um-hero__lead {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  font-style: italic;
  line-height: 24px;
  color: #000000;
}

.um-hero__action {
  margin: 30px 0 0;
}

.um-about__action,
.um-support__action {
  margin: 20px 0 0;
}

.um-hero__art {
  position: relative;
  flex: 1 1 50%;
  height: 600px;
  display: flex;
  justify-content: center;
}

/* Pessoa medida 535×611 natural dentro de coluna de 600px — o original
   renderiza a arte contida na banda (≈524×600), não transbordando. */
.um-hero__scene {
  width: 100%;
  height: 600px;
  object-fit: contain;
  object-position: center;
}

/* Ícones flutuantes: posição aproximada contra inicio@1440.png;
   hover scale 1.2 medido (e-transform) — anima `scale`, não `transform`
   (ver o keyframe abaixo). */
.um-hero__icon {
  position: absolute;
  transition: scale 0.3s ease;
}

/* Entrada medida no home.html: widgets 79353c0/b9699f5/399f415/a4c64c8 com
   fadeInDown + _animation_delay 100/200/300/400 ms, classe animated-fast
   (= 800 ms, keyframe idêntico ao do Elementor: translateY(-20%)→0).
   O keyframe anima `translate` e o hover age sobre `scale` — propriedades
   independentes da transformação. Com fill-mode `both` os dois no mesmo
   `transform` o valor final do keyframe (none) venceria a regra :hover
   medido: transform ficava matrix(1,0,0,1,0,0) sob hover. */
@keyframes um-fade-in-down {
  from {
    opacity: 0;
    translate: 0 -20%;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.um-hero__icon {
  opacity: 0;
  animation: um-fade-in-down 800ms both;
}

.um-hero__icon:hover {
  scale: 1.2;
}

.um-hero__icon--code {
  top: 4%;
  left: 2%;
  width: 164px;
  animation-delay: 100ms;
}

.um-hero__icon--support {
  top: 6%;
  right: 0;
  width: 132px;
  animation-delay: 200ms;
}

.um-hero__icon--router {
  bottom: 16%;
  left: 6%;
  width: 134px;
  animation-delay: 300ms;
}

.um-hero__icon--tools {
  bottom: 12%;
  right: 2%;
  width: 147px;
  animation-delay: 400ms;
}

/* Eyebrow medido (10314cbe / 4bbfdc5): 16/600 uppercase ls5 #000 */
.um-eyebrow {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 30px;
  letter-spacing: 5px;
  color: #000000;
}

.um-eyebrow--center {
  text-align: center;
  margin-bottom: 0;
}

/* Sobre (4d544e76): padding 50/50; H2 40/800 #250838 lh45.
   Colunas medidas @1440: copy 684px (60%, pad 10 → texto 664 ⇒ H2 em 2
   linhas de 45) | arte 456px (40%, pad 10) — antes o tema usava 50/50 e o
   título inche em 4 linhas (+93px de altura na seção).
   A coluna de texto é um flex de COLUNA com gap 10 no original (cada widget é
   um item): em fluxo de bloco as margens colapsam e o bloco encurta. Caixa
   medida dos 5 itens @1440: 34 + 90 + 197 + 54 + 64 ⇒ 479 + padding 20 = 499
   (seção 599 = 50 + 499 + 50). */
.um-about__inner {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 1160px;
  margin: 0 auto;
  padding: 50px 10px;
}

.um-about__art {
  flex: 1 1 40%;
  padding: 10px;
  min-width: 0;
}

.um-about__art img {
  width: 100%;
  height: auto;
}

.um-about__copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 60%;
  padding: 10px;
  min-width: 0;
}

/* Eyebrow do Sobre medido @1440: widget 34 = texto 16/24 + padding-bottom 10
   (o `.um-eyebrow` base tem lh 30, que é o valor da faixa Suporte). */
.um-about .um-eyebrow {
  margin: 0;
  padding-bottom: 10px;
  line-height: 24px;
}

.um-about__title {
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 45px;
  color: var(--um-purple-deep);
}

/* Os dois parágrafos vivem num mesmo widget de texto (medido 197 = 120 + 14,4
   + 48 + 14,4): agrupados, o gap 10 da coluna cai onde o original põe gap 10. */
.um-about__body {
  display: flex;
  flex-direction: column;
}

.um-about__text {
  margin: 0 0 14.4px;
  font-size: 16px;
  color: var(--um-text);
}

.um-about__muted {
  margin: 0 0 14.4px;
  font-size: 16px;
  color: var(--um-text-soft);
}

/* 421930e9 medido: 18/600 #000 */
.um-about__strong {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #000000;
}

/* Benefícios: H2 42/900 uppercase lh45 #000 centralizado (35db6c0d) */
.um-benefits {
  background: #ffffff;
}

/* Entre Sobre e Benefícios o original tem um bloco de topo vazio medido 26px
   @1440 com `elementor-hidden-tablet elementor-hidden-mobile` ⇒ display:none
   ≤1024. Reproduzido como margem (mesmo fundo branco nas duas seções). */
@media (min-width: 1025px) {
  .um-benefits {
    margin-top: 26px;
  }
}

.um-benefits__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 50px 10px;
}

/* Título medido @1440: coluna 160 = padding 10 + widget 140 (90 de texto em 2
   linhas + `padding-bottom: 50`) + 10. ≤1024 o padding-bottom do widget some
   (col = 110 @1024).
   O texto NÃO tem `<br>` no original: a quebra vem do `padding` lateral do
   widget (`0 280px 50px` @1440, `0 100px` ≤1024 sobre a caixa 1004/748, `0`
   @390). Como minha caixa do <h2> é o próprio inner (1140 @desktop, largura
   total ≤1024), o lateral equivalente é 290px e 110px ⇒ texto 560/804/548/370,
   as mesmas quebras medidas (2 linhas ≥768, 3 @390). */
.um-benefits__title {
  margin: 0;
  padding: 10px 290px 60px;
  font-size: 42px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 45px;
  text-align: center;
  color: #000000;
}

/* Cards medidos @1440 (752fc3b7…): 524×184, padding 20, margem 20px 23px
   (2×(524+46)=1140 exato), ícone à esquerda em coluna 138 (img 118) + corpo
   321 (pad 10 ⇒ texto 301, h3 18/18 e p 16/24 com folga 5px).
   Borda medida 3px #eaeaea — com 1px a caixa fechava em 180 e cada linha de
   cards ficava 4px curta.
   ≤1024 o mesmo container vira coluna (medido @768). */
.um-benefits__grid {
  display: flex;
  flex-wrap: wrap;
}

.um-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  gap: 0;
  width: calc(50% - 46px);
  margin: 20px 23px;
  padding: 20px;
  border: 3px solid #eaeaea;
  border-radius: var(--um-radius-card);
  background: #ffffff;
}

.um-card__icon {
  flex: 0 0 138px;
  padding: 10px;
}

.um-card__icon img {
  width: 118px;
  height: auto;
  display: block;
}

/* Corpo medido @1440: 129 = pad 10 + (h3 18 + gap 5 + p 72+14,4) + pad 10. O
   p do widget de texto carrega o próprio margin-bottom (14,4) dentro da caixa. */
.um-card__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 0 1 321px;
  padding: 10px;
}

/* H3 do card medido: 18/700 #373737 lh18; texto 16/400 #575757 */
.um-card__body h3 {
  margin: 0;
  font-size: 18px;
  line-height: 18px;
  font-weight: 700;
  color: var(--um-text);
}

.um-card__body p {
  margin: 0 0 14.4px;
  font-size: 16px;
  font-weight: 400;
  color: var(--um-text-soft);
}

.um-benefits__action {
  margin: 40px 0 0;
  text-align: center;
}

/* Faixa Suporte (7d82dd7d): bg bg-support cover sobre #FFF, padding 40 */
.um-support {
  background-color: #ffffff;
  background-image: url('../img/bg-support-upmaker.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Coluna medida @1440: `padding: 20px 0 40px` + gap 10 sobre o inner de
   `padding: 40px 0` ⇒ 60 no topo, 80 na base. Itens medidos: eyebrow 20,
   título 45, texto 130, botão 65 ⇒ seção 430. */
.um-support__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 60px 10px 80px;
  text-align: center;
}

/* Eyebrow da faixa: lh 30 e `margin-bottom: -10px` (widget 20 @1440). */
.um-support .um-eyebrow {
  margin: 0 0 -10px;
}

.um-support__title {
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 45px;
  color: var(--um-purple-deep);
}

/* Texto da faixa medido (2bdcd4f8): 20/500 italic #373737; o widget tem
   `padding: 0 228px` @1440 = 20% do box de 1140 ⇒ bloco de 684px (60%) em 4
   linhas de lh 30 = 120 (+ margin-top 10 = caixa 130). */
.um-support__text {
  margin: 10px 0 0;
  max-width: 60%;
  font-size: 20px;
  font-weight: 500;
  font-style: italic;
  color: var(--um-text);
}

/* Botão CTA com ícone (Solicitar Suporte): ícone medido 15×15 com
   `vertical-align: baseline` e gap 8 — com ícone 14 o line-box fechava em 14 e
   o botão em 44 (original: 45, e a faixa inteira em 430×429). */
.um-btn-cta__icon {
  width: 15px;
  height: 15px;
  flex: none;
}

/* Bloco Contato da home (7510733d): info 50% | form 50%.
   O respiro de 50 no topo/rodapé é MARGEM do container de topo no original
   (`mar: 50px/50px` @1440) e o inner só tem `padding: 10px 0` — com padding de
   50 no inner a seção fechava 586 em vez de 494. Medido: 494 = 10 + 474 + 10. */
.um-contact {
  margin: 50px 0;
}

.um-contact__inner {
  display: flex;
  align-items: flex-start;
  gap: 0;
  max-width: 1160px;
  margin: 0 auto;
  padding: 10px;
}

/* Coluna de informação: flex de coluna com gap 10 (itens medidos @1440:
   título 90, lead 104 = 90+14,4, icon-list 96, sociais 150 = 100 + 50) ⇒ 474
   quando esticada pela coluna do formulário. */
.um-contact__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 50%;
  padding: 0 40px 0 0;
}

.um-contact__title {
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 45px;
  color: var(--um-purple-deep);
}

/* Lead medido (1b6ac87e): 20/500 italic #373737, caixa 104 = 3 linhas de 30 +
   margin-bottom 14,4 do próprio widget. Sem padding lateral em desktop. */
.um-contact__lead {
  margin: 0 0 14.4px;
  font-size: 20px;
  font-weight: 500;
  font-style: italic;
  color: var(--um-text);
}

/* Icon-list medido (fdbe90e): ícone 24px, texto 18/500 #575757, gap 15px */
.um-contact__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.um-contact__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
  color: var(--um-text-soft);
}

.um-contact__list li + li {
  margin-top: 15px;
}

.um-contact__list a {
  color: inherit;
  text-decoration: none;
}

.um-contact__icon {
  flex: 0 0 auto;
  margin-top: 3px;
  color: #000000;
}

/* Sociais da home: webp 50px, link morto #!, hover scale 1.2 medido.
   @1440 o container do widget mede 150 = `padding-top: 100px` + ícones 50
   (≤1024 vira `margin: 20px 0` com caixa 50). */
.um-contact__social {
  display: flex;
  gap: 12px;
  padding-top: 100px;
}

.um-contact__social-link img {
  display: block;
  width: 50px;
  height: 50px;
  transition: transform 0.3s ease;
}

.um-contact__social-link:hover img,
.um-contact__social-link:focus-visible img {
  transform: scale(1.2);
}

/* Cartão do form medido (4d8ab4c4): bg #ECF8F9, borda 2px #E1E4ED, raio 8,
   `padding: 10px` na COLUNA (medido @1440: col = 2+10+450+10+2 = 474) e os 30
   de padding interno vivem no widget, não na borda do cartão. */
.um-contact__form {
  flex: 0 0 50%;
  padding: 10px;
  border: 2px solid var(--um-placeholder);
  border-radius: var(--um-radius-icon);
  background: var(--um-cyan-tint);
}

.um-form {
  padding: 30px;
}

/* Honeypot: escondido de humano e leitor de tela (D-03) */
.um-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.um-form__row--split {
  display: flex;
  gap: 20px;
}

.um-form__row--split .um-form__field {
  flex: 1 1 50%;
}

.um-form__field {
  margin-bottom: 20px;
}

/* Label medido: 18/700 #373737, `lh 18` + `padding-bottom: 10` ⇒ caixa 28.
   Sem o line-height o box vinha 37 (lh `normal` da Montserrat) e cada linha de
   campo ficava 9px mais alta que o original. */
.um-form__field label {
  display: block;
  padding-bottom: 10px;
  font-size: 18px;
  line-height: 18px;
  font-weight: 700;
  color: var(--um-text);
}

.um-form__req {
  color: #f40002;
}

/* Campo medido no vivo: input 40px (padding 8/16, 15px/21, borda 1), branco,
   borda #E1E4ED, raio 6; placeholder #E1E4ED (bem claro — como no original).
   `height: 40px` é o que fecha a caixa medida: com só lh 21 + pad + borda a
   linha ficava em 39 e o grupo de campo em 67 (original: 28 + 40 = 68). */
.um-form__field input,
.um-form__field textarea {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font-family: var(--um-font);
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
  color: var(--um-text);
  background: #ffffff;
  border: 1px solid var(--um-placeholder);
  border-radius: var(--um-radius-field);
}

.um-form__field input {
  height: 40px;
}

/* textarea medido: 117px = 5 linhas de 21 + 5/14 + borda. O `display: block`
   acima fecha o grupo em 145 (28 + 117) como no original — inline-block, o
   strut da linha (fs 16/lh 24 do container) somava 7px e a linha inteira do
   form ficava 397×390. */
.um-form__field textarea {
  padding: 5px 14px;
  resize: vertical;
}

.um-form__field ::placeholder {
  color: var(--um-placeholder);
}

.um-form__field input:focus,
.um-form__field textarea:focus {
  outline: 2px solid #f9c20e;
  outline-offset: 1px;
}

/* Submit medido: #FB6B19 sólido, pill 30px, padding 17/25, 15/15 500
   uppercase → caixa 233×49 */
.um-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--um-font);
  font-size: 15px;
  line-height: 15px;
  font-weight: 500;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--um-orange);
  border: 0;
  border-radius: var(--um-radius-pill);
  padding: 17px 25px;
  cursor: pointer;
}

/* Hover medido no original (widgets 70c3f4d3/32d152e): submit não muda fundo
   — só color:#FFFFFF (já branco) + fill do SVG. Sem hover inventado; o
   outline de foco abaixo repete o medido nos campos. */
.um-form__submit:focus-visible {
  outline: 2px solid #f9c20e;
  outline-offset: 1px;
}

/* Home nos breakpoints reais do original. Coluna de arte do hero medida no
   vivo com elementor-hidden-tablet/mobile ⇒ some a ≤1024; H1 não encolhe
   (48/53 mesmo a 531px, getComputedStyle no original). */
@media (max-width: 1024px) {
  /* Banda do hero medida = 500 exata de 1024 para baixo (min-height do
     e-con); a coluna de copy assume o padding vertical de 50px do original
     ⇒ @390 o total sai 588 (50 + conteúdo 488 + 50), como medido. */
  .um-hero__inner {
    min-height: 500px;
    padding: 0 20px;
  }

  .um-hero__art {
    display: none;
  }

  .um-hero__copy {
    flex: 1 1 100%;
    padding: 50px 0;
  }

  /* Sobre ≤1024 (medido @1024/@768): o inner perde o gutter lateral (pad 50 0)
     e a coluna de texto passa a ter `padding: 0 50px`; a coluna da arte não
     some — fica um fantasma de 20px (w=20, h=20, padding 10, img escondida),
     e é isso que dá ao copy os 1004px medidos (x=20). */
  .um-about__inner {
    gap: 0;
    padding: 50px 0;
  }

  .um-about__art {
    flex: 0 0 20px;
    padding: 10px;
    overflow: hidden;
  }

  .um-about__art img {
    display: none;
  }

  .um-about__copy {
    flex: 1 1 0;
    padding: 0 50px;
  }

  /* Benefícios ≤1024 medido: o inner NÃO tem gutter lateral (w=viewport,
     `padding: 50px 0` @768 e @390) — o respiro de 20 vem das margens dos cards.
     Com `padding: 50px 20px` o card de 768 media 318 em vez de 338 e o corpo
     272 em vez de 292, o texto quebrava uma linha a mais e a seção fechava
     1187×1163 (@768) e 2170×2029 (@390). */
  .um-benefits__inner {
    padding: 50px 0;
  }

  /* Card de benefício no tablet: largura medida 44% do inner cheio
     (@1024: 451/1024 · @768: 338/768) com `margin: 20px` — os 12px de folga
     por linha são do próprio container Elementor, não de padding do inner. */
  .um-card {
    width: 44%;
    margin: 20px;
  }

  /* Título de benefícios: o `padding-bottom: 50` do widget só existe em
     desktop (@1024 a coluna mede 110 = 10 + 90 + 10). Lateral 110 = os 100px do
     widget sobre a caixa 1004, na minha caixa de largura total ⇒ texto 804. */
  .um-benefits__title {
    padding: 10px 110px;
  }

  /* Faixa suporte ≤1024: o gutter lateral sai do inner (medido: inner
     w=viewport, pad 40 0) e a coluna mantém 20/40 verticais ⇒ 60/80. */
  .um-support__inner {
    padding: 60px 0 80px;
  }

  .um-contact__inner {
    padding: 0 20px;
  }

  /* Cards de benefício viram coluna centralizada já no tablet
     (medido @768: container 752fc3b7 flex-direction:column, título
     75056e3d text-align:center; regras --flex-direction:column no
     home.css congelado ≤1024). Ícone medido 167px ≤767. */
  .um-card {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }

  /* Ícone medido @1024/@768: caixa 187 = padding 10 nos quatro lados + img 167
     (com `padding: 10px 10px 0` a caixa fechava em 177 e o card em 310). */
  .um-card__icon {
    flex: 0 0 auto;
    padding: 10px;
  }

  .um-card__icon img {
    width: 167px;
  }

  .um-card__body {
    flex: 0 1 auto;
    padding: 10px;
  }

  .um-card__body h3,
  .um-card__body p {
    text-align: center;
  }

  /* Bloco contato empilha ≤1024 (medido no vivo @768: 7510733d
     flex-direction:column, coluna-info com 728px = content-box cheio;
     idem em contato@768.png da página /contato). Gap 0: @1024 o inner mede 854
     = info 380 + form 474, sem respiro entre as colunas. */
  .um-contact__inner {
    flex-direction: column;
    gap: 0;
  }

  .um-contact__info,
  .um-contact__form {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  /* Centralização medida no home.css ≤1024: heading 4401830b e text 1b6ac87e
     (título e lead do bloco contato) ganham text-align:center já no tablet.
     A 768px no vivo a coluna-info inteira é center (w628), a icon-list
     abraça o conteúdo e centraliza (bloco w381 L193) e os sociais são
     inline centralizados (w160 L578) — o mesmo par vale até 390. */
  .um-contact__title,
  .um-contact__lead {
    text-align: center;
  }

  .um-contact__info {
    text-align: center;
  }

  .um-contact__list {
    display: inline-block;
    text-align: start;
  }

  /* Social medido ≤1024: widget de linha própria com `margin: 20px 0` (caixa
     50) — o `padding-top: 100px` é só do desktop. Ícones centralizados: em
     flex de coluna `inline-flex` vazaria na mesma linha da lista quando as
     duas cabem no content-box. */
  .um-contact__social {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    padding-top: 0;
  }
}

/* Tablet 768–1024 medido no vivo a 768: coluna de texto do hero fica em
   --width:80% do content-box (título 582px) e o bloco é centralizado, com
   texto ainda alinhado à esquerda (textAlign:start). ≤767 volta a 100%. */
@media (min-width: 768px) and (max-width: 1024px) {
  .um-hero__copy {
    flex: 0 1 80%;
    margin-inline: auto;
  }

  /* Textos da faixa suporte no tablet: o widget mede `padding: 0 5%` (caixa =
     viewport, @1024 conteúdo 921,6 ⇒ 3 linhas; @768 691,2 ⇒ 4 linhas). Não
     confundir com os 20% do desktop, que são do box de 1140. */
  .um-support__text {
    max-width: 100%;
    padding: 0 5%;
  }

  /* Coluna de informação do bloco contato: gutter lateral de 50 (medido
     @1024: col w=984 pad 0 50 ⇒ conteúdo 884; @768 w=728 ⇒ 628). ≤767 volta
     a 0 (col = 350 cheio). */
  .um-contact__info {
    padding: 0 50px;
  }

  /* Padding por widget, medido no tablet: título `0 100px` (@768: conteúdo
     428 ⇒ 3 linhas = 135) e lead `0 80px` (@768: 468 ⇒ 3 linhas = 104). */
  .um-contact__title {
    padding: 0 100px;
  }

  .um-contact__lead {
    padding: 0 80px;
  }
}

@media (max-width: 767px) {
  /* Sobre ≤767: a coluna fantasma da arte some (medido @390: copy w=350 =
     content-box cheio, padding 0) e o inner volta ao gutter de 20. */
  .um-about__inner {
    padding: 50px 20px;
  }

  .um-about__art {
    display: none;
  }

  .um-about__copy {
    padding: 0;
  }

  /* Faixa suporte ≤767: o gutter volta a 20 (col = 350) e o texto do widget
     fica full-bleed (medido @390: 4 linhas em 350 = 120… caixa 280 com o
     margin-top de 10). */
  .um-support__inner {
    padding: 60px 20px 80px;
  }

  /* Texto da faixa @390 medido: caixa 280 = 9 linhas de lh 30 (270) +
     margin-top 10, com `padding: 0 17,5px` (5% dos 350 do column) ⇒ 315 de
     conteúdo. Com o `max-width: 60%` do desktop herdado o bloco abria em 210
     de largura, 14 linhas e faixa de 819 em vez de 670. */
  .um-support__text {
    max-width: 100%;
    padding: 0 5%;
  }

  /* Card 1 por linha ≤767 (medido @390: w350 = 390 do inner cheio − 20 de
     margem de cada lado; corpo 304 ⇒ texto 284 = caixa 382 do card) */
  .um-card {
    width: calc(100% - 40px);
    margin: 20px;
  }

  /* Título de benefícios @390 medido: coluna 155 = padding 10 nos quatro lados
     + 3 linhas de 45 (conteúdo 370). Sem os 10 laterais o texto abria em 390 e
     fechava 4 linhas ⇒ 200×155 na seção. */
  .um-benefits__title {
    padding: 10px;
  }

  .um-form {
    padding: 20px 10px;
  }

  .um-form__row--split {
    flex-direction: column;
    gap: 0;
  }

  .um-form__row--split .um-form__field {
    flex: 1 1 auto;
  }

  .um-contact__info {
    padding: 0;
  }
}

/* ============================================================
 * Serviços — página Elementor id 52 (regras medidas em
 * css/servicos.css: 75364442 hero, zebra #FFF0E86B, 1a3412aa faixa)
 * ============================================================ */

/* Hero arco-íris: bg_title cover + overlay linear-gradient(90deg,#000 0%,#FFFFFF00 75%), min-height 200 */
.um-page-hero {
  background-color: #000000;
  background-image:
    linear-gradient(90deg, #000000 0%, #ffffff00 75%),
    url('../img/bg_title_upmaker.webp');
  background-position: center center;
  background-size: cover;
}

.um-page-hero__inner {
  display: flex;
  align-items: center;
  min-height: 200px;
  max-width: 1180px;
  margin: 0 auto;
  /* Padding vertical medido no container (`.e-con-full`): `50px 0px` @1440 e
     `50px 20px` ≤1024. Com 30 o H1 de @390 (2 linhas de 53 = 106) fechava 166
     e o `min-height: 200` mandava ⇒ 200 contra os 206 medidos no vivo. */
  padding: 50px 20px;
}

/* H1 medido: 48/800 uppercase branco lh53 */
.um-page-hero__title {
  margin: 0;
  font-size: 48px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 53px;
  color: #ffffff;
}

/* Intro medida @1440: bloco de topo 265 = coluna 145 (pad 10) + margens
   50/50 da coluna + 10/10 do inner. Como o respiro mora numa margem do PAI no
   original, aqui ele vira padding do próprio inner: 125 de conteúdo (H2 45 +
   mb 10 + P 56 + mb 14,4) + 70×2 = 265. A ≤767 a coluna deles perde o
   padding vertical ⇒ 60×2 fecha os 402 medidos. */
.um-intro__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 70px 20px;
  text-align: center;
}

.um-intro__title {
  margin: 0 0 10px;
  font-size: 42px;
  font-weight: 900;
  line-height: 45px;
  color: #000000;
}

.um-intro__text {
  /* Largura medida no vivo @1440: o `<p>` do widget text-editor ocupa 896px
     dentro dos 1120 do container ⇒ `--width: 80%` do widget (não um max-width
     fixo). Com 720 o parágrafo quebrava em 3 linhas; a 896 são 2 (h 56 = 2×28).
     O widget mede 70, não 56: os 14,4px (0,48em) de margin-bottom do `<p>`
     entram na conta da coluna de 145. */
  margin: 0 auto 14.4px;
  max-width: 80%;
  font-size: 20px;
  font-weight: 500;
  font-style: italic;
  line-height: 28px;
  color: var(--um-text);
}

/* Seções alternadas: zebra medida #FFF0E86B (pêssego 42%); colunas 60/40 */
.um-svc {
  background: #ffffff;
}

.um-svc--tint {
  background: #fff0e86b;
}

/* Colunas medidas @1440 (servicos): sem gap — copy `flex: 0 0 60%` (684) com
   70px de padding NO LADO DA IMAGEM (texto útil 614) e arte `0 0 40%` (456).
   O respiro de 70px vive dentro da coluna de texto, então a inversão
   (`--reverse`, que no meu DOM inverte por `row-reverse`) tem de mover o
   padding para o lado oposto — senão o respiro cai na borda externa.
   Vertical: ZERO no desktop — o bloco de topo mede 470 e é a imagem (456×470)
   que define a altura; os 40px que eu tinha aqui somavam 80 ao bloco. */
.um-svc__inner {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.um-svc__inner--reverse {
  flex-direction: row-reverse;
}

/* Coluna de copy = flex-column com `gap: 10px`, como o container do widget
   original (medido @768: `gap: 10px`, caixas dos widgets SEM margem vertical
   própria além do mb de 14,4 do `<p>`). Com `<div>` de bloco simples, os
   `margin-bottom: 10px` colapsavam com o `margin-top` do vizinho ⇒ 14,4 em vez
   de 24,4 ⇒ coluna 10px mais curta que a do original em toda banda empilhada. */
.um-svc__copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 60%;
  padding: 0 70px 0 0;
}

.um-svc__inner--reverse .um-svc__copy {
  padding: 0 0 0 70px;
}

.um-svc__art {
  flex: 0 0 40%;
}

.um-svc__art img {
  display: block;
  width: 100%;
  height: auto;
}

/* H2 de serviço medido: 36/700 #5D138C, caixa 36px de alto (line-height =
   font-size, medido no vivo: `Computadores` 279×36 com fs 36/lh 36) */
.um-svc__title {
  /* Sem margem vertical: o respiro entre widgets é o `gap: 10px` da coluna. */
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 36px;
  color: var(--um-purple);
}

.um-svc__intro {
  /* mb do `<p>` medido no widget original: 14,4px (0,48em), não 18. */
  margin: 0 0 14.4px;
  font-size: 16px;
  color: var(--um-text-soft);
}

/* Lista medida: triângulo gradiente #F5AF19→#F12711, texto 16/400 #575757,
   label strong #373737. Ritmo por item medido no `elementor-icon-list-item`:
   5px de padding-bottom (exceto o último) + 5px de margin-top entre itens ⇒
   10px de respiro, e não os 15 que eu tinha (a lista esticava 15px por bloco).
   Os 10px acima da lista são o margin-bottom do widget de texto. */
.um-svc__list {
  /* margin 0: o espaçamento até o widget de cima é o `gap` da coluna. */
  margin: 0;
  padding: 0;
  list-style: none;
}

.um-svc__list li {
  display: flex;
  align-items: flex-start;
  /* Ícone medido no original: caixa de 18px = glifo 14 + `--e-icon-list-icon-
     margin: 0 3.5px 0 0`. Com 16+10 eu deixava o texto 9px mais estreito e o
     "Upgrade:" quebrava em 3 linhas (@390) onde o original quebrava em 2. */
  gap: 3.5px;
  padding-bottom: 5px;
  font-size: 16px;
  color: var(--um-text-soft);
}

.um-svc__list li:last-child {
  padding-bottom: 0;
}

.um-svc__list li + li {
  margin-top: 5px;
}

.um-svc__list strong {
  color: var(--um-text);
}

.um-svc__bullet {
  flex: 0 0 auto;
  width: 14px;
  height: 15px;
  margin-top: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 35'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='27.3173' y1='37.93' x2='49.7238' y2='16.8318' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23F5AF19'/%3E%3Cstop offset='1' stop-color='%23F12711'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4.52 34.59C2.51 35.75 0 34.3 0 31.98V3.02C0 .7 2.51-.75 4.52.41l25.05 14.48c2.01 1.16 2.01 4.06 0 5.22L4.52 34.59Z' fill='url(%23g)'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Faixa CTA medida (1a3412aa): bg #FFD7EF73 + entre-em-contato cover, padding
   50. O container `.cta-main` do original tem `margin-top: 100px` (medido:
   último bloco de serviço termina em 2903 e a faixa começa em 3003 @1440) —
   sem ele a faixa colava na última linha de serviço. */
.um-cta-band {
  margin-top: 100px;
  background-color: #ffd7ef73;
  background-image: url('../img/entre-em-contato.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Colunas medidas @1440: copy 798 (70%) com padding-right 40 ⇒ H2 e P a 758;
   ação 342 (30%) com padding 10 ⇒ botão 171×44 na borda direita. */
.um-cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  max-width: 1180px;
  margin: 0 auto;
  padding: 50px 20px;
}

.um-cta-band__copy {
  display: flex;
  flex-direction: column;
  flex: 0 0 70%;
  padding: 0 40px 0 0;
}

.um-cta-band__action {
  flex: 0 0 30%;
  padding: 10px;
  margin: 0;
}

.um-cta-band__title {
  margin: 0 0 10px;
  font-size: 40px;
  font-weight: 800;
  line-height: 45px;
  color: var(--um-purple-deep);
}

/* mb medido 14,4px (0,48em) no `<p>` do widget: a coluna copy é flex-column,
   então o respiro não colapsa e a faixa sai os 129px medidos (45+10+60+14,4). */
.um-cta-band__text {
  margin: 0 0 14.4px;
  font-size: 20px;
  font-weight: 500;
  font-style: italic;
  line-height: 30px;
  color: var(--um-text);
}

/* Mobile medido no CSS congelado: NENHUM override de font-size nas subpáginas
   (H1 48/53, intro 42, svc 36 e banda 40 ficam iguais a ≤767). A 768–1024 os
   widgets heading/text/image das seções centralizam (16 ids medidos em
   servicos.css); ≤767 empilha preservando a ordem do DOM. */
@media (max-width: 1024px) {
  /* Faixa de página ≤1024: o gutter lateral medido é 40 (20 do boxed + 20 do
     container). Sem isso o H1 começava em x=20 contra os 40 do vivo. */
  .um-page-hero__inner {
    padding: 50px 40px;
  }

  /* O `--width: 80%` do widget de texto é uma regra desktop: ≤1024 o `<p>` do
     original ocupa a coluna inteira (medido @1024: 984 ⇒ 2 linhas de 28 = 56;
     com 80% ficava 787 ⇒ 3 linhas ⇒ intro 293 em vez de 265). */
  .um-intro__text {
    max-width: none;
  }

  .um-svc__title,
  .um-svc__intro,
  .um-svc__art {
    text-align: center;
  }

  /* @≤1024 o original JÁ empilha (medido @768: `dir: column`, gap 0, colunas
     100% ⇒ 728 de largura com o gutter lateral do container) e o inner passa a
     `padding: 20px 0`. A imagem deixa de ser `width: 100%` e passa a tamanho
     fixo centralizado: 308×318 dentro de uma coluna de arte de 418
     (318 + 50 em cima + 50 embaixo). */
  .um-svc__inner,
  .um-svc__inner--reverse {
    flex-direction: column;
    gap: 0;
    padding: 20px 20px;
  }

  .um-svc__copy,
  .um-svc__inner--reverse .um-svc__copy {
    flex: 0 0 auto;
    width: 100%;
    padding: 0;
  }

  .um-svc__art {
    flex: 0 0 auto;
    width: 100%;
    padding: 50px 0;
  }

  .um-svc__art img {
    width: 308px;
    margin-inline: auto;
  }

  /* Faixa CTA @≤1024: o original EMPILHA (medido @768: inner `dir: column`,
     copy 728×234 com `padding: 0 50px` e texto centralizado, ação 728×64 com
     `margin-top: 30px`) ⇒ bloco de topo 428 = 50+234+30+64+50. Eu mantinha
     row 70/30 aqui e ficava em 304. */
  .um-cta-band__inner {
    flex-direction: column;
    text-align: center;
  }

  .um-cta-band__copy {
    flex: 0 0 auto;
    width: 100%;
    padding: 0 50px;
  }

  /* Medido @768: ação 728×64 = botão 44 + `padding: 10px`, com
     `margin-top: 30px`. Eu tinha zerado o padding ⇒ bloco 44 e −20 no total. */
  .um-cta-band__action {
    flex: 0 0 auto;
    width: 100%;
    padding: 10px;
    margin: 30px 0 0;
  }
}

/* Banda 768–1024: Servidores é a única seção full-bleed (medido @768: inner
   `padding: 0` e w=768; @1024: w=1024). As outras quatro empilham dentro dos
   20px de gutter + 20px verticais. Sem isto o bloco saía 672 contra 594 e a
   lista — 40px mais estreita que os 750 do original — quebrava em 2 linhas. */
@media (min-width: 768px) and (max-width: 1024px) {
  .um-svc--full .um-svc__inner {
    padding: 0;
  }

  /* Padding HORIZONTAL dos widgets da faixa, medido @768 no widget-con do
     original: título `0 100px` (caixa 628 ⇒ texto a 428 ⇒ 2 linhas = 90) e
     texto `0 80px` (caixa 628 ⇒ texto a 468 ⇒ 4 linhas = 120+14,4). Sem isto
     meu copy era 159 contra 234 e o bloco 353 contra 428. A ≤767 o original
     larga esse padding (bloco 458 já batia). */
  .um-cta-band__title {
    padding: 0 100px;
  }

  .um-cta-band__text {
    padding: 0 80px;
  }
}

@media (max-width: 767px) {
  /* Mobile medido @390: o container do original SOLTA o gutter lateral
     (inner `padding: 40px 0`, w 390) e quem recebe os 20px é a coluna de
     texto (x=20 w=350, pad 0), enquanto a imagem fica full-bleed (x=0 w=390).
     O respiro de 70px entre texto e imagem, que no desktop é padding lateral
     da coluna de copy, não existe na pilha. */
  .um-svc__inner {
    flex-direction: column;
    gap: 0;
    padding: 40px 0;
  }

  /* No mobile o original empilha na ordem do DOM: onde a imagem é a 1ª
     coluna (seções com row-reverse no desktop), ela fica acima do texto */
  .um-svc__inner--reverse {
    flex-direction: column-reverse;
    gap: 0;
  }

  .um-svc__copy,
  .um-svc__inner--reverse .um-svc__copy {
    flex: 0 0 auto;
    padding: 0 20px;
  }

  .um-svc__art {
    width: 100%;
    flex: 0 0 auto;
    /* @390 medido: coluna de arte full-bleed (x=0 w=390) de 442 de alto com
       imagem 390×402 ⇒ sobram 20px em cima e embaixo, e a imagem volta a ser
       100% (não mais os 308 fixos da banda tablet). */
    padding: 20px 0;
  }

  .um-svc__art img {
    width: 100%;
  }

  .um-cta-band__inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 50px 20px;
  }

  .um-cta-band__copy,
  .um-cta-band__action {
    flex: 0 0 auto;
    width: 100%;
    padding: 0;
  }

  /* @390 medido: ação 350×64 = botão 44 + `padding: 10px` e `margin-top: 30px`
     ⇒ bloco 458 (50+264+30+64+50). O padding de 10px vale nas duas bandas. */
  .um-cta-band__action {
    padding: 10px;
    margin: 30px 0 0;
  }

  /* Intro ≤767: a coluna do original perde o padding vertical (medido @390:
     `0px 20px` + margens 50/50 + inner 10/10 = 402). Aqui o respiro é todo do
     inner: 282 de conteúdo + 60×2 = 402. O gutter lateral é 30 (= 10 do boxed
     + 20 do container, medido: a coluna de texto fecha 330 @390). */
  .um-intro__inner {
    padding: 60px 30px;
  }

  /* Título da faixa ≤767: medido no vivo em @390 o original NÃO reduz o H1 —
     48/53 e duas linhas (h1 106, coluna 206). A exceção de tamanho é só para
     páginas minhas cujo título não cabe na coluna de 310 (ver
     `.um-page-hero__title--fit` em /privacidade). */
  .um-page-hero__title--fit {
    font-size: 36px;
    line-height: 42px;
  }
}



/* ---------------------------------------------------------------------------
 * Contato (página /contato, Fase 5) — medido em contato.css (elementor-54)
 * ------------------------------------------------------------------------- */

/* Bloco contato deslocado para baixo no herói arco-íris: margens da
   coluna 61e4d106 (100/60 desktop, 80/50 ≤1024, 60/50 ≤767). */
.um-contact--page {
  margin-top: 100px;
  margin-bottom: 60px;
}

/* H2 medido (3fb9be37): 40/900 uppercase, lh 45, #250838 — difere da home */
.um-contact--page .um-contact__title {
  font-weight: 900;
  text-transform: uppercase;
}

/* Mapa medido (badb93d): iframe altura 300px, full-width; container com
   padding-top 60px. */
.um-map {
  padding-top: 60px;
}

.um-map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}

/* Flash do POST (substitui a mensagem inline do widget Elementor):
   mensagem 18/500 lh 20, sucesso #2E8845, erro #F40002 (medidos em 32d152e). */
.um-form__flash {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--um-radius-icon);
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
}

.um-form__flash--success {
  color: #2e8845;
  background: #e8f4eb;
}

.um-form__flash--error {
  color: #f40002;
  background: #fbeaea;
}

@media (max-width: 1024px) {
  .um-contact--page {
    margin-top: 80px;
    margin-bottom: 50px;
  }
}

@media (max-width: 767px) {
  .um-contact--page {
    margin-top: 60px;
    margin-bottom: 50px;
  }

  /* "Especialistas!" a 40px/900 mede 346px e estoura o content-box de 360px
     (overflow +6 medido na matriz). Em ≤767 o H2 da faixa cai para 34px. */
  .um-contact--page .um-contact__title {
    font-size: 34px;
    line-height: 40px;
  }
}

/* D-08 (15/10/2026): fade-out-down 300ms entre rotas — comportamento do kit
   Elementor medido em tokens.md §1 (--e-page-transition-animation-duration),
   que NÃO aparecia no site vivo; reproduzido sem lib e sem preloader. */
body {
  transition: opacity 300ms ease, transform 300ms ease;
}

body.um-page-leaving {
  opacity: 0;
  transform: translateY(10px);
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }

  /* O fade de entrada é motion; o JS do tilt já se desliga aqui (theme.js).
     Sem este par, o ícone ficaria invisível até o fim da animação. */
  .um-hero__icon {
    animation: none;
    opacity: 1;
  }
}

/*
 * Página /privacidade (D-06) — superfície nova, sem oráculo: a forma vem do
 * padrão dos temas do repo (ddallagnol/paroquiasmi). Tipografia nos tokens
 * medidos do próprio tema (H2 #250838 800, corpo #575757 16).
 */
.um-policy {
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 20px 80px;
}

/* Linha de metadados das duas páginas legais (razão social + data), par do
   `.pv-prose__meta` do tema provecta: 14px, acento amarelo da casa. */
.um-policy p.um-policy__meta {
  margin: 0 0 28px;
  padding-left: 12px;
  border-left: 3px solid var(--um-yellow);
  font-size: 14px;
  line-height: 21px;
  color: var(--um-text-soft);
}

.um-policy h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--um-purple-deep);
  margin: 32px 0 10px;
}

.um-policy p,
.um-policy li {
  font-size: 16px;
  color: var(--um-text-soft);
  line-height: 1.7;
}

.um-policy ul {
  padding-left: 22px;
}

@media (max-width: 767px) {
  .um-policy {
    padding: 40px 20px 60px;
  }
}