/* Page-specific styles for /clinica/ (unified hub) */

.hero {
  background:
    radial-gradient(ellipse at top right, rgba(0,168,186,.22) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(0,168,186,.10) 0%, transparent 60%),
    var(--cdc-teal-50);
}

/* ---------- Specialty Grid ---------- */
.esp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 540px) { .esp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 820px) { .esp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .esp-grid { grid-template-columns: repeat(4, 1fr); } }

.esp-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-7);
  background: var(--cdc-white);
  border: 1px solid var(--cdc-teal-200);
  border-radius: var(--radius-md);
  color: var(--cdc-teal-900);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  transition: border-color var(--duration-2) var(--ease-out),
              background var(--duration-2) var(--ease-out),
              transform var(--duration-2) var(--ease-out);
}
.esp-card:hover {
  border-color: var(--cdc-teal-400);
  background: var(--cdc-teal-50);
  color: var(--cdc-teal-900);
  transform: translateY(-2px);
}
.esp-card__name { line-height: 1.3; }
.esp-card__arrow {
  flex-shrink: 0;
  color: var(--cdc-teal-400);
  font-weight: var(--fw-semibold);
}
.esp-grid__note {
  margin-top: var(--space-8);
  text-align: center;
  font-size: var(--fs-14);
  color: var(--cdc-teal-700);
}
.esp-grid__note a { font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Exam Categories ---------- */
.exam-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 720px) { .exam-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .exam-grid { grid-template-columns: repeat(3, 1fr); } }

.exam-card {
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-8);
  background: var(--cdc-white);
  border: 1px solid var(--cdc-teal-200);
  border-radius: var(--radius-lg);
  color: var(--cdc-teal-900);
  transition: border-color var(--duration-2) var(--ease-out),
              transform var(--duration-2) var(--ease-out);
}
.exam-card:hover {
  border-color: var(--cdc-teal-400);
  transform: translateY(-2px);
  color: var(--cdc-teal-900);
}
.exam-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
}
.exam-card__head h3 {
  font: var(--fw-semibold) var(--fs-17)/1.3 var(--font-sans);
  color: var(--cdc-teal-900);
}
.exam-card__arrow {
  flex-shrink: 0;
  color: var(--cdc-teal-400);
  font-weight: var(--fw-semibold);
}
.exam-card ul {
  display: flex; flex-direction: column; gap: var(--space-3);
  font-size: var(--fs-14); color: var(--cdc-teal-700); line-height: 1.5;
  padding-left: var(--space-6); list-style: disc;
}
.exam-card ul li::marker { color: var(--cdc-teal-400); }