/* =============================================================
   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: 3rem 0 2rem; }
.detail-layout { display: grid; gap: 3rem; grid-template-columns: 1fr; }
/* Los items del grid deben poder encogerse por debajo de su contenido mínimo.
   Con el min-width:auto por defecto, un bloque ancho e indivisible (la tabla de
   riesgo por gen, de 660px) estiraba la columna y sacaba toda la página hacia la
   derecha en móvil, además de anular el scroll propio de .tabla-scroll. */
.detail-layout > * { min-width: 0; }
@media (min-width: 960px) { .detail-layout { grid-template-columns: minmax(0, 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; }

/* ---- Blog: bloques destacados del artículo ----
   Equivalentes de las clases Tailwind del anexo SEO (bg-blue-50 / bg-red-50),
   ya que la web no carga Tailwind. El "Consejo" lleva el azul precisión de
   marca (--accent) en el filo; el "Atención" lleva rojo (red-600). */
.detail-callout--consejo { background: #eff6ff; border-color: #dbeafe; border-left: 4px solid var(--accent); }
.detail-callout--consejo p strong { color: var(--accent); }
.detail-callout--atencion { background: #fef2f2; border-color: #fecaca; border-left: 4px solid #dc2626; }
.detail-callout--atencion p strong { color: #b91c1c; }

/* Llamadas a referencias [n] dentro del texto */
.ref { font-size: .74em; vertical-align: super; line-height: 0; color: var(--accent-2); font-weight: 600; text-decoration: none; margin-left: 1px; white-space: nowrap; }
.ref:hover { text-decoration: underline; }

/* Lista final de referencias bibliográficas */
.references { margin: 1.5rem 0 1.5rem; padding-left: 1.5rem; font-size: .84rem; color: var(--ink-mute); line-height: 1.5; display: flex; flex-direction: column; gap: .6rem; }
.references li { padding-left: .2rem; scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.references li:target { background: rgba(169,121,43,.10); border-radius: 6px; }
.references a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.references a:hover { color: var(--accent-2); }

/* Bloque de autor / revisión médica (E-E-A-T) */
.article-author { display: flex; gap: 1rem; align-items: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.3rem; margin: 2rem 0 1.5rem; }
.article-author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent-2); flex-shrink: 0; }
.article-author p { margin: 0; max-width: none; }
.article-author-name { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); font-weight: 600; }
.article-author-role { font-size: .85rem; color: var(--ink-soft); }
.article-author-meta { font-size: .78rem; color: var(--ink-mute); margin-top: .25rem !important; }

/* Referencias plegadas: cerradas por defecto, se abren al pulsar el resumen o una cita [n] */
.references-details { margin: .5rem 0 1.5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.references-details summary { cursor: pointer; padding: .9rem 1.2rem; font-family: var(--sans); font-weight: 600; font-size: .9rem; color: var(--accent); list-style: none; display: flex; align-items: center; gap: .6rem; }
.references-details summary::-webkit-details-marker { display: none; }
.references-details summary::before { content: "+"; font-weight: 700; color: var(--accent-2); width: 1em; text-align: center; }
.references-details[open] summary::before { content: "–"; }
.references-details[open] summary { border-bottom: 1px solid var(--line); }
.references-details .references { margin: 0; padding: 1rem 1.2rem 1rem 2.6rem; }

/* Bloque "más información en mis redes" (blog) */
.article-social { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.3rem; margin: 0 0 2rem; background: var(--paper); }
.article-social-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--ink); margin: 0; flex: 1 0 100%; }
.article-social-text { font-size: .9rem; color: var(--ink-soft); margin: 0; flex: 1 1 260px; max-width: none; }
.article-social-links { display: flex; gap: .6rem; flex-wrap: wrap; }
.article-social-links a { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: .88rem; color: #fff; box-shadow: 0 3px 10px rgba(6,30,58,.15); transition: transform .2s var(--ease-out), filter .2s var(--ease-out), box-shadow .2s var(--ease-out); }
/* Cada red con su color corporativo: LinkedIn azul #0a66c2; Instagram, su degradado oficial. */
.article-social-links a[href*="linkedin"] { background: #0a66c2; }
.article-social-links a[href*="instagram"] { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.article-social-links a:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 6px 16px rgba(6,30,58,.22); }
.article-social-links svg { width: 18px; height: 18px; fill: currentColor; }

/* =============================================================
   Reel de Instagram con carga al pulsar (js/reel-embed.js).
   Portada vertical 9:16 + play; al pulsar se sustituye por el iframe.
   ============================================================= */
.reel-embed { width: 100%; max-width: 340px; margin: 2rem auto; }
.reel-embed-poster { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 18px; overflow: hidden; cursor: pointer; background: var(--ink); aspect-ratio: 9 / 16; box-shadow: 0 14px 34px rgba(6,30,58,.22); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.reel-embed-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reel-embed-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,30,58,.55), rgba(6,30,58,0) 45%); }
.reel-embed-poster:hover, .reel-embed-poster:focus-visible { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(6,30,58,.3); }
.reel-embed-poster:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.reel-embed-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 6px 22px rgba(0,0,0,.35); transition: transform .3s var(--ease-out); }
.reel-embed-play::before { content: ""; position: absolute; left: 50%; top: 50%; margin: -15px 0 0 -9px; border-style: solid; border-width: 15px 0 15px 25px; border-color: transparent transparent transparent var(--accent); }
.reel-embed-poster:hover .reel-embed-play { transform: scale(1.08); }
.reel-embed-badge { position: absolute; z-index: 1; left: 50%; bottom: 1rem; transform: translateX(-50%); white-space: nowrap; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.reel-embed-frame { display: block; width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.reel-embed figcaption { margin-top: .8rem; text-align: center; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); }
.reel-embed figcaption a { display: inline-block; margin-top: .25rem; font-weight: 600; color: var(--accent-2); }
.reel-embed figcaption small { display: block; margin-top: .3rem; font-size: .74rem; color: var(--ink-mute); }
.reel-embed.is-loaded figcaption small { display: none; }