/* =============================================================
   Inner pages: patologías/*.html, procedimientos/*.html and
   pacientes-internacionales.html (not used on index.html)
   ============================================================= */
.detail-hero {
  padding: calc(var(--nav-h) + 3rem) 0 3rem;
  background: var(--ink);
  color: var(--bg);
}
.breadcrumb { font-size: .8rem; color: rgba(248,246,241,.65); margin-bottom: 1.25rem; }
.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--accent-2); }
.detail-hero .pathology-tag.oncologica { background: rgba(248,246,241,.12); color: var(--bg); }
.detail-hero .pathology-tag.benigna { background: rgba(169,121,43,.22); color: var(--accent-2); }
.detail-hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); max-width: 20ch; margin-block: .75rem 1rem; }
.detail-hero .detail-lede { color: rgba(248,246,241,.85); max-width: 60ch; font-size: 1.05rem; }

.detail-body { padding: 4rem 0; }
.detail-layout { display: grid; gap: 3rem; grid-template-columns: 1fr; }
@media (min-width: 960px) { .detail-layout { grid-template-columns: 1fr 320px; align-items: start; } }

.detail-prose h2 { font-size: 1.4rem; margin: 2.5rem 0 1rem; }
/* Al llegar por un ancla (#laparoscopia, #vnotes…) el título no queda tapado por la barra fija */
.detail-prose h2[id], .detail-prose h3[id] { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.detail-prose h2:first-child { margin-top: 0; }
.detail-prose p { color: var(--ink-soft); margin-bottom: 1rem; max-width: 68ch; }
.detail-prose ul { margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: .55rem; }
.detail-prose ul li { position: relative; padding-left: 1.4rem; color: var(--ink-soft); max-width: 66ch; }
.detail-prose ul li::before { content: "—"; position: absolute; left: 0; color: var(--accent-2); }
.detail-prose strong { color: var(--ink); }

.detail-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.sidebar-card { background: var(--bg-2); border-radius: 18px; padding: 1.5rem; border: 1px solid var(--line); }
.sidebar-card h3 { font-size: .95rem; margin-bottom: .9rem; }
.sidebar-card ul { display: flex; flex-direction: column; gap: .6rem; }
.sidebar-card a { font-size: .9rem; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: .4rem; }
.sidebar-card a:hover { color: var(--accent-2); }
.sidebar-card .btn { width: 100%; justify-content: center; margin-top: .25rem; }
/* El color de enlace de la tarjeta (navy) no debe pintar el texto del botón,
   o quedaría texto navy sobre fondo navy (invisible salvo al hover). El botón
   conserva su texto claro siempre; el hover mantiene el efecto de elevación. */
.sidebar-card .btn-primary,
.sidebar-card .btn-primary:hover { color: var(--bg); }

.detail-img-placeholder { aspect-ratio: 16/9; border-radius: 18px; margin-bottom: 2.5rem; }
.detail-img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 18px; margin-bottom: 2.5rem; }

/* --- Bloque de desambiguación (cáncer de útero ↔ cérvix) --- */
.disambig {
  background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--accent-2);
  border-radius: 14px; padding: 1.15rem 1.4rem; margin: 0 0 2rem;
}
.disambig-title { font-family: var(--sans); font-weight: 600; font-size: .95rem; color: var(--ink); margin-bottom: .5rem; }
.disambig p { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; margin: 0; }
.disambig p strong { color: var(--ink); font-weight: 600; }
.disambig-link { display: inline-block; margin-top: .7rem; color: var(--accent-2); font-weight: 600; font-size: .95rem; text-decoration: underline; text-underline-offset: 2px; }

/* --- Portada de vías de abordaje (tipos-de-abordaje.html) --- */
.abordaje-intro { max-width: 820px; margin-bottom: 2.75rem; }
.abordaje-intro p { color: var(--ink-soft); line-height: 1.7; margin-bottom: 1rem; }
.abordaje-intro p:last-child { margin-bottom: 0; }
.abordaje-intro strong { color: var(--ink); font-weight: 600; }
.section-tight { padding-bottom: 0; }

/* --- Ilustración de detalle: tarjeta con inclinación 3D que sigue al cursor ---
   El marco lo crea js/tilt.js envolviendo la imagen (el HTML no cambia). */
.tilt-frame {
  position: relative; border-radius: 18px; margin-bottom: 2.5rem;
  transform: perspective(1100px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) scale(var(--ts, 1));
  box-shadow: 0 18px 40px rgba(6,30,58,.14);
  transition: transform .6s var(--ease-out), box-shadow .5s var(--ease-out);
  will-change: transform;
}
.tilt-frame .detail-img { margin-bottom: 0; }
/* Mientras el cursor está encima, la inclinación sigue al ratón casi al instante */
.tilt-frame.is-tilting { transition: transform .12s linear, box-shadow .4s var(--ease-out); box-shadow: 0 34px 66px rgba(6,30,58,.30); }

/* Brillo que persigue al cursor (::after) y filete dorado (::before) */
.tilt-frame::after, .tilt-frame::before {
  content: ""; position: absolute; inset: 0; border-radius: 18px;
  pointer-events: none; opacity: 0; transition: opacity .4s var(--ease-out);
}
.tilt-frame::after { z-index: 2; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(248,246,241,.18), rgba(248,246,241,0) 62%); }
.tilt-frame::before { z-index: 3; box-shadow: inset 0 0 0 1px rgba(169,121,43,.5); }
.tilt-frame.is-tilting::after, .tilt-frame.is-tilting::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tilt-frame, .tilt-frame.is-tilting { transform: none; transition: none; }
}

/* Figura con anotaciones superpuestas (etiquetas + flechas en SVG que escalan con la imagen) */
.incisiones-fig { position: relative; width: 100%; aspect-ratio: 16/9; margin: 0 0 2.5rem; }
.incisiones-fig .detail-img { height: 100%; margin-bottom: 0; }
.incisiones-annot { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.incisiones-annot .annot-name { font-family: var(--sans); font-weight: 600; font-size: 30px; fill: #f8f6f1; }
.incisiones-annot .annot-sub { font-family: var(--sans); font-weight: 500; font-size: 22px; fill: #a9792b; }

/* --- Cuadro comparativo de riesgo genético (cirugía reductora de riesgo) --- */
.tabla-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 0 .75rem; border: 1px solid var(--line); border-radius: 14px;
}
.tabla-riesgo {
  width: 100%; min-width: 660px; border-collapse: collapse;
  font-family: var(--sans); font-size: .9rem; background: var(--paper);
}
.tabla-riesgo th, .tabla-riesgo td {
  padding: .78rem .9rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.tabla-riesgo thead th {
  background: var(--ink); color: var(--bg);
  font-weight: 600; font-size: .8rem; letter-spacing: .01em; line-height: 1.3;
}
.tabla-riesgo tbody th {
  font-family: var(--serif); font-size: 1.1rem; color: var(--ink);
  font-weight: 600; white-space: nowrap;
}
.tabla-riesgo tbody tr:nth-child(even) td,
.tabla-riesgo tbody tr:nth-child(even) th { background: var(--bg-2); }
.tabla-riesgo tbody tr:last-child th,
.tabla-riesgo tbody tr:last-child td { border-bottom: 0; }
.tabla-riesgo td strong { color: var(--ink); }
.tabla-riesgo .pop { color: var(--ink-mute); }
.tabla-nota { font-size: .8rem; color: var(--ink-mute); line-height: 1.55; margin: 0 0 1.75rem; max-width: 68ch; }

/* Bloque destacado (llamada de atención cálida) reutilizable en detalle */
.detail-callout {
  background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--accent-2);
  border-radius: 14px; padding: 1.2rem 1.4rem; margin: 0 0 1.75rem;
}
.detail-callout p { margin: 0; color: var(--ink-soft); }
.detail-callout p strong { color: var(--ink); }

/* Per-page recovery timeline */
.section-recovery { background: var(--bg-2); }
.timeline { display: flex; flex-direction: column; gap: 0; border-left: 2px solid var(--line); margin-left: .6rem; }
.timeline-item { position: relative; padding: 0 0 2.2rem 2rem; }
.timeline-item::before {
  content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg);
}
.timeline-day { font-weight: 700; color: var(--accent); font-size: .95rem; margin-bottom: .3rem; }
.timeline-text { color: var(--ink-soft); font-size: .95rem; max-width: 48ch; }