/* Molde avalon: clone de https://avalonbroker.com/ para /carne-leao-medico do Seu Plantão.
   Gerado por moldes/avalon/ferramentas/montar.mjs (molde, acabamento e blocos da rede podados + iphone.css + marca.css): não editar à mão. */
/* molde avalon — composição das 12 seções de https://avalonbroker.com/ (captura de 04/11/2026, 22:13),
   refeita em classes av-* porque a origem é Framer (classes sorteadas, posição absoluta). Medidas lidas na
   ref-1440.png e ref-390.png. Cor só por papel (var(--m-*)); a paleta da origem mora em origem.css (prova)
   e a do domínio em clone/identidades/<dom>.css. O desvio deliberado (vão 120/72, herói 100svh, UM fundo)
   mora em acabamento.css. */
:where(.mx-av, .mx-av *:not(svg, svg *), .mx-av ::before, .mx-av ::after) { all: revert; }
.mx-av { display: block; position: relative; isolation: isolate; background: var(--m-fundo); color: var(--m-texto); font-family: var(--m-f-corpo); font-size: 16px; line-height: 1.55; overflow-wrap: break-word; }
.mx-av *, .mx-av ::before, .mx-av ::after { box-sizing: border-box; }
.mx-av :is(h1, h2, h3) { font-family: var(--m-f-titulo); text-wrap: balance; margin: 0; }
.mx-av p { margin: 0; }
.mx-av img { max-width: 100%; display: block; }
.mx-av section { position: relative; width: min(100% - 32px, 1060px); margin-inline: auto; }
.mx-av .av-centro { text-align: center; max-width: 760px; margin-inline: auto; }
.mx-av .av-eyebrow { color: var(--m-texto-suave); font-size: clamp(16px, 1.5vw, 22px); }
.mx-av .av-h2 { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -.01em; color: var(--m-texto); }
.mx-av .av-h2 em { font-style: normal; color: var(--m-destaque); }
.mx-av .av-sub { margin-top: 14px; color: var(--m-texto-suave); font-size: 15px; }
.mx-av .av-corpo { margin-top: 28px; color: var(--m-texto-suave); display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.mx-av .av-corpo p { max-width: 66ch; }
.mx-av .av-corpo--centro { text-align: center; justify-items: center; }

/* botões: UM tamanho para todo botão de ação (o da referência: verde, 48 px, raio 8) */
.mx-av .av-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 26px; }
.mx-av .av-ctas--esq { justify-content: flex-start; }
.mx-av a.av-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 14px 30px; border-radius: var(--m-raio-botao, 10px); background: var(--m-primaria); color: var(--m-sobre-primaria); font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; text-align: center; box-shadow: 0 0 0 4px color-mix(in srgb, var(--m-primaria), transparent 82%); transition: transform .18s cubic-bezier(.22,1,.36,1), background-color .18s; }
.mx-av a.av-btn--leve { background: transparent; color: var(--m-texto); box-shadow: none; border: 1px solid var(--m-borda); }
.mx-av a.av-btn:active { transform: scale(.98); }
.mx-av a.av-btn:focus-visible { outline: 2px solid var(--m-destaque); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .mx-av a.av-btn:hover { transform: translateY(-2px); } .mx-av a.av-btn:not(.av-btn--leve):hover { background: color-mix(in srgb, var(--m-primaria), black 12%); } }
.mx-av .av-seta { width: 8px; height: 8px; border-right: 2px solid var(--m-destaque); border-bottom: 2px solid var(--m-destaque); transform: rotate(45deg) translate(-2px, -2px); }
.mx-av .av-ja-tem { margin-top: 14px; font-size: 14px; color: var(--m-texto-suave); }
.mx-av .av-ja-tem a { color: var(--m-destaque); }

/* 0 · herói: texto centrado + mockup grande com cartões flutuantes e toast */
.mx-av .av-heroi { text-align: center; padding-top: 48px; }
.mx-av .av-heroi-txt { max-width: 860px; margin-inline: auto; }
.mx-av .av-h1 { font-size: clamp(32px, 4.3vw, 62px); line-height: 1.05; font-weight: 700; letter-spacing: -.015em; }
.mx-av .av-h1 em { font-style: normal; color: var(--m-destaque); }
.mx-av .av-heroi-sub { margin-top: 18px; color: var(--m-texto-suave); font-size: clamp(15px, 1.15vw, 17px); }
.mx-av .av-heroi-texto { margin: 12px auto 0; max-width: 66ch; color: var(--m-texto-suave); font-size: 15px; }
.mx-av .av-mock { position: relative; margin: 40px auto 0; width: min(100%, 980px); }
.mx-av .av-mock-tela { border-radius: 26px; padding: 12px; background: var(--m-superficie-2); border: 1px solid var(--m-borda); box-shadow: 0 40px 80px -30px rgb(0 0 0 / .55); overflow: hidden; }
.mx-av .av-mock-img { width: 100%; height: auto; border-radius: 16px; }
.mx-av .av-flut { position: absolute; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 10px; align-items: center; text-align: left; width: clamp(150px, 17vw, 210px); padding: 14px 16px; border-radius: 14px; background: var(--m-superficie); border: 1px solid var(--m-borda); box-shadow: 0 24px 48px -20px rgb(0 0 0 / .6); animation: mx-av-flutua 6s ease-in-out infinite; }
.mx-av .av-flut--1 { left: -4%; bottom: 6%; }
.mx-av .av-flut--2 { left: 4%; top: -5%; animation-delay: -3s; }
.mx-av .av-flut-ic { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--m-sobre-primaria); background: var(--m-primaria); }
.mx-av .av-flut-n { font-weight: 600; font-size: 16px; color: var(--m-texto); }
.mx-av .av-flut-v { font-size: 13px; color: var(--m-texto-suave); display: flex; align-items: center; gap: 6px; }
.mx-av .av-flut-seta { width: 0; height: 0; border-inline: 5px solid transparent; border-bottom: 7px solid var(--m-alta, var(--m-destaque)); animation: mx-av-pulsa 1.6s ease-in-out infinite; }
.mx-av .av-flut-seta--b { border-bottom: 0; border-top: 7px solid var(--m-baixa, var(--m-destaque)); }
.mx-av .av-mini { grid-column: 1 / -1; width: 100%; height: 30px; margin-top: 8px; }
.mx-av .av-mini path, .mx-av .av-linha path { fill: none; stroke: var(--m-destaque); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: mx-av-traco 2.4s cubic-bezier(.22,1,.36,1) .3s forwards; }
.mx-av .av-toast { position: absolute; right: -5%; top: 30%; display: flex; gap: 12px; align-items: flex-start; width: clamp(220px, 24vw, 300px); padding: 16px; border-radius: 14px; text-align: left; background: var(--m-superficie); border: 1px solid var(--m-borda); box-shadow: 0 24px 48px -20px rgb(0 0 0 / .6); font-size: 13px; color: var(--m-texto-suave); animation: mx-av-toast 7s cubic-bezier(.22,1,.36,1) infinite; }
.mx-av .av-toast img { width: 28px; height: 28px; flex: none; }
.mx-av .av-toast strong { display: block; color: var(--m-texto); font-size: 14px; margin-bottom: 4px; }

/* 1 · número grande + título */
.mx-av .av-grande-topo { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.mx-av .av-grande-n { display: grid; font-family: var(--m-f-titulo); font-weight: 700; line-height: .9; color: var(--m-texto); }
.mx-av .av-grande-n span { font-size: clamp(56px, 9.5vw, 136px); letter-spacing: -.03em; background: linear-gradient(90deg, var(--m-primaria-2, var(--m-primaria)) 0 22%, var(--m-texto) 22%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mx-av .av-grande-n small { font-size: 14px; font-weight: 500; color: var(--m-texto-suave); margin-top: 10px; line-height: 1.3; }
.mx-av .av-h2--grande { text-align: left; }

/* 2 · faixa corrida */
.mx-av .av-faixa { width: 100%; overflow: clip; padding-block: 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mx-av .av-faixa-trilho { display: flex; width: max-content; animation: mx-av-corre 48s linear infinite; }
.mx-av .av-faixa ul { display: flex; gap: 14px; padding: 0 7px; margin: 0; list-style: none; }
.mx-av .av-faixa a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 18px; border-radius: 10px; background: var(--m-superficie); border: 1px solid var(--m-borda); color: var(--m-texto); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.mx-av .av-faixa-p { width: 10px; height: 10px; border-radius: 50%; background: var(--m-destaque); }
@media (hover: hover) { .mx-av .av-faixa:hover .av-faixa-trilho { animation-play-state: paused; } }

/* 3 · depósito: ícone, título, celular com o app + cartão flutuante + linha */
.mx-av .av-ic { width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 16px; background: var(--m-superficie); border: 1px solid var(--m-borda); }
.mx-av .av-ic img { width: 34px; height: 34px; }
.mx-av .av-dep-cena { position: relative; margin-top: 36px; display: grid; place-items: center; min-height: 420px; }
.mx-av .av-linha { position: absolute; inset: 22% 0 auto; width: 100%; height: 45%; opacity: .55; }
.mx-av .av-cel { position: relative; width: clamp(200px, 24vw, 300px); aspect-ratio: 9 / 18; border-radius: 34px; padding: 10px; background: var(--m-superficie-2); border: 1px solid var(--m-borda); box-shadow: 0 40px 80px -30px rgb(0 0 0 / .6); overflow: hidden; }
.mx-av .av-dep-cartao { position: absolute; right: max(0px, 50% - 380px); bottom: 10%; width: clamp(200px, 26vw, 300px); padding: 16px 18px; border-radius: 14px; background: var(--m-superficie); border: 1px solid var(--m-borda); box-shadow: 0 24px 48px -20px rgb(0 0 0 / .6); display: grid; gap: 10px; text-align: left; animation: mx-av-flutua 6s ease-in-out infinite; }

/* 4/5 · texto ao lado da peça */
.mx-av .av-lado-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 72px); align-items: center; }
.mx-av .av-lado--inv .av-peca { order: 2; }
.mx-av .av-h2--esq { text-align: left; }
.mx-av .av-lado-txt .av-corpo { margin-top: 18px; }
.mx-av .av-peca { position: relative; margin: 0; min-height: 320px; display: grid; place-items: center; }
.mx-av .av-verde { position: absolute; inset: 0 18% 0 0; border-radius: 24px; background: var(--m-primaria); }
.mx-av .av-painel { position: relative; width: 82%; margin-left: 18%; border-radius: 16px; overflow: hidden; border: 1px solid var(--m-borda); box-shadow: 0 30px 60px -24px rgb(0 0 0 / .65); transform: rotate(-3deg); }
.mx-av .av-painel-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }
.mx-av .av-mancha { position: absolute; inset: 6% -8% 6% 26%; border-radius: 48% 24px 24px 48%; background: var(--m-primaria); }
.mx-av .av-tab { position: relative; width: 86%; border-radius: 22px; padding: 10px; background: var(--m-superficie-2); border: 1px solid var(--m-borda); box-shadow: 0 30px 60px -24px rgb(0 0 0 / .65); }
.mx-av .av-tab-img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 14px; }

/* 6 · bento */
.mx-av .av-bento-g { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mx-av .av-bento-c { padding: 22px; border-radius: 14px; background: var(--m-superficie-2); border: 1px solid var(--m-borda); display: grid; align-content: start; gap: 10px; }
.mx-av .av-bento-c h3 { font-size: 18px; line-height: 1.25; color: var(--m-texto); }
.mx-av .av-bento-c p { font-size: 15px; color: var(--m-texto-suave); }
.mx-av .av-bento-i { font-family: var(--m-f-titulo); font-weight: 700; color: var(--m-destaque); font-size: 15px; }
.mx-av .av-bento-c--verde { background: var(--m-primaria); text-align: center; place-content: center; }
.mx-av .av-bento-c--verde p { color: var(--m-sobre-primaria); }
.mx-av .av-bento-n { font-family: var(--m-f-titulo); font-weight: 700; font-size: clamp(36px, 4vw, 56px); line-height: 1; }
.mx-av .av-bento-c--tela { padding: 0; overflow: hidden; }
.mx-av .av-bento-img { width: 100%; height: 100%; min-height: 160px; object-fit: cover; }

/* 7 · faixa escura com imagem */
.mx-av .av-banda { width: 100%; }
.mx-av .av-banda-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; width: min(100% - 32px, 1060px); margin-inline: auto; padding-block: 48px; }
.mx-av .av-selo { display: inline-block; padding: 6px 12px; border-radius: 6px; background: color-mix(in srgb, var(--m-primaria), transparent 80%); color: var(--m-destaque); font-size: 15px; margin-bottom: 16px; }
.mx-av .av-h2--banda { color: var(--m-destaque); font-weight: 500; font-size: clamp(28px, 3.3vw, 46px); }
/* faixa sem print (os quatro já entraram na página): o texto ocupa a faixa, sem coluna vazia */
.mx-av .av-banda--so .av-banda-in { grid-template-columns: minmax(0, 1fr); }

/* 8 · ferramentas */

/* 9 · passos em linha do tempo */
.mx-av .av-h2--passos em { color: var(--m-destaque); }
.mx-av .av-passos-l { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 40px; position: relative; }
.mx-av .av-passos-l::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: var(--m-borda); }
.mx-av .av-passo { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: start; }
.mx-av .av-passo-n { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; color: var(--m-texto); background: var(--m-superficie-2); border: 3px solid var(--m-borda); }
.mx-av .av-passo-r { color: var(--m-destaque); font-size: 14px; }
.mx-av .av-passo h3 { font-size: clamp(20px, 1.9vw, 26px); color: var(--m-texto); margin: 2px 0 8px; }
.mx-av .av-passo p:not(.av-passo-r) { color: var(--m-texto-suave); font-size: 15px; }

/* 10 · FAQ */
.mx-av .av-faq-l { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 10px; }
.mx-av .av-faq-i { border-radius: 10px; background: var(--m-superficie); border: 1px solid var(--m-borda); }
.mx-av .av-faq-i summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; padding: 14px 18px; }
.mx-av .av-faq-i summary::-webkit-details-marker { display: none; }
.mx-av .av-faq-i h3 { font-size: 16px; font-weight: 500; color: var(--m-texto); }
.mx-av .av-faq-s { flex: none; width: 9px; height: 9px; border-right: 2px solid var(--m-destaque); border-bottom: 2px solid var(--m-destaque); transform: rotate(-45deg); transition: transform .2s; }
.mx-av .av-faq-i[open] .av-faq-s { transform: rotate(45deg); }
.mx-av .av-faq-a { padding: 0 18px 18px; color: var(--m-texto-suave); font-size: 15px; }
.mx-av .av-faq-mais { display: flex; margin: 18px auto 0; min-height: 44px; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--m-borda); background: transparent; color: var(--m-texto); font: inherit; cursor: pointer; }

/* 11 · faixa escura final */
.mx-av .av-final { width: 100%; background: var(--m-superficie); border-block: 1px solid var(--m-borda); }
.mx-av .av-final-in { width: min(100% - 32px, 1060px); margin-inline: auto; padding-block: 28px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.mx-av .av-final-ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--m-destaque); }
.mx-av .av-final-ic img { width: 30px; height: 30px; }
.mx-av .av-h2--final { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; }
.mx-av .av-final-txt { display: grid; gap: 6px; color: var(--m-texto-suave); font-size: 15px; }
.mx-av .av-final-acao { display: grid; justify-items: center; }
.mx-av .av-ja-tem--final { margin-top: 10px; }

/* relacionadas */
.mx-av .av-h2--rel { font-size: clamp(22px, 2.2vw, 30px); }
.mx-av .av-rel-l { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mx-av .av-rel-c a { display: grid; gap: 8px; height: 100%; align-content: start; padding: 18px; border-radius: 14px; background: var(--m-superficie); border: 1px solid var(--m-borda); color: var(--m-texto); text-decoration: none; transition: transform .18s; }
.mx-av .av-rel-c h3 { font-size: 16px; }
.mx-av .av-rel-c p { font-size: 14px; color: var(--m-texto-suave); }
.mx-av .av-rel-ler { margin-top: auto; font-size: 14px; color: var(--m-destaque); }
@media (hover: hover) and (pointer: fine) { .mx-av .av-rel-c a:hover { transform: translateY(-3px); } }

/* movimento: só transform e opacity; menos movimento desliga */
@keyframes mx-av-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes mx-av-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes mx-av-traco { to { stroke-dashoffset: 0; } }
@keyframes mx-av-corre { to { transform: translateX(-50%); } }
@keyframes mx-av-toast { 0%, 4% { opacity: 0; transform: translateX(24px); } 10%, 82% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateX(24px); } }
@media (prefers-reduced-motion: reduce) {
  .mx-av .av-flut, .mx-av .av-dep-cartao, .mx-av .av-faixa-trilho, .mx-av .av-toast, .mx-av .av-flut-seta { animation: none; }
  .mx-av .av-mini path, .mx-av .av-linha path { animation: none; stroke-dashoffset: 0; }
}

/* celular: a MESMA composição, lado a lado onde o computador é lado a lado (doutrina) */
@media (max-width: 47.99rem) {
  .mx-av section { width: min(100% - 24px, 1060px); }
  .mx-av .av-ctas a.av-btn { flex: 1 1 9rem; padding-inline: 14px; }
  .mx-av .av-mock { margin-top: 28px; width: 100%; }
  .mx-av .av-mock-tela { padding: 6px; border-radius: 16px; }
  .mx-av .av-mock-img { border-radius: 11px; }
  .mx-av .av-flut { width: 132px; padding: 10px; column-gap: 8px; }
  .mx-av .av-flut-ic { width: 26px; height: 26px; font-size: 13px; }
  .mx-av .av-flut-n { font-size: 13px; }
  .mx-av .av-flut--1 { left: -2px; bottom: -22%; }
  .mx-av .av-flut--2 { left: auto; right: -2px; top: auto; bottom: -22%; }
  .mx-av .av-mini { height: 20px; margin-top: 4px; }
  .mx-av .av-toast { display: none; }
  .mx-av .av-heroi .av-mock { margin-bottom: 64px; }
  .mx-av .av-grande-topo { gap: 14px; }
  .mx-av .av-dep-cena { min-height: 340px; }
  .mx-av .av-cel { width: 54%; }
  .mx-av .av-dep-cartao { right: 0; bottom: 4%; width: 52%; padding: 12px; }
  .mx-av .av-lado-grade { gap: 14px; align-items: start; }
  .mx-av .av-peca { min-height: 180px; }
  /* a mancha do tablet saía 8% da peça para a direita: com a peça na coluna da borda, 2 px de rolagem lateral a 390 */
  .mx-av .av-mancha { right: 0; }
  .mx-av .av-lado-txt .av-corpo, .mx-av .av-lado-txt .av-ctas { grid-column: 1 / -1; }
  .mx-av .av-bento-g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mx-av .av-bento-c { padding: 14px; }
  .mx-av .av-bento-c h3 { font-size: 16px; }
  .mx-av .av-bento-c p { font-size: 14px; }
  .mx-av .av-banda-in { gap: 12px; padding-block: 32px; }
  .mx-av .av-final-in { grid-template-columns: auto minmax(0, 1fr); }
  .mx-av .av-final-acao { grid-column: 1 / -1; }
  .mx-av .av-rel-l { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* ==========================================================================================
   Acabamento do molde avalon nas rotas (04/11/2026): só o desvio deliberado da composição da referência
   (https://avalonbroker.com/, clara) e o que a rota pede. Cor só por var(--m-*).
   1. Raiz: UM fundo (o do domínio), quebra de palavra na raiz; UM tamanho de botão de ação.
   2. Herói de 100svh, conteúdo abaixo do menu do domínio (--av-topo, medido pelo molde.js).
   3. Teto de vão 120/72 entre seções; grades em minmax(0, 1fr).
   4. Faixa final como cartão (a faixa de ponta a ponta em outra cor seria um 2º fundo).
   5. Blocos da rota (tabela, ficha, citação) dentro das seções av-*; celular lado a lado.
   6. Quadro das rotas de confiança, guias relacionados, indep e fecho.
   7. Animação contínua parada fora da tela e com a aba escondida (molde.js).
   ========================================================================================== */

/* ---------- 1 · raiz ---------- */
.mx-av.mx-raiz { background: var(--m-fundo); color: var(--m-texto); overflow-wrap: break-word; font-family: var(--m-f-corpo); }
.mx-av.mx-raiz a.av-btn { box-sizing: border-box; max-width: 100%; min-height: 48px; padding: 14px clamp(22px, 2.2vw, 32px); font-size: clamp(16px, 1.1vw, 17px); text-wrap: balance; }
/* texto branco sobre cor viva: o primário dos domínios é escuro o bastante (sobre-primaria) */
.mx-av.mx-raiz a.av-btn:not(.av-btn--leve) { background: var(--m-primaria); color: var(--m-sobre-primaria); }
/* UM botão por papel (05/11/2026): todo "criar conta" da página (o do molde, o do menu e o do rodapé do chassi e o
   do aviso pp) no MESMO desenho — pílula na cor primária do domínio, texto branco 700, 16 px, 48 px de altura.
   O do aviso tinha 57 px e peso 700; o do rodapé, texto escuro e 600; o do menu, 13 px e 43 px de altura */
.mx-av.mx-raiz a.av-btn:not(.av-btn--leve) {
  box-sizing: border-box; min-height: 48px; padding-block: 12px; border-radius: 999px;
  /* fora da .mx-raiz a paleta não chega: --av-primaria (molde.js) e, sem script, o azul 600 do chassi */
  background: var(--m-primaria, var(--av-primaria, var(--brand-600, #0d63b0))); background-image: none; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.2;
}

/* ---------- 2 · herói ---------- */
.mx-av .av-heroi { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: space-evenly; padding-block: calc(var(--av-topo, 0px) + clamp(16px, 3svh, 40px)) clamp(20px, 4svh, 48px); contain: paint; }
/* o mockup cabe no que sobra da primeira tela no computador (tela baixa encolhe o objeto pela altura) */
@media (min-width: 64rem) {
  .mx-av .av-mock { width: max(min(100%, 640px), min(100%, 980px, calc((100svh - var(--av-topo, 0px) - 320px) * 1.79))); }
}
.mx-av .av-heroi .av-ctas { margin-top: 22px; }
/* celular (05/11/2026): a sobra dos 100svh já se divide em 3 vãos iguais (space-evenly); o respiro fixo de cima e
   de baixo somava em cima dela e passava do teto de 72 (cabeçalho → título 69–75, herói → seção seguinte 76–107) */
@media (max-width: 47.99rem) {
  .mx-av .av-heroi { padding-block: calc(var(--av-topo, 0px) + 8px) 0; }
  .mx-av .av-heroi .av-mock { margin-top: 12px; }
  .mx-av .av-heroi .av-ctas { margin-top: 18px; }
}

/* ---------- 3 · vãos ---------- */
/* soma de baixo + cima entre duas seções: 104 px no computador, 32 no celular */
.mx-av.mx-raiz > section:not(.av-heroi) { padding-block: clamp(16px, 3.6vw, 52px); margin-block: 0; }
.mx-av.mx-raiz > :is(nav, aside) { margin-block: 0; }
.mx-av.mx-raiz > section.av-faixa { padding-block: 8px; }
.mx-av .av-banda-in { padding-block: 0; }
@media (max-width: 47.99rem) {
  /* os cartões flutuantes pendem 18% abaixo do mockup: a margem cobre só o que pende */
  /* o cartão pende 18% da altura do mockup (print 1200×671 ≈ 10% da largura): a margem acompanha a largura e a
     seção logo depois do herói abre com 8 px (a 360 o vão herói → 1ª seção media 78) */
  .mx-av .av-heroi .av-mock { margin-bottom: calc(10% + 4px); }
  .mx-av.mx-raiz > section.av-heroi + section:not(.av-heroi) { padding-top: 8px; }
  .mx-av .av-heroi :is(.av-flut--1, .av-flut--2) { bottom: -18%; }
  /* cartão que encosta nas duas bordas a 390 (bento, ficha) não termina dentro da janela de leitura do encontro
     ([b-24, b-6]): 26 px embaixo, 16 em cima (vão entre seções 42 + o de dentro, abaixo do teto de 72) */
  .mx-av.mx-raiz > section:not(.av-heroi) { padding-block: 16px 26px; }
  .mx-av .av-dep-cena { margin-top: 20px; }
  .mx-av .av-bento-g, .mx-av .av-passos-l, .mx-av .av-faq-l { margin-top: 20px; }
  .mx-av .av-passos-l { gap: 24px; }
  .mx-av .av-corpo { margin-top: 18px; }
}

/* ---------- 4 · faixa final como cartão ---------- */
/* UM fundo (05/11/2026): o cartão final e as pílulas da faixa corrida pintavam a superfície (≈ 8,16,24) sobre o
   fundo (≈ 4,9,15) em mais de 70% da largura, e o encontro lia caixa cortada (#mx-continue→.av-final e as duas
   bordas da .av-faixa). Ficam só no contorno, sobre o fundo da página */
.mx-av.mx-raiz > section.av-final { width: min(100% - 32px, 1060px); margin: clamp(16px, 3.6vw, 52px) auto; padding-block: 0; background: none; border: 0; }
.mx-av .av-final-in { width: 100%; padding: clamp(20px, 2.6vw, 32px); border-radius: 20px; background: transparent; border: 1px solid var(--m-borda); }
.mx-av.mx-raiz .av-faixa a { background: transparent; }
/* celular: sem o cartão pintado, o vão "relacionadas → final" somava o respiro de baixo da seção (26), a margem do
   final (16) e o recheio do contorno (20) até o texto: 82 > 72. A margem cai e o recheio de cima encurta */
@media (max-width: 47.99rem) {
  .mx-av.mx-raiz > section.av-final { margin-top: 0; }
  .mx-av .av-final-in { padding-top: 12px; }
}

/* ---------- 5 · blocos da rota dentro das seções ---------- */
.mx-av .av-corpo :is(ul, ol) { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.mx-av .av-corpo :is(h3, h4) { margin: 6px 0 0; color: var(--m-texto); font-size: clamp(17px, 1.4vw, 20px); }
.mx-av .av-corpo a { color: var(--m-destaque); }
.mx-av .av-corpo strong { color: var(--m-texto); }
.mx-av .av-corpo--centro { max-width: 760px; margin-inline: auto; }

/* ferramentas no computador: introdução + cartões em grade de 3 */
/* bento: 3 colunas no computador; linha incompleta fecha com o último largo */
.mx-av .av-bento-g:is([data-n="5"], [data-n="8"]) > :last-child { grid-column: span 2; }
@media (max-width: 47.99rem) {
  /* bento em 2: ímpar fecha com o último na largura toda */
  .mx-av .av-bento-g:is([data-n="5"], [data-n="8"]) > :last-child { grid-column: auto; }
  .mx-av .av-bento-g:is([data-n="3"], [data-n="5"], [data-n="7"]) > :last-child { grid-column: 1 / -1; }
  /* ferramentas: introdução na largura toda e cartões em 2; o ímpar fecha largo */
  /* lado a lado no celular (composição do computador): peça e título dividem a linha; corpo e botão descem */
  .mx-av .av-lado-grade { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .mx-av .av-lado-txt { display: contents; }
  .mx-av .av-lado .av-peca { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .mx-av .av-lado-txt > :is(.av-eyebrow, .av-h2, .av-sub) { grid-column: 2; }
  .mx-av .av-lado--inv .av-peca { grid-column: 2; }
  .mx-av .av-lado--inv .av-lado-txt > :is(.av-eyebrow, .av-h2, .av-sub) { grid-column: 1; }
  .mx-av .av-lado-txt > :is(.av-corpo, .av-ctas) { grid-column: 1 / -1; }
  .mx-av .av-h2--esq { font-size: clamp(20px, 5.6vw, 26px); align-self: center; }
  .mx-av .av-banda-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; }
  .mx-av .av-banda-txt .av-corpo { margin-top: 12px; }
  .mx-av .av-h2--banda { font-size: clamp(22px, 6vw, 28px); }
}

/* ---------- 6 · quadro, relacionadas, indep e fecho ---------- */
/* quadro das rotas de confiança: os 3 cartões lado a lado também no celular */
@media (min-width: 48rem) and (max-width: 63.99rem) { .mx-av .av-rel-l { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .mx-av .av-rel-l[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mx-av .av-rel-l[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* encontro com o rodapé do chassi: o fecho desce em degradê até a cor do rodapé (--av-pe, do molde.js) */
/* a cor do rodapé chega CHEIA nos últimos 12% (a 100% exato, as 24 linhas de cima da borda ainda eram degradê e o
   encontro media 2,1 de salto no #fontes→footer a 1440; 05/11/2026) */
.mx-av .av-fecho { padding-block: clamp(12px, 2vw, 32px); background: linear-gradient(to bottom, transparent 35%, var(--av-pe, var(--m-fundo-2, var(--m-fundo))) 88%); }
.mx-av .av-fecho__wrap { box-sizing: border-box; width: min(100% - 32px, 1060px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mx-av .av-fecho__h2 { margin: 0; font-size: clamp(20px, 2vw, 26px); }
.mx-av .av-fecho__fontes { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--m-texto-suave); }
.mx-av .av-fecho__fontes a { color: var(--m-destaque); }
.mx-av .av-fecho__aviso { display: flex; gap: 10px; align-items: flex-start; padding: 16px; border-radius: 14px; border: 1px solid var(--m-borda); color: var(--m-texto-suave); }
.mx-av .av-fecho__aviso svg { flex: 0 0 auto; width: 20px; height: 20px; }
.mx-av .av-fecho p { margin: 0; }

/* ---------- 7 · movimento só à vista ---------- */
.mx-av .av-parada :is(.av-faixa-trilho, .av-flut, .av-toast, .av-dep-cartao, .av-flut-seta), .mx-av.av-pausa :is(.av-faixa-trilho, .av-flut, .av-toast, .av-dep-cartao, .av-flut-seta) { animation-play-state: paused; }

/* ============================================================================
   mx-blocos.css — os dez blocos de conteúdo dentro de QUALQUER molde de clone (31/10/2026).

   Entra no \3c style> do molde depois da identidade (--m-*) e antes do CSS escopado da origem.
   Especificidade baixa de propósito (`.mx-raiz .mx-b-*`): o acabamento do molde reveste cada bloco
   com o vocabulário da LP de origem (raio, borda, superfície, letra) redefinindo as variáveis
   `--mx-b-*` na seção, ou com regra própria. Cor sempre de PAPEL da identidade do domínio (--m-*),
   nunca hex.

   Composição por largura (doutrina, seção 1; medidas herdadas do conteudo.base.css). Contagem real
   nas 246 rotas: cartões 6 em 218, ficha 4 em 230, números sempre 4, passos 3 em 234, tabela de 3
   colunas em 221.
     números / ficha ....... 2 col no celular → 4 a partir de 48rem (3 e 6 itens: 3 col)
     cartões / não-é ....... 2 col no celular → 3 a partir de 48rem (2, 4 e 7 itens: 2 col; 8: 4)
     passos ................ número AO LADO do texto no celular (mediana de 156 caracteres) → 3 col
     tabela ................ cartão por linha até 47,99rem, tabela depois; nunca rolagem lateral
     lista curta ........... 2 col desde 320px
   Item que sobra sozinho na última linha do celular ocupa a linha inteira (nunca meia linha vazia).
   ========================================================================== */

.mx-raiz {
  --mx-b-fundo: var(--m-superficie);
  --mx-b-borda: var(--m-borda);
  --mx-b-texto: var(--m-texto-suave);
  --mx-b-forte: var(--m-texto);
  --mx-b-suave: var(--m-texto-fraco);
  /* letra e ícone na cor da marca usam o DESTAQUE: a primária é o fundo do botão, escurecida para o texto
     branco dar 4,5:1, e como letra sobre fundo escuro ela reprova (#0d63b0 sobre preto = 3,43:1, 01/11/2026) */
  --mx-b-marca: var(--m-destaque, var(--m-primaria));
  --mx-b-raio: var(--m-raio, 12px);
  --mx-b-ok: var(--m-alta, var(--m-primaria));
  --mx-b-nao: var(--m-baixa, var(--m-primaria));
  --mx-b-atencao: var(--m-destaque, var(--m-primaria));
  --mx-b-letra: var(--m-f-corpo);
  --mx-b-letra-titulo: var(--m-f-titulo);
  overflow-wrap: anywhere;
}

/* âncora do índice não para debaixo do cabeçalho fixo do chassi */
.mx-raiz [id] { scroll-margin-top: calc(var(--pg-nav-h, 0px) + 1rem); }
/* o que o mx.js esconde (perguntas além das 5, a moldura do botão) fica escondido mesmo quando o CSS da
   origem dá display ao elemento (details, button e afins vencem o [hidden] do navegador) */
.mx-raiz [hidden] { display: none !important; }
.mx-raiz :is(h1, h2) em { font-style: normal; color: var(--mx-b-marca); }
.mx-raiz :is(h1, h2, h3) { text-wrap: balance; }
.mx-raiz p { text-wrap: pretty; }
.mx-raiz img { max-width: 100%; height: auto; }
.mx-raiz :is(a, button, summary):focus-visible { outline: 2px solid var(--mx-b-marca); outline-offset: 2px; }

/* revelar ao entrar na tela: só depois que o mx.js roda (.mx-js); o conteúdo nunca depende dele */
@media (prefers-reduced-motion: no-preference) {
  .mx-js .mx-raiz .mx-rev:not(.mx-vis) { opacity: 0; transform: translateY(16px); }
  .mx-js .mx-raiz .mx-rev { transition: opacity .4s cubic-bezier(.22,1,.36,1) var(--mx-atraso, 0ms), transform .4s cubic-bezier(.22,1,.36,1) var(--mx-atraso, 0ms); }
}
@media (prefers-reduced-motion: reduce) {
  .mx-js .mx-raiz .mx-rev:not(.mx-vis) { opacity: 0; }
  .mx-js .mx-raiz .mx-rev { transition: opacity .2s linear; }
}

/* ---- cabeça neutra da seção (molde sem desenho próprio de título) -------- */

/* ---- corpo dos blocos ---------------------------------------------------- */
.mx-raiz .mx-b { margin: 0 0 1rem; font-family: var(--mx-b-letra); }
.mx-raiz .mx-b:last-child { margin-bottom: 0; }
.mx-raiz .mx-b:has(+ .mx-b-fonte) { margin-bottom: .5rem; }
.mx-raiz .mx-icone { flex: 0 0 1.125rem; width: 1.125rem; height: 1.125rem; margin-top: .125rem; color: var(--mx-b-marca); }
.mx-raiz .mx-icone--alerta { color: var(--mx-b-atencao); }

/* texto */
.mx-raiz .mx-b-texto > p { font-size: clamp(1rem, .97rem + .2vw, 1.0625rem); line-height: 1.72; color: var(--mx-b-texto); max-width: 66ch; margin: 0 0 1rem; }
.mx-raiz .mx-b-texto > p:last-child { margin-bottom: 0; }
.mx-raiz .mx-b :is(strong, b) { color: var(--mx-b-forte); font-weight: 700; }
.mx-raiz .mx-b em { font-style: normal; color: var(--mx-b-marca); }
.mx-raiz .mx-b a:not([class]) { color: var(--mx-b-marca); text-decoration: underline; text-underline-offset: 2px; }
.mx-raiz .mx-b code { font-family: var(--m-f-mono, ui-monospace, monospace); font-size: .92em; }

/* citável: 40 a 60 palavras que respondem o título sozinhas (o trecho que a IA copia) */

/* números e ficha: 2 → 4 */
.mx-raiz .mx-b-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; list-style: none; padding: 0; }
.mx-raiz .mx-b-dados[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 48rem) {
  .mx-raiz .mx-b-dados { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .875rem; }
  .mx-raiz .mx-b-dados:is([data-n="3"], [data-n="6"], [data-n="9"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mx-raiz .mx-b-dados:is([data-n="5"], [data-n="10"]) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mx-raiz .mx-b-dados[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mx-raiz .mx-b-dado { background: var(--mx-b-fundo); border: 1px solid var(--mx-b-borda); border-radius: var(--mx-b-raio); padding: clamp(.8125rem, .7rem + .5vw, 1.125rem); min-width: 0; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .1875rem; }
.mx-raiz .mx-b-dado > * { min-width: 0; overflow-wrap: anywhere; }
.mx-raiz .mx-b-dado__rotulo { order: -1; font-size: .875rem; font-weight: 600; color: var(--mx-b-suave); line-height: 1.3; }
.mx-raiz .mx-b-dado__valor { font-family: var(--mx-b-letra-titulo); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.875rem); font-weight: 800; line-height: 1.1; color: var(--mx-b-forte); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mx-raiz .mx-b-ficha .mx-b-dado__valor { font-size: 1.25rem; }

/* cartões e não-é: 2 → 3 */

/* 320–359 px (01/11/2026): os cartões em 2 colunas ficam com ~110 px úteis. O cartão aperta o
   respiro (14 → 10 px) para o título caber inteiro na letra de 13 px (o mx.js encolhe até lá:
   "rentabilidad" pedia 90 px num título de 83), e o texto corrido do cartão hifeniza no lugar certo
   ("próxima-mente") em vez de partir a palavra a seco pelo `overflow-wrap: anywhere`. O título não
   hifeniza: quem cuida dele é o mx.js. De 360 para cima nada muda. */

/* sobra sozinha na última linha do celular: ocupa a linha (nunca meia linha vazia ao lado) */

/* passos: número ao lado do texto no celular, faixa de 3 a partir de 48rem */

/* tabela: cartão por linha no celular, com o nome da coluna em cada valor */

/* aviso e lista */
.mx-raiz .mx-b-aviso { display: flex; gap: .75rem; align-items: flex-start; background: color-mix(in srgb, var(--mx-b-atencao) 9%, var(--mx-b-fundo)); border: 1px solid color-mix(in srgb, var(--mx-b-atencao) 30%, transparent); border-left: 3px solid var(--mx-b-atencao); border-radius: var(--mx-b-raio); padding: clamp(.875rem, .75rem + .5vw, 1.125rem); }
.mx-raiz .mx-b-aviso p { min-width: 0; font-size: 1rem; line-height: 1.62; color: var(--mx-b-texto); margin: 0; max-width: 66ch; }
.mx-raiz .mx-b-lista { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; max-width: 66ch; }
.mx-raiz .mx-b-lista--curta { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; max-width: 40rem; }
.mx-raiz .mx-b-lista > li { position: relative; min-width: 0; padding-left: 1.5rem; font-size: 1rem; line-height: 1.62; color: var(--mx-b-texto); }
.mx-raiz .mx-b-lista > li::before { content: ""; position: absolute; left: .3125rem; top: .6875rem; width: .375rem; height: .375rem; border-radius: 50%; background: var(--mx-b-marca); }

/* fonte de cada número: endereço longo é uma palavra só */
.mx-raiz .mx-b-fonte { margin: 0 0 1rem; font-family: var(--mx-b-letra); font-size: .8125rem; line-height: 1.5; color: var(--mx-b-suave); overflow-wrap: anywhere; }
.mx-raiz .mx-b-fonte:last-child { margin-bottom: 0; }
.mx-raiz .mx-b-fonte a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- peças obrigatórias em marcação neutra (o molde pode trazer o próprio desenho) ---------- */

/* FAQ: pilha no celular, 2 colunas a partir de 48rem; o "+" gira ao abrir */
.mx-raiz [data-mx-faq-mais] { min-height: 44px; padding: .625rem 1.25rem; border-radius: var(--m-raio-botao, 999px); border: 1px solid var(--mx-b-borda); background: transparent; color: var(--mx-b-forte); font: 600 .9375rem/1.2 var(--mx-b-letra); cursor: pointer; transition: transform .15s ease, border-color .2s ease, color .2s ease; }
.mx-raiz [data-mx-faq-mais]:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .mx-raiz [data-mx-faq-mais]:hover { border-color: var(--mx-b-marca); color: var(--mx-b-marca); }
}

/* fecho: fontes + declaração longa de afiliado (obrigatório em toda rota) */

/* barra rotativa do chassi antigo (pt: safirion.com.br, safiron.net, obynex, axel), 01/11/2026. Ela é FIXA no
   topo e o fundo dela é um degradê azul de 16–30% de opacidade: na home, sempre sobre o preto da página; numa
   rota clonada passa por cima de seção CLARA do molde e a letra clara (--brand-100) some — o portão das
   correções leu 1,05:1 a 390 e 2,54:1 a 1024. Aqui o mesmo degradê vai sobre o fundo da casa, opaco: no
   topo fica igual à home, e em qualquer rolagem a letra continua legível. Só nas rotas clonadas (`.mx-raiz`). */

/* Comum às páginas clonadas do Seu Plantão: o iPhone preto da Mobile Simulator com o print real e a planilha
   desenhada (o "antes"). .mx-av vira a raiz do molde (ex.: .mx-finagro) no gerador. */
/* ---- iPhone 16 Pro Max preto da extensão Mobile Simulator (962 x 1982) com o print real -------------------------
   Tela: left 4,3659%, top 1,8163%, 91,4761% x 96,4682%, canto 17,73% / 8,16%; ilha: left 35,863%, top 3,33%,
   28,441% x 3,976%. A moldura tem a tela preta e opaca: o print vai POR CIMA dela e a ilha por cima de tudo. O print
   começa ABAIXO da barra de status do iOS (6,5% da tela), na cor do topo do app, e entra inteiro (contain). */
.mx-av .sp-iphone { position: relative; display: block; aspect-ratio: 962 / 1982; container-type: inline-size; filter: drop-shadow(0 22px 28px rgba(6, 16, 15, .32)); }
.mx-av .sp-iphone__moldura { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; user-select: none; }
.mx-av .sp-iphone__tela { position: absolute; z-index: 1; left: 4.3659%; top: 1.8163%; width: 91.4761%; height: 96.4682%; border-radius: 17.73% / 8.16%; overflow: hidden; background: #fffaf0; display: block; }
.mx-av .sp-iphone__status { position: absolute; left: 0; right: 0; top: 0; height: 6.5%; display: flex; align-items: center; justify-content: space-between; padding: 0 9% 0 11%; background: #fffdfc; color: #1c1b18; font: 600 4.1cqw/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; letter-spacing: -.01em; }
.mx-av .sp-iphone__status b { font-weight: 600; padding-top: 1.2cqw; }
.mx-av .sp-iphone__status svg { width: 13cqw; height: auto; padding-top: 1.2cqw; display: block; }
.mx-av .sp-iphone__print { position: absolute; left: 0; top: 6.5%; width: 100%; height: 93.5%; max-width: none; object-fit: contain; object-position: 50% 0; display: block; }
.mx-av .sp-iphone__ilha { position: absolute; z-index: 2; left: 35.863%; top: 3.33%; width: 28.441%; height: 3.976%; border-radius: 999px; background: #000; display: block; }

/* revelar ao entrar (o JS só esconde o que está abaixo da dobra; sem JS, tudo à vista) */
@media (prefers-reduced-motion: no-preference) {
  .mx-av.m12-js [data-revelar][data-visto="0"] { opacity: 0; transform: translate3d(0, 16px, 0); }
}

/* ---- a ponte do herói: a planilha (antes) e o app no iPhone (depois), lado a lado em toda largura ------------- */
.mx-av .sp-ponte { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: clamp(.75rem, 3vw, 3rem); width: 100%; }
.mx-av .sp-ponte__app { display: grid; justify-items: center; gap: .625rem; min-width: 0; }
.mx-av .sp-ponte__app .sp-iphone { width: min(100%, 17.5rem); }
.mx-av .sp-ponte__rotulo, .mx-av .sp-planilha__rotulo { display: block; justify-self: center; width: max-content; max-width: 100%; padding: .3rem .75rem; border-radius: 999px; background: #fff; box-shadow: 0 6px 18px -8px rgba(6, 16, 15, .45); font-size: clamp(.75rem, .7rem + .25vw, .9375rem); font-weight: 700; color: #0a4f4a; text-align: center; }
.mx-av .sp-planilha { margin: 0; min-width: 0; display: grid; gap: .625rem; }
.mx-av .sp-planilha__barra { display: flex; gap: .5rem; align-items: center; background: #fff; border: 1px solid #dcd1bd; border-radius: .625rem .625rem 0 0; border-bottom: 0; padding: .375rem .625rem; font-size: clamp(.6875rem, .62rem + .3vw, .875rem); color: #57534a; }
.mx-av .sp-planilha__barra span { font-weight: 700; color: #1c1b18; min-width: 2.25em; }
.mx-av .sp-planilha__barra code { font: 500 1em/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #1c1b18; }
.mx-av .sp-planilha table { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; font-size: clamp(.6875rem, .6rem + .35vw, .9375rem); color: #1c1b18; box-shadow: 0 30px 60px -30px rgba(6, 16, 15, .45); margin-top: -.625rem; }
.mx-av .sp-planilha th, .mx-av .sp-planilha td { border: 1px solid #dcd1bd; padding: .35em .5em; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-av .sp-planilha thead tr:first-child th, .mx-av .sp-planilha tbody th, .mx-av .sp-planilha thead tr:last-child th { background: #f6efe1; color: #6f6a5f; font-weight: 600; text-align: center; }
/* só a coluna dos números de linha é estreita; as colunas de dados dividem o resto (a 1ª linha manda no layout fixo) */
.mx-av .sp-planilha thead tr:first-child th:first-child { width: 2.2em; }
.mx-av .sp-planilha thead tr:last-child td { font-weight: 700; background: #fbf7ef; }
.mx-av .sp-planilha td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
.mx-av .sp-planilha__total td { font-weight: 700; background: #fbf7ef; }
.mx-av .sp-planilha__erro { color: #be123c; text-align: right !important; outline: 2px solid #be123c; outline-offset: -2px; }
.mx-av .sp-planilha__nota { justify-self: center; margin: 0; padding: .25rem .7rem; border-radius: 999px; background: #fff; font-size: clamp(.75rem, .7rem + .25vw, .875rem); color: #be123c; font-weight: 600; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .mx-av .sp-planilha__erro { animation: sp-pisca 2.4s cubic-bezier(.22, 1, .36, 1) infinite; }
}
@keyframes sp-pisca { 0%, 60%, 100% { background: #fff; } 30% { background: #fbeae9; } }
/* no celular a planilha fica lado a lado com o iPhone, com as duas colunas que contam a história (hospital e valor):
   Data (coluna 2) e Pago? (coluna 5) saem em toda linha, e a planilha leva a parte maior da largura */
@media (max-width: 39.99rem) {
  .mx-av .sp-ponte { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: .5rem; }
  .mx-av .sp-planilha :is(th, td):nth-child(2), .mx-av .sp-planilha :is(th, td):nth-child(5) { display: none; }
  .mx-av .sp-planilha th, .mx-av .sp-planilha td { padding: .3em .35em; }
}

/* revelar e pular, comuns */
.mx-av .sp-pular { position: absolute; left: -999px; top: 0; z-index: 100; background: #fff; color: #1c1b18; padding: .75rem 1rem; border-radius: .5rem; }
.mx-av .sp-pular:focus { left: 1rem; top: 1rem; }
.mx-av .sp-logo { display: block; height: 2rem; width: auto; max-width: none; }

/* ---- Marca do Seu Plantão sobre o molde avalon (entra no fim de public/moldes/avalon/molde.css) ----
   Paleta papel por papel: o verde de ação da referência vira o verde-petróleo do app (#0f766e, branco por cima a
   5,4:1), o fundo claro vira o creme do site (#fff9ef), as superfícies viram o branco e a névoa do app; a letra é a
   do domínio (a do sistema); os tamanhos ficam os da referência. */
.mx-av {
  --m-fundo: #fff9ef;
  --m-texto: #1c1b18;
  --m-texto-suave: #57534a;
  --m-texto-fraco: #6f6a5f;
  --m-primaria: #0f766e;
  --m-sobre-primaria: #ffffff;
  --m-destaque: #0f766e;
  --m-superficie: #ffffff;
  --m-superficie-2: #e3f0ec;
  --m-borda: #ebe3d5;
  --m-raio-botao: 999px;
  --m-f-corpo: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --m-f-titulo: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-x: clip;
}

/* o celular desenhado em CSS da referência (.av-cel) vira a moldura real: sem a carcaça falsa */
.mx-av .av-cel.sp-cel { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; aspect-ratio: auto; overflow: visible; }
.mx-av .sp-cel .sp-iphone { width: 100%; }

/* a calculadora no lugar do cartão de depósito: ao lado do iPhone no computador */
.mx-av .av-dep-cena:has(.sp-calc) { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 30rem); justify-content: center; align-items: center; gap: clamp(1.25rem, 4vw, 3.5rem); }
.mx-av .av-dep-cena:has(.sp-calc) .av-cel { width: 100%; }
.mx-av .sp-calc { position: static; inset: auto; transform: none; width: 100%; max-width: none; display: grid; gap: 1rem; padding: clamp(1rem, 2.4vw, 1.75rem); background: #fff; border: 1px solid #ebe3d5; border-radius: 1.25rem; box-shadow: 0 30px 70px -36px rgba(6, 16, 15, .45); text-align: left; }
.mx-av .sp-calc__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.mx-av .sp-calc__campo { display: grid; gap: .3rem; font-size: .875rem; font-weight: 600; color: #57534a; }
.mx-av .sp-calc__campo:first-child { grid-column: 1 / -1; }
.mx-av .sp-calc__campo input, .mx-av .sp-calc__campo select { font: inherit; font-size: 1rem; font-weight: 600; color: #1c1b18; min-height: 44px; padding: .55rem .75rem; border: 1px solid #dcd1bd; border-radius: .75rem; background: #fffdf8; width: 100%; }
.mx-av .sp-calc__campo input:focus-visible, .mx-av .sp-calc__campo select:focus-visible { outline: 3px solid #2dd4bf; outline-offset: 1px; }
.mx-av .sp-calc__campo small { font-weight: 500; color: #6f6a5f; }
.mx-av .sp-calc__saida { margin: 0; display: grid; gap: .4rem; padding: .9rem 1rem; border-radius: 1rem; background: #f6efe1; }
.mx-av .sp-calc__saida > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.mx-av .sp-calc__saida dt { color: #57534a; }
.mx-av .sp-calc__saida dd { margin: 0; font-weight: 700; color: #1c1b18; font-variant-numeric: tabular-nums; }
.mx-av .sp-calc__darf { padding-top: .4rem; border-top: 1px solid #dcd1bd; font-size: 1.15rem !important; }
.mx-av .sp-calc__darf dd { color: #0a4f4a; }
.mx-av .sp-calc__nota { font-size: .875rem; color: #57534a; }
.mx-av .sp-calc__nota a { color: #0a4f4a; text-decoration: underline; }
.mx-av a.av-btn.sp-calc__cta { justify-self: start; }
@media (max-width: 47.99rem) {
  .mx-av .av-dep-cena:has(.sp-calc) { grid-template-columns: minmax(0, 1fr); }
  .mx-av .av-dep-cena:has(.sp-calc) .av-cel { width: min(52%, 13rem); margin-inline: auto; order: 2; }
  .mx-av a.av-btn.sp-calc__cta { justify-self: stretch; }
}

/* o "Atualizado em" das perguntas */
.mx-av .sp-atualizado { margin-top: .5rem; color: #57534a; font-size: .95rem; }

/* cabeçalho do domínio: estendido sobre o herói, cápsula de vidro depois de rolar */
.mx-av .sp-topo { position: fixed; inset: 0 0 auto; z-index: 60; padding: .5rem clamp(.75rem, 2.5vw, 2rem); pointer-events: none; }
.mx-av .sp-topo__barra { pointer-events: auto; display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 1rem; max-width: 100%; margin-inline: auto; min-height: 3.5rem; padding: .25rem .5rem .25rem 1rem; border-radius: 999px; border: 1px solid transparent; transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; }
.mx-av .sp-topo__barra { transition: max-width .45s cubic-bezier(.22, 1, .36, 1), background-color .3s ease, box-shadow .3s ease, border-color .3s ease; }
.mx-av .sp-topo__marca { justify-self: start; }
.mx-av .sp-topo--rolado .sp-topo__barra { max-width: 60rem; background: rgba(255, 249, 239, .9); border-color: #ebe3d5; box-shadow: 0 18px 40px -22px rgba(6, 16, 15, .45); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); }
.mx-av .sp-topo__marca { display: inline-flex; align-items: center; min-height: 44px; }
.mx-av .sp-topo__nav { display: none; justify-content: center; gap: .25rem; }
.mx-av .sp-topo__nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .8rem; border-radius: .75rem; color: #1c1b18; font-weight: 600; font-size: .95rem; text-decoration: none; }
.mx-av .sp-topo__acoes { grid-column: 3; display: flex; align-items: center; gap: .4rem; justify-self: end; }
.mx-av .sp-topo__entrar { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .8rem; color: #1c1b18; font-weight: 600; text-decoration: none; }
.mx-av a.av-btn.sp-topo__testar { min-height: 44px; padding: .5rem 1.1rem; font-size: .95rem; }
@media (min-width: 64rem) { .mx-av .sp-topo__nav { display: flex; } }
@media (hover: hover) and (pointer: fine) { .mx-av .sp-topo__nav a:hover, .mx-av .sp-topo__entrar:hover { color: #0a4f4a; } }

/* herói: fundo de ponta a ponta (a seção do molde é estreita; o herói ocupa a largura toda e centra o miolo) */
.mx-av section.av-heroi { width: 100%; max-width: none; padding-inline: max(16px, calc((100% - 1060px) / 2)); background: radial-gradient(120% 90% at 50% 0%, #e3f0ec 0%, #fff9ef 55%, #f6efe1 100%); }
/* selo e sobretítulo: tinta escura da marca para ler a 4,5:1 sobre o verde-claro */
.mx-av .av-selo { color: #0a4f4a; background: #e3f0ec; }
.mx-av .av-eyebrow { color: #46423b; }
/* grade logo | links | ações (doutrina, 09/11/2026): cada lateral tem no mínimo o próprio conteúdo, então nada passa por
   cima de outro; com folga as duas laterais ficam iguais e os links no centro. Sem os links (abaixo de 64rem), a marca
   fica na 1ª coluna e as ações na 3ª, nunca no meio por cima do logo. */
.mx-av .sp-topo__marca { grid-column: 1; }
.mx-av .sp-topo__nav { grid-column: 2; }
/* topo no celular (medido em 320, 360, 390 e 414 no vivo antes de escrever): a grade de três colunas guardava dois vãos
   para os links que ali não aparecem e jogava o "Testar grátis" 6 px para fora em 360; em fila, com respiro menor, logo,
   Entrar e Testar grátis cabem inteiros numa linha só, com 44 px de alvo. Abaixo de 360 o logo desce para 28 px de altura. */
@media (max-width: 47.99rem) {
  .mx-av .sp-topo { padding-inline: .5rem; }
  .mx-av .sp-topo__barra { display: flex; justify-content: space-between; gap: .5rem; padding-left: .6rem; padding-right: .3rem; }
  .mx-av .sp-topo__acoes { gap: .2rem; }
  .mx-av .sp-topo__entrar { padding-inline: .6rem; }
  .mx-av a.av-btn.sp-topo__testar { padding-inline: .9rem; white-space: nowrap; }
}
@media (max-width: 22.49rem) { .mx-av .sp-topo .sp-logo { height: 1.75rem; } }