/* Padrão da home aplicado às páginas internas (TASK-007, lote 1: ginecologia).
   Carregado somente pelas páginas que usam <body class="pagina-interna">. Todas as regras ficam sob
   .pagina-interna e o cabeçalho/menu reutilizam as classes h-* da home, sem carregar home.css.
   Páginas fora do lote não referenciam este arquivo e continuam com estrutura-site.css puro.
   Tipografia: Georgia (local) em H1/H2 e system-ui no corpo, sem fontes externas. */

.pagina-interna {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  --h-gutter: 20px;
  --h-serif: Georgia, "Times New Roman", Times, serif;
  --h-secao-y: 40px;
  overflow-wrap: break-word;
}
.pagina-interna h1, .pagina-interna h2 { font-family: var(--h-serif); font-weight: 400; color: #2a1f26; letter-spacing: -0.005em; }
.pagina-interna h3, .pagina-interna h4 { font-family: inherit; font-weight: var(--peso-semibold); color: #2a1f26; }

/* Acessibilidade: salto, foco, movimento */
.pagina-interna .h-pular {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: #fff; color: var(--cor-acao); padding: 12px 18px; border-radius: var(--raio-sutil);
  font-weight: var(--peso-bold); box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.pagina-interna .h-pular:focus { top: 12px; }
.pagina-interna a:focus-visible, .pagina-interna button:focus-visible, .pagina-interna summary:focus-visible,
.pagina-interna .tabela-wrap:focus-visible {
  outline: 3px solid var(--cor-acao); outline-offset: 3px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .pagina-interna * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.pagina-interna main:focus { outline: none; }
.pagina-interna .h-cont, .pagina-interna .wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--h-gutter); }

/* ---------- Cabeçalho (igual ao da home) ---------- */
.pagina-interna .h-cab { background: #fff; border-bottom: 1px solid var(--cor-borda); position: relative; z-index: 50; }
.pagina-interna .h-cab__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.pagina-interna .h-marca { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.pagina-interna .h-marca img { height: 48px; width: auto; max-width: 180px; object-fit: contain; }
.pagina-interna .h-marca span { font-family: var(--h-serif); font-size: 18px; color: #2a1f26; line-height: 1.15; }
.pagina-interna .h-menu-btn {
  min-height: 44px; min-width: 44px; padding: 0 20px;
  border: 2px solid var(--cor-acao); border-radius: var(--raio-botao); background: #fff; color: var(--cor-acao);
  font: inherit; font-weight: var(--peso-bold); font-size: 16px; cursor: pointer;
}
.pagina-interna .h-cta-cab { display: none; }

.pagina-interna .h-nav ul { display: flex; flex-direction: column; margin: 0; padding: 0; }
.pagina-interna .h-nav a.h-nav__link { display: flex; align-items: center; min-height: 48px; padding: 8px 4px; font-weight: var(--peso-semibold); color: #2a1f26; }
.pagina-interna .h-nav a.h-nav__link:hover { color: var(--cor-acao); }
.pagina-interna .h-nav__fechar { display: none; }
.pagina-interna .h-nav .h-cta-menu { display: flex; width: 100%; margin-top: 16px; }

.pagina-interna.h-js .h-nav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-bottom: 1px solid var(--cor-borda); box-shadow: 0 16px 32px -16px rgba(51,17,38,.25);
  max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain;
  padding: 8px var(--h-gutter) 24px;
}
.pagina-interna.h-js .h-nav.aberto { display: block; }
.pagina-interna.h-js .h-nav__fechar {
  display: flex; margin: 0 0 4px auto; min-height: 44px; min-width: 44px; padding: 0 16px; align-items: center;
  background: transparent; border: 0; color: var(--cor-acao); font: inherit; font-weight: var(--peso-bold); cursor: pointer;
}
.pagina-interna .h-nav ul li + li { border-top: 1px solid var(--cor-borda); }

/* Sem JavaScript: sem botão Menu; a lista de links aparece sob o logotipo */
.pagina-interna:not(.h-js) .h-menu-btn { display: none; }
.pagina-interna:not(.h-js) .h-cab__in { flex-wrap: wrap; padding-bottom: 8px; }
.pagina-interna:not(.h-js) .h-nav { order: 3; flex-basis: 100%; }

/* ---------- Botões e links de ação ---------- */
.pagina-interna .botao { min-height: 52px; padding: 14px 32px; text-align: center; }
.pagina-interna a.botao-primario, .pagina-interna a.botao-primario:hover { color: #fff; }
.pagina-interna a.botao-secundario { color: var(--cor-acao); }
.pagina-interna a.botao-secundario:hover { color: #fff; }

/* ---------- Hero ---------- */
.pagina-interna .hero { padding: 28px 0 40px; }
.pagina-interna .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: stretch; }
.pagina-interna .hero h1 { font-size: 32px; line-height: 1.15; font-weight: 400; margin: 0 0 16px; }
.pagina-interna .hero .barra-degrade { display: none; }
.pagina-interna .hero p.subtitulo { font-size: 17px; line-height: 1.5; color: var(--cor-texto); margin: 0 0 24px; max-width: 60ch; }
.pagina-interna .hero .acoes { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.pagina-interna .hero .acoes .botao { width: 100%; }
.pagina-interna .hero-foto {
  margin: 0; max-width: none; border-radius: var(--raio-card); overflow: hidden; background: var(--cor-fundo-alt);
  box-shadow: 0 1px 2px rgba(51,17,38,.04), 0 16px 40px -16px rgba(51,17,38,.2); aspect-ratio: 4 / 3;
}
.pagina-interna .hero-foto img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.pagina-interna .hero-foto img[src*="foto-dra-graziela-hero"] { object-position: center 12%; }
/* Dificuldade para engravidar: centraliza a médica (foto-dra-mesa.webp, sujeito à direita no arquivo). Local a esta classe. */
.pagina-interna .hero-foto--centro-dra img { object-position: 100% 0; transform: scale(1.3); transform-origin: 100% 0; }

/* Faixa de credenciais (ginecologia) */
.pagina-interna .faixa-credenciais {
  display: grid; gap: 4px; padding: 16px 20px; margin: 0 0 8px;
  background: var(--cor-fundo-alt); border: 1px solid var(--cor-borda); border-radius: 20px;
  font-size: 15px; font-weight: var(--peso-semibold); color: var(--cor-texto);
}
.pagina-interna .faixa-credenciais .item { min-height: 28px; }

/* ---------- Seções ---------- */
.pagina-interna .secao { padding: var(--h-secao-y) 0; }
.pagina-interna .secao--alt { background: var(--cor-fundo-alt); }
.pagina-interna .secao h2 { font-size: 28px; line-height: 1.2; font-weight: 400; margin: 0 0 12px; }
.pagina-interna .secao .intro { color: var(--cor-texto); max-width: 72ch; margin: 0 0 24px; }
.pagina-interna .secao h2 + .intro { margin-top: 0; }

/* Texto corrido: leitura em até 72ch */
.pagina-interna .corpo-artigo { max-width: 72ch; }
.pagina-interna .corpo-artigo h2 { font-size: 28px; line-height: 1.2; font-weight: 400; margin: 40px 0 12px; }
.pagina-interna .corpo-artigo h2:first-child { margin-top: 0; }
.pagina-interna .corpo-artigo p { margin: 0 0 16px; }
.pagina-interna .corpo-artigo ul { list-style: disc; padding-left: 1.3em; margin: 0 0 16px; }
.pagina-interna .corpo-artigo ol { padding-left: 1.4em; margin: 0 0 16px; }
.pagina-interna .corpo-artigo li { margin-bottom: 8px; }
.pagina-interna .corpo-artigo a, .pagina-interna .intro a, .pagina-interna .fontes a, .pagina-interna .faq p a {
  color: var(--cor-acao); text-decoration: underline; text-underline-offset: 3px;
}

/* Cards */
.pagina-interna .grade-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0 0 20px; }
.pagina-interna .grade-cards--2col { grid-template-columns: minmax(0, 1fr); }
.pagina-interna .card {
  display: flex; flex-direction: column; gap: 8px; height: 100%; overflow-wrap: anywhere;
  background: #fff; border: 1px solid var(--cor-borda); border-radius: 20px; padding: 24px; box-shadow: none;
}
.pagina-interna .secao--alt .card { background: #fff; }
.pagina-interna .card h3 { font-size: 19px; line-height: 1.25; margin: 0; }
.pagina-interna .card p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--cor-texto); }
.pagina-interna .card a.link-card {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: auto;
  color: var(--cor-acao); font-weight: var(--peso-bold); font-size: 16px;
}
.pagina-interna .card a.link-card:hover { text-decoration: underline; text-underline-offset: 4px; }
.pagina-interna .secao p > a[onclick*="cta_valor"] { margin-top: 4px; }

/* Citação da médica (ginecologia) */
.pagina-interna .bloco-pessoal {
  max-width: 72ch; padding: 28px 24px; border: 1px solid var(--cor-borda); border-left: 4px solid var(--cor-acao);
  border-radius: 20px; box-shadow: none; background: #fff;
}
.pagina-interna .bloco-pessoal::before { display: none; }
.pagina-interna .bloco-pessoal p.citacao { font-family: var(--h-serif); font-weight: 400; font-size: 20px; line-height: 1.45; color: #2a1f26; margin: 0 0 20px; }
.pagina-interna .bloco-pessoal .assinatura { font-size: 15px; }
.pagina-interna .bloco-pessoal .assinatura a { color: var(--cor-acao); font-weight: var(--peso-semibold); display: inline-flex; align-items: center; min-height: 44px; }

/* Tabela comparativa: contêiner rolável identificado (tabindex + região nomeada no HTML) */
.pagina-interna .tabela-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  margin: 0 0 12px; border: 1px solid var(--cor-borda); border-radius: 20px; background: #fff;
}
.pagina-interna .tabela-wrap table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 16px; }
.pagina-interna .tabela-wrap caption { padding: 16px 16px 8px; font-size: 14px; color: var(--cor-texto-secundario); }
.pagina-interna .tabela-wrap th, .pagina-interna .tabela-wrap td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cor-borda); }
.pagina-interna .tabela-wrap th { background: var(--cor-fundo-alt); border-bottom: 2px solid var(--cor-borda); font-weight: var(--peso-semibold); }
.pagina-interna .tabela-wrap tbody tr:last-child td { border-bottom: 0; }
.pagina-interna .tabela-dica { font-size: 14px; color: var(--cor-texto-secundario); margin: 0 0 16px; }

/* FAQ (details/summary, teclado nativo) */
.pagina-interna .faq .wrap > details, .pagina-interna .faq details { max-width: 800px; }
.pagina-interna .faq details { border-bottom: 1px solid var(--cor-borda); padding: 0; }
.pagina-interna .faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 56px; padding: 12px 0; font-weight: var(--peso-semibold); font-size: 18px; line-height: 1.35;
}
.pagina-interna .faq summary::-webkit-details-marker { display: none; }
.pagina-interna .faq summary .chevron { display: none; }
.pagina-interna .faq summary::after { content: "+"; flex: none; font-size: 24px; color: var(--cor-acao); line-height: 1; }
.pagina-interna .faq details[open] summary::after { content: "\2212"; }
.pagina-interna .faq details p { margin: 0 0 16px; color: var(--cor-texto); max-width: 64ch; }

/* Bloco de vídeo (SOP, TASK-008): miniatura vinculada ao link original do YouTube, sem iframe nem autoplay.
   Seletores específicos de .video-*; nenhuma das páginas dos lotes anteriores usa esse componente. */
.pagina-interna #video h2 svg { flex: none; color: var(--cor-acao); }
.pagina-interna .video-thumb-wrap { display: block; max-width: 420px; color: inherit; }
.pagina-interna .video-embed-wrap { border-radius: 20px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(51,17,38,.04), 0 16px 40px -16px rgba(51,17,38,.2); }
.pagina-interna .video-play-icon { width: 56px; height: 56px; }
.pagina-interna .legenda-video { font-size: 16px; line-height: 1.4; font-weight: var(--peso-semibold); color: var(--cor-acao); }
.pagina-interna .video-thumb-wrap:hover .legenda-video { text-decoration: underline; text-underline-offset: 4px; }
.pagina-interna .video-thumb-wrap:focus-visible { outline-offset: 6px; border-radius: 20px; }

/* Fontes */
.pagina-interna .fontes ul { list-style: disc; padding-left: 1.3em; margin: 0; font-size: 14px; }
.pagina-interna .fontes li { margin-bottom: 8px; overflow-wrap: anywhere; }

/* ---------- Rodapé: usa o .rodape compartilhado; só ajusta alvos de toque (igual à home) ---------- */
.pagina-interna .rodape { border-top: 1px solid var(--cor-borda); padding: 40px 0 24px; }
.pagina-interna .rodape p, .pagina-interna .rodape h4 { overflow-wrap: anywhere; }
.pagina-interna .rodape a { display: inline-block; padding: 6px 0; }
.pagina-interna .rodape .creditos-marca { align-items: center; }

/* Telas muito estreitas (zoom 200% em celular) */
@media (max-width: 359px) {
  .pagina-interna .h-cab__in { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .pagina-interna .h-marca { min-width: 0; flex: 1 1 100%; }
  .pagina-interna .h-marca span { overflow-wrap: anywhere; }
  .pagina-interna .hero h1 { font-size: 28px; overflow-wrap: anywhere; }
  .pagina-interna.h-js .h-nav { top: auto; }
  .pagina-interna .botao { max-width: 100%; padding: 14px 16px; white-space: normal; }
  .pagina-interna .h-cont, .pagina-interna .wrap { padding-left: 12px; padding-right: 12px; }
}

/* ================= Tablet 768+ ================= */
@media (min-width: 768px) {
  .pagina-interna { --h-gutter: 32px; --h-secao-y: 64px; font-size: 18px; line-height: 1.6; }
  .pagina-interna .h-cab__in { min-height: 88px; }
  .pagina-interna .h-marca span { font-size: 20px; white-space: nowrap; }
  .pagina-interna .h-cta-cab { display: inline-flex; white-space: nowrap; padding: 12px 24px; min-height: 48px; }
  .pagina-interna .h-nav .h-cta-menu { display: none; }
  .pagina-interna .h-cab__in > .h-cta-cab { margin-left: auto; }
  .pagina-interna.h-js .h-nav { max-height: calc(100dvh - 88px); }
  .pagina-interna .hero { padding: 40px 0 56px; }
  .pagina-interna .hero h1 { font-size: 40px; line-height: 1.1; }
  .pagina-interna .hero p.subtitulo { font-size: 18px; line-height: 1.6; }
  .pagina-interna .hero .acoes { flex-direction: row; align-items: center; gap: 24px; }
  .pagina-interna .hero .acoes .botao { width: auto; }
  .pagina-interna .faixa-credenciais { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 4px 24px; }
  .pagina-interna .secao h2, .pagina-interna .corpo-artigo h2 { font-size: 32px; }
  .pagina-interna .corpo-artigo h2 { margin-top: 48px; }
  .pagina-interna .grade-cards--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .pagina-interna .bloco-pessoal { padding: 36px 40px; }
  .pagina-interna .bloco-pessoal p.citacao { font-size: 22px; }
  .pagina-interna .tabela-dica { display: none; }
  .pagina-interna .rodape { padding: 56px 0 32px; }
}

/* ================= Desktop 1024+ ================= */
@media (min-width: 1024px) {
  .pagina-interna { --h-gutter: 24px; }
  .pagina-interna .hero { padding: 56px 0; }
  .pagina-interna .hero-grid { grid-template-columns: 55fr 45fr; gap: 48px; align-items: center; }
  .pagina-interna .hero h1 { font-size: 44px; }
  .pagina-interna .hero-foto { aspect-ratio: 3 / 4; max-width: 420px; justify-self: end; width: 100%; }
  .pagina-interna .hero-foto--centro-dra img { object-position: 88% 0; transform: none; }
  .pagina-interna .grade-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .pagina-interna .grade-cards--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================= Navegação horizontal 1280+ (os 5 itens + CTA só cabem em uma linha aqui) ================= */
@media (min-width: 1280px) {
  .pagina-interna:not(.h-js) .h-cab__in { flex-wrap: nowrap; padding-bottom: 0; }
  .pagina-interna:not(.h-js) .h-nav { order: 0; flex-basis: auto; }
  .pagina-interna .h-cab .h-cont { max-width: 1280px; }
  .pagina-interna .h-menu-btn, .pagina-interna .h-nav__fechar, .pagina-interna.h-js .h-nav__fechar, .pagina-interna .h-nav .h-cta-menu { display: none !important; }
  .pagina-interna.h-js .h-nav, .pagina-interna .h-nav {
    display: block; position: static; box-shadow: none; border: 0; padding: 0; max-height: none; overflow: visible; background: transparent;
  }
  .pagina-interna .h-nav ul { flex-direction: row; gap: 0; }
  .pagina-interna .h-nav ul li + li { border-top: 0; }
  .pagina-interna .h-nav a.h-nav__link { padding: 8px 8px; font-size: 15px; white-space: nowrap; }
  .pagina-interna .h-cab__in > .h-cta-cab { margin-left: 0; padding: 12px 20px; }
  .pagina-interna .h-marca span { font-size: 20px; }
  .pagina-interna .h-marca img { height: 52px; }
}

/* Etapas em cinco cards (FIV, TASK-009): empilhadas no celular, 2 colunas no tablet (5º card em largura total)
   e 3 + 2 no desktop. Usado hoje só por procedimentos/fertilizacao-in-vitro entre as páginas que carregam este arquivo. */
.pagina-interna .grade-cards--5col { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .pagina-interna .grade-cards--5col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina-interna .grade-cards--5col > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .pagina-interna .grade-cards--5col { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pagina-interna .grade-cards--5col > * { grid-column: span 2; }
  .pagina-interna .grade-cards--5col > :nth-child(n+4) { grid-column: span 3; }
}

/* Etapas em quatro cards (congelamento de óvulos, TASK-018): empilhadas no celular, 2 x 2 no tablet e 4 em linha no desktop,
   sem exceção para o último card. Usado só por caminhos/congelamento-de-ovulos. */
.pagina-interna .grade-cards--4col { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .pagina-interna .grade-cards--4col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pagina-interna .grade-cards--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Links dentro de tabelas (dificuldade para engravidar, TASK-010): precisam ser identificáveis sem depender da cor. */
.pagina-interna .tabela-wrap td a { color: var(--cor-acao); font-weight: var(--peso-semibold); text-decoration: underline; text-underline-offset: 3px; }

/* Tabela comparativa de dificuldade para engravidar (TASK-010): células com textos longos. Largura mínima maior evita linhas
   de 400px no celular; rola de lado até ~964px de viewport, onde a dica de rolagem continua visível. */
.pagina-interna .tabela-wrap--larga table { min-width: 900px; }
@media (min-width: 768px) and (max-width: 964px) {
  .pagina-interna .tabela-dica--ate-964 { display: block; }
}

/* Ilustração do congelamento (#reserva): quadrado 1:1 como na composição original, em vez do cartão 3:4 dos heros. */
.pagina-interna #reserva .hero-foto { aspect-ratio: 1 / 1; max-width: 320px; background: #fff; }
.pagina-interna #reserva .hero-foto img { object-fit: contain; }

/* ================= Componentes de hubs e páginas institucionais (TASK-011) =================
   Escopo .pagina-interna. Usados por /caminhos/, /procedimentos/, /respostas/, /sobre/*, /privacidade/ e 404. */

/* Cards de hub (link inteiro) */
.pagina-interna a.card { text-decoration: none; color: inherit; transition: border-color .2s ease; }
.pagina-interna a.card:hover { border-color: var(--cor-acao); }
.pagina-interna a.card:focus-visible { border-radius: 20px; outline-offset: 4px; }
.pagina-interna .card > span.link-card { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--cor-acao); font-weight: var(--peso-bold); font-size: 16px; }
.pagina-interna a.card:hover > span.link-card { text-decoration: underline; text-underline-offset: 4px; }
.pagina-interna .hub-grupo + .hub-grupo { margin-top: 40px; }
.pagina-interna .hub-grupo > h2 { margin: 0 0 20px; scroll-margin-top: 24px; }

/* Fotos reais do consultório, mapa e embeds */
.pagina-interna .foto-real { border-radius: 20px; border: 1px solid var(--cor-borda); box-shadow: none; background: #fff; }
.pagina-interna .foto-real img { height: auto; aspect-ratio: 4 / 3; }
.pagina-interna .foto-real figcaption { font-size: 14px; color: var(--cor-texto-secundario); }
.pagina-interna .mapa-embed-wrap, .pagina-interna .instagram-embed-wrap { border-radius: 20px; border: 1px solid var(--cor-borda); }
.pagina-interna .grade-videos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.pagina-interna .grade-videos .video-thumb-wrap { max-width: none; }

/* Logo de parceiro no lugar da foto do hero (Embrion): cartão claro, logotipo sem corte */
.pagina-interna .hero-foto--logo { display: flex; align-items: center; justify-content: center; padding: 32px; aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--cor-borda); box-shadow: none; }
.pagina-interna .hero-foto--logo img { width: 100%; max-width: 260px; height: auto; aspect-ratio: auto; object-fit: contain; }

/* Páginas sem foto (privacidade, 404): hero de coluna única */
.pagina-interna .hero > .wrap:only-child:not(.hero-grid) { max-width: 800px; }
.pagina-interna .hero:has(> .wrap:only-child:not(.hero-grid)) { padding-bottom: 8px; }

@media (min-width: 768px) {
  .pagina-interna .hub-grupo + .hub-grupo { margin-top: 64px; }
  .pagina-interna .grade-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pagina-interna .hero-foto--logo { aspect-ratio: 4 / 3; max-width: 420px; }
}