/*
 * Consultoria Page — Estilos específicos da página
 * Não recria tokens. Não duplica estilos globais.
 * Usa variáveis de tokens.css e classes de patterns.css.
 */

/* =========================================================
 * HERO
 * ========================================================= */

.consult-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(100px, 12vw, 140px) clamp(72px, 8vw, 100px);
}

.consult-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}

.consult-hero-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-blue-300);
  margin-bottom: var(--space-5);
}

.consult-hero-h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-inverse);
  margin-bottom: var(--space-6);
}

.consult-hero-desc {
  font-size: clamp(var(--text-base), 1.8vw, var(--text-lg));
  color: var(--text-inverse-muted);
  line-height: var(--leading-relaxed);
  max-width: 52ch;
  margin-bottom: var(--space-10);
}

.consult-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* ── Media column ── */

.consult-hero-media {
  position: relative;
}

.consult-hero-img-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.consult-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* Floating cards */

@keyframes consult-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}

.consult-float-cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.consult-float-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  white-space: nowrap;
  animation: consult-float 3s ease-in-out infinite;
}

/* Delays escalonados — cada card sobe num momento diferente */
.consult-float-card--tl { animation-delay: 0s; }
.consult-float-card--br { animation-delay: 0.5s; }
.consult-float-card--bl { animation-delay: 1s; }

@media (prefers-reduced-motion: reduce) {
  .consult-float-card { animation: none; }
}

.consult-float-card-icon {
  width: 32px;
  height: 32px;
  background: rgba(140, 171, 214, 0.18);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-blue-300);
}

.consult-float-card-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-inverse);
}

.consult-float-card--tl {
  top: 8%;
  left: -8%;
}

.consult-float-card--br {
  bottom: 10%;
  right: -5%;
}

.consult-float-card--bl {
  bottom: 28%;
  left: -10%;
}

/* =========================================================
 * SEÇÃO: QUANDO FAZ SENTIDO
 * ========================================================= */

.consult-conditions-intro {
  text-align: center;
  margin-bottom: clamp(var(--space-10), 5vw, 64px);
}

.consult-conditions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: center;
}

.consult-condition-card {
  /* Largura base: 1 por linha no mobile */
  flex: 0 0 100%;
  display: flex;
  align-items: center;   /* ícone alinhado ao centro vertical com o texto */
  gap: var(--space-5);
  padding: var(--space-6) var(--space-7);
  background: var(--bg-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.consult-condition-card:hover {
  border-color: var(--color-blue-300);
  box-shadow: 0 4px 24px rgba(140, 171, 214, 0.15);
}

.consult-condition-icon {
  width: 44px;
  height: 44px;
  background: var(--color-gray-100);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-navy-500);
}

.consult-condition-text {
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

/* =========================================================
 * SEÇÃO: TRÊS FRENTES CENTRAIS
 * ========================================================= */

.consult-frentes-intro {
  text-align: center;
  margin-bottom: clamp(var(--space-10), 5vw, 64px);
}

.consult-frentes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.consult-frente-card {
  padding: clamp(var(--space-7), 3vw, var(--space-10));
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, background 0.25s;
}

.consult-frente-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(140, 171, 214, 0.35);
}

.consult-frente-num {
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: rgba(140, 171, 214, 0.12);
  position: absolute;
  top: var(--space-5);
  right: var(--space-7);
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
}

.consult-frente-title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-xl), 2.2vw, var(--text-2xl));
  font-weight: var(--font-weight-bold);
  color: var(--text-inverse);
  margin-bottom: var(--space-4);
  line-height: var(--leading-snug);
  padding-right: 60px;
}

.consult-frente-text {
  font-size: var(--text-base);
  color: var(--text-inverse-muted);
  line-height: var(--leading-relaxed);
}

/* =========================================================
 * SEÇÃO: RESULTADOS E AUTORIDADE
 * ========================================================= */

.consult-authority-inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.consult-authority-text {
  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
  color: var(--text-inverse-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: clamp(var(--space-8), 4vw, 56px);
}

.consult-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.consult-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-blue-300);
  background: rgba(140, 171, 214, 0.10);
  border: 1px solid rgba(140, 171, 214, 0.25);
  border-radius: 100px;
  padding: var(--space-2) var(--space-5);
}

/* =========================================================
 * SEÇÕES DE CASE — layout compartilhado
 * ========================================================= */

.consult-case-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-blue-300);
  background: rgba(140, 171, 214, 0.10);
  border: 1px solid rgba(140, 171, 214, 0.25);
  border-radius: 100px;
  padding: var(--space-1) var(--space-4);
  margin-bottom: var(--space-5);
}

.consult-case-title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5);
}

.consult-case-desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}

.consult-case-note {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: italic;
  line-height: var(--leading-relaxed);
}

/* Layout das seções de case com gráfico */
.consult-case-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-8), 5vw, 64px);
  align-items: start;
}

/* Tags de período / resultado */
.consult-case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.consult-case-meta-tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-blue-300);
  background: rgba(140, 171, 214, 0.08);
  border: 1px solid rgba(140, 171, 214, 0.20);
  border-radius: 6px;
  padding: var(--space-1) var(--space-3);
}

/* ── Chart containers ── */

.consult-chart-wrap {
  background: var(--bg-navy);
  border-radius: 16px;
  overflow: hidden;
  padding: var(--space-6);
}

.consult-chart-title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-blue-300);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-4);
}

.consult-chart-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Chart no escuro (Case 2 em section-light) */
.consult-chart-wrap--light {
  background: var(--bg-navy);
}

/* =========================================================
 * CASE 1 — badge de resultado
 * ========================================================= */

.consult-case1-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(38, 174, 96, 0.12);
  border: 1px solid rgba(38, 174, 96, 0.30);
  border-radius: 10px;
  padding: var(--space-4) var(--space-6);
  margin-top: var(--space-5);
}

.consult-case1-badge-num {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-bold);
  color: #26AE60;
  line-height: 1;
}

.consult-case1-badge-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}

/* =========================================================
 * CASE 2 — redução label
 * ========================================================= */

.consult-case2-reduction {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.consult-case2-val {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.consult-case2-val--before {
  color: var(--color-warning);
}

.consult-case2-arrow {
  color: var(--text-muted);
  font-size: var(--text-2xl);
}

.consult-case2-val--after {
  color: var(--color-success);
}

.consult-case2-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}

/* =========================================================
 * CASE 3 — comparativo antes / depois
 * ========================================================= */

.consult-before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.consult-ba-card {
  padding: var(--space-6);
  border-radius: 12px;
  text-align: center;
}

.consult-ba-card--before {
  background: rgba(230, 126, 33, 0.08);
  border: 1px solid rgba(230, 126, 33, 0.25);
}

.consult-ba-card--after {
  background: rgba(38, 174, 96, 0.08);
  border: 1px solid rgba(38, 174, 96, 0.25);
}

.consult-ba-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.consult-ba-card--before .consult-ba-label { color: var(--color-warning); }
.consult-ba-card--after  .consult-ba-label { color: var(--color-success); }

.consult-ba-val {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.consult-ba-card--before .consult-ba-val { color: var(--color-warning); }
.consult-ba-card--after  .consult-ba-val { color: var(--color-success); }

.consult-ba-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* Mini card absenteísmo */
.consult-absenteismo {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--bg-light);
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
}

.consult-absenteismo-pct {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-success);
  white-space: nowrap;
}

.consult-absenteismo-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}

/* =========================================================
 * CTA FINAL
 * ========================================================= */

.consult-cta-inner {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

.consult-cta-title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-inverse);
  margin-bottom: var(--space-6);
}

.consult-cta-text {
  font-size: clamp(var(--text-base), 1.8vw, var(--text-lg));
  color: var(--text-inverse-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
}

/* =========================================================
 * SEÇÃO DARK — cores de texto em cards de case
 * ========================================================= */

.section-white .consult-case-title   { color: var(--text-primary); }
.section-white .consult-case-desc    { color: var(--text-secondary); }
.section-white .consult-case-note    { color: var(--text-muted); }
.section-white .consult-case-label   {
  color: var(--color-navy-500);
  background: rgba(33, 56, 100, 0.06);
  border-color: rgba(33, 56, 100, 0.18);
}
.section-white .consult-ba-desc      { color: var(--text-muted); }

.section-light .consult-case-title   { color: var(--text-primary); }
.section-light .consult-case-desc    { color: var(--text-secondary); }
.section-light .consult-case-note    { color: var(--text-muted); }
.section-light .consult-case-label   {
  color: var(--color-navy-500);
  background: rgba(33, 56, 100, 0.06);
  border-color: rgba(33, 56, 100, 0.18);
}
.section-light .consult-case2-subtitle { color: var(--text-muted); }

/* =========================================================
 * RESPONSIVIDADE
 * ========================================================= */

@media (min-width: 640px) {
  /* Tablets: 2 por linha, última row centrada pelo justify-content */
  .consult-condition-card {
    flex: 0 0 calc(50% - var(--space-5) / 2);
  }
}

@media (min-width: 768px) {
  .consult-frentes-grid {
    grid-template-columns: 1fr 1fr;
  }

  .consult-before-after {
    gap: var(--space-5);
  }
}

/* Mobile: hero centralizado */
@media (max-width: 1023px) {
  .consult-hero-col-text {
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
  .consult-hero-actions {
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .consult-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-10), 5vw, 80px);
  }

  /* Desktop: 3 por linha — com justify-content:center a última row (2 cards) fica centrada */
  .consult-condition-card {
    flex: 0 0 calc(33.333% - var(--space-5) * 2 / 3);
  }

  .consult-frentes-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .consult-case-layout {
    grid-template-columns: 1fr 1.1fr;
    align-items: start;
  }

  .consult-case-layout--reverse {
    grid-template-columns: 1.1fr 1fr;
  }

  .consult-case-layout--reverse .consult-case-chart-col {
    order: -1;
  }
}

/* Mobile: aumenta fontes dos gráficos SVG (charts 1 e 2) */
@media (max-width: 767px) {
  .consult-chart-svg text {
    font-size: 15px; /* sobrescreve os atributos SVG — CSS tem prioridade */
  }
}

/* Mobile / tablet: cards dentro dos limites da imagem — sem corte nas laterais */
@media (max-width: 1023px) {
  .consult-float-card--tl {
    left: 4%;   /* espaço visível à esquerda do card */
  }
  .consult-float-card--bl {
    left: 4%;   /* espaço visível à esquerda do card */
  }
  .consult-float-card--br {
    right: 4%;  /* espaço visível à direita do card */
  }
}

/* Desktop largo: aumenta o destaque para fora da imagem */
@media (min-width: 1280px) {
  .consult-float-card--tl { left: -10%; }
  .consult-float-card--br { right: -8%; }
  .consult-float-card--bl { left: -12%; }
}