/* ================================================================
   FOCOFY MODE — Section Glassmorphism Layer v1.0
   Fase 2: estilo premium dark para cada section individual

   Ativado por body.focofy-mode
   Requer: focofy-mode.css (--fm-* palette definida lá)
   Carregamento: após focofy-mode.css
================================================================ */


/* ──────────────────────────────────────────────────────────────
   UTILITÁRIOS GLOBAIS DO MODO
   ────────────────────────────────────────────────────────────── */

/* Kicker / eyebrow com ponto cyan brilhante */
body.focofy-mode .focofy-section__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fm-cyan);
  background: rgba(34, 211, 238, 0.06);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: var(--radius-full);
  padding: 4px 12px 4px 8px;
}

body.focofy-mode .focofy-section__kicker::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fm-cyan);
  box-shadow: 0 0 8px var(--fm-cyan);
  flex-shrink: 0;
}

/* Subtítulo tipo eyebrow nas seções */
body.focofy-mode .focofy-benefits__subtitle,
body.focofy-mode .focofy-blogfeed__subtitle,
body.focofy-mode .focofy-faq__subtitle {
  color: var(--fm-cyan);
  opacity: 1;
}

/* Gradient text em títulos — versão focofy-mode */
body.focofy-mode .focofy-gradient-text {
  background: linear-gradient(90deg, var(--fm-cyan) 0%, var(--fm-indigo) 50%, var(--fm-purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ──────────────────────────────────────────────────────────────
   1. BENEFITS — Cards glassmorphism 3 colunas
   ────────────────────────────────────────────────────────────── */

body.focofy-mode .focofy-benefit {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border-color: var(--fm-border);
  box-shadow: none;
  transition: transform 250ms ease, border-color 250ms ease, background 250ms ease;
}

body.focofy-mode .focofy-benefit:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.35);
  background: linear-gradient(180deg, rgba(99,102,241,0.08), rgba(255,255,255,0.01));
  box-shadow: 0 0 40px rgba(99, 102, 241, 0.12);
}

/* Ícone com fundo indigo translúcido */
body.focofy-mode .focofy-benefit__icon-wrap {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.25);
}

body.focofy-mode .focofy-benefit.is-icon-style-soft .focofy-benefit__icon-wrap {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.25);
}

body.focofy-mode .focofy-benefit.is-icon-style-solid .focofy-benefit__icon-wrap {
  background: var(--fm-grad-primary);
  border: none;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
}

body.focofy-mode .focofy-benefit__title {
  color: var(--fm-fg);
}

body.focofy-mode .focofy-benefit__desc {
  color: var(--fm-fg-muted);
}

/* Highlight card — borda gradiente */
body.focofy-mode .focofy-benefit.is-highlight {
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 60px rgba(99, 102, 241, 0.15), 0 0 0 1px rgba(99,102,241,0.2) inset;
}


/* ──────────────────────────────────────────────────────────────
   2. SERVICES — Cards grandes com glow por serviço
   ────────────────────────────────────────────────────────────── */

body.focofy-mode .services-block {
  --services-card-bg:           rgba(10, 12, 19, 0.8);
  --services-card-bg-hover:     rgba(16, 19, 28, 0.9);
  --services-card-border:       rgba(255, 255, 255, 0.08);
  --services-card-border-hover: rgba(99, 102, 241, 0.4);
  --services-card-shadow:       none;
  --services-card-shadow-hover: 0 20px 60px rgba(99, 102, 241, 0.15);
  --services-icon-bg:           rgba(99, 102, 241, 0.12);
  --services-icon-color:        var(--fm-cyan);
  --services-title-color:       var(--fm-fg);
  --services-text-color:        var(--fm-fg-muted);
  --services-meta-color:        var(--fm-fg-dim);
  --services-price-color:       var(--fm-cyan);
  --services-badge-color:       var(--fm-fg);
  --services-badge-bg:          rgba(99, 102, 241, 0.12);
  --services-badge-border:      rgba(99, 102, 241, 0.25);
  --services-benefit-bg:        rgba(255, 255, 255, 0.03);
  --services-benefit-border:    rgba(255, 255, 255, 0.07);
  --services-benefit-color:     var(--fm-fg-muted);
}

/* Card de serviço — glass base */
body.focofy-mode .focofy-service-card,
body.focofy-mode .services-block .focofy-service-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border-color: var(--fm-border);
  position: relative;
  overflow: hidden;
  transition: border-color 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}

/* Glow radial no hover — via pseudo-elemento */
body.focofy-mode .focofy-service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(99,102,241,0.18), transparent 60%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

body.focofy-mode .focofy-service-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(99, 102, 241, 0.15);
}

body.focofy-mode .focofy-service-card:hover::before {
  opacity: 1;
}

/* Tag mono em serviços */
body.focofy-mode .focofy-service-card .focofy-badge,
body.focofy-mode .focofy-service-card .services-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--fm-fg-dim);
  text-transform: uppercase;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--fm-border);
  border-radius: var(--radius-full);
}


/* ──────────────────────────────────────────────────────────────
   3. CTA — Bloco com gradiente dramático + grid overlay
   ────────────────────────────────────────────────────────────── */

body.focofy-mode .ff-cta {
  background:
    radial-gradient(ellipse 80% 80% at 50% 100%, rgba(168,85,247,0.35), transparent 60%),
    radial-gradient(ellipse 60% 60% at 100% 0%, rgba(34,211,238,0.2), transparent 60%),
    radial-gradient(ellipse 60% 60% at 0% 0%, rgba(99,102,241,0.25), transparent 60%),
    linear-gradient(180deg, #0F1220, var(--fm-bg-1));
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow:
    0 0 80px rgba(168, 85, 247, 0.2),
    0 0 120px rgba(99, 102, 241, 0.1);
  position: relative;
  overflow: hidden;
}

/* Grid overlay sutil */
body.focofy-mode .ff-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 80%);
  pointer-events: none;
}

body.focofy-mode .ff-cta__title,
body.focofy-mode .ff-cta__title * {
  color: var(--fm-fg);
  position: relative;
  z-index: 1;
}

body.focofy-mode .ff-cta__desc,
body.focofy-mode .ff-cta__subtitle {
  color: var(--fm-fg-muted);
  position: relative;
  z-index: 1;
}

body.focofy-mode .ff-cta__ctas,
body.focofy-mode .ff-cta__meta,
body.focofy-mode .ff-cta__urgency,
body.focofy-mode .ff-cta__social {
  position: relative;
  z-index: 1;
}

/* Override variantes internas da CTA em focofy-mode */
body.focofy-mode .ff-cta--bg-light,
body.focofy-mode .ff-cta--bg-dark {
  background:
    radial-gradient(ellipse 80% 80% at 50% 100%, rgba(168,85,247,0.35), transparent 60%),
    radial-gradient(ellipse 60% 60% at 100% 0%, rgba(34,211,238,0.2), transparent 60%),
    linear-gradient(180deg, #0F1220, var(--fm-bg-1));
  border-color: rgba(255,255,255,0.1);
  color: var(--fm-fg);
}


/* ──────────────────────────────────────────────────────────────
   4. FAQ — Accordion dark com borda indigo no aberto
   ────────────────────────────────────────────────────────────── */

body.focofy-mode .focofy-faq {
  --faq-card-bg:       rgba(255, 255, 255, 0.02);
  --faq-card-border:   var(--fm-border);
  --faq-card-bg-hover: rgba(99, 102, 241, 0.04);
  --faq-answer-color:  var(--fm-fg-muted);
}

body.focofy-mode .focofy-faq__item {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--fm-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 200ms ease, background 200ms ease;
}

body.focofy-mode .focofy-faq__item[open],
body.focofy-mode .focofy-faq__item.is-open {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(99, 102, 241, 0.04);
}

body.focofy-mode .focofy-faq__question {
  color: var(--fm-fg);
  padding: 20px 24px;
}

body.focofy-mode .focofy-faq__question-text {
  color: var(--fm-fg);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
}

/* Ícone +/- do accordion */
body.focofy-mode .focofy-faq__question-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border-color: var(--fm-border);
  color: var(--fm-fg-muted);
  transition: transform 250ms ease, background 200ms ease, border-color 200ms ease;
}

body.focofy-mode .focofy-faq__item[open] .focofy-faq__question-icon,
body.focofy-mode .focofy-faq__item.is-open .focofy-faq__question-icon {
  background: var(--fm-grad-primary);
  border-color: transparent;
  color: #fff;
}

body.focofy-mode .focofy-faq__answer {
  color: var(--fm-fg-muted);
  padding-inline: 24px;
}

/* Accent no kicker do FAQ */
body.focofy-mode .focofy-faq__subtitle {
  color: var(--fm-cyan);
  opacity: 1;
}


/* ──────────────────────────────────────────────────────────────
   5. BLOG FEED — Cards glass com hover sutil
   ────────────────────────────────────────────────────────────── */

body.focofy-mode .focofy-postcard {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border-color: var(--fm-border);
  transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}

body.focofy-mode .focofy-postcard:hover {
  transform: translateY(-3px);
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 12px 40px rgba(99, 102, 241, 0.12);
}

/* Categoria do post — accent */
body.focofy-mode .focofy-postcard__cat,
body.focofy-mode .focofy-postcard__category {
  color: var(--fm-cyan);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
}

body.focofy-mode .focofy-postcard__title {
  color: var(--fm-fg);
}

body.focofy-mode .focofy-postcard__title a {
  color: var(--fm-fg);
  transition: color var(--transition-fast);
}

body.focofy-mode .focofy-postcard__title a:hover {
  color: var(--fm-cyan);
}

body.focofy-mode .focofy-postcard__excerpt {
  color: var(--fm-fg-muted);
}

body.focofy-mode .focofy-postcard__meta,
body.focofy-mode .focofy-postcard__date,
body.focofy-mode .focofy-postcard__author {
  color: var(--fm-fg-dim);
}

body.focofy-mode .focofy-postcard__read {
  color: var(--fm-cyan);
}

body.focofy-mode .focofy-postcard__read:hover {
  color: #67E8F9;
}

/* Thumbnail overlay no post card */
body.focofy-mode .focofy-postcard__thumbnail-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
}

body.focofy-mode .focofy-postcard__thumbnail-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,12,19,0.6) 100%);
}


/* ──────────────────────────────────────────────────────────────
   6. IMAGE MARQUEE — Logos com fade e opacidade reduzida
   ────────────────────────────────────────────────────────────── */

body.focofy-mode .focofy-marquee__track,
body.focofy-mode .focofy-image-marquee__track {
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Items do marquee — dim por padrão, full no hover */
body.focofy-mode .focofy-marquee-item,
body.focofy-mode .focofy-image-marquee__item {
  opacity: 0.45;
  filter: grayscale(40%) brightness(0.9);
  transition: opacity 200ms ease, filter 200ms ease;
}

body.focofy-mode .focofy-marquee-item:hover,
body.focofy-mode .focofy-image-marquee__item:hover {
  opacity: 1;
  filter: grayscale(0%) brightness(1.1);
}

/* Logos SVG inline — forçar fill claro */
body.focofy-mode .focofy-marquee-item img,
body.focofy-mode .focofy-image-marquee__item img {
  filter: brightness(0) invert(1);
  opacity: 0.5;
}

body.focofy-mode .focofy-marquee-item:hover img,
body.focofy-mode .focofy-image-marquee__item:hover img {
  opacity: 0.85;
}


/* ──────────────────────────────────────────────────────────────
   BÔNUS: FEATURES GRID — mesma estética dos benefits
   ────────────────────────────────────────────────────────────── */

body.focofy-mode .focofy-feature {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border-color: var(--fm-border);
  transition: transform 250ms ease, border-color 250ms ease;
}

body.focofy-mode .focofy-feature:hover {
  transform: translateY(-3px);
  border-color: rgba(99, 102, 241, 0.35);
}

body.focofy-mode .focofy-feature__icon-wrap {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.25);
}

body.focofy-mode .focofy-feature__title {
  color: var(--fm-fg);
}

body.focofy-mode .focofy-feature__desc,
body.focofy-mode .focofy-features-grid__desc {
  color: var(--fm-fg-muted);
}

/* ──────────────────────────────────────────────────────────────
   BÔNUS: PRICING — cards glass com destaque no plano featured
   ────────────────────────────────────────────────────────────── */

body.focofy-mode .focofy-pricing-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border-color: var(--fm-border);
}

body.focofy-mode .focofy-pricing-card.is-featured,
body.focofy-mode .focofy-pricing-card--featured {
  background: linear-gradient(180deg, rgba(99,102,241,0.12), rgba(99,102,241,0.04));
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 60px rgba(99, 102, 241, 0.2), 0 0 0 1px rgba(99,102,241,0.15) inset;
}

body.focofy-mode .focofy-pricing-card__price {
  background: linear-gradient(90deg, var(--fm-cyan) 0%, var(--fm-indigo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

body.focofy-mode .focofy-pricing-card__name,
body.focofy-mode .focofy-pricing-card__title {
  color: var(--fm-fg);
}

body.focofy-mode .focofy-pricing-card__desc {
  color: var(--fm-fg-muted);
}


/* ──────────────────────────────────────────────────────────────
   FASE 3-A: METRICS BAR — Cases sucesso
   ────────────────────────────────────────────────────────────── */

body.focofy-mode .focofy-case-sucesso__metrics-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--fm-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  margin-bottom: var(--space-10);
  overflow: hidden;
}

@media (max-width: 767px) {   /* --bp-tablet */
  body.focofy-mode .focofy-case-sucesso__metrics-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

body.focofy-mode .focofy-case-sucesso__metric {
  padding: var(--space-8) var(--space-6);
  border-right: 1px solid var(--fm-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
}

body.focofy-mode .focofy-case-sucesso__metric:last-child {
  border-right: none;
}

@media (max-width: 767px) {
  body.focofy-mode .focofy-case-sucesso__metric:nth-child(2n) {
    border-right: none;
  }
  body.focofy-mode .focofy-case-sucesso__metric:nth-child(-n+2) {
    border-bottom: 1px solid var(--fm-border);
  }
}

body.focofy-mode .focofy-case-sucesso__metric-value {
  font-family: var(--font-heading);
  font-size: clamp(var(--font-size-3xl), 3.5vw, var(--font-size-5xl));
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(90deg, var(--fm-cyan) 0%, var(--fm-indigo) 50%, var(--fm-purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

body.focofy-mode .focofy-case-sucesso__metric-label {
  font-size: var(--font-size-sm);
  color: var(--fm-fg-muted);
  line-height: var(--lh-snug);
}


/* ──────────────────────────────────────────────────────────────
   FASE 3-B: PROCESS SECTION — 4 steps dark glassmorphism
   ────────────────────────────────────────────────────────────── */

body.focofy-mode .focofy-process__title {
  color: var(--fm-fg);
}

body.focofy-mode .focofy-process__subtitle {
  color: var(--fm-fg-muted);
}

body.focofy-mode .focofy-process__step {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
  border-color: var(--fm-border);
  transition: background var(--transition-base);
}

body.focofy-mode .focofy-process__step:hover {
  background: linear-gradient(180deg, rgba(99,102,241,0.06), rgba(255,255,255,0.005));
}

body.focofy-mode .focofy-process__step-num {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.14em;
  color: var(--fm-cyan);
  margin-bottom: var(--space-4);
}

body.focofy-mode .focofy-process__step-icon {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
  color: #93C5FD;
}

body.focofy-mode .focofy-process__step-title {
  color: var(--fm-fg);
  font-size: var(--font-size-lg);
  letter-spacing: -0.015em;
}

body.focofy-mode .focofy-process__step-desc {
  color: var(--fm-fg-muted);
  font-size: var(--font-size-sm);
  line-height: var(--lh-relaxed);
}


/* ──────────────────────────────────────────────────────────────
   FASE 3-C: CONTACT FORM — Glass card + info chips
   ────────────────────────────────────────────────────────────── */

/* Card principal do formulário */
body.focofy-mode .focofy-contact {
  color: var(--fm-fg);
}

body.focofy-mode .focofy-contact__form,
body.focofy-mode .focofy-form__card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--fm-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(14px);
}

body.focofy-mode .focofy-form__card-title,
body.focofy-mode .focofy-contact__form-title {
  color: var(--fm-fg);
}

/* Inputs dentro do form */
body.focofy-mode .focofy-form__input,
body.focofy-mode .focofy-form__textarea,
body.focofy-mode .focofy-form__select {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--fm-border);
  color: var(--fm-fg);
}

body.focofy-mode .focofy-form__input::placeholder,
body.focofy-mode .focofy-form__textarea::placeholder {
  color: var(--fm-fg-dim);
}

body.focofy-mode .focofy-form__input:focus,
body.focofy-mode .focofy-form__textarea:focus {
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(99, 102, 241, 0.04);
  outline-color: rgba(99, 102, 241, 0.3);
}

body.focofy-mode .focofy-form__label {
  color: var(--fm-fg-muted);
}

/* Info list na coluna esquerda */
body.focofy-mode .focofy-contact__title {
  color: var(--fm-fg);
}

body.focofy-mode .focofy-contact__desc,
body.focofy-mode .focofy-contact__desc p {
  color: var(--fm-fg-muted);
}

body.focofy-mode .focofy-contact__info-item {
  color: var(--fm-fg-muted);
}

body.focofy-mode .focofy-contact__info-icon {
  color: var(--fm-cyan);
}

/* Chips de credencial — bloco abaixo da info list */
body.focofy-mode .focofy-contact__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

body.focofy-mode .focofy-contact__chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  background: rgba(10, 12, 19, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--fm-border);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--fm-fg-muted);
  letter-spacing: 0.04em;
}

body.focofy-mode .focofy-contact__chip-value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--fm-cyan) 0%, var(--fm-indigo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 2px;
}

body.focofy-mode .focofy-contact__chip-label {
  font-size: 10px;
  color: var(--fm-fg-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Aviso de sucesso */
body.focofy-mode .focofy-contact__notice {
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-radius: var(--radius-md);
  color: var(--fm-cyan);
}

/* Subtitle kicker */
body.focofy-mode .focofy-contact__subtitle {
  color: var(--fm-cyan);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}