/*
 * AgencyHD Minisite v2 · base (NÃO editar por lead).
 * Cada lead só troca tokens em theme.css. Fonte única: .agents/skills/creation/minisite/SKILL.md
 */
:root {
  /* cor (sobrescrever em theme.css a partir de brand.md) */
  --ms-primary: #1f2937;
  --ms-primary-dark: #111827;
  --ms-on-primary: #ffffff;
  --ms-accent: #c4a35a; /* só decoração, nunca texto pequeno */
  --ms-bg: #f7f5f2;
  --ms-surface: #ffffff;
  --ms-surface-alt: #efebe6;
  --ms-text: #1a1a1a;
  --ms-text-mid: #4a4a4a;
  --ms-border: rgba(0, 0, 0, 0.08);
  /* botões de link (padrão v1: primário em gradiente, cartões claros com borda e detalhe na accent) */
  --ms-primary-mid: color-mix(in srgb, var(--ms-primary) 82%, #ffffff);
  --ms-primary-bg: linear-gradient(135deg, var(--ms-primary) 0%, var(--ms-primary-mid) 45%, var(--ms-primary-dark) 100%);
  --ms-primary-icon: var(--ms-on-primary);
  --ms-primary-icon-bg: color-mix(in srgb, var(--ms-on-primary) 16%, transparent);
  --ms-action-border: color-mix(in srgb, var(--ms-accent) 38%, transparent);
  --ms-action-border-hover: var(--ms-accent);
  --ms-action-icon: var(--ms-primary);
  --ms-action-icon-bg: color-mix(in srgb, var(--ms-accent) 18%, var(--ms-surface));
  --ms-action-chev: var(--ms-accent);
  --ms-action-shadow: 0 8px 22px color-mix(in srgb, var(--ms-primary) 11%, transparent);
  --ms-action-shadow-hover: 0 14px 30px color-mix(in srgb, var(--ms-primary) 18%, transparent);
  /* tipografia */
  --ms-font-display: Georgia, serif;
  --ms-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ms-display-weight: 600;
  --ms-font-action: var(--ms-font-body); /* título dos cards; marcas serifadas podem usar var(--ms-font-display) */
  --ms-action-title-size: 1rem;
  --ms-fs-label: 0.8125rem; /* 13px */
  --ms-fs-small: 0.875rem; /* 14px */
  --ms-fs-body: 1rem; /* 16px */
  --ms-fs-lead: 1.0625rem; /* 17px */
  --ms-fs-h3: 1.0625rem;
  --ms-fs-h2: 1.75rem; /* 28px */
  --ms-fs-h1: 2.5rem; /* 40px */
  /* foto */
  --ms-hero-pos: 50% 25%;
  --ms-hero-ratio: 1 / 1;
  --ms-hero-ratio-desktop: 4 / 5;
  --ms-hero-fade: 40%; /* altura do degradê quando .ms-hero__media tem data-fade */
  /* forma */
  --ms-radius: 16px;
  --ms-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.05);
  /* espaço (4/8) */
  --ms-s1: 4px;
  --ms-s2: 8px;
  --ms-s3: 12px;
  --ms-s4: 16px;
  --ms-s5: 24px;
  --ms-s6: 32px;
  --ms-s7: 48px;
  --ms-s8: 64px;
  --ms-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ms-hover: 0.18s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--ms-bg);
  color: var(--ms-text);
  font-family: var(--ms-font-body);
  font-size: var(--ms-fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ms-primary) 55%, transparent);
  outline-offset: 3px;
  border-radius: 8px;
}
.ms-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.ms-page {
  max-width: 36rem;
  margin: 0 auto;
  padding-bottom: calc(var(--ms-s8) + env(safe-area-inset-bottom, 0px));
}

/* ---------- Hero ---------- */
.ms-hero__media {
  position: relative;
  aspect-ratio: var(--ms-hero-ratio);
  overflow: hidden;
  /* Sem fundo próprio: com degradê (editor ou data-fade) a foto some direto no fundo
     da página, sem faixa cinza nem linha na emenda com o conteúdo. */
  background: transparent;
}
/* Placeholder só enquanto não há mídia. */
.ms-hero__media:not(:has(img, video)) { background: var(--ms-surface-alt); }
.ms-hero__media img,
.ms-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--ms-hero-pos);
}
/*
 * Degradê opcional sem editor: <div class="ms-hero__media" data-fade="bottom|curve">.
 * Curva suave (scrim) até transparente = funciona com qualquer --ms-bg.
 * :where() mantém especificidade baixa, então o Fade do editor (data-edge-fade) sempre vence.
 */
:where(.ms-hero__media[data-fade="bottom"]) > :is(img, video) {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--ms-hero-fade)), rgba(0,0,0,.738) calc(100% - var(--ms-hero-fade) * .81), rgba(0,0,0,.541) calc(100% - var(--ms-hero-fade) * .66), rgba(0,0,0,.382) calc(100% - var(--ms-hero-fade) * .53), rgba(0,0,0,.278) calc(100% - var(--ms-hero-fade) * .435), rgba(0,0,0,.194) calc(100% - var(--ms-hero-fade) * .35), rgba(0,0,0,.126) calc(100% - var(--ms-hero-fade) * .27), rgba(0,0,0,.075) calc(100% - var(--ms-hero-fade) * .198), rgba(0,0,0,.042) calc(100% - var(--ms-hero-fade) * .139), rgba(0,0,0,.021) calc(100% - var(--ms-hero-fade) * .09), rgba(0,0,0,.008) calc(100% - var(--ms-hero-fade) * .048), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - var(--ms-hero-fade)), rgba(0,0,0,.738) calc(100% - var(--ms-hero-fade) * .81), rgba(0,0,0,.541) calc(100% - var(--ms-hero-fade) * .66), rgba(0,0,0,.382) calc(100% - var(--ms-hero-fade) * .53), rgba(0,0,0,.278) calc(100% - var(--ms-hero-fade) * .435), rgba(0,0,0,.194) calc(100% - var(--ms-hero-fade) * .35), rgba(0,0,0,.126) calc(100% - var(--ms-hero-fade) * .27), rgba(0,0,0,.075) calc(100% - var(--ms-hero-fade) * .198), rgba(0,0,0,.042) calc(100% - var(--ms-hero-fade) * .139), rgba(0,0,0,.021) calc(100% - var(--ms-hero-fade) * .09), rgba(0,0,0,.008) calc(100% - var(--ms-hero-fade) * .048), transparent 100%);
}
:where(.ms-hero__media[data-fade="curve"]) > :is(img, video) {
  -webkit-mask-image: radial-gradient(70% 100% at 50% 0%, #000 calc(100% - var(--ms-hero-fade)), rgba(0,0,0,.738) calc(100% - var(--ms-hero-fade) * .81), rgba(0,0,0,.541) calc(100% - var(--ms-hero-fade) * .66), rgba(0,0,0,.382) calc(100% - var(--ms-hero-fade) * .53), rgba(0,0,0,.278) calc(100% - var(--ms-hero-fade) * .435), rgba(0,0,0,.194) calc(100% - var(--ms-hero-fade) * .35), rgba(0,0,0,.126) calc(100% - var(--ms-hero-fade) * .27), rgba(0,0,0,.075) calc(100% - var(--ms-hero-fade) * .198), rgba(0,0,0,.042) calc(100% - var(--ms-hero-fade) * .139), rgba(0,0,0,.021) calc(100% - var(--ms-hero-fade) * .09), rgba(0,0,0,.008) calc(100% - var(--ms-hero-fade) * .048), transparent 100%);
          mask-image: radial-gradient(70% 100% at 50% 0%, #000 calc(100% - var(--ms-hero-fade)), rgba(0,0,0,.738) calc(100% - var(--ms-hero-fade) * .81), rgba(0,0,0,.541) calc(100% - var(--ms-hero-fade) * .66), rgba(0,0,0,.382) calc(100% - var(--ms-hero-fade) * .53), rgba(0,0,0,.278) calc(100% - var(--ms-hero-fade) * .435), rgba(0,0,0,.194) calc(100% - var(--ms-hero-fade) * .35), rgba(0,0,0,.126) calc(100% - var(--ms-hero-fade) * .27), rgba(0,0,0,.075) calc(100% - var(--ms-hero-fade) * .198), rgba(0,0,0,.042) calc(100% - var(--ms-hero-fade) * .139), rgba(0,0,0,.021) calc(100% - var(--ms-hero-fade) * .09), rgba(0,0,0,.008) calc(100% - var(--ms-hero-fade) * .048), transparent 100%);
}
/* Com degradê a mídia encosta no texto sem quina/sombra aparecendo na emenda. */
.ms-hero__media:has(> [data-edge-fade]),
.ms-hero__media[data-fade] { box-shadow: none; border: 0; }
.ms-hero__body { padding: var(--ms-s5) var(--ms-s5) 0; }
.ms-rule {
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 0 var(--ms-s3);
  background: var(--ms-accent);
}
.ms-hero__role {
  margin: 0 0 var(--ms-s2);
  font-size: var(--ms-fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ms-primary);
}
.ms-hero__name {
  margin: 0;
  font-family: var(--ms-font-display);
  font-weight: var(--ms-display-weight);
  font-size: var(--ms-fs-h1);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ms-hero__lead {
  margin: var(--ms-s3) 0 0;
  max-width: 30rem;
  font-size: var(--ms-fs-lead);
  color: var(--ms-text-mid);
}
.ms-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-s1) var(--ms-s2);
  margin: var(--ms-s4) 0 0;
  font-size: var(--ms-fs-small);
  color: var(--ms-text-mid);
}
.ms-proof strong { color: var(--ms-text); font-weight: 600; }
.ms-stars { color: #b7791f; letter-spacing: 1px; }
/* Separador "·" que cai no início de uma linha fica escondido (clip à esquerda). */
.ms-proof { column-gap: 0; margin-left: -1.25em; clip-path: inset(-4px -4px -4px 1.25em); }
.ms-proof > span:not(.ms-proof__sep) { position: relative; margin-left: 1.25em; }
.ms-proof > span:not(.ms-proof__sep)::before {
  content: "\00B7";
  position: absolute;
  left: -1.25em;
  width: 1.25em;
  text-align: center;
  opacity: 0.5;
}
.ms-proof__sep { display: none; }

/* ---------- Ações ---------- */
.ms-main { padding: 0 var(--ms-s5); }
.ms-actions { display: grid; gap: var(--ms-s3); margin-top: var(--ms-s5); }
.ms-action {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  align-items: center;
  gap: var(--ms-s3);
  min-height: 64px;
  padding: var(--ms-s3) var(--ms-s4);
  border-radius: var(--ms-radius);
  background: var(--ms-surface);
  border: 1px solid var(--ms-action-border);
  box-shadow: var(--ms-action-shadow);
  color: var(--ms-text);
  text-decoration: none;
  transition: transform var(--ms-hover), box-shadow var(--ms-hover), border-color var(--ms-hover), background-color var(--ms-hover), filter var(--ms-hover);
}
.ms-action__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ms-action-icon-bg);
  color: var(--ms-action-icon);
}
.ms-action__title {
  display: block;
  font-family: var(--ms-font-action);
  font-size: var(--ms-action-title-size);
  font-weight: 600;
  line-height: 1.2;
}
.ms-action__sub {
  display: block;
  margin-top: 2px;
  font-size: var(--ms-fs-small);
  line-height: 1.4;
  color: var(--ms-text-mid);
}
.ms-action__chev { display: flex; color: var(--ms-action-chev); transition: transform var(--ms-hover); }
.ms-action--primary {
  background-color: var(--ms-primary); /* fallback se o gradiente não for suportado */
  background-image: var(--ms-primary-bg);
  border-color: transparent;
  color: var(--ms-on-primary);
  --ms-action-shadow: 0 10px 28px color-mix(in srgb, var(--ms-primary) 32%, transparent);
  --ms-action-shadow-hover: 0 16px 34px color-mix(in srgb, var(--ms-primary) 40%, transparent);
}
.ms-action--primary .ms-action__icon { background: var(--ms-primary-icon-bg); color: var(--ms-primary-icon); }
.ms-action--primary .ms-action__sub { color: color-mix(in srgb, var(--ms-on-primary) 86%, var(--ms-accent)); }
.ms-action--primary .ms-action__chev { color: var(--ms-primary-icon); }

/* Estados: sobe 2px + sombra um pouco maior + seta anda 3px (180ms). Toque: afunda ao pressionar. */
@media (hover: hover) {
  .ms-action:hover {
    transform: translateY(-2px);
    box-shadow: var(--ms-action-shadow-hover);
    border-color: var(--ms-action-border-hover);
  }
  .ms-action--primary:hover { border-color: transparent; filter: brightness(1.07); }
  .ms-action:hover .ms-action__chev { transform: translateX(3px); }
}
.ms-action:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--ms-action-shadow-hover);
  outline: 3px solid color-mix(in srgb, var(--ms-primary) 55%, transparent);
  outline-offset: 3px;
  border-radius: var(--ms-radius);
}
.ms-action:focus-visible .ms-action__chev { transform: translateX(3px); }
.ms-action:active {
  transform: translateY(1px);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--ms-primary) 14%, transparent);
  transition-duration: 0.08s;
}

/* ---------- Seções ---------- */
.ms-section { padding-top: var(--ms-s7); }
.ms-label {
  margin: 0 0 var(--ms-s2);
  font-size: var(--ms-fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ms-primary);
}
.ms-h2 {
  margin: 0 0 var(--ms-s4);
  font-family: var(--ms-font-display);
  font-weight: var(--ms-display-weight);
  font-size: var(--ms-fs-h2);
  line-height: 1.1;
}
.ms-list { display: grid; gap: var(--ms-s3); margin: 0; padding: 0; list-style: none; }
.ms-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--ms-s3);
  padding: var(--ms-s4);
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
}
.ms-item__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--ms-fs-small);
  font-weight: 600;
  background: color-mix(in srgb, var(--ms-primary) 10%, var(--ms-surface));
  color: var(--ms-primary);
}
.ms-item h3 { margin: 0 0 2px; font-size: var(--ms-fs-h3); font-weight: 600; line-height: 1.35; }
.ms-item p { margin: 0; color: var(--ms-text-mid); }

/* ---------- Avaliações ---------- */
.ms-reviews { display: grid; gap: var(--ms-s3); }
.ms-review {
  margin: 0;
  padding: var(--ms-s4);
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
}
.ms-review__head { display: flex; align-items: center; gap: var(--ms-s3); margin-bottom: var(--ms-s2); }
.ms-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--ms-fs-small);
  font-weight: 600;
  background: var(--ms-surface-alt);
  color: var(--ms-text);
}
.ms-review__name { display: block; font-weight: 600; line-height: 1.25; }
.ms-review__meta { display: block; font-size: var(--ms-fs-small); color: var(--ms-text-mid); }
.ms-review blockquote { margin: 0; }
.ms-review blockquote p { margin: 0; }
.ms-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-s2);
  min-height: 44px;
  margin-top: var(--ms-s2);
  font-weight: 600;
  color: var(--ms-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---------- Sobre ---------- */
.ms-about p { margin: 0 0 var(--ms-s3); }
.ms-facts { display: flex; flex-wrap: wrap; gap: var(--ms-s2); margin: var(--ms-s4) 0 0; padding: 0; list-style: none; }
.ms-facts li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ms-surface-alt);
  font-size: var(--ms-fs-small);
  color: var(--ms-text);
}
.ms-registro { margin: var(--ms-s4) 0 0; font-size: var(--ms-fs-small); color: var(--ms-text-mid); }
.ms-todo { padding: 0 4px; border-radius: 4px; background: #fff3cd; color: #664d03; font-weight: 600; }

/* ---------- FAQ ---------- */
.ms-faq { border-top: 1px solid var(--ms-border); }
.ms-faq details { border-bottom: 1px solid var(--ms-border); }
.ms-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-s3);
  min-height: 56px;
  padding: var(--ms-s3) 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.ms-faq summary::-webkit-details-marker { display: none; }
.ms-faq summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--ms-primary);
  border-bottom: 2px solid var(--ms-primary);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.ms-faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.ms-faq details p { margin: 0 0 var(--ms-s4); color: var(--ms-text-mid); }

/* ---------- CTA final ---------- */
.ms-final {
  margin-top: var(--ms-s7);
  padding: var(--ms-s6) var(--ms-s5);
  border-radius: calc(var(--ms-radius) + 4px);
  background: var(--ms-primary);
  color: var(--ms-on-primary);
  text-align: center;
}
.ms-final .ms-h2 { margin-bottom: var(--ms-s2); color: inherit; }
.ms-final p { margin: 0 auto; max-width: 24rem; color: color-mix(in srgb, var(--ms-on-primary) 90%, transparent); }
.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-s2);
  min-height: 52px;
  padding: 0 var(--ms-s5);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--ms-hover), box-shadow var(--ms-hover), background-color var(--ms-hover), filter var(--ms-hover);
}
.ms-btn--light { margin-top: var(--ms-s5); background: var(--ms-on-primary); color: var(--ms-primary-dark); }
.ms-btn--primary { background-color: var(--ms-primary); background-image: var(--ms-primary-bg); color: var(--ms-on-primary); }
@media (hover: hover) {
  .ms-btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 10px 24px color-mix(in srgb, var(--ms-primary-dark) 26%, transparent); }
}
.ms-btn:focus-visible { transform: translateY(-2px); border-radius: 999px; }
.ms-btn:active { transform: translateY(1px); box-shadow: none; transition-duration: 0.08s; }

/* ---------- Logo (opcional, regra no SKILL.md §7.1) ---------- */
/* Logo pequeno acima do nome (lead com foto + logo, ou logo horizontal). */
.ms-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 140px;
  max-height: 40px;
  margin: 0 0 var(--ms-s3);
  object-fit: contain;
}
.ms-logo--wide { width: 120px; max-width: 120px; max-height: 48px; }
/* Hero sem foto grande (formato Linktree): avatar redondo com foto ou logo quadrado/redondo. */
.ms-hero__avatar {
  width: 120px;
  height: 120px;
  margin: var(--ms-s6) auto 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ms-surface-alt);
  box-shadow: 0 0 0 3px var(--ms-bg), 0 0 0 4px var(--ms-action-border), var(--ms-shadow);
  animation: ms-fade 0.7s var(--ms-ease) both;
}
.ms-hero__avatar img,
.ms-hero__avatar video { width: 100%; height: 100%; object-fit: cover; object-position: var(--ms-hero-pos); }
.ms-avatar--logo { background: #ffffff; }
.ms-avatar--logo img,
.ms-avatar--logo video { object-fit: contain; padding: 16%; }
.ms-hero--avatar .ms-hero__body { text-align: center; }
.ms-hero--avatar .ms-rule,
.ms-hero--avatar .ms-logo,
.ms-hero--avatar .ms-hero__lead { margin-left: auto; margin-right: auto; }
/* Centralizado: o truque do separador não funciona, então usa só espaço entre os itens. */
.ms-hero--avatar .ms-proof { justify-content: center; margin-left: 0; clip-path: none; column-gap: var(--ms-s4); }
.ms-hero--avatar .ms-proof > span:not(.ms-proof__sep) { margin-left: 0; }
.ms-hero--avatar .ms-proof > span:not(.ms-proof__sep)::before { content: none; }

/* ---------- Rodapé ---------- */
.ms-footer {
  padding: var(--ms-s7) var(--ms-s5) var(--ms-s6);
  text-align: center;
  font-size: var(--ms-fs-small);
  color: var(--ms-text-mid);
}
.ms-footer p { margin: 0 0 var(--ms-s2); }
.ms-footer__tag { font-family: var(--ms-font-display); font-size: 1.25rem; font-style: italic; font-weight: 500; color: var(--ms-text); }
.ms-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--ms-s4); margin: var(--ms-s2) 0; }
.ms-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  color: var(--ms-text);
  text-decoration: none;
}
.ms-footer__credit a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- CTA fixo (celular) ---------- */
.ms-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: var(--ms-s5) var(--ms-s4) calc(var(--ms-s3) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--ms-bg) 55%, transparent);
  transform: translateY(110%);
  transition: transform 0.3s var(--ms-ease);
  pointer-events: none;
}
.ms-sticky.is-shown { transform: none; pointer-events: auto; }
.ms-sticky .ms-btn {
  display: flex;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ms-primary) 30%, transparent);
}

/* ---------- Desktop: 2 colunas, nada de coluna estreita em fundo vazio ---------- */
@media (min-width: 960px) {
  .ms-page {
    display: grid;
    grid-template-columns: minmax(0, 25rem) minmax(0, 36rem);
    justify-content: center;
    align-items: start;
    column-gap: clamp(3rem, 6vw, 6rem);
    max-width: 72rem;
    padding: var(--ms-s7) var(--ms-s6);
  }
  .ms-hero { position: sticky; top: var(--ms-s7); grid-row: 1 / span 2; }
  .ms-hero__media { aspect-ratio: var(--ms-hero-ratio-desktop); border-radius: calc(var(--ms-radius) + 8px); }
  .ms-hero__body { padding: var(--ms-s5) 0 0; }
  .ms-hero--avatar .ms-hero__avatar { width: 160px; height: 160px; margin-top: 0; }
  .ms-main { padding: 0; }
  .ms-actions { margin-top: 0; }
  .ms-footer { grid-column: 2; padding: var(--ms-s7) 0 0; text-align: left; }
  .ms-footer__links { justify-content: flex-start; }
  .ms-sticky { display: none; }
}

/* ---------- Movimento (sutil) ---------- */
@keyframes ms-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ms-rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: none; } }
/* Hero: só CSS, termina visível mesmo sem JS */
.ms-hero__media { animation: ms-fade 0.7s var(--ms-ease) both; }
.ms-hero__body { animation: ms-rise 0.6s var(--ms-ease) 0.1s both; }
.ms-actions { animation: ms-rise 0.6s var(--ms-ease) 0.2s both; }
/* Reveal no scroll: só esconde quando o JS ligou (html.ms-reveal-on). Sem JS = tudo visível.
   Usa a propriedade translate (não transform) e o JS tira o data-reveal quando termina,
   então o hover dos cards nunca herda o atraso/duração do reveal. */
html.ms-reveal-on [data-reveal] {
  transition: opacity 0.5s var(--ms-ease), translate 0.5s var(--ms-ease);
  transition-delay: var(--ms-delay, 0ms);
}
html.ms-reveal-on [data-reveal]:not(.is-in) { opacity: 0; translate: 0 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.ms-reveal-on [data-reveal]:not(.is-in) { opacity: 1; translate: none; }
  /* Sem movimento: fica só a troca de cor/borda/sombra. */
  .ms-action, .ms-btn { transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, filter 0.18s ease !important; }
  .ms-action:hover, .ms-action:focus-visible, .ms-action:active,
  .ms-btn:hover, .ms-btn:focus-visible, .ms-btn:active,
  .ms-action:hover .ms-action__chev, .ms-action:focus-visible .ms-action__chev { transform: none !important; }
}
@media print {
  html.ms-reveal-on [data-reveal]:not(.is-in) { opacity: 1; translate: none; }
  .ms-sticky { display: none; }
}