/* =============================================================
   Shared components — reused across index.html AND the inner pages
   (patologías, procedimientos, pacientes-internacionales)
   ============================================================= */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.6rem; border-radius: 999px;
  font-weight: 600; font-size: .95rem;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s var(--ease-out);
}
.btn-primary { background: var(--accent); color: var(--bg); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(6,30,58,.28); }
.btn-ghost { border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn-whatsapp { background: #1f8a4c; color: #fff; justify-content: center; width: 100%; }
.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(31,138,76,.28); }

/* Kicker label (hero + coming-soon) */
.kicker { font-size: .85rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 1rem; }

/* Pathology / surgery card (patologías + procedimientos grids on index.html) */
.pathology-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
  padding: 2rem; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.pathology-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(6,30,58,.14); border-color: var(--accent); }
.pathology-icon {
  width: 60px; height: 60px; border-radius: 50%; background: var(--bg-2);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem;
  color: var(--accent); font-size: 1.3rem;
}
.pathology-icon img { width: 42px; height: 42px; object-fit: contain; }
.pathology-card h3 { font-size: 1.25rem; margin-bottom: .75rem; }

/* Variante con imagen 3D en el cuadrante superior derecho.
   La foto flota a la derecha para que la etiqueta, el título y el texto se
   acomoden solos alrededor. El fondo blanco de la imagen se funde con la
   tarjeta (--paper = #fff). */
.pathology-card--photo .pathology-photo {
  float: right;
  width: 50%;
  max-width: 210px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 50%;
  background: var(--paper);            /* mismo blanco que la foto y la tarjeta */
  /* El aire para que las trompas salgan enteras va horneado en la propia imagen
     (lienzo con margen), no en padding %, que dependía del ancho de la tarjeta. */
  border: 1.5px solid var(--accent-2);  /* aro oro satinado */
  box-shadow: 0 0 0 5px rgba(169,121,43,.09),   /* halo dorado suave */
              0 12px 26px rgba(6,30,58,.12);     /* profundidad premium */
  margin: -.35rem -.35rem .7rem 1.1rem;
  shape-outside: circle(50%);           /* el texto abraza la curva del círculo */
}
@media (min-width: 540px) and (max-width: 1279px) {
  /* En 2 columnas la tarjeta es más ancha: la imagen puede crecer un poco */
  .pathology-card--photo .pathology-photo { width: 45%; max-width: 232px; }
}
/* Aro azul precisión para patología benigna (las oncológicas y las cirugías van en oro) */
.pathology-card--photo.is-blue .pathology-photo {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px rgba(6,30,58,.08),
              0 12px 26px rgba(6,30,58,.12);
}
.pathology-card p { color: var(--ink-soft); font-size: .95rem; }
.card-link { display: inline-block; margin-top: 1rem; font-weight: 600; color: var(--accent); font-size: .9rem; }

/* Category tag (index cards + patología detail-hero) */
.pathology-tag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .65rem; border-radius: 999px; margin-bottom: .9rem; }
.pathology-tag.oncologica { background: rgba(6,30,58,.08); color: var(--ink); }
.pathology-tag.benigna { background: rgba(169,121,43,.12); color: var(--accent-2); }

/* Small text notes (index cards + detail pages) */
.source-note { font-size: .78rem; color: var(--ink-mute); margin-top: .75rem; }
.related-note { font-size: .95rem; color: var(--ink-mute); margin-bottom: 1.5rem; }
.inline-link { color: var(--accent-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.inline-link:hover { color: #7f5c1f; }