/* =====================================================================
   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;
}

/* 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 "Chega de abordagens tamanho único"
   (content_block-5) do carrossel acima — reduz o padding superior
   (era spacing-30x). */
#content_block-5 .iOvBWw {
  padding-top: var(--spacing-10x) !important;
}

/* Especialistas: a imagem única do hero (grid "chapado") foi trocada por um
   grid CSS com as 7 fotos de médicos — mosaico 2–3–2 centrado (losango),
   todos os tiles do mesmo tamanho, sem nenhuma foto esticada. */
.HeroCategory_desktopImageWrapper__rlnlu .vauti-experts-grid,
.HeroCategory_mobileImageWrapper__12ACe .vauti-experts-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--spacing-2x);
  padding: var(--spacing-2x);
  box-sizing: border-box;
}
.vauti-experts-grid img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center 25%; /* mantém os rostos enquadrados */
  border-radius: var(--spacing-4x);
}
/* linha 1: 2 tiles centrados */
.vauti-experts-grid img:nth-child(1) { grid-area: 1 / 2 / 2 / 4; }
.vauti-experts-grid img:nth-child(2) { grid-area: 1 / 4 / 2 / 6; }
/* linha 2: 3 tiles */
.vauti-experts-grid img:nth-child(3) { grid-area: 2 / 1 / 3 / 3; }
.vauti-experts-grid img:nth-child(4) { grid-area: 2 / 3 / 3 / 5; }
.vauti-experts-grid img:nth-child(5) { grid-area: 2 / 5 / 3 / 7; }
/* linha 3: 2 tiles centrados */
.vauti-experts-grid img:nth-child(6) { grid-area: 3 / 2 / 4 / 4; }
.vauti-experts-grid img:nth-child(7) { grid-area: 3 / 4 / 4 / 6; }

/* 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;
}

/* Seção "Os nossos resultados falam por si só" (CarouselStats2).
   Sem o JS: (1) o cabeçalho colapsava porque vinha com max-width:0 (o JS
   media e ajusta em runtime); (2) no desktop os cards não recebiam
   largura, então o texto numa linha esticava cada card. Corrigimos para
   o layout de 3 cards preenchendo a linha igualmente. O mobile (≤768px)
   mantém o comportamento original (cards de 298px com rolagem). */
/* Todos os cabeçalhos de carrossel (#CarouselHeaderContainer) vinham com
   max-width:0 — o JS media e ajusta em runtime. Sem o JS o título colapsa
   numa coluna estreita. Restauramos a largura total globalmente (vale para
   CarouselStats2, content_carousel e quaisquer outros). */
#CarouselHeaderContainer {
  max-width: 100% !important;
}
@media (min-width: 769px) {
  /* Mantém a composição num container centralizado (mesma largura máxima
     do resto da página) em vez de ocupar a tela inteira de ponta a ponta. */
  [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;
  }
}

/* Carrossel de conteúdo "Além do peso, uma mudança de vida"
   (content_carousel): vinha de ponta a ponta com os cards desalinhados
   do título. Centralizamos a composição no container de 1360px, então
   os cards alinham com o título (e o carrossel rola dentro). */
@media (min-width: 769px) {
  [data-qa="content_carousel"] [class*="Container-sc-62d31e35"] {
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !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 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%;
}