/* ==========================================================================
   Support Vida: páginas internas (sobre, serviços, contato, blog e legais).
   Só o conteúdo: tokens, botões, cabeçalho, rodapé e modais vêm de base.css.
   Os nomes de classe são os que js/main.js já procura (.category-toggle,
   .service-row, .gallery, .lightbox-*, #contatoForm); não renomear sem ajustar lá.
   ========================================================================== */

/* Foto em caixa: quem define o tamanho é o componente. */
.ph-img { object-fit: cover; }

.h-display { font-family: var(--titulo); }

/* Topo da página: o mesmo tecido do hero, sem a foto. ------------------------*/
.pagina-topo { padding-top: 28px; }
.pagina-painel {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 14px;
  min-height: 260px; padding: clamp(28px, 4.667vw, 56px);
  border-radius: 28px;
  background: var(--hero-base); color: var(--branco);
}
.pagina-painel h1 {
  max-width: 820px;
  font-size: clamp(34px, 5vw, 60px); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; text-wrap: balance;
}
.page-intro, .lede { max-width: 620px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.5; }

/* Títulos de seção ----------------------------------------------------------*/
.section { margin-top: 64px; }
.section-inner {
  width: min(100% - 2 * var(--margem), var(--largura));
  margin-inline: auto;
}
.section-title {
  margin-bottom: 20px;
  font-size: clamp(28px, 3.34vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -.015em; text-wrap: balance;
}

/* Sobre ---------------------------------------------------------------------*/
.bio-row {
  width: min(100% - 2 * var(--margem), var(--largura));
  margin: 24px auto 0;
  display: grid; grid-template-columns: minmax(0, 486fr) minmax(0, 690fr); gap: 24px;
}
.bio-photo {
  width: 100%; height: clamp(380px, 38vw, 520px);
  border-radius: 20px; background: var(--quente);
  object-position: center top;
}
.bio-text {
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  padding: clamp(24px, 3.4vw, 40px); border-radius: 20px;
}
.body-copy { font-size: 17px; line-height: 1.6; }
.crm-line {
  align-self: flex-start; padding: 6px 14px; border-radius: 16px;
  background: var(--rosa); color: var(--vermelho-forte);
  font: 700 14px/20px var(--titulo);
}

.title-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  padding: clamp(20px, 2.4vw, 28px); border-radius: 20px;
}
.title-row { display: flex; align-items: flex-start; gap: 14px; }
.num {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--rosa); color: var(--vermelho-forte); font: 700 15px/1 var(--titulo);
}
.title-row-text { font-size: 15px; line-height: 1.5; }
.title-row-text strong { display: block; font: 700 16px/22px var(--titulo); }

/* Galeria: a altura mora na grade, e o quadro corta a foto para o zoom do hover não
   empurrar as vizinhas. A fachada ocupa duas colunas e fecha as 8 células. */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 24px; }
.gallery-item {
  overflow: hidden; border-radius: 18px; background: var(--quente); cursor: zoom-in;
  transition: transform .3s var(--suave), box-shadow .3s var(--suave);
}
.gallery-item:first-child { grid-column: span 2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--suave); }
@media (hover: hover) {
  .gallery-item:hover { transform: translateY(-4px); box-shadow: var(--sombra-elevada); }
  .gallery-item:hover img { transform: scale(1.04); }
}

/* Galeria em tela cheia: usa o <dialog> de .modal, com o cartão transparente. */
.lightbox .modal-card {
  width: min(1180px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; overflow: visible; border: 0;
  background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.lightbox::backdrop {
  background: rgba(43, 33, 30, .4);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}
.lightbox-stage {
  position: relative; overflow: hidden; height: calc(100dvh - 24px); max-height: 78vh;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px;
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}
.lightbox-track { display: flex; height: 100%; touch-action: pan-y; cursor: grab; transition: transform .3s var(--suave); }
.lightbox-track:active { cursor: grabbing; }
.lightbox-track.sem-transicao { transition: none; }
.lightbox-slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; height: 100%; }
.lightbox-slide img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.lightbox .modal-fechar, .lightbox-nav, .lightbox-counter {
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(36, 26, 24, .55); color: var(--branco);
  -webkit-backdrop-filter: var(--flat-filtro);
  backdrop-filter: var(--flat-filtro);
}
.lightbox .modal-fechar { top: 12px; right: 12px; z-index: 2; }
.lightbox .modal-fechar:hover, .lightbox-nav:hover { background: rgba(36, 26, 24, .8); color: var(--branco); }
.lightbox-nav {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}
.lightbox-nav:disabled { opacity: 0; pointer-events: none; }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-counter {
  position: absolute; left: 50%; bottom: 14px; z-index: 2; transform: translateX(-50%);
  padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 500;
}
@media (prefers-reduced-motion: reduce) { .lightbox-track { transition: none; } }

/* Serviços ------------------------------------------------------------------*/
.categories-wrap {
  width: min(100% - 2 * var(--margem), var(--largura));
  margin: 24px auto 0;
  display: flex; flex-direction: column; gap: 24px;
}
.category-card { border-radius: 20px; overflow: hidden; }
.category-toggle {
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: clamp(18px, 2.2vw, 24px); border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.icon-box {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--rosa); color: var(--vermelho-forte);
  transition: background-color .15s ease, color .15s ease;
}
.category-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.category-title { font-size: clamp(19px, 2vw, 24px); line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.category-count { font-size: 14px; color: var(--tinta-fraca); }
.category-chevron { flex: none; color: var(--tinta-fraca); transition: transform .3s var(--suave), color .15s ease; }
.category-toggle[aria-expanded="true"] .category-chevron { transform: rotate(180deg); color: var(--vermelho-forte); }
@media (hover: hover) {
  .category-toggle:hover .icon-box { background: var(--vermelho-forte); color: var(--branco); }
}

.category-panel { padding: 0 clamp(18px, 2.2vw, 24px) clamp(18px, 2.2vw, 24px); }
.category-panel[hidden] { display: none; }
.category-panel:not([hidden]) { animation: panelEntra .25s var(--suave) both; }
@keyframes panelEntra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .category-panel:not([hidden]) { animation: none; } }

.consultas-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.svc-card {
  display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 16px;
  border: 1px solid var(--flat-borda); background: var(--flat-claro);
  transition: border-color .15s ease, transform .3s var(--suave), box-shadow .3s var(--suave);
}
.svc-card h3 { font-size: 17px; line-height: 1.26; font-weight: 700; text-wrap: balance; }
.svc-card p { font-size: 14px; line-height: 1.43; }
@media (hover: hover) {
  .svc-card:hover { transform: translateY(-4px); border-color: var(--vermelho); box-shadow: var(--sombra-vidro); }
}

.sub-rows { display: flex; flex-direction: column; gap: 14px; }
.service-row {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px;
  padding: clamp(16px, 2vw, 20px); border-radius: 16px;
  border: 1px solid var(--flat-borda); background: var(--flat-claro);
  transition: border-color .15s ease;
}
@media (hover: hover) { .service-row:hover { border-color: var(--vermelho); } }
.service-photo { flex: none; width: 112px; height: 112px; border-radius: 14px; }
.service-body { flex: 1 1 200px; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.service-title { font: 700 19px/1.26 var(--titulo); }
.service-desc { font-size: 15px; line-height: 1.5; color: var(--tinta-suave); }
.service-cta { align-self: center; }

.exam-facts { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: var(--tinta-suave); }
.exam-facts b { color: var(--tinta); font-weight: 700; }
.exam-prep summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none;
  color: var(--vermelho-vidro); font: 700 14px/20px var(--titulo);
}
.exam-prep summary::-webkit-details-marker { display: none; }
.exam-prep summary::after {
  content: ""; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--suave);
}
.exam-prep[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.exam-prep ul { margin: 2px 0 10px; padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 6px; }
.exam-prep li { font-size: 15px; line-height: 1.5; color: var(--tinta-suave); }
.exam-prep-note { padding: 10px 14px; border-radius: 12px; background: var(--quente); font-size: 14px; line-height: 1.5; color: var(--tinta-suave); }
@media (prefers-reduced-motion: reduce) { .exam-prep summary::after { transition: none; } }

/* Contato -------------------------------------------------------------------*/
.contact-grid {
  width: min(100% - 2 * var(--margem), var(--largura));
  margin: 24px auto 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
}
.contact-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.panel { padding: clamp(20px, 2.6vw, 32px); border-radius: 20px; }
.form-card { display: flex; flex-direction: column; gap: 16px; }
.form-title { font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.field, .form-row > div { display: flex; flex-direction: column; gap: 6px; }
.form-row { display: flex; flex-wrap: wrap; gap: 16px; }
.form-row > div { flex: 1 1 180px; min-width: 0; }
.form-card label { font: 700 13px/1.3 var(--titulo); color: var(--tinta-suave); }
.form-card input, .form-card textarea {
  width: 100%; min-height: 46px; padding: 11px 14px;
  border: 1px solid var(--linha); border-radius: 12px; background: var(--branco); color: var(--tinta);
  font: 400 16px/1.4 var(--corpo);   /* 16 px: o iOS não dá zoom ao focar */
}
/* A mensagem absorve a altura que sobra, para o cartão acompanhar a coluna ao lado. */
.form-card .field:has(textarea) { flex: 1; }
.form-card textarea { flex: 1; resize: vertical; }
.form-card input:focus, .form-card textarea:focus { outline: 2px solid var(--vermelho); outline-offset: 1px; }
.form-submit { align-self: flex-start; }
.form-hint a { color: var(--vermelho-forte); text-decoration: underline; text-underline-offset: 2px; }

.info-list { display: flex; flex-direction: column; gap: 16px; }
.info-item { display: flex; flex-direction: column; gap: 2px; }
.info-label { font: 700 13px/1.3 var(--titulo); color: var(--tinta-fraca); }
.info-value { font-size: 16px; line-height: 1.5; }
.info-value a { text-underline-offset: 3px; }
@media (hover: hover) { .info-value a:hover { color: var(--vermelho-forte); text-decoration: underline; } }
.info-social { display: flex; gap: 10px; margin-top: 4px; }
.social {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--rosa); color: var(--vermelho-forte);
  transition: background-color .15s ease, color .15s ease;
}
.social svg { width: 18px; height: 18px; }
@media (hover: hover) { .social:hover { background: var(--vermelho-forte); color: var(--branco); } }
.map-embed { position: relative; flex: 1; min-height: 280px; border-radius: 20px; overflow: hidden; background: var(--quente); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Páginas legais ------------------------------------------------------------*/
.legal-body {
  width: min(100% - 2 * var(--margem), 860px);
  margin: 24px auto 0; padding: clamp(24px, 4vw, 48px); border-radius: 20px;
}
.legal-body h2 { margin: 32px 0 10px; font-size: 20px; line-height: 1.3; font-weight: 700; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { font-size: 16px; line-height: 1.65; color: var(--tinta-suave); }
.legal-body p + p { margin-top: 10px; }
.legal-body a { color: var(--vermelho-forte); text-decoration: underline; text-underline-offset: 2px; }
.legal-body ul { margin: 6px 0; padding-left: 20px; list-style: disc; }
.updated { margin-top: 32px; font-size: 14px; color: var(--tinta-fraca); }

/* "Saiba mais" na lista de serviços. */
.exam-saiba {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--vermelho-vidro); font: 700 14px/20px var(--titulo);
  text-decoration: underline; text-underline-offset: 3px;
}
.consultas-saiba { display: flex; width: fit-content; margin-top: 8px; }

/* Páginas de cada serviço -----------------------------------------------------*/
.migalhas {
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  width: min(100% - 2 * var(--margem), var(--largura));
  margin: 16px auto 0; font-size: 14px; color: var(--tinta-suave);
}
.migalhas a { color: var(--vermelho-forte); text-decoration: underline; text-underline-offset: 2px; }
.servico-grade {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 24px;
  width: min(100% - 2 * var(--margem), var(--largura));
  margin: 16px auto 0;
}
.servico-texto { width: auto; margin: 0; }
.servico-texto h3 { margin: 18px 0 2px; font: 700 16px/1.4 var(--titulo); }
.servico-texto ul { display: flex; flex-direction: column; gap: 6px; }
.servico-texto .exam-prep-note { margin-top: 12px; font-size: 14px; line-height: 1.5; }
.servico-resp { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--flat-borda); }
.legal-body p.servico-resp { font-size: 14px; line-height: 1.5; }
.servico-lado { position: sticky; top: 104px; }
.servico-cartao { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 20px; }
/* Quadrada e inteira: as fotos trazem a logo da clínica perto da borda de baixo. */
.servico-cartao .service-photo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.servico-cartao .btn { width: 100%; justify-content: center; }
.servico-fatos { display: flex; flex-direction: column; gap: 10px; }
.servico-fatos dt { font: 700 14px/20px var(--titulo); }
.servico-fatos dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--tinta-suave); }
.servico-end { font-size: 13px; line-height: 1.4; color: var(--tinta-suave); }

@media (max-width: 999px) {
  .servico-grade { grid-template-columns: minmax(0, 1fr); }
  .servico-lado { position: static; order: -1; }
  .servico-cartao .service-photo { width: 112px; }
}

/* Faixa do CTA com texto de apoio -------------------------------------------*/
.cta-texto { flex: 1 1 440px; min-width: 0; }
.cta-texto h2 { max-width: none; }
.cta-texto p { margin-top: 4px; font-size: 15px; line-height: 1.4; }
.cta .cta-texto h2 { flex: none; }

/* Até 1160 -------------------------------------------------------------------*/
@media (max-width: 1160px) {
  .cta-texto { flex: 1 1 100%; }
}

/* Abaixo de 1000: uma coluna, grades de 2 ------------------------------------*/
@media (max-width: 999px) {
  .pagina-topo { padding-top: 12px; }
  .pagina-painel { min-height: 200px; border-radius: 24px; }
  .pagina-fundo { background-image: url("../images/hero-tecido-m.webp"); }
  .section { margin-top: 48px; }

  .bio-row { grid-template-columns: minmax(0, 1fr); }
  .bio-photo { height: min(100vw, 520px); }

  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; gap: 14px; }

  .consultas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Abaixo de 700 --------------------------------------------------------------*/
@media (max-width: 699px) {
  .pagina-painel { min-height: 0; padding: 28px 24px; border-radius: 22px; gap: 10px; }
  .title-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .gallery { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; }
  .gallery-item:first-child { grid-column: auto; }

  .consultas-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .form-submit { align-self: stretch; }
  .cta-texto { margin-bottom: 16px; }
  .cta-texto h2 { margin-bottom: 0; }
}

/* Coluna: o .service-row vira pilha, e js/main.js lê este flex-direction. O flex-basis
   do corpo viraria altura mínima, por isso volta a auto. */
@media (max-width: 560px) {
  .service-row { flex-direction: column; flex-wrap: nowrap; }
  .service-photo { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .service-body { flex: 0 0 auto; width: 100%; min-width: 0; }
  .service-cta { align-self: stretch; }
}

@media (prefers-reduced-transparency: reduce) {
  .svc-card, .service-row { background: var(--branco); }
}