.elementor-9 .elementor-element.elementor-element-72b097d{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--overlay-opacity:0.63;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9 .elementor-element.elementor-element-72b097d::before, .elementor-9 .elementor-element.elementor-element-72b097d > .elementor-background-video-container::before, .elementor-9 .elementor-element.elementor-element-72b097d > .e-con-inner > .elementor-background-video-container::before, .elementor-9 .elementor-element.elementor-element-72b097d > .elementor-background-slideshow::before, .elementor-9 .elementor-element.elementor-element-72b097d > .e-con-inner > .elementor-background-slideshow::before, .elementor-9 .elementor-element.elementor-element-72b097d > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#161616;--background-overlay:'';}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-9 .elementor-element.elementor-element-be9b339{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-family:"Poppins", Sans-serif;font-size:17px;font-weight:400;color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-7ccd618{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-9 .elementor-element.elementor-element-9d5ede8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-9 .elementor-element.elementor-element-9bd2de5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-9 .elementor-element.elementor-element-2d8e878{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-9 .elementor-element.elementor-element-fcd803d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-9 .elementor-element.elementor-element-1745622{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-9 .elementor-element.elementor-element-ba35115{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9 .elementor-element.elementor-element-8023faa{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-9 .elementor-element.elementor-element-300f0d0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}body.elementor-page-9:not(.elementor-motion-effects-element-type-background), body.elementor-page-9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0D0B09;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-72b097d *//* ============================================
   DEMUNER — Hero v3
   Fix: botões compactos + centralização correta
   ============================================ */

/* ── CENTRALIZAÇÃO SEM QUEBRAR LINHAS ────────
   Não muda flex-direction nas rows —
   isso quebrava os botões side-by-side.
   Usa text-align + margin:auto nos widgets.
   ─────────────────────────────────────────── */
.dem-hero .elementor-column-wrap,
.dem-hero .elementor-widget-wrap {
  align-items: center !important;
}

.dem-hero .elementor-widget-container {
  text-align: center !important;
  width: 100% !important;
}

/* Centraliza o container principal */
.dem-hero .elementor-container {
  justify-content: center !important;
}

.dem-hero .elementor-column {
  display: flex !important;
  justify-content: center !important;
}

/* Para Flexbox Containers */
.dem-hero .e-con,
.dem-hero .e-con-inner {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* ── LOGO ─────────────────────────────────── */
.dem-hero .elementor-widget-image {
  text-align: center !important;
}
.dem-hero .elementor-widget-image img {
  mix-blend-mode: screen;
  max-width: clamp(300px, 28vw, 360px) !important;
  width: auto !important;
  margin: 0 auto !important;
  display: block !important;
}

/* ── TEXTO (sem alterar conteúdo) ────────────*/
.dem-hero .elementor-widget-heading .elementor-heading-title {
  text-align: center !important;
  margin: 0 auto !important;
}

.dem-hero .elementor-widget-text-editor,
.dem-hero .elementor-widget-text-editor p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── BOTÕES: compactos, auto-width ───────────*/
.dem-hero .elementor-widget-button {
  width: auto !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
}

.dem-hero .elementor-button-wrapper {
  width: auto !important;
  display: inline-flex !important;
  justify-content: center !important;
}

.dem-hero .elementor-button {
  width: auto !important;
  min-width: 160px !important;
  white-space: nowrap !important;
}

/* Row dos botões — mantém horizontal e centrado */
.dem-hero .elementor-row {
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* ── CORES DOS BOTÕES ────────────────────────
   Mais específico para vencer o Elementor
   ─────────────────────────────────────────── */

/* Todos os botões — base ghost */
.dem-hero .elementor-button.elementor-size-md,
.dem-hero .elementor-button.elementor-size-sm,
.dem-hero .elementor-button.elementor-size-lg,
.dem-hero a.elementor-button {
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(234, 228, 216, 0.25) !important;
  color: #EAE4D8 !important;
  border-radius: 2px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  transition: all 0.3s ease !important;
}

/* Primeiro botão — vinho sólido (CTA principal) */
.dem-hero .elementor-column:first-child .elementor-button.elementor-size-md,
.dem-hero .elementor-column:first-child a.elementor-button,
.dem-hero .elementor-widget-button:first-child .elementor-button {
  background-color: #810102 !important;
  border-color: #810102 !important;
  color: #EAE4D8 !important;
}

.dem-hero .elementor-column:first-child .elementor-button:hover,
.dem-hero .elementor-widget-button:first-child .elementor-button:hover {
  background-color: #9a0103 !important;
}

/* Hover ghost */
.dem-hero a.elementor-button:hover {
  background-color: rgba(734, 228, 216, 0.06) !important;
  border-color: rgba(234, 228, 216, 0.4) !important;
}

/* ── FADE INFERIOR ───────────────────────────*/
.dem-hero {
  position: relative;
}
.dem-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to bottom, transparent, #0D0B09);
  pointer-events: none;
  z-index: 2;
}

/* Conteúdo acima do fade */
.dem-hero .elementor-container,
.dem-hero .e-con,
.dem-hero .elementor-widget-wrap {
  position: relative;
  z-index: 3;
}

/* ── RESPONSIVO ──────────────────────────────*/
@media (max-width: 768px) {
  .dem-hero .elementor-widget-image img {
    max-width: clamp(160px, 55vw, 220px) !important;
  }
  .dem-hero .elementor-button {
    min-width: 130px !important;
    padding: 12px 20px !important;
  }
}

/* Aproxima os botões do texto no hero */
.dem-hero .elementor-widget-button,
.dem-hero .elementor-widget-button:first-child {
  margin-top: 0 !important;
}

.dem-hero .elementor-widget-text-editor {
  margin-bottom: 0 !important;
}

.dem-hero .elementor-widget-image img {
  mix-blend-mode: normal !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b5de9db *//* ============================================
   DEMUNER — Seção Serviços
   Headline misto + marquee duplo de chips
   ============================================ */

/* ── SEÇÃO ───────────────────────────────────*/
.dem-srv {
  padding: clamp(80px, 10vw, 130px) 0;
  font-family: var(--dem-sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Cabeçalho centralizado com padding lateral */
.dem-srv-head {
  text-align: center;
  padding: 0 clamp(24px, 6vw, 96px);
  margin-bottom: clamp(48px, 6vw, 72px);
}

/* Eyebrow pílula — igual ao usado em Quem Somos */
.dem-srv-head .dem-pill {
  margin-bottom: 28px;
}

/* Headline: sans bold + serif italic na mesma linha */
.dem-srv-headline {
  font-family: var(--dem-sans);
  font-size: clamp(40px, 6vw, 78px);
  font-weight: 600;
  line-height: 1.0;
  color: var(--dem-text);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.dem-srv-headline em {
  font-family: var(--dem-serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--dem-text);
}

/* Subtítulo */
.dem-srv-sub {
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 300;
  color: var(--dem-muted);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.75;
}

/* ── MARQUEE WRAPPER ─────────────────────────*/
.dem-srv-tracks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dem-srv-track {
  display: flex;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent,
    black 12%,
    black 88%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 12%,
    black 88%,
    transparent
  );
}

/* Faixa que duplica os chips para loop infinito */
.dem-srv-belt {
  display: flex;
  gap: 14px;
  animation: dem-scroll-left 28s linear infinite;
  will-change: transform;
  flex-shrink: 0;
}

/* Segunda faixa vai para a direita */
.dem-srv-track:nth-child(2) .dem-srv-belt {
  animation: dem-scroll-right 32s linear infinite;
}

/* Pausa no hover */
.dem-srv-track:hover .dem-srv-belt {
  animation-play-state: paused;
}

@keyframes dem-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes dem-scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ── CHIP / PÍLULA DE SERVIÇO ────────────────*/
.dem-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid rgba(234, 228, 216, 0.12);
  border-radius: 100px;
  background: rgba(234, 228, 216, 0.03);
  white-space: nowrap;
  cursor: default;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.dem-chip:hover {
  border-color: rgba(242, 204, 15, 0.35);
  background: rgba(242, 204, 15, 0.05);
}

/* Ícone dentro do chip */
.dem-chip-icon {
  display: flex;
  align-items: center;
  color: var(--dem-gold);
  opacity: 0.7;
  flex-shrink: 0;
  transition: opacity 0.3s ease;
}
.dem-chip:hover .dem-chip-icon {
  opacity: 1;
}

.dem-chip-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Texto do chip */
.dem-chip-label {
  font-family: var(--dem-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--dem-text);
  opacity: 0.8;
  letter-spacing: 0.01em;
  transition: opacity 0.3s ease;
}
.dem-chip:hover .dem-chip-label {
  opacity: 1;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-552660c *//* ============================================
   DEMUNER — Porquê a Demuner
   v3: linha neutra + efeito spotlight no hover
   ============================================ */

.dem-why {
  padding: clamp(80px, 10vw, 130px) clamp(24px, 6vw, 96px);
  font-family: var(--dem-sans);
  -webkit-font-smoothing: antialiased;
}

/* ── CABEÇALHO ───────────────────────────────*/
.dem-why-head {
  margin-bottom: clamp(64px, 8vw, 100px);
}

.dem-why-head .dem-pill {
  margin-bottom: 28px;
}

.dem-why-headline {
  font-family: var(--dem-sans);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--dem-text);
  margin-bottom: 20px;
  max-width: 680px;
}

.dem-why-headline em {
  font-family: var(--dem-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.08em;
  color: var(--dem-text);
  letter-spacing: 0;
}

.dem-why-sub {
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 300;
  line-height: 1.9;
  color: var(--dem-muted);
  max-width: 420px;
}

/* ── GRID ────────────────────────────────────*/
.dem-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 4vw, 56px);
}

/* ── COLUNA ──────────────────────────────────*/
.dem-why-col {
  transition: filter 0.4s ease, opacity 0.4s ease;
}

/* ── EFEITO SPOTLIGHT ────────────────────────
   Quando qualquer coluna está em hover,
   todas as OUTRAS ficam desfocadas e escurecidas.
   A coluna ativa fica nítida e em destaque.
   Funciona em CSS puro via :has()
   ─────────────────────────────────────────── */
.dem-why-grid:has(.dem-why-col:hover) .dem-why-col {
  filter: blur(3px);
  opacity: 0.3;
}

.dem-why-grid:has(.dem-why-col:hover) .dem-why-col:hover {
  filter: blur(0px);
  opacity: 1;
}

/* Título */
.dem-why-col-title {
  font-family: var(--dem-sans);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--dem-text);
  margin-bottom: 16px;
}

/* Linha — branco puro neutro, sem tinte quente */
.dem-why-col-line {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin-bottom: 20px;
}

/* Corpo */
.dem-why-col-body {
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 300;
  line-height: 1.85;
  color: var(--dem-muted);
}

.dem-why-col-body strong {
  font-weight: 500;
  color: var(--dem-text);
}

/* ── RESPONSIVO ──────────────────────────────*/
@media (max-width: 900px) {
  .dem-why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(32px, 5vw, 48px);
  }
  /* Desativa o efeito blur no mobile — toque não tem hover */
  .dem-why-grid:has(.dem-why-col:hover) .dem-why-col {
    filter: none;
    opacity: 1;
  }
}

@media (max-width: 520px) {
  .dem-why-grid {
    grid-template-columns: 1fr;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0c396a0 *//* ============================================
   DEMUNER — Galeria Animada
   4 colunas verticais, direções alternadas
   ============================================ */

.dem-gallery {
  padding: clamp(80px, 10vw, 130px) 0;
  font-family: var(--dem-sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ── CABEÇALHO CENTRADO ──────────────────────*/
.dem-gallery-head {
  text-align: center;
  padding: 0 clamp(24px, 6vw, 96px);
  margin-bottom: clamp(48px, 6vw, 72px);
}

.dem-gallery-head .dem-pill {
  margin-bottom: 28px;
}

.dem-gallery-headline {
  font-family: var(--dem-sans);
  font-size: clamp(40px, 6vw, 78px);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--dem-text);
}

.dem-gallery-headline em {
  font-family: var(--dem-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.0em;
  color: var(--dem-text);
  letter-spacing: 0;
}

/* ── STAGE: área das colunas ─────────────────*/
.dem-gallery-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  height: 560px;
  overflow: hidden;

  /* Fade nas bordas superior e inferior */
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 18%,
    black 82%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 18%,
    black 82%,
    transparent 100%
  );
}

/* ── COLUNA ──────────────────────────────────*/
.dem-gallery-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  will-change: transform;
}

/* Colunas 1 e 3: sobem */
.dem-gallery-col:nth-child(1) {
  animation: dem-col-up 18s linear infinite;
}
.dem-gallery-col:nth-child(3) {
  animation: dem-col-up 24s linear infinite;
}

/* Colunas 2 e 4: descem */
.dem-gallery-col:nth-child(2) {
  animation: dem-col-down 22s linear infinite;
}
.dem-gallery-col:nth-child(4) {
  animation: dem-col-down 20s linear infinite;
}

/* Pausa no hover de toda a galeria */
.dem-gallery-stage:hover .dem-gallery-col {
  animation-play-state: paused;
}

@keyframes dem-col-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

@keyframes dem-col-down {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}

/* ── IMAGEM ──────────────────────────────────*/
.dem-gallery-img {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04); /* placeholder enquanto carrega */
  transition: transform 0.5s ease;
}

/* Variação de alturas para ritmo orgânico */
.dem-gallery-img:nth-child(odd)  { aspect-ratio: 4/3; }
.dem-gallery-img:nth-child(even) { aspect-ratio: 3/4; }

/* Coluna 2: alturas invertidas para diferenciação */
.dem-gallery-col:nth-child(2) .dem-gallery-img:nth-child(odd)  { aspect-ratio: 3/4; }
.dem-gallery-col:nth-child(2) .dem-gallery-img:nth-child(even) { aspect-ratio: 4/3; }

.dem-gallery-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease, filter 0.4s ease;
  filter: grayscale(10%);
}

.dem-gallery-img:hover img {
  transform: scale(1.04);
  filter: grayscale(0%);
}

/* Overlay subtil para consistência de cor */
.dem-gallery-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(13,11,9,0.15) 0%,
    transparent 60%
  );
  pointer-events: none;
  border-radius: inherit;
}

/* ── RESPONSIVO ──────────────────────────────*/
@media (max-width: 860px) {
  .dem-gallery-stage {
    grid-template-columns: repeat(2, 1fr);
    height: 480px;
  }
  .dem-gallery-col:nth-child(3),
  .dem-gallery-col:nth-child(4) {
    display: none;
  }
}

@media (max-width: 480px) {
  .dem-gallery-stage { height: 400px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-640395c *//* ============================================
   DEMUNER — Como Trabalhamos
   Animação sequencial: linha → dots → passos
   ============================================ */

.dem-how {
  padding: clamp(80px, 10vw, 130px) clamp(24px, 6vw, 96px);
  font-family: var(--dem-sans);
  -webkit-font-smoothing: antialiased;
  text-align: center;
}

/* ── CABEÇALHO ───────────────────────────────*/
.dem-how-head {
  margin-bottom: clamp(64px, 8vw, 96px);
}
.dem-how-head .dem-pill { margin-bottom: 28px; }

.dem-how-headline {
  font-family: var(--dem-sans);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--dem-text);
  max-width: 600px;
  margin: 0 auto;
}
.dem-how-headline em {
  font-family: var(--dem-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.08em;
  color: var(--dem-text);
  letter-spacing: 0;
}

/* ── TIMELINE ────────────────────────────────*/
.dem-how-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 4vw, 48px);
}

/* Linha conectora — começa em scaleX(0), cresce para a direita */
.dem-how-track::before {
  content: '';
  position: absolute;
  top: 11px;
  left: calc(12.5% + 4px);
  right: calc(12.5% + 4px);
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.06) 0%,
    rgba(242,204,15,0.4)  50%,
    rgba(255,255,255,0.06) 100%
  );
  background-size: 300% 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

/* Shimmer só começa depois da linha aparecer */
.dem-how-track.dem-how--visible::before {
  transform: scaleX(1);
  animation: dem-line-sweep 4s ease-in-out infinite 1s;
}

/* ── PASSO — estado inicial: invisible ───────*/
.dem-how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;

  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

/* ── DOT ─────────────────────────────────────*/
.dem-how-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(242, 204, 15, 0.5);
  background: var(--dem-bg);
  margin-bottom: 28px;
  flex-shrink: 0;
  transform: scale(0);
  transition:
    transform   0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.3s ease,
    box-shadow   0.3s ease,
    background   0.3s ease;
}

.dem-how-step:hover .dem-how-dot {
  border-color: var(--dem-gold);
  box-shadow: 0 0 10px rgba(242, 204, 15, 0.3);
  background: rgba(242, 204, 15, 0.08);
}

/* ── ESTADO VISÍVEL ──────────────────────────
   Classe adicionada pelo JS ao entrar no viewport.
   Cada passo tem um delay diferente → cascata.
   ─────────────────────────────────────────── */
.dem-how--visible .dem-how-step:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.35s;
}
.dem-how--visible .dem-how-step:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.65s;
}
.dem-how--visible .dem-how-step:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.95s;
}
.dem-how--visible .dem-how-step:nth-child(4) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.25s;
}

/* Dots aparecem ligeiramente antes do texto */
.dem-how--visible .dem-how-step:nth-child(1) .dem-how-dot { transform: scale(1); transition-delay: 0.2s;  }
.dem-how--visible .dem-how-step:nth-child(2) .dem-how-dot { transform: scale(1); transition-delay: 0.5s;  }
.dem-how--visible .dem-how-step:nth-child(3) .dem-how-dot { transform: scale(1); transition-delay: 0.8s;  }
.dem-how--visible .dem-how-step:nth-child(4) .dem-how-dot { transform: scale(1); transition-delay: 1.1s;  }

/* ── TEXTO ───────────────────────────────────*/
.dem-how-num {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dem-wine);
  opacity: 0.7;
  margin-bottom: 14px;
}
.dem-how-title {
  font-family: var(--dem-sans);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--dem-text);
  margin-bottom: 14px;
}
.dem-how-body {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--dem-muted);
  max-width: 220px;
}

/* ── SPOTLIGHT HOVER ─────────────────────────*/
.dem-how-track:has(.dem-how-step:hover) .dem-how-step {
  filter: blur(2px);
  opacity: 0.3;
  transition: filter 0.4s ease, opacity 0.4s ease;
}
.dem-how-track:has(.dem-how-step:hover) .dem-how-step:hover {
  filter: blur(0);
  opacity: 1;
}

/* ── RESPONSIVO ──────────────────────────────*/
@media (max-width: 860px) {
  .dem-how-track {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(40px, 6vw, 56px);
  }
  .dem-how-track::before { display: none; }
  .dem-how-track:has(.dem-how-step:hover) .dem-how-step {
    filter: none;
    opacity: 1;
  }
}
@media (max-width: 480px) {
  .dem-how-track { grid-template-columns: 1fr; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c05a5fc *//* ============================================
   DEMUNER — FAQ v2
   Centrado, painéis escuros, estilo Auto Escape
   ============================================ */

.dem-faq {
  padding: clamp(80px, 10vw, 130px) clamp(24px, 6vw, 96px);
  font-family: var(--dem-sans);
  -webkit-font-smoothing: antialiased;
  text-align: center;
}

/* ── CABEÇALHO CENTRADO ──────────────────────*/
.dem-faq-head {
  margin-bottom: clamp(48px, 6vw, 72px);
}

.dem-faq-headline {
  font-family: var(--dem-sans);
  font-size: clamp(40px, 6vw, 78px);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--dem-text);
}

.dem-faq-headline em {
  font-family: var(--dem-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.0em;
  color: var(--dem-text);
  letter-spacing: 0;
}

/* ── LISTA DE ITENS ──────────────────────────*/
.dem-faq-list {
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── ITEM: painel escuro individual ──────────*/
.dem-faq-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.dem-faq-item[open] {
  border-color: rgba(242, 204, 15, 0.15);
  background: rgba(255, 255, 255, 0.055);
}

/* ── PERGUNTA ────────────────────────────────*/
.dem-faq-question {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 28px;
  cursor: pointer;
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 400;
  color: rgba(234, 228, 216, 0.8);
  line-height: 1.4;
  transition: color 0.3s ease;
  user-select: none;
}

.dem-faq-question::-webkit-details-marker,
.dem-faq-question::marker { display: none; }

.dem-faq-item[open] .dem-faq-question {
  color: var(--dem-text);
}

/* ── ÍCONE + ─────────────────────────────────*/
.dem-faq-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  position: relative;
  opacity: 0.5;
  transition: opacity 0.3s ease, transform 0.35s ease;
}

.dem-faq-item[open] .dem-faq-icon {
  opacity: 1;
  transform: rotate(45deg);
}

.dem-faq-icon::before,
.dem-faq-icon::after {
  content: '';
  position: absolute;
  background: var(--dem-gold);
  border-radius: 1px;
  transition: background 0.3s ease;
}

.dem-faq-icon::before {
  width: 14px; height: 1px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.dem-faq-icon::after {
  width: 1px; height: 14px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* ── RESPOSTA com animação suave ─────────────*/
.dem-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dem-faq-item[open] .dem-faq-answer {
  grid-template-rows: 1fr;
}

.dem-faq-answer-inner {
  overflow: hidden;
}

.dem-faq-answer p {
  padding: 0 28px 24px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--dem-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 20px;
  margin: 0;
}

/* ── RESPONSIVO ──────────────────────────────*/
@media (max-width: 600px) {
  .dem-faq-question { padding: 18px 20px; }
  .dem-faq-answer p { padding: 16px 20px 20px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8023faa *//* ============================================
   DEMUNER — Animações de Scroll (Blur In/Out)
   Bidireccional: entra com blur, sai com blur
   ============================================ */

/* ── ESTADO INICIAL: elemento "adormecido" ───
   Todos os elementos animáveis começam aqui.
   O JS adiciona .dem-visible quando entram
   no viewport e remove quando saem.
   ─────────────────────────────────────────── */
.dem-anim {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(18px);
  transition:
    opacity  0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter   0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, filter, transform;
}

/* ── ESTADO VISÍVEL: elemento "acordado" ─────*/
.dem-anim.dem-visible {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

/* ── DELAYS PARA EFEITO EM CASCATA ───────────*/
.dem-anim[data-delay="1"] { transition-delay: 0.1s; }
.dem-anim[data-delay="2"] { transition-delay: 0.2s; }
.dem-anim[data-delay="3"] { transition-delay: 0.3s; }
.dem-anim[data-delay="4"] { transition-delay: 0.4s; }
.dem-anim[data-delay="5"] { transition-delay: 0.5s; }
.dem-anim[data-delay="6"] { transition-delay: 0.6s; }

/* ── VARIANTES ───────────────────────────────*/

/* Só fade + blur, sem translateY (para imagens) */
.dem-anim-fade {
  opacity: 0;
  filter: blur(6px);
  transition:
    opacity 0.9s ease,
    filter  0.9s ease;
  will-change: opacity, filter;
}
.dem-anim-fade.dem-visible {
  opacity: 1;
  filter: blur(0px);
}

/* Entrada lateral — esquerda */
.dem-anim-left {
  opacity: 0;
  filter: blur(8px);
  transform: translateX(-24px);
  transition:
    opacity   0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter    0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, filter, transform;
}
.dem-anim-left.dem-visible {
  opacity: 1;
  filter: blur(0px);
  transform: translateX(0);
}

/* Entrada lateral — direita */
.dem-anim-right {
  opacity: 0;
  filter: blur(8px);
  transform: translateX(24px);
  transition:
    opacity   0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter    0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, filter, transform;
}
.dem-anim-right.dem-visible {
  opacity: 1;
  filter: blur(0px);
  transform: translateX(0);
}

/* ── DESATIVA em mobile (performance) ────────*/
@media (prefers-reduced-motion: reduce) {
  .dem-anim,
  .dem-anim-fade,
  .dem-anim-left,
  .dem-anim-right {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-300f0d0 *//* ============================================
   DEMUNER — CTA Final
   Imagem de fundo + overlay + tipografia grande
   ============================================ */

.dem-cta {
  position: relative;
  padding: clamp(100px, 14vw, 180px) clamp(24px, 6vw, 96px);
  font-family: var(--dem-sans);
  -webkit-font-smoothing: antialiased;
  text-align: center;
  overflow: hidden;
}

/* ── IMAGEM DE FUNDO ─────────────────────────*/
.dem-cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/* Overlay duplo: escurece + tinta quente da marca */
.dem-cta-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(129, 1, 2, 0.18) 0%, transparent 60%),
    rgba(8, 6, 4, 0.82);
}

/* Fade superior — liga ao resto da página */
.dem-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(to bottom, #0D0B09, transparent);
  z-index: 2;
  pointer-events: none;
}

/* ── CONTEÚDO ────────────────────────────────*/
.dem-cta-inner {
  position: relative;
  z-index: 3;
  max-width: 760px;
  margin: 0 auto;
}

.dem-cta-inner .dem-pill {
  margin-bottom: 32px;
}

/* Headline grande */
.dem-cta-headline {
  font-family: var(--dem-sans);
  font-size: clamp(40px, 6.5vw, 86px);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--dem-text);
  margin-bottom: 24px;
}

.dem-cta-headline em {
  font-family: var(--dem-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.0em;
  color: var(--dem-text);
  letter-spacing: 0;
}

/* Subtítulo */
.dem-cta-sub {
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--dem-muted);
  max-width: 460px;
  margin: 0 auto 48px;
}

/* ── BOTÕES ──────────────────────────────────*/
.dem-cta-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Botão primário — vinho sólido */
.dem-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  background: var(--dem-wine);
  border: 1px solid var(--dem-wine);
  border-radius: 2px;
  font-family: var(--dem-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dem-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.dem-btn-primary:hover {
  background: #9a0103;
  transform: translateY(-1px);
}

.dem-btn-primary svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease;
}
.dem-btn-primary:hover svg {
  transform: translateX(3px);
}

/* Botão secundário — ghost */
.dem-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  background: transparent;
  border: 1px solid rgba(234, 228, 216, 0.22);
  border-radius: 2px;
  font-family: var(--dem-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dem-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.dem-btn-ghost:hover {
  background: rgba(234, 228, 216, 0.06);
  border-color: rgba(234, 228, 216, 0.4);
  transform: translateY(-1px);
}

.dem-btn-ghost svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── RESPONSIVO ──────────────────────────────*/
@media (max-width: 520px) {
  .dem-cta-btns {
    flex-direction: column;
    align-items: stretch;
  }
  .dem-btn-primary,
  .dem-btn-ghost {
    justify-content: center;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ba35115 *//* Cola no Additional CSS */

/* Remove padding duplo da Section do CTA */
.elementor-top-section:has(.dem-cta),
.e-con:has(.dem-cta) {
  padding: 0 !important;
  margin: 0 !important;
}

/* Se ainda tiver espaço, reduz o padding bottom do CTA */
.dem-cta {
  padding-bottom: clamp(80px, 8vw, 120px) !important;
}/* End custom CSS */