/* Estilos globais da Clínica Sobreiro. A maior parte do visual está nos
   atributos style do HTML, exatamente como saiu do Claude Design. */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: #0C0B0A; color: #F5F2EC; font-family: Geist, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #A89B72; text-decoration: none; }
a:hover { color: #C6BB96; }
input::placeholder { color: #6B655B; opacity: 1; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #A89B72; outline-offset: 3px; }
.num { font-variant-numeric: tabular-nums; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:hover .faq-q { color: #6F6340; }
.faq-item[open] .mais { transform: rotate(45deg); }
.card-hormonal summary::-webkit-details-marker { display: none; }
.card-hormonal summary::marker { content: ""; }
.card-hormonal[open] .mais { transform: rotate(45deg); }
.card-hormonal { transition: border-color 0.5s cubic-bezier(0.16,1,0.3,1); }
.card-hormonal:hover { border-color: rgba(111,99,64,0.55); }
.card-hormonal:hover .pilula { background: #1A1815; border-color: #1A1815; color: #F5F2EC !important; }
.card-hormonal[open] .rot-abrir { display: none; }
.rot-fechar { display: none; }
.card-hormonal[open] .rot-fechar { display: inline; }
.cards-hormonal:has(> details:nth-child(1)[open]):has(> details:nth-child(2)[open]) { align-items: stretch !important; }
.card-hormonal summary:hover .card-t { color: #6F6340; }
@keyframes icoNo { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(2.4px, -2.6px) scale(1.18); } }
@keyframes icoBarra { 0%, 100% { transform: scaleY(0.62); opacity: 0.45; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes icoSobe { 0%, 100% { transform: translateY(0.9px); } 50% { transform: translateY(-1.3px); } }
@keyframes icoPulso { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.14); opacity: 0.9; } }
@keyframes icoPendulo { 0%, 100% { transform: rotate(-36deg); } 50% { transform: rotate(36deg); } }
@keyframes icoBalanca { 0%, 100% { transform: rotate(-4.5deg); } 50% { transform: rotate(4.5deg); } }
@keyframes icoFluxo { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -61; } }
@keyframes icoRelogio { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes trilhaLuz { from { background-position: 230% 0; } to { background-position: -130% 0; } }
@keyframes trilhaLuzV { from { background-position: 0 230%; } to { background-position: 0 -130%; } }
@keyframes pontoPulso {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 5px #0C0B0A; }
  5% { transform: scale(1.55); box-shadow: 0 0 0 5px #0C0B0A, 0 0 16px 3px rgba(168,155,114,0.5); }
  14% { transform: scale(1); box-shadow: 0 0 0 5px #0C0B0A; }
}
@keyframes pontoPulsoC {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 5px #F5F2EC; }
  5% { transform: scale(1.55); box-shadow: 0 0 0 5px #F5F2EC, 0 0 16px 3px rgba(111,99,64,0.38); }
  14% { transform: scale(1); box-shadow: 0 0 0 5px #F5F2EC; }
}
@media (prefers-reduced-motion: reduce) {
  .trilha-luz, .trilha .ponto, .trilha-clara .ponto, #atuacao svg *, #bioimpedancia svg *, #hormonal svg * { animation: none !important; }
}
@container (max-width: 1000px) {
  .hero { aspect-ratio: 4 / 5 !important; max-height: 92svh !important; width: 100% !important; }
}
@container (max-width: 480px) {
  .hero { aspect-ratio: auto !important; max-height: none !important; min-height: 100svh !important; }
}
@container (max-width: 1080px) {
  .menu-desktop { display: none !important; }
  .btn-topo { display: none !important; }
  .abre-menu { display: flex !important; }
  .par { grid-template-columns: minmax(0, 1fr) !important; }
  .par-foto { order: -1 !important; }
  .trio { grid-template-columns: minmax(0, 1fr) !important; }
  .trilha { grid-template-columns: minmax(0, 1fr) !important; border-top: none !important; border-left: 1px solid rgba(245,242,236,0.22) !important; padding-left: 30px !important; row-gap: 30px !important; }
  .trilha > div { padding-top: 0 !important; }
  .trilha .ponto { top: 4px !important; left: -34px !important; }
  .trilha-luz { top: 0 !important; bottom: 0 !important; left: -1px !important; right: auto !important; width: 1px !important; height: auto !important; background: linear-gradient(180deg, rgba(168,155,114,0) 38%, rgba(198,187,150,0.95) 50%, rgba(168,155,114,0) 62%) !important; background-size: 100% 240% !important; animation-name: trilhaLuzV !important; }
  .trilha .seta { top: auto !important; bottom: -6px !important; right: auto !important; left: -35px !important; transform: rotate(135deg) !important; }
  .foto-hormonal { order: -1 !important; max-width: 420px !important; }
  .trilha-clara { grid-template-columns: minmax(0, 1fr) !important; border-top: none !important; border-left: 1px solid rgba(26,24,21,0.18) !important; padding-left: 30px !important; row-gap: 30px !important; }
  .trilha-clara > div { padding-top: 0 !important; }
  .trilha-clara .ponto { top: 4px !important; left: -34px !important; }
  .trilha-clara .trilha-luz { top: 0 !important; bottom: 0 !important; left: -1px !important; right: auto !important; width: 1px !important; height: auto !important; background: linear-gradient(180deg, rgba(111,99,64,0) 38%, rgba(111,99,64,0.9) 50%, rgba(111,99,64,0) 62%) !important; background-size: 100% 240% !important; animation-name: trilhaLuzV !important; }
}
@container (max-width: 760px) {
  .seis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@container (max-width: 640px) {
  .hero > img { object-position: 54% 19% !important; }
  .hero-copy { padding-bottom: 14px !important; gap: 13px !important; }
  .foto-consulta > img { object-position: 44% 24% !important; }
  .foto-consulta, .foto-contato, .bio-media, .foto-hormonal { flex: 1 1 100% !important; width: 100% !important; }
  .foto-contato { aspect-ratio: 5 / 6 !important; }
  .foto-contato > img { object-position: 40% 0% !important; }
  .duplo { grid-template-columns: minmax(0, 1fr) !important; }
  .seis { grid-template-columns: minmax(0, 1fr) !important; }
  .bio-media { order: -1 !important; }
  .seis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .foto-consulta, .foto-contato, .par-foto > div:first-child { aspect-ratio: 4 / 3 !important; }
  .foto-hormonal { aspect-ratio: 1 / 1 !important; max-width: none !important; }
  .par-foto img { object-position: 50% 4% !important; }
  #hormonal .foto-hormonal > img { object-position: 50% 0% !important; }
  #implantes .foto-hormonal > img { object-position: 50% 8% !important; }
  #bioimpedancia .bio-media img { max-height: 320px !important; width: auto !important; }
  .rodape-nav { flex: 1 1 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px !important; }
  .rodape-nav > span { grid-column: 1 / -1; margin-bottom: 0 !important; }
  .rodape-nav > a { padding: 2px 0; }
  .rodape-info { flex: 1 1 100% !important; }
  .rodape-base { flex-direction: column; border-top: 1px solid rgba(245,242,236,0.1); padding-top: 20px; }
  .trilha, .trilha-clara { grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: 74% !important; column-gap: 0 !important; row-gap: 0 !important; border: none !important; padding: 6px 0 4px !important; margin-right: -20px !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .trilha::-webkit-scrollbar, .trilha-clara::-webkit-scrollbar { display: none; }
  .trilha, .trilha-clara { cursor: grab; user-select: none; -webkit-user-select: none; }
  .trilha > div, .trilha-clara > div { padding: 24px 22px 0 0 !important; scroll-snap-align: start; }
  .trilha > div { border-top: 1px solid rgba(245,242,236,0.22); }
  .trilha-clara > div { border-top: 1px solid rgba(26,24,21,0.18); }
  .trilha .ponto, .trilha-clara .ponto { top: -5px !important; left: 0 !important; }
  .trilha-luz, .trilha .seta, .trilha-clara .seta { display: none !important; }
}

/* Estados de hover (vinham de atributos do editor) */
.fx1:hover { color:#F5F2EC !important; }
.fx2:hover { background:#F5F2EC !important; color:#0C0B0A !important; }
.fx3:hover { border-color:#A89B72 !important; color:#F5F2EC !important; }
.fx4:hover { background:#6F6340 !important; color:#F5F2EC !important; }
.fx5:hover { color:#1A1815 !important; }
.fx6:hover { color:#6F6340 !important; }
.fx7:hover { background:#1A1815 !important; color:#F5F2EC !important; }

/* Reserva a altura da foto do InBody no celular antes de ela carregar (evita o conteúdo pular) */
@container (max-width: 640px) { #bioimpedancia .bio-media img { height: 320px !important; } }

/* Páginas internas (política de privacidade e 404) */
.texto-pagina a { color: var(--ouro-escuro); border-bottom: 1px solid rgba(111,99,64,0.35); }
.texto-pagina a:hover { color: var(--tinta); }