/* =====================================================================
   Páginas do paciente: /portal-do-paciente e /resultados-online (Fase 9, 2026-09-29)
   ---------------------------------------------------------------------
   Classes pac-* copiadas do arquivo de referência
   Manuais/Analysis-v29/portal-do-paciente.html (linhas 664-720 e 731-909), que traz o
   conjunto das duas páginas. Mudanças em relação à referência:
   - @media (min-width: N) virou @container page (min-width: N), como no resto do site: o
     A+ é zoom e só a container query o enxerga (Arquitetura_Frontend_Astro.md, seção 13);
   - sem as regras do rodapé (o rodapé é o nosso);
   - no fim: selo e cor do ícone por "tom", etiqueta "Prévia ilustrativa" da réplica do
     login, cards de ajuda e a imagem dos passos (que na referência dos resultados eram
     estilo inline).
   Carregado pelo BaseLayout com page="patient" (junto com o exam.css).
   ===================================================================== */

    /* ===== Páginas do paciente: primitivas sem equivalente no design system.
       Somente tokens do :root. ===== */
    .pac-hero { padding: 8px 0 44px; }
    /* 15/10/2026: 18 px e entrelinha 1,6 no texto abaixo do título, como as 17 referências das
       páginas do paciente e institucionais (o .exam-sub do exam.css é o da página de exame: 19 px e
       1,5). No celular continua a regra com !important do exam.css (16 px e 1,5), igual à referência. */
    .pac-hero .exam-sub { max-width: 720px; font-size: 18px; line-height: 1.6; }
    .pac-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
    .pac-note { display: flex; align-items: center; gap: 8px; color: var(--text-storm); margin: 12px 0 0; }
    .pac-hero .quick-facts { margin-top: 28px; margin-bottom: 0; }
    .pac-mt { margin-top: 24px; }
    .pac-flex { flex: 1; }
    .pac-center { text-align: center; }
    .city-selector.pac-center { justify-content: center; }
    .pac-link { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
    .pac-link:hover { color: var(--brand-dark); }
    .pac-ctas .btn { width: 100%; }

    /* Ilustração do comprovante de coleta */
    .pac-receipt { background: var(--bg-white); border: 1px solid var(--border);
      border-radius: var(--radius-md); box-shadow: var(--shadow-hover); padding: 24px 22px; }
    .pac-receipt-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
      padding-bottom: 14px; margin-bottom: 14px; border-bottom: 2px dashed var(--border); color: var(--text-navy); }
    .pac-receipt-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; color: var(--text-storm); }
    .pac-receipt-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px;
      padding: 12px 14px; background: var(--bg-highlight); border: 2px solid var(--brand); border-radius: var(--radius-sm); }
    .pac-receipt-lbl { color: var(--text-gray); }
    .pac-receipt-code { margin-left: auto; color: var(--text-navy); letter-spacing: .08em; }
    .pac-receipt-foot { margin-top: 16px; padding-top: 12px; border-top: 2px dashed var(--border); color: var(--text-storm); text-align: center; }
    .pac-num { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
      width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--brand); color: #ffffff; }
    .pac-caption { color: var(--text-storm); margin: 12px 0 0; text-align: center; }
    .pac-explain { display: flex; flex-direction: column; gap: 16px; }
    .pac-explain .service-icon-wrap .pac-num { width: 32px; height: 32px; }

    /* Situação do exame */
    .pac-tag-ok { border: 1.5px solid var(--brand-green); color: var(--text-navy); background: var(--bg-white); }
    .pac-tag-wait { border: 1.5px solid var(--orange); color: var(--text-navy); background: var(--bg-white); }

    /* Comparação de formas de agendamento */
    .pac-compare { display: grid; grid-template-columns: 1fr; gap: 20px; }
    .pac-option { position: relative; }
    .pac-option-main { border-color: var(--brand); box-shadow: var(--shadow-hover); }
    .pac-badge { display: inline-block; align-self: flex-start; margin-bottom: 12px; padding: 4px 12px; border-radius: var(--radius-pill);
      background: var(--brand); color: #ffffff; }
    .pac-option .btn { margin-top: 18px; }

    /* Unidades */
    .pac-sus { align-self: flex-start; margin-top: 12px; border: 1.5px solid var(--brand-green); }

    /* Acesso rápido */
    .pac-current { border-color: var(--brand); background: var(--bg-highlight); }

    @container page (min-width: 768px) {
      .pac-hero { padding: 16px 0 56px; }
      .pac-ctas .btn { width: auto; }
      .pac-compare { grid-template-columns: 1fr 1fr; }
      .pac-receipt { padding: 28px 30px; }
      .pac-quick-3 { grid-template-columns: repeat(3, 1fr); }
    }

    /* ===== v2: padrão visual da página de resultados aprovada ===== */
    .pac-hero-top { padding-top: 4px; }
    .pac-hero-top .pac-note { margin-top: 32px; color: var(--text-gray); }
    .pac-hero-top .quick-facts { margin-top: 48px; margin-bottom: 40px; }

    /* Vídeo do hero */
    .pac-video { background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius-md);
      overflow: hidden; box-shadow: 0 0 24px rgba(0,0,0,0.15); }
    .pac-video-frame { position: relative; padding-bottom: 56.25%; height: 0; }
    .pac-video-frame iframe, .pac-video-ph { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    /* Imagem no lugar do vídeo (03/11/2026, placeholder até os vídeos ficarem prontos): inteira, sem corte. */
    .pac-video-img, .pac-embed img.pac-video-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: var(--bg-white); }
    /* Mosaico solto, sem caixa (03/11/2026, pedido do usuário), até o vídeo de verdade chegar: some o card (fundo, sombra, canto); a área e a borda (transparente) ficam. */
    .pac-video.pac-video-sem-caixa { background: none; border-color: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
    .pac-embed.pac-embed-sem-caixa { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
    .pac-video-sem-caixa .pac-video-img, .pac-embed-sem-caixa img.pac-video-img { background: transparent; }
    /* Passo sem imagem (03/11/2026, pedido do usuário, até as imagens reais chegarem): uma coluna só, o texto na largura do card. */
    .pac-step.pac-step-so-texto { grid-template-columns: 1fr; }
    .pac-video-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
      background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: #ffffff; text-align: center; }
    .pac-video-play { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px;
      border-radius: var(--radius-pill); background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.6); }
    .pac-video-cap { padding: 12px 16px; text-align: center; border-top: 1px solid var(--border); background: #f8fafd;
      font-size: 13px; font-weight: 600; color: var(--text-navy); text-transform: uppercase; letter-spacing: .5px; }
    .pac-video-cap span { color: var(--brand); }

    /* Passos com imagem */
    .pac-steps { display: flex; flex-direction: column; gap: 32px; margin-top: 40px; }
    .pac-step { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; background: var(--bg-white);
      padding: 24px; border-radius: 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
    .pac-step-num { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
      border-radius: 50%; background: var(--brand); color: #ffffff; font-size: 24px; font-weight: 700; margin-bottom: 24px; }
    .pac-step-title { font-size: 24px; font-weight: 600; line-height: 1.3; color: var(--text-navy); margin: 0 0 12px; }
    .pac-step-desc { font-size: 16px; line-height: 1.6; color: var(--text-gray); margin: 0; }
    .pac-step-media { display: flex; align-items: center; justify-content: center; height: 260px; padding: 16px;
      background: #f0f4f8; border: 2px dashed #cbd5e1; border-radius: var(--radius-md);
      color: #94a3b8; font-weight: 500; text-align: center; }

    /* Cards (ajuda, senha, regras) */
    .pac-cards { display: grid; grid-template-columns: 1fr; gap: 24px; }
    .pac-card { display: flex; flex-direction: column; align-items: flex-start; background: var(--bg-white);
      padding: 32px; border-radius: 20px; border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
    .pac-card-ico { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;
      border-radius: var(--radius-md); background: #f0f4f8; color: var(--brand); margin-bottom: 20px; }
    .pac-card-title { font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--text-navy); margin: 0 0 6px; }
    .pac-card-desc { font-size: 15px; color: var(--text-gray); margin: 0 0 20px; }
    .pac-card > .btn { width: 100%; justify-content: center; margin-top: auto; }
    .pac-card-main { border: 2px solid var(--brand); box-shadow: 0 8px 32px rgba(4,118,145,0.14); }

    /* Lista numerada dentro dos cards */
    .pac-ol { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 24px; padding: 0; list-style: none; width: 100%; }
    .pac-ol li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-ink); line-height: 1.5; }
    .pac-ol .pac-num { margin-top: 1px; }
    .pac-ol-ico li .pac-li-ico { display: flex; flex-shrink: 0; align-items: center; justify-content: center;
      width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--bg-highlight); color: var(--brand); }

    /* Selos suaves */
    .pac-soft { display: inline-flex; align-items: center; padding: 8px 20px; border-radius: var(--radius-pill);
      font-size: 15px; font-weight: 600; }
    .pac-soft-ok { background: #e6f6ec; color: #166534; }
    .pac-soft-info { background: var(--bg-highlight); color: var(--brand-dark); }
    .pac-card .pac-badge { margin-bottom: 16px; }

    /* Segurança */
    .pac-safe { display: grid; grid-template-columns: 1fr; gap: 32px; background: var(--bg-white);
      padding: 32px; border-radius: 24px; border: 1px solid var(--border); box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
    .pac-safe-ico { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px;
      border-radius: var(--radius-md); background: #fdf1e7; color: var(--orange); margin-bottom: 20px; }
    .pac-safe-list { display: flex; flex-direction: column; gap: 16px; }
    .pac-safe-item { display: flex; gap: 16px; align-items: flex-start; padding: 20px;
      border-radius: var(--radius-md); background: var(--bg-light); border: 1px solid var(--border); }
    .pac-safe-item .pac-li-ico { display: flex; flex-shrink: 0; align-items: center; justify-content: center;
      width: 40px; height: 40px; border-radius: var(--radius-sm); background: #fdf1e7; color: var(--orange); }
    .pac-safe-item strong { display: block; color: var(--text-navy); margin-bottom: 2px; }
    .pac-safe-item span { color: var(--text-gray); }

    /* Espaçamentos e FAQ */
    .pac-pb { padding-bottom: 80px; }
    .pac-faq-intro { max-width: 420px; }
    .pac-cta-row { display: flex; justify-content: center; margin-top: 40px; }

    /* Ajustes solicitados: fatos +1px, selo à direita, boxes centralizados */
    .pac-facts-lg .fact-val { font-size: 16px; }
    .pac-facts-lg .fact-lbl { font-size: 14px; }
    .pac-card-main { position: relative; }
    .pac-card-main .pac-badge { position: absolute; top: 24px; right: 24px; margin: 0; }
    .highlight-box.pac-hl-center { justify-content: center; align-items: center; text-align: center; }
    .highlight-box.pac-hl-center .highlight-icon { display: flex; }
    .pac-mt-lg { margin-top: 48px; }

    /* Réplica da tela de login do portal */
    .pac-login-sec { padding-top: 24px; }
    .pac-login { display: grid; grid-template-columns: 1fr; max-width: 980px; margin: 8px auto 0;
      background: var(--bg-white); border: 1px solid var(--border); border-radius: 24px; overflow: hidden;
      box-shadow: 0 16px 48px rgba(4,118,145,0.16); }
    .pac-login-form { display: flex; flex-direction: column; padding: 36px 24px; }
    .pac-login-scola { align-self: flex-end; display: inline-flex; align-items: center; gap: 6px;
      font-weight: 700; letter-spacing: .08em; color: var(--text-navy); margin-bottom: 12px; }
    .pac-login-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--orange); }
    .pac-login-title { font-size: 28px; font-weight: 600; color: var(--text-navy); margin: 0 0 6px; }
    .pac-login-sub { color: var(--text-gray); margin: 0 0 24px; }
    .pac-login-field { display: flex; align-items: center; justify-content: space-between; gap: 12px;
      min-height: 52px; padding: 0 16px; margin-bottom: 14px; border: 1px solid #d0deeb;
      border-radius: var(--radius-sm); background: #f8fafd; color: var(--text-storm); cursor: default; user-select: none; }
    .pac-login-field svg { flex-shrink: 0; color: var(--text-storm); }
    .pac-login-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
    .pac-login-actions .btn { min-width: 160px; }
    .pac-login-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
      padding: 40px 24px; text-align: center; color: #ffffff;
      background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%); }
    .pac-login-logo { background: #ffffff; border-radius: 12px; padding: 16px 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
    .pac-login-logo img { display: block; height: 44px; width: auto; max-width: 100%; }
    .pac-login-welcome { font-size: 20px; color: #ffffff; margin: 0; }
    .pac-login-side .btn { min-width: 200px; }
    .pac-login-note { justify-content: center; align-items: flex-start; color: var(--text-gray);
      width: fit-content; max-width: 100%; margin: 40px auto 0; padding: 14px 22px;
      background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-md); }
    .pac-login-note svg { flex-shrink: 0; margin-top: 4px; }

    /* Portal v3: página no formato de login */
    .pac-login-page { padding: 20px 0 56px; }
    .pac-login-page .breadcrumb { margin-bottom: 20px; }
    .pac-login-lg { max-width: 1040px; margin-top: 0; }
    .pac-login-hello { font-size: 18px; color: rgba(255,255,255,0.9); margin-bottom: -12px; }
    .pac-login-h1 { font-size: clamp(28px, 4vw, 36px); font-weight: 400; line-height: 1.2; margin: 0; }
    .pac-login-h1 span { color: #ffffff; }
    .pac-login-desc { color: rgba(255,255,255,0.9); max-width: 320px; line-height: 1.5; }
    .pac-links-row { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
    .pac-mini { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-radius: var(--radius-md);
      background: var(--bg-light); border: 1px solid var(--border); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
    .pac-mini:hover { border-color: var(--brand); box-shadow: 0 6px 20px rgba(4,118,145,0.10); }
    .pac-mini-ico { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 48px; height: 48px;
      border-radius: var(--radius-md); background: #ffffff; color: var(--brand); }
    .pac-mini strong { display: block; color: var(--text-navy); }
    .pac-mini span span { display: block; color: var(--text-gray); }
    .pac-warn-center { margin-top: 24px; justify-content: center; text-align: center; }
    .pac-card-sm { padding: 28px; }
    .pac-card-sm .pac-card-desc { margin-bottom: 0; }
    .pac-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .pac-arrow { display: inline-flex; transition: transform .2s ease; }
    .btn:hover .pac-arrow, .btn:focus-visible .pac-arrow { transform: translateX(4px); }
    @media (prefers-reduced-motion: reduce) { .pac-arrow { transition: none; } }
    .service-tag.pac-sus { border: 0; }

    /* Bloco de chamada no padrão "Pronto para fazer seu exame?" da página de exame */
    .pac-cta-box { margin-top: 56px; padding: 40px 24px; text-align: center; background: var(--bg-highlight);
      border: 1px solid #d3eef3; border-radius: 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.02); }
    .pac-cta-box .sec-h2 { margin-bottom: 16px; }
    .pac-cta-box .body-text { max-width: 600px; margin: 0 auto 32px; font-size: 18px; }
    .pac-cta-actions { display: flex; flex-direction: column; gap: 16px; justify-content: center; }
    .pac-cta-actions .btn { height: 56px; font-size: 16px; flex: 0 0 auto; }

    /* Cards de unidade no padrão da seção Presença Local da home */
    .pac-unit-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
    .pac-unit-head .unit-name { font-size: 18px; }
    .pac-unit-status { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
      font-size: 12px; font-weight: 600; color: var(--text-storm); }
    .pac-unit-status::before { content: ""; display: inline-block; width: 8px; height: 8px;
      border-radius: 50%; background: var(--text-storm); }
    .pac-unit-status.is-open { color: var(--brand-green); }
    .pac-unit-status.is-open::before { background: var(--brand-green); box-shadow: 0 0 0 3px #d1fae5; }
    .pac-unit-addr { color: var(--text-storm); margin-bottom: 8px; }
    a.unit-card { text-decoration: none; }

    @container page (min-width: 768px) {
      .pac-step { grid-template-columns: 1fr 1fr; gap: 40px; padding: 32px; }
      .pac-cta-box { padding: 64px 32px; }
      .pac-login-form { padding: 48px 48px 44px; }
      .pac-login-side { padding: 48px 40px; }
      .pac-cards-4 { grid-template-columns: repeat(2, 1fr); }
      .pac-links-row { grid-template-columns: 1fr 1fr; }
      .pac-login-page { padding: 24px 0 72px; }
      .pac-cta-actions { flex-direction: row; flex-wrap: wrap; }
      .pac-step-rev .pac-step-media, .pac-step-rev .pac-step-img { order: -1; }
      .pac-steps { gap: 48px; }
      .pac-safe { padding: 40px; }
      .pac-pb { padding-bottom: 112px; }
    }
    @container page (min-width: 1024px) {
      .pac-cards-3 { grid-template-columns: repeat(3, 1fr); }
      .pac-cards-2 { grid-template-columns: repeat(2, 1fr); }
      .pac-cards-4 { grid-template-columns: repeat(4, 1fr); }
      .pac-login { grid-template-columns: 1.15fr 0.85fr; }
      .pac-safe { grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; }
      .pac-faq-intro { margin-top: 66px; }
    }

/* ---------- Adições da Fase 9 (não estão na referência como classe) ---------- */

/* Réplica do login: deixar claro que é ilustração (pedido do usuário em 29/09). A etiqueta
   divide a linha com a marca SCOLA; o aviso fica visível logo abaixo dos campos. */
.pac-login-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pac-login-top .pac-login-scola { margin-bottom: 0; }
.pac-login-preview { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--bg-light); border: 1px dashed #b7c7d6; color: var(--text-gray); font-size: 13px; font-weight: 600; }
.pac-login-help { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 8px; color: var(--text-gray); font-size: 15px; line-height: 1.5; }
.pac-login-help svg { flex-shrink: 0; margin-top: 3px; color: var(--brand); }

/* "Cor do ícone" (campo iconTone no Studio): muda só a cor do traço, como na referência
   (a caixinha continua a padrão). Tokens da paleta, sem cor nova. */
.pac-tone-verde { color: var(--brand-green) !important; }
.pac-tone-laranja { color: var(--orange) !important; }
/* Selo dos cards de situação: valores do estilo inline da referência (resultados-online). */
.service-tag.pac-tag { border: none; padding: 8px 20px; font-size: 15px; font-weight: 600; border-radius: 999px; }
.service-tag.pac-tag-verde { background-color: #e6f6ec; color: #166534; }
.service-tag.pac-tag-laranja { background-color: #fee2e2; color: #991b1b; }

/* Cards de ajuda e de problemas (resultados): caixinha do ícone e botão como no inline da referência */
.pac-help-ico { width: 56px; height: 56px; background: #f0f4f8; border-radius: 16px; margin-bottom: 20px; }
.pac-help-desc { margin-top: 0; margin-bottom: 20px; font-size: 15px; }
.pac-help .btn { width: 100%; justify-content: center; margin-top: auto; }

/* Passos com imagem (resultados): a referência usa estilo inline com os mesmos valores das
   classes .pac-step* acima; aqui só a imagem de verdade, quando o Studio tiver uma. */
.pac-step-img { display: block; width: 100%; height: 260px; object-fit: cover; border-radius: var(--radius-md); }

/* ---------- Resultados: valores que a referência (resultados-online.html) põe em estilo inline ---------- */
.pac-res-status { padding-bottom: 80px; }
.pac-res-problems, .pac-res-help { padding-bottom: 112px; }
.pac-res-faq { padding-top: 32px; padding-bottom: 96px; }
/* (23/10/2026) Os 32 px embaixo das duas colunas são do "Onde encontrar a chave e a senha" (na referência,
   style="padding-bottom: 32px" no .two-col de #onde-encontrar); na conversão (Fase 9) foram parar no das perguntas:
   "Onde encontrar" ficava 32 px mais baixo e as perguntas 32 px mais altas que a referência. Erro claro, corrigido
   direto (Arquitetura §55.17). */
.pac-res-where .two-col { padding-bottom: 32px; }
/* Blocos "Chave de acesso" e "Senha" ao lado do comprovante */
.pac-explain-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.pac-explain-head .pac-num { width: 40px; height: 40px; font-size: 20px; }
.pac-explain-head .service-title { margin: 0; }
.pac-tags-mt { margin-top: 12px; }
.service-tag.pac-tag-lg { font-size: 15px; padding: 6px 14px; }
.pac-compare .service-title { margin-bottom: 0; }
/* Botão abaixo dos passos. A referência usa 80px de margem lateral em qualquer largura, o que
   estoura em 320px; no celular fica 32px, e a partir de 768px volta aos 80px da referência. */
.pac-steps-cta { text-align: center; margin: 72px 0 32px; }
.pac-steps-cta .btn { padding: 20px 32px; font-size: 18px; }
@container page (min-width: 768px) { .pac-steps-cta .btn { padding: 20px 80px; } }
/* Botões de avaliação por unidade. (23/10/2026) 32 px embaixo: na referência a lista é um .city-selector, que tem
   margin-bottom: 32px (o estilo inline dela muda só as outras margens); faltavam aqui ("Avalie" 32 px mais baixa que a
   referência). Erro claro, corrigido direto (Arquitetura §55.17). */
.pac-reviews { margin: 40px auto 32px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 800px; }
.pac-reviews .btn { border-radius: 9999px; padding: 10px 24px; }

/* Texto longo sem espaço (o e-mail numa resposta do FAQ do agendamento) quebra em vez de
   empurrar a coluna: com A+ 150% em 320-375px, a coluna do FAQ passava da tela
   (verify-layout, 30/09). Só age quando falta espaço; em telas normais nada muda. */
.page-root :is(.faq-inner, .faq-btn, .pac-card-desc, .pac-ol li, .warn-box) { overflow-wrap: anywhere; }

/* ===== Páginas institucionais (Fase 6, 2026-09-30): /politica-de-privacidade e /ouvidoria =====
   Sem arquivo de referência: reaproveitam o cabeçalho (pac-hero) e os cartões (pac-card) das
   páginas do paciente. A política é uma coluna de leitura de 760px, corpo de 18px e entrelinha
   1.7 (texto longo, público mais velho). Só tokens e cores que já existem no site. */
.doc-hero { padding-bottom: 32px; }
/* flex-wrap: em tela estreita com A+ alto, o título desce para baixo do ícone em vez de estourar. */
.doc-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.doc-title-row .exam-h1 { margin-bottom: 0; }
.doc-title-ico { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: var(--radius-md); background: var(--bg-highlight); color: var(--brand); }
/* O e-mail no texto quebra depois do "@" (<wbr>); anywhere só entra se nem assim couber. */
.doc-intro { max-width: 760px; overflow-wrap: anywhere; }
.doc-intro a, .doc-contact-list a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.doc-content { padding-bottom: 72px; }
.doc-body { max-width: 760px; font-size: 18px; line-height: 1.7; color: var(--text-ink); }
.doc-body p { margin: 0 0 1em; }
.doc-contact { max-width: 760px; margin-top: 32px; padding: 24px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--bg-light); }
.doc-contact-title { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--text-navy); margin: 0 0 12px; }
.doc-contact-list { display: grid; gap: 8px; margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-ink); }
.doc-contact-list div { display: flex; flex-wrap: wrap; gap: 0 8px; }
.doc-contact-list dt { font-weight: 600; }
.doc-contact-list dt::after { content: ':'; }
.doc-contact-list dd { margin: 0; overflow-wrap: anywhere; }
.doc-map { height: 360px; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-light); }
.doc-map iframe { display: block; width: 100%; height: 100%; border: 0; }
@container page (min-width: 768px) {
  .doc-contact { padding: 28px 32px; }
  .doc-map { height: 440px; }
}
/* Ouvidoria: os 4 cartões ficam lado a lado só a partir de 1200px. Entre 1024 e 1199 ficam
   2 x 2: em 4 colunas o e-mail da ouvidoria não cabia inteiro e quebrava no domínio. */
@container page (min-width: 1024px) and (max-width: 1199px) {
  .doc-cards { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   Páginas de unidade: /unidades/<slug> (Fase 10, 2026-10-02)
   ---------------------------------------------------------------------
   Classes da referência Manuais/Analysis-v29/unidade-matriz-sarandi.html: o bloco "Página de
   unidade" (linhas 1313-1368) e os três blocos de ajuste do fim do <head> (1518-1559), já
   combinados no valor final de cada regra (a referência sobrescrevia padding, margens e
   alinhamento do topo em três passos). Mudanças:
   - @media → @container page, como no resto do site (A+ é zoom; seção 13). A janela de fotos
     fica fora do .page-root e continua @media;
   - #unit-approved-hours virou .pac-unit-now; [data-gtm="...todas-unidades"] virou .pac-unit-all;
   - nossos: .pac-unit-hero-single (unidade sem foto: topo numa coluna só) e .pac-ph-label
     ("Vídeo em breve" no quadro do vídeo).
   ===================================================================== */
/* Faixa "Aberto agora / Fechado agora" abaixo do menu. Na referência ela é uma .discount-banner;
   aqui leva os mesmos valores numa classe própria, porque o exam.css esconde toda
   .discount-banner (a faixa "Loja Online" do header, display:none !important). */
.pac-unit-band { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 12px 20px;
  background: #e8f7fa; color: var(--brand); text-align: center; font-size: 15px; font-weight: 600; }
.pac-unit-band.is-closed { background: #fdecec; color: #991b1b; }

/* Topo */
.pac-unit-hero { padding-top: 12px; padding-bottom: 12px; }
.pac-unit-hero .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.pac-unit-hero .hero-grid > div:first-child { align-self: start; }
.pac-unit-attrs { margin: 0 0 16px; }
.pac-unit-hero .pac-ctas { margin-top: 32px; margin-bottom: 56px; }
@container page (max-width: 767px) {
  .pac-unit-hero { padding-bottom: 24px; }
  .pac-unit-hero .pac-ctas { margin-bottom: 24px; }
}
@container page (min-width: 1024px) {
  .pac-unit-hero .hero-grid { grid-template-columns: 1.15fr 1fr; gap: 48px; }
  .pac-unit-hero .hero-grid.pac-unit-hero-single { grid-template-columns: minmax(0, 1fr); }
}

/* Horários do topo e situação de agora */
.pac-unit-now { margin-top: 24px; color: var(--text-ink); font-size: 16px; line-height: 1.5; }
.pac-unit-now .mix-layout { width: fit-content; max-width: 100%; }
.pac-unit-now .mix-periods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pac-unit-now .mix-period { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.pac-unit-now svg { flex-shrink: 0; color: var(--brand); }
.pac-unit-now .mix-inline { display: flex; align-items: baseline; gap: 2px 6px; }
.pac-unit-now strong { white-space: nowrap; color: var(--text-navy); font-weight: 600; }
.pac-unit-now .mix-status { width: 100%; display: flex; align-items: center; justify-content: center; padding: 8px 12px; background: var(--bg-highlight); border-radius: var(--radius-sm); margin-top: 10px; text-align: center; }
.pac-unit-now .mix-status p { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; margin: 0; font-size: 15px; line-height: 1.5; }
.pac-unit-now .pac-unit-status { font-size: inherit; font-weight: 400; }
.pac-unit-now .mix-status.is-closed { background: #fdecec; color: #991b1b; }
.pac-unit-now .mix-status.is-closed p, .pac-unit-now .mix-status.is-closed p span { color: #991b1b !important; }
.pac-unit-now .mix-status.is-closed .pac-unit-status::before { background: #991b1b; box-shadow: none; }
@container page (max-width: 374px) {
  .pac-unit-now { font-size: 15px; }
  .pac-unit-now .mix-periods { gap: 8px; }
  .pac-unit-now .mix-period { padding: 10px; gap: 6px; min-width: 0; }
  .pac-unit-now .mix-inline { gap: 4px; flex-wrap: wrap; }
}

/* Atalhos do paciente: 2 colunas até 1023px (entre 769 e 1024 vale a regra de tablet do exam.css) */
.pac-unit-quick .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@container page (min-width: 1024px) { .pac-unit-quick .quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

/* Carrossel de fotos do topo */
.pac-slider { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1; justify-self: center; overflow: hidden; }
.pac-unit-hero .pac-slider { aspect-ratio: 1.14; align-self: center; }
.pac-slide { position: absolute; inset: 0; }
.pac-slide[hidden] { display: none; }
.pac-slide img { width: 100%; height: 100%; object-fit: cover; }
/* Mosaico provisório das unidades sem foto (03/11/2026): sem a caixa e inteiro */
.pac-slider-sem-caixa .pac-slide img { object-fit: contain; }
.pac-slider-controls { position: absolute; bottom: 8px; left: 16px; right: 16px; display: flex; justify-content: center; }
.pac-slider-dots { display: flex; background: rgba(24,43,56,.35); border-radius: var(--radius-pill); }
.pac-slider-dot { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; }
.pac-slider-dot span { width: 7px; height: 7px; border-radius: var(--radius-pill); background: rgba(255,255,255,.6); transition: width .2s ease; }
.pac-slider-dot[aria-pressed="true"] span { width: 18px; background: #ffffff; }
@container page (min-width: 1024px) {
  .pac-slider { justify-self: end; }
  .pac-unit-hero .pac-slider { margin-top: 0; margin-bottom: 0; transform: translateY(-48px); }
}
@media (prefers-reduced-motion: reduce) { .pac-slider * { transition: none; } }

/* Tabela de horários */
.pac-hours { overflow: hidden; }
.pac-hours-head { display: none; }
.pac-hours-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 24px;
  border-bottom: 1px solid var(--border); line-height: 1.6; color: var(--text-ink); }
.pac-hours-row:last-child { border-bottom: 0; }
.pac-hours-dia { font-weight: 600; color: var(--text-navy); }
.pac-hours-m { display: block; color: var(--text-gray); }
.pac-sub { margin-bottom: 20px; }
@container page (min-width: 768px) {
  .pac-hours-head, .pac-hours-row { grid-template-columns: 1.1fr 1fr 1fr; }
  .pac-hours-head { display: grid; padding: 20px 24px; background: var(--bg-highlight); color: var(--text-navy); font-weight: 600; }
  .pac-hours-m { display: none; }
}

/* Mapa, vídeo e fotos */
.pac-embed { position: relative; width: 100%; border-radius: var(--radius-md); overflow: hidden;
  box-shadow: rgba(95,109,179,.16) 0 2px 12px; }
.pac-embed iframe, .pac-embed img, .pac-embed video, .pac-ph { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.pac-ph { display: flex; align-items: center; justify-content: center; }
/* "Vídeo em breve": branco direto no degradê dá ~2,6:1; na pílula escura (a cor da pílula das
   bolinhas do carrossel, a 50%) fica acima de 4,5:1 em qualquer ponto do degradê. */
.pac-ph-label { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 4px 14px; border-radius: var(--radius-pill);
  background: rgba(24,43,56,.5); color: #ffffff; font-size: 15px; font-weight: 600; white-space: nowrap; }
.pac-embed-video { padding-top: 56.25%; }
.pac-map { height: 340px; }
.pac-map + .services-grid { margin-top: 40px; }
/* O mapa da página de unidade no modelo do hub (27/10/2026, pedido do usuário; antes o iframe do Google, que
   continua como reserva): as mesmas regras do mapa do hub (content.css, que esta página não carrega), presas ao
   quadro .pac-map. Duas classes no quadro do mapa: o CSS do MapLibre põe position: relative em .maplibregl-map. */
.pac-map .pac-map-canvas { position: absolute; inset: 0; }
.pac-map .pac-map-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg-light); color: var(--text-gray); font-size: 15px; font-weight: 600; }
.pac-map .pac-pin { display: block; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.pac-map .pac-pin svg { filter: drop-shadow(0 2px 3px rgba(24,43,56,.25)); }
.pac-map .pac-pin:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 50%; }
.pac-map .maplibregl-popup { z-index: 1; }
.pac-map .maplibregl-popup-content { padding: 12px 32px 12px 14px; border-radius: 12px; box-shadow: 0 4px 16px rgba(24,43,56,.18); font-family: inherit; }
.pac-map .maplibregl-popup-close-button { width: 32px; height: 32px; font-size: 20px; color: var(--text-storm); }
.pac-map .pac-map-pop { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.pac-map .pac-map-pop strong { color: var(--text-navy); font-size: 15px; }
.pac-map .pac-map-pop span { color: var(--text-storm); font-size: 13px; margin-bottom: 6px; }
.pac-map .pac-map-pop a { color: var(--brand); font-weight: 600; font-size: 13px; text-decoration: none; padding: 2px 0; }
.pac-map .pac-map-pop a:hover { text-decoration: underline; }
.pac-map .maplibregl-ctrl-attrib { font-size: 11px; }
@media (pointer: coarse) { .pac-map .maplibregl-ctrl-group button { width: 44px; height: 44px; } }
.pac-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; }
.pac-shot { margin: 0; }
.pac-shot .blog-img { height: 132px; }
.pac-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pac-photo-open { display: block; width: 100%; padding: 0; cursor: zoom-in; }
.pac-photo-open:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
@container page (min-width: 768px) {
  .pac-map { height: 420px; }
  .pac-shot .blog-img { height: 150px; }
}

/* Cards de "Como chegar": na referência são sempre 4 numa linha. Com menos (a unidade ainda sem
   ponto de referência, ônibus ou acessibilidade), cada um fica com a largura de 1/4 e o grupo
   centralizado, em vez de um card só esticado na largura toda (mesma ideia dos cards da Home,
   Fase 4). No tablet e no celular continuam as regras do exam.css (2 e 1 colunas). */
@container page (min-width: 1024px) {
  .pac-map + .services-grid { grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 72px) / 4))); justify-content: center; }
}

/* Quadro do vídeo no celular: abaixo de 768px a .two-col vira coluna flex com align-items:start
   (exam.css), e a coluna do vídeo, que só tem o quadro de proporção fixa (padding-top), encolhia
   a largura zero e sumia, deixando um vão acima das fotos. A referência tem o mesmo defeito;
   aqui a coluna ocupa a largura toda. */
.pac-unit-media .pac-col { width: 100%; }

/* Perguntas (página de unidade, agendamento e resultados): na referência a lista começa 40px
   abaixo, alinhada com o título da esquerda (o exam.css zera a margem da lista da página de
   exame). No celular vale o 4px do exam.css. Agendamento e resultados entraram em 05/10
   (aprovado pelo usuário; antes a lista começava 40px acima). */
.pac-faq-intro + div > .faq-list { margin-top: 40px; }

/* Horários nos cards de "Outras unidades": a correção da quebra no "–" (nowrap no trecho +
   flex-wrap) foi para o exam.css e o home.css em 05/10, valendo no site todo. */

/* "Ver todas as unidades" */
.pac-unit-all { width: 300px; max-width: 100%; min-width: 0; }

/* Janela de fotos ampliadas (<dialog>, fora do .page-root: @media) */
.pac-photo-modal { width: min(960px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 20px; border: 0; border-radius: 16px; color: var(--text-ink); background: #fff; }
.pac-photo-modal::backdrop { background: rgba(24,43,56,.8); }
.pac-photo-modal header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.pac-photo-modal h2 { font-size: 20px; font-weight: 400; margin: 0; }
.pac-photo-modal img { display: block; width: 100%; height: min(65dvh, 640px); object-fit: contain; }
.pac-photo-modal footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
.pac-photo-modal footer p { margin: 0; font-size: 14px; }
.pac-photo-nav { display: flex; gap: 8px; }
@media (max-width: 767px) {
  .pac-photo-modal { padding: 16px; }
  .pac-photo-modal img { height: 55dvh; }
}