/* ============================================================
   PIVA Educacional — Shared Design System
   CSS compartilhado entre todas as páginas.
   Contém: custom properties, micro-interações premium,
   utilitários que Tailwind CDN não cobre.
   ============================================================ */

/* --- Design Tokens (Custom Properties) --- */
:root {
  /* Paleta principal */
  --primary: #008994;
  --primary-dark: #006B73;
  --secondary: #F5EDE3;
  --accent: #E8860C;
  --accent-dark: #C47200;
  --text: #1C1C1C;
  --text-light: #5A5A5A;
  --bg: #FFFDF8;
  --bg-alt: #F0EBE3;
  --bg-dark: #0A3D42;
  --text-on-dark: #F5EDE3;
  --border: #E0D8CE;

  /* Sombras matizadas (hue-matched, NUNCA rgba(0,0,0,...) genérico) */
  --shadow-teal: 0 4px 24px -4px rgba(0, 137, 148, 0.08);
  --shadow-teal-lg: 0 12px 40px -8px rgba(0, 137, 148, 0.12);
  --shadow-amber: 0 4px 24px -4px rgba(232, 134, 12, 0.10);
  --shadow-amber-lg: 0 12px 40px -8px rgba(232, 134, 12, 0.15);
  --shadow-warm: 0 4px 24px -4px rgba(44, 44, 44, 0.06);
  --shadow-warm-lg: 0 12px 40px -8px rgba(44, 44, 44, 0.08);
  --shadow-warm-hover: 0 8px 32px -4px rgba(44, 44, 44, 0.10);

  /* Easing premium (NUNCA linear para UI) */
  --ease-premium: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-enter: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0.0, 1, 1);

  /* Durações */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-entry: 700ms;
}


/* ============================================================
   Premium Micro-Interactions
   Receitas para vanilla CSS + JS (IntersectionObserver).
   Referenciadas no CLAUDE.md seção Anti-Patterns.
   ============================================================ */

/* --- 1. Scroll Entry Animation ---
   Adicionar classe .scroll-reveal no HTML.
   JS adiciona .is-visible via IntersectionObserver.
   Respeita prefers-reduced-motion. */

.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-entry) var(--ease-out-soft),
    transform var(--duration-entry) var(--ease-out-soft);
  will-change: opacity, transform;
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered reveal — usar style="--index: N" no HTML */
.scroll-reveal-stagger {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--duration-entry) var(--ease-out-soft),
    transform var(--duration-entry) var(--ease-out-soft);
  transition-delay: calc(var(--index, 0) * 100ms);
}

.scroll-reveal-stagger.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Blur variant — entrada com desfoque (premium) */
.scroll-reveal-blur {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(8px);
  transition:
    opacity var(--duration-entry) var(--ease-out-soft),
    transform var(--duration-entry) var(--ease-out-soft),
    filter var(--duration-entry) var(--ease-out-soft);
}

.scroll-reveal-blur.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}


/* --- 2. Button Hover & Active Physics ---
   Feedback tátil: hover sobe, active empurra.
   Sombra matizada acompanha o estado. */

.btn-tactile {
  transition:
    transform var(--duration-fast) var(--ease-premium),
    box-shadow var(--duration-normal) var(--ease-premium);
}

.btn-tactile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-warm-hover);
}

.btn-tactile:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-warm);
  transition-duration: 80ms;
}

/* CTA variant — sombra âmbar */
.btn-tactile-cta {
  transition:
    transform var(--duration-fast) var(--ease-premium),
    box-shadow var(--duration-normal) var(--ease-premium);
}

.btn-tactile-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-amber-lg);
}

.btn-tactile-cta:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-amber);
  transition-duration: 80ms;
}


/* --- 3. Card Hover com Sombra Matizada ---
   Elevação sutil no hover. Nunca shadow genérica. */

.card-elevated {
  box-shadow: var(--shadow-warm);
  transition:
    transform var(--duration-normal) var(--ease-premium),
    box-shadow var(--duration-normal) var(--ease-premium);
}

.card-elevated:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-warm-lg);
}

/* Card com borda teal — para destaques */
.card-elevated-teal {
  box-shadow: var(--shadow-teal);
  transition:
    transform var(--duration-normal) var(--ease-premium),
    box-shadow var(--duration-normal) var(--ease-premium);
}

.card-elevated-teal:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-teal-lg);
}


/* --- 4. Double-Bezel (Doppelrand) ---
   Container premium com borda dupla: outer shell + inner core.
   Adapted from taste-skill soft-skill. */

.double-bezel {
  background: rgba(0, 137, 148, 0.03);
  border: 1px solid rgba(0, 137, 148, 0.06);
  border-radius: 1.5rem;
  padding: 0.375rem;
}

.double-bezel > .double-bezel-inner {
  background: var(--bg);
  border-radius: calc(1.5rem - 0.375rem);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
  padding: 2rem;
}

/* Dark variant */
.double-bezel-dark {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  padding: 0.375rem;
}

.double-bezel-dark > .double-bezel-inner {
  background: var(--bg-dark);
  border-radius: calc(1.5rem - 0.375rem);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
  padding: 2rem;
}


/* --- 5. Liquid Glass Edge ---
   Refração sutil em containers glass.
   1px inner border + inner shadow = sensação de vidro. */

.glass-edge {
  background: rgba(255, 253, 248, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    var(--shadow-warm);
}


/* --- 6. Smooth Section Transitions ---
   Gradiente suave entre seções com cores diferentes. */

.section-fade-bottom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--bg-alt));
  pointer-events: none;
}

.section-fade-bottom-dark::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--bg-dark));
  pointer-events: none;
}


/* --- 7. Eyebrow Tag (Label Premium) ---
   Micro pill badge acima de headings. */

.eyebrow-tag {
  display: inline-block;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: rgba(0, 137, 148, 0.08);
  color: var(--primary);
}

.eyebrow-tag-accent {
  background: rgba(232, 134, 12, 0.08);
  color: var(--accent-dark);
}

.eyebrow-tag-dark {
  background: rgba(245, 237, 227, 0.10);
  color: var(--text-on-dark);
}


/* --- 8. Focus Visible (Acessibilidade) ---
   Ring visível para navegação por teclado.
   Usa :focus-visible para não atrapalhar click/tap. */

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Variante para fundos escuros */
.section-dark :focus-visible,
[data-theme="dark"] :focus-visible {
  outline-color: var(--secondary);
}


/* --- 9. Grain/Noise Texture Overlay ---
   Textura sutil para quebrar a "planicidade digital".
   Usa pseudo-element fixo, pointer-events: none. */

.grain-overlay::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}


/* --- 10. Tabular Numbers ---
   Para dados, preços, estatísticas — evita layout shift. */

.tabular-nums {
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   Reduced Motion
   TUDO acima respeita prefers-reduced-motion.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal-stagger,
  .scroll-reveal-blur {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .btn-tactile,
  .btn-tactile-cta,
  .card-elevated,
  .card-elevated-teal {
    transition: none;
  }

  .btn-tactile:hover,
  .btn-tactile-cta:hover,
  .card-elevated:hover,
  .card-elevated-teal:hover {
    transform: none;
  }
}


/* ============================================================
   Design System v5 — Multi-Vertical Components
   Adicionados para site multi-pagina (abril 2026).
   Ver research/design-system-v5.md para especificacao completa.
   ============================================================ */

/* --- Esther Perel Editorial BG Tokens ---
   Tokens adicionais para alternancia rica de fundos muted,
   inspirados em estherperel.com. Usar moderadamente — default
   de secoes continua sendo --bg / --bg-alt. Os editorial bolds
   devem aparecer no maximo 1x por pagina como quebra de ritmo. */

:root {
  --bg-warm-beige: #E7E0D7;   /* Warm beige — testimonials, editorial */
  --bg-cool: #F2F5FA;          /* Cool light — alternancia neutra */
  --bg-cool-soft: #D9DFE7;     /* Cool gray soft — separadores */
  --bg-warm-light: #CDC3B6;    /* Warm deep — citacoes, destaque editorial */

  /* Editorial bolds — max 1 secao por pagina */
  --bg-editorial-rust: #AC524D;
  --bg-editorial-olive: #697755;
  --bg-editorial-steel: #6C7B88;
  --bg-editorial-purple: #5E58A4;
}


/* --- Persona Router (Nav Dropdown) ---
   Dropdown "Programas" no menu com 2 grupos: Para Familias / Para Educadores.
   Uso: homepage + paginas institucionais. Nunca em LPs.
   Toggle via click (desktop + mobile). */

.nav-dropdown.hidden { display: none; }

.nav-dropdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg);
  border-radius: 0.75rem;
  box-shadow: 0 20px 50px -15px rgba(0, 137, 148, 0.25), 0 8px 20px -8px rgba(0, 0, 0, 0.08);
  min-width: 460px;
  max-width: 560px;
  border: 1px solid rgba(224, 216, 206, 0.4);
}

.nav-dropdown-group--secondary {
  border-left: 1px solid var(--bg-alt);
  padding-left: 2rem;
}

.nav-dropdown-label {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin-bottom: 0.75rem;
  display: block;
}

.nav-dropdown-item {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  transition: background var(--duration-normal) var(--ease-premium);
}

.nav-dropdown-item:hover {
  background: var(--bg-alt);
}

.nav-dropdown-title {
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text);
  display: block;
}

.nav-dropdown-desc {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.8125rem;
  color: var(--text-light);
  line-height: 1.4;
  display: block;
  margin-top: 0.125rem;
}

@media (max-width: 767px) {
  .nav-dropdown {
    grid-template-columns: 1fr;
    min-width: unset;
    box-shadow: none;
    padding: 0.75rem 1rem;
  }
  .nav-dropdown-group--secondary {
    border-left: none;
    border-top: 1px solid var(--bg-alt);
    padding-left: 0;
    padding-top: 1rem;
  }
}


/* --- Case Study Card ---
   Narrativa de transformacao com contexto + dados.
   Uso: /escolas/ (B2B), /jornada/, /depoimentos/. */

.case-study-card {
  background: var(--bg);
  border-left: 3px solid var(--primary);
  padding: 1.5rem 1.75rem;
  border-radius: 0 0.5rem 0.5rem 0;
  max-width: 600px;
}

.case-study-meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.case-study-tag {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  background: rgba(0, 137, 148, 0.08);
  padding: 0.1875rem 0.5rem;
  border-radius: 0.25rem;
}

.case-study-location {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.8125rem;
  color: var(--text-light);
}

.case-study-title {
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--text);
  margin-bottom: 1rem;
}

.case-study-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.case-study-label {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 0.25rem;
}

.case-study-before .case-study-label { color: var(--text-light); }
.case-study-after .case-study-label { color: var(--primary); }

.case-study-body p {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
}

.case-study-quote {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--text);
  border-top: 1px solid var(--bg-alt);
  padding-top: 0.75rem;
  line-height: 1.6;
}

.case-study-quote cite {
  font-family: 'Source Sans 3', sans-serif;
  font-style: normal;
  font-size: 0.875rem;
  color: var(--text-light);
  display: block;
  margin-top: 0.25rem;
}

@media (max-width: 767px) {
  .case-study-body {
    grid-template-columns: 1fr;
  }
}

/* Variante B2B para /escolas/ */
.case-study-card--b2b {
  max-width: 720px;
}

.case-study-card--b2b .case-study-tag {
  background: rgba(232, 134, 12, 0.10);
  color: var(--accent-dark);
}


/* --- Process Timeline ---
   3-4 passos com connector lines, vertical no mobile.
   Uso: /escolas/, /formacao/, /jornada/, homepage "Como trabalhamos". */

.process-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  max-width: 960px;
  margin: 0 auto;
}

.process-step {
  flex: 1;
  text-align: center;
  padding: 0 0.75rem;
}

.process-step-number {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--text-on-dark);
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
}

.process-step-title {
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 0.375rem;
}

.process-step-desc {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.9375rem;
  color: var(--text-light);
  line-height: 1.5;
  max-width: 200px;
  margin: 0 auto;
}

.process-connector {
  width: 3rem;
  height: 2px;
  background: var(--bg-alt);
  flex-shrink: 0;
  margin-top: 1.25rem;
}

/* Variante sobre fundo escuro */
.bg-dark .process-step-number {
  background: var(--accent);
  color: var(--text);
}
.bg-dark .process-step-title { color: var(--text-on-dark); }
.bg-dark .process-step-desc { color: rgba(245, 237, 227, 0.7); }
.bg-dark .process-connector { background: rgba(245, 237, 227, 0.2); }

@media (max-width: 767px) {
  .process-timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .process-step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    text-align: left;
    padding: 0;
  }
  .process-step-number {
    margin: 0;
    flex-shrink: 0;
  }
  .process-step-desc {
    max-width: none;
  }
  .process-connector {
    width: 2px;
    height: 1.5rem;
    margin-left: 1.25rem;
    margin-top: 0;
  }
}


/* --- Certification Badge ---
   Credencial academica, NAO badge e-commerce.
   Uso: /formacao/ (3 niveis progressivos). */

.cert-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cert-badge-ring {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 2px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cert-badge-level {
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--primary);
}

.cert-badge-label {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  display: block;
}

.cert-badge-name {
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  display: block;
}

/* Nivel II — teal + ambar */
.cert-badge--nivel-2 .cert-badge-ring {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--primary);
}
.cert-badge--nivel-2 .cert-badge-level { color: var(--accent); }

/* Nivel III — ambar destaque */
.cert-badge--nivel-3 .cert-badge-ring {
  border-color: var(--accent);
  background: rgba(232, 134, 12, 0.06);
}
.cert-badge--nivel-3 .cert-badge-level { color: var(--accent-dark); }

/* Variante display (grande, para secao destaque) */
.cert-badge--display {
  flex-direction: column;
  text-align: center;
  gap: 0.5rem;
}

.cert-badge--display .cert-badge-ring {
  width: 5rem;
  height: 5rem;
}

.cert-badge--display .cert-badge-level {
  font-size: 1.75rem;
}


/* --- Team Culture Block ---
   Pilares de cultura/diferencial.
   Primeiro pilar ocupa 2 colunas (assimetria intencional).
   Uso: /trabalhe-conosco/, /sobre/. */

.culture-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.culture-pillar:first-child {
  grid-column: 1 / -1;
  max-width: 640px;
}

.culture-pillar {
  padding: 1.25rem 1.5rem;
  border-top: 2px solid var(--primary);
}

.culture-pillar-title {
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--text);
  margin-bottom: 0.375rem;
}

.culture-pillar-desc {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.9375rem;
  color: var(--text-light);
  line-height: 1.5;
}

@media (max-width: 767px) {
  .culture-block {
    grid-template-columns: 1fr;
  }
  .culture-pillar:first-child {
    grid-column: auto;
  }
}


/* --- Qualified Form (B2B) ---
   Formulario B2B com campos de qualificacao (cargo, tamanho).
   Default: fundo escuro. Variante --light para fundo claro.
   Uso: /escolas/ (sec. CTA final), /contato/. */

.qualified-form {
  max-width: 480px;
  margin: 0 auto;
}

.qualified-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.qualified-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.qualified-form-field label {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-on-dark);
}

.qualified-form-field input,
.qualified-form-field select {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid rgba(245, 237, 227, 0.3);
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-on-dark);
  transition: border-color var(--duration-normal) var(--ease-premium);
}

.qualified-form-field input:focus,
.qualified-form-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(232, 134, 12, 0.15);
}

.qualified-form-submit {
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: var(--accent);
  color: #fff;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition:
    background var(--duration-normal) var(--ease-premium),
    transform 100ms;
  margin-top: 0.5rem;
}

.qualified-form-submit:hover {
  background: var(--accent-dark);
}

.qualified-form-submit:active {
  transform: translateY(1px);
}

.qualified-form-note {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.8125rem;
  color: rgba(245, 237, 227, 0.6);
  text-align: center;
  margin-top: 0.5rem;
}

/* Variante para fundo claro */
.qualified-form--light .qualified-form-field label {
  color: var(--text);
}
.qualified-form--light .qualified-form-field input,
.qualified-form--light .qualified-form-field select {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border);
}
.qualified-form--light .qualified-form-note {
  color: var(--text-light);
}

@media (max-width: 767px) {
  .qualified-form-row {
    grid-template-columns: 1fr;
  }
}


/* --- Media Bar (Logos de Midia) ---
   Componente repetido no site para prova de midia.
   Uso: todas as paginas (homepage, LPs, B2B, institucional). */

.media-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 1rem 0;
}

/* Assets ja vem em cinza monocromatico (~#8C8C8C). Sem filter em fundo claro. */
.media-bar img {
  height: 2rem;
  width: auto;
  user-select: none;
  transition: opacity var(--duration-normal) var(--ease-premium);
}

.media-bar img:hover {
  opacity: 0.8;
}

/* Variante sobre fundo escuro: invert clareia o cinza para off-white */
.media-bar--dark img {
  filter: invert(1) brightness(1.05);
  opacity: 0.85;
}

.media-bar--dark img:hover {
  opacity: 1;
}

.media-bar-label {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-light);
  width: 100%;
  text-align: center;
  margin-bottom: 0.25rem;
}


/* --- Diagnostic Checklist ---
   Lista visual tipo checkbox. Itens .is-checked preenchem (o que PIVA resolve).
   Uso: /escolas/ (sec. Dor / Diagnostico). */

.diag-checklist {
  list-style: none;
  padding: 0;
  max-width: 600px;
}

.diag-checklist li {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.5;
  padding: 0.625rem 0 0.625rem 2rem;
  position: relative;
  border-bottom: 1px solid var(--bg-alt);
}

.diag-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.8125rem;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid var(--primary);
  border-radius: 0.25rem;
}

.diag-checklist li.is-checked::before {
  background: var(--primary);
  border-color: var(--primary);
}

.diag-checklist li.is-checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.875rem;
  width: 0.5rem;
  height: 0.3125rem;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}


/* --- Card Depoimento Variants (v5 delta) ---
   Variantes para contextos B2B, professor, video. */

/* B2B: depoimento de diretora */
.card-depoimento--b2b .depoimento-meta {
  display: flex;
  flex-direction: column;
}
.card-depoimento--b2b .depoimento-cargo {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.8125rem;
  color: var(--text-light);
}
.card-depoimento--b2b .depoimento-escola {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--primary);
}

/* Professor: depoimento com resultado no aluno */
.card-depoimento--professor .depoimento-resultado {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.875rem;
  color: var(--primary-dark);
  background: rgba(0, 137, 148, 0.06);
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  margin-top: 0.5rem;
  display: inline-block;
}

/* Video: thumbnail com play */
.card-depoimento--video .depoimento-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 0.75rem;
  cursor: pointer;
}
.card-depoimento--video .depoimento-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-depoimento--video .depoimento-play::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.5rem 0 0.5rem 0.875rem;
  border-color: transparent transparent transparent #fff;
  margin-left: 0.125rem;
}


/* --- Brand Trio Icon Container ---
   Para exibicao dos icones ponte/bussola/lupa como assinatura da marca.
   Uso: bio Bruno (sutil), secao metodo (destaque), rodape (opcional). */

.brand-trio {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-trio-icon {
  width: 2rem;
  height: 2rem;
  color: var(--primary);
  opacity: 0.7;
  transition: opacity var(--duration-normal) var(--ease-premium);
}

.brand-trio:hover .brand-trio-icon {
  opacity: 1;
}

.brand-trio-icon--accent {
  color: var(--accent);
}

.brand-trio--display .brand-trio-icon {
  width: 3rem;
  height: 3rem;
  opacity: 0.9;
}


/* ============================================================
   Design System v5.1 — Notion-Inspired Refinements
   Added: 2026-04-20
   Ver research/design-system-v5.md secao 7 para racional completo.
   Objetivo: disciplina tipografica, whisper borders, multi-layer
   shadows, pill unificada. Sem substituir tokens v5 existentes.
   ============================================================ */

:root {
  /* Whisper borders — sutis e translucidos (Notion pattern) */
  --border-whisper: rgba(28, 28, 28, 0.08);
  --border-whisper-strong: rgba(28, 28, 28, 0.12);
  --border-whisper-dark: rgba(245, 237, 227, 0.10);
  --border-whisper-dark-strong: rgba(245, 237, 227, 0.18);

  /* Multi-layer shadow stacks (substituem shadow unica em cards) */
  --shadow-soft:
    0 4px 18px rgba(28, 28, 28, 0.04),
    0 2px 7.85px rgba(28, 28, 28, 0.027),
    0 0.8px 2.93px rgba(28, 28, 28, 0.02),
    0 0.18px 1.04px rgba(28, 28, 28, 0.01);

  --shadow-deep:
    0 1px 3px rgba(28, 28, 28, 0.01),
    0 3px 7px rgba(28, 28, 28, 0.02),
    0 7px 15px rgba(28, 28, 28, 0.02),
    0 14px 28px rgba(28, 28, 28, 0.04),
    0 23px 52px rgba(28, 28, 28, 0.05);

  /* Tracking por escala tipografica (Lora + Source Sans 3) */
  --tracking-hero: -0.02em;
  --tracking-h2: -0.015em;
  --tracking-h3: -0.01em;
  --tracking-body: 0;
  --tracking-caption: 0.015em;  /* micro-tracking positivo em 12-13px */
}


/* ============================================================
   Section Spacing Scale (v5.2)
   Sistema de buckets para padding de seções editoriais.
   3 buckets: default | dense | hero. Y muda por @media.
   Containers: 1200 (editorial) / 1280 (strip) / 1440 (full).
   ============================================================ */

:root {
  /* Bucket: default — seção editorial padrão */
  --section-pad-y-default: 6rem;
  /* Bucket: dense — strip / marquee / register editorial */
  --section-pad-y-dense: 4rem;
  /* Bucket: hero — bookends top/bottom da página */
  --section-pad-y-hero-top: 7rem;
  --section-pad-y-hero-bottom: 4rem;

  /* Padding horizontal — todas as seções */
  --section-pad-x: 1.25rem;

  /* Container max-widths */
  --section-max-editorial: 1200px;
  --section-max-strip: 1280px;
  --section-max-full: 1440px;

  /* Gap entre heading e grid/list/inner */
  --section-content-gap: 3rem;
}

@media (min-width: 768px) {
  :root {
    --section-pad-y-default: 8rem;
    --section-pad-y-dense: 5rem;
    --section-pad-y-hero-top: 9rem;
    --section-pad-y-hero-bottom: 6rem;
    --section-pad-x: 3rem;
    --section-content-gap: 3.5rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --section-pad-x: 5rem;
  }
}


/* --- 1. Tracking Utilities ---
   Classes explicitas em vez de tracking-tight generico do Tailwind.
   Aplicar em headings para precisao por escala. */

.track-hero    { letter-spacing: var(--tracking-hero); }
.track-h2      { letter-spacing: var(--tracking-h2); }
.track-h3      { letter-spacing: var(--tracking-h3); }
.track-body    { letter-spacing: var(--tracking-body); }
.track-caption { letter-spacing: var(--tracking-caption); }


/* --- 2. Body Medium (peso 500 UI) ---
   Novo peso intermediario para nav, labels, meta.
   400 (read) / 500 (interact) / 600 (emphasize) / 700 (announce). */

.text-ui-medium { font-weight: 500; }


/* --- 3. Pill Component (unificado) ---
   Substitui progressivamente: .eyebrow-tag, .case-study-tag,
   .cert-badge-label quando aplicadas como pills visuais.
   Legado permanece — migracao opcional. */

.pill {
  display: inline-block;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background: rgba(0, 137, 148, 0.08);
  color: var(--primary);
  border: 1px solid rgba(0, 137, 148, 0.12);
}

.pill--accent {
  background: rgba(232, 134, 12, 0.08);
  color: var(--accent-dark);
  border-color: rgba(232, 134, 12, 0.18);
}

.pill--neutral {
  background: rgba(28, 28, 28, 0.04);
  color: var(--text-light);
  border-color: var(--border-whisper);
}

.pill--dark {
  background: rgba(245, 237, 227, 0.10);
  color: var(--text-on-dark);
  border-color: var(--border-whisper-dark-strong);
}

.pill--size-sm {
  font-size: 0.6875rem;
  padding: 0.25rem 0.625rem;
}

.pill--size-lg {
  font-size: 0.8125rem;
  padding: 0.5rem 1rem;
}


/* --- 4. Card Whisper (Notion-style editorial) ---
   Alternativa leve a .card-elevated. Whisper border + shadow
   multi-layer. Para blog, secoes institucionais, depoimentos
   editoriais. Depth felt, not seen. */

.card-whisper {
  background: var(--bg);
  border: 1px solid var(--border-whisper);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-soft);
  transition:
    transform var(--duration-normal) var(--ease-premium),
    box-shadow var(--duration-normal) var(--ease-premium);
}

.card-whisper:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-deep);
}

/* Variante sobre fundo escuro */
.card-whisper--dark {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border-whisper-dark);
  box-shadow: none;
}

.card-whisper--dark:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-whisper-dark-strong);
  transform: translateY(-2px);
}


/* --- 5. Reduced Motion (v5.1 additions) --- */

@media (prefers-reduced-motion: reduce) {
  .card-whisper,
  .card-whisper--dark {
    transition: none;
  }
  .card-whisper:hover,
  .card-whisper--dark:hover {
    transform: none;
  }
}