/* ==========================================================================
   UpMobb — Secoes
   Blocos de pagina: hero, metricas, vitrine, integracoes, planos, chamada.
   ========================================================================== */

/* Empurra o conteudo para baixo do cabecalho fixo */
.conteudo { padding-top: var(--altura-cabecalho); }

/* --- Hero da home ------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3rem, 1.5rem + 6vw, 6rem) clamp(3.5rem, 2rem + 6vw, 7rem);
  background: linear-gradient(168deg, var(--marca-900) 0%, var(--marca-700) 45%, var(--marca-500) 100%);
  color: var(--branco);
  overflow: hidden;
}

/* Malha tecnica de fundo, evoca o plano de corte */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
  pointer-events: none;
}

/* Brilho quente no canto, quebra a frieza do azul */
.hero::after {
  content: '';
  position: absolute;
  top: -18%;
  right: -12%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 122, 26, 0.22) 0%, transparent 66%);
  pointer-events: none;
}

.hero-interno {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}

.hero h1 {
  font-size: var(--t-5xl);
  color: var(--branco);
  margin-block: var(--e-5) var(--e-6);
}

.hero h1 em {
  font-style: normal;
  color: var(--acento-400);
}

.hero-descricao {
  font-size: var(--t-lg);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  max-width: 54ch;
}

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin-top: var(--e-8);
}

.hero-nota {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-6);
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.65);
}

.hero-nota svg { width: 16px; height: 16px; color: var(--acento-400); }

/* Painel de vidro que abriga a arte do hero */
.hero-visual {
  position: relative;
  padding: var(--e-4);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-xl);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-visual img,
.hero-visual svg {
  width: 100%;
  border-radius: var(--raio-lg);
  display: block;
}

/* Cartao flutuante sobreposto ao visual */
.hero-cartao {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  background: var(--branco);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-lg);
  animation: flutuar 5s ease-in-out infinite;
}

.hero-cartao-titulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--t-lg);
  font-weight: var(--peso-extra);
  color: var(--marca-500);
  line-height: 1.1;
}

.hero-cartao-desc {
  display: block;
  font-size: var(--t-xs);
  color: var(--texto-fraco);
}

.hero-cartao-icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--raio-sm);
  background: var(--marca-50);
  color: var(--marca-500);
}

.hero-cartao-icone svg { width: 21px; height: 21px; }

.hero-cartao.pos-a { bottom: -22px; left: -28px; }
.hero-cartao.pos-b { top: -20px; right: -24px; animation-delay: 1.6s; }

@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* --- Hero interno das demais paginas ------------------------------------ */

.hero-pagina {
  position: relative;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  background: linear-gradient(160deg, var(--marca-900), var(--marca-600));
  color: var(--branco);
  overflow: hidden;
}

.hero-pagina::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 100% at 20% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 20% 0%, #000 20%, transparent 75%);
}

.hero-pagina .container { position: relative; z-index: var(--z-base); }
.hero-pagina h1 { color: var(--branco); max-width: 20ch; }

.hero-pagina p {
  margin-top: var(--e-5);
  font-size: var(--t-lg);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  max-width: 62ch;
}

.hero-pagina .hero-acoes { margin-top: var(--e-8); }

/* Trilha de navegacao */
.trilha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-5);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.55);
}

.trilha a { color: rgba(255, 255, 255, 0.75); }
.trilha a:hover { color: var(--branco); }
.trilha span[aria-hidden] { opacity: 0.45; }

/* --- Faixa de metricas -------------------------------------------------- */

.metricas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-8);
  padding: var(--e-10) var(--e-8);
  margin-top: calc(var(--secao-y) * -0.55);
  position: relative;
  z-index: var(--z-suspenso);
  background: var(--branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
}

.metrica { text-align: center; }

.metrica-valor {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--t-3xl);
  font-weight: var(--peso-extra);
  line-height: 1.05;
  color: var(--marca-500);
  letter-spacing: -0.03em;
}

.metrica-rotulo {
  display: block;
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: var(--texto-suave);
  line-height: 1.5;
}

/* --- Vitrine: texto e imagem alternados --------------------------------- */

.vitrine {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}

/* Inverte a ordem visual sem mexer na ordem do HTML (leitura/SEO intactas) */
.vitrine.invertida .vitrine-midia { order: -1; }

.vitrine + .vitrine { margin-top: clamp(3.5rem, 2rem + 6vw, 7rem); }

.vitrine-texto h2 { margin-bottom: var(--e-5); }

.vitrine-texto p {
  color: var(--texto-suave);
  font-size: var(--t-lg);
  line-height: 1.7;
}

.vitrine-texto .lista-check { margin-top: var(--e-6); }
.vitrine-texto .btn { margin-top: var(--e-8); }

.vitrine-midia {
  position: relative;
  border-radius: var(--raio-lg);
  overflow: hidden;
  background: var(--tinta-100);
  box-shadow: var(--sombra-md);
}

.vitrine-midia img,
.vitrine-midia svg { width: 100%; display: block; }

/* --- Grade de recursos -------------------------------------------------- */

.recurso {
  display: flex;
  gap: var(--e-4);
  padding: var(--e-6);
  border-radius: var(--raio-md);
  transition: background var(--media);
}

.recurso:hover { background: var(--fundo-suave); }

.recurso-icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--raio-sm);
  background: var(--marca-50);
  color: var(--marca-500);
}

.recurso-icone svg { width: 22px; height: 22px; }

.recurso h3 { font-size: var(--t-base); margin-bottom: var(--e-2); }
.recurso p  { font-size: var(--t-sm); color: var(--texto-suave); line-height: 1.6; }

/* --- Passos numerados --------------------------------------------------- */

.passos { counter-reset: passo; }

.passo {
  position: relative;
  padding-left: var(--e-16);
  padding-bottom: var(--e-10);
}

.passo:last-child { padding-bottom: 0; }

.passo::before {
  counter-increment: passo;
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--raio-full);
  background: var(--marca-500);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-size: var(--t-sm);
  font-weight: var(--peso-extra);
}

/* Linha vertical ligando um passo ao seguinte */
.passo:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 23px;
  top: 54px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--marca-200), transparent);
}

.passo h3 { font-size: var(--t-lg); margin-bottom: var(--e-2); }
.passo p  { color: var(--texto-suave); }

/* --- Video incorporado --------------------------------------------------
   O iframe do YouTube nao e responsivo sozinho: o envolucro impoe a
   proporcao 16:9 e o iframe preenche a area resultante. */

.video-envolucro {
  position: relative;
  max-width: 960px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--raio-lg);
  background: #000;
  box-shadow: var(--sombra-xl);
}

.secao-escura .video-envolucro,
.secao-marca .video-envolucro { border: 1px solid rgba(255, 255, 255, 0.16); }

.video-envolucro iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-legenda {
  max-width: 960px;
  margin: var(--e-5) auto 0;
  text-align: center;
  font-size: var(--t-sm);
  color: var(--texto-fraco);
}

.secao-escura .video-legenda { color: rgba(255, 255, 255, 0.62); }

/* --- Integracoes (ERPs e maquinas) -------------------------------------- */

.integracoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-3);
}

.integracao-tag {
  padding: 0.7rem 1.4rem;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-full);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  color: var(--texto-suave);
  transition: border-color var(--rapida), color var(--rapida),
              transform var(--rapida), box-shadow var(--rapida);
}

.integracao-tag:hover {
  border-color: var(--marca-300);
  color: var(--marca-600);
  transform: translateY(-2px);
  box-shadow: var(--sombra-sm);
}

/* --- Depoimentos -------------------------------------------------------- */

.depoimento {
  display: flex;
  flex-direction: column;
  padding: var(--e-8);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
}

.depoimento-aspas {
  width: 32px;
  height: 32px;
  margin-bottom: var(--e-5);
  color: var(--marca-200);
}

.depoimento blockquote {
  font-size: var(--t-lg);
  line-height: 1.65;
  color: var(--tinta-700);
  margin-bottom: var(--e-6);
}

.depoimento figcaption {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-top: auto;
  padding-top: var(--e-5);
  border-top: 1px solid var(--borda);
}

.depoimento-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--raio-full);
  background: var(--marca-500);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-forte);
  font-size: var(--t-sm);
  flex-shrink: 0;
}

.depoimento-nome {
  display: block;
  font-weight: var(--peso-semi);
  color: var(--tinta-900);
  font-size: var(--t-sm);
}

.depoimento-cargo {
  display: block;
  font-size: var(--t-xs);
  color: var(--texto-fraco);
}

/* --- Planos ------------------------------------------------------------- */

.planos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-6);
  align-items: start;
}

.plano {
  display: flex;
  flex-direction: column;
  padding: var(--e-8);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  transition: box-shadow var(--media), transform var(--media);
}

.plano:hover { box-shadow: var(--sombra-md); }

/* Plano em evidencia: cresce, escurece e ganha o selo */
.plano-destaque {
  position: relative;
  background: var(--marca-900);
  border-color: var(--marca-900);
  color: rgba(255, 255, 255, 0.78);
  box-shadow: var(--sombra-lg);
}

.plano-destaque h3,
.plano-destaque .plano-preco { color: var(--branco); }

.plano-destaque .plano-descricao { color: rgba(255, 255, 255, 0.68); }

.plano-selo {
  position: absolute;
  top: var(--e-6);
  right: var(--e-6);
}

.plano h3 { font-size: var(--t-xl); margin-bottom: var(--e-2); }

.plano-descricao {
  font-size: var(--t-sm);
  color: var(--texto-suave);
  line-height: 1.6;
  min-height: 3em;
}

.plano-preco {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  margin-block: var(--e-6) var(--e-2);
  font-family: var(--fonte-titulo);
  font-size: var(--t-3xl);
  font-weight: var(--peso-extra);
  color: var(--tinta-900);
  letter-spacing: -0.03em;
}

.plano-periodo {
  font-family: var(--fonte-texto);
  font-size: var(--t-sm);
  font-weight: var(--peso-normal);
  color: var(--texto-fraco);
  letter-spacing: 0;
}

.plano-destaque .plano-periodo { color: rgba(255, 255, 255, 0.6); }

.plano .btn { margin-block: var(--e-6); }

.plano-recursos {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding-top: var(--e-6);
  border-top: 1px solid var(--borda);
}

.plano-destaque .plano-recursos { border-top-color: rgba(255, 255, 255, 0.14); }

.plano-recursos li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--texto-suave);
}

.plano-destaque .plano-recursos li { color: rgba(255, 255, 255, 0.75); }

.plano-recursos svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--marca-500);
}

.plano-destaque .plano-recursos svg { color: var(--acento-400); }

/* Aviso de conteudo provisorio na pagina de planos */
.aviso-provisorio {
  display: flex;
  gap: var(--e-4);
  padding: var(--e-5) var(--e-6);
  margin-bottom: var(--e-10);
  background: var(--acento-100);
  border: 1px solid var(--acento-400);
  border-radius: var(--raio-md);
  color: var(--tinta-800);
  font-size: var(--t-sm);
  line-height: 1.65;
}

.aviso-provisorio svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--acento-600);
  margin-top: 2px;
}

/* --- Tabela comparativa ------------------------------------------------- */

.tabela-envolucro { overflow-x: auto; }

.tabela-comparativa {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.tabela-comparativa th,
.tabela-comparativa td {
  padding: var(--e-4) var(--e-5);
  text-align: left;
  border-bottom: 1px solid var(--borda);
}

.tabela-comparativa thead th {
  font-family: var(--fonte-titulo);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  border-bottom-width: 2px;
}

.tabela-comparativa tbody th {
  font-weight: var(--peso-medio);
  color: var(--tinta-800);
}

.tabela-comparativa td { text-align: center; color: var(--texto-suave); }
.tabela-comparativa tbody tr:hover { background: var(--fundo-suave); }
.tabela-comparativa .sim { color: var(--sucesso); font-weight: var(--peso-semi); }
.tabela-comparativa .nao { color: var(--tinta-300); }

/* --- Chamada final ------------------------------------------------------ */

.chamada {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 6vw, 6rem);
  background: linear-gradient(140deg, var(--marca-700), var(--marca-500));
  color: var(--branco);
  overflow: hidden;
}

.chamada::before {
  content: '';
  position: absolute;
  bottom: -45%;
  left: -8%;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 122, 26, 0.24) 0%, transparent 66%);
}

.chamada .container { position: relative; z-index: var(--z-base); }

.chamada h2 {
  color: var(--branco);
  max-width: 22ch;
  margin-inline: auto;
}

.chamada p {
  margin-top: var(--e-5);
  font-size: var(--t-lg);
  color: rgba(255, 255, 255, 0.82);
  max-width: 58ch;
  margin-inline: auto;
}

.chamada .hero-acoes { justify-content: center; }

/* --- Bloco de contato --------------------------------------------------- */

.contato-grade {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

.contato-canais { display: flex; flex-direction: column; gap: var(--e-5); }

.canal {
  display: flex;
  gap: var(--e-4);
  padding: var(--e-5);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  transition: border-color var(--rapida), box-shadow var(--rapida);
}

.canal:hover { border-color: var(--marca-200); box-shadow: var(--sombra-sm); }

.canal-icone {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--raio-sm);
  background: var(--marca-50);
  color: var(--marca-500);
}

.canal-icone svg { width: 21px; height: 21px; }
.canal h3 { font-size: var(--t-base); margin-bottom: 2px; }
.canal p  { font-size: var(--t-sm); color: var(--texto-suave); }

.formulario {
  display: grid;
  gap: var(--e-5);
  padding: var(--e-8);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
}

.formulario-duplo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-5);
}

/* Mensagem de retorno do envio */
.formulario-retorno {
  display: none;
  padding: var(--e-4) var(--e-5);
  border-radius: var(--raio);
  font-size: var(--t-sm);
  line-height: 1.6;
}

.formulario-retorno[data-estado='sucesso'] {
  display: block;
  background: #e6f5ef;
  color: var(--sucesso);
  border: 1px solid #a8ddc9;
}

.formulario-retorno[data-estado='erro'] {
  display: block;
  background: #fdeaea;
  color: var(--erro);
  border: 1px solid #f2bcbc;
}

/* No aviso de pop-up bloqueado o retorno carrega links de saida: precisam
   ficar legiveis sobre o fundo colorido e obviamente clicaveis. */
.formulario-retorno a {
  color: inherit;
  font-weight: var(--peso-semi);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.formulario-retorno a:hover { opacity: 0.75; }

/* --- Documento legal ----------------------------------------------------
   Politica de privacidade e termos de uso. Texto corrido longo: a leitura
   pede medida de linha curta, hierarquia clara e ancoras estaveis. */

.documento-legal { line-height: 1.8; }

.documento-legal h2 {
  margin-top: var(--e-12);
  margin-bottom: var(--e-4);
  padding-top: var(--e-6);
  border-top: 1px solid var(--borda);
  font-size: var(--t-xl);
  /* compensa o cabecalho fixo ao chegar por ancora */
  scroll-margin-top: calc(var(--altura-cabecalho) + var(--e-6));
}

.documento-legal h2:first-of-type { margin-top: var(--e-8); }

.documento-legal h3 {
  margin-top: var(--e-8);
  margin-bottom: var(--e-3);
  font-size: var(--t-base);
  color: var(--marca-600);
}

.documento-legal p { margin-top: var(--e-4); color: var(--texto-suave); }

.documento-legal ul,
.documento-legal ol {
  margin-top: var(--e-4);
  padding-left: var(--e-6);
  color: var(--texto-suave);
}

.documento-legal ul li { list-style: disc; margin-bottom: var(--e-2); }
.documento-legal ol li { list-style: decimal; margin-bottom: var(--e-2); }
.documento-legal li::marker { color: var(--marca-400); }

.documento-legal dl { margin-top: var(--e-4); }
.documento-legal dt { font-weight: var(--peso-semi); color: var(--tinta-900); margin-top: var(--e-4); }
.documento-legal dd { margin-left: 0; color: var(--texto-suave); }

/* Sumario no topo do documento */
.sumario {
  padding: var(--e-6) var(--e-8);
  background: var(--fundo-suave);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
}

.sumario h2 {
  margin: 0 0 var(--e-4);
  padding: 0;
  border: none;
  font-size: var(--t-sm);
  font-weight: var(--peso-extra);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.sumario ol {
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: var(--e-8);
}

.sumario li {
  list-style: none;
  margin-bottom: var(--e-2);
  break-inside: avoid;
}

.sumario a { font-size: var(--t-sm); }

/* Data de vigencia */
.documento-data {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.4rem 0.9rem;
  border-radius: var(--raio-full);
  background: rgba(255, 255, 255, 0.14);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.85);
}

.documento-data svg { width: 14px; height: 14px; }

/* Campo a preencher antes de publicar: precisa saltar aos olhos */
.pendente {
  padding: 1px 6px;
  border-radius: var(--raio-sm);
  background: var(--acento-100);
  border: 1px dashed var(--acento-500);
  font-family: var(--fonte-mono);
  font-size: 0.85em;
  color: var(--acento-600);
  white-space: nowrap;
}

/* Tabela dentro do documento legal */
.tabela-legal {
  width: 100%;
  margin-top: var(--e-5);
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.tabela-legal th,
.tabela-legal td {
  padding: var(--e-3) var(--e-4);
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--borda);
}

.tabela-legal thead th {
  background: var(--fundo-suave);
  font-family: var(--fonte-titulo);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.tabela-legal td { color: var(--texto-suave); }

/* --- Sobre nos ---------------------------------------------------------- */

.valor {
  padding: var(--e-6);
  border-left: 3px solid var(--marca-200);
}

.valor h3 { font-size: var(--t-lg); margin-bottom: var(--e-2); }
.valor p  { color: var(--texto-suave); font-size: var(--t-sm); line-height: 1.7; }

/* Linha do tempo */
.linha-tempo {
  position: relative;
  padding-left: var(--e-10);
  border-left: 2px solid var(--borda);
}

.marco { position: relative; padding-bottom: var(--e-10); }
.marco:last-child { padding-bottom: 0; }

.marco::before {
  content: '';
  position: absolute;
  left: calc(var(--e-10) * -1 - 7px);
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: var(--raio-full);
  background: var(--marca-500);
  box-shadow: 0 0 0 4px var(--branco), 0 0 0 6px var(--marca-100);
}

.marco-ano {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--t-sm);
  font-weight: var(--peso-extra);
  letter-spacing: 0.1em;
  color: var(--marca-500);
  margin-bottom: var(--e-1);
}

.marco h3 { font-size: var(--t-lg); margin-bottom: var(--e-2); }
.marco p  { color: var(--texto-suave); }