/* =====================================================================
   Overrides do clone (vauti) — restauram comportamentos que dependiam
   do JavaScript do Next.js, agora resolvidos só com CSS nativo.
   Carregado DEPOIS dos CSS originais para ter prioridade.
   ===================================================================== */

/* =====================================================================
   TEMA VAUTI — paleta roxa (substitui o verde original da Voy)
   Redefinimos as variáveis de cor no mesmo seletor do site, então a
   troca propaga para botões, header, rodapé, seções escuras, links,
   destaques e ícones automaticamente. Cor base da marca: #4A2189.
   ===================================================================== */
:root,
[data-category-theme=weight-loss],
[data-theme=WEB_VOYAGE] {
  /* Ações principais (botões, barra de aviso) — roxo ESCURO (do verde escuro) */
  --color-action-dark: #4a2189 !important;
  --color-action-medium: #3c1a72 !important;
  --color-action-light: #2e1257 !important;
  --color-action-xDark: #2e1257 !important;
  --color-action-xLight: #efe9fb !important;

  /* Cor das FAIXAS com fundo roxo que desvanecem pro branco (calculadora,
     content_block, heros). Um pouco mais forte que o neutral-light pra dar
     presença sem pesar. Ajuste aqui pra deixar mais/menos intenso. */
  --band-purple: #e7ddf7 !important;

  /* Fundos neutros (antes creme) — roxo bem claro e suave */
  --color-surface-neutral-xLight: #f8f5fd !important;
  --color-surface-neutral-light: #f2ecfa !important;
  --color-surface-neutral: #ece5f6 !important;
  --color-surface-neutral-medium: #e4dcf3 !important;

  /* Paleta "green" reaproveitada como roxo (links, acentos, sucesso) */
  --color-green-0: #faf7ff !important;
  --color-green-50: #f4eeff !important;
  --color-green-100: #e9dfff !important;
  --color-green-200: #d8c6f7 !important;
  --color-green-300: #c0a3ef !important;
  --color-green-400: #a079e0 !important;
  --color-green-500: #7e4fd0 !important;
  --color-green-600: #6a3bb8 !important;
  --color-green-700: #54299d !important;
  --color-green-800: #4a2189 !important;
  --color-green-900: #34175f !important;
  --color-green-1000: #20103c !important;
  --color-green-1100: #160a2c !important;

  /* Acento direto */
  --color-accent: #7e4fd0 !important;
  --color-accent-medium: #c6b6ee !important;
  --color-accent-xLight: #ece4fb !important;

  /* Superfícies escuras (seções escuras, rodapé) — roxo profundo */
  --color-surface-dark-xDark: #241341 !important;

  /* Superfícies "medical" (tons suaves) — roxo claro */
  --color-surface-medical-xLight: #f6f2fd !important;
  --color-surface-medical-light: #e9deF8 !important;
  --color-surface-medical-medium: #cbb6ee !important;

  /* Texto (antes esverdeado) — quase-preto arroxeado, mantém leitura */
  --color-text-xDark: #20133a !important;
  --color-text-dark: #3a2b50 !important;
  --color-text-medium: #6b6478 !important;
  --color-text-contrast: #6b6478 !important;

  /* Bordas */
  --color-border-dark: #34175f !important;
  --color-border-focus: #b5a3d6 !important;

  /* Sombra colorida dos botões (era pêssego/verde/azul) — roxo bem claro */
  --button-shadow-color-1: #ddd0f4 !important;
  --button-shadow-color-2: #cbb6ee !important;
  --button-shadow-color-3: #e3d9f7 !important;
  --button-shadow-color-4: #efe9fb !important;
  --button-shadow-blur: 12px !important; /* um pouco mais contida */

  /* Gradientes "weight-loss" (eram pêssego/azul #f6a881→#adbec4) — roxo claro.
     O brilho do botão usa --color-gradient-medium-horizontal. */
  --color-gradient-medium-horizontal: linear-gradient(90deg, #cbb6ee, #ddd0f4) !important;
  --color-gradient-medium-vertical: linear-gradient(180deg, #cbb6ee, #ddd0f4) !important;
  --color-gradient-medium-topLeft: linear-gradient(135deg, #cbb6ee, #e0d5f5) !important;
  --color-gradient-weight-medium-vertical: linear-gradient(180deg, #cbb6ee 0%, #d6c6f1 50%, #e3d9f7 83%, #efe9fb 100%) !important;
  --color-gradient-weight-medium-topLeft: linear-gradient(135deg, #cbb6ee 0%, #d6c6f1 50%, #e3d9f7 83%, #efe9fb 100%) !important;
  --weight-loss-gradient: linear-gradient(135deg, #cbb6ee, #ddd0f4) !important;
  --gradient-circle: linear-gradient(135deg, #cbb6ee, #ddd0f4) !important;
  --color-gradient-weight-xLight-vertical: linear-gradient(180deg, #efe9fb, #f5f1fc 50%, #f8f5fd 83%, #f8f5fd) !important;
  --color-gradient-xLight-topLeft: linear-gradient(133deg, #e4d9f7, #ece4fb 50%, rgba(245,242,252,0) 83%, rgba(245,242,252,0)) !important;
  --gradient-overlay-light: linear-gradient(170deg, #e4d9f7, #ece4fb 50%, rgba(245,242,252,0) 83%, rgba(245,242,252,0)) !important;
  --gradient-overlay-medium: linear-gradient(172deg, #e4d9f7, #efe9fb 38%, transparent) !important;
}

/* =====================================================================
   FONTE — Figtree no lugar das fontes da Voy. O CSS original usa uma
   família por peso e as regras pedem 400, então cada apelido abaixo
   aponta para o mesmo arquivo com o peso travado.
   ===================================================================== */
@font-face { font-family: 'Figtree'; src: url(../fonts/Figtree-Variable.woff2) format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Figtree Light'; src: url(../fonts/Figtree-Variable.woff2) format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Figtree Medium'; src: url(../fonts/Figtree-Variable.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Figtree SemiBold'; src: url(../fonts/Figtree-Variable.woff2) format('woff2'); font-weight: 600; font-display: swap; }
:root,
[data-category-theme=weight-loss],
[data-theme=WEB_VOYAGE] {
  --font-family-primary: 'Figtree', Arial, sans-serif !important;
  --font-family-light: 'Figtree Light', Arial, sans-serif !important;
  --font-family-Medium: 'Figtree Medium', Arial, sans-serif !important;
  --font-family-bold: 'Figtree Medium', Arial, sans-serif !important;
  --font-family-largeHeading: 'Figtree SemiBold', Arial, sans-serif !important;
  --font-family-displayHeading: 'Figtree SemiBold', Arial, sans-serif !important;
  --font-family-quote: 'Figtree', Arial, sans-serif !important;
  --font-family-metric: 'Figtree', Arial, sans-serif !important;
}

/* Gradientes laranja "chumbados" inline (calculadora): blur do card e
   trilho do slider — recoloridos pro roxo claro. */
.Aodv {
  background: linear-gradient(135deg, #cbb6ee 0%, #d6c6f1 50%, #e3d9f7 83%, #efe9fb 100%) !important;
}
.eddvFi {
  background: linear-gradient(90deg, #cbb6ee 0%, #d6c6f1 50%, #e3d9f7 83%, #efe9fb 100%) !important;
}

/* Blocos de transição entre seções: as imagens do CDN são verdes e não
   combinam. Em vez de recolorir (hue-rotate dava ciano), escondemos as
   imagens e pintamos a transição com um gradiente CSS que termina na
   MESMA variável da seção escura (--color-surface-dark-xDark) — funde
   sem emenda/linha e bem suave. */
[data-qa="transition_block"] img {
  display: none !important;
}
/* Os blocos "blur" (entre seção branca e seção roxo-claro) ficaram só como
   espaço branco vazio depois de esconder as imagens. Reduzimos a altura
   reservada (era aspect-ratio 1440/180) para diminuir o vão. */
[data-qa="transition_block"] .styles_blur__SjDTv {
  aspect-ratio: auto !important;
  height: 64px !important;
}
/* ENTRANDO numa seção escura (arco no topo): claro -> escuro */
[data-qa="transition_block"] .styles_gradient__vllKx:has(img[src*="gradient-dark-top"]) {
  background: linear-gradient(to bottom,
    rgba(36, 19, 65, 0) 0%,
    rgba(36, 19, 65, 0.18) 50%,
    rgba(36, 19, 65, 0.6) 80%,
    var(--color-surface-dark-xDark) 100%) !important;
}
/* SAINDO de uma seção escura (arco embaixo): escuro -> claro (invertido) */
[data-qa="transition_block"] .styles_gradient__vllKx:has(img[src*="gradient-dark-bottom"]) {
  background: linear-gradient(to bottom,
    var(--color-surface-dark-xDark) 0%,
    rgba(36, 19, 65, 0.6) 20%,
    rgba(36, 19, 65, 0.18) 50%,
    rgba(36, 19, 65, 0) 100%) !important;
}

/* Seções com fundo roxo-claro (faixa cheia): em vez do retângulo de cor
   sólida com borda dura contra o branco, usamos um gradiente vertical que
   desvanece pro branco no topo e na base — funde suave com as seções
   brancas vizinhas. Mantém o roxo cheio no miolo. */
[data-qa="calculator"] .vcshz,
.eJQjLN, /* faixa roxo-claro do content_block (tratamentos) */
.kWRmBG /* faixa roxo-claro do FAQ (tratamentos) */ {
  background-color: transparent !important;
  background-image: linear-gradient(
    to bottom,
    #ffffff 0%,
    var(--band-purple) 160px,
    var(--band-purple) calc(100% - 160px),
    #ffffff 100%
  ) !important;
}

/* Hero de categoria (hero_category — como-funciona, etc.): mesmo tratamento
   do hero da home — preenche de ponta a ponta (sem cantos arredondados) e o
   roxo desvanece pro branco na base, suavizando a borda dura. */
[data-qa="hero_category"] .HeroCategory_wrapper__kfMNk {
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: linear-gradient(
    to bottom,
    var(--band-purple) 0%,
    var(--band-purple) calc(100% - 180px),
    #ffffff 100%
  ) !important;
}

/* Hero de categoria (tratamentos): um respiro a mais acima da imagem da
   caixa — via margem no contêiner (não recuo interno), assim a moldura
   continua simétrica e os cantos da foto seguem arredondados. */
[data-qa="hero_category"] .HeroCategory_desktopImageWrapper__rlnlu,
[data-qa="hero_category"] .HeroCategory_mobileImageWrapper__12ACe {
  margin-top: var(--spacing-6x) !important;
}

/* Diminui o vão dos blocos de transição com GRADIENTE (arcos dark<->claro)
   em TODAS as telas, padronizando a altura (original era aspect-ratio
   1440/447, ~450-500px). Vale p/ index, como-funciona, tratamentos,
   especialistas, resultados — qualquer seção escura. */
[data-qa="transition_block"] .styles_gradient__vllKx {
  aspect-ratio: 1440 / 240 !important;
}
/* Index: reduz também o padding superior da seção "Como funciona"
   (how_to_visual), que somava com o gradiente acima. */
[data-qa="how_to_visual"] .jQkHYM {
  padding-top: var(--spacing-8x) !important;
}
/* Especialistas: aproxima o "Seu tratamento, na palma da mão"
   (content_block-5) do hero acima (era spacing-30x). */
#content_block-5 .iOvBWw {
  padding-top: var(--spacing-10x) !important;
}

/* Especialistas: hero com o texto centralizado em cima e a foto da equipe
   inteira embaixo, no lugar do texto à esquerda + mosaico à direita. */
.HeroCategory_wrapper__kfMNk.vauti-hero-equipe {
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding-bottom: var(--spacing-12x);
}
.vauti-hero-equipe .HeroCategory_contentWrapper__JB2nG {
  width: 100%;
  max-width: 860px;
  padding: var(--spacing-12x) var(--spacing-7x) var(--spacing-10x);
  box-sizing: border-box;
}
.vauti-hero-equipe .HeroCategory_content__3yxTJ,
.vauti-hero-equipe .HeroCategory_titleWrapper__lu_dv {
  align-items: center;
}
.vauti-hero-equipe .HeroCategory_title__4yZoS,
.vauti-hero-equipe .HeroCategory_subtitle__c4Bon {
  text-align: center;
}
.vauti-hero-equipe__foto {
  width: 100%;
  max-width: 1080px;
  padding: 0 var(--spacing-7x);
  box-sizing: border-box;
}
.vauti-hero-equipe__foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-xLarge);
}

/* Especialistas (content_block "Chega de abordagens tamanho único"): a nova
   imagem do telefone é uma composição completa (balões nas bordas + fundo
   roxo próprio). Mostra inteira, sem cortar os balões (era cover/top). */
.crLPnY img {
  object-fit: contain !important;
  object-position: center !important;
}

/* Logo Vauti um pouco maior (header + rodapé) */
img[alt="Vauti"][style*="display:block"] {
  height: 38px !important;
}
.Footer_FooterLogoRebrand__JzqaO {
  height: 50px !important;
  width: auto !important;
}

/* Hero (hero_horizontal): troca o fundo creme + gradiente quente da Voy
   por um gradiente roxo FOSCO (tons lilás dessaturados, baixa opacidade). */
.styles_container__0qEqz {
  /* preenche de ponta a ponta: sem cantos arredondados nem margem (que
     deixavam faixas brancas em volta do hero). */
  border-radius: 0 !important;
  margin: 0 !important;
  /* roxo cheio no miolo, desvanecendo pro branco na base — mesma ideia da
     faixa da calculadora, suavizando a borda dura contra a seção branca. */
  background: linear-gradient(
    to bottom,
    var(--band-purple) 0%,
    var(--band-purple) calc(100% - 180px),
    #ffffff 100%
  ) !important;
}
.styles_gradientBg__kY9rE {
  /* preenche todo o container e desvanece (radial) — sem retângulo/bordas */
  width: 100% !important;
  height: 100% !important;
  inset: 0 !important;
  border-radius: 0 !important;
  opacity: .45 !important;
  background: radial-gradient(170% 140% at 10% -8%,
    #cdbcee 0%,
    #ddd0f3 40%,
    rgba(228, 217, 247, 0.12) 70%,
    rgba(228, 217, 247, 0) 100%) !important;
}

/* Carrosséis customizados: os itens (.CarouselItem) vinham com
   display:none / flex:0 0 0px e só o JS revelava o slide ativo.
   Aqui revelamos os itens. A LARGURA é definida por tipo abaixo. */
[data-qa="carouselWrapper"] > [class*="CarouselItem"] {
  display: flex !important;
  flex: 0 0 auto !important;   /* largura natural (ex.: logos de imprensa) */
  min-width: 0 !important;
}

/* Depoimentos: um card por vez, largura total, com encaixe (snap). */
[data-qa="carouselWrapper"] > [class*="CarouselItem"]:has([class*="TestimonialCard"]) {
  flex: 0 0 100% !important;
  min-width: 100% !important;
}

/* Resultados: depoimentos em cards simples (3 na linha; no mobile, rolagem). */
.vauti-depo {
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--spacing-30x) var(--spacing-6x) var(--spacing-10x);
  box-sizing: border-box;
}
.vauti-depo__titulo {
  margin: 0 0 var(--spacing-10x);
  color: var(--color-text-xDark);
}
.vauti-depo__trilho {
  display: flex;
  gap: var(--spacing-6x);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.vauti-depo__trilho::-webkit-scrollbar {
  display: none;
}
.vauti-depo__card {
  flex: 1 0 300px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3x);
  scroll-snap-align: start;
}
.vauti-depo__fotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-radius: var(--spacing-4x);
  overflow: hidden;
  margin-bottom: var(--spacing-2x);
}
.vauti-depo__fotos figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
}
.vauti-depo__fotos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vauti-depo__fotos figcaption {
  position: absolute;
  left: var(--spacing-2x);
  bottom: var(--spacing-2x);
  padding: 2px var(--spacing-2x);
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  color: var(--color-text-xDark);
  font-size: 12px;
  line-height: 18px;
}
.vauti-depo__resultado {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--spacing-2x);
  font-size: var(--font-size-xxSmall);
  line-height: 24px;
  color: var(--color-text-xDark);
}
.vauti-depo__resultado strong {
  font-family: var(--font-family-bold);
  font-weight: var(--font-weight-regular);
}
.vauti-depo__resultado span {
  color: var(--color-action-dark);
}
.vauti-depo__texto {
  margin: 0;
  font-size: var(--font-size-xxxSmall);
  line-height: 22px;
  color: var(--color-text-medium);
}
@media (min-width: 1409px) {
  .vauti-depo {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 768px) {
  .vauti-depo {
    padding: var(--spacing-14x) 0 var(--spacing-6x);
  }
  .vauti-depo__titulo {
    margin-bottom: var(--spacing-6x);
    padding: 0 var(--spacing-6x);
  }
  .vauti-depo__trilho {
    gap: var(--spacing-4x);
    padding: 0 var(--spacing-6x);
    scroll-padding: 0 var(--spacing-6x);
  }
  .vauti-depo__card {
    flex: 0 0 82%;
  }
}

/* "Entenda nossos números" (CarouselStats2, só em resultados): sem o JS o
   cabeçalho vinha com max-width:0; no desktop, 3 cards dividindo a linha. */
#CarouselHeaderContainer {
  max-width: 100% !important;
}
[class*="CarouselStats2_wrapper"] [data-qa="carouselWrapper"] > [class*="CarouselItem"] {
  height: auto !important;
}
[class*="CarouselStats2_wrapper"] [class*="CarouselStats2_card"] {
  height: auto !important;
}
@media (min-width: 769px) {
  [class*="CarouselStats2_wrapper"] {
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  [class*="CarouselStats2_wrapper"] [data-qa="carouselWrapper"] {
    overflow: visible !important;
  }
  [class*="CarouselStats2_wrapper"] [data-qa="carouselWrapper"] > [class*="CarouselItem"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  [class*="CarouselStats2_wrapper"] [class*="CarouselItem"] > [class*="CarouselStats2_card"] {
    width: 100% !important;
  }
}

/* Stats no MOBILE: o wrapper vinha com overflow-x:hidden (o site movia
   via JS). Reabilitamos a rolagem horizontal nativa para os cards de
   298px arrastarem com o dedo / mouse (handler do app.js). */
@media (max-width: 768px) {
  [class*="CarouselStats2_wrapper"] [data-qa="carouselWrapper"] {
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
  }
  [class*="CarouselStats2_wrapper"] [data-qa="carouselWrapper"] > [class*="CarouselItem"] {
    scroll-snap-align: start;
  }
}

/* Faixa "Voy na mídia" (featured_logos): sem o JS os logos ficavam
   colados/cortados à esquerda. Centralizamos o conjunto num container
   de 1360px e distribuímos os logos igualmente na linha. */
@media (min-width: 769px) {
  [data-qa="featured_logos"] [data-qa="carouselWrapper"] {
    overflow: visible !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 1360px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Menu mobile (drawer lateral): o painel (.Wrapper-sc-cc9f818e-0) vinha com
   display:none inline + left:-560px (fora da tela) e o overlay com
   display:none. O JS abria. Restauramos via a classe .menu-open (adicionada
   pelo app.js ao clicar no hambúrguer). */
html.menu-open [class*="Wrapper-sc-cc9f818e-0"] {
  display: block !important;
  left: 0 !important;
}
html.menu-open { overflow: hidden; } /* trava o scroll do fundo */

/* FAQ / accordion: a descrição usa display:grid com grid-template-rows:0fr
   (colapsada) e o JS abria mudando para 1fr. Restauramos esse toggle via
   a classe .is-open (adicionada pelo app.js ao clicar). */
[class*="AccordionDescription"] > div {
  overflow: hidden;
  min-height: 0;
}
[class*="AccordionItem"].is-open [class*="AccordionDescription"] {
  grid-template-rows: 1fr !important;
  margin-top: var(--spacing-3x) !important;
}
/* gira o ícone "+" para "×" quando aberto */
[class*="AccordionItem"] [class*="RightSectionWrapper"] svg {
  transition: transform 222ms ease;
}
[class*="AccordionItem"].is-open [class*="RightSectionWrapper"] svg {
  transform: rotate(45deg);
}

/* Rolagem horizontal suave com encaixe por slide (depoimentos, logos). */
[data-qa="carouselWrapper"] {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
[data-qa="carouselWrapper"]:active { cursor: grabbing; }

/* =====================================================================
   Cards de tratamento: o conteúdo (foto, título, texto e o rabisco roxo)
   virou uma imagem única por card, para não expor as marcas em texto. O
   fundo e o raio já estão desenhados dentro do WebP, então o contêiner
   original não pinta mais nada. No mobile os cards empilham em largura
   cheia — sem o teto a imagem esticaria muito além do tamanho gerado.
   ===================================================================== */
.vauti-card-img {
  background: none !important;
  min-height: 0 !important;
}
.vauti-card-img picture,
.vauti-card-img img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  .vauti-card-img {
    max-width: 443px;
    margin-inline: auto;
  }
}

/* =====================================================================
   Rede de segurança contra scroll horizontal (geral, todas as telas).
   As páginas não rolam lateralmente hoje, mas isto trava qualquer estouro
   futuro (decorações, carrosséis, larguras 100vw) sem virar um scroll
   container — overflow-x:clip preserva position:sticky. O 'hidden' é
   fallback para Safari < 16.4 (que ainda não entende 'clip').
   ===================================================================== */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

/* =====================================================================
   Timeline "Como será a sua jornada com a Vauti" (como-funciona).
   ===================================================================== */
.vauti-jornada-titulo {
  text-align: center;
}
.vauti-jornada {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10x);
}
.vauti-jornada-fase-nome {
  display: inline-block;
  margin: 0 0 var(--spacing-6x);
  padding: var(--spacing-2x) var(--spacing-4x);
  border-radius: 999px;
  background: var(--color-action-dark);
  color: #fff;
  font-family: var(--font-family-Medium);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}
.vauti-jornada-etapas {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vauti-jornada-etapa {
  position: relative;
  padding: 0 0 var(--spacing-8x) 36px;
}
.vauti-jornada-etapa::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 0;
  width: 2px;
  background: var(--color-green-200);
}
.vauti-jornada-etapa::after {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--color-green-500);
}
.vauti-jornada-fase:last-child .vauti-jornada-etapa:last-child {
  padding-bottom: 0;
}
.vauti-jornada-fase:last-child .vauti-jornada-etapa:last-child::before {
  display: none;
}
.vauti-jornada-periodo {
  display: block;
  margin-bottom: var(--spacing-3x);
  color: var(--color-green-600);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.vauti-jornada-item {
  padding: var(--spacing-5x) var(--spacing-6x);
  border-radius: 16px;
  background: var(--color-surface-neutral-xLight);
}
.vauti-jornada-item + .vauti-jornada-item {
  margin-top: var(--spacing-3x);
}
.vauti-jornada-item h5 {
  margin: 0 0 var(--spacing-2x);
}
.vauti-jornada-item p,
.vauti-jornada-lista {
  margin: 0;
  color: var(--color-text-medium);
}
.vauti-jornada-lista {
  padding-left: 18px;
  list-style: disc;
}
.vauti-jornada-lista li + li {
  margin-top: var(--spacing-2x);
}
@media (max-width: 768px) {
  .vauti-jornada-etapa {
    padding-left: 28px;
  }
  .vauti-jornada-item {
    padding: var(--spacing-4x);
  }
}