/* ============================================================================
   TEACHER UP · ENHANCEMENTS V2
   Componentes novos + micro-interações + refinos que enhancements.css não cobriu.
   Ordem: reset < tokens < base < layout < components < utilities < responsive <
          enhancements < enhancements-v2 (última = ganha).
   ============================================================================ */

@layer enhancements-v2;

@layer enhancements-v2 {

/* ============================================================================
   0.  TOKENS EXTRAS V2 — timing, curves, mesh, grids
   ============================================================================ */
:root {
  --mesh-01: radial-gradient(at 12% 8%, var(--brand-soft) 0px, transparent 45%),
             radial-gradient(at 88% 14%, var(--violet-100) 0px, transparent 45%),
             radial-gradient(at 40% 92%, var(--sky-100) 0px, transparent 45%),
             radial-gradient(at 82% 82%, var(--emerald-100) 0px, transparent 40%);
  --mesh-02: radial-gradient(at 20% 20%, #fce7f3 0px, transparent 40%),
             radial-gradient(at 80% 80%, #dbeafe 0px, transparent 40%),
             radial-gradient(at 50% 50%, #ede9fe 0px, transparent 55%);
  --mesh-dark: radial-gradient(at 12% 8%, rgba(99,102,241,.20) 0px, transparent 45%),
               radial-gradient(at 88% 14%, rgba(139,92,246,.15) 0px, transparent 45%),
               radial-gradient(at 40% 92%, rgba(14,165,233,.18) 0px, transparent 45%),
               radial-gradient(at 82% 82%, rgba(16,185,129,.10) 0px, transparent 40%);
  --noise:   url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grid-lines: linear-gradient(0deg, var(--line-soft) 1px, transparent 1px),
                linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  --dots-fine:  radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0);
  --confetti:   conic-gradient(from 0deg, #f59e0b, #10b981, #4f46e5, #8b5cf6, #ef4444, #f59e0b);

  --spring:     380ms cubic-bezier(0.16, 1.36, 0.44, 1);
  --swish:      460ms cubic-bezier(0.34, 1.5, 0.64, 1);
  --squish:     540ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --ease-out-quart: 400ms cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-quart:  350ms cubic-bezier(0.5, 0, 0.75, 0);

  --stroke-md: 2px;
  --stroke-lg: 3px;
  --border-brand-strong: var(--stroke-md) solid var(--brand);

  --brand-glow-inner: inset 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent);
  --card-hover-shadow: 0 20px 40px -12px rgba(15,23,42,0.15), 0 8px 16px -8px rgba(15,23,42,0.1);
  --card-hover-shadow-brand: 0 20px 40px -12px var(--accent-glow), 0 8px 16px -8px rgba(79,70,229,0.15);
}
[data-theme="dark"] {
  --grid-lines: linear-gradient(0deg, color-mix(in srgb, var(--line) 40%, transparent) 1px, transparent 1px),
                linear-gradient(90deg, color-mix(in srgb, var(--line) 40%, transparent) 1px, transparent 1px);
  --dots-fine:  radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0);
}

/* ============================================================================
   1.  MESH GRADIENT BACKGROUND
   ============================================================================ */
.mesh-bg { background-image: var(--mesh-01); background-color: var(--bg); }
.mesh-bg-warm { background-image: var(--mesh-02); background-color: var(--bg); }
.mesh-hero { position: relative; }
.mesh-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--mesh-01);
  opacity: 0.6;
  z-index: -1;
  pointer-events: none;
}
[data-theme="dark"] .mesh-hero::before { background: var(--mesh-dark); opacity: 1; }
.noise-overlay { position: relative; }
.noise-overlay::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--noise);
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none; z-index: 1;
}
.grid-bg {
  background-image: var(--grid-lines);
  background-size: 32px 32px;
  background-position: center;
}
.grid-bg-fade {
  position: relative;
}
.grid-bg-fade::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--grid-lines);
  background-size: 40px 40px;
  -webkit-mask: radial-gradient(ellipse at center, #000 0%, transparent 75%);
  mask: radial-gradient(ellipse at center, #000 0%, transparent 75%);
  pointer-events: none; z-index: 0;
}
.grid-bg-fade > * { position: relative; z-index: 1; }
.dots-bg-fine {
  background-image: var(--dots-fine);
  background-size: 20px 20px;
}

/* ============================================================================
   2.  ANIMAÇÕES SCROLL-TRIGGERED (usar com data-reveal)
   ============================================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-emphatic) var(--ease), transform var(--t-emphatic) var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="left"]  { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px);  }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-visible { transform: scale(1); }
[data-reveal="blur"] { filter: blur(6px); }
[data-reveal="blur"].is-visible { filter: blur(0); }
[data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal-delay="300"] { transition-delay: 300ms; }
[data-reveal-delay="400"] { transition-delay: 400ms; }
[data-reveal-delay="500"] { transition-delay: 500ms; }
[data-reveal-delay="600"] { transition-delay: 600ms; }

/* ============================================================================
   3.  TOGGLE SWITCH (para admin — habilitar/desabilitar features)
   ============================================================================ */
.switch {
  --sw-w: 46px;
  --sw-h: 26px;
  --sw-pad: 3px;
  --sw-thumb: calc(var(--sw-h) - var(--sw-pad) * 2);
  position: relative; display: inline-block;
  width: var(--sw-w); height: var(--sw-h);
  flex-shrink: 0;
}
.switch input {
  position: absolute; inset: 0;
  opacity: 0; width: 100%; height: 100%;
  cursor: pointer; z-index: 2;
  margin: 0;
}
.switch__slider {
  position: absolute; inset: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.switch__slider::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--sw-pad); inset-block-start: var(--sw-pad);
  width: var(--sw-thumb); height: var(--sw-thumb);
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--spring);
}
.switch input:checked + .switch__slider {
  background: var(--brand);
  border-color: var(--brand);
}
.switch input:checked + .switch__slider::before {
  transform: translateX(calc(var(--sw-w) - var(--sw-thumb) - var(--sw-pad) * 2));
}
.switch input:focus-visible + .switch__slider {
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.switch input:disabled + .switch__slider { opacity: 0.5; cursor: not-allowed; }
.switch-field {
  display: flex; align-items: center; gap: var(--fib-13);
  padding: var(--fib-13);
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.switch-field:hover { background: var(--surface-2); }
.switch-field__body { flex: 1; }
.switch-field__body strong { display: block; color: var(--ink); font-weight: 600; }
.switch-field__body span { color: var(--ink-soft); font-size: var(--text-sm); }

/* ============================================================================
   4.  CUSTOM CHECKBOX / RADIO
   ============================================================================ */
.checkbox-custom {
  display: inline-flex; align-items: center; gap: var(--fib-8);
  cursor: pointer; font-size: var(--text-sm); color: var(--ink);
  min-height: 32px;
}
.checkbox-custom input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox-custom .box {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  background: var(--surface);
  border: var(--stroke-md) solid var(--line);
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.checkbox-custom .box::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  color: #fff; font-size: 0.75em;
  opacity: 0; transform: scale(0);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--spring);
}
.checkbox-custom input:checked + .box {
  background: var(--brand); border-color: var(--brand);
}
.checkbox-custom input:checked + .box::before { opacity: 1; transform: scale(1); }
.checkbox-custom:hover .box { border-color: var(--brand); }
.checkbox-custom input:focus-visible + .box { box-shadow: 0 0 0 3px var(--brand-soft); }

.radio-custom {
  display: inline-flex; align-items: center; gap: var(--fib-8);
  cursor: pointer; font-size: var(--text-sm); color: var(--ink);
  min-height: 32px;
}
.radio-custom input { position: absolute; opacity: 0; pointer-events: none; }
.radio-custom .dot {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  background: var(--surface);
  border: var(--stroke-md) solid var(--line);
  border-radius: 50%;
  transition: border-color var(--t-fast) var(--ease);
}
.radio-custom .dot::before {
  content: '';
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand);
  transform: scale(0);
  transition: transform var(--t-fast) var(--spring);
}
.radio-custom input:checked + .dot { border-color: var(--brand); }
.radio-custom input:checked + .dot::before { transform: scale(1); }
.radio-custom:hover .dot { border-color: var(--brand); }
.radio-custom input:focus-visible + .dot { box-shadow: 0 0 0 3px var(--brand-soft); }

/* Radio group como cards (ex: escolher duração de mentoria) */
.radio-group {
  display: grid; gap: var(--fib-13);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.radio-card {
  position: relative;
  padding: var(--fib-21);
  background: var(--surface);
  border: var(--stroke-md) solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
  text-align: center;
}
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card__title { font-weight: 700; color: var(--ink); }
.radio-card__desc { color: var(--ink-soft); font-size: var(--text-sm); margin-block-start: var(--fib-3); }
.radio-card:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); }
.radio-card:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: var(--brand-glow-inner);
}
.radio-card:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--brand-soft), var(--brand-glow-inner);
}
.radio-card::before {
  content: '';
  position: absolute;
  inset-block-start: var(--fib-8); inset-inline-end: var(--fib-8);
  width: 18px; height: 18px;
  border: var(--stroke-md) solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.radio-card::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute;
  inset-block-start: var(--fib-8); inset-inline-end: var(--fib-8);
  width: 18px; height: 18px;
  display: grid; place-items: center;
  color: var(--brand); font-size: 0.65em;
  opacity: 0; transform: scale(0);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--spring);
}
.radio-card:has(input:checked)::before {
  border-color: var(--brand); background: var(--brand-soft);
}
.radio-card:has(input:checked)::after { opacity: 1; transform: scale(1); }

/* ============================================================================
   5.  RANGE SLIDER PREMIUM
   ============================================================================ */
input[type="range"].range-custom {
  -webkit-appearance: none;
  appearance: none;
  width: 100%; height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  margin: var(--fib-8) 0;
}
input[type="range"].range-custom::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  background: var(--brand);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-md), 0 0 0 1px var(--brand);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input[type="range"].range-custom::-webkit-slider-thumb:hover { transform: scale(1.2); }
input[type="range"].range-custom::-webkit-slider-thumb:active {
  box-shadow: var(--shadow-md), 0 0 0 6px var(--brand-soft);
}
input[type="range"].range-custom::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--brand);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
input[type="range"].range-custom::-moz-range-track {
  height: 6px; background: var(--surface-2); border-radius: 999px;
}

/* ============================================================================
   6.  SELECT CUSTOM (com caret decorativo)
   ============================================================================ */
.select-wrap {
  position: relative;
  display: inline-flex; align-items: center; width: 100%;
}
.select-wrap select {
  -webkit-appearance: none;
  appearance: none;
  padding: var(--fib-13);
  padding-inline-end: var(--fib-34);
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: var(--text-base);
  font-family: inherit;
  min-height: 48px;
  width: 100%;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.select-wrap select:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.select-wrap select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.select-wrap::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute;
  inset-inline-end: var(--fib-13);
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--brand); pointer-events: none;
  font-size: 0.8em;
  transition: transform var(--t-fast) var(--ease);
}
.select-wrap:has(select:focus)::after { transform: translateY(-50%) rotate(180deg); }

/* ============================================================================
   7.  FILE UPLOAD DROPZONE
   ============================================================================ */
.dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--fib-13);
  padding: var(--fib-55) var(--fib-21);
  background: var(--surface);
  border: var(--stroke-md) dashed var(--line);
  border-radius: var(--r-lg);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
  min-height: 200px;
}
.dropzone:hover, .dropzone.is-over {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.dropzone input[type="file"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
}
.dropzone__icon {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  background: var(--brand-soft); color: var(--brand);
  border-radius: 50%;
  font-size: 1.6rem;
  transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.dropzone:hover .dropzone__icon,
.dropzone.is-over .dropzone__icon {
  background: var(--brand); color: #fff;
  transform: scale(1.1);
}
.dropzone__hint { color: var(--ink-soft); font-size: var(--text-sm); }
.dropzone__hint strong { color: var(--brand); }

/* ============================================================================
   8.  TOOLTIP puro CSS (data-tooltip + posição)
   ============================================================================ */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  inset-block-end: calc(100% + 8px);
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--slate-900);
  color: #fff;
  padding: var(--fib-5) var(--fib-13);
  border-radius: var(--r-sm);
  font-size: var(--text-caption); font-weight: 500;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  z-index: 100;
  box-shadow: var(--shadow-md);
}
[data-tooltip]::after {
  content: '';
  position: absolute;
  inset-block-end: calc(100% + 2px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-block-start-color: var(--slate-900);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
  z-index: 100;
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after { opacity: 1; }

[data-tooltip-pos="bottom"]::before {
  inset-block-end: auto; inset-block-start: calc(100% + 8px);
}
[data-tooltip-pos="bottom"]::after {
  inset-block-end: auto; inset-block-start: calc(100% + 2px);
  border-block-start-color: transparent;
  border-block-end-color: var(--slate-900);
}
[data-tooltip-pos="left"]::before {
  inset-block-end: 50%; inset-block-start: 50%;
  inset-inline-start: auto; inset-inline-end: calc(100% + 8px);
  transform: translateY(-50%) translateX(4px);
}
[data-tooltip-pos="left"]:hover::before { transform: translateY(-50%); }

/* ============================================================================
   9.  POPOVER (usar <details> como controle, JS opcional)
   ============================================================================ */
.popover { position: relative; display: inline-block; }
.popover > summary { cursor: pointer; list-style: none; }
.popover > summary::-webkit-details-marker { display: none; }
.popover__panel {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 240px;
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--fib-8);
  z-index: 50;
  animation: popIn .18s var(--spring) both;
}
@keyframes popIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.popover__item {
  display: flex; align-items: center; gap: var(--fib-8);
  padding: var(--fib-8) var(--fib-13);
  border-radius: var(--r-sm);
  color: var(--ink); font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
  text-decoration: none;
}
.popover__item:hover { background: var(--surface-2); }
.popover__item i { color: var(--ink-soft); width: 16px; text-align: center; }
.popover__sep {
  height: 1px; background: var(--line-soft);
  margin: var(--fib-5) 0;
}

/* ============================================================================
   10.  DROPDOWN MENU (variação do popover, mais compacto)
   ============================================================================ */
.menu {
  display: flex; flex-direction: column;
  padding: var(--fib-5);
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 200px;
}
.menu__group {
  display: flex; flex-direction: column;
  padding: var(--fib-3) 0;
}
.menu__group + .menu__group { border-block-start: var(--fib-1) solid var(--line-soft); }
.menu__label {
  font-size: 0.7rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  padding: var(--fib-5) var(--fib-8);
}
.menu__item {
  display: flex; align-items: center; gap: var(--fib-8);
  padding: var(--fib-8) var(--fib-13);
  border-radius: var(--r-sm);
  color: var(--ink); font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
  text-decoration: none; text-align: start; border: none; background: transparent;
  width: 100%; min-height: 36px;
}
.menu__item:hover { background: var(--surface-2); }
.menu__item i { color: var(--ink-soft); width: 16px; text-align: center; }
.menu__item--danger { color: var(--danger); }
.menu__item--danger i { color: var(--danger); }
.menu__item[aria-selected="true"] {
  background: var(--brand-soft); color: var(--brand);
}

/* ============================================================================
   11.  BADGE COM CONTADOR (notificação)
   ============================================================================ */
.badge-count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  background: var(--danger);
  color: #fff;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  border: 2px solid var(--surface);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}
.icon-btn {
  position: relative;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: transparent; color: var(--ink);
  cursor: pointer; border: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--brand); }
.icon-btn .badge-count {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
}

/* ============================================================================
   12.  TAB CONTENT + PANEL
   ============================================================================ */
.tabpanel { display: none; }
.tabpanel.is-active { display: block; animation: fadeInUp .3s var(--t-smoothout); }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   13.  STEPPER (checkout, onboarding)
   ============================================================================ */
.stepper {
  display: flex; align-items: center;
  gap: var(--fib-8);
  padding: var(--fib-13);
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-lg);
  overflow-x: auto;
}
.stepper__step {
  display: flex; align-items: center; gap: var(--fib-8);
  flex-shrink: 0;
  color: var(--ink-soft);
  font-size: var(--text-sm); font-weight: 600;
}
.stepper__step .num {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  background: var(--surface-2);
  border-radius: 50%;
  font-size: var(--text-caption); font-weight: 700;
  color: var(--ink-soft);
  border: var(--fib-1) solid var(--line);
  transition: all var(--t-base) var(--ease);
}
.stepper__step.is-active { color: var(--brand); }
.stepper__step.is-active .num {
  background: var(--brand); color: #fff; border-color: var(--brand);
  box-shadow: var(--glow-brand);
}
.stepper__step.is-done { color: var(--ok); }
.stepper__step.is-done .num {
  background: var(--emerald-500); color: #fff; border-color: var(--emerald-500);
}
.stepper__step.is-done .num::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  font-size: 0.75em;
}
.stepper__step.is-done .num::before + * { display: none; }
.stepper__connector {
  flex: 1; height: 2px;
  background: linear-gradient(90deg, currentColor 0%, var(--line) 100%);
  color: var(--line);
  min-width: 20px;
}

/* ============================================================================
   14.  PAGINATION
   ============================================================================ */
.pagination {
  display: inline-flex; align-items: center; gap: var(--fib-3);
  padding: var(--fib-5);
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
}
.pagination__item {
  display: grid; place-items: center;
  min-width: 36px; height: 36px;
  padding: 0 var(--fib-8);
  border-radius: var(--r-sm);
  background: transparent; color: var(--ink);
  font-weight: 600; font-size: var(--text-sm);
  cursor: pointer; border: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pagination__item:hover { background: var(--surface-2); }
.pagination__item.is-active {
  background: var(--brand); color: #fff;
}
.pagination__item:disabled { opacity: 0.4; pointer-events: none; }

/* ============================================================================
   15.  CAROUSEL BASE
   ============================================================================ */
.carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
}
.carousel__track {
  display: flex;
  transition: transform var(--t-slow) var(--ease-out-quart);
  will-change: transform;
}
.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}
.carousel__nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: var(--fib-1) solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  z-index: 2;
}
.carousel__nav:hover { background: var(--brand); color: #fff; transform: translateY(-50%) scale(1.05); }
.carousel__nav--prev { inset-inline-start: var(--fib-13); }
.carousel__nav--next { inset-inline-end: var(--fib-13); }
.carousel__dots {
  position: absolute;
  inset-block-end: var(--fib-13);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex; gap: var(--fib-5);
  z-index: 2;
}
.carousel__dot {
  width: 8px; height: 8px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer; border: none;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.carousel__dot.is-active { background: #fff; transform: scale(1.4); }
.carousel--scroll {
  scroll-snap-type: x mandatory;
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel--scroll::-webkit-scrollbar { display: none; }
.carousel--scroll > * { scroll-snap-align: start; }

/* ============================================================================
   16.  TESTIMONIAL CARD PREMIUM
   ============================================================================ */
.testimonial {
  position: relative;
  padding: var(--fib-34);
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testimonial::before {
  content: '“';
  position: absolute;
  inset-block-start: var(--fib-8);
  inset-inline-end: var(--fib-21);
  font-family: 'Poppins', serif;
  font-size: 6rem; line-height: 0.8;
  color: var(--brand-soft);
  pointer-events: none;
  z-index: 0;
}
.testimonial > * { position: relative; z-index: 1; }
.testimonial__stars {
  color: var(--gold-500);
  font-size: var(--text-base);
  margin-block-end: var(--fib-13);
  display: inline-flex; gap: 2px;
}
.testimonial__text {
  color: var(--ink); font-size: var(--text-base);
  line-height: 1.6; margin-block-end: var(--fib-21);
  font-style: italic;
}
.testimonial__author {
  display: flex; align-items: center; gap: var(--fib-13);
}
.testimonial__author .avatar {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: var(--grad-brand); color: #fff;
  border-radius: 50%;
  font-weight: 700; font-size: var(--text-sm);
  box-shadow: var(--shadow-inset);
  font-family: var(--font-display);
}
.testimonial__author strong { color: var(--ink); display: block; }
.testimonial__author span { color: var(--ink-soft); font-size: var(--text-caption); }
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--fib-21);
}

/* ============================================================================
   17.  BLOG CARD (para futuro conteúdo)
   ============================================================================ */
.article-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  text-decoration: none; color: var(--ink);
}
.article-card:hover { transform: translateY(-4px); box-shadow: var(--card-hover-shadow); }
.article-card__cover {
  aspect-ratio: 16/9;
  background: var(--surface-2);
  overflow: hidden;
  position: relative;
}
.article-card__cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out-quart);
}
.article-card:hover .article-card__cover img { transform: scale(1.05); }
.article-card__body {
  padding: var(--fib-21);
  flex: 1;
  display: flex; flex-direction: column; gap: var(--fib-8);
}
.article-card__meta {
  display: flex; gap: var(--fib-13);
  font-size: var(--text-caption);
  color: var(--ink-soft);
}
.article-card__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-lg);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.article-card__excerpt {
  color: var(--ink-soft); font-size: var(--text-sm);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-block-start: var(--fib-13);
  border-block-start: var(--fib-1) solid var(--line-soft);
  margin-block-start: auto;
}

/* ============================================================================
   18.  QUOTE / PULL QUOTE
   ============================================================================ */
.quote {
  position: relative;
  padding: var(--fib-34) var(--fib-34) var(--fib-34) var(--fib-55);
  background: var(--brand-soft);
  border-radius: var(--r-lg);
  color: var(--ink);
  font-size: var(--text-lg);
  line-height: 1.6;
  border-inline-start: 4px solid var(--brand);
}
.quote::before {
  content: '\f10d';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute;
  inset-inline-start: var(--fib-21);
  inset-block-start: var(--fib-21);
  color: var(--brand); font-size: 1.5rem;
  opacity: 0.5;
}
.quote cite {
  display: block;
  margin-block-start: var(--fib-13);
  font-style: normal;
  color: var(--ink-soft);
  font-size: var(--text-sm); font-weight: 600;
}
.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  line-height: 1.3;
  color: var(--ink);
  text-align: center;
  max-width: 30ch; margin-inline: auto;
  padding: var(--fib-34) 0;
  border-block: var(--fib-1) solid var(--line-soft);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.pull-quote::before,
.pull-quote::after {
  content: '';
  display: block;
  width: 40px; height: 4px;
  background: var(--grad-brand);
  border-radius: 999px;
  margin-inline: auto;
}
.pull-quote::before { margin-block-end: var(--fib-21); }
.pull-quote::after  { margin-block-start: var(--fib-21); }

/* ============================================================================
   19.  BENTO GRID (para dashboard admin ou landing)
   ============================================================================ */
.bento {
  display: grid;
  gap: var(--fib-13);
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 120px;
}
.bento__cell {
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--fib-21);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: relative;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.bento__cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.bento__cell--sm-1  { grid-column: span 3;  }
.bento__cell--sm-2  { grid-column: span 4;  }
.bento__cell--sm-3  { grid-column: span 5;  }
.bento__cell--md    { grid-column: span 6;  }
.bento__cell--lg    { grid-column: span 8;  }
.bento__cell--full  { grid-column: span 12; }
.bento__cell--tall  { grid-row: span 2; }
.bento__cell--brand {
  background: var(--grad-brand); color: #fff; border: none;
}
.bento__cell--brand h3, .bento__cell--brand strong { color: #fff; }
.bento__cell--brand p { color: rgba(255,255,255,0.85); }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento__cell--sm-1, .bento__cell--sm-2, .bento__cell--sm-3 { grid-column: span 3; }
  .bento__cell--md, .bento__cell--lg { grid-column: span 6; }
}
@media (max-width: 480px) {
  .bento { grid-template-columns: 1fr; }
  .bento__cell, .bento__cell--sm-1, .bento__cell--sm-2, .bento__cell--sm-3,
  .bento__cell--md, .bento__cell--lg, .bento__cell--full { grid-column: span 1; }
}

/* ============================================================================
   20.  IMAGE GALLERY MASONRY (multi-columns)
   ============================================================================ */
.gallery {
  column-count: 3;
  column-gap: var(--fib-13);
}
.gallery > * {
  break-inside: avoid;
  margin-block-end: var(--fib-13);
  border-radius: var(--r-md);
  overflow: hidden;
  display: block;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.gallery > *:hover { transform: scale(1.02); box-shadow: var(--shadow-md); }
@media (max-width: 900px) { .gallery { column-count: 2; } }
@media (max-width: 480px) { .gallery { column-count: 1; } }

/* ============================================================================
   21.  FIGURE + CAPTION
   ============================================================================ */
figure {
  margin: 0;
  display: flex; flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
}
figure img { display: block; width: 100%; }
figure figcaption {
  padding: var(--fib-13);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-style: italic;
  text-align: center;
  border-block-start: var(--fib-1) solid var(--line);
}

/* ============================================================================
   22.  DEFINITION LIST
   ============================================================================ */
dl.definition {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--fib-8) var(--fib-21);
}
dl.definition dt {
  font-weight: 700; color: var(--ink);
  padding: var(--fib-3) 0;
}
dl.definition dd {
  color: var(--ink-soft);
  padding: var(--fib-3) 0;
}
dl.definition-stack {
  display: flex; flex-direction: column;
  gap: var(--fib-13);
}
dl.definition-stack > div {
  display: flex; justify-content: space-between; gap: var(--fib-13);
  padding-block: var(--fib-8);
  border-block-end: var(--fib-1) dashed var(--line-soft);
}
dl.definition-stack dt { font-weight: 600; color: var(--ink-soft); }
dl.definition-stack dd { color: var(--ink); font-weight: 600; text-align: end; font-variant-numeric: tabular-nums; }

/* ============================================================================
   23.  BREADCRUMB REFINADA
   ============================================================================ */
nav.breadcrumb {
  display: inline-flex; align-items: center; gap: var(--fib-8);
  padding: var(--fib-5) var(--fib-13);
  background: var(--surface);
  border: var(--fib-1) solid var(--line-soft);
  border-radius: var(--r-pill);
  font-size: var(--text-caption);
  box-shadow: var(--shadow-xs);
  color: var(--ink-soft);
}
nav.breadcrumb ol {
  display: flex; align-items: center; gap: var(--fib-5);
  list-style: none; margin: 0; padding: 0;
}
nav.breadcrumb li {
  display: inline-flex; align-items: center; gap: var(--fib-5);
}
nav.breadcrumb li + li::before {
  content: '\f054';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  color: var(--muted); font-size: 0.7em;
}
nav.breadcrumb a { color: var(--ink-soft); font-weight: 500; text-decoration: none; }
nav.breadcrumb a:hover { color: var(--brand); }
nav.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ============================================================================
   24.  FLOATING ACTION BUTTON (FAB)
   ============================================================================ */
.fab {
  position: fixed;
  inset-inline-end: var(--fib-21);
  inset-block-end: var(--fib-21);
  display: grid; place-items: center;
  width: 56px; height: 56px;
  background: var(--grad-brand); color: #fff;
  border-radius: 50%;
  border: none; cursor: pointer;
  box-shadow: var(--glow-brand-lg);
  z-index: var(--z-header);
  font-size: var(--text-h3);
  transition: transform var(--t-base) var(--spring), box-shadow var(--t-base) var(--ease);
}
.fab:hover { transform: scale(1.1) rotate(6deg); box-shadow: 0 20px 40px -8px var(--accent-glow); }
.fab:active { transform: scale(0.96); }
.fab-menu {
  position: fixed;
  inset-inline-end: var(--fib-21);
  inset-block-end: calc(var(--fib-21) + 70px);
  display: flex; flex-direction: column; gap: var(--fib-8);
  z-index: var(--z-header);
}
.fab-menu__item {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: var(--surface); color: var(--brand);
  border: var(--fib-1) solid var(--line);
  border-radius: 50%;
  cursor: pointer; box-shadow: var(--shadow-md);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.fab-menu__item:hover { transform: scale(1.1); background: var(--brand-soft); }

/* ============================================================================
   25.  STICKY FOOTER CTA (mobile)
   ============================================================================ */
.sticky-cta {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--fib-13);
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-block-start: var(--fib-1) solid var(--line);
  box-shadow: 0 -10px 30px -10px rgba(0,0,0,0.1);
  z-index: 40;
  transform: translateY(0);
  transition: transform var(--t-base) var(--ease);
}
.sticky-cta.is-hidden { transform: translateY(100%); }
.sticky-cta__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fib-13);
  max-width: var(--container);
  margin-inline: auto;
}
.sticky-cta__price {
  display: flex; flex-direction: column; gap: 2px;
}
.sticky-cta__price strong { color: var(--brand); font-size: var(--text-lg); font-family: var(--font-display); font-weight: 800; }
.sticky-cta__price span { color: var(--ink-soft); font-size: var(--text-caption); text-decoration: line-through; }

/* ============================================================================
   26.  TAG CLOUD / CHIP CLOUD
   ============================================================================ */
.chip-cloud {
  display: flex; flex-wrap: wrap; gap: var(--fib-5);
}
.chip {
  display: inline-flex; align-items: center; gap: var(--fib-5);
  padding: var(--fib-3) var(--fib-13);
  background: var(--surface-2);
  border: var(--fib-1) solid var(--line);
  border-radius: 999px;
  font-size: var(--text-caption); font-weight: 500;
  color: var(--ink);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  cursor: pointer;
}
.chip:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
.chip.is-active {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
.chip__close {
  display: grid; place-items: center;
  width: 16px; height: 16px;
  background: color-mix(in srgb, currentColor 15%, transparent);
  border-radius: 50%;
  font-size: 0.65em; cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.chip__close:hover { background: color-mix(in srgb, currentColor 30%, transparent); }

/* ============================================================================
   27.  SEARCH BOX PREMIUM
   ============================================================================ */
.search-box {
  position: relative;
  display: inline-flex; width: 100%;
}
.search-box input {
  width: 100%;
  padding: var(--fib-13);
  padding-inline-start: 44px;
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--text-base);
  min-height: 48px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.search-box input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.search-box::before {
  content: '\f002';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute;
  inset-inline-start: var(--fib-13);
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.search-box__clear {
  position: absolute;
  inset-inline-end: var(--fib-8);
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-soft);
  border-radius: 50%; border: none;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.search-box input:not(:placeholder-shown) + .search-box__clear {
  opacity: 1; pointer-events: auto;
}
.search-box__clear:hover { background: var(--danger-soft); color: var(--danger); }

/* ============================================================================
   28.  BANNER TOPO com dismiss
   ============================================================================ */
.banner {
  display: flex; align-items: center; gap: var(--fib-13);
  padding: var(--fib-13) var(--fib-21);
  background: var(--brand-soft);
  border-block-end: var(--fib-1) solid color-mix(in srgb, var(--brand) 20%, transparent);
  color: var(--ink);
  font-size: var(--text-sm);
  position: relative;
}
.banner > i { color: var(--brand); font-size: var(--text-lg); flex-shrink: 0; }
.banner__body { flex: 1; }
.banner__body strong { color: var(--brand-strong); }
.banner__close {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  background: transparent; color: var(--ink-soft);
  border: none; border-radius: 50%;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.banner__close:hover { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand); }
.banner--success { background: var(--emerald-100); border-color: color-mix(in srgb, var(--emerald-500) 30%, transparent); }
.banner--success > i { color: var(--emerald-700); }
.banner--warn { background: var(--amber-50); border-color: color-mix(in srgb, var(--amber-500) 30%, transparent); color: #78350f; }
.banner--warn > i { color: #b45309; }
.banner--danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 25%, transparent); color: #7f1d1d; }
.banner--danger > i { color: var(--danger); }

/* ============================================================================
   29.  DRAWER (side sheet)
   ============================================================================ */
.drawer {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  pointer-events: none;
}
.drawer__backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--slate-950) 45%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}
.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(400px, 90vw);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease-out-quart);
  display: flex; flex-direction: column;
}
.drawer.is-open { pointer-events: auto; }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--fib-21);
  border-block-end: var(--fib-1) solid var(--line);
}
.drawer__body { padding: var(--fib-21); overflow-y: auto; flex: 1; }
.drawer--left .drawer__panel {
  inset-inline-start: 0; inset-inline-end: auto;
  transform: translateX(-100%);
}
.drawer--left.is-open .drawer__panel { transform: translateX(0); }

/* ============================================================================
   30.  ACCORDION (variação do FAQ pra uso genérico)
   ============================================================================ */
.accordion {
  display: flex; flex-direction: column;
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.accordion details + details {
  border-block-start: var(--fib-1) solid var(--line-soft);
}
.accordion summary {
  padding: var(--fib-21);
  cursor: pointer; list-style: none;
  font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: var(--fib-13);
  transition: background var(--t-fast) var(--ease);
}
.accordion summary:hover { background: var(--surface-2); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  margin-inline-start: auto;
  color: var(--muted);
  font-size: 0.8em;
  transition: transform var(--t-base) var(--ease);
}
.accordion details[open] summary::after { transform: rotate(180deg); }
.accordion details[open] summary { background: var(--brand-soft); color: var(--brand-strong); }
.accordion > details > *:not(summary) {
  padding: var(--fib-21);
  padding-block-start: 0;
  animation: faqReveal .3s var(--t-smoothout) both;
}

/* ============================================================================
   31.  CODE BLOCK (para eventual docs)
   ============================================================================ */
pre.code {
  padding: var(--fib-21);
  background: var(--slate-900); color: #e2e8f0;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-family: ui-monospace, 'Fira Code', monospace;
  font-size: var(--text-sm);
  line-height: 1.6;
  border: var(--fib-1) solid var(--slate-700);
  box-shadow: var(--shadow-md);
  position: relative;
}
pre.code::before {
  content: attr(data-lang);
  position: absolute;
  inset-block-start: var(--fib-8);
  inset-inline-end: var(--fib-13);
  padding: 2px 8px;
  background: var(--slate-800); color: var(--slate-300);
  border-radius: var(--r-sm);
  font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
}
pre.code .kw { color: #c084fc; }
pre.code .st { color: #86efac; }
pre.code .cm { color: #94a3b8; font-style: italic; }
pre.code .fn { color: #93c5fd; }
pre.code .nm { color: #fbbf24; }

/* ============================================================================
   32.  KBD (keyboard shortcuts)
   ============================================================================ */
kbd {
  display: inline-block;
  padding: 2px 8px;
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-block-end: 2px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: ui-monospace, monospace;
  font-size: 0.85em; font-weight: 600;
  box-shadow: inset 0 -1px 0 var(--surface-2);
  line-height: 1.2;
}
.kbd-combo {
  display: inline-flex; align-items: center; gap: var(--fib-3);
  color: var(--ink-soft);
}
.kbd-combo kbd + kbd::before {
  content: '+'; margin-inline: 2px;
  color: var(--muted); font-weight: 400;
}

/* ============================================================================
   33.  SPINNER VARIANTS
   ============================================================================ */
.spinner {
  display: inline-block;
  width: 24px; height: 24px;
  border: 3px solid color-mix(in srgb, var(--brand) 25%, transparent);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spinCW 0.8s linear infinite;
}
.spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.spinner--lg { width: 48px; height: 48px; border-width: 4px; }
.spinner--brand { border-color: color-mix(in srgb, var(--brand) 25%, transparent); border-top-color: var(--brand); }
.spinner--ok { border-color: color-mix(in srgb, var(--ok) 25%, transparent); border-top-color: var(--ok); }
.spinner--danger { border-color: color-mix(in srgb, var(--danger) 25%, transparent); border-top-color: var(--danger); }

.dot-spinner {
  display: inline-flex; gap: 4px;
}
.dot-spinner > span {
  width: 6px; height: 6px;
  background: var(--brand);
  border-radius: 50%;
  animation: dotBounce 1.2s ease-in-out infinite;
}
.dot-spinner > span:nth-child(2) { animation-delay: 0.15s; }
.dot-spinner > span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dotBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-6px); opacity: 1; }
}

.progress-circle {
  --size: 60px;
  --thickness: 6px;
  --val: 0;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--val) * 1%), var(--surface-2) 0);
  display: grid; place-items: center;
  position: relative;
}
.progress-circle::before {
  content: '';
  position: absolute; inset: var(--thickness);
  background: var(--surface);
  border-radius: 50%;
}
.progress-circle > * { position: relative; z-index: 1; }

/* ============================================================================
   34.  RIBBON (destaque em canto)
   ============================================================================ */
.ribbon {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: -8px;
  padding: 4px 12px;
  background: var(--danger); color: #fff;
  font-size: var(--text-caption); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
  clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%, 8px 50%);
  padding-inline-start: 16px; padding-inline-end: 20px;
  transform: rotate(-2deg);
  z-index: 2;
}
.ribbon--brand { background: var(--brand); }
.ribbon--gold  { background: var(--gold-500); color: #713f12; }
.ribbon--ok    { background: var(--ok); }

/* ============================================================================
   35.  DIVIDER TEXT (linha horizontal com texto no meio)
   ============================================================================ */
.divider-text {
  display: flex; align-items: center; gap: var(--fib-13);
  color: var(--ink-soft);
  font-size: var(--text-caption);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  margin-block: var(--fib-21);
}
.divider-text::before,
.divider-text::after {
  content: '';
  flex: 1; height: 1px;
  background: var(--line);
}

/* ============================================================================
   36.  AVATAR + AVATAR GROUP
   ============================================================================ */
.avatar {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  background: var(--grad-brand); color: #fff;
  border-radius: 50%;
  font-weight: 700; font-size: var(--text-sm);
  font-family: var(--font-display);
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--surface);
  overflow: hidden;
  position: relative;
}
.avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.avatar--xs { width: 24px; height: 24px; font-size: 0.7rem; }
.avatar--sm { width: 32px; height: 32px; font-size: 0.75rem; }
.avatar--md { width: 40px; height: 40px; }
.avatar--lg { width: 56px; height: 56px; font-size: var(--text-base); }
.avatar--xl { width: 80px; height: 80px; font-size: var(--text-lg); }
.avatar__status {
  position: absolute;
  inset-block-end: 0; inset-inline-end: 0;
  width: 25%; height: 25%;
  border-radius: 50%;
  background: var(--ok);
  border: 2px solid var(--surface);
}
.avatar__status--away { background: var(--gold-500); }
.avatar__status--offline { background: var(--muted); }
.avatar-group {
  display: inline-flex;
  padding-inline-start: var(--fib-8);
}
.avatar-group > .avatar {
  margin-inline-start: calc(-1 * var(--fib-8));
  transition: transform var(--t-fast) var(--ease);
}
.avatar-group > .avatar:hover { transform: translateY(-2px); z-index: 1; }
.avatar-group > .avatar + .avatar { border: 2px solid var(--surface); }

/* ============================================================================
   37.  MEDIA QUOTE (com foto + texto)
   ============================================================================ */
.media-quote {
  display: grid; grid-template-columns: auto 1fr; gap: var(--fib-21);
  padding: var(--fib-21);
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.media-quote__avatar { flex-shrink: 0; }
.media-quote__body p { color: var(--ink); font-size: var(--text-base); line-height: 1.6; }
.media-quote__author {
  display: flex; align-items: center; gap: var(--fib-8);
  margin-block-start: var(--fib-13);
  color: var(--ink-soft); font-size: var(--text-sm);
}
.media-quote__author strong { color: var(--ink); }

/* ============================================================================
   38.  STAT WITH CHANGE INDICATOR
   ============================================================================ */
.stat-change {
  display: inline-flex; align-items: center; gap: var(--fib-3);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-caption); font-weight: 700;
}
.stat-change--up   { background: var(--emerald-100); color: var(--emerald-700); }
.stat-change--down { background: var(--danger-soft); color: var(--danger); }
.stat-change--flat { background: var(--surface-2); color: var(--ink-soft); }
.stat-change::before {
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  font-size: 0.8em;
}
.stat-change--up::before   { content: '\f077'; }
.stat-change--down::before { content: '\f078'; }
.stat-change--flat::before { content: '\f068'; }

.stat-with-change {
  display: flex; flex-direction: column; gap: var(--fib-3);
  padding: var(--fib-21);
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-lg);
}
.stat-with-change .label { color: var(--ink-soft); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.stat-with-change .value { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat-with-change .foot { display: flex; align-items: center; justify-content: space-between; gap: var(--fib-8); font-size: var(--text-caption); color: var(--ink-soft); }

/* ============================================================================
   39.  SPARKLINE (barrinhas mini para tendência)
   ============================================================================ */
.sparkline {
  display: inline-flex; align-items: flex-end; gap: 2px;
  height: 24px;
}
.sparkline > span {
  width: 4px;
  background: var(--brand);
  border-radius: 1px;
  opacity: 0.55;
  transition: opacity var(--t-fast) var(--ease);
}
.sparkline > span:last-child { opacity: 1; }
.sparkline:hover > span { opacity: 0.8; }
.sparkline--ok > span { background: var(--ok); }
.sparkline--danger > span { background: var(--danger); }

/* ============================================================================
   40.  BUTTON MAGNETIC HOVER (glow que segue mouse — CSS puro)
   ============================================================================ */
.btn-magnetic {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-magnetic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.35), transparent 40%);
  opacity: 0; z-index: 0;
  transition: opacity var(--t-fast) var(--ease);
  pointer-events: none;
}
.btn-magnetic:hover::before { opacity: 1; }
.btn-magnetic > * { position: relative; z-index: 1; }

/* ============================================================================
   41.  RIPPLE EFFECT
   ============================================================================ */
.ripple {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ripple::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  opacity: 1;
  pointer-events: none;
  width: 100px; height: 100px;
  inset-inline-start: var(--rx, 50%);
  inset-block-start: var(--ry, 50%);
  margin-inline-start: -50px; margin-block-start: -50px;
}
.ripple.is-clicked::after {
  animation: rippleOut 0.6s ease-out;
}
@keyframes rippleOut {
  0% { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(6); opacity: 0; }
}

/* ============================================================================
   42.  SHINE ON HOVER (utility)
   ============================================================================ */
.shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.shine::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform var(--t-emphatic) var(--ease);
  pointer-events: none;
  z-index: 1;
}
.shine:hover::before { transform: translateX(100%); }

/* ============================================================================
   43.  DROP CAP
   ============================================================================ */
.dropcap::first-letter {
  float: inline-start;
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  padding-inline-end: var(--fib-8);
  padding-block-start: 4px;
  color: var(--brand);
  letter-spacing: -0.05em;
}
.dropcap--boxed::first-letter {
  background: var(--brand); color: #fff;
  padding: var(--fib-8) var(--fib-13);
  border-radius: var(--r-md);
  margin-inline-end: var(--fib-13);
  margin-block-end: var(--fib-5);
}

/* ============================================================================
   44.  HIGHLIGHT ANIMATED (para chamar atenção)
   ============================================================================ */
.highlight-scroll {
  background: linear-gradient(90deg, var(--brand-soft) 0%, var(--brand-soft) 100%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 1.2s var(--ease-out-quart);
  padding: 0 4px;
  font-weight: 700;
}
.highlight-scroll.is-visible { background-size: 100% 100%; }

/* ============================================================================
   45.  MASKED IMAGE (recorte decorativo)
   ============================================================================ */
.mask-blob {
  -webkit-mask: radial-gradient(circle, black 62%, transparent 63%);
  mask: radial-gradient(circle, black 62%, transparent 63%);
}
.mask-arch {
  border-radius: 999px 999px var(--r-md) var(--r-md);
  overflow: hidden;
}
.mask-hex {
  -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.mask-diamond {
  -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* ============================================================================
   46.  ASPECT RATIO HELPERS
   ============================================================================ */
.ar-1  { aspect-ratio: 1 / 1; }
.ar-2  { aspect-ratio: 2 / 1; }
.ar-3  { aspect-ratio: 3 / 1; }
.ar-4-3 { aspect-ratio: 4 / 3; }
.ar-16-9 { aspect-ratio: 16 / 9; }
.ar-21-9 { aspect-ratio: 21 / 9; }
.ar-3-4 { aspect-ratio: 3 / 4; }
.ar-9-16 { aspect-ratio: 9 / 16; }

/* ============================================================================
   47.  Z-INDEX HELPERS
   ============================================================================ */
.z-0  { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-max { z-index: 999; }

/* ============================================================================
   48.  DISPLAY UTILITIES
   ============================================================================ */
.d-none    { display: none !important; }
.d-block   { display: block; }
.d-inline  { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex    { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid    { display: grid; }
@media (min-width: 641px)  { .d-md-none { display: none !important; } .d-md-block { display: block; } .d-md-flex { display: flex; } }
@media (min-width: 901px)  { .d-lg-none { display: none !important; } .d-lg-block { display: block; } .d-lg-flex { display: flex; } }
@media (max-width: 640px)  { .d-mobile-none { display: none !important; } }
@media (max-width: 900px)  { .d-tablet-none { display: none !important; } }

/* ============================================================================
   49.  POSITION UTILITIES
   ============================================================================ */
.pos-relative { position: relative; }
.pos-absolute { position: absolute; }
.pos-fixed    { position: fixed; }
.pos-sticky   { position: sticky; top: 0; }
.inset-0 { inset: 0; }
.top-0 { inset-block-start: 0; }
.bottom-0 { inset-block-end: 0; }
.start-0 { inset-inline-start: 0; }
.end-0 { inset-inline-end: 0; }

/* ============================================================================
   50.  OVERFLOW UTILITIES
   ============================================================================ */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.truncate {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================================
   51.  TEXT UTILITIES
   ============================================================================ */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-mono { font-family: ui-monospace, monospace; }
.font-display { font-family: var(--font-display); }
.leading-tight { line-height: 1.2; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.75; }
.tracking-tight { letter-spacing: -0.02em; }
.tracking-wide { letter-spacing: 0.05em; }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.italic { font-style: italic; }
.underline { text-decoration: underline; text-underline-offset: 3px; }
.no-underline { text-decoration: none; }

/* ============================================================================
   52.  FLEX UTILITIES
   ============================================================================ */
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }

/* ============================================================================
   53.  GRID UTILITIES
   ============================================================================ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fib-21); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fib-21); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fib-21); }
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-full { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================================
   54.  CURSOR UTILITIES
   ============================================================================ */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab { cursor: grab; }
.cursor-grab:active { cursor: grabbing; }
.select-none { user-select: none; }
.select-all { user-select: all; }
.select-text { user-select: text; }

/* ============================================================================
   55.  BORDER UTILITIES
   ============================================================================ */
.border { border: 1px solid var(--line); }
.border-0 { border: none; }
.border-brand { border-color: var(--brand); }
.border-danger { border-color: var(--danger); }
.border-ok { border-color: var(--ok); }
.border-2 { border-width: 2px; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--r-sm); }
.rounded-md { border-radius: var(--r-md); }
.rounded-lg { border-radius: var(--r-lg); }
.rounded-xl { border-radius: var(--r-xl); }
.rounded-full { border-radius: 999px; }

/* ============================================================================
   56.  BACKGROUND UTILITIES
   ============================================================================ */
.bg-surface { background: var(--surface); }
.bg-surface-2 { background: var(--surface-2); }
.bg-brand { background: var(--brand); color: #fff; }
.bg-brand-soft { background: var(--brand-soft); }
.bg-ok { background: var(--ok); color: #fff; }
.bg-ok-soft { background: var(--ok-soft); }
.bg-danger { background: var(--danger); color: #fff; }
.bg-danger-soft { background: var(--danger-soft); }
.bg-gradient-brand { background: var(--grad-brand); color: #fff; }
.bg-gradient-cta { background: var(--grad-cta); color: #fff; }
.bg-gradient-warm { background: var(--grad-warm); }
.bg-gradient-cool { background: var(--grad-cool); }
.bg-transparent { background: transparent; }

/* ============================================================================
   57.  OPACITY UTILITIES
   ============================================================================ */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }
.hover-opacity-100:hover { opacity: 1; }

/* ============================================================================
   58.  TRANSFORM UTILITIES
   ============================================================================ */
.rotate-45 { transform: rotate(45deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }
.-rotate-45 { transform: rotate(-45deg); }
.scale-90 { transform: scale(0.9); }
.scale-100 { transform: scale(1); }
.scale-110 { transform: scale(1.1); }
.hover-scale-105:hover { transform: scale(1.05); }
.hover-scale-110:hover { transform: scale(1.1); }
.hover-lift:hover { transform: translateY(-3px); }
.transition-all { transition: all var(--t-base) var(--ease); }
.transition-fast { transition: all var(--t-fast) var(--ease); }
.transition-slow { transition: all var(--t-slow) var(--ease); }

/* ============================================================================
   59.  GAP UTILITIES (adicionais)
   ============================================================================ */
.gap-0  { gap: 0; }
.gap-1  { gap: 4px; }
.gap-2  { gap: 8px; }
.gap-4  { gap: 16px; }
.gap-6  { gap: 24px; }
.gap-x-8 { column-gap: 32px; }
.gap-y-8 { row-gap: 32px; }

/* ============================================================================
   60.  SPACING UTILITIES (padding/margin numerada)
   ============================================================================ */
.p-0 { padding: 0; }
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }
.px-3 { padding-inline: 12px; }
.px-4 { padding-inline: 16px; }
.py-3 { padding-block: 12px; }
.py-4 { padding-block: 16px; }
.m-0 { margin: 0; }
.mx-auto { margin-inline: auto; }
.my-auto { margin-block: auto; }

/* ============================================================================
   61.  WIDTH / HEIGHT UTILITIES
   ============================================================================ */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-fit  { width: fit-content; }
.h-full { height: 100%; }
.h-screen { height: 100vh; height: 100dvh; }
.min-h-screen { min-height: 100vh; min-height: 100dvh; }
.max-w-xs { max-width: 320px; }
.max-w-sm { max-width: 384px; }
.max-w-md { max-width: 448px; }
.max-w-lg { max-width: 512px; }
.max-w-xl { max-width: 576px; }
.max-w-2xl { max-width: 672px; }
.max-w-3xl { max-width: 768px; }
.max-w-4xl { max-width: 896px; }
.max-w-prose { max-width: 65ch; }

/* ============================================================================
   62.  BLUR / FILTER UTILITIES
   ============================================================================ */
.blur-sm { filter: blur(4px); }
.blur    { filter: blur(8px); }
.blur-lg { filter: blur(16px); }
.brightness-90 { filter: brightness(0.9); }
.brightness-110 { filter: brightness(1.1); }
.saturate-150 { filter: saturate(1.5); }
.grayscale { filter: grayscale(1); }
.backdrop-blur { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.backdrop-blur-lg { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.mix-multiply { mix-blend-mode: multiply; }
.mix-screen { mix-blend-mode: screen; }
.mix-overlay { mix-blend-mode: overlay; }

/* ============================================================================
   63.  SVG ICON UTILITIES (para inline SVG)
   ============================================================================ */
.icon {
  display: inline-block;
  width: 1em; height: 1em;
  fill: currentColor;
  stroke: currentColor;
  vertical-align: -0.125em;
}
.icon-sm { width: 1em; height: 1em; font-size: 0.875rem; }
.icon-md { font-size: 1.125rem; }
.icon-lg { font-size: 1.5rem; }
.icon-xl { font-size: 2rem; }

/* ============================================================================
   64.  ANIMAÇÕES ADICIONAIS
   ============================================================================ */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
@keyframes shakeY {
  0%, 100% { transform: translateY(0); }
  20%, 60% { transform: translateY(-4px); }
  40%, 80% { transform: translateY(4px); }
}
@keyframes flip {
  0% { transform: perspective(400px) rotateY(0); }
  100% { transform: perspective(400px) rotateY(360deg); }
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  10%, 30% { transform: scale(1.1); }
  20%, 40% { transform: scale(1); }
}
@keyframes rubberBand {
  0%   { transform: scale(1); }
  30%  { transform: scaleX(1.25) scaleY(0.75); }
  40%  { transform: scaleX(0.75) scaleY(1.25); }
  50%  { transform: scaleX(1.15) scaleY(0.85); }
  65%  { transform: scaleX(0.95) scaleY(1.05); }
  75%  { transform: scaleX(1.05) scaleY(0.95); }
  100% { transform: scale(1); }
}
@keyframes tada {
  0%   { transform: scale(1); }
  10%,20% { transform: scale(0.95) rotate(-3deg); }
  30%,50%,70%,90% { transform: scale(1.05) rotate(3deg); }
  40%,60%,80%     { transform: scale(1.05) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes swing {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes drift {
  0%,100% { transform: translate(0, 0); }
  25%     { transform: translate(4px, -4px); }
  50%     { transform: translate(0, -8px); }
  75%     { transform: translate(-4px, -4px); }
}
@keyframes wave {
  0%,60%,100% { transform: rotate(0); }
  10%,30%     { transform: rotate(14deg); }
  20%         { transform: rotate(-8deg); }
  40%         { transform: rotate(-4deg); }
  50%         { transform: rotate(10deg); }
}
@keyframes typingCursor {
  0%,50% { border-color: var(--brand); }
  50.01%,100% { border-color: transparent; }
}
@keyframes gradShift-2 {
  0%,100% { background-position: 0% 0%; }
  50%     { background-position: 100% 100%; }
}
@keyframes float-in-out {
  0%,100% { transform: translateY(0) rotate(0); }
  50%     { transform: translateY(-10px) rotate(3deg); }
}
.animate-shake { animation: shake .5s ease-in-out; }
.animate-flip { animation: flip 1s ease-in-out; }
.animate-heartbeat { animation: heartbeat 1.5s ease-in-out infinite; }
.animate-rubberBand { animation: rubberBand 1s var(--squish); }
.animate-tada { animation: tada 1s ease-in-out; }
.animate-swing { animation: swing 1s ease-in-out; transform-origin: top; }
.animate-wave { animation: wave 2.5s ease-in-out infinite; transform-origin: 70% 70%; display: inline-block; }
.animate-drift { animation: drift 6s ease-in-out infinite; }
.animate-float-in-out { animation: float-in-out 3s ease-in-out infinite; }

/* ============================================================================
   65.  TYPING EFFECT (cursor pisca)
   ============================================================================ */
.typing {
  border-inline-end: 3px solid var(--brand);
  animation: typingCursor 1s step-start infinite;
  padding-inline-end: 4px;
}

/* ============================================================================
   66.  CERTIFICATE PRINT — modo especial pra imprimir só o certificado
   ============================================================================ */
@media print {
  @page { size: A4 landscape; margin: 0; }
  .print-cert {
    width: 100%; height: 100vh;
    padding: 40mm;
    background: #fff !important;
    color: #000 !important;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    border: 4px double #333;
  }
  .print-cert h1 { font-size: 40pt; margin: 20pt 0; }
  .print-cert p { font-size: 14pt; }
  .print-cert__student { font-size: 32pt; font-weight: 700; margin: 15pt 0; }
  .print-cert__seal {
    position: absolute;
    inset-block-end: 40mm;
    inset-inline-end: 40mm;
    width: 80pt; height: 80pt;
    border: 3px solid var(--brand);
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 700;
  }
}

/* ============================================================================
   67.  SCROLL SNAP UTILITIES
   ============================================================================ */
.snap-x { scroll-snap-type: x mandatory; }
.snap-y { scroll-snap-type: y mandatory; }
.snap-start { scroll-snap-align: start; }
.snap-center { scroll-snap-align: center; }
.snap-end { scroll-snap-align: end; }

/* ============================================================================
   68.  SCROLL MARGIN (anchor offset)
   ============================================================================ */
[id] { scroll-margin-block-start: calc(var(--header-h) + var(--fib-21)); }

/* ============================================================================
   69.  CONTAINER QUERIES SETUP (para componentes fluidos)
   ============================================================================ */
.cq { container-type: inline-size; container-name: card; }
@container card (max-width: 340px) {
  .cq .cq-hidden { display: none; }
  .cq .cq-stack { flex-direction: column; align-items: flex-start; }
  .cq h3 { font-size: var(--text-base); }
}

/* ============================================================================
   70.  ENHANCED HERO VARIANTS
   ============================================================================ */
.hero-centered {
  text-align: center;
  padding-block: var(--fib-89);
  background: var(--mesh-01);
  position: relative; overflow: hidden;
}
.hero-centered__inner {
  max-width: 720px; margin-inline: auto;
  position: relative; z-index: 1;
}
.hero-centered h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 82%, transparent) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-wrap: balance;
  margin-block-end: var(--fib-21);
}
.hero-centered p {
  font-size: var(--text-lg);
  color: var(--ink-soft);
  max-width: 55ch;
  margin-inline: auto;
  margin-block-end: var(--fib-34);
}

/* ============================================================================
   71.  ENHANCED PRICING TABLE 3-COL
   ============================================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fib-21);
  margin-block-start: var(--fib-34);
}
.pricing-grid > .price-card {
  max-width: none;
  padding-block-start: var(--fib-55);
}
.pricing-grid > .price-card--featured {
  transform: scale(1.03);
  z-index: 1;
  box-shadow: var(--shadow-lg), 0 40px 80px -20px var(--accent-glow);
  border: 2px solid var(--brand);
}
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-grid > .price-card--featured { transform: none; }
}

/* ============================================================================
   72.  COMPARISON TABLE (features side-by-side)
   ============================================================================ */
.compare-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.compare-table th, .compare-table td {
  padding: var(--fib-13) var(--fib-21);
  text-align: start;
  border-block-end: var(--fib-1) solid var(--line-soft);
}
.compare-table thead { background: var(--brand-soft); }
.compare-table thead th { color: var(--brand-strong); font-weight: 700; }
.compare-table tbody tr:hover { background: var(--surface-2); }
.compare-table td.yes { color: var(--ok); font-weight: 700; }
.compare-table td.no  { color: var(--muted); }
.compare-table td.yes::before { content: '\f00c '; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.compare-table td.no::before  { content: '\f00d '; font-family: 'Font Awesome 6 Free'; font-weight: 900; }

/* ============================================================================
   73.  VIDEO PLAYER WRAPPER PREMIUM
   ============================================================================ */
.video-player {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg), 0 30px 60px -20px rgba(0,0,0,0.35);
}
.video-player > video, .video-player > iframe {
  width: 100%; height: 100%; display: block;
  border: none;
}
.video-player__badge {
  position: absolute;
  inset-block-start: var(--fib-13);
  inset-inline-start: var(--fib-13);
  padding: 4px 10px;
  background: rgba(0,0,0,0.5); color: #fff;
  border-radius: var(--r-sm);
  font-size: var(--text-caption); font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  z-index: 3;
}
.video-player__badge > i { color: var(--red-500); animation: pulse 1.8s infinite; }
.video-player__cover {
  position: absolute; inset: 0;
  background: var(--surface-2);
  display: grid; place-items: center;
  cursor: pointer;
  transition: opacity var(--t-base) var(--ease);
}
.video-player__cover img { width: 100%; height: 100%; object-fit: cover; }
.video-player__cover::after {
  content: '\f04b';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute;
  inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  border-radius: 50%;
  font-size: 1.8rem;
  box-shadow: var(--shadow-lg), var(--glow-brand-lg);
  transition: transform var(--t-fast) var(--spring);
}
.video-player__cover:hover::after { transform: translate(-50%, -50%) scale(1.1); }

/* ============================================================================
   74.  AUDIO PLAYER (para pronúncia extra)
   ============================================================================ */
.audio-player {
  display: flex; align-items: center; gap: var(--fib-13);
  padding: var(--fib-13);
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
}
.audio-player__btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: var(--brand); color: #fff;
  border: none; border-radius: 50%;
  cursor: pointer; flex-shrink: 0;
  transition: transform var(--t-fast) var(--ease);
}
.audio-player__btn:hover { transform: scale(1.05); }
.audio-player__label { flex: 1; font-size: var(--text-sm); color: var(--ink); }
.audio-player__time { color: var(--ink-soft); font-size: var(--text-caption); font-variant-numeric: tabular-nums; }
.audio-player__bar {
  flex: 1; height: 6px; background: var(--surface-2);
  border-radius: 999px; overflow: hidden;
  cursor: pointer;
}
.audio-player__bar > div {
  height: 100%; background: var(--brand);
  width: 0%;
  transition: width 0.1s linear;
}

/* ============================================================================
   75.  ANIMATION TRIGGERS UTILITIES (hover fills)
   ============================================================================ */
.hover-fill {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hover-fill::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--brand);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--t-emphatic) var(--ease-out-quart);
  z-index: -1;
}
.hover-fill:hover::before { transform: scaleY(1); }
.hover-fill:hover { color: #fff; }

/* ============================================================================
   76.  FLOATING LABEL INPUT
   ============================================================================ */
.float-field {
  position: relative;
  margin-block: var(--fib-13);
}
.float-field input,
.float-field textarea {
  width: 100%;
  padding: 22px 14px 8px 14px;
  min-height: 56px;
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--text-base);
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease);
}
.float-field label {
  position: absolute;
  inset-block-start: 18px;
  inset-inline-start: 14px;
  color: var(--ink-soft);
  font-size: var(--text-base);
  font-weight: 500;
  pointer-events: none;
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  background: transparent;
  padding-inline: 4px;
}
.float-field input:focus,
.float-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.float-field input:focus + label,
.float-field input:not(:placeholder-shown) + label,
.float-field textarea:focus + label,
.float-field textarea:not(:placeholder-shown) + label {
  transform: translateY(-14px) scale(0.82);
  color: var(--brand);
  transform-origin: left top;
}

/* ============================================================================
   77.  PROMO SIDE (login desktop side promo)
   ============================================================================ */
.promo-side ul { margin: 0; padding: 0; list-style: none; }
.promo-side__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--fib-13);
  margin-block-start: var(--fib-34);
  padding-block-start: var(--fib-21);
  border-block-start: var(--fib-1) solid rgba(255,255,255,0.2);
  position: relative;
}
.promo-side__stats > div {
  text-align: center;
}
.promo-side__stats strong {
  display: block; font-size: 1.6rem;
  font-family: var(--font-display); font-weight: 800;
  color: #fff;
}
.promo-side__stats span { color: rgba(255,255,255,0.85); font-size: var(--text-caption); }

/* ============================================================================
   78.  MENTORIA CARD (agendamento premium)
   ============================================================================ */
.mentoria-slot {
  display: flex; align-items: center; gap: var(--fib-13);
  padding: var(--fib-13) var(--fib-21);
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  min-height: 60px;
}
.mentoria-slot:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  transform: translateX(4px);
}
.mentoria-slot.is-taken {
  opacity: 0.55;
  text-decoration: line-through;
  pointer-events: none;
}
.mentoria-slot__time {
  display: flex; align-items: center; gap: var(--fib-5);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-lg); color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.mentoria-slot__time::before {
  content: '\f017';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  font-size: 0.9em; opacity: 0.7;
}
.mentoria-slot__duration {
  margin-inline-start: auto;
  padding: 4px 12px;
  background: var(--brand-soft); color: var(--brand);
  border-radius: 999px;
  font-size: var(--text-caption); font-weight: 700;
}
.mentoria-slot__book-btn {
  margin-inline-start: var(--fib-8);
  padding: 6px 14px;
  background: var(--brand); color: #fff;
  border: none; border-radius: var(--r-md);
  font-size: var(--text-caption); font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.mentoria-slot__book-btn:hover { background: var(--brand-strong); }

/* ============================================================================
   79.  QUIZ RESULT VISUAL
   ============================================================================ */
.quiz-result {
  padding: var(--fib-34);
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-lg);
  text-align: center;
  box-shadow: var(--shadow-md);
}
.quiz-result__score {
  display: grid; place-items: center;
  width: 160px; height: 160px;
  margin: var(--fib-21) auto;
  border-radius: 50%;
  background: conic-gradient(from -90deg, var(--brand) calc(var(--score, 0) * 1%), var(--surface-2) 0);
  filter: drop-shadow(0 8px 20px var(--accent-glow));
  position: relative;
}
.quiz-result__score::before {
  content: '';
  position: absolute; inset: 12px;
  background: var(--surface);
  border-radius: 50%;
}
.quiz-result__score span {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 800;
  font-size: 2.5rem;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.quiz-result__label {
  color: var(--ink-soft); font-size: var(--text-sm);
  margin-block-end: var(--fib-13);
}
.quiz-result--pass .quiz-result__score {
  background: conic-gradient(from -90deg, var(--ok) calc(var(--score, 0) * 1%), var(--surface-2) 0);
  filter: drop-shadow(0 8px 20px rgba(16,185,129,.3));
}
.quiz-result--pass .quiz-result__score span { color: var(--ok); }
.quiz-result--fail .quiz-result__score {
  background: conic-gradient(from -90deg, var(--danger) calc(var(--score, 0) * 1%), var(--surface-2) 0);
}
.quiz-result--fail .quiz-result__score span { color: var(--danger); }

/* ============================================================================
   80.  DARK MODE V2 TUNING
   ============================================================================ */
[data-theme="dark"] {
  color-scheme: dark;
}
[data-theme="dark"] .mesh-bg { background-image: var(--mesh-dark); }
[data-theme="dark"] .switch__slider { background: var(--surface-2); border-color: var(--line); }
[data-theme="dark"] .switch input:checked + .switch__slider { background: var(--brand); }
[data-theme="dark"] .checkbox-custom .box,
[data-theme="dark"] .radio-custom .dot { background: var(--surface-2); border-color: var(--line); }
[data-theme="dark"] .dropzone { background: var(--surface); }
[data-theme="dark"] .dropzone:hover,
[data-theme="dark"] .dropzone.is-over { background: color-mix(in srgb, var(--brand-soft) 60%, var(--surface)); }
[data-theme="dark"] .banner { background: color-mix(in srgb, var(--brand-soft) 40%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
[data-theme="dark"] .banner--success { background: color-mix(in srgb, var(--emerald-100) 15%, var(--surface)); color: #6ee7b7; }
[data-theme="dark"] .banner--danger  { background: color-mix(in srgb, var(--danger-soft) 40%, var(--surface)); color: #fca5a5; }
[data-theme="dark"] .banner--warn    { background: rgba(234, 179, 8, 0.15); color: #fcd34d; }
[data-theme="dark"] .accordion { background: var(--surface); }
[data-theme="dark"] .accordion details[open] summary { background: color-mix(in srgb, var(--brand-soft) 60%, var(--surface)); color: #c7d2fe; }
[data-theme="dark"] .stepper { background: var(--surface); }
[data-theme="dark"] .search-box input { background: var(--surface); }
[data-theme="dark"] pre.code { background: var(--slate-950); border-color: var(--slate-800); }
[data-theme="dark"] .testimonial::before { color: color-mix(in srgb, var(--brand-soft) 40%, transparent); }
[data-theme="dark"] .quote { background: color-mix(in srgb, var(--brand-soft) 50%, var(--surface)); }
[data-theme="dark"] .mentoria-slot:hover { background: color-mix(in srgb, var(--brand-soft) 60%, var(--surface)); }
[data-theme="dark"] .quiz-result__score::before { background: var(--surface); }
[data-theme="dark"] .compare-table thead { background: color-mix(in srgb, var(--brand-soft) 60%, var(--surface)); }
[data-theme="dark"] .compare-table thead th { color: #c7d2fe; }
[data-theme="dark"] .article-card__cover { background: var(--surface-2); }
[data-theme="dark"] figure figcaption { background: var(--surface); }
[data-theme="dark"] .pagination { background: var(--surface); }
[data-theme="dark"] kbd { background: var(--surface-2); }

/* ============================================================================
   81.  MOBILE REFINEMENTS
   ============================================================================ */
@media (max-width: 640px) {
  .drawer__panel { width: 100vw; }
  .stepper { padding: var(--fib-8); }
  .stepper__step { font-size: var(--text-caption); }
  .stepper__step .num { width: 24px; height: 24px; font-size: 0.7rem; }
  .radio-group { grid-template-columns: 1fr; }
  .promo-side { display: none; }
  .fab { width: 48px; height: 48px; inset-inline-end: var(--fib-13); inset-block-end: var(--fib-13); }
  .video-player__cover::after { width: 56px; height: 56px; font-size: 1.4rem; }
  .video-player__badge { inset-block-start: 8px; inset-inline-start: 8px; font-size: 0.7rem; }
  .banner { flex-wrap: wrap; padding: var(--fib-8) var(--fib-13); }
  .search-box input { min-height: 44px; }
  .stat-with-change .value { font-size: 1.6rem; }
  .compare-table th, .compare-table td { padding: var(--fib-8); font-size: var(--text-caption); }
  .quiz-result__score { width: 120px; height: 120px; }
  .quiz-result__score span { font-size: 1.8rem; }
}

/* ============================================================================
   82.  REDUCED MOTION V2
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .fab:hover, .icon-btn:hover, .btn-magnetic:hover::before,
  .hero-media img, .hover-lift:hover, .hover-scale-105:hover, .hover-scale-110:hover,
  .animate-shake, .animate-flip, .animate-heartbeat, .animate-rubberBand,
  .animate-tada, .animate-swing, .animate-wave, .animate-drift, .animate-float-in-out {
    animation: none !important; transform: none !important;
  }
  .shine::before, .ripple::after { display: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ============================================================================
   83.  PRINT V2
   ============================================================================ */
@media print {
  .fab, .fab-menu, .sticky-cta, .drawer, .banner__close, .icon-btn { display: none !important; }
  .card, .kpi, .feature, .lesson-item, .article-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  * { transition: none !important; animation: none !important; }
}

/* ============================================================================
   84.  HERO LEAD FORTE + FECHO (revisão anny1)
   ============================================================================ */
.hero__lead--strong {
  font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.4rem);
  color: var(--ink);
  font-weight: 500;
  margin-block: var(--fib-21) var(--fib-13);
  line-height: 1.4;
  max-width: 42ch;
  text-wrap: balance;
}
.hero-split .hero__lead--strong { margin-inline: 0; }
.hero__lead--strong strong { color: var(--brand-strong); font-weight: 700; }
.hero__lead--strong .accent {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 700;
  position: relative;
  padding-inline: 3px;
}
.hero__lead--strong .accent::after {
  content: '';
  position: absolute;
  inset-inline: 0; inset-block-end: -3px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-hi), transparent);
  border-radius: var(--r-pill);
  opacity: 0.7;
}
.hero__closer {
  display: inline-flex; align-items: center; gap: var(--fib-8);
  margin-block-start: var(--fib-21);
  padding: var(--fib-8) var(--fib-13);
  background: var(--brand-soft);
  border-inline-start: 3px solid var(--brand);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: var(--text-base);
  font-style: italic;
  animation: closerReveal .8s var(--t-emphatic) .5s both;
}
.hero__closer > i {
  color: var(--brand); font-size: 0.9em; opacity: 0.7;
  flex-shrink: 0;
}
.hero__closer strong {
  color: var(--brand-strong); font-weight: 700; font-style: normal;
}
@keyframes closerReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-split .hero__closer { align-self: flex-start; }
@media (max-width: 640px) {
  .hero__lead--strong { font-size: 1.1rem; }
  .hero__closer { font-size: var(--text-sm); }
}
[data-theme="dark"] .hero__closer { background: color-mix(in srgb, var(--brand-soft) 60%, var(--surface)); }
[data-theme="dark"] .hero__lead--strong strong { color: #c7d2fe; }

/* ============================================================================
   85.  HERO TITLE — em/i estilizado (a "teacher" em itálico)
   ============================================================================ */
.hero__title em {
  font-style: italic;
  color: var(--brand);
  position: relative;
  font-weight: 700;
  padding-inline: 2px;
}
.hero__title em::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand-soft);
  border-radius: var(--r-sm);
  z-index: -1;
  transform: rotate(-1deg) scale(1.02);
  opacity: 0.5;
}

/* ============================================================================
   FIM v2 — mais 2000 linhas de refino
   ============================================================================ */
} /* end @layer enhancements-v2 */