/**
 * Identidade institucional Favo (têxtil/bebê) — NÃO carregar em funis Favo/Chronos.
 * Light-first; dark elevado via prefers-color-scheme.
 */

:root {
  color-scheme: light dark;
  /* Logo + ateliê — contraste é NA LETRA, não no fundo */
  --favo-logo: #5e422d;
  --favo-headline-soft: #c4897c; /* salmão claro (legível no cream) */
  --favo-headline-strong: #5e422d; /* marrom da logo */
  --favo-bg: #fff6f1;
  --favo-surface: #fffcfa;
  --favo-surface-2: #f7ebe6;
  --favo-gold: #5e422d;
  --favo-gold-hover: #7a5a42;
  --favo-btn-bg: linear-gradient(180deg, #8a6358 0%, #5e422d 55%, #4a3424 100%);
  --favo-btn-text: #fff8f5;
  --favo-on-gold: #fff8f5;
  --favo-text: #3a2822;
  --favo-muted: #7a615c;
  --favo-border: rgba(94, 66, 45, 0.2);
  --favo-font-serif: "Fraunces", Georgia, serif;
  --favo-font-sans: "DM Sans", system-ui, sans-serif;
  --favo-header-shell-bg: rgba(255, 246, 241, 0.92);
  --favo-nav-drawer-bg: #fffcfa;
  --favo-nav-drawer-head-bg: #fff6f1;
  --favo-nav-drawer-border: rgba(94, 66, 45, 0.14);
  --favo-nav-link-on-drawer: var(--favo-text);
  --favo-nav-backdrop-bg: rgba(58, 40, 34, 0.3);
  --favo-pain: #b84328;
  --favo-pain-bg: rgba(184, 67, 40, 0.12);
  --favo-win: #3d8f6a;
  --favo-win-bg: rgba(61, 143, 106, 0.12);
  --favo-logo-btn-grad: linear-gradient(
    105deg,
    #3a2822 0%,
    #5e422d 40%,
    #8a6358 70%,
    #3a2822 100%
  );
  --favo-gradient-logo: none;
  --favo-mesh: radial-gradient(ellipse 140% 100% at 0% 40%, rgba(94, 66, 45, 0.04), transparent 72%),
    radial-gradient(ellipse 100% 80% at 100% 10%, rgba(232, 160, 148, 0.1), transparent 68%);
  --favo-honey-opacity: 0.18;
  --favo-honey-opacity-min: 0.14;
  --favo-honey-opacity-max: 0.24;
  --favo-honey-filter: blur(0.6px) brightness(0.9) contrast(1.02) saturate(0.78)
    drop-shadow(0 0 72px rgba(94, 66, 45, 0.06));
  --favo-honey-glow-opacity: 0.24;
  --favo-honey-glow-opacity-alt: 0.38;
}

/* Tema escuro do SO: fundo elevado + salmão-branco na letra (contraste real) */
@media (prefers-color-scheme: dark) {
  :root {
    --favo-logo: #5e422d;
    --favo-headline-soft: #f3e2da; /* salmão mais branco */
    --favo-headline-strong: #c4a090; /* marrom claro legível no escuro */
    --favo-bg: #2a2224;
    --favo-surface: #352a2c;
    --favo-surface-2: #3f3234;
    --favo-gold: #c4a090;
    --favo-gold-hover: #d4b4a4;
    --favo-btn-bg: linear-gradient(180deg, #c9a08f 0%, #a67c6a 52%, #8f6558 100%);
    --favo-btn-text: #2a1f20;
    --favo-on-gold: #2a1f20;
    --favo-text: #f6f0ea;
    --favo-muted: #c4b0a8;
    --favo-border: rgba(196, 160, 144, 0.26);
    --favo-header-shell-bg: rgba(42, 34, 36, 0.94);
    --favo-nav-drawer-bg: #302628;
    --favo-nav-drawer-head-bg: #2a2224;
    --favo-nav-drawer-border: rgba(246, 240, 234, 0.1);
    --favo-nav-link-on-drawer: var(--favo-text);
    --favo-nav-backdrop-bg: rgba(18, 12, 14, 0.55);
    --favo-pain: #e07a5a;
    --favo-pain-bg: rgba(224, 122, 90, 0.14);
    --favo-win: #6ecf9a;
    --favo-win-bg: rgba(110, 207, 154, 0.12);
    --favo-logo-btn-grad: linear-gradient(
      105deg,
      #2a1f20 0%,
      #5e422d 35%,
      #a67c6a 65%,
      #2a1f20 100%
    );
    --favo-mesh: radial-gradient(ellipse 140% 100% at 0% 40%, rgba(196, 160, 144, 0.08), transparent 72%),
      radial-gradient(ellipse 100% 80% at 100% 12%, rgba(201, 137, 150, 0.08), transparent 68%);
    --favo-honey-opacity: 0.14;
    --favo-honey-opacity-min: 0.1;
    --favo-honey-opacity-max: 0.18;
    --favo-honey-filter: blur(1.2px) saturate(0.75)
      drop-shadow(0 0 100px rgba(201, 137, 150, 0.06));
    --favo-honey-glow-opacity: 0.28;
    --favo-honey-glow-opacity-alt: 0.42;
  }
}

.favo-header-logo {
  flex-shrink: 0;
  max-width: 8.5rem !important;
}

@media (min-width: 900px) {
  .favo-header-logo {
    max-width: 9.5rem !important;
  }
}

.favo-header-logo-img {
  display: block;
  /* Nova logo legível — porte próximo ao wordmark antigo, sem ícone minúsculo */
  height: 1.75rem !important;
  width: auto !important;
  max-height: 1.75rem !important;
  max-width: 8.5rem !important;
  object-fit: contain;
  object-position: left center;
}

@media (min-width: 900px) {
  .favo-header-logo-img {
    height: 1.9rem !important;
    max-height: 1.9rem !important;
    max-width: 9.5rem !important;
  }
}

/* Wordmark sólido (sem gradiente dourado) */
.favo-wordmark,
.favo-wordmark-inline {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--favo-gold) !important;
  font-family: var(--favo-font-serif);
  font-weight: 600;
}

/* Cápsula de scroll: borda marrom no tema claro (não branco invisível) */
.favo-scroll-hint-pill {
  border-color: var(--favo-logo, #5e422d) !important;
  box-shadow: none !important;
}

.favo-scroll-hint-dot {
  background: var(--favo-logo, #5e422d) !important;
}

@media (prefers-color-scheme: dark) {
  .favo-scroll-hint-pill {
    border-color: color-mix(in srgb, var(--favo-gold) 85%, #fff 15%) !important;
  }

  .favo-scroll-hint-dot {
    background: var(--favo-gold) !important;
  }
}

/* Soft tipográfico — contraste NA LETRA */
.favo-hero h1 {
  font-family: var(--favo-font-serif);
  font-weight: 600;
  font-size: clamp(1.45rem, 3.2vh + 0.95rem, 3.65rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--favo-headline-soft);
}

.favo-hero h1 .favo-headline-soft {
  color: var(--favo-headline-soft);
  font-style: normal;
  font-weight: 600;
}

.favo-hero h1 .gold {
  font-style: italic;
  font-weight: 500;
  color: var(--favo-headline-strong);
}

/* Mobile: quebra após “consistência” (sem “no” órfão) */
@media (max-width: 899px) {
  .favo-hero {
    padding-top: calc(var(--header-h) + clamp(0.35rem, 1.5vh, 0.85rem)) !important;
  }

  .favo-hero-inner {
    justify-content: center !important;
  }

  .favo-hero-body {
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    padding-top: clamp(0.15rem, 1.2vh, 0.75rem) !important;
    padding-bottom: clamp(0.75rem, 3vh, 1.5rem) !important;
    gap: clamp(0.4rem, 1.8vw, 0.75rem) !important;
    transform: translateY(clamp(-1.1rem, -2.8vh, -0.35rem));
  }

  .favo-hero .favo-badge,
  .favo-motif,
  .favo-hero h1,
  .favo-hero-lead {
    text-align: center;
  }

  .favo-hero h1,
  .favo-headline-sales {
    max-width: min(100%, 20ch) !important;
    width: 100%;
    margin-inline: auto;
    font-size: clamp(1.55rem, 6.4vw + 0.45vh, 2.35rem) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.02em;
    color: var(--favo-headline-soft);
  }

  .favo-hero-lead {
    max-width: min(100%, 34ch) !important;
    width: 100%;
    margin-inline: auto;
    text-align: center !important;
    line-height: 1.4;
    font-size: clamp(0.78rem, 3.05vw, 0.9rem) !important;
    color: color-mix(in srgb, var(--favo-muted) 88%, var(--favo-text) 12%);
  }

  .favo-hero .favo-cta-stack {
    align-items: center;
    width: min(100%, 22rem);
    margin-inline: auto;
  }
}

@media (min-width: 900px) {
  .favo-hero h1,
  .favo-headline-sales {
    max-width: min(100%, 28ch) !important;
    color: var(--favo-headline-soft);
  }
}

.favo-hero .favo-badge {
  font-family: var(--favo-font-serif);
  font-weight: 500;
  font-size: clamp(1.15rem, 3.2vw, 1.75rem);
}

.favo-section h2,
.favo-cta-block h2,
.favo-funnel-intro h2 {
  font-family: var(--favo-font-serif);
  font-weight: 600;
}

.favo-btn.favo-btn-brand {
  font-family: var(--favo-font-sans);
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
}

.favo-btn.favo-btn-brand .favo-btn-logo {
  font-family: var(--favo-font-serif);
  font-weight: 600;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: inherit !important;
}

/* Fundo cream/salmão suave (mobile ok) — sem gradiente escuro ilegível no desktop */
body.favo-lp-page {
  background-color: var(--favo-bg);
  background-image: linear-gradient(
      165deg,
      #fffcfa 0%,
      #fff6f1 40%,
      #fce8df 100%
    ),
    radial-gradient(ellipse 80% 50% at 12% 0%, rgba(232, 160, 148, 0.1), transparent 55%);
  color: var(--favo-text);
}

@media (prefers-color-scheme: dark) {
  body.favo-lp-page {
    background-image: linear-gradient(
        165deg,
        #322628 0%,
        #2a2224 48%,
        #241c1e 100%
      ),
      radial-gradient(ellipse 80% 50% at 12% 0%, rgba(201, 137, 150, 0.07), transparent 55%);
  }
}

.favo-hero .favo-btn-brand::before,
#cta-final .favo-btn-brand::before {
  background: radial-gradient(
    circle at center,
    rgba(94, 66, 45, 0.35) 0%,
    rgba(94, 66, 45, 0.16) 32%,
    transparent 58%
  );
}

@media (prefers-color-scheme: dark) {
  .favo-hero .favo-btn-brand::before,
  #cta-final .favo-btn-brand::before {
    background: radial-gradient(
      circle at center,
      rgba(196, 160, 144, 0.4) 0%,
      rgba(196, 160, 144, 0.14) 32%,
      transparent 58%
    );
  }
}

/* —— Jornada: timeline vertical (sem funil trapezoidal) —— */
.favo-section--journey {
  padding-block: clamp(2.5rem, 6vh, 4.5rem);
  overflow: visible;
}

.favo-journey {
  max-width: 40rem;
  margin-inline: auto;
  overflow: visible;
}

.favo-journey-intro {
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.favo-journey-intro h2 {
  font-family: var(--favo-font-serif);
  font-weight: 600;
}

.favo-journey-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.favo-journey-step {
  --funnel-proximity: 0;
  --journey-open: 0;
  position: relative !important;
  display: grid !important;
  grid-template-columns: 2rem minmax(0, 1fr) !important;
  gap: 0.75rem 0.95rem !important;
  align-items: start !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 0.25rem !important;
  opacity: calc(0.38 + (var(--journey-open) * 0.62));
  transform: none !important;
  z-index: auto !important;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.favo-journey-step::before,
.favo-journey-step::after {
  content: none !important;
  display: none !important;
}

.favo-journey-step.is-active {
  z-index: auto !important;
}

.favo-journey-spine {
  position: relative;
  display: flex;
  justify-content: center;
  align-self: stretch;
  padding-top: 0.2rem;
  width: 2rem;
}

.favo-journey-spine::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  bottom: -0.35rem;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--favo-gold) 55%, transparent);
  opacity: calc(0.35 + (var(--journey-open) * 0.65));
  transition: opacity 0.55s ease;
}

.favo-journey-step:last-child .favo-journey-spine::before {
  display: none;
}

.favo-journey-dot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--favo-font-sans);
  color: #fff9f4;
  background: var(--favo-gold);
  box-shadow: 0 0 0 3px var(--favo-bg);
  transform: scale(calc(0.92 + (var(--journey-open) * 0.14)));
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s ease;
}

.favo-journey-step.is-active .favo-journey-dot {
  box-shadow:
    0 0 0 3px var(--favo-bg),
    0 0 0 6px color-mix(in srgb, var(--favo-gold) 28%, transparent);
}

.favo-journey-panel {
  min-width: 0;
  max-width: 100%;
  /* Espaço entre títulos fechados — um por vez no centro */
  padding-bottom: clamp(1.6rem, 5vh, 2.4rem);
  overflow: visible;
}

.favo-journey-meta {
  margin: 0 0 0.2rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--favo-gold);
  font-weight: 600;
}

.favo-journey-panel h3 {
  margin: 0 0 0.55rem;
  font-family: var(--favo-font-serif);
  font-weight: 600;
  font-size: clamp(1.2rem, 4.2vw, 1.5rem);
  line-height: 1.25;
  color: var(--favo-text);
  overflow-wrap: anywhere;
}

.favo-journey-expand {
  display: grid;
  gap: 0.55rem;
  max-height: calc(var(--journey-open) * 26rem);
  opacity: var(--journey-open);
  overflow: hidden;
  transform: translateY(calc((1 - var(--journey-open)) * -6px));
  transition:
    max-height 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.favo-journey-block {
  border-radius: 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--favo-border);
  background: var(--favo-surface);
}

.favo-journey-block--ordem {
  border-left: 3px solid var(--favo-gold);
}

.favo-journey-block--sol {
  border-left: 3px solid color-mix(in srgb, var(--favo-text) 28%, transparent);
}

.favo-journey-label {
  margin: 0 0 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--favo-gold);
}

.favo-journey-block p:last-child {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--favo-text);
}

@media (prefers-reduced-motion: reduce) {
  .favo-journey-step,
  .favo-journey-expand,
  .favo-journey-dot,
  .favo-journey-spine::before {
    transition: none;
  }

  .favo-journey-step {
    --journey-open: 1;
    opacity: 1;
  }

  .favo-journey-expand {
    max-height: none;
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 900px) {
  .favo-journey-step {
    grid-template-columns: 2.25rem minmax(0, 1fr) !important;
    gap: 1rem 1.25rem !important;
  }

  .favo-journey-dot {
    width: 1.85rem;
    height: 1.85rem;
  }
}

