/* Treatments pages of the dermatology templates (fase 5): list by category and one page per treatment.
   Reading 16px+, metadata 14px+, targets 44px; mobile first. Uses the template tokens (--pu-*). */
.tr-hero-inner{display:grid;gap:24px;align-items:center}
.tr-hero-img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--pu-radius-lg)}
.tr-text{font-size:17px;line-height:1.6;margin:0 0 12px;max-width:62ch}
.tr-price{font-weight:600;font-size:17px;margin:8px 0}
.tr-related{font-size:16px;margin:8px 0}
.tr-related a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.tr-note{font-size:14px;color:var(--pu-ink-2);margin-top:12px}
.tr-group{padding:24px 0}
.tr-grid{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.tr-card a{display:flex;flex-direction:column;height:100%;min-height:44px;background:#fff;border:1px solid var(--pu-line);border-radius:var(--pu-radius-lg);overflow:hidden;color:inherit;text-decoration:none}
.tr-card a:focus-visible{outline:none;box-shadow:var(--pu-focus)}
.tr-card img,.tr-card-initial{width:100%;aspect-ratio:3/2;object-fit:cover}
.tr-card-initial{display:grid;place-items:center;background:var(--pu-icon-bg);color:var(--pu-heading);font-size:40px;font-weight:600}
.tr-card-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;font-size:16px}
.tr-card-body strong{font-size:17px}
.tr-card-body span{font-size:15px;color:var(--pu-ink-2)}
.tr-card-price{font-weight:600;color:var(--pu-ink)!important}
@media (min-width:900px){.tr-hero-inner{grid-template-columns:3fr 2fr}}